/* Windows 11 "Working on updates" screen */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}
body {
	background: #0067c0;
	color: #fff;
	font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	user-select: none;
	-webkit-user-select: none;
}
body.pxIntroRejtve {
	cursor: none;	/* the real update screen shows no pointer */
}
.frissites {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #0067c0;
	text-align: center;
}
.frissitesKozep {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	padding: 0 24px;
	transform: translateY(-50%);
}
/* Windows boot/update spinner: six white dots chasing around a ring. The ring itself turns slowly (4s) while each dot
   makes two eased half-turns per cycle with a staggered delay, which gives the bunching-up and stretching-out look. */
.pottyok {
	position: relative;
	width: 40px;
	height: 40px;
	margin: 0 auto 38px;
	animation: pottyokForog 4s linear 1s infinite;
}
.potty::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	transform-origin: 20px 20px;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
.potty1::after { transform: rotate(0);      animation-name: potty1; animation-delay: .9s; }
.potty2::after { transform: rotate(20deg);  animation-name: potty2; animation-delay: .775s; }
.potty3::after { transform: rotate(40deg);  animation-name: potty3; animation-delay: .65s; }
.potty4::after { transform: rotate(60deg);  animation-name: potty4; animation-delay: .525s; }
.potty5::after { transform: rotate(80deg);  animation-name: potty5; animation-delay: .4s; }
.potty6::after { transform: rotate(100deg); animation-name: potty6; animation-delay: .275s; }
@keyframes pottyokForog { to { transform: rotate(360deg); } }
@keyframes potty1 { 0%, 20% { transform: rotate(0); }      40%, 60% { transform: rotate(180deg); } 80%, 100% { transform: rotate(360deg); } }
@keyframes potty2 { 0%, 20% { transform: rotate(20deg); }  40%, 60% { transform: rotate(200deg); } 80%, 100% { transform: rotate(380deg); } }
@keyframes potty3 { 0%, 20% { transform: rotate(40deg); }  40%, 60% { transform: rotate(220deg); } 80%, 100% { transform: rotate(400deg); } }
@keyframes potty4 { 0%, 20% { transform: rotate(60deg); }  40%, 60% { transform: rotate(240deg); } 80%, 100% { transform: rotate(420deg); } }
@keyframes potty5 { 0%, 20% { transform: rotate(80deg); }  40%, 60% { transform: rotate(260deg); } 80%, 100% { transform: rotate(440deg); } }
@keyframes potty6 { 0%, 20% { transform: rotate(100deg); } 40%, 60% { transform: rotate(280deg); } 80%, 100% { transform: rotate(460deg); } }
.sor {
	margin: 0;
	font-size: 22px;
	line-height: 1.55;
	font-weight: 400;
}
.alsoSor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 11%;
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 400;
}
@media (max-width: 600px) {
	.sor { font-size: 18px; }
	.alsoSor { font-size: 14px; }
	.pottyok { width: 34px; height: 34px; margin-bottom: 30px; }
	.potty::after { width: 4px; height: 4px; transform-origin: 17px 17px; }
}
@media (prefers-reduced-motion: reduce) {
	.pottyok, .potty::after { animation-duration: 8s; }
}