/* Lumex SM-86: charcoal casing, silk-screen legends, LED segments. */
:root {
	--case: #232427;
	--case-hi: #2f3034;
	--case-lo: #161719;
	--silk: #c9c6bd;
	--silk-dim: #8b8a86;
	--amber: #ffb02e;
	--green: #4dff7a;
	--red: #ff3b30;
	--glass: #0a0c0a;
	--stripe-1: #e8572b;
	--stripe-2: #f2a33a;
	--font-ui: "Archivo Narrow", "Arial Narrow", sans-serif;
	--font-brand: "Michroma", "Archivo Narrow", sans-serif;
}

html,
body {
	background: #0c0c0d;
	color: var(--silk);
	font-family: var(--font-ui);
	overscroll-behavior: none;
}

html,
body,
#root {
	margin: 0;
	background: var(--case);
}

.scene {
	position: relative;
	height: 100dvh;
	min-height: 100svh;
	display: flex;
	overflow: hidden;
}

/* The feed only supplies frames to the spot window; it is never shown full-screen. */
.camera-feed {
	position: fixed;
	left: 0;
	top: 0;
	width: 2px;
	height: 2px;
	opacity: 0;
	pointer-events: none;
}

/* ---------- Casing ---------- */
.device {
	position: relative;
	z-index: 2;
	width: 100%;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: max(10px, env(safe-area-inset-top)) 16px 0;
	padding-bottom: env(safe-area-inset-bottom);
	border-radius: 0;
	/* Smooth flat grey casing with a few faint handling scratches. */
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 1200' preserveAspectRatio='none'%3E%3Cpath d='M194 181Q322 215 436 257' stroke='%23000' stroke-opacity='0.109' stroke-width='0.61' fill='none' stroke-linecap='round'/%3E%3Cpath d='M144 661Q178 615 197 567' stroke='%23fff' stroke-opacity='0.05' stroke-width='0.89' fill='none' stroke-linecap='round'/%3E%3Cpath d='M28 1030Q77 1041 120 1064' stroke='%23fff' stroke-opacity='0.059' stroke-width='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M58 855Q69 818 86 779' stroke='%23000' stroke-opacity='0.145' stroke-width='0.55' fill='none' stroke-linecap='round'/%3E%3Cpath d='M477 839Q523 882 577 909' stroke='%23fff' stroke-opacity='0.036' stroke-width='0.61' fill='none' stroke-linecap='round'/%3E%3Cpath d='M454 182Q510 64 554 -49' stroke='%23fff' stroke-opacity='0.065' stroke-width='0.7' fill='none' stroke-linecap='round'/%3E%3Cpath d='M348 547Q356 531 358 520' stroke='%23000' stroke-opacity='0.158' stroke-width='0.74' fill='none' stroke-linecap='round'/%3E%3Cpath d='M267 860Q281 863 306 880' stroke='%23fff' stroke-opacity='0.068' stroke-width='0.46' fill='none' stroke-linecap='round'/%3E%3Cpath d='M149 469Q152 440 168 413' stroke='%23fff' stroke-opacity='0.058' stroke-width='0.75' fill='none' stroke-linecap='round'/%3E%3Cpath d='M592 819Q611 806 638 794' stroke='%23000' stroke-opacity='0.159' stroke-width='0.53' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 503Q82 375 147 243' stroke='%23fff' stroke-opacity='0.067' stroke-width='0.63' fill='none' stroke-linecap='round'/%3E%3Cpath d='M523 1142Q539 1145 551 1162' stroke='%23fff' stroke-opacity='0.033' stroke-width='0.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M97 408Q159 354 217 313' stroke='%23000' stroke-opacity='0.121' stroke-width='0.59' fill='none' stroke-linecap='round'/%3E%3Cpath d='M381 1147Q448 1188 516 1230' stroke='%23fff' stroke-opacity='0.034' stroke-width='0.45' fill='none' stroke-linecap='round'/%3E%3Cpath d='M206 318Q215 290 218 248' stroke='%23fff' stroke-opacity='0.068' stroke-width='0.55' fill='none' stroke-linecap='round'/%3E%3Cpath d='M386 109Q505 191 623 264' stroke='%23000' stroke-opacity='0.133' stroke-width='0.51' fill='none' stroke-linecap='round'/%3E%3Cpath d='M487 1182Q512 1122 546 1063' stroke='%23fff' stroke-opacity='0.067' stroke-width='0.89' fill='none' stroke-linecap='round'/%3E%3Cpath d='M474 567Q504 489 520 415' stroke='%23fff' stroke-opacity='0.041' stroke-width='0.51' fill='none' stroke-linecap='round'/%3E%3Cpath d='M118 245Q166 301 219 352' stroke='%23000' stroke-opacity='0.183' stroke-width='0.46' fill='none' stroke-linecap='round'/%3E%3Cpath d='M233 854Q249 830 254 791' stroke='%23fff' stroke-opacity='0.05' stroke-width='0.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M568 870Q699 923 841 966' stroke='%23fff' stroke-opacity='0.079' stroke-width='0.73' fill='none' stroke-linecap='round'/%3E%3Cpath d='M210 658Q223 638 227 628' stroke='%23000' stroke-opacity='0.199' stroke-width='0.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M524 34Q547 43 572 64' stroke='%23fff' stroke-opacity='0.076' stroke-width='0.58' fill='none' stroke-linecap='round'/%3E%3Cpath d='M275 700Q278 683 293 666' stroke='%23fff' stroke-opacity='0.074' stroke-width='0.79' fill='none' stroke-linecap='round'/%3E%3Cpath d='M365 931Q402 903 445 874' stroke='%23000' stroke-opacity='0.156' stroke-width='0.79' fill='none' stroke-linecap='round'/%3E%3Cpath d='M64 672Q106 574 163 463' stroke='%23fff' stroke-opacity='0.033' stroke-width='0.56' fill='none' stroke-linecap='round'/%3E%3Cpath d='M584 727Q621 747 667 765' stroke='%23fff' stroke-opacity='0.074' stroke-width='0.86' fill='none' stroke-linecap='round'/%3E%3Cpath d='M554 1071Q582 1088 624 1113' stroke='%23000' stroke-opacity='0.107' stroke-width='0.73' fill='none' stroke-linecap='round'/%3E%3Cpath d='M470 1076Q487 1060 516 1044' stroke='%23fff' stroke-opacity='0.067' stroke-width='0.45' fill='none' stroke-linecap='round'/%3E%3Cpath d='M531 195Q545 158 562 126' stroke='%23fff' stroke-opacity='0.035' stroke-width='0.58' fill='none' stroke-linecap='round'/%3E%3Cpath d='M203 550Q302 616 416 666' stroke='%23000' stroke-opacity='0.179' stroke-width='0.89' fill='none' stroke-linecap='round'/%3E%3Cpath d='M63 319Q121 279 168 234' stroke='%23fff' stroke-opacity='0.077' stroke-width='0.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M322 618Q334 592 334 574' stroke='%23fff' stroke-opacity='0.031' stroke-width='0.44' fill='none' stroke-linecap='round'/%3E%3Cpath d='M156 730Q185 718 213 693' stroke='%23000' stroke-opacity='0.127' stroke-width='0.46' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
			0 0 / 100% 100% no-repeat,
		#2a2b2e;
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.08),
		inset 0 -3px 0 rgba(0, 0, 0, 0.5),
		inset 3px 0 0 rgba(255, 255, 255, 0.03),
		0 30px 60px rgba(0, 0, 0, 0.6),
		0 2px 0 #050505;
	overflow: hidden;
}

.device-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	/* Clear the phone's notch / front camera cut-out. */
	margin-top: calc(env(safe-area-inset-top, 0px) + 24px);
}

.brand {
	display: grid;
	gap: 2px;
}

.brand-name {
	font-family: var(--font-brand);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #ece8dd;
	-webkit-text-stroke: 0.9px currentColor;
	text-shadow: 0 1px 0 #000;
}

.brand-model {
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--stripe-2);
	font-weight: 600;
}

.power {
	display: flex;
	align-items: center;
	gap: 10px;
}

.power .led {
	margin-top: 0;
}

.power .key-red {
	min-height: 44px;
	padding: 0 16px;
}

.power .key-red:disabled {
	opacity: 0.6;
	cursor: wait;
}


.led {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #3a0f0c;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
	margin-top: 14px;
}

.led-on {
	background: var(--red);
	box-shadow: 0 0 8px var(--red), 0 0 2px #fff inset;
}

.silk {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--silk);
}

/* ---------- Spot lens ---------- */
.lens-housing {
	display: grid;
	justify-items: center;
	gap: 6px;
	margin: 6px 0;
	--lens: min(64vw, 30dvh, 260px);
}

.lens-bezel {
	box-sizing: border-box;
	flex: none;
	width: var(--lens);
	height: var(--lens);
	padding: calc(var(--lens) * 0.055);
	border-radius: 50%;
	background:
		repeating-conic-gradient(from 0deg, #3a3b3f 0 2deg, #26272a 2deg 4deg);
	box-shadow:
		0 0 0 3px #0e0e0f,
		0 0 0 5px #3b3c40,
		0 10px 24px rgba(0, 0, 0, 0.7);
}

.lens-well {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: radial-gradient(circle at 35% 30%, #fafaf6, #cfcfc8 55%, #8d8d88);
	box-shadow: inset 0 0 0 4px #111, inset 0 6px 18px rgba(0, 0, 0, 0.6);
}

.lens {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.5s;
}

.lens-well.is-live .lens {
	opacity: 1;
}

.lens-well::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.35), transparent 28%),
		radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.45));
	box-shadow: inset 0 0 0 4px #111, inset 0 8px 20px rgba(0, 0, 0, 0.55);
	pointer-events: none;
}

.reticle {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.lens-well.is-live .reticle::before,
.lens-well.is-live .reticle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: rgba(255, 176, 46, 0.85);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.lens-well.is-live .reticle::before {
	width: 18px;
	height: 1.5px;
	transform: translate(-50%, -50%);
}

.lens-well.is-live .reticle::after {
	width: 1.5px;
	height: 18px;
	transform: translate(-50%, -50%);
}

.lens-status {
	position: absolute;
	inset: 18%;
	z-index: 2;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 10px;
	text-align: center;
	color: #2a2a2a;
	font-size: 14px;
	line-height: 1.3;
}

.lens-status p {
	margin: 0;
}

.lens-btn {
	padding: 10px 16px;
	min-height: 44px;
	border-radius: 6px;
	border: 1px solid #111;
	background: linear-gradient(#3a3b3f, #1c1d20);
	color: #eee;
	font: 600 13px var(--font-ui);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 3px 0 #000;
}

.lens-btn:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 #000;
}

.lens-caption {
	margin: 0;
	color: var(--silk-dim);
	font-size: 10px;
}

/* ---------- LCD window ---------- */
.lcd {
	display: grid;
	gap: 10px;
	padding: 12px;
	border-radius: 8px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%),
		radial-gradient(ellipse at 50% 0%, #121612, var(--glass));
	border: 2px solid #050505;
	box-shadow:
		inset 0 0 0 1px #2b2c2f,
		inset 0 4px 14px rgba(0, 0, 0, 0.9),
		0 1px 0 rgba(255, 255, 255, 0.06);
}

.lcd-row {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
}

.lcd-main {
	padding: 8px 0;
	border-top: 1px solid #1d221d;
	border-bottom: 1px solid #1d221d;
}

.readout {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.lcd-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8f9a8e;
	white-space: nowrap;
}

.lcd-label em {
	font-style: normal;
	margin-left: 4px;
	padding: 0 4px;
	border-radius: 2px;
}

.tag-set {
	color: #0a0a0a;
	background: var(--amber);
}

.tag-calc {
	color: var(--green);
	border: 1px solid rgba(77, 255, 122, 0.5);
}

.lamps {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 110px;
	justify-content: flex-end;
}

.lamp {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 1px 4px;
	border-radius: 2px;
	color: #2d332d;
	border: 1px solid #1f241f;
}

.lamp.on {
	color: var(--green);
	border-color: rgba(77, 255, 122, 0.5);
	text-shadow: 0 0 6px var(--green);
}

.lamp.on.amber {
	color: var(--amber);
	border-color: rgba(255, 176, 46, 0.5);
	text-shadow: 0 0 6px var(--amber);
}

.lamp.on.red {
	color: var(--red);
	border-color: rgba(255, 59, 48, 0.5);
	text-shadow: 0 0 6px var(--red);
}

/* Segment digits */
.seg {
	display: block;
	max-width: 100%;
}

.seg-sm {
	height: 22px;
}

.seg-md {
	height: 30px;
}

.seg-xl {
	height: clamp(46px, 13vw, 58px);
}

.seg-ghost {
	fill: rgba(255, 255, 255, 0.035);
}

.seg-amber .seg-lit {
	fill: var(--amber);
	filter: drop-shadow(0 0 3px rgba(255, 176, 46, 0.75));
}

.seg-green .seg-lit {
	fill: var(--green);
	filter: drop-shadow(0 0 3px rgba(77, 255, 122, 0.7));
}

.seg-red .seg-lit {
	fill: var(--red);
	filter: drop-shadow(0 0 3px rgba(255, 59, 48, 0.8));
}

.blink .seg-lit,
.lamp.blink,
.ladder-led.blink {
	animation: blink 0.6s steps(2, start) infinite;
}

@keyframes blink {
	to {
		opacity: 0.15;
	}
}

/* Over / under ladder */
.lcd-dev {
	align-items: center;
	flex-wrap: nowrap;
}

.ladder {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: 4px;
}

.ladder-leds {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2px;
}

.ladder-led {
	flex: 1;
	max-width: 8px;
	height: 12px;
	border-radius: 1px;
	background: #2a0e0c;
}

.ladder-led.whole {
	height: 18px;
}

.ladder-led.zero {
	background: #0e2a14;
}

.ladder-led.on {
	background: var(--red);
	box-shadow: 0 0 8px var(--red);
}

.ladder-led.zero.on {
	background: var(--green);
	box-shadow: 0 0 8px var(--green);
}

.ladder-scale {
	display: flex;
	justify-content: space-between;
	font-size: 9px;
	color: #6f786e;
	font-variant-numeric: tabular-nums;
}

.readout-dev {
	flex: none;
	justify-items: end;
}

/* ---------- Controls ---------- */
.controls {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: 8px;
	margin: 8px 0;
}

.device > .stripe {
	flex: none;
	margin-bottom: calc(-1 * env(safe-area-inset-bottom));
}

.device > header,
.device > section {
	flex: none;
}

@media (max-height: 720px) {
	.lcd {
		gap: 6px;
		padding: 8px 10px;
	}

	.seg-xl {
		height: clamp(38px, 6.5dvh, 50px);
	}

	.seg-md {
		height: 24px;
	}

	.brand-name {
		font-size: 18px;
	}
}

.dial-unit,
.toggle-unit {
	display: grid;
	justify-items: center;
	gap: 8px;
}

.dial {
	position: relative;
	width: 92px;
	height: 92px;
	touch-action: none;
	cursor: grab;
	border-radius: 50%;
}

.dial:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 4px;
}

.dial-skirt {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		conic-gradient(from -135deg, transparent 0 270deg, transparent 270deg),
		repeating-conic-gradient(from -135deg, var(--silk-dim) 0 1deg, transparent 1deg 15deg);
	-webkit-mask: radial-gradient(circle, transparent 41px, #000 42px, #000 46px, transparent 46px);
	mask: radial-gradient(circle, transparent 41px, #000 42px, #000 46px, transparent 46px);
}

.dial-knob {
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #2b2c30 0 44%, transparent 45%),
		repeating-conic-gradient(#3d3e42 0 4deg, #1a1b1d 4deg 8deg);
	box-shadow:
		0 6px 10px rgba(0, 0, 0, 0.7),
		0 0 0 2px #0b0b0c,
		inset 0 2px 1px rgba(255, 255, 255, 0.12);
	transition: transform 0.08s ease-out;
}

.dial-knob::after {
	content: "";
	position: absolute;
	inset: 24%;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 30%, #4a4b50, #1e1f22 70%);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 1px 2px #000;
}

.dial-pointer {
	position: absolute;
	left: 50%;
	top: 6px;
	width: 4px;
	height: 18px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--stripe-2);
	box-shadow: 0 0 4px rgba(242, 163, 58, 0.6);
	z-index: 1;
}

.dial-hint {
	display: flex;
	justify-content: space-between;
	width: 76px;
	margin-top: -6px;
	font-size: 14px;
	color: var(--silk-dim);
}

/* Toggle switch */
.toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--silk-dim);
	font: 700 13px var(--font-ui);
	letter-spacing: 0.08em;
	cursor: pointer;
}

.toggle-side.active {
	color: var(--amber);
	text-shadow: 0 0 6px rgba(255, 176, 46, 0.6);
}

.toggle-plate {
	position: relative;
	width: 46px;
	height: 26px;
	border-radius: 4px;
	background: linear-gradient(#bdbcb7, #7b7a76);
	box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(0, 0, 0, 0.7);
}

.toggle-nut {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #f1f0ec, #8a8985);
	box-shadow: 0 0 0 2px #5d5c58;
}

.toggle-lever {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24px;
	height: 6px;
	margin-top: -3px;
	border-radius: 3px;
	background: linear-gradient(#f5f4ef, #9b9a95);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
	transform-origin: 0 50%;
	transform: rotate(180deg);
	transition: transform 0.12s cubic-bezier(0.5, 1.8, 0.5, 1);
	z-index: 1;
}

.toggle.is-on .toggle-lever {
	transform: rotate(0deg);
}

.controls .toggle-unit {
	padding-top: 26px;
}

.controls .toggle {
	flex-direction: column;
	gap: 4px;
}

.controls .toggle-plate {
	width: 26px;
	height: 46px;
}

.controls .toggle-lever {
	width: 6px;
	height: 24px;
	left: 50%;
	top: 50%;
	margin: 0 0 0 -3px;
	transform-origin: 50% 0;
	transform: rotate(180deg);
}

.controls .toggle.is-on .toggle-lever {
	transform: rotate(0deg);
}

/* Keys */
.keys {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 14px;
	padding: 14px 0 6px;
	border-top: 1px solid #111;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.cal,
.hold {
	display: grid;
	gap: 8px;
}

.hold {
	justify-items: end;
}

.cal-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cal-window {
	padding: 6px 8px;
	border-radius: 4px;
	background: var(--glass);
	box-shadow: inset 0 2px 6px #000, 0 0 0 1px #2b2c2f;
}

.key {
	min-width: 48px;
	min-height: 48px;
	padding: 0 14px;
	border-radius: 7px;
	border: 1px solid #070707;
	background: linear-gradient(#4a4b50, #2a2b2f 60%, #222327);
	color: #e8e6df;
	font: 700 18px var(--font-ui);
	letter-spacing: 0.06em;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 5px 0 #0a0a0b,
		0 7px 10px rgba(0, 0, 0, 0.5);
	transition: transform 0.05s, box-shadow 0.05s;
}

.key-red {
	min-width: 104px;
	font-size: 14px;
	text-transform: uppercase;
	background: linear-gradient(#e2533c, #b8321f 60%, #9e2817);
	color: #fff4ea;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 5px 0 #4a120a,
		0 7px 10px rgba(0, 0, 0, 0.5);
}

.key:active,
.key.is-down {
	transform: translateY(4px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 1px 0 #0a0a0b,
		0 2px 4px rgba(0, 0, 0, 0.5);
}

.key-red.is-down {
	box-shadow:
		inset 0 2px 6px rgba(0, 0, 0, 0.4),
		0 1px 0 #4a120a;
}

.key:focus-visible,
.toggle:focus-visible,
.lens-btn:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}

.device-note {
	margin: 10px 0 14px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--silk-dim);
}

.stripe {
	height: 14px;
	margin: 0 -16px;
	background: linear-gradient(
		180deg,
		var(--stripe-1) 0 33%,
		var(--stripe-2) 33% 66%,
		#d9c9a3 66%
	);
}

@media (max-width: 360px) {
	.dial {
		width: 80px;
		height: 80px;
	}

	.dial-skirt {
		-webkit-mask: radial-gradient(circle, transparent 35px, #000 36px, #000 40px, transparent 40px);
		mask: radial-gradient(circle, transparent 35px, #000 36px, #000 40px, transparent 40px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.blink .seg-lit,
	.lamp.blink,
	.ladder-led.blink {
		animation: none;
	}

	.toggle-lever,
	.dial-knob {
		transition: none;
	}
}