.instrument-knob {
  position: relative;
  width: var(--instrument-knob-size, 96px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  cursor: grab;
  user-select: none;
  touch-action: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.instrument-knob:active { cursor: grabbing; }
.instrument-knob:focus-visible {
  outline: 3px solid var(--teal, #257d83);
  outline-offset: 3px;
}
.instrument-knob > .instrument-knob__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.instrument-knob > .instrument-knob__rotor {
  inset: 13%;
  width: 74%;
  height: 74%;
  transform-origin: 50% 50%;
}
.instrument-knob > .instrument-knob__status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f9f8f6;
  font-size: 20px;
  font-weight: 600;
  pointer-events: none;
}
.instrument-knob[aria-disabled="true"] { cursor: default; opacity: .45; }
.instrument-knob[data-state="invalid"],
.instrument-knob[data-state="unavailable"] { opacity: .55; }