/* Main Street Bench page (/mainstreetbench). Loaded after styles.css and built
   from its tokens: forest for the stage and for the ink, guava pink for light,
   the accent red for marks.

   The page opens on a stage: Main Street at dusk (scripts/bench_street.py) with
   the logo and the ranking over it. Then paper: the leaderboard, the frontier
   chart, the benchmarks, and the test (the owner's request beside the 100
   problems, one unnamed column of ticks each), with a chapter's name set huge
   and faint behind its heading. It closes on the logo writ large: its bench on the
   footer's edge and its name across the footer. The ticks, rows and chart are
   generated from scripts/bench_board.py. The benchmark is private, so the page
   shows counts and results, never what a problem is.

   Each run on the board also has a page for its scorecard
   (/mainstreetbench/results/<run>, scripts/bench_results.py): the same stage
   without the street, then the scorecard's tables on paper.

   Explanations hide behind dotted labels as tooltips; without JavaScript, and
   in print, they are listed under their section instead.
   Series color follows the model, never its rank: Opus takes the accent red,
   Sol the forest green and Sonnet a slate blue (guava pink, cream and sky on the
   dark stage), Grok an ochre and Gemini a violet (gold and lavender on the
   stage); the two benchmark pages use one set of five on screen (see below),
   and the MSP Bench page adds Fable's clay and Astra's teal; Muse Wonder takes
   orchid on both pages, and Gemini 4 Argon lime on both pages too; Main Street
   Bench adds Kimi K3's coral, GLM 5.3's tangerine and DeepSeek V4.1 Flash's sand,
   and Muse Spark Open's royal blue.
   Every bar
   and point is also labeled in text, so color is never the only cue. */
:root {
  /* Sonnet's blue: a slate on paper, a sky on the night. Blue stays apart from
     both the red and the green for color-blind readers, where an ochre didn't. */
  --sonnet-ink: #2f5f9e;
  --sonnet-light: #8fb6f0;
  /* Grok's ochre and Gemini's violet, for the fourth and fifth models. */
  --grok-ink: #8a6412;
  --grok-light: #e3b95c;
  --gemini-ink: #6b4c9a;
  --gemini-light: #c4aef0;
  /* Fable's clay and Astra's teal, for the MSP Bench page's sixth and seventh. */
  --fable-ink: #a4471f;
  --fable-light: #f08a5d;
  --astra-ink: #1d6b66;
  --astra-light: #5ccfc6;
  /* Muse Wonder's orchid, the eighth: a pink well apart from Opus's soft guava. */
  --muse-ink: #93307f;
  --muse-light: #e57fd2;
  /* Gemini 4 Argon's lime, the ninth: the one green on screen, yellower than Astra's teal. */
  --argon-ink: #5b7a12;
  --argon-light: #b6db5e;
  /* Kimi K3's coral, GLM 5.3's tangerine and DeepSeek V4.1 Flash's sand, the tenth to twelfth
     (October 14, 2026): a red apart from Opus's soft guava and Muse Wonder's orchid, an orange
     redder than Grok's gold, and a pale sand apart from both. */
  --kimi-ink: #b3283d;
  --kimi-light: #ff7a8a;
  --glm-ink: #b35a00;
  --glm-light: #ff9a3c;
  --deepseek-ink: #7a6633;
  --deepseek-light: #e6d3a0;
  /* Muse Spark Open's royal blue, the thirteenth (October 15, 2026): Meta's blue, deeper and
     more saturated than Sonnet's pale sky and bluer than Gemini's lavender. */
  --spark-ink: #2338b8;
  --spark-light: #5f7bff;
  --opus: var(--accent);
  --sol: var(--forest);
  --sonnet: var(--sonnet-ink);
  --grok: var(--grok-ink);
  --gemini: var(--gemini-ink);
  --fable: var(--fable-ink);
  --astra: var(--astra-ink);
  --muse: var(--muse-ink);
  --argon: var(--argon-ink);
  --kimi: var(--kimi-ink);
  --glm: var(--glm-ink);
  --deepseek: var(--deepseek-ink);
  --spark: var(--spark-ink);
}

/* On this page the ink is the forest green, so type and rules carry the color. */
.bench {
  --frame: 5px;
  --night: hsl(160 47% 10%);
  /* The forest's hue, lighter: the green of the chart's most attractive quadrant. */
  --good: hsl(160 52% 36%);
  --ink: var(--forest);
  --muted: color-mix(in srgb, var(--forest) 72%, var(--paper));
  --rule: color-mix(in srgb, var(--forest) 15%, var(--paper));
}
@media (max-width: 599px) {
  .bench {
    --frame: 4px;
  }
}
/* A guava frame around the window: pink flesh around the green. */
.bench::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  border: var(--frame) solid var(--guava);
  pointer-events: none;
}

.lb-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.lb-opus { background: var(--opus); fill: var(--opus); --c: var(--opus); }
.lb-sol { background: var(--sol); fill: var(--sol); --c: var(--sol); }
.lb-sonnet { background: var(--sonnet); fill: var(--sonnet); --c: var(--sonnet); }
.lb-grok { background: var(--grok); fill: var(--grok); --c: var(--grok); }
.lb-gemini { background: var(--gemini); fill: var(--gemini); --c: var(--gemini); }
.lb-fable { background: var(--fable); fill: var(--fable); --c: var(--fable); }
.lb-astra { background: var(--astra); fill: var(--astra); --c: var(--astra); }
.lb-muse { background: var(--muse); fill: var(--muse); --c: var(--muse); }
.lb-argon { background: var(--argon); fill: var(--argon); --c: var(--argon); }
.lb-kimi { background: var(--kimi); fill: var(--kimi); --c: var(--kimi); }
.lb-glm { background: var(--glm); fill: var(--glm); --c: var(--glm); }
.lb-deepseek { background: var(--deepseek); fill: var(--deepseek); --c: var(--deepseek); }
.lb-spark { background: var(--spark); fill: var(--spark); --c: var(--spark); }

/* Stage: forest at dusk, full width, reaching up under the header. */
.bench-page {
  padding: 0;
}
.lb-stage {
  --opus: var(--guava);
  --sol: var(--on-forest);
  --sonnet: var(--sonnet-light);
  --grok: var(--grok-light);
  --gemini: var(--gemini-light);
  --fable: var(--fable-light);
  --astra: var(--astra-light);
  --muse: var(--muse-light);
  --argon: var(--argon-light);
  --kimi: var(--kimi-light);
  --glm: var(--glm-light);
  --deepseek: var(--deepseek-light);
  --spark: var(--spark-light);
  --street-h: max(clamp(170px, 19vw, 320px), 8.7vw);
  --street-at: 50%;
  position: relative;
  z-index: 2;
  isolation: isolate;
  margin-top: calc(-1px - var(--header-h));
  padding: calc(var(--header-h) + clamp(28px, 4.5vw, 60px)) 0 calc(var(--street-h) * 0.92);
  overflow: hidden;
  overflow: clip;
  box-shadow: 0 18px 36px -22px rgb(21 54 43 / 0.5);
  color: var(--on-forest);
  background:
    radial-gradient(ellipse 62% 58% at var(--street-at) 100%, rgb(229 177 176 / 0.22), transparent 72%),
    linear-gradient(var(--night) var(--header-h), var(--forest) 58%, hsl(160 42% 16%));
}
@media (min-width: 900px) {
  .lb-stage {
    --street-at: 70%;
    padding-bottom: calc(var(--street-h) * 0.6);
  }
  /* A ranking of more than three models (the MSP Bench page's five) runs
     longer than the hero's copy, so it keeps clear of the street. */
  .lb-stage:has(.lb-ranking > li:nth-child(4)) {
    padding-bottom: calc(var(--street-h) * 0.95);
  }
}
/* Film grain over the sky and the street, under the type. */
.lb-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
    0 0 / 240px 240px;
  mix-blend-mode: soft-light;
  opacity: 0.5;
}

/* The street (scripts/bench_street.py). The bakery's middle, 65% of the way
   along the drawing, is pinned at --street-at; the rest runs off both edges.
   Its tones are the forest's own hue, a step lighter each. */
.lb-street {
  --st-far: hsl(160 42% 17.5%);
  --st-a: hsl(160 40% 20.5%);
  --st-b: hsl(160 39% 23%);
  --st-c: hsl(160 38% 25.5%);
  --st-band: hsl(160 32% 31%);
  --st-trim: hsl(160 30% 35%);
  --st-line: hsl(160 28% 40%);
  --st-dark: hsl(160 48% 8.5%);
  --st-shadow: hsl(160 50% 6%);
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: var(--street-at);
  height: var(--street-h);
  width: auto;
  aspect-ratio: 4000 / 320;
  transform: translateX(-65%);
  pointer-events: none;
}
.st-far { fill: var(--st-far); }
.st-fardim { fill: var(--guava-soft); opacity: 0.16; }
.st-clock { fill: var(--guava-soft); opacity: 0.3; }
.st-a { fill: var(--st-a); }
.st-b { fill: var(--st-b); }
.st-c { fill: var(--st-c); }
.st-brickline { fill: none; stroke: var(--st-shadow); stroke-width: 0.6; opacity: 0.32; }
.st-dk { fill: var(--st-dark); }
.st-dim { fill: color-mix(in srgb, var(--guava) 46%, var(--st-a)); }
.st-late { fill: color-mix(in srgb, var(--guava) 20%, var(--st-dark)); }
.st-fa { fill: var(--st-band); }
.st-lt { fill: var(--st-trim); }
.st-ln { fill: none; stroke: var(--st-line); stroke-width: 1; }
.st-aw1 { fill: var(--st-band); }
.st-aw2 { fill: var(--st-line); }
.st-pole { fill: var(--on-forest); opacity: 0.85; }
.st-pole2 { fill: var(--accent); }
.st-signs text {
  font: 500 9px var(--mono);
  letter-spacing: 1.6px;
  fill: var(--st-dark);
}
.st-tree { fill: hsl(160 48% 7.5%); }
.st-fg { fill: var(--st-shadow); }
.st-lamp { fill: var(--guava-soft); }
.st-board { fill: var(--on-forest); opacity: 0.88; }
.st-l0 { stop-color: var(--guava-soft); stop-opacity: 0.36; }
.st-l1 { stop-color: var(--guava-soft); stop-opacity: 0; }
/* Main Street Bakery: the only warm light on the street. */
.bk-wall { fill: hsl(160 36% 27.5%); }
.bk-upstairs { fill: var(--guava); opacity: 0.86; }
.bk-sign { fill: var(--on-forest); }
.bk-name {
  font: 700 11.5px var(--sans);
  letter-spacing: 3.4px;
  fill: var(--forest);
}
.bk-kick { fill: var(--st-dark); }
.st-w0 { stop-color: #fff7f2; }
.st-w1 { stop-color: var(--guava-soft); }
.st-w2 { stop-color: var(--guava); }
.bk-in { fill: color-mix(in srgb, var(--accent) 52%, var(--forest)); opacity: 0.62; }
.bk-bulb { fill: #fff; }
.bk-frame { fill: none; stroke: var(--st-dark); stroke-width: 2; }
.bk-tag { fill: var(--on-forest); }
.bk-aw1 { fill: var(--guava); }
.bk-aw2 { fill: var(--guava-soft); }
.bk-shade { fill: #000; opacity: 0.16; }
.bk-blade { fill: var(--guava); stroke: var(--st-dark); stroke-width: 1.5; }
.st-h0 { stop-color: var(--guava); stop-opacity: 0.4; }
.st-h1 { stop-color: var(--guava); stop-opacity: 0.12; }
.st-h2 { stop-color: var(--guava); stop-opacity: 0; }
.st-halo,
.st-pool { mix-blend-mode: screen; }

/* Hero: the logo and one sentence beside the ranking. */
.lb-hero {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 44px 64px;
  align-items: start;
}
@media (min-width: 900px) {
  .lb-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  }
}
.lb-hero-copy {
  display: grid;
  gap: 22px;
  justify-items: start;
}
/* The logo is the page's h1; its alt text is the name. The artwork is dark
   green, so on the stage it is shown in the stage's cream. */
.bench-logo {
  max-width: none;
  line-height: 0;
}
.bench-logo img {
  width: clamp(220px, 25vw, 330px);
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
/* On the stage the logo is centered over the lines under it: its box takes the lede's
   width, 46ch in the lede's own size and weight, and the image sits in the middle of it. */
.lb-hero-copy .bench-logo {
  width: 100%;
  max-width: 46ch;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  font-weight: 400;
}
.lb-hero-copy .bench-logo img {
  margin-inline: auto;
}
.lb-stage .hero-lede {
  margin-top: 6px;
  max-width: 46ch;
  color: var(--on-forest-muted);
}
.lb-stage .hero-for {
  color: var(--on-forest);
  font-weight: 600;
}
.lb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.lb-quiet {
  background: rgb(243 241 236 / 0.08);
  color: var(--on-forest);
  border-color: rgb(243 241 236 / 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lb-quiet:hover {
  background: var(--on-forest);
  color: var(--forest);
}
.lb-stage :focus-visible {
  outline-color: var(--guava);
}
.lb-stage ::selection {
  background: var(--guava);
  color: var(--forest);
}

.lb-rank-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}
.lb-rank-head span + span {
  color: var(--muted);
}
.lb-stage .lb-rank-head {
  border-bottom: 1px solid rgb(243 241 236 / 0.4);
  color: var(--on-forest);
}
.lb-stage .lb-rank-head span + span {
  color: var(--on-forest-muted);
}
.lb-ranking,
.lb-pareto-list,
.lb-pillars {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-rank-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding-block: 22px 24px;
  border-bottom: 1px solid rgb(243 241 236 / 0.16);
}
.lb-ranking:has(> li:nth-child(4)) .lb-rank-row {
  padding-block: 16px 18px;
}
/* Seven models (the MSP Bench page's, from October 11, 2026) sit closer still. */
.lb-ranking:has(> li:nth-child(6)) .lb-rank-row {
  padding-block: 10px 12px;
}
.lb-pos {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  align-self: center;
}
.lb-stage .lb-pos {
  color: var(--on-forest-muted);
}
.lb-who {
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-width: 0;
  padding-block: 4px 3px;
}
.lb-name {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lb-name small {
  margin-left: 5px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--on-forest-muted);
}
/* The effort the model ran at: a small tag between its name and its maker. */
.lb-name .lb-effort {
  padding: 2px 6px 1px;
  border: 1px solid rgb(243 241 236 / 0.38);
  border-radius: 4px;
  color: var(--on-forest);
  vertical-align: 0.14em;
}
/* On the stage's ranking: the dollars a model protected on Main Street Bench, between its
   name and its bar. The words after the figure stay together: where the row is narrow they
   drop under it whole. */
.lb-kept {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-forest-muted);
}
.lb-kept strong {
  margin-right: 3px;
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--on-forest);
}
.lb-kept span {
  display: inline-block;
  white-space: nowrap;
}
.lb-score {
  text-align: right;
  font-size: clamp(3.25rem, 6.2vw, 5.25rem);
  font-weight: 500;
  line-height: 0.84;
  letter-spacing: -0.055em;
  color: var(--guava);
}
.lb-score small {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--on-forest-muted);
}
/* Phones: shorter column labels, and the effort and maker under the model's name. */
@media (max-width: 599px) {
  .lb-wide {
    display: none;
  }
  .lb-name > span {
    display: block;
    margin-bottom: 7px;
  }
  .lb-name .lb-effort {
    margin-left: 0;
  }
}
/* Small phones: the rank moves onto the name's line, and the gutter it
   kept goes to the name and the bar. */
@media (max-width: 479px) {
  .lb-rank-row:not(.fee-row) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "pos name score" "kept kept score" "bar bar bar";
    gap: 10px 10px;
  }
  .lb-rank-row:not(.fee-row) .lb-who {
    display: contents;
  }
  .lb-rank-row:not(.fee-row) .lb-pos {
    grid-area: pos;
    align-self: baseline;
  }
  .lb-rank-row:not(.fee-row) .lb-name {
    grid-area: name;
    align-self: baseline;
  }
  .lb-rank-row:not(.fee-row) .lb-kept {
    grid-area: kept;
  }
  .lb-rank-row:not(.fee-row) .lb-hatch {
    grid-area: bar;
    margin-top: 4px;
  }
  .lb-rank-row:not(.fee-row) .lb-score {
    grid-area: score;
  }
}

/* The benchmark pages' rankings show the top five, and the rest scroll into
   view inside the ranking (Romeo's request, October 13, 2026). site.js
   measures the fifth row into --lb-top5, fades the foot while more rows are
   below and adds the "Scroll for all" line; without it every row shows. */
.lb-ranking.lb-scrolls {
  max-height: var(--lb-top5);
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(243 241 236 / 0.28) transparent;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), rgb(0 0 0 / 0.15));
  mask-image: linear-gradient(#000 calc(100% - 44px), rgb(0 0 0 / 0.15));
}
/* Only five rows show, so they keep the roomier spacing of a short ranking. */
.lb-stage .lb-ranking.lb-scrolls .lb-rank-row {
  padding-block: 22px 24px;
}
/* The scrollbar sits out in the margin, clear of the big scores, which stay in
   line with the column's header. site.js measures the scrollbar's own width
   into --lb-bar (none where scrollbars overlay the page). */
@media (min-width: 600px) {
  .lb-ranking.lb-scrolls {
    margin-right: -28px;
    padding-right: calc(28px - var(--lb-bar, 0px));
  }
}
.lb-ranking.lb-scrolls.lb-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}
/* The mask would fade the ranking's own focus ring, so its column wears it. */
.lb-ranking.lb-scrolls:focus-visible {
  outline: none;
}
:has(> .lb-ranking.lb-scrolls:focus-visible) {
  outline: 2px solid var(--guava);
  outline-offset: 8px;
}
.lb-rank-more {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  transition: opacity 0.3s;
}
.lb-stage .lb-rank-more {
  color: var(--on-forest-muted);
}
.lb-at-end + .lb-rank-more {
  opacity: 0;
}

/* Hatched bar: the score as a share of 100. The filled part is revealed, not
   stretched, so its stripes stay in step with the track's. */
.lb-hatch {
  --track: var(--rule);
  position: relative;
  display: block;
  height: 12px;
  background: repeating-linear-gradient(115deg, var(--track) 0 1.5px, transparent 1.5px 6px);
}
.lb-stage .lb-hatch {
  --track: rgb(243 241 236 / 0.24);
}
.lb-hatch i {
  position: absolute;
  inset: 0 auto 0 0;
  background: repeating-linear-gradient(115deg, var(--c) 0 2.4px, transparent 2.4px 6px);
}

/* Sections on paper. */
.lb-section {
  padding-top: clamp(72px, 9vw, 128px);
  display: grid;
  gap: 28px;
  min-width: 0;
}
.lb-intro {
  display: grid;
  gap: 16px;
}
.lb-intro h2 {
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
}
.lb-intro p {
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}
/* A pixel mark after each heading, in the family of the pixel guavas. */
.lb-glyph {
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: 0.16em;
  vertical-align: 0.5em;
  fill: var(--accent);
  shape-rendering: crispEdges;
}

/* The section's name, huge and faint, sized to fill the column: --fit is the
   word's width in ems, so the type is one column wide at any screen size (a
   short word stops at 12.5rem). The first one starts under the stage's edge. */
.lb-ghost {
  container-type: inline-size;
  /* Room either side for the word's drift (below), inside the clip. */
  margin-inline: -3%;
  padding-inline: 3%;
  overflow-x: clip;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.lb-ghost span {
  display: block;
  font-size: min(calc(100cqw / var(--fit)), 12.5rem);
  font-weight: 800;
  line-height: 0.76;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--forest) 5%, var(--paper));
  /* The hatching is painted only inside the box, and at this line height a
     letter's tail (the Q in FAQ) hangs below it: extend the box without
     moving anything. */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
/* Filled with the page's own hatching, like the slash bars, so a faint word
   reads as texture rather than a smudge. --hatch is the stripes' ink. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .lb-ghost span {
    --hatch: color-mix(in srgb, var(--forest) 22%, transparent);
    color: transparent;
    /* Stripes in proportion to the word, so a small one isn't a scribble. */
    background: repeating-linear-gradient(-60deg, var(--hatch) 0 max(1px, 0.0075em), transparent 0 max(3.5px, 0.035em));
    -webkit-background-clip: text;
    background-clip: text;
  }
}
/* The word comes from the span's data-word, not its text, so it is decoration
   to screen readers, search engines and contrast checks as well as to the eye. */
.lb-ghost span::before {
  content: attr(data-word);
}
.lb-ghosted {
  gap: clamp(20px, 3vw, 36px);
  padding-top: clamp(56px, 7vw, 96px);
}
.lb-ghosted > .lb-intro ~ * {
  margin-top: 4px;
}
.lb-first {
  padding-top: 0;
}
.lb-first .lb-ghost span {
  margin-top: -0.1em;
}

/* The MSP Bench page shows its five models in one set of colors everywhere,
   on the night and on paper alike (Romeo's call, October 10, 2026): Opus guava
   pink, Sol gray, Sonnet sky, Grok gold and Gemini lavender. The Main Street
   Bench page and its scorecards took the same five when Grok and Gemini joined
   them that day. Claude Fable 5.1 (clay) and GPT-6 Astra (teal) joined the MSP
   Bench page alone on October 11, Muse Wonder 1.0 (orchid) both pages on
   October 12, and Gemini 4 Argon (lime) both pages on October 13.
   Print keeps the inks below. */
@media screen {
  .msp-bench,
  .msp-bench .lb-stage,
  .msp-bench .lb-night,
  .main-street-bench,
  .main-street-bench .lb-stage,
  .main-street-bench .lb-night {
    --opus: var(--guava);
    /* A mid gray: plain on the night (about 6:1), where black was faint, and no
       fainter on paper than the other four (Romeo's call, October 10, 2026). */
    --sol: #9e9e9e;
    --sonnet: var(--sonnet-light);
    --grok: var(--grok-light);
    --gemini: var(--gemini-light);
    --fable: var(--fable-light);
    --astra: var(--astra-light);
    --muse: var(--muse-light);
    --argon: var(--argon-light);
    --kimi: var(--kimi-light);
    --glm: var(--glm-light);
    --deepseek: var(--deepseek-light);
    --spark: var(--spark-light);
  }
}

/* The board and the frontier on the night under the street, as on the stage:
   the page's tokens remap, so the table, chart and notes take the stage's inks,
   and paper starts at The benchmarks. --paper is the night itself, so whatever
   is drawn "in paper" (the sticky column, the rims round labels and points, the
   quadrant's tint, the bubbles' lettering) follows. */
.lb-night {
  --paper: hsl(160 46% 10.5%);
  --ink: var(--on-forest);
  --muted: var(--on-forest-muted);
  --rule: rgb(243 241 236 / 0.16);
  --opus: var(--guava);
  --sol: var(--on-forest);
  --sonnet: var(--sonnet-light);
  --grok: var(--grok-light);
  --gemini: var(--gemini-light);
  --fable: var(--fable-light);
  --astra: var(--astra-light);
  --muse: var(--muse-light);
  --argon: var(--argon-light);
  --kimi: var(--kimi-light);
  --glm: var(--glm-light);
  --deepseek: var(--deepseek-light);
  --spark: var(--spark-light);
  --good: hsl(160 45% 52%);
  position: relative;
  isolation: isolate;
  padding-bottom: clamp(72px, 9vw, 128px);
  color: var(--ink);
  background: var(--paper);
}
.lb-night::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
    0 0 / 240px 240px;
  mix-blend-mode: soft-light;
  opacity: 0.5;
}
.lb-night .lb-ghost span {
  --hatch: rgb(243 241 236 / 0.16);
  color: rgb(243 241 236 / 0.06);
}
.lb-night .lb-hatch {
  --track: rgb(243 241 236 / 0.24);
}
.lb-night .lb-table thead th[aria-sort],
.lb-night .lb-glyph {
  color: var(--guava);
  fill: var(--guava);
}
.lb-night .lb-table tbody tr:hover {
  background: rgb(243 241 236 / 0.04);
}
/* On the night the highlighter is a whole guava chip, the figure on it in forest. */
.lb-night .lb-best,
.lb-night .lb-notes .lb-best {
  background: var(--guava);
  color: var(--forest);
}
.lb-night .lb-chart .lb-q-label {
  fill: var(--on-forest);
}
.lb-night :focus-visible {
  outline-color: var(--guava);
}
.lb-night ::selection {
  background: var(--guava);
  color: var(--forest);
}

/* The test: the owner's message beside the 100 problems, one tick each. */
.lb-test {
  display: grid;
  gap: 44px 72px;
  align-items: start;
}
@media (min-width: 900px) {
  .lb-test {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  }
}
.lb-letter blockquote {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--guava);
}
.lb-letter p {
  max-width: 54ch;
}
/* The opening quote mark hangs in the margin, so the first letter lines up. */
.lb-letter p:first-child {
  text-indent: -0.42em;
}
/* The line every owner has written, set as the message's headline. */
.lb-letter strong {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(1.375rem, 2.3vw, 1.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Under the letter, the folder that comes with it: four sizes, then its folders
   as a tree, each with what it holds and how many files. */
.lb-brief {
  display: grid;
  gap: 48px;
}
.lb-folder {
  margin: 0;
}
.lb-folder-sizes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 22px 0 0;
}
.lb-folder-sizes div {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}
.lb-folder-sizes dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Where the column is wide enough, the four sizes share one line. */
@media (min-width: 1300px) {
  .lb-folder-sizes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.lb-folder-sizes dd {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
/* The tree: a line down the left, a stub to each folder. */
.lb-tree {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.lb-tree li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: baseline;
  padding: 7px 0 7px 26px;
  border-bottom: 1px solid var(--rule);
}
.lb-tree li::before,
.lb-tree li::after {
  content: "";
  position: absolute;
  left: 6px;
  border-color: var(--muted);
  border-style: solid;
  border-width: 0;
}
/* The trunk runs the full height of every row but the last, which it reaches halfway. */
.lb-tree li::before {
  top: 0;
  bottom: 0;
  border-left-width: 1.5px;
}
.lb-tree li:last-child::before {
  bottom: auto;
  height: 1.3em;
}
.lb-tree li::after {
  top: 1.3em;
  width: 12px;
  border-top-width: 1.5px;
}
.lb-tree code {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
.lb-tree-n {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lb-tree-what {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
}
.lb-folder-note {
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}
/* One band per part of the business; in it, one column per problem and one
   row per model. --most is the longest band's count, so a column is the same
   width in every band and the longest band just fits. */
.lb-areas {
  --gap: 3px;
  /* The room beside a row for its run-by-run counts: --runs is the most runs any model has. */
  --per: calc(var(--runs) * 1.15rem - 0.3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px 14px;
  align-items: center;
  padding-block: 13px;
  border-bottom: 1px solid var(--rule);
}
.lb-area-name {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lb-area-n {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-align: right;
  color: var(--muted);
}
/* A band's ticks sit under its name, with the run-by-run counts under them. */
.lb-matrix {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}
/* Where the column is wide enough, a band is one line: its name, its count and
   its ticks, with the run-by-run counts beside the rows. The column is that
   wide on a tablet, and again once the two-column page reaches its full width;
   from 900px to 1300px the right-hand column is too narrow for it. */
@media (min-width: 680px) and (max-width: 899px), (min-width: 1300px) {
  .lb-area {
    grid-template-columns: minmax(0, 1fr) 2rem calc(var(--most) * 12px - var(--gap) + 0.75rem + var(--per));
  }
  .lb-matrix {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 0.75rem;
    align-items: center;
  }
}
.lb-cols {
  display: flex;
  gap: var(--gap);
}
/* A column is one problem: a tick per model, in the model's color, filled by
   the share of its runs that fixed the problem (full for every run, empty for
   none). The benchmark is private, so a column never says which problem it
   is. site.js shows its note on hover or tap: where it is, how hard it is to
   spot, and who fixed it. Each band's label gives its counts to screen readers. */
.lb-col {
  position: relative;
  display: grid;
  gap: 4px;
  flex: none;
  width: calc((100% - (var(--most) - 1) * var(--gap)) / var(--most));
}
.lb-tick {
  display: block;
  height: 18px;
  border: 1.5px solid var(--c);
  background: linear-gradient(to top, var(--c) var(--f), transparent 0);
}
.lb-cols .lb-col {
  cursor: help;
}
/* A taller, gapless target for fingers. */
.lb-cols .lb-col::after {
  content: "";
  position: absolute;
  inset: -8px -3px;
}
.lb-cols .lb-col:hover,
.lb-cols .lb-col[data-open] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* The problems each model fixed here, run by run, each model's after its
   color. Each run keeps its place, so the models' first runs line up. */
.lb-per {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  white-space: nowrap;
  color: var(--muted);
}
.lb-per b {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 400;
  line-height: 18px;
}
.lb-per span {
  flex: none;
  width: 0.85rem;
  text-align: right;
}
.lb-per .lb-dot {
  width: 7px;
  height: 7px;
}
/* Beside the rows, a model's counts are on its own row of ticks, so the color goes. */
@media (min-width: 680px) and (max-width: 899px), (min-width: 1300px) {
  .lb-per {
    display: grid;
    gap: 4px;
    width: var(--per);
  }
  .lb-per .lb-dot {
    display: none;
  }
}
/* The header's key to the rows. */
.lb-models {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 16px;
}
.lb-models span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* The key under the ticks: the problems both models always fixed, those fixed
   in some runs and not others, those only one model fixed, and those neither
   did, each beside a column that looks like it. Five kinds with two models and
   six with three, which add up to every problem: in two columns an odd last
   one takes the whole row, and six sit three a row until there's room for all.
   MSP Bench's key has three kinds, which sit three a row. */
.lb-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-key li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (min-width: 760px) {
  .lb-key {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px 28px;
  }
  .lb-key li:last-child:nth-child(odd) {
    grid-column: auto;
  }
}
@media (min-width: 760px) {
  .lb-key:not(:has(li:nth-child(4))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .lb-key:has(li:nth-child(6)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .lb-key {
    gap: 28px 40px;
  }
  .lb-key:has(li:nth-child(6)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 28px 32px;
  }
}
.lb-key li {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.lb-key-n {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.lb-key .lb-col {
  width: 10px;
}

/* The public examples: the only problems the page quotes, three to a row. */
.lb-quotes {
  display: grid;
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .lb-quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.lb-quotes li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-block: 18px 20px;
  border-bottom: 1px solid var(--rule);
}
.lb-quote {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The runs behind the scores: each one's model, score, time and cost, and a
   link to the copy of its scorecard. Where there is room a model's runs share
   one row (--cols, five at most); each model starts a row of its own. */
.lb-runs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .lb-runs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 40px;
  }
}
@media (min-width: 1040px) {
  .lb-runs {
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  }
}
.lb-run-first {
  grid-column-start: 1;
}
.lb-run-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
}
.lb-run .lb-n {
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Which run, then its time and cost: two parts, so a narrow card breaks between them. */
.lb-run .lb-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1em;
}
.lb-run .lb-label span {
  white-space: nowrap;
}
/* What a link is for, underlined in guava; the line fills in under the pointer. */
.lb-run-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-bottom: 3px;
  font-size: 0.9375rem;
  font-weight: 600;
  background: linear-gradient(var(--guava), var(--guava)) 0 100% / 100% 2px no-repeat;
  transition: background-size 0.2s ease;
}
a.lb-run-card:hover .lb-run-go {
  background-size: 100% 100%;
}
/* On a scorecard's own page, the run it is for. */
span.lb-run-card .lb-run-go {
  background: none;
  font-weight: 400;
  color: var(--muted);
}

/* Scorecards: every run on the board, folded away under one ruled line until
   it's opened (site.js opens it for printing and when a link points at it).
   The line reads like the other labels over a list, with its action on the
   right, underlined in guava like the notes' "How the score works". */
.lb-fold > summary {
  cursor: pointer;
  list-style: none;
}
.lb-fold > summary::-webkit-details-marker {
  display: none;
}
.lb-fold-go {
  display: inline-flex;
  gap: 8px;
  text-decoration: underline;
  text-decoration-color: var(--guava);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.lb-rank-head .lb-fold-go,
.lb-rank-head .lb-fold-go span {
  color: var(--ink);
}
.lb-fold-go::after {
  content: "+";
}
.lb-fold[open] .lb-fold-go::after {
  content: "−";
}
.lb-fold-hide,
.lb-fold[open] .lb-fold-show {
  display: none;
}
.lb-fold[open] .lb-fold-hide {
  display: inline;
}
.lb-fold > summary:focus-visible {
  outline: 2px solid var(--guava);
  outline-offset: 4px;
}
/* A row a model: its medium runs' mean, then a card for each run. */
.lb-scs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-sc {
  display: grid;
  gap: 18px 40px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .lb-sc {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr);
  }
}
.lb-sc-model {
  display: grid;
  align-content: start;
  gap: 10px;
}
.lb-sc-model .lb-n {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lb-sc-mean {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.lb-sc-model .lb-hatch {
  max-width: 16rem;
}
.lb-sc-runs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .lb-sc-runs {
    gap: 24px 40px;
  }
}
.lb-sc-runs .lb-run-card {
  gap: 8px;
}
.lb-sc-runs .lb-label {
  letter-spacing: 0.05em;
}
/* A note on a run sits beside its card, in the columns its missing runs would take. */
.lb-sc-runs .lb-run-note {
  grid-column: 2 / -1;
  align-self: start;
}
.lb-fold > .lb-notes {
  margin-top: 24px;
}
/* Which effort's runs show: Medium, High, Xhigh or Max. They are radios, so the
   choice needs no script; where :has() isn't supported they stay hidden and
   every effort's panel shows, each under its own label. */
.lb-efforts {
  display: none;
  gap: 8px;
  margin: 24px 0 4px;
  padding: 0;
  border: 0;
}
.lb-efforts input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lb-efforts label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lb-efforts label small {
  font-size: 0.6875rem;
  color: var(--muted);
}
.lb-efforts label:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.lb-efforts input:checked + label {
  background: var(--ink);
  color: var(--paper);
}
.lb-efforts input:checked + label small {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}
.lb-efforts input:focus-visible + label {
  outline: 2px solid var(--guava);
  outline-offset: 3px;
}
.lb-sc-panel-head {
  margin-top: 28px;
  color: var(--ink);
}
.lb-sc-missing {
  margin-top: 16px;
}
@supports selector(:has(*)) {
  .lb-efforts {
    display: flex;
    flex-wrap: wrap;
  }
  .lb-sc-panel-head {
    margin-top: 20px;
  }
  .lb-fold:has(#sc-effort-medium:checked) .lb-sc-panel:not(.lb-sc-medium),
  .lb-fold:has(#sc-effort-high:checked) .lb-sc-panel:not(.lb-sc-high),
  .lb-fold:has(#sc-effort-xhigh:checked) .lb-sc-panel:not(.lb-sc-xhigh),
  .lb-fold:has(#sc-effort-max:checked) .lb-sc-panel:not(.lb-sc-max) {
    display: none;
  }
}

/* Leaderboard table: the index first, then each benchmark's score with its
   cost per task beneath. Scrolls sideways on narrow screens. */
.lb-scroll {
  margin-inline: -6px;
  padding-inline: 6px;
  overflow-x: auto;
}
.lb-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}
/* Where the table is wider than the column: a label says there is more, the
   model's name stays put as the rest slides under it, and the far edge fades
   until the last column is in view. */
.lb-swipe {
  display: none;
}
@media (max-width: 939px) {
  .lb-swipe {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: -14px;
  }
  .lb-table :is(.lb-model, thead th:nth-child(2)) {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
    box-shadow: inset -1px 0 var(--rule);
  }
  /* No room on the left for the highlighter's overhang: the model's column is first. */
  .lb-scroll {
    margin-left: 0;
    padding-left: 0;
  }
  @supports (animation-timeline: scroll()) {
    .lb-scroll {
      -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--lb-fade));
      mask-image: linear-gradient(to left, transparent, #000 var(--lb-fade));
      animation: lb-unfade linear both;
      animation-timeline: scroll(self inline);
    }
  }
}
@media (max-width: 599px) {
  .lb-table :is(th, td):first-child {
    display: none;
  }
  .lb-table .lb-model {
    min-width: 9.5rem;
    padding-left: 0;
  }
  .lb-table .lb-n {
    font-size: 1rem;
    white-space: nowrap;
  }
}
@property --lb-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@keyframes lb-unfade {
  0%,
  88% {
    --lb-fade: 56px;
  }
  100% {
    --lb-fade: 0px;
  }
}
.lb-table th,
.lb-table td {
  padding: 16px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  text-align: right;
}
/* The rank and the model read left to right; every figure is set right, so the
   numbers line up down each column. The dollars' header sits over its figure. */
.lb-table :is(th, td):nth-child(-n + 2),
.lb-table th.lb-primary {
  text-align: left;
}
.lb-table :is(th, td):first-child {
  padding-left: 0;
}
.lb-table :is(th, td):last-child {
  padding-right: 0;
}
.lb-table thead th {
  padding-block: 12px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
.lb-table tbody tr {
  transition: background-color 0.15s ease;
}
.lb-table tbody tr:hover {
  background: color-mix(in srgb, var(--guava-soft) 45%, var(--paper));
}
/* Dotted-label buttons take the header's lettering, and every label sits on the rule. */
.lb-table thead .tip {
  text-transform: inherit;
  letter-spacing: inherit;
  line-height: 1.5;
}
.lb-table thead th {
  vertical-align: bottom;
}
/* site.js counts the big figures up in a copy of each, held at a fixed width
   with equal-width digits while it counts, so the rows around it stay still. */
.count {
  display: inline-block;
  white-space: nowrap;
}
.count.counting {
  font-variant-numeric: tabular-nums;
}
/* The column the table is sorted by takes the accent. */
.lb-table thead th[aria-sort] {
  color: var(--accent);
}
/* The sort button site.js adds beside each score column's label: a faint arrow
   that firms up on the sorted column and turns over for low to high. */
.lb-sort {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -6px -6px -6px 2px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  vertical-align: middle;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
.lb-sort .arrow {
  width: 12px;
  height: 12px;
}
.lb-sort:hover,
th[aria-sort] .lb-sort {
  opacity: 1;
}
th[aria-sort="ascending"] .lb-sort .arrow {
  transform: rotate(180deg);
}
/* Scores are set in the mono face, so their digits and points line up down a column. */
.lb-v {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}
/* The best score in a column: a stroke of guava highlighter. Positioned, so
   its screen-reader label stays inside the table's scroller. */
.lb-best {
  position: relative;
  padding-inline: 4px;
  margin-inline: -4px;
  background: linear-gradient(transparent 54%, var(--guava) 54% 94%, transparent 94%);
}
.lb-c {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lb-table td .lb-c {
  white-space: nowrap;
}
.lb-table .lb-pos {
  width: 2.75rem;
  padding-top: 22px;
}
.lb-model {
  min-width: 190px;
  font-weight: 400;
}
/* On a desktop the index is set left, beside the model. With the script, every
   column then takes only its figures' width and the room left over is shared out
   evenly, so the space between one column's text and the next is the same all the
   way across (site.js sets --lb-gap and each header's width; Romeo's call, October
   10, 2026). A header label wider than its figures reaches out over the gap on its
   open side, and never counts toward its column's width. */
@media (min-width: 940px) {
  .lb-table :is(th, td):nth-child(3) {
    text-align: left;
  }
}
.lb-th {
  display: inline-block;
}
.lb-table:is(.lb-balanced, .lb-measuring) .lb-th {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  contain: inline-size;
}
.lb-table:is(.lb-balanced, .lb-measuring) .lb-th > * {
  flex: none;
}
.lb-table:is(.lb-balanced, .lb-measuring) :is(th:nth-child(-n + 3), th.lb-primary) .lb-th {
  justify-content: flex-start;
}
.lb-table:is(.lb-balanced, .lb-measuring) .lb-model {
  min-width: 0;
}
.lb-table:is(.lb-balanced, .lb-measuring) .lb-pos {
  width: auto;
}
.lb-table:is(.lb-balanced, .lb-measuring) .lb-index-row {
  grid-template-columns: auto 120px;
}
.lb-table:is(.lb-balanced, .lb-measuring) td.lb-index {
  min-width: 0;
}
.lb-table.lb-measuring {
  width: auto;
  min-width: 0;
}
.lb-table.lb-measuring :is(th, td) {
  padding-inline: 0;
}
.lb-table.lb-balanced :is(th, td) {
  padding-inline: calc(var(--lb-gap) / 2);
}
.lb-table.lb-balanced :is(th, td):first-child {
  padding-left: 0;
}
.lb-table.lb-balanced :is(th, td):last-child {
  padding-right: 0;
}

.lb-model .lb-n {
  white-space: nowrap;
}
.lb-n {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.lb-model .lb-c {
  font-family: var(--sans);
  font-size: 0.8125rem;
}
.lb-dot {
  width: 10px;
  height: 10px;
  flex: none;
}
/* The dollars protected lead with a bar, not with size: the figure is set like
   every other (Romeo's call, October 10, 2026). */
.lb-table td.lb-index {
  min-width: 190px;
}
/* A grid inside the cell, not on it, so the cell keeps the row's border. */
.lb-index-row {
  display: grid;
  grid-template-columns: auto minmax(76px, 1fr);
  gap: 4px 18px;
  align-items: center;
}
/* The time of a run sits under the dollars, as each score's cost sits under it:
   the grid's row gap is its margin. */
.lb-index-row .lb-c {
  grid-column: 1;
  margin-top: 0;
}
.lb-notes {
  display: grid;
  gap: 6px;
  max-width: 95ch;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.lb-notes p {
  max-width: none;
}
.lb-notes a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--guava);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.lb-notes .lb-best {
  color: var(--ink);
}
/* The longer notes wait behind one line, underlined in guava like the notes' links. */
.lb-more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--guava);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.lb-more summary::-webkit-details-marker {
  display: none;
}
.lb-more summary::after {
  content: "+";
  font-weight: 500;
}
.lb-more[open] summary::after {
  content: "−";
}
.lb-more p + p {
  margin-top: 6px;
}

/* Frontier: the chart beside the list of Pareto-optimal models. */
.lb-frontier {
  display: grid;
  gap: 36px 56px;
  align-items: start;
}
@media (min-width: 900px) {
  .lb-frontier {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
.lb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.lb-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lb-key-q {
  width: 18px;
  height: 11px;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--good) 50%, var(--paper)) 0 2px,
    color-mix(in srgb, var(--good) 14%, var(--paper)) 2px 5px
  );
}
.lb-key-line {
  width: 24px;
  border-top: 2px dotted var(--ink);
}
.lb-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 10px;
  overflow: visible;
}
.lb-chart text {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}
.lb-chart .lb-axis-title {
  letter-spacing: 0.08em;
}
.lb-chart .lb-lbl {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.lb-chart .lb-q-label {
  fill: var(--forest-2);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.lb-chart .lb-q-sub {
  font-weight: 400;
}
/* A point's label keeps a rim of paper, so the Pareto line passes behind it. */
.lb-chart :is(.lb-lbl, .lb-lbl-sub) {
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.lb-chart .lb-lbls-narrow {
  display: none;
}
/* The drawing shrinks with the screen; on phones its lettering is set larger to
   stay readable. */
@media (max-width: 599px) {
  .lb-chart text {
    font-size: 18px;
  }
  .lb-chart .lb-lbl {
    font-size: 19px;
  }
  .lb-chart .lb-q-label {
    font-size: 15px;
  }
  .lb-chart .lb-lbl-sub {
    display: none;
  }
  /* A chart drawn with a phone's set of labels shows that set instead. */
  .lb-chart .lb-lbls-wide {
    display: none;
  }
  .lb-chart .lb-lbls-narrow {
    display: inline;
  }
}
/* Green, as on other benchmarks' charts: cheaper and better is the good corner. */
.lb-q-good {
  fill: color-mix(in srgb, var(--good) 14%, var(--paper));
}
.lb-awning-stripe {
  fill: color-mix(in srgb, var(--good) 36%, var(--paper));
}
.lb-grid {
  stroke: var(--rule);
  stroke-dasharray: 2 4;
}
.lb-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}
/* A label set a step away from its point, on a crowded chart, points back to it. */
.lb-leader {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
}
.lb-guide {
  fill: none;
  stroke: var(--c);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.55;
}
.lb-pareto {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 0.1 7;
  stroke-linecap: round;
}
.lb-point rect {
  stroke: var(--paper);
  stroke-width: 3;
  paint-order: stroke;
}
.lb-pareto-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: end;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
}
.lb-pareto-row .lb-n {
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lb-s {
  grid-row: span 2;
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.lb-pareto-row .lb-c {
  margin: 0 0 0 19px;
  text-transform: uppercase;
}

/* Run to run: the score and the dollars protected side by side, each model's
   runs at every effort as a hatched bar from lowest to highest, with a square
   at their mean. The figures sit above the bar, so color isn't the only cue. */
.lb-spread {
  display: grid;
  gap: 36px 56px;
  align-items: start;
}
@media (min-width: 900px) {
  .lb-spread {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.lb-chart .lb-spread-v {
  fill: var(--ink);
  font-size: 12px;
  letter-spacing: 0.02em;
}
/* The mean, bold, so it stands out from the range beside it (Romeo's call, October 11, 2026). */
.lb-chart .lb-spread-mean {
  font-weight: 700;
}
.lb-spread-end {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
}
@media (max-width: 599px) {
  .lb-chart .lb-spread-v {
    font-size: 18px;
  }
  .lb-spread-chart .lb-tick-odd {
    display: none;
  }
}

/* Benchmarks: four columns under a bar of four equal parts, the index's 25%
   shares. Our own test takes the guava; the three public ones the forest. */
.lb-pillars {
  position: relative;
  display: grid;
  gap: 0 5px;
  padding-top: 30px;
}
@media (min-width: 640px) {
  .lb-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1040px) {
  .lb-pillars {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.lb-pillar {
  display: grid;
  align-content: start;
  padding: 0 26px 40px 0;
}
/* One bar across all the columns, each benchmark's part as long as its share of the index;
   a 5px gap between parts, none after the last. A swatch by each label ties it to its part. */
.lb-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--at) * (100% + 5px));
  width: calc(var(--w) * (100% + 5px) - 5px);
  height: 16px;
  background: var(--shade);
  transform-origin: 0 50%;
}
.lb-pillar > .lb-label:first-child::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  background: var(--shade);
}
.lb-pillar:nth-child(1) { --shade: var(--guava); }
.lb-pillar:nth-child(2) { --shade: var(--forest); }
.lb-pillar:nth-child(3) { --shade: color-mix(in srgb, var(--forest) 72%, var(--paper)); }
.lb-pillar:nth-child(4) { --shade: color-mix(in srgb, var(--forest) 48%, var(--paper)); }
.lb-pillar:nth-child(5) { --shade: color-mix(in srgb, var(--forest) 28%, var(--paper)); }
.lb-big {
  margin-top: 26px;
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.055em;
}
/* Each benchmark's count in its part's color (Romeo's call, October 14, 2026). */
.lb-pillar .lb-big {
  color: var(--shade);
}
.lb-big small {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.lb-pillar h3 {
  margin-top: 26px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.lb-pillar h3 a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(var(--guava), var(--guava)) 0 100% / 0 3px no-repeat;
  transition: background-size 0.25s ease;
}
.lb-pillar h3 a:hover {
  background-size: 100% 3px;
}
.lb-pillar p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}
.lb-by {
  display: block;
  margin-top: 14px;
}

/* Tooltips. A dotted label is a button; site.js shows its note in one bubble,
   placed beside it on screen but kept right after it in the page so Tab reaches
   the note's links. The notes themselves stay in the HTML (.tip-texts). */
.tip {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.tip:hover,
.tip[aria-expanded="true"] {
  text-decoration-color: currentColor;
}
.tip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.tip-bubble {
  position: fixed;
  z-index: 60;
  display: block;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 12px 32px rgb(21 32 27 / 0.24);
}
.tip-bubble[hidden] {
  display: none;
}
.tip-bubble .tip-title {
  display: block;
  margin-bottom: 4px;
  font-weight: 650;
}
.tip-source {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
}
.tip-bubble .tip-source {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
}
.tip-bubble a {
  color: var(--paper);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--guava);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* The notes as a list, shown only without JavaScript and in print. */
.tip-texts {
  display: none;
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 80ch;
}
.tip-text {
  display: block;
  margin-top: 6px;
}
.tip-texts .tip-title {
  color: var(--ink);
  font-weight: 600;
}
.tip-texts .tip-source {
  display: inline;
  margin-left: 4px;
}
.tip-texts a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--guava);
}

/* A scorecard's page: the stage without the street, with the scorecard's title,
   score and opening lines beside the score as a bar. */
.lb-stage-plain {
  padding-bottom: clamp(44px, 6vw, 80px);
}
.lb-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--on-forest-muted);
  transition: color 0.18s ease;
}
.lb-back:hover {
  color: var(--on-forest);
}
.lb-back .arrow {
  transform: scaleX(-1);
}
/* The title is "the benchmark and its version — the model and its effort": the
   first part sits over the second as a label. */
.lb-card-title {
  max-width: none;
  font-size: clamp(2rem, 4.3vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}
.lb-card-title .lb-label {
  display: block;
  margin-bottom: 14px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--on-forest-muted);
}
.lb-stage-plain .hero-lede {
  margin-top: 0;
}
.lb-stage-plain .hero-lede + .hero-lede {
  margin-top: -10px;
}
/* On the stage, under the score: the counts by area, in the stage's inks. */
.lb-stage-areas {
  --ink: var(--on-forest);
  --muted: var(--on-forest-muted);
  --rule: rgb(243 241 236 / 0.16);
  margin-top: 30px;
}
.lb-stage-areas .lb-facts thead th {
  border-bottom-width: 1px;
  border-bottom-color: rgb(243 241 236 / 0.4);
}
/* On paper: the run's details. */
.lb-sheet {
  max-width: 46rem;
}
.lb-facts {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--ink);
}
.lb-facts th,
.lb-facts td {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
}
.lb-facts tbody th {
  width: 44%;
  padding-right: 20px;
  font-weight: 400;
  color: var(--muted);
}
.lb-facts td {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.lb-facts thead th {
  padding-block: 0 12px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* A table of counts (9/14): the name over its bar, the count beside them. */
.lb-facts-counts {
  border-top: 0;
}
.lb-facts-counts tbody th {
  width: auto;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: inherit;
}
.lb-facts-counts .lb-hatch {
  margin-top: 10px;
}
.lb-facts-counts :is(th, td):last-child {
  width: 5rem;
  text-align: right;
}
.lb-facts-counts td {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.lb-facts-note {
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--muted);
}
/* The scorecard's closing lines keep their case: one names the run. */
.lb-notes-plain {
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.lb-notes-plain :is(code, strong) {
  font: inherit;
  font-weight: 500;
  color: var(--ink);
}

/* The logo, writ large: its bench stands on the footer's edge (the logo file
   as a mask, cut off above the name), and the name runs across the footer. */
.lb-horizon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: clamp(190px, 30vw, 330px);
  margin-top: clamp(40px, 6vw, 80px);
  overflow: hidden;
}
/* Behind it, a low sun in the page's hatching. */
.lb-horizon::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(92vw, 660px);
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  background:
    repeating-linear-gradient(115deg, var(--guava) 0 2.4px, transparent 2.4px 7px),
    linear-gradient(color-mix(in srgb, var(--guava-soft) 70%, var(--paper)), var(--guava-soft));
  transform: translateX(-50%);
}
.lb-horizon-bench {
  position: relative;
  display: block;
  width: min(78vw, 600px);
  aspect-ratio: 720 / 199;
  background: var(--forest);
  -webkit-mask: var(--logo) top center / 100% auto no-repeat;
  mask: var(--logo) top center / 100% auto no-repeat;
}
.lb-ghost-foot {
  padding-top: clamp(30px, 4.6vw, 60px);
}
.lb-ghost-foot span {
  --hatch: rgb(243 241 236 / 0.2);
  color: rgb(243 241 236 / 0.075);
}

/* The close: Main Street again, drawn from the hero's street with <use>,
   its roofs rising behind the footer's big word and the footer on its
   pavement, so the page ends on the street it opened with. */
.lb-ghost-foot {
  position: relative;
  z-index: 1;
}
.foot-street {
  --street-h: clamp(130px, 17vw, 290px);
  --street-at: 50%;
  position: relative;
  height: var(--street-h);
  margin-top: calc(var(--street-h) * -0.16);
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  background: radial-gradient(ellipse 34% 100% at var(--street-at) 100%, rgb(229 177 176 / 0.2), transparent 72%);
}
@media (min-width: 900px) {
  .foot-street {
    --street-at: 32%;
  }
}
@media screen {
  .foot-street + .footer-inner {
    background: hsl(160 50% 6%);
    box-shadow: 0 0 0 100vmax hsl(160 50% 6%);
    clip-path: inset(0 -100vmax);
  }
}

/* The header rides the stage: clear over the forest with cream lettering,
   then paper once the stage has passed. The stage's own scroll position drives
   it, so there is no script; browsers without scroll timelines, and readers
   who ask for less motion, keep the ordinary paper header throughout. */
@supports (timeline-scope: --lb-stage) {
  .bench {
    timeline-scope: --lb-stage;
  }
  /* Inset 0: measure against the whole window, not the scroll padding kept for anchors. */
  .lb-stage {
    view-timeline: --lb-stage block;
    view-timeline-inset: 0;
  }
  /* Hovered links and buttons drop out, so their own hover colors still show. */
  .bench .site-header,
  .bench .site-header .wordmark,
  .bench .site-nav > a:not(:hover),
  .bench .site-nav .nav-menu:not(:hover) .nav-menu-button:not([aria-expanded="true"]),
  .bench .site-header .button:not(:hover) {
    animation: lb-header linear both;
    animation-timeline: --lb-stage;
    animation-range: exit calc(100% - 120px) exit calc(100% - 68px);
  }
  .bench .site-header .wordmark {
    animation-name: lb-header-ink;
  }
  .bench .site-nav > a:not(:hover),
  .bench .site-nav .nav-menu:not(:hover) .nav-menu-button:not([aria-expanded="true"]) {
    animation-name: lb-header-link;
  }
  .bench .site-header .button:not(:hover) {
    animation-name: lb-header-button;
  }
  @keyframes lb-header {
    from {
      background-color: hsl(160 47% 10% / 0.86);
      border-bottom-color: transparent;
    }
  }
  @keyframes lb-header-ink {
    from {
      color: var(--on-forest);
    }
  }
  @keyframes lb-header-link {
    from {
      color: var(--on-forest-muted);
    }
  }
  @keyframes lb-header-button {
    from {
      background-color: var(--guava);
      color: var(--forest);
    }
  }
}

/* Motion: the bars draw in on load and the street's lights come on; further
   down, each big word drifts a little as it crosses the screen. All of it is
   decoration over finished states, and styles.css switches it off for readers
   who ask for less motion. */
@keyframes lb-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes lb-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes lb-light {
  from {
    opacity: 0;
  }
}
.lb-hatch i {
  animation: lb-reveal 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.35s + var(--i, 0) * 0.14s);
}
.lb-hero-copy > *,
.lb-rank-head,
.lb-rank-row {
  animation: lb-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.lb-hero-copy > :nth-child(2) { animation-delay: 0.06s; }
.lb-hero-copy > :nth-child(3) { animation-delay: 0.12s; }
.lb-hero-copy > :nth-child(4) { animation-delay: 0.18s; }
.lb-rank-head { animation-delay: 0.14s; }
.lb-rank-row { animation-delay: calc(0.2s + var(--i, 0) * 0.1s); }
.bk-glass,
.bk-door,
.bk-bulb,
.bk-upstairs,
.st-halo,
.st-pool {
  animation: lb-light 1.4s ease-out 0.45s both;
}
.bk-upstairs {
  animation-delay: 1.1s;
}
.st-lamp,
.st-lampglow {
  animation: lb-light 0.9s ease-out 0.2s both;
}
@supports (animation-timeline: view()) {
  @keyframes lb-drift {
    from {
      transform: translateX(-2.5%);
    }
    to {
      transform: translateX(2.5%);
    }
  }
  .lb-ghost span {
    animation: lb-drift linear both;
    animation-timeline: view();
  }
  @keyframes lb-sink {
    to {
      transform: translateY(26px);
    }
  }
  .st-distance {
    animation: lb-sink linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  @keyframes lb-grow {
    from {
      transform: scaleX(0);
    }
  }
  .lb-pillar::before {
    animation: lb-grow linear both;
    animation-timeline: view();
    animation-range: entry calc(10% + var(--i, 0) * 10%) cover calc(26% + var(--i, 0) * 4%);
  }
}

@media (forced-colors: active) {
  :root {
    --opus: Highlight;
    --sol: CanvasText;
    --sonnet: LinkText;
    --grok: GrayText;
    --gemini: VisitedText;
    --fable: Mark;
    --astra: ActiveText;
    --muse: SelectedItem;
    --argon: AccentColor;
    --kimi: ButtonBorder;
    --glm: LinkText;
    --deepseek: FieldText;
    --spark: ButtonText;
  }
  .lb-hatch,
  .lb-dot,
  .lb-chart,
  .lb-tick {
    forced-color-adjust: none;
  }
  .tip-bubble {
    border: 1px solid CanvasText;
  }
  .bench::after,
  .lb-ghost,
  .lb-street,
  .foot-street {
    display: none;
  }
  .bench-logo img {
    filter: none;
  }
  .lb-horizon-bench {
    background: CanvasText;
  }
}

@media print {
  /* Every model in the ranking, not just the top five. */
  .lb-ranking.lb-scrolls {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .lb-rank-more {
    display: none;
  }
  /* Every effort's scorecards, not just the one picked. */
  .lb-efforts {
    display: none !important;
  }
  .lb-fold .lb-sc-panel {
    display: block !important;
  }
  .lb-night {
    --paper: #fff;
    --ink: #000;
    --muted: #333;
    --rule: #bbb;
    --opus: var(--accent);
    --sol: var(--forest);
    --sonnet: var(--sonnet-ink);
    --grok: var(--grok-ink);
    --gemini: var(--gemini-ink);
    --fable: var(--fable-ink);
    --astra: var(--astra-ink);
    --muse: var(--muse-ink);
    --argon: var(--argon-ink);
    --kimi: var(--kimi-ink);
    --glm: var(--glm-ink);
    --deepseek: var(--deepseek-ink);
    --spark: var(--spark-ink);
    --good: hsl(160 52% 36%);
    padding-bottom: 0;
    background: none;
  }
  .lb-night::after {
    display: none;
  }
  .bench::after,
  .lb-street,
  .foot-street,
  .lb-swipe,
  .lb-stage::after,
  .lb-ghost,
  .lb-actions,
  .lb-horizon {
    display: none;
  }
  /* The header prints as it is on paper, wherever the page was scrolled to. */
  .bench .site-header,
  .bench .site-header * {
    animation: none !important;
  }
  .lb-stage {
    --opus: var(--accent);
    --sol: var(--forest);
    --sonnet: var(--sonnet-ink);
    --grok: var(--grok-ink);
    --gemini: var(--gemini-ink);
    --fable: var(--fable-ink);
    --astra: var(--astra-ink);
    --muse: var(--muse-ink);
    --argon: var(--argon-ink);
    --kimi: var(--kimi-ink);
    --glm: var(--glm-ink);
    --deepseek: var(--deepseek-ink);
    --spark: var(--spark-ink);
    margin-top: 0;
    padding: 0 0 24px;
    background: none;
    box-shadow: none;
    color: #000;
  }
  .bench-logo img {
    filter: none;
    opacity: 1;
  }
  .lb-stage .hero-lede,
  .lb-stage .hero-for,
  .lb-stage .lb-rank-head,
  .lb-stage .lb-rank-head span + span,
  .lb-stage .lb-pos,
  .lb-name small,
  .lb-kept,
  .lb-kept strong,
  .lb-score,
  .lb-score small {
    color: #000;
  }
  .lb-name .lb-effort {
    border-color: #999;
  }
  .lb-rank-row,
  .lb-stage .lb-rank-head {
    border-bottom-color: #999;
  }
  .lb-stage .lb-hatch {
    --track: #bbb;
  }
  .lb-hatch,
  .lb-dot,
  .lb-chart,
  .lb-tick,
  .lb-pillar::before,
  .lb-pillar > .lb-label:first-child::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tip-texts {
    display: block;
  }
  .tip-bubble {
    display: none;
  }
}

/* AI Operations (/observability): Romeo's own Codex and Claude Code usage from
   Elastic, laid out like the "Guava — AI Operations" dashboard there. The plain
   stage holds the title, the range picker and the four big figures; the night
   holds the charts and tables; paper holds how it works. ops.js draws every
   figure. Codex takes Astra's teal and Claude Code the guava pink: the colors of
   their makers' models on the benchmark pages. */
.lb-codex { --c: var(--astra); }
.lb-claude { --c: var(--opus); }
.ops .lb-legend i,
.ops-key {
  display: inline-block;
  width: 11px;
  height: 11px;
  background: var(--c);
}
.ops-key {
  margin-right: 10px;
  vertical-align: -0.05em;
}
.ops .lb-hero-copy > .lb-label {
  color: var(--on-forest-muted);
}
.ops-title {
  max-width: none;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.ops-live {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}
.ops-range {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ops-range button {
  padding: 8px 15px;
  border: 1.5px solid rgb(243 241 236 / 0.4);
  border-radius: 999px;
  background: transparent;
  font: 500 0.8125rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-forest);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ops-range button:hover {
  background: rgb(243 241 236 / 0.1);
}
.ops-range button[aria-pressed="true"] {
  border-color: var(--on-forest);
  background: var(--on-forest);
  color: var(--forest);
}
.ops-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--on-forest-muted);
}
.ops-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.ops-status[data-state="live"] {
  color: var(--on-forest);
}
.ops-status[data-state="live"] i {
  background: hsl(150 60% 55%);
  box-shadow: 0 0 0 0 hsl(150 60% 55% / 0.6);
  animation: ops-pulse 2s ease-out infinite;
}
.ops-status[data-state="sample"] i,
.ops-status[data-state="stale"] i {
  background: var(--guava);
}
@keyframes ops-pulse {
  to { box-shadow: 0 0 0 9px hsl(150 60% 55% / 0); }
}
/* The four big figures, two by two, each over its share of the two tools' total. */
.ops-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}
.ops-kpi {
  display: grid;
  gap: 12px;
  padding-block: 22px 24px;
  border-bottom: 1px solid rgb(243 241 236 / 0.16);
}
.ops-kpi .lb-label {
  color: var(--on-forest-muted);
}
.ops-big {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--c);
}
.ops-kpi .lb-hatch i {
  transition: width 0.6s ease;
}
.ops-kpi-note {
  margin-top: 14px;
  font-size: 0.6875rem;
  color: var(--on-forest-muted);
}
@media (max-width: 479px) {
  .ops-kpis {
    gap: 0 16px;
  }
  .ops-big {
    font-size: clamp(1.5rem, 7.4vw, 1.875rem);
  }
}

/* Requests over time beside the latest telemetry and the requests' time. */
.ops-split {
  display: grid;
  gap: 40px 56px;
  align-items: start;
}
@media (min-width: 1000px) {
  .ops-split {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
.ops-chart {
  display: grid;
  gap: 14px;
  margin: 0;
}
.ops-chart-box {
  min-height: 220px;
}
.ops-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ops-grid {
  stroke: var(--rule);
  stroke-dasharray: 2 4;
}
.ops-axis {
  stroke: var(--muted);
}
.ops-tick {
  font: 400 11px var(--mono);
  fill: var(--muted);
}
.ops-bar {
  fill: var(--c);
}
.ops-bar:hover {
  opacity: 0.75;
}
.ops-gap {
  margin-top: 36px;
}
.ops-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ops-table caption {
  margin-bottom: 4px;
  text-align: left;
}
.ops-table :is(th, td) {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  white-space: nowrap;
}
.ops-table th[scope="row"] {
  text-align: left;
  font-weight: 600;
}
.ops-table td + td,
.ops-table th + td {
  padding-left: 18px;
}
.ops-latest td {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

/* Tokens by model and tool calls: one column a tool. */
.ops-pair {
  display: grid;
  gap: 48px 56px;
  align-items: start;
}
@media (min-width: 900px) {
  .ops-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ops-pair .lb-rank-head {
  margin-bottom: 4px;
}
.ops-pair .lb-rank-head span:first-child::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 10px;
  background: var(--c);
}
.ops-models {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ops-model {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 18px;
  align-items: center;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
}
.ops-model-name {
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.ops-model-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.4em;
  gap: 10px;
  align-items: center;
}
/* Input is the paler of the two, so output, the work done, reads first. */
.ops-input .lb-hatch i {
  opacity: 0.55;
}
.ops-fig {
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 599px) {
  .ops-model {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ops-model-name {
    grid-column: 1 / -1;
  }
}
.ops-tools {
  table-layout: fixed;
}
.ops-tool {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400 !important;
}
.ops-calls {
  width: 42%;
}
.ops-calls .lb-hatch {
  display: inline-block;
  width: calc(100% - 4.5em);
  margin-right: 10px;
  vertical-align: middle;
}
.ops-tools td:last-child {
  width: 6.2em;
}
.ops-empty {
  padding: 16px 0;
  color: var(--muted);
  text-align: left !important;
}
.ops-how {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ops-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: 12px;
}
.ops-cta p {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}
@media (prefers-reduced-motion: reduce) {
  .ops-status[data-state="live"] i {
    animation: none;
  }
}
@media print {
  .ops-range,
  .ops-cta .button {
    display: none;
  }
  .ops-bar,
  .ops-key,
  .ops-pair .lb-rank-head {
  margin-bottom: 4px;
}
.ops-pair .lb-rank-head span:first-child::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Guava Mode (/guava-mode): the guava-mode plugin. The plain stage holds the
   title and, beside it, the line to paste and a few facts; the night holds
   what's inside, the problems it fixes and the 23 rules; paper holds setup. */
.gm .lb-hero-copy > .lb-label {
  color: var(--on-forest-muted);
}
.gm-prompt {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px solid rgb(243 241 236 / 0.3);
  border-radius: var(--radius-sm);
  background: rgb(243 241 236 / 0.06);
}
.gm-prompt code {
  flex: 1;
  font-family: var(--mono);
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  line-height: 1.55;
  color: var(--on-forest);
  overflow-wrap: anywhere;
}
.gm-copy {
  flex: none;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid rgb(243 241 236 / 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--on-forest);
  font: 600 0.8125rem/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.gm-copy:hover,
.gm-copy[data-copied] {
  background: var(--guava);
  border-color: var(--guava);
  color: var(--forest);
}
.gm-facts {
  --ink: var(--on-forest);
  --muted: var(--on-forest-muted);
  --rule: rgb(243 241 236 / 0.16);
  margin-top: 28px;
  font-variant-numeric: normal;
}
.gm-facts :is(th, td) {
  white-space: normal;
  vertical-align: baseline;
}
.gm-facts th[scope="row"] {
  padding-right: 18px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
.gm-facts td {
  text-align: left;
  color: var(--ink);
}
.gm-facts .text-link {
  display: inline;
  min-height: 0;
  color: var(--ink);
}
@media (max-width: 599px) {
  .gm-facts tr {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
  }
  .gm-facts :is(th, td) {
    padding: 0;
    border: 0;
  }
  .gm-facts th + td {
    padding-left: 0;
  }
}
.gm-parts h3 small {
  display: inline-block;
  margin-left: 6px;
  vertical-align: 0.2em;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Why: each problem beside its fix, one row a problem. */
.gm-fixes {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.gm-fixes li {
  display: grid;
  gap: 6px 40px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .gm-fixes li {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: baseline;
  }
}
.gm-fixes h3 {
  font-size: clamp(1.1875rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.gm-fixes p {
  line-height: 1.55;
  color: var(--muted);
}
.gm-fixes .text-link,
.gm .lb-notes .text-link {
  display: inline;
  min-height: 0;
  color: var(--ink);
}

/* The 23 rules, numbered like the board's positions, two columns when there's room. */
.gm-rules {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
  columns: 2 380px;
  column-gap: 56px;
}
.gm-rules li {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  break-inside: avoid;
  line-height: 1.5;
  counter-increment: rule;
}
.gm-rules li::before {
  content: "[" counter(rule, decimal-leading-zero) "]";
  padding-top: 0.2em;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--guava);
}
.gm .lb-notes {
  margin-top: 20px;
  color: var(--muted);
}
.gm .faq-list code {
  font-family: var(--mono);
  font-size: 0.875em;
}
@media print {
  .gm-copy {
    display: none;
  }
}