studio-viewer-count,
studio-viewer-count * { box-sizing: border-box; }

studio-viewer-count {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: var(--viewer-padding-block, 0px) var(--viewer-padding-inline, 0px);
  border: 1px solid var(--viewer-border, #fff);
  border-radius: var(--viewer-radius, 8px);
  background: var(--viewer-background, #fff);
  color: var(--viewer-ink, #34b7aa);
  font: 400 var(--viewer-font-size, 13px)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  text-align: left;
}

studio-viewer-count .studio-viewer__status {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e6ebdf;
}

studio-viewer-count .studio-viewer__status::before,
studio-viewer-count .studio-viewer__status::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--viewer-accent, #34b7aa);
  opacity: 0;
  pointer-events: none;
}

studio-viewer-count .studio-viewer__status::after {
  border: 1.5px solid var(--viewer-accent, #34b7aa);
  background: transparent;
}

studio-viewer-count .studio-viewer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--viewer-accent, #34b7aa);
}

studio-viewer-count.is-updating .studio-viewer__status::before {
  animation: studio-viewer-pulse var(--viewer-motion-duration, 1800ms) cubic-bezier(.2, .6, .35, 1) both;
}

studio-viewer-count.is-updating .studio-viewer__status::after {
  animation: studio-viewer-pulse var(--viewer-motion-duration, 1800ms) cubic-bezier(.2, .6, .35, 1) both;
  animation-delay: 100ms;
}

studio-viewer-count.is-updating .studio-viewer__dot {
  animation: studio-viewer-breathe var(--viewer-motion-duration, 1800ms) ease-in-out both;
}

studio-viewer-count .studio-viewer__copy { min-width: 0; overflow-wrap: anywhere; }
studio-viewer-count .studio-viewer__count { font-weight: 600; font-variant-numeric: tabular-nums; }
studio-viewer-count .studio-viewer__label { color: var(--viewer-muted, #000); }
studio-viewer-count .studio-viewer__now {
  margin-left: auto;
  padding-left: 12px;
  color: var(--viewer-accent, #34b7aa);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  overflow-wrap: anywhere;
  max-width: 40%;
}
studio-viewer-count .studio-viewer__now:empty { display: none; }

@keyframes studio-viewer-pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: .6; }
  80%, 100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}
@keyframes studio-viewer-breathe {
  0%, 100% { transform: scale(.85); }
  45% { transform: scale(1.15); }
}
@media (max-width: 380px) {
  studio-viewer-count { gap: 9px; }
  studio-viewer-count .studio-viewer__now { padding-left: 4px; font-size: 9px; letter-spacing: .8px; }
}
@media (prefers-reduced-motion: reduce) {
  studio-viewer-count.is-updating .studio-viewer__status::before,
  studio-viewer-count.is-updating .studio-viewer__status::after,
  studio-viewer-count.is-updating .studio-viewer__dot { animation: none; }
}