/* F8 Sounds — "Test yourself" quizzes and fill-in exercises. */
.quiz, .exercise { margin: 28px 0; padding: 16px 22px 20px; border-radius: var(--radius-lg); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.quiz::before, .exercise::before { display: block; margin: 2px 0 6px; font: 800 24px var(--display); letter-spacing: -.01em; }
.quiz::before { content: "Test yourself"; }
.exercise::before { content: "Exercise"; }
.q { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.q:first-of-type { border-top: 0; }
.q > p:first-child { margin: 0 0 10px; font-weight: 700; }
.q ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.q ol li { max-width: none; }
.opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; transition: transform var(--dur-base) var(--ease-spring); }
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt:active:not(:disabled) { transform: scale(.98); }
.opt:disabled { cursor: default; }
.opt .mk { display: none; }
.opt.right { border-color: var(--ok); background: var(--ok-bg); }
.opt.right .mk-ok { display: inline-flex; color: var(--ok); }
.opt.wrong { border-color: var(--bad); background: var(--bad-bg); }
.opt.wrong .mk-bad { display: inline-flex; color: var(--bad); }
.opt.dim { opacity: .55; }
.q-feedback { margin: 10px 0 0; font-weight: 700; }
.q-feedback:empty { display: none; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.explain { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 15px; }
.quiz-score { margin: 14px 0 0; font-size: 16px; }
.quiz-score:empty { display: none; }
.quiz-score b { margin: 0 6px 0 4px; font: 800 26px var(--display); letter-spacing: -.01em; vertical-align: -2px; }
.quiz-score .btn { margin-left: 8px; }
.exercise input { padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.exercise input:focus { border-color: var(--accent); }
.exercise input.in-right { border-color: var(--ok); }
.exercise input.in-wrong { border-color: var(--bad); }
.ex-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ex-msg { margin-left: 6px; font-weight: 700; }