:root { color-scheme: light; --paper:#fcf9fc;--ink:#37213f;--muted:#6c5a72;--line:#dfd0e6;--accent:#754184;--surface:#eee5f5; }
:root[data-theme=dark] { color-scheme:dark;--paper:#1d1523;--ink:#f6ecfa;--muted:#c7b8ce;--line:#55425f;--accent:#d5a9e4;--surface:#302238; }
* { box-sizing:border-box; }
body { margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.7 system-ui,sans-serif; }
main { max-width:760px;padding:48px 24px 80px;margin:auto; }
h1 { font-size:clamp(2rem,6vw,3rem);line-height:1.15;letter-spacing:-.04em; }
h2 { font-size:1.35rem;margin-top:2rem; }
p,li { color:var(--muted); }
a { color:var(--accent);text-underline-offset:.25em; }
nav,.choices { display:flex;flex-wrap:wrap;gap:16px;align-items:center; }
nav { justify-content:space-between; }
button { min-height:48px;border:1px solid var(--accent);border-radius:8px;padding:10px 18px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer; }
section { border-top:1px solid var(--line);margin-top:32px;padding-top:16px; }
:focus-visible { outline:3px solid var(--accent);outline-offset:4px; }