@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}@keyframes pulseGlow{0%{box-shadow:0 0 5px #ffffff1a}50%{box-shadow:0 0 15px currentColor}to{box-shadow:0 0 5px #ffffff1a}}@keyframes flashBg{0%{background-color:currentColor}to{background-color:var(--bg-tertiary)}}button{cursor:pointer;border:none;background:none;font-family:var(--font-family);color:var(--text-primary)}select{font-family:var(--font-family)}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a24;--text-primary: #f0f0f5;--text-secondary: #a0a0b5;--accent-kick: #ff2a5f;--accent-snare: #00e5ff;--accent-hihat: #b52aff;--accent-melody: #00ff88;--accent-bass: #ff9d00;--border-color: #2a2a35;--font-family: "Outfit", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-family);-webkit-font-smoothing:antialiased}.app-container{display:grid;grid-template-columns:260px 1fr;min-height:100vh;width:100%}.sidebar{background-color:var(--bg-secondary);border-right:1px solid var(--border-color);padding:2rem;display:flex;flex-direction:column;gap:2.5rem}.header h1{font-size:2rem;font-weight:700;background:linear-gradient(90deg,var(--accent-snare),var(--accent-hihat));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.transport-container{display:flex;flex-direction:column;gap:1.5rem;background-color:var(--bg-tertiary);padding:1.5rem;border-radius:16px;border:1px solid var(--border-color)}.play-btn{display:flex;align-items:center;justify-content:center;width:100%;height:60px;border-radius:12px;background:var(--text-primary);color:var(--bg-primary);cursor:pointer;border:none;font-weight:600;font-size:1.2rem;gap:.5rem;transition:all .2s ease}.play-btn.playing{background:var(--accent-kick);color:#fff}.bpm-control{display:flex;flex-direction:column;gap:.8rem}.bpm-control label{color:var(--text-secondary);font-weight:500}.bpm-control input[type=range]{width:100%;accent-color:var(--text-primary)}.presets-container h3{color:var(--text-secondary);font-size:1rem;margin-bottom:1rem;text-transform:uppercase;letter-spacing:1px}.presets-list{display:flex;flex-direction:column;gap:.8rem}.preset-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:.8rem;border-radius:8px;cursor:pointer;text-align:left;transition:all .2s ease;white-space:nowrap}.preset-btn:hover{background:var(--border-color)}.main-content{padding:2rem 3rem;overflow-x:auto;display:flex;flex-direction:column;align-items:center}.sequencer-grid{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:1200px}.track{display:flex;gap:1rem;background-color:var(--bg-secondary);padding:1rem;border-radius:16px;border:1px solid var(--border-color);align-items:stretch}.track-info{width:180px;min-width:180px;display:flex;flex-direction:column;gap:.5rem;border-right:1px solid var(--border-color);padding-right:1rem;position:sticky;left:-1rem;background-color:var(--bg-secondary);z-index:10;box-shadow:10px 0 15px -10px #00000080}.track-header{display:flex;justify-content:space-between;align-items:center}.track-name{font-weight:600;font-size:1.1rem;text-transform:uppercase}.delete-track-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer}.delete-track-btn:hover{color:#f44}.track-controls{display:flex;flex-direction:column;gap:.5rem}.volume-control{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary)}.vol-slider{width:100%;accent-color:var(--text-primary)}.clear-btn{display:flex;align-items:center;justify-content:center;width:max-content;padding:.2rem .5rem;background-color:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:.8rem;transition:all .2s ease;margin-top:.2rem;cursor:pointer}.clear-btn:hover{color:#f44;border-color:#f44}.track-select{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:4px;padding:.2rem}.step-btn:nth-of-type(4n+1):not(:first-child),.piano-cell:nth-of-type(4n+1):not(:first-child){margin-left:12px;position:relative}.step-btn:nth-of-type(4n+1):not(:first-child):before,.piano-cell:nth-of-type(4n+1):not(:first-child):before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:2px;background-color:var(--border-color)}.steps-container{display:flex;flex:1;gap:.4rem;align-items:center}.step-btn{flex:1;height:40px;min-width:35px;border-radius:6px;background-color:var(--bg-tertiary);border:1px solid var(--border-color);cursor:pointer}.step-btn:hover{border-color:var(--text-secondary)}.step-btn.active{background-color:var(--track-color);border-color:var(--track-color);box-shadow:0 0 10px var(--track-color)}.step-btn.current-step{border:2px solid white}.piano-roll{display:flex;flex-direction:column;gap:4px;flex:1}.piano-row{display:flex;gap:.4rem;align-items:center}.note-label{width:30px;min-width:30px;font-size:.8rem;color:var(--text-secondary);font-weight:500}.piano-cell{flex:1;height:20px;min-width:35px;background-color:var(--bg-tertiary);border-radius:4px;border:1px solid transparent;cursor:pointer}.piano-cell:hover{border-color:var(--text-secondary)}.piano-cell.active{background-color:var(--track-color);box-shadow:0 0 8px var(--track-color)}.piano-cell.current-step{border:1px solid white}.track.kick{--track-color: var(--accent-kick)}.track.snare{--track-color: var(--accent-snare)}.track.hihat{--track-color: var(--accent-hihat)}.track.melody{--track-color: var(--accent-melody)}.track.bass{--track-color: var(--accent-bass)}.add-track-controls{margin-top:3rem;background:var(--bg-secondary);padding:2rem;border-radius:16px;text-align:center;border:1px dashed var(--border-color);width:100%;max-width:1200px}.add-track-controls h3{margin-bottom:1rem;color:var(--text-secondary)}.add-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.add-buttons button{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:.5rem 1rem;border-radius:8px;cursor:pointer}.add-buttons button:hover{background:var(--border-color)}@media (max-width: 768px){.app-container{display:flex;flex-direction:column}.sidebar{padding:1rem;border-right:none;border-bottom:1px solid var(--border-color);gap:1rem}.header h1{font-size:1.5rem}.transport-container{flex-direction:row;align-items:center;padding:1rem;gap:1rem}.play-btn{width:auto;flex:1;height:50px;font-size:1rem}.bpm-control{flex:1}.presets-list{flex-direction:row;overflow-x:auto;padding-bottom:.5rem}.main-content{padding:1rem 0;align-items:stretch}.sequencer-grid{width:max-content;min-width:100%;padding:0 1rem}.track{padding:1rem;padding-left:0}.track-info{width:140px;min-width:140px;padding-left:1rem;left:0}.track-name{font-size:.9rem}.add-track-controls{margin:2rem 1rem;width:auto}}