/* Mix AI · VST Hardware Skin
   Visual-only layer inspired by physical studio hardware. */

:root{
  --hw-ink:#050607;
  --hw-panel:#16191b;
  --hw-panel-hi:#2d3235;
  --hw-steel:#687177;
  --hw-steel-hi:#c5cbc8;
  --hw-copper:#a84b31;
  --hw-green:#42f5a4;
}

body.mix-page .mix-daw{
  background:
    radial-gradient(ellipse at 25% 0,rgba(255,255,255,.075),transparent 29%),
    radial-gradient(ellipse at 78% 100%,rgba(129,57,37,.09),transparent 34%),
    repeating-linear-gradient(103deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px),
    linear-gradient(145deg,#41484b 0,#181c1f 2%,#0d1012 48%,#171b1d 98%,#343b3e 100%);
}

body.mix-page .module-shell,
body.mix-page .channel-strip,
body.mix-page .engine-runtime{
  background-image:
    linear-gradient(115deg,rgba(255,255,255,.025),transparent 18%,transparent 76%,rgba(255,255,255,.012)),
    repeating-linear-gradient(7deg,rgba(255,255,255,.009) 0 1px,transparent 1px 4px),
    linear-gradient(#1c2022,#0b0e10 42%,#060708);
}

/* Restrained oxblood undertone, like an aged boutique rack faceplate. */
body.mix-page .mixer-rack{
  background:
    radial-gradient(ellipse at 50% -28%,rgba(139,43,24,.20),transparent 53%),
    repeating-linear-gradient(112deg,rgba(255,255,255,.010) 0 1px,transparent 1px 5px),
    linear-gradient(#101112,#050607 18%,#030404);
  box-shadow:inset 0 8px 24px #000,inset 0 1px rgba(255,255,255,.045);
}

body.mix-page .channel-strip:after{
  content:"";
  position:absolute;
  inset:4px;
  z-index:3;
  pointer-events:none;
  border-radius:2px;
  background:
    radial-gradient(circle at 5px 5px,#9ba09e 0 1px,#33383a 2px,#050606 3px,transparent 4px),
    radial-gradient(circle at calc(100% - 5px) 5px,#9ba09e 0 1px,#33383a 2px,#050606 3px,transparent 4px),
    linear-gradient(111deg,transparent 17%,rgba(255,255,255,.025) 17.2%,transparent 17.5%),
    linear-gradient(73deg,transparent 76%,rgba(151,73,48,.045) 76.2%,transparent 76.6%);
  opacity:.8;
}

body.mix-page .module-heading{
  border-top:1px solid rgba(255,255,255,.045);
  box-shadow:inset 0 1px rgba(255,255,255,.09),inset 0 -1px #000,0 2px 7px #0008;
}

body.mix-page .module-heading h2:after{
  content:"";
  display:inline-block;
  width:18px;
  height:2px;
  margin-left:8px;
  vertical-align:3px;
  background:linear-gradient(90deg,var(--hw-copper),transparent);
  opacity:.75;
}

/* Machined push buttons */
body.mix-page .metal-button,
body.mix-page .transport-button,
body.mix-page .channel-tools button,
body.mix-page .style-selector button{
  position:relative;
  overflow:hidden;
  border-color:#030405 !important;
  border-top-color:#747d82 !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),transparent 18%),
    linear-gradient(#3d4448 0,#252a2d 46%,#111416 51%,#1b2022 100%) !important;
  box-shadow:
    0 1px 0 #51595d,
    0 4px 7px #000b,
    inset 0 1px rgba(255,255,255,.13),
    inset 0 -3px 5px #0007 !important;
}

body.mix-page .metal-button:after,
body.mix-page .transport-button:after{
  content:"";
  position:absolute;
  inset:1px 6px auto;
  height:1px;
  background:linear-gradient(90deg,transparent,#fff4,transparent);
  pointer-events:none;
}

body.mix-page .metal-button:active:not(:disabled),
body.mix-page .transport-button:active:not(:disabled),
body.mix-page .channel-tools button:active:not(:disabled){
  transform:translateY(2px);
  box-shadow:0 1px 2px #000,inset 0 4px 8px #000b !important;
}

body.mix-page .channel-tools button.active,
body.mix-page .style-selector button.active{
  color:#05120b !important;
  border-top-color:#c1ffe2 !important;
  background:linear-gradient(#8bffd0,#35d994 50%,#15915d) !important;
  box-shadow:0 0 12px rgba(66,245,164,.42),0 3px 6px #000b,inset 0 1px #fff9 !important;
}

/* Photoreal vertical channel fader */
body.mix-page .channel-meter-fader{grid-template-columns:18px minmax(52px,1fr);gap:6px}
body.mix-page .fader-slot{
  position:relative;
  overflow:visible;
  border:1px solid #020303;
  border-top-color:#3e4548;
  background:
    repeating-linear-gradient(0deg,transparent 0 11px,rgba(205,214,210,.23) 11px 12px,transparent 12px 22px),
    linear-gradient(90deg,#111416 0,#1d2224 35%,#020303 47%,#000 50%,#020303 53%,#1d2224 65%,#0a0c0d 100%);
  box-shadow:inset 0 4px 10px #000d,inset 0 0 0 2px rgba(255,255,255,.018),0 1px rgba(255,255,255,.06);
}

body.mix-page .fader-slot:before{
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  left:50%;
  width:4px;
  transform:translateX(-50%);
  border-radius:3px;
  background:linear-gradient(90deg,#000,#171a1b 44%,#4b5153 50%,#151819 57%,#000);
  box-shadow:inset 0 0 3px #000,0 0 0 1px #000;
}

.vst-fader-scale{
  position:absolute;
  z-index:1;
  top:8px;
  right:3px;
  bottom:8px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  color:#8c9691;
  font:5px/1 var(--mix-mono);
  text-shadow:0 1px #000;
  pointer-events:none;
}

.vst-fader-scale span:before{
  content:"";
  display:inline-block;
  width:5px;
  height:1px;
  margin-right:2px;
  background:#78817d;
  vertical-align:2px;
  box-shadow:0 1px #000;
}

body.mix-page .fader-slot input[type="range"]{
  position:relative;
  z-index:2;
  width:118px !important;
  height:38px !important;
  margin:0 !important;
  appearance:none;
  -webkit-appearance:none;
  background:transparent !important;
  box-shadow:none !important;
  transform:rotate(-90deg);
  cursor:ns-resize;
}

body.mix-page .fader-slot input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  border:1px solid #000;
  border-radius:4px;
  background:linear-gradient(#010202,#171a1b 48%,#030404);
  box-shadow:inset 0 1px 3px #000,0 1px #ffffff12;
}

body.mix-page .fader-slot input[type="range"]::-webkit-slider-thumb{
  width:17px;
  height:40px;
  margin-top:-18px;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #030405;
  border-top-color:#92999c;
  border-radius:4px;
  background:
    linear-gradient(90deg,transparent 0 46%,#d8ddd9 46% 54%,transparent 54%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 4px),
    linear-gradient(#60676a,#2f3437 16%,#111416 50%,#33393c 84%,#687074);
  box-shadow:2px 6px 10px #000e,0 0 0 1px #000,inset 0 2px #fff5,inset 0 -3px 5px #0009;
}

body.mix-page .fader-slot input[type="range"]::-moz-range-track{
  height:6px;
  border:1px solid #000;
  border-radius:4px;
  background:linear-gradient(#010202,#171a1b 48%,#030404);
}

body.mix-page .fader-slot input[type="range"]::-moz-range-thumb{
  width:17px;
  height:40px;
  border:1px solid #030405;
  border-radius:4px;
  background:linear-gradient(90deg,transparent 0 46%,#d8ddd9 46% 54%,transparent 54%),linear-gradient(#60676a,#171a1c 50%,#687074);
  box-shadow:0 4px 8px #000d,inset 0 1px #fff5;
}

/* Functional rotary controls. The transparent native range remains on top. */
.vst-knob-control{
  --knob-angle:-135deg;
  --knob-size:50px;
  position:relative;
  width:var(--knob-size);
  height:var(--knob-size);
  margin:6px auto 2px;
  border-radius:50%;
  background:
    repeating-conic-gradient(from -8deg,#8b9293 0 2deg,#202426 2deg 7deg),
    radial-gradient(circle,#2f3436 0 57%,#050606 59% 64%,#8a9292 66% 70%,#0a0b0c 72%);
  box-shadow:0 7px 10px #000c,0 0 0 1px #020303,inset 0 1px #fff5;
  isolation:isolate;
}

.vst-knob-control:before{
  content:"";
  position:absolute;
  inset:-6px;
  z-index:-1;
  border:1px solid #697174;
  border-radius:50%;
  background:radial-gradient(circle,transparent 62%,#090b0c 64% 72%,transparent 74%);
  box-shadow:inset 0 1px #ffffff1f,0 1px 3px #000;
}

.vst-knob-control:after{
  content:"";
  position:absolute;
  inset:-10px;
  z-index:-2;
  border-radius:50%;
  background:repeating-conic-gradient(from 224deg,rgba(210,218,214,.72) 0 1deg,transparent 1deg 13.5deg);
  -webkit-mask:radial-gradient(circle,transparent 0 69%,#000 70% 73%,transparent 74%);
  mask:radial-gradient(circle,transparent 0 69%,#000 70% 73%,transparent 74%);
  opacity:.72;
  filter:drop-shadow(0 1px #000);
}

.vst-knob-face{
  position:absolute;
  inset:5px;
  border:1px solid #030404;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 25%,rgba(255,255,255,.20),transparent 13%),
    radial-gradient(circle at 48% 43%,#353a3c 0,#202426 46%,#090b0c 78%,#000 100%);
  box-shadow:inset 2px 2px 3px #ffffff24,inset -3px -7px 11px #000b,2px 4px 4px #000b,0 1px 2px #000;
}

.vst-knob-face:before{
  content:"";
  position:absolute;
  inset:3px 5px 48% 4px;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.13),transparent 62%);
  filter:blur(.3px);
}

.vst-knob-face:after{
  content:"";
  position:absolute;
  left:50%;
  top:4px;
  width:3px;
  height:13px;
  border-radius:2px;
  background:linear-gradient(90deg,#b9bfbc,#fff,#aaa);
  box-shadow:0 0 2px #fff7,0 1px 1px #000;
  transform:translateX(-50%) rotate(var(--knob-angle));
  transform-origin:50% calc((var(--knob-size) - 10px)/2 - 4px);
}

.vst-knob-control input[type="range"]{
  position:absolute !important;
  z-index:4;
  inset:-7px !important;
  width:calc(100% + 14px) !important;
  height:calc(100% + 14px) !important;
  margin:0 !important;
  opacity:0;
  cursor:ew-resize;
}

.vst-knob-control:focus-within{
  box-shadow:0 7px 10px #000c,0 0 0 2px rgba(66,245,164,.52),0 0 14px rgba(66,245,164,.22),inset 0 1px #fff5;
}

.vst-knob-control.is-disabled{filter:saturate(.2);opacity:.42}

body.mix-page .channel-mini-controls{
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:5px 3px;
  padding:8px 1px 2px;
}
body.mix-page .channel-mini-controls label{display:grid;grid-template-columns:1fr;justify-items:center;gap:0;text-align:center}
body.mix-page .channel-mini-controls label:nth-of-type(1){grid-column:1;grid-row:1}
body.mix-page .channel-mini-controls>b:nth-of-type(1){grid-column:1;grid-row:2}
body.mix-page .channel-mini-controls label:nth-of-type(2){grid-column:2;grid-row:1}
body.mix-page .channel-mini-controls>b:nth-of-type(2){grid-column:2;grid-row:2}
body.mix-page .channel-mini-controls .vst-knob-control{--knob-size:42px}

body.mix-page .editor-control{display:grid;grid-template-columns:1fr auto;align-items:start;min-height:104px;text-align:left}
body.mix-page .editor-control .vst-knob-control{--knob-size:56px;grid-column:1/-1}
body.mix-page .assist-controls label{display:grid;grid-template-columns:1fr auto;align-items:start;text-align:left}
body.mix-page .assist-controls .vst-knob-control{--knob-size:53px;grid-column:1/-1}
body.mix-page .master-controls label{display:grid;grid-template-columns:1fr auto;align-items:start}
body.mix-page .master-controls .vst-knob-control{--knob-size:58px;grid-column:1/-1}

body.mix-page .channel-db{
  margin:2px 3px 0;
  padding:4px 2px;
  height:auto;
  border:1px solid #020403;
  border-top-color:#1f2b25;
  border-radius:3px;
  background:#020504;
  color:#72ffc1;
  text-shadow:0 0 8px rgba(66,245,164,.5);
  box-shadow:inset 0 3px 7px #000;
}

body.mix-page .channel-meter:after,
body.mix-page .master-meter:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.11),transparent 18% 72%,rgba(255,255,255,.025));
  mix-blend-mode:screen;
}

body.mix-page .hardware-readout,
body.mix-page .channel-db,
body.mix-page .position-display{
  background-image:linear-gradient(rgba(66,245,164,.025) 1px,transparent 1px),linear-gradient(#010302,#06100b);
  background-size:100% 3px,auto;
}

body.mix-page .channel-head b,
body.mix-page .channel-head span,
body.mix-page .channel-mini-controls label{
  position:relative;
  z-index:4;
}

/* Valve-era master VU, driven by the existing loudness readout. */
body.mix-page .master-body.vst-master-body{
  grid-template-columns:minmax(178px,.62fr) minmax(0,1.38fr) 56px;
  align-items:stretch;
}

.vst-master-vu{
  --vu-angle:-48deg;
  position:relative;
  min-width:0;
  padding:7px;
  border:1px solid #020303;
  border-top-color:#6b7274;
  border-radius:5px;
  background:
    repeating-linear-gradient(96deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),
    linear-gradient(#3d4244,#171a1c 19%,#090b0c 100%);
  box-shadow:0 5px 12px #000b,inset 0 1px #fff4,inset 0 -4px 9px #0009;
}

.vst-vu-window{
  position:relative;
  height:112px;
  overflow:hidden;
  border:2px solid #050606;
  border-top-color:#8a8171;
  border-radius:46% 46% 8px 8px/22% 22% 8px 8px;
  background:
    radial-gradient(ellipse at 50% 108%,#b8a985 0 35%,transparent 36%),
    linear-gradient(#d9cfb3,#bdb08d 72%,#8d805f);
  box-shadow:inset 0 5px 13px #5a503a88,inset 0 -7px 9px #574b3199,0 1px #ffffff28;
}

.vst-vu-window:before{
  content:"";
  position:absolute;
  inset:8px 16px 15px;
  border-radius:50%;
  background:repeating-conic-gradient(from 220deg,#24231f 0 1.2deg,transparent 1.2deg 8deg);
  -webkit-mask:radial-gradient(circle at 50% 105%,transparent 0 61%,#000 62% 64%,transparent 65%);
  mask:radial-gradient(circle at 50% 105%,transparent 0 61%,#000 62% 64%,transparent 65%);
  opacity:.88;
}

.vst-vu-window:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(118deg,rgba(255,255,255,.34),transparent 19% 67%,rgba(255,255,255,.07)),
    radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.20),transparent 52%);
  box-shadow:inset 0 0 0 1px #fff3;
  mix-blend-mode:screen;
}

.vst-vu-title{
  position:absolute;
  z-index:2;
  top:13px;
  left:0;
  right:0;
  color:#29261f;
  font:800 9px/1 Arial Narrow,Arial,sans-serif;
  letter-spacing:.18em;
  text-align:center;
}

.vst-vu-numbers{
  position:absolute;
  z-index:2;
  top:32px;
  left:17px;
  right:17px;
  display:flex;
  justify-content:space-between;
  color:#312d24;
  font:700 7px/1 var(--mix-mono);
}

.vst-vu-db{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:22px;
  color:#453c2c;
  font:700 7px/1 Georgia,serif;
  letter-spacing:.1em;
  text-align:center;
}

.vst-vu-needle{
  position:absolute;
  z-index:3;
  left:calc(50% - 1px);
  bottom:11px;
  width:2px;
  height:70px;
  border-radius:2px;
  background:linear-gradient(#d84331,#8b1f19 78%,#211813);
  box-shadow:1px 0 #fff5,2px 2px 3px #2d2219aa;
  transform:rotate(var(--vu-angle));
  transform-origin:50% calc(100% - 1px);
  transition:transform .16s cubic-bezier(.2,.8,.25,1);
}

.vst-vu-pivot{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:5px;
  width:18px;
  height:18px;
  transform:translateX(-50%);
  border:1px solid #171410;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#d5cdbb 0,#756c59 18%,#26231d 52%,#080807 78%);
  box-shadow:0 2px 4px #3b2e21aa,inset 0 1px #fff7;
}

.vst-vu-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:5px;
  color:#b9b6aa;
  font:6px/1 var(--mix-mono);
  letter-spacing:.14em;
}

.vst-vu-pilot{
  width:7px;
  height:7px;
  border:1px solid #21130a;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff1b8,#ef9c31 25%,#873814 62%,#1c0d08);
  box-shadow:0 0 8px #ef7d27aa,inset 0 1px #fff9;
}

@media(max-width:900px){
  body.mix-page .master-body.vst-master-body{grid-template-columns:minmax(160px,.72fr) minmax(0,1.28fr) 50px}
  .vst-vu-window{height:104px}
  .vst-vu-needle{height:64px}
}

@media(max-width:620px){
  body.mix-page .master-body.vst-master-body{grid-template-columns:1fr 46px}
  .vst-master-vu{grid-column:1/-1}
}

/* Physical toggle banks and neutral mastering plates. */
body.mix-page .master-delivery,
body.mix-page .realtime-preview{
  position:relative;
  overflow:hidden;
  border-color:#030405 !important;
  border-top-color:#575f61 !important;
  background:
    repeating-linear-gradient(97deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px),
    linear-gradient(#171b1d,#080a0b 52%,#040505) !important;
  box-shadow:inset 0 1px #fff2,inset 0 -8px 18px #0007,0 4px 10px #0008 !important;
}

body.mix-page input[type="checkbox"]{
  position:relative;
  flex:0 0 auto;
  width:36px !important;
  height:18px !important;
  margin:0 8px 0 0 !important;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #020303 !important;
  border-top-color:#3f4648 !important;
  border-radius:4px !important;
  background:linear-gradient(#080a0b,#171a1b 48%,#030404) !important;
  box-shadow:inset 0 3px 6px #000d,0 1px #ffffff14 !important;
  cursor:pointer;
}

body.mix-page input[type="checkbox"]:before{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:15px;
  height:12px;
  border:1px solid #050606;
  border-top-color:#9ca3a4;
  border-radius:3px;
  background:
    linear-gradient(90deg,transparent 44%,#d9ddda 45% 55%,transparent 56%),
    linear-gradient(#747b7d,#272b2d 47%,#111314 53%,#5a6163);
  box-shadow:1px 2px 4px #000c,inset 0 1px #fff5;
  transition:transform .14s ease;
}

body.mix-page input[type="checkbox"]:after{
  content:"";
  position:absolute;
  top:6px;
  right:4px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#24110a;
  box-shadow:inset 0 1px #fff1;
}

body.mix-page input[type="checkbox"]:checked:before{transform:translateX(16px)}
body.mix-page input[type="checkbox"]:checked:after{
  right:auto;
  left:4px;
  background:#f29b42;
  box-shadow:0 0 7px #e76f25,inset 0 1px #fff8;
}

body.mix-page input[type="checkbox"]:focus-visible{
  outline:1px solid var(--mix-green);
  outline-offset:2px;
}

body.mix-page select,
body.mix-page input[type="number"]{
  min-height:29px;
  border-top-color:#3c4445 !important;
  background:
    linear-gradient(rgba(66,245,164,.018) 1px,transparent 1px),
    linear-gradient(#020303,#0a0d0e) !important;
  background-size:100% 3px,auto !important;
  color:#d7ded9 !important;
  text-shadow:0 1px #000;
}

body.mix-page .master-delivery-switches label{
  display:flex;
  align-items:center;
  min-height:36px;
  padding:5px 8px;
  border:1px solid #050606;
  border-top-color:#373e40;
  border-radius:3px;
  background:linear-gradient(#1b1f21,#0a0c0d);
  box-shadow:inset 0 1px #fff1,0 2px 5px #0007;
}

body.mix-page .realtime-controls button,
body.mix-page .master-delivery-actions button{
  min-height:38px;
  border-top-color:#747c7f !important;
}

body.mix-page .realtime-stats>*,
body.mix-page .master-delivery-grid label{
  border-top-color:#343b3d !important;
  background:linear-gradient(#101314,#050707) !important;
  box-shadow:inset 0 2px 6px #0009,0 1px #ffffff0b !important;
}

/* Compact polished console pass. */
body.mix-page .mix-daw{
  background:
    linear-gradient(108deg,rgba(255,255,255,.07),transparent 12% 84%,rgba(255,255,255,.025)),
    repeating-linear-gradient(92deg,rgba(255,255,255,.013) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#444b4e 0,#191d1f 1.8%,#0d1012 49%,#171b1d 98%,#384043 100%);
}

body.mix-page .mixer-rack{
  background:
    linear-gradient(180deg,rgba(255,255,255,.026),transparent 9%),
    repeating-linear-gradient(92deg,rgba(255,255,255,.009) 0 1px,transparent 1px 6px),
    #040506;
}

body.mix-page .channel-strip:after{
  background:
    radial-gradient(circle at 5px 5px,#aeb4b2 0 1px,#3d4345 2px,#050606 3px,transparent 4px),
    radial-gradient(circle at calc(100% - 5px) 5px,#aeb4b2 0 1px,#3d4345 2px,#050606 3px,transparent 4px);
  opacity:.9;
}

body.mix-page .metal-button,
body.mix-page .transport-button,
body.mix-page .channel-tools button,
body.mix-page .style-selector button{
  border-radius:3px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),transparent 19%),
    linear-gradient(#41484b,#24292b 47%,#111416 52%,#202527) !important;
  box-shadow:0 1px #697174,0 3px 5px #000a,inset 0 1px #ffffff1a,inset 0 -2px 4px #0008 !important;
}

.vst-master-vu{
  background:
    repeating-linear-gradient(91deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px),
    linear-gradient(#464c4e,#1b1f21 20%,#090b0c 100%);
  box-shadow:0 4px 9px #000a,inset 0 1px #fff5,inset 0 -3px 7px #0009;
}

@media(min-width:881px){
  body.mix-page{padding-top:42px}
  body.mix-page .mix-daw{padding:9px}
  body.mix-page .module-shell{margin-top:4px}
  body.mix-page .module-heading{min-height:29px;padding:5px 8px}
  body.mix-page .daw-header{padding:6px 12px}
  body.mix-page .program-brand{height:38px}
  body.mix-page .hardware-strip{margin-top:3px;padding:4px 7px}
  body.mix-page .power-button{width:30px;height:30px}
  body.mix-page .engine-runtime{margin:4px 0 0;padding:5px}
  body.mix-page .engine-runtime-cell{min-height:32px}
  body.mix-page .engine-report{margin:3px 0 4px;padding:4px 7px}
  body.mix-page .input-content{padding:5px;gap:5px}
  body.mix-page .drop-input{min-height:40px}
  body.mix-page .stem-slot{height:38px}
  body.mix-page .transport-bar{min-height:36px;padding:4px 6px}
  body.mix-page .transport-button{min-height:27px}
  body.mix-page .arranger-body{height:252px;min-height:252px}
  body.mix-page .lane-labels{padding-top:24px}
  body.mix-page .lane-label{height:28.5px}
  body.mix-page .timeline-inner{height:250px}
  body.mix-page .timeline-ruler{height:24px}
  body.mix-page .timeline-lanes{height:226px}
  body.mix-page .timeline-lane{height:28.25px}
  body.mix-page .timeline-lane canvas{height:27.25px}
  body.mix-page .mixer-rack{min-height:314px;padding:5px;gap:3px}
  body.mix-page .channel-strip{min-width:100px;padding:4px}
  body.mix-page .channel-head{height:38px;padding-top:4px}
  body.mix-page .channel-tools{height:22px}
  body.mix-page .channel-meter-fader{height:126px;padding:4px 0}
  body.mix-page .fader-slot input[type="range"]{width:100px !important}
  body.mix-page .channel-mini-controls{padding-top:6px}
  body.mix-page .channel-mini-controls .vst-knob-control{--knob-size:38px;margin-top:5px}
  body.mix-page .vst-master-vu{padding:5px}
  body.mix-page .vst-vu-window{height:100px}
  body.mix-page .vst-vu-needle{height:61px}
  body.mix-page .master-body{padding:5px}
  body.mix-page .master-stats{padding:0 5px}
  body.mix-page .master-controls{padding:5px}
  body.mix-page .diagnosis-body{padding:5px}
  body.mix-page .score-ring{width:108px;height:108px}
  body.mix-page .master-delivery-grid{gap:4px!important}
  body.mix-page .master-delivery-switches{gap:4px!important}
  body.mix-page .master-delivery-switches label{min-height:32px;padding:4px 6px}
}

@media(max-width:880px){
  body.mix-page .fader-slot input[type="range"]{width:124px !important}
  body.mix-page .channel-mini-controls .vst-knob-control{--knob-size:40px}
}

@media(prefers-reduced-motion:reduce){
  body.mix-page .metal-button,
  body.mix-page .transport-button{transition:none}
}