.perc-lab{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;}
@media (max-width:640px){ .perc-lab{grid-template-columns:1fr;} }

.perc-lab canvas{
  width:100%; height:auto; background:var(--paper);
  border:1px solid var(--line);
}

.perc-controls{display:grid; gap:.9rem; align-content:start;}
.perc-controls label{
  display:grid; grid-template-columns:5.5rem 1fr 3.2rem; align-items:center; gap:.6rem;
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.82rem;
}
.perc-controls select{
  font:inherit; padding:.35rem .5rem; background:var(--paper); color:var(--text); border:1px solid var(--line);
}
.perc-controls input[type="range"]{width:100%;}
.perc-controls output{text-align:right;}

.perc-table{width:100%; border-collapse:collapse; font-size:.85rem; margin-top:.6rem;}
.perc-table th, .perc-table td{
  border:1px solid var(--line); padding:.3rem .5rem; text-align:center;
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
}
.perc-table th{color:var(--text-dim); font-weight:400;}
.perc-table td.ok{color:var(--good);}
.perc-table td.bad{color:var(--bad);}

.perc-score{margin-top:.6rem; font-size:.9rem;}
.perc-score b{font-family:Consolas,"SF Mono",ui-monospace,monospace;}