/* Sequencer Controls Styling */

/* Transport Controls Container */
.seq-transport-controls {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-left: 19.5px;
  margin-top:19px;
  align-items: flex-start;
  flex-shrink: 0;
}

/* Transport Buttons - Individual Colors */
.seq-transport-button {
  position: relative;
  width: 41px;
  min-width: 41px;
  height: 41px;
  min-height: 41px;
  border: 2.5px solid #35100B;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
  box-sizing: border-box;
}

/* Play Button - Blue */
#seq-play-button {
  background-color: #4E658B;
}

#seq-play-button:hover {
  background-color: #5a7399;
}

#seq-play-button.active {
  background-color: #6680a5;
  box-shadow: 0 0 8px #7a92b8;
  transform: scale(0.98);
}

/* Pause Button - Yellow */
#seq-pause-button {
  background-color: #E5AB5F;
}

#seq-pause-button:hover {
  background-color: #eab773;
}

#seq-pause-button.active {
  background-color: #efc287;
  box-shadow: 0 0 8px #f5d09b;
  transform: scale(0.98);
}

/* Motion Button - Orange */
#seq-motion-button {
  background-color: #CF814D;
}

#seq-motion-button:hover {
  background-color: #d99261;
}

#seq-motion-button.active {
  background-color: #e3a375;
  box-shadow: 0 0 8px #edb489;
  transform: scale(0.98);
}

/* Record Button - Red */
#seq-record-button {
  background-color: #BA5446;
}

#seq-record-button:hover {
  background-color: #c85a46;
}

#seq-record-button.active {
  background-color: #d56f43;
  box-shadow: 0 0 8px #e5846f;
  transform: scale(0.98);
}

#seq-record-button.precount-armed {
  box-shadow: 0 0 10px #f2eed3, 0 0 0 2px rgba(242,238,211,0.9) inset;
}

#seq-record-button .record-precount-label {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #f2eed3;
  letter-spacing: 0.5px;
  pointer-events: none;
}

.seq-transport-button .icon {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 1;
  pointer-events: none;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

.seq-transport-button .small-icon {
  width: 16px;
  height: 16px;
}

.seq-transport-button .medium-icon {
  width: 25px;
  height: 25px;
}

.seq-transport-button.active .icon {
  filter: invert(94%) sepia(8%) saturate(289%) hue-rotate(347deg) brightness(105%) contrast(92%);
}

.seq-transport-button .select-led {
  display: none;
}

.seq-transport-button.active .select-led {
  background-color: #c52a18;
  box-shadow: 0 0 4px #ff0000;
}

/* Transport Button Container (for labeled buttons) */
.seq-transport-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seq-transport-button-container label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  margin-top: 1.5px;
}

/* Top Bar Metronome Knob */
.seq-top-knob-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: 2px;
  margin-left: 22px;
  flex-shrink: 0;
}

/* Quantize Knob Container specific margin */
.seq-top-knob-container:has(#seq-quantize-knob) {
  margin-left: 36px;
}

/* Spread Knob Container specific margin */
.seq-top-knob-container:has(#seq-spread-knob) {
  margin-left: 22px;
}

.seq-top-knob-container label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  position: absolute;
  top: 100%;
  margin-top: 5px;
  top: 46px;
  white-space: nowrap;
}

/* Top Bar Record Button */
.seq-top-record-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 36px;
  position: relative;
  top: 2px;
}

/* Prevent touch-and-hold zoom/callout on interactive sequencer controls */
.seq-button-container > div,
.seq-top-record-button,
.seq-steps-container .seq-step-button,
#seq-record-button,
#seq-motion-button,
#seq-page-down,
#seq-page-up,
.seq-destination-range,
.seq-pitch-column .seq-octave-buttons > div,
.seq-buttons-column .seq-octave-buttons > div,
.seq-direction-buttons > div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.seq-button-container img,
.seq-top-record-button img,
.seq-direction-label-icons img,
.seq-chorus-button img,
#seq-record-button img,
#seq-motion-button img,
#seq-page-down img,
#seq-page-up img {
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.seq-top-record-button {
  width: 25px;
  min-width: 25px;
  height: 41px;
  min-height: 41px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #CF814D;
  color: #f2eed3;
  border: 2.5px solid #35100B;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.seq-top-record-button:hover {
  background-color: #d99261;
}

.seq-top-record-button.active {
  background-color: #b7352c;
  box-shadow: 0 0 10px rgba(183, 53, 44, 0.8);
  color: #ffffff;
}

.seq-top-record-button.active:hover {
  background-color: #c7473f;
}

.seq-top-record-button .icon {
  width: 16px;
  height: 16px;
  filter: invert(21%) sepia(10%) saturate(1289%) hue-rotate(334deg) brightness(93%) contrast(88%);
  transition: filter 0.2s;
}

.seq-top-record-button.active:not(.simple-mode) .icon {
  filter: brightness(0) invert(1);
}

.seq-top-record-button.simple-mode .icon,
.seq-top-record-button.active.simple-mode .icon {
  filter: invert(38%) sepia(11%) saturate(1233%) hue-rotate(178deg) brightness(90%) contrast(90%);
}

.seq-top-record-container label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  position: absolute;
  top: 100%;
  margin-top: 1.5px;
  white-space: nowrap;
}

/* Arrow Icon Between Step Rec and Steps */
.seq-steps-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  position: relative;
  top: 2px;
}

.seq-steps-arrow-icon .arrow-icon {
  width: 18px;
  height: 18px;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

/* Step Buttons Container */
.seq-steps-container {
  display: flex;
  flex-direction: row;
  gap: 0;
  margin-left: 10px;
  position: relative;
  top: 2px;
  flex-shrink: 0;
}

/* Individual Step Buttons - Default Yellow */
.seq-step-button {
  width: 27.29px;
  min-width: 27.29px;
  height: 41px;
  min-height: 41px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #E5AB5F;
  color: #35100B;
  border: 2.5px solid #35100B;
  border-right-width: 0;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-weight: 900;
  transition: background-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  position: relative;
}

.seq-step-button:first-child {
  border-radius: 3px 0 0 3px;
}

.seq-step-button:last-child {
  border-radius: 0 3px 3px 0;
  border-right-width: 2.5px;
}

.seq-step-button:hover {
  background-color: #d99261;
}

.seq-step-button.active {
  background-color: #e3a375;
  box-shadow: 0 0 8px #edb489;
  color: #f2eed3;
}

.seq-step-button.active {
  background-color: #efc287;
  box-shadow: 0 0 8px #f5d09b;
  color: #f2eed3;
}

.seq-step-button.has-notes::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 3px;
  border-radius: 2px;
  background-color: #c03535;
}

.seq-step-button.active.has-notes::after {
  background-color: #ff5e5b;
}

.seq-step-button.has-modulation::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 3px;
  height: 3px;
  border-radius: 2px;
  background-color: #597097;
}

.seq-step-button.active.has-modulation::before {
  background-color: #7fa3c7;
}

/* Page Backward Arrow Icon */
.seq-page-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  position: relative;
  top: 2px;
  flex-shrink: 0;
}

.seq-page-arrow-icon .arrow-icon {
  width: 18px;
  top: 1px;
  height: 18px;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

/* Page Section Wrapper - contains everything */
.seq-page-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10px;
  position: relative;
}

/* Page Button Container - only buttons for vertical centering */
.seq-page-button-container {
  display: flex;
  top: 1.5px;
  align-items: center;
  margin-left: 10px;
  position: relative;
  flex-shrink: 0;
}

/* Page Bottom - dots and label positioned absolutely below buttons */
.seq-page-bottom {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 7px;
}

/* Page Buttons - Split into two buttons - Orange */
.seq-page-buttons {
  display: flex;
  width: 46px;
  min-width: 46px;
  height: 26px;
  min-height: 26px;
  gap: 0;
  box-sizing: border-box;
}

.seq-page-down,
.seq-page-up {
  flex: 1;
  min-width: 20px;
  background-color: #CF814D;
  border: 2.5px solid #35100B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, transform 0.1s;
  box-sizing: border-box;
  color: #35100B;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 900;
  box-sizing: border-box;
}

.seq-page-down {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right-width: 1.25px;
}

.seq-page-up {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left-width: 1.25px;
}

.seq-page-down:hover,
.seq-page-up:hover {
  background-color: #d99261;
}

.seq-page-down:active,
.seq-page-up:active {
  transform: scale(0.95);
}

.seq-page-down .direction-button-icon,
.seq-page-up .direction-button-icon {
  width: 12px;
  height: 12px;
  opacity: 1;
  pointer-events: none;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

/* Page dots container (4 dots) */
.seq-page-dots-container {
  display: flex;
  justify-content: space-between;
  width: 36px;
  padding: 0 1px;
  margin-bottom: 0px;
}

/* Label styling for page section */
.seq-page-bottom label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  text-align: center;
}

/* Sequence Save/Load Container */
.seq-sequence-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 23px;
  position: relative;
  flex-shrink: 0;
}

/* State buttons specific margin */
.seq-sequence-container:has(#seq-state-save-button) {
  margin-left: 38px;
}

.seq-sequence-buttons {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  top: 2px;
}

.seq-sequence-button {
  background-color: #4E658B;
  border: 2.5px solid #35100B;
  border-radius: 5px;
  padding: 8px;
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  line-height: 0.9;
  color: #f2eed3;
  cursor: pointer;
  height: 21px;
  min-height: 21px;
  width: 45.57px;
  min-width: 45.57px;
  box-sizing: border-box;
  transition: background-color 0.2s, box-shadow 0.2s;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  flex-shrink: 0;
}

/* Sequence buttons (SAVE/LOAD for sequences) - Orange with dark brown text */
#seq-save-button,
#seq-load-button {
  background-color: #CF814D;
  color: #35100B;
}

#seq-save-button:hover,
#seq-load-button:hover {
  background-color: #d99261;
}

#seq-save-button:active,
#seq-load-button:active {
  background-color: #e3a375;
  box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.244);
}

/* State buttons (SAVE/LOAD for state) - Blue with light text */
#seq-state-save-button,
#seq-state-load-button {
  background-color: #4E658B;
  color: #f2eed3;
}

#seq-state-save-button:hover,
#seq-state-load-button:hover {
  background-color: #597097;
}

#seq-state-save-button:active,
#seq-state-load-button:active {
  background-color: #3b5174;
  box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.244);
}

.seq-sequence-button:hover {
  background-color: #597097;
}

.seq-sequence-button:active {
  background-color: #3b5174;
  box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.244);
}

.seq-sequence-container label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  text-align: center;
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Sequencer Info Container */
.seq-info-container {
  width: 403px;
  min-width: 403px;
  height: 69px;
  min-height: 69px;
  flex-shrink: 0;
  border: 1px solid #35100B;
  border-radius: 10px;
  left: 19px;
  box-sizing: border-box;
  position: relative;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  gap: 8px;
}

/* Spread Knob Container */
.seq-info-knob-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.seq-info-knob-container label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  position: absolute;
  bottom: -9px;
  white-space: nowrap;
}

/* State Save/Load Container */
.seq-info-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.seq-info-state-buttons {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.seq-info-state-button {
  background-color: #4E658B;
  border: 2.5px solid #35100B;
  border-radius: 5px;
  padding: 8px;
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  line-height: 0.9;
  color: #f2eed3;
  cursor: pointer;
  height: 21px;
  min-height: 21px;
  width: 45.57px;
  min-width: 45.57px;
  box-sizing: border-box;
  transition: background-color 0.2s, box-shadow 0.2s;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  flex-shrink: 0;
}

.seq-info-state-button:hover {
  background-color: #597097;
}

.seq-info-state-button:active {
  background-color: #3b5174;
  box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.244);
}

.seq-info-state-container label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  text-align: center;
  position: absolute;
  bottom: -14px;
  white-space: nowrap;
}

/* Info Button Container (wraps button and label) */
.seq-info-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

/* Info Chorus-Style Buttons */
.seq-info-button {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  background-color: #CF814D;
  border: 2.5px solid #35100B;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}

.seq-info-button:hover {
  background-color: #d69061;
}

.seq-info-indicator {
  color: #35100B;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 18px;
  transition: color 0.2s;
  position: absolute;
}

.seq-info-indicator.first {
  left: 13px;
}

.seq-info-indicator.second {
  right: 13px;
}

.seq-info-button.state-1 .seq-info-indicator.first {
  color: #f2eed3;
}

.seq-info-button.state-2 .seq-info-indicator.first,
.seq-info-button.state-2 .seq-info-indicator.second {
  color: #f2eed3;
}

.seq-info-button.state-1,
.seq-info-button.state-2 {
  box-shadow: 0 0 8px rgba(207, 129, 77, 0.8);
}

.seq-info-button-label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  text-align: center;
  white-space: nowrap;
  position: absolute;
  bottom: -14px;
}

/* Sequencer Chorus-Style Buttons (without container) */
.seq-chorus-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 18px;
  position: relative;
  flex-shrink: 0;
}

/* VEL/AFTER button container specific margin */
.seq-chorus-button-container:has(#seq-vel-after-button) {
  margin-left: 28px;
}

.seq-chorus-button {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  background-color: #CF814D;
  border: 2.5px solid #35100B;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Individual Chorus Button Colors */
#seq-vel-after-button {
  background-color: #E5AB5F;
}

#seq-tips-button {
  background-color: #CF814D;
}

#seq-precision-button {
  background-color: #BA5446;
}

#seq-link-params-button {
  background-color: #6B8F53;
}

.seq-chorus-button:hover {
  background-color: #d69061;
}

#seq-vel-after-button:hover {
  background-color: #eab773;
}

#seq-tips-button:hover {
  background-color: #d99261;
}

#seq-tips-button.active {
  background-color: #e4a26f;
  box-shadow: 0 0 8px rgba(234, 183, 115, 0.85);
}

#seq-tips-button.active .seq-chorus-icon {
  filter: invert(100%) sepia(5%) saturate(0%) hue-rotate(14deg) brightness(110%) contrast(105%);
}

#seq-precision-button:hover {
  background-color: #c85a46;
}

#seq-link-params-button:hover {
  background-color: #729759;
}

/* Active glow for Link Params to match other green toggles */
#seq-link-params-button.active {
  background-color: #7da263;
  box-shadow: 0 0 8px rgba(158, 198, 129, 0.85);
}

#seq-link-params-button.active .seq-chorus-icon {
  filter: invert(94%) sepia(8%) saturate(289%) hue-rotate(347deg) brightness(105%) contrast(92%);
}

.seq-chorus-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 1;
  pointer-events: none;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
  z-index: 1;
}

.seq-tips-icon {
  font-family: "Nunito", sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #35100B;
  width: auto;
  height: auto;
  filter: none;
}

.seq-chorus-indicator {
  color: #35100B;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 18px;
  transition: color 0.2s;
  position: absolute;
}

.seq-chorus-indicator.first {
  left: 13px;
}

.seq-chorus-indicator.second {
  right: 13px;
}

.seq-chorus-button.state-1 .seq-chorus-indicator.first {
  color: #f2eed3;
}

.seq-chorus-button.state-2 .seq-chorus-indicator.first,
.seq-chorus-button.state-2 .seq-chorus-indicator.second {
  color: #f2eed3;
}

.seq-chorus-button.state-1,
.seq-chorus-button.state-2 {
  box-shadow: 0 0 8px rgba(207, 129, 77, 0.8);
}

#seq-vel-after-button.state-1,
#seq-vel-after-button.state-2 {
  box-shadow: 0 0 8px rgba(229, 171, 95, 0.8);
}

#seq-tips-button.state-1,
#seq-tips-button.state-2 {
  box-shadow: 0 0 8px rgba(207, 129, 77, 0.8);
}

#seq-precision-button.state-1,
#seq-precision-button.state-2 {
  box-shadow: 0 0 8px rgba(186, 84, 70, 0.8);
}

#seq-link-params-button.state-1,
#seq-link-params-button.state-2 {
  box-shadow: 0 0 8px rgba(107, 143, 83, 0.8);
}

.seq-chorus-button-label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  text-align: center;
  white-space: nowrap;
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
}

/* Common button container */
.seq-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6px;
}

.seq-button-container label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  text-align: center;
  margin-top: 1.5px;
}

/* HOLD Button - Green */
.seq-hold-button {
  position: relative;
  width: 46px; /* Total width including borders */
  height: 26px; /* Total height including borders */
  background-color: #6B8F53;
  border: 2.5px solid #35100B;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
  color: #35100B;
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  box-sizing: border-box;
}

.seq-hold-button:hover {
  background-color: #729759;
}

.seq-hold-button.active {
  background-color: #7ea05f;
  color: #f2eed3;
  box-shadow: 0 0 15px #8aaa6d;
  transform: scale(0.98);
}

.seq-hold-button .icon {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 1;
  pointer-events: none;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

.seq-hold-button.active .icon {
  filter: invert(94%) sepia(8%) saturate(289%) hue-rotate(347deg) brightness(105%) contrast(92%);
}

/* Octave Buttons - Split into two buttons */
.seq-octave-buttons {
  display: flex;
  width: 46px; /* Total width including borders to match hold button */
  height: 26px; /* Total height including borders to match hold button */
  gap: 0;
  margin-bottom: 5px;
  box-sizing: border-box;
}

/* First column octave buttons - yellow */
.seq-buttons-column .seq-octave-down,
.seq-buttons-column .seq-octave-up {
  flex: 1;
  background-color: #E5AB5F;
  border: 2.5px solid #35100B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, transform 0.1s;
  color: #35100B;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 900;
  box-sizing: border-box;
}

.seq-buttons-column .seq-octave-down:hover,
.seq-buttons-column .seq-octave-up:hover {
  background-color: #eab773;
}

/* Pitch column octave buttons - green */
.seq-pitch-column .seq-octave-down,
.seq-pitch-column .seq-octave-up {
  flex: 1;
  background-color: #6B8F53;
  border: 2.5px solid #35100B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, transform 0.1s;
  color: #35100B;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 900;
  box-sizing: border-box;
}

.seq-pitch-column .seq-octave-down:hover,
.seq-pitch-column .seq-octave-up:hover {
  background-color: #729759;
}

/* Octave button borders and corners */
.seq-buttons-column .seq-octave-down,
.seq-pitch-column .seq-octave-down {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right-width: 1.25px;
}

.seq-buttons-column .seq-octave-up,
.seq-pitch-column .seq-octave-up {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left-width: 1.25px;
}

.seq-buttons-column .seq-octave-down:active,
.seq-buttons-column .seq-octave-up:active,
.seq-pitch-column .seq-octave-down:active,
.seq-pitch-column .seq-octave-up:active {
  transform: scale(0.95);
}

/* Dot Indicators */
.seq-dots-container {
  display: flex;
  justify-content: space-between;
  width: 44px; /* Narrower width to bring dots closer */
  padding: 0 1px;
}

.seq-dot {
  width: 4px; /* Smaller dots */
  height: 4px; /* Smaller dots */
  border-radius: 50%;
  background-color: #35100B;
  opacity: 0.7;
  transition: all 0.3s;
}

.seq-dot.active {
  background-color: #c52a18;
  opacity: 1;
  box-shadow: 0 0 6px #ff0000, 0 0 10px #ff0000;
}

/* Direction Buttons - Split into two buttons - Orange */
.seq-direction-buttons {
  display: flex;
  width: 46px; /* Total width including borders to match hold button */
  height: 26px; /* Total height including borders to match hold button */
  gap: 0;
  margin-bottom: 5px;
  box-sizing: border-box;
}

.seq-direction-down,
.seq-direction-up {
  flex: 1;
  background-color: #CF814D;
  border: 2.5px solid #35100B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, transform 0.1s;
  color: #35100B;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 900;
  box-sizing: border-box;
}

.seq-direction-down {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right-width: 1.25px;
}

.seq-direction-up {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left-width: 1.25px;
}

.seq-direction-down:hover,
.seq-direction-up:hover {
  background-color: #d99261;
}

.seq-direction-down:active,
.seq-direction-up:active {
  transform: scale(0.95);
}

.direction-button-icon {
  width: 12px;
  height: 12px;
  opacity: 1;
  pointer-events: none;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

/* Direction label icons */
.seq-direction-label-icons {
  display: flex;
  gap: 2.8px; /* Reduced gap */
  align-items: center;
  justify-content: center;
  width: 44px; /* Match dots container width */
}

.label-icon {
  width: 7px; /* Smaller icons */
  height: 7px; /* Smaller icons */
  opacity: 1;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

.label-icon svg,
svg.label-icon {
  stroke: #35100B;
  width: 6px; /* Smaller icons */
  height: 6px; /* Smaller icons */
}

/* ARP Button - Red */
.seq-arp-button {
  position: relative;
  width: 41px;
  height: 41px;
  background-color: #BA5446;
  border: 2.5px solid #35100B;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.seq-arp-button:hover {
  background-color: #c85a46;
}

.seq-arp-button.active {
  background-color: #d56f43;
  box-shadow: 0 0 8px #e5846f;
  transform: scale(0.98);
}

.seq-arp-button .icon {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 1;
  pointer-events: none;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

.seq-arp-button.active .icon {
  filter: invert(94%) sepia(8%) saturate(289%) hue-rotate(347deg) brightness(105%) contrast(92%);
}

/* Adjust spacing for sequencer vertical container */
.sequencer-vertical {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  width: auto;
  min-width: auto;
}

/* Button column - holds all the buttons vertically */
.seq-buttons-column {
  display: flex;
  flex-direction: column;
}

/* Sequencer Destination Column */
.seq-destination-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Destination Slider Container - same style as LFO destination */
.seq-destination-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 5px;
}

.seq-destination-range {
  -webkit-appearance: none;
  appearance: none;
  width: 129px;
  height: 10px;
  background: transparent;
  transform: rotate(270deg);
  transform-origin: left top;
  position: absolute;
  margin-left: 100px;
  margin-right: 0;
  margin-top: 129px;
  cursor: pointer;
  z-index: 2;
}

/* Custom track styling */
.seq-destination-range::-webkit-slider-runnable-track {
  height: 10px;
  background: #35100B;
  border-radius: 8px;
  border: none;
}

.seq-destination-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #35100B;
  width: 24px;
  height: 26px;
  cursor: pointer;
  border-radius: 5px;
  margin-top: -8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background-image: linear-gradient(to top, #f2eed3 30%, transparent 30%, transparent 70%, #f2eed3 70%);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.seq-destination-range::-moz-range-track {
  height: 10px;
  background: #35100B;
  border-radius: 8px;
  border: none;
}

.seq-destination-range::-moz-range-thumb {
  background: #35100B;
  width: 24px;
  height: 26px;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background-image: linear-gradient(to top, #f2eed3 30%, transparent 30%, transparent 70%, #f2eed3 70%);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Destination Ticks */
.seq-destination-ticks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 129px;
  margin-left: 40px;
  margin-bottom: 0px;
  pointer-events: none;
  z-index: 1;
}

.seq-destination-ticks .tick-with-label {
  display: flex;
  align-items: center;
  height: calc(100% / 6);
  margin-left: 13px;
}

.seq-destination-ticks .tick {
  width: 5px;
  height: 1.9px;
  background-color: #35100B;
}

.seq-destination-ticks .tick-label {

  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  white-space: nowrap;
  transition: color 0.2s;
}

/* Routed destination label - blue color when destination has active routing */
.seq-destination-ticks .tick-label.routed {
  color: #597097;
}

.seq-dest-label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  margin-top: 5px;
}

/* Select Button - Blue */
.seq-select-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seq-select-button {
  position: relative;
  width: 41px;
  height: 41px;
  background-color: #4E658B;
  border: 2.5px solid #35100B;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.seq-select-button:hover {
  background-color: #5a7399;
}

.seq-select-button.active {
  background-color: #6680a5;
  box-shadow: 0 0 8px #7a92b8;
  transform: scale(0.98);
}

.seq-select-button .icon {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 1;
  pointer-events: none;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

.seq-select-button.active .icon {
  filter: invert(94%) sepia(8%) saturate(289%) hue-rotate(347deg) brightness(105%) contrast(92%);
}

.seq-select-button .select-led {
  display: none;
}

.seq-select-button.active .select-led {
  background-color: #c52a18;
  box-shadow: 0 0 4px #ff0000;
}

.seq-select-button-container label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  margin-top: 1px;
}

/* Tempo/Metronome Column */
.seq-tempo-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Metronome Button - Yellow */
.seq-metronome-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seq-metronome-button {
  position: relative;
  width: 41px;
  height: 41px;
  background-color: #E5AB5F;
  border: 2.5px solid #35100B;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.seq-metronome-button:hover {
  background-color: #eab773;
}

.seq-metronome-button.active {
  background-color: #efc287;
  box-shadow: 0 0 8px #f5d09b;
  transform: scale(0.98);
}

.seq-metronome-button .icon {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 1;
  pointer-events: none;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

.seq-metronome-button.active .icon {
  filter: invert(94%) sepia(8%) saturate(289%) hue-rotate(347deg) brightness(105%) contrast(92%);
}

.seq-metronome-button .select-led {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.3s;
}

.seq-metronome-button.active .select-led {
  background-color: #c52a18;
  box-shadow: 0 0 4px #ff0000;
}

.seq-metronome-button-container label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.seq-metronome-button-container .tap-label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  margin-top: 1.5px;
  margin-bottom: 2px;
}

.seq-metronome-button-container .arrow-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -2px;
}

.seq-metronome-button-container .arrow-icon {
  width: 15px;
  height: 15px;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

/* Tempo and Division Knobs use existing .knob-container styling */
.seq-tempo-column .knob-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seq-tempo-column .knob-container label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  margin-top: 5px;
}

/* Division with Arrow Container */
.seq-division-with-arrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

/* Forward Arrow Icon */
.seq-forward-icon {
  position: absolute;
  left: -24px;
  right: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 20px;
}

.seq-forward-icon .forward-icon {
  width: 18px;
  height: 18px;
  filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%);
}

/* Pitch Bend Column */
.seq-pitch-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10px;
}

/* Pitch Slider Container */
.seq-pitch-slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.seq-pitch-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 137px;
  writing-mode: vertical-lr;
  direction: rtl;
  cursor: pointer;
  background: #35100B;
  border-radius: 10px;
  border: 2px solid #35100B;
  margin-bottom: 0px;
}

/* WebKit (Chrome, Safari) */
.seq-pitch-slider::-webkit-slider-runnable-track {
  width: 20px;
  background: #35100B;
  border-radius: 10px;
  border: none;
}

.seq-pitch-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 30px;
  background: #5b4343;
  cursor: pointer;
  border-radius: 6px;
  border: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  background-image: linear-gradient(to right, #f2eed3 30%, transparent 30%, transparent 70%, #f2eed3 70%);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Firefox */
.seq-pitch-slider::-moz-range-track {
  width: 20px;
  background: #35100B;
  border-radius: 10px;
  border: none;
}

.seq-pitch-slider::-moz-range-thumb {
  width: 20px;
  height: 30px;
  background: #5b4343;
  cursor: pointer;
  border-radius: 6px;
  border: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  background-image: linear-gradient(to right, #f2eed3 30%, transparent 30%, transparent 70%, #f2eed3 70%);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: center;
}

.seq-pitch-slider-container label {
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  font-weight: 750;
  color: #35100B;
  margin-top: 0px;
}