.dust-ui { width: min(640px, calc(100vw - 1.7rem)); max-width: 100%; }
.dust-materials, .dust-bar, .dust-brushes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin: 0 0 .6rem;
}
.dust-materials button, .dust-bar button, .dust-brushes button, .dust-confirm button {
  min-height: 44px;
  min-width: 44px;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 2px solid #1a5c36;
  background: #fff;
  color: #1a5c36;
  font: inherit;
  font-weight: 700;
}
.dust-bar button, .dust-confirm button { background: #1a5c36; color: #fff; }
.dust-materials button.is-on, .dust-brushes button.is-on { background: #1a5c36; color: #fff; }
.dust-label { font-weight: 800; color: #1a5c36; }
.dust-status { min-height: 1.4em; margin: 0 0 .5rem; font-weight: 700; color: #1a5c36; }
.dust-confirm { margin: 0 0 .6rem; font-weight: 700; }
.dust-confirm[hidden] { display: none; }
.dust-stage {
  width: 100%;
  touch-action: none;
  margin: 0 0 .8rem;
}
#dust-display {
  width: 100%;
  height: auto;
  display: block;
  background: #140c08;
  border: 3px solid #1a2744;
  touch-action: none;
  cursor: crosshair;
}
.dust-credit { max-width: 40rem; color: #3a4a58; font-size: .95rem; }
.dust-credit a { color: #1a5c36; }
.dust-report { white-space: pre-wrap; max-width: 50rem; }
@media (max-width: 640px) {
  .dust-materials button, .dust-bar button { padding: .35rem .6rem; }
}