:root{color:#eefdf7;font-family:DM Sans,sans-serif;font-synthesis:none;--glass: rgba(7, 44, 55, .42);--line: rgba(219, 255, 241, .16)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#062a38}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}#app{position:relative;isolation:isolate}#aquarium{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;cursor:crosshair}.topbar{position:absolute;z-index:10;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:28px 42px;pointer-events:none}.brand{pointer-events:auto;color:#f4fff9;display:flex;align-items:center;gap:11px;text-decoration:none;font:600 25px/1 Fredoka,sans-serif;letter-spacing:-.5px;text-shadow:0 2px 16px rgba(0,27,34,.3)}.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:#b0ffe324;border:1px solid rgba(218,255,241,.2);border-radius:50%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.brand-mark svg{width:23px;fill:#bdfae0}.brand-mark svg circle{fill:#0d5765}.top-actions{display:flex;gap:14px;align-items:center}.sister-nav{display:flex;align-items:center;gap:14px;pointer-events:auto}.sister-nav a{color:#f4fff9;font-size:11px;text-decoration:none;opacity:.8;padding:9px 2px;text-shadow:0 1px 8px #062a3880}.status{display:flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid var(--line);border-radius:999px;background:#052b3552;color:#ebfff7b3;font-size:11px;letter-spacing:.11em;text-transform:uppercase;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.status i{width:6px;height:6px;border-radius:50%;background:#84e9bc;box-shadow:0 0 9px #84e9bc;animation:pulse 3s ease-in-out infinite}.icon-button{pointer-events:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#eefff8cc;background:#052b3552;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:.25s ease}.icon-button:hover{background:#95efcf29;color:#fff;transform:scale(1.04)}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon-button svg{width:18px}.welcome{position:absolute;z-index:7;top:50%;left:clamp(32px,9vw,150px);transform:translateY(-52%);width:min(470px,calc(100vw - 64px));pointer-events:none;transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}.welcome.hidden{opacity:0;transform:translateY(-45%)}.eyebrow{margin:0 0 20px;color:#a7e9cf;font-size:11px;font-weight:600;letter-spacing:.24em}h1{margin:0;font:500 clamp(52px,6vw,86px)/.96 "Fredoka",sans-serif;letter-spacing:-3px;text-shadow:0 5px 35px rgba(0,24,30,.24)}h1 em{color:#b2ecd4;font-style:normal}.intro{margin:23px 0 31px;color:#effff9ad;font-size:15px}.begin-button{pointer-events:auto;display:flex;align-items:center;gap:20px;padding:14px 16px 14px 22px;color:#073a43;background:#c7f5df;border:0;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 8px 30px #01222840;transition:transform .25s ease,background .25s ease}.begin-button:hover{transform:translateY(-2px);background:#e2fff1}.begin-button svg{width:17px}.hint{margin-top:22px;color:#e8fff666;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.hint span{color:#e8fff6a8}.controls{position:absolute;z-index:10;right:38px;bottom:31px;left:38px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.control-group{display:flex;gap:9px;pointer-events:auto}.control-button{min-height:43px;padding:0 16px;display:flex;align-items:center;gap:9px;color:#e8fff79e;border:1px solid var(--line);border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);cursor:pointer;font-size:11px;transition:.25s ease}.control-button:hover,.control-button[aria-pressed=true]{color:#f4fff9;background:#64c5a82e}.control-button svg{width:16px}.sound-on{display:none}.sound-enabled .sound-on{display:block}.sound-enabled .sound-off{display:none}.time-card{text-align:right;color:#ebfff88c}.time{display:block;color:#f4fffbe0;font:500 15px Fredoka,sans-serif;letter-spacing:.02em}.period{display:block;margin-top:4px;font-size:9px;letter-spacing:.16em;text-transform:uppercase}.depth-label{position:absolute;z-index:5;right:40px;top:50%;display:flex;align-items:center;gap:9px;color:#defff559;font-size:9px;letter-spacing:.14em;text-transform:uppercase;transform:rotate(90deg) translate(50%);transform-origin:right center}.depth-label span{width:34px;height:1px;background:currentColor}.build-badge{display:block;margin-top:3px;margin-left:auto;pointer-events:auto;border:0;background:none;padding:0;color:#defff552;font:500 9px/1 DM Sans,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:color .25s ease}.build-badge:hover{color:#defff5b8}.copyright{position:absolute;z-index:11;left:50%;bottom:10px;transform:translate(-50%);pointer-events:auto;color:#defff557;font:500 10px/1 DM Sans,sans-serif;letter-spacing:.12em;text-decoration:none;white-space:nowrap;transition:color .25s ease}.copyright:hover{color:#defff5c7}.vignette,.grain{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}.vignette{box-shadow:inset 0 0 180px 30px #00192261}.grain{opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.control-button:disabled{cursor:default;opacity:.55}.fish-panel{position:absolute;z-index:11;left:38px;bottom:90px;width:min(430px,calc(100vw - 36px));padding:16px;border:1px solid var(--line);border-radius:20px;background:#05242e9e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 50px #00141c59;animation:panel-in .3s cubic-bezier(.2,.8,.2,1)}.fish-panel[hidden]{display:none}.fish-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.fish-panel header p{margin:0;font:500 15px Fredoka,sans-serif;color:#f4fff9}.fish-panel header span{margin-left:8px;color:#defff573;font:500 10px DM Sans,sans-serif;letter-spacing:.12em}.panel-close{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;background:#b0ffe314;color:#eefff8b3;cursor:pointer}.panel-close:hover{background:#b0ffe32e;color:#fff}.panel-close svg{width:14px}.fish-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:min(52vh,360px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(222,255,245,.28) transparent}.fish-grid::-webkit-scrollbar{width:6px;background:transparent}.fish-grid::-webkit-scrollbar-track{background:transparent}.fish-grid::-webkit-scrollbar-thumb{background:#defff547;border-radius:999px}.fish-grid::-webkit-scrollbar-thumb:hover{background:#defff573}.fish-option{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 8px;border:1px solid transparent;border-radius:12px;background:#b0ffe30f;color:#e8fff7b8;font-size:10px;cursor:pointer;transition:.2s ease}.fish-option:hover{border-color:var(--line);background:#95efcf29;color:#f4fff9;transform:translateY(-2px)}.fish-option:active{transform:scale(.96)}.fish-option img{width:100%;aspect-ratio:4 / 3;object-fit:contain}.fish-option span{text-align:center;line-height:1.15}.panel-hint{margin:12px 2px 0;color:#defff573;font-size:10px;letter-spacing:.04em}.fish-tag{position:fixed;z-index:12;left:0;top:0;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#05242eb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#eefdf7;font-size:11px;white-space:nowrap;pointer-events:none}.fish-tag[hidden]{display:none}.toast{position:absolute;z-index:12;left:50%;bottom:96px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:#05242ea8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#eefdf7;font-size:12px;white-space:nowrap;opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity .35s ease,transform .35s ease}.toast.visible{opacity:1;transform:translate(-50%)}@keyframes panel-in{0%{opacity:0;transform:translateY(10px)}}@keyframes pulse{50%{opacity:.45;transform:scale(.8)}}@media(max-width:700px){.topbar{padding:20px}.status{display:none}.welcome{left:25px;top:46%;width:calc(100vw - 50px)}h1{font-size:clamp(48px,15vw,66px);letter-spacing:-2px}.controls{left:18px;right:18px;bottom:18px}.control-button{width:43px;padding:0;justify-content:center}.control-button span,.depth-label{display:none}.fish-panel{left:18px;bottom:76px}.toast{bottom:80px;white-space:normal;width:max-content;max-width:calc(100vw - 36px);text-align:center}}@media(prefers-reduced-motion:reduce){.status i{animation:none}*{scroll-behavior:auto!important}}:root{color:#fff8ed;--glass: rgba(55, 48, 38, .45);--line: rgba(255, 240, 210, .28)}body{background:#bb936c}.beach-app{background:#bd9874 url(/beach/shore.webp) center center / cover no-repeat}#beach{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.brand{color:#fffaf2}.brand-mark{background:#faebc929;border-color:var(--line)}.brand-mark svg{fill:none;stroke:#fff3d4;stroke-width:2.4}.brand-mark svg circle{fill:#ffe2a5;stroke:none}.status,.icon-button{background:#33322c52;color:#fff6e7}.status i{background:#fff0ba;box-shadow:0 0 9px #fff0ba}.sister-nav{display:flex;align-items:center;gap:18px;pointer-events:auto}.sister-nav a{color:#fffaf0;font-size:11px;text-decoration:none;opacity:.84;padding:9px 2px;text-shadow:0 1px 8px #463a3099}.sister-nav a:hover{opacity:1}.welcome{width:min(650px,calc(100vw - 64px))}.eyebrow{color:#fff0c7;text-shadow:0 1px 8px #46331f8c}h1{color:#fff9ef;font-size:clamp(49px,5.8vw,83px);text-shadow:0 4px 24px #2a2d3280}h1 em{color:#ffe5aa}.intro{color:#fff8e9;text-shadow:0 2px 13px #2a2d3299}.hint,.hint span{color:#fff7e9b8;text-shadow:0 1px 8px #413a33a6}.begin-button{background:#fff0cd;color:#5b4b39;box-shadow:0 8px 30px #4038243b}.begin-button:hover{background:#fff9e7}.welcome.hidden{visibility:hidden;transition:opacity 1.1s,transform 1.1s,visibility 0s 1.1s}.control-button{color:#fff5e7;background:#30323075}.control-button:hover,.control-button[aria-pressed=true],.control-button[aria-expanded=true]{background:#f6d49d4f;color:#fff}.icon-button:hover{background:#f6d49d42}.time,.time-card{color:#fff9eb;text-shadow:0 1px 7px #3d332ca1}.build-badge,.copyright{color:#fff5e0a8}.depth-label{color:#fff8e1a8}.vignette{box-shadow:inset 0 0 150px 10px #1d2a2b2b;background:linear-gradient(90deg,#29333a33,transparent 72%)}.fish-panel,.fish-tag,.toast{background:#2b312fe0;color:#fff7e8}.fish-panel header p{color:#fff7e8}.fish-panel header span,.panel-hint{color:#fff0d7ad}.fish-option{background:#fff0d710;color:#fff7e8}.fish-option:hover{background:#fff0d72d}.beach-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.beach-option{min-height:120px}.beach-option svg{width:64px;height:64px;margin:0 auto 8px;overflow:visible}.beach-option span{font-size:11px}.panel-close{color:#fff7e8;background:#fff0d718}.load-status{position:absolute;bottom:120px;left:50%;transform:translate(-50%);z-index:20;border-radius:20px;padding:12px 20px;background:#344748e8;color:#fff8ed;font-size:12px;text-align:center}.load-status[hidden]{display:none}button:focus-visible,a:focus-visible{outline:2px solid #fff0c9;outline-offset:4px}@media(max-width:700px){.topbar{padding:20px}.sister-nav{gap:9px}.sister-nav a{font-size:10px}.status{display:none}.welcome{top:42%;left:25px;width:calc(100vw - 50px)}h1{font-size:clamp(45px,11vw,65px);letter-spacing:-2px}.intro{max-width:240px;line-height:1.55}.control-group{gap:7px}.controls{bottom:max(28px,env(safe-area-inset-bottom))}.copyright{bottom:max(10px,calc(env(safe-area-inset-bottom) - 12px))}.fish-panel{bottom:86px}.beach-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.beach-option{min-height:96px;padding:8px 4px}.beach-option svg{width:45px;height:45px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}