/* Animated lessons share a bounded viewport; every lesson and action remains visible. */
#modal.learn-dialog{box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:14px;width:min(1120px,calc(100vw - 32px));height:min(760px,calc(100dvh - 32px));max-width:none!important;max-height:none;padding:22px;overflow:visible}
#modal.learn-dialog:not([open]){display:none}#modal.learn-dialog>h2{margin:0;font-size:28px;line-height:1.2}
#modal.learn-dialog .rules-guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;min-height:0;align-items:stretch}
#modal.learn-dialog .lesson-stage{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;aspect-ratio:auto;width:100%;max-width:none;margin:0}
#modal.learn-dialog .lesson-board{box-sizing:border-box;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:9/8;width:var(--lesson-width,100%);max-width:100%;max-height:100%;flex:0 1 auto}
#modal.learn-dialog .lesson-copy{align-self:center;min-height:0;min-width:0}#modal.learn-dialog .lesson-copy .eyebrow{font-size:11px}#modal.learn-dialog .lesson-copy h3{font-size:clamp(23px,2.2vw,30px);line-height:1.2;margin:10px 0 14px}#modal.learn-dialog .lesson-copy>b{font:650 17px/1.5 system-ui;color:#bdebe7}#modal.learn-dialog .lesson-copy p{font:400 16px/1.65 system-ui;color:#d6e5ef;margin:14px 0 0}
#modal.learn-dialog .lesson-controls{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:10px;margin:0;min-height:44px}#modal.learn-dialog .lesson-controls button{min-height:44px;font-size:15px;padding:9px 16px;white-space:nowrap}#modal.learn-dialog .lesson-count{font:500 15px system-ui;white-space:nowrap}#modal.learn-dialog>.dialog-actions{display:flex;justify-content:flex-end;margin:0;min-height:44px}#modal.learn-dialog>.dialog-actions button{min-height:44px;font-size:15px;padding:10px 20px}
@media(max-height:700px) and (min-width:740px){#modal.learn-dialog{gap:10px;padding:18px}#modal.learn-dialog .lesson-copy h3{font-size:25px;margin:8px 0 12px}#modal.learn-dialog .lesson-copy p{line-height:1.5;margin-top:10px}}
@media(max-width:739px){#modal.learn-dialog{width:calc(100vw - 20px);height:calc(100dvh - 20px);padding:14px;gap:10px}#modal.learn-dialog>h2{font-size:24px}#modal.learn-dialog .rules-guide{grid-template-columns:1fr;grid-template-rows:minmax(130px,1fr) auto;gap:12px}#modal.learn-dialog .lesson-copy h3{font-size:22px;margin:4px 0 8px}#modal.learn-dialog .lesson-copy .eyebrow{display:none}#modal.learn-dialog .lesson-copy>b{font-size:15px;line-height:1.4}#modal.learn-dialog .lesson-copy p{font-size:15px;line-height:1.45;margin-top:8px}#modal.learn-dialog .lesson-controls{gap:7px}#modal.learn-dialog .lesson-controls button{padding:8px 10px;font-size:14px}#modal.learn-dialog .lesson-controls [data-lesson=motion]{max-width:116px;white-space:normal;line-height:1.2}}
@media(orientation:landscape) and (max-height:550px){#modal.learn-dialog{grid-template-rows:auto minmax(0,1fr) auto;padding:12px;gap:8px}#modal.learn-dialog .rules-guide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:minmax(0,1fr);gap:16px}#modal.learn-dialog>h2{font-size:22px}#modal.learn-dialog .lesson-copy h3{font-size:21px;margin:4px 0 7px}#modal.learn-dialog .lesson-copy .eyebrow{display:none}#modal.learn-dialog .lesson-copy>b,#modal.learn-dialog .lesson-copy p{font-size:14px;line-height:1.4}#modal.learn-dialog .lesson-copy p{margin-top:6px}#modal.learn-dialog .lesson-controls{justify-content:flex-start;gap:7px}#modal.learn-dialog .lesson-controls button{font-size:14px;padding:7px 10px}#modal.learn-dialog>.dialog-actions{position:absolute;right:12px;bottom:12px}#modal.learn-dialog>.dialog-actions button{font-size:14px;padding:7px 12px}}