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

body {
  background: #0a0a0a;
  color: #e0e0e0;
  font-family: 'Share Tech Mono', monospace;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Scanline overlay */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Glitch title */
@keyframes glitch {
  0% { text-shadow: 2px 0 #ff00aa, -2px 0 #00ffcc; }
  20% { text-shadow: -3px 1px #ff00aa, 3px -1px #00ffcc; }
  40% { text-shadow: 3px -2px #ff00aa, -3px 2px #00ffcc; }
  60% { text-shadow: -2px 3px #ff00aa, 2px -3px #00ffcc; }
  80% { text-shadow: 1px -1px #ff00aa, -1px 1px #00ffcc, 5px 0 #ccff00; }
  100% { text-shadow: 2px 0 #ff00aa, -2px 0 #00ffcc; }
}

@keyframes glitchSkew {
  0% { transform: skew(0deg); }
  20% { transform: skew(-2deg); }
  40% { transform: skew(0.5deg); }
  60% { transform: skew(-0.3deg); }
  80% { transform: skew(1deg); }
  100% { transform: skew(0deg); }
}

.glitch-title {
  font-family: 'Press Start 2P', monospace;
  animation: glitch 0.3s infinite, glitchSkew 2s infinite;
  letter-spacing: 4px;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px currentColor; }
  50% { box-shadow: 0 0 25px currentColor, 0 0 50px currentColor; }
}

.pulse-glow {
  animation: pulse-glow 0.8s ease-in-out infinite;
}

@keyframes step-trigger {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); filter: brightness(2); }
  100% { transform: scale(1); }
}

.step-triggered {
  animation: step-trigger 0.1s ease-out;
}

/* Knob styling */
.knob-container {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: grab;
}

.knob-container:active { cursor: grabbing; }

.knob-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #333;
  position: relative;
  background: #111;
}

.knob-indicator {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 2px;
  height: 12px;
  background: #00ffcc;
  transform-origin: bottom center;
  border-radius: 1px;
}

/* Custom slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
  height: 4px;
  background: #222;
  border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #00ffcc;
  border-radius: 50%;
  margin-top: -5px;
  box-shadow: 0 0 6px #00ffcc;
}

input[type="range"]::-moz-range-track {
  height: 4px;
  background: #222;
  border-radius: 2px;
  border: none;
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #00ffcc;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 6px #00ffcc;
}

.slider-pink::-webkit-slider-thumb { background: #ff00aa; box-shadow: 0 0 6px #ff00aa; }
.slider-pink::-moz-range-thumb { background: #ff00aa; box-shadow: 0 0 6px #ff00aa; }

.slider-yellow::-webkit-slider-thumb { background: #ccff00; box-shadow: 0 0 6px #ccff00; }
.slider-yellow::-moz-range-thumb { background: #ccff00; box-shadow: 0 0 6px #ccff00; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

@keyframes bgPulse {
  0% { background-color: #0a0a0a; }
  10% { background-color: #120a10; }
  100% { background-color: #0a0a0a; }
}

.bg-pulse {
  animation: bgPulse 0.15s ease-out;
}

/* Oscilloscope canvas */
#oscilloscope {
  image-rendering: pixelated;
}

@keyframes flickerIn {
  0% { opacity: 0; transform: translateY(-2px); }
  50% { opacity: 0.5; }
  100% { opacity: 1; transform: translateY(0); }
}

.flicker-in {
  animation: flickerIn 0.05s ease-out;
}