.sandbox-ui-knob {
  --sandbox-knob-bg-resolved: var(--sandbox-knob-bg, color-mix(in srgb, var(--sandbox-ruler-bg) 72%, var(--sandbox-surface)));
  --sandbox-knob-border-resolved: var(--sandbox-knob-border, color-mix(in srgb, var(--sandbox-border) 86%, transparent));
  --sandbox-knob-fg-resolved: var(--sandbox-knob-fg, var(--sandbox-text));
  --sandbox-knob-accent-resolved: var(--sandbox-knob-accent, var(--sandbox-accent));
  --sandbox-knob-sweep: 0deg;
  position: relative;
  inline-size: var(--sandbox-knob-size, 34px);
  block-size: var(--sandbox-knob-size, 34px);
  min-inline-size: var(--sandbox-knob-size, 34px);
  min-block-size: var(--sandbox-knob-size, 34px);
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--sandbox-knob-border-resolved);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sandbox-knob-accent-resolved) 28%, transparent) 0 5%, transparent 6%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sandbox-knob-bg-resolved) 88%, #fff 12%) 0 53%, transparent 54%),
    conic-gradient(from -135deg, color-mix(in srgb, var(--sandbox-knob-accent-resolved) 78%, transparent) 0deg var(--sandbox-knob-sweep), color-mix(in srgb, var(--sandbox-knob-fg-resolved) 16%, transparent) var(--sandbox-knob-sweep) 270deg, transparent 270deg 360deg),
    var(--sandbox-knob-bg-resolved);
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--sandbox-knob-bg-resolved) 82%, transparent),
    inset 0 -1px 6px rgba(0, 0, 0, 0.16),
    0 3px 8px rgba(15, 23, 42, 0.14);
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--sandbox-knob-size, 34px);
  isolation: isolate;
  overflow: visible;
  line-height: 0;
  touch-action: none;
  user-select: none;
  cursor: ns-resize;
}

.sandbox-ui-knob::before {
  content: "";
  position: absolute;
  inset: calc(var(--sandbox-knob-size, 34px) * -0.13);
  border-radius: inherit;
  background:
    repeating-conic-gradient(
      from -135deg,
      color-mix(in srgb, var(--sandbox-knob-fg-resolved) 34%, transparent) 0deg 1.5deg,
      transparent 1.5deg 15deg
    );
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 59% 64%, transparent 65%);
  mask: radial-gradient(circle, transparent 0 58%, #000 59% 64%, transparent 65%);
  pointer-events: none;
  opacity: 0.56;
  z-index: -1;
}

.sandbox-ui-knob::after {
  content: "";
  position: absolute;
  inset: 31%;
  border-radius: inherit;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--sandbox-knob-accent-resolved) 58%, #fff 16%) 0 28%, transparent 29%),
    color-mix(in srgb, var(--sandbox-knob-bg-resolved) 78%, #000 22%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sandbox-knob-border-resolved) 82%, transparent),
    0 0 12px color-mix(in srgb, var(--sandbox-knob-accent-resolved) 24%, transparent);
  pointer-events: none;
  z-index: 1;
}

.sandbox-ui-knob:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--sandbox-knob-bg-resolved) 82%, transparent),
    inset 0 -1px 6px rgba(0, 0, 0, 0.16),
    0 0 0 1px color-mix(in srgb, var(--sandbox-knob-accent-resolved) 58%, transparent),
    0 0 0 4px color-mix(in srgb, var(--sandbox-knob-accent-resolved) 24%, transparent),
    0 3px 8px rgba(15, 23, 42, 0.14);
}

.sandbox-ui-knob.is-dragging {
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--sandbox-knob-bg-resolved) 82%, transparent),
    inset 0 -1px 6px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px color-mix(in srgb, var(--sandbox-knob-accent-resolved) 46%, transparent),
    0 0 0 3px color-mix(in srgb, var(--sandbox-knob-accent-resolved) 20%, transparent),
    0 6px 14px rgba(15, 23, 42, 0.22);
}

.sandbox-ui-knob__indicator {
  position: absolute;
  left: 50%;
  top: calc(var(--sandbox-knob-size, 34px) * 0.13);
  width: max(2px, calc(var(--sandbox-knob-size, 34px) * 0.07));
  height: calc(var(--sandbox-knob-size, 34px) * 0.34);
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center calc(var(--sandbox-knob-size, 34px) * 0.42);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sandbox-knob-accent-resolved) 88%, #fff 12%), var(--sandbox-knob-accent-resolved));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sandbox-knob-accent-resolved) 56%, transparent),
    0 0 8px color-mix(in srgb, var(--sandbox-knob-accent-resolved) 42%, transparent);
  z-index: 2;
}

.sandbox-ui-knob__value {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sandbox-knob-size, 34px) * -0.42);
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--sandbox-muted);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

.sandbox-ui-range-knob {
  --sandbox-knob-size: 2.65rem;
  --sandbox-knob-bg: color-mix(in srgb, var(--bs-body-bg, var(--sandbox-surface)) 76%, var(--bs-primary, var(--sandbox-accent)) 7%);
  --sandbox-knob-border: color-mix(in srgb, var(--bs-border-color, var(--sandbox-border)) 72%, var(--bs-primary, var(--sandbox-accent)) 22%);
  --sandbox-knob-fg: var(--bs-emphasis-color, var(--sandbox-text));
  --sandbox-knob-accent: var(--bs-info, var(--sandbox-accent));
  display: inline-grid;
  grid-template-columns: var(--sandbox-knob-size) minmax(3.35rem, auto);
  align-items: center;
  gap: 0.6rem;
  min-width: min(100%, 8rem);
}

.sandbox-ui-range-knob__host {
  min-width: var(--sandbox-knob-size);
}

.sandbox-ui-range-knob__value {
  width: fit-content;
  min-width: 3.35rem;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bs-body-bg, var(--sandbox-surface)) 72%, var(--bs-info, var(--sandbox-accent)) 10%);
  color: var(--bs-emphasis-color, var(--sandbox-text));
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}