:root { --bg: #FFFFFF; --fg: #1B1B1D; --muted: #5E5868; --accent: #8A1FD6; --line: #ECE4F7; --surface: #F8F2FF; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0E0E0F; --fg: #F2EEF7; --muted: #A59FB0; --accent: #C45BFF; --line: #2A2530; --surface: #1B1B1D; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
header, main, footer { max-width: 720px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 24px; }
header a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 600 22px/1 Newsreader, Georgia, serif; }
header img { width: 36px; height: 36px; border-radius: 9px; }
h1, h2 { font-family: Newsreader, Georgia, serif; font-weight: 600; line-height: 1.2; }
h1 { font-size: 40px; margin: 32px 0 4px; }
h2 { font-size: 24px; margin: 40px 0 8px; }
h3 { font-size: 18px; margin: 24px 0 4px; }
a { color: var(--accent); }
li { margin: 4px 0; }
.meta { color: var(--muted); margin-top: 0; }
.links { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.links a { padding: 10px 18px; border-radius: 999px; background: var(--surface); text-decoration: none; font-weight: 600; }
footer { color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); margin-top: 56px; padding-top: 20px; padding-bottom: 40px; }
footer a { color: inherit; margin-left: 12px; }