/* DUST workstation layout (2.4.1).
   Phone: the screen is the machine. LCD and mode keys on top, one editor deck in the middle,
   transport, banks and pads docked in the thumb zone. Wide screens: the machine on the left with
   its sliders under the pads, the editor deck on the right. Colours follow classic.css. */

/* Native app behaviour: no zoom, no text selection, no callouts or tap flashes. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;touch-action:pan-x pan-y;overscroll-behavior:none}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;cursor:default}
input:not([type=range]):not([type=checkbox]),textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
canvas,img,a{-webkit-user-drag:none}
button,select,label,input{touch-action:manipulation}
.pad{touch-action:none}
button:focus:not(:focus-visible),select:focus:not(:focus-visible){outline:none}

/* Shared structure */
.workstation{display:grid;position:relative;align-items:stretch}
.workstation>*{min-width:0}
.shell{pointer-events:none}
.unit{grid-area:unit}.display-frame{grid-area:display}.modes{grid-area:modes}.deck{grid-area:deck;min-height:0}
.mix-panel{grid-area:mix}.transport{grid-area:transport}.perform{grid-area:perform}.pads{grid-area:pads}.pad-bottom{grid-area:padfoot}.machine-foot{grid-area:foot}

/* Head: brand, LEDs, history */
.unit{display:flex;align-items:center;gap:10px;padding:0;color:#f2ede1}
.unit-label{display:flex;align-items:baseline;gap:8px;font-size:inherit;letter-spacing:normal;white-space:nowrap}
.unit .brand-mark{font-size:30px;font-weight:800;letter-spacing:-.09em;line-height:1}
.unit-model{font:8px 'DM Mono',monospace;letter-spacing:.14em;color:#d3cec2}
.unit-indicators{margin-left:auto;gap:10px;min-width:0}
.unit-indicators span{white-space:nowrap}
.unit-indicators b{font-weight:normal;max-width:72px;overflow:hidden;text-overflow:ellipsis}
.unit .top-actions{display:flex;align-items:center;gap:5px;color:inherit}
.unit .history-button{min-height:36px;padding:0 10px;border-color:#2f2e2a;background:linear-gradient(#3a3934,#2e2d29);color:#e3ddcf;box-shadow:0 2px 0 #23221f}
.unit .icon-button{width:36px;height:36px;border-color:#6b6960;color:#ece7dc}

/* Mode keys: hardware keys with an LED, like the SP-1200 programming buttons */
.modes{display:flex;gap:5px}
.modes button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:40px;padding:0 4px;border:1px solid #2a2925;border-radius:4px;background:linear-gradient(#3b3a35,#2e2d29);color:#d3cdbf;font:8.5px 'DM Mono',monospace;letter-spacing:.08em;white-space:nowrap;box-shadow:0 2px 0 #22211e,inset 0 1px 0 #5a5850}
.modes button::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:#1c1b18;box-shadow:inset 0 1px 1px #000}
.modes button.active{color:#fff1de;background:linear-gradient(#47453f,#393731);transform:translateY(1px);box-shadow:0 1px 0 #22211e,inset 0 1px 0 #66635a}
.modes button.active::before{background:#ff8a3d;box-shadow:0 0 7px #ff8939}

/* Transport and tempo */
.transport{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto repeat(2,minmax(0,.85fr));gap:6px;align-items:stretch;padding:0}
.transport-button{width:auto;height:auto;min-height:52px;gap:6px}
.tempo-cluster{margin:0;justify-content:center}
.tempo-control button{height:34px}
.tempo-control input{height:34px;font-size:18px}
.transport .utility-button{min-width:0;height:auto;padding:0 4px}
.click-key.active{background:#e18343;border-color:#a5582a;color:#1b1b18;box-shadow:0 0 12px #e1834366}

/* Banks and note repeat */
.perform{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1.7fr) minmax(0,1.15fr);gap:6px;align-items:stretch}
.perform .bank-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0}
.perform .bank-row button{min-width:0;height:40px}
.repeat-key{min-width:0;border:1px solid #292824;border-radius:3px;background:#34332f;color:#d8d4ca;font:8px 'DM Mono',monospace;letter-spacing:.05em;box-shadow:0 2px 0 #272622}
.repeat-key.active{background:#3e3329;border-color:#e18343;color:#ffca9b;box-shadow:0 0 10px #e1834340}
.perform select{height:40px;min-width:0;margin:0;padding:0 4px;font:10px 'DM Mono',monospace}

/* Pads */
.pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.pad{min-height:0}

/* Pad mode and channel control */
.mix-panel .section-title:first-child{padding-top:0}
.performance-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0 0 12px}
.performance-modes button{min-width:0;padding:0 3px;white-space:nowrap}
.mix-panel .fader-panel{border-top:1px solid #57544c}

/* Phone and tablet portrait: a full-screen instrument */
@media (max-width:999px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  html{background:#47463f}
  /* iOS 26 home-screen app whose web view ends a status-bar height above the screen edge (viewport.js): the home
     indicator is outside the visible area, so its bottom padding would only shrink the pads */
  html.short-viewport .workstation{padding-bottom:8px}
  .app{max-width:none;height:100%;padding:0}
  footer,.shell,.pad-bottom,.machine-foot{display:none}
  .audio-unsupported{position:fixed;z-index:20;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 60px)}
  .workstation{box-sizing:border-box;height:100%;height:100dvh;max-width:720px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 6px) calc(env(safe-area-inset-right) + 10px) calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 10px);grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;grid-template-areas:"unit" "display" "modes" "deck" "transport" "perform" "pads";row-gap:7px;background:linear-gradient(180deg,#4f4e48,#47463f);box-shadow:inset 0 1px 0 #8a877d}
  .unit .brand-mark{font-size:26px}
  .unit-model{display:none}
  .unit-indicators{gap:8px;font-size:7px}
  .unit .history-button span{display:none}
  .unit .history-button{min-height:40px;min-width:40px;font-size:15px;padding:0}
  .unit .icon-button{width:40px;height:40px}
  .display-frame{padding:5px;border-width:2px}
  .display{min-height:0;padding:7px 11px 8px}
  .display-main{height:auto;padding:4px 0}
  .display-main strong{font-size:19px}
  .mix-panel{grid-area:deck}
  .mix-panel:not(.active){display:none}
  .deck,.mix-panel{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none;background:#1d1d1a;border:1px solid #121210;border-radius:8px;box-shadow:inset 0 2px 10px #000b,0 1px 0 #6f6c63;padding:12px 12px 16px}
  .deck::-webkit-scrollbar,.mix-panel::-webkit-scrollbar{display:none}
  .pads{grid-auto-rows:clamp(54px,9.4dvh,104px);gap:6px}
  .pad{padding:8px 9px}
  .pad-name{font-size:9px}
  #toast{top:calc(env(safe-area-inset-top) + 58px);bottom:auto}
  /* Deck content: compact, no page-style headings */
  .panel-heading{display:none}
  .control-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .control-grid label{font-size:7.5px}
  .control-grid .stepper,.control-grid select{height:38px;margin-top:5px}
  .stepper button{width:26px;font-size:17px}
  .stepper strong{font-size:13px}
  .control-grid select{padding:0 4px;font-size:10px}
  .sequence-tools{flex-wrap:nowrap;overflow-x:auto;margin:10px -12px 2px;padding:0 12px 2px;scrollbar-width:none;touch-action:pan-x}
  .sequence-tools::-webkit-scrollbar{display:none}
  .sequence-tools .pill{flex:none;padding:10px 11px}
  .step-header{border-top:0;padding:8px 1px 7px;font-size:9px}
  .step-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
  .step{height:46px;font-size:8px;padding-bottom:6px}
  .bar-nav{margin-top:10px}
  .bar-nav button{min-height:36px}
  .event-list{max-height:none}
  .panel-note{margin-top:14px;padding-top:12px}
  .sample-ident{display:flex;margin:0 0 8px}
  .sample-ident span{display:inline;margin:0}
  #waveform{height:clamp(68px,13dvh,140px)}
  .sample-actions{margin:10px 0 14px;gap:6px}
  .sample-actions button{padding:10px}
  .sample-sliders{gap:12px 18px}
  .song-chain{min-height:72px;padding:12px}
  .project-actions{margin:14px 0}
  .mix-panel .fader input{height:clamp(72px,13dvh,120px)}
}
/* Home-screen app: iOS 26 blurs a band under the status bar, so keep the header a little lower */
@media (max-width:999px) and (display-mode:standalone){
  .workstation{padding-top:calc(env(safe-area-inset-top) + 14px)}
}
/* Shorter phones: drop the LCD status line, keep pads playable */
@media (max-width:999px) and (max-height:720px){
  .display-top,.display-bottom{display:none}
  .display{padding:5px 10px}
  .display-main{padding:2px 0}
  .display-main strong{font-size:17px}
  .workstation{row-gap:6px}
  .transport-button{min-height:46px;gap:4px}
  .tempo-cluster label,.tempo-cluster>small{display:none}
  .pads{grid-auto-rows:clamp(50px,8.6dvh,80px)}
  .deck,.mix-panel{padding:10px 10px 14px}
  .control-grid label{font-size:7px}
  .control-grid .stepper,.control-grid select{height:34px;margin-top:3px}
  .sequence-tools{margin:8px -10px 0;padding:0 10px 2px}
  .sequence-tools .pill{padding:8px 10px}
  .step-header{padding:6px 1px 5px}
  .step{height:40px}
}
/* Landscape phones: too short for a fixed instrument, so the page scrolls instead */
@media (max-width:999px) and (max-height:600px){
  html,body{height:auto;overflow:auto}
  .workstation{height:auto;grid-template-rows:none;padding-bottom:calc(env(safe-area-inset-bottom) + 20px)}
  .deck,.mix-panel{overflow:visible}
  .pads{grid-auto-rows:64px}
}

/* Wide screens: machine on the left (sliders under the pads), editor deck on the right */
@media (min-width:1000px){
  .workstation{grid-template-columns:minmax(0,600px) minmax(0,1fr);grid-template-rows:repeat(8,auto) 1fr;grid-template-areas:"unit modes" "display deck" "transport deck" "perform deck" "pads deck" "padfoot deck" "mix deck" "foot deck" ". deck";column-gap:40px;row-gap:14px;padding:28px 0 56px;align-items:start}
  .shell{grid-column:1;grid-row:1/9;align-self:stretch}
  .unit,.display-frame,.transport,.perform,.pads,.pad-bottom,.mix-panel,.machine-foot{margin-inline:22px}
  .unit{margin-top:18px}
  .machine-foot{margin-top:0;margin-bottom:16px}
  .modes{align-self:end}
  .modes .mix-key{display:none}
  .mix-panel{display:block}
  .pads{grid-auto-rows:minmax(88px,auto)}
  .pad-bottom{padding:2px}
  .deck{align-self:start}
}

.hardware-sound{display:grid;gap:12px;margin:16px 0;padding:12px;border:1px solid var(--line,#555348)}
.hardware-sound[hidden]{display:none}
.hardware-sound label{display:grid;gap:6px;font-size:11px;letter-spacing:.06em}
.hardware-sound input[type=range],.hardware-sound select{width:100%;min-height:36px}
.hardware-sound input[type=checkbox]{width:20px;height:20px}
.demo-projects button{display:block;width:100%;min-height:44px;margin:8px 0;text-align:left}

.hardware-sound select{color:#e9e5d9;background:#252724;border:1px solid #56564d;border-radius:3px;font-size:16px;padding:8px}
.demo-projects button{background:#35352f;color:#e9e5d9;border:1px solid #636155;border-radius:4px;padding:10px;font:11px monospace;letter-spacing:.04em}
.demo-projects button:disabled{opacity:.5}

/* RACK: outboard units drawn as rack modules (rack-ui.js) */
.rack-units{display:grid;gap:10px;margin-top:10px}
.rack-unit{position:relative;padding:10px 14px 10px;border:1px solid #121210;border-radius:6px;background:linear-gradient(180deg,#45443e,#383732 55%,#302f2b);box-shadow:inset 0 1px 0 #6d6a61,0 2px 0 #0d0d0b}
.rack-unit::before,.rack-unit::after{content:'';position:absolute;top:9px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8c897f,#3a3934);box-shadow:inset 0 0 0 1px #24231f}
.rack-unit::before{left:4px}.rack-unit::after{right:4px}
.rack-head{display:flex;align-items:center;gap:10px;margin:0 6px 8px}
.rack-title{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.rack-title strong{font:600 15px 'DM Sans',Arial,sans-serif;letter-spacing:.06em;color:#f2ead8}
.rack-title span{font:8px 'DM Mono',monospace;letter-spacing:.12em;color:#b9b3a4}
.rack-power{min-width:46px;min-height:32px;border:1px solid #1a1916;border-radius:4px;background:linear-gradient(#2c2b27,#22211e);color:#8f8a7d;font:9px 'DM Mono',monospace;letter-spacing:.1em;display:flex;align-items:center;justify-content:center;gap:6px}
.rack-power::before{content:'';width:7px;height:7px;border-radius:50%;background:#1c1b18;box-shadow:inset 0 1px 1px #000}
.rack-unit.on .rack-power{color:#fff1de}.rack-unit.on .rack-power::before{background:#ff8a3d;box-shadow:0 0 7px #ff8939}
.rack-remove{width:32px;height:32px;border:1px solid #1a1916;border-radius:4px;background:#26251f;color:#b9b3a4;font-size:16px;line-height:1}
.rack-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px 12px;margin:0 6px}
.rack-control{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 8px;font:8px 'DM Mono',monospace;letter-spacing:.1em;color:#cfc8b8}
.rack-control span{grid-column:1/-1}
.rack-control input[type=range]{width:100%;min-width:0}
.rack-control b{font:500 9px 'DM Mono',monospace;color:#f2ead8;min-width:52px;text-align:right;white-space:nowrap}
.rack-control select,.rack-toggle{grid-column:1/-1;height:32px;border:1px solid #1a1916;border-radius:4px;background:#26251f;color:#f2ead8;font:10px 'DM Mono',monospace}
.rack-toggle.active{color:#ff9a55;box-shadow:inset 0 0 0 1px #8a4a20}
.rack-unit:not(.on) .rack-controls,.rack-unit:not(.on) .rack-sends{opacity:.55}
.rack-sends{margin:10px 6px 0;padding-top:8px;border-top:1px solid #23221e}
.rack-sends-label{display:block;margin-bottom:6px;font:8px 'DM Mono',monospace;letter-spacing:.14em;color:#a9a394}
.rack-send-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 10px}
.rack-send{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;font:8px 'DM Mono',monospace;color:#cfc8b8}
.rack-send input{width:100%;min-width:0}
.rack-send b{font:500 8px 'DM Mono',monospace;color:#f2ead8;min-width:18px;text-align:right}
.rack-send.linked span{color:#ff9a55}
.rack-note{margin:8px 6px 0;font-size:10px;color:#a9a394}
.rack-shop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px;border:1px dashed #57544c;border-radius:6px}
.rack-shop .rack-sends-label{grid-column:1/-1;margin:0}
.rack-add{min-height:40px;border:1px solid #2a2925;border-radius:4px;background:linear-gradient(#3b3a35,#2e2d29);color:#e9e2d0;font:9px 'DM Mono',monospace;letter-spacing:.08em}
@media (max-width:999px){
  .modes{gap:4px}
  .modes button{gap:4px;padding:0 2px;letter-spacing:.04em}
  .modes button::before{width:5px;height:5px}
  .rack-send-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* DEVICE CHECK in Help (2.20) */
.device-check{margin:18px 0;padding-top:14px;border-top:1px solid #514d44}.device-check h3{margin:0 0 4px;font:11px 'DM Mono',monospace;letter-spacing:.08em;color:#edb48a}.device-check p{font-size:12px;margin:0 0 10px}
.device-check-actions{display:flex;gap:8px;flex-wrap:wrap}.device-check-actions .pill{flex:1 1 140px;min-height:44px}
.device-report{display:block;width:100%;margin-top:10px;min-height:170px;padding:9px;border:1px solid #514d44;border-radius:4px;background:#151513;color:#b2dda0;font:10px/1.45 'DM Mono',monospace;resize:vertical;white-space:pre-wrap;-webkit-user-select:text;user-select:text}
.device-report[hidden]{display:none}
/* MY BEATS in PROJECT (2.21) */
.my-beats{margin:0 0 16px}.my-beats h3{margin:0 0 8px;font:11px 'DM Mono',monospace;letter-spacing:.08em;color:#edb48a}
.beat-list{display:grid;gap:6px}.beat{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap;border:1px solid #514d44;border-radius:4px;background:#242420;padding:6px}.beat.open{border-color:#e18343}
.beat-open{flex:1 1 180px;min-height:44px;text-align:left;border:0;background:none;color:#ded9ce;padding:4px 6px}.beat-open strong{display:block;font:11px 'DM Mono',monospace;letter-spacing:.04em;overflow-wrap:anywhere}.beat-open span{display:block;margin-top:3px;font:9px 'DM Mono',monospace;color:#9a9486}.beat-open:disabled{opacity:1;cursor:default}
.beat-tools{display:flex;gap:6px;align-items:center}.beat-tools button{min-height:44px;min-width:44px;padding:6px 10px;border:1px solid #514d44;border-radius:3px;background:#1c1c19;color:#ded9ce;font:9px 'DM Mono',monospace}.beat-tools .danger{color:#e98b78}
/* share row (2.22) */
.share-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0;padding:6px;border:1px solid #e18343;border-radius:4px;background:#242420}.share-row span{flex:1 1 140px;font:10px 'DM Mono',monospace;color:#edb48a;overflow-wrap:anywhere}.share-row button{min-height:44px;padding:6px 12px;border:1px solid #514d44;border-radius:3px;background:#1c1c19;color:#ded9ce;font:9px 'DM Mono',monospace}.share-row[hidden]{display:none}
/* song steps (2.23) */
.song-number{display:flex;gap:8px;align-items:center;margin:0 0 8px;font:10px 'DM Mono',monospace;letter-spacing:.06em;color:#edb48a}.song-number b{min-width:2.2em;text-align:center;font-size:14px;color:#ded9ce}
.song-number button,.song-stepper button{min-width:44px;min-height:44px;border:1px solid #514d44;border-radius:3px;background:#242420;color:#ded9ce;font:14px 'DM Mono',monospace}
.song-step-tools h3,.song-mixes h3{margin:14px 0 6px;font:11px 'DM Mono',monospace;letter-spacing:.08em;color:#edb48a}
.song-step-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 6px}.song-step-row>button{min-height:44px;padding:6px 10px;border:1px solid #514d44;border-radius:3px;background:#242420;color:#ded9ce;font:9px 'DM Mono',monospace;letter-spacing:.04em}.song-step-row>button.danger{color:#e98b78}.song-step-row>button:disabled{opacity:.4}
.song-stepper{display:inline-flex;gap:4px;align-items:center}.song-stepper b{min-width:3em;text-align:center;font:11px 'DM Mono',monospace;color:#b2dda0}
.song-chain button.song-step-begin,.song-chain button.song-step-repeat{border-color:#e18343}.song-chain button.song-step-end,.song-chain button.song-step-loop,.song-chain button.song-step-link{border-color:#b2dda0}.song-chain button.song-step-mix,.song-chain button.song-step-tempo{border-color:#8fa6c4}
.mix-slots{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:0 0 6px}.mix-slots button{min-height:44px;border:1px solid #514d44;border-radius:3px;background:#242420;color:#9a9486;font:11px 'DM Mono',monospace}.mix-slots button.stored{color:#ded9ce;border-color:#8fa6c4}.mix-slots button.selected{border-color:#e18343;color:#edb48a}
/* mini DAW (2.25) */
.song-chain button.selected{background:#4a3524;color:#fff1de;box-shadow:0 0 0 2px #e18343 inset}
.song-edit-row{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}.song-edit-row button{flex:1 1 90px;min-height:44px;padding:6px 8px;border:1px solid #514d44;border-radius:3px;background:#242420;color:#ded9ce;font:9px 'DM Mono',monospace}.song-edit-row button.danger{color:#e98b78}.song-edit-row button:disabled{opacity:.4}
.bar-tools{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.bar-tools .pill{flex:1 1 90px;min-height:44px}
.bounce-row{display:flex;gap:6px;margin:10px 0 4px}.bounce-row select{flex:1 1 130px;min-height:44px}.bounce-row button{flex:1 1 130px;min-height:44px;border:1px solid #e18343;border-radius:3px;background:#242420;color:#edb48a;font:9px 'DM Mono',monospace}
#segmentName{width:100%;min-height:44px;text-transform:uppercase}
/* Rack II (2.26) */
.rack-preset-row{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}.rack-preset-row select{flex:1 1 150px;min-height:44px}.rack-preset-button{flex:0 1 auto;min-width:64px;min-height:44px;padding:6px 10px;border:1px solid #514d44;border-radius:3px;background:#242420;color:#ded9ce;font:9px 'DM Mono',monospace}.rack-preset-button.danger{color:#e98b78}.rack-preset-button:disabled{opacity:.4}
.rack-presets{margin:0 0 12px}
.rack-desk{display:grid;grid-template-columns:34px repeat(3,minmax(0,1fr));gap:4px 8px;align-items:center;margin:8px 0 4px}.rack-desk-head{font:8px 'DM Mono',monospace;letter-spacing:.06em;color:#9a9486}.rack-desk-out{font:10px 'DM Mono',monospace;color:#edb48a}
.rack-desk-cell{display:grid;grid-template-columns:1fr;gap:2px}.rack-desk-cell input{width:100%;min-height:30px}.rack-desk-cell b{font:9px 'DM Mono',monospace;color:#b2dda0;text-align:right}

/* Producer I (2.28): WORKFLOW, tick view, near-step marker */
html:not([data-workflow=producer]) .producer-only{display:none!important}
.step.near{outline:1px dashed #d9793b;outline-offset:-3px}
.grid-mode{display:flex;gap:6px;margin:0 0 8px}.grid-mode .pill{flex:1;min-height:36px}.grid-mode .pill.active{border-color:#e18343;color:#ffca9f}
.tick-lanes{display:grid;gap:4px;margin:0 0 8px}.tick-lanes[hidden],.tick-tools[hidden]{display:none}
.tick-row{display:grid;grid-template-columns:38px minmax(0,1fr);gap:6px;align-items:center}
.tick-name{min-height:34px;border:1px solid #3f3c36;border-radius:3px;background:#242420;color:#b9b2a3;font:9px 'DM Mono',monospace;padding:0}
.tick-row.selected .tick-name{border-color:#e18343;color:#ffca9f}
.tick-lane{position:relative;height:34px;border-radius:3px;overflow:hidden;touch-action:manipulation;cursor:crosshair;
  background:repeating-linear-gradient(to right,#6b655a 0 1px,transparent 1px calc(100% / var(--beats))),repeating-linear-gradient(to right,#3a3732 0 1px,transparent 1px calc(100% / var(--steps))),#1c1c19}
.tick-row.selected .tick-lane{box-shadow:inset 0 0 0 1px #5e3a24}
.tick-hit{position:absolute;top:5px;bottom:5px;width:16px;margin-left:-8px;padding:0;border:2px solid #e67935;border-radius:3px;background:transparent;opacity:calc(.45 + .55 * var(--velocity,1));touch-action:none;cursor:grab}
.tick-hit.same{background:#d9793b}.tick-hit.selected{box-shadow:0 0 0 2px #b2dda0;opacity:1}
.tick-hit small{position:absolute;left:50%;top:-4px;transform:translateX(-50%);font:7px 'DM Mono',monospace;color:#ffe2c8;pointer-events:none}
.tick-played{position:absolute;top:11px;bottom:11px;width:6px;margin-left:-3px;border-radius:2px;background:#e67935;pointer-events:none}
.tick-ratchet{position:absolute;top:9px;bottom:9px;width:2px;margin-left:-1px;background:#d9793b99;pointer-events:none}
.tick-tools{display:grid;gap:6px;margin:0 0 10px}.tick-readout{margin:0;font:9px 'DM Mono',monospace;color:#b2dda0;letter-spacing:.04em;min-height:12px}
.tick-buttons{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.tick-buttons .pill{flex:1 1 auto;min-height:40px;padding:6px 8px;font-size:8px}
.tick-buttons select{min-height:40px;font:9px 'DM Mono',monospace}.tick-label{font:8px 'DM Mono',monospace;color:#9a9486}
.trunc-dialog{max-width:760px;padding:20px 16px}.trunc-dialog form{display:grid;gap:10px}.trunc-dialog h2{margin:0}
#truncCanvas{width:100%;height:200px;border-radius:4px;touch-action:none;background:#1c201c}
.trunc-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.trunc-row button{flex:1 1 44px;min-height:42px;border:1px solid #514d44;background:#242420;color:#ded9ce;border-radius:3px;font:10px 'DM Mono',monospace}
.trunc-row button.active{border-color:#e18343;color:#ffca9f}.trunc-snap{font:9px 'DM Mono',monospace;color:#cfc8b8;display:flex;gap:6px;align-items:center;flex:2 1 120px}
.trunc-readout{margin:0;font:9px 'DM Mono',monospace;color:#b2dda0;line-height:1.5}
.trunc-dialog .shape-actions{flex-wrap:wrap}.trunc-dialog .shape-actions button{flex:1 1 40%}
.normalize-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:end;margin:8px 0 4px}.normalize-tools label{flex:1 1 140px;display:grid;gap:4px;font:8px 'DM Mono',monospace;color:#9a9486}
.normalize-tools select{min-height:40px;font:9px 'DM Mono',monospace}.normalize-tools button{flex:1 1 110px;min-height:40px;border:1px solid #514d44;background:#242420;color:#ded9ce;border-radius:3px;font:9px 'DM Mono',monospace}
.auto-gain{display:flex;flex-wrap:wrap;gap:6px;align-items:end;margin:6px 0}.auto-gain label{flex:1 1 130px;display:grid;gap:4px;font:8px 'DM Mono',monospace}.auto-gain button{min-height:40px;flex:1 1 100px}
.auto-gain-info{flex:1 1 100%;font:9px 'DM Mono',monospace;color:#b2dda0;min-height:11px}
/* Pad sends (2.30) */
.pad-sends{margin:10px 0;display:grid;gap:6px}.pad-sends h3{margin:0;font:9px 'DM Mono',monospace;letter-spacing:.06em;color:#9a9486}
.pad-send-row{display:grid;grid-template-columns:52px 110px minmax(0,1fr) 64px;gap:6px;align-items:center}.pad-send-row select{min-height:36px;font:9px 'DM Mono',monospace}
.pad-send-label{font:9px 'DM Mono',monospace;color:#cfc8b8}.pad-send-row b{font:9px 'DM Mono',monospace;color:#b2dda0;text-align:right}
@media(max-width:420px){.pad-send-row{grid-template-columns:46px 92px minmax(0,1fr) 54px}}
/* Help sections (3.0) */
.help-section{border-top:1px solid #3a3731;padding:6px 0}.help-section summary{cursor:pointer;font:10px 'DM Mono',monospace;letter-spacing:.08em;color:#edb48a;min-height:36px;display:flex;align-items:center}
.help-section p{margin:6px 0 10px;line-height:1.5}
.whats-new h3{margin:10px 0 2px;font:10px 'DM Mono',monospace;color:#edb48a}.whats-new ul{margin:0;padding-left:18px;line-height:1.45}
.whats-new{max-height:88dvh;overflow:auto}.whats-new h2:focus{outline:none}
/* TICKS as step cells (3.0.1): a lane is a row of step cells, a hit is a block in its cell, moved inside it by its ticks */
.tick-lane{display:flex;gap:2px;height:38px;padding:3px 0;background:none;overflow:visible;border-radius:0}
.tick-cell{flex:1 1 0;border-radius:3px;background:#2d2b27;pointer-events:none}.tick-cell.alt{background:#3a3730}
.tick-row.selected .tick-lane{box-shadow:none}.tick-row.selected .tick-cell{background:#3a2c22}.tick-row.selected .tick-cell.alt{background:#4a3627}
.tick-hit{top:3px;bottom:3px;width:calc((100% - 2px * (var(--steps) - 1)) / var(--steps));margin-left:0;border:0;border-radius:3px;background:#e67935;opacity:calc(.4 + .6 * var(--velocity,1));box-shadow:inset 0 -3px 0 #0003}
.tick-hit.same{background:#e67935}.tick-hit:not(.same){background:#e67935}.tick-hit.selected{box-shadow:0 0 0 2px #b2dda0,inset 0 -3px 0 #0003;opacity:1}
.tick-hit small{top:50%;transform:translate(-50%,-50%);font:8px 'DM Mono',monospace;color:#1b1b18;font-weight:700}
.tick-played{top:auto;bottom:0;height:3px;width:calc((100% - 2px * (var(--steps) - 1)) / var(--steps));margin-left:0;border-radius:2px;background:#b2dda0}
.tick-ratchet{top:8px;bottom:8px;width:2px;background:#1b1b18aa;z-index:1}
/* PAD PITCH, notes on pads and slices (3.1) */
.pad-note{position:absolute;right:9px;top:24px;font:9px 'DM Mono',monospace;color:#b2dda0;letter-spacing:.02em}.pad-note.guess{color:#8fa883}
.pad-pitch{margin:10px 0;display:grid;gap:6px}.pad-pitch-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pad-pitch h3{margin:0;font:9px 'DM Mono',monospace;letter-spacing:.06em;color:#9a9486}.pad-pitch-note{font:13px 'DM Mono',monospace;color:#b2dda0}.pad-pitch-note.guess{color:#8fa883}
.pad-pitch .pad-send-row{grid-template-columns:52px minmax(0,1fr) 64px}.pad-pitch-actions{display:flex;gap:6px;flex-wrap:wrap}.pad-pitch-actions button{min-height:36px}
.slice-pad .slice-note{display:block;font:8px 'DM Mono',monospace;color:#b2dda0;margin-top:2px;white-space:nowrap}.slice-pad .slice-note.guess{color:#8fa883}
.source-tune{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.source-tune button{min-height:36px}
/* TICKS II (3.1): velocity as height and brightness, off-grid outlines, MUTE / SOLO per lane, bar lines, several bars */
.tick-row{grid-template-columns:34px 44px minmax(0,1fr);gap:4px}
.tick-toggles{display:grid;grid-template-columns:1fr 1fr;gap:2px;height:38px}
.tick-toggle{min-height:0;padding:0;border:1px solid #3f3c36;border-radius:3px;background:#242420;color:#9a9486;font:9px 'DM Mono',monospace}
.tick-toggle.on{background:#e4d9bf;color:#272721;border-color:#e4d9bf}.tick-toggle:disabled{opacity:.35}
.tick-row.muted .tick-lane{opacity:.35}.tick-row.muted .tick-name{color:#6d6b61}
.tick-cell.bar{box-shadow:-2px 0 0 #8a8578}
.tick-hit{top:calc(3px + (1 - var(--velocity,1)) * 20px);opacity:1;background:color-mix(in srgb,#e67935 calc(30% + 70% * var(--velocity,1)),#3a3730)}
.tick-hit.same,.tick-hit:not(.same){background:color-mix(in srgb,#e67935 calc(30% + 70% * var(--velocity,1)),#3a3730)}
.tick-hit.off{outline:1px solid #ffe2c8;outline-offset:-1px}
.tick-hit small{top:auto;bottom:100%;transform:translate(-50%,-1px);padding:0 2px;border-radius:2px;background:#ffe2c8;color:#1b1b18;font:7px 'DM Mono',monospace;line-height:9px;z-index:2}
.tick-ghost{position:absolute;top:3px;bottom:3px;width:calc((100% - 2px * (var(--steps) - 1)) / var(--steps));border:1px dashed #ffe2c899;border-radius:3px;pointer-events:none}
.tick-lanes{min-width:0;max-width:100%}.tick-lanes.multi{overflow-x:auto;padding:8px 0 4px;width:100%}.tick-lanes.multi .tick-row{grid-template-columns:34px 44px minmax(calc(var(--steps) * 12px),1fr);width:max-content;min-width:100%}
.tick-lanes.multi .tick-name,.tick-lanes.multi .tick-toggles{position:sticky;left:0;z-index:3;background:#1d1d1a}.tick-lanes.multi .tick-toggles{left:38px}
.pad-pitch-every{display:flex;align-items:center;gap:6px;min-height:36px;font:9px 'DM Mono',monospace;color:#cfc8b8}