/* Approved music lesson mockup: real responsive UI, four tactile pastel cards. */
.storybook-music{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding:clamp(14px,4vh,44px) clamp(12px,3vw,48px)}
.storybook-music main{width:100%;max-width:1460px;margin:0;padding:clamp(18px,2.5vw,36px) clamp(16px,2vw,30px) 12px;border:12px solid #fffef7;border-radius:clamp(28px,4vw,60px);background:linear-gradient(135deg,#fffaf0,#fffcf4 55%,#fff9e9);box-shadow:0 12px 36px #5f805a24,inset 0 0 40px #f1dfb515}
.lesson-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:18px}
.lesson-heading h1{margin:0;font-size:clamp(30px,4.1vw,64px);line-height:1.15;letter-spacing:1px;font-weight:1000;color:#092249;text-align:center;text-shadow:0 2px 0 white}
.lesson-heading>a{justify-self:start;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 18px;min-height:50px;border:3px solid #efe1bf;border-radius:999px;background:#fff9e9;color:#10284e;font-weight:900;font-size:clamp(15px,1.65vw,23px);text-decoration:none;box-shadow:0 4px 7px #c9ae7320;white-space:nowrap;touch-action:manipulation}
.lesson-heading>a svg{width:27px;height:27px;fill:none;stroke:#c5771c;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.storybook-music .lesson-heading .park-logo{justify-self:end;width:76px;height:76px;border:5px solid white;box-shadow:0 5px 12px #c0a15c24;background:#fffaf0}
.storybook-music .lesson-heading .park-logo img{width:1200px;left:-46px;top:-17px}
.storybook-music .modes{width:min(600px,85%);display:flex;flex-wrap:nowrap;gap:0;padding:0;margin:0 auto 13px;border:3px solid #ece8dc;border-radius:999px;background:#f2f0e9;box-shadow:inset 0 2px 5px #c6bda910}
.storybook-music .modes .ctrl,.storybook-music .modes #learnModeBtn,.storybook-music .modes #musicModeBtn{flex:1;min-width:0;min-height:clamp(54px,7vh,76px);padding:10px 18px;border:4px solid transparent;border-radius:999px;font-size:clamp(19px,2.3vw,32px);background:transparent;color:#4d6681;box-shadow:none;text-shadow:none;filter:none;outline:none}
.storybook-music .modes .ctrl.selected,.storybook-music .modes #learnModeBtn.selected,.storybook-music .modes #musicModeBtn.selected{border-color:white;background:linear-gradient(#43afff,#2288f6);color:#fff;box-shadow:0 5px 10px #d9c38b40;text-shadow:0 1px #226db7}
.storybook-music .modes .icon{width:clamp(25px,2.4vw,34px);height:clamp(25px,2.4vw,34px);margin-right:9px;vertical-align:-5px}
.storybook-music .stage{padding:0}
.storybook-music .status{font-size:clamp(17px,1.9vw,25px);font-weight:800;color:#4d6681;min-height:32px;padding:0;margin:0 auto 17px}
.storybook-music .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,20px);padding:0}
.storybook-music .card,.storybook-music .card:nth-child(n){--card-top:#ade1fc;--card-bottom:#dcf2ff;position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;min-height:clamp(280px,43vh,460px);padding:20px 12px 20px;border:8px solid #fff;outline:none;border-radius:clamp(24px,3vw,40px);background:linear-gradient(140deg,var(--card-top),var(--card-bottom));box-shadow:0 7px 13px #b7975224;overflow:hidden;transition:transform .16s,box-shadow .16s}
.storybook-music .card:nth-child(2){--card-top:#ffdfac;--card-bottom:#fff0d9}
.storybook-music .card:nth-child(3){--card-top:#ddf2c4;--card-bottom:#ecf8dd}
.storybook-music .card:nth-child(4){--card-top:#e8d9fc;--card-bottom:#f2eaff}
.storybook-music .photo{display:block;width:100%;height:clamp(175px,28vh,310px);flex:1;min-height:0;aspect-ratio:auto;object-fit:contain;background:transparent;padding:4px 0;border-radius:0;mix-blend-mode:multiply}
.storybook-music .name{flex:none;font-size:clamp(22px,2.35vw,34px);font-weight:1000;line-height:1.2;margin-top:12px;letter-spacing:-.5px;color:#082449}
.storybook-music .cn{font-size:clamp(16px,1.65vw,23px);font-weight:700;margin-top:7px;color:#4d6681}
.card-sound{position:absolute;z-index:1;right:12px;top:12px;display:grid;place-items:center;width:clamp(39px,4.2vw,60px);height:clamp(39px,4.2vw,60px);border:3px solid white;border-radius:50%;background:#fff;box-shadow:0 4px 10px #6683a21c;color:#238ff7;pointer-events:none}
.card-sound svg{width:57%;height:57%;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.card-sound svg path+path{fill:none}
.storybook-music .card:hover{transform:translateY(-3px);box-shadow:0 10px 18px #b7975233}
.storybook-music .card:active{transform:translateY(1px)}
.storybook-music .card.playing{outline:4px solid #489ff5;outline-offset:-4px;box-shadow:0 7px 18px #3299f538}
.storybook-music .card.playing:after{display:none}
.storybook-music .card.playing .card-sound{background:#258ff3;color:#fff}
.storybook-music .card.correct{outline:4px solid #489759;outline-offset:-4px}
.storybook-music .card.wrong{outline:4px solid #dba54e;outline-offset:-4px}
.storybook-music.music-mode .card-sound{display:none}
.storybook-music .parents{margin:15px auto 0;border:0;background:none}
.storybook-music .parents summary{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:4px;font-size:clamp(14px,1.5vw,19px);font-weight:800;color:#5d7690;list-style:none}
.storybook-music .parents summary::-webkit-details-marker{display:none}
.storybook-music .parents summary svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.storybook-music .parents[open] .settings{border-top:1px solid #eee0c6;padding-top:15px}
.storybook-music .quizpanel{margin:0 0 18px}
.storybook-music .quiz-actions button{font-size:18px}
.storybook-music button:focus-visible,.storybook-music summary:focus-visible,.lesson-heading>a:focus-visible{outline:4px solid #173e71;outline-offset:4px}
@media(max-width:900px){.storybook-music{padding:18px 14px}.storybook-music main{margin:0;padding:20px 16px 12px;border-width:8px}.lesson-heading{gap:10px}.lesson-heading h1{font-size:clamp(27px,4.4vw,40px)}.lesson-heading>a{font-size:15px;padding:10px 12px}.storybook-music .lesson-heading .park-logo{width:58px;height:58px}.storybook-music .lesson-heading .park-logo img{width:869px;left:-33px;top:-12px}.storybook-music .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.storybook-music .card,.storybook-music .card:nth-child(n){min-height:260px;padding:16px 12px;border-width:6px;border-radius:28px}.storybook-music .photo{height:clamp(165px,22vh,230px)}.storybook-music .name{font-size:27px}.storybook-music .cn{font-size:18px}.card-sound{width:44px;height:44px}}
@media(min-width:901px) and (max-height:760px){.storybook-music{padding:16px 24px}.storybook-music main{padding:18px 20px 8px;border-width:9px}.lesson-heading{margin-bottom:12px}.lesson-heading h1{font-size:42px}.storybook-music .lesson-heading .park-logo{width:60px;height:60px}.storybook-music .lesson-heading .park-logo img{width:905px;left:-35px;top:-13px}.storybook-music .modes .ctrl,.storybook-music .modes #learnModeBtn,.storybook-music .modes #musicModeBtn{min-height:52px;font-size:23px}.storybook-music .card,.storybook-music .card:nth-child(n){min-height:270px;padding:15px 10px}.storybook-music .photo{height:clamp(160px,26vh,210px)}.storybook-music .name{font-size:26px}.storybook-music .cn{font-size:18px}.storybook-music .parents{margin-top:10px}}
@media(max-width:520px){.storybook-music{padding:12px 8px;align-items:flex-start}.storybook-music main{margin:0;padding:15px 10px 8px;border-width:6px;border-radius:28px}.lesson-heading{grid-template-columns:1fr auto;gap:12px;margin-bottom:15px}.lesson-heading h1{grid-column:1/-1;grid-row:2;font-size:31px;margin-top:2px}.lesson-heading>a{font-size:14px;padding:8px 11px;min-height:44px;border-width:2px}.lesson-heading>a svg{width:21px;height:21px}.storybook-music .lesson-heading .park-logo{width:45px;height:45px;border-width:3px}.storybook-music .lesson-heading .park-logo img{width:706px;left:-27px;top:-10px}.storybook-music .modes{width:100%;margin-bottom:12px}.storybook-music .modes .ctrl,.storybook-music .modes #learnModeBtn,.storybook-music .modes #musicModeBtn{min-height:50px;font-size:19px;padding:8px 6px;border-width:3px}.storybook-music .modes .icon{width:23px;height:23px;margin-right:5px}.storybook-music .status{font-size:16px;margin-bottom:14px}.storybook-music .grid{gap:12px}.storybook-music .card,.storybook-music .card:nth-child(n){min-height:215px;padding:12px 7px;border:5px solid white;border-radius:23px}.storybook-music .photo{height:clamp(130px,20vh,170px)}.storybook-music .name{font-size:clamp(17px,4.8vw,24px);margin-top:9px}.storybook-music .cn{font-size:15px;margin-top:5px}.card-sound{right:7px;top:7px;width:35px;height:35px;border-width:2px}.storybook-music .parents{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.storybook-music .card:hover{transform:none}}
@media print{.storybook-music{padding:0;background:white}.storybook-music main{border:0;box-shadow:none}.lesson-heading>a,.card-sound{display:none}}