html.ddl-loading,
html.ddl-loading body {
	overflow: hidden !important;
}

.ddl-preloader,
.ddl-preloader *,
.ddl-preloader *::before,
.ddl-preloader *::after {
	box-sizing: border-box;
}

.ddl-preloader {
	--ddl-background: #000;
	--ddl-accent: #be002a;
	--ddl-duration: 8s;
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	display: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 24px;
	overflow: hidden;
	background: var(--ddl-background);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.55s ease, visibility 0.55s ease;
}

html.ddl-first-load .ddl-preloader {
	display: flex;
}

.ddl-preloader.ddl-is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ddl-stage {
	width: min(581px, 92vw);
	margin: 0 auto;
	transform: translateY(-2vh);
}

.ddl-line {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.ddl-mask-fire-black {
	fill: var(--ddl-background);
}

.ddl-progress-trail,
.ddl-designer-body,
.ddl-designer-head,
.ddl-designer-arm,
.ddl-designer-pen {
	fill: #fff;
}

.ddl-progress-fill,
.ddl-death,
.ddl-death-arm,
.ddl-death-tool,
.ddl-impact {
	fill: var(--ddl-accent);
}

.ddl-progress-fill {
	will-change: transform;
}

.ddl-death-group {
	transform: translateX(0);
	animation: ddl-walk var(--ddl-duration) linear 1 forwards;
}

.ddl-death-arm {
	transform-origin: -60px 74px;
	animation: ddl-move-arm var(--ddl-duration) ease-in-out 1 forwards;
}

.ddl-death-tool {
	transform-origin: -48px center;
	animation: ddl-move-tool var(--ddl-duration) ease-in-out 1 forwards;
}

.ddl-worker-group {
	transform-origin: 516px 100px;
	animation: ddl-worker-fall var(--ddl-duration) ease-in 1 forwards;
}

.ddl-designer-arm-group {
	transform: translate(0, 0) rotate(0deg) scale(1, 1);
	transform-origin: 90% top;
	animation: ddl-write 1.5s ease infinite;
}

.ddl-impact {
	fill: none;
	stroke: var(--ddl-accent);
	stroke-width: 3;
	stroke-linecap: round;
	opacity: 0;
	transform-origin: 520px 56px;
	animation: ddl-impact var(--ddl-duration) ease-out 1 forwards;
}

.ddl-deadline-days {
	position: relative;
	width: 130px;
	height: 24px;
	margin: 2px auto 0;
	color: #fff;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-align: center;
	white-space: nowrap;
}

.ddl-text-layer {
	position: absolute;
	inset-block: 0;
	overflow: hidden;
}

.ddl-text-inner {
	position: absolute;
	top: 0;
	width: 130px;
}

.ddl-text-accent {
	left: 0;
	z-index: 2;
	width: 0;
	color: var(--ddl-accent);
	background: var(--ddl-background);
	animation: ddl-text-accent var(--ddl-duration) linear 1 forwards;
}

.ddl-text-accent .ddl-text-inner {
	left: 0;
}

.ddl-text-white {
	right: 0;
	width: 100%;
}

.ddl-text-white .ddl-text-inner {
	right: 0;
}

.ddl-red-flame {
	fill: #b71342;
	opacity: 0;
	transform-origin: center bottom;
	animation: ddl-show-flames var(--ddl-duration) ease 1 forwards, ddl-red-flame 120ms ease infinite;
}

.ddl-yellow-flame {
	fill: #f7b523;
	opacity: 0;
	transform-origin: center bottom;
	animation: ddl-show-flames var(--ddl-duration) ease 1 forwards, ddl-yellow-flame 120ms ease infinite;
}

.ddl-white-flame {
	fill: #fff;
	opacity: 0;
	transform-origin: center bottom;
	animation: ddl-show-flames var(--ddl-duration) ease 1 forwards, ddl-red-flame 100ms ease infinite;
}

@keyframes ddl-walk {
	0%, 6% { transform: translateX(0); }
	14% { transform: translateX(80px); }
	28% { transform: translateX(160px); }
	42% { transform: translateX(240px); }
	56% { transform: translateX(320px); }
	68% { transform: translateX(390px); }
	76% { transform: translateX(450px); }
	82%, 100% { transform: translateX(520px); }
}

@keyframes ddl-move-arm {
	0%, 76% { transform: rotate(0); }
	81% { transform: rotate(-12deg); }
	86% { transform: rotate(42deg); }
	91% { transform: rotate(28deg); }
	100% { transform: rotate(0); }
}

@keyframes ddl-move-tool {
	0%, 76% { transform: rotate(0); }
	81% { transform: rotate(-16deg); }
	86% { transform: rotate(55deg); }
	91% { transform: rotate(38deg); }
	100% { transform: rotate(0); }
}

@keyframes ddl-worker-fall {
	0%, 84% {
		opacity: 1;
		transform: translate(0, 0) rotate(0);
	}
	87% {
		opacity: 1;
		transform: translate(4px, 2px) rotate(12deg);
	}
	93% {
		opacity: 0.9;
		transform: translate(14px, 24px) rotate(58deg);
	}
	100% {
		opacity: 0.15;
		transform: translate(20px, 44px) rotate(82deg);
	}
}

@keyframes ddl-impact {
	0%, 83% {
		opacity: 0;
		transform: scale(0.35);
	}
	86% {
		opacity: 1;
		transform: scale(1);
	}
	92%, 100% {
		opacity: 0;
		transform: scale(1.45);
	}
}

@keyframes ddl-write {
	0%, 32%, 65%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
	16% { transform: translate(0, 0) rotate(5deg) scale(0.8, 1); }
	48% { transform: translate(0, 0) rotate(6deg) scale(0.8, 1); }
	83% { transform: translate(0, 0) rotate(4deg) scale(0.8, 1); }
}

@keyframes ddl-text-accent {
	0% { width: 0; }
	100% { width: 100%; }
}

@keyframes ddl-show-flames {
	0%, 84% { opacity: 0; }
	88%, 98% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes ddl-red-flame {
	0%, 100% { transform: translateY(-30px) scale(1); }
	25% { transform: translateY(-30px) scale(1.1); }
	75% { transform: translateY(-30px) scale(0.8, 0.7); }
}

@keyframes ddl-yellow-flame {
	0% { transform: translateY(-30px) scale(0.8, 0.7); }
	50% { transform: translateY(-30px) scale(1.1, 1.2); }
	100% { transform: translateY(-30px) scale(1); }
}

@media (max-width: 600px) {
	.ddl-preloader {
		padding: 16px;
	}

	.ddl-stage {
		width: min(581px, 96vw);
	}

	.ddl-deadline-days {
		margin-top: -2px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ddl-preloader * {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
}