@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Mono:wght@400;500&family=Press+Start+2P&display=swap');
:root{color-scheme:dark;--ink:#101a34;--pink:#ff4c8d;--cyan:#59e0f2;--white:#f4fbff;--mono:'DM Mono',monospace;--display:'Barlow Condensed',Impact,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f8f7;color:var(--ink);font-family:var(--mono);font-size:12px}.sitebar{height:48px;max-width:1240px;margin:auto;display:flex;align-items:center;padding:0 26px;gap:20px;color:#25324b}.brand-mini{font:700 13px var(--display);letter-spacing:.16em;color:inherit;text-decoration:none;white-space:nowrap}.brand-dot{color:#30b7d7;font-size:17px;margin-right:4px}.tagline{font-size:9px;color:#8791a2;letter-spacing:.14em}.top-actions{margin-left:auto;display:flex;align-items:center;gap:15px}.top-actions a{font-size:9px;letter-spacing:.12em;text-decoration:none;color:#303c54}.top-actions a span{color:#1eb6d4}.icon-button{border:1px solid #dce4e9;background:#fff;border-radius:50%;width:28px;height:28px;color:#32445a;cursor:pointer}.ocean{height:min(720px,calc(100vh - 56px));min-height:640px;margin:0 12px;position:relative;overflow:hidden;border-radius:9px;color:#f6fbff;background:linear-gradient(180deg,#32a9dd 0%,#55c6e9 32%,#80d9e9 49%,#268eaa 50%,#10617b 64%,#073b53 79%,#081b31 100%);isolation:isolate;box-shadow:0 6px 24px #213a5715;transition:background 1s}.ocean:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 40%,#ffffff35,transparent 48%),repeating-linear-gradient(0deg,#b2f7fb12 0 1px,transparent 1px 5px);opacity:.62;mix-blend-mode:screen}.ocean:after{content:"";position:absolute;z-index:-1;inset:51% 0 0;background:repeating-linear-gradient(168deg,transparent 0 27px,#b7f4f422 28px,#b7f4f422 30px,transparent 32px 53px),repeating-linear-gradient(12deg,transparent 0 48px,#66d3e41b 50px,transparent 52px 85px);mask-image:linear-gradient(transparent,#000 16%,#000 82%,transparent)}.sun-glow{position:absolute;right:17%;top:-90px;width:200px;height:200px;border-radius:50%;background:#ffefb347;filter:blur(26px)}.cloud{position:absolute;height:27px;width:100px;background:#e8f8f5b0;clip-path:polygon(0 70%,14% 70%,18% 46%,31% 46%,36% 20%,58% 20%,62% 42%,83% 42%,88% 62%,100% 62%,100% 100%,0 100%);filter:drop-shadow(2px 3px #237eaa44);opacity:.78}.cloud-a{top:9%;left:13%;transform:scale(.7)}.cloud-b{top:15%;right:16%;transform:scale(1.2)}.cloud-c{top:26%;left:44%;transform:scale(.5)}.island{position:absolute;z-index:1;top:46%;left:3%;width:120px;height:42px;border-radius:80% 50% 0 0;background:#69ad79;clip-path:polygon(0 90%,12% 63%,25% 54%,35% 32%,56% 38%,76% 68%,100% 72%,100% 100%,0 100%)}.island i{position:absolute;top:-13px;left:25px;width:3px;height:36px;background:#508d6f;transform:rotate(8deg)}.island i:after{content:"";position:absolute;top:-4px;left:-12px;width:15px;height:10px;border-radius:90% 0;background:#78bf83;transform:rotate(22deg)}.island i:nth-child(2){left:58px;height:28px;top:-6px}.island i:nth-child(3){left:84px;top:-10px}.island b{position:absolute;top:-9px;left:97px;width:7px;height:41px;background:repeating-linear-gradient(0deg,#f5f3e8 0 7px,#e0525b 7px 12px)}.lighthouse{position:absolute;top:43%;left:13%;width:10px;height:35px;background:repeating-linear-gradient(0deg,#f6f7e7 0 7px,#ef5e68 7px 12px);clip-path:polygon(28% 0,72% 0,100% 100%,0 100%)}.lighthouse:before{content:"";position:absolute;top:-5px;left:-1px;width:12px;height:7px;background:#ef5660}.horizon{position:absolute;top:49%;left:0;right:0;height:25px;border-top:4px solid #b1f3f4;border-bottom:2px solid #ffffff68;background:linear-gradient(180deg,#5fe0e8a8,#41c1db35)}.wave{position:absolute;top:4px;left:-5%;width:110%;height:16px;border-top:2px solid #e6fdff;transform:skewY(-1deg)}.w2{top:10px;opacity:.62;transform:skewY(1deg)}.foam{position:absolute;right:18%;top:-13px;width:31px;height:18px;background:#a9f2f6;clip-path:polygon(0 100%,10% 62%,33% 62%,40% 19%,52% 19%,57% 61%,86% 61%,100% 100%)}.fish{position:absolute;z-index:1;top:61%;right:20%;font:30px var(--display);color:#ffc66b;transform:scaleX(-1);text-shadow:2px 3px #df7794}.fish b{font:13px Arial;color:#122744;position:absolute;right:5px;top:4px}.fish-b{top:73%;right:30%;font-size:21px;color:#5be0dd;animation:swim 11s linear infinite}.fish-c{top:58%;right:12%;font-size:17px;color:#f582ae;animation:swim 16s linear infinite reverse}@keyframes swim{50%{transform:translateX(-70px) scaleX(-1)}}.bubbles{position:absolute;inset:51% 8% 4%;pointer-events:none}.bubbles i{position:absolute;width:5px;height:5px;border:1px solid #b4f5f6a8;border-radius:50%;left:16%;bottom:2%;animation:bubble 8s linear infinite}.bubbles i:nth-child(2){left:39%;width:3px;height:3px;animation-duration:11s;animation-delay:-3s}.bubbles i:nth-child(3){left:76%;animation-duration:9s;animation-delay:-4s}.bubbles i:nth-child(4){left:62%;width:7px;height:7px;animation-duration:13s;animation-delay:-6s}.bubbles i:nth-child(5){left:28%;animation-delay:-4s}.bubbles i:nth-child(6){left:89%;width:3px;height:3px;animation-delay:-1s}.bubbles i:nth-child(7){left:51%;animation-duration:10s;animation-delay:-7s}@keyframes bubble{to{transform:translateY(-480px) translateX(18px);opacity:0}}.depth-ruler{position:absolute;top:56%;bottom:5%;left:24px;display:flex;flex-direction:column;justify-content:space-between;color:#d4f7f597;font:8px var(--mono);letter-spacing:.04em}.depth-ruler span{border-left:1px solid #c1f4f464;padding-left:7px}.hero{position:absolute;z-index:2;top:6.4%;left:0;right:0;text-align:center}.eyebrow,.panel-kicker,.section-kicker{font-size:9px;letter-spacing:.2em;font-weight:500}.eyebrow{color:#e6faff;opacity:.88}.live-dot{display:inline-block;width:6px;height:6px;background:#ffda81;border-radius:50%;box-shadow:0 0 10px #fff3b2;margin-right:7px}.hero h1{font:clamp(48px,6.1vw,78px)/1 var(--display);font-weight:900;letter-spacing:.19em;margin:16px 0 2px;padding-left:.19em;color:#effbff;text-shadow:3px 4px 0 #ed518b,-2px -2px 0 #24406a,5px 7px 0 #172946;image-rendering:pixelated}.subtitle{font:700 15px var(--display);letter-spacing:.65em;padding-left:.65em;color:#fc5b91;text-shadow:0 2px #532d61}.hero-note{font-size:10px;letter-spacing:.1em;color:#eafaffcc;margin:15px}.utility{position:absolute;top:4%;left:3%;right:3%;display:flex;align-items:center;justify-content:space-between}.depth-token,.utility-button{border:1px solid #b8ecf356;background:#11223bc9;padding:9px 12px;color:#f6fdff;font:9px var(--mono);letter-spacing:.08em}.depth-token{color:#6be6f2}.depth-token b{color:#fff;margin:0 5px}.depth-token span{color:#adc5d2;font-size:8px}.utility-button{cursor:pointer;color:#e3eef3}.utility-button:hover{border-color:#69e6ef}.play-area{position:absolute;top:46%;left:50%;width:min(430px,calc(100% - 60px));transform:translateX(-50%);z-index:4}.start-card,.game-card,.result-card{padding:19px 20px 16px;background:linear-gradient(145deg,#11213eee,#0c1b34f2);border:1px solid #7ab4c974;box-shadow:0 7px 0 #07132977,0 20px 50px #06142555;color:var(--white);backdrop-filter:blur(9px)}.start-card{transform:translateY(-2%)}.panel-kicker{color:#77e3ef;font-size:9px}.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.mode{height:42px;background:#142744;border:1px solid #5d718a;color:#eaf5fb;font:700 15px var(--display);letter-spacing:.13em;cursor:pointer}.mode small{display:block;font:7px var(--mono);letter-spacing:.08em;opacity:.65;margin-top:2px}.mode.active{background:#44d5e8;border-color:#aaf8fb;color:#10203d;box-shadow:inset 0 -3px #208da7}.rules-line{text-align:center;color:#bbd0dc;font-size:9px;letter-spacing:.04em;margin:11px 0}.primary-button{display:flex;justify-content:space-around;align-items:center;width:100%;height:48px;border:0;border-bottom:4px solid #bd316e;background:var(--pink);color:#17203b;font:800 18px var(--display);letter-spacing:.23em;cursor:pointer;transition:transform .12s,filter .12s}.primary-button:hover,.dive-button:hover{filter:brightness(1.1);transform:translateY(-2px)}.primary-button:active,.dive-button:active{transform:translateY(2px);border-bottom-width:1px}.start-foot{display:flex;justify-content:space-between;margin-top:11px;color:#9aafc2;font-size:7px;letter-spacing:.06em}.hidden{display:none!important}.game-card{padding:16px 18px 13px}.game-head{display:flex;justify-content:space-between;align-items:center}.depth-readout{font:800 29px var(--display);letter-spacing:.05em;color:#fff;margin-top:2px}.depth-readout small{font:8px var(--mono);color:#aac5d1;letter-spacing:.1em}.timer-wrap{position:relative;width:42px;height:42px;display:grid;place-items:center}.timer-wrap svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.timer-track,.timer-fill{fill:none;stroke-width:3}.timer-track{stroke:#334963}.timer-fill{stroke:#55e2ee;stroke-dasharray:126;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear,stroke .3s}.timer-wrap b{font-size:12px;color:#f7fcff}.progress{display:flex;gap:4px;margin:9px 0 13px}.progress i{height:3px;flex:1;background:#29445c}.progress i.done{background:#58dce9}.progress i.missed{background:#ff578d}.prompt-label{color:#a2b7c9;font-size:8px;letter-spacing:.19em}.game-card h2{font:700 29px var(--display);letter-spacing:.04em;margin:2px 0 13px}.game-card form{display:flex;gap:6px}.game-card input{min-width:0;flex:1;height:42px;border:1px solid #536c83;background:#08162b;color:white;padding:0 11px;font:12px var(--mono);outline:none}.game-card input:focus{border-color:#5bdde8;box-shadow:0 0 0 2px #54dae62e}.game-card input::placeholder{color:#75899d}.dive-button{width:96px;border:0;border-bottom:3px solid #bc316b;background:var(--pink);color:#15203b;font:800 16px var(--display);letter-spacing:.12em;cursor:pointer;transition:transform .12s}.dive-button span{padding-left:5px}.feedback{min-height:27px;display:flex;align-items:center;color:#a9c0d0;font-size:9px}.feedback.success{color:#64ebdf}.feedback.common{color:#ffd478}.feedback.error{color:#ff84a7}.scorebar{border-top:1px solid #ffffff1b;padding-top:10px;display:flex;align-items:center;gap:8px}.scorebar>div:first-child{display:flex;align-items:baseline}.score-icon{color:#68e1ef}.scorebar b{font:700 20px var(--display);margin-left:5px}.scorebar small{color:#9eb3c4;font-size:8px}.tank-display{margin-left:auto;color:#fc5b90;letter-spacing:.09em;font-size:14px}.pass-button{border:1px solid #71819759;background:#1c3047;color:#c1d4dd;padding:6px 9px;font:8px var(--mono);cursor:pointer}.pass-button:hover{border-color:#9bc8d3}.result-card{text-align:center;padding:19px 21px 17px}.result-krill{color:#ff6297;font-size:22px}.result-card h2{font:900 30px var(--display);letter-spacing:.18em;margin:6px 0 4px}.result-depth{margin:4px 0 5px}.result-depth strong{font:900 44px var(--display);color:#55e0ec}.result-depth span{display:block;font-size:8px;letter-spacing:.22em;color:#aec4d3}.result-card>p:nth-of-type(2){font-size:9px;color:#b9cbd7}.result-list{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:11px 0}.result-chip{border:1px solid #ffffff1f;background:#172b43;padding:6px 8px;color:#c6d8e1;font-size:8px}.result-chip b{color:#58e0eb;margin-left:4px}.result-card .primary-button{margin-top:11px}.seafloor{position:absolute;bottom:12%;left:0;right:0;display:flex;justify-content:space-around;opacity:.44;color:#9fe7e1;font-size:18px}.seafloor span:nth-child(even){font-size:8px;margin-top:15px}.ocean-footer{position:absolute;bottom:14px;left:3%;right:3%;display:flex;justify-content:space-between;color:#c3dbe3;font-size:8px;letter-spacing:.16em}.below{max-width:970px;margin:0 auto;padding:82px 28px 65px}.below-copy{text-align:center;max-width:580px;margin:0 auto 36px}.section-kicker{color:#279db5}.below-copy h2{font:800 39px/1.02 var(--display);letter-spacing:.025em;margin:12px 0;color:#142541}.below-copy p{max-width:485px;margin:0 auto;color:#677689;font:12px/1.8 var(--mono)}.tier-grid{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid #dae4e9;background:#fff}.tier{padding:14px 10px 13px;border-right:1px solid #e1e9ed;display:flex;flex-direction:column;gap:4px;min-height:108px}.tier:last-child{border:0}.tier>span,.tier small{font-size:7px;letter-spacing:.08em;color:#8b98a6}.tier b{font:700 13px var(--display);color:#263550}.tier strong{font:800 22px var(--display);color:#25aabf}.tier small{font-size:6px}.tier-6{background:#f9f4f6}.tier-6 strong{color:#ed4a86}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:29px;margin:55px 0 46px}.how-grid article{border-top:2px solid #39bed0;padding-top:13px}.how-grid article>span{font-size:8px;color:#28a1b5;letter-spacing:.13em}.how-grid h3{font:700 20px var(--display);color:#172642;margin:8px 0 5px}.how-grid p{font:10px/1.75 var(--mono);color:#718093;margin:0}.ocean-zones{height:45px;border-top:1px solid #d7e2e6;border-bottom:1px solid #d7e2e6;display:flex;align-items:center;justify-content:space-between;color:#6b7e8b;font-size:7px;letter-spacing:.09em}.page-footer{max-width:1240px;padding:18px 27px 27px;margin:auto;display:flex;align-items:center;justify-content:space-between;color:#8995a1}.page-footer>span,.page-footer>a:last-child{font-size:8px;letter-spacing:.1em;text-decoration:none;color:#84909c}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body.high-contrast .ocean{filter:saturate(.7) contrast(1.08)}body.high-contrast{background:#fff}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffca5b;outline-offset:3px}@media(max-width:760px){.sitebar{height:42px;padding:0 17px}.tagline{display:none}.top-actions{gap:9px}.top-actions a{font-size:8px}.ocean{margin:0 7px;min-height:670px;height:calc(100svh - 49px);max-height:800px}.hero{top:8%}.hero h1{font-size:clamp(46px,12vw,70px)}.subtitle{font-size:11px}.hero-note{font-size:8px}.utility{top:3%;left:3%;right:3%}.depth-ruler{left:11px;font-size:7px}.play-area{top:45%;width:min(410px,calc(100% - 42px))}.start-card,.game-card,.result-card{padding:15px}.island{left:0;transform:scale(.75);transform-origin:left bottom}.lighthouse{left:10%}.below{padding:57px 20px}.tier-grid{grid-template-columns:repeat(3,1fr)}.tier:nth-child(3){border-right:0}.tier:nth-child(-n+3){border-bottom:1px solid #e1e9ed}.tier:nth-child(6){border-top:0}.how-grid{gap:15px}.how-grid h3{font-size:17px}.how-grid p{font-size:9px}.ocean-footer{font-size:7px}}@media(max-width:480px){.top-actions a{display:none}.ocean{min-height:650px}.hero{top:10%}.eyebrow{font-size:7px}.hero h1{margin-top:13px;letter-spacing:.14em;padding-left:.14em}.subtitle{letter-spacing:.42em;padding-left:.42em}.hero-note{margin-top:10px}.play-area{top:44%}.start-foot{font-size:6px}.game-card h2{font-size:26px}.depth-ruler{display:none}.how-grid{grid-template-columns:1fr;gap:17px;margin:38px 0}.how-grid article{display:grid;grid-template-columns:74px 1fr;column-gap:10px}.how-grid article>span{grid-row:1/3;padding-top:5px}.how-grid h3{margin:0 0 4px}.how-grid p{grid-column:2}.ocean-zones{font-size:6px}.page-footer{padding:16px;gap:8px}.page-footer>span{display:none}}

/* Reference-matched pixel ocean presentation. */
@font-face{font-family:KrillionSigns;src:url('assets/signs.woff2') format('woff2');font-display:swap}
:root{--display:KrillionSigns,'Courier New',monospace;--pink:#ed6393;--cyan:#73d7ee}body{background:#fff}.sitebar{max-width:none;height:48px;padding:0 22px}.tagline{display:none}.brand-mini{font:18px var(--display)}.ocean{height:calc(100svh - 60px);min-height:720px;max-height:1100px;margin:0 12px;border-radius:12px;background:#0a1722}.ocean:before,.ocean:after,.sun-glow,.cloud,.island,.lighthouse,.horizon,.fish,.bubbles,.depth-ruler,.seafloor{display:none}#scenery{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:-1}.hero{top:5.8%;pointer-events:none}.eyebrow{display:none}.hero h1{font:clamp(62px,9vw,112px)/1 var(--display);letter-spacing:.14em;color:#e8f1ff;margin:0 0 14px;padding-left:.14em;text-shadow:3px 0 #6be2fa,-3px 0 #ed6393,0 4px #10182c,5px 4px #10182c,-4px 4px #10182c}.subtitle{font:38px/1 var(--display);letter-spacing:.45em;color:#f374a0;text-shadow:2px 2px #101829,-2px -1px #101829;padding-left:.45em}.hero-note{font:23px var(--display);color:#102338;letter-spacing:.2em;margin:20px 0}.utility{top:12px;left:12px;right:12px}.depth-token{font:20px var(--display);padding:6px 10px;background:#101c31;border:2px solid #263e57}.depth-token span{font:14px var(--display);letter-spacing:.12em}.utility-button{font:16px var(--display);background:#101c31}.play-area{top:auto;bottom:6%;width:min(540px,calc(100% - 40px))}.start-card{padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;text-align:center;transform:none}.save-progress{display:inline-block;text-decoration:none;color:#dbeafe;background:#102037;border:1px solid #2a4058;font:15px var(--display);letter-spacing:.15em;padding:7px 12px}.mode-picker{display:flex;justify-content:center;margin:13px 0 16px;gap:10px}.mode{height:42px;width:142px;font:22px var(--display);letter-spacing:.16em;border:2px solid #2b4057;border-bottom:4px solid #07101e;border-radius:2px;background:#111c30}.mode.active{background:#78d8ed;border:2px solid #a3ecf6;border-bottom:4px solid #35a6c5;color:#0c2537;box-shadow:none}.rules-line,.start-foot{display:none}.primary-button{height:68px;background:#ed6393;color:#200f24;font:30px var(--display);letter-spacing:.2em;border:2px solid #f285aa;border-bottom:6px solid #a83061;border-radius:2px;box-shadow:0 3px #10132388}.extra-actions{display:grid;gap:12px;margin-top:16px}.extra-actions>a,.extra-actions>button{display:block;text-decoration:none;padding:10px;background:#111d30;color:#e3edff;font:20px var(--display);letter-spacing:.16em;border:2px solid #2b3e53;border-bottom:4px solid #080e1b;cursor:pointer;border-radius:2px}.extra-actions span{color:#7ed6e7;margin-left:10px}.ocean-footer{display:none}.game-card,.result-card{background:#0c192de8;border:2px solid #3d5e77;backdrop-filter:none;box-shadow:0 6px #070f1b99}.game-card h2{font-size:36px}.game-card input{font-size:16px}.game-card .panel-kicker{font-size:12px}.game-card .depth-readout{font-size:38px}.result-card h2{font-size:38px}.below{padding-top:60px}.below-copy h2{font-size:42px;line-height:1.15}.tier b{font-size:22px}.tier strong{font-size:32px}.how-grid h3{font-size:27px}
@media(min-width:1100px){.hero{top:7%}.play-area{bottom:7%}.hero h1{font-size:112px}}
@media(max-width:600px){.sitebar{height:42px;padding:0 14px}.ocean{height:calc(100svh - 49px);min-height:690px;margin:0 7px}.hero{top:10%}.hero h1{font-size:clamp(47px,12vw,72px);letter-spacing:.09em;padding-left:.09em}.subtitle{font-size:28px;letter-spacing:.28em}.hero-note{font-size:19px;margin-top:17px}.depth-token span{display:none}.utility-button{font-size:14px}.play-area{bottom:6%;width:calc(100% - 42px)}.primary-button{height:60px;font-size:25px;letter-spacing:.12em}.extra-actions>a,.extra-actions>button{font-size:18px;padding:9px}.mode{font-size:20px;height:40px;width:125px}.game-card h2{font-size:30px}}

@font-face{font-family:OceanPixel;src:url('assets/pixel.woff2') format('woff2');font-display:swap}:root{--display:OceanPixel,monospace}.ocean:after{display:block;position:absolute;inset:48% 0 0;z-index:0;content:'';pointer-events:none;background:linear-gradient(180deg,transparent,#06101b66 25%,#050c16e8 100%);mask-image:none}.hero h1{font-weight:400}.subtitle{font-weight:400}.save-progress{font-size:15px}.primary-button{font-size:30px}