:root { --fg:#1f2430; --muted:#5b6475; --bg:#fff; --soft:#f4f6fa; --line:#d9dee8; --accent:#1d5fd1; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#e6e9f0; --muted:#9aa4b8; --bg:#14171e; --soft:#1c2029; --line:#2d3340; --accent:#7aa8ff; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--accent); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em; }
code { background:var(--soft); padding:.1em .3em; border-radius:3px; }
.hero { max-width:60rem; margin:0 auto; padding:3rem 1rem 1rem; }
.logo { color:var(--accent); }
h1 { margin:.2em 0; font-size:2.2rem; }
.lead { font-size:1.15rem; color:var(--muted); }
main, footer { max-width:60rem; margin:0 auto; padding:0 1rem; }
section { margin:2.5rem 0; }
h2 { border-bottom:1px solid var(--line); padding-bottom:.3rem; }
blockquote { margin:1rem 0; padding:.6rem 1rem; background:var(--soft); border-left:4px solid var(--accent); }
.scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.92rem; }
th, td { border:1px solid var(--line); padding:.4rem .6rem; text-align:left; vertical-align:top; }
thead th { background:var(--soft); }
td.n { text-align:right; font-variant-numeric:tabular-nums; }
td.u { font-family:ui-monospace, monospace; font-size:.8rem; word-break:break-all; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr)); gap:1rem; }
.card { border:1px solid var(--line); border-radius:8px; padding:1rem; min-width:0; }
.card h3 { margin-top:0; }
.meta, .note { color:var(--muted); font-size:.9rem; }
dl { display:grid; grid-template-columns:auto 1fr; gap:.1rem .8rem; font-size:.85rem; margin:.5rem 0; }
dt { color:var(--muted); } dd { margin:0; }
pre { background:var(--soft); padding:.8rem; border-radius:6px; overflow-x:auto; }
pre.excerpt { white-space:pre-wrap; word-break:break-word; font-size:.8rem; max-height:26rem; overflow:auto; }
.facts { font-size:.85rem; color:var(--muted); padding-left:1.1rem; }
footer { color:var(--muted); font-size:.85rem; padding-bottom:2rem; }
@media (max-width:600px) { h1 { font-size:1.7rem; } .hero { padding-top:1.5rem; } }