/* Counter widget for sites and OBS (Roblox groups, Discord bots, SoundCloud, Deezer, GitHub). No ads, no fonts to load. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { display: flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; -webkit-font-smoothing: antialiased; }
main { width: 100%; height: 100%; display: flex; }
.w { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; padding: 14px 18px 14px 22px; overflow: hidden; border-radius: 16px; background: #fff; color: #121214; text-decoration: none; }
.w::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--ac, #3B3B41); }
.w-av { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 14px; background: rgba(0, 0, 0, .06); color: #3B3B41; font-size: 24px; font-weight: 750; }
.w-av::before { content: attr(data-l); }
.w-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-round .w-av { border-radius: 50%; }
.w-tx { display: grid; min-width: 0; }
.w-name { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.w-count { font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .6s; }
.w-unit { color: #5d5d64; font-size: 12px; }
.w-msg { margin: auto; padding: 12px; color: #5d5d64; font-size: 13px; text-align: center; }
.w-count.is-up { color: #0B7A45; }
.w-count.is-down { color: #B42318; }

.p-roblox { --ac: #1F5BD8; --ac-d: #7EA6FF; }
.p-discord { --ac: #4E5AE8; --ac-d: #949CF7; }
.p-music { --ac: #C2410C; --ac-d: #FF8F57; }
.p-github { --ac: #1A7F37; --ac-d: #3FB950; }

.t-dark .w { background: #161618; color: #F3F3F1; }
.t-dark .w::before { background: var(--ac-d, #CFCFD4); }
.t-dark .w-av { background: rgba(255, 255, 255, .08); color: #CFCFD4; }
.t-dark .w-unit, .t-dark .w-msg { color: #a4a4ac; }
.t-transparent .w { background: transparent; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .65); }
.t-transparent .w::before { background: var(--ac-d, #CFCFD4); }
.t-transparent .w-av { background: rgba(0, 0, 0, .25); color: #fff; }
.t-transparent .w-unit, .t-transparent .w-msg { color: #fff; }
.t-dark .w-count.is-up, .t-transparent .w-count.is-up { color: #46D08A; }
.t-dark .w-count.is-down, .t-transparent .w-count.is-down { color: #FF8A80; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 300px) { .w-av { display: none; } .w-count { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .w-count { transition: none; } }