:root {
  /* Dark palette — black surfaces, white ink (hue ~255) */
  --bg-deep:     oklch(13% 0.012 255);
  --bg-paper:    oklch(17% 0.014 255);
  --bg-elev:     oklch(21% 0.016 255);
  --bg-hover:    oklch(26% 0.02 255);
  --bg-zebra:    oklch(19% 0.014 255);

  --ink-deep:    oklch(98% 0.004 255);
  --ink:         oklch(90% 0.008 255);
  --ink-mute:    oklch(72% 0.014 255);
  --ink-faint:   oklch(60% 0.016 255);
  --ink-ghost:   oklch(46% 0.018 255);

  --rule:        oklch(31% 0.014 255);
  --rule-soft:   oklch(25% 0.012 255);
  --rule-strong: oklch(42% 0.02 255);

  --accent:        oklch(72% 0.15 250);
  --accent-strong: oklch(82% 0.13 250);
  --accent-text:   oklch(80% 0.12 250);
  --accent-tint:   oklch(30% 0.06 255);
  --accent-tint-2: oklch(36% 0.08 255);

  --gold:   oklch(80% 0.14 85);
  --silver: oklch(80% 0.02 255);
  --bronze: oklch(68% 0.10 50);

  /* Size badge. Deliberately off the blue palette (hue 25) so it separates from the
   * accent and pops out of the model cell. Size is not a score, so the red carries
   * no better/worse meaning — it is a label, not a rating. */
  --size-ink:  oklch(76% 0.16 25);
  --size-tint: oklch(24% 0.045 25);
  --size-rule: oklch(40% 0.075 25);

  /* Background of the single highlighted table row. Sits on the accent hue and a
   * touch above --accent-tint in chroma so one row reads as blue on its own. */
  --row-hl: oklch(31% 0.07 250);

  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.4),
                 0 10px 30px -14px oklch(0% 0 0 / 0.7);

  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", "JetBrains Mono", "IBM Plex Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1200px 620px at 50% -12%, oklch(24% 0.04 255) 0%, transparent 72%),
    var(--bg-deep);
  background-attachment: fixed;
  color: var(--ink-deep);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
header.hero {
  max-width: 1500px;
  margin: 0 auto;
  padding: 38px 26px 8px;
  text-align: center;
}
.hero h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
}
.hero h1 .flag { font-weight: 400; }
.hero .badge-row { margin-top: 10px; }
.hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-tint);
  border: 1px solid oklch(86% 0.05 250);
  padding: 3px 11px;
  border-radius: 999px;
}
.hero .badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.hero .tagline {
  margin: 8px auto 0;
  max-width: 60ch;
  font-size: 13.5px;
  color: var(--ink-mute);
}
.hero .tagline code,
footer.foot code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--accent-text);
  background: var(--accent-tint);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * Toolbar
 * ------------------------------------------------------------------ */
.toolbar {
  max-width: 1500px;
  margin: 18px auto 0;
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.search {
  position: relative;
  flex: 0 1 320px;
}
.search input {
  width: 100%;
  appearance: none;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 12px 8px 32px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-deep);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.search input::placeholder { color: var(--ink-ghost); }
.search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(55% 0.16 250 / 0.16);
}
.search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--ink-faint);
  pointer-events: none;
}
.pills {
  display: inline-flex;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 3px;
}
.pill {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-mute);
  padding: 5px 13px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.pill:hover { color: var(--ink-deep); }
.pill[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 600;
}
.toolbar-spacer { flex: 1 1 auto; }

/* Benchmark visibility menu */
.bench-menu { position: relative; }
.bench-toggle {
  appearance: none;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-deep);
  padding: 8px 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color 140ms ease, background 140ms ease;
}
.bench-toggle:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
/* Column glyph: two filled bars and one outlined, i.e. "some of these are on" —
 * the button's job, stated before you open it. */
.bench-toggle .bench-icon {
  width: 14px; height: 14px;
  flex: 0 0 auto;
  fill: var(--ink-faint);
  transition: fill 140ms ease;
}
.bench-toggle .bench-icon .off { fill: none; stroke: var(--ink-ghost); stroke-width: 1.2; }
.bench-toggle:hover .bench-icon,
.bench-toggle[aria-expanded="true"] .bench-icon { fill: var(--accent-text); }
/* Live "shown / total". Muted while every column is on, accented as soon as one
 * is hidden — otherwise a filtered table looks the same as a full one. */
.bench-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  padding: 0.5px 6px;
  border-radius: 999px;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.bench-toggle.is-filtered .bench-count {
  color: var(--accent-text);
  background: var(--accent-tint);
  border-color: var(--accent);
}
/* A chevron that actually turns: the clearest signal that this opens something. */
.bench-toggle .chev {
  width: 12px; height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease, stroke 140ms ease;
}
.bench-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--bg-hover);
  box-shadow: 0 0 0 3px oklch(55% 0.16 250 / 0.16);
}
.bench-toggle[aria-expanded="true"] .chev {
  transform: rotate(180deg);
  stroke: var(--accent-text);
}
.bench-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 220px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 12px;
  /* Drops out of the button rather than appearing: the motion is what tells you
   * the two are the same control. */
  transform-origin: top right;
  animation: bench-drop 150ms ease-out;
}
@keyframes bench-drop {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
/* Says what the checkboxes below actually do, so the panel does not rely on the
 * user inferring it from the benchmark names. */
.bench-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--rule-soft);
}
.bench-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.bench-presets button {
  appearance: none;
  flex: 1 1 auto;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  padding: 5px 0;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.bench-presets button:hover {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent-tint);
}
.bench-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
}
.bench-group-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 4px;
}
.bench-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink);
  padding: 3px 2px;
  cursor: pointer;
  border-radius: 5px;
}
.bench-item:hover { background: var(--bg-hover); }
.bench-item input { accent-color: var(--accent); cursor: pointer; margin: 0; }

.count {
  font-size: 12px;
  color: var(--ink-mute);
}
.count strong {
  font-family: var(--font-mono);
  color: var(--ink-deep);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Table
 * ------------------------------------------------------------------ */
main {
  max-width: 1500px;
  margin: 16px auto 0;
  padding: 0 26px 56px;
}
.card {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; }
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg-elev);
  color: var(--ink-mute);
  text-align: right;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 12px 11px;
  border-bottom: 2px solid var(--rule-strong);
  white-space: nowrap;
  user-select: none;
}
thead th.sortable { cursor: pointer; }
thead th.sortable:hover { color: var(--ink-deep); background: var(--bg-hover); }
thead th .ind {
  display: inline-block;
  width: 9px;
  margin-left: 3px;
  font-size: 9px;
  color: var(--accent);
  opacity: 0;
}
thead th[aria-sort="ascending"] .ind,
thead th[aria-sort="descending"] .ind { opacity: 1; }
thead th[aria-sort="ascending"] .ind::before { content: "▲"; }
thead th[aria-sort="descending"] .ind::before { content: "▼"; }
thead th[title] { cursor: help; }

/* Grouped header (top row) */
thead tr.group-head th.group-label {
  text-align: center;
  color: var(--accent-text);
  background: var(--accent-tint);
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule-strong);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 7px 6px 6px;
}
thead tr.group-head th.col-rank,
thead tr.group-head th.col-model,
thead tr.group-head th.col-avg { vertical-align: bottom; }
/* vertical separators between benchmark groups */
th.score.group-start, td.score.group-start { border-left: 1px solid var(--rule-strong); }

/* Numeric columns: center the value under its benchmark header. Tabular
 * figures keep digit widths equal so centered numbers don't look ragged. */
thead th.score, tbody td.score,
thead th.col-avg, tbody td.col-avg {
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* Narrower gutters than the 12px used by the identity columns: the numbers are
     tabular and centered, so they stay legible while space per column is reclaimed
     — enough for another benchmark or two before the table needs scrolling.
     Kept symmetric: the header label is centred on the column, so any asymmetry
     here would visibly offset it from the numbers underneath. */
  padding-left: 10px;
  padding-right: 10px;
}

/* Take the sort arrow out of the inline flow for the centred columns.
   It is `opacity: 0` when inactive but still occupied 9px + 3px of inline space,
   so the label and the arrow were centred *as a pair* and the visible label sat
   ~6px left of the column centre — noticeably off against the numbers below.
   Overlaying it in the right gutter (10px, wider than the 9px arrow) means only
   the label participates in centring, at no cost in column width.

   Deliberately NOT adding `position: relative` here: `thead th` is `position:
   sticky`, which is already a containing block for absolute descendants, and
   overriding it would unstick the header row — and because renderHeader() sets an
   inline `top` on the second row for sticky offset, `relative` would also shove
   that row down the page. */
thead th.score .ind, thead th.col-avg .ind {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

th.col-rank, td.col-rank {
  text-align: right;
  width: 46px;
  font-family: var(--font-mono);
  color: var(--ink-mute);
}
th.col-model, td.col-model { text-align: left; width: 320px; }

tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule-soft);
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) td { background: var(--bg-zebra); }
tbody tr:hover td { background: var(--bg-hover); }

/* Rank medals */
td.col-rank .medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
  color: oklch(20% 0.02 85);
}
td.col-rank .medal.r1 { background: var(--gold); }
td.col-rank .medal.r2 { background: var(--silver); }
td.col-rank .medal.r3 { background: var(--bronze); }

/* Model cell */
.model-cell { display: flex; align-items: center; gap: 8px; }
.model-name {
  font-weight: 600;
  color: var(--ink-deep);
  letter-spacing: -0.005em;
}
.model-name a { color: inherit; text-decoration: none; }
.model-name a:hover { color: var(--accent); text-decoration: underline; }
/* Size badge, next to the model name. The old version was a 10px muted grey pill
 * that read as metadata and disappeared; this one is monospace, bold and on the
 * red accent, so size is the second thing you see in the cell after the name.
 * Tabular figures keep the digits the same width down the column. */
.params-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--size-ink);
  background: var(--size-tint);
  border: 1px solid var(--size-rule);
  padding: 1.5px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* kurakurai provenance badge: the Luth mark on its own, at the tail of the model
 * cell, so ours are identifiable while scanning the column. It carries the accent
 * blue, which the size badge (red) and the row highlight leave free. No label —
 * the org name is already the first half of the model name beside it. */
.luth-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: var(--accent-text);
  background: var(--accent-tint);
  border: 1px solid var(--accent);
}
.luth-mark {
  width: 13px;
  height: 13px;
  display: block;
  color: inherit;
}
/* The name is the cell's flexible part, so a long one truncates before it can
 * push the two badges out of a 320px column. */
.model-cell.is-kura .model-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Featured-row highlight (`highlight=blue` in the CSV). This is the table's only
 * row colour — it marks one model, so it stays at the accent hue and every other
 * row keeps the default background. */
tr.hl-blue td { background: var(--row-hl) !important; }
tr.hl-blue:hover td { background: oklch(36% 0.075 250) !important; }
tr.hl-blue td.col-model { box-shadow: inset 3px 0 0 var(--accent); }

/* Average column */
td.col-avg {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-deep);
}

/* Score cells — white, best per benchmark column is accent + underlined */
td.score .val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink-deep);
}
td.score .err {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  margin-left: 3px;
}
td.score.empty { color: var(--ink-ghost); }
td.score.top1 .val {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* States */
.state { padding: 60px 22px; text-align: center; color: var(--ink-mute); }

footer.foot {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 26px 40px;
  font-size: 11.5px;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
footer.foot .notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 80ch;
}
footer.foot .notes li { position: relative; padding-left: 14px; }
footer.foot .notes li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-ghost);
}
footer.foot .links { white-space: nowrap; }
footer.foot a { color: var(--ink-mute); text-decoration: none; border-bottom: 1px solid var(--rule); }
footer.foot a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ *
 * View tabs (Table / Chart)
 * ------------------------------------------------------------------ */
.viewtabs {
  display: flex;
  width: max-content;
  margin: 18px auto 2px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 3px;
  box-shadow: var(--shadow-card);
}
.vtab {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
  padding: 7px 22px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.vtab:hover { color: var(--ink-deep); }
.vtab[aria-selected="true"] { background: var(--accent); color: var(--bg-deep); }

/* ------------------------------------------------------------------ *
 * Chart panel
 * ------------------------------------------------------------------ */
/* The chart is deliberately monochrome on pure black: marker SHAPE carries family
 * identity (no hue is spent on it), which leaves a single accent free. Yellow is
 * reserved for one model — the highlighted hero — so it can never be confused
 * with a category. */
.chart-card {
  position: relative;
  padding: 20px 22px 22px;
  overflow: visible;
  background: #000;
  border-color: oklch(30% 0 0);

  --chart-ink:      oklch(80% 0 0);   /* marker outlines */
  --chart-ink-mute: oklch(76% 0 0);   /* point labels */
  --chart-ink-dim:  oklch(56% 0 0);   /* ticks, axis titles */
  --chart-grid:     oklch(30% 0 0);
  --hero:           #ffd54a;
}
.chart .chart-bg { fill: #000; }
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.chart-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-deep);
}
.chart-sub { margin: 3px 0 0; font-size: 12px; color: var(--ink-mute); }
.chart-legend {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 620px;
}
.leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--chart-ink-mute); }

.chart-wrap { position: relative; width: 100%; }
svg.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis { stroke: oklch(42% 0 0); stroke-width: 1; }
.chart .tick { fill: var(--chart-ink-dim); font-size: 11px; font-family: var(--font-mono); }
.chart .axis-title { fill: var(--chart-ink-mute); font-size: 12px; font-weight: 600; }

/* Every marker is an open outline — no fill, no hue. */
.pt {
  fill: none;
  stroke: var(--chart-ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.chart .pt { cursor: pointer; }
.chart .pt:hover { stroke: #fff; stroke-width: 2.2; }
.pt-other { fill: var(--chart-ink); stroke: none; }

/* The one highlighted model: filled yellow + glow (glow filter set inline). */
.chart .pt-hero,
.chart .pt-hero:hover { fill: var(--hero); stroke: var(--hero); stroke-width: 1.4; }
.chart .hero-halo { pointer-events: none; }

svg.mk { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.chart .lbl {
  font-size: 9.5px;
  font-weight: 500;
  fill: var(--chart-ink-mute);
  paint-order: stroke;
  stroke: #000;
  stroke-width: 2.6px;
  stroke-linejoin: round;
}
/* The hero label differs from the others in colour only — same size and weight, so
 * the yellow (plus the marker glow) is the whole emphasis. */
.chart .lbl-hero { fill: var(--hero); }
.chart .lbl-lead { stroke: var(--chart-grid); stroke-width: 1; }

.chart-tip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  background: oklch(16% 0 0);
  color: var(--ink-deep);
  border: 1px solid oklch(34% 0 0);
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 11.5px;
  line-height: 1.35;
  box-shadow: var(--shadow-card);
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap;
}
.chart-tip .t-name { font-weight: 700; }
.chart-tip .t-row { color: var(--ink-mute); font-family: var(--font-mono); font-size: 11px; }

@media (max-width: 760px) {
  .hero h1 { font-size: 23px; }
  thead th, tbody td { padding: 8px 8px; }
  th.col-model, td.col-model { width: auto; }
  .chart-head { flex-direction: column; gap: 8px; }
  .chart-legend { justify-content: flex-start; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}