/* The Shape of the Hole: additions on top of the shared site.css.
   Layout: same story column as the other pieces; the census chart and the
   world-builder break out to the wide 68rem figure measure. */
:root{
  --hz:#23845a; --hz-band:rgba(35,132,90,.26); --hz-faint:rgba(35,132,90,.11);
  --hot:#c2410c; --cold:#0a6aa6; --rocky:#0f1a26;
  --space:#05080f; --space-ink:#e3ecf5; --space-muted:#93a5b9;
}
:root[data-theme="dark"]{
  --hz:#5fd39a; --hz-band:rgba(95,211,154,.24); --hz-faint:rgba(95,211,154,.09);
  --hot:#ff9a5a; --cold:#5cc6ff; --rocky:#e3ecf5;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --hz:#5fd39a; --hz-band:rgba(95,211,154,.24); --hz-faint:rgba(95,211,154,.09);
    --hot:#ff9a5a; --cold:#5cc6ff; --rocky:#e3ecf5;
  }
}

.hero{background:radial-gradient(110% 80% at 0% 100%,color-mix(in srgb,var(--warm) 16%,var(--bg)) 0%,var(--bg) 62%)}
.hero .kicker{color:var(--hz)}
.counter{border-left-color:var(--hz)}
.counter-num{color:var(--hz)}
.step-k{color:var(--hz)}
.walk .stage{background:radial-gradient(90% 70% at 20% 50%,color-mix(in srgb,var(--warm) 10%,var(--bg)),var(--bg))}

/* census chart */
.census-fig{max-width:68rem;margin:1.5rem auto 0;padding:0 max(1.25rem,env(safe-area-inset-left)) 0 max(1.25rem,env(safe-area-inset-right))}
.census-wrap{position:relative;border-radius:14px;border:1px solid var(--line-soft);background:var(--bg-2);overflow-x:auto}
#censusChart{display:block;width:100%;min-width:640px;height:auto}
#censusChart text{font:500 12px var(--sans);fill:var(--muted)}
#censusChart .ax-t{font-weight:600;fill:var(--ink)}
#censusChart .grid{stroke:var(--line-soft);stroke-width:1;fill:none}
#censusChart .opt{fill:var(--hz-faint)}
#censusChart .con{fill:var(--hz-band)}
#censusChart .edge{fill:none;stroke:var(--hz);stroke-width:1;stroke-dasharray:3 4;opacity:.7}
#censusChart .p{fill:var(--rocky);stroke:var(--bg-2);stroke-width:2}
#censusChart .p.big{fill:var(--bg-2);stroke:var(--muted);stroke-width:1.6}
#censusChart .p.on{stroke:var(--accent);stroke-width:2.5}
#censusChart .sol{fill:var(--warm);stroke:var(--bg-2);stroke-width:2}
#censusChart .sol-t{fill:var(--warm);font-weight:650}
#censusChart .lbl{fill:var(--ink);font-weight:600}
#censusChart .hit{fill:transparent;cursor:pointer}
.census-tip{position:absolute;pointer-events:none;z-index:3;max-width:17rem;padding:.6rem .75rem;border-radius:8px;background:var(--card);border:1px solid var(--line);font:400 .8rem/1.4 var(--sans);color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.census-tip strong{display:block;font-size:.9rem;margin-bottom:.15rem}
.census-tip span{color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:.75rem 0;font:500 .8rem var(--sans);color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;margin-right:.4rem;vertical-align:-1px;border-radius:50%}
.lg-rocky{background:var(--rocky)}
.lg-big{border:1.6px solid var(--muted)}
.lg-sol{background:var(--warm)}
.lg-con{background:var(--hz-band);border-radius:2px!important}
.lg-opt{background:var(--hz-faint);border:1px dashed var(--hz);border-radius:2px!important}
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1px;margin:1.5rem 0;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;background:var(--line-soft)}
.tally div{background:var(--bg);padding:.85rem 1rem;display:grid;gap:.2rem}
.tally b{font:400 2rem/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.tally span{font:500 .78rem/1.35 var(--sans);color:var(--muted)}

/* world builder */
.sim{max-width:68rem;margin:1.5rem auto 0;padding:0 max(1.25rem,env(safe-area-inset-left)) 0 max(1.25rem,env(safe-area-inset-right))}
.sim-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:920px){.sim-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start}}
.sim-view{position:relative;border-radius:14px;overflow:hidden;background:var(--space);aspect-ratio:4/3;max-width:100%;border:1px solid var(--line-soft)}
.sim-view canvas{position:absolute;inset:0;width:100%;height:100%}
.sim-strip{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem .75rem;font:500 .74rem/1.3 var(--sans);color:var(--space-muted);background:linear-gradient(transparent,rgba(5,8,15,.85) 40%)}
.sim-strip canvas{position:static;display:block;width:100%;height:34px;margin-top:.35rem}
.sim-badge{position:absolute;left:.9rem;top:.8rem;font:600 .7rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--space-muted)}
.sim-out{margin-top:1rem}
.sim-type{font:400 clamp(1.6rem,3.4vw,2.2rem)/1.1 var(--display);letter-spacing:-.01em;margin:0 0 .5rem;text-wrap:balance}
.sim-kicker{font:600 .74rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--hz);margin:0 0 .35rem}
.sim-text{font-size:1.04rem;line-height:1.55;margin:0 0 .5rem}
.sim-notes{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.4rem;font-size:.98rem;line-height:1.45}
.sim-notes li{padding-left:1rem;position:relative}
.sim-notes li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--muted)}
.sim-notes li.warn::before{background:var(--hot)}
.sim-notes li.good::before{background:var(--hz)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:1rem 0 0;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;background:var(--line-soft)}
@media (min-width:560px){.facts{grid-template-columns:repeat(3,minmax(0,1fr))}.facts div:last-child:nth-child(3n+1){grid-column:1/-1}.facts div:last-child:nth-child(3n+2){grid-column:span 2}}
.facts div{background:var(--bg);padding:.65rem .8rem;min-width:0}
.facts dt{font:600 .68rem/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:.2rem 0 0;font:500 .95rem/1.3 var(--sans);font-variant-numeric:tabular-nums}
.controls{display:grid;gap:1.15rem;padding:1.1rem 1.15rem;border:1px solid var(--line);border-radius:14px}
.ctl{display:grid;gap:.5rem;min-width:0;border:0;margin:0;padding:0}
.ctl-h{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;font:600 .78rem/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:0}
.ctl-h output{font:500 .86rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.seg{display:flex;flex-wrap:wrap;gap:.4rem}
.seg button{font:600 .84rem/1.15 var(--sans);text-align:left;display:grid;gap:.12rem;padding:.5rem .7rem;min-height:44px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.seg button small{font-weight:400;font-size:.72rem;color:var(--muted)}
.seg button[aria-checked="true"],.seg button[aria-pressed="true"]{border-color:var(--hz);background:color-mix(in srgb,var(--hz) 13%,transparent)}
.seg button:hover{border-color:var(--ink)}
.seg .dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.35em;vertical-align:-.05em;box-shadow:0 0 0 1px var(--line)}
.presets{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font:500 .8rem var(--sans);color:var(--muted)}
.presets button{font:600 .8rem/1 var(--sans);padding:.55rem .75rem;min-height:36px;border-radius:999px;border:1px solid var(--line-soft);background:transparent;color:var(--ink);cursor:pointer}
.presets button:hover,.presets button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
@media (pointer:coarse){.presets button{min-height:44px}}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--track,var(--line))}
input[type="range"]::-moz-range-track{height:6px;border-radius:3px;background:var(--track,var(--line))}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--bg);border:2px solid var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.25)}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--bg);border:2px solid var(--ink)}
input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#orbit{--track:linear-gradient(90deg,var(--hot) 0%,var(--hz) 35%,var(--hz) 65%,var(--cold) 100%)}
.range-ends{display:flex;justify-content:space-between;font:500 .72rem var(--sans);color:var(--muted);margin-top:-.2rem}
.sim-cap{margin-top:1rem}