.color-picker .picker-container{gap:var(--s4);grid-template-columns:auto 1fr;align-items:end;display:grid}.color-picker input[type=color]{width:72px;height:var(--tap);background-color:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);cursor:pointer;padding:3px}.color-picker #cp-hex{font-family:var(--font-mono)}.color-picker #cp-hex[aria-invalid=true]{border-color:var(--danger)}.color-picker .color-preview{border:1px solid var(--border-strong);border-radius:var(--r);height:108px}.color-picker .color-values{gap:var(--s2);flex-direction:column;display:flex}.color-picker .color-value{align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s3);background-color:var(--surface-inset);border:1px solid var(--border);border-radius:var(--r-sm);display:flex}.color-picker .color-value .key{letter-spacing:.08em;width:52px;color:var(--muted);flex:none;font-size:.7rem;font-weight:650}.color-picker .color-value .val{min-width:0;font-family:var(--font-mono);color:var(--text);white-space:nowrap;flex:1;font-size:.88rem;overflow-x:auto}.color-picker .color-value button{min-height:32px;padding:0 var(--s3);flex:none;font-size:.78rem}.color-picker .contrast{color:var(--text-2);font-size:.88rem}.color-picker .error{padding:var(--s3) var(--s4);background-color:var(--surface-2);border:1px solid var(--danger);border-radius:var(--r-sm);color:var(--danger);font-size:.88rem}