html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Prevent scrolling */
  position: fixed;
  /* Prevent any scrollable area */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard */
}

/* CRITICAL: Force cursor visibility on ALL elements */
* {
  cursor: default !important;
}


body {
  touch-action: none;
  /* Prevent touch scrolling */
  overscroll-behavior: none;
  /* Prevent pull-to-refresh and overscroll effects */
  -webkit-tap-highlight-color: transparent;
  /* Prevent tap highlight on mobile */
  -webkit-touch-callout: none;
  /* Disable the iOS context menu on long press */
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-drag: none;
  /* Prevent dragging of the canvas */
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  /* cursor: none; */
  /* Disabled for touch support */
  /* Hide default cursor */
}

/* Sound Editor Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.modal-content {
  position: relative;
  background-color: black;
  margin: 2% auto;
  padding: 0;
  border: 1px solid rgb(150, 150, 150);
  border-radius: 8px;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

.sound-editor-modal-content {
  padding: 20px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(100, 100, 100);
  padding-bottom: 15px;
}

.modal-header h2 {
  margin: 0;
  color: rgb(200, 200, 200);
  font-family: monospace;
  font-size: 24px;
  font-weight: 200;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  color: rgb(200, 200, 200);
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: white;
}

.sound-editor-container {
  width: 100%;
}

.sound-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sound-item {
  border: 1px solid rgb(100, 100, 100);
  border-radius: 8px;
  padding: 20px;
  background: rgb(20, 20, 20);
}

.sound-info {
  margin-bottom: 20px;
}

.sound-info h3 {
  margin: 0 0 10px 0;
  color: rgb(200, 200, 200);
  font-family: monospace;
  font-size: 18px;
  font-weight: 200;
}

.frequency-display {
  color: rgb(150, 150, 150);
  font-family: monospace;
  font-size: 14px;
}

.sound-visuals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.visual-section {
  border: 1px solid rgb(80, 80, 80);
  border-radius: 6px;
  padding: 15px;
  background: rgb(10, 10, 10);
}

.visual-section h4 {
  margin: 0 0 10px 0;
  color: rgb(180, 180, 180);
  font-family: monospace;
  font-size: 14px;
  font-weight: 200;
  text-align: center;
}

.waveform-canvas,
.harmonics-canvas {
  width: 100%;
  height: 150px;
  border: 1px solid rgb(60, 60, 60);
  border-radius: 4px;
  background: rgb(0, 0, 0);
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .sound-visuals {
    grid-template-columns: 1fr;
  }

  .modal-content {
    width: 95%;
    margin: 1% auto;
  }
}

/* Global styles */
* {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */

  /* Force cursor: none on all elements */
  /* cursor: none !important; */
  /* Disabled for touch support */
}

/* Ensure canvas and other elements don't interfere with cursor */
canvas,
body,
html {
  cursor: default !important;
}

/* Ensure all interactive elements use custom cursor */
button,
select,
option,
[role="button"],
[onclick],
[tabindex] {
  cursor: default !important;
}

/* The top playhead control is icon-only and must never acquire a browser
   focus/fullscreen button frame. */
#sign-in-button,
#sign-in-button:hover,
#sign-in-button:active,
#sign-in-button:focus,
#sign-in-button:focus-visible,
:fullscreen #sign-in-button,
:fullscreen #sign-in-button:hover,
:fullscreen #sign-in-button:active,
:fullscreen #sign-in-button:focus,
:fullscreen #sign-in-button:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#sign-in-button.playhead-control-button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#sign-in-button .playhead-control-icon {
  display: block;
  pointer-events: none;
  box-sizing: border-box;
  width: var(--playhead-icon-size, 12px);
  height: var(--playhead-icon-size, 12px);
  color: rgb(200, 200, 200);
}

#sign-in-button .playhead-control-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#sign-in-button .playhead-control-svg rect,
#sign-in-button .playhead-control-svg polygon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
}

#sign-in-button:hover .playhead-control-icon,
#sign-in-button:active .playhead-control-icon,
#sign-in-button:focus-visible .playhead-control-icon,
#sign-in-button:hover .playhead-playing,
#sign-in-button:active .playhead-playing,
#sign-in-button:focus-visible .playhead-playing {
  color: rgb(150, 150, 150);
}

/* Keep the icon-only view toggle frameless in every browser state. */
#view-toggle-button,
#view-toggle-button:hover,
#view-toggle-button:active,
#view-toggle-button:focus,
#view-toggle-button:focus-visible,
:fullscreen #view-toggle-button,
:fullscreen #view-toggle-button:hover,
:fullscreen #view-toggle-button:active,
:fullscreen #view-toggle-button:focus,
:fullscreen #view-toggle-button:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Settings dropdown menu */
.settings-dropdown {
  position: absolute;
  background: black;
  border: 1px solid rgb(150, 150, 150);
  padding: 0;
  z-index: 9999;
  display: none;
  min-width: 150px;
  box-shadow: none;
  font-family: monospace;
  font-size: 14px;
  color: rgb(200, 200, 200);
  text-align: center;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  overflow: hidden;
  outline: none;
}

.settings-dropdown.show {
  display: block;
}

.settings-dropdown-item {
  color: rgb(200, 200, 200);
  padding: 8px 0;
  /* cursor: none !important; */
  /* Removed to show cursor */
  position: relative;
  white-space: nowrap;
  font-family: monospace;
  font-size: 14px;
  text-align: center;
  margin: 0;
  border: none;
  background-color: black;
  width: 100%;
  display: block;
  box-sizing: border-box;
  transition: background-color 0s ease;
  text-indent: 1px;
  text-overflow: '';
  text-align-last: center;
}

.settings-dropdown-item:hover {
  background-color: rgb(50, 50, 50);
  color: white;
}

.settings-dropdown-item.has-submenu::after {
  content: '›';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

#info-dropdown .settings-dropdown-item + .settings-dropdown-item {
  border-top: 1px solid rgb(100, 100, 100) !important;
}

/* Submenu styles */
.settings-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  background-color: black !important;
  border: 1px solid rgb(150, 150, 150) !important;
  border-radius: 0;
  padding: 0;
  min-width: 100px;
  display: none;
  box-shadow: none;
  margin: 0;
  list-style: none;
  z-index: 10001;
  /* Ensure submenu appears above other elements */
}

/* Enhanced submenu visibility - Only show on hover */
.themes-main-item:hover .themes-submenu,
.themes-submenu:hover {
  visibility: visible !important;
}

/* Additional submenu styling */
.themes-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  background-color: black !important;
  border: 1px solid rgb(150, 150, 150) !important;
  border-radius: 0;
  padding: 0;
  min-width: 120px;
  display: block;
  visibility: hidden;
  /* Hidden by default */
  box-shadow: none;
  margin: 0;
  list-style: none;
  z-index: 10002 !important;
}

.settings-submenu-item {
  color: rgb(200, 200, 200) !important;
  padding: 8px 12px;
  cursor: default;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  margin: 0;
  border: none;
  background: transparent !important;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.settings-submenu-item:hover,
.settings-submenu-item:focus {
  background-color: rgb(50, 50, 50) !important;
  color: white !important;
}

.settings-submenu-item.active {
  background-color: rgb(75, 75, 75) !important;
  color: white !important;
  font-weight: bold;
}

/* Style for select elements */
select,
select option {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 1px;
  text-overflow: '';
  text-align: center;
  text-align-last: center;
  /* For Firefox */
  color: rgb(200, 200, 200) !important;
  border: 1px solid rgb(150, 150, 150) !important;
  background-color: black !important;
  padding: 0;
  /* Removed horizontal padding */
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0s ease;
}

/* BPM controls and drone boxes */
.bpm-label,
.lock-button,
.reset-button,
.drone-box {
  border: 1px solid rgb(150, 150, 150) !important;
}

/* Hover effect for closed select elements */
select:not([multiple]):hover {
  background-color: rgb(50, 50, 50) !important;
  /* cursor: none !important; */
  /* Removed to show cursor */
}

/* Style the dropdown button when menu is open */
select:focus,
select:active,
select:focus:not(:focus-visible) {
  background-color: black !important;
  outline: none !important;
}

/* Reset hover state when dropdown is closed */
select:not(:focus):not(:active):hover {
  background-color: rgb(50, 50, 50) !important;
}

/* For IE10+ */
select::-ms-expand {
  display: none;
}

/* Style for dropdown options */
select option {
  text-align: center;
  background-color: black !important;
  color: rgb(200, 200, 200) !important;
  border: none !important;
  margin: 0;
  padding: 8px 0;
}

/* Electron-specific dropdown option styling */
select option:hover,
select option:focus,
option:hover,
option:focus {
  background-color: rgb(50, 50, 50) !important;
  background: rgb(50, 50, 50) !important;
  color: white !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Selected state for dropdown options */
select option:checked,
option:checked,
select option:selected,
option:selected {
  background-color: rgb(75, 75, 75) !important;
  background: rgb(75, 75, 75) !important;
  color: white !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Force override Electron/Chromium default blue highlighting */
select option {
  background-color: black !important;
  background: black !important;
  color: rgb(200, 200, 200) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Electron-specific overrides */
select:focus option:hover,
select:active option:hover,
select:focus option:focus,
select:active option:focus {
  background-color: rgb(50, 50, 50) !important;
  background: rgb(50, 50, 50) !important;
  color: white !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Electron Chromium engine specific */
select option::-webkit-appearance {
  background-color: black !important;
}

select option:hover::-webkit-appearance {
  background-color: rgb(50, 50, 50) !important;
}

/* Electron/Chromium aggressive overrides */
select {
  color-scheme: dark !important;
}

/* Force Electron dropdown colors using CSS custom properties */
select option {
  background: var(--option-bg, black) !important;
  color: var(--option-color, rgb(200, 200, 200)) !important;
}

select option:hover {
  background: var(--option-hover-bg, rgb(50, 50, 50)) !important;
  color: var(--option-hover-color, white) !important;
}

select option:checked {
  background: var(--option-selected-bg, rgb(75, 75, 75)) !important;
  color: var(--option-selected-color, white) !important;
}

/* Electron native styling overrides */
select::-webkit-listbox {
  background-color: black !important;
  color: rgb(200, 200, 200) !important;
}

select::-webkit-listbox-option {
  background-color: black !important;
  color: rgb(200, 200, 200) !important;
}

select::-webkit-listbox-option:hover {
  background-color: rgb(50, 50, 50) !important;
  color: white !important;
}

select::-webkit-listbox-option:checked {
  background-color: rgb(75, 75, 75) !important;
  color: white !important;
}

/* Ensure the select element gets proper hover state after closing */
select:not(:focus):not(:active) {
  transition: background-color 0s ease;
}

/* Style the dropdown button when menu is open */
select:focus,
select:active {
  background-color: black !important;
}

/* Style the dropdown list */
select:not([multiple]) {
  background-color: black !important;
  color: rgb(200, 200, 200) !important;
}

/* Remove inner borders and box shadow */
select:not([multiple]) option {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Specific rule for layout select */
#layout-select-container,
#layout-select-container *,
select#defaultCanvas0-layoutSelect,
select#defaultCanvas0-layoutSelect:focus,
select#defaultCanvas0-layoutSelect:active,
#layout-select-container select,
#layout-select-container select:focus,
#layout-select-container select:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: black !important;
}

/* Remove any default styling from the select element */
#layout-select-container select {
  background: transparent !important;
  color: rgb(200, 200, 200) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Additional browser-specific overrides for dropdown options */
select option::-webkit-option,
select option::-moz-option {
  background-color: black !important;
  color: rgb(200, 200, 200) !important;
}

select option:hover::-webkit-option,
select option:focus::-webkit-option,
select option:hover::-moz-option,
select option:focus::-moz-option {
  background-color: rgb(50, 50, 50) !important;
  color: white !important;
}

/* Force override system default selection colors */
::selection {
  background-color: rgb(50, 50, 50) !important;
  color: white !important;
}

::-moz-selection {
  background-color: rgb(50, 50, 50) !important;
  color: white !important;
}

/* Override any blue highlighting in dropdowns */
select:focus option:checked,
select:active option:checked {
  background-color: rgb(75, 75, 75) !important;
  background: rgb(75, 75, 75) !important;
  color: white !important;
}

/* Additional aggressive overrides for browser defaults */
select option:active,
select option[selected],
select option:target {
  background-color: rgb(75, 75, 75) !important;
  background: rgb(75, 75, 75) !important;
  color: white !important;
}

/* Override Windows/Chrome default blue selection */
select option:hover {
  background: rgb(50, 50, 50) !important;
  background-color: rgb(50, 50, 50) !important;
  background-image: none !important;
}

/* Force all select elements to use our colors */
select,
select * {
  color: rgb(200, 200, 200) !important;
}

select:focus,
select:active {
  background-color: black !important;
  color: rgb(200, 200, 200) !important;
}

/* Override system highlight colors */
select option:hover,
select option:focus,
select option:active {
  background-color: rgb(50, 50, 50) !important;
  background: rgb(50, 50, 50) !important;
  color: white !important;
  outline: none !important;
  border: none !important;
}

/* Ultimate override for all browsers - Force our colors everywhere */
select option {
  background-color: black !important;
  background: black !important;
  color: rgb(200, 200, 200) !important;
}

select option:hover {
  background-color: rgb(50, 50, 50) !important;
  background: rgb(50, 50, 50) !important;
  color: white !important;
}

select option:checked,
select option:selected {
  background-color: rgb(75, 75, 75) !important;
  background: rgb(75, 75, 75) !important;
  color: white !important;
}

/* Webkit specific overrides */
select option:checked:hover {
  background-color: rgb(75, 75, 75) !important;
  background: rgb(75, 75, 75) !important;
}

/* Firefox specific overrides */
@-moz-document url-prefix() {
  select option:hover {
    background-color: rgb(50, 50, 50) !important;
    color: white !important;
  }

  select option:checked {
    background-color: rgb(75, 75, 75) !important;
    color: white !important;
  }
}

/* Hide fullscreen navigation UI */
:fullscreen {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Hide browser fullscreen controls */
::-webkit-full-screen-controls {
  display: none !important;
}

::-webkit-full-screen-ancestor {
  -webkit-appearance: none;
}

/* Hide fullscreen exit button and navigation */
::-webkit-full-screen-controls-overlay {
  display: none !important;
}

/* Firefox fullscreen controls */
::-moz-full-screen-warning {
  display: none !important;
}

/* Hide any fullscreen UI elements */
::backdrop {
  background-color: black !important;
}

/* Prevent fullscreen hover UI from appearing */
html:fullscreen,
body:fullscreen,
:fullscreen {
  /* cursor: none !important; */
  /* Removed to show cursor */
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}

/* Additional fullscreen UI hiding */
:fullscreen::backdrop {
  background-color: black !important;
}

/* Hide any system fullscreen controls */
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls {
  display: none !important;
}

/* Scrollbar styling for All Ratios viewport - styles are dynamically injected via JavaScript */

/* Custom input styling - override browser defaults */
input[type="text"],
input[type="number"],
input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  font-family: monospace !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove all focus styling from inputs */
input[type="text"]:focus,
input[type="number"]:focus,
input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Remove webkit focus ring */
input[type="text"]:focus::-webkit-input-placeholder,
input[type="number"]:focus::-webkit-input-placeholder,
input:focus::-webkit-input-placeholder {
  color: transparent !important;
}

/* Remove mozilla focus ring */
input[type="text"]:focus::-moz-placeholder,
input[type="number"]:focus::-moz-placeholder,
input:focus::-moz-placeholder {
  color: transparent !important;
}

/* Harmonic Alignment Panel Styles */
.harmonic-panel-overlay {
  display: none;
  position: fixed;
  z-index: 999998;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  /* Reduced opacity from 0.85 to 0.3 to show main app */
}

.harmonic-panel-overlay.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.harmonic-panel {
  position: relative;
  background-color: rgb(10, 10, 10);
  border: 1px solid rgb(150, 150, 150);
  border-radius: 8px;
  padding: 30px;
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9);
}

.harmonic-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgb(100, 100, 100);
}

.harmonic-panel-header h2 {
  margin: 0;
  color: rgb(200, 200, 200);
  font-family: monospace;
  font-size: 20px;
  font-weight: 200;
}

.harmonic-panel-close {
  position: absolute;
  top: 15px;
  right: 20px;
  color: rgb(200, 200, 200);
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.harmonic-panel-close:hover {
  color: white;
}

.harmonic-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  padding: 15px;
  background: rgb(20, 20, 20);
  border: 1px solid rgb(80, 80, 80);
  border-radius: 6px;
}

.harmonic-toggle-label {
  color: rgb(180, 180, 180);
  font-family: monospace;
  font-size: 16px;
}

/* Toggle Switch Styles */
.harmonic-toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.harmonic-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.harmonic-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(60, 60, 60);
  transition: 0.3s;
  border-radius: 30px;
  border: 1px solid rgb(100, 100, 100);
}

.harmonic-toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: rgb(150, 150, 150);
  transition: 0.3s;
  border-radius: 50%;
}

.harmonic-toggle-switch input:checked+.harmonic-toggle-slider {
  background-color: rgb(80, 150, 80);
}

.harmonic-toggle-switch input:checked+.harmonic-toggle-slider:before {
  transform: translateX(30px);
  background-color: rgb(150, 255, 150);
}

.harmonic-toggle-status {
  color: rgb(150, 150, 150);
  font-family: monospace;
  font-size: 14px;
  min-width: 50px;
  text-align: left;
}

.harmonic-toggle-switch input:checked~.harmonic-toggle-status {
  color: rgb(150, 255, 150);
}

/* Visualization Containers */
.harmonic-visuals {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.harmonic-visual-section {
  border: 1px solid rgb(80, 80, 80);
  border-radius: 6px;
  padding: 20px;
  background: rgb(5, 5, 5);
}

.harmonic-visual-section h3 {
  margin: 0 0 15px 0;
  color: rgb(180, 180, 180);
  font-family: monospace;
  font-size: 16px;
  font-weight: 200;
  text-align: center;
}

.harmonic-visual-subtitle {
  margin: 0 0 10px 0;
  color: rgb(120, 120, 120);
  font-family: monospace;
  font-size: 12px;
  text-align: center;
  font-style: italic;
}

.harmonic-spectrum-canvas {
  width: 100%;
  height: 200px;
  border: 1px solid rgb(60, 60, 60);
  border-radius: 4px;
  background: rgb(0, 0, 0);
  display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .harmonic-panel {
    width: 95%;
    padding: 20px;
  }

  .harmonic-panel-header h2 {
    font-size: 18px;
  }

  .harmonic-spectrum-canvas {
    height: 150px;
  }

  .harmonic-toggle-container {
    flex-direction: column;
    gap: 10px;
  }
}