.q{background:var(--raise);border:1px solid var(--hair);border-radius:12px;
  padding:20px 22px;margin:18px 0}
.q .num{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rose);display:block;margin-bottom:8px}
.q .text{font-size:17px;margin:0 0 14px;font-weight:600}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;cursor:pointer;
  border:1.5px solid var(--hair);border-radius:9px;background:var(--paper);
  font-size:15.5px;text-align:left;font-family:inherit;color:var(--ink);width:100%;
  transition:border-color .15s,background .15s}
.opt:hover:not(:disabled){border-color:var(--rose);background:var(--rose-w)}
.opt:disabled{cursor:default}
/* базовий button:hover з лекції фарбує текст у колір паперу — на вже відповіданому
   варіанті це робило його майже невидимим, поки під курсором. Гасимо. */
.opt:disabled:hover{background:var(--paper);color:var(--ink)}
.opt.right:disabled:hover{background:var(--teal-w)}
.opt.wrong:disabled:hover{background:var(--rose-w)}
.opt .mark{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--soft);
  min-width:18px;font-weight:700;padding-top:2px}
.opt.right{border-color:var(--teal);background:var(--teal-w)}
.opt.right .mark{color:var(--teal)}
.opt.wrong{border-color:var(--rose);background:var(--rose-w)}
.opt.wrong .mark{color:var(--rose)}
.why{margin-top:14px;padding:13px 16px;border-left:3px solid var(--teal);
  background:var(--teal-w);border-radius:0 8px 8px 0;font-size:15.5px;display:none}
.why.show{display:block}
.why b{font-family:Unbounded,sans-serif;font-size:12.5px}
.score{position:sticky;top:12px;z-index:5;background:var(--raise);
  border:1px solid var(--hair);border-radius:10px;padding:12px 18px;
  font-family:"JetBrains Mono",monospace;font-size:13px;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.score b{font-size:19px;color:var(--rose)}
.back{display:inline-block;font-family:"JetBrains Mono",monospace;
  font-size:12px;color:var(--teal);text-decoration:none;margin-top:8px}
.back:hover{text-decoration:underline}
