.stamp-builder {
  margin-bottom: 1.4rem;
  scroll-margin-top: 1rem;
}

.stamp-builder > summary {
  padding: .85rem clamp(1rem, 3.4vw, 2.6rem);
  background: #34291f;
  color: #f2cc98;
  cursor: pointer;
  font: 1.35rem var(--display);
}

.builder-intro {
  max-width: 69ch;
  margin: .65rem 0;
  color: var(--muted);
}

.builder-workspace {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 4vw, 2.6rem);
  margin-top: 1.25rem;
}

.builder-tools > label:first-child,
.builder-selection > label:first-child { margin-top: 0; }

.builder-tools input[type=file] { max-width: 100%; }

.builder-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  max-height: 27rem;
  overflow-y: auto;
  margin-top: .65rem;
  padding: .15rem;
}

.builder-piece {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: .45rem;
  border: 1px solid #b79a7c;
  border-radius: .25rem;
  background: var(--paper);
  color: var(--brown);
  cursor: pointer;
  text-align: center;
  font-size: .82rem;
}

.builder-piece:hover { background: #ecdbc2; border-color: #846044; }
.builder-piece canvas { display: block; width: min(100%, 120px); height: auto; }

#builder-board {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #b99c7f;
  touch-action: none;
  cursor: grab;
}

#builder-board:active { cursor: grabbing; }
.builder-selection { margin-top: 1rem; }

#builder-transform {
  margin: .85rem 0 0;
  padding: .65rem .8rem .85rem;
  border: 1px solid var(--line);
  border-radius: .25rem;
}

.builder-sliders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem 1rem;
}

.builder-sliders label { margin: 0; }
.builder-sliders input { display: block; width: 100%; min-height: 32px; accent-color: #78512f; }
#builder-mirror[aria-pressed=true] { background: #4b3526; color: var(--paper); }
#builder-notes { min-height: 4.8rem; }
#builder-forge { width: 100%; margin-top: .85rem; }
#builder-forge:disabled { opacity: .6; cursor: default; }
#builder-status:empty { display: none; }

@media (max-width: 740px) {
  .builder-workspace { grid-template-columns: 1fr; }
  .builder-library { max-height: 16rem; }
}