/* Test-Time Cognition Makes Post-Training Faster, Better, Cheaper (/blog/test-time-cognition-makes-post-training-faster-better-cheaper).
   The figures are static SVG (and, for Figure 7's second drawing and Figure 9, HTML) drawn by scripts/build_correct_trajectories_figures.py; this sheet
   colours them with the theme tokens and the evals page's per-problem palette (the warm grey
   baseline against the site green for TTC), plus a red for cost. Each figure carries a wide
   drawing and a narrow one, swapped at 640px. */

.correct-trajectories-essay {
  --ct-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* The title is long: set below the essays' 4rem so that on desktop "Test-Time Cognition Makes"
   holds one line and the whole title three. */
.correct-trajectories-essay .article-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  text-wrap: balance;
}

.correct-trajectories-essay .article-hero h1 em { display: block; text-wrap: balance; }

/* Section headings are set in the figures' titles' face (.ct-figure-title) but larger, under a large
   section number and an accent rule across the text column, so a new section reads apart from a new
   figure (whose rule is the ink's). These override the hung numbers of moe-router-figures, which
   another page shares. */
.blog-post.correct-trajectories-essay .article-body > section[id] > h2 {
  font: 700 clamp(2.2rem, 4.5vw, 3rem)/1.1 var(--ct-sans);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.blog-post.correct-trajectories-essay .article-body > section[id] + section[id] > h2 { margin-top: 5.5rem; }
.blog-post.correct-trajectories-essay .article-body > section[id]:not(#references) > h2::before {
  content: counter(mr-section, decimal-leading-zero);
  position: static;
  display: block;
  margin: 0 0 1.1rem;
  font: 300 clamp(2.4rem, 5vw, 3.25rem)/1 var(--ct-sans);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  /* the rule starts past the widest number, "11" */
  background: linear-gradient(currentColor, currentColor) right 50% / calc(100% - 1.6em) 2px no-repeat;
}

.ct-art {
  --ct-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ct-base: #c2bcaf;
  --ct-base-ink: #8f8778;
  --ct-ttc: #3e7052;
  --ct-ttc-ink: #3e644c;
  --ct-grid: #d3dbcf;
  --ct-cost: #b4553f;
  --ct-cost-ink: #9c4633;
  --ct-frontier: #a8731f;
  --ct-frontier-ink: #8a5c16;
  --ct-veil: color-mix(in srgb, var(--paper) 62%, transparent);
}

@media screen {
  html[data-theme="dark"] .ct-art {
    --ct-base: #6e6a62;
    --ct-base-ink: #a39f95;
    --ct-ttc: #75b68c;
    --ct-ttc-ink: #94cda7;
    --ct-grid: #2d2d2a;
    --ct-cost: #e08b78;
    --ct-cost-ink: #eba393;
    --ct-frontier: #d9a85c;
    --ct-frontier-ink: #e8be7c;
  }
}

/* ─── Layout ───────────────────────────────────────────────────────────────────────────────── */

.ct-figure .ct-art { margin-bottom: 1.4rem; }

/* Figures 6, 8 and 10 are drawn 1120 units wide (WIDER in the script), for their extra tier. */
@media (min-width: 1040px) {
  .figure-breakout.ct-figure--wide { width: min(1120px, calc(100vw - 80px)); }
}

.article-body .ct-figure-title {
  margin: 0 0 1.1rem;
  font: 700 clamp(1.45rem, 3vw, 2rem)/1.15 var(--ct-sans, "Helvetica Neue", Helvetica, Arial, sans-serif);
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

.ct-faded { opacity: 0.4; }
.ct-svg .ct-value--quiet { fill: var(--muted-text); }

.ct-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ct-svg--narrow { display: none; }

@media (max-width: 640px) {
  .ct-svg--wide { display: none; }
  .ct-svg--narrow { display: block; max-width: 420px; margin-inline: auto; }
}

/* ─── Type ─────────────────────────────────────────────────────────────────────────────────── */

.ct-svg text {
  font-family: var(--ct-sans);
  fill: var(--muted-text);
  stroke: none;
}

.ct-caps { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; }
.ct-svg .ct-caps--cost { fill: var(--ct-cost-ink); }
.ct-svg .ct-caps--ttc { fill: var(--ct-ttc-ink); font-weight: 700; }
.ct-svg .ct-name { font-size: 17px; letter-spacing: -0.01em; fill: var(--ink); }
.ct-tick { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ct-svg .ct-tick--cost { fill: var(--ct-cost-ink); }
.ct-note { font-size: 12.5px; }
.ct-svg .ct-note--cost { fill: var(--ct-cost-ink); }
.ct-svg .ct-note--ttc { fill: var(--ct-ttc-ink); font-weight: 600; }
.ct-svg .ct-note--range { font-size: 16px; }
.ct-svg--narrow .ct-note--range { font-size: 14px; }
.ct-svg .ct-value { font-size: 13px; font-variant-numeric: tabular-nums; fill: var(--ink); }
.ct-svg .ct-value--ttc { fill: var(--ct-ttc-ink); font-weight: 700; }
.ct-svg .ct-value--cost { fill: var(--ct-cost-ink); font-weight: 700; }
.ct-svg .ct-value--halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.ct-svg .ct-row-name { font-size: 14px; fill: var(--ink); }
.ct-svg .ct-change { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-svg .ct-change--ttc { fill: var(--ct-ttc-ink); }
.ct-svg .ct-change--cost { fill: var(--ct-cost-ink); }
.ct-svg .ct-band-name { font-size: 16px; fill: var(--ink); }
.ct-svg .ct-band-name--tier { font-weight: 700; }
.ct-svg .ct-band-name--small { font-size: 14px; }
.ct-svg .ct-caps--rank { font-size: 20px; letter-spacing: 0.08em; fill: var(--ct-ttc-ink); font-weight: 700; }
.ct-svg--narrow .ct-caps--rank { font-size: 14px; }
.ct-axis-label { font-size: 13px; }
.ct-axis-label--small { font-size: 12px; }
.ct-svg .ct-gain { font-size: 19px; font-weight: 700; fill: var(--ct-ttc-ink); }
.ct-svg .ct-gain--quiet { font-size: 14px; font-weight: 500; fill: var(--muted-text); }
.ct-stat { font-size: 13px; }
.ct-svg .ct-strong { font-weight: 700; fill: var(--ink); }
.ct-svg .ct-strong--ttc { fill: var(--ct-ttc-ink); }
.ct-svg .ct-strong--cost { fill: var(--ct-cost-ink); }
.ct-svg .ct-never-label { font-size: 12px; fill: var(--ct-cost-ink); }
.ct-never-label--inf { font-size: 15px; }
.ct-svg .ct-share-label { font-size: 12px; fill: var(--ink); }
.ct-svg .ct-share-label--hard,
.ct-svg .ct-share-label--beyond { fill: var(--paper); font-weight: 700; }
.ct-svg .ct-share-label--past { fill: var(--ink); font-weight: 700; }

/* ─── Marks ────────────────────────────────────────────────────────────────────────────────── */

.ct-svg .ct-grid { stroke: var(--ct-grid); stroke-width: 1; }
.ct-axis { stroke: var(--muted-text); stroke-width: 1; opacity: 0.7; }
.ct-rule { stroke: var(--rule); stroke-width: 1; }
.ct-band-edge { stroke: var(--muted-text); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0.75; }

/* Figure 4: each tier's column shaded darker the harder it is, under the arrow of its value. */
.ct-tier--easy { fill: color-mix(in srgb, var(--ct-ttc) 4%, transparent); }
.ct-tier--medium { fill: color-mix(in srgb, var(--ct-ttc) 12%, transparent); }
.ct-tier--hard { fill: color-mix(in srgb, var(--ct-ttc) 22%, transparent); }
.ct-tier--beyond { fill: color-mix(in srgb, var(--ct-ttc) 34%, transparent); }
.ct-bar-tier { fill: color-mix(in srgb, var(--ct-base) 50%, var(--ct-base-ink)); }
.ct-rank-arrow { fill: var(--ct-ttc); }

.ct-bar-base { fill: var(--ct-base); }
.ct-bar-ttc { fill: var(--ct-ttc); }
.ct-bar-best { fill: color-mix(in srgb, var(--ct-ttc) 55%, var(--paper)); }
.ct-bar-faint { fill: var(--ct-base); opacity: 0.55; }
.ct-bar-gain { fill: var(--ct-ttc); }
.ct-bar-loss { fill: var(--ct-cost); }
.ct-zero { stroke: var(--ct-base-ink); stroke-width: 2; stroke-linecap: butt; }
.ct-zero--ttc { stroke: var(--ct-ttc); }

/* The region of problems the baseline never solves takes its fill from a hatch pattern
   (the fill attribute), so .ct-never sets no fill here. */
.ct-hatch-line { stroke: var(--ct-base-ink); stroke-width: 1.2; opacity: 0.4; }
.ct-hatch-line--cost { stroke: var(--ct-cost); opacity: 0.38; }
/* The track behind a share bar (Figures 13 to 16) likewise takes its fill from a hatch pattern. */
.ct-hatch-line--track { stroke: var(--ct-base); stroke-width: 2; opacity: 0.85; }

.ct-cost-line { stroke: var(--ct-cost); stroke-width: 2.2; fill: none; }
.ct-cost-dot { fill: var(--ct-cost); }
.ct-ttc-line { stroke: var(--ct-ttc); stroke-width: 2.2; fill: none; }
.ct-ttc-dot { fill: var(--ct-ttc); }
.ct-svg .ct-share-end { font-size: 13px; font-weight: 700; fill: var(--ct-ttc-ink); }

.ct-veil { fill: var(--ct-veil); }

.ct-end { stroke: var(--paper); stroke-width: 1.5; }
.ct-end--baseline { fill: var(--ct-base-ink); }
.ct-end--ttc { fill: var(--ct-ttc); }
.ct-link { stroke-width: 3; }
.ct-link--save { stroke: color-mix(in srgb, var(--ct-ttc) 45%, transparent); }
.ct-link--more { stroke: color-mix(in srgb, var(--ct-cost) 50%, transparent); }
.ct-pending { fill: color-mix(in srgb, var(--rule) 22%, transparent); stroke: var(--rule); stroke-dasharray: 4 4; }

.ct-share--easy { fill: color-mix(in srgb, var(--ct-base) 45%, var(--paper)); }
.ct-share--medium { fill: var(--ct-base); }
.ct-share--hard { fill: var(--ct-cost); }
.ct-share--beyond { fill: color-mix(in srgb, var(--ct-cost) 60%, var(--ink)); }
.ct-share--ttc-easy { fill: color-mix(in srgb, var(--ct-ttc) 30%, var(--paper)); }
.ct-share--ttc-medium { fill: color-mix(in srgb, var(--ct-ttc) 55%, var(--paper)); }
.ct-share--ttc-hard { fill: var(--ct-ttc); }
.ct-share--ttc-beyond { fill: color-mix(in srgb, var(--ct-ttc) 60%, var(--ink)); }

/* ─── Figure 3, the RL industry by domain ──────────────────────────────────────────────────── */

/* A square per domain and a tile per company, sized by funding, with each domain's largest company
   (its top-left tile) a shade darker, as keyed by .ct-key--base and .ct-key--faint
   (scripts/build_rl_market_figure.py). */
.ct-svg .ct-tile { fill: color-mix(in srgb, var(--ct-base) 55%, var(--paper)); }
.ct-svg .ct-tile--lead { fill: var(--ct-base); }
.ct-svg .ct-tile-name { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.ct-svg .ct-tile-name--big { font-size: 15px; font-weight: 700; }
.ct-svg .ct-tile-name--small { font-size: 11px; }
.ct-svg .ct-tile-value { font-size: 11.5px; font-variant-numeric: tabular-nums; fill: var(--ink); opacity: 0.72; }
.ct-svg .ct-tile-value--big { font-size: 12.5px; }
.ct-svg .ct-tile-value--small { font-size: 10.5px; }
.ct-svg .ct-domain-total { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--ink); }

/* ─── Legends ──────────────────────────────────────────────────────────────────────────────── */

.ct-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 26px;
  font: 400 13px/1.4 var(--ct-sans);
  color: var(--muted-text);
}

.ct-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ct-key::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--ct-base);
}

.ct-key--ttc::before,
.ct-key--gain::before { background: var(--ct-ttc); }
.ct-key--loss::before { background: var(--ct-cost); }
.ct-key--best::before { background: color-mix(in srgb, var(--ct-ttc) 55%, var(--paper)); }
.ct-key--faint::before { background: color-mix(in srgb, var(--ct-base) 55%, var(--paper)); }
.ct-key--cost::before {
  width: 24px;
  height: 8px;
  border-radius: 0;
  background:
    radial-gradient(circle, var(--ct-cost) 3px, transparent 3.5px) center / 8px 8px no-repeat,
    linear-gradient(var(--ct-cost), var(--ct-cost)) center / 24px 2px no-repeat;
}

.ct-key--ttc-line::before {
  width: 24px;
  height: 8px;
  border-radius: 0;
  background:
    radial-gradient(circle, var(--ct-ttc) 3px, transparent 3.5px) center / 8px 8px no-repeat,
    linear-gradient(var(--ct-ttc), var(--ct-ttc)) center / 24px 2px no-repeat;
}

.ct-key--never::before {
  box-sizing: border-box;
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ct-base-ink) 60%, transparent) 0 1.2px, transparent 1.2px 5px);
}

.ct-art--curve .ct-key--never::before {
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ct-cost) 55%, transparent) 0 1.2px, transparent 1.2px 5px);
}

/* ─── Figures 8, 10, 20 and 21, animated ─────────────────────────────────────────────────────────────
   The drawing as written is the final frame: the success-rate bars faint under the cost line.
   Once the script arms the figure (.is-armed), every piece waits at its first frame; when the
   figure scrolls into view (.is-playing), the first phase draws the success rates and the share of
   problems, the second dims the bars and draws the cost and the share of cost, and the third draws
   TTC's cost over the baseline's and its share of cost, to scale. Bars, dots and share segments
   stagger by their --d, from 0 to 1. */

.ct-art--curve .ct-p1-bars { opacity: 0.55; }

.ct-anim-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 26px;
}

.ct-art--curve .ct-anim-foot {
  margin-top: 0;
  margin-bottom: 12px;
  justify-content: flex-start;
}

.ct-anim-foot .ct-legend { margin-top: 0; }

.ct-replay {
  display: none;
  padding: 4px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  font: 500 12px/1.4 var(--ct-sans);
  letter-spacing: 0.04em;
  color: var(--muted-text);
  cursor: pointer;
}

.ct-replay:hover,
.ct-replay:focus-visible { color: var(--ink); border-color: var(--ink); }

.ct-anim.is-armed .ct-replay { display: inline-block; }

.ct-anim.is-armed .ct-p1-bars rect,
.ct-anim.is-armed :is(.ct-p1-share, .ct-p2-share, .ct-p3-share) rect { transform-box: fill-box; }

.ct-anim.is-armed .ct-p1-bars rect { transform-origin: 50% 100%; }
.ct-anim.is-armed :is(.ct-p1-share, .ct-p2-share, .ct-p3-share) rect { transform-origin: 0 50%; }

.ct-anim.is-armed :is(.ct-cost-line, .ct-ttc-line) { stroke-dasharray: 1; }

.ct-anim.is-armed .ct-p1-bars rect { animation: ct-grow-y 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; animation-delay: calc(0.2s + var(--d, 0) * 1.2s); }
.ct-anim.is-armed .ct-p1-share rect { animation: ct-grow-x 0.5s ease-out both; animation-delay: calc(1.6s + var(--d, 0) * 0.5s); }
.ct-anim.is-armed .ct-p1-share-text { animation: ct-in 0.4s ease 2.4s both; }
.ct-anim.is-armed .ct-p1-bars { animation: ct-dim 0.6s ease 3.2s both; }
.ct-anim.is-armed .ct-p2-text { animation: ct-in 0.6s ease 3.2s both; }
.ct-anim.is-armed .ct-cost-line { animation: ct-draw 1.8s linear 3.5s both; }
.ct-anim.is-armed .ct-p2-dots circle { animation: ct-in 0.2s ease both; animation-delay: calc(3.5s + var(--d, 0) * 1.8s); }
.ct-anim.is-armed .ct-p2-share rect { animation: ct-grow-x 0.5s ease-out both; animation-delay: calc(5.5s + var(--d, 0) * 0.5s); }
.ct-anim.is-armed .ct-p2-share-text { animation: ct-in 0.4s ease 6.3s both; }
.ct-anim.is-armed .ct-p3-text { animation: ct-in 0.6s ease 7.1s both; }
.ct-anim.is-armed .ct-ttc-line { animation: ct-draw 1.8s linear 7.3s both; }
.ct-anim.is-armed .ct-p3-dots circle { animation: ct-in 0.2s ease both; animation-delay: calc(7.3s + var(--d, 0) * 1.8s); }
.ct-anim.is-armed .ct-p3-share rect { animation: ct-grow-x 0.5s ease-out both; animation-delay: calc(9.3s + var(--d, 0) * 0.5s); }
.ct-anim.is-armed .ct-p3-share-text { animation: ct-in 0.4s ease 10.1s both; }

.ct-anim.is-armed:not(.is-playing) * { animation-play-state: paused; }

@keyframes ct-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ct-dim { from { opacity: 1; } to { opacity: 0.55; } }
@keyframes ct-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes ct-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ct-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ct-anim * { animation: none !important; }
  .ct-replay { display: none !important; }
}

/* ─── Figure 7, the expanding frontier, animated ─────────────────────────────────────────────
   An illustration: tasks as dots, the region standard inference solves in the baseline's grey and
   the band TTC adds around it in the site green. As drawn, the final frame. Armed, each piece waits
   for its --t (written inline by the script, as are --dur and --from): the tasks fade in, the
   baseline's region grows from the center as the tasks it covers fill in, then TTC's boundary
   expands from the baseline's (a SMIL morph the script starts) and the tasks it passes turn green. */

.ct-art--reach .ct-anim-foot { margin-top: 6px; }

.ct-reach-region--base { fill: color-mix(in srgb, var(--ct-base) 42%, var(--paper)); stroke: var(--ct-base-ink); stroke-width: 2; }
.ct-reach-region--ttc { fill: color-mix(in srgb, var(--ct-ttc) 18%, var(--paper)); stroke: var(--ct-ttc); stroke-width: 2.2; }
.ct-reach-dots circle,
.ct-reach-key-open { fill: none; stroke: var(--muted-text); stroke-width: 1; opacity: 0.55; }
.ct-reach-dots--base circle { fill: var(--ct-base-ink); stroke: none; opacity: 1; }
.ct-reach-dots--ttc circle { fill: var(--ct-ttc); stroke: none; opacity: 1; }
.ct-reach-arrow { stroke: var(--ct-ttc-ink); stroke-width: 1.8; }
.ct-svg .ct-reach-label { font-size: 12px; font-weight: 700; fill: var(--ink); }
.ct-svg .ct-reach-label--ttc { font-size: 13px; fill: var(--ct-ttc-ink); }
.ct-svg .ct-reach-key { font-weight: 700; fill: var(--ink); }
.ct-svg .ct-reach-key--ttc { fill: var(--ct-ttc-ink); }

.ct-anim.is-armed .ct-reach-grow {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: ct-in 0.3s ease var(--t) both, ct-reach-grow var(--dur) linear var(--t) both;
}
.ct-anim.is-armed .ct-reach-dots { animation: ct-in 0.6s ease both; }
.ct-anim.is-armed :is(.ct-reach-dots--base, .ct-reach-dots--ttc) { animation: none; }
.ct-anim.is-armed :is(.ct-reach-dots--base, .ct-reach-dots--ttc) circle { animation: ct-in 0.3s ease var(--t) both; }
.ct-anim.is-armed path.ct-reach-region--ttc { animation: ct-in 0.01s linear var(--t) both; }
.ct-anim.is-armed .ct-reach-in { animation: ct-in 0.5s ease var(--t) both; }
.ct-anim.is-armed .ct-reach-arrow { stroke-dasharray: 1; animation: ct-draw var(--dur) linear var(--t) both; }
.ct-anim.is-armed .ct-reach-arrow-head { stroke-dasharray: none; animation: ct-in 0.2s ease var(--t) both; }

@keyframes ct-reach-grow { from { transform: scale(var(--from)); } to { transform: none; } }

.ct-key--dot-base::before,
.ct-key--dot-ttc::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ct-base-ink);
}

.ct-key--dot-ttc::before { background: var(--ct-ttc); }

/* ─── Figure 9, the speed multiples ───────────────────────────────────────────────────────── */

/* A column per benchmark: a large multiple for the average comparison over a smaller one for the
   best, four across, then two, then one on phones. */

.article-body .ct-multiples {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--ct-sans);
}

.article-body .ct-multiples > li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 24px clamp(14px, 2vw, 26px);
}

.article-body .ct-multiples > li + li { border-left: 1px solid var(--rule); }

.article-body .ct-multiples span { display: block; }

.article-body .ct-multiples .ct-multiples-domain {
  font: 500 11px/1.3 var(--ct-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.article-body .ct-multiples .ct-multiples-name {
  margin-top: 4px;
  font: 400 17px/1.3 var(--ct-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.article-body .ct-multiples .ct-multiples-value {
  margin: 20px 0 6px;
  font: 700 clamp(52px, 6vw, 76px)/1 var(--ct-sans);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ct-ttc-ink);
}

.article-body .ct-multiples .ct-multiples-value--cost { color: var(--ct-cost-ink); }

.article-body .ct-multiples .ct-multiples-value--fraction { font-size: clamp(48px, 5vw, 64px); }

.article-body .ct-multiples .ct-multiples-of {
  display: inline;
  font-size: 0.6em;
  letter-spacing: -0.03em;
}

.article-body .ct-multiples .ct-multiples-label {
  font: 600 15px/1.3 var(--ct-sans);
  color: var(--ink);
}

.article-body .ct-multiples {
  --ct-time-avg: #a8d4b8;
  --ct-time-best: #3e644c;
}

html[data-theme="dark"] .article-body .ct-multiples {
  --ct-time-avg: #b5ddc4;
  --ct-time-best: #4a8f6a;
}

.article-body .ct-multiples .ct-multiples-time {
  margin-top: 14px;
  font: 700 clamp(22px, 2.3vw, 28px)/1.15 var(--ct-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}

.article-body .ct-multiples .ct-multiples-time-label {
  margin-top: 3px;
  font: 600 13px/1.3 var(--ct-sans);
}

/* Figure 9's average case, on the dark panel of the introduction's highlights. */
.article-body .ct-multiples .ct-multiples-avg {
  margin: 18px calc(-1 * clamp(8px, 1vw, 14px)) 0;
  padding: 16px clamp(8px, 1vw, 14px) 18px;
  background: var(--ct-scale-surface);
  border-top: 4px solid var(--ct-scale-accent);
}

.article-body .ct-multiples .ct-multiples-avg .ct-multiples-value { margin-top: 0; color: var(--ct-scale-ink); }
.article-body .ct-multiples .ct-multiples-avg--cost .ct-multiples-value { color: var(--ct-cost); }
.article-body .ct-multiples .ct-multiples-avg :is(.ct-multiples-label, .ct-multiples-time-label) { color: var(--ct-scale-ink); }
.article-body .ct-multiples .ct-multiples-avg .ct-multiples-time { color: var(--ct-time-avg); }
.article-body .ct-multiples .ct-multiples-avg--cost .ct-multiples-time { color: #eba393; }
.article-body .ct-multiples .ct-multiples-best .ct-multiples-time { color: var(--ct-time-best); }

.article-body .ct-multiples .ct-multiples-best {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font: 500 13px/1.4 var(--ct-sans);
  color: var(--muted-text);
}

.article-body .ct-multiples .ct-multiples-best strong {
  display: block;
  margin-bottom: 2px;
  font: 700 30px/1.1 var(--ct-sans);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.article-body .ct-multiples .ct-multiples-best .ct-multiples-time-label { color: var(--ink); }

.article-body .ct-multiples .ct-multiples-avg + .ct-multiples-best { border-top: 0; }

.article-body .ct-multiples .ct-multiples-note {
  margin-top: auto;
  padding-top: 14px;
  font: 400 12.5px/1.4 var(--ct-sans);
  color: var(--muted-text);
}

@media (max-width: 760px) {
  .article-body .ct-multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-body .ct-multiples > li:nth-child(odd) { border-left: 0; }
  .article-body .ct-multiples > li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}

@media (max-width: 420px) {
  .article-body .ct-multiples { grid-template-columns: minmax(0, 1fr); }
  .article-body .ct-multiples > li + li { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ─── Callouts ─────────────────────────────────────────────────────────────────────────────── */

/* The site's dark inset panel (.question-principle), led here by its emphasised line. Its label and
   emphasis take the panel's ink in place of the site's coral accent, as this post keeps red for cost. */

.correct-trajectories-essay .ct-callout { --reading-panel-accent: var(--reading-panel-ink); }

.article-body .ct-callout .question-principle-emphasis:not(:last-child) { margin-bottom: 0.9rem; }
.article-body .ct-callout p:not(.question-principle-emphasis) { font-size: 1.05rem; }
.article-body .ct-callout p:last-child { margin-bottom: 0; }

.article-body .ct-callout .ct-equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em 0.6em;
  max-width: none;
}

.article-body .ct-callout .ct-equation-sign {
  font-style: normal;
  font-size: 1.6em;
  line-height: 1;
}

/* The task tiers (Part III): a column per tier, its success-rate range under its name, with the
   frontier tiers in the panel's accent under a bracket (.ct-tiers-span) spanning them. */
.article-body .ct-callout .ct-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.5rem 0 1.4rem;
  font-family: var(--ct-sans);
}

.article-body .ct-callout .ct-tiers > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-row: 2;
  padding: 0.85rem 0.9rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}

.article-body .ct-callout .ct-tiers > div:first-of-type { padding-left: 0; }
.article-body .ct-callout .ct-tiers > div + div { border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent); }

.article-body .ct-callout .ct-tier-name {
  display: block;
  font: 600 0.7rem/1.3 var(--ct-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.article-body .ct-callout .ct-tier-range {
  display: block;
  margin-top: 0.35rem;
  font: 700 1.3rem/1.15 var(--ct-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.article-body .ct-callout .ct-tiers .is-frontier :is(.ct-tier-name, .ct-tier-range) { color: var(--reading-panel-accent, #f1b49d); opacity: 1; }

.article-body .ct-callout .ct-tiers-span {
  grid-column: 2 / span 2;
  grid-row: 1;
  margin: 0 0.9rem 0.55rem;
  padding-top: 0.4rem;
  border-top: 2px solid var(--reading-panel-accent, #f1b49d);
  color: var(--reading-panel-accent, #f1b49d);
  font: 700 0.7rem/1.3 var(--ct-sans);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .article-body .ct-callout .ct-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-body .ct-callout .ct-tiers > div { grid-row: auto; }
  .article-body .ct-callout .ct-tiers > div:nth-of-type(odd) { padding-left: 0; border-left: 0; }
  .article-body .ct-callout .ct-tiers > div:nth-of-type(n + 3) { margin-top: 0.85rem; }
  .article-body .ct-callout .ct-tiers-span { display: none; }
}

/* ─── Figure 1, the two eras ───────────────────────────────────────────────────────────────── */

/* The intelligence-is-search post's timeline (.history-track, in styles.20261002.css), a row per
   era, each carrying a flow of three blocks: the data, the training it feeds and the models it
   produces, the data filled in the accent as the markers are. Both flows share their columns, so
   each era's data sits over the other's. */
.ct-eras .history-track { margin-top: 0; }
.ct-eras .history-year:only-child { padding-right: 0; border-right: 0; }
.article-body .ct-eras .history-copy p { max-width: 680px; text-wrap: pretty; }

.ct-era-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr);
  margin-top: 1.1rem;
}

.ct-era-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  font: 400 1.15rem/1.25 var(--ct-sans);
  letter-spacing: -0.035em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}

.ct-era-node--data {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
}

/* Each block's role, in the capitals of the research post's memory types (.memory-types strong), enlarged. */
.ct-era-role {
  font-family: "DM Mono", monospace;
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.ct-era-node--data .ct-era-role { color: var(--paper); }

/* Each era's distinct advantage, under its flow: the label beside the advantage, its key words in the accent. */
.ct-era-advantage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 18px;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--paper);
}

.ct-era-advantage .ct-era-role { color: var(--accent-text); }

.ct-era-advantage-text {
  font: 400 1.15rem/1.3 var(--ct-sans);
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: pretty;
}

.ct-era-advantage-text strong { font-weight: 700; color: var(--accent-text); }

.ct-era-arrow {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 24px;
  height: 2px;
  background: var(--accent-text);
}

.ct-era-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--accent-text);
  border-right: 2px solid var(--accent-text);
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 640px) {
  .ct-era-flow,
  .ct-era-advantage { grid-template-columns: minmax(0, 1fr); }
  .ct-era-node { min-height: 0; }
  .ct-era-arrow { width: 2px; height: 20px; margin: 6px 0; }
  .ct-era-arrow::after { top: auto; right: auto; bottom: 0; left: 50%; transform: translateX(-50%) rotate(135deg); }
}

/* ─── Figure 2, compute splits ─────────────────────────────────────────────────────────────── */

/* Drawn in the bar language of the research post's compute figures (wg-bars, in
   what-got-us-here-figures.20261020.css), set in this post's type: labels in the small caps of
   .ct-caps, the key as .ct-legend, and each segment labelled as Figure 10's share bars are. Two
   charts under their own titles: first one 100% bar per model, named at the left, then one RL job's
   GPUs; search is the red of that post's cognition curve, against learning's blues. */
.ct-figure .wg-bars :is(.wg-stat-name, .wg-hbar-phase) {
  font: 500 11px/1.3 var(--ct-sans);
  letter-spacing: 0.12em;
}
.ct-figure .wg-bars .wg-stat-unit { font: 400 13px/1.4 var(--ct-sans); }
.ct-figure .wg-bars .wg-stack { height: 24px; gap: 1.5px; }
.ct-figure .wg-bars .wg-stack .wg-seg {
  justify-content: flex-start;
  padding: 0 7px;
  border-radius: 0;
  font: 700 12px/1 var(--ct-sans);
  letter-spacing: 0;
}
.ct-figure .wg-bars .wg-key {
  justify-content: center;
  gap: 8px 24px;
  margin-top: 26px;
  font: 400 13px/1.4 var(--ct-sans);
  letter-spacing: 0;
  text-transform: none;
}
.ct-figure .wg-bars .wg-swatch { width: 14px; height: 14px; border-radius: 2px; }

.article-body .ct-figure-title--next { margin-top: 3rem; }

.ct-splits {
  display: grid;
  grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}
.ct-splits-stats { padding-left: calc(12.5rem + 16px); }
/* The first chart draws RL in green against a light grey pre-training; the second draws search in
   the same green beside a light grey hatch for the learner. */
.ct-compute-split,
.ct-search-split {
  --ct-light-grey: color-mix(in srgb, var(--ink) 14%, var(--paper));
  --ct-rl-green: #3e7052;
  --ct-rl-green-ink: #3e644c;
}
@media screen {
  html[data-theme="dark"] .ct-compute-split,
  html[data-theme="dark"] .ct-search-split {
    --ct-rl-green: #75b68c;
    --ct-rl-green-ink: #94cda7;
  }
}
.ct-compute-split .wg-seg--pre { background: var(--ct-light-grey); color: var(--ink); }
.ct-compute-split .wg-stat-name--pre { color: var(--muted-text); }
.ct-compute-split .wg-seg--rl { background: var(--ct-rl-green); color: var(--paper); }
.ct-compute-split .wg-stat-name--rl { color: var(--ct-rl-green-ink); }
.ct-search-split .wg-seg--search { background: var(--ct-rl-green); color: var(--paper); }
.ct-search-split .wg-stat-name--search { color: var(--ct-rl-green-ink); }

.ct-search-split .wg-seg--rl {
  background:
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ink) 22%, transparent) 0 1.5px, transparent 1.5px 6px),
    color-mix(in srgb, var(--ink) 10%, var(--paper));
  color: var(--ink);
}
.ct-search-split .wg-stat-name--rl { color: var(--muted-text); }

/* The second chart's ratio, on the dark panel of Figure 9's average case, beside its bar. */
.ct-search-split {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: 24px 36px;
  align-items: center;
}
.ct-search-card {
  padding: 16px 20px 18px;
  background: var(--ct-scale-surface);
  border-top: 4px solid var(--ct-scale-accent);
  color: var(--ct-scale-ink);
}
.ct-search-card > span { display: block; }
.ct-nowrap { white-space: nowrap; }
.ct-search-card-value {
  font: 700 clamp(44px, 5.2vw, 64px)/1 var(--ct-sans);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ct-search-card-label {
  margin-top: 8px;
  font: 600 15px/1.3 var(--ct-sans);
  text-wrap: balance;
}

@media (max-width: 640px) {
  .ct-search-split { grid-template-columns: minmax(0, 1fr); }
}

/* Each model's source as a bracketed number beside its name, and the second chart's source under its headline. */
.ct-ref {
  font-size: 0.8em;
  color: var(--muted-text);
  white-space: nowrap;
}

.article-body .ct-source {
  max-width: none;
  margin: -0.5rem 0 1.4rem;
  font: 400 16px/1.4 var(--ct-sans);
  color: var(--muted-text);
}

:is(.ct-ref, .article-body .ct-source) a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* On phones, each model's name sits over its bar, so the bar has the width for its labels. */
@media (max-width: 560px) {
  .ct-splits { grid-template-columns: minmax(0, 1fr); }
  .ct-splits .wg-hbar-label { padding: 14px 0 6px; text-align: left; }
  .ct-splits .wg-stack .wg-seg { padding: 0 5px; font-size: 11px; }
  .ct-splits-stats { padding-left: 0; }
  .ct-splits-stats .wg-stat-value > span { display: block; margin-top: 2px; font-size: 1rem; }
}

/* ─── Figure 5, standard inference against TTC ─────────────────────────────────────────────── */

/* The search figure of moe-router-figures.20261007.css split in two halves, each headed with its
   system's name over a rule in its colour (standard inference's the sage of the model's samples,
   TTC's the post's green), and a rule down the middle between them. The heads fill the grid's first
   row, so the trees under them start level however the names wrap. That sheet loads after this
   one, hence the doubled class. */
.mr-panels.ct-versus { position: relative; row-gap: 18px; }
.mr-panels.ct-versus::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  border-left: 1px solid var(--rule);
}
.ct-versus-head {
  align-self: end;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--mr-likely);
  color: var(--ink);
  font: 700 1.05rem/1.25 var(--mr-sans);
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}
.ct-versus-head--ttc { border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 480px) {
  .ct-versus-head { font-size: 0.92rem; }
}

/* TTC's local search: a searchlight in the post's green on each node it reaches, its front edged to
   show how far it looks, the partial path it chooses drawn heavier in a blue shade, and each step it
   takes marked where it lands. */
.mr-light-edge { fill: none; stroke: var(--accent); stroke-width: 1; stroke-opacity: .75; }
.mr-light-key { fill: var(--accent); fill-opacity: .3; }
.mr-sample.mr-sample--chosen { stroke-width: 3.2; }
.mr-chosen-shade { fill: none; stroke: var(--mr-right); stroke-width: 9; stroke-opacity: .2; }
.mr-chosen { fill: var(--mr-right); }
/* A line yet to draw is all gap, and its next dash starts right at its end, which WebKit draws as a
   dot, the dash's round cap; a gap of twice the line's length keeps that dash off it. */
@media screen and (prefers-reduced-motion: no-preference) {
  .mr-art.mr-art--search.is-playing .mr-a-trace,
  .mr-art.mr-art--search.is-playing .mr-a-draw { stroke-dasharray: 1 2; }
}

/* ─── Figure captions ──────────────────────────────────────────────────────────────────────── */

.article-body .ct-figure > figcaption {
  max-width: 780px;
  margin: 0.9rem auto 0;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.ct-figure figcaption strong { color: var(--ink); }

/* ─── The three gains, in the introduction ─────────────────────────────────────────────────── */

/* The scale panel's colours and layout (below): a column per gain on the dark green panel under the
   accent rule, each a large figure in the accent over its label, linking to its part of the post. */

.ct-props {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
}

.article-body .ct-props-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 28px 0;
  list-style: none;
  background: var(--ct-scale-surface);
  color: var(--ct-scale-ink);
  border-top: 4px solid var(--ct-scale-accent);
  font-family: var(--ct-sans);
}

.article-body .ct-props-grid > li {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.ct-props-grid > li + li { border-left: 1px solid var(--ct-scale-rule); }

.article-body .ct-props-grid a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 clamp(18px, 2.2vw, 30px);
  text-decoration: none;
  border: 0;
  background: none;
}

.ct-props-domain {
  font: 600 14px/1.3 var(--ct-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ct-props-statement {
  margin: 12px 0 22px;
  font: 700 clamp(22px, 2.4vw, 30px)/1.15 var(--ct-sans);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Each gain's worked example, in one model comparison named under the grid. */
.article-body .ct-props-grid .ct-props-example {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ct-scale-rule);
}

.ct-props-example-value {
  display: block;
  font: 700 clamp(30px, 3.2vw, 40px)/1.05 var(--ct-sans);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.article-body .ct-props-grid .ct-props-example-label {
  display: block;
  margin-top: 6px;
  font: 500 13.5px/1.4 var(--ct-sans);
  text-wrap: balance;
  opacity: 0.85;
}

.article-body .ct-props .ct-props-note {
  margin: 0;
  max-width: none;
  padding: 12px clamp(18px, 2.2vw, 30px) 14px;
  background: var(--ct-scale-surface);
  border-top: 1px solid var(--ct-scale-rule);
  color: var(--ct-scale-ink);
  font: 500 13px/1.4 var(--ct-sans);
}

.article-body .ct-props-grid a,
.article-body .ct-props-grid span,
.article-body .ct-props-grid .ct-props-example-value { color: var(--ct-scale-ink); }

.article-body .ct-props-grid .ct-props-statement { color: var(--ct-scale-accent); }

.article-body .ct-props-grid a:hover .ct-props-statement,
.article-body .ct-props-grid a:focus-visible .ct-props-statement { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .article-body .ct-props-grid { grid-template-columns: minmax(0, 1fr); padding: 0 22px; }
  .article-body .ct-props-grid a { padding: 22px 0; }
  .ct-props-grid > li + li { border-left: 0; border-top: 1px solid var(--ct-scale-rule); }
  .article-body .ct-props .ct-props-note { padding: 12px 22px 14px; }
}

/* ─── The pamphlet, in the introduction ────────────────────────────────────────────────────── */

/* A lighter sheet laid on the page, like a printed one-pager: its headline in the figures' title
   face, then the three gains as cards, each linking to its part of the post; then, under a rule,
   one animated row (.ct-anim): what TTC is, as a flow of three boxes, over the per-task success
   rates (the pamphlet block in the script), the boxes appearing with the phases of the drawing. */

.ct-pamphlet {
  --ct-pamphlet-sheet: #f8f8f3;
  --ct-pamphlet-card: #e7eadf;
  --ct-pamphlet-deep: #2f5d43;
  --ct-pamphlet-deep-ink: #f3f4ee;
  --ct-pamphlet-green: #3e644c;
  box-sizing: border-box;
  margin-top: 2.5rem;
  margin-bottom: 3rem;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--ct-pamphlet-sheet);
  box-shadow: 0 1px 2px rgb(36 61 52 / 6%), 0 22px 44px -26px rgb(36 61 52 / 38%);
  font-family: var(--ct-sans);
  color: var(--ink);
}

@media screen {
  html[data-theme="dark"] .ct-pamphlet {
    --ct-pamphlet-sheet: #1f1f1d;
    --ct-pamphlet-card: #2a2a27;
    --ct-pamphlet-deep: #2f5a41;
    --ct-pamphlet-deep-ink: #f0f0e9;
    --ct-pamphlet-green: #94cda7;
    box-shadow: none;
  }
}

.article-body .ct-pamphlet .ct-pamphlet-title { margin: 0 0 1.5rem; max-width: none; }

.article-body .ct-pamphlet-props {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-body .ct-pamphlet .ct-pamphlet-props > li {
  min-width: 0;
  margin: 0;
  padding: 0;
  font: inherit;
}

.article-body .ct-pamphlet-props a {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px clamp(16px, 2vw, 24px) 18px;
  border-radius: 8px;
  background: var(--ct-pamphlet-card);
  color: var(--ink);
  text-decoration: none;
}

.ct-pamphlet-prop-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ct-pamphlet-icon {
  flex: none;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--ct-pamphlet-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ct-pamphlet-prop-domain {
  font: 700 22px/1.1 var(--ct-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Two lines held for every statement, so the examples' figures line up across the cards. */
.ct-pamphlet-prop-statement {
  display: block;
  min-height: 2.8em;
  margin: 12px 0 18px;
  font: 500 15.5px/1.4 var(--ct-sans);
  color: var(--ink);
  text-wrap: balance;
}

.ct-pamphlet-prop-example {
  display: block;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.ct-pamphlet-prop-value {
  display: block;
  font: 700 clamp(30px, 3.2vw, 38px)/1.05 var(--ct-sans);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ct-pamphlet-green);
}

.ct-pamphlet-prop-label {
  display: block;
  margin-top: 6px;
  font: 500 13px/1.4 var(--ct-sans);
  color: var(--muted-text);
  text-wrap: balance;
}

.article-body .ct-pamphlet-props a:is(:hover, :focus-visible) .ct-pamphlet-prop-statement { text-decoration: underline; text-underline-offset: 3px; }

.article-body .ct-pamphlet .ct-pamphlet-note {
  margin: 12px 0 0;
  max-width: none;
  font: 500 12.5px/1.4 var(--ct-sans);
  color: var(--muted-text);
}

.ct-pamphlet-row {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(24px, 3.5vw, 34px);
  border-top: 1px solid var(--rule);
}

/* The row's title with its Replay button just after it. */
.ct-pamphlet-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.article-body .ct-pamphlet .ct-pamphlet-row-title {
  margin: 0;
  max-width: none;
  font: 700 clamp(18px, 2vw, 21px)/1.2 var(--ct-sans);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.article-body .ct-pamphlet .ct-pamphlet-plot-lead {
  margin: 32px 0 0;
  max-width: none;
  font: 400 14px/1.5 var(--ct-sans);
  color: var(--muted-text);
}

.ct-pamphlet-plot-lead strong { font-weight: 700; color: var(--ink); }

/* What TTC is: the model and agent, TTC on the deep green, and what comes out, arrows between. */
.ct-pamphlet-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
  margin-top: 18px;
}

.ct-pamphlet-node {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 18px 16px;
  border-radius: 8px;
  background: var(--ct-pamphlet-card);
  text-align: center;
}

.ct-pamphlet-node strong {
  font: 700 16px/1.25 var(--ct-sans);
  color: var(--ink);
}

.ct-pamphlet-node span {
  font: 400 13px/1.4 var(--ct-sans);
  color: var(--muted-text);
  text-wrap: balance;
}

.ct-pamphlet-node--ttc { background: var(--ct-pamphlet-deep); }
.ct-pamphlet-node--ttc strong { color: var(--ct-pamphlet-deep-ink); }
.ct-pamphlet-node--ttc span { color: color-mix(in srgb, var(--ct-pamphlet-deep-ink) 82%, transparent); }

.ct-pamphlet-arrow {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 26px;
  height: 2px;
  background: var(--ct-pamphlet-green);
}

.ct-pamphlet-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--ct-pamphlet-green);
  border-right: 2px solid var(--ct-pamphlet-green);
  transform: translateY(-50%) rotate(45deg);
}

.article-body .ct-pamphlet .ct-pamphlet-flow-note {
  margin: 18px 0 0;
  max-width: none;
  font: 400 14px/1.45 var(--ct-sans);
  color: var(--ink);
  text-align: center;
}

.article-body .ct-pamphlet .ct-pamphlet-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0 0;
  max-width: none;
  font: 700 11.5px/1.4 var(--ct-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ct-pamphlet-green);
}

.ct-pamphlet-tags span + span::before { content: "•"; margin: 0 0.9em; }

/* The success rates: the steps above the drawing double as its key, the TTC step joining the
   standard inference one when TTC's change draws. The veil over the easy tasks takes the sheet's
   colour. */
.ct-pamphlet .ct-art {
  --ct-veil: color-mix(in srgb, var(--ct-pamphlet-sheet) 62%, transparent);
  margin-top: 14px;
}

.ct-pp-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 16px;
  font: 500 13px/1.4 var(--ct-sans);
  color: var(--muted-text);
}

.ct-pp-step {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.ct-pp-step--base .ct-key { font: 700 15px/1.3 var(--ct-sans); color: var(--ink); }
.ct-pp-step--ttc::before { content: "→"; font-size: 16px; color: var(--muted-text); }
.ct-pp-step-name { font: 700 15px/1.3 var(--ct-sans); color: var(--ct-ttc-ink); }

.ct-pp-before { opacity: 0; }

/* Three phases, each a box of the flow with its part of the drawing: the model and agent with
   standard inference's bars (from 0.2s); TTC, its arrow and the notes above the flow with the TTC
   step and TTC's change (from 2.4s); and, once TTC's change has stood a moment, more successful
   trajectories with each tier's average under TTC (from 5.4s), then its multiple, one tier at a
   time (from 6.1s). */
.ct-anim.is-armed .ct-pamphlet-node--model { animation: ct-pp-rise 0.5s ease 0.2s both; }
.ct-anim.is-armed :is(.ct-pp-base, .ct-pp-gain) rect { transform-box: fill-box; transform-origin: 50% 100%; }
.ct-anim.is-armed .ct-pp-base rect { animation: ct-grow-y 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; animation-delay: calc(0.3s + var(--d, 0) * 1.2s); }
.ct-anim.is-armed .ct-pp-before { animation: ct-pp-blip 4.5s ease 1.2s both; }

.ct-anim.is-armed .ct-pamphlet-arrow--in { animation: ct-in 0.4s ease 2.4s both; }
.ct-anim.is-armed .ct-pamphlet-node--ttc { animation: ct-pp-rise 0.5s ease 2.6s both; }
.ct-anim.is-armed .ct-pp-step--ttc { animation: ct-pp-step 0.5s ease 2.6s both; }
.ct-anim.is-armed :is(.ct-pamphlet-flow-note, .ct-pamphlet-tags) { animation: ct-in 0.5s ease 2.6s both; }
.ct-anim.is-armed .ct-pp-gain rect { animation: ct-grow-y 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; animation-delay: calc(3s + var(--d, 0) * 1.2s); }
.ct-anim.is-armed .ct-pp-loss rect { animation: ct-in 0.3s ease both; animation-delay: calc(3s + var(--d, 0) * 1.2s); }

.ct-anim.is-armed .ct-pamphlet-arrow--out { animation: ct-in 0.4s ease 5.4s both; }
.ct-anim.is-armed .ct-pamphlet-node--result { animation: ct-pp-rise 0.5s ease 5.6s both; }
.ct-anim.is-armed .ct-pp-after { animation: ct-in 0.5s ease 5.6s both; }
.ct-anim.is-armed .ct-pp-multiples text {
  transform-box: view-box;
  animation: ct-pp-pop 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(6.1s + var(--i, 0) * 0.5s);
}

@keyframes ct-pp-blip { 0%, 100% { opacity: 0; } 15%, 85% { opacity: 1; } }
@keyframes ct-pp-pop { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes ct-pp-step { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes ct-pp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .article-body .ct-pamphlet-props { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ct-pamphlet-prop-statement { min-height: 0; }
}

@media (max-width: 640px) {
  .ct-pamphlet-flow { grid-template-columns: minmax(0, 1fr); }
  .ct-pamphlet-arrow { width: 2px; height: 24px; margin: 6px 0; }
  .ct-pamphlet-arrow::after { top: auto; right: auto; bottom: 0; left: 50%; transform: translateX(-50%) rotate(135deg); }
  .article-body .ct-pamphlet .ct-pamphlet-tags { flex-direction: column; align-items: center; gap: 2px; }
  .ct-pamphlet-tags span + span::before { content: none; }
}

@media print {
  .ct-pamphlet { box-shadow: none; }
}

/* ─── Consistency and scale, in the introduction ───────────────────────────────────────────── */

/* The evals page's result highlights (.hero-results in evals-hero.20260923.v2.css): a dark green
   panel under a rule in the accent, a column per point, each a large figure in the accent over its
   label; the accent is the panel's ink here, where the evals page's is coral, as this post keeps red
   for cost. */

.ct-scale,
.ct-props,
.ct-multiples-avg,
.ct-search-card {
  --ct-scale-surface: #233d32;
  --ct-scale-ink: #eeefe7;
  --ct-scale-accent: #eeefe7;
  --ct-scale-rule: #eeefe733;
}

.ct-scale {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  background: var(--ct-scale-surface);
  border-top: 4px solid var(--ct-scale-accent);
}

.article-body .ct-scale .ct-scale-title {
  max-width: none;
  margin: 0;
  padding: 30px clamp(18px, 2.2vw, 30px) 0;
  color: var(--ct-scale-ink);
}

html[data-theme="dark"] .ct-scale,
html[data-theme="dark"] .ct-props,
html[data-theme="dark"] .ct-multiples-avg,
html[data-theme="dark"] .ct-search-card {
  --ct-scale-surface: #252523;
  --ct-scale-ink: #f0f0e9;
  --ct-scale-accent: #f0f0e9;
  --ct-scale-rule: #f0f0e933;
}

.article-body .ct-scale-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 28px 0;
  list-style: none;
  color: var(--ct-scale-ink);
  font-family: var(--ct-sans);
}

.article-body .ct-scale-grid > li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0 clamp(18px, 2.2vw, 30px);
  text-align: center;
}

.article-body .ct-scale-grid > li + li { border-left: 1px solid var(--ct-scale-rule); }

.ct-scale-domain {
  min-height: 2.6em;
  font: 600 14px/1.3 var(--ct-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ct-scale-value {
  margin: 8px 0 10px;
  color: var(--ct-scale-accent);
  font: 700 clamp(48px, 5.4vw, 72px)/1 var(--ct-sans);
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.ct-scale-value span { font-size: 0.6em; letter-spacing: -0.025em; }

.ct-scale-label {
  min-height: 2.5em;
  font: 600 clamp(17px, 1.7vw, 22px)/1.25 var(--ct-sans);
  letter-spacing: -0.02em;
}

.ct-scale-secondary {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ct-scale-rule);
  font: 500 13px/1.4 var(--ct-sans);
  text-wrap: balance;
  opacity: 0.85;
}

.article-body .ct-scale-grid li,
.article-body .ct-scale-grid span { color: var(--ct-scale-ink); }

.article-body .ct-scale-grid .ct-scale-value,
.article-body .ct-scale-grid .ct-scale-value span { color: var(--ct-scale-accent); }

@media (max-width: 640px) {
  .article-body .ct-scale .ct-scale-title { padding: 26px 22px 4px; }
  .article-body .ct-scale-grid { grid-template-columns: minmax(0, 1fr); padding: 0 22px; }
  .article-body .ct-scale-grid > li { padding: 22px 0; }
  .article-body .ct-scale-grid > li + li { border-left: 0; border-top: 1px solid var(--ct-scale-rule); }
  .ct-scale-domain,
  .ct-scale-label { min-height: 0; }
}

/* ─── The draft notice ─────────────────────────────────────────────────────────────────────── */

.ct-draft-note {
  margin: 0 0 2rem;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--rule);
  font: 400 0.84rem/1.55 var(--ct-sans);
  color: var(--muted-text);
}

.ct-draft-note strong { color: var(--ink); }

/* Draft placeholders: a dashed slot for a figure not yet drawn, and a dashed note for an argument
   not yet written, each led by a small capitalised label. */
.ct-slot {
  display: grid;
  place-content: center;
  gap: 0.6rem;
  min-height: 240px;
  padding: 28px clamp(20px, 4vw, 48px);
  border: 1px dashed var(--rule);
  background: color-mix(in srgb, var(--paper) 94%, var(--ink));
  text-align: center;
  font-family: var(--ct-sans);
}

.ct-slot-label,
.ct-todo-label {
  display: block;
  color: var(--muted-text);
  font: 600 0.68rem/1.3 var(--ct-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-body .ct-slot p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted-text);
  font: 400 0.92rem/1.5 var(--ct-sans);
}

.ct-todo {
  margin: 1.4rem 0;
  padding: 0.85rem 1rem 0.9rem;
  border: 1px dashed var(--rule);
  border-left: 3px solid var(--ct-frontier, #a8731f);
  font-family: var(--ct-sans);
}

.article-body .ct-todo ul {
  margin: 0.45rem 0 0;
  padding-left: 1.1rem;
}

.article-body .ct-todo :is(p, li) {
  margin: 0.45rem 0 0;
  color: var(--ink);
  font: 400 0.92rem/1.5 var(--ct-sans);
}

.article-body .ct-todo li + li { margin-top: 0.3rem; }

/* When a section carries the HTML `hidden` attribute, hide both the section and its table-of-contents link. */
#rl-industry[hidden],
#appendix[hidden],
.article-body:has(#rl-industry[hidden]) .essay-map li:has(a[href="#rl-industry"]),
.article-body:has(#appendix[hidden]) .essay-map li:has(a[href="#appendix"]) {
  display: none;
}

/* ─── Fullscreen, Figures 4, 6, 8, 10, 20 and 21 ──────────────────────────────────────────── */

/* The headline with the Fullscreen button beside it; the button stays hidden without the script. */
.ct-figure-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 1.1rem;
}

.ct-figure-head--untitled { justify-content: flex-end; }
.article-body .ct-figure-head .ct-figure-title { flex: 1 1 18rem; margin: 0; }

.ct-fullscreen {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 600 15px/1 var(--ct-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ct-fullscreen[hidden] { display: none; }
.ct-fullscreen:hover,
.ct-fullscreen:focus-visible { background: transparent; color: var(--ink); }
.ct-fullscreen:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ct-fullscreen-icon { flex: none; width: 20px; height: 20px; }
.ct-fullscreen-icon--close,
.ct-figure.is-fullscreen .ct-fullscreen-icon--open { display: none; }
.ct-figure.is-fullscreen .ct-fullscreen-icon--close { display: block; }

/* Open, the figure fills the screen: the drawing takes whatever the headline, legend and caption
   leave, scaled to fit (its viewBox keeps its shape), and a long caption scrolls within its own
   share of the height. Without the Fullscreen API the figure is fixed over the page instead. */
.ct-figure.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: clamp(16px, 3vh, 36px) clamp(16px, 4vw, 56px);
  border: 0;
  transform: none;
  background: var(--paper);
  overflow: auto;
}

html.ct-has-fullscreen,
html.ct-has-fullscreen body { overflow: hidden; }

.ct-figure.is-fullscreen .ct-figure-head { flex: none; }

/* Figure 6 sets a second drawing under its per-task one; fullscreen shows the per-task drawing alone. */
.ct-figure.is-fullscreen :is(.ct-figure-title--next, .ct-figure-title--next ~ .ct-art) { display: none; }

.ct-figure.is-fullscreen .ct-art,
.ct-figure.is-fullscreen .ct-art > [role="img"] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ct-figure.is-fullscreen .ct-art { margin-bottom: 0; }
.ct-figure.is-fullscreen .ct-svg { flex: 1 1 0; min-height: 0; }
.ct-figure.is-fullscreen .ct-art > :is(.ct-legend, .ct-anim-foot) { flex: none; }

.article-body .ct-figure.is-fullscreen > figcaption {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 22vh;
  overflow: auto;
}

@media print {
  .ct-fullscreen { display: none !important; }
  .ct-figure { break-inside: avoid; }
  .ct-svg--wide { display: block !important; }
  .ct-svg--narrow { display: none !important; }
}