/* Timeline styles */
.timeline-filters{display:flex;gap:8px;margin-bottom:24px}
.timeline-filter{padding:6px 16px;border-radius:20px;font-size:13px;font-weight:500;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all 0.2s}
.timeline-filter.active,.timeline-filter:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}

.timeline{position:relative;padding-left:32px}
.timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--timeline-line)}

/* Date group header */
.timeline-date-header{position:relative;margin:32px 0 16px;display:inline-block;padding:4px 14px;font-size:13px;font-weight:600;color:var(--accent);background:var(--bg);border:1px solid var(--accent);border-radius:20px;margin-left:-20px;letter-spacing:0.04em}
.timeline-date-header:first-child{margin-top:0}

/* Node base */
.timeline-node{position:relative;margin-bottom:28px;opacity:0;transform:translateY(16px);transition:opacity 0.4s ease,transform 0.4s ease}
.timeline-node.visible{opacity:1;transform:translateY(0)}

/* Image node dot */
.timeline-node::before{content:'';position:absolute;left:-28px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--border);border:2px solid var(--timeline-line)}
.timeline-node.has-image::before{background:var(--accent);border-color:var(--accent)}

/* Milestone diamond */
.timeline-node.milestone::before{border-radius:2px;transform:rotate(45deg);background:var(--timeline-line);border-color:var(--muted)}

.timeline-date{color:var(--muted);font-size:12px;margin-bottom:4px}
.timeline-title{font-size:16px;font-weight:600;margin-bottom:4px}
.timeline-desc{color:var(--muted);font-size:14px;line-height:1.6}
.timeline-commit{font-family:monospace;font-size:12px;color:var(--muted);margin-left:8px}

.timeline-thumb{width:280px;aspect-ratio:1216/832;object-fit:cover;border-radius:8px;margin-top:8px;cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease;border:1px solid rgba(255,255,255,0.06);box-shadow:0 2px 12px rgba(0,0,0,0.4)}
.timeline-thumb:hover{transform:scale(1.03);box-shadow:0 4px 20px rgba(0,0,0,0.5),0 0 20px rgba(219,97,162,0.1)}

@media(max-width:768px){
  .timeline-thumb{width:100%;max-width:400px}
}
@media(max-width:480px){
  .timeline{padding-left:24px}
  .timeline-date-header{margin-left:-14px;font-size:12px}
}