:root{--bg:#faf8f5;--fg:#1f1d1a;--muted:#6b665f;--accent:#b4532a;--card:#ffffff;--line:#e8e2d9}
@media (prefers-color-scheme:dark){:root{--bg:#171512;--fg:#f1ede6;--muted:#a39d93;--accent:#e08a5f;--card:#211e1a;--line:#332f29}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.65 Georgia,"Times New Roman",serif}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}
header{padding:28px 0;border-bottom:1px solid var(--line)}
header a{color:var(--fg);text-decoration:none;font:600 18px system-ui,sans-serif;letter-spacing:.2px}
h1{font-size:2rem;line-height:1.25;margin:48px 0 12px}
h2{font-size:1.4rem;margin:40px 0 8px}
p{margin:0 0 18px}
.lede{color:var(--muted);font-size:1.15rem}
a{color:var(--accent)}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:20px 0;text-decoration:none;color:var(--fg)}
.card:hover{border-color:var(--accent)}
.card .tag{font:600 12px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.8px;color:var(--accent)}
.card h3{margin:6px 0 6px;font-size:1.2rem}
.card p{margin:0;color:var(--muted);font-size:1rem}
ol li,ul li{margin-bottom:10px}
pre{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;overflow-x:auto;white-space:pre-wrap;font:15px/1.55 ui-monospace,Menlo,monospace}
.note{border-left:3px solid var(--accent);padding:4px 0 4px 16px;color:var(--muted);margin:24px 0}
footer{margin:64px 0 40px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font:14px system-ui,sans-serif}