/* A brighter music studio: bold color, clear controls, room to play. */
:root{--paper:#f7f7ff;--white:#fff;--ink:#251d45;--muted:#68617a;--line:#e4e0f0;--green:#7040e6;--mint:#eee7ff;--lime:#ffd966}
body{background:radial-gradient(ellipse at 0 0,#d9fbf8 0,transparent 34%),radial-gradient(ellipse at 100% 16%,#fce4ed 0,transparent 35%),#f7f7ff;color:var(--ink)}
.site-header{border-color:#ded8ee;height:84px}.brand{font-size:26px;color:#2d2050}.brand-mark{background:#7040e6;box-shadow:4px 4px 0 #ffd166;color:white}.brand-dot{color:#f35873}.site-header nav{font-size:14px;gap:28px}.site-header nav a:last-child{background:#251a48;color:white;padding:8px 16px;border-radius:24px}.site-header nav{align-items:center}
.intro{padding-top:30px;padding-bottom:30px;display:grid;grid-template-columns:1.3fr 1fr;text-align:left;gap:8px 45px;align-items:center}.intro .eyebrow{justify-content:start;color:#6141bb;font-size:12px;letter-spacing:1.5px;grid-column:1}.intro .eyebrow>span{display:none}.intro h1{grid-column:1;grid-row:2/4;font-size:clamp(36px,4.3vw,55px);line-height:1.12;letter-spacing:-2px;margin:5px 0 8px;font-weight:800}.intro h1>span{color:#7040e6}.intro>p{grid-column:2;grid-row:2;font-size:17px;color:#645b77;line-height:1.65}.intro-meta{grid-column:2;grid-row:3;justify-content:flex-start;gap:14px;flex-wrap:wrap;font-size:12px;color:#544562;margin-top:6px}.intro-meta span{background:white;border:1px solid #e5ddf0;padding:5px 9px;border-radius:20px}.intro-meta span:before{color:#008c83}
.lesson{border:1px solid #dcd1f2;border-radius:20px;box-shadow:0 12px 0 #e5def8,0 20px 60px #47218310}.song-picker{background:#251848;color:white;border:0;padding:20px 28px;gap:16px}.song-picker label{color:#d5c3ff;font-size:12px}.song-picker select{border-color:#9776d9;background:#382559;color:white;font-size:15px;padding:11px 34px 11px 14px;max-width:390px}.song-picker select option{background:#fff;color:#251d45}.song-picker>span{color:#ffe093;font-size:12px;font-weight:600}.lesson-heading{background:linear-gradient(110deg,#f1eaff,#fff6f6);padding:22px 28px;position:relative;gap:20px}.lesson-heading:before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:#f86887}.eyebrow,.practice-top .eyebrow,.sidebar-label{font-size:12px}.muted{color:#715e91}.lesson-heading h2{font-size:26px;font-weight:800;letter-spacing:-.7px}.lesson-heading p{font-size:14px;color:#6b5a7c}.level{font-size:12px;background:#ffdf7d;color:#563807;border:0;font-weight:700;padding:8px 12px}
.lesson-body{grid-template-columns:280px 1fr}.lesson-sidebar{background:#fbf9ff;padding:24px 14px;border-color:#e7def5}.sidebar-label{font-size:11px;color:#7a629a;letter-spacing:.6px}.phrase-button,.whole-button{font-size:13px;padding:10px 8px;border-radius:9px;gap:9px;color:#534268}.phrase-button small,.whole-button small{font-size:12px;color:#82738f}.phrase-number{font-size:12px;min-width:29px;height:29px;border-color:#d7c7ed;color:#6b5387}.phrase-button:hover,.whole-button:hover{background:#f0e8fd}.phrase-button.active,.whole-button.active{background:#ece2ff;border-color:#c4a9f1;color:#533193;box-shadow:3px 0 0 #8051dd inset}.active .phrase-number,.done .phrase-number{background:#7443db;color:#fff;border-color:#7443db}.whole-wrap{border-color:#e1d7ef}.whole-button{font-weight:700}.progress-caption{font-size:12px;color:#6e577f;margin-left:8px;margin-right:8px}.progress-note{font-size:12px;color:#78678a;line-height:1.5}.lesson-sidebar progress{height:7px;border-radius:5px;background:#e5dbf1}.lesson-sidebar progress::-webkit-progress-bar{background:#e5dbf1}.lesson-sidebar progress::-webkit-progress-value{background:linear-gradient(90deg,#7643e9,#df5caa)}.lesson-sidebar progress::-moz-progress-bar{background:#7643e9}
.practice-area{padding:25px 28px}.practice-top{gap:12px;flex-wrap:wrap}.practice-top .eyebrow{font-size:11px;letter-spacing:1px}.mode-switch{background:#f0ebf8;padding:4px}.mode-switch button{font-size:12px;color:#675575;padding:7px 9px}.mode-switch button[aria-pressed=true]{color:#6a37c3;background:#fff}.practice-area h3{font-size:25px;letter-spacing:-.7px;margin-top:19px}.phrase-help{font-size:14px;color:#71607f}.notes{gap:7px;grid-template-columns:repeat(var(--note-count,7),minmax(0,51px));margin:22px 0 19px}.notes .note{height:59px;border:1px solid #ddd2eb;border-bottom:3px solid #ded3ed;border-radius:9px;background:#faf7ff;color:#6b5683;font-size:21px}.note .beats{font-size:10px;color:#755c93;bottom:3px}.notes .note.current{background:#ffe08c;color:#61400c;border-color:#f1b944;box-shadow:0 0 0 3px #fff4ce;transform:translateY(-2px)}.notes .note.played{background:#d9f6f1;border-color:#9eddd1;color:#167062}.note.current .beats{color:#77511b}.note.long{padding-bottom:9px}.playback{gap:12px}.listen{font-size:14px;font-weight:700;background:#7040e6;border-color:#7040e6;color:white;padding:10px 14px;box-shadow:0 3px 0 #4c23aa;border-radius:8px}.listen:hover{background:#5c2ac9}.speed{font-size:12px;color:#6d597d;gap:7px}.speed span{font-size:12px;min-width:48px}.speed input{accent-color:#7443df;width:65px}
.keyboard{background:#23183b;height:185px;border-radius:11px;box-shadow:0 6px 0 #d7cbea;padding:6px 6px 8px}.piano-key.white{background:linear-gradient(#fff,#f9f6ff);border-color:#c7bbd5;border-bottom-color:#ded5e8;color:#6c5c7b;font-size:19px;padding-bottom:13px}.piano-key.white .key-shortcut{font-size:10px;color:#867592}.piano-key.black{background:linear-gradient(#4d3b65,#251b36);border-color:#1e142e;border-bottom-color:#160e24;height:101px;color:#d2c4e2}.piano-key.black .key-shortcut{color:#c8b5dc;font-size:10px}.piano-key.white.expected{background:linear-gradient(#fff6d6,#ffda72);border-color:#e5b848;border-bottom-color:#dda92f;color:#634212;box-shadow:inset 0 0 12px #ffe18e}.piano-key.white.expected:before{background:#a16d08;bottom:58px}.piano-key.pressed{background:#8ce0d3!important;border-color:#41b9a6!important;color:#0d5548!important}.keyboard-caption{font-size:12px;color:#746282;gap:8px}.green-dot{background:#e8aa17;width:8px;height:8px}.keyboard-caption kbd{font-size:11px;background:#eee7f6;color:#6e5487}.feedback-row{font-size:13px;color:#685179;border-color:#e9e0f3;min-height:48px}.text-button{font-size:12px;color:#6f518b}.completion{background:linear-gradient(110deg,#dcf8ef,#fff3c8);border-color:#9bd9c3;font-size:16px;padding:17px;border-radius:12px;animation:win-in .3s ease-out}.completion p{font-size:13px;color:#4b7464}.primary,.manual-button{font-size:13px;background:#7040e6;color:#fff;padding:11px 14px;border-radius:8px}.lesson-footer{background:#f2edfb;color:#746385;font-size:12px;padding:15px 24px}.lesson-footer strong{color:#5c3a84}.lesson-footer>span:first-child{color:#925bd9}.footer-note{color:#806198;font-size:10px}
.songbook{padding-top:60px;padding-bottom:5px}.section-heading h2{font-size:32px;font-weight:800;letter-spacing:-1.1px}.section-heading>p{font-size:14px;color:#756780}.song-library{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:25px}.song-card{text-align:left;background:white;border:1px solid #e0d9ed;border-top:5px solid var(--song-color);border-radius:13px;padding:17px 16px;color:#36244d;display:flex;flex-direction:column;min-height:173px;gap:16px;transition:transform .18s,box-shadow .18s}.song-card:hover{transform:translateY(-4px);box-shadow:0 9px 20px #46296712}.song-card[aria-pressed=true]{box-shadow:0 0 0 2px var(--song-color);background:#fbf9ff}.song-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.song-index{font-size:16px;font-weight:800;color:var(--song-color)}.song-tag{font-size:11px;color:#75647f;text-align:right}.song-card strong{font-size:17px;line-height:1.45;letter-spacing:-.4px}.song-card-bottom{font-size:12px;color:#766482;margin-top:auto}.song-card:nth-child(4n+2){background:#f0fffc}.song-card:nth-child(4n+3){background:#fff4f3}.song-card:nth-child(4n){background:#fff9e9}
.how{padding-top:50px;padding-bottom:46px}.tip-grid{gap:18px;margin-top:24px}.tip-grid article{background:#eee5ff;border:0;border-radius:14px;padding:23px}.tip-grid article:nth-child(2){background:#dff6f4}.tip-grid article:nth-child(3){background:#ffe8df}.tip-num{display:inline-grid;place-items:center;border-radius:50%;width:34px;height:34px;background:white;font-size:13px;font-weight:700;color:#7546af}.tip-grid h3{font-size:18px;font-weight:800;margin-top:16px}.tip-grid p{font-size:14px;line-height:1.8;color:#715e80;max-width:none}.next-section{background:linear-gradient(120deg,#332063,#6c35bb);border-radius:20px;color:#fff;box-shadow:0 7px 0 #dac6f1;gap:48px;padding:42px}.next-section .eyebrow{color:#ffd483;font-size:12px}.next-section h2{font-size:46px;font-weight:800;letter-spacing:-1.8px}.next-copy>p{font-size:15px;color:#e7dcf8;max-width:470px}.course-button{font-size:15px;background:#ffcf64;color:#42276b;border-radius:8px;box-shadow:0 4px 0 #d49639;padding:14px 20px}.course-button:hover{background:#ffde91}.paid-label{font-size:12px;color:#e0cff1;margin-top:14px}.next-copy>p.disclosure{font-size:12px;color:#e3d5f3;max-width:440px;margin-top:16px}.next-side{border-color:#8863af;padding-left:35px}.quote-mark{color:#ffb1d5}.next-side p{font-size:25px;color:#f2e8ff}.next-rule{background:#f8ba75}.next-side>span:last-child{font-size:13px;color:#dbc9ed}.faq{padding-top:55px;gap:45px}.faq>h2{font-size:26px;font-weight:800}.faq summary{font-size:15px;color:#4f376b}.faq details{border-color:#dcd1e8}.faq details p{font-size:14px;color:#756380}.faq summary:after{color:#8752c1}.site-footer{border-color:#ded3ec}.site-footer p,.site-footer>span{font-size:12px;color:#7a658b}.site-footer .brand{font-size:23px}
@keyframes win-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.lesson-body{grid-template-columns:235px minmax(0,1fr)}.practice-area{padding:23px}.practice-top{align-items:flex-start}.lesson-heading h2{font-size:24px}.phrase-button{font-size:12px}.phrase-button small{font-size:11px}.song-picker{flex-wrap:wrap}.song-picker>span{margin-left:0}.intro{gap:8px 25px}.intro>p{font-size:15px}.intro-meta{gap:5px;font-size:11px}.keyboard-caption .desktop{display:none}.keyboard-caption .mobile{display:inline}.footer-note{display:none}.song-library{grid-template-columns:repeat(2,minmax(0,1fr))}.song-card{min-height:150px}.next-section{gap:25px}.next-side{padding-left:25px}.song-tag{font-size:12px}}
@media(max-width:650px){.site-header{height:74px}.brand{font-size:23px}.site-header nav{gap:10px;font-size:12px}.site-header nav a[href='#how']{display:none}.site-header nav a:first-child{display:inline}.site-header nav a:last-child{padding:7px 10px}.intro{display:block;text-align:center;padding-top:26px;padding-bottom:26px}.intro .eyebrow{justify-content:center;font-size:10px;letter-spacing:1px}.intro h1{font-size:39px;letter-spacing:-1.6px;margin:12px 0}.intro>p{font-size:15px;max-width:350px;margin:auto}.intro-meta{justify-content:center;font-size:11px;gap:6px;margin-top:15px}.intro-meta span{padding:4px 7px}.lesson{border-radius:15px}.song-picker{padding:17px 18px;gap:8px}.song-picker label{font-size:12px}.song-picker select{font-size:15px;max-width:none;padding:10px 25px 10px 10px}.song-picker>span{font-size:12px}.lesson-heading{padding:19px 18px}.lesson-heading h2{font-size:23px;line-height:1.3;margin:8px 0}.lesson-heading p{font-size:14px;line-height:1.5}.lesson-heading .eyebrow{font-size:11px}.level{font-size:12px;margin-top:12px;padding:5px 9px}.lesson-body{display:flex;flex-direction:column}.lesson-sidebar{padding:13px 87px 12px 14px}.phrases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.phrase-button{padding:4px;min-height:38px}.phrase-button .phrase-number{width:27px;min-width:27px;height:27px;font-size:12px}.whole-wrap{right:12px;top:14px;width:65px}.whole-button{font-size:12px;padding:4px 2px}.progress-caption{font-size:12px;margin:8px 0 6px}.progress-note{display:none}.practice-area{padding:21px 15px}.practice-top{flex-direction:column;gap:10px}.practice-top .eyebrow{font-size:11px}.mode-switch{width:100%}.mode-switch button{width:50%;font-size:13px;padding:8px}.practice-area h3{font-size:22px;line-height:1.35;margin-top:17px}.phrase-help{font-size:13px;margin-top:6px}.notes{gap:4px;grid-template-columns:repeat(var(--note-count,7),minmax(0,1fr));margin-top:19px}.notes .note{font-size:18px;height:57px;border-radius:7px}.note .beats{font-size:9px;bottom:4px}.listen{font-size:12px;padding:9px 10px;min-width:0}.speed{font-size:12px;gap:5px}.speed input{width:45px}.speed span{font-size:11px;min-width:42px}.keyboard{height:167px}.piano-key.black{height:94px}.piano-key.white{font-size:18px}.keyboard-caption{font-size:11px;flex-wrap:wrap}.feedback-row{font-size:12px;gap:10px;align-items:start}.text-button{font-size:12px;white-space:normal;min-width:64px}.lesson-footer{font-size:12px;padding:14px 17px;align-items:start}.completion{font-size:15px}.completion p{font-size:13px}.songbook{padding-top:45px}.section-heading h2{font-size:28px;line-height:1.2}.section-heading .eyebrow{font-size:11px}.section-heading>p{font-size:14px}.song-library{gap:10px;margin-top:22px}.song-card{padding:14px 12px;min-height:178px;gap:12px;border-radius:10px}.song-card-top{align-items:start;flex-direction:column;gap:6px}.song-tag{font-size:11px;text-align:left;line-height:1.3}.song-card strong{font-size:16px;line-height:1.35}.song-card-bottom{font-size:12px;line-height:1.4}.how{padding-top:38px;padding-bottom:35px}.tip-grid{gap:13px}.tip-grid article{padding:19px;grid-template-columns:34px 1fr;column-gap:13px}.tip-grid h3{font-size:17px;margin-top:0}.tip-grid p{font-size:14px}.tip-grid .tip-num{padding:0}.next-section{padding:28px;gap:25px;border-radius:15px}.next-section .eyebrow{font-size:11px}.next-section h2{font-size:38px}.next-copy>p{font-size:14px}.next-side{padding:20px 0 0}.next-side p{font-size:20px}.next-side>span:last-child{font-size:12px}.faq{padding-top:39px;gap:22px}.faq>h2{font-size:25px}.faq summary{font-size:15px}.faq details p{font-size:14px}.site-footer{gap:12px}.site-footer p,.site-footer>span{font-size:12px}}
@media(max-width:370px){.site-header nav a:first-child{display:none}.intro h1{font-size:34px}.notes{gap:3px}.note .beats{font-size:8px}.speed{flex-wrap:wrap;max-width:120px}.song-card strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.completion{animation:none}.song-card:hover,.notes .note.current{transform:none}}