:root{color:#f6fafc;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#061a29;font-family:Inter,Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;min-height:100%;margin:0}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline-offset:3px;outline:3px solid #a8dfeb}.ocean-app{background:#071d2d;min-height:100dvh;position:relative;overflow:hidden}.ocean-stage{background:radial-gradient(at 73% 49%,#23798b3a 0%,#0000 49%),linear-gradient(#125975 0%,#0a405e 23%,#08344c 58%,#051d2c 100%);position:absolute;inset:0}.ocean-stage canvas.ocean-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.ocean-stage:after{content:"";pointer-events:none;background:repeating-linear-gradient(106deg,#0000 0 8%,#b4f3ff05 9%,#0000 12%),linear-gradient(#e3faff12,#0000 35%,#07192965 95%);position:absolute;inset:0}.ocean-stage:before{content:"";filter:blur(38px);background:#0c3438;border-radius:50%;width:88vw;height:45vh;position:absolute;bottom:-25vh;right:-14vw}.topbar{z-index:5;justify-content:space-between;align-items:center;gap:16px;padding:28px clamp(22px,5.2vw,80px);display:flex;position:relative}.brand{letter-spacing:.08em;align-items:center;gap:11px;font-size:19px;font-weight:700;display:flex}.brand small{letter-spacing:.32em;opacity:.56;margin-top:3px;font-size:8px;display:block}.brand-mark{color:#9fe8ef;border:1px solid #91e0eb88;border-radius:50%;place-items:center;width:36px;height:36px;font-size:20px;display:grid}.top-actions{align-items:center;gap:12px;display:flex}.glass-button,.quality-label{color:#e7f7f8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#d4f1f512;border:1px solid #d9fcff32;border-radius:24px;padding:10px 15px;font-size:12px}.glass-button:hover{background:#d4f1f527}.quality-label{align-items:center;gap:8px;display:flex}.quality-label select{color:inherit;background:0 0;border:none;font-size:12px}.quality-label option{color:#fff;background:#113348}.intro-overlay{z-index:2;justify-content:space-between;align-items:center;gap:20px;min-height:calc(100dvh - 170px);padding:30px clamp(22px,8.5vw,144px) 80px;display:flex;position:relative}.intro-overlay[hidden]{display:none}.intro-copy{max-width:630px}.eyebrow{letter-spacing:.38em;color:#ace0e9;margin-bottom:25px;font-size:12px}.intro-copy h1{letter-spacing:-.04em;text-shadow:0 6px 30px #061c287c;margin:0;font-size:clamp(46px,6.4vw,95px);font-weight:600;line-height:1.17}.intro-copy h1 em{color:#b6e7e6;font-style:normal}.intro-description{letter-spacing:.02em;color:#d1e7e9b8;max-width:490px;margin:29px 0 30px;font-size:clamp(14px,1.28vw,17px);line-height:2}.enter-button{color:#123d48;background:#e7f8f6;border:0;border-radius:5px;justify-content:space-between;align-items:center;gap:28px;min-width:170px;padding:16px 22px;font-weight:700;display:flex;box-shadow:0 12px 32px #00172555}.enter-button:hover{background:#fff;transform:translateY(-2px)}.enter-button:disabled{opacity:.66;cursor:wait;transform:none}.intro-note{color:#c3dfe28e;letter-spacing:.08em;margin-top:20px;font-size:11px}.intro-depth{color:#e0faf9ab;flex-direction:column;align-self:end;align-items:flex-end;gap:8px;padding-bottom:30px;display:flex}.intro-depth span{letter-spacing:-.08em;font-size:clamp(35px,6vw,80px);font-weight:200}.intro-depth small{letter-spacing:.28em}.footer{z-index:4;letter-spacing:.1em;color:#b7dfe47b;justify-content:space-between;padding:18px clamp(22px,5.2vw,80px);font-size:11px;display:flex;position:relative}.status-message{z-index:10;color:#dcfaff;text-align:center;max-width:90vw;font-size:13px;position:absolute;bottom:72px;left:50%;transform:translate(-50%)}.status-message:empty{display:none}.preview-fish{opacity:.18;background:#95cfd6;border-radius:70% 40% 40% 70%;width:60px;height:22px;position:absolute;box-shadow:0 0 42px #7ccbd9}.preview-fish:after{content:"";border-top:9px solid #0000;border-bottom:9px solid #0000;border-right:17px solid #95cfd6;position:absolute;top:2px;left:-13px}.fish-a{animation:15s ease-in-out infinite drift;top:45%;left:69%;transform:rotate(-7deg)}.fish-b{animation:18s ease-in-out infinite reverse drift;top:55%;left:79%;transform:scale(.65)rotate(8deg)}@keyframes drift{50%{translate:-90px 25px}}.fallback-panel{text-align:center;color:#e5f7f7;max-width:720px;margin:14vh auto;padding:40px 26px}.fallback-panel h2{font-size:32px}.fallback-panel p{line-height:1.7}.fallback-panel button{background:#bcebe9;border:0;border-radius:6px;padding:12px 25px}.fallback-panel img{border-radius:10px;width:min(100%,540px);margin:32px auto 0;display:block}@media (width<=640px){.topbar{padding:18px}.brand{font-size:15px}.top-actions{gap:6px}.glass-button,.quality-label{padding:9px;font-size:10px}.quality-label select{font-size:10px}.intro-overlay{align-items:flex-start;min-height:calc(100dvh - 118px);padding:19vh 26px 34px}.eyebrow{letter-spacing:.25em;font-size:9px}.intro-copy h1{font-size:clamp(40px,11vw,64px)}.intro-description{margin:24px 0;line-height:1.85}.intro-depth{display:none}.footer{gap:10px;padding:15px 18px;font-size:9px}.footer span:last-child{text-align:right}.status-message{width:80vw;bottom:65px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation-duration:.01ms!important}}.performance-status{z-index:8;color:#cbebeb;letter-spacing:.08em;font-variant-numeric:tabular-nums;pointer-events:none;background:#062e43b8;border:1px solid #b9f5f333;border-radius:6px;padding:7px 10px;font-size:11px;position:absolute;bottom:72px;right:clamp(18px,5.2vw,80px)}.performance-status[hidden]{display:none}.recover-button{z-index:12;color:#113c48;background:#c2efed;border:1px solid #d4f8f8a0;border-radius:6px;padding:12px 20px;font-weight:600;position:absolute;bottom:118px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #00152266}.recover-button[hidden],.glass-button[hidden]{display:none}.settings-menu{position:relative}.settings-menu>summary{-webkit-user-select:none;user-select:none;cursor:pointer;list-style:none;display:list-item}.settings-menu>summary::-webkit-details-marker{display:none}.settings-panel{z-index:30;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#092c3cf2;border:1px solid #baf9f944;border-radius:12px;gap:12px;width:min(295px,88vw);padding:18px;display:grid;position:absolute;top:46px;right:0;box-shadow:0 14px 42px #00131f85}.settings-panel .glass-button{text-align:left;font-size:12px}.settings-field{color:#d6eff0;grid-template-columns:58px 1fr;align-items:center;gap:8px;font-size:12px;display:grid}.settings-field input{accent-color:#b5eeea;min-width:0}.settings-field select{color:#e7f7f8;background:#143c4b;border:1px solid #d9fcff32;border-radius:6px;padding:8px}.show-ui-button{z-index:20;color:#e3fafa;background:#0a4055d9;border:1px solid #adedef88;border-radius:20px;padding:9px 14px;font-size:12px;display:none;position:absolute;top:16px;right:16px}.ocean-app.ui-hidden .topbar,.ocean-app.ui-hidden .footer,.ocean-app.ui-hidden .touch-hud,.ocean-app.ui-hidden .performance-status,.ocean-app.ui-hidden .status-message{visibility:hidden}.ocean-app.ui-hidden .show-ui-button{display:block}.tutorial-panel{z-index:11;color:#e7f9f9;background:#072b3bd9;border:1px solid #bceaf08c;border-radius:12px;max-width:min(360px,85vw);padding:18px 20px;font-size:13px;line-height:1.7;position:absolute;bottom:105px;left:clamp(20px,5vw,80px);box-shadow:0 14px 38px #061d2b9c}.tutorial-panel[hidden]{display:none}.tutorial-panel p{opacity:.84;margin:7px 0 15px}.tutorial-panel button{color:#174654;background:#d1f4f0;border:0;border-radius:6px;padding:9px 15px;font-weight:600}@media (width<=640px){.performance-status{font-size:9px;bottom:24px;right:18px}.topbar{flex-wrap:wrap;align-content:start}.top-actions{flex-wrap:wrap}.ocean-app{min-height:100dvh}}@media (width>=641px){.intro-copy h1{font-size:clamp(46px,5.25vw,78px)}}.touch-hud{pointer-events:none;z-index:2;position:absolute;inset:0}.joystick-hint{color:#d8f7f9ac;letter-spacing:.2em;background:#9cdde812;border:1px solid #d0f9f95d;border-radius:50%;place-items:center;width:110px;height:110px;font-size:11px;display:grid;position:absolute;bottom:85px;left:18px}.joystick-hint:after{content:"";background:#b7eff526;border:1px solid #d9faff80;border-radius:50%;width:36px;height:36px;position:absolute}.depth-actions{pointer-events:auto;gap:12px;display:grid;position:absolute;bottom:110px;right:20px}.depth-actions button{color:#ecfbff;touch-action:none;background:#c1eff52a;border:1px solid #defaff8c;border-radius:22px;min-width:80px;padding:13px 12px;font-size:12px}.depth-actions button:active{background:#d3faff55}.ocean-canvas{touch-action:none}@media (hover:hover) and (pointer:fine){.touch-hud{display:none}}@media (width<=640px){.depth-actions{bottom:85px;right:12px}.joystick-hint{bottom:65px}}