.solve-diagram { width:min(100%,var(--solve-diagram-width,640px)); max-width:100%; margin:20px auto; padding:12px; box-sizing:border-box; border:1px solid var(--puk-theme-border, #dce5e1); border-radius:10px; background:var(--puk-theme-surface, #fff); color:var(--puk-theme-text, #20312b); white-space:normal; break-inside:avoid; }
.pp-question--diagrams { white-space:normal; line-height:1.65; }
.preview-text.preview-text--diagrams,.question-share-card__prompt.question-share-card__prompt--diagrams { white-space:normal; }
.pp-question--diagrams .pp-question__stem,.pp-question--diagrams .pp-question__part-copy,.pp-question--diagrams .pp-question__copy { white-space:pre-wrap; }
.pp-question--diagrams .pp-question__parts { display:grid; gap:16px; }
.pp-question--diagrams .pp-question__part-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; }
.pp-question--diagrams .pp-question__part-head > span { flex:none; font-size:.8em; color:var(--puk-theme-muted, #596b62); }
.solve-diagram__open { display:block; cursor:zoom-in; border-radius:4px; }
.solve-diagram__open:focus-visible { outline:3px solid var(--puk-theme-accent, #168950); outline-offset:5px; }
.solve-diagram img { display:block; width:100%; max-width:100%; height:auto; object-fit:contain; }
.solve-diagram figcaption { margin:10px 0 0; font:normal .9rem/1.5 system-ui,sans-serif; text-align:center; overflow-wrap:anywhere; }
.solve-diagram__error { font:normal .9rem/1.5 system-ui,sans-serif; color:var(--puk-theme-error, #8a361f); }
.solve-diagram__error[hidden] { display:none; }
.solve-diagram-dialog { width:min(1100px,95vw); max-height:94vh; padding:16px; border:1px solid var(--puk-theme-border, #cad8d0); border-radius:12px; background:var(--puk-theme-surface, #fff); color:var(--puk-theme-text, #17251e); box-sizing:border-box; }
.solve-diagram-dialog::backdrop { background:var(--puk-theme-overlay, rgba(12,23,17,.75)); }
.solve-diagram-dialog__close { display:block; margin:0 0 12px auto; min-height:44px; padding:8px 16px; border:1px solid var(--puk-theme-border, #b3c4b9); border-radius:8px; background:var(--puk-theme-surface, #fff); color:var(--puk-theme-text, #17251e); cursor:pointer; font:inherit; }
.solve-diagram-dialog img { display:block; max-width:100%; max-height:75vh; height:auto; width:auto; margin:0 auto; }
.solve-diagram-dialog p { font:normal 1rem/1.5 system-ui,sans-serif; text-align:center; }
@media print { .solve-diagram { border:0; padding:0; }.solve-diagram-dialog { display:none!important; } }