.question-infographic{box-sizing:border-box;width:100%;max-width:650px;margin:24px auto;padding:24px;border:1px solid #dbe4ee;border-radius:14px;background:#fff;box-shadow:0 4px 18px #203e5508}
.question-infographic h2[id]{font-size:1.15rem;line-height:1.45;margin:0 0 16px;color:#233f56}
.question-infographic figure{margin:0}
/* The whole card shares the preview width, including its heading and actions. */
.question-infographic img{display:block;width:100%;height:auto;border-radius:8px}
.question-infographic figcaption{margin-top:12px;color:#50677f;font-size:.875rem;line-height:1.6}
.question-infographic .infographic-actions{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.question-infographic details{margin-top:16px;border-top:1px solid #dbe4ee;padding-top:4px;overflow-wrap:anywhere}
.question-infographic summary{cursor:pointer;font-weight:600;padding:12px 0;line-height:1.5;color:#264c6a;font-size:.875rem}
.question-infographic .infographic-transcript{font-size:.9375rem;line-height:1.7;padding-top:4px}
.question-infographic .infographic-transcript p:last-child{margin-bottom:0}
.lecture-reading .lecture-infographics{width:100%;max-width:68ch}
.question-article .question-infographics{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;width:100%}
.question-article .question-infographics .question-infographic{margin:24px 0}
.question-article .question-infographic h2[id],.question-article .question-infographic figcaption,.question-article .question-infographic summary{text-align:center}
.question-article .question-infographic .infographic-actions{justify-content:center}
.question-article .question-infographic .infographic-transcript{text-align:left}
.lecture-reading .question-infographic h2[id],.lecture-reading .question-infographic figcaption,.lecture-reading .question-infographic summary{text-align:center}
.lecture-reading .question-infographic .infographic-actions{justify-content:center}
.lecture-reading .question-infographic .infographic-transcript{text-align:left}
@media(max-width:600px){.question-infographic{padding:12px}}
.question-infographic .infographic-preview{display:block;width:100%;padding:0;border:1px solid #e4ebf2;border-radius:10px;overflow:hidden;background:#f4f6f6;cursor:zoom-in;box-sizing:border-box}
.question-infographic .infographic-action{min-height:44px;padding:10px 16px;border:1px solid #cddae7;border-radius:8px;background:#edf3f8;color:#233f56;font:inherit;font-weight:600;cursor:pointer}
.question-infographic button:focus-visible{outline:3px solid #264c6a;outline-offset:3px}
.infographic-viewer{box-sizing:border-box;width:calc(100vw - 32px);max-width:1600px;max-height:92vh;max-height:92dvh;padding:0;border:1px solid #cddae7;border-radius:12px;background:#fff;color:#233f56}
.infographic-viewer::backdrop{background:rgba(15,30,44,.8)}
.infographic-viewer[open]{display:flex;flex-direction:column}
.infographic-viewer__toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid #dbe4ee}
.infographic-viewer__toolbar strong{margin-right:auto}
.infographic-viewer__image{min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px}
.question-infographic .infographic-viewer img{width:100%;height:auto;max-width:none}
@media(max-width:600px){.infographic-viewer__toolbar strong{flex-basis:100%}.infographic-viewer__toolbar{padding:8px}.infographic-viewer__image{padding:4px}}