body {
  font-family: 'IBM Plex Sans', sans-serif;
  background: linear-gradient(135deg, #FFF8F0 0%, #FFE8D6 50%, #FFF0E6 100%);
}

.fun-font {
  font-family: 'Caveat', cursive;
}

.sketchy-border {
  border: 2.5px dashed #FF9F43;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0z' fill='none'/%3E%3Cpath d='M10 0v20M0 10h20' stroke='%23FF9F43' stroke-width='0.3' opacity='0.08'/%3E%3C/svg%3E");
}

.card-shadow {
  box-shadow: 3px 3px 0px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}

.card-shadow-lg {
  box-shadow: 4px 4px 0px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.06);
}

.step-card {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
}

.step-card:hover {
  transform: translateY(-4px) rotate(0deg) !important;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes pencilDraw {
  0% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(4px) rotate(3deg); }
  50% { transform: translateX(-2px) rotate(-2deg); }
  75% { transform: translateX(3px) rotate(2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.pencil-animate {
  animation: pencilDraw 0.8s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.dot-pulse {
  animation: dotPulse 1.5s ease-in-out infinite;
}

@keyframes confetti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-60px) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  animation: confetti 1s ease-out forwards;
}

.progress-bar-fill {
  transition: width 0.5s ease-in-out;
  background: linear-gradient(90deg, #F9CA24, #F0932B, #6C5CE7, #A29BFE, #00B894);
  background-size: 300% 100%;
  animation: progressShimmer 3s ease infinite;
}

@keyframes progressShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.timeline-scroll::-webkit-scrollbar {
  height: 6px;
}

.timeline-scroll::-webkit-scrollbar-track {
  background: #FFF8F0;
  border-radius: 3px;
}

.timeline-scroll::-webkit-scrollbar-thumb {
  background: #FF9F43;
  border-radius: 3px;
}

.modal-overlay {
  backdrop-filter: blur(8px);
}

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

.spin-slow {
  animation: spin-slow 3s linear infinite;
}

.phase-tag {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}