@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/fraunces-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/fraunces-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 800;font-display:swap;src:url("fonts/fraunces-italic-az.woff2") format("woff2");unicode-range:U+0041-005A,U+0061-007A,U+00C2,U+00CE,U+00E2,U+00EE}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 800;font-display:swap;src:url("fonts/fraunces-italic-ro.woff2") format("woff2");unicode-range:U+0102-0103,U+0218-021B}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/IBMPlexSans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/IBMPlexSans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#050b14; --fg:#eef6fa; --mut:#b9cad6; --acc:#ffc46b; --acc-ink:#1a1206;
  --line:rgba(190,215,232,.26); --line-soft:rgba(190,215,232,.16); --acc2:#9fe8f2;
  --card:rgba(6,14,26,.86); --card-line:rgba(160,200,225,.18);
  --sea-top:#0b2a44; --sea-deep:#03060c; --stage-ink:#eaf6fb;
  --rock:#3a3833; --unm:#1a2030;
  --top-h:44px;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#f6f2ea; --fg:#10202c; --mut:#3a4b57; --acc:#8a3108; --acc-ink:#fff8f0;
  --line:rgba(16,32,44,.22); --line-soft:rgba(16,32,44,.13); --acc2:#1d5f7a;
  --card:rgba(250,247,240,.93); --card-line:rgba(16,32,44,.14);
  --sea-top:#dfe9ee; --sea-deep:#c9cfd4; --stage-ink:#10202c;
  --rock:#b8b0a2; --unm:#d9d6cf;
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme=dark]){
    --bg:#f6f2ea; --fg:#10202c; --mut:#3a4b57; --acc:#8a3108; --acc-ink:#fff8f0;
    --line:rgba(16,32,44,.22); --line-soft:rgba(16,32,44,.13); --acc2:#1d5f7a;
    --card:rgba(250,247,240,.93); --card-line:rgba(16,32,44,.14);
    --sea-top:#dfe9ee; --sea-deep:#c9cfd4; --stage-ink:#10202c;
    --rock:#b8b0a2; --unm:#d9d6cf;
    color-scheme:light;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 8px)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.075rem/1.62 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:color-mix(in srgb,var(--acc) 70%,transparent);text-underline-offset:.18em}
a:hover{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--acc);color:var(--acc-ink);padding:.5rem .8rem;border-radius:0 0 .4rem 0}
.skip:focus{left:0}

/* ---------------------------------------------------------------- topbar: slim, in the scene's colours */
.topbar{position:fixed;inset:0 0 auto 0;height:calc(var(--top-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(.75rem,env(safe-area-inset-right)) 0 max(.75rem,env(safe-area-inset-left));display:flex;align-items:center;gap:.4rem;z-index:60;background:var(--bg);border-bottom:1px solid var(--line-soft)}
.topbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;background:linear-gradient(var(--bg),transparent);pointer-events:none}
.brand{display:flex;align-items:center;gap:.5rem;font:600 .95rem/1 "IBM Plex Sans",sans-serif;text-decoration:none;white-space:nowrap}
.brand svg{flex:none}
.spacer{flex:1}
.chip{font:600 .78rem/1 "IBM Plex Sans",sans-serif;letter-spacing:.04em;text-decoration:none;padding:.42rem .55rem;border-radius:.4rem;color:var(--mut);min-width:44px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.chip[aria-current=page]{color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.icon-btn{appearance:none;border:0;background:transparent;color:var(--fg);width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn:hover{color:var(--acc)}
.progress{position:fixed;left:0;right:0;top:calc(var(--top-h) + env(safe-area-inset-top));height:2px;z-index:61;pointer-events:none}
.progress span{display:block;height:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}

/* ---------------------------------------------------------------- rail: hairline dots at the edge, after the opening */
.rail{position:fixed;right:max(.4rem,env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:55;display:none;flex-direction:column;gap:.1rem;opacity:0;transition:opacity .4s}
body.past-hero .rail{opacity:1}
@media (min-width:1100px){.rail{display:flex}}
.rail a{position:relative;display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;text-decoration:none}
.rail .dot{width:6px;height:6px;border-radius:50%;background:var(--mut);opacity:.6;transition:transform .2s,opacity .2s,background .2s}
.rail a[aria-current=true] .dot{background:var(--acc);opacity:1;transform:scale(1.5)}
.rail a:hover .dot,.rail a:focus-visible .dot{background:var(--acc);opacity:1}
.rail-label{position:absolute;right:calc(100% + .3rem);top:50%;transform:translateY(-50%);white-space:nowrap;font:600 .8rem/1.2 "IBM Plex Sans",sans-serif;padding:.2rem .55rem;border-radius:.4rem;background:var(--card);color:var(--fg);border:1px solid var(--card-line);opacity:0;pointer-events:none;transition:opacity .15s}
.rail a:hover .rail-label,.rail a:focus-visible .rail-label{opacity:1}

/* ---------------------------------------------------------------- the stage */
.story{position:relative}
.stage{--deep:0;position:sticky;top:0;height:100vh;overflow:hidden;z-index:1;
  background:radial-gradient(ellipse 80% 70% at 64% 50%,color-mix(in oklab,var(--sea-top) calc(100% - var(--deep) * 100%),var(--sea-deep)) 0%,var(--sea-deep) 75%)}
:root[data-theme=light] .stage{background:radial-gradient(ellipse 80% 70% at 64% 50%,color-mix(in oklab,#f3f7f8 calc(100% - var(--deep) * 60%),#c8d0d6),#e6e2da 80%)}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .stage{background:radial-gradient(ellipse 80% 70% at 64% 50%,color-mix(in oklab,#f3f7f8 calc(100% - var(--deep) * 60%),#c8d0d6),#e6e2da 80%)}}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage [data-globe-overlay]{touch-action:pan-y}
body.free .stage [data-globe-overlay]{touch-action:none;cursor:grab}
.stage [data-snow]{pointer-events:none}

/* the year the water here left the air, huge and faint behind the globe */
.bigyear{position:absolute;left:0;right:0;bottom:-.08em;text-align:right;padding-right:2vw;font:600 15vw/1 "Fraunces",Georgia,serif;letter-spacing:-.04em;color:var(--stage-ink);opacity:0;transition:opacity .6s;pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.bigyear.on{opacity:.04}

/* depth gauge */
.hud{position:absolute;left:auto;right:clamp(2.6rem,3.2vw,3.4rem);top:calc(var(--top-h) + 1.6rem);bottom:6.4rem;width:11rem;text-align:right;align-items:flex-end;pointer-events:none;color:var(--stage-ink);font:500 .8rem/1.3 "IBM Plex Sans",sans-serif;display:flex;flex-direction:column}
.gauge{position:relative;flex:1;width:100%;margin:.5rem 0 .4rem 0;border-right:1px solid var(--line);min-height:6rem}
.gauge .tick{position:absolute;right:0;width:.45rem;border-top:1px solid var(--line);font-size:.72rem;color:var(--mut)}
.gauge .tick span{position:absolute;right:.7rem;top:-.6em;white-space:nowrap}
.gauge-mark{position:absolute;left:0;top:0;width:100%;height:100%;transition:transform .12s linear}
.gauge-mark::before{content:"";position:absolute;right:-5px;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent),0 0 14px var(--acc)}
.hud{text-shadow:0 0 6px var(--bg),0 0 14px var(--bg)}
.hud-depth{font:600 1.9rem/1 "Fraunces",Georgia,serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hud-k{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.hud-row{margin-top:.6rem;padding:.35rem .6rem;border-radius:.5rem;background:var(--card);border:1px solid var(--card-line)}
.hud-row b{display:block;font:600 1.55rem/1.1 "Fraunces",Georgia,serif;color:var(--acc);font-variant-numeric:tabular-nums}
.hud-row + .hud-row b{color:var(--acc2)}

.legend{position:absolute;right:clamp(5rem,6vw,6rem);bottom:1.1rem;width:min(19rem,40vw);font:500 .74rem/1.3 "IBM Plex Sans",sans-serif;color:var(--mut);pointer-events:none}
.legend-bar{height:8px;border-radius:4px;margin:.3rem 0 .25rem;box-shadow:inset 0 0 0 1px var(--line-soft)}
.legend-ends{display:flex;justify-content:space-between;gap:1rem}
.legend-ends span:last-child{text-align:right}
.legend-keys{display:flex;gap:1rem;margin-top:.35rem}
.legend-keys i{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;vertical-align:-.12rem;margin-right:.3rem}
.legend-keys .k-rock{background:var(--rock)}
.legend-keys .k-unm{background:repeating-linear-gradient(45deg,var(--unm) 0 3px,color-mix(in srgb,var(--unm) 60%,var(--fg)) 3px 5px)}

.nogl-msg{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:22rem;text-align:center;color:var(--mut)}
body.no-gl .nogl-msg{display:block}
body.no-gl .hud,body.no-gl .legend{display:none}

/* ---------------------------------------------------------------- steps */
.steps{position:relative;z-index:2;margin-top:calc(100vh * -1);pointer-events:none}
.step{min-height:calc(100vh * .95);display:flex;align-items:center;padding:4rem clamp(1rem,5vw,4.5rem)}
.step + .step{margin-top:8vh}
.card{pointer-events:auto;width:min(29rem,100%);background:var(--card);border:1px solid var(--card-line);border-radius:1rem;padding:1.35rem 1.5rem 1.2rem;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.card h2{font:600 clamp(1.5rem,2.4vw,1.95rem)/1.15 "Fraunces",Georgia,serif;letter-spacing:-.01em;margin:0 0 .7rem}
.card p{margin:0 0 .85rem}
.card p:last-child{margin-bottom:0}
.word{color:var(--acc);font-weight:600}
.kicker{font:600 .74rem/1.2 "IBM Plex Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin:0 0 .5rem}

/* hero */
.hero{min-height:100vh;align-items:flex-end;padding-bottom:max(3.5rem,8vh)}
.hero-inner{pointer-events:auto;width:min(36rem,100%)}
.hero h1{font:600 clamp(2.3rem,5.2vw,4.4rem)/1.02 "Fraunces",Georgia,serif;letter-spacing:-.025em;margin:0 0 1.1rem;text-wrap:balance;color:var(--stage-ink);text-shadow:0 2px 30px color-mix(in srgb,var(--bg) 80%,transparent)}
.hero .lede{font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.55;color:var(--stage-ink);margin:0 0 1.4rem;max-width:33rem;text-shadow:0 1px 18px var(--bg)}
.seal{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;background:var(--card);border:1px solid var(--card-line);border-radius:1rem;padding:.9rem 1rem}
.seal label{flex:1 1 100%;font:600 .86rem/1.3 "IBM Plex Sans",sans-serif}
.seal input{flex:1 1 12rem;min-width:0;font:inherit;font-size:1rem;padding:.65rem .8rem;border-radius:.6rem;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--fg);min-height:44px}
.seal input::placeholder{color:var(--mut);opacity:.85}
.btn{appearance:none;font:600 .95rem/1.1 "IBM Plex Sans",sans-serif;padding:.7rem 1.05rem;border-radius:.6rem;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;min-height:44px}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.accent{border-color:var(--acc);color:var(--acc)}
.btn.accent:hover{background:var(--acc);color:var(--acc-ink)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.primary:hover{filter:brightness(1.08);color:var(--acc-ink)}
.seal small{flex:1 1 100%;color:var(--mut);font-size:.8rem}
.hint{margin:1.2rem 0 0;font:500 .85rem/1.2 "IBM Plex Sans",sans-serif;color:var(--mut);display:flex;align-items:center;gap:.5rem}
.hint svg{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}

/* dive */
.dive .card{width:min(31rem,100%)}
.ctl{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.9rem 0}
.ctl label{font:600 .85rem/1 "IBM Plex Sans",sans-serif}
.ctl input[type=range]{flex:1 1 10rem;accent-color:var(--acc);min-height:32px}
.ctl output{font:600 1rem/1 "Fraunces",Georgia,serif;font-variant-numeric:tabular-nums;min-width:5.2rem;text-align:right}
.result{border-left:2px solid var(--acc);padding:.2rem 0 .2rem .8rem;margin:.6rem 0 .9rem;min-height:3.2em}
.gotos{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 .6rem}
.gotos .btn{font-size:.82rem;padding:.5rem .7rem;min-height:40px}
.quick{font-size:.85rem;color:var(--mut);margin:.4rem 0 0}
.reset-map{position:absolute;left:50%;transform:translateX(-50%);bottom:1.1rem;z-index:3}
@media (min-width:860px){.reset-map{left:auto;right:clamp(12rem,24vw,22rem);transform:none}}
.pick-card{position:absolute;z-index:4;width:300px;background:var(--card);border:1px solid var(--card-line);border-radius:.8rem;padding:.75rem .9rem .8rem;font-size:.9rem;line-height:1.45;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.pick-card strong{display:block;font:600 .95rem/1.3 "IBM Plex Sans",sans-serif;margin:0 1.6rem .3rem 0}
.pick-close{position:absolute;top:.25rem;right:.25rem;width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--mut);font-size:1.3rem;cursor:pointer}
.pick-close:hover{color:var(--acc)}

/* ---------------------------------------------------------------- after the story */
.after{position:relative;z-index:3;background:var(--bg);padding:4rem clamp(1rem,5vw,2rem) 2rem;border-top:1px solid var(--line-soft)}
.prose{max-width:42rem;margin:0 auto}
.prose h2{font:600 1.7rem/1.2 "Fraunces",Georgia,serif;margin:0 0 1rem}
.prose p{margin:0 0 1rem;color:var(--fg)}
.prose p strong{font-weight:600}
.share{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:2rem 0 .5rem}
.share-label{color:var(--mut);font-size:.88rem;margin-right:.2rem}
.share a,.share button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--fg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.share a:hover,.share button:hover,.share a:focus-visible,.share button:focus-visible{color:var(--acc);border-color:var(--acc)}
@media (pointer:coarse){.share a,.share button{width:44px;height:44px}}
.share-status{min-height:1.4em;font-size:.85rem;color:var(--mut);margin:0}
.site-footer{max-width:42rem;margin:2.5rem auto 0;padding:1.2rem 0 2.5rem;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.86rem;color:var(--mut)}
.site-footer a{color:var(--mut)}
noscript p{position:relative;z-index:5;margin:5rem 1rem 0;padding:1rem;border:1px solid var(--line);border-radius:.6rem;background:var(--card)}

/* ---------------------------------------------------------------- phone: stage on top, at most 40% of the screen; text below */
@media (max-width:859px){
  .stage{z-index:5;top:calc(var(--top-h) + env(safe-area-inset-top));height:calc(100vh * .4);margin-top:calc(var(--top-h) + env(safe-area-inset-top));box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
  .steps{margin-top:0;z-index:1}
  .hud-row{display:none!important}
  body.typing .stage{height:96px}
  .step{min-height:auto;padding:1.2rem 1rem;align-items:flex-start}
  .step + .step{margin-top:0;padding-top:18vh}
  .card{width:100%;padding:1.1rem 3.1rem 1rem 1.1rem}
  .legend-ends{font-size:.7rem}
  .hero{min-height:auto;padding:1.4rem 1rem 2rem}
  .hero h1{font-size:clamp(2rem,9vw,2.6rem);text-shadow:none;color:var(--fg)}
  .hero .lede{color:var(--fg);text-shadow:none}
  .hud{right:.6rem;top:.6rem;bottom:2.8rem;width:6.4rem;font-size:.7rem}
  .bigyear{display:none}
  .hud-depth{font-size:1.15rem}
  .hud-row b{font-size:.85rem}
  .gauge .tick span{display:none}
  .legend{left:.7rem;right:auto;bottom:.5rem;width:48%;font-size:.64rem}
  .legend-keys{display:none}
  .reset-map{bottom:.5rem;left:auto;right:.6rem;transform:none;font-size:.8rem;padding:.45rem .7rem}
  .pick-card{width:auto!important;left:.6rem!important;right:.6rem;top:.6rem!important;transform:none!important;font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.hint svg{animation:none}.gauge-mark{transition:none}}