/* =============================================================================
   Controls
   ============================================================================= */
.ctl { display: flex; flex-direction: column; align-items: center; gap: 4px; user-select: none; -webkit-user-select: none; position: relative; }
.ctl-label { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; text-align: center; line-height: 1.1; max-width: 96px; color: var(--sk-label, #d8d4cb); }
.ctl-value { font-family: var(--font-lcd); font-size: 17px; line-height: 1; min-height: 15px; color: var(--sk-value, #ffb26b); text-align: center; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl.is-dragging .ctl-value { color: #fff; }

/* ---------------------------------------------------------------- Knob */
.knob { width: 92px; }
.knob-body { position: relative; cursor: ns-resize; border-radius: 50%; touch-action: none; }
.knob-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.knob-track { fill: none; stroke: rgba(0,0,0,.45); stroke-width: 5; stroke-linecap: round; }
.knob-arc { fill: none; stroke: var(--accent, #ff8f3a); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--accent, #ff8f3a)); }
.knob-dot { fill: rgba(255,255,255,.35); }
.knob-cap {
  position: absolute; inset: 15%; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #5b5d63, #2a2b2f 55%, #141517);
  box-shadow: 0 3px 6px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.25), 0 0 0 2px #0b0b0c;
}
.knob-pointer { position: absolute; left: 50%; top: 7%; width: 3px; height: 34%; margin-left: -1.5px; background: #f2efe8; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.5); }
.knob-body:focus-visible { outline-offset: 4px; }

/* knob styles */
.knob--chicken .knob-cap { inset: 12%; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #3a332c, #120f0c 70%); }
.knob--chicken .knob-cap::before { content: ''; position: absolute; left: 50%; top: -6%; width: 30%; height: 112%; margin-left: -15%; border-radius: 45% 45% 40% 40% / 30% 30% 20% 20%;
  background: linear-gradient(90deg, #0f0c0a, #3b322b 45%, #19140f); box-shadow: 0 3px 5px rgba(0,0,0,.8); }
.knob--chicken .knob-pointer { top: -2%; height: 28%; width: 4px; margin-left: -2px; background: #f4ecd8; z-index: 1; }
.knob--chicken .knob-arc { stroke: #f4ecd8; filter: none; opacity: .75; }
.knob--chrome .knob-cap { background: conic-gradient(from 30deg, #8c9096, #f4f6f8, #9a9ea4, #e9ecef, #7e8288, #f2f4f6, #8c9096); box-shadow: 0 3px 6px rgba(0,0,0,.7), 0 0 0 2px #2a2b2e; }
.knob--chrome .knob-pointer { background: #111; }
.knob--black .knob-cap { background: radial-gradient(circle at 35% 28%, #3c3d40, #111 65%); }
.knob--tine .knob-cap { inset: 12%; background: radial-gradient(circle at 50% 50%, #121212 52%, #b9bdc2 54%, #e9ebee 62%, #8b8f94 76%, #2a2b2d 78%); }
.knob--tine .knob-pointer { background: #fff; height: 26%; top: 9%; }
.knob--tine .knob-arc { stroke: #c62f2f; filter: none; }
.knob--reed .knob-cap { background: radial-gradient(circle at 35% 30%, #4a3a2b, #1d150e 70%); }
.knob--reed .knob-pointer { background: #f3e6c9; }
.knob--reed .knob-arc { stroke: #7a4a22; filter: none; }
.knob--grand .knob-cap { background: radial-gradient(circle at 35% 28%, #333, #050505 70%); box-shadow: 0 3px 6px rgba(0,0,0,.8), 0 0 0 3px #b8bcc2; }
.knob--grand .knob-arc { stroke: #e04848; filter: none; }
.knob--brass .knob-cap { background: radial-gradient(circle at 35% 28%, #fff1b8, #d4a73b 40%, #7d5a12 85%); box-shadow: 0 3px 6px rgba(0,0,0,.7), 0 0 0 2px #3d2a06; }
.knob--brass .knob-pointer { background: #2a1a04; }
.knob--brass .knob-arc { stroke: #ffd36a; }
.knob--gold .knob-cap { background: radial-gradient(circle at 35% 28%, #2b2b2b, #050505 70%); box-shadow: 0 3px 6px rgba(0,0,0,.8), 0 0 0 2px #c9a24b; }
.knob--gold .knob-pointer { background: #e8c56a; }
.knob--gold .knob-arc { stroke: #e8c56a; }
.knob--rack .knob-cap { background: radial-gradient(circle at 35% 28%, #77797f, #3b3d42 60%, #26272a); }
.knob--rack .knob-arc { stroke: #ffb347; }
.knob--alu .knob-cap { background: repeating-conic-gradient(from 0deg, #c8ccd2 0 6deg, #b3b8bf 6deg 12deg); box-shadow: 0 3px 6px rgba(0,0,0,.7), inset 0 0 0 6px rgba(255,255,255,.12), 0 0 0 2px #1a1b1e; }
.knob--alu .knob-pointer { background: #1a64d6; }
.knob--alu .knob-arc { stroke: #3d8bff; }
.knob--synth .knob-cap { background: radial-gradient(circle at 35% 28%, #3a3b3f, #121314 70%); }
.knob--synth .knob-cap::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: var(--accent, #ccc); opacity: .9; box-shadow: inset 0 1px 2px rgba(255,255,255,.4); }
.knob--synth .knob-pointer { background: #fff; z-index: 1; }
.knob--console .knob-cap { background: radial-gradient(circle at 35% 28%, #4a4c52, #1b1c1f 70%); }
.knob--console .knob-arc { stroke: #66d18f; }
.knob--cream .knob-cap { background: radial-gradient(circle at 35% 28%, #fffaf0, #e6dcc6 50%, #a99b7e); }
.knob--cream .knob-pointer { background: #222; }
.knob--pedal .knob-cap { background: radial-gradient(circle at 35% 28%, #3d3d3d, #0d0d0d 70%); box-shadow: 0 3px 6px rgba(0,0,0,.7), 0 0 0 2px #050505; }
.knob--pedal .knob-arc { stroke: var(--fx, #fff); filter: none; }

/* ---------------------------------------------------------------- Drawbar */
.drawbar { width: 38px; --pull: 0; }
.db-footage { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--sk-label, #e8e2d2); white-space: nowrap; height: 14px; }
.db-slot { position: relative; width: 34px; height: 214px; cursor: ns-resize; touch-action: none; }
.db-rail { position: absolute; left: 7px; right: 7px; top: 0; bottom: 0; }
.db-shaft {
  position: absolute; left: 4px; right: 4px; top: 0; height: calc(10px + var(--pull) * 160px);
  background:
    repeating-linear-gradient(to top, rgba(0,0,0,.55) 0 1px, transparent 1px 20px) bottom / 100% calc(var(--pull) * 160px) no-repeat,
    linear-gradient(90deg, #6d6f74, #f2f3f5 45%, #85888d); border-radius: 0 0 2px 2px;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.3);
}
.db-handle {
  position: absolute; left: -5px; right: -5px; top: calc(4px + var(--pull) * 160px); height: 40px; border-radius: 4px 4px 8px 8px;
  display: grid; place-items: end center; padding-bottom: 4px;
  box-shadow: 0 4px 6px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.4), inset 0 -3px 4px rgba(0,0,0,.25);
  transition: top .05s;
}
.db-num { font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.drawbar .ctl-value { display: none; }
.drawbar--brown .db-handle { background: linear-gradient(#7a4a2b, #4b2a15); color: #f2e6d4; }
.drawbar--white .db-handle { background: linear-gradient(#fbf8f1, #d8d2c3); color: #1a1a1a; }
.drawbar--black .db-handle { background: linear-gradient(#3a3a3a, #0b0b0b); color: #f2f2f2; }
.drawbar--vox-white .db-handle { background: linear-gradient(#f5f5f5, #c9c9c9); color: #111; border-radius: 2px; height: 30px; }
.drawbar--vox-black .db-handle { background: linear-gradient(#2c2c2c, #050505); color: #eee; border-radius: 2px; height: 30px; }
.drawbar.is-dragging .db-handle { transition: none; filter: brightness(1.12); }

/* ---------------------------------------------------------------- Rocker tab */
.rocker { width: 60px; }
.rk-face {
  position: relative; width: 56px; height: 74px; border-radius: 5px; border: 1px solid #000; cursor: pointer; padding: 6px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  font-family: var(--font-display); font-weight: 700; font-size: 10px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0;
  background: linear-gradient(#fbf8f2 0%, #e8e3d8 48%, #bfb8a8 50%, #d8d2c4 100%);
  box-shadow: 0 6px 0 -1px #6b6658, 0 8px 8px rgba(0,0,0,.6); color: #222; transition: transform .06s, box-shadow .06s;
}
.rk-face .rk-led { display: none; }
.rk-text { overflow-wrap: normal; word-break: normal; hyphens: auto; max-width: 100%; font-size: 9.5px; letter-spacing: -.02em; }
.rocker.is-on .rk-face { transform: translateY(4px); background: linear-gradient(#cfc9bb 0%, #ddd8cc 50%, #f6f2ea 52%, #fdfbf6 100%); box-shadow: 0 2px 0 -1px #6b6658, 0 3px 4px rgba(0,0,0,.6); }
.rocker .ctl-value { font-size: 14px; }
.rocker:not(.is-multi) .ctl-value { display: none; }
.rocker--black .rk-face { background: linear-gradient(#3a3a3a 0%, #1d1d1d 48%, #050505 50%, #151515 100%); color: #eee; box-shadow: 0 6px 0 -1px #000, 0 8px 8px rgba(0,0,0,.6); }
.rocker--black.is-on .rk-face { background: linear-gradient(#050505 0%, #111 50%, #2c2c2c 52%, #3d3d3d 100%); box-shadow: 0 2px 0 -1px #000, 0 3px 4px rgba(0,0,0,.6); }
.rocker--red .rk-face { background: linear-gradient(#ff6a52 0%, #e0321c 48%, #a51d0d 50%, #c9301b 100%); color: #fff; box-shadow: 0 6px 0 -1px #5a0f06, 0 8px 8px rgba(0,0,0,.6); }
.rocker--red.is-on .rk-face { background: linear-gradient(#8d190b 0%, #b02310 50%, #e94a33 52%, #ff7863 100%); }
.rocker--yellow .rk-face { background: linear-gradient(#ffe48a 0%, #f2c536 48%, #c79a10 50%, #e3b72a 100%); box-shadow: 0 6px 0 -1px #6a5208, 0 8px 8px rgba(0,0,0,.6); }
.rocker--yellow.is-on .rk-face { background: linear-gradient(#b48a0c 0%, #d4a91f 50%, #f5d058 52%, #ffe9a0 100%); }
.rocker--grey .rk-face { background: linear-gradient(#b8bbbf 0%, #9a9da2 48%, #74777c 50%, #8e9196 100%); color: #111; box-shadow: 0 6px 0 -1px #3a3c40, 0 8px 8px rgba(0,0,0,.6); }
.rocker--grey.is-on .rk-face { background: linear-gradient(#6b6e73 0%, #85888d 50%, #a6a9ad 52%, #c3c6ca 100%); }
.rocker--cream .rk-face { background: linear-gradient(#fff7e4 0%, #efe2c4 48%, #c9b48a 50%, #e2d1aa 100%); }

/* ---------------------------------------------------------------- LED button / membrane */
.ledbtn { width: 74px; }
.ledbtn .rk-face {
  width: 52px; height: 32px; border-radius: 5px; border: 1px solid #000; cursor: pointer; padding: 0;
  background: linear-gradient(#45474d, #26272b); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 4px rgba(0,0,0,.6);
  display: grid; place-items: center;
}
.ledbtn .rk-text { display: none; }
.ledbtn .rk-led { width: 16px; height: 6px; border-radius: 3px; background: #3a1210; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.ledbtn.is-on .rk-led { background: #ff4a3a; box-shadow: 0 0 8px #ff4a3a, 0 0 2px #fff inset; }
.ledbtn--orange.is-on .rk-led { background: #ffa23a; box-shadow: 0 0 8px #ffa23a; }
.ledbtn--amber.is-on .rk-led { background: #ffc13a; box-shadow: 0 0 8px #ffc13a; }
.ledbtn--green.is-on .rk-led { background: #57e07c; box-shadow: 0 0 8px #57e07c; }
.ledbtn--blue.is-on .rk-led { background: #3d8bff; box-shadow: 0 0 8px #3d8bff; }
.ledbtn .rk-face:active { transform: translateY(1px); }
.ledbtn:not(.is-multi) .ctl-value { display: none; }
.ledbtn .ctl-label { order: -1; }

/* pipe-organ coupler tablet */
.tabsw { width: 76px; }
.tabsw .rk-face {
  width: 64px; height: 46px; border-radius: 6px 6px 18px 18px; border: 1px solid #5a4a30; cursor: pointer; padding: 4px;
  background: linear-gradient(#fffaf0, #e9dfc8); color: #8a1a12; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 11px;
  box-shadow: 0 4px 0 #a8946c, 0 6px 8px rgba(0,0,0,.6); transform-origin: 50% 0; transition: transform .08s;
  display: grid; place-items: center; text-align: center;
}
.tabsw .rk-led { display: none; }
.tabsw.is-on .rk-face { transform: perspective(200px) rotateX(-22deg); background: linear-gradient(#e2d6bb, #fff6e2); box-shadow: 0 1px 0 #a8946c, 0 2px 3px rgba(0,0,0,.6); }
.tabsw .ctl-value { display: none; }

/* ---------------------------------------------------------------- Stop (drawknob) */
.stop { width: 92px; height: 104px; justify-content: center; }
.stop-shaft { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: radial-gradient(#4a3420, #1d1209); box-shadow: 0 0 0 5px #2b1b0e; }
.stop-knob {
  position: relative; width: 78px; height: 78px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 40% 35%, #fffdf7, #efe6d2 60%, #c9b994 100%);
  box-shadow: 0 0 0 5px #3a2614, 0 0 0 7px #6b4b2a, 0 4px 8px rgba(0,0,0,.6); transition: transform .12s, box-shadow .12s;
}
.stop-face { position: absolute; inset: 9px; border-radius: 50%; border: 1px solid #c9b48a; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2px; }
.stop-name { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 11.5px; color: #1d1d1d; line-height: 1.05; }
.stop-feet { font-family: 'Playfair Display', Georgia, serif; font-size: 12px; color: #9a1c12; }
.stop.is-on .stop-knob { transform: scale(1.12) translateY(-3px); box-shadow: 0 0 0 5px #3a2614, 0 0 0 7px #8a6538, 0 14px 18px rgba(0,0,0,.75); }
.stop .ctl-value { display: none; }

/* ---------------------------------------------------------------- Fader */
.fader { width: 64px; --pos: 0; }
.fader .ctl-label { font-size: 10.5px; max-width: 64px; overflow-wrap: anywhere; }
.fd-track { position: relative; width: 30px; height: 150px; cursor: ns-resize; touch-action: none; }
.fd-track::before { content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 6px; margin-left: -3px; background: #050506; border-radius: 3px; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,.08); }
.fd-scale { position: absolute; left: 0; right: 0; top: 10px; bottom: 10px; background: repeating-linear-gradient(transparent 0 calc(10% - 1px), rgba(255,255,255,.18) calc(10% - 1px) 10%); mask: linear-gradient(90deg, #000 0 22%, transparent 22% 78%, #000 78%); -webkit-mask: linear-gradient(90deg, #000 0 22%, transparent 22% 78%, #000 78%); pointer-events: none; }
.fd-fill { position: absolute; left: 50%; bottom: 6px; width: 6px; margin-left: -3px; height: calc(var(--pos) * (100% - 12px)); background: var(--accent, #ff8f3a); border-radius: 3px; opacity: .8; }
.fd-cap {
  position: absolute; left: -2px; right: -2px; height: 22px; bottom: calc(var(--pos) * (100% - 22px)); border-radius: 3px; pointer-events: none;
  background: linear-gradient(#5c5e64, #2a2b2f 45%, #f2f2f2 47%, #f2f2f2 53%, #2a2b2f 55%, #4b4d52); box-shadow: 0 3px 5px rgba(0,0,0,.7);
}
.fader--cream .fd-cap { background: linear-gradient(#fff6e2, #e2d3b2 45%, #8a5a20 47%, #8a5a20 53%, #e2d3b2 55%, #c9b994); }
.fader--cream .fd-fill { background: #ff9a2e; }
.fader--synth .fd-cap { background: linear-gradient(#3a3b3f, #151617 45%, var(--accent, #fff) 47%, var(--accent, #fff) 53%, #151617 55%, #2c2d31); }
.fader--console .fd-cap, .fader--master .fd-cap { background: linear-gradient(#777a80, #3d3f44 45%, #fff 47%, #fff 53%, #3d3f44 55%, #5e6066); height: 26px; }
.fader--console .fd-fill { background: #66d18f; }
.fader--master .fd-fill { background: #ff6a3a; }

/* ---------------------------------------------------------------- Horizontal slider */
.hslider { width: 100%; min-width: 180px; align-items: stretch; --pos: 0; }
.hs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hslider .ctl-label { text-align: left; max-width: none; }
.hs-track { position: relative; height: 26px; border-radius: 4px; background: #08090a; box-shadow: inset 0 2px 4px #000; cursor: ew-resize; touch-action: none; }
.hs-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--pos) * 100%); background: linear-gradient(90deg, rgba(255,143,58,.15), rgba(255,143,58,.55)); border-radius: 4px; }
.hs-thumb { position: absolute; top: -3px; bottom: -3px; width: 16px; left: calc(var(--pos) * (100% - 16px)); border-radius: 3px; background: linear-gradient(#f2f2f2, #9a9da2); box-shadow: 0 2px 4px rgba(0,0,0,.7); pointer-events: none; }

/* ---------------------------------------------------------------- Stomp switch */
.stomp { gap: 10px; }
.stomp-led { width: 12px; height: 12px; border-radius: 50%; background: #3a0c0a; box-shadow: inset 0 1px 2px #000, 0 0 0 2px rgba(0,0,0,.4); }
.stomp.is-on .stomp-led { background: #ff3b2e; box-shadow: 0 0 12px #ff3b2e, 0 0 3px #fff inset; }
.stomp-sw {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #ffffff, #c9ccd1 35%, #7c8086 70%, #3d4045);
  box-shadow: 0 0 0 4px #1d1e20, 0 0 0 6px #6d7076, 0 6px 10px rgba(0,0,0,.7);
}
.stomp-sw:active { transform: scale(.96); }