/*
 * The living cross-section. Values are tokens; drawing-unit numbers (offsets, camera) are the canvas's
 * precomputed geometry (Xsection.dc.html), not layout sizes.
 *
 * Motion: draw 900 ms and base 200 ms on the one curve; stagger is delay only. Reduced motion shows
 * every final state at once (base.css zeroes durations).
 */

.xs-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.xs {
	/* "auto" labels switch on the drawing's own width, so a narrow panel on a wide screen gets balloons too. */
	container: xs / inline-size;

	/* Theme: light (on white panels) */
	--xs-bg: var(--surface);
	--xs-line: var(--ink-2);
	--xs-phantom: var(--control);
	--xs-side: var(--surface);
	--xs-end: var(--panel);
	--xs-hair: var(--control);
	--xs-wire-out: var(--ink-2);
	--xs-wire-in: var(--surface);
	--xs-coil: var(--ink-2);
	--xs-oring: var(--ink);
	--xs-shaft-side: var(--surface);
	--xs-shaft-end: var(--panel);
	--xs-shaft-hair: var(--line);
	--xs-leader: var(--ink-2);
	--xs-label-text: var(--ink);
	--xs-label-bg: var(--surface);
	--xs-ctx-text: var(--muted);
	--xs-leak: var(--ink);
	--xs-gasket: var(--ink);
	--xs-hi-outline: var(--ink);
	--xs-contact: var(--ink);
	--xs-tint: var(--orange-tint);
	--xs-h45: url(#xs-h45-l);
	--xs-h135: url(#xs-h135-l);
	--xs-hi45: url(#xs-hi45);
	--xs-hi135: url(#xs-hi135);

	/* Per-part paint, overridden by data-hl */
	--xs-face-side: var(--xs-side);
	--xs-face-end: var(--xs-end);
	--xs-face-hair: var(--xs-hair);
	--xs-face-line: var(--xs-line);
	--xs-collar-side: var(--xs-side);
	--xs-collar-end: var(--xs-end);
	--xs-collar-hair: var(--xs-hair);
	--xs-collar-line: var(--xs-line);
	--xs-f-face: var(--xs-h135);
	--xs-f-seat: var(--xs-h45);
	--xs-f-collar: var(--xs-h135);
	--xs-f-gland: var(--xs-h135);
	--xs-coil-fill: var(--xs-coil);
	--xs-oring-fill: var(--xs-oring);
	--xs-wire-out-c: var(--xs-wire-out);
	--xs-wire-in-c: var(--xs-wire-in);
	--xs-s-faces: var(--xs-line);
	--xs-s-springs: var(--xs-line);
	--xs-s-secondary: var(--xs-line);
	--xs-s-gland: var(--xs-line);
	--xs-s-collar: var(--xs-line);
	--xs-w-faces: 1.25;
	--xs-w-springs: 1.25;
	--xs-w-oring: 0;
	--xs-w-gland: 1.25;
	--xs-w-collar: 1.25;
	--xs-lc-faces: var(--xs-leader);
	--xs-lc-springs: var(--xs-leader);
	--xs-lc-secondary: var(--xs-leader);
	--xs-lc-gland: var(--xs-leader);
	--xs-lc-collar: var(--xs-leader);
	--xs-lw-faces: 1.4;
	--xs-lw-springs: 1.4;
	--xs-lw-secondary: 1.4;
	--xs-lw-gland: 1.4;
	--xs-lw-collar: 1.4;

	position: relative;
	width: 100%;
	color: var(--xs-label-text);
	font-family: var(--font-sans);
}

.xs--dark {
	--xs-bg: var(--ink);
	--xs-line: var(--on-dark);
	--xs-phantom: var(--on-dark-muted);
	--xs-side: var(--ink);
	--xs-end: var(--dark-line);
	--xs-hair: var(--muted);
	--xs-wire-out: var(--on-dark);
	--xs-wire-in: var(--dark-line);
	--xs-coil: var(--on-dark-muted);
	--xs-oring: var(--on-dark);
	--xs-shaft-side: var(--ink);
	--xs-shaft-end: var(--dark-line);
	--xs-shaft-hair: var(--dark-line);
	--xs-leader: var(--on-dark-muted);
	--xs-label-text: var(--surface);
	--xs-label-bg: var(--ink);
	--xs-ctx-text: var(--on-dark-muted);
	--xs-leak: var(--surface);
	--xs-gasket: var(--on-dark);
	--xs-hi-outline: var(--surface);
	--xs-contact: var(--surface);
	--xs-tint: var(--dark-line);
	--xs-h45: url(#xs-h45-d);
	--xs-h135: url(#xs-h135-d);
}

/* Detail view: a finer hatch so it stays about 6 px apart once enlarged. */
.xs[data-state="detail"] { --xs-h45: url(#xs-h45-lz); --xs-h135: url(#xs-h135-lz); --xs-hi45: url(#xs-hi45z); --xs-hi135: url(#xs-hi135z); }
.xs--dark[data-state="detail"] { --xs-h45: url(#xs-h45-dz); --xs-h135: url(#xs-h135-dz); }

/* Redline: one highlighted part, orange fill with ink hatch and a 2 px outline (trade-off 9). */
.xs[data-hl="faces"] {
	--xs-face-side: var(--orange);
	--xs-face-end: var(--orange-hover);
	--xs-face-hair: var(--ink);
	--xs-face-line: var(--xs-hi-outline);
	--xs-f-face: var(--xs-hi135);
	--xs-f-seat: var(--xs-hi45);
	--xs-s-faces: var(--xs-hi-outline);
	--xs-w-faces: 2;
	--xs-lc-faces: var(--orange);
	--xs-lw-faces: 2.4;
}

.xs[data-hl="springs"] {
	--xs-coil-fill: var(--orange);
	--xs-wire-out-c: var(--xs-hi-outline);
	--xs-wire-in-c: var(--orange);
	--xs-s-springs: var(--xs-hi-outline);
	--xs-w-springs: 2;
	--xs-lc-springs: var(--orange);
	--xs-lw-springs: 2.4;
}

.xs[data-hl="secondary"] {
	--xs-oring-fill: var(--orange);
	--xs-s-secondary: var(--xs-hi-outline);
	--xs-w-oring: 2;
	--xs-lc-secondary: var(--orange);
	--xs-lw-secondary: 2.4;
}

.xs[data-hl="collar"] {
	--xs-collar-side: var(--orange);
	--xs-collar-end: var(--orange-hover);
	--xs-collar-hair: var(--ink);
	--xs-collar-line: var(--xs-hi-outline);
	--xs-f-collar: var(--xs-hi135);
	--xs-s-collar: var(--xs-hi-outline);
	--xs-w-collar: 2;
	--xs-lc-collar: var(--orange);
	--xs-lw-collar: 2.4;
}

.xs[data-hl="gland"] {
	--xs-f-gland: var(--xs-hi135);
	--xs-s-gland: var(--xs-hi-outline);
	--xs-w-gland: 2;
	--xs-lc-gland: var(--orange);
	--xs-lw-gland: 2.4;
}

/* ---------- Box and frames ---------- */

.xs__box {
	position: relative;
	width: 100%;
	aspect-ratio: 680 / 600;
	overflow: hidden;
}

.xs__svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	display: block;
	overflow: hidden;
}

/* Stage frame: 1320 × 640 from 1024 px; below that the same SVG is cropped to the 680 × 600 fit window. */
.xs--stage .xs__box {
	aspect-ratio: 680 / 600;
}

.xs--stage .xs__svg {
	width: 194.1176%;
	height: 106.6667%;
	left: -61.7647%;
}

@media (min-width: 1024px) {
	.xs--stage .xs__box {
		aspect-ratio: 1320 / 640;
	}

	.xs--stage .xs__svg {
		width: 100%;
		height: 100%;
		left: 0;
	}
}

/* ---------- Paint ---------- */

.xs svg path,
.xs svg polygon,
.xs svg rect,
.xs svg ellipse {
	stroke-linejoin: round;
}

.xs-shaft-side { fill: var(--xs-shaft-side); }
.xs-shaft-hair { fill: none; stroke: var(--xs-shaft-hair); stroke-width: 0.6; }
.xs-shaft-end { fill: var(--xs-shaft-end); stroke: var(--xs-line); stroke-width: 1.25; }
.xs-line { fill: none; stroke: var(--xs-line); stroke-width: 1.25; }
.xs-phantom { fill: none; stroke: var(--xs-phantom); stroke-width: 1; stroke-dasharray: 14 4 3 4; }
.xs-gasket { fill: var(--xs-gasket); }
.xs-face-side { fill: var(--xs-face-side); stroke: var(--xs-face-line); stroke-width: 1.25; }
.xs-face-hair { fill: none; stroke: var(--xs-face-hair); stroke-width: 0.6; }
.xs-face-end { fill: var(--xs-face-end); stroke: var(--xs-face-line); stroke-width: 1.25; }
.xs-sect--face { fill: var(--xs-f-face); stroke: var(--xs-s-faces); stroke-width: var(--xs-w-faces); }
.xs-sect--seat { fill: var(--xs-f-seat); stroke: var(--xs-s-faces); stroke-width: var(--xs-w-faces); }
.xs-oring { fill: var(--xs-oring-fill); stroke: var(--xs-s-secondary); stroke-width: var(--xs-w-oring); }
.xs-head-side { fill: var(--xs-side); stroke: var(--xs-line); stroke-width: 1.25; }
.xs-head-hair { fill: none; stroke: var(--xs-hair); stroke-width: 0.6; }
.xs-head-end { fill: var(--xs-end); stroke: var(--xs-line); stroke-width: 1.25; }
.xs-sect--head { fill: var(--xs-h45); stroke: var(--xs-line); stroke-width: 1.25; }
.xs-wire-out { fill: none; stroke: var(--xs-wire-out-c); stroke-width: 18; stroke-linecap: round; }
.xs-wire-in { fill: none; stroke: var(--xs-wire-in-c); stroke-width: 14; stroke-linecap: round; }
.xs-coil { fill: var(--xs-coil-fill); stroke: var(--xs-s-springs); stroke-width: var(--xs-w-springs); }
.xs-collar-side { fill: var(--xs-collar-side); stroke: var(--xs-collar-line); stroke-width: 1.25; }
.xs-collar-hair { fill: none; stroke: var(--xs-collar-hair); stroke-width: 0.6; }
.xs-collar-end { fill: var(--xs-collar-end); stroke: var(--xs-collar-line); stroke-width: 1.25; }
.xs-sect--collar { fill: var(--xs-f-collar); stroke: var(--xs-s-collar); stroke-width: var(--xs-w-collar); }
.xs-collar-screw { fill: var(--xs-end); stroke: var(--xs-s-collar); stroke-width: var(--xs-w-collar); }
.xs-collar-tick { fill: none; stroke: var(--xs-s-collar); stroke-width: 1; }
.xs-sect--gland { fill: var(--xs-f-gland); stroke: var(--xs-s-gland); stroke-width: var(--xs-w-gland); }
.xs-gland-pin { fill: var(--xs-end); stroke: var(--xs-line); stroke-width: 1.25; }
.xs-centreline { fill: none; stroke: var(--xs-line); stroke-width: 0.75; stroke-dasharray: 24 4 4 4; }

/* Shaft: short in the fit frame, long in the stage frame and in the teardown. */
.xs-shaft--long { display: none; }
.xs[data-state="explode"] .xs-shaft--long { display: inline; }
.xs[data-state="explode"] .xs-shaft--short { display: none; }

@media (min-width: 1024px) {
	.xs--stage .xs-shaft--long { display: inline; }
	.xs--stage .xs-shaft--short { display: none; }
}

/* ---------- Leaders ---------- */

.xs-lead--faces { --lc: var(--xs-lc-faces); --lw: var(--xs-lw-faces); }
.xs-lead--springs { --lc: var(--xs-lc-springs); --lw: var(--xs-lw-springs); }
.xs-lead--secondary { --lc: var(--xs-lc-secondary); --lw: var(--xs-lw-secondary); }
.xs-lead--gland { --lc: var(--xs-lc-gland); --lw: var(--xs-lw-gland); }
.xs-lead--collar { --lc: var(--xs-lc-collar); --lw: var(--xs-lw-collar); }

.xs-lead__line {
	fill: none;
	stroke: var(--lc);
	stroke-width: var(--lw);
	stroke-dasharray: var(--len) var(--len);
	stroke-dashoffset: 0;
	transition: stroke-dashoffset var(--t-draw) var(--ease);
}

.xs-lead__dot {
	fill: var(--lc);
}

.xs[data-state="rest"] .xs-lead__line,
.xs[data-state="leaks"] .xs-lead__line,
.xs[data-state="detail"] .xs-lead__line,
.xs[data-labels="none"] .xs-lead__line {
	stroke-dashoffset: var(--len);
}

.xs-leaders {
	transition: opacity var(--t-base) var(--ease);
}

.xs[data-state="leaks"] .xs-leaders,
.xs[data-state="detail"] .xs-leaders {
	opacity: 0;
}

/* ---------- Parts: teardown, dimming, camera ---------- */

.xs-g {
	--d: 0ms;
	transition: transform var(--t-draw) var(--ease) var(--d), opacity var(--t-base) var(--ease);
}

.xs-g--head,
.xs-g--gland { --d: 60ms; }
.xs-g--spring { --d: 120ms; }
.xs-g--collar { --d: 180ms; }

.xs[data-state="explode"] .xs-g--collar { transform: translate(-118.76px, 0); }
.xs[data-state="explode"] .xs-g--spring { transform: translate(-91.35px, 0); }
.xs[data-state="explode"] .xs-g--head { transform: translate(-54.81px, 0); }
.xs[data-state="explode"] .xs-g--face { transform: translate(9.14px, 0); }
.xs[data-state="explode"] .xs-g--seat { transform: translate(36.54px, 0); }
.xs[data-state="explode"] .xs-g--gland { transform: translate(210.12px, 0); }

.xs-base,
.xs-centreline {
	transition: opacity var(--t-base) var(--ease);
}

/* Focus: everything but the highlighted part dims to 28 %. */
.xs:is([data-focus], [data-state="detail"]) :is(.xs-base, .xs-centreline, .xs-g:not(.xs-lead)) { opacity: 0.28; }
.xs:is([data-focus], [data-state="detail"])[data-hl="faces"] :is(.xs-g--face, .xs-g--seat):not(.xs-g--oring),
.xs[data-focus][data-hl="secondary"] .xs-g--oring,
.xs[data-focus][data-hl="springs"] .xs-g--spring,
.xs[data-focus][data-hl="collar"] .xs-g--collar,
.xs[data-focus][data-hl="gland"] .xs-g--gland { opacity: 1; }

.xs-cam {
	transform-origin: 0 0;
	transition: transform var(--t-draw) var(--ease);
}

/* Camera, fit frame (also the stage below 1024 px). */
.xs[data-state="explode"] .xs-cam { transform: translate(91.54px, 103.85px) scale(0.6538); }
.xs[data-state="detail"] .xs-cam { transform: translate(-515.69px, -313.8px) scale(2.2); }

/* Camera, stage frame. */
@media (min-width: 1024px) {
	.xs--stage[data-state="explode"] .xs-cam { transform: translate(40px, 0); }
	.xs--stage[data-state="detail"] .xs-cam { transform: translate(-629.06px, -461.2px) scale(2.8); }
	.xs--stage[data-state="leaks"] .xs-cam { transform: translate(2px, -51px) scale(1.4); }
}

/* ---------- Leak paths ---------- */

.xs-leak {
	fill: none;
	stroke: var(--xs-leak);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: var(--len) var(--len);
	stroke-dashoffset: var(--len);
	transition: stroke-dashoffset var(--t-draw) var(--ease);
}

.xs-leak-stops {
	fill: none;
	stroke: var(--orange);
	stroke-width: 3.5;
	stroke-linecap: round;
	opacity: 0;
	transition: opacity var(--t-base) var(--ease);
}

.xs-leaks {
	opacity: 0;
	transition: opacity var(--t-base) var(--ease);
}

.xs[data-state="leaks"] .xs-leaks { opacity: 1; }
.xs[data-state="leaks"] .xs-leak { stroke-dashoffset: 0; }
.xs[data-state="leaks"] .xs-leak--1 { transition-delay: 0ms; }
.xs[data-state="leaks"] .xs-leak--2 { transition-delay: 250ms; }
.xs[data-state="leaks"] .xs-leak--3 { transition-delay: 500ms; }
.xs[data-state="leaks"] .xs-leak--4 { transition-delay: 750ms; }
.xs[data-state="leaks"] .xs-leak-stops { opacity: 1; transition-delay: 1100ms; }

/* ---------- Detail of the faces ---------- */

.xs-detail {
	opacity: 0;
	transition: opacity var(--t-base) var(--ease);
}

.xs[data-state="detail"] .xs-detail {
	opacity: 1;
	transition-delay: var(--t-draw);
}

.xs-detail__contact { fill: none; stroke: var(--xs-contact); stroke-width: 3.5; }
.xs-detail__leads { fill: none; stroke: var(--xs-leader); stroke-width: 0.5; }
.xs-detail__dot { fill: var(--xs-leader); }
.xs-detail__hot { fill: var(--orange); }

/* ---------- Scan line (stage, on Play) ---------- */

.xs-scan {
	--scan-from: 0px;
	--scan-to: 1320px;
	opacity: 0;
	pointer-events: none;
}

.xs--fit .xs-scan { --scan-to: 680px; }

@media (max-width: 1023.98px) {
	.xs--stage .xs-scan { --scan-from: 420px; --scan-to: 1100px; }
}

.xs-scan__veil { fill: var(--xs-bg); fill-opacity: 0.88; }
.xs-scan__line { fill: none; stroke: var(--orange); stroke-width: 1.5; }

.xs[data-scan="run"] .xs-scan {
	animation: xs-scan calc(var(--t-draw) + var(--t-base)) var(--ease) both;
}

@keyframes xs-scan {
	0% { transform: translateX(var(--scan-from)); opacity: 1; }
	81.8% { transform: translateX(var(--scan-to)); opacity: 1; }
	100% { transform: translateX(var(--scan-to)); opacity: 0; }
}

/* ---------- HTML overlay: context labels, leak labels, detail labels ---------- */

.xs__overlay,
.xs__labels {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.xs__labels a {
	pointer-events: auto;
}

.xs-pos {
	position: absolute;
	left: var(--x-labels, var(--x-leaks, var(--x-detail)));
	top: var(--y-labels, var(--y-leaks, var(--y-detail)));
	transition: left var(--t-draw) var(--ease) var(--d, 0ms), top var(--t-draw) var(--ease) var(--d, 0ms), opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}

.xs[data-state="explode"] .xs-pos { left: var(--x-explode, var(--x-labels)); top: var(--y-explode, var(--y-labels)); }
.xs[data-state="leaks"] .xs-pos { left: var(--x-leaks, var(--x-labels)); top: var(--y-leaks, var(--y-labels)); }
.xs[data-state="detail"] .xs-pos { left: var(--x-detail, var(--x-labels)); top: var(--y-detail, var(--y-labels)); }

@media (max-width: 1023.98px) {
	.xs--stage .xs-pos { left: var(--nx-labels, var(--nx-leaks, var(--nx-detail))); top: var(--ny-labels, var(--ny-leaks, var(--ny-detail))); }
	.xs--stage[data-state="explode"] .xs-pos { left: var(--nx-explode, var(--nx-labels)); top: var(--ny-explode, var(--ny-labels)); }
	.xs--stage[data-state="leaks"] .xs-pos { left: var(--nx-leaks, var(--nx-labels)); top: var(--ny-leaks, var(--ny-labels)); }
	.xs--stage[data-state="detail"] .xs-pos { left: var(--nx-detail, var(--nx-labels)); top: var(--ny-detail, var(--ny-labels)); }
}

.xs-ctx,
.xs-leaklab,
.xs-det,
.xs-scantag,
.xs-lab__t {
	padding: var(--s4) var(--s8);
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-mono-sm);
	line-height: var(--wp--custom--line-height--mono);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	white-space: nowrap;
}

.xs-ctx,
.xs-leaklab,
.xs-mark,
.xs-det,
.xs-lab {
	opacity: 0;
	visibility: hidden;
}

.xs-ctx {
	transform: translate(-50%, -50%);
	color: var(--xs-ctx-text);
}

.xs:is([data-state="labels"], [data-state="explode"], [data-state="leaks"]):not([data-labels="none"]) .xs-ctx {
	opacity: 1;
	visibility: visible;
	transition-delay: var(--d, 0ms), var(--d, 0ms), 300ms, 0s;
}

.xs-leaklab {
	transform: translate(-50%, -50%);
	color: var(--xs-label-text);
}

.xs-leaklab--atmos {
	background: var(--xs-label-bg);
	transform: translate(-100%, -50%);
}

@media (min-width: 1024px) {
	.xs--stage .xs-leaklab--atmos { transform: translate(0, -50%); }
}

.xs-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--s24);
	height: var(--s24);
	border: 1px solid var(--xs-label-text);
	border-radius: var(--r-pill);
	background: var(--xs-label-bg);
	color: var(--xs-label-text);
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-mono-sm);
	line-height: 1;
	transform: translate(-50%, -50%);
}

.xs[data-state="leaks"] :is(.xs-leaklab, .xs-mark) { opacity: 1; visibility: visible; }
.xs[data-state="leaks"] .xs-leaklab { transition-delay: 0s, 0s, 200ms, 0s; }
.xs[data-state="leaks"] .xs-mark--1 { transition-delay: 0s, 0s, 400ms, 0s; }
.xs[data-state="leaks"] .xs-mark--2 { transition-delay: 0s, 0s, 650ms, 0s; }
.xs[data-state="leaks"] .xs-mark--3 { transition-delay: 0s, 0s, 900ms, 0s; }
.xs[data-state="leaks"] .xs-mark--4 { transition-delay: 0s, 0s, 1150ms, 0s; }

.xs-det {
	position: absolute;
	background: var(--xs-label-bg);
	color: var(--xs-label-text);
}

.xs-det--tag {
	left: var(--x-detail);
	bottom: var(--s16);
	background: var(--orange);
	color: var(--ink);
	transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}

@media (max-width: 1023.98px) {
	.xs--stage .xs-det--tag { left: var(--nx-detail); }
}

.xs-det--face { transform: translate(-100%, -100%); }
.xs-det--contact { transform: translate(0, -100%); border-bottom: 2px solid var(--orange); }
.xs-det--seat { transform: translate(-50%, 0); }

.xs[data-state="detail"] .xs-det {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s, 0s, var(--t-draw), 0s;
}

.xs[data-state="detail"] .xs-det--tag {
	transition-delay: var(--t-draw), 0s;
}

.xs-wide { display: none; }
.xs-narrow { display: inline; }

@media (min-width: 1024px) {
	.xs-wide { display: inline; }
	.xs-narrow { display: none; }
}

.xs-scantag {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-50%);
	background: var(--orange);
	color: var(--ink);
	opacity: 0;
}

.xs[data-scan="run"] .xs-scantag {
	animation: xs-scantag calc(var(--t-draw) + var(--t-base)) var(--ease) both;
}

@keyframes xs-scantag {
	0% { left: 0; opacity: 1; }
	81.8% { left: 100%; opacity: 1; }
	100% { left: 100%; opacity: 0; }
}

/* ---------- Part labels: real links. Text labels, or numbered balloons when the drawing is under 480 px wide ---------- */

.xs-lab--faces { --d: 0ms; }
.xs-lab--springs { --d: 120ms; }
.xs-lab--secondary { --d: 60ms; }
.xs-lab--gland { --d: 60ms; }
.xs-lab--collar { --d: 180ms; }

.xs-lab {
	display: block;
	color: var(--xs-label-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.xs-lab:hover {
	color: var(--xs-label-text);
	text-decoration-thickness: 2px;
}

.xs-lab__t {
	display: block;
	background: var(--xs-label-bg);
	border-bottom: 2px solid transparent;
}

.xs-lab__b {
	display: none;
}

.xs-lab--anchor-c { transform: translate(-50%, -100%); }
.xs-lab--anchor-l { transform: translate(0, -100%); }
.xs-lab--anchor-r { transform: translate(-100%, -100%); }

.xs:is([data-state="labels"], [data-state="explode"]) .xs-lab {
	opacity: 1;
	visibility: visible;
	transition-delay: var(--d), var(--d), 700ms, 0s;
}

/* Highlighted part: tinted label with an orange rule. */
.xs[data-hl="faces"] .xs-lab--faces .xs-lab__t,
.xs[data-hl="springs"] .xs-lab--springs .xs-lab__t,
.xs[data-hl="secondary"] .xs-lab--secondary .xs-lab__t,
.xs[data-hl="gland"] .xs-lab--gland .xs-lab__t,
.xs[data-hl="collar"] .xs-lab--collar .xs-lab__t {
	background: var(--xs-tint);
	border-bottom-color: var(--orange);
}

/* Balloons */
.xs[data-labels="balloons"] .xs-lab,
.xs--stage .xs-lab {
	transform: translate(-50%, -100%);
	text-decoration: none;
}

.xs[data-labels="balloons"] .xs-lab__t,
.xs--stage .xs-lab__t {
	display: none;
}

.xs[data-labels="balloons"] .xs-lab__b,
.xs--stage .xs-lab__b,
.xs-leg__b {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--s24);
	height: var(--s24);
	border: 1px solid var(--xs-label-text);
	border-radius: var(--r-pill);
	background: var(--xs-label-bg);
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-mono-sm);
	line-height: 1;
	color: var(--xs-label-text);
}

@media (min-width: 1024px) {
	.xs--stage .xs-lab { text-decoration: underline; }
	.xs--stage .xs-lab--anchor-c { transform: translate(-50%, -100%); }
	.xs--stage .xs-lab--anchor-l { transform: translate(0, -100%); }
	.xs--stage .xs-lab--anchor-r { transform: translate(-100%, -100%); }
	.xs--stage .xs-lab__t { display: block; }
	.xs--stage .xs-lab__b { display: none; }
}

@container xs (max-width: 479.98px) {
	.xs[data-labels="auto"] .xs-lab {
		transform: translate(-50%, -100%);
		text-decoration: none;
	}

	.xs[data-labels="auto"] .xs-lab__t { display: none; }

	.xs[data-labels="auto"] .xs-lab__b {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--s24);
		height: var(--s24);
		border: 1px solid var(--xs-label-text);
		border-radius: var(--r-pill);
		background: var(--xs-label-bg);
		font-family: var(--font-mono);
		font-weight: 500;
		font-size: var(--fs-mono-sm);
		line-height: 1;
		color: var(--xs-label-text);
	}
}

.xs[data-hl="faces"] :is(.xs-lab--faces .xs-lab__b, .xs-leg--faces .xs-leg__b),
.xs[data-hl="springs"] :is(.xs-lab--springs .xs-lab__b, .xs-leg--springs .xs-leg__b),
.xs[data-hl="secondary"] :is(.xs-lab--secondary .xs-lab__b, .xs-leg--secondary .xs-leg__b),
.xs[data-hl="gland"] :is(.xs-lab--gland .xs-lab__b, .xs-leg--gland .xs-leg__b),
.xs[data-hl="collar"] :is(.xs-lab--collar .xs-lab__b, .xs-leg--collar .xs-leg__b) {
	border: 2px solid var(--orange);
	background: var(--xs-tint);
}

/* Parts list under the drawing, wherever balloons show. */
.xs__legend {
	display: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s8) var(--s16);
	margin: var(--s16) 0 0;
	padding: 0;
	list-style: none;
}

.xs[data-labels="balloons"] .xs__legend { display: grid; }

@container xs (max-width: 479.98px) {
	.xs[data-labels="auto"] .xs__legend { display: grid; }
}

.xs__legend a {
	display: flex;
	align-items: center;
	gap: var(--s8);
	min-height: var(--s24);
	color: var(--xs-label-text);
	font-size: var(--fs-small);
	line-height: var(--wp--custom--line-height--small);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.xs-leg__b {
	flex-shrink: 0;
}

/* ---------- Draw-in, once on load (CSS only; JS off and reduced motion get the finished drawing) ---------- */

.xs--draw .xs-lead__line {
	animation: xs-draw var(--t-draw) var(--ease) both;
}

.xs--draw :is(.xs-lab, .xs-ctx) {
	animation: xs-fade-in var(--t-base) var(--ease) 700ms both;
}

@keyframes xs-draw {
	from { stroke-dashoffset: var(--len); }
}

@keyframes xs-fade-in {
	from { opacity: 0; }
}