/* Design tokens + reset. Operational calm: muted, generous whitespace, no noise. */
:root {
  --bg: #f7f8f7;
  --surface: #ffffff;
  --ink: #1b2220;
  --ink-soft: #5b6663;
  --line: #e3e7e5;
  --accent: #2f6f5e;          /* restrained green */
  --accent-ink: #ffffff;

  --band-misaligned: #b4453a;
  --band-drifting:  #c08a2d;
  --band-aligned:   #2f6f8f;
  --band-optimized: #2f6f5e;

  --radius: 8px;
  --gap: 1rem;
  --maxw: 920px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; color: var(--ink-soft); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--ink-soft); }
code, .mono { font-family: var(--mono); }