[hidden]{display:none!important}
:root{--bg:#08090a;--panel:#101214;--line:#303438;--text:#f1f1ef;--muted:#7f858a;--chrome:#c9cdd0;--hot:#e6e6e2}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}button,input{font:inherit}.gate{min-height:100vh;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 20%,#24282b 0,#0d0f10 32%,#060708 70%)}.gate>div{max-width:520px;padding:28px}.mark{width:70px;height:70px;margin:auto;display:grid;place-items:center;border:1px solid #777;border-radius:18px;background:linear-gradient(145deg,#2c3033,#090a0b);font-weight:900;letter-spacing:.12em}.gate h1{letter-spacing:.18em;font-size:25px;margin:20px 0 8px}.gate p,.gate small{color:var(--muted)}.gate button{display:block;margin:26px auto 12px;padding:14px 20px;border:1px solid #aeb2b4;border-radius:8px;background:#e7e7e3;color:#08090a;font-weight:900;cursor:pointer}main{min-height:100vh}header{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#0b0d0e}header>div:first-child{display:grid;gap:3px}header b{letter-spacing:.14em}header span{font-size:9px;color:var(--muted)}.transport{display:flex;align-items:center;gap:8px}.transport button,.tool{border:1px solid var(--line);background:#15181a;color:var(--text);padding:8px 10px;border-radius:6px}.transport input[type=number]{width:62px;background:#0b0d0e;color:#fff;border:1px solid var(--line);padding:6px}.transport label{font-size:9px;color:var(--muted)}#save{padding:8px;border:1px solid #37413c;border-radius:6px}.field{min-height:calc(100vh - 64px);display:grid;grid-template-columns:92px 1fr 190px}.field>aside{border-right:1px solid var(--line);padding:12px;background:#0b0d0e}.tool{display:block;width:100%;margin-bottom:8px;font-size:9px}.tool.active{background:#d8d9d6;color:#090a0b}.disabled{opacity:.35}.center{padding:24px;max-width:1040px;width:100%;margin:auto}.section-title,.seq-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.section-title span,.seq-head b{font-size:11px;letter-spacing:.14em}.section-title small,.seq-head span{color:var(--muted);font-size:9px}.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:760px;margin:auto}.pad{aspect-ratio:1.35;border:1px solid #3b4044;border-radius:10px;background:linear-gradient(145deg,#24282b,#101214);color:#d9dcdd;box-shadow:inset 0 0 0 1px #090a0b;touch-action:manipulation}.pad:active,.pad.hit{background:#cfd1cf;color:#08090a;transform:translateY(1px)}.pad b{display:block;font-size:12px}.pad small{font-size:8px;opacity:.65}.seq-head{margin-top:28px}.steps{display:grid;grid-template-columns:repeat(16,1fr);gap:5px}.step{height:44px;border:1px solid #34383b;background:#121416;border-radius:5px;color:#62676a}.step.on{background:#c8cbc9;color:#08090a}.step.playing{outline:2px solid #fff}.right{border-left:1px solid var(--line)!important;border-right:0!important}.right h2{font-size:10px;letter-spacing:.16em}.readout{display:flex;justify-content:space-between;border-bottom:1px solid #222629;padding:12px 0;font-size:9px}.right p{color:var(--muted);font-size:9px;line-height:1.6;margin-top:25px}@media(max-width:760px){header{height:auto;padding:12px;align-items:flex-start;gap:10px}.transport{flex-wrap:wrap;justify-content:flex-end}.field{grid-template-columns:1fr}.field>aside:first-child{display:flex;border-right:0;border-bottom:1px solid var(--line);overflow:auto}.tool{width:auto;margin:0 6px 0 0}.right{display:none}.center{padding:14px}.pads{gap:7px}.pad{aspect-ratio:1.05}.steps{grid-template-columns:repeat(8,1fr)}#save{display:none}}.sample-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:760px;margin:0 auto 12px}.import{cursor:pointer;border:1px solid var(--line);border-radius:6px;background:#15181a;padding:8px 10px;font-size:9px;font-weight:800}.sample-bar span{font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:520px){.sample-bar{align-items:stretch;flex-direction:column}.import{text-align:center}}.pad.selected{outline:1px solid #f0f0f0;outline-offset:2px}.pad.selected small{color:#f0f0f0}.mixer-panel{max-width:760px;margin:24px auto 0;padding:14px;border:1px solid var(--line);border-radius:8px;background:#0d0f10}.mix-controls{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;align-items:center}.mix-controls label{display:grid;gap:6px;font-size:9px;color:var(--muted)}.mix-controls button{border:1px solid var(--line);background:#15181a;color:var(--text);padding:9px;border-radius:6px}.mix-controls button.active{background:#d8d9d6;color:#090a0b}@media(max-width:600px){.mix-controls{grid-template-columns:1fr 1fr}.mix-controls label{grid-column:span 2}}.sound-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.sound-controls label{display:grid;gap:6px;font-size:9px;color:var(--muted)}.sound-controls select{background:#101214;color:var(--text);border:1px solid var(--line);border-radius:5px;padding:7px}@media(max-width:600px){.sound-controls{grid-template-columns:1fr 1fr}}.step-editor{margin-top:10px;padding:10px;border:1px solid var(--line);display:flex;gap:12px;align-items:center;font-size:9px;color:var(--muted)}.step-editor label{display:flex;gap:6px;align-items:center}.step-editor select{background:#101214;color:var(--text);border:1px solid var(--line);padding:5px}@media(max-width:600px){.step-editor{flex-wrap:wrap}.step-editor>span{width:100%}}.wave-wrap{max-width:760px;margin:0 auto 14px;border:1px solid var(--line);border-radius:8px;background:#0b0d0e;padding:8px}.wave-wrap canvas{display:block;width:100%;height:92px;touch-action:none}.chop-actions{display:flex;gap:6px;margin-top:7px}.chop-actions button{border:1px solid var(--line);background:#15181a;color:var(--text);padding:6px 9px;border-radius:5px;font-size:8px}.chop-actions button:active{background:#d8d9d6;color:#090a0b}
/* v2.43 — flagship sampler workspace */
.workspace-tabs{display:flex;gap:4px;margin:0 0 16px;padding:4px;border:1px solid var(--line);border-radius:9px;background:#090b0c;overflow:auto}.workspace-tab{flex:1;min-width:88px;border:0;border-radius:6px;padding:9px 12px;background:transparent;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.12em}.workspace-tab.active{background:#d8d9d6;color:#08090a}.sampler-command{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;padding:12px 14px;border:1px solid #3a3e41;border-radius:10px;background:linear-gradient(180deg,#15181a,#0d0f10);box-shadow:inset 0 1px 0 #292d30}.sampler-command>div:first-child{display:grid;gap:4px}.sampler-command strong{font-size:11px;letter-spacing:.14em}.sampler-command small{font-size:8px;color:var(--muted);letter-spacing:.09em}.bank-strip{display:flex;gap:5px}.bank{width:36px;height:30px;border:1px solid #3b4044;border-radius:5px;background:#111315;color:#8d9397;font-weight:900}.bank.active{background:#cfd1cf;color:#08090a;border-color:#f1f1ef}.sampler-stage{display:grid;grid-template-columns:minmax(0,760px) 118px;gap:12px;justify-content:center;align-items:stretch}.sampler-stage .pads{width:100%;margin:0}.sampler-stage .pad{position:relative;min-height:102px;border-radius:7px;background:linear-gradient(145deg,#2b2f32,#111315 68%);box-shadow:inset 0 1px 0 #484d51,inset 0 -10px 24px #090a0b,0 2px 4px #050606}.sampler-stage .pad::after{content:"";position:absolute;inset:6px;border:1px solid #2f3437;border-radius:4px;pointer-events:none}.sampler-stage .pad.selected{outline:2px solid #d8d9d6;outline-offset:2px}.pad-actions{display:grid;grid-template-rows:repeat(6,1fr);gap:7px}.pad-actions button{border:1px solid #373c3f;border-radius:6px;background:linear-gradient(180deg,#1c2022,#101214);color:#c9cdcf;font-size:8px;font-weight:900;letter-spacing:.06em;box-shadow:inset 0 1px 0 #34393c}.pad-actions button:active{background:#d8d9d6;color:#08090a}.pad-actions #padSoundAction{border-color:#686d70}.wave-wrap{box-shadow:inset 0 1px 0 #24282b}.sample-bar{border-left:2px solid #9a9fa2;padding-left:10px}@media(max-width:900px){.sampler-stage{grid-template-columns:1fr}.pad-actions{grid-template-columns:repeat(6,1fr);grid-template-rows:1fr}.pad-actions button{min-height:42px}}@media(max-width:520px){.sampler-command{align-items:flex-start;flex-direction:column}.bank-strip{width:100%}.bank{flex:1}.workspace-tab{min-width:78px}.pad-actions{grid-template-columns:repeat(3,1fr)}.sampler-stage .pad{min-height:82px}}

.crunch-action{border-color:#8d7451!important;background:linear-gradient(180deg,#2a2319,#15120e)!important;color:#e5c997!important}.crunch-action span{display:block;margin-top:4px;font-size:7px;color:#a99473}.crunch-action.engaged{box-shadow:inset 0 0 0 1px #b49566,0 0 14px rgba(180,149,102,.16)!important}.crunch-action.engaged span{color:#f2d7a6}

#padReverseAction span{display:block;margin-top:4px;font-size:7px;color:#7f858a}#padReverseAction.engaged{border-color:#b8bdc0;background:linear-gradient(180deg,#303538,#171a1c);color:#fff;box-shadow:inset 0 0 0 1px #656b6f,0 0 12px rgba(220,225,228,.12)}#padReverseAction.engaged span{color:#fff}

.slice-readout{margin-left:auto;padding:5px 7px;border:1px solid #303438;border-radius:4px;background:#0a0c0d;color:#c9cdd0!important;font-size:8px!important;letter-spacing:.06em}#chopTransient{border-color:#5d6265}.wave-wrap canvas{cursor:crosshair}

.pad.loaded:after,.pad.synth:after{content:"";position:absolute;right:8px;top:8px;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.58}.pad.empty{opacity:.78}.pad.loaded{opacity:1}.pad.synth:after{border-radius:1px}.pad{position:relative}
.fx-sidebar{display:grid;gap:12px}.fx-head{display:flex;align-items:center;justify-content:space-between}.fx-head h2{margin:0}.fx-head button{border:1px solid var(--line);background:#15181a;color:var(--text);border-radius:5px;padding:4px 8px}.fx-target{padding:9px;border:1px solid #3b4044;background:#111416;font-size:9px;font-weight:800;letter-spacing:.08em}.fx-categories{display:grid;grid-template-columns:1fr 1fr;gap:5px}.fx-categories button,.fx-choice{border:1px solid var(--line);background:#111416;color:var(--text);border-radius:5px;padding:7px;text-align:left;font-size:8px}.fx-categories button.active{background:#d8d9d6;color:#090a0b}.fx-browser{display:grid;gap:6px}.fx-choice{display:grid;gap:3px;cursor:pointer}.fx-choice b{font-size:9px}.fx-choice small{color:var(--muted);font-size:7px;line-height:1.3}.fx-chain-head{display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid var(--line);font-size:8px;letter-spacing:.1em}.fx-chain-head small{color:var(--muted)}#fxSidebarRack{display:grid;gap:5px}.fx-slot{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:6px;padding:8px 6px;border:1px solid var(--line);border-radius:5px;background:#0e1011;cursor:pointer}.fx-slot span,.fx-slot small{font-size:7px;color:var(--muted)}.fx-slot b{font-size:8px}.fx-empty{padding:16px 6px;text-align:center;border:1px dashed #34383b;color:var(--muted);font-size:8px;line-height:1.7}@media(max-width:760px){.fx-sidebar{min-height:240px}}
@media(max-width:760px){.right.fx-open{display:block;position:fixed;z-index:40;inset:auto 0 0 0;max-height:72vh;overflow:auto;border:1px solid var(--line)!important;border-radius:12px 12px 0 0;background:#0b0d0e;padding:14px;box-shadow:0 -18px 50px rgba(0,0,0,.55)}.right.fx-open .fx-sidebar{min-height:0}.right.fx-open .fx-choice,.right.fx-open .fx-slot,.right.fx-open .fx-categories button{min-height:44px}.right.fx-open #closeFx{min-width:44px;min-height:44px}}


/* v2.58 — mobile producer workspace correction
   Keep the desktop architecture intact; on phones, prioritize playing first,
   then reveal editing depth without turning the studio into a long form. */
@media(max-width:760px){
  body{overflow-x:hidden}
  header{position:sticky;top:0;z-index:20;display:block;padding:10px 12px;background:rgba(11,13,14,.97)}
  header>div:first-child{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
  header b{font-size:15px}
  header span{font-size:8px}
  .transport{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;justify-content:stretch}
  .transport button,.transport .import{min-height:42px;padding:8px 6px;text-align:center}
  #undo,#redo{min-width:0}
  #play{grid-column:span 2}
  #stop,#record{grid-column:span 1}
  .transport label{display:grid;gap:3px;min-width:0}
  .transport label:nth-of-type(1),.transport label:nth-of-type(2),.transport label:nth-of-type(3){grid-column:span 1}
  .transport label:nth-of-type(4){grid-column:span 1}
  .transport label:nth-of-type(5),.transport label:nth-of-type(6){grid-column:span 2}
  .transport select,.transport input[type=number]{width:100%;min-height:34px}
  #exportProject,.transport>.import{grid-column:span 2}
  .field>aside:first-child{position:sticky;top:0;z-index:15;gap:5px;padding:8px 10px;background:#0b0d0e}
  .tool{flex:1;min-height:40px;margin:0;padding:8px 6px}
  .center{padding:12px 10px 28px}
  .workspace-tabs{position:sticky;top:0;z-index:12;margin-bottom:10px}
  .sampler-command{margin-bottom:10px;padding:10px}
  .section-title{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin:12px 2px 10px}
  .section-title small{text-align:right;line-height:1.35}
  .sample-bar{margin-bottom:10px}
  .wave-wrap{padding:6px;margin-bottom:10px}
  .wave-wrap canvas{height:68px}
  .chop-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
  .chop-actions button{min-height:38px;padding:5px 3px}
  .snap-note{grid-column:1/4;font-size:8px;line-height:1.3}
  .slice-readout{grid-column:4;margin:0;text-align:center}
  .sampler-stage{gap:10px}
  .pads{gap:7px}
  .sampler-stage .pad{min-height:76px;aspect-ratio:1.12}
  .pad b{font-size:11px}.pad small{font-size:7px}
  .pad-actions{grid-template-columns:repeat(4,1fr);gap:6px}
  .pad-actions button{min-height:44px}
  #padSoundAction{grid-column:span 2}
  .seq-head{margin-top:20px}
  .steps{grid-template-columns:repeat(8,1fr);gap:5px}
  .step{height:42px}
  .step-editor{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px}
  .step-editor>span{grid-column:1/-1}
  .step-editor label{display:grid;gap:4px;min-width:0}
  .step-editor input,.step-editor select{width:100%}
  .mixer-panel{margin-top:16px;padding:12px}
  .sound-controls{grid-template-columns:1fr;gap:0}
  .sound-controls>label,.pad-inserts{padding:11px 0;border-bottom:1px solid #202427}
  .sound-controls>label{grid-template-columns:92px 1fr;align-items:center;gap:10px}
  .sound-controls>label.toggle{display:flex;justify-content:space-between}
  .sound-controls select,.sound-controls input:not([type=checkbox]){width:100%;min-height:38px}
  .pad-inserts{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
  .pad-inserts>b{grid-column:1/-1;font-size:12px;letter-spacing:.1em}
  .pad-inserts label{grid-column:1/-1;display:grid;grid-template-columns:92px 1fr;align-items:center;gap:10px}
  #addPadPlugin{min-height:40px;padding:8px 18px}
  #padPluginRack{grid-column:1/-1}
}
@media(max-width:430px){
  .transport{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sampler-stage .pad{min-height:70px}
  .pad-actions{grid-template-columns:repeat(3,1fr)}
  #padSoundAction{grid-column:span 3}
  .sound-controls>label,.pad-inserts label{grid-template-columns:82px 1fr}
}

.sound-mobile-nav{display:none}
@media(max-width:760px){
 .sound-mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:sticky;top:0;z-index:5;margin:-2px 0 8px;padding:4px;background:#0d0f10;border:1px solid var(--line);border-radius:8px}
 .sound-mobile-tab{min-height:38px;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.06em}
 .sound-mobile-tab.active{background:#d8d9d6;color:#08090a}
 .sound-controls.mobile-sectioned>label,.sound-controls.mobile-sectioned>.pad-inserts{display:none}
 .sound-controls.mobile-sectioned>[data-mobile-sound-visible="true"]{display:grid}
 .sound-controls.mobile-sectioned>label.toggle[data-mobile-sound-visible="true"]{display:flex}
 .sound-controls.mobile-sectioned>.pad-inserts[data-mobile-sound-visible="true"]{display:grid}
}

/* v2.60 — sampler/chop ergonomics: fast, touch-first, instrument-like */
.sample-edit-head,.sample-range-readout{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sample-edit-head{padding:2px 2px 8px;font-size:9px;font-weight:900;letter-spacing:.1em}
.sample-edit-head small,.sample-range-readout{color:var(--muted);font-size:7px}
.sample-range-readout{padding:6px 2px 1px}
@media(max-width:760px){
 .wave-wrap{border-radius:10px;background:linear-gradient(180deg,#111416,#090b0c);box-shadow:inset 0 1px 0 #34383b}
 .sample-edit-head{font-size:10px}
 .sample-edit-head small{font-size:7px;text-align:right}
 .wave-wrap canvas{height:96px;border:1px solid #292d30;border-radius:6px;background:#080a0b}
 .sample-range-readout{font-size:8px}
 .chop-actions{grid-template-columns:repeat(5,1fr)}
 .chop-actions button{min-height:44px;font-size:8px;font-weight:900}
 .snap-note{grid-column:1/5}
 .slice-readout{grid-column:5}
}

/* v2.61 — DBL instrument-console visual system
   Dense, calm, tactile producer UI derived from DBL's own dark/chrome language. */
:root{--bg:#090a0a;--panel:#111211;--panel2:#171816;--line:#34342f;--line-soft:#242521;--text:#e8e4da;--muted:#898980;--chrome:#bbb9ae;--hot:#d6b54c;--signal:#84a642}
body{background:radial-gradient(circle at 48% -20%,#24231f 0,#0d0e0d 34%,#080909 68%);color:var(--text)}
header{background:linear-gradient(180deg,#171714,#0d0e0d);border-color:#3b3a34;box-shadow:inset 0 -1px #050606}
header b{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;letter-spacing:.08em;color:#ded9cc}
.transport button,.tool,.import{background:linear-gradient(180deg,#20211e,#111210);border-color:#3a3a34;box-shadow:inset 0 1px rgba(255,255,255,.035)}
.tool.active,.workspace-tab.active,.bank.active{background:linear-gradient(180deg,#d4cfc0,#aaa79d);color:#0b0c0b;border-color:#ded9cc}
.center{max-width:1180px}
.workspace-tabs{background:#0c0d0c;border-color:#393934}
.sampler-command,.mixer-panel,.wave-wrap{background:linear-gradient(180deg,#181916,#0e0f0e);border-color:#3b3b35;box-shadow:inset 0 1px rgba(255,255,255,.04),0 5px 16px rgba(0,0,0,.18)}
.sampler-stage .pad{background:linear-gradient(145deg,#292925,#121311 72%);border-color:#44443d;box-shadow:inset 0 1px #55544b,inset 0 -12px 25px #080908,0 3px 7px #050505}
.sampler-stage .pad.selected{outline-color:#c9aa47;box-shadow:inset 0 1px #666258,inset 0 -12px 25px #080908,0 0 0 1px #c9aa47,0 0 15px rgba(201,170,71,.12)}
.step.on{background:#b24a38;color:#f4eee5;border-color:#d05b45}.step.playing{outline-color:#d4b44b}
.crunch-action{color:#dfc077!important}
.seq-head b,.section-title span,.sampler-command strong{color:#ded9cc}
input[type=range]{accent-color:#c4a744}
@media(min-width:761px){
 header{height:58px;padding:0 14px}
 .field{grid-template-columns:74px minmax(0,1fr) 176px;min-height:calc(100vh - 58px)}
 .field>aside{padding:9px 7px}
 .tool{min-height:42px;padding:7px 4px}
 .center{padding:18px 22px}
 .workspace-tabs{max-width:480px;margin-bottom:12px}
 .sampler-command{padding:10px 12px;margin-bottom:12px}
 .wave-wrap canvas{height:78px}
 .sampler-stage .pad{min-height:88px}
 .step{height:38px}
}
@media(max-width:760px){
 header{background:linear-gradient(180deg,#171714,#0c0d0c)}
 .center{padding-top:10px}
 .workspace-tabs{border-color:#3b3a34}
 .sampler-command{background:linear-gradient(180deg,#1b1b18,#10110f)}
 .sampler-stage .pad{background:linear-gradient(145deg,#2a2a26,#111210 70%)}
 .pad-actions button{background:linear-gradient(180deg,#20211e,#111210);border-color:#3d3d37}
 .sound-mobile-tab.active{background:#c9c5b9;color:#0b0c0b}
}

/* v2.62 — selected-pad control surface */
.sound-quick-strip{display:grid;grid-template-columns:auto auto 1fr 1fr 1fr auto;gap:7px;align-items:end;margin:0 0 12px;padding:9px;border:1px solid var(--line);border-radius:8px;background:#0b0c0b}
.sound-quick-strip button{min-height:38px;border:1px solid #3c3c36;border-radius:5px;background:linear-gradient(180deg,#20211e,#111210);color:var(--text);font-size:8px;font-weight:900}
.sound-quick-strip label{display:grid;gap:5px;color:var(--muted);font-size:7px;font-weight:900}
.sound-quick-strip input{width:100%;accent-color:#c4a744}
@media(max-width:760px){.sound-quick-strip{grid-template-columns:repeat(2,1fr);position:sticky;top:0;z-index:6}.sound-quick-strip label{min-height:45px}.sound-quick-strip button{min-height:45px}}

#sampleAudition{margin-left:auto;border:1px solid #4a473b;border-radius:5px;background:#171713;color:#d8c57d;padding:6px 10px;font-size:7px;font-weight:900;letter-spacing:.07em}
#sampleAudition:active{background:#c4a744;color:#0a0b0a}
@media(max-width:760px){.sample-range-readout{gap:8px}#sampleAudition{min-height:38px;padding:7px 12px}}

.slice-focus-bar{display:grid;grid-template-columns:auto 1fr auto auto;gap:5px;align-items:center;margin-top:7px;padding-top:7px;border-top:1px solid #242521}
.slice-focus-bar button{min-height:34px;border:1px solid #3b3b35;border-radius:5px;background:#151613;color:var(--text);font-size:7px;font-weight:900}
#sliceFocus{text-align:center;color:#d7c277;font-size:8px;font-weight:900;letter-spacing:.08em}
@media(max-width:760px){.slice-focus-bar{grid-template-columns:1fr 1.4fr 1fr 1fr}.slice-focus-bar button{min-height:42px}}

.quick-envelope{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;padding:8px;border-top:1px solid #2e2f2a;background:#0d0e0c}
.quick-envelope[hidden]{display:none}
.quick-envelope label{display:grid;gap:5px;color:var(--muted);font-size:7px;font-weight:900}
.quick-envelope button.active{border-color:#c4a744;color:#dfc077}
@media(max-width:760px){.quick-envelope{grid-template-columns:1fr 1fr}.quick-envelope button{grid-column:1/-1}}

/* v2.66 — loading a sound must never be a hidden action */
.sample-load-zone{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid #49483f;border-radius:8px;background:linear-gradient(180deg,#181915,#0e0f0d)}
.sample-load-primary{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border:1px solid #c0a444;border-radius:6px;background:linear-gradient(180deg,#d0b34d,#a88c32);color:#0b0c0a;font-size:9px;font-weight:950;letter-spacing:.08em;cursor:pointer}
.sample-load-primary input{display:none}
.sample-load-copy{display:grid;gap:3px}.sample-load-copy strong{font-size:8px;letter-spacing:.07em}.sample-load-copy small{color:var(--muted);font-size:7px}
.sample-load-zone.dragging{border-color:#d0b34d;box-shadow:inset 0 0 0 1px #d0b34d,0 0 18px rgba(208,179,77,.12)}
#sampleStatus{color:#b8b6ac;font-size:7px;font-weight:800;text-align:right}
@media(max-width:760px){.sample-load-zone{grid-template-columns:1fr;padding:10px}.sample-load-primary{min-height:50px;font-size:10px}.sample-load-copy{text-align:center}.sample-load-copy small{font-size:8px}#sampleStatus{text-align:center;min-height:18px}}

.record-cluster{display:inline-flex;align-items:center;gap:5px;padding:3px 5px;border:1px solid #3b3a34;border-radius:7px;background:#0b0c0b}
.record-cluster label{display:flex;align-items:center;gap:4px}.record-cluster #bpm{width:54px}
#metronome.active{border-color:#c4a744;color:#dfc077}#automation:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){.record-cluster{display:grid;grid-template-columns:auto auto auto auto;grid-column:1/-1}.record-cluster button{min-height:38px}}

/* v2.68 — complete immediate sampler action row */
.sound-quick-strip{grid-template-columns:auto auto auto 1fr 1fr 1fr auto auto auto}
.sound-quick-strip select{min-height:38px;border:1px solid #3c3c36;border-radius:5px;background:#111210;color:var(--text);font-size:7px;font-weight:900;padding:0 7px}
#quickReverse.active{border-color:#c4a744;color:#dfc077}
@media(max-width:760px){.sound-quick-strip{grid-template-columns:repeat(3,1fr)}.sound-quick-strip>label{grid-column:span 1}.sound-quick-strip select{min-height:45px}.quick-envelope{grid-column:1/-1}}

.import-browser{margin:8px 0 10px;border:1px solid #34342f;border-radius:7px;background:#0d0e0c;overflow:hidden}.import-browser-head{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-bottom:1px solid #282923}.import-browser-head b{font-size:8px;letter-spacing:.09em}.import-browser-head label{padding:6px 9px;border:1px solid #444238;border-radius:4px;color:#d8c57d;font-size:7px;font-weight:900;cursor:pointer}.import-browser-head input{display:none}.import-file-list{display:flex;gap:5px;overflow-x:auto;padding:7px}.import-file{display:grid;gap:3px;min-width:150px;text-align:left;padding:7px 9px;border:1px solid #34342f;border-radius:5px;background:#151613;color:var(--text)}.import-file span{font-size:8px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.import-file small,.import-empty{font-size:7px;color:var(--muted)}.import-file:active{border-color:#c4a744}
@media(max-width:760px){.import-browser{margin-top:7px}.import-file{min-width:138px;min-height:44px}}

/* v2.70 — DBL sampler settings: BM3-level organization, DBL visual language */
.sampler-settings-nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:6px;border:1px solid #34342f;border-radius:6px;background:#0b0c0a}.sampler-settings-nav[hidden]{display:none}.sampler-settings-nav button{min-height:34px;border:0;border-bottom:2px solid transparent;background:#141512;color:#8f9088;font-size:7px;font-weight:900;letter-spacing:.06em}.sampler-settings-nav button.active{border-bottom-color:#c4a744;color:#e0c575;background:#1b1b16}#samplerSettings.active{border-color:#c4a744;color:#dfc077}
@media(max-width:760px){.sampler-settings-nav{grid-template-columns:repeat(3,1fr)}.sampler-settings-nav button{min-height:42px}}

/* v2.71 — one coherent sampler instrument panel */
.sampler-control-panel{grid-column:1/-1;border:1px solid #45443b;border-radius:8px;background:linear-gradient(180deg,#151612,#0a0b09);box-shadow:0 10px 28px rgba(0,0,0,.28);overflow:hidden}.sampler-control-panel[hidden]{display:none}.sampler-panel-head{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-bottom:1px solid #30312b}.sampler-panel-head>div{display:grid;gap:2px}.sampler-panel-head b{font-size:9px;letter-spacing:.07em}.sampler-panel-head small{font-size:7px;color:#96978f}.sampler-panel-head button{width:34px;height:30px;border:1px solid #3c3d37;border-radius:4px;background:#11120f;color:#bbb;font-size:17px}.sampler-control-panel .sampler-settings-nav{border:0;border-radius:0;border-bottom:1px solid #30312b}.sampler-panel-context{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;background:#10110e}.sampler-panel-context span{color:#dcc478;font-size:8px;font-weight:900;letter-spacing:.05em}.sampler-panel-context small{font-size:7px;color:#777a73}
@media(max-width:760px){.sampler-control-panel{position:relative;margin-top:5px}.sampler-panel-head{padding:10px}.sampler-panel-context{display:grid}.sampler-panel-context span{font-size:9px}}

/* v2.72 — one control language across sampler */
button,.import-browser-head label,.sample-load-primary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sound-quick-strip button,.pad-actions button,.chop-actions button,.sampler-settings-nav button{min-height:36px;border-radius:5px;font-weight:900;letter-spacing:.045em}
.sound-quick-strip button:focus-visible,.pad-actions button:focus-visible,.chop-actions button:focus-visible,.sampler-settings-nav button:focus-visible,.import-file:focus-visible{outline:2px solid #c4a744;outline-offset:1px}
.sound-quick-strip button:active,.pad-actions button:active,.chop-actions button:active,.sampler-settings-nav button:active{transform:translateY(1px)}
button[disabled]{pointer-events:none}
@media(max-width:760px){.sound-quick-strip button,.pad-actions button,.chop-actions button,.sampler-settings-nav button{min-height:44px}}

/* v2.73 — visual hierarchy pass: sampler as a premium instrument */
.sample-bar,.sampler-control-panel,.import-browser{border-color:#3b3c36;background:linear-gradient(180deg,#141512 0%,#0b0c0a 100%)}
.sample-load-zone{padding:10px;gap:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.sample-load-primary{min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:5px;background:#c1a447;color:#11120f;border:1px solid #d1b65d;font-size:8px;font-weight:950;letter-spacing:.055em}
.sample-load-copy{display:grid;gap:2px;min-width:0}.sample-load-copy strong{font-size:8px;letter-spacing:.04em}.sample-load-copy small{font-size:7px;color:#777a73}
#sampleStatus{margin-left:auto;padding:5px 7px;border:1px solid #34352f;border-radius:4px;background:#0a0b09;color:#aaa;font-size:7px;white-space:nowrap}
.sound-quick-strip{padding:6px;border:1px solid #34352f;border-radius:7px;background:#0d0e0c;gap:4px}
.sound-quick-strip button,.sound-quick-strip select{background:linear-gradient(180deg,#1a1b18,#10110f);border:1px solid #3a3b35;color:#aaa}
.sound-quick-strip button:hover{border-color:#56574e;color:#ddd}.sound-quick-strip button.active,#quickReverse.active{background:#211e13;border-color:#b89e45;color:#e2c979}
.sampler-panel-head{background:linear-gradient(180deg,#191a17,#12130f)}.sampler-panel-head b{color:#e2e2dc}.sampler-settings-nav{gap:1px;padding:0}.sampler-settings-nav button{border-radius:0;background:#10110f;border-right:1px solid #282923}.sampler-settings-nav button:last-child{border-right:0}.sampler-settings-nav button.active{box-shadow:inset 0 -2px 0 #c4a744;background:#191810}
.import-browser-head{background:#11120f}.import-file-list{scrollbar-width:thin}.import-file{transition:border-color .12s ease,background .12s ease}.import-file:hover{background:#1a1b17;border-color:#4b4c44}
.waveform-wrap,#waveform{border-radius:6px}.waveform-wrap{border:1px solid #3a3b35;background:#080906;overflow:hidden}
.slice-focus-bar{border-radius:5px;background:#0d0e0c;border:1px solid #30312c}
@media(max-width:760px){.sample-load-zone{display:grid;grid-template-columns:1fr auto}.sample-load-primary{min-height:48px}.sample-load-copy{grid-column:1/-1;order:3}#sampleStatus{margin-left:0}.sound-quick-strip{gap:5px;padding:5px}.sampler-control-panel{border-radius:7px}.sampler-panel-head b{font-size:10px}.import-file-list{padding:6px}}

/* v2.74 — workstation density + selected-sample focus */
#soundPanel{container-type:inline-size}
#soundPanel .panel-head{padding-bottom:6px;margin-bottom:6px}
#soundPanel .panel-head h2{font-size:11px;letter-spacing:.08em}
#soundPanel .panel-head p{font-size:7px;max-width:58ch;color:#777a73}
.sample-editor{gap:7px}
.sample-range-readout{display:grid;grid-template-columns:1fr 1fr auto;gap:4px;align-items:center}
.sample-range-readout>*{min-width:0}
.slice-focus-bar{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:3px;padding:4px}
#sliceFocus{text-align:center;font-size:7px;font-weight:900;letter-spacing:.055em;color:#c6c7c0}
.pad-actions,.chop-actions{gap:4px}.pad-actions button,.chop-actions button{background:#121310;border-color:#353630;color:#9c9e96}.pad-actions button:hover,.chop-actions button:hover{color:#ddd;border-color:#505149}
.sound-controls label{gap:4px;font-size:7px;letter-spacing:.04em}.sound-controls input[type=range]{accent-color:#bda143}.sound-controls select,.sound-controls input[type=number]{background:#0d0e0c;border-color:#383933;color:#d1d2cb}
@container(max-width:700px){#soundPanel .panel-head p{display:none}.sample-range-readout{grid-template-columns:1fr 1fr}.sample-range-readout button{grid-column:1/-1}.slice-focus-bar{grid-template-columns:1fr 1fr}#sliceFocus{grid-column:1/-1;grid-row:1}}
@media(max-width:760px){#soundPanel{padding:8px}.sample-editor{gap:6px}.waveform-wrap{min-height:126px}.pad-actions,.chop-actions{display:grid;grid-template-columns:repeat(2,1fr)}.pad-actions button,.chop-actions button{min-height:42px}}

/* v2.77 — screenshot-driven mobile architecture cleanup */
@media(max-width:760px){
 header{padding-bottom:6px}
 header>div:first-child{min-height:28px}
 .transport{grid-template-columns:44px 44px minmax(110px,1fr) 82px;gap:5px;align-items:end}
 #undo,#redo{min-height:42px;padding:0;font-size:17px}
 #play,#stop{min-height:42px}
 #play{grid-column:3}
 #stop{grid-column:4;grid-row:1}
 .record-cluster{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 86px 1fr;gap:4px}
 .record-cluster>*{min-width:0}
 .transport>label{min-width:0}
 .transport-secondary{display:none!important}
 .project-file-action{font-size:7px!important;min-height:34px!important;opacity:.7}
 .legacy-tools{display:none!important}
 .field{grid-template-columns:minmax(0,1fr)!important}
 .center{min-width:0}
 .workspace-tabs{position:sticky;top:0;z-index:12;background:#090a08;padding:5px 0}
 .sampler-command{margin-top:4px}
 .section-title small{display:none}
 .sample-load-zone{padding:7px}
 .sample-load-primary{min-height:44px}
 .sample-load-copy strong{font-size:7px}.sample-load-copy small{display:none}
 .import-browser{margin-top:4px}
 .sample-edit-head small{font-size:6px;letter-spacing:.025em}
 .step-editor{padding:8px;gap:7px}
}

/* v2.78 — premium Detroit console finish */
:root{--dbl-black:#070806;--dbl-panel:#11120f;--dbl-panel-hi:#181916;--dbl-line:#393a34;--dbl-line-hi:#56574e;--dbl-ivory:#e6e1d4;--dbl-muted:#85877f;--dbl-gold:#c9a846;--dbl-gold-hi:#e0c36a;--dbl-red:#b84736}
body{background:radial-gradient(circle at 50% -10%,#20211c 0,#0b0c09 28%,#060705 70%);color:var(--dbl-ivory)}
#studio{background:linear-gradient(180deg,rgba(17,18,15,.97),rgba(5,6,5,.99))}
header,.sampler-command,.sample-load-zone,.import-browser,#waveWrap,.sampler-stage,.step-editor,.mixer-panel,.fx-sidebar{box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.16)}
.workspace-tabs{border:1px solid #44453e;background:#0a0b09;border-radius:8px;padding:4px}
.workspace-tab{border:0!important;background:transparent!important;color:#8f9189!important}
.workspace-tab.active{background:linear-gradient(180deg,#e6e1d4,#c8c2b4)!important;color:#0a0b09!important;box-shadow:inset 0 1px #fff,0 1px 8px rgba(0,0,0,.28)}
.bank{background:linear-gradient(180deg,#171815,#0d0e0c);border-color:#3d3e38;color:#9a9c94}.bank.active{background:linear-gradient(180deg,#e3ded1,#beb8aa);color:#090a08;border-color:#eee8d9}
.pad{position:relative;background:radial-gradient(circle at 50% 28%,#1c1d1a 0,#11120f 52%,#090a08 100%);border:1px solid #3f403a;box-shadow:inset 0 0 0 3px #0c0d0b,inset 0 1px rgba(255,255,255,.04),0 3px 8px rgba(0,0,0,.28)}
.pad:hover{border-color:#5b5c54}.pad.active,.pad.selected{border-color:var(--dbl-gold-hi);box-shadow:inset 0 0 0 3px #12120d,inset 0 0 0 5px #9f8533,0 0 0 1px #e1c35e,0 5px 16px rgba(0,0,0,.35)}
.pad b{color:#d6d4cc;text-shadow:0 1px #000}.pad small{color:#70736c}
#play{background:linear-gradient(180deg,#2b2b25,#151612);border-color:#55564e;color:#f0ece2}#record{border-color:#633d35;color:#d69a8c}.crunch-action,.sampler-settings-nav button.active{color:var(--dbl-gold-hi)!important}
.sample-load-primary{background:linear-gradient(180deg,#d3b452,#aa8b31);border-color:#e0c667;color:#0b0c09;box-shadow:inset 0 1px rgba(255,255,255,.28),0 3px 10px rgba(0,0,0,.25)}
#waveform{background:linear-gradient(180deg,#181a1a,#101213)}
.sample-edit-head,.sampler-panel-head,.import-browser-head{background:linear-gradient(180deg,#1a1b18,#10110e)}
.sound-quick-strip button,.pad-actions button,.chop-actions button{box-shadow:inset 0 1px rgba(255,255,255,.025)}
input[type=range]{filter:saturate(.82)}
@media(max-width:760px){body{background:#050604}#studio{border-top:1px solid #33342f}.workspace-tabs{margin-inline:2px}.sampler-command,#waveWrap,.sample-load-zone,.import-browser{border-radius:9px}.pads{gap:7px}.pad{border-radius:8px;min-height:92px}.pad b{font-size:11px}.pad small{font-size:7px}.sample-load-primary{font-size:9px}}

/* v2.79 — dedicated BeatMaker-class mixer workspace */
.dedicated-mixer{grid-column:1/-1;padding:10px;border:1px solid #45463f;background:linear-gradient(180deg,#11120f,#070806);border-radius:10px;min-height:520px}
.mixer-console-head{display:flex;align-items:end;justify-content:space-between;padding:4px 4px 9px;border-bottom:1px solid #33342f}.mixer-console-head>div{display:grid;gap:2px}.mixer-console-head b{font-size:18px;letter-spacing:.12em}.mixer-console-head small{font-size:7px;color:#85877f;letter-spacing:.12em}.mixer-console-head>span{color:#d7bd65;font-size:9px;font-weight:900}
.mixer-mode-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px 0}.mixer-mode-tabs button{min-height:34px;background:#11120f;border:1px solid #383933;color:#8d8f87;border-radius:4px;font-size:7px;font-weight:900}.mixer-mode-tabs button.active{background:#ded8ca;color:#090a08;border-color:#eee7d7}
.mixer-strips{display:grid;grid-template-columns:repeat(8,minmax(64px,1fr));gap:5px;overflow-x:auto;padding:3px 1px 9px;scroll-snap-type:x proximity}
.mixer-strip{scroll-snap-align:start;display:grid;grid-template-rows:auto auto 120px 1fr auto;gap:5px;min-width:68px;min-height:310px;padding:7px 5px;background:linear-gradient(180deg,#171815,#0a0b09);border:1px solid #383a34;border-radius:6px;color:#a5a79f}.mixer-strip.selected{border-color:#c9a846;box-shadow:inset 0 0 0 1px #796528}.mixer-strip>span,.mixer-strip>small{font-size:6px;color:#73766f}.mixer-strip>b{font-size:8px;color:#d5d3cb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-meter{position:relative;width:6px;height:120px;justify-self:end;background:#070806;border:1px solid #2d2e29;overflow:hidden}.strip-meter i{position:absolute;bottom:0;left:1px;right:1px;background:linear-gradient(180deg,#e4bf49,#6d8d6e)}
.strip-fader{position:relative;width:22px;height:112px;justify-self:center;border-radius:3px;background:linear-gradient(90deg,#090a08,#242520 48%,#090a08 52%)}.strip-fader:before{content:"";position:absolute;left:10px;top:4px;bottom:4px;width:1px;background:#55564f}.strip-fader i{position:absolute;left:2px;width:18px;height:15px;margin-bottom:-7px;border:1px solid #aaa69a;border-radius:2px;background:linear-gradient(180deg,#d8d4c9,#65645e,#d4d0c4);box-shadow:0 2px 5px #000}
.mixer-inspector{display:grid;grid-template-columns:minmax(110px,.35fr) 1fr;gap:10px;padding:9px;border-top:1px solid #34352f;background:#0b0c0a}.mixer-inspector>div:first-child{display:grid;align-content:start;gap:4px}.mixer-inspector small{font-size:6px;color:#777a73}.mixer-inspector b{font-size:13px;color:#e1c461}.mixer-inspector .mix-controls{margin:0}
@media(max-width:760px){.dedicated-mixer{margin-top:6px;padding:7px;min-height:470px}.mixer-console-head b{font-size:15px}.mixer-strips{grid-template-columns:repeat(16,74px);margin-inline:-2px}.mixer-strip{min-height:286px;grid-template-rows:auto auto 100px 1fr auto}.strip-meter{height:100px}.strip-fader{height:96px}.mixer-inspector{grid-template-columns:1fr}.mixer-inspector .mix-controls{display:grid;grid-template-columns:1fr 1fr}.mixer-mode-tabs{position:sticky;top:48px;z-index:8;background:#090a08}}

/* v2.80 — mixer console fidelity */
.dedicated-mixer{background:radial-gradient(circle at 50% 0,#1b1c18 0,#0c0d0b 28%,#060705 76%);box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.32)}
.mixer-console-head{min-height:48px}.mixer-console-head b{font-family:inherit;font-weight:950}.mixer-mode-tabs{max-width:720px}
.mixer-strips{grid-template-columns:repeat(16,minmax(76px,1fr));gap:4px;border:1px solid #30312c;border-radius:6px;padding:6px;background:#080907}
.mixer-strip{grid-template-rows:auto auto 112px 132px auto;min-width:76px;min-height:342px;padding:5px 5px 7px;border-radius:4px;background:linear-gradient(180deg,#171815 0,#0c0d0b 35%,#080907 100%);box-shadow:inset 0 1px rgba(255,255,255,.035)}
.strip-select{display:grid;gap:2px;padding:5px 2px;background:transparent;border:0;color:inherit}.strip-select span{font-size:6px;color:#71746d}.strip-select b{font-size:8px;color:#dedbd2;overflow:hidden;text-overflow:ellipsis}
.strip-ms{display:grid;grid-template-columns:1fr 1fr;gap:3px}.strip-ms button{min-height:26px;padding:0;border:1px solid #353630;background:#0b0c0a;color:#85877f;border-radius:3px;font-size:7px;font-weight:900}.strip-ms button[aria-pressed="true"]{border-color:#b9983c;color:#e1c461;background:#201b0e}
.strip-meter{grid-row:3/5;align-self:stretch;height:auto;width:7px;margin-right:4px}.strip-fader{grid-row:4;position:relative;width:28px;height:126px;justify-self:center;border-radius:3px;background:linear-gradient(90deg,#090a08,#242520 48%,#090a08 52%)}.strip-fader input{position:absolute;inset:0;width:100%;height:100%;opacity:0;writing-mode:vertical-lr;direction:rtl;z-index:2;cursor:ns-resize}.strip-fader i{pointer-events:none}
.mixer-strip.selected .strip-select b{color:#e2c76e}.mixer-strip.selected:before{content:"";height:2px;background:#c9a846;position:absolute;left:5px;right:5px;top:0}.mixer-strip{position:relative}
.mixer-inspector{margin-top:7px;border:1px solid #30312c;border-radius:5px}.mixer-inspector .mix-controls button{background:#10110e;border-color:#3d3e38}.mixer-inspector .mix-controls button.active{border-color:#c9a846;color:#e0c36a}
@media(max-width:760px){.mixer-strips{grid-template-columns:repeat(16,82px);padding:5px}.mixer-strip{min-width:82px;min-height:330px}.mixer-console-head small{display:block}.mixer-mode-tabs button{min-height:38px}.strip-ms button{min-height:30px}.mixer-inspector{position:sticky;bottom:0;z-index:9;box-shadow:0 -10px 24px rgba(0,0,0,.42)}}

/* v2.81 — console bank + master section */
.mixer-bank{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:6px;align-items:stretch}.mixer-bank .mixer-strips{min-width:0}
.master-strip{display:grid;grid-template-rows:auto 112px 132px auto;justify-items:center;gap:7px;padding:8px 7px;border:1px solid #55564d;border-radius:5px;background:linear-gradient(180deg,#22231e,#0d0e0b 38%,#080907);box-shadow:inset 0 1px rgba(255,255,255,.06)}
.master-strip>span{font-size:8px;font-weight:950;letter-spacing:.07em;color:#e4dfd3}.master-meter{display:flex;gap:3px;height:112px}.master-meter i{display:block;width:5px;border:1px solid #32332e;background:linear-gradient(0deg,#d1a937 0 55%,#6c876b 55% 82%,#9a4d3e 82%);opacity:.7}
.master-strip label{position:relative;width:30px;height:126px;border-radius:3px;background:linear-gradient(90deg,#090a08,#282923 48%,#090a08 52%)}.master-strip label:before{content:"";position:absolute;left:14px;top:4px;bottom:4px;width:1px;background:#606158}.master-strip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;writing-mode:vertical-lr;direction:rtl;z-index:2}.master-strip label b{position:absolute;left:3px;width:24px;height:16px;margin-bottom:-8px;border:1px solid #c2bdb0;border-radius:2px;background:linear-gradient(180deg,#e0ddd4,#6b6962,#d8d4c9);box-shadow:0 2px 6px #000}.master-strip small{font-size:7px;color:#d9bd61}
@media(max-width:760px){.mixer-bank{grid-template-columns:minmax(0,1fr) 76px}.master-strip{grid-template-rows:auto 100px 116px auto;padding-inline:5px}.master-meter{height:100px}.master-strip label{height:112px;width:27px}.master-strip label b{width:21px}.mixer-bank .mixer-strips{border-radius:5px 0 0 5px}}

/* v2.82 — mixer visual precision */
.mixer-console-head{padding-inline:8px}.mixer-mode-tabs{margin-inline:2px}.mixer-bank{background:#070806;border-radius:6px}
.mixer-strip{border-color:#32332e}.mixer-strip:nth-child(even){background:linear-gradient(180deg,#151613,#0b0c0a 35%,#070806 100%)}
.mixer-strip>small{justify-self:center;padding:3px 5px;border-radius:8px;background:#0a0b09;border:1px solid #292a26}
.mixer-channel-id{border-right:1px solid #30312c;padding-right:10px}.mixer-channel-id span{font-size:6px;color:#777a73;letter-spacing:.08em}
.mixer-inspector .mix-controls label{padding:5px 7px;border:1px solid #2f302b;border-radius:4px;background:#090a08}.mixer-inspector .mix-controls button{min-height:38px;border-radius:4px;font-size:7px;font-weight:950;letter-spacing:.08em}
.mixer-inspector .mix-controls button.active{background:#211c0e;box-shadow:inset 0 -2px #c9a846}
@media(max-width:760px){.mixer-console-head{padding-inline:5px}.mixer-console-head>span{padding:4px 7px;border:1px solid #3a3b35;border-radius:10px;background:#0b0c0a}.mixer-channel-id{border-right:0;border-bottom:1px solid #30312c;padding:0 0 7px}.mixer-inspector .mix-controls{gap:5px}}

/* v2.83 — dedicated mixer subviews */
.mixer-subview{min-height:300px;border:1px solid #30312c;border-radius:6px;background:linear-gradient(180deg,#11120f,#080907);padding:10px}.mixer-subview[hidden]{display:none}
.mixer-subhead{display:flex;align-items:center;justify-content:space-between;padding-bottom:9px;border-bottom:1px solid #30312c}.mixer-subhead>div{display:grid;gap:3px}.mixer-subhead small{font-size:6px;color:#777a73}.mixer-subhead b{font-size:12px;color:#dedbd2}.mixer-subhead button{min-height:34px;border:1px solid #a78b37;background:#1c180d;color:#dec263;border-radius:4px;font-size:7px;font-weight:900}
.mixer-insert-list{display:grid;gap:5px;padding-top:8px}.mixer-insert-slot{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;padding:10px;border:1px solid #353630;border-radius:4px;background:#0c0d0b}.mixer-insert-slot span,.mixer-insert-slot small{font-size:6px;color:#777a73}.mixer-insert-slot b{font-size:9px;color:#d8d5cd}.mixer-empty-state{padding:28px;text-align:center;border:1px dashed #34352f;color:#777a73;font-size:7px}
.routing-truth,.master-summary{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;max-width:460px;padding:18px 4px}.routing-truth span,.master-summary span{font-size:6px;color:#777a73}.routing-truth b,.master-summary b{font-size:10px;color:#dfc364}.routing-truth small,.master-summary small{grid-column:1/-1;padding-top:8px;border-top:1px solid #2d2e29;color:#70726b;font-size:7px}
@media(max-width:760px){.mixer-subview{min-height:330px;padding:8px}.mixer-subhead{align-items:flex-start;gap:8px}.mixer-subhead button{max-width:120px}.mixer-insert-slot{padding:12px 8px}}

/* v2.84 — approved-reference console detailing */
.mixer-console-head:before{content:"DBL";display:grid;place-items:center;width:32px;height:32px;margin-right:8px;border:1px solid #595a51;border-radius:50%;font-size:7px;font-weight:950;color:#d7bb60;background:radial-gradient(circle,#25261f,#0b0c09 70%)}
.mixer-console-head{justify-content:flex-start}.mixer-console-head>div{flex:1}.mixer-console-head>span{margin-left:auto}
.mixer-mode-tabs{border-bottom:1px solid #2f302b;padding-bottom:7px}.mixer-mode-tabs button{letter-spacing:.09em}
.mixer-strip{background-image:linear-gradient(180deg,rgba(255,255,255,.025),transparent 15%),repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),linear-gradient(180deg,#171815,#090a08)}
.strip-fader,.master-strip label{box-shadow:inset 2px 0 5px #000,inset -2px 0 5px #000}.strip-meter,.master-meter i{box-shadow:inset 0 0 5px #000}
.strip-ms button{box-shadow:inset 0 1px rgba(255,255,255,.035)}.strip-ms button[aria-pressed="true"]{box-shadow:inset 0 -2px #c9a846,0 0 8px rgba(201,168,70,.12)}
.master-strip{border-left-color:#8a7540}.master-strip>span{padding:4px 7px;border-radius:9px;background:#ded8ca;color:#090a08}
.mixer-inspector{background:linear-gradient(180deg,#11120f,#090a08);box-shadow:inset 0 1px rgba(255,255,255,.03)}
@media(max-width:760px){.mixer-console-head:before{width:28px;height:28px}.mixer-console-head{min-height:42px}.mixer-strip{box-shadow:inset -1px 0 #242520}.master-strip{box-shadow:-5px 0 16px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.05)}}

/* v2.85 — phone mixer ergonomics + console scale */
.dedicated-mixer{container-type:inline-size}.mixer-bank{position:relative}.mixer-strips{scrollbar-width:thin;scrollbar-color:#6f6032 #0a0b09}
.mixer-strip{transition:border-color .12s ease,box-shadow .12s ease,transform .08s ease}.mixer-strip:has(.strip-select:active){transform:translateY(1px)}
.strip-select{min-height:34px;border-radius:3px}.strip-select:focus-visible{outline:1px solid #d8ba5d;outline-offset:1px}
.strip-ms button:active{transform:translateY(1px)}.strip-fader input,.master-strip input{touch-action:none}
@container (min-width:900px){.mixer-strips{grid-template-columns:repeat(16,minmax(68px,1fr))}.mixer-strip{min-width:68px}.mixer-inspector{grid-template-columns:180px 1fr}}
@media(max-width:760px){
 .dedicated-mixer{border-radius:7px;padding:5px;min-height:calc(100dvh - 120px)}
 .mixer-console-head{position:sticky;top:0;z-index:11;background:linear-gradient(180deg,#151612,#0a0b08);margin:-5px -5px 0;padding:6px 7px;border-radius:7px 7px 0 0}
 .mixer-mode-tabs{top:41px;margin:0 -1px;padding:5px 0 6px}
 .mixer-bank{grid-template-columns:minmax(0,1fr) 72px;gap:3px}
 .mixer-strips{gap:3px;margin:0;overscroll-behavior-x:contain;scroll-snap-type:x mandatory}
 .mixer-strip{scroll-snap-align:start;min-width:80px;grid-template-rows:auto auto 96px 112px auto;min-height:306px;padding-inline:4px}
 .strip-select{min-height:38px}.strip-ms button{min-height:32px}
 .strip-meter{min-height:96px}.strip-fader{height:108px;width:30px}
 .master-strip{position:sticky;right:0;z-index:7;min-width:72px}
 .mixer-inspector{margin-top:4px;padding:7px;max-height:190px;overflow:auto}
 .mixer-inspector .mix-controls label{min-height:46px;display:grid;align-content:center}
}

/* v2.86 — real strip pan + mixer scale refinement */
.mixer-strip{grid-template-rows:auto auto 34px 108px 126px auto;min-height:382px}
.strip-pan{display:grid;grid-template-columns:auto 1fr auto;gap:3px;align-items:center;padding:2px}.strip-pan span{font-size:5px;color:#676a63}.strip-pan input{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent}.strip-pan input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#383a34,#8d7941 50%,#383a34)}.strip-pan input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;border-radius:50%;border:1px solid #aaa69a;background:radial-gradient(circle at 40% 35%,#e1ddd2,#74736c 55%,#1a1b18);box-shadow:0 1px 4px #000}.strip-pan input::-moz-range-track{height:3px;background:#484940}.strip-pan input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:1px solid #aaa69a;background:#bdb8ac}
.strip-fader:after{content:"0\A-6\A-12\A-24\A-∞";white-space:pre;position:absolute;left:-18px;top:0;height:100%;display:flex;flex-direction:column;justify-content:space-between;font-size:5px;line-height:1;color:#5f625b;pointer-events:none}
@media(max-width:760px){.mixer-strip{grid-template-rows:auto auto 34px 94px 108px auto;min-height:344px}.strip-pan input{height:22px}.strip-pan input::-webkit-slider-thumb{width:16px;height:16px;margin-top:-7px}.strip-fader:after{left:-15px;font-size:4px}}

/* v2.88 — project controls + DAW settings */
.save-now,.settings-button{min-height:38px;border:1px solid #4a4b44;border-radius:5px;background:linear-gradient(180deg,#1b1c18,#0d0e0c);color:#d9d6cd;font-weight:900;letter-spacing:.08em}.save-now{border-color:#8c783d;color:#dfc361}#save{align-self:center;font-size:6px;color:#777a73;letter-spacing:.08em}
.settings-dialog{width:min(760px,calc(100vw - 24px));max-height:88dvh;padding:0;border:1px solid #55564e;border-radius:8px;background:#0b0c09;color:#dedbd2;box-shadow:0 24px 70px #000}.settings-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}.settings-shell{display:grid;grid-template-rows:auto auto 1fr;max-height:88dvh}.settings-head{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid #34352f;background:linear-gradient(180deg,#1a1b17,#10110e)}.settings-head>div{display:grid;gap:3px}.settings-head b{font-size:13px;letter-spacing:.12em}.settings-head small{font-size:6px;color:#777a73}.settings-head button{width:38px;height:38px;border:1px solid #45463f;border-radius:50%;background:#11120f;color:#ddd8cd;font-size:20px}.settings-tabs{display:flex;gap:3px;padding:7px;overflow:auto;border-bottom:1px solid #30312c}.settings-tabs button{flex:1;min-width:82px;padding:9px;border:0;background:#11120f;color:#777a73;font-size:7px;font-weight:900}.settings-tabs button.active{background:#ddd7c9;color:#090a08}.settings-content{padding:12px;overflow:auto}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.settings-grid label,.settings-readout,.settings-grid>button{min-height:68px;padding:10px;border:1px solid #34352f;border-radius:5px;background:#10110e}.settings-grid label{display:grid;gap:8px;font-size:7px;color:#8c8e87}.settings-readout{display:grid;align-content:center;gap:5px}.settings-readout span{font-size:6px;color:#72746d}.settings-readout b{font-size:9px;color:#d9d6cd}.settings-grid>button{color:#d9bd61;font-size:8px;font-weight:900}
@media(max-width:760px){header .transport{gap:7px}.save-now,.settings-button{min-width:calc(50% - 5px);order:20}.settings-dialog{width:calc(100vw - 14px);max-height:92dvh}.settings-shell{max-height:92dvh}.settings-tabs button{min-width:92px}.settings-grid{grid-template-columns:1fr}.settings-grid label,.settings-readout,.settings-grid>button{min-height:62px}}

/* v2.89 — compact workstation transport */
@media(max-width:760px){
 #studio>header{position:sticky;top:0;z-index:30;background:rgba(8,9,7,.96);backdrop-filter:blur(12px);border-bottom:1px solid #33342f;padding:5px 7px}
 #studio>header>div:first-child{min-height:24px;display:flex;align-items:center;justify-content:space-between}
 #studio>header>div:first-child b{font-size:11px;letter-spacing:.04em}#studio>header>div:first-child span{font-size:6px}
 header .transport{display:grid;grid-template-columns:38px 38px minmax(94px,1fr) 68px 38px 38px;gap:4px;align-items:center}
 header .transport>#undo,header .transport>#redo,header .transport>#play,header .transport>#stop,.save-now,.settings-button{min-height:38px;padding:4px 6px}
 header .transport>#play{font-size:12px}header .transport>#stop{font-size:9px}.save-now,.settings-button{min-width:0!important;order:initial;font-size:0}
 .save-now:after{content:"SAVE";font-size:7px}.settings-button:after{content:"⚙";font-size:15px}
 header .record-cluster{grid-column:1/-1;display:grid;grid-template-columns:72px 82px 1fr 72px;gap:4px}
 header .record-cluster button,header .record-cluster label{min-height:34px}
 header .transport>label:not(.transport-secondary){font-size:6px}
 header .transport>label:has(#quantize),header .transport>label:has(#recMode),header .transport>label:has(#swing),header .transport>label:has(#volume),header .transport>.project-file-action,#save{display:none}
 header .transport>.transport-secondary{display:none!important}
 .workspace-tabs{position:sticky;top:112px;z-index:20;background:#090a08;box-shadow:0 5px 12px rgba(0,0,0,.32)}
 .field{padding-top:5px}
}

/* v2.90 — UI cleanup / hierarchy normalization */
button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.42}
button:focus-visible,select:focus-visible,input:focus-visible{outline:1px solid #d8ba5d;outline-offset:2px}
.center>*,.right>*,.sampler-stage,.step-editor{min-width:0}
.section-title small,.sample-load-copy small{max-width:58ch}
@media(max-width:760px){
 .section-title small,.sample-load-copy small{display:none}
 .sampler-command{padding:8px 9px}.sampler-command>div:first-child small{font-size:6px}
 .section-title{min-height:28px;margin:5px 2px}.section-title span{font-size:10px}
 .sample-load-zone{grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:7px}
 .sample-load-primary{min-height:48px}.sample-load-copy{display:none}.sample-load-zone #sampleStatus{max-width:145px;white-space:normal;text-align:right;line-height:1.35}
 .import-browser{margin-top:6px}.import-browser-head{min-height:38px;padding:6px 8px}.import-file-list{min-height:30px;padding:6px 8px}
 .wave-wrap{margin-top:7px}.sample-edit-head{min-height:34px;padding:6px 8px}.sample-edit-head small{font-size:5px}
 .sampler-stage{margin-top:7px}.pads{gap:5px}.pad{min-height:82px}
 .pad-actions{gap:5px;margin-top:6px}.pad-actions button{min-height:44px}
 .seq-head{margin-top:9px;min-height:34px}.steps{gap:5px}.step-editor{margin-top:6px;padding:8px}
 .step-editor>span{grid-column:1/-1}
 #sessionSidebar{display:none}
}

/* v2.91 — sampler-first information hierarchy */
.wave-wrap{border-color:#46473f;background:linear-gradient(180deg,#171815,#0b0c09)}
.sample-edit-head{border-bottom:1px solid #3b3c36}.sample-edit-head span{letter-spacing:.12em}
#waveform{display:block;width:100%;min-height:112px;border-bottom:1px solid #34352f;background:linear-gradient(180deg,#202324,#151819)}
.sample-range-readout{background:#0c0d0b}.slice-focus-bar{background:#11120f}
.sound-mobile-nav{border:1px solid #393a34;border-radius:6px;background:#090a08;padding:3px}.sound-mobile-tab{border:0!important;background:transparent!important}.sound-mobile-tab.active{background:#ded8ca!important;color:#090a08!important}
.sound-quick-strip{border:1px solid #3b3c36;border-radius:6px;background:linear-gradient(180deg,#151613,#0c0d0a)}
.sampler-control-panel{border:1px solid #46473f;border-radius:6px;background:#0d0e0b}.sampler-settings-nav{overflow:auto;scrollbar-width:none}.sampler-settings-nav::-webkit-scrollbar{display:none}
.sound-controls{border-top:1px solid #30312c}
@media(max-width:760px){
 .wave-wrap{padding:5px}.sample-edit-head{min-height:30px}.sample-edit-head small{opacity:.72}
 #waveform{min-height:128px}
 .sample-range-readout{grid-template-columns:1fr 1fr auto;gap:5px;padding:6px}.sample-range-readout span{font-size:6px}.sample-range-readout button{min-height:36px}
 .slice-focus-bar{grid-template-columns:62px 1fr 62px 58px;gap:4px;padding:5px}.slice-focus-bar button{min-height:38px}
 .chop-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px}.chop-actions button{min-width:0;min-height:40px;padding:4px;font-size:6px}.chop-actions .snap-note{grid-column:1/4}.chop-actions .slice-readout{grid-column:4}
 #soundPanel{padding:6px}.sound-mobile-nav{position:sticky;top:112px;z-index:18;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.sound-mobile-tab{min-height:38px;font-size:6px}
 .sound-quick-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px}.sound-quick-strip>button{min-height:40px}.sound-quick-strip>label,.sound-quick-strip>select{grid-column:span 2;min-width:0}
 .sampler-control-panel{margin-top:6px}.sampler-panel-head{padding:8px}.sampler-settings-nav button{min-width:78px;min-height:38px}
 .sound-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:6px}.sound-controls>label,.pad-inserts{min-width:0}
}

/* v2.92 — native-control cleanup + tactile consistency */
select,input[type=number]{appearance:none;-webkit-appearance:none;background:#0b0c09;color:#dedbd2;border:1px solid #3c3d37;border-radius:4px}
select{background-image:linear-gradient(45deg,transparent 50%,#777a73 50%),linear-gradient(135deg,#777a73 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat;padding-right:22px}
input[type=range]{appearance:none;-webkit-appearance:none;height:22px;background:transparent;filter:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border:1px solid #3b3c36;border-radius:3px;background:linear-gradient(90deg,#a98d38,#e0c66d 35%,#393a35 35%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-7px;border-radius:50%;border:1px solid #aaa69a;background:radial-gradient(circle at 38% 32%,#e3dfd4,#77766f 58%,#20211d);box-shadow:0 1px 4px #000}
input[type=range]::-moz-range-track{height:4px;border:1px solid #3b3c36;border-radius:3px;background:#393a35}input[type=range]::-moz-range-progress{height:4px;background:#b99b42}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:1px solid #aaa69a;background:#aaa69a}
button{transition:background .1s ease,border-color .1s ease,transform .06s ease}button:active:not(:disabled){transform:translateY(1px)}
@media(max-width:760px){select,input[type=number]{min-height:36px;padding:5px 24px 5px 8px;font-size:8px}input[type=range]{min-height:32px}input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-8px}.step-editor select{width:100%}}

/* v2.94 — sampler precision surface */
.wave-stage{position:relative;overflow:hidden;border-bottom:1px solid #34352f}.wave-stage #waveform{border-bottom:0;touch-action:none}.wave-playhead{position:absolute;z-index:4;top:0;bottom:0;left:0;width:1px;background:#e2c55f;box-shadow:0 0 5px rgba(226,197,95,.75);pointer-events:none;opacity:0;transform:translateX(0)}.wave-playhead.active{opacity:1}
.wave-tools{display:grid;grid-template-columns:42px 1fr 42px 54px;gap:4px;align-items:center;padding:5px 6px;background:#0b0c09;border-bottom:1px solid #30312c}.wave-tools button{min-height:34px;border:1px solid #393a34;border-radius:4px;background:#12130f;color:#d9d6cd;font-weight:900}.wave-tools span{text-align:center;font-size:7px;color:#8c8e87;letter-spacing:.1em}
.sample-range-readout span{font-variant-numeric:tabular-nums}.import-file{border-left:2px solid transparent}.import-file:focus,.import-file:hover{border-left-color:#c9a846}
@media(max-width:760px){.wave-stage #waveform{min-height:142px}.wave-tools{grid-template-columns:40px 1fr 40px 52px}.wave-tools button{min-height:38px}.sample-range-readout span{font-size:7px}}

/* v2.96 — fine trim and edit-state feedback */
.trim-nudge{display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;gap:4px;padding:5px 6px;background:#0a0b09;border-bottom:1px solid #30312c}.trim-nudge button{min-height:34px;border:1px solid #393a34;border-radius:4px;background:#11120f;color:#bbb8af;font-size:6px;font-weight:900}.trim-nudge span{align-self:center;padding:0 6px;color:#777a73;font-size:6px;letter-spacing:.1em}.wave-stage.editing{box-shadow:inset 0 0 0 1px #b89b42}.wave-stage.auditioning{box-shadow:inset 0 0 0 1px #6f887b}.sample-range-readout .changed{color:#e0c36a}
@media(max-width:760px){.trim-nudge{grid-template-columns:1fr 1fr 1fr 1fr}.trim-nudge span{display:none}.trim-nudge button{min-height:40px}}

/* v2.97 — obvious instrument/preset selection */
.preset-browser{grid-column:1/-1;border:1px solid #3a3b35;border-radius:6px;padding:8px;background:#0b0c09}.preset-browser>span{display:block;margin-bottom:7px;font-size:7px;letter-spacing:.12em;color:#8d8f88}.preset-categories,.preset-grid{display:grid;gap:5px}.preset-categories{grid-template-columns:repeat(3,1fr);margin-bottom:6px}.preset-categories button{min-height:34px}.preset-categories .active{background:#ded8ca;color:#090a08}.preset-grid{grid-template-columns:repeat(3,1fr)}.preset-grid button{min-height:58px;text-align:left;padding:8px;border:1px solid #3a3b35;background:#12130f;color:#ddd9cf;font-weight:900}.preset-grid button small{display:block;margin-top:5px;color:#777a73;font-size:6px}.preset-grid button.active{border-color:#d2b34e;box-shadow:inset 0 0 0 1px #d2b34e}.open-piano-roll{width:100%;min-height:42px;margin-top:7px;border:1px solid #5c5132;background:#17140c;color:#d8ba5d;font-weight:900}
@media(max-width:760px){.preset-grid{grid-template-columns:repeat(2,1fr)}.preset-grid button{min-height:62px}.open-piano-roll{min-height:46px}}

/* v2.98 — melodic piano roll */
.piano-roll{margin-top:8px;border:1px solid #45463f;border-radius:6px;overflow:hidden;background:#090a08}.piano-roll-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #393a34;background:#141512}.piano-roll-head b{letter-spacing:.12em}.piano-roll-head small{display:block;margin-top:3px;color:#858780;font-size:6px}.piano-roll-head button{width:38px;height:34px}.piano-roll-body{display:grid;grid-template-columns:58px minmax(520px,1fr);overflow:auto;max-height:420px}.piano-keys,.piano-grid{display:grid;grid-template-rows:repeat(25,24px)}.piano-keys button{border:0;border-bottom:1px solid #2e2f2b;background:#d7d2c7;color:#111;font-size:6px;font-weight:900}.piano-keys button.black{background:#282925;color:#c5c1b8}.piano-grid{grid-template-columns:repeat(16,minmax(30px,1fr));position:relative}.piano-cell{border:0;border-right:1px solid #252622;border-bottom:1px solid #292a26;background:#10110e;min-height:24px}.piano-cell.beat{border-right-color:#4b4c45}.piano-cell.active{background:#c6a743;box-shadow:inset 0 0 0 1px #ead16d}.piano-cell.selected{outline:1px solid #f0df9a;outline-offset:-2px}
@media(max-width:760px){.piano-roll{margin:7px 0}.piano-roll-body{grid-template-columns:48px 560px;max-height:390px}.piano-keys,.piano-grid{grid-template-rows:repeat(25,28px)}.piano-cell{min-height:28px}}

/* v2.99 — piano roll editing ergonomics */
.piano-roll-tools{display:grid;grid-template-columns:64px 1fr 64px 100px;gap:5px;padding:6px;border-bottom:1px solid #30312c}.piano-roll-tools button{min-height:34px}.piano-roll-tools span{align-self:center;text-align:center;color:#8e9089;font-size:7px}.piano-roll-edit{display:grid;grid-template-columns:1fr 140px 150px;gap:8px;align-items:center;padding:8px;border-top:1px solid #34352f}.piano-roll-edit label{font-size:6px;color:#8b8d86}.piano-roll-edit span{font-size:7px;color:#d4b650;text-align:right}.piano-cell.playing{box-shadow:inset 0 0 0 2px #e9d67c}
@media(max-width:760px){.piano-roll-tools{grid-template-columns:58px 1fr 58px 86px}.piano-roll-edit{grid-template-columns:1fr 100px}.piano-roll-edit span{grid-column:1/-1;text-align:left}}

/* v3.00 — unified instrument interaction states */
.instrument-context{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.instrument-context span{font-size:7px;letter-spacing:.12em;color:#8d8f88}.instrument-context b{font-size:7px;color:#d6b94f}.preset-grid button{position:relative}.preset-grid button:active{transform:translateY(1px)}.preset-grid button.active:after{content:"LOADED";position:absolute;right:7px;top:6px;font-size:5px;color:#d6b94f;letter-spacing:.08em}.pad.instrument-ready{border-color:#776936}.pad.instrument-ready:after{content:"INST";position:absolute;right:6px;top:5px;font-size:5px;color:#bca450}.open-piano-roll.ready{border-color:#d1b34e;background:#1b170d}.open-piano-roll.ready:after{content:" · READY";color:#8e7b42}

/* v3.01 — piano roll refinement */
.piano-roll-settings{display:grid;grid-template-columns:100px 1fr 130px 100px;gap:7px;align-items:end;padding:7px;border-bottom:1px solid #34352f;background:#0d0e0b}.piano-roll-settings label{display:grid;gap:4px;color:#7f817a;font-size:6px;letter-spacing:.06em}.piano-roll-settings select{min-height:34px}.piano-roll-settings button{min-height:34px}.piano-roll.settings-hidden .piano-roll-settings label{display:none}.piano-roll.settings-hidden .piano-roll-settings{grid-template-columns:1fr}.piano-grid{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(210,179,78,.12) calc(25% - 1px),rgba(210,179,78,.12) 25%)}.piano-cell:nth-child(16n+1){border-left:1px solid #4c493a}.piano-cell.active{background:linear-gradient(180deg,#d2b44f,#9f842f);color:#080907}.piano-cell.selected{outline:2px solid #eee1ad;outline-offset:-2px}.piano-roll-head{position:sticky;top:0;z-index:4}.piano-keys{position:sticky;left:0;z-index:3}.piano-roll-edit input[type=range]{width:100%}
@media(max-width:760px){.piano-roll-settings{grid-template-columns:86px 1fr}.piano-roll-settings label:nth-child(3),.piano-roll-settings button{grid-column:auto}.piano-roll-head{padding:7px 8px}.piano-roll-body{scrollbar-width:thin}.piano-roll-edit{position:sticky;bottom:0;background:#0b0c09;z-index:4}}

/* v3.02 — direct note manipulation */
.note-actions{display:grid;grid-template-columns:72px 44px 44px 64px 64px 86px 70px 1fr;gap:4px;padding:6px;border-top:1px solid #34352f;background:#0c0d0a}.note-actions button{min-height:34px;font-size:6px}.note-actions #prSelectMode.active{background:#ded8ca;color:#090a08}.note-actions span{align-self:center;text-align:right;color:#8d8f88;font-size:6px}.piano-cell.multi-selected{outline:2px solid #d7bb5a;outline-offset:-2px}.piano-cell.transport-step{box-shadow:inset 3px 0 0 #e5cf76}
@media(max-width:760px){.note-actions{grid-template-columns:repeat(4,1fr)}.note-actions button{min-height:40px}.note-actions span{grid-column:1/-1;text-align:left}}

/* v3.04 — professional manipulation feedback */
.note-actions{grid-template-columns:72px 44px 44px 64px 64px 86px 70px 58px 58px 1fr}.piano-roll:has(.transport-step) #prMultiStatus:after{content:" · PLAYING";color:#d5b84f}.slice-focus-bar{flex-wrap:wrap}.slice-focus-bar button{min-height:34px}.wave-stage.slice-editing{outline:1px solid #b79d42;outline-offset:2px}
@media(max-width:760px){.note-actions{grid-template-columns:repeat(4,1fr)}.slice-focus-bar button{min-height:40px;flex:1 1 72px}}

/* v3.09 — DBL track / sequence timeline */
.arrange-panel{margin-top:8px;border:1px solid #383a37;border-radius:7px;overflow:hidden;background:#090b0b;color:#d4d2cc}.arrange-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 10px;background:#111313;border-bottom:1px solid #343633}.arrange-head b{font-size:10px;letter-spacing:.12em}.arrange-head small{display:block;margin-top:3px;color:#777b78;font-size:6px}.arrange-tools{display:flex;align-items:center;gap:5px}.arrange-tools button,.arrange-tools label{min-height:34px;border:1px solid #343735;border-radius:4px;background:#141616;color:#b8b7b2;padding:6px 9px;font-size:6px}.arrange-shell{display:grid;grid-template-columns:220px minmax(720px,1fr);grid-template-rows:38px auto;overflow:auto;max-height:620px}.arrange-track-head{position:sticky;left:0;top:0;z-index:6;padding:7px 10px;background:#151717;border-right:1px solid #343633;border-bottom:1px solid #343633}.arrange-track-head span{display:block;font-size:8px;font-weight:900}.arrange-track-head small{font-size:5px;color:#6f7370}.arrange-ruler{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(16,minmax(54px,1fr));background:#111313;border-bottom:1px solid #343633}.arrange-ruler span{padding:12px 7px 8px;border-left:1px solid #292c2a;color:#777b78;font-size:6px}.arrange-track-list{position:sticky;left:0;z-index:4;background:#0d0f0f;border-right:1px solid #343633}.arrange-track-row{height:52px;display:grid;grid-template-columns:28px 1fr 34px 34px 28px;align-items:center;gap:4px;padding:4px 6px;border-bottom:1px solid #292c2a}.arrange-track-row.selected{background:#171a1b;box-shadow:inset 2px 0 #aaa79e}.arrange-track-row>span{color:#6f7370;font-size:6px;text-align:center}.arrange-track-id b{display:block;font-size:8px}.arrange-track-id small{display:block;margin-top:2px;color:#717572;font-size:5px}.arrange-track-row button{height:30px;border:1px solid #343735;border-radius:4px;background:#151717;color:#bbb9b3;font-size:6px}.arrange-timeline{position:relative;min-width:864px;background-color:#0b0d0d;background-image:linear-gradient(90deg,rgba(139,143,138,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(139,143,138,.05) 1px,transparent 1px);background-size:54px 100%,13.5px 100%}.arrange-lane{height:52px;position:relative;border-bottom:1px solid #242725}.arrange-clip{position:absolute;top:5px;height:42px;border:1px solid rgba(190,190,180,.16);border-radius:4px;padding:5px 7px;overflow:hidden;color:#dedbd5;font-size:6px;font-weight:900;text-align:left;box-shadow:inset 0 1px rgba(255,255,255,.04)}.arrange-clip small{display:block;margin-top:10px;opacity:.55;font-size:5px;letter-spacing:.08em}.arrange-clip:nth-child(4n+1){background:#5b4c3f}.arrange-clip:nth-child(4n+2){background:#604346}.arrange-clip:nth-child(4n+3){background:#555642}.arrange-clip:nth-child(4n){background:#44465d}.arrange-lane:nth-child(5n+5) .arrange-clip{background:#354e5d}.arrange-lane:nth-child(5n+1) .arrange-clip{background:#40594e}.arrange-inspector{display:grid;grid-template-columns:minmax(170px,.7fr) 1.5fr auto;gap:10px;align-items:center;padding:9px 10px;border-top:1px solid #343633;background:#101212}.arrange-inspector>div:first-child small,.arrange-inspector>div:first-child span{display:block;color:#747875;font-size:5px}.arrange-inspector>div:first-child b{display:block;margin:3px 0;font-size:11px}.arrange-inspector-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.arrange-inspector-actions button{min-height:38px;border:1px solid #383b38;border-radius:4px;background:#171919;color:#c4c2bc;font-size:6px;font-weight:900}.arrange-boundary{color:#666a67;font-size:5px;max-width:170px}.workspace-tabs:has([data-workspace="arrange"]){grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.arrange-head{align-items:flex-start;flex-direction:column}.arrange-tools{width:100%;display:grid;grid-template-columns:1fr 1fr 42px 42px}.arrange-shell{grid-template-columns:148px 864px;max-height:500px}.arrange-track-row{grid-template-columns:20px 1fr 30px 30px}.arrange-track-row>button:last-child{display:none}.arrange-track-id b{font-size:7px}.arrange-track-id small{font-size:5px}.arrange-inspector{grid-template-columns:1fr}.arrange-inspector-actions{grid-template-columns:repeat(4,1fr)}.arrange-boundary{max-width:none}.workspace-tabs{grid-template-columns:repeat(4,1fr)!important}.workspace-tab{font-size:6px;padding-left:4px;padding-right:4px}}

/* v3.09 arrangement clip editing */
.arrange-clip.selected{outline:1px solid #c2beb3;outline-offset:1px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 2px 8px rgba(0,0,0,.35)}.arrange-clip{touch-action:none}.arrange-clip:after{content:"";position:absolute;right:0;top:0;bottom:0;width:8px;border-left:1px solid rgba(255,255,255,.12);cursor:ew-resize}.arrange-inspector-actions{grid-template-columns:repeat(4,1fr)}.arrange-inspector-actions button.active{background:#d2cec3;color:#101212}.arrange-clip.dragging{opacity:.78;z-index:8}.arrange-clip.resizing{outline:1px dashed #aaa79e}
@media(max-width:760px){.arrange-inspector-actions{grid-template-columns:repeat(4,1fr)}.arrange-inspector-actions button{min-height:40px}}

/* v3.10 — truthful song transport */
.arrange-timeline-wrap{position:relative;min-width:0;overflow:hidden}.arrange-timeline-wrap .arrange-timeline{height:100%}.arrange-playhead{position:absolute;z-index:12;top:0;bottom:0;left:0;width:1px;background:#b8b3a8;pointer-events:none;opacity:.82}.arrange-playhead:before{content:"";position:absolute;top:0;left:-3px;width:7px;height:5px;background:#b8b3a8;clip-path:polygon(0 0,100% 0,50% 100%)}

/* v3.12 — elastic song timeline */
.arrange-ruler{grid-template-columns:repeat(var(--arrange-bars,16),minmax(54px,1fr))}
.arrange-timeline{min-width:calc(var(--arrange-bars,16) * 54px)}

/* v3.18 — truthful clip mute */
.arrange-clip.muted{opacity:.42;filter:saturate(.35)}

/* DBL performance sampler — primary MAKE surface */
.sampler-stage{margin:0 auto 16px;padding:12px;border:1px solid #34322c;border-radius:12px;background:linear-gradient(180deg,#171713,#0c0d0c);box-shadow:inset 0 1px 0 #4a4639,0 10px 28px rgba(0,0,0,.22)}
.sampler-stage .pads{gap:8px}
.sampler-stage .pad{min-height:108px;border-color:#514a3b;background:radial-gradient(circle at 32% 24%,#343128 0,#24231e 34%,#111210 78%);box-shadow:inset 0 1px 0 #69604b,inset 0 -14px 30px #080908,0 3px 8px #050505}
.sampler-stage .pad:nth-child(4n+2){background:radial-gradient(circle at 32% 24%,#332b29 0,#241f1e 34%,#111210 78%)}
.sampler-stage .pad:nth-child(4n+3){background:radial-gradient(circle at 32% 24%,#292e28 0,#1d211d 34%,#101210 78%)}
.sampler-stage .pad:nth-child(4n+4){background:radial-gradient(circle at 32% 24%,#2d2931 0,#201d23 34%,#101110 78%)}
.sampler-stage .pad.selected{outline:2px solid #c9a84d;outline-offset:2px;color:#f0e5c5}
@media(max-width:520px){.sampler-stage{padding:9px}.sampler-stage .pads{gap:7px}.sampler-stage .pad{min-height:76px}.sampler-stage .pad b{font-size:11px}.pad-actions{margin-top:2px}}

/* v3.25 protected UI contract: performance sampler and track panel are separate first-class surfaces */
.sampler-stage{display:grid!important;visibility:visible!important;opacity:1!important}
.sampler-stage .pads{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;visibility:visible!important;min-height:320px}
.sampler-stage .pad{display:flex!important;flex-direction:column;align-items:center;justify-content:center}
.arrange-panel{border-color:#4a463d;background:#0b0c0b;box-shadow:inset 0 1px 0 #34332d}
.arrange-head{min-height:58px;background:linear-gradient(180deg,#1a1a17,#111210)}
.arrange-head b{font-size:12px;letter-spacing:.16em}
.arrange-shell{grid-template-columns:196px minmax(900px,1fr);grid-template-rows:42px auto;max-height:640px}
.arrange-track-row,.arrange-lane{height:58px}
.arrange-track-row{grid-template-columns:24px 1fr 32px 32px 26px;border-bottom-color:#34332d}
.arrange-track-row.selected{background:#22221e;box-shadow:inset 3px 0 #c3a24b}
.arrange-track-id b{font-size:9px;letter-spacing:.04em}.arrange-track-id small{font-size:6px}
.arrange-timeline{min-width:1024px;background-color:#0c0e0d;background-image:linear-gradient(90deg,rgba(205,196,167,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(205,196,167,.045) 1px,transparent 1px);background-size:64px 100%,16px 100%}
.arrange-ruler{grid-template-columns:repeat(16,minmax(64px,1fr));background:#171816}.arrange-ruler span{font-size:7px}
.arrange-clip{top:6px;height:46px;border-color:rgba(225,218,195,.24);font-size:7px;box-shadow:inset 0 1px rgba(255,255,255,.08),0 2px 7px rgba(0,0,0,.3)}
.arrange-clip:nth-child(4n+1){background:#66513f}.arrange-clip:nth-child(4n+2){background:#6a4649}.arrange-clip:nth-child(4n+3){background:#626344}.arrange-clip:nth-child(4n){background:#504b68}.arrange-lane:nth-child(5n+5) .arrange-clip{background:#3c5866}.arrange-lane:nth-child(5n+1) .arrange-clip{background:#3e6257}
@media(max-width:760px){.sampler-stage .pads{min-height:292px}.sampler-stage .pad{min-height:68px!important}.arrange-panel{margin-left:0;margin-right:0}.arrange-shell{grid-template-columns:132px 1024px;max-height:560px}.arrange-track-row,.arrange-lane{height:54px}.arrange-track-row{grid-template-columns:18px 1fr 28px 28px}.arrange-track-head{width:132px}.arrange-head{position:sticky;left:0;z-index:8}.arrange-inspector{position:sticky;left:0;min-width:min(100vw,760px)}}

/* v3.25 project controls — DAW file actions stay separate from transport */
.project-cluster{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding-left:7px;border-left:1px solid #3b3a34}.project-cluster .project-file-action,.project-cluster .save-now{min-height:30px}.export-project{border-color:#555248!important;font-weight:900;letter-spacing:.06em}
@media(max-width:760px){.project-cluster{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:6px 0 0;border-left:0;border-top:1px solid #34342f}.project-cluster .project-file-action,.project-cluster .save-now{grid-column:auto;min-height:42px;display:flex;align-items:center;justify-content:center}}

/* DBL v3.26 FX macro sidebar — visible performance controls without copying another DAW's skin */
.fx-macro-slot{display:grid!important;gap:10px;padding:12px!important}.fx-slot-head{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px}.fx-slot-head small{font-size:9px;letter-spacing:.08em}.fx-macro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fx-macro{display:grid;gap:5px;min-width:0}.fx-macro b{font-size:9px;font-weight:600;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fx-macro input[type=range]{width:100%;accent-color:currentColor}.fx-slot-actions{display:flex;gap:6px}.fx-slot-actions button{flex:1;min-height:30px;font-size:9px}@media(max-width:760px){.right.fx-open{width:min(92vw,380px)}.fx-macro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.mixer-return-strip{border-left:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}.mixer-return-strip .strip-select{cursor:default}.mixer-return-strip .strip-select span{font-size:8px;letter-spacing:.12em;opacity:.62}


/* v3.29 — ACTIVE visual hierarchy: preserve the protected sampler/timeline contract */
.workspace-tabs{position:sticky;top:0;z-index:18;padding:5px;background:rgba(8,9,9,.94);backdrop-filter:blur(10px);border-bottom:1px solid #35342f}
.workspace-tab{position:relative;min-height:38px;transition:background .14s ease,border-color .14s ease,transform .08s ease}
.workspace-tab.active:after{content:"";position:absolute;left:18%;right:18%;bottom:3px;height:2px;background:#c9a84d;border-radius:2px}
.workspace-tab:active{transform:translateY(1px)}
.sampler-command{border:1px solid #3d3a31;border-radius:7px;background:linear-gradient(180deg,#171814,#10110f);box-shadow:inset 0 1px rgba(255,255,255,.035)}
.bank-strip .bank{min-width:38px;min-height:34px;transition:transform .08s ease,border-color .14s ease}
.bank-strip .bank:active{transform:translateY(1px)}
.bank-strip .bank.active{border-color:#c9a84d;box-shadow:inset 0 0 0 1px rgba(201,168,77,.28)}
.sampler-stage .pad{transition:transform .07s ease,border-color .12s ease,box-shadow .12s ease}
.sampler-stage .pad:active{transform:translateY(2px) scale(.992)}
.sampler-stage .pad.selected{box-shadow:inset 0 1px 0 #74694f,inset 0 -14px 30px #080908,0 0 0 1px rgba(201,168,77,.32),0 6px 18px rgba(0,0,0,.32)}
.arrange-track-row,.arrange-clip{transition:background .12s ease,opacity .12s ease,box-shadow .12s ease}
.arrange-track-row.selected .arrange-track-id b{color:#ead487}
.arrange-clip.selected{outline-color:#d6bd70;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 0 0 1px rgba(201,168,77,.24),0 4px 12px rgba(0,0,0,.38)}
.mixer-mode-tabs button.active{box-shadow:inset 0 -2px #c9a84d}
.mixer-inspector{border-top-color:#4a463a}
#save{font-variant-numeric:tabular-nums;letter-spacing:.05em}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #d1b65d;outline-offset:2px}
@media(max-width:760px){
 .workspace-tabs{top:0}
 .workspace-tab{min-height:42px}
 .sampler-command{position:relative;z-index:2}
 .bank-strip .bank{min-height:40px}
 .sampler-stage .pad{touch-action:manipulation}
 .arrange-inspector-actions button{min-height:44px}
}


/* v3.29 — restrained panel identity: subtle hue separates workspaces without visual noise */
:root{
 --dbl-panel-sampler:rgba(82,68,42,.105);
 --dbl-panel-sequence:rgba(72,70,48,.085);
 --dbl-panel-arrange:rgba(48,64,62,.11);
 --dbl-panel-mix:rgba(48,57,70,.12);
 --dbl-panel-sound:rgba(67,54,69,.10);
 --dbl-panel-fx:rgba(72,58,44,.105);
}
.sampler-stage{background:linear-gradient(180deg,var(--dbl-panel-sampler),rgba(12,13,12,.96) 48%),linear-gradient(180deg,#171713,#0c0d0c)}
#steps,.step-editor,.piano-roll{background-image:linear-gradient(180deg,var(--dbl-panel-sequence),rgba(9,10,8,.2))}
.arrange-panel{background:linear-gradient(180deg,var(--dbl-panel-arrange),rgba(11,12,11,.98) 90px)}
.mixer-panel.dedicated-mixer{background-image:linear-gradient(180deg,var(--dbl-panel-mix),rgba(9,10,10,.15))}
#soundPanel{background-image:linear-gradient(180deg,var(--dbl-panel-sound),rgba(9,10,9,.12))}
.right.fx-open,.fx-macro-slot{background-image:linear-gradient(180deg,var(--dbl-panel-fx),rgba(10,10,9,.16))}
.sampler-control-panel{background-image:linear-gradient(180deg,rgba(83,66,46,.09),rgba(10,11,9,.14))}
.quick-envelope{background:linear-gradient(180deg,rgba(70,58,72,.11),rgba(11,12,10,.96))}
.arrange-inspector{background:linear-gradient(90deg,rgba(48,64,62,.10),#101212 42%)}
.mixer-inspector{background:linear-gradient(90deg,rgba(48,57,70,.11),rgba(12,13,13,.98) 44%)}
@media(max-width:760px){
 .sampler-stage,#steps,.step-editor,.piano-roll,.arrange-panel,.mixer-panel.dedicated-mixer,#soundPanel,.right.fx-open{background-blend-mode:normal}
}


/* v3.29 — signal-flow hierarchy inside working panels */
.mixer-strips{background:linear-gradient(180deg,rgba(48,57,70,.07),transparent 42%)}
.mixer-strip{border-color:rgba(177,181,180,.16);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.mixer-strip.selected{border-color:rgba(201,168,77,.48);box-shadow:inset 0 2px rgba(201,168,77,.22),0 0 0 1px rgba(201,168,77,.08)}
.mixer-return-strip{background:linear-gradient(180deg,rgba(67,72,58,.13),rgba(255,255,255,.012))}
.master-strip{background:linear-gradient(180deg,rgba(91,76,45,.12),rgba(12,13,12,.96));border-left-color:rgba(201,168,77,.24)}
.mix-controls label,.sound-controls label,.quick-envelope label{padding:5px 6px;border-radius:4px;background:rgba(255,255,255,.018)}
input[type=range]{transition:filter .12s ease}
input[type=range]:active{filter:brightness(1.16)}
.fx-macro-slot{border-left:2px solid rgba(201,168,77,.16)}
.fx-macro-slot:focus-within{border-left-color:rgba(201,168,77,.52)}
.fx-slot-actions button[aria-pressed="true"],.mix-controls button[aria-pressed="true"]{border-color:#b89b49;box-shadow:inset 0 0 0 1px rgba(184,155,73,.18)}
.quick-envelope{border:1px solid rgba(126,105,130,.16);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.quick-envelope label{border-left:1px solid rgba(126,105,130,.2)}
.sampler-panel-context{border-left:2px solid rgba(177,145,74,.22);padding-left:9px}
.mixer-subview{border-top:1px solid rgba(126,139,153,.14);background:linear-gradient(180deg,rgba(48,57,70,.065),transparent)}


/* v3.29 — routing readability + mobile producer ergonomics */
.mixer-subview [data-route],.mixer-subview .routing-row,.mixer-subview .send-row{border:1px solid rgba(126,139,153,.13);border-radius:5px;background:rgba(48,57,70,.045)}
.mixer-subview [aria-pressed="true"],.mixer-subview .active{border-color:rgba(201,168,77,.42);box-shadow:inset 2px 0 rgba(201,168,77,.45)}
.mixer-return-strip:before{content:"RETURN";display:block;padding:4px 5px 0;font-size:5px;letter-spacing:.13em;opacity:.42}
.master-strip:before{content:"OUTPUT";display:block;margin-bottom:4px;font-size:5px;letter-spacing:.13em;color:#9d8950}
.mix-controls button,.fx-slot-actions button,.arrange-inspector-actions button{transition:transform .07s ease,border-color .12s ease,background .12s ease}
.mix-controls button:active,.fx-slot-actions button:active,.arrange-inspector-actions button:active{transform:translateY(1px)}
@media(max-width:760px){
 .mixer-bank{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
 .mixer-strip,.mixer-return-strip,.master-strip{scroll-snap-align:start}
 .mixer-inspector{position:sticky;bottom:0;z-index:14;box-shadow:0 -8px 20px rgba(0,0,0,.3)}
 .mix-controls{gap:7px}
 .mix-controls button{min-height:44px}
 .mix-controls label{min-height:48px}
 .fx-macro-slot{padding:13px!important}
 .fx-slot-actions button{min-height:42px}
 .quick-envelope label{min-height:48px}
 .sampler-settings-nav{overflow-x:auto;overscroll-behavior-x:contain}
 .sampler-settings-nav button{min-height:42px;min-width:74px}
 .arrange-inspector{box-shadow:0 -7px 18px rgba(0,0,0,.24)}
}


/* v3.29 — producer-state legibility: one visual language for armed/active/selected */
#play[aria-pressed="true"],#record[aria-pressed="true"],#automation[aria-pressed="true"],#metronome[aria-pressed="true"]{border-color:rgba(201,168,77,.58);box-shadow:inset 0 -2px rgba(201,168,77,.42),0 0 0 1px rgba(201,168,77,.08)}
#record[aria-pressed="true"]{background:linear-gradient(180deg,rgba(116,53,48,.42),rgba(35,22,21,.92))}
#automation[aria-pressed="true"]{background:linear-gradient(180deg,rgba(88,66,40,.32),rgba(23,20,15,.94))}
#metronome[aria-pressed="true"]{background:linear-gradient(180deg,rgba(62,72,61,.28),rgba(18,21,18,.94))}
.step.active,.piano-cell.active{box-shadow:inset 0 0 0 1px rgba(239,218,146,.34),0 0 8px rgba(201,168,77,.10)}
.step.playing,.piano-cell.transport-step{filter:brightness(1.13)}
.pad.playing,.pad:active{border-color:rgba(225,197,104,.72)}
.arrange-playhead{box-shadow:0 0 8px rgba(216,196,132,.22)}
.mixer-strip [aria-pressed="true"],.arrange-track-row [aria-pressed="true"]{border-color:rgba(201,168,77,.48);background:rgba(201,168,77,.09)}
.project-menu[open]>summary,.project-menu summary:focus-visible{border-color:rgba(201,168,77,.42);background:rgba(201,168,77,.055)}
#save:not(:empty){padding:5px 7px;border-radius:4px;background:rgba(255,255,255,.018)}
@media(max-width:760px){
 header .transport{row-gap:7px}
 #play,#stop,#record{min-height:42px}
 #save{min-height:30px;display:inline-flex;align-items:center}
}


/* v3.29 — depth and section framing without panel bloat */
.section-title,.seq-head,.mixer-console-head,.sample-edit-head,.sampler-panel-head{border-bottom-color:rgba(190,184,165,.15)}
.section-title{padding:8px 10px;border-radius:5px 5px 0 0;background:linear-gradient(90deg,rgba(82,68,42,.08),transparent 58%)}
.seq-head{background:linear-gradient(90deg,rgba(72,70,48,.075),transparent 62%)}
.mixer-console-head{background:linear-gradient(90deg,rgba(48,57,70,.11),transparent 62%)}
.sample-edit-head,.sampler-panel-head{background:linear-gradient(90deg,rgba(83,66,46,.08),transparent 64%)}
.wave-wrap,.piano-roll,.mixer-panel,.sampler-control-panel{box-shadow:inset 0 1px rgba(255,255,255,.025),0 5px 16px rgba(0,0,0,.12)}
.sample-load-zone{border-color:rgba(177,145,74,.2);background:linear-gradient(90deg,rgba(82,68,42,.07),rgba(255,255,255,.008))}
.import-browser{background:linear-gradient(180deg,rgba(61,60,50,.055),transparent)}
.step-editor{border-top:1px solid rgba(177,171,151,.12)}
.piano-roll-tools,.piano-roll-settings,.note-actions,.piano-roll-edit{background-color:rgba(11,12,10,.93)}
.arrange-tools button:focus-visible,.arrange-tools select:focus-visible,.mixer-mode-tabs button:focus-visible{outline-color:#d1b65d}
@media(hover:hover){
 button:not(:disabled):hover{border-color:rgba(201,188,144,.34)}
 .arrange-track-row:hover{background-color:rgba(255,255,255,.018)}
 .mixer-strip:hover{border-color:rgba(177,181,180,.25)}
 .fx-macro-slot:hover{background-color:rgba(255,255,255,.012)}
}
@media(max-width:760px){
 .section-title,.seq-head,.mixer-console-head,.sample-edit-head,.sampler-panel-head{padding-left:9px;padding-right:9px}
 .wave-wrap,.piano-roll,.mixer-panel,.sampler-control-panel{box-shadow:inset 0 1px rgba(255,255,255,.025),0 3px 10px rgba(0,0,0,.10)}
}


/* v3.29 — simplified scale-degree piano roll */
.piano-keys{background:#0d0e0c}
.piano-keys button,.piano-keys button.black{background:#171815;color:#aaa79e;border-color:#292a26;font-size:8px;letter-spacing:.02em}
.piano-keys button:nth-child(12n+1){color:#e1c66c;font-weight:900;border-top-color:rgba(201,168,77,.35)}
.piano-roll-tools{grid-template-columns:58px 1fr 58px 82px}
#prRange{font-weight:800;letter-spacing:.09em;color:#aaa79e}
.piano-roll-head small{letter-spacing:.06em}
@media(max-width:760px){
 .piano-roll-body{grid-template-columns:40px 560px}
 .piano-keys button,.piano-keys button.black{font-size:8px}
 .piano-roll-tools{grid-template-columns:54px 1fr 54px 78px}
}


/* v3.29 — DBL relationship-first composition cue */
.degree-principle{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid rgba(201,168,77,.16);background:linear-gradient(90deg,rgba(72,70,48,.12),rgba(12,13,11,.25))}
.degree-principle>b{font-size:7px;letter-spacing:.13em;color:#aaa79e}
.degree-principle>span{font-size:12px;font-weight:900;letter-spacing:.12em;color:#d7d3c8}
.degree-principle>span strong{color:#e1c66c;font-size:14px}
.degree-principle>small{font-size:6px;letter-spacing:.11em;color:#77766f}
@media(max-width:760px){
 .degree-principle{grid-template-columns:1fr auto;gap:5px 8px}
 .degree-principle>small{grid-column:1/-1}
}


/* v3.29 — scale/chord composer; whole tone is the DBL signature default */
.piano-roll-settings #prScale{border-color:rgba(201,168,77,.42);font-weight:900}
.piano-keys button.out-scale{opacity:.26}
.piano-keys button.in-scale{opacity:1}
.piano-grid .piano-cell.out-scale{opacity:.34}
.piano-grid .piano-cell.in-scale{background-image:linear-gradient(90deg,rgba(201,168,77,.028),transparent)}
#prChordStamp{border-color:rgba(201,168,77,.28);font-weight:850}
#prChordStamp:active{transform:translateY(1px)}
@media(max-width:760px){
 .piano-roll-settings{gap:6px}
 .piano-roll-settings label,.piano-roll-settings #prChordStamp{min-height:44px}
}


/* v3.29 — actionable relationship-first degree moves */
.degree-moves{display:flex;align-items:center;gap:4px;padding:2px 5px;border:1px solid rgba(201,168,77,.14);background:rgba(201,168,77,.025)}
.degree-moves>span{font-size:6px;letter-spacing:.1em;color:#77766f;margin-right:2px}
.degree-moves>button{min-width:28px;font-weight:900;color:#d8c477;border-color:rgba(201,168,77,.22)}
.degree-moves>button:hover,.degree-moves>button:focus-visible{background:rgba(201,168,77,.1);border-color:rgba(201,168,77,.42)}
@media(max-width:760px){.degree-moves>button{min-width:40px;min-height:40px}}


/* v3.29 — truthful active-scale identity without piano-roll clutter */
.scale-status{display:flex;align-items:center;gap:8px;min-height:22px;padding:3px 8px;border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.045);background:rgba(255,255,255,.012)}
.scale-status b{font-size:7px;letter-spacing:.12em;color:#aaa79e}
.scale-status span{font-size:6px;letter-spacing:.09em;color:#686862}
.scale-status.signature{background:linear-gradient(90deg,rgba(201,168,77,.075),rgba(201,168,77,.012) 48%,transparent)}
.scale-status.signature b{color:#e1c66c}
.scale-status.signature span{color:#8d8467}
@media(max-width:760px){.scale-status{min-height:26px}.scale-status span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}


/* v3.29 — chord geometry: show the relationship without adding labels */
.piano-grid .piano-cell.active.chord-tone{box-shadow:inset 0 0 0 1px rgba(201,168,77,.28);opacity:.88}
.piano-grid .piano-cell.active.chord-root{box-shadow:inset 0 0 0 1px rgba(225,198,108,.62),0 0 7px rgba(201,168,77,.08)}

/* runtime6 feel pass — fluid editing without changing musical snap */
.piano-roll input[type="range"],.arrange-inspector input[type="range"]{touch-action:pan-y;cursor:ew-resize}
.piano-cell{transition:background-color 70ms linear,box-shadow 70ms linear,outline-color 70ms linear}
.arrange-clip{touch-action:none;will-change:left,width;transition:box-shadow 90ms ease,filter 90ms ease}
.arrange-clip.dragging,.arrange-clip.resizing{transition:box-shadow 90ms ease,filter 90ms ease;filter:brightness(1.08);box-shadow:0 5px 16px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.08)}

/* runtime6 continuous motion */
#arrangePlayhead{left:0!important;will-change:transform;transition:transform 55ms linear;transform-origin:left center}
#stepVelocity,#stepNudge,#prVelocity,#prLength{touch-action:pan-y;cursor:ew-resize}


/* Detroit industrial instrument — visual pass 1: lived-in hardware, disciplined controls */
:root{
 --dbl-face:#171713;
 --dbl-face-hi:#20201b;
 --dbl-recess:#0b0c0b;
 --dbl-edge:#3b3931;
 --dbl-engrave:#a6a196;
 --dbl-cream:#d7d0bd;
}
body{background:
 radial-gradient(circle at 18% 8%,rgba(255,255,255,.025),transparent 28%),
 repeating-linear-gradient(92deg,rgba(255,255,255,.007) 0 1px,transparent 1px 5px),
 #080908}
header,.sampler-command,.wave-wrap,.arrange-panel,.mixer-panel,.sampler-control-panel,#soundPanel,.right{
 border-color:var(--dbl-edge);
 box-shadow:inset 0 1px rgba(255,255,255,.045),inset 0 -1px rgba(0,0,0,.65),0 7px 18px rgba(0,0,0,.24)
}
header{background:linear-gradient(180deg,#20201b,#121310 72%);border-bottom:1px solid #454238}
.section-title,.seq-head,.sample-edit-head,.mixer-console-head,.sampler-panel-head{
 text-shadow:0 1px #000;letter-spacing:.075em
}
button,.tool,.workspace-tab,.bank,.project-file-action,.project-menu>summary,.sample-load-primary,.import-browser-head label{
 border:1px solid #454239;
 border-radius:4px;
 background:linear-gradient(180deg,#25251f 0%,#191a16 48%,#11120f 100%);
 box-shadow:inset 0 1px rgba(255,255,255,.07),inset 0 -1px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.42);
 color:var(--dbl-cream);
 text-shadow:0 1px 1px #000;
 letter-spacing:.055em
}
button:active,.tool:active,.workspace-tab:active,.bank:active,.project-menu>summary:active{
 transform:translateY(1px);
 box-shadow:inset 0 1px 3px rgba(0,0,0,.75)
}
button[aria-pressed="true"],.tool.active,.workspace-tab.active,.bank.active{
 border-color:#827650;
 box-shadow:inset 0 0 0 1px rgba(218,194,116,.16),inset 0 -2px rgba(201,168,77,.3),0 1px 2px #000
}
/* Label-like words now read as small bordered hardware legends instead of loose text. */
.transport label,.arrange-tools label,.piano-roll-settings label,.mix-controls label,.sound-controls label,.quick-envelope label,
.arrange-track-create,.project-file-action,.sample-load-primary,.import-browser-head label{
 border:1px solid #3c3a32;
 border-radius:4px;
 background:linear-gradient(180deg,#1d1e19,#11120f);
 box-shadow:inset 0 1px rgba(255,255,255,.035);
 padding:4px 6px;
 color:var(--dbl-engrave);
 text-transform:uppercase;
 letter-spacing:.075em
}
.transport label select,.transport label input,.arrange-tools label select,.piano-roll-settings label select{
 margin-left:4px;border-color:#4a463b;background:#0c0d0b
}
.legacy-tools{background:linear-gradient(90deg,#11120f,#181914);border-right:1px solid #34332d;box-shadow:inset -1px 0 #070807}
.workspace-tabs{background:linear-gradient(180deg,#171814,#0d0e0c);border-bottom:1px solid #35332c}
.sampler-stage{border:1px solid #3d3a31;box-shadow:inset 0 2px 8px rgba(0,0,0,.7),0 5px 14px rgba(0,0,0,.18)}
.sampler-stage .pad{
 border:1px solid #514d41;border-radius:7px;
 background:linear-gradient(145deg,#292922,#151612 58%,#0d0e0c);
 box-shadow:inset 0 1px rgba(255,255,255,.065),inset 0 -12px 22px rgba(0,0,0,.42),0 4px 7px rgba(0,0,0,.48)
}
.sampler-stage .pad b{color:#ddd5c1;text-shadow:0 1px 2px #000}
.sampler-stage .pad small{color:#777268;letter-spacing:.12em}
.sampler-stage .pad.selected{border-color:#9a8750;box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -12px 24px #090a08,0 0 0 1px rgba(201,168,77,.24),0 5px 9px rgba(0,0,0,.55)}
.wave-stage,.arrange-timeline-wrap,.piano-roll-body{background-color:var(--dbl-recess);box-shadow:inset 0 2px 8px rgba(0,0,0,.72)}
.mixer-strip,.mixer-return-strip,.master-strip{background:linear-gradient(180deg,#1d1e19,#10110e);box-shadow:inset 1px 0 rgba(255,255,255,.025),inset -1px 0 rgba(0,0,0,.6)}
input[type=range]{filter:contrast(1.06)}
#save{border:1px solid #35332c;border-radius:3px;background:#0d0e0c;color:#8f8a7e;box-shadow:inset 0 1px 2px #000}


/* Detroit industrial instrument — visual pass 2: larger console + DAW fader identity */
:root{
 --dbl-fader:#d0a84a;
 --dbl-fader-hi:#f0d071;
 --dbl-fader-edge:#6e5726;
 --dbl-console-gap:12px;
}
#studio{max-width:none;width:100%;min-height:100vh}
.field{gap:var(--dbl-console-gap)}
.center{min-width:0}
.sampler-command,.section-title,.seq-head,.sample-edit-head,.arrange-head,.mixer-console-head,.sampler-panel-head{
 min-height:44px;padding-top:10px;padding-bottom:10px
}
.sampler-command strong,.section-title>span,.seq-head>b,.sample-edit-head>span,.arrange-head b,.mixer-console-head b,.sampler-panel-head b{
 font-size:clamp(10px,1vw,13px);letter-spacing:.12em
}
.workspace-tab,.legacy-tools .tool{min-height:46px;font-size:9px;font-weight:900}
.sampler-stage{padding:14px}
.sampler-stage .pads{gap:12px}
.sampler-stage .pad{min-height:clamp(88px,9vw,126px)}
.sampler-stage .pad b{font-size:clamp(12px,1.2vw,17px);letter-spacing:.06em}
.sampler-stage .pad small{font-size:7px}
.pad-actions{gap:7px}
.pad-actions button{min-height:42px;font-weight:900}
.arrange-panel,.mixer-panel.dedicated-mixer,.wave-wrap,.sampler-control-panel{border-width:1px}
.arrange-track-row{min-height:48px}
.mixer-strip,.mixer-return-strip,.master-strip{min-width:82px;padding:10px 7px}
.mixer-bank{gap:7px;padding:10px}
.mix-controls{gap:9px}

/* Gold/amber capped faders: readable against graphite like a dedicated studio console. */
input[type=range]{
 accent-color:var(--dbl-fader);
 height:20px;
}
input[type=range]::-webkit-slider-runnable-track{
 height:5px;border:1px solid #38352c;border-radius:2px;
 background:linear-gradient(180deg,#090a08,#191a15);
 box-shadow:inset 0 1px 2px #000,0 1px rgba(255,255,255,.025)
}
input[type=range]::-webkit-slider-thumb{
 -webkit-appearance:none;appearance:none;
 width:18px;height:22px;margin-top:-9px;border-radius:3px;
 border:1px solid var(--dbl-fader-edge);
 background:
 linear-gradient(90deg,transparent 0 42%,rgba(49,38,14,.65) 42% 58%,transparent 58%),
 linear-gradient(180deg,var(--dbl-fader-hi),var(--dbl-fader) 48%,#8d6f2d);
 box-shadow:inset 0 1px rgba(255,255,255,.42),inset 0 -2px rgba(62,43,12,.35),0 2px 4px #000
}
input[type=range]::-moz-range-track{
 height:5px;border:1px solid #38352c;border-radius:2px;background:#11120f;box-shadow:inset 0 1px 2px #000
}
input[type=range]::-moz-range-thumb{
 width:18px;height:22px;border-radius:3px;border:1px solid var(--dbl-fader-edge);
 background:linear-gradient(180deg,var(--dbl-fader-hi),var(--dbl-fader) 48%,#8d6f2d);
 box-shadow:inset 0 1px rgba(255,255,255,.4),0 2px 4px #000
}
.mixer-strip input[type=range],.mixer-return-strip input[type=range],.master-strip input[type=range]{
 filter:drop-shadow(0 1px 1px #000)
}
.master-strip input[type=range]::-webkit-slider-thumb{
 background:
 linear-gradient(90deg,transparent 0 42%,rgba(47,36,12,.72) 42% 58%,transparent 58%),
 linear-gradient(180deg,#f4d978,#caa348 50%,#826526)
}
@media(min-width:1180px){
 header{padding:10px 14px}
 .field{grid-template-columns:82px minmax(0,1fr) minmax(250px,310px)}
 .center{padding:12px}
 .sampler-stage .pad{min-height:112px}
 .arrange-panel,.mixer-panel.dedicated-mixer{min-height:420px}
}
@media(max-width:760px){
 .sampler-stage{padding:8px}
 .sampler-stage .pads{gap:7px}
 .sampler-stage .pad{min-height:78px}
 .workspace-tab,.legacy-tools .tool{min-height:44px}
}


/* Detroit industrial instrument — visual pass 3: pro-console density */
:root{--dbl-led-green:#65b96b;--dbl-led-amber:#e2ad45;--dbl-led-red:#cf5148;--dbl-silk:#aaa69c}
.mixer-bank{
 background:
 repeating-linear-gradient(90deg,transparent 0 81px,rgba(255,255,255,.035) 81px 82px,rgba(0,0,0,.48) 82px 84px),
 linear-gradient(180deg,#1a1b17,#0c0d0b);
 border:1px solid #3c3a32;box-shadow:inset 0 1px rgba(255,255,255,.04),inset 0 -3px 8px rgba(0,0,0,.5)
}
.mixer-strip,.mixer-return-strip,.master-strip{
 position:relative;border-radius:2px;border-color:#34332d;
 box-shadow:inset 1px 0 rgba(255,255,255,.025),inset -2px 0 rgba(0,0,0,.48),0 1px #050605
}
.mixer-strip:after,.mixer-return-strip:after,.master-strip:after{
 content:"";position:absolute;inset:3px;pointer-events:none;
 background:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.018) 50%,transparent 51%);
 opacity:.8
}
.mixer-strip b,.mixer-return-strip b,.master-strip b{font-size:8px;letter-spacing:.11em;color:#c9c5ba;text-shadow:0 1px #000}
.mixer-strip small,.mixer-return-strip small,.master-strip small{font-size:6px;color:#77756e;letter-spacing:.09em}
.meter{
 border:1px solid #272821!important;border-radius:2px!important;background:
 repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px),
 linear-gradient(180deg,rgba(207,81,72,.9) 0 12%,rgba(226,173,69,.85) 12% 31%,rgba(101,185,107,.72) 31% 100%),
 #080907!important;
 box-shadow:inset 0 1px 4px #000!important
}
.meter>i,.meter span,.meter-fill{box-shadow:0 0 5px rgba(122,198,104,.24)}
.mixer-strip input[type=range],.mixer-return-strip input[type=range],.master-strip input[type=range]{
 min-height:34px;background:
 repeating-linear-gradient(90deg,transparent 0 9%,rgba(190,186,174,.16) 9% 10%,transparent 10% 20%);
}
.mix-controls button,.mixer-strip button,.mixer-return-strip button,.master-strip button{
 min-height:28px;border-color:#4a4639;font-weight:900
}
.mix-controls button[aria-pressed="true"],.mixer-strip button[aria-pressed="true"]{
 background:linear-gradient(180deg,#cda64d,#765a22);color:#17130a;border-color:#e2c16d;text-shadow:0 1px rgba(255,255,255,.2);
 box-shadow:inset 0 1px rgba(255,255,255,.35),0 0 7px rgba(226,173,69,.15)
}
.master-strip{border-left:2px solid #6d654c;background:linear-gradient(180deg,#24231d,#11120f)}
.master-strip b{color:#e1d2a4}
.fx-macro-slot,.sampler-control-panel,.quick-envelope{
 border-radius:3px;border-color:#3b3931;
 background:
 linear-gradient(180deg,rgba(255,255,255,.025),transparent 18%),
 linear-gradient(180deg,#191a16,#0f100d)
}
.fx-macro-slot:before,.quick-envelope:before{
 content:"";display:block;height:3px;margin:-1px -1px 7px;
 background:linear-gradient(90deg,#4c493e,#252620 62%,#11120f)
}
button,.project-file-action,.project-menu>summary{position:relative}
button:not(.pad):not(.piano-cell):before,.project-file-action:before,.project-menu>summary:before{
 content:"";position:absolute;left:7px;right:7px;top:3px;height:1px;background:rgba(255,255,255,.075);pointer-events:none
}
@media(min-width:1180px){
 .mixer-strip,.mixer-return-strip,.master-strip{min-width:92px}
 .mixer-bank{gap:8px}
 .mixer-panel.dedicated-mixer{padding:12px}
}


/* Detroit industrial instrument — visual pass 4: DBL signature finish */
:root{--dbl-hot:#e7b84d;--dbl-hot-hi:#ffe08a;--dbl-steel:#8f918c;--dbl-black:#090a09}
header:after,.sampler-command:after,.arrange-head:after,.mixer-console-head:after{
 content:"";display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(231,184,77,.22) 18%,rgba(255,255,255,.07) 52%,transparent);pointer-events:none
}
header b,.sampler-command strong,.mixer-console-head b,.arrange-head b{
 color:#ddd8ca;text-shadow:0 1px #000,0 0 10px rgba(231,184,77,.035)
}
.sampler-command strong:before,.mixer-console-head b:before,.arrange-head b:before{
 content:"DBL";display:inline-flex;align-items:center;justify-content:center;
 min-width:25px;height:15px;margin-right:8px;border:1px solid #625b46;border-radius:2px;
 background:linear-gradient(180deg,#28271f,#12130f);color:#d7b95e;font-size:6px;letter-spacing:.13em;
 box-shadow:inset 0 1px rgba(255,255,255,.08),0 1px 2px #000;vertical-align:middle
}
.sampler-stage,.mixer-bank,.arrange-shell,.wave-stage{
 position:relative;
 background-image:
 radial-gradient(circle at 12% 17%,rgba(255,255,255,.018) 0 1px,transparent 1.4px),
 radial-gradient(circle at 73% 62%,rgba(0,0,0,.18) 0 1px,transparent 1.5px),
 linear-gradient(180deg,rgba(255,255,255,.012),transparent 18%);
 background-size:43px 37px,59px 53px,100% 100%
}
.sampler-stage:before,.mixer-bank:before,.arrange-shell:before{
 content:"";position:absolute;inset:5px;pointer-events:none;border:1px solid rgba(255,255,255,.018);
 box-shadow:inset 0 0 12px rgba(0,0,0,.22)
}
.sampler-stage .pad{
 outline:1px solid rgba(0,0,0,.48);outline-offset:2px;
 background:
 linear-gradient(135deg,rgba(255,255,255,.04),transparent 28%),
 linear-gradient(145deg,#2c2c25,#171814 56%,#0c0d0b)
}
.sampler-stage .pad.selected b{color:var(--dbl-hot-hi)}
.sampler-stage .pad.playing{
 border-color:#d3a942;box-shadow:inset 0 1px rgba(255,255,255,.1),inset 0 -12px 24px #090a08,0 0 12px rgba(231,184,77,.2),0 5px 9px #000
}
.bank-strip .bank.active,.workspace-tab.active,.tool.active{color:#f0d374}
.mixer-strip,.mixer-return-strip,.master-strip{padding-top:13px}
.mixer-strip:before{
 content:"";display:block;width:5px;height:5px;margin:0 auto 7px;border-radius:50%;
 background:#33352f;border:1px solid #0b0c0a;box-shadow:inset 0 1px rgba(255,255,255,.09)
}
.mixer-strip.selected:before{background:var(--dbl-hot);box-shadow:0 0 7px rgba(231,184,77,.48)}
.master-strip:before{color:#d5bd72}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 1px rgba(255,255,255,.45),0 0 0 2px rgba(231,184,77,.22),0 2px 4px #000}
.arrange-clip{border-radius:3px;border-color:#514d40;background:linear-gradient(180deg,#292a24,#171814)}
.arrange-clip.selected{border-color:#b09144;box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(231,184,77,.18),0 4px 12px #000}
.arrange-playhead{width:2px;background:linear-gradient(180deg,#ffe18a,#d6a83e 60%,#8b6721);box-shadow:0 0 7px rgba(231,184,77,.28)}
.fx-macro-slot:focus-within,.quick-envelope:focus-within{border-color:#615a45;box-shadow:inset 2px 0 rgba(231,184,77,.34)}
#save{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(hover:hover){
 .sampler-stage .pad:hover{border-color:#69614b;filter:brightness(1.045)}
 button:not(:disabled):hover{box-shadow:inset 0 1px rgba(255,255,255,.1),inset 0 -1px rgba(0,0,0,.82),0 2px 4px rgba(0,0,0,.5)}
}
@media(max-width:760px){
 .sampler-command strong:before,.mixer-console-head b:before,.arrange-head b:before{margin-right:5px}
 .mixer-strip,.mixer-return-strip,.master-strip{min-width:86px}
}


/* DBL pro-instrument polish — tactile control families + readable console hierarchy */
.transport,.arrange-tools,.wave-tools,.trim-nudge,.slice-focus-bar,.chop-actions,.arrange-inspector-actions,.mixer-mode-tabs{
 gap:6px
}
.transport>button,.transport details>summary,.arrange-tools>button,.wave-tools>button,.trim-nudge>button,.slice-focus-bar>button,.chop-actions>button,.arrange-inspector-actions>button{
 min-height:32px;padding-left:10px;padding-right:10px
}
#play,#stop,#record{min-width:70px;font-weight:950;letter-spacing:.09em}
#play{border-color:#625a42}
#record{border-color:#62433e}
#settingsButton{min-width:92px}
.pad-actions{
 padding:8px;border:1px solid #36342d;border-radius:4px;
 background:linear-gradient(180deg,#191a16,#0d0e0c);
 box-shadow:inset 0 1px rgba(255,255,255,.025),inset 0 -3px 8px rgba(0,0,0,.38)
}
.pad-actions button{
 border-color:#504b3d;background:linear-gradient(180deg,#292821,#171814 52%,#10110e)
}
.pad-actions #padClearAction{border-color:#60443d}
.pad-actions #padCrunchAction{border-color:#6b5b35}
.sample-load-zone,.import-browser{
 border-radius:3px;box-shadow:inset 0 1px rgba(255,255,255,.025),0 2px 6px rgba(0,0,0,.18)
}
.arrange-track-head,.arrange-ruler{
 background:linear-gradient(180deg,#1b1c18,#10110e);border-color:#34332d;color:#8f8b81
}
.arrange-inspector{
 border:1px solid #3d3a31;border-radius:3px;
 box-shadow:inset 0 1px rgba(255,255,255,.025),0 -4px 12px rgba(0,0,0,.2)
}
.mixer-console-head,.arrange-head,.sampler-command{
 border-bottom:1px solid #484439
}
.mixer-mode-tabs button{min-height:34px;min-width:74px}
.fx-slot-actions button,.mix-controls button{font-weight:900;letter-spacing:.07em}
select,input[type=number]{
 border:1px solid #49463b;border-radius:3px;background:linear-gradient(180deg,#141510,#090a08);
 color:#d1ccbd;box-shadow:inset 0 1px 3px #000
}
.project-menu-pop{
 border:1px solid #4a463a;border-radius:3px;background:#11120f;
 box-shadow:0 8px 20px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.035)
}
.project-menu-pop button{min-height:34px}
@media(min-width:1180px){
 .center{padding:14px}
 .sampler-command{padding-left:13px;padding-right:13px}
 .pads{grid-template-columns:repeat(4,minmax(112px,1fr))}
 .pad-actions{min-width:116px}
}


/* DBL pro-instrument polish — console legibility + precision detailing */
header .transport{align-items:center}
.transport label,.project-file-action,.project-menu>summary{
 min-height:32px;display:inline-flex;align-items:center;justify-content:center
}
.transport label{font-size:7px;font-weight:850}
.transport select,.transport input[type=number]{min-height:25px}
#play{color:#e8d28b}
#stop{color:#bbb8ae}
#record{color:#d88a7e}
#automation[aria-pressed="true"],#metronome[aria-pressed="true"]{color:#f0d77e}
.section-title small,.sampler-command small,.arrange-head small,.mixer-console-head small,.sample-edit-head small{
 color:#77746b;font-size:6px;letter-spacing:.13em
}
.bank-strip{padding:4px;border:1px solid #39372f;border-radius:4px;background:#0d0e0c;box-shadow:inset 0 2px 4px #000}
.bank-strip .bank{border-radius:3px}
.wave-tools,.trim-nudge,.slice-focus-bar,.chop-actions{
 border-color:#34332c;background:rgba(8,9,8,.35)
}
.wave-tools button,.trim-nudge button,.slice-focus-bar button,.chop-actions button{font-size:7px}
.mixer-strip input[type=range],.mixer-return-strip input[type=range],.master-strip input[type=range]{
 margin-top:7px;margin-bottom:7px
}
.mixer-strip.selected{
 background:linear-gradient(180deg,rgba(231,184,77,.075),#1b1c17 20%,#10110e);
 border-color:#786b46
}
.mixer-return-strip{border-top:2px solid #4d5141}
.master-strip{border-top:2px solid #8a7641}
.mixer-strip button,.mixer-return-strip button,.master-strip button{
 border-radius:3px;padding:4px 5px
}
.mixer-strip [aria-pressed="true"],.mixer-return-strip [aria-pressed="true"],.master-strip [aria-pressed="true"]{
 color:#161208
}
.arrange-ruler{font-variant-numeric:tabular-nums}
.arrange-track-row{border-bottom:1px solid rgba(255,255,255,.045)}
.arrange-track-row.selected{background:linear-gradient(90deg,rgba(231,184,77,.07),transparent 58%)}
.arrange-inspector-actions{padding-top:6px}
.fx-macro-slot,.quick-envelope,.sampler-control-panel{box-shadow:inset 0 1px rgba(255,255,255,.035),inset 0 -3px 9px rgba(0,0,0,.25),0 2px 5px rgba(0,0,0,.16)}
@media(min-width:1440px){
 .center{padding:16px}
 .sampler-stage{padding:16px}
 .sampler-stage .pads{gap:14px}
 .sampler-stage .pad{min-height:126px}
 .mixer-strip,.mixer-return-strip,.master-strip{min-width:98px}
}


/* DBL console finish — dimensional knobs, illuminated keys, hardware fasteners */
:root{--dbl-knob-ring:#77746a;--dbl-knob-face:#2b2c27}
.sound-controls input[type=range],.quick-envelope input[type=range],.fx-macro-slot input[type=range]{
 border-radius:10px;background:linear-gradient(90deg,#090a08,#171813,#090a08)
}
.sound-controls label,.quick-envelope label,.fx-macro-slot label{
 position:relative;border-color:#3f3c33
}
.sound-controls label:after,.quick-envelope label:after,.fx-macro-slot label:after{
 content:"";display:block;height:1px;margin-top:4px;background:linear-gradient(90deg,transparent,#555147,transparent);opacity:.55
}
.workspace-tab.active,.tool.active,.bank.active{
 background:linear-gradient(180deg,#3a3423,#1c1a13 58%,#10110e);
 color:#f2d77c;border-color:#8d7741;
 box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -2px #9c7b2e,0 0 7px rgba(231,184,77,.08)
}
#play[aria-pressed="true"]{
 background:linear-gradient(180deg,#504422,#241f12);color:#ffe28a;border-color:#a68b45;
 box-shadow:inset 0 1px rgba(255,255,255,.13),0 0 9px rgba(231,184,77,.16)
}
#record[aria-pressed="true"]{
 background:linear-gradient(180deg,#6a302b,#281513);color:#f0aaa0;border-color:#9c5048;
 box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 9px rgba(207,81,72,.16)
}
.sampler-command,.mixer-console-head,.arrange-head,.sample-edit-head{
 position:relative
}
.sampler-command:before,.mixer-console-head:before,.arrange-head:before,.sample-edit-head:before{
 content:"";position:absolute;right:8px;top:8px;width:5px;height:5px;border-radius:50%;
 background:radial-gradient(circle at 35% 30%,#85857d,#292a25 48%,#080908 72%);
 border:1px solid #070807;box-shadow:0 1px 1px #000
}
.mixer-strip,.mixer-return-strip,.master-strip{
 background-image:
 linear-gradient(90deg,rgba(255,255,255,.012),transparent 12%,transparent 88%,rgba(0,0,0,.2)),
 linear-gradient(180deg,#1e1f1a,#10110e)
}
.mixer-strip.selected{box-shadow:inset 0 2px rgba(231,184,77,.23),inset 0 -1px #080908,0 0 0 1px rgba(231,184,77,.11)}
.mixer-strip .meter,.mixer-return-strip .meter,.master-strip .meter{min-height:76px}
.arrange-clip{box-shadow:inset 0 1px rgba(255,255,255,.045),inset 0 -2px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.25)}
.project-menu-pop button:hover,.pad-actions button:hover,.arrange-inspector-actions button:hover{color:#ead489}
@media(min-width:1180px){
 header .transport{min-height:46px}
 .workspace-tabs{min-height:48px}
 .sampler-command{min-height:58px}
 .mixer-console-head,.arrange-head{min-height:54px}
}


/* DBL console finish — hierarchy lock: less web chrome, more studio instrument */
header{min-height:62px}
header>div:first-child{min-width:150px}
header>div:first-child b{font-size:12px;letter-spacing:.15em}
header>div:first-child span{font-size:6px;letter-spacing:.13em;color:#77736a}
.transport{padding:4px 0}
.transport>button,.transport label,.project-menu>summary,.project-file-action,#settingsButton{
 border-radius:3px
}
.center>.section-title,.seq-head,.sample-edit-head,.mixer-console-head,.arrange-head{
 border-left:3px solid rgba(231,184,77,.18)
}
.section-title>span,.seq-head>b,.sample-edit-head>span{font-weight:950}
.sampler-stage .pad{
 border-bottom-color:#23241f;
 box-shadow:inset 0 1px rgba(255,255,255,.075),inset 0 -15px 24px rgba(0,0,0,.5),0 5px 8px rgba(0,0,0,.56)
}
.sampler-stage .pad:active{
 transform:translateY(3px) scale(.995);
 box-shadow:inset 0 2px 5px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.6)
}
.pad-actions button,.arrange-inspector-actions button,.mix-controls button,.fx-slot-actions button{
 text-transform:uppercase
}
.arrange-shell{border:1px solid #39372f;box-shadow:inset 0 2px 7px #070807}
.arrange-track-list{border-right:1px solid #34322b}
.arrange-timeline{background-image:
 linear-gradient(90deg,rgba(231,184,77,.055) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
 background-size:25% 100%,6.25% 100%
}
.mixer-panel.dedicated-mixer{border-top:2px solid #4a4639}
.mixer-bank{padding-top:13px;padding-bottom:13px}
.mixer-strip,.mixer-return-strip,.master-strip{min-height:350px}
.mixer-strip.selected b{color:#f0d377}
.master-strip{box-shadow:inset 2px 0 rgba(231,184,77,.12),inset -2px 0 #080908}
.fx-macro-slot{padding:11px}
.fx-macro-slot strong,.quick-envelope strong{letter-spacing:.1em;color:#c9c4b6}
#save{border-color:#413d32;color:#a9a396}
@media(max-width:760px){
 header{min-height:auto}
 .mixer-strip,.mixer-return-strip,.master-strip{min-height:310px}
 .arrange-timeline{background-size:50% 100%,12.5% 100%}
}


/* DBL studio-grade finish — meter bridge, channel rails, calibrated control language */
.mixer-console-head{
 background:
 linear-gradient(90deg,rgba(231,184,77,.07),transparent 30%),
 linear-gradient(180deg,#20211c,#11120f)
}
.mixer-console-head:after{
 content:"DETROITBEATLAB · MIX CONSOLE";display:block;margin-left:auto;
 font-size:6px;letter-spacing:.16em;color:#68665f
}
.mixer-strip,.mixer-return-strip,.master-strip{
 border-top:1px solid #4a473d;
}
.mixer-strip:after,.mixer-return-strip:after,.master-strip:after{
 background:
 linear-gradient(90deg,transparent 48%,rgba(255,255,255,.024) 49%,rgba(0,0,0,.2) 51%,transparent 52%)
}
.mixer-strip input[type=range],.mixer-return-strip input[type=range],.master-strip input[type=range]{
 border-left:1px solid rgba(255,255,255,.025);
 border-right:1px solid rgba(0,0,0,.42);
}
.mixer-strip small:empty:before,.mixer-return-strip small:empty:before{content:"CH";opacity:.35}
.meter{
 position:relative;
 outline:1px solid rgba(0,0,0,.65);
 outline-offset:2px
}
.meter:after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(4,5,4,.7) 5px 6px)
}
.master-strip .meter{box-shadow:inset 0 1px 4px #000,0 0 6px rgba(231,184,77,.055)!important}
.arrange-ruler{
 box-shadow:inset 0 -1px #070807;
 font-variant-numeric:tabular-nums
}
.arrange-track-head{font-weight:900;letter-spacing:.1em}
.arrange-clip{
 border-left:3px solid #76653a
}
.arrange-clip.selected{border-left-color:#e0b44c}
.wave-stage{
 border:1px solid #34332d;
 box-shadow:inset 0 2px 9px #050605,0 1px rgba(255,255,255,.018)
}
.wave-playhead{background:#dcb34d;box-shadow:0 0 6px rgba(231,184,77,.2)}
.sample-range-readout,.slice-focus-bar,.trim-nudge{
 font-variant-numeric:tabular-nums
}
.quick-envelope,.fx-macro-slot{
 border-top-color:#4b473b
}
.quick-envelope input[type=range],.fx-macro-slot input[type=range]{
 min-height:24px
}
@media(min-width:1180px){
 .mixer-console-head:after{padding-right:10px}
 .mixer-strip,.mixer-return-strip,.master-strip{min-height:380px}
 .arrange-track-row{min-height:52px}
}


/* DBL studio-grade finish — final scale + separation polish */
.field{
 background:
 linear-gradient(90deg,rgba(255,255,255,.012),transparent 9%,transparent 91%,rgba(0,0,0,.18)),
 #0a0b09
}
.center{background:linear-gradient(180deg,rgba(255,255,255,.008),transparent 16%)}
.sampler-command,.arrange-head,.mixer-console-head{
 box-shadow:inset 0 -1px #080908,inset 0 1px rgba(255,255,255,.045)
}
.sampler-command>div:first-child,.arrange-head>div:first-child{
 padding-left:3px
}
.section-title small,.sampler-command small,.arrange-head small{
 max-width:680px
}
.pad-actions button{
 min-height:46px;
 box-shadow:inset 0 1px rgba(255,255,255,.075),inset 0 -2px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.35)
}
.pad-actions button:active{box-shadow:inset 0 2px 5px #080908}
.sample-load-primary,.import-browser-head label{
 min-height:36px;font-weight:900
}
.arrange-inspector-actions button{min-height:34px}
.arrange-track-id b{font-size:9px;letter-spacing:.08em}
.arrange-track-id small{font-size:6px;letter-spacing:.09em}
.mixer-strip,.mixer-return-strip,.master-strip{
 border-bottom:2px solid #090a08
}
.mixer-strip b,.mixer-return-strip b,.master-strip b{
 display:block;min-height:18px
}
.mixer-strip button,.mixer-return-strip button,.master-strip button{
 box-shadow:inset 0 1px rgba(255,255,255,.06),inset 0 -1px rgba(0,0,0,.55)
}
.master-strip{
 background:
 linear-gradient(90deg,rgba(231,184,77,.04),transparent 30%),
 linear-gradient(180deg,#27251e,#11120f)
}
.master-strip b{color:#f0d37a}
.mixer-inspector{
 border-top:1px solid #4b473b;
 box-shadow:inset 0 1px rgba(255,255,255,.025),0 -5px 14px rgba(0,0,0,.24)
}
@media(min-width:1600px){
 .field{grid-template-columns:88px minmax(0,1fr) 320px}
 .sampler-stage .pad{min-height:138px}
 .pad-actions{min-width:126px}
 .mixer-strip,.mixer-return-strip,.master-strip{min-width:104px;min-height:410px}
 .arrange-panel{min-height:470px}
}


/* DBL surgical visual polish — unify hardware legends and control states */
button,.tool,.workspace-tab,.bank,.project-file-action,.project-menu>summary{
 font-weight:850
}
button:disabled{
 opacity:.38;filter:saturate(.35);box-shadow:inset 0 1px rgba(255,255,255,.025)
}
button[aria-pressed="true"],.tool.active,.workspace-tab.active,.bank.active{
 text-shadow:0 1px #000,0 0 6px rgba(231,184,77,.1)
}
.transport label,.arrange-tools label,.piano-roll-settings label,.mix-controls label,.sound-controls label,.quick-envelope label{
 box-shadow:inset 0 1px rgba(255,255,255,.035),inset 0 -1px rgba(0,0,0,.48)
}
.transport label:focus-within,.arrange-tools label:focus-within,.piano-roll-settings label:focus-within,.mix-controls label:focus-within,.sound-controls label:focus-within,.quick-envelope label:focus-within{
 border-color:#746746;box-shadow:inset 0 1px rgba(255,255,255,.04),0 0 0 1px rgba(231,184,77,.08)
}
.pad-actions button,.arrange-inspector-actions button,.fx-slot-actions button,.mix-controls button{
 font-size:7px;letter-spacing:.085em
}
.pad-actions button span,.fx-slot-actions button span{font-variant-numeric:tabular-nums}
.sampler-stage .pad b,.arrange-track-id b,.mixer-strip b,.master-strip b{
 font-variant-numeric:tabular-nums
}
#save{
 min-width:84px;justify-content:center;text-align:center;
 box-shadow:inset 0 1px 3px #050605,0 1px rgba(255,255,255,.02)
}
@media(hover:hover){
 button:not(:disabled):hover,.tool:hover,.workspace-tab:hover,.bank:hover{
  color:#ead9a0
 }
}


/* DBL MOBILE VISUAL REBUILD — instrument composition, not desktop controls stacked vertically */
@media(max-width:760px){
 body{background:#070806}
 #studio{background:#090a08}
 header{
  padding:10px 10px 12px;border-bottom:1px solid #363329;
  background:linear-gradient(180deg,#11120f 0,#090a08 72%,#070806)
 }
 header>div:first-child{
  width:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;
  padding:2px 2px 10px
 }
 header>div:first-child b{font-size:11px}
 header>div:first-child span{font-size:5px}
 header .transport{
  display:grid!important;grid-template-columns:54px 54px minmax(120px,1fr) 92px;
  gap:7px;width:100%;padding:0
 }
 #undo,#redo{min-width:0!important}
 #play{grid-column:3;min-width:0!important}
 #stop{grid-column:4;min-width:0!important}
 .record-cluster{
  grid-column:1/-1;display:grid!important;grid-template-columns:92px 112px minmax(150px,1fr) 112px;
  gap:7px;padding:7px;border:1px solid #3d392f;border-radius:8px;
  background:linear-gradient(180deg,#171813,#0d0e0c)
 }
 .record-cluster>*{min-width:0!important}
 .transport>label:not(.transport-secondary),.transport>.transport-secondary{display:none!important}
 .project-cluster{
  grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:7px;
  width:100%;padding-top:10px;margin-top:3px;border-top:1px solid #39372f
 }
 .project-cluster>*{min-width:0!important;width:100%}
 #settingsButton{grid-column:1;min-width:54px!important;width:54px;font-size:0}
 #settingsButton:before{content:"⚙";font-size:15px}
 #save{grid-column:2/4;min-width:0!important;min-height:38px}
 .field{display:block!important;padding:0!important}
 .legacy-tools,.workspace-tabs{display:none!important}
 .center{padding:10px!important}
 .sampler-command,.arrange-head,.mixer-console-head{
  min-height:54px!important;padding:10px!important;border-radius:7px 7px 0 0
 }
 .sampler-command strong,.arrange-head b,.mixer-console-head b{font-size:12px}
 .sampler-command small,.arrange-head small,.mixer-console-head small{font-size:6px}
 .arrange-panel,.mixer-panel.dedicated-mixer,.sampler-stage{
  border-radius:8px;border:1px solid #3c392f;overflow:hidden;
  box-shadow:0 7px 20px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.025)
 }
 .arrange-tools{
  display:grid!important;grid-template-columns:1fr 1fr;gap:7px;padding:10px!important;
  background:#11120f
 }
 .arrange-tools>*{min-width:0!important;width:100%}
 .arrange-shell{min-width:760px}
 .arrange-panel{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
 .arrange-track-head{position:sticky;left:0;z-index:5}
 .arrange-track-list{width:238px!important;min-width:238px!important}
 .arrange-track-id b{font-size:10px}
 .arrange-track-id small{font-size:6px;line-height:1.35}
 .arrange-track-row{min-height:68px}
 .arrange-ruler{height:50px}
 .mixer-panel.dedicated-mixer{overflow:hidden}
 .mixer-mode-tabs{
  display:grid!important;grid-template-columns:repeat(4,1fr);gap:7px;padding:9px;
  background:#0c0d0b
 }
 .mixer-mode-tabs button{min-width:0!important;height:54px;font-size:7px}
 .mixer-bank{
  display:flex!important;gap:0;overflow-x:auto!important;scroll-snap-type:x proximity;
  padding:12px 10px!important;background:#0a0b09
 }
 .mixer-strip,.mixer-return-strip,.master-strip{
  flex:0 0 108px!important;min-width:108px!important;min-height:430px!important;
  scroll-snap-align:start;padding:13px 9px!important
 }
 .master-strip{flex-basis:122px!important;min-width:122px!important}
 .mixer-strip b,.mixer-return-strip b,.master-strip b{font-size:9px}
 .mixer-inspector{margin:0 10px 10px;border-radius:7px}
 .mixer-console-head:after{font-size:5px}
 .pads{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .sampler-stage .pad{min-height:112px!important}
 .pad-actions{
  display:grid!important;grid-template-columns:repeat(2,1fr);gap:7px!important;
  min-width:0!important;width:100%;margin-top:10px
 }
 .pad-actions button{min-height:48px}
}
@media(max-width:430px){
 header .transport{grid-template-columns:48px 48px minmax(104px,1fr) 84px}
 .record-cluster{grid-template-columns:84px 1fr 1.15fr 1fr}
 .record-cluster button,.record-cluster label{font-size:6px!important}
 .center{padding:8px!important}
}


/* DBL MOBILE VISUAL REBUILD II — stronger silhouette, tactile transport, console identity */
@media(max-width:760px){
 :root{--mobile-gold:#d8b458;--mobile-line:#494437}
 header{position:relative}
 header:after{
  content:"DBL / MOBILE PRODUCTION CORE";height:auto!important;padding:7px 2px 0;
  background:none!important;border-top:1px solid rgba(216,180,88,.12);
  color:#5f5b51;font:600 5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em
 }
 header .transport>button,.record-cluster>button,.project-cluster>*{
  background:
   linear-gradient(180deg,rgba(255,255,255,.055),transparent 16%),
   linear-gradient(180deg,#24251f,#11120f 62%,#0a0b09);
  border:1px solid #514c3f!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -3px 6px rgba(0,0,0,.42),0 3px 6px rgba(0,0,0,.34)
 }
 #play{font-size:14px!important;border-color:#817044!important}
 #stop{font-size:10px!important}
 #record{border-color:#744b45!important}
 .record-cluster{box-shadow:inset 0 2px 7px #070806,0 1px rgba(255,255,255,.02)}
 .center>.section-title{
  margin:0;border-left:4px solid #8f783e!important;
  background:linear-gradient(90deg,#1d1c16,#10110e 68%);
  padding:10px 12px
 }
 .sampler-command,.arrange-head,.mixer-console-head{
  border-left:4px solid #756236!important;
  background:
   linear-gradient(90deg,rgba(216,180,88,.075),transparent 38%),
   linear-gradient(180deg,#22231e,#10110e)
 }
 .sampler-command:before,.arrange-head:before,.mixer-console-head:before{
  width:7px;height:7px;right:10px;top:10px
 }
 .sampler-stage,.arrange-panel,.mixer-panel.dedicated-mixer{
  border-color:#514a39;
  box-shadow:0 10px 28px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.04)
 }
 .sampler-stage .pad{
  border:1px solid #5a5444!important;border-bottom:4px solid #151611!important;
  border-radius:7px!important;
  background:
   radial-gradient(circle at 25% 16%,rgba(255,255,255,.07),transparent 34%),
   linear-gradient(145deg,#34342c,#191a16 55%,#0b0c0a)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.11),inset 0 -20px 28px rgba(0,0,0,.48),0 7px 10px rgba(0,0,0,.58)!important
 }
 .sampler-stage .pad.selected{
  border-color:#a18442!important;
  box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 -20px 28px rgba(0,0,0,.48),0 0 0 1px rgba(216,180,88,.16),0 7px 12px #000!important
 }
 .sampler-stage .pad b{font-size:12px!important;letter-spacing:.08em}
 .pad-actions{border-color:#4d4738!important}
 .pad-actions button{font-size:8px!important}
 .arrange-tools{border-bottom:1px solid #494437}
 .arrange-tools button,.arrange-tools label{
  min-height:48px!important;border-radius:4px!important
 }
 .arrange-track-head{background:linear-gradient(180deg,#25251f,#12130f)!important}
 .arrange-track-row{
  background:linear-gradient(90deg,#141510 0 238px,#0b0c0a 238px)!important;
  border-bottom-color:#34342d!important
 }
 .arrange-track-row.selected{
  background:linear-gradient(90deg,rgba(216,180,88,.12) 0 238px,#0b0c0a 238px)!important
 }
 .arrange-track-row.selected .arrange-track-id{box-shadow:inset 4px 0 #d2aa4d}
 .arrange-ruler{
  background:linear-gradient(180deg,#22231e,#11120f)!important;
  border-bottom:1px solid #4b4638!important
 }
 .mixer-mode-tabs button{
  background:linear-gradient(180deg,#23241f,#10110e)!important;
  border-color:#504b3e!important
 }
 .mixer-mode-tabs button.active,.mixer-mode-tabs button[aria-pressed="true"]{
  background:linear-gradient(180deg,#ded8c9,#aaa38f)!important;
  color:#11120f!important;border-bottom:3px solid #d1a843!important
 }
 .mixer-bank{border-top:1px solid #4c4739}
 .mixer-strip,.mixer-return-strip,.master-strip{
  border-right:1px solid #3e3b32!important;
  background:
   linear-gradient(90deg,rgba(255,255,255,.018),transparent 15%,transparent 85%,rgba(0,0,0,.25)),
   linear-gradient(180deg,#20211c,#0d0e0c)!important
 }
 .mixer-strip.selected{
  border-top:3px solid #d4ad4f!important;
  background:
   linear-gradient(180deg,rgba(216,180,88,.13),transparent 25%),
   linear-gradient(180deg,#25251e,#10110e)!important
 }
 .master-strip{
  border-left:3px solid #8b7440!important;
  background:
   linear-gradient(180deg,rgba(216,180,88,.09),transparent 32%),
   linear-gradient(180deg,#29271f,#11120f)!important
 }
 .mixer-strip input[type=range]::-webkit-slider-thumb,
 .mixer-return-strip input[type=range]::-webkit-slider-thumb,
 .master-strip input[type=range]::-webkit-slider-thumb{
  box-shadow:inset 0 1px rgba(255,255,255,.55),inset 0 -2px rgba(0,0,0,.45),0 2px 4px #000!important
 }
 .mixer-inspector{background:linear-gradient(180deg,#181914,#0b0c0a)!important}
}


/* DBL MOBILE VISUAL REBUILD III — working-surface density */
@media(max-width:760px){
 header .transport>button{min-height:52px!important}
 .record-cluster>*{min-height:48px!important}
 .project-cluster>*{min-height:52px!important}
 .center{display:flex;flex-direction:column;gap:9px}
 .arrange-tools{grid-template-columns:1.2fr 1.2fr .8fr .8fr!important}
 .arrange-tools button,.arrange-tools label{min-height:56px!important}
 .arrange-shell{border-top:1px solid #57503f!important}
 .arrange-ruler{height:44px!important}
 .arrange-track-row{min-height:72px!important}
 .arrange-track-id{padding-left:12px!important}
 .arrange-track-id b{font-size:11px!important}
 .arrange-track-row button{min-width:43px!important;min-height:43px!important}
 .mixer-console-head{min-height:62px!important}
 .mixer-mode-tabs button{height:58px!important;font-size:8px!important}
 .mixer-bank{padding:10px 8px 14px!important}
 .mixer-strip,.mixer-return-strip,.master-strip{flex-basis:116px!important;min-width:116px!important;min-height:455px!important}
 .master-strip{flex-basis:132px!important;min-width:132px!important}
 .mixer-strip b,.mixer-return-strip b,.master-strip b{font-size:10px!important}
 .mixer-strip button,.mixer-return-strip button,.master-strip button{min-height:42px!important}
 .mixer-strip .meter,.mixer-return-strip .meter,.master-strip .meter{min-height:118px!important}
 .mixer-inspector{padding:12px!important}
 .sampler-stage{padding:12px!important}
 .pads{gap:12px!important}
 .sampler-stage .pad{min-height:124px!important}
 .pad-actions{margin-top:12px!important}
}
@media(max-width:430px){
 .arrange-tools{grid-template-columns:1fr 1fr!important}
 .mixer-strip,.mixer-return-strip{flex-basis:112px!important;min-width:112px!important}
 .master-strip{flex-basis:126px!important;min-width:126px!important}
}


/* DBL MOBILE VISUAL REBUILD IV — faceplate hierarchy + deliberate hardware zones */
@media(max-width:760px){
 header>div:first-child{
  border-bottom:1px solid rgba(216,180,88,.12);margin-bottom:2px
 }
 .record-cluster:before{
  content:"TRANSPORT / CAPTURE";grid-column:1/-1;
  color:#69655b;font:700 5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;padding:0 2px 1px
 }
 .project-cluster:before{
  content:"PROJECT / SESSION";grid-column:1/-1;
  color:#69655b;font:700 5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;padding:0 2px
 }
 .sampler-command strong,.arrange-head b,.mixer-console-head b{
  text-shadow:0 1px #000,0 0 12px rgba(216,180,88,.06)
 }
 .sampler-stage:after,.arrange-panel:after,.mixer-panel.dedicated-mixer:after{
  content:"";position:absolute;inset:4px;pointer-events:none;border-radius:5px;
  border:1px solid rgba(255,255,255,.018)
 }
 .sampler-stage,.arrange-panel,.mixer-panel.dedicated-mixer{position:relative}
 .pad-actions:before{
  content:"PAD COMMANDS";grid-column:1/-1;color:#777268;
  font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em
 }
 .arrange-tools:before{
  content:"ARRANGEMENT COMMANDS";grid-column:1/-1;color:#777268;
  font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em
 }
 .mixer-mode-tabs:before{
  content:"CONSOLE VIEW";grid-column:1/-1;color:#777268;
  font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em
 }
 .mixer-strip,.mixer-return-strip,.master-strip{position:relative;padding-top:22px!important}
 .mixer-strip:after,.mixer-return-strip:after,.master-strip:after{
  content:"";position:absolute;left:9px;right:9px;top:12px;height:1px;
  background:linear-gradient(90deg,transparent,#5b5545,transparent);opacity:.7
 }
 .mixer-strip.selected:after{background:linear-gradient(90deg,transparent,#d7b354,transparent);opacity:1}
 .master-strip:before{
  content:"MASTER BUS";display:block!important;width:auto!important;height:auto!important;
  margin:0 0 8px!important;border:0!important;border-radius:0!important;background:none!important;
  color:#d2b660!important;font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;box-shadow:none!important
 }
 .arrange-track-row:nth-child(even){
  background:linear-gradient(90deg,#161712 0 238px,#0d0e0b 238px)!important
 }
 .arrange-track-row.selected:nth-child(even){
  background:linear-gradient(90deg,rgba(216,180,88,.13) 0 238px,#0d0e0b 238px)!important
 }
 .arrange-ruler{letter-spacing:.08em}
 .mixer-inspector:before{
  content:"SELECTED CHANNEL";display:block;margin-bottom:8px;color:#777268;
  font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em
 }
}


/* DBL SAMPLER FOCUS I — make the sampler the hero instrument */
.sampler-command{
 min-height:66px;
 background:
  linear-gradient(90deg,rgba(216,180,88,.095),transparent 36%),
  linear-gradient(180deg,#25261f,#11120e)!important
}
.sampler-command strong{font-size:14px;letter-spacing:.13em}
.sampler-command small{margin-top:4px;color:#8d897e}
.bank-strip .bank{min-width:44px;min-height:38px;font-size:10px}
.sampler-stage{
 padding:18px!important;
 border-color:#57503f!important;
 background:
  radial-gradient(circle at 15% 12%,rgba(255,255,255,.025),transparent 30%),
  linear-gradient(180deg,#151611,#090a08)!important
}
.pads{gap:15px!important}
.sampler-stage .pad{
 position:relative;min-height:136px!important;border-radius:8px!important;
 border:1px solid #625b49!important;border-bottom:5px solid #11120e!important;
 background:
  radial-gradient(circle at 28% 18%,rgba(255,255,255,.09),transparent 31%),
  linear-gradient(145deg,#3a3a31,#20211b 54%,#0d0e0b)!important;
 box-shadow:
  inset 0 1px rgba(255,255,255,.13),
  inset 0 -25px 32px rgba(0,0,0,.52),
  0 8px 13px rgba(0,0,0,.62)!important
}
.sampler-stage .pad:before{
 content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.035);
 border-radius:5px;pointer-events:none
}
.sampler-stage .pad b{font-size:13px!important;letter-spacing:.1em}
.sampler-stage .pad small{font-size:7px!important;letter-spacing:.08em;color:#89867d}
.sampler-stage .pad.selected{
 border-color:#b09046!important;
 box-shadow:
  inset 0 1px rgba(255,255,255,.15),
  inset 0 -25px 32px rgba(0,0,0,.5),
  0 0 0 2px rgba(216,180,88,.12),
  0 9px 15px #000!important
}
.sampler-stage .pad.selected:after{
 content:"SELECTED";position:absolute;right:8px;top:8px;padding:3px 5px;
 border:1px solid #75643c;border-radius:2px;background:#17150e;
 color:#d7b85b;font:700 5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em
}
.pad-actions{
 align-content:start!important;padding:10px!important;border-color:#554f40!important;
 background:linear-gradient(180deg,#20211b,#0d0e0b)!important
}
.pad-actions button{
 min-height:52px!important;font-size:8px!important;
 border-color:#5b5546!important;
 background:
  linear-gradient(180deg,rgba(255,255,255,.055),transparent 18%),
  linear-gradient(180deg,#2b2b24,#151612)!important
}
.pad-actions #padLoadAction{border-color:#7c6a3f!important;color:#e0c675}
.pad-actions #padClearAction{border-color:#704b43!important}
.pad-actions #padCrunchAction{border-color:#806a38!important;color:#d8bb68}
.sample-load-zone{
 min-height:70px;padding:11px 13px!important;border:1px solid #4c4739!important;
 background:linear-gradient(180deg,#171813,#0d0e0b)!important
}
.sample-load-primary{
 border:1px solid #796740!important;background:linear-gradient(180deg,#302a1d,#17150f)!important;
 color:#e1c879!important
}
.import-browser,.wave-wrap{
 border:1px solid #464238!important;background:#0d0e0b!important;
 box-shadow:0 5px 16px rgba(0,0,0,.28)
}
.sample-edit-head{
 min-height:48px;padding:9px 12px!important;
 background:linear-gradient(180deg,#20211b,#11120e)!important
}
.wave-stage{
 min-height:120px;background:
 linear-gradient(180deg,rgba(216,180,88,.025),transparent 50%),
 #080906!important
}
@media(max-width:760px){
 .sampler-command{min-height:70px!important}
 .sampler-command strong{font-size:15px}
 .bank-strip{margin-left:auto}
 .bank-strip .bank{min-width:48px;min-height:42px}
 .sampler-stage{padding:14px!important}
 .pads{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important}
 .sampler-stage .pad{min-height:142px!important}
 .sampler-stage .pad b{font-size:14px!important}
 .pad-actions{grid-template-columns:repeat(2,1fr)!important}
 .pad-actions #padSoundAction{grid-column:1/-1}
 .sample-load-zone{display:grid!important;grid-template-columns:1fr;gap:8px}
 .sample-load-primary{min-height:52px!important}
 .sample-load-copy{padding:2px 3px}
 #sampleStatus{min-height:34px;display:flex;align-items:center;padding:0 8px;border-left:2px solid #6f603c}
 .wave-stage{min-height:138px}
}


/* DBL SAMPLER FOCUS II — phone-first 4x4 pad instrument; no horizontal pad clipping */
@media(max-width:760px){
 .sampler-command{
  display:grid!important;grid-template-columns:1fr;gap:10px;
  padding:12px!important
 }
 .sampler-command>div:first-child{width:100%}
 .bank-strip{
  width:100%!important;margin:0!important;
  display:grid!important;grid-template-columns:repeat(4,1fr);gap:7px
 }
 .bank-strip .bank{width:100%!important;min-width:0!important}
 .center>.section-title{min-height:58px}
 .sampler-stage{
  display:block!important;width:100%!important;max-width:100%!important;
  overflow:hidden!important;padding:12px!important;box-sizing:border-box
 }
 .sampler-stage .pads,.pads{
  width:100%!important;max-width:100%!important;min-width:0!important;
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;box-sizing:border-box
 }
 .sampler-stage .pad{
  width:100%!important;min-width:0!important;max-width:none!important;
  min-height:112px!important;padding:9px 4px!important;
  border-radius:6px!important;box-sizing:border-box
 }
 .sampler-stage .pad b{
  max-width:100%;font-size:10px!important;letter-spacing:.045em!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
 }
 .sampler-stage .pad small{font-size:5.5px!important;letter-spacing:.04em!important}
 .sampler-stage .pad.selected:after{
  content:"";width:6px;height:6px;right:6px;top:6px;padding:0;border-radius:50%;
  background:#d9b654;box-shadow:0 0 7px rgba(216,180,88,.42)
 }
 .pad-actions{
  width:100%!important;max-width:100%!important;box-sizing:border-box;
  margin:12px 0 0!important
 }
}
@media(max-width:430px){
 .sampler-stage{padding:9px!important}
 .sampler-stage .pads,.pads{gap:5px!important}
 .sampler-stage .pad{min-height:104px!important;padding:8px 3px!important}
 .sampler-stage .pad b{font-size:9px!important}
}


/* DBL MOBILE NAV RESTORE — core workspace buttons must stay visible */
@media(max-width:760px){
 .legacy-tools{display:none!important}
 .workspace-tabs{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;width:100%!important;min-height:0!important;
  margin:0 0 9px!important;padding:7px!important;box-sizing:border-box;
  border:1px solid #484337;border-radius:7px;
  background:linear-gradient(180deg,#191a16,#0d0e0b);
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 3px 9px rgba(0,0,0,.28)
 }
 .workspace-tab{
  display:flex!important;align-items:center;justify-content:center;
  min-width:0!important;min-height:48px!important;padding:6px 3px!important;
  border:1px solid #514c3f!important;border-radius:4px!important;
  background:linear-gradient(180deg,#25261f,#11120e)!important;
  font-size:7px!important;letter-spacing:.07em!important
 }
 .workspace-tab.active{
  color:#f0d374!important;border-color:#917a42!important;
  background:linear-gradient(180deg,#3b3422,#191711)!important;
  box-shadow:inset 0 -3px #b48c32,0 0 7px rgba(216,180,88,.08)!important
 }
}


/* DBL SAMPLER FOCUS III — refined cross-reference hierarchy */
@media(max-width:760px){
 .workspace-tabs{
  position:sticky;top:0;z-index:30;
  margin:0 0 8px!important;padding:5px!important;gap:4px!important;
  border-color:#3d392f!important;border-radius:5px!important;
  background:rgba(12,13,11,.96)!important;
  backdrop-filter:blur(8px);
  box-shadow:0 5px 14px rgba(0,0,0,.34)!important
 }
 .workspace-tab{
  min-height:40px!important;border-color:#403c33!important;
  background:linear-gradient(180deg,#1e1f1a,#10110e)!important;
  color:#8d8a80!important;font-size:6.5px!important
 }
 .workspace-tab.active{
  color:#ead17c!important;border-color:#75633b!important;
  background:linear-gradient(180deg,#302a1d,#17150f)!important;
  box-shadow:inset 0 -2px #a98232!important
 }
 .sampler-command{
  border-radius:6px!important;border:1px solid #504a3b!important;
  border-left:4px solid #8e7539!important;
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 4px 12px rgba(0,0,0,.25)!important
 }
 .sampler-command strong{font-size:13px!important}
 .sampler-command small{font-size:5.5px!important}
 .bank-strip{
  padding:4px!important;border-color:#3f3b31!important;
  background:#0b0c0a!important
 }
 .bank-strip .bank{
  min-height:38px!important;border-color:#454137!important;
  background:linear-gradient(180deg,#1f201b,#10110e)!important;
  color:#aaa69b!important;font-size:9px!important
 }
 .bank-strip .bank.active{
  color:#e7c86d!important;border-color:#89723e!important;
  background:linear-gradient(180deg,#332c1e,#17150f)!important;
  box-shadow:inset 0 -2px #b48b31!important
 }
 .center>.section-title{
  min-height:48px!important;padding:9px 11px!important;
  border-left:3px solid #7e6938!important;
  background:linear-gradient(90deg,#181812,#10110e 72%)!important
 }
 .center>.section-title span{font-size:10px!important;letter-spacing:.12em}
 .center>.section-title small{display:none!important}
 .sampler-stage{
  border-radius:6px!important;border-color:#4a4538!important;
  box-shadow:0 5px 16px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.025)!important
 }
 .sampler-stage .pad{
  min-height:98px!important;border-radius:5px!important;
  border-color:#4e493d!important;border-bottom-width:3px!important;
  background:
   linear-gradient(145deg,rgba(255,255,255,.055),transparent 28%),
   linear-gradient(145deg,#2e2f28,#191a16 58%,#0c0d0b)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -16px 22px rgba(0,0,0,.43),0 4px 7px rgba(0,0,0,.5)!important
 }
 .sampler-stage .pad b{font-size:9px!important}
 .sampler-stage .pad small{font-size:5px!important;color:#716f68!important}
 .sampler-stage .pad.selected{
  border-color:#a18442!important;
  box-shadow:inset 0 1px rgba(255,255,255,.1),inset 0 -16px 22px rgba(0,0,0,.43),0 0 0 1px rgba(216,180,88,.14),0 5px 8px #000!important
 }
 .pad-actions{padding:8px!important;gap:5px!important}
 .pad-actions:before{font-size:5.5px!important}
 .pad-actions button{min-height:43px!important;font-size:6.5px!important}
 .sample-load-zone{margin-top:8px!important}
 .import-browser,.wave-wrap{margin-top:8px!important}
}


/* DBL SAMPLER FOCUS IV — pad-first viewport + tighter instrument chrome */
@media(max-width:760px){
 .workspace-tabs{margin-bottom:6px!important}
 .sampler-command{gap:7px!important;padding:9px 10px!important}
 .sampler-command>div:first-child{
  display:flex!important;align-items:baseline;justify-content:space-between;gap:8px
 }
 .sampler-command strong{font-size:12px!important}
 .sampler-command small{margin:0!important;white-space:nowrap}
 .bank-strip{gap:4px!important;padding:3px!important}
 .bank-strip .bank{min-height:34px!important}
 .center>.section-title{min-height:40px!important;padding:7px 10px!important}
 .sampler-stage{padding:8px!important}
 .sampler-stage .pads,.pads{gap:4px!important}
 .sampler-stage .pad{
  min-height:92px!important;padding:7px 3px!important;
  border-bottom-width:3px!important
 }
 .sampler-stage .pad:before{inset:5px!important}
 .sampler-stage .pad b{font-size:8.5px!important}
 .sampler-stage .pad small{margin-top:3px}
 .pad-actions{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;margin-top:8px!important;padding:7px!important
 }
 .pad-actions:before{grid-column:1/-1!important}
 .pad-actions button{
  min-width:0!important;min-height:40px!important;padding:5px 2px!important;
  font-size:5.7px!important;letter-spacing:.04em!important
 }
 .pad-actions #padSoundAction{grid-column:auto!important}
 .pad-actions #padCrunchAction{line-height:1.15}
 .sample-load-zone{min-height:58px!important;padding:8px 10px!important}
 .sample-load-primary{min-height:44px!important}
 .sample-load-copy small{font-size:5.5px!important}
 #sampleStatus{min-height:28px!important;font-size:6px!important}
 .import-browser-head{min-height:42px!important}
 .sample-edit-head{min-height:42px!important}
 .wave-stage{min-height:122px!important}
}
@media(max-width:430px){
 .sampler-command small{display:none!important}
 .sampler-stage .pad{min-height:88px!important}
 .pad-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .pad-actions #padSoundAction{grid-column:2/4!important}
}


/* DBL ARRANGER FOCUS I — track-first mobile workstation */
@media(max-width:760px){
 #arrangePanel.arrange-panel{
  overflow:hidden!important;border-color:#504a3c!important;
  background:#090a08!important
 }
 #arrangePanel .arrange-head{
  display:block!important;padding:10px!important;min-height:0!important;
  border-left:4px solid #8b733a!important
 }
 #arrangePanel .arrange-head>div:first-child{
  display:flex!important;align-items:baseline;justify-content:space-between;gap:8px;
  padding:0 2px 8px!important
 }
 #arrangePanel .arrange-head b{font-size:12px!important}
 #arrangePanel .arrange-head small{font-size:5px!important;white-space:nowrap}
 #arrangePanel .arrange-tools{
  display:grid!important;grid-template-columns:1.25fr 1.25fr .8fr .9fr!important;
  gap:5px!important;padding:7px!important;border:1px solid #403c32;border-radius:5px;
  background:linear-gradient(180deg,#181914,#0d0e0b)!important
 }
 #arrangePanel .arrange-tools:before{grid-column:1/-1!important}
 #arrangePanel .arrange-tools button,#arrangePanel .arrange-tools label{
  min-width:0!important;min-height:44px!important;padding:5px!important;
  font-size:6px!important
 }
 #arrangePanel .arrange-track-create select,#arrangePanel #arrangeSnap{
  width:100%!important;min-width:0!important
 }
 #arrangePanel .arrange-shell{
  display:grid!important;
  grid-template-columns:176px minmax(584px,1fr)!important;
  grid-template-rows:42px auto!important;
  min-width:760px!important;border:0!important;border-top:1px solid #504a3c!important
 }
 #arrangePanel .arrange-track-head{
  position:sticky!important;left:0;top:0;z-index:8;
  width:auto!important;min-width:0!important;padding:9px 10px!important;
  border-right:1px solid #4a463b!important
 }
 #arrangePanel .arrange-ruler{
  grid-column:2!important;grid-row:1!important;height:42px!important;
  position:sticky;top:0;z-index:6
 }
 #arrangePanel .arrange-track-list{
  grid-column:1!important;grid-row:2!important;
  width:176px!important;min-width:176px!important;
  position:sticky!important;left:0;z-index:7;
  background:#11120f!important;border-right:1px solid #4a463b!important
 }
 #arrangePanel .arrange-timeline-wrap{
  grid-column:2!important;grid-row:2!important;min-width:584px!important;
  background:#090a08!important
 }
 #arrangePanel .arrange-track-row{
  min-height:64px!important;padding:6px 7px!important;
  background:#12130f!important;border-bottom:1px solid #34342d!important
 }
 #arrangePanel .arrange-track-row:nth-child(even){background:#151611!important}
 #arrangePanel .arrange-track-row.selected{
  background:linear-gradient(90deg,rgba(216,180,88,.14),#15150f 72%)!important;
  box-shadow:inset 4px 0 #d2aa4d!important
 }
 #arrangePanel .arrange-track-id{padding-left:5px!important}
 #arrangePanel .arrange-track-id b{
  font-size:9px!important;letter-spacing:.07em!important;max-width:88px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
 }
 #arrangePanel .arrange-track-id small{font-size:5px!important;line-height:1.25}
 #arrangePanel .arrange-track-row button{
  min-width:32px!important;min-height:34px!important;padding:3px!important;font-size:6px!important
 }
 #arrangePanel .arrange-timeline{
  background-image:
   linear-gradient(90deg,rgba(216,180,88,.07) 1px,transparent 1px),
   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px)!important;
  background-size:25% 100%,6.25% 100%!important
 }
 #arrangePanel .arrange-inspector{
  margin:8px!important;padding:10px!important;border-color:#484337!important;
  background:linear-gradient(180deg,#171813,#0c0d0a)!important
 }
 #arrangePanel .arrange-inspector>div:first-child{
  display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:10px
 }
 #arrangePanel .arrange-inspector-actions{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important
 }
 #arrangePanel .arrange-inspector-actions button{
  min-width:0!important;min-height:38px!important;padding:4px 2px!important;font-size:5.7px!important
 }
 #arrangePanel .arrange-boundary{font-size:5px!important}
}
@media(max-width:430px){
 #arrangePanel .arrange-head small{display:none!important}
 #arrangePanel .arrange-tools{grid-template-columns:1fr 1fr!important}
 #arrangePanel .arrange-shell{grid-template-columns:160px minmax(600px,1fr)!important}
 #arrangePanel .arrange-track-list{width:160px!important;min-width:160px!important}
}


/* DBL ARRANGER FOCUS II — refinement only; preserve working geometry and controls */
@media(max-width:760px){
 #arrangePanel .arrange-head{
  box-shadow:inset 0 1px rgba(255,255,255,.04),inset 0 -1px #080906!important
 }
 #arrangePanel .arrange-tools{
  box-shadow:inset 0 1px rgba(255,255,255,.025),inset 0 -2px 6px rgba(0,0,0,.32)
 }
 #arrangePanel .arrange-tools button,
 #arrangePanel .arrange-tools label{
  border-color:#494438!important;
  background:linear-gradient(180deg,#22231d,#11120e)!important
 }
 #arrangePanel .arrange-tools button[aria-pressed="true"]{
  color:#e6c96e!important;border-color:#806c3d!important;
  background:linear-gradient(180deg,#332d20,#17150f)!important
 }
 #arrangePanel .arrange-track-head{
  color:#9b978c!important;letter-spacing:.1em
 }
 #arrangePanel .arrange-track-head small{color:#625f58!important}
 #arrangePanel .arrange-ruler{
  color:#8d897e!important;font-size:6px!important;
  box-shadow:inset 0 -1px #060705!important
 }
 #arrangePanel .arrange-track-row{
  transition:background .12s ease,border-color .12s ease;
  box-shadow:inset 0 1px rgba(255,255,255,.012)
 }
 #arrangePanel .arrange-track-row.selected{
  border-bottom-color:#5b5034!important
 }
 #arrangePanel .arrange-track-id b{color:#d1cdc1}
 #arrangePanel .arrange-track-row.selected .arrange-track-id b{color:#ead17c}
 #arrangePanel .arrange-track-row button{
  border-radius:3px!important;
  background:linear-gradient(180deg,#24251f,#11120e)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),inset 0 -1px #090a08
 }
 #arrangePanel .arrange-track-row button[aria-pressed="true"]{
  border-color:#79663b!important;color:#e4c66b!important;
  background:linear-gradient(180deg,#302a1d,#17150f)!important
 }
 #arrangePanel .arrange-timeline-wrap{
  box-shadow:inset 5px 0 10px rgba(0,0,0,.22)
 }
 #arrangePanel .arrange-clip{
  border-radius:3px!important;border-color:#575144!important;
  background:linear-gradient(180deg,#2c2d26,#171814)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.055),inset 0 -2px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.28)!important
 }
 #arrangePanel .arrange-clip.selected{
  border-color:#a98c45!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(216,180,88,.13),0 3px 7px rgba(0,0,0,.38)!important
 }
 #arrangePanel .arrange-playhead{
  width:2px!important;background:#e1b64f!important;
  box-shadow:0 0 6px rgba(216,180,88,.25)!important
 }
 #arrangePanel .arrange-inspector>div:first-child{
  padding-bottom:8px;border-bottom:1px solid #39362e
 }
 #arrangePanel #arrangeSelectedName{color:#e0d8c3;font-size:10px;letter-spacing:.08em}
 #arrangePanel #arrangeSelectedSource{color:#77736a;font-size:6px}
 #arrangePanel .arrange-inspector-actions button{
  border-color:#464237!important;background:linear-gradient(180deg,#20211b,#10110e)!important
 }
 #arrangePanel .arrange-inspector-actions #arrangeDeleteClip{
  border-color:#63433d!important;color:#c99287
 }
}


/* DBL ARRANGER FOCUS III — production readability, preserve established structure */
@media(max-width:760px){
 #arrangePanel .arrange-shell{
  scrollbar-width:thin;scrollbar-color:#59513d #0b0c09
 }
 #arrangePanel .arrange-track-list{
  box-shadow:6px 0 12px rgba(0,0,0,.34)!important
 }
 #arrangePanel .arrange-track-row{
  position:relative!important
 }
 #arrangePanel .arrange-track-row:after{
  content:"";position:absolute;right:0;top:8px;bottom:8px;width:1px;
  background:rgba(255,255,255,.025);pointer-events:none
 }
 #arrangePanel .arrange-track-row.selected:before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:#caa34a;box-shadow:0 0 7px rgba(216,180,88,.18);pointer-events:none
 }
 #arrangePanel .arrange-timeline{
  background-color:#0b0c09!important;
  background-image:
   linear-gradient(90deg,rgba(216,180,88,.075) 1px,transparent 1px),
   linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),
   linear-gradient(180deg,rgba(255,255,255,.018) 1px,transparent 1px)!important;
  background-size:25% 100%,6.25% 100%,100% 64px!important
 }
 #arrangePanel .arrange-clip{
  min-height:44px!important;padding:6px 8px!important;
  overflow:hidden!important
 }
 #arrangePanel .arrange-clip b{
  display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:7px!important;letter-spacing:.055em!important
 }
 #arrangePanel .arrange-clip small{
  display:block;margin-top:3px;font-size:5px!important;color:#77746b!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
 }
 #arrangePanel .arrange-clip.selected b{color:#ead17c!important}
 #arrangePanel .arrange-playhead:before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:7px;height:5px;background:#e1b64f;clip-path:polygon(0 0,100% 0,50% 100%)
 }
 #arrangePanel .arrange-inspector{
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 4px 10px rgba(0,0,0,.25)!important
 }
 #arrangePanel .arrange-boundary{
  padding-top:7px!important;border-top:1px solid #302e27!important;color:#66635c!important
 }
}


/* DBL ARRANGER FOCUS IV — compact session overview; preserve all existing actions */
@media(max-width:760px){
 #arrangePanel .arrange-track-row{
  min-height:58px!important;padding-top:5px!important;padding-bottom:5px!important
 }
 #arrangePanel .arrange-timeline{
  background-size:25% 100%,6.25% 100%,100% 58px!important
 }
 #arrangePanel .arrange-track-id{
  min-width:0!important;gap:2px!important
 }
 #arrangePanel .arrange-track-id b{
  max-width:96px!important;font-size:8.5px!important
 }
 #arrangePanel .arrange-track-id small{
  max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
 }
 #arrangePanel .arrange-track-row button{
  min-height:30px!important;min-width:30px!important
 }
 #arrangePanel .arrange-clip{
  min-height:40px!important;padding-top:5px!important;padding-bottom:5px!important
 }
 #arrangePanel .arrange-clip b{font-size:6.7px!important}
 #arrangePanel .arrange-clip small{font-size:4.8px!important}
 #arrangePanel .arrange-inspector{
  display:grid!important;gap:8px!important
 }
 #arrangePanel .arrange-inspector label{
  font-size:5.5px!important;letter-spacing:.065em!important;color:#858177!important
 }
 #arrangePanel .arrange-inspector input,
 #arrangePanel .arrange-inspector select{
  min-height:36px!important;border-radius:3px!important;
  border-color:#444035!important;background:#0d0e0b!important
 }
 #arrangePanel .arrange-inspector-actions{margin-top:1px!important}
 #arrangePanel .arrange-inspector-actions button{
  min-height:36px!important
 }
}
@media(max-width:430px){
 #arrangePanel .arrange-track-row{min-height:56px!important}
 #arrangePanel .arrange-timeline{background-size:25% 100%,6.25% 100%,100% 56px!important}
 #arrangePanel .arrange-clip{min-height:38px!important}
}


/* DBL ARRANGER FOCUS V — professional track-console cues, no workflow changes */
@media(max-width:760px){
 #arrangePanel .arrange-track-head{
  background:linear-gradient(180deg,#1c1d18,#10110e)!important;
  box-shadow:inset 0 -2px #090a08,6px 0 12px rgba(0,0,0,.28)!important
 }
 #arrangePanel .arrange-ruler{
  background:linear-gradient(180deg,#171813,#0d0e0b)!important;
  border-bottom:1px solid #3d392f!important
 }
 #arrangePanel .arrange-track-row{
  border-right:1px solid #504a3c!important
 }
 #arrangePanel .arrange-track-row button{
  font-weight:700!important;letter-spacing:.055em!important
 }
 #arrangePanel .arrange-track-row button:hover,
 #arrangePanel .arrange-track-row button:focus-visible{
  border-color:#756641!important;outline:none!important
 }
 #arrangePanel .arrange-track-row button[aria-pressed="true"]{
  box-shadow:inset 0 -2px #9e7e35,0 0 5px rgba(216,180,88,.09)!important
 }
 #arrangePanel .arrange-timeline-wrap{
  position:relative!important
 }
 #arrangePanel .arrange-timeline-wrap:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 1px rgba(255,255,255,.018),inset 0 -1px rgba(0,0,0,.4)
 }
 #arrangePanel .arrange-clip{
  border-left-width:3px!important
 }
 #arrangePanel .arrange-clip.selected{
  border-left-color:#d0a849!important
 }
 #arrangePanel .arrange-inspector-actions button:active,
 #arrangePanel .arrange-tools button:active{
  transform:translateY(1px)!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55)!important
 }
 #arrangePanel .arrange-boundary{
  letter-spacing:.045em!important;line-height:1.35!important
 }
}


/* DBL PAD PERFORMANCE GUARD — long press is audition, never text selection */
.pad,.pad *{
 -webkit-user-select:none!important;user-select:none!important;
 -webkit-touch-callout:none!important;
 -webkit-tap-highlight-color:transparent;
 touch-action:none;
}
.pad b,.pad small{pointer-events:none}


/* DBL PAD PERFORMANCE GUARD II — tactile press state without browser gesture leakage */
.pad.hit{
 transform:translateY(2px) scale(.992);
 filter:brightness(1.08);
 box-shadow:inset 0 3px 12px rgba(0,0,0,.52),0 1px 3px rgba(0,0,0,.5)!important;
}
.pad:focus{outline:none}
.pad:focus-visible{
 outline:1px solid rgba(216,180,88,.7)!important;
 outline-offset:2px!important;
}


/* DBL PAD PERFORMANCE GUARD III — finger-first response, retain keyboard accessibility */
.pad{
 cursor:pointer;
 -webkit-user-drag:none!important;
 overscroll-behavior:contain;
}
.pad.hit b{color:#f0d477!important}
.pad.hit small{color:#9b8d68!important}
@media(hover:none) and (pointer:coarse){
 .pad:hover{filter:none}
 .pad.hit{transition:transform 35ms linear,filter 35ms linear,box-shadow 35ms linear}
}


/* DBL PHONE LANDSCAPE I — keep the workstation inside the physical viewport */
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
 html,body{max-width:100vw!important;overflow-x:hidden!important}
 .app,.shell,.workspace,.center,.main,.content{
  max-width:100vw!important;min-width:0!important;box-sizing:border-box!important
 }
 .left,.right,.legacy-tools,.session-sidebar{display:none!important}
 .center{width:100%!important;margin:0!important;padding-left:8px!important;padding-right:8px!important}
 .workspace-tabs{
  position:sticky!important;top:0!important;z-index:50!important;
  width:100%!important;max-width:100%!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important
 }
 .workspace-tab{min-width:0!important;min-height:36px!important}
 .sampler-command,.center>.section-title,.sampler-stage,
 .sample-load-zone,.import-browser,.wave-wrap,.sequence-panel,
 #arrangePanel,.mixer-console{
  width:100%!important;max-width:100%!important;min-width:0!important;
  box-sizing:border-box!important
 }
 .sampler-stage{overflow:hidden!important;padding:8px!important}
 .sampler-stage .pads,.pads{
  width:100%!important;max-width:100%!important;min-width:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important
 }
 .sampler-stage .pad{
  width:100%!important;min-width:0!important;max-width:none!important;
  min-height:92px!important;box-sizing:border-box!important
 }
 .pad-actions{
  width:100%!important;max-width:100%!important;
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:5px!important;box-sizing:border-box!important
 }
 .pad-actions button{
  width:100%!important;min-width:0!important;max-width:none!important;
  min-height:48px!important;padding:4px 2px!important
 }
 .pad-actions #padSoundAction{grid-column:auto!important}
 .sample-load-zone{
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;
  gap:10px!important;align-items:center!important
 }
 .import-browser,.wave-wrap{overflow:hidden!important}
 .wave-stage,canvas#waveform{max-width:100%!important}
 .sequence-panel{overflow:hidden!important}
 .step-grid,.steps{max-width:100%!important;min-width:0!important}
}


/* DBL UI TIGHTEN I — unified production-instrument hierarchy */
:root{
 --dbl-line:#484337;
 --dbl-line-soft:#302e27;
 --dbl-face-hi:#23241e;
 --dbl-face:#151611;
 --dbl-well:#0b0c09;
 --dbl-ink:#d9d4c7;
 --dbl-muted:#77736a;
 --dbl-gold:#d2aa4d;
}
.workspace-tabs,.sampler-command,.sampler-stage,.sample-load-zone,.import-browser,.wave-wrap,
#arrangePanel,.mixer-console,.sequence-panel{
 border-color:var(--dbl-line)!important;
}
.workspace-tabs,.sampler-command,.sample-load-zone,.import-browser,.wave-wrap,
#arrangePanel,.mixer-console,.sequence-panel{
 background:linear-gradient(180deg,var(--dbl-face-hi),var(--dbl-face))!important;
}
.workspace-tab,.bank,.pad-actions button,.arrange-tools button{
 text-shadow:0 1px #000;
}
.workspace-tab.active,.bank.active{
 color:#f0d477!important;
}
.section-title,.sample-edit-head,.import-browser-head{
 border-bottom:1px solid var(--dbl-line-soft)!important;
}
button:focus-visible,.workspace-tab:focus-visible,.bank:focus-visible{
 outline:1px solid rgba(210,170,77,.78)!important;
 outline-offset:2px!important;
}
@media(max-width:760px){
 .workspace-tabs{padding:4px!important;gap:4px!important}
 .workspace-tab{
  min-height:42px!important;border-radius:3px!important;
  font-size:6.4px!important;letter-spacing:.075em!important
 }
 .sampler-command,.sample-load-zone,.import-browser,.wave-wrap,#arrangePanel,.sequence-panel{
  border-radius:5px!important
 }
 .sampler-command{margin-top:7px!important}
 .sampler-stage{margin-top:6px!important}
 .center>.section-title{margin-top:6px!important}
 .sample-load-zone,.import-browser,.wave-wrap{margin-top:7px!important}
}
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
 .center{padding:0 10px 14px!important}
 .workspace-tabs{
  top:0!important;margin:0 0 6px!important;padding:4px!important;
  background:rgba(13,14,11,.96)!important;backdrop-filter:blur(10px)
 }
 .workspace-tab{min-height:34px!important;font-size:6px!important}
 .sampler-command{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(260px,.9fr)!important;
  align-items:center!important;gap:10px!important;padding:8px 10px!important
 }
 .sampler-command>div:first-child{padding:0!important}
 .bank-strip{margin:0!important}
 .center>.section-title{min-height:34px!important;padding:6px 10px!important}
 .sampler-stage .pad{min-height:84px!important}
 .sampler-stage .pad b{font-size:8px!important}
 .sampler-stage .pad small{font-size:4.8px!important}
 .pad-actions{margin-top:7px!important;padding:6px!important}
 .pad-actions button{min-height:42px!important;font-size:5.5px!important}
 .sample-load-zone{min-height:54px!important;padding:7px 9px!important}
 .import-browser-head,.sample-edit-head{min-height:38px!important}
}


/* DBL KEYGROUP — one source sample, 16 chromatic performance pads */
.keygroup-action.engaged{border-color:rgba(210,170,77,.82)!important;color:#f0d477!important;box-shadow:inset 0 0 0 1px rgba(210,170,77,.22),0 0 12px rgba(210,170,77,.08)!important}
.pad.keygroup b{letter-spacing:.08em}
.pad.keygroup small{color:#9b8d68!important}
@media(max-width:760px){.pad-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}.pad-actions button{min-width:0!important}}
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){.pad-actions{grid-template-columns:repeat(8,minmax(0,1fr))!important}}


/* DBL KEYGROUP II — make chromatic mode read as an instrument, not renamed drum pads */
.pad.keygroup{background:linear-gradient(180deg,#292a24 0%,#171813 62%,#11120f 100%)!important}
.pad.keygroup:nth-child(12n+2),.pad.keygroup:nth-child(12n+4),.pad.keygroup:nth-child(12n+7),.pad.keygroup:nth-child(12n+9),.pad.keygroup:nth-child(12n+11){
 background:linear-gradient(180deg,#1a1b18 0%,#0d0e0c 100%)!important;
}
.pad.keygroup b{font-size:clamp(11px,1.25vw,17px)!important}
.pad.keygroup small{font-size:8px!important;letter-spacing:.08em!important}
.keygroup-action span{display:block;margin-top:3px;font-size:.72em}


/* DBL KEYGROUP III — stronger performance-state legibility */
.keygroup-action.engaged span{color:#f0d477!important}
.pad.keygroup.hit{box-shadow:inset 0 3px 14px rgba(0,0,0,.62),0 0 0 1px rgba(210,170,77,.72),0 0 14px rgba(210,170,77,.12)!important}
.pad.keygroup.selected:before{content:"SOURCE";font-size:5px;letter-spacing:.12em}


/* DBL KEYGROUP IV — octave navigation is a compact performance control */
.keygroup-shift{letter-spacing:.08em!important}
.keygroup-shift:disabled{opacity:.28!important;cursor:default!important}
.keygroup-shift.available:not(:disabled){border-color:#5a5548!important}
@media(max-width:760px){
 .pad-actions{grid-template-columns:repeat(5,minmax(0,1fr))!important}
 .keygroup-action{grid-column:span 2}
}
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
 .pad-actions{grid-template-columns:repeat(10,minmax(0,1fr))!important}
 .keygroup-action{grid-column:span 2}
}


/* DBL KEYGROUP V — source-root orientation without adding another editor */
.keygroup-root span{display:block;margin-top:3px;font-size:.72em;color:#9b8d68}
.keygroup-root.engaged{border-color:rgba(210,170,77,.72)!important}
.keygroup-root.engaged span{color:#f0d477!important}
.keygroup-root:disabled{opacity:.28!important;cursor:default!important}
@media(max-width:760px){.pad-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}.keygroup-action{grid-column:span 2}}
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){.pad-actions{grid-template-columns:repeat(11,minmax(0,1fr))!important}.keygroup-action{grid-column:span 2}}


/* DBL KEYGROUP VI — voice architecture stays visible at the performance surface */
.keygroup-voice span{display:block;margin-top:3px;font-size:.72em;color:#9b8d68}
.keygroup-voice.engaged{border-color:rgba(210,170,77,.72)!important}
.keygroup-voice.engaged span{color:#f0d477!important}
.keygroup-voice:disabled{opacity:.28!important;cursor:default!important}
@media(max-width:760px){.pad-actions{grid-template-columns:repeat(5,minmax(0,1fr))!important}.keygroup-action{grid-column:span 2}}
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){.pad-actions{grid-template-columns:repeat(12,minmax(0,1fr))!important}.keygroup-action{grid-column:span 2}}


/* DBL KEYGROUP VII — derive key faces from the actual MIDI note, not pad position */
.pad.keygroup.keygroup-black{background:linear-gradient(180deg,#262626 0%,#151515 56%,#0c0c0c 100%)!important;border-color:#454545!important}
.pad.keygroup:not(.keygroup-black){background:linear-gradient(180deg,#d1c8b4 0%,#9f9787 58%,#777164 100%)!important;color:#171717!important;border-color:#d9d0bc!important}
.pad.keygroup:not(.keygroup-black) small{color:#4a463e!important}
.pad.keygroup.keygroup-source{box-shadow:inset 0 0 0 2px rgba(218,177,77,.8),0 3px 8px rgba(0,0,0,.42)!important}
.pad.keygroup.keygroup-source:after{content:"SRC";position:absolute;right:5px;top:4px;font-size:7px;line-height:1;letter-spacing:.08em;color:#e2bd62}
.pad.keygroup:not(.keygroup-black).keygroup-source:after{color:#5c4515}

/* DBL pro control finish — explicit values, tactile state, touch-safe faders */
.control-readout{justify-self:end;min-width:34px;padding:2px 5px;border:1px solid #393a34;border-radius:3px;background:#090a08;color:#d8c16c;font-size:7px;font-variant-numeric:tabular-nums;text-align:center}
.mix-controls label{grid-template-columns:1fr auto;align-items:center}
.mix-controls label input{grid-column:1/-1;width:100%}
.mix-controls button{min-height:36px;font-weight:900;letter-spacing:.08em}
.mix-controls button[aria-pressed="true"]{border-color:#9d833d;color:#f0d477;background:linear-gradient(180deg,#302817,#17130d);box-shadow:inset 0 1px rgba(255,255,255,.07),0 0 7px rgba(231,184,77,.08)}
.strip-pan input,.strip-fader input,#mixerMasterGain{touch-action:none;cursor:ns-resize}
.strip-pan input{cursor:ew-resize}
.strip-fader:focus-within,.master-strip label:focus-within{outline:1px solid #c4a64b;outline-offset:2px}
.strip-ms button:focus-visible,.mix-controls button:focus-visible,.mixer-mode-tabs button:focus-visible{outline:1px solid #e2c664;outline-offset:2px}
.master-strip>span{font-weight:950;letter-spacing:.12em}
#mixerMasterReadout{font-variant-numeric:tabular-nums;color:#dfc66c}
@media(max-width:760px){.mix-controls button{min-height:44px}.control-readout{font-size:8px}.strip-ms button{min-height:32px}}


/* DBL MOBILE CONTROL GUARD — DAW controls are gestures, never selectable page text */
@media (pointer:coarse){
 button,summary,.project-file-action,.sample-load-primary,.import-browser-head label,.workspace-tab,.bank-tab,.tool,.transport button,.sampler-command button,.arrange-tools button,.arrange-inspector-actions button,.mixer-tabs button,.fx-slot button{
  -webkit-user-select:none!important;user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;
  touch-action:manipulation;
 }
 button *, .workspace-tab *, .bank-tab *{
  -webkit-user-select:none!important;user-select:none!important;
  pointer-events:none;
 }
 input[type="range"]{
  -webkit-user-select:none!important;user-select:none!important;
  -webkit-touch-callout:none!important;
  touch-action:none;
 }
}


/* DBL PHONE LANDSCAPE RECOVERY — keep the center workspace from inheriting desktop max-content width */
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
 #studio{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}
 .field{
  display:block!important;width:100%!important;max-width:100vw!important;
  min-width:0!important;padding-top:0!important
 }
 .field>.center{
  display:block!important;width:auto!important;max-width:none!important;min-width:0!important;
  margin:0!important;padding:0 10px 16px!important
 }
 .workspace-tabs{
  display:grid!important;width:100%!important;max-width:none!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important
 }
 .sampler-command{
  width:100%!important;max-width:none!important;
  grid-template-columns:minmax(0,1fr) minmax(220px,.72fr)!important
 }
 .bank-strip{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important}
 .center>.section-title,.sampler-stage,.sample-load-zone,.import-browser,.wave-wrap,
 .sequence-panel,#arrangePanel,.mixer-panel.dedicated-mixer{
  width:100%!important;max-width:none!important;min-width:0!important
 }
 .sampler-stage{display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:visible!important}
 .sampler-stage>.pads,.sampler-stage .pads{
  display:grid!important;width:100%!important;max-width:none!important;min-width:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important
 }
 .sampler-stage .pad{min-width:0!important;width:100%!important}
 .sampler-stage>.pad-actions{
  width:100%!important;max-width:none!important;min-width:0!important
 }
}

/* v3.26 — arrangement automation visibility */
.arrange-automation-panel{grid-column:1/-1;border-top:1px solid #303330;background:#0d0f0f;padding:8px;max-height:240px;overflow:auto}.automation-empty{padding:14px;color:#777b77;font-size:6px;font-weight:800;letter-spacing:.08em}.automation-lane-row{display:grid;grid-template-columns:170px 1fr;min-height:52px;border-bottom:1px solid #252825}.automation-lane-head{display:grid;grid-template-columns:1fr auto;gap:3px 6px;align-content:center;padding:7px;border-right:1px solid #2d302d}.automation-lane-head b{font-size:7px}.automation-lane-head small{font-size:5px;color:#777b77}.automation-lane-head button{grid-column:2;grid-row:1/3;border:1px solid #3a3d3a;background:#171919;color:#aaa;font-size:5px}.automation-lane-graph{position:relative;min-height:52px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(6.25% - 1px),#202320 6.25%)}.automation-point{position:absolute;width:7px;height:7px;border-radius:50%;background:#c7c2b6;transform:translate(-50%,50%);box-shadow:0 0 0 1px #0b0c0b}.arrange-inspector-actions #arrangeAutomation.active{background:#d2cec3;color:#101212}@media(max-width:760px){.automation-lane-row{grid-template-columns:112px 1fr}.automation-lane-head b{font-size:6px}}

/* v3.27 — native My Projects */
.projects-shell{width:min(760px,94vw);max-height:min(720px,88vh)}.projects-list{display:grid;gap:7px;padding:10px;overflow:auto}.projects-empty{padding:24px;border:1px dashed #353835;color:#777b77;font-size:7px;text-align:center}.project-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px;border:1px solid #343734;border-radius:6px;background:#111313}.project-card-meta b{display:block;font-size:10px}.project-card-meta small{display:block;margin-top:4px;color:#777b77;font-size:6px}.project-card-actions{display:flex;gap:6px}.project-card-actions button{min-height:36px;padding:0 12px;border:1px solid #3b3e3b;border-radius:4px;background:#191b1b;color:#c7c4bc;font-size:6px;font-weight:900}.project-card-actions button:first-child{background:#cbc7bd;color:#111}.project-card-actions button:disabled{opacity:.3}@media(max-width:600px){.project-card{grid-template-columns:1fr}.project-card-actions button{flex:1}.project-card-actions{display:flex}}

/* v3.28 — editable automation points */
.automation-point{cursor:grab;touch-action:none}.automation-point:active{cursor:grabbing;transform:translate(-50%,50%) scale(1.35)}.automation-point:focus-visible{outline:2px solid currentColor;outline-offset:3px}


/* DBL v3.29 — PRO DAW UI SYSTEM
   Presentation-only refactor: preserve all existing IDs, commands, data bindings and handlers. */
:root{
 --daw-bg:#0e1013;
 --daw-bg-2:#12151a;
 --daw-panel:#16191f;
 --daw-panel-hi:#1d2129;
 --daw-well:#0a0c0f;
 --daw-line:#232731;
 --daw-line-hi:#343a47;
 --daw-text:#d8dde6;
 --daw-muted:#737b89;
 --daw-cyan:#00e5ff;
 --daw-gold:#ffbd45;
 --daw-red:#ff3344;
 --daw-lime:#b8ff3d;
 --daw-magenta:#ff4fcf;
 --daw-amber:#ffb52f;
 --daw-coral:#ff6b57;
 --daw-shadow:0 2px 4px rgba(0,0,0,.5);
 --daw-inset:inset 0 1px 0 rgba(255,255,255,.08);
}
html,body{
 background:var(--daw-bg)!important;
 color:var(--daw-text)!important;
 font-family:"JetBrains Mono","SFMono-Regular","SF Mono","Roboto Mono",ui-monospace,monospace!important;
}
body{letter-spacing:.5px!important}
#studio{
 background:
 radial-gradient(circle at 50% -10%,rgba(0,229,255,.035),transparent 34%),
 linear-gradient(180deg,#0c0e11 0%,#101319 42%,#0d0f12 100%)!important;
 min-height:100dvh;
}
button,select,input,summary,label{
 font-family:inherit!important;
}

/* ultra-compact transport bridge */
#studio>header{
 position:sticky!important;
 top:0!important;
 z-index:120!important;
 min-height:42px!important;
 height:42px!important;
 max-height:42px!important;
 display:flex!important;
 align-items:center!important;
 gap:8px!important;
 padding:4px 8px!important;
 margin:0!important;
 border:0!important;
 border-bottom:1px solid var(--daw-line)!important;
 border-radius:0!important;
 background:rgba(14,16,19,.97)!important;
 backdrop-filter:blur(14px) saturate(120%);
 box-shadow:0 6px 18px rgba(0,0,0,.28)!important;
 overflow:hidden!important;
}
#studio>header>div:first-child{
 flex:0 0 auto!important;
 display:flex!important;
 align-items:baseline!important;
 gap:7px!important;
 min-width:max-content!important;
 padding:0 4px 0 2px!important;
}
#studio>header>div:first-child b{
 font-size:10px!important;
 line-height:1!important;
 letter-spacing:.08em!important;
 color:#f2f4f8!important;
}
#studio>header>div:first-child span{
 font-size:6px!important;
 color:#555e6b!important;
 white-space:nowrap!important;
}
#studio>header .transport{
 flex:1 1 auto!important;
 min-width:0!important;
 height:34px!important;
 display:flex!important;
 flex-wrap:nowrap!important;
 align-items:center!important;
 gap:4px!important;
 padding:0!important;
 margin:0!important;
 overflow-x:auto!important;
 overflow-y:hidden!important;
 scrollbar-width:none;
}
#studio>header .transport::-webkit-scrollbar{display:none}
#studio>header .record-cluster,
#studio>header .project-cluster{
 display:flex!important;
 align-items:center!important;
 gap:4px!important;
 flex:0 0 auto!important;
}
#studio>header button,
#studio>header summary,
#studio>header .project-file-action,
#studio>header .transport>label{
 min-height:30px!important;
 height:30px!important;
 max-height:30px!important;
 box-sizing:border-box!important;
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 gap:5px!important;
 margin:0!important;
 padding:0 9px!important;
 border:1px solid var(--daw-line-hi)!important;
 border-radius:4px!important;
 background:linear-gradient(180deg,#242831 0%,#1a1c22 100%)!important;
 color:#aeb6c3!important;
 box-shadow:var(--daw-inset),var(--daw-shadow)!important;
 font-size:7px!important;
 font-weight:850!important;
 letter-spacing:.065em!important;
 white-space:nowrap!important;
 cursor:pointer;
}
#studio>header button:active,
#studio>header summary:active{
 transform:translateY(1px)!important;
 box-shadow:inset 0 2px 5px rgba(0,0,0,.72)!important;
}
#undo,#redo{
 width:30px!important;
 min-width:30px!important;
 padding:0!important;
 font-size:13px!important;
}
#play{
 border-color:rgba(0,229,255,.48)!important;
 color:#9cf5ff!important;
}
#play:hover,#play[aria-pressed="true"],#play.active{
 color:#071014!important;
 background:linear-gradient(180deg,#5af3ff,#00c9e2)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.55),0 0 8px rgba(0,229,255,.4)!important;
}
#stop{color:#c6ccd6!important}
#record{
 color:#ff7782!important;
 border-color:rgba(255,51,68,.4)!important;
}
#record.active,#record[aria-pressed="true"]{
 background:linear-gradient(180deg,#ff5866,#c9192b)!important;
 color:white!important;
 box-shadow:0 0 10px rgba(255,51,68,.48),inset 0 1px rgba(255,255,255,.2)!important;
 animation:dbl-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes dbl-rec-pulse{50%{box-shadow:0 0 16px rgba(255,51,68,.68),inset 0 1px rgba(255,255,255,.2)}}
#metronome[aria-pressed="true"],#automation[aria-pressed="true"]{
 border-color:rgba(0,229,255,.7)!important;
 color:#b7f9ff!important;
 box-shadow:0 0 8px rgba(0,229,255,.22),var(--daw-inset)!important;
}
#studio>header .transport>label{
 color:#6f7886!important;
 padding-left:7px!important;
}
#studio>header input[type="number"],
#studio>header select{
 height:22px!important;
 min-height:22px!important;
 border:0!important;
 border-left:1px solid #313744!important;
 border-radius:2px!important;
 background:#090b0e!important;
 color:#f3f7ff!important;
 font-size:9px!important;
 font-weight:900!important;
 font-variant-numeric:tabular-nums!important;
}
#bpm{
 width:54px!important;
 color:var(--daw-cyan)!important;
 text-align:center!important;
 text-shadow:0 0 8px rgba(0,229,255,.28);
}
#studio>header input[type="range"]{
 width:62px!important;
 accent-color:var(--daw-cyan)!important;
}
#studio>header .control-readout{
 min-width:30px!important;
 padding:1px 4px!important;
 border:0!important;
 background:#090b0e!important;
 color:#9ea8b6!important;
}
#studio>header .project-menu{position:relative!important}
#studio>header .project-menu-pop{
 top:34px!important;
 min-width:150px!important;
 padding:5px!important;
 border:1px solid var(--daw-line-hi)!important;
 border-radius:5px!important;
 background:#111419!important;
 box-shadow:0 12px 30px rgba(0,0,0,.62)!important;
}
#studio>header .project-menu-pop button{
 width:100%!important;
 justify-content:flex-start!important;
 margin:2px 0!important;
}
#save{
 flex:0 0 auto!important;
 min-width:76px!important;
 max-width:150px!important;
 height:26px!important;
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 padding:0 8px!important;
 border:1px solid #27303a!important;
 border-radius:3px!important;
 background:#090b0e!important;
 color:#7f8997!important;
 font-size:6px!important;
 font-variant-numeric:tabular-nums!important;
 white-space:nowrap!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
}

/* workstation surfaces */
.field{background:transparent!important}
.center{padding-bottom:78px!important}
.legacy-tools{background:#0f1115!important;border-right:1px solid var(--daw-line)!important}
.tool,
.workspace-tab,
.bank,
.pad-actions button,
.arrange-tools button,
.arrange-inspector-actions button,
.mixer-mode-tabs button{
 border-radius:4px!important;
 border:1px solid var(--daw-line-hi)!important;
 background:linear-gradient(180deg,#242831 0%,#1a1c22 100%)!important;
 color:#8d96a4!important;
 box-shadow:var(--daw-inset),0 2px 4px rgba(0,0,0,.45)!important;
}
.tool.active,.workspace-tab.active,.bank.active,
.arrange-tools button.active,.mixer-mode-tabs button.active{
 border-color:rgba(0,229,255,.58)!important;
 color:#d7fbff!important;
 background:linear-gradient(180deg,#173039,#101b21)!important;
 box-shadow:inset 0 0 0 1px rgba(0,229,255,.12),0 0 8px rgba(0,229,255,.17)!important;
}

/* fixed modular workspace dock */
.workspace-tabs{
 position:fixed!important;
 top:auto!important;
 left:50%!important;
 bottom:12px!important;
 transform:translateX(-50%)!important;
 z-index:140!important;
 width:min(520px,calc(100vw - 28px))!important;
 height:46px!important;
 min-height:46px!important;
 max-height:46px!important;
 display:grid!important;
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
 gap:4px!important;
 margin:0!important;
 padding:5px!important;
 border:1px solid #303641!important;
 border-radius:6px!important;
 background:rgba(14,16,20,.96)!important;
 backdrop-filter:blur(16px) saturate(120%);
 box-shadow:0 10px 32px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.04)!important;
}
.workspace-tab{
 min-height:34px!important;
 height:34px!important;
 padding:0 10px!important;
 font-size:7px!important;
 letter-spacing:.08em!important;
}
.workspace-tab.active:after{
 content:"";
 position:absolute;
 left:20%;right:20%;bottom:3px;
 height:2px;
 border-radius:2px;
 background:var(--daw-cyan);
 box-shadow:0 0 7px rgba(0,229,255,.65);
}
.workspace-tab{position:relative!important}

/* sampler becomes dense tactile performance hardware */
.sampler-command,
.sampler-stage,
.sample-load-zone,
.import-browser,
.wave-wrap,
.sequence-panel,
#arrangePanel,
.mixer-panel.dedicated-mixer{
 border:1px solid var(--daw-line-hi)!important;
 border-radius:5px!important;
 background:linear-gradient(180deg,#191d23 0%,#12151a 100%)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.035),0 5px 14px rgba(0,0,0,.34)!important;
}
.sampler-command{
 min-height:44px!important;
 padding:7px 9px!important;
}
.sampler-command strong{
 font-size:11px!important;
 letter-spacing:.07em!important;
 color:#eef2f8!important;
}
.sampler-command small{
 font-size:6px!important;
 color:#656f7e!important;
}
.bank-strip{gap:4px!important}
.bank{
 min-height:30px!important;
 color:#9ca5b2!important;
}
.bank.active{color:#d8fbff!important}
.center>.section-title{
 min-height:34px!important;
 padding:7px 9px!important;
 border:1px solid var(--daw-line)!important;
 border-radius:4px!important;
 background:#101318!important;
}
.center>.section-title span{font-size:9px!important;color:#f0f3f7!important}
.center>.section-title small{font-size:6px!important;color:#68717f!important}
.sampler-stage{
 padding:8px!important;
 gap:8px!important;
}
.pads{
 display:grid!important;
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
 gap:6px!important;
}
.pad{
 --pad-accent:#00e5ff;--pad-glow:rgba(0,229,255,.30);
 position:relative!important;
 min-width:0!important;
 min-height:92px!important;
 overflow:hidden!important;
 border:1px solid #414854!important;
 border-radius:6px!important;
 background:
  radial-gradient(circle at 50% 20%,rgba(255,255,255,.075),transparent 34%),
  linear-gradient(180deg,#2a2f38 0%,#1a1e25 55%,#111419 100%)!important;
 color:#cfd5df!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.11),
  inset 0 -5px 10px rgba(0,0,0,.38),
  0 3px 6px rgba(0,0,0,.55)!important;
 text-shadow:0 1px 1px #000!important;
}
.pad:nth-child(5n+1){--pad-accent:var(--daw-cyan);--pad-glow:rgba(0,229,255,.30)}
.pad:nth-child(5n+2){--pad-accent:var(--daw-lime);--pad-glow:rgba(184,255,61,.28)}
.pad:nth-child(5n+3){--pad-accent:var(--daw-magenta);--pad-glow:rgba(255,79,207,.28)}
.pad:nth-child(5n+4){--pad-accent:var(--daw-amber);--pad-glow:rgba(255,181,47,.28)}
.pad:nth-child(5n+5){--pad-accent:var(--daw-coral);--pad-glow:rgba(255,107,87,.28)}
.pad b{
 font-size:9px!important;
 font-weight:950!important;
 letter-spacing:.06em!important;
 color:#e8edf5!important;
}
.pad small{
 margin-top:5px!important;
 font-size:5.5px!important;
 color:#747e8b!important;
}
.pad.selected{
 border-color:var(--pad-accent)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.15),
  inset 0 -6px 12px rgba(0,0,0,.34),
  0 0 0 1px var(--pad-glow),
  0 0 12px var(--pad-glow)!important;
}
.pad.selected b{color:var(--pad-accent)!important}
.pad.hit{
 transform:translateY(2px) scale(.988)!important;
 border-color:var(--pad-accent)!important;
 background:
  radial-gradient(circle at 50% 50%,var(--pad-glow),#161a20 68%)!important;
 box-shadow:
  inset 0 5px 12px rgba(0,0,0,.62),
  0 0 14px var(--pad-glow)!important;
}
.pad-actions{
 gap:4px!important;
 padding:6px!important;
 border:1px solid #282d36!important;
 border-radius:4px!important;
 background:#0d0f13!important;
}
.pad-actions button{
 min-height:34px!important;
 padding:4px 6px!important;
 font-size:6px!important;
}

/* precision arranger: track console + beat/step grid */
#arrangePanel{
 overflow:hidden!important;
 background:#0f1216!important;
}
#arrangePanel .arrange-head{
 min-height:44px!important;
 padding:7px 8px!important;
 border-bottom:1px solid var(--daw-line)!important;
 background:linear-gradient(180deg,#1a1e24,#12151a)!important;
}
#arrangePanel .arrange-head b{font-size:9px!important;color:#eef2f7!important}
#arrangePanel .arrange-head small{font-size:5.5px!important;color:#67717f!important}
#arrangePanel .arrange-tools{
 gap:4px!important;
 flex-wrap:nowrap!important;
 overflow-x:auto!important;
 scrollbar-width:none;
}
#arrangePanel .arrange-tools::-webkit-scrollbar{display:none}
#arrangePanel .arrange-tools button,
#arrangePanel .arrange-tools label{
 min-height:28px!important;
 height:28px!important;
 font-size:5.5px!important;
 white-space:nowrap!important;
}
#arrangePanel .arrange-shell{
 display:grid!important;
 grid-template-columns:148px minmax(720px,1fr)!important;
 grid-template-rows:28px auto!important;
 overflow:auto!important;
 max-height:58vh!important;
 background:#0a0c0f!important;
 scrollbar-color:#39414d #090b0e;
}
#arrangePanel .arrange-track-head{
 grid-column:1!important;
 grid-row:1!important;
 position:sticky!important;
 left:0!important;top:0!important;
 z-index:8!important;
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 padding:0 7px!important;
 border-right:1px solid #343b47!important;
 border-bottom:1px solid #343b47!important;
 background:#171b21!important;
}
#arrangePanel .arrange-track-head span{font-size:6px!important;color:#9ba4b1!important}
#arrangePanel .arrange-track-head small{font-size:5px!important;color:#58616e!important}
#arrangePanel .arrange-ruler{
 grid-column:2!important;
 grid-row:1!important;
 position:sticky!important;
 top:0!important;
 z-index:7!important;
 min-width:720px!important;
 height:28px!important;
 display:grid!important;
 grid-template-columns:repeat(var(--arrange-bars),minmax(44px,1fr))!important;
 border-bottom:1px solid #343b47!important;
 background:#15191f!important;
}
#arrangePanel .arrange-ruler span{
 display:flex!important;
 align-items:center!important;
 padding-left:5px!important;
 border-left:1px solid #3b4451!important;
 color:#8b95a3!important;
 font-size:5.5px!important;
 font-variant-numeric:tabular-nums!important;
}
#arrangePanel .arrange-track-list{
 grid-column:1!important;
 grid-row:2!important;
 position:sticky!important;
 left:0!important;
 z-index:6!important;
 width:148px!important;
 background:#101318!important;
 border-right:1px solid #343b47!important;
}
#arrangePanel .arrange-track-row{
 min-height:48px!important;
 height:48px!important;
 display:grid!important;
 grid-template-columns:24px minmax(0,1fr) 28px 20px 20px 20px!important;
 align-items:center!important;
 gap:3px!important;
 padding:3px 4px!important;
 border:0!important;
 border-bottom:1px solid #222832!important;
 background:#12161b!important;
 box-sizing:border-box!important;
}
#arrangePanel .arrange-track-row.selected{
 background:linear-gradient(90deg,rgba(0,229,255,.10),#14181e 48%)!important;
 box-shadow:inset 2px 0 var(--daw-cyan)!important;
}
#arrangePanel .arrange-track-code{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 width:22px!important;
 height:20px!important;
 border:1px solid #303844!important;
 border-radius:3px!important;
 background:#0a0d10!important;
 color:var(--daw-cyan)!important;
 font-size:6px!important;
 font-weight:950!important;
}
#arrangePanel .arrange-track-id{
 min-width:0!important;
 overflow:hidden!important;
}
#arrangePanel .arrange-track-id b{
 display:block!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
 white-space:nowrap!important;
 font-size:6.5px!important;
 color:#d8dde5!important;
}
#arrangePanel .arrange-track-id small{
 display:block!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
 white-space:nowrap!important;
 margin-top:2px!important;
 font-size:4.5px!important;
 color:#606a77!important;
}
#arrangePanel .arrange-track-meter{
 width:28px!important;
 height:4px!important;
 overflow:hidden!important;
 border-radius:2px!important;
 background:#080a0c!important;
 box-shadow:inset 0 0 0 1px #252b34!important;
}
#arrangePanel .arrange-track-meter i{
 display:block!important;
 width:0;
 height:100%!important;
 background:linear-gradient(90deg,var(--daw-cyan) 0%,var(--daw-lime) 72%,#ffe356 100%)!important;
 box-shadow:0 0 5px rgba(0,229,255,.3)!important;
 transition:width 60ms linear!important;
}
#arrangePanel .arrange-track-row button{
 width:20px!important;
 min-width:20px!important;
 height:24px!important;
 min-height:24px!important;
 padding:0!important;
 border-radius:3px!important;
 border:1px solid #323945!important;
 background:linear-gradient(180deg,#222730,#171b21)!important;
 color:#7b8592!important;
 font-size:5px!important;
 font-weight:950!important;
}
#arrangePanel .arrange-track-row button[aria-pressed="true"]{
 color:#081013!important;
 border-color:var(--daw-cyan)!important;
 background:var(--daw-cyan)!important;
 box-shadow:0 0 6px rgba(0,229,255,.28)!important;
}
#arrangePanel .arrange-timeline-wrap{
 grid-column:2!important;
 grid-row:2!important;
 position:relative!important;
 min-width:720px!important;
 overflow:hidden!important;
 background:#090b0e!important;
}
#arrangePanel .arrange-timeline{
 min-width:720px!important;
 background-color:#090b0e!important;
 background-image:
  linear-gradient(90deg,rgba(107,122,142,.38) 1px,transparent 1px),
  linear-gradient(90deg,rgba(84,97,114,.20) 1px,transparent 1px),
  linear-gradient(90deg,rgba(65,76,90,.11) 1px,transparent 1px)!important;
 background-size:
  var(--arrange-bar-width,25%) 100%,
  var(--arrange-beat-width,6.25%) 100%,
  var(--arrange-step-width,1.5625%) 100%!important;
}
#arrangePanel .arrange-lane{
 position:relative!important;
 min-height:48px!important;
 height:48px!important;
 border-bottom:1px solid #1f252e!important;
 background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(0,0,0,.015))!important;
}
#arrangePanel .arrange-clip{
 top:5px!important;
 bottom:auto!important;
 min-height:38px!important;
 height:38px!important;
 padding:5px 7px!important;
 border:1px solid var(--clip-accent,var(--daw-cyan))!important;
 border-left:3px solid var(--clip-accent,var(--daw-cyan))!important;
 border-radius:4px!important;
 background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.20) 0 2px,transparent 2px 9px),
  linear-gradient(180deg,var(--clip-bg1,#17626d),var(--clip-bg2,#0b3037))!important;
 color:#061015!important;
 box-shadow:inset 0 1px rgba(255,255,255,.17),0 2px 4px rgba(0,0,0,.48)!important;
 text-align:left!important;
 overflow:hidden!important;
}
#arrangePanel .arrange-lane:nth-child(5n+1){--clip-accent:var(--daw-cyan);--clip-bg1:#147586;--clip-bg2:#0c3b43;--clip-glow:rgba(0,229,255,.34)}
#arrangePanel .arrange-lane:nth-child(5n+2){--clip-accent:var(--daw-lime);--clip-bg1:#607f24;--clip-bg2:#304213;--clip-glow:rgba(184,255,61,.30)}
#arrangePanel .arrange-lane:nth-child(5n+3){--clip-accent:var(--daw-magenta);--clip-bg1:#86336f;--clip-bg2:#461c3b;--clip-glow:rgba(255,79,207,.30)}
#arrangePanel .arrange-lane:nth-child(5n+4){--clip-accent:var(--daw-amber);--clip-bg1:#8b641e;--clip-bg2:#4a3511;--clip-glow:rgba(255,181,47,.30)}
#arrangePanel .arrange-lane:nth-child(5n+5){--clip-accent:var(--daw-coral);--clip-bg1:#8a3e34;--clip-bg2:#48221d;--clip-glow:rgba(255,107,87,.30)}
#arrangePanel .arrange-clip b,
#arrangePanel .arrange-clip:not(:has(b)){
 font-weight:950!important;
}
#arrangePanel .arrange-clip small{
 display:block!important;
 margin-top:3px!important;
 color:rgba(2,9,12,.72)!important;
 font-size:4.5px!important;
}
#arrangePanel .arrange-clip.selected{
 outline:1px solid #fff!important;
 outline-offset:1px!important;
 filter:saturate(1.12) brightness(1.08)!important;
 box-shadow:0 0 0 1px rgba(255,255,255,.24),0 0 12px var(--clip-glow,rgba(0,229,255,.34))!important;
}
#arrangePanel .arrange-clip.muted{opacity:.38!important;filter:saturate(.25)!important}
#arrangePanel .arrange-playhead{
 width:1px!important;
 background:var(--daw-red)!important;
 box-shadow:0 0 6px rgba(255,51,68,.55)!important;
}
#arrangePanel .arrange-playhead:before{
 background:var(--daw-red)!important;
}
#arrangePanel .arrange-inspector{
 border-top:1px solid var(--daw-line)!important;
 background:#11151a!important;
}

/* mixer and automation density */
.dedicated-mixer .mixer-console-head,
.dedicated-mixer .mixer-mode-tabs,
.arrange-automation-panel{
 background:#111419!important;
 border-color:var(--daw-line)!important;
}
.mixer-strip{
 border-color:#2b313a!important;
 border-radius:4px!important;
 background:linear-gradient(180deg,#171b21,#0f1216)!important;
}
.mixer-strip.selected{
 border-color:rgba(0,229,255,.52)!important;
 box-shadow:0 0 8px rgba(0,229,255,.12)!important;
}
.strip-meter i,.master-meter i{
 background:linear-gradient(180deg,#ff5a4f 0%,#ffd83d 24%,#95ff44 58%,#00e5ff 100%)!important;
}
.automation-point{
 background:var(--daw-cyan)!important;
 box-shadow:0 0 0 1px #071014,0 0 7px rgba(0,229,255,.42)!important;
}

/* project manager: precision tool rather than card stack */
.projects-shell{
 border:1px solid #303641!important;
 border-radius:6px!important;
 background:#0e1115!important;
}
.project-card{
 border:1px solid #29303a!important;
 border-radius:4px!important;
 background:linear-gradient(180deg,#171b21,#111419)!important;
}
.project-card-actions button:first-child{
 background:linear-gradient(180deg,#19e5f8,#00b8ce)!important;
 color:#061013!important;
 border-color:#40f2ff!important;
}

/* mobile: preserve dense DAW workflow and make the dock thumb-reachable */
@media(max-width:760px){
 #studio>header{
  gap:5px!important;
  padding-left:6px!important;
  padding-right:6px!important;
 }
 #studio>header>div:first-child{
  width:108px!important;
  min-width:108px!important;
  overflow:hidden!important;
 }
 #studio>header>div:first-child b{
  font-size:8px!important;
  white-space:nowrap!important;
 }
 #studio>header>div:first-child span{display:none!important}
 #studio>header .transport{padding-right:2px!important}
 #studio>header button,
 #studio>header summary,
 #studio>header .project-file-action,
 #studio>header .transport>label{
  padding-left:7px!important;
  padding-right:7px!important;
  font-size:6px!important;
 }
 #settingsButton{font-size:0!important;width:30px!important;min-width:30px!important;padding:0!important}
 #settingsButton:before{content:"⚙";font-size:12px!important}
 #save{min-width:66px!important;font-size:5.5px!important}
 .legacy-tools{display:none!important}
 .field{display:block!important}
 .field>.center{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:8px 8px 82px!important;
 }
 .workspace-tabs{
  left:8px!important;
  right:82px!important;
  width:auto!important;
  transform:none!important;
  bottom:calc(8px + env(safe-area-inset-bottom))!important;
 }
 #automation{
  position:fixed!important;
  z-index:141!important;
  right:8px!important;
  bottom:calc(8px + env(safe-area-inset-bottom))!important;
  width:68px!important;
  min-width:68px!important;
  height:46px!important;
  max-height:46px!important;
  border-color:rgba(0,229,255,.34)!important;
  border-radius:6px!important;
  background:rgba(17,20,25,.97)!important;
  backdrop-filter:blur(16px);
  box-shadow:0 10px 28px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.05)!important;
 }
 #automation[aria-pressed="true"]{
  color:#061014!important;
  background:linear-gradient(180deg,#4af1ff,#00bfd7)!important;
 }
 .workspace-tab{
  min-height:34px!important;
  height:34px!important;
  font-size:5.8px!important;
  padding:0 4px!important;
 }
 .sampler-command{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(150px,.75fr)!important;
  gap:8px!important;
  align-items:center!important;
 }
 .pads{gap:5px!important}
 .pad{
  min-height:80px!important;
  border-radius:5px!important;
 }
 .pad b{font-size:8px!important}
 .pad small{font-size:5px!important}
 .pad-actions{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
 }
 #arrangePanel .arrange-shell{
  grid-template-columns:142px minmax(660px,1fr)!important;
  max-height:56vh!important;
 }
 #arrangePanel .arrange-track-list{width:142px!important}
 #arrangePanel .arrange-track-row{
  grid-template-columns:22px minmax(0,1fr) 24px 18px 18px 18px!important;
  gap:2px!important;
  padding:3px!important;
 }
 #arrangePanel .arrange-track-meter{width:24px!important}
 #arrangePanel .arrange-timeline-wrap,
 #arrangePanel .arrange-timeline,
 #arrangePanel .arrange-ruler{
  min-width:660px!important;
 }
 .project-card{padding:8px!important}
 .project-card-actions{gap:4px!important;overflow-x:auto!important}
 .project-card-actions button{min-width:max-content!important;min-height:32px!important;padding:0 8px!important}
}
@media(max-width:430px){
 #studio>header>div:first-child{
  width:92px!important;
  min-width:92px!important;
 }
 #studio>header>div:first-child b{font-size:7px!important}
 .field>.center{padding-left:6px!important;padding-right:6px!important}
 .workspace-tabs{right:76px!important}
 #automation{width:62px!important;min-width:62px!important;font-size:5.5px!important}
 .pad{min-height:74px!important}
 .sampler-command{
  grid-template-columns:minmax(0,1fr) minmax(126px,.8fr)!important;
 }
}

/* reduced motion keeps DAW state legible without losing affordance */
@media(prefers-reduced-motion:reduce){
 #record.active,#record[aria-pressed="true"]{animation:none!important}
 .arrange-track-meter i{transition:none!important}
}


/* DBL contextual producer inspector — right rail follows the active workspace */
.context-sidebar{
 min-height:100%;
 display:flex;
 flex-direction:column;
 gap:0;
 background:linear-gradient(180deg,#11151a 0%,#0c0f13 100%);
}
.context-head{
 padding:12px 12px 10px;
 border-bottom:1px solid var(--daw-line,#232731);
 background:linear-gradient(180deg,rgba(0,229,255,.035),transparent 82%);
}
.context-head small{
 display:block;
 margin-bottom:5px;
 color:var(--daw-cyan,#00e5ff);
 font-size:6px;
 font-weight:950;
 letter-spacing:.14em;
}
.context-head h2{
 margin:0;
 color:#eef3f9;
 font-size:11px;
 line-height:1.25;
 letter-spacing:.065em;
}
.context-head span{
 display:block;
 margin-top:5px;
 color:#6f7987;
 font-size:6px;
 font-weight:800;
 letter-spacing:.07em;
}
.context-stats{
 display:grid;
 grid-template-columns:1fr;
}
.context-stat{
 min-height:38px;
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 align-items:center;
 gap:10px;
 padding:7px 12px;
 border-bottom:1px solid #20262f;
 background:rgba(255,255,255,.008);
}
.context-stat span{
 color:#697382;
 font-size:5.5px;
 font-weight:850;
 letter-spacing:.09em;
}
.context-stat b{
 color:#d8dee7;
 font-size:7px;
 font-weight:950;
 font-variant-numeric:tabular-nums;
 text-align:right;
}
.context-actions{
 display:grid;
 grid-template-columns:1fr;
 gap:5px;
 padding:10px 10px 12px;
 border-bottom:1px solid #242a33;
}
.context-actions button{
 min-height:34px;
 padding:0 9px;
 border:1px solid #343b47;
 border-radius:4px;
 background:linear-gradient(180deg,#242831,#171b21);
 color:#aeb8c6;
 box-shadow:inset 0 1px rgba(255,255,255,.065),0 2px 4px rgba(0,0,0,.35);
 font-size:6px;
 font-weight:950;
 letter-spacing:.07em;
 text-align:left;
}
.context-actions button:first-child{
 border-color:rgba(0,229,255,.42);
 color:#bffaff;
 background:linear-gradient(180deg,#173039,#101b21);
}
.context-actions button:active{
 transform:translateY(1px);
 box-shadow:inset 0 2px 5px rgba(0,0,0,.68);
}
.context-system{
 margin-top:auto;
 border-top:1px solid #262c35;
 background:#0b0e12;
}
.context-system .readout{
 min-height:34px;
 margin:0;
 padding:8px 12px;
 border-bottom:1px solid #1d222a;
}
.context-system .readout span{
 color:#596371;
 font-size:5px;
 font-weight:850;
 letter-spacing:.08em;
}
.context-system .readout b{
 max-width:180px;
 color:#9ea9b6;
 font-size:5.8px;
 line-height:1.35;
 text-align:right;
 overflow-wrap:anywhere;
}
html[data-dbl-workspace="make"] .context-head{box-shadow:inset 2px 0 var(--daw-cyan,#00e5ff)}
html[data-dbl-workspace="sequence"] .context-head{box-shadow:inset 2px 0 var(--daw-lime,#b8ff3d)}
html[data-dbl-workspace="arrange"] .context-head{box-shadow:inset 2px 0 var(--daw-magenta,#ff4fcf)}
html[data-dbl-workspace="mix"] .context-head{box-shadow:inset 2px 0 var(--daw-amber,#ffb52f)}
@media(max-width:980px){
 .context-sidebar .context-stat{min-height:34px;padding:6px 9px}
 .context-head{padding:10px 9px 8px}
 .context-actions{padding:8px}
}


/* Truthful live-sequence preview inside Arrange.
   This is a visual monitor only; it never writes arrangement clips. */
#arrangePanel .arrange-live-clip{
 position:absolute;
 top:5px;
 min-height:38px;
 height:38px;
 padding:5px 7px;
 box-sizing:border-box;
 border:1px dashed rgba(0,229,255,.82);
 border-left:3px solid var(--daw-cyan,#00e5ff);
 border-radius:4px;
 background:
  repeating-linear-gradient(135deg,rgba(0,229,255,.10) 0 7px,rgba(0,229,255,.025) 7px 14px),
  linear-gradient(180deg,#112831,#0b171d);
 color:#c8faff;
 box-shadow:inset 0 1px rgba(255,255,255,.06),0 0 10px rgba(0,229,255,.12);
 font-size:6px;
 font-weight:950;
 letter-spacing:.055em;
 pointer-events:none;
 overflow:hidden;
}
#arrangePanel .arrange-live-clip small{
 display:block;
 margin-top:3px;
 color:#6fa4ad;
 font-size:4.5px;
 font-weight:850;
 letter-spacing:.04em;
}
#arrangePanel .arrange-live-clip:after{
 content:"LIVE";
 position:absolute;
 right:5px;
 top:5px;
 padding:1px 3px;
 border:1px solid rgba(0,229,255,.35);
 border-radius:2px;
 color:#00e5ff;
 background:#071014;
 font-size:4px;
 letter-spacing:.08em;
}


/* DBL Arrange density + tactile clip pass */
:root{
 --dbl-track-height:54px;
 --dbl-ruler-height:34px;
 --dbl-track-header-width:172px;
 --dbl-arrange-toolbar-height:36px;
}
.arrange-panel{
 display:flex;
 flex-direction:column;
 min-height:min(76vh,760px);
 overflow:hidden;
}
.arrange-head{flex:0 0 auto;min-height:44px;padding:6px 9px}
.arrange-shell{
 flex:1 1 auto;
 min-height:clamp(420px,62vh,700px);
 max-height:none;
 grid-template-columns:var(--dbl-track-header-width) minmax(900px,1fr);
 grid-template-rows:var(--dbl-ruler-height) auto;
}
.arrange-track-head{height:var(--dbl-ruler-height);box-sizing:border-box;padding:5px 8px}
.arrange-ruler{height:var(--dbl-ruler-height)}
.arrange-ruler span{padding:9px 7px 6px}
.arrange-track-row,.arrange-lane{height:var(--dbl-track-height);box-sizing:border-box}
.arrange-track-row{
 grid-template-columns:24px minmax(58px,1fr) 34px 28px 28px 24px;
 gap:3px;
 padding:3px 5px;
}
.arrange-track-code{
 border-left:3px solid var(--track-color,#00e5ff);
 border-radius:2px;
 background:color-mix(in srgb,var(--track-color,#00e5ff) 14%,#101317);
 padding:6px 2px;
}
.arrange-track-meter{height:4px!important;align-self:center}
.arrange-lane{border-bottom:1px solid #232731}
.arrange-clip{
 top:1px;
 height:calc(var(--dbl-track-height) - 2px);
 padding:5px 8px 4px;
 border:1px solid color-mix(in srgb,var(--track-color,#00e5ff) 76%,#fff);
 border-radius:3px;
 background:linear-gradient(180deg,color-mix(in srgb,var(--track-color,#00e5ff) 72%,#27303a) 0%,color-mix(in srgb,var(--track-color,#00e5ff) 48%,#10151a) 100%)!important;
 color:#071015;
 text-shadow:0 1px rgba(255,255,255,.18);
 box-shadow:inset 0 1px rgba(255,255,255,.24),inset 0 -10px 20px rgba(0,0,0,.13),0 1px 3px rgba(0,0,0,.45);
}
.track-accent-0{--track-color:#00e5ff}
.track-accent-1{--track-color:#9dff2f}
.track-accent-2{--track-color:#ffd23f}
.track-accent-3{--track-color:#ff4fcf}
.track-accent-4{--track-color:#ff8a2b}
.track-accent-5{--track-color:#58f5bd}
.track-accent-6{--track-color:#4f8cff}
.track-accent-7{--track-color:#a879ff}
.arrange-track-row.selected{box-shadow:inset 3px 0 var(--track-color,#c9a84d)}
.arrange-track-row.selected .arrange-track-id b{color:var(--track-color,#ead487)}
.arrange-clip .clip-label{
 display:block;
 max-width:calc(100% - 14px);
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 font-size:6.5px;
 font-weight:950;
 letter-spacing:.045em;
}
.arrange-clip small{
 position:absolute;
 left:8px;
 bottom:4px;
 margin:0;
 color:rgba(5,12,15,.68);
 font-size:4.5px;
 letter-spacing:.06em;
}
.clip-step-preview{
 position:absolute;
 left:8px;
 right:8px;
 top:20px;
 height:10px;
 display:grid;
 grid-auto-flow:column;
 grid-auto-columns:1fr;
 gap:1px;
 opacity:.82;
}
.clip-step-preview i{
 align-self:end;
 height:2px;
 border-radius:1px;
 background:rgba(5,12,15,.18);
}
.clip-step-preview i.hit{
 height:8px;
 background:rgba(5,12,15,.66);
}
.clip-resize-handle{
 position:absolute;
 z-index:4;
 top:0;
 bottom:0;
 width:14px;
 cursor:ew-resize;
 touch-action:none;
}
.clip-resize-handle.left{left:0}
.clip-resize-handle.right{right:0}
.clip-resize-handle:after{
 content:"";
 position:absolute;
 top:50%;
 width:2px;
 height:16px;
 margin-top:-8px;
 border-radius:2px;
 background:rgba(255,255,255,.72);
 opacity:0;
 transition:opacity .1s ease;
}
.clip-resize-handle.left:after{left:3px}
.clip-resize-handle.right:after{right:3px}
.arrange-clip:hover .clip-resize-handle:after,
.arrange-clip.resizing .clip-resize-handle:after{opacity:.8}
.arrange-clip.dragging,.arrange-clip.resizing{
 opacity:.85;
 z-index:15;
 box-shadow:0 4px 12px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.24);
}
.arrange-timeline.show-snap-guide:after{
 content:"";
 position:absolute;
 z-index:14;
 top:0;
 bottom:0;
 left:var(--snap-guide-left,0);
 width:1px;
 background:#f4f7fb;
 box-shadow:0 0 7px rgba(255,255,255,.58);
 pointer-events:none;
}
.arrange-clip.selected{
 outline:1px solid #fff;
 outline-offset:0;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 3px 10px rgba(0,0,0,.52);
}
.arrange-clip.muted{opacity:.34;filter:saturate(.42)}
.arrange-inspector{
 flex:0 0 var(--dbl-arrange-toolbar-height);
 min-height:var(--dbl-arrange-toolbar-height);
 display:flex;
 align-items:center;
 gap:7px;
 padding:3px 7px;
 overflow-x:auto;
 overflow-y:hidden;
 border-top:1px solid #343a43;
 background:#0e1115;
}
.arrange-inspector>div:first-child{
 flex:0 0 142px;
 min-width:142px;
 overflow:hidden;
}
.arrange-inspector>div:first-child small{display:none}
.arrange-inspector>div:first-child b{
 margin:0;
 font-size:7px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.arrange-inspector>div:first-child span{
 margin-top:2px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.arrange-inspector-actions{
 flex:1 0 max-content;
 display:flex;
 gap:4px;
}
.arrange-inspector-actions button{
 min-height:28px!important;
 height:28px;
 min-width:70px;
 padding:0 8px;
 font-size:5.5px;
 white-space:nowrap;
}
.arrange-boundary{display:none}
.arrange-automation-panel:not([hidden]){
 position:absolute;
 left:var(--dbl-track-header-width);
 right:0;
 bottom:var(--dbl-arrange-toolbar-height);
 z-index:16;
 max-height:180px;
 overflow:auto;
 box-shadow:0 -8px 20px rgba(0,0,0,.5);
}
.workspace-tabs{
 position:sticky!important;
 top:auto!important;
 bottom:0!important;
 z-index:24;
 min-height:46px;
 height:46px;
 box-sizing:border-box;
 margin-top:4px;
 border-top:1px solid #353a43;
 border-bottom:0;
 background:rgba(8,10,12,.96);
 backdrop-filter:blur(10px);
}
@media(max-width:760px){
 :root{--dbl-track-height:50px;--dbl-track-header-width:132px}
 .arrange-panel{min-height:70vh}
 .arrange-shell{grid-template-columns:var(--dbl-track-header-width) 1024px;min-height:52vh;max-height:none}
 .arrange-track-row,.arrange-lane{height:var(--dbl-track-height)}
 .arrange-track-row{grid-template-columns:18px minmax(50px,1fr) 28px 28px;padding:3px}
 .arrange-track-meter,.arrange-track-row>button:last-child{display:none}
 .arrange-clip{height:calc(var(--dbl-track-height) - 2px)}
 .arrange-inspector{position:relative;left:auto;min-width:0;grid-template-columns:none;box-shadow:0 -7px 18px rgba(0,0,0,.24)}
 .arrange-inspector>div:first-child{flex-basis:112px;min-width:112px}
 .arrange-inspector-actions button{min-height:30px!important;height:30px;min-width:66px}
 .workspace-tabs{height:48px;min-height:48px}
}

/* DBL Sample/Chop hardware editor */
.sample-chop-console{max-width:980px;background:linear-gradient(180deg,#171b22,#0b0e13);border:1px solid #343b48;border-radius:12px;padding:0;overflow:hidden;box-shadow:0 18px 55px #0009,inset 0 1px #4a53631f}
.sample-chop-head{min-height:52px;margin:0;padding:10px 14px;border-bottom:1px solid #29303b;background:linear-gradient(180deg,#1a1f27,#11151b);display:flex;align-items:center;justify-content:space-between}
.sample-chop-head>div:first-child{display:grid;gap:4px}.sample-chop-head span{font-weight:900;letter-spacing:.14em}.sample-chop-head small{max-width:540px;color:#8f9aa8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sample-format{display:flex;align-items:center;gap:8px}.sample-format>span{padding:5px 8px;border:1px solid #394452;border-radius:4px;background:#090c10;color:#9eeeff;font-size:8px;letter-spacing:.08em}.sample-format button{width:30px;height:30px;border:1px solid #39414d;background:#12161c;color:#aab2bd;border-radius:5px}
.sampler-wave-stage{position:relative;height:clamp(260px,42vh,430px);background:#12151b;overflow:hidden;border-bottom:1px solid #29303b}.wave-wrap .sampler-wave-stage canvas{width:100%;height:100%;display:block;touch-action:none}
.precision-toolbar{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:9px 12px;margin:0;background:#0e1217;border-bottom:1px solid #29303b}.zoom-cluster,.audition-cluster{display:flex;align-items:center;gap:5px}.precision-toolbar button,.slice-focus-bar button,.hardware-chop-strip button{min-height:28px;padding:5px 8px;border:1px solid #38424e;border-radius:4px;background:linear-gradient(#202630,#12171e);color:#cbd3dc;font-size:8px;font-weight:900;letter-spacing:.05em}.zoom-cluster span{min-width:42px;color:#6fdfff;font-size:8px;text-align:center}
.trim-lcd{display:flex;justify-content:center;gap:7px;min-width:0}.trim-lcd label{display:grid;grid-template-columns:auto auto 24px 24px;gap:4px;align-items:center;color:#74808e;font-size:7px}.trim-lcd label>span{min-width:78px;padding:5px 6px;border:1px solid #25303a;border-radius:3px;background:#05090c;color:#78efff;font:700 10px ui-monospace,SFMono-Regular,monospace;text-shadow:0 0 8px #00e5ff55}.trim-lcd label:last-child{grid-template-columns:auto auto}.trim-lcd button{min-height:23px;padding:2px}
#sampleAudition.active,#sampleAudition:active,#sampleLoopToggle.active{border-color:#00e5ff;color:#b9fbff;box-shadow:0 0 12px #00e5ff44,inset 0 0 12px #00e5ff22}.slice-focus-bar{display:flex;align-items:center;gap:5px;padding:7px 12px;background:#11161c;border-bottom:1px solid #29303b}.slice-focus-bar #sliceFocus{margin-right:auto;color:#9cefff;font-size:8px}
.hardware-chop-strip{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;background:linear-gradient(180deg,#171c23,#0c1015)}.chop-segments{display:flex}.chop-segments button{border-radius:0;margin-left:-1px}.chop-segments button:first-child{border-radius:5px 0 0 5px}.chop-segments button:last-child{border-radius:0 5px 5px 0}.chop-segments button.active{border-color:#00e5ff;color:#b9fbff;background:#102832;box-shadow:inset 0 -2px #00e5ff}.transient-threshold{display:grid;grid-template-columns:auto 100px;gap:3px 8px;align-items:center;color:#8b96a3;font-size:7px}.transient-threshold input{accent-color:#00e5ff}.transient-threshold span{grid-column:2;color:#d5a74a;font-size:7px}.slice-readout{margin-left:auto;color:#8c98a5;font-size:8px}.slice-actions{display:flex;gap:6px}.slice-actions button{border-color:#9a7431;color:#f2c76c}.slice-actions button:first-child{border-color:#087d91;color:#71efff}
.wave-wrap.editing{border-color:#00b9d5;box-shadow:0 0 0 1px #00e5ff33,0 18px 55px #0009}
@media(max-width:760px){.sample-chop-console{border-radius:8px}.sampler-wave-stage{height:300px}.precision-toolbar{grid-template-columns:1fr}.zoom-cluster,.audition-cluster{justify-content:center}.trim-lcd{display:grid;grid-template-columns:1fr}.hardware-chop-strip{flex-wrap:wrap}.slice-readout{margin-left:0}.slice-actions{margin-left:auto}.transient-threshold{flex:1}.sample-chop-head small{max-width:190px}}

.finish-ribbon{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 10px;margin:0 0 8px;border:1px solid var(--line,#30343a);border-radius:8px;background:rgba(255,255,255,.025)}.finish-ribbon button{font-size:10px;letter-spacing:.08em;padding:6px 8px;opacity:.68}.finish-ribbon button.active{opacity:1;border-color:currentColor}.finish-ribbon>span{opacity:.35;font-size:10px}.finish-ribbon small{margin-left:auto;opacity:.72;font-size:10px;letter-spacing:.03em}@media(max-width:760px){.finish-ribbon{gap:4px;padding:6px}.finish-ribbon button{padding:5px 6px;font-size:9px}.finish-ribbon small{width:100%;margin-left:0;padding-top:2px}}

.finish-ribbon button.ready::after{content:" ✓";font-weight:700}.finish-ribbon button.ready{opacity:.9}

/* v3.30 — producer sound browser */
.sound-browser .import-browser-head>div{display:grid;gap:2px}.sound-browser .import-browser-head small{font-size:7px;color:var(--muted)}.sound-browser-shell{display:grid;grid-template-columns:86px minmax(0,1fr);min-height:150px}.sound-browser-nav{display:grid;align-content:start;border-right:1px solid #282923;background:#0a0b09}.sound-browser-nav button{min-height:42px;border:0;border-bottom:1px solid #24251f;background:transparent;color:#888b82;font-size:7px;font-weight:900;text-align:left;padding:0 10px}.sound-browser-nav button.active{color:#dfc77a;background:#171711;border-left:2px solid #c4a744}.sound-browser-main{min-width:0}.sound-browser-tools{display:flex;gap:6px;align-items:center;padding:6px;border-bottom:1px solid #282923}.sound-browser-tools input{min-width:0;flex:1;height:34px;border:1px solid #36372f;border-radius:4px;background:#090a08;color:var(--text);padding:0 9px;font-size:8px}.sound-browser-tools span{font-size:7px;color:#d8c57d;font-weight:900;white-space:nowrap}.sound-browser .import-file-list{display:grid;gap:3px;overflow:auto;max-height:220px;padding:5px}.sound-browser .import-file{min-width:0}.sound-browser-row{grid-template-columns:minmax(0,1fr) 38px 48px;align-items:center;padding:3px}.sound-browser-name,.sound-preview,.sound-load{border:0;background:transparent;color:var(--text)}.sound-browser-name{display:grid;gap:2px;text-align:left;min-width:0;padding:6px}.sound-browser-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sound-preview{height:34px;border:1px solid #3b3c34;border-radius:4px;color:#d8c57d;font-size:11px}.sound-load{height:34px;border:1px solid #4a4532;border-radius:4px;color:#d8c57d;font-size:7px;font-weight:900}.browser-bank-row,.browser-project-row{cursor:pointer}@media(max-width:760px){.sound-browser-shell{grid-template-columns:74px minmax(0,1fr)}.sound-browser-nav button{min-height:46px;padding:0 7px}.sound-browser .import-file-list{max-height:260px}.sound-preview,.sound-load{height:40px}.sound-browser-row{grid-template-columns:minmax(0,1fr) 42px 52px}}

/* v3.31 — primary producer navigation */
.producer-nav{display:grid;grid-template-columns:repeat(8,minmax(78px,1fr));gap:3px;overflow-x:auto;scrollbar-width:thin}.producer-nav .workspace-tab{min-width:78px;padding:10px 7px;white-space:nowrap}.producer-nav-tab{color:#c7b46e!important}.producer-nav-tab:active{transform:translateY(1px)}@media(max-width:760px){.producer-nav{display:flex;position:sticky;top:0;z-index:14;padding:5px;background:#090a08;scroll-snap-type:x proximity}.producer-nav .workspace-tab{flex:0 0 auto;min-width:92px;min-height:44px;scroll-snap-align:start;font-size:8px}.producer-nav .workspace-tab[data-workspace="arrange"],.producer-nav .workspace-tab[data-workspace="mix"]{min-width:88px}}

/* v3.32 — contextual producer quick actions */
.producer-quick-actions{display:flex;gap:5px;margin:-9px 0 14px;padding:6px;border:1px solid #34362f;border-top:0;border-radius:0 0 8px 8px;background:#0b0c0a;overflow-x:auto}.producer-quick-actions[hidden]{display:none}.producer-quick-actions button{flex:0 0 auto;min-height:34px;padding:7px 11px;border:1px solid #45473f;border-radius:5px;background:linear-gradient(180deg,#181916,#0e0f0d);color:#c9c5b9;font-size:7px;font-weight:900;letter-spacing:.09em;white-space:nowrap}.producer-quick-actions button:active{background:#d8d3c6;color:#090a08}@media(max-width:760px){.producer-quick-actions{position:sticky;top:54px;z-index:13;margin:-5px 0 10px;padding:5px}.producer-quick-actions button{min-height:40px;padding:8px 12px}}


/* v3.30 — DBL piano roll + arranger console polish */
:root{--dbl-bg-deep:#080a0c;--dbl-bg-panel:#101417;--dbl-bg-elevated:#171c20;--dbl-bg-canvas:#0b151c;--dbl-border:#2c363c;--dbl-border-strong:#52616a;--dbl-text:#e7ecec;--dbl-text-muted:#98a3a8;--dbl-text-dim:#69757b;--dbl-accent-amber:#d4ae4c;--dbl-accent-cyan:#58b7c5;--dbl-accent-orange:#d46d3f;--dbl-danger:#c64c42;--dbl-grid-major:rgba(136,170,180,.24);--dbl-grid-minor:rgba(136,170,180,.08);--dbl-playhead:#e3bd55;--dbl-selection:#65c4d2;--dbl-radius-sm:4px;--dbl-radius-md:7px;--dbl-control-height:36px;--dbl-touch-target:44px}
.piano-roll,.arrange-panel{background:var(--dbl-bg-deep);border-color:var(--dbl-border);color:var(--dbl-text);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.piano-roll-head,.arrange-head{background:var(--dbl-bg-panel);border-color:var(--dbl-border);min-height:48px}
.piano-roll-head b,.arrange-head b{color:var(--dbl-text);font-size:10px;letter-spacing:.14em}
.piano-roll-head small,.arrange-head small{color:var(--dbl-text-muted)}
.piano-roll button,.arrange-panel button,.piano-roll select,.arrange-panel select{border-color:var(--dbl-border);border-radius:var(--dbl-radius-sm)}
.piano-roll button:focus-visible,.arrange-panel button:focus-visible,.piano-roll select:focus-visible,.arrange-panel select:focus-visible{outline:2px solid var(--dbl-selection);outline-offset:2px}
.piano-roll button:active,.arrange-panel button:active{transform:translateY(1px)}
.piano-roll button:disabled,.arrange-panel button:disabled{opacity:.38;cursor:not-allowed}
.piano-roll-body{background:var(--dbl-bg-canvas);scrollbar-color:var(--dbl-border-strong) var(--dbl-bg-deep)}
.piano-keys{position:sticky;left:0;z-index:3;box-shadow:3px 0 0 rgba(0,0,0,.22)}
.piano-keys button{border-bottom-color:var(--dbl-border);background:#d7d9d5;color:#101416}
.piano-keys button.black{background:#22292d;color:#dbe0e0}
.piano-keys button:active{background:var(--dbl-accent-cyan);color:#081013}
.piano-grid{background-color:var(--dbl-bg-canvas);background-image:linear-gradient(90deg,var(--dbl-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--dbl-grid-minor) 1px,transparent 1px);background-size:25% 100%,6.25% 100%}
.piano-cell{border-right-color:transparent;border-bottom-color:rgba(128,150,158,.09);background:rgba(8,16,21,.38)}
.piano-cell.beat{border-right-color:var(--dbl-grid-major)}
.piano-cell.in-scale{background:rgba(30,56,65,.18)}
.piano-cell.out-scale{background:rgba(7,12,15,.48)}
.piano-cell.active{background:#d8ddd9;box-shadow:inset 0 -4px 0 var(--dbl-accent-amber),inset 0 0 0 1px #f3f4ef}
.piano-cell.chord-tone{background:#bfc9c8}
.piano-cell.multi-selected,.piano-cell.selected{outline:2px solid var(--dbl-selection);outline-offset:-2px}
.piano-cell.transport-step{box-shadow:inset 2px 0 0 var(--dbl-playhead)}
.piano-roll-tools,.piano-roll-settings,.note-actions,.piano-roll-edit{background:var(--dbl-bg-panel);border-color:var(--dbl-border)}
.piano-roll-tools button,.note-actions button{min-height:var(--dbl-control-height);background:var(--dbl-bg-elevated);color:var(--dbl-text)}
.piano-roll-tools button:hover,.note-actions button:hover{border-color:var(--dbl-border-strong)}
#prSelectMode[aria-pressed="true"],#prSelectMode.active,.note-actions button.active{border-color:var(--dbl-accent-cyan);box-shadow:inset 0 -2px 0 var(--dbl-accent-cyan)}
.scale-status.signature{border-color:rgba(212,174,76,.45)}
.arrange-shell{background:var(--dbl-bg-canvas)}
.arrange-track-head,.arrange-ruler{background:var(--dbl-bg-panel);border-color:var(--dbl-border)}
.arrange-ruler span{border-left-color:var(--dbl-grid-major);color:var(--dbl-text-muted);font-variant-numeric:tabular-nums}
.arrange-track-list{background:var(--dbl-bg-deep);border-color:var(--dbl-border)}
.arrange-track-row{border-bottom-color:var(--dbl-border)}
.arrange-track-row.selected{background:rgba(88,183,197,.10);box-shadow:inset 3px 0 var(--dbl-selection)}
.arrange-track-row button{min-width:32px;background:var(--dbl-bg-elevated);border-color:var(--dbl-border);color:var(--dbl-text)}
.arrange-timeline{background-color:var(--dbl-bg-canvas);background-image:linear-gradient(90deg,var(--dbl-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--dbl-grid-minor) 1px,transparent 1px)}
.arrange-lane{border-bottom-color:var(--dbl-border)}
.arrange-clip{border-color:rgba(231,236,236,.25);box-shadow:inset 0 -2px 0 rgba(212,174,76,.38)}
.arrange-clip.selected{outline:2px solid var(--dbl-selection);outline-offset:-2px}
.arrange-playhead{background:var(--dbl-playhead)!important;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.transport{font-variant-numeric:tabular-nums}
@media(max-width:760px){.piano-roll-head,.arrange-head{position:sticky;top:0;z-index:12}.piano-roll button,.arrange-panel button{min-height:var(--dbl-touch-target)}.piano-roll-tools,.note-actions{overflow-x:auto;grid-auto-flow:column;grid-auto-columns:minmax(64px,max-content);grid-template-columns:none;scrollbar-width:thin}.piano-roll-body{grid-template-columns:46px 640px;max-height:56vh}.piano-keys,.piano-grid{grid-template-rows:repeat(25,30px)}.arrange-shell{grid-template-columns:150px minmax(864px,1fr);max-height:62vh}.arrange-track-row{grid-template-columns:24px 1fr 32px 32px 24px}.transport{position:sticky;top:0;z-index:30;background:#0b0d0e}}
@media(prefers-reduced-motion:reduce){.piano-roll *,.arrange-panel *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* v3.31 — truthful Slip/Grid edit modes */
.edit-mode-strip{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--dbl-border,#303438);border-radius:6px;background:var(--dbl-bg-deep,#08090a)}.edit-mode-strip button{min-height:30px;padding:5px 9px;border:1px solid transparent;background:transparent;color:var(--dbl-text-muted,#8b9296);font-size:7px;font-weight:900;letter-spacing:.08em}.edit-mode-strip button.active,.edit-mode-strip button[aria-pressed="true"]{border-color:var(--dbl-accent-cyan,#58b7c5);background:rgba(88,183,197,.12);color:var(--dbl-text,#f1f1ef);box-shadow:inset 0 -2px 0 var(--dbl-accent-cyan,#58b7c5)}.edit-mode-strip+label select:disabled{opacity:.4}@media(max-width:760px){.edit-mode-strip{flex:0 0 auto}.edit-mode-strip button{min-height:40px;min-width:58px}}


/* v3.32 — restrained pro-console hierarchy polish */
.arrange-head,.piano-roll-head{padding:9px 12px;gap:12px}.arrange-tools{gap:5px;align-items:center}.arrange-tools>button,.arrange-tools>label,.arrange-inspector-actions button{min-height:34px}.arrange-tools label{color:var(--dbl-text-muted);font-size:7px;letter-spacing:.06em}.arrange-tools select{min-height:30px;background:var(--dbl-bg-deep);color:var(--dbl-text);padding:4px 7px}
.arrange-inspector{border-top-color:var(--dbl-border);background:linear-gradient(180deg,var(--dbl-bg-panel),var(--dbl-bg-deep));padding:10px 12px}.arrange-inspector>div:first-child{min-width:150px}.arrange-inspector>div:first-child small{color:var(--dbl-text-dim);letter-spacing:.09em}.arrange-inspector>div:first-child b{color:var(--dbl-text);letter-spacing:.06em}.arrange-inspector>div:first-child span{color:var(--dbl-text-muted)}
.arrange-inspector-actions{gap:4px}.arrange-inspector-actions button{background:var(--dbl-bg-elevated);color:var(--dbl-text-muted);font-size:7px;font-weight:900;letter-spacing:.055em;padding:6px 8px}.arrange-inspector-actions button:hover{color:var(--dbl-text);border-color:var(--dbl-border-strong)}#arrangeDeleteClip{color:#d9877f}#arrangeAutomation[aria-pressed="true"]{color:#b8f5ff;border-color:var(--dbl-accent-cyan);box-shadow:inset 0 -2px var(--dbl-accent-cyan)}
.arrange-clip{border-radius:4px;overflow:hidden}.arrange-clip b{letter-spacing:.04em}.arrange-clip small{opacity:.78}.arrange-clip.selected{box-shadow:inset 0 -3px 0 var(--dbl-accent-amber),0 0 0 1px rgba(88,183,197,.18)}
.piano-roll-settings{gap:7px;align-items:center}.piano-roll-settings label{color:var(--dbl-text-muted);font-size:7px;letter-spacing:.06em}.piano-roll-settings select{min-height:32px;background:var(--dbl-bg-deep);color:var(--dbl-text)}.degree-principle{border-color:var(--dbl-border);background:linear-gradient(90deg,rgba(212,174,76,.07),transparent 58%)}.degree-principle strong{color:var(--dbl-accent-amber)}
.edit-mode-strip{box-shadow:inset 0 1px rgba(255,255,255,.025)}.edit-mode-strip button{transition:border-color .12s ease,background .12s ease,color .12s ease}.control-readout{font-variant-numeric:tabular-nums;color:var(--dbl-accent-cyan)}
@media(max-width:760px){.arrange-head{align-items:flex-start}.arrange-tools{padding-bottom:2px;overflow-x:auto;scrollbar-width:thin}.arrange-inspector{gap:8px}.arrange-inspector-actions{display:flex;overflow-x:auto;padding-bottom:3px}.arrange-inspector-actions button{flex:0 0 auto;min-height:40px}.piano-roll-settings{overflow-x:auto;scrollbar-width:thin}.piano-roll-settings>label,.piano-roll-settings>.edit-mode-strip{flex:0 0 auto}}


/* v3.33 — connected-control polish: existing DBL transport, mixer and sampler only */
.transport{gap:6px}.transport>button,.transport .record-cluster>button,.transport .settings-button{min-height:34px;font-weight:800;letter-spacing:.035em}.transport>label,.transport .record-cluster>label{display:flex;align-items:center;gap:5px;color:var(--dbl-text-muted,#98a3a8);font-size:7px;letter-spacing:.06em}.transport select,.transport input[type=number]{min-height:30px;border:1px solid var(--dbl-border,#303438);border-radius:4px;background:var(--dbl-bg-deep,#08090a);color:var(--dbl-text,#f1f1ef)}#play{border-color:#4a625b}#record{border-color:#70443f;color:#e6a19a}#record.active,#record[aria-pressed="true"]{background:rgba(198,76,66,.16);border-color:var(--dbl-danger,#c64c42);color:#ffd0ca}#metronome[aria-pressed="true"],#automation[aria-pressed="true"]{border-color:var(--dbl-accent-cyan,#58b7c5);color:#b8f5ff;box-shadow:inset 0 -2px var(--dbl-accent-cyan,#58b7c5)}.transport-readout{min-width:32px;text-align:right}
.dedicated-mixer{background:var(--dbl-bg-deep,#080a0c);border-color:var(--dbl-border,#2c363c)}.mixer-console-head{min-height:48px;padding:9px 12px;background:var(--dbl-bg-panel,#101417);border-color:var(--dbl-border,#2c363c)}.mixer-console-head b{letter-spacing:.14em}.mixer-console-head small{color:var(--dbl-text-muted,#98a3a8)}.mixer-mode-tabs{gap:3px;padding:5px;background:#0b0e10;border-color:var(--dbl-border,#2c363c)}.mixer-mode-tabs button{min-height:32px;background:var(--dbl-bg-elevated,#171c20);color:var(--dbl-text-muted,#98a3a8);font-size:7px;font-weight:900;letter-spacing:.08em}.mixer-mode-tabs button.active{color:var(--dbl-text,#e7ecec);border-color:var(--dbl-accent-cyan,#58b7c5);box-shadow:inset 0 -2px var(--dbl-accent-cyan,#58b7c5)}.mixer-inspector{background:linear-gradient(180deg,var(--dbl-bg-panel,#101417),var(--dbl-bg-deep,#080a0c));border-color:var(--dbl-border,#2c363c)}.mix-controls button{font-size:8px;font-weight:900;letter-spacing:.07em}.mix-controls button[aria-pressed="true"],.mix-controls button.active{border-color:var(--dbl-accent-cyan,#58b7c5);box-shadow:inset 0 -2px var(--dbl-accent-cyan,#58b7c5)}
.sampler-command{border-color:var(--dbl-border,#2c363c);background:linear-gradient(180deg,#13171a,#0b0e10)}.sampler-command strong{letter-spacing:.12em}.sampler-command small{color:var(--dbl-text-muted,#98a3a8)}.pad-actions button{letter-spacing:.055em}.pad-actions button span{font-variant-numeric:tabular-nums}.pad-actions button[aria-pressed="true"],.pad-actions button.active{border-color:var(--dbl-accent-cyan,#58b7c5);box-shadow:inset 0 -2px var(--dbl-accent-cyan,#58b7c5)}.sample-load-zone{border-color:var(--dbl-border,#2c363c)}
@media(max-width:760px){.transport{gap:4px}.transport>button,.transport .record-cluster>button{min-height:40px}.transport>label{min-height:40px}.mixer-mode-tabs{overflow-x:auto}.mixer-mode-tabs button{min-width:78px;min-height:40px}.mix-controls button{min-height:40px}}


/* v3.34 — piano roll mobile density upgrade, existing controls only */
.piano-roll-tools{display:grid;grid-template-columns:38px minmax(110px,1fr) 38px minmax(96px,auto);gap:6px;align-items:center}.piano-roll-tools .octave-arrow{width:38px;min-width:38px;padding:0;font-size:16px;line-height:1}.piano-roll-tools #prRange{text-align:center;font-size:7px;letter-spacing:.08em;color:var(--dbl-text-muted)}.piano-roll-settings{grid-template-columns:auto minmax(74px,.65fr) minmax(116px,1.1fr) minmax(92px,.8fr) auto auto minmax(76px,.7fr) minmax(150px,1.5fr) minmax(96px,.8fr);align-items:end}.piano-roll-settings>label{min-width:0}.piano-roll-settings select{width:100%}.degree-moves{align-self:stretch}.piano-roll-body{border-top:1px solid var(--dbl-border);box-shadow:inset 0 1px rgba(255,255,255,.02)}.scale-status{min-height:34px;padding:7px 10px}
@media(max-width:760px){.piano-roll-tools{grid-template-columns:36px minmax(94px,1fr) 36px minmax(92px,auto);padding:6px}.piano-roll-tools .octave-arrow{width:36px;min-width:36px;min-height:36px!important}.piano-roll-tools #prRange{white-space:nowrap}.piano-roll-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:7px;overflow:visible}.piano-roll-settings>.edit-mode-strip{grid-column:1 / -1;width:max-content}.piano-roll-settings>label{min-height:58px;padding:6px;border:1px solid var(--dbl-border);border-radius:5px;background:rgba(255,255,255,.018)}.piano-roll-settings>label:has(#prDefaultVelocity){grid-column:1 / -1}.piano-roll-settings .degree-moves{grid-column:1 / -1;display:grid;grid-template-columns:1fr repeat(3,52px);align-items:center;gap:4px;padding:5px;border:1px solid var(--dbl-border);border-radius:5px}.piano-roll-settings #prChordStamp{min-height:48px}.piano-roll-body{max-height:62vh}.piano-keys,.piano-grid{grid-template-rows:repeat(25,28px)}}


/* v3.35 — DBL Poly Panel; legacy step engine retained as selected-row truth */
.poly-panel{margin:10px 0 12px;border:1px solid rgba(212,174,76,.68);border-radius:7px;background:linear-gradient(180deg,#10161a,#090d10);box-shadow:inset 0 1px rgba(255,255,255,.025);overflow:hidden}.poly-panel-head{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid var(--dbl-border);letter-spacing:.08em}.poly-panel-head>div{display:flex;align-items:center;gap:10px;min-width:0}.poly-panel-head small{color:var(--dbl-text-muted);font-size:7px;letter-spacing:.1em}.dbl-badge{display:inline-block;padding:3px 6px;margin-right:5px;border:1px solid var(--dbl-accent-amber);border-radius:3px;color:var(--dbl-accent-amber);font-size:8px}.poly-mode-strip{display:grid;grid-template-columns:repeat(7,minmax(72px,1fr));gap:4px;padding:7px 10px;border-bottom:1px solid var(--dbl-border)}.poly-mode-strip button,.poly-lane-strip button{min-height:34px;background:var(--dbl-bg-elevated);color:var(--dbl-text-muted);font-size:7px;font-weight:900;letter-spacing:.07em}.poly-mode-strip button.active,.poly-lane-strip button.active{color:#b8f5ff;border-color:var(--dbl-accent-cyan);box-shadow:inset 0 -2px var(--dbl-accent-cyan)}.poly-grid-head{display:grid;grid-template-columns:minmax(150px,1.7fr) repeat(16,minmax(30px,1fr));gap:3px;padding:7px 10px 3px;color:var(--dbl-text-dim);font-size:7px;text-align:center}.poly-grid-head span:first-child{text-align:left;color:var(--dbl-accent-amber)}.poly-selected-row{display:grid;grid-template-columns:minmax(150px,1.7fr) minmax(520px,16fr);gap:5px;padding:4px 10px 8px}.poly-row-identity{display:flex;flex-direction:column;justify-content:center;padding:7px 9px;border:1px solid var(--dbl-border);border-radius:4px;background:#10161a}.poly-row-identity b{font-size:9px;letter-spacing:.06em}.poly-row-identity small{margin-top:3px;color:var(--dbl-text-muted);font-size:7px}.poly-panel .steps{margin:0;display:grid;grid-template-columns:repeat(16,minmax(30px,1fr));gap:3px}.poly-panel .step{min-width:0;min-height:44px;border-radius:3px;font-size:8px}.poly-panel .step.on{border-color:var(--dbl-accent-amber);box-shadow:inset 0 -3px var(--dbl-accent-amber)}.poly-panel .step.playing{border-color:var(--dbl-accent-cyan);box-shadow:0 0 0 1px var(--dbl-accent-cyan),inset 0 -3px var(--dbl-accent-cyan)}.poly-lane-strip{display:flex;align-items:center;gap:4px;padding:7px 10px;border-top:1px solid var(--dbl-border);overflow-x:auto}.poly-lane-strip button{flex:0 0 auto;min-width:88px}.poly-lane-strip small{margin-left:auto;color:var(--dbl-text-dim);font-size:7px;white-space:nowrap}
@media(max-width:760px){.poly-panel{margin:7px 0}.poly-panel-head{align-items:flex-start}.poly-panel-head>div{display:block}.poly-panel-head small{display:block;margin-top:4px}.poly-mode-strip{display:flex;overflow-x:auto}.poly-mode-strip button{flex:0 0 82px;min-height:40px}.poly-grid-head{grid-template-columns:110px repeat(16,42px);width:max-content}.poly-selected-row{grid-template-columns:110px 672px;width:max-content}.poly-panel{overflow-x:auto}.poly-panel .steps{grid-template-columns:repeat(16,39px)}.poly-panel .step{min-height:46px}.poly-lane-strip{width:max-content;min-width:100%}.poly-lane-strip button{min-height:40px}}


/* v3.36 — Poly Panel real row/grid binding */
.poly-panel{--dbl-poly-bg:#0c1218;--dbl-poly-panel:#111a22;--dbl-poly-panel-raised:#17232d;--dbl-poly-border:#2a3a45;--dbl-poly-text:#dbe4e8;--dbl-poly-muted:#7e909a;--dbl-poly-amber:#f2bd45;--dbl-poly-cyan:#21d4d1;--dbl-poly-orange:#ef7e34;--dbl-poly-red:#e65c5c;--dbl-poly-playhead:#f2bd45;--dbl-poly-selection:#21d4d1;background:var(--dbl-poly-bg);color:var(--dbl-poly-text)}
.poly-panel-head{background:var(--dbl-poly-panel)}.poly-title{display:flex;align-items:center;gap:8px;min-width:0}.poly-title small{white-space:nowrap}.poly-head-state{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.poly-head-state span{padding:4px 6px;border:1px solid var(--dbl-poly-border);border-radius:3px;background:#0a0f13;color:var(--dbl-poly-muted);font-size:7px;letter-spacing:.06em;white-space:nowrap}.poly-head-state #polyOwnershipState{color:var(--dbl-poly-amber)}.poly-head-state #polyEngineState{color:var(--dbl-poly-cyan)}
.poly-mode-strip button:disabled,.poly-lane-strip button:disabled{opacity:.32;cursor:not-allowed;box-shadow:none!important;border-color:var(--dbl-poly-border)!important;color:var(--dbl-poly-muted)!important}
.poly-grid-head{grid-template-columns:minmax(210px,1.8fr) repeat(16,minmax(34px,1fr));border-top:1px solid var(--dbl-poly-border);border-bottom:1px solid var(--dbl-poly-border);background:#0a1014}.poly-grid-head span:nth-child(4n+2){border-left:1px solid rgba(242,189,69,.28)}
.poly-rows{min-width:820px}.poly-row{display:grid;grid-template-columns:minmax(210px,1.8fr) minmax(544px,16fr);border-bottom:1px solid rgba(42,58,69,.7);background:#0d1419}.poly-row:nth-child(even){background:#0b1217}.poly-row.selected{background:rgba(33,212,209,.055);box-shadow:inset 3px 0 var(--dbl-poly-selection)}.poly-row.muted{opacity:.58}.poly-row-info{display:grid;grid-template-columns:minmax(0,1fr) 30px 30px auto;gap:4px;align-items:center;padding:4px 6px;border-right:1px solid var(--dbl-poly-border);background:inherit}.poly-row-select{min-width:0;display:grid;gap:2px;text-align:left;border:0;background:transparent;color:var(--dbl-poly-text);padding:5px 4px}.poly-row-select strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;letter-spacing:.05em}.poly-row-select small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dbl-poly-muted);font-size:6px}.poly-row-ms{width:30px;height:30px;padding:0;border:1px solid var(--dbl-poly-border);border-radius:3px;background:var(--dbl-poly-panel-raised);color:var(--dbl-poly-muted);font-size:7px;font-weight:900}.poly-row-ms[aria-pressed="true"]{border-color:var(--dbl-poly-cyan);color:var(--dbl-poly-text);box-shadow:inset 0 -2px var(--dbl-poly-cyan)}.poly-role-badge{min-width:52px;padding:5px 6px;border:1px solid var(--dbl-poly-border);border-radius:3px;color:var(--dbl-poly-amber);font-size:6px;font-weight:900;text-align:center;letter-spacing:.05em}
.poly-row-cells{display:grid;grid-template-columns:repeat(16,minmax(34px,1fr));gap:2px;padding:4px}.poly-cell{position:relative;min-width:0;min-height:34px;border:1px solid #22313a;border-radius:2px;background:#101a20}.poly-cell:nth-child(4n+1){border-left-color:#53606a}.poly-cell.on{background:linear-gradient(180deg,#b78728,#7f5c16);border-color:var(--dbl-poly-amber);box-shadow:inset 0 -2px rgba(255,238,170,.42)}.poly-cell.selected{outline:2px solid var(--dbl-poly-selection);outline-offset:-2px}.poly-cell.playing::after{content:"";position:absolute;inset:-3px 0;background:rgba(242,189,69,.14);border-left:1px solid var(--dbl-poly-playhead);border-right:1px solid var(--dbl-poly-playhead);pointer-events:none}
.poly-lower{display:grid;grid-template-columns:minmax(0,1fr) 210px;border-top:1px solid var(--dbl-poly-border)}.poly-lane-editor{display:grid;grid-template-columns:repeat(16,minmax(34px,1fr));gap:2px;padding:7px 10px;background:#0a1014;overflow-x:auto}.poly-lane-cell{display:grid;grid-template-rows:auto 68px auto;gap:3px;align-items:center;justify-items:center;min-width:34px;color:var(--dbl-poly-muted);font-size:6px}.poly-lane-cell input{writing-mode:vertical-lr;direction:rtl;width:24px;height:68px;accent-color:var(--dbl-poly-cyan)}.poly-lane-cell small{font-size:6px}.poly-lane-cell:not(.active){opacity:.3}.poly-inspector{display:grid;gap:6px;padding:9px;border-left:1px solid var(--dbl-poly-border);background:var(--dbl-poly-panel)}.poly-inspector>small{color:var(--dbl-poly-muted);font-size:6px;letter-spacing:.08em}.poly-inspector>b{font-size:9px}.poly-inspector>span{color:var(--dbl-poly-amber);font-size:7px}.poly-inspector label{display:grid;gap:3px;color:var(--dbl-poly-muted);font-size:6px}.poly-inspector input,.poly-inspector select{width:100%;min-height:30px;border:1px solid var(--dbl-poly-border);border-radius:3px;background:#091015;color:var(--dbl-poly-text);padding:4px 6px}.poly-inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px}.poly-inspector-actions button{min-height:34px;background:var(--dbl-poly-panel-raised);color:var(--dbl-poly-text);font-size:7px;font-weight:900}.poly-inspector-actions button[aria-pressed="true"]{border-color:var(--dbl-poly-cyan);box-shadow:inset 0 -2px var(--dbl-poly-cyan)}.poly-legacy-steps{display:none!important}
@media(max-width:760px){.poly-panel{overflow:hidden}.poly-panel-head{display:grid;grid-template-columns:1fr}.poly-title{display:block}.poly-title small{display:block;margin-top:4px;white-space:normal}.poly-head-state{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.poly-mode-strip{padding:6px;scrollbar-width:thin}.poly-grid-head,.poly-rows{min-width:850px}.poly-grid-head{grid-template-columns:170px repeat(16,42px)}.poly-row{grid-template-columns:170px 672px}.poly-row-info{position:sticky;left:0;z-index:3;grid-template-columns:minmax(0,1fr) 28px 28px;background:#0d1419;box-shadow:4px 0 8px #0008}.poly-row:nth-child(even) .poly-row-info{background:#0b1217}.poly-row.selected .poly-row-info{background:#0d1c20}.poly-row-cells{grid-template-columns:repeat(16,40px)}.poly-cell{min-height:40px}.poly-lower{display:block;min-width:0}.poly-lane-editor{grid-template-columns:repeat(16,42px);min-width:704px}.poly-inspector{border-left:0;border-top:1px solid var(--dbl-poly-border);grid-template-columns:repeat(2,minmax(0,1fr))}.poly-inspector>b,.poly-inspector>span,.poly-inspector>small,.poly-inspector-actions{grid-column:1/-1}.poly-lane-strip{width:100%;min-width:0;overflow-x:auto}.poly-lane-strip small{display:none}}


/* v3.37 — Poly row actions remain compact and engine-backed */
.poly-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px}.poly-quick-actions button{min-height:32px;background:#0a1014;color:var(--dbl-poly-muted);border:1px solid var(--dbl-poly-border);font-size:7px;font-weight:900;letter-spacing:.055em}.poly-quick-actions button:hover{color:var(--dbl-poly-text);border-color:var(--dbl-poly-cyan)}.poly-inspector select:disabled,.poly-inspector input:disabled{opacity:.42;cursor:not-allowed}
@media(max-width:760px){.poly-quick-actions{grid-column:1/-1}.poly-quick-actions button{min-height:40px}}


/* v3.38 — shared-pattern edit safety */
#polyMakeUnique{min-height:26px;padding:4px 7px;border:1px solid var(--dbl-poly-amber);border-radius:3px;background:rgba(242,189,69,.08);color:var(--dbl-poly-amber);font-size:7px;font-weight:900;letter-spacing:.06em}.poly-cell:disabled{cursor:not-allowed;opacity:.48}.poly-lane-editor.locked{opacity:.62}.poly-lane-editor.locked::before{content:"SHARED PATTERN · MAKE UNIQUE TO EDIT EVENTS";grid-column:1/-1;padding:5px 7px;border:1px solid rgba(242,189,69,.45);border-radius:3px;color:var(--dbl-poly-amber);font-size:7px;letter-spacing:.06em}


/* v3.39 — Poly paint gesture safety */
.poly-cell{touch-action:pan-x pan-y}.poly-row-cells{touch-action:pan-x pan-y}.poly-cell.paint-preview{outline:1px solid var(--dbl-poly-cyan);outline-offset:-1px}


/* v3.38 — Poly musical scene memory */
.poly-scene-strip{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1.2fr) repeat(9,auto);gap:5px;align-items:center;padding:7px 10px;border-top:1px solid var(--dbl-poly-border);border-bottom:1px solid var(--dbl-poly-border);background:#0a1014}.poly-scene-strip[hidden]{display:none!important}.poly-scene-strip>div{display:grid;gap:2px}.poly-scene-strip small{font-size:6px;color:var(--dbl-poly-muted);letter-spacing:.08em}.poly-scene-strip b{font-size:8px;color:var(--dbl-poly-amber);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.poly-scene-strip select,.poly-scene-strip button{min-height:34px;border:1px solid var(--dbl-poly-border);border-radius:3px;background:var(--dbl-poly-panel-raised);color:var(--dbl-poly-text);font-size:7px;font-weight:900}.poly-scene-strip button:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:760px){.poly-scene-strip{grid-template-columns:minmax(150px,1fr) minmax(150px,1fr);overflow-x:auto}.poly-scene-strip>button{min-width:92px;min-height:40px}.poly-scene-strip>div,.poly-scene-strip>select{grid-column:span 1}}


/* v3.39 — DBL Preamp source-stage controls */
.poly-preamp{border:1px solid var(--dbl-poly-border);border-radius:4px;background:#0a1014;overflow:hidden}.poly-preamp summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;padding:6px 8px;cursor:pointer;color:var(--dbl-poly-text);font-size:7px;font-weight:900;letter-spacing:.07em}.poly-preamp summary b{color:var(--dbl-poly-muted);font-size:7px}.poly-preamp[open] summary b{color:var(--dbl-poly-amber)}.poly-preamp>label{display:grid;grid-template-columns:auto auto;gap:4px 8px;align-items:center;padding:6px 8px;border-top:1px solid rgba(42,58,69,.65);color:var(--dbl-poly-muted);font-size:6px}.poly-preamp>label input[type="range"]{grid-column:1/-1;width:100%;accent-color:var(--dbl-poly-amber)}.poly-preamp-toggle{grid-template-columns:auto 1fr!important}.poly-preamp-toggle input{width:16px;height:16px;accent-color:var(--dbl-poly-amber)}
@media(max-width:760px){.poly-preamp{grid-column:1/-1}.poly-preamp summary{min-height:40px}.poly-preamp>label{min-height:48px}}


/* v3.40 — Poly mobile finish: preserve horizontal grid access without changing wiring */
@media(max-width:760px){
  .poly-panel{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .poly-row-info{position:sticky;left:0;z-index:4}
  .poly-row.selected .poly-row-select strong{color:var(--dbl-poly-cyan)}
  .poly-cell.selected{outline-width:2px}
  .poly-cell.playing::after{background:rgba(242,189,69,.19)}
  .poly-scene-strip{scrollbar-width:thin}
}


/* v3.41 — professional Piano Roll: real note blocks, timeline, pitch ruler, aligned velocity lane */
.piano-roll{
 --pr-pitch-w:76px;--pr-step-w:58px;--pr-row-h:30px;--pr-canvas-w:calc(var(--pr-step-w) * 16);--pr-canvas-h:calc(var(--pr-row-h) * 25);
 --dbl-pr-bg:#0b1015;--dbl-pr-panel:#111922;--dbl-pr-canvas:#0d151d;--dbl-pr-key-white:#d7dde0;--dbl-pr-key-black:#1d252d;
 --dbl-pr-grid-major:#47545e;--dbl-pr-grid-beat:#2f3d47;--dbl-pr-grid-minor:#1c2831;--dbl-pr-note:#e9ae3b;--dbl-pr-note-selected:#22d3d1;
 --dbl-pr-playhead:#f4c34c;--dbl-pr-ghost:#66818d;--dbl-pr-text:#e1e8eb;--dbl-pr-muted:#81909a;
 margin:8px 0 14px;border:1px solid #2c363c;border-radius:8px;background:var(--dbl-pr-bg);overflow:hidden
}
.piano-roll-head{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:minmax(150px,1fr) auto 40px;gap:8px;align-items:center;min-height:48px;padding:7px 9px;border-bottom:1px solid #2c363c;background:rgba(13,19,24,.98);backdrop-filter:blur(12px)}
.pr-title{display:grid;gap:2px;min-width:0}.pr-title>b{font-size:9px;letter-spacing:.14em}.pr-title>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#98a3a8;font-size:7px;letter-spacing:.07em}
.pr-head-state{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}.pr-head-state::-webkit-scrollbar{display:none}
.pr-head-state>span,.pr-head-state>button{flex:0 0 auto;min-height:26px;padding:4px 7px;border:1px solid #2c363c;border-radius:3px;background:#0a1014;color:#98a3a8;font-size:6px;font-weight:900;letter-spacing:.065em}
#prOwnershipState{color:#f4c34c}#prPosition{color:#22d3d1;font-variant-numeric:tabular-nums}#prMakeUnique{color:#f4c34c;border-color:#7d6a34}
.pr-toolbar{display:flex;align-items:center;gap:5px;padding:5px 7px;border-bottom:1px solid #2c363c;background:#0d1419;overflow-x:auto;scrollbar-width:none}.pr-toolbar::-webkit-scrollbar{display:none}
.pr-tool-group,.pr-toolbar .edit-mode-strip{display:flex;gap:3px;flex:0 0 auto}.pr-toolbar button,.pr-inline-control{min-height:34px;flex:0 0 auto}.pr-tool-group button{min-width:62px}
.pr-toolbar button.active,.pr-toolbar button[aria-pressed="true"]{border-color:#22d3d1;color:#dffcff;box-shadow:inset 0 -2px #22d3d1;background:rgba(34,211,209,.08)}
.pr-inline-control{display:flex!important;align-items:center;gap:5px;padding:3px 5px;border:1px solid #2c363c;border-radius:4px;color:#81909a;font-size:6px;font-weight:900;letter-spacing:.07em}.pr-inline-control select{min-height:28px!important}
.pr-composer-strip{display:grid;grid-template-columns:90px minmax(120px,1fr) minmax(165px,1.25fr) 82px 86px 92px 82px minmax(98px,.72fr) 94px minmax(136px,1fr) minmax(146px,1.08fr) 118px;gap:5px;align-items:end;padding:6px 7px;border-bottom:1px solid #2c363c;background:#0c1217}
.pr-composer-strip>label{display:grid;gap:3px;min-width:0;color:#81909a;font-size:6px;letter-spacing:.065em}.pr-composer-strip select{width:100%;min-height:32px}.pr-composer-strip .scale-status{align-self:stretch;min-height:32px;border:1px solid #2c363c;border-radius:4px}
.pr-composer-strip #prChordStamp{min-height:32px}.pr-composer-strip .degree-moves{min-height:32px}.pr-default-velocity input{min-width:120px}
.pr-editor-scroll{position:relative;overflow:auto;max-height:610px;background:#081016;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.pr-editor-grid{display:grid;grid-template-columns:var(--pr-pitch-w) var(--pr-canvas-w);grid-template-rows:32px var(--pr-canvas-h) 92px;width:max-content;min-width:100%}
.pr-corner{position:sticky;top:0;left:0;z-index:24;display:grid;align-content:center;padding:3px 7px;border-right:1px solid #2c363c;border-bottom:1px solid #2c363c;background:#0b1116}.pr-corner>b{font-size:6px;letter-spacing:.12em}.pr-corner>small{font-size:6px;color:#81909a}
.pr-timeline{position:sticky;top:0;z-index:22;display:grid;grid-template-columns:repeat(16,var(--pr-step-w));height:32px;border-bottom:1px solid #394652;background:#0d151c}
.pr-timeline>span{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;border-left:1px solid #1c2831;color:#6f7e87;font-size:5px;font-variant-numeric:tabular-nums}.pr-timeline>span.beat-start{border-left-color:#2f3d47}.pr-timeline>span.bar-start{border-left-color:#7b8a94}.pr-timeline b{position:absolute;top:3px;left:4px;color:#d2ac4d;font-size:6px}.pr-timeline small{font-size:5px}
.piano-keys{position:sticky;left:0;z-index:18;display:grid;grid-template-rows:repeat(25,var(--pr-row-h));height:var(--pr-canvas-h);border-right:1px solid #35424b;background:#0a0f13}
.piano-keys button{display:grid!important;grid-template-columns:1fr auto;align-items:center;min-height:0!important;height:var(--pr-row-h);padding:0 7px!important;border:0!important;border-bottom:1px solid #26323a!important;border-radius:0!important;background:#d7dde0!important;color:#0b1115!important;text-align:left}.piano-keys button.black{background:#1d252d!important;color:#d7dde0!important}.piano-keys button.out-scale{opacity:.56!important}.piano-keys button.in-scale{opacity:1!important}
.piano-keys button span{font-size:7px;font-weight:950;letter-spacing:.04em}.piano-keys button em{font-style:normal;font-size:6px;font-weight:900;color:#a37b19}.piano-keys button.black em{color:#d8b458}
.piano-grid{position:relative;width:var(--pr-canvas-w);height:var(--pr-canvas-h);min-width:var(--pr-canvas-w);min-height:var(--pr-canvas-h);overflow:hidden;touch-action:pan-x pan-y;background-color:var(--dbl-pr-canvas);background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--pr-step-w) - 1px),var(--dbl-pr-grid-minor) calc(var(--pr-step-w) - 1px),var(--dbl-pr-grid-minor) var(--pr-step-w)),repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--pr-step-w) * 4 - 1px),var(--dbl-pr-grid-major) calc(var(--pr-step-w) * 4 - 1px),var(--dbl-pr-grid-major) calc(var(--pr-step-w) * 4)),repeating-linear-gradient(0deg,transparent 0,transparent calc(var(--pr-row-h) - 1px),rgba(59,75,84,.42) calc(var(--pr-row-h) - 1px),rgba(59,75,84,.42) var(--pr-row-h))}
.pr-grid-shade{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) var(--pr-row-h),transparent var(--pr-row-h),transparent calc(var(--pr-row-h) * 2))}
.pr-note{position:absolute;z-index:8;top:calc(var(--pr-row) * var(--pr-row-h) + 3px);left:var(--pr-left);width:var(--pr-width);height:calc(var(--pr-row-h) - 6px);min-width:10px!important;min-height:0!important;padding:0 12px 0 7px!important;overflow:hidden;border:1px solid #f0c35a!important;border-radius:3px!important;background:linear-gradient(180deg,#e7b447,#b77f1e)!important;color:#11171b!important;box-shadow:inset 0 1px rgba(255,255,255,.34),0 1px 2px rgba(0,0,0,.48)!important;text-align:left;touch-action:none;will-change:transform;transition:filter 70ms linear,box-shadow 70ms linear}
.pr-note>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px;font-weight:950;letter-spacing:.025em;pointer-events:none}.pr-note>small{position:absolute;right:3px;top:3px;font-size:5px;pointer-events:none}.pr-note.chord-tone{background:linear-gradient(180deg,#b99543,#806025)!important;opacity:.88}.pr-note.selected{z-index:11;border-color:#63f6f3!important;box-shadow:inset 0 0 0 1px #22d3d1,0 0 0 1px rgba(34,211,209,.28)!important}.pr-note.muted{opacity:.42!important}.pr-note.off-grid:before{content:"";position:absolute;left:2px;top:2px;bottom:2px;width:2px;background:#22d3d1}.pr-note.drag-preview{opacity:.72;filter:brightness(1.12)}
.pr-note-resize{position:absolute;right:0;top:0;bottom:0;width:11px;border-left:1px solid rgba(0,0,0,.34);cursor:ew-resize;touch-action:none}
.pr-playhead{position:absolute;z-index:16;top:0;bottom:0;width:2px;background:var(--dbl-pr-playhead);box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none;transition:left 45ms linear}
.pr-lane-label{position:sticky;left:0;z-index:17;display:grid;align-content:center;padding:6px 7px;border-top:1px solid #2c363c;border-right:1px solid #2c363c;background:#0b1116}.pr-lane-label>b{font-size:6px;letter-spacing:.1em}.pr-lane-label>small{margin-top:4px;color:#81909a;font-size:6px}
.pr-velocity-lane{position:relative;width:var(--pr-canvas-w);height:92px;border-top:1px solid #2c363c;background-color:#0a1116;background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--pr-step-w) - 1px),#17232b calc(var(--pr-step-w) - 1px),#17232b var(--pr-step-w)),linear-gradient(0deg,transparent 49%,rgba(255,255,255,.045) 50%,transparent 51%)}
.pr-velocity-bar{position:absolute;left:var(--pr-vel-left);bottom:0;width:12px;min-width:12px!important;height:var(--pr-vel);min-height:8px!important;padding:0!important;border:1px solid #9e7d2f!important;border-bottom:0!important;border-radius:3px 3px 0 0!important;background:#b9892c!important;color:#101418!important;touch-action:none;transform:translateX(-6px)}.pr-velocity-bar.selected{background:#22d3d1!important;border-color:#7ffbf8!important}.pr-velocity-bar span{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:5px;color:#aeb8bd;pointer-events:none}
.note-actions{display:flex!important;gap:4px!important;overflow-x:auto;padding:5px 7px!important;border-top:1px solid #2c363c!important;background:#0d1419!important;scrollbar-width:none}.note-actions::-webkit-scrollbar{display:none}.note-actions button{flex:0 0 auto;min-width:72px;min-height:34px!important}
.piano-roll-edit{display:grid!important;grid-template-columns:minmax(180px,1.4fr) minmax(110px,.6fr) minmax(180px,1fr)!important;gap:7px!important;align-items:center;padding:7px!important;border-top:1px solid #2c363c!important;background:#0a0f13!important}.piano-roll-edit label{display:grid;grid-template-columns:1fr auto;gap:4px;color:#81909a;font-size:6px;letter-spacing:.07em}.piano-roll-edit label input,.piano-roll-edit label select{grid-column:1/-1;width:100%}.piano-roll-edit>span{padding:7px;border:1px solid #2c363c;border-radius:4px;color:#d7dde0;font-size:7px;letter-spacing:.055em;min-height:34px}
@media(max-width:760px){
 .piano-roll{--pr-pitch-w:68px;--pr-step-w:52px;--pr-row-h:29px;margin:4px 0 10px}
 .piano-roll-head{grid-template-columns:minmax(112px,1fr) minmax(0,1.7fr) 38px;min-height:44px;padding:5px 6px}.pr-head-state>span,.pr-head-state>button{min-height:28px}
 .pr-toolbar{padding:4px 5px}.pr-toolbar button,.pr-inline-control{min-height:40px}.pr-tool-group button{min-width:68px}
 .pr-composer-strip{display:flex;align-items:stretch;overflow-x:auto;padding:5px;scrollbar-width:none}.pr-composer-strip::-webkit-scrollbar{display:none}.pr-composer-strip>label,.pr-composer-strip>.scale-status,.pr-composer-strip>#prChordStamp,.pr-composer-strip>.degree-moves{flex:0 0 138px;min-height:52px}.pr-composer-strip>.scale-status{flex-basis:190px}.pr-composer-strip>.degree-moves{flex-basis:150px}.pr-default-velocity input{min-width:0}
 .pr-editor-scroll{max-height:500px}.pr-editor-grid{grid-template-rows:30px var(--pr-canvas-h) 86px}.pr-timeline{height:30px}
 .piano-keys button span{font-size:7px}.piano-keys button em{font-size:5px}
 .pr-note{min-width:12px!important;padding-left:5px!important}.pr-note>span{font-size:6px}
 .pr-velocity-lane{height:86px}
 .note-actions button{min-height:42px!important;min-width:82px}
 .piano-roll-edit{grid-template-columns:1fr 112px!important;position:sticky;bottom:0;z-index:26;padding-bottom:calc(7px + env(safe-area-inset-bottom))!important}.piano-roll-edit>span{grid-column:1/-1}
}
@media(orientation:landscape) and (max-height:520px) and (pointer:coarse){
 .pr-editor-scroll{max-height:330px}.piano-roll{--pr-row-h:26px}.pr-composer-strip{display:none}.piano-roll-edit{position:static!important}
}


/* v3.42 — Piano Roll navigation: true zoom, follow, additive select, compact mobile controls */
.pr-zoom-tools{display:flex;align-items:center;gap:2px;flex:0 0 auto;padding:2px;border:1px solid #2c363c;border-radius:4px;background:#0a1014}
.pr-zoom-tools button{min-width:34px!important;min-height:30px!important;padding:4px 7px!important}.pr-zoom-tools #prZoomFit{min-width:48px!important}
.pr-zoom-tools span{min-width:38px;text-align:center;color:#98a3a8;font-size:6px;font-weight:900;font-variant-numeric:tabular-nums}
#prFollow[aria-pressed="true"]{border-color:#22d3d1;color:#dffcff;box-shadow:inset 0 -2px #22d3d1;background:rgba(34,211,209,.08)}
#prSelectAll{min-width:48px}
.pr-note.selected:after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,255,255,.48);border-radius:2px;pointer-events:none}
@media(max-width:760px){
 .pr-toolbar{gap:4px}.pr-tool-group button{min-width:62px}.pr-zoom-tools button{min-width:38px!important;min-height:38px!important}.pr-zoom-tools #prZoomFit{min-width:52px!important}.pr-zoom-tools span{min-width:42px}
 #prFollow,#prSelectAll{min-height:40px}
 .pr-editor-scroll{scroll-snap-type:none}
}


/* v3.43 — Piano Roll marquee + grouped property editing */
.piano-grid.select-mode{touch-action:none;cursor:crosshair}
.pr-marquee{position:absolute;z-index:20;border:1px solid #63f6f3;background:rgba(34,211,209,.12);box-shadow:0 0 0 1px rgba(34,211,209,.14) inset;pointer-events:none}
@media(max-width:760px){
 .piano-grid.select-mode{touch-action:none}
 .pr-marquee{border-width:2px;background:rgba(34,211,209,.16)}
}


/* v3.44 — Piano Roll musical context: scale snap + other-lane ghost notes */
.pr-composer-toggle{min-height:32px;align-self:stretch;border-color:#2c363c!important;color:#98a3a8!important;background:#0a1014!important}
.pr-composer-toggle.active,.pr-composer-toggle[aria-pressed="true"]{border-color:#22d3d1!important;color:#dffcff!important;box-shadow:inset 0 -2px #22d3d1;background:rgba(34,211,209,.08)!important}
.pr-ghost-note{position:absolute;z-index:3;top:calc(var(--pr-row) * var(--pr-row-h) + 7px);left:var(--pr-left);width:var(--pr-width);height:calc(var(--pr-row-h) - 14px);min-width:5px;border:1px solid rgba(125,151,163,.32);border-radius:2px;background:rgba(94,121,133,.18);pointer-events:none}
.pr-ghost-note i{position:absolute;right:2px;top:0;font-style:normal;font-size:5px;line-height:1;color:rgba(176,194,201,.45)}
.piano-grid.ghost-mode .pr-grid-shade{opacity:.86}
@media(max-width:760px){
 .pr-composer-strip>.pr-composer-toggle{flex:0 0 112px;min-height:52px}
 .pr-ghost-note{top:calc(var(--pr-row) * var(--pr-row-h) + 8px);height:calc(var(--pr-row-h) - 16px)}
 .pr-ghost-note i{display:none}
}


/* v3.45 — DBL degree-first Piano Roll language */
#prDegreeView{min-width:78px}
.pr-note>small{position:absolute;right:3px;top:3px;max-width:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:5px;font-weight:900;opacity:.78;pointer-events:none}
.piano-keys button span{font-size:8px!important;font-weight:1000!important}.piano-keys button em{max-width:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){
 #prDegreeView{flex-basis:112px}
 .pr-note>small{display:block!important;font-size:5px}
}


/* v3.46 — Piano Roll scale fold: compact mobile harmonic editing without losing event truth */
#prFoldScale{min-width:82px}
#prFoldScale[aria-pressed="true"]{border-color:#d7bb5a!important;color:#fff5cc!important;box-shadow:inset 0 -2px #d7bb5a;background:rgba(215,187,90,.08)!important}
@media(max-width:760px){#prFoldScale{flex-basis:112px}}


/* v3.47 — Piano Roll velocity accent: cool chrome/cyan, deliberately distinct from DBL amber */
#prDefaultVelocity{
 accent-color:#4fdcff!important;
}
#prDefaultVelocity::-webkit-slider-runnable-track{
 border-color:#27434c!important;
 background:linear-gradient(180deg,#071014,#101a1f)!important;
 box-shadow:inset 0 1px 2px #000,0 1px rgba(125,232,255,.04)!important;
}
#prDefaultVelocity::-webkit-slider-thumb{
 -webkit-appearance:none!important;appearance:none!important;
 border:1px solid #82ebff!important;
 background:
  linear-gradient(90deg,transparent 0 41%,rgba(5,48,61,.92) 41% 59%,transparent 59%),
  linear-gradient(180deg,#d7fbff 0%,#58d9f6 36%,#1b9abb 66%,#0b4254 100%)!important;
 box-shadow:
  inset 0 1px rgba(255,255,255,.72),
  inset 0 -2px rgba(3,38,50,.52),
  0 0 0 1px rgba(61,202,233,.16),
  0 2px 5px #000!important;
}
#prDefaultVelocity:focus-visible::-webkit-slider-thumb{
 box-shadow:
  inset 0 1px rgba(255,255,255,.75),
  0 0 0 2px rgba(79,220,255,.24),
  0 0 10px rgba(79,220,255,.24),
  0 2px 5px #000!important;
}
#prDefaultVelocity::-moz-range-track{
 border-color:#27434c!important;
 background:#0c151a!important;
}
#prDefaultVelocity::-moz-range-progress{
 background:#2bbbdc!important;
}
#prDefaultVelocity::-moz-range-thumb{
 border:1px solid #82ebff!important;
 background:linear-gradient(180deg,#d7fbff 0%,#58d9f6 38%,#168aa8 72%,#0b4254 100%)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.68),0 2px 5px #000!important;
}


/* v3.48 — unified DBL slider family: cool chrome/cyan instead of amber/gold */
input[type=range]{
 accent-color:#4fdcff!important;
}
input[type=range]::-webkit-slider-runnable-track{
 border-color:#28414a!important;
 background:linear-gradient(180deg,#071014 0%,#0d171c 48%,#121b20 100%)!important;
 box-shadow:inset 0 1px 2px #000,0 1px rgba(122,232,255,.035)!important;
}
input[type=range]::-webkit-slider-thumb{
 border-color:#7feaff!important;
 background:
  linear-gradient(90deg,transparent 0 41%,rgba(6,49,62,.9) 41% 59%,transparent 59%),
  linear-gradient(180deg,#e4fcff 0%,#6ee3fa 34%,#249fbd 67%,#0a4355 100%)!important;
 box-shadow:
  inset 0 1px rgba(255,255,255,.76),
  inset 0 -2px rgba(2,36,48,.5),
  0 0 0 1px rgba(79,220,255,.12),
  0 2px 5px #000!important;
}
input[type=range]:focus-visible::-webkit-slider-thumb{
 box-shadow:
  inset 0 1px rgba(255,255,255,.78),
  0 0 0 2px rgba(79,220,255,.24),
  0 0 10px rgba(79,220,255,.2),
  0 2px 5px #000!important;
}
input[type=range]::-moz-range-track{
 border-color:#28414a!important;
 background:#0d171c!important;
 box-shadow:inset 0 1px 2px #000!important;
}
input[type=range]::-moz-range-progress{
 background:#2ebbdc!important;
}
input[type=range]::-moz-range-thumb{
 border-color:#7feaff!important;
 background:linear-gradient(180deg,#e4fcff 0%,#6ee3fa 36%,#2098b7 70%,#0a4355 100%)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.72),0 2px 5px #000!important;
}
/* Preserve each control's existing geometry while changing only the slider color language. */
.strip-pan input[type=range]::-webkit-slider-thumb,
.strip-pan input[type=range]::-moz-range-thumb{
 border-color:#7feaff!important;
 background:radial-gradient(circle at 38% 32%,#e8fdff 0%,#71e4fa 32%,#268fab 62%,#082f3c 100%)!important;
}
.master-strip input[type=range]::-webkit-slider-thumb,
.master-strip input[type=range]::-moz-range-thumb{
 border-color:#a9f2ff!important;
 background:
  linear-gradient(90deg,transparent 0 41%,rgba(5,50,65,.92) 41% 59%,transparent 59%),
  linear-gradient(180deg,#f2feff 0%,#8cecff 34%,#31b7d6 65%,#0b4b5d 100%)!important;
}

/* v3.49 — DBL Factory Sound Library */
#openSoundLibrary.sample-load-primary{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid #4fdcff;border-radius:4px;background:linear-gradient(180deg,#13242b,#0a1419);color:#dffbff;font-weight:950;letter-spacing:.08em}.sound-browser{scroll-margin-top:74px}.sound-browser-nav{display:flex;flex-direction:column;gap:3px}.sound-browser-nav button{min-height:38px;text-align:left}.sound-browser-tools{display:grid;grid-template-columns:minmax(180px,1fr) minmax(120px,180px) auto;gap:6px;align-items:center}.sound-category-chips{display:flex;gap:4px;padding:6px 0;overflow-x:auto;scrollbar-width:none}.sound-category-chips button{flex:0 0 auto;min-height:32px;padding:5px 9px;border:1px solid #2e3b42;background:#0b1115;color:#85949b;font-size:6px;font-weight:950}.sound-category-chips button.active{border-color:#4fdcff;color:#dffbff;box-shadow:inset 0 -2px #4fdcff}.sound-browser-row{display:grid!important;grid-template-columns:minmax(0,1fr) 38px 44px 62px;gap:4px;align-items:stretch}.sound-browser-name{min-width:0;text-align:left;padding:8px 10px!important}.sound-browser-name>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;font-weight:950}.sound-browser-name>small{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#73838a;font-size:5px}.sound-favorite{font-size:18px!important;color:#68767d}.sound-favorite.active{color:#e1be54;border-color:#8e7636}.sound-preview{color:#78e9ff!important;border-color:#315c67!important}.sound-load{color:#dffbff!important;border-color:#34717f!important;background:linear-gradient(180deg,#13252b,#0b161b)!important}.sound-pack-row{display:grid!important;grid-template-columns:minmax(0,1fr) 92px;gap:6px}@media(max-width:760px){.sound-browser-shell{display:block!important}.sound-browser-nav{position:sticky;top:0;z-index:6;display:flex!important;flex-direction:row;gap:3px;padding:5px;overflow-x:auto;background:#0a0f13}.sound-browser-nav button{flex:0 0 auto;min-height:42px;padding:6px 11px}.sound-browser-tools{grid-template-columns:minmax(0,1fr) 118px;gap:5px;padding:6px}.sound-browser-tools #soundBrowserTarget{grid-column:1/-1}.sound-category-chips{padding:5px 6px}.sound-category-chips button{min-height:38px}.sound-browser-row{grid-template-columns:minmax(0,1fr) 42px 46px 66px}.sound-browser-name,.sound-favorite,.sound-preview,.sound-load{min-height:48px!important}}


/* v3.50 — semantic DBL library controls: content type and truthful load actions */
#soundContentType{min-height:38px;min-width:138px;border-color:#3a5962;background:#0a1216;color:#e2fbff;font-weight:950;letter-spacing:.055em}
.sound-load[data-load-kind="one-shot"]{border-color:#4a7782!important}
.sound-load[data-load-kind="instrument"]{border-color:#645e91!important;color:#eeeaff!important;background:linear-gradient(180deg,#1a1830,#10101d)!important}
.sound-load[data-load-kind="sample"]{border-color:#487061!important;color:#ddfff2!important;background:linear-gradient(180deg,#14251f,#0c1714)!important}
.browser-bank-row{grid-template-columns:minmax(0,1fr) 84px!important}.browser-bank-row .sound-load:disabled{opacity:.5;color:#839198!important}
@media(max-width:760px){
 .sound-browser-tools{grid-template-columns:minmax(126px,.72fr) minmax(0,1fr)!important}
 #soundContentType{width:100%;min-height:44px}.sound-browser-tools #soundPackFilter{width:100%}.sound-browser-tools #soundBrowserTarget{grid-column:1/-1}
 .sound-browser-row{grid-template-columns:minmax(0,1fr) 42px 46px minmax(92px,118px)!important}
 .browser-bank-row{grid-template-columns:minmax(0,1fr) 96px!important}
 .sound-load{white-space:normal;line-height:1.15;padding:5px 6px!important}
}

/* DBL DRUM WORKFLOW — extends existing project/Poly architecture */
.drum-workflow-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:10px 12px;border:1px solid var(--line,#323943);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.08))}
.drum-workflow-bar>div:first-child{display:grid;gap:3px;min-width:0}.drum-workflow-bar strong{font-size:11px;letter-spacing:.12em}.drum-workflow-bar small{font-size:9px;letter-spacing:.05em;opacity:.72}
.drum-workflow-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.drum-workflow-actions button{min-height:38px;padding:7px 10px;white-space:nowrap}.drum-workflow-actions button:disabled{opacity:.5;cursor:not-allowed}
.poly-cell.out-of-bar{opacity:.2!important;filter:saturate(.35);cursor:not-allowed!important}.poly-cell.out-of-bar.on{opacity:.3!important}
@media (pointer:coarse){.drum-workflow-actions button{min-height:44px}.drum-workflow-bar select{min-height:44px}}
@media (max-width:720px){.drum-workflow-bar{align-items:stretch;flex-direction:column}.drum-workflow-actions{display:grid;grid-template-columns:1fr 1fr}.drum-workflow-actions button{width:100%}}
@media (max-width:430px){.drum-workflow-actions{grid-template-columns:1fr}}

/* DBL DRUM WORKFLOW EXTENSION — lane properties, loop handles, track FX */
.lane-properties-status{margin-left:auto;color:#91a2ae;font-size:7px;font-weight:850;letter-spacing:.08em}
.fx-head-actions{display:flex;align-items:center;gap:6px}.fx-head-actions #fxAdd{min-height:32px;padding:0 10px;font-size:7px;font-weight:900}.fx-preset{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:7px 0;padding:7px 8px;border:1px solid #303943;border-radius:5px;background:#0d1115;font-size:6px;font-weight:900;letter-spacing:.08em}.fx-preset select{min-height:34px;min-width:120px}
.arrange-clip.selected .clip-resize-handle.right:after{opacity:1}.clip-resize-handle.right.loop-extend-handle{border-left:1px solid rgba(255,255,255,.28)}.clip-step-preview i.loop-start{border-left:1px solid rgba(255,255,255,.72)}
@media (pointer:coarse){.arrange-clip .clip-resize-handle{pointer-events:auto!important}.clip-resize-handle.right{width:26px}.arrange-clip .clip-resize-handle.right:after{opacity:.9;right:6px;height:22px;margin-top:-11px}.fx-head-actions #fxAdd{min-height:44px}.fx-preset select{min-height:44px}}
@media(max-width:720px){.lane-properties-status{width:100%;margin:3px 0 0}.fx-preset{align-items:stretch;flex-direction:column}.fx-preset select{width:100%}}

/* DBL INSTRUMENT + PIANO PERFORMANCE WORKFLOW */
.mixer-channel-id #mixerAddInstrument{margin-top:7px;min-height:34px}
.mixer-instrument-controls{grid-column:1/-1;margin-top:9px;padding:10px;border:1px solid #303842;border-radius:7px;background:#0c1014}
.mixer-instrument-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.mixer-instrument-head>div:first-child{display:grid;gap:2px}.mixer-instrument-head small{font-size:7px;letter-spacing:.1em;opacity:.66}.mixer-instrument-head b{font-size:11px}.mixer-instrument-head>div:last-child{display:flex;gap:6px}
.mixer-instrument-grid{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:8px}.mixer-instrument-grid label{display:grid;gap:4px;font-size:7px;font-weight:850;letter-spacing:.06em}.mixer-instrument-grid label span{font-variant-numeric:tabular-nums;opacity:.75}
.preset-grid .preset-empty{grid-column:1/-1;padding:14px;text-align:center;font-size:8px;letter-spacing:.08em;opacity:.55}.preset-grid button b{display:block}.preset-grid button small{display:block;margin-top:2px;opacity:.62}
.piano-grid.pan-mode{cursor:grab;touch-action:none}.piano-grid.pan-mode:active{cursor:grabbing}.piano-keys button.active{outline:1px solid rgba(210,236,246,.9);transform:translateX(1px)}
.pr-note-resize{width:10px!important}.pr-note.selected{outline-width:2px}
@media(pointer:coarse){#prPanMode,.mixer-instrument-head button,#mixerAddInstrument{min-height:44px}.pr-note-resize{width:18px!important}.piano-keys button{touch-action:none}}
@media(max-width:760px){.mixer-instrument-grid{grid-template-columns:1fr 1fr}.mixer-instrument-head{align-items:stretch;flex-direction:column}.mixer-instrument-head>div:last-child{display:grid;grid-template-columns:1fr 1fr}.preset-categories{overflow-x:auto;scrollbar-width:none}}
@media(max-width:430px){.mixer-instrument-grid{grid-template-columns:1fr}}

/* v3.47 — parameter-linked automation editor */
.automation-add-button{min-width:38px!important;height:22px!important;min-height:22px!important;margin-left:5px!important;padding:0 6px!important;border:1px solid #31505a!important;border-radius:3px!important;background:#10171b!important;color:#77eaff!important;font-size:5px!important;font-weight:900!important;letter-spacing:.06em!important}
.automation-add-button:hover,.automation-add-button:focus-visible{border-color:#5cecff!important;color:#c8fbff!important;box-shadow:0 0 8px #00e5ff2e!important}
.automation-lane-row.selected{box-shadow:inset 2px 0 #00e5ff}
.automation-lane-head{grid-template-columns:minmax(0,1fr) auto auto auto!important}
.automation-lane-head b{grid-column:1;grid-row:1}
.automation-lane-head small{grid-column:1;grid-row:2}
.automation-lane-head button{grid-column:auto!important;grid-row:1/3!important;min-width:52px;padding:0 5px}
.automation-lane-stage{min-width:0;overflow-x:auto;overscroll-behavior-inline:contain}
.automation-ruler{position:relative;height:16px;min-width:100%;border-bottom:1px solid #242a31;background:#0d1014;color:#67717f;font-size:5px;overflow:hidden}
.automation-ruler span{position:absolute;top:4px;transform:translateX(2px);white-space:nowrap}
.automation-lane-graph{height:76px;min-height:76px;touch-action:none;background:linear-gradient(180deg,rgba(0,229,255,.025),transparent),repeating-linear-gradient(90deg,transparent 0,transparent calc(6.25% - 1px),#202630 6.25%)!important}
.automation-curve{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.automation-curve polyline{fill:none;stroke:#00e5ff;stroke-width:1.2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #00e5ff55)}
.automation-point{border:0;padding:0}
.automation-point.selected{width:10px;height:10px;background:#f4fbff!important;box-shadow:0 0 0 2px #00e5ff,0 0 12px #00e5ffaa!important}
@media(max-width:760px){.automation-lane-head{grid-template-columns:minmax(80px,1fr) repeat(3,44px)!important}.automation-lane-head button{min-width:42px;font-size:4.5px}.automation-lane-graph{height:88px;min-height:88px}.automation-add-button{min-width:34px!important;padding:0 4px!important}}

/* Chord / ARP composer — chrome mono, accessible focus and touch targets */
#prArpStamp{border:1px solid #3d8290;background:linear-gradient(180deg,#19333a,#101c23);color:#dffaff;font-weight:700;letter-spacing:.06em;min-height:34px;border-radius:7px}
#prArpStamp:hover{border-color:#79e7ef;background:#20434c}
#prArpStamp:focus-visible,#prArpMode:focus-visible,#prArpSteps:focus-visible{outline:2px solid #82edf5;outline-offset:2px}
#prArpMode,#prArpSteps{min-height:34px;border-radius:6px}
@media(max-width:760px){#prArpStamp{min-height:42px;padding:0 12px}#prArpMode,#prArpSteps{min-height:42px}}

/* Accessible startup failure feedback, without injecting error text as markup. */
.dbl-boot-error{grid-column:1/-1;padding:16px;border:1px solid #8d4f47;border-radius:8px;background:#261b1d;color:#f4c2bb;font:700 11px/1.5 ui-monospace,monospace;overflow-wrap:anywhere}

/* DBL mobile producer density pass: keep functionality, reduce chrome overhead. */
@media(max-width:760px){
 #studio header{position:relative!important;min-height:0!important;padding:6px 8px!important}
 #studio header>div:first-child{min-width:0}
 #studio header>div:first-child span{display:none}
 #studio header .transport{display:flex!important;flex-wrap:wrap!important;gap:5px!important;align-items:center!important;overflow:visible!important}
 #studio header .transport>button,#studio header .transport .record-cluster>button{min-height:40px!important;min-width:44px!important;padding:6px 9px!important;font-size:10px!important}
 #studio header .transport #play,#studio header .transport #stop{min-width:62px!important;font-size:11px!important}
 #finishRibbon{display:none!important}
 .sampler-command{padding:7px 10px!important;min-height:0!important;gap:8px!important}
 .sampler-command small{display:none!important}
 .sampler-command strong{font-size:12px!important}
 .bank-strip button{min-height:40px!important;min-width:40px!important}
 .drum-workflow-bar{padding:8px 10px!important;gap:6px!important}
 .drum-workflow-bar>div:first-child{display:none!important}
 .drum-workflow-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;width:100%!important}
 .drum-workflow-actions button{min-height:42px!important;padding:7px!important;font-size:10px!important}
 .section-title{margin:5px 0!important;padding:5px 8px!important;min-height:0!important}
 .section-title small{display:none!important}
 .pads{gap:4px!important;padding:5px!important}
 .pads .pad{min-height:68px!important;aspect-ratio:auto!important;padding:5px!important}
 .pads .pad b,.pads .pad strong{font-size:12px!important}
 .sampler-stage{gap:6px!important}
 .pad-actions{gap:5px!important;padding:8px!important}
 .pad-actions button{min-height:40px!important;font-size:10px!important}
 .sample-load-zone{margin-top:7px!important;padding:7px!important;gap:6px!important}
 .sample-load-copy{display:none!important}
 .sample-load-primary{min-height:44px!important}
 .sound-browser .import-browser-head{padding:9px!important}
 .sound-browser .import-browser-head small{display:none!important}
 .sound-browser button:focus-visible,.pads button:focus-visible{outline:2px solid #83e9f2!important;outline-offset:2px}
}

/* Mobile workflow hierarchy: primary instruments first, secondary tools scroll. */
@media(max-width:760px){
 .producer-nav{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x proximity;gap:5px!important;padding:5px!important;scrollbar-width:none}
 .producer-nav::-webkit-scrollbar{display:none}
 .producer-nav .workspace-tab{flex:0 0 auto!important;min-width:92px!important;min-height:42px!important;padding:8px 10px!important;scroll-snap-align:start;font-size:10px!important;letter-spacing:.02em}
 .producer-nav .workspace-tab.active{box-shadow:inset 0 -3px 0 #52dbe7!important}
 .sound-browser .import-browser-tabs{overflow-x:auto!important;display:flex!important;flex-wrap:nowrap!important;gap:4px!important;scrollbar-width:none}
 .sound-browser .import-browser-tabs button{flex:0 0 auto!important;min-height:40px!important;white-space:nowrap}
 .sample-load-zone #sampleStatus{font-size:10px!important;line-height:1.4!important;overflow-wrap:anywhere}
 #studio .center{min-width:0!important}
 #studio .field{min-width:0!important}
 .sampler-command,.drum-workflow-bar,.sampler-stage,.sound-browser{max-width:100%!important;min-width:0!important}
}

/* Selected-pad controls: compact two-row tool deck on phones. */
@media(max-width:760px){
 .pad-actions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch!important;gap:5px!important}
 .pad-actions button{min-width:0!important;width:100%!important;min-height:42px!important;padding:6px 3px!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere}
 #padLoadAction,#padChopAction,#padDuplicateAction,#padClearAction{font-size:10px!important;font-weight:750!important}
 #padSoundAction{grid-column:span 2!important}
 .pad-actions button:disabled{opacity:.38!important;cursor:not-allowed!important;filter:grayscale(.8)!important}
 .pad-actions button:focus-visible{outline:2px solid #80e8f2!important;outline-offset:1px}
}

/* Actual sound library source rail + category chips (matching live DOM). */
@media(max-width:760px){
 #soundLibrary .sound-browser-shell{display:block!important;min-width:0!important}
 #soundLibrary .sound-browser-nav{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:5px!important;padding:6px!important;width:100%!important;max-width:100%!important;scrollbar-width:none}
 #soundLibrary .sound-browser-nav::-webkit-scrollbar{display:none}
 #soundLibrary .sound-browser-nav button{flex:0 0 auto!important;width:auto!important;min-width:74px!important;min-height:42px!important;padding:7px 10px!important;font-size:10px!important}
 #soundLibrary .sound-browser-main{min-width:0!important;width:100%!important;padding:7px!important}
 #soundLibrary .sound-browser-tools{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;gap:6px!important}
 #soundLibrary .sound-browser-tools select,#soundLibrary .sound-browser-tools input{width:100%!important;min-width:0!important;min-height:42px!important}
 #soundLibrary #soundPackFilter,#soundLibrary #soundBrowserTarget{grid-column:1/-1!important}
 #soundLibrary .sound-category-chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:5px!important;padding:5px 0!important;scrollbar-width:none}
 #soundLibrary .sound-category-chips button{flex:0 0 auto!important;min-height:38px!important;padding:6px 10px!important}
}

/* Screenshot fix: dock sound loading into one full-width toolbar. */
@media(max-width:760px){
 #sampleLoadZone.sample-load-zone{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:stretch!important;gap:8px!important;width:100%!important;max-width:100%!important;min-height:48px!important;margin:0!important;padding:5px 8px!important;box-sizing:border-box!important;border-radius:5px!important}
 #sampleLoadZone #openSoundLibrary{flex:0 0 auto!important;width:auto!important;min-width:115px!important;min-height:40px!important;margin:0!important;padding:8px 10px!important;white-space:nowrap!important;font-size:11px!important}
 #sampleLoadZone #sampleStatus{flex:1 1 0!important;display:block!important;width:auto!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;text-align:left!important;font-size:10px!important;line-height:1.3!important;overflow-wrap:anywhere}
 #sampleLoadZone .sample-load-copy{display:none!important}
}

/* DBL module hierarchy: isolated studio workstations, not a continuous control sheet. */
:root{--dbl-module-stroke:#586472;--dbl-module-head:#1b232d;--dbl-module-surface:#10161d}
#soundLibrary,#waveWrap,#arrangePanel,#polyPanel,#pianoRoll,#mixerPanel{
 position:relative;isolation:isolate;box-sizing:border-box;
 margin-block:18px 22px!important;border:1px solid var(--dbl-module-stroke)!important;
 border-radius:12px!important;background:var(--dbl-module-surface)!important;
 box-shadow:0 10px 26px #0007,inset 0 1px #ffffff13!important;
 overflow:visible;
}
#soundLibrary::before,#waveWrap::before,#arrangePanel::before,#polyPanel::before,#pianoRoll::before,#mixerPanel::before{
 display:block;box-sizing:border-box;min-height:36px;padding:10px 56px 9px 15px;
 background:var(--dbl-module-head);border-bottom:1px solid #394653;
 border-radius:11px 11px 0 0;color:#e7edf2;font-size:11px;
 font-weight:800;letter-spacing:.14em;line-height:1.4;
}
#soundLibrary::before{content:"01  /  SOUND LIBRARY · BROWSE & ASSIGN"}
#waveWrap::before{content:"02  /  SAMPLE EDITOR · CHOP & SHAPE"}
#polyPanel::before{content:"03  /  POLY · STEP SEQUENCER"}
#pianoRoll::before{content:"04  /  PIANO ROLL · NOTES & VELOCITY"}
#arrangePanel::before{content:"05  /  ARRANGER · SONG STRUCTURE"}
#mixerPanel::before{content:"06  /  MIXER · LEVELS & ROUTING"}
#soundLibrary>.dbl-module-menu,#polyPanel>.dbl-module-menu,#pianoRoll>.dbl-module-menu,#arrangePanel>.dbl-module-menu,#mixerPanel>.dbl-module-menu{
 position:absolute;right:10px;top:3px;z-index:12;
}
#soundLibrary>.dbl-module-menu summary,#polyPanel>.dbl-module-menu summary,#pianoRoll>.dbl-module-menu summary,#arrangePanel>.dbl-module-menu summary,#mixerPanel>.dbl-module-menu summary{
 min-width:40px;min-height:30px;display:grid;place-items:center;
 border-radius:7px;border:1px solid #586675;background:#283440;color:#f3f6f8;
}
#soundLibrary>.dbl-module-menu[open],#polyPanel>.dbl-module-menu[open],#pianoRoll>.dbl-module-menu[open],#arrangePanel>.dbl-module-menu[open],#mixerPanel>.dbl-module-menu[open]{z-index:30}
#soundLibrary>.dbl-module-menu .dbl-module-menu-items,#polyPanel>.dbl-module-menu .dbl-module-menu-items,#pianoRoll>.dbl-module-menu .dbl-module-menu-items,#arrangePanel>.dbl-module-menu .dbl-module-menu-items,#mixerPanel>.dbl-module-menu .dbl-module-menu-items{
 position:absolute;right:0;top:34px;min-width:180px;z-index:30;
 border:1px solid #687482;border-radius:9px;padding:7px;
 background:#1a232d;box-shadow:0 12px 32px #000c;
}
#soundLibrary>.dbl-module-menu .dbl-module-menu-items button,#polyPanel>.dbl-module-menu .dbl-module-menu-items button,#pianoRoll>.dbl-module-menu .dbl-module-menu-items button,#arrangePanel>.dbl-module-menu .dbl-module-menu-items button,#mixerPanel>.dbl-module-menu .dbl-module-menu-items button{
 display:block;width:100%;min-height:40px;text-align:left;margin:2px 0;
}
#soundLibrary>.import-browser-head,#waveWrap>.sample-edit-head{border-top:0}
#soundLibrary :is(button,input,select):focus-visible,#waveWrap :is(button,input,select):focus-visible,#polyPanel :is(button,input,select):focus-visible,#pianoRoll :is(button,input,select):focus-visible,#arrangePanel :is(button,input,select):focus-visible,#mixerPanel :is(button,input,select):focus-visible{outline:2px solid #c5d5e3;outline-offset:2px}
@media(max-width:760px){
 #soundLibrary,#waveWrap,#arrangePanel,#polyPanel,#pianoRoll,#mixerPanel{margin-block:14px 18px!important;border-radius:10px!important}
 #soundLibrary::before,#waveWrap::before,#arrangePanel::before,#polyPanel::before,#pianoRoll::before,#mixerPanel::before{min-height:40px;padding:12px 49px 10px 11px;font-size:10px;letter-spacing:.06em}
 #soundLibrary>.dbl-module-menu,#polyPanel>.dbl-module-menu,#pianoRoll>.dbl-module-menu,#arrangePanel>.dbl-module-menu,#mixerPanel>.dbl-module-menu{right:6px;top:4px}
}

/* Dedicated sound import action */
#sampleLoadZone .sample-import-quick{appearance:none;min-height:44px;padding:9px 13px;border:1px solid #69727e;border-radius:8px;background:#252b34;color:#f2f5f8;font:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
#sampleLoadZone .sample-import-quick:hover,#sampleLoadZone .sample-import-quick:focus-visible{border-color:#c7d2dc;background:#303945;outline-offset:2px}
#sampleLoadZone #sampleStatus[role="status"]{min-width:0;overflow-wrap:anywhere}
@media(max-width:720px){#sampleLoadZone .sample-import-quick{min-height:44px;flex:0 0 auto;padding:8px 10px;font-size:10px}#sampleLoadZone .sample-load-primary{min-height:44px}}

/* Sampler workstation: clear task hierarchy without changing audio controls. */
#waveWrap.sample-chop-console .wave-stage{margin:12px 12px 0;border:1px solid #465462;border-radius:9px;background:#090e13;overflow:hidden}
#waveWrap.sample-chop-console .wave-tools.precision-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:10px 12px;padding:12px;border:1px solid #465260;border-radius:9px;background:#18212b}
#waveWrap .wave-tools .zoom-cluster,#waveWrap .wave-tools .trim-lcd,#waveWrap .wave-tools .audition-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
#waveWrap .wave-tools .zoom-cluster::before,#waveWrap .wave-tools .trim-lcd::before,#waveWrap .wave-tools .audition-cluster::before{display:block;flex:0 0 100%;color:#b6c6d5;font-size:10px;font-weight:800;letter-spacing:.13em}
#waveWrap .wave-tools .zoom-cluster::before{content:"01 / WAVEFORM VIEW"}
#waveWrap .wave-tools .trim-lcd::before{content:"02 / TRIM BOUNDARIES"}
#waveWrap .wave-tools .audition-cluster::before{content:"03 / AUDITION"}
#waveWrap .wave-tools .zoom-cluster button,#waveWrap .wave-tools .trim-lcd button,#waveWrap .wave-tools .audition-cluster button{min-height:40px}
#waveWrap .slice-focus-bar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:10px 12px;padding:11px;border:1px solid #465260;border-radius:9px;background:#151d26}
#waveWrap .slice-focus-bar::before{content:"04 / SELECT & FINE-TUNE SLICE";display:block;flex:0 0 100%;font-size:10px;font-weight:800;letter-spacing:.12em;color:#b6c6d5}
#waveWrap .hardware-chop-strip{margin:10px 12px 14px;padding:12px;border:1px solid #56616c;border-radius:9px;background:#19232d}
#waveWrap .hardware-chop-strip::before{content:"05 / CHOP & COMMIT";display:block;margin-bottom:9px;font-size:10px;font-weight:800;letter-spacing:.12em;color:#c7d6e2}
#waveWrap .hardware-chop-strip button{min-height:40px}
#waveWrap #sliceCommitPanel{margin:12px;border:1px solid #738294;border-radius:10px;box-shadow:0 12px 30px #0008}
@media(min-width:1050px){#waveWrap .wave-tools.precision-toolbar{grid-template-columns:1fr 1.4fr 1fr;align-items:start}}
@media(max-width:760px){#waveWrap.sample-chop-console .wave-stage{margin:8px 8px 0}#waveWrap.sample-chop-console .wave-tools.precision-toolbar,#waveWrap .slice-focus-bar,#waveWrap .hardware-chop-strip{margin:8px;padding:10px}#waveWrap .wave-tools button,#waveWrap .slice-focus-bar button,#waveWrap .hardware-chop-strip button{min-height:44px}#waveWrap .wave-tools .trim-lcd{gap:8px}#waveWrap .wave-tools .trim-lcd label{min-width:0}}

/* Dedicated 16-pad performance surface: playing left, editing right. */
.sampler-stage{position:relative;isolation:isolate;padding:12px;border:1px solid #546372;border-radius:12px;background:linear-gradient(145deg,#202a34,#0b1118);box-shadow:0 12px 30px #0008,inset 0 1px #ffffff14}
.sampler-stage::before{content:"PERFORM / 16 VELOCITY-READY PADS";grid-column:1/-1;display:block;color:#d5e1ec;font-size:10px;font-weight:800;letter-spacing:.12em;padding:2px 4px 7px;border-bottom:1px solid #3e4d5c}
.sampler-stage .pads{align-self:start;min-width:0}
.sampler-stage .pad{border:1px solid #536170;border-radius:9px;transition:border-color .12s,box-shadow .12s,background .12s}
.sampler-stage .pad.selected{outline:2px solid #c7d9e8!important;outline-offset:-3px;box-shadow:inset 0 0 0 1px #101820,0 0 0 2px #68829a!important}
.sampler-stage .pad:focus-visible{outline:2px solid #f2f7fa;outline-offset:2px}
.sampler-stage .pad.hit,.sampler-stage .pad:active{border-color:#dce9f1}
.sampler-stage .pad-actions{align-self:stretch;display:flex;flex-direction:column;gap:7px;padding:10px;border:1px solid #455363;border-radius:9px;background:#121b24}
.sampler-stage .pad-actions::before{content:"SELECTED PAD / ACTIONS";font-size:9px;font-weight:800;letter-spacing:.1em;line-height:1.4;color:#c4d3df;border-bottom:1px solid #3d4b58;padding-bottom:8px}
.sampler-stage .pad-actions button{flex:0 0 auto;min-height:38px;padding:8px 5px;border:1px solid #53616d;border-radius:7px;background:#26313c;color:#edf2f5;font-size:9px;line-height:1.3;overflow-wrap:anywhere}
.sampler-stage .pad-actions #padLoadAction,.sampler-stage .pad-actions #padChopAction,.sampler-stage .pad-actions #padSoundAction{background:#334354;border-color:#748da1}
.sampler-stage .pad-actions button:focus-visible{outline:2px solid #e3edf5;outline-offset:2px}
@media(max-width:760px){.sampler-stage{padding:8px;gap:8px!important;grid-template-columns:minmax(0,1fr) minmax(86px,24%)!important}.sampler-stage::before{font-size:9px;letter-spacing:.06em}.sampler-stage .pad-actions{padding:6px!important;gap:5px!important}.sampler-stage .pad-actions button{min-height:44px!important;padding:7px 3px;font-size:9px!important}.sampler-stage .pads{gap:5px!important}.sampler-stage .pad{min-height:62px!important}}

/* Selected pad context belongs to its action rail, not the global status bar. */
.sampler-stage .pad-selection-context{display:block;min-width:0;padding:10px 8px;border:1px solid #708398;border-radius:7px;background:#202e3a;color:#edf5fa;font-size:10px;font-weight:800;line-height:1.5;letter-spacing:.035em;overflow-wrap:anywhere;box-shadow:inset 0 1px 0 #ffffff12}
.sampler-stage .pad-selection-context:empty{display:none}
@media(max-width:760px){.sampler-stage .pad-selection-context{padding:8px 5px;font-size:9px;line-height:1.4}}

/* Studio UI finish: quiet surfaces, explicit hierarchy, easy-to-scan navigation. */
.producer-nav{gap:5px!important;padding:7px!important;border:1px solid #465360!important;border-radius:10px!important;background:#121a22!important}
.producer-nav .workspace-tab{min-height:42px!important;border:1px solid transparent!important;border-radius:7px!important;letter-spacing:.055em!important;transition:background .14s,border-color .14s,color .14s}
.producer-nav .workspace-tab:hover{background:#26333e!important;border-color:#536679!important}
.producer-nav .workspace-tab.active,.producer-nav .workspace-tab[aria-selected="true"]{background:#344454!important;border-color:#8095a7!important;color:#f7fafc!important}
.producer-nav .workspace-tab:focus-visible,.legacy-tools .tool:focus-visible{outline:2px solid #dbe7f0!important;outline-offset:2px}
#soundLibrary .sound-browser-tools{padding:10px!important;border:1px solid #465664;border-radius:9px;background:#18222c}
#soundLibrary #soundBrowserSearch{min-height:44px!important;padding:9px 12px!important;border:1px solid #718396!important;border-radius:7px!important;background:#0e161e!important;color:#f5f8fa!important;font-size:13px!important}
#soundLibrary #soundBrowserSearch:focus-visible{outline:2px solid #c9dbe8!important;outline-offset:2px}
#soundLibrary #soundBrowserSearch::placeholder{color:#a8bac9!important;opacity:1}
#soundLibrary .sound-browser-row,#soundLibrary .import-file{border-radius:7px;transition:background .14s,border-color .14s}
#soundLibrary .sound-browser-row:hover,#soundLibrary .import-file:hover{background:#24303b}
#soundLibrary .sound-browser-row button,#soundLibrary .import-file button{min-height:38px}
.dbl-module-menu-items{border:1px solid #66798a!important;border-radius:9px!important;background:#19242e!important;box-shadow:0 12px 28px #0009!important;padding:6px!important}
.dbl-module-menu-items button{min-height:40px!important;text-align:left!important;border-radius:6px!important}
.dbl-module-menu-items button:hover,.dbl-module-menu-items button:focus-visible{background:#344658!important;color:#fff!important}
@media(max-width:760px){.producer-nav{gap:4px!important;padding:5px!important}.producer-nav .workspace-tab{min-height:44px!important}#soundLibrary .sound-browser-tools{padding:8px!important}#soundLibrary #soundBrowserSearch{font-size:16px!important}#soundLibrary .sound-browser-row button,#soundLibrary .import-file button{min-height:44px}}


/* v3.31 — professional arranger tool semantics */
.arrange-tool-strip{display:flex;align-items:center;gap:4px;min-width:0}
.arrange-tool-strip button{min-height:34px;padding:6px 8px;border:1px solid var(--dbl-border,#343735);border-radius:4px;background:var(--dbl-bg-elevated,#141616);color:var(--dbl-text-muted,#b8b7b2);font-size:6px;font-weight:900;letter-spacing:.06em}
.arrange-tool-strip button.active{border-color:var(--dbl-accent-cyan,#58b7c5);color:var(--dbl-text,#e7ecec);box-shadow:inset 0 -2px 0 var(--dbl-accent-cyan,#58b7c5);background:rgba(88,183,197,.10)}
#arrangePanel[data-arrange-tool="select"] .arrange-clip{cursor:default}
#arrangePanel[data-arrange-tool="grab"] .arrange-clip{cursor:grab}
#arrangePanel[data-arrange-tool="grab"] .arrange-clip.dragging{cursor:grabbing}
#arrangePanel[data-arrange-tool="trim"] .arrange-clip{cursor:ew-resize}
#arrangePanel[data-arrange-tool="separate"] .arrange-clip{cursor:crosshair}
#arrangePanel[data-arrange-tool="erase"] .arrange-clip{cursor:not-allowed}
#arrangePanel[data-arrange-tool="zoom"] .arrange-timeline,#arrangePanel[data-arrange-tool="zoom"] .arrange-clip{cursor:zoom-in}
@media(max-width:760px){.arrange-tool-strip{width:100%;overflow-x:auto;scrollbar-width:thin}.arrange-tool-strip button{min-height:44px;flex:0 0 auto;padding-inline:12px}.arrange-tools{flex-wrap:wrap}}


/* Factory library mobile load confirmation: PR #178 reconciled into final hardening. */
#soundLibrary .factory-sound-row{display:grid!important;grid-template-columns:minmax(0,1fr) 40px minmax(82px,100px) minmax(112px,145px)!important;gap:7px!important;align-items:stretch!important;padding:7px!important;min-width:0}
#soundLibrary .factory-sound-row>*{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
#soundLibrary .factory-sound-row .sound-preview,#soundLibrary .factory-sound-row .sound-load{height:auto!important;min-height:48px!important;padding:8px 6px!important;white-space:normal!important;overflow-wrap:anywhere!important;overflow:hidden!important;line-height:1.2!important;font-size:11px!important;letter-spacing:.01em!important;text-align:center!important}
#soundLibrary .factory-sound-row .sound-browser-name{overflow:hidden!important}
#soundLibrary .factory-sound-row.loaded-target{border-color:#80cfe1!important;background:#20323d!important}
#soundLibrary .factory-sound-row.loaded-target .sound-load{border-color:#91d9e9!important;color:#f3fdff!important;background:#294452!important}
@media(max-width:600px){#soundLibrary .factory-sound-row{grid-template-columns:minmax(0,1fr) 38px minmax(74px,88px)!important;gap:5px!important}#soundLibrary .factory-sound-row .sound-load{grid-column:1/-1!important;min-height:44px!important;font-size:12px!important}#soundLibrary .factory-sound-row .sound-preview{font-size:10px!important}}


/* Sampler settings: clear hierarchy without altering legacy controls or engine bindings. */
#waveWrap.sample-chop-console{display:flex;flex-direction:column;gap:10px;min-width:0}
#waveWrap .sample-workflow-guide{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px 16px;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:#15181a}
#waveWrap .sample-workflow-guide strong{font-size:10px;letter-spacing:.1em;color:#ecece8}
#waveWrap .sample-workflow-guide span{font-size:11px;line-height:1.5;color:#c2c5c6}
#waveWrap .sample-inspector-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:8px 3px 2px;border-top:1px solid var(--line)}
#waveWrap .sample-inspector-heading strong{font-size:11px;letter-spacing:.11em;color:#f0f0ed}
#waveWrap .sample-inspector-heading small{font-size:10px;color:#aeb4b6}
#waveWrap .sampler-wave-stage{min-height:190px;overflow:hidden;border:1px solid #565d62;border-radius:7px}
#waveWrap .precision-toolbar button,#waveWrap .slice-focus-bar button,#waveWrap .hardware-chop-strip button{min-height:38px}
#waveWrap button:focus-visible,#waveWrap input:focus-visible{outline:2px solid #c6d0d5;outline-offset:3px}
@media(max-width:680px){
 #waveWrap .sample-workflow-guide{align-items:flex-start;flex-direction:column}
 #waveWrap .sample-inspector-heading{align-items:flex-start;flex-direction:column}
 #waveWrap .sampler-wave-stage{min-height:210px;touch-action:pan-y}
 #waveWrap .precision-toolbar,#waveWrap .slice-focus-bar,#waveWrap .hardware-chop-strip{max-width:100%;min-width:0}
 #waveWrap .precision-toolbar button,#waveWrap .slice-focus-bar button,#waveWrap .hardware-chop-strip button{min-height:44px}
 #waveWrap .trim-lcd{flex-wrap:wrap}
}

/* Preserve native hidden-state semantics despite the sampler's flex layout. */
#waveWrap[hidden],#waveWrap [hidden]{display:none!important}

/* Simple pad-first onboarding: no new state, actions or modal friction. */
.sampler-quickpath{display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px;padding:10px 12px;margin:9px 0;border:1px solid var(--line);border-radius:8px;background:#111518;color:#c8cccd}
.sampler-quickpath strong{font-size:10px;letter-spacing:.12em;color:#f0f0ee;margin-right:8px}
.sampler-quickpath span{font-size:11px;line-height:1.45}
@media(max-width:680px){.sampler-quickpath{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px}.sampler-quickpath strong{grid-column:1/-1}}

/* DBL flagship sampler surface — original industrial instrument design. */
.sampler-command,.sampler-stage,.sample-load-zone,#waveWrap.sample-chop-console{--sampler-edge:#3b444d;--sampler-hi:#9ba9b5;--sampler-accent:#c7d4db}
.sampler-command{background:linear-gradient(165deg,#252c33 0%,#13191e 65%,#0d1115 100%)!important;border:1px solid #56616a!important;border-top:2px solid #85939d!important;border-radius:12px!important;box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.3)!important;padding:16px 18px!important}
.sampler-command strong{font-size:13px!important;font-weight:850;letter-spacing:.16em!important;color:#f0f3f4}
.sampler-command small{font-size:10px!important;color:#a7b3bc!important}
.sampler-command .bank-strip{display:flex;gap:6px;padding:5px;background:#090d10;border:1px solid #3c464d;border-radius:9px}
.sampler-command .bank{min-width:43px;min-height:42px;border-radius:6px!important;border:1px solid #4b5761!important;background:linear-gradient(#2d353d,#151b21)!important;color:#c4ced4!important;font-size:12px!important;font-weight:800}
.sampler-command .bank.active,.sampler-command .bank[aria-pressed="true"]{background:linear-gradient(#dbe3e6,#aebcc6)!important;color:#10171b!important;border-color:#e8f0f4!important;box-shadow:0 0 0 2px rgba(190,209,221,.18),inset 0 1px #fff!important}
.sampler-stage{padding:13px!important;background:linear-gradient(145deg,#20272d,#0d1115)!important;border:1px solid #48545d!important;border-radius:13px!important;box-shadow:inset 0 1px rgba(255,255,255,.09),0 12px 32px rgba(0,0,0,.28)}
.sampler-stage .pads{gap:9px!important}
.sampler-stage .pad{min-width:0;min-height:96px;border:1px solid #58646e!important;border-bottom:3px solid #090d11!important;border-radius:9px!important;background:linear-gradient(155deg,#303b43,#1b252c 68%,#151c22)!important;box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 -6px 14px rgba(0,0,0,.19),0 3px 6px rgba(0,0,0,.3)!important;transition:filter .09s,border-color .09s,transform .09s}
.sampler-stage .pad:is(.active,.selected,[aria-pressed="true"]){border-color:#d3e2ec!important;box-shadow:inset 0 1px rgba(255,255,255,.22),0 0 0 2px rgba(182,209,224,.32),0 4px 12px #0008!important}
.sampler-stage .pad:active{transform:translateY(2px);filter:brightness(1.3)}
.sampler-stage .pad b{font-size:11px!important;letter-spacing:.06em}
.sampler-stage .pad-actions{background:linear-gradient(180deg,#202930,#10161b);border:1px solid #44515b;border-radius:9px;padding:9px!important;gap:6px!important}
.sampler-stage .pad-actions button{border:1px solid #52606a!important;background:linear-gradient(#34404a,#1a242b)!important;color:#e5ebef!important;border-radius:6px!important;min-height:39px;box-shadow:inset 0 1px #ffffff14}
.sampler-stage .pad-actions button:active{background:#bdcbd3!important;color:#10161b!important}
.sampler-stage #padSelectionContext{color:#e5f0f5;font-weight:800;letter-spacing:.05em}
.sample-load-zone{border:1px solid #56626b!important;border-radius:10px!important;background:linear-gradient(120deg,#242e36,#11181d)!important;box-shadow:inset 0 1px #ffffff18;padding:12px!important}
.sample-load-zone #openSoundLibrary{background:linear-gradient(#d7e0e5,#aabcc6)!important;color:#11191e!important;border:1px solid #e1edf2!important;border-radius:7px!important;font-weight:900!important;min-height:46px}
#waveWrap.sample-chop-console{background:linear-gradient(180deg,#202930,#0b1014)!important;border:1px solid #4d5b65!important;border-radius:13px!important;box-shadow:inset 0 1px #ffffff1a,0 12px 28px #0005!important}
#waveWrap .sampler-wave-stage{background:repeating-linear-gradient(0deg,#0b1319 0,#0b1319 29px,#1b2b35 30px),#0b1319!important;border:1px solid #6c7d88!important;box-shadow:inset 0 0 0 2px #080c10,inset 0 0 25px #0008;min-height:220px}
#waveWrap .sample-inspector-heading{padding:11px 12px 5px;border-top:1px solid #45535d}
#waveWrap .sample-inspector-heading strong{color:#e6edf0;font-size:11px;letter-spacing:.15em}
#waveWrap .precision-toolbar,#waveWrap .slice-focus-bar,#waveWrap .hardware-chop-strip{border-radius:8px}
#waveWrap .precision-toolbar button,#waveWrap .slice-focus-bar button,#waveWrap .hardware-chop-strip button{border-radius:6px!important;border:1px solid #54636d!important;background:linear-gradient(#2c3942,#182229)!important;color:#e3eaf0!important;font-weight:750}
#waveWrap .precision-toolbar button:active,#waveWrap .slice-focus-bar button:active,#waveWrap .hardware-chop-strip button:active{filter:brightness(1.35)}
.sampler-quickpath{border-color:#47545e;background:#171e24}
.sampler-quickpath strong{color:#d9e7ee}
@media(max-width:680px){
 .sampler-command{padding:12px!important;gap:9px!important;flex-wrap:wrap}
 .sampler-command .bank-strip{width:100%;justify-content:space-between}
 .sampler-command .bank{flex:1;min-width:0}
 .sampler-stage{padding:8px!important;gap:8px!important}
 .sampler-stage .pads{gap:5px!important}
 .sampler-stage .pad{min-height:70px!important;border-radius:7px!important}
 .sampler-stage .pad-actions button{min-height:44px}
 #waveWrap .sampler-wave-stage{min-height:195px}
}
@media(prefers-reduced-motion:reduce){.sampler-stage .pad{transition:none}}

/* DBL sampler flagship: original dark/chrome industrial console, not a cloned UI. */
.sampler-command{background:linear-gradient(145deg,#252a2f,#111518 72%)!important;border:1px solid #515a60!important;border-top:2px solid #b4bdc1!important;border-radius:12px!important;box-shadow:inset 0 1px #566066,0 14px 30px #0006!important}
.sampler-command strong{font-size:13px!important;font-weight:850;letter-spacing:.14em!important}
.sampler-command .bank-strip{padding:4px;border-radius:9px;background:#090d10;border:1px solid #3d464d}
.sampler-command .bank{min-width:42px;min-height:43px;border-radius:6px!important;font-weight:800;letter-spacing:.06em}
.sampler-command .bank.active{background:#dce0df!important;color:#101417!important;box-shadow:0 0 0 1px #fff5,0 3px 10px #0008}
.sampler-stage{background:linear-gradient(155deg,#1a1f23,#101417)!important;border:1px solid #424c53;border-radius:13px;padding:12px;box-shadow:0 12px 30px #0005,inset 0 1px #65707933}
.sampler-stage .pads{gap:9px!important}
.sampler-stage .pad{border:1px solid #4c555c!important;border-bottom:3px solid #090c0e!important;border-radius:10px!important;box-shadow:inset 0 1px #89939b33,0 5px 9px #0008!important;transition:border-color .1s,background .1s,transform .08s}
.sampler-stage .pad:is(.active,.selected,[aria-pressed="true"]){border-color:#d7dcde!important;box-shadow:inset 0 0 0 1px #dce1e5,0 0 0 2px #8997a766!important}
.sampler-stage .pad:active{transform:translateY(2px);box-shadow:inset 0 2px 6px #000b!important}
.sampler-stage .pad-actions{background:#0d1114;border:1px solid #3c464e;border-radius:9px;padding:7px;gap:6px}
.sampler-stage .pad-actions button{min-height:38px;border-radius:6px;border:1px solid #46515a;font-weight:750;letter-spacing:.04em}
#samplerControlPanel{background:linear-gradient(160deg,#1c2328,#0e1215)!important;border:1px solid #59636b!important;border-top:3px solid #b3bdc3!important;border-radius:11px!important;box-shadow:0 16px 36px #0009!important}
#samplerControlPanel .sampler-panel-head{padding:12px 14px;border-bottom:1px solid #49525a}
#samplerControlPanel .sampler-panel-head b{font-size:14px;letter-spacing:.075em}
#samplerControlPanel .sampler-settings-nav{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
#samplerControlPanel .sampler-settings-nav button{min-height:40px;border-radius:6px;border:1px solid #475159;background:#1a2227;color:#d0d5d7;font-weight:750}
#samplerControlPanel .sampler-settings-nav button.active{background:#d8dddf;color:#0c1012;border-color:#f0f4f5}
#samplerControlPanel .sampler-panel-context{border-top:1px solid #3f4a52;padding:10px 14px}
#soundPanel .sound-controls label,#mixerPanel .mixer-instrument-grid label{border-radius:8px}
#soundPanel input[type="range"],#mixerPanel input[type="range"],#quickEnvelopePanel input[type="range"]{accent-color:#c4d3dc;min-height:30px}
#soundPanel .control-readout,#mixerPanel .control-readout,#mixerPanel [id$="Readout"]{font-variant-numeric:tabular-nums}
#quickEnvelopePanel:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;border:1px solid #52616c;border-radius:9px;background:#11191e}
#quickEnvelopePanel label{display:grid;gap:9px;font-size:11px;letter-spacing:.07em;font-weight:750}
#quickEnvelopePanel #quickGate{grid-column:1/-1;min-height:42px}
.mixer-instrument-grid{gap:12px!important}
.mixer-instrument-grid label{padding:12px!important;border:1px solid #46515a!important;background:linear-gradient(#20282d,#141a1e)!important;min-width:0}
.mixer-instrument-grid input[type="range"]{width:100%}
#waveWrap.sample-chop-console{background:linear-gradient(160deg,#1b2329,#0d1216)!important;border:1px solid #56626a!important;border-top:3px solid #b5c0c5!important;border-radius:12px!important;box-shadow:0 15px 36px #0007}
#waveWrap .sampler-wave-stage{background:#080f13!important;border:1px solid #647781!important;box-shadow:inset 0 0 0 1px #111c23,0 5px 15px #0008}
#waveWrap .sample-inspector-heading{border-top-color:#48545c;padding:11px 12px 4px}
#waveWrap .sample-inspector-heading strong{color:#e9eef0;font-size:12px}
#waveWrap .precision-toolbar button,#waveWrap .slice-focus-bar button,#waveWrap .hardware-chop-strip button{border-radius:6px;font-weight:750}
@media(max-width:680px){
 .sampler-command{flex-wrap:wrap;gap:10px}
 .sampler-command .bank-strip{width:100%;justify-content:space-between}
 .sampler-command .bank{flex:1}
 .sampler-stage{padding:7px;gap:8px}
 .sampler-stage .pads{gap:5px!important}
 .sampler-stage .pad{min-height:68px!important;border-radius:7px!important}
 .sampler-stage .pad-actions button{min-height:44px}
 #samplerControlPanel .sampler-settings-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 #samplerControlPanel .sampler-settings-nav button{min-width:0;padding:9px 4px;font-size:10px}
 .mixer-instrument-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .mixer-instrument-grid label{padding:10px!important}
 #quickEnvelopePanel:not([hidden]){grid-template-columns:1fr}
}

/* Professional DAW legibility gate — retain existing controls, raise information density quality. */
.sampler-command,.sampler-stage,#samplerControlPanel,#waveWrap,#soundPanel,#mixerPanel,.sample-load-zone{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.sampler-command small,.sampler-stage small,#samplerControlPanel small,#waveWrap small,#soundPanel small,#mixerPanel small{font-size:11px!important;line-height:1.45!important;letter-spacing:.025em!important;color:#b7c3ca!important}
.sampler-command strong,.sampler-stage strong,#samplerControlPanel strong,#waveWrap strong,#soundPanel strong,#mixerPanel strong{color:#f0f4f5}
.sampler-stage .pad b{font-size:12px!important;line-height:1.25!important;letter-spacing:.02em!important;text-shadow:0 1px 2px #000b}
.sampler-stage .pad-actions button,#samplerControlPanel button,#waveWrap button,#soundPanel button{font-size:11px!important;line-height:1.3!important;letter-spacing:.025em!important;white-space:normal}
#samplerControlPanel .sampler-settings-nav button{font-size:11px!important;letter-spacing:.035em!important}
#samplerControlPanel .sampler-panel-context span,#samplerControlPanel .sampler-panel-head b{font-size:13px!important;line-height:1.4!important}
#soundPanel label,#mixerPanel .mixer-instrument-grid label,#quickEnvelopePanel label{font-size:12px!important;line-height:1.5!important;color:#e2e9ed!important;letter-spacing:.025em!important}
#soundPanel .control-readout,#mixerPanel [id$="Readout"],#waveWrap .trim-lcd span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px!important;font-weight:750;color:#eaf3f8!important;font-variant-numeric:tabular-nums}
#soundPanel select,#soundPanel input[type="number"],#samplerControlPanel select,#waveWrap select{font-size:14px!important;color:#f1f5f6!important;background-color:#172127;border-color:#52616b;min-height:40px}
#soundPanel input[type="range"],#mixerPanel input[type="range"],#quickEnvelopePanel input[type="range"]{min-height:36px;cursor:pointer}
#samplerControlPanel button:focus-visible,.sampler-stage button:focus-visible,#soundPanel :is(button,input,select):focus-visible,#waveWrap :is(button,input,select):focus-visible{outline:2px solid #e5f1f7!important;outline-offset:2px!important}
.sampler-quickpath span,.sample-workflow-guide span{font-size:12px!important;line-height:1.5!important;color:#d4dde2!important}
@media(max-width:680px){
 .sampler-command small,.sampler-stage small,#samplerControlPanel small,#waveWrap small,#soundPanel small{font-size:11px!important}
 .sampler-stage .pad b{font-size:11px!important}
 #samplerControlPanel .sampler-settings-nav button{font-size:11px!important;min-height:46px}
 #soundPanel label,#mixerPanel .mixer-instrument-grid label{font-size:12px!important}
 #soundPanel select,#soundPanel input[type="number"]{font-size:16px!important}
 #waveWrap .sample-inspector-heading strong{font-size:12px!important}
}

/* Workstation layout correction: dense, calm, legible. No oversized website cards. */
#sampleLoadZone{padding:8px 10px!important;gap:8px!important;border-radius:5px!important;box-shadow:none!important}
#sampleLoadZone .sample-load-copy{display:none!important}
#sampleLoadZone button{min-height:42px!important;border-radius:4px!important}
#waveWrap.sample-chop-console{gap:0!important;border-radius:5px!important;box-shadow:none!important}
#waveWrap .sample-edit-head{min-height:54px;padding:9px 12px!important;background:#1d2429!important;border-bottom:1px solid #3e4c55!important}
#waveWrap .sample-edit-head span{font-size:12px!important;letter-spacing:.04em!important}
#waveWrap .sampler-wave-stage{min-height:210px!important;border-radius:2px!important;margin:0 8px!important}
#waveWrap .sample-inspector-heading{padding:9px 12px!important;margin-top:0!important;background:#1c2429;border-top:1px solid #40505a!important;gap:5px}
#waveWrap .sample-inspector-heading strong{font-size:12px!important;letter-spacing:.055em!important}
#waveWrap .sample-inspector-heading small{font-size:10px!important;letter-spacing:.06em!important}
#waveWrap .precision-toolbar,#waveWrap .slice-focus-bar,#waveWrap .hardware-chop-strip{border:0!important;border-radius:0!important;background:#171e23!important;box-shadow:none!important;padding:8px!important;margin:0!important;gap:6px!important}
#waveWrap .precision-toolbar button,#waveWrap .slice-focus-bar button,#waveWrap .hardware-chop-strip button{border-radius:4px!important;box-shadow:none!important;min-height:39px!important;padding:6px 10px!important;font-size:11px!important}
#waveWrap .zoom-cluster,#waveWrap .audition-cluster{gap:5px!important}
#waveWrap .trim-lcd{display:flex!important;flex-wrap:wrap;gap:8px!important}
#waveWrap .trim-lcd label{background:#11191e!important;border:1px solid #3b4c56!important;border-radius:3px!important;padding:6px 8px!important;min-width:0;color:#c7d4db!important;font-size:11px!important}
#waveWrap .trim-lcd span{color:#43c4ee!important;font-size:13px!important;letter-spacing:.02em!important}
#samplerControlPanel{border-radius:5px!important;box-shadow:none!important}
#samplerControlPanel .sampler-settings-nav{gap:0!important;padding:0!important;background:#141b20!important;border-bottom:1px solid #4d5960}
#samplerControlPanel .sampler-settings-nav button{border-radius:0!important;border:0!important;border-bottom:2px solid transparent!important;background:transparent!important;color:#b8c5cc!important;font-size:12px!important;letter-spacing:.025em!important}
#samplerControlPanel .sampler-settings-nav button.active{background:#29333a!important;border-bottom-color:#3fc2ec!important;color:#fff!important}
#samplerControlPanel .sampler-panel-context{padding:8px 12px!important}
#quickEnvelopePanel:not([hidden]){border-radius:3px!important;box-shadow:none!important}
.sampler-stage{border-radius:5px!important;box-shadow:none!important}
.sampler-stage .pad-actions{border-radius:4px!important;box-shadow:none!important}
.sampler-stage .pad-actions button{border-radius:4px!important;box-shadow:none!important}
@media(max-width:680px){
 #waveWrap .precision-toolbar,#waveWrap .slice-focus-bar,#waveWrap .hardware-chop-strip{padding:7px!important}
 #waveWrap .precision-toolbar button,#waveWrap .slice-focus-bar button,#waveWrap .hardware-chop-strip button{min-height:44px!important}
 #waveWrap .trim-lcd label{flex:1 1 130px!important}
 #waveWrap .sample-inspector-heading{flex-direction:row!important;align-items:center!important}
 #samplerControlPanel .sampler-settings-nav{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 #samplerControlPanel .sampler-settings-nav button{min-height:45px!important}
}

/* DBL compact performance workstation — own design, informed by professional DAW density. */
@media(min-width:850px){
 .sampler-stage{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(220px,30%)!important;align-items:start!important;gap:10px!important}
 .sampler-stage .pads{grid-column:1;grid-row:1 / span 3}
 .sampler-stage .pad-actions{grid-column:2;grid-row:1 / span 3;align-content:start}
 .sampler-stage .pad-actions button{min-height:37px!important}
}
.sampler-command,.sampler-stage,#samplerControlPanel,#waveWrap{--dbl-workstation-bg:#202326;--dbl-workstation-line:#434a4f;--dbl-workstation-text:#e4e9eb;--dbl-workstation-value:#5cc8e8}
.sampler-command{padding:9px 12px!important;min-height:56px!important;border-radius:3px!important;background:#24282b!important;box-shadow:none!important}
.sampler-command strong{font-size:13px!important;letter-spacing:.06em!important}
.sampler-stage{padding:8px!important;background:#24282b!important;border-radius:3px!important}
.sampler-stage .pads{gap:4px!important}
.sampler-stage .pad{min-height:74px!important;border-radius:3px!important;box-shadow:none!important;border:1px solid #48545c!important;border-bottom:2px solid #101417!important;background:linear-gradient(160deg,#34434d,#223039)!important}
.sampler-stage .pad b{font-size:12px!important;font-weight:700!important;letter-spacing:.015em!important;text-shadow:none!important}
.sampler-stage .pad-actions{padding:7px!important;gap:4px!important;border-radius:2px!important}
.sampler-stage .pad-actions button{padding:7px!important;font-size:11px!important;font-weight:700!important;text-shadow:none!important}
#waveWrap .sampler-wave-stage{background-color:#1c2226!important;background-image:linear-gradient(to right,#ffffff0b 1px,transparent 1px),linear-gradient(to bottom,#ffffff0c 1px,transparent 1px)!important;background-size:40px 100%,100% 50%!important}
#waveWrap .trim-lcd label{display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:wrap}
#waveWrap .trim-lcd span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:14px!important;font-weight:650!important;color:#63c9e8!important}
#waveWrap .trim-lcd button{min-width:35px!important}
#samplerControlPanel .sampler-panel-context small{font-size:11px!important}
#samplerControlPanel .sampler-panel-head{background:#252b30!important}
#samplerControlPanel .sampler-settings-nav{position:relative;z-index:1}
#samplerControlPanel .sampler-settings-nav button{font-weight:650!important}
#quickEnvelopePanel:not([hidden]){background:#1d2429!important}
#quickEnvelopePanel label{font-weight:650!important}
@media(max-width:680px){
 .sampler-stage .pad{min-height:69px!important}
 .sampler-stage .pad-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .sampler-stage .pad-actions button{font-size:11px!important;min-height:43px!important;overflow-wrap:anywhere}
 #waveWrap .trim-lcd label{flex:1 1 145px!important}
}

/* Selected-pad envelope display: restrained DAW graph, real saved patch values. */
#quickEnvelopePanel .dbl-envelope-visual{grid-column:1/-1;min-width:0;border:1px solid #465760;background:#1b2328;padding:10px 12px 7px}
#quickEnvelopePanel .dbl-envelope-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
#quickEnvelopePanel .dbl-envelope-title strong{font-size:11px!important;letter-spacing:.065em!important;color:#e9eef0}
#quickEnvelopePanel .dbl-envelope-title span{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#6ed2ef;font-variant-numeric:tabular-nums}
#quickEnvelopePanel .dbl-envelope-visual svg{display:block;width:100%;height:120px;background:#192126}
#quickEnvelopePanel .dbl-envelope-grid{stroke:#52616b;stroke-width:.6;fill:none;opacity:.4}
#quickEnvelopePanel .dbl-envelope-fill{fill:#37bce1;fill-opacity:.12}
#quickEnvelopePanel .dbl-envelope-curve{stroke:#52d1f3;stroke-width:2;fill:none;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#quickEnvelopePanel .dbl-envelope-legend{display:flex;justify-content:space-between;gap:8px;padding-top:6px;color:#aabac3;font-size:10px;letter-spacing:.05em}
@media(max-width:680px){#quickEnvelopePanel .dbl-envelope-visual svg{height:104px}#quickEnvelopePanel .dbl-envelope-title span{font-size:10px}}

/* Four-stage ADSR: compact, readable instrument parameter rack. */
#quickEnvelopePanel:not([hidden]){grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
#quickEnvelopePanel label{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px!important;align-items:center!important;min-width:0;padding:9px!important;background:#202a30;border:1px solid #45545e;border-radius:3px!important;font-size:11px!important}
#quickEnvelopePanel label output{font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#67cbed;white-space:nowrap;font-variant-numeric:tabular-nums}
#quickEnvelopePanel label input[type="range"]{grid-column:1/-1;width:100%;accent-color:#48bfe5;min-height:30px}
#quickEnvelopePanel #quickGate{grid-column:1/-1}
@media(max-width:680px){#quickEnvelopePanel:not([hidden]){grid-template-columns:repeat(2,minmax(0,1fr))!important}#quickEnvelopePanel label{padding:8px!important}}

/* Direct manipulation: finger-friendly ADSR nodes with visible focus and precision. */
#dblEnvelopeGraph{touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}
#dblEnvelopeGraph .dbl-envelope-handle{fill:#1d2c34;stroke:#77dcf6;stroke-width:2.5;vector-effect:non-scaling-stroke;pointer-events:all;cursor:grab}
#dblEnvelopeGraph .dbl-envelope-handle:active{fill:#77dcf6;stroke:#effcff;cursor:grabbing}
#quickEnvelopePanel .dbl-envelope-visual{min-height:170px}
@media(max-width:680px){#dblEnvelopeGraph .dbl-envelope-handle{stroke-width:3}#quickEnvelopePanel .dbl-envelope-visual{min-height:152px}}

/* Empty waveform: actionable load target instead of inert canvas lettering. */
.sampler-wave-stage{position:relative}
#waveLoadSample:not([hidden]){display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;min-height:52px;padding:12px 18px;border:1px solid #6ca7b5;background:#14242b;color:#c5f3ff;font:700 13px ui-monospace,monospace;letter-spacing:.07em;cursor:pointer;white-space:nowrap;max-width:92%}
#waveLoadSample[hidden]{display:none!important}

/* DBL focused sampler: a contextual instrument surface, not a vertical catalogue.
   View switching affects presentation only; existing DOM bindings remain intact. */
.center .dbl-sampler-viewbar{display:flex;align-items:stretch;gap:0;margin:10px 0 8px;background:#16191c;border:1px solid #3a4146;border-radius:3px;overflow:hidden;min-height:42px}
.center .dbl-sampler-viewbar button{flex:1;min-width:0;padding:9px 10px;border:0;border-right:1px solid #343a3f;border-radius:0;background:transparent;color:#a8afb5;font:600 12px/1.2 system-ui,sans-serif;letter-spacing:.065em}
.center .dbl-sampler-viewbar button:last-child{border-right:0}
.center .dbl-sampler-viewbar button[aria-pressed="true"]{background:#292f33;color:#e7f6fb;box-shadow:inset 0 -2px #2ab6e5}
.center[data-sampler-view="edit"] .drum-workflow-bar,.center[data-sampler-view="browse"] .drum-workflow-bar,.center[data-sampler-view]>.section-title{display:none!important}
.center[data-sampler-view="pads"] #soundLibrary,.center[data-sampler-view="pads"] #waveWrap{display:none!important}
.center[data-sampler-view="browse"] .sampler-stage,.center[data-sampler-view="browse"] #waveWrap{display:none!important}
.center[data-sampler-view="edit"] #soundLibrary{display:none!important}
.center[data-sampler-view="edit"] .sampler-stage{display:none!important}
.center[data-sampler-view="edit"] #waveWrap:not([hidden]){display:block!important}
.center[data-sampler-view] .sample-chop-console,.center[data-sampler-view] .sound-browser{border-radius:3px;box-shadow:none}
.center[data-sampler-view="edit"] .wave-wrap{margin-top:4px}
@media(max-width:700px){
 .center .dbl-sampler-viewbar{position:sticky;top:0;z-index:15;margin:6px 0}
 .center .dbl-sampler-viewbar button{min-height:44px;font-size:12px}
 .center[data-sampler-view="edit"] .sample-chop-console{margin-bottom:8px}
 .center[data-sampler-view="edit"] .sample-edit-head{padding:8px 10px}
}

/* Landscape sampler dock: performance pads remain in view while shaping audio. */
.center[data-sampler-view] .dbl-sampler-dock{min-width:0;display:block}
.center[data-sampler-view="browse"] .dbl-sampler-dock{display:none!important}
.center[data-sampler-view="pads"] .dbl-sampler-dock .sampler-stage{display:grid}
.center[data-sampler-view="pads"] .dbl-sampler-dock #waveWrap{display:none!important}
.center[data-sampler-view="edit"] .dbl-sampler-dock #waveWrap{display:block!important;min-width:0}
@media (min-width:900px) and (orientation:landscape){
 .center[data-sampler-view="edit"] .dbl-sampler-dock{display:grid;grid-template-columns:minmax(230px,28%) minmax(0,1fr);gap:10px;align-items:start}
 .center[data-sampler-view="edit"] .dbl-sampler-dock .sampler-stage{display:block!important;min-width:0;position:sticky;top:50px}
 .center[data-sampler-view="edit"] .dbl-sampler-dock .sampler-stage .pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
 .center[data-sampler-view="edit"] .dbl-sampler-dock .pad-actions{display:flex!important;flex-wrap:wrap;gap:5px;align-items:center;min-width:0}
.center[data-sampler-view="edit"] .dbl-sampler-dock .pad-actions button{min-height:38px;max-width:100%;font-size:11px}
.center[data-sampler-view="edit"] .dbl-performance-modebar{display:flex!important;flex-wrap:wrap;gap:4px;min-width:0}
 .center[data-sampler-view="edit"] .dbl-sampler-dock #waveWrap{margin:0}
 .center[data-sampler-view="edit"] .dbl-sampler-dock .pads button{min-width:0}
}
@media (max-width:899px){
 .center[data-sampler-view="edit"] .dbl-sampler-dock .sampler-stage{display:none!important}
 .center[data-sampler-view="edit"] .dbl-sampler-dock #waveWrap{width:100%;max-width:100%}
}

/* DBL performance UI: compact primary actions, opt-in advanced controls. */
.center .pad-actions{min-width:0;align-content:start}
.center .dbl-pad-action-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 2px}
.center .dbl-pad-action-head>strong{font:700 11px/1.3 system-ui,sans-serif;letter-spacing:.1em;color:#aabac5}
.center .dbl-pad-more{position:relative;z-index:8}
.center .dbl-pad-more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:88px;padding:8px 12px;border:1px solid #4b5965;border-radius:6px;background:#1b2730;color:#dbeaf3;font:700 12px system-ui,sans-serif}
.center .dbl-pad-more>summary::-webkit-details-marker{display:none}
.center .dbl-pad-more[open] .dbl-pad-more-body{position:absolute;right:0;top:calc(100% + 5px);width:min(310px,calc(100vw - 40px));max-height:55vh;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px;border:1px solid #52606c;border-radius:8px;background:#101820;box-shadow:0 12px 28px #000b}
.center .dbl-pad-more-body>button{min-height:44px;min-width:0}
.center .dbl-sampler-dock,.center .sampler-stage,.center .pad-actions,.center #waveWrap{max-width:100%;box-sizing:border-box}
@media(max-width:700px){
 .center .dbl-sampler-viewbar{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
 .center .dbl-sampler-viewbar button{flex:0 0 auto;min-width:70px}
 .center .pad-actions{gap:6px}
 .center .pad-actions>#padSelectionContext{grid-column:1/-1}
 .center .pad-actions>#padLoadAction,.center .pad-actions>#padChopAction,.center .pad-actions>#padSoundAction{min-height:44px}
}

/* iPhone performance viewport containment: never scale the DAW into narrow columns. */
@media(max-width:700px){
 html,body{max-width:100%;overflow-x:hidden}
 .center{box-sizing:border-box;width:100%;min-width:0;max-width:100%;padding-left:10px;padding-right:10px}
 .center .dbl-sampler-dock,.center .sampler-stage,.center .pad-actions,.center #waveWrap,.center #soundLibrary{box-sizing:border-box;min-width:0;max-width:100%}
 .center[data-sampler-view="pads"] .sampler-stage{display:block!important}
 .center[data-sampler-view="pads"] .sampler-stage .pads{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%;gap:5px}
 .center[data-sampler-view="pads"] .sampler-stage .pads>.pad{min-width:0!important;width:100%;max-width:100%;min-height:64px;overflow:hidden}
 .center[data-sampler-view="pads"] .pad-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-top:8px}
 .center[data-sampler-view="pads"] .pad-actions>.dbl-pad-action-head,.center[data-sampler-view="pads"] .pad-actions>#padSelectionContext{grid-column:1/-1}
 .center[data-sampler-view="pads"] .pad-actions>#padSoundAction{grid-column:1/-1}
 .center[data-sampler-view="pads"] #polyPanel,.center[data-sampler-view="pads"] .step-editor{display:none!important}
 .center[data-sampler-view="browse"] #polyPanel,.center[data-sampler-view="browse"] .step-editor{display:none!important}
 .center[data-sampler-view="edit"] #polyPanel,.center[data-sampler-view="edit"] .step-editor{display:none!important}
 .center[data-sampler-view="browse"] #soundLibrary{width:100%!important;max-width:100%!important}
 .center[data-sampler-view="edit"] #waveWrap{width:100%!important;max-width:100%!important}
 .center .dbl-sampler-viewbar{max-width:100%;width:100%;overflow-x:auto;overflow-y:hidden}
 .center .dbl-sampler-viewbar button{min-width:78px;white-space:nowrap}
}

/* Performance workspace: independent navigation and gesture modes. */
.center .dbl-sampler-viewbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:100%;overflow:hidden}
.center .dbl-sampler-viewbar button{min-width:0;min-height:44px;white-space:normal}
.center .dbl-performance-modebar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;max-width:100%;margin:0 0 12px;padding:6px;background:#111a22;border:1px solid #334651;border-radius:8px}
.center .dbl-performance-modebar button{min-width:0;min-height:44px;padding:7px 2px;border:1px solid #364954;border-radius:5px;background:#1a2832;color:#c8d8e3;font:700 10px/1.2 system-ui,sans-serif;letter-spacing:.025em}
.center .dbl-performance-modebar button[aria-pressed="true"]{color:#101820;background:#a8e5f2;border-color:#7fd3e8}
.center .dbl-performance-modebar button:focus-visible,.center .dbl-sampler-viewbar button:focus-visible{outline:3px solid #f5ca6a;outline-offset:2px}
.center[data-sampler-view="browse"] .dbl-performance-modebar{display:none}
@media(max-width:700px){
 .center .dbl-sampler-viewbar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible!important}
 .center .dbl-sampler-viewbar button{min-width:0!important;white-space:normal!important}
 .center .dbl-performance-modebar{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
 .center .dbl-performance-modebar button{font-size:9px;min-height:48px;overflow-wrap:anywhere}
 .center #soundPanel,.center #arrangePanel,.center #mixerPanel,.center #polyPanel{box-sizing:border-box;min-width:0;max-width:100%}
 .center #soundPanel *,.center #arrangePanel *{box-sizing:border-box}
 .center #soundPanel input[type="range"]{max-width:100%}
}

/* Dedicated pad performance rail: keep view tabs distinct from pad gestures. */
.center .dbl-sampler-viewbar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:100%;overflow:hidden!important}
.center .dbl-sampler-viewbar button{min-width:0!important;min-height:44px;white-space:normal!important}
.center .dbl-performance-modebar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0 0 12px;padding:6px;max-width:100%;background:#111a22;border:1px solid #334651;border-radius:8px}
.center .dbl-performance-modebar button{min-width:0;min-height:44px;padding:6px 2px;border:1px solid #364954;border-radius:5px;background:#1a2832;color:#c8d8e3;font:700 10px/1.2 system-ui,sans-serif}
.center .dbl-performance-modebar button[aria-pressed="true"]{color:#101820;background:#a8e5f2;border-color:#7fd3e8}
.center .dbl-performance-modebar button:focus-visible{outline:3px solid #f5ca6a;outline-offset:2px}
.center[data-sampler-view="browse"] .dbl-performance-modebar{display:none}
@media(max-width:700px){.center .dbl-performance-modebar{gap:3px}.center .dbl-performance-modebar button{font-size:9px;min-height:48px;overflow-wrap:anywhere}.center #soundPanel,.center #arrangePanel,.center #mixerPanel,.center #polyPanel{box-sizing:border-box;min-width:0;max-width:100%}}

/* Unified compact iPhone performance surface; module state controls visibility. */
@media(max-width:700px){
 .center[data-sampler-view="pads"] .dbl-sampler-dock{width:100%;min-width:0}
 .center[data-sampler-view="pads"] .sampler-stage{padding:0!important;margin:0!important;width:100%;min-width:0}
 .center[data-sampler-view="pads"] .sampler-stage .pads{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important}
 .center[data-sampler-view="pads"] .sampler-stage .pads>.pad{min-height:70px;max-width:100%;font-size:clamp(10px,2.8vw,14px);overflow-wrap:anywhere}
 .center[data-sampler-view="pads"] .pad-actions{width:100%;min-width:0;padding:8px!important}
 .center[data-sampler-view="pads"] .pad-actions>#padLoadAction,.center[data-sampler-view="pads"] .pad-actions>#padChopAction{min-height:44px}
 .center[data-sampler-view="pads"] .pad-actions>#padSoundAction{min-height:44px}
 .center[data-sampler-view="pads"] .sample-load-zone{max-width:100%;min-width:0}
 .center[data-sampler-view="pads"] .sample-load-zone>*{max-width:100%;min-width:0}
 .center[data-sampler-view="edit"] .dbl-sampler-dock{display:block!important;width:100%;min-width:0}
 .center[data-sampler-view="edit"] #waveWrap{display:block!important;overflow:hidden}
 .center[data-sampler-view="edit"] #waveform{display:block;width:100%!important;max-width:100%;touch-action:none}
 .center[data-sampler-view="edit"] .wave-tools{max-width:100%;min-width:0}
 .center[data-sampler-view="browse"] #soundLibrary{overflow-x:hidden}
 .center .dbl-pad-more[open] .dbl-pad-more-body{z-index:30}
}

/* Keep the actual waveform and selected sample controls ahead of auxiliary modules. */
.center[data-sampler-view="edit"] .dbl-sampler-dock{display:block;min-width:0}
.center[data-sampler-view="edit"] .sample-chop-console{position:relative;z-index:1;min-width:0}
.center[data-sampler-view="edit"] .wave-stage{position:relative;width:100%;max-width:100%;min-width:0;overflow:hidden}
.center[data-sampler-view="edit"] .wave-stage canvas{display:block;max-width:100%;width:100%;min-height:180px}
.center[data-sampler-view="edit"] .wave-tools{display:flex;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
.center[data-sampler-view="edit"] .wave-tools>*{min-width:0;max-width:100%}
@media(max-width:700px){
 .center[data-sampler-view="edit"] .sample-chop-console{padding:8px!important}
 .center[data-sampler-view="edit"] .wave-stage{min-height:190px}
 .center[data-sampler-view="edit"] .wave-tools button{min-height:44px}
 .center[data-sampler-view="edit"] .trim-lcd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .center[data-sampler-view="edit"] .trim-lcd>*{min-width:0}
}

/* Sound processor: one selected instrument, distinct primary controls and deeper pages. */
#soundPanel{min-width:0;max-width:100%;overflow-x:clip}
#soundPanel .sound-quick-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
#soundPanel .sound-quick-strip>[data-dbl-layout-group]{min-width:0;max-width:100%}
#soundPanel .quick-mix-controls,#soundPanel .quick-tone-controls{display:grid;gap:8px}
#soundPanel .quick-mix-controls label,#soundPanel .quick-tone-controls label{display:grid;gap:6px;min-width:0}
#soundPanel .quick-mix-controls input,#soundPanel .quick-tone-controls input{width:100%;min-width:0;max-width:100%}
#soundPanel .sound-mobile-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-width:100%}
#soundPanel .sound-mobile-nav button{min-width:0;min-height:44px;padding:8px 2px;overflow-wrap:anywhere}
#soundPanel .quick-envelope{grid-column:1/-1;min-width:0;max-width:100%}
#soundPanel .dbl-envelope-visual,#soundPanel .dbl-envelope-visual svg{width:100%;max-width:100%;min-width:0}
@media(max-width:700px){
 #soundPanel{width:100%!important;max-width:100%!important;padding:10px!important}
 #soundPanel .sound-quick-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #soundPanel .quick-primary-actions,#soundPanel .quick-secondary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 #soundPanel .quick-primary-actions button,#soundPanel .quick-secondary-actions button,#soundPanel .sound-quick-strip>button,#soundPanel .sound-quick-strip>select{min-height:44px;min-width:0;max-width:100%}
 #soundPanel .sound-quick-strip>.quick-mix-controls,#soundPanel .sound-quick-strip>.quick-tone-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #soundPanel .quick-tone-controls label,#soundPanel .quick-mix-controls label{min-width:0}
 #soundPanel .quick-envelope:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #soundPanel .quick-envelope .dbl-envelope-visual{grid-column:1/-1}
}

/* DBL performance surface — pad-first hierarchy, tactile focus and state feedback. */
.center[data-sampler-view="pads"] .sampler-stage .pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(4px,1vw,9px);max-width:100%}
.center[data-sampler-view="pads"] .sampler-stage .pad{position:relative;min-width:0;aspect-ratio:1.13;min-height:0;border-radius:9px;border:1px solid #4a5965;background:linear-gradient(155deg,#303c46,#141c24 75%);box-shadow:inset 0 1px #ffffff16,0 2px 5px #0008;transition:background-color .09s,border-color .09s,transform .09s}
.center[data-sampler-view="pads"] .sampler-stage .pad.hit,.center[data-sampler-view="pads"] .sampler-stage .pad:active{background:#8ed7e7;color:#0a1921;transform:scale(.975)}
.center[data-sampler-view="pads"] .sampler-stage .pad:focus-visible{outline:3px solid #f7c769;outline-offset:1px}
.center[data-sampler-view="pads"] .sampler-stage .pad[aria-pressed="true"]{border-color:#8ed7e7;box-shadow:inset 0 0 0 2px #8ed7e780,0 0 0 1px #8ed7e7}
.center[data-sampler-view="pads"] .sampler-stage .pad b{font-size:clamp(10px,2.6vw,14px);line-height:1.2}
.center[data-sampler-view="pads"] .sampler-stage .pad small{font-size:clamp(9px,2.2vw,11px);line-height:1.2}
.center[data-sampler-view="pads"] .dbl-pad-action-head{border-bottom:1px solid #34434e;padding-bottom:7px}
@media(max-width:700px){
 .center[data-sampler-view="pads"] .sampler-stage .pad{aspect-ratio:1.04;min-height:62px!important;padding:5px!important}
 .center[data-sampler-view="pads"] .sampler-stage .pads{gap:5px!important}
 .center[data-sampler-view="pads"] .pad-actions{margin-top:10px;border:1px solid #34434e;border-radius:8px;background:#121b23}
}

/* Waveform-first sampler: editing follows the sample, secondary tools stay compact. */
.center[data-sampler-view="edit"] .sample-chop-console{display:flex;flex-direction:column;gap:10px}
.center[data-sampler-view="edit"] .sample-edit-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.center[data-sampler-view="edit"] .sample-edit-head>div{min-width:0}
.center[data-sampler-view="edit"] #sampleFileName{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.center[data-sampler-view="edit"] .sampler-wave-stage{order:1;width:100%;min-width:0;min-height:220px;border:1px solid #445460;border-radius:9px;background:#0d151b;overflow:hidden}
.center[data-sampler-view="edit"] .sample-edit-head{order:0}
.center[data-sampler-view="edit"] .wave-tools{order:2;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.center[data-sampler-view="edit"] .zoom-cluster,.center[data-sampler-view="edit"] .audition-cluster{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.center[data-sampler-view="edit"] .zoom-cluster button,.center[data-sampler-view="edit"] .audition-cluster button{min-height:42px}
.center[data-sampler-view="edit"] .trim-lcd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.center[data-sampler-view="edit"] .trim-lcd label{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.center[data-sampler-view="edit"] .trim-lcd span{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.center[data-sampler-view="edit"] .sample-inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.center[data-sampler-view="edit"] .slice-focus-bar{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.center[data-sampler-view="edit"] .slice-focus-bar button{min-height:42px}
.center[data-sampler-view="edit"] .hardware-chop-strip{min-width:0;max-width:100%;overflow-wrap:anywhere}
.center[data-sampler-view="edit"] .chop-segments,.center[data-sampler-view="edit"] .slice-actions{display:flex;flex-wrap:wrap;gap:6px}
.center[data-sampler-view="edit"] .chop-segments button,.center[data-sampler-view="edit"] .slice-actions button{min-height:42px}
@media(max-width:700px){
 .center[data-sampler-view="edit"] .sampler-wave-stage{min-height:200px}
 .center[data-sampler-view="edit"] .trim-lcd{grid-template-columns:repeat(2,minmax(0,1fr))}
 .center[data-sampler-view="edit"] .trim-lcd label:last-child{grid-column:1/-1}
 .center[data-sampler-view="edit"] .slice-focus-bar button{flex:1 1 auto}
 .center[data-sampler-view="edit"] .sample-inspector-heading small{font-size:10px}
}

/* Sampler density correction: compact control desk below the waveform. */
@media(max-width:700px){
 .center[data-sampler-view="edit"] .wave-tools.precision-toolbar{padding:8px!important;margin:0!important;gap:7px!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important}
 .center[data-sampler-view="edit"] .wave-tools .zoom-cluster{display:grid!important;grid-template-columns:42px 42px 54px minmax(0,1fr) auto;gap:5px!important;align-items:center}
 .center[data-sampler-view="edit"] .wave-tools .zoom-cluster button{min-width:0!important;min-height:40px!important;padding:5px!important;font-size:12px!important}
 .center[data-sampler-view="edit"] .wave-tools .zoom-cluster #waveZoomReadout{font-size:11px!important;white-space:nowrap}
 .center[data-sampler-view="edit"] .wave-tools .trim-lcd{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
 .center[data-sampler-view="edit"] .wave-tools .trim-lcd label{display:grid!important;grid-template-columns:auto minmax(0,1fr) 38px 38px;align-items:center;gap:3px!important;min-width:0!important;min-height:48px!important;padding:5px!important;font-size:11px!important}
 .center[data-sampler-view="edit"] .wave-tools .trim-lcd label span{min-width:0!important;font-size:clamp(10px,2.7vw,13px)!important;white-space:nowrap!important;overflow:hidden;text-overflow:clip}
 .center[data-sampler-view="edit"] .wave-tools .trim-lcd label button{min-width:0!important;min-height:38px!important;width:38px!important;height:38px!important;padding:0!important;font-size:16px!important}
 .center[data-sampler-view="edit"] .wave-tools .trim-lcd label:last-child{grid-column:1/-1;grid-template-columns:auto 1fr;min-height:34px!important}
 .center[data-sampler-view="edit"] .wave-tools .audition-cluster{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
 .center[data-sampler-view="edit"] .wave-tools .audition-cluster button{min-height:44px!important}
 .center[data-sampler-view="edit"] .sample-inspector-heading{padding:5px 8px!important;margin:0!important}
 .center[data-sampler-view="edit"] .sample-inspector-heading strong{font-size:12px!important}
 .center[data-sampler-view="edit"] .sample-inspector-heading small{font-size:10px!important}
 .center[data-sampler-view="edit"] .slice-focus-bar{padding:6px!important;margin:0!important;gap:4px!important}
 .center[data-sampler-view="edit"] .slice-focus-bar button{min-height:40px!important}
}


/* Canonical channel state is visible on the performance pads. */
.center .sampler-stage .pad.muted{opacity:.55;border-color:#c38b63}
.center .sampler-stage .pad.solo{box-shadow:inset 0 0 0 2px #d6b458}
.center .sampler-stage .pad.muted::after{content:"MUTE";position:absolute;right:6px;bottom:6px;font:700 9px system-ui;color:#efb48d}
.center .sampler-stage .pad.solo::before{content:"SOLO";position:absolute;right:6px;top:6px;font:700 9px system-ui;color:#e9c871}

/* Performance workstation refinement: compact, readable, touch-first, DBL original identity. */
.center .dbl-sampler-viewbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;background:#10171d;border:1px solid #35414a;border-radius:12px}
.center .dbl-sampler-viewbar [data-dbl-sampler-view]{min-width:0;min-height:48px;border:0;border-radius:8px;background:transparent;color:#aebbc5;font-weight:750;letter-spacing:.075em;box-shadow:none}
.center .dbl-sampler-viewbar [data-dbl-sampler-view][aria-pressed="true"]{background:#27323a;color:#f0f7fa;box-shadow:inset 0 -3px #64c8dd}
.center .sample-chop-console .sample-chop-head{min-width:0;gap:10px}
.center .sample-chop-console .sample-chop-head>div:first-child{min-width:0}
.center .sample-chop-console #sampleFileName{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.center .sample-chop-console .wave-stage{position:relative;overflow:hidden}
.center .sample-chop-console #waveLoadSample{max-width:calc(100% - 24px);white-space:normal;line-height:1.4;text-wrap:balance}
@media(max-width:600px){
 .center .dbl-sampler-viewbar{position:relative;gap:3px;padding:3px;margin-block:8px}
 .center .dbl-sampler-viewbar [data-dbl-sampler-view]{min-height:46px;font-size:12px;letter-spacing:.045em;padding:8px 4px}
 .center .sample-chop-console{min-width:0}
 .center .sample-chop-console .sample-chop-head{padding:10px 12px}
 .center .sample-chop-console .sample-chop-head #sampleFileName{font-size:11px}
 .center .sample-chop-console .sample-format{flex-shrink:0}
 .center .sample-chop-console .wave-stage{min-height:190px!important;height:min(35vh,290px)!important}
 .center .sample-chop-console #waveform{height:100%!important}
 .center .sample-chop-console .wave-tools{min-width:0}
 .center .sample-chop-console .zoom-cluster{display:flex;flex-wrap:wrap;gap:5px}
 .center .sample-chop-console .zoom-cluster button{min-height:42px}
}

/* Live performance-mode guidance, aligned to the selected interaction. */
.center .dbl-performance-hint{box-sizing:border-box;display:flex;align-items:center;min-height:32px;padding:6px 10px;margin:5px 0 8px;border-left:3px solid #66818e;background:#141e26;color:#bac9d2;font:700 10px/1.45 system-ui,sans-serif;letter-spacing:.065em}
.center .dbl-performance-hint[data-mode="mute"]{border-left-color:#e7a07b}
.center .dbl-performance-hint[data-mode="solo"]{border-left-color:#e4c47b}
.center .dbl-performance-hint[data-mode="select"]{border-left-color:#75b9dc}
.center .dbl-performance-hint[data-mode="keys"]{border-left-color:#92caa3}
@media(max-width:600px){.center .dbl-performance-hint{font-size:10px;min-height:36px;padding:6px 8px;margin:4px 0 6px}}

/* DBL workstation V2: dense instrument browser, not stacked dashboard cards. */
.center .dbl-sampler-viewbar{border-radius:7px!important;background:#101419!important;border-color:#303b44!important;gap:1px!important;padding:3px!important}
.center .dbl-sampler-viewbar [data-dbl-sampler-view]{border-radius:5px!important;letter-spacing:.035em!important;font-weight:650!important}
.center .dbl-performance-hint{background:transparent!important;border-left:2px solid #6eb5c8!important;color:#9daeb9!important;letter-spacing:.035em!important;font-weight:600!important}
.center[data-sampler-view="browse"] #soundPanel,.center[data-sampler-view="browse"] #soundLibrary{border-radius:7px!important;box-shadow:none!important}
.center[data-sampler-view="browse"] #soundLibrary button{border-radius:5px!important;box-shadow:none!important}
.center[data-sampler-view="browse"] #soundLibrary input{border-radius:5px!important}
.center[data-sampler-view="edit"] #waveWrap{border-radius:7px!important;box-shadow:none!important}
.center[data-sampler-view="edit"] .sample-chop-console{background:#11181e!important;border:1px solid #35444d!important;border-radius:7px!important}
.center[data-sampler-view="edit"] .wave-stage{background:#090f14!important;border-radius:5px!important}
@media(max-width:700px){
 .center[data-sampler-view="browse"] #soundLibrary{padding:6px!important}
 .center[data-sampler-view="browse"] #soundLibrary button{min-height:42px}
 .center[data-sampler-view="edit"] #waveWrap{min-width:0!important;width:100%!important}
 .center[data-sampler-view="edit"] .sample-chop-console{padding:8px!important}
}

/* Instrument-centered sampler: one compact context strip, immediate browse action. */
.center .dbl-sampler-contextbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:7px 9px;background:#0d151b;border:1px solid #34454f;border-radius:5px;color:#c4d0d8;font:650 10px/1.4 system-ui,sans-serif;letter-spacing:.035em}
.center .dbl-sampler-contextbar #dblSamplerPadIdentity{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.center .dbl-sampler-contextbar #dblSamplerBrowse{flex-shrink:0;min-height:40px;padding:7px 12px;border:1px solid #5d8799;border-radius:4px;background:#1b303a;color:#bdeaf6;font:700 10px system-ui,sans-serif}
@media(max-width:600px){.center .dbl-sampler-contextbar{gap:6px;padding:5px 7px}.center .dbl-sampler-contextbar #dblSamplerBrowse{padding:7px 8px;font-size:9px}}

/* DBL instrument-first mobile redesign: compact pad bank + waveform, not a file dashboard. */
.center[data-sampler-view="edit"] .dbl-sampler-dock{display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px;align-items:start;min-width:0}
.center[data-sampler-view="edit"] .dbl-sampler-dock .sampler-stage{display:block!important;min-width:0;position:static!important;top:auto!important;margin:0!important;padding:0!important}
.center[data-sampler-view="edit"] .dbl-sampler-dock .pads{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
.center[data-sampler-view="edit"] .dbl-sampler-dock .pads>.pad{min-width:0!important;width:100%;max-width:100%;overflow:hidden}
.center[data-sampler-view="edit"] .dbl-sampler-dock .pad-actions{display:none!important}
.center[data-sampler-view="edit"] .dbl-sampler-dock #waveWrap:not([hidden]){display:block!important;width:100%;min-width:0;margin:0}
.center[data-sampler-view="edit"] .dbl-sampler-contextbar{background:#11191f;border-color:#31404a}
.center[data-sampler-view="browse"] #soundLibrary{background:#10161b!important;border-color:#31404a!important}
.center[data-sampler-view="browse"] #soundLibrary .import-file-list{max-height:48vh;overflow:auto;overscroll-behavior:contain}
@media(min-width:900px) and (orientation:landscape){
.center[data-sampler-view="edit"] .dbl-sampler-dock{grid-template-columns:minmax(230px,30%) minmax(0,1fr)!important;gap:12px}
.center[data-sampler-view="edit"] .dbl-sampler-dock .sampler-stage{position:sticky!important;top:50px!important}
}
@media(max-width:700px){
.center[data-sampler-view="edit"] .dbl-sampler-dock{gap:6px}
.center[data-sampler-view="edit"] .dbl-sampler-dock .pads>.pad{min-height:52px!important;max-height:74px}
.center[data-sampler-view="edit"] .dbl-sampler-dock #waveWrap .wave-stage{min-height:170px}
.center[data-sampler-view="browse"] #soundLibrary .import-file-list{max-height:42vh}
}

/* DBL performance workstation: visible instrument ownership without changing audio routing. */
.dbl-instrument-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #38434b;border-radius:10px;background:linear-gradient(110deg,#171c22,#232a30);color:#e7edf0;min-width:0}
.dbl-instrument-heading>div:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.dbl-instrument-heading strong{font-size:11px;letter-spacing:.13em;color:#e5a56b}
#dblInstrumentIdentity{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbl-instrument-actions{display:flex;gap:6px;flex-shrink:0}
.dbl-instrument-actions button{border:1px solid #58646c;background:#303b44;color:#f4f7f9;border-radius:6px;padding:9px 11px;font-size:11px;font-weight:700;min-height:36px;cursor:pointer}
.dbl-instrument-actions button:first-child{background:#bb6b35;border-color:#cf8550;color:#fff}
@media(max-width:600px){.dbl-instrument-heading{flex-wrap:wrap;padding:10px}.dbl-instrument-heading>div:first-child{width:100%}.dbl-instrument-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.dbl-instrument-actions button{min-height:44px}}

/* Reference-driven mobile cleanup: avoid decorative overlay and duplicate control walls. */
.sampler-stage::before{content:none!important;display:none!important}
.sampler-stage .dbl-instrument-heading{position:relative;z-index:1}
@media(max-width:700px){
 .sampler-stage{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:8px!important}
 .sampler-stage .pads{grid-column:1!important;width:100%!important;min-width:0!important}
 .sampler-stage .pad-actions{grid-column:1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important;gap:7px!important;padding:9px!important}
 .sampler-stage .pad-actions .dbl-pad-action-head,.sampler-stage .pad-actions #padSelectionContext{grid-column:1/-1!important}
 .sampler-stage .pad-actions button{min-height:42px!important;font-size:11px!important}
 .sampler-stage .pad-actions #padSoundAction{grid-column:1/-1!important}
 .sampler-stage .pad-actions #padReverseAction,.sampler-stage .pad-actions #padCrunchAction,.sampler-stage .pad-actions #padKeygroupAction,.sampler-stage .pad-actions .keygroup-shift,.sampler-stage .pad-actions .keygroup-root,.sampler-stage .pad-actions .keygroup-voice{display:none!important}
 .sampler-stage .pad-actions #padDuplicateAction,.sampler-stage .pad-actions #padClearAction{display:none!important}
}

/* One selected-pad identity, with optional advanced actions instead of a second control wall. */
@media(max-width:700px){
 .sampler-stage .pad-actions{background:#151b21!important;border:1px solid #35424c!important;border-radius:9px!important}
 .sampler-stage .pad-actions .dbl-pad-action-head{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:32px!important}
 .sampler-stage .pad-actions #padSelectionContext{font-size:12px!important;line-height:1.4!important;overflow-wrap:anywhere!important;padding:8px!important;border:1px solid #364653!important;border-radius:6px!important;background:#202a32!important}
 .sampler-stage .pad-actions #padLoadAction{display:none!important}
 .sampler-stage .pad-actions #padSoundAction{grid-column:1/-1!important}
 .sampler-stage .pad-actions #padChopAction:disabled{display:none!important}
 .sampler-stage .pad-actions .dbl-pad-more{position:relative!important;z-index:3!important}
 .sampler-stage .pad-actions .dbl-pad-more-body{max-width:100%!important;overflow-wrap:anywhere!important}
}


/* Multi-bar pattern navigation: preserve the readable 16-step hardware grid. */
.poly-pattern-length{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-bottom:1px solid var(--dbl-border);background:linear-gradient(90deg,rgba(212,174,76,.08),transparent 58%)}
.poly-pattern-length>label{display:flex;align-items:center;gap:9px;min-width:148px;color:var(--dbl-text-muted);font-size:8px;font-weight:900;letter-spacing:.1em}
#patternLength{min-height:36px;min-width:104px;padding:0 10px;border:1px solid rgba(212,174,76,.55);border-radius:4px;background:#11181c;color:#f4d17a;font-size:10px;font-weight:900;letter-spacing:.08em}
#patternLengthSummary{flex:1;color:var(--dbl-text-muted);font-size:8px;font-weight:800;letter-spacing:.1em;text-align:center}
.pattern-bar-pages{display:flex;align-items:center;justify-content:flex-end;gap:4px;max-width:58%;overflow-x:auto;scrollbar-width:thin}
.pattern-bar-page{flex:0 0 auto;min-width:48px;min-height:34px;padding:0 8px;border:1px solid var(--dbl-border);border-radius:3px;background:#10161a;color:var(--dbl-text-muted);font-size:8px;font-weight:900;letter-spacing:.05em}
.pattern-bar-page[aria-selected="true"]{border-color:var(--dbl-accent-amber);background:linear-gradient(180deg,rgba(212,174,76,.28),rgba(212,174,76,.08));color:#ffe29a;box-shadow:inset 0 -2px var(--dbl-accent-amber)}
@media(max-width:700px){.poly-pattern-length{display:grid;grid-template-columns:auto 1fr;gap:7px;padding:8px}.poly-pattern-length>label{min-width:0}.poly-pattern-length>label>span{max-width:64px;line-height:1.3}.poly-pattern-length #patternLength{min-height:40px;min-width:92px;font-size:10px}.poly-pattern-length #patternLengthSummary{font-size:7px;text-align:right;line-height:1.45}.pattern-bar-pages{grid-column:1/-1;width:100%;max-width:none;justify-content:flex-start;padding-bottom:2px}.pattern-bar-page{min-width:52px;min-height:40px;font-size:9px}}

/* The mobile sampler hides deeper modules until their workspace is explicitly opened. */
@media(max-width:700px){html[data-dbl-workspace="sequence"] .center #polyPanel{display:grid!important}}

/* DBL Web Plugin Desk — honest browser-hosted source, insert and capture controls */
.fx-source-card,.fx-record-card{display:grid;gap:8px;margin:10px 0;padding:12px;border:1px solid #3e3a2e;border-radius:7px;background:linear-gradient(155deg,#1b1b17,#10110f)}
.fx-source-kicker,.fx-record-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.fx-source-kicker,.fx-record-head b{font-size:9px;letter-spacing:.1em;color:#d6c387}.fx-host-badge{border:1px solid #4a503e;border-radius:999px;padding:3px 7px;color:#b9ca9b;font-size:8px;letter-spacing:.07em}.fx-source-card> b{font-size:15px;overflow-wrap:anywhere}.fx-source-card>small,.fx-record-card>small{color:#aaa99e;font-size:10px;line-height:1.5}.fx-source-actions,.fx-record-actions{display:flex;flex-wrap:wrap;gap:6px}.fx-source-actions button,.fx-record-actions button{min-height:34px;font-size:9px}.fx-source-actions button:first-child,.fx-record-actions #fxDeskRecord{border-color:#85713b;color:#ead58d}.fx-record-head span{font-size:8px;text-align:right;color:#ccc3a6}.fx-record-actions button{flex:1;min-width:68px}.fx-capability-note{margin:8px 0 12px;padding:8px;border-left:2px solid #675b39;background:#121310;color:#a9a79a;font-size:9px;line-height:1.5}.pad-plugin.plugin-editor-open{outline:2px solid #c9a84d;outline-offset:3px;transition:outline .2s ease}
@media(max-width:760px){.fx-source-actions button{flex:1}.fx-record-actions button{min-width:calc(50% - 6px)}}