@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;500&display=swap');
        
        :root {
            --gold: #C9A227;
            --deep: #3F2E3E;
            --lavender: #EDE4FF;
        }
        
        body { font-family: 'Inter', system_ui, sans-serif; }
        .heading-serif { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; line-height: 1.05; }

        .gentle-gradient { background: linear-gradient(135deg, #FDF8F3 0%, #EDE4FF 40%, #DBEAFE 100%); }

        .section-header { font-family: 'Playfair Display', Georgia, serif; color: #3F2E3E; }

        .nav-link { position: relative; transition: color 0.2s ease; }
        .nav-link:after {
            content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0;
            background-color: #C9A227; transition: width 0.3s ease;
        }
        .nav-link:hover:after, .nav-link.active:after { width: 100%; }
        .nav-link.active { color: #C9A227; font-weight: 500; }

        .interactive-btn, .card-btn, .pamphlet-card, .resource-card, .whimsical-card {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .interactive-btn:hover, .card-btn:hover, .pamphlet-card:hover, .resource-card:hover, .whimsical-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }
        .interactive-btn:active, .card-btn:active { transform: scale(0.985); }

        .modal { animation: modalPop 0.25s ease-out forwards; }
        @keyframes modalPop {
            from { opacity: 0; transform: scale(0.95) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .toast { animation: toastSlide 0.3s ease forwards; }
        @keyframes toastSlide {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .touch-friendly { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0.05); }

        .back-to-top {
            position: fixed; bottom: 24px; right: 24px; z-index: 999;
            width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
            background: #3F2E3E; color: white; border-radius: 9999px;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2);
            opacity: 0; visibility: hidden; transition: all 0.3s ease;
        }
        .back-to-top.visible { opacity: 1; visibility: visible; }

        @media (max-width: 768px) {
            .interactive-btn, .card-btn, button, a[onclick] { min-height: 48px; }
            .pamphlet-card, .resource-card, .whimsical-card { padding: 1.25rem !important; }
        }

        .stat-bar { transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

        /* Dark Mode Styles */
        html.dark body {
            background-color: #1F1B24;
            color: #E5D9F2;
        }
        
        html.dark .gentle-gradient {
            background: linear-gradient(135deg, #2A2533 0%, #3A2F4A 45%, #2C2540 100%);
        }
        
        html.dark nav {
            background-color: #2A2533 !important;
            border-color: #4A3F5C !important;
        }
        
        html.dark .nav-link {
            color: #C5B8D9;
        }
        
        html.dark .nav-link:hover {
            color: #E5D9F2;
        }
        
        html.dark .nav-link.active {
            color: #E8D48A;
        }
        
        html.dark .section-header {
            color: #E5D9F2;
        }
        
        html.dark .pamphlet-card,
        html.dark .psych-card,
        html.dark .whimsical-card,
        html.dark .bg-white {
            background-color: #2A2533 !important;
            border-color: #4A3F5C !important;
            color: #E5D9F2;
        }
        
        html.dark .bg-white\/80,
        html.dark .bg-white\/95 {
            background-color: #2A2533 !important;
            border-color: #4A3F5C !important;
        }
        
        html.dark input,
        html.dark textarea {
            background-color: #1F1B24;
            border-color: #4A3F5C;
            color: #E5D9F2;
        }
        
        html.dark .text-\[\#5C4A5B\],
        html.dark .text-\[\#4A5568\] {
            color: #B8A9C9 !important;
        }
        
        html.dark .heading-serif {
            color: #E5D9F2;
        }
        
        html.dark .interactive-btn:hover,
        html.dark .pamphlet-card:hover,
        html.dark .whimsical-card:hover {
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
        }
        
        html.dark #back-to-top {
            background: #E8D48A;
            color: #1F1B24;
        }
        
        html.dark .toast {
            background-color: #2A2533;
            border-color: #4A3F5C;
            color: #E5D9F2;
        }

        .support-bar {
            background: linear-gradient(to right, #3F2E3E, #2D2D2D);
        }

        .gratitude-wall {
            max-height: 300px;
            overflow-y: auto;
        }

        /* Google Translate widget — hide the intrusive top banner & keep layout stable */
        .goog-te-banner-frame.skiptranslate,
        .goog-te-gadget-icon,
        .goog-logo-link { display: none !important; }
        .goog-te-gadget { color: transparent !important; font-size: 0 !important; }
        .goog-te-gadget .goog-te-combo {
            font-size: 14px;
            color: #3F2E3E;
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #E0D4F0;
            border-radius: 14px;
            background: #FDF8F3;
            margin: 0;
            cursor: pointer;
        }
        body { top: 0 !important; }
        html.dark .goog-te-gadget .goog-te-combo {
            background: #2A2533;
            color: #E5D9F2;
            border-color: #4A3F5C;
        }
        #translate-panel { transition: opacity 0.2s ease; }


/* ===================================================================== */
/*  WHIMSY & NATURE BEAUTY                                                */
/* ===================================================================== */

/* Falling petals / leaves — gentle, behind nav & modals, never blocking taps */
.petal-field { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.petal { position: absolute; top: -48px; font-size: 22px; opacity: .5;
         animation: petal-fall linear infinite; will-change: transform; }
@keyframes petal-fall {
  0%   { transform: translateY(-48px) translateX(0) rotate(0deg); }
  50%  { transform: translateY(46vh) translateX(28px) rotate(180deg); }
  100% { transform: translateY(108vh) translateX(-10px) rotate(360deg); }
}

/* Gentle bobbing for hero/banner emojis */
.emoji-bob { display: inline-block; animation: bob 4.5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Nature banner scene */
.nature-banner { position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FDF8F3 0%, #EDE4FF 52%, #DDF3E4 100%); }
html.dark .nature-banner { background: linear-gradient(180deg, #2A2533 0%, #3A2F4A 52%, #243A30 100%); }
.nature-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.sun-twinkle { transform-origin: center; animation: twinkle 6s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
.cloud-drift { animation: cloud 30s linear infinite; }
.cloud-drift.cloud-2 { animation-duration: 44s; }
@keyframes cloud { 0% { transform: translateX(-12%); } 100% { transform: translateX(112%); } }
.vine-sway { transform-origin: bottom center; animation: sway 7s ease-in-out infinite; }
.vine-sway.sway-2 { animation-duration: 9s; }
@keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* Botanical section divider */
.section-divider { display: block; width: 100%; height: 46px; color: #C9A227; opacity: .55; margin: 8px 0; }
html.dark .section-divider { color: #E8D48A; opacity: .45; }

/* Garden navigation cards (home page) */
.garden-card { transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease; }
.garden-card:hover { transform: translateY(-7px) rotate(-.5deg);
  box-shadow: 0 18px 30px -12px rgb(63 46 62 / .25); }
.garden-emoji { display: inline-block; transition: transform .3s ease; }
.garden-card:hover .garden-emoji { transform: scale(1.18) rotate(8deg); }

@media (max-width: 768px) { .petal { font-size: 18px; opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  .petal, .emoji-bob, .cloud-drift, .sun-twinkle, .vine-sway { animation: none !important; }
}