:root{--bg-dark: #000000;--text-main: #ffffff;--neon-blue: #00f3ff;--neon-pink: #ff00ff;--neon-purple: #bd00ff;--neon-gold: #ffcc00;--neon-green: #00ff88;--key-white: #e0e0e0;--key-black: #111111;--key-active-glow: rgba(0, 243, 255, .6)}body{margin:0;padding:0;background-color:var(--bg-dark);color:var(--text-main);font-family:Inter,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}#root{width:100vw;height:100vh;position:relative;overflow:hidden}::-webkit-scrollbar{display:none}.piano-scroll-container{flex:1;width:100%;overflow-x:auto;overflow-y:hidden;position:relative;background:#000;scrollbar-width:thin}.game-world{height:100%;position:relative;pointer-events:none}.keys-layer{position:absolute;bottom:0;left:0;width:100%;height:200px;pointer-events:auto}.piano-key{position:absolute;top:0;border-radius:4px 4px 0 0;cursor:pointer;transition:transform .05s ease;-webkit-user-select:none;user-select:none;overflow:hidden}.piano-key:active{transform:scale(.98)}.piano-key.white{height:200px;background:linear-gradient(180deg,#f8f8f8,#fff,#f0f0f0);border:1px solid #999;border-top:4px solid #ddd;border-radius:3px 3px 0 0;z-index:10;box-shadow:inset 0 5px 10px #0000000d,0 2px 5px #0003}.piano-key.white.active{background:#fff;box-shadow:0 0 30px var(--neon-blue),0 0 60px var(--neon-blue),inset 0 0 20px #fff;transform:translateY(-2px);z-index:100}.piano-key.black{height:120px;background:linear-gradient(180deg,#1a1a1a,#000);border:1px solid #000;border-top:2px solid #333;border-radius:2px 2px 0 0;z-index:20;box-shadow:0 4px 8px #000000e6,inset 0 1px #ffffff1a}.piano-key.black.active{background:#fff;border:1px solid #fff;box-shadow:0 0 30px var(--neon-pink),0 0 60px var(--neon-pink),inset 0 0 20px #fff;transform:translateY(-2px);z-index:101}.key-highlight{position:absolute;bottom:0;left:0;width:100%;height:100%;background:#fff;opacity:0;pointer-events:none;transition:opacity .1s}.key-highlight.show{opacity:.3}.key-label{position:absolute;bottom:15px;width:100%;text-align:center;color:#555;font-size:10px;font-weight:700}.toolbar-container{width:100vw;height:48px;background:#222;border-bottom:1px solid #333;display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-shadow:0 5px 20px #00000080;z-index:500;position:relative;-webkit-user-select:none;user-select:none}.toolbar-section{display:flex;align-items:center;gap:12px}.toolbar-section.left{flex:1}.toolbar-section.center{flex:1;justify-content:center}.toolbar-section.right{flex:1;justify-content:flex-end}.app-logo{font-weight:800;font-size:16px;color:var(--neon-blue);letter-spacing:2px;margin-right:12px}.separator{width:1px;height:24px;background:#444;margin:0 8px}.toolbar-btn{background:transparent;border:1px solid transparent;color:#aaa;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.toolbar-btn:hover{color:#fff;background:#ffffff0d}.toolbar-btn.active{color:var(--neon-blue);background:#00f3ff1a;border-color:#00f3ff33}.toolbar-btn.icon-only{padding:8px}.visual-mode-group{display:flex;gap:4px}.visual-btn{background:#111;border:1px solid #333;color:#666;font-size:10px;padding:4px 8px;border-radius:4px;cursor:pointer;font-family:monospace}.visual-btn:hover{color:#ccc;background:#222}.visual-btn.active{color:#000;background:var(--neon-gold);border-color:var(--neon-gold);font-weight:700;box-shadow:0 0 10px #fc06}.sustain-pedal{background:#1a1a1a;border:1px solid #333;padding:2px 12px;border-radius:6px;display:flex;align-items:center;gap:10px;height:34px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:#888;margin-left:16px;position:relative;-webkit-user-select:none;user-select:none}.sustain-pedal:hover{background:#222;border-color:#444;color:#ccc;transform:translateY(-1px)}.sustain-pedal.active{background:#252525;border-color:#555;color:#eee;box-shadow:0 4px 12px #0006}.sustain-led{width:6px;height:6px;border-radius:50%;background:#333;transition:all .3s;border:1px solid rgba(0,0,0,.5)}.sustain-pedal.active .sustain-led{background:var(--neon-green);box-shadow:0 0 10px var(--neon-green);border-color:var(--neon-green)}.sustain-label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;font-family:Inter,sans-serif}.sustain-icon{opacity:.7;transition:opacity .2s}.sustain-pedal.active .sustain-icon{opacity:1;color:var(--neon-green)}.transport-box{display:flex;align-items:center;background:#111;border:1px solid #333;border-radius:6px;padding:2px;gap:8px;height:36px}.transport-play{width:32px;height:32px;border:none;border-radius:4px;background:#222;color:#888;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.transport-play:hover{background:#333;color:#fff}.transport-play.active{background:var(--neon-green);color:#000;box-shadow:inset 0 0 5px #00000080}.status-display{display:flex;flex-direction:column;justify-content:center;padding:0 8px;font-family:monospace;font-size:10px}.status-song{color:var(--neon-gold);font-weight:600;margin-bottom:2px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-time{color:var(--neon-blue)}.status-bpm{color:#666}.status-speed{color:var(--neon-green);font-weight:600}.toolbar-slider{-webkit-appearance:none;appearance:none;width:100px;height:4px;background:#444;border-radius:2px;outline:none}.toolbar-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:#ccc;border-radius:50%;cursor:pointer}.toolbar-slider::-webkit-slider-thumb:hover{background:#fff}.toolbar-btn.compact{padding:6px 8px;min-width:32px;justify-content:center}.toolbar-btn.compact:hover{background:#00f3ff1a;border-color:#00f3ff4d;color:var(--neon-blue)}.playback-controls-group{display:flex;gap:4px;background:#111;border:1px solid #333;border-radius:6px;padding:2px}.playback-controls-group .toolbar-btn{border:none;padding:6px 10px}.playback-controls-group .toolbar-btn:hover{background:#00f3ff26}.menu-overlay{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:200;display:flex;align-items:center;justify-content:center}.menu-container{background:#1e1e24;border:1px solid #333;border-radius:12px;width:380px;box-shadow:0 10px 40px #000c;overflow:hidden;animation:fadeInScale .2s ease}.songs-menu{width:420px}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.menu-header{background:#25252e;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333;font-weight:600;color:#eee;text-transform:uppercase;font-size:12px;letter-spacing:1px}.close-btn{background:none;border:none;color:#666;cursor:pointer;padding:4px;border-radius:4px}.close-btn:hover{background:#333;color:#fff}.menu-content{padding:16px;display:flex;flex-direction:column;gap:16px}.menu-tabs{display:flex;gap:.5rem;padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.05);background:#18181d;overflow-x:auto}.tab-btn{background:transparent;border:none;color:#666;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;padding:.4rem .8rem;border-radius:4px;transition:all .2s ease;white-space:nowrap}.tab-btn:hover{color:#ccc;background:#ffffff0d}.tab-btn.active{color:#1e1e24;background:var(--neon-blue, #00f3ff);box-shadow:0 0 10px #00f3ff33}.song-list{display:flex;flex-direction:column;gap:.4rem;overflow-y:auto;max-height:400px;padding-right:4px}.song-item{display:flex;align-items:center;justify-content:space-between;padding:.8rem;background:#18181d;border:1px solid #333;border-radius:6px;transition:all .2s ease}.song-item:hover,.song-item.active{border-color:var(--neon-blue, #00f3ff);background:#00f3ff0d}.song-info{display:flex;align-items:center;gap:10px;color:#ddd;font-size:.9rem;overflow:hidden}.song-info span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.play-btn-small{background:#333;border:none;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;flex-shrink:0}.play-btn-small:hover{background:#fff;color:#000}.song-list::-webkit-scrollbar{width:4px}.song-list::-webkit-scrollbar-track{background:#ffffff05}.song-list::-webkit-scrollbar-thumb{background:#444;border-radius:2px}.song-list::-webkit-scrollbar-thumb:hover{background:#666}.category-group{background:#18181d;border-radius:8px;overflow:hidden;border:1px solid #333}.category-header{background:#202028;color:#aaa;padding:8px 12px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:8px;border-bottom:1px solid #333}.instrument-list{display:flex;flex-direction:column}.instrument-btn{background:none;border:none;color:#ccc;padding:10px 14px;text-align:left;font-size:13px;cursor:pointer;transition:all .2s;border-bottom:1px solid #222}.instrument-btn:hover{background:#ffffff0d;color:#fff}.instrument-btn.active{background:var(--neon-blue);color:#000;font-weight:700}.effects-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.effect-card{background:#18181d;border:1px solid #333;border-radius:6px;padding:10px;display:flex;flex-direction:column;gap:6px}.toggle-header{display:flex;align-items:center;justify-content:space-between;color:#ccc;font-size:12px;margin-bottom:4px}.toggle-switch{width:32px;height:18px;background:#444;border-radius:20px;position:relative;cursor:pointer;transition:background .2s}.toggle-switch.active{background:var(--neon-blue)}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s}.toggle-switch.active:after{transform:translate(14px)}.effect-value{display:block;text-align:center;color:var(--neon-blue);font-size:11px;font-weight:700;margin-top:4px}.effect-note{display:block;text-align:center;color:#666;font-size:10px;font-style:italic;margin-top:8px}.modern-slider:disabled{opacity:.3;cursor:not-allowed}.menu-overlay{position:fixed;top:50px;left:0;width:100vw;height:calc(100vh - 50px);background:#00000080;z-index:1000;display:flex;justify-content:center;align-items:flex-start;padding-top:2rem;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.menu-container.settings-menu{width:400px;background:#1e1e1e;border:1px solid #333;border-radius:8px;box-shadow:0 10px 30px #00000080;display:flex;flex-direction:column;overflow:hidden;color:#eee;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.menu-header{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;background:#252525;border-bottom:1px solid #333;font-weight:600;font-size:1rem}.close-btn{background:none;border:none;color:#888;cursor:pointer;transition:color .2s}.close-btn:hover{color:#fff}.menu-content{padding:1rem;display:flex;flex-direction:column;gap:1rem}.settings-section h3{font-size:.8rem;text-transform:uppercase;color:#888;margin-bottom:.8rem;letter-spacing:1px}.setting-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}.toggle-btn{width:24px;height:24px;border:2px solid #555;border-radius:4px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;transition:all .2s}.toggle-btn.active{background:#fa0;border-color:#fa0;color:#000}.toggle-btn:hover{border-color:#777}.toggle-btn.active:hover{border-color:#ffbf40}.separator-horizontal{height:1px;background:#333;width:100%}.setting-col{display:flex;flex-direction:column;gap:.5rem}.spread-row{display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.value-display{color:#fa0;font-size:.8rem;font-family:monospace}.settings-slider{-webkit-appearance:none;width:100%;height:4px;background:#333;border-radius:2px;outline:none}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#fa0;cursor:pointer;transition:transform .1s}.settings-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.app-container{width:100vw;height:100vh;overflow:hidden;background:#000;position:relative;display:flex;flex-direction:column}.overlay-controls{position:absolute;top:20px;left:50%;transform:translate(-50%);z-index:100;opacity:0;transition:opacity .3s ease}.overlay-controls:hover,.app-container:hover .overlay-controls{opacity:1}