:root{--bg:#f6f8fb;--card:#fff;--ink:#14202e;--mute:#566274;--line:#d8dfe8;--brand:#12355b;--accent:#1b6fd1;--ok:#1f8a5b;--warn:#b7791f;--bad:#b3392f;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0f151d;--card:#18212c;--ink:#e8edf3;--mute:#9aa7b8;--line:#2c3a4a;--brand:#9cc4f2;--accent:#6aa9ee}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
.top{background:var(--card);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;gap:10px;align-items:baseline;padding:14px 16px}
.brand{font-weight:700;color:var(--brand);font-size:1.15rem}.by{color:var(--mute);font-size:.9rem}
main.wrap{padding-top:24px;padding-bottom:24px}
h1{font-size:1.6rem;line-height:1.25;margin:.2em 0 .5em}h2{font-size:1.2rem;margin:1.6em 0 .5em}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin:0 0 16px}
.meta,.note,.help{color:var(--mute);font-size:.92rem}
.progress{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--mute);font-size:.9rem}
.progress progress{flex:1;height:8px;accent-color:var(--accent)}
.sectitle{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:600}
.q{font-size:1.2rem;font-weight:600;margin:.3em 0 .6em}
.opts{display:grid;gap:10px;margin:16px 0}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--card)}
.opt:hover{border-color:var(--accent)}
.opt input{margin-top:.3em;accent-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.nav{display:flex;gap:10px;justify-content:space-between;margin-top:8px;flex-wrap:wrap}
button,.btn{font:inherit;padding:10px 18px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=text]{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink)}
label.f{display:block;margin:12px 0 4px;font-weight:600}
details{margin:8px 0}summary{cursor:pointer;color:var(--accent)}
.score{display:flex;align-items:baseline;gap:8px;margin:8px 0}.score .big{font-size:3.4rem;font-weight:700;color:var(--brand);line-height:1}
table.sec{width:100%;border-collapse:collapse}table.sec td{padding:7px 8px;border-bottom:1px solid var(--line)}
table.sec td.num{width:3.2em;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
meter{width:100%;height:12px}
ol.top{padding-left:1.3em}ol.top li{margin:0 0 14px}ol.top .meta{margin-top:2px}
.credit{color:var(--mute);font-size:.85rem;padding:16px;border-top:1px solid var(--line);margin-top:24px}
.err{color:var(--bad)}
body.report .wrap{padding-top:24px}
.noprint{margin-top:24px}
@media print{.noprint,.top{display:none}body{background:#fff;color:#000}.card{border:0}.credit{color:#444}}