: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;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.page-header-brand:hover {
  transform: translateY(-1px);
}

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

.brand-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(147, 112, 219, 0.15);
  animation: brand-ring-spin 12s linear infinite;
  pointer-events: none;
}

.brand-icon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(147, 112, 219, 0.1) 0%,
    transparent 60%
  );
  animation: brand-subtle-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

.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)); }
}

@keyframes brand-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}

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

@keyframes brand-subtle-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.95); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.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;
  position: relative;
  filter: drop-shadow(0 0 2px rgba(147, 112, 219, 0.2));
}

.page-header-brand:hover .brand-title {
  animation: gradient-shift 2s ease-in-out infinite, brand-shimmer 1.5s ease-in-out;
}

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

@keyframes brand-shimmer {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(147, 112, 219, 0.2)); }
  50% { filter: drop-shadow(0 0 6px rgba(64, 224, 208, 0.5)); }
}

.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;
  border: 1px solid rgba(255, 152, 0, 0.15);
  transition: all 0.4s ease;
}

/* The glowing aura */
.orb-glow {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 4px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 152, 0, 0.25) 0%,
    rgba(255, 193, 7, 0.12) 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: 17px;
  color: #ff9800;
  text-shadow: 
    0 0 6px rgba(255, 152, 0, 0.6),
    0 0 12px rgba(255, 193, 7, 0.3);
  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: 34px;
  height: 34px;
  left: 2px;
  border: 1px dashed rgba(255, 152, 0, 0.25);
  border-radius: 50%;
  animation: orb-spin 8s linear infinite;
  pointer-events: none;
}

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

@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: #ff9800;
  letter-spacing: 1px;
  text-transform: lowercase;
  opacity: 0.7;
  transition: all 0.3s ease;
}

/* Hover state - energy surge */
.donate-orb:hover {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(255, 193, 7, 0.08));
  border-color: rgba(255, 152, 0, 0.35);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(255, 152, 0, 0.25);
}

.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.15);
  color: #ffb74d;
  text-shadow: 
    0 0 10px rgba(255, 183, 77, 0.8),
    0 0 18px rgba(255, 152, 0, 0.6),
    0 0 28px rgba(255, 193, 7, 0.4);
}

.donate-orb:hover .orb-ring {
  animation: orb-spin 2s linear infinite;
  border-color: rgba(255, 152, 0, 0.8);
}

.donate-orb:hover .orb-label {
  opacity: 1;
  color: #ff9800;
  letter-spacing: 2px;
}

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

/* Dark mode adjustments */
body[data-theme="dark"] .donate-orb {
  border-color: rgba(255, 152, 0, 0.2);
}

body[data-theme="dark"] .orb-core {
  color: #ff9800;
}

body[data-theme="dark"] .orb-label {
  color: #ff9800;
  opacity: 0.7;
}

body[data-theme="dark"] .donate-orb:hover {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(255, 193, 7, 0.1));
  border-color: rgba(255, 152, 0, 0.4);
}

/* 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);
}

/* Tutorial button in header */
.tutorial-btn {
  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: #374151;
  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;
  text-decoration: none;
}

.tutorial-btn: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);
}

body[data-theme="dark"] .tutorial-btn {
  background: linear-gradient(180deg, #1e1b4b, #111827);
  color: #d1d5db;
  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);
}

body[data-theme="dark"] .tutorial-btn: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);
}

/* Demo button in header - subtle sparkle style */
.demo-btn-header {
  height: 38px;
  padding: 0 14px;
  border-radius: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
  color: #6b7280;
  border: 2px solid rgba(147, 112, 219, 0.25);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.demo-btn-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(147, 112, 219, 0.15), 
    transparent
  );
  animation: demo-shimmer 4s ease-in-out infinite;
}

@keyframes demo-shimmer {
  0%, 100% { left: -100%; }
  50%, 60% { left: 150%; }
}

.demo-btn-header:hover {
  transform: scale(1.05);
  box-shadow: 
    0 4px 12px rgba(147, 112, 219, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
  border-color: rgba(147, 112, 219, 0.4);
  color: #7c3aed;
}

.demo-btn-header .demo-btn-icon {
  font-size: 12px;
  line-height: 1;
}

.demo-btn-header .demo-btn-text {
  line-height: 1;
}

/* Demo button running state - matches theme/tutorial button size (44x44) */
.demo-btn-header.is-running {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fce7f3, #f9a8d4);
  border: 2px solid rgba(255, 105, 180, 0.5);
  justify-content: center;
}

.demo-btn-header.is-running .demo-btn-icon {
  display: block;
  font-size: 20px;
  color: #ec4899;
  text-shadow: none;
  animation: sparkle-spin 1s linear infinite;
}

.demo-btn-header.is-running .demo-btn-text {
  display: none;
}

@keyframes sparkle-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body[data-theme="dark"] .demo-btn-header {
  background: linear-gradient(180deg, #1e1b4b, #111827);
  color: #a1a1aa;
  border-color: rgba(147, 112, 219, 0.35);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(147, 112, 219, 0.15);
}

body[data-theme="dark"] .demo-btn-header::after {
  background: linear-gradient(90deg, 
    transparent, 
    rgba(147, 112, 219, 0.25), 
    transparent
  );
}

body[data-theme="dark"] .demo-btn-header:hover {
  box-shadow: 
    0 4px 14px rgba(147, 112, 219, 0.3),
    inset 0 1px 2px rgba(147, 112, 219, 0.2);
  border-color: rgba(147, 112, 219, 0.5);
  color: #c4b5fd;
}

body[data-theme="dark"] .demo-btn-header.is-running {
  background: linear-gradient(180deg, #3b1e4a, #1e1b4b);
  border-color: rgba(255, 105, 180, 0.6);
}

body[data-theme="dark"] .demo-btn-header.is-running .demo-btn-icon {
  color: #f9a8d4;
}

/* ===== UNIFIED EXPERIENCES SECTION ===== */
.experiences-section {
  margin: 20px 0;
  background: var(--panel-bg);
  border-radius: 20px;
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.experiences-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #f59e0b 0%,
    #9370db 33%,
    #40e0d0 66%,
    #ff69b4 100%
  );
  opacity: 0.9;
}

/* Tabs Navigation */
.experiences-tabs {
  display: flex;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.02);
  padding: 0;
}

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

.experience-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.25s ease;
  position: relative;
}

.experience-tab:hover {
  color: var(--fg);
  background: rgba(147, 112, 219, 0.05);
}

.experience-tab.active {
  color: var(--fg);
  background: transparent;
}

.experience-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #9370db, #40e0d0);
  transition: transform 0.3s ease;
}

.experience-tab.active::after {
  transform: translateX(-50%) scaleX(1);
}

.experience-tab[data-tab="quickstart"].active::after {
  background: linear-gradient(90deg, #f59e0b, #34d399);
}

.experience-tab[data-tab="guided"].active::after {
  background: linear-gradient(90deg, #9370db, #ff69b4);
}

.experience-tab[data-tab="dynamic"].active::after {
  background: linear-gradient(90deg, #8b5cf6, #40e0d0);
}

.tab-icon {
  font-size: 15px;
  transition: transform 0.2s ease;
}

.experience-tab:hover .tab-icon {
  transform: scale(1.1);
}

.experience-tab.active .tab-icon {
  animation: tab-icon-pulse 0.4s ease;
}

@keyframes tab-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.tab-label {
  font-weight: 600;
}

/* Tab Content Panels */
.experiences-content {
  position: relative;
}

.experience-panel {
  display: none;
  padding: 16px;
  animation: panel-fade-in 0.3s ease;
}

.experience-panel.active {
  display: block;
}

@keyframes panel-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Quick Start Panel */
.quick-start-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Category Navigation Pills */
.qs-categories {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.12));
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  width: fit-content;
  max-width: 100%;
}

button.qs-category-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px;
  background: transparent;
  border: none;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: auto;
  min-width: unset;
  max-width: none;
  flex: none;
  box-shadow: none;
}

button.qs-category-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  transform: none;
}

button.qs-category-pill.active {
  background: rgba(139, 92, 246, 0.2);
  color: #fff;
}

button.qs-category-pill .pill-icon {
  font-size: 11px;
  line-height: 1;
}

button.qs-category-pill .pill-label {
  font-weight: 500;
  letter-spacing: 0.2px;
}

button.qs-category-pill .pill-badge {
  display: none;
}

/* Category-specific active colors */
button.qs-category-pill[data-category="sleep"].active { background: rgba(129, 140, 248, 0.25); }
button.qs-category-pill[data-category="anxiety"].active { background: rgba(74, 222, 128, 0.2); }
button.qs-category-pill[data-category="focus"].active { background: rgba(251, 191, 36, 0.25); }
button.qs-category-pill[data-category="meditation"].active { background: rgba(192, 132, 252, 0.25); }
button.qs-category-pill[data-category="body"].active { background: rgba(244, 114, 182, 0.25); }
button.qs-category-pill[data-category="explore"].active { background: rgba(34, 211, 238, 0.25); }

/* Filtered state for buttons */
.quick-start-btn.qs-hidden {
  display: none !important;
}

.quick-start-btn.qs-visible {
  animation: qsFadeIn 0.3s ease-out forwards;
}

@keyframes qsFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.quick-start-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
}

/* Quick Start Button - Compact transport style */
.quick-start-btn {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--control-bg);
  white-space: nowrap;
  height: 36px;
  flex: 0 0 auto;
  width: auto;
}

.quick-start-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.quick-start-btn:active {
  transform: translateY(1px) scale(0.98);
}

.qsb-icon {
  font-size: 13px;
  transition: transform 0.2s ease;
}

.quick-start-btn:hover .qsb-icon {
  transform: scale(1.1);
}

.qsb-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
}

.qsb-hint {
  display: none;
}

/* Progress bar */
.qsb-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  border-radius: 0 0 25px 25px;
  transition: width 0.1s linear;
}

/* FOCUS Button */
.focus-btn {
  border-color: rgba(245, 158, 11, 0.3);
}

.focus-btn:hover {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.08);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.focus-btn .qsb-progress {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* DEEP FOCUS Button - Advanced 18min flow state protocol */
.deepFocus-btn {
  border-color: rgba(180, 83, 9, 0.5);
  background: rgba(120, 53, 15, 0.15);
}

.deepFocus-btn:hover {
  border-color: rgba(217, 119, 6, 0.7);
  background: rgba(180, 83, 9, 0.22);
  box-shadow: 0 4px 16px rgba(180, 83, 9, 0.35), 0 0 25px rgba(245, 158, 11, 0.2);
}

.deepFocus-btn .qsb-progress {
  background: linear-gradient(90deg, #78350f, #b45309, #f59e0b, #fbbf24);
}

.deepFocus-btn .qsb-icon {
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6));
  animation: lightning-flicker 2s ease-in-out infinite;
}

@keyframes lightning-flicker {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6)); }
  50% { opacity: 0.85; filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8)); }
}

.deepFocus-btn .qsb-label {
  background: linear-gradient(135deg, #fbbf24, #fcd34d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* RELAX Button */
.relax-btn {
  border-color: rgba(52, 211, 153, 0.3);
}

.relax-btn:hover {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(52, 211, 153, 0.08);
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.15);
}

.relax-btn .qsb-progress {
  background: linear-gradient(90deg, #34d399, #6ee7b7);
}

/* SLEEP Button */
.sleep-btn {
  border-color: rgba(129, 140, 248, 0.3);
}

.sleep-btn:hover {
  border-color: rgba(129, 140, 248, 0.5);
  background: rgba(129, 140, 248, 0.08);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.15);
}

.sleep-btn .qsb-progress {
  background: linear-gradient(90deg, #818cf8, #a5b4fc);
}

/* MEDITATION Button */
.meditation-btn {
  border-color: rgba(167, 139, 250, 0.3);
}

.meditation-btn:hover {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.08);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.15);
}

.meditation-btn .qsb-progress {
  background: linear-gradient(90deg, #a78bfa, #c4b5fd);
}

/* TRANSCENDENT Button - Advanced 25min enlightenment protocol */
.transcendent-btn {
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(91, 33, 182, 0.18);
}

.transcendent-btn:hover {
  border-color: rgba(139, 92, 246, 0.7);
  background: rgba(124, 58, 237, 0.25);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4), 0 0 30px rgba(167, 139, 250, 0.2);
}

.transcendent-btn .qsb-progress {
  background: linear-gradient(90deg, #4c1d95, #7c3aed, #a78bfa, #c4b5fd);
}

.transcendent-btn .qsb-icon {
  filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.7));
  animation: crystal-glow 3s ease-in-out infinite;
}

@keyframes crystal-glow {
  0%, 100% { 
    filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.7)); 
    transform: rotate(0deg);
  }
  50% { 
    filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.9)); 
    transform: rotate(10deg);
  }
}

.transcendent-btn .qsb-label {
  background: linear-gradient(135deg, #c4b5fd, #e9d5ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* THIRD EYE Button - 22min pineal activation protocol */
.thirdEye-btn {
  border-color: rgba(79, 70, 229, 0.5);
  background: linear-gradient(135deg, 
    rgba(49, 46, 129, 0.2) 0%,
    rgba(79, 70, 229, 0.15) 50%,
    rgba(99, 102, 241, 0.1) 100%
  );
}

.thirdEye-btn:hover {
  border-color: rgba(99, 102, 241, 0.7);
  background: linear-gradient(135deg, 
    rgba(49, 46, 129, 0.3) 0%,
    rgba(79, 70, 229, 0.25) 50%,
    rgba(99, 102, 241, 0.18) 100%
  );
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.45), 0 0 35px rgba(129, 140, 248, 0.25);
}

.thirdEye-btn .qsb-progress {
  background: linear-gradient(90deg, #312e81, #4f46e5, #6366f1, #818cf8);
}

.thirdEye-btn .qsb-icon {
  filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.8));
  animation: eye-pulse 2.5s ease-in-out infinite;
}

@keyframes eye-pulse {
  0%, 100% { 
    filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.8)); 
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 12px rgba(129, 140, 248, 1)); 
    transform: scale(1.1);
  }
}

.thirdEye-btn .qsb-label {
  background: linear-gradient(135deg, #a5b4fc, #c7d2fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* THETA Button */
.theta-btn {
  border-color: rgba(192, 132, 252, 0.3);
}

.theta-btn:hover {
  border-color: rgba(192, 132, 252, 0.5);
  background: rgba(192, 132, 252, 0.08);
  box-shadow: 0 4px 12px rgba(192, 132, 252, 0.15);
}

.theta-btn .qsb-progress {
  background: linear-gradient(90deg, #c084fc, #d8b4fe);
}

/* MASSAGE Button */
.massage-btn {
  border-color: rgba(244, 114, 182, 0.3);
}

.massage-btn:hover {
  border-color: rgba(244, 114, 182, 0.5);
  background: rgba(244, 114, 182, 0.08);
  box-shadow: 0 4px 12px rgba(244, 114, 182, 0.15);
}

.massage-btn .qsb-progress {
  background: linear-gradient(90deg, #f472b6, #f9a8d4);
}

/* BODY RESTORE Button - Advanced 22min healing protocol */
.bodyRestore-btn {
  border-color: rgba(190, 24, 93, 0.5);
  background: rgba(131, 24, 67, 0.18);
}

.bodyRestore-btn:hover {
  border-color: rgba(219, 39, 119, 0.7);
  background: rgba(190, 24, 93, 0.25);
  box-shadow: 0 4px 20px rgba(190, 24, 93, 0.4), 0 0 30px rgba(244, 114, 182, 0.2);
}

.bodyRestore-btn .qsb-progress {
  background: linear-gradient(90deg, #831843, #be185d, #db2777, #f472b6);
}

.bodyRestore-btn .qsb-icon {
  filter: drop-shadow(0 0 4px rgba(244, 114, 182, 0.6));
  animation: heal-pulse 2.5s ease-in-out infinite;
}

@keyframes heal-pulse {
  0%, 100% { 
    filter: drop-shadow(0 0 4px rgba(244, 114, 182, 0.6)); 
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 8px rgba(219, 39, 119, 0.9)); 
    transform: scale(1.05);
  }
}

.bodyRestore-btn .qsb-label {
  background: linear-gradient(135deg, #f9a8d4, #fbcfe8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* DELTA Button */
.delta-btn {
  border-color: rgba(96, 165, 250, 0.3);
}

.delta-btn:hover {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.08);
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
}

.delta-btn .qsb-progress {
  background: linear-gradient(90deg, #60a5fa, #93c5fd);
}

/* DEEP SLEEP Button - Advanced 20min protocol */
.deepSleep-btn {
  border-color: rgba(30, 58, 95, 0.5);
  background: rgba(15, 23, 42, 0.15);
}

.deepSleep-btn:hover {
  border-color: rgba(56, 89, 138, 0.7);
  background: rgba(30, 58, 95, 0.2);
  box-shadow: 0 4px 16px rgba(30, 58, 95, 0.35), 0 0 20px rgba(99, 102, 241, 0.15);
}

.deepSleep-btn .qsb-progress {
  background: linear-gradient(90deg, #1e3a5f, #3b5998, #4f46e5);
}

.deepSleep-btn .qsb-icon {
  filter: drop-shadow(0 0 3px rgba(99, 102, 241, 0.5));
}

.deepSleep-btn .qsb-label {
  background: linear-gradient(135deg, #94a3b8, #e0e7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

/* STRESS Button */
.stress-btn {
  border-color: rgba(74, 222, 128, 0.3);
}

.stress-btn:hover {
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(74, 222, 128, 0.08);
  box-shadow: 0 4px 12px rgba(74, 222, 128, 0.15);
}

.stress-btn .qsb-progress {
  background: linear-gradient(90deg, #4ade80, #86efac);
}

/* ANXIETY RELIEF Button - Advanced 18min protocol */
.anxietyRelief-btn {
  border-color: rgba(5, 150, 105, 0.4);
  background: rgba(6, 95, 70, 0.12);
}

.anxietyRelief-btn:hover {
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(5, 150, 105, 0.18);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.3), 0 0 20px rgba(52, 211, 153, 0.15);
}

.anxietyRelief-btn .qsb-progress {
  background: linear-gradient(90deg, #059669, #10b981, #34d399);
}

.anxietyRelief-btn .qsb-icon {
  filter: drop-shadow(0 0 3px rgba(52, 211, 153, 0.5));
}

.anxietyRelief-btn .qsb-label {
  background: linear-gradient(135deg, #6ee7b7, #a7f3d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

/* LUCID Button */
.lucid-btn {
  border-color: rgba(34, 211, 216, 0.3);
}

.lucid-btn:hover {
  border-color: rgba(34, 211, 216, 0.5);
  background: rgba(34, 211, 216, 0.08);
  box-shadow: 0 4px 12px rgba(34, 211, 216, 0.15);
}

.lucid-btn .qsb-progress {
  background: linear-gradient(90deg, #22d3d8, #67e8f9);
}

/* IMMERSION (8D) Button */
.immersion-btn {
  border-color: rgba(251, 146, 60, 0.3);
}

.immersion-btn:hover {
  border-color: rgba(251, 146, 60, 0.5);
  background: rgba(251, 146, 60, 0.08);
  box-shadow: 0 4px 12px rgba(251, 146, 60, 0.15);
}

.immersion-btn .qsb-progress {
  background: linear-gradient(90deg, #fb923c, #fdba74);
}

/* HEARTBEAT Button */
.heartbeat-btn {
  border-color: rgba(239, 68, 68, 0.3);
}

.heartbeat-btn:hover {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.08);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.heartbeat-btn .qsb-progress {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

/* BREATH Button */
.breath-btn {
  border-color: rgba(6, 182, 212, 0.3);
}

.breath-btn:hover {
  border-color: rgba(6, 182, 212, 0.5);
  background: rgba(6, 182, 212, 0.08);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

.breath-btn .qsb-progress {
  background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

/* SPACE CLEAR Button - 18min Solfeggio room cleansing */
.spaceClear-btn {
  border-color: rgba(13, 148, 136, 0.5);
  background: linear-gradient(135deg, 
    rgba(13, 148, 136, 0.12) 0%,
    rgba(20, 184, 166, 0.08) 50%,
    rgba(94, 234, 212, 0.05) 100%
  );
}

.spaceClear-btn:hover {
  border-color: rgba(20, 184, 166, 0.7);
  background: linear-gradient(135deg, 
    rgba(13, 148, 136, 0.22) 0%,
    rgba(20, 184, 166, 0.15) 50%,
    rgba(94, 234, 212, 0.1) 100%
  );
  box-shadow: 0 4px 20px rgba(13, 148, 136, 0.35), 0 0 30px rgba(94, 234, 212, 0.2);
}

.spaceClear-btn .qsb-progress {
  background: linear-gradient(90deg, #0d9488, #14b8a6, #2dd4bf, #5eead4);
}

.spaceClear-btn .qsb-icon {
  filter: drop-shadow(0 0 5px rgba(94, 234, 212, 0.7));
  animation: sparkle-drift 3s ease-in-out infinite;
}

@keyframes sparkle-drift {
  0%, 100% { 
    filter: drop-shadow(0 0 5px rgba(94, 234, 212, 0.7)); 
    transform: translateY(0) rotate(0deg);
  }
  25% {
    filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.9)); 
    transform: translateY(-2px) rotate(5deg);
  }
  50% { 
    filter: drop-shadow(0 0 10px rgba(20, 184, 166, 1)); 
    transform: translateY(0) rotate(0deg);
  }
  75% {
    filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.9)); 
    transform: translateY(-2px) rotate(-5deg);
  }
}

.spaceClear-btn .qsb-label {
  background: linear-gradient(135deg, #5eead4, #99f6e4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* QUANTUM Button */
.quantum-btn {
  border-color: rgba(139, 92, 246, 0.3);
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.05) 0%,
    rgba(236, 72, 153, 0.05) 50%,
    rgba(34, 211, 238, 0.05) 100%
  );
}

.quantum-btn:hover {
  border-color: rgba(139, 92, 246, 0.5);
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.12) 0%,
    rgba(236, 72, 153, 0.08) 50%,
    rgba(34, 211, 238, 0.08) 100%
  );
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.quantum-btn .qsb-progress {
  background: linear-gradient(90deg, #8b5cf6, #ec4899, #22d3ee);
  background-size: 200% 100%;
  animation: quantum-gradient 3s ease infinite;
}

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

/* Playing States */
.quick-start-btn.is-playing {
  pointer-events: auto;
}

.quick-start-btn.is-playing .qsb-icon {
  animation: qs-icon-pulse 1.5s ease-in-out infinite;
}

@keyframes qs-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.focus-btn.is-playing {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.deepFocus-btn.is-playing {
  background: rgba(180, 83, 9, 0.3);
  border-color: rgba(217, 119, 6, 0.8);
  box-shadow: 0 0 30px rgba(180, 83, 9, 0.4), 0 0 50px rgba(245, 158, 11, 0.25);
  animation: deepFocus-pulse 1.5s ease-in-out infinite;
}

@keyframes deepFocus-pulse {
  0%, 100% {
    box-shadow: 0 0 30px rgba(180, 83, 9, 0.4), 0 0 50px rgba(245, 158, 11, 0.25);
  }
  50% {
    box-shadow: 0 0 40px rgba(180, 83, 9, 0.5), 0 0 70px rgba(245, 158, 11, 0.35);
  }
}

.deepFocus-btn.is-playing .qsb-icon {
  animation: lightning-active 0.8s ease-in-out infinite;
}

@keyframes lightning-active {
  0%, 100% { 
    transform: scale(1); 
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.8)); 
  }
  50% { 
    transform: scale(1.2); 
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 1)); 
  }
}

.relax-btn.is-playing {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.6);
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.2);
}

.sleep-btn.is-playing {
  background: rgba(129, 140, 248, 0.15);
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 0 20px rgba(129, 140, 248, 0.2);
}

.meditation-btn.is-playing {
  background: rgba(167, 139, 250, 0.15);
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.2);
}

.transcendent-btn.is-playing {
  background: rgba(124, 58, 237, 0.3);
  border-color: rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 35px rgba(124, 58, 237, 0.45), 0 0 60px rgba(167, 139, 250, 0.25);
  animation: transcendent-aura 8s ease-in-out infinite;
}

@keyframes transcendent-aura {
  0%, 100% {
    box-shadow: 0 0 35px rgba(124, 58, 237, 0.45), 0 0 60px rgba(167, 139, 250, 0.25);
    background: rgba(124, 58, 237, 0.3);
  }
  25% {
    box-shadow: 0 0 45px rgba(139, 92, 246, 0.5), 0 0 80px rgba(196, 181, 253, 0.3);
    background: rgba(139, 92, 246, 0.35);
  }
  50% {
    box-shadow: 0 0 55px rgba(167, 139, 250, 0.55), 0 0 100px rgba(233, 213, 255, 0.35);
    background: rgba(167, 139, 250, 0.4);
  }
  75% {
    box-shadow: 0 0 45px rgba(139, 92, 246, 0.5), 0 0 80px rgba(196, 181, 253, 0.3);
    background: rgba(139, 92, 246, 0.35);
  }
}

.transcendent-btn.is-playing .qsb-icon {
  animation: crystal-active 4s ease-in-out infinite;
}

@keyframes crystal-active {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.9)); 
  }
  25% { 
    transform: scale(1.1) rotate(5deg); 
    filter: drop-shadow(0 0 12px rgba(139, 92, 246, 1)); 
  }
  50% { 
    transform: scale(1.15) rotate(0deg); 
    filter: drop-shadow(0 0 15px rgba(196, 181, 253, 1)); 
  }
  75% { 
    transform: scale(1.1) rotate(-5deg); 
    filter: drop-shadow(0 0 12px rgba(139, 92, 246, 1)); 
  }
}

.thirdEye-btn.is-playing {
  background: linear-gradient(135deg, 
    rgba(49, 46, 129, 0.35) 0%,
    rgba(79, 70, 229, 0.3) 50%,
    rgba(99, 102, 241, 0.25) 100%
  );
  border-color: rgba(99, 102, 241, 0.85);
  box-shadow: 0 0 40px rgba(79, 70, 229, 0.5), 0 0 70px rgba(129, 140, 248, 0.3);
  animation: thirdEye-vision 4s ease-in-out infinite;
}

@keyframes thirdEye-vision {
  0%, 100% {
    box-shadow: 0 0 40px rgba(79, 70, 229, 0.5), 0 0 70px rgba(129, 140, 248, 0.3);
  }
  25% {
    box-shadow: 0 0 50px rgba(99, 102, 241, 0.6), 0 0 90px rgba(165, 180, 252, 0.35);
  }
  50% {
    box-shadow: 0 0 60px rgba(129, 140, 248, 0.65), 0 0 110px rgba(199, 210, 254, 0.4);
  }
  75% {
    box-shadow: 0 0 50px rgba(99, 102, 241, 0.6), 0 0 90px rgba(165, 180, 252, 0.35);
  }
}

.thirdEye-btn.is-playing .qsb-icon {
  animation: eye-open 3s ease-in-out infinite;
}

@keyframes eye-open {
  0%, 100% { 
    transform: scale(1); 
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 1)); 
  }
  25% { 
    transform: scale(1.1); 
    filter: drop-shadow(0 0 15px rgba(129, 140, 248, 1)); 
  }
  50% { 
    transform: scale(1.2); 
    filter: drop-shadow(0 0 20px rgba(199, 210, 254, 1)); 
  }
  75% { 
    transform: scale(1.1); 
    filter: drop-shadow(0 0 15px rgba(129, 140, 248, 1)); 
  }
}

.theta-btn.is-playing {
  background: rgba(192, 132, 252, 0.15);
  border-color: rgba(192, 132, 252, 0.6);
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.2);
}

.massage-btn.is-playing {
  background: rgba(244, 114, 182, 0.15);
  border-color: rgba(244, 114, 182, 0.6);
  box-shadow: 0 0 20px rgba(244, 114, 182, 0.2);
}

.bodyRestore-btn.is-playing {
  background: rgba(190, 24, 93, 0.3);
  border-color: rgba(219, 39, 119, 0.8);
  box-shadow: 0 0 30px rgba(190, 24, 93, 0.45), 0 0 50px rgba(244, 114, 182, 0.25);
  animation: bodyRestore-heal 5s ease-in-out infinite;
}

@keyframes bodyRestore-heal {
  0%, 100% {
    box-shadow: 0 0 30px rgba(190, 24, 93, 0.45), 0 0 50px rgba(244, 114, 182, 0.25);
  }
  25% {
    box-shadow: 0 0 40px rgba(219, 39, 119, 0.5), 0 0 65px rgba(249, 168, 212, 0.3);
  }
  50% {
    box-shadow: 0 0 50px rgba(244, 114, 182, 0.55), 0 0 80px rgba(251, 207, 232, 0.35);
  }
  75% {
    box-shadow: 0 0 40px rgba(219, 39, 119, 0.5), 0 0 65px rgba(249, 168, 212, 0.3);
  }
}

.bodyRestore-btn.is-playing .qsb-icon {
  animation: heal-active 3s ease-in-out infinite;
}

@keyframes heal-active {
  0%, 100% { 
    transform: scale(1); 
    filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.9)); 
  }
  50% { 
    transform: scale(1.15); 
    filter: drop-shadow(0 0 15px rgba(219, 39, 119, 1)); 
  }
}

.delta-btn.is-playing {
  background: rgba(96, 165, 250, 0.15);
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.2);
}

.deepSleep-btn.is-playing {
  background: rgba(30, 58, 95, 0.3);
  border-color: rgba(99, 102, 241, 0.7);
  box-shadow: 0 0 25px rgba(30, 58, 95, 0.4), 0 0 40px rgba(99, 102, 241, 0.2);
  animation: deepSleep-glow 4s ease-in-out infinite;
}

@keyframes deepSleep-glow {
  0%, 100% {
    box-shadow: 0 0 25px rgba(30, 58, 95, 0.4), 0 0 40px rgba(99, 102, 241, 0.2);
  }
  50% {
    box-shadow: 0 0 35px rgba(30, 58, 95, 0.5), 0 0 60px rgba(99, 102, 241, 0.3);
  }
}

.stress-btn.is-playing {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.6);
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
}

.anxietyRelief-btn.is-playing {
  background: rgba(5, 150, 105, 0.25);
  border-color: rgba(16, 185, 129, 0.7);
  box-shadow: 0 0 25px rgba(5, 150, 105, 0.35), 0 0 40px rgba(52, 211, 153, 0.2);
  animation: anxietyRelief-breathe 6s ease-in-out infinite;
}

@keyframes anxietyRelief-breathe {
  0%, 100% {
    box-shadow: 0 0 25px rgba(5, 150, 105, 0.35), 0 0 40px rgba(52, 211, 153, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 35px rgba(5, 150, 105, 0.45), 0 0 55px rgba(52, 211, 153, 0.3);
    transform: scale(1.01);
  }
}

.lucid-btn.is-playing {
  background: rgba(34, 211, 216, 0.15);
  border-color: rgba(34, 211, 216, 0.6);
  box-shadow: 0 0 20px rgba(34, 211, 216, 0.2);
}

.immersion-btn.is-playing {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.6);
  box-shadow: 0 0 20px rgba(251, 146, 60, 0.2);
}

.heartbeat-btn.is-playing {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
  animation: heartbeat-pulse 1s ease-in-out infinite;
}

@keyframes heartbeat-pulse {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.05); }
  30% { transform: scale(1); }
  45% { transform: scale(1.03); }
}

.breath-btn.is-playing {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.6);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
  animation: breath-wave 4s ease-in-out infinite;
}

.spaceClear-btn.is-playing {
  background: linear-gradient(135deg, 
    rgba(13, 148, 136, 0.25) 0%,
    rgba(20, 184, 166, 0.2) 50%,
    rgba(94, 234, 212, 0.15) 100%
  );
  border-color: rgba(20, 184, 166, 0.8);
  box-shadow: 0 0 35px rgba(13, 148, 136, 0.4), 0 0 60px rgba(94, 234, 212, 0.25);
  animation: spaceClear-cleanse 6s ease-in-out infinite;
}

@keyframes spaceClear-cleanse {
  0%, 100% {
    box-shadow: 0 0 35px rgba(13, 148, 136, 0.4), 0 0 60px rgba(94, 234, 212, 0.25);
    background: linear-gradient(135deg, 
      rgba(13, 148, 136, 0.25) 0%,
      rgba(20, 184, 166, 0.2) 50%,
      rgba(94, 234, 212, 0.15) 100%
    );
  }
  33% {
    box-shadow: 0 0 50px rgba(20, 184, 166, 0.5), 0 0 80px rgba(45, 212, 191, 0.3);
    background: linear-gradient(135deg, 
      rgba(20, 184, 166, 0.3) 0%,
      rgba(45, 212, 191, 0.25) 50%,
      rgba(94, 234, 212, 0.2) 100%
    );
  }
  66% {
    box-shadow: 0 0 60px rgba(45, 212, 191, 0.55), 0 0 100px rgba(153, 246, 228, 0.35);
    background: linear-gradient(135deg, 
      rgba(45, 212, 191, 0.35) 0%,
      rgba(94, 234, 212, 0.28) 50%,
      rgba(153, 246, 228, 0.2) 100%
    );
  }
}

.spaceClear-btn.is-playing .qsb-icon {
  animation: sparkle-active 2s ease-in-out infinite;
}

@keyframes sparkle-active {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    filter: drop-shadow(0 0 10px rgba(94, 234, 212, 1)); 
  }
  25% { 
    transform: scale(1.15) rotate(15deg); 
    filter: drop-shadow(0 0 15px rgba(45, 212, 191, 1)); 
  }
  50% { 
    transform: scale(1.2) rotate(0deg); 
    filter: drop-shadow(0 0 20px rgba(153, 246, 228, 1)); 
  }
  75% { 
    transform: scale(1.15) rotate(-15deg); 
    filter: drop-shadow(0 0 15px rgba(45, 212, 191, 1)); 
  }
}

.quantum-btn.is-playing {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.2) 0%,
    rgba(236, 72, 153, 0.15) 50%,
    rgba(34, 211, 238, 0.15) 100%
  );
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
  animation: quantum-pulse 2s ease-in-out infinite;
}

@keyframes quantum-pulse {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.6);
  }
  33% { 
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
    border-color: rgba(236, 72, 153, 0.6);
  }
  66% { 
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
    border-color: rgba(34, 211, 238, 0.6);
  }
}

@keyframes breath-wave {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.9; }
}

/* Quick Start Display Panel (shown when playing) */
.quick-start-display {
  margin-top: 12px;
  padding: 16px 24px;
  background: linear-gradient(135deg, 
    rgba(147, 112, 219, 0.08) 0%,
    rgba(64, 224, 208, 0.05) 50%,
    rgba(255, 105, 180, 0.06) 100%
  );
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.quick-start-display[hidden] {
  display: none;
}

.qs-info-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.qs-current-name {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b 0%, #34d399 50%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.qs-timer {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}

.qs-timer .timer-elapsed {
  font-size: 1.1rem;
  font-weight: 600;
  color: #34d399;
}

.qs-timer .timer-separator {
  color: var(--muted);
}

.qs-timer .timer-total {
  font-size: 0.9rem;
  color: var(--muted);
}

.qs-progress-container {
  margin-bottom: 12px;
}

.qs-progress-track {
  position: relative;
  height: 6px;
  background: rgba(147, 112, 219, 0.15);
  border-radius: 3px;
  overflow: visible;
}

.qs-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f59e0b, #34d399, #818cf8);
  border-radius: 3px;
  transition: width 0.3s ease;
  position: relative;
  z-index: 1;
}

.qs-phase-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.qs-phase-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: rgba(147, 112, 219, 0.6);
  border-radius: 1px;
  transform: translateX(-50%);
}

body[data-theme="dark"] .qs-phase-marker {
  background: rgba(147, 112, 219, 0.8);
}

.qs-phase-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qs-status-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
  flex: 1;
}

.qs-status-wave {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(147, 112, 219, 0.15), rgba(64, 224, 208, 0.1));
  color: var(--muted);
  border: 1px solid rgba(147, 112, 219, 0.2);
}

.qs-stop-btn {
  margin-left: auto;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #dc2626;
  background: transparent;
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 0 0 auto;
  width: auto;
}

.qs-stop-btn:hover {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

/* Mobile Responsiveness - Experiences Section */
@media (max-width: 640px) {
  .experiences-section {
    margin: 16px 0;
    border-radius: 16px;
  }
  
  .experiences-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .experiences-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .experience-tab {
    padding: 12px 10px;
    min-width: 100px;
    flex: 1;
  }
  
  .tab-label {
    font-size: 11px;
  }
  
  .tab-icon {
    font-size: 14px;
  }
  
  .experience-panel {
    padding: 12px;
  }
  
  .quick-start-buttons {
    gap: 5px;
  }
  
  .quick-start-btn {
    padding: 5px 8px;
    height: 32px;
  }
  
  .qsb-icon {
    font-size: 12px;
  }
  
  .qsb-label {
    font-size: 11px;
  }
  
  .quick-start-display {
    margin-top: 10px;
    padding: 12px;
  }
  
  .qs-current-name {
    font-size: 0.9rem;
  }
  
  .qs-timer .timer-elapsed {
    font-size: 1rem;
  }
  
  .qs-phase-info {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .qs-status-label {
    font-size: 0.75rem;
  }
}

/* Demo Overlay */
.demo-overlay {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.demo-overlay[hidden] {
  display: none;
}

.demo-label-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.demo-label {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #374151;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 250, 252, 0.9) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 12px 28px;
  border-radius: 30px;
  border: 2px solid rgba(147, 112, 219, 0.3);
  box-shadow: 
    0 8px 32px rgba(147, 112, 219, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
  animation: demo-label-fade-in 0.5s ease-out;
  text-align: center;
  min-width: 200px;
}

@keyframes demo-label-fade-in {
  from { 
    opacity: 0; 
    transform: translateY(-10px) scale(0.95);
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1);
  }
}

.demo-label.transitioning {
  animation: demo-label-transition 0.4s ease-out;
}

@keyframes demo-label-transition {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

body[data-theme="dark"] .demo-label {
  color: #e7e9ee;
  background: linear-gradient(135deg, 
    rgba(15, 18, 32, 0.95) 0%,
    rgba(30, 27, 75, 0.9) 100%
  );
  border-color: rgba(147, 112, 219, 0.5);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(147, 112, 219, 0.25),
    inset 0 1px 2px rgba(147, 112, 219, 0.2);
}

/* Demo progress dots */
.demo-progress-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.demo-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(147, 112, 219, 0.3);
  transition: all 0.3s ease;
}

.demo-progress-dot.active {
  background: linear-gradient(135deg, #9370db, #40e0d0);
  box-shadow: 0 0 10px rgba(147, 112, 219, 0.5);
  transform: scale(1.3);
}

.demo-progress-dot.completed {
  background: rgba(64, 224, 208, 0.6);
}

body[data-theme="dark"] .demo-progress-dot {
  background: rgba(147, 112, 219, 0.4);
}

body[data-theme="dark"] .demo-progress-dot.active {
  background: linear-gradient(135deg, #9370db, #40e0d0);
  box-shadow: 0 0 15px rgba(147, 112, 219, 0.6);
}

body[data-theme="dark"] .demo-progress-dot.completed {
  background: rgba(64, 224, 208, 0.7);
}

/* 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, .tutorial-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 15px;
  }
  
  .demo-btn-header {
    height: 32px;
    padding: 0 10px;
    font-size: 11px;
  }
  
  .demo-btn-header .demo-btn-icon {
    font-size: 11px;
  }
  
  .demo-btn-header.is-running {
    width: 32px;
    height: 32px;
    padding: 0;
  }
  
  .demo-btn-header.is-running .demo-btn-icon {
    font-size: 15px;
  }
  
  .demo-label {
    font-size: 1.1rem;
    padding: 8px 20px;
    min-width: 160px;
  }
  
  .page-header-actions {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .donate-text {
    display: none;
  }
  
  .donate-btn {
    padding: 6px 8px;
    border-radius: 10px;
  }
  
  .qs-categories {
    gap: 2px;
    padding: 3px 4px;
  }
  
  button.qs-category-pill {
    padding: 4px 6px;
    font-size: 9px;
    gap: 3px;
  }
  
  button.qs-category-pill .pill-icon {
    font-size: 9px;
  }
  
  button.qs-category-pill .pill-label {
    display: none; /* Icon only on mobile */
  }
  
  .quick-start-buttons {
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .quick-start-btn {
    padding: 4px 6px;
    height: 26px;
  }
  
  .qsb-icon {
    font-size: 10px;
  }
  
  .qsb-label {
    font-size: 9px;
  }
}

@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: 8px;
}

.presets-section:last-of-type {
  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 option {
  background: var(--control-bg);
  color: var(--control-fg);
}

body[data-theme="dark"] .presets-section select option {
  background: #111827;
  color: #e7e9ee;
}

.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;
}

/* ===== MUSIC SCHOOL SECTION (Compact Dropdown) ===== */
.music-school-section {
  margin: 8px auto;
  padding: 0;
  background: transparent;
  border: none;
}

.school-header-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  margin: 0 auto;
  width: fit-content;
  max-width: 420px;
}

.school-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #9370db 0%, #40e0d0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.concept-dropdown {
  padding: 5px 28px 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--control-bg);
  color: var(--control-fg);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239370db' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  min-width: 130px;
  transition: all 0.2s ease;
}

.concept-dropdown:hover {
  border-color: rgba(147, 112, 219, 0.5);
  box-shadow: 0 2px 8px rgba(147, 112, 219, 0.15);
}

.concept-dropdown:focus {
  outline: 2px solid rgba(147, 112, 219, 0.5);
  outline-offset: 1px;
  border-color: rgba(147, 112, 219, 0.6);
}

body[data-theme="dark"] .concept-dropdown {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b4a0e8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Music Theory Demo Button */
/* Music Theory Demo Button - matches dropdown styling */
.theory-demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px 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;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: auto;
  width: auto;
}

.theory-demo-btn .demo-icon {
  font-size: 11px;
  line-height: 1;
}

.theory-demo-btn .demo-text {
  line-height: 1;
}

.theory-demo-btn:hover {
  border-color: rgba(147, 112, 219, 0.5);
  box-shadow: 0 2px 8px rgba(147, 112, 219, 0.15);
  background: rgba(147, 112, 219, 0.1);
}

.theory-demo-btn.is-running {
  background: linear-gradient(135deg, rgba(147, 112, 219, 0.25) 0%, rgba(64, 224, 208, 0.15) 100%);
  border-color: rgba(147, 112, 219, 0.5);
}

/* Music Theory Demo Overlay */
.theory-demo-overlay {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 10px;
  pointer-events: none;
}

.theory-demo-overlay[hidden] {
  display: none !important;
}

.theory-demo-label {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--fg);
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 18px;
  border-radius: 16px;
  border: 1px solid rgba(147, 112, 219, 0.3);
  box-shadow: 
    0 4px 16px rgba(147, 112, 219, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  white-space: nowrap;
  animation: theory-label-fade-in 0.3s ease;
}

@keyframes theory-label-fade-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 400px) {
  .school-header-compact {
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
  }
  
  .concept-dropdown {
    width: 100%;
  }
  
  .theory-demo-label {
    font-size: 0.85rem;
    padding: 6px 14px;
  }
}

/* Concept Explanation - Visible & Centered */
.concept-explanation {
  display: none;
  margin: 10px auto 0;
  max-width: 650px;
}

.concept-explanation.active {
  display: block;
}

.explanation-content {
  background: var(--panel-bg);
  border: 1px solid rgba(147, 112, 219, 0.4);
  border-radius: 12px;
  padding: 12px 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  animation: explanation-fade-in 0.2s ease;
}

@keyframes explanation-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.explanation-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(147, 112, 219, 0.2);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.explanation-close:hover {
  background: rgba(255, 105, 180, 0.3);
  color: var(--fg);
}

.explanation-visual { flex-shrink: 0; }
.explanation-visual svg { width: 60px; height: 28px; }

.explanation-body { flex: 1; min-width: 0; }

.explanation-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #9370db;
}

.explanation-text {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg);
}

.explanation-demo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.demo-btn {
  padding: 8px 14px;
  background: linear-gradient(135deg, #9370db, #40e0d0);
  border: none;
  border-radius: 14px;
  color: white;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.demo-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 10px rgba(147, 112, 219, 0.4);
}

.demo-btn.playing {
  background: linear-gradient(135deg, #ff69b4, #9370db);
}

/* Responsive */
@media (max-width: 600px) {
  .explanation-content {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 12px;
  }
  
  .explanation-body {
    width: 100%;
    order: 1;
  }
  
  .explanation-visual { order: 0; }
  .explanation-visual svg { width: 70px; height: 32px; }
  .explanation-demo { order: 2; margin-top: 4px; }
  
  .explanation-title { font-size: 13px; }
  .explanation-text { font-size: 11px; }
}

/* Keyboard reference */
.keyboard-section {
  margin: 12px 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%;
  z-index: 2;
}

.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);
}

/* Music School Demo Key Highlight - NO transform to avoid layout breaks */
.piano-key.school-demo-active {
  z-index: 5;
}

.white-key.school-demo-active {
  background: linear-gradient(180deg, 
    #d4c4f8 0%, 
    #b090e8 50%,
    #9370db 100%
  ) !important;
  box-shadow: 
    0 0 15px rgba(147, 112, 219, 0.9),
    0 0 30px rgba(147, 112, 219, 0.5) !important;
}

.black-key.school-demo-active {
  background: linear-gradient(180deg, 
    #a080e0 0%, 
    #8060c0 60%,
    #6040a0 100%
  ) !important;
  box-shadow: 
    0 0 12px rgba(147, 112, 219, 0.9),
    0 0 25px rgba(147, 112, 219, 0.6) !important;
}

/* Frequency Demo - Fill spans full key width instead of half */
.piano-key.school-demo-filling::before {
  width: 100% !important;
  border-right: none !important;
  border-left: none !important;
  border-radius: 0 0 4px 4px !important;
  opacity: 1 !important;
}

/* White keys stay below black keys even when filling */
.white-key.school-demo-filling {
  z-index: 1;
  box-shadow: 
    0 0 15px var(--left-highlight, rgba(147, 112, 219, 0.9)),
    0 0 25px var(--left-highlight, rgba(147, 112, 219, 0.5)) !important;
}

.black-key.school-demo-filling::before {
  border-radius: 0 0 3px 3px !important;
}

/* Black keys always stay on top */
.black-key.school-demo-filling {
  z-index: 10;
  box-shadow: 
    0 0 12px var(--left-highlight, rgba(147, 112, 219, 0.9)),
    0 0 20px var(--left-highlight, rgba(147, 112, 219, 0.6)) !important;
}

.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: 140px;
  }
  
  .piano-keyboard-wrapper {
    gap: 10px;
  }
  
  .key-label {
    font-size: 8px;
    margin-bottom: 4px;
  }
}

@media (max-width: 480px) {
  .piano-keyboard-inner {
    height: 100px;
  }
  
  .piano-keyboard {
    padding: 8px 4px;
    border-radius: 10px;
  }
  
  .key-label {
    font-size: 7px;
    margin-bottom: 3px;
  }
  
  .white-key {
    border-bottom-width: 3px;
  }
  
  .black-key {
    border-radius: 0 0 4px 4px;
  }
}

@media (max-width: 380px) {
  .piano-keyboard-inner {
    height: 80px;
  }
  
  .key-label {
    font-size: 6px;
    margin-bottom: 2px;
  }
}

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

.footer-branding {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.footer-branding a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--fg);
  transition: opacity 0.3s ease;
}

.footer-branding a:hover {
  opacity: 0.7;
}

.footer-logo {
  height: 32px;
  width: auto;
  display: block;
}

/* 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;
  flex-wrap: wrap;
}

.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;
  flex-shrink: 0;
}

.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 */
}

/* Overtones Demo Button - matches .harmonic-filter-toggle style */
.overtones-demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 2px solid rgba(147, 112, 219, 0.4);
  background: linear-gradient(135deg, 
    rgba(147, 112, 219, 0.12) 0%,
    rgba(64, 224, 208, 0.08) 100%
  );
  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;
  flex-shrink: 0;
}

.overtones-demo-btn:hover {
  background: linear-gradient(135deg, 
    rgba(147, 112, 219, 0.25) 0%,
    rgba(64, 224, 208, 0.15) 100%
  );
  border-color: rgba(147, 112, 219, 0.6);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(147, 112, 219, 0.2);
}

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

.overtones-demo-btn .demo-icon {
  font-size: 11px;
  line-height: 1;
}

.overtones-demo-btn .demo-text {
  line-height: 1;
  white-space: nowrap;
}

.overtones-demo-btn.is-running {
  background: linear-gradient(135deg, 
    rgba(255, 105, 180, 0.25) 0%,
    rgba(147, 112, 219, 0.2) 100%
  );
  border-color: rgba(255, 105, 180, 0.6);
  box-shadow: 
    0 0 0 2px rgba(255, 105, 180, 0.2),
    0 4px 12px rgba(255, 105, 180, 0.3);
}

.overtones-demo-btn.is-running .demo-icon {
  animation: sparkle-spin 1s linear infinite;
}

.overtones-demo-btn.is-running .demo-text {
  display: none;
}

.overtones-demo-btn.is-running::after {
  content: 'STOP';
  line-height: 1;
  white-space: nowrap;
}

body[data-theme="dark"] .overtones-demo-btn {
  border-color: rgba(147, 112, 219, 0.5);
}

body[data-theme="dark"] .overtones-demo-btn:hover {
  box-shadow: 0 4px 12px rgba(147, 112, 219, 0.3);
}

body[data-theme="dark"] .overtones-demo-btn.is-running {
  border-color: rgba(255, 105, 180, 0.7);
  box-shadow: 
    0 0 0 2px rgba(255, 105, 180, 0.3),
    0 4px 12px rgba(255, 105, 180, 0.4);
}

/* Overtones Demo Overlay */
.overtones-demo-overlay {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 12px;
  pointer-events: none;
}

.overtones-demo-overlay[hidden] {
  display: none !important;
}

.overtones-demo-label {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--fg);
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 20px;
  border-radius: 20px;
  border: 1px solid rgba(147, 112, 219, 0.3);
  box-shadow: 
    0 4px 20px rgba(147, 112, 219, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  white-space: nowrap;
  animation: overtones-label-appear 0.4s ease-out;
}

@keyframes overtones-label-appear {
  from { 
    opacity: 0; 
    transform: translateY(-8px) scale(0.95);
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1);
  }
}

.overtones-demo-label.transitioning {
  animation: overtones-label-transition 0.3s ease-out;
}

@keyframes overtones-label-transition {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.97); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

body[data-theme="dark"] .overtones-demo-label {
  border-color: rgba(147, 112, 219, 0.4);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(147, 112, 219, 0.15);
}

/* Overtone card demo highlight states */
.overtone-card.demo-current {
  border-color: rgba(255, 105, 180, 0.8) !important;
  transform: scale(1.03);
  box-shadow: 
    0 0 0 3px rgba(255, 105, 180, 0.3),
    0 8px 24px rgba(255, 105, 180, 0.25) !important;
  z-index: 5;
}

.overtone-card.demo-current::before {
  opacity: 1;
  height: 6px;
  background: linear-gradient(90deg, 
    rgba(255, 105, 180, 0.8),
    rgba(147, 112, 219, 0.8)
  ) !important;
}

.overtone-card.demo-active {
  border-color: rgba(147, 112, 219, 0.6);
  box-shadow: 
    0 0 0 2px rgba(147, 112, 219, 0.2),
    0 4px 12px rgba(147, 112, 219, 0.15);
}

.overtone-card.demo-active::before {
  opacity: 0.9;
}

.overtone-card.demo-fading {
  opacity: 0.5;
  transform: scale(0.98);
  transition: all 0.5s ease;
}

body[data-theme="dark"] .overtone-card.demo-current {
  box-shadow: 
    0 0 0 3px rgba(255, 105, 180, 0.4),
    0 8px 24px rgba(255, 105, 180, 0.35),
    0 0 30px rgba(147, 112, 219, 0.2) !important;
}

body[data-theme="dark"] .overtone-card.demo-active {
  box-shadow: 
    0 0 0 2px rgba(147, 112, 219, 0.3),
    0 4px 16px rgba(147, 112, 219, 0.25);
}

/* Make overtones section position relative for overlay */
.overtones-section {
  position: relative;
}

.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;
  flex-shrink: 0;
}

.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-demo-btn {
    padding: 4px 8px;
    font-size: 9px;
    height: 24px;
  }
  
  .overtones-demo-btn .demo-icon {
    font-size: 10px;
  }
  
  .overtones-demo-label {
    font-size: 0.85rem;
    padding: 8px 14px;
  }
  
  .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;
  }
}

/* ===== GUIDED JOURNEYS (Inside Tab Panel) ===== */
/* Legacy section styles kept for compatibility */
.programs-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.programs-section.collapsed {
  padding: 0;
}

.programs-section::before {
  display: none;
}

/* Hide toggle button in new tabbed layout */
.programs-toggle {
  display: none;
}

/* Programs Content - now shown directly in panel */
.programs-content {
  padding: 0;
}

.programs-content[hidden] {
  display: none;
}

.programs-header {
  text-align: center;
  margin-bottom: 20px;
}

.programs-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

.programs-icon {
  font-size: 28px;
  animation: gentle-float 3s ease-in-out infinite;
}

@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.programs-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, #9370db 0%, #40e0d0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
}

.programs-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.programs-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.program-select-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

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

#programSelect {
  padding: 10px 40px 10px 16px;
  border-radius: 12px;
  border: 2px solid var(--panel-border);
  background: var(--control-bg);
  color: var(--control-fg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239370db' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  min-width: 280px;
  transition: all 0.2s ease;
}

#programSelect:hover {
  border-color: rgba(147, 112, 219, 0.5);
  box-shadow: 0 4px 12px rgba(147, 112, 219, 0.15);
}

#programSelect:focus {
  outline: 2px solid rgba(147, 112, 219, 0.5);
  outline-offset: 2px;
  border-color: rgba(147, 112, 219, 0.6);
}

.program-actions {
  display: flex;
  gap: 10px;
}

.program-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
  min-width: 130px;
  justify-content: center;
}

.program-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.start-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.start-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}

.start-btn:not(:disabled):active {
  transform: translateY(0);
}

.start-btn.is-playing {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.start-btn.is-playing .btn-icon::before {
  content: '⏸';
}

.stop-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.stop-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
}

.btn-icon {
  font-size: 16px;
}

/* Program Display Panel */
.program-display {
  --freq-pulse-duration: 8s;
  --freq-intensity: 0.5;
  --nebula-drift: 0deg;
  position: relative;
  background: transparent;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(147, 112, 219, 0.15);
  animation: fade-in 0.3s ease;
}

/* ===== GALAXY / UNIVERSE VISUAL EFFECTS ===== */

/* Galaxy background container - handles clipping */
.program-display .freq-galaxy-bg {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  z-index: -2;
  background: linear-gradient(135deg, 
    rgba(10, 10, 25, 0.97) 0%,
    rgba(20, 15, 40, 0.95) 50%,
    rgba(10, 20, 35, 0.97) 100%
  );
}

body[data-theme="dark"] .program-display .freq-galaxy-bg {
  background: linear-gradient(135deg, 
    rgba(5, 5, 15, 0.98) 0%,
    rgba(15, 10, 30, 0.96) 50%,
    rgba(5, 15, 25, 0.98) 100%
  );
}

/* Primary animated nebula layer */
.program-display .freq-galaxy-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    /* Primary flowing nebula */
    radial-gradient(ellipse 35% 40% at 30% 40%, 
      rgba(110, 65, 180, calc(0.25 * var(--freq-intensity))) 0%, 
      transparent 55%),
    /* Secondary nebula cloud */
    radial-gradient(ellipse 40% 35% at 70% 55%, 
      rgba(50, 130, 160, calc(0.22 * var(--freq-intensity))) 0%, 
      transparent 50%),
    /* Accent nebula */
    radial-gradient(ellipse 30% 35% at 45% 75%, 
      rgba(140, 55, 110, calc(0.18 * var(--freq-intensity))) 0%, 
      transparent 45%),
    /* Deep space dust band */
    radial-gradient(ellipse 50% 25% at 25% 65%, 
      rgba(70, 100, 150, calc(0.15 * var(--freq-intensity))) 0%, 
      transparent 60%),
    /* Distant galaxy glow */
    radial-gradient(ellipse 25% 30% at 75% 30%, 
      rgba(100, 75, 145, calc(0.15 * var(--freq-intensity))) 0%, 
      transparent 50%);
  animation: nebula-flow 45s ease-in-out infinite;
  pointer-events: none;
}

@keyframes nebula-flow {
  0% { 
    transform: translate(0%, 0%) rotate(0deg);
    filter: hue-rotate(0deg) blur(0px);
  }
  25% { 
    transform: translate(8%, -5%) rotate(3deg);
    filter: hue-rotate(12deg) blur(0px);
  }
  50% { 
    transform: translate(0%, -8%) rotate(0deg);
    filter: hue-rotate(25deg) blur(0px);
  }
  75% { 
    transform: translate(-8%, -3%) rotate(-3deg);
    filter: hue-rotate(12deg) blur(0px);
  }
  100% { 
    transform: translate(0%, 0%) rotate(0deg);
    filter: hue-rotate(0deg) blur(0px);
  }
}

/* Secondary animated nebula layer - different timing */
.program-display .freq-galaxy-bg::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: 
    radial-gradient(ellipse 45% 50% at 60% 35%, 
      rgba(85, 50, 140, calc(0.18 * var(--freq-intensity))) 0%, 
      transparent 50%),
    radial-gradient(ellipse 40% 45% at 25% 70%, 
      rgba(40, 105, 135, calc(0.15 * var(--freq-intensity))) 0%, 
      transparent 45%),
    radial-gradient(ellipse 30% 35% at 75% 75%, 
      rgba(120, 50, 100, calc(0.12 * var(--freq-intensity))) 0%, 
      transparent 45%);
  animation: nebula-flow-alt 60s ease-in-out infinite;
  pointer-events: none;
  filter: blur(8px);
}

@keyframes nebula-flow-alt {
  0% { 
    transform: translate(0%, 0%) rotate(0deg) scale(1);
    filter: blur(8px) hue-rotate(0deg);
  }
  33% { 
    transform: translate(-10%, 6%) rotate(-5deg) scale(1.08);
    filter: blur(12px) hue-rotate(15deg);
  }
  66% { 
    transform: translate(8%, 10%) rotate(4deg) scale(1.05);
    filter: blur(6px) hue-rotate(8deg);
  }
  100% { 
    transform: translate(0%, 0%) rotate(0deg) scale(1);
    filter: blur(8px) hue-rotate(0deg);
  }
}

/* Third animated nebula layer for depth */
.program-display .freq-nebula-bg {
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: 
    radial-gradient(ellipse 50% 55% at 55% 30%, 
      rgba(100, 60, 160, calc(0.2 * var(--freq-intensity))) 0%, 
      transparent 50%),
    radial-gradient(ellipse 45% 50% at 30% 65%, 
      rgba(50, 120, 150, calc(0.16 * var(--freq-intensity))) 0%, 
      transparent 45%),
    radial-gradient(ellipse 35% 40% at 70% 70%, 
      rgba(130, 55, 100, calc(0.14 * var(--freq-intensity))) 0%, 
      transparent 45%);
  animation: nebula-flow-third 75s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  filter: blur(15px);
}

@keyframes nebula-flow-third {
  0% { 
    transform: translate(0%, 0%) rotate(0deg);
    opacity: 0.7;
  }
  25% { 
    transform: translate(12%, -8%) rotate(6deg);
    opacity: 0.9;
  }
  50% { 
    transform: translate(-5%, -12%) rotate(-3deg);
    opacity: 0.8;
  }
  75% { 
    transform: translate(-10%, 5%) rotate(4deg);
    opacity: 0.85;
  }
  100% { 
    transform: translate(0%, 0%) rotate(0deg);
    opacity: 0.7;
  }
}

/* Subtle outer glow */
.program-display::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  background: linear-gradient(
    135deg,
    rgba(100, 80, 160, 0.2) 0%,
    rgba(60, 120, 140, 0.15) 50%,
    rgba(100, 80, 160, 0.2) 100%
  );
  z-index: -2;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 1s ease;
}

.programs-section.is-running .program-display::after {
  opacity: calc(0.4 * var(--freq-intensity));
}

/* Distant stars - drifting with gentle twinkle */
.freq-galaxy-bg .freq-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.freq-galaxy-bg .freq-star:nth-child(4) { top: 8%; left: 12%; animation: star-drift-1 40s linear infinite, star-twinkle 4s ease-in-out infinite 0s; }
.freq-galaxy-bg .freq-star:nth-child(5) { top: 15%; left: 78%; animation: star-drift-2 55s linear infinite, star-twinkle 5s ease-in-out infinite 1.2s; }
.freq-galaxy-bg .freq-star:nth-child(6) { top: 22%; left: 45%; animation: star-drift-3 48s linear infinite, star-twinkle 6s ease-in-out infinite 0.5s; }
.freq-galaxy-bg .freq-star:nth-child(7) { top: 35%; left: 8%; animation: star-drift-4 52s linear infinite, star-twinkle 4.5s ease-in-out infinite 2.1s; }
.freq-galaxy-bg .freq-star:nth-child(8) { top: 42%; left: 88%; animation: star-drift-1 45s linear infinite 5s, star-twinkle 5.5s ease-in-out infinite 0.8s; }
.freq-galaxy-bg .freq-star:nth-child(9) { top: 55%; left: 25%; animation: star-drift-2 60s linear infinite 8s, star-twinkle 7s ease-in-out infinite 1.5s; }
.freq-galaxy-bg .freq-star:nth-child(10) { top: 65%; left: 68%; animation: star-drift-3 42s linear infinite 3s, star-twinkle 4.2s ease-in-out infinite 3.2s; }
.freq-galaxy-bg .freq-star:nth-child(11) { top: 75%; left: 55%; animation: star-drift-4 50s linear infinite 12s, star-twinkle 6.5s ease-in-out infinite 0.3s; }
.freq-galaxy-bg .freq-star:nth-child(12) { top: 82%; left: 15%; animation: star-drift-1 58s linear infinite 7s, star-twinkle 5.8s ease-in-out infinite 2.5s; }
.freq-galaxy-bg .freq-star:nth-child(13) { top: 88%; left: 85%; animation: star-drift-2 47s linear infinite 2s, star-twinkle 4.8s ease-in-out infinite 1.8s; }
.freq-galaxy-bg .freq-star:nth-child(14) { top: 12%; left: 35%; animation: star-drift-3 53s linear infinite 10s, star-twinkle 6.2s ease-in-out infinite 0.7s; }
.freq-galaxy-bg .freq-star:nth-child(15) { top: 48%; left: 52%; animation: star-drift-4 44s linear infinite 4s, star-twinkle 5.2s ease-in-out infinite 2.8s; }

/* Different drift patterns for variety */
@keyframes star-drift-1 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(15px, 8px); }
  50% { transform: translate(25px, 0); }
  75% { transform: translate(12px, -6px); }
  100% { transform: translate(0, 0); }
}

@keyframes star-drift-2 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-10px, 12px); }
  50% { transform: translate(-20px, 5px); }
  75% { transform: translate(-8px, -5px); }
  100% { transform: translate(0, 0); }
}

@keyframes star-drift-3 {
  0% { transform: translate(0, 0); }
  33% { transform: translate(18px, -10px); }
  66% { transform: translate(-5px, -15px); }
  100% { transform: translate(0, 0); }
}

@keyframes star-drift-4 {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-12px, 15px); }
  66% { transform: translate(8px, 20px); }
  100% { transform: translate(0, 0); }
}

@keyframes star-twinkle {
  0%, 100% { 
    opacity: 0.3;
  }
  50% { 
    opacity: calc(0.6 + 0.3 * var(--freq-intensity));
  }
}

/* Larger accent stars with soft glow and drift */
.freq-galaxy-bg .freq-star-accent {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

.freq-galaxy-bg .freq-star-accent:nth-child(16) { 
  top: 18%; left: 22%; 
  background: rgba(180, 160, 255, 0.9);
  animation: star-glow 8s ease-in-out infinite 0s, star-orbit-1 70s linear infinite; 
}
.freq-galaxy-bg .freq-star-accent:nth-child(17) { 
  top: 45%; left: 78%; 
  background: rgba(150, 200, 220, 0.9);
  animation: star-glow 10s ease-in-out infinite 2s, star-orbit-2 85s linear infinite; 
}
.freq-galaxy-bg .freq-star-accent:nth-child(18) { 
  top: 72%; left: 38%; 
  background: rgba(200, 150, 180, 0.9);
  animation: star-glow 9s ease-in-out infinite 4s, star-orbit-3 75s linear infinite; 
}

@keyframes star-glow {
  0%, 100% { 
    opacity: 0.4;
    box-shadow: 0 0 4px currentColor;
  }
  50% { 
    opacity: calc(0.7 + 0.2 * var(--freq-intensity));
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
  }
}

@keyframes star-orbit-1 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(30px, -15px); }
  50% { transform: translate(50px, 5px); }
  75% { transform: translate(20px, 20px); }
  100% { transform: translate(0, 0); }
}

@keyframes star-orbit-2 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-25px, 20px); }
  50% { transform: translate(-40px, -10px); }
  75% { transform: translate(-15px, -25px); }
  100% { transform: translate(0, 0); }
}

@keyframes star-orbit-3 {
  0% { transform: translate(0, 0); }
  33% { transform: translate(35px, 25px); }
  66% { transform: translate(-20px, 30px); }
  100% { transform: translate(0, 0); }
}

/* Flowing nebula wisps - dynamic cosmic clouds */
.freq-galaxy-bg .freq-nebula {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(20px);
}

.freq-galaxy-bg .freq-nebula:nth-child(1) {
  width: 180px;
  height: 140px;
  top: 5%;
  left: 5%;
  background: radial-gradient(ellipse, 
    rgba(120, 75, 180, calc(0.25 * var(--freq-intensity))) 0%, 
    rgba(90, 55, 150, calc(0.12 * var(--freq-intensity))) 40%,
    transparent 70%);
  animation: nebula-swirl-1 35s ease-in-out infinite;
}

.freq-galaxy-bg .freq-nebula:nth-child(2) {
  width: 160px;
  height: 200px;
  bottom: 5%;
  right: 5%;
  background: radial-gradient(ellipse, 
    rgba(55, 140, 170, calc(0.22 * var(--freq-intensity))) 0%, 
    rgba(45, 110, 140, calc(0.1 * var(--freq-intensity))) 45%,
    transparent 70%);
  animation: nebula-swirl-2 42s ease-in-out infinite;
}

.freq-galaxy-bg .freq-nebula:nth-child(3) {
  width: 200px;
  height: 160px;
  top: 35%;
  left: 30%;
  background: radial-gradient(ellipse, 
    rgba(140, 65, 130, calc(0.2 * var(--freq-intensity))) 0%, 
    rgba(110, 45, 100, calc(0.08 * var(--freq-intensity))) 50%,
    transparent 70%);
  animation: nebula-swirl-3 50s ease-in-out infinite;
}

@keyframes nebula-swirl-1 {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 0.7;
  }
  25% { 
    transform: translate(40px, 30px) rotate(15deg) scale(1.1); 
    opacity: 0.9;
  }
  50% { 
    transform: translate(60px, 10px) rotate(25deg) scale(1.15); 
    opacity: 0.8;
  }
  75% { 
    transform: translate(25px, -20px) rotate(10deg) scale(1.05); 
    opacity: 0.85;
  }
  100% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 0.7;
  }
}

@keyframes nebula-swirl-2 {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 0.6;
  }
  25% { 
    transform: translate(-35px, -25px) rotate(-12deg) scale(1.08); 
    opacity: 0.85;
  }
  50% { 
    transform: translate(-50px, 15px) rotate(-20deg) scale(1.12); 
    opacity: 0.75;
  }
  75% { 
    transform: translate(-20px, 35px) rotate(-8deg) scale(1.05); 
    opacity: 0.9;
  }
  100% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 0.6;
  }
}

@keyframes nebula-swirl-3 {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 0.5;
    filter: blur(25px) hue-rotate(0deg);
  }
  33% { 
    transform: translate(50px, -40px) rotate(20deg) scale(1.2); 
    opacity: 0.8;
    filter: blur(30px) hue-rotate(15deg);
  }
  66% { 
    transform: translate(-30px, -60px) rotate(-15deg) scale(1.1); 
    opacity: 0.65;
    filter: blur(20px) hue-rotate(-10deg);
  }
  100% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 0.5;
    filter: blur(25px) hue-rotate(0deg);
  }
}

/* Cosmic dust particles - floating through space */
.freq-galaxy-bg .freq-dust {
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.freq-galaxy-bg .freq-dust:nth-child(19) { top: 20%; left: 60%; animation: dust-float-1 20s ease-in-out infinite 0s; }
.freq-galaxy-bg .freq-dust:nth-child(20) { top: 40%; left: 30%; animation: dust-float-2 25s ease-in-out infinite 3s; }
.freq-galaxy-bg .freq-dust:nth-child(21) { top: 60%; left: 70%; animation: dust-float-3 22s ease-in-out infinite 7s; }
.freq-galaxy-bg .freq-dust:nth-child(22) { top: 30%; left: 50%; animation: dust-float-1 28s ease-in-out infinite 5s; }
.freq-galaxy-bg .freq-dust:nth-child(23) { top: 70%; left: 20%; animation: dust-float-2 24s ease-in-out infinite 10s; }
.freq-galaxy-bg .freq-dust:nth-child(24) { top: 50%; left: 80%; animation: dust-float-3 26s ease-in-out infinite 2s; }

@keyframes dust-float-1 {
  0% { 
    transform: translate(0, 0); 
    opacity: 0;
  }
  10% { opacity: calc(0.4 * var(--freq-intensity)); }
  50% { 
    transform: translate(-50px, 30px); 
    opacity: calc(0.5 * var(--freq-intensity));
  }
  90% { opacity: calc(0.4 * var(--freq-intensity)); }
  100% { 
    transform: translate(-80px, 50px); 
    opacity: 0;
  }
}

@keyframes dust-float-2 {
  0% { 
    transform: translate(0, 0); 
    opacity: 0;
  }
  10% { opacity: calc(0.35 * var(--freq-intensity)); }
  50% { 
    transform: translate(40px, -25px); 
    opacity: calc(0.45 * var(--freq-intensity));
  }
  90% { opacity: calc(0.35 * var(--freq-intensity)); }
  100% { 
    transform: translate(70px, -40px); 
    opacity: 0;
  }
}

@keyframes dust-float-3 {
  0% { 
    transform: translate(0, 0); 
    opacity: 0;
  }
  10% { opacity: calc(0.3 * var(--freq-intensity)); }
  50% { 
    transform: translate(-30px, -40px); 
    opacity: calc(0.5 * var(--freq-intensity));
  }
  90% { opacity: calc(0.3 * var(--freq-intensity)); }
  100% { 
    transform: translate(-60px, -70px); 
    opacity: 0;
  }
}

/* Central breathing aura - subtle glow */
.freq-galaxy-bg .freq-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(120, 90, 160, calc(0.12 * var(--freq-intensity))) 0%,
    rgba(70, 110, 140, calc(0.08 * var(--freq-intensity))) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  animation: aura-breathe var(--freq-pulse-duration) ease-in-out infinite alternate;
  filter: blur(15px);
}

@keyframes aura-breathe {
  0% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: calc(0.6 + 0.25 * var(--freq-intensity));
  }
}

/* Shooting star - rare, subtle, gentle */
.freq-galaxy-bg .freq-shooting-star {
  --star-angle: -35deg;
  position: absolute;
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.6) 25%,
    rgba(200, 190, 255, 0.5) 50%,
    rgba(180, 210, 255, 0.3) 75%,
    transparent 100%);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transform: rotate(var(--star-angle));
  filter: blur(0.5px);
}

/* Initial static positions (before JS randomizes) */
.freq-galaxy-bg .freq-shooting-star:nth-child(26) {
  top: 25%;
  left: 65%;
}

.freq-galaxy-bg .freq-shooting-star:nth-child(27) {
  top: 55%;
  left: 35%;
}

.freq-galaxy-bg .freq-shooting-star:nth-child(28) {
  top: 40%;
  left: 80%;
}

/* Randomized shooting star animation - gentle, visible */
@keyframes shooting-star-random {
  /* Invisible for most of the cycle (0-88%) */
  0%, 88% { 
    opacity: 0;
    transform: rotate(var(--star-angle)) translateX(0) scaleX(0.2);
  }
  /* Gentle appearance (88-98%) - about 1.5 seconds at 12s duration */
  90% {
    opacity: 0.4;
    transform: rotate(var(--star-angle)) translateX(-15px) scaleX(0.6);
  }
  92% {
    opacity: 0.75;
    transform: rotate(var(--star-angle)) translateX(-35px) scaleX(0.9);
  }
  94% {
    opacity: 0.6;
    transform: rotate(var(--star-angle)) translateX(-55px) scaleX(1);
  }
  96% {
    opacity: 0.35;
    transform: rotate(var(--star-angle)) translateX(-80px) scaleX(0.9);
  }
  98%, 100% { 
    opacity: 0;
    transform: rotate(var(--star-angle)) translateX(-100px) scaleX(0.4);
  }
}

/* Light mode adjustments - keep space theme */
body:not([data-theme="dark"]) .program-display .freq-galaxy-bg {
  background: linear-gradient(135deg, 
    rgba(20, 20, 45, 0.95) 0%,
    rgba(30, 25, 55, 0.93) 50%,
    rgba(20, 30, 50, 0.95) 100%
  );
}

body:not([data-theme="dark"]) .program-display .program-info-panel,
body:not([data-theme="dark"]) .program-display .program-phase-display,
body:not([data-theme="dark"]) .program-display .program-timer,
body:not([data-theme="dark"]) .program-display .program-current-name,
body:not([data-theme="dark"]) .program-display .phase-name {
  color: rgba(255, 255, 255, 0.95);
}

body:not([data-theme="dark"]) .program-display .phase-description,
body:not([data-theme="dark"]) .program-display .freq-label,
body:not([data-theme="dark"]) .program-display .timer-separator,
body:not([data-theme="dark"]) .program-display .timer-total {
  color: rgba(255, 255, 255, 0.6);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.program-info-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.program-current-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.program-timer {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.timer-elapsed {
  color: #10b981;
}

.timer-separator {
  color: var(--muted);
  margin: 0 4px;
}

.timer-total {
  color: var(--muted);
}

/* Progress Bar */
.program-progress-container {
  margin-bottom: 20px;
}

.program-progress-track {
  position: relative;
  height: 12px;
  background: rgba(147, 112, 219, 0.15);
  border-radius: 999px;
  overflow: visible;
}

.program-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    #9370db 0%,
    #40e0d0 50%,
    #ff69b4 100%
  );
  background-size: 200% 100%;
  animation: shimmer-progress 3s ease-in-out infinite;
  border-radius: 999px;
  transition: width 0.5s ease;
  box-shadow: 0 0 12px rgba(147, 112, 219, 0.4);
}

@keyframes shimmer-progress {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.program-phase-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.phase-marker {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 20px;
  background: var(--fg);
  opacity: 0.4;
  border-radius: 2px;
  transform: translateX(-50%);
}

.phase-marker::after {
  content: attr(data-phase);
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* Phase Display */
.program-phase-display {
  text-align: center;
}

.phase-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}

.phase-badge {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #9370db, #40e0d0);
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.phase-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
}

.phase-frequencies {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 12px;
}

.freq-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.freq-item .freq-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.freq-item .freq-value {
  font-size: 18px;
  font-weight: 700;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
}

.freq-item:first-child .freq-value {
  color: #f97316;
}

.freq-item.binaural .freq-value {
  color: #9370db;
  font-size: 24px;
}

.freq-item:last-child .freq-value {
  color: #06b6d4;
}

.phase-description {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Program Info Cards */
.program-info-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.info-card {
  background: var(--control-bg);
  border: 2px solid var(--panel-border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #9370db, #40e0d0);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.info-card:hover {
  border-color: rgba(147, 112, 219, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.info-card:hover::before {
  opacity: 1;
}

.info-card.active {
  border-color: rgba(147, 112, 219, 0.8);
  background: linear-gradient(135deg, rgba(147, 112, 219, 0.08), rgba(64, 224, 208, 0.05));
}

.info-card.active::before {
  opacity: 1;
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.card-icon {
  font-size: 20px;
}

.info-card-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  flex: 1;
}

.card-duration {
  font-size: 11px;
  font-weight: 600;
  color: #9370db;
  background: rgba(147, 112, 219, 0.15);
  padding: 2px 8px;
  border-radius: 999px;
}

.info-card p {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}

.card-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.phase-tag {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.phase-tag.delta {
  background: rgba(139, 0, 139, 0.2);
  color: #9932cc;
}

.phase-tag.theta {
  background: rgba(138, 43, 226, 0.2);
  color: #8a2be2;
}

.phase-tag.alpha {
  background: rgba(64, 224, 208, 0.2);
  color: #20b2aa;
}

.phase-tag.beta {
  background: rgba(255, 165, 0, 0.2);
  color: #ff8c00;
}

.phase-tag.deep {
  background: rgba(75, 0, 130, 0.2);
  color: #4b0082;
}

.phase-tag.schumann {
  background: rgba(218, 165, 32, 0.2);
  color: #b8860b;
}

.phase-tag.lucid {
  background: rgba(138, 43, 226, 0.25);
  color: #9932cc;
  border: 1px solid rgba(138, 43, 226, 0.3);
}

.phase-tag.healing {
  background: rgba(34, 139, 34, 0.2);
  color: #228b22;
}

.phase-tag.zen {
  background: rgba(107, 142, 35, 0.2);
  color: #6b8e23;
}

.phase-tag.vortex {
  background: rgba(255, 140, 0, 0.25);
  color: #ff6600;
  border: 1px solid rgba(255, 140, 0, 0.3);
}

.phase-tag.heart {
  background: rgba(255, 105, 180, 0.2);
  color: #db7093;
}

.phase-tag.dream {
  background: rgba(106, 90, 205, 0.2);
  color: #7b68ee;
}

.phase-tag.phoenix {
  background: rgba(255, 69, 0, 0.2);
  color: #ff4500;
  border: 1px solid rgba(255, 69, 0, 0.25);
}

/* Program Running Animation */
.programs-section.is-running {
  border-color: rgba(147, 112, 219, 0.5);
  box-shadow: 0 0 30px rgba(147, 112, 219, 0.15);
}

.programs-section.is-running::before {
  animation: border-shimmer 2s linear infinite;
  opacity: 1;
}

@keyframes border-shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Responsive */
@media (max-width: 1100px) {
  .program-info-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .programs-section {
    padding: 16px;
  }
  
  .program-info-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .programs-controls {
    flex-direction: column;
  }
  
  #programSelect {
    min-width: 100%;
    max-width: 100%;
  }
  
  .program-actions {
    width: 100%;
    justify-content: center;
  }
  
  .program-btn {
    flex: 1;
    max-width: 150px;
  }
  
  .phase-frequencies {
    gap: 16px;
    flex-wrap: wrap;
  }
  
  .program-timer {
    font-size: 20px;
  }
  
  .program-current-name {
    font-size: 16px;
  }
  
  .program-info-panel {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

@media (max-width: 500px) {
  .program-info-cards {
    grid-template-columns: 1fr;
  }
  
  .info-card-header h3 {
    font-size: 13px;
  }
  
  .phase-name {
    font-size: 18px;
  }
  
  .freq-item .freq-value {
    font-size: 16px;
  }
  
  .freq-item.binaural .freq-value {
    font-size: 20px;
  }
}

/* ===== DYNAMIC BINAURAL JOURNEYS (Inside Tab Panel) ===== */
/* Legacy section styles kept for compatibility */
.dynamic-journeys-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.dynamic-journeys-section::before {
  display: none;
}

.dynamic-journeys-section.collapsed {
  padding: 0;
}

/* Hide toggle button in new tabbed layout */
.dynamic-journeys-toggle {
  display: none;
}

/* Dynamic Journeys Content - now shown directly in panel */
.dynamic-journeys-content {
  padding: 0;
}

.dynamic-journeys-content[hidden] {
  display: none;
}

.dynamic-journeys-header {
  text-align: center;
  margin-bottom: 20px;
}

.dynamic-journeys-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.dynamic-journeys-icon {
  font-size: 28px;
  animation: gentle-float-dynamic 3s ease-in-out infinite;
}

@keyframes gentle-float-dynamic {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.dynamic-journeys-title-row h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
}

.dynamic-journeys-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.dynamic-journeys-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.dynamic-journey-select-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dynamic-journey-select-wrapper label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

#dynamicJourneySelect {
  padding: 10px 16px;
  font-size: 15px;
  background: var(--control-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  color: var(--text-primary);
  cursor: pointer;
  min-width: 280px;
  transition: all 0.3s;
}

#dynamicJourneySelect:hover {
  border-color: rgba(139, 92, 246, 0.5);
}

#dynamicJourneySelect:focus {
  outline: none;
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.dynamic-journey-actions {
  display: flex;
  gap: 10px;
}

.dynamic-journey-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
  min-width: 130px;
  justify-content: center;
}

.dynamic-journey-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.dynamic-journey-btn.start-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.dynamic-journey-btn.start-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}

.dynamic-journey-btn.start-btn.is-playing {
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  animation: pulse-glow-dynamic 2s ease-in-out infinite;
}

@keyframes pulse-glow-dynamic {
  0%, 100% { box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
  50% { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5); }
}

.dynamic-journey-btn.stop-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.dynamic-journey-btn.stop-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
}

/* Dynamic Journey Display */
.dynamic-journey-display {
  --freq-pulse-duration: 8s;
  --freq-intensity: 0.5;
  --nebula-drift: 0deg;
  position: relative;
  background: transparent;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(139, 92, 246, 0.15);
  animation: fade-in 0.3s ease;
}

/* Galaxy background for dynamic journeys */
.dynamic-journey-display .freq-galaxy-bg {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  z-index: -2;
  background: linear-gradient(135deg, 
    rgba(10, 15, 30, 0.97) 0%,
    rgba(20, 20, 50, 0.95) 50%,
    rgba(15, 20, 40, 0.97) 100%
  );
}

.dynamic-journey-display .freq-galaxy-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(ellipse 35% 40% at 30% 40%, 
      rgba(96, 165, 250, calc(0.2 * var(--freq-intensity))) 0%, 
      transparent 55%),
    radial-gradient(ellipse 40% 35% at 70% 55%, 
      rgba(139, 92, 246, calc(0.18 * var(--freq-intensity))) 0%, 
      transparent 50%),
    radial-gradient(ellipse 30% 35% at 45% 75%, 
      rgba(244, 114, 182, calc(0.15 * var(--freq-intensity))) 0%, 
      transparent 45%);
  animation: nebula-flow calc(var(--freq-pulse-duration) * 5) ease-in-out infinite;
  pointer-events: none;
  filter: blur(12px);
}

.dynamic-journey-display .freq-galaxy-bg::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: 
    radial-gradient(ellipse 45% 50% at 60% 35%, 
      rgba(96, 165, 250, calc(0.15 * var(--freq-intensity))) 0%, 
      transparent 50%),
    radial-gradient(ellipse 40% 45% at 25% 70%, 
      rgba(167, 139, 250, calc(0.12 * var(--freq-intensity))) 0%, 
      transparent 45%);
  animation: nebula-flow-alt calc(var(--freq-pulse-duration) * 6) ease-in-out infinite;
  pointer-events: none;
  filter: blur(8px);
}

/* Outer glow for dynamic journeys */
.dynamic-journey-display::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, 0.2) 0%,
    rgba(139, 92, 246, 0.15) 50%,
    rgba(244, 114, 182, 0.2) 100%
  );
  z-index: -2;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 1s ease;
}

.dynamic-journeys-section.is-running .dynamic-journey-display::after {
  opacity: calc(0.4 * var(--freq-intensity));
}

.dynamic-journey-info-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.dynamic-journey-current-name {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dynamic-journey-timer {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 24px;
  color: var(--text-primary);
}

.dynamic-journey-timer .timer-separator {
  color: var(--text-muted);
  margin: 0 4px;
}

.dynamic-journey-timer .timer-total {
  color: var(--text-muted);
}

/* Progress Bar */
.dynamic-journey-progress-container {
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.dynamic-journey-progress-track {
  height: 8px;
  background: var(--panel-border);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.dynamic-journey-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #f472b6 100%);
  border-radius: 4px;
  width: 0%;
  transition: width 0.3s linear;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.dynamic-journey-phase-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}

.dynamic-journey-phase-markers .phase-marker {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
}

/* Phase Display */
.dynamic-journey-phase-display {
  text-align: center;
  position: relative;
  z-index: 1;
}

.dynamic-journey-phase-display .phase-indicator {
  margin-bottom: 20px;
}

.phase-badge.dynamic {
  display: inline-block;
  padding: 4px 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.dynamic-journey-phase-display .phase-name {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
}

.freq-item.binaural.dynamic-beat .freq-value {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: freq-shimmer 2s ease-in-out infinite;
}

@keyframes freq-shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Info Cards */
.dynamic-journey-info-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.info-card.dynamic {
  background: var(--control-bg);
  border: 2px solid var(--panel-border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.info-card.dynamic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.info-card.dynamic:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
}

.info-card.dynamic:hover::before {
  opacity: 1;
}

.info-card.dynamic.active {
  border-color: #a78bfa;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}

.info-card.dynamic.active::before {
  opacity: 1;
}

.info-card.dynamic .info-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.info-card.dynamic .card-icon {
  font-size: 24px;
}

.info-card.dynamic h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.info-card.dynamic .card-duration {
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(139, 92, 246, 0.15);
  border-radius: 10px;
  color: #a78bfa;
  font-weight: 600;
}

.info-card.dynamic p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 10px 0;
  position: relative;
  z-index: 1;
}

.card-phases.dynamic-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  position: relative;
  z-index: 1;
}

/* Dynamic phase tag colors */
.phase-tag.cosmic {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.25);
}

.phase-tag.symphony {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.25);
}

.phase-tag.tidal {
  background: rgba(34, 211, 238, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(34, 211, 238, 0.25);
}

.phase-tag.aurora {
  background: rgba(244, 114, 182, 0.15);
  color: #f472b6;
  border: 1px solid rgba(244, 114, 182, 0.25);
}

.phase-tag.quantum {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.25);
}

/* Running state */
.dynamic-journeys-section.is-running {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.15);
}

.dynamic-journeys-section.is-running::before {
  animation: border-shimmer-dynamic 2s linear infinite;
  opacity: 1;
}

@keyframes border-shimmer-dynamic {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Responsive */
@media (max-width: 1200px) {
  .dynamic-journey-info-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .dynamic-journey-info-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dynamic-journeys-section {
    padding: 16px;
  }
  
  .dynamic-journeys-toggle {
    padding: 14px 16px;
  }
  
  .dynamic-journeys-toggle-hint {
    display: none;
  }
  
  .dynamic-journeys-toggle-text {
    font-size: 14px;
  }
  
  .dynamic-journeys-controls {
    flex-direction: column;
    gap: 16px;
  }
  
  #dynamicJourneySelect {
    min-width: 100%;
    max-width: 100%;
  }
  
  .dynamic-journey-actions {
    width: 100%;
    justify-content: center;
  }
  
  .dynamic-journey-btn {
    flex: 1;
    max-width: 150px;
  }
  
  .dynamic-journey-info-panel {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  
  .dynamic-journey-timer {
    font-size: 20px;
  }
  
  .dynamic-journey-current-name {
    font-size: 16px;
  }
}

@media (max-width: 500px) {
  .dynamic-journey-info-cards {
    grid-template-columns: 1fr;
  }
  
  .info-card.dynamic h3 {
    font-size: 14px;
  }
  
  .dynamic-journey-phase-display .phase-name {
    font-size: 18px;
  }
}