.entrance-visitor-counter,
.entrance-visitor-counter *,
.entrance-visitor-counter *::before,
.entrance-visitor-counter *::after {
	box-sizing: border-box;
}

.entrance-visitor-counter {
	--counter-width: min(440px, calc(100vw - 68px));
	position: fixed;
	z-index: 9997;
	left: 10px;
	bottom: 8px;
	width: var(--counter-width);
	transition: transform .28s cubic-bezier(.2,.75,.3,1);
}

.entrance-visitor-counter.is-hidden {
	transform: translateX(calc(-100% + 22px));
}

.entrance-visitor-counter__toggle {
	position: absolute;
	z-index: 10;
	right: -38px;
	bottom: 11%;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 2px solid #8deaff;
	background: #061a3ee8;
	box-shadow: 3px 3px 0 #020a18a8;
	color: #f2fdff;
	font: 900 20px/1 sans-serif;
	cursor: pointer;
}

.entrance-visitor-counter__toggle:is(:hover,:focus-visible) {
	background: #12679e;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.entrance-visitor-counter__board {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	filter: drop-shadow(0 8px 8px #06152f78);
	pointer-events: none;
}

.entrance-visitor-counter__shell {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.entrance-visitor-counter__display {
	position: absolute;
	z-index: 5;
	display: flex;
	align-items: stretch;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(180deg, #06152f, #0a3470 49%, #061a3d 52%, #092b5c);
	box-shadow: inset 0 0 6px #000c, 0 0 5px #39cfff4d;
}

.entrance-visitor-counter__display.is-total {
	left: 26.45%;
	top: 50.55%;
	gap: .55%;
	width: 47.35%;
	height: 16.35%;
	padding: .55% .45%;
	border: 1px solid #03122c;
	border-radius: 1.5%;
}

.entrance-visitor-counter__display.is-today,
.entrance-visitor-counter__display.is-yesterday {
	top: 77.15%;
	gap: 1.2%;
	width: 10.75%;
	height: 6.35%;
	padding: .25% .22%;
	border: 1px solid #020c1c;
	border-radius: 5%;
}

.entrance-visitor-counter__display.is-today {
	left: 32.65%;
}

.entrance-visitor-counter__display.is-yesterday {
	left: 57.05%;
}

.entrance-visitor-counter__digit {
	display: grid;
	place-items: center;
	min-width: 0;
	flex: 1 1 0;
	border: 1px solid #4ea5d6a8;
	border-radius: 4%;
	background: linear-gradient(180deg, #092653, #0b427e 48%, #071f49 52%, #092e61);
	box-shadow: inset 0 0 8px #010817d1, 0 0 4px #27cfff2e;
	overflow: hidden;
}

.entrance-visitor-counter__digit b {
	display: block;
	color: #f8f0df;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-shadow: 0 1px 0 #fff, 0 0 8px #5bdcff8a;
	transform: translateY(0);
}

.entrance-visitor-counter__display.is-today .entrance-visitor-counter__digit b,
.entrance-visitor-counter__display.is-yesterday .entrance-visitor-counter__digit b {
	font-size: clamp(10px, 1.2vw, 15px);
	text-shadow: 0 0 5px #68ddff7a;
}

.entrance-visitor-counter__digit.is-changing b {
	animation: entrance-counter-digit-change .34s cubic-bezier(.55,0,.45,1) both;
}

.entrance-visitor-counter.is-counted .entrance-visitor-counter__display.is-total,
.entrance-visitor-counter.is-counted .entrance-visitor-counter__display.is-today {
	animation: entrance-counter-display-pulse .72s ease both;
}

.entrance-visitor-counter__lights {
	position: absolute;
	z-index: 4;
	inset: 0;
}

.entrance-visitor-counter__lights i {
	position: absolute;
	left: var(--light-x);
	top: var(--light-y);
	width: 2.05%;
	aspect-ratio: 1;
	border: 1px solid #e9fdff;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 18%, #87efff 32%, #159ee0 58%, #0a3567 72%);
	box-shadow: 0 0 4px #fff, 0 0 9px #44dcff, 0 0 16px #077bdc;
	opacity: .18;
	transform: translate(-50%, -50%) scale(.68);
	animation: entrance-counter-light var(--light-duration) var(--light-delay) steps(2,end) infinite;
}

.entrance-visitor-counter__lights i.is-gold {
	border-color: #fff6c9;
	background: radial-gradient(circle, #fff 0 18%, #ffe77a 32%, #efb82d 58%, #725114 72%);
	box-shadow: 0 0 4px #fff7c2, 0 0 10px #ffd950, 0 0 17px #d9951c;
}

.entrance-visitor-counter__lights i.is-white {
	background: radial-gradient(circle, #fff 0 28%, #e7fbff 42%, #72c9ec 66%, #275a84 76%);
	box-shadow: 0 0 5px #fff, 0 0 11px #dffaff, 0 0 17px #60c9f5;
}

.entrance-visitor-counter.is-counted .entrance-visitor-counter__lights i {
	animation: entrance-counter-light-burst .72s ease both;
}

.entrance-visitor-counter__gears {
	position: absolute;
	z-index: 3;
	inset: 0;
	overflow: hidden;
}

.entrance-visitor-counter__gears > span {
	position: absolute;
	display: block;
	aspect-ratio: 1;
	border: clamp(3px, .6vw, 5px) dashed currentColor;
	border-radius: 50%;
	color: #dff7ff;
	filter: drop-shadow(0 1px 1px #03112a);
	opacity: .45;
	animation: entrance-counter-gear 19s linear infinite;
}

.entrance-visitor-counter__gears > span::before,
.entrance-visitor-counter__gears > span::after {
	content: "";
	position: absolute;
	border-radius: 50%;
}

.entrance-visitor-counter__gears > span::before {
	inset: 22%;
	border: 2px solid currentColor;
	box-shadow: 0 0 0 2px #0b4a7a99 inset;
}

.entrance-visitor-counter__gears > span::after {
	inset: 43%;
	background: #f6fcff;
	box-shadow: 0 0 6px #53dcff;
}

.entrance-visitor-counter__gears .is-left {
	left: 12.55%;
	top: 42.1%;
	width: 12.2%;
}

.entrance-visitor-counter__gears .is-right {
	right: 13.9%;
	top: 49.0%;
	width: 11.3%;
	color: #8bdcff;
	animation-direction: reverse;
	animation-duration: 16s;
}

.entrance-visitor-counter__gears .is-small {
	left: 23.2%;
	top: 42.0%;
	width: 5.2%;
	color: #31bdf0;
	animation-duration: 12s;
}

.entrance-visitor-counter__cat-blink {
	position: absolute;
	z-index: 6;
	left: 46.15%;
	top: 16.6%;
	display: flex;
	justify-content: space-between;
	width: 7.1%;
	height: 3.5%;
}

.entrance-visitor-counter__cat-blink i {
	display: block;
	width: 31%;
	height: 74%;
	border-radius: 50%;
	background: #07122a;
	box-shadow: 0 0 2px #07122a;
	transform: scaleY(0);
	transform-origin: center;
	animation: entrance-counter-cat-blink 11s ease-in-out infinite;
}

.entrance-visitor-counter__summary {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@keyframes entrance-counter-digit-change {
	0% { transform: translateY(0); opacity: 1; }
	46% { transform: translateY(-115%); opacity: .12; }
	54% { transform: translateY(115%); opacity: .12; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes entrance-counter-display-pulse {
	0%,100% { filter: brightness(1); }
	35% { filter: brightness(1.42); }
}

@keyframes entrance-counter-light {
	0%,15%,66%,100% { opacity: .16; transform: translate(-50%,-50%) scale(.68); }
	16%,25% { opacity: .88; transform: translate(-50%,-50%) scale(1); }
}

@keyframes entrance-counter-light-burst {
	0%,100% { opacity: .2; transform: translate(-50%,-50%) scale(.68); }
	34%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1.24); }
}

@keyframes entrance-counter-gear {
	to { transform: rotate(360deg); }
}

@keyframes entrance-counter-cat-blink {
	0%,92%,94%,96%,98%,100% { transform: scaleY(0); }
	93%,97% { transform: scaleY(1); }
}

@media (max-width: 700px) {
	.entrance-visitor-counter {
		--counter-width: min(300px, calc(100vw - 48px));
		left: 5px;
		bottom: 5px;
	}

	.entrance-visitor-counter.is-hidden {
		transform: translateX(calc(-100% + 16px));
	}

	.entrance-visitor-counter__toggle {
		right: -33px;
		width: 33px;
		height: 33px;
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.entrance-visitor-counter,
	.entrance-visitor-counter *,
	.entrance-visitor-counter *::before,
	.entrance-visitor-counter *::after {
		animation: none !important;
		transition: none !important;
	}

	.entrance-visitor-counter__lights i {
		opacity: .55;
		transform: translate(-50%,-50%);
	}
}