body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
}

h1 {
  color: #333;
}

/* 速度、风格、加花小节设置区域 */
div {
  //margin: 10px 0;
}

label {
  margin-right: 5px;
}

input[type="number"] {
  width: 60px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* 音乐风格按钮 */
.style-button {
  margin: 5px;
  padding: 8px 15px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.style-button.active {
  background-color: #008000; /* 绿色 */
  color: white;
}

/* 开始和停止按钮 */
#startButton,
#stopButton {
  margin: 10px;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#startButton:hover,
#stopButton:hover {
  background-color: #2980b9;
}

/* 序列器整体布局 */
#sequencer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.sequencer-row {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}

.step {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  margin: 2px;
  cursor: pointer;
}

/* 修改 active 状态的背景颜色为淡红色 */
.step.active {
  background-color: #ffb6c1; /* 淡红色 */
}

/* 定义播放位置的样式，背景颜色为正常红色 */
.step.playing {
  background-color: #ff0000; /* 正常红色 */
}

#sequencer > div {
  display: flex;
  align-items: center;
}

#sequencer span {
  margin-right: 10px;
  min-width: 50px;
  text-align: right;
}