body { background:#020617; }
.stage {
  position:relative; width:min(460px,100%); margin:0 auto;
  padding:24px 16px 80px; display:flex; flex-direction:column; gap:18px;
}
.rail {
  position:absolute; left:50%; top:24px; bottom:40px; width:3px; transform:translateX(-50%);
  background:linear-gradient(180deg,#fde047,#60a5fa,#818cf8); opacity:.35; border-radius:999px;
}
.item {
  display:flex; align-items:center; gap:12px; width:46%;
  padding:10px 12px; border-radius:14px;
  background:rgba(15,23,42,.82); border:1px solid rgba(96,165,250,.28);
}
.item.left { align-self:flex-start; margin-left:2%; }
.item.right { align-self:flex-end; margin-right:2%; flex-direction:row-reverse; text-align:right; }
.item.root { border-color:rgba(250,204,21,.45); }
.item span { width:42px; height:42px; border-radius:999px; display:grid; place-items:center; font-size:20px; background:rgba(30,58,138,.55); flex:0 0 auto; }
.item strong { display:block; font-size:12px; }
.item small { color:#94a3b8; font-size:10px; }