.keyboard-navigation{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:-7px 0 13px}.keyboard-navigation>span{font-size:11px;color:#76856c;margin-right:auto}.keyboard-navigation button{border:1px solid #dce2d1;background:#f3f6ec;border-radius:6px;min-height:44px;padding:7px 12px;font-size:12px}:root{font-family:Inter,PingFang SC,Noto Sans SC,Microsoft YaHei,system-ui,sans-serif;color:#203d37;background:#f4f3ee;font-synthesis:none;font-weight:400;line-height:1.55;font-size:14px;--green:#173d37;--muted:#738078;--border:#dedfd5;--orange:#ca6646;--mint:#e9f0e8}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,summary{touch-action:manipulation}button{cursor:pointer}button:disabled,fieldset:disabled button,select:disabled{cursor:not-allowed;opacity:.52}button{color:inherit}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #d18539;outline-offset:3px}a{color:inherit;text-decoration:none}p,h1,h2,h3{margin:0}button{transition:background .16s,box-shadow .16s,color .16s}button:hover:not(:disabled){filter:brightness(.96)}.app-shell{max-width:1680px;margin:auto;padding:0 40px}.topbar{height:94px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:13px;font-size:21px;font-weight:650;letter-spacing:2px}.brand small{display:block;font-size:11px;font-weight:450;letter-spacing:3px;margin-top:2px;color:#6f7d73}.brand-icon{display:grid;place-items:center;background:var(--green);color:#f6f5ed;width:47px;height:49px;border-radius:13px 13px 13px 2px;font-family:serif;font-size:40px;line-height:1}.header-note{color:#7b847b;font-size:13px;letter-spacing:1px}.local-badge{font-size:12px;color:#6c7b70;display:flex;align-items:center;gap:8px;white-space:nowrap}.local-badge i,.tiny-dot{display:inline-block;width:6px;height:6px;background:#759979;border-radius:50%}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:33px 0 30px}.eyebrow{font-size:12px;color:#8a705a;font-weight:600;letter-spacing:2px}h1{font-size:32px;line-height:1.3;letter-spacing:1px;font-weight:600;margin:8px 0 10px}.intro>div>p{color:#737e74;font-size:14px}.connection{border-left:1px solid #d8dbcf;padding-left:25px;max-width:470px;min-width:260px}.connection>div:first-child{display:flex;gap:8px;align-items:center}.connection strong{font-size:13px;font-weight:550}.connection p{font-size:12px;color:#7d857a;margin-top:3px;overflow-wrap:anywhere}.status-dot{height:8px;width:8px;border-radius:50%;background:#b8b9aa;flex-shrink:0}.online .status-dot{background:#3a8663;box-shadow:0 0 0 4px #e1eadc}.connection-controls{display:flex;gap:8px;align-items:center;margin-top:9px}.connection-controls select{max-width:210px;min-width:0}.button{border:1px solid transparent;min-height:44px;padding:10px 20px;display:inline-flex;align-items:center;justify-content:center;gap:20px;font-weight:550;border-radius:8px;white-space:nowrap}.primary{background:var(--green);color:#fff;box-shadow:0 3px 5px #163b3510}.subtle{border-color:#d5dacc;background:#f8f9f3}.connection .button{font-size:12px;padding:8px 14px}.workspace{display:grid;grid-template-columns:276px minmax(0,1fr);gap:24px;align-items:start}.settings-panel{background:#eeefe6;border:1px solid #e2e3d8;border-radius:13px;padding:22px 21px}.section-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid #d9ddcf}.section-top h2{font-size:16px;font-weight:600}.section-top>span{font-size:11px;color:#7e8879}fieldset{border:0;border-bottom:1px solid #d9ddcf;padding:0 0 18px;margin:21px 0 0;min-width:0}legend{display:flex;gap:9px;font-size:11px;color:#8e9a87;padding:0;margin-bottom:12px;font-weight:600}legend span{font-size:13px;color:#445748}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mode-options button{background:transparent;border:1px solid #d8ddcd;border-radius:8px;text-align:left;padding:11px 5px 11px 10px;min-height:65px}.mode-options span{display:block;font-size:13px;font-weight:550}.mode-options small{display:block;font-size:11px;color:#89917f;margin-top:3px}.mode-options .selected{background:#fffef7;border-color:#819d83;box-shadow:0 2px 4px #22382508}.mode-options .selected span{color:#214d36}.region-options{display:grid;gap:6px}.region-options button{display:flex;justify-content:space-between;align-items:center;background:transparent;border:1px solid #d9dece;min-height:44px;padding:8px 12px;border-radius:7px;font-size:13px}.region-options .selected{background:#dce8d8;border-color:#adc3a5;color:#325e3e}.field-help{color:#7f897a;font-size:11px;line-height:1.7;margin-top:10px}.select-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:10px;margin-top:13px}select{background:#fbfcf6;border:1px solid #d6ddcc;border-radius:7px;min-height:44px;max-width:100%;padding:6px 25px 6px 10px;color:#38513e;font-size:12px}.select-row select{flex:1;max-width:155px}.segmented{display:flex;background:#e1e5d9;padding:3px;border-radius:8px;gap:2px}.segmented button{flex:1;min-height:44px;border:0;background:transparent;border-radius:6px;font-size:12px}.segmented .selected{background:#fffef8;box-shadow:0 2px 3px #283a2210}.kind-options{display:flex;gap:6px;margin-top:12px}.kind-options button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;border:1px solid #d3dbc8;border-radius:7px;background:transparent;font-size:11px;min-height:44px}.kind-options button b{font-size:24px;line-height:1.4;font-weight:400}.kind-options .selected{border-color:#9fb58f;background:#e0ead9}.speed-control{margin-top:18px}.speed-control>label{display:flex;justify-content:space-between;font-size:12px;align-items:center}.speed-control strong{font-size:14px;font-weight:550}.speed-control small{font-weight:400;font-size:10px;color:#7c8877}.speed-control input{display:block;width:100%;height:44px;margin:0;accent-color:#547b54;cursor:pointer}.speed-control>div{display:flex;justify-content:space-between;color:#87907f;font-size:10px;margin-top:-5px}.toggles{border-top:1px solid #d9ddcf;margin-top:18px;padding-top:12px}.toggles label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:12px}.toggles input{accent-color:#456c45;width:18px;height:18px}.practice-area{min-width:0}.scoreboard{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #e1e2d9;background:#f9faf5;border-radius:12px;padding:17px 5px;margin-bottom:18px}.scoreboard>div{border-right:1px solid #e3e6da;padding-left:24px}.scoreboard>div:last-child{border:0}.scoreboard span{display:block;color:#819080;font-size:12px}.scoreboard strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:30px;line-height:1.45;font-weight:450;letter-spacing:-1px}.scoreboard strong small{font-family:system-ui;font-size:12px;font-weight:400;color:#879180;letter-spacing:0}.score-card{border:1px solid #dce1d5;border-radius:13px;background:#fffefa;box-shadow:0 5px 18px #293d2510;overflow:hidden}.score-card-header{padding:18px 23px 0;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#7c897a;gap:10px}.practice-tag{color:#53754c;background:#edf2e7;border:1px solid #dde6d5;padding:4px 10px;border-radius:20px;font-size:11px}.score-stage{position:relative;min-height:230px}.notation{position:relative;height:230px;overflow:hidden}.notation-layer{position:absolute;inset:0;pointer-events:none}.notation-layer svg{display:block;max-width:none}.moving-notes{will-change:transform}.playline{position:absolute;top:35px;bottom:38px;border-left:2px solid #ca6646;pointer-events:none}.playline span{display:block;position:absolute;font-size:10px;white-space:nowrap;top:-21px;left:-18px;color:#bb704b}.feedback{display:flex;align-items:center;gap:10px;min-height:58px;padding:12px 23px;color:#7b8373;background:#f9f9f1;border-top:1px solid #eceee3;font-size:13px}.feedback-mark{color:#91a57c;border:1px solid #d4dec7;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex-shrink:0}.feedback.correct{color:#3d7546;background:#f2f8ec}.feedback.wrong{color:#ad6546;background:#fff6ec}.target-hint{margin-left:auto;font-size:11px;white-space:nowrap;color:#88674d;border-left:1px solid #dfe4d5;padding-left:15px}.transport{padding:17px 23px;display:flex;gap:12px;justify-content:space-between;align-items:center;border-top:1px solid #e8ebdf}.transport-copy{font-size:11px;color:#8b9483;display:flex;align-items:center;gap:7px}.transport-buttons{display:flex;gap:9px}.pause-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#fffefaeb;display:flex;align-items:center;justify-content:center;gap:18px;flex-direction:column;z-index:3}.pause-overlay>span{font-size:25px}.pause-overlay strong{font-size:17px;font-weight:500}.pause-overlay .button{font-size:12px}.keyboard-card{margin-top:20px;background:#fffefa;border:1px solid #dce1d5;border-radius:13px;padding:23px}.keyboard-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}h2{font-size:16px;font-weight:550;letter-spacing:.3px}.keyboard-heading p{font-size:11px;color:#8c9585;margin-top:5px}.input-badge{font-size:10px;color:#929a8b;text-align:right;white-space:nowrap}.input-badge b{display:block;font-size:12px;color:#4f6850;font-weight:500;margin-top:3px}.keyboard-scroll{overflow:auto;padding:0 2px;scrollbar-width:thin;scrollbar-color:#aebaa3 #f0f2e9}.keyboard{display:flex;position:relative;min-width:1008px;height:174px;-webkit-user-select:none;user-select:none;touch-action:pan-x;padding:0 0 3px;border-radius:5px;border:1px solid #aeb7a1;background:#aeb7a1;box-shadow:0 4px #dce1d3}.white-key{position:relative;flex:1;border:0;border-right:1px solid #cdd3c5;border-bottom:4px solid #dce0d5;background:#edeee7;border-radius:0 0 4px 4px;padding:120px 0 0;touch-action:pan-x;min-width:0;transition:background .1s}.white-key:last-of-type{border-right:0}.white-key.inrange{background:linear-gradient(#fffefa,#fafaf0);border-bottom-color:#b3c7a4}.white-key span{font-size:11px;color:#87917d}.white-key .solfege-label{display:block;font-size:12px;line-height:1.3;font-weight:600}.white-key:has(.solfege-label){padding-top:98px}.white-key:has(.solfege-label).target:after{bottom:59px}.white-key.inrange span{color:#4f6a4a;font-weight:550}.white-key i{display:block;font-size:9px;line-height:1;font-style:normal;color:#a17d54;position:absolute;bottom:6px;left:0;right:0}.white-key.target{background:#dce9ce;border-bottom-color:#7b9d62}.white-key.target:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#7d9a5d;bottom:37px;left:calc(50% - 3px)}.white-key.pressed{background:#e3b58d;border-bottom-color:#b0784e}.black-key{position:absolute;top:0;width:44px;height:105px;transform:translate(-50%);border:0;background:transparent;z-index:1;padding:0;touch-action:none}.black-key:before{content:"";display:block;position:absolute;inset:0 4px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#26382e,#3c4c3e 70%,#273b2e);border:1px solid #253b2e;border-bottom:5px solid #192b21;box-shadow:1px 3px 3px #24351b30}.black-key.pressed:before{background:#ac805e}.octave-labels{display:grid;grid-template-columns:repeat(3,1fr);min-width:1008px;margin-top:15px;padding-bottom:7px}.octave-labels>span{display:flex;gap:12px;justify-content:center;align-items:center;border-right:1px solid #dce3d3;color:#a1a995;font-size:11px}.octave-labels>span:last-child{border:0}.octave-labels b{font-weight:400;font-size:10px}.octave-labels .selected{color:#5b784e}.octave-labels .selected b{background:#eaf0e0;border-radius:3px;padding:2px 5px}.keyboard-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #e9ecdf;margin-top:12px;padding-top:9px;color:#9a9f91;font-size:10px}.keyboard-footer label{display:flex;gap:7px;align-items:center;white-space:nowrap}.keyboard-footer select{min-height:44px;font-size:11px;padding:4px 6px}.keyboard-shortcut{font-size:10px;color:#929c88;margin-top:6px}.bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}.weak-notes,.help{border-top:1px solid #d8dece;padding-top:17px}.weak-notes h2,.help summary{font-size:13px}.weak-notes p,.help p,.help li{font-size:11px;color:#7e8c74;line-height:1.9;margin-top:6px}.weak-notes small{font-size:10px;color:#9aa38f;display:block;margin-top:10px}.help summary{cursor:pointer;min-height:44px;list-style-position:inside;color:#47623f}.help ol{padding-left:20px;margin-top:0}.weak-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.weak-list span{display:flex;gap:9px;align-items:center;background:#ebeede;border:1px solid #e0e5d5;padding:5px 9px;border-radius:5px;font-size:10px;color:#87967c}.weak-list b{font-size:13px;color:#58764e;font-weight:500}footer{display:flex;justify-content:space-between;align-items:center;color:#98a08c;font-size:11px;padding:24px 0;margin-top:25px;border-top:1px solid #dde1d3;gap:20px}footer button{background:none;border:0;min-height:44px;font-size:11px;color:#7a8870;padding:8px 10px}.footer-divider{margin:0 12px;color:#c0c7b5}.result-panel{display:flex;flex-wrap:wrap;gap:15px;align-items:center;justify-content:space-between;background:#e4eddb;border:1px solid #cbdabc;border-radius:12px;padding:20px 23px;margin-top:18px}.result-panel h2{margin-top:6px}.result-panel p{font-size:11px;color:#7c8a70;flex-basis:100%}.result-values{display:flex;gap:15px;font-size:11px;color:#778969}.result-values b{font-size:19px;font-weight:500;display:block;color:#40613b}.notice{background:#fff1d8;border:1px solid #e9d6ae;border-radius:8px;padding:12px 18px;margin-bottom:18px;font-size:13px}.locked{color:#9d7752}@media(min-width:1450px){.app-shell{padding:0 60px}.workspace{grid-template-columns:292px minmax(0,1fr);gap:30px}.settings-panel{padding:25px}.score-stage,.notation{min-height:250px}.notation-layer{top:8px}.keyboard{min-width:1008px}.keyboard-scroll{overflow-x:auto}}@media(max-width:1100px){.app-shell{padding:0 24px}.header-note{display:none}.workspace{grid-template-columns:250px minmax(0,1fr);gap:18px}.settings-panel{padding:18px 16px}.scoreboard>div{padding-left:15px}.scoreboard strong{font-size:26px}.transport-copy{display:none}.transport{justify-content:flex-end}.keyboard-heading{align-items:start}.keyboard-card{padding:18px}.keyboard-footer{flex-wrap:wrap}.bottom-row{gap:15px}.intro{padding-top:26px}.connection{min-width:230px;max-width:340px}.connection-controls{flex-wrap:wrap}}@media(max-width:760px){.app-shell{padding:0 16px}.topbar{height:78px}.brand{font-size:18px;gap:10px}.brand-icon{width:39px;height:43px;font-size:33px}.brand small{font-size:10px;letter-spacing:2px}.local-badge{font-size:10px;gap:5px}.intro{padding:25px 0 22px;display:block}.intro h1{font-size:28px}.intro>div>p{font-size:13px}.connection{max-width:100%;min-width:0;border:1px solid #dce1d2;border-radius:10px;margin-top:20px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center}.connection>p{grid-row:2;font-size:11px}.connection-controls{grid-column:2;grid-row:1/3;margin:0;max-width:150px}.connection-controls select{width:100%}.workspace{display:flex;flex-direction:column;gap:20px}.settings-panel{order:2;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;padding:18px}.section-top{grid-column:1/-1}.settings-panel fieldset{margin-top:16px}.settings-panel fieldset:nth-of-type(3){grid-column:1/-1}.mode-options{grid-template-columns:1fr}.region-options button{font-size:12px}.select-row{flex-wrap:wrap}.select-row select{max-width:100%}.field-help{font-size:11px}.kind-options button{font-size:12px}.speed-control{grid-column:1/-1}.speed-control small,.speed-control>div{font-size:11px}.toggles{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.toggles label{font-size:11px;flex:1;white-space:nowrap}.practice-area{width:100%}.scoreboard{padding:13px 0}.scoreboard>div{padding-left:13px}.scoreboard span{font-size:11px}.scoreboard strong{font-size:24px}.scoreboard strong small{font-size:10px}.score-card-header{padding:14px 14px 0;font-size:11px}.clef-tag{display:none}.feedback{font-size:12px;padding:12px 14px;gap:8px;flex-wrap:wrap}.target-hint{font-size:11px;padding-left:10px}.transport{padding:14px}.transport-buttons{width:100%}.transport-buttons .button{flex:1}.keyboard-card{padding:16px}.keyboard-heading h2{font-size:15px}.keyboard-heading p{font-size:11px}.input-badge{font-size:10px}.input-badge b,.keyboard-footer{font-size:11px}.keyboard-shortcut{font-size:11px;line-height:1.8}.keyboard-footer label{font-size:11px;flex-wrap:wrap}.keyboard-footer select{font-size:12px}.bottom-row{grid-template-columns:1fr;gap:12px}.weak-notes p,.help p,.help li{font-size:12px}.weak-notes small,.weak-list span{font-size:11px}.result-panel{padding:18px}.result-panel h2{font-size:15px}.result-values{width:100%;justify-content:space-between}.result-panel p{font-size:12px}.score-stage,.notation{height:220px;min-height:220px}.notation-layer svg{height:220px!important}.playline{top:30px;bottom:35px}footer{align-items:start;font-size:10px;gap:10px;flex-direction:column;margin-top:20px;padding:18px 0}footer>div{display:flex;width:100%;justify-content:space-between}footer button{font-size:12px;padding-left:0}.footer-divider{margin:0 8px}}.field-help,.keyboard-heading p,.keyboard-footer,.keyboard-shortcut,.weak-notes p,.help p,.help li{font-size:12px;color:#66765e}.scoreboard span{font-size:12px;color:#6f7e65}.input-badge,.transport-copy,.weak-notes small{font-size:11px;color:#76816b}.kind-options button{font-size:12px}.mode-options small{color:#6b775f}.speed-control small,.speed-control>div{font-size:11px;color:#6c795f}.keyboard-footer select{font-size:12px}.white-key i{font-size:10px}.brand small{color:#6b7865}@media(max-width:760px){.settings-panel{grid-template-columns:1fr}.settings-panel fieldset{grid-column:1/-1}.mode-options{grid-template-columns:1fr 1fr}.keyboard-navigation{display:grid;grid-template-columns:repeat(3,1fr)}.keyboard-navigation>span{grid-column:1/-1}.keyboard-navigation button{padding:7px 5px}.keyboard,.octave-labels{min-width:945px}.keyboard-heading{flex-wrap:wrap}.keyboard-heading h2{font-size:16px}.input-badge{margin-left:auto}.scoreboard span{font-size:11px}.field-help,.select-row,.toggles label{font-size:12px}.kind-options button{font-size:13px}.white-key i{font-size:10px}.select-row select{flex:none;min-width:160px}.toggles{display:block}.settings-panel fieldset:nth-of-type(3){grid-column:1/-1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.moving-notes{will-change:auto}}