:root{
  --ink:#101b26; --muted:#5b6b7a; --faint:#8b9aa8; --hair:#dde4ea; --bg:#fbfcfd;
  --card:#ffffff; --blue:#1f6feb; --amber:#b5651d; --red:#b23a2c; --green:#12805c;
  --violet:#6b4fc4; --tipbg:#101b26; --tipink:#f2f7fa;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media(prefers-color-scheme:dark){:root{
  --ink:#eaf1f6; --muted:#a9b8c6; --faint:#7d8d9c; --hair:#24313d; --bg:#0d141b; --card:#121b24;
  --blue:#5aa2ff; --amber:#e0a33e; --red:#e0705c; --green:#3fbf94; --violet:#9d86e8;
  --tipbg:#e9f1f7; --tipink:#0d141b;}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
header{border-bottom:1px solid var(--hair);padding:15px 0;background:var(--bg);
  position:relative;overflow:hidden}
/* The brand sits hard against the viewport edge — outside the centred content column — and
   reads as a watermark rather than as a label. Faint enough to recede, solid enough to
   still be legible in both themes. */
.wm{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:26px;font-weight:800;letter-spacing:.2em;color:var(--ink);opacity:.17;
  pointer-events:none;user-select:none;white-space:nowrap;line-height:1}
@media(prefers-color-scheme:dark){.wm{opacity:.22}}
.brand{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;
  min-height:26px}
.brand a{color:var(--muted);text-decoration:none;font-size:13px;position:relative;z-index:2}
.brand a:hover{color:var(--blue)}
@media(max-width:760px){.wm{font-size:17px;letter-spacing:.14em}}
@media(max-width:440px){.wm{font-size:13px;letter-spacing:.1em}}
h1{font-size:36px;line-height:1.1;margin:26px 0 10px;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:17px;margin:0 0 6px;max-width:70ch}
h2{font-size:22px;margin:44px 0 4px;letter-spacing:-.015em}
h3{font-size:15px;margin:0 0 5px}
p{margin:0 0 11px;max-width:78ch}
.small{font-size:13px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:16px 18px;margin:11px 0}
.warn{border-left:3px solid var(--amber);border-radius:0 10px 10px 0;padding:13px 17px;
  margin:15px 0;font-size:13.5px;color:var(--muted);background:var(--card)}
.warn b{color:var(--ink)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:11px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:11px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:11px}

/* ── glossary tooltip ─────────────────────────────────────────────────────── */
.gl{border-bottom:1.5px dotted var(--blue);cursor:help;position:relative}
.gl:hover,.gl.on{background:#1f6feb14}
.gl .tip{display:none;position:absolute;left:0;top:calc(100% + 7px);z-index:60;width:302px;
  background:var(--tipbg);color:var(--tipink);border-radius:10px;padding:11px 13px;
  font-size:12.5px;line-height:1.5;font-weight:400;box-shadow:0 8px 26px #0000003d;
  text-transform:none;letter-spacing:0}
.gl:hover .tip,.gl.on .tip{display:block}
.gl .tip b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  opacity:.62;margin-bottom:4px}
.gl .tip i{display:block;margin-top:7px;font-style:normal;opacity:.82;
  border-top:1px solid #8888;padding-top:6px}
@media(max-width:620px){.gl .tip{width:min(80vw,300px)}}

/* ── orbit ────────────────────────────────────────────────────────────────── */
.orbitwrap{background:var(--card);border:1px solid var(--hair);border-radius:14px;
  padding:16px 18px 14px;margin:16px 0 6px}
/* SCOPED TO THE ORBIT SVG ONLY. This was '.orbitwrap svg' and it stretched every
   other svg inside the block — the legend swatches and the counterfactual arrow —
   to full width. A descendant selector on a generic element type is a trap. */
#orbit > svg{display:block;width:100%;height:auto;overflow:visible}
.ob{cursor:pointer}
.ob circle.disc{transition:r .16s ease, opacity .16s ease}
.ob:hover circle.disc,.ob.sel circle.disc{opacity:1}
.ob text{pointer-events:none;font-weight:700;letter-spacing:-.01em}
.ob .lbl{font-size:15px}
.ob .str{font-size:10.5px;font-weight:600;opacity:.72}
.olink{transition:opacity .16s ease, stroke-width .16s ease}
.odetail{border-top:1px solid var(--hair);margin-top:11px;padding-top:11px;min-height:88px}
.odetail .oh{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.odetail .on{font-size:16px;font-weight:700}
.odetail .ohow{font-size:13.5px;margin:5px 0 0;max-width:80ch}
.odetail .ocone{font-size:12.5px;color:var(--muted);margin-top:6px;border-left:3px solid var(--blue);
  padding-left:10px}
.dirtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;padding:2px 7px;
  border-radius:99px;border:1px solid}
.d-in{color:var(--red);border-color:#b23a2c66;background:#b23a2c14}
.d-out{color:var(--blue);border-color:#1f6feb66;background:#1f6feb14}
.d-both{color:var(--violet);border-color:#6b4fc466;background:#6b4fc414}
/* ── hover card: who is in the race ───────────────────────────────────────── */
/* THE GRAPHIC IS THE POINT. It stays centred and full size; the cards pop up over the
   gutters beside it.
   The previous version made this a three-column grid, which broke the moment a card was
   hidden: display:none removes a grid item, every remaining item shifts one column left,
   and the orbit ended up rendering inside the 236px slot meant for the video. Absolute
   positioning cannot do that — a hidden overlay changes nothing about what is behind it. */
.orbitouter{max-width:1480px;margin:0 auto;padding:0 22px}
.orbitstage{position:relative;display:block}
/* The graphic is deliberately NARROWER than the space available. The gutters either side
   are not wasted margin — they are where the cards pop up, and sizing the graphic to fill
   the container is what forced the cards on top of the bubbles. */
#orbit{max-width:600px;margin:0 auto}
/* Anchored just right of the counterfactual card rather than centred in the container.
   Centring split the leftover space evenly — wasting it on the left, where nothing needs
   room, and starving the right card, which has the most to say. */
/* Re-centred. The left rail carried the videos; they now live on the domain pages, so the
   graphic gets the middle back and the race card keeps the right gutter. */
@media(min-width:1400px){#orbit{max-width:700px}}

/* ── counterfactual card ──────────────────────────────────────────────────── */
.vcard{position:relative;background:var(--card);border:1px solid var(--hair);
  border-radius:12px;padding:12px 14px;font-size:12.5px}
.vcard .cflab{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--amber);margin-bottom:4px}
.vcard .cft{font-size:13.5px;font-weight:700;line-height:1.35;margin:0 0 6px}
.vcard .cfw{font-size:11.5px;color:var(--muted);line-height:1.5;margin:0 0 9px}
.vcard .cfframe{position:relative;padding-bottom:56.25%;height:0;border-radius:8px;
  overflow:hidden;background:var(--bg);border:1px solid var(--hair)}
.vcard .cfframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcard .cfout{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:600;
  color:var(--blue);text-decoration:none}
.vcard .cfout:hover{text-decoration:underline}
.vcard .cfnote{font-size:10.5px;color:var(--faint);margin-top:7px;border-top:1px solid var(--hair);
  padding-top:6px;line-height:1.45}
/* faint arrow from the counterfactual card toward the AI bubble at the centre */
.varrow{display:none}
@media(min-width:1120px){
  .varrow{display:block;position:absolute;right:-26px;top:96px;
    opacity:.45;pointer-events:none;width:24px;height:16px}
}
.rcard{background:var(--card);border:1px solid var(--hair);border-radius:12px;
  padding:13px 15px;font-size:12.5px}
/* Cards pop up in the gutters. They are far taller than the graphic, so they scroll
   inside themselves rather than dragging the section down to their own height. */
/* The stage is now roughly twice as tall so both cards can show everything WITHOUT
   scrolling. A card that scrolls inside a page that also scrolls is two scrollbars fighting,
   and readers lose the second one. The graphic is centred in the taller stage rather than
   stretched to fill it — the bubbles were already the right size. */
@media(min-width:1120px){
  .orbitstage{min-height:824px}
  #orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:600px;max-width:600px;margin:0}
  .rcard{position:absolute;top:0;right:0;width:392px;max-height:824px;overflow-y:auto;
    box-shadow:0 14px 40px #00000026;z-index:14}
  .leftrail{position:absolute;top:0;left:0;width:330px;max-height:824px;overflow-y:auto;
    z-index:14}
}
@media(min-width:1400px){
  .orbitstage{min-height:860px}
  #orbit{width:660px;max-width:660px}
  .rcard{width:440px;max-height:860px}
  .leftrail{width:366px;max-height:860px}
}

/* ── the primer card ──────────────────────────────────────────────────────── */
.kscard{position:relative;background:var(--card);border:1px solid var(--hair);
  border-radius:12px;padding:14px 16px;font-size:12.5px}
.kscard .kslab{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--blue);margin-bottom:3px}
.kscard .ptitle{font-size:16px;font-weight:700;margin:0 0 7px;letter-spacing:-.01em}
.kscard .pwhat{font-size:13px;line-height:1.55;margin:0 0 10px}
.kscard .psec{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  color:var(--faint);margin:11px 0 4px}
.kscard .pwhy{font-size:12.5px;color:var(--muted);margin:0}
.kscard .pidea{font-size:12px;margin-bottom:6px;line-height:1.5;color:var(--muted)}
.kscard .pidea b{display:block;color:var(--ink);font-weight:650;font-size:12.5px}
.kscard .pcta{display:block;margin-top:13px;padding:10px 12px;border-radius:9px;
  background:var(--bg);border:1px solid var(--blue);text-decoration:none;
  color:var(--blue);font-weight:650;font-size:12.5px}
.kscard .pcta:hover{background:#1f6feb14}
.kscard .pcta span{display:block;color:var(--muted);font-weight:400;font-size:11px;
  margin-top:2px}
@media(max-width:1119px){.rcard,.vcard{margin-top:12px}}
.rcard .rh{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 2px}
.rcard .rhead{font-size:12.5px;color:var(--blue);font-weight:600;margin:0 0 8px}
.rcard ul{margin:0 0 9px;padding-left:16px}
.rcard li{margin-bottom:3px}
.rcard .sec{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);
  font-weight:700;margin:10px 0 4px}
.bloc{margin-bottom:7px}
.bloc .bt{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.bloc .bn{font-weight:650;font-size:12.5px}
.bloc .bs{font-family:var(--mono);font-size:11px;color:var(--muted)}
.bloc .bar{height:6px;border-radius:99px;background:var(--hair);margin:3px 0;overflow:hidden}
.bloc .bar i{display:block;height:100%;border-radius:99px}
.bloc .bp{font-size:11.5px;color:var(--muted);line-height:1.45}
.bloc .bnote{font-size:11.5px;margin-top:2px}
.bloc .bp b{font-weight:600;color:var(--ink)}
/* ownership flag — the whole point of the map, so it gets its own colour */
.own{display:inline-block;font-size:9.5px;font-family:var(--mono);letter-spacing:.03em;
  color:var(--amber);border:1px solid #b5651d55;background:#b5651d14;border-radius:99px;
  padding:0 5px;margin-left:3px;white-space:nowrap}
/* score explainer */
.scorebox{margin-top:11px;padding-top:11px;border-top:1px solid var(--hair)}
.sco{font-size:12px;color:var(--muted);line-height:1.5}
.sco b{color:var(--ink)}
.scoscale{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.scoscale span{font-size:10.5px;border:1px solid var(--hair);border-radius:6px;
  padding:3px 7px;color:var(--muted)}
.scoscale span b{font-family:var(--mono);color:var(--ink);font-weight:600}
.sconot{font-size:11.5px;color:var(--faint);margin-top:6px}
.workings{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;
  border:1px dashed var(--hair);border-radius:8px;padding:5px 10px;color:var(--faint);
  cursor:not-allowed}
.workings b{color:var(--muted);font-weight:600}
.workings i{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--amber);border:1px solid #b5651d55;border-radius:99px;padding:1px 6px}
.rcard .rv{border-left:3px solid var(--blue);padding-left:10px;margin-top:9px;font-size:12.5px}
.rcard .rc{font-size:11px;color:var(--faint);margin-top:8px;border-top:1px solid var(--hair);
  padding-top:7px}


/* Orbit legend. The swatch is an ARROW, not a square — direction is the whole argument,
   so the key has to carry it too. */
.olegend{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--hair)}
.ol{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  background:var(--bg);border:1px solid var(--hair);border-radius:9px;padding:7px 12px}
.ol b{font-weight:650;color:var(--ink)}
.ol svg{display:block;flex:0 0 auto;width:34px;height:12px}
@media(max-width:560px){.ol{font-size:11.5px;padding:6px 9px;gap:6px}}

/* ── takeaways ────────────────────────────────────────────────────────────── */
.take{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px;margin:14px 0}
.take .t{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:15px 16px;
  position:relative;overflow:hidden}
.take .n{font-family:var(--mono);font-size:34px;font-weight:700;color:var(--hair);
  position:absolute;right:11px;top:2px;line-height:1}
.take h3{font-size:14.5px;margin:0 0 6px;padding-right:26px}
.take p{font-size:13px;color:var(--muted);margin:0}

/* ── hero number ──────────────────────────────────────────────────────────── */
.hero{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;padding:13px 0 6px}
.hero .big{font-size:40px;font-weight:750;letter-spacing:-.03em;line-height:1;color:var(--blue)}
.hero .what{font-size:13.5px;color:var(--muted);max-width:34ch}
.hero .sting{font-size:13.5px;flex:1 1 260px;border-left:3px solid var(--amber);padding-left:12px}

/* ── facts ────────────────────────────────────────────────────────────────── */
.facts{list-style:none;padding:0;margin:8px 0 0}
.facts li{padding:8px 0 8px 22px;border-bottom:1px solid var(--hair);position:relative;
  font-size:14.5px}
.facts li:last-child{border-bottom:0}
.facts li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;
  border-radius:2px;background:var(--blue)}
.facts .sting{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

/* ── myths ────────────────────────────────────────────────────────────────── */
.myth{background:var(--card);border:1px solid var(--hair);border-radius:11px;overflow:hidden}
.myth .m{padding:11px 14px;font-size:13.5px;border-bottom:1px solid var(--hair);
  color:var(--muted);text-decoration:line-through;text-decoration-color:var(--red);
  text-decoration-thickness:1.5px}
.myth .t{padding:11px 14px;font-size:13.5px}
.myth .t::before{content:"✓ ";color:var(--green);font-weight:700}

/* ── charts ───────────────────────────────────────────────────────────────── */
.chart{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:16px 18px;
  margin:11px 0}
.chart h3{font-size:16px;margin:0 0 3px}
.chart .csub{font-size:12.5px;color:var(--muted);margin:0 0 9px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .take{margin:10px 0 0;display:block}
.chart .ctake{font-size:13.5px;border-left:3px solid var(--blue);padding-left:12px;margin-top:11px}
.chart .prov{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;padding:2px 7px;
  border-radius:99px;border:1px solid var(--hair);color:var(--muted);float:right}
.p-MEASURED{color:var(--green);border-color:#12805c66}
.p-DERIVED{color:var(--blue);border-color:#1f6feb66}
.p-SCHEMATIC{color:var(--amber);border-color:#b5651d66}
.p-JUDGEMENT{color:var(--violet);border-color:#6b4fc466}
.chart .method{font-size:11.5px;color:var(--faint);margin-top:7px}
.leg{display:flex;gap:13px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:7px}
.leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px}

/* ── dial ─────────────────────────────────────────────────────────────────── */
.dialwrap{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--hair);
  padding:11px 0 9px}
.dial{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dial .lab{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin-right:3px}
.dial button{font:inherit;font-size:14px;font-weight:600;padding:6px 14px;border-radius:8px;
  border:1px solid var(--hair);background:var(--card);color:var(--muted);cursor:pointer}
.dial button:hover{border-color:var(--blue);color:var(--ink)}
.dial button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dial button.now[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.conebar svg{display:block;width:100%;height:46px;margin-top:7px}
.coneinfo{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-top:4px;font-size:13px}
.conelabel{font-weight:700;font-size:14px}
.coneworth{color:var(--muted);max-width:84ch}

/* ── branches ─────────────────────────────────────────────────────────────── */
.branch{border:1px solid var(--hair);border-radius:11px;padding:13px 15px;background:var(--card)}
.branch h4{margin:0 0 3px;font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.b-constrained h4{color:var(--red)} .b-central h4{color:var(--blue)} .b-accelerated h4{color:var(--green)}
.branch .means{font-size:12px;color:var(--faint);margin:0 0 9px}
.branch dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-top:9px}
.branch dd{margin:2px 0 0;font-size:13.5px}

/* ── tags ─────────────────────────────────────────────────────────────────── */
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  padding:2px 7px;border-radius:99px;border:1px solid var(--hair);color:var(--muted)}
.t-LOCKED{background:#12805c1a;color:var(--green);border-color:#12805c55}
.t-LIKELY{background:#1f6feb1a;color:var(--blue);border-color:#1f6feb55}
.t-CONTESTED{background:#b5651d1a;color:var(--amber);border-color:#b5651d55}
.t-SPECULATIVE{background:#b23a2c1a;color:var(--red);border-color:#b23a2c55}
.t-UNKNOWABLE{background:#6b4fc41a;color:var(--violet);border-color:#6b4fc455}
.t-BINDING{background:#b23a2c1a;color:var(--red);border-color:#b23a2c55}
.t-STRONG{background:#b5651d1a;color:var(--amber);border-color:#b5651d55}
.t-REAL{background:#1f6feb1a;color:var(--blue);border-color:#1f6feb55}

.claim{border-bottom:1px solid var(--hair);padding:10px 0}
.claim:last-child{border-bottom:0}
.claim .txt{font-size:14.5px}
.claim .fals{font-size:12.5px;color:var(--muted);margin-top:4px}
.claim .fals b{color:var(--faint);font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.06em}

/* ── domains ──────────────────────────────────────────────────────────────── */
.dom{border:1px solid var(--hair);border-radius:12px;background:var(--card);overflow:hidden}
.dom>summary{list-style:none;cursor:pointer;padding:15px 17px;display:block}
.dom>summary::-webkit-details-marker{display:none}
.dom>summary:hover{background:var(--bg)}
.domhead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.domnum{font-family:var(--mono);font-size:11px;color:var(--faint)}
.domtitle{font-size:18px;font-weight:650}
.domstrap{font-size:12.5px;color:var(--faint);margin:2px 0 0}
.more{font-size:12.5px;color:var(--blue);margin-top:9px;font-weight:600}
.domcone{margin-top:10px;font-size:13px;border-top:1px dashed var(--hair);padding-top:8px}
.domcone .row{display:flex;gap:9px;padding:3px 0}
.domcone .k{font-family:var(--mono);font-size:10px;letter-spacing:.05em;flex:0 0 86px;
  text-transform:uppercase;padding-top:3px}
.k-constrained{color:var(--red)} .k-central{color:var(--blue)} .k-accelerated{color:var(--green)}
.dombody{padding:0 17px 17px;border-top:1px solid var(--hair)}
.chip{display:inline-block;font-size:11px;padding:2px 8px;border:1px solid var(--hair);
  border-radius:99px;color:var(--muted);margin:0 4px 4px 0}

.blind{border-left:3px solid var(--faint);padding:10px 14px;margin:8px 0;background:var(--card);
  border-radius:0 9px 9px 0}
.blind .what{font-size:13.5px;font-weight:600}
.blind .why,.blind .cost{font-size:12.5px;color:var(--muted);margin-top:3px}
.blind .cost b{color:var(--amber);font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.06em}

.cross{border:1px solid var(--hair);border-radius:11px;padding:13px 15px;background:var(--card);margin:9px 0}
.cross .pair{font-family:var(--mono);font-size:11px;color:var(--faint)}
.cross .ttl{font-size:15px;font-weight:650;margin:3px 0 5px}
.cross .meta{font-size:12.5px;color:var(--muted);margin-top:6px}
.cross .meta b{color:var(--faint);text-transform:uppercase;font-size:10px;letter-spacing:.06em}

/* under-review rail — embedded so it can be watched, banded so it is never mistaken
   for something this site endorses */
.revrail{border:1px dashed var(--amber);border-radius:11px;padding:12px 14px;margin:14px 0;
  background:#b5651d0d}
.revrail .rh{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--amber);margin-bottom:3px}
.revrail .rn{font-size:12px;color:var(--muted);margin:0 0 10px}
.revgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.revitem{background:var(--card);border:1px solid var(--hair);border-radius:10px;padding:11px 12px}
.revitem h4{font-size:13px;margin:0 0 5px;line-height:1.35}
.revitem .rf{position:relative;padding-bottom:56.25%;height:0;border-radius:8px;overflow:hidden;
  border:1px solid var(--hair);background:var(--bg)}
.revitem .rf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.revitem .rw{font-size:11.5px;color:var(--muted);margin-top:8px}
.revitem .rc{font-size:10.5px;color:var(--amber);margin-top:5px}
.revitem .ro{display:inline-block;margin-top:6px;font-size:11px;font-weight:600;
  color:var(--blue);text-decoration:none}

/* ── video ────────────────────────────────────────────────────────────────── */
.vid{border:1px dashed var(--hair);border-radius:11px;padding:13px 15px;margin:9px 0;
  background:var(--card)}
.vid .ph{font-size:13px;color:var(--faint)}
.vidframe{position:relative;padding-bottom:56.25%;height:0;border-radius:9px;overflow:hidden;
  margin-top:9px}
.vidframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── glossary index ───────────────────────────────────────────────────────── */
#glossbox input{font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--hair);
  border-radius:8px;background:var(--bg);color:var(--ink);width:100%;max-width:340px}
.gitem{border-bottom:1px solid var(--hair);padding:9px 0}
.gitem b{font-size:14px}
.gitem .d{font-size:13px;color:var(--muted);margin-top:2px}
.gitem .w{font-size:12.5px;margin-top:3px;border-left:2px solid var(--blue);padding-left:9px}

footer{border-top:1px solid var(--hair);margin-top:50px;padding:22px 0 44px;color:var(--faint);font-size:12px}
a.next{display:inline-block;margin-top:8px;color:var(--blue);font-weight:600;font-size:15px;text-decoration:none}
a.next:hover{text-decoration:underline}
.err{color:var(--red);font-size:14px}

.leftrail{position:relative}
.cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:16px}
.cta a{display:block;flex:1 1 260px;background:var(--card);border:1px solid var(--hair);
  border-radius:12px;padding:15px 17px;text-decoration:none;color:var(--ink)}
.cta a:hover{border-color:var(--blue)}
.cta b{display:block;font-size:15px;margin-bottom:3px}
.cta span{font-size:12.5px;color:var(--muted)}

/* The race bars are HTML, not SVG, so they get the same visual language in CSS. US solid,
   Europe diagonal, China dotted — matching the bloc charts exactly, so a reader who learned
   the pattern on one chart reads it correctly on the other. */
.pat-usa{background-image:none}
.pat-eu{background-image:repeating-linear-gradient(45deg,
  transparent 0 3px, #ffffff73 3px 5px)}
.pat-china{background-image:radial-gradient(#ffffff8c 1.3px, transparent 1.4px);
  background-size:6px 6px}


/* ── The frame and the verdict ───────────────────────────────────────────────
   Added 2026-08-26. Both were written, shipped in the payload and rendered on no
   page. The frame is the reasoning under the orbit; the verdict is the one usable
   heuristic the site offers, and it carries its own falsifier. */
.frame{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:13px;
  margin:12px 0 8px}
.frame .fc{background:var(--card);border:1px solid var(--hair);border-radius:11px;
  padding:14px 16px}
.frame .fc h3{font-size:14.5px;margin:0 0 6px;line-height:1.35;letter-spacing:-.01em}
.frame .fc p{font-size:13.5px;line-height:1.6;margin:0;color:var(--muted)}

.verdict{border:1px solid var(--ink);border-radius:12px;padding:17px 19px;margin:12px 0 8px;
  max-width:78ch;background:var(--card)}
.verdict .vhead{font-size:15px;font-weight:700;line-height:1.42;letter-spacing:-.01em}
.verdict .vbody{font-size:14px;line-height:1.65;margin:11px 0 0}
.verdict .vfals{font-size:13px;line-height:1.58;margin:12px 0 0;padding-top:11px;
  border-top:1px solid var(--hair);color:var(--muted)}
.verdict .vfals b{color:var(--ink)}

/* ── Orbit on a phone ────────────────────────────────────────────────────────
   Measured 2026-08-26 at a 375px viewport: the 780-unit viewBox renders at 294px,
   a scale of 0.376, which put the domain labels at 5.6px and the coupling numbers
   at 4.0px. Enlarging both made the label collide with its own number, so the
   number goes (line thickness already carries it, and the legend says so) and the
   label comes up to ~11px effective. Verified: nine labels, zero overlaps. */
@media (max-width: 640px){
  .ob .str{display:none}
  /* !important because the centre bubble carries an inline font-size from the SVG
     generator, and an inline declaration otherwise outranks this rule. */
  .ob .lbl{font-size:32px !important}
}