.drumseq-app{--ds-brown-900:#2c1b14;--ds-brown-800:#3e2723;--ds-brown-700:#4e342e;--ds-brown-600:#5d4037;--ds-brown-500:#6d4c41;--ds-brown-400:#8d6e63;--ds-brown-300:#a1887f;--ds-gold:gold;--ds-gold-light:#ffe44d;--ds-gold-dim:#c4a000;--ds-gold-glow:rgba(255,215,0,.25);--ds-grid-row-light:#b8b0a4;--ds-grid-row-dark:#aaa296;--ds-text-on-brown:gold;--ds-text-on-brown-dim:#d4b86a;--ds-text-on-brown-muted:#8d7b5f;--ds-toolbar-h:56px;--ds-toolbar-pad-x:16px;--ds-toolbar-gap-outer:12px;--ds-toolbar-gap-groups:12px;--ds-toolbar-gap-label:8px;--ds-panel-w:180px;--ds-timeline-h:28px;--ds-track-h:40px;--ds-status-h:24px;--ds-font-heading:"Bebas Neue","Impact",sans-serif;--ds-font-body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;--ds-font-mono:"JetBrains Mono","SF Mono","Consolas",monospace;border:1px solid rgba(120,90,72,.55);border-radius:10px;flex-direction:column;margin-top:.5rem;min-height:320px;overflow:hidden;user-select:none}.drumseq-app,.drumseq-app .ds-toolbar{background:var(--ds-brown-900);display:flex}.drumseq-app .ds-toolbar{align-items:center;border-bottom:1px solid hsla(37,46%,69%,.22);box-shadow:0 2px 12px rgba(0,0,0,.4);flex-shrink:0;gap:var(--ds-toolbar-gap-outer);height:var(--ds-toolbar-h);min-height:var(--ds-toolbar-h);padding:0 var(--ds-toolbar-pad-x)}.drumseq-app .ds-toolbar-section{align-items:center;display:flex;gap:var(--ds-toolbar-gap-groups)}.drumseq-app .ds-toolbar-left{border-right:1px solid var(--ds-brown-600);flex-shrink:0;margin-right:2px;padding-right:14px}.drumseq-app .ds-toolbar-center{flex:1 1 0;flex-wrap:wrap;justify-content:center;min-width:0;row-gap:6px}.drumseq-app .ds-toolbar-center .ds-control-group+.ds-control-group{border-left:1px solid hsla(0,0%,100%,.12);margin-left:2px;padding-left:var(--ds-toolbar-gap-groups)}.drumseq-app .ds-toolbar-right{border-left:1px solid var(--ds-brown-600);flex-shrink:0;margin-left:2px;padding-left:14px}.drumseq-app .ds-toolbar-right .ds-control-group+.ds-control-group{border-left:1px solid hsla(0,0%,100%,.12);margin-left:2px;padding-left:var(--ds-toolbar-gap-groups)}.drumseq-app .ds-title{color:var(--ds-gold);font-family:var(--ds-font-heading);font-size:20px;letter-spacing:2px;line-height:1;text-shadow:0 0 12px rgba(255,215,0,.2);white-space:nowrap}.drumseq-app .ds-title-accent{color:#fff}.drumseq-app .ds-control-group{align-items:center;display:flex;gap:var(--ds-toolbar-gap-label)}.drumseq-app .ds-control-label{color:#f5f0e6;font-family:var(--ds-font-heading);font-size:13px;letter-spacing:2px;opacity:.95}.drumseq-app .ds-control-select{background:var(--ds-brown-700);border:1px solid hsla(0,0%,100%,.22);border-radius:5px;color:#fff;cursor:pointer;font-family:var(--ds-font-mono);font-size:11px;font-weight:600;max-width:min(100%,92px);min-width:56px;outline:none;padding:4px 6px;transition:all .15s}.drumseq-app .ds-control-select:hover{border-color:var(--ds-gold-dim)}.drumseq-app .ds-control-select:focus{border-color:var(--ds-gold);box-shadow:0 0 0 2px var(--ds-gold-glow)}.drumseq-app .ds-control-select optgroup,.drumseq-app .ds-control-select option{background:var(--ds-brown-700);color:#fff}.drumseq-app .ds-toggle-group{border:1px solid var(--ds-brown-500);border-radius:4px;display:flex;overflow:hidden}.drumseq-app .ds-toggle-btn{align-items:center;background:var(--ds-brown-700);border:none;color:#f0ebe3;cursor:pointer;display:flex;font-family:var(--ds-font-heading);font-size:11px;gap:4px;justify-content:center;letter-spacing:1px;min-height:28px;padding:5px 8px;transition:all .15s}.drumseq-app .ds-toggle-btn:not(:last-child){border-right:1px solid var(--ds-brown-600)}.drumseq-app .ds-toggle-btn:hover{background:var(--ds-brown-600);color:var(--ds-gold)}.drumseq-app .ds-toggle-btn.active{background:var(--ds-gold);color:var(--ds-brown-900);font-weight:700}.drumseq-app .ds-toggle-btn svg{flex-shrink:0}.drumseq-app .ds-sm-btn{align-items:center;background:var(--ds-brown-700);border:1px solid hsla(0,0%,100%,.2);border-radius:5px;color:#fff;cursor:pointer;display:flex;font-family:var(--ds-font-mono);font-size:15px;height:28px;justify-content:center;line-height:1;transition:all .12s;width:28px}.drumseq-app .ds-sm-btn:hover{background:var(--ds-brown-600);border-color:var(--ds-gold-dim);color:var(--ds-gold)}.drumseq-app .ds-sm-btn:active{transform:scale(.9)}.drumseq-app .ds-sm-btn:disabled{background:var(--ds-brown-700);border-color:var(--ds-brown-600);color:var(--ds-text-on-brown-muted);cursor:not-allowed;opacity:.3}.drumseq-app .ds-bars-control,.drumseq-app .ds-zoom-controls{align-items:center;display:flex;gap:6px}.drumseq-app .ds-bars-value,.drumseq-app .ds-zoom-value{color:#fff;font-family:var(--ds-font-mono);font-size:12px;font-weight:600;min-width:28px;text-align:center}.drumseq-app .ds-sequencer-body{display:flex;flex:1;min-height:0;overflow:hidden}.drumseq-app .ds-track-panel{background:var(--ds-brown-800);border-right:2px solid var(--ds-brown-600);display:flex;flex-direction:column;flex-shrink:0;min-width:var(--ds-panel-w);width:var(--ds-panel-w)}.drumseq-app .ds-timeline-corner{align-items:center;background:var(--ds-brown-900);border-bottom:1px solid var(--ds-brown-600);display:flex;height:var(--ds-timeline-h);justify-content:center;min-height:var(--ds-timeline-h)}.drumseq-app .ds-corner-label{color:var(--ds-text-on-brown-muted);font-family:var(--ds-font-heading);font-size:11px;letter-spacing:3px}.drumseq-app .ds-track-list{flex:1;overflow-y:auto;scrollbar-width:none}.drumseq-app .ds-track-list::-webkit-scrollbar{display:none}.drumseq-app .ds-track-row{align-items:center;border-bottom:1px solid var(--ds-brown-700);cursor:default;display:flex;gap:5px;height:var(--ds-track-h);padding:0 6px;transition:background .1s}.drumseq-app .ds-track-row:hover{background:var(--ds-brown-700)}.drumseq-app .ds-track-color-bar{border-radius:2px;flex-shrink:0;height:22px;width:4px}.drumseq-app .ds-track-name{color:var(--ds-text-on-brown-dim);flex:1;font-family:var(--ds-font-heading);font-size:14px;letter-spacing:1.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drumseq-app .ds-track-name.editing{background:var(--ds-brown-900);border:1px solid var(--ds-gold);border-radius:3px;color:var(--ds-gold);cursor:text;font-family:var(--ds-font-mono);font-size:10px;outline:none;padding:1px 4px}.drumseq-app .ds-track-btns{display:flex;flex-shrink:0;gap:2px}.drumseq-app .ds-track-btn{align-items:center;background:transparent;border:1px solid var(--ds-brown-600);border-radius:2px;color:var(--ds-text-on-brown-muted);cursor:pointer;display:flex;font-family:var(--ds-font-heading);font-size:10px;height:18px;justify-content:center;letter-spacing:.5px;transition:all .1s;width:20px}.drumseq-app .ds-track-btn:hover{border-color:var(--ds-gold-dim);color:var(--ds-gold-dim)}.drumseq-app .ds-track-btn.mute-active{background:#d32f2f;border-color:#d32f2f;color:#fff}.drumseq-app .ds-track-btn.solo-active{background:var(--ds-gold);border-color:var(--ds-gold);color:var(--ds-brown-900)}.drumseq-app .ds-track-edit-btn{font-size:8px;letter-spacing:.3px;min-width:34px;padding:0 4px;width:auto}.drumseq-app .ds-track-delete-btn{color:hsla(0,0%,100%,.55);font-size:14px;font-weight:600;line-height:1}.drumseq-app .ds-track-delete-btn:hover{background:rgba(244,67,54,.12);border-color:rgba(244,67,54,.85);color:#f44336}.drumseq-app .ds-track-add-row{border-top:1px solid var(--ds-brown-700);display:flex;flex-direction:column;gap:5px;padding:6px 6px 8px}.drumseq-app .ds-add-track-select{background:var(--ds-brown-700);border:1px solid hsla(0,0%,100%,.22);border-radius:4px;box-sizing:border-box;color:#fff;cursor:pointer;font-family:var(--ds-font-body);font-size:10px;font-weight:600;padding:4px 3px;width:100%}.drumseq-app .ds-add-track-select option{background:var(--ds-brown-800);color:#fff}.drumseq-app .ds-add-track-btn{align-items:center;background:transparent;border:1px dashed var(--ds-brown-500);border-radius:4px;color:#e8dfd0;cursor:pointer;display:flex;font-family:var(--ds-font-heading);font-size:11px;gap:4px;justify-content:center;letter-spacing:1.5px;padding:5px 4px;transition:all .15s;width:100%}.drumseq-app .ds-add-track-btn:hover{background:var(--ds-gold-glow);border-color:var(--ds-gold);color:var(--ds-gold)}.drumseq-app .ds-grid-area{display:flex;flex:1;flex-direction:column;min-width:0;overflow:hidden}.drumseq-app .ds-timeline-canvas{border-bottom:1px solid var(--ds-brown-600);cursor:default;display:block;height:var(--ds-timeline-h);min-height:var(--ds-timeline-h);width:100%}.drumseq-app .ds-grid-scroll{flex:1;overflow-x:auto;overflow-y:hidden}.drumseq-app .ds-grid-scroll::-webkit-scrollbar{height:10px}.drumseq-app .ds-grid-scroll::-webkit-scrollbar-track{background:var(--ds-brown-800)}.drumseq-app .ds-grid-scroll::-webkit-scrollbar-thumb{background:var(--ds-brown-500);border:2px solid var(--ds-brown-800);border-radius:5px}.drumseq-app .ds-grid-scroll::-webkit-scrollbar-thumb:hover{background:var(--ds-gold-dim)}.drumseq-app .ds-grid-canvas{cursor:crosshair;display:block;touch-action:none}.drumseq-app .ds-grid-canvas.tool-move{cursor:default}.drumseq-app .ds-velocity-popup{align-items:center;background:var(--ds-brown-800);border:2px solid var(--ds-gold);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.6),0 0 16px var(--ds-gold-glow);display:flex;flex-direction:column;gap:4px;min-width:38px;padding:8px 6px;position:fixed;z-index:500}.drumseq-app .ds-vel-label{color:var(--ds-text-on-brown-muted);font-family:var(--ds-font-heading);font-size:10px;letter-spacing:2px}.drumseq-app .ds-vel-slider{accent-color:var(--ds-gold);cursor:pointer;direction:rtl;height:85px;width:20px;writing-mode:vertical-lr}.drumseq-app .ds-vel-value{color:var(--ds-gold);font-family:var(--ds-font-mono);font-size:10px;font-weight:600}.drumseq-app .ds-status-bar{align-items:center;background:var(--ds-brown-900);border-top:1px solid var(--ds-brown-600);display:flex;flex-shrink:0;height:var(--ds-status-h);justify-content:space-between;min-height:var(--ds-status-h);padding:0 10px}.drumseq-app .ds-status-text{color:var(--ds-text-on-brown-muted);font-family:var(--ds-font-mono);font-size:10px;letter-spacing:.3px}@media (max-width:1100px){.drumseq-app .ds-toolbar{flex-wrap:wrap;gap:10px;height:auto;min-height:auto;padding:8px 12px;row-gap:10px}.drumseq-app .ds-toolbar-left{border:none;margin:0;padding-right:8px}.drumseq-app .ds-toolbar-right{border:none;margin:0;padding-left:0}.drumseq-app .ds-toolbar-center .ds-control-group+.ds-control-group,.drumseq-app .ds-toolbar-right .ds-control-group+.ds-control-group{margin-left:0;padding-left:10px}.drumseq-app{--ds-panel-w:108px}.drumseq-app .ds-control-label{display:none}}