.dither-bg {
  --yellow: #fc3;
  background: #222;
  padding: 1rem;
}

[js-dither] canvas {
  image-rendering: pixelated;
  mix-blend-mode: lighten;
}

[js-dither] svg {
  position: relative; /* render tall stacks on top of the canvas */
  margin: -19em -1em 1em calc(-1em - 1px); /* make extra space at the top left for stacks */
  padding: 20em 1em 0 1em;
  width: calc(100% + 2em);
  max-width: none;
}

[js-dither] text {
  fill: white;
  font: 400 .5px "Geogrotesque";
  letter-spacing: -.05em;
  text-anchor: middle;
  dominant-baseline: middle;
}

[js-dither] .invalid { fill: #777; }
[js-dither] .origin rect { fill: var(--yellow) }
[js-dither] .origin text { fill: #222 }
[js-dither] .grid { fill: #444; }

[js-dither] .pile {
  fill: #444;
  cursor: pointer;
}

circle.tap {
  cursor: grab;
  fill: #ccc;
  stroke: #888;
  stroke-width: .05px;
}

circle.tap.dragging {
  cursor: grabbing;
}

circle.tap.inert {
  cursor: default;
  pointer-events: none;
}

[js-dither] .buttons {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: .5rem;
  font: 400 16px "Merriweather Sans";
}

[js-dither] button {
  appearance: none;
  padding: .2rem .3rem .1rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  font: inherit;
  color: var(--yellow);
  background: none;
}

[js-dither] #zoom {
  display: flex;
  align-items: baseline;
  color: var(--yellow);
}

[js-dither] #zoom span {
  /* match the button metrics */
  padding: .2rem .3rem .1rem;
}

[js-dither] #zoom input {
  appearance: none;
  margin: 0;
  background: none;
  align-self: center;
}

[js-dither] #zoom input::-webkit-slider-runnable-track {
  appearance: none;
  background-color: #555;
  background-image: radial-gradient(#999, #999 2px, #444 2px);
  background-size: 20%;
  border-radius: 2em;
}

[js-dither] #zoom input::-webkit-slider-thumb {
  appearance: none;
  width:2em;
  height:2em;
  border-radius: 2em;
  background-color: var(--yellow);
}