/* Animated figures for "What Got Us Here Won’t Get Us There", drawn by
   /assets/js/what-got-us-here-figures.20261020.js in the language of the homepage figures: a search
   space is a forest whose branches thin and fade toward the rim, and every search starts from a plain
   ink dot. Blue is the correct path, in the blue of the site's evaluation charts (--mr-eval-blue in
   moe-router-figures.20261007.css). Red is search, in the red of the site's other research figures
   (--mr-wrong in moe-router-figures.20261007.css, --rf-wrong in robotics-figures.20261014.css); keep
   them in step. Every other colour is a theme token, so both themes work. */

.wg-art {
  --wg-label: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --wg-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wg-blue: #356aa2;
  --wg-blue-light: #62a2da;       /* the blue, lighter: post-training, next to pre-training's */
  --wg-blue-light-text: #3f7fba;  /* and deepened, as the red is, for small type */
  --wg-red: #c45a4a;
  --wg-red-text: #a8483a;  /* the red, deepened so small type reads on the paper */
}
/* As on the homepage, the graphics keep their hues in the dark theme, lightened for a dark ground. */
@media screen {
  html[data-theme="dark"] .wg-art {
    --wg-blue: #83b6ef;
    --wg-blue-light: #b4dcf7;
    --wg-blue-light-text: #b4dcf7;
    --wg-red: #e88a7a;
    --wg-red-text: #e88a7a;
  }
}

/* Two panels side by side, each named above its tree; stacked on narrow screens. */
.wg-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 44px; }
.wg-panel { min-width: 0; }
.wg-panel-label { display: grid; gap: 5px; margin-bottom: 14px; text-align: center; }
.wg-panel-name { color: var(--ink); font: 400 0.62rem/1.3 var(--wg-label); letter-spacing: 0.16em; text-transform: uppercase; }
.wg-panel-note { color: var(--muted-text); font: 400 0.84rem/1.4 var(--wg-sans); }
.wg-svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) {
  .wg-panels { grid-template-columns: minmax(0, 1fr); }
}

/* The search space: branches thin and fade as they reach outward. */
.wg-tw { stroke: var(--ink); }
.wg-tw--1 { stroke-opacity: .62; stroke-width: 1.25; }
.wg-tw--2 { stroke-opacity: .5; stroke-width: 1.05; }
.wg-tw--3 { stroke-opacity: .4; stroke-width: .85; }
.wg-tw--4 { stroke-opacity: .3; stroke-width: .7; }
.wg-root { fill: var(--ink); }

/* The correct path: in pre-training known from the start (the target, faint) and learned token by
   token over it. Its nodes are open until their token is reconciled; then filled. */
.wg-path { stroke: var(--wg-blue); stroke-width: 2.4; }
.wg-path--target { stroke-opacity: .45; stroke-width: 1.8; }
.wg-node { fill: var(--paper); stroke: var(--wg-blue); stroke-width: 1.4; }
.wg-node--on { fill: var(--wg-blue); stroke: var(--paper); stroke-width: 1.2; }
.wg-goal circle { fill: var(--paper); stroke: var(--wg-blue); stroke-width: 1.5; }
.wg-goal path { fill: none; stroke: var(--wg-blue); stroke-width: 1.7; }

/* Search: the searchlights, the branches they light, and the attempts that fail. */
.wg-stop--search { stop-color: var(--wg-red); }
.wg-stop--path { stop-color: var(--wg-blue); }
.wg-ray { stroke-width: 1; stroke-opacity: .7; }
.wg-ray--search { stroke: var(--wg-red); }
.wg-ray--path { stroke: var(--wg-blue); }
.wg-alt { stroke: var(--wg-red); stroke-width: 1.6; }
.wg-try { stroke: var(--wg-red); stroke-width: 1.7; }
.wg-searched { stroke: var(--wg-red); stroke-width: 1.1; }
.wg-x { stroke: var(--wg-red); stroke-width: 1.3; stroke-opacity: .85; }

/* The legend under both panels. */
.wg-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin-top: 28px;
  color: var(--muted-text);
  font: 400 0.58rem/1.2 var(--wg-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wg-legend span { display: inline-flex; align-items: center; gap: 8px; }
.wg-icon { width: 16px; height: 16px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wg-key-path { stroke: var(--wg-blue); stroke-width: 2.2; }
.wg-key-light { fill: var(--wg-red); fill-opacity: .2; stroke: var(--wg-red); stroke-opacity: .75; stroke-width: 1; }
.wg-key-searched { stroke: var(--wg-red); stroke-opacity: .55; stroke-width: 1.4; }
.wg-key-x { stroke: var(--wg-red); stroke-width: 1.4; }

/* The compute split (Figure 1): one chart in three steps, drawn at the width it is shown. Learning is
   blue, pre-training's deeper and RL post-training's lighter; search, and cognition, is red. What is
   predicted is dashed, over a hatched region. Names have a halo of paper, so the lines they cross
   part around them. */
.wg-chart { display: block; width: 100%; height: auto; overflow: visible; }
.wg-grid { stroke: var(--ink); stroke-opacity: .12; stroke-width: 1; }
.wg-base { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; }
.wg-tick { stroke: var(--ink); stroke-opacity: .45; stroke-width: 1; }
.wg-tick-label { fill: var(--muted-text); font: 400 11px/1 var(--wg-label); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.wg-axis-title { fill: var(--muted-text); font: 400 10px/1 var(--wg-label); letter-spacing: .14em; }
.wg-event { fill: var(--ink); font: 400 10px/1 var(--wg-label); letter-spacing: .14em; }
.wg-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wg-line--pre { stroke: var(--wg-blue); }
.wg-line--post { stroke: var(--wg-blue-light); }
.wg-line--cog { stroke: var(--wg-red); stroke-width: 2.6; }
.wg-line--ahead { stroke-dasharray: 7 5; stroke-linecap: butt; }
.wg-model { fill: var(--paper); stroke-width: 1.6; }
.wg-model--pre { stroke: var(--wg-blue); }
.wg-model--post { stroke: var(--wg-blue-light); }
.wg-model-name { fill: var(--ink); font: 400 11px/1 var(--wg-label); letter-spacing: .02em; }
.wg-head { stroke: var(--paper); stroke-width: 1.4; }
.wg-head--pre { fill: var(--wg-blue); }
.wg-head--post { fill: var(--wg-blue-light); }
.wg-head--cog { fill: var(--wg-red); }
.wg-series { font: 400 10.5px/1 var(--wg-label); letter-spacing: .1em; }
.wg-series--pre { fill: var(--wg-blue); }
.wg-series--post { fill: var(--wg-blue-light-text); }
.wg-series--cog { fill: var(--wg-red-text); }
.wg-era { font: 400 10.5px/1 var(--wg-label); letter-spacing: .16em; }
.wg-era--learn { fill: var(--wg-blue); }
.wg-era--search { fill: var(--wg-red-text); }
.wg-share { font: 400 10.5px/1 var(--wg-label); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.wg-guide { stroke: var(--ink); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 1.5 3; }
.wg-now { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1; }
.wg-hatch { stroke: var(--ink); stroke-opacity: .09; stroke-width: 1; }
.wg-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.wg-chart--compact :is(.wg-tick-label, .wg-model-name, .wg-era) { font-size: 10px; }
.wg-chart--compact .wg-era { letter-spacing: .06em; }
/* On narrow screens the curves are named in a key under the chart. */
.wg-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; color: var(--muted-text); font: 400 0.58rem/1.2 var(--wg-label); letter-spacing: .14em; text-transform: uppercase; }
.wg-key span { display: inline-flex; align-items: center; gap: 8px; }
.wg-key .wg-line { stroke-width: 2.2; }
/* Room for "100%" from the start, so the key never reflows as its shares change. */
.wg-key-share { display: inline-block; min-width: 4.4em; margin-left: -2px; color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Figure 11: one figure in two panels, as in the first insight of the evals page: the scaling axes at the
   left, narrower, and the plot at the right, each centred on the other; stacked on narrow screens. The
   axes start faint. Red is GPT-5.2 scaling reasoning, in the red of the DCA points before; green is
   test-time cognition, in the evals page's green (--ins-ttc in evals-insights.20261013.css). */
.wg-scaling {
  --wg-gray: color-mix(in srgb, var(--ink) 40%, var(--paper));
  --wg-green: #3e7052;
  --wg-green-text: #3e644c;
}
@media screen {
  html[data-theme="dark"] .wg-scaling {
    --wg-green: #75b68c;
    --wg-green-text: #94cda7;
  }
}
.wg-scaling-panels { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 480px); justify-content: center; gap: 28px 48px; align-items: center; }
.wg-scaling-axes { width: 100%; max-width: 340px; margin: 0 auto; }
.wg-scaling-plot { width: 100%; min-width: 0; max-width: 480px; margin: 0 auto; }
.wg-scaling .wg-legend { margin-top: 18px; }
@media (max-width: 900px) {
  .wg-scaling-panels { grid-template-columns: minmax(0, 1fr); }
}
.wg-axes-faint { opacity: .26; }
.wg-axes-flat { stroke: var(--wg-gray); stroke-width: 1.75; stroke-linecap: round; }
.wg-axes-name { fill: var(--muted-text); font: 500 11px/1 var(--wg-label); letter-spacing: .14em; }
.wg-axes-name--reasoning { fill: var(--wg-red-text); }
.wg-axes-name--ttc { fill: var(--wg-green-text); }
.wg-axes-grow { stroke-width: 2.75; stroke-linecap: round; }
.wg-axes-grow--reasoning { stroke: var(--wg-red); }
.wg-axes-grow--ttc { stroke: var(--wg-green); }
.wg-axes-goal circle, .wg-axes-goal path { fill: none; stroke: var(--wg-green); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.wg-axes-goal circle { fill: var(--paper); }
.wg-axes-origin { fill: var(--ink); }
.wg-sc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wg-sc-line--reasoning { stroke: var(--wg-red); }
.wg-sc-line--ttc { stroke: var(--wg-green); stroke-width: 2.4; }
.wg-sc-dot { stroke: var(--paper); stroke-width: 1.5; }
.wg-sc-dot--reasoning { fill: var(--wg-red); }
.wg-sc-dot--ttc { fill: var(--wg-green); }
.wg-sc-name { font: 400 11px/1 var(--wg-label); letter-spacing: .02em; }
.wg-sc-name--reasoning { fill: var(--wg-red-text); }
.wg-sc-name--ttc { fill: var(--wg-green-text); font-size: 11.5px; }
.wg-chart--compact .wg-sc-name { font-size: 10px; }

/* Cost against success rate (Figures 13 and 14, in the appendix): the baselines and their frontiers recede in grey, and
   the change each figure is about is a vivid blue, brighter than the path blue so it stands out from
   everything else. The point before the change is hollow, the point after it filled. */
.wg-cost-art {
  --wg-gray: color-mix(in srgb, var(--ink) 40%, var(--paper));
  --wg-vivid: #1f6feb;
  --wg-vivid-text: #1a5fd0;
}
@media screen {
  html[data-theme="dark"] .wg-cost-art {
    --wg-vivid: #5ea4ff;
    --wg-vivid-text: #85baff;
  }
}
.wg-cost-frontier { fill: none; stroke: var(--wg-gray); stroke-width: 1.8; stroke-dasharray: 6 4; }
.wg-cost-base { fill: color-mix(in srgb, var(--wg-gray) 45%, var(--paper)); stroke: var(--wg-gray); stroke-width: 1.4; }
.wg-cost-name { fill: var(--muted-text); font: 400 11px/1 var(--wg-label); letter-spacing: .02em; }
.wg-cost-name--on { fill: var(--wg-vivid-text); font-weight: 500; }
.wg-cost-before { fill: var(--paper); stroke: var(--wg-vivid); stroke-width: 2; }
.wg-cost-after { fill: var(--wg-vivid); stroke: var(--paper); stroke-width: 1.5; }
.wg-cost-arrow { stroke: var(--wg-vivid); stroke-width: 2; stroke-linecap: round; }
.wg-cost-head { fill: var(--wg-vivid); }
.wg-cost-gain { fill: var(--wg-vivid-text); font: 500 11px/1 var(--wg-label); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.wg-chart--compact :is(.wg-cost-name, .wg-cost-gain) { font-size: 10px; }
.wg-cost-art .wg-legend { margin-top: 18px; }
.wg-key-base { fill: color-mix(in srgb, var(--wg-gray) 45%, var(--paper)); stroke: var(--wg-gray); stroke-width: 1.3; }
.wg-key-frontier { stroke: var(--wg-gray); stroke-width: 1.8; stroke-dasharray: 4 2.5; stroke-linecap: butt; }
.wg-icon--change { width: 34px; }

/* Figure 12: the homepage's Cognition figure, styled by hypothesis-figures.20261008.css. Its labels are
   set in the homepage's --mono, and it is drawn about as large as on the homepage, so they read at the
   same size: up to 640px wide, and 460px where that stylesheet enlarges them for phones. */
.wg-cognition { --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.wg-cognition .hypothesis-figure { max-width: 640px; margin: 0 auto 1.5rem; padding-block: 8px 0; }
.wg-cognition .hypothesis-figure .hf-svg { height: auto; }
@media (max-width: 760px) {
  .wg-cognition .hypothesis-figure { max-width: 460px; }
}

/* Under the figure, a button to pause, play or replay it, and its steps, each a button that plays
   from there, with a line that fills as the step plays (as in robotics-figures.20261014.css). */
.wg-controls { display: flex; align-items: flex-start; gap: 16px; margin-top: 18px; }
.wg-toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.wg-toggle:hover { border-color: var(--ink); }
.wg-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.wg-toggle .wg-icon-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.wg-steps { display: flex; flex: 1 1 auto; gap: 12px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.wg-steps li { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }
.wg-steps li::before, .wg-steps li::marker { content: none; }
.wg-step {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 0 4px;
  border: 0;
  background: none;
  color: var(--muted-text);
  font: 400 0.58rem/1.2 var(--wg-label);
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.wg-step:hover, .wg-step[aria-current="step"] { color: var(--ink); }
.wg-step-name { display: flex; gap: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wg-step-n { color: var(--muted); }
.wg-step-track { display: block; height: 2px; overflow: hidden; background: var(--rule); }
.wg-step-fill { display: block; height: 100%; background: var(--muted); transform: scaleX(0); transform-origin: left center; }
.wg-step[aria-current="step"] .wg-step-fill { background: var(--ink); }
.wg-toggle:focus-visible, .wg-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wg-noscript { margin: 18px 0 0; color: var(--muted-text); font: 400 0.85rem/1.5 var(--wg-sans); text-align: center; }

.article-body .wg-figure:not(.wg-figure-excerpt) figcaption {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
  font-size: 0.82rem;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--muted-text);
}

/* Borrowed figures: a card on the page, plot on white inside (like a paper excerpt). */
.wg-figure-excerpt {
  --wg-excerpt-frame: color-mix(in srgb, var(--rule) 72%, var(--ink));
  --wg-excerpt-divider: color-mix(in srgb, var(--rule) 65%, transparent);
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--wg-excerpt-frame);
  border-radius: 4px;
  background: color-mix(in srgb, var(--paper) 90%, var(--ink));
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent),
    0 10px 28px color-mix(in srgb, var(--ink) 5%, transparent);
}
/* Breakout centering lives on .figure-breakout.wg-figure-excerpt-row (not on the card).
   Transform on the same element as the border clips top/bottom strokes when the card is wide. */
.wg-figure-excerpt-row--solo > .wg-figure-excerpt {
  width: 100%;
}

/* Excerpt plots must fill the card (site-wide blog img rule caps at 720px). */
.blog-post .post-wrap .wg-figure-excerpt-art .wg-figure-photo {
  max-width: none;
  width: 100%;
  margin: 0;
}

/* Figure 2, and Figures 3 and 4 beside each other: a wider breakout, so the plots' small type reads. */
.figure-breakout.wg-figure-excerpt-row--wide {
  width: min(1440px, calc(100vw - 48px));
}
.wg-figure-excerpt-row--fig2 .wg-figure-excerpt-art {
  padding: 16px 20px 18px;
}
.wg-figure-excerpt-art {
  padding: 12px 14px 14px;
  background: #fff;
  line-height: 0;
  border-bottom: 1px solid var(--wg-excerpt-divider);
}
/* The source tab across the top of the card, in the caption's band, linking to where the plot is from. */
.wg-figure-source {
  padding: 9px 18px 10px;
  border-bottom: 1px solid var(--wg-excerpt-divider);
  color: var(--muted-text);
  font: 400 0.72rem/1.4 var(--wg-label);
  letter-spacing: 0.06em;
}
.article-body .wg-figure-source a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-body .wg-figure-source a:hover { color: var(--ink); }
.wg-figure-source a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.article-body figure.wg-figure-excerpt > figcaption {
  max-width: none;
  margin: 0;
  padding: 14px 18px 17px;
  font-size: 0.82rem;
  line-height: 1.65;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--muted-text);
}
.wg-figure-excerpt-row {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}
.wg-figure-excerpt-row .wg-figure-excerpt {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wg-figure-excerpt-row .wg-figure-excerpt > figcaption {
  flex: 1 1 auto;
}

/* Placeholder slots for figures not yet illustrated. */
.wg-figure-slot {
  display: grid;
  place-items: center;
  min-height: 200px;
  margin: 0;
  padding: 28px 20px;
  border: 1px dashed var(--rule);
  border-radius: 2px;
  background: color-mix(in srgb, var(--paper) 94%, var(--ink));
  text-align: center;
}
.wg-figure-slot-label {
  color: var(--muted-text);
  font: 400 0.58rem/1.3 var(--wg-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wg-figure-photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Paired cards share their rows (source tab, plot, caption), so the tabs and captions line up and the
   shorter plot sits centred in the height of the taller one. */
.wg-figure-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: 28px;
}
/* Figure 3 is nearly square and Figure 4 three times as wide as it is tall; this split keeps their
   plots close in height. */
.wg-figure-pair--o1 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr);
}
.wg-figure-pair .wg-figure-excerpt {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  height: auto;
  min-width: 0;
}
.wg-figure-pair .wg-figure-excerpt-art {
  display: grid;
  align-content: center;
}
@media (max-width: 640px) {
  .wg-figure-pair,
  .wg-figure-pair--o1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .wg-figure-pair .wg-figure-excerpt { grid-row: auto; grid-template-rows: none; }
  .wg-figure-pair .wg-figure-excerpt + .wg-figure-excerpt { margin-top: 20px; }
}

.wg-data-table {
  width: 100%;
  margin: 1.35rem 0 1.75rem;
  border-collapse: collapse;
  font: 400 0.9rem/1.55 var(--wg-sans);
}
.wg-data-table th,
.wg-data-table td {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.wg-data-table th {
  color: var(--muted-text);
  font: 400 0.58rem/1.3 var(--wg-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Static bar figures (Figures 5 to 7): allocated compute as horizontal bars. Pre-training is the deeper
   blue and RL post-training the lighter, as in Figure 1; the stages between them are ink. A segment's
   share is --w (stacked to 100%), or --v against the chart's --max (the Grok chart). */
.wg-bars {
  --wg-mid: color-mix(in srgb, var(--ink) 52%, var(--paper));
  --wg-long: color-mix(in srgb, var(--ink) 28%, var(--paper));
  --wg-on-light: #14324f;  /* type on the light blue, which is light in both themes */
  --wg-axis: color-mix(in srgb, var(--ink) 55%, transparent);
  margin-bottom: 10px;
}
.wg-bars-stats { display: flex; justify-content: space-between; gap: 12px 24px; margin-bottom: 12px; }
.wg-stat { display: grid; gap: 5px; min-width: 0; }
.wg-stat--end { text-align: right; }
.wg-stat-name { font: 400 0.58rem/1.2 var(--wg-label); letter-spacing: 0.14em; text-transform: uppercase; }
.wg-stat-name--pre { color: var(--wg-blue); }
.wg-stat-name--rl { color: var(--wg-blue-light-text); }
.wg-stat-value { color: var(--ink); font: 400 1.7rem/1.05 var(--wg-sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.wg-stat-unit { color: var(--muted-text); font: 400 0.76rem/1.3 var(--wg-sans); }

.wg-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font: 400 11px/1 var(--wg-label);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wg-seg--pre { background: var(--wg-blue); color: var(--paper); }
.wg-seg--mid { background: var(--wg-mid); }
.wg-seg--long { background: var(--wg-long); }
.wg-seg--rl { background: var(--wg-blue-light); color: var(--wg-on-light); }
.wg-stack { display: flex; gap: 2px; height: 30px; }
.wg-stack .wg-seg { flex: var(--w) 1 0; min-width: 3px; }
.wg-stack .wg-seg:first-child { border-radius: 2px 0 0 2px; }
.wg-stack .wg-seg:last-child { border-radius: 0 2px 2px 0; }
.wg-bars .wg-key { margin-top: 14px; }
.wg-swatch { width: 10px; height: 10px; border-radius: 1px; }
.wg-bars-share { color: var(--ink); font-variant-numeric: tabular-nums; }

/* The Grok chart: one row per model, named on the left, its bar growing right from the origin line. The
   track's right padding keeps room for the 10× labels past the longest bar. */
.wg-hbars { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); column-gap: 16px; }
.wg-hbar { display: contents; }
.wg-hbar-label { display: grid; align-content: center; gap: 4px; padding: 11px 0; text-align: right; }
.wg-hbar-name { color: var(--ink); font: 400 0.9rem/1.2 var(--wg-sans); }
.wg-hbar-phase { color: var(--muted-text); font: 400 0.54rem/1.3 var(--wg-label); letter-spacing: 0.12em; text-transform: uppercase; }
.wg-hbar-track { display: flex; align-items: center; min-width: 0; padding: 11px 3.4rem 11px 0; border-left: 1.2px solid var(--wg-axis); }
.wg-hbar-track .wg-seg { flex: none; width: calc(var(--v) / var(--max) * 100%); height: 24px; }
.wg-hbar-track .wg-seg--rl { box-shadow: inset 2px 0 0 var(--paper); }
.wg-x10 { flex: none; margin-left: 12px; color: var(--ink); font: 400 1.15rem/1 var(--wg-sans); }
.wg-hbar-axis { position: relative; grid-column: 2; height: 24px; border-top: 1.2px solid var(--wg-axis); }
.wg-hbar-axis::after {
  content: "";
  position: absolute;
  top: -4.6px;
  right: -1px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--wg-axis);
}
.wg-hbar-axis span {
  position: absolute;
  top: 9px;
  right: 0;
  color: var(--muted-text);
  font: 400 0.54rem/1 var(--wg-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .wg-stat-value { font-size: 1.35rem; }
  .wg-hbars { grid-template-columns: minmax(0, 6.6rem) minmax(0, 1fr); column-gap: 10px; }
  .wg-hbar-name { font-size: 0.8rem; }
  .wg-hbar-phase { font-size: 0.5rem; letter-spacing: 0.08em; }
  .wg-hbar-track { padding-right: 2.6rem; }
  .wg-hbar-track .wg-seg { height: 20px; }
  .wg-x10 { margin-left: 8px; }
}

.mr-formula { white-space: nowrap; }
.mr-formula .mr-var { font-size: 1.08em; line-height: 1; letter-spacing: 0; }
.blog-post .article-body .mr-formula--display {
  margin: 1.1rem 0 1.35rem;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

@media print {
  .wg-art { break-inside: avoid; }
  .wg-seg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .wg-controls { display: none; }
  .wg-figure-slot { min-height: 120px; }
  .wg-figure-excerpt {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid var(--rule);
  }
  .wg-figure-excerpt-art { background: #fff; }
}