@heyramzi/ui 7.0.0 → 8.1.0

package/src/showcase/AnimationsSection.svelte

@@ -1,1658 +0,0 @@
-<!-- ========================== -->
-<!-- IMPORTS                    -->
-<!-- ========================== -->
-<script lang="ts">
-	import { untrack } from "svelte";
-	import { swapText } from "../animations/text-swap.js";
-	import Bell from "@lucide/svelte/icons/bell";
-	import Info from "@lucide/svelte/icons/info";
-	import Menu from "@lucide/svelte/icons/menu";
-	import X from "@lucide/svelte/icons/x";
-	import ShowcaseStage from "./ShowcaseStage.svelte";
-	import chevronArms from "./chevron-arms.svg?raw";
-	import chevronDown from "./chevron-down.svg?raw";
-	import heart from "./heart.svg?raw";
-	import plus from "./plus.svg?raw";
-	import successCheck from "./success-check.svg?raw";
-
-	// =========================
-	// CONST
-	// =========================
-	const CLEAR_TEXT = "project deadline";
-
-	// =========================
-	// STATE
-	// =========================
-	let target = null;
-	const phrases = [
-		"Build the system.",
-		"Ship the route.",
-		"Verify the output.",
-		"Repeat tomorrow.",
-	];
-	let cursor = 0;
-
-	let digitGroup = null;
-	let digitAnimating = $state(false);
-	let digitValue = $state("1234");
-
-	let resizeSmall = $state(false);
-	let badgeOpen = $state(true);
-	let badgeCount = $state(3);
-	let activePage = $state<"1" | "2">("1");
-
-	let modalOpen = $state(true);
-	let dropdownOpen = $state(true);
-	let panelOpen = $state(true);
-	let iconState = $state<"a" | "b">("a");
-
-	let checkEl = null;
-
-	let avatarRoot = null;
-	// Dummy team members so the hover-lift reads as a real avatar stack.
-	const avatars = [
-		{ initials: "RK", hue: 24 },
-		{ initials: "KA", hue: 158 },
-		{ initials: "AM", hue: 268 },
-		{ initials: "MT", hue: 334 },
-		{ initials: "ZL", hue: 200 },
-	];
-
-	let shakeWrap = null;
-	let shakeInput = null;
-	let shakeRevert;
-
-	let clearWrap = null;
-	let clearInput = null;
-	let clearMirror = null;
-	let clearPhold = null;
-	let clearGlow = null;
-	let clearBusy = false;
-
-	let skelEl = null;
-	let skelSkeleton = null;
-
-	let tabsBar = null;
-	let tabsPill = null;
-	const tabs = ["Plan", "Debug", "Ask"];
-	let activeTab = $state(0);
-
-	let staggerEl = null;
-
-	// =========================
-	// EFFECTS
-	// =========================
-	$effect(() => {
-		const checkPath = checkEl?.querySelector("path");
-		if (!checkPath) return;
-		const len = Math.ceil(checkPath.getTotalLength());
-		checkPath.style.strokeDasharray = String(len);
-		checkPath.style.strokeDashoffset = String(len);
-	});
-
-	$effect(() => {
-		untrack(() => positionTabsPill(false));
-		const onResize = () => untrack(() => positionTabsPill(false));
-		window.addEventListener("resize", onResize);
-		return () => window.removeEventListener("resize", onResize);
-	});
-
-	// =========================
-	// FUNCTIONS
-	// =========================
-	function cssNum(name: string, fallback: number) {
-		const v = parseFloat(getComputedStyle(document.documentElement).getPropertyValue(name));
-		return Number.isFinite(v) ? v : fallback;
-	}
-	function nextPhrase() {
-		if (!target) return;
-		cursor = (cursor + 1) % phrases.length;
-		swapText(target, phrases[cursor]);
-	}
-
-	function replayDigits() {
-		if (!digitGroup) return;
-		digitAnimating = false;
-		digitValue = String(Math.floor(1000 + Math.random() * 8999));
-		// WHY: force reflow so removing+re-adding .is-animating restarts the keyframes
-		void digitGroup.offsetWidth;
-		digitAnimating = true;
-	}
-
-	function bumpBadge() {
-		badgeOpen = false;
-		setTimeout(() => {
-			badgeCount += 1;
-			badgeOpen = true;
-		}, 220);
-	}
-
-	function togglePage() {
-		activePage = activePage === "1" ? "2" : "1";
-	}
-
-	function replayCheck() {
-		if (!checkEl) return;
-		checkEl.setAttribute("data-state", "out");
-		// WHY: force reflow so the appear keyframes restart from offset 0
-		void checkEl.offsetWidth;
-		checkEl.setAttribute("data-state", "in");
-	}
-
-	function liftAvatars(activeIdx: number | null) {
-		if (!avatarRoot) return;
-		const lift = cssNum("--avatar-lift", -4);
-		const falloff = cssNum("--avatar-falloff", 0.45);
-		const scale = cssNum("--avatar-scale", 1.05);
-		const ease = "cubic-bezier(0.22, 1, 0.36, 1)";
-		avatarRoot.querySelectorAll(".t-avatar").forEach((el, i) => {
-			el.style.transitionTimingFunction = ease;
-			if (activeIdx === null) {
-				el.style.setProperty("--shift", "0px");
-				el.style.setProperty("--scale-active", "1");
-				return;
-			}
-			const d = Math.abs(i - activeIdx);
-			el.style.setProperty("--shift", `${(lift * Math.pow(falloff, d)).toFixed(3)}px`);
-			el.style.setProperty("--scale-active", i === activeIdx ? String(scale) : "1");
-		});
-	}
-
-	function showError() {
-		if (!shakeWrap || !shakeInput) return;
-		shakeWrap.classList.add("is-error");
-		shakeInput.classList.add("is-error");
-		// Replay the shake from a clean baseline.
-		shakeInput.classList.remove("is-shaking");
-		void shakeInput.offsetWidth;
-		shakeInput.classList.add("is-shaking");
-		const shakeMs = cssNum("--shake-dur-a", 80) * 2 + cssNum("--shake-dur-b", 60) * 2;
-		setTimeout(() => shakeInput?.classList.remove("is-shaking"), shakeMs + 20);
-		if (shakeRevert) clearTimeout(shakeRevert);
-		const hold = cssNum("--revert-hold", 3000);
-		shakeRevert = setTimeout(() => {
-			shakeWrap?.classList.remove("is-error");
-			shakeInput?.classList.remove("is-error");
-		}, shakeMs + hold);
-	}
-
-	// Minimal cubic-bezier sampler so the JS easing matches the CSS curves.
-	function cubicBezier(str: string) {
-		const m = str.match(/cubic-bezier\(([-\d.]+),\s*([-\d.]+),\s*([-\d.]+),\s*([-\d.]+)\)/);
-		if (!m) return (t: number) => t;
-		const [x1, y1, x2, y2] = m.slice(1).map(Number);
-		const cx = 3 * x1;
-		const bx = 3 * (x2 - x1) - cx;
-		const ax = 1 - cx - bx;
-		const cy = 3 * y1;
-		const by = 3 * (y2 - y1) - cy;
-		const ay = 1 - cy - by;
-		return (t: number) => {
-			if (t <= 0) return 0;
-			if (t >= 1) return 1;
-			let s = t;
-			for (let i = 0; i < 8; i++) {
-				const dx = ((ax * s + bx) * s + cx) * s - t;
-				const d = (3 * ax * s + 2 * bx) * s + cx;
-				if (Math.abs(dx) < 1e-6 || d === 0) break;
-				s -= dx / d;
-			}
-			return ((ay * s + by) * s + cy) * s;
-		};
-	}
-
-	function buildClearGlow(text: string, isDark: boolean) {
-		if (!clearInput || !clearWrap) return "";
-		const ctx = document.createElement("canvas").getContext("2d");
-		if (!ctx) return "";
-		ctx.font = getComputedStyle(clearInput).font;
-		const rgb = isDark ? "255,255,255" : "0,0,0";
-		const w = clearWrap.clientWidth || 280;
-		const padLeft = parseFloat(getComputedStyle(clearInput).paddingLeft) || 12;
-		const spread = cssNum("--glow-spread", 1.5);
-		const layers: string[] = [];
-		let x = 0;
-		text.split(/(\s+)/).forEach((seg) => {
-			const segW = ctx.measureText(seg).width;
-			if (seg.trim()) {
-				const cx = padLeft + x + segW / 2;
-				const hw = Math.max(segW * 0.45, 8) * spread;
-				(
-					[
-						[0, 0.8, 7, 0.22],
-						[hw * 0.45, 0.55, 8, 0.18],
-						[-hw * 0.4, 0.65, 6, 0.16],
-						[hw * 0.15, 0.9, 5, 0.14],
-					] as const
-				).forEach(([dx, rwm, rh, a]) => {
-					const lx = (((cx + dx) / w) * 100).toFixed(2);
-					layers.push(
-						`radial-gradient(ellipse ${Math.max(hw * rwm, 2).toFixed(1)}px ${rh}px at ${lx}% 100%, rgba(${rgb},${a}), transparent)`,
-					);
-				});
-			}
-			x += segW;
-		});
-		return layers.join(", ");
-	}
-
-	function triggerClear() {
-		if (clearBusy || !clearWrap || !clearInput || !clearMirror || !clearPhold || !clearGlow) return;
-		// Repeatable demo: an empty field refills instantly instead of clearing.
-		if (!clearInput.value) {
-			clearInput.value = CLEAR_TEXT;
-			clearMirror.textContent = CLEAR_TEXT;
-			clearWrap.classList.add("has-value");
-			return;
-		}
-		clearBusy = true;
-		const isDark = !document.documentElement.classList.contains("light");
-		const total = cssNum("--clear-dur", 1000);
-		const outDur = cssNum("--clear-out-dur", 400);
-		const inDur = cssNum("--clear-in-dur", 400);
-		const outFly = cssNum("--clear-out-fly", 12);
-		const inFly = cssNum("--clear-in-fly", 12);
-		const blur = cssNum("--clear-blur", 2);
-		const delay = cssNum("--glow-delay", 50);
-		const peakAt = cssNum("--glow-peak-at", 0.15);
-		const gOp = isDark ? 0.85 : cssNum("--glow-opacity", 0.42);
-		const cs = getComputedStyle(document.documentElement);
-		const easeOut = cubicBezier(cs.getPropertyValue("--clear-out-ease"));
-		const easeIn = cubicBezier(cs.getPropertyValue("--clear-in-ease"));
-
-		const text = clearInput.value;
-		clearMirror.textContent = text;
-		clearInput.value = "";
-		clearWrap.classList.remove("has-value");
-		clearWrap.classList.add("is-clearing");
-		clearGlow.style.mixBlendMode = isDark ? "screen" : "multiply";
-		clearGlow.style.background = buildClearGlow(text, isDark);
-		clearGlow.style.opacity = "0";
-		clearPhold.style.transform = `translateY(-${inFly}px)`;
-		clearPhold.style.opacity = "0.9";
-		clearPhold.style.filter = `blur(${blur}px)`;
-
-		const start = performance.now();
-		const tick = (now: number) => {
-			if (!clearWrap || !clearMirror || !clearPhold || !clearGlow) return;
-			const el = now - start;
-			const eo = easeOut(Math.min(1, el / outDur));
-			clearMirror.style.transform = `translateY(${(eo * outFly).toFixed(1)}px)`;
-			clearMirror.style.opacity = (1 - eo).toFixed(3);
-			clearMirror.style.filter = `blur(${(eo * blur).toFixed(1)}px)`;
-
-			const ei = easeIn(Math.min(1, el / inDur));
-			clearPhold.style.transform = `translateY(${(-inFly + ei * inFly).toFixed(1)}px)`;
-			clearPhold.style.opacity = (0.9 + ei * 0.1).toFixed(3);
-			clearPhold.style.filter = `blur(${(blur - ei * blur).toFixed(1)}px)`;
-
-			let g = 0;
-			if (el > delay) {
-				const gp = Math.min(1, (el - delay) / Math.max(1, total - delay));
-				g = gp < peakAt ? gp / peakAt : 1 - (gp - peakAt) / (1 - peakAt);
-			}
-			clearGlow.style.opacity = (g * gOp).toFixed(3);
-
-			if (el < total) {
-				requestAnimationFrame(tick);
-			} else {
-				clearWrap.classList.remove("is-clearing");
-				clearMirror.style.cssText = "";
-				clearPhold.style.cssText = "";
-				clearMirror.textContent = "";
-				clearGlow.style.opacity = "0";
-				clearGlow.style.background = "";
-				clearBusy = false;
-			}
-		};
-		requestAnimationFrame(tick);
-	}
-
-	function replaySkeleton() {
-		if (!skelEl || !skelSkeleton) return;
-		skelEl.classList.add("is-resetting");
-		skelEl.classList.remove("is-revealed");
-		skelSkeleton.classList.remove("is-pulsing");
-		void skelSkeleton.offsetWidth;
-		skelEl.classList.remove("is-resetting");
-		skelSkeleton.classList.add("is-pulsing");
-		const total = cssNum("--pulse-dur", 1000) * cssNum("--pulse-count", 1);
-		setTimeout(() => skelEl?.classList.add("is-revealed"), total);
-	}
-
-	function positionTabsPill(animate: boolean) {
-		if (!tabsBar || !tabsPill) return;
-		const tab = tabsBar.querySelectorAll(".t-tab")[activeTab];
-		if (!tab) return;
-		if (animate) {
-			tabsPill.style.transform = `translateX(${tab.offsetLeft}px)`;
-			tabsPill.style.width = `${tab.offsetWidth}px`;
-		} else {
-			const prev = tabsPill.style.transition;
-			tabsPill.style.transition = "none";
-			tabsPill.style.transform = `translateX(${tab.offsetLeft}px)`;
-			tabsPill.style.width = `${tab.offsetWidth}px`;
-			void tabsPill.offsetWidth;
-			tabsPill.style.transition = prev;
-		}
-	}
-
-	function selectTab(i: number) {
-		activeTab = i;
-		positionTabsPill(true);
-	}
-
-	function replayStagger() {
-		if (!staggerEl) return;
-		staggerEl.classList.remove("is-hiding");
-		staggerEl.classList.remove("is-shown");
-		void staggerEl.offsetHeight;
-		staggerEl.classList.add("is-shown");
-	}
-
-	// =========================
-	// THE NINE THE SECTION USED TO SKIP
-	// =========================
-	// Four are pure CSS. The rest carry the small JS each upstream usage note
-	// calls for; the markup follows `.upstream/transitions/<slug>.css`.
-	let accOpen = $state(true);
-	let morphOpen = $state(false);
-	let liked = $state(false);
-	let bursting = $state(false);
-
-	let tiltEl = null;
-	let tiltCard = null;
-	let reelEl = null;
-	let streamEl = null;
-	let reasonScroll = null;
-	let thinkEl = null;
-
-	const STREAM_TEXT =
-		"The parser reads the diff, keeps the hunks it can apply, and hands the rest back with a reason.";
-	const THINK_STATES = ["Thinking...", "Reading the repository...", "Drafting the patch..."];
-	const REASON_LINES = [
-		"Checking the lockfile for a version that moved.",
-		"Two primitives changed upstream since the last sync.",
-		"One of them is retuned here, so it stays ours.",
-		"Writing the other and formatting what landed.",
-	];
-
-	function tiltMove(event: PointerEvent) {
-		const rect = tiltEl.getBoundingClientRect();
-		const x = (event.clientX - rect.left) / rect.width;
-		const y = (event.clientY - rect.top) / rect.height;
-		tiltCard.classList.add("is-tilting");
-		tiltEl.classList.add("is-hover");
-		tiltEl.style.setProperty("--tilt-rx", `${(0.5 - y) * 14}deg`);
-		tiltEl.style.setProperty("--tilt-ry", `${(x - 0.5) * 14}deg`);
-		tiltEl.style.setProperty("--tilt-gx", `${x * 100}%`);
-		tiltEl.style.setProperty("--tilt-gy", `${y * 100}%`);
-	}
-
-	function tiltLeave() {
-		tiltCard.classList.remove("is-tilting");
-		tiltEl.classList.remove("is-hover");
-		tiltEl.style.setProperty("--tilt-rx", "0deg");
-		tiltEl.style.setProperty("--tilt-ry", "0deg");
-	}
-
-	// A spray nobody can predict: every dot takes its own angle, distance and
-	// clock, which is what keeps two likes from looking like one animation.
-	function toggleLike(event: MouseEvent) {
-		liked = !liked;
-		if (!liked) return;
-		const root = event.currentTarget as HTMLElement;
-		for (const dot of root.querySelectorAll<HTMLElement>(".t-like-particles i")) {
-			const angle = Math.random() * Math.PI * 2;
-			const dist = 14 + Math.random() * 14;
-			dot.style.setProperty("--px", `${Math.cos(angle) * dist}px`);
-			dot.style.setProperty("--py", `${Math.sin(angle) * dist}px`);
-			dot.style.setProperty("--pdur", `${480 + Math.random() * 240}ms`);
-			dot.style.setProperty("--pdelay", `${Math.random() * 60}ms`);
-			dot.style.setProperty("--psize", `${0.7 + Math.random() * 0.8}`);
-		}
-		bursting = false;
-		void root.offsetHeight;
-		bursting = true;
-		setTimeout(() => (bursting = false), 700);
-	}
-
-	/** One column per digit, each clipping a 0-9 strip it spins past. */
-	function spinReel(value = "482") {
-		reelEl.replaceChildren();
-		value.split("").forEach((digit, index) => {
-			const col = document.createElement("div");
-			col.className = "t-reel-col";
-			const strip = document.createElement("div");
-			strip.className = "t-reel-strip";
-			for (let n = 0; n < 30; n++) {
-				const cell = document.createElement("div");
-				cell.className = "t-reel-digit";
-				cell.textContent = String(n % 10);
-				strip.append(cell);
-			}
-			col.append(strip);
-			reelEl.append(col);
-			const cells = 20 + Number(digit);
-			strip.style.transform = "translateY(0)";
-			strip.style.filter = "blur(0px)";
-			void strip.offsetHeight;
-			strip.style.transition = `transform var(--reel-dur) var(--reel-ease) ${index * 90}ms, filter var(--reel-dur) linear ${index * 90}ms`;
-			strip.style.transform = `translateY(calc(var(--reel-cell) * -${cells}))`;
-		});
-	}
-
-	/** Wrap each word once, then let them in one --stream-gap apart. */
-	function replayStream() {
-		const words = streamEl.querySelectorAll<HTMLElement>(".t-stream-w");
-		for (const word of words) {
-			word.style.transition = "none";
-			word.classList.remove("is-in");
-		}
-		void streamEl.offsetHeight;
-		words.forEach((word, index) => {
-			word.style.transition = "";
-			setTimeout(() => word.classList.add("is-in"), index * 60);
-		});
-	}
-
-	// The two that run on their own: a transcript stepping up while a model
-	// thinks, and the line under it swapping state.
-	$effect(() => {
-		if (!reasonScroll || !thinkEl) return;
-		replayStream();
-		spinReel();
-
-		let offset = 0;
-		const step = setInterval(() => {
-			offset = (offset + 2) % REASON_LINES.length;
-			reasonScroll.style.transition = "transform var(--reason-step) var(--reason-ease)";
-			reasonScroll.style.transform = `translateY(calc(var(--reason-line) * -${offset}))`;
-		}, 840);
-
-		let state = 0;
-		const swap = setInterval(() => {
-			state = (state + 1) % THINK_STATES.length;
-			thinkEl.classList.add("is-exit");
-			setTimeout(() => {
-				thinkEl.textContent = THINK_STATES[state];
-				thinkEl.dataset.text = THINK_STATES[state];
-				thinkEl.classList.remove("is-exit");
-				thinkEl.classList.add("is-enter-start");
-				void thinkEl.offsetHeight;
-				thinkEl.classList.remove("is-enter-start");
-			}, 200);
-		}, 2000);
-
-		return () => {
-			clearInterval(step);
-			clearInterval(swap);
-		};
-	});
-</script>
-
-<!-- ========================== -->
-<!-- MARKUP                     -->
-<!-- ========================== -->
-<div class="grid">
-	<ShowcaseStage
-		title="Text states swap"
-		note="Text swap with translate and blur"
-		importPath={"import { swapText } from '@heyramzi/ui/animations/text-swap';"}
-		onaction={nextPhrase}
-	>
-		<span bind:this={target} class="phrase">{phrases[0]}</span>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Number pop-in"
-		note="Digit flip with blur and stagger"
-		importPath={"import '@heyramzi/ui/animations/digit-pop-in.css';"}
-		onaction={replayDigits}
-	>
-		<span
-			bind:this={digitGroup}
-			class="t-digit-group digit-display"
-			class:is-animating={digitAnimating}
-		>
-			{#each digitValue.split("") as ch, i (i + ch)}
-				<span class="t-digit" data-stagger={i}>{ch}</span>
-			{/each}
-		</span>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Card resize"
-		note="Smooth width and height transition"
-		importPath={"import '@heyramzi/ui/animations/resize.css';"}
-		onaction={() => (resizeSmall = !resizeSmall)}
-	>
-		<div class="t-resize sk-card" class:is-small={resizeSmall}>
-			<span class="sk sk-1"></span>
-			<span class="sk sk-2"></span>
-			<span class="sk sk-3"></span>
-			<span class="sk sk-4"></span>
-			<span class="sk sk-5"></span>
-			<span class="sk sk-6"></span>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Notification badge"
-		note="Diagonal slide with spring pop-in"
-		importPath={"import '@heyramzi/ui/animations/notification-badge.css';"}
-		onaction={bumpBadge}
-	>
-		<button type="button" class="bell-trigger" onclick={bumpBadge} aria-label="Notifications">
-			<Bell class="size-5" />
-			<span class="t-badge" data-open={badgeOpen ? "true" : "false"}>
-				<span class="t-badge-dot">{badgeCount}</span>
-			</span>
-		</button>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Modal open / close"
-		note="Scale and blur transition"
-		importPath={"import '@heyramzi/ui/animations/modal.css';"}
-		onaction={() => (modalOpen = !modalOpen)}
-	>
-		<div class="t-modal sk-modal" class:is-open={modalOpen}>
-			<div class="sk sk-mtitle"></div>
-			<div class="sk sk-mclose"></div>
-			<div class="sk sk-line full"></div>
-			<div class="sk sk-line full"></div>
-			<div class="sk sk-line three-q"></div>
-			<div class="sk-pills">
-				<div class="sk sk-pill"></div>
-				<div class="sk sk-pill"></div>
-			</div>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Menu dropdown"
-		note="Origin-aware open and close"
-		importPath={"import '@heyramzi/ui/animations/dropdown.css';"}
-		onaction={() => (dropdownOpen = !dropdownOpen)}
-	>
-		<div class="dropdown-stack">
-			<div class="sk-trigger"></div>
-			<div class="t-dropdown sk-dropdown" class:is-open={dropdownOpen}>
-				<div class="sk sk-row full"></div>
-				<div class="sk sk-row three-q"></div>
-				<div class="sk sk-row half"></div>
-			</div>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Panel reveal"
-		note="Translate and blur entrance"
-		importPath={"import '@heyramzi/ui/animations/panel.css';"}
-		onaction={() => (panelOpen = !panelOpen)}
-	>
-		<div class="panel-clip">
-			<div class="t-panel-slide sk-panel" data-open={panelOpen ? "true" : "false"}>
-				<div class="sk sk-line full"></div>
-				<div class="sk sk-line three-q"></div>
-				<div class="sk-tiles">
-					<div class="sk sk-tile"></div>
-					<div class="sk sk-tile"></div>
-					<div class="sk sk-tile"></div>
-					<div class="sk sk-tile"></div>
-				</div>
-			</div>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Page side-by-side"
-		note="Forward and back page slide"
-		importPath={"import '@heyramzi/ui/animations/page-side-by-side.css';"}
-		actionLabel={activePage === "1" ? "Next" : "Back"}
-		onaction={togglePage}
-	>
-		<div class="t-page-slide sk-page-stage" data-page={activePage}>
-			<section class="t-page sk-page" data-page-id="1">
-				<div class="sk sk-row full"></div>
-				<div class="sk sk-row three-q"></div>
-				<div class="sk sk-row half"></div>
-			</section>
-			<section class="t-page sk-page sk-page-2" data-page-id="2">
-				<div class="sk-amount">$10</div>
-				<div class="sk-pill-row">
-					<div class="sk sk-mini-pill"></div>
-					<div class="sk sk-mini-pill"></div>
-					<div class="sk sk-mini-pill"></div>
-				</div>
-			</section>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Icon swap"
-		note="Crossfade with blur between icons"
-		importPath={"import '@heyramzi/ui/animations/icon-swap.css';"}
-		onaction={() => (iconState = iconState === "a" ? "b" : "a")}
-	>
-		<div class="t-icon-swap icon-stack" data-state={iconState}>
-			<div class="t-icon" data-icon="a"><Menu class="size-7" /></div>
-			<div class="t-icon" data-icon="b"><X class="size-7" /></div>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Success check"
-		note="Fade, rotate, bob, and stroke draw"
-		importPath={"import '@heyramzi/ui/animations/success-check.css';"}
-		onaction={replayCheck}
-	>
-		<div class="check-badge">
-			<span bind:this={checkEl} class="t-success-check" data-state="in" aria-hidden="true">
-				{@html successCheck}
-			</span>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Avatar group hover"
-		note="Distance falloff lift with spring return"
-		importPath={"import '@heyramzi/ui/animations/avatar-group-hover.css';"}
-	>
-		<div
-			bind:this={avatarRoot}
-			class="t-avatar-group avatar-row"
-			role="group"
-			aria-label="Team"
-			onmouseleave={() => liftAvatars(null)}
-		>
-			{#each avatars as person, i (person.initials)}
-				<div
-					class="t-avatar avatar-chip"
-					style="z-index: {avatars.length -
-						i}; background: linear-gradient(145deg, hsl({person.hue} 52% 52%), hsl({person.hue} 56% 38%)); color: #fff;"
-					onmouseenter={() => liftAvatars(i)}
-				>
-					{person.initials}
-				</div>
-			{/each}
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Error state shake"
-		note="Percussive shake with auto-revert"
-		importPath={"import '@heyramzi/ui/animations/input-shake.css';"}
-		actionLabel="Submit"
-		onaction={showError}
-	>
-		<div bind:this={shakeWrap} class="t-input-wrap shake-wrap">
-			<div bind:this={shakeInput} class="t-input shake-input">name@email</div>
-			<p class="t-error-msg shake-msg">Enter a valid email address.</p>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Input clear"
-		note="Fly-out text with per-word streak"
-		importPath={"import '@heyramzi/ui/animations/input-clear-dissolve.css';"}
-		actionLabel="Clear"
-		onaction={triggerClear}
-	>
-		<div bind:this={clearWrap} class="t-clear clear-field has-value">
-			<input
-				bind:this={clearInput}
-				class="clear-input"
-				type="text"
-				value={CLEAR_TEXT}
-				readonly
-				aria-label="Search"
-			/>
-			<div bind:this={clearMirror} class="t-clear-mirror clear-text" aria-hidden="true">
-				{CLEAR_TEXT}
-			</div>
-			<div
-				bind:this={clearPhold}
-				class="t-clear-placeholder clear-text clear-ph"
-				aria-hidden="true"
-			>
-				Search
-			</div>
-			<div bind:this={clearGlow} class="t-clear-glow" aria-hidden="true"></div>
-			<button type="button" class="t-clear-btn clear-x" onclick={triggerClear} aria-label="Clear">
-				<X class="size-3.5" />
-			</button>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Skeleton loader"
-		note="Pulse, then cross-blur to content"
-		importPath={"import '@heyramzi/ui/animations/skeleton-reveal.css';"}
-		actionLabel="Reload"
-		onaction={replaySkeleton}
-	>
-		<div bind:this={skelEl} class="t-skel skel-card is-revealed">
-			<div bind:this={skelSkeleton} class="t-skel-skeleton skel-layer">
-				<span class="sk skel-avatar"></span>
-				<span class="skel-bars">
-					<span class="sk skel-l1"></span>
-					<span class="sk skel-l2"></span>
-				</span>
-			</div>
-			<div class="t-skel-content skel-layer">
-				<div class="skel-avatar-real">R</div>
-				<div class="skel-lines">
-					<div class="skel-name">Ramzi K.</div>
-					<div class="skel-sub">Shipped 14 routes</div>
-				</div>
-			</div>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Shimmer text"
-		note="Sweeping highlight on a loop"
-		importPath={"import '@heyramzi/ui/animations/shimmer-text.css';"}
-	>
-		<span class="t-shimmer shimmer-demo" data-text="Generating response">Generating response</span>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Tabs sliding"
-		note="Active pill slides between options"
-		importPath={"import '@heyramzi/ui/animations/tabs-sliding.css';"}
-	>
-		<div bind:this={tabsBar} class="t-tabs tabs-demo" role="tablist" aria-label="View">
-			<span bind:this={tabsPill} class="t-tabs-pill" aria-hidden="true"></span>
-			{#each tabs as label, i (label)}
-				<button
-					type="button"
-					class="t-tab"
-					role="tab"
-					aria-selected={i === activeTab}
-					onclick={() => selectTab(i)}
-				>
-					{label}
-				</button>
-			{/each}
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Tooltip"
-		note="Delayed fade-in, instant out"
-		importPath={"import '@heyramzi/ui/animations/tooltip.css';"}
-	>
-		<span class="t-tt-wrap tt-demo">
-			<button type="button" class="t-tt-trigger tt-trigger" aria-describedby="tt-anim">
-				<Info class="size-5" />
-			</button>
-			<span class="t-tt tt-bubble" id="tt-anim" role="tooltip">Keyboard shortcuts</span>
-		</span>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Texts reveal"
-		note="Staggered blurred rise"
-		importPath={"import '@heyramzi/ui/animations/texts-reveal.css';"}
-		actionLabel="Replay"
-		onaction={replayStagger}
-	>
-		<div bind:this={staggerEl} class="t-stagger stagger-demo is-shown">
-			<strong class="t-stagger-line t-stagger-line--1 stagger-head">Ship with rhythm</strong>
-			<span class="t-stagger-line t-stagger-line--2 stagger-sub"
-				>Headline first, the rest follows.</span
-			>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Accordion"
-		note="Grid-row expand, no measured height"
-		importPath={"import '@heyramzi/ui/animations/accordion.css';"}
-	>
-		<div class="t-acc acc-demo" data-open={accOpen ? "true" : "false"}>
-			<button
-				type="button"
-				class="t-acc-head acc-head"
-				aria-expanded={accOpen}
-				onclick={() => (accOpen = !accOpen)}
-			>
-				Shipping details
-				<span class="t-acc-chevron">
-					{@html chevronDown}
-				</span>
-			</button>
-			<div class="t-acc-panel">
-				<div class="t-acc-panel-inner">
-					<p class="acc-body">
-						Standard delivery takes three to five days. Express arrives the next morning, tracked
-						end to end.
-					</p>
-				</div>
-			</div>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Card tilt"
-		note="Pointer-tracked 3D tilt with a glare"
-		importPath={"import '@heyramzi/ui/animations/card-tilt.css';"}
-	>
-		<div bind:this={tiltEl} class="t-tilt" onpointermove={tiltMove} onpointerleave={tiltLeave}>
-			<div bind:this={tiltCard} class="t-tilt-card tilt-card">
-				<strong>Pro</strong>
-				<span class="tilt-price">39 EUR</span>
-				<span class="tilt-note">Move the pointer across the card.</span>
-				<div class="t-tilt-glare"></div>
-			</div>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Learn more hover"
-		note="Chevron shifts, its arms open"
-		importPath={"import '@heyramzi/ui/animations/learn-more-hover.css';"}
-	>
-		<button type="button" class="t-learn learn-demo">
-			Learn more
-			<span class="t-learn-chevron">
-				{@html chevronArms}
-			</span>
-		</button>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Like button"
-		note="Heart fills, particles spray"
-		importPath={"import '@heyramzi/ui/animations/like-button.css';"}
-	>
-		<button
-			type="button"
-			class="t-like like-demo"
-			class:is-bursting={bursting}
-			data-liked={liked ? "true" : "false"}
-			aria-pressed={liked}
-			onclick={toggleLike}
-		>
-			<span class="t-like-icon">
-				{@html heart}
-			</span>
-			<span class="t-like-particles" aria-hidden="true">
-				{#each { length: 8 } as _, i (i)}
-					<i></i>
-				{/each}
-			</span>
-			Like
-		</button>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Plus menu morph"
-		note="The button becomes the surface"
-		importPath={"import '@heyramzi/ui/animations/plus-menu-morph.css';"}
-	>
-		<div class="morph-anchor">
-			<div class="t-morph morph-demo" data-open={morphOpen ? "true" : "false"}>
-				<div class="t-morph-menu morph-menu">
-					<span>Duplicate</span>
-					<span>Move to...</span>
-					<span>Archive</span>
-				</div>
-				<button
-					type="button"
-					class="t-morph-plus morph-plus"
-					aria-expanded={morphOpen}
-					aria-label={morphOpen ? "Close menu" : "Open menu"}
-					onclick={() => (morphOpen = !morphOpen)}
-				>
-					{@html plus}
-				</button>
-			</div>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Spinning counter"
-		note="One reel per digit, staggered landing"
-		importPath={"import '@heyramzi/ui/animations/spinning-counter.css';"}
-		onaction={() => spinReel(String(100 + Math.floor(Math.random() * 900)))}
-	>
-		<div bind:this={reelEl} class="t-reel reel-demo"></div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Streaming text"
-		note="Word by word, opacity and blur"
-		importPath={"import '@heyramzi/ui/animations/streaming-text.css';"}
-		onaction={replayStream}
-	>
-		<p bind:this={streamEl} class="stream-demo">
-			{#each STREAM_TEXT.split(" ") as word, i (i)}
-				<span class="t-stream-w">{word}&nbsp;</span>
-			{/each}
-		</p>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Reasoning stream"
-		note="A transcript stepping under a mask"
-		importPath={"import '@heyramzi/ui/animations/reasoning-stream.css';"}
-	>
-		<div class="t-reason reason-demo">
-			<div class="t-reason-viewport">
-				<div bind:this={reasonScroll} class="t-reason-scroll">
-					{#each [...REASON_LINES, ...REASON_LINES] as line, i (i)}
-						<p class="reason-line">{line}</p>
-					{/each}
-				</div>
-			</div>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Thinking states"
-		note="Shimmering line, swapped on a hold"
-		importPath={"import '@heyramzi/ui/animations/thinking-states.css';"}
-	>
-		<span class="t-think think-demo" role="status">
-			<span class="t-think-sizer" aria-hidden="true">Reading the repository...</span>
-			<span bind:this={thinkEl} class="t-think-text" data-text="Thinking...">Thinking...</span>
-		</span>
-	</ShowcaseStage>
-</div>
-
-<!-- ========================== -->
-<!-- STYLE                      -->
-<!-- ========================== -->
-<style>
-	/* One demo per row, the rule ShowcaseSection states for `.sc-stack`. An
-	   animation is read by watching it run, and a third-width stage clips it. */
-	.grid {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		gap: 1rem;
-
-		/* transitions.dev demo material mapped onto host tokens. Nothing defined
-		   the names, so eleven of eighteen drew transparent until 10 Sep 2026.
-		   Every value reads the app palette. */
-		--td-material-bg: var(--color-card, var(--card));
-		--td-material-shadow:
-			0 0 0 1px color-mix(in oklab, var(--color-border, var(--border)) 80%, transparent),
-			0 6px 18px -8px
-				color-mix(in oklab, var(--color-foreground, var(--foreground)) 22%, transparent);
-		--td-skeleton: color-mix(
-			in oklab,
-			var(--color-muted-foreground, var(--muted-foreground)) 22%,
-			transparent
-		);
-		--td-stage-bg: var(--color-background, var(--background));
-		--td-text: var(--color-foreground, var(--foreground));
-		--td-text-subtle: var(--color-muted-foreground, var(--muted-foreground));
-		--td-icon-color: var(--color-foreground, var(--foreground));
-		--td-icon-color-muted: var(--color-muted-foreground, var(--muted-foreground));
-		--td-copy-bg: color-mix(in oklab, var(--color-muted, var(--muted)) 80%, transparent);
-		--td-copy-bg-hover: var(--color-muted, var(--muted));
-	}
-
-	.sk {
-		background: var(--td-skeleton);
-		border-radius: 4px;
-	}
-
-	.phrase {
-		font-size: 1.0625rem;
-		font-weight: 500;
-		color: var(--td-text, var(--foreground));
-		--text-swap-dur: 240ms;
-	}
-
-	.digit-display {
-		font-size: 2.25rem;
-		font-weight: 600;
-		font-family: ui-monospace, SFMono-Regular, monospace;
-		color: var(--td-text, var(--foreground));
-		font-feature-settings: "tnum";
-		letter-spacing: -0.02em;
-	}
-
-	.sk-card {
-		position: relative;
-		width: 12.5rem;
-		height: 8.75rem;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		border-radius: 12px;
-		/* WHY: clip the skeleton lines so they don't spill past the card edge as it shrinks */
-		overflow: hidden;
-	}
-	.sk-card.is-small {
-		width: 9rem;
-		height: 6rem;
-	}
-	.sk-card .sk {
-		position: absolute;
-		left: 14px;
-		right: 14px;
-	}
-	.sk-card .sk-1 {
-		top: 16px;
-		height: 10px;
-		right: auto;
-		width: 56%;
-	}
-	.sk-card .sk-2 {
-		top: 32px;
-		height: 6px;
-	}
-	.sk-card .sk-3 {
-		top: 44px;
-		height: 6px;
-	}
-	.sk-card .sk-4 {
-		top: 56px;
-		height: 6px;
-		right: auto;
-		width: 70%;
-	}
-	.sk-card .sk-5 {
-		top: 84px;
-		height: 6px;
-	}
-	.sk-card .sk-6 {
-		top: 96px;
-		height: 6px;
-	}
-
-	.bell-trigger {
-		position: relative;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 3rem;
-		height: 3rem;
-		border-radius: 12px;
-		border: 0;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		color: var(--td-icon-color, var(--foreground));
-		cursor: pointer;
-	}
-	.bell-trigger:hover {
-		filter: brightness(1.05);
-	}
-	:global(.bell-trigger .t-badge-dot) {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 1.125rem;
-		height: 1.125rem;
-		padding: 0 0.3125rem;
-		font-size: 0.6875rem;
-		font-weight: 600;
-		color: var(--primary-foreground);
-		background: var(--primary);
-		border-radius: 999px;
-		line-height: 1;
-	}
-
-	.sk-modal {
-		position: relative;
-		width: 16rem;
-		height: 10rem;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		border: 0;
-		border-radius: 12px;
-		padding: 1rem;
-		display: flex;
-		flex-direction: column;
-		gap: 0.4375rem;
-	}
-	.sk-modal .sk-mtitle {
-		width: 60%;
-		height: 12px;
-	}
-	.sk-modal .sk-mclose {
-		position: absolute;
-		top: 0.875rem;
-		right: 0.875rem;
-		width: 14px;
-		height: 14px;
-		border-radius: 50%;
-	}
-	.sk-modal .sk-line {
-		height: 8px;
-	}
-	.sk-modal .sk-line.full {
-		width: 100%;
-	}
-	.sk-modal .sk-line.three-q {
-		width: 75%;
-	}
-	.sk-modal .sk-pills {
-		margin-top: auto;
-		display: flex;
-		gap: 0.5rem;
-	}
-	.sk-modal .sk-pill {
-		width: 4.25rem;
-		height: 1.375rem;
-		border-radius: 999px;
-	}
-
-	.dropdown-stack {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0.5rem;
-	}
-	.sk-trigger {
-		width: 7rem;
-		height: 2rem;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		border-radius: 8px;
-	}
-	.sk-dropdown {
-		width: 11rem;
-		padding: 0.625rem;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		border: 0;
-		border-radius: 10px;
-		display: flex;
-		flex-direction: column;
-		gap: 0.4375rem;
-	}
-	.sk-dropdown .sk-row {
-		height: 9px;
-	}
-	.sk-dropdown .sk-row.full {
-		width: 100%;
-	}
-	.sk-dropdown .sk-row.three-q {
-		width: 75%;
-	}
-	.sk-dropdown .sk-row.half {
-		width: 50%;
-	}
-
-	.panel-clip {
-		width: 100%;
-		max-width: 16rem;
-		height: 9rem;
-		overflow: hidden;
-		border-radius: 12px;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-	}
-	.sk-panel {
-		padding: 0.875rem;
-		display: flex;
-		flex-direction: column;
-		gap: 0.625rem;
-	}
-	.sk-panel .sk-line {
-		height: 9px;
-	}
-	.sk-panel .sk-line.full {
-		width: 100%;
-	}
-	.sk-panel .sk-line.three-q {
-		width: 75%;
-	}
-	.sk-panel .sk-tiles {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		gap: 0.5rem;
-		margin-top: 0.25rem;
-	}
-	.sk-panel .sk-tile {
-		height: 2.25rem;
-	}
-
-	.sk-page-stage {
-		position: relative;
-		width: 16rem;
-		height: 10rem;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		border-radius: 12px;
-		overflow: hidden;
-	}
-	.sk-page {
-		padding: 1rem;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-	.sk-page .sk-row {
-		height: 10px;
-	}
-	.sk-page .sk-row.full {
-		width: 100%;
-	}
-	.sk-page .sk-row.three-q {
-		width: 75%;
-	}
-	.sk-page .sk-row.half {
-		width: 50%;
-	}
-	.sk-page-2 {
-		align-items: center;
-		justify-content: center;
-		gap: 0.625rem;
-	}
-	.sk-amount {
-		font-size: 2rem;
-		font-weight: 600;
-		color: var(--td-text, var(--foreground));
-		font-family: ui-monospace, SFMono-Regular, monospace;
-	}
-	.sk-pill-row {
-		display: flex;
-		gap: 0.375rem;
-	}
-	.sk-mini-pill {
-		width: 2.5rem;
-		height: 1.25rem;
-		border-radius: 999px;
-	}
-
-	.icon-stack {
-		display: inline-grid;
-		place-items: center;
-		width: 3.5rem;
-		height: 3.5rem;
-		border-radius: 12px;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		color: var(--td-icon-color, var(--foreground));
-		--icon-swap-dur: 220ms;
-	}
-	.icon-stack :global(.t-icon) {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.check-badge {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 4rem;
-		height: 4rem;
-		border-radius: 50%;
-		background: oklch(0.66 0.16 155);
-		color: #fff;
-	}
-	.check-badge :global(.t-success-check svg) {
-		width: 2.25rem;
-		height: 2.25rem;
-	}
-
-	.avatar-row {
-		display: inline-flex;
-	}
-	.avatar-chip {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 2.75rem;
-		height: 2.75rem;
-		margin-left: -0.625rem;
-		border-radius: 50%;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		border: 2px solid var(--td-stage-bg);
-		color: var(--td-text);
-		font-size: 0.875rem;
-		font-weight: 600;
-		cursor: default;
-	}
-	.avatar-chip:first-child {
-		margin-left: 0;
-	}
-
-	.shake-wrap {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		width: 13rem;
-	}
-	.shake-input {
-		display: flex;
-		align-items: center;
-		height: 2.5rem;
-		padding: 0 0.75rem;
-		border: 1.5px solid var(--border);
-		border-radius: 8px;
-		background: var(--td-material-bg);
-		color: var(--td-text-subtle);
-		font-size: 0.875rem;
-	}
-	.shake-input.is-error {
-		border-color: var(--destructive);
-	}
-	.shake-msg {
-		margin: 0;
-		font-size: 0.75rem;
-		color: var(--destructive);
-	}
-
-	.clear-field {
-		width: 14rem;
-		height: 2.75rem;
-		border-radius: 10px;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-	}
-	.clear-input {
-		width: 100%;
-		height: 100%;
-		padding: 0 2.25rem 0 0.75rem;
-		border: 0;
-		background: transparent;
-		outline: none;
-		font: inherit;
-		font-size: 0.9375rem;
-		color: var(--td-text);
-	}
-	.clear-text {
-		padding-left: 0.75rem;
-		font-size: 0.9375rem;
-		color: var(--td-text);
-	}
-	.clear-ph {
-		color: var(--td-text-subtle);
-	}
-	.clear-x {
-		position: absolute;
-		top: 50%;
-		right: 0.5rem;
-		transform: translateY(-50%);
-		z-index: 4;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 1.5rem;
-		height: 1.5rem;
-		border: 0;
-		border-radius: 50%;
-		background: var(--td-copy-bg);
-		color: var(--td-icon-color-muted);
-		cursor: pointer;
-	}
-	.clear-x:hover {
-		background: var(--td-copy-bg-hover);
-		color: var(--td-icon-color);
-	}
-
-	.skel-card {
-		width: 14rem;
-		height: 4.5rem;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		border-radius: 12px;
-	}
-	.skel-layer {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		padding: 0 1rem;
-	}
-	.skel-avatar {
-		flex: none;
-		width: 2.5rem;
-		height: 2.5rem;
-		border-radius: 50%;
-	}
-	.skel-bars {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-	.skel-l1 {
-		width: 6rem;
-		height: 9px;
-	}
-	.skel-l2 {
-		width: 4rem;
-		height: 9px;
-	}
-	.skel-avatar-real {
-		flex: none;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 2.5rem;
-		height: 2.5rem;
-		border-radius: 50%;
-		background: var(--primary);
-		color: var(--primary-foreground);
-		font-size: 0.875rem;
-		font-weight: 600;
-	}
-	.skel-lines {
-		display: flex;
-		flex-direction: column;
-		gap: 0.125rem;
-	}
-	.skel-name {
-		font-size: 0.875rem;
-		font-weight: 600;
-		color: var(--td-text);
-	}
-	.skel-sub {
-		font-size: 0.75rem;
-		color: var(--td-text-subtle);
-	}
-
-	.shimmer-demo {
-		font-size: 1.125rem;
-		font-weight: 500;
-		--shimmer-base: var(--td-text-subtle);
-		--shimmer-highlight: var(--td-text);
-	}
-
-	.tabs-demo {
-		font-size: 0.8125rem;
-		font-weight: 500;
-		--tabs-bar-bg: color-mix(in srgb, var(--td-text) 8%, transparent);
-		--tabs-pill-bg: var(--td-material-bg);
-		--tabs-text-muted: var(--td-text-subtle);
-		--tabs-text-active: var(--td-text);
-	}
-	.tabs-demo :global(.t-tabs-pill) {
-		box-shadow: var(--td-material-shadow);
-	}
-
-	.tt-trigger {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 2.75rem;
-		height: 2.75rem;
-		border: 0;
-		border-radius: 10px;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		color: var(--td-icon-color);
-		cursor: pointer;
-	}
-	.tt-bubble {
-		font-size: 0.8125rem;
-		font-weight: 500;
-		--tt-bg: var(--td-material-bg);
-		--tt-fg: var(--td-text);
-	}
-
-	.stagger-demo {
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-		max-width: 14rem;
-		text-align: center;
-	}
-	.stagger-head {
-		font-size: 1.25rem;
-		font-weight: 600;
-		color: var(--td-text);
-		letter-spacing: -0.01em;
-	}
-	.stagger-sub {
-		font-size: 0.875rem;
-		color: var(--td-text-subtle);
-	}
-	/* ---- the nine added 14 Sep 2026 ---- */
-	.acc-demo {
-		width: min(24rem, 100%);
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		border-radius: 10px;
-	}
-
-	.acc-head {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 1rem;
-		width: 100%;
-		padding: 0.75rem 0.875rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		color: var(--td-text);
-		background: none;
-		border: 0;
-		cursor: pointer;
-	}
-
-	.acc-body {
-		margin: 0;
-		padding: 0 0.875rem 0.875rem;
-		font-size: 0.8125rem;
-		line-height: 1.55;
-		color: var(--td-text-subtle);
-	}
-
-	.tilt-card {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		width: 13rem;
-		padding: 1.125rem;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		color: var(--td-text);
-		font-size: 0.8125rem;
-	}
-
-	.tilt-price {
-		font-size: 1.5rem;
-		font-weight: 600;
-		letter-spacing: -0.02em;
-	}
-
-	.tilt-note {
-		color: var(--td-text-subtle);
-	}
-
-	.learn-demo,
-	.like-demo {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.4375rem;
-		padding: 0.5rem 0.875rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		color: var(--td-text);
-		background: var(--td-copy-bg);
-		border: 0;
-		border-radius: 8px;
-		cursor: pointer;
-	}
-
-	.like-demo {
-		position: relative;
-	}
-
-	/* The anchor is sized to the open footprint, the way the usage note asks:
-	   without it the morph grows the stage and every demo under it jumps. */
-	.morph-anchor {
-		position: relative;
-		width: 11rem;
-		height: 7.5rem;
-	}
-
-	.morph-demo {
-		position: absolute;
-		inset-block-start: 0;
-		inset-inline-start: 0;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-	}
-
-	.morph-menu {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		padding: 0.75rem 0.875rem;
-		font-size: 0.8125rem;
-		color: var(--td-text);
-	}
-
-	.morph-plus {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--td-text);
-		background: none;
-		border: 0;
-		cursor: pointer;
-	}
-
-	.reel-demo {
-		font-size: 2rem;
-		font-weight: 600;
-		font-family: ui-monospace, SFMono-Regular, monospace;
-		color: var(--td-text);
-	}
-
-	.stream-demo {
-		margin: 0;
-		max-width: 32rem;
-		font-size: 0.9375rem;
-		line-height: 1.6;
-		color: var(--td-text);
-	}
-
-	.reason-demo {
-		width: min(26rem, 100%);
-		height: 7rem;
-		padding: 0.875rem 1rem;
-		background: var(--td-material-bg);
-		box-shadow: var(--td-material-shadow);
-		border-radius: 10px;
-		--reason-line: 1.5rem;
-	}
-
-	.reason-line {
-		margin: 0;
-		height: 1.5rem;
-		font-size: 0.8125rem;
-		line-height: 1.5rem;
-		color: var(--td-text-subtle);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.think-demo {
-		font-size: 0.9375rem;
-		color: var(--td-text-subtle);
-	}
-</style>