:root {
  --bg: #fff6f6; --surface: #ffffff; --text: #1b1013; --muted: #6d5a5e; --border: #f0d3d7; --red: #c8102e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #140b0d; --surface: #1f1215; --text: #f8eced; --muted: #b49a9f; --border: #3a2227; --red: #ff6b7d; }
}
:root[data-theme="dark"] { --bg: #140b0d; --surface: #1f1215; --text: #f8eced; --muted: #b49a9f; --border: #3a2227; --red: #ff6b7d; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 720px; margin: 24px auto 64px; padding: 24px 16px; }
h1 { font-size: 28px; margin: 8px 0 16px; }
h2 { font-size: 18px; margin: 28px 0 6px; }
h3 { font-size: 16px; margin: 18px 0 4px; }
p, li { color: var(--text); overflow-wrap: anywhere; }
a { color: var(--red); }
.muted, .foot { color: var(--muted); font-size: 14px; }
.foot { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 12px; }
.reveal { font: inherit; font-size: 14px; cursor: pointer; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.reveal:hover { border-color: var(--red); }
.reveal:focus-visible, a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }