:root{--cream:#fff6e4;--paper:#fbefd6;--parchment:#f3e1ba;--ink:#2a1e14;--ink2:#4b3826;--ink3:#8a6e4f;--gold:#e8a93c;--gold-deep:#b37a14;--gold-lite:#ffd987;--coral:#ff6b6b;--coral-deep:#d84545;--mint:#3ecf8e;--mint-deep:#2aa872;--sky:#4fb4ff;--sky-deep:#2a8bdb;--lilac:#9c7ce8;--lilac-deep:#7452c8;--berry:#e84f8c;--berry-deep:#b8306a;--peach:#ffb27d;--peach-deep:#e08650;--correct:#3ecf8e;--wrong:#ff6b6b;--r1:14px;--r2:22px;--r3:32px;--r4:48px;--serif:"Playfair Display","EB Garamond",Georgia,serif;--sans:"Space Grotesk","Inter",-apple-system,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--bounce:cubic-bezier(0.34,1.56,0.64,1);--squish:cubic-bezier(0.68,-0.3,0.32,1.6);--soft:cubic-bezier(0.2,0.8,0.3,1);--bg:var(--cream);--bg2:var(--paper);--bg3:var(--parchment);--bg4:var(--ink3);--text:var(--ink);--text2:var(--ink2);--text3:var(--ink3);--gold2:var(--gold-deep);--gold-bg:rgba(232,169,60,.08);--green:var(--mint);--green-bg:rgba(62,207,142,.14);--yellow:var(--gold);--yellow-bg:rgba(232,169,60,.14);--orange:var(--peach);--orange-bg:rgba(255,178,125,.14);--red:var(--coral);--red-bg:hsla(0,100%,71%,.14);--blue:var(--sky);--blue-bg:rgba(79,180,255,.14);--coral-bg:hsla(0,100%,71%,.12);--mint-bg:rgba(62,207,142,.12);--peach-bg:rgba(255,178,125,.12);--lilac-bg:rgba(156,124,232,.12);--sky-bg:rgba(79,180,255,.12);--r:var(--r1)}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes keysFloat{0%,to{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}@keyframes speakPulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes sn-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes sn-float-slow{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}@keyframes sn-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.025)}}@keyframes sn-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes sn-wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes sn-blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.08)}}@keyframes sn-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.04)}}@keyframes sn-spin{to{transform:rotate(1turn)}}@keyframes sn-flame{0%,to{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08) rotate(2deg)}}@keyframes sn-candle{0%,to{opacity:1;transform:scale(1)}25%{opacity:.85;transform:scale(1.05,.96)}50%{opacity:.92;transform:scale(.96,1.08)}75%{opacity:.88;transform:scale(1.02,.98)}}@keyframes sn-metro{0%,to{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}@keyframes sn-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes sn-noteRise{0%{opacity:0;transform:translate(-50%) scale(.8) rotate(-10deg)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-140px) scale(1.3) rotate(20deg)}}@keyframes sn-pageTurn{0%{opacity:0;transform:rotateY(-8deg) translateX(40px)}to{opacity:1;transform:rotateY(0) translateX(0)}}@keyframes sn-confetti{0%{transform:translateY(-20px) rotate(0deg);opacity:1}to{transform:translateY(120vh) rotate(2turn);opacity:0}}@keyframes sn-celeb{0%{transform:scale(.5) rotate(-12deg);opacity:0}55%{transform:scale(1.2) rotate(6deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes sn-plant-sway{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes sn-ripple{0%{transform:translate(-50%,-50%) scale(.6);opacity:.55}to{transform:translate(-50%,-50%) scale(2.2);opacity:0}}.sn-btn{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,filter .2s;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--sans);font-weight:800;border:3px solid var(--ink);border-radius:var(--r2);text-transform:uppercase;letter-spacing:.02em}.sn-btn:hover{transform:translateY(-3px)}.sn-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--shadow,var(--gold-deep))!important;transition-duration:.05s}.sn-chunky{box-shadow:0 6px 0 var(--shadow,var(--gold-deep))}.sn-staff-bg{background-image:repeating-linear-gradient(180deg,transparent 0 28px,rgba(179,122,20,.08) 28px 29px,transparent 29px 36px,rgba(179,122,20,.08) 36px 37px,transparent 37px 44px,rgba(179,122,20,.08) 44px 45px,transparent 45px 52px,rgba(179,122,20,.08) 52px 53px,transparent 53px 60px,rgba(179,122,20,.08) 60px 61px,transparent 61px 160px)}@keyframes bgDrift{0%{background-position:0 0}50%{background-position:100% 100%}to{background-position:0 0}}@keyframes goldGlow{0%,to{box-shadow:0 0 0 hsla(39,45%,61%,0)}50%{box-shadow:0 0 24px hsla(39,45%,61%,.22)}}@keyframes cardIn{0%{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes flamePulse{0%,to{transform:scale(1) rotate(-2deg);filter:drop-shadow(0 0 4px rgba(251,146,60,.4))}50%{transform:scale(1.12) rotate(2deg);filter:drop-shadow(0 0 10px rgba(251,146,60,.7))}}@keyframes confettiFall{0%{transform:translateY(-20vh) rotate(0deg);opacity:1}80%{opacity:1}to{transform:translateY(110vh) rotate(2turn);opacity:0}}@keyframes correctFlash{0%{box-shadow:inset 0 0 0 0 rgba(74,222,128,0)}30%{box-shadow:inset 0 0 120px 0 rgba(74,222,128,.25)}to{box-shadow:inset 0 0 0 0 rgba(74,222,128,0)}}@keyframes wrongShake{0%,to{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(8px)}45%{transform:translateX(-6px)}60%{transform:translateX(6px)}75%{transform:translateX(-3px)}90%{transform:translateX(3px)}}@keyframes noteFloat{0%{transform:translate(-50%) scale(.9);opacity:0}15%{transform:translate(-50%,-10px) scale(1);opacity:1}to{transform:translate(-50%,-90px) scale(1.1);opacity:0}}@keyframes watermarkSway{0%,to{transform:translate(-50%,-50%) rotate(-4deg) scale(1);opacity:.05}50%{transform:translate(-50%,-50%) rotate(-2deg) scale(1.03);opacity:.08}}@keyframes metronomeTick{0%,to{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}@keyframes pageTurnIn{0%{opacity:0;transform:translateX(24px) rotateY(6deg);transform-origin:left center}to{opacity:1;transform:translateX(0) rotateY(0)}}@keyframes achievementPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1);opacity:1}}@keyframes ringDraw{0%{stroke-dashoffset:var(--ring-circ,220)}to{stroke-dashoffset:var(--ring-target,0)}}@keyframes cleffyBreathe{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.015)}}@keyframes cleffyBounce{0%,to{transform:translateY(0) scale(1) rotate(0deg)}25%{transform:translateY(-8px) scale(1.05) rotate(-2deg)}50%{transform:translateY(-12px) scale(1.1) rotate(0deg)}75%{transform:translateY(-8px) scale(1.05) rotate(2deg)}}@keyframes cleffyBlink{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}@keyframes cleffyWave{0%,to{transform:rotate(-10deg)}50%{transform:rotate(20deg)}}@keyframes cleffyZzz{0%,to{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}.cleffy-breathe{animation:cleffyBreathe 3s ease-in-out infinite}.cleffy-bounce{animation:cleffyBounce 1.1s var(--bounce) infinite}.cleffy-blink{animation:cleffyBlink 4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}.cleffy-wave{animation:cleffyWave .8s ease-in-out infinite;transform-origin:60px 80px}.cleffy-zzz{animation:cleffyZzz 2s ease-in-out infinite}@keyframes bigCelebrateIn{0%{transform:scale(.3) rotate(-8deg);opacity:0}50%{transform:scale(1.15) rotate(3deg);opacity:1}70%{transform:scale(.95) rotate(-1deg)}to{transform:scale(1) rotate(0deg);opacity:1}}@keyframes bigCelebrateFloat{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(1deg)}}.sonata-big-celebration{font-family:var(--serif);font-size:64px;font-weight:400;font-style:italic;background:linear-gradient(135deg,#ffd993,#c8a96e,#ff9f7e);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px hsla(39,45%,61%,.35);animation:bigCelebrateIn .6s var(--bounce) both,bigCelebrateFloat 2.4s ease-in-out .6s infinite;display:inline-block;letter-spacing:-.02em}.sonata-staff-bg{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(180deg,transparent 0,transparent 36px,hsla(39,45%,61%,.045) 0,hsla(39,45%,61%,.045) 37px,transparent 0,transparent 43px,hsla(39,45%,61%,.045) 0,hsla(39,45%,61%,.045) 44px,transparent 0,transparent 50px,hsla(39,45%,61%,.045) 0,hsla(39,45%,61%,.045) 51px,transparent 0,transparent 57px,hsla(39,45%,61%,.045) 0,hsla(39,45%,61%,.045) 58px,transparent 0,transparent 64px,hsla(39,45%,61%,.045) 0,hsla(39,45%,61%,.045) 65px,transparent 0,transparent 140px)}html.parchment .sonata-staff-bg{background-image:repeating-linear-gradient(180deg,transparent 0,transparent 36px,rgba(139,106,43,.08) 0,rgba(139,106,43,.08) 37px,transparent 0,transparent 43px,rgba(139,106,43,.08) 0,rgba(139,106,43,.08) 44px,transparent 0,transparent 50px,rgba(139,106,43,.08) 0,rgba(139,106,43,.08) 51px,transparent 0,transparent 57px,rgba(139,106,43,.08) 0,rgba(139,106,43,.08) 58px,transparent 0,transparent 64px,rgba(139,106,43,.08) 0,rgba(139,106,43,.08) 65px,transparent 0,transparent 140px)}.menu-cat-lessons{--cat:#e4c987;--cat-bg:hsla(43,63%,71%,.08)}.menu-cat-drill{--cat:#ff9f7e;--cat-bg:rgba(255,159,126,.1)}.menu-cat-sight{--cat:#7fd8be;--cat-bg:rgba(127,216,190,.1)}.menu-cat-rhythm{--cat:#b8a6e0;--cat-bg:rgba(184,166,224,.1)}.menu-cat-library{--cat:#ffd993;--cat-bg:rgba(255,217,147,.1)}.menu-cat-progress{--cat:#8bc9ff;--cat-bg:rgba(139,201,255,.1)}.menu-cat-neutral{--cat:#c8a96e;--cat-bg:hsla(39,45%,61%,.06)}.sonata-menu-btn{background:linear-gradient(135deg,var(--cat-bg,hsla(39,45%,61%,.04)) 0,var(--bg2) 70%)!important;border:1px solid hsla(39,45%,61%,.15)}.sonata-menu-btn:hover{border-color:var(--cat,hsla(39,45%,61%,.35))!important;box-shadow:0 10px 28px -8px color-mix(in srgb,var(--cat,#c8a96e) 35%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--cat,#c8a96e) 14%,transparent) 0,var(--bg2) 70%)!important}.sonata-menu-btn .menu-btn-emoji{font-size:24px;line-height:1;margin-bottom:6px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}@keyframes plantSway{0%,to{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}.sonata-plant{animation:plantSway 4.5s ease-in-out infinite;transform-origin:bottom center;display:inline-block}.sonata-page,body{background:radial-gradient(ellipse at 20% 10%,hsla(39,45%,61%,.07),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(139,92,246,.05),transparent 55%),radial-gradient(ellipse at 50% 50%,hsla(39,45%,61%,.03),transparent 70%),#0c0a09;background-size:200% 200%,200% 200%,200% 200%,100% 100%;background-attachment:fixed;animation:bgDrift 40s ease-in-out infinite}html.native .sonata-page,html.native body{animation:none;background-attachment:scroll}.sonata-app{animation:fadeUp .4s ease}html.native .sonata-app{animation:none}.sonata-menu-btn{position:relative;overflow:hidden;animation:cardIn .55s var(--bounce) both;animation-delay:calc(var(--i, 0) * 55ms);transition:transform .28s var(--bounce),border-color .25s var(--soft),box-shadow .28s var(--soft),background .28s var(--soft)!important}.sonata-menu-btn:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),hsla(39,45%,61%,.18),transparent 60%);opacity:0;transition:opacity .3s ease;pointer-events:none}.sonata-menu-btn:hover{transform:translateY(-5px) scale(1.02)}.sonata-menu-btn:hover:before{opacity:1}.sonata-menu-btn:active{transform:translateY(-1px) scale(.96);transition-duration:.08s}.sonata-flame{display:inline-block;animation:flamePulse 2s ease-in-out infinite;transform-origin:center bottom}.sonata-menu-title-wrap{position:relative;display:inline-block;padding:0 8px}.sonata-menu-watermark{position:absolute;left:50%;top:52%;font-family:var(--serif);font-style:italic;font-size:240px;font-weight:400;color:var(--gold);pointer-events:none;z-index:0;animation:watermarkSway 12s ease-in-out infinite;white-space:nowrap}.sonata-menu-title{position:relative;z-index:1}.sonata-menu-title-underline{display:block;width:80px;height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}.sonata-staff-divider{position:relative;height:18px;margin:24px 0;opacity:.35}.sonata-staff-divider:after,.sonata-staff-divider:before,.sonata-staff-divider>span{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,hsla(39,45%,61%,.55),transparent)}.sonata-staff-divider:before{top:2px}.sonata-staff-divider:after{bottom:2px}.sonata-staff-divider>span:first-child{top:6px}.sonata-staff-divider>span:nth-child(2){top:10px}.sonata-staff-divider>span:nth-child(3){top:14px}.sonata-confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}.sonata-confetti-piece{position:absolute;top:-20px;width:8px;height:14px;border-radius:2px;animation:confettiFall linear forwards}.sonata-correct-flash{animation:correctFlash .7s ease-out}.sonata-wrong-shake{animation:wrongShake .5s ease-in-out}.sonata-float-note{position:absolute;left:50%;bottom:100%;font-family:var(--serif);font-size:28px;color:var(--gold);pointer-events:none;animation:noteFloat 1.1s ease-out forwards;text-shadow:0 0 10px hsla(39,45%,61%,.4)}.sonata-metronome{display:inline-block;width:14px;height:18px;position:relative;vertical-align:middle}.sonata-metronome:before{content:"";position:absolute;left:50%;bottom:0;width:2px;height:16px;margin-left:-1px;background:var(--gold);transform-origin:center bottom;animation:metronomeTick 1s ease-in-out infinite}.sonata-achievement-pop{animation:achievementPop .5s cubic-bezier(.2,.9,.3,1.3) both}.sonata-page-enter{animation:pageTurnIn .45s cubic-bezier(.2,.8,.3,1) both}html.native .sonata-page-enter{animation:none}.sonata-primary-btn{transition:transform .22s var(--bounce),box-shadow .25s var(--soft)}.sonata-primary-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 28px -6px hsla(39,45%,61%,.55),0 0 0 1px hsla(39,45%,61%,.35)}.sonata-primary-btn:active{transform:translateY(0) scale(.94);transition-duration:.08s}.sonata-glow-active{animation:goldGlow 2.8s ease-in-out infinite}.abcjs-note,.abcjs-note_selected{fill:var(--ink);stroke:var(--ink)}.abcjs-beam,.abcjs-staff{stroke:var(--ink)}.abcjs-beam{fill:var(--ink)}.abcjs-ledger,.abcjs-stem{stroke:var(--ink)}.abcjs-bar,.abcjs-brace{stroke:var(--ink);fill:var(--ink)}.abcjs-accidental,.abcjs-clef,.abcjs-dot,.abcjs-dynamics,.abcjs-flag,.abcjs-key-signature,.abcjs-rest,.abcjs-time-signature{fill:var(--ink)}.abcjs-decoration{fill:var(--ink);stroke:var(--ink)}.sonata-notation text{fill:var(--ink)}.speak-playing{animation:speakPulse 1.5s ease-in-out infinite}.sonata-piano-container{--key-w:44px;--key-h:160px;--bkey-w:28px;--bkey-h:100px;-webkit-overflow-scrolling:touch;touch-action:manipulation}.sonata-key-black,.sonata-key-white{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}@media (max-width:640px){.sonata-page>div{padding:16px!important}.sonata-header h1{font-size:24px!important}.sonata-header{padding:4px 0 14px!important}.sonata-menu-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}.sonata-menu-title{font-size:32px!important;line-height:1.15!important}.sonata-menu{padding:36px 8px 28px!important}.sonata-menu-btn{padding:18px 16px!important}.sonata-piano-container{--key-w:38px!important;--key-h:140px!important;--bkey-w:24px!important;--bkey-h:88px!important;padding:12px 0 4px!important;overflow-x:auto!important}.sonata-notation{padding:16px 4px!important;min-height:170px!important;overflow-x:auto!important}.sonata-notation svg{max-width:none!important}.sonata-answers{gap:8px!important}.sonata-answers button{padding:14px 10px!important;font-size:15px!important;min-width:58px!important;min-height:48px!important}.sonata-teach-text{padding:22px!important;font-size:17px!important;line-height:1.6!important;min-height:140px!important}.sonata-teach-row{gap:10px!important}.sonata-speak-col button{width:36px!important;height:36px!important}.sonata-teach-nav button{padding:14px 24px!important;font-size:15px!important;min-height:48px!important}.sonata-config-chips{gap:8px!important}.sonata-config-chips button{padding:12px 16px!important;font-size:13px!important;min-height:44px!important}.sonata-big-score{font-size:44px!important}.sonata-lesson-card{padding:16px!important;gap:12px!important}.sonata-lesson-num{font-size:26px!important;width:32px!important}.sonata-piece-card{padding:14px!important}.sonata-score-container{overflow-x:auto!important;-webkit-overflow-scrolling:touch}.sonata-continue-card{padding:16px 18px!important}.sonata-step-dots{gap:4px!important}.sonata-streak-banner{font-size:12px!important;padding:7px 16px!important}.sonata-primary-btn{padding:16px 28px!important;font-size:15px!important;min-height:50px!important}.sonata-stats-row{gap:10px!important}.sonata-stats-row>div{padding:14px!important}.sonata-stats-row .sonata-stat-value{font-size:26px!important}.sonata-drill-top{flex-wrap:wrap!important;gap:6px!important}.sonata-search-input{font-size:14px!important;padding:12px 14px!important}.sonata-onboarding-title{font-size:28px!important}.sonata-score-controls{gap:6px!important;padding:8px 0!important}.sonata-score-controls button{padding:8px 14px!important;font-size:12px!important;min-height:36px!important}}@media (max-width:380px){.sonata-menu-grid{grid-template-columns:1fr!important}.sonata-piano-container{--key-w:32px!important;--key-h:120px!important;--bkey-w:20px!important;--bkey-h:74px!important}.sonata-menu-title{font-size:28px!important}.sonata-teach-text{padding:16px!important;font-size:15px!important}.sonata-answers button{min-width:50px!important;padding:12px 6px!important;font-size:13px!important}}@media (min-width:768px){.sonata-app{max-width:900px!important;margin:0 auto!important}.sonata-menu-grid{grid-template-columns:1fr 1fr 1fr!important;gap:16px!important;max-width:760px!important}.sonata-menu-title{font-size:64px!important;letter-spacing:-.025em!important}.sonata-menu-watermark{font-size:360px!important}.sonata-menu-title-underline{width:120px!important}.sonata-menu{padding:72px 32px 48px!important}.sonata-menu-btn{padding:26px 22px!important}.sonata-teach-text{font-size:22px!important;padding:40px!important;line-height:1.6!important;min-height:260px!important}.sonata-teach-row{max-width:820px!important;margin:0 auto!important}.sonata-speak-col button{width:44px!important;height:44px!important;font-size:15px!important}.sonata-teach-spacer{width:44px!important}.sonata-notation{min-height:240px!important;padding:28px 24px!important}.sonata-answers button{min-width:72px!important;padding:18px 14px!important}.sonata-answers button,.sonata-primary-btn{font-size:17px!important;min-height:60px!important}.sonata-primary-btn{padding:18px 36px!important}.sonata-piano-container{--key-w:50px!important;--key-h:170px!important;--bkey-w:32px!important;--bkey-h:108px!important}}@media (min-width:1024px){.sonata-app{max-width:1100px!important}.sonata-library-wrap{display:grid!important;grid-template-columns:380px 1fr!important;gap:28px!important;align-items:start!important}.sonata-library-list{max-height:calc(100vh - 180px)!important;overflow-y:auto!important;padding-right:8px!important}.sonata-library-detail{position:sticky!important;top:20px!important}.sonata-lesson-wrap{display:grid!important;grid-template-columns:1fr 1fr!important;gap:36px!important;align-items:start!important}.sonata-piano-container{--key-w:56px!important;--key-h:190px!important;--bkey-w:36px!important;--bkey-h:120px!important}}