@scope (slider-ui) {
  :where(:scope) {
    /* ═══════════════════════════════════════════════════════════════
       SLIDER GEOMETRY — Mathematical foundation
       ═══════════════════════════════════════════════════════════════

       Variables
         W    = track width  (100% of the track element)
         t    = thumb width  (full outer width including internal padding)
         h    = track height (var(--slider-track-height, var(--slider-track-height-default)))
         pad  = internal padding on the thumb (var(--slider-thumb-padding, var(--slider-thumb-padding-default)))
         p    = progress     (0.0 → 1.0, written by JS as --slider-pct)

       The thumb consists of two layers:
         • Container: the geometry element that the fill aligns to.
                      Sized to t × h. Provides the full-height grab area.
         • Visual:    the white pill rendered inside the container via
                      ::before. Sized to (t−2·pad) × (h−2·pad), centered
                      by inset = pad on all sides.

       ── Progressive fill ──
       The blue fill starts at the thumb's full outer width and
       grows incrementally:

         fill_width(p) = t + p · (W − t)          (1)

       At p = 0  →  fill = t   (entire thumb container is blue)
       At p = 1  →  fill = W   (blue spans the full track)

       The fill is anchored at the left track edge (left: 0), so:

         fill_right(p) = t + p · (W − t)          (2)

       ── Thumb travel ──
       The thumb container's center moves across the travel zone:

         travel = W − t                         (3)

         thumb_center(p) = t/2 + p · (W − t)     (4)

       At p = 0  →  center at t/2  (container left flush, visual inset by pad)
       At p = 1  →  center at W−t/2 (container right flush, visual inset by pad)

       In CSS (percentages relative to W):

         left = calc(t/2 + p · (W − t))
              = calc(var(--slider-thumb-width, var(--slider-thumb-width-default)) / 2
                     + var(--slider-pct, var(--slider-pct-default)) * (100% - var(--slider-thumb-width, var(--slider-thumb-width-default))))

       The element is shifted back by 50% via transform so its
       geometric center lands on the computed point.

       ── Thumb visual inset ──
       The white pill is rendered by ::before with:
         inset: pad  (applied on all four sides)

       This means the visual pill is inset from the container edge
       by pad pixels, giving breathing room between the white surface
       and the track boundary at both extremes.
       ═══════════════════════════════════════════════════════════════ */

    /* ── Layout ── */
    --slider-gap-default:               var(--a-space-1);
    --slider-readout-gap-default:       var(--a-space-0-5);
    --slider-radius-default:            var(--a-radius-full);

    /* Track height scales with the universal [size] attribute
       via --a-toggle-size: 16 sm / 20 md / 24 lg at density=1.
       Override --slider-track-height directly for custom sizes. */
    --slider-track-height-default:      var(--a-toggle-size);

    /* Thumb padding: internal breathing room on all sides.
       The visual pill sits pad px away from the container edge. */
    --slider-thumb-padding-default:     2px;

    /* Visual thumb height: track height minus top and bottom padding. */
    --slider-thumb-visual-h-default:    calc(var(--slider-track-height, var(--slider-track-height-default)) - 2 * var(--slider-thumb-padding, var(--slider-thumb-padding-default)));

    /* Visual thumb width: 2×1 pill ratio. */
    --slider-thumb-visual-w-default:    calc(var(--slider-thumb-visual-h, var(--slider-thumb-visual-h-default)) * 2);

    /* Container / geometry thumb width: visual width plus left and
       right padding.  This is the width used in the travel equation. */
    --slider-thumb-width-default:       calc(var(--slider-thumb-visual-w, var(--slider-thumb-visual-w-default)) + 2 * var(--slider-thumb-padding, var(--slider-thumb-padding-default)));

    /* Progress fraction (0.0 → 1.0) written by JS. */
    --slider-pct-default:               0;

    /* ── Colors ──
       Track: dim recessed surface  |  Fill: primary  |  Thumb: white chrome */
    --slider-track-bg-default:          var(--a-bg-muted);
    --slider-fill-bg-default:           var(--a-primary-bg);
    --slider-thumb-bg-default:          var(--a-chrome-light);
    --slider-fill-bg-disabled-default:  var(--a-border-subtle);
    --slider-thumb-bg-disabled-default: var(--a-fg-muted);

    /* ── Typography ── */
    --slider-font-size-default:         var(--a-ui-size);
    --slider-value-weight-default:      var(--a-weight-bold);

    /* ── Transition ── */
    --slider-duration-default:          var(--a-duration-fast);
    --slider-easing-default:            var(--a-easing);

    /* ── Focus ── */
    --slider-focus-ring-default:        var(--a-focus-ring);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--slider-gap, var(--slider-gap-default));
  }

  :scope[data-direction="row"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  /* Header row: [label]  [value suffix] */
  [slot="header"] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--slider-font-size, var(--slider-font-size-default));
  }

  [slot="label"] {
    color: var(--a-fg-subtle);
  }

  [slot="readout"] {
    display: flex;
    align-items: baseline;
    gap: var(--slider-readout-gap, var(--slider-readout-gap-default));
  }

  [slot="value"] {
    color: var(--a-fg);
    font-weight: var(--slider-value-weight, var(--slider-value-weight-default));
    font-variant-numeric: tabular-nums;
  }

  [slot="suffix"] {
    color: var(--a-fg-muted);
  }

  /* Track: the reference frame W for all geometry calculations. */
  [slot="track"] {
    position: relative;
    height: var(--slider-track-height, var(--slider-track-height-default));
    border-radius: var(--slider-radius, var(--slider-radius-default));
    background: var(--slider-track-bg, var(--slider-track-bg-default));
    cursor: pointer;
    touch-action: none;
  }

  /* Fill — equation (1): width = t + p·(W−t)            */
  [slot="fill"] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--slider-fill-bg, var(--slider-fill-bg-default));
    pointer-events: none;
    width: calc(var(--slider-thumb-width, var(--slider-thumb-width-default))
                + var(--slider-pct, var(--slider-pct-default)) * (100% - var(--slider-thumb-width, var(--slider-thumb-width-default))));
  }

  /* Thumb CONTAINER: full track height, geometry width.
     Transparent background; the white pill is rendered by ::before.
     This element provides a generous vertical grab area.     */
  [slot="thumb"] {
    position: absolute;
    top: 50%;
    left: calc(var(--slider-thumb-width, var(--slider-thumb-width-default)) / 2
               + var(--slider-pct, var(--slider-pct-default)) * (100% - var(--slider-thumb-width, var(--slider-thumb-width-default))));
    width: var(--slider-thumb-width, var(--slider-thumb-width-default));
    height: var(--slider-track-height, var(--slider-track-height-default));
    border-radius: var(--slider-radius, var(--slider-radius-default));
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: grab;
    touch-action: none;
    transition:
      left     var(--slider-duration, var(--slider-duration-default)) var(--slider-easing, var(--slider-easing-default)),
      transform var(--slider-duration, var(--slider-duration-default)) var(--slider-easing, var(--slider-easing-default));
    z-index: 1;
  }

  /* Thumb VISUAL: white pill rendered inside the transparent
     container via ::before.  Inset = padding on all four sides,
     so the pill is vertically and horizontally inset from the
     container edge by pad pixels.                               */
  [slot="thumb"]::before {
    content: '';
    position: absolute;
    inset: var(--slider-thumb-padding, var(--slider-thumb-padding-default));
    border-radius: inherit;
    background: var(--slider-thumb-bg, var(--slider-thumb-bg-default));
  }

  /* During drag: kill the left transition so the thumb follows
     the pointer frame-by-frame without CSS interpolation lag. */
  :scope[data-dragging] [slot="thumb"] {
    transition: transform var(--slider-duration, var(--slider-duration-default)) var(--slider-easing, var(--slider-easing-default));
  }

  [slot="thumb"]:hover {
    transform: translate(-50%, -50%) scale(1.05);
  }

  [slot="thumb"]:active {
    transform: translate(-50%, -50%) scale(1.1);
    cursor: grabbing;
  }

  :scope:focus-visible { outline: none; }
  :scope:focus-visible [slot="thumb"] { box-shadow: var(--slider-focus-ring, var(--slider-focus-ring-default)); }

  /* Disabled */
  :scope[disabled] [slot="track"] { cursor: not-allowed; }
  :scope[disabled] [slot="fill"]  { background: var(--slider-fill-bg-disabled, var(--slider-fill-bg-disabled-default)); }
  :scope[disabled] [slot="thumb"]::before {
    background: var(--slider-thumb-bg-disabled, var(--slider-thumb-bg-disabled-default));
  }

  /* ── Hint (§184, v0.5.5, FEEDBACK-08 §7) ── */
  [slot="hint"] {
    display: block;
    margin-top: var(--slider-hint-mt, var(--a-space-1));
    font-size: var(--slider-hint-size, var(--a-ui-xs));
    color:     var(--slider-hint-fg, var(--a-fg-muted));
    line-height: var(--slider-hint-lh, 1.4);
  }
}
