@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Rajdhani:wght@600;700;800&display=swap');
        body { font-family: Barlow Semi Condensed, Arial, sans-serif; xxbackground: #f9f9f9; xxcolor: #333; margin: 0; padding: 0px; }
        .container { max-width: 1000px; margin: 0 auto; background: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: var(--accent-green); font-size: 24px; margin-top: 20px; }
        .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 30px; }
        .video-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform 0.2s; }
        .video-card:hover { transform: translateY(-5px); }
        .video-card a { text-decoration: none; color: inherit; }
        .thumbnail { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
        .video-info { padding: 15px; }
        .video-title { font-size: 16px; font-weight: bold; margin: 0 0 10px 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .video-date { font-size: 12px; color: #777; }

        .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; }
        .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        p.date { color: #666; font-size: 14px; }
        p.description { line-height: 1.6; white-space: pre-line; }