@neo-ui-kit/react 1.0.0 → 1.0.2

package/dist/components/media/RotaryKnob/styles.css

@@ -1,319 +1,319 @@
-/* Styles owned by RotaryKnob. */
-/* Exact CSS geometry from premium-knob-interactive-neon(2).html, scoped to Neo UI. */
-.ad-rotary-knob.knob {
-  --size: 13.75rem;
-  --angle: 45.9deg;
-  --rotation: 0deg;
-  position: relative;
-  width: min(var(--size), 100%);
-  max-width: 100%;
-  aspect-ratio: 1;
-  flex: none;
-  isolation: isolate;
-  -webkit-tap-highlight-color: transparent;
-  /* Leans towards the pointer in 3D; settles back when it leaves or is grabbed. */
-  transform: perspective(60rem) rotateX(var(--tilt-x, 0deg))
-    rotateY(var(--tilt-y, 0deg));
-  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-.ad-rotary-knob.knob::before {
-  content: "";
-  position: absolute;
-  inset: 3.8%;
-  border-radius: 50%;
-  pointer-events: none;
-  background: radial-gradient(
-    circle at 50% 50%,
-    transparent 58%,
-    rgb(from var(--ad-primary) r g b / 0.055) 68%,
-    transparent 78%
-  );
-  box-shadow:
-    0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.18),
-    0 0 3.25rem rgb(from var(--ad-primary) r g b / 0.12),
-    0 0 5.375rem rgb(from var(--ad-primary) r g b / 0.06);
-  z-index: -1;
-  animation: ad-knob-breathe 5s ease-in-out infinite;
-}
-/* At rest the halo breathes slowly; grabbing the knob wakes it fully. */
-@keyframes ad-knob-breathe {
-  50% {
-    opacity: 0.6;
-  }
-}
-.ad-rotary-knob.is-dragging.knob::before {
-  animation: none;
-}
-.ad-rotary-knob.knob::after {
-  content: "";
-  position: absolute;
-  inset: 8.6%;
-  border-radius: 50%;
-  pointer-events: none;
-  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.16);
-  box-shadow:
-    inset 0 0 0.9375rem rgb(from var(--ad-primary) r g b / 0.12),
-    0 0 0.75rem rgb(from var(--ad-primary) r g b / 0.1);
-}
-.ad-rotary-knob .knob__surface {
-  display: block;
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  filter: hue-rotate(var(--ad-hue-shift, 0deg))
-    drop-shadow(0 0 0.4375rem rgb(from var(--ad-primary) r g b / 0.18))
-    drop-shadow(0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.1));
-}
-.ad-rotary-knob .knob__control {
-  position: absolute;
-  inset: 5.5%;
-  border-radius: 50%;
-  cursor: grab;
-  outline: none;
-  touch-action: none;
-  user-select: none;
-  -webkit-user-select: none;
-}
-.ad-rotary-knob .knob__control:active,
-.ad-rotary-knob.is-dragging .knob__control {
-  cursor: grabbing;
-}
-.ad-rotary-knob.is-dragging .knob__surface,
-.ad-rotary-knob:hover .knob__surface {
-  filter: hue-rotate(var(--ad-hue-shift, 0deg))
-    drop-shadow(0 0 0.625rem rgb(from var(--ad-primary) r g b / 0.28))
-    drop-shadow(0 0 1.75rem rgb(from var(--ad-primary) r g b / 0.16));
-}
-.ad-rotary-knob .knob__surface {
-  transition:
-    filter 0.4s ease,
-    scale 0.3s cubic-bezier(0.34, 1.56, 0.5, 1);
-}
-/* Depth: the knob stands off the panel and casts a soft shadow; the cap stands off the bezel. */
-.ad-rotary-knob .knob__base {
-  filter: hue-rotate(var(--ad-hue-shift, 0deg))
-    drop-shadow(0 0.9rem 1.1rem #000c)
-    drop-shadow(0 0 0.4375rem rgb(from var(--ad-primary) r g b / 0.18))
-    drop-shadow(0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.1));
-}
-.ad-rotary-knob .knob__rotor-frame {
-  overflow: clip;
-  filter: hue-rotate(var(--ad-hue-shift, 0deg))
-    drop-shadow(0 0.35rem 0.45rem #000b);
-}
-.ad-rotary-knob .knob__rotor {
-  display: block;
-  width: 100%;
-  height: 100%;
-  transform: rotate(var(--rotation));
-  transform-origin: center;
-  will-change: transform;
-}
-/* Grabbed, the cap sinks a touch into the panel. */
-.ad-rotary-knob.is-dragging .knob__rotor,
-.ad-rotary-knob.is-dragging .knob__sheen {
-  scale: 0.975;
-}
-/* Fixed studio lights on the cap: the brushed metal turns, its highlights stay put. */
-.ad-rotary-knob .knob__sheen {
-  position: absolute;
-  inset: 18.7%;
-  border-radius: 50%;
-  pointer-events: none;
-  background:
-    radial-gradient(circle at 34% 26%, #ffffff2e, transparent 42%),
-    conic-gradient(
-      from 0deg,
-      transparent 0deg,
-      #ffffff14 30deg,
-      transparent 70deg,
-      transparent 150deg,
-      rgb(from var(--ad-secondary) r g b / 0.07) 200deg,
-      transparent 240deg,
-      transparent 300deg,
-      #ffffff10 330deg,
-      transparent 360deg
-    );
-  box-shadow:
-    inset 0 0.0625rem 0.0625rem #ffffff2a,
-    inset 0 -0.25rem 0.75rem #0009;
-  mix-blend-mode: screen;
-  transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.5, 1);
-}
-/* The value sits in the scale's dead zone at the bottom, like a hardware display;
-   click it to type a number. */
-.ad-rotary-knob .knob__value,
-.ad-rotary-knob .knob__input {
-  position: absolute;
-  left: 50%;
-  bottom: 2.5%;
-  translate: -50% 0;
-  min-width: 3.4em;
-  padding: 0.12em 0.45em;
-  border-radius: 0.4em;
-  color: var(--ad-neutral-200);
-  font: 600 max(0.625rem, calc(var(--size) * 0.068)) / 1.2
-    var(--ad-font-family-mono, monospace);
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-  text-shadow:
-    0 0 0.3125rem var(--ad-neutral-200),
-    0 0 0.875rem var(--ad-primary);
-  background: linear-gradient(rgb(from var(--ad-neutral-900) r g b / 0.9), rgb(from var(--ad-neutral-850) r g b / 0.9));
-  box-shadow:
-    inset 0 0 0 0.0625rem rgb(from var(--ad-primary) r g b / 0.24),
-    inset 0 0.0625rem 0 #ffffff14,
-    0 0.25rem 0.75rem #0009;
-  transition:
-    box-shadow 0.25s,
-    color 0.25s;
-}
-.ad-rotary-knob .knob__value[data-editable] {
-  cursor: text;
-}
-.ad-rotary-knob .knob__value[data-editable]:hover {
-  box-shadow:
-    inset 0 0 0 0.0625rem rgb(from var(--ad-secondary) r g b / 0.67),
-    inset 0 0.0625rem 0 #ffffff1f,
-    0 0 0.9rem rgb(from var(--ad-primary) r g b / 0.33);
-}
-.ad-rotary-knob .knob__value[data-editing] {
-  visibility: hidden;
-}
-.ad-rotary-knob .knob__input {
-  width: 3.4em;
-  border: 0;
-  outline: none;
-  box-shadow:
-    inset 0 0 0 0.0625rem var(--ad-secondary),
-    0 0 1rem rgb(from var(--ad-primary) r g b / 0.47);
-  caret-color: #fff;
-}
-.ad-rotary-knob[data-ad-size="xs"] .knob__value,
-.ad-rotary-knob[data-ad-size="xs"] .knob__input {
-  bottom: -0.4em;
-}
-.ad-rotary-knob .knob__control:focus-visible::after {
-  content: "";
-  position: absolute;
-  inset: -2%;
-  border: 0.125rem solid var(--ad-secondary);
-  border-radius: inherit;
-  box-shadow: 0 0 0.75rem rgb(from var(--ad-primary) r g b / 0.27);
-  pointer-events: none;
-  filter: drop-shadow(0 0 0.4375rem rgb(from var(--ad-primary) r g b / 0.18))
-    drop-shadow(0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.1));
-}
-.ad-rotary-knob .knob__indicator {
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  pointer-events: none;
-}
-.ad-rotary-knob .knob__slot {
-  position: absolute;
-  left: 48.4%;
-  top: 16.65%;
-  width: 3.2%;
-  height: 11.25%;
-  /* Orbit the small marker around the control's centre; rotating its full-size
-     invisible wrapper would enlarge the container's scrollable bounds. */
-  transform: rotate(var(--angle));
-  transform-origin: 50% calc(100% * (50 - 16.65) / 11.25);
-  will-change: transform;
-  border-radius: 62.4375rem;
-  background: linear-gradient(
-    90deg,
-    var(--ad-neutral-950) 0%,
-    var(--ad-primary-900) 25%,
-    var(--ad-primary-800) 66%,
-    var(--ad-primary-900) 100%
-  );
-  box-shadow:
-    0 0 0 0.0625rem var(--ad-primary-900),
-    0 0.0625rem 0.0625rem 0.0625rem rgb(from var(--ad-secondary) r g b / 0.5),
-    inset 0.0625rem 0.1875rem 0.3125rem #000,
-    0 0 0.625rem 0.1875rem rgb(from var(--ad-primary) r g b / 0.38),
-    0 0 1.5rem 0.375rem rgb(from var(--ad-primary) r g b / 0.16);
-}
-.ad-rotary-knob .knob__slot::before {
-  content: "";
-  position: absolute;
-  inset: 9% 20%;
-  border-radius: inherit;
-  background: linear-gradient(
-    90deg,
-    var(--ad-primary) 0%,
-    var(--ad-secondary) 17%,
-    var(--ad-neutral-200) 47%,
-    #fff 62%,
-    var(--ad-secondary) 85%,
-    var(--ad-primary) 100%
-  );
-  box-shadow:
-    0 0 0.125rem 0.0625rem var(--ad-neutral-200),
-    0 0 0.3125rem 0.125rem var(--ad-primary),
-    0 0 0.875rem 0.25rem rgb(from var(--ad-primary) r g b / 0.82),
-    0 0 1.875rem 0.5rem rgb(from var(--ad-primary) r g b / 0.38),
-    0 0 3.375rem 0.75rem rgb(from var(--ad-primary) r g b / 0.16);
-}
-.ad-rotary-knob .knob__slot::after {
-  content: "";
-  position: absolute;
-  inset: -7% -40%;
-  border-radius: 50%;
-  background: radial-gradient(ellipse, rgb(from var(--ad-primary) r g b / 0.08) 20%, transparent 72%);
-}
-.ad-rotary-knob[data-disabled="true"] {
-  opacity: 0.45;
-  filter: saturate(0.55);
-  pointer-events: none;
-}
-.ad-rotary-knob[data-readonly="true"] .knob__control {
-  cursor: default;
-}
-.ad-sr-only {
-  position: absolute !important;
-  width: 0.0625rem !important;
-  height: 0.0625rem !important;
-  padding: 0 !important;
-  margin: -0.0625rem !important;
-  overflow: hidden !important;
-  clip-path: inset(50%) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
-@media (prefers-reduced-motion: reduce) {
-  .ad-rotary-knob .knob__indicator,
-  .ad-rotary-knob .knob__rotor {
-    will-change: auto;
-  }
-}
-/* Hover and grab brighten the glow but keep the depth shadows. */
-.ad-rotary-knob:is(:hover, .is-dragging) .knob__base {
-  filter: hue-rotate(var(--ad-hue-shift, 0deg))
-    drop-shadow(0 0.9rem 1.1rem #000c)
-    drop-shadow(0 0 0.625rem rgb(from var(--ad-primary) r g b / 0.28))
-    drop-shadow(0 0 1.75rem rgb(from var(--ad-primary) r g b / 0.16));
-}
-.ad-rotary-knob:is(:hover, .is-dragging) .knob__rotor {
-  filter: hue-rotate(var(--ad-hue-shift, 0deg))
-    drop-shadow(0 0.35rem 0.45rem #000b);
-}
-
-/* A printed label under the knob; the knob keeps room for it below. */
-.ad-rotary-knob.knob[data-labelled] {
-  margin-block-end: 1.6em;
-}
-.ad-rotary-knob .knob__label {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  translate: -50% 0.4em;
-  color: var(--ad-muted);
-  font-size: var(--ad-font-size-caption);
-  white-space: nowrap;
-  pointer-events: none;
-}
+/* Styles owned by RotaryKnob. */
+/* Exact CSS geometry from premium-knob-interactive-neon(2).html, scoped to Neo UI. */
+.ad-rotary-knob.knob {
+  --size: 13.75rem;
+  --angle: 45.9deg;
+  --rotation: 0deg;
+  position: relative;
+  width: min(var(--size), 100%);
+  max-width: 100%;
+  aspect-ratio: 1;
+  flex: none;
+  isolation: isolate;
+  -webkit-tap-highlight-color: transparent;
+  /* Leans towards the pointer in 3D; settles back when it leaves or is grabbed. */
+  transform: perspective(60rem) rotateX(var(--tilt-x, 0deg))
+    rotateY(var(--tilt-y, 0deg));
+  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ad-rotary-knob.knob::before {
+  content: "";
+  position: absolute;
+  inset: 3.8%;
+  border-radius: 50%;
+  pointer-events: none;
+  background: radial-gradient(
+    circle at 50% 50%,
+    transparent 58%,
+    rgb(from var(--ad-primary) r g b / 0.055) 68%,
+    transparent 78%
+  );
+  box-shadow:
+    0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.18),
+    0 0 3.25rem rgb(from var(--ad-primary) r g b / 0.12),
+    0 0 5.375rem rgb(from var(--ad-primary) r g b / 0.06);
+  z-index: -1;
+  animation: ad-knob-breathe 5s ease-in-out infinite;
+}
+/* At rest the halo breathes slowly; grabbing the knob wakes it fully. */
+@keyframes ad-knob-breathe {
+  50% {
+    opacity: 0.6;
+  }
+}
+.ad-rotary-knob.is-dragging.knob::before {
+  animation: none;
+}
+.ad-rotary-knob.knob::after {
+  content: "";
+  position: absolute;
+  inset: 8.6%;
+  border-radius: 50%;
+  pointer-events: none;
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.16);
+  box-shadow:
+    inset 0 0 0.9375rem rgb(from var(--ad-primary) r g b / 0.12),
+    0 0 0.75rem rgb(from var(--ad-primary) r g b / 0.1);
+}
+.ad-rotary-knob .knob__surface {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0 0.4375rem rgb(from var(--ad-primary) r g b / 0.18))
+    drop-shadow(0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.1));
+}
+.ad-rotary-knob .knob__control {
+  position: absolute;
+  inset: 5.5%;
+  border-radius: 50%;
+  cursor: grab;
+  outline: none;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.ad-rotary-knob .knob__control:active,
+.ad-rotary-knob.is-dragging .knob__control {
+  cursor: grabbing;
+}
+.ad-rotary-knob.is-dragging .knob__surface,
+.ad-rotary-knob:hover .knob__surface {
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0 0.625rem rgb(from var(--ad-primary) r g b / 0.28))
+    drop-shadow(0 0 1.75rem rgb(from var(--ad-primary) r g b / 0.16));
+}
+.ad-rotary-knob .knob__surface {
+  transition:
+    filter 0.4s ease,
+    scale 0.3s cubic-bezier(0.34, 1.56, 0.5, 1);
+}
+/* Depth: the knob stands off the panel and casts a soft shadow; the cap stands off the bezel. */
+.ad-rotary-knob .knob__base {
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0.9rem 1.1rem #000c)
+    drop-shadow(0 0 0.4375rem rgb(from var(--ad-primary) r g b / 0.18))
+    drop-shadow(0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.1));
+}
+.ad-rotary-knob .knob__rotor-frame {
+  overflow: clip;
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0.35rem 0.45rem #000b);
+}
+.ad-rotary-knob .knob__rotor {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transform: rotate(var(--rotation));
+  transform-origin: center;
+  will-change: transform;
+}
+/* Grabbed, the cap sinks a touch into the panel. */
+.ad-rotary-knob.is-dragging .knob__rotor,
+.ad-rotary-knob.is-dragging .knob__sheen {
+  scale: 0.975;
+}
+/* Fixed studio lights on the cap: the brushed metal turns, its highlights stay put. */
+.ad-rotary-knob .knob__sheen {
+  position: absolute;
+  inset: 18.7%;
+  border-radius: 50%;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 34% 26%, #ffffff2e, transparent 42%),
+    conic-gradient(
+      from 0deg,
+      transparent 0deg,
+      #ffffff14 30deg,
+      transparent 70deg,
+      transparent 150deg,
+      rgb(from var(--ad-secondary) r g b / 0.07) 200deg,
+      transparent 240deg,
+      transparent 300deg,
+      #ffffff10 330deg,
+      transparent 360deg
+    );
+  box-shadow:
+    inset 0 0.0625rem 0.0625rem #ffffff2a,
+    inset 0 -0.25rem 0.75rem #0009;
+  mix-blend-mode: screen;
+  transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.5, 1);
+}
+/* The value sits in the scale's dead zone at the bottom, like a hardware display;
+   click it to type a number. */
+.ad-rotary-knob .knob__value,
+.ad-rotary-knob .knob__input {
+  position: absolute;
+  left: 50%;
+  bottom: 2.5%;
+  translate: -50% 0;
+  min-width: 3.4em;
+  padding: 0.12em 0.45em;
+  border-radius: 0.4em;
+  color: var(--ad-neutral-200);
+  font: 600 max(0.625rem, calc(var(--size) * 0.068)) / 1.2
+    var(--ad-font-family-mono, monospace);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  text-shadow:
+    0 0 0.3125rem var(--ad-neutral-200),
+    0 0 0.875rem var(--ad-primary);
+  background: linear-gradient(rgb(from var(--ad-neutral-900) r g b / 0.9), rgb(from var(--ad-neutral-850) r g b / 0.9));
+  box-shadow:
+    inset 0 0 0 0.0625rem rgb(from var(--ad-primary) r g b / 0.24),
+    inset 0 0.0625rem 0 #ffffff14,
+    0 0.25rem 0.75rem #0009;
+  transition:
+    box-shadow 0.25s,
+    color 0.25s;
+}
+.ad-rotary-knob .knob__value[data-editable] {
+  cursor: text;
+}
+.ad-rotary-knob .knob__value[data-editable]:hover {
+  box-shadow:
+    inset 0 0 0 0.0625rem rgb(from var(--ad-secondary) r g b / 0.67),
+    inset 0 0.0625rem 0 #ffffff1f,
+    0 0 0.9rem rgb(from var(--ad-primary) r g b / 0.33);
+}
+.ad-rotary-knob .knob__value[data-editing] {
+  visibility: hidden;
+}
+.ad-rotary-knob .knob__input {
+  width: 3.4em;
+  border: 0;
+  outline: none;
+  box-shadow:
+    inset 0 0 0 0.0625rem var(--ad-secondary),
+    0 0 1rem rgb(from var(--ad-primary) r g b / 0.47);
+  caret-color: #fff;
+}
+.ad-rotary-knob[data-ad-size="xs"] .knob__value,
+.ad-rotary-knob[data-ad-size="xs"] .knob__input {
+  bottom: -0.4em;
+}
+.ad-rotary-knob .knob__control:focus-visible::after {
+  content: "";
+  position: absolute;
+  inset: -2%;
+  border: 0.125rem solid var(--ad-secondary);
+  border-radius: inherit;
+  box-shadow: 0 0 0.75rem rgb(from var(--ad-primary) r g b / 0.27);
+  pointer-events: none;
+  filter: drop-shadow(0 0 0.4375rem rgb(from var(--ad-primary) r g b / 0.18))
+    drop-shadow(0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.1));
+}
+.ad-rotary-knob .knob__indicator {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  pointer-events: none;
+}
+.ad-rotary-knob .knob__slot {
+  position: absolute;
+  left: 48.4%;
+  top: 16.65%;
+  width: 3.2%;
+  height: 11.25%;
+  /* Orbit the small marker around the control's centre; rotating its full-size
+     invisible wrapper would enlarge the container's scrollable bounds. */
+  transform: rotate(var(--angle));
+  transform-origin: 50% calc(100% * (50 - 16.65) / 11.25);
+  will-change: transform;
+  border-radius: 62.4375rem;
+  background: linear-gradient(
+    90deg,
+    var(--ad-neutral-950) 0%,
+    var(--ad-primary-900) 25%,
+    var(--ad-primary-800) 66%,
+    var(--ad-primary-900) 100%
+  );
+  box-shadow:
+    0 0 0 0.0625rem var(--ad-primary-900),
+    0 0.0625rem 0.0625rem 0.0625rem rgb(from var(--ad-secondary) r g b / 0.5),
+    inset 0.0625rem 0.1875rem 0.3125rem #000,
+    0 0 0.625rem 0.1875rem rgb(from var(--ad-primary) r g b / 0.38),
+    0 0 1.5rem 0.375rem rgb(from var(--ad-primary) r g b / 0.16);
+}
+.ad-rotary-knob .knob__slot::before {
+  content: "";
+  position: absolute;
+  inset: 9% 20%;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    var(--ad-primary) 0%,
+    var(--ad-secondary) 17%,
+    var(--ad-neutral-200) 47%,
+    #fff 62%,
+    var(--ad-secondary) 85%,
+    var(--ad-primary) 100%
+  );
+  box-shadow:
+    0 0 0.125rem 0.0625rem var(--ad-neutral-200),
+    0 0 0.3125rem 0.125rem var(--ad-primary),
+    0 0 0.875rem 0.25rem rgb(from var(--ad-primary) r g b / 0.82),
+    0 0 1.875rem 0.5rem rgb(from var(--ad-primary) r g b / 0.38),
+    0 0 3.375rem 0.75rem rgb(from var(--ad-primary) r g b / 0.16);
+}
+.ad-rotary-knob .knob__slot::after {
+  content: "";
+  position: absolute;
+  inset: -7% -40%;
+  border-radius: 50%;
+  background: radial-gradient(ellipse, rgb(from var(--ad-primary) r g b / 0.08) 20%, transparent 72%);
+}
+.ad-rotary-knob[data-disabled="true"] {
+  opacity: 0.45;
+  filter: saturate(0.55);
+  pointer-events: none;
+}
+.ad-rotary-knob[data-readonly="true"] .knob__control {
+  cursor: default;
+}
+.ad-sr-only {
+  position: absolute !important;
+  width: 0.0625rem !important;
+  height: 0.0625rem !important;
+  padding: 0 !important;
+  margin: -0.0625rem !important;
+  overflow: hidden !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ad-rotary-knob .knob__indicator,
+  .ad-rotary-knob .knob__rotor {
+    will-change: auto;
+  }
+}
+/* Hover and grab brighten the glow but keep the depth shadows. */
+.ad-rotary-knob:is(:hover, .is-dragging) .knob__base {
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0.9rem 1.1rem #000c)
+    drop-shadow(0 0 0.625rem rgb(from var(--ad-primary) r g b / 0.28))
+    drop-shadow(0 0 1.75rem rgb(from var(--ad-primary) r g b / 0.16));
+}
+.ad-rotary-knob:is(:hover, .is-dragging) .knob__rotor {
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0.35rem 0.45rem #000b);
+}
+
+/* A printed label under the knob; the knob keeps room for it below. */
+.ad-rotary-knob.knob[data-labelled] {
+  margin-block-end: 1.6em;
+}
+.ad-rotary-knob .knob__label {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  translate: -50% 0.4em;
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-caption);
+  white-space: nowrap;
+  pointer-events: none;
+}