/* Interactive figures. Every rule is scoped under .fig-live. Lettering is one size (13px) everywhere and never scales:
   horizontal positions are percentages of the plot's width, vertical positions and all lettering are CSS pixels. */
.fig-live .wf {
  --wf-ink: #40403e; --wf-soft: #87867f; --wf-grid: #e5e4df; --wf-spine: #bfbfba; --wf-black: #191919;
  position: relative; box-sizing: border-box; width: 100%; margin: 0; padding: 0;
  /* Layouts switch on the figure's own width, not the window's: the blog's text column is 704 px in windows from 1180 px, but only 512 px from 1000 px and 472 px from 768 px. */
  container: wf / inline-size;
  font: 400 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--wf-ink); text-align: left; -webkit-text-size-adjust: 100%;
}
.fig-live .wf *, .fig-live .wf *::before { box-sizing: border-box; }
.fig-live .wf svg { display: block; overflow: visible; max-width: none; }
.fig-live .wf text { font-size: 13px; fill: var(--wf-ink); }
.fig-live .wf .wf-tick { fill: var(--wf-soft); }
.fig-live .wf .wf-strong { font-weight: 700; fill: var(--wf-black); }
.fig-live .wf .wf-grid { stroke: var(--wf-grid); stroke-width: 1; }
.fig-live .wf .wf-spine { stroke: var(--wf-spine); stroke-width: 1; }
.fig-live .wf .wf-range { stroke: var(--wf-spine); stroke-width: 1.4; }
.fig-live .wf .wf-meantick { stroke: var(--wf-black); stroke-width: 2; }
.fig-live .wf .wf-err { stroke: var(--wf-ink); stroke-width: 1.4; fill: none; }
.fig-live .wf .wf-line { stroke: var(--wf-ink); stroke-width: 2.3; stroke-linecap: round; }
.fig-live .wf .wf-shape { stroke: #fff; stroke-width: 1.5; stroke-linejoin: miter; }
.fig-live .wf .wf-hit { fill: transparent; stroke: none; pointer-events: all; }
.fig-live .wf .wf-halo { paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; }

/* dot rows */
.fig-live .wf-row { display: grid; grid-template-columns: 192px minmax(0, 1fr); column-gap: 10px; align-items: center; padding-right: 18px; }
.fig-live .wf-rowlabel { text-align: right; padding-top: 8px; }
.fig-live .wf-row-total .wf-rowlabel { font-weight: 700; color: var(--wf-black); padding-top: 0; padding-bottom: 15px; }
.fig-live .wf .wf-val { opacity: 0; font-weight: 600; pointer-events: none; }
.fig-live .wf .wf-lead { stroke: var(--wf-ink); stroke-width: 1; }

/* charts with a vertical value axis: the axis lettering hangs in a fixed gutter left of the plot */
.fig-live .wf-vplot { padding: 0 4px 0 58px; }
.fig-live .wf-xlabels { position: relative; height: 24px; margin: 0 4px 0 58px; }
.fig-live .wf-xlabels > * { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.fig-live .wf-xtitle { text-align: center; margin: 0 4px 0 58px; color: var(--wf-ink); }
.fig-live .wf .wf-band { fill: transparent; pointer-events: all; }
.fig-live .wf .wf-mark:hover .wf-band, .fig-live .wf .wf-mark:focus .wf-band, .fig-live .wf .wf-mark.wf-open .wf-band { fill: rgba(64, 64, 62, 0.05); }

/* legend and other keys */
.fig-live .wf-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin-top: 10px; }
.fig-live .wf .wf-key, .fig-live .wf .wf-key-static {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px; border-radius: 4px;
  font: inherit; color: var(--wf-ink); line-height: 1.3; border: 1px solid transparent;
}
.fig-live .wf .wf-xlabels > .wf-key { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.fig-live .wf.wf-js .wf-key { cursor: pointer; }
@media (hover: hover) { .fig-live .wf.wf-js .wf-key:hover { background: #f5f4ef; } }
.fig-live .wf .wf-key[aria-pressed="true"] { background: #f0efe9; border-color: var(--wf-spine); }
.fig-live .wf .wf-key:focus-visible { outline: 2px solid #4e86c6; outline-offset: 1px; }
.fig-live .wf .wf-mark { outline: none; }
.fig-live .wf.wf-js .wf-mark { cursor: default; }
.fig-live .wf .wf-mark:focus-visible .wf-focus { stroke: #4e86c6; stroke-width: 2; }
.fig-live .wf .wf-focus { fill: none; stroke: none; pointer-events: none; }

/* highlighting */
.fig-live .wf [data-m], .fig-live .wf [data-s], .fig-live .wf .wf-val { transition: opacity 0.14s linear; }
.fig-live .wf .wf-dim { opacity: 0.16; }
.fig-live .wf .wf-key.wf-dim { opacity: 0.45; }
.fig-live .wf .wf-val.wf-dim { opacity: 0; }
.fig-live .wf .wf-val.wf-on { opacity: 1; }
.fig-live .wf .wf-key .wf-shape { stroke: none; }

/* tooltip */
.fig-live .wf-tip {
  position: absolute; z-index: 5; left: 0; top: 0; width: max-content; max-width: min(300px, 100%); padding: 6px 10px; pointer-events: none;
  background: #fff; color: var(--wf-ink); border: 1px solid var(--wf-spine); border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  font: inherit; line-height: 1.38;
}
.fig-live .wf-tip[hidden] { display: none; }
.fig-live .wf-tip span { display: block; }
.fig-live .wf-tip .wf-t1 { font-weight: 700; color: var(--wf-black); }

.fig-live .wf .wf-narrow { display: none; }
.fig-live .wf .wf-ytitle-top { display: none; margin: 0 0 8px 0; }
/* grouped bars lying down (narrow figures) */
.fig-live .wf-hbars { padding: 0 14px 0 12px; }
.fig-live .wf-hgroup .wf-key { font-weight: 600; margin: 6px 0 1px -12px; padding-left: 2px; }
.fig-live .wf-htitle { text-align: center; }

@container wf (max-width: 608px) {
  .fig-live .wf .wf-wide { display: none; }
  .fig-live .wf .wf-narrow { display: block; }
  .fig-live .wf-row { display: block; padding: 0 16px 0 8px; }
  .fig-live .wf-rowlabel, .fig-live .wf-row-total .wf-rowlabel { text-align: left; padding: 8px 0 0; margin-left: -8px; }
  .fig-live .wf-row-gap, .fig-live .wf .wf-sep { display: none; }
  .fig-live .wf-row-total { border-top: 1px solid var(--wf-spine); margin-top: 10px; }
  .fig-live .wf-row-total .wf-strip { margin-top: -8px; }
  .fig-live .wf-rowlabel br { display: none; }
  .fig-live .wf-vplot { padding-left: 44px; padding-right: 10px; }
  .fig-live .wf-xlabels, .fig-live .wf-xtitle { margin-left: 44px; margin-right: 10px; }
  .fig-live .wf .wf-ytitle { display: none; }
  .fig-live .wf .wf-ytitle-top { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .fig-live .wf [data-m], .fig-live .wf [data-s], .fig-live .wf .wf-val { transition: none; }
}

/* grouped bars: rules beyond the shared look */
.fig-live .wf-gb-stage { position: relative; }
.fig-live .wf .wf-gb-rule { stroke-width: 2; stroke-linecap: round; }
.fig-live .wf .wf-gb-head { position: absolute; transform: translateX(-50%); white-space: nowrap; padding-top: 1px; padding-bottom: 1px; }
.fig-live .wf-gb-note { position: absolute; top: 9px; right: 6px; color: var(--wf-soft); white-space: pre; }
.fig-live .wf-xlabels.wf-xlabels-2 { height: 40px; }
.fig-live .wf-xlabels.wf-xlabels-2 > * { text-align: center; }
.fig-live .wf .wf-err-thin { stroke: #777; stroke-width: 1; }
.fig-live .wf-legend.wf-legend-col { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.fig-live .wf .wf-legend .wf-key svg { flex: none; }
.fig-live .wf-gb-hlabel { font-weight: 600; margin: 6px 0 1px -12px; padding: 4px 8px 4px 2px; }
.fig-live .wf-gb-cat { margin: 0 0 0 -12px; padding-left: 2px; }
.fig-live .wf-gb-hrule { height: 2px; border-radius: 1px; margin: 0 0 3px -10px; }
.fig-live .wf-hbars .wf-gb-note { position: static; text-align: center; margin-top: 8px; white-space: normal; }
.fig-live .wf-hbars.wf-gb-roomy { padding-right: 20px; }

/* ladder, lying down (narrow figures): the levels' names hang in a fixed gutter left of the plot, the last value label in one on its right */
.fig-live .wf-lrows { padding: 0 28px 0 76px; }
.fig-live .wf-ltitle { margin: 0 0 8px 0; }

/* scatter plots */
.fig-live .wf-scatter .wf-sbox { position: relative; }
.fig-live .wf-scatter .wf-xlabels { height: 27px; }
.fig-live .wf-scatter .wf-xlabels > * { top: 7px; }
.fig-live .wf-scatter .wf-xlabels.wf-soft { color: var(--wf-soft); height: 26px; }
.fig-live .wf-scatter .wf-xlabels.wf-soft > * { top: 7px; }
.fig-live .wf .wf-xtick { stroke: var(--wf-ink); stroke-width: 1; }
.fig-live .wf .wf-sup { font-size: 9.5px; line-height: 0; vertical-align: 0.5em; }
.fig-live .wf .wf-diag { stroke: var(--wf-spine); stroke-width: 1.3; stroke-dasharray: 4 4; }
.fig-live .wf .wf-fit { stroke-width: 1.8; stroke-linecap: round; }
.fig-live .wf .wf-refline { stroke-width: 1.4; transition: stroke-width 0.14s linear; }
.fig-live .wf .wf-dashed { stroke-dasharray: 6 3; }
.fig-live .wf .wf-dotted { stroke-dasharray: 1.6 3; }
.fig-live .wf .wf-ref:hover .wf-refline, .fig-live .wf .wf-ref:focus .wf-refline, .fig-live .wf .wf-ref.wf-open .wf-refline { stroke-width: 2.2; }
.fig-live .wf-scatter .wf-pt { stroke: #fff; stroke-width: 1.1; }
.fig-live .wf .wf-dotmark:hover .wf-pt, .fig-live .wf .wf-dotmark:focus .wf-pt, .fig-live .wf .wf-dotmark.wf-open .wf-pt { stroke: var(--wf-black); stroke-width: 1.6; }
/* thin lines from the pointed-at mark to both axes */
.fig-live .wf .wf-guide { stroke: var(--wf-soft); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; pointer-events: none; transition: opacity 0.14s linear; }
.fig-live .wf .wf-mark:hover .wf-guide, .fig-live .wf .wf-mark:focus .wf-guide, .fig-live .wf .wf-mark.wf-open .wf-guide, .fig-live .wf .wf-mark.wf-on .wf-guide { opacity: 1; }
.fig-live .wf-scatter .wf-snote { position: absolute; right: 10px; bottom: 12px; max-width: calc(100% - 20px); text-align: right; text-wrap: balance; color: var(--wf-soft); pointer-events: none; background: #fff; padding: 0 3px; }

/* square plot: both axes in the same unit, so it is as tall as it is wide at every width */
.fig-live .wf .wf-sq { margin: 0 auto; }
.fig-live .wf-sq .wf-vplot { padding-top: 8px; padding-right: 16px; }
.fig-live .wf-sq .wf-xlabels, .fig-live .wf-sq .wf-xtitle { margin-right: 16px; }
.fig-live .wf .wf-sq .wf-sbox > svg { height: auto; aspect-ratio: 1 / 1; }
/* direct labels, which are the models' keys */
.fig-live .wf .wf-slabels > .wf-key { position: absolute; left: var(--x); top: var(--y); padding: 1px 5px; white-space: nowrap; color: var(--wf-black); text-shadow: -1.5px 0 #fff, 1.5px 0 #fff, 0 -1.5px #fff, 0 1.5px #fff; --dy: 0px; transform: translate(3px, calc(-50% + var(--dy))); }
.fig-live .wf .wf-slabels > .wf-key[data-side="left"] { transform: translate(calc(-100% - 3px), calc(-50% + var(--dy))); }
@container wf (max-width: 608px) {
  .fig-live .wf .wf-slabels > .wf-key { --dy: var(--ndy, 0px); }
}
/* Figures up to 448 px wide (plots under about 390 px). Wider ones, among them the blog's 512 and 472 px columns, keep the original figure's places for the note and the direct labels.
   The note would run into the lowest points, so it stands at the top right. Some direct labels stand under their marks. And there is no room at the left for a highlighted
   model's rate beside GPT-5.5's mark and Grok's label: the marks' tooltips have both rates. */
@container wf (max-width: 448px) {
  .fig-live .wf-scatter .wf-snote { top: 15px; bottom: auto; right: 4px; max-width: calc(100% - 12px); }
  .fig-live .wf .wf-slabels > .wf-key { left: var(--nx, var(--x)); top: var(--ny, var(--y)); }
  .fig-live .wf .wf-slabels > .wf-key[data-nside="below"] { transform: translate(-50%, 3px); }
  .fig-live .wf .wf-slabels > .wf-key[data-side="right"] { padding-right: 3px; }
  .fig-live .wf .wf-sq .wf-val { display: none; }
}
/* the narrowest figures: a reference line's label that would touch a point stands a little higher */
@container wf (max-width: 313px) {
  .fig-live .wf .wf-ref-lift text { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .fig-live .wf .wf-guide, .fig-live .wf .wf-refline { transition: none; }
}

/* two panels side by side; stacked in figures narrower than the full column */
.fig-live .wf-tp { display: grid; grid-template-columns: 41fr 59fr; column-gap: 14px; align-items: start; }
.fig-live .wf-tp-title { height: 26px; color: var(--wf-black); white-space: nowrap; }
.fig-live .wf-tp-a .wf-tp-title { margin-left: 58px; }
.fig-live .wf-tp-box { position: relative; }
.fig-live .wf-tp-legend { position: absolute; top: 6px; right: 4px; display: flex; flex-direction: column; align-items: flex-start; background: #fff; }
.fig-live .wf .wf-tp-legend .wf-key { padding: 2px 6px; }
.fig-live .wf-tp-a .wf-xlabels { height: 45px; }
.fig-live .wf .wf-tp-a .wf-xlabels > .wf-key { top: 5px; padding: 1px 3px; text-align: center; }
.fig-live .wf .wf-tp-centred { display: none; }
@container wf (min-width: 369px) and (max-width: 703px) {
  .fig-live .wf .wf-tp-centred { display: inline; }
  .fig-live .wf .wf-tp-flush { display: none; }
}
/* panel (b): one grid for all rows, so that the label column is as wide as its longest label */
.fig-live .wf-tp-b { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; align-items: center; padding-right: 16px; }
.fig-live .wf-tp-label, .fig-live .wf-tp-head { text-align: right; white-space: nowrap; }
.fig-live .wf-tp-head { font-weight: 700; color: var(--wf-black); margin-right: -5px; }
.fig-live .wf-tp-xtitle { display: flex; justify-content: center; }
.fig-live .wf-tp-xtitle span { flex: none; white-space: nowrap; }

/* side by side only in the full 704 px column; in a narrower one the panels are stacked. Panel (b) keeps its labels left of the bars while about 200 px are left for the bars
   (so also in the blog's 512 and 472 px columns); in narrower figures the labels stand above their bars. */
@container wf (max-width: 703px) {
  .fig-live .wf-tp { display: block; }
  .fig-live .wf-tp-b { margin-top: 26px; }
}
@container wf (max-width: 608px) {
  .fig-live .wf-tp-a .wf-tp-title { margin-left: 0; }
  .fig-live .wf-tp-a .wf-tp-title { height: auto; margin-bottom: 6px; }
}
@container wf (max-width: 430px) {
  .fig-live .wf-tp-b { display: block; margin-top: 26px; padding: 0 30px 0 8px; }
  .fig-live .wf .wf-tp-fill { display: none; }
  .fig-live .wf-tp-b .wf-tp-title, .fig-live .wf-tp-label, .fig-live .wf-tp-head { text-align: left; margin: 0 0 0 -8px; }
  .fig-live .wf-tp-b .wf-tp-title { height: auto; margin-bottom: 6px; }
  .fig-live .wf-tp-label { padding-top: 5px; }
  .fig-live .wf-tp-head { padding-top: 12px; }
}