fancy-ui-react 0.2.1 → 0.4.0

package/dist/styles.css

@@ -313,7 +313,81 @@
  * scales the panel about its own centre without touching the centring.
  */
 .ft-btn {
-	--ft-btn-accent: var(--ft-accent, light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75)));
+	--ft-btn-accent: var(
+		--ft-accent,
+		light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75))
+	);
+	/* 150ms = tokens.DURATIONS.fast, cubic-bezier(0.4, 0, 0.2, 1) =
+	   tokens.EASINGS.inout — the reversible-state pair. It runs the colour
+	   channel, and the release half of the press: letting go settles, it does
+	   not snap back. */
+	--ft-btn-motion: var(--ft-duration-fast, 150ms) var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1));
+	/* The down-stroke only. 150ms = tokens.DURATIONS.fast,
+	   cubic-bezier(0.16, 1, 0.3, 1) = tokens.EASINGS.out — the arrival curve,
+	   which spends most of the scale in the first frames, so the press bites
+	   instead of easing in. Pressing is an arrival; releasing is what resolves
+	   either way. */
+	--ft-btn-press: var(--ft-duration-fast, 150ms) var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+	/*
+	 * Replaces the `transition-colors` utility removed from the class string,
+	 * at exactly the values that utility already resolved to. Colour is a state
+	 * change, not motion, so it stays OUTSIDE the reduced-motion query — gating
+	 * it would only make a theme flip look broken for the people who asked for
+	 * less movement.
+	 *
+	 * `box-shadow` is deliberately absent, and must stay absent: this button's
+	 * focus ring is `focus-visible:ring-*`, which compiles to a `box-shadow`,
+	 * and a focus ring must never animate.
+	 */
+	transition:
+		color var(--ft-btn-motion),
+		background-color var(--ft-btn-motion),
+		border-color var(--ft-btn-motion);
+	/* Kills the ~300ms tap delay without blocking scroll. A press that answers
+	   a third of a second late is not press feedback. */
+	touch-action: manipulation;
+}
+
+/*
+ * The press. Pressable's contract inlined as a plain rule on the native
+ * control rather than wrapping a `<button>` in a `<Pressable>` div — same
+ * `0.97`, same clock, one element instead of two.
+ *
+ * Only the property list is re-declared in here: `transform` joins the colour
+ * channel under `no-preference` and nowhere else, so with motion reduced the
+ * colours still cross and the button simply does not move. The resting state
+ * (no `transform` at all) is the ungated fallback.
+ *
+ * The two strokes are timed apart. The rule below carries the release curve,
+ * because that is the transition the button runs on its way back to rest;
+ * `:active` overrides `transform` with the arrival curve for the way down.
+ */
+@media (prefers-reduced-motion: no-preference) {
+	.ft-btn {
+		transition:
+			color var(--ft-btn-motion),
+			background-color var(--ft-btn-motion),
+			border-color var(--ft-btn-motion),
+			transform var(--ft-btn-motion);
+	}
+
+	/* Both inert states are excluded so a press that does nothing does not
+	   pretend to. `[data-disabled]` is the anchor branch, which has no native
+	   `:disabled` to hang this off; `[aria-busy]` is the loading one, on both
+	   branches. A native disabled `<button>` never matches `:active` anyway —
+	   the attribute selectors are what make the anchor behave like it. */
+	.ft-btn:not([data-disabled="true"]):not([aria-busy="true"]):active {
+		transform: scale(0.97);
+		/* The whole list is re-declared rather than just
+		   `transition-timing-function`, which has no per-property form here: a
+		   single value would retime the colour channel too. Only `transform`
+		   differs from the rule above. */
+		transition:
+			color var(--ft-btn-motion),
+			background-color var(--ft-btn-motion),
+			border-color var(--ft-btn-motion),
+			transform var(--ft-btn-press);
+	}
 }
 
 .ft-btn--accent {
@@ -355,6 +429,422 @@
 		transform: rotate(360deg);
 	}
 }
+/*
+ * `.animated-beam` is a port-added anchor: the source has no root class and
+ * relied on compiler scoping, while plain CSS is global. Every rule below is
+ * anchored on it; class names, custom properties and keyframe names are
+ * identical to the source.
+ */
+
+/* Theme-aware glass. Public vars first, house defaults as fallbacks. */
+.animated-beam .fibre-sheath {
+	stroke: var(--beam-fibre-rim, rgba(0, 0, 0, 0.07));
+}
+.animated-beam .fibre-core {
+	stroke: var(--beam-fibre, rgba(0, 0, 0, 0.18));
+}
+.animated-beam .fibre-glint {
+	stroke: var(--beam-fibre-glint, rgba(255, 255, 255, 0.75));
+}
+.dark .animated-beam .fibre-sheath {
+	stroke: var(--beam-fibre-rim, rgba(255, 255, 255, 0.06));
+}
+.dark .animated-beam .fibre-core {
+	stroke: var(--beam-fibre, rgba(255, 255, 255, 0.14));
+}
+.dark .animated-beam .fibre-glint {
+	stroke: var(--beam-fibre-glint, rgba(255, 255, 255, 0.16));
+}
+
+/* On a light surface a white core disappears; keep more colour there. */
+.animated-beam .packet-core {
+	stroke: color-mix(in oklab, var(--_core) 72%, white);
+}
+.dark .animated-beam .packet-core {
+	stroke: color-mix(in oklab, var(--_core) 45%, white);
+}
+
+.animated-beam .packet-layer {
+	stroke-dasharray: var(--_len) 3000;
+	stroke-dashoffset: var(--_o0);
+	animation: beam-packet var(--_dur, 5s) linear var(--_delay, 0s) infinite backwards;
+}
+
+/* Glide out, settle into the node at ARRIVAL (78%), then drain the tail. */
+@keyframes beam-packet {
+	0% {
+		stroke-dashoffset: var(--_o0);
+		animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
+	}
+	78% {
+		stroke-dashoffset: var(--_o1);
+		animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
+	}
+	100% {
+		stroke-dashoffset: var(--_o2);
+	}
+}
+
+.animated-beam .bloom-disc,
+.animated-beam .bloom-ring {
+	transform-box: fill-box;
+	transform-origin: center;
+	opacity: 0;
+	animation: beam-bloom var(--_dur, 5s) linear var(--_delay, 0s) infinite backwards;
+}
+.animated-beam .bloom-ring {
+	animation-name: beam-ring;
+}
+
+/* The head lands at 78%: the halo swells behind the node, then lets go. */
+@keyframes beam-bloom {
+	0%,
+	74% {
+		opacity: 0;
+		transform: scale(0.6);
+		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+	}
+	84% {
+		opacity: 0.85;
+		transform: scale(1);
+		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+	100% {
+		opacity: 0;
+		transform: scale(1.15);
+	}
+}
+
+/* A single ripple leaves the node on arrival. */
+@keyframes beam-ring {
+	0%,
+	77% {
+		opacity: 0;
+		transform: scale(0.96);
+		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+	}
+	81% {
+		opacity: 0.7;
+		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+	}
+	100% {
+		opacity: 0;
+		transform: scale(1.5);
+	}
+}
+
+/* Before hydration can ask the browser, keep reduced-motion users still. */
+@media (prefers-reduced-motion: reduce) {
+	.animated-beam .packet {
+		display: none;
+	}
+}
+/*
+ * Every rule below is anchored on `.at-root`, the class the source's own root
+ * element carries: the source's compiler scoped these selectors, plain CSS does
+ * not, so the anchor keeps the `at-*` hooks from leaking into a consumer page.
+ * Class names, custom properties, `@property` and keyframe names are identical
+ * to the source's; they are the visual contract.
+ */
+
+@property --at-angle {
+	syntax: "<angle>";
+	inherits: false;
+	initial-value: 0deg;
+}
+
+.at-root {
+	/* Public, class-themeable knobs with private fallbacks. */
+	--_at-a: var(--at-accent, oklch(0.62 0.13 295));
+	--_at-b: var(--at-accent-2, oklch(0.7 0.1 220));
+	--_at-core: color-mix(in oklab, var(--_at-a) 45%, white);
+	--_at-sep: var(--at-separator, var(--background, #ffffff));
+	--_at-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+	--_at-ease-rise: cubic-bezier(0.34, 1.32, 0.64, 1);
+	--_at-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
+	--_at-card-bg: rgba(255, 255, 255, 0.85);
+	--_at-card-line: rgba(0, 0, 0, 0.08);
+	--_at-card-hi: rgba(255, 255, 255, 0.9);
+	--_at-card-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.28), 0 2px 6px -2px rgba(0, 0, 0, 0.1);
+	--_at-name: #111113;
+	--_at-role: rgba(0, 0, 0, 0.55);
+}
+
+.dark .at-root {
+	--_at-a: var(--at-accent, oklch(0.78 0.1 295));
+	--_at-b: var(--at-accent-2, oklch(0.83 0.08 210));
+	--_at-card-bg: rgba(20, 20, 22, 0.85);
+	--_at-card-line: rgba(255, 255, 255, 0.1);
+	--_at-card-hi: rgba(255, 255, 255, 0.06);
+	--_at-card-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.8), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
+	--_at-name: #f4f4f5;
+	--_at-role: rgba(255, 255, 255, 0.55);
+}
+
+/* ---------- stack ---------- */
+
+.at-root .at-item {
+	outline: none;
+	transform: translateX(var(--_at-shift, 0px));
+}
+
+.at-root .at-item:not(:last-child) {
+	margin-inline-end: calc(var(--_at-size) * -0.285);
+}
+
+.at-root .at-item.at-active {
+	z-index: 30;
+}
+
+.at-root .at-avatar {
+	position: relative;
+	width: var(--_at-size);
+	height: var(--_at-size);
+	border-radius: 9999px;
+	isolation: isolate;
+	transform-origin: 50% 60%;
+}
+
+/* The hairline that separates stacked avatars, in the page colour. */
+.at-root .at-disc {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+	border-radius: 9999px;
+	background: var(--_at-sep);
+	box-shadow: 0 0 0 2px var(--_at-sep);
+}
+
+.at-root .at-avatar.at-lifted {
+	transform: translateY(-4px) scale(1.08);
+}
+
+.at-root .at-img {
+	position: absolute;
+	inset: 3px;
+	width: calc(100% - 6px);
+	height: calc(100% - 6px);
+	z-index: 3;
+}
+
+/* The lit ring is the focus indicator; forced-colors mode strips it, so
+   fall back to a system-coloured outline there. */
+@media (forced-colors: active) {
+	.at-root .at-item:focus-visible .at-avatar {
+		outline: 2px solid Highlight;
+		outline-offset: 2px;
+	}
+}
+
+/* ---------- presence ring ---------- */
+
+.at-root .at-ring,
+.at-root .at-glow {
+	position: absolute;
+	border-radius: 9999px;
+	background: conic-gradient(
+		from var(--at-angle),
+		var(--_at-a) 0deg,
+		var(--_at-b) 150deg,
+		var(--_at-core) 205deg,
+		var(--_at-a) 260deg,
+		var(--_at-a) 360deg
+	);
+}
+
+.at-root .at-ring {
+	inset: 0;
+	z-index: 2;
+	padding: 2px;
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask:
+		linear-gradient(#000 0 0) content-box exclude,
+		linear-gradient(#000 0 0);
+	opacity: 0.35;
+	transition: opacity 300ms var(--_at-ease-inout);
+}
+
+.at-root .at-glow {
+	inset: -3px;
+	z-index: 0;
+	filter: blur(7px);
+	opacity: 0;
+	transition: opacity 300ms var(--_at-ease-inout);
+}
+
+.at-root .at-active .at-ring {
+	opacity: 1;
+}
+
+.at-root .at-active .at-glow {
+	opacity: 0.55;
+}
+
+/* ---------- glass card ---------- */
+
+.at-root .at-tip {
+	bottom: calc(100% + 12px);
+	transform-origin: 50% 100%;
+}
+
+.at-root .at-card {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 5px;
+	padding: 8px 14px 9px;
+	border-radius: 10px;
+	white-space: nowrap;
+	background: var(--_at-card-bg);
+	border: 1px solid var(--_at-card-line);
+	box-shadow:
+		inset 0 1px 0 var(--_at-card-hi),
+		var(--_at-card-shadow);
+	-webkit-backdrop-filter: blur(12px) saturate(1.4);
+	backdrop-filter: blur(12px) saturate(1.4);
+	transform-origin: 50% 100%;
+	animation: at-fade 160ms var(--_at-ease-out) both;
+}
+
+.at-root .at-pointer {
+	position: absolute;
+	left: 50%;
+	bottom: -5px;
+	width: 9px;
+	height: 9px;
+	margin-left: -4.5px;
+	background: var(--_at-card-bg);
+	border-right: 1px solid var(--_at-card-line);
+	border-bottom: 1px solid var(--_at-card-line);
+	border-bottom-right-radius: 2px;
+	transform: rotate(45deg);
+	clip-path: polygon(100% 0, 100% 100%, 0 100%);
+	-webkit-backdrop-filter: blur(12px);
+	backdrop-filter: blur(12px);
+}
+
+.at-root .at-name {
+	font-size: 0.8125rem;
+	line-height: 1.1rem;
+	font-weight: 600;
+	letter-spacing: -0.005em;
+	color: var(--_at-name);
+}
+
+.at-root .at-role {
+	font-size: 0.6875rem;
+	line-height: 0.9rem;
+	color: var(--_at-role);
+}
+
+/* One thin line of light under the name: a faint resting hairline plus a
+   glint that sweeps across it once when the card opens. */
+.at-root .at-rule {
+	position: relative;
+	display: block;
+	width: 100%;
+	min-width: 64px;
+	height: 7px;
+	margin: -3px 0;
+	overflow: clip;
+	background: linear-gradient(
+			90deg,
+			transparent,
+			color-mix(in oklab, var(--_at-a) 50%, transparent) 30%,
+			color-mix(in oklab, var(--_at-b) 50%, transparent) 70%,
+			transparent
+		)
+		center / 100% 1px no-repeat;
+}
+
+.at-root .at-glint {
+	display: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.at-root .at-item {
+		transition: transform 380ms var(--_at-ease-out);
+	}
+
+	.at-root .at-avatar {
+		transition: transform 420ms var(--_at-ease-out);
+	}
+
+	.at-root .at-ring,
+	.at-root .at-glow {
+		transition:
+			opacity 300ms var(--_at-ease-inout),
+			--at-angle 900ms var(--_at-ease-out);
+	}
+
+	.at-root .at-active .at-ring,
+	.at-root .at-active .at-glow {
+		--at-angle: 140deg;
+	}
+
+	.at-root .at-tip {
+		transition: transform 240ms var(--_at-ease-out);
+	}
+
+	.at-root .at-card {
+		animation: at-rise 260ms var(--_at-ease-rise) both;
+	}
+
+	.at-root .at-glint {
+		display: block;
+		position: absolute;
+		top: 3px;
+		left: 0;
+		width: 60%;
+		height: 1px;
+		border-radius: 1px;
+		background: linear-gradient(
+			90deg,
+			transparent,
+			var(--_at-a) 25%,
+			var(--_at-core) 50%,
+			var(--_at-b) 75%,
+			transparent
+		);
+		/* Soft halo so a 1px line still reads as light. */
+		filter: drop-shadow(0 0 2px var(--_at-a)) drop-shadow(0 0 4px var(--_at-b));
+		transform: translateX(-110%);
+		animation: at-sweep 760ms var(--_at-ease-inout) 90ms both;
+	}
+}
+
+@keyframes at-rise {
+	from {
+		opacity: 0;
+		transform: translateY(6px) scale(0.94);
+	}
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+@keyframes at-fade {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes at-sweep {
+	from {
+		transform: translateX(-110%);
+	}
+	to {
+		transform: translateX(180%);
+	}
+}
 /*
  * Every colour is read at the point of use through two hooks: this card's own
  * `--ft-approval-*`, then the `--ft-status-*` vocabulary the whole AI family
@@ -778,6 +1268,240 @@
 	border-color: var(--ft-field-accent);
 	box-shadow: 0 0 0 3px color-mix(in oklab, var(--ft-field-accent) 25%, transparent);
 }
+/*
+ * Ported from BentoGrid.svelte's <style> block. The rules were already
+ * anchored on the grid's own root class (.fancy-bento) there; Svelte's
+ * `:global(*)` child selector becomes a plain `*`.
+ *
+ * The hidden state exists only for viewers who allow motion and whose
+ * browser runs scripts — everyone else gets the resting, visible grid
+ * without waiting on JS. Transforms and opacity only.
+ */
+@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
+	.fancy-bento.bento-reveal[data-state="armed"] > * {
+		opacity: 0;
+		transform: translate3d(0, 18px, 0) scale(0.985);
+	}
+	.fancy-bento.bento-reveal[data-state="shown"] > * {
+		transition:
+			opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
+			transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
+			border-color 300ms cubic-bezier(0.4, 0, 0.2, 1); /* DURATIONS.entrance, EASINGS.out */
+		transition-delay: var(--bento-delay, 0ms), var(--bento-delay, 0ms), 0ms;
+	}
+}
+/*
+ * Ported from BentoFrame.svelte's <style> block. Every rule is anchored on
+ * the tile's own root class (.bento-tile). The source's compiler-scoped
+ * `.bento-panel`, `.bento-glow` and `.bento-edge` selectors are written here
+ * as descendants of `.bento-tile` (port-added anchor); `:global(...)` parts
+ * become plain selectors, since this file is global CSS to begin with.
+ */
+
+/*
+ * Colour plumbing. `--_accent` reads the public `--bento-accent` (written by
+ * BentoGrid's `accent` prop, or set by a consumer on any ancestor via class)
+ * with a soft periwinkle fallback. `--_core` is the white-hot centre of the
+ * glow, mixed from the accent.
+ */
+.bento-tile {
+	--_accent: var(--bento-accent, #8e9cff);
+	--_core: color-mix(in oklab, var(--_accent) 45%, white);
+	--_frame-bg: var(--bento-frame-bg, #f6f6f7);
+	--_frame-line: var(--bento-frame-line, rgba(0, 0, 0, 0.08));
+	--_panel-bg: var(--bento-panel-bg, #fdfdfd);
+	--_panel-line: var(--bento-panel-line, rgba(0, 0, 0, 0.07));
+	--_panel-top: rgba(255, 255, 255, 0.95);
+	--_panel-top-edge: rgba(255, 255, 255, 1);
+	--_glow-peak: 0.3;
+
+	background: var(--_frame-bg);
+	border: 1px solid var(--_frame-line);
+	box-shadow:
+		0 1px 2px rgba(15, 15, 20, 0.04),
+		0 12px 32px -18px rgba(15, 15, 20, 0.14);
+	transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1); /* EASINGS.inout */
+}
+
+.dark .bento-tile {
+	--_frame-bg: var(--bento-frame-bg, #0f0f10);
+	--_frame-line: var(--bento-frame-line, rgba(255, 255, 255, 0.08));
+	--_panel-bg: var(--bento-panel-bg, #141416);
+	--_panel-line: var(--bento-panel-line, rgba(255, 255, 255, 0.06));
+	--_panel-top: rgba(255, 255, 255, 0.06);
+	--_panel-top-edge: rgba(255, 255, 255, 0.08);
+	--_glow-peak: 0.35;
+	box-shadow:
+		0 1px 2px rgba(0, 0, 0, 0.4),
+		0 18px 40px -22px rgba(0, 0, 0, 0.7);
+}
+
+/* Inner panel: its own hairline plus a soft top light. */
+.bento-tile .bento-panel {
+	background: linear-gradient(180deg, var(--_panel-top), transparent 40%), var(--_panel-bg);
+	border: 1px solid var(--_panel-line);
+	box-shadow: inset 0 1px 0 var(--_panel-top-edge);
+}
+
+/* The glow: a blurred accent radial parked below the panel's bottom edge,
+   white-hot at its centre. Hover raises it 40% → 0 and fades it in. */
+.bento-tile .bento-glow {
+	position: absolute;
+	z-index: -1;
+	left: -10%;
+	right: -10%;
+	bottom: -22%;
+	height: 78%;
+	pointer-events: none;
+	background: radial-gradient(
+		65% 85% at 50% 100%,
+		var(--_core) 0%,
+		var(--_accent) 30%,
+		color-mix(in oklab, var(--_accent) 40%, transparent) 55%,
+		transparent 80%
+	);
+	filter: blur(24px);
+	opacity: 0;
+	transform: translate3d(0, 40%, 0);
+	transition:
+		opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
+		transform 700ms cubic-bezier(0.16, 1, 0.3, 1); /* EASINGS.out */
+}
+
+/* The bottom edge catches the light as the glow arrives. */
+.bento-tile .bento-edge {
+	position: absolute;
+	left: 14%;
+	right: 14%;
+	bottom: 0;
+	height: 1px;
+	pointer-events: none;
+	background: linear-gradient(
+		90deg,
+		transparent,
+		var(--_accent) 25%,
+		var(--_core) 50%,
+		var(--_accent) 75%,
+		transparent
+	);
+	opacity: 0;
+	transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.bento-tile:hover,
+.bento-tile:focus-within {
+	--_frame-line: var(--bento-frame-line-hover, rgba(0, 0, 0, 0.12));
+}
+.dark .bento-tile:hover,
+.dark .bento-tile:focus-within {
+	--_frame-line: var(--bento-frame-line-hover, rgba(255, 255, 255, 0.13));
+}
+
+.bento-tile:hover .bento-glow,
+.bento-tile:focus-within .bento-glow {
+	opacity: var(--_glow-peak);
+	transform: translate3d(0, 0, 0);
+}
+.bento-tile:hover .bento-edge,
+.bento-tile:focus-within .bento-edge {
+	opacity: 0.85;
+}
+
+/*
+ * Shared content parts, styled here so Item and Card stay identical.
+ * They live in the tiles' own markup.
+ */
+
+/* Content lift. */
+.bento-tile .bento-lift {
+	transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* The icon sits in a small inset tile: darker well, inset hairline. */
+.bento-tile .bento-icon {
+	display: grid;
+	place-items: center;
+	flex: none;
+	border-radius: 10px;
+	color: #71717a;
+	background: #f0f0f2;
+	border: 1px solid rgba(0, 0, 0, 0.07);
+	box-shadow:
+		inset 0 1px 2px rgba(0, 0, 0, 0.06),
+		0 1px 0 rgba(255, 255, 255, 0.9);
+	transition:
+		color 300ms cubic-bezier(0.4, 0, 0.2, 1),
+		border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
+		background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
+		box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dark .bento-tile .bento-icon {
+	color: #8a8a93;
+	background: #0b0b0c;
+	border-color: rgba(255, 255, 255, 0.07);
+	box-shadow:
+		inset 0 1px 3px rgba(0, 0, 0, 0.6),
+		0 1px 0 rgba(255, 255, 255, 0.04);
+}
+.bento-tile:is(:hover, :focus-within) .bento-icon {
+	color: #18181b;
+	background: #fff;
+	border-color: color-mix(in oklab, var(--_accent) 45%, rgba(0, 0, 0, 0.08));
+	box-shadow:
+		inset 0 1px 2px rgba(0, 0, 0, 0.04),
+		0 0 0 3px color-mix(in oklab, var(--_accent) 14%, transparent);
+}
+.dark .bento-tile:is(:hover, :focus-within) .bento-icon {
+	color: #fafafa;
+	background: #19191c;
+	border-color: color-mix(in oklab, var(--_accent) 40%, rgba(255, 255, 255, 0.1));
+	box-shadow:
+		inset 0 1px 0 rgba(255, 255, 255, 0.06),
+		0 0 14px -4px color-mix(in oklab, var(--_accent) 55%, transparent);
+}
+
+/* The CTA slides in from the left and fades up. */
+.bento-tile .bento-cta {
+	opacity: 0;
+	transform: translate3d(-8px, 0, 0);
+	transition:
+		opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
+		transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
+		color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.bento-tile:is(:hover, :focus-within) .bento-cta {
+	opacity: 1;
+	transform: translate3d(0, 0, 0);
+}
+/* No hover on touch screens: keep the CTA visible. */
+@media (hover: none) {
+	.bento-tile .bento-cta {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.bento-tile:is(:hover, :focus-within) .bento-lift {
+		transform: translate3d(0, -6px, 0);
+	}
+}
+
+/* Reduced motion: the glow still arrives, but only as a fade — it sits in
+   its final place from the start. */
+@media (prefers-reduced-motion: reduce) {
+	.bento-tile .bento-glow {
+		transform: none;
+		transition: opacity 300ms linear;
+	}
+	.bento-tile .bento-cta {
+		transform: none;
+		transition: opacity 300ms linear;
+	}
+	.bento-tile .bento-lift {
+		transition: none;
+	}
+}
 /*
  * `.fancy-bg-stars` is a PORT-ADDED anchor (PORTING.md, styling rule 2). The
  * Svelte source has no root class: its compiler scoped `.stars-parallax` /
@@ -840,58 +1564,300 @@
 .blur-reveal-wrapper.is-visible > :nth-child(3) {
 	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 2);
 }
-.blur-reveal-wrapper.is-visible > :nth-child(4) {
-	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 3);
+.blur-reveal-wrapper.is-visible > :nth-child(4) {
+	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 3);
+}
+.blur-reveal-wrapper.is-visible > :nth-child(5) {
+	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 4);
+}
+.blur-reveal-wrapper.is-visible > :nth-child(6) {
+	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 5);
+}
+.blur-reveal-wrapper.is-visible > :nth-child(7) {
+	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 6);
+}
+.blur-reveal-wrapper.is-visible > :nth-child(8) {
+	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 7);
+}
+.blur-reveal-wrapper.is-visible > :nth-child(9) {
+	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 8);
+}
+.blur-reveal-wrapper.is-visible > :nth-child(10) {
+	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 9);
+}
+
+/* Hard mode: no blur/translate softening, opacity snaps in via a stepped timing function */
+.blur-reveal-wrapper.mode-hard > * {
+	opacity: 0;
+	filter: none;
+	transform: none;
+	transition: opacity var(--blur-reveal-duration, 1s) steps(2, jump-none);
+}
+
+.blur-reveal-wrapper.mode-hard.is-visible > * {
+	opacity: 1;
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+	.blur-reveal-wrapper > * {
+		transition-duration: 0.1s !important;
+		transition-delay: 0s !important;
+	}
+}
+/*
+ * Port note: the Svelte source's rules are compiler-scoped. Here every rule is
+ * anchored on the component's own root class `.border-beam` so the `bb-*`
+ * hooks never match outside the component; the dark-theme block reads
+ * `.dark .border-beam` (the Svelte `:global(.dark)` selector).
+ */
+
+.border-beam {
+	/* private plumbing: every value reads a public var with a fallback */
+	--_from: var(--border-beam-color-from, #8ec5ff);
+	--_to: var(--border-beam-color-to, #c084fc);
+	--_bw: calc(var(--border-beam-border-width, 1.5) * 1px);
+	--_size: calc(var(--border-beam-size, 200) * 1px);
+	--_dur: var(--border-beam-duration, 9s);
+	--_tail: var(--border-beam-tail, 0.25);
+	--_glow: var(--border-beam-glow, 0.6);
+	--_offset: var(--border-beam-offset, 0s);
+	--_start: calc(var(--border-beam-anchor, 90) * 1%);
+	--_park: var(--border-beam-park, 90%);
+	--_dir: var(--border-beam-dir, 1);
+	--_radius: var(--border-beam-radius, 12px);
+	/* perimeter of the box, read through container units */
+	--_perimeter: calc(2 * (100cqw + 100cqh));
+
+	/* light theme: inks a touch deeper, head warm rather than white, quieter bloom */
+	--_ink-from: color-mix(in oklab, var(--_from) 76%, #0b0b0c);
+	--_ink-to: color-mix(in oklab, var(--_to) 76%, #0b0b0c);
+	--_hot: color-mix(in oklab, var(--_from) 80%, white);
+	--_core: color-mix(in oklab, var(--_ink-from) 70%, white);
+	--_rail: color-mix(in oklab, var(--_ink-from) 6%, transparent);
+	--_bloom-max: 0.7;
+	--_halo-max: 0.7;
+	--_spill-max: 0.16;
+
+	container-type: size;
+	isolation: isolate;
+}
+
+.dark .border-beam {
+	--_ink-from: var(--_from);
+	--_ink-to: var(--_to);
+	--_hot: color-mix(in oklab, var(--_from) 40%, white);
+	--_core: white;
+	--_rail: color-mix(in oklab, var(--_from) 7%, transparent);
+	--_bloom-max: 1;
+	--_halo-max: 0.85;
+	--_spill-max: 0.24;
+}
+
+.border-beam > *,
+.border-beam .bb-ring > *,
+.border-beam .bb-bloom > *,
+.border-beam .bb-halo > *,
+.border-beam .bb-spill-clip > * {
+	position: absolute;
+	pointer-events: none;
+}
+
+.border-beam .bb-spill-clip,
+.border-beam .bb-bloom,
+.border-beam .bb-halo,
+.border-beam .bb-ring,
+.border-beam .bb-rail {
+	inset: 0;
+	border-radius: inherit;
+}
+
+/* ---------- riders: everything that travels the border ---------- */
+
+.border-beam .bb-ride {
+	top: 0;
+	left: 0;
+	/* fallback path first, then the box itself with its real radius */
+	offset-path: rect(0 auto auto 0 round var(--_radius));
+	offset-path: border-box;
+	offset-rotate: auto;
+	offset-anchor: 50% 50%;
+	/* rest pose (reduced motion): parked at the anchor, tail laid out behind */
+	offset-distance: calc(var(--_park) - var(--_dir) * var(--_lag, 0) * 100%);
+	--_lag: 0;
+}
+
+.border-beam[data-direction="reverse"] .bb-ride {
+	offset-rotate: reverse;
+}
+
+.border-beam .bb-piece {
+	--_lag: calc(var(--_tail) * var(--bb-t));
+	/* pieces overlap twice over so the tail reads as one stroke */
+	width: calc(var(--_perimeter) * var(--_tail) / var(--bb-count) * 2.2);
+}
+
+/* ---------- the sharp comet on the hairline ---------- */
+
+.border-beam .bb-ring {
+	padding: var(--_bw);
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	mask-composite: exclude;
+}
+
+.border-beam .bb-rail {
+	position: absolute;
+	background: var(--_rail);
+}
+
+.border-beam .bb-reach {
+	width: var(--_size);
+	height: var(--_size);
+	border-radius: 50%;
+	background: radial-gradient(
+		closest-side,
+		color-mix(in oklab, var(--_hot) 70%, transparent),
+		color-mix(in oklab, var(--_ink-from) 40%, transparent) 45%,
+		transparent
+	);
+	opacity: 0.7;
+}
+
+.border-beam .bb-tail-piece {
+	height: calc(var(--_bw) * 2 + 4px);
+	opacity: var(--bb-alpha);
+	background: linear-gradient(
+		90deg,
+		transparent,
+		color-mix(in oklab, var(--_ink-from) calc((1 - var(--bb-t)) * 100%), var(--_ink-to)) 30%,
+		color-mix(in oklab, var(--_ink-from) calc((1 - var(--bb-t)) * 100%), var(--_ink-to)) 70%,
+		transparent
+	);
+}
+
+.border-beam .bb-head {
+	width: 44px;
+	height: calc(var(--_bw) * 2 + 4px);
+	offset-anchor: 100% 50%;
+	background: linear-gradient(
+		90deg,
+		transparent,
+		var(--_ink-from) 45%,
+		var(--_hot) 85%,
+		var(--_core)
+	);
 }
-.blur-reveal-wrapper.is-visible > :nth-child(5) {
-	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 4);
+
+/* ---------- bloom: the comet again, thicker and blurred ---------- */
+
+.border-beam .bb-bloom {
+	filter: blur(11px);
+	opacity: calc(var(--_glow) * var(--_bloom-max));
 }
-.blur-reveal-wrapper.is-visible > :nth-child(6) {
-	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 5);
+
+.border-beam .bb-bloom-piece {
+	height: calc(var(--_bw) + 16px * var(--bb-thick));
+	opacity: var(--bb-alpha);
+	border-radius: 999px;
+	background: color-mix(in oklab, var(--_ink-from) calc((1 - var(--bb-t)) * 100%), var(--_ink-to));
 }
-.blur-reveal-wrapper.is-visible > :nth-child(7) {
-	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 6);
+
+.border-beam .bb-bloom-head {
+	width: 56px;
+	height: 22px;
+	offset-anchor: 85% 50%;
+	border-radius: 50%;
+	background: radial-gradient(closest-side, var(--_hot), var(--_ink-from) 60%, transparent);
 }
-.blur-reveal-wrapper.is-visible > :nth-child(8) {
-	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 7);
+
+/* ---------- halo: a thin, lightly blurred glow right on the line ---------- */
+
+.border-beam .bb-halo {
+	filter: blur(2.5px);
+	opacity: calc(var(--_glow) * var(--_halo-max));
 }
-.blur-reveal-wrapper.is-visible > :nth-child(9) {
-	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 8);
+
+.border-beam .bb-halo-piece {
+	height: calc(var(--_bw) + 5px * var(--bb-thick));
+	opacity: var(--bb-alpha);
+	border-radius: 999px;
+	background: color-mix(in oklab, var(--_ink-from) calc((1 - var(--bb-t)) * 100%), var(--_ink-to));
 }
-.blur-reveal-wrapper.is-visible > :nth-child(10) {
-	transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 9);
+
+/* ---------- inner spill: a wide, faint pool clipped to the inside ---------- */
+
+.border-beam .bb-spill-clip {
+	overflow: hidden;
 }
 
-/* Hard mode: no blur/translate softening, opacity snaps in via a stepped timing function */
-.blur-reveal-wrapper.mode-hard > * {
-	opacity: 0;
-	filter: none;
-	transform: none;
-	transition: opacity var(--blur-reveal-duration, 1s) steps(2, jump-none);
+.border-beam .bb-spill {
+	width: calc(var(--_size) * 1.3);
+	height: calc(var(--_size) * 1.3);
+	border-radius: 50%;
+	background: radial-gradient(
+		closest-side,
+		color-mix(in oklab, var(--_ink-from) 70%, transparent),
+		color-mix(in oklab, var(--_ink-to) 25%, transparent) 50%,
+		transparent
+	);
+	opacity: calc(var(--_glow) * var(--_spill-max));
 }
 
-.blur-reveal-wrapper.mode-hard.is-visible > * {
-	opacity: 1;
+/* ---------- the spark: a tiny white-hot point on the edge ---------- */
+
+.border-beam .bb-spark {
+	width: calc(var(--_bw) * 2 + 8px);
+	height: calc(var(--_bw) * 2 + 8px);
+	border-radius: 50%;
+	background: radial-gradient(
+		closest-side,
+		var(--_core),
+		var(--_hot) 30%,
+		color-mix(in oklab, var(--_hot) 35%, transparent) 62%,
+		transparent
+	);
 }
 
-/* Respect reduced motion */
-@media (prefers-reduced-motion: reduce) {
-	.blur-reveal-wrapper > * {
-		transition-duration: 0.1s !important;
-		transition-delay: 0s !important;
+/* ---------- motion ---------- */
+
+@media (prefers-reduced-motion: no-preference) {
+	.border-beam {
+		/* arrival: the comet fades in over the entrance duration, up to the root's own
+		   opacity (no `to` keyframe, no forwards fill), so an opacity class still applies */
+		animation: bb-ignite var(--ft-duration-entrance, 600ms)
+			var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
+	}
+
+	.border-beam .bb-ride {
+		animation: bb-travel var(--_dur) linear infinite;
+		/* a piece `lag` turns behind the head is started one lap early, minus its lag,
+		   so it is already running on the first frame */
+		animation-delay: calc(var(--_offset) - (1 - var(--_lag)) * var(--_dur));
+	}
+
+	.border-beam[data-direction="reverse"] .bb-ride {
+		animation-direction: reverse;
 	}
-}
-.border-beam::after {
-	content: "";
-	animation: border-beam-animation var(--border-beam-duration) infinite linear;
 }
 
-@keyframes border-beam-animation {
-	0% {
-		offset-distance: 0%;
+@keyframes bb-travel {
+	from {
+		offset-distance: var(--_start);
 	}
-	100% {
-		offset-distance: 100%;
+	to {
+		offset-distance: calc(var(--_start) + 100%);
+	}
+}
+
+@keyframes bb-ignite {
+	from {
+		opacity: 0;
 	}
 }
 /*
@@ -1512,6 +2478,224 @@
  * the left. `transform: scale(…)` alone composes after `translate` and
  * scales the panel about its own centre without touching the centring.
  */
+/*
+ * Compare: the seam as a blade of light.
+ *
+ * Mirrors the <style> block of the reference component. Every rule is
+ * anchored on the root `.compare` class (the reference's own root class),
+ * because plain CSS is global where the reference's rules were compiler-scoped.
+ * Keyframe names, class names and custom properties are kept identical.
+ */
+
+@property --cmp-angle {
+	syntax: "<angle>";
+	inherits: false;
+	initial-value: 0deg;
+}
+
+.compare:focus-visible {
+	outline: 2px solid var(--cmp-c2);
+	outline-offset: 3px;
+}
+
+/* the whole beam screens onto the pictures: light adds, never darkens */
+.compare .compare-beam {
+	mix-blend-mode: screen;
+}
+
+.compare .compare-beam > span {
+	position: absolute;
+	pointer-events: none;
+}
+
+/* The light the beam spills on both sides: chromatic, brighter when active. */
+.compare .compare-beam__glow {
+	top: 0;
+	bottom: 0;
+	left: -70px;
+	width: 140px;
+	background: linear-gradient(
+		to right,
+		transparent,
+		color-mix(in srgb, var(--cmp-c1) 55%, transparent) 38%,
+		var(--cmp-c2) 50%,
+		color-mix(in srgb, var(--cmp-c3) 55%, transparent) 62%,
+		transparent
+	);
+	-webkit-mask: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
+	mask: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
+	filter: blur(18px);
+	opacity: calc(0.35 + var(--cmp-energy) * 0.55);
+}
+
+/* The trail: stretched out behind the seam by its speed (the sign picks the side). */
+.compare .compare-beam__trail {
+	top: 12%;
+	bottom: 12%;
+	left: 0;
+	width: 100px;
+	transform-origin: left center;
+	transform: scaleX(calc(var(--cmp-trail) / -100));
+	background: linear-gradient(
+		to right,
+		#fff,
+		var(--cmp-c2) 18%,
+		color-mix(in srgb, var(--cmp-c3) 50%, transparent) 55%,
+		transparent
+	);
+	-webkit-mask: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
+	mask: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
+	filter: blur(6px);
+	opacity: 0.75;
+}
+
+/* A chromatic fringe either side of the core. */
+.compare .compare-beam__fringe {
+	top: 0;
+	bottom: 0;
+	left: -4px;
+	width: 9px;
+	background: linear-gradient(
+		to right,
+		var(--cmp-c1),
+		transparent 45%,
+		transparent 55%,
+		var(--cmp-c3)
+	);
+	-webkit-mask: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
+	mask: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
+	filter: blur(1.5px);
+	opacity: calc(0.55 + var(--cmp-energy) * 0.45);
+}
+
+/* The white-hot core. */
+.compare .compare-beam__core {
+	top: 0;
+	bottom: 0;
+	left: -0.75px;
+	width: 1.5px;
+	background: linear-gradient(
+		to bottom,
+		transparent,
+		color-mix(in srgb, var(--cmp-c2) 40%, #fff) 6%,
+		#fff 30%,
+		#fff 70%,
+		color-mix(in srgb, var(--cmp-c2) 40%, #fff) 94%,
+		transparent
+	);
+	box-shadow: 0 0 6px 0.5px color-mix(in srgb, var(--cmp-c2) 80%, transparent);
+}
+
+/* Pulses of light running down the seam. */
+.compare .compare-beam__pulse {
+	top: 0;
+	left: -1.5px;
+	width: 3px;
+	height: 26%;
+	border-radius: 999px;
+	background: linear-gradient(to bottom, transparent, #fff 50%, transparent);
+	filter: drop-shadow(0 0 4px var(--cmp-c2)) drop-shadow(0 0 10px var(--cmp-c1));
+	opacity: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.compare .compare-beam__pulse {
+		animation: cmp-pulse 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+	}
+	.compare .compare-beam__pulse--late {
+		animation-delay: -1.6s;
+		animation-duration: 3.2s;
+	}
+	.compare[data-active] .compare-beam__pulse {
+		animation-duration: 1.6s;
+	}
+	.compare[data-active] .compare-beam__pulse--late {
+		animation-delay: -0.8s;
+	}
+	.compare .compare-handle__ring {
+		animation: cmp-spin 4s linear infinite;
+	}
+	.compare[data-active] .compare-handle__ring {
+		animation-duration: 1.4s;
+	}
+}
+
+@keyframes cmp-pulse {
+	0% {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+	15% {
+		opacity: 1;
+	}
+	85% {
+		opacity: 1;
+	}
+	100% {
+		transform: translateY(385%);
+		opacity: 0;
+	}
+}
+
+/* The handle: a glass bead on the beam with a ring of light round it. */
+.compare .compare-handle {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	z-index: 30;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 34px;
+	height: 34px;
+	border-radius: 999px;
+	transform: translate(-50%, -50%) scale(calc(1 + var(--cmp-energy) * 0.08));
+	color: #fff;
+	background: rgb(255 255 255 / 0.12);
+	backdrop-filter: blur(10px) saturate(1.4);
+	-webkit-backdrop-filter: blur(10px) saturate(1.4);
+	box-shadow:
+		inset 0 1px 0 rgb(255 255 255 / 0.35),
+		inset 0 0 0 1px rgb(255 255 255 / 0.18),
+		0 4px 16px rgb(0 0 0 / 0.35),
+		0 0 calc(8px + var(--cmp-energy) * 18px) color-mix(in srgb, var(--cmp-c2) 70%, transparent);
+	cursor: inherit;
+}
+
+.compare .compare-handle svg {
+	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45));
+}
+
+.compare .compare-handle__ring {
+	position: absolute;
+	inset: -1.5px;
+	border-radius: inherit;
+	padding: 1.5px;
+	background: conic-gradient(
+		from var(--cmp-angle),
+		transparent 0%,
+		var(--cmp-c1) 18%,
+		#fff 30%,
+		var(--cmp-c3) 42%,
+		transparent 58%,
+		transparent 100%
+	);
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	mask-composite: exclude;
+	opacity: calc(0.45 + var(--cmp-energy) * 0.55);
+}
+
+@keyframes cmp-spin {
+	to {
+		--cmp-angle: 360deg;
+	}
+}
 /*
  * `.fancy-star-field` is a PORT-ADDED anchor (PORTING.md, styling rule 2).
  * The Svelte source has no root class of its own: its compiler scoped `.star`,
@@ -1815,6 +2999,207 @@
 		transition: background-color 120ms ease;
 	}
 }
+/*
+ * ContainerScroll — a scroll-driven aperture.
+ * Every rule is anchored on `.cs-root` (the Svelte source's own root class):
+ * the Svelte compiler scoped these selectors, plain CSS is global.
+ */
+
+.cs-root {
+	--_accent: var(--cs-accent, #8fb2ff);
+	--_accent-2: var(--cs-accent-2, #c3b1ff);
+	--_core: color-mix(in oklab, var(--_accent) 45%, white);
+	--_radius: 22px;
+	--_glow: 75%;
+	--_frame: #f4f4f5;
+	--_frame-line: rgba(0, 0, 0, 0.08);
+	--_surface: #fafafa;
+	--_surface-line: rgba(0, 0, 0, 0.07);
+	--_shadow:
+		0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px -12px rgba(0, 0, 0, 0.12),
+		0 40px 80px -40px rgba(0, 0, 0, 0.22);
+	/* 1 → closed slit (48% top + 48% bottom), 0 → fully open */
+	--_shut: calc(1 - var(--cs-open, 0));
+}
+
+.dark .cs-root {
+	--_glow: 60%;
+	--_frame: #0f0f10;
+	--_frame-line: rgba(255, 255, 255, 0.08);
+	--_surface: #0b0b0c;
+	--_surface-line: rgba(255, 255, 255, 0.07);
+	--_shadow:
+		0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 50px -24px rgba(0, 0, 0, 0.9),
+		0 60px 120px -60px rgba(0, 0, 0, 0.8);
+}
+
+/* Title: hands the stage over by going out of focus */
+.cs-root .cs-title {
+	/* starts only once the aperture is a quarter open */
+	--_fade: clamp(0, (var(--cs-progress, 0) - 0.25) / 0.75, 1);
+	opacity: calc(1 - var(--_fade) * 0.85);
+	filter: blur(calc(var(--_fade) * 6px));
+	transform: scale(calc(1 - var(--_fade) * 0.02));
+	transform-origin: 50% 100%;
+}
+
+.cs-root .cs-stage {
+	transform: translateY(calc(var(--_shut) * 24px));
+}
+
+.cs-root .cs-shadow {
+	border-radius: var(--_radius);
+	box-shadow: var(--_shadow);
+	/* follows the opening so it never outlines the still-hidden card */
+	transform: scaleY(calc(1 - var(--_shut) * 0.96));
+	opacity: calc(var(--cs-open, 0) * var(--cs-open, 0));
+}
+
+.cs-root .cs-card {
+	border-radius: var(--_radius);
+	background: var(--_frame);
+	border: 1px solid var(--_frame-line);
+	clip-path: inset(calc(var(--_shut) * 48%) 0 calc(var(--_shut) * 48%) 0 round var(--_radius));
+}
+
+.cs-root .cs-surface {
+	border-radius: calc(var(--_radius) - 7px);
+	background: var(--_surface);
+	box-shadow: 0 0 0 1px var(--_surface-line);
+}
+
+.cs-root .cs-content {
+	transform: scale(calc(1 + var(--_shut) * 0.08));
+	transform-origin: 50% 50%;
+}
+
+/* ---- Light ---------------------------------------------------------- */
+
+.cs-root .cs-seam {
+	left: 4%;
+	right: 4%;
+	top: 50%;
+	height: 0;
+	opacity: calc(1 - var(--cs-progress, 0) * 3);
+}
+
+.cs-root .cs-seam-line,
+.cs-root .cs-seam-glow,
+.cs-root .cs-seam-haze {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	border-radius: 999px;
+}
+
+.cs-root .cs-seam-line {
+	height: 1px;
+	transform: translateY(-50%);
+	background: linear-gradient(
+		90deg,
+		transparent,
+		color-mix(in oklab, var(--_accent-2) 70%, transparent) 14%,
+		var(--_accent) 34%,
+		var(--_core) 50%,
+		var(--_accent) 66%,
+		color-mix(in oklab, var(--_accent-2) 70%, transparent) 86%,
+		transparent
+	);
+	box-shadow: 0 0 6px 0 color-mix(in oklab, var(--_accent) 60%, transparent);
+}
+
+.cs-root .cs-seam-glow {
+	height: 28px;
+	transform: translateY(-50%);
+	background: radial-gradient(
+		50% 50% at 50% 50%,
+		color-mix(in oklab, var(--_accent) var(--_glow), transparent),
+		color-mix(in oklab, var(--_accent-2) 25%, transparent) 60%,
+		transparent 100%
+	);
+	filter: blur(10px);
+}
+
+/* a wide, faint horizon of light spilling past the slit */
+.cs-root .cs-seam-haze {
+	left: -6%;
+	right: -6%;
+	height: 90px;
+	transform: translateY(-50%);
+	background: radial-gradient(
+		50% 50% at 50% 50%,
+		color-mix(in oklab, var(--_accent) calc(var(--_glow) * 0.45), transparent),
+		transparent 70%
+	);
+	filter: blur(18px);
+}
+
+.cs-root .cs-veil {
+	background: var(--_surface);
+	opacity: calc(var(--_shut) * var(--_shut) * 0.75);
+}
+
+.cs-root .cs-lip {
+	left: 3%;
+	right: 3%;
+	height: 1px;
+	background: linear-gradient(
+		90deg,
+		transparent,
+		color-mix(in oklab, var(--_accent-2) 55%, transparent) 20%,
+		color-mix(in oklab, var(--_accent) 80%, white) 50%,
+		color-mix(in oklab, var(--_accent-2) 55%, transparent) 80%,
+		transparent
+	);
+	box-shadow: 0 0 10px 0 color-mix(in oklab, var(--_accent) 45%, transparent);
+	opacity: var(--_shut);
+}
+
+.cs-root .cs-lip-top {
+	top: calc(var(--_shut) * 48%);
+}
+
+.cs-root .cs-lip-bottom {
+	bottom: calc(var(--_shut) * 48%);
+}
+
+/* Light theme: a white core vanishes on a pale page, so deepen the seam */
+html:not(.dark) .cs-root {
+	--_core: color-mix(in oklab, var(--_accent) 75%, white);
+}
+
+/* Reduced motion: a still frame — card open, title sharp, no light */
+.cs-root[data-reduced-motion] {
+	--_shut: 0;
+}
+.cs-root[data-reduced-motion] .cs-title {
+	opacity: 1;
+	filter: none;
+	transform: none;
+}
+.cs-root[data-reduced-motion] .cs-seam,
+.cs-root[data-reduced-motion] .cs-lip {
+	display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.cs-root {
+		--_shut: 0;
+	}
+	.cs-root .cs-title {
+		opacity: 1;
+		filter: none;
+		transform: none;
+	}
+	.cs-root .cs-seam,
+	.cs-root .cs-lip {
+		display: none;
+	}
+	.cs-root .cs-shadow {
+		opacity: 1;
+	}
+}
 /* Keyframe names are part of the visual contract — keep them identical to
    the source. */
 @keyframes text-flip-in {
@@ -2394,6 +3779,243 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 		transition-duration: 0.1s !important;
 	}
 }
+/*
+ * Dock shelf. Mirrors the Svelte <style> block of Dock.svelte rule for rule.
+ * The Svelte compiler scoped every selector; here each one is anchored on the
+ * source's own root class `.dock-shelf`, so no generic name leaks into the page.
+ */
+
+/* Theme hooks. Every private var reads a public one first, so a consumer
+   can recolour the light from a class without touching this file. */
+.dock-shelf {
+	--_dock-accent: var(--dock-accent, var(--primary, #71717a));
+	--_dock-spot-size: var(--dock-spotlight-size, 140px);
+	--_dock-frame: var(--dock-frame-color, rgba(0, 0, 0, 0.05));
+	--_dock-core: color-mix(in oklab, var(--_dock-accent) 45%, white);
+	--_dock-ease: var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+	outline: none;
+}
+.dark .dock-shelf {
+	--_dock-frame: var(--dock-frame-color, rgba(255, 255, 255, 0.045));
+}
+
+.dock-shelf:focus-visible {
+	outline: 2px solid color-mix(in oklab, var(--_dock-accent) 55%, transparent);
+	outline-offset: 3px;
+}
+
+/* Decorative stack: clipped to the shelf, painted under the icons. The
+   icons are not clipped — they are siblings, above this layer. */
+.dock-shelf .dock-deco {
+	position: absolute;
+	inset: -1px;
+	z-index: 0;
+	overflow: hidden;
+	border-radius: inherit;
+	pointer-events: none;
+}
+
+/* The nested inner frame: a second hairline just inside the shelf edge,
+   with a faint top-lit fill. */
+.dock-shelf .dock-frame {
+	position: absolute;
+	inset: 4px;
+	border: 1px solid var(--_dock-frame);
+	border-radius: calc(1rem - 4px);
+	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 60%);
+}
+.dark .dock-shelf .dock-frame {
+	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.025), transparent 60%);
+}
+
+/* The spotlight: a blurred pool of accent light with a white-hot core,
+   moved by transform only. Light theme lays a thin tint of the accent
+   into the glass; dark theme screens light onto it. */
+.dock-shelf .dock-spot {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: var(--_dock-spot-size);
+	height: var(--_dock-spot-size);
+	border-radius: 50%;
+	background: radial-gradient(
+		closest-side,
+		color-mix(in oklab, var(--_dock-accent) 20%, transparent) 0%,
+		color-mix(in oklab, var(--_dock-accent) 8%, transparent) 45%,
+		transparent 100%
+	);
+	filter: blur(10px);
+	opacity: 0;
+	transform: translate(calc(var(--dock-x) - 50%), calc(var(--dock-y) - 50%));
+	will-change: transform, opacity;
+}
+.dark .dock-shelf .dock-spot {
+	background: radial-gradient(
+		closest-side,
+		color-mix(in oklab, var(--_dock-core) 50%, transparent) 0%,
+		color-mix(in oklab, var(--_dock-accent) 20%, transparent) 45%,
+		transparent 100%
+	);
+	mix-blend-mode: screen;
+}
+
+/* The lit rim: a 1px ring (padding + mask) holding one blurred blob that
+   rides the same transform, so the shelf edge brightens only near the
+   pointer. */
+.dock-shelf .dock-rim {
+	position: absolute;
+	inset: 0;
+	padding: 1px;
+	border-radius: inherit;
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask:
+		linear-gradient(#000 0 0) content-box exclude,
+		linear-gradient(#000 0 0);
+	opacity: 0;
+}
+.dock-shelf .dock-rim-light {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 220px;
+	height: 96px;
+	border-radius: 50%;
+	background: radial-gradient(
+		closest-side,
+		color-mix(in oklab, var(--_dock-accent) 70%, transparent),
+		transparent
+	);
+	transform: translate(calc(var(--dock-x) - 50%), calc(var(--dock-y) - 50%));
+}
+.dark .dock-shelf .dock-rim-light {
+	background: radial-gradient(closest-side, var(--_dock-core), transparent);
+}
+
+.dock-shelf[data-hover] .dock-spot {
+	opacity: 1;
+}
+.dock-shelf[data-hover] .dock-rim {
+	opacity: 0.9;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.dock-shelf .dock-spot {
+		transition:
+			transform 140ms var(--_dock-ease),
+			opacity 300ms var(--_dock-ease);
+	}
+	.dock-shelf .dock-rim-light {
+		transition: transform 140ms var(--_dock-ease);
+	}
+	.dock-shelf .dock-rim {
+		transition: opacity 300ms var(--_dock-ease);
+	}
+}
+
+/* Reduced motion: the light holds still, dim and centred, whether or not a
+   pointer is over the dock — the same composition as a resting frame. */
+@media (prefers-reduced-motion: reduce) {
+	.dock-shelf .dock-spot,
+	.dock-shelf[data-hover] .dock-spot {
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		opacity: 0.55;
+	}
+	.dock-shelf .dock-rim,
+	.dock-shelf[data-hover] .dock-rim {
+		opacity: 0;
+	}
+}
+
+/* Nothing can hover: no light to follow. */
+@media (any-hover: none) {
+	.dock-shelf .dock-spot,
+	.dock-shelf .dock-rim {
+		display: none;
+	}
+}
+/*
+ * Dock icon. Mirrors the Svelte <style> block of DockIcon.svelte rule for
+ * rule, anchored on the source's own root class `.dock-icon`.
+ */
+.dock-icon {
+	--_dock-accent: var(--dock-accent, var(--primary, #71717a));
+	--_dock-ease: var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+}
+
+/* Indicator dot: below the icon on a horizontal dock, beside it on a
+   vertical one. Hidden until the icon is the one under the pointer. */
+.dock-icon::before {
+	content: "";
+	position: absolute;
+	left: 50%;
+	top: calc(100% + 4px);
+	width: 4px;
+	height: 4px;
+	margin-left: -2px;
+	border-radius: 9999px;
+	background: var(--_dock-accent);
+	opacity: 0;
+	pointer-events: none;
+}
+.dark .dock-icon::before {
+	background: color-mix(in oklab, var(--_dock-accent) 45%, white);
+	box-shadow: 0 0 6px 1px color-mix(in oklab, var(--_dock-accent) 55%, transparent);
+}
+.dock-icon[data-orientation="vertical"]::before {
+	left: auto;
+	right: calc(100% + 4px);
+	top: 50%;
+	margin-left: 0;
+	margin-top: -2px;
+}
+.dock-icon[data-dock-active]::before {
+	opacity: 1;
+}
+
+/* Floor reflection: a soft ellipse under the icon — a contact shadow on
+   the light shelf, a faint glow on the dark one. Sized in percent, so it
+   grows with the magnified icon for free. */
+.dock-icon[data-reflection]::after {
+	content: "";
+	position: absolute;
+	left: 14%;
+	right: 14%;
+	top: calc(100% - 4px);
+	height: 22%;
+	border-radius: 50%;
+	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.22), transparent);
+	filter: blur(3px);
+	opacity: 0.7;
+	z-index: -1;
+	pointer-events: none;
+}
+.dark .dock-icon[data-reflection]::after {
+	background: radial-gradient(
+		closest-side,
+		color-mix(in oklab, var(--_dock-accent) 26%, transparent),
+		transparent
+	);
+}
+.dock-icon[data-reflection][data-dock-active]::after {
+	opacity: 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.dock-icon {
+		transition:
+			width 180ms var(--_dock-ease),
+			height 180ms var(--_dock-ease);
+	}
+	.dock-icon::before,
+	.dock-icon[data-reflection]::after {
+		transition: opacity 180ms var(--_dock-ease);
+	}
+}
 /*
  * The `<style>` block of the source Drawer, moved to a colocated stylesheet
  * (PORTING.md §Styling rule 2). The compiler scoped that block; plain CSS is
@@ -2689,6 +4311,156 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 	opacity: 0.5;
 	cursor: not-allowed;
 }
+/*
+ * FlipCard — ported verbatim from the Svelte <style> block. Every rule is
+ * anchored on the root class `.ft-flip-card`, which the Svelte source already
+ * names, so nothing leaks once the compiler-scoped rules become global.
+ */
+
+/* The one number everything turns on: the card's rotation. Registered so
+   it can transition, and inherited so the faces can light themselves
+   from it. */
+@property --fc-angle {
+	syntax: "<angle>";
+	inherits: true;
+	initial-value: 0deg;
+}
+
+.ft-flip-card {
+	--fc-angle: var(--fc-target);
+	outline: none;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.ft-flip-card:focus-visible .ft-flip-card__inner {
+	box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring, #888) 60%, transparent);
+}
+
+.ft-flip-card[data-trigger="click"] {
+	cursor: pointer;
+}
+
+.ft-flip-card__lift,
+.ft-flip-card__inner {
+	position: relative;
+}
+
+.ft-flip-card[data-axis="y"] .ft-flip-card__inner {
+	transform: rotateY(var(--fc-angle));
+}
+
+.ft-flip-card[data-axis="x"] .ft-flip-card__inner {
+	transform: rotateX(var(--fc-angle));
+}
+
+.ft-flip-card[data-axis="y"] .ft-flip-card__back {
+	transform: rotateY(180deg);
+}
+
+.ft-flip-card[data-axis="x"] .ft-flip-card__back {
+	transform: rotateX(180deg);
+}
+
+/* The shadow on the "table" under the card. */
+.ft-flip-card__shadow {
+	position: absolute;
+	inset: 8% 6% -4%;
+	border-radius: 1.25rem;
+	background: rgb(0 0 0 / 0.9);
+	opacity: 0.35;
+	transform: translateY(10px) scale(0.92);
+	filter: blur(14px);
+	pointer-events: none;
+}
+
+/* ---- light: off unless the browser can compute it ---------------------- */
+
+.ft-flip-card__light {
+	display: none;
+}
+
+@supports (opacity: calc(sin(30deg))) {
+	.ft-flip-card__face {
+		/* the face's own turn: the back starts half a turn round */
+		--fc-face: var(--fc-angle);
+		/* |sin| — 0 facing you, 1 edge-on */
+		--fc-edge: max(sin(var(--fc-face)), -1 * sin(var(--fc-face)));
+	}
+
+	.ft-flip-card__back {
+		--fc-face: calc(var(--fc-angle) + 180deg);
+	}
+
+	.ft-flip-card__light {
+		display: block;
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		border-radius: inherit;
+		/* a sheen that sweeps across as the face turns, over a shade that
+		   deepens as the face goes edge-on */
+		background:
+			linear-gradient(
+				var(--fc-sheen-angle, 105deg),
+				transparent 38%,
+				rgb(255 255 255 / 0.55) 50%,
+				transparent 62%
+			),
+			rgb(0 0 0 / calc(var(--fc-edge) * 0.55));
+		background-size:
+			300% 300%,
+			100% 100%;
+		background-repeat: no-repeat;
+		background-position:
+			calc(50% - sin(var(--fc-face)) * 45%) calc(50% - sin(var(--fc-face)) * 45%),
+			0 0;
+	}
+
+	/* the sheen is brightest part-way round, never facing you or edge-on */
+	.ft-flip-card__light {
+		opacity: calc(min(1, var(--fc-edge) * 2.4));
+	}
+
+	.ft-flip-card[data-axis="x"] .ft-flip-card__light {
+		--fc-sheen-angle: 15deg;
+	}
+}
+
+/* ---- motion ---------------------------------------------------------------- */
+
+@media (prefers-reduced-motion: no-preference) {
+	.ft-flip-card {
+		/* a slight overshoot, so the card lands rather than stops */
+		transition: --fc-angle var(--fc-duration) cubic-bezier(0.34, 1.25, 0.64, 1);
+	}
+}
+
+/* Reduced motion: no turning at all — the faces cross-fade in place. */
+@media (prefers-reduced-motion: reduce) {
+	/* as specific as the axis rules above, and later, so it wins */
+	.ft-flip-card[data-axis] .ft-flip-card__inner,
+	.ft-flip-card[data-axis] .ft-flip-card__back {
+		transform: none;
+	}
+
+	.ft-flip-card__face {
+		transition: opacity 0.2s ease;
+	}
+
+	.ft-flip-card__front,
+	.ft-flip-card[data-flipped] .ft-flip-card__back {
+		opacity: 1;
+	}
+
+	.ft-flip-card__back,
+	.ft-flip-card[data-flipped] .ft-flip-card__front {
+		opacity: 0;
+	}
+
+	.ft-flip-card__light {
+		display: none;
+	}
+}
 /* Keyframe names are part of the visual contract (referenced by inline
    style attributes) — keep them identical to the source. */
 @keyframes flipFadeInWord {
@@ -2990,56 +4762,222 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 		var(--bg-x) var(--bg-y) / 300% no-repeat;
 	background-blend-mode: hue, hue, hue, overlay;
 }
-@keyframes glow {
-	0% {
-		background-position: 0% 0%;
+@property --gb-a1 {
+	syntax: "<angle>";
+	inherits: true;
+	initial-value: 0deg;
+}
+
+@property --gb-a2 {
+	syntax: "<angle>";
+	inherits: true;
+	initial-value: 120deg;
+}
+
+@property --gb-a3 {
+	syntax: "<angle>";
+	inherits: true;
+	initial-value: 0deg;
+}
+
+/* Light pages get the deeper palette; `.dark` switches to the bright one. */
+.glow-border {
+	--gb-metal: var(--gb-metal-light);
+	--gb-glint: var(--gb-glint-light);
+	/* on a light page a coloured halo reads as fog: keep it faint */
+	--gb-halo-opacity: 0.35;
+}
+
+.dark .glow-border {
+	--gb-metal: var(--gb-metal-dark);
+	--gb-glint: var(--gb-glint-dark);
+	--gb-halo-opacity: 0.7;
+}
+
+.glow-border > span,
+.glow-border__halo > span {
+	position: absolute;
+	border-radius: inherit;
+	pointer-events: none;
+}
+
+/* keep only the padding ring: the element minus its content box */
+.glow-border__metal,
+.glow-border__glint,
+.glow-border__halo > span {
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	mask-composite: exclude;
+}
+
+/* Liquid metal: two fields, centred apart and turning against each other. */
+.glow-border__metal {
+	inset: 0;
+	padding: var(--glow-border-width);
+	background: var(--gb-metal);
+	background-blend-mode: soft-light;
+}
+
+/* The glint riding the ring. */
+.glow-border__glint {
+	inset: 0;
+	padding: var(--glow-border-width);
+	background: var(--gb-glint);
+	mix-blend-mode: screen;
+	opacity: var(--glow-strength);
+}
+
+/* The light it spills on both sides of the edge, blurred after masking. */
+.glow-border__halo {
+	inset: 0;
+	filter: blur(6px);
+	opacity: calc(var(--glow-strength) * var(--gb-halo-opacity));
+}
+
+.glow-border__halo > span {
+	inset: -5px;
+	padding: calc(var(--glow-border-width) + 9px);
+	border-radius: calc(var(--glow-border-radius) + 5px);
+	background: var(--gb-glint);
+}
+
+.glow-border.animate-glow {
+	animation:
+		gb-flow-1 var(--glow-duration) linear infinite,
+		gb-flow-2 calc(var(--glow-duration) * 1.7) linear infinite reverse,
+		gb-glint calc(var(--glow-duration) * 0.4) linear infinite;
+}
+
+@keyframes gb-flow-1 {
+	to {
+		--gb-a1: 360deg;
 	}
-	50% {
-		background-position: 100% 100%;
+}
+
+@keyframes gb-flow-2 {
+	from {
+		--gb-a2: 120deg;
 	}
-	100% {
-		background-position: 0% 0%;
+	to {
+		--gb-a2: 480deg;
 	}
 }
 
-.animate-glow {
-	animation: glow var(--glow-duration) linear infinite;
+@keyframes gb-glint {
+	to {
+		--gb-a3: 360deg;
+	}
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.animate-glow {
+	.glow-border.animate-glow {
 		animation: none;
+		--gb-a3: 210deg;
 	}
 }
+@property --gb-angle {
+	syntax: "<angle>";
+	inherits: true;
+	initial-value: 0deg;
+}
+
 .gradient-button {
-	padding: var(--gb-border-width);
 	border-radius: var(--gb-border-radius);
 	isolation: isolate;
+	background: color-mix(in srgb, var(--gb-bg-color), #fff 8%);
+	animation: gb-spin var(--gb-duration) linear infinite;
+	transition: transform 0.2s ease;
+}
+
+.gradient-button:active {
+	transform: scale(0.98);
+}
+
+.gradient-button:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+	animation-play-state: paused;
+}
+
+/* Anchored on the root class: the Svelte compiler scoped these rules, plain CSS
+   would leak them into every consumer element sharing the class name. */
+.gradient-button .gradient-content {
+	position: relative;
+	margin: var(--gb-border-width);
+	border-radius: calc(var(--gb-border-radius) - var(--gb-border-width));
+	background:
+		linear-gradient(to bottom, rgb(255 255 255 / 0.06), transparent 45%), var(--gb-bg-color);
+}
+
+.gradient-button .gradient-border,
+.gradient-button .gradient-glow,
+.gradient-button .gradient-glow > span {
+	position: absolute;
+	pointer-events: none;
+	border-radius: inherit;
+}
+
+/* keep only the padding ring: the element minus its content box */
+.gradient-button .gradient-border,
+.gradient-button .gradient-glow > span {
+	background: var(--gb-beam);
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	mask-composite: exclude;
+}
+
+.gradient-button .gradient-border {
+	inset: 0;
+	z-index: 2;
+	padding: var(--gb-border-width);
+}
+
+/* A wider band inside the border, blurred by its parent AFTER masking so
+   it falls off softly into the face. Screen: it lights, never darkens. */
+.gradient-button .gradient-glow {
+	inset: 0;
+	z-index: 1;
+	filter: blur(calc(var(--gb-blur) * 3));
+	mix-blend-mode: screen;
+	opacity: 0.45;
+	transition: opacity 0.3s ease;
+}
+
+.gradient-button .gradient-glow > span {
+	inset: 0;
+	padding: calc(var(--gb-blur) * 1.75);
 }
 
-/* Anchored on the root class: the Svelte compiler scoped these rules, plain CSS
-   would leak them into every consumer element sharing the class name. */
-.gradient-button .gradient-border {
-	content: "";
-	position: absolute;
-	inset: -200%;
-	z-index: -1;
-	background: conic-gradient(var(--gb-colors));
-	animation: rotate-gradient var(--gb-duration) linear infinite;
-	filter: blur(var(--gb-blur));
+.gradient-button:hover .gradient-glow,
+.gradient-button:focus-visible .gradient-glow {
+	opacity: 0.8;
 }
 
-.gradient-button .gradient-content {
-	border-radius: var(--gb-border-radius);
-	background-color: var(--gb-bg-color);
+.gradient-button:focus-visible {
+	outline: 2px solid rgb(255 255 255 / 0.5);
+	outline-offset: 2px;
 }
 
-@keyframes rotate-gradient {
-	0% {
-		transform: rotate(0deg);
+@keyframes gb-spin {
+	to {
+		--gb-angle: 360deg;
 	}
-	100% {
-		transform: rotate(360deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.gradient-button {
+		animation: none;
+		--gb-angle: 135deg;
 	}
 }
 /* Keyframes referenced by the inline `animation` shorthand on each
@@ -3315,6 +5253,149 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 .interactive-grid-pattern .interactive-grid-square:not(:hover) {
 	transition-duration: 1000ms;
 }
+.ihb {
+	/* Private copies: read the public variables (set from `className`, which a
+	   rule here would otherwise outrank), else the theme. */
+	--_ihb-fill: var(--ihb-fill, var(--primary, var(--color-primary, currentColor)));
+	--_ihb-fill-foreground: var(
+		--ihb-fill-foreground,
+		var(--primary-foreground, var(--color-primary-foreground, #fff))
+	);
+	/* where the dot sits, vertically centred */
+	--ihb-dot-x: 1.75rem;
+	--ihb-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.ihb-fill {
+	position: absolute;
+	inset: 0;
+	z-index: -1;
+	background: var(--_ihb-fill);
+	clip-path: circle(4px at var(--ihb-dot-x) 50%);
+}
+
+.ihb-rest,
+.ihb-hover {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+}
+
+.ihb-dot-space {
+	width: 8px;
+	flex: none;
+}
+
+.ihb-hover {
+	position: absolute;
+	inset: 0;
+	color: var(--_ihb-fill-foreground);
+	opacity: 0;
+	transform: translateY(70%);
+}
+
+.ihb-arrow {
+	flex: none;
+	opacity: 0;
+	transform: translateX(-6px);
+}
+
+/* ---- hover / keyboard focus ---------------------------------------------- */
+
+.ihb:hover .ihb-fill,
+.ihb:focus-visible .ihb-fill {
+	clip-path: circle(150% at var(--ihb-dot-x) 50%);
+}
+
+.ihb:hover .ihb-rest,
+.ihb:focus-visible .ihb-rest {
+	opacity: 0;
+	transform: translateY(-70%);
+	filter: blur(4px);
+}
+
+.ihb:hover .ihb-hover,
+.ihb:focus-visible .ihb-hover {
+	opacity: 1;
+	transform: none;
+}
+
+.ihb:hover .ihb-arrow,
+.ihb:focus-visible .ihb-arrow {
+	opacity: 1;
+	transform: none;
+}
+
+.ihb:focus-visible {
+	outline: 2px solid var(--_ihb-fill);
+	outline-offset: 2px;
+}
+
+.ihb:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.ihb:disabled .ihb-fill {
+	clip-path: circle(4px at var(--ihb-dot-x) 50%);
+}
+
+.ihb:disabled .ihb-rest {
+	opacity: 1;
+	transform: none;
+	filter: none;
+}
+
+.ihb:disabled .ihb-hover {
+	opacity: 0;
+}
+
+/* ---- motion: only when the visitor has not asked for less ----------------- */
+
+@media (prefers-reduced-motion: no-preference) {
+	.ihb {
+		transition: transform 0.2s var(--ihb-ease);
+	}
+
+	.ihb:active {
+		transform: scale(0.97);
+	}
+
+	.ihb-fill {
+		transition: clip-path 0.6s var(--ihb-ease);
+	}
+
+	.ihb-rest {
+		transition:
+			opacity 0.3s var(--ihb-ease),
+			transform 0.5s var(--ihb-ease),
+			filter 0.5s var(--ihb-ease);
+	}
+
+	.ihb-hover {
+		transition:
+			opacity 0.3s var(--ihb-ease),
+			transform 0.5s var(--ihb-ease);
+	}
+
+	.ihb-arrow {
+		transition:
+			opacity 0.3s var(--ihb-ease),
+			transform 0.5s var(--ihb-ease);
+	}
+
+	/* On the way in, stagger: label a beat after the fill, arrow after it. */
+	.ihb:hover .ihb-hover,
+	.ihb:focus-visible .ihb-hover {
+		transition-delay: 60ms;
+	}
+
+	.ihb:hover .ihb-arrow,
+	.ihb:focus-visible .ihb-arrow {
+		transition-delay: 160ms;
+	}
+}
 @keyframes letterPullUp {
 	0% {
 		opacity: 0;
@@ -4093,15 +6174,61 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 		transform: none;
 	}
 }
-/* Anchored on the root class (added in the port — the Svelte compiler scoped
+/* Anchored on the source's root class `.marquee` (the Svelte compiler scoped
    these rules; as plain CSS they would leak into any consumer element named
    .animate-marquee). See PORTING.md, styling rule 2. */
-.fancy-marquee .animate-marquee {
-	animation: marquee var(--duration) linear infinite;
+.marquee > .animate-marquee {
+	animation: marquee calc(var(--duration) / var(--marquee-speed, 1)) linear infinite;
+	will-change: transform;
+}
+
+.marquee > .animate-marquee-vertical {
+	animation: marquee-vertical calc(var(--duration) / var(--marquee-speed, 1)) linear infinite;
+	will-change: transform;
+}
+
+/* Script-owned animations have taken over: silence the CSS keyframe so the
+   track is not moved twice. */
+.marquee.marquee-upgraded > .animate-marquee,
+.marquee.marquee-upgraded > .animate-marquee-vertical {
+	animation: none;
+}
+
+/* Edge fades: an eased (not linear) alpha ramp, so items dissolve into the
+   edge instead of hitting a visible line. Width via --marquee-fade. */
+.marquee.marquee-fade {
+	--_fade: var(--marquee-fade, 12%);
+	--_mask: linear-gradient(
+		to right,
+		transparent,
+		rgb(0 0 0 / 0.1) calc(var(--_fade) * 0.25),
+		rgb(0 0 0 / 0.4) calc(var(--_fade) * 0.5),
+		rgb(0 0 0 / 0.8) calc(var(--_fade) * 0.75),
+		#000 var(--_fade),
+		#000 calc(100% - var(--_fade)),
+		rgb(0 0 0 / 0.8) calc(100% - var(--_fade) * 0.75),
+		rgb(0 0 0 / 0.4) calc(100% - var(--_fade) * 0.5),
+		rgb(0 0 0 / 0.1) calc(100% - var(--_fade) * 0.25),
+		transparent
+	);
+	-webkit-mask-image: var(--_mask);
+	mask-image: var(--_mask);
 }
 
-.fancy-marquee .animate-marquee-vertical {
-	animation: marquee-vertical var(--duration) linear infinite;
+.marquee.marquee-fade.marquee-vertical {
+	--_mask: linear-gradient(
+		to bottom,
+		transparent,
+		rgb(0 0 0 / 0.1) calc(var(--_fade) * 0.25),
+		rgb(0 0 0 / 0.4) calc(var(--_fade) * 0.5),
+		rgb(0 0 0 / 0.8) calc(var(--_fade) * 0.75),
+		#000 var(--_fade),
+		#000 calc(100% - var(--_fade)),
+		rgb(0 0 0 / 0.8) calc(100% - var(--_fade) * 0.75),
+		rgb(0 0 0 / 0.4) calc(100% - var(--_fade) * 0.5),
+		rgb(0 0 0 / 0.1) calc(100% - var(--_fade) * 0.25),
+		transparent
+	);
 }
 
 @keyframes marquee {
@@ -4121,22 +6248,200 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 		transform: translateY(calc(-100% - var(--gap)));
 	}
 }
+
+/* Reduced motion: a still row with the same composition — edge fades stay. */
+@media (prefers-reduced-motion: reduce) {
+	.marquee > .animate-marquee,
+	.marquee > .animate-marquee-vertical {
+		animation: none;
+		will-change: auto;
+	}
+}
+/* Anchored on the source's root class `.review-card`. The Svelte compiler
+   scoped these rules; here every selector starts from that class. */
+.review-card {
+	--_shell: var(--review-card-shell, #f4f4f5);
+	--_panel: var(--review-card-panel, #fafafa);
+	--_panel-hover: var(--review-card-panel-hover, #ffffff);
+	--_line: var(--review-card-line, rgba(0, 0, 0, 0.08));
+	--_ink: var(--review-card-ink, #18181b);
+	--_muted: var(--review-card-muted, #71717a);
+	--_body: var(--review-card-body, #52525b);
+	--_lift: rgba(255, 255, 255, 1);
+	background: var(--_shell);
+	border-color: var(--_line);
+	transition:
+		border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
+		background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dark .review-card {
+	--_shell: var(--review-card-shell, #0e0e10);
+	--_panel: var(--review-card-panel, #141416);
+	--_panel-hover: var(--review-card-panel-hover, #17171a);
+	--_line: var(--review-card-line, rgba(255, 255, 255, 0.08));
+	--_ink: var(--review-card-ink, #f4f4f5);
+	--_muted: var(--review-card-muted, #71717a);
+	--_body: var(--review-card-body, #a1a1aa);
+	--_lift: rgba(255, 255, 255, 0.1);
+}
+
+.review-card .review-card-inner {
+	background: var(--_panel);
+	border-color: color-mix(in oklab, var(--_line) 75%, transparent);
+	box-shadow: inset 0 1px 0 transparent;
+	transition:
+		box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
+		background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Hover: a quiet top-edge highlight, as if the card caught light from above. */
+.review-card:hover .review-card-inner {
+	background: var(--_panel-hover);
+	box-shadow:
+		inset 0 1px 0 var(--_lift),
+		0 1px 2px rgba(0, 0, 0, 0.04),
+		0 6px 16px -8px rgba(0, 0, 0, 0.1);
+}
+
+.review-card .review-card-sheen {
+	position: absolute;
+	inset: 0 0 auto 0;
+	height: 60%;
+	pointer-events: none;
+	background: radial-gradient(
+		120% 90% at 50% 0%,
+		color-mix(in oklab, var(--_lift) 60%, transparent),
+		transparent 70%
+	);
+	opacity: 0;
+	transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.review-card:hover .review-card-sheen {
+	opacity: 1;
+}
+
+.review-card .review-card-avatar {
+	background: var(--_shell);
+	box-shadow:
+		0 0 0 2px var(--_panel),
+		0 0 0 3px var(--_line);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.review-card,
+	.review-card .review-card-inner,
+	.review-card .review-card-sheen {
+		transition: none;
+	}
+}
+
+.review-card .review-card-name {
+	color: var(--_ink);
+}
+
+.review-card .review-card-handle {
+	color: var(--_muted);
+}
+
+.review-card .review-card-body {
+	color: var(--_body);
+}
+/* Light pages get a slate meteor; dark ones a pale blue-white. A `color`
+   prop (inline) overrides both. */
+.meteor {
+	--_meteor-color: var(--meteor-color, #475569);
+	background: var(--_meteor-color);
+	transform: rotate(var(--meteor-angle, 215deg)) scale(var(--meteor-scale, 1));
+	/* the head's glow */
+	box-shadow:
+		0 0 2px 1px color-mix(in srgb, var(--_meteor-color) 70%, transparent),
+		0 0 8px 2px color-mix(in srgb, var(--_meteor-color) 35%, transparent);
+	animation: meteor-fall 5s cubic-bezier(0.3, 0, 0.9, 1) infinite;
+}
+
+.dark .meteor {
+	--_meteor-color: var(--meteor-color, #dbeafe);
+}
+
+/* The tail: thickest at the head, fading out behind it. */
+.meteor::before {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 1px;
+	width: var(--meteor-tail, 60px);
+	height: 1px;
+	transform: translateY(-50%);
+	border-radius: 999px;
+	background: linear-gradient(
+		to right,
+		var(--_meteor-color),
+		color-mix(in srgb, var(--_meteor-color) 35%, transparent) 30%,
+		transparent
+	);
+}
+
 @keyframes meteor-fall {
 	0% {
-		transform: rotate(215deg) translateX(0);
-		opacity: 1;
+		transform: rotate(var(--meteor-angle, 215deg)) scale(var(--meteor-scale, 1)) translateX(0);
+		opacity: 0;
+	}
+	8% {
+		opacity: var(--meteor-brightness, 1);
 	}
 	70% {
+		opacity: var(--meteor-brightness, 1);
+	}
+	100% {
+		transform: rotate(var(--meteor-angle, 215deg)) scale(var(--meteor-scale, 1))
+			translateX(calc(-1 * var(--meteor-travel, 800px)));
+		opacity: 0;
+	}
+}
+
+/* A flare: the meteor swells and brightens just before it burns out. */
+.meteor.meteor--flare {
+	animation-name: meteor-fall-flare;
+}
+
+@keyframes meteor-fall-flare {
+	0% {
+		transform: rotate(var(--meteor-angle, 215deg)) scale(var(--meteor-scale, 1)) translateX(0);
+		opacity: 0;
+	}
+	8% {
+		opacity: var(--meteor-brightness, 1);
+	}
+	62% {
+		opacity: var(--meteor-brightness, 1);
+		box-shadow:
+			0 0 2px 1px color-mix(in srgb, var(--_meteor-color) 70%, transparent),
+			0 0 8px 2px color-mix(in srgb, var(--_meteor-color) 35%, transparent);
+	}
+	74% {
 		opacity: 1;
+		box-shadow:
+			0 0 4px 2px var(--_meteor-color),
+			0 0 18px 6px color-mix(in srgb, var(--_meteor-color) 55%, transparent);
 	}
 	100% {
-		transform: rotate(215deg) translateX(-500px);
+		transform: rotate(var(--meteor-angle, 215deg)) scale(var(--meteor-scale, 1))
+			translateX(calc(-1 * var(--meteor-travel, 800px)));
 		opacity: 0;
 	}
 }
 
-.meteor {
-	animation: meteor-fall 5s linear infinite;
+/* Reduced motion: a still sky — each meteor frozen part-way along its path. */
+@media (prefers-reduced-motion: reduce) {
+	.meteor,
+	.meteor.meteor--flare {
+		animation: none;
+		opacity: calc(var(--meteor-brightness, 1) * 0.7);
+		transform: rotate(var(--meteor-angle, 215deg)) scale(var(--meteor-scale, 1))
+			translateX(calc(-0.35 * var(--meteor-travel, 800px)));
+	}
 }
 /*
  * `NavbarLink` declares this same fallback again, locally on itself —
@@ -4285,71 +6590,150 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 		color-mix(in oklch, oklch(0.8001 0.1345 225.49) 6%, transparent)
 	);
 }
-.neon-layer-one {
-	position: absolute;
-	overflow: hidden;
-	width: 100%;
-	height: 100%;
-	filter: blur(1px) drop-shadow(0 0 12px var(--neon-color1));
-	z-index: -1;
-	inset: 0;
+/* Svelte scoped these rules; here every rule is anchored on the root class
+   `.neon-border-container` so nothing leaks into the consumer's page. */
+
+@property --neon-angle {
+	syntax: "<angle>";
+	inherits: true;
+	initial-value: 135deg;
 }
 
-.neon-layer-one::before {
-	content: "";
+.neon-border-container {
+	--neon-tube-width: 1.5px;
+	padding: var(--neon-tube-width);
+	isolation: isolate;
+}
+
+.neon-border-container .neon-tube,
+.neon-border-container .neon-light,
+.neon-border-container .neon-glow,
+.neon-border-container .neon-glow > span,
+.neon-border-container .neon-core {
 	position: absolute;
-	overflow: hidden;
-	top: 0;
-	left: 0;
-	width: var(--neon-width);
-	height: 100%;
+	pointer-events: none;
+	border-radius: inherit;
+}
+
+/* keep only the padding ring: the element minus its content box */
+.neon-border-container .neon-tube,
+.neon-border-container .neon-glow > span,
+.neon-border-container .neon-core {
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	mask-composite: exclude;
+}
+
+/* The unlit tube: always there, faint, shading from one colour to the other. */
+.neon-border-container .neon-tube {
+	inset: 0;
+	padding: var(--neon-tube-width);
 	background: linear-gradient(
 		135deg,
-		var(--neon-color1),
-		var(--neon-color1),
-		transparent,
-		transparent
+		color-mix(in srgb, var(--neon-color1) 30%, transparent),
+		color-mix(in srgb, var(--neon-color2) 30%, transparent)
 	);
 }
 
-.neon-layer-two {
-	position: absolute;
-	overflow: hidden;
-	width: 100%;
-	height: 100%;
-	filter: blur(1px) drop-shadow(0 0 12px var(--neon-color2));
-	z-index: -1;
+.neon-border-container .neon-light {
 	inset: 0;
 }
 
-.neon-layer-two::before {
-	content: "";
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	overflow: hidden;
-	width: var(--neon-width);
-	height: 100%;
-	background: linear-gradient(
-		135deg,
-		transparent,
-		transparent,
-		var(--neon-color2),
-		var(--neon-color2)
-	);
+/* The glow: the beams on a wide ring straddling the edge, blurred after
+   masking so it spills softly both inside and outside. */
+.neon-border-container .neon-glow {
+	inset: 0;
+	filter: blur(7px);
+	/* on a light page a coloured halo reads as a stain: keep it faint */
+	opacity: var(--neon-glow-max);
+}
+
+.neon-border-container {
+	--neon-glow-max: 0.4;
+	--neon-glow-min: 0.25;
+}
+
+.dark .neon-border-container {
+	--neon-glow-max: 0.9;
+	--neon-glow-min: 0.6;
+}
+
+.neon-border-container .neon-glow > span {
+	inset: -7px;
+	padding: calc(var(--neon-tube-width) + 12px);
+	border-radius: calc(0.5rem + 7px);
+	background: var(--neon-beams);
+}
+
+/* The white-hot core of the lit tube. */
+.neon-border-container .neon-core {
+	inset: 0;
+	padding: var(--neon-tube-width);
+	background: var(--neon-core);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	/* The beams chase round the tube. */
+	.neon-border-container.neon-animated {
+		animation: neon-travel var(--neon-duration) linear infinite;
+	}
+
+	/* The tube strikes once on first paint… */
+	.neon-border-container .neon-light {
+		animation: neon-ignite 0.9s steps(1, end) both;
+	}
+
+	/* …then hums: a slow breathing of the glow. */
+	.neon-border-container .neon-glow {
+		animation: neon-hum 2.8s ease-in-out 0.9s infinite alternate;
+	}
+}
+
+@keyframes neon-travel {
+	from {
+		--neon-angle: 135deg;
+	}
+	to {
+		--neon-angle: 495deg;
+	}
 }
 
-@keyframes neon-rotate {
+@keyframes neon-ignite {
 	0% {
-		transform: rotate(0deg);
+		opacity: 0;
+	}
+	10% {
+		opacity: 0.8;
+	}
+	18% {
+		opacity: 0.1;
+	}
+	30% {
+		opacity: 1;
+	}
+	40% {
+		opacity: 0.35;
+	}
+	52% {
+		opacity: 1;
 	}
 	100% {
-		transform: rotate(360deg);
+		opacity: 1;
 	}
 }
 
-.neon-animated {
-	animation: neon-rotate var(--neon-duration) linear infinite;
+@keyframes neon-hum {
+	from {
+		opacity: var(--neon-glow-max);
+	}
+	to {
+		opacity: var(--neon-glow-min);
+	}
 }
 .ft-number-input-field:focus-visible {
 	--ft-number-input-accent: var(
@@ -4436,31 +6820,50 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 }
 
 /*
- * The newly-current page pops once, so the eye can find where it landed
- * without hunting for a colour change among nine identical squares.
- *
- * `transform` only: `box-shadow` on this same button is the focus ring
- * above, and a focus ring must never animate. `data-armed` keeps the pop
- * off the first paint (see the component). `--ft-ease-out` because the pill
- * arrives at its new place — it is not toggling in position.
- *
- * 150ms = tokens.DURATIONS.fast, cubic-bezier(0.16, 1, 0.3, 1) = tokens.EASINGS.out
+ * The nav is the page buttons' `offsetParent` (no `<ul>`/`<li>` in between
+ * is positioned), so `offsetLeft`/`offsetTop` and the pill's own
+ * `left: 0; top: 0` share one origin. `isolation` lets the pill sit at
+ * `z-index: -1` — above the nav's background, under the buttons.
  */
-@media (prefers-reduced-motion: no-preference) {
-	.ft-pagination[data-armed="true"] button[aria-current="page"] {
-		animation: ft-pagination-pop var(--ft-pagination-pop-duration, var(--ft-duration-fast, 150ms))
-			var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
-	}
+.ft-pagination {
+	position: relative;
+	isolation: isolate;
 }
 
-/* 0.92 is the library's scale floor — the same value every entrance preset
-   starts from, so a pop and a panel opening read as one vocabulary. */
-@keyframes ft-pagination-pop {
-	from {
-		transform: scale(0.92);
-	}
-	to {
-		transform: scale(1);
+.ft-pagination-indicator {
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: -1;
+	pointer-events: none;
+	border-radius: var(--radius-md, 0.375rem);
+	background: var(--ft-pagination-indicator-color, var(--color-accent));
+	opacity: 0;
+}
+
+.ft-pagination[data-indicator] .ft-pagination-indicator {
+	opacity: 1;
+}
+
+/* The pill has taken over: the current button's own fill steps aside. */
+.ft-pagination[data-indicator] button[aria-current="page"] {
+	background: transparent;
+}
+
+/*
+ * 300ms = tokens.DURATIONS.base, cubic-bezier(0.16, 1, 0.3, 1) =
+ * tokens.EASINGS.out — the same curve and length as the numbers' own
+ * glide, so the pill lands with its number. Gated: under reduced
+ * motion the pill still follows the page, it just arrives.
+ */
+@media (prefers-reduced-motion: no-preference) {
+	.ft-pagination[data-armed="true"] .ft-pagination-indicator {
+		transition: transform
+			var(
+				--ft-pagination-slide-duration,
+				var(--ft-pagination-pop-duration, var(--ft-duration-base, 300ms))
+			)
+			var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
 	}
 }
 /*
@@ -4843,6 +7246,110 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 .rainbow-button::before {
 	animation: rainbow var(--rainbow-speed, 2s) infinite linear;
 }
+
+/*
+ * Hover beam: a rainbow light that rides the border. One conic gradient,
+ * turned through a registered angle, drawn twice — masked to the border ring
+ * (the beam itself) and blurred around the button (its halo).
+ */
+@property --beam-angle {
+	syntax: "<angle>";
+	inherits: true;
+	initial-value: 0deg;
+}
+
+.rainbow-button {
+	--beam-width: 1.5px;
+	--glow-reach: 6px;
+	--glow-blur: 10px;
+	--beam: conic-gradient(
+		from var(--beam-angle),
+		transparent 0%,
+		var(--rainbow-4) 5%,
+		var(--rainbow-3) 10%,
+		var(--rainbow-2) 15%,
+		var(--rainbow-1) 20%,
+		hsl(35 100% 60%) 24%,
+		transparent 31%,
+		transparent 50%,
+		var(--rainbow-5) 55%,
+		var(--rainbow-4) 60%,
+		var(--rainbow-3) 64%,
+		transparent 71%
+	);
+}
+
+.rainbow-button .rainbow-button__beam,
+.rainbow-button .rainbow-button__glow {
+	position: absolute;
+	border-radius: inherit;
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.35s ease;
+}
+
+/* keep only the padding ring: the element minus its content box */
+.rainbow-button .rainbow-button__beam,
+.rainbow-button .rainbow-button__glow > span {
+	background: var(--beam);
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	mask-composite: exclude;
+}
+
+/* the beam itself, on the border */
+.rainbow-button .rainbow-button__beam {
+	inset: calc(-1 * var(--beam-width));
+	padding: var(--beam-width);
+	z-index: 1;
+}
+
+/* its halo: a wider ring, blurred AFTER masking so both edges go soft */
+.rainbow-button .rainbow-button__glow {
+	inset: 0;
+	filter: blur(var(--glow-blur));
+}
+
+.rainbow-button .rainbow-button__glow > span {
+	position: absolute;
+	inset: calc(-1 * var(--glow-reach));
+	padding: var(--glow-reach);
+	border-radius: calc(0.75rem + var(--glow-reach));
+}
+
+.rainbow-button:hover .rainbow-button__beam,
+.rainbow-button:focus-visible .rainbow-button__beam {
+	opacity: 1;
+}
+
+.rainbow-button:hover .rainbow-button__glow,
+.rainbow-button:focus-visible .rainbow-button__glow {
+	opacity: 0.6;
+}
+
+.rainbow-button:hover,
+.rainbow-button:focus-visible {
+	animation: beam-spin calc(var(--rainbow-speed, 2s) * 1.5) linear infinite;
+}
+
+@keyframes beam-spin {
+	to {
+		--beam-angle: 360deg;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.rainbow-button:hover,
+	.rainbow-button:focus-visible {
+		animation: none;
+		--beam-angle: 200deg;
+	}
+}
 /*
  * `.fancy-reasoning-panel` is a PORT-ADDED anchor (PORTING.md, styling rule 2).
  * The source's <style> block was compiler-scoped and had no root class; plain
@@ -5101,22 +7608,146 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 .animate-ripple-circle {
 	animation: ripple-effect 2s ease-in-out infinite;
 }
-@keyframes rippling {
+/* Every rule is anchored on the root class `ripple-button` (the Svelte source
+   names it on the root; its compiler scoped the inner selectors). As plain CSS,
+   a bare `.ripple-hover` / `.ripple-animation` would leak into any consumer
+   element of that name. See PORTING.md, styling rule 2. */
+
+/* Hover: a fingertip over water. */
+.ripple-button .ripple-hover {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.3s ease;
+	background: radial-gradient(
+		80px circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
+		color-mix(in srgb, var(--ripple-color) 20%, transparent),
+		transparent 70%
+	);
+}
+
+.ripple-button .ripple-hover::after {
+	content: "";
+	position: absolute;
+	left: var(--ripple-x, 50%);
+	top: var(--ripple-y, 50%);
+	width: 72px;
+	height: 72px;
+	margin: -36px 0 0 -36px;
+	border-radius: 50%;
+	border: 1px solid color-mix(in srgb, var(--ripple-color) 55%, transparent);
+	opacity: 0;
+	transform: scale(0.2);
+}
+
+.ripple-button:hover .ripple-hover {
+	opacity: 1;
+}
+
+.ripple-button:hover .ripple-hover::after {
+	animation: ripple-idle 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+}
+
+.ripple-button:hover {
+	border-color: color-mix(in srgb, var(--ripple-color) 35%, transparent);
+}
+
+@keyframes ripple-idle {
 	0% {
-		transform: scale(0);
-		opacity: 0.3;
+		transform: scale(0.2);
+		opacity: 0.9;
 	}
 	100% {
-		transform: scale(2);
+		transform: scale(1);
 		opacity: 0;
 	}
 }
 
-/* Anchored on the root class (added in the port — the Svelte compiler scoped
-   this rule; as plain CSS it would leak into any consumer element named
-   .ripple-animation). See PORTING.md, styling rule 2. */
+/* The border takes the ripple's tint while a ripple runs. */
+.ripple-button[data-rippling] {
+	border-color: color-mix(in srgb, var(--ripple-color) 55%, transparent);
+}
+
+/* A soft glow that blooms and fades… */
 .ripple-button .ripple-animation {
-	animation: rippling var(--ripple-duration, 600ms) ease-out forwards;
+	background: radial-gradient(
+		circle,
+		color-mix(in srgb, var(--ripple-color) 40%, transparent) 0%,
+		color-mix(in srgb, var(--ripple-color) 16%, transparent) 45%,
+		transparent 70%
+	);
+	animation: ripple-bloom var(--ripple-duration, 900ms) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+}
+
+/* …and two fine rings, the second a beat behind, like a wave on water. */
+.ripple-button .ripple-animation::before,
+.ripple-button .ripple-animation::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	border-radius: 50%;
+	border: 2px solid color-mix(in srgb, var(--ripple-color) 90%, transparent);
+	transform: scale(0);
+	opacity: 0;
+	animation: ripple-ring var(--ripple-duration, 900ms) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+}
+
+.ripple-button .ripple-animation::after {
+	border-width: 1.5px;
+	animation-delay: calc(var(--ripple-duration, 900ms) * 0.12);
+}
+
+@keyframes ripple-bloom {
+	0% {
+		transform: scale(0);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(1);
+		opacity: 0;
+	}
+}
+
+@keyframes ripple-ring {
+	0% {
+		transform: scale(0);
+		opacity: 1;
+	}
+	60% {
+		opacity: 0.8;
+	}
+	100% {
+		transform: scale(1);
+		opacity: 0;
+	}
+}
+
+/* Reduced motion: no expansion, just a brief glow where you pressed. */
+@media (prefers-reduced-motion: reduce) {
+	.ripple-button:hover .ripple-hover::after {
+		animation: none;
+	}
+
+	.ripple-button .ripple-animation {
+		animation-name: ripple-fade;
+	}
+
+	.ripple-button .ripple-animation::before,
+	.ripple-button .ripple-animation::after {
+		display: none;
+	}
+
+	@keyframes ripple-fade {
+		0% {
+			transform: scale(1);
+			opacity: 1;
+		}
+		100% {
+			transform: scale(1);
+			opacity: 0;
+		}
+	}
 }
 /*
  * Centring lives here rather than on a `-translate-x-1/2` utility: the
@@ -5296,37 +7927,123 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 	border-color: var(--ft-field-accent);
 	box-shadow: 0 0 0 3px color-mix(in oklab, var(--ft-field-accent) 25%, transparent);
 }
-@keyframes shimmer-slide {
-	to {
-		transform: translate(calc(100cqw - 100%), 0);
-	}
+/* Plain CSS is global: every selector carries the component prefix (.shimmer-button or .shimmer-button__*), so nothing leaks onto consumer elements. */
+.shimmer-button__rim,
+.shimmer-button__face,
+.shimmer-button__sheen,
+.shimmer-button__spot {
+	position: absolute;
+	pointer-events: none;
+	border-radius: inherit;
+}
+
+.shimmer-button__rim {
+	inset: 0;
+	z-index: -2;
+	background: linear-gradient(
+		to bottom,
+		color-mix(in srgb, var(--shimmer-color) 28%, transparent),
+		color-mix(in srgb, var(--shimmer-color) 6%, transparent) 55%,
+		color-mix(in srgb, var(--shimmer-color) 14%, transparent)
+	);
+}
+
+.shimmer-button__face {
+	inset: var(--cut);
+	z-index: -1;
+	border-radius: calc(var(--radius) - var(--cut));
+	background:
+		linear-gradient(
+			to bottom,
+			color-mix(in srgb, var(--shimmer-color) 10%, transparent),
+			transparent 50%
+		),
+		var(--bg);
+	box-shadow: inset 0 -10px 16px -12px color-mix(in srgb, var(--shimmer-color) 30%, transparent);
+}
+
+/* Screen blend: the band lightens the face and lifts the label to full white. */
+.shimmer-button__sheen {
+	inset: 0;
+	z-index: 20;
+	mix-blend-mode: screen;
+	/* a wide soft halo with a thin brighter core */
+	background:
+		linear-gradient(
+			108deg,
+			transparent 44%,
+			color-mix(in srgb, var(--shimmer-color) 38%, transparent) 50%,
+			transparent 56%
+		),
+		linear-gradient(
+			108deg,
+			transparent 30%,
+			color-mix(in srgb, var(--shimmer-color) 12%, transparent) 42%,
+			color-mix(in srgb, var(--shimmer-color) 18%, transparent) 50%,
+			color-mix(in srgb, var(--shimmer-color) 12%, transparent) 58%,
+			transparent 70%
+		);
+	background-size: 250% 100%;
+	background-repeat: no-repeat;
+	background-position: 100% 0;
+	animation: shimmer-sweep var(--speed) cubic-bezier(0.4, 0, 0.2, 1) infinite;
+	transition: opacity 0.3s ease;
+}
+
+.shimmer-button__spot {
+	inset: 0;
+	z-index: 20;
+	mix-blend-mode: screen;
+	opacity: 0;
+	background: radial-gradient(
+		90px circle at var(--mx, 50%) var(--my, 50%),
+		color-mix(in srgb, var(--shimmer-color) 34%, transparent),
+		transparent 70%
+	);
+	transition: opacity 0.3s ease;
+}
+
+.shimmer-button:hover .shimmer-button__spot {
+	opacity: 1;
+}
+
+/* The pointer takes over from the sweep while hovering. */
+.shimmer-button:hover .shimmer-button__sheen {
+	opacity: 0;
+}
+
+.shimmer-button:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--shimmer-color) 70%, transparent);
+	outline-offset: 2px;
+}
+
+.shimmer-button:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.shimmer-button:disabled .shimmer-button__sheen,
+.shimmer-button:disabled .shimmer-button__spot {
+	display: none;
 }
 
-@keyframes spin-around {
+/* Sweep across in the first 55% of the cycle, then rest off-button. */
+@keyframes shimmer-sweep {
 	0% {
-		transform: translateZ(0) rotate(0);
-	}
-	15%,
-	35% {
-		transform: translateZ(0) rotate(90deg);
-	}
-	65%,
-	85% {
-		transform: translateZ(0) rotate(270deg);
+		background-position: 100% 0;
 	}
+	55%,
 	100% {
-		transform: translateZ(0) rotate(360deg);
+		background-position: 0% 0;
 	}
 }
 
-/* Anchored on the root class: the Svelte compiler scoped these rules, plain CSS
-   would leak them into every consumer element sharing the class name. */
-.shimmer-button .shimmer-slide {
-	animation: shimmer-slide var(--speed) ease-in-out infinite alternate;
-}
-
-.shimmer-button .spin-around {
-	animation: spin-around calc(var(--speed) * 2) infinite linear;
+@media (prefers-reduced-motion: reduce) {
+	.shimmer-button__sheen {
+		animation: none;
+		background-position: 38% 0;
+		opacity: 0.6;
+	}
 }
 /*
  * `SidebarItem` declares this same fallback again, locally on itself —
@@ -5670,11 +8387,111 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 	box-shadow: 0 0 0 4px color-mix(in oklab, var(--ft-slider-accent) 25%, transparent);
 }
 
-.ft-slider:disabled::-webkit-slider-thumb {
-	box-shadow: none;
+.ft-slider:disabled::-webkit-slider-thumb {
+	box-shadow: none;
+}
+.ft-slider:disabled::-moz-range-thumb {
+	box-shadow: none;
+}
+/*
+ * SmoothCursor — the Svelte source's scoped <style> block. Plain CSS is global,
+ * so every rule is anchored on the component's own root class `.smooth-cursor`
+ * (the Svelte root already carries it). Class names and custom properties are
+ * identical to the Svelte source.
+ */
+
+.smooth-cursor {
+	--_sc-hot: color-mix(in oklab, var(--_sc-color) 45%, white);
+	--_sc-deep: color-mix(in oklab, var(--_sc-color) 82%, black);
+	--_sc-ink: var(--smooth-cursor-label-color, #fff);
+}
+
+.smooth-cursor .sc-pointer,
+.smooth-cursor .sc-label {
+	position: absolute;
+	top: 0;
+	left: 0;
+	will-change: transform;
+}
+
+/* The arrow always paints over the pill when the pill catches up behind it. */
+.smooth-cursor .sc-pointer {
+	z-index: 1;
+}
+
+.smooth-cursor .sc-arrow {
+	display: block;
+	overflow: visible;
+	filter: drop-shadow(0 1px 1.25px rgb(0 0 0 / 0.32))
+		drop-shadow(0 4px 9px color-mix(in oklab, var(--_sc-color) 38%, transparent));
+}
+
+/* Rotating mode: turn the arrowhead so it points "up" — the engine's 0deg. */
+.smooth-cursor .sc-pointer--rotate .sc-arrow {
+	rotate: 32.5deg;
+}
+
+.smooth-cursor .sc-arrow-rim {
+	stroke: #fff;
+	stroke-width: 3;
+	stroke-linejoin: round;
+	paint-order: stroke fill;
+}
+
+.smooth-cursor .sc-stop-hot {
+	stop-color: var(--_sc-hot);
+}
+.smooth-cursor .sc-stop-body {
+	stop-color: var(--_sc-color);
+}
+.smooth-cursor .sc-stop-deep {
+	stop-color: var(--_sc-deep);
+}
+
+/* Name pill: tucked under the arrow's back edge, square-ish corner pointing at the tip. */
+.smooth-cursor .sc-label {
+	translate: 13px 17px;
+	transform-origin: 0 0;
+	display: flex;
+	align-items: center;
+	max-width: 180px;
+	height: 22px;
+	padding: 0 9px;
+	border-radius: 3px 11px 11px 11px;
+	background: linear-gradient(
+		180deg,
+		color-mix(in oklab, var(--_sc-color) 86%, white) 0%,
+		var(--_sc-color) 55%,
+		color-mix(in oklab, var(--_sc-color) 92%, black) 100%
+	);
+	color: var(--_sc-ink);
+	box-shadow:
+		0 0 0 1px rgb(255 255 255 / 0.92),
+		inset 0 1px 0 rgb(255 255 255 / 0.28),
+		0 1px 2px rgb(0 0 0 / 0.28),
+		0 6px 16px -4px color-mix(in oklab, var(--_sc-color) 45%, transparent);
+	opacity: 1;
+}
+
+.smooth-cursor .sc-label-text {
+	overflow: hidden;
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 1;
+	letter-spacing: 0.01em;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-shadow: 0 1px 0 rgb(0 0 0 / 0.14);
 }
-.ft-slider:disabled::-moz-range-thumb {
-	box-shadow: none;
+
+.smooth-cursor .sc-label.is-idle {
+	opacity: 0.35;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.smooth-cursor .sc-label {
+		transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
 }
 .ft-sources-trigger {
 	border: 1px solid
@@ -5810,47 +8627,69 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 		transform: scale(0) rotate(150deg);
 	}
 }
+/*
+ * Port note: Svelte scoped these rules; plain CSS is global, so every
+ * selector below is anchored on a class this component owns and puts on its
+ * own elements (`.ft-step`, `.ft-step-bullet*`, `.ft-step-connector*`,
+ * `.ft-step-glyph`, `.ft-step-check`, `.ft-step-trigger`, `.ft-step-animate`
+ * — all of them the Svelte source's own names, already on the elements'
+ * class lists). No anchor had to be added. Everything below is copied
+ * verbatim from the Svelte source's <style> block.
+ */
+
 /*
  * The only place this component reaches for the brand purple — the
- * current bullet's fill/halo and a done segment's connector. No
- * semantic token owns it, so it's declared locally with a light-dark()
- * fallback, retintable from higher up the tree via `--ft-accent`.
- * Mirrors the identical accent pattern a toggle group's items use for
- * their focus ring. Never redeclare `--ft-accent` itself: that would
- * shadow whatever an ancestor set, the exact bug an earlier wave shipped
- * in `Link`.
+ * current bullet's fill/halo and a lit rail. No semantic token owns it,
+ * so it's declared locally with a light-dark() fallback, retintable from
+ * higher up the tree via `--ft-accent`. Mirrors ToggleGroupItem's
+ * identical `--ft-toggle-group-accent` pattern. Never redeclare
+ * `--ft-accent` itself: that would shadow whatever an ancestor set, the
+ * exact bug an earlier wave shipped in `Link`.
  *
- * Svelte scoped these rules; plain CSS is global, so every selector below
- * is anchored on a class this component owns and puts on its own elements
- * (`.ft-step`, `.ft-step-bullet`, `.ft-step-connector`, `.ft-step-trigger`
- * — all of them the Svelte source's own names, already the first token of
- * the element's class list). No anchor had to be added.
+ * Every private `--_x` reads a public `--ft-step-*` first, so a consumer
+ * can retune the rail from a class without touching this file.
  */
 .ft-step {
 	--ft-nav-accent: var(
 		--ft-accent,
 		light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75))
 	);
+	/* What a lit rail settles to: the accent at reduced strength. */
+	--_rail: var(--ft-step-rail, color-mix(in oklab, var(--ft-nav-accent) 58%, transparent));
+	/* The head of the travelling light. White-hot on dark; on a light
+	 * surface a white core would vanish, so it stays close to the accent. */
+	--_hot: var(
+		--ft-step-glint,
+		light-dark(
+			color-mix(in oklab, var(--ft-nav-accent) 82%, white),
+			color-mix(in oklab, var(--ft-nav-accent) 45%, white)
+		)
+	);
+	--_sweep: var(--ft-step-sweep-duration, 420ms);
+	/* One beat = how far behind the previous rail the next one lights, so
+	 * a multi-step jump reads as a single run of light. */
+	--_beat: calc(var(--_sweep) * 0.7);
+	--_ease-out: var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
 }
 
 /*
  * A step's whole visible state — the bullet's fill, its label colour, the
- * halo around the current one, and the connector behind it — used to arrive
- * in a single frame. It now eases in on the same clock as everything else
- * in the library.
+ * halo around the current one, and the rail behind it — eases in on the
+ * same clock as everything else in the library.
  *
  * Declared outside any `prefers-reduced-motion` query on purpose: none of
- * these three properties moves anything. A colour that crossfades and a
- * static ring that appears are state changes, not travel, and suppressing
- * them under reduced motion would make the stepper flicker rather than
- * settle. The focus ring is safe from this list because it lives on a
- * different element (`.ft-step-trigger`), so no `box-shadow` here is ever
- * a focus indicator.
+ * these properties moves anything. A colour that crossfades and a static
+ * ring that appears are state changes, not travel, and suppressing them
+ * under reduced motion would make the stepper flicker rather than settle.
+ * The focus ring is safe from this list because it lives on a different
+ * element (`.ft-step-trigger`), so no `box-shadow` here is ever a focus
+ * indicator.
  *
  * 150ms = tokens.DURATIONS.fast, cubic-bezier(0.4, 0, 0.2, 1) = tokens.EASINGS.inout
  */
 .ft-step-bullet,
-.ft-step-connector {
+.ft-step-connector,
+.ft-step-connector::before {
 	--ft-step-signal: var(--ft-step-signal-duration, var(--ft-duration-fast, 150ms))
 		var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1));
 	transition:
@@ -5859,19 +8698,120 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 		box-shadow var(--ft-step-signal);
 }
 
+/* ---------------------------------------------------------------- bullets */
+
+/*
+ * The outline is an inset box-shadow, not a border: it then rides the
+ * same (possibly delayed) transition as the fill, so a step the light is
+ * still travelling towards keeps its ring until the light lands instead
+ * of dropping it the instant `current` changes.
+ */
+.ft-step-bullet-upcoming {
+	background: color-mix(in oklab, currentColor 5%, transparent);
+	box-shadow: inset 0 0 0 1px
+		var(--ft-step-outline, var(--border, color-mix(in oklab, currentColor 22%, transparent)));
+}
+
 .ft-step-bullet-done {
 	background: var(--ft-status-done, light-dark(oklch(0.5 0.14 145), oklch(0.72 0.15 145)));
 	color: light-dark(oklch(1 0 0), oklch(0.15 0 0));
+	box-shadow:
+		inset 0 1px 0 rgb(255 255 255 / 0.22),
+		0 1px 2px rgb(0 0 0 / 0.12);
 }
 
 .ft-step-bullet-current {
 	background: var(--ft-nav-accent);
 	color: light-dark(oklch(1 0 0), oklch(0.15 0 0));
-	box-shadow: 0 0 0 4px color-mix(in oklab, var(--ft-nav-accent) 20%, transparent);
+	box-shadow:
+		inset 0 1px 0 rgb(255 255 255 / 0.28),
+		0 1px 2px rgb(0 0 0 / 0.14);
 }
 
-.ft-step-connector-done {
-	background: var(--ft-status-done, light-dark(oklch(0.5 0.14 145), oklch(0.72 0.15 145)));
+/*
+ * The halo lives on its own layer so it can breathe through `opacity`
+ * alone — never re-painting a box-shadow per frame, never scaling. At
+ * rest (SSR, reduced motion) it is simply on.
+ */
+.ft-step-bullet-halo::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	pointer-events: none;
+	box-shadow:
+		0 0 0 4px color-mix(in oklab, var(--ft-nav-accent) 18%, transparent),
+		0 0 18px 2px color-mix(in oklab, var(--ft-nav-accent) 30%, transparent);
+}
+
+.ft-step-glyph {
+	display: inline-block;
+}
+
+/* ------------------------------------------------------------------ rails */
+
+/*
+ * The rail is a hairline track (the connector itself, `bg-border`) with
+ * two layers on top: `::before`, the settled fill, and `::after`, the
+ * light that travels once across it when it lights.
+ *
+ * At rest the fill is full-length and only its colour changes, so the
+ * no-motion path is a pure cross-fade.
+ */
+.ft-step-connector {
+	/* Horizontal clip only — the travelling light may glow above and below
+	 * the rail but never spill past its ends onto a bullet. */
+	clip-path: inset(-10px 0);
+}
+.ft-step[data-orientation="vertical"] .ft-step-connector {
+	clip-path: inset(0 -10px);
+}
+
+.ft-step-connector::before,
+.ft-step-connector::after {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	border-radius: inherit;
+}
+
+.ft-step-connector::before {
+	inset: 0;
+	background-color: transparent;
+}
+.ft-step-connector-lit::before {
+	background-color: var(--_rail);
+}
+
+.ft-step-connector::after {
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 45%;
+	opacity: 0;
+	background: linear-gradient(
+		90deg,
+		transparent,
+		color-mix(in oklab, var(--ft-nav-accent) 55%, transparent) 45%,
+		var(--ft-nav-accent) 78%,
+		var(--_hot) 97%,
+		var(--_hot)
+	);
+	filter: drop-shadow(0 0 3px color-mix(in oklab, var(--ft-nav-accent) 80%, transparent));
+}
+.ft-step[data-orientation="vertical"] .ft-step-connector::after {
+	right: 0;
+	width: auto;
+	height: 45%;
+	bottom: auto;
+	background: linear-gradient(
+		180deg,
+		transparent,
+		color-mix(in oklab, var(--ft-nav-accent) 55%, transparent) 45%,
+		var(--ft-nav-accent) 78%,
+		var(--_hot) 97%,
+		var(--_hot)
+	);
 }
 
 .ft-step-trigger:focus-visible {
@@ -5879,6 +8819,150 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 	box-shadow: 0 0 0 3px color-mix(in oklab, var(--ft-nav-accent) 35%, transparent);
 	border-radius: 0.375rem;
 }
+
+/* ----------------------------------------------------------------- motion */
+
+/*
+ * Everything below travels, so it is doubly gated: the OS preference
+ * (this query) and `.ft-step-animate`, which the root only hands out on
+ * the client once it has read the same preference. The resting state
+ * above is the fallback for both.
+ *
+ * `--ft-step-order` (rails) and `--ft-step-arrival` (bullets) are written
+ * inline by `Step` — beats since the light set off from the previous
+ * active step, so one jump across several steps lights them in sequence.
+ */
+@media (prefers-reduced-motion: no-preference) {
+	/* The fill grows along the rail instead of cross-fading, and retracts
+	 * the same way when the reader steps back. An unlit fill stays
+	 * transparent while collapsed: `.ft-step-animate` lands on elements
+	 * already painted (hydration, a post-paint effect, the OS preference
+	 * flipping), and a fill that turned the rail colour in that same style
+	 * change would show every unlit rail fully lit for its delay, then
+	 * retract. Its colour only drops once a retraction has finished
+	 * (a 0s transition delayed past the sweep); lighting switches it on
+	 * instantly while the fill is still collapsed. */
+	.ft-step-animate .ft-step-connector::before {
+		transform: scaleX(0);
+		transform-origin: left center;
+		transition:
+			transform var(--_sweep) var(--_ease-out) calc(var(--ft-step-order, 0) * var(--_beat)),
+			background-color 0s linear calc(var(--ft-step-order, 0) * var(--_beat) + var(--_sweep));
+	}
+	.ft-step-animate[data-orientation="vertical"] .ft-step-connector::before {
+		transform: scaleY(0);
+		transform-origin: center top;
+	}
+	.ft-step-animate .ft-step-connector-lit::before,
+	.ft-step-animate[data-orientation="vertical"] .ft-step-connector-lit::before {
+		transform: none;
+		transition: transform var(--_sweep) var(--_ease-out)
+			calc(var(--ft-step-order, 0) * var(--_beat));
+	}
+
+	/* The light: a comet whose head rides exactly on the fill's leading
+	 * edge (same duration, same curve, translate range chosen so head =
+	 * fill edge), then fades once it has arrived. Keyed on the lit class,
+	 * so it plays once each time a rail lights — and once on first paint,
+	 * as the arrival. */
+	.ft-step-animate .ft-step-connector-lit::after {
+		animation:
+			ft-step-sweep-x var(--_sweep) var(--_ease-out) calc(var(--ft-step-order, 0) * var(--_beat))
+				both,
+			ft-step-sweep-fade calc(var(--_sweep) * 0.7) linear
+				calc(var(--ft-step-order, 0) * var(--_beat) + var(--_sweep) * 0.6) both;
+	}
+	.ft-step-animate[data-orientation="vertical"] .ft-step-connector-lit::after {
+		animation-name: ft-step-sweep-y, ft-step-sweep-fade;
+	}
+
+	/* A bullet the light is heading for settles when it gets there, not
+	 * the instant `current` changes. */
+	.ft-step-animate .ft-step-bullet {
+		transition-delay: calc(var(--ft-step-arrival, 0) * var(--_beat));
+	}
+
+	/* The glyph swap: a short flip on whichever glyph just mounted, and the
+	 * check stroke drawing itself behind it. */
+	.ft-step-animate .ft-step-glyph {
+		transform-origin: center;
+		animation: ft-step-flip 200ms var(--_ease-out) calc(var(--ft-step-arrival, 0) * var(--_beat))
+			both;
+	}
+	.ft-step-animate .ft-step-check path {
+		stroke-dasharray: 1;
+		animation: ft-step-draw 320ms var(--_ease-out)
+			calc(var(--ft-step-arrival, 0) * var(--_beat) + 60ms) both;
+	}
+
+	/* The breathing halo — opacity only, no scale — faded in on arrival
+	 * through `filter` so the two animations never fight over `opacity`. */
+	.ft-step-animate .ft-step-bullet-halo::before {
+		animation:
+			ft-step-halo-in 360ms var(--_ease-out) calc(var(--ft-step-arrival, 0) * var(--_beat)) both,
+			ft-step-breathe 1.2s ease-in-out infinite alternate;
+	}
+}
+
+@keyframes ft-step-sweep-x {
+	from {
+		transform: translateX(-100%);
+	}
+	to {
+		/* head (right edge, at 45% width) lands on the rail's far end */
+		transform: translateX(122.3%);
+	}
+}
+@keyframes ft-step-sweep-y {
+	from {
+		transform: translateY(-100%);
+	}
+	to {
+		transform: translateY(122.3%);
+	}
+}
+@keyframes ft-step-sweep-fade {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+@keyframes ft-step-breathe {
+	from {
+		opacity: 0.5;
+	}
+	to {
+		opacity: 1;
+	}
+}
+@keyframes ft-step-halo-in {
+	from {
+		filter: opacity(0);
+	}
+	to {
+		filter: opacity(1);
+	}
+}
+@keyframes ft-step-flip {
+	from {
+		transform: perspective(60px) rotateX(90deg);
+		opacity: 0;
+	}
+	to {
+		transform: perspective(60px) rotateX(0deg);
+		opacity: 1;
+	}
+}
+@keyframes ft-step-draw {
+	from {
+		stroke-dashoffset: 1;
+	}
+	to {
+		stroke-dashoffset: 0;
+	}
+}
 /*
  * The two-column ⇄ stacked switch is FLEX WRAPPING, not a `@container`
  * query, and deliberately so: an element is styled by the query containers
@@ -6933,6 +10017,263 @@ svg[data-state="error"] .ft-statusmorph-cross-b {
 	border-color: var(--ft-field-accent);
 	box-shadow: 0 0 0 3px color-mix(in oklab, var(--ft-field-accent) 25%, transparent);
 }
+/*
+ * Timeline "light rail". Mirrors the Svelte <style> block rule for rule. The
+ * Svelte compiler scoped every selector; here each one is anchored on the
+ * source's own root class `.tl-root` so no generic name leaks into the page.
+ */
+.tl-root {
+	/* Public hooks: --timeline-accent (colour). --tl-progress is written by the component. */
+	--_tl-accent: var(--timeline-accent, var(--primary, oklch(0.7 0.13 285)));
+	--_tl-cool: oklch(0.72 0.1 262);
+	/* Light surfaces: the glow leans on the cool tint so a dark accent never reads as a smudge. */
+	--_tl-glow: color-mix(in oklab, var(--_tl-accent) 40%, var(--_tl-cool));
+	--_tl-hot: color-mix(in oklab, var(--_tl-accent) 45%, white);
+	--_tl-core: var(--_tl-accent);
+	--_tl-hair: rgba(0, 0, 0, 0.12);
+	--_tl-ring: rgba(0, 0, 0, 0.2);
+	--_tl-surface: var(--background, #fafafa);
+	--_tl-muted: rgba(0, 0, 0, 0.42);
+	--_tl-glow-a: 38%;
+	--_tl-ease: cubic-bezier(0.16, 1, 0.3, 1);
+	--_tl-x: 2rem;
+}
+
+.dark .tl-root {
+	--_tl-glow: color-mix(in oklab, var(--_tl-accent) 72%, var(--_tl-cool));
+	--_tl-core: var(--_tl-hot);
+	--_tl-hair: rgba(255, 255, 255, 0.12);
+	--_tl-ring: rgba(255, 255, 255, 0.2);
+	--_tl-muted: rgba(255, 255, 255, 0.38);
+	--_tl-glow-a: 60%;
+}
+
+/* ── Rail ─────────────────────────────────────────────── */
+.tl-root .tl-rail {
+	position: absolute;
+	top: 0;
+	left: calc(var(--_tl-x) - 1px);
+	width: 3px;
+	pointer-events: none;
+	-webkit-mask-image: linear-gradient(
+		to bottom,
+		transparent 0,
+		#000 7%,
+		#000 93%,
+		transparent 100%
+	);
+	mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
+}
+
+.tl-root .tl-rail-line,
+.tl-root .tl-trail {
+	position: absolute;
+	inset: 0 auto 0 1px;
+	width: 1px;
+}
+
+.tl-root .tl-rail-line {
+	background: var(--_tl-hair);
+}
+
+/* The filled part: faint far behind, brightening into the head, nothing past it. */
+.tl-root .tl-trail {
+	background: linear-gradient(
+		to bottom,
+		transparent 0,
+		color-mix(in oklab, var(--_tl-accent) 22%, transparent) calc(var(--tl-progress) - 320px),
+		color-mix(in oklab, var(--_tl-glow) 85%, transparent) var(--tl-progress),
+		transparent var(--tl-progress)
+	);
+}
+
+/* ── Head ─────────────────────────────────────────────── */
+.tl-root .tl-head {
+	position: absolute;
+	top: 0;
+	left: calc(var(--_tl-x) + 0.5px);
+	z-index: 50;
+	width: 0;
+	height: 0;
+	pointer-events: none;
+	transform: translate3d(0, var(--tl-progress), 0);
+	opacity: 0;
+}
+
+.tl-root .tl-head[data-ready="true"] {
+	opacity: 1;
+}
+
+.tl-root .tl-head > span {
+	position: absolute;
+	display: block;
+	border-radius: 999px;
+}
+
+.tl-root .tl-head-streak {
+	left: -1px;
+	top: -96px;
+	width: 2px;
+	height: 96px;
+	background: linear-gradient(
+		to top,
+		var(--_tl-hot),
+		color-mix(in oklab, var(--_tl-glow) 55%, transparent) 35%,
+		transparent
+	);
+	filter: blur(0.6px);
+}
+
+.tl-root .tl-head-halo {
+	left: -28px;
+	top: -28px;
+	width: 56px;
+	height: 56px;
+	background: radial-gradient(
+		closest-side,
+		color-mix(in oklab, var(--_tl-glow) var(--_tl-glow-a), transparent),
+		color-mix(in oklab, var(--_tl-glow) 14%, transparent) 55%,
+		transparent
+	);
+	filter: blur(6px);
+}
+
+.tl-root .tl-head-core {
+	left: -3.5px;
+	top: -3.5px;
+	width: 7px;
+	height: 7px;
+	background: var(--_tl-core);
+	box-shadow:
+		0 0 0 1.5px color-mix(in oklab, var(--_tl-hot) 45%, transparent),
+		0 0 10px 1px color-mix(in oklab, var(--_tl-glow) 70%, transparent);
+}
+
+/* ── Dots ─────────────────────────────────────────────── */
+.tl-root .tl-dot {
+	position: relative;
+	display: grid;
+	place-items: center;
+	width: 15px;
+	height: 15px;
+	border-radius: 999px;
+	border: 1px solid var(--_tl-ring);
+	background: var(--_tl-surface);
+	transform: scale(0.8);
+}
+
+.tl-root .tl-dot-core {
+	width: 7px;
+	height: 7px;
+	border-radius: 999px;
+	background: var(--_tl-core);
+	opacity: 0;
+	transform: scale(0.2);
+}
+
+.tl-root .tl-dot-flare {
+	position: absolute;
+	inset: -1px;
+	border-radius: 999px;
+	border: 1px solid color-mix(in oklab, var(--_tl-glow) 70%, transparent);
+	opacity: 0;
+	pointer-events: none;
+}
+
+.tl-root .tl-dot[data-lit="true"] {
+	transform: scale(1);
+	border-color: color-mix(in oklab, var(--_tl-accent) 55%, var(--_tl-ring));
+	box-shadow: 0 0 12px color-mix(in oklab, var(--_tl-glow) 40%, transparent);
+}
+
+.tl-root .tl-dot[data-lit="true"] .tl-dot-core {
+	opacity: 1;
+	transform: scale(1);
+}
+
+/* ── Labels ───────────────────────────────────────────── */
+/* Sits above the label out of flow, so the dot centres on the label itself. */
+.tl-root .tl-index {
+	position: absolute;
+	bottom: calc(100% + 0.2rem);
+	display: block;
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 0.6875rem;
+	letter-spacing: 0.12em;
+	color: var(--_tl-muted);
+	transition: color 260ms ease;
+}
+
+.tl-root .tl-heading {
+	color: var(--_tl-muted);
+	transition: color 260ms ease;
+}
+
+.tl-root .tl-row[data-state="active"] .tl-heading {
+	color: color-mix(in oklab, var(--_tl-accent) 28%, var(--foreground, #0a0a0a));
+}
+
+.tl-root .tl-row[data-state="active"] .tl-index {
+	color: color-mix(in oklab, var(--_tl-glow) 70%, var(--foreground, #0a0a0a));
+}
+
+.tl-root .tl-row[data-state="past"] .tl-label-text,
+.tl-root .tl-row[data-state="past"] .tl-content {
+	opacity: 0.5;
+}
+
+/* ── Motion ───────────────────────────────────────────── */
+@media (prefers-reduced-motion: no-preference) {
+	.tl-root[data-motion="full"] .tl-head {
+		transition: opacity 500ms var(--_tl-ease);
+	}
+
+	.tl-root[data-motion="full"] .tl-dot {
+		transition:
+			transform 260ms var(--_tl-ease),
+			border-color 260ms ease,
+			box-shadow 260ms ease;
+	}
+
+	.tl-root[data-motion="full"] .tl-dot-core {
+		transition:
+			transform 260ms var(--_tl-ease),
+			opacity 200ms ease;
+	}
+
+	.tl-root[data-motion="full"] .tl-dot[data-lit="true"] .tl-dot-flare {
+		animation: tl-ignite 700ms var(--_tl-ease) both;
+	}
+
+	.tl-root[data-motion="full"] .tl-label-text,
+	.tl-root[data-motion="full"] .tl-content {
+		transition: opacity 300ms var(--_tl-ease);
+	}
+}
+
+@keyframes tl-ignite {
+	from {
+		opacity: 0.9;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(2.6);
+	}
+}
+
+/* ── Reduced motion: a plain filled rail, no glow, dots lit by position ── */
+.tl-root[data-motion="reduced"] .tl-trail {
+	background: linear-gradient(
+		to bottom,
+		color-mix(in oklab, var(--_tl-accent) 70%, transparent) var(--tl-progress),
+		transparent var(--tl-progress)
+	);
+}
+
+.tl-root[data-motion="reduced"] .tl-dot[data-lit="true"] {
+	box-shadow: none;
+}
 /*
  * Declared locally, once, from the shared consumer-facing `--ft-accent` —
  * the same indirection `Button` (`--ft-btn-accent`) and `Popover`