html{scroll-behavior:auto}
.visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.visual-grid article{padding:20px;border:1px solid #d5e0ee;border-radius:12px;background:#f8fbff;min-width:0}.visual-grid h3{font-size:1.1rem;margin:0 0 10px}.visual-grid p{font-size:.95rem}
.visual-section>.button{margin:8px 10px 8px 0}.notes-link{white-space:normal;text-align:center}.lesson-sidebar>.notes-link{margin:20px 0;display:flex}
.visual-state{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.visual-state>div{padding:16px;border:1px solid #d6e1ef;border-radius:10px;background:white}.visual-state span{display:block;color:#55667e;font-size:.8rem;margin-bottom:7px}.visual-state output{font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}
.speed-control{display:flex;gap:8px;align-items:center;font-size:.85rem}.speed-control select{min-height:44px;background:white;border:1px solid #b8c8df;border-radius:8px;padding:8px;font:inherit}
.interface-flow{display:grid;gap:12px;margin:24px 0}.interface-flow article{padding:20px;background:#f2f6fd;border:1px solid #d1ddef;border-radius:12px}.interface-flow article>span{display:block;font-size:.7rem;font-weight:800;letter-spacing:1.5px;margin-bottom:12px}.interface-flow>span{text-align:center;color:#3565d4;font-size:1.5rem}.interface-flow article>code{font-size:1rem}
.extra-visual{padding:24px;background:#f5f9ff;border:1px solid #cedcec;border-radius:16px;margin:26px 0}.object-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}.object-card{padding:18px;border:2px solid #bed3ec;border-radius:12px;background:white;min-width:0}.object-card span,.object-card strong,.object-card small{display:block}.object-card span{font-size:.85rem}.object-card strong{font-size:1.7rem;color:#2456bb;margin:8px 0}.object-card small{color:#516481;line-height:1.5}.object-card.active{background:#e2f5e8;border-color:#438c61}
.extra-controls{display:flex;gap:10px;flex-wrap:wrap}.visual-section .extra-controls .button,.visual-section .animation-controls .button{min-height:44px}.extra-status{padding:16px;border-radius:10px;background:#e8f0fc;font-weight:600;line-height:1.7}.visual-lines{padding-left:0;list-style:none;border:1px solid #ccd9ec;border-radius:10px;overflow:hidden}.visual-lines li{padding:12px 16px;border-bottom:1px solid #d8e4f3;overflow-wrap:anywhere}.visual-lines li.current{background:#dbe8ff;border-left:4px solid #275ecb;padding-left:12px}.visual-lines code{white-space:pre-wrap}
.program-directory{margin:28px 0}.program-directory summary{cursor:pointer;min-height:44px;font-weight:700}.program-choice h3{font-size:1rem}.program-choice .button{font-size:.85rem}
@media(max-width:800px){.visual-grid{grid-template-columns:1fr}.extra-visual{padding:16px}.visual-state{grid-template-columns:1fr}.object-grid{gap:10px}.object-card{padding:14px}.object-card strong{font-size:1.35rem}.animation-controls{gap:8px}.animation-controls .button{flex:1 1 120px}.speed-control{width:100%;justify-content:center}.extra-controls .button{flex:1 1 110px}.visual-section>.button{display:flex;margin-right:0;justify-content:center}.notes-link{width:100%}.interface-flow article{padding:16px}}
@media(max-width:360px){.object-grid{grid-template-columns:1fr}}
@media print{.extra-controls,.program-directory,.notes-link{display:none}.visual-grid{grid-template-columns:1fr}.visual-section{break-inside:auto}.object-card,.extra-visual{background:white}}