.go-spatial-experience {
	position: relative;
	height: 100svh;
	min-height: 650px;
	overflow: hidden;
	isolation: isolate;
	color: #f2ece1;
	background: #03050a;
	touch-action: none;
	--chapter: #74e6d3;
}
.go-spatial-experience canvas,
.go-spatial-fallback,
.go-spatial-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.go-spatial-experience canvas { z-index: 1; opacity: 0; transition: opacity .8s ease; }
.go-spatial-experience.renderer-ready canvas { opacity: 1; }
.go-spatial-fallback {
	z-index: 0;
	background-image: linear-gradient(90deg, rgba(3,5,10,.9) 0%, rgba(3,5,10,.58) 42%, rgba(3,5,10,.18) 75%), var(--fallback-image);
	background-position: center;
	background-size: cover;
	filter: saturate(.45) contrast(1.1);
	transition: background-image .3s ease, opacity .8s ease;
}
.go-spatial-experience.renderer-ready .go-spatial-fallback { opacity: .12; }
.go-spatial-vignette {
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(3,5,10,.62), transparent 24%, transparent 60%, rgba(3,5,10,.87)), linear-gradient(90deg, rgba(3,5,10,.72), transparent 48%);
}

.go-spatial-chapters {
	position: absolute;
	z-index: 5;
	top: 50%;
	right: clamp(20px,4.5vw,72px);
	display: grid;
	width: 182px;
	transform: translateY(-50%);
}
.go-spatial-chapters button {
	display: grid;
	grid-template-columns: 24px 1fr;
	column-gap: 14px;
	align-items: center;
	min-height: 57px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid rgba(242,236,225,.17);
	color: rgba(242,236,225,.44);
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: color .2s ease, transform .2s ease;
}
.go-spatial-chapters button span { color: var(--chapter); font: 820 9px/1 var(--font-ui); }
.go-spatial-chapters button strong { font: 620 13px/1 var(--font-ui); }
.go-spatial-chapters button:hover,
.go-spatial-chapters button:focus-visible,
.go-spatial-chapters button.active { color: #f2ece1; transform: translateX(-9px); }

.go-spatial-content {
	position: absolute;
	z-index: 5;
	left: clamp(20px,4.5vw,72px);
	bottom: clamp(78px,10vh,120px);
	width: min(710px,58vw);
	pointer-events: none;
}
.go-spatial-content article { pointer-events: auto; }
.go-spatial-eyebrow {
	margin: 0 0 13px;
	color: var(--chapter);
	font: 820 10px/1 var(--font-ui);
	letter-spacing: .18em;
	text-transform: uppercase;
}
.go-spatial-content h1 {
	margin: 0;
	font: 620 clamp(48px,5.4vw,86px)/.98 var(--font-display);
	letter-spacing: -.04em;
	text-wrap: balance;
}
.go-spatial-content h1 a { color: inherit; text-decoration: none; }
.go-spatial-content h1 a:hover { color: color-mix(in srgb,var(--chapter) 32%,#f2ece1); }
.go-spatial-summary {
	max-width: 560px;
	margin: 19px 0 0;
	color: rgba(242,236,225,.67);
	font: 400 16px/1.55 var(--font-reading);
}
.go-spatial-content article > a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 13px;
	margin-top: 20px;
	color: #f2ece1;
	font: 760 12px/1 var(--font-ui);
	text-decoration: none;
}
.go-spatial-content article > a span { color: var(--chapter); }

.go-spatial-position {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 27px;
	display: grid;
	grid-template-columns: auto minmax(90px,15vw) auto;
	gap: 10px;
	align-items: center;
	transform: translateX(-50%);
	color: rgba(242,236,225,.45);
	font: 760 8px/1 var(--font-ui);
	letter-spacing: .14em;
}
.go-spatial-position i { position: relative; height: 1px; background: rgba(242,236,225,.2); }
.go-spatial-position i::after {
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: 0;
	width: calc(var(--position) * 100%);
	content: "";
	background: var(--chapter);
	box-shadow: 0 0 9px var(--chapter);
	transition: width .42s cubic-bezier(.2,.75,.2,1);
}
.go-spatial-instruction {
	position: absolute;
	z-index: 5;
	right: clamp(20px,4.5vw,72px);
	bottom: 25px;
	display: flex;
	gap: 15px;
	margin: 0;
	color: rgba(242,236,225,.43);
	font: 700 9px/1 var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.go-spatial-instruction b { color: var(--chapter); font-weight: 720; }
.go-spatial-footer-link {
	position: absolute;
	z-index: 5;
	right: clamp(20px,4.5vw,72px);
	bottom: 54px;
	display: inline-flex;
	gap: 11px;
	align-items: center;
	min-height: 44px;
	color: rgba(242,236,225,.64);
	font: 700 10px/1 var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}
.go-spatial-footer-link span { color: var(--chapter); }
.go-spatial-no-script {
	position: absolute;
	z-index: 8;
	inset: auto 20px 20px;
	display: grid;
	gap: 8px;
	padding: 14px;
	color: #03050a;
	background: #f2ece1;
}
.go-spatial-no-script a { color: #03050a; font: 650 12px/1.3 var(--font-ui); }

@media (max-width: 760px) {
	.go-spatial-experience { min-height: 700px; }
	.go-spatial-chapters { top: auto; right: 16px; bottom: 26px; left: 16px; width: auto; grid-template-columns: repeat(3,1fr); transform: none; }
	.go-spatial-chapters button { grid-template-columns: 1fr; gap: 10px; justify-items: center; min-height: 54px; text-align: center; }
	.go-spatial-chapters button:hover,
	.go-spatial-chapters button:focus-visible,
	.go-spatial-chapters button.active { transform: translateY(-4px); }
	.go-spatial-content { left: 16px; bottom: 116px; width: calc(100% - 32px); }
	.go-spatial-content h1 { font-size: clamp(40px,12vw,56px); }
	.go-spatial-summary { max-width: 92%; font-size: 15px; }
	.go-spatial-position,
	.go-spatial-instruction { display: none; }
	.go-spatial-footer-link { top: 78px; right: 16px; bottom: auto; }
	.go-spatial-fallback { background-image: linear-gradient(180deg,rgba(3,5,10,.62),rgba(3,5,10,.2) 43%,rgba(3,5,10,.94) 76%),var(--fallback-image); }
	.go-spatial-vignette { background: linear-gradient(180deg,rgba(3,5,10,.56),transparent 30%,rgba(3,5,10,.93) 70%); }
}

@media (prefers-reduced-motion: reduce) {
	.go-spatial-experience canvas { display: none; }
	.go-spatial-fallback { opacity: 1 !important; transition: none; }
	.go-spatial-chapters button,
	.go-spatial-position i::after { transition: none; }
}