.diagram-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.diagram-section-head h2{font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted);margin:0}
.diagram-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.diagram-card{display:block;border:1px solid var(--border);border-radius:6px;background:#fff;overflow:hidden;transition:border-color .15s}
.diagram-card:hover{border-color:#9cb5a4}.diagram-card:focus-visible{outline-offset:3px}
.diagram-thumb{background:#fff;padding:10px;aspect-ratio:800/460;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);overflow:hidden}
.diagram-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.diagram-card-copy{padding:13px 15px}.diagram-card h3{font-size:14px;font-weight:550;letter-spacing:-.2px;line-height:1.4;margin:0 0 5px}
.diagram-card-copy>span{font-size:11px;color:var(--muted)}.diagram-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.diagram-gallery .diagram-card-copy{padding:16px 18px}.diagram-gallery .diagram-card h3{font-size:16px}
.lesson-diagrams{margin:0 0 30px}.lesson-diagrams .diagram-strip{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.lesson-diagrams .diagram-card{max-width:360px}.lesson-diagrams .diagram-thumb{max-height:155px}
.diagram-back{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;margin-bottom:28px}
.diagram-study{border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#fff}
.diagram-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border)}
#diagram-mode{margin-left:auto;font-size:11px;color:var(--muted)}.diagram-scroll{overflow-x:auto;padding:18px 12px}
#diagram-svg svg{width:100%;height:auto;display:block;max-height:none}#diagram-svg.diagram-enlarged{min-width:1100px}
#diagram-svg.labels-hidden text:not(.diagram-heading),#diagram-svg.labels-hidden .diagram-leader{visibility:hidden}
.diagram-loading{padding:60px 20px;text-align:center;font-size:14px}.diagram-prompt{padding:17px 22px;background:#f7f9f6;border-top:1px solid var(--border)}
.diagram-prompt strong{font-size:12px;font-weight:600}.diagram-prompt p{font-size:13px;margin-top:5px;line-height:1.7}
.diagram-explanation{border-bottom:1px solid var(--border);padding:18px 0;margin-top:6px}.diagram-explanation summary{cursor:pointer;font-size:12px;color:var(--muted)}
.diagram-explanation p{font-size:13px;line-height:1.8;margin:14px 0 8px}.diagram-explanation small{font-size:11px;color:var(--muted)}
.diagram-paging{display:flex;justify-content:space-between;gap:20px;margin-top:23px}
@media(max-width:800px){.diagram-gallery{gap:16px}.diagram-strip{gap:10px}.diagram-card-copy{padding:11px}.diagram-card h3{font-size:13px}#diagram-mode{width:100%;margin:0}.diagram-scroll{padding:10px 4px}.diagram-back{margin-bottom:23px}}
@media(max-width:540px){.diagram-gallery{grid-template-columns:1fr}.diagram-strip{display:flex;overflow-x:auto;gap:12px;padding:2px 2px 10px;scroll-snap-type:x proximity}.diagram-strip .diagram-card{flex:0 0 245px;scroll-snap-align:start}.diagram-controls{padding:12px}.diagram-prompt{padding:16px}.diagram-paging .text-button,.diagram-back .text-button{font-size:11px}.diagram-gallery .diagram-thumb{padding:8px}.diagram-section-head .text-button{font-size:11px}}