:root[data-blue-style] {
	--blue-bg: #031321;
	--blue-text: #ffffff;
	--blue-muted: #e6f0f7;
	--blue-accent: #75d9cc;
	--blue-accent-text: #031321;
	--blue-radius: 8px;
	--blue-scale: 1;
	--blue-display: "Hanken Grotesk";
	--blue-body: "Hanken Grotesk";
	--blue-glow: #07446a;
	--blue-glow-x: 63%;
	--blue-glow-y: 47%;
	--blue-glow-size: 58%;
	--bg: var(--blue-bg);
	--bg-deep: var(--blue-bg);
	--ink: var(--blue-text);
	--ink-soft: var(--blue-muted);
	--ink-mute: var(--blue-muted);
	--red: var(--blue-secondary);
	--red-text: var(--blue-secondary);
	--line: #ffffff25;
	--line-strong: #ffffff45;
	--font-display: var(--blue-display), sans-serif;
	--font-body: var(--blue-body), sans-serif;
	--mc-page-bg: var(--blue-bg);
	--mc-stage-ink: var(--blue-text);
	--mc-ink-deep: var(--blue-text);
	--mc-font-body: var(--blue-body), sans-serif;
	--mc-red: var(--blue-secondary);
	--mc-red-text: var(--blue-secondary);
	--mc-red-text-light: var(--blue-secondary);
}
:root[data-blue-style="horizon"] {
	--blue-glow: #075075;
	--blue-glow-x: 64%;
	--blue-glow-y: 83%;
	--blue-glow-size: 70%;
}
:root[data-blue-style="horizon-profond"] {
	--blue-glow: #063655;
	--blue-glow-x: 72%;
	--blue-glow-y: 98%;
	--blue-glow-size: 66%;
}
:root[data-blue-style="horizon-lunaire"] {
	--blue-glow: #315b75;
	--blue-glow-x: 38%;
	--blue-glow-y: 102%;
	--blue-glow-size: 77%;
}
:root[data-blue-style="horizon-boreal"] {
	--blue-glow: #076269;
	--blue-glow-x: 78%;
	--blue-glow-y: 92%;
	--blue-glow-size: 75%;
}
html[data-blue-style],
html[data-blue-style] body {
	background: var(--blue-night-bg, var(--blue-bg));
	color: var(--blue-text);
	--mc-stage-ink: var(--blue-text);
}
html[data-blue-style] #boot,
html[data-blue-style] #boot .boot-ground {
	background: transparent;
}
html[data-blue-style] body.is-booting #stage {
	visibility: hidden;
}
html[data-blue-style] body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(
			ellipse at 5% 3%,
			var(--blue-edge-one, #00070f9c),
			transparent 70%
		),
		radial-gradient(
			ellipse at 90% 12%,
			var(--blue-edge-two, #00040c88),
			transparent 65%
		),
		radial-gradient(
			ellipse at var(--blue-glow-x) var(--blue-glow-y),
			color-mix(
				in srgb,
				var(--blue-glow) var(--blue-glow-intensity, 100%),
				transparent
			),
			transparent var(--blue-glow-size)
		);
}
.blue-grain {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: var(--blue-grain-opacity, 0.17);
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23n)' d='M0 0h192v192H0z'/%3E%3C/svg%3E");
}
.blue-stars {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	opacity: 0.7;
}
:root[data-blue-theme="light"] .blue-stars {
	display: none;
}
html[data-blue-style] #deck-shell,
html[data-blue-style] .dom-section,
html[data-blue-style] .stage,
html[data-blue-style] #app {
	background: transparent !important;
}
html[data-blue-style] #no-webgl-fallback {
	background: transparent;
}
html[data-blue-style] .no-webgl-wordmark {
	display: none;
}
html[data-blue-static-founder] #stage {
	visibility: hidden;
}
html[data-blue-style] .scrim,
html[data-blue-style] #dev-config-gear {
	display: none !important;
}
html[data-blue-style] #stage {
	mix-blend-mode: normal;
	z-index: 3;
}
body:has(.hero-headline[aria-hidden="true"]) .hero-inner {
	visibility: hidden !important;
}
html[data-blue-style] .hero-inner {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: clamp(20px, 3vh, 36px);
	padding: 0 20px 74px !important;
	height: 100svh !important;
	max-height: none !important;
	transform: none !important;
}
html[data-blue-style] .hero-headline {
	position: relative;
	top: var(--blue-description-y, 0px);
	order: 2;
	margin: 0 !important;
	font:
		500 clamp(1.4rem, 2.2vw, 2.2rem) / 1.25 var(--blue-display),
		sans-serif !important;
	letter-spacing: -0.02em;
	color: var(--blue-text) !important;
	opacity: 1;
	transform: none !important;
	max-width: 680px;
	text-wrap: balance;
}
html[data-blue-style] .hero-headline b {
	font-weight: 400;
}
html[data-blue-style] .hero-headline-accent {
	color: var(--blue-text) !important;
}
html[data-blue-style] .hero-headline .blue-monaco {
	color: var(--blue-secondary);
}
html[data-blue-style] .hero-headline .ln-in {
	transform: none !important;
	opacity: 1 !important;
}
html[data-blue-style] #hero-wordmark-zone {
	order: 1;
	position: relative !important;
	inset: auto !important;
	transform: none !important;
	width: min(
		calc(720px * var(--blue-wordmark-size, 1)),
		calc(75vw * var(--blue-wordmark-size, 1)),
		calc(100vw - 160px)
	) !important;
	height: calc(160px * var(--blue-wordmark-size, 1)) !important;
	min-height: 0 !important;
	flex: 0 0 auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 46px 40px !important;
	overflow: visible !important;
	top: var(--blue-wordmark-y, 0px) !important;
}
#colibri,
.colibri-wordmark {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 4;
}
#colibri.is-intro,
.colibri-wordmark {
	z-index: 12001;
}
#colibri[data-crossing="true"] {
	z-index: 2;
	mix-blend-mode: multiply;
}
#colibri-home {
	position: fixed;
	left: calc(50% - 480px);
	top: 26%;
	width: 104px;
	height: 104px;
	z-index: 4;
	pointer-events: none;
}
#colibri-home img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
:root[data-colibri-live="true"]:not([data-blue-motion="off"]) #colibri-home {
	display: none;
}
:root[data-blue-motion="off"] #colibri,
:root[data-blue-motion="off"] .colibri-wordmark {
	visibility: hidden;
}
.blue-wordmark {
	display: none;
	font:
		400 calc(clamp(32px, 4.4vw, 64px) * var(--blue-wordmark-size, 1)) / 1
		"Pragma Wordmark",
		serif;
	letter-spacing: 0.04em;
	color: var(--blue-text);
}
:root:has(#no-webgl-fallback:not([hidden])) .blue-wordmark {
	display: block;
}
html[data-blue-style] .hero-sub {
	order: 3;
	position: static !important;
	margin: 0 !important;
	max-width: 620px;
	color: var(--blue-muted) !important;
	font:
		400 clamp(19px, 1.4vw, 24px) / 1.55 var(--blue-body),
		sans-serif !important;
	text-transform: none;
	letter-spacing: 0;
}
