:root { --bg:#faf9fc; --fg:#1b1730; --muted:#5f5a75; --accent:#6C5CE7; --card:#fff; --line:#e7e3f0; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111022; --fg:#eeecf7; --muted:#a29dbb; --card:#1a1832; --line:#2b2748; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif; }
.wrap { max-width:720px; margin:0 auto; padding:48px 24px 96px; }
header { display:flex; align-items:center; gap:14px; margin-bottom:40px; }
.mark { width:44px; height:44px; border-radius:12px; display:grid; grid-template-columns:repeat(2,1fr);
  gap:3px; padding:6px; background:#251E4A; }
.mark i { border-radius:3px; }
h1 { font-size:30px; margin:0 0 8px; letter-spacing:-.02em; }
h2 { font-size:19px; margin:36px 0 10px; letter-spacing:-.01em; }
p, li { color:var(--muted); }
strong { color:var(--fg); }
a { color:var(--accent); }
.lede { font-size:19px; color:var(--fg); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin:20px 0; }
nav { margin-top:auto; padding-top:32px; border-top:1px solid var(--line); font-size:14px; }
nav a { margin-right:16px; }
.grid { display:flex; gap:4px; margin:20px 0; flex-wrap:wrap; }
.grid i { width:22px; height:22px; border-radius:5px; }
code { background:var(--line); padding:2px 6px; border-radius:5px; font-size:14px; color:var(--fg); }