:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
body { font-family: "Arial Black", Inter, ui-sans-serif, system-ui, sans-serif; }
.overlay { width: 100%; height: 100%; display: flex; align-items: center; padding: 24px 28px; }
.counter { display: flex; align-items: center; gap: 18px; }
.platforms { display: flex; align-items: center; gap: 10px; }
.brand { width: 42px; height: 42px; display: grid; place-items: center; }
.brand svg { width: 38px; height: 38px; overflow: visible; filter: drop-shadow(0 3px 2px #000d) drop-shadow(0 0 1px #000); }
.brand path { fill: currentColor; }
.twitch { color: #9146ff; }
.youtube { color: #ff0000; }
.kick { color: #53fc18; }
.count { position: relative; min-width: 1.25ch; height: .88em; overflow: hidden; color: #fff; font-size: 72px; line-height: .88; font-weight: 950; letter-spacing: -.06em; font-variant-numeric: tabular-nums; -webkit-text-stroke: 1.5px #101010; paint-order: stroke fill; text-shadow: 0 4px 3px #000d, 0 0 2px #000; }
.count span { display: block; transform: translateY(0); opacity: 1; }
.count .leaving { position: absolute; inset: 0 auto auto 0; animation: leave .09s ease-in forwards; }
.count .entering { animation: enter .09s cubic-bezier(.2, .8, .2, 1) forwards; }
.count.down .leaving { animation-name: leave-down; }
.count.down .entering { animation-name: enter-down; }
@keyframes leave { to { transform: translateY(-92%); opacity: .15; } }
@keyframes enter { from { transform: translateY(92%); opacity: .15; } to { transform: translateY(0); opacity: 1; } }
@keyframes leave-down { to { transform: translateY(92%); opacity: .15; } }
@keyframes enter-down { from { transform: translateY(-92%); opacity: .15; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 380px) { .overlay { padding-inline: 16px; } .counter { gap: 12px; } .platforms { gap: 6px; } .brand { width: 34px; height: 34px; } .brand svg { width: 31px; height: 31px; } .count { font-size: 60px; } }
@media (prefers-reduced-motion: reduce) { .count .leaving, .count .entering { animation: none; } }