.tq{--t1:#e23b52;--t2:#2fa36b;--t3:#3b82c4;--t4:#9b59b6;background:var(--panel);border:1px solid var(--border);border-radius:12px;margin:0 0 2rem;padding:1.5rem}.tq h2{margin:0 0 .6rem;font-size:1.25rem}.tq-lead{color:var(--muted);margin:0 0 .75rem}.tq-mode{color:var(--text);margin:0 0 1.1rem;font-size:.9rem}.tq-start,.tq-restart{font:inherit;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:var(--accent-contrast);border-radius:999px;padding:.6rem 1.4rem;font-weight:700;transition:opacity .15s}.tq-start:hover,.tq-restart:hover{opacity:.88}.tq-start:disabled{opacity:.5;cursor:not-allowed}.tq-restart{background:var(--surface);color:var(--accent);margin-top:.5rem}.tq-bar{background:var(--surface-alt);border-radius:999px;height:6px;overflow:hidden}.tq-bar-fill{background:var(--accent);width:0;height:100%;transition:width .25s;display:block}.tq-count{color:var(--muted);margin:.5rem 0 1rem;font-size:.85rem;font-weight:600}.tq-of{opacity:.6}.tq-stage{border:1px solid var(--border);background:var(--surface);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;min-height:6rem;margin:.5rem 0 1rem;padding:1.25rem;display:flex}.tq-play{font:inherit;cursor:pointer;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);border-radius:999px;align-items:center;gap:.5rem;padding:.7rem 1.4rem;font-weight:700;transition:background .15s;display:inline-flex}.tq-play:hover{background:color-mix(in srgb, var(--accent) 20%, var(--surface))}.tq-reveal{text-align:center;flex-direction:column;gap:.25rem;display:flex}.tq-hanzi{font-size:3rem;font-weight:800;line-height:1.1}.tq-pinyin{color:var(--accent);font-size:1.2rem;font-weight:700}.tq-pick{color:var(--muted);margin:0 0 .6rem;font-size:.9rem}.tq-opts{grid-template-columns:repeat(2,1fr);gap:.5rem;display:grid}.tq-opt{font:inherit;text-align:left;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;align-items:center;gap:.55rem;padding:.75rem 1rem;font-weight:700;transition:border-color .15s,background .15s;display:flex}.tq-opt-num{background:var(--surface-alt);width:1.6rem;height:1.6rem;color:var(--muted);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;display:inline-flex}.tq-opt[data-tone="1"] .tq-opt-num{background:color-mix(in srgb, var(--t1) 18%, var(--surface));color:var(--t1)}.tq-opt[data-tone="2"] .tq-opt-num{background:color-mix(in srgb, var(--t2) 18%, var(--surface));color:var(--t2)}.tq-opt[data-tone="3"] .tq-opt-num{background:color-mix(in srgb, var(--t3) 18%, var(--surface));color:var(--t3)}.tq-opt[data-tone="4"] .tq-opt-num{background:color-mix(in srgb, var(--t4) 18%, var(--surface));color:var(--t4)}@media (hover:hover) and (pointer:fine){.tq-opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}}.tq-opt:focus-visible{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);outline:none}.tq-opt:disabled{cursor:default}.tq-opt.correct{border-color:var(--ok-text);background:color-mix(in srgb, var(--ok-text) 12%, var(--surface));color:var(--ok-text)}.tq-opt.wrong{background:color-mix(in srgb, #c0392b 10%, var(--surface));color:#b43226;border-color:#c0392b}.tq-feedback{border:1px solid var(--border);background:var(--surface-alt);border-radius:8px;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem;padding:.85rem .95rem;line-height:1.55;display:flex}.tq-feedback.is-correct{border-color:var(--ok-text)}.tq-feedback.is-wrong{border-color:#c0392b}.tq-ans{color:var(--muted);font-weight:600}.tq-fb-text{flex-wrap:wrap;align-items:center;gap:.4rem;display:inline-flex}.tq-nextwrap{margin-left:auto}.tq-next{background:var(--accent);color:var(--accent-contrast);font:inherit;cursor:pointer;border:0;border-radius:7px;padding:.5rem .9rem;font-weight:700}.tq-next:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent);outline-offset:2px}.tq-score{margin:.5rem 0 1rem;font-size:2rem;font-weight:800}.tq-score .tq-of{font-size:1.2rem}.tq-note{color:var(--muted);margin:0 0 1rem;font-size:.8rem}