:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#16181d;--panel:#1e2129;--text:#e8e9ec;--muted:#9aa0ab;--accent:#4f8cff;--hl-expected:#ffb02e;--hl-next:#5b8dd966;--hl-reveal:#35c26e;--bad:#ff5d5d}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.app{flex-direction:column;height:100%;display:flex}.header{background:var(--panel);flex-wrap:wrap;align-items:center;gap:16px;padding:8px 16px;display:flex}.header h1{margin:0;font-size:18px}.modes{flex-wrap:wrap;gap:6px;display:flex}.modes button{color:var(--text);cursor:pointer;background:0 0;border:1px solid #3a3f4b;border-radius:6px;padding:6px 12px;font-size:14px}.modes button.active{background:var(--accent);border-color:var(--accent);color:#fff}.midi-panel{color:var(--muted);align-items:center;gap:6px;margin-left:auto;font-size:13px;display:flex}.midi-panel select,.settings select,.trainer select{color:var(--text);background:#262a33;border:1px solid #3a3f4b;border-radius:6px;padding:4px 6px;font-size:13px}.midi-dot{background:#555;border-radius:50%;width:8px;height:8px}.midi-dot.on{background:#35c26e}.midi-status{color:var(--muted);margin-left:auto;font-size:13px}.switches{gap:8px;display:flex}.switch{border:1px solid #3a3f4b;border-radius:6px;display:inline-flex;overflow:hidden}.switch button{color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;padding:5px 10px;font-size:13px}.switch button.active{background:var(--accent);color:#fff}.settings{color:var(--muted);background:var(--panel);border-top:1px solid #2a2e38;align-items:center;gap:8px;padding:6px 16px;font-size:13px;display:flex}.settings label{align-items:center;gap:6px;display:flex}.settings button{color:var(--text);cursor:pointer;background:#262a33;border:1px solid #3a3f4b;border-radius:6px;padding:4px 10px}.settings-range{margin-left:auto}.panel{flex:none;padding:12px 16px 4px}.trainer{flex-direction:column;gap:10px;max-width:900px;margin:0 auto;display:flex}.trainer-free{color:var(--muted)}.trainer-task{align-items:center;gap:20px;display:flex}.task-label{color:var(--muted);font-size:14px}.task-note{min-width:130px;font-size:42px;font-weight:700}.task-sub{color:var(--muted);font-size:14px}.note-staff{background:#f5f5f2;border-radius:8px;width:180px;height:140px}.note-staff svg{display:block}.melody-staff{width:min(560px,100%);height:130px}.trainer-feedback{min-height:22px;color:var(--muted);font-size:15px}.trainer-feedback.ok{color:#35c26e}.trainer-feedback.bad{color:var(--bad)}.trainer-options{color:var(--muted);gap:18px;font-size:14px;display:flex}.trainer-options label{cursor:pointer;align-items:center;gap:6px;display:flex}.trainer-row{color:var(--muted);flex-wrap:wrap;align-items:center;gap:14px;font-size:14px;display:flex}.trainer-row label{align-items:center;gap:6px;display:flex}.trainer-row button,.trainer-summary button,.stats button{color:var(--text);cursor:pointer;background:#262a33;border:1px solid #3a3f4b;border-radius:6px;padding:4px 12px}.ribbon{flex-wrap:wrap;gap:6px;display:flex}.ribbon-note{color:var(--muted);background:#262a33;border-radius:6px;padding:3px 8px;font-size:14px}.ribbon-note.current{background:var(--hl-expected);color:#1a1a1a;font-weight:700}.ribbon-note.played{opacity:.45}.ribbon-finger{vertical-align:super;color:#7d8590;margin-left:1px;font-size:10px}.ribbon-note.current .ribbon-finger{color:#1a1a1a}.ribbon-count{color:var(--hl-expected);background:#16181d;border-radius:9px;margin-left:5px;padding:1px 6px;font-size:12px}.trainer-hint{color:var(--muted);font-size:12px}.trainer-progress{color:var(--muted);font-size:14px}.trainer-summary{background:#20242d;border:1px solid #3a3f4b;border-radius:8px;padding:10px 14px}.trainer-summary p{margin:0 0 8px}.stats{color:var(--muted);flex-wrap:wrap;align-items:center;gap:16px;font-size:13px;display:flex}.piano-wrap{margin-top:auto;padding:10px 14px 12px}.piano{-webkit-user-select:none;user-select:none;touch-action:none;background:linear-gradient(#34373f,#1a1c22);border:1px solid #0b0c10;border-radius:10px 10px 6px 6px;height:clamp(160px,30vh,260px);padding:8px 8px 0;position:relative;box-shadow:0 8px 22px #00000080,inset 0 1px #ffffff14}.piano-whites{background:#0a0a0c;border-radius:0 0 4px 4px;gap:3px;height:100%;display:flex;overflow:hidden}.piano-blacks{pointer-events:none;height:60%;position:absolute;top:8px;left:8px;right:8px}.key{cursor:pointer;border-radius:0 0 5px 5px;position:relative}.key-badge{color:#fff;text-align:center;pointer-events:none;background:#16181dd9;border-radius:50%;min-width:17px;height:17px;padding:0 3px;font-size:11px;font-weight:700;line-height:17px;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.key-black .key-badge{color:#16181d;background:#ffffffe0;top:6px;bottom:auto}.key-badge.dim{opacity:.55}.key-white{background:linear-gradient(#fff 0%,#f6f6f4 65%,#e3e3e1 100%);border:1px solid #8f8f8f;border-top:none;flex:1;box-shadow:inset 0 -5px 8px #0000001a}.key-white.is-pressed{background:linear-gradient(#9fc2ff,#4f8cff)}.key-white.hl-expected{background:linear-gradient(#ffd98a,#ffb02e)}.key-white.hl-next{background:linear-gradient(#dbe7f7,#b9cde8)}.key-white.hl-reveal{background:linear-gradient(#8fe3b4,#35c26e)}.key-black{pointer-events:auto;background:linear-gradient(#5a5a5e 0%,#232326 10%,#0d0d0f 60%,#17171a 100%);border:1px solid #000;border-top:none;height:100%;position:absolute;box-shadow:inset 0 2px 2px #ffffff38,inset 0 -4px 5px #000000b3,0 3px 6px #0000008c}.key-black.is-pressed{background:linear-gradient(#7ea8f5 0%,#3b6fd4 40%,#2c5cb8 100%);box-shadow:inset 0 2px 2px #ffffff40,0 2px 4px #00000080}.key-black.hl-expected{background:linear-gradient(#ffcf70 0%,#e09a10 45%,#b97b00 100%);box-shadow:inset 0 2px 2px #ffffff4d,0 3px 6px #0000008c}.key-black.hl-next{background:linear-gradient(#a9c2e2 0%,#6f92c0 45%,#5b8dd9 100%);box-shadow:inset 0 2px 2px #ffffff40,0 3px 6px #0000008c}.key-black.hl-reveal{background:linear-gradient(#6fd69d 0%,#2aa860 45%,#1d8a4a 100%);box-shadow:inset 0 2px 2px #ffffff40,0 3px 6px #0000008c}.attribution{text-align:center;color:#565b66;margin-top:6px;font-size:11px}.audio-gate{cursor:pointer;z-index:100;background:#0a0b0eeb;justify-content:center;align-items:center;font-size:20px;display:flex;position:fixed;inset:0}