.cpx{gap:1.1rem;display:grid}.cpx__drop{border:2px dashed color-mix(in srgb, currentColor 30%, transparent);text-align:center;border-radius:10px;align-content:center;justify-items:center;gap:.85rem;min-height:19rem;padding:1.5rem;display:grid}.cpx__drop[data-over=true],.cpx__stage[data-over=true]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, transparent)}.cpx__hint{max-width:28rem;color:var(--muted);margin:0;font-size:.9rem}.cpx__stage{border-radius:10px;gap:1rem;display:grid}.cpx__image{align-content:start;gap:.5rem;display:grid}.cpx__canvas-wrap{background:repeating-conic-gradient(color-mix(in srgb, currentColor 12%, transparent) 0 25%, transparent 0 50%) 0 0 / 16px 16px;border-radius:8px;overflow:hidden}.cpx__canvas{cursor:crosshair;width:100%;height:auto;display:block}.cpx__note{color:var(--muted);margin:0;font-size:.85rem}.cpx__picked{font-family:var(--font-mono);flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.9rem;display:flex}.cpx__picked-swatch{border:1px solid var(--line-strong);border-radius:5px;width:1.6rem;height:1.6rem}.cpx__controls{align-content:start;gap:.85rem;font-size:.92rem;display:grid}.cpx__row{grid-template-columns:1fr auto;align-items:baseline;gap:.3rem .6rem;display:grid}.cpx__row label{font-weight:600}.cpx__row input[type=range]{grid-column:1/-1;width:100%}.cpx__value{color:var(--muted);font-variant-numeric:tabular-nums}.cpx__palette{gap:.4rem;margin:0;padding:0;list-style:none;display:grid}.cpx__palette li{gap:.15rem;display:grid}.cpx__swatch{border:1px solid var(--line);width:100%;min-height:2.8rem;font:inherit;cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;padding:.4rem .8rem;display:flex}.cpx__hex{font-family:var(--font-mono);font-weight:600}.cpx__share{font-variant-numeric:tabular-nums}.cpx__contrast{color:var(--muted);font-size:.8rem}.cpx__actions{flex-wrap:wrap;gap:.5rem;display:flex}.cpx__button{border:1px solid color-mix(in srgb, currentColor 35%, transparent);color:inherit;font:inherit;cursor:pointer;text-align:center;background:0 0;border-radius:7px;padding:.5rem .95rem;font-size:.92rem;text-decoration:none}.cpx__button:hover{background:color-mix(in srgb, currentColor 8%, transparent)}.cpx__button--small{padding:.2rem .6rem;font-family:inherit;font-size:.85rem}.cpx__button--quiet{color:var(--muted);border-color:#0000}.cpx__status{min-height:1.5em;color:var(--muted);margin:0}.cpx__error{color:var(--warn);margin:0;font-size:.9rem}@media (width>=46rem){.cpx__stage{grid-template-columns:minmax(0,1.4fr) minmax(16rem,1fr);align-items:start}}