:root { --bg:#f8f4ec; --card:#fffdf9; --ink:#25263a; --muted:#66697b; --line:#e7e0d3; --primary:#6a55c8; --on:#fff; --danger:#b04a50; }
@media (prefers-color-scheme: dark) { :root { --bg:#15161f; --card:#1e2030; --ink:#ece9f4; --muted:#a5a8bc; --line:#2f3248; --primary:#a99bec; --on:#15161f; --danger:#e58ea9; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main { max-width:440px; margin:0 auto; padding:28px 16px 48px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; }
h1 { font-size:22px; margin:0 0 6px; line-height:1.25; }
.muted { color:var(--muted); font-size:14px; }
.choices { display:grid; gap:10px; margin:18px 0 8px; }
button { font:inherit; min-height:48px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--ink); padding:12px 16px; cursor:pointer; }
button.primary { background:var(--primary); color:var(--on); border-color:var(--primary); font-weight:700; }
button[aria-pressed="true"] { outline:3px solid var(--primary); }
button:disabled { opacity:.55; cursor:default; }
label { display:block; margin:14px 0 6px; font-weight:600; font-size:14px; }
input[type=number] { width:100%; min-height:48px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--ink); padding:10px 14px; font:inherit; }
.err { color:var(--danger); margin-top:12px; font-size:14px; }
.ok { margin-top:14px; font-weight:600; }

.row { margin-top:16px; }