*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;color:#173d43;background:#f5f3e9}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid #173d4329;border-radius:14px;background:#fffef8;color:inherit;padding:12px 18px;min-height:48px;touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #006b83;outline-offset:4px}button[aria-pressed=true]{background:#173f49;color:#fff}button:disabled{opacity:.55;cursor:default}[hidden]{display:none!important}.playground{max-width:1180px;margin:auto;padding:32px 32px 18px}.play-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.overline{font-size:10px;letter-spacing:2px;font-weight:700;color:#547278;margin:0 0 12px}h1,h2{font-family:Georgia,serif;font-weight:400}h1{font-size:clamp(35px,5vw,56px);margin:0 0 10px;letter-spacing:-1.7px}h1 span{color:#d98452;padding-left:9px}h2{font-size:29px;margin:0 0 12px}p{line-height:1.65}.play-heading>div>p:last-child{margin:0;color:#587174;font-size:14px}.primary{background:#194f54;color:#fff;border:0;font-weight:650;box-shadow:0 4px #0a3136}.text-button{background:transparent;border:0;text-decoration:underline;font-size:13px}.instrument-tabs,.lesson-choices{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}.instrument-tabs button{flex:1;font-weight:600;min-width:105px}.music-room{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#d9eeea,#e8e5f2 60%,#f5e6d1);border:1px solid #fff;border-radius:28px;padding:32px;box-shadow:0 16px 35px #25464b10}.music-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;color:#ffffff85;font:100px Georgia}.music-sky span{position:absolute;top:7%;left:20%;transform:rotate(-15deg)}.music-sky span:nth-child(2){top:40%;left:80%;font-size:150px}.music-sky span:nth-child(3){left:60%;top:5%}.music-sky span:nth-child(4){left:40%;top:45%;font-size:240px}.instrument-heading{display:flex;justify-content:space-between;align-items:center}.instrument-heading h2{font-size:38px}.instrument-heading .overline{font-size:9px}#music-friend{display:block;font-size:56px;transform:rotate(-8deg);transition:transform .15s}#music-friend.singing{transform:rotate(12deg) scale(1.12)}#instrument-hint{font-size:14px;margin-top:0;color:#47646d}.instrument{min-height:240px;padding:12px 0 20px}.keyboard-scroll{overflow-x:auto;padding:0 3px 8px}.keyboard{height:210px;position:relative;display:flex;min-width:570px;background:#21414e;border:10px solid #21414e;border-radius:16px;padding:0 2px 8px;box-shadow:0 10px #132e3a}.piano-key{flex:1;border-radius:0 0 9px 9px;background:linear-gradient(90deg,#e5e4d9,#fffef4 30% 80%,#e8e7dc);padding:0 0 20px;display:flex;align-items:flex-end;justify-content:center;color:#254653;border:1px solid #b0b4b0;font-size:18px;font-weight:600;box-shadow:inset 0 -7px #d7d6ce}.piano-key .note-color{border-radius:50%;padding:8px 12px;background:var(--note)}.black-key{position:absolute;top:0;width:7.2%;min-width:44px;height:112px;padding:0 0 15px;background:linear-gradient(90deg,#10232c,#344d59,#132b36);z-index:2;border:1px solid #0d2731;border-radius:0 0 7px 7px;color:#fff;font-size:10px;box-shadow:0 5px 2px #0004,inset 0 -5px #12242d}.piano-key.playing{background:var(--note);transform:translateY(3px)}.black-key.playing{background:#548c9b}.string-board{padding:20px 22px;background:linear-gradient(100deg,#92552c,#b97442,#83512e);border:8px solid #5c3f2f;border-radius:36px 20px 20px 36px;box-shadow:0 8px #3f3028;position:relative}.string-button{position:relative;display:flex;width:100%;align-items:center;gap:20px;padding:8px 10px;min-height:48px;background:transparent;border:0;color:#fff6df}.string-button:after{content:"";height:var(--thickness,3px);background:linear-gradient(#fff1bd,#9d793d);box-shadow:0 2px 2px #0007;flex:1}.string-button span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#332e28;border:1px solid #f8dca7}.string-button.playing:after{animation:string-shiver .18s 2}.guitar-pads{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:18px 0}.guitar-pads button{min-height:125px;border-radius:50% 50% 38% 38%;border:5px solid #ac6842;background:radial-gradient(circle at 50% 35%,#3e3540 0 16%,#ebbc7d 17% 24%,#d69c65 25%);color:#fff;padding-top:65px;font-size:19px;box-shadow:0 6px #824b34}.guitar-pads button.playing{transform:rotate(-4deg);background-color:#f6ce8f;filter:brightness(1.15)}.drum-kit{display:flex;justify-content:center;align-items:center;gap:18px;min-height:230px;flex-wrap:wrap}.drum-kit button{border-radius:50%;width:150px;height:150px;border:10px solid #699ca4;background:radial-gradient(#fffef4,#e2e6e0);box-shadow:0 12px #365e68,0 18px 20px #152c4426;font-weight:700;display:flex;flex-direction:column;justify-content:center;gap:8px}.drum-kit button:first-child{width:180px;height:180px;border-color:#ce8658;box-shadow:0 12px #9c5b3a}.drum-kit button:nth-child(3){width:125px;height:125px;border-color:#c6a75b;background:radial-gradient(#a78036,#f5d88c,#ba934a)}.drum-kit span{font-size:32px}.drum-kit button.playing{transform:translateY(5px);filter:brightness(1.12)}.music-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;margin-top:14px}.music-controls label{display:flex;gap:12px;align-items:center}.music-controls input{max-width:140px;accent-color:#275e68}.lesson-panel{background:#fffdf6;border:1px solid #d7e2dc;border-radius:24px;padding:26px;margin-top:23px}.lesson-panel p{font-size:14px;color:#48666c}.lesson-choices button{font-size:13px;flex:1;min-width:130px}.lesson-dots{display:flex;gap:9px;margin:14px 0;flex-wrap:wrap}.lesson-dots span{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#e2eae2;border:2px solid #b6ccc8}.lesson-dots .done{background:#c3e3bf;border-color:#3f7c57}.lesson-dots .current{outline:3px solid #d18c45;outline-offset:2px}#lesson-actions,#pitch-answers{display:flex;gap:12px;flex-wrap:wrap}.section-row{display:flex;justify-content:space-between;align-items:center;gap:16px}.beat-scroll{overflow-x:auto;margin:18px 0}.beat-grid{display:grid;grid-template-columns:70px repeat(8,minmax(44px,1fr));gap:6px;min-width:500px}.beat-grid>span{align-self:center;font-size:12px}.beat-grid button{padding:0;min-height:44px;border-radius:10px;background:#edf1e8}.beat-grid button[aria-pressed=true]{background:#d98758;border-color:#ad643d}.beat-grid .beat-now{outline:3px solid #214d5c;outline-offset:-3px}.play-footer{text-align:center;color:#617a7a;font-size:12px;line-height:1.9;margin:25px 0}dialog{max-width:590px;width:calc(100% - 28px);border:1px solid #c1d6cf;border-radius:24px;padding:28px;background:#fffdf4;color:#183e44;line-height:1.65}dialog::backdrop{background:#092b39b8}dialog a{color:#1b6671}dialog p{font-size:14px}@keyframes string-shiver{50%{transform:translateY(3px)}}@media(max-width:650px){.playground{padding:22px 14px 12px}.play-heading{align-items:flex-start;flex-direction:column;gap:16px}.overline{font-size:8px;letter-spacing:1.5px}.music-room{padding:20px 14px}.lesson-panel{padding:20px 16px}.instrument-tabs{gap:7px}.instrument-tabs button{min-width:calc(50% - 7px);padding:10px}.music-controls{gap:8px}.guitar-pads{grid-template-columns:repeat(3,1fr)}.guitar-pads button{min-height:110px}.drum-kit{gap:15px}.drum-kit button,.drum-kit button:first-child,.drum-kit button:nth-child(3){width:125px;height:125px}.section-row{align-items:flex-start;flex-direction:column}.instrument{min-height:220px}.music-controls input{width:110px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}