.ocean-sandbox{--ocean-ink: #e7eeee;--ocean-soft: #a9bec4;--ocean-accent: #a6d7ca;position:fixed;inset:0;z-index:50;overflow:hidden;background:#10212c;color:var(--ocean-ink);font-family:Noto Sans,sans-serif;font-size:13px;isolation:isolate}.ocean-sandbox ::-moz-selection{background:#a6d7ca;color:#0e2028}.ocean-sandbox ::selection{background:#a6d7ca;color:#0e2028}.ocean-sandbox :focus-visible{outline:2px solid var(--ocean-accent);outline-offset:3px}.ocean-sandbox button,.ocean-sandbox select{min-height:44px;cursor:pointer;border-radius:5px}.ocean-sandbox button{padding:9px 12px;transition:background .16s ease-out,color .16s ease-out}.ocean-sandbox button:hover{background:#ffffff16}.ocean-sandbox button[aria-pressed=true]{background:#a6d7ca24;color:#c5f4e5}.ocean-sandbox svg{width:20px;height:20px;stroke-width:1.5}.ocean-scene{position:absolute;inset:0}.ocean-scene canvas{width:100%;height:100%;display:block}.ocean-topbar{position:absolute;top:max(20px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}.ocean-brand,.ocean-top-actions{display:flex;align-items:center;gap:14px;pointer-events:auto}.ocean-brand a{padding:12px;background:#0c1b23b8;border-radius:50%}.ocean-brand h1{font-family:Georgia,serif;font-size:27px;line-height:1.1;letter-spacing:-.02em;color:#f1eee5;text-shadow:0 2px 12px #0a1524}.ocean-brand p{font-size:11px;color:#d5e0e2;margin-top:5px;text-shadow:0 1px 8px #000}.ocean-top-actions>button{background:#0c1b23d9}.ocean-controls-button{display:flex;align-items:center;gap:8px}.ocean-quick-controls{position:absolute;top:max(96px,calc(env(safe-area-inset-top) + 76px));right:max(24px,env(safe-area-inset-right));display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:3px;padding:5px;max-width:calc(100vw - 40px);border-radius:8px;background:#0c1b23eb;box-shadow:0 8px 26px #0003}.ocean-quick-controls button{font-size:12px}.ocean-speed select{background:transparent;padding:8px 6px;color:var(--ocean-ink);font-variant-numeric:tabular-nums}.ocean-sandbox select option{background:#152b35;color:var(--ocean-ink)}.ocean-divider{width:1px;height:20px;margin:0 4px;background:#b5d0d829}.ocean-quick-controls kbd{font:10px Noto Sans,sans-serif;margin-left:9px;opacity:.6}.ocean-mode{display:flex;gap:2px}.ocean-sidebar{position:absolute;z-index:3;top:94px;left:max(24px,env(safe-area-inset-left));bottom:max(104px,env(safe-area-inset-bottom));width:290px;padding:22px;overflow:auto;overscroll-behavior:contain;background:#0c1b23f2;border-radius:8px;box-shadow:0 14px 34px #0004;scrollbar-width:thin;scrollbar-color:#567880 #0c1b23;transform:translate(calc(-100% - 40px));visibility:hidden;transition:transform .25s cubic-bezier(.16,1,.3,1),visibility .25s}.ocean-sidebar.is-open{transform:translate(0);visibility:visible}.ocean-sidebar-title{display:flex;justify-content:space-between;align-items:center}.ocean-sidebar h2{font-family:Georgia,serif;font-size:28px;letter-spacing:-.025em}.ocean-sidebar-title button{padding:8px;margin-right:-8px}.ocean-sidebar-intro{color:var(--ocean-soft);line-height:1.65;margin:8px 0 22px}.ocean-sidebar details{border-top:1px solid #bad6df24}.ocean-sidebar summary{min-height:54px;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;cursor:pointer;list-style:none}.ocean-sidebar summary:after{content:"+";font-size:20px;font-weight:300;color:var(--ocean-soft)}.ocean-sidebar details[open] summary:after{content:"\2212"}.ocean-sidebar summary::-webkit-details-marker{display:none}.ocean-control-group{padding-bottom:18px}.ocean-control-group>p{color:var(--ocean-soft);line-height:1.65;margin-bottom:18px}.ocean-range{display:block;margin-bottom:16px}.ocean-range>span{display:flex;align-items:center;justify-content:space-between;gap:10px}.ocean-range output{color:#c7e5df;font-size:12px;font-variant-numeric:tabular-nums}.ocean-range input{display:block;width:100%;height:26px;margin-top:6px;background:transparent;accent-color:#a6d7ca;cursor:pointer}.ocean-condition{margin-bottom:18px}.ocean-condition .ocean-range{margin-bottom:0}.ocean-sandbox .ocean-source{padding:3px 7px;margin:-3px 0 0 -7px;min-height:30px;color:#bed5d7;font-size:10px;text-align:left}.ocean-sandbox .ocean-source[aria-pressed=true]{color:#a6d7ca;background:transparent}.ocean-control-group .ocean-system{margin:-10px 0 20px;font-size:11px;color:#a6d7ca}.ocean-control-group .ocean-system.failed{color:#ffbd96}.ocean-select{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}.ocean-select select{background:#203944;padding:10px}.ocean-notice{color:#ffd2a8!important}.ocean-reset-actions{padding-top:22px;border-top:1px solid #bad6df24;display:flex;flex-wrap:wrap;gap:7px}.ocean-reset-actions button:first-child{background:#a6d7ca;color:#112b32;flex:1}.ocean-reset-actions button:nth-child(2){background:#203944}.ocean-reset-actions p{width:100%;margin-top:8px;color:var(--ocean-soft);font-size:10px;line-height:1.7}.ocean-condition-readout{position:absolute;left:max(26px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));display:flex;gap:10px;padding:13px 17px;background:#0c1b23dc;border-radius:6px;pointer-events:none}.ocean-state-light{width:6px;height:6px;border-radius:50%;background:#a6d7ca;margin-top:5px}.ocean-state-light.damaged{background:#efac77}.ocean-condition-readout strong{font-size:12px;font-weight:400}.ocean-condition-readout p{font-size:10px;color:#b9ccd0;margin-top:5px;font-variant-numeric:tabular-nums}.ocean-condition-readout p span{margin:0 5px}.ocean-condition-readout .ocean-damage-readout{font-size:9px;color:#b9ccd0}.ocean-help{position:absolute;right:max(26px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));color:#d4e4e4;text-align:right;font-size:11px;text-shadow:0 2px 8px #000;pointer-events:none}.ocean-help span{display:block;margin-top:5px;font-size:10px;color:#bfd2d5}.ocean-loading{position:absolute;z-index:2;inset:0;background:#10232e;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;padding:24px;text-align:center}.ocean-loading h1{font:36px Georgia,serif}.ocean-loading p{color:var(--ocean-soft);max-width:45ch}.ocean-loading-line{width:64px;height:2px;background:#a6d7ca;animation:ocean-launch 1.6s ease-in-out infinite}@keyframes ocean-launch{50%{opacity:.3;transform:scaleX(.35)}}.ocean-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.ocean-drawer-shade{display:none}.ocean-movement{position:absolute;right:max(26px,env(safe-area-inset-right));bottom:max(90px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:#0c1b23d9;padding:5px;border-radius:8px;touch-action:none}@media (max-width: 999px){.ocean-topbar{top:max(15px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}.ocean-brand{gap:8px}.ocean-brand h1{font-size:23px}.ocean-brand p{font-size:10px}.ocean-top-actions{gap:5px}.ocean-quick-controls{top:max(85px,calc(env(safe-area-inset-top) + 70px));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));max-width:none;justify-content:center}.ocean-sidebar{position:absolute;top:0;bottom:0;left:0;width:min(340px,calc(100vw - 35px));border-radius:0;padding:max(20px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}.ocean-drawer-shade{display:block;position:absolute;inset:0;z-index:2;background:#020e1b66}.ocean-help{bottom:max(115px,env(safe-area-inset-bottom));right:16px;font-size:10px}.ocean-help span{display:none}.ocean-condition-readout{bottom:max(16px,env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left));max-width:calc(100vw - 28px)}.ocean-movement{bottom:max(150px,env(safe-area-inset-bottom));right:14px}.ocean-quick-controls kbd{display:none}}@media (max-width: 480px){.ocean-brand h1{font-size:21px}.ocean-brand p{display:none}.ocean-top-actions>button:first-child{padding:9px}.ocean-topbar{gap:5px}.ocean-quick-controls{gap:1px;padding:3px;top:max(73px,calc(env(safe-area-inset-top) + 60px))}.ocean-quick-controls button{padding:8px;font-size:11px}.ocean-divider{margin:0 1px}}@media (max-height: 500px) and (min-width: 600px){.ocean-brand p,.ocean-help{display:none}.ocean-quick-controls{left:auto;top:70px;max-width:calc(100vw - 28px)}.ocean-condition-readout{bottom:10px;padding:8px 12px}.ocean-movement{bottom:10px}}@media (prefers-reduced-motion: reduce){.ocean-sandbox *,.ocean-sandbox *:after{animation:none!important;transition:none!important}}