.cp[data-v-392e07ed]{flex-direction:column;gap:1rem;padding:1.25rem;display:flex}.cp-main[data-v-392e07ed]{grid-template-columns:minmax(12rem,.85fr) minmax(0,1.15fr);gap:1rem;display:grid}.cp-preview[data-v-392e07ed]{border:1px solid var(--border);border-radius:var(--radius-card);background-image:linear-gradient(var(--cp-color), var(--cp-color)), repeating-conic-gradient(var(--border-strong) 0% 25%, var(--surface) 0% 50%);background-size:auto,18px 18px;min-height:18rem;position:relative;overflow:hidden}.cp-native[data-v-392e07ed]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.cp-preview-copy[data-v-392e07ed]{border:1px solid color-mix(in srgb, var(--surface) 70%, transparent);border-radius:var(--radius-input);background:color-mix(in srgb, var(--surface) 88%, transparent);color:var(--text);backdrop-filter:blur(8px);justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem .75rem;display:flex;position:absolute;bottom:.85rem;left:.85rem;right:.85rem}.cp-preview-copy span[data-v-392e07ed],.cp-label[data-v-392e07ed],.cp-slider span[data-v-392e07ed],.cp-num span[data-v-392e07ed],.cp-hsl-readout span[data-v-392e07ed]{color:var(--muted);font-size:.8125rem;font-weight:600}.cp-preview-copy strong[data-v-392e07ed],.cp-hsl-readout strong[data-v-392e07ed]{font-variant-numeric:tabular-nums;color:var(--text)}.cp-panel[data-v-392e07ed]{flex-direction:column;gap:.75rem;display:flex}.cp-head[data-v-392e07ed]{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.cp-actions[data-v-392e07ed]{gap:.5rem;display:flex}.cp-btn[data-v-392e07ed]{border:1px solid var(--border-strong);border-radius:var(--radius-button);background:var(--elevated);min-height:2rem;color:var(--muted);cursor:pointer;white-space:nowrap;padding:.3rem .7rem;font-size:.8125rem}.cp-btn[data-v-392e07ed]:hover:not(:disabled){color:var(--text)}.cp-btn[data-v-392e07ed]:disabled{cursor:default;opacity:.5}.cp-text[data-v-392e07ed],.cp-num input[data-v-392e07ed]{border:1px solid var(--border);border-radius:var(--radius-input);background:var(--input);width:100%;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;box-sizing:border-box}.cp-text[data-v-392e07ed]{padding:.72rem .8rem}.cp-text[data-v-392e07ed]:focus-visible,.cp-num input[data-v-392e07ed]:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--tint-accent);outline:none}.cp-text--err[data-v-392e07ed]{border-color:var(--badge-fail)}.cp-error[data-v-392e07ed],.cp-empty[data-v-392e07ed]{margin:-.25rem 0 0;font-size:.8125rem}.cp-error[data-v-392e07ed]{color:var(--badge-fail)}.cp-empty[data-v-392e07ed]{color:var(--faint)}.cp-sliders[data-v-392e07ed]{border:1px solid var(--border);border-radius:var(--radius-card);background:var(--elevated);flex-direction:column;gap:.65rem;padding:.85rem;display:flex}.cp-slider[data-v-392e07ed]{flex-direction:column;gap:.35rem;display:flex}.cp-slider span[data-v-392e07ed]{justify-content:space-between;gap:.75rem;display:flex}.cp-slider b[data-v-392e07ed]{color:var(--text);font-variant-numeric:tabular-nums}.cp-slider input[data-v-392e07ed]{width:100%;accent-color:var(--accent)}.cp-hsl[data-v-392e07ed]{border-top:1px solid var(--border);grid-template-columns:repeat(3,minmax(0,1fr)) minmax(12rem,1.2fr);align-items:end;gap:.75rem;padding-top:1rem;display:grid}.cp-num[data-v-392e07ed]{flex-direction:column;gap:.3rem;display:flex}.cp-num input[data-v-392e07ed]{min-height:2.5rem;padding:.45rem .55rem}.cp-hsl-readout[data-v-392e07ed]{border:1px solid var(--border);border-radius:var(--radius-input);background:var(--elevated);justify-content:space-between;align-items:center;gap:.75rem;min-height:2.5rem;padding:.45rem .7rem;display:flex}.cp-output[data-v-392e07ed]{grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;display:grid}.cp-format[data-v-392e07ed]{border:1px solid var(--border);border-radius:var(--radius-input);background:var(--elevated);align-items:center;gap:.75rem;min-width:0;padding:.55rem .7rem;display:flex}.cp-format-label[data-v-392e07ed]{min-width:3.4rem;color:var(--muted);text-transform:uppercase;flex:none;font-size:.78rem;font-weight:700}.cp-format code[data-v-392e07ed]{min-width:0;color:var(--text);overflow-wrap:anywhere;flex:auto;font-size:.9rem}@media (width<=760px){.cp-main[data-v-392e07ed],.cp-hsl[data-v-392e07ed],.cp-output[data-v-392e07ed]{grid-template-columns:1fr}.cp-preview[data-v-392e07ed]{min-height:12rem}.cp-btn[data-v-392e07ed]{min-height:2.35rem}}