:root { --bg:#121316; --panel:#1c1e22; --text:#ffffff; --muted:#9aa1a9; --red:#ff3b30; --link:#ff8a80; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:18px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
header, main, footer { max-width: 44rem; margin: 0 auto; padding: 1rem 1rem; }
header { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; padding-top:1.5rem; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--text); text-decoration:none; font-size:1.15rem; }
.brand img { width:2.2rem; height:2.2rem; border-radius:50%; }
nav a { margin-right:1rem; }
a { color:var(--link); }
h1 { font-size:2.1rem; line-height:1.15; margin:1.5rem 0 .5rem; }
h2 { font-size:1.25rem; margin:2rem 0 .25rem; color:var(--red); }
p, li { max-width: 40rem; }
.lead { font-size:1.15rem; }
.note { background:var(--panel); border-left:4px solid var(--red); padding:.75rem 1rem; border-radius:4px; }
footer { color:var(--muted); font-size:.9rem; border-top:1px solid var(--panel); margin-top:2rem; }
@media (max-width: 30rem) { body { font-size:17px; } h1 { font-size:1.7rem; } }