@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:flex;flex-direction:column;align-items:center;padding:2rem;max-width:1400px;margin:0 auto;width:100%}.header h1{font-size:3rem;font-weight:700;background:linear-gradient(90deg,var(--accent-snare),var(--accent-hihat));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2rem}.transport-container{display:flex;align-items:center;gap:2rem;background-color:var(--bg-secondary);padding:1rem 2rem;border-radius:100px;border:1px solid var(--border-color);margin-bottom:2rem}.play-btn{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--text-primary);color:var(--bg-primary);cursor:pointer;border:none}.play-btn.playing{background:var(--accent-kick);color:#fff}.bpm-control{display:flex;align-items:center;gap:1rem}.sequencer-grid{display:flex;flex-direction:column;gap:1rem;width:100%}.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;display:flex;flex-direction:column;gap:.5rem;border-right:1px solid var(--border-color);padding-right:1rem}.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{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:4px;padding:.2rem;cursor:pointer;font-size:.8rem}.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;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;overflow-x:auto}.piano-row{display:flex;gap:.4rem;align-items:center}.note-label{width:30px;font-size:.8rem;color:var(--text-secondary);font-weight:500}.piano-cell{flex:1;height:20px;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%}.add-track-controls h3{margin-bottom:1rem;color:var(--text-secondary)}.add-buttons{display:flex;gap:1rem;justify-content:center}.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)}