* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #06060f;
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(176,0,255,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0,240,255,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(255,0,128,0.04) 0%, transparent 50%);
  min-height: 100vh;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,240,255,0.15), inset 0 0 20px rgba(0,240,255,0.05); }
  50% { box-shadow: 0 0 40px rgba(0,240,255,0.3), inset 0 0 40px rgba(0,240,255,0.1); }
}

@keyframes float-note {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(5deg); }
  75% { transform: translateY(4px) rotate(-3deg); }
}

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



.drop-zone-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

.note-float {
  animation: float-note 3s ease-in-out infinite;
}

.glass-panel {
  background: rgba(20, 20, 58, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.1);
}

.neon-text-cyan {
  text-shadow: 0 0 10px rgba(0,240,255,0.5), 0 0 30px rgba(0,240,255,0.2);
}

.neon-text-pink {
  text-shadow: 0 0 10px rgba(255,0,128,0.5), 0 0 30px rgba(255,0,128,0.2);
}

.glow-cyan { box-shadow: 0 0 15px rgba(0,240,255,0.3), 0 0 5px rgba(0,240,255,0.1); }
.glow-pink { box-shadow: 0 0 15px rgba(255,0,128,0.3), 0 0 5px rgba(255,0,128,0.1); }
.glow-purple { box-shadow: 0 0 15px rgba(176,0,255,0.3), 0 0 5px rgba(176,0,255,0.1); }
.glow-lime { box-shadow: 0 0 15px rgba(0,255,136,0.3), 0 0 5px rgba(0,255,136,0.1); }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.1);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00f0ff;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,240,255,0.5);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00f0ff;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 10px rgba(0,240,255,0.5);
}

.progress-bar::-webkit-slider-thumb {
  background: #ff0080;
  box-shadow: 0 0 10px rgba(255,0,128,0.5);
}

.progress-bar::-moz-range-thumb {
  background: #ff0080;
  border: none;
  box-shadow: 0 0 10px rgba(255,0,128,0.5);
}

canvas {
  image-rendering: auto;
}



::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,240,255,0.5); }

.track-item:hover {
  background: rgba(0,240,255,0.05);
}

@keyframes key-press {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(0.95); }
  100% { transform: scaleY(1); }
}