:root {
  --blue: #02529c;
  --blue-dark: #023e75;
  --red: #dc1e35;

  /* light theme */
  --ink: #1a2230;
  --muted: #64708a;
  --faint: #98a2b8;
  --line: #e7ebf2;
  --line-soft: #eef1f7;
  --sep: #c5cedd; /* stronger divider between benchmark groups */
  --bg: #f7f8fb;
  --card: #ffffff;
  --hover: #f4f7fc;
  --chip: #f1f4f9;
  --accent: var(--blue);
  --shadow: 0 1px 3px rgba(16, 30, 54, 0.07), 0 8px 24px rgba(16, 30, 54, 0.05);
}

:root[data-theme="dark"] {
  --ink: #e6edf6;
  --muted: #9aa7bd;
  --faint: #6b7689;
  --line: #232a36;
  --line-soft: #1c222d;
  --sep: #3a4656; /* stronger divider between benchmark groups */
  --bg: #0d1117;
  --card: #151a22;
  --hover: #1a212c;
  --chip: #1d242f;
  --accent: #4c9be8;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--accent); }

/* ---------- top nav ---------- */
.topnav {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-link {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); border-bottom-color: var(--accent); }
.theme-toggle {
  margin-left: 8px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); }
/* language switch: shows the language you'd switch TO (e.g. "IS" while in English) */
.lang-toggle {
  margin-left: auto;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: grid;
  place-items: center;
}
.lang-toggle:hover { color: var(--ink); border-color: var(--accent); }

/* ---------- hero ---------- */
.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 8px;
  text-align: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo {
  height: 40px;
  width: auto;
}
:root[data-theme="dark"] .brand-logo {
  filter: brightness(0) invert(0.92);
}
.hero-title {
  margin: 18px 0 0;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -0.02em;
  font-weight: 750;
}
/* Inline SVG flag (locked to the official 25:18 ratio) — avoids the emoji flag
   degrading to "IS" on Windows, which has no country-flag glyphs. */
.flag {
  height: 0.78em;
  width: calc(0.78em * 25 / 18);
  vertical-align: -0.05em;
  margin-right: 0.22em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.hero-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
}

/* ---------- controls ---------- */
main { max-width: 1280px; margin: 0 auto; padding: 24px; }

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 14px 0 22px;
}
.search-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
}
.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}
#search {
  width: 100%;
  padding: 13px 70px 13px 42px;
  font-size: 15px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}
#search::placeholder { color: var(--faint); }
#search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.count {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.filter-group { display: inline-flex; align-items: center; gap: 6px; }
.filter-label {
  font-size: 12.5px;
  color: var(--muted);
  margin-right: 4px;
}
.filter-group button {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.filter-group button:hover { border-color: var(--accent); color: var(--ink); }
.filter-group button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* subscore split toggle */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--muted);
  user-select: none;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--line);
  transition: background .15s, border-color .15s;
}
.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform .15s;
}
.switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:hover .switch-label { color: var(--ink); }

/* columns visibility menu */
.menu { position: relative; display: inline-flex; }
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.menu-btn:hover { border-color: var(--accent); color: var(--ink); }
.menu-btn .caret { font-size: 10px; }
.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 180px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.menu-item:hover { background: var(--hover); }
.menu-item input { accent-color: var(--accent); cursor: pointer; }

/* ---------- table ---------- */
/* The category tabs are their own table (#tabs, sharing the board's column
   widths) in .tabs-wrap, scrolled in lockstep with .table-wrap by app.js —
   so the wrap is simply the rounded card again, clipping and shadowing like
   any normal box. */
.table-shell { position: relative; }
.tabs-wrap { overflow: hidden; margin: 0 1px; }
.table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-x: auto;
  box-shadow: var(--shadow);
}
#tabs { position: relative; height: 38px; }
.group-tab {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--ink);
  background: hsl(var(--group-h) 62% 48% / 0.09);
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  user-select: none;
}
:root[data-theme="dark"] .group-tab {
  background: hsl(var(--group-h) 70% 62% / 0.16);
}
.group-tab .arrow { margin-left: 3px; color: var(--accent); font-size: 10px; opacity: 0; }
.group-tab.sort-asc .arrow,
.group-tab.sort-desc .arrow { opacity: 1; }
/* hides tabs sliding under the sticky rank/model columns; width set by
   layoutTabs to match them */
.tabs-mask {
  position: absolute;
  top: 0;
  left: 1px;
  height: 38px;
  background: var(--bg);
  z-index: 1;
  pointer-events: none;
}
/* The table needs more room than main's 1280px column: break out and centre on
   the viewport up to a wider cap so more columns show before scrolling. 50% is
   the centered main content's midpoint == the viewport center. */
.table-shell {
  width: min(100vw - 48px, 1760px);
  margin-left: calc(50% - min(100vw - 48px, 1760px) / 2);
}
/* Grow-and-scroll, never fit-to-container: every column has a fixed width and
   there are more of them than fit, so the wrapper scrolls. Fitting instead would
   hand the leftover space to the model column — which is negative once there are
   nine benchmark columns, crushing it to nothing and spilling the name across the
   scores. */
table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}

/* fixed column widths; all score columns equal */
col.col-rank { width: 52px; }
col.col-model { width: 230px; }
col.col-score { width: 116px; }
col.col-date { width: 116px; }
col.col-license { width: 104px; }
col.col-params { width: 96px; }
col.col-tokens { width: 116px; }
col.col-modelid { width: 200px; }
col.col-genconfig { width: 240px; }

/* Freeze the rank (#) and model columns so they stay put while the score
   columns scroll horizontally. left offsets match col-rank's 52px width. */
.col-rank-cell { position: sticky; left: 0; background: var(--card); z-index: 1; }
.col-model-cell { position: sticky; left: 52px; background: var(--card); z-index: 1; }
thead .col-rank-cell, thead .col-model-cell { z-index: 5; }
tbody tr:hover .col-rank-cell, tbody tr:hover .col-model-cell { background: var(--hover); }
/* Same weight as the group dividers: this one used to appear only in the old
   wide mode as a frozen-column hint, but it now sits in the same row of
   dividers and a lighter one reads as a mistake. */
.col-model-cell { border-right: 1px solid var(--sep); }

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--muted);
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
  /* long single-word names (e.g. "Myndunargæði") break/hyphenate instead of
     overflowing the fixed-width score columns; hyphens use <html lang> */
  overflow-wrap: break-word;
  hyphens: auto;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--ink); }
thead th .arrow { opacity: 0; margin-left: 3px; color: var(--accent); font-size: 10px; }
thead th.sort-asc .arrow, thead th.sort-desc .arrow { opacity: 1; }
/* the positioned block absolutes inside a header anchor to (a sticky th is not
   a containing block in Chrome) */
thead th .th-label { display: block; position: relative; }
/* right-aligned (numeric/score) headers can wrap to 2–3 lines; pin the arrow in
   the right padding so it never gets pushed onto a clipped extra line.
   Offsets are relative to .th-label: the cell pads 13px 16px around it. */
thead th.num .arrow {
  position: absolute;
  right: -11px;
  bottom: 1px;
  margin-left: 0;
}

tbody td {
  padding: 0 16px;
  height: 46px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--hover); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
.rank { width: 56px; text-align: center; }

/* rank medals */
.rank-badge {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #5a4a00;
}
.rank-badge.r1 { background: linear-gradient(135deg, #ffe08a, #f5c518); }
.rank-badge.r2 { background: linear-gradient(135deg, #e8edf3, #c4ccd6); color: #4a505a; }
.rank-badge.r3 { background: linear-gradient(135deg, #f0c79b, #d9974f); color: #5a3a13; }
.rank-plain { color: var(--faint); font-variant-numeric: tabular-nums; }

/* score cells with data bars */
.score { position: relative; font-weight: 600; }
/* contain the bar/val z-indexes so they can't paint over the pinned columns */
tbody td.score { z-index: 0; }
.score .bar {
  position: absolute;
  /* fills the full cell height; the cell borders are the gauge outline */
  left: 0; top: 0; bottom: 0;
  max-width: 100%;
  /* hue ramps red(0)→green(130) with the score (see barHue in app.js) */
  background: hsl(var(--bar-h, 140) 70% 42% / 0.50);
  /* flat against the cell's left edge, rounded at the tip */
  border-radius: 0 4px 4px 0;
  z-index: 0;
}
:root[data-theme="dark"] .score .bar { background: hsl(var(--bar-h, 140) 65% 50% / 0.60); }
.score .val { position: relative; z-index: 1; }

/* subscore column cells share the same text style as every other score column */

/* Header weight follows the tier, not the view: group name darkest, benchmark
   name mid (matching #/Model, and matching its own colour in the default view
   where it IS the bottom row), subscore leaves lightest. */
thead th.leaf { font-weight: 500; color: var(--faint); }

/* merged header tiers: group name, and (with the breakdown on) benchmark name */
.group-header {
  text-align: center;
  vertical-align: middle;
  color: var(--ink);
  border-bottom: 1px solid var(--sep);
}
/* the benchmark tier sits between the group name and the subscore leaves */
.group-header.bench-header { font-weight: 550; color: var(--muted); }
/* The group names are tabs standing on the card's top strip: the tinted,
   top-rounded block is the .th-label inside the cell (border-radius does not
   apply to cells of a collapsed table), the cell itself is invisible, and the
   spacer cells beside the tabs draw no borders at all. Hue is keyed on the
   group name; an unlisted group falls back to the neutral blue. */
/* group names now live in #tabs; .group-header remains for the benchmark tier */
/* one hue per group, shared by the table headers and the About sections */
[data-group] { --group-h: 220; }
[data-group="knowledge"] { --group-h: 24; }
[data-group="language_proficiency"] { --group-h: 265; }
/* full-height dividers boxing each group, and lighter ones between the benchmarks
   inside a group (border on <col>, works because the table border-collapses) */
/* light separator between score cells: each cell is the container its bar fills */
col.col-score { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
col.sep-left { border-left: 1px solid var(--sep); }
col.sep-right { border-right: 1px solid var(--sep); }
col.sub-sep-left { border-left: 1px dotted var(--sep); }
col.sub-sep-right { border-right: 1px dotted var(--sep); }
/* Stacked header rows can't all stick to top:0 without overlapping, so a tiered
   header is non-sticky (the page scrolls as a whole; the table is short). */
table.tiered thead th { position: static; }
/* …but keep the rank/model header cells frozen to the left regardless */
table.tiered thead .col-rank-cell { position: sticky; left: 0; }
table.tiered thead .col-model-cell { position: sticky; left: 52px; }

.score .pctsign { color: var(--faint); font-weight: 400; font-size: 0.85em; margin-left: 1px; }
.score.avg { font-weight: 750; color: var(--ink); }
.na { color: var(--faint); font-weight: 400; }

/* model cell */
/* One line, never two: the column is widened to fit instead (see fitModelColumn),
   so rows keep a uniform height. */
.model-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 8px 0;
  /* shrink-wrap: fitModelColumn measures this element's scrollWidth, which must
     reflect the content, not the current column width, or re-fits feed back */
  width: max-content;
}
/* No shrinking either: a squeezed name would still overflow (it is nowrap), and it
   would make the cell measure narrower than its content, so fitModelColumn would
   never widen the column enough. */
.model-cell > * { flex-shrink: 0; }
.model-name { white-space: nowrap; }
.model-name a { color: var(--ink); text-decoration: none; font-weight: 600; }
.model-name a:hover { color: var(--accent); text-decoration: underline; }

.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.dev-logo { width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; }
.dev-mono {
  background: var(--ink);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.model-setting { color: var(--faint); font-size: 12px; white-space: nowrap; margin-left: -4px; cursor: help; }
.badge-tool { background: rgba(46, 160, 67, 0.16); color: #2e9e54; }

.note {
  cursor: help;
  color: var(--red);
  font-size: 13px;
  position: relative;
}
.note:hover::after, .note:focus::after {
  content: attr(data-note);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  background: var(--ink);
  color: var(--bg);
  padding: 8px 11px;
  border-radius: 7px;
  width: max-content;
  max-width: 300px;
  white-space: normal;
  font-size: 12.5px;
  line-height: 1.4;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.date { color: var(--muted); font-weight: 400; }
.license { color: var(--muted); font-size: 13px; }

/* optional columns */
.modelid code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
}
.genconfig { padding-top: 8px; padding-bottom: 8px; }
.genconfig .kv {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin: 2px 4px 2px 0;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--chip);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--ink);
  white-space: nowrap;
}
.genconfig .kv-k { color: var(--muted); }
.empty { padding: 40px; text-align: center; color: var(--muted); }

/* benchmark header that carries a hover description (native title tooltip) */
thead th.has-info { cursor: help; }

/* ⓘ in benchmark headers: hovering it dims the page and pops the unit's About card */
/* a header with an ⓘ keeps its title at the bottom left; the flex column pins
   the symbol to the top right, and the shared min-height keeps the symbols in
   one row and the titles bottom-aligned across columns */
thead th:has(.info-dot) { text-align: left; }
thead th:has(.info-dot) .th-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 46px;
}
.info-dot {
  order: -1; /* DOM-last (after the title) but rendered first, at the top */
  align-self: flex-end;
  margin: -6px -9px 4px 0; /* nudged out into the cell padding, off the title */
  /* the header's uppercase transform maps ⓘ (circled SMALL i) to Ⓘ, a bare
     bar in a circle — keep the glyph lowercase */
  text-transform: none;
  font-family: "Apple Symbols", "Segoe UI Symbol", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--faint);
  cursor: help;
}
.info-dot:hover { color: var(--accent); }
.hovercard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(15 18 25 / 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
:root[data-theme="dark"] .hovercard-backdrop { background: rgb(0 0 0 / 0.5); }
.hovercard-backdrop.show { opacity: 1; }
/* the card itself is the About markup (.about-bench), which brings its own
   background, border and shadow; this wrapper only positions and sizes it */
.hovercard {
  position: fixed;
  z-index: 41;
  max-width: min(400px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.hovercard.wide { max-width: min(880px, calc(100vw - 24px)); }
.hovercard.show { opacity: 1; pointer-events: auto; }

/* ---------- about ---------- */
.about { max-width: 1180px; margin: 8px auto 0; }
.about h2 { font-size: 26px; letter-spacing: -0.01em; margin: 0 0 12px; }
.about-intro { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 30px; max-width: 760px; }
/* Indent the section text so it lines up with the group headings and cards
   inside the tinted boxes rather than with the boxes' outer border. */
#view-about > h2,
.about-intro,
.about-sub { padding-left: 20px; }
.about-sub { font-size: 19px; margin: 0 0 12px; max-width: 760px; }
/* One tinted container per top-level group (same hue as its table header),
   holding a responsive grid of benchmark cards. */
.about-group {
  padding: 18px 20px 20px;
  border: 1px solid hsl(var(--group-h) 45% 55% / 0.35);
  border-radius: 16px;
  background: hsl(var(--group-h) 62% 48% / 0.07);
}
:root[data-theme="dark"] .about-group { background: hsl(var(--group-h) 70% 62% / 0.12); }
.about-group + .about-group { margin-top: 20px; }
.about-group > h3 {
  margin: 0 0 14px;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: hsl(var(--group-h) 55% 32%);
}
:root[data-theme="dark"] .about-group > h3 { color: hsl(var(--group-h) 70% 78%); }
/* Flex rather than grid so a card alone in its row fills it, and cards
   sharing a row get equal heights. */
.about-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.about-grid > .about-bench { flex: 1 1 340px; }
.about-bench {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.about-bench h3 { margin: 0 0 6px; font-size: 16px; }
/* A family card spans its full row; its members sit in an inner grid,
   separated by a rule from the family heading. */
.about-grid > .about-family { flex-basis: 100%; }
.about-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0 24px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.about-member { padding: 4px 0 8px; }
.about-member h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 650; }
.about-member p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.about-member .about-source,
.about-member .about-authors { margin-top: 10px; font-size: 13px; color: var(--faint); }
.about-bench p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.about-example { margin-top: 10px; }
.about-example .ex-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  font-size: 14px;
  padding: 8px 12px;
  border-left: 3px solid var(--line);
  background: var(--bg);
  border-radius: 0 8px 8px 0;
}
.about-example .ex-row + .ex-row { margin-top: 4px; }
.about-example .ex-row.ex-answer {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
}
.ex-label {
  font-size: 11px;
  line-height: 1.9; /* sits on the first text line of the body column */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
  font-weight: 700;
}
/* v1 archive: the old About page folded above the table (native <details>) */
.v1-about { margin: -12px 0 24px; }
.v1-about > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.v1-about[open] > summary { margin-bottom: 16px; }
.v1-about .about-intro { margin-bottom: 18px; }
.about-bench .about-source,
.about-bench .about-authors { margin-top: 10px; font-size: 13px; color: var(--faint); }
.about-source a { color: inherit; }

footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px 48px;
  color: var(--faint);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 600px) {
  .nav-inner { gap: 16px; }
  .hero { padding-top: 28px; }
  /* On narrow screens a frozen rank+model would eat most of the viewport, so
     let them scroll with everything else. */
  .col-rank-cell,
  .col-model-cell,
  table.tiered thead .col-rank-cell,
  table.tiered thead .col-model-cell {
    position: static;
  }
  .col-model-cell { border-right: none; }
  .about-group { padding: 14px 12px 12px; border-radius: 12px; }
  #view-about > h2,
  .about-intro { padding-left: 12px; }
}