/* ═══════════════════════════════════════════════════════════════════════
   KNOB SKINS: the restyles of the variable knobs (Settings ⋯ > Knob style).
   Generated by Teamcrafter design/knobs/ship_skins.py from design/knobs/skins/*.css
   (each skin passed the knob test stage; the source of truth is that folder).

   A skin is chosen with data-skin on #knobs-container and draws from:
     --knob-color                          the knob's own hue (set by app.js)
     --knob-t / --knob-n / --knob-angle    position 0..1, number of values, pointer angle (set by app.js: setKnobScale)
     --k-surface --k-surface-2 --k-ink --k-ink-2 --k-line   the panel tokens below, mapped from each theme
   The same tokens (and --knob-color/-t/-n/-angle, --dpad-vi/--dpad-vn) are set on #center-control for a D-pad skin.
   With no data-skin the knobs keep the classic look.
   ═══════════════════════════════════════════════════════════════════════ */

/* Panel tokens: Hardware theme (the default chassis) */
#knobs-container, #center-control {
  --k-surface:   var(--hw-panel, #e4dccf);
  --k-surface-2: var(--hw-lcd-bg, #f0e8d0);
  --k-ink:       var(--hw-text, #2e2418);
  --k-ink-2:     #5c5040;
  --k-line:      #7a6e5e;
}
/* Cel-Pastel: the knobs sit on paper cards with an ink outline */
body.theme-cel-pastel #knobs-container, body.theme-cel-pastel #center-control {
  --k-surface:   var(--cp-paper, #fffdf6);
  --k-surface-2: var(--cp-paper2, #f4efe2);
  --k-ink:       var(--cp-ink, #1d2233);
  --k-ink-2:     var(--cp-ink2, #4a5068);
  --k-line:      #7a7f94;
}
/* A skinned knob keeps its card flat so the skin's own surfaces carry the state */
body.theme-cel-pastel #knobs-container[data-skin] .knob-item.active { background: var(--cp-paper, #fffdf6); }
body.theme-cel-pastel #knobs-container[data-skin] .knob-dial { border: 0; }


/* ── Champlevé Enamel · Overflow Spill (enamel-spill-pool) ── */
#knobs-container[data-skin="enamel-spill-pool"] .knob-item { --sp-dial: oklch(from var(--k-surface-2) calc(l + 0.2 * (1 - l) * (1 - l)) c h); --sp-track: oklch(from var(--k-surface-2) calc(l + 0.3 * (1 - l) * (1 - l)) c h); --sp-bead: oklch(from var(--k-surface) calc(l + 1.4 * (1 - l) * (1 - l)) c h); --sp-line: color-mix(in srgb, var(--k-line) 55%, var(--k-ink-2)); --sp-tick: color-mix(in srgb, var(--k-ink) 85%, transparent); --sp-gaps: max(var(--knob-n, 6) - 1, 1); }
#knobs-container[data-skin="enamel-spill-pool"] .knob-var-name { color: var(--k-ink); }
#knobs-container[data-skin="enamel-spill-pool"] .knob-value-label { color: var(--k-ink); background: var(--k-surface); border-color: var(--sp-line); transition: 0.2s; }
#knobs-container[data-skin="enamel-spill-pool"] .knob-dial { background: var(--sp-dial); box-shadow: rgba(0, 0, 0, 0.15) 0 1px 3px inset, rgba(0, 0, 0, 0.2) 0 2px 4px, 0 0 0 1px color-mix(in srgb, var(--k-ink) 14%, transparent); }
#knobs-container[data-skin="enamel-spill-pool"] .knob-item:focus-visible { outline: 3px solid var(--k-ink); outline-offset: 3px; }
#knobs-container[data-skin="enamel-spill-pool"] .knob-indicator { box-shadow: rgba(0, 0, 0, 0.6) 0 2px 4px inset, rgba(255, 255, 255, 0.1) 0 1px 0; border: 1px solid var(--sp-line); width: 12cqh; height: 12cqh; top: 13cqh; transform-origin: 50% 37cqh; background: var(--sp-bead) !important; }
#knobs-container[data-skin="enamel-spill-pool"] .knob-item:hover .knob-dial { background: color-mix(in srgb, var(--sp-dial) 80%, var(--k-ink)); }
#knobs-container[data-skin="enamel-spill-pool"] .knob-item:active .knob-dial { box-shadow: rgba(0, 0, 0, 0.3) 0 3px 6px inset, 0 0 0 1px color-mix(in srgb, var(--k-ink) 14%, transparent); }
#knobs-container[data-skin="enamel-spill-pool"] .knob-item.midi-flash .knob-ring { opacity: 0.6; }
#knobs-container[data-skin="enamel-spill-pool"] .knob-ring { inset: 0; border: 0; opacity: 1; box-shadow: none; background: conic-gradient(from -135deg, var(--knob-color) 0 calc(var(--knob-t, 0) * 270deg), var(--sp-track) 0 270deg, transparent 0); mask: radial-gradient(farthest-side, transparent 76%, #000 78%, #000 94%, transparent 96%); }
#knobs-container[data-skin="enamel-spill-pool"] .knob-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -136.75deg, var(--sp-tick) 0 3.5deg, transparent 0 calc(270deg / var(--sp-gaps))); mask: conic-gradient(from -137deg, #000 0 274deg, transparent 0); }
#knobs-container[data-skin="enamel-spill-pool"] .knob-item.active .knob-ring { mask: radial-gradient(farthest-side, transparent 50%, #000 52%, #000 98%, transparent 100%); }
#knobs-container[data-skin="enamel-spill-pool"] .knob-item.active .knob-value-label { background: var(--k-ink); color: var(--k-surface); border-color: var(--knob-color); font-weight: bold; }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin="enamel-spill-pool"] .knob-item, #knobs-container[data-skin="enamel-spill-pool"] .knob-item * { transition: none !important; animation: none !important; } }

/* ── Stage Mask · Sweep (stage-mask-sweep) ── */
#knobs-container[data-skin="stage-mask-sweep"] .knob-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#knobs-container[data-skin="stage-mask-sweep"] .knob-indicator { width: 4px; height: 12cqh; background: var(--k-ink-2); border-radius: 2px; top: 10cqh; transform-origin: 50% 40cqh; box-shadow: inset 0 1px 1px var(--k-line); transition: background-color 0.1s; display: block !important; }
#knobs-container[data-skin="stage-mask-sweep"] .knob-item.active .knob-indicator { background: var(--k-ink); }
#knobs-container[data-skin="stage-mask-sweep"] .knob-ring { position: absolute; inset: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 50%; opacity: 1; box-shadow: none; background: conic-gradient(from -170deg, var(--k-surface-2) 0 1.5deg, var(--k-ink) 1.5deg 20deg, transparent 20deg 25deg, var(--k-line) 25deg 311deg, transparent 0); mask: radial-gradient(farthest-side, transparent 76%, rgb(0, 0, 0) 78%, rgb(0, 0, 0) 98%, transparent 100%); }
#knobs-container[data-skin="stage-mask-sweep"] .knob-dial { position: absolute; inset: 6px; border-radius: 50%; background: var(--k-surface); box-shadow: inset 0 0 0 2px var(--k-line), 0 0 0 1px var(--k-surface-2); container-type: size; transform-origin: center center; transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s, background-color 0.1s; }
#knobs-container[data-skin="stage-mask-sweep"] .knob-dial-wrapper::after { pointer-events: none; }
#knobs-container[data-skin="stage-mask-sweep"] .knob-value-label { background: var(--k-surface); border: 1px solid var(--k-line); color: var(--k-ink); border-radius: 0px; font-size: 11px; padding: 4px 10px; max-width: 110px; text-align: center; }
#knobs-container[data-skin="stage-mask-sweep"] .knob-var-name { font-size: 11px; font-weight: 600; color: var(--k-ink-2); text-transform: uppercase; letter-spacing: 0.5px; }
#knobs-container[data-skin="stage-mask-sweep"] .knob-item:hover .knob-dial { transform: scale(0.94); box-shadow: inset 0 0 0 2px var(--k-ink-2); }
#knobs-container[data-skin="stage-mask-sweep"] .knob-item:hover .knob-ring, #knobs-container[data-skin="stage-mask-sweep"] .knob-item:hover .knob-dial-wrapper::after { mask: radial-gradient(farthest-side, transparent 70%, rgb(0, 0, 0) 72%, rgb(0, 0, 0) 98%, transparent 100%); }
#knobs-container[data-skin="stage-mask-sweep"] .knob-item.active .knob-dial { transform: scale(0.86); background: var(--k-surface-2); box-shadow: inset 0 0 0 2px var(--k-ink); }
#knobs-container[data-skin="stage-mask-sweep"] .knob-item.active .knob-ring, #knobs-container[data-skin="stage-mask-sweep"] .knob-item.active .knob-dial-wrapper::after { mask: radial-gradient(farthest-side, transparent 66%, rgb(0, 0, 0) 68%, rgb(0, 0, 0) 98%, transparent 100%); }
#knobs-container[data-skin="stage-mask-sweep"] .knob-item.active .knob-value-label { background: var(--k-ink); color: var(--k-surface); border-color: var(--k-ink); }
#knobs-container[data-skin="stage-mask-sweep"] .knob-item.active .knob-var-name { color: var(--k-ink); }
#knobs-container[data-skin="stage-mask-sweep"] .knob-item:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 3px; }
#knobs-container[data-skin="stage-mask-sweep"] .knob-item:active .knob-dial-wrapper { transform: scale(0.96); }
#knobs-container[data-skin="stage-mask-sweep"] .knob-item.midi-flash .knob-dial { box-shadow: inset 0 0 0 4px var(--knob-color), 0 0 0 1px var(--k-surface-2); }
#knobs-container[data-skin="stage-mask-sweep"] .knob-dial-wrapper::after { content: ""; position: absolute; inset: 0px; border-radius: 50%; background: conic-gradient(from -135deg, var(--knob-color) 0 calc(var(--knob-t) * 270deg), transparent 0); mask: radial-gradient(farthest-side, transparent 76%, rgb(0, 0, 0) 78%, rgb(0, 0, 0) 98%, transparent 100%); }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin="stage-mask-sweep"] .knob-item, #knobs-container[data-skin="stage-mask-sweep"] .knob-item * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } }

/* ── high-sector · Sector Inverted (high-sector-inverted) ── */
#knobs-container[data-skin="high-sector-inverted"] .knob-var-name { font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--k-ink) !important; }
#knobs-container[data-skin="high-sector-inverted"] .knob-value-label { font-weight: 700; box-shadow: 2px 2px 0 var(--k-ink); background: var(--k-surface) !important; color: var(--k-ink) !important; border: 2px solid var(--k-ink) !important; border-radius: 0px !important; }
#knobs-container[data-skin="high-sector-inverted"] .knob-item.active .knob-value-label { background: var(--k-ink) !important; color: var(--k-surface) !important; border-color: var(--k-ink) !important; }
#knobs-container[data-skin="high-sector-inverted"] .knob-item:focus-visible { outline: 4px solid var(--k-ink); outline-offset: 4px; }
#knobs-container[data-skin="high-sector-inverted"] .knob-dial { background: var(--k-surface); border: 2px solid var(--k-ink); box-shadow: none; border-radius: 50%; transition: transform 0.1s, border-color 0.1s; }
#knobs-container[data-skin="high-sector-inverted"] .knob-item:hover .knob-dial { border-color: var(--k-ink-2); }
#knobs-container[data-skin="high-sector-inverted"] .knob-item:active .knob-dial { transform: scale(0.96); border-color: var(--knob-color); }
#knobs-container[data-skin="high-sector-inverted"] .knob-indicator { background: var(--knob-color); border-radius: 0px; width: 10cqw; height: 22cqh; top: 14cqh; transform-origin: 50% 36cqh; box-shadow: 0 0 0 1px var(--k-ink); }
#knobs-container[data-skin="high-sector-inverted"] .knob-item.active .knob-indicator { width: 20cqw; }
#knobs-container[data-skin="high-sector-inverted"] .knob-ring { mask-image: var(--hs-ring-mask), conic-gradient(from -135deg, #000 0 270deg, transparent 0); mask-composite: source-in; opacity: 1 !important; box-shadow: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; }
#knobs-container[data-skin="high-sector-inverted"] .knob-item.midi-flash .knob-dial { background: var(--knob-color) !important; }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin="high-sector-inverted"] .knob-item, #knobs-container[data-skin="high-sector-inverted"] .knob-item * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } }
#knobs-container[data-skin="high-sector-inverted"] .knob-item { --hs-ring-mask: radial-gradient(farthest-side, transparent 72%, #000 75%); }
#knobs-container[data-skin="high-sector-inverted"] .knob-dial { background: var(--k-ink); border-color: var(--k-line); }
#knobs-container[data-skin="high-sector-inverted"] .knob-ring { background: conic-gradient(from -135deg, var(--k-surface-2) 0 270deg, transparent 0); }
#knobs-container[data-skin="high-sector-inverted"] .knob-ring::after { content: ""; position: absolute; inset: 0px; background: conic-gradient(from -135deg, var(--k-ink-2) 0 270deg, transparent 0); mask: conic-gradient(from -135deg, #000 0 calc(var(--knob-t) * 270deg), transparent 0); }
#knobs-container[data-skin="high-sector-inverted"] .knob-item.active .knob-ring::after { background: conic-gradient(from -135deg, var(--knob-color) 0 270deg, transparent 0); }

/* ── arcade-jawbreaker · Matte Rubber (arcade-jawbreaker-matte-rubber) ── */
#knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-value-label, #knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-var-name { color: var(--k-ink); background: var(--k-surface-2); border: 2px solid var(--k-line); }
#knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-item.active .knob-value-label { background: var(--k-ink); color: var(--k-surface); border-color: var(--k-ink); font-weight: bold; }
#knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-ring { inset: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; opacity: 1; box-shadow: none; background: conic-gradient(from -135deg, var(--knob-color) 0 calc(var(--knob-t) * 270deg), var(--k-line) calc(var(--knob-t) * 270deg) 270deg, transparent 270deg); mask: radial-gradient(farthest-side, transparent 70%, rgb(0, 0, 0) 75%); }
#knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-dial { background: color-mix(in srgb, var(--k-surface) 80%, var(--k-ink)); box-shadow: rgba(0, 0, 0, 0.5) 0px 6px 12px inset; border: 2px solid var(--k-line); }
#knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-item.active .knob-dial { border-color: var(--knob-color); }
#knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-item:hover .knob-dial { background: color-mix(in srgb, var(--k-surface) 70%, var(--k-ink)); }
#knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-item:active .knob-dial { transform: scale(0.98); box-shadow: rgba(0, 0, 0, 0.7) 0px 8px 16px inset; }
#knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-item.midi-flash .knob-indicator { background: var(--k-surface); }
#knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-indicator { width: 16cqh; height: 12cqh; border-radius: 3px; top: 8cqh; left: 50%; transform-origin: 50% 42cqh; background: var(--knob-color); box-shadow: rgba(0, 0, 0, 0.4) 0px -2px 4px inset; }
#knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-item:focus-visible { outline: 3px solid var(--k-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-item, #knobs-container[data-skin="arcade-jawbreaker-matte-rubber"] .knob-item * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } }

/* ── horizon-mass · Solid Mass (horizon-mass-solid) ── */
#knobs-container[data-skin^="horizon-mass"] .knob-item { outline: none; font-family: monospace; }
#knobs-container[data-skin^="horizon-mass"] .knob-indicator, #knobs-container[data-skin^="horizon-mass"] .knob-ring { display: none; }
#knobs-container[data-skin^="horizon-mass"] .knob-dial { background: var(--k-surface-2); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px inset; transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.15s; overflow: hidden; }
#knobs-container[data-skin^="horizon-mass"] .knob-item.active .knob-dial { box-shadow: 0 4px 0 var(--k-ink), inset 0 1px 2px rgba(255,255,255,0.1); transform: translateY(-3px); }
#knobs-container[data-skin^="horizon-mass"] .knob-item:focus-visible { outline: 3px solid var(--k-ink); outline-offset: 4px; border-radius: 4px; }
#knobs-container[data-skin^="horizon-mass"] .knob-item.active .knob-value-label { background: var(--k-ink); color: var(--k-surface); border-color: var(--k-ink); }
#knobs-container[data-skin^="horizon-mass"] .knob-value-label { background: var(--k-surface-2); color: var(--k-ink); border: 1px solid var(--k-line); border-radius: 2px; padding: 3px 6px; font-weight: bold; margin-top: 6px; text-align: center; transition: background 0.1s, color 0.1s; }
#knobs-container[data-skin^="horizon-mass"] .knob-var-name { color: var(--k-ink-2); margin-top: 4px; text-align: center; }
#knobs-container[data-skin^="horizon-mass"] .knob-dial::before { content: ""; position: absolute; inset: 0px; border-radius: 50%; background: repeating-conic-gradient(
    from -136.5deg,
    transparent 0,
    transparent calc(270deg / (var(--knob-n) - 1) - 3deg),
    var(--k-surface) calc(270deg / (var(--knob-n) - 1) - 3deg),
    var(--k-surface) calc(270deg / (var(--knob-n) - 1))
  ); mask: radial-gradient(farthest-side, transparent 82%, black 84%) intersect, conic-gradient(from 135deg, transparent 0deg, transparent 90deg, black 90deg, black 360deg); z-index: 5; pointer-events: none; }
#knobs-container[data-skin="horizon-mass-solid"] .knob-dial::after { content: ""; position: absolute; inset: 0px; border-radius: 50%; background: var(--knob-color); clip-path: polygon(0px 50%, 100% 50%, 100% 100%, 0px 100%); transform: rotate(var(--knob-angle)); transition: transform 0.1s linear; }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin^="horizon-mass"] .knob-item, #knobs-container[data-skin^="horizon-mass"] .knob-item * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } }

/* ── prism-shutter · Lab Plate (prism-shutter-high-key) ── */
#knobs-container[data-skin="prism-shutter-high-key"] .knob-dial-wrapper { container-type: size; }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-value-label { background: var(--k-surface-2); border: 1px solid var(--k-line); color: var(--k-ink); font-weight: bold; transition: 0.2s; }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-var-name { color: var(--k-ink-2); text-transform: uppercase; letter-spacing: 1px; }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-item:focus-visible { outline: 3px solid var(--k-ink); outline-offset: 4px; }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-item.active .knob-value-label { background: var(--k-ink); color: var(--k-surface); border-color: var(--k-ink); }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-item:hover .knob-value-label { border-color: var(--k-ink); }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-item:active .knob-dial-wrapper { transform: scale(0.96); }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-item.midi-flash .knob-ring { filter: brightness(2) saturate(1.5); }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-dial { inset: 0px; background: transparent; box-sizing: border-box; border: 3px solid var(--k-ink); border-radius: 50%; z-index: 2; box-shadow: none; }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-ring { inset: 0px; opacity: 1; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; z-index: 1; background: conic-gradient(from -135deg, var(--knob-color) 0 calc(var(--knob-t) * 270deg), var(--k-surface-2) 0 270deg, transparent 0); mask: radial-gradient(farthest-side, transparent 55%, rgb(0, 0, 0) 57%); }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-indicator { width: 2px; height: 16cqh; background: var(--k-ink); top: 10cqh; left: 50%; transform-origin: 50% 40cqh; margin-left: -1px; z-index: 3; }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-item.active .knob-dial { border-color: var(--knob-color); box-shadow: inset 0 0 12px color-mix(in srgb, var(--knob-color) 40%, transparent); }
#knobs-container[data-skin="prism-shutter-high-key"] .knob-item.active .knob-indicator { background: var(--knob-color); }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin="prism-shutter-high-key"] .knob-item, #knobs-container[data-skin="prism-shutter-high-key"] .knob-item * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } }

/* ── Hungry Cyclops · Sharp (hungry-cyclops-sharp) ── */
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-item { --cy-bg: var(--k-ink); --cy-fg: var(--k-surface); }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-item.active { --cy-bg: var(--k-surface); --cy-fg: var(--k-ink); }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-item:focus-visible { outline: 3px solid var(--k-ink); outline-offset: 4px; }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-item:hover .knob-dial-wrapper { border-color: var(--knob-color); }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-item:active .knob-dial-wrapper { transform: scale(0.95); }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-item.midi-flash .knob-dial-wrapper { background: var(--knob-color); }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-dial-wrapper { border-radius: 50%; background: var(--cy-bg); border: 2px solid var(--cy-fg); overflow: hidden; }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-ring { display: none; }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-dial { inset: 0px; border-radius: 50%; background: none; box-shadow: none; container-type: size; }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-indicator { width: 20cqh; height: 20cqh; border-radius: 50%; background: var(--knob-color); border: 4cqh solid var(--cy-fg); top: 50%; left: 50%; z-index: 2; box-shadow: 0 0 0 2cqh var(--cy-bg); transform: translate(-50%, -50%) !important; }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-value-label { background: var(--cy-bg); color: var(--cy-fg); border: 2px solid var(--cy-fg); font-weight: 900; text-transform: uppercase; box-shadow: 0.15em 0.15em 0 var(--cy-fg); }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-var-name { color: var(--k-ink); font-weight: bold; }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-dial::before, #knobs-container[data-skin="hungry-cyclops-sharp"] .knob-dial::after { content: ""; position: absolute; inset: 4cqh; border-radius: 50%; }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-dial::before { background: repeating-conic-gradient(from -136deg, var(--cy-fg) 0 4deg, transparent 4deg calc(270deg / var(--knob-n))); }
#knobs-container[data-skin="hungry-cyclops-sharp"] .knob-dial::after { background: conic-gradient(from -135deg, var(--knob-color) 0 calc(var(--knob-t) * 270deg), transparent 0); }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin="hungry-cyclops-sharp"] .knob-item, #knobs-container[data-skin="hungry-cyclops-sharp"] .knob-item * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } }

/* ── high-sector · Sector Blocks (high-sector-blocks) ── */
#knobs-container[data-skin="high-sector-blocks"] .knob-var-name { font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--k-ink) !important; }
#knobs-container[data-skin="high-sector-blocks"] .knob-value-label { font-weight: 700; box-shadow: 2px 2px 0 var(--k-ink); background: var(--k-surface) !important; color: var(--k-ink) !important; border: 2px solid var(--k-ink) !important; border-radius: 0px !important; }
#knobs-container[data-skin="high-sector-blocks"] .knob-item.active .knob-value-label { background: var(--k-ink) !important; color: var(--k-surface) !important; border-color: var(--k-ink) !important; }
#knobs-container[data-skin="high-sector-blocks"] .knob-item:focus-visible { outline: 4px solid var(--k-ink); outline-offset: 4px; }
#knobs-container[data-skin="high-sector-blocks"] .knob-dial { background: var(--k-surface); border: 2px solid var(--k-ink); box-shadow: none; border-radius: 50%; transition: transform 0.1s, border-color 0.1s; }
#knobs-container[data-skin="high-sector-blocks"] .knob-item:hover .knob-dial { border-color: var(--k-ink-2); }
#knobs-container[data-skin="high-sector-blocks"] .knob-item:active .knob-dial { transform: scale(0.96); border-color: var(--knob-color); }
#knobs-container[data-skin="high-sector-blocks"] .knob-indicator { background: var(--knob-color); border-radius: 0px; width: 10cqw; height: 22cqh; top: 14cqh; transform-origin: 50% 36cqh; box-shadow: 0 0 0 1px var(--k-ink); }
#knobs-container[data-skin="high-sector-blocks"] .knob-item.active .knob-indicator { width: 20cqw; }
#knobs-container[data-skin="high-sector-blocks"] .knob-ring { mask-image: var(--hs-ring-mask), conic-gradient(from -135deg, #000 0 270deg, transparent 0); mask-composite: source-in; opacity: 1 !important; box-shadow: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; }
#knobs-container[data-skin="high-sector-blocks"] .knob-item.midi-flash .knob-dial { background: var(--knob-color) !important; }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin="high-sector-blocks"] .knob-item, #knobs-container[data-skin="high-sector-blocks"] .knob-item * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } }
#knobs-container[data-skin="high-sector-blocks"] .knob-item { --hs-ring-mask: radial-gradient(farthest-side, transparent 65%, #000 68%); }
#knobs-container[data-skin="high-sector-blocks"] .knob-ring { background: repeating-conic-gradient(from -135deg, var(--k-line) 0 calc(270deg / var(--knob-n) - 3deg), transparent 0 calc(270deg / var(--knob-n))); }
#knobs-container[data-skin="high-sector-blocks"] .knob-ring::after { content: ""; position: absolute; inset: 0px; background: repeating-conic-gradient(from -135deg, var(--k-ink) 0 calc(270deg / var(--knob-n) - 3deg), transparent 0 calc(270deg / var(--knob-n))); mask: conic-gradient(from -135deg, #000 0 calc(var(--knob-t) * 270deg), transparent 0); }
#knobs-container[data-skin="high-sector-blocks"] .knob-item.active .knob-ring::after { background: repeating-conic-gradient(from -135deg, var(--knob-color) 0 calc(270deg / var(--knob-n) - 3deg), transparent 0 calc(270deg / var(--knob-n))); }

/* ── arcade-jawbreaker · Jelly Glow (arcade-jawbreaker-jelly-glow) ── */
#knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-value-label, #knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-var-name { color: var(--k-ink); background: var(--k-surface-2); border: 1px solid var(--k-line); }
#knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-item.active .knob-value-label { background: var(--k-ink); color: var(--k-surface); border-color: var(--k-ink); }
#knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-ring { inset: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; opacity: 1; box-shadow: none; background: conic-gradient(from -135deg, var(--knob-color) 0 calc(var(--knob-t) * 270deg), color-mix(in srgb, var(--k-line) 30%, transparent) calc(var(--knob-t) * 270deg) 270deg, transparent 270deg); mask: radial-gradient(farthest-side, transparent 65%, rgb(0, 0, 0) 68%); }
#knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-dial { background: color-mix(in srgb, var(--k-surface) 40%, transparent); box-shadow: inset 0 0 10px color-mix(in srgb, var(--knob-color) 30%, transparent); border: 2px solid color-mix(in srgb, var(--k-line) 50%, transparent); }
#knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-item.active .knob-dial { background: color-mix(in srgb, var(--knob-color) 20%, var(--k-surface)); box-shadow: inset 0 0 16px var(--knob-color); border-color: var(--knob-color); }
#knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-item:hover .knob-dial { border-color: var(--k-ink); }
#knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-item:active .knob-dial { transform: scale(0.96); box-shadow: inset 0 0 20px var(--knob-color); }
#knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-item.midi-flash .knob-dial { filter: brightness(1.5); }
#knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-indicator { width: 14cqh; height: 14cqh; border-radius: 50%; top: 6cqh; left: 50%; transform-origin: 50% 44cqh; background: var(--k-surface); box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 4px inset; }
#knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-item.active .knob-indicator { background: var(--k-surface-2); border: 2px solid var(--knob-color); }
#knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-item:focus-visible { outline: 3px solid var(--k-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-item, #knobs-container[data-skin="arcade-jawbreaker-jelly-glow"] .knob-item * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } }

/* ── Champlevé Enamel · Carved Void (enamel-spill-carved) ── */
#knobs-container[data-skin="enamel-spill-carved"] .knob-var-name { color: var(--k-ink); }
#knobs-container[data-skin="enamel-spill-carved"] .knob-value-label { color: var(--k-ink); background: var(--k-surface); border-color: var(--k-line); transition: 0.2s; }
#knobs-container[data-skin="enamel-spill-carved"] .knob-dial { background: var(--k-surface-2); box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px inset, rgba(0, 0, 0, 0.2) 0px 2px 4px; }
#knobs-container[data-skin="enamel-spill-carved"] .knob-item:focus-visible { outline: 3px solid var(--k-ink); outline-offset: 3px; }
#knobs-container[data-skin="enamel-spill-carved"] .knob-indicator { box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 4px inset, rgba(255, 255, 255, 0.1) 0px 1px 0px; border: 1px solid var(--k-line); width: 12cqh; height: 12cqh; top: 13cqh; transform-origin: 50% 37cqh; background: var(--k-surface) !important; }
#knobs-container[data-skin="enamel-spill-carved"] .knob-item:hover .knob-dial { background: color-mix(in srgb, var(--k-surface-2) 80%, var(--k-ink)); }
#knobs-container[data-skin="enamel-spill-carved"] .knob-item:active .knob-dial { box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 6px inset; }
#knobs-container[data-skin="enamel-spill-carved"] .knob-item.midi-flash .knob-ring { opacity: 0.6; }
#knobs-container[data-skin="enamel-spill-carved"] .knob-ring { inset: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; opacity: 1; box-shadow: none; background: radial-gradient(farthest-side, transparent 65%, rgba(0,0,0,0.4) 67%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0.5) 98%, transparent 100%),
    conic-gradient(from -135deg, color-mix(in srgb, var(--knob-color) 70%, black) 0 calc(var(--knob-t) * 270deg), var(--k-surface-2) 0 270deg, transparent 0); mask: radial-gradient(farthest-side, transparent 65%, rgb(0, 0, 0) 67%, rgb(0, 0, 0) 98%, transparent 100%); }
#knobs-container[data-skin="enamel-spill-carved"] .knob-ring::after { content: ""; position: absolute; inset: 0px; border-radius: 50%; background: repeating-conic-gradient(from -136.5deg, transparent 0 calc(270deg / (var(--knob-n) - 1) - 2deg), color-mix(in srgb, var(--k-surface) 30%, black) 0 calc(270deg / (var(--knob-n) - 1) + 1deg)); mask: conic-gradient(from -135deg, rgb(0, 0, 0) 0deg, rgb(0, 0, 0) 270deg, transparent 0deg); }
#knobs-container[data-skin="enamel-spill-carved"] .knob-item.active .knob-ring { background: radial-gradient(farthest-side, transparent 65%, rgba(0,0,0,0.5) 67%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0.6) 98%, transparent 100%),
    conic-gradient(from -135deg, var(--knob-color) 0 calc(var(--knob-t) * 270deg), var(--k-surface-2) 0 270deg, transparent 0); }
#knobs-container[data-skin="enamel-spill-carved"] .knob-item.active .knob-value-label { border-bottom: 2px solid var(--knob-color); font-weight: bold; }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin="enamel-spill-carved"] .knob-item, #knobs-container[data-skin="enamel-spill-carved"] .knob-item * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } }

/* ── DoubleShot Polymer · Polymer Wedge (polymer-switch-wedge) ── */
#knobs-container[data-skin="polymer-switch-wedge"] .knob-item { --gap: 6deg; --step: calc(270deg / max(1, var(--knob-n) - 1)); --dial-ink: #2e2418; }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-ring { opacity: 1; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: none; background: conic-gradient(from calc(-135deg - (var(--gap)/2)), var(--knob-color) 0 calc(var(--knob-t) * 270deg + var(--gap)/2), color-mix(in srgb, var(--k-ink) 20%, var(--k-surface)) 0 270deg, transparent 0); }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-dial { background: rgb(253, 253, 252); border: 2px solid var(--dial-ink); box-sizing: border-box; transform: translateY(4%); box-shadow: 0 0 0 var(--dial-ink); transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-item:hover .knob-dial { background: color-mix(in srgb, #fdfdfc 90%, var(--knob-color)); }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-item.active .knob-dial { transform: translateY(0px); box-shadow: 0 4% 0 var(--dial-ink); border-color: var(--knob-color); }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-item:active .knob-dial { transform: translateY(4%); box-shadow: 0 0 0 var(--dial-ink); transition-duration: 0.05s; border-color: var(--knob-color); }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-indicator { background: var(--dial-ink); box-sizing: border-box; position: absolute; left: 50%; }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-item.active .knob-indicator { background: var(--knob-color); }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-value-label { background: rgb(253, 253, 252); color: var(--dial-ink); border: 2px solid var(--dial-ink); box-shadow: 0 2px 0 var(--dial-ink); font-weight: 800; font-size: 11px; padding: 4px 10px; }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-item.active .knob-value-label { border-color: var(--knob-color); box-shadow: 0 2px 0 var(--knob-color); }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-var-name { color: var(--k-ink); font-weight: 700; text-transform: uppercase; }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-item:focus-visible { outline: 3px solid var(--knob-color); outline-offset: 3px; }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-item.midi-flash .knob-dial { background: var(--knob-color); border-color: var(--dial-ink); }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-ring { mask-image: ; -webkit-mask-position-x: ; -webkit-mask-position-y: ; mask-size: ; mask-repeat: ; mask-origin: ; mask-clip: ; mask-mode: ; mask-composite: intersect; }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-dial { inset: 12%; border-radius: 50%; }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-indicator { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: 16%; height: 20%; top: 5%; transform-origin: 50% 225%; }
#knobs-container[data-skin="polymer-switch-wedge"] .knob-value-label { border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin="polymer-switch-wedge"] .knob-item, #knobs-container[data-skin="polymer-switch-wedge"] .knob-item * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } }

/* ── dyed-canvas · Cream Linen (dyed-canvas-linen) ── */
#knobs-container[data-skin="dyed-canvas-linen"] .knob-value-label { background: var(--k-surface-2); border: 1px solid var(--k-line); color: var(--k-ink); font-weight: bold; box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 3px; }
#knobs-container[data-skin="dyed-canvas-linen"] .knob-item.active .knob-value-label { background: var(--k-ink); color: var(--k-surface); border-color: var(--knob-color); box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 6px; }
#knobs-container[data-skin="dyed-canvas-linen"] .knob-var-name { color: var(--k-ink-2); }
#knobs-container[data-skin="dyed-canvas-linen"] .knob-item:focus-visible { outline: 3px solid var(--knob-color); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #knobs-container[data-skin="dyed-canvas-linen"] .knob-item, #knobs-container[data-skin="dyed-canvas-linen"] .knob-item * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } }
#knobs-container[data-skin="dyed-canvas-linen"] .knob-dial { background: var(--k-surface-2); box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px, rgba(0, 0, 0, 0.05) -1px -1px 3px inset, rgba(255, 255, 255, 0.8) 1px 1px 3px inset; border: 1px solid var(--k-surface); }
#knobs-container[data-skin="dyed-canvas-linen"] .knob-dial::before { content: ""; position: absolute; inset: 10cqh; border-radius: 50%; background: conic-gradient(from -135deg, var(--knob-color) 0 calc(var(--knob-t) * 270deg), transparent 0); mask: radial-gradient(farthest-side, transparent 82%, rgb(0, 0, 0) 85%); }
#knobs-container[data-skin="dyed-canvas-linen"] .knob-ring { inset: 4px; border-radius: 50%; border: 3px dashed color-mix(in srgb, var(--knob-color) 60%, var(--k-ink-2)); opacity: 0.6; box-sizing: border-box; }
#knobs-container[data-skin="dyed-canvas-linen"] .knob-item.active .knob-ring, #knobs-container[data-skin="dyed-canvas-linen"] .knob-item:hover .knob-ring { opacity: 1; border: 4px dashed var(--knob-color); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px inset; }
#knobs-container[data-skin="dyed-canvas-linen"] .knob-indicator { background: var(--knob-color); box-shadow: rgba(0, 0, 0, 0.4) 1cqh 1cqh 2cqh; width: 8cqh; height: 16cqh; border-radius: 4cqh; top: 10cqh; transform-origin: 50% 40cqh; }
#knobs-container[data-skin="dyed-canvas-linen"] .knob-item:active .knob-dial { background: var(--k-surface); }
#knobs-container[data-skin="dyed-canvas-linen"] .knob-item.midi-flash .knob-indicator { background: var(--k-ink); }