:root {
  color-scheme: light;
  --surface:      #fcfcfb;
  --page:         #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:   #898781;
  --gridline:     #e1e0d9;
  --baseline:     #c3c2b7;
  --border:       rgba(11,11,11,0.10);
  --series-1:     #2a78d6; /* blue   -- "Ours" */
  --series-2:     #eb6834; /* orange -- "Published" */
  --series-3:     #1baf7a; /* aqua   -- "Ours (ablation)" */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface:      #1a1a19;
    --page:         #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:   #898781;
    --gridline:     #2c2c2a;
    --baseline:     #383835;
    --border:       rgba(255,255,255,0.10);
    --series-1:     #3987e5;
    --series-2:     #d95926;
    --series-3:     #199e70;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
}

header {
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
header h1 { margin: 0 0 4px; font-size: 1.5rem; }
header p { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
header a { color: var(--series-1); text-decoration: none; }
header a:hover { text-decoration: underline; }

nav.tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
nav.tabs button {
  border: none;
  background: none;
  padding: 10px 16px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
nav.tabs button.active {
  color: var(--text-primary);
  border-bottom-color: var(--series-1);
  font-weight: 600;
}

main { max-width: 1100px; margin: 0 auto; padding: 20px 24px 60px; }
.panel { display: none; }
.panel.active { display: block; }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  margin-bottom: 16px;
}
.controls label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.controls select, .controls input[type="range"] {
  font-size: 0.9rem;
  padding: 6px 8px;
  border: 1px solid var(--baseline);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-primary);
}

table.leaderboard {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 24px;
  font-variant-numeric: tabular-nums;
}
table.leaderboard th, table.leaderboard td {
  text-align: right;
  padding: 6px 10px;
  border-bottom: 1px solid var(--gridline);
}
table.leaderboard th:first-child, table.leaderboard td:first-child {
  text-align: left;
}
table.leaderboard th {
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.leaderboard th:hover { color: var(--text-primary); }
table.leaderboard td.group-Ours { border-left: 3px solid var(--series-1); }
table.leaderboard td.group-Published { border-left: 3px solid var(--series-2); }
table.leaderboard td.group-Ours-ablation { border-left: 3px solid var(--series-3); }
table.leaderboard tbody tr:hover { background: var(--gridline); }

.note {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 8px 0 24px;
}

details.case-study {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  background: var(--surface);
}
details.case-study summary {
  cursor: pointer;
  font-weight: 600;
}

.chart-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.chart-row > div { flex: 1 1 380px; min-height: 320px; }

.subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.subtabs button {
  border: 1px solid var(--baseline);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
}
.subtabs button.active {
  background: var(--series-1);
  color: white;
  border-color: var(--series-1);
}

.demo-view { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.demo-view img { max-width: 100%; border: 1px solid var(--border); border-radius: 6px; }
.demo-view .meta { flex: 1 1 240px; font-size: 0.85rem; color: var(--text-secondary); }
.demo-view .meta dt { color: var(--text-muted); margin-top: 8px; }
.demo-view .meta dd { margin: 0; color: var(--text-primary); }
.demo-view .frame-col { flex: 2 1 480px; }

.slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.slider-row input[type="range"] { flex: 1; }
.slider-row span { font-size: 0.8rem; color: var(--text-secondary); min-width: 160px; }

.legend-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }