.qg{--alice:var(--cyan);--bob:var(--magenta);--you:#7357d6;--win:#17803f;--lose:#c53030;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;margin-bottom:36px;padding:18px 22px 22px}@media (prefers-color-scheme:dark){.qg{--you:#a28bff;--win:#4cc38a;--lose:#f07575}}.qg-top{justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px;display:flex}.qg-chapters{flex-wrap:wrap;gap:6px;display:flex}.qg-chapters button{font:600 .82rem var(--sans);color:var(--muted);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:20px;padding:6px 12px}.qg-chapters button .n{width:18px;height:18px;font:600 .7rem var(--mono);background:var(--line);color:var(--ink);border-radius:50%;place-items:center;margin-right:4px;display:inline-grid}@media (hover:hover){.qg-chapters button:hover{border-color:var(--cyan);color:var(--cyan)}}.qg-chapters button[aria-selected=true]{color:var(--ink);border-color:var(--magenta)}.qg-chapters button[aria-selected=true] .n{background:var(--grad);color:#fff}.qg-chapters button.done .n{background:color-mix(in srgb, var(--cyan) 22%, transparent);color:var(--cyan)}.qg-explain-btn{font:600 .82rem var(--sans);color:var(--cyan);border:1px solid var(--cyan);cursor:pointer;background:0 0;border-radius:20px;flex:none;padding:6px 12px}@media (hover:hover){.qg-explain-btn:hover{background:color-mix(in srgb, var(--cyan) 10%, transparent)}}.qg-arena{grid-template-columns:minmax(280px,1fr) 1.15fr;align-items:start;gap:26px;display:grid}.qg-stage,.qg-panel{min-width:0}@media (width<=860px) and (orientation:portrait),(width<=860px) and (height>=501px){.qg-top{flex-wrap:wrap}.qg-chapters{flex:100%}.qg-explain-btn{margin-left:auto}.qg-arena{flex-direction:column;align-items:stretch;gap:0;display:flex}.qg-panel{display:contents}.qg-title{order:0}.qg-text{order:1}.qg-stage{order:2;margin:6px 0 4px}.qg-status{order:3}.qg-actions{order:4}.qg-score{order:5}.qg-circuit{order:6}}@media (orientation:landscape) and (height<=500px) and (width<=960px){.qg-arena{grid-template-columns:minmax(240px,1fr) 1.15fr;gap:18px}}.qg-title{margin-bottom:6px;font-size:1.2rem}.qg-text p{color:var(--muted);margin-bottom:8px;font-size:.97rem}.qg-text p b,.qg-text p strong{color:var(--ink)}.qg-text .math{font-family:var(--mono);color:var(--ink);font-size:.85rem;line-height:1.7}.qg-text table{border-collapse:collapse;font:.8rem var(--mono);margin:4px 0 10px}.qg-text th,.qg-text td{border-bottom:1px solid var(--line);text-align:left;color:var(--ink);padding:3px 8px 3px 0}.qg-text th{color:var(--muted);font-weight:600}.qg-text details.code{border:1px solid var(--line);background:color-mix(in srgb, var(--cyan) 4%, var(--card));border-radius:10px;margin:6px 0 10px;padding:8px 12px}.qg-text details.code summary{cursor:pointer;font:600 .9rem var(--sans);color:var(--cyan)}.qg-text details.code pre{font:.72rem/1.45 var(--mono);color:var(--ink);white-space:pre;margin:8px 0;overflow-x:auto}.qg-text details.code p{margin:0;font-size:.85rem}.qg-text blockquote{border-left:3px solid var(--magenta);color:var(--ink);font-family:var(--serif);margin:6px 0 10px;padding-left:10px;font-style:italic}.qg-status{min-height:1.6em;margin:10px 0;font-size:1.02rem}.qg-status strong{color:var(--magenta)}.qg-status .win{color:var(--win);font-weight:700}.qg-status .lose{color:var(--lose);font-weight:700}.qg-actions{flex-wrap:wrap;gap:8px;min-height:44px;display:flex}.qg-actions button{font:600 .93rem var(--sans);cursor:pointer;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:10px 16px}@media (hover:hover){.qg-actions button:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}}.qg-actions button.primary{background:var(--grad);color:#fff;border-color:#0000}@media (hover:hover){.qg-actions button.primary:hover:not(:disabled){color:#fff;filter:brightness(1.08)}}.qg-actions button.quantum{border-color:var(--magenta)}.qg-actions button.current{border-color:var(--magenta);color:var(--magenta)}.qg-actions button:disabled{opacity:.45;cursor:default}.qg-actions a{align-self:center;font-size:.9rem}.qg-score{font:.8rem var(--mono);color:var(--muted);letter-spacing:.04em;margin-top:12px}.qg-term{font:inherit;color:inherit;cursor:help;text-decoration:underline dotted color-mix(in srgb, var(--cyan) 70%, transparent);text-underline-offset:3px;background:0 0;border:0;padding:0}@media (hover:hover){.qg-term:hover{color:var(--cyan)}}.qg-circuit{margin:6px 0 2px;overflow-x:auto}.qg-circuit:empty{display:none}.qg-circuit-svg{width:100%;height:auto;display:block}.qg-circuit-svg .wl{font:11px var(--mono);fill:var(--muted)}.qg-circuit-svg .wire{stroke:var(--muted);stroke-width:1.2px;opacity:.6}.qg-circuit-svg .barrier{stroke:var(--muted);stroke-width:1px;stroke-dasharray:3 3;opacity:.6}.qg-circuit-svg .gate rect{fill:var(--card);stroke:var(--muted);stroke-width:1.8px}.qg-circuit-svg .gate text{font:700 13px var(--mono);fill:var(--ink)}.qg-circuit-svg .gate text.ang{font:600 10px var(--mono)}.qg-circuit-svg .gate .link,.qg-circuit-svg .gate path,.qg-circuit-svg .gate line{stroke:var(--muted);stroke-width:1.8px;fill:none}.qg-circuit-svg .gate .dot{fill:var(--muted)}.qg-circuit-svg .gate .plus{fill:var(--card);stroke:var(--muted);stroke-width:1.8px}.qg-circuit-svg .meter rect,.qg-circuit-svg .meter path,.qg-circuit-svg .meter line{stroke:var(--ink)}.qg-circuit-svg .tone-alice rect,.qg-circuit-svg .tone-alice .plus,.qg-circuit-svg .tone-alice .link{stroke:var(--alice)}.qg-circuit-svg .tone-alice .dot,.qg-circuit-svg .tone-alice text{fill:var(--alice)}.qg-circuit-svg .tone-bob rect,.qg-circuit-svg .tone-bob .plus,.qg-circuit-svg .tone-bob .link,.qg-circuit-svg .tone-bob path{stroke:var(--bob)}.qg-circuit-svg .tone-bob .dot,.qg-circuit-svg .tone-bob text{fill:var(--bob)}.qg-circuit-svg .tone-you rect{stroke:var(--you)}.qg-circuit-svg .tone-you text{fill:var(--you)}.qg-explain{border:1px solid var(--line);background:var(--card);width:100%;max-width:min(520px,100vw - 32px);max-height:calc(100vh - 48px);color:var(--ink);border-radius:16px;margin:auto;padding:24px 26px 20px;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.qg-explain::backdrop{background:#14151d73}.qg-close{border:1px solid var(--line);background:var(--card);width:32px;height:32px;color:var(--muted);cursor:pointer;border-radius:50%;font-size:1.2rem;position:absolute;top:10px;right:12px}@media (hover:hover){.qg-close:hover{color:var(--ink);border-color:var(--cyan)}}.qg-explain h3{margin:6px 36px 10px 0;font-size:1.15rem}.qg-explain h3:focus{outline:none}.qg-explain p{color:var(--ink);margin-bottom:12px;font-size:.97rem}.qg-explain .qg-more{font:.85rem var(--sans);margin-bottom:0;line-height:1.9}.qg-explain .qg-back{font:.8rem var(--mono);color:var(--cyan);cursor:pointer;background:0 0;border:0;padding:0}.qg-explain .qg-terms{columns:2 200px;gap:18px;padding:0;list-style:none}.qg-explain .qg-terms li{break-inside:avoid;margin:0 0 8px}.qg-explain .qg-terms .qg-term{text-align:left}.qg-noscript{color:var(--muted)}@media (width<=480px){.qg{padding:14px}}@media (pointer:coarse){.qg-chapters button,.qg-explain-btn,.qg-actions button,.qg-explain .qg-back{min-height:44px}.qg-close{width:44px;height:44px;top:6px;right:8px}.qg-explain .qg-terms .qg-term{min-height:44px}}