.cp-stage { position: relative; margin-top: .85rem; }
.cp-canvas-wrap { display: flex; justify-content: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px; line-height: 0; }
#cp-canvas { display: block; margin: 0 auto; max-width: 100%; cursor: crosshair; touch-action: pinch-zoom; }
#cp-canvas:focus-visible { outline: 3px solid var(--rose-600); outline-offset: 2px; }
.cp-results { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 760px) { .cp-results { grid-template-columns: auto 1fr; } }
.cp-live { display: flex; gap: .75rem; align-items: flex-start; }
#cp-loupe { width: 132px; height: 132px; border: 1px solid var(--line); border-radius: 8px; image-rendering: pixelated; flex: none; }
.cp-swatch { width: 132px; height: 40px; border-radius: 8px; border: 1px solid var(--line); margin-top: .5rem; }
.cp-pos { font-size: .85rem; color: var(--muted); margin: .35rem 0 0; }
.cp-values { display: grid; gap: .4rem; min-width: 0; }
.cp-val { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.cp-val code { overflow-wrap: anywhere; font-size: .92rem; }
.cp-k { font-weight: 600; font-size: .85rem; color: var(--muted); }
.cp-copy { padding: .3rem .6rem; min-height: 0; font-size: .82rem; }
.cp-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .4rem 0 0; }
.cp-chip { width: 5.4rem; height: 3.2rem; border-radius: 8px; border: 1px solid var(--line); padding: 0; display: flex; align-items: flex-end; overflow: hidden; cursor: pointer; }
.cp-chip span { display: block; width: 100%; background: rgba(255,255,255,.88); color: #222; font: 600 .72rem/1.5 ui-monospace, Menlo, Consolas, monospace; text-align: center; }
.cp-sub { font-weight: 600; margin: 1rem 0 0; }
#cp-results[hidden], #cp-stage[hidden], #cp-hist-wrap[hidden] { display: none; }