.mixer-heading{min-height:70px;padding:0 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #363b33}.mixer-icon{background:#403e31;color:#e4d19c}.mixer-heading-note{font-size:8px;font-weight:700;letter-spacing:1px;color:#7f8a78}.mixer-intro{padding:14px 20px;color:#929c8d;font-size:11px;line-height:1.5}.mixer-scroll{overflow-x:auto;overscroll-behavior-x:contain;border-top:1px solid #373d35;border-bottom:1px solid #373d35;scrollbar-color:#65705c #20241f;scrollbar-width:thin}.mixer-strips{display:flex;width:max-content;min-width:100%;background:#1a1e1a}.mixer-strip{width:144px;flex:0 0 144px;padding:14px 12px 12px;border-right:1px solid #3a4138;background:linear-gradient(180deg,#282d27 0%,#222721 100%)}.mixer-strip:last-child{border-right:0}.mixer-strip-head{display:flex;align-items:center;gap:8px;min-height:34px;overflow:hidden}.mixer-strip-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:5px;color:var(--strip-color);background:color-mix(in srgb,var(--strip-color) 15%,#292e27);font-size:15px;flex-shrink:0}.mixer-strip-head strong{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:78px;margin-top:4px}.mixer-channel-number{font-size:7px;font-weight:700;letter-spacing:.8px;color:#7f8a7a;white-space:nowrap}.mixer-switches{display:flex;gap:5px;margin-top:13px}.mixer-switch,.mixer-preview{border:1px solid #4b5448;border-radius:3px;background:#30362f;color:#929d8d;font-size:9px;font-weight:700;height:24px;min-width:28px}.mixer-switch.is-on{background:color-mix(in srgb,var(--strip-color) 34%,#30362f);border-color:var(--strip-color);color:#edf2e6}.mixer-preview{margin-left:auto;min-width:25px;font-size:8px}.mixer-fader-area{height:142px;display:flex;justify-content:center;gap:9px;align-items:center;border-radius:5px;background:#1d221d;margin:12px 0;padding:8px}.mixer-fader-caption{height:116px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:8px;font-weight:700;color:#758170}.mixer-fader-caption span:first-child{color:#aab6a3;letter-spacing:.8px}.mixer-volume{height:120px;display:flex;align-items:center;flex-direction:column-reverse;gap:5px}.mixer-volume .mixer-control-line{display:block;text-align:center;order:-1}.mixer-volume .mixer-control-line>span{display:none}.mixer-volume input{height:88px;width:22px;writing-mode:vertical-lr;direction:rtl}.mixer-fader-rail{height:92px;display:flex;flex-direction:column;justify-content:space-between}.mixer-fader-rail span{display:block;width:5px;height:4px;border-radius:1px;background:#6f8360}.mixer-fader-rail span:nth-last-child(-n+2){background:#424c3e}.mixer-control-line{display:flex;align-items:center;justify-content:space-between;gap:4px;color:#a8b3a1;font-size:9px;font-weight:700}.mixer-control output{font:600 9px 'Space Grotesk',sans-serif;color:#d9e4d0;white-space:nowrap}.mixer-control input{display:block;margin:7px 0 0;accent-color:var(--strip-color);cursor:pointer}.mixer-strip-controls .mixer-control{display:block;margin-bottom:12px}.mixer-strip-controls .mixer-control input{width:100%;height:4px}.mixer-eq-label{display:flex;justify-content:space-between;border-top:1px solid #40483e;padding-top:10px;margin:4px 0 11px;color:#d4decf;font-size:8px;font-weight:700;letter-spacing:1px}.mixer-eq-label span{color:#758170;font-size:8px;letter-spacing:0}.mixer-reverb{border-top:1px solid #40483e;padding-top:10px}.mixer-reset{width:100%;padding:6px 0;border:1px solid #424c40;border-radius:4px;background:transparent;color:#91a08c;font-size:9px}.mixer-reset:hover,.mixer-switch:hover,.mixer-preview:hover{border-color:#aebd9f;color:#e5ecdf}.mixer-footer{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 20px;color:#7e8b78;font-size:8px;font-weight:700;letter-spacing:.8px}@media(max-width:700px){.mixer-heading{padding:0 15px}.mixer-heading-note{font-size:7px;text-align:right;max-width:105px}.mixer-intro{padding:12px 15px}.mixer-footer{padding:0 15px}.mixer-footer span:last-child{display:none}}
.mixer-fx-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 28px;
  margin-top: 9px;
  padding: 4px 8px;
  border: 1px solid #52604c;
  border-radius: 4px;
  background: #30392f;
  color: #e2ebd8;
  font: 700 10px 'DM Sans', sans-serif;
  text-align: left;
}

.mixer-fx-button::after {
  content: '';
  width: 6px;
  height: 6px;
  border: 1px solid #84917b;
  border-radius: 50%;
}

.mixer-fx-button[data-signal-status="Active"]::after {
  border-color: var(--strip-color);
  background: var(--strip-color);
}

.mixer-fx-button[data-signal-status="Bypassed"]::after {
  border-color: #e0b585;
  background: #896a4d;
}

.mixer-fx-button:hover, .mixer-fx-button[aria-expanded="true"] {
  border-color: var(--strip-color);
  background: color-mix(in srgb, var(--strip-color) 16%, #30392f);
}

.mixer-signal {
  --fx-accent: #c6de8a;
  padding: 15px 20px 18px;
  background: #222921;
  border-bottom: 1px solid #373d35;
}

.mixer-signal-header, .mixer-signal-actions, .mixer-signal-recipes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.mixer-signal-header { justify-content: space-between; gap: 10px; }
.mixer-signal-kicker, .mixer-signal-recipes > span {
  color: var(--fx-accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.mixer-signal-status {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 5px;
  border: 1px solid #50604a;
  border-radius: 4px;
  color: #cedbc4;
  letter-spacing: 0;
}

.mixer-signal-title {
  width: fit-content;
  margin: 4px 0 0;
  color: #e6eedf;
  font: 700 18px 'Space Grotesk', sans-serif;
}

.mixer-signal-title:focus { outline: none; }
.mixer-signal-actions button, .mixer-signal-recipes button, .mixer-signal select, .mixer-signal input[type="number"] {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid #50604a;
  border-radius: 4px;
  background: #2b352b;
  color: #e1ecdb;
  font: 600 11px 'DM Sans', sans-serif;
}

.mixer-signal-actions button:hover, .mixer-signal-recipes button:hover { border-color: var(--fx-accent); }
.mixer-signal-actions button[aria-pressed="true"] { border-color: #e0b585; color: #f0d1aa; }
.mixer-signal-recipes { margin-top: 13px; }
.mixer-signal-recipes > span { margin-right: 3px; color: #a9ba9f; }
.mixer-signal-route { margin: 11px 0 7px; color: #aebca7; font-size: 10px; line-height: 1.5; }

.mixer-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 8px;
}

.mixer-signal-grid fieldset {
  min-width: 0;
  margin: 0;
  padding: 6px 9px 9px;
  border: 1px solid #445040;
  border-radius: 5px;
  background: #242e24;
}

.mixer-signal-grid legend { padding: 0 4px; color: #e2ebdb; font: 700 12px 'Space Grotesk', sans-serif; }
.mixer-signal-grid fieldset p { margin: 3px 0 5px; color: #a6b5a0; font-size: 10px; line-height: 1.35; }
.mixer-filter-type { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.mixer-filter-type, .mixer-fx-control label { color: #d3e0ca; font-size: 11px; font-weight: 700; }
.mixer-filter-type select { min-width: 0; }

.mixer-fx-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 4px;
  margin-top: 7px;
}

.mixer-fx-value { display: flex; align-items: center; gap: 4px; color: #a6b5a0; font-size: 9px; }
.mixer-fx-value input[type="number"] { width: 52px; min-height: 24px; padding: 3px 4px; text-align: right; appearance: textfield; }
.mixer-fx-value input::-webkit-inner-spin-button, .mixer-fx-value input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.mixer-fx-control input[type="range"] { grid-column: 1 / -1; width: 100%; height: 13px; margin: 0; accent-color: var(--fx-accent); }
.mixer-signal :focus-visible, .mixer-fx-button:focus-visible { outline: 2px solid #d4ec74; outline-offset: 2px; }
.mixer-signal-title:focus-visible { outline-offset: 4px; }

@media(max-width:700px) {
  .mixer-signal { padding-right: 15px; padding-left: 15px; }
}
.mixer-eq-editor{margin-top:14px;border:1px solid #495742;border-radius:7px;padding:10px}.mixer-eq-editor summary{display:flex;justify-content:space-between;gap:12px;cursor:pointer;font-size:12px;font-weight:700;color:#dce7d1;list-style:revert}.mixer-eq-editor summary span{font-weight:400;font-size:10px;color:#a5b49b}.mixer-eq-editor[open] summary{margin-bottom:12px}.mixer-insert-order{margin:14px 0 8px;max-width:500px}.mixer-signal-grid .mixer-filter-type{flex-wrap:wrap;gap:6px}.mixer-signal-grid .mixer-filter-type select{max-width:100%}.mixer-compressor{grid-row:span 2}.mixer-fx-value input[type="number"]{width:62px}.mixer-eq-editor .mixer-signal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1100px){.mixer-eq-editor .mixer-signal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:500px){.mixer-eq-editor .mixer-signal-grid{grid-template-columns:1fr}.mixer-eq-editor summary{flex-direction:column;gap:5px}.mixer-insert-order select{max-width:100%}}
.mixer-fx-control:has(input:disabled){opacity:.48}.mixer-fx-control input:disabled{cursor:default}
.mixer-rack{margin-top:18px;padding-top:16px;border-top:1px solid #56654d;min-width:0}
.mixer-rack-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mixer-rack h4{margin:0;color:#e4edda;font:700 16px 'Space Grotesk',sans-serif}
.mixer-rack h4 span{margin-left:8px;color:#aebf9b;font-size:11px;font-weight:400}
.mixer-rack p,.mixer-rack>small{color:#b2c0a7;font-size:11px;line-height:1.5}
.mixer-rack-heading p{margin:5px 0 10px}
.mixer-rack button,.mixer-rack input[type="text"]{min-height:30px;border:1px solid #52624b;border-radius:4px;padding:5px 9px;background:#2b352b;color:#e1ecdb;font:600 11px 'DM Sans',sans-serif}
.mixer-rack button:hover{border-color:#b9d38b}.mixer-rack button:disabled{opacity:.45;cursor:default}.mixer-rack button[aria-pressed="true"]{border-color:#d5a66e;color:#f1d2aa}
.mixer-rack-toolbar,.mixer-rack-presets,.mixer-rack-slot-actions{display:flex;flex-wrap:wrap;align-items:end;gap:7px}
.mixer-rack-toolbar,.mixer-rack-presets{padding:9px 0}.mixer-rack-presets{border-top:1px solid #3e4c37;border-bottom:1px solid #3e4c37}
.mixer-rack-toolbar label,.mixer-rack-presets label{display:flex;flex-direction:column;gap:5px;min-width:0;color:#c4d2ba;font-size:10px}
.mixer-rack-presets select,.mixer-rack-presets input{max-width:210px}.mixer-rack-slots{display:grid;gap:8px;margin:12px 0}
.mixer-rack-slot{border:1px solid #4e6043;border-radius:6px;background:#202a20;overflow:hidden;min-width:0}
.mixer-rack-slot summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;min-height:38px;padding:6px 10px;color:#e3ecd9;font-size:12px}
.mixer-rack-slot summary:after{content:'⌄';margin-left:5px;font-size:15px}.mixer-rack-slot[open] summary:after{transform:rotate(180deg)}
.mixer-rack-slot summary>span:last-child{margin-left:auto;color:#abc296;font-size:10px}.mixer-rack-number{display:grid;place-items:center;width:24px;height:24px;border-radius:4px;background:#36492c;color:#cfdfa9;font-size:11px}
.mixer-rack-slot.is-bypassed{border-color:#66573f}.mixer-rack-slot.is-bypassed summary>span:last-child{color:#ddbc90}
.mixer-rack-slot-actions{padding:0 10px 8px}.mixer-rack-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(185px,100%),1fr));gap:7px 16px;padding:0 12px 12px;border-top:1px solid #35432e}
.mixer-rack-controls>.mixer-filter-type{align-self:center;gap:10px}.mixer-rack-status{padding:8px 10px;border-left:2px solid #b6ce8e;background:#293723}.mixer-rack-empty{margin:0;padding:14px;border:1px dashed #506244;border-radius:5px}
@media(max-width:500px){.mixer-rack-heading{align-items:start;flex-direction:column}.mixer-rack-presets label{flex:1 1 100%}.mixer-rack-presets select,.mixer-rack-presets input{max-width:100%;width:100%}.mixer-rack-controls{grid-template-columns:1fr}}

.mixer-console {
  --console-strip-width: 143px;
  --console-meter-height: 104px;
  --console-panel: #1a2531;
  --console-control: #25374a;
  --console-edge: #40526a;
  --console-text: #dbe6f2;
  --console-soft: #a8bacf;
}
.mixer-console-toolbar,
.mixer-console-title,
.mixer-console-tools,
.mixer-console-send-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.mixer-console-toolbar {
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--console-panel);
  border-bottom: 1px solid var(--console-edge);
}
.mixer-console-title strong { color: var(--console-text); font-size: 12px; }
.mixer-console-title span { color: var(--console-soft); font-size: 9px; }
.mixer-console-button,
.mixer-console-unity,
.mixer-console-sends-button,
.mixer-console-clip {
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid var(--console-edge);
  border-radius: 3px;
  background: var(--console-control);
  color: var(--console-text);
  font: 700 9px 'DM Sans', sans-serif;
}
.mixer-console :is(button, select, input, summary):focus-visible {
  outline: 2px solid #b9db9f;
  outline-offset: 2px;
}
.mixer-console :is(.mixer-console-button, .mixer-console-unity, .mixer-console-sends-button):hover {
  border-color: #a7c5a2;
}
.mixer-console-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--console-strip-width);
  align-items: start;
  border-bottom: 1px solid var(--console-edge);
  background: var(--console-panel);
}
.mixer-console .mixer-scroll { min-width: 0; border: 0; }
.mixer-console .mixer-strips { position: relative; }
.mixer-console .mixer-console-strip,
body.studio-desktop .mixer-console .mixer-console-strip {
  box-sizing: border-box;
  flex: 0 0 var(--console-strip-width);
  width: var(--console-strip-width);
  padding: 8px 10px 10px;
  border-top: 2px solid var(--strip-color);
  background: linear-gradient(#253444, #202c3a);
}
.mixer-console .mixer-console-strip.is-routing { box-shadow: inset 0 0 0 1px #a3c19880; }
.mixer-console .mixer-console-master {
  min-height: 100%;
  border-left: 1px solid #67809a;
  background: linear-gradient(#303d48, #253545);
}
.mixer-console .mixer-strip-head strong,
body.studio-desktop .mixer-console .mixer-strip-head strong {
  max-width: 93px;
  font-size: 11px;
}
.mixer-console .mixer-switches {
  align-items: center;
  min-height: 24px;
  margin-top: 7px;
}
.mixer-console .mixer-preview { margin-left: 0; }
.mixer-console-clip {
  margin-left: auto;
  min-width: 37px;
  min-height: 20px;
  padding-inline: 3px;
  background: #1b2531;
  color: #9db0c7;
  white-space: nowrap;
  font-size: 8px;
}
.mixer-console-clip.is-clipping {
  border-color: #f39179;
  background: #813d39;
  color: #fff0df;
}
.mixer-console-tag { color: var(--console-soft); font-size: 8px; }
.mixer-console .mixer-console-fader-area,
body.studio-desktop .mixer-console .mixer-console-fader-area {
  height: calc(var(--console-meter-height) + 27px);
  display: grid;
  grid-template-columns: 22px 26px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: 7px 4px 5px;
  margin: 8px 0 4px;
  background: #121c28;
}
.mixer-console-ticks {
  height: var(--console-meter-height);
  display: grid;
  align-content: space-between;
  justify-items: end;
  padding-block: 1px;
  color: #91a8c1;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}
.mixer-stereo-rails, .mixer-stereo-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.mixer-stereo-rails { height: var(--console-meter-height); }
.mixer-stereo-meter {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: repeating-linear-gradient(to top,#223347 0 4px,#152333 4px 6px);
}
.mixer-stereo-meter-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,#45a78e 0%,#9bd798 75%,#e9c078 94%,#f48a70 100%);
  clip-path: inset(calc((1 - var(--meter-level, 0)) * 100%) 0 0);
}
.mixer-stereo-labels {
  justify-items: center;
  padding-top: 3px;
  color: #9ab1c8;
  font-size: 8px;
}
.mixer-console .mixer-console-volume,
body.studio-desktop .mixer-console .mixer-console-volume {
  height: auto;
  min-width: 0;
  gap: 3px;
  color: var(--strip-color);
}
.mixer-console .mixer-console-volume input,
body.studio-desktop .mixer-console .mixer-console-volume input {
  height: var(--console-meter-height);
  margin: 0;
}
.mixer-console .mixer-console-volume output { font-size: 9px; font-variant-numeric: tabular-nums; }
.mixer-console-level-actions { display: flex; justify-content: flex-end; margin-bottom: 5px; }
.mixer-console-unity { min-height: 17px; padding-block: 1px; font-size: 8px; }
.mixer-console .mixer-console-strip > .mixer-pan { display: block; margin-bottom: 9px; }
.mixer-console .mixer-console-strip > .mixer-pan input { width: 100%; height: 5px; margin-top: 5px; }
.mixer-console-stereo { margin: 7px 0; }
.mixer-console-width { display: block; }
.mixer-console-width input { width: 100%; height: 5px; margin-top: 5px; }
.mixer-console-stereo-buttons { display: flex; gap: 4px; margin-top: 6px; }
.mixer-console-stereo-buttons button { flex: 1; }
.mixer-console-stereo-buttons [aria-pressed="true"] {
  border-color: var(--strip-color);
  background: color-mix(in srgb, var(--strip-color) 22%, #253348);
  color: #f0f4eb;
}
.mixer-console-output { display: grid; gap: 3px; margin: 7px 0; }
.mixer-console-output > span { color: var(--console-soft); font-size: 8px; letter-spacing: .055em; font-weight: 700; }
.mixer-console-output select,
.mixer-console-output strong {
  min-width: 0;
  min-height: 25px;
  padding: 2px 4px;
  border: 1px solid var(--console-edge);
  border-radius: 3px;
  background: #172433;
  color: var(--console-text);
  font: 600 10px 'DM Sans', sans-serif;
}
.mixer-console-output strong { display: flex; align-items: center; }
.mixer-console-sends-button { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.mixer-console-sends-button small { color: var(--console-soft); font-size: 8px; }
.mixer-console-sends-button[aria-expanded="true"] { border-color: #a7c5a2; }
.mixer-console-send-summary { display: grid; gap: 3px; margin: 5px 0 0; padding: 0; list-style: none; }
.mixer-console-send-summary li {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 3px 4px;
  border-radius: 2px;
  background: #1a2838;
  color: var(--console-text);
  font-size: 8px;
}
.mixer-console-send-summary li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mixer-console-send-summary li small { flex-shrink: 0; color: var(--console-soft); font-size: 8px; }
.mixer-console-tone { margin-top: 6px; color: var(--console-soft); font-size: 9px; }
.mixer-console-tone summary { cursor: pointer; padding: 3px 1px; }
.mixer-console-tone .mixer-strip-controls { margin-top: 7px; }
.mixer-console-send-editor {
  padding: 10px;
  border-bottom: 1px solid var(--console-edge);
  background: var(--console-panel);
  color: var(--console-text);
}
.mixer-console-send-heading { justify-content: space-between; }
.mixer-console-send-heading h3 { margin: 0; font-size: 12px; }
.mixer-console-send-editor p { margin: 6px 0; color: var(--console-soft); font-size: 10px; }
.mixer-console-send-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: 5px;
  max-height: 190px;
  overflow-y: auto;
  padding: 2px;
}
.mixer-console-send-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--console-edge);
  border-radius: 3px;
}
.mixer-console-send-level { min-width: 0; }
.mixer-console-send-level .mixer-control-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mixer-console-send-level input { width: 100%; height: 8px; margin-top: 5px; accent-color: #b5d5a2; }
.mixer-console-send-row :is(small, .mixer-console-send-tap) { color: var(--console-soft); font-size: 9px; white-space: nowrap; }
.mixer-console-send-tap { display: flex; align-items: center; gap: 3px; }
.mixer-console-send-tap input { margin: 0; accent-color: #b5d5a2; }
@media(max-width:600px) {
  .mixer-console { --console-strip-width: 127px; }
  .mixer-console .mixer-console-strip,
  body.studio-desktop .mixer-console .mixer-console-strip { padding-inline: 7px; }
  .mixer-console .mixer-strip-head strong,
  body.studio-desktop .mixer-console .mixer-strip-head strong { max-width: 79px; }
}