:root {
  color-scheme: light dark;
  --bg: #fff;
  --fg: #1a1a1a;
  --muted: #888;
  --surface: #f4f4f4;
  --link: #0b5fcc;
  --link-visited: #6b3fa0;
  --series-1: #2a78d6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1d20;
    --fg: #cdcdd0;
    --muted: #8f9094;
    --surface: #27282c;
    --link: #8ab6f0;
    --link-visited: #b4a0e6;
    --series-1: #3987e5;
  }
}

body { font-family: system-ui, sans-serif; max-width: 46rem; margin: 2rem auto; padding: 0 1rem; font-size: 1.0625rem; line-height: 1.6; background: var(--bg); color: var(--fg); }
body.wide { max-width: 64rem; }
a { color: var(--link); }
a:visited { color: var(--link-visited); }
header { margin-bottom: 2rem; font-weight: bold; }
blockquote, .note { border-left: 4px solid var(--muted); margin-left: 0; padding: 0 1rem; background: var(--surface); }
code, pre { background: var(--surface); border-radius: 3px; }
code { padding: 0.1em 0.3em; }
pre { padding: 0.75rem 1rem; overflow-x: auto; }
pre code { padding: 0; background: none; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 1.5rem 0; }
figure img { width: 100%; }
figcaption { margin-top: 0.5rem; font-size: 0.9em; color: var(--muted); }
table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95em; }
th, td { padding: 0.4rem 0.75rem; text-align: left; border-bottom: 1px solid var(--surface); }
th { border-bottom: 2px solid var(--muted); }
tbody tr:nth-child(even) { background: var(--surface); }

.chart-figure { margin: 1.5rem 0; }
svg.chart { display: block; width: 100%; height: auto; }
svg.chart .grid { stroke: var(--surface); stroke-width: 1; }
svg.chart .axis { stroke: var(--muted); stroke-width: 1; }
svg.chart .tick, svg.chart .axis-title { fill: var(--muted); font-size: 12px; }
svg.chart .label { fill: var(--fg); font-size: 13px; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
svg.chart .label.muted { fill: var(--muted); }
svg.chart .series-line { fill: none; stroke: var(--series-1); stroke-width: 2; }
svg.chart .dot { fill: var(--series-1); stroke: var(--bg); stroke-width: 2; }
svg.chart .hit { fill: transparent; }
details { margin: 1rem 0; }
summary { cursor: pointer; color: var(--muted); }