/* OpenTumorBoard theme layer (indigo + coral, monospace).
   Loaded after styles.css. Remove the theme.css <link> in index.html to revert. */

:root {
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: var(--mono);
  --num: var(--mono);
  --ink: #1a1f36;
  --ink-soft: #3c4262;
  --muted: #646a86;
  --line: #dfe2ee;
  --line-strong: #c3c8dc;
  --canvas: #f7f8fc;
  --band: #eef0fa;
  --surface: #ffffff;
  --surface-soft: #f3f4fa;
  --surface-hover: #f7f8fd;
  --accent: #3b4bc8;
  --accent-dark: #2a37a0;
  --accent-soft: #e7e9fa;
  --accent-line: #c3c9f1;
  --bar-muted: #b7beea;
  --coral: #e8765c;
  --coral-ink: #b4472f;
  --coral-soft: #fdede8;
  --nav-ink: var(--ink);
  --blue-ink: var(--accent);
  --blue-soft: #f3f4fa;
  --blue-selected: var(--accent-soft);
  --blue-line: var(--accent-line);
  --detail: var(--coral);
  --detail-soft: var(--coral-soft);
  --detail-ink: var(--coral-ink);
  --display: var(--sans);
  --gold: #8a6411;
  --gold-soft: #f7edd3;
  --gold-line: #e3cf98;
  --silver: #56607a;
  --silver-soft: #eceef4;
  --silver-line: #c8cddc;
  --bronze: #8a4f30;
  --bronze-soft: #f6e6dc;
  --bronze-line: #e2c0ab;
  --shadow: 0 1px 2px rgba(26, 31, 54, .04), 0 8px 24px rgba(26, 31, 54, .05);
}

/* ---------- Base ---------- */
html { background: var(--canvas); }
body { overflow-x: clip; background: var(--canvas); color: var(--ink); font-family: var(--mono); font-size: 13px; line-height: 1.6; }
button, select, input, textarea { font-family: inherit; }
:focus-visible { outline-color: var(--accent); }

/* ---------- Navbar ---------- */
.site-header {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-nav { min-height: 60px; }
.brand { gap: 10px; }
.brand .board-brand-mark { width: 30px; height: 30px; color: var(--accent); }
.otb-wordmark { color: var(--ink); font: 700 16px/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; }
.otb-wordmark span { color: var(--accent); }
.otb-links { display: flex; align-items: center; gap: 2px; }
.otb-links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px;
  border-radius: 8px; color: var(--ink-soft); font-size: 12.5px; font-weight: 500; text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.otb-links a:hover { color: var(--accent); background: var(--accent-soft); }

/* ---------- Hero ---------- */
.benchmark-hero.otb-hero { display: block; padding: 64px 0 50px; text-align: center; }
.otb-hero .hero-copy { max-width: 820px; margin: 0 auto; }
.otb-hero .board-brand-mark { display: block; width: 58px; height: 58px; margin: 0 auto 20px; color: var(--accent); }
.otb-hero .hero-copy h1 {
  max-width: none; margin: 0 0 18px;
  color: var(--ink); font: 700 clamp(32px, 7vw, 68px)/1.04 var(--sans); letter-spacing: -0.03em;
}
.otb-hero .hero-copy h1 span { color: var(--accent); }
.otb-hero .hero-copy > p { max-width: 64ch; margin-inline: auto; font-size: 15px; line-height: 1.6; text-wrap: balance; }
.otb-hero .hero-copy > .hero-tagline { margin-bottom: 4px; color: var(--ink); font-weight: 500; }
.otb-hero .hero-copy > .hero-description { color: var(--muted); font-size: 14px; }
.otb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.otb-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  color: var(--ink); font: 600 13px/1 var(--sans); text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(26, 31, 54, .05);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.otb-btn svg { flex: 0 0 auto; width: 16px; height: 16px; }
.otb-btn:hover { border-color: var(--accent); color: var(--accent); }
.otb-btn.is-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.otb-btn.is-primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); color: #fff; }

/* ---------- Leaderboard band ---------- */
.results-main { position: relative; isolation: isolate; margin-bottom: 0; }
.clinical-section { position: relative; padding: 56px 0 64px; }
.clinical-section::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
  background: var(--band); border-block: 1px solid var(--line);
}
.otb-section-head { margin-bottom: 26px; text-align: center; }
.otb-section-title { margin: 0 0 8px; color: var(--ink); font: 700 28px/1.2 var(--sans); letter-spacing: -0.01em; }
.otb-section-sub { margin: 0; color: var(--muted); font-size: 13px; }

/* stat strip: one card, hairline dividers */
.otb-stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  margin-bottom: 22px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: var(--line); box-shadow: var(--shadow);
}
.otb-stat { min-width: 0; padding: 18px 20px 16px; background: var(--surface); }
.otb-stat strong { display: block; color: var(--ink); font-size: 25px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.otb-stat > span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.otb-stat small { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.otb-stat small b { color: var(--accent); font-weight: 600; }
.otb-stat.is-top strong { color: var(--accent); }

/* ---------- Task switch + filters ---------- */
.leaderboard-task-switch { gap: 12px; }
.leaderboard-task-button { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-soft); }
.leaderboard-task-button:hover { border-color: var(--line-strong); background: var(--surface); }
.leaderboard-task-button.active, .leaderboard-task-button.active:hover {
  border-color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow);
}
.leaderboard-task-button strong { color: var(--ink); font-size: 14px; font-weight: 700; }
.leaderboard-task-button small { color: var(--muted); }
.task-symbol { border-color: var(--line); background: var(--surface-soft); color: var(--muted); }
.leaderboard-task-button.active .task-symbol { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: none; }

.reasoning-mode-toolbar { margin: 16px 0; }
.filter-toolbar-title { color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.compact-filter select, .compact-metric-select select { border-color: var(--line-strong); background-color: var(--surface); color: var(--ink); }
.compact-filter select:hover, .compact-metric-select select:hover { border-color: var(--accent); }
.compact-filter select:focus-visible, .compact-metric-select select:focus-visible { border-color: var(--accent); outline-color: var(--accent-line); }
.reset-filters { color: var(--accent); }

/* ---------- Leaderboard card ---------- */
.leaderboard-chart-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.chart-card-header { padding: 16px 22px 10px; }
.metric-control-buttons { flex-wrap: wrap; gap: 2px; box-shadow: inset 0 -1px var(--line); }
.clinical-metric-button {
  flex: 0 0 auto; min-height: 42px; margin: 0; padding: 8px 14px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--muted); text-align: left;
}
.clinical-metric-button > span { font-size: 12.5px; font-weight: 600; }
.clinical-metric-button:hover { background: transparent; color: var(--ink); }
.clinical-metric-button.active { border-color: var(--accent); background: transparent; color: var(--accent); }
.clinical-metric-button.active > span { font-weight: 700; }

.chart-view-buttons, .cost-view-switch { padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.chart-view-buttons button, .cost-view-switch button { color: var(--muted); }
.chart-view-buttons button:hover, .cost-view-switch button:hover { color: var(--ink); background: transparent; }
.chart-view-buttons button[aria-pressed='true'], .chart-view-buttons button.active,
.cost-view-switch button[aria-pressed='true'], .cost-view-switch button.active {
  border-color: var(--line); background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(26, 31, 54, .06);
}
.chart-summary { padding: 4px 22px 12px; }
.vertical-chart-heading b { color: var(--accent); }

.ranking-columns {
  padding-inline: 24px; border-block: 1px solid var(--line); background: var(--surface-soft);
  color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.clinical-chart-row { padding-block: 12px; border-bottom: 1px solid var(--line); }
.clinical-chart-row:hover { background: var(--surface-hover); }
.clinical-chart-row.is-winner { background: #f6f7fe; }

/* rank pill: gold / silver / bronze for the visible top three */
.chart-model > span {
  width: auto; min-width: 30px; height: 24px; padding: 0 7px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft);
  color: var(--ink-soft); font-size: 11px; font-weight: 700; line-height: 22px; box-shadow: none;
}
.clinical-chart-row.is-winner .chart-model > span,
.clinical-chart .clinical-chart-row:nth-child(1 of .clinical-chart-row:not([hidden])) .chart-model > span { border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold); box-shadow: none; }
.clinical-chart .clinical-chart-row:nth-child(2 of .clinical-chart-row:not([hidden])) .chart-model > span { border-color: var(--silver-line); background: var(--silver-soft); color: var(--silver); }
.clinical-chart .clinical-chart-row:nth-child(3 of .clinical-chart-row:not([hidden])) .chart-model > span { border-color: var(--bronze-line); background: var(--bronze-soft); color: var(--bronze); }
.chart-model strong { color: var(--ink); font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.chart-model small, .reasoning-badge { font-size: 11.5px; }
.chart-model-meta > small:not(:last-child)::after { color: var(--line-strong); }
.chart-model-meta .reasoning-badge.mode-reasoning { color: var(--accent); }
.chart-model .chart-model-coverage { background: var(--coral-soft); color: var(--coral-ink); }

/* model logos (added by the script at the end of index.html) */
.chart-model strong, .clinical-metric-table td strong, .role-card > header strong { display: flex; align-items: center; gap: 8px; }
.otb-model-logo {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 2px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; object-fit: contain;
}
.otb-model-logo.is-mono {
  display: inline-grid; place-items: center; padding: 0;
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-dark);
  font: 700 10px/1 var(--mono);
}
.clinical-metric-table .otb-model-logo { width: 18px; height: 18px; }

/* bars + score */
.chart-track { height: 8px; border-radius: 999px; background: #eceef8; }
.chart-bar { height: 8px; border-radius: 999px; background: var(--bar-muted); }
.clinical-chart-row.is-winner .chart-bar,
.clinical-chart .clinical-chart-row:nth-child(1 of .clinical-chart-row:not([hidden])) .chart-bar { background: var(--accent); }
.clinical-chart .clinical-chart-row:nth-child(2 of .clinical-chart-row:not([hidden])) .chart-bar { background: #6572d6; }
.clinical-chart .clinical-chart-row:nth-child(3 of .clinical-chart-row:not([hidden])) .chart-bar { background: #8e98e2; }
.bar-score { justify-self: end; color: var(--ink); font-size: 13.5px; font-weight: 700; letter-spacing: 0; }
.clinical-chart-row.is-winner .bar-score,
.clinical-chart .clinical-chart-row:nth-child(1 of .clinical-chart-row:not([hidden])) .bar-score { color: var(--accent); }
@media (min-width: 781px) and (max-width: 1100px) {
  .clinical-metric-button { flex: 0 0 auto; text-align: left; padding-inline: 11px; }
  .clinical-metric-button > span { font-size: 12px; }
}

/* ---------- All-metrics table ---------- */
.clinical-metric-table th { background: var(--surface-soft); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.clinical-metric-table th:nth-child(2) { background: var(--surface-soft); }
.matrix-metric-button { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.matrix-metric-button small { font-weight: 400; letter-spacing: 0; text-transform: none; }
.matrix-metric-button:hover { background: var(--surface-hover); color: var(--ink); }
.matrix-metric-button.active { border-top-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.clinical-metric-table td { color: var(--ink-soft); font-size: 12.5px; }
.clinical-metric-table td strong { color: var(--ink); font-weight: 700; }
.matrix-rank { width: auto; min-width: 28px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-weight: 700; }
.is-winner .matrix-rank { border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold); }
.clinical-metric-table tr.is-winner, .clinical-metric-table .is-winner td:nth-child(2) { background: #f6f7fe; }
.table-scroll-hint { color: var(--accent); }
.table-scroll-hint span { font-family: system-ui, sans-serif; }

/* ---------- Efficiency + specialist panels ---------- */
.cost-quality-panel, .role-panel { border-top: 1px solid var(--line); }
.cost-quality-panel > header strong, .role-panel > header strong { color: var(--ink); font: 700 20px/1.3 var(--sans); letter-spacing: -0.01em; }
.cost-quality-panel > header .panel-eyebrow, .role-panel > header .panel-eyebrow { color: var(--coral-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; }
.cost-quality-plot, .cost-quality-data { border-color: var(--line); border-radius: 12px; background: var(--surface); }
.cq-grid line { stroke: #e9ebf4; }
.cq-axis-label { fill: var(--muted); font-family: var(--mono); }
.cq-axis-title { fill: var(--ink-soft); }
.cq-frontier { stroke: var(--coral); stroke-width: 2.4; opacity: .95; }
.cq-leader { stroke: var(--line-strong); }
.cq-point .cq-marker { fill: #fff; stroke: #9aa1c0; stroke-width: 1.8; }
.cq-point.is-frontier .cq-marker { fill: var(--accent); stroke: var(--accent-dark); }
.cq-point:hover .cq-marker, .cq-point:focus-visible .cq-marker, .cq-compact .cq-point.is-selected .cq-marker { stroke: var(--accent-dark); }
.cq-point-detail { border-top-color: var(--line); color: var(--ink-soft); }
.legend-frontier i { border-top-color: var(--coral); }
.legend-dominated i { border-color: #9aa1c0; background: #fff; }
.legend-toggle { border-color: var(--line); background: var(--surface); color: var(--muted); }
.legend-toggle:hover { border-color: var(--accent); color: var(--accent); }
.legend-toggle.active, .legend-toggle[aria-pressed='true'] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-dark); }
.legend-toggle i.legend-square { color: var(--accent); }
.cost-axis-button { color: var(--muted); }
.cost-axis-button.active { background: var(--accent-soft); color: var(--accent-dark); }
.cost-data-table th { background: var(--surface-soft); color: var(--muted); }
.cost-data-frontier, .cost-frontier-badge { background: var(--accent-soft); color: var(--accent-dark); }

.role-axis-key { border-color: var(--line); background: var(--surface-soft); }
.role-axis-list li { border-color: var(--line); }
.role-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.role-card > header strong { font-weight: 700; }
.role-rank { border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-weight: 700; }
.role-grid .role-card:nth-child(1 of .role-card:not([hidden])) .role-rank { border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold); }
.role-grid .role-card:nth-child(2 of .role-card:not([hidden])) .role-rank { border-color: var(--silver-line); background: var(--silver-soft); color: var(--silver); }
.role-grid .role-card:nth-child(3 of .role-card:not([hidden])) .role-rank { border-color: var(--bronze-line); background: var(--bronze-soft); color: var(--bronze); }
.role-key-model i { border-color: var(--accent); background: rgba(59, 75, 200, .14); }
.role-key-median i { border-color: #a9afcb; background: rgba(100, 106, 134, .08); }
.role-model-shape { fill: rgba(59, 75, 200, .14); stroke: var(--accent); }
.role-median-shape { fill: rgba(100, 106, 134, .07); stroke: #a9afcb; }
.role-strong { background: var(--accent-soft); color: var(--accent-dark); }
.role-weak { background: var(--coral-soft); color: var(--coral-ink); }
.chart-reading-guide > summary { color: var(--accent); cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer.otb-footer {
  flex-direction: column; justify-content: center; gap: 4px;
  margin-top: 0; padding-block: 30px 36px; border-top: 0; text-align: center;
}
.site-footer.otb-footer > span { color: var(--ink); font-size: 12.5px; font-weight: 700; }
.site-footer.otb-footer p { flex: none; order: 0; color: var(--muted); font-size: 12px; }
.site-footer.otb-footer a { min-height: 32px; color: var(--accent); font-size: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .otb-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .otb-stat { grid-column: span 2; }
  .otb-stat:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 780px) {
  .benchmark-hero.otb-hero { padding: 44px 0 36px; }
  .clinical-section { padding: 40px 0 44px; }
  .otb-section-title { font-size: 26px; }
}
@media (max-width: 600px) {
  .site-nav { gap: 8px; }
  .brand .board-brand-mark { width: 26px; height: 26px; }
  .otb-wordmark { font-size: 15px; }
  .otb-links .otb-link-optional { display: none; }
  .otb-links a { padding: 6px 8px; font-size: 11.5px; }
  .benchmark-hero.otb-hero { padding: 34px 0 28px; }
  .otb-hero .board-brand-mark { width: 46px; height: 46px; margin-bottom: 14px; }
  .otb-hero .hero-copy > p { font-size: 13.5px; }
  .otb-hero .hero-copy > .hero-description { font-size: 13px; }
  .otb-actions { gap: 8px; margin-top: 22px; }
  .otb-btn { padding-inline: 16px; }
  .otb-stat { padding: 12px 12px 11px; }
  .otb-stat strong { font-size: 19px; }
  .otb-stat > span { font-size: 9.5px; letter-spacing: .04em; }
  .otb-stat small { font-size: 11.5px; }
  .chart-card-header { grid-template-columns: minmax(0, 1fr); }
  .chart-view-buttons { justify-self: start; }
  .bar-score { font-size: 13px; }
  .chart-model > span { min-width: 26px; padding: 0 5px; }
  .chart-model strong { gap: 6px; }
  .otb-model-logo { width: 18px; height: 18px; }
}

/* ---------- Polish pass ---------- */

/* Hero: faint glow behind the logo */
.benchmark-hero.otb-hero {
  background: radial-gradient(ellipse 60% 70% at 50% 0%, var(--accent-soft) 0%, transparent 70%);
}

/* Task switch: lift on hover */
.leaderboard-task-button { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.leaderboard-task-button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.leaderboard-task-button.active:hover { transform: none; }

/* Filters: reset as a small pill */
.reset-filters {
  min-height: 34px; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--coral-ink); font-size: 12px; font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
.reset-filters::before { content: "\00d7"; margin-right: 6px; font-weight: 700; }
.reset-filters:hover { border-color: var(--coral); background: var(--coral-soft); text-decoration: none; }

/* Ranking: bars animate when the metric or filter changes */
.chart-bar { transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.clinical-chart-row { transition: background .15s ease; }

/* Efficiency filter pills, right-aligned next to the heading */
.cost-quality-legend { max-width: none; justify-content: flex-end; gap: 8px; }
.legend-toggle { min-height: 32px; padding: 5px 12px; font-weight: 600; transition: border-color .15s ease, background .15s ease, color .15s ease; }
@media (max-width: 1100px) {
  .cost-quality-legend { justify-content: flex-start; }
}

/* Efficiency: axis switch becomes a segmented control, matching Plot / Data */
.cost-axis-switch {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft);
}
.cost-axis-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 5px 12px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--muted); font-size: 12px;
  transition: color .15s ease, background .15s ease;
}
.cost-axis-button small { color: inherit; opacity: .75; }
.cost-axis-button:hover { background: transparent; color: var(--ink); }
.cost-axis-button.active { border-color: var(--line); background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(26, 31, 54, .06); }

/* Scatter plot: no frontier line or frontier labelling; every point gets the same marker */
.cq-frontier, .legend-frontier, .legend-dominated, .cost-data-frontier, .cost-frontier-badge { display: none; }
.cq-point .cq-marker, .cq-point.is-frontier .cq-marker { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.8; transition: stroke-width .12s ease; }
.cq-point:hover .cq-marker, .cq-point:focus-visible .cq-marker, .cq-compact .cq-point.is-selected .cq-marker { fill: var(--accent); stroke: var(--accent-dark); stroke-width: 2.6; }
.cq-point-label { font-size: 11px; font-weight: 700; stroke-width: 3px; }
.cq-axis-title { font-weight: 700; }

/* Cost data table: headers match the other tables */
.cost-data-table thead th { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

/* Specialist cards: lift on hover, softer axis-key chips */
.role-card { transition: box-shadow .16s ease, transform .16s ease; }
.role-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(26, 31, 54, .05), 0 14px 32px rgba(26, 31, 54, .08); }
.role-axis-list li { border-radius: 999px; padding: 4px 10px; }
.role-axis-name { color: var(--ink); }
.chart-reading-guide > summary { font-weight: 600; }
.role-readout span { border-radius: 999px; padding: 3px 9px; font-weight: 600; }

/* All-metrics table: gentle zebra striping so long rows are easy to follow */
.clinical-metric-table tbody tr:nth-child(even):not(.is-winner) td { background: #fafbfe; }
.clinical-metric-table tbody tr:nth-child(even):not(.is-winner) td:nth-child(2) { background: #fafbfe; }
.clinical-metric-table tbody tr:hover td { background: var(--surface-hover); }

@media (max-width: 600px) {
  .cost-axis-switch { display: flex; width: 100%; }
  .cost-axis-button { flex: 1 1 0; min-height: 40px; }
  .cost-axis-button small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chart-bar, .leaderboard-task-button, .role-card, .cq-point .cq-marker { transition: none; }
  .leaderboard-task-button:hover, .role-card:hover { transform: none; }
}

/* ---------- Refinement pass ---------- */

::selection { background: var(--accent-soft); color: var(--ink); }

/* Sticky header picks up a shadow once the page scrolls (app.js toggles .is-scrolled) */
.site-header { transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(26, 31, 54, .06); }

/* Hero: dot grid that fades out from the centre, sitting under the glow */
.benchmark-hero.otb-hero { position: relative; z-index: 0; }
.benchmark-hero.otb-hero::before {
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 50% 80% at 50% 40%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 80% at 50% 40%, #000 0%, transparent 72%);
  opacity: .6;
}
.otb-hero .hero-copy h1 { text-shadow: 0 1px 0 #fff; }
.otb-btn { transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
.otb-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(26, 31, 54, .06), 0 8px 18px rgba(26, 31, 54, .08); }
.otb-btn.is-primary {
  background: linear-gradient(180deg, #4b5bd6 0%, var(--accent) 100%);
  box-shadow: 0 1px 2px rgba(59, 75, 200, .35), 0 8px 20px rgba(59, 75, 200, .22);
}
.otb-btn.is-primary:hover {
  background: linear-gradient(180deg, #4353cf 0%, var(--accent-dark) 100%);
  box-shadow: 0 1px 2px rgba(59, 75, 200, .35), 0 10px 24px rgba(59, 75, 200, .3);
}

/* Section title: short indigo→coral rule under the heading */
.otb-section-title::after {
  content: ""; display: block; width: 40px; height: 3px; margin: 12px auto 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--coral));
}
.otb-section-sub { margin-top: 10px; }

/* Stat strip: model name and task on separate lines, tabular numbers */
.otb-stat strong { font-size: 27px; font-variant-numeric: tabular-nums; }
.otb-stat small i { display: block; margin-top: 1px; font-style: normal; }
.otb-stat { transition: background .15s ease; }
.otb-stat:hover { background: var(--surface-hover); }

/* Filters: dropdown chevron in the theme's ink colour */
.compact-filter select, .compact-metric-select select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m4 5.5 3 3 3-3' fill='none' stroke='%23646a86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ranking rows: reasoning / modality as small pills, winner gets a left accent and a Best tag */
.chart-model-meta { gap: 5px 6px; align-items: center; margin-top: 6px; }
.chart-model-meta > small:not(:last-child)::after { content: none; }
.chart-model-meta .chart-provider { margin-right: 4px; }
.chart-model-meta .reasoning-badge, .chart-model-meta .modality-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft);
  color: var(--muted); font-size: 10.5px; font-weight: 600; line-height: 19px; white-space: nowrap;
}
.chart-model-meta .reasoning-badge.mode-reasoning { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-dark); }
.chart-model-meta .reasoning-lightbulb { display: inline-block; width: 11px; height: 11px; }
.chart-model .chart-model-coverage { padding: 0 8px; border: 1px solid #f3c9bd; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 19px; }
.clinical-chart-row.is-winner { box-shadow: inset 3px 0 0 var(--accent); }
.clinical-chart-row.is-winner .best-model-badge {
  display: inline-flex; align-items: center; padding: 0 7px;
  border: 1px solid var(--gold-line); border-radius: 999px; background: var(--gold-soft);
  color: var(--gold); font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .08em; line-height: 17px; text-transform: uppercase;
}

/* Task switch: icon tiles a touch larger */
.task-symbol { width: 38px; height: 38px; border-radius: 11px; }
.leaderboard-task-button { grid-template-columns: 38px minmax(0, 1fr); }

/* Footer: brand mark, tagline and links */
.site-footer.otb-footer { gap: 10px; padding-block: 34px 40px; }
.otb-footer-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.otb-footer-brand .board-brand-mark { width: 22px; height: 22px; color: var(--accent); }
.otb-footer-brand span span { color: var(--accent); }
.otb-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.site-footer.otb-footer .otb-footer-links a { min-height: 32px; display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; text-decoration: none; transition: color .15s ease; }
.site-footer.otb-footer .otb-footer-links a:hover { color: var(--accent); }

@media (max-width: 600px) {
  .task-symbol { width: 30px; height: 32px; border-radius: 8px; }
  .leaderboard-task-button { grid-template-columns: 30px minmax(0, 1fr); }
  .chart-model-meta .chart-provider { display: none; }
  .otb-stat strong { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .otb-btn, .site-header, .otb-stat { transition: none; }
  .otb-btn:hover { transform: none; }
}

/* ---------- Simplify: reasoning / input distinctions are no longer shown ---------- */
.reasoning-mode-toolbar { display: none; }
.leaderboard-task-switch { margin-bottom: 16px; }
.chart-model-meta .chart-model-mode { display: none; }
.chart-model-meta .chart-provider { margin-right: 0; }
.cost-quality-legend { display: none; }
rect.cq-marker { rx: 50%; ry: 50%; }

/* ---------- Auxiliary metrics (BERTScore, ROUGE) are not shown ---------- */
[data-clinical-metric="bertscore_raw_f1"], [data-clinical-metric="rouge_l_f1"],
.clinical-metric-table th:has(> [data-matrix-metric="bertscore_raw_f1"]),
.clinical-metric-table th:has(> [data-matrix-metric="rouge_l_f1"]),
.clinical-metric-table td[data-matrix-value="bertscore_raw_f1"],
.clinical-metric-table td[data-matrix-value="rouge_l_f1"] { display: none; }
.clinical-metric-table { min-width: 0; }
.clinical-metric-table th:nth-child(n+3) { width: 150px; }

/* ---------- Explore pass: facts line, expandable rows, specialist heatmap ---------- */

/* Facts line under the hero copy */
.otb-meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0;
  margin: 18px auto 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px;
}
.otb-meta li { display: inline-flex; align-items: center; padding: 0 12px; border-left: 1px solid var(--line-strong); white-space: nowrap; }
.clinical-chart-row.is-winner .best-model-badge { white-space: nowrap; }
.otb-meta li:first-child { border-left: 0; }
.otb-meta b { color: var(--ink); font-weight: 700; margin-right: 4px; }
.otb-meta li b + b { margin-left: 4px; }
.otb-meta-updated b { margin-left: 4px; margin-right: 0; }
.otb-meta-status { gap: 6px; color: #8a5a10; }
.otb-meta-status i { width: 7px; height: 7px; border-radius: 50%; background: #e0a52a; box-shadow: 0 0 0 3px #f7edd3; }
.otb-hero .otb-actions { margin-top: 24px; }

/* Expandable ranking rows */
.clinical-chart-row.otb-expandable { cursor: pointer; padding-right: 48px; }
.ranking-columns { padding-right: 48px; }
.otb-row-toggle {
  position: absolute; top: 50%; right: 14px; display: grid; place-items: center; width: 26px; height: 26px;
  margin: 0; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent;
  color: var(--muted); cursor: pointer; transform: translateY(-50%); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.otb-row-toggle span { display: grid; transition: transform .2s ease; }
.otb-row-toggle svg { width: 16px; height: 16px; }
.clinical-chart-row:hover .otb-row-toggle { color: var(--ink); background: var(--surface); border-color: var(--line); }
.clinical-chart-row.is-open .otb-row-toggle { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.clinical-chart-row.is-open .otb-row-toggle span { transform: rotate(180deg); }
.clinical-chart-row.is-open .otb-row-toggle { top: 30px; }
.clinical-chart-row.is-open { background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-line); }
.clinical-chart-row.is-winner.is-open { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--accent-line); }
.otb-row-detail {
  grid-column: 1 / -1; margin: 12px -24px -12px; padding: 16px 24px 14px;
  border-top: 1px solid var(--line); background: var(--surface-soft); cursor: default;
  animation: otb-reveal .18s ease-out;
}
.clinical-chart-row.otb-expandable .otb-row-detail { margin-right: -48px; padding-right: 48px; }
@keyframes otb-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.otb-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 28px; }
.otb-detail-col h4 { margin: 0 0 8px; color: var(--ink); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.otb-detail-col h4 small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.otb-detail-list { display: grid; gap: 6px; margin: 0; }
.otb-detail-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.otb-detail-list > div:last-child { border-bottom: 0; }
.otb-detail-list dt { color: var(--muted); font-size: 12px; }
.otb-detail-list dd { margin: 0; color: var(--ink); font-size: 12.5px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.otb-detail-list dd small { color: var(--muted); font-weight: 400; }
.otb-detail-list dd .otb-dir { display: block; font-size: 10.5px; }
.otb-role-bars { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.otb-role-bar { display: grid; grid-template-columns: 152px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 12px; }
.otb-role-bar > span { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otb-role-bar > em { color: var(--ink); font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.otb-role-track { position: relative; display: block; height: 8px; border-radius: 999px; background: #e3e6f3; }
.otb-role-track b { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--bar-muted); }
.otb-role-track u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink-soft); opacity: .6; }
.otb-role-bar.is-strong .otb-role-track b { background: var(--accent); }
.otb-role-bar.is-strong > em { color: var(--accent); }
.otb-role-bar.is-weak .otb-role-track b { background: var(--coral); }
.otb-role-bar.is-weak > em { color: var(--coral-ink); }
.otb-detail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 0 0; color: var(--muted); font-size: 11.5px; }
.otb-detail-foot > span + span::before { content: "\00b7"; margin-right: 10px; color: var(--line-strong); }
.otb-detail-foot code { padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-soft); font-size: 11px; }

/* Specialist heatmap */
.otb-role-switch { display: inline-flex; gap: 2px; margin: 0 0 14px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.otb-role-switch button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.otb-role-switch button svg { width: 14px; height: 14px; }
.otb-role-switch button:hover { color: var(--ink); }
.otb-role-switch button[aria-pressed="true"] { border-color: var(--line); background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(26, 31, 54, .06); }
.role-panel .chart-reading-guide { margin-bottom: 14px; }
.role-panel.is-table .role-grid, .role-panel.is-table .role-axis-key, .role-panel.is-table .role-legend, .role-panel.is-table .chart-reading-guide { display: none; }
.role-panel:not(.is-table) .otb-role-table-wrap { display: none; }
.otb-role-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); scrollbar-width: thin; }
.otb-role-table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.otb-role-table th, .otb-role-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; font-size: 12.5px; }
.otb-role-table thead th { white-space: nowrap; background: var(--surface-soft); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: bottom; }
.otb-role-table thead th small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.otb-role-table .otb-rt-rank { width: 48px; }
.otb-role-table .otb-rt-model { text-align: left; }
.otb-role-table tbody th.otb-rt-model strong { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; white-space: nowrap; }
.otb-role-table .otb-rt-overall { color: var(--ink); font-weight: 700; }
.otb-rt-pill { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.otb-rt-pill.is-gold { border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold); }
.otb-rt-pill.is-silver { border-color: var(--silver-line); background: var(--silver-soft); color: var(--silver); }
.otb-rt-pill.is-bronze { border-color: var(--bronze-line); background: var(--bronze-soft); color: var(--bronze); }
.otb-rt-cell { color: var(--ink); background: color-mix(in srgb, var(--accent) calc(var(--heat, 0) * 82%), #fff); transition: filter .12s ease; }
.otb-role-table tbody tr:hover .otb-rt-cell { filter: saturate(1.15); }
.otb-rt-cell.is-dark { color: #fff; }
.otb-rt-cell.is-best { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.otb-rt-cell.is-median { color: var(--muted); background: var(--surface-soft); }
.otb-role-table tfoot th { color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: left; background: var(--surface-soft); }
.otb-role-table tfoot td { background: var(--surface-soft); }
.otb-role-table tbody tr:hover td:not(.otb-rt-cell), .otb-role-table tbody tr:hover th { background: var(--surface-hover); }
.otb-role-table tfoot th, .otb-role-table tfoot td, .otb-role-table tbody tr:last-child td, .otb-role-table tbody tr:last-child th { border-bottom: 0; }
.otb-role-table tfoot th, .otb-role-table tfoot td { border-top: 1px solid var(--line); }
.otb-role-table-note { margin: 10px 14px 12px; color: var(--muted); font-size: 11.5px; }

@media (max-width: 780px) {
  .otb-meta li { padding: 0 9px; }
  .clinical-chart-row.otb-expandable, .ranking-columns { padding-right: 44px; }
  .clinical-chart-row.otb-expandable .otb-row-detail { margin-inline: -20px -44px; padding-inline: 20px 44px; }
}
@media (max-width: 600px) {
  .otb-meta { gap: 4px 0; font-size: 11px; }
  .otb-meta li { padding: 0 7px; }
  .otb-meta li { border-left: 0; padding: 0 6px; }
  .otb-meta-status { flex-basis: 100%; justify-content: center; margin-top: 4px; }
  .clinical-chart-row.is-winner .best-model-badge { white-space: nowrap; }
  .clinical-chart-row.otb-expandable, .ranking-columns { padding-right: 40px; }
  .otb-row-toggle { right: 8px; }
  .clinical-chart-row.otb-expandable .otb-row-detail { margin-inline: -12px -40px; padding-inline: 12px 40px; }
  .otb-role-bar { grid-template-columns: 110px minmax(0, 1fr) 38px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .otb-row-detail { animation: none; }
  .otb-row-toggle span { transition: none; }
}

/* ---------- Efficiency plot: frontier line restored ---------- */
.cq-frontier { display: block; stroke: var(--coral); stroke-width: 2.4; stroke-dasharray: 6 5; opacity: .95; }
.cq-point.is-frontier .cq-marker { fill: var(--accent); stroke: var(--accent-dark); }
.otb-plot-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 12px; color: var(--muted); font-size: 11.5px; }
.otb-plot-key span { display: inline-flex; align-items: center; gap: 7px; }
.otb-plot-key i { display: inline-block; flex: 0 0 auto; }
.otb-plot-key .is-line { width: 24px; height: 0; border-top: 2px dashed var(--coral); }
.otb-plot-key .is-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--accent-dark); }
.otb-plot-key .is-hollow { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-soft); border: 1.5px solid var(--accent); }

/* ---------- Showcase pass: dark chrome, aurora hero, podium, motion ---------- */

html { background: #0b0f2c; }

/* Navbar: dark glass */
.site-header {
  background: rgba(11, 15, 44, .84);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header.is-scrolled { box-shadow: 0 10px 34px rgba(4, 6, 24, .45); }
.brand .board-brand-mark { color: #9aa3ff; }
.otb-wordmark { color: #fff; }
.otb-wordmark span, .otb-footer-brand span span {
  background: linear-gradient(90deg, #9aa3ff 0%, #c5b3ff 50%, #ff9f88 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.otb-links a { color: #c3c8ea; }
.otb-links a:hover { color: #fff; background: rgba(255, 255, 255, .09); }

/* Hero: aurora background, white type, glass buttons */
.benchmark-hero.otb-hero { padding: 76px 0 132px; background: none; color: #fff; }
.otb-aurora {
  position: absolute; inset: 0 calc(50% - 50vw); z-index: -2; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #0b0f2c 0%, #121847 100%);
}
.otb-aurora i {
  position: absolute; width: 58vw; height: 58vw; max-width: 760px; max-height: 760px; border-radius: 50%;
  filter: blur(72px); mix-blend-mode: screen; will-change: transform;
}
.otb-aurora i:nth-child(1) { left: -12%; top: -34%; background: #4b5bd6; opacity: .62; animation: otb-drift-a 18s ease-in-out infinite alternate; }
.otb-aurora i:nth-child(2) { right: -14%; top: -26%; background: #e8765c; opacity: .34; animation: otb-drift-b 22s ease-in-out infinite alternate; }
.otb-aurora i:nth-child(3) { left: 34%; bottom: -58%; background: #2dd4bf; opacity: .2; animation: otb-drift-c 26s ease-in-out infinite alternate; }
@keyframes otb-drift-a { to { transform: translate(14%, 12%) scale(1.12); } }
@keyframes otb-drift-b { to { transform: translate(-12%, 16%) scale(1.08); } }
@keyframes otb-drift-c { to { transform: translate(-16%, -10%) scale(1.18); } }
.benchmark-hero.otb-hero::before {
  z-index: -1; opacity: .45;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .5) 1px, transparent 1.3px);
  -webkit-mask-image: radial-gradient(ellipse 55% 85% at 50% 40%, #000 0%, transparent 74%);
  mask-image: radial-gradient(ellipse 55% 85% at 50% 40%, #000 0%, transparent 74%);
}
.otb-hero .board-brand-mark { color: #9aa3ff; filter: drop-shadow(0 0 16px rgba(154, 163, 255, .75)); }
.otb-hero .hero-copy h1 { color: #fff; text-shadow: none; }
.otb-hero .hero-copy h1 span {
  background: linear-gradient(90deg, #9aa3ff 0%, #c5b3ff 45%, #ff9f88 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.otb-hero .hero-copy > .hero-tagline { color: #eef0fb; }
.otb-hero .hero-copy > .hero-description { color: #aab1d8; }
.otb-meta { color: #aab1d8; }
.otb-meta b { color: #fff; }
.otb-meta li { border-left-color: rgba(255, 255, 255, .2); }
.otb-hero .otb-btn {
  border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); color: #fff; box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.otb-hero .otb-btn:hover { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .13); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.otb-hero .otb-btn.is-primary {
  border-color: transparent; background: linear-gradient(180deg, #5d6cff 0%, #3b4bc8 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 30px rgba(59, 75, 200, .55);
}
.otb-hero .otb-btn.is-primary:hover { background: linear-gradient(180deg, #6a78ff 0%, #4353cf 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 36px rgba(59, 75, 200, .65); }

/* Stat strip floats across the dark/light boundary */
.clinical-section { display: flex; flex-direction: column; padding-top: 0; }
.clinical-section > * { min-width: 0; }
.otb-stats { order: -1; margin: -78px 0 0; box-shadow: 0 26px 60px rgba(8, 11, 40, .3), 0 1px 2px rgba(8, 11, 40, .12); }
.otb-stat strong { font-size: 30px; }
.otb-stat.is-top strong {
  background: linear-gradient(90deg, var(--accent), #7d8bff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.otb-section-head { margin: 44px 0 26px; }

/* Podium at the top of each task card */
.otb-podium {
  position: relative; overflow: hidden; padding: 18px 22px 22px; color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(232, 118, 92, .26), transparent 55%),
    radial-gradient(90% 130% at 0% 100%, rgba(59, 75, 200, .5), transparent 60%),
    linear-gradient(135deg, #10153b 0%, #1a2052 100%);
}
.otb-podium::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .45) 1px, transparent 1.3px); background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
}
.otb-podium > header { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 14px; }
.otb-podium-eyebrow { color: #ff9f88; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.otb-podium > header strong { font-size: 13px; font-weight: 700; }
.otb-podium > header small { color: #aab1d8; font-size: 11px; }
.otb-podium-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 0; padding: 0; list-style: none; }
.otb-podium-item { min-width: 0; }
.otb-podium-item.is-1 { order: 2; }
.otb-podium-item.is-2 { order: 1; }
.otb-podium-item.is-3 { order: 3; }
.otb-podium-item button {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo rank" "name rank" "prov rank" "score score";
  gap: 4px 10px; width: 100%; padding: 14px 14px 12px; text-align: left; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.otb-podium-item button:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .28); }
.otb-podium-item button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.otb-podium-item.is-1 button { padding-top: 22px; padding-bottom: 16px; border-color: rgba(255, 207, 92, .55); box-shadow: 0 0 0 1px rgba(255, 207, 92, .25), 0 16px 36px rgba(255, 190, 60, .16), inset 0 1px 0 rgba(255, 255, 255, .15); }
.otb-podium-item.is-2 button { border-color: rgba(214, 220, 232, .45); box-shadow: 0 0 0 1px rgba(214, 220, 232, .15), 0 10px 26px rgba(150, 160, 190, .12); }
.otb-podium-item.is-3 button { border-color: rgba(226, 160, 110, .5); box-shadow: 0 0 0 1px rgba(226, 160, 110, .18), 0 10px 26px rgba(200, 120, 70, .14); }
.otb-podium-item .otb-model-logo { grid-area: logo; width: 26px; height: 26px; padding: 3px; border-color: rgba(255, 255, 255, .25); }
.otb-podium-item .otb-model-logo.is-mono { background: rgba(255, 255, 255, .15); color: #fff; border-color: rgba(255, 255, 255, .25); }
.otb-podium-item strong { grid-area: name; margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.otb-podium-item small { grid-area: prov; color: #aab1d8; font-size: 11px; }
.otb-podium-item b { grid-area: score; margin-top: 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.otb-podium-item.is-1 b { background: linear-gradient(90deg, #ffe08a, #ffb347); -webkit-background-clip: text; background-clip: text; color: transparent; }
.otb-podium-rank {
  grid-area: rank; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); font-size: 11px; font-weight: 800;
}
.otb-podium-item.is-1 .otb-podium-rank { border-color: rgba(255, 207, 92, .8); background: rgba(255, 207, 92, .2); color: #ffe08a; }
.otb-podium-item.is-2 .otb-podium-rank { border-color: rgba(214, 220, 232, .7); background: rgba(214, 220, 232, .15); color: #e8ecf5; }
.otb-podium-item.is-3 .otb-podium-rank { border-color: rgba(226, 160, 110, .8); background: rgba(226, 160, 110, .18); color: #ffc79c; }
.otb-podium + .chart-card-header { border-top: 1px solid var(--line); }

/* Ranking rows: entrance motion and glowing lead bar */
.clinical-chart-row { animation: otb-rise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes otb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html:not(.otb-ready) .chart-bar { width: 0; }
.chart-bar { transition: width .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 30ms); }
.clinical-chart-row.is-winner .chart-bar,
.clinical-chart .clinical-chart-row:nth-child(1 of .clinical-chart-row:not([hidden])) .chart-bar {
  background: linear-gradient(90deg, var(--accent) 0%, #7d8bff 100%); box-shadow: 0 0 14px rgba(59, 75, 200, .35);
}

/* Efficiency plot: glowing frontier */
.cq-frontier { filter: drop-shadow(0 0 5px rgba(232, 118, 92, .55)); animation: otb-march 1.8s linear infinite; }
@keyframes otb-march { to { stroke-dashoffset: -22; } }
.cq-point.is-frontier .cq-marker { filter: drop-shadow(0 0 5px rgba(59, 75, 200, .6)); }

/* Heatmap: colour scale bar */
.otb-heat-scale { display: flex; align-items: center; gap: 8px; margin: 0 14px 12px; color: var(--muted); font-size: 11px; }
.otb-heat-scale i { flex: 0 0 150px; height: 8px; border: 1px solid var(--line); border-radius: 999px; background: linear-gradient(90deg, #fff, var(--accent)); }
.otb-role-table-note { margin-bottom: 8px; }

/* Footer: dark, bookending the page */
.site-footer.otb-footer { position: relative; z-index: 0; padding-block: 40px 46px; color: #aab1d8; }
.site-footer.otb-footer::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(180deg, #0f1439 0%, #0b0f2c 100%); }
.otb-footer-brand { color: #fff; }
.otb-footer-brand .board-brand-mark { color: #9aa3ff; }
.site-footer.otb-footer p { color: #aab1d8; }
.site-footer.otb-footer .otb-footer-links a { color: #c3c8ea; }
.site-footer.otb-footer .otb-footer-links a:hover { color: #fff; }

@media (max-width: 780px) {
  .benchmark-hero.otb-hero { padding: 52px 0 112px; }
  .otb-stats { margin-top: -64px; }
}
@media (max-width: 600px) {
  .benchmark-hero.otb-hero { padding: 40px 0 100px; }
  .otb-stats { margin-top: -58px; }
  .otb-stat strong { font-size: 22px; }
  .otb-section-head { margin-top: 32px; }
  /* podium stacks into three rows, 1-2-3 */
  .otb-podium { padding: 14px 12px 14px; }
  .otb-podium-list { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px; }
  .otb-podium-item.is-1 { order: 1; }
  .otb-podium-item.is-2 { order: 2; }
  .otb-podium-item.is-3 { order: 3; }
  .otb-podium-item button { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "rank logo name score" "rank logo prov score"; align-items: center; gap: 1px 10px; padding: 10px 12px; }
  .otb-podium-item.is-1 button { padding: 12px; }
  .otb-podium-item strong { margin-top: 0; font-size: 12.5px; }
  .otb-podium-item small { font-size: 10.5px; }
  .otb-podium-item b { margin-top: 0; font-size: 18px; text-align: right; }
  .otb-podium-rank { width: 22px; height: 22px; font-size: 10px; }
  .otb-podium-item .otb-model-logo { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .otb-aurora i, .cq-frontier, .clinical-chart-row { animation: none; }
  .chart-bar, .otb-podium-item button { transition: none; }
  html:not(.otb-ready) .chart-bar { width: var(--chart-value, 0%); }
}

/* ---------- Palette engine: every colour on the page flows from these variables ---------- */
:root {
  /* Default palette 10 nocturne (暗夜 · 霓虹). Others: <html data-palette="celadon|ultramarine|pine|lotus|tidepool|rust|rouge|sapphire|clouddancer|indigo">. */
  --canvas: #f8f7fc; --band: #eeecf7; --surface: #ffffff; --surface-soft: #f3f1fa; --surface-hover: #f7f5fc;
  --ink: #16132a; --ink-soft: #37325a; --muted: #6b6788; --line: #e2dff0; --line-strong: #c6c1de;
  --accent: #6a4cf5; --accent-dark: #5136cf; --accent-soft: #ebe6ff; --accent-line: #cfc4ff; --accent-rgb: 106 76 245; --accent-bright: #a58cff;
  --coral: #f0a12b; --coral-ink: #b06d07; --coral-soft: #fdf0d8; --coral-rgb: 240 161 43;
  --warn: #e0457b; --warn-ink: #b12a5b; --warn-soft: #fde4ec;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #0a0918; --dark-2: #171340; --dark-rgb: 10 9 24;
  --on-dark: #f6f4ff; --on-dark-2: #aba7d0; --on-dark-3: #cbc7e8; --mark: #b7a6ff;
  --glow-a: #6a4cf5; --glow-b: #ff4fa3; --glow-c: #f0a12b;
  --grad-a: #b7a6ff; --grad-b: #ff9ad9; --grad-c: #ffd37a;
}

/* dark chrome */
html { background: var(--dark-1); }
.site-header { background: rgb(var(--dark-rgb) / .84); }
.brand .board-brand-mark, .otb-hero .board-brand-mark, .otb-footer-brand .board-brand-mark { color: var(--mark); }
.otb-hero .board-brand-mark { filter: drop-shadow(0 0 16px rgb(var(--accent-rgb) / .6)); }
.otb-wordmark span, .otb-footer-brand span span, .otb-hero .hero-copy h1 span { background-image: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 50%, var(--grad-c) 100%); }
.otb-links a, .site-footer.otb-footer .otb-footer-links a { color: var(--on-dark-3); }
.otb-links a:hover, .site-footer.otb-footer .otb-footer-links a:hover { color: var(--on-dark); }
.otb-aurora { background: linear-gradient(180deg, var(--dark-1) 0%, var(--dark-2) 100%); }
.otb-aurora i:nth-child(1) { background: var(--glow-a); }
.otb-aurora i:nth-child(2) { background: var(--glow-b); }
.otb-aurora i:nth-child(3) { background: var(--glow-c); }
.benchmark-hero.otb-hero, .otb-hero .hero-copy h1, .otb-meta b, .otb-footer-brand { color: var(--on-dark); }
.otb-hero .hero-copy > .hero-tagline { color: color-mix(in srgb, var(--on-dark) 92%, var(--dark-2)); }
.otb-hero .hero-copy > .hero-description, .otb-meta, .otb-podium > header small, .otb-podium-item small,
.site-footer.otb-footer, .site-footer.otb-footer p { color: var(--on-dark-2); }
.otb-hero .otb-btn { color: var(--on-dark); }
.otb-hero .otb-btn.is-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 30px rgb(var(--accent-rgb) / .55);
}
.otb-hero .otb-btn.is-primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 68%, #fff) 0%, var(--accent-dark) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 36px rgb(var(--accent-rgb) / .65);
}
.otb-stats { box-shadow: 0 26px 60px rgb(var(--dark-rgb) / .3), 0 1px 2px rgb(var(--dark-rgb) / .12); }
.otb-stat.is-top strong { background-image: linear-gradient(90deg, var(--accent), var(--accent-bright)); }
.otb-podium {
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(var(--coral-rgb) / .26), transparent 55%),
    radial-gradient(90% 130% at 0% 100%, rgb(var(--accent-rgb) / .5), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--dark-1) 65%, var(--dark-2)) 0%, var(--dark-2) 100%);
}
.otb-podium-eyebrow { color: var(--grad-c); }
.site-footer.otb-footer::before { background: linear-gradient(180deg, var(--dark-2) 0%, var(--dark-1) 100%); }

/* light content */
.clinical-chart-row.is-winner, .clinical-metric-table tr.is-winner, .clinical-metric-table .is-winner td:nth-child(2) { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.clinical-chart-row.is-winner.is-open { background: var(--surface); }
.chart-track { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.clinical-chart .clinical-chart-row:nth-child(2 of .clinical-chart-row:not([hidden])) .chart-bar { background: color-mix(in srgb, var(--accent) 72%, #fff); }
.clinical-chart .clinical-chart-row:nth-child(3 of .clinical-chart-row:not([hidden])) .chart-bar { background: color-mix(in srgb, var(--accent) 52%, #fff); }
.clinical-chart-row.is-winner .chart-bar,
.clinical-chart .clinical-chart-row:nth-child(1 of .clinical-chart-row:not([hidden])) .chart-bar {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%); box-shadow: 0 0 14px rgb(var(--accent-rgb) / .35);
}
.clinical-metric-table tbody tr:nth-child(even):not(.is-winner) td,
.clinical-metric-table tbody tr:nth-child(even):not(.is-winner) td:nth-child(2) { background: color-mix(in srgb, var(--accent) 2%, var(--surface)); }
.cq-grid line { stroke: color-mix(in srgb, var(--line) 70%, var(--surface)); }
.cq-frontier { filter: drop-shadow(0 0 5px rgb(var(--coral-rgb) / .55)); }
.cq-point.is-frontier .cq-marker { filter: drop-shadow(0 0 5px rgb(var(--accent-rgb) / .6)); }
.role-key-model i { background: rgb(var(--accent-rgb) / .14); }
.role-model-shape { fill: rgb(var(--accent-rgb) / .14); }
.role-key-median i { border-color: var(--line-strong); }
.role-median-shape { stroke: var(--line-strong); }
.otb-role-track { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.otb-heat-scale i { background: linear-gradient(90deg, var(--surface), var(--accent)); }
.otb-rt-cell { background: color-mix(in srgb, var(--accent) calc(var(--heat, 0) * 82%), var(--surface)); }
.chart-model .chart-model-coverage { border-color: color-mix(in srgb, var(--warn) 45%, #fff); background: var(--warn-soft); color: var(--warn-ink); }
.role-weak { background: var(--warn-soft); color: var(--warn-ink); }
.otb-role-bar.is-weak .otb-role-track b { background: var(--warn); }
.otb-role-bar.is-weak > em { color: var(--warn-ink); }

/* ---------- Palettes: set data-palette on <html>; the default (:root above) is 10 nocturne 暗夜 · 霓虹 ---------- */

/* 01 celadon  青瓷 · 朱砂  — celadon green & cinnabar on deep pine */
html[data-palette="celadon"] {
  --canvas: #f4f7f5; --band: #e8efeb; --surface: #ffffff; --surface-soft: #edf3ef; --surface-hover: #f2f6f3;
  --ink: #14211c; --ink-soft: #32453d; --muted: #5c7068; --line: #d3ded8; --line-strong: #b0c4ba;
  --accent: #178e7c; --accent-dark: #106d5f; --accent-soft: #dbeee9; --accent-line: #aedacf; --accent-rgb: 23 142 124; --accent-bright: #5fc6b3;
  --coral: #d2422c; --coral-ink: #a9311f; --coral-soft: #fbe4df; --coral-rgb: 210 66 44;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #06201e; --dark-2: #0f3d39; --dark-rgb: 6 32 30;
  --on-dark: #f3faf7; --on-dark-2: #a6c6bd; --on-dark-3: #c8e1d9; --mark: #9fe8d6;
  --glow-a: #1fb59c; --glow-b: #d2422c; --glow-c: #e8c15a;
  --grad-a: #9fe8d6; --grad-b: #e9f2c4; --grad-c: #ffc2a8;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 02 ultramarine  群青 · 藤黄  — palace blue & gamboge gold */
html[data-palette="ultramarine"] {
  --canvas: #f5f7fb; --band: #eaeef7; --surface: #ffffff; --surface-soft: #eff2f9; --surface-hover: #f4f6fb;
  --ink: #131a2e; --ink-soft: #323c5a; --muted: #5d6784; --line: #d8deeb; --line-strong: #b6c0d8;
  --accent: #1f56c4; --accent-dark: #163f95; --accent-soft: #e3eafb; --accent-line: #b9caf3; --accent-rgb: 31 86 196; --accent-bright: #6f9cff;
  --coral: #d9a021; --coral-ink: #8a6208; --coral-soft: #fbf0d2; --coral-rgb: 217 160 33;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #0a1230; --dark-2: #14225a; --dark-rgb: 10 18 48;
  --on-dark: #f5f7ff; --on-dark-2: #a9b4dc; --on-dark-3: #c6cfef; --mark: #f2c94c;
  --glow-a: #2f6bff; --glow-b: #f2b134; --glow-c: #4fc3f7;
  --grad-a: #9dbcff; --grad-b: #e6ecff; --grad-c: #ffd166;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 03 pine  松绿 · 金盏  — forest green & marigold */
html[data-palette="pine"] {
  --canvas: #f5f7f2; --band: #e9eee3; --surface: #ffffff; --surface-soft: #eff3ea; --surface-hover: #f3f6ef;
  --ink: #14201a; --ink-soft: #2f4236; --muted: #5b6f61; --line: #d5ded3; --line-strong: #b3c3b3;
  --accent: #237a4e; --accent-dark: #185c3a; --accent-soft: #ddf0e4; --accent-line: #aedbc1; --accent-rgb: 35 122 78; --accent-bright: #5fcf8f;
  --coral: #e0962a; --coral-ink: #9a5f0b; --coral-soft: #fcecd3; --coral-rgb: 224 150 42;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #0b1f17; --dark-2: #163a2d; --dark-rgb: 11 31 23;
  --on-dark: #f3faf5; --on-dark-2: #a3c2b0; --on-dark-3: #c5dccd; --mark: #8fe3b4;
  --glow-a: #2fa36a; --glow-b: #f1b24a; --glow-c: #4fd1c5;
  --grad-a: #a8f0c8; --grad-b: #f3f6c9; --grad-c: #ffd28a;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 04 lotus  青莲 · 柿红  — royal purple & persimmon */
html[data-palette="lotus"] {
  --canvas: #f7f5fb; --band: #eeeaf7; --surface: #ffffff; --surface-soft: #f3f0fa; --surface-hover: #f7f4fc;
  --ink: #1a1430; --ink-soft: #3b325a; --muted: #6a6386; --line: #e0dbee; --line-strong: #c3bbdd;
  --accent: #5b3fa6; --accent-dark: #45308a; --accent-soft: #ebe5f9; --accent-line: #cbbdf0; --accent-rgb: 91 63 166; --accent-bright: #a184ff;
  --coral: #e85d3f; --coral-ink: #b23c22; --coral-soft: #fde5df; --coral-rgb: 232 93 63;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #150f2b; --dark-2: #2a1f57; --dark-rgb: 21 15 43;
  --on-dark: #f8f5ff; --on-dark-2: #b0a7d4; --on-dark-3: #cec6ea; --mark: #c9b4ff;
  --glow-a: #7c5cff; --glow-b: #e85d3f; --glow-c: #ffb347;
  --grad-a: #c9b4ff; --grad-b: #ffd6c9; --grad-c: #ffb347;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 05 tidepool  潭水 · 陶土  — deep teal & clay on warm cream */
html[data-palette="tidepool"] {
  --canvas: #f7f5f0; --band: #ede9e1; --surface: #fffdf9; --surface-soft: #f3f0e9; --surface-hover: #f8f6f1;
  --ink: #1b1f1f; --ink-soft: #384242; --muted: #66716f; --line: #dfdcd3; --line-strong: #c2beb2;
  --accent: #1f5c63; --accent-dark: #17464b; --accent-soft: #dcebec; --accent-line: #a9cfd3; --accent-rgb: 31 92 99; --accent-bright: #4fb3bd;
  --coral: #c0704d; --coral-ink: #8f4c2e; --coral-soft: #f7e5dc; --coral-rgb: 192 112 77;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #0f1f21; --dark-2: #1c3a3e; --dark-rgb: 15 31 33;
  --on-dark: #f6f3ec; --on-dark-2: #a9bdb9; --on-dark-3: #cbd9d6; --mark: #7fd0d4;
  --glow-a: #2b8a94; --glow-b: #c0704d; --glow-c: #e5c07b;
  --grad-a: #9fdfe2; --grad-b: #efe7db; --grad-c: #e8b58f;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 06 rust  赭石 · 石板  — rust & slate on warm stone */
html[data-palette="rust"] {
  --canvas: #f8f5f0; --band: #eee9e1; --surface: #fffdfa; --surface-soft: #f4f0ea; --surface-hover: #f8f5f0;
  --ink: #1e1c1c; --ink-soft: #3d3a3a; --muted: #6d6866; --line: #e3ddd4; --line-strong: #c8c0b4;
  --accent: #b8432c; --accent-dark: #8f3220; --accent-soft: #f8e3dd; --accent-line: #edbdb0; --accent-rgb: 184 67 44; --accent-bright: #ff8a66;
  --coral: #4b6777; --coral-ink: #37505e; --coral-soft: #e2e9ee; --coral-rgb: 75 103 119;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #1a1a1e; --dark-2: #2b2a31; --dark-rgb: 26 26 30;
  --on-dark: #f7f4ef; --on-dark-2: #b3adaa; --on-dark-3: #d1ccc8; --mark: #ff9d7a;
  --glow-a: #c1432e; --glow-b: #4b6777; --glow-c: #ce9e62;
  --grad-a: #ffb59c; --grad-b: #ffe3c2; --grad-c: #a9c5d6;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 07 rouge  胭脂 · 竹青  — rouge & bamboo on dark plum */
html[data-palette="rouge"] {
  --canvas: #faf6f7; --band: #f2e9ec; --surface: #ffffff; --surface-soft: #f6eff2; --surface-hover: #faf5f7;
  --ink: #241419; --ink-soft: #46303a; --muted: #75616a; --line: #e8dbe0; --line-strong: #d0bcc5;
  --accent: #b6314f; --accent-dark: #8e2540; --accent-soft: #f9e2e8; --accent-line: #f0b9c8; --accent-rgb: 182 49 79; --accent-bright: #ff7a9c;
  --coral: #5f8a4f; --coral-ink: #3f6333; --coral-soft: #e6efdf; --coral-rgb: 95 138 79;
  --warn: #c26a1e; --warn-ink: #8f4c12; --warn-soft: #fbe8d6;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #1e0f17; --dark-2: #3a1c2c; --dark-rgb: 30 15 23;
  --on-dark: #fff5f8; --on-dark-2: #c3a6b2; --on-dark-3: #dcc5cf; --mark: #ff9ab5;
  --glow-a: #d63d6a; --glow-b: #6fa35a; --glow-c: #f2b544;
  --grad-a: #ffb3c8; --grad-b: #ffe4ec; --grad-c: #c8e6a6;
}

/* 08 sapphire  宝石蓝 · 翡翠  — sapphire & jade on midnight */
html[data-palette="sapphire"] {
  --canvas: #f4f6fc; --band: #e8ecf8; --surface: #ffffff; --surface-soft: #eef1fa; --surface-hover: #f3f5fc;
  --ink: #0f1633; --ink-soft: #2e375e; --muted: #5a638a; --line: #d6dcef; --line-strong: #b4bddc;
  --accent: #1e4fc9; --accent-dark: #163b98; --accent-soft: #e2e9fc; --accent-line: #b6c8f6; --accent-rgb: 30 79 201; --accent-bright: #6d95ff;
  --coral: #12a67a; --coral-ink: #0c7355; --coral-soft: #d9f3ea; --coral-rgb: 18 166 122;
  --warn: #d9822b; --warn-ink: #9a5710; --warn-soft: #fbe9d5;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #080e2c; --dark-2: #121c55; --dark-rgb: 8 14 44;
  --on-dark: #f5f7ff; --on-dark-2: #a3aedb; --on-dark-3: #c3cbee; --mark: #8ab4ff;
  --glow-a: #2f5fff; --glow-b: #12a67a; --glow-c: #a259ff;
  --grad-a: #9cb8ff; --grad-b: #b9f5df; --grad-c: #d3b4ff;
}

/* 09 clouddancer  云舞 · 赤陶  — Pantone 2026 Cloud Dancer, steel blue & burnt sienna */
html[data-palette="clouddancer"] {
  --canvas: #f0eee9; --band: #e6e3dc; --surface: #fbfaf7; --surface-soft: #efede7; --surface-hover: #f5f3ee;
  --ink: #24262b; --ink-soft: #44474f; --muted: #6f7379; --line: #dcd9d1; --line-strong: #c1bdb3;
  --accent: #2f6f8f; --accent-dark: #23556e; --accent-soft: #dfeaf1; --accent-line: #b3cddc; --accent-rgb: 47 111 143; --accent-bright: #6db3d6;
  --coral: #c65d52; --coral-ink: #97402f; --coral-soft: #f8e3e0; --coral-rgb: 198 93 82;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #1c1f24; --dark-2: #2f343c; --dark-rgb: 28 31 36;
  --on-dark: #f5f4f0; --on-dark-2: #b4b8bd; --on-dark-3: #d0d3d7; --mark: #a9d3e8;
  --glow-a: #4a90b0; --glow-b: #c65d52; --glow-c: #d0c9a8;
  --grad-a: #bfe0ef; --grad-b: #f0eee9; --grad-c: #e9b9a6;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* legacy indigo  靛蓝 · 珊瑚  — the original scheme */
html[data-palette="indigo"] {
  --canvas: #f7f8fc; --band: #eef0fa; --surface: #ffffff; --surface-soft: #f3f4fa; --surface-hover: #f7f8fd;
  --ink: #1a1f36; --ink-soft: #3c4262; --muted: #646a86; --line: #dfe2ee; --line-strong: #c3c8dc;
  --accent: #3b4bc8; --accent-dark: #2a37a0; --accent-soft: #e7e9fa; --accent-line: #c3c9f1; --accent-rgb: 59 75 200; --accent-bright: #7d8bff;
  --coral: #e8765c; --coral-ink: #b4472f; --coral-soft: #fdede8; --coral-rgb: 232 118 92;
  --bar-muted: #b7beea;
  --dark-1: #0b0f2c; --dark-2: #121847; --dark-rgb: 11 15 44;
  --on-dark: #ffffff; --on-dark-2: #aab1d8; --on-dark-3: #c3c8ea; --mark: #9aa3ff;
  --glow-a: #4b5bd6; --glow-b: #e8765c; --glow-c: #2dd4bf;
  --grad-a: #9aa3ff; --grad-b: #c5b3ff; --grad-c: #ff9f88;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* ---------- Horizon: the dark backdrop keeps going behind the stat strip and dissolves into the section band over ~400px; the band is layered beneath it so nothing else can show through ---------- */
.otb-aurora {
  inset: 0 calc(50% - 50vw) -220px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 400px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 400px), transparent 100%);
}
.clinical-section::before { z-index: -3; top: -240px; border-top: 0; }
@media (max-width: 600px) {
  .otb-aurora {
    inset: 0 calc(50% - 50vw) -180px;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 300px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 300px), transparent 100%);
  }
}

/* ---------- Palettes, second set ---------- */

/* 11 graphite  石墨 · 钴  — neutral graphite chrome, cobalt accent, amber secondary */
html[data-palette="graphite"] {
  --canvas: #f6f7f9; --band: #eaedf1; --surface: #ffffff; --surface-soft: #f1f3f6; --surface-hover: #f5f6f9;
  --ink: #15181d; --ink-soft: #343a44; --muted: #626a77; --line: #dbe0e7; --line-strong: #bcc4cf;
  --accent: #2b5fd9; --accent-dark: #2049a8; --accent-soft: #e4ebfb; --accent-line: #b9cbf4; --accent-rgb: 43 95 217; --accent-bright: #78a0ff;
  --coral: #e0961e; --coral-ink: #9a6208; --coral-soft: #fbefd6; --coral-rgb: 224 150 30;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #0f1115; --dark-2: #1c1f26; --dark-rgb: 15 17 21;
  --on-dark: #f5f6f8; --on-dark-2: #a8adb8; --on-dark-3: #cbd0d8; --mark: #8fb0ff;
  --glow-a: #2b5fd9; --glow-b: #e0961e; --glow-c: #3a4a6a;
  --grad-a: #a9c2ff; --grad-b: #e6edff; --grad-c: #ffd48a;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 12 inkgold  墨 · 金  — warm ink black & antique gold, crimson secondary */
html[data-palette="inkgold"] {
  --canvas: #f8f6f1; --band: #efece4; --surface: #fffdf9; --surface-soft: #f4f1ea; --surface-hover: #f8f6f0;
  --ink: #1b1a17; --ink-soft: #3b3934; --muted: #6c6860; --line: #e3dfd4; --line-strong: #c9c3b4;
  --accent: #9a6d14; --accent-dark: #7a550d; --accent-soft: #f7ecd2; --accent-line: #e6cf8f; --accent-rgb: 154 109 20; --accent-bright: #f2c14e;
  --coral: #b8323b; --coral-ink: #8d2129; --coral-soft: #f8e1e3; --coral-rgb: 184 50 59;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #111111; --dark-2: #23221f; --dark-rgb: 17 17 17;
  --on-dark: #f7f3ea; --on-dark-2: #b5ada0; --on-dark-3: #d2cbbf; --mark: #f2c14e;
  --glow-a: #b8860b; --glow-b: #b8323b; --glow-c: #6b7a8f;
  --grad-a: #f2c14e; --grad-b: #fff1c2; --grad-c: #f7f3ea;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 13 navy  海军 · 橙  — navy & bright orange */
html[data-palette="navy"] {
  --canvas: #f5f7fb; --band: #e9edf6; --surface: #ffffff; --surface-soft: #eff2f8; --surface-hover: #f4f6fa;
  --ink: #0f172a; --ink-soft: #2c3652; --muted: #5b6480; --line: #d9dfeb; --line-strong: #b8c2d6;
  --accent: #1e40af; --accent-dark: #1e3a8a; --accent-soft: #e0e7ff; --accent-line: #b4c2f4; --accent-rgb: 30 64 175; --accent-bright: #60a5fa;
  --coral: #f97316; --coral-ink: #c2410c; --coral-soft: #ffedd5; --coral-rgb: 249 115 22;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #0a1628; --dark-2: #14264a; --dark-rgb: 10 22 40;
  --on-dark: #f4f7ff; --on-dark-2: #9fb0d0; --on-dark-3: #c4d0e8; --mark: #93c5fd;
  --glow-a: #2563eb; --glow-b: #f97316; --glow-c: #38bdf8;
  --grad-a: #93c5fd; --grad-b: #dbeafe; --grad-c: #fdba74;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 14 sakura  樱 · 墨  — sakura pink on ink, jade secondary */
html[data-palette="sakura"] {
  --canvas: #faf7f9; --band: #f2eaee; --surface: #ffffff; --surface-soft: #f7f0f3; --surface-hover: #faf5f7;
  --ink: #1f1620; --ink-soft: #443544; --muted: #74667a; --line: #e8dde3; --line-strong: #d0bfc9;
  --accent: #c0396b; --accent-dark: #96284f; --accent-soft: #fbe3ec; --accent-line: #f3b8ce; --accent-rgb: 192 57 107; --accent-bright: #ff8fb8;
  --coral: #3f7d6d; --coral-ink: #2c5a4e; --coral-soft: #dfeee9; --coral-rgb: 63 125 109;
  --warn: #c2611e; --warn-ink: #8f4512; --warn-soft: #fbe6d6;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #16121a; --dark-2: #2a2032; --dark-rgb: 22 18 26;
  --on-dark: #fdf5f9; --on-dark-2: #b9a6b4; --on-dark-3: #d6c6d0; --mark: #ffb8d1;
  --glow-a: #e0559a; --glow-b: #7c3aed; --glow-c: #f5c1d4;
  --grad-a: #ffb8d1; --grad-b: #ffe8f0; --grad-c: #e9d5ff;
}

/* 15 mist  雾蓝  — nordic slate & misty blue, muted terracotta */
html[data-palette="mist"] {
  --canvas: #f6f8fa; --band: #eaeff3; --surface: #ffffff; --surface-soft: #f0f4f7; --surface-hover: #f4f7f9;
  --ink: #18212b; --ink-soft: #364452; --muted: #66727f; --line: #dbe2e8; --line-strong: #bcc8d2;
  --accent: #3d6b8f; --accent-dark: #2c5070; --accent-soft: #e1ebf3; --accent-line: #b7cde0; --accent-rgb: 61 107 143; --accent-bright: #7fb3d9;
  --coral: #c9784f; --coral-ink: #97522f; --coral-soft: #f7e6dc; --coral-rgb: 201 120 79;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #1a2330; --dark-2: #2a3a4e; --dark-rgb: 26 35 48;
  --on-dark: #f3f6f9; --on-dark-2: #aeb9c6; --on-dark-3: #cdd6e0; --mark: #9cc7e8;
  --glow-a: #4f86ad; --glow-b: #c9784f; --glow-c: #8fb6c9;
  --grad-a: #bcd9ee; --grad-b: #eef4f9; --grad-c: #f0c9b3;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 16 olive  橄榄 · 陶  — mediterranean olive & terracotta */
html[data-palette="olive"] {
  --canvas: #f8f7f1; --band: #eeede2; --surface: #fffefa; --surface-soft: #f4f3ea; --surface-hover: #f8f7f0;
  --ink: #1c1d14; --ink-soft: #3c3e2e; --muted: #6b6d5c; --line: #e2e1d2; --line-strong: #c6c5b0;
  --accent: #5f6b23; --accent-dark: #46501a; --accent-soft: #eef0d9; --accent-line: #cfd5a0; --accent-rgb: 95 107 35; --accent-bright: #a3b143;
  --coral: #c65a3a; --coral-ink: #97402a; --coral-soft: #f8e2da; --coral-rgb: 198 90 58;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #1b1d14; --dark-2: #2f3322; --dark-rgb: 27 29 20;
  --on-dark: #f7f6ee; --on-dark-2: #b3b4a0; --on-dark-3: #d1d2c0; --mark: #cfd96a;
  --glow-a: #8a9a2a; --glow-b: #c65a3a; --glow-c: #e2b647;
  --grad-a: #d9e08a; --grad-b: #f7f3d6; --grad-c: #f2b48f;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 17 glacier  冰川  — glacial cyan on deep sea, coral pink secondary */
html[data-palette="glacier"] {
  --canvas: #f3f8fa; --band: #e6eff3; --surface: #ffffff; --surface-soft: #edf4f7; --surface-hover: #f2f7f9;
  --ink: #0f1f28; --ink-soft: #2e424e; --muted: #5c717d; --line: #d6e2e8; --line-strong: #b3c8d2;
  --accent: #0e7490; --accent-dark: #155e75; --accent-soft: #dcf3f8; --accent-line: #a5e1ee; --accent-rgb: 14 116 144; --accent-bright: #22d3ee;
  --coral: #e8607a; --coral-ink: #b53c55; --coral-soft: #fde3e9; --coral-rgb: 232 96 122;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #061a26; --dark-2: #0c2f42; --dark-rgb: 6 26 38;
  --on-dark: #f0fbff; --on-dark-2: #9fc3d2; --on-dark-3: #c3dde7; --mark: #67e8f9;
  --glow-a: #06b6d4; --glow-b: #3b82f6; --glow-c: #a5f3fc;
  --grad-a: #a5f3fc; --grad-b: #e0f2fe; --grad-c: #bfdbfe;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 18 grape  葡萄 · 芥末  — grape purple & mustard */
html[data-palette="grape"] {
  --canvas: #f9f6fb; --band: #efe9f4; --surface: #ffffff; --surface-soft: #f5f0f9; --surface-hover: #f9f5fb;
  --ink: #1c1226; --ink-soft: #3e2f4d; --muted: #6d6179; --line: #e4dbeb; --line-strong: #cbbcd6;
  --accent: #6d2c91; --accent-dark: #521f6e; --accent-soft: #efe3f7; --accent-line: #d4b6e8; --accent-rgb: 109 44 145; --accent-bright: #b06ad9;
  --coral: #d4a017; --coral-ink: #8f6a08; --coral-soft: #faf0cf; --coral-rgb: 212 160 23;
  --warn: #c94a3c; --warn-ink: #96332a; --warn-soft: #f9e2de;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #1a0f24; --dark-2: #2e1a40; --dark-rgb: 26 15 36;
  --on-dark: #f9f4fd; --on-dark-2: #b6a6c6; --on-dark-3: #d5c8e0; --mark: #e3b4ff;
  --glow-a: #8b3fc4; --glow-b: #d4a017; --glow-c: #ff6b9d;
  --grad-a: #e3b4ff; --grad-b: #fff0c2; --grad-c: #ffd166;
}

/* 19 surgical  手术绿 · 石墨  — clinical green on graphite, amber secondary */
html[data-palette="surgical"] {
  --canvas: #f5f8f6; --band: #e9efeb; --surface: #ffffff; --surface-soft: #eff4f1; --surface-hover: #f3f7f4;
  --ink: #131a17; --ink-soft: #313d37; --muted: #5f6d66; --line: #d8e1dc; --line-strong: #b7c6bd;
  --accent: #1f7a5c; --accent-dark: #175c45; --accent-soft: #dcf1e9; --accent-line: #a9dcc9; --accent-rgb: 31 122 92; --accent-bright: #5fd3a3;
  --coral: #d97706; --coral-ink: #a15c04; --coral-soft: #fdebd0; --coral-rgb: 217 119 6;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #121716; --dark-2: #1f2926; --dark-rgb: 18 23 22;
  --on-dark: #f2f7f4; --on-dark-2: #a4b3ab; --on-dark-3: #c7d3cc; --mark: #86efac;
  --glow-a: #22c55e; --glow-b: #0ea5e9; --glow-c: #f59e0b;
  --grad-a: #bbf7d0; --grad-b: #ecfdf5; --grad-c: #bae6fd;
  --warn: var(--coral); --warn-ink: var(--coral-ink); --warn-soft: var(--coral-soft);
}

/* 20 sunset  落日  — burnt orange on deep plum, violet secondary */
html[data-palette="sunset"] {
  --canvas: #faf6f4; --band: #f3ebe7; --surface: #fffdfb; --surface-soft: #f7f0ec; --surface-hover: #faf5f2;
  --ink: #241a1e; --ink-soft: #473840; --muted: #766670; --line: #e9dcd9; --line-strong: #d1bfbb;
  --accent: #c2410c; --accent-dark: #9a3412; --accent-soft: #fde8dc; --accent-line: #f9bfa3; --accent-rgb: 194 65 12; --accent-bright: #fb923c;
  --coral: #7c3aed; --coral-ink: #5b21b6; --coral-soft: #ede9fe; --coral-rgb: 124 58 237;
  --warn: #b91c1c; --warn-ink: #7f1d1d; --warn-soft: #fee2e2;
  --bar-muted: color-mix(in srgb, var(--accent) 40%, #fff);
  --dark-1: #1c0b12; --dark-2: #3b1226; --dark-rgb: 28 11 18;
  --on-dark: #fff5f0; --on-dark-2: #c4a3ad; --on-dark-3: #dcc3ca; --mark: #fdba74;
  --glow-a: #f97316; --glow-b: #db2777; --glow-c: #7c3aed;
  --grad-a: #fdba74; --grad-b: #fecdd3; --grad-c: #c4b5fd;
}

/* ---------- Model logos: no frame; a plain white tile only on the dark podium so black marks stay visible ---------- */
.otb-model-logo { border: 0; padding: 1px; background: transparent; border-radius: 4px; }
.otb-model-logo.is-mono { background: var(--accent-soft); }
.otb-podium-item .otb-model-logo { padding: 4px; border-radius: 7px; background: #fff; }
.otb-podium-item .otb-model-logo.is-mono { background: rgba(255, 255, 255, .16); }

/* ---------- Type scale: leaderboard text one step larger ---------- */
body { font-size: 14px; }
.clinical-chart-row { padding-top: 14px; padding-bottom: 14px; }
.clinical-chart-row .chart-model strong { font-size: 15px; }
.clinical-chart-row .chart-provider { font-size: 12.5px; }
.clinical-chart-row .bar-score { font-size: 15px; }
.clinical-chart-row [data-clinical-rank] { font-size: 12.5px; }
[data-clinical-metric] { font-size: 14px; }
[data-clinical-metric] small { font-size: 11.5px; }
.clinical-metric-table td { font-size: 13.5px; }
.clinical-metric-table th, .cost-data-table thead th, .otb-role-table th, [data-matrix-metric] { font-size: 11.5px; }
.cost-data-table td { font-size: 13px; }
.otb-role-table td, .otb-rt-cell { font-size: 13.5px; }
.otb-podium > header strong { font-size: 14px; }
.otb-podium-item strong { font-size: 14px; }
.otb-podium-item small { font-size: 12px; }
.otb-podium-item b { font-size: 26px; }
.otb-detail-list dt { font-size: 12.5px; }
.otb-detail-list dd { font-size: 13.5px; }
.otb-plot-key, .otb-role-table-note, .otb-heat-scale { font-size: 12.5px; }

/* ---------- Motion pass: rows glide when re-ranked, blocks reveal on scroll, podium pops, lead bar sheens, cells and points enter in sequence ---------- */
.clinical-chart-row { animation-fill-mode: backwards; transition: background-color .2s ease; }
.clinical-chart-row.otb-seen { animation: none; }
.clinical-chart-row:hover .chart-bar { filter: saturate(1.15) brightness(1.06); }
.otb-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.otb-reveal.otb-in { opacity: 1; transform: none; }
.otb-podium-item { animation: otb-pop .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.otb-podium-item.is-2 { animation-delay: .03s; }
.otb-podium-item.is-1 { animation-delay: .1s; }
.otb-podium-item.is-3 { animation-delay: .17s; }
@keyframes otb-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.chart-bar { position: relative; overflow: hidden; }
.clinical-chart-row.is-winner .chart-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .55) 50%, transparent 75%); transform: translateX(-120%); animation: otb-sheen 3.4s ease-in-out 1.4s infinite; }
@keyframes otb-sheen { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
.otb-rt-cell { animation: otb-cell .45s ease backwards; animation-delay: calc(var(--k, 0) * 10ms); }
@keyframes otb-cell { from { opacity: 0; transform: scale(.8); } }
.cq-point { transform-box: fill-box; transform-origin: center; animation: otb-pt .55s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes otb-pt { from { opacity: 0; transform: scale(0); } }
.cq-point:nth-of-type(1) { animation-delay: 35ms; }
.cq-point:nth-of-type(2) { animation-delay: 70ms; }
.cq-point:nth-of-type(3) { animation-delay: 105ms; }
.cq-point:nth-of-type(4) { animation-delay: 140ms; }
.cq-point:nth-of-type(5) { animation-delay: 175ms; }
.cq-point:nth-of-type(6) { animation-delay: 210ms; }
.cq-point:nth-of-type(7) { animation-delay: 245ms; }
.cq-point:nth-of-type(8) { animation-delay: 280ms; }
.cq-point:nth-of-type(9) { animation-delay: 315ms; }
.cq-point:nth-of-type(10) { animation-delay: 350ms; }
.cq-point:nth-of-type(11) { animation-delay: 385ms; }
.cq-point:nth-of-type(12) { animation-delay: 420ms; }
.cq-point:nth-of-type(13) { animation-delay: 455ms; }
.cq-point:nth-of-type(14) { animation-delay: 490ms; }
.cq-point:nth-of-type(15) { animation-delay: 525ms; }
.cq-point:nth-of-type(16) { animation-delay: 560ms; }
.cq-point:nth-of-type(17) { animation-delay: 595ms; }
.cq-point:nth-of-type(18) { animation-delay: 630ms; }
.cq-point:nth-of-type(19) { animation-delay: 665ms; }
.cq-point:nth-of-type(20) { animation-delay: 700ms; }
.cq-point:nth-of-type(21) { animation-delay: 735ms; }
.cq-point:nth-of-type(22) { animation-delay: 770ms; }
.cq-point:nth-of-type(23) { animation-delay: 805ms; }
.cq-point:nth-of-type(24) { animation-delay: 840ms; }
@media (prefers-reduced-motion: reduce) {
  .otb-reveal { opacity: 1; transform: none; transition: none; }
  .otb-podium-item, .otb-rt-cell, .cq-point, .clinical-chart-row.is-winner .chart-bar::after { animation: none; }
}

/* ---------- Glacier: lift the hero chrome a step ---------- */
html[data-palette="glacier"] { --dark-1: #0d2a3c; --dark-2: #174d68; --dark-rgb: 13 42 60; }
html[data-palette="glacier"] .otb-aurora i:nth-child(1) { opacity: .7; }
html[data-palette="glacier"] .otb-aurora i:nth-child(3) { opacity: .3; }

/* ---------- Compact hero: same content, about a third less height ---------- */
.benchmark-hero.otb-hero { padding: 40px 0 104px; }
.otb-hero .board-brand-mark { width: 40px; height: 40px; margin-bottom: 10px; }
.otb-hero .hero-copy h1 { margin-bottom: 10px; font-size: clamp(30px, 5vw, 50px); }
.otb-hero .hero-copy > .hero-tagline { margin-bottom: 2px; font-size: 14px; }
.otb-hero .hero-copy > .hero-description { max-width: 90ch; font-size: 13px; line-height: 1.55; }
.otb-hero .otb-meta { margin-top: 12px; }
.otb-hero .otb-actions { margin-top: 18px; }
.otb-hero .otb-btn { min-height: 38px; padding: 8px 16px; }
.otb-aurora {
  inset: 0 calc(50% - 50vw) -200px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 330px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 330px), transparent 100%);
}
@media (max-width: 780px) {
  .benchmark-hero.otb-hero { padding: 32px 0 94px; }
}
@media (max-width: 600px) {
  .benchmark-hero.otb-hero { padding: 26px 0 86px; }
  .otb-hero .board-brand-mark { width: 34px; height: 34px; margin-bottom: 8px; }
  .otb-aurora {
    inset: 0 calc(50% - 50vw) -160px;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 260px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 260px), transparent 100%);
  }
}

/* ---------- No section title: the task switch sits right under the stat strip ---------- */
#leaderboard > .leaderboard-task-switch { margin-top: 32px; }
@media (max-width: 600px) {
  #leaderboard > .leaderboard-task-switch { margin-top: 24px; }
}

/* ---------- Polish + motion: sliding switches, spotlight, tilt, crosshair, progress ---------- */

/* Footer wordmark readable on the dark footer */
.site-footer.otb-footer a.otb-footer-brand { color: var(--on-dark); }

/* Scroll progress hairline along the bottom edge of the navbar */
.otb-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b) 50%, var(--grad-c));
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
}
.site-header > .otb-progress { position: absolute; top: auto; bottom: -1px; }

/* Navbar: underline follows the section in view */
.otb-links a { position: relative; }
.otb-links a::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-c)); transform: scaleX(0);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.otb-links a.is-current { color: var(--on-dark); }
.otb-links a.is-current::after { transform: scaleX(1); }

/* Hero: slow shimmer on the gradient half of the title, a floating mark, a nudging arrow */
.otb-hero .hero-copy h1 span { background-size: 220% 100%; animation: otb-shimmer 10s ease-in-out infinite alternate; }
@keyframes otb-shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.otb-hero .board-brand-mark { animation: otb-float 6s ease-in-out infinite; }
@keyframes otb-float { 50% { transform: translateY(-4px); } }
.otb-hero .otb-btn.is-primary { position: relative; overflow: hidden; }
.otb-hero .otb-btn.is-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg);
}
.otb-hero .otb-btn.is-primary:hover::after { animation: otb-btn-sheen .8s ease; }
@keyframes otb-btn-sheen { to { left: 125%; } }
.otb-arrow { display: inline-block; }
.otb-hero .otb-btn.is-primary:hover .otb-arrow { animation: otb-nudge .9s ease-in-out infinite; }
@keyframes otb-nudge { 50% { transform: translateY(3px); } }

/* Pointer spotlight on the stat strip and task cards */
.otb-stats .otb-stat, .otb-stats .otb-stat:hover,
.leaderboard-task-switch .leaderboard-task-button, .leaderboard-task-switch .leaderboard-task-button:hover {
  background-image: radial-gradient(240px circle at var(--mx, -400px) var(--my, -400px), rgb(var(--accent-rgb) / .09), transparent 70%);
}
.otb-stat { position: relative; }
.otb-stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-c)); transform: scaleX(0);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.otb-stat:hover::before { transform: scaleX(1); }

/* Task cards: tinted active state, underline, icon pop */
.leaderboard-task-button { position: relative; overflow: hidden; }
.leaderboard-task-switch .leaderboard-task-button.active, .leaderboard-task-switch .leaderboard-task-button.active:hover {
  background-image: radial-gradient(240px circle at var(--mx, -400px) var(--my, -400px), rgb(var(--accent-rgb) / .09), transparent 70%),
    linear-gradient(135deg, rgb(var(--accent-rgb) / .10), transparent 62%);
}
.leaderboard-task-button::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--accent); transform: scaleX(0); transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.leaderboard-task-button.active::after { transform: scaleX(1); }
.leaderboard-task-button.active .task-symbol { animation: otb-icon-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.leaderboard-task-button:not(.active):hover .task-symbol { color: var(--accent); border-color: var(--accent); }
@keyframes otb-icon-pop { 0% { transform: scale(.7) rotate(-12deg); } 100% { transform: none; } }

/* Segmented controls: one thumb slides between the options */
.otb-seg { position: relative; isolation: isolate; }
.otb-seg > .otb-thumb {
  position: absolute; top: 0; left: 0; z-index: -1; width: 0; height: 0; opacity: 0; pointer-events: none;
  border-radius: 7px; background: var(--surface); box-shadow: 0 1px 3px rgba(26, 31, 54, .1), 0 0 0 1px var(--line);
  transition: transform .34s cubic-bezier(.2, .7, .2, 1), width .34s cubic-bezier(.2, .7, .2, 1), opacity .2s ease;
}
.otb-seg.otb-seg-ready > button[aria-pressed='true'], .otb-seg.otb-seg-ready > button.active {
  border-color: transparent; background: transparent; box-shadow: none;
}

/* Ranking rows: accent edge and logo lift on hover */
.clinical-chart-row { position: relative; }
.clinical-chart-row::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent); transform: scaleY(0); transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.clinical-chart-row:hover::before { transform: scaleY(1); }
.clinical-chart-row.is-winner::before { display: none; }
.clinical-chart-row .otb-model-logo { transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.clinical-chart-row:hover .otb-model-logo { transform: scale(1.15) rotate(-5deg); }
.clinical-chart-row:hover .chart-bar { filter: brightness(1.08) saturate(1.2); }

/* Podium: cards tilt toward the pointer with a moving glare */
.otb-podium-item button.otb-tilting {
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px);
  transition: transform .08s linear, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.otb-podium-item button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 60%);
  transition: opacity .25s ease;
}
.otb-podium-item button:hover::after { opacity: 1; }

/* Scatter: the frontier draws itself in; the hovered point grows and the rest step back */
.cost-quality-panel.otb-in .cq-frontier { animation: otb-draw 1.2s cubic-bezier(.4, 0, .2, 1) .3s backwards, otb-march 1.8s linear infinite; }
@keyframes otb-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.cq-point { transition: opacity .2s ease; }
.cq-point .cq-marker { transform-box: fill-box; transform-origin: center; transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), stroke-width .12s ease; }
.cq-point:hover .cq-marker, .cq-point:focus-visible .cq-marker { transform: scale(1.5); }
[data-cost-quality-svg]:has(.cq-point:hover) .cq-point:not(:hover) { opacity: .4; }

/* Specialist heatmap: crosshair on the hovered row and column */
.otb-role-table .otb-rt-cell { transition: opacity .15s ease, filter .12s ease; }
.otb-role-table.otb-xhair .otb-rt-cell:not(.otb-col-hot):not(.otb-row-hot) { opacity: .45; }
.otb-role-table .otb-rt-cell.otb-col-hot.otb-row-hot { box-shadow: inset 0 0 0 2px var(--accent); }
.otb-role-table th.otb-col-hot { color: var(--accent); }

/* Reveal: a touch of focus pull */
.otb-reveal { filter: blur(3px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s ease; }
.otb-reveal.otb-in { filter: none; }

/* Back to top */
.otb-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer;
  box-shadow: 0 10px 26px rgb(var(--dark-rgb) / .18); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1), color .15s ease, border-color .15s ease;
}
.otb-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.otb-top:hover { border-color: var(--accent); color: var(--accent); }
.otb-top svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .otb-top { right: 14px; bottom: 14px; width: 38px; height: 38px; } }

@media (prefers-reduced-motion: reduce) {
  .otb-hero .hero-copy h1 span, .otb-hero .board-brand-mark, .otb-hero .otb-btn.is-primary:hover::after,
  .otb-hero .otb-btn.is-primary:hover .otb-arrow, .leaderboard-task-button.active .task-symbol,
  .cost-quality-panel.otb-in .cq-frontier { animation: none; }
  .otb-reveal { filter: none; }
  .otb-seg > .otb-thumb, .otb-links a::after, .otb-stat::before, .leaderboard-task-button::after,
  .clinical-chart-row::before, .clinical-chart-row .otb-model-logo, .cq-point .cq-marker, .otb-top { transition: none; }
  .clinical-chart-row:hover .otb-model-logo, .cq-point:hover .cq-marker { transform: none; }
}