.mho-visual{display:block;max-width:360px;margin:20px auto;padding:12px;background:#f2f8fb;border:1px solid #d7e6ed;border-radius:20px;box-sizing:border-box;line-height:1.2}
.mho-visual svg{display:block;width:100%;max-height:360px;height:auto;overflow:visible}
.mho-visual-compact{width:100%;max-width:260px;margin:0 auto 12px;padding:4px;border:0;background:transparent}
.mho-visual-compact svg{max-height:100px}
.question-card:has(.mho-visual) h1{font-size:34px;line-height:1.3}
.answer-options:has(.visual-choice){grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
.answer-options .visual-choice{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px;min-width:0}
.multi-choice.visual-choice{position:relative;padding-top:34px}.multi-choice.visual-choice>input{position:absolute;left:14px;top:12px;width:22px;height:22px}
.multi-choice.visual-choice>span{width:100%}.visual-choice:has(input:checked){border-color:#348461;background:#edf8f0}
.visual-choice:focus-visible,.multi-choice:focus-within{outline:3px solid #2479bd;outline-offset:3px}
.demo-subject{color:#476777;font-size:14px;letter-spacing:.04em}.play-top{flex-wrap:wrap}
@media(max-width:480px){.mho-visual{padding:6px;margin:18px auto}.mho-visual-compact{margin:0 auto 8px}.answer-options:has(.visual-choice){grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px}.answer-options .visual-choice{padding:10px}.multi-choice.visual-choice{padding-top:38px}.question-card:has(.mho-visual) h1{font-size:clamp(23px,6.5vw,32px)}}

@media(max-width:480px){.answer-options:has(.visual-choice:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Wide diagrams retain readable labels, with a keyboard-accessible scroll area. */
.mho-visual.mho-diagram{max-width:760px;overflow:auto;overscroll-behavior-x:contain;text-align:left}.mho-diagram svg{max-height:none;overflow:visible}.mho-diagram-tip{display:block;font-size:13px;color:#476777;margin-bottom:8px}.mho-diagram:focus-visible{outline:3px solid #2479bd;outline-offset:3px}.mho-diagram.mho-visual-compact svg{min-width:0!important;max-height:160px}.mho-diagram.mho-visual-compact{overflow:visible}

/* Compact authored diagrams fit the question card on phones. */
.mho-visual.mho-small-diagram{overflow:visible;max-width:346px}.mho-small-diagram svg{min-width:0!important;max-width:100%;height:auto}