.edge-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}
.edge-rings path { fill: none; stroke-width: 9; stroke-linecap: round; }
.edge-track { stroke: #ffffff33; }
.edge-value { stroke-dasharray: var(--level, 30) 100; }
.haptic-value { stroke: #fff; }
.volume-value { stroke: #b9f3cf; }
.edge-hit {
  position: absolute;
  top: 16%;
  bottom: 16%;
  width: 23%;
  z-index: 5;
  touch-action: none;
}
.edge-hit.left { left: 0; }
.edge-hit.right { right: 0; }
.edge-label {
  position: absolute;
  top: 48%;
  z-index: 4;
  color: #fff;
  font-size: 9px;
  writing-mode: vertical-rl;
  text-shadow: 0 1px 3px #000;
  background: #080c09c7;
  border-radius: 4px;
  padding: 4px 2px;
}
.left-label { left: 9px; }
.right-label { right: 9px; }
.edge-output {
  display: block;
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  padding: 8px 12px;
  border-radius: 6px;
  background: #0a100ddb;
  color: #fff;
  font-size: 16px;
  font-weight: 750;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.edge-output.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1.04); }