:root {
	color-scheme: dark;
	font-family: Arial, Helvetica, sans-serif;
	background: #17221e;
	color: #f1eddf;
}

* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	background: #101914;
}
#canvas {
	display: block;
	border: 0;
	margin: 0;
	padding: 0;
	outline: none;
}
[hidden] {
	display: none;
}

#mission-loader {
	position: fixed;
	inset: 0;
	z-index: 10;
	min-height: 100%;
	overflow: hidden;
	background: #17221e;
	opacity: 1;
	transition: opacity 650ms ease;
	isolation: isolate;
}
#mission-loader.is-ready {
	opacity: 0;
	pointer-events: none;
}
.loading-art,
.loading-shade,
.loading-frame {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.loading-art {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 66% center;
	filter: saturate(0.72);
	animation: landscape-arrives 22s ease-out both;
	z-index: -3;
}
.loading-shade {
	background:
		linear-gradient(
			90deg,
			rgba(13, 24, 19, 0.96) 0%,
			rgba(13, 24, 19, 0.75) 34%,
			rgba(13, 24, 19, 0.08) 78%
		),
		linear-gradient(
			0deg,
			rgba(13, 24, 19, 0.97),
			transparent 48%,
			rgba(13, 24, 19, 0.3)
		);
	z-index: -2;
}
.loading-frame {
	inset: 22px;
	border: 1px solid rgba(226, 215, 181, 0.17);
	z-index: -1;
}
.loading-header {
	position: absolute;
	top: 6.8%;
	left: 6.6%;
	right: 6.6%;
	display: flex;
	align-items: center;
	gap: 36px;
}
.monogram {
	font:
		26px Georgia,
		"Times New Roman",
		serif;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.edition,
.chapter {
	font-size: 9px;
	letter-spacing: 0.16em;
	color: #d5d4c6;
}
.chapter {
	margin-left: auto;
	padding-bottom: 9px;
	border-bottom: 1px solid #a69770;
}
.loading-story {
	position: absolute;
	top: 23%;
	left: 8.3%;
}
.eyebrow {
	display: flex;
	gap: 14px;
	align-items: center;
	color: #cbbb8e;
	font-size: 10px;
	letter-spacing: 0.2em;
	margin: 0 0 24px;
}
.eyebrow span {
	width: 33px;
	height: 1px;
	background: #cbbb8e;
}
h1 {
	font:
		normal clamp(66px, 8.8vw, 138px) / 0.87 Georgia,
		"Times New Roman",
		serif;
	letter-spacing: -0.06em;
	margin: 0;
}
.year {
	display: inline-block;
	vertical-align: top;
	font-size: 0.24em;
	letter-spacing: 0.02em;
	margin: 0.19em 0 0 0.7em;
	color: #cbbb8e;
}
.loading-quote {
	font:
		34px / 1.2 Georgia,
		"Times New Roman",
		serif;
	margin: 30px 0 20px;
	letter-spacing: -0.02em;
}
.loading-quote em {
	color: #d3c397;
	font-weight: normal;
}
.loading-intro {
	color: #c3c8bc;
	font-size: 13px;
	line-height: 1.8;
	margin: 0;
}
.mission-stats {
	position: absolute;
	top: 45%;
	right: 7%;
	display: flex;
	gap: 34px;
	text-shadow: 0 2px 12px #132019;
}
.mission-stats div {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 1px solid rgba(232, 224, 196, 0.6);
	padding-top: 17px;
	min-width: 76px;
}
.mission-stats strong {
	font:
		normal 44px / 0.95 Georgia,
		"Times New Roman",
		serif;
}
.mission-stats span {
	font-size: 8px;
	letter-spacing: 0.17em;
	color: #e6e3d7;
}
.loading-bottom {
	position: absolute;
	bottom: 8%;
	left: 8.3%;
	right: 8.3%;
	display: flex;
	gap: 7%;
	align-items: flex-end;
}
.loading-meter {
	flex: 1;
	max-width: 620px;
	min-width: 0;
}
.meter-heading {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	margin-bottom: 15px;
}
#loading-label {
	text-transform: uppercase;
	letter-spacing: 0.19em;
	font-size: 10px;
	color: #ede5ce;
	margin: 0;
}
#loading-percent {
	font:
		24px Georgia,
		"Times New Roman",
		serif;
	color: #d7c69c;
	font-variant-numeric: tabular-nums;
	min-width: 58px;
	text-align: right;
}
#loading-progress {
	height: 3px;
	width: 100%;
	background: rgba(226, 215, 181, 0.2);
	overflow: hidden;
}
#loading-fill {
	height: 100%;
	width: 0;
	background: #d7c69c;
	transition: width 200ms ease-out;
}
#loading-progress:not([aria-valuenow]) #loading-fill {
	width: 24%;
	animation: searching 2.3s ease-in-out infinite;
}
.meter-detail {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	color: #b7beb0;
	font-size: 10px;
	line-height: 1.5;
}
.loading-caption {
	font-size: 8px;
	letter-spacing: 0.12em;
	text-align: right;
}
.loading-hint {
	flex: 1;
	margin: 0 0 0 auto;
	max-width: 285px;
	border-left: 1px solid rgba(215, 198, 156, 0.35);
	padding-left: 22px;
	color: #c3c8bc;
	font:
		14px / 1.7 Georgia,
		"Times New Roman",
		serif;
}
#loading-error {
	border-top: 1px solid #aa9973;
	padding-top: 12px;
	margin-top: 18px;
}
#loading-error-message {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 14px;
}
#loading-retry {
	border: 1px solid #c8b57f;
	border-radius: 3px;
	background: #e9e1cd;
	color: #192820;
	padding: 12px 20px;
	font:
		13px Arial,
		sans-serif;
	cursor: pointer;
	min-height: 44px;
}
#loading-retry span {
	margin-left: 30px;
}
#loading-retry:hover {
	background: #fff8e6;
}
#loading-retry:focus-visible {
	outline: 2px solid white;
	outline-offset: 4px;
}
.has-error .meter-detail,
.has-error #loading-progress,
.has-error #loading-percent {
	display: none;
}
.no-script {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 20;
	padding: 16px;
	background: #17221e;
	color: white;
}
@keyframes landscape-arrives {
	from {
		transform: scale(1.065);
	}
	to {
		transform: scale(1);
	}
}
@keyframes searching {
	0%,
	100% {
		transform: translateX(-100%);
	}
	50% {
		transform: translateX(420%);
	}
}

@media (max-width: 850px) {
	.chapter {
		display: none;
	}
	.loading-story {
		top: 22%;
	}
	.mission-stats {
		top: auto;
		bottom: 30%;
		right: 8.3%;
		gap: 20px;
	}
	.mission-stats strong {
		font-size: 32px;
	}
	.mission-stats div {
		min-width: 54px;
	}
	.loading-hint {
		display: none;
	}
	.loading-meter {
		max-width: none;
	}
	.loading-quote {
		font-size: 30px;
	}
}
@media (max-width: 560px) {
	.loading-frame {
		inset: 13px;
	}
	.loading-header {
		top: 6%;
		left: 8.3%;
		gap: 22px;
	}
	.monogram {
		font-size: 22px;
	}
	.edition {
		max-width: 130px;
		font-size: 8px;
		line-height: 1.7;
	}
	.loading-story {
		top: 24%;
	}
	h1 {
		font-size: clamp(60px, 15vw, 84px);
	}
	.eyebrow {
		font-size: 8px;
		gap: 9px;
		letter-spacing: 0.13em;
	}
	.loading-quote {
		font-size: 29px;
		margin-top: 28px;
	}
	.loading-intro {
		font-size: 12px;
	}
	.mission-stats {
		display: none;
	}
	.loading-art {
		object-position: 60% center;
	}
	.loading-shade {
		background:
			linear-gradient(90deg, rgba(13, 24, 19, 0.85), rgba(13, 24, 19, 0.22)),
			linear-gradient(0deg, #101c16, transparent 85%);
	}
	.loading-bottom {
		bottom: 9%;
	}
	.loading-caption {
		display: none;
	}
}
@media (max-height: 600px) and (min-width: 561px) {
	.loading-header {
		top: 7%;
	}
	.loading-story {
		top: 25%;
	}
	h1 {
		font-size: clamp(60px, 9vw, 100px);
	}
	.loading-quote {
		font-size: 25px;
		margin: 18px 0 0;
	}
	.loading-intro,
	.loading-hint,
	.mission-stats {
		display: none;
	}
	.loading-bottom {
		bottom: 8%;
	}
	.loading-meter {
		max-width: 66%;
	}
}
@media (max-height: 650px) and (max-width: 560px) {
	.loading-story {
		top: 24%;
	}
	.loading-intro {
		display: none;
	}
	.loading-quote {
		font-size: 24px;
		margin-top: 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.loading-art,
	#loading-progress:not([aria-valuenow]) #loading-fill {
		animation: none;
	}
	#mission-loader,
	#loading-fill {
		transition: none;
	}
}

@media (max-height: 450px) {
	.has-error .loading-story {
		display: none;
	}
}