.scd-tl {
  position: relative; width: 240px; padding: 16px 16px 16px 32px;
  margin: 0 auto;
  background: #0c4a8a;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
}
.scd-tl::before {
  content: ''; position: absolute; left: 16px; top: 22px; bottom: 22px;
  width: 2px; background: rgba(255,255,255,0.5);
}
.scd-tl__c {
  position: relative;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.25);
  color: #f0f5fa;
  padding: 8px 12px; margin-bottom: 6px;
  border-radius: 2px;
  display: flex; gap: 12px; align-items: center;
  transform: translateX(calc(var(--i) * 4px));
}
.scd-tl__c:last-child { margin-bottom: 0; }
.scd-tl__c::before {
  content: ''; position: absolute; left: -22px; top: 50%;
  width: 10px; height: 10px;
  background: #f0f5fa; transform: translateY(-50%);
  box-shadow: 0 0 0 2px #0c4a8a, 0 0 0 4px rgba(240,245,250,0.5);
}
.scd-tl__c time { font: 700 10px ui-monospace, monospace; opacity: 0.7; letter-spacing: 0.1em; }
.scd-tl__c b    { font: 700 12px ui-monospace, monospace; letter-spacing: 0.04em; }