/* PAINT — scoped to .rww-paint so the whole toy can be dropped into any page. */

.rww-paint .toy-stage {
  background: #0a0710;
  aspect-ratio: 16 / 10;
  min-height: 300px;
}
.rww-paint canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  /* stops the browser panning the page while you're drawing on a phone */
  touch-action: none;
}
.rww-paint .spectrum-swatch {
  background: conic-gradient(#ff3b3b, #ffd23b, #4bff6e, #3bd9ff, #6b3bff, #ff3bd0, #ff3b3b);
}
@media (max-width: 900px) {
  .rww-paint .toy-stage { aspect-ratio: 4 / 3; }
}