*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #343E1B;--surface: #0000006e;--surface2: #0000003d;--surface-alt: #282b22;--border: #373a2f;--border-beat: #454838;--active: #e8e5d0;--active-dim: rgba(232, 229, 208, .2);--playhead: #ffffff;--playhead-dim: rgba(255, 255, 255, .15);--solo-color: #8fb08a;--mute-color: #e04444;--play-color: #8fa84c;--text: #ffffffc9;--text-dim: #ffffff8a;--muted-color: #373a2f;--danger: #e04444;--header-border: #373a2f;--accent-orange: #c87a38;font-family:Geist,Segoe UI,system-ui,sans-serif;font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased}html,body{height:100%;background:var(--bg);color:var(--text)}#root{min-height:100vh;display:flex;flex-direction:column}button{cursor:pointer;border:none;background:none;color:inherit;font:inherit;touch-action:manipulation}input[type=range]{cursor:pointer;accent-color:var(--accent-orange);touch-action:manipulation}select{cursor:pointer;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:3px 6px;font:inherit}.export-overlay{position:fixed;inset:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.export-modal{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:24px;width:340px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:18px}.export-modal-header{display:flex;align-items:center;justify-content:space-between}.export-modal-title{font-size:15px;font-weight:700;color:var(--text)}.export-close-btn{width:28px;height:28px;border-radius:4px;color:var(--text-dim);display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}.export-close-btn:hover{background:var(--surface2);color:var(--text)}.export-option{display:flex;flex-direction:column;gap:7px}.export-option-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim)}.bitrate-group{display:flex;gap:6px}.bitrate-pill{flex:1;padding:6px 0;border-radius:5px;border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--text-dim);text-align:center;cursor:pointer;transition:border-color .12s,color .12s,background .12s}.bitrate-pill:hover{border-color:var(--active);color:var(--active)}.bitrate-pill.selected{background:var(--active-dim);border-color:var(--active);color:var(--active)}.export-select{background:var(--surface2);border:1px solid var(--border);border-radius:5px;color:var(--text);font:inherit;font-size:12px;padding:6px 8px;cursor:pointer;width:100%}.export-select:focus{outline:1px solid var(--active)}.export-progress-wrap{display:flex;flex-direction:column;gap:6px}.export-progress-bar-track{width:100%;height:8px;background:var(--surface2);border-radius:4px;overflow:hidden}.export-progress-bar-fill{height:100%;background:var(--active);border-radius:4px;transition:width .2s ease}.export-progress-label{font-size:11px;color:var(--text-dim);text-align:center}.export-go-btn{padding:10px 0;border-radius:6px;background:var(--active);border:1px solid var(--active);color:#000;font-weight:700;font-size:13px;letter-spacing:.04em;text-align:center;transition:filter .15s,transform .08s;min-height:44px}.export-go-btn:hover:not(:disabled){filter:brightness(1.1)}.export-go-btn:active:not(:disabled){transform:scale(.98)}.export-go-btn:disabled{opacity:.45;cursor:not-allowed}.transport{display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px;padding:0 16px;background:#ffffff14;border-bottom:1px solid var(--border);flex-shrink:0;margin:1px 1px 0;box-shadow:inset 1px 1px 1px #ffffff40}.transport-logo{flex-shrink:0;display:flex;align-items:center;background:linear-gradient(to bottom,#42424217,#0000004d 78.8%,#34343480);border:1px solid #000;box-shadow:inset 1px 1px 1px #ffffff40;border-radius:999px;padding:0 12px}.transport-logo-img{height:33px;width:auto;display:block}.transport-center-box{display:flex;align-items:center;gap:8px;flex-shrink:0}.play-btn{display:flex;align-items:center;justify-content:center;padding:5px 14px;border-radius:99px;background:linear-gradient(to bottom,#424242,#000 78.8%,#343434);border:1px solid black;color:#fff;cursor:pointer;flex-shrink:0;box-shadow:inset 1px 2px 2px #ffffff73;transition:opacity .12s,transform .08s;align-self:stretch}.play-btn.playing{color:var(--danger)}.play-btn:hover{opacity:.8}.play-btn:active{transform:scale(.94)}.t-bpm-pill{display:flex;align-items:center;gap:4px;padding:5px;border-radius:99px;border:1px solid rgb(0 0 0 / 13%);background:linear-gradient(to bottom,#ffffff05,#ffffff0f);box-shadow:inset 1px 1px 1px #ffffff40}.t-bpm-label-pill{display:flex;align-items:center;justify-content:center;padding:0 12px;height:28px;border-radius:99px}.t-label{font:500 13px/1 Geist,Segoe UI,system-ui,sans-serif;color:#ffffffe6;white-space:nowrap;letter-spacing:0}.t-bpm-value-pill{display:flex;align-items:center;justify-content:center;padding:1px 13px;height:28px;border-radius:14px;background:#2d2d2d33;border:none;box-shadow:inset 1px 1px 1px #00000045}.bpm-input{width:36px;background:transparent;border:none;color:#ffffffbf;font:500 13px/1 Geist,Segoe UI,system-ui,sans-serif;text-align:center;-moz-appearance:textfield;appearance:textfield;padding:0}.bpm-input::-webkit-outer-spin-button,.bpm-input::-webkit-inner-spin-button{-webkit-appearance:none}.bpm-input:focus{outline:none;color:var(--active)}.transport-actions{display:flex;align-items:center;gap:0;flex-shrink:0;position:relative}.t-toolbar-pill{display:flex;align-items:center;gap:4px;padding:5px;border-radius:99px;border:1px solid rgb(0 0 0 / 13%);background:linear-gradient(to bottom,#ffffff05,#ffffff0f);box-shadow:inset 1px 1px 1px #ffffff40}.t-toolbar-collapsed{display:none}.t-action-btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 17px;border-radius:99px;border:1px solid rgba(255,255,255,0);background:linear-gradient(to bottom,#ffffff05,#ffffff0f);color:#ffffff80;font:600 10px/15px Geist,Segoe UI,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;box-shadow:inset 1px 1px 1px #ffffff40;transition:color .12s;white-space:nowrap;align-self:stretch}.t-action-btn:hover{color:#ffffffd9}.t-action-btn.active{color:var(--playhead)}.t-action-btn:disabled{opacity:.3;cursor:not-allowed}.t-action-btn.t-icon-btn{padding:4px 10px;border:1px solid rgba(0,0,0,.25);color:#fff;font-size:14px}.t-action-btn.t-icon-btn:hover{color:#ffffffe6}.t-dropdown-wrap{position:relative;align-self:stretch;display:flex;align-items:center}.t-dropdown{position:absolute;top:calc(100% + 6px);right:0;z-index:200;min-width:140px;background:#000;border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:4px;box-shadow:0 6px 20px #0009}.t-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;border-radius:5px;background:transparent;color:var(--text-dim);font:600 11px/1 Geist,Segoe UI,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;text-align:left;transition:background .1s,color .1s}.t-dropdown-item:hover{background:#ffffff1a;color:#fff}.t-submenu-sep{height:1px;background:var(--border);margin:3px 8px}@media(max-width:768px){.transport{padding:6px 12px;height:auto;min-height:48px;flex-wrap:wrap;gap:8px}.bpm-input{width:30px}.desktop-toolbar{display:none}.t-toolbar-collapsed{display:block}}.step-grid{display:flex;gap:12px;height:100%;width:100%;min-width:max-content}.step-group{display:flex;gap:5px;flex:1}.step-btn{flex:1;height:100%;min-height:60px;min-width:24px;border-radius:5px;overflow:hidden;cursor:pointer;transition:transform .06s;position:relative;background:#00000030;border:1px solid #00000012;box-shadow:none}.step-group-alt .step-btn{background:#ffffff21;border:1px solid #00000012}.step-btn.active{background:#ffffff69;border-color:transparent}.step-btn.active:after{content:"";position:absolute;top:25%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:#1e201880;pointer-events:none}.step-btn.current:not(.active){background:#00000080;border-color:transparent}.step-btn.active.current{background:#e8e5d0;box-shadow:0 0 12px #e8e5d066}.step-btn:active{transform:scale(.93)}.step-btn:focus-visible{outline:2px solid var(--active);outline-offset:1px}.channel-row.is-muted .step-btn.active,.channel-row.is-solo-silenced .step-btn.active{background:#2a2d22;border-color:#3a3d30;box-shadow:none}.roll-menu{position:fixed;z-index:1000;display:flex;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:6px;box-shadow:0 4px 16px #0009}.roll-menu-btn{font:700 11px/1 monospace;padding:5px 8px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text-dim);cursor:pointer;transition:color .1s,border-color .1s}.roll-menu-btn:hover{color:var(--text);border-color:var(--text-dim)}.roll-menu-btn.active{color:var(--active);border-color:var(--active)}@media(max-width:768px){.step-btn{min-height:48px}.step-grid{gap:8px}.step-group{gap:3px}}.channel-row{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;overflow:hidden;gap:0}.channel-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 8px 9px;min-height:54px;background:#ffffff26;border-bottom:1px solid rgba(255,255,255,.23);box-shadow:0 1px 2px #0000000d}.ch-drag-handle{display:flex;align-items:center;justify-content:center;width:18px;flex-shrink:0;color:var(--border-beat);cursor:grab;transition:color .12s;padding:0 2px}.ch-drag-handle:hover{color:var(--text-dim)}.channel-row.is-dragging{opacity:.4}.channel-row.is-dragging .ch-drag-handle{cursor:grabbing}.ch-icon-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:5px;border:1px solid transparent;background:#00000040;color:var(--text-dim);font:600 11px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.06em;cursor:pointer;flex-shrink:0;transition:color .12s,border-color .12s}.mute-btn{font-size:13px}.ch-icon-btn--lg{width:36px;height:36px;font-size:14px;background:linear-gradient(to bottom,#ffffff03,#ffffff08);border:.35px solid rgba(0,0,0,.15)}.ch-icon-btn:hover{color:var(--text);border-color:var(--text-dim)}.ch-icon-btn.soloed{color:#fff;border-color:#00000030;background:#00000040}.ch-icon-btn.muted{color:#fff;background:#950000;border-color:transparent}.ch-icon-btn.danger:hover{color:var(--danger);border-color:var(--danger)}.ch-name-wrap{flex:1;min-width:0}.ch-name{width:100%;font:600 14px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.275px;color:var(--text);background:transparent;border:1px solid transparent;border-radius:3px;padding:2px 4px;min-width:0;cursor:default;transition:border-color .12s,background .12s}.ch-name:focus{border-color:var(--border-beat);background:var(--surface2);outline:none;cursor:text}.ch-right-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}.ch-ctx-wrap{position:relative}.ch-ctx-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:300;min-width:130px;background:#000;border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:4px;box-shadow:0 6px 20px #0009}.ch-ctx-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:none;border-radius:5px;background:transparent;color:var(--text-dim);font:600 11px/1 Geist,Segoe UI,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;text-align:left;transition:background .1s,color .1s}.ch-ctx-item:hover{background:#ffffff1a;color:#fff}.ch-ctx-item.danger:hover{background:#e044441a;color:var(--danger)}.ch-ctx-sep{height:1px;background:var(--border);margin:3px 6px}.ch-grid-card{height:100%;padding:8px;display:flex;overflow-x:auto;overflow-y:hidden;background:#ffffff14}.ch-expand-bar{width:100%;background:#1b1d1840;font:600 10px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#848484a1;text-align:center;cursor:pointer;flex-shrink:0;transition:color .12s;margin:1px;padding:4px 8px}.ch-expand-bar:hover{color:var(--text)}.ch-expand-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}.ch-expand-wrap.open{grid-template-rows:1fr}.ch-expand-inner{overflow:hidden}.ch-subrows{padding:8px;background:#ffffff0a;border-top:1px solid #ffffff33;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden}.ch-subrow{display:flex;align-items:stretch;gap:8px;height:100%;flex-direction:column;justify-content:space-between;padding:8px 0}.ch-subrow-label{width:60px;flex-shrink:0;font:600 8px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center}.ch-subrow-steps{flex:1;display:flex;gap:12px;min-width:max-content}.ch-subrow-group{display:flex;gap:5px;flex:1}.ch-subrow-cell{flex:1;min-width:24px;display:flex;align-items:end;justify-content:center;font:600 11px/1 monospace;color:var(--text);background:var(--surface);border-bottom:1px solid #ffffff45;border-radius:4px;cursor:ns-resize;-webkit-user-select:none;user-select:none;touch-action:none;transition:border-color .1s;height:44px;padding-bottom:6px}.ch-drag-bubble{position:fixed;transform:translate(-50%,-100%);margin-top:-6px;z-index:9999;pointer-events:none;background:#000;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:5px;padding:4px 7px;font:600 11px/1 monospace;white-space:nowrap;box-shadow:0 2px 8px #00000080}.ch-subrow-cell:hover{border-color:var(--text-dim)}.ch-subrow-cell.inactive{color:var(--text-dim);background:var(--surface2)}.ch-subrow-cell.dragging{border-color:var(--active);color:var(--active)}.ch-subrow-cell.roll-cell{cursor:pointer;color:var(--text);height:24px;align-items:center;padding-bottom:0}.ch-subrow-cell.roll-cell.active-roll{border-color:var(--accent-orange)}.ch-subrow-cell.roll-cell.inactive{color:var(--text-dim)}.ch-controls-bar{display:flex;align-items:center;justify-content:flex-start;gap:32px;padding:8px 16px;background:#ffffff0d;border-top:1px solid rgba(255,255,255,.25)}.ch-ctrl-group{display:flex;align-items:center;gap:6px;flex-shrink:0}.ch-ctrl-label{font:600 10px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.05em;color:#ffffff80;white-space:nowrap;width:auto}.ch-ctrl-value{font:600 10px/1 monospace;color:var(--text);min-width:24px}.ch-ctrl-slider{-webkit-appearance:none;appearance:none;width:120px;height:8px;border-radius:999px;background:#00000026;box-shadow:inset 0 1px 3px #000;outline:none;cursor:pointer;accent-color:var(--accent-orange)}.ch-ctrl-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:21px;border-radius:2px;background:linear-gradient(to bottom,#333,#111 50%,#000);border:1px solid #444;box-shadow:0 4px 6px #0000001a,0 10px 15px #0000001a;cursor:pointer}.ch-ctrl-slider::-moz-range-thumb{width:16px;height:21px;border-radius:2px;background:linear-gradient(to bottom,#333,#111 50%,#000);border:1px solid #444;cursor:pointer}.ch-controls-bar-actions{display:flex;gap:16px;align-items:center;flex-shrink:0;margin-left:auto}.ch-ctrl-pill-btn{display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 17px;height:32px;border-radius:99px;background:linear-gradient(to bottom,#424242,#000 78.8%,#343434);border:1px solid black;box-shadow:inset 1px 2px 2px #ffffff73;font:500 13px/1 Geist,Segoe UI,system-ui,sans-serif;color:#fff;cursor:pointer;white-space:nowrap;transition:color .12s,border-color .12s}.ch-ctrl-pill-btn:hover{color:var(--text);border-color:#ffffff4d}.ch-ctrl-pill-btn.danger:hover{color:var(--danger);border-color:var(--danger)}.channel-row.is-muted .ch-name,.channel-row.is-solo-silenced .ch-name{opacity:.5}@media(max-width:768px){.ch-icon-btn{width:22px;height:22px}.ch-ctrl-slider{width:60px}.ch-subrow-cell{height:48px}.ch-subrow-steps{gap:8px}.ch-subrow-group{gap:3px}}.pattern-bar{background:#ffffff21;border-bottom:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;gap:16px;flex-shrink:0;box-shadow:inset 1px 1px 1px #ffffff40;margin:1px 1px 0}.pattern-mode-seg{display:flex;align-items:center;gap:4px;padding:5px;border-radius:99px;border:1px solid rgb(0 0 0 / 13%);background:linear-gradient(to bottom,#ffffff05,#ffffff0f);box-shadow:inset 1px 1px 1px #ffffff40;flex-shrink:0}.pattern-mode-btn{height:30px;padding:1px 13px;border-radius:17px;font:500 13px/1 Geist,Segoe UI,system-ui,Geist,Segoe UI,system-ui,sans-serif;background:#2d2d2d33;color:#ffffffbf;border:none;cursor:pointer;box-shadow:inset 1px 1px 1px #00000045;transition:color .1s;white-space:nowrap}.pattern-mode-btn.active{background:linear-gradient(to bottom,#424242,#000 78.8%,#343434);border:1px solid black;color:#fff;box-shadow:inset 1px 2px 2px #ffffff73}.pattern-tabs-scroll{display:flex;align-items:center;gap:8px;padding:5px;border-radius:99px;border:1px solid rgb(0 0 0 / 13%);background:linear-gradient(to bottom,#ffffff05,#ffffff0f);box-shadow:inset 1px 1px 1px #ffffff40;overflow-x:auto;scrollbar-width:none;flex-shrink:0}.pattern-tabs-scroll::-webkit-scrollbar{display:none}.pattern-tab{position:relative;display:flex;align-items:center;justify-content:center;width:31px;height:30px;border-radius:17px;border:1px solid rgba(0,0,0,.2);background:linear-gradient(to bottom,#42424233,#0003 78.8%,#34343433);box-shadow:inset 1px 1px 1px #00000045;cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0;transition:opacity .1s}.pattern-tab:hover{opacity:.85}.pattern-tab.active{background:linear-gradient(to bottom,#424242,#000 78.8%,#343434);border-color:#000;box-shadow:inset 1px 1px 1px #ffffff40}.pattern-tab.playing:after{content:"";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:3px;height:3px;border-radius:50%;background:var(--play-color)}.pattern-tab-name{font:600 10px/15px Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.5px;color:#fff;text-transform:uppercase}.pattern-tab-add{display:flex;align-items:center;justify-content:center;width:31px;height:30px;border-radius:17px;border:1px solid rgba(0,0,0,.2);background:linear-gradient(to bottom,#42424233,#0003 78.8%,#34343433);box-shadow:inset 1px 1px 1px #00000045;color:#fff;font:600 13px/1 Geist,Segoe UI,system-ui,sans-serif;cursor:pointer;flex-shrink:0;transition:opacity .1s}.pattern-tab-add:hover:not(:disabled){opacity:.8}.pattern-tab-add:disabled{opacity:.3;cursor:not-allowed}.pattern-bar-right{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}.pb-right-group{display:flex;align-items:center;gap:12px;flex-shrink:0}.pb-group{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:120px}.pb-info{display:flex;justify-content:space-between;width:100%;white-space:nowrap}.pb-label{font:600 10px/15px Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.5px;color:#ffffff80}.pb-value{font:600 10px/15px Geist,Segoe UI,system-ui,sans-serif;color:#fff}.pb-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:9999px;background:linear-gradient(to right,#ff8002 var(--val, 50%),rgba(255,255,255,.13) var(--val, 50%));box-shadow:inset 0 1px 3px #000;outline:none;cursor:pointer}.pb-slider::-webkit-slider-runnable-track{height:8px;border-radius:9999px;background:linear-gradient(to right,#ff8002 var(--val, 50%),rgba(255,255,255,.13) var(--val, 50%));box-shadow:inset 0 1px 3px #000}.pb-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:21px;border-radius:2px;margin-top:-6.5px;background:linear-gradient(to bottom,#333,#111 50%,#000);border:1px solid #444;box-shadow:0 4px 6px #0000001a,0 10px 15px #0000001a;cursor:pointer}.pb-slider::-moz-range-thumb{width:16px;height:21px;border-radius:2px;background:linear-gradient(to bottom,#333,#111 50%,#000);border:1px solid #444;box-shadow:0 4px 6px #0000001a,0 10px 15px #0000001a;cursor:pointer}.steps-pill{display:flex;align-items:center;gap:4px;padding:5px;border-radius:99px;border:1px solid rgb(0 0 0 / 13%);background:linear-gradient(to bottom,#ffffff05,#ffffff0f);box-shadow:inset 1px 1px 1px #ffffff40}.steps-pill-label{display:flex;align-items:center;justify-content:center;padding:0 12px;height:30px;border-radius:17px;font:500 13px/1 Geist,Segoe UI,system-ui,Geist,Segoe UI,system-ui,sans-serif;color:#ffffffbf;white-space:nowrap}.steps-pill-select-wrap{display:flex;align-items:center;position:relative}.steps-select{height:30px;padding:1px 13px;border-radius:17px;border:1px solid black;background:linear-gradient(to bottom,#424242,#000 78.8%,#343434);box-shadow:inset 1px 2px 2px #ffffff73;color:#fff;font:400 13px/1 Geist,Segoe UI,system-ui,sans-serif;cursor:pointer;appearance:auto;-webkit-appearance:auto}.pattern-tab.draggable{cursor:grab}.pattern-tab.draggable:active{cursor:grabbing}.project-title-wrap{flex-shrink:0;display:flex;align-items:center}.project-title{font:700 10px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);cursor:text;padding:3px 7px;border-radius:4px;transition:color .12s,background .12s;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}.project-title:hover{color:var(--text);background:var(--surface2)}.project-title-input{font:700 10px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:var(--surface2);border:1px solid var(--active);border-radius:4px;color:var(--text);padding:2px 7px;outline:none;width:120px}@media(max-width:900px){.pb-group{width:90px}}@media(max-width:768px){.pattern-bar{padding:12px;gap:8px;height:auto;min-height:42px;flex-wrap:wrap}.pattern-bar-right{display:contents}.pb-right-group{flex-basis:100%;justify-content:flex-start}}.pattern-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:border-color .15s,background .15s;position:relative;display:flex;flex-direction:column;gap:10px;min-height:100px}.pattern-card:hover{border-color:var(--border-beat);background:var(--surface-alt)}.pattern-card.active{border-color:var(--active)}.pattern-card.playing{border-color:var(--play-color)}.pc-header{display:flex;align-items:center;gap:10px}.pc-name{font:800 18px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.06em;color:var(--text);flex-shrink:0}.pc-meta{display:flex;gap:8px;flex:1}.pc-bpm,.pc-steps{font:600 9px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:2px 5px}.pc-remove{margin-left:auto;width:22px;height:22px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .1s,border-color .1s;flex-shrink:0}.pc-remove:hover{color:var(--danger);border-color:var(--danger)}.pattern-card.dragging{opacity:.5}.pc-playing-badge{position:absolute;top:10px;right:10px;font:700 8px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--play-color);background:#8fa84c1a;border:1px solid var(--play-color);border-radius:3px;padding:2px 5px}.pattern-card-create{background:transparent;border:1.5px dashed var(--border);border-radius:10px;padding:14px;cursor:pointer;min-height:100px;display:flex;align-items:center;justify-content:center;transition:border-color .15s;color:var(--text-dim);font:inherit}.pattern-card-create:hover{border-color:var(--active);color:var(--active)}.pattern-card-create-label{font:700 12px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}.backing-panel{border-top:1px solid var(--border);padding:12px 20px 16px;background:var(--surface)}.backing-panel-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.backing-panel-title{font:700 11px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);flex:1}.backing-add-btn{font:700 11px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--border);border-radius:5px;background:transparent;color:var(--text-dim);cursor:pointer;transition:color .12s,border-color .12s}.backing-add-btn:hover{color:var(--text);border-color:#444}.backing-empty{font:400 11px/1.5 Geist,Segoe UI,system-ui,sans-serif;color:var(--text-dim);margin:0;opacity:.6}.backing-track-list{display:flex;flex-direction:column;gap:6px}.backing-track{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px}.backing-track.inactive{opacity:.5}.backing-active-btn{font-size:14px;line-height:1;width:22px;height:22px;border:none;background:transparent;cursor:pointer;color:var(--text-dim);padding:0;flex-shrink:0;transition:color .12s}.backing-active-btn.on{color:var(--playhead)}.backing-name{font:600 11px/1 Geist,Segoe UI,system-ui,sans-serif;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.backing-vol-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}.backing-vol-label{font:700 9px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}.backing-vol-slider{-webkit-appearance:none;appearance:none;width:80px;height:3px;border-radius:2px;background:var(--border);outline:none;cursor:pointer}.backing-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--text);cursor:pointer}.backing-vol-value{font:600 10px/1 monospace;color:var(--text-dim);min-width:28px;text-align:right}.backing-remove-btn{width:22px;height:22px;border:none;background:transparent;cursor:pointer;color:var(--text-dim);font-size:12px;line-height:1;padding:0;flex-shrink:0;transition:color .12s}.backing-remove-btn:hover{color:var(--danger)}.npm-backdrop{position:fixed;inset:0;z-index:1000;background:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}.npm-card{width:340px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 60px #0009}.npm-title{font:700 14px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin:0}.npm-label{display:flex;flex-direction:column;gap:6px;font:600 10px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim)}.npm-input,.npm-select{font:400 13px/1 Geist,Segoe UI,system-ui,sans-serif;color:var(--text);background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:7px 10px;outline:none;transition:border-color .12s}.npm-input:focus,.npm-select:focus{border-color:var(--active)}.npm-select{cursor:pointer}.npm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.npm-btn{padding:7px 18px;font:600 11px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;border-radius:5px;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);cursor:pointer;transition:color .12s,background .12s}.npm-btn:hover{color:var(--text);background:var(--surface)}.npm-btn--primary{background:var(--active);border-color:var(--active);color:#000}.npm-btn--primary:hover{filter:brightness(1.1);color:#000}.help-backdrop{position:fixed;inset:0;z-index:1000;background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}.help-card{width:380px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px #00000080;overflow:hidden}.help-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--border)}.help-title{font:600 14px/1 Geist,Segoe UI,system-ui,sans-serif;color:var(--text);letter-spacing:.02em}.help-close{background:none;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;padding:2px 4px;border-radius:4px;line-height:1}.help-close:hover{color:var(--text)}.help-body{padding:16px;display:flex;flex-direction:column;gap:16px}.help-section h3{font:600 11px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin:0 0 6px}.help-section p{font:400 13px/1.5 Geist,Segoe UI,system-ui,sans-serif;color:var(--text);margin:0}.help-section ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}.help-section li{font:400 13px/1.5 Geist,Segoe UI,system-ui,sans-serif;color:var(--text);display:flex;align-items:center;gap:8px}kbd{font:500 11px/1 Geist Mono,monospace;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:2px 6px;color:var(--text);white-space:nowrap}.app{display:flex;flex-direction:column;min-height:100vh;padding:0 0 40px;background:var(--bg)}.sticky-bar{position:sticky;top:0;z-index:10;flex-shrink:0;background:var(--bg)}.steps-row{display:flex;align-items:center;margin:1px 1px 0;padding:0 34px;height:20px;background:#00000030;gap:8px;box-shadow:inset 1px 1px #fff3}.playhead-pip{flex:1;height:8px;border-radius:3px;background:#17171766;transition:background .05s;box-shadow:0 0 2px #434a2e}.playhead-pip.active{background:var(--playhead)}.app-body{flex:1;padding:12px 24px;display:flex;flex-direction:column;gap:8px;position:relative;margin:1px 1px 0;box-shadow:inset 1px 1px 1px #ffffff40}.drag-overlay{position:absolute;inset:8px;border:2px dashed var(--active);border-radius:8px;background:color-mix(in srgb,var(--active) 6%,transparent);display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none}.drag-overlay-label{font:700 13px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--active)}.channel-drop-indicator{height:2px;background:var(--active);border-radius:1px;margin:-1px 0;pointer-events:none}.add-channel-btn{border:1.5px dashed var(--border);padding:10px 24px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);background:transparent;border-radius:8px;display:flex;align-items:center;gap:8px;transition:border-color .15s,color .15s;margin-top:4px}.add-channel-btn:hover:not(:disabled){border-color:var(--active);color:var(--active)}.add-channel-btn:disabled{opacity:.4;cursor:not-allowed}.restore-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);font:700 11px/1 Geist,Segoe UI,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px;border-radius:8px;z-index:100;pointer-events:none;animation:toast-in .2s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.song-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}@media(max-width:768px){.steps-row{padding:0 8px}.app-body{padding:8px 12px;gap:6px}.add-channel-btn{min-height:44px;justify-content:center}}