:root {
            --bg-deep: #597445;
            --text-fresh: #36ff9e;
            --accent-mint: #58de5d;
        }

        /* STRICT COLOR ENFORCEMENT - No White, No Black */
        body {
            background-color: var(--bg-deep);
            color: var(--text-fresh);
            font-family: 'Grandstander', cursive;
            margin: 0;
            overflow-x: hidden;
        }


        @keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fadeIn {
  animation: fadeIn 2s ease-in-out forwards;
}

        h1, h2, h3, .brand-font { font-family: 'Fascinate Inline', cursive; }

        /* Custom Scrollbar using theme colors */
        ::-webkit-scrollbar { width: 12px; }
        ::-webkit-scrollbar-track { background: var(--bg-deep); }
        ::-webkit-scrollbar-thumb { background: var(--accent-mint); border-radius: 10px; border: 3px solid var(--bg-deep); }

        /* Storytelling Animations */
        .scroll-reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s ease-out; }
        .scroll-reveal.visible { opacity: 1; transform: translateY(0); }

        .vine-path {
            position: absolute;
            left: 50%;
            width: 6px;
            background: repeating-linear-gradient(to bottom, var(--accent-mint) 0%, var(--accent-mint) 50%, transparent 50%, transparent 100%);
            background-size: 100% 20px;
            z-index: -1;
            height: 0;
            transition: height 1.5s ease;
        }

        /* Components */
        .btn-cartoon {
            background-color: var(--accent-mint);
            color: var(--bg-deep);
            padding: 1.25rem 2.5rem;
            border-radius: 60px;
            font-weight: 900;
            border: 5px solid var(--text-fresh);
            box-shadow: 0 8px 0 var(--text-fresh);
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: inline-flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            text-transform: uppercase;
        }

        .btn-cartoon:hover { transform: translateY(-5px); box-shadow: 0 12px 0 var(--text-fresh); background-color: var(--text-fresh); border-color: var(--accent-mint); }
        .btn-cartoon:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--text-fresh); }

        .card-editorial {
            background: var(--bg-deep);
            border: 6px solid var(--text-fresh);
            border-radius: 40px;
            padding: 2.5rem;
            transition: all 0.4s ease;
            position: relative;
            box-shadow: 10px 10px 0 var(--accent-mint);
        }
        .card-editorial:hover { transform: scale(1.02) rotate(-1deg); border-color: var(--accent-mint); }

        .page-view { display: none; }
        .page-view.active { display: block; }

        .form-input {
            background: var(--bg-deep);
            border: 4px solid var(--accent-mint);
            padding: 1.2rem;
            border-radius: 20px;
            color: var(--text-fresh);
            width: 100%;
            outline: none;
            font-weight: 900;
        }
        .form-input::placeholder { color: var(--accent-mint); opacity: 0.6; }

        /* Modal Background */
        .modal-overlay {
            background: rgba(89, 116, 69, 0.98);
            backdrop-filter: blur(10px);
        }

        /* Floating Animation */
        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
        .float-anim { animation: float 4s infinite ease-in-out; }

        /* Search Highlight */
        .highlight { background: var(--accent-mint); color: var(--bg-deep); padding: 0 4px; border-radius: 4px; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fadeIn {
  animation: fadeIn 2s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fadeIn {
  animation: fadeIn 2s ease-in-out forwards;
}