:root { --bg:#fbfaf7; --fg:#1b1b1a; --muted:#5e5d58; --line:#e4e1d8; --accent:#b4432b; }
@media (prefers-color-scheme: dark) { :root { --bg:#141413; --fg:#eeece6; --muted:#a3a098; --line:#2c2b28; --accent:#e0775c; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.65 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color:var(--accent); }
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 20px; }
header.site { border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; padding-bottom:18px; }
.brand { font-weight:700; letter-spacing:-0.01em; color:var(--fg); text-decoration:none; }
.brand span { color:var(--accent); }
nav a { color:var(--muted); text-decoration:none; margin-left:18px; font-size:15px; }
nav a:hover { color:var(--fg); }
main { padding: 48px 0 64px; }
h1 { font-size: clamp(30px, 6vw, 44px); line-height:1.15; letter-spacing:-0.02em; margin:0 0 12px; }
h2 { font-size: 21px; margin: 40px 0 8px; letter-spacing:-0.01em; }
h3 { font-size: 17px; margin: 24px 0 4px; }
p, li { color: var(--fg); }
.lede { font-size: 20px; color: var(--muted); margin: 0 0 32px; }
.meta { color: var(--muted); font-size: 15px; margin-bottom: 32px; }
ul { padding-left: 22px; }
.card { border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin: 12px 0; }
footer.site { border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
footer.site .wrap { padding-top:20px; padding-bottom:28px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }
footer.site a { color:var(--muted); }
table { width:100%; border-collapse:collapse; font-size:15px; margin:12px 0; }
th, td { text-align:left; vertical-align:top; padding:8px 10px 8px 0; border-bottom:1px solid var(--line); }
@media (max-width: 520px) { nav a { margin-left: 12px; } body { font-size:16px; } }