:root{color:#1d2549;font-synthesis:none;background:#fff9f2;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 88% 5%,#ffd88385,#0000 26rem),linear-gradient(#fffaf4 0%,#f6efe7 70%,#e9edf8 100%);min-width:320px;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:3px;outline:3px solid #5d7ee8}.app-shell{min-height:100vh}.topbar{justify-content:space-between;align-items:center;gap:20px;width:min(1200px,100% - 40px);height:76px;margin:auto;display:flex}.brand{color:#17214a;background:0 0;border:0;align-items:center;gap:9px;font-size:18px;font-weight:900;display:flex}.brand span{color:#ffc85c;background:#26356f;border-radius:12px;place-items:center;width:37px;height:37px;font-family:Georgia;font-size:25px;display:grid}.topbar nav{background:#fffdf9;border:1px solid #e9e0d8;border-radius:14px;gap:3px;padding:4px;display:flex}.topbar nav button{color:#6f7896;background:0 0;border:0;border-radius:10px;padding:8px 11px;font-size:13px;font-weight:700}.profile-button{color:#26356f;background:#fff;border:0;border-radius:99px;padding:8px 13px;font-weight:800;box-shadow:0 5px 16px #27366b15}.page{width:min(1120px,100% - 40px);margin:0 auto;padding:50px 0 68px}.welcome{grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;min-height:calc(100vh - 76px);padding-top:0;display:grid}.eyebrow{color:#9b7046;text-transform:uppercase;letter-spacing:.13em;margin:0 0 11px;font-size:11px;font-weight:850}.welcome h1,.section-heading h1,.form-page h1{letter-spacing:-.06em;color:#20284e;margin:0;font-family:Georgia,serif;font-size:clamp(46px,7vw,75px);line-height:1.01}.welcome h1 em,.section-heading h1 em{color:#e67262;font-style:normal}.lead{color:#626c85;margin:22px 0 28px;font-size:20px;line-height:1.5}.actions{flex-wrap:wrap;gap:12px;display:flex}.primary,.secondary,.sound-button,.danger{border:0;border-radius:13px;padding:13px 18px;font-size:14px;font-weight:800;transition:transform .2s,box-shadow .2s}.primary{color:#fff;background:#26356f;box-shadow:0 10px 20px #26356f30}.secondary{color:#35406f;background:#fff;border:1px solid #e0d9d2}.sound-button{color:#27305c;background:#f8c75c}.danger{color:#b14b4b;background:#fff0ee}.primary:hover,.secondary:hover,.sound-button:hover{transform:translateY(-2px)}.hero-art{background:linear-gradient(145deg,#26356f,#121a3f);border-radius:37px;height:340px;position:relative;overflow:hidden;box-shadow:0 25px 45px #25315b30}.floating-note{color:#f8c75c;font:130px Georgia;animation:3s ease-in-out infinite float;position:absolute;top:42px;left:42%}.mini-staff{color:#fff;border-top:2px solid #d8e1ff;border-bottom:2px solid #d8e1ff;height:82px;padding:9px 20px;font:70px/.8 Georgia;position:absolute;top:168px;left:9%;right:9%}.mini-keys{color:#2b376a;letter-spacing:7px;text-align:center;background:#fff;border-radius:8px;padding:18px 9px;position:absolute;bottom:22px;left:7%;right:7%}.section-heading{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:27px;display:flex}.section-heading h1{font-size:clamp(37px,5vw,58px)}.section-heading p:not(.eyebrow){color:#68728b;max-width:570px;margin:10px 0 0;line-height:1.55}.dashboard .greeting{justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px;display:flex}.dashboard .greeting h1{color:#20284e;letter-spacing:-.05em;margin:0;font:48px Georgia}.dashboard .greeting p:not(.eyebrow){color:#737d95}.stats{grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:21px;display:grid}.stats article,.progress-grid article{background:#fffdf9;border:1px solid #e7ded5;border-radius:19px;padding:18px}.stats b{color:#273668;font:34px Georgia;display:block}.stats span{color:#747d94;font-size:12px;font-weight:700}.home-grid,.study-grid{grid-template-columns:1.15fr .85fr;gap:21px;display:grid}.route-card,.modes-card,.tip-card,.achievement-card,.note-card,.association-card,.piano-card,.practice-card,.game-board,.song-card,.scale-card{background:#fffdfa;border:1px solid #e8dfd7;border-radius:25px;box-shadow:0 14px 32px #4534260a}.route-card,.modes-card,.tip-card,.achievement-card{padding:26px}.route-card h2,.modes-card h2,.association-card h2,.tip-card h2,.achievement-card h2,.song-card h2,.scale-card h2{color:#20284e;letter-spacing:-.045em;margin:0;font:32px Georgia}.route-card>p:not(.eyebrow),.association-card>p:not(.eyebrow),.tip-card>p:not(.eyebrow),.achievement-card>p:not(.eyebrow){color:#6c768d;font-size:14px;line-height:1.6}.route-card ol{grid-template-columns:1fr 1fr;gap:9px;margin:24px 0 0;padding:0;list-style:none;display:grid}.route-card li{color:#717b93;align-items:center;gap:7px;font-size:12px;display:flex}.route-card li span{background:#eee9e3;border-radius:50%;place-items:center;width:20px;height:20px;font-size:10px;font-weight:800;display:grid}.route-card li.current{color:#26356f;font-weight:800}.route-card li.current span{background:#f8c75c}.modes-card button{color:#39436a;text-align:left;background:0 0;border:0;border-bottom:1px solid #eee7df;align-items:center;gap:12px;width:100%;padding:13px 0;font-size:13px;font-weight:800;display:flex}.modes-card button b{color:#4b63b2;background:#eff1fa;border-radius:9px;place-items:center;width:29px;height:29px;display:grid}.modes-card button span{margin-left:auto}.lower{margin-top:21px}.achievement-card{color:#fff;background:#26356f}.achievement-card h2{color:#fff}.achievement-card p:not(.eyebrow){color:#d2d9f2}.achievement-card .eyebrow{color:#f2c571}.achievement-card button{color:#f6cd74;background:0 0;border:0;padding:0;font-weight:800}.form-page{max-width:600px}.form-page>p:not(.eyebrow){color:#737d95;line-height:1.55}.form-page form{background:#fffdfa;border:1px solid #e8dfd7;border-radius:22px;gap:15px;margin-top:27px;padding:28px;display:grid}.form-page label,.settings-grid label{color:#394261;gap:6px;font-size:13px;font-weight:800;display:grid}.form-page input,.form-page select,.reference-tools input,.settings-grid select{color:#263056;background:#fff;border:1px solid #ddd6cf;border-radius:10px;padding:11px}.form-page .primary{margin-top:8px}.study-grid{align-items:stretch}.note-card,.association-card{padding:22px}.segmented{flex-wrap:wrap;gap:5px;display:flex}.segmented button{color:#6d7489;background:#f2ede8;border:0;border-radius:9px;padding:8px 10px;font-size:11px;font-weight:800}.segmented button.active{color:#fff;background:#26356f}.staff-figure{text-align:center;margin:10px 0 0}.staff-figure svg{width:100%;height:230px}.staff-lines line{stroke:#3b4569;stroke-width:1.5px}.ledger{stroke:#3b4569;stroke-width:2px}.clef-symbol{fill:#26356f;font-size:80px}.accidental{fill:#26356f;font-size:25px}.note-head.red,.note-stem.red{fill:#e96562;stroke:#e96562}.note-head.orange,.note-stem.orange{fill:#e78646;stroke:#e78646}.note-head.yellow,.note-stem.yellow{fill:#dfb738;stroke:#dfb738}.note-head.green,.note-stem.green{fill:#57a873;stroke:#57a873}.note-head.blue,.note-stem.blue{fill:#4e9cc9;stroke:#4e9cc9}.note-head.indigo,.note-stem.indigo{fill:#6571c3;stroke:#6571c3}.note-head.violet,.note-stem.violet{fill:#9a69c0;stroke:#9a69c0}.staff-figure figcaption{color:#4e597a;font-size:13px;font-weight:800}.grand-staff{grid-template-columns:1fr 1fr;align-items:center;display:grid}.grand-staff>b{text-align:center;color:#4e597a;grid-column:1/-1;font-size:13px}.note-facts{border-top:1px solid #eee6df;flex-wrap:wrap;gap:8px;padding-top:14px;display:flex}.note-facts span{color:#5f6982;background:#f7f2ed;border-radius:99px;padding:6px 8px;font-size:11px;font-weight:700}.association-card{background:linear-gradient(145deg,#eef2fb,#fffdfa);position:relative;overflow:hidden}.association-card .association-symbol{color:#6374bd;margin:20px 0;font:105px/1 Georgia}.association-card.red{background:#fff2ef}.association-card.orange{background:#fff4e9}.association-card.yellow{background:#fffbea}.association-card.green{background:#eef9f0}.association-card.blue{background:#edf8ff}.association-card.indigo{background:#f0f1ff}.association-card.violet{background:#f9efff}.association-card button{color:#46578f;background:0 0;border:0;padding:0;font-weight:800}.piano-card{margin-top:21px;padding:23px}.piano-card h2{color:#20284e;margin:0 0 17px;font:27px Georgia}.piano-scroll{background:#182047;border-radius:15px;padding:12px;overflow-x:auto}.piano{background:#fff;border-radius:5px;width:960px;height:180px;display:flex;position:relative;overflow:hidden}.piano-key{border:0}.piano-key.white{color:#4b5371;background:linear-gradient(90deg,#fff,#f1eee8);border-bottom:5px solid #c5c0ba;border-right:1px solid #cfc9c2;flex:1;justify-content:center;align-items:end;min-width:0;padding-bottom:8px;font-size:9px;font-weight:900;display:flex}.piano-key.black{z-index:2;background:#14182f;border:1px solid #030510;border-radius:0 0 5px 5px;width:2%;height:60%;position:absolute;top:0;transform:translate(-50%)}.piano-key.selected{border-bottom-color:#d7a23f;background:#f7c95d!important}.piano-key.red.selected{background:#ed8078!important}.piano-key.blue.selected{background:#8bc9ec!important}.piano-key.green.selected{background:#95d8a8!important}.piano-key.violet.selected{background:#cfa8e4!important}.piano-key.indigo.selected{background:#9da7eb!important}.piano-key.orange.selected{background:#f5ae77!important}.piano-key.yellow.selected{background:#f4dc82!important}.practice-card,.game-board{text-align:center;max-width:740px;margin:auto;padding:26px}.answer-grid{grid-template-columns:repeat(2,1fr);gap:11px;margin-top:19px;display:grid}.answer-grid button{color:#34406c;background:#fff;border:1px solid #ded8d1;border-radius:14px;padding:15px;font-size:16px;font-weight:850}.answer-grid button small{color:#858ea4;margin-top:3px;display:block}.answer-grid button.correct{background:#eaf8ee;border-color:#77b986}.answer-grid button.incorrect{background:#fff2ed;border-color:#e7a18d}.feedback{color:#aa6256;margin:19px 0 0;font-weight:800}.feedback.good{color:#41855a}.game-tabs{gap:8px;margin:-8px 0 19px;padding-bottom:10px;display:flex;overflow-x:auto}.game-tabs button{color:#6a738c;background:#fffdf9;border:1px solid #ded7cf;border-radius:99px;flex:none;padding:9px 12px;font-size:12px;font-weight:800}.game-tabs button.active{color:#fff;background:#26356f;border-color:#26356f}.sequence{justify-content:center;gap:13px;padding:42px;display:flex}.sequence button,.scale-card div button{color:#364879;background:#edf0fa;border:0;border-radius:13px;padding:14px;font-size:18px;font-weight:900}.piano-card.compact{max-width:900px;margin:21px auto 0}.pairs{grid-template-columns:repeat(2,1fr);gap:13px;max-width:400px;margin:10px auto;display:grid}.pairs button{color:#f6c862;background:#26356f;border:0;border-radius:16px;height:90px;font-size:25px;font-weight:900}.pairs button.open{color:#394167;background:#f7edda}.reference-tools{align-items:center;gap:12px;margin-bottom:20px;display:flex}.reference-tools input{flex:1}.note-list{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.note-list button{text-align:left;color:#334064;background:#fffdfa;border:1px solid #e2d9d0;border-radius:14px;padding:13px}.note-list button.selected{outline:3px solid #f3c765}.note-list b,.note-list span,.note-list small{display:block}.note-list b{font-size:16px}.note-list span{margin:3px 0;font-weight:800}.note-list small{color:#7a8296;font-size:10px;line-height:1.45}.progress-grid{grid-template-columns:repeat(5,1fr);gap:11px;display:grid}.progress-grid b{color:#25366c;font:28px Georgia;display:block}.progress-grid span{color:#6b748a;min-height:33px;font-size:11px;font-weight:700;display:block}.progress-grid i{background:#e9e4df;border-radius:9px;height:6px;margin-top:12px;display:block;overflow:hidden}.progress-grid em{border-radius:inherit;background:#efb94e;height:100%;display:block}.song-card{color:#fff;background:linear-gradient(130deg,#26356f,#151d42);justify-content:space-between;align-items:center;gap:20px;padding:29px;display:flex}.song-card h2{color:#fff}.song-card p:not(.eyebrow){color:#d5ddfa;max-width:600px;line-height:1.55}.song-card .eyebrow{color:#f6c66b}.song-art{color:#f7c65d;font:90px Georgia}.song-card audio{width:min(100%,420px);margin:14px 0;display:block}.link-button{text-decoration:none;display:inline-block}.scale-card{margin-top:20px;padding:27px}.scale-card div{flex-wrap:wrap;gap:9px;margin:17px 0;display:flex}.scale-card div button{min-width:62px}.scale-card div button small{margin-top:3px;font-size:10px;display:block}.scale-card .secondary{margin-right:8px}.settings-grid{background:#fffdfa;border:1px solid #e8dfd7;border-radius:22px;grid-template-columns:repeat(3,1fr);gap:15px;padding:25px;display:grid}.switch{align-items:center;gap:9px;display:flex!important}.switch input{accent-color:#26356f}.backup-actions{flex-wrap:wrap;gap:11px;margin-top:20px;display:flex}.backup-actions label{align-items:center;display:inline-flex}.backup-actions input[type=file],.bottom-nav{display:none}@keyframes float{50%{transform:translateY(13px)rotate(4deg)}}@media (width<=780px){.topbar{width:calc(100% - 28px)}.topbar nav,.profile-button span{display:none}.page{width:calc(100% - 28px);padding:35px 0 90px}.welcome{grid-template-columns:1fr;gap:28px;padding-top:25px}.hero-art{height:250px}.floating-note{font-size:95px}.dashboard .greeting,.section-heading{display:block}.dashboard .greeting .primary,.section-heading .sound-button{margin-top:15px}.stats{grid-template-columns:repeat(2,1fr)}.home-grid,.study-grid{grid-template-columns:1fr}.note-list,.progress-grid{grid-template-columns:repeat(2,1fr)}.settings-grid{grid-template-columns:1fr 1fr}.bottom-nav{z-index:5;background:#fffdf9;border:1px solid #e0d8d1;border-radius:17px;justify-content:space-around;height:59px;padding:6px;display:flex;position:fixed;bottom:11px;left:14px;right:14px;box-shadow:0 9px 24px #242b4e2b}.bottom-nav button{color:#788199;background:0 0;border:0;border-radius:12px;min-width:42px;font-size:22px}.bottom-nav button.active{color:#f8c860;background:#26356f}.song-card{align-items:flex-start}.song-art{font-size:60px}.route-card ol,.grand-staff{grid-template-columns:1fr}.grand-staff .staff-figure:nth-child(2){display:none}}@media (width<=460px){.welcome h1,.section-heading h1{font-size:43px}.hero-art{height:210px}.mini-staff{top:122px}.mini-keys{padding:11px 3px;font-size:11px;bottom:14px}.answer-grid,.settings-grid{grid-template-columns:1fr}.song-card{padding:22px}.song-art{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}:root{--navy:#1e2855;--ink:#202955;--pink:#f7779d;--paper:#fffdfa;--line:#e4e8f1;--muted:#7d87a4}body{color:var(--ink);background:#fffdfa!important}.topbar{height:92px}.brand{color:#172552}.brand span{color:#fff;box-shadow:none;background:#486be0}.brand small{color:#8a93ae}.topbar nav{background:0 0;border:0}.topbar nav button{color:#505b82}.topbar nav button.active{color:#253563;background:0 0}.profile-button{box-shadow:none;color:#2c3968;background:#fff;border:1px solid #e1e6f0;padding:11px 18px}.eyebrow{color:#6d7fad}.welcome{min-height:650px}.welcome h1{color:var(--navy)!important}.welcome h1 em{font-style:italic;color:var(--pink)!important}.lead{color:#626e8d;max-width:600px;font-size:18px}.primary{background:#202a5c;box-shadow:0 12px 20px #1e285524}.welcome .secondary{color:#506aae;background:0 0;border:0;padding-left:8px}.hero-art{border-radius:50%;box-shadow:none!important;background:radial-gradient(circle,#fffdf8 0 27%,#f2eaff 28% 46%,#e8e4ff 47% 67%,#fae5df 100%)!important}.hero-art .mini-staff{color:#aeb5cf!important;border-color:#aeb5cf!important}.hero-note-card{color:#243161!important;background:#fffdf8!important}.garden-stats b{color:#5576d4}.garden-stats small{color:#8590ad}.garden-preview{padding-top:82px}.garden-heading h1,.memory-strip h1,.garden-full-keyboard h2{color:var(--navy);font-family:Georgia,serif;font-weight:700}.garden-heading>p{color:#7984a2}.octave-tabs button{color:#7b86a3;background:#fff;border-color:#e1e5ef;min-width:54px}.octave-tabs button.active{color:#fff;background:#253465}.garden-note-stage{grid-template-columns:245px 1fr}.garden-note-info,.garden-staff,.garden-full-keyboard{border-color:var(--line);box-shadow:none}.garden-note-info{background:#faf7ff}.garden-note-info h2,.garden-grid h2{color:var(--navy)}.garden-staff{background:#fff}.staff-toolbar span{gap:4px;display:flex}.staff-toolbar button{color:#8090b1;background:#fff;border:1px solid #dfe5ef;border-radius:8px;padding:4px 7px;font-size:9px;font-weight:700}.staff-toolbar button.active{color:#455899;background:#eff2ff}.garden-piano{background:#222f61}.garden-piano .piano{width:100%;height:145px}.octave-piano .piano-scroll{overflow:hidden}.garden-full-keyboard{border:1px solid var(--line);background:#fff;border-radius:19px;margin-top:18px;padding:18px}.garden-full-keyboard header{justify-content:space-between;align-items:end;gap:20px;margin-bottom:12px;display:flex}.garden-full-keyboard h2{margin:0;font-size:26px}.garden-full-keyboard header>span{color:#7a85a4;font-size:11px}.garden-full-keyboard .piano{height:165px}.garden-practice,.garden-theory,.memory-strip{padding-top:95px}.practice-preview article{background:#fafcff}.garden-grid article{background:#f8f9ff}.garden-grid article:nth-child(2){background:#f9f9ff}.memory-strip article{min-height:120px}.garden-song{background:#27376f}.staff-lines line{stroke:#657092}.clef-symbol,.accidental{fill:#263565}@media (width<=780px){.topbar{height:72px}.welcome{min-height:0;padding-top:80px}.garden-note-stage{grid-template-columns:1fr}.garden-piano .piano{height:120px}.garden-full-keyboard header{display:block}.garden-full-keyboard header>span{margin-top:5px;display:block}.garden-full-keyboard .piano{height:130px}}