:root{color-scheme:dark;--ivory:#f5f5e9;--cyan:#b9f4ff}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#052432;color:var(--ivory);font-family:Arial,Helvetica,sans-serif}body{overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;min-height:44px}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}[hidden]{display:none!important}#ocean{height:100svh;position:relative;isolation:isolate;overflow:hidden}#backdrop,#background-next,.shade,#life,#passage{position:absolute;inset:0;width:100%;height:100%}#backdrop,#background-next{background:center/cover no-repeat;transform:scale(1.025)}#backdrop{background-image:url('assets/lagoon.webp')}#background-next{opacity:0}.shade{background:linear-gradient(90deg,#00131fc9,transparent 57%),linear-gradient(0deg,#0017239c,transparent 30%,transparent 85%,#00172338);pointer-events:none}#life{touch-action:none}#passage{pointer-events:none;z-index:5}header{position:absolute;top:0;left:0;right:0;padding:30px 4vw;display:flex;justify-content:space-between;align-items:center;z-index:10}.brand{font:26px Georgia,serif;letter-spacing:.4em}.brand span{display:block;font:9px Arial,sans-serif;letter-spacing:.3em;margin-top:12px;opacity:.65}.header-actions{display:flex;gap:18px;align-items:center}.header-actions>button{font-size:22px}#sound,#motion{border:1px solid #d9edf54d;border-radius:50%;width:40px;height:40px;min-height:40px}#sound[aria-pressed=true],#motion[aria-pressed=true]{background:#bddfee25}#explore{font-size:15px;display:flex;gap:20px;align-items:center}#explore span{font-size:22px}#story{position:absolute;left:6vw;top:26%;width:28vw;max-width:385px;z-index:4;transition:opacity .5s,transform .6s}.eyebrow{font-size:12px;letter-spacing:.24em;line-height:1.7;color:#c0dce5;margin:0 0 24px}h1{font:400 clamp(42px,4.6vw,74px)/1.01 Georgia,serif;letter-spacing:-.035em;margin:0 0 24px}#scene-tagline{font-size:20px;line-height:1.4;max-width:310px;margin-bottom:24px}#scene-body{font-size:16px;line-height:1.75;color:#d6e6eb;max-width:300px}#story .text-button{font-size:14px;margin-top:14px;display:flex;gap:24px;align-items:center;padding:0}.text-button span{font-size:21px}#enter{opacity:.72}#depth-control{position:absolute;right:2.5vw;top:21%;bottom:22%;width:92px;z-index:12}.depth-caption{font-size:12px;letter-spacing:.2em;margin-left:11px;margin-bottom:25px;color:#c5d8df}.depth-rail{position:relative;height:calc(100% - 70px);margin-top:0}.rail-line{position:absolute;top:0;bottom:0;left:28px;width:1px;background:linear-gradient(#e2f4ed,#90b8d744)}#depth{position:absolute;top:-18px;bottom:-18px;left:0;width:55px;height:calc(100% + 36px);writing-mode:vertical-lr;direction:ltr;opacity:.01;cursor:ns-resize;z-index:5;touch-action:none}#depth:focus-visible{opacity:.4}#depth-stops button{position:absolute;top:var(--position);left:27px;transform:translateY(-50%);padding-left:15px;text-align:left;font-size:12px;color:#c3dbe5;white-space:nowrap}#depth-stops button:before{content:'';position:absolute;left:-2px;top:50%;width:5px;height:5px;border-radius:50%;background:#d6f4f7}#depth-stops button.active{opacity:0;pointer-events:none}#diver{position:absolute;left:-3px;top:0;transform:translateY(-50%);width:58px;height:92px;pointer-events:none;z-index:4;transition:top .12s}#diver img{width:58px;height:92px;object-fit:contain;filter:drop-shadow(0 2px 5px #00202b)}#depth-value{position:absolute;top:42%;left:59px;font-size:16px;white-space:nowrap;font-weight:500}#depth-value small{font-size:12px}.depth-hint{display:block;margin-top:27px;font-size:12px;letter-spacing:.12em;white-space:nowrap;opacity:.65}.diver-bubbles{position:absolute;top:8px;left:24px}.diver-bubbles i{position:absolute;width:4px;height:4px;border:1px solid #d3f3ffb0;border-radius:50%;animation:breathing-bubbles 2.5s linear infinite}.diver-bubbles i:nth-child(2){animation-delay:-.8s;left:6px;width:3px;height:3px}.diver-bubbles i:nth-child(3){animation-delay:-1.6s;left:-3px}@keyframes breathing-bubbles{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translate(7px,-65px);opacity:0}}footer{position:absolute;bottom:27px;left:6vw;right:4vw;display:flex;justify-content:space-between;align-items:center;gap:20px;z-index:10}.play-hint{display:flex;align-items:center;gap:13px;font-size:14px}.play-hint small{display:block;font-size:12px;opacity:.6;margin-top:7px}.hint-orb{width:7px;height:7px;border:1px solid #aee3ee;border-radius:50%}.footer-actions{display:flex;gap:28px;font-size:14px}.footer-actions span{margin-left:15px}#next{border-bottom:1px solid #e6f1ef60}#charge{position:absolute;pointer-events:none;z-index:11;width:110px;text-align:center;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 14px #00101e)}#charge svg{width:95px;height:95px;fill:none;stroke-width:1.5}#charge .track{stroke:#cdf3ff33}#charge-ring{stroke:#a6edff;stroke-dasharray:270;stroke-dashoffset:270;transform:rotate(-90deg);transform-origin:50% 50%}#charge-icon{position:absolute;top:23px;left:0;right:0;font:36px Georgia}#charge strong{display:block;font-size:14px;font-weight:400;white-space:nowrap}#charge small{font-size:12px;opacity:.7;display:block;margin-top:7px}#status{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);z-index:14;border:1px solid #b5e1e333;background:#062836e6;border-radius:30px;padding:13px 23px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s;text-align:center}#status.show{opacity:1}dialog{color:var(--ivory);border:1px solid #b1d4e233;background:#092936ed;border-radius:8px;padding:36px;max-height:90svh;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#00121dbc;backdrop-filter:blur(12px)}.close{position:absolute;right:16px;top:12px;font-size:32px;width:44px}h2{font:400 46px/1.1 Georgia;letter-spacing:-.03em;margin:15px 0 25px}#destinations{width:min(920px,92vw)}.destination-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.destination{height:170px;background:center/cover;position:relative;text-align:left;padding:20px;display:flex;flex-direction:column;justify-content:end;border-radius:3px;overflow:hidden}.destination:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#001523e0,transparent)}.destination>*{position:relative}.destination small{font-size:12px;letter-spacing:.15em;margin-bottom:12px}.destination strong{font:26px Georgia}.garden{background-image:url('assets/garden.webp')}.blue{background-image:url('assets/blue.webp')}.twilight{background-image:url('assets/twilight.webp')}.abyss{background-image:url('assets/abyss.webp')}#home-foot{margin-top:20px;font-size:14px}#detail{width:min(520px,90vw)}#detail-body{font-size:18px;line-height:1.85;color:#d8e7ea;white-space:pre-line}blockquote{border-left:1px solid #b2dbe3;padding-left:20px;margin:26px 0;font:italic 21px/1.45 Georgia;color:#deefee}.primary{background:#ecf1e9;color:#153640;border-radius:30px;padding:12px 24px;font-size:15px}.fiction{display:block;margin-top:24px;color:#9bb9c3;font-size:12px;line-height:1.6}#creatures{width:min(460px,90vw)}#creature-options{display:grid;gap:10px}#creature-options button{display:flex;align-items:center;justify-content:space-between;border:1px solid #d0edf32e;border-radius:4px;padding:17px;text-align:left;font-size:16px}#creature-options small{font-size:12px;opacity:.65}.quiet{font-size:14px;line-height:1.6;color:#b9d1d9}body.travelling #story{opacity:0;transform:translateY(10px)}body.travelling .play-hint{opacity:0}body.reduced *{animation:none!important;transition:none!important}.noscript{position:absolute;bottom:0;z-index:99;background:#092936;padding:20px}
#cinema{position:fixed;inset:0;z-index:100;color:#ebf8f5;isolation:isolate;background:#02070c}#cinema.render-ready{background:transparent}#cinema-frame{position:absolute;width:100%;height:100%;inset:0}.cinema-mark{position:absolute;top:9%;width:100%;text-align:center;font-size:18px;letter-spacing:.6em;pointer-events:none;transition:opacity .6s}.cinema-mark span{display:block;margin-top:18px;font-size:12px;letter-spacing:.28em;color:#93aeb4}.cinema-loading{position:absolute;top:76%;left:50%;transform:translateX(-50%);width:min(380px,65vw);text-align:center;transition:opacity .7s}.cinema-track{height:1px;background:#53788350;overflow:hidden}.cinema-track i{display:block;height:100%;width:0;background:#d1f6ff;transition:width .25s linear}.cinema-loading>span{display:block;font-size:12px;letter-spacing:.25em;margin-top:20px;color:#97b4bd}#skip-cinema{position:absolute;bottom:32px;right:4vw;font-size:14px;color:#b4c7ce}#cinema.opening .cinema-mark,#cinema.opening .cinema-loading,#cinema.opening #skip-cinema{opacity:0;pointer-events:none}body.in-cinema #ocean{pointer-events:none}body.in-cinema header,body.in-cinema #story,body.in-cinema footer,body.in-cinema #depth-control{opacity:0}body.ocean-arriving #backdrop{animation:arrival-depth 2.2s ease-out both}@keyframes arrival-depth{from{transform:scale(1.15);filter:brightness(.65) blur(3px)}to{transform:scale(1.025);filter:none}}
@media(max-width:700px){header{padding:22px}.brand{font-size:22px}.brand span{font-size:12px;letter-spacing:.2em}.header-actions{gap:9px}#sound,#motion{width:34px;height:34px;min-height:34px;font-size:19px}#explore{font-size:0;gap:0}#story{top:20%;left:7vw;width:60vw;max-width:none}h1{font-size:46px;margin-bottom:17px}#scene-tagline{font-size:17px;max-width:220px;margin-bottom:12px}#scene-body{display:none}.eyebrow{font-size:12px;margin-bottom:18px}#story .text-button{font-size:13px;margin-top:6px}#enter{display:none}#depth-control{right:14px;top:23%;bottom:23%;width:66px}.depth-caption{font-size:12px}.rail-line{left:18px}#depth{left:-8px;width:48px}#depth-stops button{left:17px;padding-left:11px;font-size:12px}#diver{left:-8px;width:45px;height:74px}#diver img{width:45px;height:74px}#depth-value{left:43px;font-size:13px}#depth-value small{font-size:12px}.depth-hint{font-size:12px;margin-top:22px}footer{left:7vw;right:6vw;bottom:20px;display:block}.play-hint{font-size:12px}.play-hint small{font-size:12px}.footer-actions{justify-content:space-between;font-size:12px;gap:15px;margin-top:14px}.footer-actions span{margin-left:6px}.shade{background:linear-gradient(90deg,#00121caa,transparent 95%),linear-gradient(0deg,#00121c88,transparent 25%)}#status{bottom:128px;font-size:13px;min-width:240px}dialog{padding:26px}.destination{height:145px;padding:13px}.destination strong{font-size:22px}h2{font-size:38px}.destination-grid{gap:10px}}
@media(max-height:550px){header{padding-top:12px}.brand span{display:none}#story{top:24%;width:35vw}h1{font-size:38px;margin-bottom:10px}.eyebrow{margin-bottom:10px}#scene-body,#enter{display:none}#scene-tagline{font-size:15px;margin-bottom:8px}#story .text-button{margin-top:0}footer{bottom:12px}.play-hint small{display:none}#depth-control{top:23%;bottom:19%}.depth-caption,.depth-hint{display:none}.depth-rail{height:100%}.cinema-mark{top:6%}.destination{height:110px}#destinations h2{font-size:30px;margin:10px 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Cinematic shell: three corner controls and one small story caption. */
header{padding:22px 28px;pointer-events:none;align-items:flex-start}header>a,header>button{pointer-events:auto}.brand{display:grid;place-items:center;width:48px;height:48px;letter-spacing:0}.brand svg{width:23px;height:31px;fill:none;stroke:#effbfa;stroke-width:1.2;transition:filter .4s,transform .4s}.brand:hover svg{filter:drop-shadow(0 0 7px #c4f9ff);transform:translateY(-2px)}#explore{display:grid;place-items:center;width:48px;height:48px;padding:10px}#explore svg,dialog .close svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.2}#sound{position:absolute;bottom:22px;right:28px;z-index:14;width:48px;height:48px;border:0;border-radius:0;background:none;padding:7px;opacity:.72}#sound svg{width:34px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5}#sound[aria-pressed=true]{background:none;opacity:1}#sound[aria-pressed=true] svg{animation:ocean-wave 2.5s ease-in-out infinite}#sound:hover{opacity:1}@keyframes ocean-wave{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1.15)}}
#backdrop{filter:contrast(1.1) saturate(1.08)}.shade{background:linear-gradient(0deg,#000c18a8,transparent 47%),linear-gradient(90deg,#00132130,transparent 45%),radial-gradient(ellipse at 58% 43%,transparent 45%,#00091645)}#story{top:auto;bottom:7vh;left:5vw;width:300px;max-width:calc(100vw - 110px);text-shadow:0 2px 20px #00111d99}#chapter{font-size:14px;letter-spacing:.15em;margin-bottom:14px;color:#d5e9ed}#scene-title{font:400 clamp(30px,3vw,44px)/1.08 Georgia,serif;letter-spacing:-.025em;margin-bottom:14px;max-width:285px}#scene-tagline{font-size:18px;line-height:1.5;margin:0 0 12px;max-width:280px;color:#e2edef}#scene-body{display:none}#story .text-button{display:inline-flex;font-size:14px;gap:10px;margin:0 19px 0 0;min-height:40px;border:0;opacity:.78}#story .text-button:hover{opacity:1}#story .text-button span{font-size:17px}#status{bottom:28px;font-size:14px;max-width:calc(100vw - 150px);border:0;background:#061f2cbd}
#destinations{position:fixed;inset:0;width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#020d16a6;box-shadow:none;overflow-y:auto}#destinations::backdrop{background:#0007119c;backdrop-filter:blur(9px) saturate(.5)}body:has(#destinations[open]) #story,body:has(#destinations[open]) #status{opacity:0;pointer-events:none}#destinations[open]{animation:menu-arrive .5s ease-out both}@keyframes menu-arrive{from{opacity:0}to{opacity:1}}#destinations .close{position:fixed;top:22px;right:28px;width:48px;height:48px;display:grid;place-items:center;z-index:3;padding:10px}.menu-heading{position:absolute;top:11vh;left:7vw}.menu-heading .eyebrow{font-size:14px;letter-spacing:.18em;color:#9bb4bf;margin-bottom:10px}.menu-heading h2{font:400 16px/1.6 Arial,sans-serif;color:#c4d5dc;letter-spacing:0;margin:0}.destination-grid{position:absolute;top:34%;left:7vw;right:15vw;display:grid;grid-template-columns:repeat(4,1fr);gap:3vw}.destination{height:auto;min-height:170px;padding:18px 0;display:flex;align-items:flex-start;justify-content:center;background:none;border:0;border-radius:0;overflow:visible;transition:opacity .25s,transform .4s}.destination:before{display:none}.destination small{font-size:14px;letter-spacing:.12em;color:#8aa5b4;margin:0 0 24px}.destination strong{font:300 clamp(28px,3.1vw,54px)/1.16 Arial,Helvetica,sans-serif;letter-spacing:-.045em;transition:color .3s}.destination[aria-current=true] strong{color:#b9eaf2}.destination[aria-current=true] small:after{content:' / HERE';font-size:12px}.destination:hover{transform:translateY(-5px)}.destination-grid:has(.destination:hover) .destination:not(:hover){opacity:.45}.menu-bottom{position:absolute;bottom:7vh;left:7vw;right:15vw;display:flex;justify-content:space-between;gap:40px;align-items:end}.menu-instructions{font-size:16px;line-height:1.8;color:#a8bdc7;margin:0;max-width:330px}.menu-tools{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:0 24px;max-width:440px}.menu-tools button{font-size:16px;min-height:44px;color:#c7dce4;padding:0}.menu-tools button:hover{color:#fff}#motion{width:auto;height:auto;border:0;border-radius:0;font-size:16px}#motion[aria-pressed=true]{background:none;color:#9cf0ee}#motion[aria-pressed=true]:after{content:' · on'}#enter{display:block;opacity:1}#home-foot{margin:0;font-size:16px}#depth-control{top:29%;bottom:25%;right:4vw;width:90px}#depth-control .depth-caption{font-size:14px;margin-left:0}#depth-control .depth-hint{display:none}#depth-control .depth-rail{height:calc(100% - 42px)}#depth-stops button{font-size:14px}#depth-value{font-size:16px}#depth-value small{font-size:14px}dialog:not(#destinations){background:#071d29f5;border-color:#93c6da26}dialog .eyebrow{font-size:14px}dialog .fiction{font-size:14px}#detail-body{font-size:18px}.quiet{font-size:16px}#creature-options small{font-size:14px}#charge strong{font-size:16px}#charge small{font-size:14px}
@media(max-width:900px){.destination-grid{grid-template-columns:repeat(2,1fr);top:24%;right:24vw;row-gap:16px}.destination{min-height:125px}.destination strong{font-size:39px}.destination small{margin-bottom:10px}.menu-bottom{right:22vw;gap:18px;bottom:5vh;flex-direction:column;align-items:start}.menu-tools{justify-content:flex-start}.menu-instructions{font-size:14px}#depth-control{right:6vw;top:29%;bottom:27%}}
@media(max-width:600px){header{padding:14px 14px}#sound{right:14px;bottom:16px}#story{left:7vw;bottom:7vh;width:260px;max-width:calc(100vw - 90px)}#scene-title{font-size:36px;max-width:255px}#scene-tagline{font-size:16px;max-width:240px}#chapter{font-size:14px;margin-bottom:12px}#story .text-button{font-size:14px;margin-right:14px}#status{bottom:12px;left:7vw;transform:none;max-width:calc(100vw - 105px);min-width:0;padding:8px 12px}#destinations .close{top:14px;right:14px}.menu-heading{top:10%;left:7vw}.menu-heading .eyebrow{font-size:14px;letter-spacing:.12em}.destination-grid{top:25%;left:7vw;right:26vw;gap:20px 22px}.destination{min-height:106px;padding:0}.destination strong{font-size:29px;line-height:1.2}.destination small{font-size:14px;letter-spacing:0;margin-bottom:12px}.destination[aria-current=true] small:after{content:' •'}.menu-bottom{left:7vw;right:7vw;bottom:6vh;gap:16px}.menu-tools{gap:0 20px;max-width:100%}.menu-tools button,#motion,#home-foot{font-size:14px}.menu-instructions{font-size:14px}#depth-control{right:5vw;top:28%;bottom:31%;width:65px}#depth-control .depth-caption{font-size:14px}#depth-stops button{font-size:14px}#depth-value{font-size:14px}.shade{background:linear-gradient(0deg,#000c18c9,transparent 57%),radial-gradient(ellipse at 55% 35%,transparent 35%,#00091630)}}
@media(max-height:600px){#story{bottom:5vh}#scene-title{font-size:30px;margin-bottom:8px}#scene-tagline{display:none}#chapter{margin-bottom:8px}.menu-heading{top:8vh}.menu-heading h2{display:none}.destination-grid{top:29%;grid-template-columns:repeat(4,1fr);right:15vw;gap:20px}.destination{min-height:100px}.destination strong{font-size:28px}.destination small{font-size:14px}.menu-bottom{bottom:5vh;right:15vw;flex-direction:row;gap:20px}.menu-instructions{display:none}.menu-tools{max-width:none}.menu-tools button{font-size:14px}#depth-control{top:26%;bottom:20%;right:4vw}#depth-control .depth-caption{display:none}}
@media(prefers-reduced-motion:reduce){#destinations[open],#sound svg{animation:none!important}}
@media(max-width:600px) and (max-height:720px){#destinations .menu-heading{position:relative;top:auto;left:auto;margin:72px 7vw 0}#destinations .destination-grid{position:relative;top:auto;left:auto;right:auto;margin:30px 27vw 0 7vw;grid-template-columns:repeat(2,1fr)}#destinations .menu-bottom{position:relative;inset:auto;margin:30px 7vw;flex-direction:column}#destinations #depth-control{top:175px;bottom:auto;height:225px}#destinations .menu-instructions{display:block}#destinations .menu-tools{justify-content:flex-start}}
/* The diver remains on the ocean; the menu keeps the rest of the view quiet. */
#ocean>#depth-control{position:absolute;top:25%;bottom:25%;right:3.5vw;width:90px;z-index:12;transition:opacity .4s}#ocean>#depth-control .depth-hint{display:block;font-size:12px;letter-spacing:.1em;margin-top:26px;color:#c4dce3}#ocean>#depth-control .depth-caption{font-size:14px}body:has(#destinations[open]) #ocean>#depth-control{opacity:0;pointer-events:none}#ocean>#depth-control #diver{transition:none}
@media(max-width:600px){#ocean>#depth-control{right:19px;top:24%;bottom:32%;width:65px}#ocean>#depth-control .depth-hint{font-size:12px;white-space:normal;line-height:1.6;width:64px}#ocean>#depth-control #depth-value{font-size:14px}}
@media(max-height:550px){#ocean>#depth-control{top:25%;bottom:22%}#ocean>#depth-control .depth-caption,#ocean>#depth-control .depth-hint{display:none}}
#descent-prompt{position:absolute;left:50%;top:54%;transform:translate(-50%,-40%);z-index:8;width:max-content;max-width:calc(100vw - 135px);padding:20px 32px 24px;text-align:center;border:1px solid #c8efff36;border-radius:80px;background:radial-gradient(ellipse at 35% 0%,#a6eaff20,transparent 72%),#07243452;box-shadow:inset 0 1px 0 #e8ffff20,0 8px 45px #000d1833;backdrop-filter:blur(8px);color:#edf9fa;opacity:0;pointer-events:none;transition:opacity .85s ease,transform 1.2s cubic-bezier(.2,.6,.2,1)}#descent-prompt.visible{opacity:1;transform:translate(-50%,-50%)}#descent-prompt strong{display:block;font:400 clamp(18px,1.8vw,25px)/1.3 Georgia,serif;letter-spacing:.01em}.descent-instruction{display:block;font-size:14px;line-height:1.6;color:#c3dce6;margin-top:9px}.descent-mark{display:block;font-size:22px;color:#b2e3ef;margin-bottom:12px}body:has(dialog[open]) #descent-prompt{opacity:0!important}body.in-cinema #descent-prompt{display:none}@media(max-width:600px){#descent-prompt{top:42%;padding:18px 20px 22px;max-width:calc(100vw - 120px);border-radius:38px;width:240px}#descent-prompt strong{font-size:22px}.descent-instruction{font-size:14px}}@media(prefers-reduced-motion:reduce){#descent-prompt{transition:none}}
.creature-mode{display:flex;gap:0;border:1px solid #bce4ee40;border-radius:24px;padding:3px;width:max-content;max-width:100%;margin-bottom:12px}.creature-mode button,.menu-tools .creature-mode button{font-size:14px;min-height:36px;padding:6px 16px;border-radius:20px;color:#bbd2df}.creature-mode button[aria-pressed=true]{background:#d9f6fa;color:#102b39}.menu-tools .creature-mode{flex-basis:auto;margin:0 0 10px}
#heart-beacon{position:absolute;z-index:7;width:58px;height:58px;min-height:58px;padding:0;border-radius:50%;border:1px solid #d5f3ff80;background:radial-gradient(circle at 29% 23%,#ffffff70 0,transparent 15%),radial-gradient(circle at 38% 30%,#f3badd25,transparent 62%);box-shadow:inset -3px -5px 10px #76bbdf22,0 0 24px #d4b9f718;backdrop-filter:blur(2px);color:#ffe0eb;cursor:pointer;transform:translate(-50%,-50%);transition:filter .3s}#heart-beacon span{font:32px/1 Georgia,serif;display:block;margin-top:-2px;text-shadow:0 0 9px #ffc1d7}#heart-beacon:hover{filter:brightness(1.3)}#heart-beacon:focus-visible{outline:2px solid white;outline-offset:5px}body:has(dialog[open]) #heart-beacon{display:none}
#ocean>#depth-control .depth-caption{position:relative;z-index:2;height:18px;line-height:18px;margin:0 0 52px 5px;letter-spacing:.18em;text-shadow:0 1px 8px #00121fff;color:#effaff}#ocean>#depth-control .depth-rail{height:calc(100% - 92px)}#ocean>#depth-control #diver{width:48px;height:78px;left:3px}#ocean>#depth-control #diver img{width:48px;height:78px}#ocean>#depth-control #depth-value{left:53px}#ocean>#depth-control .depth-hint{text-shadow:0 1px 8px #00121fff}@media(max-width:600px){#ocean>#depth-control .depth-caption{margin-left:0;margin-bottom:43px}#ocean>#depth-control .depth-rail{height:calc(100% - 85px)}#ocean>#depth-control #diver{left:-3px;width:40px;height:66px}#ocean>#depth-control #diver img{width:40px;height:66px}#ocean>#depth-control #depth-value{left:43px}}@media(max-height:550px){#ocean>#depth-control .depth-caption{display:block;margin-bottom:28px;font-size:12px}#ocean>#depth-control .depth-rail{height:calc(100% - 58px)}#ocean>#depth-control #diver,#ocean>#depth-control #diver img{height:50px;width:34px}#ocean>#depth-control #diver{left:10px}}

#descent-prompt{transition:opacity .25s ease,transform .7s ease}#descent-prompt.visible{transition:opacity .35s ease,transform .7s ease}

#find-card,#field-note{position:fixed;z-index:12;color:#e5f5f8;background:rgba(2,22,34,.83);border:1px solid #b6e9f32b;backdrop-filter:blur(18px);box-shadow:0 12px 40px #00101833;border-radius:20px}#find-card[hidden],#field-note[hidden]{display:none}#find-card{left:50%;top:9%;transform:translateX(-50%);width:330px;max-width:78vw;display:flex;align-items:center;gap:14px;padding:15px 34px 18px 16px;overflow:hidden}#find-image{width:65px;height:60px;object-fit:contain}#find-card strong{display:block;font-size:16px;font-weight:400;margin:6px 0}#find-card small{font-size:12px;letter-spacing:.08em;opacity:.65}#find-time{font-size:14px;font-variant-numeric:tabular-nums}#find-skip,#field-close{position:absolute;top:7px;right:9px;width:30px;height:30px;font-size:21px;color:#c6e5ef;background:none;border:0;cursor:pointer}#find-meter{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#95deed;transform-origin:left}#field-note{top:100px;left:4.2vw;width:280px;max-width:70vw;padding:24px}#field-note small{font-size:12px;letter-spacing:.18em;opacity:.6}#field-name{display:block;font:26px Georgia,serif;margin-top:9px}#field-text{font-size:15px;line-height:1.65;opacity:.9}#field-source{color:#c0eaf3;font-size:12px}#field-note em{display:block;margin-top:12px;font-size:12px;font-style:normal;opacity:.5}#creature-options{max-height:49vh;overflow:auto;overscroll-behavior:contain}@media(max-width:650px){#field-note{top:80px;padding:17px;width:240px}#find-card{top:80px}} 

#music{position:absolute;right:86px;bottom:22px;z-index:14;display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:6px 9px;opacity:.7;color:var(--ivory);background:transparent}#music span{font-size:23px;font-weight:300}#music small{font-size:12px;letter-spacing:.08em}#music[aria-pressed=true],#music:hover{opacity:1}#music:disabled{cursor:wait;opacity:.4}@media(max-width:600px){#music{right:69px;bottom:16px;min-height:44px;padding:6px 4px}#music small{font-size:12px}}
@media(max-width:600px){#status{max-width:calc(100vw - 175px)}}

/* Readable type with space for longer labels on compact screens. */
#detail-body{font-size:18px;line-height:1.8}#detail{width:min(600px,92vw)}#field-note{width:320px}#field-name{font-size:29px}#field-text{font-size:16px}#field-source,#field-note em{font-size:12px;opacity:.8}#find-card{width:390px;max-width:88vw;gap:12px}#find-card>div{min-width:0}#find-card strong{font-size:17px;line-height:1.35}#find-card small{font-size:13px;opacity:.85}#find-time{font-size:16px}#find-image{flex:0 0 64px}#charge{width:150px}#charge strong{white-space:normal;line-height:1.35}#creature-options button small{font-size:12px}#ocean>#depth-control .depth-hint{white-space:normal;font-size:12px;line-height:1.4;letter-spacing:.05em}#creatures .quiet,.fiction{font-size:14px;line-height:1.65}#scene-title{font-size:clamp(38px,3.8vw,60px)}
@media(max-width:600px){#depth-control{width:82px}#story{max-width:calc(100vw - 110px)}#scene-title{font-size:36px}#field-note{width:280px;max-width:78vw}#find-card{top:78px;padding:14px 34px 16px 12px}#find-image{width:52px;flex-basis:52px;height:56px}.menu-bottom{position:relative;left:auto;right:auto;bottom:auto;margin:28px 7vw 28px}.menu-heading{position:relative;top:auto;left:auto;margin:70px 7vw 25px}.destination-grid{position:relative;top:auto;left:auto;right:auto;margin:0 7vw;gap:20px}#destinations{overflow-y:auto}#menu-title{font-size:38px}.menu-tools{row-gap:6px}.destination strong{font-size:29px}#music{right:70px}}
/* Surface homepage, replacing the automatic water-drop cinematic. */
#cinema{background:#046080 url('assets/surface.webp') center/cover no-repeat;touch-action:none}#cinema-frame{opacity:0;transition:opacity .6s}.surface-shade{position:absolute;inset:0;background:linear-gradient(0deg,#001c33a6,transparent 60%);pointer-events:none}.surface-header{position:absolute;top:22px;left:3vw;right:3vw;display:flex;justify-content:space-between}.surface-header button{width:48px;padding:10px;filter:drop-shadow(0 1px 4px #012d4b)}.surface-header svg,#surface-sound svg{width:28px;height:32px;fill:none;stroke:currentColor;stroke-width:1.3}.surface-copy{position:absolute;left:6vw;bottom:12vh;max-width:65vw}.surface-copy .eyebrow{font-size:14px;letter-spacing:.35em;margin-bottom:18px;color:#e1f5fa}.surface-copy h1{font:400 clamp(44px,5.7vw,88px)/1.06 Georgia,serif;letter-spacing:-.04em;margin:0 0 20px}.surface-copy>p:not(.eyebrow){font-size:18px;line-height:1.6;margin:0 0 22px;color:#d4eaf1}#cinema #skip-cinema{position:static;font-size:16px;padding:0;color:#effaff;display:flex;align-items:center;gap:24px}#skip-cinema span{display:inline-block;animation:surface-cue 2.6s ease-in-out infinite}@keyframes surface-cue{50%{transform:translateY(6px)}}.surface-depth{position:absolute;right:4vw;top:53%;display:grid;grid-template-columns:42px 42px;align-items:center;gap:18px 8px;font-size:14px;filter:drop-shadow(0 2px 5px #002f4e)}.surface-depth>span{grid-column:1/3;letter-spacing:.16em;padding-bottom:10px}.surface-depth img{width:42px;height:84px;object-fit:contain}.surface-depth strong{font-weight:400;white-space:nowrap}#surface-sound{position:absolute;bottom:24px;right:3vw;width:48px;padding:8px}#surface-sound[aria-pressed=true]{color:#9efaff}body.in-cinema #ocean header,body.in-cinema #ocean footer,body.in-cinema #depth-control,body.in-cinema #story{visibility:hidden}body.in-cinema #life{pointer-events:none}#cinema:has(~#ocean dialog[open]) .surface-copy{opacity:0!important}@media(max-width:600px){.surface-header{top:14px;left:14px;right:14px}.surface-copy{left:7vw;bottom:13vh;max-width:calc(100vw - 115px)}.surface-copy h1{font-size:clamp(38px,9vw,54px)}.surface-copy>p:not(.eyebrow){font-size:16px}.surface-depth{right:5vw;top:54%;grid-template-columns:32px 35px;gap:12px 5px}.surface-depth img{width:32px;height:72px}#surface-sound{right:14px;bottom:16px}}@media(max-height:500px){.surface-copy{bottom:8vh}.surface-copy h1{font-size:38px;margin-bottom:10px}.surface-copy .eyebrow{margin-bottom:10px}.surface-copy>p:not(.eyebrow){margin-bottom:6px}.surface-depth{top:40%}}@media(prefers-reduced-motion:reduce){#skip-cinema span{animation:none}#cinema-frame{transition:none}}

#life{z-index:2}.shade{z-index:1}#story{z-index:16;text-shadow:0 2px 14px #001726b3}body.in-cinema dialog{pointer-events:auto}body.in-cinema #status{visibility:hidden}
/* Eight destinations remain quiet and readable in a scrollable menu. */
#destinations .menu-heading{position:relative;top:auto;left:auto;margin:9vh 7vw 28px}#destinations .destination-grid{position:relative;top:auto;left:auto;right:auto;margin:0 7vw;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 3vw}#destinations .destination{min-height:110px;padding:12px 0}#destinations .destination strong{font-size:clamp(23px,2.5vw,38px);line-height:1.2}#destinations .destination small{margin-bottom:12px}#destinations .menu-bottom{position:relative;left:auto;right:auto;bottom:auto;margin:32px 7vw 6vh}#destinations .menu-heading h2{font-size:18px}body[data-habitat=lagoon] #story{background:radial-gradient(ellipse at 20% 60%,#002f4585,transparent 73%);box-shadow:0 0 45px #00304422}#environment{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
@media(max-width:700px){#destinations .destination-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}#destinations .destination{min-height:95px}#destinations .destination strong{font-size:26px}#destinations .menu-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:16px}#destinations .menu-tools{justify-content:flex-start}#destinations .menu-heading{margin-top:82px}}
body[data-habitat=whalefall] #story,body[data-habitat=plain] #story,body[data-habitat=hadal] #story{background:radial-gradient(ellipse at 20% 60%,#001c388f,transparent 74%);text-shadow:0 2px 12px #001021}
#destinations .destination{min-height:98px}#destinations .destination-grid{row-gap:18px}#destinations .destination strong{font-size:clamp(23px,2.3vw,35px)}

/* Expedition illumination: grade the seabed beneath the living foreground. */
body:is([data-habitat=abyss],[data-habitat=octopus],[data-habitat=whalefall],[data-habitat=plain],[data-habitat=hadal]) .shade{z-index:1;background:linear-gradient(0deg,#00121b38,transparent 42%),radial-gradient(ellipse at 55% 45%,transparent 45%,#00091630)}
body:is([data-habitat=abyss],[data-habitat=octopus],[data-habitat=whalefall],[data-habitat=plain],[data-habitat=hadal]) #life{z-index:2}

#depth-stops .minor-stop{min-height:12px;height:12px;width:18px;padding:0;font-size:0}#depth-stops .minor-stop::before{width:4px;height:4px;opacity:.5}body.scene-settled #depth-stops button.active::before{box-shadow:0 0 0 5px #b9f4ff28,0 0 12px #c5f7ff;background:#f3ffff;opacity:1}body.scene-settled #depth-value{color:#d7fbff}
/* Expedition marker: a shared silhouette light, stable readout and scroll-bound vehicle handoff. */
#diver{--sub-opacity:0;--diver-opacity:1;--lamp-opacity:0}
#ocean>#depth-control #diver .explorer-diver,#ocean>#depth-control #diver .explorer-sub{position:absolute;inset:0;object-fit:contain;filter:brightness(1.18) drop-shadow(0 1px 2px #00101f) drop-shadow(0 0 2px #c6f6ffb3) drop-shadow(0 0 7px #67daff80)}
#ocean>#depth-control #diver .explorer-diver{opacity:var(--diver-opacity);transform:scale(calc(.9 + var(--diver-opacity)*.1))}
#ocean>#depth-control #diver .explorer-sub{opacity:var(--sub-opacity);transform:scale(calc(.92 + var(--sub-opacity)*.08))}
.explorer-halo{position:absolute;inset:-6px -8px;border-radius:50%;background:radial-gradient(ellipse,#91e9ff26 0%,#01223755 40%,transparent 73%);pointer-events:none}
.explorer-lamps{position:absolute;left:-60px;top:43%;width:90px;height:76px;opacity:var(--lamp-opacity);transform:rotate(18deg);transform-origin:right top;background:conic-gradient(from 228deg at 100% 0%,transparent 0deg,#bdf2ffb3 12deg,transparent 38deg);filter:blur(3px);pointer-events:none}
#diver .diver-bubbles{opacity:var(--diver-opacity);z-index:1;mask-image:linear-gradient(to top,#000 40%,transparent 95%);height:30px;top:-10px;width:20px;overflow:hidden}
#diver .diver-bubbles i{top:26px}
#ocean>#depth-control #depth-value{z-index:3;color:#f4fcff;text-shadow:0 1px 3px #001020,0 0 8px #001020,0 0 15px #001020;line-height:1.4}
#depth-stops button{color:#e4f5fc;text-shadow:0 1px 3px #001020,0 0 7px #001020}
.rail-line{box-shadow:0 0 3px #001222,0 0 8px #8adeff30}
.surface-depth img{filter:brightness(1.18) drop-shadow(0 1px 2px #001020) drop-shadow(0 0 2px #c6f6ffb3) drop-shadow(0 0 8px #67daff70)}
.surface-depth>span,.surface-depth>strong{color:#f4fcff;text-shadow:0 1px 3px #001020,0 0 8px #001020}
@media(max-width:600px){.explorer-lamps{width:70px;height:58px;left:-44px}}
@media(prefers-reduced-motion:reduce){#diver .diver-bubbles{display:none}}
/* Shared underwater glass: restrained edge light, readable interior, no extra canvas. */
#find-card,#descent-prompt{
 background:radial-gradient(ellipse at 12% 0%,#b8f5ff24,transparent 58%),radial-gradient(ellipse at 100% 100%,#42a9c41c,transparent 65%),linear-gradient(135deg,#063345c9,#041c2cdb);
 border:1px solid #bdeeff45;
 box-shadow:inset 0 1px 0 #edffff52,inset 0 -1px 0 #7dc8e81f,0 12px 38px #00142245,0 0 22px #74d7f50a;
 -webkit-backdrop-filter:blur(14px) saturate(1.18);backdrop-filter:blur(14px) saturate(1.18);
 color:#f0fcff;text-shadow:0 1px 3px #00121f80;isolation:isolate;
}
#find-card{border-radius:25px;padding:20px 46px 22px 18px;gap:16px;width:410px;max-width:calc(100vw - 36px)}
#find-card::before,#descent-prompt::before{content:'';position:absolute;pointer-events:none;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 13%,#c6faff0b 26%,transparent 40%,#e5ffff08 67%,transparent 79%);z-index:-1}
#find-image{width:72px;height:76px;flex-basis:72px;object-fit:contain;padding:6px;border-radius:18px;background:radial-gradient(ellipse,#a4ecff1b,transparent 72%);filter:drop-shadow(0 2px 7px #001b2c)}
#find-card small{color:#c3e4ed;opacity:1;font-size:13px;letter-spacing:.08em;line-height:1.5}
#find-card strong{font-size:18px;line-height:1.4;margin:5px 0 9px;font-weight:500}
#find-time{display:inline-block;font-size:15px;line-height:1.4;font-variant-numeric:tabular-nums;color:#c9f4ff;letter-spacing:.03em}
#find-skip{top:5px;right:5px;width:44px;height:44px;min-height:44px;border-radius:50%;color:#ddf5fa}
#find-skip:hover{background:#a8e9ff17}#find-skip:focus-visible{outline-offset:-5px}
#find-meter{height:3px;background:linear-gradient(90deg,#6abed4,#c7f8ff);box-shadow:0 0 8px #98e6ff70}
#descent-prompt{border-radius:32px;padding:21px 30px 23px}
#descent-prompt .descent-mark{color:#c5f6ff;text-shadow:0 0 12px #98dcff55;margin-bottom:9px}
#descent-prompt .descent-instruction{color:#d1e9f0;font-size:14px;line-height:1.6}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#find-card,#descent-prompt{background:linear-gradient(135deg,#123d4f,#071f30)}}
@media(max-width:600px){#find-card{padding:16px 42px 19px 13px;gap:10px;border-radius:22px}#find-image{width:56px;height:66px;flex-basis:56px;padding:3px}#find-card strong{font-size:17px}#find-card small{font-size:12px}#descent-prompt{padding:18px 20px 21px;border-radius:28px}}
@media(prefers-reduced-transparency:reduce){#find-card,#descent-prompt{background:#092c3e;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Keep the home drop frameless; keyboard focus follows the icon silhouette. */
#home,#surface-home,#home:focus,#surface-home:focus{border:0;outline:none;box-shadow:none;background:transparent}
#home:focus-visible svg,#surface-home:focus-visible svg{stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 3px #001824) drop-shadow(0 0 7px #b9f4ff)}