:root {
  color-scheme: light dark;
  --bg: #f2f7f7;
  --surface: #ffffff;
  --ink: #14282f;
  --muted: #566d73;
  --teal: #087a7a;
  --coral: #e15140;
  --line: #d9e3e3;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
header, main, footer { width: min(760px, calc(100% - 32px)); margin-inline: auto; }
header { padding: 56px 0 24px; border-bottom: 1px solid var(--line); }
main { padding: 28px 0 48px; }
footer { padding: 22px 0 40px; color: var(--muted); border-top: 1px solid var(--line); }
h1 { margin: 0 0 8px; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; letter-spacing: 0; }
h2 { margin: 30px 0 8px; font-size: 1.25rem; letter-spacing: 0; }
p, li { color: var(--muted); }
a { color: var(--teal); }
nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; }
.label { color: var(--coral); font-weight: 700; }
.summary { font-size: 1.1rem; max-width: 620px; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #10191c; --surface: #172429; --ink: #f2f7f7; --muted: #b5c5c8; --line: #314247; --teal: #48c8c2; --coral: #ff7a68; }
}