src/App.css

.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24;
}

@keyframes summary-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes summary-shimmer {
	0% {
		background-position: -220px 0;
	}
	100% {
		background-position: calc(220px + 100%) 0;
	}
}

.summary-panel {
	backdrop-filter: blur(2px);
}

.summary-spin {
	animation: summary-spin 1.2s linear infinite;
}

.summary-shimmer {
	background: linear-gradient(90deg, #e5e7eb 0px, #f8fafc 40px, #e5e7eb 80px);
	background-size: 220px 100%;
	animation: summary-shimmer 1.3s linear infinite;
}

@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

main section,
main header {
	animation: fade-in-up 0.45s ease-out both;
}

main section:nth-of-type(2) {
	animation-delay: 80ms;
}

main section:nth-of-type(3) {
	animation-delay: 160ms;
}

@media (max-width: 1023px) {
	main section,
	main header {
		animation-duration: 0.35s;
	}
}