<div class="tl19-wrap">
  <div class="tl19-track">
    <div class="tl19-item" data-v="v3.2">
      <div class="tl19-ver">v3.2.0</div>
      <div class="tl19-date">14 May 2026</div>
      <div class="tl19-headline">Streaming response latency reduced by 40%</div>
      <span class="tl19-tag tl19-tag-perf">Perf</span>
    </div>
    <div class="tl19-item" data-v="v3.1">
      <div class="tl19-ver">v3.1.4</div>
      <div class="tl19-date">02 May 2026</div>
      <div class="tl19-headline">Fixed race condition in auth token refresh</div>
      <span class="tl19-tag tl19-tag-fix">Fix</span>
    </div>
    <div class="tl19-item" data-v="v3.0">
      <div class="tl19-ver">v3.0.0</div>
      <div class="tl19-date">18 Apr 2026</div>
      <div class="tl19-headline">New plugin architecture — breaking API changes</div>
      <span class="tl19-tag tl19-tag-break">Breaking</span>
    </div>
    <div class="tl19-item" data-v="v2.9">
      <div class="tl19-ver">v2.9.1</div>
      <div class="tl19-date">01 Apr 2026</div>
      <div class="tl19-headline">Dark mode system preference detection</div>
      <span class="tl19-tag tl19-tag-feat">Feature</span>
    </div>
    <div class="tl19-item" data-v="v2.8">
      <div class="tl19-ver">v2.8.0</div>
      <div class="tl19-date">12 Mar 2026</div>
      <div class="tl19-headline">Keyboard shortcut manager added</div>
      <span class="tl19-tag tl19-tag-feat">Feature</span>
    </div>
    <div class="tl19-item" data-v="v2.7">
      <div class="tl19-ver">v2.7.2</div>
      <div class="tl19-date">28 Feb 2026</div>
      <div class="tl19-headline">Memory leak in observer pattern patched</div>
      <span class="tl19-tag tl19-tag-fix">Fix</span>
    </div>
  </div>
  <div class="tl19-hint">← scroll →</div>
</div>

.tl19-wrap {
  background: #111;
  border: 1px solid #222;
  border-radius: 2px;
  overflow: hidden;
  padding: 2rem 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl19-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 2rem;
  scroll-snap-type: x mandatory;
}
.tl19-track::-webkit-scrollbar { display: none; }
.tl19-item {
  flex: 0 0 250px;
  padding: 1.5rem 2rem 1.5rem 1.5rem;
  border-right: 1px solid #2a2a2a;
  margin-right: 1rem;
  scroll-snap-align: start;
  position: relative;
}
.tl19-item::before {
  content: attr(data-v);
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 3.5rem;
  color: #1e1e1e;
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
  line-height: 1;
  pointer-events: none;
}
.tl19-ver {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: #c8ff00;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.tl19-date {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: #444;
  margin-bottom: 0.8rem;
}
.tl19-headline {
  font-family: 'Syne', 'Inter Tight', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.6rem;
  color: #e8e5e0;
}
.tl19-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  border-radius: 2px;
  text-transform: uppercase;
}
.tl19-tag-feat  { background: #1a2e00; color: #c8ff00; }
.tl19-tag-fix   { background: #2e0000; color: #ff6b6b; }
.tl19-tag-break { background: #2e1a00; color: #ffaa00; }
.tl19-tag-perf  { background: #00182e; color: #00b4d8; }
.tl19-hint {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: #444;
  text-align: right;
  padding: 0.5rem 1.5rem 0;
  letter-spacing: 0.1em;
}