.cp-main{align-items:stretch}.cp-swatch{border-radius:var(--radius);border:1.5px solid var(--line);height:120px}.cp-inputs{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.cp-native{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;width:64px;height:44px;padding:2px;font-size:16px}.cp-hexfield{flex:140px;min-width:0}.cp-hexin{font-family:var(--f-mono);text-transform:lowercase}.cp-values{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.cp-values li{grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;display:grid}.cp-code{font-family:var(--f-mono);overflow-wrap:anywhere;font-size:15px}.cp-copy{justify-content:center;min-width:64px;min-height:30px}.cp-shades,.cp-pic,.cp-recent{flex-direction:column;gap:10px;display:flex}.cp-ladder{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;display:grid}.cp-shade{border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;justify-content:center;align-items:flex-end;height:64px;padding:4px 2px;display:flex}.cp-shade span{font-family:var(--f-mono);letter-spacing:0;font-size:10px}.cp-upload{cursor:pointer;min-height:30px;position:relative}.cp-file{opacity:0;cursor:pointer;width:100%;height:100%;font-size:16px;position:absolute;inset:0}.cp-upload:focus-within{border-color:var(--accent)}.cp-canvas{object-fit:contain;border-radius:var(--radius);border:1.5px solid var(--line);cursor:crosshair;touch-action:manipulation;background:var(--sunk);width:100%;height:auto;max-height:420px;display:none}.cp-canvas.on{display:block}.cp-note{margin:0;font-size:13px}.cp-dots{flex-wrap:wrap;gap:8px;display:flex}.cp-dot{border:2px solid var(--surface);width:30px;height:30px;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;border-radius:50%;padding:0}@media (max-width:340px){.cp-shade span{display:none}}