:root { color-scheme: light dark; --bg:#f7f8fa; --ink:#171c22; --line:#cbd1d8; --link:#075e74; font-family: system-ui, sans-serif; }
@media(prefers-color-scheme:dark) { :root { --bg:#14171b; --ink:#edf2f7; --line:#454b52; --link:#7ddcca; } }
* { box-sizing:border-box; }
body { margin:0 auto; padding:0 20px; max-width:960px; background:var(--bg); color:var(--ink); line-height:1.75; overflow-wrap:anywhere; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
a { color:var(--link); text-underline-offset:3px; }
nav, footer { display:flex; gap:20px; flex-wrap:wrap; }
nav a, .brand { text-decoration:none; font-weight:700; }
main { max-width:800px; padding:36px 0 48px; }
h1 { font-size:2.4rem; line-height:1.2; margin:0 0 26px; }
h2 { font-size:1.35rem; margin:32px 0 12px; }
li { margin:12px 0; }
img { display:block; width:100%; height:auto; margin:24px 0; }
footer { border-top:1px solid var(--line); padding:24px 0; }
@media(max-width:600px) { h1 {font-size:2rem;} nav {gap:14px;} }