:root {
  color-scheme: light dark;
  font: 16px system-ui, sans-serif;
  --link: light-dark(#285dab, #a4c8ff);
  --muted: light-dark(#5f6670, #a3aab4);
  --line: #8885;
  --error: light-dark(#9c2400, #ffb49e);
  --ok: light-dark(#217436, #8ddca0);
  --accent: light-dark(#8a4b00, #f0b46a);
}
body { margin: 0; background: Canvas; color: CanvasText; }
[hidden] { display: none !important; }
a { color: var(--link); }
.site-header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--line);
}
.site-header .brand { font-weight: 700; color: var(--accent); text-decoration: none; letter-spacing: .02em; }
.site-header nav { display: flex; gap: 14px; flex: 1; }
.site-header nav a { text-decoration: none; }
.site-header nav a[aria-current=page] { font-weight: 600; text-decoration: underline; }
.page { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.muted { color: var(--muted); }
.error { color: var(--error); }
.ok { color: var(--ok); }
button { cursor: pointer; padding: 3px 8px; font: inherit; }
button:disabled { cursor: default; }
input { font: inherit; }