/* ============================================================
   GRAVITY, the fan-out. Printed-plate treatment, same inks as
   the rest of the site. Structure is the content here: each
   stage is one horizontal band, and width means confidence.
   ============================================================ */

.fanout { display: grid; gap: 0; }

.fo-problem,
.fo-stage {
  opacity: 0;
  border-top: 1px solid var(--hairline);
  padding: 34px 0;
}
.fo-problem.fo-in,
.fo-stage.fo-in {
  animation: fo-rise 620ms cubic-bezier(.22,.7,.28,1) both;
}
@keyframes fo-rise {
  0%   { opacity: 0; transform: translateY(-14px) scale(.99); animation-timing-function: cubic-bezier(.45,0,.9,.35); }
  64%  { opacity: 1; transform: translateY(3px) scale(1); }
  100% { opacity: 1; transform: none; }
}

/* ---- the question itself ---- */
.fo-problem { border-top: none; }
.fo-problem-label {
  font-size: 10.5px; text-transform: none; letter-spacing: .15em;
  font-weight: 600; color: var(--ink-faint); margin-bottom: 12px;
}
.fo-problem-text {
  font-family: var(--font-display); font-size: clamp(21px, 2.6vw, 30px);
  font-weight: 600; line-height: 1.22; letter-spacing: -.012em; max-width: 34ch;
}
.fo-problem-flag {
  margin-top: 14px; display: inline-block;
  font-size: 11px; text-transform: none; letter-spacing: .1em; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  padding: 5px 10px; border-radius: 2px;
}

/* ---- stage furniture ---- */
.fo-stage-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.fo-no {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--accent); letter-spacing: .04em;
}
.fo-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.012em; }
.fo-sub { font-size: 12.5px; color: var(--ink-faint); margin-left: auto; font-variant-numeric: tabular-nums; }

.fo-body { display: grid; gap: 9px; }

/* ---- cards ---- */
.fo-card {
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 13px 15px;
  animation: fo-rise 520ms cubic-bezier(.22,.7,.28,1) both;
  animation-delay: calc(var(--i, 0) * 48ms + 120ms);
}
.fo-persona {
  font-size: 10.5px; text-transform: none; letter-spacing: .12em;
  font-weight: 600; color: var(--ink-faint); display: flex; gap: 10px; align-items: center;
}
.fo-model {
  font-size: 10.5px; letter-spacing: 0; text-transform: none;
  color: var(--accent); background: var(--accent-soft);
  padding: 2px 7px; border-radius: 2px;
}
.fo-text { font-size: 15.5px; margin-top: 6px; line-height: 1.45; }
.fo-why { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

/* rank meter: width is the score, so the winner is visibly wider */
.fo-meter {
  margin-top: 9px; height: 4px; background: var(--bg-sunk);
  position: relative; display: flex; align-items: center;
}
.fo-meter span { display: block; height: 4px; background: var(--hairline-strong); }
.fo-meter b {
  position: absolute; right: 0; top: -7px;
  font-size: 11px; font-weight: 600; color: var(--ink-faint);
  background: var(--bg-raised); padding-left: 8px;
}
.fo-card.fo-win { border-color: var(--accent); }
.fo-card.fo-win .fo-meter span { background: var(--accent); }
.fo-card.fo-win .fo-meter b { color: var(--accent); }

.fo-chosen {
  border-left: 2px solid var(--accent);
  background: var(--accent-soft-2, var(--bg-sunk));
  padding: 16px 18px;
}
.fo-chosen .fo-text { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }

.fo-note { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; max-width: 74ch; }
.fo-note .mono, .mono {
  font-family: "SF Mono", Menlo, Consolas, ui-monospace, monospace;
  font-size: .88em;
}

/* ---- verdicts ---- */
.fo-verdict {
  font-size: 10.5px; text-transform: none; letter-spacing: .12em; font-weight: 600;
  display: inline-block; padding: 3px 8px; border-radius: 2px;
}
.fo-v-false .fo-verdict { background: var(--killed-bg); color: var(--killed); }
.fo-v-false .fo-text { text-decoration: line-through; text-decoration-color: var(--killed); color: var(--ink-soft); }
.fo-v-known .fo-verdict { background: var(--bg-sunk); color: var(--ink-soft); }
.fo-v-open  .fo-verdict { background: var(--accent-soft); color: var(--accent); }
.fo-v-open { border-color: var(--hairline-strong); }

/* ---- ladder ---- */
.fo-ladder { display: grid; gap: 0; margin-bottom: 16px; }
.fo-rung {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--hairline);
  font-size: 12px; text-transform: none; letter-spacing: .11em; font-weight: 600;
  color: var(--ink);
}
.fo-rung-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.fo-rung-at { color: var(--accent); }
.fo-rung-at .fo-rung-dot { box-shadow: 0 0 0 4px var(--accent-soft); }
.fo-rung-off { color: var(--ink-faint); }
.fo-rung-off .fo-rung-dot { background: var(--hairline-strong); }

.fo-outcome { font-size: 15px; color: var(--ink-soft); max-width: 72ch; margin-top: 12px; }
.fo-outcome b { color: var(--ink); font-weight: 600; }
.fo-outcome-point { border-left: 2px solid var(--accent); padding-left: 14px; }

@media (prefers-reduced-motion: reduce) {
  .fo-problem, .fo-stage, .fo-card { opacity: 1 !important; animation: none !important; }
}
@media (max-width: 720px) {
  .fo-sub { margin-left: 0; width: 100%; }
}

/* ============================================================
   Playable states: the run bar, the gateway log, and cards that
   show themselves thinking before they resolve.
   ============================================================ */

.fo-runbar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 22px;
}
.fo-stats { display: flex; gap: 22px; font-size: 13px; color: var(--ink-faint); }
.fo-stat { display: inline-flex; gap: 6px; }
.fo-stat .tnum { color: var(--ink); font-weight: 600; }

/* gateway log */
.fo-log {
  margin-top: 26px; border: 1px solid var(--hairline);
  background: var(--bg-sunk); border-radius: 2px; overflow: hidden;
}
.fo-log-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--hairline);
  font-size: 10.5px; text-transform: none; letter-spacing: .13em;
  font-weight: 600; color: var(--ink-faint); background: var(--bg-raised);
}
.fo-log-sub { margin-left: auto; letter-spacing: .08em; }
.fo-log-list { list-style: none; margin: 0; padding: 0; min-height: 40px; }
.fo-log-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 14px; border-bottom: 1px solid var(--hairline);
  font-size: 12.5px; color: var(--ink-soft);
  animation: fo-logIn 260ms cubic-bezier(.22,.7,.28,1) both;
}
.fo-log-list li:last-child { border-bottom: none; }
@keyframes fo-logIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fo-log-role { width: 118px; flex: none; font-weight: 600; color: var(--ink); }
.fo-log-model { color: var(--accent); }
.fo-log-ms { margin-left: auto; color: var(--ink-faint); }

/* a card mid-call */
.fo-card.fo-pending { border-style: dashed; background: transparent; }
.fo-working {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  color: var(--accent); letter-spacing: .1em;
}
.fo-working i {
  width: 3px; height: 3px; border-radius: 50%; background: var(--accent);
  animation: fo-blink 1.1s infinite ease-in-out;
}
.fo-working i:nth-child(2) { animation-delay: .16s; }
.fo-working i:nth-child(3) { animation-delay: .32s; }
@keyframes fo-blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* skeleton lines while a model is answering */
.fo-skel { display: grid; gap: 7px; }
.fo-skel span {
  display: block; height: 9px; border-radius: 2px; background: var(--bg-sunk);
  animation: fo-pulse 1.5s infinite ease-in-out;
}
.fo-skel span:first-child { width: 82%; }
.fo-skel span:last-child { width: 46%; }
@keyframes fo-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* the rank bar grows in rather than appearing */
.fo-meter span { transition: width 720ms cubic-bezier(.22,.7,.28,1); }

.fo-verdict .fo-model { margin-left: 8px; }
.fo-rung { transition: color 300ms ease; }
.fo-rung-dot { transition: background 300ms ease, box-shadow 300ms ease; }

@media (prefers-reduced-motion: reduce) {
  .fo-working i, .fo-skel span, .fo-log-list li { animation: none !important; }
  .fo-meter span { transition: none !important; }
}

/* ============================================================
   Two levels. Plain English is the default and must stand on
   its own; the technical layer is additive, never the price of
   admission.
   ============================================================ */

.fo-problem-sub {
  margin-top: 10px; font-size: 14px; color: var(--ink-faint);
  max-width: 68ch; line-height: 1.5;
}
.fo-level { margin-left: 4px; }

/* the plain-English explanation that carries a stage */
.fo-why-stage {
  font-size: 16.5px; line-height: 1.55; color: var(--ink-soft);
  max-width: 66ch; margin: -6px 0 18px;
  border-left: 2px solid var(--hairline-strong); padding-left: 15px;
}

/* stage titles get bigger in plain mode: they are doing the work */
.fanout:not(.fo-deep) .fo-title { font-size: 25px; }
.fanout:not(.fo-deep) .fo-sub { font-size: 13.5px; color: var(--ink-soft); }
.fanout:not(.fo-deep) .fo-persona { font-size: 12px; letter-spacing: .06em; text-transform: none; color: var(--ink); font-weight: 600; }
.fanout:not(.fo-deep) .fo-text { font-size: 16.5px; }
.fanout:not(.fo-deep) .fo-verdict { font-size: 11px; }

/* independence: the crux, shown as four numbers collapsing to one */
.fo-indep {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
}
.fo-indep-cell {
  background: var(--bg-raised); padding: 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.fo-indep-cell b {
  font-family: var(--font-display); font-size: 34px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1;
}
.fo-indep-cell span { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.fo-indep-key { background: var(--accent-soft); }
.fo-indep-key b { color: var(--accent); }

/* the ladder shows the plain word, with the technical term alongside */
.fo-rung-tech {
  margin-left: auto; font-size: 10.5px; color: var(--ink-faint);
  letter-spacing: .08em;
}

.fo-realtime {
  margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--hairline-strong);
  border-radius: 2px; font-size: 13.5px; color: var(--ink-soft); max-width: 72ch;
}
.fo-realtime b { color: var(--ink); font-weight: 600; }

/* ---- funding: real arithmetic, shown as state ---- */
.fo-fund {
  margin-top: 26px; border: 1px solid var(--hairline-strong);
  border-radius: 2px; background: var(--bg-raised); overflow: hidden;
}
.fo-fund-head {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--hairline); background: var(--bg-sunk);
  font-size: 10.5px; text-transform: none; letter-spacing: .13em;
  font-weight: 600; color: var(--ink-faint);
}
.fo-fund-tier { margin-left: auto; color: var(--accent); }
.fo-fund-meter { height: 5px; background: var(--bg-sunk); }
.fo-fund-meter span { display: block; height: 5px; background: var(--accent); }
.fo-fund-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--hairline);
}
.fo-fund-grid > div { background: var(--bg-raised); padding: 16px; display: flex; flex-direction: column; gap: 3px; }
.fo-fund-grid b {
  font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1;
}
.fo-fund-grid span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.fo-fund-note {
  padding: 14px 16px; border-top: 1px solid var(--hairline);
  font-size: 13.5px; color: var(--ink-soft); max-width: 78ch; line-height: 1.5;
}
.fo-spend {
  margin-top: 14px; padding: 15px 17px; border-left: 2px solid var(--accent);
  background: var(--bg-sunk); font-size: 14.5px; color: var(--ink-soft); max-width: 74ch; line-height: 1.55;
}
.fo-spend b { color: var(--ink); font-weight: 600; }

/* ============================================================
   The problem, explained; and the argument, transcribed.
   ============================================================ */

/* ---- explainer ---- */
.prob-explain { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hairline); background: var(--bg-raised); margin-bottom: 34px; }
.prob-explain > div { padding: 26px 28px; }
.prob-explain > div + div { border-left: 1px solid var(--hairline); }
.prob-k { font-size: 10.5px; text-transform: none; letter-spacing: .14em; font-weight: 600; color: var(--ink-faint); margin-bottom: 10px; }
.prob-explain p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.prob-explain p + p { margin-top: 10px; }
.prob-explain b { color: var(--ink); font-weight: 600; }
.prob-record { list-style: none; margin: 0; padding: 0; }
.prob-record li { display: flex; gap: 14px; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 14px; }
.prob-record li:first-child { border-top: 0; padding-top: 0; }
.prob-record .yr { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); flex: none; width: 44px; }
.prob-record .who b { font-weight: 600; }
.prob-record .who span { color: var(--ink-soft); }
.prob-nobody { margin-top: 14px; padding: 13px 15px; background: var(--bg-sunk); border-left: 2px solid var(--accent); font-size: 14px; color: var(--ink-soft); }
@media (max-width: 760px) { .prob-explain { grid-template-columns: 1fr; } .prob-explain > div + div { border-left: 0; border-top: 1px solid var(--hairline); } }

/* ---- worked example: how the engine works ---- */
.wx-bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 15px 18px; border: 1px solid var(--hairline-strong); background: var(--bg-raised); }
.wx-label { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; max-width: 66ch; }
.wx-label b { color: var(--ink); font-weight: 600; }
.wx-toggle { margin-left: auto; display: flex; border: 1px solid var(--hairline-strong); flex: none; }
.wx-tog { appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: .04em; padding: 8px 15px; color: var(--ink-soft);
  transition: background .15s ease, color .15s ease; }
.wx-tog + .wx-tog { border-left: 1px solid var(--hairline-strong); }
.wx-tog:hover { background: var(--bg-sunk); color: var(--ink); }
.wx-tog.is-on { background: var(--ink); color: var(--bg); font-weight: 600; }

.wx-stage { margin-top: 40px; }
.wx-stage-head { display: flex; gap: 16px; align-items: flex-start; }
.wx-stage-n { flex: none; font-size: 11px; color: var(--ink-faint); padding-top: 6px;
  width: 26px; border-top: 2px solid var(--ink); }
.wx-kicker { font-size: 10.5px; text-transform: none; letter-spacing: .13em;
  font-weight: 600; color: var(--accent); }
.wx-title { font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.2; letter-spacing: -.015em; margin: 6px 0 0; max-width: 30ch; }
.wx-desc { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 68ch; }
.wx-sub { margin-top: 14px; font-size: 10px; text-transform: none; letter-spacing: .13em;
  font-weight: 600; color: var(--ink-faint); }

.wx-known { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); }
.wx-known li { background: var(--bg-raised); padding: 14px 17px; font-size: 14.5px;
  line-height: 1.55; color: var(--ink-soft); }
.wx-known sup { font-size: .72em; }

.wx-questions { margin-top: 18px; display: grid; gap: 8px; }
.wx-q { border: 1px solid var(--hairline); background: var(--bg-raised); padding: 14px 17px; }
.wx-q-chosen { border-color: var(--accent); border-left-width: 3px; }
.wx-q-shelved { opacity: .62; }
.wx-q-text { font-size: 15px; line-height: 1.5; }
.wx-q-meta { margin-top: 9px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-faint); }
.wx-q-score { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.wx-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wx-answer { border: 1px solid var(--hairline); background: var(--bg-raised); padding: 18px 19px; position: relative; }
.wx-answer-left { border-top: 3px solid var(--accent); }
.wx-answer-right { border-top: 3px solid var(--ink); }
.wx-answer-tag { position: absolute; top: -3px; right: 0; font-size: 9.5px; letter-spacing: .12em;
  padding: 3px 8px; background: var(--ink); color: var(--bg); }
.wx-answer-left .wx-answer-tag { background: var(--accent); }
.wx-who { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap; }
.wx-who b { color: var(--ink); font-weight: 600; }
.wx-model { margin-left: auto; font-size: 10.5px; color: var(--ink-faint); }
.wx-said { margin-top: 11px; font-family: var(--font-display); font-size: 17.5px;
  line-height: 1.4; letter-spacing: -.008em; }
.wx-said sup { font-size: .7em; }

.wx-claims { margin-top: 7px; display: grid; gap: 6px; }
.wx-claim { border: 1px solid var(--hairline); background: var(--bg); }
.wx-claim[open] { border-color: var(--hairline-strong); background: var(--bg-raised); }
.wx-claim-head { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; padding: 11px 13px; }
.wx-claim-head::-webkit-details-marker { display: none; }
.wx-claim-head:hover { background: var(--bg-sunk); }
.wx-claim-id { font-size: 10.5px; color: var(--ink-faint); padding-top: 2px; }
.wx-claim-text { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.wx-claim-text sup { font-size: .72em; }
.wx-claim-meta { display: flex; align-items: center; gap: 7px; grid-column: 2 / -1; margin-top: 2px; }
.wx-chip { font-size: 9.5px; letter-spacing: .1em; font-weight: 600; padding: 3px 7px; border-radius: 2px; white-space: nowrap; }
.wx-chip-proved { background: #e4efe6; color: #2f6b3d; }
.wx-chip-held { background: var(--accent-soft); color: var(--accent); }
.wx-chip-contested { background: #fdf0dc; color: #92600f; }
.wx-chip-broken { background: var(--killed-bg); color: var(--killed); }
.wx-chip-weak { background: var(--bg-sunk); color: var(--ink-faint); }
.wx-conf { flex: 1; min-width: 34px; height: 3px; background: var(--hairline); display: block; }
.wx-conf i { display: block; height: 3px; background: var(--ink-faint); }
.wx-v-proved .wx-conf i { background: #2f6b3d; }
.wx-v-held .wx-conf i { background: var(--accent); }
.wx-v-contested .wx-conf i { background: #c08416; }
.wx-v-broken .wx-conf i { background: var(--killed); }
.wx-conf-n { font-size: 10.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.wx-claim-body { padding: 0 13px 14px; border-top: 1px dashed var(--hairline); }
.wx-row { margin-top: 9px; padding: 10px 12px; background: var(--bg-sunk); border-left: 2px solid var(--hairline-strong); }
.wx-row-yes { border-left-color: var(--accent); }
.wx-row-no { border-left-color: var(--killed); }
.wx-row-who { font-size: 11.5px; color: var(--ink-soft); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wx-row-who b { color: var(--ink); font-weight: 600; }
.wx-row-persona { color: var(--ink-faint); }
.wx-row-verdict { font-size: 9.5px; letter-spacing: .1em; text-transform: none; font-weight: 600; }
.wx-row-yes .wx-row-verdict { color: var(--accent); }
.wx-row-no .wx-row-verdict { color: var(--killed); }
.wx-row-weight { margin-left: auto; font-size: 10.5px; color: var(--ink-faint); }
.wx-row-said { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.wx-row-said sup { font-size: .72em; }
.wx-row-note { margin-top: 5px; font-size: 11px; color: var(--ink-faint); font-style: italic; }
.wx-note { margin-top: 11px; padding: 10px 12px; border-left: 2px solid var(--accent);
  background: var(--accent-soft); font-size: 12.5px; line-height: 1.55; color: var(--accent-ink); }

.wx-maths { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--hairline); }
.wx-maths-line { display: flex; gap: 10px; align-items: baseline; font-size: 11px; padding: 3px 0; }
.wx-maths-line span { color: var(--ink-faint); text-transform: none; letter-spacing: .1em;
  font-weight: 600; flex: none; width: 78px; }
.wx-maths-line code { font-size: 11.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.wx-maths-plain { margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-faint); }

.wx-seam { margin-top: 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 0; border: 1px solid var(--hairline-strong); background: var(--bg-raised); }
.wx-seam-a, .wx-seam-b { padding: 20px 22px; font-size: 15px; line-height: 1.5; }
.wx-seam-a { border-right: 1px solid var(--hairline); }
.wx-seam-b { border-left: 1px solid var(--hairline); }
.wx-seam-a b, .wx-seam-b b { font-family: var(--font-display); }
.wx-seam-x { padding: 8px 14px; font-size: 9.5px; letter-spacing: .13em; text-transform: none;
  font-weight: 600; color: #92600f; background: #fdf0dc; white-space: nowrap; }
.wx-seam-note { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 74ch; }
.wx-seam-note em { color: var(--ink); font-style: normal; font-weight: 600; }

.wx-verdict { margin-top: 18px; border: 1px solid var(--hairline-strong); background: var(--bg-raised); padding: 22px; }
.wx-verdict-tag { display: inline-block; font-size: 10.5px; letter-spacing: .14em; font-weight: 600;
  padding: 5px 11px; background: var(--ink); color: var(--bg); }
.wx-stats { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); }
.wx-stat { background: var(--bg-raised); padding: 15px 16px; }
.wx-stat-n { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--ink); }
.wx-stat-l { margin-top: 7px; font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); }
.wx-verdict-say { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 74ch; }
.wx-next { margin-top: 14px; padding: 16px 18px; border-left: 2px solid var(--accent); background: var(--bg-sunk); }
.wx-next-l { font-size: 10px; text-transform: none; letter-spacing: .13em; font-weight: 600; color: var(--ink-faint); }
.wx-next-q { margin-top: 7px; font-family: var(--font-display); font-size: 17px; line-height: 1.35; }

.wx-foot { margin-top: 34px; padding: 19px 21px; border: 1px dashed var(--hairline-strong);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); max-width: 82ch; }
.wx-foot b { color: var(--ink); font-weight: 600; }
.wx-foot em { font-style: normal; color: var(--ink); }

@media (max-width: 860px) {
  .wx-grid { grid-template-columns: 1fr; }
  .wx-stats { grid-template-columns: repeat(2, 1fr); }
  .wx-seam { grid-template-columns: 1fr; }
  .wx-seam-a { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .wx-seam-b { border-left: 0; border-top: 1px solid var(--hairline); }
  .wx-seam-x { text-align: center; }
}
@media (max-width: 560px) {
  .wx-toggle { margin-left: 0; }
  .wx-claim-head { grid-template-columns: 22px 1fr; }
  .wx-claim-meta { grid-column: 1 / -1; }
}

/* ---- backer marks: the moons, named ---- */
.bk-wrap { margin-top: 26px; }
.bk-head { display: flex; align-items: baseline; gap: 12px; font-size: 10.5px; text-transform: none; letter-spacing: .13em; font-weight: 600; color: var(--ink-faint); margin-bottom: 12px; }
.bk-count { margin-left: auto; letter-spacing: .04em; }
.bk-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.bk { appearance: none; background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: 2px; padding: 10px 12px 9px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 86px; transition: border-color 160ms ease, transform 420ms cubic-bezier(.22,.7,.28,1); font-family: inherit; color: inherit; }
.bk:hover { border-color: var(--hairline-strong); transform: scale(0.985); }
.bk.bk-open { border-color: var(--accent); }
.bk-mark { display: block; }
.bk-name { font-size: 12px; font-weight: 600; }
.bk-amt { font-size: 11px; color: var(--ink-faint); }
.bk-card { margin-top: 10px; border: 1px solid var(--hairline-strong); border-left: 2px solid var(--accent); background: var(--bg-raised); padding: 16px 18px; }
.bk-card-id { display: flex; align-items: center; gap: 14px; }
.bk-card-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.bk-founder { font-size: 9px; letter-spacing: .14em; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 6px; border-radius: 2px; vertical-align: 3px; }
.bk-card-since { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.bk-card-amt { margin-left: auto; font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.bk-card-note { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }
.bk-card-buy { margin-top: 8px; font-size: 13px; color: var(--ink-soft); border-top: 1px dashed var(--hairline); padding-top: 10px; }
.bk-card-buy b { color: var(--ink); }
.bk-honest { margin-top: 12px; font-size: 12px; color: var(--ink-faint); font-style: italic; }

/* ---- the orbit panel: officials + throw something in ---- */
.ob-officials { margin-top: 30px; border: 1px solid var(--hairline-strong); background: var(--bg-raised); padding: 18px 20px; display: grid; gap: 14px; }
.ob-official { display: flex; gap: 14px; align-items: flex-start; }
.ob-off-name { font-size: 15px; font-weight: 600; }
.ob-chip { font-size: 9px; letter-spacing: .13em; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 2px; vertical-align: 2px; margin-left: 6px; }
.ob-chip-human { color: var(--bg-raised); background: var(--accent); }
.ob-off-role { font-size: 13px; color: var(--ink-soft); margin-top: 2px; max-width: 62ch; }

.ob-throw { margin-top: 26px; }
.ob-lede { font-size: 14.5px; color: var(--ink-soft); max-width: 68ch; margin-bottom: 16px; line-height: 1.55; }
.ob-form { border: 1px solid var(--hairline); background: var(--bg-raised); padding: 16px; display: grid; gap: 12px; }
.ob-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ob-pick input { position: absolute; opacity: 0; }
.ob-pick span { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--hairline); border-radius: 2px; padding: 10px 12px; cursor: pointer; transition: border-color 140ms; }
.ob-pick input:checked + span { border-color: var(--accent); background: var(--accent-soft-2, var(--bg-sunk)); }
.ob-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-pick b { font-size: 13.5px; }
.ob-pick em { font-style: normal; font-size: 11.5px; color: var(--ink-faint); }
.ob-name, .ob-input { font-family: inherit; font-size: 14.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--hairline-strong); border-radius: 2px; padding: 10px 12px; }
.ob-name:focus, .ob-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ob-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ob-honest { font-size: 12px; color: var(--ink-faint); font-style: italic; }
.ob-feed { margin-top: 14px; display: grid; gap: 9px; }
.ob-card { border: 1px solid var(--hairline); background: var(--bg-raised); padding: 13px 15px; }
.ob-yours { border-left: 2px solid var(--accent); }
.ob-card-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ob-kind { font-size: 9px; letter-spacing: .12em; font-weight: 600; padding: 2px 7px; border-radius: 2px; }
.ob-kind-question { background: var(--accent-soft); color: var(--accent); }
.ob-kind-attack { background: var(--killed-bg); color: var(--killed); }
.ob-kind-lead { background: var(--bg-sunk); color: var(--ink-soft); border: 1px solid var(--hairline); }
.ob-state { margin-left: auto; font-size: 9.5px; letter-spacing: .1em; color: var(--ink-faint); }
.ob-text { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

/* ---- the point: compute, capital, and the search as the show ---- */
.gv-pillars { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.gv-pillar { background: var(--bg-raised); padding: 24px 24px 26px; }
.gv-pillar-n { font-size: 11px; color: var(--ink-faint); letter-spacing: .1em; }
.gv-pillar h3 { font-family: var(--font-display); font-size: 20px; line-height: 1.25;
  letter-spacing: -.012em; margin: 12px 0 0; }
.gv-pillar p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.gv-thesis { margin-top: 22px; padding: 26px 28px; background: var(--ink); color: #efeee7; }
.gv-thesis-l { font-size: 10.5px; text-transform: none; letter-spacing: .14em;
  font-weight: 600; color: #9c9a8c; }
.gv-thesis p { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; max-width: 76ch; color: #d9d7cc; }
.gv-thesis p em { font-style: normal; color: #fff; font-weight: 600; }

.gv-split { margin-top: 34px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; align-items: start; }
.gv-kicker { font-size: 10.5px; text-transform: none; letter-spacing: .13em;
  font-weight: 600; color: var(--accent); }
.gv-h3 { font-family: var(--font-display); font-size: clamp(21px, 2.5vw, 28px); line-height: 1.2;
  letter-spacing: -.015em; margin: 9px 0 0; max-width: 26ch; }
.gv-p { margin: 13px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 64ch; }
.gv-p b { color: var(--ink); font-weight: 600; }
.gv-p-tight { font-size: 14px; }
.gv-format { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: gvf;
  display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.gv-format li { background: var(--bg-raised); padding: 14px 17px 14px 46px; position: relative;
  font-size: 14px; line-height: 1.55; color: var(--ink-soft); counter-increment: gvf; }
.gv-format li::before { content: counter(gvf); position: absolute; left: 17px; top: 14px;
  font-size: 11px; color: var(--accent); font-weight: 600; }
.gv-format li b { color: var(--ink); font-weight: 600; }

.gv-split-side { border: 1px solid var(--hairline-strong); background: var(--bg-sunk); padding: 20px 21px; }
.gv-flywheel { list-style: none; margin: 14px 0 0; padding: 0; }
.gv-flywheel li { padding: 10px 0; border-top: 1px dashed var(--hairline-strong); font-size: 13.5px; }
.gv-flywheel li:first-child { border-top: 0; padding-top: 4px; }
.gv-flywheel li b { display: block; color: var(--ink); font-weight: 600; }
.gv-flywheel li span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-faint); line-height: 1.45; }
.gv-flywheel-note { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--hairline-strong);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }

.gv-team { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--hairline-strong); }
.gv-roles { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.gv-role { background: var(--bg-raised); padding: 18px 19px; }
.gv-role b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.gv-role span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.gv-cta { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .gv-pillars { grid-template-columns: 1fr; }
  .gv-split { grid-template-columns: 1fr; }
  .gv-roles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gv-roles { grid-template-columns: 1fr; }
  .gv-thesis { padding: 20px; }
}

/* ---- the venue, seen ---- */
.gv-venue { margin: 30px 0 0; }
.gv-venue-shots { display: grid; grid-template-columns: 2.1fr 1fr; gap: 7px;
  grid-auto-rows: clamp(210px, 25vw, 350px); }
.gv-venue-shots img { display: block; width: 100%; height: 100%; object-fit: cover;
  background: var(--bg-sunk); }
.gv-venue figcaption { margin-top: 12px; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-faint); max-width: 78ch; }
@media (max-width: 760px) {
  .gv-venue-shots { grid-template-columns: 1fr; grid-auto-rows: 210px; }
}

/* ---- Fig. 3: the fleet ---- */
.fl-stage{position:relative;height:clamp(460px,58vh,620px);border:1px solid var(--hairline-strong);
  background:radial-gradient(120% 100% at 50% 40%,#fffefb 0%,var(--bg-sunk) 100%);overflow:hidden}
.fl-cv{display:block}
.fl-tip{position:absolute;pointer-events:none;padding:8px 11px;background:var(--ink);color:#f6f5ef;
  font-size:11.5px;max-width:250px;line-height:1.45;opacity:0;transition:opacity .12s;z-index:4}
.fl-tip.is-on{opacity:1}
.fl-tip em{display:block;font-style:normal;color:#b9b6a8;font-size:9.5px;letter-spacing:.09em;margin-bottom:3px}
.fl-key{position:absolute;top:0;right:0;padding:14px 16px 18px 30px;text-align:right;pointer-events:none;
  background:linear-gradient(225deg,rgba(250,249,246,.96) 0%,rgba(250,249,246,.86) 58%,rgba(250,249,246,0) 100%)}
.fl-keyh{font-size:9px;letter-spacing:.14em;font-weight:600;color:var(--ink-faint);text-transform: none}
.fl-keyl{margin-top:8px;font-size:11px;line-height:1.7;color:var(--ink-soft)}
.fl-keyl div{white-space:nowrap}
.fl-keyl em{font-style:normal;color:var(--ink-faint);font-size:10px}
.fl-keyl i{display:inline-block;width:8px;height:8px;margin-left:7px;vertical-align:-1px}

.fl-ctl{margin-top:16px;display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap}
.fl-slider{flex:1;min-width:240px;max-width:420px}
.fl-slider input{width:100%;accent-color:var(--accent);height:3px;cursor:pointer}
.fl-marks{display:flex;justify-content:space-between;margin-top:5px;font-size:9px;letter-spacing:.09em;color:var(--ink-faint)}
.fl-read{display:flex;align-items:baseline;gap:9px}
.fl-read b{font-family:var(--font-display);font-size:25px;letter-spacing:-.02em;line-height:1}
.fl-tag{font-size:8.5px;letter-spacing:.13em;font-weight:600;padding:3px 7px}
.fl-tag.is-real{background:var(--accent-soft);color:var(--accent)}
.fl-tag.is-proj{background:#fdf0dc;color:#92600f}

.fl-stats{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hairline);border:1px solid var(--hairline)}
.fl-st{background:var(--bg-raised);padding:12px 14px}
.fl-st b{display:block;font-family:var(--font-display);font-size:21px;line-height:1;font-variant-numeric:tabular-nums}
.fl-st span{display:block;margin-top:5px;font-size:10px;letter-spacing:.05em;color:var(--ink-faint);line-height:1.35}
.fl-st.is-hl b{color:var(--accent)}
.fl-say{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:80ch}
.fl-say b{color:var(--ink);font-weight:600}
.fl-note{display:block;margin-top:7px;font-size:11.5px;color:var(--ink-faint)}
@media(max-width:720px){
  .fl-stats{grid-template-columns:repeat(2,1fr)}
  .fl-key{padding:10px 12px 14px 22px}
  .fl-keyl{font-size:10px}
}

/* ---- the exam ---- */
.ex-grid{margin-top:26px;display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:start}
.ex-why p{margin:0 0 13px;font-size:15px;line-height:1.65;color:var(--ink-soft);max-width:60ch}
.ex-why b{color:var(--ink);font-weight:600}
.ex-pt{padding-left:14px;border-left:2px solid var(--accent);color:var(--ink)!important}
.ex-board{border:1px solid var(--hairline-strong);background:var(--bg-raised);padding:18px 20px 20px}
.ex-bh{font-size:9.5px;text-transform: none;letter-spacing:.14em;font-weight:600;color:var(--ink-faint)}
.ex-tbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:12.5px}
.ex-tbl th{text-align:left;font-size:9.5px;letter-spacing:.09em;text-transform: none;color:var(--ink-faint);
  font-weight:600;padding:0 0 8px;border-bottom:1px solid var(--hairline)}
.ex-tbl td{padding:16px 0;color:var(--ink-soft)}
.ex-empty td{text-align:center;color:var(--ink-faint);font-style:italic;padding:30px 0}
.ex-note{margin:14px 0 0;padding-top:13px;border-top:1px dashed var(--hairline);
  font-size:11.5px;line-height:1.55;color:var(--ink-faint)}
@media(max-width:820px){.ex-grid{grid-template-columns:1fr}}
.gv-split-solo{grid-template-columns:1fr}
.gv-split-solo .gv-split-main{max-width:74ch}