:root { --fg:#1d1c1a; --muted:#66625b; --bg:#fbfaf7; --card:#f2efe9; --line:#e3ded4; --accent:#5b4bd6; }
@media (prefers-color-scheme: dark) { :root { --fg:#f1eee8; --muted:#a39e95; --bg:#121211; --card:#1d1c1a; --line:#2f2d2a; --accent:#9d92ff; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.55 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; }
main { max-width:680px; margin:0 auto; padding:56px 22px 72px; }
header { display:flex; align-items:center; gap:12px; margin-bottom:40px; }
.logo { width:40px; height:40px; border-radius:11px; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:20px; }
header a { color:inherit; text-decoration:none; font-weight:650; font-size:19px; }
h1 { font-size:clamp(30px,6vw,42px); line-height:1.12; letter-spacing:-.02em; margin:0 0 14px; }
h2 { font-size:21px; margin:36px 0 8px; letter-spacing:-.01em; }
p, li { color:var(--fg); } .lead { font-size:19px; color:var(--muted); margin:0 0 28px; }
.muted { color:var(--muted); }
.cards { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin:28px 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.card b { display:block; margin-bottom:4px; }
.card span { color:var(--muted); font-size:15px; }
a { color:var(--accent); }
table { width:100%; border-collapse:collapse; font-size:15px; margin:10px 0; }
td, th { text-align:left; vertical-align:top; padding:8px 10px 8px 0; border-bottom:1px solid var(--line); }
code { font-size:14px; background:var(--card); padding:1px 5px; border-radius:5px; }
footer { margin-top:56px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; display:flex; gap:18px; flex-wrap:wrap; }
footer a { color:var(--muted); }