.is-seq > li .wpanel {
		transition: opacity 240ms ease;
	}

	
	@media (prefers-reduced-motion: no-preference) {
		:where(.is-seq) > li:not(.is-play, .is-done) :where(*, *::before, *::after) {
			transition: all var(--reset-dur) ease;
		}
	}

	.is-seq.is-rewind > li .wpanel {
		opacity: 0;
	}
@container (width < 700px) {
		.wrap .swipe {
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: min(86%, 340px);
			grid-template-columns: none;
			grid-template-rows: none;
			gap: var(--space-3);
			overflow-x: auto;
			overflow-y: hidden;
			overscroll-behavior-inline: contain;
			scroll-snap-type: inline mandatory;
			scroll-padding-inline: var(--gutter);
			
			margin-inline: calc(var(--gutter) * -1);
			padding-inline: var(--gutter);
			
			padding-block-end: 24px;
			margin-block-end: -24px;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}

			> * {
				grid-column: auto;
				grid-row: auto;
				scroll-snap-align: start;
			}
		}
	}
@media (max-width: 699px) {
		.lum-guided .lane [data-lum-edge] {
			padding-inline-end: var(--space-16);
		}
	}

	
	.lane__track {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto auto;
		gap: var(--space-4);
		margin: var(--space-6) 0 0;
		padding: 0;
		list-style: none;
	}

	.lane__card {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		gap: 0;

		.wcard__stage {
			place-items: stretch;
		}

		
		.wpanel {
			block-size: 100%;
			align-content: center;
		}
	}

	@media (min-width: 1240px) {
		.lane__track {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	
	@media (max-width: 719px) {
		.lane__track {
			grid-template-columns: none;
			grid-template-rows: auto auto;
			grid-auto-flow: column;
			grid-auto-columns: min(78vw, 320px);
			margin-inline: calc(var(--gutter) * -1);
			
			padding: var(--space-1) var(--gutter) var(--space-6);
			margin-block-end: calc(var(--space-4) - var(--space-6));
			overflow-x: auto;
			overflow-y: hidden;
			overscroll-behavior-inline: contain;
			scroll-snap-type: inline mandatory;
			scroll-padding-inline: var(--gutter);
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.lane__card {
			scroll-snap-align: start;
		}
	}

	
	@media (hover: hover) {
		.lane__card {
			box-shadow: inset 0 0 0 1px transparent;
			transition: box-shadow 420ms var(--ease-out);

			&:hover {
				box-shadow:
					inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent),
					0 10px 36px -14px color-mix(in srgb, var(--color-accent) 40%, transparent);
			}
		}
	}

	

	.ln-doc {
		display: grid;
		gap: 10px;
		inline-size: 100%;
		padding: 14px 16px 16px;
	}

	.ln-doc__head {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		font-size: 0.8125rem;

		b {
			font-weight: var(--fw-semibold);
		}

		.w-meta {
			margin-inline-start: auto;
		}
	}

	.ln-doc__icon {
		display: grid;
		place-items: center;
		inline-size: 24px;
		block-size: 24px;
		border-radius: 7px;
		background: var(--color-accent-soft);
		color: var(--color-accent-ink);
	}

	.ln-doc__text {
		margin: 0;
		font-size: 0.9375rem;
		line-height: 1.45;
		color: var(--color-text-secondary);

		mark {
			padding: 1px 3px;
			border-radius: 4px;
			background: color-mix(in srgb, var(--color-accent) 18%, transparent);
			color: var(--color-text);
		}
	}

	.ln-doc__switch {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 2px 0 0;
		font-size: 0.8125rem;
		font-weight: var(--fw-medium);
	}

	
	.ln-switch {
		position: relative;
		flex: none;
		inline-size: 34px;
		block-size: 20px;
		border-radius: var(--radius-pill);
		background: var(--color-accent);

		i {
			position: absolute;
			inset-block-start: 2px;
			inset-inline-start: 16px;
			inline-size: 16px;
			block-size: 16px;
			border-radius: var(--radius-pill);
			background: var(--white);
			box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-color) 25%, transparent);
		}
	}

	
	.ln-doc__plain {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		margin: 0;
		padding: 10px 12px;
		border-radius: 12px;
		background: color-mix(in srgb, var(--color-accent) 10%, transparent);
		font-size: 0.875rem;
		line-height: 1.45;

		.lum-avatar {
			flex: none;
			margin-block-start: 1px;
		}
	}

	

	@property --ln-vals {
		syntax: "<number>";
		inherits: true;
		initial-value: 9;
	}

	
	.ln-scan {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
		grid-template-areas:
			"doc head"
			"vals vals"
			"insight insight";
		align-items: center;
		gap: 12px 14px;
		inline-size: 100%;
		padding: 14px 16px 16px;
	}

	.ln-scan__doc {
		grid-area: doc;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 5px;
		aspect-ratio: 3 / 4;
		padding: 9px 7px;
		border-radius: 8px;
		background: var(--color-surface-2);
		overflow: hidden;

		i {
			block-size: 3px;
			border-radius: 2px;
			background: color-mix(in srgb, var(--color-text) 14%, transparent);
		}

		i:nth-child(1) { inline-size: 70%; block-size: 5px; margin-block-end: 2px; }
		i:nth-child(2) { inline-size: 92%; }
		i:nth-child(3) { inline-size: 80%; }
		i:nth-child(4) { inline-size: 88%; }
		i:nth-child(5) { inline-size: 64%; }
		i:nth-child(6) { inline-size: 84%; }
		i:nth-child(7) { inline-size: 56%; }
	}

	.ln-scan__head {
		grid-area: head;
		display: grid;
		gap: 6px;
		min-inline-size: 0;
	}

	
	.ln-scan__beam {
		position: absolute;
		inset-inline: 0;
		inset-block-start: -30%;
		block-size: 30%;
		background: linear-gradient(
			to bottom,
			transparent,
			color-mix(in srgb, var(--color-accent) 34%, transparent) 80%,
			var(--color-accent) 100%
		);
		opacity: 0;
	}

	.ln-scan__frame {
		position: absolute;
		inset: 4px;
		inline-size: calc(100% - 8px);
		block-size: calc(100% - 8px);
		overflow: visible;
		opacity: 0.35;

		path {
			fill: none;
			stroke: var(--color-accent);
			stroke-width: 2;
			stroke-linecap: round;
			vector-effect: non-scaling-stroke;
		}
	}

	.ln-scan__status {
		display: grid;
		margin: 0;
		font-size: 0.8125rem;
		font-weight: var(--fw-medium);

		> span {
			display: inline-flex;
			grid-area: 1 / 1;
			align-items: center;
			gap: 6px;
			white-space: nowrap;
		}
	}

	.ln-scan__busy {
		color: var(--color-text-muted);
		opacity: 0;
	}

	.ln-scan__done {
		color: var(--color-accent-ink);
	}

	.ln-scan__count {
		margin: 0;
		font-size: 0.875rem;
		color: var(--color-text-muted);

		b {
			--w-count: 12;
			font-size: 1.75rem;
			font-weight: var(--fw-semibold);
			line-height: 1;
			letter-spacing: -0.02em;
			font-variant-numeric: tabular-nums;
			color: var(--color-text);
		}
	}

	
	.ln-scan__vals {
		grid-area: vals;
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin: 0;
		padding: 10px 0 0;
		border-block-start: 1px solid var(--color-border);
		list-style: none;

		li {
			display: flex;
			align-items: baseline;
			gap: 5px;
			font-size: 0.8125rem;
			white-space: nowrap;
			opacity: clamp(0, var(--ln-vals) - var(--i), 1);
		}

		span {
			flex: 1;
			min-inline-size: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			color: var(--color-text-secondary);
		}

		b {
			font-weight: var(--fw-semibold);
			font-variant-numeric: tabular-nums;
		}

		small {
			font-size: 0.75rem;
			color: var(--color-text-muted);
		}
	}

	
	.ln-scan__flag {
		font-style: normal;
		font-weight: var(--fw-semibold);
		color: var(--sig-amber);
	}

	
	.ln-scan__insight {
		grid-area: insight;
		display: inline-flex;
		align-items: flex-start;
		gap: 6px;
		justify-self: start;
		margin: 0;
		padding: 6px 10px 10px 10px;
		border-radius: 12px;
		background: color-mix(in srgb, var(--sig-amber) 18%, transparent);
		font-size: 0.75rem;
		font-weight: var(--fw-regular);
		line-height: 1.35;
		text-wrap: pretty;
		color: color-mix(in srgb, var(--sig-amber) 70%, black);

		svg {
			flex: none;
			align-self: flex-start;
			margin-block-start: 1px;
		}
	}

	

	@property --ln-draw {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}

	@property --ln-ticks {
		syntax: "<number>";
		inherits: true;
		initial-value: 9;
	}

	.ln-corr {
		display: grid;
		gap: 8px;
		inline-size: 100%;
		min-inline-size: 0;
		padding: 16px 16px 14px;
	}

	.ln-corr__head {
		display: flex;
		align-items: baseline;
		gap: 8px;
		margin: 0;

		b {
			font-size: 1rem;
			font-weight: var(--fw-semibold);
		}
	}

	
	.ln-corr__found {
		position: absolute;
		inset-block-start: 6px;
		inset-inline-end: 8px;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 3px 9px;
		border-radius: var(--radius-pill);
		background: var(--wpanel);
		outline: 1.5px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
		box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-accent) 60%, transparent);
		font-size: 0.75rem;
		font-weight: var(--fw-medium);
		white-space: nowrap;
		color: var(--color-accent-ink);
	}

	.ln-corr__plot {
		position: relative;
	}

	.ln-corr__chart {
		display: block;
		inline-size: 100%;
		block-size: 118px;
		overflow: visible;
	}

	
	.ln-corr__band {
		fill: color-mix(in srgb, var(--color-accent) 10%, transparent);
	}

	.ln-corr__floor {
		stroke: color-mix(in srgb, var(--color-accent) 45%, transparent);
		stroke-width: 1;
		stroke-dasharray: 3 4;
		vector-effect: non-scaling-stroke;
	}

	.ln-corr__line {
		fill: none;
		stroke: var(--color-text);
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-dasharray: 1;
		stroke-dashoffset: var(--ln-draw);
		
	}

	.ln-corr__link {
		stroke: var(--sig-amber);
		stroke-width: 1.5;
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
		vector-effect: non-scaling-stroke;
	}

	.ln-corr__ticks rect {
		fill: var(--sig-amber);
		opacity: clamp(0, var(--ln-ticks) - var(--i), 1);
	}

	
	.ln-corr__dot {
		--shown: clamp(0, (1 - var(--ln-draw) - var(--f)) * 12 + 1, 1);
		position: absolute;
		inset-inline-start: var(--x);
		inset-block-start: var(--y);
		inline-size: 11px;
		block-size: 11px;
		border: 2.5px solid var(--color-text);
		border-radius: var(--radius-pill);
		background: var(--wpanel);
		opacity: var(--shown);
		scale: calc(0.4 + var(--shown) * 0.6);
		translate: -50% -50%;
	}

	
	.ln-corr__proj {
		stroke: var(--sig-amber);
		stroke-width: 2;
		stroke-dasharray: 4 4;
		stroke-linecap: round;
		vector-effect: non-scaling-stroke;
	}

	.ln-corr__dot--proj {
		--shown: 1;
		border-color: color-mix(in srgb, var(--sig-amber) 45%, transparent);
		background: color-mix(in srgb, var(--sig-amber) 18%, transparent);
		background-clip: padding-box;
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--sig-amber) 14%, transparent);
	}

	.ln-corr__months {
		display: flex;
		justify-content: space-between;
		margin: -2px 0 0;
		padding-inline: calc(10% - 12px);
		font-size: 0.75rem;
		color: var(--color-text-muted);
	}

	.ln-corr__legend {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 14px;
		margin: 2px 0 0;
		font-size: 0.75rem;
		color: var(--color-text-muted);

		span {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			white-space: nowrap;
		}
	}

	.ln-corr__sw {
		display: inline-block;
		inline-size: 12px;
		block-size: 8px;
		border-radius: 2px;
	}

	.ln-corr__sw--band {
		background: color-mix(in srgb, var(--color-accent) 22%, transparent);
	}

	.ln-corr__sw--proj {
		inline-size: 14px;
		block-size: 0;
		border-block-start: 2px dashed var(--sig-amber);
		border-radius: 0;
	}

	.ln-corr__sw--tick {
		inline-size: 4px;
		block-size: 10px;
		background: var(--sig-amber);
	}

	

	@property --ln-rows {
		syntax: "<number>";
		inherits: true;
		initial-value: 9;
	}

	.ln-card {
		display: grid;
		gap: 10px;
		inline-size: 100%;
		padding: 14px 16px 16px;
		font-size: 0.8125rem;
	}

	.ln-card__head {
		display: grid;
		gap: 2px;
		margin: 0;

		b {
			display: block;
			font-size: 0.9375rem;
			font-weight: var(--fw-semibold);
		}

	}

	.ln-card__rows {
		display: grid;
		gap: 6px;
		margin: 0;
		padding-block-start: 10px;
		border-block-start: 1px solid var(--color-border);

		div {
			display: flex;
			justify-content: space-between;
			gap: 8px;
		}

		dt {
			color: var(--color-text-muted);
		}

		dd {
			margin: 0;
			font-weight: var(--fw-medium);
			text-align: end;
		}
	}

	.ln-card__label {
		margin: 0;
		color: var(--color-text-muted);
	}

	.ln-card__meds ul {
		display: grid;
		gap: 4px;
		margin: 4px 0 0;
		padding: 0;
		list-style: none;

		li {
			display: flex;
			justify-content: space-between;
			gap: 8px;
			font-weight: var(--fw-medium);
		}
	}

	
	.ln-card__step {
		--ln-on: clamp(0, var(--ln-rows) - var(--i), 1);
	}

	.ln-sk {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			inset: 1px -2px;
			border-radius: 4px;
			background: var(--color-surface-inset);
			opacity: calc(1 - var(--ln-on));
		}
	}

	
	.ln-card__foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 10px;
		margin: 2px 0 0;
		padding-block-start: 10px;
		border-block-start: 1px solid var(--color-border);
	}

	
	.ln-card__send {
		--sig: var(--color-accent);
		block-size: 34px;
		padding-inline: 14px;
		font-size: 0.8125rem;
		color: var(--color-accent-contrast);
	}

	

	.lane__card--doc { --play: 3750ms; }
	.lane__card--scan { --play: 5000ms; }
	.lane__card--corr { --play: 4500ms; }
	.lane__card--patient { --play: 4000ms; }

	
	.is-seq > li.is-rewinding {
		.ln-doc mark {
			background: transparent;
		}

		.ln-switch {
			background: var(--color-border-strong);
		}

		.ln-switch i {
			inset-inline-start: 2px;
		}

		.ln-doc__plain {
			opacity: 0;
			clip-path: inset(0 0 100% 0 round 12px);
		}

		.ln-scan__done,
		.ln-scan__insight {
			opacity: 0;
		}

		.ln-scan__count b {
			--w-count: 0;
		}

		.ln-scan__vals {
			--ln-vals: 0;
		}

		.ln-corr {
			--ln-draw: 1;
			--ln-ticks: 0;
		}

		.ln-corr__link {
			stroke-dashoffset: 1;
		}

		.ln-corr__proj,
		.ln-corr__dot--proj,
		.ln-corr__found {
			opacity: 0;
		}

		.ln-card {
			--ln-rows: 0;
		}

		.ln-card__send {
			background: color-mix(in srgb, var(--color-text) 14%, transparent);
			color: var(--color-text-muted);
		}
	}

	
	.is-seq > li.is-play {
		.ln-doc mark { animation: ln-mark var(--play) ease both; }
		.ln-switch { animation: ln-switch var(--play) ease both; }
		.ln-switch i { animation: ln-knob var(--play) ease both; }
		.ln-doc__plain { animation: ln-plain var(--play) ease both; }

		.ln-scan__frame { animation: ln-frame var(--play) ease both; }
		.ln-scan__beam { animation: ln-beam var(--play) ease-in-out both; }
		.ln-scan__busy { animation: ln-busy var(--play) ease both; }
		.ln-scan__done { animation: ln-done var(--play) ease both; }
		.ln-scan__count b { animation: ln-count var(--play) linear both; }
		.ln-scan__vals { animation: ln-vals var(--play) ease both; }
		.ln-scan__insight { animation: ln-insight var(--play) ease both; }

		.ln-corr { animation: ln-corr var(--play) ease-in-out both; }
		.ln-corr__proj,
		.ln-corr__dot--proj { animation: ln-proj var(--play) ease both; }
		.ln-corr__link { animation: ln-link var(--play) ease both; }
		.ln-corr__found { animation: ln-found var(--play) ease both; }

		.ln-card { animation: ln-rows var(--play) linear both; }
		.ln-card__send { animation: ln-send var(--play) ease both; }
	}

	
	@keyframes ln-mark {
		0%, 6% { background: transparent; }
		18%, 100% { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
	}

	@keyframes ln-switch {
		0%, 30% { background: var(--color-border-strong); }
		38%, 100% { background: var(--color-accent); }
	}

	@keyframes ln-knob {
		0%, 30% { inset-inline-start: 2px; }
		40%, 100% { inset-inline-start: 16px; }
	}

	@keyframes ln-plain {
		0%, 44% {
			opacity: 0;
			clip-path: inset(0 0 100% 0 round 12px);
		}
		66%, 100% {
			opacity: 1;
			clip-path: inset(0 0 0 0 round 12px);
		}
	}

	
	@keyframes ln-frame {
		0% { opacity: 0; scale: 1.08; }
		8%, 46% { opacity: 1; scale: 1; }
		56%, 100% { opacity: 0.35; scale: 1; }
	}

	@keyframes ln-beam {
		0%, 5% { inset-block-start: -30%; opacity: 0; }
		6% { inset-block-start: -30%; opacity: 1; }
		36% { inset-block-start: 100%; opacity: 1; }
		40%, 100% { inset-block-start: 100%; opacity: 0; }
	}

	@keyframes ln-busy {
		0%, 5% { opacity: 0; }
		8%, 38% { opacity: 1; }
		42%, 100% { opacity: 0; }
	}

	@keyframes ln-done {
		0%, 40% { opacity: 0; }
		46%, 100% { opacity: 1; }
	}

	@keyframes ln-count {
		0%, 6% { --w-count: 0; }
		38%, 100% { --w-count: 12; }
	}

	@keyframes ln-vals {
		0%, 46% { --ln-vals: 0; }
		72%, 100% { --ln-vals: 3; }
	}

	@keyframes ln-insight {
		0%, 78% { opacity: 0; }
		86%, 100% { opacity: 1; }
	}

	
	@keyframes ln-corr {
		0% { --ln-draw: 1; --ln-ticks: 0; }
		34% { --ln-draw: 0; --ln-ticks: 0; }
		46% { --ln-draw: 0; --ln-ticks: 0; }
		70%, 100% { --ln-draw: 0; --ln-ticks: 8; }
	}

	@keyframes ln-proj {
		0%, 34% { opacity: 0; }
		44%, 100% { opacity: 1; }
	}

	@keyframes ln-link {
		0%, 70% { stroke-dashoffset: 1; }
		82%, 100% { stroke-dashoffset: 0; }
	}

	@keyframes ln-found {
		0%, 82% { opacity: 0; }
		92%, 100% { opacity: 1; }
	}

	
	@keyframes ln-rows {
		0%, 10% { --ln-rows: 0; }
		16%, 32% { --ln-rows: 1; }
		38%, 54% { --ln-rows: 2; }
		60%, 100% { --ln-rows: 3; }
	}

	@keyframes ln-send {
		0%, 66% {
			background: color-mix(in srgb, var(--color-text) 14%, transparent);
			color: var(--color-text-muted);
		}
		76%, 100% {
			background: var(--color-accent);
			color: var(--color-accent-contrast);
		}
	}
.signals {
		--sig-ease: cubic-bezier(0.65, 0, 0.35, 1);

		display: flex;
		flex-direction: column;
		gap: clamp(28px, 3.5vw, 48px);
	}

	
	.signals__head {
		display: grid;
		gap: var(--space-6);
		align-items: center;
	}

	@container (width >= 900px) {
		.signals__head--orbit {
			grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
			gap: clamp(40px, 5vw, 88px);
		}
	}

	.signals__copy {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);

		h2 {
			margin: 0;
			max-inline-size: 34ch;
		}

		.lead {
			margin: 0;
			max-inline-size: 64ch;
		}
	}

	
	.signals__strip {
		border-block: 1px solid var(--color-border);
		container: signals / inline-size;
	}

	
	
	.signals__row {
		display: grid;
		margin-block: 0;
		padding-block: 0;
		list-style: none;
		gap: 0;
		grid-template-columns: 1fr;
		font-variant-numeric: tabular-nums lining-nums;
	}

	
	@container signals (width < 720px) {
		.signals__row {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@container signals (width >= 720px) {
		.signals__row {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	
	.signals__cell {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 2px;
		padding-block: clamp(24px, 3vw, 40px);
		padding-inline-end: var(--space-4);
	}

	@container signals (width >= 720px) {
		.signals__cell + .signals__cell {
			border-inline-start: 1px solid var(--color-border);
			padding-inline-start: clamp(20px, 2.4vw, 40px);
		}
	}

	@container signals (width < 720px) {
		.signals__cell {
			padding-block: var(--space-5);
		}

		.signals__cell:nth-child(even) {
			border-inline-start: 1px solid var(--color-border);
			padding-inline-start: var(--space-4);
		}

		.signals__cell:nth-child(n + 3) {
			border-block-start: 1px solid var(--color-border);
		}
	}

	.signals__value {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px var(--space-2);
		margin: 0;
		font-family: var(--font-display);
		font-size: var(--text-display-l);
		line-height: 1;
		letter-spacing: var(--ls-display);

		small {
			font-family: var(--font-sans);
			font-size: var(--text-sm);
			letter-spacing: var(--ls-body);
			white-space: nowrap;
			color: var(--color-text-muted);
		}
	}

	.signals__num {
		white-space: nowrap;
	}

	
	@container signals (width < 960px) {
		.signals__value {
			flex-direction: column;
			align-items: flex-start;
		}
	}

	
	.signals__value--word {
		font-family: var(--font-display);
		letter-spacing: var(--ls-body);
	}

	
	.signals__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: flex-start;
		gap: 4px 8px;
		margin: var(--space-3) 0 0;
		font-size: var(--text-sm);
		color: var(--color-text-secondary);
	}

	.signals__status {
		display: inline-grid;
		padding: 1px 8px;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--sig-amber) 16%, transparent);
		font-size: var(--text-xs);
		font-weight: var(--fw-medium);
		white-space: nowrap;
		color: color-mix(in srgb, var(--sig-amber) 70%, var(--color-text));
		transition:
			background-color 420ms ease,
			color 420ms ease;

		> span {
			grid-area: 1 / 1;
			text-align: center;
			transition:
				opacity 320ms ease,
				visibility 320ms;
		}

		> span:not(.is-on) {
			opacity: 0;
			visibility: hidden;
		}

		&[data-state="fine"] {
			background: color-mix(in srgb, var(--sig-green) 14%, transparent);
			color: color-mix(in srgb, var(--sig-green) 60%, var(--color-text));
		}

		
		&[data-state="same"] {
			background: color-mix(in srgb, var(--color-text) 7%, transparent);
			color: var(--color-text-muted);
		}
	}

	

	
	.signals__plot {
		position: relative;
		min-block-size: 76px;
		margin-block-start: var(--space-5);

		> svg {
			position: absolute;
			inset: 0;
			inline-size: 100%;
			block-size: 100%;
			overflow: visible;
		}
	}

	
	.sig-window {
		position: absolute;
		inset: -12px 0;
		overflow: hidden;
	}

	.sig-track {
		position: absolute;
		inset: 12px 0;
		transition: translate 900ms var(--sig-ease);
	}

	
	.sig-band {
		fill: color-mix(in srgb, var(--sig-green) 13%, transparent);
	}

	
	.signals__cell--line .sig-window {
		--cut: calc(94% + 10px);

		mask-image: linear-gradient(to right, transparent, #000 5%, #000 var(--cut), transparent var(--cut));
	}

	.signals__cell--line .sig-window--line {
		--cut: 94%;
	}

	
	.sig-trace {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		max-inline-size: none;
		block-size: 100%;
		overflow: visible;
	}

	.sig-line {
		fill: none;
		stroke: var(--color-text);
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		vector-effect: non-scaling-stroke;
	}

	.sig-dot {
		position: absolute;
		inset-inline-start: var(--x);
		inset-block-start: var(--y);
		inline-size: 10px;
		block-size: 10px;
		border: 2px solid var(--color-text);
		border-radius: var(--radius-pill);
		background: var(--color-background);
		translate: -50% -50%;
		transition: box-shadow 420ms ease;

		&.is-alert {
			border-color: var(--sig-amber);
		}

		&.is-latest {
			box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-text) 12%, transparent);
		}

		&.is-latest.is-alert {
			box-shadow: 0 0 0 4px color-mix(in srgb, var(--sig-amber) 24%, transparent);
		}
	}

	
	.signals__cell--range .sig-track,
	.signals__cell--bars .sig-track {
		display: flex;
	}

	.signals__cell--range i,
	.signals__cell--bars i {
		position: relative;
		flex: 0 0 calc(100% / var(--cols));
	}

	
	.signals__cell--range i::before {
		content: "";
		position: absolute;
		inset: var(--top) 22% var(--bottom);
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--color-text) 26%, transparent);
	}

	.signals__cell--range i.is-alert::before {
		background: var(--sig-amber);
	}

	.sig-norm {
		position: absolute;
		inset-inline: 0;
		inset-block-start: var(--y);
		border-block-start: 1px dashed color-mix(in srgb, var(--sig-green) 60%, transparent);
	}

	
	.signals__cell--bars .sig-track {
		align-items: flex-end;
	}

	.signals__cell--bars i {
		block-size: var(--h);
		transform-origin: 50% 100%;

		&::before {
			content: "";
			position: absolute;
			inset: 0 2px;
			border-radius: 4px 4px 2px 2px;
			background: color-mix(in srgb, var(--color-text) 16%, transparent);
			transition: background-color 420ms ease;
		}

		&.is-month::before {
			background: color-mix(in srgb, var(--color-text) 44%, transparent);
		}
	}

	.signals__cell--bars.is-high i.is-month::before {
		background: color-mix(in srgb, var(--sig-amber) 75%, transparent);
	}

	
	.sig-age {
		--dot: 16px;
	}

	
	.sig-age__ruler {
		position: relative;
		block-size: 60px;
	}

	
	.sig-age__scale {
		position: absolute;
		inset: 50% 0 auto;
		block-size: 9px;
		translate: 0 -50%;
		background:
			linear-gradient(var(--color-border-strong), var(--color-border-strong)) 0 50% / 100% 1px no-repeat,
			repeating-linear-gradient(to right, var(--color-border-strong) 0 1px, transparent 1px calc(100% / var(--years))) 0 50% / calc(100% + 1px) 100% no-repeat;
	}

	
	.sig-age__gap {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: min(var(--age), var(--passport));
		inline-size: calc(max(var(--age), var(--passport)) - min(var(--age), var(--passport)));
		block-size: 8px;
		translate: 0 -50%;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--sig-green) 34%, transparent);
		transition:
			inset-inline-start 900ms var(--sig-ease),
			inline-size 900ms var(--sig-ease);
	}

	.sig-age__diff {
		position: absolute;
		inset-block-end: calc(100% + 10px);
		inset-inline-start: 50%;
		translate: -50% 0;
		font-size: var(--text-xs);
		font-weight: var(--fw-semibold);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
		color: color-mix(in srgb, var(--sig-green) 60%, var(--color-text));
	}

	
	.sig-age__mark {
		position: absolute;
		inset-block-start: calc(50% - 11px);
		inset-inline-start: var(--passport);
		padding-block-start: 28px;
		translate: -50% 0;
		font-size: var(--text-xs);
		white-space: nowrap;
		color: var(--color-text-muted);

		&::before {
			content: "";
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: calc(50% - 1px);
			inline-size: 2px;
			block-size: 22px;
			border-radius: 1px;
			background: var(--color-text-secondary);
		}

		b {
			font-weight: var(--fw-semibold);
			color: var(--color-text-secondary);
		}
	}

	.sig-age__dot {
		position: absolute;
		inset-block-start: 50%;
		border-radius: var(--radius-pill);
		translate: -50% -50%;
	}

	.sig-age__dot {
		inset-inline-start: var(--age);
		inline-size: var(--dot);
		block-size: var(--dot);
		background: var(--sig-green);
		box-shadow: 0 0 0 3px var(--color-background);
		transition: inset-inline-start 900ms var(--sig-ease);
	}

	
	.sig-age__end {
		position: absolute;
		inset-block-end: calc(50% + 8px);
		font-size: var(--text-xs);
		color: var(--color-text-muted);
	}

	.sig-age__end--min {
		inset-inline-start: 0;
	}

	.sig-age__end--max {
		inset-inline-end: 0;
	}

	
	.sig-age__frac {
		margin-inline-start: 0.1em;
		font-variant-numeric: lining-nums diagonal-fractions;
	}


	
	.sig-age .signals__feed {
		grid-row: auto;
		block-size: 80px;
		min-block-size: 0;
		
		margin-inline: -8px 0;
		margin-block-start: var(--space-2);
		mask-image: linear-gradient(to bottom, transparent, #000 38%);
	}

	.sig-age .signals__events {
		inset-inline-start: 8px;
	}

	.sig-age .signals__events li {
		grid-template-columns: 4.6em minmax(0, 1fr);

		&.is-down {
			--ping: var(--sig-green);

			&::before {
				background: var(--sig-green);
			}
		}

		&.is-up {
			--ping: var(--sig-amber);

			&::before {
				background: var(--sig-amber);
			}
		}
	}

	.signals__axis {
		display: flex;
		justify-content: space-between;
		margin: 6px 0 0;
		font-size: var(--text-xs);
		white-space: nowrap;
		color: var(--color-text-muted);
	}

	
	.signals__feed {
		position: relative;
		grid-row: span 2;
		min-block-size: 72px;
		margin-block-start: var(--space-3);
		overflow: hidden;
	}

	.signals__events {
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		display: grid;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--text-sm);
		transition: translate 900ms var(--sig-ease);

		li {
			position: relative;
			display: grid;
			grid-template-columns: 52px minmax(0, 1fr);
			gap: 8px;
			padding-inline-start: 14px;
			color: var(--color-text-secondary);

			> *,
			&::before {
				transition: opacity 520ms ease;
			}

			
			&.is-past > *,
			&.is-past::before {
				opacity: 0;
			}

			&::before {
				content: "";
				position: absolute;
				inset-block-start: 0.5em;
				inset-inline-start: 0;
				inline-size: 7px;
				block-size: 7px;
				border-radius: var(--radius-pill);
				background: var(--color-accent);
			}
		}

		b {
			font-weight: var(--fw-medium);
			white-space: nowrap;
			color: var(--color-text);
		}
	}

	
	.signals__cell.is-jump *,
	.signals__cell.is-jump *::before {
		transition: none !important;
	}

	
	.signals__strip:not(.is-live) .signals__events .is-later {
		display: none;
	}

	
	@media (prefers-reduced-motion: no-preference) {
		html.motion .signals__cell.is-in {
			.sig-window--line {
				animation: sig-draw 1100ms var(--ease-out) 200ms backwards;
			}

			.sig-dot {
				animation: sig-pop 380ms var(--ease-out) both;
				animation-delay: calc(260ms + min(var(--i), 5) * 190ms);
			}

			.sig-track i {
				animation: sig-grow 560ms var(--ease-out) both;
				animation-delay: calc(160ms + min(var(--i), 12) * 55ms);
			}

			&.signals__cell--range i {
				transform-origin: 50% 50%;
			}

			.signals__events li {
				animation: sig-in 420ms var(--ease-out) both;
				animation-delay: calc(220ms + min(var(--i), 3) * 160ms);
			}

			.sig-age__dot {
				animation: sig-pop 380ms var(--ease-out) 200ms both;
			}

			
			.signals__events li.is-new::before {
				animation: sig-ping 1100ms var(--ease-out) 380ms both;
			}
		}
	}

	
	@keyframes sig-draw {
		from {
			clip-path: inset(0 100% 0 0);
		}
		to {
			clip-path: inset(0 0 0 0);
		}
	}

	@keyframes sig-pop {
		from {
			opacity: 0;
			scale: 0.4;
		}
		to {
			opacity: 1;
			scale: 1;
		}
	}

	@keyframes sig-grow {
		from {
			opacity: 0;
			scale: 1 0.2;
		}
		to {
			opacity: 1;
			scale: 1 1;
		}
	}

	@keyframes sig-in {
		from {
			opacity: 0;
			translate: 0 6px;
		}
		to {
			opacity: 1;
			translate: 0 0;
		}
	}

	@keyframes sig-ping {
		from {
			box-shadow: 0 0 0 0 color-mix(in srgb, var(--ping, var(--color-accent)) 50%, transparent);
		}
		to {
			box-shadow: 0 0 0 7px color-mix(in srgb, var(--ping, var(--color-accent)) 0%, transparent);
		}
	}

	@container signals (width < 720px) {
		.signals__plot {
			min-block-size: 64px;
			margin-block-start: var(--space-4);
		}

		.signals__cell--bars i::before {
			inset-inline: 1.5px;
		}

		
		.signals__events {
			gap: 6px;
			font-size: var(--text-xs);

			li {
				display: block;
			}
		}
	}

	

	
	.sig-sched__date {
		padding: 1px 8px;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--color-text) 7%, transparent);
		font-size: var(--text-xs);
		font-weight: var(--fw-medium);
		white-space: nowrap;
		color: var(--color-text-muted);
	}

	
	.sig-sched {
		display: grid;
		grid-template-rows: auto auto 1fr;
		gap: 6px;
		align-content: start;
	}

	.sig-sched__track {
		margin-block-end: 6px;
	}

	
	.sig-sched__day {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		transition:
			translate 520ms var(--sig-ease),
			opacity 520ms ease;

		&.is-leaving {
			translate: -12px 0;
			opacity: 0;
		}

		&.is-coming {
			translate: 12px 0;
			opacity: 0;
		}
	}

	.sig-sched__part {
		min-inline-size: 0;

		ul {
			display: grid;
			gap: 5px;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		li {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			gap: 5px;
			align-items: start;
		}
	}

	
	.sig-sched__box {
		display: grid;
		place-items: center;
		inline-size: 13px;
		block-size: 13px;
		margin-block-start: 1px;
		border: 1.5px solid var(--color-border-strong);
		border-radius: 4px;
		color: transparent;
		transition:
			background-color 320ms ease,
			border-color 320ms ease,
			color 320ms ease;

		.is-done & {
			border-color: var(--color-accent);
			background-color: var(--color-accent);
			color: var(--color-accent-contrast);
		}
	}

	.sig-sched__what {
		display: grid;
		min-inline-size: 0;
		line-height: 1.2;

		b {
			display: inline-flex;
			align-items: center;
			gap: 3px;
			font-size: var(--text-xs);
			font-weight: var(--fw-regular);
			transition: color 320ms ease;
		}

		small {
			font-size: 0.6875rem;
			color: var(--color-text-muted);
		}
	}

	.sig-sched__form {
		display: inline-grid;
		color: var(--color-text-muted);
	}

	
	.sig-sched__what small,
	.sig-sched__form {
		display: none;
	}

	
	.sig-sched__track {
		position: relative;
		block-size: 3px;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--color-text) 10%, transparent);
	}

	.sig-sched__fill {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: var(--now);
		border-radius: inherit;
		background: var(--color-accent);
		transition: inline-size 700ms linear;
	}

	.sig-sched__mark {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: var(--now);
		inline-size: 9px;
		block-size: 9px;
		border: 2px solid var(--color-accent);
		border-radius: var(--radius-pill);
		background: var(--wpanel);
		translate: -50% -50%;
		transition: inset-inline-start 700ms linear;
	}

	
	.sig-sched__axis {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin: 0;
		font-size: var(--text-xs);
		white-space: nowrap;
		color: var(--color-text-muted);

		> span:last-child {
			display: flex;
			justify-content: space-between;
		}
	}

	@container signals (width < 720px) {
		.sig-sched__day,
		.sig-sched__axis {
			gap: 4px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.sig-sched__day,
		.sig-sched__fill,
		.sig-sched__mark {
			transition: none;
		}
	}
.anat__side h2 {
		margin: 0 0 var(--space-3);
		text-wrap: balance;
	}

	.anat__lead {
		margin: 0 0 var(--space-6);
		text-wrap: pretty;
	}

	
	@media (max-width: 699px) {
		.lum-guided .anat [data-lum-edge] {
			padding-inline-end: var(--space-16);
		}
	}

	@property --on {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}

	.anat__label {
		margin: 0 0 var(--space-6);
	}

	.anat__body {
		--beat: 5.67s;
		--stage: calc(var(--beat) / 3);
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(32px, 4vw, 64px);
		align-items: center;
	}

	
	.anat__side {
		min-inline-size: 0;
	}

	@media (min-width: 1000px) {
		.anat__body {
			grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
		}

		.anat__part {
			background: transparent !important;
		}
	}

	
	.anat [data-p] {
		--show: var(--on);
	}

	
	@media (prefers-reduced-motion: no-preference) {
		.anat:not(.is-driven) [data-p] {
			animation: anat-walk calc(var(--beat) * 2) linear infinite;
			animation-delay: calc((var(--i) - 1) * var(--stage) - var(--beat) * 2);
		}
	}

	
	.anat.is-driven {
		--anat-fade: var(--dur-base) ease;

		.anat__pin {
			border-color: var(--color-border-strong);
			background-color: var(--wpanel);
			color: var(--color-text-muted);
			transition:
				background-color var(--anat-fade),
				border-color var(--anat-fade),
				color var(--anat-fade);
		}

		.is-on .anat__pin {
			border-color: var(--color-accent);
			background-color: var(--color-accent);
			color: var(--white);
		}

		.anat__zone {
			background-color: transparent;
			box-shadow: 0 0 0 1.5px transparent;
			transition:
				background-color var(--anat-fade),
				box-shadow var(--anat-fade);

			&.is-on {
				background-color: color-mix(in srgb, var(--color-accent) 7%, transparent);
				box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 90%, transparent);
			}
		}

		.anat__part {
			background-color: var(--color-surface-2);
			transition: background-color var(--anat-fade);

			&.is-on {
				background-color: color-mix(in srgb, var(--color-accent) 6%, transparent);
			}
		}

		.anat__pick b {
			color: color-mix(in srgb, var(--color-text) 50%, transparent);
			transition: color var(--anat-fade);
		}

		.is-on .anat__pick b {
			color: var(--color-text);
		}

		.anat__tip {
			opacity: 0;
			translate: none;
			transition: opacity var(--anat-fade);
		}

		.is-on .anat__tip {
			opacity: 1;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.anat.is-driven :is(.anat__pin, .anat__zone, .anat__part, .anat__pick b, .anat__tip) {
			transition: none;
		}
	}

	
	.anat.is-driven .anat__card .anat__pin {
		cursor: pointer;

		&::after {
			content: "";
			position: absolute;
			inset: -8px;
		}
	}

	
	@keyframes anat-walk {
		0% {
			--on: 0;
		}
		2.5%,
		14.2% {
			--on: 1;
		}
		16.67%,
		100% {
			--on: 0;
		}
	}

	
	.anat__pin {
		display: grid;
		place-items: center;
		inline-size: 22px;
		block-size: 22px;
		flex: none;
		border: 1px solid color-mix(in srgb, var(--color-accent) calc(var(--show) * 100%), var(--color-border-strong));
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--color-accent) calc(var(--show) * 100%), var(--wpanel));
		color: color-mix(in srgb, var(--white) calc(var(--show) * 100%), var(--color-text-muted));
		font-size: 11px;
		font-weight: var(--fw-semibold);
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	

	.anat__card {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-5) var(--space-6) var(--space-4);
		border: 1px solid var(--wpanel-border);
		border-radius: var(--radius-xl);
		background: var(--wpanel);
		box-shadow: var(--wpanel-shadow);
	}

	.anat__head {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-block-end: var(--space-1);

		b {
			font-size: var(--text-sm);
			font-weight: var(--fw-semibold);
		}

		span {
			font-size: var(--text-xs);
			color: var(--color-text-muted);
		}
	}

	.anat__zone {
		position: relative;
		margin-inline: -10px;
		padding: 8px 10px;
		border-radius: 14px;
		background: color-mix(in srgb, var(--color-accent) calc(var(--show) * 7%), transparent);
		box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-accent) calc(var(--show) * 90%), transparent);

		> .anat__pin {
			position: absolute;
			inset-block-start: 50%;
			inset-inline-end: calc(100% + 10px);
			translate: 0 -50%;
		}

		p {
			margin: 0;
		}
	}

	.anat__zone--foot {
		margin-block-start: var(--space-2);
	}

	.anat__sources {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		font-size: var(--text-xs);
		color: var(--color-text-muted);
	}

	.anat__chip {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 4px 9px;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--color-text) 6%, transparent);
		color: var(--color-text-secondary);
	}

	.anat__chart svg {
		display: block;
		inline-size: 100%;
		block-size: auto;
		overflow: visible;
	}

	.anat__chart .anat__chart-label {
		display: flex;
		justify-content: space-between;
		margin-block-end: 6px;
		font-size: var(--text-xs);
		color: var(--color-text-muted);

		span:first-child {
			color: var(--color-text-secondary);
			font-weight: var(--fw-medium);
		}
	}

	.anat__low {
		fill: color-mix(in srgb, var(--sig-amber) 9%, transparent);
	}

	.anat__norm {
		fill: none;
		stroke: color-mix(in srgb, var(--sig-amber) 55%, transparent);
		stroke-width: 1.2;
		stroke-dasharray: 4 5;
	}

	.anat__line {
		fill: none;
		stroke: var(--color-accent);
		stroke-width: 2.4;
		stroke-linecap: round;
	}

	.anat__dot {
		fill: var(--wpanel);
		stroke: var(--color-accent);
		stroke-width: 2.4;

		&.is-low {
			stroke: var(--sig-amber);
		}
	}

	.anat__val,
	.anat__month {
		font-size: 12px;
		text-anchor: middle;
		fill: var(--color-text-muted);
	}

	.anat__val {
		font-weight: var(--fw-semibold);
		fill: var(--color-text);
	}

	.anat__text {
		font-size: var(--text-md);
		line-height: 1.5;
	}

	
	.anat__term {
		font-weight: var(--fw-semibold);
		text-decoration: underline dotted color-mix(in srgb, var(--color-accent) 70%, transparent);
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
	}

	
	.anat__tip {
		position: absolute;
		inset-block-end: 100%;
		inset-inline-start: 4px;
		inline-size: max-content;
		max-inline-size: min(280px, 100% - 8px);
		padding: 7px 11px;
		border-radius: 10px;
		background: var(--color-surface-deep);
		color: var(--on-deep);
		font-size: var(--text-xs);
		font-weight: var(--fw-regular);
		line-height: 1.4;
		opacity: var(--show);
		translate: 0 calc((1 - var(--show)) * 5px);
		pointer-events: none;
		box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow-color) 18%, transparent);
	}

	.anat__advice {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 4px var(--space-2);
		font-size: var(--text-sm);

		b {
			font-weight: var(--fw-medium);
		}

		small {
			padding: 2px 8px;
			border-radius: var(--radius-pill);
			background: var(--color-accent-soft);
			color: var(--color-accent-ink);
			font-size: 11px;
		}
	}

	.anat__advice-mark {
		display: grid;
		place-items: center;
		inline-size: 24px;
		block-size: 24px;
		border-radius: 8px;
		background: var(--color-accent-soft);
		color: var(--color-accent-ink);
	}

	.anat__checked {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: var(--text-xs);
		color: var(--color-accent-ink);
	}

	.anat__help {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding-block-start: var(--space-3);
		border-block-start: 1px solid var(--color-border);
		font-size: var(--text-sm);

		small {
			margin-inline-start: auto;
			font-size: var(--text-xs);
			color: var(--color-text-muted);
		}
	}

	.anat__human {
		display: grid;
		place-items: center;
		inline-size: 24px;
		block-size: 24px;
		border-radius: var(--radius-pill);
		background: var(--tone-sand-deep);
		color: var(--tone-sand-ink);
		font-size: 11px;
		font-weight: var(--fw-semibold);
	}

	

	.anat__list {
		display: grid;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 620px) and (max-width: 999px) {
		.anat__list {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.anat__part {
		border-radius: var(--radius-md);
		background: var(--color-surface-2);
	}

	
	.anat__pick {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: var(--space-3);
		row-gap: 2px;
		inline-size: 100%;
		padding: var(--space-3) var(--space-4);
		border: 0;
		border-radius: inherit;
		background: none;
		color: inherit;
		font: inherit;
		text-align: start;
		cursor: pointer;

		&:focus-visible {
			outline: 2px solid var(--color-accent);
			outline-offset: 2px;
		}

		.anat__pin {
			grid-row: span 2;
			margin-block-start: 1px;
		}

		b {
			font-size: var(--text-md);
			font-weight: var(--fw-medium);
			color: color-mix(in srgb, var(--color-text) calc(50% + var(--show) * 50%), transparent);
		}

		span:last-child {
			font-size: var(--text-sm);
			line-height: 1.5;
			color: var(--color-text-secondary);
		}
	}

	@container (width < 700px) {
		.anat__side h2 {
			margin-block-end: var(--space-2);
		}

		.anat__lead {
			margin-block-end: var(--space-4);
		}

		
		.anat__side {
			order: -1;
		}

		.anat__body {
			gap: var(--space-5);
		}

		
		.anat__card {
			margin-inline-start: var(--space-5);
			padding: var(--space-4) var(--space-5) var(--space-3);
		}

		.anat__text {
			font-size: var(--text-sm);
		}

		.anat__advice,
		.anat__help {
			font-size: var(--text-xs);
		}

		.anat__pick {
			b {
				font-size: var(--text-base);
			}

			span:last-child {
				font-size: var(--text-xs);
			}
		}

		
		.anat__list {
			position: relative;
			grid-template-columns: none;
			grid-auto-flow: column;
			grid-auto-columns: min(72vw, 280px);
			gap: var(--space-3);
			margin-inline: calc(var(--gutter) * -1);
			
			padding: 0 var(--gutter) var(--space-6);
			margin-block-end: calc(var(--space-6) * -1);
			overflow-x: auto;
			overscroll-behavior-inline: contain;
			scroll-snap-type: inline mandatory;
			scroll-padding-inline: var(--gutter);
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.anat__part {
			border: 1px solid var(--color-border);
			scroll-snap-align: start;
		}
	}
.flow {
		
		--flow-step: 4s;
		margin-block-start: clamp(40px, 5vw, 72px);
	}

	.flow__label {
		margin: 0 0 var(--space-5);
	}

	
	.flow__pick {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		opacity: 0;
		pointer-events: none;
	}

	.flow__rail {
		display: grid;
		gap: 0 var(--space-3);
		margin: 0;
		padding: 0;
		list-style: none;
		grid-template-columns: repeat(2, 1fr);
	}

	@media (min-width: 720px) {
		.flow__rail {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	
	.flow__rail label {
		position: relative;
		display: flex;
		align-items: baseline;
		gap: var(--space-3);
		padding-block: var(--space-4) var(--space-3);
		cursor: pointer;

		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: 0 0 auto;
			block-size: 3px;
			border-radius: var(--radius-pill);
		}

		&::before {
			background: var(--color-border);
		}

		&::after {
			background: var(--color-accent);
			scale: 0 1;
			transform-origin: 0 50%;
			transition: scale 360ms var(--ease-out), opacity 360ms ease;
		}

		&:dir(rtl)::after {
			transform-origin: 100% 50%;
		}

		&:hover .flow__name {
			color: var(--color-text);
		}
	}

	.flow__num {
		font-size: var(--text-xs);
		font-variant-numeric: tabular-nums;
		color: var(--color-text-muted);
		transition: color 260ms ease;
	}

	.flow__name {
		font-size: var(--text-lg);
		color: var(--color-text-secondary);
		transition: color 260ms ease;
	}

	.flow__stage {
		display: grid;
		gap: var(--space-5);
		align-items: center;
		margin-block-start: var(--space-4);
	}

	@media (min-width: 900px) {
		.flow__stage {
			grid-template-columns: minmax(0, 1fr) auto;
			gap: var(--space-8);
		}
	}

	
	.flow__notes,
	.flow__states {
		display: grid;

		> * {
			grid-area: 1 / 1;
			opacity: 0;
			translate: 0 6px;
			transition:
				opacity 320ms ease,
				translate 320ms var(--ease-out);
		}
	}

	.flow__notes p {
		margin: 0;
		max-inline-size: 60ch;
		font-size: var(--text-lg);
		line-height: 1.5;
		color: var(--color-text-secondary);
		text-wrap: pretty;
	}

	.flow__file {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		justify-self: start;
		min-inline-size: 290px;
		padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
		border: 1px solid var(--wpanel-border);
		border-radius: var(--radius-lg);
		background: var(--wpanel);
		box-shadow: var(--wpanel-shadow);
		transition: opacity 400ms ease;
	}

	.flow__doc {
		display: grid;
		place-items: center;
		inline-size: 40px;
		block-size: 40px;
		border-radius: 12px;
		background: var(--color-accent-soft);
		color: var(--color-accent-ink);
		transition:
			background 400ms ease,
			color 400ms ease;
	}

	.flow__meta {
		display: flex;
		flex-direction: column;
		gap: 3px;

		b {
			font-size: var(--text-sm);
			font-weight: var(--fw-medium);
			text-decoration-color: transparent;
			transition: color 400ms ease, text-decoration-color 400ms ease;
		}
	}

	.flow__states span {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: var(--text-xs);
		color: var(--color-accent-ink);
		white-space: nowrap;
	}

	

	#safety-flow-1:checked ~ .flow__rail li:nth-child(1) label::after {
		scale: 1 1;
	}

	#safety-flow-1:checked ~ .flow__rail li:nth-child(1) :is(.flow__num, .flow__name) {
		color: var(--color-text);
	}

	#safety-flow-1:checked ~ .flow__stage :is(.flow__notes, .flow__states) > :nth-child(1) {
		opacity: 1;
		translate: none;
	}
	
	
	#safety-flow-2:checked ~ .flow__rail li:nth-child(-n + 1) label::after {
		scale: 1 1;
		opacity: 0.4;
	}

	#safety-flow-2:checked ~ .flow__rail li:nth-child(2) label::after {
		scale: 1 1;
	}

	#safety-flow-2:checked ~ .flow__rail li:nth-child(2) :is(.flow__num, .flow__name) {
		color: var(--color-text);
	}

	#safety-flow-2:checked ~ .flow__stage :is(.flow__notes, .flow__states) > :nth-child(2) {
		opacity: 1;
		translate: none;
	}
	
	
	#safety-flow-3:checked ~ .flow__rail li:nth-child(-n + 2) label::after {
		scale: 1 1;
		opacity: 0.4;
	}

	#safety-flow-3:checked ~ .flow__rail li:nth-child(3) label::after {
		scale: 1 1;
	}

	#safety-flow-3:checked ~ .flow__rail li:nth-child(3) :is(.flow__num, .flow__name) {
		color: var(--color-text);
	}

	#safety-flow-3:checked ~ .flow__stage :is(.flow__notes, .flow__states) > :nth-child(3) {
		opacity: 1;
		translate: none;
	}
	
	
	#safety-flow-4:checked ~ .flow__rail li:nth-child(-n + 3) label::after {
		scale: 1 1;
		opacity: 0.4;
	}

	#safety-flow-4:checked ~ .flow__rail li:nth-child(4) label::after {
		scale: 1 1;
	}

	#safety-flow-4:checked ~ .flow__rail li:nth-child(4) :is(.flow__num, .flow__name) {
		color: var(--color-text);
	}

	#safety-flow-4:checked ~ .flow__stage :is(.flow__notes, .flow__states) > :nth-child(4) {
		opacity: 1;
		translate: none;
	}
	

	
	#safety-flow-4:checked ~ .flow__stage .flow__file {
		.flow__doc {
			background: var(--color-surface-2);
			color: var(--color-text-muted);
		}

		b {
			color: var(--color-text-muted);
			text-decoration: line-through;
			text-decoration-color: currentcolor;
		}

		.flow__states span {
			color: var(--color-text-muted);
		}
	}

	
	@media (prefers-reduced-motion: no-preference) {
		
		.flow.is-auto #safety-flow-1:checked ~ .flow__rail li:nth-child(1) label::after {
			animation: flow-fill var(--flow-step) linear both;
		}
		
		.flow.is-auto #safety-flow-2:checked ~ .flow__rail li:nth-child(2) label::after {
			animation: flow-fill var(--flow-step) linear both;
		}
		
		.flow.is-auto #safety-flow-3:checked ~ .flow__rail li:nth-child(3) label::after {
			animation: flow-fill var(--flow-step) linear both;
		}
		
		.flow.is-auto #safety-flow-4:checked ~ .flow__rail li:nth-child(4) label::after {
			animation: flow-fill var(--flow-step) linear both;
		}
		

		.flow.is-auto:is(:not(.is-playing), :hover, :has(:focus-visible)) .flow__rail label::after {
			animation-play-state: paused;
		}
	}

	@keyframes flow-fill {
		from {
			scale: 0 1;
		}
		to {
			scale: 1 1;
		}
	}

	
	
	#safety-flow-1:focus-visible ~ .flow__rail li:nth-child(1) label {
		outline: 2px solid var(--color-accent);
		outline-offset: 4px;
		border-radius: 6px;
	}
	
	#safety-flow-2:focus-visible ~ .flow__rail li:nth-child(2) label {
		outline: 2px solid var(--color-accent);
		outline-offset: 4px;
		border-radius: 6px;
	}
	
	#safety-flow-3:focus-visible ~ .flow__rail li:nth-child(3) label {
		outline: 2px solid var(--color-accent);
		outline-offset: 4px;
		border-radius: 6px;
	}
	
	#safety-flow-4:focus-visible ~ .flow__rail li:nth-child(4) label {
		outline: 2px solid var(--color-accent);
		outline-offset: 4px;
		border-radius: 6px;
	}
	

	
	@container (width < 700px) {
		.flow__label {
			margin-block-end: var(--space-3);
		}

		.flow__rail {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 0 var(--space-2);
		}

		.flow__rail label {
			flex-direction: column;
			gap: 2px;
			padding-block: var(--space-3) var(--space-2);
		}

		.flow__name {
			font-size: var(--text-sm);
		}
	}

	@container (width < 500px) {
		.flow__rail {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-1) var(--space-4);
		}
	}
@property --orbit-spin {
		syntax: "<angle>";
		inherits: true;
		initial-value: 0deg;
	}

	.orbit {
		
		--orbit-r: 37cqi;
		container-type: inline-size;
		position: relative;
		
		display: grid;
		place-items: center;
		inline-size: min(100%, 560px);
		aspect-ratio: 1;
		margin-inline: auto;
		animation: orbit-spin 90s linear infinite;
	}

	@keyframes orbit-spin {
		to { --orbit-spin: 360deg; }
	}


	
	.orbit::before {
		content: "";
		position: absolute;
		inset: 18%;
		border-radius: 50%;
		background: radial-gradient(closest-side, var(--lum-glow), var(--lum-glow-halo) 60%, transparent);
		filter: blur(24px);
	}

	.orbit__ring {
		position: absolute;
		inset: calc(50% - var(--orbit-r));
		border: 1px solid var(--color-border-strong);
		border-radius: 50%;
	}

	.orbit__lum {
		position: relative;
		inline-size: 34%;
	}

	.orbit__cards {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	
	.orbit__slot {
		--at: calc(var(--a) + var(--orbit-spin));
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		translate: -50% -50%;
		transform: rotate(var(--at)) translateY(calc(-1 * var(--orbit-r))) rotate(calc(-1 * var(--at)));
	}

	.orbit__card {
		padding: var(--space-2) var(--space-3);
		border: 1px solid var(--wpanel-border);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		box-shadow: var(--wpanel-shadow);
		white-space: nowrap;
		animation: orbit-float 5s ease-in-out infinite alternate;
		animation-delay: calc(var(--i) * -1.3s);
	}

	@keyframes orbit-float {
		from { translate: 0 -4px; }
		to   { translate: 0 4px; }
	}

	.orbit__card p {
		margin: 0;
	}

	.orbit__value {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		font-size: var(--text-sm);
		font-weight: var(--fw-semibold);
		color: var(--color-text);

		small {
			font-size: var(--text-xs);
			font-weight: var(--fw-regular);
			color: var(--color-text-muted);
		}
	}

	.orbit__icon {
		display: inline-grid;
		margin-inline-end: var(--space-1);
		color: var(--color-accent-ink);
	}

	.orbit__label {
		font-size: var(--text-xs);
		color: var(--color-text-muted);
	}

	
	.orbit--linked .orbit__card.is-pulse {
		animation:
			orbit-float 5s ease-in-out infinite alternate,
			orbit-pulse 1.1s var(--ease-out);
		animation-delay: calc(var(--i) * -1.3s), 0s;
	}

	@keyframes orbit-pulse {
		from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent), var(--wpanel-shadow); border-color: var(--color-accent); }
		to   { box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-accent) 0%, transparent), var(--wpanel-shadow); }
	}

	
	@container (width < 460px) {
		.orbit--linked .orbit__card {
			padding: 6px 10px;
			border-radius: var(--radius-pill);
		}

		.orbit--linked .orbit__label {
			display: none;
		}

		.orbit--linked .orbit__value {
			font-size: var(--text-xs);

			small {
				font-size: 0.9em;
			}
		}

		.orbit--linked .orbit__icon {
			margin-inline-end: 0;

			svg {
				inline-size: 14px;
				block-size: 14px;
			}
		}
	}

	

	
	.orbit--arc {
		inline-size: min(100%, 440px);
		margin-block: calc(min(100%, 440px) * -0.06) calc(min(100%, 440px) * -0.2);
		animation: none;
		mask-image: linear-gradient(to bottom, #000 64%, transparent 80%);

		
		.orbit__slot {
			--k: var(--k0);
			--a: calc(-105deg + 210deg * var(--k) / (var(--n) - 1));
		}

		.orbit__card {
			padding: 6px 12px;
			border-radius: var(--radius-pill);
		}

		.orbit__label {
			display: none;
		}

		.orbit__value {
			font-size: var(--text-xs);
		}

		.orbit__icon {
			margin-inline-end: 0;

			svg {
				inline-size: 14px;
				block-size: 14px;
			}
		}
	}

	
	@container (width < 400px) {
		.orbit--arc {
			.orbit__ring,
			.orbit__slot {
				--orbit-r: 34cqi;
			}

			.orbit__slot {
				--n: 4;

				&:is(:nth-child(2), :nth-child(5)) {
					display: none;
				}

				&:nth-child(3) { --k: 1; }
				&:nth-child(4) { --k: 2; }
				&:nth-child(6) { --k: 3; }
			}

			.orbit__value small {
				display: none;
			}
		}
	}

	@media (max-width: 699px) {
		.orbit--linked {
			animation: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.orbit,
		.orbit__card {
			animation: none;
		}
	}
.cta {
		padding-block: 0 var(--section-gap);
		
		overflow-x: clip;
	}

	.cta__stage {
		position: relative;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		.eyebrow {
			margin: var(--space-4) 0 0;
		}

		h2 {
			margin: var(--space-2) 0 0;
			text-wrap: balance;
		}

		.lead {
			margin: var(--space-3) 0 0;
		}
	}

	
	.cta__glow {
		position: absolute;
		inset: -8% 0 -4%;
		z-index: -1;
		background:
			var(--dither),
			radial-gradient(
				closest-side at 50% 42%,
				var(--lum-glow) 0%,
				var(--lum-glow-halo) 55%,
				transparent 100%
			);
		background-size: var(--dither-size), auto;
		pointer-events: none;
	}

	.cta__orbit {
		inline-size: 100%;
	}

	.cta__install {
		margin-block-start: var(--space-8);
		justify-content: center;
	}

	
	.cta__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
		margin-block-start: var(--space-8);
	}

	
	.cta__secondary {
		padding-block: 14px;
	}
	
	.cta__note {
		margin: var(--space-6) 0 0;
		font-size: var(--text-sm);
		color: var(--color-text-secondary);
		text-wrap: balance;
	}

	
	@container (width < 700px) {
		.cta__install {
			margin-block-start: var(--space-6);
		}
	}

	

	.cta__plate {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
		padding: clamp(40px, 6vw, 88px) var(--gutter);
		border-radius: var(--radius-2xl);
		text-align: center;
		isolation: isolate;
		overflow: hidden;

		h2,
		p {
			margin: 0;
		}

		.lead {
			max-inline-size: 52ch;
		}
	}

	
	.cta__plate::before,
	.cta__plate::after {
		content: "";
		position: absolute;
		inset: -8px;
		
		mask-image:
			linear-gradient(
				to right,
				transparent 0,
				rgb(0 0 0 / 0.18) 10%,
				rgb(0 0 0 / 0.58) 22%,
				#000 38%,
				#000 62%,
				rgb(0 0 0 / 0.58) 78%,
				rgb(0 0 0 / 0.18) 90%,
				transparent 100%
			),
			linear-gradient(
				to bottom,
				transparent 0,
				rgb(0 0 0 / 0.18) 12%,
				rgb(0 0 0 / 0.58) 26%,
				#000 42%,
				#000 58%,
				rgb(0 0 0 / 0.58) 74%,
				rgb(0 0 0 / 0.18) 88%,
				transparent 100%
			);
		mask-composite: intersect;
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
	}

	.cta__plate::before {
		z-index: -2;
		background: var(--color-surface-2);
	}

	.cta__plate::after {
		z-index: -1;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104'%3E%3Crect x='4' y='4' width='96' height='96' rx='22' fill='%23ffffff'/%3E%3C/svg%3E");
		background-size: 104px 104px;
		opacity: 0.55;
	}

	
	:root[data-theme="dark"] .cta__plate::before {
		display: none;
	}

	:root[data-theme="dark"] .cta__plate::after {
		opacity: 0.045;
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) .cta__plate::before {
			display: none;
		}

		:root:not([data-theme="light"]) .cta__plate::after {
			opacity: 0.045;
		}
	}

	
	.cta__plate .cta__actions {
		margin-block-start: var(--space-2);
	}

	
	.cta__lum {
		inline-size: clamp(136px, 13vw, 196px);
	}
.art__spot {
		fill: url(#art-spot);
	}

	.art__spark {
		fill: var(--art-paper);
		opacity: 0.9;
	}

	.art__line--faint {
		opacity: 0.6;
	}

	.art__pill-line {
		fill: var(--art-mint-deep);
		opacity: 0.35;
	}

	.art__ink {
		fill: var(--art-ink);
	}

	.art__paper-hole {
		fill: var(--art-paper-shade);
	}

	.art__box {
		fill: var(--art-paper);
		stroke: var(--art-line-strong);
		stroke-width: 1.6;
	}

	.art__shade {
		fill: var(--art-paper-shade);
		stroke: var(--art-paper-edge);
		stroke-width: 1;
	}

	.art__label {
		stroke-width: 1;
	}

	.art__slot {
		fill: var(--art-paper);
		stroke: var(--art-line);
		stroke-width: 1;
	}

	.art__face {
		fill: var(--art-paper);
		stroke: var(--art-line);
		stroke-width: 1.5;
	}

	.art__tick {
		fill: var(--art-line-strong);
	}

	.art__hand {
		fill: none;
		stroke: var(--art-ink);
		stroke-width: 3;
		stroke-linecap: round;
	}

	.art__glass {
		fill: var(--art-glass);
		stroke: var(--art-paper-edge);
		stroke-width: 1.5;
	}

	.art__glass-hi {
		fill: var(--art-paper);
		opacity: 0.85;
	}

	
	.art__chart-area {
		fill: var(--art-sky);
		opacity: 0.45;
	}

	.art__chart-line,
	.art__pen {
		fill: none;
		stroke: var(--art-sky-deep);
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.art__chart-line {
		stroke-width: 3;
	}

	.art__pen {
		stroke-width: 2.2;
	}

	.art__chart-dot {
		fill: var(--art-paper);
		stroke: var(--art-sky-deep);
		stroke-width: 2;
	}

	.art__chart-end {
		stroke: var(--art-paper);
		stroke-width: 2;
	}

	
	.art__lens-bg {
		fill: var(--art-paper);
	}

	.art__lens-tint {
		fill: var(--art-sky);
		opacity: 0.12;
	}

	.art__lens-glare {
		fill: var(--art-paper);
		opacity: 0.55;
	}

	.art__lens-ring {
		fill: none;
		stroke: url(#art-mint);
		stroke-width: 6.5;
	}

	.art__lens-edge {
		fill: none;
		stroke: var(--art-mint-edge);
		stroke-width: 1;
		opacity: 0.6;
	}

	.art__lens-hi {
		fill: none;
		stroke: var(--art-paper);
		stroke-width: 2.4;
		stroke-linecap: round;
		opacity: 0.8;
	}

	.art__handle,
	.art__handle-cast,
	.art__handle-hi {
		fill: none;
		stroke-linecap: round;
	}

	.art__handle {
		stroke: var(--art-mint-deep);
		stroke-width: 10;
	}

	.art__handle-cast {
		stroke: var(--art-shadow);
		stroke-width: 9;
		opacity: 0.1;
	}

	.art__handle-hi {
		stroke: var(--art-paper);
		stroke-width: 2.2;
		opacity: 0.45;
	}

	
	.art__alert,
	.art__liquid,
	.art__charge,
	.art__moon,
	.art__tag-a {
		fill: url(#art-sky);
	}

	.art__alert-depth {
		fill: var(--art-sky-depth);
	}

	.art__alert-soft {
		fill: var(--art-sky-soft);
	}

	.art__today {
		fill: var(--art-sky-soft);
		stroke: var(--art-sky-deep);
		stroke-width: 1.6;
	}

	.art__liquid-top {
		fill: var(--art-sky);
	}

	.art__cal-head,
	.art__tag-b {
		fill: url(#art-mint);
	}

	.art__tag-c {
		fill: var(--art-line-strong);
	}

	.art__sticker {
		fill: url(#art-sky);
		stroke: var(--art-paper);
		stroke-width: 3;
		stroke-linejoin: round;
	}
.blog__grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-4);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.blog__card {
		position: relative;
		background: var(--color-surface);

		h3 {
			margin: 0;
			font-size: var(--text-lg);
			line-height: var(--lh-snug);
			text-wrap: balance;
		}

		a {
			color: inherit;
			text-decoration: none;

			
			&::after {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: inherit;
			}

			&:focus-visible {
				outline: none;

				&::after {
					outline: 2px solid var(--color-accent);
					outline-offset: 3px;
				}
			}
		}

		&:hover a {
			color: var(--color-accent-text);
		}
	}

	.blog__text {
		display: grid;
		gap: var(--space-2);
	}

	.blog__category {
		margin: 0;
		font-size: var(--text-xs);
		color: var(--color-text-muted);
	}

	
	.blog__cover {
		aspect-ratio: 16 / 9;
		margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2);
		border-start-start-radius: calc(var(--radius-xl) - 1px);
		border-start-end-radius: calc(var(--radius-xl) - 1px);
	}

	
	@media (720px <= width <= 900px) {
		.blog__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	
	@container (width < 700px) {
		.blog__card a:focus-visible::after {
			outline-offset: -3px;
		}
	}
.consent-toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding: 7px var(--space-4) 7px 7px;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		color: var(--color-text-secondary);
		font-size: var(--text-xs);
		font-weight: var(--fw-medium);
		cursor: pointer;

		&[hidden] {
			display: none;
		}

		&:hover {
			background: var(--color-surface);
			color: var(--color-text);
		}

		&:has(:focus-visible) {
			outline: 2px solid var(--color-accent);
			outline-offset: 2px;
		}
	}

	
.consent-toggle__box {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.4em;
  width: 1.4em;
  height: 1.4em;

  input {
      appearance: none;
      width: 100%;
      height: 100%;
      margin: 0;
      border: 1.5px solid var(--color-border-strong);
      border-radius: 50%;
      background: transparent;
      cursor: inherit;

      &:checked {
          border-color: var(--color-accent);
          background: var(--color-accent);
      }

      &:focus-visible {
          outline: none;
      }
  }

  svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
			fill: none;
     	stroke: var(--color-accent-contrast);
			stroke-width: 2;
			stroke-linecap: round;
			stroke-linejoin: round;
			pointer-events: none;
			visibility: hidden;
      /* rest unchanged */
  }

		input:checked + svg {
			visibility: visible;
		}
}
	
	@media (forced-colors: active) {
		.consent-toggle__box svg {
			stroke: CanvasText;
		}
	}

.consent-toggle {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
}
.site-footer {
		position: relative;
		margin-block-start: var(--section-gap);
		padding-block-start: clamp(36px, 4vw, 56px);
		border-block-start: 1px solid var(--color-border);
		
		overflow: hidden;
	}

	
	
	.site-footer__grid {
		display: grid;
		gap: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 56px);
		grid-template-columns: 1fr;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
		-webkit-hyphenate-limit-before: 4;
		-webkit-hyphenate-limit-after: 4;
	}

	@media (min-width: 900px) {
		.site-footer__grid {
			grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
		}

		.site-footer__brand {
			grid-column: 1;
			grid-row: 1;
		}

		.site-footer__notes {
			grid-column: 4;
			grid-row: 1;
			align-self: start;
		}
	}

	.site-footer__brand {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}

	
	.site-footer__parent {
		inline-size: 150px;
		opacity: 0.85;
	}

	
	.site-footer__about {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--space-3) var(--space-3);
		max-inline-size: 38ch;
		font-size: var(--text-sm);
		line-height: var(--lh-normal);
		color: var(--color-text-secondary);

		p {
			margin: 0;
		}
	}

	.site-footer__icon {
		display: grid;
		place-items: center;
		block-size: 1lh;
		inline-size: 26px;
	}

	.site-footer__column {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);

		.eyebrow {
			margin: 0;
		}

		ul {
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
			margin: 0;
			padding: 0;
			list-style: none;
		}

		a {
			color: var(--color-text);
			text-decoration: none;
			transition: color 200ms var(--ease-out);

			&:hover {
				color: var(--color-accent-ink);
			}
		}
	}

	.site-footer__notes {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		align-self: end;
		max-inline-size: 62ch;

		p {
			margin: 0;
			font-size: var(--text-sm);
			line-height: var(--lh-normal);
			color: var(--color-text-muted);
		}
	}

	.site-footer__contact a,
	.site-footer__pending {
		color: var(--color-text-secondary);
	}

	
	.site-footer__legal {
		display: grid;
		gap: var(--space-1);
	}

	.site-footer__toggles {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	
	
	.site-footer__inner {
		position: relative;
		z-index: 1;
	}

	.site-footer__wordmark {
		position: relative;
		z-index: 0;
		
		margin: -0.05em 0 -0.22em;
		padding-inline: var(--gutter);
		font-family: var(--font-display);
		font-size: clamp(5rem, 25vw, 23rem);
		line-height: 0.78;
		letter-spacing: var(--ls-display);
		text-align: center;
		white-space: nowrap;
		
		color: color-mix(in srgb, var(--color-text) 6%, transparent);
		user-select: none;
		
		mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 92%);
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
	}

	
	@container (width < 700px) {
		.site-footer__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-5) var(--space-4);
		}

		.site-footer__brand,
		.site-footer__notes {
			grid-column: 1 / -1;
		}
	}

	
	@media (max-width: 719px) {
		.site-footer__wordmark {
			display: none;
		}

		.site-footer {
			padding-block-end: var(--space-6);
		}
	}