.hal-app-shell {
	position: relative;
	width: var(--hal-display-scale, 100%) !important;
	max-width: 1672px !important;
	min-width: 0;
	margin-inline: auto !important;
}

/*
 * Zodra JavaScript actief is, wordt de complete cockpit als één vast
 * 1672-pixels breed ontwerpcanvas geschaald. Hierdoor kan een sidebar of
 * mobiel scherm nooit afzonderlijke teksten, knoppen of meters herschikken.
 */
.hal-app-shell.hal-fixed-canvas {
	overflow: hidden;
}

.hal-app-shell.hal-fixed-canvas > .hal-app {
	position: absolute;
	left: 0;
	top: 0;
	width: 1672px;
	max-width: none;
	margin: 0;
	transform: scale(var(--hal-canvas-scale, 1));
	transform-origin: left top;
	will-change: transform;
}

.hal-app,
.hal-app * {
	box-sizing: border-box;
}

.hal-app {
	--hal-gold: #d4af37;
	--hal-host-bg: #000000;
	--hal-cockpit-image: none;
	--hal-night-image: none;
	--hal-day-image: none;
	--hal-accent: var(--hal-gold);
	--hal-stage-glow: rgba(212, 175, 55, .56);
	--hal-stage-fill: var(--hal-gold);
	--hal-needle-angle: -126deg;
	--hal-progress-angle: 0deg;
	--hal-needle-color: #a52019;
	--hal-needle-width: .58cqw;
	--hal-needle-length-scale: 1;
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: 1672px;
	margin: 0 auto;
	padding: clamp(4px, 1.1%, 18px);
	background: var(--hal-host-bg);
	font-family: Inter, Montserrat, Arial, Helvetica, sans-serif;
	line-height: 1.25;
	container-type: inline-size;
}


.hal-app-shell .hal-app a,
.hal-app-shell .hal-app a:visited,
.hal-app-shell .hal-app a:hover,
.hal-app-shell .hal-app a:active,
.hal-app-shell .hal-app a:focus {
	text-decoration: none !important;
	-webkit-text-decoration: none !important;
	text-decoration-thickness: 0 !important;
	text-underline-offset: 0 !important;
	outline: 0 !important;
	text-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}

.hal-app .hal-aux-button,
.hal-app .hal-gauge-cta {
	-webkit-appearance: none !important;
	appearance: none !important;
}


.hal-app.hal-host-light {
	filter: drop-shadow(0 17px 34px rgba(15, 18, 20, .22));
}

.hal-app.hal-host-dark {
	filter: drop-shadow(0 21px 40px rgba(0, 0, 0, .48));
}

.hal-app.hal-stage-medium {
	--hal-stage-fill: #e8b92f;
	--hal-stage-glow: rgba(232, 185, 47, .58);
}

.hal-app.hal-stage-high {
	--hal-stage-fill: #f08b24;
	--hal-stage-glow: rgba(240, 139, 36, .62);
}

.hal-app.hal-stage-critical,
.hal-app.hal-stage-full {
	--hal-stage-fill: #ef4a32;
	--hal-stage-glow: rgba(239, 74, 50, .7);
}

.hal-scene {
	position: relative;
	width: 100%;
	aspect-ratio: 1672 / 941;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--hal-gold) 34%, #2b2d2f);
	border-radius: 1.2cqw;
	background: #050607;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .025),
		0 22px 58px rgba(0, 0, 0, .24);
}

.hal-scene__image,
.hal-scene__finish {
	position: absolute;
	inset: 0;
}

.hal-scene__image {
	z-index: 0;
	background-image: var(--hal-cockpit-image);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.hal-scene__finish {
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(255,255,255,.018), transparent 22%, transparent 82%, rgba(0,0,0,.07)),
		radial-gradient(circle at 58% 59%, transparent 0 31%, rgba(0,0,0,.09) 72%, rgba(0,0,0,.18) 100%);
}

.hal-mode-day .hal-scene__finish {
	background:
		linear-gradient(180deg, rgba(255,255,255,.035), transparent 24%, transparent 83%, rgba(0,0,0,.05)),
		radial-gradient(circle at 58% 59%, transparent 0 38%, rgba(0,0,0,.04) 76%, rgba(0,0,0,.11) 100%);
}

/* The steering-wheel and dashboard-compartment logos are integrated into both fixed cockpit images. */

/* Dynamic screen overlay: it covers the baked-in demo screen in both cockpit images. */
.hal-screen {
	position: absolute;
	z-index: 6;
	left: 36.7%;
	top: 38.1%;
	width: 43.55%;
	height: 36.7%;
	overflow: hidden;
	border: .08cqw solid color-mix(in srgb, var(--hal-gold) 34%, #313335);
	border-radius: 1.05cqw;
	background:
		linear-gradient(115deg, rgba(255,255,255,.045), transparent 18% 76%, rgba(255,255,255,.025)),
		radial-gradient(circle at 53% 45%, color-mix(in srgb, var(--hal-stage-fill) 10%, transparent), transparent 37%),
		linear-gradient(155deg, rgba(18,20,22,.988), rgba(2,3,4,.996) 64%, rgba(12,13,15,.992));
	box-shadow:
		inset 0 0 0 .08cqw rgba(255,255,255,.05),
		inset 0 0 2.8cqw rgba(255,255,255,.025),
		inset 0 -.9cqw 1.7cqw rgba(0,0,0,.36),
		0 0 1.15cqw rgba(0,0,0,.72),
		0 0 .72cqw color-mix(in srgb, var(--hal-gold) 19%, transparent);
	color: #f5f1e6;
}

.hal-screen::before {
	content: "";
	position: absolute;
	inset: .28cqw;
	border: .055cqw solid rgba(255,255,255,.04);
	border-radius: .78cqw;
	pointer-events: none;
}

.hal-screen__header {
	position: absolute;
	z-index: 3;
	left: 2.7%;
	right: 2.7%;
	top: 3.6%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 15%;
	padding-bottom: .36cqw;
	border-bottom: .055cqw solid color-mix(in srgb, var(--hal-gold) 18%, #252729);
}


.hal-screen__status {
	display: flex;
	align-items: center;
	gap: .42cqw;
	color: rgba(255,255,255,.68);
	font-size: .66cqw;
	font-weight: 750;
	letter-spacing: .11em;
	white-space: nowrap;
}

.hal-screen__status i,
.hal-gauge + .hal-screen__status i {
	width: .48cqw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--hal-stage-fill);
	box-shadow: 0 0 .64cqw var(--hal-stage-glow);
}

.hal-screen__body {
	position: absolute;
	left: 3.1%;
	right: 3.1%;
	top: 15.8%;
	bottom: 5.8%;
	display: grid;
	grid-template-columns: 28% 51% 21%;
	align-items: center;
	gap: 0;
}

.hal-aux-actions {
	display: flex;
	flex-direction: column;
	align-self: center;
	gap: .52cqw;
	width: 98%;
}

.hal-aux-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.05cqw;
	padding: .62cqw .94cqw;
	border: .055cqw solid color-mix(in srgb, var(--hal-gold) 20%, #1a1c1e) !important;
	border-radius: .36cqw;
	background: linear-gradient(160deg, rgba(255,255,255,.026), rgba(255,255,255,.006));
	box-shadow: none !important;
	color: rgba(255,255,255,.63);
	font-size: 1.03cqw;
	font-weight: 750;
	letter-spacing: .06em;
	text-decoration: none !important;
	text-transform: uppercase;
}

.hal-aux-button b {
	font-size: 1.34cqw;
	line-height: 1;
}

.hal-aux-button--primary {
	border-color: color-mix(in srgb, var(--hal-gold) 72%, #3c351e);
	background:
		linear-gradient(180deg, rgba(255,255,255,.11), transparent 42%),
		linear-gradient(145deg, color-mix(in srgb, var(--hal-gold) 23%, #131516), #090a0b 68%);
	box-shadow:
		inset 0 0 0 .045cqw rgba(255,255,255,.08),
		0 0 .62cqw color-mix(in srgb, var(--hal-gold) 32%, transparent) !important;
	color: #fff3ca;
	font-weight: 900;
}

.hal-aux-button--primary::before {
	content: "";
	width: .46cqw;
	aspect-ratio: 1;
	margin-right: .28cqw;
	border-radius: 50%;
	background: var(--hal-stage-fill);
	box-shadow: 0 0 .48cqw var(--hal-stage-glow);
}

.hal-aux-button--primary span {
	margin-right: auto;
}

.hal-aux-button.is-link {
	border-color: color-mix(in srgb, var(--hal-gold) 28%, #242628);
	color: #f5efd9;
	cursor: pointer;
	transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.hal-aux-button.is-link:hover,
.hal-aux-button.is-link:focus-visible {
	z-index: 4;
	outline: none;
	transform: translateX(.22cqw);
	border-color: var(--hal-gold);
	background: linear-gradient(145deg, color-mix(in srgb, var(--hal-gold) 20%, #17191b), rgba(8,9,10,.94));
	box-shadow: 0 0 .72cqw color-mix(in srgb, var(--hal-gold) 31%, transparent) !important;
	color: #fff7df;
}

.hal-aux-button.is-link:focus-visible {
	outline: .09cqw solid var(--hal-gold) !important;
	outline-offset: .08cqw !important;
}


.hal-aux-button.is-static {
	cursor: default;
	opacity: .72;
}


.widget .hal-app-shell .hal-app a.hal-aux-button,
.widget-area .hal-app-shell .hal-app a.hal-aux-button,
.sidebar .hal-app-shell .hal-app a.hal-aux-button,
.hal-app-shell .hal-app a.hal-aux-button {
	outline: 0 !important;
	border-top-color: color-mix(in srgb, var(--hal-gold) 20%, #1a1c1e) !important;
	border-right-color: color-mix(in srgb, var(--hal-gold) 20%, #1a1c1e) !important;
	border-bottom-color: color-mix(in srgb, var(--hal-gold) 20%, #1a1c1e) !important;
	border-left-color: color-mix(in srgb, var(--hal-gold) 20%, #1a1c1e) !important;
	box-shadow: none !important;
	background-clip: padding-box !important;
}

.widget .hal-app-shell .hal-app a.hal-aux-button--primary,
.widget-area .hal-app-shell .hal-app a.hal-aux-button--primary,
.sidebar .hal-app-shell .hal-app a.hal-aux-button--primary,
.hal-app-shell .hal-app a.hal-aux-button--primary {
	border-color: color-mix(in srgb, var(--hal-gold) 72%, #3c351e) !important;
	box-shadow:
		inset 0 0 0 .045cqw rgba(255,255,255,.08),
		0 0 .62cqw color-mix(in srgb, var(--hal-gold) 32%, transparent) !important;
}


/* Prominent registration bar and gauge are contained inside the digital screen. */
.hal-gauge-zone {
	position: relative;
	display: grid;
	place-items: center;
	align-self: center;
	justify-self: center;
	width: 16.0cqw;
	height: 16.0cqw;
	min-width: 0;
	overflow: visible;
}

.hal-gauge-cta {
	position: absolute;
	z-index: 14;
	left: 50%;
	top: -.02cqw;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55cqw;
	width: 15.70cqw;
	min-width: 0;
	height: 2.45cqw;
	padding: .29cqw .88cqw;
	transform: translateX(-50%);
	overflow: hidden;
	border: .07cqw solid color-mix(in srgb, var(--hal-gold) 72%, #6a4b0d) !important;
	border-radius: .35cqw !important;
	background:
		linear-gradient(180deg, rgba(255,255,255,.36), transparent 42%),
		linear-gradient(100deg, color-mix(in srgb, var(--hal-gold) 76%, #fff0a6), var(--hal-gold) 48%, color-mix(in srgb, var(--hal-gold) 78%, #8b5d08)) !important;
	box-shadow:
		inset 0 0 0 .055cqw rgba(255,255,255,.32),
		inset 0 -.32cqw .55cqw rgba(91,59,4,.24),
		0 0 .72cqw color-mix(in srgb, var(--hal-gold) 45%, transparent),
		0 .28cqw .55cqw rgba(0,0,0,.58) !important;
	color: #000000 !important;
	font-size: 1.18cqw;
	font-weight: 950;
	letter-spacing: .075em;
	line-height: 1;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
}

.hal-gauge-cta__label {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hal-gauge-cta b {
	flex: 0 0 auto;
	font-size: 1.18em;
	line-height: .8;
}

.hal-gauge-cta--long {
	font-size: .91cqw;
	letter-spacing: .04em;
}

.hal-gauge-cta--very-long {
	font-size: .70cqw;
	letter-spacing: .018em;
}

.hal-gauge-cta--very-long .hal-gauge-cta__label {
	white-space: normal;
	line-height: 1.05;
	text-overflow: clip;
}

.hal-gauge-cta.is-full {
	text-transform: none;
}

.hal-gauge-cta.is-link {
	cursor: pointer;
	transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.hal-gauge-cta.is-link:hover,
.hal-gauge-cta.is-link:focus-visible {
	transform: translateX(-50%) translateY(-.08cqw);
	filter: brightness(1.12) saturate(1.06);
	box-shadow:
		inset 0 0 0 .055cqw rgba(255,255,255,.4),
		0 0 1cqw color-mix(in srgb, var(--hal-gold) 62%, transparent),
		0 .34cqw .68cqw rgba(0,0,0,.62) !important;
}

.hal-gauge-cta.is-link:focus-visible {
	outline: .1cqw solid #ffffff !important;
	outline-offset: .08cqw !important;
}

.hal-gauge-cta.is-static {
	cursor: default;
}

/* Theme- en widget-CSS mag geen eigen witte randen rond de prominente knop zetten. */
.widget .hal-app-shell .hal-app a.hal-gauge-cta,
.widget-area .hal-app-shell .hal-app a.hal-gauge-cta,
.sidebar .hal-app-shell .hal-app a.hal-gauge-cta,
.hal-app-shell .hal-app a.hal-gauge-cta {
	border: .07cqw solid color-mix(in srgb, var(--hal-gold) 72%, #6a4b0d) !important;
	border-radius: .35cqw !important;
	outline: 0 !important;
	text-decoration: none !important;
}

.hal-gauge {

	position: relative;
	align-self: center;
	justify-self: center;
	width: 14.20cqw;
	margin-top: 1.80cqw;
	aspect-ratio: 1;
	border: .13cqw solid #42464a;
	border-radius: 50%;
	background:
		radial-gradient(circle at 42% 31%, rgba(255,255,255,.10), transparent 22%),
		radial-gradient(circle at center, #111315 0 54%, #060708 56% 71%, #1c1f22 72% 74%, #050607 75% 100%);
	box-shadow:
		inset 0 0 0 .19cqw #090a0b,
		inset 0 0 1.35cqw rgba(255,255,255,.055),
		0 0 0 .17cqw #17191b,
		0 0 1.1cqw rgba(0,0,0,.82),
		0 0 1.4cqw color-mix(in srgb, var(--hal-stage-fill) 33%, transparent),
		0 .46cqw 1.1cqw rgba(0,0,0,.52);
	overflow: hidden;
}

.hal-gauge::after {
	content: "";
	position: absolute;
	inset: 10.8%;
	border-radius: 50%;
	background: linear-gradient(145deg, rgba(255,255,255,.045), transparent 30% 66%, rgba(255,255,255,.02));
	pointer-events: none;
}

.hal-gauge__ring {
	position: absolute;
	inset: 4.5%;
	border-radius: 50%;
	background: conic-gradient(from 216deg, var(--hal-stage-fill) 0deg var(--hal-progress-angle), rgba(255,255,255,.075) var(--hal-progress-angle) 252deg, transparent 252deg 360deg);
	filter: drop-shadow(0 0 .42cqw var(--hal-stage-glow));
	-webkit-mask: radial-gradient(circle, transparent 0 76%, #000 77% 84%, transparent 85%);
	mask: radial-gradient(circle, transparent 0 76%, #000 77% 84%, transparent 85%);
	opacity: .24;
	transition: opacity .24s linear;
}

.hal-app.is-animating .hal-gauge__ring,
.hal-app.is-ready .hal-gauge__ring {
	opacity: 1;
}

.hal-gauge__ticks,
.hal-gauge__ticks i {
	position: absolute;
	inset: 0;
}

.hal-gauge__ticks i {
	transform: rotate(var(--hal-tick-angle));
}

.hal-gauge__ticks i::before {
	content: "";
	position: absolute;
	left: 49.72%;
	top: 4.8%;
	width: .11cqw;
	height: .58cqw;
	border-radius: .1cqw;
	background: rgba(255,255,255,.54);
	box-shadow: 0 0 .18cqw rgba(255,255,255,.18);
}

.hal-gauge__needle {
	position: absolute;
	inset: 0;
	transform: rotate(var(--hal-needle-angle));
}

.hal-gauge__needle b {
	position: absolute;
	left: 50%;
	top: 17.8%;
	width: var(--hal-needle-width);
	height: 32.6%;
	transform: translateX(-50%) scaleY(var(--hal-needle-length-scale, 1));
	transform-origin: center 100%;
	clip-path: polygon(50% 0, 84% 12%, 71% 100%, 29% 100%, 16% 12%);
	background:
		linear-gradient(90deg,
			color-mix(in srgb, var(--hal-needle-color) 68%, #150302) 0%,
			color-mix(in srgb, var(--hal-needle-color) 92%, #6e0d08) 25%,
			#fff2e7 48%,
			color-mix(in srgb, var(--hal-needle-color) 88%, #ff7d67) 62%,
			color-mix(in srgb, var(--hal-needle-color) 72%, #240503) 100%);
	filter:
		drop-shadow(0 .08cqw .06cqw rgba(0,0,0,.9))
		drop-shadow(0 0 .42cqw color-mix(in srgb, var(--hal-needle-color) 82%, transparent));
}

.hal-gauge__needle b::before {
	content: "";
	position: absolute;
	left: 42%;
	top: 7%;
	width: 16%;
	height: 86%;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.28) 54%, rgba(255,255,255,.08));
	opacity: .78;
}

.hal-gauge__needle b::after {
	content: "";
	position: absolute;
	left: 18%;
	bottom: 0;
	width: 64%;
	height: 18%;
	border-radius: 45%;
	background: color-mix(in srgb, var(--hal-needle-color) 72%, #080808);
	box-shadow: inset 0 .07cqw .12cqw rgba(255,255,255,.24);
}

.hal-gauge__hub {
	position: absolute;
	z-index: 4;
	left: 50%;
	top: 50%;
	width: 1.62cqw;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border: .13cqw solid color-mix(in srgb, var(--hal-gold) 42%, #4f5356);
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 27%, #a9adb0 0 7%, #4e5357 9%, #17191b 30%, #030404 67%),
		linear-gradient(145deg, #34383b, #050606);
	box-shadow:
		inset 0 0 0 .12cqw rgba(255,255,255,.055),
		inset 0 -.22cqw .35cqw rgba(0,0,0,.72),
		0 0 0 .09cqw #050606,
		0 0 .54cqw rgba(0,0,0,.9),
		0 0 .38cqw color-mix(in srgb, var(--hal-needle-color) 48%, transparent);
}

.hal-gauge__hub::after {
	content: "";
	position: absolute;
	inset: 31%;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 30%, #bfc2c4, #242729 38%, #050606 74%);
	box-shadow: inset 0 0 .12cqw rgba(255,255,255,.24);
}



/* Wijzerdikte: vaste, veilige modellen die altijd proportioneel schalen. */
.hal-needle-thickness-slim { --hal-needle-width: .30cqw; }
.hal-needle-thickness-normal { --hal-needle-width: .43cqw; }
.hal-needle-thickness-thick { --hal-needle-width: .58cqw; }
.hal-needle-thickness-extra { --hal-needle-width: .76cqw; }

/* Klassiek: lang, rustig en tijdloos met een afgeronde metalen rug. */
.hal-needle-style-classic .hal-gauge__needle b {
	top: 19.2%;
	height: 31.4%;
	clip-path: polygon(50% 0, 69% 9%, 62% 100%, 38% 100%, 31% 9%);
	border-radius: 50% 50% 16% 16%;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--hal-needle-color) 56%, #120201),
		color-mix(in srgb, var(--hal-needle-color) 88%, #e8b8a9) 42%,
		#fff5ed 50%,
		color-mix(in srgb, var(--hal-needle-color) 90%, #f4c3b2) 58%,
		color-mix(in srgb, var(--hal-needle-color) 58%, #120201));
}
.hal-needle-style-classic .hal-gauge__needle b::before {
	left: 46%;
	width: 8%;
	opacity: .86;
}
.hal-needle-style-classic .hal-gauge__needle b::after {
	left: 24%;
	width: 52%;
	height: 14%;
}

/* Sport: scherpere punt, langere slag en agressieve schouders. */
.hal-needle-style-sport .hal-gauge__needle b {
	top: 14.5%;
	height: 36.2%;
	clip-path: polygon(50% 0, 94% 22%, 69% 100%, 31% 100%, 6% 22%);
	background: linear-gradient(90deg,
		#150202 0%,
		color-mix(in srgb, var(--hal-needle-color) 94%, #5b0905) 24%,
		#fff1e4 48%,
		color-mix(in srgb, var(--hal-needle-color) 96%, #ff745e) 61%,
		#180202 100%);
	filter:
		drop-shadow(0 .09cqw .08cqw rgba(0,0,0,.92))
		drop-shadow(0 0 .54cqw color-mix(in srgb, var(--hal-needle-color) 88%, transparent));
}
.hal-needle-style-sport .hal-gauge__needle b::before {
	left: 45%;
	width: 10%;
	height: 91%;
	top: 3%;
}
.hal-needle-style-sport .hal-gauge__needle b::after {
	left: 10%;
	width: 80%;
	height: 15%;
	border-radius: 18%;
}

/* Luxe metallic: het aanbevolen model en de visuele opvolger van 0.7.1. */
.hal-needle-style-luxury .hal-gauge__needle b {
	top: 17.8%;
	height: 32.6%;
	clip-path: polygon(50% 0, 84% 12%, 71% 100%, 29% 100%, 16% 12%);
}

/* Performance: brede blade met donkere middenrib en sterke machinale rand. */
.hal-needle-style-performance .hal-gauge__needle b {
	top: 16.2%;
	height: 34.2%;
	clip-path: polygon(50% 0, 88% 16%, 82% 91%, 68% 100%, 32% 100%, 18% 91%, 12% 16%);
	background:
		linear-gradient(90deg,
			#090909 0 10%,
			color-mix(in srgb, var(--hal-needle-color) 76%, #1b0302) 11% 32%,
			#e6e7e8 33% 43%,
			#3a3d3f 44% 56%,
			#fff 57% 64%,
			color-mix(in srgb, var(--hal-needle-color) 92%, #b9281d) 65% 89%,
			#090909 90% 100%);
	box-shadow: inset 0 0 .08cqw rgba(255,255,255,.35);
}
.hal-needle-style-performance .hal-gauge__needle b::before {
	left: 47%;
	top: 5%;
	width: 6%;
	height: 88%;
	background: linear-gradient(180deg, #181a1b, rgba(0,0,0,.18));
	opacity: .92;
}
.hal-needle-style-performance .hal-gauge__needle b::after {
	left: 8%;
	width: 84%;
	height: 20%;
	border-radius: 20%;
}

/* Futuristisch: dubbel lichtprofiel met open middenbaan. */
.hal-needle-style-futuristic .hal-gauge__needle b {
	top: 14.8%;
	height: 35.6%;
	clip-path: polygon(50% 0, 92% 18%, 75% 100%, 25% 100%, 8% 18%);
	background:
		linear-gradient(90deg,
			transparent 0 12%,
			color-mix(in srgb, var(--hal-needle-color) 88%, #260403) 13% 35%,
			#f7e7df 36% 43%,
			transparent 44% 56%,
			#fff 57% 64%,
			color-mix(in srgb, var(--hal-needle-color) 96%, #ff6e58) 65% 87%,
			transparent 88% 100%);
	filter:
		drop-shadow(0 .08cqw .08cqw rgba(0,0,0,.95))
		drop-shadow(0 0 .68cqw color-mix(in srgb, var(--hal-needle-color) 92%, transparent));
}
.hal-needle-style-futuristic .hal-gauge__needle b::before {
	left: 48%;
	top: 10%;
	width: 4%;
	height: 78%;
	background: color-mix(in srgb, var(--hal-gold) 62%, #ffffff);
	box-shadow: 0 0 .22cqw color-mix(in srgb, var(--hal-gold) 70%, transparent);
	opacity: .72;
}
.hal-needle-style-futuristic .hal-gauge__needle b::after {
	left: 15%;
	width: 70%;
	height: 18%;
	background:
		radial-gradient(circle at 50% 40%, #c8cccf 0 9%, #2d3032 13% 38%, #070808 42% 100%);
}

.hal-gauge__value {
	position: absolute;
	z-index: 5;
	left: 50%;
	top: 64.2%;
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	justify-content: center;
	width: 82%;
	min-width: 0;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	color: var(--hal-stage-fill);
	filter: drop-shadow(0 0 .62cqw var(--hal-stage-glow));
}

.hal-gauge__value strong {
	display: block;
	flex: 0 0 auto;
	font-size: 5.30cqw;
	font-weight: 760;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.06em;
	line-height: .84;
	white-space: nowrap;
	word-break: keep-all;
	overflow-wrap: normal;
}

.hal-gauge__value span {
	margin: 0 0 .1cqw .18cqw;
	font-size: 1.74cqw;
	font-weight: 700;
	line-height: 1;
}

.hal-gauge__caption {
	position: absolute;
	z-index: 6;
	left: 50%;
	bottom: 5.8%;
	transform: translateX(-50%);
	color: rgba(255,255,255,.64);
	font-size: .52cqw;
	font-weight: 760;
	letter-spacing: .12em;
	white-space: nowrap;
}

.hal-screen__footer {
	position: absolute;
	z-index: 5;
	left: 27.5%;
	right: 4%;
	bottom: 3.1%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: .28cqw;
	border-top: .05cqw solid rgba(255,255,255,.045);
	color: rgba(255,255,255,.34);
	font-size: .42cqw;
	font-weight: 720;
	letter-spacing: .11em;
}

.hal-screen__footer span {
	display: flex;
	align-items: center;
	gap: .22cqw;
}

.hal-screen__footer i {
	display: block;
	width: .27cqw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--hal-gold);
	box-shadow: 0 0 .24cqw color-mix(in srgb, var(--hal-gold) 42%, transparent);
}

.hal-stage-critical .hal-screen,
.hal-stage-full .hal-screen {
	animation: hal-critical-pulse 2.2s ease-in-out infinite;
}

@keyframes hal-critical-pulse {
	0%, 100% { box-shadow: inset 0 0 0 .08cqw rgba(255,255,255,.035), 0 0 1.15cqw rgba(0,0,0,.7), 0 0 .62cqw color-mix(in srgb, var(--hal-stage-fill) 18%, transparent); }
	50% { box-shadow: inset 0 0 0 .08cqw rgba(255,255,255,.035), 0 0 1.15cqw rgba(0,0,0,.7), 0 0 1.35cqw color-mix(in srgb, var(--hal-stage-fill) 47%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
	.hal-app *,
	.hal-app *::before,
	.hal-app *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* Responsive rule: JavaScript scales the complete fixed canvas as one unit.
 * No internal grid, text, control or instrument is rearranged or hidden. */



/* Strenge bescherming tegen thema-randen rond dashboardknoppen. */
.hal-app-shell .hal-app .hal-aux-button,
.hal-app-shell .hal-app a.hal-aux-button,
.widget .hal-app-shell .hal-app .hal-aux-button,
.widget-area .hal-app-shell .hal-app .hal-aux-button,
.sidebar .hal-app-shell .hal-app .hal-aux-button {
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* v0.14.0 — luxe vaste instrumenten rechts van de meter. */
.hal-instrument-stack {
	display: flex;
	flex-direction: column;
	align-self: center;
	gap: .42cqw;
	width: 100%;
	padding-left: .42cqw;
}

.hal-control-panel {
	position: relative;
	min-height: 3.05cqw;
	padding: .38cqw .45cqw;
	overflow: hidden;
	border: .06cqw solid color-mix(in srgb, var(--hal-gold) 30%, #292c2f);
	border-radius: .38cqw;
	background:
		linear-gradient(145deg, rgba(255,255,255,.055), transparent 35%),
		linear-gradient(165deg, rgba(23,26,29,.97), rgba(3,4,5,.99));
	box-shadow:
		inset 0 0 .7cqw rgba(255,255,255,.025),
		0 .18cqw .42cqw rgba(0,0,0,.36);
}

.hal-control-panel > small {
	display: block;
	margin-bottom: .22cqw;
	color: var(--hal-gold);
	font-size: .44cqw;
	font-weight: 850;
	letter-spacing: .14em;
}

.hal-twin-dials {
	display: flex;
	justify-content: space-around;
	gap: .35cqw;
}

.hal-small-dial {
	position: relative;
	display: grid;
	place-items: end center;
	width: 1.55cqw;
	aspect-ratio: 1;
	padding-bottom: .12cqw;
	border: .08cqw solid rgba(255,255,255,.16);
	border-top-color: var(--hal-gold);
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 55%, #050607 0 46%, #181b1e 48% 60%, #050607 62%);
	box-shadow: inset 0 0 .32cqw rgba(255,255,255,.055), 0 0 .32cqw rgba(0,0,0,.7);
}

.hal-small-dial::before {
	content: "";
	position: absolute;
	inset: 14%;
	border-radius: 50%;
	background: repeating-conic-gradient(from -115deg, rgba(255,255,255,.48) 0 1deg, transparent 1deg 24deg);
	-webkit-mask: radial-gradient(circle, transparent 0 70%, #000 72% 100%);
	mask: radial-gradient(circle, transparent 0 70%, #000 72% 100%);
}

.hal-small-dial i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: .08cqw;
	height: .58cqw;
	transform-origin: 50% 100%;
	transform: translate(-50%,-100%) rotate(38deg);
	border-radius: 99px;
	background: var(--hal-gold);
	box-shadow: 0 0 .28cqw color-mix(in srgb, var(--hal-gold) 55%, transparent);
}

.hal-small-dial--temp i { transform: translate(-50%,-100%) rotate(-32deg); }

.hal-small-dial b {
	position: relative;
	z-index: 2;
	color: rgba(255,255,255,.68);
	font-size: .3cqw;
	letter-spacing: .06em;
}

.hal-toggle-bank {
	display: flex;
	justify-content: space-between;
	gap: .2cqw;
}

.hal-toggle-bank span {
	display: grid;
	place-items: center;
	gap: .12cqw;
	width: 31%;
}

.hal-toggle-bank i {
	position: relative;
	display: block;
	width: 1.25cqw;
	height: .62cqw;
	border: .05cqw solid rgba(255,255,255,.13);
	border-radius: 99px;
	background: linear-gradient(180deg, #171a1d, #050607);
	box-shadow: inset 0 0 .22cqw rgba(0,0,0,.8);
}

.hal-toggle-bank i::after {
	content: "";
	position: absolute;
	left: .08cqw;
	top: 50%;
	width: .46cqw;
	aspect-ratio: 1;
	transform: translateY(-50%);
	border-radius: 50%;
	background: linear-gradient(145deg, #8b8f92, #24272a);
	box-shadow: 0 .05cqw .12cqw rgba(0,0,0,.75);
}

.hal-toggle-bank .is-on i::after {
	left: .67cqw;
	background: radial-gradient(circle at 35% 30%, #fff5c4 0 15%, var(--hal-gold) 35%, #70520e 100%);
	box-shadow: 0 0 .3cqw color-mix(in srgb, var(--hal-gold) 60%, transparent);
}

.hal-toggle-bank b {
	color: rgba(255,255,255,.58);
	font-size: .31cqw;
	font-weight: 760;
	letter-spacing: .055em;
}

.hal-status-lights {
	display: flex;
	gap: .24cqw;
	margin-bottom: .32cqw;
}

.hal-status-lights i {
	display: block;
	width: .42cqw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--hal-gold);
	box-shadow: 0 0 .3cqw color-mix(in srgb, var(--hal-gold) 50%, transparent);
}

.hal-status-lights i:nth-child(4),
.hal-status-lights i:nth-child(5) { opacity: .28; }

.hal-status-bars {
	display: flex;
	align-items: flex-end;
	gap: .18cqw;
	height: .75cqw;
}

.hal-status-bars i {
	display: block;
	width: .24cqw;
	height: 42%;
	border-radius: .06cqw;
	background: linear-gradient(180deg, #ffeaa2, var(--hal-gold));
	box-shadow: 0 0 .22cqw color-mix(in srgb, var(--hal-gold) 35%, transparent);
}
.hal-status-bars i:nth-child(2) { height: 68%; }
.hal-status-bars i:nth-child(3) { height: 92%; }
.hal-status-bars i:nth-child(4) { height: 58%; opacity: .5; }