@layer bs-component {
	:where(.ui-number-card) {
		aspect-ratio: 1/1;
		background-color: var(--ButtonFace);
		padding-block-end: 2ch;
		padding-inline: 2ch; 
		text-align: center;
		& p { margin: 0; }
		& ui-number {
			font-size: 500%;
			font-variant-numeric: tabular-nums;
			font-weight: 900;
			&::part(number) {
				--playstate: var(--scroll-trigger, running);
			}
			&::part(suffix) {
				font-size: 75%;
			}
		}
	}
	@keyframes trigger {
		to { --scroll-trigger: running; }
	}
	@supports (animation-timeline: view()) {
		:where(.ui-number-card) {
			--scroll-trigger: paused;
			animation: trigger linear;
			animation-range: cover;
			animation-timeline: view();
		}
	}
}