:root{
  --f-display:"Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r:22px; --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"]{
  --bg:#12080d; --bg2:#1c0d15; --ink:#f7e9ee; --muted:#c4a9b4; --line:#ffffff1f; --card:#ffffff0a; --card2:#ffffff12;
  --c-hemo:#ff4d5e; --c-infl:#ffb547; --c-prol:#ff7ac0; --c-remo:#5fe3c8; --accent:#ff7ac0; --flag:#ff5a5a;
  --glow:0 0 0 1px #ffffff14, 0 30px 80px -30px #000;
}
[data-theme="light"]{
  --bg:#f7efe9; --bg2:#efe2d9; --ink:#2a0f1b; --muted:#6d4b59; --line:#2a0f1b22; --card:#ffffffa6; --card2:#ffffffd9;
  --c-hemo:#c8102e; --c-infl:#b86a00; --c-prol:#b8327e; --c-remo:#0b8f78; --accent:#8c1515; --flag:#b3141b;
  --glow:0 0 0 1px #2a0f1b14, 0 30px 60px -35px #5a1e3366;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s var(--ease),color .5s}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:1}
#cells{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}
[data-theme="light"] #cells{opacity:.35}
main,header,footer{position:relative;z-index:2}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:9;background:var(--ink);color:var(--bg);padding:.5rem 1rem;border-radius:99px}
.skip:focus{left:8px}

.top{display:flex;align-items:center;gap:1.5rem;padding:1rem clamp(1rem,4vw,3rem);position:sticky;top:0;backdrop-filter:blur(14px) saturate(1.3);background:color-mix(in oklab,var(--bg) 70%,transparent);border-bottom:1px solid var(--line);z-index:5}
.brand{font:600 1.25rem var(--f-display);text-decoration:none;display:flex;align-items:center;gap:.55rem;letter-spacing:-.01em;font-variation-settings:"SOFT" 100}
.brand-dot{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--c-prol),var(--c-hemo));box-shadow:0 0 18px var(--c-prol);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.25);border-radius:42% 58% 55% 45%}}
.top nav{display:flex;gap:1.2rem;margin-left:auto;font-size:.92rem}
.top nav a{text-decoration:none;color:var(--muted)}
.top nav a:hover{color:var(--ink)}
.theme-btn{width:44px;height:26px;border-radius:99px;border:1px solid var(--line);background:var(--card2);position:relative;cursor:pointer}
.theme-btn span{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:transform .4s var(--ease)}
[data-theme="light"] .theme-btn span{transform:translateX(18px);background:var(--accent)}

section{padding:clamp(2.5rem,6vw,5rem) clamp(1rem,5vw,4rem);max-width:1280px;margin:0 auto}
.hero{padding-top:clamp(3rem,9vw,7rem);min-height:78vh;display:flex;flex-direction:column;justify-content:center}
.kicker{font:500 .8rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 1.2rem}
.kicker strong{color:var(--ink);font-weight:600}
h1{font:400 clamp(3.2rem,11vw,9.5rem)/.88 var(--f-display);letter-spacing:-.045em;margin:0 0 1.6rem;font-variation-settings:"SOFT" 100,"opsz" 144}
h1 em{font-style:italic;font-weight:300;background:linear-gradient(100deg,var(--c-hemo),var(--c-infl) 35%,var(--c-prol) 65%,var(--c-remo));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:flow 9s ease-in-out infinite alternate}
@keyframes flow{to{background-position:100% 0}}
.lede{max-width:46rem;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted)}
.lede em{color:var(--ink)}
.lede.small{font-size:1.05rem}
.hero-phases{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 1rem}
.hero-phases span{font:500 .78rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;padding:.45rem .9rem;border-radius:99px;border:1px solid color-mix(in oklab,var(--c) 60%,transparent);color:var(--c);background:color-mix(in oklab,var(--c) 10%,transparent)}
.disclaimer-mini{font-size:.85rem;color:var(--muted);margin-top:1.5rem}

.sec-h{font:400 clamp(1.7rem,3.4vw,2.6rem)/1.1 var(--f-display);letter-spacing:-.02em;margin:0 0 1.4rem;display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;font-variation-settings:"SOFT" 60}
.sec-h .num{font:600 .8rem var(--f-mono);color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:.15rem .55rem;transform:translateY(-.4em)}
.sec-h small{font:400 .9rem var(--f-body);color:var(--muted)}
.sec-h label{cursor:pointer}
fieldset{border:0;margin:0;padding:0;min-width:0}

/* type tiles */
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.tile{position:relative}
.tile input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:2;margin:0}
.tile label{display:flex;flex-direction:column;gap:.35rem;padding:1rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line);min-height:170px;transition:transform .35s var(--ease),border-color .3s,background .3s;overflow:hidden;position:relative}
.tile svg{width:100%;height:74px;margin-bottom:.2rem}
.tile .t-name{font:600 1rem var(--f-body);line-height:1.2}
.tile .t-alt{font-size:.78rem;color:var(--muted);line-height:1.3}
.tile .t-tag{position:absolute;top:.7rem;right:.7rem;font:600 .62rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tile label::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--accent) 35%,transparent),transparent 40%);opacity:0;transition:opacity .3s}
.tile:hover label{transform:translateY(-3px)}
.tile:hover label::before{opacity:.5}
.tile input:checked+label{border-color:var(--accent);background:var(--card2);box-shadow:0 0 0 1px var(--accent),0 18px 40px -20px var(--accent)}
.tile input:checked+label::before{opacity:.65}
.tile input:focus-visible+label{outline:3px solid var(--accent);outline-offset:3px}
.tile svg .sk1{fill:color-mix(in oklab,var(--c-prol) 30%,var(--bg2))}
.tile svg .sk2{fill:color-mix(in oklab,var(--c-infl) 18%,var(--bg2))}
.tile svg .sk3{fill:color-mix(in oklab,var(--c-infl) 8%,var(--bg))}
.tile svg .wd{fill:var(--c-hemo)}
.tile svg .st{stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
.tile input:checked+label svg .wd{animation:ooze 2.4s ease-in-out infinite}
@keyframes ooze{50%{opacity:.6}}

.burn-deg{margin-top:1.2rem;padding:1rem 1.2rem;border-radius:var(--r);border:1px dashed var(--line)}
.burn-deg legend{font:600 .8rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0 .4rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip label{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:99px;border:1px solid var(--line);background:var(--card);font-size:.92rem;transition:all .25s var(--ease);cursor:pointer}
.chip label i{font-style:normal;font-family:var(--f-mono);opacity:.7}
.chip input:checked+label{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip input:focus-visible+label{outline:3px solid var(--accent);outline-offset:2px}

.build-row{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:clamp(1.5rem,4vw,4rem);margin-top:3rem}
.age-ctl{display:flex;align-items:center;gap:1rem}
#ageNum{font:300 clamp(3rem,7vw,5rem)/1 var(--f-display);width:3.2ch;background:transparent;border:0;border-bottom:2px solid var(--accent);color:var(--ink);padding:0;-moz-appearance:textfield}
#ageNum::-webkit-inner-spin-button{opacity:.4}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:34px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:9px;background:linear-gradient(90deg,var(--c-remo),var(--c-prol),var(--c-infl),var(--c-hemo))}
input[type=range]::-moz-range-track{height:6px;border-radius:9px;background:linear-gradient(90deg,var(--c-remo),var(--c-prol),var(--c-infl),var(--c-hemo))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--ink);border:4px solid var(--bg);box-shadow:0 0 0 2px var(--ink)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ink);border:4px solid var(--bg)}
.age-band{color:var(--muted);font-size:.95rem;min-height:3em}

/* map */
.map-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:flex-end}
.summary{flex:1 1 420px;max-width:640px;padding:1.1rem 1.3rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line);font-size:.98rem}
.summary b{font-family:var(--f-display);font-weight:500;font-size:1.25rem}
.summary .pill{display:inline-block;font:600 .7rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;border-radius:99px;margin-right:.3rem;background:var(--card2);border:1px solid var(--line)}
.summary .pill.warn{color:var(--flag);border-color:var(--flag)}
.timeline-wrap{margin:1.8rem 0 0;padding:clamp(.8rem,2vw,1.6rem);border-radius:calc(var(--r) + 8px);background:color-mix(in oklab,var(--bg) 90%,transparent);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--glow)}
#timeline{width:100%;height:auto;display:block;overflow:visible}
#timeline .axis text{font:500 13px var(--f-mono);fill:var(--muted)}
#timeline .axis line{stroke:var(--line)}
#timeline .band{transition:all .9s var(--ease)}
#timeline .blabel{font:600 16px var(--f-body);fill:var(--ink)}
#timeline .bsub{font:500 12px var(--f-mono);fill:var(--muted)}
#timeline .mk line{stroke:var(--ink);stroke-dasharray:3 4}
#timeline .mk text{font:600 12px var(--f-mono);fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
#timeline .now line{stroke:var(--accent);stroke-width:2}
#timeline .now circle{fill:var(--accent)}
.scrub{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;align-items:center;margin-top:.6rem}
.scrub label{font:500 .85rem var(--f-mono);color:var(--muted)}
.scrub output{color:var(--ink);font-weight:600}
.now-phase{grid-column:1/-1;margin:.2rem 0 0;font-size:.98rem}
.tl-cap{font-size:.82rem;color:var(--muted);margin-top:.8rem}

.phase-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin:1.4rem 0 2rem}
.pcard{padding:1.1rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);transition:transform .4s var(--ease),box-shadow .4s}
.pcard.active{transform:translateY(-6px);box-shadow:0 24px 50px -30px var(--c),0 0 0 1px var(--c)}
.pcard h4{font:500 1.35rem var(--f-display);margin:.1rem 0 .15rem}
.pcard .when{font:600 .75rem var(--f-mono);color:var(--c);text-transform:uppercase;letter-spacing:.05em}
.pcard p{font-size:.9rem;color:var(--muted);margin:.6rem 0}
.cellrow{display:flex;flex-wrap:wrap;gap:.3rem}
.cellrow span{font-size:.72rem;padding:.15rem .5rem;border-radius:99px;background:color-mix(in oklab,var(--c) 16%,transparent);color:var(--ink)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.panel{backdrop-filter:blur(12px);padding:clamp(1.1rem,2.4vw,1.8rem);border-radius:var(--r);background:var(--card);border:1px solid var(--line);margin-bottom:1rem}
.panel h3{font:500 1.6rem var(--f-display);margin:0 0 1rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.6rem}
.panel h4{font:600 .78rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .6rem}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:.55rem 0 .55rem 2.8rem;border-bottom:1px solid var(--line)}
.steps li:last-child{border:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.6rem;font:600 .8rem var(--f-mono);color:var(--accent);width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;border:1px solid var(--accent)}
.steps.small li{font-size:.94rem}
.refline{font-size:.78rem;color:var(--muted);margin:.8rem 0 0}
.dd{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ticks,.crosses,.flags ul{list-style:none;padding:0;margin:0}
.ticks li,.crosses li,.flags li{padding:.4rem 0 .4rem 1.7rem;position:relative;font-size:.95rem}
.ticks li::before{content:"";position:absolute;left:0;top:.75rem;width:.9rem;height:.5rem;border-left:2px solid var(--c-remo);border-bottom:2px solid var(--c-remo);transform:rotate(-45deg)}
.crosses li::before,.crosses li::after{content:"";position:absolute;left:.2rem;top:1rem;width:.9rem;height:2px;background:var(--c-hemo);transform:rotate(45deg)}
.crosses li::after{transform:rotate(-45deg)}
.flags{border-color:color-mix(in oklab,var(--flag) 45%,transparent);background:color-mix(in oklab,var(--flag) 7%,var(--card))}
.flags li::before{content:"!";position:absolute;left:0;top:.45rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--flag);color:#fff;font:700 .75rem/1.15rem var(--f-mono);text-align:center}
.flag-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.flag-cols p{font-size:.95rem;margin:0}
.pulse{width:12px;height:12px;border-radius:50%;background:var(--flag);box-shadow:0 0 0 0 var(--flag);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tetanus{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.tet-ctl{display:flex;flex-wrap:wrap;gap:1rem}
.tet-ctl label{display:flex;flex-direction:column;font-size:.85rem;color:var(--muted);gap:.3rem}
select{font:500 .95rem var(--f-body);color:var(--ink);background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.55rem .8rem}
select option{background:var(--bg);color:var(--ink)}
.tet-out{margin:.9rem 0 0;font-size:1rem;padding:.8rem 1rem;border-radius:14px;background:var(--card2)}

.factor-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem}
.fcard{padding:1rem 1.1rem;border-radius:18px;border:1px solid var(--line);background:var(--card);opacity:.78;transition:all .4s var(--ease)}
.fcard.on{opacity:1;border-color:var(--c-infl);background:color-mix(in oklab,var(--c-infl) 9%,var(--card));transform:translateY(-2px)}
.fcard h4{font:600 1rem var(--f-body);margin:0 0 .35rem;display:flex;gap:.5rem;align-items:center;color:var(--ink);text-transform:none;letter-spacing:0}
.fcard h4 i{font-style:normal;font-family:var(--f-mono);color:var(--c-infl)}
.fcard p{font-size:.88rem;margin:.3rem 0;color:var(--muted)}
.fcard p.tip{color:var(--ink)}
.muted{color:var(--muted)}
.nut-list{list-style:none;padding:0;margin:0}
.nut-list li{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.93rem}
.nut-list b{font:500 1.05rem var(--f-display)}
.note{font-size:.88rem;padding:.7rem .9rem;border-radius:12px;background:var(--card2);margin-top:1rem}

.course-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.9rem;margin-top:1.4rem}
.ccard{padding:1.2rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.ccard::after{content:"";position:absolute;width:140px;height:140px;right:-50px;top:-50px;border-radius:44% 56% 62% 38%;background:radial-gradient(circle,color-mix(in oklab,var(--accent) 35%,transparent),transparent 70%);animation:breathe 7s ease-in-out infinite}
.ccard h4{font:500 1.25rem var(--f-display);margin:0 0 .4rem}
.ccard p{font-size:.92rem;color:var(--muted);margin:0}
.ccard .src{display:inline-block;margin-top:.8rem;font:600 .66rem var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--accent)}
.scientist{margin-top:1.6rem;padding:1.5rem;border-radius:var(--r);border:1px dashed var(--accent)}
.scientist h3{font:500 1.5rem var(--f-display);margin:0 0 .5rem}
.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.badges span,.ref-list .k{font:600 .66rem var(--f-mono);text-transform:uppercase;letter-spacing:.06em;padding:.2rem .55rem;border-radius:99px;border:1px solid var(--line);background:var(--card2)}

.ref-list{padding-left:1.4rem;columns:2 420px;column-gap:2.5rem;font-size:.86rem}
.ref-list li{break-inside:avoid;margin:0 0 .7rem;color:var(--muted)}
.ref-list li:target{color:var(--ink);background:color-mix(in oklab,var(--accent) 14%,transparent);border-radius:6px}
.ref-list a{word-break:break-all;color:var(--ink)}
.ref-list .k{margin-left:.3rem}
.disclaimer{margin-top:2rem;padding:1.4rem 1.6rem;border-radius:var(--r);background:var(--card2);border-left:5px solid var(--flag)}
.disclaimer h3{margin:0 0 .4rem;font:500 1.3rem var(--f-display)}
.disclaimer p{margin:0;font-size:.92rem}
.foot{text-align:center;font-size:.8rem;color:var(--muted);padding:2rem 1rem 3rem;border-top:1px solid var(--line)}
sup.r a{font:600 .62rem var(--f-mono);text-decoration:none;color:var(--accent);margin-left:1px}

@media (max-width:960px){
  .phase-cards{grid-template-columns:1fr 1fr}
  .flag-cols{grid-template-columns:1fr}
  .build-row{grid-template-columns:1fr}
}
@media (max-width:720px){
  .top nav{display:none}
  .theme-btn{margin-left:auto}
  .grid-2,.dd{grid-template-columns:1fr}
  .type-grid{grid-template-columns:repeat(2,1fr)}
  .tile label{min-height:150px}
  .nut-list li{grid-template-columns:1fr;gap:.2rem}
  .scrub{grid-template-columns:1fr}
}
@media (max-width:480px){ .phase-cards{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.tl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.swipe-hint{display:none;margin:.2rem 0 0;font:500 .72rem var(--f-mono);color:var(--muted);text-align:center}
.flags li.refline::before{display:none}
.map{padding-top:1rem}
@media (max-width:720px){
  .tl-scroll svg{min-width:820px}
  .swipe-hint{display:block}
  #timeline .blabel{font-size:16px} #timeline .bsub{font-size:12px} #timeline .axis text{font-size:13px}
}