:root {
	--experience-blue:#3b82f6;
	--experience-primary:#3b82f6;
	--experience-violet:#a855f7;
}

canvas[data-zhida-scene] {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: pan-y;
}

.scene-stage,
[data-scene-stage] {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(circle at 62% 42%,rgba(168,85,247,.28),transparent 32%),
		radial-gradient(circle at 42% 58%,rgba(59,130,246,.16),transparent 38%),
		#050816;
}

.scene-stage::before,
[data-scene-stage]::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(59,130,246,.06) 1px,transparent 1px),
		linear-gradient(90deg,rgba(59,130,246,.06) 1px,transparent 1px);
	background-size:72px 72px;
	mask-image:radial-gradient(circle at center,#000,transparent 74%);
	content:"";
}

.scene-stage.is-webgl-fallback,
[data-scene-stage].is-webgl-fallback {
	background:
		url("/img/fallback-media.png") center / cover no-repeat,
		#050816;
}

.scene-stage.is-webgl-fallback canvas,
[data-scene-stage].is-webgl-fallback canvas {
	display: none;
}

[data-horizontal-story] {
	position: relative;
	overflow: hidden;
}

[data-horizontal-track] {
	will-change: transform;
}

@media (max-width: 767px) {
	.scene-stage::before,
	[data-scene-stage]::before {
		background-size:48px 48px;
	}

	[data-horizontal-story] {
		overflow-x: auto;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	[data-horizontal-track] > * {
		scroll-snap-align:start;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-horizontal-track] {
		transform:none!important;
	}
}