@keyframes hf-color-picker-popover-in{0%{opacity:0;transform:translate(var(--hf-color-picker-enter-x), var(--hf-color-picker-enter-y)) scale(.98)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes hf-color-picker-popover-out{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(var(--hf-color-picker-enter-x), var(--hf-color-picker-enter-y)) scale(.98)}}.hf-color-picker-popover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){--hf-color-picker-enter-x:0;--hf-color-picker-enter-y:var(--hf-space-100);--hf-color-picker-enter-y--rgb:var(--hf-space-100--rgb);z-index:100000;box-sizing:border-box;width:12.5rem;height:14.9375rem;padding:var(--hf-space-200);gap:var(--hf-space-300);border-radius:var(--hf-radius-400);background:var(--hf-color-background-secondary);box-shadow:inset 0 0 0 var(--hf-border-width-thin) var(--hf-color-border-subtle);transform-origin:var(--radix-popover-content-transform-origin);border:0;outline:none;flex-direction:column;display:flex;overflow:clip}.hf-color-picker-popover[data-side=bottom]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){--hf-color-picker-enter-y:calc(var(--hf-space-100) * -1)}.hf-color-picker-popover[data-side=left]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){--hf-color-picker-enter-x:var(--hf-space-100);--hf-color-picker-enter-x--rgb:var(--hf-space-100--rgb);--hf-color-picker-enter-y:0}.hf-color-picker-popover[data-side=right]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){--hf-color-picker-enter-x:calc(var(--hf-space-100) * -1);--hf-color-picker-enter-y:0}.hf-color-picker-popover[data-state=open]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation:.15s cubic-bezier(.16,1,.3,1) hf-color-picker-popover-in}.hf-color-picker-popover[data-state=closed]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation:.1s cubic-bezier(.4,0,1,1) hf-color-picker-popover-out}.hf-color-picker__footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:11.5rem;height:var(--hf-space-800);flex:0 0 var(--hf-space-800);align-items:center;gap:var(--hf-space-100);display:flex}.hf-color-picker__hex-input:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){box-sizing:border-box;width:0;height:var(--hf-space-800);min-width:0;padding:0 var(--hf-space-300);border:var(--hf-border-width-thin) solid transparent;border-radius:var(--hf-radius-200);background:var(--hf-color-transparent-light-05);color:var(--hf-color-text-primary);font-family:var(--hf-type-family-secondary);font-size:var(--hf-type-size-100);font-weight:var(--hf-type-weight-medium);line-height:var(--hf-type-line-height-300);letter-spacing:var(--hf-type-letter-spacing-none);text-transform:uppercase;caret-color:var(--hf-color-brand-primary);outline:none;flex:auto;transition:border-color .12s cubic-bezier(.16,1,.3,1), background-color .12s cubic-bezier(.16,1,.3,1)}.hf-color-picker__hex-input:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--hf-color-brand-primary)}.hf-color-picker__eye-dropper:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--hf-space-800);height:var(--hf-space-800);flex:0 0 var(--hf-space-800);border-radius:var(--hf-radius-200);color:var(--hf-color-text-primary);cursor:pointer;transform-origin:50%;background:0 0;border:0;outline:none;justify-content:center;align-items:center;padding:0;transition:background-color .12s cubic-bezier(.16,1,.3,1), color .12s cubic-bezier(.16,1,.3,1), transform .1s cubic-bezier(.2,0,0,1);display:inline-flex}.hf-color-picker__eye-dropper:disabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){cursor:default;opacity:.3}.hf-color-picker__eye-dropper:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 var(--hf-border-width-medium) var(--hf-color-border-focus)}.hf-color-picker__eye-dropper:active:not(:disabled):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:scale(.96)}.hf-color-picker__eye-dropper[aria-pressed=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--hf-color-transparent-lime-10);color:var(--hf-color-icon-accent)}@media (hover:hover) and (pointer:fine){.hf-color-picker__eye-dropper:hover:not(:disabled):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--hf-color-transparent-light-05)}.hf-color-picker__eye-dropper[aria-pressed=true]:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--hf-color-transparent-lime-10)}.hf-color-picker__hex-input:hover:not(:focus-visible):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--hf-color-transparent-light-10)}}.hf-color-picker__picker.react-colorful:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){flex:0 0 11.1875rem;width:11.5rem;height:11.1875rem}.hf-color-picker__picker:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .react-colorful__saturation{border-radius:var(--hf-radius-300);height:9.5625rem;box-shadow:inset 0 0 0 var(--hf-border-width-thin) var(--hf-color-border-default);border:0;flex:0 0 9.5625rem}.hf-color-picker__picker:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .react-colorful__hue{height:.875rem;margin-top:var(--hf-space-300);border-radius:var(--hf-radius-full);flex:0 0 .875rem}.hf-color-picker__picker:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .react-colorful__interactive{border-radius:inherit}.hf-color-picker__picker:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .react-colorful__pointer{box-sizing:border-box;width:var(--hf-space-400);height:var(--hf-space-400);border:var(--hf-space-100) solid var(--hf-color-text-primary);box-shadow:0 2px 4.5px var(--hf-color-transparent-dark-25);background:0 0;transition:box-shadow .12s cubic-bezier(.16,1,.3,1), transform .1s cubic-bezier(.2,0,0,1)}.hf-color-picker__picker:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .react-colorful__interactive:focus-visible .react-colorful__pointer{box-shadow:0 2px 4.5px var(--hf-color-transparent-dark-25), 0 0 0 var(--hf-border-width-medium) var(--hf-color-border-focus);transform:translate(-50%,-50%)}@media (prefers-reduced-motion:reduce){.hf-color-picker-popover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation:none}.hf-color-picker__hex-input:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.hf-color-picker__eye-dropper:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transition:none}}@media (prefers-reduced-motion:reduce){.hf-color-picker__picker:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .react-colorful__pointer{transition:none}}