:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #15131f;
  --muted: #6c6982;
  --line: #e2dfee;
  --accent: #5b3fe0;
  --card: #f5f4fa;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0c0c13; --fg:#f3f2f8; --muted:#9c99af; --line:#262437; --accent:#9179ff; --card:#14141e; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
h1 { font-size: 2.1rem; letter-spacing: -.02em; margin: 0 0 .3rem; }
h2 { font-size: 1.2rem; margin: 2.4rem 0 .6rem; }
.lede { color: var(--muted); margin: 0 0 2rem; }
.mark { font-weight: 800; color: var(--accent); letter-spacing: -.03em; font-size: 1.1rem; }
ul { padding-left: 1.2rem; }
li { margin: .4rem 0; }
.card { background: var(--card); border-radius: 14px; padding: 1.1rem 1.3rem; margin: 1.2rem 0; }
a { color: var(--accent); }
footer { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.2rem; color: var(--muted); font-size: .9rem; }
.toc { background: var(--card); border-radius: 14px; padding: .9rem 1.3rem; margin: 1.2rem 0 1rem; font-size: .95rem; }
.toc ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 2rem; }
.toc li { margin: .2rem 0; break-inside: avoid; }
@media (max-width: 34rem) { .toc ol { columns: 1; } }
h2[id] { scroll-margin-top: 1rem; }