:root {
  color-scheme: light;
  --page: #f7f7f4; --surface: #ffffff; --ink: #111110; --ink2: #4d4c48;
  --muted: #84827b; --grid: #e4e3dc; --axis: #c9c8bf; --dim: #b4b2a8;
  --border: rgba(17,17,16,0.10); --wash: rgba(17,17,16,0.05);
  --accent: #2a6fc9; --accent-ink: #ffffff; --accent-soft: rgba(42,111,201,0.10);
  --series2: #d9822b; --series3: #2f9e7a; --series4: #9a5bd1;
  --good: #1f8a5b; --bad: #c8463d;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0e0e0d; --surface: #181817; --ink: #f4f3ee; --ink2: #c4c2b9;
    --muted: #8d8b83; --grid: #2a2a28; --axis: #3a3a37; --dim: #5d5c56;
    --border: rgba(255,255,255,0.10); --wash: rgba(255,255,255,0.06);
    --accent: #4f93ea; --accent-ink: #0b0b0b; --accent-soft: rgba(79,147,234,0.14);
    --series2: #e89a4b; --series3: #45b892; --series4: #b483e3;
    --good: #45b886; --bad: #e46a60;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e0e0d; --surface: #181817; --ink: #f4f3ee; --ink2: #c4c2b9;
  --muted: #8d8b83; --grid: #2a2a28; --axis: #3a3a37; --dim: #5d5c56;
  --border: rgba(255,255,255,0.10); --wash: rgba(255,255,255,0.06);
  --accent: #4f93ea; --accent-ink: #0b0b0b; --accent-soft: rgba(79,147,234,0.14);
  --series2: #e89a4b; --series3: #45b892; --series4: #b483e3;
  --good: #45b886; --bad: #e46a60;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; }
a { color: var(--accent); text-underline-offset: 2px; }
img { max-width: 100%; display: block; }
code, .mono { font-family: var(--mono); font-size: 0.9em; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }

.crumbs { font-size: 14px; margin-bottom: 18px; }
.crumbs a { text-decoration: none; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 14px;
}
.btn {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px;
  font-weight: 550; color: var(--ink); background: var(--surface); text-decoration: none;
  border: 1px solid var(--axis); border-radius: 8px; padding: 8px 14px; cursor: pointer;
}
.btn:hover { background: var(--wash); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.x { padding: 2px 9px; font-size: 13px; }
.fine { color: var(--muted); font-size: 13px; }