.cp{display:grid;gap:var(--space-3);width:100%;max-width:320px}.cp-area{aspect-ratio:4/3;border-radius:14px;cursor:crosshair;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,transparent)}.cp-area,.cp-hue{position:relative;touch-action:none}.cp-hue{height:16px;border-radius:999px;cursor:pointer;background:linear-gradient(90deg,red,#ff0,lime,cyan,blue,#f0f,red)}.cp-thumb{position:absolute;width:22px;height:22px;border-radius:50%;transform:translate(-50%,-50%);border:3px solid #fff;box-shadow:0 0 0 1px rgb(var(--shadow)/.25),0 2px 6px rgb(var(--shadow)/.3)}.cp-thumb--hue{top:50%}.cp-thumb:focus-visible{box-shadow:var(--ring)}.cp-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.cp-preview{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);flex:none}.cp-input{flex:1 1 130px;width:auto;min-width:0;min-height:38px;font-family:ui-monospace,monospace;font-size:14px}.cp-clip{display:inline-flex;gap:4px}.cp-clip .icon-btn{flex:none;width:40px;height:40px;border:1.5px solid var(--border);background:transparent;cursor:pointer}.cp-swatches{display:flex;flex-wrap:wrap;gap:8px}.cp-swatch{width:28px;height:28px;padding:0;border-radius:8px;border:1px solid var(--border);cursor:pointer;transition:transform .12s}.cp-swatch:hover{transform:scale(1.1)}.cp-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text)}.cp[data-compact]{max-width:none;gap:var(--space-2)}.cp[data-compact] .cp-area{aspect-ratio:auto;height:124px}.cp[data-compact] .cp-hue{height:14px}.cp[data-compact] .cp-swatches{gap:5px}.cp[data-compact] .cp-swatch{width:22px;height:22px;border-radius:6px}