/* Material pass 02. Light source: broad softbox above and to the left.
   The decorative geometry is independent of the native, accessible controls. */

/* A dark mounting rebate, a raised rim, then a gently concave button face. */
.hardware {
  position: relative;
  isolation: isolate;
  border: 1px solid #070b0d;
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 25% -65%, #e3f0f54a, transparent 65%),
    linear-gradient(180deg, #77858b 0, #3d474c 3px, #242c31 12%, #1b2429 53%, #303b41 88%, #465258 95%, #11181c 100%);
  box-shadow:
    0 0 0 2px #0b1114,
    0 0 0 3px #60707766,
    0 2px 0 3px #b5c4c51b,
    inset 1px 1px 1px #f0faff69,
    inset -1px -2px 2px #000b,
    inset 0 5px 7px #bcd0db13,
    3px 7px 8px #0009;
  text-shadow: 0 1px 2px #000e;
  transition: box-shadow .12s, filter .12s, transform .12s;
}
.hardware::after {
  content: '';
  position: absolute;
  inset: 3px 5px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f1f8fc77 17%, #dce8eb33 65%, transparent);
  pointer-events: none;
}
.hardware:hover { filter: brightness(1.12); }
.hardware:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 2px #090e10, 0 1px 0 3px #66747b77,
    inset 0 3px 8px #000c, inset 0 -1px 1px #a5c2d22e;
}
.hardware.active, .hardware.cyan {
  background:
    radial-gradient(ellipse at 30% -50%, #b9f3ff4d, transparent 70%),
    linear-gradient(#83acbd 0, #395666 3px, #203640 17%, #152a33 65%, #344f5c 96%, #0c1c23);
  box-shadow: 0 0 0 2px #091216, 0 0 0 3px #78b2c591,
    inset 1px 1px 2px #d4f7ff99, inset 0 0 12px #71dfff22,
    inset -1px -2px 3px #000a, 2px 6px 8px #0009, 0 0 9px #72d8f01c;
}
.master-buttons { gap: 21px; }
.master-buttons .hardware {
  min-height: 61px;
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 28% -30%, #c8e0eb3d, transparent 65%),
    linear-gradient(#64727a, #263138 5%, #111a20 42%, #141e24 68%, #2c3941 94%, #080e12);
  box-shadow: 0 0 0 3px #080e12, 0 0 0 4px #52616a,
    inset 1px 1px 2px #d2e6ed66, inset -1px -2px 3px #000d,
    3px 7px 10px #000a;
}
.master-buttons .hardware.active {
  background: radial-gradient(ellipse at 50% 80%, #d5584630, transparent 75%),
    linear-gradient(#755b56, #39282a 5%, #25191d 60%, #4b3030 95%, #0c080a);
  box-shadow: 0 0 0 3px #0d090b, 0 0 0 4px #9c655a,
    inset 1px 1px 2px #ffd2bd66, inset 0 0 22px #ed634b22, 3px 7px 10px #000a;
}
.lcd {
  border: 2px solid #060e12;
  border-radius: 5px;
  background: radial-gradient(ellipse at 50% 115%, #17323b55, transparent 70%),
    linear-gradient(155deg, #02080b 20%, #081418 64%, #0c1a20);
  box-shadow: 0 0 0 1px #4b6873aa, 0 2px 0 1px #a0b5bc33,
    inset 2px 3px 7px #000, inset -1px -1px 2px #27434c;
  color: #91f0ff;
  text-shadow: 0 0 3px #86eaff88, 0 0 10px #67d5f044;
}

/* Faders: recessed cast housing, narrow lit rail and a raised aluminium cap.
   The carriage and native range use the same 52px thumb / travel geometry. */
.faderbank { gap: 23px; }
.faderunit { min-width: 88px; }
.faderunit output { min-width: 86px; font-size: 20px; padding: 5px 9px; }
.fader-assembly {
  width: 88px;
  height: 216px;
  margin: 17px auto 5px;
  --cap-height: 52px;
}
.fader-well {
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: 3px;
  width: 47px;
  border: 1px solid #080e11;
  border-radius: 8px;
  background: linear-gradient(90deg, #030708, #0b1113 28%, #11191c 80%, #020607);
  box-shadow: -1px -2px 3px #000b, 1px 2px 1px #a9b8bb44,
    inset 3px 4px 8px #000, inset -2px -2px 2px #3e4c5155;
  pointer-events: none;
}
.fader-well::before {
  content: '';
  position: absolute;
  inset: 5px 5px 6px;
  border: 1px solid #303b4055;
  border-radius: 3px;
  box-shadow: inset 2px 2px 4px #000c, 0 1px #61717733;
}
.fader-track {
  top: 30px;
  bottom: 30px;
  left: 18px;
  width: 10px;
  border: 1px solid #020506;
  border-radius: 1px;
  background: linear-gradient(90deg, #000, #19252a 45%, #020708 70%);
  box-shadow: -2px 0 2px #000, 2px 0 1px #a3b1b33b;
}
.fader-track::before {
  left: 2px;
  width: 5px;
  height: var(--value);
  bottom: 0;
  background: linear-gradient(90deg, #0005, var(--color) 37%, #ffffffa0 56%, var(--color) 78%, #0006);
  box-shadow: 0 0 4px var(--color), 0 0 10px color-mix(in srgb, var(--color) 32%, transparent);
}
.inner-scale {
  position: absolute;
  top: 32px; bottom: 30px; left: 10px; width: 5px;
  background: repeating-linear-gradient(to bottom, #6d7e8533 0 1px, transparent 1px 4px);
}
.fader-ticks {
  left: 61px;
  right: auto;
  top: 26px;
  bottom: 26px;
  width: 12px;
  background: repeating-linear-gradient(to bottom, #adbdc680 0 1px, transparent 1px 5%);
  filter: drop-shadow(0 1px 1px #000);
}
.fader-ticks::after { content: none; }
.fader-ticks span {
  position: absolute;
  left: 21px;
  transform: translateY(-50%);
  color: #a6b2b8;
  font-family: 'Segoe UI', sans-serif;
  font-size: 10px;
  line-height: 1;
}
.fader-ticks span::before {
  content: '';
  position: absolute;
  width: 18px; height: 2px;
  right: calc(100% + 5px); top: calc(50% - 1px);
  background: #a8b9c18c;
  box-shadow: 0 1px #0009;
}
.fader-carriage {
  position: absolute;
  top: calc((100% - var(--cap-height)) * (1 - var(--position)));
  left: 4px;
  width: 44px;
  height: var(--cap-height);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(4px 7px 4px #000b);
}
.fader-cap {
  width: 100%; height: 100%;
  position: relative;
  border: 1px solid #282e31;
  border-radius: 5px;
  background:
    linear-gradient(90deg, #656d71, #d3d9dc 5%, #f7fafb 9%, #828c91 14%, #c3cbd0 48%, #727d83 86%, #e1e6e8 91%, #929ca1 96%, #353e43);
  box-shadow: -1px -1px 1px #f4f8faaf,
    1px 1px 1px #080c0f, inset 0 1px 0 #fff, inset 0 -2px 1px #4b565d;
}
.fader-cap::before {
  content: '';
  position: absolute;
  inset: 2px 3px auto;
  height: 7px;
  background: linear-gradient(#fff, #e7edee 40%, #77858c);
  clip-path: polygon(0 0,100% 0,91% 100%,9% 100%);
  border-radius: 2px;
  box-shadow: 0 1px 2px #000a;
}
.fader-cap::after {
  content: '';
  position: absolute;
  inset: auto 3px 3px;
  height: 6px;
  background: linear-gradient(#5d6b72,#d6dfe2 55%,#b0bcc1 75%,#414d55);
  clip-path: polygon(9% 0,91% 0,100% 100%,0 100%);
}
.cap-face {
  position: absolute;
  inset: 8px 6px 8px;
  border-radius: 4px;
  border-top: 1px solid #414f57;
  border-bottom: 1px solid #ecf2f5;
  background:
    radial-gradient(ellipse at 25% 100%, #ffffff80, transparent 65%),
    linear-gradient(180deg,#6c777d 0%,#859097 12%,#a6afb4 37%,#d2d8db 68%,#f1f5f6 85%,#dbe1e5 95%,#9fadb5);
  box-shadow: inset 1px 0 2px #0006, inset -1px 0 2px #fff8,
    0 -1px 1px #f1f6f455, 0 1px 1px #1e2c3377;
}
.fader-input,
.master-controls .fader-input {
  appearance: none;
  -webkit-appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  position: absolute;
  transform: none;
  top: 0; left: 0;
  width: 54px; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  z-index: 3;
  cursor: ns-resize;
  touch-action: none;
}
.fader-input::-webkit-slider-runnable-track { width: 44px; height: 100%; background: transparent; }
.fader-input::-webkit-slider-thumb { width: 44px; height: 52px; margin: 0; border: 0; background: transparent; box-shadow: none; }
.fader-input::-moz-range-track { width: 44px; height: 100%; background: transparent; }
.fader-input::-moz-range-thumb { width: 44px; height: 52px; border: 0; background: transparent; box-shadow: none; }
.fader-assembly:has(.fader-input:focus-visible) .fader-well { outline: 2px solid var(--cyan); outline-offset: 4px; }
.fader-assembly:has(.fader-input:active) .cap-face { filter: brightness(1.1); }
.master-controls .fader-assembly { height: 252px; width: 98px; margin-top: 10px; }
.master-controls .fader-well { width: 63px; left: -5px; }
.master-controls .fader-carriage { width: 58px; left: -3px; }
.master-controls .fader-track { left: 27px; }
.master-controls .inner-scale { left: 18px; }
.master-controls .fader-ticks { left: 68px; }
.master-controls .fader-input { left: -5px; width: 66px; }
.master-controls .faderunit { min-width: 103px; }
.master-controls .faderunit .lcd { width: 98px; }
.master-controls { gap: 17px; }

/* Potentiometer: concentric mounting cavity, segmented LED ring and lathed face. */
.knob {
  width: 112px; height: 112px;
  border: 1px solid #080c0e;
  background: radial-gradient(circle,#131b20 57%,#060b0e 63%,#0c1419 68%,#3b464c 71%,#0a1014 73%);
  box-shadow: -2px -3px 4px #000a, 1px 2px 1px #c3d0d033,
    inset 1px 1px 2px #aabcc544, inset -2px -3px 5px #000d;
}
.knob::before, .knob::after { content: none; }
.knob-ring {
  position: absolute; inset: 7px; border-radius: 50%;
  background: conic-gradient(from 225deg,
    #8df2ff 0deg, #64d7f3 var(--sweep),
    #28353c calc(var(--sweep) + 1deg), #28353c 270deg, transparent 270deg);
  mask: radial-gradient(circle,transparent 63%,#000 65%,#000 72%,transparent 74%);
  -webkit-mask: radial-gradient(circle,transparent 63%,#000 65%,#000 72%,transparent 74%);
  filter: drop-shadow(0 0 3px #7cecff);
}
.knob-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 225deg,transparent 0deg 3deg,#0b151ada 3deg 6deg);
}
.knob-dial {
  position: absolute; inset: 20px; border-radius: 50%;
  border: 1px solid #1b242a;
  background:
    repeating-radial-gradient(circle,transparent 0 .65px,#ffffff09 .8px 1px,transparent 1.2px 1.7px),
    conic-gradient(from -35deg,#7b8488,#d4d9da 12%,#7d878b 25%,#515c61 35%,#dce1e3 47%,#afb7ba 51%,#6e787c 62%,#e4e9ea 77%,#abb4b9 88%,#7b8488);
  box-shadow: 0 0 0 2px #090f12, 0 0 0 3px #89949a,
    inset 0 0 0 2px #b5bfc2, inset 0 0 0 3px #5e6a70,
    inset 1px 2px 3px #f7fbfca0, inset -1px -2px 3px #10191bc0,
    4px 7px 7px #000b, 0 0 8px #0008;
}
.knob-dial::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: radial-gradient(ellipse at 34% 15%,#fff5,transparent 42%);
  pointer-events: none;
}
.knob-mark {
  position: absolute; inset: 0; border-radius: 50%;
  transform: rotate(var(--angle));
}
.knob-mark::before {
  content: ''; position: absolute; top: 6px; left: calc(50% - 2px);
  width: 4px; height: 25px; border-radius: 1px;
  background: linear-gradient(90deg,#020608,#141b1e 70%,#040809);
  box-shadow: -1px 0 1px #0009, 1px 0 1px #fff9, 0 1px 1px #b7c2c8;
}
.knob input { z-index: 3; }
.knob:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 4px; }
.knob-limits { width: 112px; display: flex; justify-content: space-between; color: #83939b; font-size: 10px; margin-top: 5px; }
.knob-unit .lcd { font-size: 20px; padding: 10px 9px; }
.position-controls { padding: 4px 0; }
.color-controls { min-height: 310px; }
.color-wheel { box-shadow: -2px -3px 6px #000a, 1px 2px 1px #b4c7ca66, inset 3px 5px 13px #000b, 0 2px 3px #000; }
.inset { box-shadow: inset 3px 5px 10px #000b, inset -1px -1px 2px #61767d55, 0 1px 0 #b6c5c529; }
.swatch { box-shadow: 0 0 0 1px #63747c, 1px 4px 5px #000b, inset 2px 3px 4px #ffffff69, inset -2px -3px 4px #0008; }
.color-controls:has(.wheel-wrap) {
  display: grid;
  grid-template-columns: minmax(365px,1.65fr) minmax(140px,.8fr) minmax(100px,.45fr);
  gap: 14px;
}
.color-controls .faderbank { min-width: 0; gap: 10px; }
.color-controls .faderunit { flex: 1; min-width: 0; }
.color-controls .faderunit output { min-width: 0; width: 100%; }
.color-controls .wheel-wrap { min-width: 0; }
.color-controls .color-wheel { width: 100%; max-width: 210px; height: auto; aspect-ratio: 1; margin: auto; }
.color-controls .swatches { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.color-controls .swatch { width: 100%; height: 39px; }
.color-controls:has(.wheel-wrap)>div:last-child { min-width: 0; }
.color-controls .fader-ticks { left: 56px; }
.color-controls .fader-ticks span { left: 17px; }
@media(max-width:1350px) {
  .faderbank { gap: 12px; }
  .faderunit { min-width: 75px; }
  .faderunit output { min-width: 72px; font-size: 18px; }
  .fader-assembly { width: 75px; height: 195px; }
  .fader-ticks { left: 53px; width: 7px; }
  .fader-ticks span { left: 12px; font-size: 9px; }
  .fader-ticks span::before { width: 10px; right: calc(100% + 3px); }
  .knob { width: 100px; height: 100px; }
  .knob-limits { width: 100px; }
  .knob-dial { inset: 18px; }
  .knob-unit .lcd { font-size: 17px; }
  .master-buttons .hardware { width: 113px; }
  .color-controls:has(.wheel-wrap) { grid-template-columns: minmax(295px,1.6fr) minmax(130px,.8fr) minmax(85px,.45fr); gap: 10px; }
  .color-controls .faderbank { gap: 7px; }
  .color-controls .fader-ticks { left: 53px; }
  .color-controls .fader-ticks span { left: 12px; }
}
@media(max-width:1100px) {
  .faderbank { gap: 23px; }
  .master-controls { justify-content: center; gap: 55px; }
  .master-buttons .hardware { width: 180px; }
}
@media(max-width:760px) {
  .faderbank { gap: 11px; }
  .faderunit { min-width: 66px; }
  .faderunit output { min-width: 60px; font-size: 16px; }
  .fader-assembly { width: 67px; }
  .color-controls { row-gap: 28px; }
  .position-controls { gap: 24px; }
  .knob-unit .lcd { width: 70px; }
  .master-controls { gap: 28px; }
  .master-buttons .hardware { width: 130px; }
  .color-controls:has(.wheel-wrap) { grid-template-columns: minmax(0,1fr) minmax(95px,.6fr); }
  .color-controls .faderbank { grid-column: 1/-1; }
}