: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}.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")}@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}}@media(prefers-reduced-motion:reduce){.status i{animation:none}*{scroll-behavior:auto!important}}