.hq-banner{background:var(--clay-faint);border:1px solid var(--clay-soft);color:var(--clay);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:500}.hq-feedback{background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:8px;align-items:center;gap:12px;padding:6px 12px;font-size:13px;display:flex}.hq-fb-status{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-weight:600}.hq-fb-status.ok{color:var(--correct)}.hq-fb-status.err{color:var(--wrong)}.hq-chord-progress{color:var(--ink-muted);font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:12px}.hq-ring{background:conic-gradient(var(--clay) calc(var(--p) * 360deg), var(--ink-faint) 0);border-radius:50%;width:22px;height:22px}.hq-choices{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px;display:grid}.hq-choice{background:var(--bg-raised);color:var(--ink);border:1px solid var(--ink-faint);letter-spacing:-.01em;cursor:pointer;box-shadow:var(--shadow-paper);border-radius:12px;min-height:72px;padding:18px 12px;font-family:ui-serif,New York,Charter,Georgia,serif;font-size:28px;font-weight:600;transition:border-color .12s,background .12s,transform 80ms}.hq-choice:hover:not(:disabled){border-color:var(--clay-soft);background:var(--bg-tint)}.hq-choice:active:not(:disabled){transform:scale(.98)}.hq-choice:disabled{cursor:default}.hq-choice.ok{background:color-mix(in srgb, var(--correct) 18%, var(--bg-raised));border-color:var(--correct);color:var(--correct)}.hq-choice.err{background:color-mix(in srgb, var(--wrong) 18%, var(--bg-raised));border-color:var(--wrong);color:var(--wrong)}.hq-choice.dim{opacity:.45}@media (width>=720px){.hq-choices{grid-template-columns:repeat(4,1fr)}}.hq-controls{justify-content:flex-end;align-items:center;gap:8px;margin-top:4px;display:flex}#hq-finish{background:var(--bg-raised);color:var(--ink-muted);border:1px solid var(--ink-faint);cursor:pointer;border-radius:8px;padding:5px 14px;font-family:inherit;font-size:13px;transition:border-color .15s,background .15s,color .15s}#hq-finish:hover{border-color:var(--clay-soft);background:var(--bg-tint);color:var(--ink)}.hq-icon-btn{background:var(--bg-raised);color:var(--ink-muted);border:1px solid var(--ink-faint);cursor:pointer;border-radius:8px;padding:5px 12px;font-family:inherit;font-size:16px;line-height:1;transition:border-color .15s,background .15s,color .15s}.hq-icon-btn:hover{background:var(--bg-tint);border-color:var(--clay-soft);color:var(--ink)}@media (width<=600px){.hq-choice{min-height:60px;padding:14px 8px;font-size:22px}}