:root{
  --bg:#050507;
  --panel:#0d0d13;
  --panel2:#14131d;
  --text:#f4f1ff;
  --muted:#9d99ad;
  --violet:#7149ff;
  --magenta:#ff42d0;
  --soft:#a66cff;
  --line:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow-x:hidden}
button,input,select{font:inherit}
button{color:inherit}
.app{
  width:calc(100% - 24px);
  max-width:none;
  margin:0 auto;
  padding:18px 0 28px;
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 4px 14px;
}
.site-nav-brand{
  color:var(--text);
  text-decoration:none;
  font-size:12px;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.site-nav-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px 18px;
}
.site-nav-links a{
  color:var(--muted);
  text-decoration:none;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:.18s ease;
}
.site-nav-links a:hover,
.site-nav-links a:focus-visible{
  color:var(--text);
}
.site-nav-links a.active{
  color:#fff;
}
@media(max-width:720px){
  .site-nav{
    align-items:flex-start;
    flex-direction:column;
  }
  .site-nav-links{
    justify-content:flex-start;
  }
}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:14px 16px;
  border:1px solid var(--line);
  background:rgba(12,12,18,.82);
  backdrop-filter:blur(18px);
  border-radius:20px;
  position:sticky;
  top:10px;
  z-index:10;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:34px;height:34px;border-radius:12px;
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.85),transparent 18%),
    linear-gradient(135deg,var(--magenta),var(--violet));
  box-shadow:0 0 28px rgba(113,73,255,.28);
}
.brand h1{font-size:16px;margin:0;letter-spacing:.08em;text-transform:uppercase}
.brand p{margin:2px 0 0;color:var(--muted);font-size:12px}
.transport{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.btn{
  border:1px solid var(--line);
  background:#11111a;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  transition:.18s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(166,108,255,.55)}
.btn.primary{
  background:linear-gradient(135deg,var(--violet),#8d46ff 55%,var(--magenta));
  border:0;
  box-shadow:0 0 24px rgba(113,73,255,.22);
}
.btn.active{box-shadow:0 0 0 1px rgba(255,66,208,.5),0 0 28px rgba(255,66,208,.15)}
.field{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0d0d14;
  color:var(--muted);
  font-size:12px;
}
.field input[type=number]{
  width:64px;background:transparent;border:0;color:var(--text);outline:0
}
.grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
  gap:16px;
  margin-top:16px;
}
.card{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(17,17,26,.96),rgba(9,9,14,.96));
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.26);
}
.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.card-head h2{font-size:14px;margin:0;letter-spacing:.06em;text-transform:uppercase}
.card-head span{font-size:11px;color:var(--muted)}


.synth-workspace-card{
  grid-column:1/-1;
  width:100%;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:720px;
}
.synth-background-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.72;
}
.synth-background-layer::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(6,6,10,.78),
      rgba(6,6,10,.56) 38%,
      rgba(6,6,10,.72)
    ),
    linear-gradient(
      180deg,
      rgba(6,6,10,.18),
      rgba(6,6,10,.72)
    );
  pointer-events:none;
}
.synth-background-layer .visual{
  position:absolute;
  inset:0;
  min-height:0;
}
.synth-workspace-content{
  position:relative;
  z-index:2;
  min-width:0;
}
.synth-workspace-head{
  background:rgba(9,9,14,.58);
  backdrop-filter:blur(10px);
}
.synth-workspace-content .synth-panel{
  padding:16px;
}
.synth-workspace-content .control-grid,
.synth-workspace-content .synth-box{
  position:relative;
  z-index:2;
}
.synth-workspace-content .knob-card,
.synth-workspace-content .osc-panel,
.synth-workspace-content .envelope-panel,
.synth-workspace-content .synth-master-filter{
  background:rgba(12,12,19,.78);
  backdrop-filter:blur(12px);
}
.synth-workspace-content .synth-box{
  background:rgba(9,9,15,.66);
  backdrop-filter:blur(14px);
}
@media(max-width:900px){
  .synth-workspace-card{
    min-height:0;
  }
  .synth-background-layer{
    opacity:.54;
  }
}
.visual{
  position:absolute;
  inset:0;
  min-height:0;
}
.synth-column{
  min-width:0;
}
.synth-column .synth-panel{
  padding:16px;
}
@media(max-width:1120px){
  .synth-workspace{
    grid-template-columns:1fr;
  }
  .visual-column{
    min-height:360px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
}

.visual{
  position:relative;
  min-height:360px;
  background:
    radial-gradient(circle at 50% 45%,rgba(113,73,255,.11),transparent 38%),
    #06060a;
}
#three{position:absolute;inset:0}
.visual-overlay{
  position:absolute;left:16px;bottom:14px;right:16px;
  display:flex;justify-content:space-between;align-items:end;
  pointer-events:none
}
.big-bpm{font-size:42px;font-weight:650;letter-spacing:-.04em}
.caption{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.synth-panel{padding:16px}
.control-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.knob-card{
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025)
}
.knob-card label{
  display:flex;justify-content:space-between;gap:8px;
  font-size:11px;color:var(--muted);margin-bottom:10px
}
.knob-card output{color:var(--text)}
input[type=range]{width:100%;accent-color:var(--violet)}
.keys{
  display:grid;
  grid-template-columns:repeat(13,1fr);
  gap:5px;
  margin-top:12px
}
.key{
  min-height:72px;
  border:1px solid var(--line);
  background:#eceaf5;
  color:#14121b;
  border-radius:9px;
  cursor:pointer;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:8px 2px;
  font-size:10px;
  transition:.08s linear;
}
.key.black{background:#181620;color:#d8d2ed;min-height:60px}
.key.on{background:linear-gradient(180deg,#fff,var(--soft));box-shadow:0 0 24px rgba(166,108,255,.35)}

.note-editor{
  padding:16px;
  border-top:1px solid var(--line);
}
.note-editor-title{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:10px;
}
.note-editor-title strong{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.note-editor-title span{
  color:var(--muted);
  font-size:11px;
}
.note-grid{
  display:grid;
  grid-template-columns:repeat(16,minmax(48px,1fr));
  gap:6px;
  min-width:1180px;
}
.note-cell{
  display:grid;
  gap:5px;
}
.note-cell label{
  text-align:center;
  color:var(--muted);
  font-size:9px;
}
.note-cell select{
  width:100%;
  min-height:34px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#101018;
  color:var(--text);
  outline:none;
}


.embedded-mixer{
  width:100%;
  max-width:none;
  padding:0 16px 18px;
}
.mixing-console-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 2px 11px;
}
.mixing-console-head strong{
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.mixing-console-head span{
  color:var(--muted);
  font-size:10px;
}
.embedded-mixer-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.78fr) minmax(0,.72fr);
  gap:0;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(8,8,13,.62);
}
.console-column{
  min-width:0;
  padding:14px;
}
.console-column + .console-column{
  border-left:1px solid var(--line);
}
.console-column .mixer-section,
.console-column .audio-fader-section,
.console-column .master-fx-section{
  min-width:0;
  padding:0;
  border:0;
}
.console-instruments .mixer{
  width:100%;
  padding:0;
  grid-template-columns:repeat(8,minmax(54px,1fr));
}
.console-audio .audio-channel-mixer{
  width:100%;
  grid-template-columns:repeat(4,minmax(52px,1fr));
}
.console-master .fx{
  padding:0;
}
.console-master .fx-grid{
  width:100%;
  grid-template-columns:repeat(4,minmax(52px,1fr));
  gap:7px;
}
@media(max-width:1260px){
  .embedded-mixer-row{
    grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  }
  .console-master{
    grid-column:1/-1;
    border-left:0 !important;
    border-top:1px solid var(--line);
  }
}
@media(max-width:860px){
  .embedded-mixer-row{
    grid-template-columns:1fr;
  }
  .console-column + .console-column{
    border-left:0;
    border-top:1px solid var(--line);
  }
  .console-master{
    grid-column:auto;
  }
}
@media(max-width:620px){
  .embedded-mixer{
    padding-left:10px;
    padding-right:10px;
  }
  .console-column{
    padding:10px;
  }
  .mixing-console-head{
    align-items:flex-start;
    flex-direction:column;
  }
}


.instrument-bass-filter{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.instrument-master-filter{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.instrument-filter-head{
  padding-top:0;
}
.rotary-filter-grid{
  display:grid;
  grid-template-columns:1.1fr repeat(3,minmax(86px,1fr));
  gap:10px;
  align-items:end;
}
.rotary-control{
  display:grid;
  gap:7px;
  justify-items:center;
  min-width:0;
}
.rotary-control>span{
  color:var(--muted);
  font-size:9px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.rotary-control select{
  width:100%;
  min-height:38px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#101018;
  color:var(--text);
  padding:0 8px;
}
.rotary-control output{
  color:#d8d2ed;
  font-size:10px;
}
.rotary-knob-wrap{
  position:relative;
  width:62px;
  height:62px;
}
.rotary-range{
  position:absolute;
  inset:0;
  width:62px !important;
  height:62px !important;
  opacity:0;
  cursor:pointer;
  z-index:3;
  writing-mode:horizontal-tb !important;
  direction:ltr !important;
}
.rotary-knob{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.13);
  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255,255,255,.16),
      transparent 22%
    ),
    linear-gradient(
      145deg,
      #20202b,
      #0e0e14 72%
    );
  box-shadow:
    inset 0 0 0 6px rgba(255,255,255,.018),
    0 8px 22px rgba(0,0,0,.24);
  pointer-events:none;
}
.rotary-knob::after{
  content:"";
  position:absolute;
  width:2px;
  height:20px;
  left:50%;
  top:7px;
  transform:translateX(-50%);
  transform-origin:50% 24px;
  background:linear-gradient(var(--magenta),var(--violet));
  border-radius:2px;
  box-shadow:0 0 9px rgba(166,108,255,.35);
}
@media(max-width:760px){
  .rotary-filter-grid{
    grid-template-columns:1fr 1fr;
  }
}

.mixer-midi{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.mixer-midi-head{
  padding-top:0;
}
.mixer-midi .midi-panel{
  padding:0;
  border-top:0;
}
.mixer-midi .midi-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.mixer-midi .midi-status{
  grid-column:1/-1;
}
@media(max-width:900px){
  .mixer-midi .midi-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:560px){
  .mixer-midi .midi-grid{
    grid-template-columns:1fr;
  }
  .mixer-midi .midi-status{
    grid-column:auto;
  }
}

.master-fx-section .fx{
  padding:0;
}
.master-fx-section .fx-grid{
  grid-template-columns:repeat(4,minmax(58px,1fr));
  gap:7px;
  overflow-x:auto;
}


.audio-fader-section 
.sample-loader{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.sample-loader-head{
  padding-top:0;
}
.sample-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:8px;
}
.sample-add-button{
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.sample-slots{
  display:grid;
  gap:7px;
}
.sample-slot{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0d0d14;
}
.sample-info{
  min-width:0;
}
.sample-name{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#e8e3f4;
  font-size:10px;
}
.sample-meta{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
}
.sample-controls{
  display:flex;
  gap:4px;
  align-items:center;
}
.sample-controls button{
  min-width:28px;
  height:26px;
  padding:0 7px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#11111a;
  color:var(--muted);
  cursor:pointer;
  font-size:9px;
}
.sample-controls button.playing{
  color:#fff;
  background:#3c244c;
  border-color:rgba(166,108,255,.42);
}
.sample-volume{
  width:72px;
}
.sample-empty{
  padding:10px;
  border:1px dashed var(--line);
  border-radius:10px;
  color:var(--muted);
  text-align:center;
  font-size:9px;
}
@media(max-width:620px){
  .sample-actions{
    grid-template-columns:1fr;
  }
  .sample-slot{
    grid-template-columns:1fr;
  }
  .sample-controls{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}


.audio-input-enable{
  align-self:end;
}
.audio-input-setting,
.audio-monitor-setting{
  min-width:0;
}
#audioInputStatus{
  grid-column:1/-1;
}

.audio-settings{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.audio-fader-section .audio-settings-grid{
  grid-template-columns:1fr 1fr;
}

.audio-settings{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.audio-settings-head{
  padding-top:0;
}
.audio-settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.audio-setting{
  display:grid;
  gap:6px;
}
.audio-setting span{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.audio-setting select{
  width:100%;
  min-height:38px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#101018;
  color:var(--text);
  padding:0 8px;
  outline:none;
}
.audio-output-setting{
  grid-column:1/-1;
}
.audio-restart{
  grid-column:1/-1;
  width:100%;
}
.audio-status{
  grid-column:1/-1;
  min-height:30px;
  display:flex;
  align-items:center;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--muted);
  font-size:10px;
}
.audio-status.active{
  color:#e6ddff;
  border-color:rgba(113,73,255,.40);
}
@media(max-width:620px){
  .audio-settings-grid{
    grid-template-columns:1fr;
  }
  .audio-output-setting,
  .audio-restart,
  .audio-status{
    grid-column:auto;
  }
}

.master-fx-section .fx-strip{
  min-width:58px;
  min-height:278px;
}



.audio-recorder{
  margin:14px 16px 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.018);
}
.recorder-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.recorder-head>div:first-child{
  display:grid;
  gap:3px;
}
.recorder-head strong{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.recorder-head span{
  color:var(--muted);
  font-size:10px;
}
.recorder-transport{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.recorder-record.active{
  color:white;
  background:#5b183d;
  border-color:rgba(255,66,208,.55);
  box-shadow:0 0 20px rgba(255,66,208,.14);
}
.audio-fader-section{
  min-width:0;
}
.audio-channel-mixer{
  display:grid;
  grid-template-columns:repeat(4,minmax(58px,1fr));
  gap:7px;
  margin:0;
  overflow-x:auto;
}
.audio-channel-strip{
  min-width:58px;
  min-height:278px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:12px 7px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );
}
.audio-channel-strip.armed{
  border-color:rgba(255,66,208,.45);
  box-shadow:
    inset 0 0 20px rgba(255,66,208,.06),
    0 0 16px rgba(255,66,208,.05);
}
.audio-channel-name{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:10px;
  color:#e3def1;
}
.audio-channel-controls{
  display:flex;
  gap:4px;
}
.audio-channel-controls button{
  width:24px;
  height:22px;
  padding:0;
  border:1px solid var(--line);
  border-radius:6px;
  background:#11111a;
  color:var(--muted);
  font-size:8px;
  cursor:pointer;
}
.audio-channel-controls button.on{
  color:#fff;
  background:#3c244c;
}
.audio-channel-controls .arm.on{
  background:#5b183d;
  border-color:rgba(255,66,208,.45);
}
.audio-channel-strip input[type=range]{
  width:28px;
  height:158px;
  min-width:28px;
  writing-mode:vertical-lr;
  direction:rtl;
  accent-color:var(--magenta);
}
.audio-channel-level{
  color:#d8d2ed;
  font-size:10px;
  text-align:center;
}
.audio-timeline-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:#08080d;
}
.timeline-ruler{
  min-width:1000px;
  height:28px;
  display:grid;
  grid-template-columns:repeat(16,1fr);
  border-bottom:1px solid var(--line);
}
.timeline-ruler span{
  padding:7px 6px 0;
  border-left:1px solid rgba(255,255,255,.05);
  color:var(--muted);
  font-size:9px;
}
.audio-timeline{
  min-width:1000px;
}
.audio-track-row{
  position:relative;
  height:58px;
  border-bottom:1px solid var(--line);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(6.25% - 1px),
      rgba(255,255,255,.035) calc(6.25% - 1px),
      rgba(255,255,255,.035) 6.25%
    );
}
.audio-track-row:last-child{
  border-bottom:0;
}
.audio-track-label{
  position:absolute;
  left:7px;
  top:6px;
  z-index:2;
  padding:3px 6px;
  border-radius:6px;
  background:rgba(0,0,0,.48);
  color:var(--muted);
  font-size:9px;
  pointer-events:none;
}
.audio-clip{
  position:absolute;
  top:20px;
  height:29px;
  min-width:42px;
  border:1px solid rgba(166,108,255,.42);
  border-radius:7px;
  background:
    linear-gradient(
      180deg,
      rgba(113,73,255,.34),
      rgba(255,66,208,.18)
    );
  box-shadow:0 0 18px rgba(113,73,255,.08);
  overflow:hidden;
  cursor:pointer;
}
.audio-clip::after{
  content:"";
  position:absolute;
  inset:5px;
  opacity:.45;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.5) 0 1px,
      transparent 1px 5px
    );
}
.audio-clip span{
  position:relative;
  z-index:2;
  display:block;
  padding:6px 7px;
  color:#f4efff;
  font-size:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.recording-status{
  margin-top:9px;
  min-height:30px;
  display:flex;
  align-items:center;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--muted);
  font-size:10px;
}
.recording-status.active{
  color:#ffd8f3;
  border-color:rgba(255,66,208,.35);
}
@media(max-width:900px){
  .audio-channel-mixer{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:620px){
  .recorder-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .audio-channel-mixer{
    grid-template-columns:1fr;
  }
}

.embedded-mixer{
  border-top:1px solid var(--line);
  padding:0 16px 18px;
}
.embedded-mixer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:15px 0 10px;
}
.embedded-mixer-head strong{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.embedded-mixer-head span{
  color:var(--muted);
  font-size:10px;
}
.osc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.osc-panel,

.synth-master-filter{
  margin-top:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.018);
}
.synth-filter-controls{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:680px){
  .synth-filter-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


.synth-fm-filter-panel{
  margin-top:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(12,12,19,.78);
  backdrop-filter:blur(12px);
}
.synth-fm-controls{
  grid-template-columns:repeat(5,minmax(92px,1fr));
}
@media(max-width:900px){
  .synth-fm-controls{
    grid-template-columns:repeat(3,minmax(92px,1fr));
  }
}
@media(max-width:620px){
  .synth-fm-controls{
    grid-template-columns:repeat(2,minmax(92px,1fr));
  }
}

.envelope-panel{
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.018);
}
.envelope-panel{
  margin-top:10px;
}
.osc-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.osc-title strong{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.osc-title span{
  font-size:10px;
  color:var(--muted);
}
.osc-panel 



.synth-controls .knob-card,
.control-grid .knob-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.synth-controls .knob-card label,
.control-grid .knob-card label{
  width:100%;
}
.synth-controls select{
  width:100%;
}

.synth-rotary-wrap{
  position:relative;
  width:68px;
  height:68px;
  margin:8px auto 2px;
  flex:0 0 auto;
}
.synth-rotary-input{
  position:absolute;
  inset:0;
  width:68px !important;
  height:68px !important;
  opacity:0;
  cursor:pointer;
  z-index:3;
  writing-mode:horizontal-tb !important;
  direction:ltr !important;
  margin:0 !important;
}
.synth-rotary-knob{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(
      circle at 34% 28%,
      rgba(255,255,255,.17),
      transparent 22%
    ),
    linear-gradient(
      145deg,
      #242431,
      #0d0d13 72%
    );
  box-shadow:
    inset 0 0 0 7px rgba(255,255,255,.018),
    0 8px 22px rgba(0,0,0,.26),
    0 0 16px rgba(113,73,255,.06);
  pointer-events:none;
}
.synth-rotary-knob::after{
  content:"";
  position:absolute;
  width:2px;
  height:21px;
  left:50%;
  top:7px;
  transform:translateX(-50%);
  border-radius:2px;
  background:linear-gradient(var(--magenta),var(--violet));
  box-shadow:0 0 8px rgba(166,108,255,.42);
}
.synth-rotary-wrap:hover .synth-rotary-knob{
  border-color:rgba(166,108,255,.35);
}
@media(max-width:680px){
  .synth-rotary-wrap{
    width:58px;
    height:58px;
  }
  .synth-rotary-input{
    width:58px !important;
    height:58px !important;
  }
  .synth-rotary-knob::after{
    height:18px;
  }
}

.synth-controls{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.envelope-controls{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:1100px){
  .osc-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .osc-panel .synth-controls,
  .envelope-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.synth-box{
  margin-top:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.022);
}
.synth-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}
.synth-head strong{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.synth-head span{
  color:var(--muted);
  font-size:11px;
}
.synth-controls{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.synth-controls select{
  width:100%;
  min-height:34px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#101018;
  color:var(--text);
  padding:0 8px;
}
.synth-keyboard{
  display:grid;
  grid-template-columns:repeat(13,1fr);
  gap:5px;
  margin-top:10px;
}
.synth-key{
  min-height:58px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#eae7f2;
  color:#17141d;
  cursor:pointer;
  font-size:10px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:7px 2px;
}
.synth-key.black{
  background:#181620;
  color:#ddd7ef;
}
.synth-key.on{
  background:linear-gradient(180deg,#fff,#a66cff);
  box-shadow:0 0 22px rgba(166,108,255,.35);
}
@media(max-width:680px){
  .synth-controls{grid-template-columns:repeat(2,1fr)}
  .synth-keyboard{grid-template-columns:repeat(7,1fr)}
  .synth-key:nth-child(n+8){display:none}
}

.sequencer-card{grid-column:1/-1}
.seq-wrap{padding:16px;overflow-x:auto;overflow-y:hidden;width:100%}
.track{
  display:grid;
  grid-template-columns:140px repeat(16,minmax(42px,1fr));
  gap:6px;
  align-items:center;
  margin-bottom:8px;
  min-width:910px;
}
.track-name{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  color:#ddd8ed
}
.mute{
  width:24px;height:24px;border-radius:7px;border:1px solid var(--line);
  background:#101018;cursor:pointer;color:var(--muted);font-size:10px
}
.mute.on{color:white;background:#34204a}

.step.note-pad{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  padding:4px;
  min-height:54px;
}
.step-toggle{
  flex:1;
  width:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:6px;
}
.step-note-select{
  width:100%;
  min-height:20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:5px;
  background:#0b0b11;
  color:#ded8ef;
  font-size:9px;
  padding:0 2px;
  text-align:center;
  outline:none;
}
.step.note-pad.on .step-note-select{
  border-color:rgba(255,255,255,.22);
  background:rgba(8,8,14,.76);
}
.solo,
.channel-solo{
  width:28px;
  height:24px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#101018;
  cursor:pointer;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
}
.solo.on,
.channel-solo.on{
  color:#fff;
  background:#382c12;
  border-color:rgba(255,205,92,.45);
  box-shadow:0 0 14px rgba(255,205,92,.10);
}
.track-buttons{
  display:flex;
  gap:4px;
  align-items:center;
}
.channel-buttons{
  display:flex;
  gap:4px;
}

.step{
  aspect-ratio:1/1;
  min-height:34px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.09);
  background:#101018;
  cursor:pointer;
  position:relative;
  transition:.08s linear;
}
.step::after{
  content:"";
  position:absolute;inset:32%;
  border-radius:50%;
  background:rgba(255,255,255,.08)
}
.step.on{
  background:linear-gradient(135deg,rgba(113,73,255,.9),rgba(255,66,208,.7));
  box-shadow:0 0 22px rgba(113,73,255,.16)
}
.step.playing{outline:2px solid white;outline-offset:1px}
.step.on.playing{box-shadow:0 0 30px rgba(255,66,208,.32)}
.side-stack{display:grid;gap:16px}
.mixer{
  display:grid;
  grid-template-columns:repeat(7,minmax(64px,1fr));
  gap:8px;
  padding:14px;
  overflow-x:auto;
}
.channel{
  min-width:64px;
  min-height:278px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  padding:12px 7px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );
}
.channel label{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#dcd7eb;
  font-size:10px;
  line-height:1.25;
}
.channel output{
  color:#d8d2ed;
  font-size:10px;
  text-align:center;
}
.channel-mute{
  width:28px;
  height:24px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#101018;
  color:var(--muted);
  cursor:pointer;
  font-size:9px;
  font-weight:700;
}
.channel-mute.on{
  color:white;
  background:#3a2050;
  border-color:rgba(255,66,208,.35);
}
.vertical-fader{
  width:28px;
  height:158px;
  writing-mode:vertical-lr;
  direction:rtl;
  accent-color:var(--violet);
}
.fx{padding:14px}
.fx-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(64px,1fr));
  gap:8px;
  overflow-x:auto;
}
.fx-strip{
  min-width:64px;
  min-height:250px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:12px 7px;
  border:1px solid var(--line);
  border-radius:14px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );
}
.fx-strip label{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#dcd7eb;
  font-size:10px;
}
.fx-strip output{
  color:#d8d2ed;
  font-size:10px;
}
.midi-panel{
  padding:14px;
  border-top:1px solid var(--line);
}
.midi-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.midi-grid .btn,
.midi-grid select{
  width:100%;
}
.midi-grid select{
  min-height:40px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#101018;
  color:var(--text);
}
.midi-status{
  grid-column:1/-1;
  min-height:32px;
  display:flex;
  align-items:center;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--muted);
  font-size:10px;
}
.midi-status.connected{
  color:#e6ddff;
  border-color:rgba(113,73,255,.40);
  box-shadow:0 0 18px rgba(113,73,255,.08);
}
.footer-note{
  text-align:center;color:var(--muted);font-size:11px;padding:18px
}
@media(max-width:980px){
  .grid{grid-template-columns:1fr}
  .control-grid{grid-template-columns:repeat(2,1fr)}
  .side-stack{grid-template-columns:1fr}
}
@media(max-width:680px){
  .topbar{align-items:flex-start;flex-direction:column}
  .transport{justify-content:flex-start}
  .side-stack{grid-template-columns:1fr}
  .visual{min-height:300px}
  .keys{grid-template-columns:repeat(7,1fr)}
  .key:nth-child(n+8){display:none}
}

.page-reactive-bg{
  position:fixed;
  inset:0;
  z-index:-10;
  overflow:hidden;
  pointer-events:none;
  background:#050507;
}
.page-reactive-glow,
.page-reactive-grid,
.page-reactive-pulse{
  position:absolute;
  inset:-10%;
  pointer-events:none;
}
.page-reactive-glow{
  transition:
    opacity 70ms linear,
    transform 70ms linear,
    filter 70ms linear;
}
.page-reactive-glow.glow-a{
  background:
    radial-gradient(
      circle at 24% 34%,
      rgba(113,73,255,.52),
      transparent 34%
    ),
    radial-gradient(
      circle at 70% 72%,
      rgba(166,108,255,.24),
      transparent 30%
    );
  opacity:.12;
  filter:blur(62px);
}
.page-reactive-glow.glow-b{
  background:
    radial-gradient(
      circle at 78% 26%,
      rgba(255,66,208,.44),
      transparent 32%
    ),
    radial-gradient(
      circle at 34% 78%,
      rgba(255,66,208,.18),
      transparent 28%
    );
  opacity:.08;
  filter:blur(72px);
}
.page-reactive-grid{
  inset:0;
  background-image:
    linear-gradient(
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.022) 1px,
      transparent 1px
    );
  background-size:44px 44px;
  opacity:.13;
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 14%,
      black 88%,
      transparent
    );
  transform:
    perspective(900px)
    rotateX(62deg)
    translateY(23%);
  transform-origin:center bottom;
}
.page-reactive-pulse{
  inset:0;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255,255,255,.06),
      transparent 42%
    );
  opacity:0;
}
body{
  background:#050507;
}
@media (prefers-reduced-motion:reduce){
  .page-reactive-glow,
  .page-reactive-grid,
  .page-reactive-pulse{
    transition:none !important;
  }
}


.sequencer-card{grid-column:1/-1;width:100%}

/* Compact Synth Workspace Layout */
.synth-workspace-content .synth-panel{
  padding:14px;
}
.synth-box{
  width:100%;
}
.osc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.osc-panel,
.envelope-panel,
.synth-fm-filter-panel{
  min-width:0;
}
.synth-controls{
  display:grid;
  grid-template-columns:repeat(6,minmax(82px,1fr));
  gap:10px;
  align-items:start;
}
.envelope-controls{
  grid-template-columns:repeat(8,minmax(78px,1fr));
}
.synth-fm-controls{
  grid-template-columns:repeat(5,minmax(88px,1fr));
}
.synth-controls .knob-card{
  min-width:0;
  padding:10px 8px;
}
.synth-controls .knob-card label{
  min-height:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:3px;
  text-align:center;
  font-size:9px;
  line-height:1.2;
}
.synth-controls .knob-card output{
  font-size:9px;
}
.synth-controls select{
  min-height:34px;
  font-size:10px;
  padding:0 6px;
}
.synth-vertical-fader{
  height:104px !important;
  margin-top:6px !important;
}
.synth-keyboard{
  margin-top:12px;
}

@media(max-width:1180px){
  .synth-controls{
    grid-template-columns:repeat(3,minmax(90px,1fr));
  }
  .envelope-controls{
    grid-template-columns:repeat(4,minmax(90px,1fr));
  }
  .synth-fm-controls{
    grid-template-columns:repeat(3,minmax(90px,1fr));
  }
}

@media(max-width:820px){
  .osc-grid{
    grid-template-columns:1fr;
  }
  .synth-controls,
  .envelope-controls,
  .synth-fm-controls{
    grid-template-columns:repeat(2,minmax(92px,1fr));
  }
}

@media(max-width:520px){
  .synth-workspace-content .synth-panel{
    padding:10px;
  }
  .synth-controls,
  .envelope-controls,
  .synth-fm-controls{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .synth-controls .knob-card{
    padding:8px 6px;
  }
  .synth-vertical-fader{
    height:92px !important;
  }
}


/* Tighten FM Filter + Envelope so controls do not stretch across huge cards */
.synth-fm-filter-panel,
.envelope-panel{
  padding:12px;
}
.synth-fm-controls,
.envelope-controls{
  justify-content:start;
  align-items:start;
}
.synth-fm-controls{
  grid-template-columns:repeat(5,minmax(92px,132px)) !important;
}
.envelope-controls{
  grid-template-columns:repeat(8,minmax(92px,132px)) !important;
}
.synth-fm-controls .knob-card,
.envelope-controls .knob-card{
  width:100%;
  min-width:0;
  min-height:0;
  padding:9px 7px;
}
.synth-fm-controls .knob-card label,
.envelope-controls .knob-card label{
  min-height:30px;
  margin-bottom:4px;
}
.synth-fm-controls .synth-vertical-fader,
.envelope-controls .synth-vertical-fader{
  height:92px !important;
  margin:4px auto 0 !important;
}
.synth-fm-controls select{
  min-height:34px;
}
@media(max-width:980px){
  .synth-fm-controls{
    grid-template-columns:repeat(3,minmax(92px,132px)) !important;
  }
  .envelope-controls{
    grid-template-columns:repeat(4,minmax(92px,132px)) !important;
  }
}
@media(max-width:620px){
  .synth-fm-controls,
  .envelope-controls{
    grid-template-columns:repeat(2,minmax(92px,1fr)) !important;
  }
}


/* Center FM Filter and Envelope controls like the oscillator panels */
.synth-fm-controls,
.envelope-controls{
  justify-content:center !important;
}

.synth-fm-filter-panel,
.envelope-panel{
  text-align:center;
}

.synth-fm-filter-panel .osc-title,
.envelope-panel .osc-title{
  text-align:left;
}

@media(max-width:980px){
  .synth-fm-controls,
  .envelope-controls{
    justify-content:center !important;
  }
}


/* Dual LFO frequency modulation section */
.fm-lfo-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:stretch;
}
.fm-module{
  min-width:0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(7,7,12,.46);
}
.fm-module-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.fm-module-title strong{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.fm-module-title span{
  color:var(--muted);
  font-size:9px;
}
.fm-filter-controls,
.lfo-controls{
  grid-template-columns:repeat(3,minmax(78px,1fr)) !important;
  justify-content:center !important;
}
.fm-filter-controls .knob-card,
.lfo-controls .knob-card{
  min-width:0;
  padding:8px 6px;
}
.fm-filter-controls .synth-vertical-fader,
.lfo-controls .synth-vertical-fader{
  height:92px !important;
}
@media(max-width:1050px){
  .fm-lfo-layout{
    grid-template-columns:1fr 1fr;
  }
  .fm-filter-module{
    grid-column:1/-1;
  }
}
@media(max-width:700px){
  .fm-lfo-layout{
    grid-template-columns:1fr;
  }
  .fm-filter-module{
    grid-column:auto;
  }
}
@media(max-width:480px){
  .fm-filter-controls,
  .lfo-controls{
    grid-template-columns:repeat(2,minmax(82px,1fr)) !important;
  }
}


/* Oscillator pitch controls */
.osc-panel .synth-controls{
  grid-template-columns:repeat(6,minmax(82px,1fr));
}
@media(max-width:1180px){
  .osc-panel .synth-controls{
    grid-template-columns:repeat(3,minmax(90px,1fr));
  }
}
@media(max-width:680px){
  .osc-panel .synth-controls{
    grid-template-columns:repeat(2,minmax(92px,1fr));
  }
}


/* Rotary synth layout tuning */
.osc-panel .synth-controls{
  grid-template-columns:repeat(6,minmax(86px,118px)) !important;
  justify-content:center !important;
}
.synth-fm-controls,
.envelope-controls,
.fm-filter-controls,
.lfo-controls{
  justify-content:center !important;
}
.envelope-controls{
  grid-template-columns:repeat(8,minmax(86px,118px)) !important;
}
.fm-filter-controls,
.lfo-controls{
  grid-template-columns:repeat(3,minmax(86px,118px)) !important;
}
.synth-controls .knob-card{
  width:100%;
  min-width:0;
  min-height:0;
  padding:8px 6px;
}
.synth-controls .knob-card label{
  min-height:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:3px;
  text-align:center;
  font-size:9px;
  line-height:1.2;
}
.synth-controls .knob-card output{
  font-size:9px;
}
@media(max-width:1180px){
  .osc-panel .synth-controls{
    grid-template-columns:repeat(3,minmax(90px,118px)) !important;
  }
  .envelope-controls{
    grid-template-columns:repeat(4,minmax(90px,118px)) !important;
  }
}
@media(max-width:820px){
  .osc-panel .synth-controls,
  .envelope-controls,
  .fm-filter-controls,
  .lfo-controls{
    grid-template-columns:repeat(2,minmax(92px,118px)) !important;
  }
}


/* Final synth layout cleanup */
.synth-workspace-content .synth-panel{
  padding:12px;
}
.synth-box{
  width:min(1320px,100%);
  margin:10px auto 0;
  padding:12px;
}
.synth-head{
  margin-bottom:10px;
}
.osc-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px;
}
.osc-panel,
.synth-fm-filter-panel,
.envelope-panel{
  padding:10px;
}
.osc-title{
  margin-bottom:8px;
}

/* Oscillators: all seven controls stay in one clean row */
.osc-panel .synth-controls{
  grid-template-columns:repeat(7,minmax(72px,1fr)) !important;
  gap:7px !important;
  justify-content:center !important;
}

/* Smaller, denser control cards */
.synth-controls .knob-card{
  padding:7px 5px !important;
  border-radius:12px;
}
.synth-controls .knob-card label{
  min-height:28px !important;
  margin-bottom:3px !important;
  font-size:8.5px !important;
}
.synth-controls .knob-card output{
  font-size:8.5px !important;
}
.synth-controls select{
  min-height:30px !important;
  padding:0 5px !important;
  font-size:9px;
}

/* Smaller rotary controls */
.synth-rotary-wrap{
  width:58px !important;
  height:58px !important;
  margin:5px auto 1px !important;
}
.synth-rotary-input{
  width:58px !important;
  height:58px !important;
}
.synth-rotary-knob::after{
  height:18px !important;
  top:6px !important;
}

/* Filter + dual LFO row */
.synth-fm-filter-panel{
  margin-top:10px;
}
.fm-lfo-layout{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}
.fm-module{
  padding:8px !important;
  border-radius:12px;
}
.fm-module-title{
  margin-bottom:6px !important;
}
.fm-filter-controls,
.lfo-controls{
  grid-template-columns:repeat(3,minmax(72px,110px)) !important;
  gap:7px !important;
  justify-content:center !important;
}

/* Envelope and delay: one centered compact row */
.envelope-panel{
  margin-top:10px;
}
.envelope-controls{
  grid-template-columns:repeat(8,minmax(72px,105px)) !important;
  gap:7px !important;
  justify-content:center !important;
}

/* Keyboard closer to controls */
.synth-keyboard{
  margin-top:9px !important;
}

@media(max-width:1180px){
  .osc-grid{
    grid-template-columns:1fr !important;
  }
  .osc-panel .synth-controls{
    grid-template-columns:repeat(7,minmax(72px,100px)) !important;
  }
  .fm-lfo-layout{
    grid-template-columns:1fr 1fr !important;
  }
  .fm-filter-module{
    grid-column:1/-1;
  }
  .envelope-controls{
    grid-template-columns:repeat(4,minmax(78px,105px)) !important;
  }
}

@media(max-width:760px){
  .osc-panel .synth-controls{
    grid-template-columns:repeat(4,minmax(78px,1fr)) !important;
  }
  .fm-lfo-layout{
    grid-template-columns:1fr !important;
  }
  .fm-filter-module{
    grid-column:auto;
  }
  .fm-filter-controls,
  .lfo-controls{
    grid-template-columns:repeat(3,minmax(78px,1fr)) !important;
  }
}

@media(max-width:520px){
  .synth-workspace-content .synth-panel{
    padding:8px;
  }
  .synth-box{
    padding:9px;
  }
  .osc-panel .synth-controls,
  .envelope-controls{
    grid-template-columns:repeat(2,minmax(82px,1fr)) !important;
  }
  .fm-filter-controls,
  .lfo-controls{
    grid-template-columns:repeat(2,minmax(82px,1fr)) !important;
  }
}


/* Visualizer between Oscillator 1 and Oscillator 2 */
.osc-grid{
  grid-template-columns:minmax(0,1fr) minmax(220px,.72fr) minmax(0,1fr) !important;
  align-items:stretch;
}
.osc-visualizer-panel{
  min-width:0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:
    linear-gradient(
      180deg,
      rgba(11,11,18,.78),
      rgba(7,7,12,.58)
    );
  display:flex;
  flex-direction:column;
}
#oscVisualizer{
  display:block;
  width:100%;
  min-height:230px;
  flex:1;
  border-radius:12px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(113,73,255,.10),
      transparent 62%
    ),
    rgba(5,5,8,.72);
  border:1px solid rgba(255,255,255,.06);
}
@media(max-width:1180px){
  .osc-grid{
    grid-template-columns:1fr 1fr !important;
  }
  .osc-visualizer-panel{
    grid-column:1/-1;
  }
  #oscVisualizer{
    min-height:180px;
  }
}
@media(max-width:760px){
  .osc-grid{
    grid-template-columns:1fr !important;
  }
  .osc-visualizer-panel{
    grid-column:auto;
  }
}


/* Make oscillator controls two rows so the knobs don't feel squished */
.osc-panel .synth-controls{
  grid-template-columns:repeat(4,minmax(72px,110px)) !important;
  gap:8px !important;
  justify-content:center !important;
  align-content:start;
}

.osc-panel .synth-controls .knob-card{
  min-height:0;
}

@media(max-width:1180px){
  .osc-panel .synth-controls{
    grid-template-columns:repeat(4,minmax(78px,110px)) !important;
  }
}

@media(max-width:760px){
  .osc-panel .synth-controls{
    grid-template-columns:repeat(3,minmax(82px,1fr)) !important;
  }
}

@media(max-width:520px){
  .osc-panel .synth-controls{
    grid-template-columns:repeat(2,minmax(82px,1fr)) !important;
  }
}


/* Make Synth Workspace responsive like the sequencer:
   full-width on desktop, preserve usable control sizes,
   horizontal scroll instead of squashing on smaller screens. */
.synth-workspace-card{
  width:100%;
  grid-column:1/-1;
}

.synth-workspace-content{
  width:100%;
  min-width:0;
}

.synth-workspace-content .synth-panel{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:12px;
}

.synth-box{
  width:100%;
  max-width:none !important;
  min-width:1180px;
  margin:10px 0 0 !important;
}

.osc-grid{
  width:100%;
  grid-template-columns:minmax(360px,1fr) minmax(300px,.72fr) minmax(360px,1fr) !important;
  gap:10px !important;
}

.osc-panel,
.osc-visualizer-panel{
  min-width:0;
}

.osc-panel .synth-controls{
  grid-template-columns:repeat(4,minmax(78px,1fr)) !important;
  gap:8px !important;
}

.fm-lfo-layout{
  width:100%;
  grid-template-columns:repeat(3,minmax(300px,1fr)) !important;
  gap:10px !important;
}

.envelope-controls{
  width:100%;
  grid-template-columns:repeat(8,minmax(92px,1fr)) !important;
  gap:8px !important;
}

/* Keep the controls at a comfortable size instead of compressing them. */
.synth-controls .knob-card{
  min-width:76px;
}

.synth-rotary-wrap{
  width:60px !important;
  height:60px !important;
}

.synth-rotary-input{
  width:60px !important;
  height:60px !important;
}

#oscVisualizer{
  min-height:220px;
}

/* On narrower screens, keep the desktop synth layout and allow horizontal scrolling,
   matching the behavior of the 16-step sequencer. */
@media(max-width:1180px){
  .synth-box{
    min-width:1180px;
  }

  .osc-grid{
    grid-template-columns:minmax(360px,1fr) minmax(300px,.72fr) minmax(360px,1fr) !important;
  }

  .osc-visualizer-panel{
    grid-column:auto !important;
  }

  .fm-lfo-layout{
    grid-template-columns:repeat(3,minmax(300px,1fr)) !important;
  }

  .fm-filter-module{
    grid-column:auto !important;
  }

  .osc-panel .synth-controls{
    grid-template-columns:repeat(4,minmax(78px,1fr)) !important;
  }

  .envelope-controls{
    grid-template-columns:repeat(8,minmax(92px,1fr)) !important;
  }
}

@media(max-width:760px){
  .synth-workspace-content .synth-panel{
    padding:10px;
  }

  .osc-grid{
    grid-template-columns:minmax(360px,1fr) minmax(300px,.72fr) minmax(360px,1fr) !important;
  }

  .fm-lfo-layout{
    grid-template-columns:repeat(3,minmax(300px,1fr)) !important;
  }

  .osc-panel .synth-controls{
    grid-template-columns:repeat(4,minmax(78px,1fr)) !important;
  }

  .fm-filter-controls,
  .lfo-controls{
    grid-template-columns:repeat(3,minmax(84px,1fr)) !important;
  }

  .envelope-controls{
    grid-template-columns:repeat(8,minmax(92px,1fr)) !important;
  }
}


/* Synth keyboard octave control */
.keyboard-scale-control{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10px auto 8px;
  padding:8px 10px;
  width:min(420px,100%);
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(8,8,13,.58);
}
.keyboard-scale-control label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:145px;
  color:var(--muted);
  font-size:10px;
}
.keyboard-scale-control output{
  color:var(--text);
  font-size:10px;
}
.keyboard-scale-control input[type=range]{
  flex:1;
  min-width:120px;
}
@media(max-width:560px){
  .keyboard-scale-control{
    align-items:stretch;
    flex-direction:column;
  }
  .keyboard-scale-control label{
    width:100%;
  }
}


/* Virtual Tape Recorder */
.tape-recorder{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.tape-recorder-head{
  padding-top:0;
}
.tape-deck{
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:
    linear-gradient(
      180deg,
      rgba(20,19,29,.82),
      rgba(8,8,13,.94)
    );
}
.tape-window{
  position:relative;
  display:grid;
  grid-template-columns:68px minmax(50px,1fr) 68px;
  align-items:center;
  gap:8px;
  min-height:90px;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:
    linear-gradient(
      180deg,
      rgba(4,4,7,.95),
      rgba(11,10,16,.82)
    );
  overflow:hidden;
}
.tape-window::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(113,73,255,.05),
      rgba(255,66,208,.035),
      transparent
    );
  pointer-events:none;
}
.tape-reel{
  position:relative;
  width:62px;
  height:62px;
  margin:auto;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  background:
    radial-gradient(
      circle,
      #09090e 0 13%,
      rgba(166,108,255,.40) 14% 18%,
      #11111a 19% 42%,
      rgba(255,255,255,.08) 43% 45%,
      #09090e 46% 100%
    );
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.02),
    0 0 18px rgba(113,73,255,.08);
}
.tape-reel span{
  position:absolute;
  inset:14px;
  border-radius:50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,.28) 0 8deg,
      transparent 8deg 112deg,
      rgba(255,255,255,.28) 112deg 120deg,
      transparent 120deg 232deg,
      rgba(255,255,255,.28) 232deg 240deg,
      transparent 240deg 360deg
    );
}
.tape-deck.recording .tape-reel,
.tape-deck.playing .tape-reel{
  animation:tapeSpin 1.1s linear infinite;
}
.tape-deck.playing .tape-reel{
  animation-duration:.82s;
}
@keyframes tapeSpin{
  to{transform:rotate(360deg)}
}
.tape-path{
  position:relative;
  min-width:0;
  height:54px;
}
.tape-line{
  position:absolute;
  left:-8px;
  right:-8px;
  top:50%;
  height:2px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.16),
      rgba(166,108,255,.62),
      rgba(255,66,208,.58),
      rgba(255,255,255,.16)
    );
}
.tape-head{
  position:absolute;
  width:22px;
  height:18px;
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px 4px 8px 8px;
  background:#15151f;
}
.tape-counter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:rgba(0,0,0,.18);
}
.tape-counter span{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.tape-counter strong{
  color:#ece7ff;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
}
.tape-transport{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  margin-top:8px;
}
.tape-transport .btn{
  min-width:0;
  padding-left:6px;
  padding-right:6px;
}
.tape-record-button.active{
  border-color:rgba(255,66,208,.65);
  background:rgba(255,66,208,.15);
  color:#fff;
  box-shadow:0 0 14px rgba(255,66,208,.12);
}
.tape-transport .btn:disabled{
  opacity:.38;
  cursor:not-allowed;
}
@media(max-width:620px){
  .tape-window{
    grid-template-columns:54px minmax(34px,1fr) 54px;
  }
  .tape-reel{
    width:50px;
    height:50px;
  }
  .tape-transport{
    grid-template-columns:1fr 1fr;
  }
}
@media(prefers-reduced-motion:reduce){
  .tape-deck.recording .tape-reel,
  .tape-deck.playing .tape-reel{
    animation:none;
  }
}


/* 4-sequence switcher */
.sequence-switcher{
  margin:12px 0 10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(8,8,13,.48);
}
.sequence-switcher-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.sequence-switcher-head strong{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.sequence-switcher-head span,
.sequence-status{
  color:var(--muted);
  font-size:10px;
}
.sequence-buttons{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.sequence-btn.active{
  border-color:rgba(166,108,255,.56);
  box-shadow:0 0 16px rgba(113,73,255,.12);
  background:rgba(113,73,255,.16);
  color:#fff;
}
.sequence-status{
  margin-top:8px;
}
@media(max-width:640px){
  .sequence-buttons{
    grid-template-columns:1fr 1fr;
  }
  .sequence-switcher-head{
    flex-direction:column;
    align-items:flex-start;
  }
}



/* Collapsible sections */
.collapse-head-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.collapse-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:108px;
  white-space:nowrap;
}
.collapse-icon{
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  font-size:13px;
  line-height:1;
  flex:0 0 auto;
}
.collapse-label{
  letter-spacing:.04em;
}
.collapsible-body[hidden]{
  display:none !important;
}
.collapse-hint{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding:12px 14px;
  border:1px dashed rgba(166,108,255,.34);
  border-radius:14px;
  background:rgba(113,73,255,.08);
}
.collapse-hint span{
  color:var(--muted);
  font-size:11px;
}
.collapse-reopen{
  min-width:96px;
}
.is-collapsed{
  border-color:rgba(166,108,255,.26);
}
.synth-workspace-card.is-collapsed .synth-background-layer{
  opacity:.32;
}
.sequencer-card .card-head,
.synth-workspace-head,
.recorder-head,
.mixing-console-head{
  flex-wrap:wrap;
}
.recorder-head .collapse-head-actions{
  margin-left:0;
}
@media(max-width:760px){
  .collapse-head-actions{
    width:100%;
    margin-left:0;
  }
  .collapse-toggle{
    width:100%;
  }
  .collapse-hint{
    flex-direction:column;
    align-items:stretch;
  }
  .collapse-reopen{
    width:100%;
  }
}


/* Collapse control only in the top-right */
.collapse-head-actions{
  margin-left:auto !important;
  width:auto !important;
  flex:0 0 auto !important;
  align-self:flex-start;
}
.collapse-toggle{
  width:auto !important;
  min-width:108px;
}
.recorder-head .collapse-head-actions{
  margin-left:auto !important;
}
.collapse-hint{
  display:none !important;
}
@media(max-width:760px){
  .collapse-head-actions{
    width:auto !important;
    margin-left:auto !important;
  }
  .collapse-toggle{
    width:auto !important;
  }
}

/* Sequencer sample track source */
.sample-track-source{
  display:grid;
  gap:6px;
  margin:9px 0 10px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.018);
}
.sample-track-source label{
  color:var(--muted);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sample-track-source select{
  width:100%;
  min-height:34px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#101018;
  color:var(--text);
  padding:0 8px;
}


.pattern-edit-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
}
.pattern-edit-actions .btn{
  min-width:112px;
}
.pattern-edit-actions .btn:disabled{
  opacity:.38;
  cursor:not-allowed;
}
.pattern-edit-actions .btn.copied{
  border-color:rgba(166,108,255,.55);
  background:rgba(113,73,255,.14);
}
@media(max-width:640px){
  .pattern-edit-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .pattern-edit-actions .btn{
    min-width:0;
  }
}


/* Final collapse + sequencer formatting fixes */
.synth-workspace-card.is-collapsed{
  min-height:0 !important;
}
.synth-workspace-card.is-collapsed .synth-background-layer{
  display:none !important;
}
.synth-workspace-card.is-collapsed .synth-workspace-content{
  min-height:0 !important;
}
.synth-workspace-card.is-collapsed .synth-workspace-head{
  border-bottom:0;
}

/* Make sequencer body match the visual rhythm of other sections */
.sequencer-collapse-body{
  padding:16px 18px 18px;
}
.sequencer-collapse-body .sequence-switcher{
  margin:0 0 12px;
}
.sequencer-collapse-body .seq-wrap{
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(8,8,13,.44);
}
.sequencer-card.is-collapsed > .card-head{
  border-bottom:0;
}

/* Keep section headers consistent */
.sequencer-card > .card-head,
.synth-workspace-head{
  min-height:58px;
}
.sequencer-card > .card-head > span,
.synth-workspace-head > span{
  margin-right:8px;
}
.pattern-edit-actions{
  padding-top:2px;
}

/* Do not let older mobile rules stretch the top-right collapse control */
@media(max-width:760px){
  .collapse-head-actions{
    width:auto !important;
    margin-left:auto !important;
  }
  .collapse-toggle{
    width:auto !important;
    min-width:96px;
  }
  .sequencer-collapse-body{
    padding:12px;
  }
}


/* Per-pad sample chooser */
.step-sample-select{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.step.note-pad .step-sample-select{
  font-size:8px;
}


/* Audio recorder looping + drag/drop */
.audio-drop-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  margin-bottom:8px;
  padding:7px 10px;
  border:1px dashed rgba(166,108,255,.28);
  border-radius:10px;
  background:rgba(113,73,255,.055);
  color:var(--muted);
  font-size:10px;
  text-align:center;
}
.audio-track-row.drag-over{
  background:
    linear-gradient(
      90deg,
      rgba(113,73,255,.12),
      rgba(255,66,208,.08)
    );
  box-shadow:
    inset 0 0 0 1px rgba(166,108,255,.35);
}
.audio-clip{
  display:flex;
  align-items:center;
  gap:4px;
  padding-right:4px;
}
.audio-clip > span{
  flex:1;
  min-width:0;
}
.audio-clip-controls{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  gap:3px;
  margin-left:auto;
}
.audio-clip-loop{
  min-width:30px;
  height:20px;
  padding:0 5px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:5px;
  background:rgba(5,5,9,.72);
  color:var(--muted);
  font-size:7px;
  cursor:pointer;
}
.audio-clip-loop.on{
  color:#fff;
  border-color:rgba(166,108,255,.55);
  background:rgba(113,73,255,.30);
}
.audio-clip.sample-clip{
  border-color:rgba(255,66,208,.40);
  background:
    linear-gradient(
      180deg,
      rgba(255,66,208,.25),
      rgba(113,73,255,.16)
    );
}
.sample-slot[draggable="true"]{
  cursor:grab;
}
.sample-slot.dragging{
  opacity:.55;
}


/* Move Samples controls into Audio Recorder without changing sequencer markup */
.audio-recorder-sample-actions{
  display:flex;
  justify-content:flex-end;
  margin:0 0 8px;
}
.audio-recorder-sample-actions .sample-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
}
.audio-recorder-sample-actions .btn,
.audio-recorder-sample-actions .sample-add-button{
  min-width:110px;
}
@media(max-width:620px){
  .audio-recorder-sample-actions{
    justify-content:stretch;
  }
  .audio-recorder-sample-actions .sample-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .audio-recorder-sample-actions .btn,
  .audio-recorder-sample-actions .sample-add-button{
    width:100%;
    min-width:0;
    text-align:center;
  }
}


/* Samples now live inside Audio Recorder */
.audio-recorder .sample-loader{
  margin:10px 0 12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(8,8,13,.48);
}
.audio-recorder .sample-loader .embedded-mixer-head{
  padding:0 0 10px;
}
.audio-recorder .sample-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.audio-recorder .sample-track-source{
  margin:0 0 10px;
}
.audio-recorder .sample-slots{
  max-height:220px;
  overflow:auto;
}
@media(max-width:620px){
  .audio-recorder .sample-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .audio-recorder .sample-actions .btn,
  .audio-recorder .sample-actions .sample-add-button{
    width:100%;
    text-align:center;
  }
}


.records-section{
  margin:14px 16px 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(8,8,13,.58);
}
.records-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.records-head>div{
  display:grid;
  gap:3px;
}
.records-head strong{
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.records-head span{
  color:var(--muted);
  font-size:10px;
}
.records-list{
  display:grid;
  gap:8px;
}
.records-empty{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(255,255,255,.10);
  border-radius:10px;
  color:var(--muted);
  font-size:10px;
}
.record-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.018);
}
.record-info{
  min-width:0;
  display:grid;
  gap:3px;
}
.record-name{
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.record-meta{
  color:var(--muted);
  font-size:9px;
}
.record-controls{
  display:flex;
  gap:6px;
}
@media(max-width:620px){
  .records-head,
  .record-item{
    align-items:stretch;
    flex-direction:column;
  }
  .record-controls{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}


/* Records positioned directly below Virtual Tape Recorder */
.master-fx-section .records-section{
  margin:12px 0 0;
  padding:12px;
}


/* Native synth visual field: no external Three.js dependency */
#three{
  overflow:hidden;
}
#three .native-synth-field{
  display:block;
  width:100%;
  height:100%;
}


/* Restore clearly visible four-track Audio Recorder waveform/timeline area */
.audio-timeline-wrap{
  min-height:264px;
}
.audio-timeline{
  min-height:232px;
}
.audio-track-row{
  min-height:58px;
}
.audio-track-row::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(166,108,255,.16),
    rgba(255,66,208,.16),
    transparent
  );
  pointer-events:none;
}
.audio-track-row:nth-child(odd){
  background-color:rgba(255,255,255,.008);
}
.audio-track-row:nth-child(even){
  background-color:rgba(113,73,255,.012);
}


/* Piano keyboard visibility safeguard */
#synthKeyboard{
  position:relative;
  z-index:8;
  min-height:72px;
  opacity:1!important;
  visibility:visible!important;
}
#synthKeyboard .synth-key{
  display:flex!important;
  min-height:68px;
  position:relative;
  z-index:1;
}
@media(max-width:680px){
  #synthKeyboard{
    grid-template-columns:repeat(13,minmax(46px,1fr));
    overflow-x:auto;
  }
  #synthKeyboard .synth-key:nth-child(n){
    display:flex!important;
  }
}


/* Reliable live synth oscilloscope */
#oscVisualizer{
  display:block!important;
  width:100%!important;
  height:220px!important;
  min-height:220px!important;
  opacity:1!important;
  visibility:visible!important;
  border-radius:12px;
  background:#050508;
}
.osc-visualizer-panel{
  position:relative;
  z-index:8;
  min-height:280px;
}


/* Proper one-octave piano keyboard */
#synthKeyboard{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:132px!important;
  min-height:132px!important;
  margin-top:12px!important;
  overflow:hidden!important;
  border-radius:12px;
  background:rgba(4,4,8,.72);
  border:1px solid rgba(255,255,255,.08);
}
#synthKeyboard .synth-key{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:12.5%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 2px 9px!important;
  border-radius:0 0 8px 8px!important;
  border:1px solid rgba(17,14,24,.42)!important;
  background:linear-gradient(180deg,#ffffff,#e5e0ec)!important;
  color:#17141d!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  font-size:9px!important;
  font-weight:700!important;
  z-index:1!important;
  transform:none!important;
  left:calc(var(--white-slot) * 12.5%)!important;
}
#synthKeyboard .synth-key.black{
  top:0!important;
  bottom:auto!important;
  width:7.2%!important;
  height:62%!important;
  left:calc((var(--black-slot) * 12.5%) - 3.6%)!important;
  padding:0!important;
  border-radius:0 0 6px 6px!important;
  border:1px solid rgba(0,0,0,.72)!important;
  background:linear-gradient(180deg,#282431,#0e0c13)!important;
  color:#ddd7ef!important;
  box-shadow:0 5px 10px rgba(0,0,0,.32)!important;
  z-index:3!important;
}
#synthKeyboard .synth-key.on{
  background:linear-gradient(180deg,#fff,#a66cff)!important;
  box-shadow:0 0 22px rgba(166,108,255,.46)!important;
}
#synthKeyboard .synth-key.black.on{
  background:linear-gradient(180deg,#ff42d0,#7149ff)!important;
}
@media(max-width:680px){
  #synthKeyboard{
    min-width:680px!important;
  }
  .synth-box{
    overflow-x:auto;
  }
}


.page-reactive-pulse.beat{
  opacity:.22!important;
  transform:scale(1.015);
}


/* Visible rotary motion: rotate the indicator, not the symmetric knob body */
.synth-rotary-knob,
.rotary-knob{
  --knob-angle:0deg;
  transform:none!important;
}
.synth-rotary-knob::after{
  transform:
    translateX(-50%)
    rotate(var(--knob-angle))!important;
  transform-origin:
    50%
    calc(100% + 7px)!important;
}
.rotary-knob::after{
  transform:
    translateX(-50%)
    rotate(var(--knob-angle))!important;
  transform-origin:
    50%
    calc(100% + 4px)!important;
}
.synth-rotary-knob::after,
.rotary-knob::after{
  transition:transform .045s linear;
}


#oscVisualizer{
  display:block!important;
  width:100%!important;
  height:220px!important;
  min-height:220px!important;
  opacity:1!important;
  visibility:visible!important;
  background:#050508!important;
}


/* Dedicated visible indicators for Master Filter and Bass Filter knobs */
.instrument-master-filter .rotary-knob::after,
.instrument-bass-filter .rotary-knob::after{
  display:none!important;
}
.filter-knob-indicator{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:23px;
  border-radius:2px;
  background:linear-gradient(var(--magenta),var(--violet));
  box-shadow:0 0 9px rgba(166,108,255,.48);
  pointer-events:none;
  transform-origin:50% 100%;
  transform:
    translate(-50%,-100%)
    rotate(0deg);
  transition:transform .04s linear;
}


/* Pattern bank reliability fix */
#sequenceButtons{
  position:relative;
  z-index:8;
  pointer-events:auto;
}
#sequenceButtons .sequence-btn{
  position:relative;
  z-index:9;
  pointer-events:auto;
  cursor:pointer;
  min-height:40px;
  touch-action:manipulation;
}
#sequenceButtons .sequence-btn.active{
  outline:1px solid rgba(166,108,255,.45);
  outline-offset:1px;
}


/* Keyboard octave slider reliability fix */
.keyboard-scale-control{
  position:relative;
  z-index:20;
  pointer-events:auto;
}
#keyScale{
  position:relative;
  z-index:21;
  pointer-events:auto!important;
  cursor:pointer;
  touch-action:manipulation;
}
#keyScaleOut{
  min-width:58px;
  text-align:right;
}


/* Dual synth mixer: legacy bass filter hidden, DOM retained for compatibility */
.instrument-bass-filter{
  display:none!important;
}
.console-instruments .mixer{
  grid-template-columns:repeat(8,minmax(54px,1fr));
}


/* nanoKONTROL MIDI Learn */
.midi-learn-menu{
  position:fixed;
  z-index:9999;
  display:none;
  min-width:190px;
  padding:7px;
  border:1px solid rgba(166,108,255,.34);
  border-radius:12px;
  background:rgba(8,8,13,.97);
  box-shadow:0 18px 50px rgba(0,0,0,.48);
  backdrop-filter:blur(18px);
}
.midi-learn-menu.open{
  display:block;
}
.midi-learn-menu button{
  width:100%;
  min-height:34px;
  padding:7px 9px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#f7f5fb;
  text-align:left;
  font:inherit;
  font-size:10px;
  cursor:pointer;
}
.midi-learn-menu button:hover{
  background:rgba(113,73,255,.16);
}
.midi-learn-menu .midi-learn-meta{
  padding:6px 9px 8px;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}
.midi-learn-target{
  outline:2px solid rgba(255,66,208,.78)!important;
  outline-offset:3px;
  box-shadow:0 0 22px rgba(255,66,208,.20)!important;
}
.midi-mapped{
  box-shadow:0 0 0 1px rgba(113,73,255,.36)!important;
}
#midiLearnToast{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:9998;
  transform:translateX(-50%) translateY(16px);
  opacity:0;
  pointer-events:none;
  padding:9px 13px;
  border:1px solid rgba(166,108,255,.32);
  border-radius:10px;
  background:rgba(8,8,13,.94);
  color:#fff;
  font-size:10px;
  letter-spacing:.04em;
  transition:opacity .16s ease,transform .16s ease;
}
#midiLearnToast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}


/* Synth 1 / Synth 2 editor switch */
.synth-selector{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:min(520px,100%);
  margin:0 auto 12px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(8,8,13,.68);
}
.synth-selector>span{
  color:var(--muted);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.synth-selector-buttons{
  display:flex;
  gap:6px;
}
.synth-select-btn{
  min-width:82px;
  min-height:34px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:#101018;
  color:var(--muted);
  font:inherit;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}
.synth-select-btn.active{
  color:#fff;
  border-color:rgba(255,66,208,.55);
  background:linear-gradient(
    135deg,
    rgba(113,73,255,.30),
    rgba(255,66,208,.20)
  );
  box-shadow:0 0 18px rgba(255,66,208,.10);
}
@media(max-width:560px){
  .synth-selector{
    align-items:stretch;
    flex-direction:column;
  }
  .synth-selector-buttons{
    width:100%;
  }
  .synth-select-btn{
    flex:1;
  }
}


/* ===== THREE-SECTION GROOVEBOX LAYOUT ===== */
.groovebox-mixer-section{
  width:calc(100% - 24px);
  max-width:none;
  margin:16px auto 0;
}
.track-name{
  gap:7px;
}
.track-mixer-assign{
  width:64px;
  min-width:64px;
  padding:5px 6px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;
  background:#0b0b12;
  color:#d8d2ed;
  font-size:9px;
  letter-spacing:.05em;
}
.assignable-mixer{
  display:grid !important;
  grid-template-columns:repeat(8,minmax(112px,1fr)) !important;
  gap:0 !important;
  width:100%;
  overflow-x:auto;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(8,8,13,.72);
}
.mixer-console-strip{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  min-width:112px;
  padding:14px 9px 12px !important;
  border-right:1px solid rgba(255,255,255,.07) !important;
  border-bottom:0 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005));
}
.mixer-console-strip:last-child{
  border-right:0 !important;
}
.mixer-channel-head{
  width:100%;
  min-height:46px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  padding-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mixer-channel-head strong{
  font-size:11px;
  letter-spacing:.12em;
}
.mixer-assignment-label{
  display:block;
  max-width:100%;
  min-height:22px;
  color:var(--muted);
  font-size:9px;
  line-height:1.2;
  overflow:hidden;
}
.mixer-knob-control,
.mixer-fader-control{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mixer-knob-wrap{
  position:relative;
  width:42px;
  height:42px;
}
.mixer-knob-input{
  position:absolute;
  inset:0;
  width:42px;
  height:42px;
  opacity:0;
  z-index:2;
  cursor:ns-resize;
}
.mixer-knob-face{
  --angle:0deg;
  position:absolute;
  inset:3px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:
    radial-gradient(circle at 40% 35%,rgba(255,255,255,.12),transparent 28%),
    linear-gradient(145deg,#181821,#09090e);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.35);
  transform:rotate(var(--angle));
  pointer-events:none;
}
.mixer-knob-face::after{
  content:"";
  position:absolute;
  width:2px;
  height:12px;
  left:50%;
  top:4px;
  transform:translateX(-50%);
  border-radius:2px;
  background:linear-gradient(#fff,#ff38d1);
  box-shadow:0 0 6px rgba(255,56,209,.4);
}
.mixer-knob-control output,
.mixer-fader-control output{
  min-height:12px;
  color:#d8d2ed;
  font-size:8px;
  letter-spacing:0;
}
.mixer-channel-fader{
  writing-mode:vertical-lr !important;
  direction:rtl !important;
  appearance:slider-vertical !important;
  -webkit-appearance:slider-vertical !important;
  width:22px !important;
  height:150px !important;
  margin:2px auto !important;
}
.mixer-channel-buttons{
  margin-top:auto;
}
.groovebox-mixer-section .mixing-console-head{
  padding:14px 16px;
}
.groovebox-mixer-section .mixing-console-body{
  padding:0 14px 14px;
}
.groovebox-mixer-section .embedded-mixer-row{
  display:block !important;
}
.groovebox-mixer-section .console-column{
  width:100% !important;
}
.groovebox-mixer-section .instrument-master-filter,
.groovebox-mixer-section .instrument-bass-filter{
  display:none !important;
}
@media(max-width:980px){
  .assignable-mixer{
    grid-template-columns:repeat(8,112px) !important;
  }
}



/* ===== MIDI COMPOSITION / PIANO ROLL ===== */
.midi-compose{margin:12px 16px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(9,9,14,.86);overflow:hidden}
.midi-compose-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.midi-mode-tabs,.midi-transport,.midi-edit-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.midi-mode-btn.active,.midi-target-btn.active,.midi-record-btn.recording{background:linear-gradient(135deg,var(--violet),var(--magenta));border-color:transparent;color:#fff}
.midi-record-btn.recording{animation:midiRecPulse 1s ease-in-out infinite alternate}
@keyframes midiRecPulse{from{box-shadow:0 0 0 rgba(255,56,209,0)}to{box-shadow:0 0 20px rgba(255,56,209,.35)}}
.midi-compose-body{padding:12px 14px 14px}
.midi-toolbar{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:12px}
.midi-targets{display:flex;gap:7px}.midi-status-strip{min-width:0;color:var(--muted);font-size:11px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.midi-quantize{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}
.midi-quantize select{border:1px solid var(--line);background:#0e0e16;color:var(--text);border-radius:9px;padding:7px 8px}
.piano-roll-shell{display:grid;grid-template-columns:54px minmax(700px,1fr);grid-template-rows:26px 360px 74px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#08080d}
.piano-roll-corner{grid-column:1;grid-row:1;background:#0d0d14;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.piano-roll-ruler{grid-column:2;grid-row:1;position:relative;min-width:700px;border-bottom:1px solid var(--line);background:#0d0d14}
.piano-roll-ruler span{position:absolute;top:6px;font-size:9px;color:var(--muted);transform:translateX(4px)}
.piano-roll-keys{grid-column:1;grid-row:2;position:relative;border-right:1px solid var(--line);background:#0c0c12;overflow:hidden}
.piano-roll-key{position:absolute;left:0;right:0;border-bottom:1px solid rgba(255,255,255,.05);padding:2px 5px;font-size:9px;color:#aaa;display:flex;align-items:flex-start;justify-content:flex-end}
.piano-roll-key.black{background:#08080c;color:#777}
.piano-roll-grid{grid-column:2;grid-row:2;position:relative;min-width:700px;cursor:crosshair;background-color:#08080d;background-image:linear-gradient(to right,rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px);background-size:25% 100%,6.25% 100%,100% calc(100% / 25)}
.midi-note{position:absolute;min-width:5px;height:calc(100% / 25 - 2px);border:1px solid rgba(255,255,255,.35);border-radius:4px;background:linear-gradient(90deg,var(--violet),var(--magenta));cursor:grab;overflow:visible;box-shadow:0 0 8px rgba(154,98,255,.15)}
.midi-note.selected{outline:2px solid #fff;outline-offset:1px}.midi-note-resize{position:absolute;right:-2px;top:0;width:7px;height:100%;cursor:ew-resize}
.velocity-label{grid-column:1;grid-row:3;border-right:1px solid var(--line);border-top:1px solid var(--line);font-size:9px;color:var(--muted);padding:6px;background:#0c0c12}
.velocity-lane{grid-column:2;grid-row:3;position:relative;min-width:700px;border-top:1px solid var(--line);background-image:linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px);background-size:6.25% 100%}
.velocity-bar{position:absolute;bottom:0;width:5px;min-height:3px;background:linear-gradient(to top,var(--violet),var(--magenta));border-radius:2px 2px 0 0;opacity:.8}
.midi-empty-hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:rgba(255,255,255,.24);font-size:12px;letter-spacing:.04em}.piano-roll-grid.has-notes .midi-empty-hint{display:none}
.midi-step-note-badge{font-size:9px;color:var(--muted);margin-left:4px}
@media(max-width:760px){.midi-toolbar{grid-template-columns:1fr}.midi-status-strip{order:3}.piano-roll-shell{grid-template-columns:44px minmax(660px,1fr)}}


.arp-panel{margin:10px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(12,12,18,.72);display:flex;align-items:center;gap:10px;flex-wrap:wrap}.arp-panel strong{font-size:11px;letter-spacing:.08em;text-transform:uppercase}.arp-panel label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px}.arp-panel select{background:#0d0d14;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px}.arp-panel .btn.active{background:linear-gradient(135deg,var(--violet),var(--magenta));border-color:transparent}.arp-status{margin-left:auto;color:var(--muted);font-size:10px;min-width:90px;text-align:right}@media(max-width:760px){.arp-status{width:100%;text-align:left;margin-left:0}}

/* ===== PROJECT SAVE + SECTION ALIGNMENT ===== */
.sequencer-card > .sequencer-collapse-body{
  padding:16px 18px 18px;
}
.sequencer-card .seq-wrap{
  padding:0;
  margin-top:14px;
}
.sequencer-card .sequence-switcher,
.sequencer-card .midi-compose{
  margin-left:0;
  margin-right:0;
}
.groovebox-mixer-section > .embedded-mixer,
.groovebox-mixer-section > [data-collapse-section="mixing-console"]{
  padding-left:18px;
  padding-right:18px;
}
.project-tools{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.project-save-status{
  min-width:72px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.04em;
  text-align:right;
}
.project-save-status.saved{color:#d9cfff}
.project-save-status.error{color:#ff9edc}
@media(max-width:760px){
  .sequencer-card > .sequencer-collapse-body{padding:12px;}
  .groovebox-mixer-section > .embedded-mixer,
  .groovebox-mixer-section > [data-collapse-section="mixing-console"]{padding-left:12px;padding-right:12px;}
  .project-save-status{width:100%;text-align:left;}
}


/* ===== extracted from groovebox.html ===== */

/* ==================================================
   MIXER SETTINGS — SIMPLE NATIVE MENU
================================================== */
.groovebox-mixer-section .mixing-console-head{
  position:relative;
  overflow:visible !important;
}
.groovebox-mixer-section .mixer-settings-menu{
  position:relative;
  margin-left:auto;
  z-index:80;
}
.groovebox-mixer-section .mixer-settings-menu > summary{
  list-style:none;
  cursor:pointer;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#11111a;
  color:var(--text);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  user-select:none;
}
.groovebox-mixer-section .mixer-settings-menu > summary::-webkit-details-marker{display:none;}
.groovebox-mixer-section .mixer-settings-menu > summary::after{
  content:"▾";
  margin-left:8px;
  color:var(--magenta);
}
.groovebox-mixer-section .mixer-settings-menu[open] > summary::after{content:"▴";}
.groovebox-mixer-section .mixer-settings-menu-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(520px,calc(100vw - 44px));
  max-height:70vh;
  overflow:auto;
  padding:10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:rgba(8,8,12,.98);
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 0 1px rgba(154,98,255,.05);
  backdrop-filter:blur(18px);
}
.groovebox-mixer-section .mixer-settings-group{
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.groovebox-mixer-section .mixer-settings-group + .mixer-settings-group{margin-top:8px;}
.groovebox-mixer-section .mixer-settings-group > summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  padding:10px 12px;
  color:var(--text);
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.groovebox-mixer-section .mixer-settings-group > summary::-webkit-details-marker{display:none;}
.groovebox-mixer-section .mixer-settings-group > summary::after{content:"+";color:var(--violet);font-size:16px;}
.groovebox-mixer-section .mixer-settings-group[open] > summary::after{content:"−";}
.groovebox-mixer-section .mixer-settings-group-body{
  padding:0 12px 12px;
  border-top:1px solid rgba(255,255,255,.07);
}
.groovebox-mixer-section .mixer-settings-group-body .audio-settings-grid,
.groovebox-mixer-section .mixer-settings-group-body .midi-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding-top:12px;
}
.groovebox-mixer-section .mixer-settings-group-body .mixer-midi,
.groovebox-mixer-section .mixer-settings-group-body .midi-panel{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
.groovebox-mixer-section .mixer-settings-group-body .mixer-midi-head{display:none !important;}
.groovebox-mixer-section .mixer-settings-group-body .audio-status,
.groovebox-mixer-section .mixer-settings-group-body .midi-status{grid-column:1 / -1;}
@media(max-width:680px){
  .groovebox-mixer-section .mixer-settings-menu-panel{right:-8px;width:min(420px,calc(100vw - 28px));}
  .groovebox-mixer-section .mixer-settings-group-body .audio-settings-grid,
  .groovebox-mixer-section .mixer-settings-group-body .midi-grid{grid-template-columns:1fr;}
}

/* ==================================================
   PIANO ROLL — AUTO-FRAMED NOTE RANGE
================================================== */
.piano-roll-shell{
  grid-template-rows:26px 430px 74px !important;
}
.piano-roll-keys,
.piano-roll-grid{
  min-height:430px !important;
}

/* ==================================================
   SYNTH WORKSPACE — MAXIMUM PRACTICAL COMPACTION
================================================== */
#synth-section.synth-workspace-card{
  min-height:0 !important;
  height:auto !important;
}
#synth-section .synth-workspace-content{
  min-height:0 !important;
}
#synth-section .synth-workspace-head{
  min-height:0 !important;
  padding:8px 12px !important;
}
#synth-section .synth-workspace-head h2{
  margin:0 !important;
}
#synth-section .synth-box.collapsible-body{
  width:calc(100% - 12px) !important;
  min-width:0 !important;
  margin:6px !important;
  padding:8px !important;
  border-radius:12px !important;
}
#synth-section .synth-head{
  margin:0 0 5px !important;
  min-height:0 !important;
}
#synth-section .synth-selector{
  margin:0 0 5px !important;
  min-height:0 !important;
}
#synth-section .arp-panel{
  margin:5px 0 !important;
  padding:6px 8px !important;
  gap:5px 7px !important;
  min-height:0 !important;
}
#synth-section .osc-grid{
  gap:6px !important;
  margin:0 !important;
}
#synth-section .osc-panel,
#synth-section .osc-visualizer-panel,
#synth-section .synth-fm-filter-panel,
#synth-section .envelope-panel,
#synth-section .fm-module{
  padding:7px !important;
  border-radius:10px !important;
}
#synth-section .osc-title,
#synth-section .fm-module-title{
  margin-bottom:5px !important;
  min-height:0 !important;
}
#synth-section .synth-controls,
#synth-section .fm-lfo-layout,
#synth-section .fm-filter-controls,
#synth-section .lfo-controls,
#synth-section .envelope-controls{
  gap:5px !important;
}
#synth-section .knob-card{
  padding:6px !important;
  min-height:0 !important;
  gap:4px !important;
}
#synth-section .synth-rotary-wrap,
#synth-section .synth-rotary-input,
#synth-section .synth-rotary-knob{
  width:44px !important;
  height:44px !important;
}
#synth-section .osc-visualizer-panel canvas{
  height:140px !important;
  min-height:140px !important;
  max-height:140px !important;
}
#synth-section .synth-keyboard{
  margin-top:6px !important;
  gap:3px !important;
}
#synth-section .synth-key{
  min-height:42px !important;
  padding:5px 7px !important;
}
#synth-section .collapse-toggle{
  padding:6px 10px !important;
  min-height:30px !important;
}

/* When collapsed, synth becomes essentially header-only. */
#synth-section.is-collapsed{
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
}
#synth-section.is-collapsed .synth-background-layer,
#synth-section.is-collapsed .synth-box{
  display:none !important;
}
#synth-section.is-collapsed .synth-workspace-content{
  min-height:0 !important;
  height:auto !important;
}
#synth-section.is-collapsed .synth-workspace-head{
  padding:6px 10px !important;
  border-bottom:0 !important;
}

@media(max-width:1100px){
  #synth-section .osc-grid{
    grid-template-columns:1fr 220px 1fr !important;
    overflow-x:auto !important;
  }
}

/* ==================================================
   SEQUENCER — TRACK NAME ABOVE CONTROLS
================================================== */
.sequencer-card .track-name{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  align-items:start !important;
  justify-items:stretch !important;
  gap:6px !important;
}
.sequencer-card .track-name > span:first-child{
  display:block !important;
  width:100% !important;
  font-size:12px !important;
  line-height:1.15 !important;
  color:#ddd8ed !important;
  white-space:nowrap !important;
}
.sequencer-card .track-name-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:5px !important;
  width:100% !important;
}
.sequencer-card .track-mixer-assign{flex:0 0 64px !important;}
.sequencer-card .track-buttons{flex:0 0 auto !important;}

/* ======================================================================
   GROOVEBOX MIXER — FINAL CONSOLE LAYOUT
   Single canonical mixer section inside groovebox.css.
   ====================================================================== */

/* ---------- outer console ---------- */
.groovebox-mixer-section .mixing-console-body{
  overflow-x:auto !important;
  overflow-y:visible !important;
}

.groovebox-mixer-section .embedded-mixer-row{
  display:grid !important;
  grid-template-columns:minmax(920px,1fr) 440px !important;
  align-items:stretch !important;
  gap:12px !important;
  width:100% !important;
}

.groovebox-mixer-section .console-instruments,
.groovebox-mixer-section .console-master{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  overflow:visible !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:14px !important;
  background:rgba(5,5,9,.46) !important;
}

.groovebox-mixer-section .mixer-section,
.groovebox-mixer-section .master-fx-section{
  height:100% !important;
  min-height:0 !important;
}

/* ---------- 8 repeated channel strips ---------- */
.groovebox-mixer-section #mixer.assignable-mixer{
  display:grid !important;
  grid-template-columns:repeat(8,minmax(108px,1fr)) !important;
  gap:0 !important;
  width:100% !important;
  min-width:864px !important;
  align-items:stretch !important;
}

.groovebox-mixer-section .mixer-console-strip{
  display:grid !important;
  grid-template-rows:38px 286px 222px !important;
  justify-items:center !important;
  align-items:start !important;
  width:auto !important;
  min-width:108px !important;
  height:546px !important;
  min-height:546px !important;
  padding:8px 8px 10px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.09) !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,.004)) !important;
}
.groovebox-mixer-section .mixer-console-strip:last-child{border-right:0 !important;}

.groovebox-mixer-section .mixer-channel-head{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  height:38px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.groovebox-mixer-section .mixer-channel-head strong{
  font-size:14px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  color:#fff !important;
}

/* ---------- rotary control zone ---------- */
.groovebox-mixer-section .mixer-knob-stack{
  display:grid !important;
  grid-template-rows:repeat(4,68px) !important;
  gap:2px !important;
  align-content:start !important;
  justify-items:center !important;
  width:100% !important;
  height:286px !important;
  padding-top:6px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

.groovebox-mixer-section .mixer-knob-control{
  display:grid !important;
  grid-template-rows:12px 42px 10px !important;
  justify-items:center !important;
  align-items:center !important;
  width:76px !important;
  height:66px !important;
  margin:0 !important;
  padding:0 !important;
  gap:1px !important;
}
.groovebox-mixer-section .mixer-knob-control > span:first-child{
  font-size:9px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  color:#f5f5f7 !important;
}
.groovebox-mixer-section .mixer-knob-wrap{
  position:relative !important;
  width:42px !important;
  height:42px !important;
}
.groovebox-mixer-section .mixer-knob-input{
  position:absolute !important;
  inset:0 !important;
  width:42px !important;
  height:42px !important;
  opacity:0 !important;
  z-index:3 !important;
  cursor:pointer !important;
}
.groovebox-mixer-section .mixer-knob-face{
  position:absolute !important;
  inset:2px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:
    radial-gradient(circle at 38% 30%,rgba(255,255,255,.16),transparent 27%),
    linear-gradient(145deg,#1b1a22,#09090e) !important;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.025),0 1px 6px rgba(0,0,0,.65) !important;
  transform:rotate(var(--angle,-135deg)) !important;
}
.groovebox-mixer-section .mixer-knob-face::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:3px !important;
  width:2px !important;
  height:13px !important;
  transform:translateX(-50%) !important;
  border-radius:2px !important;
  background:linear-gradient(#f7f3ff,#ff38d1) !important;
  box-shadow:0 0 6px rgba(255,56,209,.38) !important;
}
.groovebox-mixer-section .mixer-knob-control output{
  font-size:8px !important;
  line-height:1 !important;
  color:#9d99ad !important;
}

/* ---------- shared channel fader ---------- */
.groovebox-mixer-section .mixer-fader-control,
.groovebox-mixer-section .master-console-fader{
  display:grid !important;
  grid-template-rows:16px 190px 14px !important;
  justify-items:center !important;
  align-items:start !important;
  width:100% !important;
  height:222px !important;
  min-height:222px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.groovebox-mixer-section .mixer-fader-label{
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  color:#c9c3dc !important;
}
.groovebox-mixer-section .mixer-fader-slot{
  position:relative !important;
  display:block !important;
  justify-self:center !important;
  width:44px !important;
  height:190px !important;
  margin:0 auto !important;
  overflow:visible !important;
}
.groovebox-mixer-section .mixer-fader-slot::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  left:50% !important;
  top:0 !important;
  width:8px !important;
  height:190px !important;
  transform:translateX(-50%) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:5px !important;
  background:linear-gradient(to bottom,#9a62ff 0%,#40216f 44%,#401530 65%,#ff38d1 100%) !important;
  box-shadow:inset 0 0 6px rgba(0,0,0,.72),0 0 10px rgba(154,98,255,.09) !important;
}
.groovebox-mixer-section .mixer-fader-scale{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:repeating-linear-gradient(to bottom,transparent 0 15px,rgba(255,255,255,.12) 15px 16px,transparent 16px 31px) !important;
  opacity:.5 !important;
  -webkit-mask:linear-gradient(90deg,#000 0 7px,transparent 7px 37px,#000 37px 44px) !important;
          mask:linear-gradient(90deg,#000 0 7px,transparent 7px 37px,#000 37px 44px) !important;
}

/* Native range is horizontal, rotated as one centered object.
   This avoids browser-dependent sideways vertical-range thumbs. */
.groovebox-mixer-section .mixer-channel-fader,
.groovebox-mixer-section .master-aligned-fader{
  position:absolute !important;
  z-index:2 !important;
  left:50% !important;
  top:50% !important;
  width:190px !important;
  min-width:190px !important;
  max-width:190px !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  margin:0 !important;
  padding:0 !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center center !important;
  writing-mode:horizontal-tb !important;
  direction:ltr !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
.groovebox-mixer-section .mixer-channel-fader::-webkit-slider-runnable-track,
.groovebox-mixer-section .master-aligned-fader::-webkit-slider-runnable-track{
  height:1px !important;
  background:transparent !important;
  border:0 !important;
}
.groovebox-mixer-section .mixer-channel-fader::-webkit-slider-thumb,
.groovebox-mixer-section .master-aligned-fader::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  width:34px !important;
  height:18px !important;
  margin-top:-8px !important;
  border:1px solid rgba(255,255,255,.50) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#34313d,#121117) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.65),0 0 0 1px rgba(154,98,255,.16) !important;
}
.groovebox-mixer-section .mixer-channel-fader::-moz-range-track,
.groovebox-mixer-section .master-aligned-fader::-moz-range-track{
  height:1px !important;
  background:transparent !important;
  border:0 !important;
}
.groovebox-mixer-section .mixer-channel-fader::-moz-range-thumb,
.groovebox-mixer-section .master-aligned-fader::-moz-range-thumb{
  width:34px !important;
  height:18px !important;
  border:1px solid rgba(255,255,255,.50) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#34313d,#121117) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.65),0 0 0 1px rgba(154,98,255,.16) !important;
}
.groovebox-mixer-section .mixer-fader-control output,
.groovebox-mixer-section .master-console-fader output{
  align-self:end !important;
  font-size:8px !important;
  line-height:1 !important;
  color:#a9a4b8 !important;
}


/* ==================================================
   MASTER FX — ISOLATED CANONICAL LAYOUT
   Uses new class names so legacy mixer rules cannot collide.
================================================== */
.groovebox-mixer-section .jpc-master-column{
  width:430px !important;
  min-width:430px !important;
  flex:0 0 430px !important;
  align-self:stretch !important;
}
.groovebox-mixer-section .jpc-master-section{
  height:100% !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
}
.groovebox-mixer-section .jpc-master-stack{
  display:grid !important;
  grid-template-rows:108px 142px 230px !important;
  gap:8px !important;
  width:100% !important;
  min-height:496px !important;
  padding:0 8px 8px !important;
  box-sizing:border-box !important;
}
.groovebox-mixer-section .jpc-master-filter{
  grid-row:1 !important;
  height:108px !important;
  overflow:hidden !important;
  padding:8px 10px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.012) !important;
  box-sizing:border-box !important;
}
.groovebox-mixer-section .jpc-master-filter .instrument-filter-head{
  margin:0 0 5px !important;
  padding:0 !important;
}
.groovebox-mixer-section .jpc-master-filter .rotary-filter-grid{
  display:grid !important;
  grid-template-columns:1.3fr repeat(3,1fr) !important;
  gap:7px !important;
  align-items:center !important;
}
.groovebox-mixer-section .jpc-master-filter .rotary-control{
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.groovebox-mixer-section .jpc-master-filter .rotary-knob-wrap{
  position:relative !important;
}
.groovebox-mixer-section .jpc-master-filter .rotary-range{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:4 !important;
}
.groovebox-mixer-section .jpc-master-filter .rotary-range::-webkit-slider-runnable-track,
.groovebox-mixer-section .jpc-master-filter .rotary-range::-webkit-slider-thumb,
.groovebox-mixer-section .jpc-master-filter .rotary-range::-moz-range-track,
.groovebox-mixer-section .jpc-master-filter .rotary-range::-moz-range-thumb{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Backlit analog meters: isolated from all fader geometry. */
.groovebox-mixer-section .jpc-master-vu{
  grid-row:2 !important;
  height:142px !important;
  padding:8px 10px 10px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,rgba(13,10,22,.98),rgba(5,5,9,.99)) !important;
  box-shadow:inset 0 0 28px rgba(154,98,255,.09) !important;
  box-sizing:border-box !important;
}
.groovebox-mixer-section .jpc-master-vu-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  height:16px !important;
  margin-bottom:5px !important;
  color:#bbb5ca !important;
  font-size:8px !important;
  letter-spacing:.08em !important;
}
.groovebox-mixer-section .jpc-master-vu-pair{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  height:100px !important;
}
.groovebox-mixer-section .jpc-master-vu-channel{
  display:grid !important;
  grid-template-rows:10px 88px !important;
  justify-items:center !important;
  color:#cfc9dc !important;
  font-size:7px !important;
}
.groovebox-mixer-section .jpc-master-vu-face{
  position:relative !important;
  width:100% !important;
  height:86px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.15) !important;
  border-radius:11px !important;
  background:
    radial-gradient(ellipse at 50% 120%,rgba(255,56,209,.18),transparent 56%),
    radial-gradient(ellipse at 50% 0%,rgba(154,98,255,.26),transparent 70%),
    linear-gradient(180deg,#282038,#15121d 60%,#09080e) !important;
  box-shadow:inset 0 0 24px rgba(154,98,255,.18),inset 0 -10px 20px rgba(255,56,209,.06) !important;
}
.groovebox-mixer-section .jpc-master-vu-face::before{
  content:"VU" !important;
  position:absolute !important;
  top:10px !important;
  left:0 !important;
  right:0 !important;
  text-align:center !important;
  color:rgba(245,245,247,.38) !important;
  font-size:8px !important;
  font-weight:650 !important;
  letter-spacing:.18em !important;
}
.groovebox-mixer-section .jpc-master-vu-face::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:-5px !important;
  width:12px !important;
  height:12px !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
  background:#050507 !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.22),0 0 10px rgba(255,56,209,.20) !important;
  z-index:5 !important;
}
.groovebox-mixer-section .jpc-master-vu-needle{
  position:absolute !important;
  z-index:4 !important;
  left:50% !important;
  bottom:2px !important;
  width:2px !important;
  height:66px !important;
  transform:translateX(-50%) rotate(var(--vu-angle,-48deg)) !important;
  transform-origin:50% 100% !important;
  border-radius:2px !important;
  background:linear-gradient(#f5f5f7,#ff38d1) !important;
  box-shadow:0 0 6px rgba(255,56,209,.40) !important;
}

/* Master faders live in their own row and cannot overlap the VU row. */
.groovebox-mixer-section .jpc-master-faders{
  grid-row:3 !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:0 !important;
  height:230px !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  overflow:hidden !important;
}
.groovebox-mixer-section .jpc-master-fader-strip{
  display:grid !important;
  grid-template-rows:16px 190px 14px !important;
  justify-items:center !important;
  align-items:start !important;
  height:224px !important;
  min-width:0 !important;
  padding-top:4px !important;
  border-right:1px solid rgba(255,255,255,.07) !important;
  box-sizing:border-box !important;
}
.groovebox-mixer-section .jpc-master-fader-strip:last-child{border-right:0 !important;}
.groovebox-mixer-section .jpc-master-fader-strip > span{
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.06em !important;
  color:#c9c3dc !important;
}
.groovebox-mixer-section .jpc-master-fader-strip output{
  align-self:end !important;
  font-size:8px !important;
  color:#a9a4b8 !important;
}
.groovebox-mixer-section .jpc-master-fader-slot{
  position:relative !important;
  width:44px !important;
  height:190px !important;
  overflow:visible !important;
}
.groovebox-mixer-section .jpc-master-fader-slot::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  width:8px !important;
  height:190px !important;
  transform:translateX(-50%) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:5px !important;
  background:linear-gradient(to bottom,#9a62ff 0%,#40216f 44%,#401530 65%,#ff38d1 100%) !important;
  box-shadow:inset 0 0 6px rgba(0,0,0,.72),0 0 10px rgba(154,98,255,.09) !important;
}
.groovebox-mixer-section .jpc-master-fader{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:190px !important;
  height:44px !important;
  margin:0 !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
}
.groovebox-mixer-section .jpc-master-fader::-webkit-slider-runnable-track{
  height:1px !important;
  background:transparent !important;
}
.groovebox-mixer-section .jpc-master-fader::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  width:34px !important;
  height:18px !important;
  margin-top:-8px !important;
  border:1px solid rgba(255,255,255,.50) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#34313d,#121117) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.65),0 0 0 1px rgba(154,98,255,.16) !important;
}
.groovebox-mixer-section .jpc-master-fader::-moz-range-track{
  height:1px !important;
  background:transparent !important;
}
.groovebox-mixer-section .jpc-master-fader::-moz-range-thumb{
  width:34px !important;
  height:18px !important;
  border:1px solid rgba(255,255,255,.50) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#34313d,#121117) !important;
}

@media(max-width:1450px){
  .groovebox-mixer-section .embedded-mixer-row{
    grid-template-columns:920px 430px !important;
    width:max-content !important;
  }
}

/* ======================================================================
   MIXER — NO INTERNAL CHANNEL SCROLLBAR
   ====================================================================== */
.groovebox-mixer-section .mixing-console-body{
  overflow-x:visible !important;
  overflow-y:visible !important;
}

.groovebox-mixer-section .console-instruments,
.groovebox-mixer-section .mixer-section,
.groovebox-mixer-section #mixer.assignable-mixer{
  overflow:visible !important;
}

.groovebox-mixer-section #mixer.assignable-mixer{
  min-width:0 !important;
  width:100% !important;
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
}

.groovebox-mixer-section .mixer-console-strip{
  min-width:0 !important;
}