@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&display=swap');
/* DUST Studio: the phone is the machine. Display and mode keys on top, one editor deck, transport and pads in the thumb zone. */
:root{color-scheme:dark;--shell:#4c4b46;--shell-lo:#3f3e39;--deck:#1d1d1a;--deck-hi:#26261f;--key-hi:#3b3a35;--key-lo:#2e2d29;--edge:#23221f;--line:#514d44;--ink:#f2ede1;--dim:#bdb6a8;--faint:#8f8a7d;--orange:#e18343;--orange-hi:#ffb07a;--lcd:#14211a;--lcd-ink:#a9e8a0;--lcd-dim:#6fa873;--cream:#ddd6c4;--red:#e0573f;--mono:'DM Mono',ui-monospace,Menlo,monospace;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--shell);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{font-family:var(--sans);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow:hidden}
input:not([type=range]):not([type=checkbox]){-webkit-user-select:text;user-select:text}
button,input,select{font:inherit;color:inherit;max-width:100%}
button{touch-action:manipulation;cursor:pointer}
button:focus-visible,select:focus-visible,summary:focus-visible,.ctl:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;opacity:0;pointer-events:none;margin:0;padding:0;border:0}
.machine>*{min-width:0}
.machine{width:100%;height:100dvh;display:flex;flex-direction:column;gap:6px;max-width:560px;margin:auto;padding:calc(env(safe-area-inset-top) + 6px) 8px calc(env(safe-area-inset-bottom) + 8px);background:linear-gradient(#55544e,var(--shell) 30%,var(--shell-lo))}
/* Head */
.unit{display:flex;align-items:center;gap:6px;flex:none;height:36px}.unit>*{flex:none}
.brand{font-size:28px;font-weight:800;letter-spacing:-.09em;line-height:1;color:var(--ink)}.brand span{color:var(--orange)}
.model{font:8px var(--mono);letter-spacing:.16em;color:#d3cec2;margin-left:2px}
.unit .leds{flex:1 1 0;min-width:0;overflow:hidden;justify-content:flex-end}.leds{display:flex;gap:7px;margin-left:auto;font:8px var(--mono);letter-spacing:.06em;color:#d3cec2;white-space:nowrap}
.leds span{display:flex;align-items:center;gap:3px}.leds strong{font-weight:400}
.leds i,.unit-face h2 i{width:6px;height:6px;border-radius:50%;background:#1c1b18;box-shadow:inset 0 1px 1px #000;flex:none}
.leds i.on,.unit-face h2 i.on{background:#ff8a3d;box-shadow:0 0 7px #ff8939}
.hw,.pill,.tkey,.bank,.seg-row button,.modes button,.strip-keys button,.stepper-row button{border:1px solid #2a2925;border-radius:4px;background:linear-gradient(var(--key-hi),var(--key-lo));box-shadow:0 2px 0 var(--edge),inset 0 1px 0 #54524a;color:#e3ddcf;font:500 10px var(--mono);letter-spacing:.04em}
.hw:active,.pill:active,.tkey:active,.bank:active,.seg-row button:active,.strip-keys button:active,.stepper-row button:active{transform:translateY(1px);box-shadow:0 1px 0 var(--edge)}
button:disabled{opacity:.38}
.hw{height:32px;min-width:32px;padding:0 6px;font-size:13px}#stop{font-size:9px;color:#f0a58f}
.round{width:32px;height:32px;border-radius:50%;background:none;border:1px solid #6b6960;color:#ece7dc;font:500 12px var(--mono)}
/* Display */
.lcd{flex:none;display:flex;gap:6px;padding:7px 8px;border-radius:7px;background:var(--lcd);border:3px solid #24241f;box-shadow:inset 0 0 0 1px #4e6b51,inset 0 0 26px #0b130e;color:var(--lcd-ink);font-family:var(--mono);background-image:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px)}
.lcd-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lcd-line{display:flex;justify-content:space-between;gap:10px;font-size:9.5px;letter-spacing:.07em;color:var(--lcd-dim);min-height:13px}
.lcd-line>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#status{flex:1}#voices{flex:none}#clip{flex:none;color:#ff967f}#clip:empty{display:none}
.lcd output{flex:none;font:inherit}
body:not([data-tab=song]) #songReadout,body[data-tab=song] #seqReadout{display:none}
.lcd h1{font:500 21px/1.15 var(--mono);margin:1px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 9px #a9e8a055;letter-spacing:.01em;text-transform:uppercase}
#info{font-size:9.5px;letter-spacing:.05em;color:var(--lcd-dim);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.lcd-peak{width:9px;flex:none;border:1px solid #2f4a35;border-radius:2px;display:flex;align-items:flex-end;overflow:hidden;background:#0d1610}
#lcdMeter{display:block;width:100%;height:0;background:linear-gradient(0deg,#6fcf72 0 70%,#d9d36a 85%,#ff7a5a);transition:height 70ms linear}
/* Mode keys */
.modes{display:flex;gap:4px;flex:none}
.modes button{flex:1;min-width:0;height:34px;padding:0 2px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px}
.modes button::before{content:'';width:5px;height:5px;border-radius:50%;background:#1c1b18;box-shadow:inset 0 1px 1px #000;flex:none}
.modes button.active{color:#fff1de;transform:translateY(1px);box-shadow:0 1px 0 var(--edge),inset 0 1px 0 #66635a;background:linear-gradient(#47453f,#393731)}
.modes button.active::before{background:#ff8a3d;box-shadow:0 0 7px #ff8939}
/* Deck */
.machine,.deck,.transport,.performance{position:relative}
.deck{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--deck);border:1px solid #151512;border-radius:8px;padding:9px;box-shadow:inset 0 2px 8px #0008}
.tab-panel{display:none;flex-direction:column;gap:9px;min-height:100%}
body[data-tab=seq] [data-panel=seq],body[data-tab=sound] [data-panel=sound],body[data-tab=mix] [data-panel=mix],body[data-tab=song] [data-panel=song],body[data-tab=fx] [data-panel=fx],body[data-tab=project] [data-panel=project]{display:flex}
.tab-panel[hidden]{display:none!important}.tab-panel>*{min-width:0}
.row{display:flex;gap:5px;align-items:stretch;min-width:0}.row.wrap{flex-wrap:wrap}.row>select{flex:1;min-width:0}.grow{flex:1;min-width:0}
.pill{min-height:36px;padding:0 9px;flex:1 1 auto;white-space:nowrap}
.pill.danger,.danger{color:#ef9a85}.pill.primary,.pill.active{color:#fff1de;border-color:var(--orange);background:linear-gradient(#a8622f,#8d4f24)}
select,.field input,dialog input{min-height:36px;border:1px solid #47443c;border-radius:4px;background:#2a2925;color:var(--ink);font:500 11px var(--mono);padding:0 8px}
.field,dialog label{display:grid;gap:4px;font:9px var(--mono);letter-spacing:.06em;color:var(--dim)}.field input{font-size:16px;width:100%}
.hint{margin:0;font:10px/1.5 var(--mono);color:var(--dim)}.hint a{color:var(--orange-hi)}
.lane{margin:0;font:10px var(--mono);letter-spacing:.04em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap{font:8.5px var(--mono);letter-spacing:.07em;color:var(--dim);white-space:nowrap}
details{border-top:1px solid #33322c;padding-top:2px}summary{min-height:32px;display:flex;align-items:center;cursor:pointer;font:9.5px var(--mono);letter-spacing:.06em;color:var(--orange-hi);list-style:none}summary::-webkit-details-marker{display:none}summary::before{content:'+';margin-right:7px;font-size:14px}details[open]>summary::before{content:'−'}details[open]{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding-bottom:6px}
#songTools>summary,#projectTools>summary{display:none}#songTools,#projectTools{border:0;padding:0}
.toggle{display:flex;flex:1 1 auto;min-height:36px;cursor:pointer;position:relative}.toggle span{display:flex;align-items:center;justify-content:center;width:100%;padding:0 9px;border:1px solid #2a2925;border-radius:4px;background:linear-gradient(var(--key-hi),var(--key-lo));box-shadow:0 2px 0 var(--edge),inset 0 1px 0 #54524a;font:500 10px var(--mono);color:#e3ddcf}.toggle input:checked+span{color:#fff1de;border-color:var(--orange);background:linear-gradient(#a8622f,#8d4f24)}.toggle.wide{grid-column:1/-1}
/* Knobs */
.rack-row{display:flex;gap:4px;justify-content:space-around;align-items:flex-start;min-width:0}
.ctl{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;touch-action:none;cursor:ns-resize;flex:1 1 0;min-width:0;border-radius:6px;padding:2px 0;outline-offset:0}
.ctl output{font:9.5px var(--mono);color:var(--lcd-ink);background:#10160f;border:1px solid #2b3a2c;border-radius:3px;padding:1px 4px;min-width:40px;text-align:center;white-space:nowrap;line-height:1.35}
.ctl.dragging output{color:#fff;border-color:var(--orange)}
.dial{--size:52px;width:var(--size);height:var(--size);border-radius:50%;position:relative;background:conic-gradient(from 225deg,#2a2925 0 270deg,transparent 270deg);display:grid;place-items:center}
.dial::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 225deg,transparent 0 calc(var(--lo)*270deg),var(--orange) calc(var(--lo)*270deg) calc(var(--hi)*270deg),transparent calc(var(--hi)*270deg));-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%)}
.ctl.accent .dial::before{background:conic-gradient(from 225deg,transparent 0 calc(var(--lo)*270deg),#7cc8b4 calc(var(--lo)*270deg) calc(var(--hi)*270deg),transparent calc(var(--hi)*270deg))}
.cap-top{width:74%;height:74%;border-radius:50%;background:radial-gradient(circle at 38% 30%,#6a675e,#34332e 58%,#232320);box-shadow:0 3px 5px #000a,inset 0 1px 0 #8a877c,0 0 0 1px #111;position:relative;transform:rotate(calc(-135deg + var(--n)*270deg))}
.cap-top::after{content:'';position:absolute;left:50%;top:6%;width:2.5px;height:32%;margin-left:-1.25px;border-radius:2px;background:#f5ecdc}
.ctl.dragging .cap-top{box-shadow:0 3px 5px #000a,inset 0 1px 0 #8a877c,0 0 0 1px var(--orange)}
/* Faders */
.ctl-fader{cursor:ns-resize}.ctl-fader .rail{width:32px;height:112px;position:relative;border-radius:4px;background:linear-gradient(90deg,#141411,#262520 50%,#141411);box-shadow:inset 0 0 0 1px #000,inset 0 2px 4px #000}
.ctl-fader .rail::before{content:'';position:absolute;left:50%;top:7px;bottom:7px;width:2px;margin-left:-1px;background:#000}
.ctl-fader .fill{position:absolute;left:50%;bottom:7px;width:2px;margin-left:-1px;height:calc(var(--n)*(100% - 14px));background:var(--orange)}
.ctl-fader .thumb{position:absolute;left:3px;right:3px;height:22px;bottom:calc(var(--n)*(100% - 22px));border-radius:3px;background:linear-gradient(#77746a,#4b4942 45%,#2e2d29 50%,#5a584f);box-shadow:0 2px 3px #000b,inset 0 1px 0 #9a978c}
.ctl-fader .thumb::after{content:'';position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;background:#f5ecdc}
.ctl-hfader{flex-direction:row;gap:8px;cursor:ew-resize;width:100%}.ctl-hfader .rail{flex:1;height:26px;position:relative;border-radius:4px;background:#17170f;box-shadow:inset 0 0 0 1px #000,inset 0 2px 3px #000}.ctl-hfader .fill{position:absolute;left:5px;top:50%;height:3px;margin-top:-1.5px;width:calc(var(--n)*(100% - 10px));background:var(--orange)}.ctl-hfader .thumb{position:absolute;top:2px;bottom:2px;width:24px;left:calc(var(--n)*(100% - 24px));border-radius:3px;background:linear-gradient(90deg,#5a584f,#2e2d29 50%,#77746a);box-shadow:0 1px 3px #000b}.ctl-hfader .thumb::after{content:'';position:absolute;top:3px;bottom:3px;left:50%;width:2px;margin-left:-1px;background:#f5ecdc}
.faders{align-items:flex-end}.fader-side{flex:1.5 1 0;display:grid;grid-template-columns:1fr 1fr;gap:4px;min-width:0}.fader-side .toggle{grid-column:1/-1}.fader-side .dial{--size:44px}
.seg{flex:1 1 auto;display:grid;gap:3px;min-width:0}.seg-line{align-items:flex-end;flex-wrap:wrap}.seg-row{display:flex;gap:3px}.seg-row button{flex:1;min-height:32px;padding:0 6px;white-space:nowrap;min-width:0}.seg-row button.active{color:#20201b;background:linear-gradient(#ece5d3,var(--cream));border-color:#a9a18c;box-shadow:0 1px 0 var(--edge)}
.stepper{display:grid;gap:3px;min-width:0;flex:1}.stepper-row{display:flex;gap:2px;align-items:stretch}.stepper-row button{width:26px;font-size:15px;flex:none}.stepper-row output{flex:1;min-width:0;display:grid;place-items:center;background:#10160f;border:1px solid #2b3a2c;border-radius:3px;color:var(--lcd-ink);font:500 13px var(--mono);min-height:30px;cursor:text}
/* Steps */
#seqGrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
#seqGrid button{min-width:0;aspect-ratio:1/1.05;padding:0 0 3px;display:flex;align-items:flex-end;justify-content:center;border:1px solid #33322c;border-radius:4px;background:linear-gradient(#2e2d28,#242420);color:#7f7a6d;font:9px var(--mono)}
#seqGrid button.alt{background:linear-gradient(#272622,#1f1f1b)}
#seqGrid button.on{background:linear-gradient(#ec974e,#cc7433);border-color:#f0ab6e;color:#3a1f0b;box-shadow:0 0 8px #e1834355}
#seqGrid button.playhead{outline:2px solid var(--lcd-ink);outline-offset:-2px}#seqGrid button.offgrid{border-style:dashed}
/* Piano roll */
.roll-tools{overflow-x:auto;scrollbar-width:none}.roll-tools::-webkit-scrollbar{display:none}.roll-tools>*{flex:none}#rollOctave{min-width:64px;flex:none}.roll-tools .toggle{flex:none}
#rollPanel{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
#rollViewport{flex:1;min-height:220px;height:clamp(220px,42dvh,520px);overflow:auto;border:1px solid #47443c;border-radius:4px;overscroll-behavior:contain;background:#1a1a17}
#rollGrid{position:relative;height:576px;touch-action:pan-x pan-y;background:repeating-linear-gradient(0deg,transparent 0 23px,#34332c 23px 24px),repeating-linear-gradient(90deg,#1e1e1a 0 23px,#2a2924 23px 24px,#1e1e1a 24px 47px,#2a2924 47px 48px,#1e1e1a 48px 71px,#2a2924 71px 72px,#1e1e1a 72px 95px,#514d44 95px 96px);background-position:36px 0}
.roll-key{position:absolute;left:0;width:36px;height:24px;font:9px/24px var(--mono);text-align:center;pointer-events:none;z-index:1;color:#e7e0cf}
#rollGrid .roll-note{position:absolute;min-height:20px;height:20px;min-width:16px;padding:1px 13px 1px 3px;border:1px solid #f0ab6e;border-radius:3px;background:linear-gradient(#e18343,#b5642c);color:#2b1608;font:500 9px var(--mono);overflow:hidden;text-align:left;touch-action:none;box-shadow:0 1px 3px #0009}
#rollGrid .roll-note.selected{outline:2px solid var(--lcd-ink);z-index:2}
.roll-resize{position:absolute;right:0;top:0;width:14px;height:100%;text-align:center;background:#0003;cursor:ew-resize;line-height:18px}
/* Sound */
.wave-box{position:relative;touch-action:none;--s:0;--e:1;border-radius:4px;overflow:hidden;border:1px solid #2b3a2c;cursor:ew-resize}
canvas{display:block;width:100%;height:88px;background:#17201a}
.shade{position:absolute;top:0;bottom:0;background:#0009;pointer-events:none}.shade-l{left:0;width:calc(var(--s)*100%)}.shade-r{right:0;width:calc((1 - var(--e))*100%)}
.handle{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--orange);pointer-events:none}.handle::after{content:'';position:absolute;top:0;left:-5px;width:12px;height:12px;background:var(--orange);clip-path:polygon(0 0,100% 0,50% 100%)}.handle-s{left:calc(var(--s)*100%)}.handle-e{left:calc(var(--e)*100%)}
.controls{display:grid;gap:9px}
/* Console */
.strips{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;overscroll-behavior:contain;scrollbar-width:thin}
.strip{flex:0 0 74px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 3px;border:1px solid #33322c;border-radius:6px;background:linear-gradient(#2a2925,#212119)}
.strip.selected{border-color:var(--orange);box-shadow:inset 0 0 0 1px #e1834355}
.strip-name{width:100%;min-height:26px;background:#10160f;border:1px solid #2b3a2c;border-radius:3px;color:var(--lcd-ink);font:9px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.strip .dial{--size:40px}.strip .ctl{flex:none;width:100%}.strip .ctl output{min-width:0;width:100%;font-size:8.5px}
.strip-keys{display:flex;gap:3px;width:100%}.strip-keys button{flex:1;min-height:26px;padding:0}.strip-keys button.on{color:#201f1a;background:#eeb26f}.strip-keys button:nth-child(2).on{background:#a9e8a0}
.strip .ctl-fader .rail{height:100px;width:38px}.strip-meter{position:absolute;right:2px;bottom:6px;top:6px;width:3px;border-radius:1px;background:linear-gradient(0deg,#6fcf72 calc(var(--m,0)*100%),#111 calc(var(--m,0)*100%));transition:--m 60ms}
.master-line{padding:2px 0}
/* Rack units */
.unit-face{position:relative;padding:8px 8px 9px;border-radius:6px;background:linear-gradient(#33322c,#292821);border:1px solid #111;box-shadow:inset 0 1px 0 #4d4b42,0 2px 4px #0007;display:grid;gap:7px}
.unit-face::before,.unit-face::after{content:'';position:absolute;top:7px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a877b,#28271f);box-shadow:0 0 0 1px #111}.unit-face::before{left:5px}.unit-face::after{right:5px}
.unit-face h2{display:flex;align-items:center;gap:6px;margin:0;padding:0 11px;font:800 11px var(--sans);letter-spacing:.14em;color:var(--ink)}.unit-face h2 span{margin-left:auto;font:400 9.5px var(--mono);letter-spacing:.03em;color:var(--lcd-ink)}
.reverb-face{background:linear-gradient(#35413a,#28312b)}.delay-face{background:linear-gradient(#433a2d,#322a20)}.master-face{background:linear-gradient(#3a3a3a,#2b2b2a)}
#fxPing,#fxDubPing{flex:0 0 82px;align-self:center;font-size:9px;padding:0 4px;min-height:44px;white-space:normal}
/* Song */
.song-wrap .song,.project{display:flex;flex-direction:column;gap:8px}
#songViewport{height:clamp(170px,36dvh,480px);overflow:auto;overscroll-behavior:contain;border:1px solid #47443c;border-radius:4px;background:#1a1a17}
#songGrid{position:relative;min-height:100px;touch-action:pan-x pan-y}
.song-ruler{position:sticky;top:0;height:24px;background:#2a2925;z-index:5;font:9px/24px var(--mono);color:var(--dim)}.song-ruler span{position:absolute;pointer-events:none}
.song-row{position:relative;height:58px;border-bottom:1px solid #34332c;background:repeating-linear-gradient(90deg,#1e1e1a 0 calc(100% - 1px),#34332c calc(100% - 1px) 100%);background-position:80px 0}
.song-track-label{position:sticky;left:0;z-index:4;width:80px;height:58px;border:0;border-right:1px solid #47443c;border-radius:0;background:#2a2925;font:9px var(--mono);padding:4px;overflow:hidden;overflow-wrap:anywhere;color:var(--ink)}.song-track-label.active{color:var(--orange-hi)}
#songGrid .song-clip{position:absolute;top:5px;min-height:48px;height:48px;background:linear-gradient(#c4713a,#9b552c);border:1px solid #e18343;border-radius:4px;text-align:left;padding:5px 16px 5px 5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;touch-action:none;z-index:2;color:#fff1de;font:500 9px var(--mono)}
#songGrid .song-clip.selected{outline:2px solid var(--lcd-ink);z-index:3}#songGrid .song-clip.audio-clip{background:linear-gradient(#478a84,#386c67);border-color:#82b3aa}
.song-resize{position:absolute;right:0;top:0;width:16px;height:100%;background:#0004;text-align:center;line-height:46px}
#songPlayhead{position:absolute;top:24px;bottom:0;width:2px;min-height:58px;background:var(--lcd-ink);pointer-events:none;z-index:3}
#songExports a{font:10px var(--mono);color:var(--orange-hi);overflow-wrap:anywhere;padding:10px 0}#songExports .actions{display:flex;gap:5px;flex-wrap:wrap}#songExports button{min-height:36px;background:var(--key-lo);border:1px solid #47443c;border-radius:4px;font:10px var(--mono)}
/* Transport */
.transport{flex:none;display:flex;gap:4px;align-items:stretch}
.tkey{flex:1 1 0;min-width:0;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:8.5px;padding:0}
.tkey::before{content:'';display:block}.tkey.stop::before{width:13px;height:13px;background:#e8e2d3}.tkey.play::before{width:0;height:0;border-left:14px solid #efe9da;border-top:8px solid transparent;border-bottom:8px solid transparent}.tkey.rec::before{width:15px;height:15px;border-radius:50%;background:var(--red)}
.tkey.active{background:linear-gradient(#47453f,#393731);box-shadow:0 1px 0 var(--edge);transform:translateY(1px)}.tkey.play.active::before{border-left-color:#8ef08a;filter:drop-shadow(0 0 5px #8ef08a)}.tkey.rec.active::before{box-shadow:0 0 10px var(--red)}
body:not([data-tab=song]) #songPlay,body:not([data-tab=song]) #songStop,body[data-tab=song] #seqPlay,body[data-tab=song] #seqStop,body[data-tab=song] #seqRec{display:none}
.transport .stepper{flex:1.7 1 0;align-content:center}.transport .stepper .cap{text-align:center}.transport .stepper-row output{font-size:16px;min-height:34px}.transport .stepper-row button{width:22px}
.transport .ctl{flex:0 0 50px}.transport .dial{--size:32px}.transport .ctl output{min-width:0;font-size:8px;padding:0 2px}.transport .ctl .cap{font-size:7.5px;order:-1}
.cream{flex:0 0 42px;border:1px solid #a9a18c;border-radius:4px;background:linear-gradient(#ece5d3,var(--cream));box-shadow:0 2px 0 #8b8472;color:#2a2820;font:500 9px var(--mono)}.cream:active{transform:translateY(1px);box-shadow:0 1px 0 #8b8472}
/* Pads */
.performance{flex:none;display:grid;gap:5px}
.perform{display:flex;gap:3px;align-items:stretch}.perform>*{min-height:32px}.perform .pill{flex:0 0 auto;padding:0 7px;font-size:9px;min-height:32px}.perform select{min-height:32px;font-size:10px;padding:0 3px}#octave{flex:0 0 44px}#trackSelect{flex:1 1 0;min-width:0}
.bank{flex:0 0 28px;font-size:11px;padding:0;position:relative}.bank.loaded::after{content:'';position:absolute;top:3px;right:3px;width:4px;height:4px;border-radius:50%;background:var(--orange)}.bank.active{color:#20201b;background:linear-gradient(#ece5d3,var(--cream));border-color:#a9a18c;box-shadow:0 1px 0 var(--edge)}
#pads{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
#pads button{position:relative;height:clamp(50px,8dvh,72px);min-width:0;padding:5px 5px;border:1px solid #1f1e1b;border-radius:7px;background:radial-gradient(circle at 50% 35%,#3a3933,#2b2a26 72%);box-shadow:0 3px 0 #1c1b18,inset 0 1px 0 #55534a;text-align:left;color:var(--ink);touch-action:none;display:flex;flex-direction:column;justify-content:space-between}
#pads button.selected{outline:2px solid var(--orange);outline-offset:-1px}#pads button.playing{background:radial-gradient(circle,#f09a58,#ae632f);transform:translateY(2px);box-shadow:0 1px 0 #1c1b18}
#pads small{font:500 10px var(--mono);color:var(--orange)}#pads b{font:700 9.5px var(--sans);letter-spacing:.02em;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
#keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}#keys button{min-height:clamp(62px,9.6dvh,84px);border:1px solid #a9a18c;border-radius:4px;background:linear-gradient(#ece5d3,var(--cream));color:#20201c;font:500 10px var(--mono);touch-action:none}#keys button.sharp{background:linear-gradient(#3b3a35,#262520);border-color:#111;color:#eee6d8}#keys button.playing{background:#e18343;color:#fff}
.pads-off #pads,.pads-off #keys{display:none!important}
body.audio-track .perform>.bank,body.audio-track #mode,body.audio-track #octave,body.audio-track #pads,body.audio-track #keys{display:none!important}
/* Dialogs */
dialog{max-width:min(92vw,440px);border:1px solid #746b5d;border-radius:8px;background:#242420;color:var(--ink);padding:14px}dialog::backdrop{background:#000a}dialog h2{font:800 14px var(--sans);letter-spacing:.08em;margin:0 0 10px}
dialog>*+*{margin-top:9px}.dialog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}dialog input,dialog select{width:100%;font-size:16px}
#valueDialog form{display:grid;gap:10px;min-width:220px}#valueDialog .actions{display:flex;gap:6px}#valueDialog button{flex:1;min-height:40px;border:1px solid #47443c;border-radius:4px;background:var(--key-lo);font:500 11px var(--mono)}#valueDialog button.active{border-color:var(--orange);color:#fff1de;background:#8d4f24}#valueDialog input{min-height:44px}
/* Wider screens keep the same machine, with room to breathe. */
@media(max-height:700px){.lcd #info{display:none}.lcd h1{font-size:17px}#pads button{height:52px}.tkey{min-height:42px}}
@media(max-width:430px){.model{display:none}}
@media(max-width:370px){.dial{--size:44px}.leds span:first-child{display:none}.model{display:none}}
/* Phone on its side: editor on the left, the instrument on the right. */
@media(orientation:landscape) and (max-height:520px){.machine{max-width:none;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);padding-left:calc(env(safe-area-inset-left) + 8px);padding-right:calc(env(safe-area-inset-right) + 8px)}.unit{grid-area:1/1}.modes{grid-area:2/1}.deck{grid-area:3/1/5/1}.lcd{grid-area:1/2/2/2;padding:3px 7px}.lcd h1{font-size:14px}.lcd #info{display:none}.transport{grid-area:2/2/3/2}.tkey{min-height:36px}.transport .stepper .cap,.transport .ctl .cap,.transport .ctl output{display:none}.performance{grid-area:3/2/5/2;align-content:start}#pads button{height:clamp(44px,18dvh,70px)}.pads-off #pads{display:grid!important}body.pads-off #keys:not([hidden]){display:grid!important}.perform .pill,.perform select,.bank{min-height:28px}}
/* Regression scripts drive every panel at once with ?panels=all. */
.all-panels{overflow:auto}.all-panels .machine{height:auto}.all-panels .deck{overflow:visible;flex:none}.all-panels .tab-panel{display:flex}.all-panels .tab-panel[hidden]{display:none!important}.all-panels .sr{position:static!important;width:auto!important;height:auto!important;opacity:1;pointer-events:auto}.all-panels #songPlay,.all-panels #songStop,.all-panels #seqPlay,.all-panels #seqStop,.all-panels #seqRec,.all-panels #songReadout,.all-panels #seqReadout{display:flex!important}
.all-panels #songTools>summary,.all-panels #projectTools>summary{display:flex}
.synth-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 3px}.synth-grid label{display:grid;gap:3px;font:8.5px var(--mono);color:var(--dim)}.synth-grid .dial{--size:42px}

/* Sixteen pads at once: a 4x4 block where the screen has height for it, otherwise two rows of eight. */

#pads small{line-height:1}
/* Console layers */
.strip{flex-basis:88px}.strip .dial{--size:34px}.strip-layer{display:none;width:100%;grid-template-columns:1fr 1fr;gap:3px}.strips[data-layer=send] .strip-layer[data-layer=send],.strips[data-layer=eq] .strip-layer[data-layer=eq],.strips[data-layer=chan] .strip-layer[data-layer=chan]{display:grid}
.strip .cap{font-size:8px}.strip-layer .ctl output{font-size:8px;padding:1px 0}.send-cell{display:grid;gap:2px;min-width:0}
.pre-key{min-height:20px;padding:0;border:1px solid #2a2925;border-radius:3px;background:#1d1c18;color:#8f8a7b;font:500 8px var(--mono)}.pre-key.on{color:#20201b;background:#7cc8b4}
.master-line{align-items:center}.lufs-read{flex:none;min-width:84px;text-align:right;font:9.5px var(--mono);color:var(--lcd-ink)}
.grow{flex:1;min-width:0}#fxSync,#fxDubSync{flex-wrap:wrap}#fxSync button,#fxDubSync button{flex:1 0 17%;font-size:9px}
/* Automation lane */
.song-lane{position:relative;height:68px;background:#14170f;border-top:1px solid #33322c;border-bottom:1px solid #33322c;touch-action:none;cursor:crosshair}
.song-lane svg{position:absolute;inset:0;pointer-events:none}.song-lane polyline{fill:none;stroke:#7cc8b4;stroke-width:2}
.song-lane-label{position:sticky;left:0;z-index:2;display:flex;align-items:center;justify-content:center;width:80px;height:100%;background:#20201b;color:#7cc8b4;font:9px var(--mono)}
.lane-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#7cc8b4;border:1px solid #10160f;pointer-events:none}
/* Polish */
#patternBank{flex:1.7 1 0}.sequencer>.row:first-child .pill{flex:1 1 0;padding:0 4px}
.seq-view,.seq-grid,.seq-size{flex-wrap:nowrap}.seq-grid .seg-row{gap:2px}.seq-grid .seg-row button{padding:0 1px;font-size:9.5px;letter-spacing:0}.seq-size .seg{flex:1.2 1 0}.seq-size .stepper{flex:1 1 0;min-width:0}.seq-view .seg-row button{padding:0 3px}
#pads button.empty{background:radial-gradient(circle at 50% 35%,#302f2a,#262521 72%)}#pads button.empty small{color:#8d6b52}#pads button.empty b{visibility:hidden}
#pads b{font-size:8.5px;line-height:1.05;white-space:normal;overflow-wrap:anywhere;max-height:2.1em}
@media(min-height:760px) and (orientation:portrait){#pads b{font-size:9.5px;white-space:nowrap;max-height:none}body[data-tab=sound] #pads{grid-template-columns:repeat(6,minmax(0,1fr))}body[data-tab=sound] #pads button{height:52px;padding:5px}body[data-tab=sound] #pads b{font-size:8.5px;white-space:normal;max-height:2.1em}}
.pre-key{min-height:24px}
.master-line{position:sticky;bottom:-9px;z-index:6;margin:0 -9px;padding:7px 9px 9px;background:linear-gradient(#262621,#1d1d1a);border-top:1px solid #33322c}.mixer>.row.wrap{order:1}.mixer>.field{order:2}.mixer>.master-line{order:3;margin-top:auto}
.lane-line{flex-wrap:nowrap}.lane-line .seg{flex:1 1 0}.lane-line .seg-row{gap:2px}.lane-line .seg-row button{padding:0 1px;font-size:9px;letter-spacing:0}#songLaneClear{flex:0 0 50px;min-height:32px;padding:0;font-size:9px;align-self:flex-end}
.song-lane{background-color:#14170f;background-image:repeating-linear-gradient(90deg,#1e1e1a 0 calc(100% - 1px),#34332c calc(100% - 1px) 100%);background-position:80px 0}
.master-line{box-shadow:0 9px 0 #1d1d1a}
/* Swing slider and triplet steps */
.swing-line{flex:none;display:none;align-items:center;gap:6px}body[data-tab=seq] .swing-line,body[data-tab=song] .swing-line,.all-panels .swing-line{display:flex}.swing-line .ctl-hfader{flex:1 1 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center}.swing-line .ctl-hfader .cap{grid-column:1;grid-row:1}.swing-line .ctl-hfader .rail{grid-column:2;grid-row:1;height:28px}.swing-line .ctl-hfader output{grid-column:3;grid-row:1;min-width:46px}.swing-line .seg{flex:0 0 92px}.swing-line .seg-row button{min-height:28px;padding:0 2px;font-size:9.5px}
#seqGrid.triplet{grid-template-columns:repeat(6,minmax(0,1fr))}#seqGrid button{aspect-ratio:auto;min-height:40px}
#quantDialog{width:min(92vw,380px)}#quantDialog>*{margin-top:10px}#quantDialog .ctl-hfader{display:grid;grid-template-columns:auto 1fr auto;align-items:center}#quantDialog .ctl-hfader .cap{grid-column:1;grid-row:1}#quantDialog .ctl-hfader .rail{grid-column:2;grid-row:1;height:32px}#quantDialog .ctl-hfader output{grid-column:3;grid-row:1}#quantDialog .seg-row button{padding:0 1px}
/* Piano roll fills the deck */
body.roll-editing .sequencer{height:100%;flex-wrap:nowrap;gap:6px}body.roll-editing .seq-size,body.roll-editing #seqLane,body.roll-editing .sequencer>details{display:none}body.roll-editing .sequencer>.rack-row{flex:none;justify-content:flex-start;gap:14px}body.roll-editing .sequencer>.rack-row .ctl{flex:0 0 70px}body.roll-editing .sequencer>.rack-row .dial{--size:34px}body.roll-editing .sequencer>.rack-row .ctl:has(#seqPitch){display:none}
#rollPanel{min-height:0}#rollViewport{flex:1 1 0;min-height:180px;height:auto}.all-panels #rollViewport{flex:none;height:578px}
#rollPad{flex:none;width:112px;min-height:36px}
#rollGrid{background-image:linear-gradient(90deg,#5d5a4f 2px,transparent 2px),linear-gradient(90deg,#46443b 1px,transparent 1px),linear-gradient(90deg,#2e2d27 1px,transparent 1px),repeating-linear-gradient(0deg,transparent 0 23px,#2c2b25 23px 24px);background-size:calc(var(--bw)*4) 100%,var(--bw) 100%,var(--gs) 100%,100% 24px;background-position:36px 0;background-color:#1e1e1a}
.roll-band{position:absolute;left:36px;right:0;height:24px;pointer-events:none}.roll-band.sharp{background:#0000002e}.roll-band.octave{border-bottom:1px solid #514d44}
.roll-keys{position:sticky;left:0;width:36px;height:576px;z-index:4;float:left;background:#2a2925}.roll-keys .roll-key{position:absolute;left:0;width:36px;height:24px;padding:0;border:0;border-bottom:1px solid #1a1a17;border-radius:0;background:#6a6455;color:#f2ede1;font:9px/24px var(--mono);text-align:center;pointer-events:auto;touch-action:pan-x pan-y}.roll-keys .roll-key.sharp{background:#2f2e28;color:#a9a394}.roll-keys .roll-key:active{background:var(--orange);color:#20201b}
.roll-ruler{position:sticky;top:0;height:0;z-index:3;pointer-events:none}.roll-ruler span{position:absolute;top:1px;padding:0 3px;border-radius:2px;font:8.5px var(--mono);color:var(--faint);background:#1e1e1acc}.roll-ruler span.bar{color:var(--orange-hi)}
.roll-ghost{position:absolute;height:20px;border-radius:3px;background:#7cc8b42e;border:1px solid #7cc8b444;pointer-events:none}
.roll-head{position:absolute;top:0;width:2px;height:576px;background:var(--lcd-ink);pointer-events:none;z-index:3;box-shadow:0 0 6px #a9e8a088}
#rollGrid .roll-note.holding{animation:note-hold .5s linear forwards}@keyframes note-hold{from{filter:none}to{filter:brightness(.45) saturate(.4);transform:scale(.94)}}
#rollSummary.warn{color:#ff967f}
/* Twelve pads: 4x3 where there is height, 6x2 otherwise. */
@media(min-height:720px) and (orientation:portrait){body:not([data-tab=sound]) #pads{grid-template-columns:repeat(4,minmax(0,1fr))}body:not([data-tab=sound]) #pads button{height:clamp(52px,8.2dvh,84px);padding:6px 8px}}
.bank.loaded-other::before{content:'';position:absolute;top:3px;left:3px;width:4px;height:4px;border-radius:50%;background:#8d6b52}
/* Transport: one low row of keys. */
.transport{gap:3px;align-items:center}.tkey{min-height:36px!important;height:36px;flex:0 0 46px;font-size:0;gap:0}.tkey.stop::before{width:11px;height:11px}.tkey.play::before{border-left-width:12px;border-top-width:7px;border-bottom-width:7px}.tkey.rec::before{width:12px;height:12px}
.transport .stepper{flex:1 1 0;display:block}.transport .stepper .cap{display:none}.transport .stepper-row output{font-size:15px;min-height:34px;height:34px}.transport .stepper-row button{width:32px}
.cream{flex:0 0 40px;height:36px}
body[data-tab=song] .tkey{flex-basis:60px}
.swing-line{height:28px}.swing-line .ctl-hfader .cap{font-size:8px}
@media(orientation:landscape) and (max-height:520px){.tkey{min-height:32px!important;height:32px}.swing-line{grid-area:auto}}
body.roll-editing .swing-line,body.roll-editing .seq-grid .cap{display:none!important}.all-panels.roll-editing .swing-line{display:flex!important}
.roll-tools,#rollSummary{flex:none}#rollPanel{flex:1 0 auto}
@media(max-height:700px){body.roll-editing .sequencer>.row:first-child{display:none}.sequencer .seg-line .cap{display:none}#seqGrid button{min-height:34px}}
@media(orientation:landscape) and (max-height:520px){.swing-line{grid-area:3/2}.performance{grid-area:4/2}}
/* Piano roll, full screen */
#rollFull{flex:none;padding:0 8px}
#rollGrid{height:calc(var(--row,24px)*24);background-image:linear-gradient(90deg,#5d5a4f 2px,transparent 2px),linear-gradient(90deg,#46443b 1px,transparent 1px),linear-gradient(90deg,#2e2d27 1px,transparent 1px),linear-gradient(0deg,#2c2b25 1px,transparent 1px);background-size:calc(var(--bw)*4) 100%,var(--bw) 100%,var(--gs) 100%,100% var(--row,24px)}
.roll-band{height:var(--row,24px)}.roll-keys{height:calc(var(--row,24px)*24)}.roll-keys .roll-key{height:var(--row,24px);line-height:var(--row,24px)}.roll-head{height:calc(var(--row,24px)*24)}#rollGrid .roll-note,.roll-ghost{height:calc(var(--row,24px) - 4px)}
body.roll-full .unit,body.roll-full .lcd,body.roll-full .modes,body.roll-full .performance,body.roll-full .swing-line,body.roll-full #cancel,body.roll-full .sequencer>:not(#rollPanel),body.roll-full #rollSummary:not(.warn){display:none!important}
body.roll-full .machine{display:flex!important;flex-direction:column;max-width:none;gap:4px}body.roll-full .deck{flex:1 1 0;padding:4px;order:0}body.roll-full .transport{order:1}body.roll-full .sequencer{height:100%}body.roll-full #rollViewport{min-height:0}
.lane-line .seg-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}.lane-line .seg-row button{min-height:28px;font-size:8.5px}
/* CHROM: same size and layout as the kit pads. */
#keys{grid-template-columns:repeat(6,minmax(0,1fr))}#keys button,#keys button.sharp{min-height:0;height:clamp(50px,8dvh,72px);border:1px solid #1f1e1b;border-radius:7px;background:radial-gradient(circle at 50% 35%,#4a4840,#34332d 72%);box-shadow:0 3px 0 #1c1b18,inset 0 1px 0 #55534a;color:var(--ink);font:700 11px var(--mono)}#keys button.sharp{background:radial-gradient(circle at 50% 35%,#2b2a26,#201f1c 72%);color:var(--dim)}#keys button.root{color:var(--orange-hi)}#keys button.playing{background:radial-gradient(circle,#f09a58,#ae632f);color:#fff;transform:translateY(2px);box-shadow:0 1px 0 #1c1b18}
@media(min-height:720px) and (orientation:portrait){body:not([data-tab=sound]) #keys{grid-template-columns:repeat(4,minmax(0,1fr))}body:not([data-tab=sound]) #keys button{height:clamp(52px,8.2dvh,84px)}}