.cp-work{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-5);align-items:start}.cp-work[hidden]{display:none}.cp-canvas-wrap{position:relative;width:fit-content;max-width:100%;margin:0 auto}#cp-canvas{max-width:100%;max-height:65vh;display:block;border-radius:var(--radius-md);cursor:crosshair;touch-action:none}#cp-canvas:focus-visible{outline:2px solid var(--accent-1);outline-offset:-2px}.cp-hint{margin-top:var(--space-2);font-size:13px;color:var(--text-secondary)}.cp-marker{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #000000b3,inset 0 0 0 1px #000000b3;pointer-events:none}.cp-marker[hidden]{display:none}.cp-side{display:flex;flex-direction:column;gap:var(--space-4)}.cp-picked{display:flex;flex-direction:column;gap:var(--space-3)}.cp-big-swatch{height:72px;border-radius:var(--radius-md);border:1px solid var(--border)}.cp-values{display:flex;flex-direction:column;gap:var(--space-2)}.cp-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:var(--space-3)}.cp-row dt{font-size:12px;font-weight:700;color:var(--text-secondary)}.cp-row dd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-row .secondary-btn{width:auto;margin:0;padding:6px var(--space-3)}.cp-swatches{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--space-2)}.cp-swatch{width:100%;min-height:64px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600;cursor:pointer}.cp-swatch small{font-size:11px;opacity:.8}.cp-swatch:focus-visible{outline:2px solid var(--accent-1);outline-offset:2px}@media(max-width:760px){.cp-work{grid-template-columns:minmax(0,1fr)}}