#canvas {
  image-rendering: pixelated;
  border: 1px solid var(--c3);
}
.controls *:not(input), #table {
  user-select: none;
}
.controls {
  width: 142px;
  display: grid;
  gap: 2px;
}
.controls * {
  box-sizing: border-box;
  height: 34px;
}
.controls *:focus-visible {
  z-index: 1;
}
.controls input {
  width: 100%;
}
#slices {
  display: flex;
  gap: 2px;
}
#slices button {
  width: 100%;
  height: 100%;
}
#signs {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
}
.red {
  background: #e444;
  border: 1px solid #c224;
}
.blue {
  background: #44e4;
  border: 1px solid #22c4;
}
.green {
  background: #4e44;
  border: 1px solid #2c24;
}