.sequencer {
  background: #fff;
  color: #000;
  padding: 20px 20px 20px 20px; /* top, right, bottom padding, flush left */
  min-width: 500px;
  display: flex;
  flex-direction: column; /* Stack rows vertically */
}

.sequencer-container {
  min-width: 500px;
}

.row {
  display: flex;
  align-items: center;
}

.step-labels {
  order: 1; /* Move step labels to the bottom of the .sequencer container */
}

.instrument-row {
  order: 0; /* Keep instrument rows above the labels */
}

.label, .step {
  flex: 1 1 0;
  text-align: center;
  font-weight: bold;
  border: 1px solid #000;
  background: #fff;
  box-sizing: border-box;
  padding: 5px 0;
}

.step-labels .label {
  border: none;               /* Remove all borders */
  border-top: 1px solid #000; /* Add just the top border */
}

.instrument-row {
  align-items: center;
}

.step {
  cursor: pointer;
  flex: 1 1 0;
  text-align: center;
  font-weight: bold;
  border: 1px solid #000;
  background: #fff;
  box-sizing: border-box;

  /* Correct spelling: 'aspect-ratio' */
  aspect-ratio: 1;

  /* Remove vertical padding so the box can remain a perfect square */
  /* padding: 5px 0;  <- Remove this line */

  display: flex;           /* Use flex to center the image inside the cell */
  align-items: center;
  justify-content: center;
}

/* Ensure any images placed inside a .step scale down to fit */
.step img {
  max-height: 100%;  /* Image will scale down to fit the cell's height */
  width: auto;        /* Width adjusts proportionally */
}

.current-step {
  background: #ddd;
  transition: background 0.1s;
}