@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))
         pad  = internal padding on the thumb (var(--slider-thumb-padding))
         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) / 2
                     + var(--slider-pct) * (100% - var(--slider-thumb-width)))

       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:               var(--a-space-1);
    --slider-readout-gap:       var(--a-space-0-5);
    --slider-radius:            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:      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:     2px;

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

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

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

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

    /* Dual-thumb progress fractions (0.0 → 1.0) written by JS when [dual]. */
    --slider-pct-lower:         0;
    --slider-pct-upper:         1;

    /* ── Colors ──
       Track: dim recessed surface  |  Fill: primary  |  Thumb: white chrome */
    --slider-track-bg:          var(--a-bg-muted);
    --slider-fill-bg:           var(--a-primary-bg);
    --slider-thumb-bg:          var(--a-chrome-light);
    --slider-fill-bg-disabled:  var(--a-canvas-1-scrim);
    --slider-thumb-bg-disabled: var(--a-canvas-2-scrim);

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

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

    /* ── Focus ── */
    --slider-focus-ring:        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);
  }

  :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);
  }

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

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

  [slot="value"] {
    color: var(--a-fg);
    font-weight: var(--slider-value-weight);
    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);
    border-radius: var(--slider-radius);
    background: var(--slider-track-bg);
    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);
    pointer-events: none;
    width: calc(var(--slider-thumb-width)
                + var(--slider-pct) * (100% - var(--slider-thumb-width)));
  }

  /* Dual-thumb geometry: each thumb has an EFFECTIVE travel of (W − 2t),
     not (W − t) — the reservation of 2t guarantees the thumbs never
     overlap. At equal values they touch edge-to-edge; at extremes the
     gap between thumb visual-edges represents 100% of the value range.

     Forward equations (track-relative pixel positions):
       lower_visual_left  (p_l) = p_l · (W − 2t)
       lower_visual_right (p_l) = t + p_l · (W − 2t)
       upper_visual_left  (p_u) = t + p_u · (W − 2t)
       upper_visual_right (p_u) = 2t + p_u · (W − 2t)

     CSS thumb `left` (visual center, since transform: translate(-50%)):
       lower center = t/2  + p_l · (W − 2t)
       upper center = 1.5t + p_u · (W − 2t)

     Fill (lower-edge → upper-edge):
       fill_left  = p_l · (W − 2t)
       fill_width = 2t + (p_u − p_l) · (W − 2t)

     Sanity:
       p_l = p_u                → fill_width = 2t      (both thumbs touching)
       p_l = 0,   p_u = 1       → fill_width = W       (full track filled)
       p_l = 0.5, p_u = 0.5     → pair centered at W/2 (thumbs touch at midpoint)
       p_l = 0.2, p_u = 0.8, W=716, t=36 →
         travel = W − 2t = 644
         fill_left  = 0.2·644 = 128.8
         fill_width = 72 + 0.6·644 = 458.4
         fill_right = 587.2                              (= upper visual right) */
  :scope[dual] [slot="fill"] {
    left: calc(var(--slider-pct-lower)
               * (100% - 2 * var(--slider-thumb-width)));
    width: calc(2 * var(--slider-thumb-width)
                + (var(--slider-pct-upper)
                   - var(--slider-pct-lower))
                * (100% - 2 * var(--slider-thumb-width)));
  }

  /* 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) / 2
               + var(--slider-pct) * (100% - var(--slider-thumb-width)));
    width: var(--slider-thumb-width);
    height: var(--slider-track-height);
    border-radius: var(--slider-radius);
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: grab;
    touch-action: none;
    transition:
      left     var(--slider-duration) var(--slider-easing),
      transform var(--slider-duration) var(--slider-easing);
    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);
    border-radius: inherit;
    background: var(--slider-thumb-bg);
  }

  /* 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-easing);
  }

  /* Dual-mode thumb positions: each thumb travels along (W − 2t) so they
     can never overlap. Lower's CSS center starts at t/2 (visual left
     edge at 0); upper's CSS center starts at 1.5t (visual left edge at
     t, leaving room for lower). At equal values the two thumbs touch
     edge-to-edge — the 2t reservation between them is exactly the
     combined thumb-width.

     z-index nudges keep both thumbs paintable at boundary positions.
     The "active" (currently-dragging) thumb lifts above its sibling. */
  :scope[dual] [slot="thumb"][data-thumb="lower"] {
    left: calc(var(--slider-thumb-width) / 2
               + var(--slider-pct-lower)
               * (100% - 2 * var(--slider-thumb-width)));
    z-index: 2;
  }
  :scope[dual] [slot="thumb"][data-thumb="upper"] {
    left: calc(var(--slider-thumb-width) * 1.5
               + var(--slider-pct-upper)
               * (100% - 2 * var(--slider-thumb-width)));
    z-index: 3;
  }
  /* When the user is dragging a thumb, lift it above its sibling so the
     dragged one stays visually anchored even if they cross. */
  :scope[dual] [slot="thumb"][data-active] {
    z-index: 4;
  }

  /* Dual-mode readout: separator + numeric pair */
  :scope[dual] [slot="value-sep"] {
    color: var(--a-fg-muted);
    padding: 0 var(--a-space-0-5);
  }
  :scope[dual] [slot="value-lower"],
  :scope[dual] [slot="value-upper"] {
    color: var(--a-fg);
    font-weight: var(--slider-value-weight);
    font-variant-numeric: tabular-nums;
  }

  [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); }

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

  /* ── 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);
  }
}
