* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  background-color: #1e1e2f;
  color: #e0e0e0;
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 15px;
  color: #9d9dff;
  font-size: 1.5rem;
}

h2 {
  color: #9d9dff;
  margin-bottom: 15px;
}

h3 {
  color: #b4b4ff;
  margin-bottom: 8px;
  font-size: 0.9rem;
  text-align: center;
}

.transport-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  background-color: #2a2a40;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.reset-controls {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

#clearButton {
  background-color: #8f5f5f;
}

#clearButton:hover {
  background-color: #af5f5f;
}

#resetButton {
  background-color: #5f8f5f;
}

#resetButton:hover {
  background-color: #5faf5f;
}

.sequencer-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  background-color: #2a2a40;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  overflow-x: auto; /* Allow horizontal scrolling for wider grids */
}

.sequencer-header {
  margin-bottom: 10px;
}

.sequencer-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.sequencer {
  margin-bottom: 20px;
}

.sequence-grid {
  margin-bottom: 15px;
}

#drumGrid {
  display: grid;
  grid-template-columns: auto repeat(64, 1fr);
  grid-template-rows: auto repeat(6, 1fr);
  gap: 2px; /* Slightly smaller gap to fit more cells */
  margin-bottom: 15px;
  overflow-x: auto; /* Allow horizontal scrolling for wider grid */
  min-width: 100%; /* Ensure the grid spans the full width */
}

#bassGrid {
  display: grid;
  grid-template-columns: auto repeat(64, 1fr);
  grid-template-rows: auto repeat(8, 1fr);
  gap: 2px; /* Slightly smaller gap to fit more cells */
  margin-bottom: 15px;
  overflow-x: auto; /* Allow horizontal scrolling for wider grid */
  min-width: 100%; /* Ensure the grid spans the full width */
}

/* Bar and note label styles */
.bar-label {
  text-align: center;
  font-size: 0.8rem;
  color: #9d9dff;
  padding: 4px 0;
  border-bottom: 1px solid #5f5f7f;
  border-right: 1px solid #5f5f7f;
  background-color: #2a2a45;
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
}

.corner-cell {
  background-color: #2a2a45;
  border-right: 1px solid #5f5f7f;
  border-bottom: 1px solid #5f5f7f;
}

.instrument-label, .note-label {
  font-size: 0.7rem;
  padding-right: 6px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #9d9dff;
  background-color: #2a2a45;
  border-right: 1px solid #5f5f7f;
  min-width: 60px;
  white-space: nowrap;
}

/* Make the grid lines more visible for navigation */
.sequence-grid {
  border: 1px solid #5f5f7f;
  background-color: #252538;
}

/* Add visual cues for bar and beat divisions */
.bar-start {
  border-left: 2px solid #7f7fff;
}

/* Highlight different bars with subtly different backgrounds */
[data-step^="0"], [data-step^="1"], [data-step^="2"], [data-step^="3"],
[data-step^="4"], [data-step^="5"], [data-step^="6"], [data-step^="7"],
[data-step^="8"], [data-step^="9"], [data-step^="10"], [data-step^="11"],
[data-step^="12"], [data-step^="13"], [data-step^="14"], [data-step^="15"] {
  background-color: #3a3a50;
}

[data-step^="16"], [data-step^="17"], [data-step^="18"], [data-step^="19"],
[data-step^="20"], [data-step^="21"], [data-step^="22"], [data-step^="23"],
[data-step^="24"], [data-step^="25"], [data-step^="26"], [data-step^="27"],
[data-step^="28"], [data-step^="29"], [data-step^="30"], [data-step^="31"] {
  background-color: #3a3a58;
}

[data-step^="32"], [data-step^="33"], [data-step^="34"], [data-step^="35"],
[data-step^="36"], [data-step^="37"], [data-step^="38"], [data-step^="39"],
[data-step^="40"], [data-step^="41"], [data-step^="42"], [data-step^="43"],
[data-step^="44"], [data-step^="45"], [data-step^="46"], [data-step^="47"] {
  background-color: #3d3a50;
}

[data-step^="48"], [data-step^="49"], [data-step^="50"], [data-step^="51"],
[data-step^="52"], [data-step^="53"], [data-step^="54"], [data-step^="55"],
[data-step^="56"], [data-step^="57"], [data-step^="58"], [data-step^="59"],
[data-step^="60"], [data-step^="61"], [data-step^="62"], [data-step^="63"] {
  background-color: #3d3a58;
}

.beat-start {
  border-left: 1px solid #5f5f7f;
}

.sequence-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px; /* Smaller radius for more compact look */
  cursor: pointer;
  transition: background-color 0.2s;
  min-width: 12px; /* Smaller minimum width to fit more cells */
  min-height: 12px; /* Smaller minimum height to fit more cells */
}

.sequence-cell:hover {
  background-color: #4a4a60;
}

.sequence-cell.active {
  background-color: #5f5fff !important;
}

.sequence-cell.playing {
  box-shadow: 0 0 8px #9d9dff;
  z-index: 1;
}

/* Styling for active bar indicators */
.bar-label.active-bar {
  background-color: #3a3a70;
  font-weight: bold;
  color: #ffffff;
  border-bottom: 2px solid #7f7fff;
}

.kick-cell.active {
  background-color: #ff5f5f !important;
}

.snare-cell.active {
  background-color: #5fff5f !important;
}

.hihat-cell.active {
  background-color: #ffff5f !important;
}

.openhat-cell.active {
  background-color: #ffee5f !important;
}

.highTom-cell.active {
  background-color: #ff7f5f !important;
}

.lowTom-cell.active {
  background-color: #ff5f7f !important;
}

.bass-cell.active {
  background-color: #ff9d5f !important;
}

.controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

button {
  background-color: #5f5fff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #4a4aff;
}

.tempo-control, .pattern-selector {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pattern-selector select {
  background-color: #3a3a58;
  color: #e0e0e0;
  border: 1px solid #5f5f7f;
  border-radius: 4px;
  padding: 5px 10px;
  min-width: 150px;
  font-size: 0.9rem;
  cursor: pointer;
}

.controls-container {
  background-color: #2a2a40;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.instrument-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.instrument-panel {
  background-color: #323248;
  padding: 12px;
  border-radius: 8px;
  flex: 1;
  min-width: 150px;
}

.compact-panel {
  padding: 8px;
  min-width: 120px;
}

.param-control {
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 3px;
  font-size: 0.8rem;
  color: #b4b4ff;
}

input[type="range"] {
  width: 100%;
  background-color: #4a4a60;
  height: 6px;
  border-radius: 3px;
  outline: none;
  appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background-color: #7f7fff;
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background-color: #7f7fff;
  border-radius: 50%;
  cursor: pointer;
}

@media (max-width: 768px) {
  .instrument-controls {
    flex-direction: column;
  }
  
  .compact-panel {
    min-width: 100%;
  }
}