/*
 * RD-909 Interface V2
 * Responsive interface built from the application's live controls.
 * Reference PNGs are visual guidance only and are not shipped.
 */
:root{
  --rd-visual-viewport-width:100vw;
  --rd-visual-viewport-height:100dvh;
  --rd-visual-viewport-offset-top:0px;
  --rd-visual-viewport-offset-left:0px;
}
#rdRackModal .rd-rack-window.rd-v3-window{
  --rd-v3-red:#e40024;
  --rd-v3-black:#0d0d0d;
  --rd-v3-panel:#171717;
  --rd-v3-line:#4a4a4a;
  width:calc(100vw - 52px);
  height:min(80dvh,820px);
  min-height:0;
  max-height:calc(100dvh - 84px);
  background:var(--rd-v3-red);
  border:3px solid #fff;
  box-shadow:10px 12px 0 #050505;
}

/* One fixed title-bar row. */
.rd-v3-window .rd-rack-titlebar{
  flex:0 0 42px;
  min-height:42px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:14px;
  white-space:nowrap;
  background:var(--rd-v3-black);
  border-bottom:3px solid #fff;
}
.rd-v3-window .rd-rack-brand-lockup{flex:0 0 auto}
.rd-v3-window .rd-rack-app-name{
  font-size:20px;
  font-weight:700;
  letter-spacing:.13em;
}
.rd-v3-top-actions{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
  gap:14px;
  white-space:nowrap;
}
.rd-v3-top-actions>.rd-rack-btn,
.rd-v3-edit-button{
  flex:0 0 auto;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:4px 0!important;
  color:#e9e9e9!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  font:16px/1 'VT323',monospace!important;
  letter-spacing:.04em!important;
}
.rd-v3-top-actions>.rd-rack-btn:hover,
.rd-v3-edit-button:hover,
.rd-v3-edit-button[aria-expanded="true"]{color:#fff!important;text-decoration:underline}
.rd-v3-edit{position:relative;flex:0 0 auto}
.rd-v3-edit-menu{
  position:absolute;
  top:calc(100% + 9px);
  left:0;
  z-index:100001;
  display:none;
  min-width:132px;
  padding:6px;
  background:#111;
  border:2px solid #fff;
  box-shadow:5px 5px 0 #000;
}
.rd-v3-edit.open .rd-v3-edit-menu{display:block}
.rd-v3-edit-menu .rd-history-wrap{display:grid;gap:4px}
.rd-v3-edit-menu .rd-history-btn{
  width:100%!important;
  height:30px!important;
  padding:0 10px!important;
  border:1px solid #666!important;
  border-radius:0!important;
  background:#181818!important;
  color:#fff!important;
  box-shadow:none!important;
  font:14px/1 'VT323',monospace!important;
  text-align:left;
}
.rd-v3-edit-menu .rd-history-btn:first-child::after{content:'  UNDO'}
.rd-v3-edit-menu .rd-history-btn:last-child::after{content:'  REDO'}
.rd-v3-edit-menu .rd-history-btn:disabled{opacity:.35}
.rd-v3-window .rd-rack-win-btn{
  flex:0 0 29px;
  width:29px;
  height:29px;
  margin-left:auto;
  border:0;
  background:var(--rd-v3-red);
  font-size:20px;
}

/* Desktop: five explicit control groups. */
.rd-v3-window .rd-activity-bar{
  flex:0 0 auto;
  display:grid!important;
  grid-template-columns:minmax(260px,1fr) 132px minmax(220px,280px) 132px minmax(210px,1fr)!important;
  grid-template-areas:"left lcd controls scope patterns"!important;
  align-items:center;
  gap:24px!important;
  min-width:0!important;
  min-height:116px!important;
  padding:12px 18px!important;
  overflow:visible!important;
  background:#111;
  border:0;
  border-bottom:3px solid var(--rd-v3-red);
}
.rd-v3-left-cluster{
  grid-area:left;
  display:grid;
  grid-template-columns:minmax(108px,1.15fr) repeat(2,minmax(62px,1fr));
  align-items:center;
  gap:12px;
  min-width:0;
}
.rd-v3-transport-cluster{display:contents!important}
.rd-v3-lcd{grid-area:lcd}
.rd-v3-transport-buttons{grid-area:controls}
.rd-v3-window .rd-transport-scope{grid-area:scope}
.rd-v3-pattern-slot{grid-area:patterns}
.rd-v3-view-slot{display:block;min-width:0}
.rd-v3-mobile-view-slot{display:none}

/* View selector. */
.rd-v3-window #rdViewSwitch{
  position:relative;
  display:grid;
  width:100%;
  min-width:0;
  height:56px;
  padding:22px 9px 4px!important;
  border:0!important;
  border-radius:0!important;
  background:#242424!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:21px!important;
  line-height:1!important;
  text-align:left;
}
.rd-v3-window #rdViewSwitch::before{
  content:'VIEW (CLICK TO CHANGE)';
  position:absolute;
  top:9px;
  left:10px;
  color:#bdbdbd;
  font-size:9px;
  letter-spacing:.06em;
}
.rd-v3-window #rdViewSwitch.showing-mixer{
  box-shadow:inset 4px 0 0 var(--rd-v3-red)!important;
  background:#2c2c2c!important;
}

/* Steps and Swing. */
.rd-v3-window .rd-inline-control{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:"label label" "range value";
  gap:7px 6px!important;
  min-width:0;
}
.rd-v3-window .rd-inline-control>span:first-child{
  grid-area:label;
  color:#ddd;
  font-size:12px;
  line-height:1;
}
.rd-v3-window .rd-inline-control>input{
  grid-area:range;
  width:100%!important;
  min-width:0;
  accent-color:var(--rd-v3-red);
}
.rd-v3-window .rd-inline-control>span:last-child{
  grid-area:value;
  color:#fff;
  font-size:13px;
  white-space:nowrap;
}

/* Identical LCD housings. */
.rd-v3-lcd,
.rd-v3-window .rd-transport-scope{
  width:132px;
  height:64px;
  min-width:132px;
  min-height:64px;
  box-sizing:border-box;
  color:#26385c;
  background:#edf6ca;
  border:0;
  box-shadow:none;
}
.rd-v3-lcd{
  display:grid;
  grid-template-rows:14px minmax(0,1fr);
  padding:7px 9px 6px;
  cursor:ns-resize;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.rd-v3-lcd .rd-seq-status{
  display:flex;
  min-height:14px;
  width:auto;
  margin:0;
  padding:0;
  gap:4px;
  border:0;
  box-shadow:none;
  color:#51605f;
  background:transparent;
  font-size:10px;
  letter-spacing:.03em;
  white-space:nowrap;
  overflow:hidden;
}
.rd-v3-lcd .rd-seq-status-dot{width:8px;height:8px;border-color:#596d6a}
.rd-v3-lcd .rd-seq-status.playing .rd-seq-status-dot{background:#596d6a;box-shadow:none}
.rd-v3-window .rd-rack-lcd{
  position:relative;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  width:100%;
  min-width:0;
  padding:0;
  overflow:hidden;
  color:#26385c;
  background:transparent;
  border:0;
  box-shadow:none;
  font-size:29px;
}
.rd-v3-window .rd-rack-lcd>span:first-child{display:none}
.rd-v3-window .rd-rack-lcd>#rdBpmDisplay{
  order:1;
  flex:0 0 auto;
  min-width:0;
  overflow:visible;
  line-height:1;
}
.rd-v3-window .rd-rack-lcd::after{
  content:'BPM'!important;
  position:static!important;
  order:2;
  flex:0 0 auto;
  align-self:center;
  font-size:inherit!important;
  line-height:1!important;
}
.rd-v3-window .rd-rack-lcd .rd-bpm-ctrl{
  order:3;
  flex:0 0 11px;
  width:11px;
  min-width:11px;
  margin-left:auto!important;
}
.rd-v3-window .rd-bpm-arrow{
  width:11px;
  min-width:11px;
  padding:0!important;
  color:#40506a;
  background:transparent;
  border:0;
}

/* Transport buttons share a stable visual center. */
.rd-v3-transport-buttons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.rd-v3-transport-buttons .rd-rack-btn{
  display:grid!important;
  place-items:center;
  flex:0 0 28px;
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:3px!important;
  color:#fff!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.rd-v3-transport-buttons .rd-rack-btn:hover{color:var(--rd-v3-red)!important}
.rd-v3-transport-buttons #rdPlayBtn{
  flex-basis:50px;
  width:50px!important;
  min-width:50px!important;
  height:50px!important;
  min-height:50px!important;
  padding:0!important;
  color:var(--rd-v3-red)!important;
}
.rd-v3-transport-buttons .rd-v3-icon{font-size:0!important}
.rd-v3-icon-art{display:block;width:100%;height:100%;pointer-events:none}
.rd-v3-icon-art svg{display:block;width:100%;height:100%;fill:currentColor;stroke:currentColor}
.rd-v3-transport-buttons #rdPlayBtn svg{filter:drop-shadow(2px 2px 0 #000)}
.rd-v3-transport-buttons #rdResetBtn{transform:translateY(-2px)}

/* Scope LCD. */
.rd-v3-window .rd-transport-scope{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  padding:24px 9px 6px;
  cursor:ew-resize;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.rd-v3-window .rd-transport-scope>span{
  position:absolute;
  top:9px;
  left:10px;
  color:#51605f;
  font-size:10px;
  white-space:nowrap;
}
.rd-v3-window .rd-transport-scope>span::after{content:' · CLICK / TAP';color:#68736d}
.rd-v3-window .rd-transport-scope button{
  display:none;
  height:auto;
  padding:0;
  color:#26385c;
  background:transparent;
  border:0;
  font:27px/1 'VT323',monospace;
  text-align:left;
  pointer-events:none;
}
.rd-v3-window .rd-transport-scope button.active{
  display:grid;
  place-items:center start;
  color:#26385c;
  background:transparent;
}
.rd-v3-window .rd-transport-scope button.active::after{content:none!important}

/* Pattern title has its own row; controls share one baseline. */
.rd-v3-pattern-slot{
  display:flex;
  align-items:center;
  justify-content:stretch;
  min-width:0;
}
.rd-v3-window .rd-pattern-chain-control{
  display:grid!important;
  grid-template-columns:minmax(0,max-content) 26px 26px!important;
  grid-template-rows:14px 38px!important;
  grid-template-areas:"title title title" "blocks minus plus"!important;
  align-items:center!important;
  gap:7px!important;
  width:max-content;
  max-width:100%;
  min-width:0;
  justify-content:start;
}
.rd-v3-window .rd-pattern-chain-control>span:first-child{
  grid-area:title!important;
  display:block!important;
  position:static!important;
  align-self:end;
  margin:0!important;
  padding:0!important;
  color:#ddd;
  font-size:12px;
  line-height:1;
}
.rd-v3-window .rd-pattern-chain-control>input,
.rd-v3-window .rd-pattern-chain-control>strong{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
}
.rd-v3-window .rd-pattern-blocks{
  grid-area:blocks!important;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  width:auto;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.rd-v3-window .rd-pattern-blocks::-webkit-scrollbar{display:none}
.rd-v3-window .rd-pattern-block{
  flex:0 0 58px;
  width:58px;
  min-width:58px;
  height:38px;
  border:2px solid #777;
}
.rd-v3-window .rd-pattern-block.active{border-color:#fff}
.rd-v3-window .rd-pattern-block>span{font-size:14px}
.rd-v3-pattern-step{
  display:grid;
  place-items:center;
  align-self:center;
  width:26px;
  height:26px;
  padding:0;
  border:0;
  border-radius:50%;
  color:#ddd;
  background:#2c2c2c;
  font:21px/1 Arial,sans-serif;
  cursor:pointer;
}
.rd-v3-pattern-step[data-direction="-1"]{grid-area:minus}
.rd-v3-pattern-step[data-direction="1"]{grid-area:plus}
.rd-v3-pattern-step:hover{color:#fff;background:var(--rd-v3-red)}

/* The body owns the remaining height; the sequencer is its only main scroller. */
.rd-v3-window .rd-rack-body{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  padding:8px;
  overflow:hidden!important;
  background:var(--rd-v3-red);
}
.rd-v3-window .rd-seq-view,
.rd-v3-window .rd-mixer-view{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.rd-v3-window .rd-seq-view{
  display:flex;
  flex-direction:column;
  gap:3px!important;
  padding:5px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior:contain;
  border:2px solid #555!important;
  scrollbar-color:var(--rd-v3-red) #151515;
  scrollbar-width:thin;
}
.rd-v3-window .rd-seq-view.inactive{display:none!important}
.rd-v3-window #rdStepLeds{
  flex:0 0 34px;
  display:grid!important;
  grid-template-columns:clamp(190px,15vw,260px) minmax(0,1fr)!important;
  grid-template-rows:28px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:100%!important;
  padding:0!important;
}
.rd-v3-window .rd-seq-grid-brand{
  position:sticky!important;
  grid-column:1!important;
  grid-row:1!important;
  left:0!important;
  z-index:9!important;
  width:auto!important;
  min-width:0!important;
  background:#171717!important;
}
.rd-v3-window #rdStepLeds .rd-seq-guide{
  grid-column:2!important;
  grid-row:1!important;
  display:grid!important;
  grid-template-columns:repeat(var(--rd-steps),minmax(20px,1fr))!important;
  width:100%!important;
  min-width:0!important;
  margin-left:0!important;
}
.rd-v3-window #rdSeqRows{
  display:grid;
  flex:1 1 0;
  grid-template-rows:repeat(12,minmax(0,1fr));
  gap:3px;
  width:100%;
  min-width:0;
  min-height:0;
}
.rd-v3-window .rd-seq-row{
  display:grid!important;
  grid-template-columns:clamp(180px,14vw,240px) minmax(0,1fr)!important;
  align-items:stretch!important;
  gap:5px!important;
  width:100%!important;
  min-width:100%!important;
  min-height:0;
  overflow:hidden;
}
.rd-v3-window .rd-track-label{
  position:sticky!important;
  left:0!important;
  z-index:8!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  padding:2px 8px!important;
  background:#171717!important;
  border-color:#555!important;
  color:#fff!important;
  font-size:clamp(15px,.95vw,19px)!important;
}
.rd-v3-window .rd-track-mute-box{
  width:20px;
  height:20px;
  font-size:13px;
}
.rd-v3-window .rd-steps-container{
  display:grid!important;
  grid-template-columns:repeat(var(--rd-steps),minmax(20px,1fr))!important;
  gap:3px!important;
  width:100%!important;
  min-width:0!important;
}
.rd-v3-window .rd-step-btn{
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  height:100%!important;
}

/* Mixer is allowed to scroll inside the body. */
.rd-v3-window .rd-mixer-view.active{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  min-width:0;
  min-height:0;
  overflow:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
}
.rd-v3-window #rdFlRack{
  width:max-content;
  min-width:100%;
  min-height:max-content;
}
.rd-v3-dragging{cursor:ns-resize!important;user-select:none!important}

/* Menus retain the same visual language. */
body>#rdOptionsMenu{
  min-width:245px;
  padding:6px;
  background:#111!important;
  border:2px solid #fff!important;
  box-shadow:5px 5px 0 #000!important;
}
body>#rdOptionsMenu .rd-option-item{
  min-height:34px;
  padding:6px 10px;
  background:#181818!important;
  color:#fff!important;
  border-bottom:1px solid #4b4b4b!important;
}
body>#rdOptionsMenu .rd-option-item:hover{background:#fff!important;color:#111!important}

/* Manual sits directly below the centered rack on the red backdrop. */
#rdRackModal>#rdManualBtn{
  position:absolute;
  top:calc(50% + min(40dvh,410px) + 12px);
  right:max(16px,env(safe-area-inset-right));
  z-index:20;
  padding:8px 15px;
  color:#fff;
  background:var(--rd-red);
  border:2px solid #fff;
  box-shadow:4px 4px 0 #000;
  font:700 17px/1 'VT323',monospace;
  letter-spacing:.1em;
  cursor:pointer;
}
#rdRackModal>#rdManualBtn:hover,
#rdRackModal>#rdManualBtn:focus-visible{color:var(--rd-red);background:#fff;outline:0}

@media(min-width:1440px){
  .rd-v3-window .rd-activity-bar{
    grid-template-columns:minmax(290px,1fr) 150px 310px 150px minmax(330px,1fr)!important;
    gap:clamp(24px,1.5vw,30px)!important;
    padding-inline:clamp(24px,2vw,42px)!important;
  }
  .rd-v3-lcd,
  .rd-v3-window .rd-transport-scope{
    width:150px;
    min-width:150px;
  }
}

/* Compact/mobile: exactly two control rows. */
@media(max-width:1180px){
  #rdRackModal{
    --rd-stage-edge:8px;
    --rd-manual-footer:48px;
    position:fixed!important;
    top:var(--rd-visual-viewport-offset-top,0px)!important;
    left:var(--rd-visual-viewport-offset-left,0px)!important;
    right:auto!important;
    bottom:auto!important;
    width:var(--rd-visual-viewport-width,100vw)!important;
    height:var(--rd-visual-viewport-height,100dvh)!important;
    min-height:0!important;
    box-sizing:border-box;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:hidden!important;
    padding:
      max(var(--rd-stage-edge),env(safe-area-inset-top))
      max(var(--rd-stage-edge),env(safe-area-inset-right))
      max(var(--rd-manual-footer),calc(env(safe-area-inset-bottom) + 44px))
      max(var(--rd-stage-edge),env(safe-area-inset-left))!important;
  }
  #rdRackModal[data-rd-display-mode="standalone"],
  #rdRackModal[data-rd-display-mode="fullscreen"]{--rd-stage-edge:2px}
  #rdRackModal .rd-rack-window.rd-v3-window{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    box-shadow:7px 8px 0 #050505!important;
  }
  #rdRackModal[data-rd-display-mode="standalone"] .rd-rack-window.rd-v3-window,
  #rdRackModal[data-rd-display-mode="fullscreen"] .rd-rack-window.rd-v3-window{
    box-shadow:none!important;
  }
  .rd-v3-window .rd-rack-titlebar{
    flex:0 0 48px;
    min-height:48px;
    padding:0 9px;
    gap:clamp(5px,1.5vw,10px);
  }
  .rd-v3-window .rd-rack-app-name{font-size:clamp(13px,3.8vw,19px)}
  .rd-v3-top-actions{gap:clamp(6px,1.8vw,12px)}
  .rd-v3-top-actions>.rd-rack-btn,
  .rd-v3-edit-button{font-size:clamp(11px,3vw,14px)!important}
  .rd-v3-mobile-view-slot{
    display:block;
    flex:0 1 145px;
    min-width:75px;
    margin-left:auto;
  }
  .rd-v3-view-slot{display:none!important}
  .rd-v3-window .rd-v3-mobile-view-slot #rdViewSwitch{
    width:100%;
    height:39px;
    padding:16px 7px 2px!important;
    font-size:clamp(13px,3.8vw,18px)!important;
  }
  .rd-v3-window #rdViewSwitch::before{top:4px;left:7px;font-size:clamp(6px,1.8vw,8px)}

  .rd-v3-window .rd-activity-bar{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:60px 50px!important;
    grid-template-areas:
      "lcd controls controls scope"
      "steps swing patterns patterns"!important;
    align-items:center!important;
    gap:8px clamp(7px,2vw,14px)!important;
    min-height:138px!important;
    padding:10px clamp(10px,3vw,22px)!important;
    overflow:hidden!important;
  }
  .rd-v3-left-cluster,
  .rd-v3-transport-cluster{display:contents!important}
  .rd-v3-lcd{grid-area:lcd}
  .rd-v3-transport-buttons{grid-area:controls}
  .rd-v3-window .rd-transport-scope{grid-area:scope}
  .rd-v3-steps-control{grid-area:steps!important}
  .rd-v3-swing-control{grid-area:swing!important}
  .rd-v3-pattern-slot{grid-area:patterns}
  .rd-v3-lcd,
  .rd-v3-window .rd-transport-scope{
    width:100%;
    min-width:0;
    height:60px;
    min-height:60px;
    justify-self:stretch;
  }
  .rd-v3-lcd{padding:8px 7px 6px}
  .rd-v3-lcd .rd-seq-status{font-size:clamp(7px,1.7vw,9px)}
  .rd-v3-window .rd-rack-lcd{
    gap:4px!important;
    font-size:clamp(21px,5vw,27px);
  }
  .rd-v3-window .rd-rack-lcd::after{font-size:inherit!important}
  .rd-v3-window .rd-rack-lcd .rd-bpm-ctrl,
  .rd-v3-window .rd-bpm-arrow{width:9px;min-width:9px}
  .rd-v3-transport-buttons{
    width:100%;
    gap:clamp(2px,1vw,8px);
  }
  .rd-v3-transport-buttons .rd-rack-btn{
    flex-basis:clamp(25px,6.2vw,36px);
    width:clamp(25px,6.2vw,36px)!important;
    min-width:clamp(25px,6.2vw,36px)!important;
    height:clamp(25px,6.2vw,36px)!important;
    min-height:clamp(25px,6.2vw,36px)!important;
    padding:2px!important;
  }
  .rd-v3-transport-buttons #rdPlayBtn{
    flex-basis:clamp(40px,9vw,52px);
    width:clamp(40px,9vw,52px)!important;
    min-width:clamp(40px,9vw,52px)!important;
    height:clamp(40px,9vw,52px)!important;
    min-height:clamp(40px,9vw,52px)!important;
  }
  .rd-v3-window .rd-transport-scope{padding:27px 7px 6px}
  .rd-v3-window .rd-transport-scope>span{
    top:8px;
    left:7px;
    font-size:clamp(7px,1.7vw,9px);
  }
  .rd-v3-window .rd-transport-scope>span::after{content:' · CLICK / TAP'}
  .rd-v3-window .rd-transport-scope button{font-size:clamp(20px,5vw,26px)}
  .rd-v3-window .rd-inline-control{
    width:100%;
    align-self:start;
  }
  .rd-v3-window .rd-inline-control>span:first-child{font-size:10px}
  .rd-v3-pattern-slot{align-self:start}
  .rd-v3-window .rd-pattern-chain-control{
    grid-template-columns:minmax(0,max-content) 25px 25px!important;
    grid-template-rows:13px 36px!important;
    gap:5px!important;
  }
  .rd-v3-window .rd-pattern-block{flex-basis:54px;width:54px;min-width:54px;height:36px}
  .rd-v3-pattern-step{width:25px;height:25px;font-size:18px}

  .rd-v3-window .rd-rack-body{padding:6px}
  .rd-v3-window .rd-seq-view{
    position:relative;
    gap:2px!important;
    padding:4px!important;
    overflow:auto!important;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    overflow-anchor:none;
  }
  .rd-v3-window #rdSeqRows{
    flex:1 0 auto;
    grid-template-rows:repeat(12,minmax(40px,1fr));
    gap:2px;
    min-height:calc(12 * 40px + 11 * 2px);
  }
  .rd-v3-window #rdStepLeds{
    position:sticky!important;
    top:0!important;
    z-index:12!important;
    flex-basis:26px;
    flex-shrink:0;
    grid-template-rows:26px!important;
  }
  .rd-v3-window #rdStepLeds{
    grid-template-columns:170px auto!important;
    width:max-content!important;
  }
  .rd-v3-window #rdStepLeds .rd-seq-guide{
    grid-template-columns:repeat(var(--rd-steps),42px)!important;
    width:auto!important;
  }
  .rd-v3-window .rd-seq-row{
    grid-template-columns:170px auto!important;
    width:max-content!important;
    min-height:40px;
    overflow:visible;
  }
  .rd-v3-window .rd-track-label{
    width:170px!important;
    min-width:170px!important;
    font-size:14px!important;
  }
  .rd-v3-window .rd-steps-container{
    grid-template-columns:repeat(var(--rd-steps),42px)!important;
    width:auto!important;
  }
  .rd-v3-window .rd-step-btn{
    width:42px!important;
    min-width:42px!important;
    min-height:40px!important;
    height:100%!important;
    touch-action:manipulation;
  }
  #rdRackModal>#rdManualBtn{
    top:auto;
    right:max(8px,env(safe-area-inset-right));
    bottom:max(6px,env(safe-area-inset-bottom));
    padding:7px 13px;
    font-size:16px;
  }
}

/* Very narrow screens keep the same two-row structure with compact title text. */
@media(max-width:430px){
  .rd-v3-window .rd-rack-titlebar{gap:5px;padding-inline:7px}
  .rd-v3-window .rd-rack-app-name{font-size:13px}
  .rd-v3-top-actions{gap:7px}
  .rd-v3-top-actions>.rd-rack-btn,
  .rd-v3-edit-button{font-size:11px!important}
  .rd-v3-mobile-view-slot{flex-basis:96px;min-width:70px}
  .rd-v3-window .rd-rack-win-btn{flex-basis:27px;width:27px;height:27px}
  .rd-v3-window .rd-activity-bar{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px 6px!important;
    padding-inline:8px!important;
  }
}