@scope (color-picker-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --color-picker-gap:              var(--a-space-2);
    --color-picker-area-height:      10rem;
    --color-picker-area-radius:      var(--a-radius-md);
    --color-picker-track-height:     0.75rem;
    --color-picker-track-radius:     var(--a-radius-full);
    --color-picker-thumb-size:       1.125rem;
    --color-picker-thumb-border:     2px solid var(--a-chrome-border);
    --color-picker-thumb-shadow:     0 0 0 1px var(--a-chrome-ring-subtle), 0 2px 4px var(--a-chrome-shadow-soft);
    --color-picker-font:             var(--a-font-family-code);
    --color-picker-font-size:        var(--a-ui-sm);
    --color-picker-fg:               var(--a-fg);
    --color-picker-label-fg:         var(--a-fg-muted);
    --color-picker-border:           var(--a-border-subtle);
    --color-picker-output-bg:        var(--a-bg-muted);
    --color-picker-output-radius:    var(--a-radius-sm);
    --color-picker-fg-disabled:      var(--a-ui-text-disabled);

    /* ── Spacing ── */
    --color-picker-gap-sm:           var(--a-space-1);
    --color-picker-pad-sm:           var(--a-space-2);

    /* ── Interactive ── */
    --color-picker-focus-color:      var(--a-accent);
    --color-picker-disabled-border:  var(--a-border-subtle);

    /* ── Transitions ── */
    --color-picker-duration:         var(--a-duration-fast);
    --color-picker-easing:           var(--a-easing);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--color-picker-gap);
    width: 100%;
  }

  /* ═══════ 2D Color Area ═══════ */

  [data-area] {
    position: relative;
    width: 100%;
    height: var(--color-picker-area-height);
    border-radius: var(--color-picker-area-radius);
    border: 1px solid var(--color-picker-border);
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
  }

  [data-area]:focus-visible {
    outline: 2px solid var(--color-picker-focus-color);
    outline-offset: 2px;
  }

  [data-area] canvas {
    image-rendering: auto;
  }

  [data-area-thumb] {
    position: absolute;
    width: var(--color-picker-thumb-size);
    height: var(--color-picker-thumb-size);
    border-radius: 50%;
    border: var(--color-picker-thumb-border);
    box-shadow: var(--color-picker-thumb-shadow);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
  }

  /* ═══════ Slider Rows (H / C / L) ═══════ */

  [data-sliders] {
    display: flex;
    flex-direction: column;
    gap: var(--color-picker-gap-sm);
  }

  /* ═══════ Hue Track ═══════ */

  [data-hue-track] {
    position: relative;
    width: 100%;
    height: var(--color-picker-track-height);
    border-radius: var(--color-picker-track-radius);
    cursor: pointer;
    touch-action: none;
  }

  [data-hue-track]:focus-visible {
    outline: 2px solid var(--color-picker-focus-color);
    outline-offset: 2px;
  }

  [data-hue-thumb] {
    position: absolute;
    top: 50%;
    width: var(--color-picker-thumb-size);
    height: var(--color-picker-thumb-size);
    border-radius: 50%;
    border: var(--color-picker-thumb-border);
    box-shadow: var(--color-picker-thumb-shadow);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  /* ═══════ Output Values ═══════ */

  [data-output] {
    display: flex;
    flex-direction: column;
    gap: var(--color-picker-gap-sm);
  }

  [data-output-group] {
    display: flex;
    align-items: center;
    gap: var(--color-picker-gap-sm);
    padding: var(--color-picker-gap-sm) var(--color-picker-pad-sm);
    background: var(--color-picker-output-bg);
    border-radius: var(--color-picker-output-radius);
  }

  [data-output-value] {
    font-family: var(--color-picker-font);
    font-size: var(--color-picker-font-size);
    color: var(--color-picker-fg);
    user-select: all;
    -webkit-user-select: all;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Copy button */
  [data-copy] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-picker-label-fg);
    transition: color var(--color-picker-duration) var(--color-picker-easing);
  }

  [data-copy]:hover {
    color: var(--color-picker-fg);
  }

  [data-copy] icon-ui {
    --a-icon-size: var(--color-picker-font-size);
  }

  /* ═══════ Disabled ═══════ */

  :scope[disabled] {
    pointer-events: none;
    color: var(--color-picker-fg-disabled);
  }
  :scope[disabled] [data-area],
  :scope[disabled] [data-hue-track] {
    filter: grayscale(1);
    cursor: not-allowed;
  }
  :scope[disabled] slider-ui {
    --slider-fill-bg: var(--color-picker-disabled-border);
    --slider-thumb-bg: var(--color-picker-disabled-border);
  }
  :scope[disabled] [data-output-value] {
    color: var(--color-picker-fg-disabled);
  }
}
