:root{color-scheme:dark;font-family:Inter,"Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;font-synthesis:none;--ink:#f2eedf;--muted:#a7c3c7;--gold:#ffdf91;--green:#9fe6b1;--night:#071b26;--line:#bcdcd72d}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night);color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:5px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}#app{position:relative;width:100%;height:100svh;min-height:380px;isolation:isolate;overflow:hidden}#world{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;cursor:crosshair;background:radial-gradient(ellipse at 50% 35%,#244958,#071b26 75%)}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#05171ab0,transparent 23%,transparent 77%,#031821b3),linear-gradient(90deg,#03172135,transparent 50%,#03172115)}.masthead{position:absolute;top:max(24px,env(safe-area-inset-top));left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:4;pointer-events:none}.wordmark{display:flex;gap:12px;align-items:center;font-size:11px;font-weight:750;letter-spacing:.17em;pointer-events:auto}.wordmark>span:first-child{font-size:30px;color:var(--gold);font-weight:400}.wordmark small{display:block;font-size:8px;font-weight:500;letter-spacing:.24em;color:#a2bec4;margin-top:6px}.tools{display:flex;gap:8px;pointer-events:auto}.icon-button{height:43px;min-width:43px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;color:var(--ink);border:1px solid var(--line);background:#071b2699;border-radius:6px;font-size:17px;backdrop-filter:blur(10px)}.icon-button span{font-size:10px}.intro{position:absolute;z-index:3;left:8%;top:24%;max-width:390px;pointer-events:none}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.17em;color:var(--gold)}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(70px,7.6vw,113px);line-height:.94;letter-spacing:-.05em;margin:18px 0 25px;text-shadow:0 3px 24px #03182190}h1 em{color:var(--gold);font-weight:400}#instruction{font-size:15px;line-height:1.7;color:#d0e0dd;text-shadow:0 2px 8px #031821;margin:0 0 27px}#start-actions{pointer-events:auto;max-width:330px}.primary{min-height:54px;padding:15px 22px;display:flex;align-items:center;justify-content:space-between;gap:45px;background:var(--gold);color:#12313b;border:1px solid #ffe7af;border-radius:5px;font-size:14px;font-weight:750;letter-spacing:.025em;box-shadow:0 5px 30px #ffdf9112;transition:background .15s,transform .15s}.primary:hover{background:#ffeabb;transform:translateY(-1px)}.primary span{font-size:21px;font-weight:400}.intro-controls{display:flex;align-items:center;gap:10px;font-size:8px;letter-spacing:.13em;color:#a8c2c7;margin-top:20px}.drag-icon{font-size:20px;color:var(--gold)}.dot{color:#6e929c}.launch-help{display:block;font-size:11px;text-decoration:underline;margin-top:15px}.error-box{font-size:13px;line-height:1.6;color:#f2ba9f}.secondary,.quiet-button{border:1px solid var(--line);border-radius:5px;background:#071b2699;padding:12px 20px;color:#d1dedb;min-height:44px;margin-top:12px}.demo-cue{position:absolute;left:64%;top:62%;z-index:2;pointer-events:none;transform:translate(-50%,-50%);animation:demodrag 4s ease-in-out infinite}.demo-ring{display:block;width:70px;height:70px;border:2px solid #ffdf9180;border-radius:50%;box-shadow:0 0 32px #ffdf9129,inset 0 0 20px #ffdf911f}.demo-pointer{position:absolute;top:33px;left:45px;font-size:38px;color:#fff4cf;text-shadow:0 2px 8px #000}.demo-word{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:17px;white-space:nowrap;font-size:9px;letter-spacing:.15em;color:var(--gold)}.hud{position:absolute;top:max(95px,calc(env(safe-area-inset-top) + 70px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:35px;padding:14px 22px;background:#061d28b0;border:1px solid #aacac72a;backdrop-filter:blur(12px);border-radius:8px;pointer-events:none;z-index:3}.hud strong{font-variant-numeric:tabular-nums;font-size:27px;line-height:1;font-weight:650;letter-spacing:-.04em}.hud span,.hud-label{display:block;font-size:7px;letter-spacing:.14em;color:#adcbce;margin-top:7px;white-space:nowrap}.passengers strong{color:var(--gold)}.time-status{text-align:right}.hull-status{text-align:center}.hull-status .hud-label{margin:0 0 9px}#hull{display:flex;gap:6px}#hull i{display:block;width:14px;height:22px;border-radius:3px;background:#a6dfc1;border:1px solid #d5ffe466;box-shadow:0 0 12px #7fe5b922}#hull i[data-lost=true]{background:#304b55;border-color:#54717a;box-shadow:none}#hull[data-low=true] i:not([data-lost=true]){background:#ffa180;border-color:#ffd3b4}.world-label{position:absolute;left:0;top:0;transform:translate(-50%,-100%);display:flex;align-items:center;gap:6px;white-space:nowrap;pointer-events:none;z-index:2;font-size:8px;letter-spacing:.1em;font-weight:700;text-shadow:0 2px 5px #041c25;padding:6px 9px;border-radius:4px}.goal-label{color:#baffce;background:#0939299c;border:1px solid #92e9b46b}.goal-label>span{font-size:17px}.boat-label{color:#ffe5a2;background:#112934b5}.boat-label>span{font-size:12px}.play-footer{position:absolute;bottom:max(27px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(310px,calc(100% - 50px));pointer-events:none;z-index:3}.play-footer p{text-align:center;margin:0 0 17px;font-size:9px;letter-spacing:.17em;color:#c5d6d1;text-shadow:0 2px 4px #031b27}.progress-track{position:relative;height:3px;background:#b5d4d235;border-radius:3px}.progress-track>div{width:0;height:100%;background:var(--gold);box-shadow:0 0 9px #ffdf9140}#progress-ship{position:absolute;top:0;left:0;transform:translate(-50%,-50%);color:var(--gold);font-size:14px}.harbor-symbol{position:absolute;right:0;top:0;transform:translate(50%,-50%);font-size:25px;color:var(--green);text-shadow:0 0 8px #092e33}.toast{position:absolute;z-index:6;top:30%;left:50%;transform:translateX(-50%);padding:11px 19px;border:1px solid #ffe1a176;background:#102b35e3;border-radius:6px;font-size:15px;font-weight:700;color:var(--gold);pointer-events:none;box-shadow:0 6px 30px #0003;white-space:nowrap}.toast[data-tone=hit]{color:#ffc4a8;border-color:#ffac90;background:#482c31e6}.impact{position:absolute;inset:0;pointer-events:none;z-index:7;box-shadow:inset 0 0 100px 25px #ff745b00}.impact[data-active=true]{box-shadow:inset 0 0 100px 25px #ff745b90;transition:none}.overlay-panel{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(410px,calc(100% - 40px));padding:33px;background:linear-gradient(145deg,#0b2834f2,#071c27f7);border:1px solid #bad3c738;box-shadow:0 20px 100px #0006;border-radius:12px;backdrop-filter:blur(20px);text-align:center;max-height:calc(100svh - 40px);overflow-y:auto}.overlay-panel h2{font-family:Georgia,serif;font-size:55px;font-weight:400;letter-spacing:-.035em;line-height:1.04;color:var(--gold);margin:16px 0}.overlay-panel .primary{width:100%;margin-top:22px}.quiet-button{width:100%;border:none;background:transparent;font-size:12px}.ending p{color:#bfd2d1;font-size:14px;line-height:1.5;margin:13px 0}.result-stats{display:flex;justify-content:center;gap:28px;border-top:1px solid var(--line);padding-top:20px;margin-top:23px}.result-stats strong{display:block;color:#e5eddf;font-size:23px;font-weight:600;font-variant-numeric:tabular-nums}.result-stats span{display:block;font-size:8px;letter-spacing:.1em;color:#9bbac2;margin-top:6px}.about-caveat{margin-top:22px;color:#91b1bd;font-size:10px;text-align:left;line-height:1.7}.about-caveat summary{cursor:pointer;text-align:center}.about-caveat p{font-size:11px;color:#a2bec6;line-height:1.7}.about-caveat a{text-decoration:underline;color:#cfdbc7}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#app[data-screen=paused] #world{filter:brightness(.7)}#app[data-screen=lost] .vignette{background:linear-gradient(#081a24aa,#321f2977)}@keyframes demodrag{0%,100%{margin-left:-35px;opacity:.55}45%,55%{margin-left:45px;opacity:1}}@media(max-width:700px){.masthead{top:max(17px,env(safe-area-inset-top));left:18px;right:18px}.wordmark{font-size:9px;gap:8px;letter-spacing:.12em}.wordmark>span:first-child{font-size:25px}.wordmark small{font-size:7px}.icon-button{padding:0;width:42px;height:42px}.icon-button span{display:none}.tools{gap:6px}.intro{left:26px;right:26px;top:17%;max-width:none}.intro .eyebrow{font-size:9px}.intro h1{font-size:75px;margin:15px 0 17px}#instruction{font-size:13px;line-height:1.6;max-width:280px;margin-bottom:20px}.intro .primary{font-size:13px;min-height:51px;padding:13px 20px;gap:30px}.intro-controls{font-size:7px;margin-top:14px;gap:7px}.demo-cue{left:66%;top:74%}.demo-ring{width:54px;height:54px}.demo-pointer{font-size:30px;top:27px;left:33px}.demo-word{font-size:7px;margin-top:12px}.hud{top:max(78px,calc(env(safe-area-inset-top) + 60px));gap:23px;padding:11px 17px;width:calc(100% - 38px);max-width:375px;justify-content:space-between}.hud strong{font-size:25px}.hud span,.hud-label{font-size:6px}.hull-status .hud-label{margin:0 0 7px}#hull i{height:20px;width:12px}#hull{gap:5px}.play-footer{bottom:max(30px,calc(env(safe-area-inset-bottom) + 14px));width:calc(100% - 65px)}.toast{top:25%;font-size:13px}.overlay-panel{padding:29px 25px}.overlay-panel h2{font-size:49px}.world-label{font-size:7px;padding:4px 6px}.goal-label>span{font-size:15px}.boat-label>span{font-size:10px}.result-stats{gap:22px}}@media(max-height:620px){.intro{top:19%;left:7%}.intro h1{font-size:60px;margin:10px 0 14px}.intro .eyebrow{font-size:8px}#instruction{font-size:12px;margin-bottom:14px}.intro-controls{margin-top:10px}.hud{top:76px;padding:8px 16px}.hud strong{font-size:21px}.overlay-panel{padding:20px 26px}.overlay-panel h2{font-size:40px;margin:10px 0}.overlay-panel .primary{margin-top:15px}.about-caveat{margin-top:14px}.result-stats{padding-top:14px;margin-top:14px}.demo-cue{left:69%;top:65%}.play-footer{bottom:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.primary .button-label{font-size:inherit;font-weight:inherit}

.sample-panel{--sample-color:#8de5dc;display:flex;align-items:center;gap:13px;padding:11px 13px;margin:0 0 16px;border:1px solid #9fd6ce40;border-radius:7px;background:#092530e8;box-shadow:0 4px 25px #00172255;color:var(--sample-color);backdrop-filter:blur(10px)}
.sample-panel[data-tone=stale]{--sample-color:#ffb474;border-color:#ffb47488;background:#352b25e8}
.sample-panel[data-tone=sampling]{--sample-color:#ffdf91;border-color:#ffdf9188}
.sample-target{position:relative;flex:0 0 26px;width:26px;height:26px;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 15px #8de5dc25}
.sample-target:after{content:"";position:absolute;inset:7px;border-radius:50%;background:currentColor}
.sample-copy{flex:1;min-width:0}.play-footer .sample-copy p{text-align:left;font-size:11px;line-height:1.4;font-weight:650;letter-spacing:.015em;color:#e8f0e9;margin:0 0 8px;text-shadow:none}
.sample-track{height:4px;border-radius:3px;overflow:hidden;background:#b5d4d22d}.sample-track>div{height:100%;width:0;background:var(--sample-color);box-shadow:0 0 10px currentColor}
.toast{max-width:min(470px,calc(100% - 38px));white-space:normal;text-align:center;line-height:1.4}
@media(max-width:700px){.sample-panel{padding:10px 12px;margin-bottom:14px;gap:11px}.play-footer .sample-copy p{font-size:11px}.sample-target{flex-basis:24px;width:24px;height:24px}}
@media(max-height:620px){.sample-panel{padding:8px 11px;margin-bottom:10px}.play-footer .sample-copy p{font-size:10px;margin-bottom:6px}.sample-target{flex-basis:22px;width:22px;height:22px}.sample-target:after{inset:6px}}
/* Reading metadata reuses the existing footer height; the boat remains clear. */
.sample-panel{padding-top:6px;padding-bottom:6px}
.play-footer .sample-copy p{margin-bottom:6px}
.reading-meta{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:12px;margin-top:6px;white-space:nowrap;font-size:8px;line-height:12px;letter-spacing:0;color:#b8cbc9}
.reading-age{font-weight:700;font-variant-numeric:tabular-nums;color:var(--sample-color)}
#flow-legend{font-size:8px;letter-spacing:0;color:#afc5c7}
.play-footer #control-hint{margin-bottom:10px}
@media(max-width:700px){.sample-panel{padding-top:6px;padding-bottom:6px}.reading-meta{gap:6px}}
@media(max-height:620px){.sample-panel{padding-top:5px;padding-bottom:5px}.reading-meta{margin-top:4px}.play-footer #control-hint{margin-bottom:8px}}