@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

        body {
            background-color: #FAF7F2;
            color: #1A1D20;
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            overflow-x: hidden;
        }

        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 300px;
            max-height: 380px;
        }

        .hero-gradient {
            background: linear-gradient(180deg, rgba(26,29,32,0.85) 0%, rgba(26,29,32,0.92) 100%);
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #F2ECE1;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #D97706;
            border-radius: 3px;
        }

        @keyframes steamFloat {
            0% { transform: translateY(0) scaleX(1); opacity: 0.2; }
            50% { transform: translateY(-12px) scaleX(1.15); opacity: 0.6; }
            100% { transform: translateY(-25px) scaleX(1.3); opacity: 0; }
        }

        .steam-particle {
            animation: steamFloat 3.5s infinite ease-out;
        }

        .map-frame {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 7;
            min-height: 280px;
            background: #F2ECE1;
        }

        .map-frame iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        .reservation-range {
            min-height: 1.5rem;
            cursor: pointer;
        }

        .reservation-range:focus-visible {
            outline: 2px solid #FBBF24;
            outline-offset: 4px;
        }

        body {
            padding-bottom: 4.5rem;
        }

        @media (min-width: 768px) {
            body {
                padding-bottom: 0;
            }
        }

        @media (max-width: 767px) {
            .map-frame {
                aspect-ratio: 4 / 3;
                min-height: 260px;
            }
        }