:root { --fg: #1d1f21; --muted: #6a6f75; --bg: #fbfaf7; --accent: #2f6f5e; --line: #e4e1da; }
@media (prefers-color-scheme: dark) { :root { --fg: #e6e4df; --muted: #9a9ea3; --bg: #16181a; --accent: #7cc4ad; --line: #2a2d30; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.65 Georgia, "Times New Roman", serif; }
main, header, footer { max-width: 680px; margin: 0 auto; padding: 0 20px; }
header { padding-top: 40px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
header a.home { font: 600 20px/1.2 system-ui, sans-serif; color: var(--fg); text-decoration: none; }
nav a { font: 15px system-ui, sans-serif; color: var(--muted); margin-left: 16px; text-decoration: none; }
nav a:hover, a { color: var(--accent); }
h1 { font: 600 30px/1.25 system-ui, sans-serif; margin: 40px 0 8px; }
h2 { font: 600 21px/1.3 system-ui, sans-serif; margin: 32px 0 8px; }
.date { color: var(--muted); font: 14px system-ui, sans-serif; }
ul.posts { list-style: none; padding: 0; }
ul.posts li { padding: 14px 0; border-bottom: 1px solid var(--line); }
ul.posts a { font: 600 18px/1.35 system-ui, sans-serif; text-decoration: none; }
pre, code { font: 14px/1.5 ui-monospace, Consolas, monospace; background: rgba(127,127,127,.12); border-radius: 4px; }
code { padding: 1px 4px; }
pre { padding: 12px 14px; overflow-x: auto; }
footer { color: var(--muted); font: 14px system-ui, sans-serif; padding-top: 48px; padding-bottom: 40px; }