/* Dracula and Hypersyn Chord Helper Styles */
.dimmed {
  opacity: 0.45;
  filter: grayscale(0.3) brightness(0.8);
  pointer-events: none;
  transition: opacity 0.2s, background 0.2s, border 0.2s;
  background-color: #23232e !important;
  border-color: #44475a !important;
  color: #bfbfc9 !important;
}
body {
  background-color: #282a36; /* Dracula background */
  color: #f8f8f2; /* Dracula foreground */
  font-family: monospace;
  font-size: 1.25rem;
}
input[type="range"] {
  accent-color: #ff79c6;
  height: 2.2em;
  background: transparent;
  vertical-align: middle;
  margin-top: 6px;
  margin-bottom: 6px;
}
input[type="range"]::-webkit-slider-thumb {
  background: #ff79c6;
  border: 2px solid #44475a;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 6px #ff79c6;
  cursor: pointer;
  margin-top: -6px; /* Center thumb vertically */
}
#volumeLabel {
  color: #ff79c6 !important;
  font-weight: bold;
}
input[type="range"]::-webkit-slider-runnable-track {
  background: #44475a;
  height: 6px;
  border-radius: 3px;
}
input[type="range"]:focus::-webkit-slider-thumb {
  outline: 2px solid #ff79c6;
}
input[type="range"]::-moz-range-thumb {
  background: #ff79c6;
  border: 2px solid #44475a;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 6px #ff79c6;
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  background: #44475a;
  height: 6px;
  border-radius: 3px;
}
input[type="range"]:focus::-moz-range-thumb {
  outline: 2px solid #ff79c6;
}
input[type="range"]::-ms-thumb {
  background: #ff79c6;
  border: 2px solid #44475a;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 6px #ff79c6;
  cursor: pointer;
}
input[type="range"]::-ms-fill-lower {
  background: #44475a;
  border-radius: 3px;
}
input[type="range"]::-ms-fill-upper {
  background: #44475a;
  border-radius: 3px;
}
input[type="range"]:focus::-ms-thumb {
  outline: 2px solid #ff79c6;
}
input[type="range"]:focus {
  outline: none;
}
/* Remove default appearance for cross-browser consistency */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
}
.content-box {
  .synthwave-header {
    font-family: "Share Tech Mono", monospace;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px #ff79c6, 0 0px 32px #8be9fd;
  }
  background-color: #1e1f29;
  border: 1px solid #44475a;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  width: 80%; /* consistent width */
  max-width: 800px;
}
textarea {
  width: 100%;
  height: 120px;
  background-color: #1e1f29;
  color: #bd93f9; /* Dracula purple for input text */
  border: none;
  resize: vertical;
  font-size: 1.25rem;
}
.chord-name {
  color: #ff79c6; /* pink */
  font-weight: bold;
}
.root-baked-label {
  color: #50fa7b; /* green */
  font-weight: bold;
}
.root-baked-value {
  color: #f1fa8c; /* yellow */
}
.interval-label {
  color: #8be9fd; /* cyan */
  font-weight: bold;
}
.interval-value {
  color: #ffb86c; /* Dracula orange */
}