*{box-sizing:border-box}
html,body{margin:0;background:white;color:black;font:14px Arial,sans-serif}
main{padding:8px}
header{display:flex;align-items:center;gap:12px;min-height:126px;margin-bottom:8px}
.upload{border:1px solid #777;background:#fff;padding:10px 12px;cursor:pointer;white-space:nowrap}
.upload:hover{background:#eee}
.upload.error{border-color:#c00;color:#c00}
input[type=range]{width:160px;accent-color:#111;cursor:pointer}
output{font:12px monospace;min-width:26px}
#chart{display:block;width:min(520px,42vw);height:120px;margin-left:auto}
#boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:5px}
#boards canvas{display:block;width:100%;aspect-ratio:1;background:#fff;border:1px solid #999;image-rendering:pixelated}
@media(max-width:660px){header{min-height:0;flex-wrap:wrap;gap:8px}#chart{order:3;width:100%;margin:0}input[type=range]{flex:1;width:auto}#boards{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:4px}}