.cp-lab{display:grid; gap:1rem;}
.cp-wrap{display:flex; flex-wrap:wrap; gap:1.8rem; align-items:flex-start;}
.cp-left{display:grid; gap:.9rem; max-width:21rem;}
.cp-modes{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.83rem;}
.cp-modes button{
  font:inherit; background:var(--tile); color:var(--text-dim);
  border:1px solid var(--line); padding:.3rem .7rem; cursor:pointer;
}
.cp-modes button.on{background:var(--paper-2); color:var(--text); border-color:var(--text);}
.cp-buttons{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.83rem;}
.cp-buttons button{
  font:inherit; background:var(--paper-2); color:var(--text); border:1px solid var(--text);
  padding:.35rem .8rem; cursor:pointer;
}
.cp-buttons button:hover{border-color:var(--signal);}
.cp-readout{
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.84rem; line-height:1.9;
}
.cp-readout b{color:var(--signal-ink);}
#cp-canvas{border:1px solid var(--line); background:var(--tile); max-width:100%; height:auto;}
.cp-legend{
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.75rem;
  color:var(--text-dim); margin-top:.4rem; max-width:28rem;
}