#visualLesson{width:min(980px,96vw);max-height:94vh}.visual-lesson-body{padding:22px 30px}.visual-lesson-body>p{font-size:17px;line-height:1.9;color:#6d6044}#visualStep{font-size:12px;color:#8d7b59}.visual-lesson-body h3{font-size:28px}#visualStage{background:#edf0d9;border:2px solid #b6c29a;border-radius:12px;padding:22px;text-align:center}.teaching-bulbs{display:flex;justify-content:center;gap:30px;margin:20px 0}.teaching-bulbs small{display:block;margin-top:10px;color:#75805b}.teaching-bulb{display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:#bbc7b8;color:#677764;border:3px solid #84987c;font-size:35px;transition:background .5s,box-shadow .5s,transform .5s}.teaching-bulb.lit{background:#f4d16c;color:#80611f;box-shadow:0 0 25px #f2cb6a99;transform:scale(1.07)}.teaching-bulb.masked{background:#d9e2c8;border-style:dashed;color:#7b8d64}.visual-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0}.visual-controls button{min-height:45px}.visual-chain{font-size:20px;color:#65794f;padding:10px;margin-bottom:14px}.visual-chart-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.visual-chart{padding:15px;background:#fff8e3;border:1px solid #d3c398;border-radius:8px}.visual-chart>div{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:14px}.visual-chart>div>span{width:40px}.visual-chart>div>div{height:17px;background:#e2dfc2;flex:1;border-radius:5px;overflow:hidden}.visual-chart i{height:100%;display:block;background:#7b9f78;transition:width .65s}.visual-chart b{width:38px;font-size:12px}.visual-model-label{color:#786e50;font-size:13px}.check-lamps{display:flex;justify-content:center;gap:14px;margin:20px 0}.check-lamps span{padding:12px;border:2px solid #9aa78b;border-radius:9px;background:#cfd7c3;color:#5b6651}.check-lamps .on{background:#f4d784;border-color:#b69b4e;color:#6b5425;box-shadow:0 0 15px #eed68b66}#visualCheck{background:#f6ecd0;padding:10px 16px;border-radius:8px}#visualCheck:empty{display:none}#visualHint{min-height:32px;color:#55724a}.replay-visual{float:right;margin:0 0 12px 14px}.friendly-goal{background:#e6edd3;border-left:4px solid #8ca76e;padding:12px 16px;font-size:17px}.record-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.record-grid span{font-size:13px;padding:8px;border:1px solid #d6c49e;background:#f7efd8}.record-grid span.seen{background:#dce9c5;border-color:#94ab72}.kid-data-row{display:flex;justify-content:center;gap:16px}.kid-data-row button{min-width:90px;min-height:60px;font-size:18px}.correction-guide{font-size:15px;background:#f2e9cd;padding:12px 16px;border-radius:8px}@media(max-width:620px){.visual-chart-pair{grid-template-columns:1fr}.visual-lesson-body{padding:18px}.teaching-bulb{width:62px;height:62px}.teaching-bulbs{gap:15px}.check-lamps{flex-direction:column}.record-grid{grid-template-columns:1fr}.kid-data-row{gap:8px}.kid-data-row button{min-width:70px}.replay-visual{float:none;margin:0 0 14px}}
#visualLesson .visual-chart i{transform-origin:left;animation:grow-chance .65s ease-out}#visualLesson .teaching-bulb.lit,.check-lamps .on{animation:light-arrives .5s ease-out}@keyframes grow-chance{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes light-arrives{from{filter:brightness(.7);transform:scale(.92)}to{filter:brightness(1);transform:scale(1)}}@media(prefers-reduced-motion:reduce){#visualLesson *, .check-lamps .on{animation:none!important;transition:none!important}}
.star-pair{display:flex;font-style:normal;gap:3px;justify-content:center}.visual-chart .star-pair b{font-size:23px;width:auto}.star-pair .blue{color:#4389ba}.star-pair .gold{color:#ba881f}#visualLesson{background:#fff6df;color:#514b37;border:3px solid #a8b58a;border-radius:14px}#visualLesson .lesson-footer{display:flex;justify-content:space-between;gap:12px;padding:16px 24px;background:#eee5c9;border-top:1px solid #c9bb92}#visualLesson .lesson-footer>div{display:flex;gap:10px}#visualLesson .selected{background:#c9dca9;border-color:#7d9962}@media(max-width:620px){#visualLesson .lesson-footer{flex-wrap:wrap}#visualLesson .lesson-footer>div{width:100%;justify-content:space-between}}
.reduced #visualLesson *,.reduced .check-lamps .on{animation:none!important;transition:none!important}#observationRecords{width:100%}
