.iou-lab{display:grid; gap:1rem;}
.iou-controls{
  display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center;
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.85rem;
}
.iou-controls label{display:flex; align-items:center; gap:.5rem;}
.iou-controls input[type="range"]{width:8rem;}
.iou-wrap{display:flex; flex-wrap:wrap; gap:1.6rem; align-items:flex-start;}
.iou-grid{
  display:grid; grid-template-columns:repeat(14, 1.15rem); gap:1px;
  background:var(--line); border:1px solid var(--line); width:max-content;
}
.iou-grid div{width:1.15rem; height:1.15rem; background:var(--tile);}
.iou-grid div.tp{background:var(--good);}
.iou-grid div.fp{background:var(--bad);}
.iou-grid div.fn{background:var(--nn);}
.iou-readout{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.85rem; line-height:1.9;}
.iou-readout b{color:var(--signal-ink);}
.iou-legend{display:grid; gap:.3rem; font-size:.8rem; color:var(--text-dim); margin-top:.6rem;}
.iou-legend span::before{
  content:""; display:inline-block; width:.8rem; height:.8rem; margin-right:.45rem;
  vertical-align:-.08rem; border:1px solid var(--line);
}
.iou-legend .l-tp::before{background:var(--good);}
.iou-legend .l-fp::before{background:var(--bad);}
.iou-legend .l-fn::before{background:var(--nn);}