/* ------------------------------------------------------------
   8 · KNOB (synth) — flat by default
   ------------------------------------------------------------ */
.dcs-knob {
  position: relative;
  width: var(--knob-size, 56px);
  height: var(--knob-size, 56px);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: ns-resize;
  user-select: none;
}
.dcs-knob__ring {
  position: absolute; inset: 0;
  pointer-events: none;
}
.dcs-knob__cap {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: var(--dcs-surface-2);
  border: 1px solid var(--dcs-line);
}
.dcs-knob__indicator {
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 38%;
  background: var(--dcs-accent);
  border-radius: 1px;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(var(--angle, 0deg));
}
.dcs-knob__label {
  position: absolute; bottom: -16px; left: 0; right: 0;
  text-align: center;
  font-size: var(--dcs-fs-xs);
  font-family: var(--dcs-font-mono);
  color: var(--dcs-text-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dcs-knob__value {
  position: absolute; top: -14px; left: 0; right: 0;
  text-align: center;
  font-size: var(--dcs-fs-xs);
  font-family: var(--dcs-font-mono);
  color: var(--dcs-accent);
}