/* Snapchat subscriber count and Spotlight views widgets (embed and OBS browser source). 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; }
img { display: block; }
.w { display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; padding: 14px 18px; border-radius: 16px; background: #fff; color: #121214; text-decoration: none; }
.w-av { position: relative; flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #ededea; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #FFFC00; }
.w-av::before { content: attr(data-l); color: #62626a; font-weight: 700; font-size: 26px; }
.w-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-tx { display: grid; min-width: 0; }
.w-name { overflow: hidden; font-size: 15px; 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; }
.w-unit { color: #5d5d64; font-size: 12px; }
.w-msg { margin: auto; padding: 12px; color: #5d5d64; font-size: 13px; text-align: center; }

.t-dark .w { background: #161618; color: #F3F3F1; }
.t-dark .w-av { background: #232327; box-shadow: 0 0 0 3px #161618, 0 0 0 6px #FFFC00; }
.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-av { box-shadow: 0 0 0 3px #FFFC00; }
.t-transparent .w-unit, .t-transparent .w-msg { color: #fff; }

.s-s .w { gap: 10px; padding: 10px 12px; }
.s-s .w-av { width: 50px; height: 50px; }
.s-s .w-av::before { font-size: 19px; }
.s-s .w-name { font-size: 12.5px; }
.s-s .w-count { font-size: 24px; }
.s-s .w-unit { font-size: 10.5px; }
.s-l .w { gap: 18px; padding: 18px 24px; }
.s-l .w-av { width: 100px; height: 100px; }
.s-l .w-av::before { font-size: 36px; }
.s-l .w-name { font-size: 19px; }
.s-l .w-count { font-size: 46px; }
.s-l .w-unit { font-size: 14px; }
.no-av .w-av { display: none; }
.no-name .w-name { display: none; }
.w-count.is-new { color: #0B7A45; }
.t-dark .w-count.is-new, .t-transparent .w-count.is-new { color: #46D08A; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Spotlight views: a 9:16 thumbnail instead of the round picture */
.w-spot .w-thumb { width: 54px; height: 96px; border-radius: 10px; box-shadow: 0 0 0 3px #FFFC00; }
.w-spot .w-thumb::before { content: ""; }
.s-s .w-spot .w-thumb { width: 36px; height: 64px; }
.s-l .w-spot .w-thumb { width: 70px; height: 124px; }
.t-dark .w-spot .w-thumb, .t-transparent .w-spot .w-thumb { box-shadow: 0 0 0 3px #FFFC00; }
[dir="rtl"] .w-count { direction: ltr; unicode-bidi: isolate; }