:root {
  --bg: #f8fafc;
  --card: #fff;
  --text: #1e293b;
  --muted: #64748b;
  --primary: #1565c0;
  --border: #e2e8f0;
  --max: 920px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Roboto, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: var(--primary); }
header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
}
header .wrap, main .wrap { max-width: var(--max); margin: 0 auto; }
header a.brand { color: var(--text); text-decoration: none; font-weight: 700; }
header nav { margin-top: 0.5rem; font-size: 0.9rem; }
header nav a { margin-right: 1rem; text-decoration: none; }
main { padding: 1.5rem 1.25rem 3rem; }
.hero { margin-bottom: 2rem; }
.hero h1 { margin: 0 0 0.35rem; font-size: 1.75rem; }
.hero p { margin: 0; color: var(--muted); }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1rem;
}
.card h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.card h3 { margin: 1.25rem 0 0.35rem; font-size: 1rem; }
.card h3:first-child { margin-top: 0; }
.card p, .card li { color: var(--muted); }
.toc { columns: 2; gap: 1.5rem; font-size: 0.92rem; }
.toc ul { margin: 0; padding-left: 1.1rem; }
.section { scroll-margin-top: 1rem; }
footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 2rem 1rem; }
@media (max-width: 640px) { .toc { columns: 1; } }