<style>
    /* Scoped to work with Jekyll two-column layout */
    .news-timeline {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        color: #1a202c;
        line-height: 1.5;
        position: relative;
        max-width: 100%;
        margin: 20px 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        border-radius: 16px;
        padding: 30px;
        box-shadow: 
            0 15px 30px rgba(0,0,0,0.12),
            0 0 0 1px rgba(255,255,255,0.7),
            inset 0 1px 0 rgba(255,255,255,0.9);
        overflow: visible; /* Allow timeline elements to extend beyond container */
        isolation: isolate;
    }

    .news-timeline::before {
        content: '';
        position: absolute; /* Fixed positioning to place at sidebar edge */
        left: -35px; /* Just right of sidebar */
        top: 30px;
        height: calc(100% - 60px); /* Adjusted to content height */
        width: 3px;
        background: linear-gradient(
            180deg,
            transparent 0%,
            #2563eb 5%,
            #dc2626 35%,
            #d97706 65%,
            #059669 95%,
            transparent 100%
        );
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(37, 99, 235, 0.2);
        z-index: 1;
    }

    .news-timeline .timeline-section {
        margin-bottom: 40px;
    }

    .news-timeline .section-header {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        color: white;
        padding: 16px 24px;
        border-radius: 12px;
        margin-bottom: 25px;
        position: relative;
        box-shadow: 
            0 8px 24px rgba(15, 23, 42, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .news-timeline .section-header h2 {
        font-size: 1.1em;
        font-weight: 600;
        letter-spacing: 0.4px;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    .news-timeline .section-header::before,
    .news-timeline .section-header::after {
        content: '';
        position: absolute;
    }

    .news-timeline .section-header::before {
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
    }

    .news-timeline .section-header::after {
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
        transform: rotate(45deg);
        animation: shine 3s ease-in-out infinite;
    }

    @keyframes shine {
        0%, 100% { transform: translateX(-100%) rotate(45deg); }
        50% { transform: translateX(100%) rotate(45deg); }
    }

    .news-timeline .news-entry,
    .news-timeline .section-header {
        margin-left: 0; /* Remove left margin since timeline is now external */
    }
    
    .news-timeline .news-entry {
        position: relative;
        padding: 20px;
        margin-bottom: 20px;
        background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
        border-radius: 14px;
        box-shadow: 
            0 6px 20px rgba(0,0,0,0.06),
            0 2px 6px rgba(0,0,0,0.03),
            inset 0 1px 0 rgba(255,255,255,0.8);
        border: 1px solid rgba(226, 232, 240, 0.5);
        transition: all 0.3s ease;
    }

    .news-timeline .news-entry::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
        border-radius: 0 4px 4px 0;
        transition: all 0.3s ease;
    }

    .news-timeline .news-entry.publication::before {
        background: linear-gradient(180deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
    }

    .news-timeline .news-entry.service::before {
        background: linear-gradient(180deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
    }

    .news-timeline .news-entry.milestone::before {
        background: linear-gradient(180deg, #059669 0%, #10b981 50%, #34d399 100%);
    }

    .news-timeline .news-entry:hover {
        transform: translateY(-3px) translateX(6px);
        box-shadow: 
            0 16px 30px rgba(0,0,0,0.1),
            0 6px 20px rgba(0,0,0,0.06),
            inset 0 1px 0 rgba(255,255,255,0.9);
    }

    .news-timeline .news-entry:hover::before {
        width: 6px;
        box-shadow: 0 0 15px rgba(37, 99, 235, 0.25);
    }

    .news-timeline .timeline-dot {
        position: absolute; /* Fixed positioning to align with fixed timeline */
        left: -35px; /* Align with timeline line */
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #2563eb;
        border: 3px solid white;
        box-shadow: 
            0 2px 10px rgba(0,0,0,0.12),
            0 0 0 1.5px #e2e8f0;
        z-index: 10;
        transition: all 0.3s ease;
    }

    .news-timeline .timeline-dot.publication { background: #dc2626; }
    .news-timeline .timeline-dot.service { background: #d97706; }
    .news-timeline .timeline-dot.milestone { background: #059669; }

    .news-timeline .news-entry:hover .timeline-dot {
        transform: scale(1.1);
        box-shadow: 
            0 4px 16px rgba(0,0,0,0.15),
            0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    .news-timeline .date-tag {
        position: absolute;
        top: 10px;
        right: 16px;
        background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.75em;
        font-weight: 600;
        letter-spacing: 0.4px;
        box-shadow: 0 2px 8px rgba(55, 65, 81, 0.3);
    }

    .news-timeline .news-title {
        margin: 0 0 8px 0;
        font-size: 1em;
        font-weight: 600;
        color: #111827;
        padding-right: 120px; /* Space for date tag */
    }

    .news-timeline .news-description {
        font-size: 0.9em;
        color: #4b5563;
        margin-bottom: 12px;
        line-height: 1.5;
        font-weight: 400;
    }

    .news-timeline .venue-badges {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }

    .news-timeline .badge {
        padding: 4px 12px;
        border-radius: 16px;
        font-size: 0.75em;
        font-weight: 600;
        color: white;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .news-timeline .badge.conference { 
        background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); 
    }
    .news-timeline .badge.journal { 
        background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); 
    }
    .news-timeline .badge.service { 
        background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); 
    }
    .news-timeline .badge.milestone { 
        background: linear-gradient(135deg, #059669 0%, #10b981 100%); 
    }

    .news-timeline .paper-link {
        color: #2563eb;
        text-decoration: none;
        font-weight: 600;
        border-bottom: 1.5px dotted #2563eb;
        transition: all 0.2s ease;
    }

    .news-timeline .paper-link:hover {
        color: #1d4ed8;
        border-bottom: none;
        text-shadow: 0 1px 2px rgba(29, 78, 216, 0.1);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .news-timeline {
            padding: 20px;
            margin: 10px 0;
        }
        
        /* On mobile, switch back to relative positioning */
        .news-timeline::before {
            position: absolute;
            left: -35px;
            height: calc(100% - 120px);
        }
        
        .news-timeline .timeline-dot {
            position: absolute;
            left: -25px;
        }
        
        .news-timeline .news-entry,
        .news-timeline .section-header {
            margin-left: 65px;
        }
        
        .news-timeline .news-title {
            padding-right: 100px;
        }
    }

    @media (max-width: 480px) {
        .news-timeline::before {
            position: absolute;
            left: -25px;
        }
        
        .news-timeline .timeline-dot {
            position: absolute;
            left: -20px;
            width: 12px;
            height: 12px;
        }
        
        .news-timeline .news-entry,
        .news-timeline .section-header {
            margin-left: 50px;
        }
    }
</style>