:root{color-scheme:dark;--text:#e2f2f4;--faint:#9bb8bf}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#03151e;color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}.underwater,.vignette{position:fixed;inset:0;pointer-events:none}.underwater{background:url('underwater-reef.png') center/cover no-repeat}.vignette{background:radial-gradient(ellipse at 50% 35%,#00101b08 10%,#000d1b44 60%,#000712c9),linear-gradient(180deg,#000d1b45,transparent 45%,#000b1677)}header,footer{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 5vw;font-size:9px;letter-spacing:.23em;color:var(--faint)}header .brand{font-size:12px;color:var(--text);letter-spacing:.3em}header .review{position:absolute;left:50%;transform:translateX(-50%);font-size:8px;opacity:.6}button{font:inherit;color:inherit;background:transparent;cursor:pointer;border:1px solid #b0dce433;border-radius:30px;padding:12px 20px;min-height:44px;transition:background .3s}button:hover{background:#a6e2ec14}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:2px solid #d2f9ff;outline-offset:6px}main{position:relative;z-index:1;min-height:calc(100svh - 160px);display:grid;place-items:center;padding:24px}section{text-align:center;width:min(960px,100%)}#intro{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%)}#start{border:0;border-radius:0;padding:25px 0 25px .25em;font-family:Georgia,'Times New Roman',serif;font-size:clamp(56px,13vw,160px);font-weight:400;letter-spacing:.25em;line-height:1;color:#e7f5f7;text-shadow:0 0 35px #91d7e22b,0 4px 35px #0009}#start:hover{background:none;text-shadow:0 0 45px #a1eaff80}#loading{font-size:8px;letter-spacing:.28em;margin-top:30px;color:#d0e6e8aa}.started #start{animation:dissolve 2s cubic-bezier(.25,.1,.35,1) forwards;pointer-events:none}.started #loading{opacity:0;transition:opacity .5s}#player{min-height:65svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}#choices{display:flex;justify-content:center;align-items:center;gap:24px;min-height:140px;width:100%;flex-wrap:wrap}#choices button{min-height:58px;max-width:420px;flex:1 1 200px;padding:20px 26px;font-size:11px;letter-spacing:.16em;line-height:1.6;border:1px solid #b5eced44;border-radius:16px;background:#072d3d66;backdrop-filter:blur(6px);text-shadow:0 0 15px #9be8ed88;box-shadow:inset 0 1px 16px #80dce014,0 6px 32px #0006;animation:underwater-appear 2.4s ease-out both}#choices button:nth-child(2){animation-delay:.15s}#status{font-size:11px;letter-spacing:.2em;min-height:18px;margin:24px 0}.transport{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.transport button{font-size:10px;color:var(--faint);border-color:#b0dce420}.transport button:hover{color:var(--text)}#next{opacity:.55}aside{position:absolute;top:85px;right:5vw;z-index:4;padding:14px 24px;background:#031925ee;border:1px solid #76aab644;border-radius:16px;backdrop-filter:blur(20px)}aside label{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin:16px 0}input{accent-color:#9fdbe4;width:120px}footer{font-size:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}[hidden]{display:none!important}@keyframes dissolve{to{opacity:0;filter:blur(18px);letter-spacing:.38em;transform:scale(1.035)}}@keyframes underwater-appear{from{opacity:0;filter:blur(6px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}@media(max-width:650px){header,footer{padding:22px}header .review{display:none}main{min-height:calc(100svh - 150px);padding:20px}#choices{flex-direction:column;gap:14px}#choices button{flex:none;width:100%}footer{font-size:7px;letter-spacing:.13em}#start{font-size:clamp(48px,14vw,90px);letter-spacing:.18em;padding-left:.18em}}@media(prefers-reduced-motion:reduce){.started #start{animation:none;opacity:0}#choices button{animation:none}*{transition:none!important}}

.underwater video{width:100%;height:100%;object-fit:cover}@media(prefers-reduced-motion:reduce){.underwater video{display:none}}

header{position:fixed;top:18px;right:20px;z-index:5;padding:0;gap:8px}header .icon{width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:0;display:grid;place-items:center;color:#e2f2f4}header #pause{width:32px}header .icon svg{width:22px;height:22px}#pause svg{fill:currentColor}.play-mark{display:none}.paused .pause-bars{display:none}.paused .play-mark{display:block}footer{position:fixed;bottom:22px;left:24px;padding:0;z-index:2}footer img{display:block;width:108px;height:auto;opacity:.8}main{min-height:100svh}#intro{top:46%}#loading{width:100%;text-align:center;letter-spacing:.28em;padding-left:.28em;margin-top:22px}#player{min-height:76svh;justify-content:flex-end}#status:empty{display:none}#player.ended{justify-content:center;min-height:70svh}#player.ended #status{font-size:clamp(16px,3vw,26px);line-height:1.7;letter-spacing:.16em;margin-bottom:30px}#player.ended #choices{min-height:0;flex:none}#player.ended #choices button{flex:none;background:transparent;border:0;box-shadow:none;font-size:12px;max-width:none}#explore{margin-top:22px;font-size:10px;letter-spacing:.18em;color:#b9dbe0;text-decoration:none}aside a{display:block;margin:24px 0 10px;font-size:10px;color:inherit;letter-spacing:.12em;text-decoration:none}.lightning-flash{position:fixed;inset:0;background:#b9e9fa;opacity:0;pointer-events:none;transition:opacity .35s;z-index:0}.lightning .lightning-flash{opacity:.13;transition:opacity .08s}@media(prefers-reduced-motion:reduce){.lightning .lightning-flash{opacity:0}}@media(max-width:650px){header{top:12px;right:12px;padding:0}footer{left:20px;bottom:20px;padding:0}footer img{width:96px}main{min-height:100svh}}
/* Text-only commands, centred in the viewport on every screen size. */
#player{justify-content:center;min-height:76svh}#choices{flex-direction:column;justify-content:center;align-items:center;gap:28px;min-height:0;width:100%}#choices button{flex:none;width:min(850px,100%);max-width:none;min-height:52px;padding:12px 16px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;text-align:center;font-size:clamp(20px,2.5vw,32px);font-weight:400;letter-spacing:.12em;line-height:1.5;color:#e7f5f7;text-shadow:0 0 24px #a5ebf17a,0 2px 16px #00101bcc}#choices button:hover{background:transparent;color:#fff;text-shadow:0 0 28px #b9faffb3}#player.ended #choices button{font-size:clamp(20px,2.2vw,28px)}#explore{font-size:clamp(13px,1.4vw,17px)}@media(max-width:650px){#choices{gap:24px}#choices button{padding:12px 8px;font-size:21px;letter-spacing:.10em}}

/* End actions share the same text centre, width and spacing. */
#player.ended #choices{width:min(420px,100%);gap:0}#player.ended #choices button,#player.ended #explore{display:block;width:min(420px,100%);margin:0 auto;padding:14px 12px;text-align:center;line-height:1.5;font-size:clamp(18px,2vw,24px);letter-spacing:.12em}#player.ended #explore{margin-top:8px}#player.ended #status{margin-top:0;margin-bottom:24px}

/* Persistent brand and transport, clear of mobile safe areas. */
header{left:max(24px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));justify-content:space-between}
.brand-logo{display:block;width:108px;height:auto;opacity:.8}
.player-controls{display:flex;align-items:center;gap:8px}
@media(max-width:650px){header{left:max(20px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top))}.brand-logo{width:96px}}
/* Each letter drifts at a slightly different phase as the command dissolves. */
#choices button.is-dissolving{animation:none;pointer-events:none}
#choices button.is-dissolving .command-letter{display:inline-block;white-space:pre;animation:command-submerge 950ms ease-in forwards;animation-delay:calc(var(--letter-index) * 8ms)}
#choices button.is-dissolving:not(.is-selected){animation:command-fade 550ms ease-out forwards}
@keyframes command-submerge{0%{opacity:1;filter:blur(0);transform:translate(0,0) skewX(0)}30%{opacity:.9;transform:translate(3px,-3px) skewX(8deg)}65%{opacity:.55;filter:blur(2px);transform:translate(-4px,5px) skewX(-10deg)}100%{opacity:0;filter:blur(9px);transform:translate(5px,16px) skewX(7deg)}}
@keyframes command-fade{to{opacity:0;filter:blur(5px);transform:translateY(5px)}}
.paused #choices .command-letter,.paused #choices button{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){#choices button.is-dissolving,#choices button.is-dissolving .command-letter{animation:none!important;opacity:0}}