:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f5f6fc;
  --fg: #20233e;
  --muted: #62677e;
  --border: #dfe2ef;
  --accent: #4b46cf;
  --bar: #4b46cf;
  --bar-all: #1f6b66;
  --grid: #e8eaf4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151624;
    --surface: #202236;
    --fg: #e9eaf5;
    --muted: #aeb2cb;
    --border: #383b55;
    --accent: #b0aaff;
    --bar: #b0aaff;
    --bar-all: #7fd6cd;
    --grid: #2a2c44;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 "Segoe UI", system-ui, sans-serif; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, .scroller:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.page { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.25rem; }
.eyebrow { margin: 0; font-size: .875rem; font-weight: 650; }
.eyebrow a { color: var(--muted); text-decoration: none; }
h1 { margin: .5rem 0; font-size: 2.25rem; line-height: 1.15; letter-spacing: -.03em; }
h2 { margin: 2.5rem 0 .75rem; font-size: 1.25rem; }
.lead { margin: 0 0 1.5rem; max-width: 40rem; color: var(--muted); font-size: 1.125rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 0 0 1.5rem; }
.stats div { padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; }
.stats dt { color: var(--muted); font-size: .8125rem; }
.stats dd { margin: .125rem 0 0; font-size: 1.25rem; font-weight: 650; }
.stats dd small { display: block; color: var(--muted); font-size: .8125rem; font-weight: 400; }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.group { display: inline-flex; border: 1px solid var(--border); border-radius: .5rem; overflow: hidden; }
.group button { padding: .45rem .9rem; border: 0; border-right: 1px solid var(--border); background: var(--bg); color: var(--fg); font: inherit; font-size: .9rem; cursor: pointer; }
.group button:last-child { border-right: 0; }
.group button:hover { background: var(--surface); }
.group button[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
.status { color: var(--muted); }
.chart { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; background: var(--bg); }
.chart[hidden], .tip[hidden], .note[hidden] { display: none; }
.labels { border-right: 1px solid var(--border); background: var(--surface); }
.labels div { display: flex; flex-direction: column; justify-content: center; padding: 0 .75rem; border-bottom: 1px solid var(--border); overflow: hidden; }
.labels div:last-child { border-bottom: 0; }
.labels .axis { color: var(--muted); font-size: .75rem; justify-content: flex-end; padding-bottom: .35rem; }
.labels b { font-size: .875rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.labels span { color: var(--muted); font-size: .75rem; }
.scroller { overflow-x: auto; }
.scroller svg { display: block; }
.scroller text { fill: var(--muted); font: 12px "Segoe UI", system-ui, sans-serif; }
.scroller .tick text.major { fill: var(--fg); font-weight: 650; }
.scroller .grid { stroke: var(--grid); stroke-width: 1; }
.scroller .lane-line { stroke: var(--border); stroke-width: 1; }
.scroller .bar { fill: var(--bar); }
.scroller .bar.all { fill: var(--bar-all); }
.scroller .hit { fill: transparent; }
.scroller .hit:hover { fill: var(--grid); opacity: .6; }
.tip { position: fixed; z-index: 10; max-width: 18rem; padding: .4rem .65rem; background: var(--fg); color: var(--bg); border-radius: .4rem; font-size: .8125rem; pointer-events: none; }
.note { margin: .75rem 0 0; color: var(--muted); font-size: .875rem; max-width: 46rem; }
.totals { width: 100%; max-width: 46rem; border-collapse: collapse; }
.totals th, .totals td { padding: .5rem; border-bottom: 1px solid var(--border); text-align: left; font-size: .9375rem; }
.totals td:nth-child(2) { font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) {
  h1 { font-size: 1.75rem; }
  .chart { grid-template-columns: 7.5rem minmax(0, 1fr); }
}