:root{
  --font: system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --fs: 20px;            /* root size; scaled by fontScale via html style */
  --bg:#ffffff; --fg:#15171a; --muted:#3a3f45;
  --accent:#0a4f96; --accent-fg:#ffffff;
  --ok:#0a5f28; --bad:#a4001c; --card:#f4f6f8; --border:#c9ced4;
  --target:48px;
}
html[data-theme="contrast"]{ --bg:#000; --fg:#fff; --card:#111; --border:#fff; --accent:#ffd400; --accent-fg:#000; --ok:#7CFC9B; --bad:#ff7b7b; }
html{ font-size:var(--fs); }
body{ font-family:var(--font); line-height:1.6; color:var(--fg); background:var(--bg);
  margin:0; max-width:72ch; padding:1.2rem; margin-inline:auto; }
h1,h2{ line-height:1.25; }
button,.option{ font:inherit; min-height:var(--target); border-radius:.5rem; cursor:pointer; }
button{ background:var(--accent); color:var(--accent-fg); border:0; padding:.6rem 1.1rem; font-weight:600; }
button.secondary{ background:transparent; color:var(--accent); border:2px solid var(--accent); }
.option{ display:block; width:100%; text-align:left; background:var(--card); color:var(--fg);
  border:2px solid var(--border); padding:.8rem 1rem; margin:.5rem 0; }
.option:focus-visible, button:focus-visible{ outline:4px solid var(--accent); outline-offset:3px; }
.option[aria-pressed="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); }
.feedback{ padding:1rem; border-radius:.5rem; margin:1rem 0; border:2px solid; }
.feedback.ok{ border-color:var(--ok); } .feedback.bad{ border-color:var(--bad); }
.badge{ font-weight:700; } .badge.ok{ color:var(--ok); } .badge.bad{ color:var(--bad); }
.rationale{ background:var(--card); padding:1rem; border-radius:.5rem; }
.scenario{ background:var(--card); border-left:6px solid var(--accent); padding:1rem; margin:1rem 0; }
.qhead{ display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.flagbtn{ padding:.4rem .9rem; }
.flagbtn[aria-pressed="true"]{ background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.option .rank{ font-weight:800; color:var(--accent); }
html[data-theme="contrast"] .option .rank{ color:var(--accent); }
.kbdhint{ color:var(--muted); font-size:.85em; }
.topbar{ display:flex; gap:.5rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.sizer button{ min-width:var(--target); }
label{ font-weight:600; }
input[type="password"]{ font:inherit; padding:.6rem; width:100%; min-height:var(--target);
  border:2px solid var(--border); border-radius:.5rem; }