/* Paradoxul tritiului — control-room night / blueprint day */
:root{
  --bg:#07131f; --bg2:#0a1c2e; --surface:#0d2338; --surface2:#102c46;
  --text:#e8f2f8; --muted:#a9c2d4; --faint:#7e9ab0;
  --line:#1e415f; --line-soft:#16314a;
  --teal:#2ee6c8; --teal-dim:#17a88f; --amber:#ffb347; --hot:#ff6b4a; --cold:#4db2ff;
  --good:#2ee6c8; --warn:#ffb347; --bad:#ff6b4a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#e9eff3; --bg2:#dde7ee; --surface:#f4f8fa; --surface2:#eef4f7;
  --text:#0c2233; --muted:#33566e; --faint:#527488;
  --line:#b9cdd9; --line-soft:#cddbe4;
  --teal:#007a66; --teal-dim:#007a66; --amber:#9a5b00; --hot:#c23a1e; --cold:#005fa3;
  --good:#007a66; --warn:#9a5b00; --bad:#c23a1e;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
svg[hidden]{display:none}
a{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--text);padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
/* topbar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;height:52px;padding:0 clamp(.8rem,3vw,2rem);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.topbar .home{color:var(--text);text-decoration:none;font-family:var(--mono);font-size:.82rem;letter-spacing:.02em;white-space:nowrap}
.topbar .home b{color:var(--teal);font-weight:700}
.topbar nav{display:flex;gap:1.1rem;margin-left:auto}
.topbar nav a{color:var(--muted);text-decoration:none;font-size:.86rem}
.topbar nav a:hover{color:var(--text)}
.topbar .tools{display:flex;gap:.5rem;align-items:center;margin-left:1rem}
.chipbtn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--text);font:600 .8rem var(--sans);cursor:pointer;padding:.35rem .7rem;text-decoration:none}
.chipbtn:hover{border-color:var(--teal-dim)}
.progress{position:fixed;top:52px;left:0;height:2px;background:var(--teal);width:0;z-index:51}
.progress .dot{position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}
@media(max-width:820px){.topbar nav{display:none}}
/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.prose{max-width:42rem}
section{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid var(--line-soft)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.2rem 0 1rem}
h3{font-size:1.25rem;margin:1.6rem 0 .5rem}
p{margin:.7rem 0}
.lede{font-size:clamp(1.08rem,2vw,1.3rem);line-height:1.6;color:var(--text)}
.muted{color:var(--muted)} .small{font-size:.88rem}
.kicker{font-family:var(--mono);font-size:.78rem;color:var(--teal);margin:0 0 .4rem}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* hero */
.hero{border-top:none;padding-top:clamp(1.2rem,3vw,2.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);margin:.3rem 0 1rem}
h1 em{font-style:italic;color:var(--teal)}
.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1.4rem 0}
.fact{border:1px solid var(--line-soft);background:var(--surface);padding:.8rem .9rem;border-radius:6px}
.fact b{display:block;font-family:var(--mono);font-size:1.25rem;font-weight:700;color:var(--teal)}
.fact span{font-size:.8rem;color:var(--muted);line-height:1.35;display:block}
@media(max-width:560px){.hero-facts{grid-template-columns:1fr 1fr}}
/* panels + controls */
.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:clamp(.9rem,2.5vw,1.4rem)}
.panel+.panel{margin-top:1rem}
canvas.sim{display:block;width:100%;height:auto;background:var(--bg2);border:1px solid var(--line-soft);border-radius:6px;touch-action:manipulation;cursor:crosshair}
.controls{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:end;margin:1rem 0 .4rem}
.ctl{display:flex;flex-direction:column;gap:.3rem;min-width:min(240px,100%);flex:1 1 200px}
.ctl label{font-size:.85rem;color:var(--muted);display:flex;justify-content:space-between;gap:1rem}
.ctl label output{font-family:var(--mono);color:var(--text);font-weight:600}
input[type=range]{width:100%;accent-color:var(--teal);min-height:32px}
select,input[type=number]{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:.5rem .6rem;font:500 .95rem var(--sans);min-height:44px}
.btn{min-height:44px;padding:.55rem 1.1rem;border-radius:6px;border:1px solid var(--teal-dim);background:var(--teal);color:#04231d;font:700 .92rem var(--sans);cursor:pointer}
html[data-theme="light"] .btn{color:#fff}
.btn.ghost{background:transparent;color:var(--teal)}
.btn.ghost:hover{background:var(--surface2)}
.btn:hover{filter:brightness(1.08)}
.btnrow{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex-wrap:wrap}
.seg button{min-height:44px;padding:.5rem .8rem;background:transparent;border:none;color:var(--muted);font:600 .85rem var(--sans);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--teal);color:#04231d}
html[data-theme="light"] .seg button[aria-pressed="true"]{color:#fff}
.check{display:inline-flex;gap:.55rem;align-items:center;min-height:44px;font-size:.92rem;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--teal)}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-top:1rem}
.metric{border-top:2px solid var(--line);padding-top:.55rem}
.metric b{display:block;font-family:var(--mono);font-size:1.3rem;font-weight:700}
.metric span{font-size:.8rem;color:var(--muted)}
.metric.hot b{color:var(--hot)} .metric.warn b{color:var(--warn)} .metric.good b{color:var(--good)}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-top:.6rem;align-items:center}
.legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:.35rem;vertical-align:-1px}
.note{border-left:3px solid var(--amber);padding:.2rem 0 .2rem .9rem;color:var(--muted);font-size:.92rem}
.verdict{font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.45;margin:1rem 0}
.verdict b{color:var(--teal)}
/* vial */
.vial-wrap{display:grid;grid-template-columns:170px 1fr;gap:1.4rem;align-items:center}
@media(max-width:620px){.vial-wrap{grid-template-columns:1fr}}
.vial{margin:0 auto}
/* timeline */
.tl{list-style:none;margin:1.2rem 0;padding:0 0 0 1.2rem;border-left:2px solid var(--line)}
.tl li{position:relative;padding:.4rem 0 .9rem 1rem}
.tl li::before{content:"";position:absolute;left:calc(-1.2rem - 6px);top:.85rem;width:10px;height:10px;border-radius:50%;background:var(--teal)}
.tl b{font-family:var(--mono);color:var(--teal)}
/* table */
table{border-collapse:collapse;width:100%;font-size:.92rem;margin:1rem 0}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:.82rem}
td.num,th.num{text-align:right;font-family:var(--mono)}
/* share + footer */
.share-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0}
.share-row .lbl{font-size:.85rem;color:var(--muted);margin-right:.3rem}
.share-row a,.share-row button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-soft);border-radius:50%;background:transparent;color:var(--text);cursor:pointer;text-decoration:none;font-size:.95rem}
@media(pointer:coarse){.share-row a,.share-row button{width:44px;height:44px}}
.share-row a:hover,.share-row button:hover{color:var(--teal);border-color:var(--teal-dim)}
footer{border-top:1px solid var(--line-soft);padding:2rem 0 3rem;color:var(--muted);font-size:.88rem}
footer nav{display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:.8rem}
footer a{color:var(--muted)}
/* rail */
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:40}
.rail a{position:relative;width:10px;height:10px;border-radius:50%;border:1px solid var(--faint);display:block}
.rail a[aria-current="true"]{background:var(--teal);border-color:var(--teal)}
.rail a span{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:.78rem;padding:.25rem .55rem;border-radius:4px;opacity:0;pointer-events:none}
.rail a:hover span,.rail a:focus-visible span{opacity:1}
@media(max-width:1240px){.rail{display:none}}
.to-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;z-index:40;font-size:1rem;opacity:.85}
.stepbox{min-height:5.2rem}
.fuel-svg{width:100%;height:auto;display:block;background:var(--bg2);border:1px solid var(--line-soft);border-radius:6px}
.club{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;border:1px solid var(--line-soft);background:var(--surface);border-radius:6px;padding:.7rem .9rem;font-size:.9rem;margin:1rem 0 .4rem}
.club-dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.club-dot.on{background:var(--teal)}
.club-dot.hollow{border:2px dashed var(--teal)}
.club-sep{color:var(--faint)}
.counter{font-size:.95rem;color:var(--muted)}
.counter b{color:var(--teal)}
.expl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.2rem}
.expl{background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:1.1rem 1.2rem}
.expl>b{font-family:var(--mono);color:var(--teal);font-size:1.4rem}
.expl h3{margin:.3rem 0 .4rem}
.pinbtn[aria-pressed="true"]{background:var(--teal);color:#04231d;border-color:var(--teal)}
html[data-theme="light"] .pinbtn[aria-pressed="true"]{color:#fff}
#worldSvg .pin{transition:opacity .2s}
#journeyDot{transition:cx .5s ease}

/* Keep section headings visible below the sticky navigation. */
section[id]{scroll-margin-top:68px}
.legend .low{background:var(--teal)}
.legend .mid{background:var(--amber)}
.legend .high{background:var(--hot)}
.topbar .tools{margin-left:auto;flex-shrink:0}
.topbar nav{gap:.65rem}
@media(min-width:821px) and (max-width:1190px){.topbar nav{display:none}}
html[data-theme="light"]{--teal:#005344;--teal-dim:#005344;--amber:#633900;--hot:#862110;--cold:#004776;--muted:#29475c;--faint:#304d60;--good:#005344;--warn:#633900;--bad:#862110}
.hero-facts{margin:1rem 0}
@media(max-width:560px){.hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.fact{padding:.6rem}.fact span{font-size:.75rem}h1{font-size:2.05rem}.lede{font-size:1.05rem;line-height:1.55}}
@media(max-width:420px){.ctl label{flex-wrap:wrap}.btnrow{gap:.5rem}.stepbox{min-height:7rem}}
details{margin-top:1rem;color:var(--muted);font-size:.9rem}summary{cursor:pointer;min-height:44px}

:root{--faint:#a9c2d4;--hot:#ffad94;--bad:#ffad94;--cold:#82caff}