:root{
  --bg:#f7f2e7; --bg2:#efe7d6; --surface:#fffdf6; --ink:#211a10; --ink2:#4d4231;
  --muted:#6f6250; --line:#d8cdb6; --line-soft:#e4dbc6;
  --accent:#9a3d0d; --accent2:#b45309; --gold:#8a6d1d;
  --i3:#e8dcc0; --i4:#e3b96b; --i5:#d98a3d; --i6:#c25e22; --i7:#9a3d0d; --i8:#6e2a0c;
  --stage-bg:#171208; --stage-ink:#f2e8d0; --stage-line:#4a3b22;
  --focus:#7c2d12;
  --serif:'Source Serif 4',Georgia,"Times New Roman",serif;
  --display:'Fraunces',Georgia,serif;
  --sans:'Atkinson Next',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --bar-h:52px;
}
html[data-theme="dark"]{
  --bg:#14110c; --bg2:#1b1710; --surface:#1f1a12; --ink:#f0e7d3; --ink2:#d5c8ab;
  --muted:#a99a7d; --line:#3d3423; --line-soft:#332b1d;
  --accent:#e8a33d; --accent2:#e8933d; --gold:#d9b45b;
  --i3:#3a3222; --i4:#7a5a24; --i5:#a96f2e; --i6:#c97a33; --i7:#e08a3c; --i8:#f0a85e;
  --stage-bg:#0d0a05; --stage-ink:#f2e8d0; --stage-line:#4a3b22;
  --focus:#f0b35e;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.02rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);padding:.6rem 1rem;z-index:60}
.skip:focus{left:8px;top:8px}
.topbar{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);padding-top:var(--browser-safe-top,env(safe-area-inset-top))}
.topbar-in{max-width:72rem;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:0 1rem;height:var(--bar-h)}
.home{font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;font-size:.95rem}
.topbar nav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 75%,transparent);mask-image:linear-gradient(90deg,#000 75%,transparent)}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{color:var(--ink2);text-decoration:none;font-size:.92rem;font-weight:600}
.topbar nav a[aria-current]{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.spacer{flex:1}
.chip{color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;border:1px solid var(--line);border-radius:999px;padding:.28rem .7rem}
.icon-btn{width:40px;height:40px;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{display:block}
.icon-btn svg[hidden]{display:none}
.wrap{max-width:72rem;margin:0 auto;padding:0 1rem}
.col{max-width:42rem}
section{scroll-margin-top:calc(var(--bar-h) + 14px)}
.kicker{font:700 .8rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:2rem 0 .6rem}
h1{font:700 clamp(1.9rem,4.6vw,3rem)/1.15 var(--display);margin:0 0 1rem;letter-spacing:-.01em}
h2{font:700 clamp(1.45rem,3vw,2rem)/1.25 var(--display);margin:2.8rem 0 .8rem}
h3{font:700 1.15rem/1.35 var(--display);margin:1.4rem 0 .5rem}
.lede{font-size:1.14rem;line-height:1.6;color:var(--ink2);max-width:46rem}
.byline{color:var(--muted);font-size:.9rem}
.answer{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent2);border-radius:10px;padding:1rem 1.1rem;max-width:46rem;margin:1.2rem 0}
.answer p{margin:0}
.share-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:1rem 0}
.share-row .lab{color:var(--muted);font-size:.9rem;margin-right:.2rem}
.shbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink2);display:grid;place-items:center;cursor:pointer;text-decoration:none}
@media(pointer:coarse){.shbtn{width:44px;height:44px}}
.shbtn:hover,.shbtn:focus-visible{color:var(--accent);border-color:var(--accent)}
.small{font-size:.9rem}.muted{color:var(--muted)}
.stage{background:var(--stage-bg);color:var(--stage-ink);border-radius:14px;padding:1rem;margin:1.4rem 0}
.stage canvas{width:100%;height:auto;display:block}
.stage figcaption{color:var(--stage-ink);opacity:.85;font-size:.92rem;margin-top:.6rem}
.stage .ctl{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.8rem}
.stage label{font-size:.92rem;font-weight:600}
.btn{font:600 .95rem/1 var(--sans);border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.65rem 1.05rem;cursor:pointer;min-height:44px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
html[data-theme="dark"] .btn.primary{color:#171208}
.stage .btn{background:transparent;color:var(--stage-ink);border-color:var(--stage-line)}
.stage .btn:hover{border-color:var(--gold);color:var(--gold)}
input[type="range"]{accent-color:var(--accent2);min-width:10rem;flex:1}
.yearlab{font:700 1rem var(--mono)}
.mapgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:1.2rem;align-items:start;margin:1rem 0 2rem}
.mapbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.8rem;position:relative}
.mapbox canvas{width:100%;height:auto;display:block;cursor:pointer;touch-action:manipulation}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.86rem;color:var(--ink2);margin-top:.6rem;align-items:center}
.sw{display:inline-block;width:1rem;height:1rem;border-radius:3px;border:1px solid var(--line);vertical-align:-2px;margin-right:.3rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.1rem;position:sticky;top:calc(var(--bar-h) + 12px)}
.card h3{margin-top:0;font-size:1.4rem}
.bigstat{font:700 2.2rem/1.1 var(--serif);color:var(--accent)}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.8rem 0}
.stat{border:1px solid var(--line-soft);border-radius:10px;padding:.55rem .6rem;text-align:center}
.stat b{display:block;font-size:1.35rem}
.stat span{font-size:.8rem;color:var(--muted)}
.finder label.lab{display:block;font-weight:700;font-size:.92rem;margin-bottom:.35rem}
.finder{position:relative;max-width:34rem}
input[type="search"]{width:100%;font:400 1.05rem var(--sans);padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);min-height:48px}
.suggest{position:absolute;z-index:20;left:0;right:0;top:100%;margin:.3rem 0 0;padding:.3rem;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;max-height:16rem;overflow:auto;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.suggest li{padding:.5rem .6rem;border-radius:7px;cursor:pointer}
.suggest li:hover,.suggest li[aria-selected="true"]{background:var(--bg2)}
.suggest small{color:var(--muted)}
table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1rem 0}
th,td{border-bottom:1px solid var(--line-soft);padding:.5rem .6rem;text-align:left;vertical-align:top}
th{font-size:.85rem;color:var(--ink2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.nights{display:flex;gap:.5rem;flex-wrap:wrap;margin:.8rem 0}
.nights .btn[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
html[data-theme="dark"] .nights .btn[aria-pressed="true"]{color:#171208}
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:10px}
.rail a{width:12px;height:12px;border-radius:50%;border:2px solid var(--muted);background:var(--bg);position:relative;display:block}
.rail a span{position:absolute;right:22px;top:50%;transform:translateY(-50%);background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:.8rem;font-weight:600;padding:.25rem .55rem;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none}
.rail a:hover span,.rail a:focus-visible span{opacity:1}
.rail a[aria-current]{background:var(--accent);border-color:var(--accent)}
@media(max-width:1180px){.rail{display:none}}
@media(max-width:860px){
  .mapgrid{grid-template-columns:1fr}
  .card{position:static}
  .stage{padding:.7rem}
  .topbar nav a:nth-child(n+3){display:none}
}
@media(max-width:480px){
  .share-row{flex-wrap:wrap}
  .share-row .lab{flex-basis:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stage .ctl .btn{flex:1 1 100%}
  .stage .ctl input[type=range]{flex:1 1 100%}
  body{font-size:1rem}
  .statgrid{grid-template-columns:repeat(3,1fr);gap:.4rem}
  .stat b{font-size:1.1rem}
}
footer{border-top:1px solid var(--line);margin-top:3.5rem;padding:1.6rem 0 2.4rem;color:var(--muted);font-size:.92rem}
footer a{color:var(--ink2)}
details{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;margin:1rem 0;background:var(--surface)}
summary{cursor:pointer;font-weight:700}
.kbd-hint{font-size:.88rem;color:var(--muted)}
.sw[data-sw="i3"]{background:var(--i3)}.sw[data-sw="i4"]{background:var(--i4)}
.sw[data-sw="i5"]{background:var(--i5)}.sw[data-sw="i6"]{background:var(--i6)}
.sw[data-sw="i7"]{background:var(--i7)}.sw[data-sw="i8"]{background:var(--i8)}
.scrollx{overflow-x:auto}
.mapbox{margin:0}
.nights-lab{align-self:center;font-weight:700}

.mappop{position:absolute;z-index:5;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem .6rem;box-shadow:0 6px 20px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:.15rem;font-size:.9rem;line-height:1.35}
.mappop[hidden]{display:none}
.mappop b{font-size:1rem;padding-right:1.6rem}
.mappop .x{position:absolute;top:.2rem;right:.3rem;border:0;background:transparent;color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;min-width:32px;min-height:32px}
#exampleNote{min-height:3.2em}