.keyholes-practice{font-size:1rem}.keyholes-stage{--muted:var(--ink);background:var(--mint);container-type:inline-size}.keyholes-geometry{margin:8px 0 16px}.keyholes-geometry p{margin:4px 0;font-size:.875rem}.keyholes-practice .board-setup select{height:max(52px,1.5em + 26px);line-height:1.5}.keyholes-scene{width:100%;max-width:420px;margin:16px auto 20px}.keyholes-solution{width:100%;max-width:260px;margin:16px auto 20px}.keyholes-comparison{text-align:start;max-width:520px;margin:16px auto 24px}.keyholes-comparison>summary{cursor:pointer;width:fit-content;max-width:100%;min-height:44px;color:var(--accent);align-items:center;gap:10px;padding-block:10px;font-weight:650;line-height:1.5;display:flex}.keyholes-comparison>summary:after{margin-inline-start:0}.keyholes-comparison>summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}.keyholes-comparison>summary:hover{text-underline-offset:4px;text-decoration:underline}.keyholes-comparison p{margin:0;line-height:1.6}.keyholes-comparison .keyholes-comparison-result{margin-top:8px}.keyholes-comparison figure{gap:12px;margin:20px 0;display:grid}.keyholes-comparison figcaption{text-align:center;font-variant-numeric:tabular-nums;gap:4px;font-size:.875rem;display:grid}.keyholes-comparison-count{font-weight:600}.keyholes-comparison svg{width:100%;max-width:240px;height:auto;margin-inline:auto;display:block}.keyholes-comparison .keyholes-comparison-legend{font-size:.875rem}.keyholes-practice .spatial-review-explanation-content:has(.keyhole-comparison-diagram){align-items:start}.keyholes-practice .spatial-review-solution:has(>.keyhole-comparison-diagram){width:100%;max-width:280px;margin-inline:auto}.keyholes-practice .keyholes-scene:has([data-spatial-explorer]),.keyholes-solution:has([data-spatial-explorer]){max-width:520px}.keyholes-scene svg,.keyholes-solution svg,.keyholes-option svg{width:100%;height:auto;display:block}.keyholes-practice[data-phase=setup] .keyholes-scene{max-width:360px;margin-block:12px}.keyholes-practice[data-phase=setup] .keyholes-geometry{margin-top:20px}.keyholes-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-block:20px;display:grid}.keyholes-option{border:1px solid var(--control-border);border-radius:var(--control-radius);background:var(--card);min-width:0;min-height:52px;color:var(--ink);font:inherit;text-align:center;cursor:pointer;touch-action:manipulation;flex-direction:column;align-items:stretch;padding:12px 8px;font-weight:650;line-height:1.5;display:flex}.keyholes-option-number{font-variant-numeric:tabular-nums;align-self:flex-start;padding-inline:4px}.keyholes-option svg{max-width:140px;margin-inline:auto}.keyholes-option-marker{overflow-wrap:anywhere;margin-top:auto;font-size:.875rem;font-weight:600}.keyholes-option-marker:empty{display:none}.keyholes-option[data-answer-state]{padding:11px 7px}.keyholes-option [data-answer-mark]{align-self:center;margin-top:6px}.keyholes-option:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.keyholes-option:disabled{opacity:1;cursor:default}.keyholes-option:active:not(:disabled){background:var(--mint)}.keyholes-stage #keyholes-feedback:focus{outline:none}.keyholes-stage .board-actions>.btn{min-height:52px}@media (hover:hover){.keyholes-option:hover:not(:disabled){background:var(--accent-soft)}}.keyholes-options[data-choices="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}@media (width<=37.5em){.keyholes-options{grid-template-columns:repeat(2,minmax(0,1fr))}.keyholes-options[data-choices="5"]{grid-template-columns:repeat(4,minmax(0,1fr))}.keyholes-options[data-choices="5"]>*{grid-column:span 2}.keyholes-options[data-choices="5"]>:nth-child(5){grid-column:2/span 2}}@container (width<=9rem){.keyholes-options,.keyholes-options[data-choices="5"]{grid-template-columns:minmax(0,1fr)}.keyholes-options[data-choices="5"]>:nth-child(n){grid-column:auto}}@media (width<=30em){.keyholes-practice[data-phase=setup] .keyholes-scene{max-width:220px}}@media (width<=22.5em){.keyholes-options{gap:8px}.keyholes-option{padding-inline:6px}.keyholes-option[data-answer-state]{padding-inline:5px}}@media (forced-colors:active){.keyholes-stage{border:1px solid canvastext}.keyholes-option:focus-visible{outline-color:highlight}.keyholes-scene svg,.keyholes-option svg{forced-color-adjust:none;background:#fafaf6}}