@font-face{font-family:Fraunces;font-style:normal;font-weight:300 900;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+0304,U+0308,U+0329,U+2000-206F,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 900;font-display:swap;src:url(fonts/fraunces-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-serif-4-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-serif-4-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibmplexsans-normal-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,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:500;font-display:swap;src:url(fonts/ibmplexsans-normal-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibmplexsans-normal-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,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:600;font-display:swap;src:url(fonts/ibmplexsans-normal-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Tokens. Night blue and lit-window amber by default; paper and burnt orange in the light theme. */
:root,html[data-theme="dark"]{--bg:#0a0f1a;--panel:#111a2b;--panel-2:#17233a;--ink:#eef3fa;--ink-2:#d3dcea;--muted:#aab8ce;--line:#2a3855;--line-soft:#1a2539;--accent:#ffb547;--focus:#ffe3a6;--track:#1a2539;--fill:#ffb547;--on-accent:#0a0f1a;
  --serif:"Source Serif 4",Georgia,serif;--display:Fraunces,"Source Serif 4",Georgia,serif;--sans:"IBM Plex Sans",system-ui,sans-serif;color-scheme:dark}
html[data-theme="light"]{--bg:#f6f2e8;--panel:#fffdf7;--panel-2:#efe9da;--ink:#14161c;--ink-2:#2a2f3a;--muted:#444a59;--line:#cdc4af;--line-soft:#e3dccb;--accent:#7d2a00;--focus:#7d2a00;--track:#e3dccb;--fill:#c2480a;--on-accent:#fffdf7;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:56px}
body{margin:0;background:var(--bg);color:var(--ink-2);font:1.075rem/1.62 var(--serif);-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:12px;top:8px;z-index:50;background:var(--panel);padding:8px 12px;border-radius:8px}
a{color:var(--accent)}a:focus-visible,button:focus-visible,input:focus-visible,canvas:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;height:44px;display:flex;align-items:center;gap:8px;padding:0 12px;font:500 .86rem/1 var(--sans);background:var(--bg);border-bottom:1px solid var(--line-soft)}
.topbar .brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.brand-mark{width:20px;height:20px;flex:none}
.topnav{display:none;gap:14px;margin-left:14px}.topnav a{color:var(--muted);text-decoration:none}.topnav a:hover{color:var(--ink)}
@media(min-width:760px){.topnav{display:flex}}
.topbar .spacer{flex:1}
.topbar .chip{color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:5px 9px}
.topbar .chip[aria-current]{color:var(--ink);border-color:var(--muted)}
.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;flex:none}
.icon-btn svg[hidden]{display:none}
main{padding-top:44px;outline:none}
[hidden]{display:none!important}
.top{max-width:70rem;margin:0 auto;padding:0 16px}
.hero{padding:34px 0 18px;max-width:50rem}
.kicker{font:600 .78rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
h1{font:600 clamp(1.7rem,4.6vw,2.7rem)/1.14 var(--display);color:var(--ink);margin:0 0 14px;letter-spacing:-.01em;text-wrap:balance}
.deck{font-size:1.14rem;color:var(--ink-2);margin:0 0 12px}
.lead{font-size:1.14rem;color:var(--ink);margin:0}
.lead strong{color:var(--accent)}
/* stage */
.stagebox{margin:16px 0 8px}
.mapwrap{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0a0f1a;min-height:430px}
html[data-theme="light"] .mapwrap{background:#f1ece1}
.mapwrap canvas{display:block;width:100%;cursor:grab;opacity:0;transition:opacity .4s;touch-action:none}
@media(pointer:coarse){.mapwrap canvas{touch-action:pan-y}}
.touch-hint{display:none}@media(pointer:coarse){.touch-hint{display:block}}
.mapwrap.ready canvas{opacity:1}.mapwrap canvas:active{cursor:grabbing}
.mapui{position:absolute;z-index:3}
.search{top:10px;left:10px;right:56px;max-width:25rem}
.search input{width:100%;font:500 .98rem/1.2 var(--sans);color:var(--ink);background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:10px;padding:11px 12px;-webkit-appearance:none;appearance:none;backdrop-filter:blur(6px)}
.search input::placeholder{color:var(--muted)}
.slist{list-style:none;margin:4px 0 0;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.35);max-height:16rem;overflow:auto}
.slist li{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:7px;cursor:pointer;font:500 .94rem/1.2 var(--sans);color:var(--ink)}
.slist li span{color:var(--muted);font-weight:500}
.slist li:hover,.slist li[aria-selected=true]{background:var(--panel-2)}
.slist li.none{color:var(--muted);cursor:default}
.reset{font:600 .86rem/1 var(--sans);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:9px 13px;cursor:pointer;margin-top:6px}
.reset:hover{border-color:var(--accent);color:var(--accent)}
.zoom{top:10px;right:10px;display:flex;flex-direction:column;gap:6px}
.zoom button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--ink);font:500 1.2rem/1 var(--sans);cursor:pointer}
.legend{position:absolute;z-index:2;left:10px;bottom:84px;margin:0;padding:9px 11px 10px;background:color-mix(in srgb,var(--panel) 95%,transparent);border:1px solid var(--line-soft);border-radius:10px;font:500 .78rem/1.3 var(--sans);color:var(--ink-2);max-width:17.5rem}
.legend .lt{margin:0 0 6px;font-weight:600;color:var(--ink)}
.legend ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}.legend li{display:flex;align-items:center;gap:8px}
.ramp{display:flex;height:9px;border-radius:5px;overflow:hidden}.ramp i{flex:1}
.ramplab{display:flex;justify-content:space-between;color:var(--muted);font-size:.72rem;margin-top:3px}
:root,html[data-theme="dark"]{--a0:#fff1d1;--a1:#ffb547;--a2:#ff7a1a;--a3:#ff3d1f;--a4:#d61820}
html[data-theme="light"]{--a0:#e0aa3c;--a1:#d67814;--a2:#c4460c;--a3:#a01c0e;--a4:#700a10}
.ramp .a0{background:var(--a0)}.ramp .a1{background:var(--a1)}.ramp .a2{background:var(--a2)}.ramp .a3{background:var(--a3)}.ramp .a4{background:var(--a4)}
.k{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block}
.k.door{background:var(--a1);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 35%,transparent)}
.k.street{border:2px solid var(--a1)}
.k.done{border:2px solid #96d2ff}
html[data-theme="light"] .k.done{border-color:#0a3c8c}
.clock{position:absolute;z-index:3;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:12px;padding:10px 12px;backdrop-filter:blur(6px)}
.play{font:600 .88rem/1 var(--sans);color:var(--on-accent);background:var(--accent);border:0;border-radius:99px;padding:11px 16px;cursor:pointer;white-space:nowrap;min-height:40px}
.clockmain{flex:1;min-width:0}
.clockrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
#day{font:600 1.05rem/1 var(--display);color:var(--ink);white-space:nowrap}
.count{font:500 .84rem/1.2 var(--sans);color:var(--ink-2);text-align:right}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:26px;background:transparent;margin:0;cursor:pointer;--p:0%}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--fill) var(--p),var(--track) var(--p))}
input[type=range]::-moz-range-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--fill) var(--p),var(--track) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid var(--accent);margin-top:-8.5px}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid var(--accent)}
.panel{position:absolute;z-index:4;right:58px;top:10px;width:min(25rem,calc(100% - 78px));max-height:calc(100% - 92px);-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px;box-shadow:0 14px 36px rgba(0,0,0,.4);font:400 .94rem/1.5 var(--sans);color:var(--ink-2)}
.panel p{margin:0 0 8px}.panel .faint{color:var(--muted);font-size:.86rem}
.panel .ph{font:600 1.18rem/1.2 var(--display);color:var(--ink);margin:0 0 8px}
.panel h4{font:600 .8rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
.ptcard{border:1px solid var(--accent);border-radius:10px;padding:10px 12px;margin-bottom:12px;display:grid;gap:3px}
.ptcard strong{color:var(--accent);font:600 1.05rem/1.2 var(--display)}.ptcard .kind{color:var(--ink);font-weight:600}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rows li{border-top:1px solid var(--line-soft);padding-top:7px;display:grid;gap:1px}
.rw{font-weight:600;color:var(--ink)}.rt{color:var(--ink-2);font-size:.9rem}
.more{margin-top:8px;font:600 .86rem/1 var(--sans);color:var(--accent);background:transparent;border:1px solid var(--line);border-radius:99px;padding:8px 12px;cursor:pointer}
.pbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}.pbar .reset{margin:0}
.act{font:600 .84rem/1 var(--sans);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:99px;padding:9px 12px;cursor:pointer}.act:hover{border-color:var(--accent);color:var(--accent)}
.note{font:500 .88rem/1.45 var(--sans);color:var(--muted);margin:8px 0 0}.note.small{font-size:.86rem}
.sumchip{display:none}
.legend.out{position:static;margin:10px 0 0;max-width:none;background:var(--panel)}
.panel.out{position:static;width:auto;max-height:none;margin-top:10px;box-shadow:none;-webkit-mask-image:none;mask-image:none}
@media(max-width:700px){
.search{right:10px;max-width:none;left:10px}.zoom{top:64px}
.sumchip{position:absolute;z-index:3;left:10px;right:10px;bottom:92px;display:block;text-align:left;font:600 .86rem/1.25 var(--sans);color:var(--ink);background:var(--panel);border:1px solid var(--accent);border-radius:10px;padding:10px 12px;cursor:pointer}
.sumchip[hidden]{display:none}
.clock{padding:8px 10px;gap:8px}.count{font-size:.74rem;white-space:nowrap}.play{padding:10px 13px}.search input{font-size:16px}
}
@media(max-width:370px){.count{white-space:normal}.play{padding:10px 10px}.sumchip{bottom:122px}}
/* sections */
.wrap{max-width:70rem;margin:0 auto;padding:0 16px 80px}
.wrap .step>p,.wrap .step>ul,.wrap .step>ol,.wrap .step>h2,.wrap .step>.fig,.wrap .share-end,.wrap .site-footer{max-width:46rem}
.wrap .step>.tablewrap,.wrap .step>.cabinet{max-width:56rem}
.cabinet{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:18px 26px}
.step{padding-top:42px}
.step h2{font:600 clamp(1.4rem,3.4vw,1.85rem)/1.2 var(--display);color:var(--ink);margin:0 0 14px;text-wrap:balance;position:relative}
.anchor{margin-left:.4em;font-size:.7em;text-decoration:none;opacity:0}.step h2:hover .anchor,.anchor:focus{opacity:.8}
.step p{margin:0 0 1em}
.fig{margin:22px -6px 26px}.fig svg{width:100%;height:auto;display:block}.fig figcaption{font:500 .86rem/1.45 var(--sans);color:var(--muted);margin-top:6px;padding:0 6px}
.fig .grid{stroke:var(--line-soft);stroke-width:1}.fig .grid.base{stroke:var(--line)}
.fig .ax{fill:var(--muted);font:500 12px var(--sans)}.fig .ax.t{font-size:12px}
.fig .val{fill:var(--ink);font:600 15px var(--display)}
.fig .iqr{fill:color-mix(in srgb,var(--fill) 26%,transparent);stroke:var(--fill);stroke-width:1}
.fig .med{stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.fig .line{fill:none;stroke:var(--fill);stroke-width:2.4;stroke-linejoin:round}.fig .dp{fill:var(--bg);stroke:var(--fill);stroke-width:2}
.tablewrap{overflow-x:auto;margin:16px 0 22px}
.tbl{width:100%;border-collapse:collapse;font:500 .92rem/1.35 var(--sans);min-width:30rem}
.tbl caption{text-align:left;color:var(--muted);padding-bottom:8px}
.tbl th,.tbl td{padding:9px 10px;border-top:1px solid var(--line-soft);text-align:right;color:var(--ink-2)}
.tbl th[scope=row],.tbl thead th:first-child{text-align:left;color:var(--ink)}
.tbl thead th{color:var(--muted);font-weight:600;border-top:0;border-bottom:1px solid var(--line);text-align:right;vertical-align:bottom}
.cabinet{display:grid;gap:14px;margin:12px 0 8px}
.cab h3{font:600 .9rem/1.3 var(--sans);color:var(--accent);margin:0 0 4px;letter-spacing:.02em}
.cab ul{margin:0;padding-left:1.1em;color:var(--ink-2);font-size:.98rem}.cab li{margin:.15em 0}
.limits,.sources{padding-left:1.2em}.limits li,.sources li{margin:.55em 0}
.share-end{margin:38px 0 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.share-row{display:flex;gap:8px}
.sbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;text-decoration:none}
.sbtn:hover{border-color:var(--accent);color:var(--accent)}.sbtn.ok{border-color:var(--accent);color:var(--accent)}
@media(pointer:coarse){.sbtn{width:44px;height:44px}}
.site-footer{margin-top:44px;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:6px 18px;font:500 .86rem/1.4 var(--sans);color:var(--muted)}
.site-footer a{color:var(--muted)}
/* reading rail: a hairline of dots in the gutter beside the widest column (the map, 70rem) */
.rail{display:none}
@media(min-width:1380px){
.rail{--col:70rem;--gut:1.25rem;display:flex;flex-direction:column;position:fixed;top:50%;left:calc(50% + var(--col)/2 + var(--gut));transform:translateY(-50%);z-index:40;margin:0;padding:.4rem 0;max-height:calc(100vh - 7rem)}
.rail::before{content:"";position:absolute;left:calc(.875rem - .5px);top:1.1rem;bottom:1.1rem;width:1px;background:var(--line)}
.rail-dot{position:relative;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;text-decoration:none;border-radius:50%}
.rail-dot .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 3px var(--bg);transition:transform .2s,background .2s,box-shadow .2s;flex:none}
.rail-dot:hover .dot,.rail-dot:focus-visible .dot{background:var(--accent);transform:scale(1.25)}
.rail-dot[aria-current=true] .dot{background:var(--accent);transform:scale(1.45);box-shadow:0 0 0 3px var(--bg),0 0 0 4.5px color-mix(in srgb,var(--accent) 38%,transparent)}
.rail-label{position:absolute;left:calc(100% + .15rem);top:50%;transform:translate(-4px,-50%);max-width:calc(50vw - var(--col)/2 - var(--gut) - 3.25rem);overflow:hidden;text-overflow:ellipsis;padding:.1rem .2rem;color:var(--muted);font:600 .82rem/1.3 var(--sans);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1;color:var(--accent);transform:translate(0,-50%)}
}
@media(prefers-reduced-motion:reduce){.rail .dot,.rail-label,.mapwrap canvas{transition:none}}
@media(forced-colors:active){.rail-dot .dot{background:CanvasText;box-shadow:none}}