:root {
  --px: 6px;      /* smallest legible; try 7–9px if you want bigger */
  --gap: 1px;
  --on: #111;
  --off: #f2f2f2;
}

table.pixel {
  border-collapse: separate;
  border-spacing: var(--gap);
  background: transparent;
}

table.pixel td {
  width: var(--px);
  height: var(--px);
  padding: 0;
  background: var(--off);
}

table.pixel td.on {
  background: var(--on);
}

/* Dark theme overrides - when pixel table is in a dark background context */
body:has(#stage) table.pixel td.on {
  background: #fff;
}

body:has(#stage) table.pixel td:not(.on) {
  background: rgba(255, 255, 255, 0.1);
}