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

body {
  font-family: 'Inter', sans-serif;
  background: #000;
  color: #fff;
}

/* Custom slider styles */
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 40px;
  height: 40px;
  background: #ff0000;
  border: 4px solid #000;
  cursor: pointer;
  box-shadow: 4px 4px 0px 0px #00ff00;
}

.slider::-moz-range-thumb {
  width: 40px;
  height: 40px;
  background: #ff0000;
  border: 4px solid #000;
  cursor: pointer;
  box-shadow: 4px 4px 0px 0px #00ff00;
}

/* Animations */
@keyframes jitter {
  0%, 100% { transform: rotate(-2deg) translate(0, 0); }
  25% { transform: rotate(-3deg) translate(-2px, 2px); }
  50% { transform: rotate(-1deg) translate(2px, -2px); }
  75% { transform: rotate(-2.5deg) translate(-1px, 1px); }
}

@keyframes jitter-char {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-2px, 2px) rotate(-2deg); }
  50% { transform: translate(2px, -2px) rotate(2deg); }
  75% { transform: translate(-1px, 1px) rotate(-1deg); }
}

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

@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-10px, 0) rotate(-2deg); }
  20%, 40%, 60%, 80% { transform: translate(10px, 0) rotate(2deg); }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* Responsive improvements */
@media (max-width: 768px) {
  h1 {
    font-size: 3rem !important;
  }
  
  h2 {
    font-size: 2rem !important;
  }
  
  .text-5xl, .text-6xl, .text-7xl {
    font-size: 2.5rem !important;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}