:root {
  color-scheme: dark;
  --counter-color: #fff;
  --counter-size: 64px;
}

html,
body {
  margin: 0;
  width: max-content;
  min-width: 0;
  overflow: hidden;
  background: transparent !important;
}

body {
  font-family: "Nunito", system-ui, sans-serif;
}

#viewer-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  color: var(--counter-color);
  font-size: var(--counter-size);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgb(0 0 0 / 75%);
}

#platform-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.09em;
  color: #fff;
}

.platform-icon {
  display: block;
  width: 0.63em;
  height: 0.63em;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 65%));
}

.twitch-icon {
  color: #9146ff;
}

.youtube-icon {
  color: #ff0033;
}

#viewer-count {
  display: inline-block;
  min-width: 1ch;
  transform-origin: center;
}

#viewer-count.is-changing {
  animation: count-change var(--animation-duration, 500ms) ease-out;
}

@keyframes count-change {
  0% { opacity: 0.5; transform: translateY(0.12em) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #viewer-count.is-changing { animation: none; }
}