:root { --bg:#0b1020; --fg:#e6e9f2; --muted:#9aa4bf; --card:#141b33; --accent:#6aa9ff; --line:#26304f; }
@media (prefers-color-scheme: light) {
  :root { --bg:#f6f7fb; --fg:#12172b; --muted:#566080; --card:#fff; --accent:#1f5fd1; --line:#d9deec; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 system-ui,sans-serif; }
a { color:var(--accent); }
.top { display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between; align-items:center;
  padding:1rem max(16px,calc((100% - 960px)/2)); border-bottom:1px solid var(--line); }
.brand { font-size:1.4rem; font-weight:700; text-decoration:none; color:var(--fg); letter-spacing:.05em; }
nav { display:flex; flex-wrap:wrap; gap:1rem; }
nav a { text-decoration:none; }
nav a[aria-current] { font-weight:700; text-decoration:underline; }
main, footer { max-width:960px; margin:0 auto; padding:1rem 16px; }
.hero { padding:3rem 0 2rem; }
.hero h1, h1 { font-size:clamp(1.8rem,5vw,2.8rem); line-height:1.2; margin:.2em 0; }
.lead { font-size:1.15rem; color:var(--muted); max-width:46rem; }
.button { display:inline-block; background:var(--accent); color:#fff; padding:.7rem 1.4rem;
  border-radius:.5rem; text-decoration:none; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
article, .note { background:var(--card); border:1px solid var(--line); border-radius:.6rem; padding:1rem 1.2rem; }
article h3 { margin-top:0; }
pre { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:.5rem; padding:.8rem 1rem; }
article pre { background:var(--bg); }
code { font-family:ui-monospace,monospace; font-size:.92em; }
.scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--line); }
footer { color:var(--muted); font-size:.9rem; border-top:1px solid var(--line); margin-top:2rem; }