.blue-swatch {
	width: 42px;
	height: 34px;
	border-radius: 3px;
	background: radial-gradient(
		ellipse at var(--swatch-x) var(--swatch-y),
		var(--swatch-glow),
		var(--swatch-bg) 88%
	);
}
.blue-dialog small {
	display: block;
	color: #b9cbd6;
}
.blue-dialog a {
	color: #75d9cc;
}
.blue-dialog header,
.blue-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.blue-dialog header button {
	padding: 0;
	min-width: 44px;
	border: 0;
	font-size: 24px;
}
.blue-fields {
	display: grid;
	gap: 12px;
}
.blue-fields label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.blue-fields input,
.blue-fields select {
	max-width: 160px;
	min-height: 36px;
	color: #f4f6f5;
	background: #102e43;
	border: 1px solid #577080;
	border-radius: 4px;
	padding: 6px;
}
.blue-fields input[type="color"] {
	padding: 2px;
	width: 70px;
}
.blue-fields fieldset {
	border: 1px solid #456072;
	border-radius: 6px;
	margin: 12px 0;
	padding: 12px;
}
.blue-status {
	margin-top: 16px;
	display: block;
	color: #75d9cc;
}
[data-blue-editable="true"] {
	outline: 1px dashed #75d9cc80;
	outline-offset: 6px;
}
.blue-section-gear {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 20;
	color: #75d9cc;
	background: #031321;
	border: 1px solid #577080;
	padding: 10px;
	border-radius: 50%;
	cursor: pointer;
}
:root[data-blue-loading] #deck-shell {
	visibility: hidden;
}
/* Light keeps a near-neutral bloom instead of the deep blue light source dark
   uses, so the paper reads as paper rather than as a tinted wash. */
:root[data-blue-theme="light"] {
	--blue-glow: #e9eeec;
	--line: #0d39462a;
}
:root[data-blue-density="compact"] .hero-inner {
	gap: 16px;
}
:root[data-blue-density="spacious"] .hero-inner {
	gap: 40px;
}
:root[data-blue-width="narrow"] .hero-inner {
	max-width: 640px !important;
}
:root[data-blue-width="wide"] .hero-inner {
	max-width: 1100px !important;
}
:root[data-blue-button="solid"] .menu-item--primary {
	background: var(--blue-secondary) !important;
	color: #ffffff !important;
	padding: 12px 18px;
}
:root[data-blue-theme="light"][data-blue-button="solid"] .menu-item--primary {
	color: var(--blue-text) !important;
}
:root[data-blue-button="outline"] .menu-item--primary {
	border: 1px solid var(--blue-secondary);
	padding: 12px 18px;
}
.blue-extra-links {
	order: 4;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: center;
}
.blue-extra-links:empty {
	display: none;
}
.blue-extra-links a {
	color: var(--blue-secondary);
	font:
		14px "Hanken Grotesk",
		sans-serif;
}
@media (max-width: 760px) {
	html[data-blue-style] .hero-inner {
		padding: calc(env(safe-area-inset-top, 0px) + 56px) 16px
			calc(110px + env(safe-area-inset-bottom, 0px)) !important;
		gap: clamp(16px, 3vh, 26px);
		justify-content: center !important;
	}
	html[data-blue-style] .hero-headline {
		font-size: clamp(19px, 5.2vw, 24px) !important;
		line-height: 1.25 !important;
		text-align: center !important;
		color: var(--blue-text) !important;
	}
	html[data-blue-style] .hero-sub {
		font-size: 18px !important;
		line-height: 1.45 !important;
		max-width: 350px !important;
		text-align: center !important;
	}
	html[data-blue-style] #hero-wordmark-zone {
		/* Maximize the particle field on phones: the zone rect drives both the
		   wordmark fit and its ambient ground-pool glow (blue-app.min.js), so a
		   taller/wider box grows the whole particle presence, not just the
		   crisp glyph. Bounded by dvh so it stays inside the hero's centered
		   flex band above the fixed bottom bar. */
		height: calc(
			clamp(200px, 40dvh, 320px) *
			var(--blue-wordmark-size, 1)
		) !important;
		margin: 0 0 30px !important;
		width: min(
			calc(94vw * var(--blue-wordmark-size, 1)),
			calc(100vw - 24px)
		) !important;
	}
	#colibri-home {
		left: 7%;
		top: 20%;
		width: 68px;
		height: 68px;
	}
	.blue-paper-group {
		grid-template-columns: 1fr;
	}
	html[data-blue-style] .menu-item-label .plw {
		display: inline-flex;
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	html[data-blue-style] .menu-item-label {
		letter-spacing: 0.08em;
	}
	html[data-blue-style] #bar,
	html[data-blue-style] #bar[data-bar-state="realisations-expanded"] {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px 14px max(12px, env(safe-area-inset-bottom));
		backdrop-filter: none;
		border: 0;
		border-radius: 0 !important;
		box-shadow: none;
		background: linear-gradient(
			transparent,
			var(--blue-night-bg, var(--blue-bg)) 38%
		);
	}
	html[data-blue-style] #bar::before {
		content: "";
		position: fixed;
		inset: 0 0 auto;
		height: calc(64px + env(safe-area-inset-top));
		background: color-mix(
			in srgb,
			var(--blue-night-bg, var(--blue-bg)) 85%,
			transparent
		);
		border-bottom: 1px solid #ffffff16;
		pointer-events: none;
	}
	html[data-blue-style] #bar .bar-brand {
		position: fixed;
		left: 14px;
		top: calc(10px + env(safe-area-inset-top));
		min-height: 44px;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.11em;
		gap: 0.2em;
	}
	html[data-blue-style] #lang-switch {
		position: fixed;
		right: 14px;
		top: calc(10px + env(safe-area-inset-top));
		display: flex;
		gap: 4px;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.04em;
	}
	html[data-blue-style] #lang-switch a {
		justify-content: center;
		min-width: 28px;
		padding: 2px 4px;
	}
	html[data-blue-style] #bar .menu-item {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
		min-height: 48px;
		justify-content: center;
		align-items: center;
		padding: 10px 8px;
		border: 1px solid #ffffff24;
		border-radius: var(--blue-radius);
		background: #ffffff05;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.04em;
	}
	html[data-blue-style] #bar .menu-item--primary {
		order: 2;
		flex-basis: 100%;
		font-size: 15px;
		font-weight: 600;
		padding: 12px 18px;
		border-color: color-mix(in srgb, var(--blue-secondary) 45%, transparent);
	}
	html[data-blue-style] #bar .menu-item:hover,
	html[data-blue-style] #bar .menu-item:focus-visible {
		background: #ffffff10;
		border-color: #ffffff60;
	}
	.blue-gear {
		display: none !important;
	}
}
@media (max-height: 570px) {
	html[data-blue-style] .hero-inner {
		padding: 20px 72px 76px !important;
		gap: 12px;
	}
	.blue-wordmark {
		width: 230px;
	}
	html[data-blue-style] #hero-wordmark-zone {
		/* Same ratio as before (~4.3:1), scaled up ~1.85x to use the extra
		   width/height a short landscape phone actually has free. */
		height: calc(140px * var(--blue-wordmark-size, 1)) !important;
		width: calc(600px * var(--blue-wordmark-size, 1)) !important;
		margin-bottom: 26px !important;
	}
	html[data-blue-style] .hero-headline {
		font-size: calc(23px * var(--blue-description-size, 1)) !important;
	}
	html[data-blue-style] .hero-sub {
		font-size: 14px !important;
	}
}