.cp-sv { position: relative; height: min(52vh, 340px); border-radius: var(--radius); cursor: crosshair; touch-action: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.cp-sv:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.cp-knob { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .3), 0 2px 6px rgb(0 0 0 / .35); pointer-events: none; }
input.cp-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; border-radius: 11px; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-hue::-webkit-slider-runnable-track { height: 22px; background: transparent; }
.cp-hue::-moz-range-track { height: 22px; background: transparent; }
.cp-hue::-moz-range-progress { background: transparent; }
.cp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -2px; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / .35), 0 2px 6px rgb(0 0 0 / .3); }
.cp-hue::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / .35); }
.cp-swatch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 96px; border: 0; border-radius: var(--radius); cursor: copy; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.cp-swatch span { font: 700 1.8rem/1 var(--font-mono); letter-spacing: .02em; }
.cp-swatch small { font-size: .78rem; opacity: .8; }
.cp-img { display: block; max-width: 100%; max-height: 420px; margin: auto; border-radius: var(--radius-sm); cursor: crosshair; }
.cp-vals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem .35rem; align-items: end; }
.cp-vals label { display: grid; gap: .2rem; font-size: .78rem; font-weight: 650; color: var(--text-faint); }
.cp-vals .input.is-bad { border-color: var(--danger); }
.cp-hl { margin: 0 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.cp-cr { padding: .55rem .75rem; border-radius: var(--radius-sm); font-size: .88rem; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.cp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .35rem; }
.cp-chip { display: flex; align-items: flex-end; min-height: 52px; padding: 4px; border: 0; border-radius: 8px; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.cp-chip span { padding: 1px 4px; border-radius: 4px; background: rgb(255 255 255 / .85); color: #111; font: 600 .66rem var(--font-mono); }
.cp-recent { display: flex; flex-wrap: wrap; gap: .35rem; }
.cp-dot { width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }