:root{
  --bg:#05060a; --ink:#f3ead6; --muted:#d3c8b0; --soft:#a99e88; --accent:#f4bd4f; --accent-ink:#1a1206;
  --card:#0c0d12; --card-edge:rgba(244,189,79,.16); --line:rgba(243,234,214,.16); --line-soft:rgba(243,234,214,.10);
  --rail:#d3c8b0; --chip:#1a1b22; --field:#14151b;
  --c-tube:#f4bd4f; --c-rail:#7fa8d9; --c-built:#e0445a; --c-constr:#e0445a; --c-mst:#f0f0f4; --c-city:#bff5e4;
  --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --vh:1vh; --stage-h:100vh; --bar:44px;
  color-scheme:dark;
  --to-top-bg:transparent; --to-top-fg:#d3c8b0;
}
:root[data-theme="light"] .hero::before{background:radial-gradient(62% 58% at 24% 66%,color-mix(in srgb,var(--bg) 94%,transparent),color-mix(in srgb,var(--bg) 60%,transparent) 58%,transparent 80%)}
:root[data-theme="light"]{
  --bg:#e8dfcd; --ink:#1b1810; --muted:#3f382b; --soft:#5d5444; --accent:#8a5300; --accent-ink:#fff8e8;
  --card:#f8f2e4; --card-edge:rgba(138,83,0,.22); --line:rgba(27,24,16,.18); --line-soft:rgba(27,24,16,.10);
  --rail:#3f382b; --chip:#e6dcc6; --field:#fffaf0;
  --c-tube:#c26a00; --c-rail:#284da8; --c-built:#b8143a; --c-constr:#cf6378; --c-mst:#1f1f1f; --c-city:#163a33;
  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(--bar) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 19px/1.62 var(--serif);text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar: slim, takes the scene's colours, drops its links inside the story */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;height:calc(var(--bar) + var(--browser-safe-top,env(safe-area-inset-top)));padding:var(--browser-safe-top,env(safe-area-inset-top)) 14px 0;display:flex;align-items:center;gap:14px;font:400 14px/1 var(--sans);color:var(--muted);background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 82%,transparent),transparent)}
.topbar .home{text-decoration:none;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.topnav{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;transition:opacity .4s}
.topnav::-webkit-scrollbar{display:none}
.topnav a{text-decoration:none;white-space:nowrap;color:var(--muted)}
.in-story .topnav{opacity:0;pointer-events:none}
.in-story .topbar{background:color-mix(in srgb,var(--bg) 90%,transparent)}
.spacer{flex:1}
.chip{text-decoration:none;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.progress{position:fixed;left:0;top:calc(var(--bar) + var(--browser-safe-top,env(safe-area-inset-top)) - 1px);height:1px;width:100%;transform-origin:0 0;transform:scaleX(0);background:var(--accent);z-index:21;opacity:.7}

/* stage */
#stage{position:fixed;inset:0;width:100vw;height:calc(var(--vh)*100);z-index:0;display:block;touch-action:pan-y;transition:opacity .6s,clip-path .5s}
#stage.interactive{cursor:crosshair}
.story-done #stage,.story-done #labels{opacity:0;pointer-events:none}
#labels{position:fixed;inset:0;z-index:1;pointer-events:none;transition:opacity .6s,clip-path .5s}
.lab{position:absolute;left:0;top:0;font:400 12.5px/1 var(--sans);color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .5s;margin:-20px 0 0 8px;text-shadow:0 0 6px var(--bg),0 0 2px var(--bg)}
.lab.on{opacity:.95}
.no-gl #stage{display:none}
.gl-fallback{display:none}
.no-gl .gl-fallback{display:block}

/* hero */
.hero{position:relative;z-index:2;min-height:calc(var(--vh)*100);display:flex;flex-direction:column;justify-content:flex-end;padding:0 6vw calc(var(--vh)*12);pointer-events:none}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(62% 55% at 24% 68%,color-mix(in srgb,var(--bg) 88%,transparent),color-mix(in srgb,var(--bg) 40%,transparent) 55%,transparent 78%)}
.hero h1{font:400 clamp(40px,6.2vw,88px)/1.02 var(--serif);letter-spacing:-.015em;max-width:12.5em;margin:0 0 .35em;text-wrap:balance;text-shadow:0 0 30px var(--bg),0 0 12px var(--bg)}
.hero .deck{font-size:clamp(19px,1.7vw,23px);line-height:1.5;max-width:31em;color:var(--ink);margin:0 0 1.1em;text-shadow:0 0 18px var(--bg),0 0 6px var(--bg)}
.hero .hint{font:400 14px/1.4 var(--sans);color:var(--muted);letter-spacing:.02em;text-shadow:0 0 10px var(--bg)}
.h-touch{display:none}
@media (hover:none) and (pointer:coarse){.h-touch{display:inline}.h-mouse{display:none}}
.no-agents .hero .hint{display:none}
.no-agents .gl-fallback{display:block}
.hero .gl-fallback img{width:auto;max-width:min(520px,90vw);max-height:calc(var(--vh)*28);height:auto;border-radius:12px;margin-top:14px}
.hero .byline{font:400 14px/1.4 var(--sans);color:var(--muted);margin-top:.4em}
.hero a{pointer-events:auto}
.shared-lead{pointer-events:auto;font:400 16px/1.45 var(--sans);background:var(--card);border:1px solid var(--card-edge);border-radius:12px;padding:12px 14px;max-width:34em;margin-bottom:16px}

/* scroll story */
.story{position:relative;z-index:2;pointer-events:none}
.step{min-height:calc(var(--vh)*120);display:flex;align-items:center;padding:0 0 0 5vw}
.step:first-child{min-height:calc(var(--vh)*100)}
.card{pointer-events:auto;width:min(440px,36vw);background:var(--card);border:1px solid var(--card-edge);border-radius:14px;padding:22px 24px 20px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.card h2{font:400 30px/1.15 var(--serif);margin:0 0 .45em;letter-spacing:-.01em;text-wrap:balance}
.card p{margin:0 0 .8em}
.card p:last-child{margin-bottom:0}
.card .k{font:400 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.big{font:400 52px/1 var(--serif);color:var(--accent);margin:.1em 0 .15em;letter-spacing:-.02em}
.big small{font:400 17px/1.3 var(--sans);color:var(--muted);letter-spacing:0;display:block;margin-top:6px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font:400 14.5px/1.3 var(--sans);color:var(--muted);margin:10px 0 0;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:7px}
.sw{display:inline-block;width:22px;height:4px;border-radius:2px;background:currentColor}
.sw.k-tube{color:var(--c-tube);height:5px}.sw.k-rail{color:var(--c-rail);height:3px}.sw.k-built{color:var(--c-built)}.sw.k-constr{color:var(--c-constr);background:repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 9px)}.sw.k-mst{color:var(--c-mst);height:3px}
.sw.k-city{width:9px;height:9px;border-radius:50%;color:var(--c-city)}
figure{margin:14px 0 6px}
figure img{width:100%;height:auto;border-radius:10px;display:block}
figcaption{font:400 13.5px/1.45 var(--sans);color:var(--muted);margin-top:7px}
.compare{width:100%;border-collapse:collapse;font:400 15px/1.35 var(--sans);margin:10px 0 4px}
.compare th,.compare td{text-align:left;padding:6px 6px 6px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.compare td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.compare th{font-weight:400;color:var(--muted);font-size:13.5px}
.compare tr.me td{color:var(--accent)}

/* sandbox */
.sandbox .card{width:min(470px,38vw)}
.field{position:relative;margin:12px 0 8px}
.field label{display:block;font:400 14px/1.3 var(--sans);color:var(--muted);margin-bottom:6px}
.field input{width:100%;font:400 17px/1.3 var(--sans);padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--field);color:var(--ink)}
.field ul{position:absolute;left:0;right:0;top:100%;z-index:5;margin:4px 0 0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:10px;max-height:260px;overflow:auto}
.field li{padding:9px 10px;border-radius:8px;cursor:pointer;font:400 16px/1.3 var(--sans)}
.field li:hover{background:var(--chip)}
.status{font:400 15px/1.45 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--muted);min-height:2.9em;margin:8px 0}
.what{font:400 16px/1.45 var(--sans);margin:6px 0}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.btn{font:400 15px/1 var(--sans);padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;min-height:40px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.share .lbl{font:400 14px/1 var(--sans);color:var(--muted);margin-right:2px}
.share a,.share button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;text-decoration:none}
.share a:hover,.share button:hover{color:var(--accent);border-color:var(--accent)}
@media (pointer:coarse){.share a,.share button{width:44px;height:44px}}
.say{font:400 14px/1.3 var(--sans);color:var(--accent);min-height:1.3em}

/* after the story: ordinary reading */
.after{position:relative;z-index:3;background:var(--bg);padding:12vh 0 8vh;border-top:1px solid var(--line-soft)}
.prose{max-width:680px;margin:0 auto;padding:0 20px}
.prose h2{font:400 34px/1.15 var(--serif);margin:1.6em 0 .5em;letter-spacing:-.01em;text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose h3{font:400 15px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:2em 0 .6em}
.prose p,.prose li{color:var(--ink)}
.prose .muted,.prose small{color:var(--muted)}
.prose ol,.prose ul{padding-left:1.2em}
.prose li{margin:.35em 0}
.prose .wide{max-width:860px;margin-left:auto;margin-right:auto}
.sources li{font:400 15.5px/1.5 var(--sans);color:var(--muted)}
.sources li a{color:var(--ink)}
footer{font:400 14.5px/1.5 var(--sans);color:var(--muted);max-width:680px;margin:6vh auto 0;padding:24px 20px 60px;border-top:1px solid var(--line-soft)}
footer a{color:var(--ink)}
.table-wrap{overflow-x:auto}
.more{margin-top:8px}

/* reading rail: hairline of dots at the far edge, after the opening */
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity .5s;pointer-events:none}
.in-story .rail,.story-done .rail{opacity:.85;pointer-events:auto}
.rail a{position:relative;display:block;width:24px;height:24px}
.rail a::before{content:"";position:absolute;right:9px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--rail);opacity:.45}
.rail a[aria-current]::before{opacity:1;background:var(--accent);transform:scale(1.5)}
.rail a span{position:absolute;right:28px;top:50%;transform:translateY(-50%);font:400 13px/1 var(--sans);white-space:nowrap;background:var(--card);border:1px solid var(--line);padding:5px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s;color:var(--ink)}
.rail a:hover span,.rail a:focus-visible span{opacity:1}

/* phone: stage on top (sized from the map's shape), text below it, passing behind it */
@media (max-width:899px){
  body{font-size:18px}
  .in-story #stage,.in-story #labels{z-index:4;clip-path:inset(0 0 calc(100% - var(--stage-h)) 0)}
  .in-story #stage{box-shadow:none}
  .stage-edge{position:fixed;left:0;right:0;top:var(--stage-h);height:1px;background:var(--line);z-index:5;opacity:0;transition:opacity .4s}
  .in-story .stage-edge{opacity:1}
  .hero{padding:0 18px calc(var(--vh)*8)}
  .kb #stage,.kb #labels{clip-path:inset(0 0 calc(100% - var(--stage-h)) 0)}
  .hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(62% 55% at 24% 68%,color-mix(in srgb,var(--bg) 88%,transparent),color-mix(in srgb,var(--bg) 40%,transparent) 55%,transparent 78%)}
.hero h1{font-size:clamp(36px,10.5vw,54px)}
  .step{padding:calc(var(--stage-h) + 10px) 12px 0;align-items:flex-start;min-height:calc(var(--vh)*105)}
  .step:first-child{min-height:calc(var(--vh)*80)}
  .card,.sandbox .card{width:100%;padding:18px 18px 16px}
  .card h2{font-size:25px}
  .big{font-size:42px}
  .rail{display:none}
  .in-story .to-top-x{opacity:0!important;pointer-events:none!important}
  .topbar{gap:10px;padding-left:10px;padding-right:10px}
  .topnav{display:none}
}
@media (min-width:900px){.stage-edge{display:none}}
@media (prefers-reduced-motion:reduce){#stage,#labels,.lab,.rail,.topnav{transition:none}}
.lab.tk{font-size:15px;color:var(--ink)}