#timeline { position: relative; padding-left: 28px; }
#timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--c-border, #dee2e6); }
.dark #timeline::before { background: rgba(255,255,255,0.15); }

.month { margin-bottom: 28px; }
.month-title { font-size: 14px; font-weight: 600; color: var(--text-secondary, #868e96); margin-bottom: 8px; position: relative; }
.month-title::before { content: ''; position: absolute; left: -24px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #333; border: 2px solid var(--c-border, #dee2e6); }
.dark .month-title::before { background: #666; border-color: rgba(255,255,255,0.15); }

.site-item { padding: 10px 0; border-bottom: 1px solid var(--c-border, #dee2e6); }
.site-item:last-child { border-bottom: none; }
.dark .site-item { border-color: rgba(255,255,255,0.08); }
.site-item a { font-size: 15px; font-weight: 500; text-decoration: none; color: inherit; }
.site-item a:hover { text-decoration: underline; }
.site-item .site-meta { font-size: 12px; color: var(--text-secondary, #868e96); margin-top: 2px; }
.site-item .site-remark { font-size: 13px; color: var(--text-secondary, #868e96); margin-top: 4px; line-height: 1.5; }
.site-item .site-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.site-item .site-tags span { font-size: 11px; padding: 1px 8px; border: 1px solid var(--c-border, #dee2e6); border-radius: 10px; color: var(--text-secondary, #868e96); }
.dark .site-item .site-tags span { border-color: rgba(255,255,255,0.15); }