.cp{--cp-swatch-size:40px;display:inline-flex;position:relative}.cp-swatch{width:var(--cp-swatch-size);height:var(--cp-swatch-size);border:1px solid var(--white-15);box-shadow:inset 0 0 0 1px var(--white-10);cursor:pointer;background-color:var(--white-30);background-image:linear-gradient(45deg, var(--white-20) 25%, transparent 25%), linear-gradient(-45deg, var(--white-20) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--white-20) 75%), linear-gradient(-45deg, transparent 75%, var(--white-20) 75%);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px;border-radius:8px;flex-shrink:0;padding:0;transition:border-color .1s;position:relative;overflow:hidden}@media (hover:hover){.cp-swatch:hover{border-color:var(--white-30)}}.cp-swatch.is-open{border-color:var(--secondary-500)}.cp-swatch-fill{position:absolute;inset:0}.cp-panel{z-index:30;background:var(--primary-900);border:1px solid var(--white-10);border-radius:10px;flex-direction:column;gap:12px;width:232px;padding:12px;display:flex;position:absolute;top:calc(100% + 8px);left:0;box-shadow:0 12px 32px #00000073}.cp-panel.align-right{left:auto;right:0}.cp-sv{cursor:crosshair;touch-action:none;background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), var(--cp-hue,red);border-radius:6px;width:100%;height:140px;position:relative}.cp-sv-thumb,.cp-hue-thumb{border:2px solid var(--white-100);pointer-events:none;border-radius:50%;width:14px;height:14px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000080}.cp-hue{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:100%;height:12px;position:relative}.cp-hue-thumb{top:50%}.cp-rgb{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.cp-field{flex-direction:column;align-items:center;gap:4px;display:flex}.cp-panel .cp-field input{text-align:center;background:var(--primary-700);border:1px solid var(--white-10);width:100%;color:var(--white-90);font-size:var(--font-size-text-sm);font-variant-numeric:tabular-nums;border-radius:6px;margin:0;padding:6px 4px;line-height:1.2}.cp-panel .cp-field input:focus,.cp-panel .cp-field input:focus-visible{outline:none;border-color:var(--secondary-500)!important}.cp-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cp-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cp-field input[type=number]{appearance:textfield}.cp-field span{font-size:var(--font-size-text-xs);color:var(--white-40);font-weight:var(--font-semibold)}