.acp{flex:none;font-size:14px;display:inline-flex;position:relative}.acp-current{border:1px solid var(--border-color-pho-primary,#d4d4d4);cursor:pointer;background:#d4af37;border-radius:.625rem;width:2.25rem;height:2.25rem;padding:0;transition:box-shadow .16s,border-color .16s,transform .12s}.acp-current:hover{border-color:var(--border-color-pho-interactive,#888)}.acp-current:focus-visible{border-color:var(--border-color-pho-interactive,#000);box-shadow:0 0 0 3px var(--ring-color-pho-interactive,#00000024);outline:none}.acp-current:active{transform:scale(.96)}.acp-current[data-invalid=true]{border-color:#ef4444;box-shadow:0 0 0 3px #ef44442e}.acp-pop{z-index:60;border:1px solid var(--border-color-pho-primary,#d4d4d4);background:var(--background-color-pho-primary,#fff);visibility:hidden;opacity:0;pointer-events:none;border-radius:.875rem;flex-direction:column;gap:.625rem;padding:.75rem;display:flex;position:absolute;top:calc(100% + .5rem);left:0;transform:translateY(-4px);box-shadow:0 12px 32px #0000002e,0 2px 6px #00000014}.acp-pop[data-open=true]{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}.acp-square{border:1px solid var(--border-color-pho-primary,#d4d4d4);cursor:crosshair;touch-action:none;background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(calc(var(--acp-h,43) * 1deg) 100% 50%);border-radius:.625rem;width:12.5rem;height:7.5rem;position:relative;overflow:hidden}.acp-hue{border:1px solid var(--border-color-pho-primary,#d4d4d4);cursor:pointer;touch-action:none;background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);border-radius:999px;width:12.5rem;height:.875rem;position:relative}.acp-square:focus-visible,.acp-hue:focus-visible{border-color:var(--border-color-pho-interactive,#000);box-shadow:0 0 0 3px var(--ring-color-pho-interactive,#00000024);outline:none}.acp-cursor{pointer-events:none;border:2px solid #fff;border-radius:999px;width:.875rem;height:.875rem;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000008c,0 1px 3px #0006}.acp-hue .acp-cursor{background:0 0;top:50%;transform:translate(-50%,-50%)}.acp-hex{box-sizing:border-box;border:1px solid var(--border-color-pho-primary,#d4d4d4);background:var(--background-color-pho-secondary,#f5f5f7);width:100%;color:var(--text-color-pho-primary,#000);letter-spacing:.02em;border-radius:.5rem;padding:.375rem .5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem}.acp-hex:focus{border-color:var(--border-color-pho-interactive,#000);outline:none}.acp-hex[data-bad=true]{border-color:#ef4444;box-shadow:0 0 0 2px #ef444426}@media (pointer:coarse){.acp-square{width:15.5rem;height:9.5rem}.acp-hue{height:1.5rem}.acp-cursor{width:1.25rem;height:1.25rem}}