:root{--bg-primary:#0d1117;--bg-secondary:#161b22;--bg-tertiary:#21262d;--bg-elevated:#1c2128;--border-default:#30363d;--border-muted:#21262d;--text-primary:#e6edf3;--text-secondary:#8b949e;--text-muted:#484f58;--accent-right:#f0883e;--accent-left:#58a6ff;--accent-both:#7c61e0;--accent-gold:#d2991d;--accent-green:#3fb950;--accent-red:#f85149;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--font-sans:"Segoe UI", system-ui, -apple-system, sans-serif;--font-mono:"Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;user-select:none}#app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.header{background:var(--bg-secondary);border-bottom:1px solid var(--border-default);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.header-brand{align-items:center;gap:8px;display:flex}.logo-icon{color:var(--accent-gold);font-size:20px}.header-brand h1{letter-spacing:-.02em;font-size:16px;font-weight:700}.version{color:var(--text-muted);background:var(--bg-tertiary);border-radius:3px;padding:1px 5px;font-size:10px}.header-status{color:var(--text-secondary);font-size:12px}.toolbar{background:var(--bg-secondary);border-bottom:1px solid var(--border-default);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:6px 14px;display:flex}.toolbar-left,.toolbar-center,.toolbar-right{align-items:center;gap:6px;display:flex}.divider{background:var(--border-default);width:1px;height:22px}.time-display{font-family:var(--font-mono);color:var(--text-secondary);white-space:nowrap;min-width:105px;font-size:13px}.btn{border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:600;font-family:var(--font-sans);border:none;padding:6px 14px;transition:all .15s}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-default)}.btn-secondary:hover{border-color:var(--text-muted);background:#292e36}.btn-sm{padding:4px 10px;font-size:11px}.btn-icon{border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-tertiary);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;transition:all .15s;display:flex}.btn-icon:hover:not(:disabled){color:var(--text-primary);border-color:var(--text-muted);background:#292e36}.btn-icon:disabled{opacity:.4;cursor:not-allowed}.btn-play{color:var(--accent-green)}.hand-selector{background:var(--bg-tertiary);border-radius:var(--radius-sm);gap:2px;padding:2px;display:flex}.hand-btn{cursor:pointer;color:var(--text-secondary);font-size:11px;font-weight:600;font-family:var(--font-sans);white-space:nowrap;background:0 0;border:none;border-radius:4px;padding:5px 10px;transition:all .15s}.hand-btn:hover{color:var(--text-primary)}.hand-btn.active{background:var(--bg-elevated);color:var(--accent-both)}.hand-btn.active[data-hand=right]{color:var(--accent-right)}.hand-btn.active[data-hand=left]{color:var(--accent-left)}.tempo-control{align-items:center;gap:6px;display:flex}.tempo-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:600}.tempo-value{font-family:var(--font-mono);color:var(--text-primary);text-align:right;min-width:58px;font-size:12px}input[type=range]{appearance:none;background:var(--bg-tertiary);border-radius:2px;outline:none;width:80px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-gold);cursor:pointer;border:2px solid var(--bg-secondary);border-radius:50%;width:12px;height:12px}.volume-group{align-items:center;gap:6px;display:flex}.vol-control{align-items:center;gap:3px;display:flex}.vol-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:10px;font-weight:600}.vol-label-left{color:var(--accent-left)}.vol-label-right{color:var(--accent-right)}.vol-slider{width:50px!important}.vol-slider::-webkit-slider-thumb{background:var(--text-secondary)!important}.hidden{display:none!important}.library-section{background:var(--bg-secondary);border-bottom:1px solid var(--border-default);flex-shrink:0;overflow:hidden}#sf-library-section{border-bottom:none;border-top:1px solid var(--border-default)}.library-header{justify-content:space-between;align-items:center;padding:6px 14px;display:flex}.library-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}.library-count{color:var(--text-muted);font-size:11px}.sf-assignments{gap:10px;display:flex}.sf-badge{white-space:nowrap;border-radius:10px;padding:2px 8px;font-size:10px;font-weight:600}.sf-badge:first-child{background:var(--accent-left-dim);color:var(--accent-left)}.sf-badge:last-child{background:var(--accent-right-dim);color:var(--accent-right)}.library-scroll{padding:0 14px 8px;overflow:auto hidden}.library-scroll::-webkit-scrollbar{height:5px}.library-scroll::-webkit-scrollbar-track{background:0 0}.library-scroll::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:3px}.library-grid{flex-wrap:nowrap;gap:8px;display:flex}.library-empty{color:var(--text-muted);padding:12px 0;font-size:12px}.library-footer{text-align:center;color:var(--text-muted);letter-spacing:.03em;padding:4px 0 8px;font-size:12px}.heart-red{color:#e33}.midi-card,.sf-card{border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;flex-shrink:0;align-items:center;gap:6px;padding:8px 14px;font-size:12px;font-weight:600;transition:all .15s;display:flex}.midi-card{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-default);max-width:180px;overflow:hidden}.midi-card:hover{border-color:var(--text-muted);background:#292e36}.midi-card.active{border-color:var(--accent-gold);background:#d2991d1a}.midi-card .card-name{text-overflow:ellipsis;overflow:hidden}.midi-card .card-delete{width:18px;height:18px;color:var(--text-muted);border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;font-size:14px;display:flex}.midi-card .card-delete:hover{background:var(--accent-red);color:#fff}.sf-card{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-default);flex-direction:column;align-items:flex-start;gap:2px;min-width:100px;padding:8px 14px}.sf-card:hover{border-color:var(--text-muted);color:var(--text-primary);background:#292e36}.sf-card .sf-name{font-size:12px}.sf-card .sf-desc{color:var(--text-muted);font-size:9px}.keyboard-area{background:#0a0e14;flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.keyboard-scroll{flex-shrink:0;align-items:center;width:100%;padding:4px 0;display:flex;overflow:auto hidden}.keyboard-scroll::-webkit-scrollbar{height:8px}.keyboard-scroll::-webkit-scrollbar-track{background:#0a0e14}.keyboard-scroll::-webkit-scrollbar-thumb{background:#333;border-radius:4px}.keyboard{margin:0 auto;position:relative}.notes-fall-container{flex:1;min-height:0;position:relative;overflow:hidden}.notes-fall-container canvas{width:100%;height:100%;display:block;position:absolute;top:0;left:0}.drag-hint{color:var(--accent-gold);pointer-events:none;z-index:5;opacity:0;background:#0d1117b3;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:opacity .2s;display:flex;position:absolute;inset:0}.drag-hint.visible{opacity:1}.white-key{cursor:pointer;background:linear-gradient(#fcfcfc 0%,#f2f2f2 3%,#e6e6e6 45%,#ddd 90%,#c4c4c4 100%);border:1px solid #aaa;border-top:none;border-radius:0 0 5px 5px;height:140px;transition:background 80ms,box-shadow 80ms;position:absolute;bottom:0;box-shadow:inset 0 -4px 10px #0000000f}.white-key:hover{background:linear-gradient(#fff 0%,#f8f8f8 3%,#eee 45%,#e0e0e0 100%)}.white-key.divider{border-left:2px solid #999}.white-key .key-label{font-family:var(--font-sans);color:#777;pointer-events:none;font-size:11px;font-weight:600;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.white-key.active{box-shadow:inset 0 -3px 8px #c864004d,0 3px 12px #f0883e80;background:linear-gradient(#fff3e0 0%,#ffcc80 18%,#f5a850 100%)!important}.white-key.active .key-label{color:#b84c00;font-weight:700}.white-key.active.left-hand{box-shadow:inset 0 -3px 8px #0050b44d,0 3px 12px #58a6ff80;background:linear-gradient(#e3f2fd 0%,#90caf9 18%,#5b9ce6 100%)!important}.white-key.active.left-hand .key-label{color:#003a80;font-weight:700}.black-key{z-index:1;cursor:pointer;background:linear-gradient(#3e3e48 0%,#1c1c22 35%,#0d0d0d 100%);border:1px solid #000;border-top:none;border-radius:0 0 4px 4px;height:86px;transition:background 80ms,box-shadow 80ms;position:absolute;top:0;box-shadow:0 4px 8px #00000080,inset 0 1px #ffffff0f}.black-key:hover{background:linear-gradient(#50505c 0%,#282830 35%,#151515 100%)}.black-key .key-label{font-family:var(--font-sans);color:#666;pointer-events:none;font-size:7px;font-weight:600;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.black-key.active{box-shadow:0 3px 12px #f0883eb3,inset 0 1px #ffffff1a;background:linear-gradient(#d4843e 0%,#b86020 35%,#7a3a10 100%)!important}.black-key.active .key-label{color:#ffe0c0;font-weight:700}.black-key.active.left-hand{box-shadow:0 3px 12px #58a6ffb3,inset 0 1px #ffffff1a;background:linear-gradient(#5080c0 0%,#3060a0 35%,#1a3060 100%)!important}.black-key.active.left-hand .key-label{color:#b8d8ff;font-weight:700}.seekbar-container{background:var(--bg-secondary);border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default);flex-shrink:0;align-items:center;gap:10px;padding:6px 16px;display:flex}.seekbar-track{background:var(--bg-tertiary);cursor:pointer;border-radius:3px;flex:1;height:6px;position:relative}.seekbar-fill{background:var(--accent-gold);pointer-events:none;border-radius:3px;width:0%;height:100%}.seekbar-thumb{background:var(--accent-gold);border:2px solid var(--bg-secondary);pointer-events:none;border-radius:50%;width:14px;height:14px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0006}.seekbar-time{font-family:var(--font-mono);color:var(--text-secondary);text-align:right;white-space:nowrap;min-width:85px;font-size:12px}.popup-overlay{z-index:200;backdrop-filter:blur(2px);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.popup{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-md);text-align:center;min-width:280px;max-width:380px;padding:24px;box-shadow:0 16px 48px #00000080}.popup-title{margin-bottom:4px;font-size:16px;font-weight:700}.popup-desc{color:var(--text-secondary);margin-bottom:16px;font-size:12px}.popup-actions{flex-direction:column;gap:8px;display:flex}.popup-btn{border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font-sans);border:none;padding:10px 16px;transition:all .15s}.left-btn{color:var(--accent-left);background:#58a6ff26;border:1px solid #58a6ff4d}.left-btn:hover{background:#58a6ff40}.right-btn{color:var(--accent-right);background:#f0883e26;border:1px solid #f0883e4d}.right-btn:hover{background:#f0883e40}.popup-close{color:var(--text-muted);cursor:pointer;font-size:12px;font-family:var(--font-sans);background:0 0;border:none;margin-top:12px}.popup-close:hover{color:var(--text-secondary)}.loading-overlay{z-index:100;backdrop-filter:blur(4px);background:#0d1117d9;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:fixed;inset:0}.loading-spinner{border:3px solid var(--border-default);border-top-color:var(--accent-gold);border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay p{color:var(--text-secondary);font-size:13px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:3px}::-webkit-scrollbar-corner{background:var(--bg-primary)}@media (width<=900px){.toolbar{gap:6px;padding:4px 8px}.toolbar-center{order:-1;justify-content:center;width:100%}.hand-btn{padding:4px 8px;font-size:10px}.tempo-control input[type=range]{width:60px}.tempo-value{min-width:50px;font-size:11px}.time-display{min-width:90px;font-size:11px}.btn-icon{width:28px;height:28px}.library-title{font-size:10px}.midi-card{padding:6px 10px;font-size:11px}.sf-card{min-width:80px;padding:6px 10px;font-size:11px}.white-key{height:110px}.white-key .key-label{font-size:9px}.black-key{height:68px}.sf-badge{padding:1px 6px;font-size:9px}.vol-slider{width:40px!important}.vol-label{font-size:9px}.volume-group{gap:3px}}@media (width<=600px){.header{padding:6px 10px}.header-brand h1{font-size:14px}.header-status{font-size:10px}.toolbar{gap:4px;padding:4px 6px}.toolbar-left{flex-wrap:wrap}.divider{display:none}.midi-card{max-width:140px;padding:5px 8px;font-size:10px}.sf-card{min-width:70px;padding:5px 8px}.sf-card .sf-name{font-size:10px}.sf-card .sf-desc{font-size:8px}.white-key{height:90px}.white-key .key-label{font-size:8px}.black-key{height:56px}.black-key .key-label{font-size:6px}.library-header{padding:4px 8px}.library-scroll{padding:0 8px 6px}.popup{min-width:240px;padding:16px}.vol-slider{width:32px!important}.vol-label{font-size:8px}.volume-group{gap:2px}}