@import url('/base.css');
.mobile-settings{display:none}
h1,h2,h3{overflow-wrap:anywhere}
.sheet-note.mistaken .note-label{fill:#b8774d!important;font-weight:700}
@media(max-width:560px){.mobile-settings{display:flex;color:#839078;padding:5px}.mobile-settings .icon{width:18px;height:18px}.topbar .breadcrumb{flex:1}.topbar{gap:8px}}
:root{--paper:#faf8f3;--card:#fffefa;--ink:#243b35;--muted:#777c72;--forest:#203d37;--sage:#e9eee3;--line:#e5e5da;--accent:#dc9d5b;--sand:#f2e8d7;--red:#b85c48;--shadow:0 20px 70px #263b3417}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button{color:inherit}input,select{accent-color:var(--forest)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #cd904f;outline-offset:4px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.18}h1{font-family:Georgia,'Times New Roman',serif;font-size:43px;letter-spacing:-1.1px;font-weight:500}h2{font-family:Georgia,'Times New Roman',serif;font-size:28px;font-weight:500;letter-spacing:-.5px}h3{font-size:18px;font-weight:600}p{color:var(--muted)}small{font-size:11px}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:650;color:#788176;margin-bottom:12px}.layout{display:flex;min-height:100vh}.sidebar{width:244px;flex-shrink:0;border-right:1px solid var(--line);padding:38px 24px 20px;background:#f4f3eb;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.wordmark{font:600 24px Georgia,serif;letter-spacing:-.7px;display:grid;grid-template-columns:36px auto;align-items:center;line-height:1.2}.wordmark>.icon{width:30px;height:30px;grid-row:span 2;stroke-width:1.3}.wordmark>span{font:9px 'Segoe UI',sans-serif;letter-spacing:1.7px;text-transform:uppercase;color:#8b8d80;margin-top:6px}.sidebar-label{font-size:9px;letter-spacing:1.5px;color:#999c8f;margin:52px 14px 15px}.sidebar nav{display:grid;gap:8px}.nav-link{padding:13px 14px;border-radius:9px;display:flex;align-items:center;gap:13px;font-size:13px;color:#777f72;position:relative}.nav-link:hover{background:#e9ecdf}.nav-link.selected{background:#e3e8db;color:#294638;font-weight:600}.nav-link .icon{width:19px;height:19px}.nav-link i{width:5px;height:5px;border-radius:50%;background:var(--forest);margin-left:auto}.sidebar-bottom{margin-top:auto}.quiet-note{border-top:1px solid #e3e4d8;padding:24px 14px;display:flex;align-items:start;gap:11px}.quiet-note>.icon{color:#9b9e80;width:18px;height:18px;margin-top:3px}.quiet-note p{font:italic 14px/1.7 Georgia,serif;color:#959b87}.user{display:flex;align-items:center;gap:11px;border-top:1px solid #e2e5d7;margin-top:13px;padding:21px 8px 0;font-size:12px}.user-avatar{background:#e5e7d8;border:1px solid #d6dbc9;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;font-family:Georgia,serif}.user small{display:block;color:#929787;font-size:9px;margin-top:3px}.main{margin-left:244px;padding:0 48px;width:calc(100% - 244px);max-width:1600px}.topbar{height:87px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px}.breadcrumb{font-size:9px;letter-spacing:1.3px;color:#92998c}.breadcrumb span{margin:0 14px;color:#b8beaf}.mic-pill{display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #dedfd2;background:#fdfcf7;border-radius:30px;color:#767f70;font-size:10px}.mic-pill>.icon{width:15px;height:15px}.mic-pill i,.live-dot{display:inline-block;width:6px;height:6px;background:#a2a58e;border-radius:50%}.mic-pill.active{background:#e7f1e4;color:#3c6e48}.mic-pill i.on,.live-dot.on{background:#4b9867;box-shadow:0 0 0 3px #4b98671a}.page-heading{padding:36px 0 29px;display:flex;justify-content:space-between;align-items:center;gap:20px}.page-heading p{margin-top:12px;font-size:13px}.greeting-dot{color:var(--accent)}.badge{font-size:10px;letter-spacing:.2px;padding:6px 11px;border:1px solid var(--line);border-radius:5px;white-space:nowrap;background:#f9f8f1}.badge.sage{background:var(--sage);border:0;color:#62735b}.badge.sand{background:var(--sand);border:0;color:#9a7146}.hero{position:relative;overflow:hidden;border-radius:14px;background:var(--forest);color:#f5f4e8;display:flex;min-height:312px}.hero-copy{width:57%;padding:35px 38px;position:relative;z-index:2}.hero .eyebrow{color:#b1c0a5;font-size:9px;letter-spacing:1.8px}.hero h2{font-size:43px;line-height:1.11;letter-spacing:-.9px}.hero p{font-size:12px;line-height:1.8;color:#b7c5b6;max-width:345px;margin-top:17px}.button{display:inline-flex;align-items:center;justify-content:center;gap:13px;border-radius:6px;min-height:42px;padding:11px 19px;font-size:11px;font-weight:600;letter-spacing:.15px;border:1px solid transparent;transition:background .15s,transform .15s}.button .icon{width:17px;height:17px}.button:hover:not(:disabled){transform:translateY(-1px)}.primary{background:var(--forest);color:var(--paper)}.primary:hover{background:#31554a}.cream{background:#ece9d5;color:#294437}.cream:hover{background:#fffde9}.subtle{background:transparent;border-color:#d9ddce;color:#4c624f}.subtle:hover{background:#eff1e7}.hero .button{margin-top:23px}.hero-meta{display:flex;align-items:center;gap:8px;font-size:9px;color:#aabca6;margin-top:18px}.hero-meta .icon{width:13px;height:13px}.hero-meta>span{margin:0 4px}.hero-art{position:absolute;right:0;top:0;width:47%;height:100%;overflow:hidden;opacity:.95;background:linear-gradient(135deg,transparent,#2c4a3c)}.art-label{position:absolute;right:27px;top:25px;color:#bac6aa;font-size:9px;letter-spacing:3px;z-index:2}.art-label span{font:italic 13px Georgia,serif;letter-spacing:0;color:#a0b79a}.art-circle{position:absolute;border:1px solid #acb89533;border-radius:50%;width:320px;height:320px;right:-20px;top:19px}.art-keyboard{position:absolute;display:flex;bottom:-62px;right:16px;transform:rotate(-18deg);width:310px;height:232px;filter:drop-shadow(-15px 20px 20px #0c241e88);z-index:1}.art-white{display:block;background:linear-gradient(90deg,#d3d9c0,#f3f1dc 70%,#e0e3cd);height:100%;width:31px;position:relative;border-right:2px solid #9baf91;border-radius:0 0 5px 5px;box-shadow:inset 0 -8px #9dac91}.art-white b{position:absolute;height:57%;width:20px;right:-10px;top:0;background:linear-gradient(90deg,#20382c,#122d23);z-index:2;border-radius:0 0 4px 4px;box-shadow:2px 7px 3px #173524aa,inset -4px -5px #294437}.art-staff{position:absolute;width:100%;top:77px;left:0;transform:rotate(-18deg);height:100px;opacity:.38}.art-staff>i{position:absolute;top:0;height:1px;width:100%;background:#abc09b}.art-staff>i:nth-child(2){top:16px}.art-staff>i:nth-child(3){top:32px}.art-staff>i:nth-child(4){top:48px}.art-staff>i:nth-child(5){top:64px}.art-staff b{position:absolute;font:60px Georgia;color:#d9dfbd;left:26px;top:-29px;font-weight:400}.art-staff b:nth-last-child(2){left:116px;top:-4px}.art-staff b:last-child{left:230px;top:-47px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:23px 0 37px}.stat{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:9px;background:#fefdf8;padding:20px 22px}.stat>.icon{color:#8a967e;width:24px;height:24px}.stat strong{font:30px Georgia,serif;display:block;line-height:1.1;letter-spacing:-.7px}.stat strong small{font:11px 'Segoe UI',sans-serif;color:#7c8573;letter-spacing:0;margin-left:8px}.stat div>span{font-size:9px;color:#8b9182;display:block;margin-top:6px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:19px}.section-head .eyebrow{margin-bottom:7px}.section-head h2{font-size:25px}.text-link{font-size:11px;color:#5b7258;display:inline-flex;align-items:center;gap:9px;border:0;background:none;padding:4px 0;cursor:pointer}.text-link .icon{width:15px;height:15px}.text-link:hover{color:var(--forest);text-decoration:underline}.task-list{background:var(--card);border:1px solid var(--line);border-radius:11px;overflow:hidden}.task-row{width:100%;display:flex;align-items:center;text-align:left;gap:21px;background:none;border:0;border-bottom:1px solid var(--line);padding:22px 24px}.task-row:last-child{border:0}.task-row:hover{background:#f3f5eb}.task-number{width:36px;height:36px;display:grid;place-items:center;color:#849279;border:1px solid #dce3d3;background:#f0f3e8;font:17px Georgia;border-radius:8px}.task-detail{display:flex;flex-direction:column;flex:1}.task-detail>small{font-size:9px;letter-spacing:.7px;color:#9a9f88;margin-bottom:4px}.task-detail>strong{font-size:14px;font-weight:600}.task-detail>span{font-size:10px;color:#939988;margin-top:4px}.task-time{font-size:10px;color:#929a86;white-space:nowrap}.task-row>.icon{width:17px;color:#9da58f}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:21px;margin:25px 0 35px}.card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:26px}.soft-card{background:#eeefe4}.card p{font-size:12px;line-height:1.8;margin-top:11px}.card .text-link{margin-top:19px}.progress-card h3,.soft-card h3{font:23px Georgia,serif}.progress-line{height:4px;background:#e7eadd;border-radius:3px;margin-top:20px;overflow:hidden}.progress-line>span{display:block;height:100%;background:#8f9f77}.footer{border-top:1px solid var(--line);padding:20px 0 25px;display:flex;justify-content:space-between;font:italic 11px Georgia,serif;color:#9ca08c}.footer span{font:9px 'Segoe UI',sans-serif;letter-spacing:.5px}.path-summary{display:flex;gap:30px;justify-content:space-between;align-items:center;background:#eff1e7;margin-bottom:35px}.path-summary strong{font-size:15px}.path-summary .icon{vertical-align:middle;margin-right:12px;color:#839171}.path-summary p{max-width:570px}.estimate{text-align:center;min-width:155px;border-left:1px solid var(--line);padding-left:24px}.estimate strong{font:42px Georgia;display:block}.estimate span{font-size:10px;color:var(--muted)}.path-list{padding-bottom:30px}.path-item{display:flex;gap:25px;position:relative;margin-bottom:20px}.path-item:before{content:'';position:absolute;left:23px;top:48px;bottom:-22px;width:1px;background:#d8dfce}.path-item:last-child:before{display:none}.path-marker{border:1px solid #d6dfcb;flex-shrink:0;background:var(--paper);width:47px;height:47px;display:grid;place-items:center;border-radius:50%;font:18px Georgia;position:relative;z-index:1;margin-top:21px;color:#8b9a7c}.mastered .path-marker{background:var(--forest);color:var(--paper)}.ready .path-marker{background:#e4eadb;color:var(--forest);border:1px solid #a4b196}.path-card{display:flex;justify-content:space-between;align-items:center;gap:20px;flex:1;padding:23px 26px}.future .path-card{background:#f6f5ee}.path-card small{font-size:9px;letter-spacing:1px;color:#909a7f}.path-card h3{margin-top:7px;font-size:17px}.path-card p{margin-top:7px}.path-tags{margin-top:15px;display:flex;gap:12px;align-items:center}.path-tags>span:not(.badge){font-size:10px;color:var(--muted)}.notice{display:flex;gap:17px;align-items:center;padding:22px 25px;border:1px solid #dde4d0;background:#eff2e7;border-radius:10px;margin-bottom:27px}.notice p{font-size:12px;color:#7c8770;flex:1}.notice strong{color:#4e6549}.notice>.icon,.notice>div>.icon{color:#91a07c}.notice .text-link{white-space:nowrap}.song-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:35px}.song-card{padding:0;overflow:hidden}.song-cover{height:157px;position:relative;background:#e9e8d6;padding:17px;color:#6f8061;overflow:hidden}.song-cover>span{font:16px Georgia;opacity:.5}.cover-notes{position:absolute;right:23px;top:6px;font:87px Georgia;opacity:.45;letter-spacing:-10px;transform:rotate(-12deg)}.song-cover small{position:absolute;left:20px;bottom:15px;letter-spacing:2px;font-size:8px}.cover-1{background:#e5ddd0;color:#9a7959}.cover-2{background:#dfe7dc;color:#6d8772}.cover-3{background:#e2e5dc;color:#7d8a6c}.song-body{padding:20px}.song-meta{font-size:9px;color:#9c9f8b;display:flex;justify-content:space-between}.song-body h3{margin-top:12px;font:23px/1.2 Georgia;min-height:55px}.song-body p{font-size:9px;overflow-wrap:anywhere}.full{width:100%;margin-top:20px}.free-play{display:flex;justify-content:space-between;background:#e9ede0;align-items:center;padding:35px}.free-play h2{font-size:32px}.free-play .button{margin-top:20px}.free-symbol{font:135px Georgia;color:#a6b58f;padding-right:35px}.training-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:30px}.free-play+.section-head{margin-top:35px}.tile-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--sage);color:#819270;margin-bottom:20px}.training-card p{min-height:43px}.training-lessons{margin-top:22px;border-top:1px solid var(--line)}.training-link{border:0;border-bottom:1px solid #eceee2;background:none;padding:13px 0;text-align:left;font-size:11px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#5c7354}.training-link .icon{width:15px;height:15px}.settings-card{max-width:720px;margin-bottom:35px}.settings-card h2{font-size:28px}.settings-card hr{border:0;border-top:1px solid var(--line);margin:28px 0}.settings-card .button{margin-top:20px}.budget-input{display:flex;gap:16px;align-items:center;margin-top:20px;font-size:12px;color:#8b937d}.budget-input input{width:100px;font:30px Georgia;padding:12px;border:1px solid #d8decc;border-radius:6px;background:#fcfcf5;color:var(--ink)}.muted{color:var(--muted)}.loading{height:100vh;display:grid;place-items:center;color:#7b8970}.onboarding,.login{max-width:1160px;margin:auto;padding:45px 45px 70px}.onboarding>.wordmark,.login>.wordmark{width:220px}.onboard-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center;margin-top:75px}.onboard-layout>aside h1{font-size:51px;line-height:1.12}.onboard-layout>aside p{max-width:340px;margin-top:23px;font-size:14px;line-height:1.8}.onboard-steps{display:flex;gap:7px;margin-top:47px}.onboard-steps i{width:30px;height:4px;border-radius:4px;background:#e2e7d7}.onboard-steps i.filled{background:#8ba078}.onboard-layout>aside>small{display:block;margin-top:15px;font-size:9px;letter-spacing:1px;color:#8d9782}.question-card{padding:37px;box-shadow:var(--shadow)}.question-card h2{font-size:31px;line-height:1.2}.question-card p{margin-top:15px}.answer-options{display:grid;gap:10px;margin-top:25px}.answer{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid #dedfcf;background:#fdfdf7;text-align:left;border-radius:7px;padding:14px;font-size:12px}.answer i{border:1px solid #cbd5bf;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;flex-shrink:0}.answer i .icon{width:13px;height:13px}.answer.chosen{background:#eaf0e0;border-color:#91a67c}.answer.chosen i{background:#315b42;color:white;border-color:#315b42}.question-footer{display:flex;justify-content:space-between;gap:12px;margin-top:32px}.minute-options{display:flex;gap:9px;margin:24px 0}.minute{flex:1;padding:14px 5px;border:1px solid var(--line);border-radius:7px;background:#fcfcf6;font:28px Georgia}.minute small{display:block;font:9px 'Segoe UI';margin-top:5px;color:#9ba38f}.minute.chosen{border-color:#91a67c;background:#e8efde}.custom-minutes{font-size:11px;color:#869179;display:flex;gap:9px;flex-wrap:wrap;align-items:center}.custom-minutes input{width:67px;padding:7px;border:1px solid #cdd8c2;border-radius:4px;background:#fffefa}.small-text{font-size:10px!important;line-height:1.7!important;color:#8d9682}.login .card{max-width:430px;margin:70px auto 0;padding:35px}.login h1{font-size:42px;margin-bottom:27px}.login form label{display:flex;flex-direction:column;font-size:11px;color:#839078;gap:7px;margin:15px 0}.login input{padding:12px;border:1px solid #d6dfca;background:#fbfcf4;border-radius:5px}.error{color:var(--red)!important}.success{color:#58805d!important}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:200;background:#233e35;color:#f1f1e4;padding:13px 20px;border-radius:8px;box-shadow:0 5px 35px #14271c26;transition:.2s;font-size:12px;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}.overlay{position:fixed;inset:0;background:#152d2670;backdrop-filter:blur(4px);z-index:50;display:flex;align-items:center;justify-content:center;padding:30px;overflow-y:auto}.modal{position:relative;width:100%;max-width:680px;background:var(--paper);border-radius:16px;padding:38px;box-shadow:var(--shadow);max-height:calc(100dvh - 60px);overflow:auto;overscroll-behavior:contain}.modal.wide{max-width:1180px;padding:30px}.modal-close{position:absolute;right:15px;top:15px;z-index:3}.icon-button{border:1px solid #dbe1d1;border-radius:50%;width:30px;height:30px;background:#f8f9ee;display:grid;place-items:center}.icon-button .icon{width:17px;height:17px}.modal h2{font-size:33px;padding-right:25px}.modal>p{font-size:13px;line-height:1.9;margin-top:20px}.lesson-intro{white-space:pre-line}.modal-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:28px}.modal-actions>span{font-size:10px;color:var(--muted)}.quiz{background:#eff2e6;border:1px solid #dde4cf;border-radius:10px;padding:23px;margin-top:25px}.quiz fieldset{padding:0;border:0;margin:18px 0}.quiz legend{font-size:12px;font-weight:600;margin-bottom:12px}.quiz-answer{display:flex;gap:9px;align-items:center;font-size:12px;margin:9px 0}.quiz-feedback{font-size:11px!important;margin-top:14px!important}.modal pre{background:#eeeee2;padding:18px;overflow:auto;font-size:11px;border-radius:7px;margin:20px 0}.practice-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-right:20px}.practice-heading h2{font-size:31px}.practice-heading p{font-size:11px;margin-top:9px}.practice-controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin-top:22px}.practice-controls label{font-size:9px;color:#88947c;display:flex;flex-direction:column;gap:5px}.practice-controls select,.practice-controls input[type=number]{font-size:11px;color:#425d44;background:#f5f6ea;border:1px solid #dce2ce;border-radius:5px;padding:7px 8px;max-width:185px;height:34px}.practice-controls input[type=number]{width:75px}.practice-controls .loop-control{flex-direction:row;align-items:center;height:34px;gap:5px;font-size:11px}.sheet-scroll{overflow-x:auto;margin:17px 0 0;scroll-behavior:smooth}.sheet-svg{display:block;overflow:visible;max-width:none;stroke:#bbc3ad;stroke-width:.7;color:#4a6248}.sheet-svg .clef{font:47px Georgia;fill:#6d7d60;stroke:none}.sheet-svg .meter{font:19px Georgia;fill:#6d7d60;stroke:none;text-anchor:middle}.sheet-svg .note-label{font:9px 'Segoe UI';fill:#9ba58c;stroke:none;text-anchor:middle}.sheet-svg .accidental{font:19px Georgia;fill:currentColor;stroke:none}.sheet-svg .finger{font:10px 'Segoe UI';stroke:none;fill:#9da58b;text-anchor:middle}.sheet-note{transition:color .2s}.sheet-note.current{color:#d89857}.sheet-note.done{color:#69a07c}.sheet-note.missed{color:var(--red)}.barline{stroke:#d6ddc8;stroke-dasharray:2 3}.playhead{stroke:#d1a675;stroke-width:1.3;opacity:.6}.practice-stats{display:flex;gap:26px;align-items:center;font-size:10px;color:#919a81;border-top:1px solid var(--line);padding:12px 0}.practice-stats strong{font-weight:600;color:#596f51;margin-right:4px}.feedback{background:#eaf0df;color:#5e7553;padding:11px 15px;border:1px solid #dde5cd;border-radius:7px;font-size:12px;min-height:43px;display:flex;align-items:center}.listening-row{display:flex;align-items:center;gap:12px;margin:20px 0 13px}.listening-row strong{font-size:11px;font-weight:500;color:#7e8e71;min-width:100px}.volume-meter{margin-left:auto;width:75px;height:4px;background:#e3e8d9;border-radius:3px;overflow:hidden}.volume-meter i{display:block;height:100%;width:0;background:#91aa77;transition:width .1s}.keyboard-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:6px;border-radius:7px;scrollbar-width:thin;scrollbar-color:#c3cdb4 transparent}.keyboard{height:145px;position:relative;user-select:none;background:#314a36;border-top:6px solid #304735}.piano-key{position:absolute;touch-action:none;user-select:none;-webkit-user-select:none;border:0;padding:0}.piano-key.white{width:42px;height:132px;background:linear-gradient(#fafbf0,#fffef6 85%,#e4e8d6);border:1px solid #bfc9af;border-bottom:5px solid #bec9ad;border-radius:0 0 5px 5px;z-index:1}.piano-key.black{width:26px;height:81px;background:linear-gradient(90deg,#243c2c,#324d37 70%,#1f3627);z-index:2;border-radius:0 0 4px 4px;border-bottom:4px solid #152c1f;box-shadow:1px 3px 4px #132c2660}.piano-key>span{position:absolute;bottom:6px;left:0;right:0;font-size:9px;color:#939e85}.piano-key.black>span{color:#b4c2a3;font-size:7px}.piano-key.expected:after{content:'';position:absolute;bottom:25px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#d9a362;box-shadow:0 0 0 3px #d9a3621a}.piano-key.heard{background:linear-gradient(#b7cba3,#96b980);border-color:#849c71}.piano-key.black.heard{background:#668753}.piano-key.wrong{background:linear-gradient(#e1aa8c,#ce886d);border-color:#c18468}.piano-key.black.wrong{background:#ad6f55}.keyboard-legend{display:flex;justify-content:center;gap:25px;margin-top:12px;font-size:9px;color:#8e9b7f}.keyboard-legend>span{display:flex;align-items:center;gap:6px}.keyboard-legend i{display:inline-block;width:6px;height:6px;border-radius:2px;background:#8fb77c}.keyboard-legend .legend-expected{background:#daa467}.keyboard-legend .legend-wrong{background:#ce8b6f}.practice-actions{display:flex;gap:12px;align-items:center;margin-top:19px;flex-wrap:wrap}.practice-actions .text-link{margin-left:auto}.modal .small-text{margin-top:14px}.result-card{display:flex;gap:17px;align-items:center;background:#e8eddb;padding:20px;border-radius:8px;margin-top:20px}.result-icon{display:grid;place-items:center;background:#d2dfbf;border-radius:50%;width:42px;height:42px;flex-shrink:0}.result-card h3{font:22px Georgia}.result-card p{font-size:11px;margin-top:6px}.result-card small{font-size:9px;color:#83916f}.result-card .button{margin-left:auto;white-space:nowrap}
@media(min-width:1550px){.main{padding:0 65px}.hero{min-height:340px}.hero-copy{padding:40px 45px}}
@media(max-width:1150px){.sidebar{width:208px;padding:31px 15px}.main{margin-left:208px;width:calc(100% - 208px);padding:0 28px}.hero-copy{padding:30px;width:63%}.hero h2{font-size:38px}.hero-art{width:40%}.art-keyboard{right:-75px;opacity:.8}.stat{padding:18px 15px;gap:12px}.stat strong{font-size:26px}.song-grid{grid-template-columns:repeat(2,1fr)}.page-heading{align-items:start}h1{font-size:37px}.page-heading>.badge{margin-top:15px}.onboard-layout{gap:40px}.onboard-layout>aside h1{font-size:43px}}
@media(max-width:800px){.sidebar{width:76px;align-items:center;padding:28px 10px}.sidebar .wordmark{display:block;font-size:0;width:32px}.sidebar .wordmark span,.sidebar-label,.nav-link>span,.quiet-note,.user,.sidebar .nav-link i{display:none}.sidebar nav{margin-top:45px}.sidebar .nav-link{padding:15px}.sidebar .nav-link .icon{width:21px;height:21px}.main{margin-left:76px;width:calc(100% - 76px);padding:0 22px}.topbar{height:70px}.breadcrumb{font-size:8px}.page-heading{padding:27px 0 23px}.page-heading h1{font-size:32px}.page-heading>.badge{display:none}.hero-copy{width:70%;padding:28px}.hero h2{font-size:35px}.hero-art{width:36%;opacity:.75}.art-label{display:none}.art-keyboard{right:-110px}.hero p{font-size:11px}.stats-grid{gap:8px;margin:18px 0 28px}.stat{gap:10px;padding:15px 10px}.stat>.icon{width:18px}.stat strong{font-size:23px}.stat strong small{display:block;font-size:9px;margin:5px 0 0}.stat div>span{font-size:8px}.bottom-grid{grid-template-columns:1fr}.section-head h2{font-size:23px}.section-head>.text-link{font-size:9px}.task-row{padding:20px 17px;gap:14px}.task-detail>strong{font-size:12px}.task-detail>span{font-size:9px}.task-number{width:31px;height:31px}.task-time{font-size:9px}.path-card{padding:20px;flex-wrap:wrap}.path-item{gap:17px}.path-card .button{margin-top:0}.path-summary{gap:15px}.path-summary p{font-size:11px}.estimate{min-width:100px;padding-left:15px}.notice{flex-wrap:wrap;padding:18px}.notice .text-link{margin-left:38px}.page-heading>.button{font-size:10px;padding:9px 12px}.onboarding{padding:30px}.onboard-layout{grid-template-columns:1fr;margin-top:40px;gap:30px}.onboard-layout>aside h1{font-size:35px}.onboard-layout>aside h1 br{display:none}.onboard-layout>aside p{margin-top:15px;max-width:600px;font-size:12px}.onboard-steps{margin-top:25px}.question-card{padding:28px}.onboard-layout>aside>.eyebrow{display:none}.question-card h2{font-size:28px}.overlay{padding:15px}.modal,.modal.wide{max-height:calc(100dvh - 30px);padding:25px}.practice-controls{gap:9px}.practice-heading .badge{display:none}.practice-heading h2{font-size:26px}.practice-controls select{max-width:150px}.result-card{flex-wrap:wrap}.result-card .button{margin-left:59px}.training-card{padding:22px}.free-symbol{font-size:95px;padding-right:0}.modal-actions{flex-wrap:wrap}.mic-pill{font-size:9px}}
@media(max-width:560px){body{font-size:14px}.sidebar{inset:auto 0 0 0;width:100%;height:68px;height:calc(68px + env(safe-area-inset-bottom));padding:0 9px env(safe-area-inset-bottom);border-right:0;border-top:1px solid #dce1d0;background:#f4f4eaf5;z-index:20;display:block;backdrop-filter:blur(10px)}.sidebar .wordmark,.sidebar-bottom{display:none}.sidebar nav{display:flex;justify-content:space-between;margin:0;height:68px;gap:0}.sidebar .nav-link{padding:9px 4px;gap:4px;flex-direction:column;justify-content:center;font-size:8px;border-radius:0;flex:1}.sidebar .nav-link.selected{background:transparent;color:#375e3c}.sidebar .nav-link.selected:before{content:'';height:2px;position:absolute;top:0;width:30px;background:#75935f;border-radius:2px}.sidebar .nav-link>span{display:block;font-size:8px}.sidebar .nav-link .icon{width:20px;height:20px}.main{margin-left:0;width:100%;padding:0 19px 75px}.topbar{height:62px}.breadcrumb{font-size:7px;letter-spacing:1px}.breadcrumb span{margin:0 8px}.mic-pill{padding:7px 9px;font-size:8px;gap:6px}.mic-pill .icon{width:13px;height:13px}.page-heading{padding:26px 0 23px;flex-wrap:wrap;gap:17px}.page-heading .eyebrow{font-size:8px;margin-bottom:9px}.page-heading h1{font-size:30px;letter-spacing:-.8px}.page-heading p{font-size:11px;margin-top:10px}.hero{min-height:302px;border-radius:11px}.hero-copy{padding:26px 23px;width:77%}.hero h2{font-size:35px}.hero .eyebrow{font-size:7px;letter-spacing:1.3px}.hero p{max-width:245px;font-size:10px}.hero .button{font-size:10px;margin-top:18px;min-height:39px}.hero-meta{font-size:8px;gap:5px;margin-top:17px}.hero-art{width:35%;opacity:.6}.art-keyboard{width:230px;bottom:-48px;right:-160px;height:235px}.art-white{width:25px}.art-staff{display:none}.art-circle{width:240px;height:240px;right:-155px;top:30px}.stats-grid{margin-top:13px;gap:7px}.stat{padding:13px 8px;display:block}.stat>.icon{width:17px;height:17px;margin-bottom:8px}.stat strong{font-size:24px}.stat strong small{display:inline;margin-left:4px;font-size:8px}.stat div>span{font-size:7px;line-height:1.5;max-width:95px;margin-top:6px}.section-head{align-items:start;gap:8px}.section-head h2{font-size:23px}.section-head .eyebrow{font-size:8px}.section-head>.text-link{font-size:8px;white-space:nowrap;padding-top:21px;gap:4px}.section-head>.text-link>.icon{width:12px}.task-row{padding:17px 13px;gap:11px}.task-number{width:28px;height:28px;font-size:14px;flex-shrink:0}.task-detail>strong{font-size:11px}.task-detail>small{font-size:7px}.task-detail>span{display:none}.task-time{font-size:8px}.task-row>.icon{width:12px}.bottom-grid{gap:14px;margin-top:19px}.card{padding:23px}.soft-card h3,.progress-card h3{font-size:23px}.card p{font-size:11px}.footer{font-size:10px;gap:10px}.footer>span{font-size:7px}.path-summary{display:block;padding:23px}.path-summary strong{font-size:13px}.path-summary .estimate{display:flex;align-items:center;gap:15px;border-left:0;border-top:1px solid var(--line);margin-top:20px;padding:13px 0 0;text-align:left}.estimate strong{font-size:35px}.estimate span{font-size:9px}.path-item{gap:12px}.path-marker{width:32px;height:32px;font-size:13px}.path-item:before{left:15px;top:38px}.path-card{padding:19px 17px;gap:17px}.path-card h3{font-size:15px}.path-card p{font-size:10px}.path-card small{font-size:7px}.path-tags{flex-wrap:wrap;gap:8px}.path-tags>span:not(.badge){font-size:9px}.path-card .button{min-height:36px;padding:8px 12px;font-size:10px}.song-grid{gap:13px}.song-cover{height:112px;padding:12px}.song-cover small{font-size:6px;letter-spacing:1px;left:13px;bottom:12px}.cover-notes{font-size:66px;right:15px}.song-body{padding:14px}.song-body h3{font-size:19px;min-height:67px}.song-meta{font-size:7px;gap:5px;flex-wrap:wrap}.song-body p{font-size:8px}.song-body .button{font-size:9px;gap:6px;padding:9px;min-height:36px;margin-top:13px}.notice{padding:17px;gap:12px}.notice p{font-size:10px;min-width:200px}.notice .text-link{font-size:10px}.training-grid{grid-template-columns:1fr;gap:13px}.free-play{padding:25px;gap:10px}.free-play h2{font-size:27px}.free-symbol{font-size:65px}.free-play .button{font-size:10px;padding:10px 14px}.settings-card h2{font-size:26px}.onboarding,.login{padding:25px 19px 50px}.onboard-layout{margin-top:35px;gap:25px}.onboard-layout>aside h1{font-size:31px}.onboard-layout>aside p{font-size:11px;line-height:1.7}.onboard-steps{margin-top:20px}.onboard-layout>aside>small{font-size:8px}.question-card{padding:25px 21px}.question-card h2{font-size:27px}.question-card p{font-size:11px}.answer{font-size:11px;padding:13px}.question-footer{margin-top:26px}.question-footer .button{font-size:10px;padding:10px 13px}.minute{font-size:25px}.minute-options{gap:6px}.custom-minutes{font-size:10px}.overlay{padding:0;align-items:stretch}.modal,.modal.wide{border-radius:0;padding:30px 19px;max-height:100dvh;min-height:100dvh}.modal h2{font-size:28px}.modal>p{font-size:12px}.modal-actions{gap:18px}.modal-actions>.button{width:100%}.practice-heading{padding-right:10px}.practice-heading h2{font-size:25px}.practice-controls{padding:15px 0;gap:10px;margin-top:19px}.practice-controls label{font-size:8px}.practice-controls select{max-width:155px;font-size:10px}.practice-controls .loop-control{font-size:10px}.practice-stats{gap:15px;flex-wrap:wrap;font-size:9px}.practice-stats>span{white-space:nowrap}.feedback{font-size:11px}.sheet-svg{height:205px}.practice-actions{gap:8px}.practice-actions .button{font-size:10px;padding:9px 13px;min-height:38px}.practice-actions .text-link{margin-left:0;font-size:10px}.keyboard-legend{gap:16px;font-size:8px}.result-card{padding:18px;gap:12px}.result-card p{font-size:10px}.result-card .button{margin-left:0}#toast{bottom:85px;width:max-content;text-align:center}.login .card{margin-top:40px}.page-heading .button .icon{width:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Microphone controls remain usable on a phone while the keyboard scrolls. */
.listening-row{flex-wrap:wrap}.audio-level{font-size:10px;font-variant-numeric:tabular-nums;min-width:65px}.audio-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:0 0 16px}.audio-controls[hidden]{display:none}.audio-controls>label{display:grid;grid-template-columns:1fr auto;gap:2px 15px;font-size:11px;min-width:180px}.audio-controls input{grid-column:1/-1;width:100%;min-height:32px;accent-color:#526e45}.audio-controls output{font-variant-numeric:tabular-nums}.audio-controls .button{min-height:40px;font-size:11px}.audio-controls>p{flex-basis:100%;font-size:10px;margin:0;color:#78836d}.audio-controls details{font-size:10px;width:100%;color:#78836d}.audio-controls details p{font-size:10px;margin:8px 0 0}.audio-controls summary{cursor:pointer}