.quiz{border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:18px 0;background:var(--surface);box-shadow:var(--shadow)}
.quiz .qq{margin:0 0 14px;font:600 20px/1.3 var(--font-display);font-variation-settings:"SOFT" 100}
.quiz label{display:block;position:relative;padding:10px 14px 10px 42px;margin:8px 0;border-radius:12px;cursor:pointer;border:1.5px solid var(--line);background:var(--bg);transition:border-color .15s,transform .15s}
.quiz label:hover{border-color:var(--acc);transform:translateX(3px)}
.quiz label:has(input:checked){border-color:var(--acc)}
.quiz input{position:absolute;left:15px;top:15px;margin:0;accent-color:var(--acc)}
.quiz .quiz-check{margin-top:10px;padding:7px 18px;border-radius:10px;border:0;background:var(--acc);color:var(--on-acc);cursor:pointer;font:600 13px var(--font-mono)}
.quiz .quiz-check:hover{filter:brightness(1.08);color:var(--on-acc)}
.quiz .why{display:none;margin-top:14px;padding:12px 16px;border-radius:12px;background:var(--surface-2);border-left:3px solid var(--acc)}
.quiz.ok{border-color:var(--ok)}
.quiz.bad{border-color:var(--bad)}
.quiz.ok .why,.quiz.bad .why{display:block;animation:reveal .25s ease}
.quiz.ok label.right,.quiz.bad label.right{border-color:var(--ok);background:var(--fpga-soft)}
.quiz.bad label:has(input:checked):not(.right){border-color:var(--bad);background:var(--trap-soft)}
.quiz-score{display:inline-block;font:500 13px var(--font-mono);color:var(--ok);background:var(--fpga-soft);border-radius:999px;padding:3px 12px}