:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  --page: #f2f5fa;
  --surface: #fff;
  --text: #152238;
  --muted: #47566d;
  --border: #dbe3ee;
  --link: #194e9b;
  --button: #214e98;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #101722;
    --surface: #182231;
    --text: #f1f5fb;
    --muted: #b4c2d7;
    --border: #344256;
    --link: #a8caff;
    --button: #254e8a;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: clamp(1rem, 5vw, 4rem);
  background: var(--page);
  color: var(--text);
  line-height: 1.65;
}
main {
  margin: auto;
  max-width: 46rem;
  padding: clamp(1.25rem, 5vw, 3.25rem);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--surface);
}
h1, h2 { line-height: 1.2; }
h1 { margin: .45rem 0 .85rem; font-size: clamp(2rem, 6vw, 3.1rem); letter-spacing: -.04em; }
h2 { margin: 0; font-size: 1.2rem; }
p { margin: .65rem 0 0; }
section { margin-top: 1.6rem; }
.brand { display: block; border-radius: .9rem; margin-bottom: 1rem; }
.eyebrow { margin: 0; font-size: .8rem; font-weight: 700; color: var(--muted); }
.intro { font-size: 1.1rem; color: var(--muted); }
.action {
  display: inline-block;
  margin-top: .75rem;
  padding: .65rem 1rem;
  border-radius: .6rem;
  color: #fff;
  background: var(--button);
  font-weight: 600;
  text-decoration: none;
}
a { color: var(--link); text-underline-offset: .16em; overflow-wrap: anywhere; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
code { overflow-wrap: anywhere; }
nav {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: .95rem;
}