:root {
  color-scheme: light dark;
  --bg: #0e0f12;
  --fg: #e8e6e1;
  --muted: #9a9691;
  --accent: #ff5b55;
  --rule: #26282d;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #faf9f7; --fg: #16171a; --muted: #6b6862; --rule: #e6e3dd; }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
h1 {
  font-size: 1.75rem;
  margin: 0 0 4px;
}
.updated {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 40px;
}
h2 {
  font-size: 1.15rem;
  margin: 2.2em 0 0.6em;
  border-top: 1px solid var(--rule);
  padding-top: 1.4em;
}
h1 + .updated + h2 { border-top: none; padding-top: 0; }
p, li { color: var(--fg); }
ul { padding-left: 1.2em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 24px;
  text-decoration: none;
}
.brand:hover { text-decoration: none; opacity: 0.85; }
footer {
  margin-top: 3em;
  padding-top: 1.4em;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.85rem;
}