:root { --bg: #eef3f4; --surface: #fff; --ink: #14252e; --muted: #5a6f79; --accent: #d2344b; --line: #dde6e9; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b161c; --surface: #13232b; --ink: #e6eef1; --muted: #93a8b1; --accent: #ff5c70; --line: #22363f; color-scheme: dark; }
}
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 "Figtree", system-ui, -apple-system, sans-serif; padding-inline: 16px; }
main { max-width: 680px; margin: 0 auto; padding-block: 40px 64px; }
h1 { font: 800 34px/1.15 "Bricolage Grotesque", system-ui, sans-serif; margin: 0 0 6px; text-wrap: balance; }
h2 { font: 800 20px/1.3 "Bricolage Grotesque", system-ui, sans-serif; margin: 32px 0 6px; }
p, li { color: var(--ink); max-width: 65ch; }
.meta { color: var(--muted); margin: 0 0 24px; }
a { color: var(--accent); }
.back { display: inline-block; margin-bottom: 24px; font-weight: 600; text-decoration: none; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; }