.qz{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:2vh 1rem;--ok: #1fa971;--ko: #cf3f76}.qz[hidden]{display:none}.qz-backdrop{position:absolute;inset:0;background:#0e0b089e;backdrop-filter:blur(6px)}body.qz-open{overflow:hidden}.qz-panel{position:relative;width:min(680px,100%);max-height:96vh;overflow:auto;background:var(--paper, #f6f2e9);border-radius:18px;box-shadow:0 30px 80px #00000073;color:var(--ink)}.qz-head{position:relative;min-height:200px;padding:.9rem 1rem 3rem;color:#fff;background:radial-gradient(120% 140% at 85% 10%,color-mix(in srgb,var(--qz-accent) 55%,#fff) 0%,var(--qz-accent) 45%,color-mix(in srgb,var(--qz-accent) 55%,#000) 100%);background-size:cover;background-position:center top;overflow:hidden}.qz-ghost{position:absolute;right:-20px;top:10px;width:180px;height:180px;opacity:.16;transform:rotate(-14deg);filter:grayscale(.3)}.qz-veil{position:absolute;inset:0;background:linear-gradient(180deg,#0e0b088c,#0e0b0800 40%,#0e0b088c);pointer-events:none}.qz-hud,.qz-count{position:relative;display:flex;align-items:center;gap:.5rem}.qz-pill{background:#0e0b0899;border-radius:999px;color:#fff;height:34px;display:inline-flex;align-items:center;padding:0 .75rem;font-weight:700;border:0}.qz-close{width:34px;padding:0;justify-content:center;cursor:pointer}.qz-segs:empty{visibility:hidden}.qz-segs{flex:1;gap:4px;padding:0 .6rem}.qz-segs i{flex:1;height:6px;border-radius:3px;background:#ffffff38}.qz-segs i.cur{background:var(--accent, #e8410f)}.qz-segs i.ok{background:var(--ok)}.qz-segs i.ko{background:var(--ko)}.qz-score{position:relative;font-variant-numeric:tabular-nums}.qz-gain{position:absolute;right:8px;top:-4px;font-size:.8rem;color:#b6f5d6;opacity:0}.qz-gain.pop{animation:qz-up .9s ease-out}@keyframes qz-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-18px)}}.qz-count{margin-top:auto;position:absolute;left:1rem;right:1rem;bottom:2.2rem;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.6)}.qz-icon{width:28px;height:28px;border-radius:7px;background:#fff}.qz-streak{margin-left:auto;background:#0e0b0899;border-radius:999px;padding:.2rem .6rem}.qz-streak.hot{box-shadow:0 0 0 2px #ff9a3c,0 0 18px #ff6a1f}.qz-streak i{font-style:normal;margin-left:.35rem;color:#ffd27a}.qz-body{position:relative;margin-top:-26px;padding:0 1.1rem 1.4rem}.qz-body[hidden]{display:none}.qz-kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--ink-2);margin:0}[data-qz-phase=lobby]{background:var(--paper, #f6f2e9);border-radius:16px 16px 0 0;padding-top:1.1rem}.qz-title{font-family:var(--font-display);font-size:2rem;letter-spacing:-.02em;margin:.2rem 0 .8rem}.qz-mt{margin-top:1.1rem}.qz-seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}.qz-seg button{border:0;background:transparent;padding:.45rem 1rem;font-weight:700;cursor:pointer;color:var(--ink)}.qz-seg button.on{background:var(--ink);color:var(--paper, #fff)}.qz-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.5rem}.qz-level{text-align:left;border:1.5px solid var(--line);background:var(--paper-card, #fff);border-radius:12px;padding:.75rem;cursor:pointer;display:flex;flex-direction:column;gap:.25rem;color:var(--ink)}.qz-level b{font-family:var(--font-display);font-size:1.1rem}.qz-level span{font-size:.8rem;color:var(--ink-2)}.qz-level.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}.qz-start,.qz-secondary{margin-top:1rem;width:100%;padding:.9rem;border-radius:12px;font-weight:800;font-size:1rem;cursor:pointer}.qz-start{background:var(--accent);color:#fff;border:0}.qz-start[hidden]{display:none}.qz-secondary{background:transparent;border:1.5px solid var(--ink);color:var(--ink);margin-top:.6rem}.qz-note{margin:.7rem 0 0;font-size:.82rem;color:var(--ink-2);text-align:center}.qz-card{background:var(--paper-card, #fff);border-radius:16px;padding:.9rem 1rem 1rem;box-shadow:0 10px 30px #0000001f}.qz-timer{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:.8rem}.qz-timer i{display:block;height:100%;background:var(--ok);transform-origin:left}.qz-timer i.ko{background:var(--ko)}.qz-cat{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:.15rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--c, var(--accent)) 16%,transparent);color:color-mix(in srgb,var(--c, var(--accent)) 75%,#000)}.qz-label{margin:.55rem 0 .15rem;color:var(--ink-2);font-size:.88rem}.qz-prompt{margin:0;font-family:var(--font-display);font-size:1.6rem;line-height:1.15;letter-spacing:-.01em}.qz-choices{display:grid;gap:.6rem;margin-top:.9rem}.qz-choices.grid{grid-template-columns:1fr 1fr}.qz-choice{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;padding:.6rem .8rem;border:1.5px solid var(--line);border-radius:14px;background:var(--paper-card, #fff);cursor:pointer;transition:transform .1s ease,border-color .15s ease}.qz-choice:hover{border-color:var(--ink)}.qz-choice.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,#fff);animation:qz-pop .25s ease-out}.qz-choice.wrong{border-color:var(--ko);background:color-mix(in srgb,var(--ko) 10%,#fff);animation:qz-shake .35s ease-in-out}.qz-choice.dim{opacity:.45}.qz-n{position:absolute;left:.6rem;top:.45rem;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-2)}@keyframes qz-pop{50%{transform:scale(1.04)}}@keyframes qz-shake{20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.qz-caps{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3rem}.qz-caps kbd,.qz-held kbd{font-family:var(--font-mono);font-weight:700;font-size:1.05rem;min-width:2.1em;padding:.32em .55em;border:1.5px solid var(--ink);border-bottom-width:3px;border-radius:7px;background:#fff;color:var(--ink);text-align:center}.qz-caps .qz-then{width:.5rem}.qz-caps .qz-or{font-size:.8rem;color:var(--ink-2)}.qz-held{display:flex;justify-content:center;align-items:center;gap:.4rem;margin-top:.9rem}.qz-held[hidden]{display:none}.qz-held kbd.q{border-style:dashed;color:var(--accent)}.qz-held .qz-plus{color:var(--ink-2);font-weight:700}.qz-board{margin-top:.9rem}.qz-board[hidden]{display:none}.qz-kb{display:flex;gap:10px;align-items:flex-end;justify-content:center;--u: clamp(14px, 3.3vw, 30px)}.qz-kb[hidden],.qz-padwrap[hidden]{display:none}.qz-kb .qz-row{display:flex;gap:2px;margin-bottom:2px}.qz-kb .qz-arrows .qz-row{justify-content:center}.qz-kb .qz-key{width:calc(var(--w) * var(--u) + (var(--w) - 1) * 2px);height:calc(var(--u) * 1.05);padding:0;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:4px;background:#fff;color:var(--ink);font-size:calc(var(--u) * .42);font-weight:700;overflow:hidden;white-space:nowrap}.qz-kb .qz-key.sm{font-size:calc(var(--u) * .3)}.qz-board.live .qz-kb .qz-key,.qz-board.live .pbtn{cursor:pointer}.qz-board.live .qz-kb .qz-key:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,#fff)}.qz-board.revealed .qz-kb .qz-key{opacity:.45}.qz-kb .qz-key.qz-on{opacity:1!important;background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 0 12px color-mix(in srgb,var(--ok) 70%,transparent)}.qz-kb .qz-key.qz-bad{opacity:1!important;border:2px solid var(--ko);color:var(--ko)}.qz-padwrap{display:flex;justify-content:center}.qz-padsvg{width:min(100%,420px);height:auto;max-height:260px}.qz-board.revealed .qz-padsvg .pbtn{opacity:.5}.qz-padsvg .pbtn.qz-on{opacity:1!important;--pad-cap: var(--ok);--pad-glyph: #fff;filter:drop-shadow(0 0 6px var(--ok))}.qz-padsvg .pbtn.qz-bad{opacity:1!important;--pad-cap: var(--ko);--pad-glyph: #fff}.qz-board.live .qz-padsvg .pbtn:hover{--pad-cap: color-mix(in srgb, var(--accent) 35%, #fff)}.qz-banner{margin:.9rem 0 0;padding:.6rem .8rem;border-radius:10px;font-weight:700;text-align:center}.qz-banner[hidden]{display:none}.qz-banner.ok{background:color-mix(in srgb,var(--ok) 14%,#fff);color:color-mix(in srgb,var(--ok) 80%,#000)}.qz-banner.ko{background:color-mix(in srgb,var(--ko) 12%,#fff);color:color-mix(in srgb,var(--ko) 85%,#000)}.qz-end{background:var(--paper, #f6f2e9);border-radius:16px 16px 0 0;padding-top:1.1rem;text-align:center}.qz-ring{position:relative;width:200px;margin:.6rem auto 0}.qz-ring svg{width:200px;height:200px}.qz-ring-track{fill:none;stroke:var(--line);stroke-width:12}.qz-ring .qz-arc{fill:none;stroke-width:12;stroke-linecap:round}.qz-ring .qz-arc.right{stroke:var(--ok)}.qz-ring .qz-arc.wrong{stroke:var(--ko)}.qz-ring .qz-arc.timeout{stroke:#9a9488}.qz-ring-in{position:absolute;inset:0;display:grid;place-content:center}.qz-ring-in b{font-family:var(--font-display);font-size:2.6rem;line-height:1}.qz-ring-in span{color:var(--accent);font-weight:800;margin-top:.3rem}.qz-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}.qz-tiles div{background:var(--paper-card, #fff);border:1.5px solid var(--line);border-radius:12px;padding:.7rem;display:flex;flex-direction:column}.qz-tiles b{font-size:1.3rem}.qz-tiles span{font-size:.78rem;color:var(--ink-2)}.qz-misses{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.5rem;text-align:left}.qz-misses li{background:var(--paper-card, #fff);border:1.5px solid var(--line);border-radius:12px;padding:.7rem .8rem;display:grid;gap:.35rem}.qz-misses .qz-caps{justify-content:flex-start}.qz-misses kbd{font-size:.9rem}.qz-misses .qz-picked{font-size:.8rem;color:var(--ko)}.qz-misses .qz-perfect{text-align:center;color:var(--ok);font-weight:700}.qz-actions{margin-top:.6rem}@media(max-width:640px){.qz{padding:0}.qz-panel{width:100%;height:100dvh;max-height:none;border-radius:0}.qz-head{min-height:30vh;padding-top:calc(.8rem + env(safe-area-inset-top))}.qz-levels{grid-template-columns:1fr}.qz-prompt{font-size:1.35rem}.qz-choice{min-height:56px}}@media(prefers-reduced-motion:reduce){.qz-choice,.qz-gain.pop{animation:none!important;transition:none}}