:root{--background-dark: #202020;--background-med-lighter: #313131;--background-med: #25282e;--background-light: #3b3f48;--primary: #4d8eff;--primary-dark: #3a7bf0;--secondary: #ff6b6b;--highlight: #feca57;--text-light: #e0e0e0;--text-dark: #a0a0a0;--border-color: #4a4e57;--success: #4caf50;--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}html,body{margin:0;height:100%;overflow:hidden;font-family:var(--font-main);background:linear-gradient(180deg,var(--background-dark) 0%,var(--background-med) 100%);color:var(--text-light);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body.touch-enabled,body.touch-enabled *:not(input):not(textarea):not(select){-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}body{display:flex;flex-direction:column}#app-container{display:flex;flex-direction:column;width:100vw;height:100vh}.main-controls{padding:12px 25px;background:var(--background-light);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:20px;box-shadow:0 4px 12px #0000004d;z-index:10}#sequencer{padding:0;display:none;background-color:var(--background-med);height:0;overflow:hidden;transition:height .4s cubic-bezier(.25,.8,.25,1),padding .4s ease;display:flex;flex-direction:column}.keyboard-container{flex-grow:1;z-index:0;height:100%;transition:height .4s cubic-bezier(.25,.8,.25,1);display:flex}body.sequencer-active #sequencer{display:flex;height:90%}body.sequencer-active .keyboard-container{height:10%}#sequencer-grid{flex-grow:1;display:flex;flex-direction:column;gap:4px;overflow-y:auto;padding:20px 25px}#sequencer-grid::-webkit-scrollbar{width:8px}#sequencer-grid::-webkit-scrollbar-track{background:var(--background-med)}#sequencer-grid::-webkit-scrollbar-thumb{background:var(--background-light);border-radius:4px}#sequencer-grid::-webkit-scrollbar-thumb:hover{background:#555}.sequencer-row{display:flex;flex-direction:row;gap:5px;width:100%;align-items:center}:root{--cell-size: 28px;--cell-radius: 4px;--seq-side-width: 180px}body.compact-cells{--cell-size: 18px;--cell-radius: 3px}.sequencer-cell{width:var(--cell-size);height:var(--cell-size);background-color:var(--background-light);border-radius:var(--cell-radius);cursor:pointer;transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease;border:1px solid #3f434d;box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:10px;user-select:none;-webkit-tap-highlight-color:transparent}.sequencer-cell:focus{outline:none;background-color:inherit}body:not(.compact-cells) .sequencer-cell:hover{background-color:#5c616d;transform:scale(1.05)}.sequencer-cell.active{background-color:var(--primary)!important;box-shadow:0 0 8px #4d8eff8c;transform:scale(1.02)}.sequencer-cell.highlight{outline:2px solid var(--highlight);outline-offset:-2px;background-color:#765c20}.sequencer-label{flex:0 0 var(--seq-side-width);display:flex;align-items:center;padding:0 8px;font-weight:600;color:var(--text-dark);box-sizing:border-box;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#sequencer-controls{margin-bottom:0;padding:15px 25px;display:flex;align-items:center;gap:25px;border-bottom:1px solid var(--border-color);background:var(--background-light)}.btn{padding:10px 20px;font-size:15px;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;background-color:var(--primary);color:#fff;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 4px #0003}.btn:hover{background-color:var(--primary-dark);box-shadow:0 4px 8px #0000004d;transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.98);box-shadow:0 1px 2px #0003}.btn:disabled{background-color:#555;cursor:not-allowed;box-shadow:none;transform:none}#cancel-add-track{background-color:var(--background-med);color:var(--text-light);border:1px solid var(--border-color)}#cancel-add-track:hover{background-color:#555}.tempo-control{display:flex;align-items:center;gap:15px}.tempo-control label{font-weight:600;color:var(--text-dark);font-size:14px}#tempo-slider{width:220px;-webkit-appearance:none;appearance:none;height:6px;background:var(--background-dark);border-radius:3px;outline:none}#tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--primary);cursor:pointer;border-radius:50%;border:3px solid #fff;box-shadow:0 0 8px #4d8eff99;transition:transform .2s ease}#tempo-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}#tempo-slider::-moz-range-thumb{width:18px;height:18px;background:var(--primary);cursor:pointer;border-radius:50%;border:3px solid #fff;box-shadow:0 0 8px #4d8eff99}#percussion-section{padding:0;margin:0;border:none;display:flex;flex-direction:column;gap:5px}.instrument-track{border:1px solid var(--border-color);border-radius:8px;background-color:var(--background-med-lighter);overflow:hidden;transition:background-color .3s,box-shadow .3s;display:flex;align-items:flex-start;position:relative}.instrument-track:last-child{margin-bottom:0}.track-header{flex:0 0 var(--seq-side-width);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;align-content:start;gap:4px 6px;padding:6px 8px;background-color:transparent;border-right:1px solid var(--border-color);box-sizing:border-box;height:auto;align-self:flex-start}.track-header .track-name{grid-column:1;grid-row:1}.track-header .track-header-controls{grid-column:2;grid-row:1;display:flex;gap:4px;align-items:center}.track-header .track-instrument-select{grid-column:1 / -1;grid-row:2;width:100%;margin-top:2px}.track-header:hover{background-color:transparent}.track-name{font-weight:600;font-size:13px;letter-spacing:.5px}.track-controls{display:flex;align-items:center;gap:15px}.collapse-btn{background:none;border:none;color:var(--text-dark);width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform .3s ease,background-color .2s,color .2s}.collapse-btn:hover{background-color:#ffffff1a;color:var(--text-light)}.track-notes{padding:6px 8px;display:flex;flex-direction:column;gap:4px;flex-grow:1}.sequencer-cells{display:flex;flex-direction:row;gap:4px;flex-grow:1;flex-wrap:nowrap}.pattern-control label{font-size:12px;font-weight:600;color:var(--text-dark);margin-right:4px}#pattern-length{background:var(--background-dark);color:var(--text-light);border:1px solid var(--border-color);border-radius:6px;padding:6px 8px;font-size:13px}.btn.btn-secondary{background-color:var(--background-dark);color:var(--text-light);border:1px solid var(--border-color);text-transform:none;font-weight:500}.btn.btn-secondary:hover{background-color:#1d2025}body.compact-cells #cell-size-toggle:after{content:" (On)"}#instrument-select-modal,.track-instrument-select,#main-instrument-select{padding:10px 42px 10px 16px;line-height:1.2;border-radius:8px;border:1px solid var(--border-color);background-color:var(--background-dark);color:var(--text-light);font-size:15px;font-family:var(--font-main);-webkit-appearance:none;appearance:none;background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292.4 292.4"%3E%3Cpath fill="%234d8eff" d="M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z"/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right 16px center;background-size:12px;cursor:pointer;transition:border-color .2s,box-shadow .2s;max-width:100%;box-sizing:border-box}#instrument-select-modal:focus,.track-instrument-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 8px #4d8eff80}.track-instrument-select{width:150px;background-color:var(--background-light);font-size:13px;padding:6px 38px 6px 12px}@media (min-width: 640px) and (max-width: 1180px){#main-instrument-select{min-width:180px}}#main-instrument-select,.track-instrument-select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-header-controls{display:flex;align-items:center;gap:4px}.btn-icon{background:var(--background-dark);color:var(--text-light);border:1px solid var(--border-color);width:26px;height:26px;padding:0;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;border-radius:6px;cursor:pointer;transition:background-color .2s,transform .15s}.btn-icon:hover{background:#1d2025}.btn-icon:active{transform:scale(.9)}.remove-btn{color:var(--secondary);border-color:var(--secondary)}.remove-btn:hover{background:#ff6b6b1a}.instrument-track .sequencer-row{gap:4px}#percussion-section .sequencer-row,.instrument-track .sequencer-row{padding-left:0;margin-left:0}.instrument-track .track-notes{padding:4px}#add-track-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;opacity:1;transition:opacity .3s ease;backdrop-filter:blur(5px)}#add-track-modal.modal-hidden{opacity:0;pointer-events:none}.modal-content{background:var(--background-med);padding:30px 35px;border-radius:12px;box-shadow:0 10px 30px #00000080;width:90%;max-width:450px;text-align:left;transform:scale(1);transition:transform .3s ease;border:1px solid var(--border-color)}#add-track-modal.modal-hidden .modal-content{transform:scale(.95)}.modal-content h2{margin-top:0;color:var(--text-light);font-size:22px;font-weight:600;margin-bottom:25px;border-bottom:1px solid var(--border-color);padding-bottom:15px}.modal-controls{margin-bottom:30px}.modal-controls label{display:block;margin-bottom:10px;color:var(--text-dark);font-size:14px;font-weight:500}.modal-buttons{display:flex;justify-content:flex-end;gap:15px;padding-top:20px;border-top:1px solid var(--border-color)}.key-column{flex:1;border:1px solid #000;transition:background-color .1s}.key-column.active{background-color:var(--primary-dark);box-shadow:inset 0 0 15px #4d8eff80}.instrument-select{display:none}body.touch-enabled .keyboard-container{gap:4px;padding:4px}body.touch-enabled .key-column{border-radius:8px;border:1px solid var(--background-light);background:linear-gradient(180deg,#ffffff0d,#fff0);position:relative;touch-action:none}body.touch-enabled .key-column.active{background-color:var(--primary);box-shadow:0 0 12px #4d8effcc,inset 0 0 10px #0006}body.touch-enabled .key-column:active:not(.active){background-color:inherit;box-shadow:none}body.touch-enabled .key-column:after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 1px #ffffff0d;pointer-events:none}body.touch-enabled .key-column.active:after{animation:pulseKey .6s ease-out}@keyframes pulseKey{0%{box-shadow:inset 0 0 0 1px #ffffff4d,0 0 #4d8eff99}to{box-shadow:inset 0 0 0 1px #ffffff0d,0 0 0 12px #4d8eff00}}
.song-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}.song-controls select{padding:9px 34px 9px 12px;line-height:1.2;border-radius:8px;border:1px solid var(--border-color);background-color:var(--background-dark);color:var(--text-light);font-size:14px;font-family:var(--font-main);appearance:none;background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292.4 292.4"%3E%3Cpath fill="%234d8eff" d="M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z"/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right 12px center;background-size:10px}.song-controls .btn{padding:9px 12px;font-size:12px;letter-spacing:.3px}.song-status{min-width:128px;color:var(--text-dark);font-size:12px;font-weight:600;text-align:left}.key-column.song-cue{background-color:var(--highlight);box-shadow:0 0 18px #feca57b3,inset 0 0 18px #0000004d}.key-column.song-hit{background-color:var(--success);box-shadow:0 0 16px #4caf50b3,inset 0 0 14px #0000004d}@media (max-width: 760px){.main-controls{align-items:flex-start;gap:10px;padding:10px 12px}.song-controls{width:100%;margin-left:0}.song-controls select{flex:1 1 150px;min-width:0}.song-status{width:100%;min-width:0}}
#song-select,#song-speed-select{padding:10px 42px 10px 16px;font-size:15px;-webkit-appearance:none;appearance:none;background-position:right 16px center;background-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}#song-select{min-width:150px}#song-speed-select{min-width:112px}#song-select:focus,#song-speed-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 8px #4d8eff80}
.song-controls select.song-select-control{height:38px;padding:10px 42px 10px 16px;border:1px solid var(--border-color)!important;border-radius:8px!important;background:var(--background-dark) url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292.4 292.4"%3E%3Cpath fill="%234d8eff" d="M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z"/%3E%3C/svg%3E') no-repeat right 16px center / 12px!important;color:var(--text-light)!important;-webkit-text-fill-color:var(--text-light);font:500 15px/1.2 var(--font-main);-webkit-appearance:none!important;appearance:none!important;color-scheme:dark;box-sizing:border-box;box-shadow:none}.song-controls select.song-select-control::-ms-expand{display:none}.song-controls select.song-select-control:focus{outline:none;border-color:var(--primary)!important;box-shadow:0 0 8px #4d8eff80}
.key-column{position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;transition:background-color 5s ease-out,box-shadow 5s ease-out}.key-column.active,.key-column.song-cue,.key-column.song-hit{transition:background-color .08s ease-out,box-shadow .08s ease-out}.key-label{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:2;min-width:2.5ch;padding:3px 5px;border-radius:4px;background:#00000040;color:#ffffffb8;font-size:11px;font-weight:700;line-height:1;letter-spacing:0;text-align:center;text-shadow:0 1px 2px #000;pointer-events:none}.key-column.active .key-label,.key-column.song-hit .key-label{background:#00000066;color:#fff}.key-column.song-cue .key-label{background:#00000040;color:#1b1600;text-shadow:none}body.sequencer-active .key-label{top:4px;padding:2px 3px;font-size:9px}@media (max-width: 760px){.key-label{top:8px;padding:3px 4px;font-size:10px}body.sequencer-active .key-label{font-size:8px}}