:root { 
  color-scheme: light dark;
  --bg:#f8fafc; 
  --fg:#0f1220; 
  --muted:#64748b; 
  --panel-bg: rgba(248,250,252,0.85);
  --panel-border: rgba(2,6,23,0.08);
  --control-bg:#ffffff;
  --control-fg:#111827;
}
body[data-theme="dark"] {
  --bg:#0f1220; 
  --fg:#e7e9ee; 
  --muted:#9aa1b2;
  --panel-bg: rgba(15,18,32,0.75);
  --panel-border: rgba(147,112,219,0.25);
  --control-bg:#111827;
  --control-fg:#e7e9ee;
}
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif,system-ui,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--fg); }

/* ===== COMMAND CENTER (Unified Header) ===== */
.command-center {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: linear-gradient(180deg, 
    rgba(248, 250, 252, 0.98) 0%,
    rgba(255, 255, 255, 0.95) 40%,
    rgba(248, 250, 252, 0.92) 100%
  );
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 
    0 8px 32px rgba(147, 112, 219, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

body[data-theme="dark"] .command-center {
  background: linear-gradient(180deg, 
    rgba(15, 18, 32, 0.98) 0%,
    rgba(20, 24, 45, 0.95) 40%,
    rgba(15, 18, 32, 0.92) 100%
  );
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(147, 112, 219, 0.15);
}

.command-center::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 15% 30%, rgba(147, 112, 219, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 30%, rgba(64, 224, 208, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(255, 105, 180, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

body[data-theme="dark"] .command-center::before {
  background: 
    radial-gradient(ellipse at 15% 30%, rgba(147, 112, 219, 0.2) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 30%, rgba(64, 224, 208, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(255, 105, 180, 0.1) 0%, transparent 50%);
}

/* Unified Single-Line Header */
.command-bar-unified {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.command-bar-unified .page-header-brand {
  justify-self: start;
}

.command-bar-unified .controls {
  justify-self: center;
  display: flex;
  gap: 8px;
}

.command-bar-unified .page-header-actions {
  justify-self: end;
}

/* Bottom Edge Glow */
.command-edge {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(147, 112, 219, 0.4) 15%,
    rgba(64, 224, 208, 0.6) 35%,
    rgba(255, 105, 180, 0.5) 50%,
    rgba(64, 224, 208, 0.6) 65%,
    rgba(147, 112, 219, 0.4) 85%,
    transparent 100%
  );
  position: relative;
  overflow: hidden;
}

.command-edge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  animation: edge-shimmer 3s ease-in-out infinite;
}

@keyframes edge-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

body[data-theme="dark"] .command-edge {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(147, 112, 219, 0.6) 15%,
    rgba(64, 224, 208, 0.8) 35%,
    rgba(255, 105, 180, 0.7) 50%,
    rgba(64, 224, 208, 0.8) 65%,
    rgba(147, 112, 219, 0.6) 85%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(147, 112, 219, 0.4);
}

.page-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  animation: pulse-glow 4s ease-in-out infinite alternate;
}

.brand-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(147, 112, 219, 0.4));
}

@keyframes pulse-glow {
  0% { filter: drop-shadow(0 0 4px rgba(147, 112, 219, 0.3)); }
  50% { filter: drop-shadow(0 0 12px rgba(64, 224, 208, 0.5)); }
  100% { filter: drop-shadow(0 0 8px rgba(255, 105, 180, 0.4)); }
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, 
    #9370db 0%, 
    #40e0d0 50%, 
    #ff69b4 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 6s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.brand-subtitle {
  font-size: 8px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Donate Orb - Cosmic Energy Style */
.donate-orb {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 20px;
  background: transparent;
  transition: all 0.4s ease;
}

/* The glowing aura */
.orb-glow {
  position: absolute;
  width: 28px;
  height: 28px;
  left: 4px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(147, 112, 219, 0.3) 0%,
    rgba(64, 224, 208, 0.15) 50%,
    transparent 70%
  );
  animation: orb-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes orb-pulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.5;
  }
  50% { 
    transform: scale(1.4);
    opacity: 0.8;
  }
}

/* The core star */
.orb-core {
  position: relative;
  z-index: 2;
  font-size: 16px;
  color: #9370db;
  text-shadow: 
    0 0 8px rgba(147, 112, 219, 0.8),
    0 0 16px rgba(64, 224, 208, 0.5);
  animation: orb-twinkle 2s ease-in-out infinite;
}

@keyframes orb-twinkle {
  0%, 100% { 
    opacity: 0.7;
    transform: scale(1) rotate(0deg);
  }
  50% { 
    opacity: 1;
    transform: scale(1.15) rotate(15deg);
  }
}

/* Orbiting ring */
.orb-ring {
  position: absolute;
  width: 32px;
  height: 32px;
  left: 2px;
  border: 1px dashed rgba(147, 112, 219, 0.3);
  border-radius: 50%;
  animation: orb-spin 8s linear infinite;
  pointer-events: none;
}

.orb-ring::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #40e0d0;
  border-radius: 50%;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 6px #40e0d0;
}

@keyframes orb-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Floating particles */
.orb-particles {
  position: absolute;
  width: 40px;
  height: 40px;
  left: -2px;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ff69b4;
  border-radius: 50%;
  opacity: 0;
}

.particle:nth-child(1) {
  animation: particle-float 4s ease-in-out infinite;
  left: 20%;
}

.particle:nth-child(2) {
  animation: particle-float 4s ease-in-out infinite 1.3s;
  left: 50%;
  background: #40e0d0;
}

.particle:nth-child(3) {
  animation: particle-float 4s ease-in-out infinite 2.6s;
  left: 80%;
  background: #9370db;
}

@keyframes particle-float {
  0%, 100% {
    opacity: 0;
    transform: translateY(20px) scale(0);
  }
  20% {
    opacity: 0.8;
    transform: translateY(10px) scale(1);
  }
  80% {
    opacity: 0.6;
    transform: translateY(-15px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0);
  }
}

/* Label */
.orb-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: lowercase;
  opacity: 0.6;
  transition: all 0.3s ease;
}

/* Hover state - energy surge */
.donate-orb:hover {
  background: rgba(147, 112, 219, 0.1);
  border-radius: 20px;
}

.donate-orb:hover .orb-glow {
  animation: orb-surge 0.6s ease-out forwards;
}

@keyframes orb-surge {
  0% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(2); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0.7; }
}

.donate-orb:hover .orb-core {
  animation: none;
  opacity: 1;
  transform: scale(1.2);
  color: #40e0d0;
  text-shadow: 
    0 0 12px rgba(64, 224, 208, 1),
    0 0 24px rgba(147, 112, 219, 0.8),
    0 0 36px rgba(255, 105, 180, 0.5);
}

.donate-orb:hover .orb-ring {
  animation: orb-spin 2s linear infinite;
  border-color: rgba(64, 224, 208, 0.6);
}

.donate-orb:hover .orb-label {
  opacity: 1;
  color: var(--fg);
  letter-spacing: 2px;
}

.donate-orb:hover .particle {
  animation-duration: 2s;
}

/* Dark mode adjustments */
body[data-theme="dark"] .orb-core {
  color: #b4a0e8;
}

body[data-theme="dark"] .donate-orb:hover {
  background: rgba(147, 112, 219, 0.15);
}

/* Mobile */
@media (max-width: 480px) {
  .orb-label {
    display: none;
  }
  
  .donate-orb {
    padding: 6px;
  }
}

/* Theme toggle in header */
.theme-btn-header {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(180deg, #e5e7eb, #d1d5db);
  color: #111827;
  border: 2px solid rgba(147, 112, 219, 0.2);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 0;
  min-width: 44px;
  width: 44px;
}

.theme-btn-header:hover {
  transform: scale(1.08);
  box-shadow: 
    0 4px 16px rgba(147, 112, 219, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  border-color: rgba(147, 112, 219, 0.4);
}

.theme-btn-header[data-mode="dark"] {
  background: linear-gradient(180deg, #1e1b4b, #111827);
  color: #fde68a;
  border-color: rgba(147, 112, 219, 0.4);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(147, 112, 219, 0.2),
    inset 0 1px 2px rgba(147, 112, 219, 0.2);
}

.theme-btn-header[data-mode="dark"]:hover {
  box-shadow: 
    0 4px 16px rgba(147, 112, 219, 0.4),
    0 0 24px rgba(147, 112, 219, 0.3),
    inset 0 1px 2px rgba(147, 112, 219, 0.3);
}

/* Mobile responsive command center */
@media (max-width: 640px) {
  .brand-icon {
    width: 26px;
    height: 26px;
  }
  
  .brand-title {
    font-size: 14px;
  }
  
  .donate-btn {
    padding: 5px 10px;
    font-size: 10px;
    gap: 4px;
  }
  
  .donate-icon {
    font-size: 12px;
  }
  
  .theme-btn-header {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 15px;
  }
  
  .page-header-actions {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .donate-text {
    display: none;
  }
  
  .donate-btn {
    padding: 6px 8px;
    border-radius: 10px;
  }
}

@media (max-width: 400px) {
  .brand-title {
    font-size: 13px;
  }
  
  .brand-icon {
    width: 24px;
    height: 24px;
  }
}
.app { max-width: 1100px; margin: 0 auto; padding: 12px 16px 16px; }
/* Legacy appbar styles - kept for backwards compatibility */
.appbar { position: sticky; top: 0; z-index: 1001; background: var(--panel-bg); border-bottom: 1px solid var(--panel-border); backdrop-filter: blur(10px); }
.appbar-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: calc(10px + env(safe-area-inset-top)) 4px 10px; }
.appbar-title { display:flex; align-items:center; gap:8px; font-weight:900; letter-spacing:.2px; }
.appbar .logo { width:24px; height:24px; border-radius:6px; }
h1 { font-size: clamp(18px, 3vw, 28px); margin:0; }
.subtitle { margin:6px 0 0; color:var(--muted); font-size: 12px; line-height:1.3; }
.brand { display:flex; flex-direction:column; gap:4px; }
.controls { 
  display: flex;
  gap: 8px;
  align-items: center;
}

.command-bar-unified .controls button,
.controls button {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex: 0 0 80px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.presets-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-bottom: 0;
}

.presets-section label {
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.presets-section select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--control-bg);
  color: var(--control-fg);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  text-align: center;
  caret-color: var(--control-fg);
}

.presets-section select:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

/* Help native form controls choose correct system palette */
select, input, button { color-scheme: light dark; }
/* Visible text selection */
::selection { background: rgba(147,112,219,0.35); color: #ffffff; }
button {
  border:none; cursor:pointer; padding:10px 16px; border-radius:12px; font-weight:700;
  color:#04130a; box-shadow: 0 2px 8px rgba(0,0,0,.15);
  position: relative; overflow: hidden;
  transition: transform 80ms ease, filter 200ms ease, box-shadow 200ms ease, border 200ms ease;
  min-width: 0;
  width: 100%;
  border: 2px solid transparent;
}
button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
/* Theme toggle styles moved to page header */
#play:active, #pause:active, #stop:active, #reset:active { transform: translateY(1px) scale(0.98); }

/* Transport button styles - more modern and matching page aesthetic */
#play { 
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  transition: all 0.2s ease;
}
#play:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}
#play.is-active {
  background: linear-gradient(135deg, #047857, #065f46);
  border-color: #10b981;
  box-shadow: 
    0 0 0 3px rgba(16, 185, 129, 0.3),
    0 4px 16px rgba(16, 185, 129, 0.5),
    inset 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

#pause { 
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  transition: all 0.2s ease;
}
#pause:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  transform: translateY(-1px);
}
#pause.is-active {
  background: linear-gradient(135deg, #b45309, #92400e);
  border-color: #f59e0b;
  box-shadow: 
    0 0 0 3px rgba(245, 158, 11, 0.3),
    0 4px 16px rgba(245, 158, 11, 0.5),
    inset 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

#stop { 
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  transition: all 0.2s ease;
}
#stop:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}
#stop:active {
  background: linear-gradient(135deg, #b91c1c, #991b1b);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

#reset { 
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  transition: all 0.2s ease;
}
#reset:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}
#reset:active {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Ripple effect */
button .ripple {
  position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.6;
  background: radial-gradient(circle at center, rgba(255,255,255,0.8), rgba(255,255,255,0.35));
  transform: scale(0); animation: ripple 600ms ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes ripple { to { transform: scale(8); opacity: 0; } }
.grid { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:18px; align-items:stretch; }
@media (max-width:900px){ .grid{ grid-template-columns:1fr; } }
.wheel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  height: 100%;
  justify-content: center;
}
.wheel { width:min(90vw,480px); aspect-ratio:1/1; position:relative; user-select:none; -webkit-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; touch-action:none; }
.wheel, .wheel * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.wheel .labels, .wheel .pointer, .wheel .inner-pointer, .wheel .inner-circle, .wheel .rotor {
  -webkit-user-select: none;
  user-select: none;
}
.wheel:focus { outline: none; }
.wheel:focus-visible {
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.45), 0 0 0 4px rgba(255,255,255,0.25);
  border-radius: 50%;
}
.rotor, .overlay { position:absolute; inset:0; border-radius:50%; }
.rotor { 
  background:
    /* Deep space background */
    radial-gradient(ellipse at center,
      rgba(13, 13, 35, 0.9) 0%,
      rgba(8, 8, 25, 0.95) 50%,
      rgba(5, 5, 15, 1) 100%
    );
  border: 3px solid var(--galaxy-glow, rgba(147, 112, 219, 0.4));
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.8));
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}


/* Visual highlight when fine tune dial is hovered */
.wheel.fine-tune-active .rotor {
  border: 5px solid rgba(147, 112, 219, 0.9);
  box-shadow: 
    0 0 40px rgba(147, 112, 219, 0.7),
    0 0 70px rgba(147, 112, 219, 0.5),
    0 0 100px rgba(147, 112, 219, 0.3),
    inset 0 0 50px rgba(147, 112, 219, 0.2);
  transition: border 0.3s ease, box-shadow 0.3s ease;
}


.rotor::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Fast moving stars layer 1 */
    radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.9) 1px, transparent 2px),
    radial-gradient(circle at 75% 15%, rgba(255, 255, 255, 0.7) 1px, transparent 2px),
    radial-gradient(circle at 45% 75%, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    radial-gradient(circle at 25% 55%, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
    radial-gradient(circle at 65% 35%, rgba(255, 255, 255, 0.7) 1px, transparent 2px),
    radial-gradient(circle at 95% 45%, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(circle at 5% 65%, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    /* Galaxy spiral arms */
    conic-gradient(from 0deg,
      transparent 0deg,
      var(--galaxy-primary, rgba(45, 27, 105, 0.3)) 30deg,
      var(--galaxy-secondary, rgba(138, 43, 226, 0.2)) 60deg,
      var(--galaxy-tertiary, rgba(75, 0, 130, 0.15)) 90deg,
      transparent 120deg,
      var(--galaxy-primary, rgba(45, 27, 105, 0.25)) 150deg,
      var(--galaxy-secondary, rgba(138, 43, 226, 0.18)) 180deg,
      var(--galaxy-tertiary, rgba(75, 0, 130, 0.12)) 210deg,
      transparent 240deg,
      var(--galaxy-primary, rgba(45, 27, 105, 0.2)) 270deg,
      var(--galaxy-secondary, rgba(138, 43, 226, 0.15)) 300deg,
      var(--galaxy-tertiary, rgba(75, 0, 130, 0.1)) 330deg,
      transparent 360deg
    );
  border-radius: 50%;
  animation: starsRotate 30s linear infinite, twinkle 3s ease-in-out infinite alternate;
}

.rotor::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Slow moving stars layer 2 */
    radial-gradient(circle at 35% 45%, rgba(255, 255, 255, 0.8) 1.5px, transparent 3px),
    radial-gradient(circle at 70% 25%, rgba(255, 255, 255, 0.6) 1px, transparent 2.5px),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.9) 1px, transparent 2px),
    radial-gradient(circle at 90% 70%, rgba(255, 255, 255, 0.5) 1.5px, transparent 3px),
    radial-gradient(circle at 55% 10%, rgba(255, 255, 255, 0.7) 1px, transparent 2px),
    radial-gradient(circle at 10% 30%, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.6) 1px, transparent 2.5px),
    radial-gradient(circle at 40% 90%, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    /* Galaxy core */
    radial-gradient(circle at center,
      var(--galaxy-glow, rgba(147, 112, 219, 0.4)) 0%,
      var(--galaxy-primary, rgba(45, 27, 105, 0.3)) 20%,
      var(--galaxy-secondary, rgba(138, 43, 226, 0.2)) 40%,
      var(--galaxy-tertiary, rgba(75, 0, 130, 0.1)) 60%,
      transparent 80%
    );
  border-radius: 50%;
  animation: starsRotateReverse 45s linear infinite, twinkleReverse 4s ease-in-out infinite alternate;
}

@keyframes starsRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes starsRotateReverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes twinkle {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

@keyframes twinkleReverse {
  0% { opacity: 0.8; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ===== LIGHT MODE WHEEL BACKGROUNDS ===== */
/* "Synesthesia Aurora" - Multi-dimensional frequency visualization */
body:not([data-theme="dark"]) .rotor {
  background:
    /* Prismatic aurora base - frequencies as colors */
    conic-gradient(from 180deg at 50% 50%,
      rgba(64, 224, 208, 0.85) 0deg,      /* Turquoise - high frequencies */
      rgba(138, 43, 226, 0.8) 45deg,       /* Violet - upper harmonics */
      rgba(255, 105, 180, 0.85) 90deg,     /* Hot pink - mid-high */
      rgba(255, 165, 0, 0.8) 135deg,       /* Orange - mid frequencies */
      rgba(50, 205, 50, 0.85) 180deg,      /* Lime green - mid-low */
      rgba(30, 144, 255, 0.8) 225deg,      /* Dodger blue - low frequencies */
      rgba(186, 85, 211, 0.85) 270deg,     /* Medium orchid - sub bass */
      rgba(255, 182, 193, 0.8) 315deg,     /* Light pink - infra */
      rgba(64, 224, 208, 0.85) 360deg      /* Back to turquoise */
    ),
    /* Soft white center glow */
    radial-gradient(ellipse at center,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.7) 25%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 70%
    );
  border: 3px solid rgba(138, 43, 226, 0.4);
  filter: drop-shadow(0 20px 50px rgba(138, 43, 226, 0.25));
}

body:not([data-theme="dark"]) .rotor::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Floating frequency particles - multi-colored */
    radial-gradient(circle at 15% 25%, rgba(64, 224, 208, 0.9) 2px, transparent 4px),
    radial-gradient(circle at 75% 15%, rgba(255, 105, 180, 0.85) 1.5px, transparent 3px),
    radial-gradient(circle at 45% 75%, rgba(138, 43, 226, 0.9) 2px, transparent 4px),
    radial-gradient(circle at 85% 85%, rgba(255, 165, 0, 0.8) 1.5px, transparent 3px),
    radial-gradient(circle at 25% 55%, rgba(50, 205, 50, 0.85) 1.5px, transparent 3px),
    radial-gradient(circle at 65% 35%, rgba(30, 144, 255, 0.9) 2px, transparent 4px),
    radial-gradient(circle at 95% 45%, rgba(186, 85, 211, 0.8) 1.5px, transparent 3px),
    radial-gradient(circle at 5% 65%, rgba(255, 182, 193, 0.85) 1.5px, transparent 3px),
    radial-gradient(circle at 35% 10%, rgba(255, 255, 255, 0.95) 2px, transparent 4px),
    radial-gradient(circle at 55% 90%, rgba(255, 255, 255, 0.9) 1.5px, transparent 3px),
    /* Flowing aurora bands */
    conic-gradient(from 90deg,
      transparent 0deg,
      rgba(64, 224, 208, 0.3) 20deg,
      rgba(138, 43, 226, 0.25) 40deg,
      transparent 60deg,
      rgba(255, 105, 180, 0.3) 80deg,
      rgba(255, 165, 0, 0.25) 100deg,
      transparent 120deg,
      rgba(50, 205, 50, 0.3) 140deg,
      rgba(30, 144, 255, 0.25) 160deg,
      transparent 180deg,
      rgba(186, 85, 211, 0.3) 200deg,
      rgba(64, 224, 208, 0.25) 220deg,
      transparent 240deg,
      rgba(255, 182, 193, 0.3) 260deg,
      rgba(138, 43, 226, 0.25) 280deg,
      transparent 300deg,
      rgba(255, 105, 180, 0.3) 320deg,
      rgba(50, 205, 50, 0.25) 340deg,
      transparent 360deg
    );
  border-radius: 50%;
  animation: auroraRotate 35s linear infinite, auroraPulse 6s ease-in-out infinite alternate;
}

body:not([data-theme="dark"]) .rotor::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Secondary particle layer - different colors */
    radial-gradient(circle at 38% 42%, rgba(255, 255, 255, 0.95) 2.5px, transparent 5px),
    radial-gradient(circle at 68% 28%, rgba(64, 224, 208, 0.8) 2px, transparent 4px),
    radial-gradient(circle at 22% 78%, rgba(255, 105, 180, 0.85) 1.5px, transparent 3px),
    radial-gradient(circle at 88% 68%, rgba(138, 43, 226, 0.8) 2px, transparent 4px),
    radial-gradient(circle at 52% 12%, rgba(50, 205, 50, 0.85) 1.5px, transparent 3px),
    radial-gradient(circle at 12% 38%, rgba(30, 144, 255, 0.8) 2px, transparent 4px),
    radial-gradient(circle at 78% 52%, rgba(255, 165, 0, 0.85) 1.5px, transparent 3px),
    radial-gradient(circle at 42% 92%, rgba(186, 85, 211, 0.8) 2px, transparent 4px),
    /* Inner luminous core */
    radial-gradient(circle at center,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.3) 20%,
      rgba(186, 85, 211, 0.15) 40%,
      rgba(64, 224, 208, 0.1) 60%,
      transparent 80%
    );
  border-radius: 50%;
  animation: auroraRotateReverse 50s linear infinite, auroraPulseReverse 8s ease-in-out infinite alternate;
}

@keyframes auroraRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes auroraRotateReverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes auroraPulse {
  0% { opacity: 0.8; filter: saturate(1) brightness(1); }
  50% { opacity: 1; filter: saturate(1.15) brightness(1.05); }
  100% { opacity: 0.9; filter: saturate(1.1) brightness(1.02); }
}

@keyframes auroraPulseReverse {
  0% { opacity: 0.9; filter: saturate(1.1) brightness(1.02); }
  50% { opacity: 0.75; filter: saturate(0.95) brightness(0.98); }
  100% { opacity: 1; filter: saturate(1.2) brightness(1.08); }
}

/* Light mode - visual highlight when fine tune dial is hovered */
body:not([data-theme="dark"]) .wheel.fine-tune-active .rotor {
  border: 5px solid rgba(138, 43, 226, 0.85);
  box-shadow: 
    0 0 40px rgba(138, 43, 226, 0.5),
    0 0 70px rgba(64, 224, 208, 0.35),
    0 0 100px rgba(255, 105, 180, 0.25),
    inset 0 0 50px rgba(255, 255, 255, 0.3);
}

/* Light mode inner circle - iridescent center */
body:not([data-theme="dark"]) .inner-circle {
  background: 
    conic-gradient(from 0deg at 50% 50%,
      rgba(64, 224, 208, 0.15) 0deg,
      rgba(138, 43, 226, 0.12) 90deg,
      rgba(255, 105, 180, 0.15) 180deg,
      rgba(50, 205, 50, 0.12) 270deg,
      rgba(64, 224, 208, 0.15) 360deg
    ),
    radial-gradient(circle at center, 
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.95) 60%,
      rgba(248, 250, 255, 0.98) 100%
    );
  border: 2px solid rgba(138, 43, 226, 0.35);
  box-shadow: 
    inset 0 0 20px rgba(138, 43, 226, 0.1),
    inset 0 0 40px rgba(64, 224, 208, 0.08),
    0 0 30px rgba(0, 0, 0, 0.1);
  color: #2d3748;
}

/* Light mode hub - prismatic center */
body:not([data-theme="dark"]) .hub {
  background: 
    conic-gradient(from 45deg at 50% 50%,
      rgba(64, 224, 208, 0.08) 0deg,
      rgba(138, 43, 226, 0.06) 120deg,
      rgba(255, 105, 180, 0.08) 240deg,
      rgba(64, 224, 208, 0.08) 360deg
    ),
    radial-gradient(circle at center, 
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.96) 50%,
      rgba(250, 250, 255, 0.98) 100%
    );
  border: 3px solid rgba(138, 43, 226, 0.4);
  box-shadow: 
    inset 0 0 25px rgba(138, 43, 226, 0.08),
    inset 0 0 40px rgba(64, 224, 208, 0.06),
    0 0 50px rgba(0, 0, 0, 0.15),
    0 0 25px rgba(138, 43, 226, 0.2);
}

body:not([data-theme="dark"]) .hub .hz { 
  color: #1a202c !important;
  text-shadow: 
    0 0 8px rgba(138, 43, 226, 0.3),
    0 0 16px rgba(64, 224, 208, 0.2);
}

body:not([data-theme="dark"]) .hub .sub { 
  color: #4a5568;
  text-shadow: 0 0 6px rgba(138, 43, 226, 0.2);
}

body:not([data-theme="dark"]) .hub .galaxy-name {
  color: #718096;
  text-shadow: 0 0 4px rgba(64, 224, 208, 0.2);
}

/* Light mode pointers - prismatic glow */
body:not([data-theme="dark"]) .pointer {
  background: 
    radial-gradient(circle at center, 
      rgba(255, 255, 255, 1) 0%, 
      rgba(255, 255, 255, 0.95) 20%,
      rgba(138, 43, 226, 0.7) 45%,
      rgba(64, 224, 208, 0.5) 70%,
      transparent 100%
    );
  border: 3px solid rgba(255, 255, 255, 1);
  box-shadow: 
    0 0 30px rgba(138, 43, 226, 0.8),
    0 0 50px rgba(64, 224, 208, 0.5),
    0 0 80px rgba(255, 105, 180, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.7);
}

body:not([data-theme="dark"]) .pointer:hover {
  box-shadow: 
    0 0 40px rgba(138, 43, 226, 1),
    0 0 65px rgba(64, 224, 208, 0.7),
    0 0 100px rgba(255, 105, 180, 0.45),
    inset 0 0 20px rgba(255, 255, 255, 0.8);
}

body:not([data-theme="dark"]) .inner-pointer {
  background: 
    radial-gradient(circle at center, 
      rgba(255, 255, 255, 1) 0%, 
      rgba(255, 255, 255, 0.95) 20%,
      rgba(64, 224, 208, 0.7) 45%,
      rgba(138, 43, 226, 0.5) 70%,
      transparent 100%
    );
  border: 2px solid rgba(255, 255, 255, 1);
  box-shadow: 
    0 0 22px rgba(64, 224, 208, 0.85),
    0 0 38px rgba(138, 43, 226, 0.5),
    inset 0 0 10px rgba(255, 255, 255, 0.6);
}

body:not([data-theme="dark"]) .inner-pointer:hover {
  box-shadow: 
    0 0 28px rgba(64, 224, 208, 1),
    0 0 48px rgba(138, 43, 226, 0.7),
    inset 0 0 14px rgba(255, 255, 255, 0.7);
}

/* Light mode labels on wheel */
body:not([data-theme="dark"]) .labels span {
  color: #2d3748;
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 20px rgba(138, 43, 226, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Light mode fine tune dial - mini aurora */
body:not([data-theme="dark"]) .fine-tune-rotor {
  background: 
    conic-gradient(from 0deg at 50% 50%,
      rgba(64, 224, 208, 0.25) 0deg,
      rgba(138, 43, 226, 0.2) 90deg,
      rgba(255, 105, 180, 0.25) 180deg,
      rgba(50, 205, 50, 0.2) 270deg,
      rgba(64, 224, 208, 0.25) 360deg
    ),
    radial-gradient(ellipse at center,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.92) 60%,
      rgba(248, 250, 255, 0.95) 100%
    );
  border: 2px solid rgba(138, 43, 226, 0.4);
  filter: drop-shadow(0 4px 12px rgba(138, 43, 226, 0.2));
}

body:not([data-theme="dark"]) .fine-tune-rotor:hover {
  border: 3px solid rgba(138, 43, 226, 0.7);
  filter: drop-shadow(0 6px 16px rgba(138, 43, 226, 0.3));
  box-shadow: 
    0 0 25px rgba(138, 43, 226, 0.35),
    0 0 40px rgba(64, 224, 208, 0.25),
    inset 0 0 30px rgba(255, 255, 255, 0.2);
}

body:not([data-theme="dark"]) .fine-tune-rotor::before {
  background: 
    radial-gradient(circle at 20% 30%, rgba(64, 224, 208, 0.8) 0.5px, transparent 1.5px),
    radial-gradient(circle at 70% 20%, rgba(138, 43, 226, 0.7) 0.5px, transparent 1.5px),
    radial-gradient(circle at 50% 80%, rgba(255, 105, 180, 0.75) 0.5px, transparent 1.5px),
    radial-gradient(circle at 85% 75%, rgba(50, 205, 50, 0.65) 0.5px, transparent 1.5px),
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(138, 43, 226, 0.1) 45deg,
      transparent 90deg,
      rgba(64, 224, 208, 0.08) 180deg,
      transparent 270deg,
      rgba(255, 105, 180, 0.1) 315deg,
      transparent 360deg
    );
}

body:not([data-theme="dark"]) .fine-tune-pointer {
  background: radial-gradient(circle at center, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.95) 20%,
    rgba(138, 43, 226, 0.75) 45%,
    rgba(64, 224, 208, 0.55) 70%,
    transparent 100%
  );
  border: 2px solid rgba(255, 255, 255, 1);
  box-shadow: 
    0 0 18px rgba(138, 43, 226, 0.85),
    0 0 32px rgba(64, 224, 208, 0.5),
    inset 0 0 8px rgba(255, 255, 255, 0.7);
}

body:not([data-theme="dark"]) .fine-tune-rotor:hover .fine-tune-pointer {
  box-shadow: 
    0 0 24px rgba(138, 43, 226, 1),
    0 0 40px rgba(64, 224, 208, 0.7),
    inset 0 0 12px rgba(255, 255, 255, 0.8);
}

body:not([data-theme="dark"]) .fine-tune-center {
  background: 
    conic-gradient(from 90deg at 50% 50%,
      rgba(64, 224, 208, 0.08) 0deg,
      rgba(138, 43, 226, 0.06) 180deg,
      rgba(64, 224, 208, 0.08) 360deg
    ),
    radial-gradient(circle at center, 
      rgba(255, 255, 255, 0.99) 0%,
      rgba(255, 255, 255, 0.97) 70%,
      rgba(250, 252, 255, 0.99) 100%
    );
  border: 2px solid rgba(138, 43, 226, 0.3);
  box-shadow: 
    inset 0 0 12px rgba(138, 43, 226, 0.08),
    0 0 18px rgba(0, 0, 0, 0.1);
}

body:not([data-theme="dark"]) .fine-tune-value {
  color: #2d3748;
  text-shadow: 0 0 5px rgba(138, 43, 226, 0.25);
}
.pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 28px;
  height: 28px;
  background: 
    radial-gradient(circle at center, 
      rgba(255, 255, 255, 1) 0%, 
      rgba(255, 255, 255, 0.9) 20%,
      var(--galaxy-primary, rgba(138, 43, 226, 0.8)) 40%,
      var(--galaxy-secondary, rgba(75, 0, 130, 0.6)) 70%,
      transparent 100%
    );
  border: 3px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  box-shadow: 
    0 0 35px var(--galaxy-glow, rgba(138, 43, 226, 0.9)),
    0 0 60px var(--galaxy-glow, rgba(138, 43, 226, 0.5)),
    0 0 90px var(--galaxy-glow, rgba(138, 43, 226, 0.3)),
    inset 0 0 18px rgba(255, 255, 255, 0.5);
  z-index: 10;
  transition: width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease;
  transform-origin: 50% calc(50% + 240px);
  cursor: grab;
}

.pointer:hover {
  width: 32px;
  height: 32px;
  box-shadow: 
    0 0 45px var(--galaxy-glow, rgba(138, 43, 226, 1)),
    0 0 70px var(--galaxy-glow, rgba(138, 43, 226, 0.7)),
    0 0 110px var(--galaxy-glow, rgba(138, 43, 226, 0.4)),
    inset 0 0 22px rgba(255, 255, 255, 0.6);
}

.pointer:active {
  cursor: grabbing;
  width: 30px;
  height: 30px;
}
.pointer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Inner circle for fine-tuning */
.inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 40%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: 
    radial-gradient(circle at center, 
      rgba(8, 8, 25, 0.95) 0%,
      rgba(5, 5, 15, 0.98) 70%,
      rgba(3, 3, 12, 1) 100%
    );
  border: 2px solid var(--galaxy-glow, rgba(147, 112, 219, 0.3));
  box-shadow: 
    inset 0 0 20px var(--galaxy-glow, rgba(147, 112, 219, 0.1)),
    0 0 30px rgba(0, 0, 0, 0.6);
  z-index: 5;
  color: #ffffff;
}

.inner-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 20px;
  height: 20px;
  background: 
    radial-gradient(circle at center, 
      rgba(255, 255, 255, 1) 0%, 
      rgba(255, 255, 255, 0.9) 20%,
      var(--galaxy-primary, rgba(138, 43, 226, 0.8)) 40%,
      var(--galaxy-secondary, rgba(75, 0, 130, 0.6)) 70%,
      transparent 100%
    );
  border: 2px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  box-shadow: 
    0 0 25px var(--galaxy-glow, rgba(138, 43, 226, 0.8)),
    0 0 40px var(--galaxy-glow, rgba(138, 43, 226, 0.4)),
    inset 0 0 12px rgba(255, 255, 255, 0.4);
  z-index: 10;
  transition: width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease;
  transform-origin: 50% calc(50% + 80px);
  cursor: grab;
}

.inner-pointer:hover {
  width: 22px;
  height: 22px;
  box-shadow: 
    0 0 30px var(--galaxy-glow, rgba(138, 43, 226, 1)),
    0 0 50px var(--galaxy-glow, rgba(138, 43, 226, 0.6)),
    inset 0 0 15px rgba(255, 255, 255, 0.5);
}

.inner-pointer:active {
  cursor: grabbing;
  width: 18px;
  height: 18px;
}

.inner-pointer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  color: #ffffff;
}
.hub {
  position:absolute; inset:37% 37%; border-radius:50%; display:grid; place-items:center;
  background: 
    radial-gradient(circle at center, 
      var(--galaxy-glow, rgba(147, 112, 219, 0.1)) 0%,
      var(--galaxy-primary, rgba(45, 27, 105, 0.2)) 30%,
      rgba(8, 8, 25, 0.9) 70%,
      rgba(5, 5, 15, 1) 100%
    );
  border: 3px solid var(--galaxy-glow, rgba(147, 112, 219, 0.5));
  text-align:center; padding:8px;
  z-index: 20;
  color: #ffffff;
  box-shadow: 
    inset 0 0 30px var(--galaxy-glow, rgba(147, 112, 219, 0.15)),
    0 0 50px rgba(0, 0, 0, 0.8),
    0 0 25px var(--galaxy-glow, rgba(147, 112, 219, 0.4));
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.hub .hz { 
  font-weight:900; 
  font-size:clamp(16px,3.5vw,28px); 
  color: #ffffff !important; 
  text-shadow: 0 0 6px rgba(255,255,255,0.45), 0 0 12px rgba(255,255,255,0.35), 0 0 20px rgba(147,112,219,0.35);
  margin-bottom: 2px;
}
.hub .sub { 
  color: #ffffff; 
  text-shadow: 0 0 6px rgba(255,255,255,0.25);
  font-size:10px; 
  letter-spacing:.4px; 
  margin-bottom: 4px;
}
.hub .galaxy-name {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,255,255,0.25);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.labels { position:absolute; inset:0; pointer-events:auto; }
.labels span {
  position:absolute; transform: translate(-50%,-50%);
  font-weight:800; font-variant-numeric: tabular-nums; font-size:clamp(12px,2.2vw,18px);
  color:#c6d3ff; text-shadow: 0 0 18px rgba(125,211,252,.35);
  cursor: pointer;
}
.tag { margin-top:8px; text-align:center; color:var(--muted); font-weight:700; }
.tag { display:inline-block; margin-top:8px; padding:4px 8px; font-size:11px; border-radius:999px; background: var(--panel-bg); border:1px solid var(--panel-border); }

/* Pan controls */
.pan-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: var(--control-bg);
  border: 2px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.pan-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

.pan-slider-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.pan-label-marker {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  min-width: 12px;
  text-align: center;
}

.pan-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, 
    rgba(34, 197, 94, 0.3) 0%, 
    rgba(139, 92, 246, 0.2) 50%, 
    rgba(59, 130, 246, 0.3) 100%
  );
  outline: none;
  cursor: pointer;
  position: relative;
}

.pan-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #e5e7eb);
  border: 2px solid rgba(139, 92, 246, 0.8);
  cursor: grab;
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 0 12px rgba(139, 92, 246, 0.4);
  transition: all 0.2s ease;
}

.pan-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 
    0 3px 10px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(139, 92, 246, 0.6);
}

.pan-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(139, 92, 246, 0.5);
}

.pan-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #e5e7eb);
  border: 2px solid rgba(139, 92, 246, 0.8);
  cursor: grab;
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 0 12px rgba(139, 92, 246, 0.4);
  transition: all 0.2s ease;
}

.pan-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 
    0 3px 10px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(139, 92, 246, 0.6);
}

.pan-slider::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(139, 92, 246, 0.5);
}

.pan-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  text-align: center;
  min-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* Wheel controls container */
.wheel-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Mute button */
.mute-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  border: 2px solid var(--panel-border);
  background: var(--control-bg);
  color: var(--control-fg);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  justify-content: center;
  width: 100%;
}

.mute-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.mute-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

.mute-btn.muted {
  background: linear-gradient(180deg, #ef4444, #dc2626);
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.mute-btn.muted:hover {
  background: linear-gradient(180deg, #dc2626, #b91c1c);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5);
}

.mute-icon {
  font-size: 18px;
  line-height: 1;
}

.mute-text {
  font-size: 14px;
}

/* Mono control container */
.mono-control-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 80px;
  padding: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  height: 100%;
  justify-content: space-between;
}

.mono-control-label {
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
}

/* Mono volume bar */
.mono-volume-bar {
  width: 100%;
  margin-top: 0;
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
  flex: 1;
}

.mono-volume-track {
  position: relative;
  width: 48px;
  height: 100%;
  min-height: 140px;
  background: linear-gradient(to bottom,
    rgba(139, 92, 246, 0.25) 0%,
    rgba(139, 92, 246, 0.1) 50%,
    rgba(139, 92, 246, 0.25) 100%
  );
  border: 2px solid var(--panel-border);
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  overflow: visible;
}

.mono-volume-track::before {
  content: '';
  position: absolute;
  inset: 8px;
  background: linear-gradient(to bottom,
    rgba(139, 92, 246, 0.3) 0%,
    rgba(139, 92, 246, 0.15) 50%,
    rgba(139, 92, 246, 0.3) 100%
  );
  border-radius: 999px;
}

.mono-volume-slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: linear-gradient(180deg, #ffffff, #e5e7eb);
  border: 3px solid rgba(139, 92, 246, 0.8);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(139, 92, 246, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.2s ease;
  z-index: 10;
}

.mono-volume-slider:hover {
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(139, 92, 246, 0.6),
    inset 0 0 12px rgba(255, 255, 255, 0.6);
}

.mono-volume-slider:active {
  cursor: grabbing;
  box-shadow: 
    0 3px 8px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(139, 92, 246, 0.5),
    inset 0 0 8px rgba(255, 255, 255, 0.4);
}

.mono-volume-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  min-height: 20px;
  text-align: center;
  flex-shrink: 0;
  width: 100%;
}


/* Live info section */
.live-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 6px 6px;
  flex: 1;
  justify-content: center;
  min-height: 0;
}

.live-info-label {
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.live-info-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.live-info-wheels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.live-info-wheel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.live-info-wheel-wrapper > .live-info-item-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
}

.live-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
  min-height: 50px;
  justify-content: center;
  min-width: 0;
  width: 100%;
}

/* Fixed height for wheel info containers to prevent layout shift */
.live-info-wheel-wrapper .live-info-item {
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  overflow: hidden;
}

.live-info-item.frequency-diff {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  margin-top: 3px;
}

.live-info-item.frequency-diff .live-info-item-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 2px;
}

.live-info-item-note {
  font-size: 18px;
  font-weight: 900;
  color: var(--fg);
  text-align: center;
  white-space: nowrap;
  line-height: 1.1;
}

.live-info-item-note.below-hearing {
  font-size: 22px;
  color: #ef4444;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}

.live-info-item-offset {
  font-size: 12px;
  font-weight: 700;
  color: rgba(139, 92, 246, 0.9);
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.live-info-item-freq {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

.live-info-item-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Spectrogram Visualization */
.spectrogram-container {
  width: 100%;
  margin-top: 6px;
  background: var(--control-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  overflow: hidden;
}

.spectrogram-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.02);
}

body[data-theme="dark"] .spectrogram-header {
  background: rgba(255, 255, 255, 0.02);
}

.spectrogram-title {
  font-size: 8px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spectrogram-wrapper {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#spectrogramCanvas {
  width: 100%;
  height: 60px;
  border-radius: 4px;
}

.spectrogram-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.legend-left .legend-dot {
  background: #f97316;
}

.legend-left {
  color: #f97316;
}

.legend-right .legend-dot {
  background: #06b6d4;
}

.legend-right {
  color: #06b6d4;
}

.legend-cps {
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  margin-left: 2px;
}

/* Bottom controls wrapper */
.bottom-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* Fine tune control */
.fine-tune-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.fine-tune-label {
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fine-tune-dial {
  position: relative;
  width: 120px;
  height: 120px;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.fine-tune-rotor {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(13, 13, 35, 0.9) 0%,
    rgba(8, 8, 25, 0.95) 50%,
    rgba(5, 5, 15, 1) 100%
  );
  border: 2px solid rgba(147, 112, 219, 0.4);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
  cursor: grab;
  transition: border 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.fine-tune-rotor:hover {
  border: 3px solid rgba(147, 112, 219, 0.8);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.7));
  box-shadow: 
    0 0 25px rgba(147, 112, 219, 0.5),
    0 0 40px rgba(147, 112, 219, 0.3),
    inset 0 0 30px rgba(147, 112, 219, 0.1);
}

.fine-tune-rotor:active {
  cursor: grabbing;
}

.fine-tune-rotor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8) 0.5px, transparent 1px),
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.6) 0.5px, transparent 1px),
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.7) 0.5px, transparent 1px),
    radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.5) 0.5px, transparent 1px),
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(138, 43, 226, 0.15) 30deg,
      transparent 90deg,
      rgba(138, 43, 226, 0.12) 180deg,
      transparent 270deg,
      rgba(138, 43, 226, 0.1) 330deg,
      transparent 360deg
    );
  border-radius: 50%;
  pointer-events: none;
}

.fine-tune-pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at center, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.9) 20%,
    rgba(138, 43, 226, 0.8) 40%,
    rgba(75, 0, 130, 0.6) 70%,
    transparent 100%
  );
  border: 2px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  box-shadow: 
    0 0 20px rgba(138, 43, 226, 0.9),
    0 0 35px rgba(138, 43, 226, 0.5),
    inset 0 0 10px rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%) translateY(-46.5px);
  transform-origin: center center;
  pointer-events: none;
}

.fine-tune-rotor:hover .fine-tune-pointer {
  box-shadow: 
    0 0 25px rgba(138, 43, 226, 1),
    0 0 40px rgba(138, 43, 226, 0.7),
    inset 0 0 12px rgba(255, 255, 255, 0.6);
}

.fine-tune-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55%;
  height: 55%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, 
    rgba(8, 8, 25, 0.95) 0%,
    rgba(5, 5, 15, 0.98) 70%,
    rgba(3, 3, 12, 1) 100%
  );
  border: 2px solid rgba(147, 112, 219, 0.3);
  box-shadow: 
    inset 0 0 15px rgba(147, 112, 219, 0.1),
    0 0 20px rgba(0, 0, 0, 0.6);
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.fine-tune-value {
  font-size: 9px;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow: 0 0 6px rgba(255,255,255,0.25);
  letter-spacing: 0.3px;
}

/* Keyboard reference */
.keyboard-section {
  margin: 32px auto 16px;
  padding: 18px 20px 22px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  backdrop-filter: blur(8px);
}

.keyboard-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  margin-bottom: 12px;
  align-items: center;
}

.keyboard-header h2 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg);
}

.keyboard-header p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.keyboard-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.note-system-toggle,
.overtone-highlight-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 6px;
  border: 2px solid var(--panel-border);
  background: var(--control-bg);
  color: var(--fg);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  height: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.note-system-toggle:hover,
.overtone-highlight-toggle:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.1));
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.note-system-toggle:active,
.overtone-highlight-toggle:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.overtone-highlight-toggle.is-active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.15));
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 3px 8px rgba(139, 92, 246, 0.3);
}

.note-system-toggle .toggle-label,
.overtone-highlight-toggle .toggle-label {
  line-height: 1;
  white-space: nowrap;
}

.piano-keyboard-wrapper {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: stretch;
}

.piano-keyboard-wrapper > .piano-keyboard {
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
}

.piano-keyboard-wrapper > .piano-keyboard .piano-keyboard-inner {
  width: 100%;
  min-width: 100%;
}

/* Pitch Bend Wheel - Left side of piano keyboard */
/* Pitch Bend Wheel - Slim Modern Style */
.pitch-bend-wheel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  background: var(--panel-bg, rgba(248, 250, 252, 0.95));
  border: 1px solid var(--panel-border, rgba(148, 163, 184, 0.3));
  border-radius: 12px;
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: ns-resize;
}

.pitch-bend-wheel:focus {
  outline: none;
  border-color: var(--accent, #9370db);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 0 0 2px rgba(147, 112, 219, 0.2);
}

.pitch-bend-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: center;
}

/* Scroll wheel housing - slim design */
.pitch-bend-scroll-housing {
  position: relative;
  width: 32px;
  height: var(--keyboard-height, 190px);
  background: #1a1a24;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

/* The scrolling wheel cylinder */
.pitch-bend-scroll-wheel {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 0;
  height: 300%;
  background: linear-gradient(90deg,
    #35354a 0%,
    #4a4a65 25%,
    #5a5a78 50%,
    #4a4a65 75%,
    #35354a 100%
  );
  border-radius: 12px;
  transition: transform 0.02s linear;
}

/* 3D ridges - each ridge has highlight, body, shadow */
.pitch-bend-ridges {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    /* Ridge top highlight */
    rgba(255, 255, 255, 0.25) 0px,
    rgba(255, 255, 255, 0.15) 1px,
    /* Ridge body - lit surface */
    #6a6a85 1px,
    #5a5a75 3px,
    /* Ridge body - curved middle */
    #4a4a65 3px,
    #4a4a65 5px,
    /* Ridge bottom shadow */
    #3a3a52 5px,
    #2a2a3d 6px,
    rgba(0, 0, 0, 0.3) 6px,
    rgba(0, 0, 0, 0.15) 7px,
    /* Gap between ridges */
    transparent 7px,
    transparent 10px
  );
  border-radius: 12px;
}

/* Cylindrical curvature highlight */
.pitch-bend-scroll-wheel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(255, 255, 255, 0.08) 55%,
    transparent 70%,
    transparent 100%
  );
  border-radius: 12px;
  pointer-events: none;
}

/* Side shadows for cylindrical depth */
.pitch-bend-scroll-wheel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.15) 20%,
    transparent 35%,
    transparent 65%,
    rgba(0, 0, 0, 0.15) 80%,
    rgba(0, 0, 0, 0.45) 100%
  );
  border-radius: 12px;
  pointer-events: none;
}

/* Center indicator line */
.pitch-bend-center-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    rgba(147, 112, 219, 0.6) 0%,
    rgba(147, 112, 219, 1) 30%,
    rgba(180, 150, 255, 1) 50%,
    rgba(147, 112, 219, 1) 70%,
    rgba(147, 112, 219, 0.6) 100%
  );
  box-shadow: 
    0 0 4px rgba(147, 112, 219, 0.8),
    0 0 8px rgba(147, 112, 219, 0.4);
  z-index: 10;
  pointer-events: none;
}

/* Top/bottom fade for depth illusion */
.pitch-bend-scroll-housing::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 20px;
  background: linear-gradient(180deg, 
    rgba(10, 10, 18, 0.95) 0%,
    rgba(10, 10, 18, 0.6) 40%,
    transparent 100%
  );
  z-index: 5;
  pointer-events: none;
  border-radius: 16px 16px 0 0;
}

.pitch-bend-scroll-housing::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  background: linear-gradient(0deg, 
    rgba(10, 10, 18, 0.95) 0%,
    rgba(10, 10, 18, 0.6) 40%,
    transparent 100%
  );
  z-index: 5;
  pointer-events: none;
  border-radius: 0 0 16px 16px;
}

.pitch-bend-value {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted, #64748b);
  font-family: 'SF Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  min-width: 52px;
  width: 52px;
  overflow: hidden;
}

/* Active state */
.pitch-bend-wheel.is-active .pitch-bend-scroll-housing {
  box-shadow: 
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 0 12px rgba(147, 112, 219, 0.3);
}

.pitch-bend-wheel.is-active .pitch-bend-center-line {
  box-shadow: 
    0 0 6px rgba(147, 112, 219, 1),
    0 0 12px rgba(147, 112, 219, 0.6);
}

.pitch-bend-wheel:hover .pitch-bend-scroll-housing {
  box-shadow: 
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 0 8px rgba(147, 112, 219, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pitch-bend-wheel {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    padding: 8px 6px;
  }
  
  .pitch-bend-scroll-housing {
    width: 28px;
  }
  
  .pitch-bend-label {
    font-size: 7px;
  }
  
  .pitch-bend-value {
    font-size: 8px;
    min-width: 46px;
    width: 46px;
  }
}

@media (max-width: 640px) {
  .piano-keyboard-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  
  .pitch-bend-wheel {
    flex-direction: row;
    min-width: auto;
    max-width: none;
    width: 100%;
    padding: 8px 12px;
    gap: 12px;
    justify-content: center;
  }
  
  .pitch-bend-scroll-housing {
    width: 100px;
    height: 32px;
    border-radius: 16px;
  }
  
  /* Horizontal ridges for mobile */
  .pitch-bend-ridges {
    background: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.25) 0px,
      rgba(255, 255, 255, 0.15) 1px,
      #6a6a85 1px,
      #5a5a75 3px,
      #4a4a65 3px,
      #4a4a65 5px,
      #3a3a52 5px,
      #2a2a3d 6px,
      rgba(0, 0, 0, 0.3) 6px,
      rgba(0, 0, 0, 0.15) 7px,
      transparent 7px,
      transparent 10px
    );
  }
  
  .pitch-bend-scroll-wheel::before {
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 30%,
      rgba(255, 255, 255, 0.12) 45%,
      rgba(255, 255, 255, 0.08) 55%,
      transparent 70%,
      transparent 100%
    );
  }
  
  .pitch-bend-scroll-wheel::after {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.15) 20%,
      transparent 35%,
      transparent 65%,
      rgba(0, 0, 0, 0.15) 80%,
      rgba(0, 0, 0, 0.45) 100%
    );
  }
  
  .pitch-bend-center-line {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
      rgba(147, 112, 219, 0.6) 0%,
      rgba(147, 112, 219, 1) 30%,
      rgba(180, 150, 255, 1) 50%,
      rgba(147, 112, 219, 1) 70%,
      rgba(147, 112, 219, 0.6) 100%
    );
  }
  
  .pitch-bend-scroll-housing::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 18px;
    height: auto;
    background: linear-gradient(90deg, 
      rgba(10, 10, 18, 0.95) 0%,
      rgba(10, 10, 18, 0.6) 40%,
      transparent 100%
    );
    border-radius: 16px 0 0 16px;
  }
  
  .pitch-bend-scroll-housing::after {
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: 18px;
    height: auto;
    background: linear-gradient(270deg, 
      rgba(10, 10, 18, 0.95) 0%,
      rgba(10, 10, 18, 0.6) 40%,
      transparent 100%
    );
    border-radius: 0 16px 16px 0;
  }
  
  .pitch-bend-value {
    font-size: 9px;
  }
}

.piano-keyboard {
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: rgba(15, 18, 32, 0.04);
  padding: 12px;
  overflow-x: auto;
  flex: 1 1 0%;
  min-width: 0;
}

/* Frequency labels container - positioned above the keyboard keys */
.piano-freq-labels {
  position: relative;
  width: 100%;
  height: 38px;
  margin-bottom: 4px;
  pointer-events: none;
}

/* Individual frequency label above active keys - multi-line style */
.piano-freq-label {
  position: absolute;
  left: var(--label-left, 0);
  bottom: 0;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #64748b);
  white-space: nowrap;
  z-index: 10;
  opacity: 0.9;
  transition: opacity 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1.15;
}

/* Frequency value (actual Hz) */
.piano-freq-label .freq-label-hz {
  font-weight: 700;
  color: var(--label-color, var(--foreground, #1e293b));
  font-size: 9px;
}

/* Hz offset from exact note */
.piano-freq-label .freq-label-offset {
  font-size: 7px;
  color: var(--label-color, var(--muted, #64748b));
  opacity: 0.75;
}

/* When Hz offset is the only label (overtone mode), make it more prominent */
.piano-freq-label .freq-label-offset:only-child {
  font-size: 9px;
  font-weight: 600;
  opacity: 1;
}

/* Cents deviation */
.piano-freq-label .freq-label-cents {
  font-size: 8px;
  font-weight: 600;
  color: var(--label-color, var(--accent, #9370db));
}

/* Subtle color hint for overtone labels */
.piano-freq-label[style*="--label-color"] {
  color: var(--label-color);
  opacity: 0.9;
}

/* Label for black keys - slightly higher z-index */
.piano-freq-label.for-black-key {
  z-index: 15;
}

/* Left wheel label style */
.piano-freq-label.label-left {
  color: #f97316;
}

/* Right wheel label style */
.piano-freq-label.label-right {
  color: #fb923c;
}

.piano-keyboard-inner {
  position: relative;
  width: 100%;
  height: var(--keyboard-height, 190px);
}

.piano-white-keys {
  display: flex;
  height: 100%;
  width: 100%;
}

.piano-black-keys {
  position: absolute;
  inset: 0;
  height: 62%;
}

.piano-key {
  position: relative;
  --left-highlight: transparent;
  --right-highlight: transparent;
  --overtone-highlight: transparent;
  --overtone-opacity: 0.5;
  --stripe-left-color: var(--left-highlight, var(--right-highlight, transparent));
  --stripe-right-color: var(--right-highlight, var(--left-highlight, transparent));
  transition: filter 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  box-sizing: border-box;
}

.white-key {
  flex: 0 0 calc(100% / 52);
  max-width: calc(100% / 52);
  height: 100%;
  border: 1px solid rgba(15, 18, 32, 0.15);
  border-bottom: 4px solid rgba(15, 18, 32, 0.25);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.white-key + .white-key {
  border-left: none;
}

.black-key {
  position: absolute;
  width: calc(100% / 52 * 0.7);
  height: 100%;
  left: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #111827, #0f172a);
  border-radius: 0 0 6px 6px;
  border: 1px solid rgba(248, 250, 252, 0.1);
  box-shadow: 0 6px 12px rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.black-key .key-label {
  color: rgba(248, 250, 252, 0.75);
}

.key-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  color: rgba(15, 18, 32, 0.6);
  pointer-events: none;
}

/* Piano key wheel frequency fills (left/right) - only active when NOT showing overtones */
.piano-key:not(.is-overtone)::before,
.piano-key:not(.is-overtone)::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: calc(50% - 1px);
  opacity: 0;
  transition: opacity 0.2s ease, height 0.15s ease;
  pointer-events: none;
  z-index: 5;
}

.piano-key:not(.is-overtone)::before {
  left: 0;
  background: linear-gradient(180deg, 
    rgba(255,255,255,0.3) 0%, 
    var(--left-highlight, #f97316) 100%);
  border-right: 2px solid var(--left-highlight, #f97316);
  border-top: 4px solid rgba(255, 255, 255, 0.7);
  box-shadow: 
    inset 2px 0 4px rgba(255,255,255,0.4),
    2px 0 8px var(--left-highlight, transparent),
    0 -2px 6px rgba(255,255,255,0.5);
  height: calc(var(--left-fill, 0) * 100%);
}

.piano-key:not(.is-overtone)::after {
  right: 0;
  background: linear-gradient(180deg, 
    rgba(255,255,255,0.3) 0%, 
    var(--right-highlight, #fb923c) 100%);
  border-left: 2px solid var(--right-highlight, #fb923c);
  border-top: 4px solid rgba(255, 255, 255, 0.7);
  box-shadow: 
    inset -2px 0 4px rgba(255,255,255,0.4),
    -2px 0 8px var(--right-highlight, transparent),
    0 -2px 6px rgba(255,255,255,0.5);
  height: calc(var(--right-fill, 0) * 100%);
}

/* Show wheel fills only when is-left or is-right class is present */
.piano-key.is-left:not(.is-overtone)::before {
  opacity: 1;
}

.piano-key.is-right:not(.is-overtone)::after {
  opacity: 1;
}

.black-key:not(.is-overtone)::before {
  background: linear-gradient(180deg, 
    rgba(255,255,255,0.4) 0%, 
    var(--left-highlight, #f97316) 100%);
  border-right: 2px solid rgba(255,255,255,0.6);
  box-shadow: 
    0 0 12px var(--left-highlight, transparent),
    inset 0 0 8px rgba(255,255,255,0.3),
    0 -2px 6px rgba(255,255,255,0.5);
}

.black-key:not(.is-overtone)::after {
  background: linear-gradient(180deg, 
    rgba(255,255,255,0.4) 0%, 
    var(--right-highlight, #fb923c) 100%);
  border-left: 2px solid rgba(255,255,255,0.6);
  border-right: none;
  box-shadow: 
    0 0 12px var(--right-highlight, transparent),
    inset 0 0 8px rgba(255,255,255,0.3),
    0 -2px 6px rgba(255,255,255,0.5);
}

.piano-key.is-left:not(.is-overtone),
.piano-key.is-right:not(.is-overtone) {
  filter: drop-shadow(0 4px 12px rgba(15,18,32,0.18));
}

/* Overtone highlighting - show fill percentage clearly */
/* Piano keys must NEVER move or change size - only background color changes */

/* White keys: fill from bottom with clear edge marker */
.white-key.is-overtone {
  background: linear-gradient(to top,
    var(--overtone-highlight, rgba(139, 92, 246, 0.8)) 0%,
    var(--overtone-highlight, rgba(139, 92, 246, 0.8)) calc(var(--overtone-opacity, 0.5) * 100%),
    rgba(255, 255, 255, 0.15) calc(var(--overtone-opacity, 0.5) * 100%),
    rgba(255, 255, 255, 0.15) calc(var(--overtone-opacity, 0.5) * 100% + 4px),
    #ffffff calc(var(--overtone-opacity, 0.5) * 100% + 4px),
    #f8fafc 100%);
}

/* Black keys: fill from bottom with clear edge marker */
.black-key.is-overtone {
  background: linear-gradient(to top,
    var(--overtone-highlight, rgba(139, 92, 246, 0.9)) 0%,
    var(--overtone-highlight, rgba(139, 92, 246, 0.9)) calc(var(--overtone-opacity, 0.5) * 100%),
    rgba(255, 255, 255, 0.3) calc(var(--overtone-opacity, 0.5) * 100%),
    rgba(255, 255, 255, 0.3) calc(var(--overtone-opacity, 0.5) * 100% + 4px),
    #111827 calc(var(--overtone-opacity, 0.5) * 100% + 4px),
    #0f172a 100%);
}


.key-glow-top,
.key-glow-bottom {
  pointer-events: none;
}

.key-glow-bottom,
.key-glow-top {
  position: absolute;
  left: -3px;
  right: -3px;
  height: 10px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.18s ease, box-shadow 0.18s ease;
  pointer-events: none;
  z-index: 8;
}

.key-glow-bottom {
  bottom: -8px;
  background:
    linear-gradient(
      90deg,
      var(--stripe-left-color, transparent) 0%,
      var(--stripe-left-color, transparent) calc(50% - 2px),
      rgba(15, 18, 32, 0.3) calc(50% - 2px),
      rgba(15, 18, 32, 0.3) calc(50% + 2px),
      var(--stripe-right-color, var(--stripe-left-color, transparent)) calc(50% + 2px),
      var(--stripe-right-color, var(--stripe-left-color, transparent)) 100%
    );
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.25),
    0 0 16px var(--stripe-left-color, transparent);
}

.key-glow-top {
  top: -8px;
  background:
    linear-gradient(
      90deg,
      var(--stripe-left-color, transparent) 0%,
      var(--stripe-left-color, transparent) calc(50% - 2px),
      rgba(15, 18, 32, 0.3) calc(50% - 2px),
      rgba(15, 18, 32, 0.3) calc(50% + 2px),
      var(--stripe-right-color, var(--stripe-left-color, transparent)) calc(50% + 2px),
      var(--stripe-right-color, var(--stripe-left-color, transparent)) 100%
    );
  box-shadow: 
    0 -4px 8px rgba(0,0,0,0.3),
    0 0 16px var(--stripe-left-color, transparent);
}

/* Only show glow indicators when NOT in overtone mode */
.piano-key.is-left:not(.is-overtone) .key-glow-bottom,
.piano-key.is-right:not(.is-overtone) .key-glow-bottom {
  opacity: 1;
}

.piano-key.is-left:not(.is-overtone) .key-glow-bottom {
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.25),
    0 0 20px var(--left-highlight, transparent),
    -4px 0 12px var(--left-highlight, transparent);
}

.piano-key.is-right:not(.is-overtone) .key-glow-bottom {
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.25),
    0 0 20px var(--right-highlight, transparent),
    4px 0 12px var(--right-highlight, transparent);
}

.black-key.is-left:not(.is-overtone) .key-glow-top,
.black-key.is-right:not(.is-overtone) .key-glow-top {
  opacity: 1;
}

.black-key.is-left:not(.is-overtone) .key-glow-top {
  box-shadow: 
    0 -4px 8px rgba(0,0,0,0.3),
    0 0 20px var(--left-highlight, transparent),
    -4px 0 12px var(--left-highlight, transparent);
}

.black-key.is-right:not(.is-overtone) .key-glow-top {
  box-shadow: 
    0 -4px 8px rgba(0,0,0,0.3),
    0 0 20px var(--right-highlight, transparent),
    4px 0 12px var(--right-highlight, transparent);
}

/* Removed fixed min-width media query for responsive piano keyboard layout */

@media (max-width: 640px) {
  .piano-keyboard {
    padding: 10px 6px;
  }
  .piano-keyboard-inner {
    height: var(--keyboard-height, 170px);
  }
  
  .piano-keyboard-wrapper {
    gap: 10px;
  }
}

/* Footer */
.footer { margin: 24px 0 12px; text-align:center; color:var(--muted); font-size:12px; }

/* Mobile optimizations */
@media (max-width: 800px) {
  .command-bar-unified {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  }
  
  .command-bar-unified .controls {
    gap: 4px;
  }
  
  .command-bar-unified .controls button,
  .controls button { 
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    flex: 0 0 60px !important;
    font-size: 10px !important; 
    padding: 0 4px !important;
  }
}

@media (max-width: 640px) {
  .command-bar-unified {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
  }
  
  .command-bar-unified .page-header-brand {
    grid-column: 1;
    grid-row: 1;
  }
  
  .command-bar-unified .page-header-actions {
    grid-column: 2;
    grid-row: 1;
  }
  
  .command-bar-unified .controls {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 6px;
    width: 100%;
  }
  
  .command-bar-unified .controls button { 
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex: 1 1 auto !important;
    font-size: 11px !important; 
    padding: 0 4px !important;
  }
}

/* iPad and tablet specific controls */
@media (min-width: 701px) and (max-width: 1024px) {
  .controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
    min-width: 400px;
  }
  .controls button {
    min-width: 80px;
    padding: 12px 16px;
    font-size: 15px;
  }
}

/* Landscape phones/tablets: ensure wheels are side-by-side and fit */
@media (max-width: 900px) and (orientation: landscape) {
  .grid { grid-template-columns: 1fr 1fr; }
  .wheel { width: min(45vw, 360px); }
  header { align-items: center; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 10px; }
  header .brand, header .controls { flex: 0 0 auto; }
  .controls { min-width: 520px; }
}

/* Very short landscape heights: slightly smaller wheels to avoid overflow */
@media (orientation: landscape) and (max-height: 420px) {
  .wheel { width: min(42vw, 300px); }
  header { overflow-x: auto; flex-wrap: nowrap; }
}

/* Large screens: give more breathing room and allow larger wheels */
@media (min-width: 1280px) and (orientation: landscape) {
  .app { max-width: 1400px; }
  .grid { gap: 24px; }
  .wheel { width: min(42vw, 560px); }
}

/* ===== OVERTONES SECTION ===== */
.overtones-section {
  margin: 20px 0;
  padding: 14px;
  background: var(--panel-bg);
  border-radius: 16px;
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
}

.overtones-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.overtones-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.overtones-header-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.overtones-header-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overtones-replay-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 2px solid var(--panel-border);
  background: var(--control-bg);
  color: var(--control-fg);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  min-width: auto;
  width: auto;
  height: 26px;
  opacity: 0.5;
  pointer-events: none;
}

.overtones-replay-btn.is-active {
  opacity: 1;
  pointer-events: auto;
}

.overtones-replay-btn:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.15), rgba(52, 211, 153, 0.1));
  border-color: rgba(52, 211, 153, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.overtones-replay-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.overtones-replay-btn .replay-icon {
  font-size: 12px;
  line-height: 1;
  transition: transform 0.3s ease;
}

.overtones-replay-btn.is-replaying .replay-icon {
  animation: spin-replay 0.5s ease-out;
}

@keyframes spin-replay {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.overtones-replay-btn .replay-text {
  line-height: 1;
}

.overtones-header p {
  display: none; /* Hide description to save space */
}

.harmonic-filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 6px;
  border: 2px solid var(--panel-border);
  background: var(--control-bg);
  color: var(--fg);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  min-width: auto;
  height: 26px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.harmonic-filter-toggle:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.1));
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.harmonic-filter-toggle:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#harmonicOnlyToggle.is-active {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.3), rgba(52, 211, 153, 0.2));
  border-color: rgba(52, 211, 153, 0.7);
  color: #047857;
  box-shadow: 
    0 0 0 2px rgba(52, 211, 153, 0.2),
    0 4px 12px rgba(52, 211, 153, 0.3);
}

body[data-theme="dark"] #harmonicOnlyToggle.is-active {
  color: #6ee7b7;
}

#dissonantOnlyToggle.is-active {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(251, 146, 60, 0.2));
  border-color: rgba(251, 146, 60, 0.7);
  color: #c2410c;
  box-shadow: 
    0 0 0 2px rgba(251, 146, 60, 0.2),
    0 4px 12px rgba(251, 146, 60, 0.3);
}

body[data-theme="dark"] #dissonantOnlyToggle.is-active {
  color: #fdba74;
}

.harmonic-filter-toggle .toggle-label {
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .overtones-header {
    gap: 6px;
  }
  
  .overtones-header-controls {
    gap: 6px;
  }
  
  .harmonic-filter-toggle {
    padding: 4px 8px;
    font-size: 9px;
    height: 24px;
  }
  
  .overtones-replay-btn {
    padding: 4px 8px;
    font-size: 10px;
    height: 24px;
  }
  
  .overtones-header h2 {
    font-size: 14px;
  }
}

.overtones-container {
  padding: 4px 0 0;
  width: 100%;
}

.overtones-display {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  padding: 10px;
  width: 100%;
}

.overtone-card {
  background: var(--control-bg);
  border: 2px solid var(--panel-border);
  border-radius: 12px;
  padding: 0;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.overtone-volume-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, 
    transparent 0%, 
    var(--overtone-color, #667eea) 100%
  );
  opacity: calc(var(--volume-fill, 0.5) * 0.15);
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 0;
}

.overtone-card:hover .overtone-volume-fill {
  opacity: calc(var(--volume-fill, 0.5) * 0.25);
}

.overtone-content {
  position: relative;
  z-index: 1;
  padding: 16px;
  flex: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.overtone-content:hover {
  background: rgba(0, 0, 0, 0.02);
}

body[data-theme="dark"] .overtone-content:hover {
  background: rgba(255, 255, 255, 0.03);
}

.overtone-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    var(--overtone-color, #667eea), 
    var(--overtone-color-light, #764ba2)
  );
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.overtone-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  border-color: var(--overtone-color, #667eea);
}

.overtone-card:hover::before {
  opacity: 1;
  height: 6px;
}

.overtone-card.active {
  background: linear-gradient(145deg, #667eea15, #764ba215);
  border-color: var(--overtone-color, #667eea);
  transform: scale(1.03);
  box-shadow: 
    0 0 0 2px var(--overtone-color, #667eea),
    0 8px 20px rgba(102, 126, 234, 0.3);
}

.overtone-card.is-muted {
  opacity: 0.5;
  filter: grayscale(0.7);
}

.overtone-card.is-muted::before {
  opacity: 0.3;
}

/* Filtered out state - when harmonic/dissonant filter is active */
.overtone-card.is-filtered-out {
  opacity: 0.35;
  filter: grayscale(0.8) brightness(0.9);
  transform: scale(0.97);
}

.overtone-card.is-filtered-out::before {
  opacity: 0.2;
}

.overtone-card.is-filtered-out .overtone-content {
  pointer-events: none;
}

.overtone-card.is-filtered-out .overtone-pan-control {
  pointer-events: none;
  opacity: 0.4;
}

/* Playing state - subtle visual feedback when harmonic is activated in sequence */
.overtone-card.is-playing {
  border-color: var(--overtone-color, #667eea);
}

.overtone-card.is-playing::before {
  opacity: 1;
}

.overtone-card:active {
  transform: translateY(-2px);
}

.overtone-mute-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.overtone-card:hover .overtone-mute-indicator {
  opacity: 1;
}

.overtone-card.is-muted .overtone-mute-indicator {
  opacity: 1;
}

.overtone-number {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.overtone-card.active .overtone-number {
  color: var(--overtone-color, #667eea);
}

.overtone-note-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
  line-height: 1;
}

.overtone-card.active .overtone-note-name {
  color: var(--overtone-color, #667eea);
}

.overtone-interval-name {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  font-style: italic;
  line-height: 1.2;
  min-height: 26px;
}

.overtone-frequency {
  font-size: 14px;
  color: var(--fg);
  font-weight: 600;
  font-family: 'Courier New', monospace;
  margin-bottom: 4px;
}

.overtone-card.active .overtone-frequency {
  color: var(--overtone-color, #667eea);
}

/* Hz offset and cents deviation display */
.overtone-deviation {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  margin-bottom: 6px;
  opacity: 0.85;
}

.overtone-hz-offset {
  color: var(--muted, #64748b);
  font-weight: 500;
}

.overtone-cents {
  color: var(--overtone-color, #667eea);
  font-weight: 600;
}

.overtone-card.active .overtone-deviation {
  opacity: 1;
}

.overtone-card.active .overtone-hz-offset {
  color: var(--fg);
}

.overtone-card.active .overtone-cents {
  color: var(--overtone-color, #667eea);
}

.overtone-volume-label {
  font-size: 13px;
  color: var(--overtone-color, #667eea);
  font-weight: 700;
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--overtone-color, #667eea);
  background: linear-gradient(135deg, 
    var(--overtone-color, #667eea), 
    var(--overtone-color-light, #764ba2)
  );
  color: white;
  border-radius: 6px;
  display: inline-block;
  min-width: 50px;
}

.overtone-pan-control {
  position: relative;
  z-index: 1;
  padding: 12px 8px 16px;
  border-top: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

body[data-theme="dark"] .overtone-pan-control {
  background: rgba(255, 255, 255, 0.02);
}

.overtone-pan-label-l,
.overtone-pan-label-r {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  min-width: 10px;
  max-width: 12px;
  text-align: center;
  flex-shrink: 0;
}

.overtone-pan-slider {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, 
    #3b82f6 0%, 
    var(--panel-border) 50%, 
    #ef4444 100%
  );
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.overtone-pan-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--overtone-color, #667eea);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.overtone-pan-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--overtone-color, #667eea);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.overtone-pan-slider:hover::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.overtone-pan-slider:hover::-moz-range-thumb {
  transform: scale(1.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.overtone-pan-slider:active::-webkit-slider-thumb {
  transform: scale(1.1);
}

.overtone-pan-slider:active::-moz-range-thumb {
  transform: scale(1.1);
}

/* Dark mode adjustments */
body[data-theme="dark"] .overtone-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .overtone-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] .overtone-card.active {
  background: linear-gradient(145deg, #667eea25, #764ba225);
  box-shadow: 
    0 0 0 2px var(--overtone-color, #667eea),
    0 8px 20px rgba(102, 126, 234, 0.5);
}

body[data-theme="dark"] .overtone-card.is-playing {
  border-color: var(--overtone-color, #667eea);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .overtones-display {
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .overtones-display {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .overtones-section {
    padding: 12px;
    margin: 16px 0;
  }
  
  .overtones-header {
    gap: 6px;
  }
  
  .overtones-header-controls {
    gap: 6px;
    flex-wrap: wrap;
  }
  
  .overtones-display {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  
  .overtone-content {
    padding: 12px;
  }
  
  .overtone-note-name {
    font-size: 18px;
  }
  
  .overtone-pan-control {
    padding: 10px 6px 12px;
    gap: 3px;
  }
}

@media (max-width: 640px) {
  .overtones-display {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .overtone-content {
    padding: 10px;
  }
  
  .overtone-pan-control {
    padding: 10px 6px 12px;
    gap: 3px;
  }
  
  .overtone-pan-label-l,
  .overtone-pan-label-r {
    font-size: 9px;
    min-width: 8px;
    max-width: 10px;
  }
}

@media (max-width: 400px) {
  .overtones-display {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  
  .overtone-pan-control {
    padding: 8px 4px 10px;
    gap: 2px;
  }
  
  .overtone-pan-label-l,
  .overtone-pan-label-r {
    font-size: 8px;
    min-width: 6px;
    max-width: 8px;
  }
}