:root {
            --primary: #0000cd;
            --accent: #fabd05;
            --light-bg: #ffffcc;
            --alt-bg: #ccffcc;
            --dark: #1a1a1a;
            --text: #000000;
        }

        body { font-family: 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; padding: 20px; color: var(--text); background: #f4f4f4; line-height: 1.5; }
        .container { max-width: 800px; margin: 0 auto; background: #ffffff; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        
        header { border-bottom: 4px solid var(--accent); padding-bottom: 20px; text-align: center; }
        nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin: 20px 0; background: #e8edf2; padding: 10px; }
        nav a { color: var(--primary); text-decoration: none; font-weight: bold; font-size: 0.9em; }

        .hero-banner { 
            width: 100%; height: 160px; 
            background: linear-gradient(135deg, var(--primary) 0%, #0000ff 100%); 
            display: flex; align-items: center; justify-content: center; 
            color: white; font-size: 2em; font-weight: bold; margin: 20px 0;
            border-radius: 8px;
        }

        table { width: 100%; border-collapse: collapse; margin-bottom: 30px; font-size: 14px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        .route-title { color: var(--primary); font-size: 24px; font-weight: bold; margin: 30px 0 10px; }
        .bg-light { background-color: var(--light-bg); }
        .bg-alt { background-color: var(--alt-bg); }

        footer { text-align: center; margin-top: 40px; padding: 20px; border-top: 1px solid #ccc; font-size: 0.8em; }

        @media (max-width: 768px) {
            table { font-size: 10px; }
            .hero-banner { height: 100px; font-size: 1.2em; }
        }