:root { color-scheme: light dark; --bg:#fbf8f6; --fg:#1d1b1a; --muted:#6b6560; --accent:#b3261e; --card:#f1ebe7; }
@media (prefers-color-scheme: dark) { :root { --bg:#161413; --fg:#efe9e5; --muted:#a29a94; --accent:#ffb4a9; --card:#221f1e; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main, header, footer { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }
header { display:flex; justify-content:space-between; align-items:center; padding-top:1.5rem; padding-bottom:1rem; }
header a { color:var(--fg); text-decoration:none; font-weight:600; }
header nav a { margin-left:1.25rem; font-weight:400; color:var(--muted); }
h1 { font-size:2.4rem; line-height:1.15; margin:2.5rem 0 .75rem; }
h2 { font-size:1.25rem; margin:2.2rem 0 .4rem; }
p, li { color:var(--fg); } .lead { font-size:1.2rem; color:var(--muted); }
a { color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1rem; margin:2rem 0; }
.card { background:var(--card); border-radius:14px; padding:1rem 1.1rem; } .card h3 { margin:.1rem 0 .3rem; font-size:1.05rem; } .card p { margin:0; color:var(--muted); font-size:.95rem; }
footer { padding-top:2rem; padding-bottom:3rem; color:var(--muted); font-size:.9rem; }
code { background:var(--card); padding:.1em .35em; border-radius:4px; }