:root { --bg:#f6f3ee; --fg:#222; --muted:#666; --ok:#1d7a3a; --bad:#b3261e; --accent:#2f5d8a; --card:#fff; }
@media (prefers-color-scheme: dark) { :root { --bg:#1c1c1e; --fg:#eee; --muted:#aaa; --ok:#5fc27e; --bad:#ff7b72; --accent:#7fb0e0; --card:#2a2a2d; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 -apple-system, "Segoe UI", Arial, sans-serif; }
main { max-width:520px; margin:0 auto; padding:16px; }
header { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
h1 { font-size:20px; margin:0 0 8px; }
#progress { color:var(--muted); font-size:14px; white-space:nowrap; }
#board { width:100%; max-width:488px; margin:8px auto; touch-action:none; }
#feedback { min-height:1.5em; font-weight:bold; margin:8px 0; }
#feedback.ok { color:var(--ok); } #feedback.bad { color:var(--bad); }
#buttons { display:flex; gap:8px; }
button { font:inherit; padding:10px 16px; border-radius:8px; border:1px solid var(--muted); background:var(--card); color:var(--fg); cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
#answer, #done { background:var(--card); border-radius:8px; padding:12px 14px; margin-top:12px; }
#answer p, #done p { margin:6px 0; }
a { color:var(--accent); }
.square-55d63.picked { box-shadow: inset 0 0 0 4px #e0b84c; }
nav { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--muted); margin-bottom:4px; }
select, input[type=text], input[type=email] { font:inherit; padding:8px 10px; border-radius:8px; border:1px solid var(--muted); background:var(--card); color:var(--fg); }
form label, .field { display:block; margin:14px 0 6px; }
form input[type=text], form input[type=email], form select { width:100%; }
.choice { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; }
.choice label { display:flex; align-items:center; gap:6px; margin:0; padding:8px 12px; border:1px solid var(--muted); border-radius:8px; background:var(--card); cursor:pointer; }
.note { color:var(--muted); font-size:14px; }
.msg { font-weight:bold; margin:12px 0; } .msg.bad { color:var(--bad); } .msg.ok { color:var(--ok); }
.danger { color:var(--bad); border-color:var(--bad); }
hr { border:none; border-top:1px solid var(--muted); opacity:.3; margin:24px 0; }