:root {
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --brand:#155eef;
  --brand-ink:#ffffff;
  --panel:#f8fafc;
}
[data-theme="dark"] {
  --bg:#0b0c10;
  --ink:#e5e7eb;
  --muted:#a3aab7;
  --line:#1f2430;
  --brand:#5aa9ff;
  --brand-ink:#0b0c10;
  --panel:#111318;
}

* { box-sizing:border-box }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}
.wrap { max-width:980px; margin:0 auto; padding:28px 16px }
h1 { font-size:clamp(26px,3.4vw,40px); line-height:1.15; margin:6px 0 4px }
h2 { font-size:clamp(18px,2.6vw,24px); margin:22px 0 8px }
p.lead { color:var(--muted); max-width:60ch; margin:6px 0 0 }

a { color:var(--brand); text-decoration:none }
a:hover { text-decoration:underline }

.btn {
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--brand);
  color:var(--brand);
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
}
.btn.primary { background:var(--brand); color:var(--brand-ink) }
.kbd {
  font-family:ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  border:1px solid var(--line);
  border-radius:6px;
  padding:1px 6px;
}