:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;color:#17211c;background:#f7f9f7;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg: #f7f9f7;--surface: #ffffff;--surface-strong: #f0f5f2;--ink: #17211c;--muted: #64746d;--line: #dfe8e2;--accent: #12906a;--accent-weak: #dff6ee;--amber: #b97816;--amber-weak: #fff1d6;--wrong: #c4473d;--wrong-weak: #ffe4e1;--blue: #2f66c9;--shadow: 0 18px 50px rgba(27, 44, 35, .08)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg)}button{font:inherit}.app-shell{min-height:100vh}.app-header{align-items:center;background:#ffffffeb;border-bottom:1px solid var(--line);display:flex;gap:24px;justify-content:space-between;min-height:72px;padding:0 32px;position:sticky;top:0;z-index:10}.brand{align-items:center;display:flex;gap:12px}.brand-mark{align-items:center;background:#17211c;border-radius:8px;color:#fff;display:grid;height:40px;place-items:center;width:40px}.brand strong,.brand span{display:block}.brand strong{font-size:16px;line-height:1.2}.brand span{color:var(--muted);font-size:12px;margin-top:2px}.mode-tabs{align-items:center;display:flex;gap:8px}.header-actions{align-items:center;display:flex;gap:10px}.mode-tabs button,.command-button,.icon-button{align-items:center;border:1px solid var(--line);border-radius:8px;cursor:pointer;display:inline-flex;gap:8px;justify-content:center;min-height:40px}.mode-tabs button{background:transparent;color:var(--muted);padding:0 14px}.mode-tabs button.is-active,.settings-entry.is-active{background:#17211c;border-color:#17211c;color:#fff}.practice-shell{margin:0 auto;max-width:1360px;padding:24px 28px 36px}.overview-shell{display:grid;gap:18px;margin:0 auto;max-width:1180px;padding:24px 28px 36px}.settings-shell{display:grid;gap:18px;margin:0 auto;max-width:980px;padding:24px 28px 36px}.overview-hero,.section-heading{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);display:flex;gap:18px;justify-content:space-between;padding:22px}.overview-hero h1,.section-heading h1{font-size:26px;line-height:1.15;margin:0}.overview-hero p,.section-heading p{color:var(--muted);font-size:13px;line-height:1.6;margin:8px 0 0}.overview-actions{display:flex;flex-shrink:0;gap:10px}.overview-grid{align-items:start;display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}.stage-bar{align-items:center;display:flex;gap:20px;justify-content:space-between;margin-bottom:18px}.stage-list{display:flex;gap:12px;min-width:0}.stage-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer;min-height:86px;min-width:214px;padding:14px 16px;text-align:left}.stage-card span,.stage-card strong,.stage-card small{display:block}.stage-card span{color:var(--muted);font-size:12px}.stage-card strong{font-size:18px;line-height:1.2;margin-top:4px}.stage-card small{color:var(--muted);font-size:12px;margin-top:8px}.stage-card.is-active{background:var(--amber-weak);border-color:#e3bb70;box-shadow:inset 0 0 0 1px #b9781629}.session-actions{display:flex;gap:10px;flex-shrink:0}.sequence-toggle{background:var(--surface);border:1px solid var(--line);border-radius:8px;display:inline-flex;gap:4px;padding:3px}.sequence-toggle button{background:transparent;border:0;border-radius:6px;color:var(--muted);cursor:pointer;min-height:34px;padding:0 10px}.sequence-toggle button.is-active{background:var(--ink);color:#fff}.icon-button{background:var(--surface);color:var(--ink);width:42px}.command-button{background:var(--ink);border-color:var(--ink);color:#fff;padding:0 16px}.practice-grid{align-items:start;display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 300px}.practice-main{display:grid;gap:14px;min-width:0}.staff-panel,.feedback-panel,.answer-pad,.keyboard-panel,.midi-main{min-width:0}.staff-panel,.feedback-panel,.answer-pad,.keyboard-panel,.stats-panel,.stage-goal-panel,.daily-panel,.wrong-note-panel,.midi-input-panel,.midi-upload-panel,.midi-file-panel,.track-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.staff-panel{min-height:326px;padding:22px}.staff-panel__header{align-items:start;display:flex;justify-content:space-between;margin-bottom:4px}.staff-panel h2,.stats-panel h2,.stage-goal-panel h2{font-size:16px;line-height:1.2;margin:0}.staff-panel p{color:var(--muted);font-size:13px;line-height:1.5;margin:6px 0 0}.note-token{background:var(--surface-strong);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:18px;font-weight:750;min-width:64px;padding:10px 12px;text-align:center}.staff-canvas{align-items:center;display:flex;justify-content:center;min-height:230px;overflow-x:auto;overflow-y:hidden}.staff-canvas svg{max-width:100%}.feedback-panel{align-items:center;display:grid;grid-template-columns:120px minmax(0,1fr) auto;min-height:72px;padding:14px 18px}.feedback-panel span{color:var(--muted);font-size:13px}.feedback-panel strong{font-size:22px}.feedback-panel small{color:var(--muted);font-size:13px}.feedback-panel.is-correct{background:var(--accent-weak);border-color:#9bdac6}.feedback-panel.is-correct span,.feedback-panel.is-correct strong{color:#0b6d50}.feedback-panel.is-wrong{background:var(--wrong-weak);border-color:#ebb0ab}.feedback-panel.is-wrong span,.feedback-panel.is-wrong strong{color:var(--wrong)}.answer-pad{display:grid;gap:10px;grid-template-columns:repeat(7,minmax(48px,1fr));padding:14px}.answer-button{background:#f8fbf9;border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer;font-size:24px;font-weight:760;height:64px}.answer-button:hover:not(:disabled){border-color:#88cdb8;box-shadow:inset 0 0 0 1px #88cdb8}.answer-button:disabled{color:#a4b0aa;cursor:not-allowed}.keyboard-panel{overflow:hidden;padding:16px 18px 20px}.keyboard-panel__label{color:var(--muted);font-size:13px;margin-bottom:10px}.keyboard{display:grid;height:158px;max-width:100%;position:relative}.key-wrap{min-width:0;position:relative}.white-key{align-items:end;background:linear-gradient(#fff,#f3f7f5);border:1px solid #cbd8d1;border-radius:0 0 6px 6px;color:var(--muted);cursor:pointer;display:flex;height:158px;justify-content:center;padding:0 2px 12px;width:100%}.settings-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr)}.settings-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);display:grid;gap:4px;padding:18px}.settings-panel__heading{align-items:center;display:flex;justify-content:space-between;padding:2px 0 8px}.settings-panel h2{font-size:16px;line-height:1.2;margin:0}.settings-row{align-items:center;border-top:1px solid var(--line);display:grid;gap:16px;grid-template-columns:minmax(0,1fr) auto;min-height:76px;padding:14px 0}.settings-row strong,.settings-toggle strong{display:block;font-size:14px}.settings-row span,.settings-toggle small{color:var(--muted);display:block;font-size:12px;margin-top:4px}.settings-button-group{background:var(--surface-strong);border:1px solid var(--line);border-radius:8px;display:inline-flex;gap:4px;padding:3px}.settings-button-group button{background:transparent;border:0;border-radius:6px;color:var(--muted);cursor:pointer;min-height:34px;min-width:48px;padding:0 12px}.settings-button-group button.is-active{background:var(--ink);color:#fff}.settings-toggle{align-items:center;background:#f8fbf9;border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer;display:flex;gap:12px;justify-content:flex-start;min-height:72px;padding:14px;text-align:left}.settings-toggle.is-active{background:var(--accent-weak);border-color:#9bdac6;color:#0b6d50}.white-key span{font-size:12px;white-space:nowrap}.white-key.is-correct{background:linear-gradient(#c9f5e6,#72d5b2);border-color:#209b73;color:#064b37;font-weight:750}.white-key.is-wrong{background:linear-gradient(#ffe8e5,#f3aaa4);border-color:var(--wrong)}.black-key{background:linear-gradient(#1b241f,#060807);border-radius:0 0 5px 5px;height:96px;position:absolute;right:-18%;top:0;width:36%;z-index:2}.stats-panel,.stage-goal-panel{min-height:398px;padding:20px}.stage-goal-panel{min-height:0;padding:16px}.side-stack{display:grid;gap:14px;position:sticky;top:92px}.stats-grid,.goal-grid{display:grid;gap:8px;margin-top:12px}.goal-grid{grid-template-columns:1fr 1fr}.stat-item,.stat-detail,.goal-grid div,.goal-guide-row{background:#f8fbf9;border:1px solid var(--line);border-radius:8px;padding:10px}.stat-item span,.stat-detail span,.goal-grid span,.goal-guide-row span{color:var(--muted);display:block;font-size:12px}.stat-item strong,.stat-detail strong,.goal-grid strong,.goal-guide-row strong{display:block;font-size:26px;line-height:1.1;margin-top:8px}.goal-grid strong{font-size:18px;margin-top:5px}.stat-detail{margin-top:14px}.goal-guide-row{margin-top:8px}.goal-guide-row strong{font-size:14px;margin-top:5px}.stage-goal-panel p{color:var(--muted);font-size:12px;line-height:1.5;margin:10px 0 0}.stage-goal-panel.is-complete{background:var(--accent-weak);border-color:#9bdac6}.daily-panel,.wrong-note-panel,.midi-input-panel{padding:18px}.daily-panel h2,.wrong-note-panel h2,.midi-input-panel h2{font-size:16px;margin:0}.daily-progress,.panel-title-row,.midi-file-summary{align-items:center;display:flex;justify-content:space-between}.daily-progress{margin-top:16px}.daily-progress span,.daily-grid span,.wrong-note-panel p,.midi-input-panel p,.midi-file-summary span,.track-row small,.panel-title-row span{color:var(--muted);font-size:12px}.daily-progress strong{display:block;font-size:24px;line-height:1.1;margin-top:4px}.progress-track{background:var(--surface-strong);border-radius:999px;height:8px;margin-top:12px;overflow:hidden}.progress-track div{background:var(--accent);height:100%}.daily-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:14px}.daily-grid div{background:#f8fbf9;border:1px solid var(--line);border-radius:8px;padding:12px}.daily-grid strong{display:block;font-size:22px;margin-top:4px}.wrong-note-list{display:grid;gap:8px;margin-top:14px}.wrong-note-list button,.track-row{align-items:center;background:#f8fbf9;border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;padding:12px;text-align:left}.wrong-note-list button span,.track-row span,.midi-file-summary span{display:grid;gap:4px}.wrong-note-list button strong{font-size:16px}.midi-input-controls{display:grid;gap:8px;margin-top:12px}.secondary-button,.file-button,.fragment-lengths button{align-items:center;background:#f8fbf9;border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer;display:inline-flex;gap:8px;justify-content:center;min-height:40px;padding:0 12px}.secondary-button:disabled,.track-row:disabled{color:#a4b0aa;cursor:not-allowed}.midi-input-controls select{background:#f8fbf9;border:1px solid var(--line);border-radius:8px;color:var(--ink);min-height:40px;padding:0 10px;width:100%}.midi-workspace{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 300px;margin:0 auto;max-width:1360px;padding:24px 28px 36px}.midi-main{display:grid;gap:14px;min-width:0}.midi-upload-panel,.midi-file-panel{align-items:center;display:flex;justify-content:space-between;padding:18px}.midi-upload-panel h1{font-size:22px;line-height:1.2;margin:0}.midi-upload-panel p{color:var(--muted);font-size:13px;margin:6px 0 0}.file-button input{display:none}.fragment-lengths{display:flex;gap:8px}.fragment-lengths button.is-active,.track-row.is-active{background:var(--accent-weak);border-color:#9bdac6}.track-panel{display:grid;gap:8px;padding:14px}.midi-next-button{justify-self:end}@media (max-width: 920px){.app-header,.stage-bar{align-items:stretch;flex-direction:column}.app-header{padding:16px;position:static}.mode-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.header-actions{align-items:stretch;display:grid;grid-template-columns:minmax(0,1fr) 42px}.mode-tabs button{flex:1}.practice-shell,.overview-shell,.settings-shell{padding:16px}.overview-hero,.section-heading{align-items:stretch;flex-direction:column}.overview-actions{display:grid;grid-template-columns:1fr}.overview-grid{grid-template-columns:1fr}.stage-list{flex-direction:column}.stage-card{min-width:0}.session-actions{justify-content:flex-end;flex-wrap:wrap}.sequence-toggle{flex:1 1 100%}.sequence-toggle button{flex:1}.practice-grid,.settings-grid,.settings-row{grid-template-columns:1fr}.settings-button-group{display:grid;grid-auto-flow:column}.side-stack{position:static}.midi-workspace{grid-template-columns:1fr;padding:16px}.midi-upload-panel,.midi-file-panel{align-items:stretch;flex-direction:column;gap:14px}.fragment-lengths{display:grid;grid-template-columns:repeat(3,1fr)}.feedback-panel{grid-template-columns:1fr;gap:6px}.answer-pad{grid-template-columns:repeat(4,minmax(56px,1fr))}.keyboard{overflow-x:auto}.key-wrap{min-width:46px}.staff-canvas{justify-content:flex-start}.midi-next-button{justify-self:stretch;width:100%}}