:root {
  color-scheme: dark;
  --bg: #08080b;
  --panel: #111116;
  --panel-strong: #17171e;
  --ink: #f7f2f8;
  --muted: #a59da9;
  --dim: #6f6974;
  --line: #2a2630;
  --accent: #ff3bd4;
  --accent-soft: #38102f;
  --good: #77edbd;
  --warning: #f4c46a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    14px/1.5 Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;
}

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

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="search"] {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong);
  color: var(--ink);
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
  opacity: 0.45;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

header {
  min-height: 74px;
  padding: 0 3.5vw;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand {
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.8px;
  text-decoration: none;
}

.brand span {
  color: var(--accent);
  font-weight: 450;
}

.fork {
  color: var(--dim);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.2px;
  text-decoration: none;
}

.fork:hover {
  color: var(--muted);
}

nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

nav a {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

nav a:hover,
nav [aria-current="page"] {
  color: var(--ink);
}

main {
  max-width: 1800px;
  margin: auto;
  padding: 18px 2.5vw 60px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #111116e8;
}

.eyebrow {
  margin: 0 0 9px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

h1 {
  max-width: 500px;
  margin: 0 0 13px;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -2px;
  line-height: 1.05;
}

h2 {
  margin: 0 0 10px;
  font-size: 19px;
}

h3 {
  margin: 0 0 6px;
  font-size: 13px;
}

p {
  margin: 7px 0;
}

.sub,
small {
  color: var(--muted);
}

.scope {
  margin-top: 22px;
  color: var(--dim);
  font-size: 11px;
}

.controls {
  margin-bottom: 15px;
  padding: 12px 15px;
  display: flex;
  align-items: end;
  gap: 14px;
}

.controls label {
  min-width: 170px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.controls select,
.controls input[type="search"] {
  display: block;
  width: 100%;
  min-height: 36px;
  margin-top: 5px;
  padding: 7px 10px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.controls .search {
  flex: 1;
}

.controls .check {
  min-width: auto;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0;
  text-transform: none;
}

.controls .check input {
  accent-color: var(--accent);
}

#run {
  min-height: 36px;
  padding: 7px 13px;
  white-space: nowrap;
}

.score-bars {
  margin-bottom: 15px;
  border-radius: 10px;
  padding: 20px;
}

.chart-heading {
  margin-bottom: 17px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.bar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 15px;
}

.bar-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 9.5px;
}

.bar-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.bar-chart {
  width: 100%;
  overflow: hidden;
}

.bar-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-grid {
  stroke: #2a2630;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-tick,
.chart-task-label {
  fill: var(--muted);
  font-family: var(--font-sans);
}

.chart-tick {
  font-size: 11px;
  text-anchor: end;
}

.chart-task-label {
  cursor: pointer;
  font-size: 10px;
  text-anchor: end;
}

.chart-task-label:hover {
  fill: var(--ink);
}

.chart-bar {
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 120ms ease;
}

.chart-bar:hover,
.chart-bar:focus {
  opacity: 1;
  stroke: white;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-grid.soft {
  stroke: #1c1a21;
}

.chart-value {
  fill: var(--muted);
  font-family: var(--font-sans);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* ---- toolbar: search, sort, weights in one row ---- */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 8;
  margin-bottom: 12px;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  box-shadow: 0 12px 35px #0008;
}

.toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.toolbar .search {
  flex: 1 1 260px;
}

.toolbar input[type="search"],
.toolbar select {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.toolbar input[type="search"] {
  flex: 1;
}

.weights {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.weights b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}

#weights-reset {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 11px;
}

/* ---- two-up layout: chart left, leaderboard right ---- */
.two-up {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.two-up .score-bars {
  display: flex;
  flex-direction: column;
  max-height: 78vh;
  margin-bottom: 0;
  padding: 14px 16px;
}

.two-up .bar-chart {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.two-up .chart-heading {
  margin-bottom: 8px;
}

.leaderboard {
  max-height: 78vh;
  padding: 14px 16px;
  overflow: auto;
}

.leaderboard table {
  font-size: 12px;
}

.leaderboard th,
.leaderboard td {
  min-width: 0;
  padding: 6px 6px;
  border-right: 0;
  vertical-align: middle;
  white-space: nowrap;
}

.leaderboard th {
  position: static;
  background: transparent;
  color: var(--dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.leaderboard th:first-child,
.leaderboard td:first-child {
  position: static;
  min-width: 0;
  max-width: none;
  background: transparent;
}

.leaderboard .rank {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.leaderboard .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.model-name {
  display: flex;
  align-items: center;
  gap: 7px;
}

.swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.chips {
  display: block;
  margin-top: 1px;
  color: var(--dim);
  font-size: 9.5px;
}

.latency {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.latency-track {
  flex: 1;
}

.latency-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: #1c1a21;
}

.latency-box {
  position: absolute;
  top: 2px;
  height: 6px;
  border-radius: 3px;
  background: #4d697b;
}

.latency-median {
  position: absolute;
  top: 0;
  width: 2px;
  height: 10px;
  background: var(--ink);
}

.latency-tail {
  position: absolute;
  top: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--warning);
}

.latency .sub {
  margin: 0;
  min-width: 34px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* ---- paper section ---- */
.paper {
  padding: 14px 16px;
}

.paper-matrix {
  max-height: 720px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.paper-matrix th,
.paper-matrix td {
  min-width: 64px;
  padding: 6px 8px;
  font-size: 11px;
  text-align: center;
}

.paper-matrix th:first-child,
.paper-matrix td:first-child {
  min-width: 190px;
  max-width: 220px;
  text-align: left;
}

.paper-matrix th .sub {
  margin-top: 1px;
  font-size: 9px;
}

.aggregate td {
  background: #0d0d12;
  font-weight: 700;
}

/* Table 10 format: plain numbers like the printed table */
.table10 {
  max-height: none;
  margin-bottom: 10px;
}

.table10 th,
.table10 td {
  min-width: 58px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table10 th:first-child,
.table10 td:first-child {
  min-width: 90px;
  max-width: 120px;
}

.table10 thead th {
  border-top: 3px solid transparent;
  font-weight: 700;
}

.table10 .table10-sub th {
  border-top: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.table10 td.best {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.paper .row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.paper .row button {
  padding: 4px 10px;
  font-size: 11px;
}

/* ---- self-test page ---- */
.quiz main {
  max-width: 1100px;
}

.quiz .panel {
  margin: 0 0 15px;
  padding: 20px;
}

.quiz .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quiz button,
.quiz select,
.quiz textarea {
  padding: 9px 13px;
}

.quiz textarea {
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong);
  color: var(--ink);
}

.quiz button.primary {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.quiz pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 14px/1.6 Inter, ui-sans-serif, system-ui, sans-serif;
}

.quiz .frames figure {
  margin: 0;
  flex: 0 0 75%;
}

.quiz .frames img {
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  background: var(--panel-strong);
}

.quiz .result {
  margin-top: 18px;
  padding: 16px;
  border-radius: 8px;
  background: var(--accent-soft);
}

.quiz #feedback[hidden] {
  display: none;
}

.matrix {
  margin-bottom: 15px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

th,
td {
  min-width: 118px;
  padding: 8px 9px;
  border-right: 1px solid #211e26;
  border-bottom: 1px solid #242129;
  text-align: left;
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #17171ef7;
  vertical-align: bottom;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 230px;
  max-width: 260px;
  background: #111116fa;
}

th:first-child {
  z-index: 5;
  background: #17171e;
}

.group td {
  min-width: 0;
  padding: 9px 13px;
  background: #0d0d12;
  color: var(--dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.group td:first-child {
  z-index: 4;
}

.score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  min-height: 46px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: white;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.score b {
  font-size: 14px;
  font-weight: 650;
}

.score-qs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  color: inherit;
  opacity: 0.85;
  font-size: 9px;
  font-weight: 550;
  letter-spacing: 0.1px;
}

.score-qs .idle {
  opacity: 0.55;
}

.score:hover,
.score:focus-visible {
  border-color: #ffffff80;
}

.score.winner b::after {
  content: "best";
  margin-left: 7px;
  color: inherit;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  vertical-align: middle;
}

.task-button {
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  font-weight: 650;
  text-align: left;
}

.sub {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 400;
}

.dist {
  display: flex;
  width: 125px;
  height: 4px;
  margin-top: 8px;
  border-radius: 5px;
  overflow: hidden;
  background: #28252c;
}

.dist i {
  height: 100%;
}

.empty {
  color: var(--dim);
  text-align: center;
}

.detail-row > td {
  padding: 10px 14px 12px;
}

.detail-row > td {
  padding: 18px;
  background: #0e0e13 !important;
}

.task-detail {
  display: block;
}

.task-detail article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.task-detail strong {
  color: var(--accent);
  font-size: 20px;
}

.component-list {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 5px 12px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 10px;
}

.component-list span:nth-child(3n + 2),
.component-list span:nth-child(3n + 3) {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.primary-link {
  display: inline-block;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  text-decoration: none;
}

dialog {
  width: min(1100px, 94vw);
  max-height: 92vh;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  padding: 24px;
}

dialog::backdrop {
  background: #000c;
  backdrop-filter: blur(5px);
}

.close {
  float: right;
  padding: 7px 10px;
}

.frames {
  display: flex;
  gap: 12px;
  margin: 16px 0;
  overflow: auto;
}

.frames a {
  flex: none;
  color: var(--muted);
  font-size: 10px;
  text-decoration: none;
}

.frames img {
  display: block;
  width: 480px;
  max-width: 70vw;
  max-height: 380px;
  margin-bottom: 4px;
  border-radius: 7px;
  background: #08080b;
  object-fit: contain;
}

pre {
  max-height: 360px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0b0b0f;
  padding: 13px;
  color: #d8d0db;
  font:
    11px/1.6 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

details {
  margin: 10px 0;
}

summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
}

[hidden] {
  display: none !important;
}

@media (max-width: 1050px) {
  .two-up {
    grid-template-columns: minmax(0, 1fr);
  }

  .two-up .score-bars,
  .leaderboard {
    max-height: none;
  }

  .controls {
    position: static;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .controls .search {
    min-width: 260px;
  }
}

@media (max-width: 720px) {
  header {
    padding: 14px 5vw;
    align-items: flex-start;
  }

  nav {
    gap: 7px;
    flex-direction: column;
    text-align: right;
  }

  main {
    padding: 28px 4vw 50px;
  }

  .task-detail {
    display: block;
  }

  .chart-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .bar-legend {
    justify-content: flex-start;
  }

  .controls > label,
  .controls .search {
    width: 100%;
  }

  th:first-child,
  td:first-child {
    min-width: 220px;
  }
}

/* ---- overview ---- */
.overview { grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr); }
.cost-score-panel { padding: 14px 16px; }
.chart-axis { fill: var(--muted); font-size: 11px; }
.chart-point-label { fill: var(--ink); font-size: 11px; }

.chart-iso { fill: none; stroke: var(--dim); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-iso-label { fill: var(--dim); font-size: 10px; }
.chart-pareto { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: 0.8; }
.heat-controls { align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.heat-controls label { display: inline-flex; align-items: center; gap: 5px; }
.heat-controls input[type="color"] { width: 26px; height: 20px; padding: 0; border: 1px solid var(--line); background: none; }
.heat-controls input[type="range"] { width: 90px; }
.heat-legend { display: inline-flex; height: 12px; border: 1px solid var(--line); }
.heat-legend i { display: block; width: 7px; height: 100%; }

.frontier { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 12px; }
.frontier th { color: var(--muted); font-weight: 600; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.frontier td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.frontier .num { text-align: right; font-variant-numeric: tabular-nums; }
.frontier .swatch { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; }
.chip-frontier { margin-left: 6px; padding: 1px 6px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 9px; font-weight: 600; letter-spacing: 0.3px; vertical-align: middle; }

.tab-page > .score-bars, .overview-grid > .score-bars { max-height: none; }
.tab-page > .score-bars .bar-chart, .overview-grid > .score-bars .bar-chart { overflow-x: auto; }
.tab-page > .score-bars .bar-chart svg { width: 100%; min-width: 900px; height: auto; }

.inline-check { margin-left: 10px; color: var(--muted); font-size: 11px; }
.inline-check input { accent-color: var(--accent); vertical-align: -2px; }

/* ---- tab row with the scoring control ---- */
.tabbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.model-filter { flex-basis: 100%; order: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0 10px; }
.model-filter .preset, .model-filter .chip { padding: 3px 9px; font-size: 11px; border-radius: 999px; }
.model-filter .preset { font-weight: 700; }
.model-filter .chip { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.model-filter .chip .swatch { width: 8px; height: 8px; border-radius: 2px; }
.model-filter .chip[aria-pressed="true"] { color: var(--ink); border-color: var(--muted); }
.model-filter .chip[aria-pressed="false"] { opacity: 0.45; }
.model-filter .chip[aria-pressed="false"] .swatch { filter: grayscale(1); }
body.embed .model-filter { display: none; }
.tabbar .tabs { margin: 0; border-bottom: 0; }
.tabbar .weights { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "title track reset" "note note note"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 6px 0 8px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.tabbar .weights-title { grid-area: title; font-size: 11px; color: var(--muted); white-space: nowrap; }
.tabbar .seg { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tabbar .seg span { color: #08080b; font-size: 10px; font-weight: 700; white-space: nowrap; }
.tabbar #weights-reset { grid-area: reset; }
.tabbar .weights-caption { grid-area: note; margin: 0; font-size: 10.5px; min-height: 2.6em; }
.tabbar .weights-caption b { color: var(--ink); font-weight: 600; }
@media (max-width: 1100px) { .tabbar { flex-direction: column; align-items: stretch; } }

/* ---- section titles and separators ---- */
.section-title { margin: 0 0 6px; font: 700 17px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.3px; color: var(--ink); }
.chart-heading .section-title { margin-bottom: 2px; }
.rule { margin: 26px 0 16px; border: 0; border-top: 1px solid var(--line); }
.cost-score-panel .frontier { margin-top: 10px; }

/* Card titles: mono semibold, as on eventual.ai's cards. */
.eyebrow, #leaderboard-title, #score-bars-title, #paper-title {
  font: 600 16px/1.25 var(--font-mono);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 6px;
}
.paper .eyebrow, .schema .eyebrow { margin-bottom: 8px; }
h1, h2, h3, .brand, .tabs [role="tab"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.heat-controls { gap: 14px; }
.control-group { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; white-space: nowrap; }
.control-group + .control-group { margin-left: auto; }
.table10 .table10-labs th { border-top: 0; border-bottom: 1px solid var(--line); color: var(--muted); font: 700 11px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.2px; text-align: center; }
.chart-heading { flex-wrap: wrap; }

/* ---- phones ---- */
.tabbar .tabs { overflow-x: auto; scrollbar-width: none; }
.tabbar .tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] { white-space: nowrap; flex: 0 0 auto; }
.leaderboard { overflow-x: auto; }
@media (max-width: 720px) {
  header { flex-direction: column; align-items: flex-start; gap: 10px; }
  nav { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; text-align: left; }
  main { padding: 14px 4vw 40px; }
  .overview { grid-template-columns: minmax(0, 1fr); }
  .tabbar .weights { grid-template-columns: 1fr auto; grid-template-areas: "title reset" "track track" "note note"; }
  .leaderboard th:nth-child(5), .leaderboard td:nth-child(5), .leaderboard th:nth-child(6), .leaderboard td:nth-child(6),
  .leaderboard th:nth-child(8), .leaderboard td:nth-child(8) { display: none; }   /* per-frame, per-query, latency: desktop only */
  .leaderboard th, .leaderboard td { white-space: normal; }
  .frontier { font-size: 11px; }
  .frontier th, .frontier td { padding: 5px 4px; white-space: normal; }
  .cost-score-panel .frontier td:first-child { min-width: 0; }
  .heat-controls .control-group { flex-wrap: wrap; white-space: normal; }
  .control-group + .control-group { margin-left: 0; }
  .paper-matrix { max-height: 70vh; }
  .section-title { font-size: 16px; }
}

.frontier th, .frontier td { min-width: 0; }
@media (max-width: 720px) {
  body:not(.embed) .tabs [data-desktop], body:not(.embed) #toolbar,
  body:not(.embed) .tab-page[data-tab="matrix"], body:not(.embed) .score-bars { display: none !important; }
}

/* ---- embed mode (blog iframes) ---- */
body.embed { background: var(--bg); }
body.embed header, body.embed .tabbar { display: none !important; }
body.embed main { max-width: none; padding: 0; }
body.embed .tab-page > .panel, body.embed .two-up { margin: 0; }
body.embed .panel { border-radius: 0; border-left: 0; border-right: 0; }
body.embed-full header { display: none !important; }
body.embed-full main { padding-top: 10px; }

/* ---- expanded task row ---- */
.task-detail.two-thirds { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 20px; align-items: start; position: sticky; left: 0; }
.detail-left { min-width: 0; }
.detail-right { min-width: 0; }
.clip { margin-bottom: 12px; }
.clip-frame { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 8px; border: 1px solid var(--line); }
.clip-controls { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.clip-button { width: 32px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font-size: 11px; cursor: pointer; }
.clip-strip { flex: 1; display: flex; gap: 3px; }
.clip-strip i { flex: 1; height: 10px; border-radius: 2px; background: var(--line); cursor: pointer; }
.clip-strip i.on { background: var(--accent); }
.detail-question { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.detail-question b { display: block; font-size: 12px; color: var(--muted); }
.detail-question p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; }
.detail-question .gold { color: var(--good); }
.grid-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.grid-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.grid-pills .pill { padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.grid-pills .pill.on { border-color: var(--accent); color: var(--accent); }
.grid-sort { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; }
.grid-scroll { max-height: 640px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.answer-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; table-layout: fixed; }
.answer-grid th, .answer-grid td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; }
.answer-grid thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); font-size: 11px; color: var(--muted); font-weight: 500; }
.answer-grid thead th.model { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.answer-grid thead th.model .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.answer-grid th:nth-child(1), .answer-grid td.thumb { width: 56px; }
.answer-grid th:nth-child(2), .answer-grid td.qtext { width: 220px; }
.answer-grid th:nth-child(3), .answer-grid td.gold { width: 90px; }
.answer-grid td.thumb img { display: block; width: 48px; height: 27px; object-fit: cover; border-radius: 3px; background: #000; }
.answer-grid .ans-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.answer-grid td.qtext .sub { display: block; font-size: 10px; color: var(--muted); }
.answer-grid td.gold { color: var(--good); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.answer-grid td.ans { border-left: 2px solid var(--bg); }
.answer-grid td.ans.na { color: var(--muted); }
.answer-grid td.ans.noformat .ans-text { text-decoration: underline dotted; text-underline-offset: 2px; }
.answer-grid tbody tr { cursor: pointer; }
.answer-grid tbody tr:hover td { filter: brightness(1.12); }
.answer-grid tbody tr.current td.qtext { box-shadow: inset 3px 0 0 var(--accent); }
.answer-grid tfoot th, .answer-grid tfoot td { position: sticky; height: 27px; box-sizing: border-box; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 0; font-size: 11px; color: var(--muted); font-weight: 500; }
.answer-grid tfoot tr.strong th, .answer-grid tfoot tr.strong td { color: var(--ink); font-weight: 700; }
.answer-grid tfoot .num { text-align: right; font-variant-numeric: tabular-nums; }
.grid-foot { margin-top: 8px; }
.grid-foot p { margin: 6px 0 0; }
.detail-meta h4 { margin: 0 0 4px; font: 700 16px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.detail-meta p { margin: 6px 0; font-size: 12.5px; line-height: 1.5; }
.detail-scoring { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.detail-scoring b { display: block; font-size: 12px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.detail-button { display: inline-block; padding: 6px 11px; border: 1px solid var(--accent); border-radius: 7px; color: var(--ink); background: transparent; font-size: 12px; text-decoration: none; }
@media (max-width: 1000px) { .task-detail.two-thirds { grid-template-columns: 1fr; } }
nav a.request { padding: 5px 10px; border: 1px solid var(--accent); border-radius: 7px; color: var(--ink); }
nav a.request:hover { background: var(--accent-soft); }

.video-knobs { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 8px; }
.video-knobs label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.video-knobs select { padding: 4px 8px; font-size: 12px; }

/* ---- overview as a grid of panels ---- */
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr); gap: 12px; align-items: start; }
.overview-grid > .panel { padding: 14px 16px; margin: 0; }
.overview-grid .leaderboard { max-height: none; }
.overview-grid .span-2 { grid-column: 1 / -1; }
.overview-grid .section-title { margin-bottom: 4px; }
.overview-grid .section-title + .sub { margin-top: 0; margin-bottom: 8px; }
@media (max-width: 1000px) { .overview-grid { grid-template-columns: minmax(0, 1fr); } .overview-grid .span-2 { grid-column: auto; } }

/* ---- score by task as small multiples per task family ---- */
.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.multiple { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-width: 0; }
.multiple h4 { margin: 0 0 2px; font: 700 13px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.multiple .sub { margin: 0 0 6px; font-size: 10.5px; }
.multiple svg { display: block; width: 100%; height: auto; }
.tab-page > .score-bars .bar-chart svg { min-width: 0; }

/* ---- task family pills ---- */
.task-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.task-filter .preset, .task-filter .chip { padding: 3px 9px; font-size: 11px; border-radius: 999px; }
.task-filter .preset { font-weight: 700; }
.task-filter .chip { color: var(--muted); }
.task-filter .chip[aria-pressed="true"] { color: var(--ink); border-color: var(--muted); }
.task-filter .chip[aria-pressed="false"] { opacity: 0.45; }
body.embed .task-filter { display: none; }
/* single-panel embeds of the overview */
body.embed-leaderboard .overview-grid > .panel:not(.leaderboard),
body.embed-plot .overview-grid > .panel:not(.cost-score-panel),
body.embed-frontier .overview-grid > .panel:not(.frontier-panel):not(.readings-panel),
body.embed-video .overview-grid > .panel:not(.video-panel),
body.embed-serving .overview-grid > .panel:not(.serving-panel),
body.embed-score .overview-grid > .panel:not(.score-bars) { display: none; }
body.embed .overview-grid { gap: 10px; }

/* ---- task wheel and radar (Overview) ---- */
.wheel-panel { padding: 14px 16px; margin-bottom: 12px; }
.wheel-panel .chart-heading { align-items: start; }
.wheel-panel #wheel-note { max-width: 640px; }
.wheel-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.wheel-controls .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.wheel-controls .seg button { padding: 5px 12px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.wheel-controls .seg button + button { border-left: 1px solid var(--line); }
.wheel-controls .seg button[aria-pressed="true"] { color: var(--ink); background: #1b1620; }
.wheel { display: flex; justify-content: center; }
.wheel svg { width: min(100%, 860px); height: auto; }
.wheel-guide { fill: none; stroke: var(--line); stroke-width: 1; }
.wheel-tick { fill: var(--muted); font-size: 10px; }
.wheel-domain { fill: #1a1520; stroke: var(--bg); stroke-width: 2; }
.wheel-domain.d0 { fill: #2a1b3a; } .wheel-domain.d1 { fill: #1d2a3a; } .wheel-domain.d2 { fill: #1b3330; } .wheel-domain.d3 { fill: #3a2a1b; } .wheel-domain.d4 { fill: #3a1b2c; }
.wheel-group { fill: #17141c; stroke: var(--bg); stroke-width: 2; }
.wheel-domain-label { fill: var(--ink); font-size: 10.5px; font-weight: 600; dominant-baseline: middle; letter-spacing: 0.02em; }
.wheel-group-label { fill: var(--muted); font-size: 9.5px; dominant-baseline: middle; }
.wheel-task-label { fill: var(--ink); font-size: 10px; dominant-baseline: middle; pointer-events: none; }
.wheel-wedge { fill: transparent; stroke: var(--line); stroke-width: 0.6; cursor: pointer; }
.wheel-wedge:hover { fill: #ffffff0c; }
.wheel-bar { cursor: pointer; }
.wheel-bar:hover, .wheel-bar:focus { stroke: var(--ink); stroke-width: 1; outline: none; }
.wheel-center { fill: var(--ink); font-size: 16px; font-weight: 700; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.wheel-center.sub { fill: var(--muted); font-size: 11px; font-weight: 400; font-family: inherit; }
.wheel-axis { stroke: var(--line); stroke-width: 1; }
.wheel-axis-label { fill: var(--ink); font-size: 12px; }
.wheel-axis-sub { fill: var(--muted); font-size: 10px; }
.radar-shape { fill-opacity: 0.08; stroke-width: 2; }
.radar-shape:hover { fill-opacity: 0.22; }
.radar-dot { stroke: var(--bg); stroke-width: 1; }
body.embed-wheel .panel:not(.wheel-panel) { display: none; }
@media (max-width: 720px) { .wheel-controls { align-items: flex-start; } .wheel-panel .chart-heading { flex-direction: column; } }

/* ---- analysis tab ---- */
.dist-svg { width: 100%; height: auto; }
.dist-label { fill: var(--ink); font-size: 11px; cursor: pointer; }
.dist-label:hover { fill: var(--accent); }
.dist-head { fill: var(--muted); font-size: 10.5px; cursor: pointer; letter-spacing: .04em; text-transform: uppercase; }
.dist-head.on, .dist-head:hover { fill: var(--accent); }
.dist-num { fill: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.dist-band { fill: #ffffff14; }
.dist-dot { stroke: var(--bg); stroke-width: 1; cursor: pointer; }
.dist-dot:hover { stroke: var(--ink); }
.dist-median { stroke: var(--ink); stroke-width: 2; }
.dist-mean { fill: #000; stroke: var(--ink); stroke-width: 1; }
.table-scroll { overflow-x: auto; }
.variants th, .variants td { white-space: nowrap; }
.whatif-bar { gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.whatif-table { margin-bottom: 14px; }
.whatif-grid th:nth-child(1), .whatif-grid td:nth-child(1) { width: 40px; text-align: center; }
.whatif-grid th:nth-child(2), .whatif-grid td.thumb { width: 56px; }
.whatif-grid th:nth-child(3), .whatif-grid td.qtext { width: 260px; cursor: pointer; }
.whatif-grid th:nth-child(4), .whatif-grid td.gold { width: 110px; }
.whatif-grid tbody tr.excluded td { opacity: .45; }
.whatif-grid tbody tr.excluded td:first-child { opacity: 1; }
.whatif-grid tbody tr { cursor: default; }
body.embed-distribution .overview-grid > .panel:not(.distribution-panel),
body.embed-boxes .overview-grid > .panel:not(.boxes-panel),
body.embed-whatif .overview-grid > .panel:not(.whatif-panel) { display: none; }
@media (max-width: 720px) { body:not(.embed) .tab-page[data-tab="analysis"], body:not(.embed) .tab-page[data-tab="caveats"] { display: none !important; } }

.dist-views { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; align-self: start; }
.dist-views button { padding: 5px 12px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.dist-views button + button { border-left: 1px solid var(--line); }
.dist-views button[aria-pressed="true"] { color: var(--ink); background: #1b1620; }
.dist-group { fill: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.dist-group.then { fill: var(--muted); }
.dist-group.now { fill: var(--ink); }
.dist-band.then { fill: #ffffff10; }
.dist-dot.then { fill: #9a9a9a; fill-opacity: .55; stroke: none; }
.dist-median.then { stroke: #9a9a9a; }
.dist-mean.then { fill: #000; stroke: #9a9a9a; }
.dist-num.then { fill: var(--muted); }
.dist-num.up { fill: var(--good); }
.dist-num.down { fill: #ff6b6b; }
.dist-shift { stroke-width: 1.5; stroke-dasharray: 3 2; }
.dist-shift.up { stroke: var(--good); }
.dist-shift.down { stroke: #ff6b6b; }
.suspect-note { margin: 8px 0 10px; padding: 10px 12px; border-left: 3px solid var(--warning); background: var(--panel); font-size: 12.5px; line-height: 1.5; }
.suspect-table td.gold { color: var(--good); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suspect-table tbody tr { cursor: pointer; }
.suspect-table tbody tr.nobody td:first-child { color: #ff6b6b; }
.cutin-link { stroke: var(--muted); stroke-width: 2; }
.cutin-dot.official { fill: #f4c46a; stroke: var(--bg); }
.cutin-dot.reworded { fill: var(--accent); stroke: var(--bg); }
body.embed-suspect .overview-grid > .panel:not(.suspect-panel),
body.embed-cutin .overview-grid > .panel:not(.cutin-panel) { display: none; }
.cutin-legend { fill: var(--muted); font-size: 10.5px; }
.box-link { stroke-width: 2.5; opacity: .8; }
.box-none { fill: #8a8a8a; }
.variants-details { margin-top: 10px; }
.variants-details summary { cursor: pointer; color: var(--muted); font-size: 12px; }

/* ---- quadrants ---- */
.quad-grid { display: grid; grid-template-columns: 150px 1fr 1fr; grid-template-rows: auto auto auto; gap: 10px; align-items: stretch; }
.quad-head { color: var(--muted); font-size: 12px; text-align: center; padding: 4px 0; }
.quad-side { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; padding-right: 6px; }
.quad-side b { font-size: 13px; }
.quad-side span { color: var(--muted); font-size: 11px; }
.quad-cell { border-radius: 10px; padding: 12px 14px; min-height: 120px; border: 1px solid var(--line); background: var(--panel); }
.quad-cell.trust { border-color: #1D9E7566; box-shadow: inset 4px 0 0 #1D9E75; }
.quad-cell.distrust { border-color: #D85A3066; box-shadow: inset 4px 0 0 #D85A30; }
.quad-cell h4 { margin: 0 0 4px; font: 700 14px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.quad-cell p { margin: 0 0 10px; }
.quad-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.quad-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.quad-chip b { font-size: 12px; font-weight: 600; }
.quad-chip span { font-size: 10.5px; color: var(--muted); }
.quad-cell.trust .quad-chip:hover { border-color: #1D9E75; }
.quad-cell.distrust .quad-chip:hover { border-color: #D85A30; }
body.embed-quadrants .overview-grid > .panel:not(.quadrants-panel) { display: none; }
@media (max-width: 900px) { .quad-grid { grid-template-columns: 1fr; grid-template-rows: none; } .quad-head { display: none; } .quad-side { align-items: flex-start; text-align: left; } }

/* Capability grouping in the analysis distribution. */
.distribution-controls { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 12px 0 18px; }
.distribution-controls label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.dist-domain-band { fill: var(--bg); }
.dist-domain-heading { fill: var(--ink); font-size: 12px; font-weight: 600; }

/* Box reading control and the frontier-by-reading table. */
.cost-controls { gap: 12px 24px; margin-top: 8px; }
.cost-controls label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.readings-panel td.on-frontier { color: var(--ink); font-weight: 600; }
.readings-panel td.on-frontier::before { content: "● "; color: var(--accent, #ff00ff); }
.readings-panel th.active { color: var(--ink); }

/* Typography after eventual.ai: bold tight sans headings, monospace body and interface, card titles in mono semibold. IBM Plex Mono stands in for the site's licensed favoritMono. Chart text stays
   sans because label placement assumes proportional widths. */
:root {
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --label: #b0b0b0;
}
body { font-family: var(--font-mono); font-size: 13px; }
h1, h2, h3, .brand { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.03em; }
.tabs [role="tab"], button, input, select, table, .sub, .panel p { font-family: var(--font-mono); }
.section-title { font: 600 16px/1.25 var(--font-mono); letter-spacing: -0.02em; }
.sub { font-size: 11px; line-height: 1.5; color: var(--label); }
svg text { font-family: var(--font-sans); }
.sub .more { color: var(--label); font-size: 11px; text-decoration: underline; text-underline-offset: 2px; margin-left: 2px; }
.sub .more:hover { color: var(--accent); }

/* Controls sit under their chart in a card, so the copy above runs straight into the chart. */
.control-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; padding: 10px 12px;
                border: 1px solid var(--line); border-radius: 8px; background: var(--panel-strong); }
.control-card label { color: var(--label); font-size: 12px; display: inline-flex; align-items: center; gap: 8px; }
.control-card .distribution-controls { margin: 0; }
#suspect, #whatif { display: flex; flex-direction: column; }
#suspect > .whatif-bar, #whatif > .whatif-bar { order: 2; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line);
                                                border-radius: 8px; background: var(--panel-strong); }