/* Focused music lesson: one instruction, two modes, four instruments. */
.music-lesson{background:#b7e5f5 url("park-landscape.png") center center / cover no-repeat fixed}
/* A fixed decorative layer avoids mobile browsers stretching the scene to page height. */
@supports (-webkit-touch-callout:none){
 .music-lesson{background:#b7e5f5;isolation:isolate}
 .music-lesson::before{content:"";display:block;position:fixed;inset:0;width:auto;height:auto;border-radius:0;box-shadow:none;background:url("park-landscape.png") center center / cover no-repeat;z-index:-1;pointer-events:none}
}
.music-lesson .park-nav{max-width:1160px;padding:12px 22px}
.music-lesson .park-nav>span{font-size:0;gap:0}
.music-lesson .park-logo{width:40px;height:40px}
.music-lesson .park-logo img{width:724px;left:-27px;top:-10px}
.music-lesson main{max-width:1160px;padding:22px 24px;margin-bottom:22px;background:#fffbee;border:3px solid #fffdf6;box-shadow:0 6px 0 #a7c59933}
.music-lesson .hero{text-align:center;padding:0!important}
.music-lesson .hero h1{font-size:clamp(26px,3vw,34px);margin:0}
.music-lesson .modes{gap:14px;margin:18px auto 22px}
.music-lesson .modes .ctrl,.music-lesson .modes #learnModeBtn{min-width:190px;min-height:54px;font-size:21px;border-radius:19px;box-shadow:0 3px 0 #2d7ac4}
.music-lesson .modes #musicModeBtn{box-shadow:0 3px 0 #c86e21}
.music-lesson .modes .ctrl:not(.selected){color:#425774;background:#f1eee3;box-shadow:0 3px 0 #d1cbb9;text-shadow:none;filter:none}
.music-lesson .modes .ctrl.selected{outline:none;border-color:#fff;box-shadow:0 3px 0 #2d7ac4}
.music-lesson .modes #musicModeBtn.selected{box-shadow:0 3px 0 #c86e21}
.music-lesson .stage{padding:0 4px 14px}
.music-lesson .status{background:none;border:0;border-radius:0;box-shadow:none;padding:4px 0;margin:0 auto 18px;font-size:18px;color:#425774;min-height:32px}
.music-lesson .grid{gap:20px;padding:0}
.music-lesson .card,.music-lesson .card:nth-child(n){padding:12px 12px 17px;border:2px solid #e7dfca;outline:0;background:#fffdf7;box-shadow:0 4px 0 #ddd3b54d;border-radius:23px;transition:transform .15s,border-color .15s}
.music-lesson .photo{height:clamp(155px,25vh,240px);aspect-ratio:1;object-fit:contain;padding:0;background:#fffdf7;border-radius:15px}
.music-lesson .name{font-size:clamp(22px,2.2vw,29px);margin-top:14px;letter-spacing:0;color:#10284e}
.music-lesson .name .initial{color:inherit}
.music-lesson .cn{font-size:16px;font-weight:500;color:#52647a;margin-top:5px}
.music-lesson .parents{border:0;background:none;max-width:740px;margin:12px auto 0}
.music-lesson .parents summary{font-size:14px;color:#52647a;min-height:48px;padding:12px}
.music-lesson .parents .settings{padding:8px 0 4px}
.music-lesson .parents .ctrl{font-size:15px;min-height:48px;padding:8px 13px}
.music-lesson .quizpanel{margin:0 0 20px}
.music-lesson .quizpanel .stars{display:flex;width:fit-content;margin:0 auto 10px;border:0;background:none;box-shadow:none;padding:0;gap:10px}
.music-lesson .quizpanel .star{width:27px;height:27px}
.music-lesson .quiz-actions{margin:8px 0 12px;gap:12px;flex-wrap:wrap}
.music-lesson .quiz-actions button{min-height:50px;font-size:18px}
.music-lesson #nextMusicBtn:disabled{display:none}
.music-lesson #quizResult{font-size:18px;min-height:28px;color:#10284e}
.music-lesson #quizScore{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.music-lesson .celebrate{background:none;padding:0}
.music-lesson.music-mode .name,.music-lesson.music-mode .cn{visibility:hidden}
.music-lesson .card.playing{border-color:#409af0;outline:3px solid #c6e4ff;box-shadow:0 4px 0 #88bcea55}
.music-lesson .card.correct{border-color:#399358;outline:3px solid #c3e9bc;box-shadow:0 4px 0 #89bd7755}
.music-lesson .card.wrong{border-color:#d69b40;outline:3px solid #ffe5ad;box-shadow:none}
@media(max-width:900px){.music-lesson main{margin:0 14px 20px;padding:20px}.music-lesson .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.music-lesson .photo{height:clamp(135px,22vh,210px)}}
@media(min-width:901px) and (max-height:800px){.music-lesson main{padding:16px 20px}.music-lesson .park-nav{padding:8px 22px}.music-lesson .modes{margin:12px auto 18px}.music-lesson .photo{height:clamp(140px,23vh,190px)}}
@media(max-width:520px){.music-lesson main{padding:18px 13px;margin:0 9px 18px}.music-lesson .park-nav{padding:10px 13px}.music-lesson .hero h1{font-size:27px}.music-lesson .modes{width:100%;margin:16px auto 18px;gap:12px}.music-lesson .modes .ctrl,.music-lesson .modes #learnModeBtn{min-width:0;min-height:52px;font-size:19px;padding:9px 7px}.music-lesson .grid{gap:15px}.music-lesson .card,.music-lesson .card:nth-child(n){padding:8px 8px 13px;border-radius:19px}.music-lesson .photo{height:clamp(110px,20vh,165px)}.music-lesson .name{font-size:21px;margin-top:10px}.music-lesson .cn{font-size:14px}.music-lesson .status,.music-lesson #quizResult{font-size:16px}.music-lesson .stage{padding:0 0 10px}}