:root{
  --jbst-bg:#111827;
  --jbst-color:#ffffff;
  --jbst-font-size:18px;
  --jbst-font-weight:700;
  --jbst-pad-y:10px;
  --jbst-pad-x:14px;
  --jbst-radius:12px;
  --jbst-border-color: rgba(255,255,255,.15);
  --jbst-border-w: 1px;
  --jbst-gap: 60px;
  --jbst-max-w: 100%;
  --jbst-duration: 10s;
}

.jbst-wrap{
  width: 100%;
  max-width: var(--jbst-max-w);
  margin: 10px auto;
  background: var(--jbst-bg);
  color: var(--jbst-color);
  border: var(--jbst-border-w) solid var(--jbst-border-color);
  border-radius: var(--jbst-radius);
  padding: var(--jbst-pad-y) var(--jbst-pad-x);
  box-sizing: border-box;
}

.jbst-link{
  color: inherit !important;
  text-decoration: none !important;
  display:block;
}

.jbst-viewport{
  overflow:hidden;
}

.jbst-track{
  display:flex;
  align-items:center;
  gap: var(--jbst-gap);
  width: max-content;
  will-change: transform;
  animation-duration: var(--jbst-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.jbst-item{
  font-size: var(--jbst-font-size);
  font-weight: var(--jbst-font-weight);
  color: var(--jbst-color);
  white-space: nowrap;
}

.jbst-align-left .jbst-item{ text-align:left; }
.jbst-align-center .jbst-item{ text-align:center; }
.jbst-align-right .jbst-item{ text-align:right; }

.jbst-dir-left .jbst-track{ animation-name: jbst_marquee_left; }
.jbst-dir-right .jbst-track{ animation-name: jbst_marquee_right; }

@keyframes jbst_marquee_left{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * (var(--jbst-loop-w, 500px) + var(--jbst-gap)))); }
}
@keyframes jbst_marquee_right{
  from { transform: translateX(calc(-1 * (var(--jbst-loop-w, 500px) + var(--jbst-gap)))); }
  to   { transform: translateX(0); }
}

/* Pause on hover/focus */
.jbst-pause:hover .jbst-track,
.jbst-pause:focus-within .jbst-track{
  animation-play-state: paused;
}