@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:block;src:url('../fonts/SpaceGrotesk.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:block;src:url('../fonts/JetBrainsMono.ttf') format('truetype')}

/* Layout: a fixed 1920x1080 frame scaled to the window; dark stage, one
   warm accent (gold) for emphasis, ember orange for what burns, calm blue
   for Norway. Space Grotesk for reading, JetBrains Mono for labels. */
:root{
  --bg:#06060a; --ink:#f2f2f5;
  --dim:rgba(242,242,245,.66); --faint:rgba(242,242,245,.40); --rule:rgba(242,242,245,.14);
  --hl:#FDC131; --hl-soft:rgba(253,193,49,.16); --hl-ink:#fed98a;
  --ember:#FDC131; --ember-soft:rgba(253,193,49,.14); --ember-ink:#fed98a;
  --calm:#4D9BF5; --calm-soft:rgba(77,155,245,.16); --calm-ink:#9cc6f8;
  --mint:#2EC4B6; --violet:#B69CFF; --grey:#9A9AA6;
  --sans:"Space Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;
  -webkit-font-smoothing:antialiased;cursor:default}
body.hide-cursor{cursor:none}
em,i{font-style:normal}
b{font-weight:700}

/* ------------------------------------------------------------ frame --- */
#viewport{position:fixed;inset:0;z-index:2;display:flex;align-items:center;justify-content:center}
#deck{position:relative;width:1920px;height:1080px;flex:none;transform-origin:center center}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(.985);
  transition:opacity .7s ease,transform 1s cubic-bezier(.2,.8,.2,1),visibility 0s linear .7s}
.slide.active{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease,transform 1s cubic-bezier(.2,.8,.2,1)}

.eyebrow{font-family:var(--mono);font-size:18px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:0 0 30px;display:flex;align-items:center;gap:16px}
.eyebrow::before{content:"";width:12px;height:12px;background:var(--hl);border-radius:2px;flex:none}
.eyebrow.e::before{background:var(--ember)}
.eyebrow.c::before{background:var(--calm)}
.hl{color:var(--hl)} .em{color:var(--ember)} .calm{color:var(--calm-ink)}
canvas.fill{position:absolute;inset:0;width:100%;height:100%}

/* generic step reveal: any [data-at] element */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.shown{opacity:1;transform:none}

/* ------------------------------------------------------- title slide --- */
.title-wrap{position:absolute;left:150px;top:50%;transform:translateY(-50%);max-width:1250px}
.title-slide .title-wrap{top:calc(50% - 50px)}   /* leaves the horizon free: the far fire burns between subtitle and byline */
.title-slide h1{font-weight:700;font-size:96px;line-height:1;letter-spacing:-.04em;margin:0}
.title-slide h1 .hl{display:block}
.subtitle{font-weight:400;font-size:36px;line-height:1.25;letter-spacing:-.01em;color:var(--dim);margin:34px 0 0;max-width:1000px}
.byline{margin-top:70px;padding-top:28px;border-top:2px solid var(--rule);display:inline-block;min-width:520px}
.byline .who{font-size:36px;font-weight:600;letter-spacing:-.01em}
.byline .aff{font-family:var(--mono);font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:10px}
.slide.active .title-wrap > *{animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}
.slide.active .title-wrap > :nth-child(1){animation-delay:.2s}
.slide.active .title-wrap > :nth-child(2){animation-delay:.35s}
.slide.active .title-wrap > :nth-child(3){animation-delay:.6s}
.slide.active .title-wrap > :nth-child(4){animation-delay:.9s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------ split layout --- */
.def-text{position:absolute;left:90px;top:84px;width:620px}
.def-lead{font-weight:500;font-size:46px;line-height:1.12;letter-spacing:-.025em;margin:0 0 30px}
.def-stage{position:absolute;left:770px;top:70px;width:1090px;height:960px}
.method{font-size:25px;line-height:1.45;color:var(--dim);margin:0 0 22px}
.method b{color:var(--ink);font-weight:600}
.split-slide .def-text > *{opacity:0}
.split-slide.active .def-text > *{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.split-slide.active .def-text > :nth-child(1){animation-delay:.15s}
.split-slide.active .def-text > :nth-child(2){animation-delay:.3s}
.split-slide.active .def-text > :nth-child(3){animation-delay:.5s}
.split-slide.active .def-text > :nth-child(4){animation-delay:.7s}
.split-slide .def-text > .points,.split-slide .def-text > .rv{opacity:1}
.split-slide.active .def-text > .points,.split-slide.active .def-text > .rv{animation:none}
.split-slide .def-text > .rv{opacity:0}
.split-slide .def-text > .rv.shown{opacity:1}

.points{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.points li{display:flex;gap:18px;align-items:baseline;opacity:0;transform:translateX(-18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.points li.shown{opacity:.42;transform:none}
.points li.current{opacity:1;transform:none}
.points .num{flex:none;width:40px;height:34px;border-radius:6px;font-family:var(--mono);font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;color:#0b0b10;position:relative;top:-3px;background:var(--hl)}
.points li.e .num{background:var(--ember)} .points li.c .num{background:var(--calm)} .points li.g .num{background:var(--grey)}
.points li.m .num{background:var(--mint)} .points li.v .num{background:var(--violet)}
.points .txt{font-size:26px;line-height:1.3;letter-spacing:-.01em}
.points .txt b{font-weight:700}
.points li.current .txt b{color:var(--hl-ink)}
.points li.e.current .txt b{color:var(--ember-ink)}
.points li.c.current .txt b{color:var(--calm-ink)}
.points .txt small{display:block;font-family:var(--mono);font-size:17px;color:var(--faint);margin-top:6px;letter-spacing:.02em}
.cite{font-family:var(--mono);font-size:17px;letter-spacing:.02em;color:var(--faint);margin-top:30px;line-height:1.5}

.callout{font-size:27px;line-height:1.35;padding:20px 24px;border-left:6px solid var(--hl);background:var(--hl-soft);border-radius:0 10px 10px 0;margin-top:30px}
.callout b{color:var(--hl-ink)}
.callout.e{border-left-color:var(--ember);background:var(--ember-soft)} .callout.e b{color:var(--ember-ink)}
.callout.c{border-left-color:var(--calm);background:var(--calm-soft)} .callout.c b{color:var(--calm-ink)}

/* --------------------------------------------------------- stat tiles --- */
.tiles{display:grid;gap:22px}
.tile{padding:24px 26px 22px;border-radius:12px;background:rgba(242,242,245,.035);border:1px solid var(--rule);
  opacity:0;transform:translateY(18px) scale(.97);transition:opacity .6s,transform .7s cubic-bezier(.2,1.2,.4,1)}
.tile.shown,.on > .tile{opacity:1;transform:none}
.tile b{display:block;font-size:76px;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;color:var(--hl)}
.tile b small{font-size:36px;letter-spacing:-.02em}
.tile.e b{color:var(--ember)} .tile.c b{color:var(--calm)} .tile.m b{color:var(--mint)} .tile.v b{color:var(--violet)} .tile.g b{color:var(--grey)}
.tile > span{display:block;font-size:24px;line-height:1.3;margin-top:12px}
.tile > i{display:block;font-family:var(--mono);font-size:16px;color:var(--faint);margin-top:10px;line-height:1.4}
.tile .ctx{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:16px;padding:4px 10px;border-radius:5px;border:1px solid var(--rule);color:var(--dim)}
.tiles.stage{position:absolute;left:0;right:0;top:0}

/* ---------------------------------------------------- horizontal bars --- */
.hbars{position:absolute;left:0;right:0;top:0}
.hrow{display:grid;grid-template-columns:var(--lbw,300px) 1fr 100px;align-items:center;gap:16px;height:var(--rh,36px);opacity:0;transform:translateX(-14px);
  transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.hrow .lb{text-align:right;font-size:22px;color:var(--ink);line-height:1.15}
.hrow .tr{height:var(--th,20px);background:rgba(242,242,245,.05);border-radius:4px;overflow:hidden}
.hrow .tr i{display:block;height:100%;width:0;border-radius:4px;background:var(--bar,var(--hl));transition:width 1.2s cubic-bezier(.3,.8,.3,1)}
.hrow .v{font-family:var(--mono);font-size:20px;color:var(--dim);font-variant-numeric:tabular-nums}
.hrow .v b{color:var(--ink);font-weight:700}
.on .hrow,.shown .hrow{opacity:1;transform:none}
.on .hrow .tr i,.shown .hrow .tr i{width:var(--w)}
.hrow.dimmed{opacity:.35}
.hbars .hnote{font-family:var(--mono);font-size:17px;color:var(--faint);margin:14px 0 0;padding-left:calc(var(--lbw,300px) + 16px);opacity:0;transition:opacity .6s 1s}
.on .hnote,.shown .hnote{opacity:1}
.hbars .hrows{position:relative}
.hbars .hrows.has-avg{margin-bottom:28px}
.hbars .havg{position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px dashed var(--hl);opacity:0;transition:opacity .6s 1.2s;pointer-events:none}
.hbars .havg span{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--hl)}
.on .havg,.shown .havg{opacity:1}
.hbars .ht{font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;padding-left:calc(var(--lbw,300px) + 16px)}
.hbars .ht b{color:var(--ink);letter-spacing:0;text-transform:none;font-size:20px;display:block;font-family:var(--sans);margin-top:4px}

/* ------------------------------------------------------------ map --- */
.map-slide #worldmap{position:absolute;inset:0;width:100%;height:100%}
.map-slide .land{fill:#15151c;stroke:#2a2a34;stroke-width:.6}
.map-slide .land.lit{fill:#3b3010;transition:fill 1.2s}
.map-slide .land.ed{fill:#4a3a12;stroke:#FDC131;stroke-width:1;transition:fill .5s,stroke .4s}
.map-slide .land.lit.ed{fill:#5a4614}
.map-slide .eddot{fill:#FDC131;opacity:0;transition:opacity 1.2s}
.map-slide .eddot.on{opacity:.9}
.mcap.ed h4{color:var(--hl)}
.map-slide .land.home{fill:#12304f;stroke:#4D9BF5;stroke-width:1.2}
.map-slide .glow{fill:url(#homeglow);opacity:0;transition:opacity 1.5s}
.map-slide.home-on .glow{opacity:1}
.map-head{position:absolute;left:90px;top:80px;width:760px;transition:opacity 1s}
.map-slide.ed-on .map-head{opacity:0}
.map-head h2{font-size:72px;font-weight:700;letter-spacing:-.04em;line-height:1.02;margin:0}
.map-head p{font-size:28px;line-height:1.35;color:var(--dim);margin:24px 0 0;max-width:640px}
.flame{opacity:0;transition:opacity .6s}
.flame.on{opacity:1}
.flame .f1,.flame .f2,.flame .f3{transform-box:fill-box;transform-origin:50% 100%}
.flame.on .f1{animation:flick 1.1s ease-in-out infinite alternate}
.flame.on .f2{animation:flick 1.4s ease-in-out .2s infinite alternate}
.flame.on .f3{animation:flick .9s ease-in-out .4s infinite alternate}
@keyframes flick{from{transform:scaleY(.82) scaleX(.92)}to{transform:scaleY(1.12) scaleX(1.04)}}
.flame .halo{animation:none;opacity:.5}
.flame.on .halo{animation:halo 2.4s ease-out infinite}
@keyframes halo{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.2);opacity:0}}
.mcap{position:absolute;width:440px;padding:16px 20px 14px;border-radius:12px;background:rgba(14,12,14,.92);border:1px solid rgba(253,193,49,.5);
  box-shadow:0 20px 50px rgba(0,0,0,.6);opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.mcap.shown{opacity:1;transform:none}
.mcap.faded{opacity:.45}
.mcap.calm{border-color:rgba(77,155,245,.6);width:440px}
.mcap h4{margin:0 0 8px;font-family:var(--mono);font-size:16px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember)}
.mcap.calm h4{color:var(--calm)}
.mcap p{margin:0;font-size:23px;line-height:1.3}
.mcap p + p{margin-top:7px}
.mcap p b{color:var(--ember-ink)}
.mcap.calm p b{color:var(--calm-ink)}
.mcap .msrc{display:block;font-family:var(--mono);font-size:15px;color:var(--faint);margin-top:10px;line-height:1.4}

/* ------------------------------------------------------ chart stages --- */
.chart-box{position:absolute;left:0;right:0}
.chart-box .ct{font-family:var(--mono);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.chart-box .ct b{display:block;font-family:var(--sans);font-size:23px;letter-spacing:0;text-transform:none;color:var(--ink);margin-top:4px;font-weight:600}
.chart-box canvas{display:block}
.chart-box .cn{font-family:var(--mono);font-size:16px;color:var(--faint);margin:8px 0 0;line-height:1.4}

/* ----------------------------------------------------------- timelines --- */
.tl{position:relative;padding:0 0 10px}
.tl .tlt{font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.tl .tlt b{display:block;font-family:var(--sans);font-size:26px;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-weight:600;margin-top:4px}
.tl .track{position:relative;height:3px;background:rgba(242,242,245,.1);margin:34px 0 0}
.tl .track i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--ember);transition:width 1.6s cubic-bezier(.3,.8,.3,1)}
.tl.shown .track i{width:100%}
.tl .evs{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:14px;margin-top:-10px}
.tl .ev{position:relative;padding-top:26px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.tl .ev::before{content:"";position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;background:#15151b;border:3px solid var(--ember)}
.tl .ev.last::before{background:var(--ember)}
.tl .ev .y{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ember-ink);letter-spacing:.06em}
.tl .ev .d{font-size:17.5px;line-height:1.3;margin-top:5px;color:var(--ink)}
.tl .ev .d q{color:var(--hl-ink);quotes:"«" "»"}
.tl.shown .ev{opacity:1;transform:none}
.tl.shown .ev:nth-child(2){transition-delay:.25s}.tl.shown .ev:nth-child(3){transition-delay:.5s}.tl.shown .ev:nth-child(4){transition-delay:.75s}.tl.shown .ev:nth-child(5){transition-delay:1s}.tl.shown .ev:nth-child(6){transition-delay:1.25s}
.tl.v .track i,.tl.v .ev::before{background:var(--violet);border-color:var(--violet)} .tl.v .ev::before{background:#15151b}
.tl.v .ev.last::before{background:var(--violet)} .tl.v .ev .y{color:var(--violet)}
.tl + .tl{margin-top:40px}
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;padding-top:28px;border-top:1px solid var(--rule)}
.band .bk{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.band.shown .bk{opacity:1;transform:none}
.band.shown .bk:nth-child(2){transition-delay:.3s}.band.shown .bk:nth-child(3){transition-delay:.6s}
.band .bk b{display:block;font-size:40px;font-weight:700;letter-spacing:-.02em;color:var(--hl)}
.band .bk span{display:block;font-size:17px;line-height:1.35;margin-top:6px}
.band .bk span q{quotes:"«" "»";color:var(--hl-ink)}
.band .bk i{display:block;font-family:var(--mono);font-size:15px;color:var(--faint);margin-top:6px}

/* ---------------------------------------------------------- virus grid --- */
.virus-slide .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.8)}
.virus-slide .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,10,.75),rgba(6,6,10,.35) 35%,rgba(6,6,10,.6))}
.vhead{position:absolute;left:90px;top:70px;right:90px}
.vhead h2{font-size:64px;font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:0}
.vhead p{font-size:27px;color:var(--dim);margin:16px 0 0}
.vgrid{position:absolute;left:90px;right:90px;top:300px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vcard{padding:26px 28px 24px;border-radius:14px;background:rgba(10,10,16,.86);border:1px solid rgba(242,242,245,.16);min-height:290px;
  opacity:0;transform:translateY(20px) scale(.96);transition:opacity .6s,transform .7s cubic-bezier(.2,1.2,.4,1);backdrop-filter:blur(6px)}
.vcard.shown{opacity:1;transform:none}
.vcard .k{font-family:var(--mono);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.vcard h3{font-size:33px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:12px 0 0}
.vcard p{font-size:21px;line-height:1.35;color:var(--dim);margin:14px 0 0}
.vcard.ph{border-style:dashed;background:rgba(10,10,16,.55)}
.vcard.ph .k{color:var(--grey)} .vcard.ph h3{color:var(--dim)}
.vcard .tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:5px;border:1px solid var(--rule);color:var(--faint)}
.vcard.current{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember),0 20px 60px rgba(0,0,0,.5)}

/* ---------------------------------------------- chalk drawings (art) --- */
.slide > .bgimg.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--art,.3);filter:saturate(.9)}
.slide > .veil.art{position:absolute;inset:0}
.art-wide > .veil.art{background:linear-gradient(90deg,rgba(6,6,10,.9) 0%,rgba(6,6,10,.72) 42%,rgba(6,6,10,.28) 100%)}
/* on the two scene slides the veil is thinner in a band along the horizon, where the fire is */
.scene-slide > .veil.art{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 53%,rgba(0,0,0,.3) 58.5%,rgba(0,0,0,.3) 64%,#000 70%);mask-image:linear-gradient(180deg,#000 0,#000 53%,rgba(0,0,0,.3) 58.5%,rgba(0,0,0,.3) 64%,#000 70%)}
.art-low > .veil.art{background:linear-gradient(180deg,rgba(6,6,10,.88) 0%,rgba(6,6,10,.7) 45%,rgba(6,6,10,.3) 100%),
  linear-gradient(90deg,rgba(6,6,10,.5) 0%,rgba(6,6,10,0) 45%)}

/* ------------------------------------- title drawing in depth (3 planes) --- */
/* Planes are opaque and dimmed with a filter instead of opacity, so the fire
   in the middle never shines through the house in front. js/slides.js (Scene)
   moves each plane; the origin is the horizon, so it stays put when they scale. */
.scene3d{position:absolute;inset:0;overflow:hidden}
.scene3d .sl{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 59.4%;will-change:transform}
.scene3d .sl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scene3d .sl-back,.scene3d .sl-front{filter:brightness(var(--art,.62)) saturate(.9)}
.scene3d .refl{position:absolute;left:9%;top:60%;width:50%;height:21%;opacity:.5;mix-blend-mode:overlay;
  background:radial-gradient(ellipse 50% 50% at 50% 42%,rgba(255,150,40,.95),rgba(255,150,40,0) 100%)}

/* --------------------------------------------------------- story slide --- */
.story-slide .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.story-slide .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,10,.92) 0%,rgba(6,6,10,.75) 50%,rgba(6,6,10,.5))}
.story{position:absolute;left:90px;top:120px;width:1740px;display:grid;grid-template-columns:1fr 1fr;gap:70px}
.story .col h3{font-family:var(--mono);font-size:17px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0 0 22px}
.story .col .big{font-size:50px;font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:0}
.story .col ul{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:14px}
.story .col li{font-size:28px;line-height:1.3;padding-left:26px;position:relative;color:var(--dim)}
.story .col li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:10px;border-radius:2px;background:var(--grey)}
.story .col.in li::before{background:var(--ember)}
.story .col.in .big b{color:var(--ember-ink)}
.story .col.in li{color:var(--ink)}
.story .col .note{font-size:24px;color:var(--dim);margin-top:30px;line-height:1.4}

/* ------------------------------------------------------------ chat --- */
.chat{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cc{border-radius:16px;padding:22px 24px;min-height:330px;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.cc.shown{opacity:1;transform:none}
.cc.doc{background:#101823;border:1px solid rgba(77,155,245,.45)}
.cc.bot{background:#0f1d18;border:1px solid rgba(46,196,182,.5)}
.cc .who{font-family:var(--mono);font-size:15px;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.cc.doc .who{color:var(--calm-ink)} .cc.bot .who{color:var(--mint)}
.cc .who i{width:10px;height:10px;border-radius:50%;background:currentColor}
.cc .msg{margin-top:18px;font-size:25px;line-height:1.35;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.06)}
.cc .meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.cc .meta span{font-family:var(--mono);font-size:16px;padding:4px 9px;border-radius:5px;border:1px solid var(--rule);color:var(--dim)}
.cc.bot .meta span{border-color:rgba(46,196,182,.4);color:#9fe7df}
.fig{position:absolute;left:0;right:0;bottom:0;margin:0;opacity:0;transform:translateY(16px);transition:opacity .7s,transform .8s cubic-bezier(.2,.8,.2,1)}
.fig.shown{opacity:1;transform:none}
.fig img{display:block;width:100%;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.fig figcaption{font-family:var(--mono);font-size:16px;color:var(--faint);margin-top:10px}
.fig figcaption b{color:var(--ember-ink);font-weight:600}

/* ------------------------------------------------------------- Q&A --- */
.qhead{position:absolute;left:90px;top:70px;right:90px}
.qhead h2{font-size:60px;font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:0}
.qhead h2 .hl{display:block}
.qhead p{font-size:27px;color:var(--dim);margin:18px 0 0}
.qa{position:absolute;left:90px;right:90px;top:330px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.qc{padding:28px 30px 26px;border-radius:14px;background:rgba(242,242,245,.035);border:1px solid var(--rule);
  opacity:0;transform:translateY(20px) scale(.97);transition:opacity .6s,transform .7s cubic-bezier(.2,1.2,.4,1)}
.qc.shown{opacity:1;transform:none}
.qc .k{font-family:var(--mono);font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember)}
.qc p{font-size:32px;line-height:1.3;margin:12px 0 0;letter-spacing:-.01em}
.qc p b{color:var(--hl-ink);font-weight:600}

/* ------------------------------------------------------------- poll --- */
.poll-stage{position:absolute;left:770px;top:90px;width:1090px}
.pbars{display:grid;gap:18px}
.prow{display:grid;grid-template-columns:260px 1fr 150px;align-items:center;gap:20px}
.pbars{gap:14px}
.prow .tr{height:48px}
.prow .lb{font-size:30px;font-weight:500;text-align:right}
.prow .tr{height:54px;border-radius:8px;background:rgba(242,242,245,.05);overflow:hidden}
.prow .tr i{display:block;height:100%;width:0;border-radius:8px;background:var(--bar,var(--hl));transition:width .8s cubic-bezier(.3,.8,.3,1)}
.prow .v{font-family:var(--mono);font-size:30px;font-variant-numeric:tabular-nums}
.prow .v small{font-size:16px;color:var(--faint);margin-left:8px}
.ptotal{font-family:var(--mono);font-size:18px;color:var(--faint);margin-top:18px;padding-left:280px;letter-spacing:.04em}
.qrwrap{display:flex;gap:28px;align-items:center;margin-bottom:40px}
.qrbox{width:230px;height:230px;background:#fff;border-radius:14px;padding:14px;flex:none;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.qrbox img,.qrbox canvas{width:100%;height:100%}
.qrtxt{font-size:24px;line-height:1.4;color:var(--dim)}
.qrtxt b{display:block;font-size:28px;color:var(--ink);font-weight:600;margin-bottom:6px}
.qrtxt code{font-family:var(--mono);font-size:17px;color:var(--hl-ink);word-break:break-all}
.qrwrap.nolink{display:none}
.pcount{margin:30px 0 0;font-family:var(--mono);font-size:30px;color:var(--dim);letter-spacing:.02em;display:flex;flex-direction:column;gap:8px}
.pcount b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.pcount span{font-size:18px;color:var(--faint)}

/* -------------------------------------------------------- thanks/src --- */
.thanks{position:absolute;left:150px;top:calc(50% - 45px);transform:translateY(-50%)}   /* lifted so the fire burns under the text, not through it */
.thanks h2{font-size:120px;font-weight:700;letter-spacing:-.045em;margin:0;line-height:1;color:var(--ink)}
.thanks p{font-size:32px;color:var(--dim);margin:30px 0 0;line-height:1.5}
.thanks p b{color:var(--ink);font-weight:500}
.logos{position:absolute;right:120px;bottom:90px;display:flex;align-items:center;gap:40px}
.logos img{height:120px;border-radius:10px;background:#fff;padding:12px}
.src{position:absolute;left:90px;right:90px;top:170px;columns:2;column-gap:60px;font-family:var(--mono);font-size:13.5px;line-height:1.55;color:var(--dim)}
.src p{margin:0 0 10px;break-inside:avoid}
.src p b{color:var(--ink);font-weight:600}

/* ----------------------------------------------------------- chrome --- */
#progress{position:fixed;left:0;right:0;bottom:0;height:3px;z-index:5;background:rgba(255,255,255,.04)}
#progress i{display:block;height:100%;width:0;background:var(--hl);transition:width .5s}
#hint{position:fixed;right:22px;bottom:14px;z-index:5;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--faint);transition:opacity 1s}
#hint.gone{opacity:0}

/* ------------------------------------------------------ password lock --- */
#lock{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:default;transition:opacity .8s ease}
#lock.open{opacity:0;pointer-events:none}
.lock-box{width:min(520px,80vw)}
.lock-box .eyebrow{margin-bottom:22px}
#lockpw{display:block;width:100%;background:none;border:0;border-bottom:2px solid var(--rule);outline:0;padding:6px 0 14px;
  color:var(--ink);caret-color:var(--hl);font-family:var(--mono);font-size:40px;letter-spacing:.3em;-webkit-text-security:disc;transition:border-color .2s}
#lockpw:focus{border-bottom-color:var(--hl)}
.lock-hint{margin:16px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
#lock.wrong .lock-box{animation:lockshake .4s}
#lock.wrong #lockpw{border-bottom-color:#e5484d}
@keyframes lockshake{20%{transform:translateX(-12px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
/* ?static=1 : everything in its finished state, for screenshots */
html.static *{transition-duration:0s !important;transition-delay:0s !important;animation-duration:0s !important;animation-delay:0s !important}
/* muted arrows inside big numbers */
.tile b .arr{color:var(--faint);font-weight:400;margin:0 4px}
/* vertical timeline (virus 1) */
.vtl{display:grid;gap:0}
.vtl .ev{display:grid;grid-template-columns:120px 1fr;gap:26px;opacity:0;transform:translateX(16px);transition:opacity .5s,transform .5s}
.vtl .ev.shown{opacity:.5;transform:none}
.vtl .ev.current{opacity:1}
.vtl .ev .y{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ember-ink);text-align:right;padding-top:4px;letter-spacing:.04em}
.vtl .ev .d{position:relative;font-size:27px;line-height:1.35;padding:0 0 38px 34px;border-left:3px solid rgba(242,242,245,.12)}
.vtl .ev.last .d{padding-bottom:0}
.vtl .ev .d::before{content:"";position:absolute;left:-11px;top:8px;width:19px;height:19px;border-radius:50%;background:#15151b;border:3px solid var(--ember)}
.vtl .ev.current .d{border-left-color:var(--ember)}
.vtl .ev.current .d::before{background:var(--ember)}
.vtl .ev .d q{color:var(--hl-ink);quotes:"«" "»"}
.vtl.v .ev .y{color:var(--violet)}
.vtl.v .ev .d::before{border-color:var(--violet)}
.vtl.v .ev.current .d{border-left-color:var(--violet)}
.vtl.v .ev.current .d::before{background:var(--violet)}
.vtl + .cite{margin-top:34px}
.eyebrow.v::before{background:var(--violet)}
.tile > span q{quotes:"«" "»";color:var(--hl-ink)}
/* map: zoom group and leader lines */
.map-slide .land{vector-effect:non-scaling-stroke}
.map-slide .leader{stroke:var(--ember);stroke-width:1.5;opacity:0;transition:opacity .6s}
.map-slide .leader.shown{opacity:.7}
.map-slide .leader.calm{stroke:var(--calm)}
.mcap{width:440px}
.mcap.calm{width:440px}