.transport-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 20px;background:#1a1a1a;border-bottom:2px solid #fff;flex-shrink:0}.daw-info{display:flex;gap:30px;align-items:center}.time-display,.bpm-display,.loop-info{display:flex;flex-direction:column;align-items:center;gap:5px}.label{font-size:8px;letter-spacing:2px;color:#999}.value{font-size:16px;font-weight:700;color:#fff;font-family:Courier New,monospace;min-width:60px;text-align:center}.bpm-input{background:#000;border:1px solid #fff;color:#fff;padding:5px 10px;font-size:14px;font-weight:700;font-family:Courier New,monospace;width:80px;text-align:center}.bpm-input:focus{outline:none;border-color:#0f0}.transport-controls{display:flex;gap:10px}.transport-btn{padding:10px 20px;background:#000;border:2px solid #fff;color:#fff;font-size:18px;font-weight:700;font-family:Courier New,monospace;cursor:pointer;transition:all .1s;min-width:50px;text-align:center}.transport-btn:hover{background:#fff;color:#000}.transport-btn.active{background:#0f0;color:#000;border-color:#0f0}.record-btn.active{background:red;color:#fff;border-color:red}.metronome-btn.active{background:#0f0;color:#000;border-color:#0f0}.recording-indicator{width:14px;height:14px;border-radius:50%;background:transparent;border:2px solid #fff;margin-left:10px;transition:all .1s}.recording-indicator.recording-lead-in{background:#ff0;border-color:#ff0;animation:recording-pulse .5s infinite}.recording-indicator.recording-active{background:red;border-color:red;animation:recording-blink .6s infinite}@keyframes recording-pulse{0%,to{opacity:1;box-shadow:0 0 #ffff00b3}50%{opacity:.7;box-shadow:0 0 0 6px #ff00}}@keyframes recording-blink{0%,49%,to{opacity:1}50%,99%{opacity:.3}}.oscilloscope-module{display:flex;flex-direction:column;height:360px;flex-shrink:0}.oscilloscope-container{flex:1;position:relative;background:#000;border:2px solid #fff;overflow:hidden;min-height:0;margin:10px 10px 30px;display:flex;flex-direction:column}.oscilloscope-canvas{width:100%;flex:1;display:block;background:#000}.knob-container{display:flex;flex-direction:column;align-items:center;gap:0;padding:0}.knob-label{font-size:9px;letter-spacing:1px;color:#999;text-transform:uppercase;text-align:center}.knob{width:80px;height:80px;border-radius:50%;background:#000;border:2px solid #fff;position:relative;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.knob:active{cursor:grabbing}.knob-indicator{position:absolute;width:4px;height:20px;background:#fff;top:8px;left:50%;transform-origin:50% 32px;transform:translate(-50%) rotate(0);transition:transform .05s linear}.knob-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;color:#fff;text-align:center;width:100%;font-family:Courier New,monospace}.knob-label{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:8px;letter-spacing:1px;color:#fff;white-space:nowrap}.wave-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.wave-btn,.filter-type-btn,.lfo-target-btn,.lfo-wave-btn{background:#000;border:1px solid #fff;color:#fff;padding:8px 4px;font-size:9px;font-weight:700;letter-spacing:1px;cursor:pointer;text-align:center;transition:all .1s;font-family:Courier New,monospace}.wave-btn:hover,.filter-type-btn:hover,.lfo-target-btn:hover,.lfo-wave-btn:hover{background:#333}.wave-btn.active,.filter-type-btn.active,.lfo-target-btn.active,.lfo-wave-btn.active{background:#fff;color:#000}.filter-type-selector,.lfo-target-selector,.lfo-wave-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:10px}.lfo-wave-selector{grid-template-columns:repeat(4,1fr)}.toggle-btn{width:100%;background:#000;border:1px solid #fff;color:#fff;padding:10px 8px;font-size:10px;font-weight:700;letter-spacing:1px;cursor:pointer;text-align:center;transition:all .1s;font-family:Courier New,monospace;margin-bottom:10px}.toggle-btn:hover{background:#333}.toggle-btn.active{background:#0f0;color:#000;border-color:#0f0}.filter-bypass-toggle,.effect-bypass-toggle{margin-bottom:10px}.filter-bypass-btn,.effect-bypass-btn{width:100%;background:#000;border:1px solid #fff;color:#fff;padding:10px 8px;font-size:10px;font-weight:700;letter-spacing:1px;cursor:pointer;text-align:center;transition:all .1s;font-family:Courier New,monospace}.filter-bypass-btn:hover,.effect-bypass-btn:hover{background:#333}.filter-bypass-btn.active,.effect-bypass-btn.active{background:red;color:#fff;border-color:red}.knobs-row{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:15px}.knob-container{display:flex;flex-direction:column;align-items:center}.module-panel{opacity:1;transition:opacity .3s,transform .2s;width:100%;margin-bottom:10px}.module-panel.dragging{opacity:.9;transform:rotate(3deg);box-shadow:0 10px 30px #000c;z-index:10000}.module-panel.disabled{opacity:.4}.module-panel.disabled .module{border-color:#666}.module-panel.disabled .module-title{color:#666}.module-placeholder{border:2px dashed #666;background:#ffffff0d;min-height:100px;width:100%;margin:5px 0;border-radius:4px}.module-header-controls{display:flex;gap:8px;align-items:center}.module-panel-toggle,.module-panel-close{background:#000;border:2px solid #fff;color:#fff;width:28px;height:28px;border-radius:50%;font-size:14px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700}.module-panel-toggle:hover{background:#0f0;border-color:#0f0;color:#000;transform:scale(1.15)}.module-panel-close{border-radius:4px}.module-panel-close:hover{background:red;border-color:red;transform:scale(1.15)}.module-content .module-placeholder{font-size:11px;color:#888;text-align:center;padding:30px 15px;border:1px dashed #333;background:#0000004d}.drag-preview{box-shadow:0 10px 40px #00ff0080;transform:rotate(2deg) scale(1.05)}.module-menu-btn{padding:8px 14px;background:#000;border:2px solid #fff;color:#fff;font-size:11px;font-weight:700;font-family:Courier New,monospace;cursor:pointer;transition:all .2s;letter-spacing:1px;margin-left:10px}.module-menu-btn:hover{background:#00f;color:#fff;border-color:#00f;transform:scale(1.05)}.module-menu-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000f2;z-index:2000;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.module-menu-content{background:#111;border:3px solid #fff;max-width:900px;width:90%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 0 30px #ffffff4d}.module-menu-header{background:#000;border-bottom:2px solid #fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.module-menu-header h2{font-size:16px;letter-spacing:3px;color:#00f;margin:0}.module-menu-close{background:#000;border:2px solid #fff;color:#fff;width:30px;height:30px;font-size:20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-family:Courier New,monospace}.module-menu-close:hover{background:red;border-color:red;transform:scale(1.1)}.module-menu-body{padding:20px;overflow-y:auto;flex:1;display:grid;grid-template-columns:1fr 1fr;gap:20px}.module-categories h3,.active-modules h3{font-size:12px;letter-spacing:2px;color:#0f0;margin:0 0 15px;padding-bottom:10px;border-bottom:1px solid #333}.module-list,.active-module-list{display:flex;flex-direction:column;gap:10px}.module-category{margin-bottom:20px}.module-category h4{font-size:10px;letter-spacing:1px;color:#999;margin:0 0 10px}.module-item{background:#1a1a1a;border:1px solid #333;padding:12px;display:flex;align-items:center;gap:12px;transition:all .2s;cursor:pointer}.module-item:hover{border-color:#fff;background:#222}.module-icon{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#000;border:1px solid #fff;flex-shrink:0}.module-info{flex:1}.module-name{font-size:11px;font-weight:700;color:#fff;margin-bottom:4px}.module-desc{font-size:9px;color:#999;line-height:1.3}.module-add-btn{background:#0f0;border:2px solid #0f0;color:#000;width:30px;height:30px;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s;flex-shrink:0}.module-add-btn:hover{background:#0ff;border-color:#0ff;transform:scale(1.1)}.active-module-item{background:#1a1a1a;border:1px solid #333;padding:10px;display:flex;align-items:center;gap:10px}.active-module-item .module-icon{width:30px;height:30px;font-size:18px}.active-module-item .module-name{font-size:10px}.active-module-item .module-id{font-size:8px;color:#666}.module-controls{display:flex;gap:5px}.module-toggle-btn{background:#333;border:1px solid #666;color:#666;width:25px;height:25px;font-size:14px;cursor:pointer;transition:all .2s}.module-toggle-btn.active{background:#0f0;border-color:#0f0;color:#000}.module-toggle-btn:hover{transform:scale(1.1)}.module-remove-btn{background:#600;border:1px solid #900;color:#fff;width:25px;height:25px;font-size:14px;cursor:pointer;transition:all .2s}.module-remove-btn:hover{background:red;border-color:red;transform:scale(1.1)}.no-modules{color:#666;font-size:10px;text-align:center;padding:20px}.module-menu-button-container{padding:10px;display:flex;align-items:center}.controls-area{display:flex;flex-direction:row;gap:10px;overflow-y:auto;overflow-x:hidden;align-items:flex-start;padding:10px}.module-grid{display:flex;gap:10px;align-items:flex-start}.module-column{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.module{background:#111;display:flex;flex-direction:column;min-height:150px;width:100%}.module-header{background:#000;border-bottom:2px solid #fff;padding:12px 15px;display:flex;justify-content:space-between;align-items:center;cursor:grab;-webkit-user-select:none;user-select:none}.module-header:active{cursor:grabbing}.module-title{font-size:11px;font-weight:700;letter-spacing:2px;color:#fff;flex:1}.module-content{flex:1;padding:20px 18px;display:flex;flex-direction:column;gap:18px}.controls-area::-webkit-scrollbar{width:8px}.controls-area::-webkit-scrollbar-track{background:#000}.controls-area::-webkit-scrollbar-thumb{background:#fff;border-radius:4px}.controls-area::-webkit-scrollbar-thumb:hover{background:#ccc}.instrument-library-module{display:flex;flex-direction:column;background:#1a1a1a;border-bottom:1px solid #333;flex-shrink:0}.instrument-library-module .module-header{padding:10px 15px;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.instrument-library-module .module-header:hover{background:#222}.expand-icon{color:#666;font-size:10px}.instrument-library-content{padding:15px;max-height:400px;overflow-y:auto}.library-actions{margin-bottom:15px}.save-btn{width:100%;padding:8px;background:#333;border:1px solid #555;color:#fff;font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:background .2s}.save-btn:hover{background:#444}.save-dialog{margin-bottom:15px;padding:10px;background:#222;border:1px solid #444}.save-input{width:100%;padding:6px;background:#111;border:1px solid #555;color:#fff;font-size:11px;margin-bottom:8px;box-sizing:border-box}.save-input:focus{outline:none;border-color:#0f8}.save-dialog-actions{display:flex;gap:8px}.save-dialog-actions button{flex:1;padding:6px;background:#333;border:1px solid #555;color:#fff;font-size:10px;cursor:pointer;transition:background .2s}.save-dialog-actions button:hover:not(:disabled){background:#444}.save-dialog-actions button:disabled{opacity:.5;cursor:not-allowed}.instrument-list{display:flex;flex-direction:column;gap:8px}.instrument-item{display:flex;justify-content:space-between;align-items:center;padding:8px;background:#222;border:1px solid #333}.instrument-info{display:flex;align-items:center;gap:8px;flex:1}.instrument-name{color:#fff;font-size:11px;font-weight:500}.preset-badge{padding:2px 6px;background:#0f8;color:#000;font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.instrument-actions{display:flex;gap:6px}.load-btn,.delete-btn{padding:4px 8px;background:#333;border:1px solid #555;color:#fff;font-size:9px;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:background .2s;min-width:40px}.load-btn:hover{background:#0f8;color:#000}.delete-btn:hover{background:#f44;color:#fff}.empty-state{padding:20px;text-align:center;color:#666;font-size:11px}.arrangement-view{flex:1;display:flex;flex-direction:row;height:100%;background:#111;color:#fff;overflow:hidden}.track-headers-panel{width:200px;background:#1a1a1a;border-right:1px solid #333;display:flex;flex-direction:column;z-index:2}.track-headers-title{height:30px;background:#222;border-bottom:1px solid #333;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#888}.track-header{height:60px;border-bottom:1px solid #2a2a2a;display:flex;cursor:pointer;transition:background .2s}.track-header:hover{background:#222}.track-header.active{background:#2a2a2a}.track-color-strip{width:5px;height:100%}.track-info{flex:1;padding:8px;display:flex;flex-direction:column;justify-content:center;gap:5px}.track-name{font-size:12px;font-weight:500}.track-controls{display:flex;align-items:center;gap:8px}.track-volume-slider{flex:1;display:flex;align-items:center;gap:5px}.track-volume-slider input{width:60px;height:3px}.track-volume-value{font-size:9px;color:#888;width:20px;text-align:right}.track-buttons{display:flex;gap:4px}.track-btn{width:18px;height:18px;font-size:9px;border:1px solid #444;background:#222;color:#888;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center}.track-btn.mute.active{background:#f44;color:#fff;border-color:#f44}.track-btn.solo.active{background:#fb0;color:#000;border-color:#fb0}.timeline-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.timeline-header{height:30px;background:#111;border-bottom:1px solid #333;overflow:hidden}.timeline-ruler{height:100%;display:flex;color:#666;font-size:10px;align-items:flex-end;padding-bottom:2px}.timeline-tracks-container{flex:1;overflow:auto;position:relative;background:#0a0a0a}.timeline-grid{position:relative;background-image:linear-gradient(to right,#1a1a1a 1px,transparent 1px);background-size:50px 100%}.timeline-track-row{height:60px;border-bottom:1px solid #1a1a1a;position:relative}.timeline-clip{position:absolute;top:5px;bottom:5px;border-width:2px;border-style:solid;border-radius:4px;padding:5px;overflow:hidden;font-size:10px;font-weight:700;color:#fff;cursor:grab;-webkit-user-select:none;user-select:none}.timeline-clip:hover{opacity:.9}.timeline-clip.selected{box-shadow:0 0 0 2px #fff;z-index:10}.clip-resize-handle{position:absolute;top:0;bottom:0;right:0;width:10px;background:#0000001a;cursor:col-resize}.clip-resize-handle:hover{background:#ffffff4d}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:red;z-index:100;pointer-events:none;box-shadow:0 0 5px #ff000080}.timeline-track-row.drop-target{background:#4a9eff1a;box-shadow:inset 0 0 0 2px #4a9eff80}.timeline-clip.percussion-clip{background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,transparent 100%)}.percussion-preview{position:absolute;top:20px;left:5px;right:5px;bottom:5px;display:flex;flex-direction:column;gap:1px}.perc-preview-row{flex:1;display:flex;gap:1px;min-height:2px}.perc-preview-step{height:100%;border-radius:1px;opacity:.6}.perc-preview-step.active{opacity:1}.midi-editor-view{flex:1;display:flex;flex-direction:column;background:#111;height:100%;-webkit-user-select:none;user-select:none}.midi-editor-toolbar{height:40px;background:#1a1a1a;border-bottom:1px solid #333;display:flex;align-items:center;padding:0 15px;justify-content:space-between}.editor-track-info{font-weight:700;font-size:14px;text-transform:uppercase}.editor-tools{display:flex;gap:10px;align-items:center}.tool-info{font-size:12px;color:#888}.editor-btn{background:#333;border:1px solid #444;color:#ccc;padding:4px 12px;border-radius:4px;font-size:11px;cursor:pointer}.editor-btn:hover{background:#444;color:#fff}.editor-close-btn{background:none;border:none;color:#666;font-size:16px;cursor:pointer}.editor-close-btn:hover{color:#fff}.piano-roll-container{display:flex;flex:1;overflow:hidden;position:relative}.piano-keys-sidebar{width:60px;background:#0a0a0a;border-right:1px solid #333;display:flex;flex-direction:column;z-index:2;overflow:hidden}.piano-keys-header{height:30px;border-bottom:1px solid #333;display:flex;align-items:center;justify-content:center;font-size:10px;color:#666;flex-shrink:0}.piano-keys-list{flex:1;overflow:hidden;position:relative}.piano-key{height:20px;border-bottom:1px solid #222;background:#fff;color:#000;font-size:9px;display:flex;align-items:center;justify-content:flex-end;padding-right:5px;cursor:pointer;box-sizing:border-box}.piano-key.black-key{background:#000;color:#fff;border-bottom:1px solid #333}.piano-roll-area{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.piano-roll-header{height:30px;background:#111;border-bottom:1px solid #333;position:relative;overflow:hidden;flex-shrink:0}.time-ruler{height:100%;display:flex;color:#666;font-size:10px;align-items:flex-end;padding-bottom:2px}.ruler-bar{border-left:1px solid #333;padding-left:4px;height:50%}.piano-roll-grid-container{flex:1;overflow:auto;position:relative;background:#000;cursor:crosshair}.piano-roll-grid{position:relative;background-image:linear-gradient(to right,#1a1a1a 1px,transparent 1px);background-size:25px 100%}.piano-roll-row{border-bottom:1px solid #151515;box-sizing:border-box;width:100%}.piano-roll-row.black-row{background:#ffffff08}.playback-line{position:absolute;top:0;bottom:0;width:2px;background:#0f8;z-index:100;pointer-events:none;box-shadow:0 0 8px #0f8}.midi-note{position:absolute;z-index:50;box-sizing:border-box;border-width:1px;border-style:solid;border-radius:3px;cursor:grab;overflow:hidden}.midi-note.selected{box-shadow:0 0 0 2px #fff;z-index:60}.resize-handle{position:absolute;top:0;bottom:0;right:0;width:10px;background:#0003;cursor:col-resize}.resize-handle:hover{background:#ffffff4d}.sequence-block-library{display:flex;flex-direction:column;height:100%;background:#1a1a1a;border-left:1px solid #333;overflow:hidden}.library-header{padding:16px;border-bottom:1px solid #333}.library-header h3{margin:0 0 4px;font-size:16px;font-weight:600;color:#fff}.library-hint{margin:0;font-size:11px;color:#888}.pattern-list{flex:1;overflow-y:auto;padding:8px}.pattern-item-wrapper{margin-bottom:12px}.pattern-item{background:#252525;border:2px solid #333;border-radius:8px;padding:12px;cursor:pointer;transition:all .2s ease}.pattern-item:hover{border-color:#4a9eff;background:#2a2a2a}.pattern-item.selected{border-color:#4a9eff;background:#2d3748;box-shadow:0 0 12px #4a9eff4d;cursor:grab}.pattern-item.selected:active{cursor:grabbing}.pattern-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.pattern-name{font-size:14px;font-weight:600;color:#fff}.pattern-info{font-size:11px;color:#888}.pattern-preview{display:flex;flex-direction:column;gap:2px;padding:8px;background:#1a1a1a;border-radius:4px}.preview-row{display:flex;gap:2px;height:3px}.preview-step{flex:1;background:#333;border-radius:1px}.preview-step.active{background:#4a9eff}.sound-selector{margin-top:8px;padding:12px;background:#2d3748;border:2px solid #4a9eff;border-radius:8px;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #4a9eff33}.selector-header span{font-size:12px;font-weight:600;color:#fff}.selector-actions{display:flex;gap:8px}.select-btn{padding:4px 8px;font-size:11px;background:#1a1a1a;color:#4a9eff;border:1px solid #4a9eff;border-radius:4px;cursor:pointer;transition:all .2s ease}.select-btn:hover{background:#4a9eff;color:#fff}.sound-grid{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;max-height:240px;overflow-y:auto}.sound-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#1a1a1a;border:1px solid #333;border-radius:4px;cursor:pointer;transition:all .2s ease}.sound-row:hover{background:#252525;border-color:#4a9eff}.sound-row.selected{background:#4a9eff22;border-color:#4a9eff}.sound-row.empty{opacity:.4;cursor:not-allowed}.sound-row.empty:hover{background:#1a1a1a;border-color:#333}.sound-indicator{width:12px;height:12px;border-radius:2px;background:#333;transition:background .2s ease}.sound-row.selected .sound-indicator{background:#4a9eff}.sound-label{font-size:12px;color:#fff;min-width:70px}.sound-preview{display:flex;gap:1px;flex:1;height:8px}.mini-step{flex:1;background:#333;border-radius:1px}.mini-step.active{background:#666}.sound-row.selected .mini-step.active{background:#4a9eff}.drag-hint{text-align:center;font-size:11px;color:#4a9eff;padding:8px;background:#4a9eff11;border-radius:4px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.empty-state{padding:32px 16px;text-align:center}.empty-state p{margin:0 0 8px;color:#888;font-size:13px}.empty-hint{font-size:11px;color:#666}.pattern-list::-webkit-scrollbar,.sound-grid::-webkit-scrollbar{width:8px}.pattern-list::-webkit-scrollbar-track,.sound-grid::-webkit-scrollbar-track{background:#1a1a1a}.pattern-list::-webkit-scrollbar-thumb,.sound-grid::-webkit-scrollbar-thumb{background:#333;border-radius:4px}.pattern-list::-webkit-scrollbar-thumb:hover,.sound-grid::-webkit-scrollbar-thumb:hover{background:#444}.step-sequencer-container{display:flex;flex-direction:column;height:100%;background:#0a0a0a;color:#fff;overflow:hidden}.sequencer-controls{display:flex;align-items:center;gap:15px;padding:15px 20px;background:#1a1a1a;border-bottom:1px solid #333}.sequencer-control-group{display:flex;align-items:center;gap:10px}.sequencer-label{font-size:10px;letter-spacing:1px;color:#999;text-transform:uppercase;font-weight:700}.sequencer-select{background:#2a2a2a;color:#fff;border:1px solid #444;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;font-family:inherit;transition:all .2s}.sequencer-select:hover{background:#333;border-color:#555}.sequencer-select:focus{outline:none;border-color:#666}.sequencer-btn{background:#2a2a2a;color:#fff;border:1px solid #444;padding:6px 16px;border-radius:4px;font-size:11px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;font-family:inherit;transition:all .2s}.sequencer-btn:hover{background:#333;border-color:#555}.sequencer-btn:active{background:#222}.sequencer-btn.muted{background:#4a2a2a;border-color:#f44;color:#f66}.sequencer-btn.muted:hover{background:#5a3a3a;border-color:#f55}.sequencer-grid-wrapper{flex:1;overflow:auto;padding:20px}.sequencer-grid{display:flex;flex-direction:column;gap:2px;min-width:fit-content}.sequencer-header-row{display:flex;gap:2px;margin-bottom:8px}.sequencer-row{display:flex;gap:2px;align-items:center}.sequencer-label-cell{width:60px;min-width:60px;display:flex;align-items:center;justify-content:center;padding:8px;font-size:10px;color:#999;text-transform:uppercase;letter-spacing:1px;font-weight:700}.sequencer-step-number{width:40px;height:24px;display:flex;align-items:center;justify-content:center;font-size:9px;color:#666;font-weight:700}.sequencer-step-number.beat-marker{color:#999;font-weight:700}.sequencer-step{width:40px;height:40px;background:#1a1a1a;border:2px solid #333;border-radius:4px;cursor:pointer;transition:all .15s;padding:0;position:relative}.sequencer-step:hover{border-color:#555;background:#222}.sequencer-step.active{background:#4a9eff;border-color:#6bb0ff;box-shadow:0 0 8px #4a9eff4d}.sequencer-step.active:hover{background:#5ba9ff;border-color:#7bbfff}.sequencer-step.current{box-shadow:0 0 12px #ffffff80;border-color:#fff;z-index:1}.sequencer-step.active.current{background:#6bb0ff;border-color:#fff;box-shadow:0 0 16px #4a9eff99,0 0 12px #ffffff4d}.drum-label{font-size:10px;letter-spacing:1px;color:#999}.sequencer-grid-wrapper::-webkit-scrollbar{width:8px;height:8px}.sequencer-grid-wrapper::-webkit-scrollbar-track{background:#0a0a0a}.sequencer-grid-wrapper::-webkit-scrollbar-thumb{background:#333;border-radius:4px}.sequencer-grid-wrapper::-webkit-scrollbar-thumb:hover{background:#444}.bindings-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.bindings-modal-content{background-color:#1a1a1a;border:1px solid #333;border-radius:12px;padding:24px;width:90%;max-width:800px;box-shadow:0 20px 50px #00000080;color:#e0e0e0}.bindings-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;border-bottom:1px solid #333;padding-bottom:16px}.bindings-modal-header h2{margin:0;font-size:1.2rem;font-weight:600;color:#0f8;letter-spacing:1px}.header-actions{display:flex;gap:12px;align-items:center}.reset-btn{background:#333;border:1px solid #444;color:#aaa;font-size:.8rem;padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .2s}.reset-btn:hover{background:#444;color:#fff}.close-btn{background:none;border:none;color:#888;font-size:1.5rem;cursor:pointer;padding:4px 8px;transition:color .2s}.close-btn:hover{color:#fff}.info-text{margin-bottom:24px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:.9rem;color:#aaa}.info-text p{margin:0}.info-text strong{color:#0f8}.chord-keys-row{display:flex;justify-content:space-between;margin-bottom:20px;gap:4px}.chord-key{position:relative;background-color:#2a2a2a;border:1px solid #444;border-radius:4px;padding:8px 4px;flex:1;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:all .1s}.chord-key:hover{background-color:#333;border-color:#555}.chord-key.key-pressed{background-color:#0f8;color:#000;border-color:#0f8;box-shadow:0 0 15px #00ff884d}.chord-key.key-editing{border-color:#0f8;background-color:#223;z-index:10}.chord-key-label{font-weight:700;font-size:1.1rem;margin-bottom:4px}.chord-key-name{font-size:.7rem;text-transform:uppercase;opacity:.8;text-align:center}.chord-selector-popover{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:8px;background-color:#1a1a1a;border:1px solid #444;border-radius:8px;padding:8px;width:200px;z-index:100;box-shadow:0 10px 30px #000c}.chord-selector-header{font-size:.8rem;font-weight:700;color:#888;margin-bottom:8px;text-align:center;text-transform:uppercase}.chord-options{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-height:200px;overflow-y:auto}.chord-option{background:#2a2a2a;border:1px solid #333;color:#ccc;font-size:.75rem;padding:6px;cursor:pointer;border-radius:3px;text-align:center}.chord-option:hover{background:#333;color:#fff}.chord-option.active{background:#052;border-color:#0f8;color:#fff}.piano-keyboard-container{margin-bottom:24px;-webkit-user-select:none;user-select:none}.piano-keyboard{position:relative;height:200px;background-color:#111;border-radius:4px;padding:4px}.white-keys-row{display:flex;width:100%;height:100%}.piano-key{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:10px;border-radius:0 0 4px 4px;transition:background-color .05s}.white-key{flex:1;height:100%;background-color:#e0e0e0;margin:0 1px;color:#333;border:1px solid #ccc}.white-key.key-pressed{background-color:#0f8;box-shadow:0 0 10px #00ff8880 inset}.black-keys-row{position:absolute;top:4px;left:4px;right:4px;height:60%;pointer-events:none}.black-key{position:absolute;width:8%;height:100%;background-color:#222;color:#888;z-index:2;border:1px solid #111;border-radius:0 0 4px 4px;transform:translate(-50%)}.black-key.key-pressed{background-color:#0a5;color:#fff;box-shadow:0 0 10px #00ff884d}.piano-key-label{font-weight:700;font-size:1rem;margin-bottom:2px}.piano-key-note{font-size:.7rem;opacity:.7}.black-key .piano-key-note{color:#aaa}.function-keys-section{display:flex;justify-content:center;gap:20px;margin-top:20px}.function-key{display:flex;align-items:center;background-color:#2a2a2a;border:1px solid #444;padding:8px 16px;border-radius:20px;gap:10px;transition:all .1s}.function-key.key-pressed{background-color:#0f8;color:#000;border-color:#0f8}.function-key .key-label{font-weight:700;font-size:1.2rem;background-color:#111;color:#fff;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%}.function-key.key-pressed .key-label{background-color:#000;color:#0f8}.function-key .key-desc{font-size:.9rem}.bindings-modal-footer{text-align:center;color:#666;font-size:.85rem;border-top:1px solid #333;padding-top:16px}.bindings-modal-footer p{margin:4px 0}.octave-value{color:#0f8;font-weight:700}.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}.driver-popover{background-color:#1a1a1a;color:#fff;border:1px solid #00ff88;border-radius:8px;box-shadow:0 4px 20px #0f83;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.driver-popover .driver-popover-title{color:#0f8;font-size:18px;font-weight:700;margin-bottom:8px}.driver-popover .driver-popover-description{color:#ccc;font-size:14px;line-height:1.5}.driver-popover .driver-popover-navigation-btns button{flex:0 0 auto;min-width:60px;text-align:center;background-color:#333;color:#fff;border:1px solid #555;text-shadow:none;font-size:11px;padding:4px 12px;border-radius:4px;cursor:pointer;transition:all .2s;line-height:1.2}.driver-popover .driver-popover-navigation-btns button:hover{background-color:#444;border-color:#0f8;color:#0f8}.driver-popover .driver-popover-navigation-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.driver-popover .driver-popover-close-btn{color:#666;transition:color .2s;background:transparent!important;border:none!important;padding:0!important;width:20px!important;height:20px!important;display:flex;align-items:center;justify-content:center;font-size:16px!important;position:absolute;top:8px;right:8px;box-shadow:none!important}.driver-popover .driver-popover-close-btn:hover{color:#fff;background:transparent!important}.driver-popover .driver-popover-arrow-side-left.driver-popover-arrow{border-left-color:#1a1a1a}.driver-popover .driver-popover-arrow-side-right.driver-popover-arrow{border-right-color:#1a1a1a}.driver-popover .driver-popover-arrow-side-top.driver-popover-arrow{border-top-color:#1a1a1a}.driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow{border-bottom-color:#1a1a1a}.track-selector{display:flex;align-items:center;gap:8px;margin-left:10px;padding:0 10px;border-left:1px solid #333}.track-select-dropdown{background:#1a1a1a;color:#fff;border:1px solid #333;padding:6px 10px;border-radius:4px;font-family:Courier New,monospace;font-size:12px;min-width:150px;outline:none}.track-select-dropdown:focus{border-color:#0f8}.add-track-btn{background:#1a1a1a;color:#0f8;border:1px solid #333;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .2s}.add-track-btn:hover{background:#333;border-color:#0f8}.add-track-wrapper{position:relative}.track-type-menu{position:absolute;top:calc(100% + 4px);right:0;background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:4px;min-width:140px;z-index:1000;box-shadow:0 4px 12px #00000080}.track-type-option{width:100%;background:transparent;color:#fff;border:none;padding:8px 12px;text-align:left;font-family:Courier New,monospace;font-size:12px;cursor:pointer;border-radius:2px;transition:background .2s}.track-type-option:hover{background:#333;color:#0f8}.daw-container{display:flex;flex-direction:column;height:100vh;background:#000}.transport-bar-secondary{display:flex;align-items:center;justify-content:space-between;padding:5px 20px;background:#1a1a1a;border-bottom:1px solid #333}.daw-layout{display:grid;grid-template-columns:420px 1fr;gap:0;flex:1;overflow:hidden}.left-sidebar{background:#0a0a0a;border-right:1px solid #333;overflow-y:auto}.module{background:#1a1a1a;border-bottom:1px solid #333}.module-header{padding:10px 15px;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center}.module-title{font-size:10px;letter-spacing:2px;color:#999;font-weight:700;text-transform:uppercase}.controls-area-wrapper{background:#0a0a0a;overflow-y:auto;flex:1}.keyboard-info-module .module-content{padding:15px}.info-label{font-size:10px;color:#999;margin-bottom:5px}.active-notes{font-size:12px;color:#fff;font-weight:700}.piano-roll-view{flex:1;background:#0a0a0a;overflow-y:auto}@keyframes pulse-green{0%{box-shadow:0 0 #0f86;border-color:#0f86}70%{box-shadow:0 0 0 10px #0f80;border-color:#0f8}to{box-shadow:0 0 #0f80;border-color:#0f86}}.help-btn{animation:pulse-green 2s infinite;border:1px solid #00ff88!important;color:#0f8!important;font-weight:700;font-size:18px!important;transition:all .2s ease}.help-btn:hover{animation:none;background:#0f8!important;color:#000!important;box-shadow:0 0 15px #00ff8880;transform:scale(1.1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier New,Monaco,monospace;background:#000;color:#fff;overflow:hidden;height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100vw;height:100vh}.view-toggle{display:flex;gap:5px}.view-btn{padding:8px 15px;background:#000;border:1px solid #fff;color:#fff;font-size:10px;font-weight:700;cursor:pointer;transition:all .1s;font-family:Courier New,monospace}.view-btn:hover{background:#333}.view-btn-active{background:#0f0;color:#000;border-color:#0f0}.octave-controls{display:flex;align-items:center;gap:10px}.octave-btn{padding:8px 12px;background:#000;border:1px solid #fff;color:#fff;font-size:10px;font-weight:700;cursor:pointer;transition:all .1s;font-family:Courier New,monospace}.octave-btn:hover{background:#333}.octave-value{min-width:40px;text-align:center;font-size:14px;font-weight:700}.keyboard-help-btn{padding:8px 12px;background:#000;border:1px solid #fff;color:#fff;font-size:12px;cursor:pointer;transition:all .1s;font-family:Courier New,monospace}.keyboard-help-btn:hover{background:#333}.manual-layout{display:flex;width:100%;height:100vh;overflow:hidden;font-family:Inter,system-ui,-apple-system,sans-serif;background-color:#0a0a0a;color:#e0e0e0}.manual-sidebar{width:280px;min-width:280px;background:linear-gradient(180deg,#1a1a1a,#121212);border-right:1px solid #2a2a2a;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.manual-sidebar::-webkit-scrollbar{width:8px}.manual-sidebar::-webkit-scrollbar-track{background:#0a0a0a}.manual-sidebar::-webkit-scrollbar-thumb{background:#333;border-radius:4px}.manual-sidebar::-webkit-scrollbar-thumb:hover{background:#444}.sidebar-header{padding:24px 20px;border-bottom:1px solid #2a2a2a;background:#1a1a1a;position:sticky;top:0;z-index:10}.manual-title{font-size:1.8rem;font-weight:700;margin:12px 0 8px;background:linear-gradient(135deg,#00ff9d,#00b8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.manual-version{font-size:.85rem;color:#666;margin:0}.back-link{display:inline-flex;align-items:center;color:#888;text-decoration:none;font-size:.9rem;transition:color .2s;margin-bottom:8px}.back-link:hover{color:#00ff9d}.manual-nav{flex:1;padding:20px 0;overflow-y:auto}.nav-group{margin-bottom:24px;padding:0 20px}.nav-group h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:#666;margin:0 0 12px;font-weight:600}.nav-group ul{list-style:none;padding:0;margin:0}.nav-group li{margin-bottom:6px}.nav-group a{display:block;color:#aaa;text-decoration:none;padding:6px 12px;border-radius:6px;font-size:.95rem;transition:all .2s}.nav-group a:hover{color:#fff;background:#00ff9d1a}.nav-group a:active{background:#00ff9d33}.sidebar-footer{padding:16px 20px;border-top:1px solid #2a2a2a;font-size:.85rem;color:#666}.sidebar-footer p{margin:0}.manual-content{flex:1;overflow-y:auto;overflow-x:hidden;background:#0a0a0a}.manual-content::-webkit-scrollbar{width:12px}.manual-content::-webkit-scrollbar-track{background:#0a0a0a}.manual-content::-webkit-scrollbar-thumb{background:#333;border-radius:6px;border:3px solid #0a0a0a}.manual-content::-webkit-scrollbar-thumb:hover{background:#444}.content-wrapper{max-width:900px;margin:0 auto;padding:60px 80px 80px}.manual-section{margin-bottom:60px;scroll-margin-top:20px}.manual-section h2{font-size:2.2rem;color:#fff;margin-bottom:20px;margin-top:0;font-weight:600;padding-bottom:12px;border-bottom:2px solid #2a2a2a}.manual-section h3{font-size:1.5rem;color:#00b8ff;margin-top:30px;margin-bottom:15px;font-weight:600}.manual-section p{margin-bottom:16px;font-size:1.05rem;line-height:1.7;color:#ccc}.manual-section ul,.manual-section ol{margin-bottom:20px;padding-left:28px;line-height:1.8}.manual-section li{margin-bottom:10px;color:#ccc}.manual-section li strong{color:#fff}.section-divider{border:none;border-top:1px solid #2a2a2a;margin:60px 0}code{background:#1a1a1a;padding:3px 8px;border-radius:4px;font-family:Fira Code,Courier New,monospace;color:#00ff9d;font-size:.9em;border:1px solid #2a2a2a}@media (max-width: 900px){.content-wrapper{padding:40px 40px 60px}}@media (max-width: 768px){.manual-layout{flex-direction:column}.manual-sidebar{width:100%;min-width:unset;max-height:50vh;border-right:none;border-bottom:1px solid #2a2a2a}.sidebar-header{position:static}.content-wrapper{padding:30px 20px 40px}.manual-section h2{font-size:1.8rem}}