/* ============================================================================
   Homepage section 3: the system scroller (VOY-908, spec KB-509).

   Pattern: patterns/home-system.php. Behaviour: home-system.js, loaded with
   this file by voyagermark_enqueue_front_sections() on the front page only.

   The CARROUSEL is the default layout: tablet, mobile, short desktop, reduced
   motion and no JS all get it, so nothing here depends on the script having
   run. The script adds .is-js, then .is-pinned when the viewport qualifies
   (1024px wide and up, stage scale at least 0.8, reduced motion off), and
   sets --s and --vy-sys-track.

   Design-system tokens only. Two things in custom.css shape this file:
   - The section sets its background here, not with the bg-canvas preset.
     custom.css forces `color: inherit` on every descendant of a
     has-bg-canvas-background-color group that is not .has-text-color, at a
     specificity no class rule here can beat.
   - The parent theme caps every child of an unconstrained alignfull group at
     the wide size with auto margins. The stage opts out below.
   ============================================================================ */

/* CONTENT EDGE and SPACING match the proof bar above, by Ben's review
   (2026-09-24): its 40px gutter and wide-size cap give a content edge of
   max(40px, (width - wide) / 2) at every width, so --sys-pad is that same
   formula. It resolves as a percentage wherever it is used, against the
   full-width box, which is what makes it the section's width. The spec's
   80 / 48 / 20px gutters are superseded.

   No top padding and no block gap: the proof bar's bottom padding is the
   whole gap between the two sections. The pinned layout pulls the section
   up by the header's design offset (--sys-pull, set by the script) so the
   eyebrow lands at the same distance there. */
.wp-block-group.vy-sys {
	--sys-active: var(--accent-bright);
	--sys-pad: max(40px, calc((100% - var(--wp--custom--layout--wide, 1440px)) / 2));
	--sys-gap: 12px;
	--card-w: min(318px, 100vw - 80px);
	position: relative;
	margin-block-start: 0;
	background: var(--bg-canvas);
	color: var(--fg-1);
	padding: 0 0 48px;
}

.wp-block-group.vy-sys > .vy-sys__stage {
	max-width: none;
	margin: 0;
}

/* --- Colour per piece. Cards, hub nodes, timeline stops and segments all
   carry is-sys-<key>; the section's data-active picks the header colour. --- */

.vy-sys .is-sys-system      { --c: var(--accent-bright);       --icon: url(home-system/icon-system.svg); }
.vy-sys .is-sys-website     { --c: var(--color-violet-300);    --icon: url(home-system/icon-website.svg); }
.vy-sys .is-sys-search      { --c: var(--color-cyan-400);      --icon: url(home-system/icon-search.svg); }
.vy-sys .is-sys-ai          { --c: var(--color-green-300);     --icon: url(home-system/icon-ai.svg); }
.vy-sys .is-sys-social      { --c: var(--color-amber-300);     --icon: url(home-system/icon-social.svg); }
.vy-sys .is-sys-ads         { --c: var(--color-magenta-300);   --icon: url(home-system/icon-ads.svg); }
.vy-sys .is-sys-measurement { --c: var(--signal-ok);           --icon: url(home-system/icon-measurement.svg); }

.vy-sys[data-active="website"]     { --sys-active: var(--color-violet-300); }
.vy-sys[data-active="search"]      { --sys-active: var(--color-cyan-400); }
.vy-sys[data-active="ai"]          { --sys-active: var(--color-green-300); }
.vy-sys[data-active="social"]      { --sys-active: var(--color-amber-300); }
.vy-sys[data-active="ads"]         { --sys-active: var(--color-magenta-300); }
.vy-sys[data-active="measurement"] { --sys-active: var(--signal-ok); }

/* --- Visually hidden, still read. The block theme ships no
   .screen-reader-text, and custom.css's .vy-sr belongs to the scorecard. --- */

.vy-sys .vy-sys-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Header ---------------------------------------------------------------- */

.vy-sys .vy-sys__head {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 var(--sys-pad);
}

.vy-sys .vy-sys__head > * {
	margin: 0;
}

.vy-sys .vy-sys__eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-4);
}

.vy-sys .vy-sys__count {
	color: var(--fg-3);
}

.vy-sys .vy-sys__title {
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--fg-1);
	min-height: 148px;
	transition: opacity 100ms ease;
}

.vy-sys .vy-sys__title.is-fading {
	opacity: 0;
}

.vy-sys .vy-sys__title em {
	font-style: normal;
	color: var(--sys-active);
	transition: color 300ms ease;
}

.vy-sys .vy-sys__p1,
.vy-sys .vy-sys__p2 {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
}

.vy-sys .vy-sys__p1 { color: var(--fg-1); min-height: 100px; }
.vy-sys .vy-sys__p2 { color: var(--fg-3); min-height: 96px; }

/* Proof chip, created by the script. Hidden when the state has no proof, and
   then it reserves no space. */
.vy-sys .vy-sys__proof {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--border-1);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1.4;
	color: var(--fg-3);
}

.vy-sys .vy-sys__proof::before {
	content: "";
	flex: 0 0 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sys-active);
	transition: background-color 300ms ease;
}

.vy-sys .vy-sys__proof[hidden] {
	display: none;
}

/* --- Carousel (default) ------------------------------------------------------ */

.vy-sys .vy-sys__cards {
	container-type: inline-size;
	display: flex;
	gap: var(--sys-gap);
	margin: 22px 0 0;
	padding: 0 0 0 var(--sys-pad);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--sys-pad);
	scrollbar-width: none;
}

.vy-sys .vy-sys__cards::-webkit-scrollbar {
	display: none;
}

/* Trailing spacer so the last card can snap to the start edge. */
.vy-sys .vy-sys__cards::after {
	content: "";
	flex: 0 0 max(1px, calc(100cqw - var(--card-w) - var(--sys-gap)));
}

.vy-sys .vy-sys-card {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 var(--card-w);
	height: 452px;
	margin: 0;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden;
	border: 1px solid var(--border-hair);
	border-radius: 12px;
	background: var(--bg-panel);
	scroll-snap-align: start;
	transition: border-color 300ms ease;
}

.vy-sys .vy-sys-card > * {
	margin: 0;
	flex-shrink: 0;
}

/* The 2px accent along the top edge. */
.vy-sys .vy-sys-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--c);
	opacity: 0;
	transition: opacity 300ms ease;
}

.vy-sys .vy-sys-card__tag {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 40px;
	padding-left: 52px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-4);
}

/* Icon tile and icon: decoration on an element that already has content. */
.vy-sys .vy-sys-card__tag::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border: 1px solid var(--border-1);
	border-radius: 8px;
	background: var(--bg-raised);
}

.vy-sys .vy-sys-card__tag::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: var(--fg-5);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
	transition: background-color 300ms ease;
}

.vy-sys .vy-sys-card__name {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--fg-1);
}

.vy-sys .vy-sys-card__cols {
	display: grid;
	gap: 12px;
}

/* Flow layout's blockGap would push the second column down. */
.vy-sys .vy-sys-card__cols > *,
.vy-sys .vy-sys-card__col > * {
	margin: 0;
}

.vy-sys .vy-sys-card__label {
	margin-bottom: 4px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-4);
}

.vy-sys .vy-sys-card__text {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.45;
}

.vy-sys .vy-sys-card__does .vy-sys-card__text    { color: var(--fg-1); }
.vy-sys .vy-sys-card__without .vy-sys-card__text { color: var(--fg-3); }

/* The clipping slot: pushed to the bottom, allowed to shrink to nothing, so
   a diagram can never cover the button. */
.vy-sys .vy-sys-card > .vy-sys-card__diagram {
	flex: 0 1 auto;
	min-height: 0;
	overflow: hidden;
	margin-top: auto;
}

.vy-sys .vy-sys-card__diagram img {
	display: block;
	width: 274px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 440 / 84;
	opacity: 0.5;
	transition: opacity 300ms ease;
}

.vy-sys .vy-sys-card__actions {
	display: flex;
	margin: 0;
}

.vy-sys .vy-sys-card__btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--border-1);
	border-radius: 2px;
	background: var(--bg-raised);
	color: var(--fg-3);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

.vy-sys .vy-sys-card__btn .wp-block-button__link::after {
	content: "\2192" / "";
}

.vy-sys .vy-sys-card__btn .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 2px;
}

/* --- The active piece. Without the script, the first card is the active one. */

.vy-sys .vy-sys-card.is-active,
.vy-sys:not(.is-js) .vy-sys-card:first-child {
	border-color: var(--border-strong);
}

.vy-sys .vy-sys-card.is-active::before,
.vy-sys:not(.is-js) .vy-sys-card:first-child::before {
	opacity: 1;
}

.vy-sys .vy-sys-card.is-active .vy-sys-card__tag::after,
.vy-sys:not(.is-js) .vy-sys-card:first-child .vy-sys-card__tag::after {
	background: var(--c);
}

.vy-sys .vy-sys-card.is-active .vy-sys-card__diagram img,
.vy-sys:not(.is-js) .vy-sys-card:first-child .vy-sys-card__diagram img {
	opacity: 1;
}

/* #08071A on every service colour passes 4.5:1; accent-bright is borderline,
   so the button text stays 14px/500. */
.vy-sys .vy-sys-card.is-active .vy-sys-card__btn .wp-block-button__link,
.vy-sys:not(.is-js) .vy-sys-card:first-child .vy-sys-card__btn .wp-block-button__link {
	border-color: var(--c);
	background: var(--c);
	color: var(--bg-canvas);
}

/* --- File tabs: pinned only. ------------------------------------------------ */

.vy-sys .vy-sys-card__tabbtn {
	display: none;
}

/* --- Timeline (created by the script) ---------------------------------------
   Mobile: seven bars, coloured up to and including the active card. */

.vy-sys .vy-sys__timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr));
	margin: 14px var(--sys-pad) 0;
}

.vy-sys .vy-sys__track {
	display: none;
}

.vy-sys .vy-sys__stop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0 2px;
	border: 0;
	border-radius: 2px;
	background: none;
	color: var(--fg-4);
	cursor: pointer;
}

.vy-sys .vy-sys__stop:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 2px;
}

.vy-sys .vy-sys__dot {
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background: var(--border-hair);
	transition: background-color 300ms ease, height 300ms ease;
}

.vy-sys .vy-sys__stop.is-reached .vy-sys__dot {
	background: var(--c);
}

.vy-sys .vy-sys__stop.is-active .vy-sys__dot {
	height: 4px;
}

.vy-sys .vy-sys__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* The hub, the scroll hint: desktop only. */
.vy-sys .vy-sys__hub,
.vy-sys .vy-sys__hint {
	display: none;
}

/* --- Tablet and up ---------------------------------------------------------- */

@media (min-width: 768px) {
	.wp-block-group.vy-sys {
		--sys-gap: 16px;
		--card-w: 400px;
		padding-bottom: 72px;
	}

	.vy-sys .vy-sys__head {
		gap: 18px;
	}

	.vy-sys .vy-sys__eyebrow {
		font-size: 11px;
	}

	.vy-sys .vy-sys__title {
		font-size: 44px;
		line-height: 1.04;
		min-height: 138px;
	}

	.vy-sys .vy-sys__p1,
	.vy-sys .vy-sys__p2 {
		font-size: 17px;
		line-height: 1.62;
		min-height: 56px;
	}

	.vy-sys .vy-sys__proof {
		font-size: 11px;
	}

	.vy-sys .vy-sys__cards {
		margin-top: 32px;
	}

	.vy-sys .vy-sys-card {
		height: 440px;
		padding: 26px 28px;
	}

	.vy-sys .vy-sys-card__tag {
		min-height: 44px;
		padding-left: 56px;
	}

	.vy-sys .vy-sys-card__tag::before {
		width: 44px;
		height: 44px;
		margin-top: -22px;
	}

	.vy-sys .vy-sys-card__tag::after {
		left: 12px;
	}

	.vy-sys .vy-sys-card__name {
		font-size: 32px;
	}

	.vy-sys .vy-sys-card__cols {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	.vy-sys .vy-sys-card__text {
		font-size: 15px;
	}

	.vy-sys .vy-sys-card__diagram img {
		width: 440px;
	}

	.vy-sys .vy-sys-card__btn .wp-block-button__link {
		min-height: 38px;
	}

	/* Dots, labels and service-coloured segments between the stop centres. */
	.vy-sys .vy-sys__timeline {
		margin-top: 24px;
	}

	.vy-sys .vy-sys__stop {
		justify-content: flex-start;
		min-width: 0;
		min-height: 44px;
		padding-top: 16px;
	}

	.vy-sys .vy-sys__dot {
		position: relative;
		z-index: 1;
		width: 8px;
		height: 8px;
		margin: 2px 0;
		border-radius: 50%;
		background: var(--fg-5);
		transition: background-color 300ms ease, width 300ms ease, height 300ms ease, margin 300ms ease;
	}

	.vy-sys .vy-sys__stop.is-active .vy-sys__dot {
		width: 12px;
		height: 12px;
		margin: 0;
	}

	.vy-sys .vy-sys__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		font-family: var(--font-mono);
		font-size: 10px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--fg-4);
		transition: color 300ms ease;
	}

	.vy-sys .vy-sys__stop.is-active .vy-sys__label {
		color: var(--fg-1);
	}

	.vy-sys .vy-sys__track {
		display: block;
		position: absolute;
		top: 21px;
		left: calc(100% / (var(--n, 7) * 2));
		right: calc(100% / (var(--n, 7) * 2));
		height: 2px;
		pointer-events: none;
	}

	.vy-sys .vy-sys__track::before {
		content: "";
		position: absolute;
		inset: 0;
		height: 1px;
		margin: auto 0;
		background: var(--border-hair);
	}

	.vy-sys .vy-sys__seg {
		position: absolute;
		top: 0;
		left: calc(var(--k) * 100% / (var(--n, 7) - 1));
		width: calc(100% / (var(--n, 7) - 1));
		height: 2px;
		background: var(--c);
		transform: scaleX(var(--f, 0));
		transform-origin: left center;
	}
}

/* --- Desktop carousel (1024px and up, not pinned) --------------------------- */

@media (min-width: 1024px) {
	.wp-block-group.vy-sys {
		--card-w: 520px;
	}

	.vy-sys .vy-sys__box {
		position: relative;
	}

	.vy-sys .vy-sys__head {
		max-width: calc(720px + var(--sys-pad));
	}

	.vy-sys .vy-sys__title {
		font-size: 52px;
		min-height: 162px;
	}

	.vy-sys .vy-sys-card {
		height: 404px;
		padding: 26px 40px;
	}

	.vy-sys .vy-sys__stop {
		min-width: 88px;
	}

	/* The pinned stage always has room for the hub. */
	.vy-sys.is-pinned .vy-sys__hub {
		display: block;
		position: absolute;
		width: 380px;
		height: 380px;
	}
}

/* The carousel only has room for a 720px header beside the 380px hub from
   1280px up; between 1024 and 1279 the hub would sit on the paragraphs. */
@media (min-width: 1280px) {
	.vy-sys .vy-sys__hub {
		display: block;
		position: absolute;
		right: var(--sys-pad);
		top: -36px;
		width: 380px;
		height: 380px;
	}
}

/* --- The hub (decorative, created by the script) --------------------------- */

.vy-sys .vy-sys__hub-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.vy-sys .vy-sys__ring {
	fill: none;
	stroke: var(--border-hair);
	stroke-width: 1;
}

.vy-sys .vy-sys__ring--inner {
	stroke-dasharray: 2 6;
}

.vy-sys .vy-sys__spoke {
	stroke: var(--border-hair);
	stroke-width: 1;
	transition: stroke 300ms ease;
}

.vy-sys .vy-sys__spoke.is-active {
	stroke: var(--c);
	stroke-width: 2;
	stroke-dasharray: 4 8;
	animation: vy-sys-flow 900ms linear infinite;
}

@keyframes vy-sys-flow {
	to { stroke-dashoffset: -12; }
}

.vy-sys .vy-sys__core {
	position: absolute;
	left: 150px;
	top: 150px;
	box-sizing: border-box;
	width: 80px;
	height: 80px;
	border: 1px solid var(--border-1);
	border-radius: 16px;
	background: var(--bg-raised);
	transition: border-color 300ms ease;
}

.vy-sys[data-active="system"] .vy-sys__core {
	border-color: var(--accent-bright);
}

.vy-sys .vy-sys__core::before {
	content: "";
	position: absolute;
	inset: 18px 12px;
	background: var(--fg-1);
	-webkit-mask: url(home-system/icon-system.svg) center / contain no-repeat;
	mask: url(home-system/icon-system.svg) center / contain no-repeat;
}

.vy-sys .vy-sys__pill {
	position: absolute;
	left: 50%;
	top: 88px;
	transform: translateX(-50%);
	padding: 3px 8px;
	border: 1px solid var(--border-1);
	border-radius: 999px;
	background: var(--bg-canvas);
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--fg-3);
}

.vy-sys .vy-sys__node {
	position: absolute;
	box-sizing: border-box;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border: 1px solid var(--border-1);
	border-radius: 10px;
	background: var(--bg-raised);
	transition: border-color 300ms ease;
}

.vy-sys .vy-sys__node::before {
	content: "";
	position: absolute;
	inset: 12px;
	background: var(--fg-5);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
	transition: background-color 300ms ease;
}

.vy-sys .vy-sys__node-label {
	position: absolute;
	left: 50%;
	top: 52px;
	transform: translateX(-50%);
	font-family: var(--font-body);
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--fg-5);
	transition: color 300ms ease;
}

.vy-sys .vy-sys__node.is-active {
	border-color: var(--c);
}

.vy-sys .vy-sys__node.is-active::before {
	background: var(--c);
}

.vy-sys .vy-sys__node.is-active .vy-sys__node-label {
	color: var(--fg-1);
}

/* --- Pinned stage ------------------------------------------------------------ */

@media (min-width: 1024px) {
	.wp-block-group.vy-sys.is-pinned {
		height: var(--vy-sys-track, auto);
		margin-block-start: calc(-1 * var(--sys-pull, 0px));
		padding: 0;
	}

	.wp-block-group.vy-sys.is-pinned > .vy-sys__stage {
		position: sticky;
		top: 0;
		height: 100vh;
		overflow: clip;
	}

	/* The design box, 1040 tall and scaled by s. The script sizes and places
	   it so its 80px design edges land on the site content edge
	   (--sys-box-w/x/y); the spec's fixed 1440 width centred in the viewport
	   left the content up to 126px inside the proof bar's edge at 1440x900. */
	.vy-sys.is-pinned .vy-sys__box {
		position: absolute;
		left: var(--sys-box-x, 0px);
		top: var(--sys-box-y, 0px);
		width: var(--sys-box-w, 1440px);
		max-width: none;
		height: 1040px;
		margin: 0;
		transform: scale(var(--s, 1));
		transform-origin: 0 0;
	}

	.vy-sys.is-pinned .vy-sys__head {
		position: absolute;
		left: 80px;
		top: 72px;
		width: 720px;
		padding: 0;
	}

	.vy-sys.is-pinned .vy-sys__hub {
		right: 80px;
		top: 36px;
	}

	.vy-sys.is-pinned .vy-sys__cards {
		position: absolute;
		left: 0;
		top: 532px;
		width: 1440px;
		height: 404px;
		display: block;
		margin: 0;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
		container-type: normal;
	}

	.vy-sys.is-pinned .vy-sys__cards::after {
		display: none;
	}

	.vy-sys.is-pinned .vy-sys-card {
		position: absolute;
		left: 0;
		top: 0;
		width: 520px;
		will-change: transform;
		transition: transform 160ms linear, border-color 300ms ease;
	}

	/* The dim overlay, over the content only: the tab keeps its own opacity. */
	.vy-sys.is-pinned .vy-sys-card::after {
		content: "";
		position: absolute;
		inset: 0 0 0 40px;
		z-index: 2;
		background: color-mix(in srgb, var(--bg-canvas) 50%, transparent);
		opacity: var(--t, 0);
		pointer-events: none;
		transition: opacity 300ms ease;
	}

	.vy-sys.is-pinned .vy-sys-card__tabbtn {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		width: 40px;
		margin: 0;
		padding: 18px 0 16px;
		border: 0;
		border-right: 1px solid var(--border-hair);
		border-radius: 12px 0 0 12px;
		background: var(--bg-panel);
		color: var(--fg-2);
		opacity: var(--t, 0);
		pointer-events: none;
		cursor: pointer;
		transition: opacity 300ms ease, background-color 300ms ease;
	}

	.vy-sys.is-pinned .vy-sys-card.is-stacked .vy-sys-card__tabbtn {
		pointer-events: auto;
	}

	.vy-sys.is-pinned .vy-sys-card__tabbtn:hover {
		background: var(--bg-raised);
	}

	.vy-sys.is-pinned .vy-sys-card__tabbtn:focus-visible {
		outline: 2px solid var(--accent-bright);
		outline-offset: -2px;
	}

	.vy-sys .vy-sys-card__tablabel {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-family: var(--font-mono);
		font-size: 10px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.vy-sys .vy-sys-card__tabdot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--c);
	}

	.vy-sys.is-pinned .vy-sys__timeline {
		position: absolute;
		left: 80px;
		right: 80px;
		bottom: 24px;
		margin: 0;
	}

	.vy-sys.is-pinned .vy-sys__hint {
		display: block;
		position: absolute;
		left: 80px;
		top: 492px;
		margin: 0;
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--fg-4);
		opacity: 0;
		transition: opacity 300ms ease;
	}

	.vy-sys.is-pinned[data-state="0"] .vy-sys__hint {
		opacity: 1;
	}
}

/* --- Reduced motion and the site's pause toggle ----------------------------- */

html[data-ascii-paused="true"] .vy-sys .vy-sys__spoke.is-active {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.vy-sys *,
	.vy-sys *::before,
	.vy-sys *::after {
		transition: none !important;
		animation: none !important;
	}
}