:root {
      --color-sunshine: #FFD93D;
      --color-sky: #6BCB77;
      --color-ocean: #4D96FF;
      --color-coral: #FF6B6B;
      --color-grape: #9B59B6;
    }
    
    * { box-sizing: border-box; }
    
    html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0;
      scroll-behavior: smooth;
    }
    
    body {
      font-family: 'Nunito', sans-serif;
    }
    
    .font-display {
      font-family: 'Baloo 2', cursive;
    }
    
    .app-wrapper {
      width: 100%;
      min-height: 100%;
      overflow-x: hidden;
    }
    
    .gradient-hero {
      background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 25%, #9B59B6 50%, #4D96FF 75%, #6BCB77 100%);
      background-size: 100% 100%;
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(5deg); }
    }
    
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    @keyframes sparkle {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.2); }
    }
    
    @keyframes wiggle {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }
    
    .float-animation {
      animation: float 6s ease-in-out infinite;
    }
    
    .bounce-animation {
      animation: bounce-slow 2s ease-in-out infinite;
    }
    
    .sparkle-animation {
      animation: sparkle 2s ease-in-out infinite;
    }
    
    .wiggle-animation {
      animation: wiggle 1s ease-in-out infinite;
    }
    
    .card-hover {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .card-hover:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
    
    .nav-link {
      position: relative;
      transition: color 0.3s ease;
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 3px;
      background: #FFD93D;
      border-radius: 2px;
      transition: width 0.3s ease;
    }
    
    .nav-link:hover::after {
      width: 100%;
    }
    
    .bubble {
      position: absolute;
      border-radius: 50%;
      opacity: 0.6;
    }
    
    .activity-card {
      background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
      border: 3px solid transparent;
      transition: all 0.3s ease;
    }
    
    .activity-card:hover {
      border-color: var(--color-sunshine);
    }
    
    .paint-canvas {
      border: 4px dashed #9B59B6;
      border-radius: 20px;
      cursor: crosshair;
      touch-action: none;
    }
    
    .color-btn {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .color-btn:hover {
      transform: scale(1.2);
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    
    .section-divider {
      height: 80px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23ffffff' d='M0,50 C480,100 960,0 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat bottom;
      background-size: cover;
    }
    
    .star {
      color: #FFD93D;
      display: inline-block;
    }