:root {
  --ink: #121418;
  --secondary: #5b6068;
  --tertiary: #8b9098;
  --surface: #fafaf7;
  --card: #ffffff;
  --border: #e6e3dd;
  --coral: #f06a4c;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--surface); color: var(--ink); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 720px; margin: 0 auto; padding: 40px 24px 80px; }
.hero { text-align: center; padding: 48px 0 24px; }
.hero h1 { font-size: 56px; margin: 0; letter-spacing: -1.5px; }
.hero .tagline { color: var(--secondary); font-size: 18px; margin-top: 8px; }
h1 { font-size: 32px; letter-spacing: -0.6px; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 32px 0 8px; letter-spacing: -0.2px; }
p { margin: 0 0 12px; color: var(--ink); }
.updated { color: var(--tertiary); font-size: 13px; margin-bottom: 24px; }
.back { font-size: 14px; margin: 0 0 24px; }
.back a { color: var(--coral); text-decoration: none; font-weight: 600; }
a { color: var(--coral); }
ul { padding-left: 0; list-style: none; }
ul li { padding: 8px 0; border-bottom: 1px solid var(--border); }
ul li a { color: var(--ink); text-decoration: none; font-weight: 600; }
ul li a:hover { color: var(--coral); }
section { padding: 16px 0; }
footer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--tertiary); font-size: 13px; }
footer a { color: var(--tertiary); }
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f1efe9;
    --secondary: #9ea3ab;
    --tertiary: #6f7480;
    --surface: #0f1115;
    --card: #161a22;
    --border: #232733;
  }
}