/* Figures for "Noisy MoE Routing for Efficient Search", drawn by
   scripts/build_moe_router_figures.py in the language of the homepage figures. A search space is a
   faint forest whose branches thin toward the rim; the model's own samples are a deeper sage until
   they end, red on a wrong answer and blue on the right one. Ink is the computation the stock router
   recruits, sage is what it has learned, and green is what the perturbed router changes. Apart from
   the red and blue, every colour is a site theme token, so both themes work. */

.mr-art {
  --mr-likely: color-mix(in srgb, rgb(var(--field-glow-rgb)) 64%, var(--ink));  /* the model's own samples */
  --mr-wrong: #c45a4a;  /* the red and blue of the sweep charts (--mr-fsweep-stock, --mr-eval-blue); keep them in step */
  --mr-right: #356aa2;
  --mr-label: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --mr-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 0 0.4rem;
}
/* As on the homepage, the graphics keep their hues in the dark theme, lightened for a dark ground. */
@media screen {
  html[data-theme="dark"] .mr-art {
    --coral: #eb8b61;
    --accent: #75b68c;
    --accent-text: #94cda7;
    --field-glow-rgb: 181,194,132;
    --mr-likely: rgb(var(--field-glow-rgb));
    --mr-wrong: #e88a7a;
    --mr-right: #83b6ef;
  }
}
.mr-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Panels side by side, each with its name and a line under it; stacked on narrow screens. */
.mr-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; }
.mr-panel { min-width: 0; }
.mr-panel-label { display: grid; gap: 5px; margin-top: 12px; text-align: center; }
.mr-panel-name { color: var(--ink); font: 400 0.62rem/1.3 var(--mr-label); letter-spacing: 0.16em; text-transform: uppercase; }
.mr-panel-note { color: var(--muted-text); font: 400 0.84rem/1.4 var(--mr-sans); }
.mr-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin-top: 22px;
  color: var(--muted-text);
  font: 400 0.58rem/1.2 var(--mr-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mr-legend span { display: inline-flex; align-items: center; gap: 8px; }
.mr-icon { width: 16px; height: 16px; overflow: visible; }
@media (max-width: 700px) {
  .mr-panels { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* The search space, as on the homepage but fainter, so the branches no sample has explored recede:
   each band of branches carries its own opacity. */
.mr-tw { fill: none; stroke: var(--ink); }
.mr-tw--1 { opacity: .4; stroke-width: 1.25; }
.mr-tw--2 { opacity: .32; stroke-width: 1.05; }
.mr-tw--3 { opacity: .25; stroke-width: .85; }
.mr-tw--4 { opacity: .19; stroke-width: .7; }
.mr-knot { fill: var(--ink); fill-opacity: .35; }
.mr-root { fill: var(--ink); }
.mr-ray { fill: none; stroke: rgb(var(--field-glow-rgb)); stroke-width: .9; stroke-opacity: .55; }

/* A sample from the model follows its own priors, in a deeper sage (its color, where a trace starts),
   and turns red on a wrong answer or blue on the right one. Samples that retrace the same branches
   darken them. */
.mr-sample { color: var(--mr-likely); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-opacity: .8; }
.mr-sample--wrong { stroke: var(--mr-wrong); }
.mr-sample--right { stroke: var(--mr-right); stroke-opacity: 1; }
.mr-goal circle { fill: var(--paper); stroke: var(--mr-right); stroke-width: 1.5; }
.mr-goal path { fill: none; stroke: var(--mr-right); stroke-width: 1.7; }
.mr-miss circle { fill: var(--paper); stroke: var(--mr-wrong); stroke-width: 1.5; }
.mr-miss path { fill: none; stroke: var(--mr-wrong); stroke-width: 1.7; }
/* Where the right answer was, though no sample reached it. */
.mr-truth { fill: none; stroke: var(--mr-right); stroke-width: 1.5; stroke-dasharray: 2.6 2.6; }
.mr-count { fill: var(--muted-text); font: 400 11px/1 var(--mr-label); letter-spacing: .04em; }

/* Routing, in the language of the homepage's Test Time Cognition graphic. Each stage is a card with
   its name inside; the router's is tinted sage, for what it has learned. An expert is a node: filled
   in ink when the router recruits it, dashed out when it sits unused. */
.mr-card { fill: var(--cream); stroke: var(--rule); stroke-width: 1; }
.mr-card--router {
  fill: color-mix(in srgb, rgb(var(--field-glow-rgb)) 24%, var(--cream));
  stroke: color-mix(in srgb, rgb(var(--field-glow-rgb)) 60%, var(--rule));
}
.mr-link { fill: none; stroke: var(--ink); stroke-opacity: .6; stroke-width: 1.2; }
.mr-score { fill: none; stroke: rgb(var(--field-glow-rgb)); stroke-width: 1; }
.mr-pick { fill: none; stroke: var(--ink); stroke-opacity: .8; stroke-width: 1.5; }
.mr-expert { fill: var(--paper); stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.1; }
.mr-active { fill: var(--ink); fill-opacity: .88; }
.mr-ghost { fill: none; stroke: var(--ink); stroke-opacity: .32; stroke-width: 1; stroke-dasharray: 2 2.2; }

/* The perturbed router: ΔW outlines the router in green, an expert recruited only because of it is
   green, and each logit's gain is capped in green and its loss left as a dashed outline. */
.mr-active--new { fill: var(--accent); fill-opacity: 1; }
.mr-card-dw { fill: var(--accent); fill-opacity: .08; stroke: var(--accent); stroke-width: 1.5; }
.mr-bar { fill: rgb(var(--field-glow-rgb)); fill-opacity: .5; }
.mr-bar-on { fill: var(--ink); fill-opacity: .82; }
.mr-bar-new { fill: var(--accent); }
.mr-gain { fill: var(--accent); }
.mr-loss { fill: none; stroke: var(--ink); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 2.5 2.5; }
.mr-axis { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: 1; }
.mr-cut { fill: none; stroke: var(--ink); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 4 3; }
.mr-math { fill: var(--ink); font: italic 400 17px/1 Georgia, "Times New Roman", serif; }
.mr-math-dw { fill: var(--accent-text); }
.mr-panel-note .mr-var { font-family: Georgia, "Times New Roman", serif; font-size: 1.08em; }

/* Expert pools, drawn to scale: one dot per expert, at its own size wherever there is room. */
.mr-idle { fill: none; stroke: var(--ink); stroke-opacity: .34; stroke-width: .8; }
.mr-on { fill: var(--ink); }
/* The pools keep their own sizes (--w), so they stay to scale; where room is short, their labels
   wrap. Stacked on a screen narrower than the widest pool, each is drawn at its share of the
   widest's size (--f), so they shrink together. */
.mr-panels--pools { display: flex; justify-content: space-evenly; align-items: flex-end; gap: 30px 24px; }
.mr-panel--pool { display: flex; flex: 0 1 auto; flex-direction: column; align-items: center; }
.mr-panel--pool .mr-svg { flex: none; width: var(--w); height: auto; }
.mr-panel--pool .mr-panel-label { text-wrap: balance; }
@media (max-width: 900px) {
  .mr-panels--pools { gap: 30px 14px; }
}
@media (max-width: 720px) {
  .mr-panels--pools { flex-direction: column; align-items: stretch; }
  .mr-panel--pool .mr-svg { width: min(var(--w), calc(var(--f) * 100%)); }
}

/* The intervention probability: a slider over a grid of routing decisions, each in faint ink, or in
   green while it uses the perturbed router. */
.mr-track { fill: none; stroke: var(--ink); stroke-opacity: .35; stroke-width: 2; }
.mr-tick { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.2; }
.mr-handle { fill: var(--paper); stroke: var(--accent); stroke-width: 2; }
.mr-stock { fill: var(--ink); fill-opacity: .1; }
.mr-hit { fill: var(--accent); }
.mr-hits { fill: none; stroke: var(--accent); stroke-linecap: butt; }  /* each cell a stroke as wide as the cell */
.mr-readout { font-size: 19px; }
.mr-sub { font-size: .7em; }
.mr-value { fill: var(--accent-text); font: 400 16px/1 var(--mr-label); }
@media (max-width: 760px) {
  .mr-art--scaled .mr-readout { font-size: 23px; }
  .mr-art--scaled .mr-value { font-size: 19px; }
}
@media (max-width: 480px) {
  .mr-art--scaled .mr-readout { font-size: 28px; }
  .mr-art--scaled .mr-value { font-size: 23px; }
}

/* Labels in the graphic: a stage's name in mono capitals, with a note under it in the heading
   face. They are drawn in the graphic's own units. A drawing that spans the column alone is drawn
   smaller on narrow screens, so there they are set larger to stay legible; panels stack instead. */
.mr-tag { fill: var(--ink); font: 400 11px/1 var(--mr-label); letter-spacing: 1.2px; }
.mr-tag--small { fill: var(--muted-text); font-size: 9.5px; letter-spacing: 1px; }
.mr-note { fill: var(--muted-text); font: 400 12.5px/1 var(--mr-sans); letter-spacing: 0; }
.mr-var { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.25em; letter-spacing: 0; }
@media (max-width: 760px) {
  .mr-art--scaled .mr-tag { font-size: 14px; letter-spacing: 1px; }
  .mr-art--scaled .mr-tag--small { font-size: 12.5px; }
  .mr-art--scaled .mr-note { font-size: 15.5px; }
}
@media (max-width: 480px) {
  .mr-art--scaled .mr-tag { font-size: 18px; letter-spacing: .8px; }
  .mr-art--scaled .mr-tag--small { font-size: 16px; }
  .mr-art--scaled .mr-note { font-size: 20px; }
}
@media (max-width: 360px) {
  .mr-art--scaled .mr-tag { font-size: 20px; }
  .mr-art--scaled .mr-tag--small { font-size: 18px; }
  .mr-art--scaled .mr-note { font-size: 22px; }
}
/* A name inside a box grows only as far as its box allows. */
@media (max-width: 760px) {
  .mr-art--scaled .mr-tag--in { font-size: 14px; }
  .mr-art--scaled .mr-note--in { font-size: 14.5px; }
}
@media (max-width: 480px) {
  .mr-art--scaled .mr-tag--in { font-size: 16px; }
  .mr-art--scaled .mr-note--in { font-size: 16px; }
}

/* Marks the still never shows: they appear only while a figure plays. */
.mr-transient { opacity: 0; }

/* While a figure plays, each mark that moves plays its step once. Its class names the kind of step
   (mr-a-draw, -pop, -in, -pulse, -blink, -trace, -grow, -shift) and it carries its start, length and
   easing as --t, --d and --e, set by the builder; a blink also goes again at --t2 over --d2, and a
   trace (a line drawing itself) turns from its color to its own stroke at --t2 over --d2. Each
   step's first frame holds until it starts, and its last frame is the still, apart from a shift,
   which holds until the figure stops playing. */
@media screen and (prefers-reduced-motion: no-preference) {
  .mr-art.is-playing .mr-a {
    animation-delay: var(--t, 0s);
    animation-duration: var(--d, .4s);
    animation-timing-function: var(--e, ease);
    animation-fill-mode: both;
    transform-box: fill-box;
    transform-origin: center;
  }
  .mr-art.is-playing .mr-a-draw { animation-name: mr-draw; stroke-dasharray: 1; }
  .mr-art.is-playing .mr-a-pop { animation-name: mr-pop; animation-timing-function: var(--e, ease-out); }
  .mr-art.is-playing .mr-a-in { animation-name: mr-in; }
  .mr-art.is-playing .mr-a-pulse { animation-name: mr-pulse; }
  .mr-art.is-playing .mr-a-blink {
    animation-name: mr-show, mr-hide;
    animation-delay: var(--t, 0s), var(--t2, 1s);
    animation-duration: var(--d, .2s), var(--d2, .2s);
    animation-fill-mode: both, forwards;
  }
  .mr-art.is-playing .mr-a-trace {
    animation-name: mr-draw, mr-turn;
    animation-delay: var(--t, 0s), var(--t2, 1s);
    animation-duration: var(--d, .4s), var(--d2, .3s);
    stroke-dasharray: 1;
  }
  .mr-art.is-playing .mr-a-grow { animation-name: mr-grow; transform-origin: center bottom; }
  .mr-art.is-playing .mr-a-shift { animation-name: mr-shift; }
  .mr-art.is-paused .mr-a { animation-play-state: paused; }
}
@keyframes mr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mr-pop { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes mr-in { from { opacity: 0; } }
@keyframes mr-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes mr-hide { from { opacity: 1; } to { opacity: 0; } }
/* From currentColor rather than a variable: Chromium starts a variable holding a color-mix() at black. */
@keyframes mr-turn { from { stroke: currentColor; } }
@keyframes mr-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.7); } }
/* A bar grows from --s of its height (0 by default) to its full height. */
@keyframes mr-grow { from { transform: scaleY(var(--s, 0)); } }
/* A mark moves --x, --y on from where it is. */
@keyframes mr-shift { to { transform: translate(var(--x, 0px), var(--y, 0px)); } }

@media print {
  .mr-art { break-inside: avoid; }
}

/* Pass@k chart (Figure 1): 480×380 viewBox; full column width (1.5× the prior ⅔-width layout, same aspect). */
.mr-art--pass-at-k .mr-pass-svg {
  width: 100%;
  aspect-ratio: 480 / 380;
  margin-inline: auto;
}
.mr-art--pass-at-k {
  --mr-eval-blue: #356aa2;
  cursor: crosshair;
  position: relative;
}
@media screen {
  html[data-theme="dark"] .mr-art--pass-at-k {
    --mr-eval-blue: #83b6ef;
  }
}
.mr-pass-svg { touch-action: none; }
.mr-pass-axis { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.2; }
.mr-pass-grid { fill: none; stroke: var(--ink); stroke-opacity: 0.12; stroke-width: 1; }
.mr-pass-tick {
  fill: var(--muted-text);
  font: 400 11px/1 var(--mr-label);
  letter-spacing: 0.04em;
}
.mr-pass-tick--y { font-variant-numeric: tabular-nums; }
.mr-pass-axis-label {
  fill: var(--muted-text);
  font: 400 11px/1 var(--mr-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mr-pass-band { display: none; }
.mr-pass-line { fill: none; stroke-width: 2.2; }
.mr-pass-line--baseline { stroke: var(--muted); stroke-opacity: 0.55; }
.mr-pass-line--perturbed { stroke: var(--mr-eval-blue); }
.mr-pass-crosshair {
  stroke: var(--ink);
  stroke-opacity: 0.35;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.mr-pass-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 14px;
  font: 400 0.58rem/1.2 var(--mr-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-text);
}
.mr-pass-key { display: inline-flex; align-items: center; gap: 8px; }
.mr-pass-key::before {
  content: "";
  width: 22px;
  height: 0;
  border-top: 2.2px solid var(--muted);
  opacity: 0.55;
}
.mr-pass-key--baseline::before { border-color: var(--muted); opacity: 0.55; }
.mr-pass-key--perturbed::before { border-color: var(--mr-eval-blue); opacity: 1; }
.mr-pass-tip {
  position: absolute;
  z-index: 2;
  min-width: 168px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.72rem/1.45 var(--mr-sans);
  box-shadow: 0 8px 28px rgb(0 0 0 / 8%);
  pointer-events: none;
}
.mr-pass-tip strong {
  display: block;
  margin-bottom: 6px;
  font: 400 0.58rem/1.2 var(--mr-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-text);
}
.mr-pass-tip dl { margin: 0; display: grid; gap: 4px; }
.mr-pass-tip dt { font-weight: 600; }
.mr-pass-tip dd { margin: 0 0 0 0.5em; color: var(--muted-text); font-size: 0.92em; }
@media (max-width: 560px) {
  .mr-pass-tick, .mr-pass-axis-label { font-size: 10px; }
}

/* Per-problem Δ log-success (Figures 8–11) */
.mr-art--problem-delta {
  --mr-delta-pos: #3d7a52;
  --mr-delta-neg: #b54a4a;
  --mr-delta-line: var(--mr-eval-blue, #356aa2);
  width: 100%;
  margin-inline: auto;
}
.mr-problem-delta-chart {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 300;
  cursor: crosshair;
}
.mr-problem-delta-chart--win-counts {
  cursor: default;
}
.mr-problem-delta-zero--vertical {
  stroke-dasharray: none;
  stroke-opacity: 0.35;
  stroke-width: 1.2;
  stroke: var(--ink);
  fill: none;
}
.mr-problem-delta-tick--row {
  font-size: 11px;
  fill: var(--ink);
  fill-opacity: 0.85;
}
.mr-problem-delta-win-count {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--ink);
}
.mr-art--problem-delta:not(.mr-problem-delta--ready) {
  min-height: 200px;
  background: linear-gradient(90deg, var(--rule) 0%, transparent 50%, var(--rule) 100%);
  background-size: 200% 100%;
  animation: mr-problem-delta-shimmer 1.2s ease-in-out infinite;
}
@keyframes mr-problem-delta-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.mr-art--problem-delta.mr-problem-delta--error {
  animation: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--muted-text);
  font: 400 0.85rem/1.4 var(--mr-sans);
  cursor: default;
}
@media screen {
  html[data-theme="dark"] .mr-art--problem-delta {
    --mr-delta-pos: #6fbf8a;
    --mr-delta-neg: #e07a7a;
    --mr-delta-line: #83b6ef;
  }
}
.mr-problem-delta-svg {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 720 / 300;
  touch-action: none;
}
.mr-problem-delta-axis { stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.2; }
.mr-problem-delta-grid { stroke: var(--ink); stroke-opacity: 0.1; stroke-width: 1; }
.mr-problem-delta-zero { stroke: var(--ink); stroke-opacity: 0.28; stroke-width: 1; stroke-dasharray: 4 3; }
.mr-problem-delta-bar--pos { fill: var(--mr-delta-pos); }
.mr-problem-delta-bar--neg { fill: var(--mr-delta-neg); }
.mr-problem-delta-bars--underlay .mr-problem-delta-bar--pos,
.mr-problem-delta-bars--underlay .mr-problem-delta-bar--neg {
  fill-opacity: 0.28;
}
.mr-problem-delta-cum-line { fill: none; stroke: var(--mr-delta-line); stroke-width: 2.4; }
.mr-problem-delta-crosshair {
  stroke: var(--ink);
  stroke-opacity: 0.35;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.mr-problem-delta-tick {
  fill: var(--muted-text);
  font: 400 13px/1.15 var(--mr-label);
  letter-spacing: 0.04em;
}
.mr-problem-delta-tick--y { font-variant-numeric: tabular-nums; }
.mr-problem-delta-axis-label {
  fill: var(--muted-text);
  font: 400 12px/1.15 var(--mr-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mr-problem-delta-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 12px;
  font: 400 0.72rem/1.25 var(--mr-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-text);
}
.mr-problem-delta-key { display: inline-flex; align-items: center; gap: 8px; }
.mr-problem-delta-key::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 1px;
}
.mr-problem-delta-key--pos::before { background: var(--mr-delta-pos); }
.mr-problem-delta-key--neg::before { background: var(--mr-delta-neg); }
.mr-problem-delta-key--cum::before {
  height: 0;
  border-top: 2.4px solid var(--mr-delta-line);
  background: transparent;
}
.mr-problem-delta-key--faint::before { opacity: 0.35; }
.mr-problem-delta-tip {
  position: absolute;
  z-index: 2;
  min-width: 160px;
  max-width: min(280px, 90vw);
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.8rem/1.45 var(--mr-sans);
  box-shadow: 0 8px 28px rgb(0 0 0 / 8%);
  pointer-events: none;
}
.mr-problem-delta-tip strong {
  display: block;
  margin-bottom: 6px;
  font: 400 0.68rem/1.2 var(--mr-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-text);
}
.mr-problem-delta-tip dl { margin: 0; }
.mr-problem-delta-tip dt { font-weight: 600; font-size: 0.95em; word-break: break-all; }
.mr-problem-delta-tip dd { margin: 4px 0 0; color: var(--muted-text); font-size: 0.95em; }
@media (prefers-reduced-motion: reduce) {
  .mr-art--problem-delta:not(.mr-problem-delta--ready) { animation: none; }
}

/* Intervention-frequency sweep (Figure 4) */
.mr-art--fsweep {
  --mr-eval-blue: #356aa2;
  --mr-fsweep-stock: #c45a4a;
  width: 100%;
  margin-inline: auto;
}
@media screen {
  html[data-theme="dark"] .mr-art--fsweep {
    --mr-eval-blue: #83b6ef;
    --mr-fsweep-stock: #e88a7a;
  }
}
.mr-art--fsweep:not(.mr-fsweep--ready) {
  min-height: 280px;
  background: linear-gradient(90deg, var(--rule) 0%, transparent 50%, var(--rule) 100%);
  background-size: 200% 100%;
  animation: mr-problem-delta-shimmer 1.2s ease-in-out infinite;
}
.mr-fsweep-shell { display: grid; gap: 10px; }
.mr-fsweep-kbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.mr-fsweep-kbtn {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 4px 10px;
  background: var(--paper);
  color: var(--muted-text);
  font: 400 0.58rem/1.2 var(--mr-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.mr-fsweep-kbtn[aria-selected="true"] {
  border-color: var(--mr-eval-blue);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--mr-eval-blue);
}
.mr-fsweep-chart {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 380;
  cursor: crosshair;
}
.mr-fsweep-svg { width: 100%; height: 100%; touch-action: none; overflow: visible; }
.mr-fsweep-title {
  fill: var(--ink);
  font: 600 13px/1 var(--mr-sans);
}
.mr-fsweep-axis { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.2; }
.mr-fsweep-grid { fill: none; stroke: var(--ink); stroke-opacity: 0.12; stroke-width: 1; }
.mr-fsweep-tick {
  fill: var(--muted-text);
  font: 400 11px/1 var(--mr-label);
  letter-spacing: 0.04em;
}
.mr-fsweep-tick--y { font-variant-numeric: tabular-nums; }
.mr-fsweep-pt-label {
  fill: var(--muted-text);
  font: 400 10px/1 var(--mr-sans);
  font-variant-numeric: tabular-nums;
}
.mr-fsweep-axis-label {
  fill: var(--muted-text);
  font: 400 11px/1 var(--mr-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mr-fsweep-band--fsweep { fill: var(--mr-eval-blue); fill-opacity: 0.18; stroke: none; }
.mr-fsweep-band--stock { fill: var(--mr-fsweep-stock); fill-opacity: 0.14; stroke: none; }
.mr-fsweep-line { fill: none; stroke-width: 2.2; }
.mr-fsweep-line--fsweep { stroke: var(--mr-eval-blue); }
.mr-fsweep-line--stock {
  stroke: var(--mr-fsweep-stock);
  stroke-dasharray: 6 4;
}
.mr-fsweep-dot { fill: var(--paper); stroke: var(--mr-eval-blue); stroke-width: 2; }
.mr-fsweep-dot--stock {
  fill: var(--mr-fsweep-stock);
  stroke: var(--mr-fsweep-stock);
  stroke-width: 2;
}
.mr-fsweep-crosshair {
  stroke: var(--ink);
  stroke-opacity: 0.35;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.mr-fsweep-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font: 400 0.58rem/1.2 var(--mr-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-text);
}
.mr-fsweep-key { display: inline-flex; align-items: center; gap: 8px; }
.mr-fsweep-key::before {
  content: "";
  width: 22px;
  height: 10px;
  border-radius: 1px;
}
.mr-fsweep-key--fsweep::before { background: var(--mr-eval-blue); height: 0; border-top: 2.2px solid var(--mr-eval-blue); }
.mr-fsweep-key--band::before { background: color-mix(in srgb, var(--mr-eval-blue) 22%, transparent); }
.mr-fsweep-key--stock::before {
  height: 0;
  border-top: 2.2px dashed var(--mr-fsweep-stock);
  background: transparent;
}
.mr-fsweep-tip {
  position: absolute;
  z-index: 2;
  min-width: 180px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.72rem/1.45 var(--mr-sans);
  box-shadow: 0 8px 28px rgb(0 0 0 / 8%);
  pointer-events: none;
}
.mr-fsweep-tip strong {
  display: block;
  margin-bottom: 6px;
  font: 400 0.58rem/1.2 var(--mr-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-text);
}
.mr-fsweep-tip dl { margin: 0 0 6px; }
.mr-fsweep-tip dt { font-weight: 600; font-size: 0.92em; }
.mr-fsweep-tip dd { margin: 2px 0 0; color: var(--muted-text); }
@media (prefers-reduced-motion: reduce) {
  .mr-art--fsweep:not(.mr-fsweep--ready) { animation: none; }
}

.mr-figure--fsweep-pair {
  --mr-eval-blue: #356aa2;
  --mr-fsweep-stock: #c45a4a;
}
@media screen {
  html[data-theme="dark"] .mr-figure--fsweep-pair {
    --mr-eval-blue: #83b6ef;
    --mr-fsweep-stock: #e88a7a;
  }
}
.mr-fsweep-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  align-items: start;
}
@media (max-width: 720px) {
  .mr-fsweep-pair { grid-template-columns: 1fr; }
}
.mr-figure--fsweep-pair .mr-fsweep-shell { gap: 6px; }
.mr-figure--fsweep-pair .mr-fsweep-kbar { gap: 4px; }
.mr-figure--fsweep-pair .mr-fsweep-kbtn { padding: 3px 6px; letter-spacing: 0.04em; }
.mr-figure--fsweep-pair .mr-fsweep-title { font: 600 18px/1.2 var(--mr-sans); }
.mr-figure--fsweep-pair .mr-fsweep-pt-label { font-size: 9px; }
.mr-figure--fsweep-pair > .mr-fsweep-legend { margin-top: 4px; }

/* Half-width SVG panels scale plot ink down; axis ticks/labels use px and shrink with them. */
@media (min-width: 721px) {
  .mr-figure--dose-pair .mr-pass-tick,
  .mr-figure--dose-pair .mr-pass-axis-label,
  .mr-figure--dose-pair .mr-config-bars-tick,
  .mr-figure--dose-pair .mr-config-bars-axis-label,
  .mr-figure--fsweep-pair .mr-fsweep-tick,
  .mr-figure--fsweep-pair .mr-fsweep-axis-label {
    font-size: 15px;
  }
}

.mr-pass-chart-title {
  margin-bottom: 8px;
  font: 600 13px/1.15 var(--mr-sans);
  text-align: center;
  color: var(--ink);
}

.mr-figure--dose-pair {
  --mr-eval-blue: #356aa2;
}
.mr-figure--dose-pair .mr-pass-chart-title {
  font: 600 18px/1.2 var(--mr-sans);
}
@media screen {
  html[data-theme="dark"] .mr-figure--dose-pair {
    --mr-eval-blue: #83b6ef;
  }
}
.mr-dose-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  align-items: start;
}
@media (max-width: 720px) {
  .mr-dose-pair { grid-template-columns: 1fr; }
}

.mr-art--config-bars {
  --mr-eval-blue: #356aa2;
  position: relative;
  cursor: crosshair;
}
.mr-config-bars-chart {
  position: relative;
}
.mr-config-bars-tip {
  position: absolute;
  z-index: 2;
  min-width: 168px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.72rem/1.45 var(--mr-sans);
  box-shadow: 0 8px 28px rgb(0 0 0 / 8%);
  pointer-events: none;
}
.mr-config-bars-tip strong {
  display: block;
  margin-bottom: 6px;
  font: 400 0.58rem/1.2 var(--mr-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-text);
}
.mr-config-bars-tip dl { margin: 0; }
.mr-config-bars-tip dt { font-weight: 600; font-size: 0.92em; }
.mr-config-bars-tip dd { margin: 4px 0 0; color: var(--muted-text); }
@media screen {
  html[data-theme="dark"] .mr-art--config-bars {
    --mr-eval-blue: #83b6ef;
  }
}
.mr-config-bars-svg {
  width: 100%;
  aspect-ratio: 480 / 380;
  margin-inline: auto;
  overflow: visible;
}
.mr-config-bars-shell .mr-pass-chart-title {
  margin-bottom: 4px;
}
.mr-config-bars-axis { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.2; }
.mr-config-bars-grid { fill: none; stroke: var(--ink); stroke-opacity: 0.12; stroke-width: 1; }
.mr-config-bars-tick {
  fill: var(--muted-text);
  font: 400 11px/1 var(--mr-label);
  letter-spacing: 0.04em;
}
.mr-config-bars-tick--y { font-variant-numeric: tabular-nums; }
.mr-config-bars-axis-label {
  fill: var(--muted-text);
  font: 400 11px/1 var(--mr-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mr-config-bar { stroke: none; }
.mr-config-bar--pn02 { fill: var(--mr-eval-blue); fill-opacity: 0.88; }
.mr-config-bar--stock { fill: var(--muted); fill-opacity: 0.55; }
.mr-config-bar-error {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.45;
  stroke-width: 1.4;
}

/* Reading type as on the other research articles (this stylesheet is only linked from this one).
   The sections borrow the Intelligence Is Search essay markup, so their headings are set back to the
   size of The Third Axis of Intelligence and Why Test-Time Cognition?, and figure captions are muted
   mono at the size of the frontier figure's caption on Intelligence Is Search. */
.blog-post .article-body > section > h2 {
  margin-bottom: 1.25rem;
  font-size: 1.6rem;
  line-height: 1.2;
}
.blog-post .article-body > section + section > h2 { margin-top: 4rem; }
.blog-post .article-body figure figcaption {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--muted-text);
}

/* Section numbers follow the contents list (1 to 11) and sit on their heading's first line: hung in
   the margin on wide screens, and just before the heading where there is no margin. They replace
   the numbered labels above the headings, which took a line of their own. */
.blog-post .article-body { counter-reset: mr-section; }
.blog-post .article-body > section > .section-label { display: none; }
.blog-post .article-body > section[id]:not(#references) > h2 { counter-increment: mr-section; }
.blog-post .article-body > section[id]:not(#references) > h2::before {
  content: counter(mr-section);
  margin-right: 0.8em;
  color: var(--accent-text);
  font: 400 0.75rem/1 "DM Mono", monospace;
  letter-spacing: 0.06em;
  vertical-align: middle;  /* centred on the heading's lowercase, not sat on its baseline */
}
@media (min-width: 860px) {
  .blog-post .article-body > section[id]:not(#references) > h2 { position: relative; }
  .blog-post .article-body > section[id]:not(#references) > h2::before {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: 1.4rem;
    line-height: 1.92rem;  /* the heading's line, so the number centres on its first line */
  }
}

/* Maths: variables in italic Georgia, as in the figures' notes, with numbers and operators in the
   text face. A formula never breaks across lines, and a displayed one is centred on a line of its own. */
.mr-formula { white-space: nowrap; }
.mr-formula .mr-var { font-size: 1.08em; line-height: 1; letter-spacing: 0; }  /* line height 1 keeps the line spacing even */
.blog-post .article-body .mr-formula--display {
  margin: 1.6rem 0 1.9rem;
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1.4;
  text-align: center;
}