html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#initial,
#initial *,
#initial *::before,
#initial *::after {
	box-sizing: content-box;
}

body {
	margin: 0;
	position: fixed;
	inset: 0;
	background:
		radial-gradient(circle at top, rgba(3, 62, 123, 0.35), transparent 42%),
		linear-gradient(180deg, #08131f 0%, #03070d 100%);
	color: #fff;
}

#app {
	position: fixed;
	inset: 0;
}

#initial {
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(100vw, 1024px);
	height: min(100vh, 768px);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(32px, 8vh, 64px) 24px;
	font-family: 'Segoe UI Variable', 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
	user-select: none;
	transition: opacity 0.28s ease;
}

#initial.is-exit {
	opacity: 0;
}

.initial-logo {
	width: 113px;
	height: 113px;
	margin: clamp(160px, 28vh, 236px) 0 clamp(152px, 22vh, 268px);
	opacity: 0;
	transition: opacity 0.6s ease;
}

.initial-loading {
	width: 30px;
	height: 30px;
	margin-bottom: 68px;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.initial-words,
.initial-status {
	display: block;
	font-size: 20px;
	line-height: 1.4;
	color: #fff;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.initial-words {
	width: min(100%, 720px);
	min-height: 28px;
	margin-bottom: 14px;
	text-align: center;
}

.initial-status-row {
	display: grid;
	place-items: center;
	min-height: 28px;
}

.initial-status {
	grid-area: 1 / 1;
}

[data-initial-reveal].is-visible {
	opacity: 1;
}

#initial.is-loaded .initial-status-loading {
	opacity: 0;
	transition-duration: 0.24s;
}

#initial.is-loaded .initial-status-loaded {
	opacity: 1;
	transition-duration: 0.24s;
}