.mq{--mq-sea: color-mix(in srgb, var(--accent) 16%, var(--surface));--mq-land: var(--surface);--mq-other: color-mix(in srgb, var(--muted) 25%, var(--surface));--mq-line: var(--cell-strong);--mq-r1: var(--good);--mq-r2: var(--tile-present);--mq-r3: var(--bad);--mq-r0: var(--danger);width:100%;max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:10px}.mq p{margin:0}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .mq{--mq-sea: color-mix(in srgb, var(--accent) 10%, var(--bg));--mq-land: color-mix(in srgb, var(--text) 24%, var(--surface));--mq-other: color-mix(in srgb, var(--text) 9%, var(--surface))}}:root[data-theme=dark] .mq{--mq-sea: color-mix(in srgb, var(--accent) 10%, var(--bg));--mq-land: color-mix(in srgb, var(--text) 24%, var(--surface));--mq-other: color-mix(in srgb, var(--text) 9%, var(--surface))}.mq .mq-loading{text-align:center;padding:40px 0}.mq .mq-prompt{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 10px;min-height:2.6em;padding:8px 12px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.mq .mq-ask{color:var(--muted);font-weight:600}.mq .mq-name{font-size:clamp(1.25rem,4.6vw,1.7rem);line-height:1.2;color:var(--text)}.mq .mq-progress{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden}.mq .mq-progress[hidden]{display:none}.mq .mq-progress-fill{height:100%;width:0;background:var(--accent);transition:width .3s}.mq .mq-map{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--mq-sea)}.mq .mq-svg{display:block;width:100%;height:auto;max-height:72vh;touch-action:none;user-select:none;-webkit-user-select:none;cursor:default}.mq .mq-svg.mq-zoomed{cursor:grab}.mq .mq-svg.mq-panning{cursor:grabbing}.mq .mq-sea{fill:var(--mq-sea)}.mq .mq-bg{fill:var(--mq-other);stroke:color-mix(in srgb,var(--mq-line) 45%,transparent);stroke-width:.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}.mq .mq-c{fill:var(--mq-land);stroke:var(--mq-line);stroke-width:.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;cursor:pointer;transition:fill .15s}.mq .mq-dot{fill:color-mix(in srgb,var(--mq-land) 55%,transparent);stroke:var(--mq-line);stroke-width:1.4;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .15s}@media (hover: hover){.mq .mq-c:hover,.mq .mq-dot:hover{fill:var(--accent-soft)}}.mq .mq-c.mq-r1,.mq .mq-dot.mq-r1{fill:color-mix(in srgb,var(--mq-r1) 70%,var(--surface))}.mq .mq-c.mq-r2,.mq .mq-dot.mq-r2{fill:color-mix(in srgb,var(--mq-r2) 70%,var(--surface))}.mq .mq-c.mq-r3,.mq .mq-dot.mq-r3{fill:color-mix(in srgb,var(--mq-r3) 70%,var(--surface))}.mq .mq-c.mq-r0,.mq .mq-dot.mq-r0{fill:color-mix(in srgb,var(--mq-r0) 75%,var(--surface))}.mq .mq-c.mq-target,.mq .mq-dot.mq-target{fill:var(--accent)}.mq .mq-dot.mq-target{stroke-width:3}.mq .mq-c.mq-pick,.mq .mq-dot.mq-pick{fill:var(--mq-r1)}.mq .mq-c.mq-wrongpick,.mq .mq-dot.mq-wrongpick{fill:var(--mq-r0)}.mq .mq-reveal{animation:mq-blink .5s ease-in-out infinite alternate}@keyframes mq-blink{0%{fill-opacity:1}to{fill-opacity:.25}}.mq .mq-label{fill:var(--text);stroke:var(--surface);paint-order:stroke;stroke-linejoin:round;font-weight:700;font-family:var(--font);pointer-events:none}.mq .mq-zoom{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:6px}.mq .mq-zbtn{width:38px;height:38px;display:grid;place-items:center;padding:0;font:700 1.2rem/1 var(--font);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);cursor:pointer;touch-action:manipulation}.mq .mq-zbtn:hover{background:var(--surface-2)}.mq .mq-zbtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.mq .mq-feedback{min-height:1.4em;text-align:center;font-weight:600}.mq .mq-fb-good{color:var(--good)}.mq .mq-fb-bad{color:var(--bad)}.mq .mq-fb-info{color:var(--text)}.mq .mq-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.mq .mq-row-end{justify-content:flex-end;margin-top:8px}.mq .mq-next{min-width:140px}.mq .mq-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mq .mq-opt{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;text-align:left;font:inherit;color:var(--text);background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;touch-action:manipulation;overflow-wrap:anywhere}.mq .mq-opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}.mq .mq-opt:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.mq .mq-opt:disabled{cursor:default}.mq .mq-optkey{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:var(--surface-2);color:var(--muted);font-weight:800;font-size:.85rem}.mq .mq-opt-good{border-color:var(--good);background:color-mix(in srgb,var(--good) 16%,var(--surface))}.mq .mq-opt-bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,var(--surface))}@media (max-width: 300px){.mq .mq-opts{grid-template-columns:1fr}}@media (max-width: 520px){.mq .mq-zbtn{width:32px;height:32px;font-size:1.05rem}.mq .mq-zoom{right:6px;top:6px;gap:4px}.mq .mq-opt{min-height:46px;padding:6px 8px;gap:8px;font-size:.95rem}}.mq .mq-type{display:flex;flex-wrap:wrap;gap:8px}.mq .mq-input{flex:1 1 200px;min-width:0;min-height:44px;padding:8px 12px;font:inherit;font-size:1.05rem;color:var(--text);background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm)}.mq .mq-input:focus{outline:none;border-color:var(--accent)}.mq .mq-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px}.mq .mq-key{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--mq-line);margin-left:6px}.mq .mq-k1{background:color-mix(in srgb,var(--mq-r1) 70%,var(--surface))}.mq .mq-k2{background:color-mix(in srgb,var(--mq-r2) 70%,var(--surface))}.mq .mq-k3{background:color-mix(in srgb,var(--mq-r3) 70%,var(--surface))}.mq .mq-k0{background:color-mix(in srgb,var(--mq-r0) 75%,var(--surface))}.mq .mq-missed{text-align:center}.mq .mq-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.mq .mq-chip{font:inherit;font-size:.85rem;padding:5px 10px;border-radius:999px;cursor:pointer;touch-action:manipulation;color:var(--text);background:var(--surface);border:1px solid var(--border)}.mq .mq-chip:hover{border-color:var(--accent)}.mq .mq-chip.mq-chip-on{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}@media (prefers-reduced-motion: reduce){.mq .mq-c,.mq .mq-dot,.mq .mq-progress-fill{transition:none}.mq .mq-reveal{animation:none;fill-opacity:.6}}