@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Fredoka:wght@500;600;700&display=swap";:root{color:#30313d;font-synthesis:none;--ink:#30313d;background:#fffaf5;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 8% 22%,#ffe8de 0 3px,#0000 4px),radial-gradient(circle at 92% 12%,#d9eee8 0 4px,#0000 5px),#fffaf5;min-width:320px;min-height:100vh;margin:0}button,select{font:inherit}button{color:inherit}.app-shell{flex-direction:column;min-height:100vh;display:flex}header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffaf5e6;border-bottom:1px solid #eee5dc;justify-content:space-between;align-items:center;height:74px;padding:0 max(24px,50% - 540px);display:flex}.logo{cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;font-family:Fredoka;font-size:18px;display:flex}.logo span,.brand-mark{color:#fff;background:#f39a85;border-radius:12px;place-items:center;width:38px;height:38px;display:grid;transform:rotate(-4deg)}.level-dropdown{flex:none;position:relative}.level-dropdown-button{color:#563a39;cursor:pointer;background:linear-gradient(#f5a090,#f09888);border:1px solid #e48776;border-radius:999px;justify-content:space-between;align-items:center;gap:12px;min-width:154px;min-height:46px;padding:11px 17px 11px 18px;font-size:14px;font-weight:800;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex;box-shadow:0 8px 18px #f0988842,inset 0 1px #ffffff61}.level-dropdown-button:hover{background:linear-gradient(#f8aa9b,#f09888);transform:translateY(-1px);box-shadow:0 11px 22px #f0988852,inset 0 1px #ffffff6b}.level-dropdown-button:focus-visible{outline:0;box-shadow:0 0 0 4px #f0988852,0 10px 22px #f098883d}.dropdown-arrow{stroke:#563a39;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none;width:18px;height:18px;transition:transform .16s}.level-dropdown-button.open .dropdown-arrow{transform:rotate(180deg)}.level-dropdown-menu{z-index:10;background:#fffefa;border:1px solid #f1b4a9;border-radius:20px;gap:4px;min-width:190px;padding:8px;display:grid;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 18px 38px #78474224}.level-dropdown-menu button{color:#5e5255;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:14px;padding:11px 14px;font-weight:700}.level-dropdown-menu button:hover,.level-dropdown-menu button:focus-visible{color:#9b4d43;background:#ffe7e1;outline:0}.level-dropdown-menu button.selected{color:#563a39;background:#f09888;box-shadow:inset 0 0 0 1px #563a391f}main{flex:1;width:min(1080px,100% - 40px);margin:0 auto}.hero{grid-template-columns:1.3fr .7fr;align-items:center;min-height:220px;padding:24px 5% 10px;display:grid;overflow:hidden}.brand-mark{display:none}.eyebrow{text-transform:uppercase;letter-spacing:2px;color:#9076c9;margin:0 0 8px;font-size:12px;font-weight:700}h1,h2{color:var(--ink);margin:0;font-family:Fredoka,sans-serif;line-height:1.05}h1{letter-spacing:-2px;font-size:clamp(46px,7vw,76px)}h1 em{color:#f08e79;font-style:normal}.mascot{place-items:center;height:210px;display:grid;position:relative}.piano-face{background:#f8c868;border:5px solid #373845;border-radius:30px;justify-content:center;align-items:flex-end;width:230px;height:138px;display:flex;overflow:hidden;transform:rotate(3deg);box-shadow:14px 16px #f4dfd3}.piano-face span{letter-spacing:8px;font-size:27px;font-weight:700;position:absolute;top:30px}.piano-face i{background:#fffefa;border:2px solid #373845;flex:1;height:57px;display:block}.piano-face i:nth-of-type(2),.piano-face i:nth-of-type(4){background:#373845;flex:.55;height:39px}.sparkle{color:#81c7b8;opacity:.82;font-size:30px;position:absolute}.sparkle.one{top:-4px;right:4%}.sparkle.two{color:#f09a87;opacity:.52;font-size:22px;bottom:-8px;left:-22%;transform:rotate(-10deg)}.activities-section{padding:24px 0 20px}.section-title{justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px;display:flex}.section-title h2{font-size:clamp(28px,4vw,38px)}.activity-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.activity-grid.count-1{grid-template-columns:minmax(0,1fr)}.activity-grid.count-2{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-grid.count-3{grid-template-columns:repeat(3,minmax(0,1fr))}.activity-grid.count-4{grid-template-columns:repeat(4,minmax(0,1fr))}.activity-card{text-align:left;cursor:pointer;border:0;border-radius:24px;flex-direction:column;align-items:stretch;min-width:0;min-height:170px;padding:clamp(18px,2vw,22px);transition:transform .2s,box-shadow .2s;display:flex;box-shadow:inset 0 0 0 1px #463c460d}.activity-card:hover{transform:translateY(-4px)rotate(-.3deg);box-shadow:0 12px 25px #3c32321a}.card-icon{margin-bottom:14px;font-size:clamp(30px,3vw,35px);line-height:1}.card-copy{min-width:0}.card-copy strong,.card-copy small{overflow-wrap:anywhere;display:block}.card-copy strong{margin-bottom:7px;font-family:Fredoka;font-size:clamp(18px,2vw,21px);line-height:1.12}.card-copy small{color:#65636a;max-width:220px;font-size:14px;line-height:1.35}.round-arrow{background:#ffffffb3;border-radius:50%;align-self:flex-end;place-items:center;width:32px;height:32px;margin-top:auto;font-size:18px;display:grid}.coral{background:#ffe1d8}.sky{background:#dceff4}.violet{background:#e8e1f7}.yellow{background:#fff0bd}.mint{background:#dff1e7}.pink{background:#f8dfe8}.tip{background:#fff7d8;border:1px dashed #e2bd57;border-radius:18px;align-items:center;gap:15px;margin:0 0 22px;padding:15px 22px;display:flex}.tip>span{font-size:25px}.tip strong,.tip p{display:inline}.tip strong{color:#765c18}.tip p{color:#6f6650;margin-left:7px}footer{text-align:center;color:#8b8582;border-top:1px solid #eee5dc;justify-content:center;gap:20px;padding:14px max(24px,50% - 540px);font-size:13px;display:flex}.practice-wrap{max-width:820px;padding:32px 0 70px}.back-button{cursor:pointer;color:#7664ae;background:0 0;border:0;padding:10px 0;font-weight:700}.practice-card{background:#fff;border:1px solid #ecdfd5;border-radius:30px;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:clamp(24px,5vw,48px);display:flex;box-shadow:0 18px 45px #4b3c3214}.practice-heading{flex:none;align-items:center;gap:20px;margin-bottom:34px;display:flex}.practice-heading h1{font-size:clamp(34px,6vw,52px)}.practice-heading h1.long-title{white-space:nowrap}.practice-heading p:last-child{color:#77727a;margin:8px 0 0}.big-icon{background:#fff1dc;border-radius:22px;flex:none;place-items:center;width:76px;height:76px;font-size:37px;display:grid}.play-button{color:#fff;cursor:pointer;background:#7863ba;border:0;border-radius:17px;width:100%;padding:18px;font-size:17px;font-weight:700;transition:transform .15s,box-shadow .15s;box-shadow:0 7px #594891}.play-button:disabled{cursor:wait;opacity:.68;transform:none;box-shadow:0 4px #594891}.play-button:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px #594891}.play-button span{margin-right:10px}.prompt{margin:31px 0 13px;font-size:18px;font-weight:700}.choices{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.choices button{cursor:pointer;background:#fffaf6;border:2px solid #e7ded6;border-radius:14px;min-height:52px;padding:10px;font-weight:600}.choices button:hover:not(:disabled){background:#f5f1fc;border-color:#927dcc}.choices .correct{background:#e5f6ed;border-color:#57ad87}.choices .wrong{background:#feeae7;border-color:#e47c76}.choices .dim{opacity:.55}.feedback{border-radius:17px;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;padding:17px;display:flex}.feedback.yay{background:#e3f5eb}.feedback.try{background:#fff0e0}.feedback span{color:#67646b}.feedback button{cursor:pointer;white-space:nowrap;background:#fff;border:0;border-radius:11px;padding:10px 14px;font-weight:700}.listen-steps{color:#77717b;justify-content:space-around;margin:30px 0;font-weight:700;display:flex}.reveal{text-align:center;background:#fff7e7;border-radius:17px;padding:20px}.reveal p{margin-top:0;font-weight:700}.music-line{flex-wrap:wrap;justify-content:center;gap:12px;font-family:Fredoka;font-size:17px;display:flex}.beat{font-size:28px}.outline-button{cursor:pointer;color:#6d58a8;background:#fff;border:2px solid #d7cae8;border-radius:14px;width:100%;padding:15px;font-weight:700}.next-link{cursor:pointer;color:#6d58a8;background:0 0;border:0;margin:22px auto 0;font-weight:700;display:block}.example-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:-8px 0 24px;display:grid}.example-meta span{background:#fff8ee;border-radius:13px;min-width:0;padding:13px}.example-meta small,.example-meta strong{display:block}.example-meta small{color:#8a8180;margin-bottom:3px}.example-meta strong{overflow-wrap:anywhere;text-transform:capitalize}.second-player{margin-top:16px}.step-pill{color:#6752a5;background:#eee9fa;border-radius:999px;margin:-4px 0 18px;padding:8px 13px;font-size:13px;font-weight:700;display:inline-block}.level-note{color:#736a64;background:#fff8e9;border-radius:12px;margin:18px 0 0;padding:12px 15px;font-size:14px}.chord-tone-section{background:#fff9f2;border:1px dashed #e4d6ec;border-radius:20px;margin-top:24px;padding:20px;animation:.18s ease-out softReveal;box-shadow:inset 0 0 0 1px #fffc}.tone-kicker{color:#765f9f;margin:0 0 14px;font-weight:800}.chord-tone-section .prompt{margin-top:24px}@keyframes softReveal{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media (width<=720px){.app-shell{min-height:auto}header{height:56px;padding:0 14px}.logo{gap:8px;font-size:15px}.logo span,.brand-mark{border-radius:10px;width:32px;height:32px}main{flex:none;width:min(100% - 26px,1080px)}.hero{grid-template-columns:minmax(0,1fr) 112px;gap:8px;min-height:118px;padding:14px 0 8px}.hero h1{letter-spacing:-1.5px;font-size:clamp(34px,9vw,44px)}.brand-mark{display:none}.mascot{place-items:center;height:96px;display:grid}.piano-face{border-width:3px;border-radius:16px;width:102px;height:62px;box-shadow:6px 7px #f4dfd3}.piano-face span{letter-spacing:4px;font-size:12px;top:12px}.piano-face i{border-width:1px;height:25px}.piano-face i:nth-of-type(2),.piano-face i:nth-of-type(4){height:18px}.sparkle.one{font-size:18px;top:-10px;right:0}.sparkle.two{opacity:.45;font-size:15px;bottom:8px;left:-18px}.activities-section{padding:8px 0}.section-title{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin-bottom:11px;display:grid}.section-title>div{min-width:0}.section-title h2{white-space:nowrap;font-size:clamp(19px,5vw,24px);line-height:1.06}.eyebrow{letter-spacing:1.5px;margin-bottom:3px;font-size:10px}.level-dropdown{flex:none;justify-self:end;width:auto;margin-left:0}.level-dropdown-button{gap:8px;width:auto;min-width:108px;min-height:38px;padding:8px 11px 8px 13px;font-size:13px}.dropdown-arrow{width:15px;height:15px}.level-dropdown-menu{border-radius:16px;min-width:150px;padding:6px;top:calc(100% + 6px);left:auto;right:0}.level-dropdown-menu button{border-radius:12px;padding:10px 12px}.activity-grid,.activity-grid.count-2,.activity-grid.count-3,.activity-grid.count-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.activity-card{border-radius:20px;flex-direction:column;align-items:stretch;min-height:148px;padding:13px;display:flex}.activity-card:hover{transform:none}.card-icon{margin-bottom:9px;font-size:28px}.card-copy strong{margin-bottom:4px;font-size:16.5px;line-height:1.08}.card-copy small{max-width:none;font-size:12.5px;line-height:1.24}.round-arrow{align-self:flex-end;width:28px;height:28px;margin-top:auto;font-size:16px}.tip{border-radius:15px;gap:10px;margin:6px 0 4px;padding:12px 14px;font-size:13px}.tip>span{font-size:21px}.tip strong,.tip p{margin:0;display:inline}.tip p{margin-left:4px}footer{text-align:center;flex-direction:column;padding:8px 16px 10px;font-size:12px}.practice-heading{align-items:flex-start}.practice-heading h1.long-title{letter-spacing:-1px;font-size:clamp(25px,6.4vw,35px)}.big-icon{width:58px;height:58px;font-size:29px}.choices{grid-template-columns:1fr}.feedback{flex-direction:column;align-items:stretch}.listen-steps{gap:5px;font-size:13px}.example-meta{gap:8px;margin-bottom:16px}.example-meta span{padding:11px}}@media (width<=440px){main{width:min(100% - 20px,1080px)}.hero{grid-template-columns:minmax(0,1fr) 92px;min-height:104px;padding-top:10px;padding-bottom:4px}.hero h1{font-size:clamp(31px,9.6vw,38px)}.mascot{height:82px}.piano-face{border-width:3px;border-radius:14px;width:86px;height:52px;box-shadow:5px 6px #f4dfd3}.piano-face span{letter-spacing:3px;font-size:10px;top:10px}.piano-face i{height:21px}.piano-face i:nth-of-type(2),.piano-face i:nth-of-type(4){height:15px}.section-title{gap:8px}.section-title h2{font-size:clamp(18px,5.1vw,21px)}.level-dropdown-button{min-width:104px;min-height:36px;padding:7px 10px 7px 12px;font-size:12.5px}.activity-card{min-height:136px;padding:12px}.card-icon{font-size:26px}.card-copy strong{font-size:16px}.card-copy small{font-size:12px}.tip{padding:11px 12px}.practice-card{border-radius:23px}.practice-heading{gap:12px}h1{letter-spacing:-1px}.logo strong{display:none}}@media (width<=360px){.activity-grid,.activity-grid.count-2,.activity-grid.count-3,.activity-grid.count-4{grid-template-columns:1fr;gap:9px}.activity-card{min-height:112px}.hero{grid-template-columns:minmax(0,1fr) 78px}.mascot{height:72px}.piano-face{width:74px;height:46px}.section-title{flex-direction:column;align-items:flex-start;display:flex}.section-title h2{white-space:normal}.level-dropdown{justify-self:start;margin-left:0}}@media (width<=340px){.example-meta{grid-template-columns:1fr}}.chord-choices{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,540px);margin-left:auto;margin-right:auto}.chord-tone-choices{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,520px);margin-left:auto;margin-right:auto}.chord-choices button:nth-child(5):last-child{grid-column:1/-1;justify-self:center;width:min(100%,320px)}.chord-practice{max-width:760px;padding-top:17.1px;padding-bottom:29.25px}.chord-practice .practice-card{padding:clamp(17.1px,2.95vw,29.25px)}.chord-practice .practice-heading{margin-bottom:19px}.chord-practice .big-icon{border-radius:16.4px;width:57px;height:57px;font-size:28.5px}.chord-practice .practice-heading h1{font-size:clamp(31px,5vw,46px)}.chord-first-section{flex-direction:column;flex:none;justify-content:flex-start;align-items:stretch;display:flex}.chord-practice .play-button{border-radius:12.8px;padding:11.9px 13.75px;font-size:16px;box-shadow:0 5px #594891}.chord-practice .play-button:active{transform:translateY(4px);box-shadow:0 1px #594891}.chord-practice .prompt{margin:17.1px 0 8.3px;font-size:17px}.chord-practice .choices{gap:6.9px}.chord-practice .choices button{min-height:40px;padding:6.9px 8.55px}.chord-practice .feedback{border-radius:11.9px;gap:8.55px;margin-top:9.25px;padding:9.25px 11.15px}.chord-practice .feedback div{line-height:1.25}.chord-practice .feedback span{margin-left:4px;display:inline}.chord-practice .feedback button{padding:6.9px 10.2px}.chord-practice .chord-tone-section{border-radius:14.75px;margin-top:11.9px;padding:11.9px}.chord-practice .tone-kicker{margin-bottom:8.55px}.chord-practice .chord-tone-section .prompt{margin-top:15.4px}@media (width>=900px){.chord-practice{padding-top:11.9px;padding-bottom:15.2px}.chord-practice .feedback{border-radius:11.25px;gap:7.1px;margin-top:7.1px;padding:7.1px 10px}.chord-practice .feedback button{border-radius:8.55px;padding:5.7px 9px}.chord-practice .chord-tone-section{border-radius:12.8px;margin-top:9px;padding:8.1px 9.5px}.chord-practice .tone-kicker{margin-bottom:6.4px;font-size:14px}.chord-practice .chord-tone-section .prompt{margin-top:10px}}@media (width<=720px){.chord-practice{padding-top:8.55px;padding-bottom:17.1px}.chord-practice .practice-card{padding:15.45px}.chord-practice .practice-heading{gap:8.55px;margin-bottom:13.75px}.chord-practice .big-icon{border-radius:13.75px;width:42.75px;height:42.75px;font-size:22px}.chord-practice .practice-heading h1{font-size:clamp(28px,7vw,36px)}.chord-practice .practice-heading p:last-child{margin-top:4px}.chord-practice .play-button{padding:10.45px 11.9px;font-size:15px}.chord-practice .prompt{margin:12.8px 0 6.9px;font-size:16px}.chord-practice .choices{gap:5.9px}.chord-practice .choices button{min-height:38px;padding:5.9px 6.9px}.chord-practice .feedback{gap:5px;margin-top:7.6px;padding:8.55px 9.5px;font-size:14px}.chord-practice .feedback button{padding:6.9px 8.55px}.chord-practice .chord-tone-section{border-radius:12.8px;margin-top:9.5px;padding:10.45px}.chord-practice .tone-kicker{margin-bottom:6.9px;font-size:14px}.chord-practice .chord-tone-section .prompt{margin-top:11.9px}.chord-practice .chord-choices{width:min(100%,430px)}.chord-practice .chord-tone-choices{width:min(100%,390px)}}@media (width<=440px){.chord-practice .practice-card{padding:12.8px}.chord-practice .practice-heading{margin-bottom:11.2px}.chord-practice .play-button{padding:9.5px 10.45px}.chord-practice .feedback{padding:7.6px 8.55px}.chord-practice .chord-tone-section{padding:9.5px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}