:root{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:#111827; background:#f4f6f8;
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --good:#0f766e; --bad:#b42318;
}
*{box-sizing:border-box}
body{margin:0; min-height:100vh; background:
  radial-gradient(circle at 15% 10%, rgba(17,24,39,.06), transparent 30%),
  radial-gradient(circle at 85% 90%, rgba(17,24,39,.05), transparent 28%),
  #f4f6f8;}
button{font:inherit}
.app-shell{width:min(920px,calc(100% - 32px)); margin:0 auto; padding:34px 0 54px}
.topbar{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px}
.eyebrow{font-size:.72rem; letter-spacing:.17em; font-weight:800; color:var(--muted)}
h1{margin:.28rem 0 0; font-size:clamp(1.8rem,4vw,2.8rem); letter-spacing:-.04em}
.ghost{border:1px solid #d1d5db; background:rgba(255,255,255,.7); padding:10px 14px; border-radius:12px; cursor:pointer}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px}
.stat{background:rgba(255,255,255,.72); border:1px solid var(--line); border-radius:16px; padding:14px 16px}
.stat span{display:block; font-size:1.35rem; font-weight:800; letter-spacing:-.03em}
.stat small{color:var(--muted)}
.card{background:white; border:1px solid var(--line); border-radius:24px; box-shadow:0 18px 50px rgba(17,24,39,.08); padding:26px}
.card-top,.footer-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.pill{background:#eef2f7; border-radius:999px; padding:7px 10px; font-size:.8rem; font-weight:800}
.counter,.footer-row{font-size:.82rem; color:var(--muted)}
.prompt-wrap{padding:34px 2px 20px}
.label{font-size:.72rem; font-weight:800; color:var(--muted); letter-spacing:.15em}
#term{font-size:clamp(2.1rem,6vw,4.5rem); margin:4px 0 8px; letter-spacing:-.055em; line-height:1}
#instruction{margin:0; color:var(--muted); font-size:1rem}
.options{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.option{position:relative; border:1px solid var(--line); background:#fff; text-align:left; padding:18px 18px 18px 52px; border-radius:16px; cursor:pointer; line-height:1.38; min-height:86px; transition:.15s ease}
.option:hover{transform:translateY(-1px); border-color:#9ca3af; box-shadow:0 7px 18px rgba(17,24,39,.05)}
.option .num{position:absolute; left:16px; top:18px; width:24px; height:24px; border:1px solid #d1d5db; border-radius:7px; display:grid; place-items:center; color:var(--muted); font-size:.75rem; font-weight:800}
.option.correct{border-color:#5eead4; background:#f0fdfa}
.option.wrong{border-color:#fca5a5; background:#fff1f2}
.feedback{height:42px; display:flex; align-items:center; font-weight:750; font-size:.92rem}
.feedback.good{color:var(--good)} .feedback.bad{color:var(--bad)}
.footer-row{padding-top:7px; border-top:1px solid #f3f4f6}
kbd{font-family:inherit; border:1px solid #d1d5db; border-bottom-width:2px; border-radius:6px; padding:1px 5px; background:#fafafa}
.done{text-align:center; padding:58px 28px}
.done-mark{width:62px; height:62px; display:grid; place-items:center; border-radius:999px; background:#ecfdf5; color:#047857; font-weight:900; font-size:1.8rem; margin:0 auto 18px}
.done h2{font-size:2rem; margin:0 0 8px}.done p{color:var(--muted); max-width:540px; margin:0 auto 26px}
.done-actions{display:flex; gap:10px; justify-content:center}
.primary,.dark{padding:11px 16px; border-radius:12px; cursor:pointer}
.primary{border:1px solid #111827; background:#111827; color:#fff}
.dark{background:#fff}
.hidden{display:none}
@media(max-width:700px){
  .app-shell{width:min(100% - 20px,920px); padding-top:20px}
  .stats{grid-template-columns:1fr 1fr}
  .card{padding:18px; border-radius:20px}
  .options{grid-template-columns:1fr}
  .option{min-height:0}
  .footer-row{align-items:flex-start; flex-direction:column}
}