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

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

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

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

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

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

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

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

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

  [data-area-thumb] {
    position: absolute;
    width: var(--color-picker-thumb-size, var(--color-picker-thumb-size-default));
    height: var(--color-picker-thumb-size, var(--color-picker-thumb-size-default));
    border-radius: 50%;
    border: var(--color-picker-thumb-border, var(--color-picker-thumb-border-default));
    box-shadow: var(--color-picker-thumb-shadow, var(--color-picker-thumb-shadow-default));
    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, var(--color-picker-gap-sm-default));
  }

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

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

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

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

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

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

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

  [data-output-value] {
    font-family: var(--color-picker-font, var(--color-picker-font-default));
    font-size: var(--color-picker-font-size, var(--color-picker-font-size-default));
    color: var(--color-picker-fg, var(--color-picker-fg-default));
    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, var(--color-picker-label-fg-default));
    transition: color var(--color-picker-duration, var(--color-picker-duration-default)) var(--color-picker-easing, var(--color-picker-easing-default));
  }

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

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

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

  :scope[disabled] {
    pointer-events: none;
    color: var(--color-picker-fg-disabled, var(--color-picker-fg-disabled-default));
  }
  :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, var(--color-picker-disabled-border-default));
    --slider-thumb-bg: var(--color-picker-disabled-border, var(--color-picker-disabled-border-default));
  }
  :scope[disabled] [data-output-value] {
    color: var(--color-picker-fg-disabled, var(--color-picker-fg-disabled-default));
  }
}
