@charset "UTF-8";
:root {
  --color-gradient-1: rgb(120, 150, 180);
  --color-gradient-2: rgb(35, 50, 60);
  --color-gradient-3: rgb(40, 60, 75);
  --color-gradient-4: rgb(35, 50, 60);
  --color-gradient-5: rgba(85, 115, 145, 1);
  --cell-size: 60px;
  --cell-gap: 10px;
}

@media (max-width: 1199px) {
  :root {
    --cell-size: 60px;
    --cell-gap: 8px;
  }
}
@media (max-width: 599px) {
  :root {
    --cell-size: 60px;
    --cell-gap: 6px;
  }
}
@media (max-width: 359px) {
  :root {
    --cell-size: 56px;
    --cell-gap: 4px;
  }
}
section.modules .options-center div#vibrato-options .vibrato-sync-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 2px 0;
  padding: 4px 6px;
  border-left: 2px solid #5aa0ff;
  background: rgba(90, 160, 255, 0.06);
  border-radius: 2px;
}

section.modules .options-center div#vibrato-options .vibrato-sync-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  cursor: pointer;
  user-select: none;
}

section.modules .options-center div#vibrato-options .vibrato-sync-toggle input[type=checkbox] {
  margin: 0;
  cursor: pointer;
}

section.modules .options-center div#vibrato-options #vibrato-sync-subdivision {
  width: 100%;
  font-family: "Courier New", monospace;
  font-size: 0.8em;
  padding: 2px 4px;
}

section.modules .options-center div#vibrato-options #vibrato-speed-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bar-navigation {
  margin-top: 12px;
  padding: 12px 14px;
  background: linear-gradient(160deg, #1c2834 0%, #141c26 50%, #101820 100%);
  border-radius: 8px;
  border: 1px solid #2a3a4a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 3px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.bar-nav-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.bar-nav-label {
  color: #7a8ea8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.bar-nav-display {
  color: #f8f7d5;
  font-size: 14px;
  font-weight: 700;
  font-family: "Courier New", monospace;
  background: #060a10;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid #1e2e3e;
  min-width: 40px;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04);
  text-shadow: 0 0 6px rgba(248, 247, 213, 0.3);
}

.bar-nav-follow {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid #3a4a5a;
  border-radius: 4px;
  background: linear-gradient(180deg, #1e2a36, #141e28);
  color: #5a6a7a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
}
.bar-nav-follow.active {
  background: linear-gradient(180deg, #1e4a2e, #143a22);
  color: #7fd87f;
  border-color: #2e6a3e;
  box-shadow: 0 0 8px rgba(127, 216, 127, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 0 4px rgba(127, 216, 127, 0.4);
}
.bar-nav-follow:hover {
  border-color: #5a7a9a;
  color: #8a9aaa;
}

.bar-nav-measures {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.bar-nav-arrow {
  width: 24px;
  height: 32px;
  padding: 0;
  border: 1px solid #2e3e4e;
  border-radius: 4px;
  background: linear-gradient(180deg, #283848, #1a2a36);
  color: #6a7a8a;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.bar-nav-arrow:hover {
  background: linear-gradient(180deg, #3a5a7a, #2a4a6a);
  color: #d0e0f0;
  border-color: #4a6a8a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.bar-nav-arrow:active {
  background: linear-gradient(180deg, #1a2a3a, #283848);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.bar-nav-btn {
  flex: 1;
  height: 36px;
  padding: 0 2px;
  border: 1px solid #222e3a;
  border-radius: 5px;
  background: linear-gradient(180deg, #1a2430 0%, #141c26 40%, #0e1820 100%);
  color: #3e4e5e;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.bar-nav-btn::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a2020;
  border: 1px solid #0a1010;
  transition: all 0.2s ease;
}
.bar-nav-btn.active {
  background: linear-gradient(180deg, #2e5070 0%, #244060 40%, #1a3050 100%);
  color: #c0d8f0;
  border-color: #3a6080;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.bar-nav-btn.active::before {
  background: #4a9ade;
  border-color: #10161a;
  box-shadow: 0 0 4px rgba(74, 154, 222, 0.6), 0 0 8px rgba(74, 154, 222, 0.3);
}
.bar-nav-btn.inactive {
  background: linear-gradient(180deg, #1a2230 0%, #141a24 40%, #10161e 100%);
  color: #4a5a6a;
  border-color: #1e2a36;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.bar-nav-btn.inactive::before {
  background: #525252;
  border-color: #181817;
  box-shadow: 0 0 2px rgba(90, 58, 26, 0.4);
}
.bar-nav-btn.current {
  background: linear-gradient(180deg, rgba(202, 202, 201, 0.25) 0%, rgba(168, 168, 167, 0.25) 40%, rgba(134, 134, 134, 0.25) 100%);
  color: #b3eff1;
  border-color: #214e88;
  box-shadow: 0 0 10px rgba(184, 184, 184, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
  animation: bar-current-pulse 2s ease-in-out infinite;
}
.bar-nav-btn.current::before {
  background: #fffffe;
  border-color: #437392;
  box-shadow: 0 0 4px rgba(231, 231, 231, 0.8), 0 0 10px rgba(218, 217, 217, 0.4);
}
.bar-nav-btn.current.active {
  background: linear-gradient(180deg, rgba(202, 202, 201, 0.65) 0%, rgba(132, 152, 191, 0.65) 40%, rgba(100, 119, 172, 0.65) 100%);
  box-shadow: 0 0 12px rgba(211, 211, 211, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.bar-nav-btn.current.active::before {
  background: #91e6f5;
  box-shadow: 0 0 6px rgba(228, 228, 227, 0.9), 0 0 12px rgba(170, 170, 170, 0.5);
}
.bar-nav-btn.current.inactive {
  background: linear-gradient(180deg, rgba(202, 202, 201, 0.35) 0%, rgba(150, 150, 150, 0.35) 40%, rgba(114, 114, 114, 0.35) 100%);
  color: #e2e2e2;
  border-color: #838383;
  animation: bar-current-pulse 2s ease-in-out infinite;
}
.bar-nav-btn.current.inactive::before {
  background: #adadad;
  border-color: #919191;
  box-shadow: 0 0 3px rgba(189, 189, 189, 0.6), 0 0 6px rgba(155, 155, 155, 0.3);
}
.bar-nav-btn.queued {
  background: linear-gradient(180deg, #3a6a3a 0%, #2a5a2a 40%, #1a4a1a 100%);
  color: #a0f0a0;
  border-color: #4a8a4a;
  animation: bar-queued-blink 0.6s ease-in-out infinite;
}
.bar-nav-btn.queued::before {
  background: #60e060;
  border-color: #70f070;
  box-shadow: 0 0 6px rgba(96, 224, 96, 0.8), 0 0 12px rgba(96, 224, 96, 0.4);
  animation: bar-queued-led-blink 0.6s ease-in-out infinite;
}
.bar-nav-btn.queued.inactive {
  background: linear-gradient(180deg, #2a4a2a 0%, #1e3a1e 40%, #143014 100%);
  color: #70b070;
}
.bar-nav-btn:hover:not(.current):not(.queued) {
  background: linear-gradient(180deg, #3a5878 0%, #2c486a 40%, #1e3858 100%);
  color: #d0e0f0;
  border-color: #4a6a8a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.bar-nav-btn:hover:not(.current):not(.queued)::before {
  background: #89c2f1;
  border-color: #18384e;
  box-shadow: 0 0 6px rgba(106, 176, 232, 0.5);
}
.bar-nav-btn:active {
  background: linear-gradient(180deg, #141c26, #1a2430);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

.bar-nav-btn .bar-nav-btn-label {
  display: inline-block;
}
.bar-nav-btn .bar-nav-length-badge {
  display: none;
  position: absolute;
  bottom: 2px;
  right: 2px;
  min-width: 12px;
  height: 11px;
  padding: 0 2px;
  font-size: 7.5px;
  font-weight: 700;
  line-height: 11px;
  text-align: center;
  color: #1a1a1a;
  background: linear-gradient(180deg, #f0c040 0%, #d89020 100%);
  border: 1px solid #a06010;
  border-radius: 3px;
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
.bar-nav-btn .bar-nav-length-badge.visible {
  display: inline-block;
}

@keyframes bar-current-pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(200, 168, 80, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 14px rgba(200, 168, 80, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
  }
}
@keyframes bar-queued-blink {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(96, 224, 96, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 4px rgba(96, 224, 96, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.2);
  }
}
@keyframes bar-queued-led-blink {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 6px rgba(96, 224, 96, 0.8), 0 0 12px rgba(96, 224, 96, 0.4);
  }
  50% {
    opacity: 0.3;
    box-shadow: 0 0 2px rgba(96, 224, 96, 0.3), 0 0 4px rgba(96, 224, 96, 0.1);
  }
}
.bar-nav-progress {
  display: flex;
  gap: 2px;
  padding: 3px 4px;
  justify-content: center;
}

.bar-step-led {
  width: 100%;
  max-width: 14px;
  height: 4px;
  border-radius: 2px;
  background: rgba(100, 100, 100, 0.25);
  transition: background 0.05s ease, box-shadow 0.05s ease;
}
.bar-step-led.active {
  background: rgb(120, 200, 255);
  box-shadow: 0 0 4px rgba(120, 200, 255, 0.6), 0 0 8px rgba(120, 200, 255, 0.3);
}

.bar-nav-actions {
  display: flex;
  gap: 6px;
}

.bar-nav-action-btn {
  flex: 1;
  padding: 5px 4px;
  border: 1px solid #222e3a;
  border-radius: 5px;
  background: linear-gradient(180deg, #222e3a 0%, #1a242e 40%, #141c26 100%);
  color: #6a7a8a;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.bar-nav-action-btn:hover {
  background: linear-gradient(180deg, #3a4a5a, #2a3a4a);
  color: #c0d0e0;
  border-color: #3a4a5a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.bar-nav-action-btn:active {
  background: linear-gradient(180deg, #141c26, #222e3a);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.bar-nav-action-btn.copied {
  background: linear-gradient(180deg, #1e4a2e, #143a22);
  color: #7fd87f;
  border-color: #2e6a3e;
  box-shadow: 0 0 6px rgba(127, 216, 127, 0.2);
}
.bar-nav-action-btn.pasted {
  background: linear-gradient(180deg, #2a3a6a, #1e2e5a);
  color: #8ab0f0;
  border-color: #3a4a7a;
  box-shadow: 0 0 6px rgba(138, 176, 240, 0.2);
}
.bar-nav-action-btn.cleared {
  background: linear-gradient(180deg, #5a2828, #3a1818);
  color: #d87f7f;
  border-color: #6a3030;
  box-shadow: 0 0 6px rgba(216, 127, 127, 0.2);
}

.bar-nav-stability {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #1a242e;
  align-items: center;
  justify-content: center;
}

.bar-nav-stability .dirty-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  color: #ff5252;
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(255, 82, 82, 0.7);
  animation: dirtyPulse 1.5s ease-in-out infinite;
}
.bar-nav-stability .dirty-indicator.hidden {
  display: none;
}

@keyframes dirtyPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.bar-nav-stability-btn {
  flex: 1;
  position: relative;
  padding: 6px 8px;
  border: 1px solid #222e3a;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.bar-nav-stability-btn.undo-btn {
  background: linear-gradient(180deg, #455a64 0%, #37474f 50%, #263238 100%);
  color: #b0bec5;
  border-color: #546e7a;
}
.bar-nav-stability-btn.undo-btn:hover {
  background: linear-gradient(180deg, #607d8b 0%, #546e7a 50%, #455a64 100%);
  color: #eceff1;
}
.bar-nav-stability-btn.reset-btn {
  background: linear-gradient(180deg, #e65100 0%, #bf360c 50%, #8d2608 100%);
  color: #ffe0b2;
  border-color: #ff6d00;
}
.bar-nav-stability-btn.reset-btn:hover {
  background: linear-gradient(180deg, #ff9800 0%, #f57c00 50%, #e65100 100%);
  color: #fff;
}
.bar-nav-stability-btn.save-btn {
  background: linear-gradient(180deg, #388e3c 0%, #2e7d32 50%, #1b5e20 100%);
  color: #c8e6c9;
  border-color: #4caf50;
}
.bar-nav-stability-btn.save-btn:hover {
  background: linear-gradient(180deg, #4caf50 0%, #43a047 50%, #388e3c 100%);
  color: #fff;
}
.bar-nav-stability-btn:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: translateY(1px);
}

@media (min-width: 480px) and (max-width: 1023px) {
  .bar-nav-btn .bar-nav-length-badge {
    min-width: 11px;
    height: 10px;
    font-size: 7px;
    line-height: 10px;
    padding: 0 2px;
    bottom: 1px;
    right: 2px;
  }
}
@media (max-width: 479px) {
  .bar-navigation {
    padding: 8px 10px;
  }
  .bar-nav-btn {
    font-size: 9px;
    height: 28px;
  }
  .bar-nav-btn::before {
    width: 4px;
    height: 4px;
    top: 2px;
  }
  .bar-nav-btn .bar-nav-length-badge {
    min-width: 9px;
    height: 8px;
    font-size: 5.5px;
    line-height: 8px;
    padding: 0 1px;
    bottom: 1px;
    right: 1px;
  }
  .bar-nav-arrow {
    height: 28px;
  }
  .bar-nav-action-btn {
    font-size: 9px;
    padding: 4px 2px;
  }
  .bar-nav-stability-btn {
    font-size: 9px;
    padding: 4px 6px;
  }
  .bar-nav-stability .dirty-indicator {
    font-size: 0.6rem;
    top: 1px;
    right: 2px;
  }
}
.lfo-led {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  border: 1px solid #555;
  opacity: 0.3;
  transition: all 0.3s ease;
}
.lfo-led.active {
  background: #4caf50;
  border-color: #66bb6a;
  opacity: 1;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6), 0 0 12px rgba(76, 175, 80, 0.4);
  animation: pulse-led 1.5s ease-in-out infinite;
}

@keyframes pulse-led {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6), 0 0 12px rgba(76, 175, 80, 0.4);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.4), 0 0 6px rgba(76, 175, 80, 0.2);
  }
}
.lfo-section {
  margin-top: 4px;
}
.lfo-section summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 0;
  color: var(--text-primary, #fff);
}
.lfo-section summary:hover {
  color: #4a9eff;
}

.lfo-container {
  padding: 2px 0;
}

.lfo-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lfo-controls {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.lfo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lfo-header h4 {
  flex: 1 1 auto;
  margin: 0;
  color: #f8f7d5;
  font-size: 0.9em;
  min-width: 0;
}
.lfo-header .lfo-led {
  flex: 0 0 auto;
}
.lfo-header label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.adsr-preset-group {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.adsr-preset-group label {
  font-weight: 600;
  color: #f8f7d5;
  font-size: 0.9em;
}
.adsr-preset-group select {
  max-width: 100%;
  font-size: 0.9em;
  margin: 0 auto;
}
.adsr-preset-group .adsr-preset-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.85em;
  text-align: center;
  line-height: 1.3;
}

.filter-hint {
  display: block;
  font-size: 0.85em;
  margin-top: 4px;
}

.lfo-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.lfo-toggle input[type=checkbox] {
  --active: rgb(74, 158, 255);
  --active-inner: rgb(248, 248, 238);
  --focus: 2px rgba(74, 158, 255, 0.3);
  --border: rgba(255, 255, 255, 0.3);
  --border-hover: rgb(74, 158, 255);
  --background: rgba(0, 0, 0, 0.3);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid var(--bc, var(--border));
  background: var(--b, var(--background));
  border-radius: 4px;
  position: relative;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}
.lfo-toggle input[type=checkbox]:after {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 2px;
  left: 2px;
  border-radius: 2px;
  background: var(--active-inner);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lfo-toggle input[type=checkbox]:checked {
  --b: rgba(74, 158, 255, 0.3);
  --bc: var(--active);
}
.lfo-toggle input[type=checkbox]:checked:after {
  opacity: 1;
  box-shadow: 0 0 4px var(--active);
}
.lfo-toggle input[type=checkbox]:hover:not(:checked) {
  --bc: var(--border-hover);
}
.lfo-toggle input[type=checkbox]:focus {
  box-shadow: 0 0 0 var(--focus);
}
.lfo-toggle span {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.8);
}

.lfo-settings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.lfo-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lfo-control label {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lfo-control .value-display {
  font-weight: 600;
  color: #4a9eff;
}
.lfo-control input[type=range] {
  width: 100%;
}
.lfo-control select {
  margin: 4px;
  padding: 2px 6px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #ccc;
  box-sizing: border-box;
  height: 24px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgb(201, 207, 131);
  box-shadow: inset 0px 0px 6px;
}

.lfo-sync-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: rgba(74, 158, 255, 0.1);
  border-radius: 4px;
}
.lfo-sync-control label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.9);
}

.lfo-controls.active {
  border-color: #4a9eff;
  box-shadow: 0 0 8px rgba(74, 158, 255, 0.3);
}

table {
  background-color: #3b3b3b;
  color: #dfdddd;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

caption {
  background-color: #2b2c2c;
  font-size: 1em;
  font-weight: bold;
  color: #e8f3e7;
  padding: 8px 4px;
}

th,
td {
  border: 1px solid #2b2c2c;
  padding: 4px 2px;
  text-align: center;
  box-shadow: inset 0 0 2px;
}

thead th {
  background-color: rgb(186, 174, 84);
  color: #161615;
  padding: 4px;
  font-size: 0.75em;
}

thead.key-flats th {
  background-color: rgb(186, 174, 84);
  color: #161615;
  font-size: 0.75em;
}

tbody tr {
  transition: all 0.2s ease;
}

tbody tr:hover {
  color: #333;
  background-color: rgb(247, 235, 178);
  cursor: pointer;
  box-shadow: inset 0 0 16px #0f0f0c;
}

.highlight {
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, rgb(186, 174, 84) 1%, rgb(110, 99, 31) 3%, rgb(125, 106, 10) 50%, rgb(107, 93, 30) 97%, rgb(163, 153, 72) 99%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, rgb(186, 174, 84) 1%, rgb(110, 99, 31) 3%, rgb(125, 106, 10) 50%, rgb(107, 93, 30) 97%, rgb(163, 153, 72) 99%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, rgb(186, 174, 84) 1%, rgb(196, 185, 119) 3%, rgb(247, 235, 178) 50%, rgb(173, 162, 110) 97%, rgb(163, 153, 72) 99%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  box-shadow: inset 0 0 16px #0f0f0c;
  color: #161615;
}

details.system-tonal {
  filter: drop-shadow(0 0 4px #81815e);
  border-top: 1.5px solid rgb(110, 99, 31);
  border-bottom: 1.5px solid rgb(75, 68, 21);
  border-radius: 6px;
  display: inline-block;
  padding: 4px 12px;
  box-shadow: 0 0 16px #0f0e0a;
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  border-radius: 6px;
  padding: 18px 24px;
}

details.system-tonal summary {
  filter: drop-shadow(0 0 4px #202016);
  box-shadow: inset 0 0 16px #0f0e0a;
  border-top: 1.5px solid rgb(218, 208, 143);
  border-left: 1.5px solid rgb(155, 146, 87);
  border-right: 1.5px solid rgb(155, 146, 87);
  border-bottom: 1.5px solid rgb(75, 68, 21);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  padding: 0.5rem;
  margin: 0 -1px 1px 0;
}

.clickable {
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.clickable:hover {
  background-color: rgba(163, 153, 72, 0.3);
  color: #111111;
}

.scale-info-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 8px 0;
  padding: 6px 12px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 600;
  color: #f5e090;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(245, 224, 144, 0.35);
  border-radius: 10px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  transition: border-color 120ms ease, background 120ms ease;
  box-sizing: border-box;
}
.scale-info-pill:hover, .scale-info-pill:focus-visible {
  border-color: rgba(245, 224, 144, 0.75);
  background: rgba(0, 0, 0, 0.6);
  outline: none;
}
.scale-info-pill__scale {
  color: #f5e090;
}
.scale-info-pill__sep {
  color: rgba(245, 224, 144, 0.45);
}
.scale-info-pill__chord {
  color: #b9d4ff;
}

#vu-meter-section {
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  border-radius: 6px;
  padding: 18px;
  margin: 10px auto;
  padding: 18px;
  margin: 10px auto;
  height: auto;
  min-width: 200px;
  max-width: 200px;
}

#vu-meter-section h2 {
  color: #f8f7d5;
  text-shadow: 0 0 4px #111114;
  text-align: center;
  font-size: 1.25em;
}

#vu-meter-section hr {
  width: 93%;
}

.vu-meter-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.vu-meter-stereo {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  height: 300px;
  background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
  border: 3px solid #444;
  border-radius: 12px;
  padding: 8px;
  position: relative;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.vu-meter-scale {
  position: absolute;
  left: 8px;
  top: 24px;
  width: 20px;
  height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 8px;
  color: #ccc;
  font-family: "Courier New", monospace;
  z-index: 10;
}

.vu-channel {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 32px;
}

.vu-channel:first-child {
  margin-left: 22px;
}

.vu-channel:last-child {
  margin-left: 0;
}

.vu-channel .vu-channel-label {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 4px;
  text-align: center;
  width: 100%;
}

.vu-meter-bars {
  width: 100%;
  height: calc(100% - 32px);
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
  position: relative;
}

.vu-bar {
  height: 6px;
  background: #222;
  border: 1px solid #333;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  transition: all 0.1s ease;
  margin: 1px 0;
}

.vu-bar.active {
  box-shadow: 0 0 6px currentColor;
}

.vu-bar.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, currentColor 0%, rgba(255, 255, 255, 0.3) 50%, currentColor 100%);
  animation: vu-shine 0.5s ease infinite alternate;
}

.vu-bar.level-1,
.vu-bar.level-2,
.vu-bar.level-3,
.vu-bar.level-4,
.vu-bar.level-5 {
  color: #4caf50;
}

.vu-bar.level-6,
.vu-bar.level-7,
.vu-bar.level-8,
.vu-bar.level-9,
.vu-bar.level-10 {
  color: #8bc34a;
}

.vu-bar.level-11,
.vu-bar.level-12,
.vu-bar.level-13,
.vu-bar.level-14,
.vu-bar.level-15 {
  color: #cddc39;
}

.vu-bar.level-16,
.vu-bar.level-17,
.vu-bar.level-18,
.vu-bar.level-19 {
  color: #ffeb3b;
}

.vu-bar.level-20,
.vu-bar.level-21,
.vu-bar.level-22 {
  color: #ff9800;
}

.vu-bar.level-23,
.vu-bar.level-24,
.vu-bar.level-25 {
  color: #ff5722;
}

.vu-bar.level-26,
.vu-bar.level-27 {
  color: #f44336;
  animation: vu-critical 0.3s ease infinite alternate;
}

.vu-bar.peak-level {
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: peak-pulse 0.1s ease-in-out;
}

.vu-bar.rms-level {
  border: 1px solid transparent;
}

@keyframes vu-shine {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 0.1;
  }
}
@keyframes vu-critical {
  from {
    box-shadow: 0 0 8px currentColor;
    transform: scaleY(1);
  }
  to {
    box-shadow: 0 0 16px currentColor, 0 0 24px rgba(244, 67, 54, 0.25);
    transform: scaleY(1.1);
  }
}
@keyframes peak-pulse {
  from {
    opacity: 0.75;
    transform: scaleX(1);
  }
  to {
    opacity: 1;
    transform: scaleX(1.05);
  }
}
.vu-peak-indicator {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #b4ec73;
  border-radius: 1px;
  opacity: 0.5;
  transition: opacity 0.1s ease;
  box-shadow: 0 0 6px #fff;
  z-index: 20;
}

.vu-peak-indicator.show {
  opacity: 1;
}

.vu-meter-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.vu-meter-selector label {
  color: #f8f7d5;
  font-size: 14px;
  text-shadow: 0 0 2px #0f0f0c;
}

.vu-meter-selector select {
  background-color: #c9cf83;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  color: #2c2507;
}

.vu-meter-selector select:hover {
  filter: brightness(1.15);
}

.vu-meter-info {
  margin-top: 8px;
  padding: 4px 6px;
  background: rgba(15, 15, 12, 0.8);
  border-radius: 4px;
  border: 1px solid #444;
  width: 160px;
  box-sizing: border-box;
  transition: all 0.5s ease;
}

.vu-meter-info .vu-level-display {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "Courier New", monospace;
  font-size: 10px;
  text-align: center;
}

.vu-meter-info .vu-level-display .vu-peak-display,
.vu-meter-info .vu-level-display .vu-rms-display {
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.7);
  width: 140px;
  height: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vu-meter-info .vu-level-display .vu-peak-display .vu-label,
.vu-meter-info .vu-level-display .vu-rms-display .vu-label {
  font-weight: bold;
  font-size: 9px;
  width: 35px;
  text-align: left;
  flex-shrink: 0;
  color: #ffffff;
}

.vu-meter-info .vu-level-display .vu-peak-display .vu-value,
.vu-meter-info .vu-level-display .vu-rms-display .vu-value {
  font-weight: bold;
  font-size: 9px;
  width: 50px;
  text-align: right;
  flex-shrink: 0;
  transition: color 0.5s ease;
  color: #ffffff;
}

.vu-meter-info .vu-level-display .vu-peak-display .vu-unit,
.vu-meter-info .vu-level-display .vu-rms-display .vu-unit {
  font-weight: bold;
  font-size: 9px;
  width: 35px;
  text-align: right;
  flex-shrink: 0;
  color: #aaa;
}

.vu-meter-info .vu-level-display .vu-peak-display {
  border-left: 3px solid #ff6600;
}

.vu-meter-info .vu-level-display .vu-peak-display span {
  color: #ffffff;
}

.vu-meter-info .vu-level-display .vu-rms-display {
  border-left: 3px solid #33ff33;
}

.vu-meter-info .vu-level-display .vu-rms-display span {
  color: #ffffff;
}

#limiter-section {
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  border-radius: 6px;
  padding: 18px;
  margin: 10px auto;
  margin: 0 auto;
  margin-top: 10px;
  padding: 18px;
  height: 280px;
  min-width: 200px;
  max-width: 200px;
}

#limiter-section h2 {
  color: #f8f7d5;
  text-shadow: 0 0 4px #111114;
  text-align: center;
  font-size: 1.25em;
}

.limiter-container {
  display: flex;
  flex-direction: column;
  gap: 12px 4px;
}

.limiter-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.limiter-control label {
  color: #f8f7d5;
  font-size: 14px;
  text-shadow: 0 0 2px #0f0f0c;
}

.limiter-control input[type=range] {
  width: 100%;
  height: 12px;
}

.limiter-control span {
  color: #c9cf83;
  font-size: 12px;
  font-weight: bold;
  text-align: right;
  min-height: 12px;
}

#oscilloscope-section {
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  border-radius: 6px;
  padding: 18px;
  margin: 10px auto;
  padding: 18px;
  height: 360px;
  width: 200px;
}

#oscilloscope-section label {
  padding-left: 0.5rem;
}

#oscilloscope-section h2 {
  height: 28px;
  font-size: 1.25em;
  color: #f8f7d5;
  text-shadow: 0 0 4px #111114;
}

/* Le canvas prend toute la largeur du module, comme les autres .screen */
#oscilloscope {
  background: #232325;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.0666666667);
  display: block;
  aspect-ratio: 5/2;
  width: 200px;
  height: 260px;
  min-height: 48px;
}

.oscilloscope-toggle {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.oscilloscope-toggle .oscilloscope-toggle-btn {
  background: linear-gradient(135deg, #c9cf83 0%, #9da545 100%);
  border: 2px solid #6e631f;
  border-radius: 6px;
  color: #2c2507;
  font-weight: bold;
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.oscilloscope-toggle .oscilloscope-toggle-btn:hover {
  background: linear-gradient(135deg, #d4da8a 0%, #a8af4c 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.oscilloscope-toggle .oscilloscope-toggle-btn:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.oscilloscope-toggle .oscilloscope-toggle-btn.pre {
  background: linear-gradient(135deg, #90ee90 0%, #228b22 100%);
  border-color: #006400;
  color: #003300;
}

.oscilloscope-toggle .oscilloscope-toggle-btn.post {
  background: linear-gradient(135deg, #ffb347 0%, #ff8c00 100%);
  border-color: #cc6600;
  color: #662200;
}

@media (max-width: 600px) {
  #oscilloscope-section {
    max-width: 98vw;
  }
  #oscilloscope {
    width: 200px;
    min-height: 36px;
  }
}
div.master {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
  min-width: 50%;
  max-width: 100%;
}

div.master .slider-controls {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  border-radius: 6px;
  padding: 18px 24px;
  margin: 10px auto;
  margin: 0 auto;
}

@media (max-width: 479px) {
  div.master .slider-controls {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  div.master .slider-controls {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  div.master .slider-controls {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
  }
}
@media (min-width: 1024px) {
  div.master .slider-controls {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
  }
}
.master-controls label {
  padding-left: 4px;
}

div.master .slider-controls .master-controls {
  margin: 0;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.125);
  border-radius: 8px;
  padding: 18px;
  box-shadow: inset 0 0 8px #1d1c1a;
}

@media (max-width: 479px) {
  div.master .slider-controls .master-controls {
    width: 100%;
    max-width: 98%;
    min-width: 200px;
    padding: 16px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  div.master .slider-controls .master-controls {
    width: 100%;
    min-width: 200px;
    max-width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  div.master .slider-controls .master-controls {
    width: 100%;
    min-width: 200px;
    max-width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
  }
}
@media (min-width: 1024px) {
  div.master .slider-controls .master-controls {
    width: 100%;
    min-width: 240px;
    max-width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
  }
}
div.master .slider-controls .master-controls label {
  display: block;
  margin-bottom: 6px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
}

@supports (font-smooth: auto) {
  div.master .slider-controls .master-controls label {
    font-smooth: auto;
  }
}
div.master .slider-controls .master-controls label {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #f8f5da;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

div.master .slider-controls .master-controls label:first-child {
  margin-top: 0;
}

div.master .slider-controls .master-controls input[type=range] {
  width: 100%;
  height: 8px;
  margin: 8px 0 16px 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

div.master .slider-controls .master-controls input[type=range]::-webkit-slider-track {
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #2a2a2a 0%, #1a1a1a 100%);
  border-radius: 4px;
  border: 1px solid #404040;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

div.master .slider-controls .master-controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8f7d5, #d4d3b8);
  border: 2px solid #8a8970;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  margin-top: -8px;
}

div.master .slider-controls .master-controls input[type=range]::-webkit-slider-thumb:hover {
  background: linear-gradient(145deg, #fff, #f8f7d5);
  transform: scale(1.1);
}

div.master .slider-controls .master-controls input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #2a2a2a 0%, #1a1a1a 100%);
  border-radius: 4px;
  border: 1px solid #404040;
}

div.master .slider-controls .master-controls input[type=range]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8f7d5, #d4d3b8);
  border: 2px solid #8a8970;
  cursor: pointer;
}

span {
  font-size: 0.85rem;
  font-weight: bold;
  color: #c9cf83;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

#tempo-value {
  display: inline-block;
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#volume-value {
  display: inline-block;
  min-width: 4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.transport-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.transport-buttons div.record {
  font-size: 14px;
  min-width: 120px;
}

.transport-buttons div.record .audio-btn {
  font-family: "Courier New", monospace;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  letter-spacing: 0.5px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.transport-buttons div.record .audio-btn::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 7px 7px 0 0;
  pointer-events: none;
}

.transport-buttons div.record .audio-btn {
  padding: 5px;
  background: linear-gradient(180deg, #8b4545 0%, #734040 20%, #5d3535 60%, #4a2d2d 100%);
  color: #f8f7d5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border: 2px solid #4a2d2d;
}

.transport-buttons div.record .audio-btn:hover {
  background: linear-gradient(180deg, #a55555 0%, #8b4545 20%, #734040 60%, #5d3535 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 6px 12px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
}

.transport-buttons div.record .audio-btn:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.transport-buttons div.record .audio-btn.recording {
  background: linear-gradient(180deg, #ff4444 0%, #cc3333 20%, #aa2222 60%, #881111 100%);
  animation: recordPulse 1s ease-in-out infinite alternate;
}

.transport-buttons div.record:active {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 -1px 2px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 479px) {
  .transport-buttons div.record {
    width: 100%;
    min-width: unset;
    padding: 4px 4px;
  }
}
.master-controls {
  padding: 18px;
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  box-shadow: inset 0 0 8px #1d1c1a;
  border-radius: 8px;
  margin: 4px auto;
}

@media (max-width: 479px) {
  .master-controls {
    max-width: 80%;
    min-width: 200px;
    padding: 16px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .master-controls {
    max-width: 80%;
    min-width: 200px;
    padding: 16px;
    flex: 1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .master-controls {
    flex: 0 1 auto;
    max-width: 98%;
    min-width: 200px;
    padding: 16px;
  }
}
@media (min-width: 1024px) {
  .master-controls {
    flex: 0 1 auto;
    max-width: 98%;
    min-width: 200px;
    padding: 16px;
  }
}
.step-modifier-presets {
  margin-top: 15px;
  padding: 12px;
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  border-radius: 8px;
  border: 1px solid #404040;
}

.step-modifier-presets .preset-label {
  display: block;
  color: #f8f7d5;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.step-modifier-presets .step-presets-row {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.step-modifier-presets .step-preset-btn {
  flex: 1;
  padding: 8px 6px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s ease;
  background: linear-gradient(180deg, #445b78 0%, #364d66 40%, #2f4364 50%, #172d3b 100%);
  color: #f8f7d5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.step-modifier-presets .step-preset-btn:hover {
  background: linear-gradient(180deg, #7996aa 0%, #6785a1 40%, #375271 50%, #293e59 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.3);
}

.step-modifier-presets .step-preset-btn.active {
  background: linear-gradient(180deg, #c07777 0%, #855e4a 40%, #533c2c 50%, #3a241d 100%);
  color: #f8f7d5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 -1px 2px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.step-modifier-presets .step-preset-btn:active {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 -1px 2px rgba(255, 255, 255, 0.15);
}

.step-modifier-presets .step-pattern-clipboard {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.step-modifier-presets .step-clipboard-btn {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #3a4a5a;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s ease;
  background: linear-gradient(180deg, #3a4a3a 0%, #2a3a2a 40%, #1e2e1e 100%);
  color: #b8c8b8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.step-modifier-presets .step-clipboard-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #4a6a4a 0%, #3a5a3a 40%, #2a4a2a 100%);
  color: #d8e8d8;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2), 0 3px 6px rgba(0, 0, 0, 0.4);
}

.step-modifier-presets .step-clipboard-btn:active:not(:disabled) {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.step-modifier-presets .step-clipboard-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.step-modifier-presets .step-clipboard-btn.copied,
.step-modifier-presets .step-clipboard-btn.pasted {
  background: linear-gradient(180deg, #4a7a4a 0%, #3a6a3a 40%, #2a5a2a 100%);
  color: #c8ffc8;
  border-color: #4a8a4a;
}

.toggle-loop-on,
.toggle-loop-off {
  background: linear-gradient(180deg, #0f0e0a 35%, #2c2507 100%);
  border: none;
  border-radius: 0.5em;
  padding: 0.5em 2em;
  font-size: 0.75em;
  font-weight: bold;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75), 0 1.5px 0 #ffffff inset;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.65));
  cursor: pointer;
  outline: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  max-width: 160px;
  min-height: 38px;
}

.toggle-loop-on {
  background: linear-gradient(180deg, #c0b951 35%, #f0efa9 100%);
  color: #1f1e1d;
  text-shadow: 0 0 4px #faf9f8;
  box-shadow: 0 2px 8px rgba(233, 220, 109, 0.75), 0 1px 0 #fff inset;
  filter: drop-shadow(0 0 8px rgba(223, 213, 159, 0.75));
}

.toggle-loop-off {
  background: linear-gradient(180deg, #0f0e0a 35%, #2c2507 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(105, 95, 48, 0.75), 0 1.5px 6px rgb(243, 206, 83) inset;
  opacity: 1;
}

.toggle-loop-on:active {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0.5px 0 #fff inset;
}

.toggle-loop-off:active {
  box-shadow: 0 2px 4px rgba(105, 95, 48, 0.75), 0 1px 3px rgb(243, 206, 83) inset;
}

.step-modifier-presets {
  margin-top: 15px;
  padding: 12px;
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  border-radius: 8px;
  border: 1px solid #404040;
}

.step-modifier-presets .preset-label {
  display: block;
  color: #f8f7d5;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.step-modifier-presets .step-presets-row {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.step-modifier-presets .step-preset-btn {
  flex: 1;
  padding: 8px 6px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s ease;
  background: linear-gradient(180deg, #445b78 0%, #364d66 40%, #2f4364 50%, #172d3b 100%);
  color: #f8f7d5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.step-modifier-presets .step-preset-btn:hover {
  background: linear-gradient(180deg, #7996aa 0%, #6785a1 40%, #375271 50%, #293e59 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.3);
}

.step-modifier-presets .step-preset-btn.active {
  background: linear-gradient(180deg, #c07777 0%, #855e4a 40%, #533c2c 50%, #3a241d 100%);
  color: #f8f7d5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 -1px 2px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.step-modifier-presets .step-preset-btn:active {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 -1px 2px rgba(255, 255, 255, 0.15);
}

.step-modifier-presets .step-pattern-clipboard {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.step-modifier-presets .step-clipboard-btn {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #3a4a5a;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s ease;
  background: linear-gradient(180deg, #3a4a3a 0%, #2a3a2a 40%, #1e2e1e 100%);
  color: #b8c8b8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.step-modifier-presets .step-clipboard-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #4a6a4a 0%, #3a5a3a 40%, #2a4a2a 100%);
  color: #d8e8d8;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2), 0 3px 6px rgba(0, 0, 0, 0.4);
}

.step-modifier-presets .step-clipboard-btn:active:not(:disabled) {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.step-modifier-presets .step-clipboard-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.step-modifier-presets .step-clipboard-btn.copied,
.step-modifier-presets .step-clipboard-btn.pasted {
  background: linear-gradient(180deg, #4a7a4a 0%, #3a6a3a 40%, #2a5a2a 100%);
  color: #c8ffc8;
  border-color: #4a8a4a;
}

select.form-select {
  margin: 4px;
  padding: 2px 6px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #ccc;
  box-sizing: border-box;
  height: 24px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgb(201, 207, 131);
  box-shadow: inset 0px 0px 6px;
}

select.form-select:hover {
  filter: brightness(1.15);
}

select.seq-select {
  margin: 4px;
  padding: 2px 6px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #ccc;
  box-sizing: border-box;
  height: 24px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgb(201, 207, 131);
  box-shadow: inset 0px 0px 6px;
}

select.seq-select:hover {
  filter: brightness(1.15);
}

select.seq-select {
  width: 36px;
  padding: 2px 0px 2px 4px;
}

.step-container {
  display: grid;
  grid-template-rows: auto 20px 20px auto;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 4px;
  margin: 2px;
  width: 40px;
  min-height: 90px;
  box-sizing: border-box;
}

.step-container .seq-select {
  grid-row: 1;
  width: 36px;
  height: auto;
  margin: 0;
}

.step-container .step-velocity-modifier,
.step-container .step-behavior-modifier {
  width: 36px;
  height: 18px;
  font-size: 11px;
  border-radius: 3px;
  border: 1px solid #666;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: rgba(42, 42, 42, 0.9);
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  padding: 0;
  margin: 0;
}

.step-container .step-velocity-modifier option,
.step-container .step-behavior-modifier option {
  text-align: center !important;
  text-align-last: center !important;
  padding: 2px 4px !important;
}

.step-container .step-velocity-modifier:hover,
.step-container .step-behavior-modifier:hover {
  background: rgba(58, 58, 58, 0.9);
  border-color: #888;
}

.step-container .step-velocity-modifier:focus,
.step-container .step-behavior-modifier:focus {
  outline: none;
  border-color: #c9cf83;
  box-shadow: 0 0 0 1px rgba(201, 207, 131, 0.3);
  background: rgba(78, 78, 78, 0.9);
}

.step-container .step-velocity-modifier {
  grid-row: 2;
  border-color: #ff6600;
}

.step-container .step-velocity-modifier:hover {
  background: rgba(255, 102, 0, 0.8);
  border-color: #ff8800;
}

.step-container .step-velocity-modifier:focus {
  border-color: #ff6600;
  box-shadow: 0 0 0 1px rgba(255, 102, 0, 0.3);
}

.step-container .step-behavior-modifier {
  grid-row: 3;
  border-color: #0099ff;
}

.step-container .step-behavior-modifier:hover {
  background: rgba(0, 153, 255, 0.8);
  border-color: #00bbff;
}

.step-container .step-behavior-modifier:focus {
  border-color: #0099ff;
  box-shadow: 0 0 0 1px rgba(0, 153, 255, 0.3);
}

.step-container .step-modifier {
  width: 28px;
  height: 18px;
  font-size: 10px;
  border-radius: 3px;
  border: 1px solid #666;
  background: rgba(42, 42, 42, 0.9);
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 0;
}

.step-container .step-modifier:hover {
  background: rgba(58, 58, 58, 0.9);
  border-color: #888;
}

.step-container .step-modifier:focus {
  outline: none;
  border-color: #c9cf83;
  box-shadow: 0 0 0 1px rgba(201, 207, 131, 0.3);
}

.step-container .modifier-indicator {
  grid-row: 4;
  font-size: 11px;
  height: 18px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  padding: 1px;
  margin: 0;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.step-container .modifier-indicator.step-accent-light {
  background: rgba(255, 102, 0, 0.2);
  color: #ff8800;
}

.step-container .modifier-indicator.step-accent-medium {
  background: rgba(255, 102, 0, 0.4);
  color: #ffaa00;
}

.step-container .modifier-indicator.step-accent-heavy {
  background: rgba(255, 102, 0, 0.6);
  color: #ffcc00;
}

.step-container .modifier-indicator.step-link {
  border: 1px solid #00ff00;
  background: rgba(0, 255, 0, 0.1);
}

.step-container .modifier-indicator.step-slide {
  border: 1px solid #0099ff;
  background: rgba(0, 153, 255, 0.1);
  animation: slide-pulse 2s infinite;
}

.step-container .modifier-indicator.step-off {
  background: rgba(255, 0, 0, 0.3);
  color: #ff6666;
}

.step-container .modifier-indicator.step-accent-light.step-link {
  background: linear-gradient(45deg, rgba(255, 102, 0, 0.2), rgba(0, 255, 0, 0.1));
  border: 1px solid #88cc44;
}

.step-container .modifier-indicator.step-accent-medium.step-slide {
  background: linear-gradient(45deg, rgba(255, 102, 0, 0.4), rgba(0, 153, 255, 0.1));
  border: 1px solid #88bbff;
}

.step-container .modifier-indicator.step-accent-heavy.step-slide {
  background: linear-gradient(45deg, rgba(255, 102, 0, 0.6), rgba(0, 153, 255, 0.1));
  border: 1px solid #ffaa44;
  animation: heavy-slide-pulse 1.5s infinite;
}

@keyframes recordPulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.7;
    transform: scale(1.05);
  }
}
@keyframes slide-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(0, 153, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 10px rgba(0, 153, 255, 0.6);
  }
}
@keyframes heavy-slide-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.4), 0 0 5px rgba(0, 153, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.7), 0 0 10px rgba(0, 153, 255, 0.6);
  }
}
.step-container .step-container[data-step] .seq-select {
  transition: all 0.2s ease;
}

.step-container .step-normal .seq-select,
.step-container .step-container .seq-select {
  border-color: #666;
}

.step-container .step-link .seq-select {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.15);
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.3);
}

.step-container .step-link .modifier-indicator {
  color: #4caf50;
}

.step-container .step-off .seq-select {
  border-color: #f44336;
  background: rgba(244, 67, 54, 0.15);
  opacity: 0.7;
  box-shadow: 0 0 4px rgba(244, 67, 54, 0.3);
}

.step-container .step-off .modifier-indicator {
  color: #f44336;
}

.step-container .step-accent .seq-select {
  border-color: #ff9800;
  background: rgba(255, 152, 0, 0.15);
  box-shadow: 0 0 4px rgba(255, 152, 0, 0.4);
}

.step-container .step-accent .modifier-indicator {
  color: #ff9800;
  animation: pulse-accent 1.5s infinite;
}

@keyframes pulse-accent {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
  display: none;
  /* Remove default arrow in Internet Explorer 10 and 11 */
}

#toast-container {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 24px;
  border-radius: 10px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  font-weight: 600;
  z-index: 10003;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  background: linear-gradient(180deg, #5E5E5D 0%, #3A3A39 50%, #2C2C2B 100%);
  color: #f8f7d5;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
}
#toast-container.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#toast-container.toast-success {
  border-left: 3px solid #9da545;
}
#toast-container.toast-warning {
  border-left: 3px solid #d4a017;
}
#toast-container.toast-error {
  border-left: 3px solid #a34448;
}
#toast-container.toast-info {
  border-left: 3px solid #6a8caf;
}

#audio-context-prompt {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10005;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.4s ease;
}
#audio-context-prompt.prompt-hidden {
  opacity: 0;
  pointer-events: none;
}
#audio-context-prompt .prompt-content {
  text-align: center;
  color: #f8f7d5;
  font-family: "Courier New", monospace;
  user-select: none;
}
#audio-context-prompt .prompt-content .prompt-icon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: pulse-glow 2s ease-in-out infinite;
}
#audio-context-prompt .prompt-content .prompt-text {
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 8px;
}
#audio-context-prompt .prompt-content .prompt-subtext {
  font-size: 13px;
  color: rgba(248, 247, 213, 0.5);
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}
.app-header .header-btn.help-btn {
  min-width: 44px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #5a4e6b 0%, #453c56 50%, #342d44 100%);
  color: #f8f7d5;
  font-size: 18px;
}
.app-header .header-btn.help-btn:hover {
  background: linear-gradient(180deg, #7a6e8b 0%, #5a4e6b 50%, #453c56 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.keyboard-help-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10004;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.keyboard-help-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.keyboard-help-content {
  background: linear-gradient(180deg, #3a3a39 0%, #2c2c2b 50%, #1e1e1d 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 24px 32px;
  max-width: 520px;
  width: 90%;
  color: #f8f7d5;
  font-family: "Courier New", monospace;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.keyboard-help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
}
.keyboard-help-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.keyboard-help-close {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8f7d5;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keyboard-help-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.keyboard-help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 500px) {
  .keyboard-help-grid {
    grid-template-columns: 1fr;
  }
}

.keyboard-help-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(248, 247, 213, 0.5);
  margin: 0 0 10px 0;
}

.keyboard-help-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}
.keyboard-help-row kbd {
  display: inline-block;
  min-width: 48px;
  padding: 3px 8px;
  font-size: 12px;
  font-family: "Courier New", monospace;
  font-weight: 600;
  text-align: center;
  background: linear-gradient(180deg, #555 0%, #3a3a3a 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  color: #f8f7d5;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.keyboard-help-row span {
  font-size: 13px;
  color: rgba(248, 247, 213, 0.8);
}

.keyboard-help-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 12px;
  color: rgba(248, 247, 213, 0.4);
}

.keyboard-help-docs {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.keyboard-help-docs h3 {
  font-size: 13px;
  color: rgba(248, 247, 213, 0.85);
  margin: 0 0 8px 0;
}

.keyboard-help-docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.keyboard-help-docs-list li {
  margin: 4px 0;
}
.keyboard-help-docs-list a {
  display: inline-block;
  color: #c9cf83;
  text-decoration: none;
  font-size: 13px;
  padding: 2px 0;
}
.keyboard-help-docs-list a:hover {
  color: #f8f7d5;
  text-decoration: underline;
}
.keyboard-help-docs-list a:focus-visible {
  outline: 1px dashed #c9cf83;
  outline-offset: 2px;
}

[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 5px 10px;
  border-radius: 6px;
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: #f8f7d5;
  background: rgba(30, 30, 29, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1000;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
  [data-tooltip]::after {
    display: none;
  }
}

body.tooltips-disabled [data-tooltip]::after {
  display: none !important;
}

.section-title-icon {
  color: #e05878;
  text-shadow: 0 0 8px rgba(224, 88, 120, 0.45);
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
  font-size: 1em;
  vertical-align: middle;
  line-height: 1;
}
.section-title-icon--symbol {
  font-size: 1.4em;
}

#gamme-div,
#accord-div {
  margin: 8px auto;
}

.accord-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c8b970;
  text-shadow: 0 0 8px rgba(200, 185, 112, 0.3);
  margin: 0 0 6px 0;
  text-align: center;
}
.accord-title .section-title-icon {
  color: #e05878;
  text-shadow: 0 0 8px rgba(224, 88, 120, 0.45);
}

.accord-structure-select {
  width: auto;
  max-width: 96%;
  word-break: break-all;
}

.accord-genere-btn {
  width: 100%;
}

.accord-details {
  display: block;
  margin: 5px 8px;
}

.accord-details hr {
  width: inherit;
  min-width: 100%;
}

.gamme-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c8b970;
  text-shadow: 0 0 8px rgba(200, 185, 112, 0.3);
  margin: 0 0 6px 0;
  text-align: center;
}
.gamme-title .section-title-icon {
  color: #e05878;
  text-shadow: 0 0 8px rgba(224, 88, 120, 0.45);
}

.gamme-tonique-input {
  width: 36px;
}

.gamme-formule-input {
  width: auto;
  max-width: 96%;
  word-break: break-all;
}

.gamme-genere-btn {
  width: 100%;
}

.gamme-apply-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  width: 100%;
}

.gamme-apply-btn {
  flex: 1 1 0;
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  padding: 5px 6px;
  border: 1px solid rgba(255, 230, 0, 0.35);
  border-radius: 6px;
  background: rgba(35, 25, 60, 0.55);
  color: var(--accent-color, #fbff00);
  cursor: pointer;
  letter-spacing: 0.4px;
  transition: background 0.15s ease, transform 0.05s ease;
}

.gamme-apply-btn:hover {
  background: rgba(80, 50, 130, 0.65);
}

.gamme-apply-btn:active {
  transform: translateY(1px);
}

.gamme-details,
.gamme-guide {
  margin: 5px 8px;
  opacity: 1;
}

.gamme-details hr,
.gamme-guide hr {
  width: inherit;
  min-width: 100%;
}

#gamme-genere-btn,
#accord-genere-btn {
  font-family: "Courier New", monospace;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  letter-spacing: 0.5px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

#gamme-genere-btn::before,
#accord-genere-btn::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 7px 7px 0 0;
  pointer-events: none;
}

#gamme-genere-btn,
#accord-genere-btn {
  background: linear-gradient(180deg, #445b78 0%, #364d66 20%, #2c4061 60%, #1e3a4d 100%);
  color: #f8f7d5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#gamme-genere-btn:hover,
#accord-genere-btn:hover {
  background: linear-gradient(180deg, #7996aa 0%, #556e86 20%, #375271 60%, #293e59 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 6px 12px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
}

#gamme-genere-btn:active,
#accord-genere-btn:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
}

#gamme-genere-btn,
#accord-genere-btn {
  font-size: 16px;
  padding: 12px 24px;
  width: 100%;
  letter-spacing: 0.5px;
}

#gamme-genere-btn:active,
#accord-genere-btn:active {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 -1px 2px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.auto-harmony-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #ccc;
}
.auto-harmony-toggle input[type=checkbox] {
  cursor: pointer;
  accent-color: #f0c040;
}
.auto-harmony-toggle span {
  user-select: none;
}

.smart-voicing-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.smart-voicing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 12px;
  color: #bbb;
}
.smart-voicing-toggle input[type=checkbox] {
  cursor: pointer;
  accent-color: #c9cf83;
}
.smart-voicing-toggle span {
  user-select: none;
}

.accord-omission-hint {
  font-size: 10px;
  color: #e0b060;
  font-style: italic;
  opacity: 0.75;
  letter-spacing: 0.3px;
}

.accord-free-formula-row {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border-left: 2px solid rgba(201, 207, 131, 0.4);
}
.accord-free-formula-row label {
  font-size: 11px;
  color: #c9cf83;
  margin-right: 6px;
  letter-spacing: 0.3px;
}

.accord-free-formula-input {
  width: 180px;
  padding: 3px 6px;
  font-size: 13px;
  font-family: "Courier New", monospace;
  background: rgb(238, 243, 183);
  color: #2c2507;
  border: 1px solid #8a8a60;
  border-radius: 3px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}
.accord-free-formula-input:focus {
  outline: none;
  border-color: #c9cf83;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(201, 207, 131, 0.3);
}

.accord-free-formula-status {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-family: "Courier New", monospace;
}
.accord-free-formula-status.valid {
  color: #7fd87f;
}
.accord-free-formula-status.invalid {
  color: #e06060;
}

.accord-free-formula-presets {
  display: flex;
  gap: 3px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.accord-free-formula-preset {
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid #5a6a3a;
  border-radius: 3px;
  background: rgba(201, 207, 131, 0.12);
  color: #c9cf83;
  cursor: pointer;
  transition: all 0.15s ease;
}
.accord-free-formula-preset:hover {
  background: rgba(201, 207, 131, 0.25);
  border-color: #8a8a60;
}
.accord-free-formula-preset:active {
  background: rgba(201, 207, 131, 0.4);
}

.degree-slider:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

#osc1-note-degree-name,
#osc2-note-degree-name {
  transition: color 0.2s;
}

.chord-progression-module {
  margin: 8px auto;
}

.chord-prog-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c8b970;
  text-shadow: 0 0 8px rgba(200, 185, 112, 0.3);
  margin: 0 0 6px 0;
}

.prog-preset-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.prog-preset-row label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c9cf83;
  white-space: nowrap;
}
.prog-preset-row select {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 4px;
  appearance: none;
  background-color: rgb(201, 207, 131);
  box-shadow: inset 0px 0px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #1a1a14;
  cursor: pointer;
}
.prog-preset-row select:focus {
  outline: none;
  border-color: #5a5a30;
}
.prog-preset-row select:hover {
  filter: brightness(1.1);
}

.prog-chords-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
  min-height: 70px;
}

.prog-chord-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(160deg, #1c2834, #101820);
  border: 1px solid #2a3a4a;
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 54px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.prog-chord-card:focus {
  outline: none;
}
.prog-chord-card:hover {
  border-color: #4a6a8a;
}
.prog-chord-card:focus-within {
  border-color: #e05878;
  background: linear-gradient(160deg, #2a2028, #181018);
  box-shadow: 0 0 0 1px rgba(224, 88, 120, 0.55), 0 0 12px rgba(224, 88, 120, 0.35);
}
.prog-chord-card:focus-within .prog-chord-degree {
  color: #f0e090;
  text-shadow: 0 0 10px rgba(240, 224, 144, 0.6);
}

.prog-chord-degree-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.prog-chord-degree {
  font-size: 16px;
  font-weight: 800;
  color: #d4c070;
  font-family: "Courier New", monospace;
  text-shadow: 0 0 8px rgba(212, 192, 112, 0.35);
  line-height: 1.1;
  cursor: pointer;
}

.prog-chord-degree-select {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 4px;
  appearance: none;
  background-color: rgb(201, 207, 131);
  box-shadow: inset 0px 0px 6px;
  border: 1px solid #8a8a60;
  border-radius: 3px;
  color: #1a1a14;
  width: 44px;
  cursor: pointer;
}
.prog-chord-degree-select:focus {
  outline: none;
  border-color: #5a5a30;
}
.prog-chord-degree-select:hover {
  filter: brightness(1.1);
}

.prog-chord-dur-row {
  display: flex;
  gap: 2px;
}

.prog-dur-btn {
  padding: 2px 5px;
  border: 1px solid #2a3a4a;
  border-radius: 3px;
  background: #0e1620;
  color: #6a7a8a;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.prog-dur-btn:hover {
  background: #1a2a3a;
  color: #c0ccd8;
  border-color: #3a5a7a;
}
.prog-dur-btn.active {
  background: linear-gradient(180deg, #1a4060, #0e2840);
  color: #78c0f0;
  border-color: #3a7aaa;
  box-shadow: 0 0 4px rgba(120, 192, 240, 0.25);
}

.prog-chord-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border: none;
  background: transparent;
  color: #c23a3a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: all 0.15s ease;
}
.prog-chord-remove:hover {
  color: #ff6060;
  background: rgba(255, 60, 60, 0.15);
}

.prog-add-row {
  margin-bottom: 4px;
}

.prog-add-btn {
  padding: 4px 10px;
  border: 1px dashed #8a8a60;
  border-radius: 4px;
  background: transparent;
  color: #c9cf83;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  letter-spacing: 0.5px;
}
.prog-add-btn:hover {
  background: rgba(201, 207, 131, 0.12);
  color: #e0e89a;
  border-color: #c9cf83;
}

.prog-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.prog-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c9cf83;
  white-space: nowrap;
}

.prog-label-octave {
  margin-left: 8px;
}

.prog-structure-select,
.prog-octaves-select {
  font-size: 14px;
  font-weight: 600;
  padding: 3px 5px;
  appearance: none;
  background-color: rgb(201, 207, 131);
  box-shadow: inset 0px 0px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #1a1a14;
  cursor: pointer;
}
.prog-structure-select:focus,
.prog-octaves-select:focus {
  outline: none;
  border-color: #5a5a30;
}
.prog-structure-select:hover,
.prog-octaves-select:hover {
  filter: brightness(1.1);
}

.prog-octaves-select {
  width: 44px;
}

.prog-summary-row {
  margin-bottom: 8px;
}

.prog-total-label {
  font-size: 10px;
  color: #c9cf83;
  font-family: "Courier New", monospace;
}

.prog-apply-options-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.prog-label {
  font-size: 10px;
  color: #c9cf83;
  font-weight: 600;
  user-select: none;
}

.prog-label-mode {
  margin-left: 6px;
}

.prog-start-select,
.prog-mode-select {
  font-size: 14px;
  font-weight: 600;
  padding: 3px 5px;
  appearance: none;
  background-color: rgb(201, 207, 131);
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.4);
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #1a1a14;
  cursor: pointer;
}
.prog-start-select:focus,
.prog-mode-select:focus {
  outline: none;
  border-color: #5a5a30;
}
.prog-start-select:hover,
.prog-mode-select:hover {
  filter: brightness(1.1);
}

.prog-start-select {
  width: 46px;
}

.prog-mode-select {
  width: 60px;
}

.prog-apply-btn {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #3a5a3a;
  border-radius: 5px;
  background: linear-gradient(180deg, #1e4a2e 0%, #163a22 50%, #0e2a18 100%);
  color: #7fd87f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.prog-apply-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #2a6a3e 0%, #1e5030 50%, #163a24 100%);
  color: #a0f0a0;
  border-color: #4a8a5a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 12px rgba(127, 216, 127, 0.2);
}
.prog-apply-btn:active:not(:disabled) {
  background: linear-gradient(180deg, #0e2a18, #1e4a2e);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: translateY(1px);
}
.prog-apply-btn:disabled, .prog-apply-btn.prog-apply-btn--warning {
  background: linear-gradient(180deg, #3a1a1a, #2a1010);
  color: #e06060;
  border-color: #5a2a2a;
  cursor: not-allowed;
}
.prog-apply-btn.prog-apply-btn--success {
  background: linear-gradient(180deg, #1a5a2a, #143a1e);
  color: #b0ffb0;
  border-color: #4aaa5a;
  box-shadow: 0 0 12px rgba(127, 216, 127, 0.3);
}

@media (max-width: 480px) {
  .prog-chords-container {
    gap: 4px;
  }
  .prog-chord-card {
    min-width: 46px;
    padding: 5px 6px;
  }
  .prog-chord-degree {
    font-size: 14px;
  }
  .prog-dur-btn {
    padding: 2px 4px;
    font-size: 8px;
  }
}
.prog-chord-struct-row {
  width: 100%;
  margin-top: 3px;
}

.prog-chord-struct-select {
  width: 100%;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 2px;
  appearance: none;
  background-color: rgb(201, 207, 131);
  box-shadow: inset 0px 0px 4px;
  border: 1px solid #8a8a60;
  border-radius: 3px;
  color: #1a1a14;
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prog-chord-struct-select:focus {
  outline: none;
  border-color: #5a5a30;
}
.prog-chord-struct-select:hover {
  filter: brightness(1.1);
}
.prog-chord-struct-select[value=""] {
  color: #4a4a30;
}

.prog-chord-key-row {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.prog-key-icon {
  font-size: 9px;
  line-height: 1;
  opacity: 0.55;
  flex-shrink: 0;
  cursor: help;
}

.prog-key-label {
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.75;
}

.prog-key-tonique,
.prog-key-mode {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 2px;
  appearance: none;
  background-color: rgb(201, 207, 131);
  box-shadow: inset 0px 0px 4px;
  border: 1px solid #8a8a60;
  border-radius: 3px;
  color: #1a1a14;
  cursor: pointer;
  text-align: center;
  text-align-last: center;
}
.prog-key-tonique:focus,
.prog-key-mode:focus {
  outline: none;
  border-color: #5a5a30;
}
.prog-key-tonique:hover:not(:disabled),
.prog-key-mode:hover:not(:disabled) {
  filter: brightness(1.1);
}
.prog-key-tonique:disabled,
.prog-key-mode:disabled {
  background-color: #9a9a70;
  color: #4a4a30;
  cursor: default;
  box-shadow: none;
}

.prog-key-tonique {
  width: 34px;
}

.prog-key-mode {
  width: 34px;
}
.prog-key-mode:not(:disabled) {
  background-color: rgb(220, 225, 150);
}

:root {
  --color-gradient-1: rgb(120, 150, 180);
  --color-gradient-2: rgb(35, 50, 60);
  --color-gradient-3: rgb(40, 60, 75);
  --color-gradient-4: rgb(35, 50, 60);
  --color-gradient-5: rgba(85, 115, 145, 1);
  --accent-color: rgb(201, 207, 131);
  --accent-color-blue: rgb(108, 227, 243);
}

html,
body {
  background-color: #1a1a1b;
  color: #f8f7d5;
  font-family: "Courier New", monospace;
  margin: 0px auto;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  padding-top: 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: #c9cf83;
  color: #1a1a1b;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: bold;
  z-index: 10000;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 10px;
  outline: 3px solid #6ce3f3;
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid #6ce3f3 !important;
  outline-offset: 2px !important;
}

:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible,
.header-btn:focus-visible,
.transport-btn:focus-visible {
  outline: 3px solid #6ce3f3 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 8px rgba(108, 227, 243, 0.5);
}

input[type=range]:focus-visible {
  outline: 2px solid #6ce3f3;
  outline-offset: 4px;
}

select:focus-visible,
input[type=text]:focus-visible,
input[type=number]:focus-visible {
  outline: 2px solid #6ce3f3 !important;
  outline-offset: 1px !important;
  border-color: #6ce3f3 !important;
}

li:nth-child(odd) {
  padding: 4px 4px 4px 8px;
  background-color: #243524;
  border: solid 1px rgb(102, 131, 49);
  color: rgb(218, 252, 157);
}

li:nth-child(odd)::marker {
  color: rgb(218, 252, 157);
}

li:nth-child(even) {
  padding: 4px 4px 4px 8px;
  background-color: #1f1f0c;
  border: solid 1px rgb(83, 80, 70);
  color: rgb(224, 218, 199);
}

li:nth-child(even)::marker {
  color: rgb(224, 218, 199);
}

body::-webkit-scrollbar {
  display: none;
}

span.note {
  font-size: 1.125rem;
  font-weight: 400;
}

@supports (font-smooth: auto) {
  span.note {
    font-smooth: auto;
  }
}
span.note {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
}

span.AI {
  font-size: 1.25rem;
  font-weight: 400;
}

@supports (font-smooth: auto) {
  span.AI {
    font-smooth: auto;
  }
}
span.AI {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
  text-align: center;
}

h1.app-title {
  margin: 0;
  padding: 0;
  font-size: 4rem;
  font-weight: 700;
}

@supports (font-smooth: auto) {
  h1.app-title {
    font-smooth: auto;
  }
}
h1.app-title {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeQuality;
  font-variant-ligatures: common-ligatures;
  letter-spacing: 0.35rem;
}

@media (min-width: 480px) and (max-width: 767px) {
  h1.app-title {
    display: none;
    font-size: 2.5rem;
    letter-spacing: 0.2rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  h1.app-title {
    font-size: 3rem;
    letter-spacing: 0.25rem;
  }
}
@media (max-width: 479px) {
  h1.app-title {
    display: none;
  }
}
h2 {
  color: rgb(248, 248, 211);
  text-shadow: 0 0 4px #111114;
  margin: 0px;
  text-align: center;
  font-size: 1.25em;
  font-weight: 700;
}

@supports (font-smooth: auto) {
  h2 {
    font-smooth: auto;
  }
}
h2 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeQuality;
  font-variant-ligatures: common-ligatures;
}

hr {
  position: relative;
  overflow: visible;
  /* Allows content to extend beyond the line */
  height: 2px;
  background-color: #858351;
  border: solid 1px rgb(89, 86, 49);
  color: #c9c67a;
  box-shadow: 0 2px 4px rgba(58, 58, 50, 0.8784313725);
}

@media (min-width: 1024px) {
  .modules-container {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .modules-container > .module {
    flex: 1;
    min-width: 300px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .modules-container {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .modules-container > .module {
    flex: 1;
    min-width: 300px;
  }
}
@media (max-width: 479px) {
  .modules-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .modules-container > .module {
    width: 96%;
    padding: 0;
  }
}
.module {
  background: linear-gradient(180deg, #1f1f1f, #141414);
  border-radius: 8px;
  border: 2px solid #404040;
  padding: 12px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.module:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.module h2 {
  margin: 0 0 12px 0;
  padding-bottom: 2px;
  font-size: 18px;
  font-weight: 700;
}

@supports (font-smooth: auto) {
  .module h2 {
    font-smooth: auto;
  }
}
.module h2 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #f8f5da;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

@media (max-width: 479px) {
  .module.notes-driver-module {
    order: 1;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .module.notes-driver-module {
    grid-column: 1/-1;
    order: 1;
  }
}
@media (max-width: 479px) {
  .module.scale-generator-module {
    order: 2;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .module.scale-generator-module {
    order: 2;
  }
}
@media (max-width: 479px) {
  .module.arpeggiator-module {
    order: 3;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .module.arpeggiator-module {
    order: 3;
  }
}
@media (max-width: 479px) {
  .module.transport-controls-module {
    order: 4;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .module.transport-controls-module {
    grid-column: 1/-1;
    order: 4;
  }
}
@media (max-width: 479px) {
  .module.synth-module {
    order: 5;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .module.synth-module {
    grid-column: 1/-1;
    order: 5;
  }
}
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, rgb(104, 103, 99) 1%, rgb(41, 40, 38) 2%, rgb(48, 47, 43) 50%, rgb(44, 43, 41) 98%, rgb(83, 83, 78) 99%, rgb(15, 15, 14) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, rgb(104, 103, 99) 1%, rgb(41, 40, 38) 2%, rgb(48, 47, 43) 50%, rgb(44, 43, 41) 98%, rgb(83, 83, 78) 99%, rgb(15, 15, 14) 100%);
  background: linear-gradient(90deg, rgb(19, 19, 19) 0%, rgb(99, 99, 99) 1%, rgb(42, 42, 42) 2%, rgb(44, 44, 44) 50%, rgb(44, 44, 44) 98%, rgb(76, 76, 76) 99%, rgb(13, 13, 13) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 2px solid rgb(65, 64, 61);
  border-bottom: 2px solid rgb(48, 47, 45);
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  box-shadow: inset 0 0 16px #0f0f0c;
  padding: 18px;
  padding: 15px 0;
}

.app-header .header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

@media (min-width: 480px) and (max-width: 767px) {
  .app-header .header-container {
    flex-direction: column;
    gap: 12px;
    padding: 0 15px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .app-header .header-container {
    gap: 8px;
    padding: 0 15px;
  }
}
@media (max-width: 479px) {
  .app-header .header-container {
    flex-direction: column;
    gap: 8px;
    padding: 0 10px;
  }
}
.app-header .app-title {
  font-size: 2.5em;
  font-weight: 700;
}

@supports (font-smooth: auto) {
  .app-header .app-title {
    font-smooth: auto;
  }
}
.app-header .app-title {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeQuality;
  font-variant-ligatures: common-ligatures;
  color: #f8f7d5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  margin: 0;
  letter-spacing: 0.1em;
  margin-left: 12px;
}

.app-header .app-title .AI {
  color: #c9cf83;
  text-shadow: 0 0 4px #81815e;
}

@media (min-width: 480px) and (max-width: 767px) {
  .app-header .app-title {
    margin-left: 12px;
    font-size: 18px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .app-header .app-title {
    margin-left: 12px;
    font-size: 24px;
  }
}
@media (max-width: 479px) {
  .app-header .app-title {
    display: none;
  }
}
.app-header .header-buttons {
  display: flex;
  gap: 12px;
  order: 2;
}

@media (min-width: 480px) and (max-width: 767px) {
  .app-header .header-buttons {
    order: 1;
    gap: 8px;
    width: 100%;
    justify-content: center;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .app-header .header-buttons {
    gap: 10px;
  }
}
@media (max-width: 479px) {
  .app-header .header-buttons {
    flex-direction: row;
    gap: 4px;
    order: 1;
  }
}
.app-header .header-transport {
  display: flex;
  gap: 12px;
  order: 1;
}

@media (min-width: 480px) and (max-width: 767px) {
  .app-header .header-transport {
    order: 2;
    gap: 10px;
    width: 100%;
    justify-content: center;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .app-header .header-transport {
    gap: 10px;
  }
}
@media (max-width: 479px) {
  .app-header .header-transport {
    order: 2;
    gap: 6px;
  }
}
.app-header .header-btn {
  font-family: "Courier New", monospace;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  letter-spacing: 0.5px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.app-header .header-btn::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 7px 7px 0 0;
  pointer-events: none;
}

.app-header .header-btn {
  font-size: 14px;
  padding: 10px 12px;
  min-width: 90px;
  border: 2px solid transparent;
}

.app-header .header-btn.transport-btn {
  min-width: 100px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: bold;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .app-header .header-btn.transport-btn {
    min-width: 88px;
    padding: 8px 10px;
    font-size: 13px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .app-header .header-btn.transport-btn {
    min-width: 82px;
    padding: 7px 9px;
    font-size: 13px;
  }
}
@media (max-width: 479px) {
  .app-header .header-btn.transport-btn {
    min-width: 74px;
    padding: 6px 8px;
    font-size: 12px;
  }
}
.app-header .header-btn.play-btn {
  background: linear-gradient(180deg, #4caf50, #225a25);
  border-color: #2e7d32;
  color: #ffffff;
}

.app-header .header-btn.play-btn:hover {
  background: linear-gradient(180deg, #66bb6a, #4caf50);
  box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
}

.app-header .header-btn.play-btn:active {
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
}

.app-header .header-btn.play-btn.toggle-loop-on {
  background: linear-gradient(180deg, #757575, #474747);
  border-color: #424242;
  color: #ffffff;
}

.app-header .header-btn.play-btn.toggle-loop-on:hover {
  background: linear-gradient(180deg, #9e9e9e, #757575);
  box-shadow: 0 6px 12px rgba(117, 117, 117, 0.4);
}

.app-header .header-btn.record-btn {
  background: linear-gradient(180deg, #f44336, #963030);
  border-color: #b71c1c;
  color: #ffffff;
}

.app-header .header-btn.record-btn:hover {
  background: linear-gradient(180deg, #f55d5b, #d63b30);
  box-shadow: 0 6px 12px rgba(244, 67, 54, 0.4);
}

.app-header .header-btn.record-btn:active {
  box-shadow: 0 2px 4px rgba(244, 67, 54, 0.3);
}

.app-header .header-btn.record-btn.recording {
  background: linear-gradient(180deg, #ff1744, #c2185b);
  animation: recordPulse 1s ease-in-out infinite alternate;
}

#export-midi-btn {
  background: linear-gradient(180deg, #897aa8, #554770);
  border-color: #8068aa;
  color: #ede7f6;
  font-weight: bold;
  letter-spacing: 0.03em;
}

#export-midi-btn:hover {
  background: linear-gradient(180deg, #f3efff, #9575cd);
  color: #1a0a3d;
  box-shadow: 0 6px 14px rgba(149, 117, 205, 0.45);
}

#export-midi-btn:active {
  background: linear-gradient(180deg, #7e57c2, #4527a0);
  color: #ede7f6;
  box-shadow: 0 2px 4px rgba(69, 39, 160, 0.4);
}

#perf-mode-btn {
  background: linear-gradient(180deg, #4a4a5a, #2e2e3e);
  border-color: rgba(200, 200, 220, 0.3);
  color: #a0a0b0;
}

#perf-mode-btn:hover {
  background: linear-gradient(180deg, #5a5a6a, #3e3e4e);
  border-color: rgba(255, 165, 0, 0.5);
  color: #ffa500;
}

#perf-mode-btn.perf-btn-active {
  background: linear-gradient(180deg, #5a3e00, #3a2800);
  border-color: rgba(255, 165, 0, 0.8);
  color: #ffa500;
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.4);
  font-weight: bold;
}

#perf-mode-btn.perf-btn-active:hover {
  background: linear-gradient(180deg, #7a5500, #5a3e00);
  box-shadow: 0 0 14px rgba(255, 165, 0, 0.55);
}

.app-header .header-btn.settings-btn {
  background: linear-gradient(180deg, #445b78 0%, #364d66 20%, #2c4061 60%, #1e3a4d 100%);
  color: #f8f7d5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.app-header .header-btn.settings-btn:hover {
  background: linear-gradient(180deg, #7996aa 0%, #556e86 20%, #375271 60%, #293e59 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 6px 12px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
}

.app-header .header-btn.settings-btn:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.app-header .header-btn.settings-btn {
  min-width: 78px;
  padding: 7px 10px;
  font-size: 12px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .app-header .header-btn.settings-btn {
    min-width: 68px;
    padding: 6px 8px;
    font-size: 12px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .app-header .header-btn.settings-btn {
    min-width: 60px;
    padding: 5px 7px;
    font-size: 11px;
  }
}
@media (max-width: 479px) {
  .app-header .header-btn.settings-btn {
    min-width: 50px;
    padding: 4px 6px;
    font-size: 10px;
  }
}
.app-header .header-btn.settings-btn:hover {
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 6px 12px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
}

.app-header .header-btn.settings-btn:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.favicon-bg {
  background-color: transparent;
  width: 48px;
  height: 48px;
  background-image: url("../syn.png");
  background-size: cover;
  display: flex;
  justify-content: flex-start;
  margin: 0.125rem;
  border: none;
}

label {
  color: #f8f7d5;
  text-shadow: 0 0 2px #0f0f0c;
}

input[type=text] {
  margin: 4px;
  padding: 2px 0px 2px 6px;
  font-size: 16px;
  font-weight: 600;
}

@supports (font-smooth: auto) {
  input[type=text] {
    font-smooth: auto;
  }
}
input[type=text] {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
  border: 1px solid #ccc;
  box-sizing: border-box;
  height: 24px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgb(201, 207, 131);
  box-shadow: inset 0px 0px 6px;
}

input[type=text]:hover {
  filter: brightness(1.15);
}

.settings-btn {
  font-size: 16px;
  font-weight: 600;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #2c2507;
  box-sizing: border-box;
  min-height: 32px;
  min-width: 20%;
  background-color: rgb(238, 243, 183);
  box-shadow: inset 0px 0px 6px rgb(55, 56, 38);
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.settings-btn:hover {
  filter: brightness(1.15);
}

#filter-q-container {
  display: none;
}

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 96%;
  height: 12px;
  border-radius: 5px;
  background: #111114;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(255, 255, 255, 0.5);
  outline: none;
  opacity: 0.7;
  transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s;
  border: solid 2px transparent;
  box-sizing: border-box;
}

input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 20px;
  border-radius: 50%;
  border-left: solid 1px rgb(250, 252, 228);
  border-top: solid 2px rgb(250, 252, 228);
  border-bottom: solid 2px rgb(138, 141, 107);
  background-color: rgb(201, 207, 131);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

input::-webkit-slider-thumb:hover {
  filter: brightness(1.15);
  box-shadow: inset 0px 0px 2px white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

input::-moz-range-thumb {
  width: 28px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(201, 207, 131);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

input::-moz-range-thumb:hover {
  filter: brightness(1.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

.degree-slider {
  background: linear-gradient(90deg, #c73e1d 0%, #f39c12 15%, #27ae60 45%, #3498db 70%, #9b59b6 100%) !important;
  border: 2px solid rgba(201, 207, 131, 0.8);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.degree-slider::-webkit-slider-thumb {
  background: linear-gradient(145deg, #f8f7d5, #c9cf83);
  border: 2px solid #8b7d1f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  width: 24px;
  height: 20px;
}

.degree-slider::-webkit-slider-thumb:hover {
  background: linear-gradient(145deg, #fff, #d4da8e);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 3px rgba(255, 255, 255, 0.7);
}

.degree-slider::-moz-range-thumb {
  background: linear-gradient(145deg, #f8f7d5, #c9cf83);
  border: 2px solid #8b7d1f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  width: 28px;
  height: 20px;
}

.degree-slider::-moz-range-thumb:hover {
  background: linear-gradient(145deg, #fff, #d4da8e);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  input[type=radio] {
    --active: rgb(243, 252, 145);
    --focus: 2px rgba(39, 94, 254, 0.3);
    --border: #f1ebcf;
    --border-hover: rgb(141, 141, 24);
    --background: rgb(16, 16, 16);
    --disabled: #f6f8ff;
    --disabled-inner: #e1e6f9;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 36px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  input[type=radio]:checked {
    --b: var(--active-inner);
    --bc: var(--active);
    --d-o: 0.3s;
    --d-t: 0.6s;
    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
  }
  input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  input[type=radio]:disabled + label {
    cursor: not-allowed;
  }
  input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  input[type=radio]:not(.switch) {
    width: 15px;
  }
  input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }
  input[type=radio]:not(.switch):checked {
    --o: 1;
  }
  input[type=radio] + label {
    font-size: 16px;
    line-height: 14px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }
}
.syn1-voice-mode-box {
  margin: 15px auto;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 8px #1d1c1a;
  border-radius: 6px;
  border-left: 6px solid #90c6ff;
  max-width: 85%;
  min-width: 120px;
}

.syn1-voice-mode-box > label {
  display: block;
  font-weight: bold;
  color: #f8f7d5;
  margin-bottom: 6px;
  font-size: 13px;
}

.syn1-voice-mode-box #syn1-voice-mode {
  margin: 0 auto;
  width: 80%;
  max-width: 92%;
}

.syn1-presets-box {
  margin: 0 auto;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 8px #1d1c1a;
  border-radius: 6px;
  border-left: 6px solid #6bff90;
}

.syn1-presets-box > label {
  display: block;
  font-weight: bold;
  color: #f8f7d5;
  margin-bottom: 8px;
  font-size: 14px;
}

.syn1-presets-select,
#vu-source-select {
  width: 100%;
  margin: 5px 0 8px 0;
  padding: 6px 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #c9cf83;
  box-shadow: inset 0px 0px 10px;
  font-size: 14px;
  font-weight: 600;
}

@supports (font-smooth: auto) {
  .syn1-presets-select,
  #vu-source-select {
    font-smooth: auto;
  }
}
.syn1-presets-select,
#vu-source-select {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
  color: #2c2507;
}

.syn1-presets-select:hover,
#vu-source-select:hover {
  filter: brightness(1.15);
}

.syn1-presets-select:focus,
#vu-source-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 207, 131, 0.5);
}

.syn1-presets-button {
  width: 100%;
  margin: 5px 0;
  padding: 8px 12px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  font-weight: 700;
}

@supports (font-smooth: auto) {
  .syn1-presets-button {
    font-smooth: auto;
  }
}
.syn1-presets-button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.syn1-presets-button:hover {
  background: linear-gradient(135deg, #ff7b7b 0%, #fe6a62 100%);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.syn1-presets-button:active {
  box-shadow: 0 1px 4px rgba(255, 107, 107, 0.3);
}

.waveform-selector1 {
  margin: 4px 0;
  width: 100%;
}

.waveform-selector1 > h4 {
  display: block;
  font-weight: bold;
  color: #f8f7d5;
  margin-bottom: 4px;
  font-size: 14px;
}

.waveform-selector1 .waveform-options1 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: 4px;
  border-left: 4px solid #6bff90;
  box-shadow: inset 0 0 8px #1d1c1a;
}

.waveform-selector1 .waveform-options1 div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.waveform-selector1 .waveform-options1 input[type=radio] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.waveform-selector1 .waveform-options1 input[type=radio]:after {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  z-index: 100;
  background: var(--active-inner, rgb(248, 248, 238));
}

.waveform-selector1 .waveform-options1 input[type=radio]:before {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  z-index: 100;
  background: var(--active-inner, rgb(248, 248, 238));
}

.waveform-selector1 .waveform-options1 label {
  font-size: 13px;
  color: #e8e8e8;
  text-align: start;
  line-height: 18px;
  cursor: pointer;
}

.waveform-selector1 .waveform-options1 label:hover {
  color: #f8f7d5;
}

.waveform-selector1 .waveform-custom-options,
.waveform-selector2 .waveform-custom-options,
.waveform-selector-sub .waveform-custom-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 4px;
  margin-top: 4px;
}

.waveform-selector1 .waveform-custom-options div,
.waveform-selector2 .waveform-custom-options div,
.waveform-selector-sub .waveform-custom-options div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.waveform-selector1 .waveform-custom-options input[type=radio],
.waveform-selector2 .waveform-custom-options input[type=radio],
.waveform-selector-sub .waveform-custom-options input[type=radio] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.waveform-selector1 .waveform-custom-options input[type=radio]:after,
.waveform-selector2 .waveform-custom-options input[type=radio]:after,
.waveform-selector-sub .waveform-custom-options input[type=radio]:after {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  background: var(--active-inner, rgb(248, 248, 238));
}

.waveform-selector1 .waveform-custom-options input[type=radio]:before,
.waveform-selector2 .waveform-custom-options input[type=radio]:before,
.waveform-selector-sub .waveform-custom-options input[type=radio]:before {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  background: var(--active-inner, rgb(248, 248, 238));
}

.waveform-selector1 .waveform-custom-options label,
.waveform-selector2 .waveform-custom-options label,
.waveform-selector-sub .waveform-custom-options label {
  font-size: 13px;
  color: #e8e8e8;
  text-align: start;
  line-height: 18px;
  cursor: pointer;
}

.waveform-selector1 .waveform-custom-options label:hover,
.waveform-selector2 .waveform-custom-options label:hover,
.waveform-selector-sub .waveform-custom-options label:hover {
  color: #f8f7d5;
}

.custom-waveforms {
  margin-top: 8px;
  -webkit-user-select: none;
  user-select: none;
}

.custom-waveforms summary {
  cursor: pointer;
  font-size: 12px;
  color: #aaa;
  padding: 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.2);
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-waveforms summary:hover {
  color: #f8f7d5;
  background: rgba(255, 255, 255, 0.05);
}

.custom-waveforms[open] summary {
  margin-bottom: 4px;
}

.waveform-selector2 {
  margin: 4px 0;
  width: 100%;
}

.waveform-selector2 > h4 {
  display: block;
  font-weight: bold;
  color: #f8f7d5;
  margin-bottom: 4px;
  font-size: 14px;
}

.waveform-selector2 .waveform-options2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: 4px;
  border-left: 4px solid #ff6b6b;
  box-shadow: inset 0 0 8px #1d1c1a;
}

.waveform-selector2 .waveform-options2 div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.waveform-selector2 .waveform-options2 input[type=radio] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.waveform-selector2 .waveform-options2 input[type=radio]:after {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  background: var(--active-inner, rgb(248, 248, 238));
}

.waveform-selector2 .waveform-options2 input[type=radio]:before {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  background: var(--active-inner, rgb(248, 248, 238));
}

.waveform-selector2 .waveform-options2 label {
  font-size: 13px;
  color: #e8e8e8;
  text-align: start;
  line-height: 18px;
  cursor: pointer;
}

.waveform-selector2 .waveform-options2 label:hover {
  color: #f8f7d5;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main div#main-ui {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: linear-gradient(180deg, #1f1f1f, #141414);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  border-radius: 6px;
  padding: 18px 24px;
  padding: 18px;
}

details.scales-details {
  margin: 40px auto 12px auto;
  padding: 8px 2px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 8px #1d1c1a;
  border-radius: 6px;
  border: 2px solid #414244;
}
details.scales-details > summary {
  font-size: 14px;
  font-weight: bold;
  color: #f8f7d5;
  cursor: pointer;
  padding-left: 8px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #414244;
  box-shadow: inset 0 0 8px #413f3c;
}
details.scales-details > summary::-webkit-details-marker {
  display: none;
}
details.scales-details > summary::marker {
  content: "";
}
details.scales-details > summary::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: rgba(228, 222, 205, 0.6);
  border: 1.5px solid rgba(228, 222, 205, 0.4);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.18);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
details.scales-details[open] > summary::before {
  background: #4cd97b;
  border-color: #3bc96b;
  box-shadow: 0 0 7px rgba(76, 217, 123, 0.55);
}

@media (max-width: 767px) {
  details.scales-details {
    margin: 64px auto 12px auto;
  }
}
details.sequencer-details,
details.synth-details {
  width: 100%;
  margin: 0 auto 12px auto;
  padding: 8px 2px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 8px #1d1c1a;
  border-radius: 6px;
  border: 2px solid #414244;
}
details.sequencer-details > summary,
details.synth-details > summary {
  font-size: 14px;
  font-weight: bold;
  color: #f8f7d5;
  cursor: pointer;
  padding-left: 8px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #414244;
  box-shadow: inset 0 0 8px #413f3c;
  -webkit-user-select: none;
  user-select: none;
}
details.sequencer-details > summary::-webkit-details-marker,
details.synth-details > summary::-webkit-details-marker {
  display: none;
}
details.sequencer-details > summary::marker,
details.synth-details > summary::marker {
  content: "";
}
details.sequencer-details > summary::before,
details.synth-details > summary::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: rgba(228, 222, 205, 0.6);
  border: 1.5px solid rgba(228, 222, 205, 0.4);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.18);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
details.sequencer-details[open] > summary::before,
details.synth-details[open] > summary::before {
  background: #4cd97b;
  border-color: #3bc96b;
  box-shadow: 0 0 7px rgba(76, 217, 123, 0.55);
}

details.sequencer-details.is-collapsed > section {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0;
  padding: 0;
}
details.sequencer-details.is-collapsed > summary::before {
  background: rgba(228, 222, 205, 0.6);
  border-color: rgba(228, 222, 205, 0.4);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.18);
}

section.composer-ui {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom: 2px solid rgb(48, 47, 45);
  border-radius: 1rem;
  box-shadow: inset 0 0 16px #0f0f0c;
  margin: 0 auto;
  width: 98%;
}

@media (min-width: 480px) and (max-width: 1023px) {
  section.composer-ui {
    width: 96%;
    max-width: 96%;
    min-width: 0;
    margin-top: 8px;
  }
}
@media (max-width: 479px) {
  section.composer-ui {
    margin-top: 8px;
  }
}
section.composer-ui .app-title {
  text-align: center;
  margin-bottom: 4px;
  font-size: 32px;
}

@media (min-width: 480px) and (max-width: 767px) {
  section.composer-ui .app-title {
    font-size: 24px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  section.composer-ui .app-title {
    font-size: 28px;
  }
}
@media (max-width: 479px) {
  section.composer-ui .app-title {
    display: none;
  }
}
section.composer-ui hr {
  width: 96%;
}

div.screen {
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  border-radius: 6px;
  padding: 18px 24px;
  margin: 10px auto;
  border-radius: 6px;
  padding: 18px 24px;
  margin: 10px auto;
}

div.screen label {
  padding-left: 0.5rem;
}

section.modules {
  border-radius: 16px;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  background-color: rgb(10, 10, 10);
  box-shadow: inset 0 0 32px rgba(72, 149, 163, 0.8);
  border: solid 2px black;
  filter: drop-shadow(0 0 3px rgba(72, 149, 163, 0.65));
  width: 98%;
}

@media (min-width: 480px) and (max-width: 1023px) {
  section.modules {
    width: 100%;
  }
}
section.modules div.synths {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  -webkit-user-select: none;
  user-select: none;
}

@media (min-width: 480px) and (max-width: 1023px) {
  section.modules div.synths {
    justify-content: flex-start;
  }
}
@media (max-width: 479px) {
  section.modules div.synths {
    max-width: 265px;
  }
}
section.modules div.synths div#oscillator-options {
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  border-radius: 6px;
  padding: 18px;
  margin: 10px auto;
  margin: 10px auto;
  width: 424px;
  padding: 18px;
}

@media (min-width: 480px) and (max-width: 767px) {
  section.modules div.synths div#oscillator-options {
    width: auto;
    max-width: 90%;
    min-width: 400px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  section.modules div.synths div#oscillator-options {
    width: 424px;
    max-width: 90%;
  }
}
@media (max-width: 479px) {
  section.modules div.synths div#oscillator-options {
    width: auto;
    max-width: 280px;
  }
}
section.modules div.synths div#oscillator-options div.syn1-module {
  display: flex;
  flex-direction: column;
  width: 100%;
}

section.modules div.synths div#oscillator-options div.syn1-module .syn1-oscillators-container {
  display: flex;
  flex-direction: row;
  gap: 4px;
  width: 100%;
}

@media (max-width: 479px) {
  section.modules div.synths div#oscillator-options div.syn1-module .syn1-oscillators-container {
    flex-direction: column;
    gap: 8px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  section.modules div.synths div#oscillator-options div.syn1-module .syn1-oscillators-container {
    gap: 6px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  section.modules div.synths div#oscillator-options div.syn1-module .syn1-oscillators-container {
    gap: 8px;
  }
}
section.modules div.synths div#oscillator-options div.syn1-module .oscillator-section {
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  box-sizing: border-box;
}

@media (min-width: 480px) and (max-width: 767px) {
  section.modules div.synths div#oscillator-options div.syn1-module .oscillator-section {
    width: calc(50% - 3px);
    min-width: 200px;
    max-width: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  section.modules div.synths div#oscillator-options div.syn1-module .oscillator-section {
    width: 205px;
    min-width: 205px;
    max-width: 205px;
  }
}
@media (max-width: 479px) {
  section.modules div.synths div#oscillator-options div.syn1-module .oscillator-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
section.modules div.synths div#oscillator-options div.syn1-module .oscillator-section h2 {
  margin: 0 0 4px 0;
  font-size: 18px;
  text-align: center;
  padding: 2px 0;
}

section.modules div.synths div#oscillator-options div.syn1-module .oscillator-section h4 {
  margin: 4px 0;
  font-size: 14px;
}

section.modules div.synths div#oscillator-options div.syn1-module .oscillator-section label {
  font-size: 14px;
  margin: 2px 0;
}

section.modules div.synths div#oscillator-options div.syn1-module .oscillator-section input[type=range] {
  width: 100%;
  margin: 2px 0;
}

/* 🔇🎧 OSC Mute/Solo buttons (Apr 2026) */
.oscillator-section h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.osc-mute-solo {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.osc-mute-btn,
.osc-solo-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.osc-mute-btn:hover,
.osc-solo-btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.95);
}

.osc-mute-btn.active {
  background: #ffb300;
  color: #1a1a1a;
  border-color: #ffb300;
  box-shadow: 0 0 6px rgba(255, 179, 0, 0.6);
}

.osc-solo-btn.active {
  background: #4caf50;
  color: #1a1a1a;
  border-color: #4caf50;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.6);
}

section.modules div.synths div#oscillator-options div.syn1-module .osc1-section {
  background: rgba(107, 186, 107, 0.05);
  border-left: 3px solid #6bff90;
  border-radius: 4px;
}

section.modules div.synths div#oscillator-options div.syn1-module .osc1-section hr {
  width: 92%;
  margin: 4px auto;
}

section.modules div.synths div#oscillator-options div.syn1-module .osc2-section {
  background: rgba(186, 107, 107, 0.05);
  border-left: 3px solid #ff6b90;
  border-radius: 4px;
}

section.modules div.synths div#oscillator-options div.syn1-module .osc2-section hr {
  width: 92%;
  margin: 4px auto;
}

section.modules div.synths div#oscillator-options div.syn1-module .sub-section {
  background: rgba(200, 200, 200, 0.05);
  border-left: 3px solid #ffa500;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}

section.modules div.synths div#oscillator-options div.syn1-module .sub-section hr {
  width: 92%;
  margin: 4px auto;
}

section.modules div.synths div#oscillator-options div.syn1-module .sub-title {
  font-weight: bold;
  transition: opacity 0.3s ease;
}

section.modules div.synths div#oscillator-options div.syn1-module .noise-section {
  background: rgba(200, 200, 200, 0.05);
  border-left: 3px solid #c8c8c8;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}

section.modules div.synths div#oscillator-options div.syn1-module .noise-section hr {
  width: 92%;
  margin: 4px auto;
}

section.modules div.synths div#oscillator-options div.syn1-module .noise-title {
  font-weight: bold;
  transition: opacity 0.3s ease;
}

.waveform-selector-sub {
  margin: 4px 0;
  width: 100%;
}

.waveform-selector-sub > h4 {
  display: block;
  font-weight: bold;
  color: #f8f7d5;
  margin-bottom: 4px;
  font-size: 14px;
}

.waveform-selector-sub .waveform-options-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: 4px;
  border-left: 4px solid #ffa500;
  box-shadow: inset 0 0 8px #1d1c1a;
}

.waveform-selector-sub .waveform-options-sub div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.waveform-selector-sub .waveform-options-sub input[type=radio] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.waveform-selector-sub .waveform-options-sub input[type=radio]:after {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  z-index: 100;
  background: var(--active-inner, rgb(248, 248, 238));
}

.waveform-selector-sub .waveform-options-sub input[type=radio]:before {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  z-index: 100;
  background: var(--active-inner, rgb(248, 248, 238));
}

.waveform-selector-sub .waveform-options-sub label {
  font-size: 13px;
  color: #e8e8e8;
  text-align: start;
  line-height: 18px;
  cursor: pointer;
}

.waveform-selector-sub .waveform-options-sub label:hover {
  color: #f8f7d5;
}

.sub-mode-selector {
  margin: 4px 0;
  width: 100%;
}

.sub-mode-selector h4 {
  display: block;
  font-weight: bold;
  color: #ffa500;
  margin-bottom: 4px;
  font-size: 14px;
}

.sub-mode-selector .mode-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: 4px;
  border-left: 4px solid #ffa500;
  box-shadow: inset 0 0 8px #1d1c1a;
}

.sub-mode-selector .mode-options div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sub-mode-selector .mode-options input[type=radio] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.sub-mode-selector .mode-options input[type=radio]:after {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  z-index: 100;
  background: var(--active-inner, rgb(248, 248, 238));
}

.sub-mode-selector .mode-options input[type=radio]:before {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  z-index: 100;
  background: var(--active-inner, rgb(248, 248, 238));
}

.sub-mode-selector .mode-options label {
  font-size: 13px;
  color: #e8e8e8;
  text-align: start;
  line-height: 18px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.2s ease;
}

.sub-mode-selector .mode-options label:hover {
  color: #ffa500;
}

.sub-conditional-controls {
  display: none;
  margin: 8px 0;
  padding: 8px;
  background: rgba(255, 165, 0, 0.05);
  border-radius: 4px;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.sub-conditional-controls[style*="display: none"] {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  margin: 0;
}

.waveform-selector-noise {
  margin: 4px 0;
  width: 100%;
}

.waveform-selector-noise > h4 {
  display: block;
  font-weight: bold;
  color: #f8f7d5;
  margin-bottom: 4px;
  font-size: 14px;
}

.waveform-selector-noise .waveform-options-noise {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: 4px;
  border-left: 4px solid #c8c8c8;
  box-shadow: inset 0 0 8px #1d1c1a;
}

.waveform-selector-noise .waveform-options-noise div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.waveform-selector-noise .waveform-options-noise input[type=radio] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.waveform-selector-noise .waveform-options-noise input[type=radio]:after {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  z-index: 100;
  background: var(--active-inner, rgb(248, 248, 238));
}

.waveform-selector-noise .waveform-options-noise input[type=radio]:before {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  z-index: 100;
  background: var(--active-inner, rgb(248, 248, 238));
}

.waveform-selector-noise .waveform-options-noise label {
  font-size: 13px;
  color: #e8e8e8;
  text-align: start;
  line-height: 18px;
  cursor: pointer;
}

.waveform-selector-noise .waveform-options-noise label:hover {
  color: #f8f7d5;
}

section.modules div.synths div#oscillator-options div.syn1-module details {
  margin-top: 10px;
  cursor: pointer;
}

section.modules div.synths div#oscillator-options div.syn1-module details summary {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  padding: 4px 0;
  color: #9da3a8;
  font-size: 0.85em;
}

section.modules div.synths div#oscillator-options div.syn1-module details summary:hover {
  color: #f8f7d5;
}

section.modules div.synths div#oscillator-options div.syn1-module details small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8em;
  line-height: 1.4;
  padding-left: 8px;
  -webkit-user-select: none;
  user-select: none;
}

section.modules div.synths div#oscillator-options div.syn1-module .syn1-voice-mode-box,
section.modules div.synths div#oscillator-options div.syn1-module .syn1-presets-box {
  margin-top: 8px;
}

section.modules .options-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 6px;
  -webkit-user-select: none;
  user-select: none;
}

@media (min-width: 480px) and (max-width: 1023px) {
  section.modules .options-center {
    flex-direction: column;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  section.modules .options-center {
    flex-direction: row;
  }
}
@media (max-width: 479px) {
  section.modules .options-center {
    flex-direction: column;
  }
}
section.modules .options-center div#envelope-options,
section.modules .options-center div#LFO-options,
section.modules .options-center div#vibrato-options {
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  border-radius: 6px;
  padding: 18px;
  margin: 10px auto;
  padding: 18px;
  margin: 4px auto;
  min-width: 160px;
  max-width: 200px;
}

section.modules .options-center div#envelope-options label,
section.modules .options-center div#vibrato-options label {
  padding-left: 0.5rem;
}

section.modules .options-center div#envelope-options {
  height: auto;
  width: 200px;
}

section.modules .options-center div#vibrato-options {
  height: auto;
  width: 200px;
}

section.modules .options-center div#vibrato-options details {
  padding: 6px;
}

section.modules .options-right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  -webkit-user-select: none;
  user-select: none;
}

@media (min-width: 480px) and (max-width: 1023px) {
  section.modules .options-right {
    margin-top: 4px;
  }
}
@media (max-width: 479px) {
  section.modules .options-right {
    flex-direction: column;
    margin-top: 0;
  }
}
section.modules .options-right div#delay-options {
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 2%, var(--color-gradient-2, rgb(35, 50, 60)) 6%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 94%, var(--color-gradient-5, rgb(85, 115, 145)) 98%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  border-radius: 6px;
  padding: 18px;
  margin: 10px auto;
  margin: 4px auto;
  min-width: 160px;
  max-width: 200px;
}

section.modules .options-right div#delay-options {
  height: auto;
  margin-top: 10px;
  width: 200px;
}

div#delay-options .subdivision-select {
  width: 100% !important;
  max-width: 100%;
  margin: 4px 0;
  box-sizing: border-box;
}

div#delay-options .stereo-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

div#delay-options .stereo-controls .left-control,
div#delay-options .stereo-controls .right-control {
  flex: 1;
  min-width: 0;
}

div#delay-options .stereo-controls select {
  width: 100%;
}

div#delay-options label {
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}

div#delay-options .delay-time-L-value,
div#delay-options .delay-time-R-value,
div#delay-options #delay-time-L-value,
div#delay-options #delay-time-R-value {
  font-weight: bold;
  color: #c9cf83;
  font-size: 11px;
}

.delay-option-d-separator {
  margin: 20px 0;
  border-color: #444;
}

small.delay-option-d-description {
  font-size: 0.85em;
  margin: 4px;
  padding: 4px;
}

.adsr-curves-section {
  margin-top: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border-left: 3px solid #eae166;
  box-shadow: inset 0 0 8px #1d1c1a;
}

.adsr-curves-section h4 {
  margin-bottom: 8px;
  color: #f8f4ce;
  font-size: 14px;
  font-weight: bold;
  padding: 0;
}

.adsr-curve-select {
  width: auto;
  max-width: 96%;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
  font-size: 14px;
}

.adsr-epsilon-input {
  width: 80px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
  appearance: none;
  background-color: #c9cf83;
  box-shadow: inset 0px 0px 6px;
}

.control-group.advanced {
  opacity: 0.7;
  border-top: 1px dashed #ccc;
  padding: 4px 6px;
  margin-top: 10px;
}

.control-group.advanced:hover {
  opacity: 1;
}

small {
  color: rgba(255, 255, 255, 0.75);
}

/* === OSCILLATOR MODE SELECTOR === */
.oscillator-mode-selector {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 10px 0;
}

.oscillator-mode-selector input[type=radio] {
  margin-right: 5px;
}

.oscillator-mode-selector label {
  font-weight: bold;
  color: #f8f7d5;
}

.hidden {
  display: none !important;
}

section.controls {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

section.controls label {
  padding-left: 0;
}

label.pattern-length-label {
  padding-left: 0.5rem;
}

section.controls div#note-type {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
}

section.controls label.note-type-select {
  font-size: 16px;
}

section.controls select#note-type-select {
  width: 50px;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 4px;
  text-align: center;
  text-align-last: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-position: right 2px center;
  background-size: 12px;
}

section.controls div#note-selects-div {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  justify-items: center;
  align-items: flex-start;
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, rgb(104, 103, 99) 1%, rgb(41, 40, 38) 2%, rgb(48, 47, 43) 50%, rgb(44, 43, 41) 98%, rgb(83, 83, 78) 99%, rgb(15, 15, 14) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, rgb(104, 103, 99) 1%, rgb(41, 40, 38) 2%, rgb(48, 47, 43) 50%, rgb(44, 43, 41) 98%, rgb(83, 83, 78) 99%, rgb(15, 15, 14) 100%);
  background: linear-gradient(90deg, rgb(19, 19, 19) 0%, rgb(99, 99, 99) 1%, rgb(42, 42, 42) 2%, rgb(44, 44, 44) 50%, rgb(44, 44, 44) 98%, rgb(76, 76, 76) 99%, rgb(13, 13, 13) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 2px solid rgb(65, 64, 61);
  border-bottom: 2px solid rgb(48, 47, 45);
  border-radius: 1rem;
  box-shadow: inset 0 0 16px #0f0f0c;
  padding: 18px;
  margin: 6px auto;
}
@media (min-width: 768px) and (max-width: 1023px) {
  section.controls div#note-selects-div {
    grid-template-columns: repeat(16, 1fr);
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  section.controls div#note-selects-div {
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (max-width: 479px) {
  section.controls div#note-selects-div {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 374px) {
  section.controls div#note-selects-div {
    grid-template-columns: repeat(4, 1fr);
  }
}

section.controls div#note-selects-div .step-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

section.controls div#note-selects-div .step-container .step-velocity-modifier,
section.controls div#note-selects-div .step-container .step-behavior-modifier {
  width: 36px !important;
  height: 24px;
  font-size: 11px;
  text-align: center;
  margin: 1px 0;
  background: #1a1a1a;
  color: #f8f7d5;
  border: 1px solid #404040;
  border-radius: 3px;
  padding: 1px;
}

section.controls div#note-selects-div .step-container .modifier-indicator {
  font-size: 10px;
  color: #c9cf83;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  margin-top: 2px;
  min-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width: 0\0 ) {
  select {
    background: none\9 ;
    padding: 5px\9 ;
  }
}
select {
  /* Firefox: scrollbar-width: none; provoque des erreurs de compilation et n'est pas supporté partout */
  -ms-overflow-style: none;
  /* IE 10+ */
  /* Chrome, Safari, Opera */
}

select::-webkit-scrollbar {
  display: none;
}

select:not(.step-velocity-modifier):not(.step-behavior-modifier) {
  color: #2c2507 !important;
}

select:not(.step-velocity-modifier):not(.step-behavior-modifier):focus option:checked,
select:not(.step-velocity-modifier):not(.step-behavior-modifier) option:checked {
  background-color: rgb(184.988372093, 192.7674418605, 94.2325581395) !important;
  color: #2c2507 !important;
}

select:not(.step-velocity-modifier):not(.step-behavior-modifier) option {
  text-align: center !important;
  text-align-last: center !important;
  padding: 4px 8px !important;
  background-color: #c9cf83 !important;
  color: #2c2507 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

@media (max-width: 767px) {
  select.form-select,
  select:not(.step-velocity-modifier):not(.step-behavior-modifier) {
    max-height: 180px !important;
    max-width: 280px !important;
    font-size: 12px !important;
    padding: 3px 6px !important;
    margin: 2px auto !important;
  }
  .syn1-presets-select,
  #vu-source-select,
  .adsr-curve-select,
  .subdivision-select,
  #filter-type-select,
  #adsr-preset-select {
    max-width: 280px !important;
    width: auto !important;
    font-size: 11px !important;
    padding: 4px 6px !important;
    margin: 4px auto !important;
    display: block !important;
  }
  .syn1-voice-mode-select,
  #syn1-voice-mode {
    display: none !important;
  }
  select.form-select option,
  select:not(.step-velocity-modifier):not(.step-behavior-modifier) option {
    font-size: 11px !important;
    padding: 2px 4px !important;
  }
  .note-type-select,
  .note-repeat-select-label,
  .syn1-presets-box label,
  .syn1-voice-mode-box label {
    font-size: 11px !important;
  }
  .syn1-presets-box,
  .syn1-voice-mode-box,
  #note-type,
  div#delay-options .stereo-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}
aside {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #1f1f1f, #141414);
  border: 2px solid rgb(65, 64, 61);
  border-radius: 0.5rem;
  box-shadow: inset 0 0 16px #0f0f0c;
  padding: 12px;
  margin: 8px auto;
  min-width: 200px;
}

details {
  -webkit-user-select: text;
  user-select: text;
  padding-left: 8px;
}

.info-text, .filter-info {
  display: block;
  padding: 8px 4px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.info-text small, .filter-info small {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.9);
  display: block;
  margin-top: 4px;
}

.filter-adsr-section summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 0;
  color: var(--text-primary, #fff);
}
.filter-adsr-section summary:hover {
  color: var(--accent-color, #4a9eff);
}

.filter-adsr-controls {
  padding: 8px 0;
}

#lfo-filter-mode-indicator {
  display: none;
  margin-left: 8px;
  font-size: 0.8em;
  color: #4caf50;
  font-weight: 600;
  animation: pulse-indicator 2s ease-in-out infinite;
}

#cutoff-mode-hint {
  color: #4caf50;
  font-size: 0.85em;
  margin-left: 4px;
  font-style: italic;
  opacity: 0.9;
}

#filter-cutoff-warn {
  display: none;
  font-size: 0.78em;
  margin-left: 6px;
  font-weight: 600;
  vertical-align: middle;
}

#filter-cutoff-control[data-warn-level=low] {
  accent-color: #f5a623;
}
#filter-cutoff-control[data-warn-level=low] ~ #filter-cutoff-warn {
  color: #f5a623;
}
#filter-cutoff-control[data-warn-level=high] {
  accent-color: #e53935;
}
#filter-cutoff-control[data-warn-level=high] ~ #filter-cutoff-warn {
  color: #e53935;
}

#filter-cutoff-help {
  font-size: 0.75em;
  display: block;
  margin-top: 2px;
}
#filter-cutoff-help span {
  color: #4caf50;
}

@keyframes pulse-indicator {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
details summary {
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::marker {
  content: "";
}
details summary::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: rgba(228, 222, 205, 0.6);
  border: 1.5px solid rgba(228, 222, 205, 0.4);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.18);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

details[open] > summary::before {
  background: #4cd97b;
  border-color: #3bc96b;
  box-shadow: 0 0 7px rgba(76, 217, 123, 0.55);
}

.formula-options {
  margin-top: 0.5em;
  display: flex;
  align-items: center;
  gap: 1em;
}

.pedagogic-toggle,
.precision-toggle {
  display: inline-flex;
  margin: 0 auto;
  align-items: center;
  height: auto;
  gap: 0.5em;
  font-size: 1em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.precision-toggle,
.precision-toggle + span {
  display: none !important;
}

.pedagogic-toggle input[type=checkbox],
.precision-toggle input[type=checkbox] {
  accent-color: #1d1c1a;
  width: 1.15em;
  height: 1.15em;
  margin: 0;
}

div#oscillator-options .syn1-module {
  margin-top: 0;
  margin-bottom: 0;
}

div#oscillator-options .oscillator-section {
  margin-bottom: 15px;
  box-shadow: inset 0 0 4px #202016;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

@media (max-width: 479px) {
  div#oscillator-options .oscillator-section {
    scroll-margin-top: 10px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  div#oscillator-options .oscillator-section {
    scroll-margin-top: 8px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  div#oscillator-options .oscillator-section {
    scroll-margin-top: 6px;
  }
}
div#oscillator-options h4,
div#oscillator-options h2 {
  margin-bottom: 2px;
  padding: 0;
}

div#oscillator-options hr {
  margin: 8px suto;
  width: 98%;
}

div#oscillator-options .stereo-controls .control-row {
  margin-bottom: 8px;
}

div#oscillator-options .waveform-selector1,
div#oscillator-options .waveform-selector2 {
  margin-bottom: 4px;
}

div#oscillator-options .waveform-selector1 h4,
div#oscillator-options .waveform-selector1 h2,
div#oscillator-options .waveform-selector2 h4,
div#oscillator-options .waveform-selector2 h2 {
  margin: 0;
  padding: 0;
}

div#oscillator-options .preset-section {
  margin-top: 4px;
  padding-top: 4px;
}

div#oscillator-options details {
  padding: 6px;
}

div.logo {
  background: #0f0f0c;
  background: -webkit-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  background: -moz-linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  background: linear-gradient(90deg, rgb(15, 15, 12) 0%, var(--color-gradient-1, rgb(120, 150, 180)) 1%, var(--color-gradient-2, rgb(35, 50, 60)) 2%, var(--color-gradient-3, rgb(40, 60, 75)) 50%, var(--color-gradient-4, rgb(35, 50, 60)) 98%, var(--color-gradient-5, rgb(85, 115, 145)) 99%, rgb(15, 15, 12) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F0C", endColorstr="#0F0F0C", GradientType=1);
  border-top: 1.5px solid rgb(100, 100, 99);
  border-bottom: 1.5px solid rgb(73, 73, 71);
  box-shadow: inset 0 0 16px #111111;
  filter: drop-shadow(0 0 4px #8b8b87);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px 12px 4px 12px;
  margin: 10px auto;
  min-width: 200px;
}

div.logo span {
  border-radius: 16px;
  filter: drop-shadow(0 4px 10px #1c1c15);
  border-top: 8px solid rgb(186, 176, 107);
  border-left: 8px solid rgb(109, 103, 61);
  border-bottom: 8px solid rgb(67, 65, 42);
  border-right: 8px solid rgb(67, 64, 52);
  width: 148px;
  height: 84px;
  box-sizing: border-box;
}

#copyright {
  margin-top: 4px;
  font-size: 0.75rem;
  color: #aaa;
  text-align: center;
}
#copyright p {
  margin: 2px 0;
  padding: 0;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.modal-overlay.modal-hidden {
  display: none;
}

.modal-overlay[style*="display: flex"] {
  display: flex !important;
}

#dev-settings-close {
  background: none;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  border: solid 1px rgb(224, 218, 199);
  font-size: 36px;
  font-weight: bold;
  color: #fcf8f1;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

#dev-settings-close:hover {
  background: rgba(83, 82, 82, 0.55);
}

.dev-settings-modal {
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
}

.dev-settings-modal .modal-body {
  padding: 20px;
  overflow-y: auto;
  max-height: 60vh;
}

.dev-settings-modal .dev-settings-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(107, 93, 30, 0.3);
}

.dev-settings-modal .dev-settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.dev-settings-modal .dev-settings-section h3 {
  color: #f8f7d5;
  font-size: 18px;
  margin: 0 0 16px 0;
  font-weight: 600;
}

.dev-settings-modal .setting-item {
  margin-bottom: 16px;
}

.dev-settings-modal .setting-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.dev-settings-modal .setting-item label,
.dev-settings-modal .setting-item .setting-label {
  color: #f8f7d5;
  font-size: 16px;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.dev-settings-modal .setting-item .setting-description {
  color: rgba(248, 247, 213, 0.7);
  font-size: 14px;
  margin: 8px 0 0 0;
  line-height: 1.4;
}
.dev-settings-modal .setting-item .setting-description .text-stop {
  color: #ff6b6b;
  font-weight: 600;
}
.dev-settings-modal .setting-item .setting-description .text-add {
  color: #51cf66;
  font-weight: 600;
}

.dev-settings-modal .setting-item .setting-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.dev-settings-modal .setting-item .setting-info .info-label {
  color: rgba(248, 247, 213, 0.8);
  font-size: 14px;
}

.dev-settings-modal .setting-item .setting-info .status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dev-settings-modal .setting-item .setting-info .status-badge.status-enabled {
  background: rgba(46, 160, 67, 0.2);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.dev-settings-modal .setting-item .setting-info .status-badge.status-disabled {
  background: rgba(220, 38, 38, 0.2);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.dev-settings-modal .toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.dev-settings-modal .toggle-label input[type=checkbox] {
  appearance: none;
  position: relative;
  width: 50px;
  height: 26px;
  background: rgba(220, 38, 38, 0.3);
  border: 2px solid rgba(248, 113, 113, 0.5);
  border-radius: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.dev-settings-modal .toggle-label input[type=checkbox]::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f87171;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dev-settings-modal .toggle-label input[type=checkbox]:checked {
  background: rgba(46, 160, 67, 0.3);
  border-color: rgba(74, 222, 128, 0.5);
}

.dev-settings-modal .toggle-label input[type=checkbox]:checked::before {
  left: 26px;
  background: #4ade80;
}

.dev-settings-modal .toggle-label input[type=checkbox]:hover {
  opacity: 0.9;
}

.dev-settings-modal .toggle-label .toggle-text {
  color: #f8f7d5;
  font-size: 16px;
  font-weight: 500;
}

.dev-settings-modal input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #2a2a2a 0%, #1a1a1a 100%);
  border-radius: 3px;
  border: 1px solid #404040;
  outline: none;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  margin: 8px 0;
}
.dev-settings-modal input[type=range]:hover {
  opacity: 1;
}
.dev-settings-modal input[type=range]:focus {
  outline: 2px solid rgba(201, 207, 131, 0.5);
  outline-offset: 2px;
}
.dev-settings-modal input[type=range]::-webkit-slider-track {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #2a2a2a 0%, #1a1a1a 100%);
  border-radius: 3px;
  border: 1px solid #404040;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.dev-settings-modal input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8f7d5, #c9cf83);
  border: 2px solid #8a8970;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.15s ease;
}
.dev-settings-modal input[type=range]::-webkit-slider-thumb:hover {
  background: linear-gradient(145deg, #fff, #f8f7d5);
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
.dev-settings-modal input[type=range]::-webkit-slider-thumb:active {
  transform: scale(1.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.dev-settings-modal input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #2a2a2a 0%, #1a1a1a 100%);
  border-radius: 3px;
  border: 1px solid #404040;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.dev-settings-modal input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8f7d5, #c9cf83);
  border: 2px solid #8a8970;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.15s ease;
}
.dev-settings-modal input[type=range]::-moz-range-thumb:hover {
  background: linear-gradient(145deg, #fff, #f8f7d5);
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
.dev-settings-modal input[type=range]::-moz-range-thumb:active {
  transform: scale(1.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.dev-settings-modal input[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  background: transparent;
  border-color: transparent;
  color: transparent;
  border-radius: 3px;
}
.dev-settings-modal input[type=range]::-ms-fill-lower {
  background: #2a2a2a;
  border: 1px solid #404040;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.dev-settings-modal input[type=range]::-ms-fill-upper {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.dev-settings-modal input[type=range]::-ms-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8f7d5, #c9cf83);
  border: 2px solid #8a8970;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.dev-settings-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0 0 10px 10px;
}

.dev-settings-modal .modal-footer button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.dev-settings-modal .modal-footer button.btn-primary {
  background: linear-gradient(180deg, rgb(125, 106, 10), rgb(107, 93, 30));
  color: #000;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dev-settings-modal .modal-footer button.btn-primary:hover {
  filter: brightness(1.1);
}

.dev-settings-modal .modal-footer button.btn-primary:active {
  transform: translateY(0);
}

.dev-settings-modal .modal-footer button.btn-secondary {
  background: rgba(107, 93, 30, 0.2);
  color: #f8f7d5;
  border: 1px solid rgba(107, 93, 30, 0.5);
}

.dev-settings-modal .modal-footer button.btn-secondary:hover {
  background: rgba(107, 93, 30, 0.3);
}

.header-btn.dev-btn {
  background: linear-gradient(180deg, rgb(80, 80, 90), rgb(60, 60, 70));
  border: 1px solid rgba(150, 150, 160, 0.3);
  color: #f8f7d5;
}

.header-btn.dev-btn:hover {
  filter: brightness(1.15);
}

.dev-settings-modal select {
  width: 100%;
  padding: 0px 8px;
  border-radius: 6px;
  border: 1px solid rgba(107, 93, 30, 0.5);
  color: #f8f7d5;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dev-settings-modal select:hover {
  border-color: rgba(107, 93, 30, 0.7);
  color: #f8f7d5;
}
.dev-settings-modal select:focus {
  outline: none;
  border-color: rgba(186, 174, 84, 0.8);
  box-shadow: 0 0 0 2px rgba(186, 174, 84, 0.2);
  color: #f8f7d5;
}
.dev-settings-modal select option {
  background: #2a2a20;
  color: #f8f7d5;
  padding: 8px 0px;
  font-weight: 500;
}
.dev-settings-modal select option:hover, .dev-settings-modal select option:focus, .dev-settings-modal select option:checked {
  background: #3a3a30;
  color: #ffcc00;
}

.dev-settings-modal .slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dev-settings-modal .slider-container input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, rgba(107, 93, 30, 0.3), rgba(186, 174, 84, 0.5));
  outline: none;
  cursor: pointer;
}
.dev-settings-modal .slider-container input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgb(186, 174, 84), rgb(125, 106, 10));
  border: 2px solid rgba(248, 247, 213, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.dev-settings-modal .slider-container input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  border-color: rgba(248, 247, 213, 0.8);
}
.dev-settings-modal .slider-container input[type=range]::-webkit-slider-thumb:active {
  transform: scale(1.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.dev-settings-modal .slider-container input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgb(186, 174, 84), rgb(125, 106, 10));
  border: 2px solid rgba(248, 247, 213, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.dev-settings-modal .slider-container input[type=range]::-moz-range-thumb:hover {
  transform: scale(1.1);
  border-color: rgba(248, 247, 213, 0.8);
}
.dev-settings-modal .slider-container input[type=range]::-moz-range-thumb:active {
  transform: scale(1.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.dev-settings-modal .slider-container .slider-value {
  min-width: 40px;
  text-align: right;
  color: rgba(248, 247, 213, 0.9);
  font-size: 14px;
  font-weight: 600;
  font-family: "Courier New", monospace;
}

.theme-preset-btn {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid rgba(110, 99, 31, 0.5);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(163, 153, 72, 0.3), rgba(88, 76, 11, 0.3));
  color: #f8f7d5;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.theme-preset-btn:hover {
  background: linear-gradient(180deg, rgba(186, 174, 84, 0.5), rgba(99, 86, 21, 0.5));
  border-color: rgba(163, 153, 72, 0.8);
  transform: translateY(-1px);
}

.theme-preset-btn:active,
.theme-preset-btn.active {
  background: linear-gradient(180deg, rgba(186, 174, 84, 0.7), rgba(110, 99, 31, 0.7));
  border-color: #c9cf83;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.touchbar-repeat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 4px 8px;
  background: rgba(80, 80, 90, 0.3);
  border: 1px solid rgba(150, 150, 160, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.touchbar-repeat-label:hover {
  background: rgba(80, 80, 90, 0.5);
  border-color: rgba(255, 204, 0, 0.5);
}

.touchbar-repeat-label .touchbar-repeat-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #ffcc00;
}

.touchbar-repeat-label .touchbar-repeat-checkbox:checked + .touchbar-repeat-text {
  color: #ffcc00;
  font-weight: bold;
}

.touchbar-repeat-label .touchbar-repeat-text {
  font-size: 13px;
  color: #f8f7d5;
  transition: color 0.2s ease;
}

.touchbar-wrapper {
  position: relative;
  margin: 4px auto 16px auto;
  max-width: 1200px;
  padding: 0 16px;
}

.touchbar-label,
.modifiers-label {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: #e0e0e0;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.6), 0 3px 4px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
  background: linear-gradient(180deg, #f0f0f0 0%, #b0b0b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.touchbar-velocity-badge {
  position: absolute;
  top: 8px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  transition: opacity 0.2s ease, background 0.15s ease;
  z-index: 100;
  pointer-events: none;
  user-select: none;
}
.touchbar-velocity-badge .velocity-icon {
  font-size: 14px;
  line-height: 1;
}
.touchbar-velocity-badge .velocity-value {
  font-family: "Courier New", monospace;
  font-size: 12px;
}
.touchbar-velocity-badge.velocity-low {
  background: rgba(76, 175, 80, 0.85);
  border-color: rgba(129, 199, 132, 0.5);
}
.touchbar-velocity-badge.velocity-mid {
  background: rgba(255, 193, 7, 0.85);
  border-color: rgba(255, 224, 130, 0.5);
}
.touchbar-velocity-badge.velocity-high {
  background: rgba(244, 67, 54, 0.85);
  border-color: rgba(239, 154, 154, 0.5);
}
.touchbar-velocity-badge.hidden {
  opacity: 0;
  pointer-events: none;
}

.touchbar-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  height: auto;
  min-height: 84px;
  padding: clamp(6px, 1.5vw, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
  color: #83a5cf;
  background: linear-gradient(180deg, rgb(33, 33, 33) 0%, rgb(33, 33, 33) 25%, rgb(33, 33, 33) 50%, rgb(33, 33, 33) 75%, rgb(33, 33, 33) 100%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: all 0.1s ease-out;
}

.touchbar-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.05) 60%, transparent 100%);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}

.touchbar-container::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  pointer-events: none;
}

.touchbar-container.active {
  -webkit-filter: brightness(1);
  filter: brightness(1);
}

.touchbar-container.linked {
  box-shadow: 0 6px 12px rgba(255, 204, 0, 0.2), 0 2px 8px rgba(255, 204, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 8px rgba(0, 0, 0, 0.2);
}

.touchbar-grid {
  display: grid;
  grid-template-rows: repeat(var(--grid-rows, 1), var(--cell-size, 60px));
  grid-template-columns: repeat(var(--grid-cols, 16), var(--cell-size, 60px));
  gap: var(--cell-gap, 8px);
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
  z-index: 1;
}

.grid-cell {
  font-size: clamp(0.7rem, 1.8vw, 0.9rem);
  width: var(--cell-size, 60px);
  height: var(--cell-size, 60px);
  margin: 0;
  background-color: rgba(200, 200, 255, 0.15);
  border-top-left-radius: 5%;
  border-top-right-radius: 5%;
  border-bottom-left-radius: 15%;
  border-bottom-right-radius: 15%;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  will-change: filter;
  transition: filter 0.15s ease-out, box-shadow 0.15s ease-out;
  filter: brightness(0.75);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5), inset 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-align: center;
  color: #f6f8ff;
  padding-top: 2px;
}

.grid-cell.playing {
  filter: brightness(1.45);
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.25), inset 0 4px 12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.grid-cell.playing .note-label {
  background: rgba(19, 149, 172, 0.35);
  box-shadow: inset 0 0 6px rgba(21, 28, 29, 0.95);
  color: var(--accent-color, #fbff00);
}

.grid-cell.debug {
  border: 1px dashed rgba(255, 0, 0, 0.3);
  background: rgba(255, 0, 0, 0.05);
}

.grid-cell.out-of-range,
.step-container.out-of-range,
.seq-select.out-of-range {
  opacity: 0.3;
  pointer-events: none;
  filter: grayscale(0.8) brightness(0.55);
}

select.out-of-range {
  opacity: 0.4;
  pointer-events: none;
}

.note-label {
  background: rgba(15, 15, 15, 0.45);
  padding: 3px 0 2px 0;
  border-radius: 4px;
  display: inline-block;
  letter-spacing: 0.5px;
  box-shadow: inset 0 0 4px rgba(200, 200, 220, 0.5);
  min-width: 54px;
  pointer-events: none;
}

.note-label.live {
  background: rgba(255, 230, 0, 0.18);
  box-shadow: inset 0 0 6px rgba(255, 230, 0, 0.55);
  color: var(--accent-color, #fbff00);
}

@media (min-width: 900px) and (max-width: 1199px) {
  .touchbar-wrapper {
    max-width: 96%;
    padding: 0 12px;
  }
  .touchbar-container {
    border-radius: 16px;
  }
  section.controls div#note-selects-div {
    grid-template-columns: repeat(16, 1fr);
  }
  section.modules {
    width: 96%;
    padding: 16px 8px;
  }
  section.composer-ui {
    width: 96%;
  }
  div#main-ui {
    padding: 12px;
  }
}
@media (max-width: 768px) {
  .touchbar-container {
    border-radius: 16px;
  }
  .touchbar-velocity-badge {
    top: 6px;
    right: 12px;
    padding: 3px 8px;
    font-size: 12px;
    gap: 5px;
  }
  .touchbar-velocity-badge .velocity-icon {
    font-size: 13px;
  }
  .touchbar-velocity-badge .velocity-value {
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  .touchbar-wrapper {
    padding: 0 2px;
    margin: 12px auto 6px auto;
  }
  .touchbar-container {
    border-radius: 10px;
    padding: 6px;
    min-height: auto;
  }
  .touchbar-velocity-badge {
    top: 4px;
    right: 8px;
    padding: 2px 6px;
    font-size: 11px;
    gap: 4px;
  }
  .touchbar-velocity-badge .velocity-icon {
    font-size: 12px;
  }
  .touchbar-velocity-badge .velocity-value {
    font-size: 10px;
  }
  .syn1-voice-mode-box details {
    display: none;
  }
}
#swing-mode-section {
  margin: 12px 0;
  padding: 8px;
  background: rgba(40, 40, 50, 0.3);
  border-radius: 6px;
}

#swing-mode-section .swing-mode-label {
  display: block;
  font-size: 13px;
  color: #f8f7d5;
  margin-bottom: 8px;
  font-weight: 500;
}

#swing-mode-section .swing-mode-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#swing-mode-section .swing-radio-label {
  position: relative;
  flex: 1;
  min-width: 100px;
}

#swing-mode-section .swing-radio-label input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#swing-mode-section .swing-radio-label span {
  display: block;
  padding: 8px 12px;
  background: rgba(80, 80, 90, 0.3);
  border: 1px solid rgba(150, 150, 160, 0.3);
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  color: #f8f7d5;
  transition: all 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}

#swing-mode-section .swing-radio-label span:hover {
  background: rgba(80, 80, 90, 0.5);
  border-color: rgba(255, 204, 0, 0.5);
}

#swing-mode-section .swing-radio-label input[type=radio]:checked + span {
  background: rgba(255, 204, 0, 0.2);
  border-color: #ffcc00;
  color: #ffcc00;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.3);
}

#legato-quick-section {
  display: flex;
  gap: 10px;
  margin: 12px 0;
  flex-wrap: wrap;
}
#legato-quick-section .quick-box {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 8px #1d1c1a;
  border-radius: 6px;
  flex: 1 1 auto;
}
#legato-quick-section .voice-mode-box {
  border-left: 6px solid #90c6ff;
  min-width: 130px;
}
#legato-quick-section .voice-mode-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: #f8f7d5;
  font-weight: bold;
}
#legato-quick-section .voice-mode-toggle-label input[type=checkbox] {
  appearance: none;
  position: relative;
  width: 44px;
  height: 22px;
  background: rgba(30, 60, 120, 0.3);
  border: 2px solid rgba(144, 198, 255, 0.4);
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
#legato-quick-section .voice-mode-toggle-label input[type=checkbox]::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #90c6ff;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
#legato-quick-section .voice-mode-toggle-label input[type=checkbox]:checked {
  background: rgba(40, 100, 210, 0.4);
  border-color: rgba(144, 198, 255, 0.8);
}
#legato-quick-section .voice-mode-toggle-label input[type=checkbox]:checked::before {
  left: 24px;
  background: #60b0ff;
  box-shadow: 0 0 6px rgba(144, 198, 255, 0.6);
}
#legato-quick-section .legato-box {
  border-left: 6px solid #4ade80;
  min-width: 150px;
}
#legato-quick-section .legato-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: #f8f7d5;
  font-weight: bold;
  margin-bottom: 8px;
}
#legato-quick-section .legato-toggle-label input[type=checkbox] {
  appearance: none;
  position: relative;
  width: 44px;
  height: 22px;
  background: rgba(220, 38, 38, 0.3);
  border: 2px solid rgba(248, 113, 113, 0.5);
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
#legato-quick-section .legato-toggle-label input[type=checkbox]::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f87171;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
#legato-quick-section .legato-toggle-label input[type=checkbox]:checked {
  background: rgba(46, 160, 67, 0.3);
  border-color: rgba(74, 222, 128, 0.6);
}
#legato-quick-section .legato-toggle-label input[type=checkbox]:checked::before {
  left: 24px;
  background: #4ade80;
}
#legato-quick-section .voice-mode-toggle-label .vm-label-on {
  display: none;
}
#legato-quick-section .voice-mode-toggle-label .vm-label-off {
  display: inline;
}
#legato-quick-section .voice-mode-toggle-label input[type=checkbox]:checked ~ .vm-label-on {
  display: inline;
}
#legato-quick-section .voice-mode-toggle-label input[type=checkbox]:checked ~ .vm-label-off {
  display: none;
}
#legato-quick-section .voice-mode-toggle-label input[type=checkbox]:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
#legato-quick-section .voice-mode-toggle-label input[type=checkbox]:disabled:checked {
  background: rgba(40, 100, 210, 0.35);
  border-color: rgba(144, 198, 255, 0.55);
}
#legato-quick-section .voice-mode-toggle-label input[type=checkbox]:disabled:checked::before {
  background: #60b0ff;
  box-shadow: 0 0 5px rgba(144, 198, 255, 0.45);
}
#legato-quick-section .voice-mode-toggle-label input[type=checkbox]:disabled ~ .vm-label-on,
#legato-quick-section .voice-mode-toggle-label input[type=checkbox]:disabled ~ .vm-label-off {
  color: #a8c8f0;
}
#legato-quick-section .voice-mode-toggle-label .vm-lock-badge {
  font-size: 10px;
  opacity: 0.6;
  margin-left: -2px;
  user-select: none;
  pointer-events: none;
}
#legato-quick-section #portamento-time-container .portamento-label {
  display: block;
  font-size: 0.82rem;
  color: #c9cf83;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  margin-bottom: 2px;
}
#legato-quick-section #portamento-time-container input[type=range] {
  width: 100%;
}
#legato-quick-section .rec-box {
  border-left: 6px solid #f44336;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#legato-quick-section .touchbar-rec-btn {
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 6px;
  border: 2px solid #b71c1c;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #c62828, #7b1a1a);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  width: 100%;
}
#legato-quick-section .touchbar-rec-btn:hover {
  background: linear-gradient(180deg, #e53935, #b71c1c);
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
}
#legato-quick-section .touchbar-rec-btn.rec-active {
  background: linear-gradient(180deg, #ff1744, #c62828);
  border-color: #ff6090;
  color: #fff;
  animation: recPulse 1s ease-in-out infinite alternate;
  box-shadow: 0 0 14px rgba(255, 23, 68, 0.7);
}
#legato-quick-section .touchbar-rec-btn.rec-active.rec-warn {
  background: linear-gradient(180deg, #ff9100, #e65100);
  border-color: #ffcc02;
  animation: recWarnPulse 0.8s ease-in-out infinite alternate;
  box-shadow: 0 0 14px rgba(255, 145, 0, 0.7);
}
#legato-quick-section .rec-hint {
  font-size: 0.72rem;
  color: #999;
  text-align: center;
  font-style: italic;
}
#legato-quick-section .mpe-box {
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#legato-quick-section .touchbar-mpe-btn {
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 6px;
  border: 2px solid #1565c0;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #1976d2, #0d47a1);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  width: 100%;
}
#legato-quick-section .touchbar-mpe-btn:hover {
  background: linear-gradient(180deg, #42a5f5, #1565c0);
  box-shadow: 0 0 10px rgba(66, 165, 245, 0.5);
}
#legato-quick-section .touchbar-mpe-btn.mpe-active {
  background: linear-gradient(180deg, #29b6f6, #0288d1);
  border-color: #81d4fa;
  box-shadow: 0 0 10px rgba(41, 182, 246, 0.5);
}
#legato-quick-section .touchbar-mpe-btn.mpe-disabled {
  background: linear-gradient(180deg, #546e7a, #263238);
  border-color: #607d8b;
  color: #b0bec5;
  box-shadow: none;
}
#legato-quick-section .mpe-hint {
  font-size: 0.72rem;
  color: #999;
  text-align: center;
  font-style: italic;
}
#legato-quick-section .sens-box {
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#legato-quick-section .touchbar-sens-btn {
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 6px;
  border: 2px solid #4a148c;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #6a1b9a, #38006b);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  width: 100%;
}
#legato-quick-section .touchbar-sens-btn:hover {
  background: linear-gradient(180deg, #ab47bc, #6a1b9a);
  box-shadow: 0 0 10px rgba(171, 71, 188, 0.5);
}
#legato-quick-section .touchbar-sens-btn.sens-low {
  background: linear-gradient(180deg, #5c6bc0, #283593);
  border-color: #7986cb;
}
#legato-quick-section .touchbar-sens-btn.sens-med {
  background: linear-gradient(180deg, #8e24aa, #4a148c);
  border-color: #ce93d8;
  box-shadow: 0 0 10px rgba(186, 104, 200, 0.45);
}
#legato-quick-section .touchbar-sens-btn.sens-high {
  background: linear-gradient(180deg, #d81b60, #880e4f);
  border-color: #f48fb1;
  box-shadow: 0 0 10px rgba(244, 143, 177, 0.55);
}
#legato-quick-section .touchbar-sens-btn.sens-max {
  background: linear-gradient(180deg, #e53935, #b71c1c);
  border-color: #ef9a9a;
  box-shadow: 0 0 12px rgba(239, 154, 154, 0.65);
}
#legato-quick-section .sens-hint {
  font-size: 0.72rem;
  color: #999;
  text-align: center;
  font-style: italic;
}
#legato-quick-section .slide-box {
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#legato-quick-section .touchbar-slide-btn {
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 6px;
  border: 2px solid #c66900;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #455a64, #263238);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  width: 100%;
}
#legato-quick-section .touchbar-slide-btn:hover {
  background: linear-gradient(180deg, #ff9800, #ef6c00);
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
}
#legato-quick-section .touchbar-slide-btn.slide-active {
  background: linear-gradient(180deg, #ff9800, #ef6c00);
  border-color: #ffb74d;
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 152, 0, 0.7);
}
#legato-quick-section .touchbar-slide-btn.slide-disabled {
  background: linear-gradient(180deg, #455a64, #263238);
  border-color: #607d8b;
  color: #b0bec5;
  box-shadow: none;
}
#legato-quick-section .slide-hint {
  font-size: 0.72rem;
  color: #999;
  text-align: center;
  font-style: italic;
}

@keyframes recPulse {
  from {
    box-shadow: 0 0 8px rgba(255, 23, 68, 0.5);
  }
  to {
    box-shadow: 0 0 18px rgba(255, 23, 68, 0.9);
  }
}
@keyframes recWarnPulse {
  from {
    box-shadow: 0 0 8px rgba(255, 145, 0, 0.5);
  }
  to {
    box-shadow: 0 0 22px rgba(255, 145, 0, 0.95);
  }
}
section.controls div#note-selects-div .step-container.current-step {
  background: rgba(228, 193, 101, 0.15);
  border-color: rgba(228, 193, 101, 0.4);
  box-shadow: 0 0 8px rgba(228, 193, 101, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: step-pulse 0.3s ease-out;
}

section.controls div#note-selects-div .step-container.current-step select {
  border-color: rgba(228, 193, 101, 0.4);
}

@keyframes step-pulse {
  0% {
    box-shadow: 0 0 16px rgba(228, 193, 101, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 8px rgba(228, 193, 101, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}
#swing-mode-section .swing-radio-label input[type=radio]:focus + span {
  outline: 2px solid rgba(255, 204, 0, 0.5);
  outline-offset: 2px;
}

.prog-apply-btn,
.accord-genere-btn,
#legato-quick-section .quick-box,
#legato-quick-section .touchbar-rec-btn,
#legato-quick-section .touchbar-slide-btn,
#legato-quick-section .touchbar-mpe-btn,
#legato-quick-section .touchbar-sens-btn {
  box-sizing: border-box;
}

@media (min-width: 480px) and (max-width: 767px) {
  .modules-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .modules-container > .module {
    width: 100%;
    padding: 10px;
  }
}
@media (max-width: 479px) {
  .chord-progression-module,
  .module.arpeggiator-module {
    padding: 0;
  }
  .prog-structure-select,
  .accord-structure-select,
  .prog-preset-row select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .prog-apply-btn,
  .accord-genere-btn {
    font-size: 13px;
    padding: 7px 8px;
    letter-spacing: 0.5px;
  }
  .prog-apply-options-row {
    gap: 4px;
  }
}
@media (max-width: 479px) {
  #legato-quick-section {
    gap: 6px;
  }
  #legato-quick-section .quick-box {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 6px 8px;
  }
  #legato-quick-section .voice-mode-box,
  #legato-quick-section .legato-box {
    min-width: 0;
  }
  #legato-quick-section .touchbar-rec-btn,
  #legato-quick-section .touchbar-slide-btn,
  #legato-quick-section .touchbar-mpe-btn,
  #legato-quick-section .touchbar-sens-btn {
    font-size: 12px;
    padding: 5px 8px;
  }
  #legato-quick-section .rec-hint,
  #legato-quick-section .slide-hint,
  #legato-quick-section .mpe-hint,
  #legato-quick-section .sens-hint {
    font-size: 0.66rem;
  }
}