:root {
  --bg: #0e1116; --panel: #171c24; --line: #2a313c; --text: #e6edf3;
  --muted: #8b949e; --accent: #2f6feb;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 0 16px 48px;
}
.wrap { max-width: 800px; margin: 0 auto; }
header.site {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding: 18px 2px 10px; margin-bottom: 20px;
}
header.site .title { font-size: 18px; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: .2px; }
a.title:hover { color: #fff; }
header.site nav { display: flex; gap: 14px; }
header.site nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
header.site nav a:hover, header.site nav a.active { color: var(--text); }
h1 { font-size: 22px; margin: 8px 2px 4px; }
.sub { color: var(--muted); font-size: 13px; margin: 0 2px 18px; }
a { color: #58a6ff; }
footer.site { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
footer.site a { color: var(--text); font-weight: 600; text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
.prov-foot { font-variant-numeric: tabular-nums; min-width: 0; }
/* credit sits at the right; wraps to its own line when the row runs out of room */
.foot-by { margin-left: auto; white-space: nowrap; }

table { width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
th, td { padding: 9px 12px; text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
th:first-child, td:first-child, .team-cell { text-align: left; }
thead th { color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line);
  cursor: default; user-select: none; text-align: left; }
thead th.sortable { cursor: pointer; white-space: nowrap; }
thead th.sortable:hover { color: var(--text); }
tbody tr { border-top: 1px solid rgba(255,255,255,0.04); }
tbody tr.clickable { cursor: pointer; }
tbody tr:hover { background: rgba(255,255,255,0.05); }
/* the head-to-head matrix keeps its per-cell hover instead of a full-row fill */
.h2h-table tbody tr:hover { background: transparent; }
tbody tr.leader td { background: rgba(63,185,80,0.07); }
tbody tr.leader td:first-child { border-left: 3px solid #d4a72c; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
/* model-designed crest, used wherever a colour swatch would otherwise sit */
.crest { display: inline-block; vertical-align: middle; border-radius: 5px; }
.team-cell .crest { margin-right: 8px; }
h1 .crest { margin-right: 11px; vertical-align: -5px; border-radius: 7px; }
.h2h-col .crest { display: block; margin: 0 auto 4px; }
.h2h-rowh .crest { margin-right: 7px; }
.compare-table thead th .crest { display: block; margin: 0 auto 7px; }
/* team cell: crest centred beside a two-line name / provider stack (used in the
   standings and the statistics full table). The flex lives on an inner wrapper,
   NOT the <td> — a display:flex table cell loses position:sticky, which broke
   the frozen column on horizontal scroll. */
.team-stack { min-width: 200px; }
.team-stack .tstack-row { display: flex; align-items: center; gap: 11px; }
.team-stack .crest { margin-right: 0; flex: none; }
.team-stack .tstack { display: flex; flex-direction: column; line-height: 1.3; }
.team-stack .name { font-weight: 600; white-space: nowrap; }
/* provider brand mark sits small, to the LEFT of the company name */
.team-stack .meta { display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 11px; color: var(--muted); }
.team-stack .meta .plogo { margin: 0 4px 0 0; }
.team-stack .meta .plogo svg { width: 11px; height: 11px; }
/* left-justify the Team / GD / Pts columns so labels hug their content */
.standings-scroll th.lft { text-align: left; }
.standings-scroll .divwrap { margin: 0; }             /* GD bar hugs the left */
.standings-scroll td.barcell .barwrap { margin: 0; min-width: 0; width: 92px; }
.team-cell .name { font-weight: 600; }
/* model names in tables read as plain text, not blue underlined links */
.team-cell a { color: var(--text); font-weight: 600; text-decoration: none; }
.team-cell a:hover { text-decoration: underline; }
.team-cell .meta { color: var(--muted); font-size: 11px; }
/* brand mark of the lab behind a model */
.plogo { display: inline-flex; vertical-align: middle; }
.plogo svg { width: 13px; height: 13px; display: block; }
.team-cell .name + .plogo { margin-left: 6px; }
.team-cell .meta .plogo { margin: 0 3px 0 1px; }
.plogo svg { width: 12px; height: 12px; }
.pts { font-weight: 700; }
.pos { color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 22px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.card .k { color: var(--muted); font-size: 12px; }
.card .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
/* per-stat mini-viz: a bar centred on the league average, filling green above
   / red below, with the signed % beneath it */
.card .avgbar { margin-top: 11px; }
.card .avgbar .lab { display: block; text-align: center; font-size: 10px; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 3px; }
.card .avgbar .track { position: relative; height: 7px; border-radius: 4px;
  background: rgba(255,255,255,0.06); }
.card .avgbar .axis { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px;
  background: rgba(255,255,255,0.4); }
.card .avgbar .fill { position: absolute; top: 0; bottom: 0; min-width: 3px; }
.card .avgbar .fill.pos { left: 50%; background: #3fb950; border-radius: 0 4px 4px 0; }
.card .avgbar .fill.neg { right: 50%; background: #f85149; border-radius: 4px 0 0 4px; }
.card .pct { font-size: 12px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; text-align: center; }
.card .pct.pos { color: #3fb950; }
.card .pct.neg { color: #f85149; }

.result { font-weight: 700; display: inline-block; width: 18px; text-align: center; border-radius: 4px; }
.result.W { color: #3fb950; } .result.L { color: #f85149; } .result.D { color: #d29922; }

/* team detail header: big crest spanning the name + provider/detail lines */
.team-head { display: flex; align-items: center; gap: 8px; margin: 8px 2px 20px; }
.team-head .crest { width: 52px; height: 52px; border-radius: 9px; flex: none; }
.team-head h1 { margin: 0; }
.team-head .sub { margin: 4px 0 0; }
.team-head .sub .plogo svg { width: 12px; height: 12px; }

/* schedule table: every column left-aligned, whole row links to the replay */
.schedule-table td, .schedule-table th { text-align: left; }

/* --- inline data bars in the standings table (Tufte: the table IS the chart) --- */
/* Points: a team-coloured bar scaled to the leader, value sitting on top. */
td.barcell { padding: 6px 12px; }
.barwrap { position: relative; height: 22px; min-width: 90px; }
.barwrap .bar { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 3px; opacity: .9; }
.barwrap .val { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; mix-blend-mode: normal; }
/* Goal difference: a diverging bar centred on zero (right = positive, left = negative),
   with the value in its own gutter so it's always legible. */
.divwrap { display: grid; grid-template-columns: 96px 28px; align-items: center;
  gap: 7px; width: 131px; margin-left: auto; }
.divwrap .dtrack { position: relative; height: 18px; }
.divwrap .axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.divwrap .dbar { position: absolute; top: 4px; bottom: 4px; border-radius: 2px; }
.divwrap .dbar.pos { left: 50%; background: #3fb950; }
.divwrap .dbar.neg { right: 50%; background: #f85149; }
.divwrap .dval { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }
.divwrap .dval.pos { color: #3fb950; } .divwrap .dval.neg { color: #f85149; }
/* Form: last-N results as tiny direct-labelled cells, newest on the right. */
.form { display: inline-flex; gap: 2px; }
.form i { width: 14px; height: 16px; border-radius: 2px; font-style: normal; font-size: 10px;
  font-weight: 700; line-height: 16px; text-align: center; color: #0e1116; }
.form i.W { background: #3fb950; } .form i.D { background: #d29922; } .form i.L { background: #f85149; }

/* --- small-multiple ranked bar charts on the statistics page --- */
.smgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px 26px; margin: 14px 0 10px; }
.sm h3 { font-size: 13px; font-weight: 600; margin: 0 0 9px; color: var(--text); }
.sm h3 .hint { color: var(--muted); font-weight: 400; font-size: 11px; margin-left: 6px; }
.smrow { display: grid; grid-template-columns: 118px 1fr 52px; align-items: center;
  gap: 8px; height: 20px; border-radius: 5px; }
a.smrow { text-decoration: none; color: inherit; cursor: pointer; }
a.smrow:hover { background: rgba(255,255,255,0.05); }
a.smrow:hover .lab { color: var(--text); }
.smrow .lab { font-size: 11px; color: var(--muted); text-align: left; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smrow .track { position: relative; height: 11px; }
.smrow .track .b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; min-width: 1px; }
.smrow .num { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.smrow.best .lab { color: var(--text); }
.notice { color: var(--muted); background: var(--panel); border: 1px dashed var(--line);
  border-radius: 10px; padding: 16px; margin-top: 16px; font-size: 14px; }
code { background: #21262d; padding: 1px 5px; border-radius: 4px; }
.hidden { display: none; }

/* "Watch a match" homepage section */
#watchSection { margin: 4px 0 8px; }
.matchpick { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; flex-wrap: wrap; }
.matchpick .vs { color: var(--muted); font-size: 13px; font-weight: 600; }
.teamsel {
  flex: 1; min-width: 0; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 14px;
  font-weight: 600; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.teamsel:hover { border-color: #3a424e; }
.teamsel:focus { outline: none; border-color: var(--accent); }
.stage-frame { width: 100%; border: 0; display: block; min-height: 640px; overflow: hidden; }

/* "How it works" prose page */
.prose { max-width: none; }
.prose .lead { font-size: 16px; color: var(--text); line-height: 1.6; margin: 6px 2px 20px; }
.prose h2 { font-size: 16px; margin: 30px 2px 8px; }
.prose p { font-size: 14px; line-height: 1.65; color: #c9d4de; margin: 0 2px 24px; }
.prose li { font-size: 14px; line-height: 1.65; color: #c9d4de; margin: 6px 0; }
.prose ul { margin: 0 0 24px; padding-left: 22px; }
.prose .key { color: var(--text); font-weight: 600; }

/* collapsible sections */
.prose details.hiw { border-top: 1px solid var(--line); }
.prose details.hiw:last-of-type { border-bottom: 1px solid var(--line); }
.prose .hiw > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 16px 2px; font-size: 16px; font-weight: 600;
  color: var(--text); }
.prose .hiw > summary::-webkit-details-marker { display: none; }
.prose .hiw > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(-45deg); transition: transform .15s; }
.prose .hiw[open] > summary::after { transform: translateY(-2px) rotate(45deg); }
.prose .hiw > summary:hover { color: #fff; }
.prose .hiw-body { padding: 2px 2px 14px; }
.prose .hiw-body > *:first-child { margin-top: 0; }
.prose h3 { font-size: 14px; margin: 24px 2px 8px; color: var(--text); }
.prose .key { color: var(--text); font-weight: 600; }
pre.code { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; font-size: 12.5px; line-height: 1.55; color: #c9d4de;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 12px 0;
  /* wrap to the window width instead of scrolling sideways on narrow screens */
  white-space: pre-wrap; overflow-wrap: anywhere; }
.field-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin: 14px 0; }
.field-spec .card .k { color: var(--muted); font-size: 12px; }
.field-spec .card .v { font-size: 16px; font-weight: 700; margin-top: 2px; }

/* per-value muted suffix inside a card (e.g. "$1.41  $0.18/match") */
.card .v .v-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* quiet provenance / freshness strip */
.provenance { color: var(--muted); font-size: 12px; margin: 0 2px 18px;
  font-variant-numeric: tabular-nums; }

/* --- consistent section rhythm: one heading style, one gap between blocks --- */
.section-h { font-size: 16px; font-weight: 600; margin: 36px 0 12px; }
/* the first section on a page shouldn't push down from the header */
.section-h.first { margin-top: 8px; }

/* --- Head-to-head results matrix --- */
/* The frame owns the border + radius and clips the scroller inside it. Its
   overflow:hidden is what rounds the corners over the sticky crest column —
   a border-radius on the scroll container alone doesn't clip sticky cells in
   Safari (they escape the rounding and square off the corners on scroll). */
.h2h-frame { margin: 4px 0 2px;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.h2h-scroll { --scroll-bg: var(--panel);
  overflow-x: auto; overflow-y: hidden; }
.h2h-table { min-width: 520px; }
.h2h-table th, .h2h-table td { padding: 6px 7px; text-align: center; font-size: 12px;
  font-variant-numeric: tabular-nums; }
.h2h-table thead th { border-bottom: 1px solid var(--line); vertical-align: bottom; }
/* column headers: just the team crest, upright and centred; a bit wider */
.h2h-table thead th.h2h-col { padding: 10px 0; min-width: 52px; }
.h2h-col .crest { width: 26px; height: 26px; border-radius: 6px; display: block; margin: 0 auto; }
.h2h-table td.h2h, .h2h-table td.h2h-diag, .h2h-table td.h2h-empty { min-width: 52px; }
/* pinned crest column (stays) + scrolling name column (tucks behind it on scroll) */
.h2h-cc { text-align: center; padding: 6px 3px 6px 6px; }
.h2h-cc .crest { width: 26px; height: 26px; border-radius: 6px; display: inline-block; vertical-align: middle; }
/* th.h2h-nc to outrank the `.h2h-table th { text-align:center }` above, which
   would otherwise centre the model names in the left label column */
.h2h-table th.h2h-nc { text-align: right; white-space: nowrap; color: var(--text);
  font-weight: 600; min-width: 150px; padding: 6px 14px 6px 4px; }
/* the whole score cell is the click target: the link fills the padding box */
.h2h-table td.h2h { padding: 0; position: relative; }
.h2h-table td.h2h a { display: block; padding: 6px 7px; text-decoration: none; font-weight: 600; }
.h2h-table td.h2h.W { background: rgba(63,185,80,0.15); } .h2h-table td.h2h.W a { color: #3fb950; }
.h2h-table td.h2h.L { background: rgba(248,81,73,0.15); } .h2h-table td.h2h.L a { color: #f85149; }
.h2h-table td.h2h.D { background: rgba(210,153,34,0.16); } .h2h-table td.h2h.D a { color: #d29922; }
/* hover: outline the cell rather than underline the score */
.h2h-table td.h2h:hover { box-shadow: inset 0 0 0 2px rgba(236,236,236,0.55); border-radius: 5px; }
.h2h-table td.h2h-diag { background: rgba(42,49,60,0.5); }
.h2h-table td.h2h-empty { color: var(--muted); }

/* --- Horizontally-scrollable tables with a frozen first column ---
   The wrapper scrolls sideways on narrow screens; the leftmost column (the
   model/metric label) stays pinned so you never lose track of what a row is. */
.table-scroll { --scroll-bg: var(--panel);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 10px; }
/* the table must NOT be its own scroll container, or sticky cells would pin to
   it instead of the wrapper — reset the base rule's overflow:hidden. it's also
   transparent so the wrapper's edge scroll-shadows show through the cells. */
.table-scroll > table { border: 0; border-radius: 0; overflow: visible; background: transparent; }

/* --- Edge scroll-shadows: hint that a table has more columns off-screen. ---
   Two opaque "cover" layers (scroll WITH the content) sit over two fixed inner
   shadows; at each end the cover hides its shadow, and as you scroll the cover
   slides away to reveal it. So a shadow appears only on the side you can still
   scroll toward. Also hides the scrollbars themselves. */
.table-scroll, .h2h-scroll {
  background-color: var(--scroll-bg);
  background-image:
    linear-gradient(to right, var(--scroll-bg) 32%, transparent),
    linear-gradient(to left,  var(--scroll-bg) 32%, transparent),
    radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,0.45), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.45), transparent);
  background-position: left, right, left, right;
  background-size: 42px 100%, 42px 100%, 16px 100%, 16px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  scrollbar-width: none; -ms-overflow-style: none;
}
.table-scroll::-webkit-scrollbar, .h2h-scroll::-webkit-scrollbar { display: none; }

/* pin the first column and give it an opaque background so scrolled cells
   pass cleanly behind it, plus a hairline divider on its right edge */
.table-scroll th:first-child,
.table-scroll td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--panel);
}
.table-scroll thead th:first-child { z-index: 3; }
.table-scroll tbody td:first-child { z-index: 2; }
.table-scroll th:first-child::after,
.table-scroll td:first-child::after {
  content: ""; position: absolute; top: 0; right: -1px; bottom: -1px; width: 1px;
  background: var(--line); pointer-events: none;
}
/* opaque backing that spills 1px past the row seams, so scrolling coloured cells
   (e.g. the blue "win" outlines) can't bleed through the pinned column's border */
.table-scroll th:first-child::before,
.table-scroll td:first-child::before,
.standings-scroll th:nth-child(2)::before,
.standings-scroll td:nth-child(2)::before,
.h2h-scroll .h2h-cc::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; bottom: -1px;
  background: var(--scroll-bg, var(--panel)); z-index: -1; pointer-events: none;
}
/* keep the pinned cell's backing in sync with row states — the ::before layer
   is what shows, so hover/leader tints go there (not the cell background) */
.table-scroll tbody tr:hover td:first-child::before {
  background: linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05)), var(--scroll-bg, var(--panel)); }
.table-scroll tbody tr.leader td:first-child::before {
  background: linear-gradient(rgba(63,185,80,0.07),rgba(63,185,80,0.07)), var(--scroll-bg, var(--panel)); }

/* Standings: the useful label is the team, so pin the rank + team pair. */
.standings-scroll th:nth-child(1), .standings-scroll td:nth-child(1) {
  width: 42px; min-width: 42px; }
.standings-scroll th:nth-child(2), .standings-scroll td:nth-child(2) {
  position: sticky; left: 42px; z-index: 1; background: var(--panel); }
.standings-scroll thead th:nth-child(2) { z-index: 3; }
.standings-scroll tbody td:nth-child(2) { z-index: 2; }
/* move the divider + row-state tint onto the team cell (the last pinned one) */
.standings-scroll th:first-child::after,
.standings-scroll td:first-child::after { display: none; }
.standings-scroll th:nth-child(2)::after,
.standings-scroll td:nth-child(2)::after {
  content: ""; position: absolute; top: 0; right: -1px; bottom: -1px; width: 1px;
  background: var(--line); pointer-events: none; }
.standings-scroll tbody tr:hover td:nth-child(1)::before,
.standings-scroll tbody tr:hover td:nth-child(2)::before {
  background: linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05)), var(--scroll-bg, var(--panel)); }
.standings-scroll tbody tr.leader td:nth-child(1)::before,
.standings-scroll tbody tr.leader td:nth-child(2)::before {
  background: linear-gradient(rgba(63,185,80,0.07),rgba(63,185,80,0.07)), var(--scroll-bg, var(--panel)); }

/* pin ONLY the crest column in the head-to-head matrix; the name column scrolls
   away behind it, so on narrow screens the row keeps just its logo pinned */
/* drop the base table's own border/radius (the frame owns them now) so the h2h
   edge matches the other scrollable tables instead of double-bordering */
.h2h-scroll > table { border: 0; border-radius: 0; overflow: visible; background: transparent; }
.h2h-scroll .h2h-cc { position: sticky; left: 0; z-index: 2; background: var(--panel); }
.h2h-scroll thead .h2h-cc { z-index: 3; }
/* crisp freeze line on the crest column's right edge, matching the standings pin:
   with the opaque backing (::before) covering the seam, coloured score cells scroll
   cleanly behind the crest instead of bleeding out against it */
.h2h-scroll .h2h-cc::after {
  content: ""; position: absolute; top: 0; right: -1px; bottom: -1px; width: 1px;
  background: var(--line); pointer-events: none; }

/* --- Model comparison grid (models across the top, one metric per row) ---
   Mirrors the layout other benchmark leaderboards use; the leader in each row
   gets a bright outline so the winner reads at a glance. */
.compare-scroll table { min-width: 640px; }
.compare-table th, .compare-table td { text-align: center; white-space: nowrap; }
.compare-table thead th { vertical-align: bottom; padding-bottom: 12px; }
.compare-table thead th a { color: var(--text); text-decoration: none; font-weight: 600; }
.compare-table thead th a:hover { text-decoration: underline; }
.compare-table thead th .swatch { margin: 0 auto 6px; display: block; }
/* upright, two-line column headers (first word over the rest) */
.compare-table thead th { min-width: 78px; }
/* reserve two lines so single-word names (e.g. GPT-5) keep every crest
   aligned along the top instead of dropping down a line */
.compare-table thead th .cname { display: block; font-size: 12px; line-height: 1.25;
  white-space: nowrap; min-height: 2.5em; }
.compare-table thead th .cname .cl1 { display: block; }
.compare-table thead th .cname .cl2 { display: block; color: var(--muted); font-weight: 400; }
.compare-table .metric { text-align: left; color: var(--text); font-weight: 600;
  white-space: nowrap; }
.compare-table .metric .mhint { display: block; color: var(--muted); font-weight: 400;
  font-size: 11px; }
.compare-table tbody td { font-variant-numeric: tabular-nums; color: #c9d4de; }
/* the per-row leader: bright outlined pill */
.compare-table td.win {
  color: var(--text); font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--accent); border-radius: 7px; }