/* The main container uses Flexbox to arrange items in a vertical column. */
.container {
  display: flex;
  flex-direction: column;
  /* Aligns items to the left, which is more reliable than center */
  align-items: flex-start;
  gap: 20px;
  /* Adds space between the canvas and the slider containers */
  margin: 0 auto;
  align-items: center;
  /* Centers the whole container on the page */

}

/* Each slider control is wrapped in a div for proper stacking. */
.slider-control {
  display: flex;
  flex-direction: column;
  /* Stacks the label, input, and span vertically */
  width: 100%;
}

.slider-control label {
  margin-bottom: 5px;
}

#designer-container {
  width: 100%;
  /* follow parent's width so centering is consistent */
  display: flex;
  /* let us center the canvas horizontally */
  justify-content: center;
  /* always center the canvas, whether smaller or larger */
  overflow: auto;
  /* if canvas is bigger, allow scrolling instead of pushing layout */
  box-sizing: border-box;
  /* safe sizing model */
}

/* Reason: let flexbox do the centering. Avoid margins that can interact with overflow. */
#design-main-canvas {
  display: block;
  margin: 0;
  /* no extra margin; parent centers via justify-content */
  border: 2px solid #aaa;
  box-sizing: border-box;
}