:root { --bg:#0f1115; --card:#181b22; --text:#f2f3f5; --muted:#9aa0ab; --accent:#ffb020; --line:#2a2e38; }
@media (prefers-color-scheme: light) {
  :root { --bg:#f6f6f3; --card:#ffffff; --text:#16181d; --muted:#656b76; --accent:#d97706; --line:#e3e3de; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
a { color:inherit; }
main { max-width:560px; margin:0 auto; padding:24px 16px 64px; }
header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.brand { font-size:15px; letter-spacing:.08em; text-transform:uppercase; margin:0; color:var(--accent); text-decoration:none; font-weight:700; }
.progress { color:var(--muted); font-size:14px; }
.intro { color:var(--muted); font-size:15px; margin:0 0 16px; }
.back { display:inline-block; color:var(--muted); font-size:14px; text-decoration:none; margin:0 0 14px; }
.back:hover { color:var(--text); }

.controls { display:flex; gap:8px; align-items:center; margin:0 0 10px; }
.controls select { font:inherit; font-size:14px; color:var(--text); background:var(--card); border:1.5px solid var(--line); border-radius:10px; padding:7px 10px; }
.controls label { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-left:auto; cursor:pointer; }
.chips { display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; margin:0 0 6px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:none; font:inherit; font-size:14px; color:var(--text); background:transparent; border:1.5px solid var(--line);
        border-radius:999px; padding:5px 13px; cursor:pointer; text-decoration:none; }
.chip.on { background:var(--accent); border-color:var(--accent); color:#111; font-weight:600; }
.count { color:var(--muted); font-size:14px; margin:0 0 12px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 18px; margin:0 0 16px; }
h1, h2 { line-height:1.3; margin:0 0 14px; }
h2 { font-size:21px; }
h1 { font-size:26px; }
h2 a { text-decoration:none; }
h2 a:hover { text-decoration:underline; }
.tags { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:13px; color:var(--muted); margin:0 0 10px; }
.tags a { text-decoration:none; color:var(--accent); font-weight:600; }
.opt { display:block; width:100%; text-align:left; margin:0 0 10px; padding:13px 16px; font:inherit; color:inherit;
       background:transparent; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; }
.opt:hover, .opt:focus-visible { border-color:var(--accent); outline:none; }
.res { position:relative; overflow:hidden; margin:0 0 10px; padding:13px 16px; border:1.5px solid var(--line); border-radius:12px; }
.res.mine { border-color:var(--accent); }
.bar { position:absolute; inset:0 auto 0 0; background:var(--accent); opacity:.22; width:0; transition:width .6s ease; }
.row { position:relative; display:flex; justify-content:space-between; gap:12px; }
.pct { font-variant-numeric:tabular-nums; font-weight:600; }
.foot { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.meta { color:var(--muted); font-size:14px; margin:0; }
.share { font:inherit; font-size:14px; font-weight:600; color:var(--text); background:transparent; border:1.5px solid var(--line);
         border-radius:10px; padding:6px 12px; cursor:pointer; }
.err { color:#e5484d; font-size:14px; min-height:20px; }
h3 { font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:32px 0 10px; }
.more a { display:block; padding:12px 0; border-top:1px solid var(--line); text-decoration:none; }
.more a:hover { color:var(--accent); }
.static-opts { padding-left:20px; margin:0 0 12px; color:var(--muted); }