:root { --bg:#fbf8f3; --fg:#201a14; --mut:#6b6258; --acc:#b4451f; --card:#ffffff; --line:#e7dfd3; }
@media (prefers-color-scheme: dark) { :root { --bg:#16120e; --fg:#f2ebe1; --mut:#a89d8f; --acc:#f08a5d; --card:#1f1913; --line:#33291f; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.6 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
header, main, footer { max-width:760px; margin:0 auto; padding:0 20px; }
header { display:flex; justify-content:space-between; align-items:center; padding-top:22px; padding-bottom:10px; }
header a.brand { font-weight:700; color:var(--fg); text-decoration:none; letter-spacing:.2px; }
nav a { color:var(--mut); text-decoration:none; margin-left:16px; font-size:15px; }
nav a:hover { color:var(--acc); }
h1 { font-size:2.1rem; line-height:1.2; margin:36px 0 10px; }
h2 { font-size:1.25rem; margin:34px 0 8px; }
p, li { color:var(--fg); }
.lead { color:var(--mut); font-size:1.12rem; margin-top:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:18px 0; }
.links { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.links a { display:inline-block; padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--fg); text-decoration:none; font-size:15px; }
.links a:hover { border-color:var(--acc); color:var(--acc); }
a { color:var(--acc); }
footer { color:var(--mut); font-size:14px; padding-top:30px; padding-bottom:50px; border-top:1px solid var(--line); margin-top:50px; }
.small { font-size:14px; color:var(--mut); }