.sf-history-widget {
  --bg: rgba(0,0,0,0.65);
  --fg: #fff;
  --fg-2:#e6e6e6; --fg-3:#cfcfcf; --fg-4:#b7b7b7;
  --sep: rgba(255,255,255,0.15);
  background: var(--bg);
  color: var(--fg);
  /*padding: 14px 16px 18px;*/
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  font-family: system-ui, sans-serif;
}

.sf-history-widget .history-viewport { overflow: hidden; width: 100%; }
.sf-history-widget .tape { display: inline-flex; align-items: stretch; will-change: transform; }
.sf-history-widget .segment { display: inline-flex; align-items: stretch; }

.sf-history-widget .history-item {
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  background: transparent; border-radius: 0; border-right: 1px solid var(--sep);
  padding: 6px 16px; white-space: nowrap;
}
.sf-history-widget .title { font-size: 15px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.sf-history-widget .sub { font-size: 12px; color: var(--fg-3); opacity: .9; }
.sf-history-widget .artist { color: var(--fg-2); }
.sf-history-widget .dot { opacity: .7; }
.sf-history-widget .time { color: var(--fg-4); }