.cp{min-width:0;display:block}.cp-trigger{text-align:left;outline:none}.cp-trigger[aria-expanded=true]{box-shadow:var(--well-shadow,var(--shadow-control-os)), 0 0 0 2px var(--line-2)}.cp-pop{z-index:70;box-sizing:border-box;overscroll-behavior:contain;background:var(--menu-os-ground);width:240px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);color:var(--color-ink);box-shadow:var(--shadow-menu-os);-webkit-user-select:none;user-select:none;border:0;border-radius:14px;flex-direction:column;margin:0;padding:12px;font-size:14px;line-height:20px;display:flex;position:fixed;inset:0 auto auto 0;overflow:auto}.cp-area{background:linear-gradient(to top, #000, #0000), linear-gradient(to right, #fff, #fff0), hsl(var(--cp-hue) 100% 50%);height:148px;box-shadow:inset 0 0 0 1px var(--line);touch-action:none;cursor:var(--cur-crosshair), crosshair;border-radius:9px;outline:none;flex:none;position:relative}.cp-knob{box-sizing:border-box;pointer-events:none;width:16px;height:16px;transition:scale .12s var(--ease-out);border:2.5px solid #fff;border-radius:50%;margin:-8px 0 0 -8px;position:absolute;box-shadow:0 0 0 .5px #0000001f,0 1px 2px #0000003d,0 2px 5px #0000001f,inset 0 0 0 .5px #0000001f}.cp-area:active .cp-knob,.cp-hue:active .cp-knob{scale:.92}.cp-hue{touch-action:none;height:20px;cursor:var(--cur-pointer), pointer;outline:none;flex:none;margin-top:10px;position:relative}.cp-track{box-shadow:inset 0 0 0 1px var(--line);background:linear-gradient(90deg,red 8px,#ff0 calc(16.6667% + 5.33333px),#0f0 calc(33.3333% + 2.66667px),#0ff 50%,#00f calc(66.6667% - 2.66667px),#f0f calc(83.3333% - 5.33333px),red calc(100% - 8px));border-radius:999px;position:absolute;inset:4px 0}.cp-hue>.cp-knob{top:50%}@media (pointer:coarse){.cp-hue:before{content:"";position:absolute;inset:-10px 0}}.cp-row{flex:none;gap:6px;margin-top:10px;display:flex}.cp-hex{background:color-mix(in srgb, var(--color-ink) 5%, transparent);min-width:0;height:36px;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-transform:uppercase;-webkit-user-select:text;user-select:text;transition:background-color .12s var(--ease-out);border-radius:9px;outline:none;flex:1;padding:0 11px}.cp-hex:focus{background:color-mix(in srgb, var(--color-ink) 7%, transparent)}.cp-drop{background:color-mix(in srgb, var(--color-ink) 5%, transparent);width:36px;height:36px;color:var(--color-ink-2);border-radius:9px}@media (hover:hover){.cp-drop:hover{background:color-mix(in srgb, var(--color-ink) 9%, transparent);color:var(--color-ink)}}.cp-dots{grid-template-columns:repeat(var(--cp-cols,6), 24px);flex:none;justify-content:space-between;row-gap:10px;margin-top:12px;display:grid}.cp-dot{background:var(--cp-dot);width:24px;height:24px;color:var(--cp-tick);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .12s var(--ease-out), scale .12s var(--ease-out);border-radius:50%;outline:none;place-items:center;display:grid;position:relative}.cp-dot:after{content:"";position:absolute;inset:-4px}@media (hover:hover){.cp-dot:hover{box-shadow:inset 0 0 0 1px var(--line-2), 0 0 0 3px color-mix(in srgb, var(--color-ink) 10%, transparent)}}.cp-dot:active{scale:.92}.cp-area:focus-visible,.cp-hue:focus-visible>.cp-track,.cp-dot:focus-visible{outline:2px solid color-mix(in srgb, var(--color-ink) 42%, transparent);outline-offset:2px}@media (prefers-reduced-motion:reduce){.cp-knob,.cp-dot{transition:none}.cp-area:active .cp-knob,.cp-hue:active .cp-knob,.cp-dot:active{scale:none}}