:root {
  color-scheme: light dark;
  --text: #1a1a1f;
  --muted: #6b6b76;
  --bg: #ffffff;
  /* Was #7c5cff in both schemes: 4.34:1 on white and 4.31:1 on the dark
     background, just under WCAG AA's 4.5:1 for link text. */
  --accent: #6e4dff;
  --border: #e6e6ec;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #eeeef2;
    --muted: #a0a0ac;
    --bg: #121214;
    --border: #2a2a30;
    --accent: #9a82ff;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 96px;
}
h1 {
  font-size: 1.6rem;
  margin-bottom: 4px;
}
.meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 32px;
}
h2 {
  font-size: 1.1rem;
  margin-top: 36px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
p, li { font-size: 0.97rem; }
ul { padding-left: 1.2em; }
a { color: var(--accent); }
.placeholder {
  background: rgba(124, 92, 255, 0.12);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  padding: 0 4px;
}
.top-nav {
  font-size: 0.9rem;
  margin-bottom: 24px;
}
.top-nav a { margin-right: 16px; }
footer {
  margin-top: 48px;
  color: var(--muted);
  font-size: 0.85rem;
}