:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --code-bg:#f9fafb;
  --link:#2563eb;
  --max: 920px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}
main{
  max-width:var(--max);
  margin:0 auto;
  padding:48px 20px 72px;
}
header{
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
  margin-bottom:28px;
}
header h1{
  font-size:2.1rem;
  line-height:1.2;
  margin:0 0 8px 0;
}
header .subtitle{
  font-size:1.1rem;
  color:var(--muted);
  margin:0 0 10px 0;
}
header .meta{
  color:var(--muted);
  font-size:0.95rem;
  margin:0;
}
.toc{
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 16px 12px;
  background:#fff;
  margin: 0 0 28px 0;
}
.toc h2{
  font-size:1.05rem;
  margin:0 0 10px 0;
}
.toc ul{
  margin:0;
  padding-left:18px;
}
.toc a{color:var(--link); text-decoration:none}
.toc a:hover{text-decoration:underline}
h2,h3,h4,h5{
  line-height:1.25;
  margin:28px 0 10px;
}
h2{font-size:1.55rem}
h3{font-size:1.25rem}
h4{font-size:1.1rem}
p{margin:10px 0}
ul{
  margin:10px 0 14px;
  padding-left:22px;
}
li{margin:6px 0}
a{color:var(--link)}
pre{
  margin:14px 0 18px;
  padding:14px 16px;
  background:var(--code-bg);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:auto;
}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:0.92rem;
}
hr{border:0;border-top:1px solid var(--border); margin:28px 0}
footer{
  margin-top:42px;
  padding-top:16px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:0.9rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --border:#1f2937;
    --code-bg:#0f172a;
    --link:#60a5fa;
  }
  .toc{background:transparent}
}