.compelstream-live-banner[hidden] { display: none !important; }
.compelstream-live-banner {
  background: #d63638;
  color: #fff;
  font: 400 15px/1.5 system-ui, sans-serif;
}
.compelstream-live-banner .compelstream-live-banner__link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 16px max(20px, calc((100% - 1200px) / 2));
  color: #fff;
  text-decoration: none;
}
.compelstream-live-banner__link + .compelstream-live-banner__link { border-top: 1px solid #ffffff40; }
.compelstream-live-banner .compelstream-live-banner__link:hover { background: #b32b2d; color: #fff; }
.compelstream-live-banner__link:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.compelstream-live-banner__live { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: .08em; flex-shrink: 0; }
.compelstream-live-banner__live::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  animation: compelstream-live-banner-blink 2s ease-in-out infinite;
}
.compelstream-live-banner__content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.compelstream-live-banner__content strong { display: block; color: inherit; font-size: 17px; }
.compelstream-live-banner__join { font-weight: 600; text-decoration: none; }
@keyframes compelstream-live-banner-blink {
  0%, 35% { opacity: 1; }
  50%, 60% { opacity: 0.1; }
  85%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .compelstream-live-banner__live::before { animation: none; }
}
@media (max-width: 640px) {
  .compelstream-live-banner .compelstream-live-banner__link { flex-wrap: wrap; gap: 10px 16px; padding: 14px 18px; }
  .compelstream-live-banner__content { flex-basis: calc(100% - 100px); }
  .compelstream-live-banner__join { width: 100%; }
}