:root{--ink:#191512;--muted:#766d63;--soft:#fbf8f3;--line:#ded7cd;--teal:#087c76;--coral:#b84035;--sky:#c9edff;--sun:#f7c844;--shadow-sm:0 8px 22px #27221d0f;--shadow-md:0 18px 54px #27221d1f;color:var(--ink);background:var(--soft);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--soft);min-width:320px}body{min-width:320px;min-height:100svh;margin:0}#root{min-height:100svh}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #179b9357}.app-shell{height:100svh;min-height:680px;color:var(--ink);background:radial-gradient(circle at 18% 0,#f7c84447,#0000 26%),radial-gradient(circle at 72% 0,#34bada29,#0000 28%),linear-gradient(#fffdfa 0%,#f7f3ee 100%);grid-template-rows:1fr 100px;grid-template-columns:260px minmax(0,1fr) 300px;display:grid;overflow:hidden}button,input{font:inherit}button{color:inherit}.lesson-rail,.coach-panel,.practice-pane,.transport-bar{border-color:var(--line)}.lesson-rail{border-right:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffc7;flex-direction:column;grid-row:1/-1;min-height:0;display:flex}.brand{border-bottom:1px solid var(--line);letter-spacing:0;align-items:center;gap:12px;height:68px;padding:0 22px;font-size:21px;font-weight:760;display:flex}.brand-mark{background:#fff;border:1px solid #1a1714;border-radius:6px;place-items:center;width:34px;height:34px;display:grid}.lesson-progress{border-bottom:1px solid #ded7cda3;padding:24px 22px 18px}.lesson-progress>div:first-child{color:var(--muted);justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px;font-weight:700;display:flex}.lesson-progress strong{color:var(--ink);font-size:13px}.progress-track{background:#e9e4dc;border-radius:999px;height:6px;overflow:hidden}.progress-track span{border-radius:inherit;background:linear-gradient(90deg, var(--teal), #2fbdb3);height:100%;display:block}.lesson-list{flex:1;margin:0;padding:20px 14px;list-style:none;overflow:auto}.lesson-item{min-height:42px;color:var(--muted);border-radius:8px;grid-template-columns:28px minmax(0,1fr) 58px;align-items:center;gap:9px;padding:7px 8px;font-size:13px;font-weight:650;display:grid;position:relative}.lesson-item+.lesson-item:before{content:"";background:#ded6cb;width:1px;height:16px;position:absolute;top:-12px;left:21px}.lesson-item.active{color:#082f2d;background:#c9f0ec}.lesson-item.locked{opacity:.56}.lesson-index{width:24px;height:24px;color:var(--muted);background:#fff;border:1px solid #d7d0c7;border-radius:999px;place-items:center;font-size:12px;font-weight:800;display:grid}.lesson-item.done .lesson-index,.lesson-item.active .lesson-index{background:var(--teal);color:#fff;border-color:#0000}.lesson-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stars{color:#a8a196;justify-content:flex-end;gap:1px;display:inline-flex}.lesson-item.active .stars{color:var(--teal)}.hint-button{border:1px solid var(--line);color:#342d27;cursor:pointer;background:#fff;border-radius:8px;justify-content:center;align-items:center;gap:10px;height:48px;margin:0 22px 24px;font-size:13px;font-weight:760;display:inline-flex}.practice-pane{border-right:1px solid var(--line);background:linear-gradient(#ffffffeb,#fcf9f4b8);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;height:68px;padding:0 28px;display:flex}.breadcrumb{color:#5f5952;align-items:center;gap:16px;font-size:13px;font-weight:700;display:inline-flex}.breadcrumb span+span:before{content:"›";color:#918a82;margin-right:16px}.grade-mode{color:#6f5307;background:#fff5bf;border:1px solid #82630a42;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;gap:7px;min-height:34px;padding:0 12px;font-size:12px;font-weight:860;display:inline-flex;box-shadow:0 8px 18px #82630a1a}.top-actions,.practice-switches,.playback-controls,.tempo-controls,.volume-control{align-items:center;display:flex}.top-actions{gap:12px}.top-actions button,.practice-switches button,.playback-controls button,.tempo-select button,.tempo-controls button,.secondary-action,.reset-action{border:1px solid var(--line);box-shadow:var(--shadow-sm);cursor:pointer;background:#fff;border-radius:8px}.top-actions button{justify-content:center;align-items:center;min-width:40px;height:38px;display:inline-flex}.menu-button{gap:10px;padding:0 14px;font-size:13px;font-weight:760}.practice-header{justify-content:space-between;align-items:flex-start;gap:22px;padding:24px 28px 18px;display:flex}.practice-header h1{letter-spacing:0;margin:0 0 7px;font-size:25px;line-height:1.1}.practice-header p{color:var(--muted);margin:0;font-size:14px}.practice-switches{flex-wrap:wrap;justify-content:flex-end;gap:8px}.practice-switches button{color:#5f5952;align-items:center;gap:8px;height:38px;padding:0 14px;font-size:13px;font-weight:760;display:inline-flex}.practice-switches .selected{background:var(--teal);color:#fff;border-color:#0d867e}.score-strip{grid-template-columns:78px 44px 38px minmax(220px,1fr);align-items:center;gap:10px;min-height:clamp(132px,18vh,178px);padding:6px 28px 14px;display:grid}.score-caption{color:#5f5549;align-self:start;gap:4px;padding-top:16px;font-size:12px;font-weight:820;display:grid}.score-caption span{color:var(--teal)}.score-caption strong{font-size:11px}.clef{font-size:clamp(54px,9vh,76px);line-height:1}.time-signature{color:#1b1714;gap:0;font-size:clamp(28px,4.8vh,37px);font-weight:780;line-height:.84;display:grid}.staff-lines{background:linear-gradient(#ffffffb8,#ffffff38);border-radius:8px;min-width:0;height:clamp(112px,16vh,148px);position:relative;overflow:hidden}.staff-line{pointer-events:none;background:#28231e;height:2px;position:absolute;left:0;right:0}.line-1{bottom:30%}.line-2{bottom:42%}.line-3{bottom:54%}.line-4{bottom:66%}.line-5{bottom:78%}.measure-bar,.end-bar{content:"";pointer-events:none;background:#1d1915;width:2px;height:48%;position:absolute;bottom:30%}.end-bar{right:6px;box-shadow:5px 0 #1d1915}.score-note{cursor:pointer;background:0 0;border:0;place-items:center;width:50px;height:64px;padding:0;display:grid;position:absolute;transform:translate(-50%,36%)}.finger-number{color:#1c1815;font-size:16px;font-weight:860;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.note-head{background:#16120f;border-radius:50%;width:31px;height:24px;display:block;position:relative;transform:rotate(-15deg);box-shadow:0 3px #0000001f}.ledger-line{background:#28231e;height:2px;position:absolute;top:50%;left:-10px;right:-10px;transform:translateY(-50%)}.note-name{color:#191512;font-size:18px;font-weight:900;position:absolute;bottom:-11px;left:50%;transform:translate(-50%)}.score-note.current .note-head,.score-note.hit .note-head{background:var(--teal)}.score-note.current{color:var(--teal)}.score-note:focus-visible{outline-offset:0;border-radius:8px}.score-note.current .note-head{box-shadow:0 0 0 6px #087c7624,0 0 28px #087c7666}.score-note.hit .note-name{color:#82630a}.score-note.hit .note-head{background:var(--sun)}.score-note.miss .note-head,.score-note.late .note-head{background:var(--coral)}.playhead{pointer-events:none;background:#179b937a;width:2px;position:absolute;top:10px;bottom:8px;box-shadow:0 0 0 6px #179b9314}.falling-stage{color:#16313a;background:radial-gradient(circle at 18% 72%,#ffffffbf,#0000 15%),radial-gradient(circle at 84% 22%,#f7c84433,#0000 18%),linear-gradient(#bfeaff 0%,#83cff2 100%);border:1px solid #131b1f2e;border-radius:8px;flex-direction:column;flex:1;min-height:0;margin:0 12px 12px;display:flex;overflow:hidden;box-shadow:0 18px 50px #1e1d1a2e}.stage-toolbar{color:#17313a;align-items:center;gap:10px;height:48px;padding:0 18px;font-size:12px;font-weight:760;display:flex}.toggle-on{background:#ffffffb3;border:1px solid #087c7638;border-radius:999px;width:44px;height:26px;position:relative}.toggle-on span{background:#fff;border-radius:999px;width:18px;height:18px;position:absolute;top:3px;right:4px;box-shadow:0 0 22px #1cd4c4e6}.lane-grid{background:repeating-linear-gradient(90deg,#ffffff7a 0 2px,#0000 2px 8%),linear-gradient(#ffffff2e,#fff0);flex:1;min-height:clamp(150px,24vh,282px);position:relative;overflow:hidden}.fall-note{color:#fff;text-shadow:0 1px 1px #0000003d;cursor:pointer;background:linear-gradient(#0d7f77,#075c56);border:1px solid #ffffff6b;border-radius:8px;place-items:center;min-width:40px;height:40px;font-size:14px;font-weight:840;transition:transform .18s,opacity .18s;display:grid;position:absolute;box-shadow:0 10px 18px #04101247}.fall-note.current{background:linear-gradient(#0c8d84,#075f59);transform:translateY(10px)scale(1.08)}.fall-note.hit{opacity:.42}.fall-note.late,.fall-note.miss{background:linear-gradient(#c2463a,#912d27)}.hit-line{background:var(--coral);height:3px;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -16px 60px #f85c4e38}.stage-playhead{background:#1acbbf75;width:1px;position:absolute;top:0;bottom:0}.keyboard{background:#171411;border-top:1px solid #00000061;height:clamp(110px,16vh,168px);position:relative;overflow-x:hidden}.white-keys{grid-template-columns:repeat(15,minmax(42px,1fr));gap:2px;height:100%;padding:0 2px 2px;display:grid}.black-keys{pointer-events:none;width:calc(100% - 4px);height:74%;position:absolute;top:0;left:2px}.piano-key{cursor:pointer;border:0}.piano-key.white{color:#4c463e;background:linear-gradient(90deg,#fff0,#0c0a0814 52%,#fff0),linear-gradient(#fff 0%,#f4efe8 100%);border-radius:0 0 6px 6px;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;padding-bottom:14px;font-size:14px;font-weight:760;display:flex;position:relative;box-shadow:inset 0 -4px #0000001c}.piano-key.white small{color:#938a7f;font-size:10px}.piano-key.white.expected,.piano-key.white.pressed{color:#063c39;background:linear-gradient(#179b933d,#179b939e),linear-gradient(#fff 0%,#f4efe8 100%);box-shadow:inset 0 -4px #0000001c,0 0 28px #14cabead}.piano-key.black{z-index:2;background:linear-gradient(90deg,#0d0c0b,#2b2926 46%,#050505);border-radius:0 0 5px 5px;width:32px;height:100%;position:absolute;top:0;box-shadow:inset 0 -5px #ffffff14,0 5px 8px #00000057}.piano-key.black.pressed{background:linear-gradient(#26afa6,#0f675f)}.black-keys .piano-key{pointer-events:auto}.coach-panel{background:#fffc;flex-direction:column;gap:8px;min-height:0;padding:12px 10px 10px;display:flex;overflow-y:auto}.coach-title{align-items:center;gap:8px;padding:0 8px 4px;display:flex}.coach-title h2{margin:0;font-size:17px;line-height:1.2}.score-card{border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#fffffff0;border-radius:8px}.main-score{padding:12px}.main-score p{color:var(--muted);margin:0 0 9px;font-size:13px;font-weight:760}.score-row{grid-template-columns:74px 1fr;align-items:center;gap:12px;display:grid}.score-row>div:last-child{gap:5px;display:grid}.score-row strong{font-size:15px}.score-row span{color:var(--muted);font-size:12px}.score-ring,.mini-ring{--score:80;background:radial-gradient(circle closest-side, #fff 68%, transparent 70%), conic-gradient(var(--teal) calc(var(--score) * 1%), #e9e3dc 0);border-radius:999px;place-items:center;display:grid}.score-ring{color:#17120f;width:72px;height:72px}.score-ring strong{font-size:25px;line-height:.82}.score-ring span{margin-top:-18px;font-size:11px}.metric-card{grid-template-columns:minmax(0,1fr) 44px 62px;align-items:center;gap:8px;min-height:58px;padding:8px 10px;display:grid}.metric-card strong{margin-bottom:4px;font-size:13px;display:block}.metric-card span{color:var(--muted);font-size:11px}.mini-ring{color:#22201d;width:40px;height:40px;font-size:12px;font-weight:820}.mini-ring.coral{background:radial-gradient(circle closest-side, #fff 68%, transparent 70%), conic-gradient(var(--coral) calc(var(--score) * 1%), #e9e3dc 0)}.mini-ring.green{background:radial-gradient(circle closest-side, #fff 68%, transparent 70%), conic-gradient(#55ad52 calc(var(--score) * 1%), #e9e3dc 0)}.sparkline{justify-content:space-between;align-items:end;gap:4px;height:34px;display:flex}.sparkline span{background:var(--teal);border-radius:999px 999px 0 0;width:4px}.sparkline.coral span{background:var(--coral)}.sparkline.green span{background:#55ad52}.tempo-card{padding:10px}.tempo-card strong{margin-bottom:8px;font-size:13px;display:block}.tempo-controls{justify-content:space-between;gap:14px}.tempo-controls button{width:50px;height:34px;font-size:21px;font-weight:700}.tempo-controls span{font-size:21px;font-weight:780}.tips-card{padding:10px}.tips-card strong{margin-bottom:8px;font-size:13px;display:block}.tips-card ul{gap:7px;margin:0;padding:0;list-style:none;display:grid}.tips-card li{color:#342d27;padding-left:20px;font-size:12px;line-height:1.32;position:relative}.tips-card li:before{content:"";background:var(--teal);border-radius:999px;width:9px;height:9px;position:absolute;top:5px;left:0}.tips-card li.warn:before{background:var(--coral)}.secondary-action,.reset-action{color:#2b2520;justify-content:space-between;align-items:center;min-height:38px;padding:0 14px;font-size:13px;font-weight:760;display:inline-flex}.reset-action{border-color:#26211d}.transport-bar{border-top:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffe0;grid-column:2/-1;grid-template-columns:minmax(150px,.9fr) minmax(160px,.9fr) minmax(176px,1fr) minmax(132px,.7fr) minmax(160px,.8fr) minmax(130px,.8fr);align-items:center;gap:10px;padding:12px 16px;display:grid}.input-tile{border:1px solid var(--line);text-align:left;min-width:0;height:64px;box-shadow:var(--shadow-sm);cursor:pointer;background:#fff;border-radius:8px;grid-template-columns:32px 1fr auto;align-items:center;gap:12px;padding:0 12px;display:grid}.input-tile span{color:#2b2520;gap:2px;font-size:13px;font-weight:800;display:grid}.input-tile strong{color:var(--teal);font-size:12px}.input-tile.active{border-color:#179b9370;box-shadow:0 0 0 3px #179b931a}.meter{align-items:end;gap:2px;height:22px;grid-template-columns:none!important;display:flex!important}.meter i{background:#62c857;border-radius:999px;width:3px;height:12px}.meter i:nth-child(2n){height:17px}.meter i.hot{background:var(--coral)}.status-dot{background:#b8b0a5;border-radius:999px;width:10px;height:10px}.status-dot.connected{background:#55ad52}.playback-controls{justify-content:center;gap:10px}.playback-controls button{place-items:center;width:48px;height:48px;display:grid}.playback-controls .primary-play{background:var(--teal);color:#fff;border:0;border-radius:999px;width:64px;height:64px;box-shadow:0 16px 38px #179b9357}.tempo-select{color:var(--muted);grid-template-columns:auto 1fr;align-items:center;gap:8px;font-size:13px;font-weight:780;display:grid}.tempo-select button{justify-content:center;align-items:center;gap:8px;height:42px;font-weight:800;display:inline-flex}.volume-control{gap:12px}.volume-control input{width:100%;accent-color:var(--teal)}.transport-feedback{color:#4c463e;font-size:11px;font-weight:700;line-height:1.45}@media (width<=1180px){.app-shell{grid-template-rows:auto auto auto;grid-template-columns:230px minmax(0,1fr)}.lesson-rail{grid-row:1/3}.coach-panel{border-top:1px solid var(--line);grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.coach-title,.main-score,.tips-card,.secondary-action,.reset-action{grid-column:1/-1}.transport-bar{grid-column:1/-1;grid-template-columns:repeat(2,minmax(210px,1fr))}}@media (width<=820px){.app-shell{flex-direction:column;height:auto;min-height:100svh;display:flex;overflow:visible}.lesson-rail{border-right:0;max-height:none}.lesson-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:230px;display:grid}.practice-header,.topbar{padding-inline:18px}.practice-header{flex-direction:column}.score-strip{grid-template-columns:66px 38px 32px minmax(0,1fr);gap:7px;padding-inline:18px}.score-caption{padding-top:18px;font-size:11px}.clef{font-size:58px}.time-signature{font-size:29px}.falling-stage{margin-inline:8px}.lane-grid{min-height:220px}.white-keys{grid-template-columns:repeat(15,48px);min-width:720px}.black-keys{width:720px}.keyboard{overflow-x:auto}.coach-panel{display:flex}.transport-bar{grid-template-columns:1fr;display:grid}}@media (width<=520px){.brand{height:58px}.lesson-rail{max-height:286px;overflow:hidden}.lesson-progress{padding:15px 20px 12px}.lesson-list{grid-template-columns:1fr;max-height:132px;padding-block:10px;overflow-y:auto}.lesson-item{grid-template-columns:28px minmax(0,1fr) 58px}.topbar{flex-wrap:wrap;gap:12px;height:auto;min-height:70px}.breadcrumb{flex-wrap:wrap;gap:8px;line-height:1.35}.breadcrumb span+span:before{margin-right:8px}.top-actions{flex-shrink:0}.grade-mode{order:3;width:100%}.hint-button{display:none}.practice-header{padding-block:16px 12px}.practice-header h1{font-size:23px}.score-strip{grid-template-columns:32px 28px minmax(0,1fr);gap:5px;min-height:118px;padding:4px 12px 12px}.score-caption{display:none}.clef{font-size:48px}.time-signature{font-size:25px}.staff-lines{height:108px}.score-note{width:44px;height:58px}.note-head{width:27px;height:21px}.finger-number{font-size:14px;top:-5px}.note-name{font-size:16px;bottom:-10px}}