@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:Manrope,Arial,sans-serif;color:#253c35;background:#f7f8f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #db9456;outline-offset:4px}header{height:100px;border-bottom:1px solid #e3e7dc;display:flex;align-items:center;justify-content:space-between;margin:0 5.7%}.brand{font-size:37px;font-weight:800;letter-spacing:-2px;text-decoration:none;color:#253c35;display:flex;align-items:center}.brand-icon{background:#dce9be;border-radius:13px;width:39px;height:42px;font-size:31px;text-align:center;margin-right:10px;letter-spacing:0}.brand-dot{color:#729253}.header-label{font-size:10px;letter-spacing:2px;color:#7b857a;font-weight:700}.year{font-size:12px;border:1px solid #dfe4d7;border-radius:24px;padding:10px 15px}.year span{color:#809b58;margin-left:12px}main{max-width:1280px;margin:auto;padding:47px 28px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:37px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#7c8d62}h1{font-size:43px;line-height:1.2;letter-spacing:-1.8px;margin:16px 0}h1 span{color:#7a935d}.intro p{color:#82897e;font-size:13px}.lesson-tag{display:flex;gap:15px;align-items:center;margin-right:12px;font-size:9px;letter-spacing:1.5px;color:#88917e;line-height:2.2}.lesson-tag>span{font-size:40px;font-weight:500;color:#c5cfb5;letter-spacing:-2px}.lesson-tag b{font-size:12px;letter-spacing:0;color:#53604b}.workspace{display:grid;grid-template-columns:300px 1fr;gap:26px}aside{background:#eef1e6;border:1px solid #e2e7d8;border-radius:19px;padding:25px}.section-label{font-size:9px;letter-spacing:1.5px;font-weight:800;display:flex;justify-content:space-between;color:#7c8b65}.section-label span{font-size:18px}h2{font-size:17px;letter-spacing:-.5px;margin:12px 0 8px}.muted{font-size:11px;color:#8a9282;margin-bottom:22px}.bar-tabs{display:flex;background:#e3e8d9;border-radius:9px;padding:4px;margin-bottom:17px}.bar-tabs button{width:50%;border:0;background:none;padding:9px;border-radius:6px;color:#7c8670;font-size:11px;font-weight:700}.bar-tabs button.selected{background:#fff;color:#374c37;box-shadow:0 2px 4px #394c3510}.patterns{display:grid;gap:8px}.pattern{background:#f8f9f4;border:1px solid #e0e5d7;border-radius:10px;display:flex;align-items:center;height:53px;padding:0 13px;color:#485441}.pattern.selected{border-color:#859e61;background:#e5edda;box-shadow:0 0 0 1px #859e6120}.pattern .number{font-size:9px;color:#9ba48c;width:24px}.pattern svg{height:42px;width:155px}.pattern .check{margin-left:auto;color:#6f8c4b;font-size:14px}.tempo{border-top:1px solid #dce2d1;margin-top:22px;padding-top:20px}.tempo>div:first-child{display:flex;justify-content:space-between;align-items:center}.tempo label{font-size:12px;font-weight:700}output{font-weight:800;font-size:19px}output small{font-weight:500;font-size:9px;color:#8a947e}input[type=range]{width:100%;accent-color:#7d9859;height:4px;margin:19px 0 10px}.range-label{display:flex;justify-content:space-between;font-size:9px;color:#909981}.tip{display:flex;gap:10px;margin-top:21px}.tip>span{color:#a3af79;font-size:20px}.tip p{font-size:10px;line-height:1.9;color:#8a947d;margin:0}.tip b{font-weight:500;color:#657653}.practice{border:1px solid #e2e6db;border-radius:19px;background:#fffefb;padding:23px 30px;box-shadow:0 5px 20px #30432903}.practice-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.5px;color:#7b856f;font-weight:700}.practice-top i{display:inline-block;width:6px;height:6px;background:#91a96a;border-radius:50%;margin-right:7px}.time-signature{font-size:12px;letter-spacing:0;background:#f0f2e9;border-radius:6px;padding:6px 10px}.stage{height:267px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.orbit{position:absolute;border:1px solid #edf0e5;border-radius:50%;width:265px;height:210px;top:10px}.orbit-two{width:340px;height:260px;top:-14px;opacity:.65}.hands{width:230px;z-index:1;margin-top:-5px}.hands svg{overflow:visible;width:100%;height:151px}#leftHand,#rightHand{transition:transform .09s ease}#leftHand{transform:translateX(-13px) rotate(-4deg);transform-origin:100px 180px}#rightHand{transform:translateX(13px) rotate(4deg);transform-origin:220px 180px}.hands.clapping #leftHand{transform:translateX(10px) rotate(6deg)}.hands.clapping #rightHand{transform:translateX(-10px) rotate(-6deg)}#clapRays{opacity:0}.hands.clapping #clapRays{opacity:1}.spark{position:absolute;color:#c0cb9f;font-size:26px}.s1{top:62px;left:24%}.s2{right:23%;top:134px;font-size:19px}.stage-caption{font-size:11px;color:#939a87;margin-top:8px;z-index:1}.beat-dots{display:flex;gap:10px;margin-top:16px;z-index:1}.beat-dots span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#f0f3e9;color:#9aa58a;font-size:10px}.beat-dots span.active{background:#819b60;color:white}.score-wrap{border:1px solid #e7eadf;border-radius:12px;background:#fcfcf8;padding:15px 20px}.score-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:#98a18b}.score-label span:last-child{letter-spacing:0}#score svg{display:block;width:100%;height:115px}.note{fill:#30443a;stroke:#30443a}.note.active{fill:#d38b48;stroke:#d38b48}.note.hit{fill:#7c9b53;stroke:#7c9b53}.note.miss{fill:#cc795c;stroke:#cc795c}.controls{display:flex;justify-content:center;gap:11px;margin-top:23px}.controls button{border-radius:9px;padding:14px 20px;font-size:11px;font-weight:700}.primary{background:#344e3f;color:#fff;border:1px solid #344e3f;box-shadow:0 4px 8px #344e3f13}.secondary{background:transparent;color:#5a6d4c;border:1px solid #dbe2d0}.controls button span{margin-right:7px}.controls button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}.feedback{text-align:center;font-size:10px;color:#8a9480;min-height:30px;margin-top:16px;line-height:1.7}.feedback.success{color:#547d34;font-size:13px;font-weight:700}.feedback.retry{color:#a66e40;font-size:12px}.mic-info{text-align:center;color:#8c9581;font-size:9px}#micLight{display:inline-block;height:6px;width:6px;border-radius:50%;background:#98ad75;margin-right:4px}footer{padding:26px 0 30px;display:flex;justify-content:space-between;color:#939c87;font-size:10px}footer>span:last-child{font-size:8px;letter-spacing:1.7px}.footer-icon{font-size:17px;margin-right:8px;color:#8da16f}@media(min-width:1400px){main{padding-top:55px}.stage{height:290px}}@media(max-width:800px){header{height:77px}.header-label{display:none}main{padding:30px 18px}.intro{margin-bottom:25px}h1{font-size:34px}.lesson-tag{display:none}.workspace{grid-template-columns:1fr}aside{padding:20px}.patterns{grid-template-columns:repeat(5,1fr);gap:5px}.pattern{padding:4px;height:51px;justify-content:center}.pattern .number,.pattern .check{display:none}.pattern svg{width:100%}.tempo{margin-top:15px}.tip{display:none}.practice{padding:20px 15px}.stage{height:245px}footer>span:last-child{display:none}}@media(prefers-reduced-motion:reduce){#leftHand,#rightHand{transition:none}}

.variant-picker{display:flex;gap:8px;margin-top:18px;align-items:stretch}.variant-picker button{border:1px solid #e0e6d7;border-radius:9px;background:#fafbf6;color:#728167;padding:10px 12px;text-align:left;flex:1}.variant-picker button.selected{border-color:#819b60;background:#edf2e4;color:#354e3d}.variant-picker b{display:block;font-size:11px}.variant-picker small{display:block;font-size:8px;margin-top:4px;font-weight:400}.variant-picker .sample-preview{flex:0 0 auto;font-size:10px;text-align:center}.variant-picker button:disabled{opacity:.5;cursor:default}.stage{height:329px}.recorded-hands{width:240px;height:240px;flex-shrink:0;background-size:1440px 1200px;background-repeat:no-repeat;border-radius:20px;margin-top:3px;box-shadow:0 5px 18px #253c3515}.stage .orbit,.stage .spark{display:none}.stage-caption{margin-top:12px}.beat-dots{margin-top:10px}.recorded-hands.clapping{transform:none}@media(max-width:550px){.variant-picker{flex-wrap:wrap}.variant-picker .sample-preview{flex-basis:100%;padding:9px}.stage{height:329px}}

.recorded-hands{background-size:contain;background-position:center;box-shadow:none;border-radius:0}

.curriculum{border-bottom:1px solid #dce2d1;margin-bottom:23px;padding-bottom:17px}.curriculum .section-label{margin-bottom:12px}.curriculum button{width:100%;display:flex;gap:10px;align-items:center;background:transparent;border:1px solid transparent;border-radius:9px;padding:11px 9px;text-align:left;color:#7e8c6e}.curriculum button span{font-size:10px;opacity:.7}.curriculum button b{font-size:11px;line-height:1.5;font-weight:600}.curriculum button.selected{background:#dfe9cf;color:#354e3d;border-color:#b8c99e}.pattern-count{font-size:9px;color:#89977b;margin:0 0 10px}.patterns{max-height:302px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b5c49f transparent;padding-right:3px}.pattern{flex-shrink:0;width:100%;min-height:52px}.pattern svg{width:172px;height:43px}.hand-preview{display:flex;align-items:center;justify-content:space-between;margin-top:16px;color:#929d85;font-size:10px}.hand-preview button{padding:9px 12px;border:1px solid #dce4d0;border-radius:8px;color:#5b7147;background:#f5f8ef;font-size:10px}.hand-preview button:disabled{opacity:.5}.recorded-hands{position:relative;width:280px;height:240px;background:none!important;overflow:visible}.hand-layer{position:absolute;inset:0;background-image:url('assets/hands-side-layers-v3.png');background-size:200% 100%;background-repeat:no-repeat;transform-origin:30% 80%;will-change:transform}.far-hand{background-position:left center}.near-hand{background-position:right center}.tip #noteTip{display:inline}.lesson-tag{max-width:280px}.lesson-tag b{line-height:1.5;display:inline-block}@media(max-width:800px){.curriculum{display:grid;grid-template-columns:1fr;gap:3px}.curriculum .section-label{margin-bottom:4px}.patterns{grid-template-columns:1fr 1fr;max-height:230px}.pattern svg{width:100%}.pattern{padding:4px 8px}.stage{height:329px}}@media(max-width:420px){.recorded-hands{width:250px;height:225px}.controls{flex-wrap:wrap}.controls button{padding:12px}.hand-preview{font-size:9px}}
/* Sunny classroom palette */
:root{color:#61371e;background:#fff8e9}body{background:radial-gradient(ellipse at 85% 0%,#ffe99d88,transparent 48%),#fff8e9}header{border-color:#f0d9ab}.brand{color:#653515}.brand-icon{background:#ffd34f;color:#a64b0e;box-shadow:0 3px 0 #f1b624}.brand-dot{color:#ff8a28}.header-label{color:#9b6939}.year{border-color:#f4d39c;background:#fff0c8;color:#8b551f}.year span{color:inherit}.language-switch{display:flex;gap:4px;padding:4px;background:#ffedbe;border:1px solid #f3d496;border-radius:13px;margin-left:auto;margin-right:18px}.language-switch button{border:0;background:transparent;color:#905e2b;font-size:12px;font-weight:800;padding:9px 13px;border-radius:9px}.language-switch button.selected{color:#fff;background:#e97013;box-shadow:0 3px 0 #bc4f0b}.language-switch button:disabled{opacity:.6}.header-label{margin-left:auto;margin-right:30px}h1{color:#66371b}h1 span{color:#e47715}.eyebrow{color:#ba7320}.intro p{color:#946b43}.lesson-tag,.lesson-tag b{color:#9b652b}.lesson-tag>span{color:#efb64e}.workspace{gap:25px}aside{background:#fff0c9;border-color:#f4d28e;box-shadow:0 6px 0 #f1d99f66}.section-label{color:#a46a29}.muted,.pattern-count{color:#936b3e}.curriculum{border-color:#edce91}.curriculum button{color:#9c6b32}.curriculum button.selected{background:#ffdb70;color:#743d16;border-color:#efb638;box-shadow:0 3px 0 #eebc4944}.bar-tabs{background:#f8dda3}.bar-tabs button{color:#9c703f}.bar-tabs button.selected{color:#b15c17;background:#fffaf0}.pattern{background:#fffaf0;border-color:#efd9b0;color:#8c5d30}.pattern.selected{background:#ffe3a0;border-color:#ed9b2c;box-shadow:0 0 0 1px #f1b43d40}.pattern .number{color:#a17948}.pattern .check{color:#cb7018}.patterns{scrollbar-color:#e6b659 transparent}.tempo{border-color:#edcf94}.tempo label,output{color:#805020}output small,.range-label{color:#997144}input[type=range]{accent-color:#eb861d}.tip>span{color:#e5a531}.tip p,.tip b{color:#936b37}.practice{position:relative;background:#fffef9;border-color:#f0d8af;box-shadow:0 6px 0 #f0dcba66}.practice-top{color:#a16b32}.practice-top i{background:#ef9a22}.time-signature{background:#ffedba;color:#a4641c}.hand-preview{color:#9c764b}.hand-preview button{background:#fff1d3;border-color:#efce93;color:#9b5e1f}.stage{background:radial-gradient(ellipse at center,#fff0c1 0%,#fff9e8 48%,transparent 72%);border-radius:18px}.stage-caption{color:#9c7448}.beat-dots span{background:#ffedb8;color:#9a692d}.beat-dots span.active{background:#ef8b20;color:#fff;box-shadow:0 3px 0 #ce6a0c}.score-wrap{background:#fff9e9;border-color:#eed7a7}.score-label{color:#9f7b4b}.note{fill:#68442c;stroke:#68442c}.note.active{fill:#ed7b13;stroke:#ed7b13}.note.hit{fill:#36906c;stroke:#36906c}.primary{background:#e87116;border-color:#d4600b;box-shadow:0 4px 0 #be510d;color:white}.primary:hover{background:#f08423}.secondary{background:#ffdf78;border-color:#eebc3d;color:#82501e;box-shadow:0 3px 0 #e7ba5244}.feedback{color:#986c3d;font-size:11px}.feedback.success{color:#327957}.feedback.retry{color:#b46825}.mic-info{color:#977448}footer{color:#a17b4c}.footer-icon{color:#e3a038}.celebration{position:absolute;inset:100px 0 75px;z-index:5;pointer-events:none;display:grid;place-items:center}.celebration-card{display:flex;flex-direction:column;align-items:center;gap:9px;background:#fff4cbf5;border:3px solid #ffc84e;border-radius:24px;padding:24px 30px;box-shadow:0 10px 35px #ab5a1926;animation:party-pop .45s ease-out}.party-popper{font-size:56px}.celebration-card strong{color:#c65c14;font-size:27px;text-align:center}.celebration-card>span:last-child{font-size:14px;color:#8a592a}.confetti{position:absolute;inset:50%}.confetti i{position:absolute;width:10px;height:17px;border-radius:2px;background:var(--color);animation:confetti-burst 1.9s var(--delay) cubic-bezier(.16,.7,.4,1) both}.confetti i:nth-child(3n){border-radius:50%;width:13px;height:13px}.confetti i:nth-child(2n){z-index:6}@keyframes party-pop{from{opacity:0;transform:scale(.65) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes confetti-burst{0%{opacity:0;transform:translate(0,60px) rotate(0)}15%{opacity:1}65%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}100%{opacity:0;transform:translate(var(--x),180px) rotate(var(--r))}}@media(prefers-reduced-motion:reduce){.celebration-card,.confetti i{animation:none}.confetti{display:none}}@media(max-width:1000px){.header-label{display:none}h1{font-size:37px}.lesson-tag{max-width:230px}.controls button{padding:13px 14px}.language-switch{margin-left:auto}}@media(max-width:550px){.year{display:none}.language-switch{margin-right:0}h1{font-size:30px}.practice-top{font-size:8px;letter-spacing:.6px}.celebration-card{padding:20px}.celebration-card strong{font-size:23px}.hand-preview{gap:8px}.hand-preview button{flex-shrink:0}}
h1 .hero-main{color:#66371b}.section-label>span[data-i18n]{font-size:9px}

/* Playful red accents and a little metronome friend. */
.intro{position:relative;min-height:186px}.intro>div:first-child{position:relative;z-index:1;max-width:66%}.rhythm-buddy{width:115px;height:125px;position:absolute;right:245px;bottom:-5px;transform:rotate(6deg);pointer-events:none}.intro h1{font-size:41px;max-width:680px}.brand-icon{background:#ffcb43}.brand-dot{color:#eb5145}.language-switch button.selected{background:#e94e42;box-shadow:0 3px 0 #b5332c}.primary{background:#e94e42;border-color:#cb3b32;box-shadow:0 4px 0 #ae302a}.primary:hover{background:#f36150}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #ae302a}.eyebrow{color:#c55436}h1 span:not(.hero-main){color:#e95b38}.curriculum button{gap:12px;min-height:55px}.curriculum button>span{flex:0 0 31px;height:31px;display:grid;place-items:center;border-radius:11px;background:#ffe2a6;color:#ae6325;opacity:1;font-size:12px;font-weight:800}.curriculum button:nth-of-type(2)>span{background:#ffcab7;color:#b74631}.curriculum button:nth-of-type(3)>span{background:#ffd67b;color:#8c5418}.curriculum button.selected{background:#ffe0bf;border-color:#f49166;box-shadow:0 3px 0 #eeaa7344}.curriculum button.selected>span{background:#ed5c48;color:white;transform:rotate(-6deg)}.bar-tabs button.selected{color:#c54431}.pattern.selected{border-color:#ec8562;background:#ffe6c4}.pattern .check{color:#d34f36}.time-signature{background:#ffe0cf;color:#ba4a34;transform:rotate(5deg);font-size:14px;border:1px solid #f6b29a}.practice-top i{background:#ec6150}.beat-dots{gap:14px}.beat-dots span{width:29px;height:29px;font-size:12px;font-weight:800;border:1px solid #f3cd7d;box-shadow:0 2px 0 #f4d59e}.beat-dots span:nth-child(even){background:#ffe0c8;border-color:#f5b79b}.beat-dots span.active{background:#ed5a46;border-color:#d64233;box-shadow:0 3px 0 #bb3e30;color:white}.stage .spark{display:block;color:#efb936;font-size:23px}.stage .s1{left:12%;top:72px;transform:rotate(-12deg)}.stage .s2{right:12%;top:143px;color:#f18164;font-size:30px}.score-wrap{border-width:2px}.lesson-tag>span{color:#ed6551}.lesson-tag{max-width:230px}.hand-preview button{border-color:#f1b19a;background:#fff0e3;color:#b85136}.celebration-card{border-color:#ef6a51;background:#fff0b9}.celebration-card strong{color:#da4a32}.controls button{min-height:45px}.footer-icon{display:inline-block;background:#ffdc83;color:#bc5535;border-radius:9px;padding:4px 9px;transform:rotate(-7deg)}@media(min-width:1100px){.intro h1{max-width:650px}.rhythm-buddy{right:240px}}@media(max-width:1100px){.rhythm-buddy{right:190px;width:85px;height:95px;bottom:-12px}.intro h1{font-size:35px}.lesson-tag{max-width:195px}}@media(max-width:800px){.intro>div:first-child{max-width:calc(100% - 95px)}.rhythm-buddy{right:0;bottom:16px;width:95px;height:108px}.intro h1{font-size:34px}}@media(max-width:550px){.intro>div:first-child{max-width:100%}.intro h1{font-size:30px;padding-right:25px}.intro p{max-width:76%;line-height:1.6}.rhythm-buddy{right:-6px;bottom:-14px;width:85px;height:95px}.eyebrow{font-size:9px;letter-spacing:1px}.curriculum button>span{flex-basis:34px;height:34px}.stage .s1{left:5%}.stage .s2{right:5%}}

.metronome-option{margin:19px auto 0;padding:13px 16px;background:#fff1d4;border:1px solid #efcd91;border-radius:12px;max-width:470px}.metronome-option label{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:800;color:#a6502d;cursor:pointer}.metronome-option input{width:19px;height:19px;accent-color:#e95b46;cursor:pointer}.metronome-option p{font-size:10px;color:#946a3a;line-height:1.6;margin:7px 0 0;text-align:center}.metronome-option input:disabled{cursor:default}

.meter-picker{border-bottom:1px solid #edce91;padding-bottom:15px;margin-bottom:20px}.meter-buttons{display:flex;gap:8px;margin-top:12px}.meter-buttons button{flex:1;border:1px solid #efc68c;background:#fff8e6;color:#a25c30;padding:11px 6px;border-radius:11px;font-size:20px;font-weight:800}.meter-buttons button.selected{background:#ed5c48;color:#fff;border-color:#cf4938;box-shadow:0 3px 0 #bd3c2e}.meter-buttons button:disabled{opacity:.6;cursor:default}#meterHint{font-size:10px;line-height:1.7;color:#9c6a38;margin:12px 0 0}

.dot-tip{display:inline-block;margin:7px 0;color:#b25c32;line-height:1.8}.note .duration-dot{fill:inherit}

.teacher-banner{display:flex;gap:20px;align-items:center;background:#ffedc6;border:1px solid #f2c689;border-radius:17px;padding:21px 25px;margin-top:28px}.teacher-mark{display:grid;place-items:center;width:52px;height:57px;flex-shrink:0;border-radius:14px;background:#e95b46;color:#fff1b8;font-size:32px;transform:rotate(-7deg)}.teacher-banner>div>span{display:block;font-size:9px;font-weight:800;letter-spacing:1.5px;color:#b06435;margin-bottom:6px}.teacher-banner strong{font-size:18px;color:#7d3e20}.teacher-banner p{font-size:11px;color:#9f6b3c;margin:6px 0 0;line-height:1.6}.teacher-banner a{margin-left:auto;color:#bc452f;font-size:12px;font-weight:800;text-decoration:none;background:#fff8e6;border:1px solid #efbf8d;border-radius:10px;padding:13px 16px;line-height:1.5}.teacher-banner a:hover{background:#ffe0a9}.teacher-banner a:focus-visible{outline:3px solid #e95b46;outline-offset:4px}@media(max-width:600px){.teacher-banner{flex-wrap:wrap;padding:19px;gap:14px}.teacher-banner>div{flex:1;min-width:180px}.teacher-banner a{width:100%;text-align:center;margin:0}.teacher-banner strong{font-size:17px}}

.site-home{flex:none;color:#8b551f;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}.site-home:hover{text-decoration:underline}

/* Keep the current language visible; reveal alternatives on hover or keyboard focus. */
.language-switch{position:relative;display:flex;gap:2px;padding:3px;margin-left:10px;margin-right:0;z-index:10}
.language-switch button{display:none;padding:7px 9px;font-size:11px}
.language-switch button.selected{display:inline-flex}
.language-switch:not(:has(.selected)) button:first-child{display:inline-flex}
.language-switch:hover button,.language-switch:focus-within button{display:inline-flex}