* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Space Grotesk', sans-serif;
  background: #0f0a19;
}

code, pre {
  font-family: 'JetBrains Mono', monospace;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1e1b2e;
}

::-webkit-scrollbar-thumb {
  background: #4c1d95;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6d28d9;
}

/* Ditto Blob Animations */
.ditto-blob {
  transition: transform 0.3s ease;
}

.ditto-blob.generating .blob-body {
  animation: blobPulse 0.5s ease-in-out infinite;
}

.ditto-blob.wiggle {
  animation: wiggleEffect 0.5s ease-in-out;
}

@keyframes blobPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1, 0.9) rotate(-5deg);
  }
  50% {
    transform: scale(0.9, 1.1) rotate(5deg);
  }
  75% {
    transform: scale(1.05, 0.95) rotate(-3deg);
  }
}

@keyframes wiggleEffect {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(15deg); }
  60% { transform: rotate(-10deg); }
  80% { transform: rotate(10deg); }
}

/* Confetti */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1000;
}

.confetti-particle {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confettiFall 2s ease-out forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Code rain effect */
.code-rain {
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.8;
}

.code-rain div {
  opacity: 0;
  animation: codeAppear 0.3s ease forwards;
}

@keyframes codeAppear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 0.5;
    transform: translateY(0);
  }
}

/* Smooth transitions */
button {
  transition: all 0.2s ease;
}

button:active {
  transform: scale(0.95);
}

/* Mobile responsive adjustments */
@media (max-width: 1024px) {
  .lg\:flex-row {
    flex-direction: column;
  }
  
  .lg\:w-96 {
    width: 100%;
    max-height: 50vh;
  }
}

/* Canvas focus state */
canvas:focus {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}