/* ==========================================================================
   Before the First Word: the release
   The top half of the page. Anuvani-LID's results, moved here from the release
   site and set in this page's paper, ink, type and components. The charts keep
   the release site's structure, geometry and motion exactly; only the surface
   they are drawn on is the essay's.

   Colour  one blue (--bench-ours) marks Anuvani-LID and nothing else; every rival
           shares one neutral. The profile chart is the one exception: eight hues,
           one per system, in a fixed, validated order. Tokens: light in
           styles.css, dark in theme-dark.css.
   Layout  a column of its own (--bench), wide enough for the eleven-system table,
           centred on the same axis as the essay's columns. Its parts change shape
           with the column's width, not the window's (container queries):
           36rem and up is "roomy", 55rem and up is "wide".
   Motion  a mark's resting style is its finished style. release.js adds
           .is-inview when a chart scrolls into view, and only then does an
           entrance play; no script, reduced motion and print all show the
           finished chart.
   Markup  generated by tools/release/build.mjs. Edit the parts there.
   ========================================================================== */

.release {
  padding: 0 var(--gutter);
  line-height: 1.5;
}

@media (min-width: 48rem) {
  .release {
    padding-right: calc(var(--gutter) + var(--cord-room));
    padding-left: calc(var(--gutter) + var(--cord-room));
  }
}

.release__column {
  max-width: var(--bench);
  margin: 0 auto;
  container: release / inline-size;
}

.release :where(p, h1, h2, h3, h4, dl, dd, ul, ol) {
  margin: 0;
}

.release :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.release :where(em) {
  font-style: italic;
}

/* ---------- Opening: the headline, then the one figure that leads ---------- */

.release-hero {
  padding-top: clamp(2.5rem, 1.75rem + 3vw, 4rem);
}

/* the opening image: one voice, the model, twenty-three threads */
.release-hero__art {
  margin: 0;
}

.release-hero__intro {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
}

/* "introducing:" — quiet and editorial, between the art and the name */
.release-hero__eyebrow {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  color: var(--ink-soft);
  font: italic 400 1.125rem/1.4 var(--display);
}

/* the product's name is the central text of the opening */
.release-hero__name {
  margin-top: 0.625rem;
  color: var(--bench-ours-ink);
  font: 400 clamp(3rem, 1.55rem + 6.2vw, 6.25rem)/1 var(--display);
  letter-spacing: -0.024em;
  white-space: nowrap;
}

.release-hero__title {
  margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font: 400 clamp(2.75rem, 1.6rem + 3.2vw, 4rem)/1.02 var(--display);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.release-hero__lede {
  margin-top: 1.5rem;
  margin-inline: auto;
  color: var(--ink-soft);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.66;
  text-wrap: pretty;
}

/* the opening image arrives once, in the release's own timings: the voice and the
   model lift in, the connectors draw, then the 23 threads draw themselves out,
   each dot and name fading in behind its thread. The resting state is the
   finished drawing: the dash is as long as the thread, so an undrawn animation
   still shows it whole; reduced motion and print show everything finished. */
@keyframes rh-lift {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes rh-draw {
  from {
    stroke-dashoffset: var(--rh-len, 0);
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rh-fade {
  from {
    opacity: 0;
  }
}

.release-hero__art .rh-wave {
  animation: rh-lift 500ms cubic-bezier(0.22, 0.68, 0.24, 1) backwards;
}

.release-hero__art .rh-tower {
  animation: rh-lift 500ms cubic-bezier(0.22, 0.68, 0.24, 1) 150ms backwards;
}

.release-hero__art .rh-edge {
  stroke-dasharray: var(--rh-len);
  animation: rh-draw 620ms cubic-bezier(0.22, 0.68, 0.24, 1) 320ms backwards;
}

.release-hero__art .rh-thread {
  stroke-dasharray: var(--rh-len);
  animation: rh-draw 1400ms ease-in-out var(--rh-d, 0.55s) backwards;
}

.release-hero__art .rh-dot {
  animation: rh-fade 300ms ease-out calc(var(--rh-d, 0.55s) + 0.9s) backwards;
}

.release-hero__art .rh-label {
  animation: rh-fade 400ms ease-out calc(var(--rh-d, 0.55s) + 1s) backwards;
}

.release-hero__art :is(.rh-zoneline, .rh-zonetitle) {
  animation: rh-fade 400ms ease-out calc(var(--rh-d, 0.55s) + 1.05s) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .release-hero__art * {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}

.release-hero__figures {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

/* proportional figures, not tabular: equal-width digits make a display number look loose */
.release-hero__number {
  color: var(--bench-ours-ink);
  font: 400 3.75rem/0.9 var(--display);
  letter-spacing: -0.02em;
}

.release-hero__what {
  margin-top: 0.75rem;
  color: var(--ink);
  font-size: 0.875rem;
}

.release-hero__next {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* three supporting facts in a divided row: not cards, so they do not compete with the lead */
.release-hero__facts {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* the value is read first, so it is drawn first; the markup keeps term before value */
.release-hero__fact {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.release-hero__fact dd {
  color: var(--ink);
  font: 400 1.5rem/1 var(--display);
  letter-spacing: -0.01em;
}

.release-hero__fact dt {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.78125rem;
  line-height: 1.375;
  text-wrap: pretty;
}

@container release (min-width: 36rem) {
  .release-hero__number {
    font-size: 4.75rem;
  }

  .release-hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .release-hero__fact {
    padding: 0 1rem;
  }

  .release-hero__fact:first-child {
    padding-left: 0;
  }

  .release-hero__fact:last-child {
    padding-right: 0;
  }

  .release-hero__fact:not(:last-child) {
    border-right: 1px solid var(--line);
  }
}

@container release (min-width: 55rem) {
  .release-hero__figures {
    flex-direction: row;
    align-items: flex-end;
    gap: 3.5rem;
  }

  .release-hero__lead {
    flex: none;
  }

  .release-hero__facts {
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------- Sections: a hairline, a title, a lede, a line of scope ---------- */

.release-section {
  margin-top: clamp(4.5rem, 9vw, 7rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line-strong);
}

.release-section__head {
  max-width: var(--measure);
  margin-bottom: 2.25rem;
}

.release-section__title {
  font: 400 clamp(2rem, 1.45rem + 2.2vw, 3rem)/1.06 var(--display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.release-section__lede {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.66;
  text-wrap: pretty;
}

/* what the section covers, as a figure's sub-line */
.release-section__scope {
  margin-top: 0.875rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* what to take from the chart, as a figure's caption */
.release-section__note {
  max-width: 72ch;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- Panels: the essay's framed surface ---------- */

.panel {
  padding: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-raised);
}

.panel--flush {
  padding: 0;
}

.panel__note {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78125rem;
  line-height: 1.625;
}

.panel__note--tight {
  margin-top: 1rem;
}

.panel__note--flush {
  margin-top: 0;
  padding: 1rem 1.25rem;
}

@container release (min-width: 36rem) {
  .panel:not(.panel--flush) {
    padding: 1.75rem;
  }

  .panel__note--flush {
    padding-right: 1.75rem;
    padding-left: 1.75rem;
  }
}

/* ---------- The logo chip: a brand mark on a constant light plate ---------- */

.chip {
  --chip: 1.625rem;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--chip);
  height: var(--chip);
  border-radius: 7px;
  background: var(--bench-plate);
  /* defines the plate where it meets a light bar */
  box-shadow: inset 0 0 0 1px var(--bench-plate-edge);
  color: var(--bench-plate-ink);
}

.chip--22 {
  --chip: 1.375rem;
}

.chip--20 {
  --chip: 1.25rem;
}

.chip--ours {
  color: var(--bench-ours);
}

/* a chip seated in a bar: its corner is concentric with the bar's (4px + the 3px inset = 7px) */
.chip--seated {
  border-radius: 4px;
}

.chip__mark {
  display: block;
  width: calc(var(--chip) * 0.58);
  height: calc(var(--chip) * 0.58);
  max-width: none;
  fill: currentColor;
}

.chip__mono {
  font-family: var(--mono);
  font-size: calc(var(--chip) * 0.58 * 0.72);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ---------- Overall: the ranked list ---------- */

.board {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.board__row {
  display: grid;
  grid-template-columns: 1.625rem minmax(0, 1fr) 4.625rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
}

.board__rank {
  color: var(--bench-quiet);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.board__name {
  display: flex;
  grid-column: span 2;
  align-items: center;
  gap: 0.625rem;
}

.board__label {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.84375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board__track {
  grid-column: 2 / 4;
  height: 1.75rem;
}

/* zero-based: the bar's length is the score. Shade follows rank, the one chart where it may */
.board__bar {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: color-mix(in oklab, var(--bench-rank-8) var(--t), var(--bench-rank-1));
  transform-origin: left;
}

.board__value {
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.board__row--ours .board__bar {
  background: var(--bench-ours);
}

.board__row--ours :is(.board__label, .board__value) {
  color: var(--ink);
  font-weight: 600;
}

@container release (min-width: 36rem) {
  /* the name column holds the paper's longest name, Voxlect Indic-Whisper, whole (it was
     9.375rem for the release site's shorter names) */
  .board__row {
    grid-template-columns: 1.625rem 11.75rem minmax(0, 1fr) 4.875rem;
  }

  .board__name {
    grid-column: span 1;
  }

  .board__track {
    grid-column: 3 / 4;
  }
}

/* ---------- Categories: small multiples, grouped by what they test ---------- */

.cat-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.cat-family__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-bottom: 1rem;
}

.cat-family__title {
  font: 500 1rem/1.5 var(--display);
  letter-spacing: -0.008em;
}

.cat-family__blurb {
  color: var(--muted);
  font-size: 0.8125rem;
}

.cat-family__panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

@container release (min-width: 36rem) {
  .cat-family__panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container release (min-width: 55rem) {
  .cat-family__panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cat {
  position: relative;
  padding: 1rem 1rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-raised);
}

.cat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.cat__title {
  font: 500 0.9375rem/1.25 var(--display);
  letter-spacing: -0.008em;
}

.cat__meta {
  margin-top: 0.125rem;
  color: var(--bench-quiet);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

/* where Anuvani-LID finishes: a loss is named as plainly as a win */
.cat__place {
  flex: none;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.65625rem;
}

.cat__place--first {
  border: 0;
  background: var(--bench-ours-wash);
  color: var(--bench-ours-ink);
  font-weight: 500;
}

/* every bar's height is score × 172px, from one baseline; 30px of head room holds the value */
.cat__bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12.625rem;
  margin-top: 0.75rem;
}

.cat__col {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: default;
}

/* text wears ink, never the series colour; ours is promoted to primary ink so it still leads */
.cat__value {
  position: absolute;
  bottom: calc(var(--h) + 8px);
  left: 50%;
  color: var(--muted);
  font-size: 0.65625rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  translate: -50% 0;
}

.cat__col--ours .cat__value {
  color: var(--ink);
  font-weight: 600;
}

/* the chip sits in the bar's top with the same 3px above and on both sides (26px bar, 20px chip) */
.cat__bar {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1.625rem;
  height: var(--h);
  padding-top: 3px;
  border-radius: 7px 7px 0 0;
  background: var(--bench-rival);
}

.cat__col.is-active .cat__bar {
  background: var(--bench-rival-hover);
}

.cat__col--ours .cat__bar {
  background: var(--bench-ours);
}

.cat__col--ours.is-active .cat__bar {
  background: var(--bench-ours-hover);
}

.cat__foot {
  margin-top: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.71875rem;
  line-height: 1.375;
}

.cat__foot span {
  color: var(--ink-soft);
}

/* the card a bar shows when pointed at or focused */
.tip {
  position: absolute;
  z-index: 3;
  min-width: 10.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bench-raised);
  box-shadow: var(--shadow-card);
  pointer-events: none;
  text-align: left;
  translate: -50% -100%;
}

.tip__who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tip__name {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 500;
}

.tip__score {
  margin-top: 0.375rem;
  color: var(--ink);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tip__rank {
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.71875rem;
}

/* ---------- Margins: wins to the right of the zero rule, losses to the left ---------- */

.margins {
  display: flex;
  flex-direction: column;
}

.margins__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--line);
}

.margins__row:last-child {
  border-bottom: 0;
}

.margins__name {
  min-width: 0;
}

.margins__label {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.margins__n {
  color: var(--bench-quiet);
  font-family: var(--mono);
  font-size: 0.65625rem;
}

.margins__track {
  position: relative;
  order: 3;
  grid-column: span 2;
  height: 2rem;
}

/* the reference every bar is read against */
.margins__zero {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
  translate: -50% 0;
}

.margins__bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--half);
  height: 1.5rem;
  border-radius: 0 4px 4px 0;
  background: var(--bench-ours);
  transform-origin: left;
  translate: 0 -50%;
}

.margins__value {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--half) + 8px);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  translate: 0 -50%;
}

.margins__row--behind .margins__bar {
  left: calc(50% - var(--half));
  border-radius: 4px 0 0 4px;
  background: var(--bench-rival);
  transform-origin: right;
}

.margins__row--behind .margins__value {
  right: calc(50% + var(--half) + 8px);
  left: auto;
}

.margins__who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.margins__who span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container release (min-width: 36rem) {
  .margins__row {
    grid-template-columns: 10.5rem minmax(0, 1fr) 10.625rem;
    gap: 0.75rem;
  }

  .margins__track {
    order: 0;
    grid-column: span 1;
  }

  .margins__who {
    justify-content: flex-end;
  }
}

/* ---------- Wide marks keep their size and scroll sideways on a narrow screen ---------- */

:is(.slope-scroll, .scores-scroll) {
  overflow-x: auto;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

:is(.slope-scroll, .scores-scroll):focus-visible {
  outline-offset: -2px;
  border-radius: 9px;
}

/* ---------- Robustness: lines on one axis; the claim is the slope ---------- */

.slope-scroll {
  padding: 1.25rem;
}

@container release (min-width: 36rem) {
  .slope-scroll {
    padding: 1.75rem;
  }
}

.slope {
  display: block;
  width: 100%;
  min-width: 55rem;
  max-width: none;
  height: auto;
}

.slope__grid {
  stroke: var(--line);
  stroke-width: 1;
}

.slope__tick {
  fill: var(--bench-quiet);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.slope__cat {
  fill: var(--muted);
  font-size: 11px;
}

/* the dash is measured against pathLength 1, so a line draws across the whole of its entrance */
.slope__line {
  fill: none;
  opacity: 0.55;
  stroke: var(--bench-rival-hover);
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: opacity 200ms ease;
}

.slope__line--ours {
  opacity: 1;
  stroke: var(--bench-ours);
  stroke-width: 3;
}

/* pointing at a system's name isolates its line; ours never recedes */
.slope.has-focus .slope__line:not(.slope__line--ours, .is-focus) {
  opacity: 0.14;
}

.slope__end {
  cursor: default;
}

.slope__leader {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
}

.slope__dot {
  fill: var(--bench-rival-hover);
  stroke: var(--paper-raised);
  stroke-width: 2;
}

.slope__name {
  fill: var(--muted);
  font-size: 11.5px;
}

.slope__end--ours .slope__dot {
  fill: var(--bench-ours);
}

.slope__end--ours .slope__name {
  fill: var(--ink);
  font-weight: 600;
}

/* ---------- Profile: eight outlines, one filled ---------- */

[data-series="1"] { --hue: var(--bench-series-1); }
[data-series="2"] { --hue: var(--bench-series-2); }
[data-series="3"] { --hue: var(--bench-series-3); }
[data-series="4"] { --hue: var(--bench-series-4); }
[data-series="5"] { --hue: var(--bench-series-5); }
[data-series="6"] { --hue: var(--bench-series-6); }
[data-series="7"] { --hue: var(--bench-series-7); }
[data-series="8"] { --hue: var(--bench-series-8); }

.radar-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

@container release (min-width: 55rem) {
  .radar-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }
}

.radar {
  display: block;
  flex: none;
  width: 100%;
  max-width: 28.75rem;
  height: auto;
}

:is(.radar__ring, .radar__axis) {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

.radar__cat {
  fill: var(--muted);
  font-size: 10.5px;
}

.radar__shape {
  cursor: pointer;
  fill: none;
  stroke: var(--hue);
  stroke-linejoin: round;
  stroke-width: 2;
  transition: opacity 180ms;
}

.radar__shape.is-filled {
  fill: var(--hue);
  fill-opacity: 0.14;
  stroke-width: 2.75;
}

.radar__shape.is-dim {
  opacity: 0.16;
}

.radar__dots:not(.is-shown) {
  display: none;
}

.radar__dot {
  fill: var(--hue);
  stroke: var(--paper-raised);
  stroke-width: 2;
}

.radar__scale {
  fill: var(--bench-quiet);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--paper-raised);
  stroke-linejoin: round;
  stroke-width: 3;
}

.radar-side {
  width: 100%;
  min-width: 0;
}

.radar-side__intro {
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.radar-legend {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.radar-legend__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  transition: background-color 0.15s ease-out, opacity 0.15s ease-out;
}

.radar-legend__row:hover,
.radar-legend__row[aria-pressed="true"] {
  background: var(--bench-hover);
}

.radar-legend__row.is-dim {
  opacity: 0.5;
}

/* a line, not a dot: it reads as "this is the stroke" */
.radar-legend__key {
  flex: none;
  width: 1.25rem;
  height: 3px;
  border-radius: 999px;
  background: var(--hue);
}

.radar-legend__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radar-legend__row--ours .radar-legend__label {
  color: var(--ink);
  font-weight: 600;
}

.radar-legend__value {
  flex: none;
  color: var(--muted);
  font-size: 0.78125rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Data: the table the field charts are computed from ---------- */

.scores-scroll {
  border-radius: 9px 9px 0 0;
}

/* Set to be read: figures and labels at 15px, names at 13px. (The release site sets them at
   12.5 and 11.5; the author could not read them.) Eleven names do not fit on one line at
   that size, so the longer ones turn onto a second line (tools/release/parts/data.mjs) and
   the eleven systems stand in equal columns. The first column takes what is left: 15rem
   while the release's column can spare it, which holds every label on one line; less on a
   smaller window, where a long label gives its tag a line of its own. Under 63.25rem the
   table keeps that width, the least at which no label breaks inside its words, and scrolls
   sideways beneath its pinned first column. */
.scores {
  --scores-langs: 3.75rem;
  /* Anuvani-LID's column is this much wider: its name is the longest line in the head, and in bold */
  --scores-ours: 0.5rem;
  /* the last column's extra room, so the figures stop as far from the right edge as the labels start from the left */
  --scores-inset: 0.75rem;
  --scores-pitch: clamp(4.25rem, (100cqi - 2px - 15rem - var(--scores-langs) - var(--scores-ours) - var(--scores-inset)) / 11, 4.5rem);
  width: 100%;
  min-width: 63.25rem;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9375rem;
}

.scores :is(th, td) {
  padding: 0.625rem 0;
}

.scores thead tr {
  border-bottom: 1px solid var(--line);
}

/* the head is set in the names' size and from the top, so the marks stand in one row and
   every name starts on the same line, whether it runs to one line or two */
.scores thead th {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  vertical-align: top;
}

/* the two words stand on the names' first line: below a mark and its gap */
.scores thead :is(.scores__corner, .scores__langs) {
  padding-top: calc(0.75rem + 1.375rem + 0.375rem);
}

.scores :is(.scores__corner, .scores__row) {
  position: sticky;
  left: 0;
  z-index: 1;
  padding-right: 0.75rem;
  padding-left: 1.25rem;
  background: var(--paper-raised);
  text-align: left;
}

/* the count of languages: its word and its numbers end on one edge, clear of the first system */
.scores :is(.scores__langs, .scores__n) {
  padding-right: 1.25rem;
  padding-left: 0.5rem;
  text-align: right;
}

.scores__langs {
  width: var(--scores-langs);
}

.scores :is(.scores__col, .scores__cell) {
  text-align: center;
}

.scores__col {
  width: var(--scores-pitch);
}

.scores__col--ours {
  width: calc(var(--scores-pitch) + var(--scores-ours));
}

.scores__col:last-child {
  width: calc(var(--scores-pitch) + var(--scores-inset));
}

.scores :is(.scores__col, .scores__cell):last-child {
  padding-right: var(--scores-inset);
}

.scores__sort {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
}

/* the two text headers darken when pointed at, as on the release site */
.scores__sort:not(.scores__sort--system):hover {
  color: var(--ink);
}

/* a system's button stops 4px short of its column on each side, so its focus ring stays clear of its neighbours */
.scores__sort--system {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  width: calc(100% - 0.5rem);
  margin: 0 auto;
  font-weight: 400;
}

.scores__system,
.scores__turn {
  display: block;
}

.scores__sort--ours {
  color: var(--ink);
  font-weight: 600;
}

/* the arrow of the sorted column hangs after the last word and takes no room, so sorting
   never moves a column */
.scores__arrow {
  position: absolute;
  margin-left: 0.25em;
}

.scores tbody tr {
  border-bottom: 1px solid var(--line);
}

.scores tbody tr:last-child {
  border-bottom: 0;
}

.scores__row {
  font-weight: 400;
}

/* the gap before the tag belongs to the label, so a tag that takes the next line starts at the edge */
.scores__label {
  margin-right: 0.4375rem;
  color: var(--ink);
}

/* the tag never breaks at its hyphen; a label too long for its line gives the tag the next one */
.scores__basis {
  color: var(--bench-quiet);
  font-family: var(--mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

.scores__n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.scores__cell {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.scores__cell.is-ours {
  color: var(--ink);
}

.scores__cell.is-none {
  color: var(--bench-quiet);
}

.scores__cell.is-best {
  color: var(--bench-ours-ink);
  font-weight: 600;
}

/* a rival's best is bold in ink: the blue marks Anuvani-LID alone (the paper's Figure 9 does the same) */
.scores__cell.is-best.is-rival {
  color: var(--ink);
}

/* the means, ruled off from the conditions they summarise, on a band that shows at night;
   the pinned first cell wears the band too, so the row stays whole while the others scroll */
.scores tbody tr.scores__mean {
  border-top: 1px solid var(--line-strong);
  background: var(--bench-band);
}

.scores .scores__mean .scores__row {
  background: var(--bench-band);
}

.scores tbody .scores__mean :is(th, td) {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.scores__mean .scores__label {
  font-weight: 500;
}

.scores-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line);
}

.scores-foot p {
  color: var(--muted);
  font-size: 0.875rem;
}

@container release (min-width: 36rem) {
  .scores :is(.scores__corner, .scores__row) {
    padding-left: 1.75rem;
  }

  .scores-foot {
    padding-right: 1.75rem;
    padding-left: 1.75rem;
  }
}

/* ---------- Method: the notes the figures stand on ---------- */

.method__title {
  font: 400 1.375rem/1.5 var(--display);
  letter-spacing: -0.008em;
}

.method__grid {
  display: grid;
  gap: 2.5rem;
  margin-top: 2rem;
}

@container release (min-width: 55rem) {
  .method__grid {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* on the narrowest phones a source's path is longer than the column: let the column
   shrink and the path break, so nothing is cut off at the edge of the screen */
.method__col {
  min-width: 0;
}

.method__col > * + * {
  margin-top: 1.75rem;
}

.method h3 {
  color: var(--ink);
  font: 500 0.875rem/1.5 var(--display);
  letter-spacing: -0.008em;
}

.method p {
  max-width: 66ch;
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  line-height: 1.625;
  text-wrap: pretty;
}

.method code {
  font-family: var(--mono);
  font-size: 0.75rem;
}

.method__list {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.method__list li + li {
  margin-top: 0.375rem;
}

.method__list--systems li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.method__list--systems li + li {
  margin-top: 0.5rem;
}

.method__list .is-ours {
  color: var(--ink);
}

.method__dot {
  color: var(--bench-quiet);
}

.method__org {
  color: var(--muted);
}

.method p.method__credit {
  max-width: 52ch;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.78125rem;
}

.method__list--sources {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.625;
}

.method__list--sources li + li {
  margin-top: 0.25rem;
}

/* ---------- Where the release hands over to the essay ----------
   One hairline with a knot tied into it, like the knots on the reading cord:
   a new part begins. */

.release__seam {
  position: relative;
  max-width: var(--bench);
  height: 0;
  margin: clamp(4.5rem, 9vw, 7rem) auto 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--line-strong);
}

.release__seam::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 1.5px;
  background: var(--warm-strong);
  box-shadow: 0 0 0 5px var(--paper);
}

/* ---------- The extensions: serving at scale, on the phone, and the Hugging Face guide ----------
   Added on 18 October 2026. Every colour is one of the page's tokens; chart type is 13px or more;
   the one blue still marks Anuvani-LID (here, the model's own lines and bars). */

.release-sub {
  margin: 2.5rem 0 0.5rem;
  font: 400 1.375rem/1.25 var(--display);
  letter-spacing: -0.01em;
}

.release-sub__lede {
  max-width: 42rem;
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

.release-section > .panel + .panel,
.release-section > .panel + .release-pair,
.release-section > .release-pair + .panel,
.release-section > .release-pair + .release-pair {
  margin-top: 1.25rem;
}

.panel__title {
  margin: 0 0 1rem;
  font: 600 0.9375rem/1.3 var(--sans);
  color: var(--ink);
}

.panel__list {
  margin: 1.25rem 0 0;
  padding: 1rem 0 0 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.panel__list li + li {
  margin-top: 0.4rem;
}

.release-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@container release (min-width: 55rem) {
  .release-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* the headline tiles: a figure over what it measures */
.kpis__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
}

@container release (min-width: 36rem) {
  .kpis__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container release (min-width: 55rem) {
  .kpis__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kpi {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.375rem;
}

.kpi dd {
  margin: 0;
  color: var(--bench-ours-ink);
  font: 400 2.125rem/1 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.kpi dt {
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* how the work is split: two lanes, steps in the order a file meets them */
.flow__heads {
  display: none;
}

.flow__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow__step {
  position: relative;
  padding: 0.875rem 1rem 0.875rem 3.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
}

.flow__step--client {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--paper));
  background: var(--client-wash);
}

.flow__step--server {
  border-color: var(--ink-soft);
}

.flow__step--client .flow__no {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, var(--paper));
  color: var(--accent-ink);
}

.flow__step--client .flow__lane {
  color: var(--accent-ink);
}

.flow__no {
  position: absolute;
  top: 0.875rem;
  left: 1rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  font: 600 0.8125rem/1 var(--mono);
}

.flow__step--server .flow__no {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.flow__lane {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--muted);
  font: 500 0.8125rem/1.3 var(--mono);
}

.flow__title {
  margin: 0;
  font: 600 1rem/1.35 var(--sans);
}

.flow__text {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.flow__hop {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font: 500 0.8125rem/1.3 var(--mono);
}

.flow__hop span::before {
  content: "↓ ";
}

@container release (min-width: 48rem) {
  /* the drawing above carries the two lanes and the hand-offs; the steps keep their lane
     names and fill two even columns in reading order */
  .flow__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }

  .flow__hop {
    display: none;
  }
}

/* the serving stack, drawn whole (parts/serving-stack.mjs): 880 across in the column,
   360 across on a phone; type is never shrunk, the phone gets its own drawing */
.sd-wrap {
  margin: 0.25rem 0 0.75rem;
}

/* the drawing's colours, all the page's own tokens: the client tier in the page's teal,
   Anuvani-LID's engines in its blue, and three users in teal, gold and the release's indigo,
   so the queues show at a glance that every batch mixes users. Letters stay in ink, so the
   colours are never the only sign and every label keeps its contrast. */
.sd {
  --sd-client: var(--accent);
  --sd-client-ink: var(--accent-ink);
  --sd-u-a: var(--accent);
  --sd-u-b: var(--gold-strong);
  --sd-u-c: var(--bench-series-7);
}

/* the note under the drawing: what is schematic, what is measured */
.sd-caption {
  margin-bottom: 1.25rem;
}

.sd {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.sd--wide {
  display: none;
  max-width: 880px;
}

.sd--tall {
  max-width: 420px;
}

@container release (min-width: 48rem) {
  .sd--wide {
    display: block;
  }

  .sd--tall {
    display: none;
  }
}

.sd text {
  font-family: var(--mono);
  font-size: 13px;
}

.sd--tall text {
  font-size: 15px;
}

.sd .sd-row,
.sd .sd-col,
.sd .sd-triton__text,
.sd .sd-chip__text {
  font-family: var(--sans);
  font-size: 14px;
}

.sd--tall :is(.sd-row, .sd-col, .sd-triton__text, .sd-chip__text) {
  font-size: 15px;
}

.sd .sd-chip__text--code {
  font-family: var(--mono);
  font-size: 13px;
}

.sd--tall .sd-chip__text--code {
  font-size: 15px;
}

.sd-band {
  fill: var(--paper);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.sd-band--server {
  stroke: var(--ink-soft);
}

.sd-band--client {
  fill: var(--client-wash);
  stroke: color-mix(in oklab, var(--sd-client) 55%, var(--paper));
}

.sd-band--client + .sd-band__title,
.sd .sd-band__title--client {
  fill: var(--sd-client-ink);
}

.sd-band__title {
  fill: var(--ink);
  font-weight: 600;
}

.sd-band__sub,
.sd-note,
.sd-hop,
.sd-share,
.sd-cfg,
.sd-ellipsis {
  fill: var(--muted);
}

.sd-share {
  fill: var(--ink-soft);
}

.sd-row,
.sd-piece,
.sd-pad__label,
.sd-triton__text,
.sd-chip__text {
  fill: var(--ink);
}

.sd .sd-col {
  fill: var(--ink);
  font-weight: 600;
}

.sd-wave {
  fill: none;
  stroke: var(--sd-u-a);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.sd-span,
.sd-pad__speech {
  fill: var(--sd-u-a);
}

.sd-bracket,
.sd-link {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.sd-zoom {
  fill: none;
  stroke: var(--line-strong);
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

.sd-arrow {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.2;
}

.sd-head {
  fill: var(--ink-soft);
}

.sd-zeros__bg {
  fill: var(--paper);
}

.sd-zeros__line {
  stroke: var(--line-strong);
  stroke-width: 2;
}

.sd-pad__frame {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1;
}

.sd-pad__zeros {
  stroke: none;
}

.sd-chip,
.sd-triton,
.sd-engine {
  fill: var(--paper-raised);
  stroke: var(--ink-soft);
  stroke-width: 1;
}

.sd-engine--ours {
  fill: var(--bench-ours-wash);
  stroke: var(--bench-ours);
}

.sd .sd-engine__text {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
}

.sd .sd-ellipsis {
  fill: var(--ink-soft);
  font: 600 20px var(--sans);
}

.sd .sd-engine__text--ours {
  fill: var(--bench-ours-ink);
  font-weight: 600;
}

/* the NVIDIA mark in each Triton box, on the plate brand marks sit on */
.sd-plate {
  fill: var(--bench-plate);
  stroke: var(--bench-plate-edge);
  stroke-width: 1;
}

.sd-tile {
  fill: var(--paper-raised);
  stroke: var(--line-strong);
  stroke-width: 1;
}

/* what the client tier returns */
.sd .sd-chip--json {
  fill: color-mix(in oklab, var(--sd-client) 10%, var(--paper-raised));
  stroke: var(--sd-client);
}

/* a user's tile and upload: a wash of its colour, edged in the colour itself */
.sd-u--a { --sd-u: var(--sd-u-a); }
.sd-u--b { --sd-u: var(--sd-u-b); }
.sd-u--c { --sd-u: var(--sd-u-c); }

.sd :is(.sd-tile, .sd-chip):is(.sd-u--a, .sd-u--b, .sd-u--c) {
  fill: color-mix(in oklab, var(--sd-u) 22%, var(--paper-raised));
  stroke: var(--sd-u);
  stroke-width: 1.5;
}

.sd .sd-tile__user {
  fill: var(--ink-soft);
  font-size: 13px;
}

.sd-mark circle {
  fill: color-mix(in oklab, var(--sd-client) 14%, var(--paper));
  stroke: var(--sd-client);
  stroke-width: 1.5;
}

.sd-mark text {
  fill: var(--sd-client-ink);
  font-weight: 600;
}

.sd-mark--server circle {
  fill: var(--ink);
  stroke: var(--ink);
}

.sd-mark--server text {
  fill: var(--paper);
}

/* the buckets, and the control that picks one */
.buckets__control {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.buckets__label {
  color: var(--ink);
  font: 600 0.9375rem/1.3 var(--sans);
}

.buckets__label output {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.buckets__range {
  width: 100%;
  accent-color: var(--ink);
}

.buckets__readout {
  margin: 0;
  min-height: 3em;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.buckets__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@container release (min-width: 36rem) {
  .buckets__row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.bucket {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.bucket.is-chosen {
  border-color: var(--ink);
  background: var(--paper-sunk);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.bucket__name {
  margin: 0 0 0.5rem;
  font: 600 1.125rem/1 var(--mono);
}

.bucket__facts {
  display: grid;
  gap: 0.375rem;
  margin: 0;
}

.bucket__facts dt {
  color: var(--muted);
  font-size: 0.8125rem;
}

.bucket__facts dd {
  margin: 0;
  color: var(--ink);
  font: 500 0.9375rem/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
}

/* the line charts: a fixed size, so their type stays 13px; they scroll sideways when narrow */
.lchart-scroll {
  overflow-x: auto;
  margin: 0 -0.25rem;
}

.lchart {
  display: block;
  width: 720px;
  max-width: none;
  margin: 0 auto;
  overflow: visible;
}

.lchart-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.5rem;
}

@container release (min-width: 48rem) {
  .lchart-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lchart-panel {
  width: 100%;
  max-width: 340px;
  margin: 0;
}

.lchart-panel .lchart {
  width: 100%;
  font-size: 14px;
}

.lchart-panel__title {
  margin-bottom: 0.5rem;
  color: var(--ink-soft);
  font: 500 0.875rem/1.3 var(--sans);
  text-align: center;
}

.lchart__grid {
  stroke: var(--line);
  stroke-width: 1;
}

.lchart__tick,
.lchart__axis,
.lchart__note,
.lchart__name {
  font-family: var(--mono);
  font-size: 13px;
}

.lchart-panel .lchart :is(.lchart__tick, .lchart__axis) {
  font-size: 14px;
}

.lchart__tick {
  fill: var(--bench-quiet);
  font-variant-numeric: tabular-nums;
}

.lchart__axis,
.lchart__note {
  fill: var(--muted);
}

.lchart__name {
  fill: var(--ink-soft);
}

.lchart__name--ours {
  fill: var(--bench-ours-ink);
  font-weight: 600;
}

.lchart__target {
  stroke: var(--bench-quiet);
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

/* the dash is measured against pathLength 1, so a line draws across the whole of its entrance */
.lchart__line {
  fill: none;
  stroke: var(--bench-rival-hover);
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.lchart__line--ours {
  stroke: var(--bench-ours);
  stroke-width: 3;
}

.lchart__line--dashed {
  stroke-width: 2;
  opacity: 0.7;
}

.lchart__dot {
  fill: var(--bench-rival-hover);
  stroke: var(--paper-raised);
  stroke-width: 1.5;
}

.lchart__dot--ours {
  fill: var(--bench-ours);
}

/* six GPUs: one bar a load step */
.scale {
  display: grid;
  gap: 0.625rem;
}

.scale__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "load p99" "track track" "value value";
  align-items: center;
  gap: 0.25rem 0.75rem;
}

@container release (min-width: 48rem) {
  .scale__row {
    grid-template-columns: 9.5rem minmax(0, 1fr) 9.5rem 6.5rem;
    grid-template-areas: "load track value p99";
  }
}

.scale__load {
  grid-area: load;
  color: var(--ink);
  font: 500 0.9375rem/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
}

.scale__unit {
  color: var(--muted);
  font-size: 0.8125rem;
}

.scale__track {
  grid-area: track;
  height: 1.375rem;
}

.scale__bar {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--bench-rival);
  transform-origin: left;
}

.scale__row--ok .scale__bar {
  background: var(--bench-ours);
}

.scale__value {
  grid-area: value;
  color: var(--ink-soft);
  font: 500 0.9375rem/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
}

.scale__p99 {
  grid-area: p99;
  color: var(--ink-soft);
  font: 500 0.875rem/1.2 var(--mono);
  text-align: right;
}

.scale__p99.is-over {
  color: var(--warm);
}

/* checks, as a plain list */
.facts {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0 0 0 1.1rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* the phone files: size, and agreement */
.formats {
  display: grid;
  gap: 0.875rem;
}

.formats__head {
  display: none;
}

.formats__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name name" "track track" "size agree";
  gap: 0.25rem 0.75rem;
  align-items: center;
}

@container release (min-width: 55rem) {
  .formats__head {
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr) 6.5rem 12rem;
    gap: 0.75rem;
    color: var(--muted);
    font: 500 0.8125rem/1.3 var(--mono);
  }

  .formats__row {
    grid-template-columns: 19rem minmax(0, 1fr) 6.5rem 12rem;
    grid-template-areas: "name track size agree";
  }
}

.formats__name {
  grid-area: name;
  display: grid;
  gap: 0.125rem;
}

.formats__name code {
  color: var(--ink);
  font: 600 0.9375rem/1.2 var(--mono);
}

.formats__role {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.formats__track {
  grid-area: track;
  height: 1.375rem;
}

.formats__bar {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--bench-rival);
  transform-origin: left;
}

.formats__row--default .formats__bar {
  background: var(--bench-ours);
}

.formats__size,
.formats__agree {
  color: var(--ink);
  font: 500 0.9375rem/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
}

.formats__size {
  grid-area: size;
}

.formats__agree {
  grid-area: agree;
  text-align: right;
}

.formats__unit {
  color: var(--muted);
  font-size: 0.8125rem;
}

/* which file for which phone: radio tabs, which work without the script */
.picker__input,
.hub__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.picker__tabs,
.hub__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.picker__tab,
.hub__tab {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.2;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.hub__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.4375rem;
}

.picker__tab:hover,
.hub__tab:hover {
  border-color: var(--ink-soft);
}

.picker__panel,
.hub__panel {
  display: none;
}

#phone-any:checked ~ .picker__tabs [for="phone-any"],
#phone-snapdragon:checked ~ .picker__tabs [for="phone-snapdragon"],
#phone-iphone:checked ~ .picker__tabs [for="phone-iphone"],
#phone-other:checked ~ .picker__tabs [for="phone-other"],
#phone-sd888:checked ~ .picker__tabs [for="phone-sd888"],
#phone-budget:checked ~ .picker__tabs [for="phone-budget"],
#hub-python:checked ~ .hub__tabs [for="hub-python"],
#hub-triton:checked ~ .hub__tabs [for="hub-triton"],
#hub-mobile:checked ~ .hub__tabs [for="hub-mobile"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

#phone-any:focus-visible ~ .picker__tabs [for="phone-any"],
#phone-snapdragon:focus-visible ~ .picker__tabs [for="phone-snapdragon"],
#phone-iphone:focus-visible ~ .picker__tabs [for="phone-iphone"],
#phone-other:focus-visible ~ .picker__tabs [for="phone-other"],
#phone-sd888:focus-visible ~ .picker__tabs [for="phone-sd888"],
#phone-budget:focus-visible ~ .picker__tabs [for="phone-budget"],
#hub-python:focus-visible ~ .hub__tabs [for="hub-python"],
#hub-triton:focus-visible ~ .hub__tabs [for="hub-triton"],
#hub-mobile:focus-visible ~ .hub__tabs [for="hub-mobile"] {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: 2px;
}

#phone-any:checked ~ .picker__panels [data-phone="any"],
#phone-snapdragon:checked ~ .picker__panels [data-phone="snapdragon"],
#phone-iphone:checked ~ .picker__panels [data-phone="iphone"],
#phone-other:checked ~ .picker__panels [data-phone="other"],
#phone-sd888:checked ~ .picker__panels [data-phone="sd888"],
#phone-budget:checked ~ .picker__panels [data-phone="budget"],
#hub-python:checked ~ .hub__panels [data-hub="python"],
#hub-triton:checked ~ .hub__panels [data-hub="triton"],
#hub-mobile:checked ~ .hub__panels [data-hub="mobile"] {
  display: block;
}

.picker__for {
  margin: 0 0 0.75rem;
  font: 600 1rem/1.3 var(--sans);
}

.picker__facts {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin: 0 0 0.75rem;
}

@container release (min-width: 36rem) {
  .picker__facts {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .picker__facts div {
    display: contents;
  }
}

.picker__facts dt {
  color: var(--muted);
  font-size: 0.875rem;
}

.picker__facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.9375rem;
}

.picker__facts code,
.hub__map code {
  font: 500 0.9375rem/1.3 var(--mono);
  overflow-wrap: anywhere;
}

.picker__note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* what each optimisation bought */
.ladder {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ladder;
}

.ladder__step {
  position: relative;
  padding: 0.875rem 0 0.875rem 2.5rem;
  border-top: 1px solid var(--line);
  counter-increment: ladder;
}

.ladder__step:first-child {
  border-top: 0;
  padding-top: 0;
}

.ladder__step::before {
  content: counter(ladder);
  position: absolute;
  left: 0;
  top: 0.875rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  font: 600 0.8125rem/1 var(--mono);
}

.ladder__step:first-child::before {
  top: 0;
}

.ladder__title {
  margin: 0;
  font: 600 1rem/1.35 var(--sans);
}

.ladder__why {
  margin: 0.25rem 0 0.5rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.ladder__change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.875rem;
  margin: 0;
}

.ladder__delta {
  color: var(--bench-ours-ink);
  font: 600 0.9375rem/1.3 var(--mono);
  font-variant-numeric: tabular-nums;
}

.ladder__result {
  color: var(--muted);
  font-size: 0.875rem;
}

/* devices: a name, what it stands for, and the result */
.devlist {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.devlist li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--line);
}

.devlist li:first-child {
  border-top: 0;
  padding-top: 0;
}

.devlist__name {
  display: grid;
  gap: 0.125rem;
  color: var(--ink);
  font-size: 0.9375rem;
}

.devlist__sub {
  color: var(--muted);
  font-size: 0.8125rem;
}

.devlist__value {
  color: var(--ink);
  font: 500 0.9375rem/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}


/* the Hugging Face guide */
.hub__map {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

@container release (min-width: 36rem) {
  .hub__map {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.5rem;
  }

  .hub__map div {
    display: contents;
  }
}

.hub__map dt {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.hub__map dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.hub__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.hub__lead {
  max-width: 46rem;
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.code {
  margin: 0 0 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper-sunk);
  overflow: hidden;
}

.code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.5rem 0.375rem 0.875rem;
  border-bottom: 1px solid var(--line);
}

.code__label {
  color: var(--muted);
  font: 500 0.8125rem/1.3 var(--mono);
}

.code__copy {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  cursor: pointer;
  font: 500 0.8125rem/1.3 var(--mono);
}

.code__copy:hover {
  border-color: var(--ink-soft);
}

.code__body {
  margin: 0;
  padding: 0.875rem;
  overflow-x: auto;
  color: var(--ink);
  font: 400 0.8125rem/1.6 var(--mono);
  tab-size: 4;
}

.code__body code {
  font: inherit;
}

/* the editor's colours (hub.mjs paints the code when the page is built) */
.code__body .hljs-keyword,
.code__body .hljs-operator {
  color: var(--code-keyword);
}

.code__body .hljs-string,
.code__body .hljs-regexp {
  color: var(--code-string);
}

.code__body .hljs-number,
.code__body .hljs-literal,
.code__body .hljs-symbol {
  color: var(--code-number);
}

.code__body .hljs-title.function_,
.code__body .hljs-title {
  color: var(--code-function);
}

.code__body .hljs-title.class_,
.code__body .hljs-type {
  color: var(--code-type);
}

.code__body .hljs-built_in {
  color: var(--code-builtin);
}

.code__body .hljs-comment {
  color: var(--code-comment);
  font-style: italic;
}

.code__body .hljs-variable,
.code__body .hljs-template-variable,
.code__body .hljs-subst,
.code__body .hljs-attr {
  color: var(--code-variable);
}

.code__body .hljs-meta {
  color: var(--code-meta);
}

/* a code block's head: its mark, its label, its language, the copy button */
.code__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.code__lang {
  margin-left: auto;
  padding-right: 0.75rem;
  color: var(--muted);
  font: 500 0.8125rem/1.3 var(--mono);
}

/* where to find it: the model and CIIL on Hugging Face, the paper on arXiv (parts/links.mjs) */
.rlinks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@container release (min-width: 48rem) {
  .rlinks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* in the hero: the full column, as wide as the figures under it */
.rlinks--hero {
  margin-top: 2rem;
}

.rlinks--hub {
  margin-bottom: 1.25rem;
}

.rlink {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-raised);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.rlink:hover {
  border-color: var(--ink-soft);
  background: var(--bench-hover);
}

.rlink:focus-visible {
  outline: 2px solid var(--bench-ours);
  outline-offset: 2px;
}

.rlink__text {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 0.125rem;
}

.rlink__label {
  font: 600 0.9375rem/1.3 var(--sans);
}

/* an address is never cut short: on a narrow card it wraps, at a slash where it can */
.rlink__where {
  color: var(--muted);
  font: 400 0.8125rem/1.3 var(--mono);
  overflow-wrap: anywhere;
}

.rlink__arrow {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--ink-soft);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

/* ---------- Entrances ----------
   None of these applies until release.js has seen the chart come into view, which
   only happens in a browser that is rendering. So `backwards` is safe: the class is
   never present unless the entrance is about to play. Timings are the release
   site's: 620ms bars, 500ms cards, 1.4s lines, all on one curve. */

@keyframes bench-grow-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes bench-lift {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* a bar rising out of its baseline: a slide, not a scale, so the logo seated in its top
   rides up undistorted; the clip hides whatever is still below the baseline */
@keyframes bench-rise {
  from {
    transform: translateY(100%);
    clip-path: inset(0 0 100% 0);
  }

  to {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

.is-inview :is(.board__bar, .margins__bar, .scale__bar, .formats__bar) {
  animation: bench-grow-x 620ms cubic-bezier(0.22, 0.68, 0.24, 1) var(--delay, 0ms) backwards;
}

.cat.is-inview {
  animation: bench-lift 500ms cubic-bezier(0.22, 0.68, 0.24, 1) var(--delay, 0ms) backwards;
}

.cat.is-inview .cat__bar {
  animation: bench-rise 620ms cubic-bezier(0.22, 0.68, 0.24, 1) var(--delay, 0ms) backwards;
}

/* the lines wait undrawn only once the script has armed them, and draw when seen */
.slope.is-armed .slope__line,
.lchart.is-armed .lchart__line {
  stroke-dashoffset: 1;
}

.lchart.is-drawn .lchart__line {
  transition: stroke-dashoffset 1400ms ease-in-out;
}

.slope.is-drawn .slope__line {
  transition: opacity 200ms ease, stroke-dashoffset 1400ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .release *,
  .release *::before,
  .release *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Print: every chart finished, nothing that needs a pointer ---------- */

@media print {
  .release * {
    animation: none !important;
  }

  .slope .slope__line,
  .lchart .lchart__line {
    stroke-dashoffset: 0 !important;
  }

  .tip,
  .release [data-noprint],
  .release [data-needs-js] {
    display: none !important;
  }

  .panel,
  .cat {
    break-inside: avoid-page;
  }
}

/* ---------- Mono text shows its characters ----------
   As in styles.css: this rule comes last, so no font shorthand above turns ligatures back on. */

html .release :is(code, .release-section__scope, .cat__meta, .cat__place, .margins__n, .scores__basis,
  .chip__mono, .method__list--sources) {
  font-variant-ligatures: none;
}