.checkerboard {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 10px 10px;   /* smaller squares for swatch */
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
  border: 1px solid rgb(226, 226, 226);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  gap: 5px;
}

.swatch {
  width: 25px;
  height: 25px;
  cursor: pointer;
  border-radius: 4px;
}

#canvasWrapper {
  display: flex;
  justify-content: center;
  /* horizontal center */
  align-items: center;
  /* vertical center */
  min-height: 400px;
  /* the height to center within */

  /* background checkerboard */
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

#canvasBox {
  /* layout */
  width: 100%;
  box-sizing: border-box;
  padding: 30px;

  /* text */
  display: block;
  /* block, not flex */
  text-align: center;
  /* horizontal text alignment */
  font-size: 48px;
  line-height: 1.2;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #333;
  white-space: pre-wrap;
  /* allow line breaks */
  overflow-wrap: break-word;
  /* wrap long words */


}

/* Placeholder text for empty contenteditable */
#canvasBox:empty:before {
  content: attr(data-placeholder);
  color: #9aa0a6;
  pointer-events: none;
  display: block;
}


#canvasBox:focus {
  outline: none;
}

.export-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}