.hp {
	--hp-u: 1px;
	--hp-t: 1px;
	--hp-f: 1px;
}

.hp__dialog {
	width: 856px;
	height: 428px;
	margin-top: 104px;
}

.hp__close {
	top: -80px;
}

.hp .hp__dialog .hp__scene {
	inset: 0;
	width: 100%;
	height: 100%;
}

.hp__card::after {
	background: linear-gradient(90deg, rgba(10, 8, 6, 0.8) 44.714%, rgba(10, 8, 6, 0) 68.091%);
}

.hp__content {
	width: 458px;
	padding: 57px 0 78px 62px;
}

.hp__actions {
	gap: 21px;
	margin-top: 21px;
}

.hp__cta {
	order: 0;
	height: 48px;
	padding: 0 38px 0 48px;
	border-radius: 10px;
	box-shadow: 0 10px 30px -8px rgba(255, 138, 30, 0.45);
	font-size: 14px;
}

.hp .hp__dialog .hp__bat {
	top: -69.97px;
	left: 531.13px;
	width: 303.9px;
	height: 170.35px;
	transform: rotate(-13.85deg);
}

.hp .hp__dialog .hp__bat-percent {
	top: 35.64px;
	left: 459.32px;
}