:root {
  color-scheme: light dark;
  --ink: #172033;
  --muted: #526078;
  --accent: #245fca;
  --accent-soft: #e9f0ff;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --border: #cbd5e1;
  --focus: #d97706;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font: 1.0625rem/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .16em; }
a:focus-visible, button:focus-visible { outline: .2rem solid var(--focus); outline-offset: .2rem; }
.skip-link { position: absolute; left: .75rem; top: -5rem; padding: .7rem 1rem; background: var(--ink); color: white; z-index: 10; }
.skip-link:focus { top: .75rem; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.header-inner, main, footer { width: min(100% - 2rem, 52rem); margin-inline: auto; }
.header-inner { padding: 1rem 0; }
.brand { color: var(--ink); font-weight: 800; text-decoration: none; }
nav ul { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; padding: .75rem 0 0; margin: 0; list-style: none; }
main { padding-block: 2.5rem 4rem; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2rem, 7vw, 3.3rem); margin: 0 0 1rem; }
h2 { margin-top: 2.4rem; }
.lede { color: var(--muted); font-size: 1.18rem; }
.card, .callout { padding: 1.2rem 1.35rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); }
.callout { border-left: .35rem solid var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.25rem; }
.button { display: inline-block; padding: .7rem 1rem; border-radius: .7rem; color: white; background: var(--accent); font-weight: 700; text-decoration: none; }
.button.secondary { color: var(--ink); background: var(--accent-soft); border: 1px solid var(--border); }
dt { font-weight: 750; margin-top: 1rem; }
dd { margin: .25rem 0 0; }
footer { padding-block: 1.5rem 3rem; color: var(--muted); border-top: 1px solid var(--border); }
@media (prefers-color-scheme: dark) {
  :root { --ink: #f2f5fb; --muted: #b9c5d8; --accent: #8ab4ff; --accent-soft: #1d3152; --surface: #151b28; --canvas: #0d121c; --border: #3a465b; --focus: #fbbf24; }
  .button { color: #08111f; }
  .button.secondary { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }