/* A narrow event ticker gives the poster a different rhythm from the reveals. */
.playground-rhythm {
  height: 84px;
  max-width: 1600px;
  margin-inline: auto;
  overflow: hidden;
  overflow: clip;
  contain: paint;
  background: var(--ink);
  color: var(--lime);
  pointer-events: none;
}
.rhythm-track,
.rhythm-group,
.rhythm-phrase {
  display: flex;
  align-items: center;
  flex: none;
  height: 100%;
  width: max-content;
}
.rhythm-track {
  font: 400 clamp(36px, 4.3vw, 58px)/1 Anton, Impact, sans-serif;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.rhythm-phrase { gap: .48em; padding-right: .48em; }
.rhythm-mark { color: var(--paper); font-family: Arial, sans-serif; font-size: .78em; }
.playground-rhythm[data-rhythm-running="true"] .rhythm-track { will-change: transform; }

/* This ring owns its transform; the artwork above it has a separate entrance. */
.arts-orbit::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  left: 50%;
  top: -5px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 5px var(--lime);
}
.arts-orbit[data-rhythm-running="true"] { will-change: transform; }
@media (max-width: 600px) {
  .playground-rhythm { height: 60px; }
  .arts-orbit::before { width: 7px; height: 7px; top: -3.5px; margin-left: -3.5px; }
}