.course-banner{position:relative;display:flex;align-items:center;gap:18px;min-height:175px;padding:26px 30px;border:1px solid #dbd0e4;border-radius:22px;overflow:hidden;background:linear-gradient(100deg,#edf7f7ef,#e8ecf6c4),url('assets/academy.png') center/cover}.course-banner.air{background:linear-gradient(100deg,#edf6eaf2,#e6f3e1bf),url('assets/academy.png') center/cover}.course-banner.weather{background:linear-gradient(100deg,#fff2dbef,#f5e9d3be),url('assets/academy.png') center/cover}.course-banner div{z-index:1;max-width:80%}.course-banner h3{font-family:"KaiTi",serif;font-size:29px;margin:10px 0}.course-banner p{font-size:14px;line-height:1.9}.course-banner>img{height:155px;position:absolute;right:14px;bottom:-6px}.course-tabs{display:flex;gap:10px;margin:20px 0}.course-tabs button{display:flex;align-items:center;gap:12px;flex:1;justify-content:center;background:#f7f1f9;border:1px solid #e0d3e8;border-radius:12px;padding:13px;min-height:48px;font-weight:600}.course-tabs button.selected{background:#e8dcf1;border-color:#b69bc9}.course-tabs small{color:#95849e}.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.lesson-card{display:flex;text-align:left;align-items:center;gap:13px;padding:19px 17px;border:1px solid #e4d8e9;border-radius:17px;background:#fffdfa;min-height:110px;position:relative;transition:.2s}.lesson-card:hover{box-shadow:0 9px 24px #9983b122;border-color:#b99aca}.lesson-card.completed{background:#eff6ef;border-color:#c2dcc4}.lesson-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:52px;height:58px;border-radius:15px;background:#f4eddf;font-size:31px}.lesson-card-copy{display:flex;flex-direction:column;gap:6px;min-width:0}.lesson-card-copy b{font-size:15px;line-height:1.5}.lesson-card-copy>span{font-size:11px;color:#927d9e}.lesson-card-copy small{color:#b199ad;font-size:10px}.lesson-card>i{margin-left:auto;font-style:normal;color:#a993b6;font-size:20px}.fact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.fact-grid .fact-card h3{margin-top:7px}.fact-grid .button-row{flex-wrap:wrap;gap:8px}.lesson-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,1fr);gap:22px}.lesson-scene{min-width:0;border-radius:18px;background:#f5f1f8;padding:15px;align-self:start}.lesson-progress{display:flex;align-items:center;justify-content:center;gap:7px;padding:3px 0 13px}.lesson-progress>span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#e6dceb;color:#ab92b9;font-size:11px}.lesson-progress>span.current{background:#9074ac;color:white}.lesson-progress>span.done{background:#b9d8c5;color:#477858}.lesson-progress>i{height:2px;flex-basis:25px;background:#dfd2e5}.course-stage{position:relative}.course-stage svg{display:block;width:100%;height:auto}.drop-zones{display:flex;justify-content:center;gap:10px;padding:10px 0;flex-wrap:wrap}.drop-zones>button{min-width:80px;min-height:60px;border:1.5px dashed #c2a8d0;border-radius:12px;background:#fffdf5;padding:9px;font-size:20px;color:#92719e}.drop-zones small{display:block;font-size:10px;margin-top:4px}.drop-zones.delivered{filter:drop-shadow(0 3px 6px #a1c7a8)}.course-controls{margin-top:9px}.tool-tray{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.tool-tray button{display:grid;place-items:center;gap:4px;min-width:74px;min-height:67px;padding:10px;background:#fffdf7;border:1px solid #decde5;border-radius:13px;touch-action:none}.tool-tray button>span{font-size:28px}.tool-tray button small{font-size:10px;max-width:100px;line-height:1.4}.tool-tray .picked{background:#eee0f5;border-color:#9472b3}.tool-tray .dragging{position:relative;z-index:4;pointer-events:none;box-shadow:0 6px 18px #71548355}.course-controls .caption{font-size:10px;text-align:center;margin-top:8px}.manipulate{width:100%;justify-content:center;font-size:13px}.scene-footer{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:10px;color:#8f7b9b;font-size:11px;line-height:1.6}.scene-footer>img{width:39px;height:58px;object-fit:contain}.scene-footer small{font-size:9px;color:#b3a0ba}.lesson-guide{min-width:0;align-self:start}.lesson-guide .story-say{padding:13px;gap:11px;margin-top:0}.lesson-guide .story-say>img{width:38px;height:57px}.lesson-guide .story-say p{font-size:13px;line-height:1.8}.lesson-guide .voice-controls{flex-wrap:wrap;padding:9px;margin:12px 0}.lesson-guide .voice-controls button{font-size:10px;padding:8px;min-height:44px}.lesson-guide .voice-status{width:100%;flex-basis:100%;font-size:10px}.lesson-guide .story-message{padding:13px;font-size:13px;line-height:1.9;min-height:84px}.lesson-guide .discovered{background:#e3f1e7}.lesson-guide .button-row{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}.lesson-guide .button-row button{flex:1;justify-content:center;min-height:48px;font-size:12px}.lesson-links{display:flex;flex-wrap:wrap;gap:10px}.lesson-links button{font-size:10px;min-height:44px}.slider-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:10px}.slider-label output{font-weight:600;color:#9073a8}.course-controls input[type=range]{display:block;width:100%;height:44px;accent-color:#9b7bae;cursor:ew-resize}.course-controls #course-record{width:100%;min-height:44px;font-size:12px;background:#ede3f1}.cloud-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:9px 0}.cloud-buttons button{min-height:44px;font-size:22px;border-radius:10px;background:#e8f5ff;border:1px solid #c6dbe7}.cloud-buttons button[aria-pressed=true]{background:#f0f2f7}.course-completion{text-align:center}.completion-star{display:block;font-size:71px;color:#c5a267;text-shadow:0 3px 19px #efd79b77;margin:5px 0}.course-completion h3{font-size:22px}.course-completion>p{line-height:1.9;margin:16px auto;max-width:570px;font-size:14px}.course-gifts{font-size:12px;color:#a48a61;background:#fbf3df;border-radius:12px;padding:13px;margin:16px auto;max-width:440px}.course-completion .dialogue{text-align:left}.course-completion .button-row{justify-content:center;flex-wrap:wrap;margin-top:20px}.earned-badge{color:#7c926f;font-weight:bold}.parent-lessons{max-height:360px;overflow:auto}.parent-lessons .record-row small{font-size:10px}.faq-buttons{max-height:235px;overflow:auto}#course-question label{display:block;color:#a18aad;font-size:11px;margin:15px 0 8px}#course-question .chat-input{display:flex;gap:8px}#course-question input{min-width:0;flex:1;border:1px solid #dac6e6;padding:13px;border-radius:10px;background:white}.offline-panel .caption{line-height:1.6}
@media(min-width:1000px){#panel:has(.lesson-layout){width:min(1050px,94vw)}#panel:has(.course-banner){width:min(850px,94vw)}}
@media(max-width:650px) and (orientation:portrait){.lesson-layout{grid-template-columns:1fr;gap:14px}.lesson-scene{padding:11px}.lesson-guide .story-say p{font-size:14px}.lesson-guide .story-message{font-size:14px}.lesson-guide .button-row button{font-size:13px}.lesson-card{padding:13px 11px;min-height:100px;gap:9px}.lesson-grid,.fact-grid{grid-template-columns:1fr}.lesson-icon{width:44px;height:47px;font-size:26px}.course-banner{padding:20px;min-height:164px}.course-banner h3{font-size:24px}.course-banner p{font-size:12px}.course-banner div{max-width:76%}.course-banner>img{height:136px;right:4px}.course-tabs{gap:7px}.course-tabs button{padding:10px 8px;gap:7px;font-size:12px}.course-tabs small{font-size:9px}.course-completion .button-row{display:grid;grid-template-columns:1fr}.course-completion .button-row button{justify-content:center}}
@media(orientation:landscape) and (max-height:600px){#panel:has(.lesson-layout){width:96vw;padding:13px 18px}.lesson-layout{grid-template-columns:minmax(0,1.25fr) minmax(205px,1fr);gap:16px}.lesson-scene{padding:9px}.lesson-progress{padding:0 0 5px}.lesson-progress>span{width:21px;height:21px}.course-stage svg{max-height:190px}.scene-footer{display:none}.lesson-guide .story-say{padding:9px}.lesson-guide .story-say>img{height:44px;width:28px}.lesson-guide .story-say p{font-size:11px;line-height:1.7}.lesson-guide .voice-controls{padding:7px;margin:7px 0;gap:5px}.lesson-guide .voice-controls button{padding:6px;min-height:44px;font-size:9px}.lesson-guide .story-message{font-size:11px;line-height:1.7;min-height:60px;padding:9px}.lesson-guide .button-row{margin:8px 0}.lesson-guide .button-row button{font-size:10px;padding:10px;min-height:44px}.drop-zones{padding:5px 0;gap:5px}.drop-zones>button{min-height:44px;min-width:57px;padding:7px;font-size:14px}.drop-zones small{font-size:8px}.tool-tray button{min-height:44px;padding:7px;min-width:60px}.tool-tray button>span{font-size:20px}.tool-tray button small{font-size:9px}.course-controls .caption{font-size:8px}.course-tabs{margin:12px 0}.course-banner{min-height:130px;padding:18px 25px}.course-banner>img{height:125px}.lesson-card{min-height:95px}.lesson-links{gap:6px}.lesson-links button{font-size:9px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.lesson-card{transition:none}}