:root { color-scheme: light dark; --ink: #1b1d1b; --muted: #5a605b; --ground: #fbfaf7; --accent: #c85a45; --line: #e6e1d8; }
@media (prefers-color-scheme: dark) { :root { --ink: #ecedea; --muted: #a8aea9; --ground: #111312; --accent: #f08a76; --line: #2c302e; } }
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 680px; margin: 0 auto; padding: 48px 20px 80px; line-height: 1.6; color: var(--ink); background: var(--ground); }
h1 { font-size: 30px; line-height: 1.15; margin: 0 0 6px; }
h2 { font-size: 19px; margin: 32px 0 6px; }
p, li { color: var(--ink); }
.muted { color: var(--muted); font-size: 14px; }
a { color: var(--accent); }
nav { display: flex; gap: 18px; margin-bottom: 36px; font-size: 15px; }
nav a { text-decoration: none; font-weight: 600; }
.mark { width: 56px; height: 56px; border-radius: 13px; background: #e0725d; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 28px; margin-bottom: 18px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }