.oo-color-harmony-picker { --oo-harmony-wheel-size: 240px; }
.oo-color-harmony-picker__swatch:focus-visible { outline: var(--oo-border-width) solid var(--oo-primary); outline-offset: var(--oo-space-1); }
.oo-color-harmony-picker__editor { padding: var(--oo-space-4); border: var(--oo-border-width) solid var(--oo-color-border); border-radius: var(--oo-radius-md); color: var(--oo-color-text); background: var(--oo-color-surface); min-width: calc(var(--oo-harmony-wheel-size) + 2 * var(--oo-space-4)); }
.oo-color-harmony-picker__editor--inline { margin-top: var(--oo-space-2); }
.oo-color-harmony-picker__wheel {
    width: var(--oo-harmony-wheel-size); height: var(--oo-harmony-wheel-size); margin: var(--oo-space-2) auto;
    position: relative; border-radius: var(--oo-radius-full); touch-action: none; cursor: crosshair;
    background: radial-gradient(circle closest-side, hsl(0 0% var(--oo-harmony-lightness)), transparent),
        conic-gradient(from 90deg, hsl(0 100% var(--oo-harmony-lightness)), hsl(60 100% var(--oo-harmony-lightness)), hsl(120 100% var(--oo-harmony-lightness)), hsl(180 100% var(--oo-harmony-lightness)), hsl(240 100% var(--oo-harmony-lightness)), hsl(300 100% var(--oo-harmony-lightness)), hsl(360 100% var(--oo-harmony-lightness)));
}
.oo-color-harmony-picker__point { position: absolute; transform: translate(-50%, -50%); pointer-events: none; user-select: none; width: var(--oo-space-6); height: var(--oo-space-6); border: var(--oo-border-width) solid var(--oo-color-border-strong); border-radius: var(--oo-radius-full); text-align: center; line-height: var(--oo-space-6); font-size: var(--oo-font-size-sm); color: var(--oo-color-text); text-shadow: 0 0 var(--oo-space-1) var(--oo-color-surface); box-shadow: 0 0 0 var(--oo-border-width) var(--oo-color-surface); }
.oo-color-harmony-picker__hint { margin: 0; color: var(--oo-color-text-subtle); font-size: var(--oo-font-size-sm); }
.oo-color-harmony-picker__native { position: relative; overflow: hidden; }
.oo-color-harmony-picker__row label { font-size: var(--oo-font-size-sm); flex: 1; }
.oo-color-harmony-picker__hex { width: 8ch; padding: var(--oo-space-1); border: var(--oo-border-width) solid var(--oo-color-border); border-radius: var(--oo-radius-sm); color: var(--oo-color-text); background: var(--oo-color-surface); font: inherit; }
.oo-color-harmony-picker__hex:read-only { color: var(--oo-color-text-subtle); background: var(--oo-color-background); }
.oo-color-harmony-picker__error { color: var(--oo-danger); font-size: var(--oo-font-size-sm); }
.oo-color-harmony-picker button:disabled, .oo-color-harmony-picker input:disabled { cursor: not-allowed; opacity: .5; }
.oo-color-harmony-picker.invalid:focus-within > .oo-validation-tooltip { display: block; }