@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        body {
            font-family: 'Inter', sans-serif;
        }

        .timeline-slider {
            background: linear-gradient(90deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
        }

        .map-container {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
            position: relative;
            overflow: hidden;
        }

        .water-animation {
            animation: flow 3s ease-in-out infinite;
        }

        @keyframes flow {
            0%, 100% { transform: translateX(0) scale(1); opacity: 0.7; }
            50% { transform: translateX(10px) scale(1.05); opacity: 1; }
        }

        .wisdom-card {
            transition: all 0.3s ease;
            background: linear-gradient(135deg, #065f46 0%, #047857 100%);
        }

        .wisdom-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

        .memory-card {
            transition: all 0.3s ease;
        }

        .memory-card:hover {
            transform: scale(1.02);
        }

        .floating-element {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .clickable-element {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .clickable-element:hover {
            filter: brightness(1.3);
            transform: scale(1.05);
        }

        .map-transition {
            transition: all 0.8s ease-in-out;
        }

        .fade-in {
            animation: fadeIn 0.8s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }