.color-picker-body{grid-template-columns:minmax(0,1fr) 320px;gap:18px;display:grid}@media (max-width:900px){.color-picker-body{grid-template-columns:1fr}}.color-picker-stage{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.color-picker-stage canvas{border:1px solid var(--line);background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 50%/16px 16px;border-radius:10px;max-width:100%;height:auto}.color-picker-hint{color:var(--muted);font-size:13px}.color-picker-readout{flex-direction:column;gap:18px;min-width:0;display:flex}.color-picker-active{grid-template-columns:72px 1fr;align-items:center;gap:12px;display:grid}.color-picker-swatch{border:1px solid var(--line);background-color:#0000;border-radius:4px;width:18px;height:18px;display:inline-block}.color-picker-swatch--lg{border-radius:10px;width:72px;height:72px}.color-picker-values{flex-direction:column;gap:6px;min-width:0;display:flex}.color-picker-row{grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13px;display:grid}.color-picker-row-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.color-picker-row-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.color-picker-row-copy{border:1px solid var(--line);color:var(--muted);cursor:pointer;background:0 0;border-radius:6px;padding:2px 8px;font-size:11px;transition:border-color .12s,color .12s}.color-picker-row-copy:hover{border-color:var(--accent);color:var(--accent)}.color-picker-section{flex-direction:column;gap:8px;display:flex}.color-picker-section h4{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0;font-size:12px;font-weight:600}.color-picker-section-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.color-picker-list{flex-wrap:wrap;gap:6px;display:flex}.color-picker-chip{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:6px;padding:4px 8px 4px 5px;font-size:12px;transition:border-color .12s,transform .12s;display:inline-flex}.color-picker-chip:hover{border-color:var(--accent);transform:translateY(-1px)}.color-picker-actions{color:var(--muted);border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:8px;padding-top:12px;font-size:12px;display:flex}.color-picker-meta{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}