span[data-color="0"] { background-color: rgb(0, 0, 0); }
span[data-color="1"] { background-color: rgb(96, 96, 96); }
span[data-color="2"] { background-color: rgb(128, 128, 128); }
span[data-color="3"] { background-color: rgb(196, 196, 196); }
span[data-color="4"] { background-color: rgb(220, 220, 220); }
.editor span:not([data-color]) { background-color: white; }
.editor > div { background-color:#e0e0e0 }
.palette span { border: 1px solid #ccc; }
.palette .selected { border-color: white; outline: 1px solid black; }

@media (prefers-color-scheme: dark) {
  span[data-color="0"] { background-color: rgb(196, 196, 196); }
  span[data-color="1"] { background-color: rgb(132, 132, 132); }
  span[data-color="2"] { background-color: rgb(112, 112, 112); }
  span[data-color="3"] { background-color: rgb(88, 88, 88); }
  span[data-color="4"] { background-color: rgb(48, 48, 48); }
  .editor span:not([data-color]) { background-color: rgb(13, 13, 13); }
  .editor > div { background-color:rgb(30, 30, 30) }
  .palette span { border: 1px solid rgb(156, 156, 156) }
  .palette .selected { border-color: rgb(13, 13, 13); outline: 1px solid rgb(196, 196, 196); }
}

.editor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.preview {
  text-align: center;
  margin-bottom: 2rem;
}

.editor > div {
  display: inline-grid;
  gap: 1px;
  padding: 1px;
  width: min(100%, calc((100vh - 5rem - 10px) / 2));
  touch-action: pinch-zoom;
}

.preview > div {
  display: inline-grid;
  margin-right: 1px;
}

.editor > div > span {
  padding-bottom: 100%;
  cursor: pointer;
}

.preview > div > span {
  padding-bottom: 100%;
}

#pixel-by-pixel .editor > div {
  grid-template-columns: repeat(5, 1fr);
}

#pixel-by-pixel .preview > div {
  grid-template-columns: repeat(5, 1px);
}

#scaling-up .editor > div,
#anti-aliasing .editor > div {
  grid-template-columns: repeat(10, 1fr);
}

#scaling-up .preview > div,
#anti-aliasing .preview > div {
  grid-template-columns: repeat(10, 1px);
}

.palette {
  text-align: center;
  margin-top: 2rem;
}

.palette span {
  display: inline-block;
  width: 20px;
  height: 20px;
}