.diagram-viewer { width:calc(100% - 24px); max-width:1260px; max-height:calc(100dvh - 24px); padding:1rem; border:1px solid #aabbd4; border-radius:14px; color:#0c1d40; background:white; overflow:auto; }
.diagram-viewer::backdrop { background:rgba(12,29,64,.65); }
.diagram-viewer-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.diagram-viewer-head h2 { margin:0; font-size:1.3rem; }
.diagram-viewer-tools { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:1rem 0 .5rem; }
.diagram-viewer-tools .btn { min-width:44px; min-height:44px; }
.diagram-zoom-value { min-width:4ch; font-weight:700; padding:.3rem; }
.diagram-viewer-viewport { height:58vh; min-height:220px; overflow:auto; overscroll-behavior:contain; background:#eef3fa; border:1px solid #aabbd4; border-radius:6px; touch-action:pan-x pan-y pinch-zoom; }
.diagram-viewer-content { background:white; margin:auto; }
.diagram-viewer-content svg { display:block; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; }
.diagram-viewer-trigger { margin:.5rem .5rem .5rem 0; }
.diagram-description { margin-top:1rem; padding:.7rem; border:1px solid #ccd7e7; border-radius:8px; }
.diagram-description summary { cursor:pointer; min-height:32px; font-weight:600; }
.diagram-description .q-text { font-size:1rem; }
.weekly-summary summary { cursor:pointer; min-height:44px; font-weight:700; }
.weekly-stats { display:flex; flex-wrap:wrap; gap:1rem; margin:1rem 0; }
.weekly-stat { flex:1 1 140px; background:#eef3fa; border-radius:10px; padding:1rem; }
.weekly-stat strong { display:block; font-size:1.6rem; }
.weekly-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.weekly-table th,.weekly-table td { padding:.7rem; border-bottom:1px solid #ccd7e7; text-align:left; }
.weekly-focus { padding:1rem; background:#edf8f1; border-left:3px solid #218453; border-radius:8px; margin:1rem 0; }
.practice-topic-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:1rem; margin:1.5rem 0; }
.practice-topic-grid .tool-card { margin:0; }
.starter-example { margin:1.5rem 0; padding:1.4rem; border:1px solid #c8d5e9; border-radius:12px; }
.starter-example summary { cursor:pointer; padding:.8rem; min-height:44px; font-weight:600; }
.starter-diagram svg { display:block; width:100%; height:auto; max-height:480px; }
.starter-example .solution__box { margin-top:1rem; }
.topic-guide { max-width:75ch; } .topic-guide li { margin-bottom:.6rem; }
@media(max-width:600px){.diagram-viewer-tools .btn { padding:.55rem .65rem; } .diagram-viewer { padding:.7rem; } .weekly-table th,.weekly-table td { padding:.6rem .3rem; } .starter-example { padding:1rem; }}
@media print{.diagram-viewer,.diagram-viewer-trigger,.weekly-summary{display:none !important;}}