/* Base */
    body {
      font-family: 'Poppins', sans-serif;
      background-color: #f0f4f8;
    }

    /* Cross-browser gradient text */
    .fun-gradient-text {
      background: linear-gradient(45deg, #f87171, #60a5fa, #a78bfa);
      color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Animated heading */
    .animated-heading .h1-word {
      display: inline-block;
      opacity: 0;
      transform: translateY(20px);
      animation: shift-up 0.6s forwards;
    }

    @keyframes shift-up {
      to { opacity: 1; transform: translateY(0); }
    }

    /* New Pulsing Gradient Loader */
    .loader {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: conic-gradient(#a78bfa, #6366f1, #4ade80, #f87171, #a78bfa);
        animation: spin 1.5s linear infinite;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    /* This creates the inner circle, making it a ring */
    .loader::after {
        content: '';
        position: absolute;
        width: 48px;
        height: 48px;
        background: #f0f4f8; /* Match the body background */
        border-radius: 50%;
    }

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

    /* Typing caret */
    .typing-effect { display: inline-block; }
    .typing-effect::after { content: '|'; animation: blink 0.7s infinite; color: #9ca3af; }
    @keyframes blink { 50% { opacity: 0; } }

    /* Active nav */
    .nav-link.active { color: #6366f1; font-weight: 700; }

    /* Screenshot & Share */
    #flash-overlay {
      pointer-events: none;
      opacity: 0;
      animation: none;
    }

    .is-flashing {
      animation: flash-bang 0.5s ease-out;
    }

    @keyframes flash-bang {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }