/*
 * lith's design tokens: primitives. Raw values, prefixed --lith-: two
 * colour ramps, space, type, motion. Components never read a primitive
 * colour: they read the semantic tokens in theme.css, which carry the
 * light and the dark value (light-dark()).
 *
 * This is the bundle's first file, so it declares the order of the layers.
 */
@layer reset, tokens, theme, base, layout, components, utilities;

@font-face {
	font-family: "Pixelify Sans";
	src: url("/static/fonts/pixelify-sans.4a5633a0c9c1.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("/static/fonts/jetbrains-mono.18be452724bf.woff2") format("woff2");
	font-weight: 100 800;
	font-display: swap;
}

/* Animatable custom properties: the monolith's seam breathes through
 * --lith-seam-glow, a number from 0 (dim) to 1 (bright). */
@property --lith-seam-glow {
	syntax: "<number>";
	inherits: true;
	initial-value: 0.7;
}

@property --lith-sweep {
	syntax: "<percentage>";
	inherits: false;
	initial-value: -30%;
}

@layer tokens {
	:root {
		/* Stone: warm neutral greys, hue 60 to 80. 0 is the lightest. */
		--lith-stone-0: oklch(98.5% 0.003 80);
		--lith-stone-1: oklch(95.5% 0.005 75);
		--lith-stone-2: oklch(90.5% 0.007 75);
		--lith-stone-3: oklch(83% 0.009 72);
		--lith-stone-4: oklch(72% 0.011 70);
		--lith-stone-5: oklch(62% 0.012 68);
		--lith-stone-6: oklch(51% 0.012 66);
		--lith-stone-7: oklch(42% 0.011 64);
		--lith-stone-8: oklch(34% 0.01 62);
		--lith-stone-9: oklch(27.5% 0.009 60);
		--lith-stone-10: oklch(23% 0.008 60);
		--lith-stone-11: oklch(19.5% 0.007 60);
		--lith-stone-12: oklch(16.5% 0.006 60);
		--lith-stone-13: oklch(13.5% 0.005 60);
		--lith-paper: oklch(97.5% 0.004 78);
		--lith-paper-raised: oklch(99.3% 0.002 80);
		--lith-paper-inset: oklch(95% 0.006 75);

		/* Ember: the one accent, the glow in the monolith's seam. Hue 40
		 * to 80, every step inside sRGB. 5 is the glow itself. */
		--lith-ember-1: oklch(95% 0.044 80);
		--lith-ember-2: oklch(90% 0.085 78);
		--lith-ember-3: oklch(85% 0.12 74);
		--lith-ember-4: oklch(80% 0.15 68);
		--lith-ember-5: oklch(74% 0.165 60);
		--lith-ember-6: oklch(66% 0.162 52);
		--lith-ember-7: oklch(58% 0.155 46);
		--lith-ember-8: oklch(50% 0.145 42);
		--lith-ember-9: oklch(41% 0.125 40);
		--lith-ember-10: oklch(30% 0.09 42);

		/* Status, quiet: a refusal and a confirmation. */
		--lith-red-dark: oklch(50% 0.17 25);
		--lith-red-light: oklch(72% 0.15 25);
		--lith-green-dark: oklch(48% 0.11 150);
		--lith-green-light: oklch(80% 0.12 150);

		/* Code: two quiet hues beside the ember, for strings and numbers. */
		--lith-sage-dark: oklch(46% 0.08 145);
		--lith-sage-light: oklch(82% 0.06 140);
		--lith-gold-dark: oklch(50% 0.1 70);
		--lith-gold-light: oklch(88% 0.09 85);

		/* Space: a 4px rhythm. */
		--lith-space-1: 0.25rem;
		--lith-space-2: 0.5rem;
		--lith-space-3: 0.75rem;
		--lith-space-4: 1rem;
		--lith-space-5: 1.25rem;
		--lith-space-6: 1.5rem;
		--lith-space-8: 2rem;
		--lith-space-10: 2.5rem;
		--lith-space-12: 3rem;
		--lith-space-16: 4rem;
		--lith-space-20: 5rem;
		--lith-space-24: 6rem;

		/* Type. Display text is pixel art (Pixelify Sans), code is JetBrains
		 * Mono, and reading text is the system's own face. */
		--lith-font-display: "Pixelify Sans", ui-monospace, monospace;
		--lith-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		--lith-font-code: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
		--lith-font-ui: var(--lith-font-code);

		--lith-text-xs: 0.75rem;
		--lith-text-sm: 0.875rem;
		--lith-text-md: 1rem;
		--lith-text-lg: 1.125rem;
		--lith-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
		--lith-text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
		--lith-text-3xl: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
		--lith-text-4xl: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);

		--lith-leading-tight: 1.08;
		--lith-leading-snug: 1.3;
		--lith-leading-normal: 1.6;
		--lith-tracking-caps: 0.08em;

		/* 8-bit details. --lith-notch notches every corner by that many
		 * pixels of 3px (1: the pixel look, 0: off, and corners round with
		 * --lith-radius-*). Frames step by --lith-frame-step.
		 * [data-lith-style="smooth"] turns them off together (theme.css). */
		--lith-notch: 1;
		--lith-frame-step: 3px;
		--lith-radius-sm: 6px;
		--lith-radius-md: 9px;
		--lith-radius-lg: 14px;

		/* Motion. Each curve has one job: glide moves things into place,
		 * zoom opens and closes pages, reveal wipes, snap answers a press. */
		--lith-dur-1: 120ms;
		--lith-dur-2: 200ms;
		--lith-dur-3: 320ms;
		--lith-dur-4: 460ms;
		--lith-dur-5: 640ms;
		--lith-ease-glide: cubic-bezier(0.22, 1, 0.36, 1);
		--lith-ease-zoom: cubic-bezier(0.16, 1, 0.3, 1);
		--lith-ease-reveal: cubic-bezier(0.65, 0, 0.35, 1);
		--lith-ease-snap: cubic-bezier(0.2, 0, 0, 1);
		--lith-ease-exit: cubic-bezier(0.4, 0, 1, 1);
		--lith-ease-steps: steps(4, end);

		/* Stacking. */
		--lith-z-raised: 1;
		--lith-z-sticky: 10;
		--lith-z-overlay: 40;
		--lith-z-tooltip: 70;

		/* Sizes. */
		--lith-content-max: 76rem;
		--lith-prose-max: 44rem;
		--lith-header-height: 3.75rem;
		--lith-control-height: 2.5rem;
	}
}

/*
 * Semantic tokens: the contract every component styles against. Each holds
 * its light and its dark value in light-dark(), so the theme is only the
 * page's color-scheme: dark by default, light, or the system's
 * ([data-lith-theme] on <html>, kept in the lith-theme cookie and rendered by
 * the server, so no page flashes the other theme). Every pair of text and
 * surface here passes WCAG AA in both themes (TestContrast).
 */
@layer theme {
	:root {
		color-scheme: dark;

		--lith-bg: light-dark(var(--lith-paper), var(--lith-stone-12));
		--lith-bg-glow: light-dark(oklch(91% 0.06 70 / 0.55), oklch(42% 0.12 52 / 0.24));
		--lith-surface-1: light-dark(var(--lith-paper-raised), var(--lith-stone-11));
		--lith-surface-2: light-dark(var(--lith-stone-1), var(--lith-stone-10));
		--lith-surface-inset: light-dark(var(--lith-paper-inset), var(--lith-stone-13));
		--lith-surface-hover: light-dark(var(--lith-stone-1), var(--lith-stone-9));
		--lith-surface-overlay: light-dark(oklch(99.3% 0.002 80 / 0.92), oklch(19.5% 0.007 60 / 0.92));

		--lith-border: light-dark(var(--lith-stone-3), var(--lith-stone-8));
		--lith-border-subtle: light-dark(var(--lith-stone-2), var(--lith-stone-9));
		--lith-border-strong: light-dark(var(--lith-stone-4), var(--lith-stone-7));

		--lith-text-1: light-dark(var(--lith-stone-11), var(--lith-stone-1));
		--lith-text-2: light-dark(var(--lith-stone-8), var(--lith-stone-3));
		--lith-text-muted: light-dark(var(--lith-stone-6), var(--lith-stone-4));

		/* The accent. --lith-accent fills (buttons, the seam, markers) and
		 * carries --lith-on-accent; --lith-accent-text is the accent as text
		 * (links, emphasis), darker in the light theme to stay readable. */
		--lith-accent: var(--lith-ember-5);
		--lith-accent-strong: light-dark(var(--lith-ember-6), var(--lith-ember-4));
		--lith-accent-text: light-dark(var(--lith-ember-8), var(--lith-ember-4));
		--lith-accent-edge: light-dark(var(--lith-ember-8), var(--lith-ember-5));
		--lith-accent-subtle: light-dark(oklch(74% 0.165 60 / 0.14), oklch(74% 0.165 60 / 0.12));
		--lith-on-accent: var(--lith-stone-12);
		--lith-glow-color: light-dark(oklch(74% 0.165 60 / 0.35), oklch(74% 0.165 60 / 0.5));

		--lith-danger: light-dark(var(--lith-red-dark), var(--lith-red-light));
		--lith-danger-subtle: light-dark(oklch(50% 0.17 25 / 0.08), oklch(72% 0.15 25 / 0.12));
		--lith-ok: light-dark(var(--lith-green-dark), var(--lith-green-light));

		--lith-focus: light-dark(var(--lith-ember-8), var(--lith-ember-4));
		--lith-selection: oklch(74% 0.165 60 / 0.32);

		--lith-shadow-1: 0 1px 2px light-dark(oklch(30% 0.01 60 / 0.12), oklch(0% 0 0 / 0.4));
		--lith-shadow-2: 0 10px 30px -12px light-dark(oklch(30% 0.01 60 / 0.25), oklch(0% 0 0 / 0.7));
		--lith-shadow-overlay: 0 18px 48px -12px light-dark(oklch(30% 0.01 60 / 0.3), oklch(0% 0 0 / 0.75));

		/* Code: chroma's classes map to these (components.css, .chroma). */
		--lith-code-bg: var(--lith-surface-inset);
		--lith-code-text: light-dark(var(--lith-stone-9), var(--lith-stone-2));
		--lith-code-keyword: light-dark(var(--lith-ember-8), var(--lith-ember-4));
		--lith-code-function: light-dark(var(--lith-stone-11), var(--lith-stone-0));
		--lith-code-tag: light-dark(var(--lith-ember-8), var(--lith-ember-3));
		--lith-code-string: light-dark(var(--lith-sage-dark), var(--lith-sage-light));
		--lith-code-number: light-dark(var(--lith-gold-dark), var(--lith-gold-light));
		--lith-code-comment: light-dark(var(--lith-stone-6), var(--lith-stone-5));

		/* The art's theme-aware colours (internal/pixelart). */
		--lith-art-seam-core: var(--lith-ember-1);
		--lith-art-seam: var(--lith-ember-5);
		--lith-art-seam-edge: var(--lith-ember-7);
	}

	[data-lith-theme="light"] {
		color-scheme: light;
	}

	[data-lith-theme="system"] {
		color-scheme: light dark;
	}

	/* The 8-bit details off: round corners, hairline frames, and the
	 * reading face for display text. Combines with either theme. */
	[data-lith-style="smooth"] {
		--lith-notch: 0;
		--lith-frame-step: 1px;
		--lith-font-display: var(--lith-font-body);
	}
}

/*
 * Starbase's components (static/vendor/starbase) read Starbase's semantic
 * tokens, --sb-*, with Starbase's colours as fallbacks. Here they take the
 * site's: the surfaces, text, accent, borders, focus and overlays of both
 * themes (light-dark() through --lith-*), the code colours, and the 8-bit
 * details, so [data-lith-style="smooth"] smooths the components too.
 */
@layer theme {
	:root {
		--sb-bg: var(--lith-bg);
		--sb-bg-glow: var(--lith-bg-glow);
		--sb-surface-raised: var(--lith-surface-1);
		--sb-surface-card: var(--lith-surface-1);
		--sb-surface-inset: var(--lith-surface-inset);
		--sb-surface-hover: var(--lith-surface-hover);
		/* The backdrop behind a modal drawer or dialog. */
		--sb-surface-overlay: light-dark(oklch(30% 0.01 60 / 0.35), oklch(9% 0.005 60 / 0.62));

		--sb-border: var(--lith-border);
		--sb-border-subtle: var(--lith-border-subtle);
		--sb-border-strong: var(--lith-border-strong);

		--sb-text-1: var(--lith-text-1);
		--sb-text-2: var(--lith-text-2);
		--sb-text-muted: var(--lith-text-muted);
		--sb-text-on-brand: var(--lith-on-accent);
		--sb-text-on-danger: light-dark(var(--lith-stone-0), var(--lith-stone-12));

		/* Starbase's brand is the site's one accent. brand-light is what
		 * components fill a selection with and write --sb-bg on (a selected
		 * tab), so it is the accent as text: readable both ways. */
		--sb-brand: var(--lith-accent);
		--sb-brand-hover: var(--lith-accent-strong);
		--sb-brand-light: var(--lith-accent-text);
		--sb-brand-subtle: var(--lith-accent-subtle);
		--sb-accent: var(--lith-accent);
		--sb-datastar: var(--lith-ok);

		--sb-ok: var(--lith-ok);
		--sb-ok-subtle: color-mix(in oklch, var(--lith-ok) 14%, transparent);
		--sb-warn: var(--lith-accent-text);
		--sb-warn-subtle: var(--lith-accent-subtle);
		--sb-danger: var(--lith-danger);
		--sb-danger-subtle: var(--lith-danger-subtle);
		--sb-info: var(--lith-text-2);
		--sb-info-subtle: color-mix(in oklch, var(--lith-text-2) 12%, transparent);

		--sb-control-bg: var(--lith-surface-inset);
		--sb-control-border: var(--lith-border);
		--sb-control-border-hover: var(--lith-border-strong);
		--sb-control-text: var(--lith-text-1);
		--sb-control-placeholder: var(--lith-text-muted);
		--sb-control-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		--sb-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));

		--sb-frame-color: var(--lith-accent);
		--sb-glow-brand: 0 0 0 1px var(--lith-accent-edge), 0 8px 28px -10px var(--lith-glow-color);
		--sb-focus-ring: 0 0 0 2px var(--lith-bg), 0 0 0 4px var(--lith-focus);
		--sb-selection: var(--lith-selection);
		/* One shadow without spread: notched components draw it with
		 * filter: drop-shadow(), which takes no spread. */
		--sb-shadow-overlay: 0 16px 32px light-dark(oklch(30% 0.01 60 / 0.28), oklch(0% 0 0 / 0.7));

		--sb-code-keyword: var(--lith-code-keyword);
		--sb-code-function: var(--lith-code-function);
		--sb-code-tag: var(--lith-code-tag);
		--sb-code-string: var(--lith-code-string);
		--sb-code-number: var(--lith-code-number);

		--sb-font-display: var(--lith-font-display);
		--sb-font-ui: var(--lith-font-ui);
		--sb-font-body: var(--lith-font-body);
		--sb-font-heading: var(--lith-font-body);
		--sb-display-case: none;
		--sb-notch: var(--lith-notch);
		--sb-frame-step: var(--lith-frame-step);

		--sb-z-sticky: var(--lith-z-sticky);
		--sb-z-overlay: var(--lith-z-overlay);
		--sb-z-toast: 60;
		--sb-z-tooltip: var(--lith-z-tooltip);
	}
}

@layer components {
	/* Until a component's bundle has defined it: nothing that would jump. */
	sb-drawer:not(:defined),
	sb-toast:not(:defined),
	sb-popover:not(:defined) {
		display: none;
	}

	sb-tabs:not(:defined) {
		display: block;

		& > [slot]:not(:first-of-type) {
			display: none;
		}
	}
}

/* A small modern reset. */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		/* Lets heights and widths animate to and from auto (disclosures). */
		interpolate-size: allow-keywords;
	}

	body {
		min-block-size: 100dvh;
		-webkit-font-smoothing: antialiased;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-inline-size: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
		letter-spacing: inherit;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	ul[role="list"],
	ol[role="list"] {
		list-style: none;
		padding: 0;
	}

	:where(a) {
		color: inherit;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

/* Elements, before any class. */
@layer base {
	html {
		background: var(--lith-bg);
		color: var(--lith-text-1);
		scrollbar-color: var(--lith-border) var(--lith-bg);
		scroll-padding-block-start: calc(var(--lith-header-height) + var(--lith-space-6));
		accent-color: var(--lith-accent);
	}

	body {
		background:
			radial-gradient(64rem 28rem at 78% -6rem, var(--lith-bg-glow), transparent 70%),
			var(--lith-bg);
		font-family: var(--lith-font-body);
		font-size: var(--lith-text-md);
		line-height: var(--lith-leading-normal);
	}

	::selection {
		background: var(--lith-selection);
		color: var(--lith-text-1);
	}

	h1,
	h2,
	h3,
	h4 {
		line-height: var(--lith-leading-snug);
		text-wrap: balance;
		font-weight: 650;
		color: var(--lith-text-1);
	}

	p,
	li,
	dd,
	figcaption {
		text-wrap: pretty;
	}

	a {
		color: var(--lith-accent-text);
		text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.22em;
		transition: color var(--lith-dur-1) var(--lith-ease-snap), text-decoration-color var(--lith-dur-1) var(--lith-ease-snap);

		&:hover {
			text-decoration-color: currentColor;
		}
	}

	:focus-visible {
		outline: 2px solid var(--lith-focus);
		outline-offset: 2px;
	}

	code,
	kbd,
	samp,
	pre {
		font-family: var(--lith-font-code);
		font-size: 0.86em;
		font-variant-ligatures: none;
	}

	:not(pre) > code {
		padding: 0.08em 0.36em;
		border-radius: 4px;
		background: var(--lith-surface-inset);
		box-shadow: inset 0 0 0 1px var(--lith-border-subtle);
		color: var(--lith-text-1);
		overflow-wrap: break-word;
	}

	kbd {
		padding: 0.05em 0.4em;
		border: 1px solid var(--lith-border);
		border-block-end-width: 2px;
		border-radius: 4px;
		background: var(--lith-surface-2);
		font-size: var(--lith-text-xs);
	}

	hr {
		border: 0;
		border-block-start: 1px solid var(--lith-border-subtle);
	}

	img {
		block-size: auto;
	}

	[hidden] {
		display: none !important;
	}
}

/* The page's frame: the header, main and footer, the width of content, and
 * the grids of the docs and the demo pages. Layouts answer to the width
 * they get (container queries), not to the viewport. */
@layer layout {
	.site {
		display: grid;
		grid-template-rows: auto 1fr auto;
		min-block-size: 100dvh;
	}

	.site-main {
		container: page / inline-size;
		display: flex;
		flex-direction: column;
		min-inline-size: 0;
	}

	.wrap {
		--_gutter: clamp(var(--lith-space-4), 4vw, var(--lith-space-8));
		inline-size: min(100% - 2 * var(--_gutter), var(--lith-content-max));
		margin-inline: auto;
	}

	.stack {
		display: flex;
		flex-direction: column;
		gap: var(--gap, var(--lith-space-4));
	}

	.cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--gap, var(--lith-space-3));
	}

	/* Docs: navigation | article | on this page. */
	.docs {
		container: docs / inline-size;
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr) 13rem;
		grid-template-areas: "nav article toc";
		gap: var(--lith-space-10);
		align-items: start;
		padding-block: var(--lith-space-8) var(--lith-space-16);

		@container page (width < 72rem) {
			grid-template-columns: 14rem minmax(0, 1fr);
			grid-template-areas: "nav article";
			gap: var(--lith-space-8);
		}

		@container page (width < 52rem) {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "article";
		}
	}

	/* A demo: the stage beside what the server does, then how it works. */
	.demo-body {
		container: demo-body / inline-size;
		display: grid;
		grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 1fr);
		gap: var(--lith-space-6);
		align-items: start;

		@container page (width < 60rem) {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}

/* Buttons and fields. Corners notch by --lith-notch pixels of 3px (the
 * clip-path also cuts the border's corners, the 8-bit look); with the
 * smooth style they round instead. A clip-path cuts an outer outline off,
 * so focus rings on notched controls sit inside. */
@layer components {
	.notched {
		--_n: calc(3px * var(--lith-notch));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
	}

	.btn {
		--_bg: var(--lith-surface-2);
		--_fg: var(--lith-text-1);
		--_edge: var(--lith-border-strong);
		--_n: calc(3px * var(--lith-notch));
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--lith-space-2);
		min-block-size: var(--lith-control-height);
		padding: 0 var(--lith-space-5);
		border: 1px solid var(--_edge);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--_bg);
		color: var(--_fg);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-sm);
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		transition:
			background-color var(--lith-dur-1) var(--lith-ease-snap),
			border-color var(--lith-dur-1) var(--lith-ease-snap),
			translate var(--lith-dur-1) var(--lith-ease-snap);

		& svg {
			inline-size: 1.1em;
			block-size: 1.1em;
			flex: none;
		}

		&:hover {
			--_bg: var(--lith-surface-hover);
			--_edge: var(--lith-text-muted);
			translate: 0 -1px;
		}

		&:active {
			translate: 0 1px;
		}

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

	/* The accent button. On hover a band of light sweeps across it. */
	.btn--primary {
		--_bg: var(--lith-accent);
		--_fg: var(--lith-on-accent);
		--_edge: var(--lith-accent-edge);
		background-image: linear-gradient(105deg, transparent calc(var(--lith-sweep) - 18%), oklch(100% 0 0 / 0.38) var(--lith-sweep), transparent calc(var(--lith-sweep) + 18%));

		&:hover {
			--_bg: var(--lith-accent-strong);
			--_edge: var(--lith-accent-edge);
			animation: sweep 900ms var(--lith-ease-glide);
		}

		&:focus-visible {
			outline-color: var(--lith-on-accent);
		}
	}

	@keyframes sweep {
		from {
			--lith-sweep: -20%;
		}
		to {
			--lith-sweep: 120%;
		}
	}

	.btn--ghost {
		--_bg: transparent;
		--_edge: transparent;
	}

	.btn--sm {
		min-block-size: 2rem;
		padding-inline: var(--lith-space-3);
		font-size: var(--lith-text-xs);
	}

	/* Waiting for the stream: a pixel that walks around the label. */
	.btn[aria-busy="true"] {
		cursor: progress;
		opacity: 0.75;

		&::after {
			content: "";
			inline-size: 6px;
			block-size: 6px;
			background: currentColor;
			animation: busy 0.8s steps(4, end) infinite;
		}
	}

	@keyframes busy {
		0% {
			translate: 0 -3px;
		}
		25% {
			translate: 3px 0;
		}
		50% {
			translate: 0 3px;
		}
		75% {
			translate: -3px 0;
		}
	}

	.icon-btn {
		display: inline-grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		padding: 0;
		border: 0;
		border-radius: var(--lith-radius-sm);
		background: transparent;
		color: var(--lith-text-2);
		cursor: pointer;
		transition: color var(--lith-dur-1) var(--lith-ease-snap), background-color var(--lith-dur-1) var(--lith-ease-snap);

		& svg {
			inline-size: 1.25rem;
			block-size: 1.25rem;
		}

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

	/* Fields: a label over its control. The label turns with its control:
	 * the accent while it has the focus, the danger colour once the browser
	 * finds what was typed invalid. */
	.field {
		display: grid;
		gap: var(--lith-space-1);

		& > span {
			color: var(--lith-text-2);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			font-weight: 600;
			letter-spacing: 0.02em;
			transition: color var(--lith-dur-1) var(--lith-ease-snap);
		}

		&:has(:focus-visible) > span {
			color: var(--lith-accent-text);
		}

		&:has(:user-invalid) > span {
			color: var(--lith-danger);
		}
	}

	.input {
		--_n: calc(3px * var(--lith-notch));
		inline-size: 100%;
		min-block-size: var(--lith-control-height);
		padding: var(--lith-space-2) var(--lith-space-3);
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-surface-inset);
		color: var(--lith-text-1);
		transition: border-color var(--lith-dur-1) var(--lith-ease-snap), background-color var(--lith-dur-1) var(--lith-ease-snap);

		&::placeholder {
			color: var(--lith-text-muted);
		}

		&:hover {
			border-color: var(--lith-border-strong);
		}

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

		/* Sent and waiting for its outcome: the user's own input stays,
		 * marked as pending. */
		&[readonly] {
			color: var(--lith-text-2);
			border-style: dashed;
		}

		&:user-invalid {
			border-color: var(--lith-danger);
		}
	}

	textarea.input {
		resize: vertical;
		min-block-size: 5.5rem;
		line-height: 1.5;
	}

	/* A short line under a form: what became of the action. */
	.outcome {
		min-block-size: 1.5em;
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);

		&.is-refused,
		&.is-problem {
			color: var(--lith-danger);
		}

		&:empty {
			display: none;
		}
	}
}

/* The header, the display menu, tooltips and the footer. */
@layer components {
	.skip-link {
		position: absolute;
		inset-block-start: var(--lith-space-2);
		inset-inline-start: var(--lith-space-2);
		z-index: calc(var(--lith-z-sticky) + 1);
		padding: var(--lith-space-2) var(--lith-space-3);
		background: var(--lith-accent);
		color: var(--lith-on-accent);
		font-weight: 600;
		translate: 0 -200%;

		&:focus-visible {
			translate: 0 0;
		}
	}

	/* ── Header: stays put across pages (view transitions). ─────────── */
	.site-header {
		container: header / inline-size;
		position: sticky;
		inset-block-start: 0;
		z-index: var(--lith-z-sticky);
		border-block-end: 1px solid var(--lith-border-subtle);
		background: color-mix(in oklch, var(--lith-bg) 84%, transparent);
		backdrop-filter: blur(12px) saturate(1.2);
		view-transition-name: site-header;
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		gap: var(--lith-space-6);
		block-size: var(--lith-header-height);
	}

	.brand {
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-3);
		color: var(--lith-text-1);
		text-decoration: none;

		& .brand__logo {
			inline-size: auto;
			block-size: 2.25rem;
			view-transition-name: logo;
			filter: drop-shadow(0 0 calc(var(--lith-seam-glow) * 10px) var(--lith-glow-color));
			animation: breathe 6s ease-in-out infinite alternate;
		}

		& .brand__word {
			font-family: var(--lith-font-display);
			font-size: 1.65rem;
			font-weight: 600;
			line-height: 1;
			letter-spacing: 0.02em;
		}

		&:hover .brand__logo {
			--lith-seam-glow: 1;
		}
	}

	/* The seam breathes: --lith-seam-glow is a registered number, so it
	 * animates, and the halo's opacity and the glow follow it. */
	@keyframes breathe {
		from {
			--lith-seam-glow: 0.45;
		}
		to {
			--lith-seam-glow: 1;
		}
	}

	.px-art {
		& .halo {
			opacity: calc(0.25 + var(--lith-seam-glow) * 0.75);
		}

		& .seam {
			opacity: calc(0.8 + var(--lith-seam-glow) * 0.2);
		}
	}

	/* Where the header is narrow, its links move into the menu. */
	.menu-button {
		display: none;
		order: -1;
		margin-inline-start: calc(-1 * var(--lith-space-2));

		@container header (width < 34rem) {
			display: inline-grid;
		}
	}

	.site-nav {
		display: flex;
		align-items: center;
		gap: var(--lith-space-1);
		margin-inline-start: auto;

		@container header (width < 34rem) {
			display: none;
		}

		& a {
			position: relative;
			padding: var(--lith-space-2) var(--lith-space-3);
			color: var(--lith-text-2);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-sm);
			font-weight: 600;
			text-decoration: none;

			&::after {
				content: "";
				position: absolute;
				inset-inline: var(--lith-space-3);
				inset-block-end: -3px;
				block-size: 3px;
				background: var(--lith-accent);
				scale: 0 1;
				transform-origin: left;
				transition: scale var(--lith-dur-3) var(--lith-ease-glide);
			}

			&:hover {
				color: var(--lith-text-1);
			}

			&[aria-current="page"] {
				color: var(--lith-text-1);

				&::after {
					scale: 1 1;
				}
			}
		}

	}

	.prefs-button {
		@container header (width < 34rem) {
			margin-inline-start: auto;
		}
	}

	/* The menu: Starbase's sb-drawer, from the start edge. */
	.menu-drawer {
		--sb-drawer-size: min(20rem, 86vw);

		&::part(heading) {
			font-family: var(--lith-font-display);
			font-size: 1.5rem;
			font-weight: 600;
		}
	}

	.menu-drawer__nav {
		display: grid;
		gap: var(--lith-space-1);
		margin-block-end: var(--lith-space-6);
		padding-block-end: var(--lith-space-4);
		border-block-end: 1px solid var(--lith-border-subtle);

		& a {
			padding: var(--lith-space-2) var(--lith-space-3);
			color: var(--lith-text-1);
			font-family: var(--lith-font-ui);
			font-weight: 600;
			text-decoration: none;

			&[aria-current="page"] {
				box-shadow: inset 3px 0 0 var(--lith-accent);
				background: var(--lith-accent-subtle);
			}
		}
	}

	/* ── The display menu: a popover anchored to its button. ────────── */
	.prefs-button {
		anchor-name: --prefs;
	}

	.menu {
		--_s: var(--lith-frame-step);
		position: fixed;
		position-anchor: --prefs;
		position-area: block-end span-inline-start;
		position-try-fallbacks: flip-block, flip-inline;
		margin: var(--lith-space-3) 0 0;
		inset: auto;
		min-inline-size: 15rem;
		padding: var(--lith-space-3);
		border: 0;
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);
		color: var(--lith-text-1);
		/* A pixel frame: four copies of the box, each a step out, which
		 * leaves the corners open. Then the overlay's shadow. */
		box-shadow:
			0 calc(-1 * var(--_s)) 0 0 var(--lith-border-strong),
			0 var(--_s) 0 0 var(--lith-border-strong),
			calc(-1 * var(--_s)) 0 0 0 var(--lith-border-strong),
			var(--_s) 0 0 0 var(--lith-border-strong),
			var(--lith-shadow-overlay);
		opacity: 0;
		translate: 0 -0.4rem;
		transition:
			opacity var(--lith-dur-2) var(--lith-ease-glide),
			translate var(--lith-dur-2) var(--lith-ease-glide),
			display var(--lith-dur-2) allow-discrete,
			overlay var(--lith-dur-2) allow-discrete;

		&:popover-open {
			opacity: 1;
			translate: 0 0;

			@starting-style {
				opacity: 0;
				translate: 0 -0.4rem;
			}
		}
	}

	.menu__group {
		display: grid;
		gap: var(--lith-space-2);

		& + & {
			margin-block-start: var(--lith-space-4);
		}
	}

	.menu__label {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	/* A row of choices, one of them pressed. */
	.choice {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 2px;
		padding: 2px;
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		background: var(--lith-surface-inset);

		& button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: var(--lith-space-1);
			padding: var(--lith-space-2);
			border: 0;
			border-radius: calc(4px * (1 - var(--lith-notch)));
			background: transparent;
			color: var(--lith-text-2);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			font-weight: 600;
			cursor: pointer;

			& svg {
				inline-size: 1rem;
				block-size: 1rem;
			}

			&:hover {
				color: var(--lith-text-1);
			}

			&[aria-pressed="true"] {
				background: var(--lith-surface-2);
				color: var(--lith-text-1);
				box-shadow: inset 0 -2px 0 var(--lith-accent);
			}
		}
	}

	/* ── Tooltips: anchored to their term, scoped so every tip can call
	 * its anchor --tip. Where anchor positioning is missing, the text
	 * stays for screen readers only. ───────────────────────────────── */
	.tip {
		anchor-name: --tip;
		anchor-scope: --tip;
		text-decoration: underline dotted color-mix(in oklch, currentColor 55%, transparent);
		text-underline-offset: 0.25em;
		cursor: help;
	}

	.tip__bubble {
		position: absolute;
		position-anchor: --tip;
		position-area: block-start;
		position-try-fallbacks: flip-block;
		z-index: var(--lith-z-tooltip);
		inline-size: max-content;
		max-inline-size: 18rem;
		margin-block: var(--lith-space-2);
		padding: var(--lith-space-2) var(--lith-space-3);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		background: var(--lith-text-1);
		color: var(--lith-bg);
		font-family: var(--lith-font-body);
		font-size: var(--lith-text-xs);
		font-weight: 500;
		line-height: 1.45;
		letter-spacing: normal;
		text-align: start;
		text-transform: none;
		box-shadow: var(--lith-shadow-2);
		pointer-events: none;
		opacity: 0;
		translate: 0 0.25rem;
		transition: opacity var(--lith-dur-2) var(--lith-ease-glide), translate var(--lith-dur-2) var(--lith-ease-glide);
	}

	.tip:is(:hover, :focus-visible) .tip__bubble {
		opacity: 1;
		translate: 0 0;
		transition-delay: 120ms;
	}

	@supports not (anchor-name: --tip) {
		.tip__bubble {
			position: absolute;
			inline-size: 1px;
			block-size: 1px;
			overflow: hidden;
			clip-path: inset(50%);
		}
	}

	/* ── Footer ─────────────────────────────────────────────────────── */
	.site-footer {
		margin-block-start: var(--lith-space-16);
		border-block-start: 1px solid var(--lith-border-subtle);
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);

		& .wrap {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: var(--lith-space-4) var(--lith-space-8);
			padding-block: var(--lith-space-8);
		}

		& a {
			color: var(--lith-text-2);
		}

		& nav {
			display: flex;
			flex-wrap: wrap;
			gap: var(--lith-space-2) var(--lith-space-5);
		}
	}

	.site-footer__about {
		display: flex;
		align-items: center;
		gap: var(--lith-space-3);

		& svg {
			block-size: 1.75rem;
			inline-size: auto;
		}
	}
}

/* The landing page: the hero, the four ideas, the numbers, the quick start,
 * the demos and the credits. */
@layer components {
	/* ── Hero ────────────────────────────────────────────────────────── */
	.hero {
		container: hero / inline-size;
		position: relative;
		isolation: isolate;
		overflow: clip;
		padding-block: var(--lith-space-12) var(--lith-space-16);
		border-block-end: 1px solid var(--lith-border-subtle);
	}

	/* The full-width layer behind the hero, for a demo in the hero slot
	 * (the cursor party). It is a size container named party, so what it
	 * holds can place itself with cqi and cqb. Pointers pass through it
	 * unless its content takes them. */
	.hero__party {
		container: party / size;
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;

		& > * {
			pointer-events: auto;
		}
	}

	.hero__inner {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
		align-items: center;
		gap: var(--lith-space-10);
		pointer-events: none;

		& :is(a, button, input, [tabindex]) {
			pointer-events: auto;
		}

		@container hero (width < 46rem) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.eyebrow {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	/* L inear writes, I mmediate mode, T icks, H ypermedia: the initials
	 * spell the name down the left edge. */
	.acrostic {
		display: grid;
		gap: 0.1em;
		margin-block: var(--lith-space-4) var(--lith-space-6);
		font-family: var(--lith-font-display);
		font-size: clamp(2.2rem, 1.2rem + 4.2cqi, 4.4rem);
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.01em;

		& > span {
			display: grid;
			grid-template-columns: 0.78em auto;
			align-items: baseline;
			opacity: 1;
		}

		& b {
			color: var(--lith-accent);
			text-shadow: 0 0 0.45em var(--lith-glow-color);
		}

		& i {
			font-style: normal;
			color: var(--lith-text-1);
			font-size: 0.62em;
		}
	}

	.hero__lede {
		max-inline-size: 36rem;
		color: var(--lith-text-2);
		font-size: var(--lith-text-lg);
		line-height: 1.55;
	}

	.hero__actions {
		margin-block-start: var(--lith-space-8);
		--gap: var(--lith-space-3);
	}

	.hero__art {
		position: relative;
		display: grid;
		justify-items: center;

		@container hero (width < 46rem) {
			display: none;
		}

		& svg {
			inline-size: auto;
			block-size: clamp(18rem, 34cqi, 30rem);
			filter: drop-shadow(0 0 calc(var(--lith-seam-glow) * 36px) var(--lith-glow-color));
			animation: breathe 6s ease-in-out infinite alternate;
		}
	}

	/* Embers drifting up from the monolith's foot. */
	.embers {
		position: absolute;
		inset: 0;
		pointer-events: none;

		& i {
			position: absolute;
			inset-block-end: 12%;
			inset-inline-start: calc(50% + var(--x));
			inline-size: 4px;
			block-size: 4px;
			background: var(--lith-accent);
			box-shadow: 0 0 8px var(--lith-glow-color);
			opacity: 0;
			animation: ember var(--d, 7s) steps(28, end) var(--delay, 0s) infinite;
		}
	}

	@keyframes ember {
		0% {
			opacity: 0;
			translate: 0 0;
		}
		15% {
			opacity: 1;
		}
		100% {
			opacity: 0;
			translate: var(--drift, 12px) -22rem;
		}
	}

	/* On the first paint the initials come up one after another. */
	@media (prefers-reduced-motion: no-preference) {
		.acrostic > span {
			animation: rise var(--lith-dur-5) var(--lith-ease-glide) both;
			animation-delay: calc(var(--i) * 90ms + 80ms);
		}

		.hero__lede,
		.hero__actions {
			animation: rise var(--lith-dur-5) var(--lith-ease-glide) 480ms both;
		}
	}

	@keyframes rise {
		from {
			opacity: 0;
			translate: 0 0.6rem;
			filter: blur(3px);
		}
	}

	/* ── Sections ────────────────────────────────────────────────────── */
	.section {
		padding-block: var(--lith-space-16) 0;
	}

	.section__head {
		display: grid;
		gap: var(--lith-space-2);
		max-inline-size: 46rem;
		margin-block-end: var(--lith-space-8);

		& h2 {
			font-family: var(--lith-font-display);
			font-size: var(--lith-text-3xl);
			font-weight: 600;
			line-height: var(--lith-leading-tight);
			letter-spacing: 0.01em;
		}

		& p {
			color: var(--lith-text-2);
			font-size: var(--lith-text-lg);
		}
	}

	/* ── The four ideas ──────────────────────────────────────────────── */
	.ideas {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-6);
	}

	.idea {
		container: idea / inline-size;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: var(--lith-space-8);
		align-items: center;
		padding: var(--lith-space-8);
		border: 1px solid var(--lith-border-subtle);
		border-radius: calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));
		background: color-mix(in oklch, var(--lith-surface-1) 70%, transparent);

		@container page (width < 56rem) {
			grid-template-columns: minmax(0, 1fr);
			padding: var(--lith-space-6);
		}
	}

	.idea__text {
		display: grid;
		gap: var(--lith-space-3);
		align-content: start;

		& h3 {
			display: flex;
			align-items: baseline;
			gap: var(--lith-space-3);
			font-family: var(--lith-font-display);
			font-size: var(--lith-text-2xl);
			font-weight: 600;
		}

		& p {
			color: var(--lith-text-2);
		}

		& a {
			justify-self: start;
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-sm);
			font-weight: 600;
		}
	}

	.idea__letter {
		display: inline-grid;
		place-items: center;
		inline-size: 2.4rem;
		block-size: 2.4rem;
		background: var(--lith-accent-subtle);
		color: var(--lith-accent-text);
		box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--lith-accent) 45%, transparent);
	}

	/* The slot beside an idea: a demo's embed, or else a listing. */
	.idea__slot {
		container: slot / inline-size;
		min-inline-size: 0;

		& .code {
			margin: 0;
		}
	}

	/* ── Numbers: a raised band. Cards inside read the band's tone with a
	 * style query, so the same card sits on either surface. ─────────── */
	.band {
		--band: raised;
		margin-block-start: var(--lith-space-16);
		padding-block: var(--lith-space-12);
		border-block: 1px solid var(--lith-border-subtle);
		background: var(--lith-surface-1);

		& .section {
			padding-block-start: 0;
		}
	}

	.stats {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--lith-space-4);

		@container page (width < 60rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		@container page (width < 36rem) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.stat {
		display: grid;
		gap: var(--lith-space-2);
		align-content: start;
		padding: var(--lith-space-5);
		border: 1px solid var(--lith-border-subtle);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);

		/* Numbers in the code face: every digit unmistakable. */
		& dd {
			order: -1;
			margin: 0;
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-2xl);
			font-weight: 700;
			line-height: 1.1;
			letter-spacing: -0.02em;
			font-variant-numeric: tabular-nums;
		}

		& dt {
			color: var(--lith-text-2);
			font-size: var(--lith-text-sm);
		}

		& small {
			display: block;
			margin-block-start: var(--lith-space-1);
			color: var(--lith-text-muted);
			font-size: var(--lith-text-xs);
		}
	}

	@container style(--band: raised) {
		.stat {
			background: var(--lith-surface-2);
			border-color: var(--lith-border);
		}
	}

	.note {
		margin-block-start: var(--lith-space-6);
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	/* ── Quick start ─────────────────────────────────────────────────── */
	.quickstart {
		display: grid;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--lith-space-8);
		align-items: start;

		@container page (width < 56rem) {
			grid-template-columns: minmax(0, 1fr);
		}

		& ol {
			display: grid;
			gap: var(--lith-space-3);
			padding-inline-start: var(--lith-space-5);
			color: var(--lith-text-2);

			& li::marker {
				color: var(--lith-accent-text);
				font-family: var(--lith-font-ui);
				font-weight: 600;
			}
		}
	}

	/* ── Credits ─────────────────────────────────────────────────────── */
	.credits {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
		gap: var(--lith-space-4);

		& article {
			display: grid;
			gap: var(--lith-space-2);
			padding: var(--lith-space-5);
			border-inline-start: 3px solid var(--lith-accent);
			background: var(--lith-surface-1);
		}

		& h3 {
			font-size: var(--lith-text-lg);
		}

		& p {
			color: var(--lith-text-2);
			font-size: var(--lith-text-sm);
		}
	}

	/* ── Scroll-driven reveals: sections rise into place as they enter
	 * the viewport, driven by the scroll position (no script). Without
	 * support they are simply there. ──────────────────────────────── */
	@media (prefers-reduced-motion: no-preference) {
		@supports (animation-timeline: view()) {
			.reveal {
				animation: reveal linear both;
				animation-timeline: view();
				animation-range: entry 0% cover 28%;
			}

			.hero__art svg {
				animation: breathe 6s ease-in-out infinite alternate, sink linear both;
				animation-timeline: auto, scroll(root block);
				animation-range: normal, 0 60vh;
			}
		}
	}

	@keyframes reveal {
		from {
			opacity: 0;
			translate: 0 2.5rem;
			scale: 0.985;
		}
	}

	@keyframes sink {
		to {
			translate: 0 4rem;
			opacity: 0.55;
		}
	}
}

@layer components {
	/* The quick start's tabs: Starbase's sb-tabs, panels in the light DOM. */
	.starts {
		display: block;
		min-inline-size: 0;

		&::part(tablist) {
			margin-block-end: var(--lith-space-3);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-sm);
		}
	}

	.starts__panel {
		display: grid;
		gap: var(--lith-space-3);

		& > p {
			color: var(--lith-text-2);
			font-size: var(--lith-text-sm);
		}
	}
}

/* Demo cards: on the landing page and on /demos. A card morphs into the
 * head of its demo's page when it is followed (view transitions). */
@layer components {
	.card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
		gap: var(--lith-space-4);
		padding: 0;
		list-style: none;
	}

	.demo-card {
		--_n: calc(4px * var(--lith-notch));
		container: card / inline-size;
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-surface-1);
		transition:
			border-color var(--lith-dur-2) var(--lith-ease-snap),
			translate var(--lith-dur-3) var(--lith-ease-glide),
			background-color var(--lith-dur-2) var(--lith-ease-snap);

		&:hover,
		&:has(a:focus-visible) {
			border-color: var(--lith-accent-edge);
			translate: 0 -3px;

			& .demo-card__art {
				--lith-seam-glow: 1;
			}

			& .demo-card__go {
				translate: 0.25rem 0;
				color: var(--lith-accent-text);
			}
		}
	}

	/* The glyph on a pixel grid, the mark of a live demo. */
	.demo-card__stage {
		display: grid;
		place-items: center;
		block-size: 8.5rem;
		--_grid: color-mix(in oklch, var(--lith-border) 55%, transparent);
		background:
			radial-gradient(circle at 50% 115%, var(--lith-accent-subtle), transparent 65%),
			linear-gradient(var(--_grid) 1px, transparent 1px),
			linear-gradient(90deg, var(--_grid) 1px, transparent 1px),
			var(--lith-surface-inset);
		background-size: auto, 12px 12px, 12px 12px, auto;
		border-block-end: 1px solid var(--lith-border-subtle);
	}

	.demo-card__art,
	.demo-head__art {
		& svg {
			block-size: 4.5rem;
			inline-size: auto;
			filter: drop-shadow(0 0 calc(var(--lith-seam-glow) * 14px) var(--lith-glow-color));
			transition: filter var(--lith-dur-3) var(--lith-ease-glide);
		}
	}

	.demo-card__body {
		display: grid;
		grid-template-rows: auto 1fr auto;
		gap: var(--lith-space-2);
		padding: var(--lith-space-5);

		& h3 {
			font-family: var(--lith-font-display);
			font-size: var(--lith-text-xl);
			font-weight: 600;
			inline-size: fit-content;
		}

		& p {
			color: var(--lith-text-2);
			font-size: var(--lith-text-sm);
		}

		& a {
			color: var(--lith-text-1);
			text-decoration: none;

			/* The whole card follows the link. */
			&::after {
				content: "";
				position: absolute;
				inset: 0;
			}

			&:focus-visible {
				outline: none;

				&::after {
					outline: 2px solid var(--lith-focus);
					outline-offset: -6px;
				}
			}
		}
	}

	.demo-card__go {
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-weight: 600;
		transition: translate var(--lith-dur-3) var(--lith-ease-glide), color var(--lith-dur-2) var(--lith-ease-snap);

		& svg {
			inline-size: 0.9rem;
			block-size: 0.9rem;
		}
	}
}

/* Docs: the navigation, the article, the table of contents, the pager. */
@layer components {
	/* The navigation: a sticky sidebar where the docs are wide enough.
	 * Where they are not, it hides, and the "Docs menu" button opens its
	 * copy in the menu (sb-drawer). */
	.docs-nav {
		grid-area: nav;
		font-size: var(--lith-text-sm);

		&[data-docs-nav] {
			position: sticky;
			inset-block-start: calc(var(--lith-header-height) + var(--lith-space-6));
			max-block-size: calc(100dvh - var(--lith-header-height) - var(--lith-space-10));
			overflow-y: auto;
			overscroll-behavior: contain;
			scrollbar-width: thin;
			padding: 0 var(--lith-space-2) var(--lith-space-6) 0;
			view-transition-name: docs-nav;

			@container docs (width < 52rem) {
				display: none;
			}
		}

		& ul {
			display: grid;
			gap: 1px;
			margin: 0 0 var(--lith-space-5);
			padding: 0;
			list-style: none;
		}

		& a {
			position: relative;
			display: block;
			padding: var(--lith-space-1) var(--lith-space-3);
			color: var(--lith-text-2);
			text-decoration: none;
			text-wrap: pretty;
			transition: color var(--lith-dur-1) var(--lith-ease-snap);

			&:hover {
				color: var(--lith-text-1);
			}

			&[aria-current="page"] {
				color: var(--lith-text-1);
				font-weight: 600;
			}
		}
	}

	.docs-nav__section {
		margin-block-end: var(--lith-space-2);
		padding-inline: var(--lith-space-3);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-weight: 600;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;

		& a {
			display: inline;
			padding: 0;
			color: inherit;
		}
	}

	/* The highlight behind the current page: a view-transition name of its
	 * own, so on a move between pages it glides to the new item. */
	.docs-nav__marker {
		position: absolute;
		inset: 0;
		z-index: -1;
		border-inline-start: 3px solid var(--lith-accent);
		background: var(--lith-accent-subtle);
		view-transition-name: docs-nav-marker;
	}

	.docs-nav__marker--still {
		view-transition-name: none;
	}

	.docs-nav li {
		position: relative;
		isolation: isolate;
	}

	.docs-menu-button {
		display: none;
		justify-self: start;
		margin-block-end: var(--lith-space-4);

		@container docs (width < 52rem) {
			display: inline-flex;
		}
	}

	/* One column that may shrink: a code block scrolls inside it instead of
	 * widening the article to its longest line. */
	.docs-article {
		grid-area: article;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		min-inline-size: 0;
		max-inline-size: var(--lith-prose-max);
	}

	.page-head {
		display: grid;
		gap: var(--lith-space-3);
		padding-block-end: var(--lith-space-6);
		margin-block-end: var(--lith-space-8);
		border-block-end: 1px solid var(--lith-border-subtle);

		& h1 {
			font-family: var(--lith-font-display);
			font-size: var(--lith-text-3xl);
			font-weight: 600;
			line-height: var(--lith-leading-tight);
			letter-spacing: 0.01em;
			inline-size: fit-content;
		}

		& .lede {
			color: var(--lith-text-2);
			font-size: var(--lith-text-lg);
		}
	}

	/* The page's title morphs between pages (view transitions). */
	.page-title {
		view-transition-name: page-title;
	}

	.crumbs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: 0.02em;

		& a {
			color: var(--lith-text-2);
			text-decoration: none;

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

	.draft-badge {
		justify-self: start;
		padding: 0.1em 0.5em;
		border: 1px dashed var(--lith-accent-edge);
		color: var(--lith-accent-text);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
	}

	.docs-toc {
		grid-area: toc;
		position: sticky;
		inset-block-start: calc(var(--lith-header-height) + var(--lith-space-6));
		display: grid;
		align-content: start;
		gap: var(--lith-space-2);
		/* A long page's table of contents scrolls on its own, like the
		 * navigation, instead of reaching past the window. */
		max-block-size: calc(100dvh - var(--lith-header-height) - var(--lith-space-10));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		font-size: var(--lith-text-sm);

		@container docs (width < 72rem) {
			display: none;
		}

		& h2 {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			letter-spacing: var(--lith-tracking-caps);
			text-transform: uppercase;
		}

		& ul {
			display: grid;
			gap: var(--lith-space-1);
			padding: 0;
			list-style: none;
			border-inline-start: 1px solid var(--lith-border-subtle);
		}

		& li {
			padding-inline-start: var(--lith-space-3);

			&.is-sub {
				padding-inline-start: var(--lith-space-6);
			}
		}

		& a {
			color: var(--lith-text-2);
			text-decoration: none;

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

	/* Previous and next page. */
	.pager {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--lith-space-4);
		margin-block-start: var(--lith-space-12);

		& a {
			--_n: calc(3px * var(--lith-notch));
			display: grid;
			gap: var(--lith-space-1);
			padding: var(--lith-space-4) var(--lith-space-5);
			border: 1px solid var(--lith-border);
			border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
			clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
			color: var(--lith-text-1);
			text-decoration: none;
			transition: border-color var(--lith-dur-2) var(--lith-ease-snap), background-color var(--lith-dur-2) var(--lith-ease-snap);

			&:hover {
				border-color: var(--lith-accent-edge);
				background: var(--lith-surface-1);
			}

			& span {
				color: var(--lith-text-muted);
				font-family: var(--lith-font-ui);
				font-size: var(--lith-text-xs);
			}

			& strong {
				font-weight: 600;
			}
		}

		& .pager__next {
			grid-column: 2;
			text-align: end;
		}
	}

	.edit-link {
		margin-block-start: var(--lith-space-6);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);

		& a {
			color: var(--lith-text-muted);
		}
	}

	/* How far down the page the reader is: a bar under the header, driven
	 * by the scroll position. */
	@supports (animation-timeline: scroll()) {
		.read-progress {
			position: fixed;
			inset: var(--lith-header-height) 0 auto;
			z-index: var(--lith-z-sticky);
			block-size: 2px;
			background: var(--lith-accent);
			transform-origin: left;
			scale: 0 1;
			animation: progress linear both;
			animation-timeline: scroll(root block);
			pointer-events: none;
		}
	}

	@keyframes progress {
		to {
			scale: 1 1;
		}
	}
}

/* Charts in the docs (internal/markdown's ```chart blocks): a figure like
 * a code block, an SVG that scrolls sideways where the column is narrower
 * than it, a legend and the numbers as a table. The four series hues are
 * the chart's own, checked for colour vision deficiencies against the
 * inset surface of both themes; text stays in the text tokens. */
@layer components {
	.chart {
		--_n: calc(3px * var(--lith-notch));
		--_c1: light-dark(oklch(58% 0.155 46), oklch(66% 0.162 52));
		--_c2: light-dark(oklch(52% 0.11 245), oklch(62% 0.11 240));
		--_c3: light-dark(oklch(56% 0.12 150), oklch(64% 0.12 150));
		--_c4: light-dark(oklch(48% 0.14 350), oklch(55% 0.14 350));
		display: grid;
		margin: 0;
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-surface-inset);

		.prose & {
			margin-block: var(--lith-space-6);
		}
	}

	.chart__bar {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--lith-space-1) var(--lith-space-4);
		padding: var(--lith-space-2) var(--lith-space-4);
		border-block-end: 1px solid var(--lith-border-subtle);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
	}

	.chart__title {
		color: var(--lith-text-1);
		font-weight: 600;
	}

	.chart__source {
		color: var(--lith-text-muted);
	}

	/* Where the column is narrower than the chart, the chart scrolls
	 * sideways, and a shade at the edge shows that more is there: the
	 * covers scroll with the content, the shades stay with the box. */
	.chart__plot {
		overflow-x: auto;
		padding: var(--lith-space-3) var(--lith-space-3) 0;
		background:
			linear-gradient(to right, var(--lith-surface-inset) 40%, transparent) left / 2.5rem 100% no-repeat local,
			linear-gradient(to left, var(--lith-surface-inset) 40%, transparent) right / 2.5rem 100% no-repeat local,
			linear-gradient(to right, var(--lith-border-strong), transparent) left / 0.75rem 100% no-repeat scroll,
			linear-gradient(to left, var(--lith-border-strong), transparent) right / 0.75rem 100% no-repeat scroll;

		& svg {
			display: block;
			inline-size: 100%;
			min-inline-size: 34rem;
			block-size: auto;
		}
	}

	.chart__s1 { --_c: var(--_c1); }
	.chart__s2 { --_c: var(--_c2); }
	.chart__s3 { --_c: var(--_c3); }
	.chart__s4 { --_c: var(--_c4); }

	.chart svg {
		& text {
			font-family: var(--lith-font-ui);
			font-size: 12px;
			font-variant-numeric: tabular-nums;
		}

		& .chart__tick,
		& .chart__axis {
			fill: var(--lith-text-muted);
		}

		& .chart__value {
			fill: var(--lith-text-2);
			font-size: 11.5px;
		}

		& .chart__grid {
			stroke: var(--lith-border-subtle);
			stroke-width: 1;
			shape-rendering: crispEdges;
		}

		& .chart__baseline {
			stroke: var(--lith-border-strong);
			stroke-width: 1;
			shape-rendering: crispEdges;
		}

		& .chart__mark {
			fill: var(--_c);
			shape-rendering: crispEdges;
		}

		& .chart__line {
			fill: none;
			stroke: var(--_c);
			stroke-width: 2;
			stroke-linejoin: round;
			stroke-linecap: round;
		}

		& .chart__dot {
			fill: var(--_c);
			stroke: var(--lith-surface-inset);
			stroke-width: 2;
		}

		& .chart__hit {
			fill: transparent;
		}

		& .chart__hit:hover {
			fill: var(--_c);
			fill-opacity: 0.35;
		}
	}

	/* .chart doubles the class, to outrank the prose's rules for lists and
	 * tables (prose.css). */
	.chart .chart__legend {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-1) var(--lith-space-5);
		margin: 0;
		padding: var(--lith-space-2) var(--lith-space-4) var(--lith-space-3);
		list-style: none;
		color: var(--lith-text-2);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);

		& li {
			display: inline-flex;
			align-items: center;
			gap: var(--lith-space-2);
			margin: 0;
		}
	}

	.chart__key {
		inline-size: 0.75rem;
		block-size: 0.75rem;
		background: var(--_c);

		.chart--lines & {
			block-size: 3px;
			inline-size: 1rem;
		}
	}

	.chart .chart__data {
		border-block-start: 1px solid var(--lith-border-subtle);
		font-size: var(--lith-text-xs);

		& summary {
			padding: var(--lith-space-2) var(--lith-space-4);
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			cursor: pointer;
		}

		& table {
			display: block;
			max-block-size: 20rem;
			margin: 0;
			padding: 0 var(--lith-space-4) var(--lith-space-3);
			overflow: auto;
			font-family: var(--lith-font-ui);
			font-variant-numeric: tabular-nums;
		}

		& :is(th, td) {
			min-inline-size: 0;
			text-align: end;
		}
	}

	/* A table of five columns or more holds numbers: its cells take the
	 * width of their content, not the prose's eight rems each. */
	.prose table:has(th:nth-child(5)) td {
		min-inline-size: 0;
	}

	@media (forced-colors: active) {
		.chart__mark,
		.chart__key {
			forced-color-adjust: none;
		}
	}
}

/* Running text from Markdown: the docs and the demos' notes. */
@layer components {
	.prose {
		color: var(--lith-text-2);
		font-size: 1.0625rem;
		line-height: 1.7;

		& > * + * {
			margin-block-start: var(--lith-space-4);
		}

		& :is(h2, h3, h4) {
			position: relative;
			color: var(--lith-text-1);
			scroll-margin-block-start: calc(var(--lith-header-height) + var(--lith-space-6));
		}

		& h2 {
			margin-block-start: var(--lith-space-12);
			font-size: var(--lith-text-xl);
		}

		& h3 {
			margin-block-start: var(--lith-space-8);
			font-size: var(--lith-text-lg);
		}

		& :is(h2, h3) + * {
			margin-block-start: var(--lith-space-3);
		}

		/* The link to a heading shows on hover and focus. */
		& .anchor {
			margin-inline-start: 0.4em;
			color: var(--lith-text-muted);
			text-decoration: none;
			opacity: 0;
			transition: opacity var(--lith-dur-1) var(--lith-ease-snap);

			&::before {
				content: "#";
				font-family: var(--lith-font-ui);
				font-weight: 400;
			}

			&:focus-visible {
				opacity: 1;
			}
		}

		& :is(h2, h3, h4):hover .anchor {
			opacity: 1;
		}

		& strong {
			color: var(--lith-text-1);
			font-weight: 650;
		}

		& :is(ul, ol) {
			padding-inline-start: var(--lith-space-6);

			& li + li {
				margin-block-start: var(--lith-space-2);
			}

			& li::marker {
				color: var(--lith-accent-text);
			}
		}

		& blockquote {
			padding: var(--lith-space-3) var(--lith-space-5);
			border-inline-start: 3px solid var(--lith-accent);
			background: var(--lith-accent-subtle);
			color: var(--lith-text-1);
		}

		& table {
			display: block;
			inline-size: 100%;
			overflow-x: auto;
			border-collapse: collapse;
			font-size: var(--lith-text-sm);
			line-height: 1.5;
		}

		& :is(th, td) {
			padding: var(--lith-space-2) var(--lith-space-3);
			border-block-end: 1px solid var(--lith-border-subtle);
			text-align: start;
			vertical-align: top;
		}

		& th {
			color: var(--lith-text-1);
			font-weight: 600;
			white-space: nowrap;
		}

		& td {
			min-inline-size: 8rem;
		}

		& hr {
			margin-block: var(--lith-space-10);
		}
	}

	/* The demos' notes are shorter and smaller. */
	.prose--small {
		font-size: var(--lith-text-sm);
		line-height: 1.65;

		& > * + * {
			margin-block-start: var(--lith-space-3);
		}

		& h2 {
			margin-block-start: var(--lith-space-8);
			font-size: var(--lith-text-md);
		}

		& h3 {
			margin-block-start: var(--lith-space-6);
			font-size: var(--lith-text-sm);
		}
	}

	.notice {
		display: grid;
		gap: var(--lith-space-2);
		padding: var(--lith-space-4) var(--lith-space-5);
		border-inline-start: 3px solid var(--lith-accent);
		background: var(--lith-accent-subtle);
		color: var(--lith-text-1);
	}
}

/* Code blocks: chroma's classes coloured by the semantic code tokens, in a
 * figure with the file or language and a copy button. */
@layer components {
	.code {
		--_n: calc(3px * var(--lith-notch));
		margin: 0;
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-code-bg);
		overflow: hidden;

		.prose & {
			margin-block: var(--lith-space-6);
		}
	}

	.code__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-3);
		padding: var(--lith-space-1) var(--lith-space-2) var(--lith-space-1) var(--lith-space-4);
		border-block-end: 1px solid var(--lith-border-subtle);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
	}

	.code__label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.code__copy {
		display: inline-grid;
		padding: var(--lith-space-1) var(--lith-space-2);
		border: 0;
		background: transparent;
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		cursor: pointer;

		& > span {
			grid-area: 1 / 1;
			transition: opacity var(--lith-dur-2) var(--lith-ease-snap), translate var(--lith-dur-2) var(--lith-ease-glide);
		}

		& .code__copy-done {
			color: var(--lith-accent-text);
			opacity: 0;
			translate: 0 0.4em;
		}

		&:hover {
			color: var(--lith-text-1);
		}

		&[data-copied] {
			& .code__copy-idle {
				opacity: 0;
				translate: 0 -0.4em;
			}

			& .code__copy-done {
				opacity: 1;
				translate: 0 0;
			}
		}
	}

	.chroma {
		margin: 0;
		padding: var(--lith-space-4) var(--lith-space-5);
		overflow-x: auto;
		color: var(--lith-code-text);
		font-size: 0.8125rem;
		line-height: 1.7;
		tab-size: 4;

		& code {
			font-size: inherit;
		}

		& .line {
			display: block;
		}

		& :is(.k, .kc, .kd, .kn, .kp, .kr, .kt) {
			color: var(--lith-code-keyword);
		}

		& :is(.nt, .nb, .bp) {
			color: var(--lith-code-tag);
		}

		& :is(.na, .nf, .fm) {
			color: var(--lith-code-function);
		}

		& :is(.s, .s1, .s2, .sb, .sc, .sd, .se, .sh, .si, .sx, .sr, .ss, .dl) {
			color: var(--lith-code-string);
		}

		& :is(.m, .mb, .mf, .mh, .mi, .il, .mo) {
			color: var(--lith-code-number);
		}

		& :is(.c, .ch, .cm, .c1, .cs, .cp, .cpf) {
			color: var(--lith-code-comment);
			font-style: italic;
		}

		& :is(.o, .ow, .p) {
			color: var(--lith-text-muted);
		}

		& :is(.nv, .vc, .vg, .vi, .nx, .n) {
			color: var(--lith-code-text);
		}

		& .gp {
			color: var(--lith-text-muted);
			user-select: none;
		}
	}
}

/* A demo's page: its head (the card it came from morphs into it), the
 * stage with the demo, what the server does, and how it works. */
@layer components {
	.demo-page {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-8);
		padding-block: var(--lith-space-8) var(--lith-space-12);
	}

	.demo-head {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "art crumbs" "art title" "art lede";
		column-gap: var(--lith-space-6);
		row-gap: var(--lith-space-2);
		align-items: center;
		padding: var(--lith-space-6);
		border: 1px solid var(--lith-border-subtle);
		border-radius: calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);

		@container page (width < 36rem) {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "crumbs" "title" "lede";

			& .demo-head__art {
				display: none;
			}
		}

		& .crumbs {
			grid-area: crumbs;
		}

		& h1 {
			grid-area: title;
			inline-size: fit-content;
			font-family: var(--lith-font-display);
			font-size: var(--lith-text-3xl);
			font-weight: 600;
			line-height: var(--lith-leading-tight);
		}

		& .lede {
			grid-area: lede;
			color: var(--lith-text-2);
			font-size: var(--lith-text-lg);
		}
	}

	.demo-head__art {
		grid-area: art;
		display: grid;
		place-items: center;
		padding: var(--lith-space-4);
		--_grid: color-mix(in oklch, var(--lith-border) 55%, transparent);
		background:
			linear-gradient(var(--_grid) 1px, transparent 1px),
			linear-gradient(90deg, var(--_grid) 1px, transparent 1px),
			var(--lith-surface-inset);
		background-size: 12px 12px;
	}

	/* The stage holds the demo itself; its pixel grid marks it as live. */
	.demo-stage {
		container: stage / inline-size;
		position: relative;
		min-inline-size: 0;
		padding: var(--lith-space-6);
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));
		--_grid: color-mix(in oklch, var(--lith-border-subtle) 70%, transparent);
		background:
			radial-gradient(circle at 50% 0%, var(--lith-accent-subtle), transparent 55%),
			linear-gradient(var(--_grid) 1px, transparent 1px),
			linear-gradient(90deg, var(--_grid) 1px, transparent 1px),
			var(--lith-surface-inset);
		background-size: auto, 16px 16px, 16px 16px, auto;

		@container page (width < 36rem) {
			padding: var(--lith-space-4);
		}
	}

	/* "live" in the stage's corner, lit while the tab's stream is open. */
	.live-badge {
		position: absolute;
		inset-block-start: var(--lith-space-3);
		inset-inline-end: var(--lith-space-3);
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;

		&::before {
			content: "";
			inline-size: 6px;
			block-size: 6px;
			background: var(--lith-text-muted);
		}

		/* $_live: the tab's stream is open. */
		&.is-live::before {
			background: var(--lith-ok);
			box-shadow: 0 0 8px var(--lith-ok);
			animation: blink 2s steps(2, jump-none) infinite;
		}
	}

	@keyframes blink {
		50% {
			opacity: 0.3;
		}
	}

	.panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-3);
		padding: var(--lith-space-6);
		border: 1px solid var(--lith-border-subtle);
		border-radius: calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);

		& > h2 {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			letter-spacing: var(--lith-tracking-caps);
			text-transform: uppercase;
		}
	}

	/* "How it works": a disclosure that opens to its own height. */
	.howto {
		border: 1px solid var(--lith-border-subtle);
		border-radius: calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);

		& > summary {
			display: flex;
			align-items: center;
			gap: var(--lith-space-3);
			padding: var(--lith-space-5) var(--lith-space-6);
			color: var(--lith-text-1);
			font-family: var(--lith-font-display);
			font-size: var(--lith-text-xl);
			font-weight: 600;
			cursor: pointer;
			list-style: none;

			&::-webkit-details-marker {
				display: none;
			}

			/* A pixel chevron that turns when the panel opens. */
			&::before {
				content: "";
				inline-size: 8px;
				block-size: 12px;
				background: var(--lith-accent);
				clip-path: polygon(0 0, 3px 0, 3px 2px, 5px 2px, 5px 4px, 8px 4px, 8px 8px, 5px 8px, 5px 10px, 3px 10px, 3px 12px, 0 12px);
				transition: rotate var(--lith-dur-3) var(--lith-ease-steps);
			}

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

		&[open] > summary::before {
			rotate: 90deg;
		}

		&::details-content {
			block-size: 0;
			overflow: clip;
			transition: block-size var(--lith-dur-4) var(--lith-ease-glide), content-visibility var(--lith-dur-4) allow-discrete;
		}

		&[open]::details-content {
			block-size: auto;
		}

		& .prose {
			padding: 0 var(--lith-space-6) var(--lith-space-6);
		}
	}

	/* The demos index and the page for a missing one. */
	.page-intro {
		display: grid;
		gap: var(--lith-space-3);
		max-inline-size: 46rem;
		padding-block: var(--lith-space-10) var(--lith-space-8);

		& h1 {
			font-family: var(--lith-font-display);
			font-size: var(--lith-text-3xl);
			font-weight: 600;
			line-height: var(--lith-leading-tight);
			inline-size: fit-content;
		}

		& p {
			color: var(--lith-text-2);
			font-size: var(--lith-text-lg);
		}
	}

	.lost {
		display: grid;
		justify-items: start;
		gap: var(--lith-space-4);
		padding-block: var(--lith-space-16);

		& svg {
			block-size: 7rem;
			inline-size: auto;
		}
	}
}

/*
 * View transitions. Every navigation between two pages of the site is a
 * cross-document view transition, and transitions.js gives it a type in
 * pagereveal, from where the reader comes and goes:
 *
 *   forward, backward   between docs pages, by their order in the
 *                       navigation: the article slides the way you read
 *   zoom-in, zoom-out   from the landing page or /demos into a page, and
 *                       back out
 *   fade                every other move
 *   theme               the theme and the style switch (same document): a
 *                       circle that opens from the switch
 *
 * A transition without a type is a stream's patch (sse.Patch's
 * ViewTransition, Datastar's useViewTransition), scoped to an element
 * (ViewTransitionSelector): its root swaps at once, and only elements
 * with a name move.
 *
 * Names (unique on a page): site-header, logo, docs-nav, docs-nav-marker,
 * page-title; demo-<slug>, demo-<slug>-title and demo-<slug>-art for a
 * demo's card and the head of its page; inside a demo,
 * <slug>-<what>-<id>, with view-transition-class <slug>-<what>.
 */
@view-transition {
	navigation: auto;
}

@layer components {
	/* Every group glides into place. */
	::view-transition-group(*) {
		animation-duration: var(--lith-dur-4);
		animation-timing-function: var(--lith-ease-glide);
	}

	/* Without a type the page swaps at once. */
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
		mix-blend-mode: normal;
	}

	/* The chrome stays where it is and never fades: the header, the logo,
	 * the docs navigation and its marker swap their snapshots. */
	::view-transition-old(site-header),
	::view-transition-new(site-header),
	::view-transition-old(logo),
	::view-transition-new(logo),
	::view-transition-old(docs-nav),
	::view-transition-new(docs-nav),
	::view-transition-old(docs-nav-marker),
	::view-transition-new(docs-nav-marker) {
		animation: none;
		mix-blend-mode: normal;
	}

	/* An element on one side only fades: out quickly, in a little later. */
	::view-transition-old(*):only-child {
		animation: vt-fade-out var(--lith-dur-2) var(--lith-ease-exit) both;
	}

	::view-transition-new(*):only-child {
		animation: vt-fade-in var(--lith-dur-3) var(--lith-ease-glide) 80ms both;
	}

	/* Docs: the article slides the way you read. */
	/* The old article leaves fast, so the two texts barely overlap, and
	 * the new one glides in a moment later. */
	html:active-view-transition-type(forward) {
		&::view-transition-old(root) {
			animation: vt-out-to-start var(--lith-dur-2) var(--lith-ease-exit) both;
		}

		&::view-transition-new(root) {
			animation: vt-in-from-end var(--lith-dur-4) var(--lith-ease-glide) 110ms both;
		}
	}

	html:active-view-transition-type(backward) {
		&::view-transition-old(root) {
			animation: vt-out-to-end var(--lith-dur-2) var(--lith-ease-exit) both;
		}

		&::view-transition-new(root) {
			animation: vt-in-from-start var(--lith-dur-4) var(--lith-ease-glide) 110ms both;
		}
	}

	/* Into a page and back out: the page opens up, or settles back. */
	html:active-view-transition-type(zoom-in) {
		&::view-transition-old(root) {
			animation: vt-zoom-past var(--lith-dur-3) var(--lith-ease-exit) both;
		}

		&::view-transition-new(root) {
			animation: vt-zoom-up var(--lith-dur-5) var(--lith-ease-zoom) both;
		}
	}

	html:active-view-transition-type(zoom-out) {
		&::view-transition-old(root) {
			animation: vt-zoom-away var(--lith-dur-3) var(--lith-ease-exit) both;
		}

		&::view-transition-new(root) {
			animation: vt-zoom-down var(--lith-dur-5) var(--lith-ease-zoom) both;
		}
	}

	html:active-view-transition-type(fade) {
		&::view-transition-old(root) {
			animation: vt-fade-out var(--lith-dur-2) var(--lith-ease-exit) both;
		}

		&::view-transition-new(root) {
			animation: vt-fade-in var(--lith-dur-3) var(--lith-ease-glide) 60ms both;
		}
	}

	/* A page title that comes from a link in the navigation morphs from it,
	 * and a demo's card into the head of its page: slower, on the zoom
	 * curve. Their snapshots cross-fade while the group moves. */
	::view-transition-group(page-title),
	::view-transition-group(.demo),
	::view-transition-group(.demo-title),
	::view-transition-group(.demo-art) {
		animation-duration: var(--lith-dur-5);
		animation-timing-function: var(--lith-ease-zoom);
	}

	::view-transition-old(page-title),
	::view-transition-new(page-title),
	::view-transition-old(.demo-title),
	::view-transition-new(.demo-title) {
		block-size: 100%;
		inline-size: auto;
		object-fit: fill;
	}

	/* A card opens into a head without stretching what it holds: each
	 * snapshot keeps its own size in the corner, and the growing group
	 * reveals the head while the card fades. */
	::view-transition-image-pair(.demo) {
		overflow: clip;
	}

	::view-transition-old(.demo),
	::view-transition-new(.demo) {
		inset: 0 auto auto 0;
		inline-size: auto;
		block-size: auto;
		object-fit: none;
		animation-duration: var(--lith-dur-3);
	}

	/* The theme switch: the new look opens as a circle over the old one
	 * (transitions.js animates the circle). Nothing else moves, so every
	 * name is off for it. */
	html:active-view-transition-type(theme) {
		&::view-transition-old(root),
		&::view-transition-new(root) {
			animation: none;
			mix-blend-mode: normal;
		}
	}

	html[data-vt="theme"] *,
	html:active-view-transition-type(theme) * {
		view-transition-name: none !important;
	}

	/* The cards and heads that morph (transitions.js names them). */
	[data-demo-card],
	.demo-head {
		view-transition-class: demo;
	}

	[data-demo-card] h3,
	.demo-head h1 {
		view-transition-class: demo-title;
	}

	.demo-card__art,
	.demo-head__art {
		view-transition-class: demo-art;
	}
}

@keyframes vt-fade-out {
	to {
		opacity: 0;
	}
}

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

@keyframes vt-out-to-start {
	to {
		opacity: 0;
		translate: -1.5rem 0;
	}
}

@keyframes vt-in-from-end {
	from {
		opacity: 0;
		translate: 3.5rem 0;
	}
}

@keyframes vt-out-to-end {
	to {
		opacity: 0;
		translate: 1.5rem 0;
	}
}

@keyframes vt-in-from-start {
	from {
		opacity: 0;
		translate: -3.5rem 0;
	}
}

@keyframes vt-zoom-past {
	to {
		opacity: 0;
		scale: 1.05;
		filter: blur(3px);
	}
}

@keyframes vt-zoom-up {
	from {
		opacity: 0;
		scale: 0.94;
	}
}

@keyframes vt-zoom-away {
	to {
		opacity: 0;
		scale: 0.95;
		filter: blur(3px);
	}
}

@keyframes vt-zoom-down {
	from {
		opacity: 0;
		scale: 1.05;
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

@layer utilities {
	.visually-hidden {
		position: absolute !important;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* A notched 8-bit frame, drawn outside the box: --lith-frame-step
	 * thick, in --frame (the border colour by default). */
	.pixel-frame {
		--_s: var(--lith-frame-step);
		--_c: var(--frame, var(--lith-border-strong));
		box-shadow:
			0 calc(-1 * var(--_s)) 0 0 var(--_c),
			0 var(--_s) 0 0 var(--_c),
			calc(-1 * var(--_s)) 0 0 0 var(--_c),
			var(--_s) 0 0 0 var(--_c);
	}

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

	.display {
		font-family: var(--lith-font-display);
	}
}

/* demo: guestbook */
@layer components {
/* The guestbook. Its rules apply inside its own elements only. */
@scope ([data-demo="guestbook"]) {
	.gb {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-8);
	}

	.gb__form {
		display: grid;
		gap: var(--lith-space-4);
		max-inline-size: 34rem;
	}

	.gb__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--lith-space-4);
	}

	.gb__entries {
		display: grid;
		gap: var(--lith-space-3);

		& h3 {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			font-weight: 600;
			letter-spacing: var(--lith-tracking-caps);
			text-transform: uppercase;
		}

		& ol {
			display: grid;
			gap: var(--lith-space-2);
			margin: 0;
		}
	}

	.gb__entry {
		view-transition-class: guestbook-entry;
		padding: var(--lith-space-3) var(--lith-space-4);
		border-inline-start: 3px solid var(--lith-border);
		background: var(--lith-surface-1);
		transition:
			opacity var(--lith-dur-5) var(--lith-ease-glide),
			translate var(--lith-dur-5) var(--lith-ease-glide),
			filter var(--lith-dur-5) var(--lith-ease-glide),
			border-color 2.4s var(--lith-ease-glide),
			box-shadow 2.4s var(--lith-ease-glide);
	}

	/* An entry that just arrived materialises: out of a blur, with a glow
	 * on its edge that cools down. @starting-style is the state it starts
	 * from when the stream's morph inserts it. */
	.gb__entry[data-fresh] {
		border-inline-start-color: var(--lith-accent);

		@starting-style {
			opacity: 0;
			translate: 0 -0.75rem;
			filter: blur(6px);
			border-inline-start-color: var(--lith-ember-1);
			box-shadow: 0 0 28px var(--lith-glow-color), inset 0 0 0 1px var(--lith-accent);
		}
	}

	.gb__message {
		color: var(--lith-text-1);
		overflow-wrap: anywhere;
		white-space: pre-line;
	}

	.gb__by {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-xs);

		& span {
			color: var(--lith-text-2);
			font-weight: 600;
		}

		& time {
			margin-inline-start: var(--lith-space-2);
		}
	}

	/* The landing page's slot. */
	.gb-embed {
		display: grid;
		gap: var(--lith-space-3);
		padding: var(--lith-space-5);
		border: 1px solid var(--lith-border);
		background: var(--lith-surface-inset);

		& ol {
			display: grid;
			gap: var(--lith-space-2);
			margin: 0;
		}

		& .btn {
			justify-self: start;
		}
	}

	.gb-embed__head {
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	.gb-embed__dot {
		inline-size: 6px;
		block-size: 6px;
		background: var(--lith-text-muted);

		.is-live > & {
			background: var(--lith-ok);
			box-shadow: 0 0 8px var(--lith-ok);
		}
	}

	.gb-embed__list {
		display: grid;
		gap: var(--lith-space-2);
	}

	.gb-embed__empty,
	.gb-embed__total {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}
}

/* View transitions belong to the document, outside the scope. The stream
 * morphs the entries in a view transition (sse.Patch's ViewTransition):
 * the entries already there glide down on the glide curve, and a new one
 * shows its own @starting-style arrival instead of a cross-fade. */
::view-transition-group(.guestbook-entry) {
	animation-duration: var(--lith-dur-5);
	animation-timing-function: var(--lith-ease-glide);
}

::view-transition-new(.guestbook-entry):only-child {
	animation: none;
}

}
/* demo: writer-race */
@layer components {
/* The writer race. Its rules apply inside its own elements only. */

/* How hot the track is: 0 at rest, 1 while a race runs. Registered, so
 * that it animates. */
@property --wr-heat {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@scope ([data-demo="writer-race"]) {
	.wr {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-6);
	}

	/* Labels in the UI face, small and spaced: legends, tile heads. */
	.wr-choice legend,
	.wr-tile h4,
	.wr-line h3,
	.wr-results h3,
	.wr-result dt,
	.wr-track__empty h3 {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-weight: 600;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	/* ── Controls ──────────────────────────────────────────────────── */
	.wr-controls {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		grid-template-areas:
			"producers sync go"
			"hint hint hint"
			"said said said";
		align-items: end;
		gap: var(--lith-space-4) var(--lith-space-6);

		@container stage (width < 30rem) {
			grid-template-columns: auto minmax(0, 1fr);
			grid-template-areas:
				"producers producers"
				"sync go"
				"hint hint"
				"said said";
		}
	}

	.wr-choice--producers {
		grid-area: producers;
	}

	.wr-choice--sync {
		grid-area: sync;
	}

	.wr-controls__go {
		grid-area: go;
		justify-self: start;
	}

	.wr-controls__hint {
		grid-area: hint;
		max-inline-size: 38rem;
		margin-block-start: calc(-1 * var(--lith-space-1));
		color: var(--lith-text-muted);
		font-size: var(--lith-text-xs);
		line-height: 1.5;

		& b {
			color: var(--lith-text-2);
			font-family: var(--lith-font-ui);
			font-weight: 600;
		}
	}

	.wr-controls__said {
		grid-area: said;
		display: grid;
		gap: var(--lith-space-1);

		&:not(:has(.outcome:not(:empty))) {
			display: none;
		}
	}

	/* A choice is a row of segments: radio buttons, the checked one lit. */
	.wr-choice {
		display: grid;
		gap: var(--lith-space-2);
		margin: 0;
		padding: 0;
		border: 0;
		min-inline-size: 0;

		& legend {
			padding: 0;
			margin-block-end: var(--lith-space-2);
			float: inline-start;
		}
	}

	.wr-choice__options {
		--_n: calc(3px * var(--lith-notch));
		display: inline-flex;
		justify-self: start;
		gap: 3px;
		padding: 3px;
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-surface-inset);

		& label {
			position: relative;
			display: grid;
			cursor: pointer;
		}

		/* The radio stays in the page for the keyboard and screen readers;
		 * its segment shows it. */
		& input {
			position: absolute;
			inset: 0;
			margin: 0;
			opacity: 0;
			cursor: pointer;
		}

		& span {
			display: grid;
			place-items: center;
			min-inline-size: 3rem;
			min-block-size: 2rem;
			padding-inline: var(--lith-space-3);
			border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)) - 2px);
			color: var(--lith-text-2);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-sm);
			font-weight: 600;
			font-variant-numeric: tabular-nums;
			transition:
				background-color var(--lith-dur-1) var(--lith-ease-snap),
				color var(--lith-dur-1) var(--lith-ease-snap),
				box-shadow var(--lith-dur-1) var(--lith-ease-snap);
		}

		& label:hover span {
			background: var(--lith-surface-hover);
			color: var(--lith-text-1);
		}

		& label:has(:checked) span {
			background: var(--lith-accent);
			color: var(--lith-on-accent);
			box-shadow: inset 0 -2px 0 color-mix(in oklch, var(--lith-accent), black 22%);
		}

		& label:has(:focus-visible) span {
			outline: 2px solid var(--lith-focus);
			outline-offset: -2px;
		}

		& label:has(:checked):has(:focus-visible) span {
			outline-color: var(--lith-on-accent);
			outline-offset: -4px;
		}
	}

	.wr-controls__go[disabled] {
		cursor: not-allowed;
		opacity: 0.6;
		translate: none;
		animation: none;
	}

	/* ── The track ─────────────────────────────────────────────────── */
	/* The track heats up while a race runs and cools down after it: one
	 * animatable number (--wr-heat, from 0 to 1) drives the edge, the glow
	 * and the progress blocks, so they all change together. */
	.wr-track {
		--wr-heat: 0;
		container: track / inline-size;
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-4);
		padding: var(--lith-space-5);
		border: 1px solid color-mix(in oklch, var(--lith-accent-edge) calc(var(--wr-heat) * 100%), var(--lith-border));
		border-radius: calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);
		box-shadow:
			0 0 0 1px color-mix(in oklch, var(--lith-accent-subtle) calc(var(--wr-heat) * 100%), transparent),
			0 18px 48px -20px color-mix(in oklch, var(--lith-glow-color) calc(var(--wr-heat) * 100%), transparent),
			var(--lith-shadow-2);
		/* It cools slowly, like the guestbook's arrivals. */
		transition: --wr-heat 2.4s var(--lith-ease-glide);

		@container stage (width < 34rem) {
			padding: var(--lith-space-4);
		}

		&[data-state="running"] {
			--wr-heat: 1;
			transition-duration: var(--lith-dur-4);
		}
	}

	.wr-track__empty {
		display: grid;
		gap: var(--lith-space-3);
		max-inline-size: 36rem;

		& p {
			color: var(--lith-text-2);
		}
	}

	.wr-track__ref {
		font-size: var(--lith-text-sm);

		& b {
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-variant-numeric: tabular-nums;
		}
	}

	.wr-track__head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--lith-space-2) var(--lith-space-4);

		& h3 {
			font-family: var(--lith-font-display);
			font-size: var(--lith-text-xl);
			font-weight: 600;
			line-height: 1.1;
		}
	}

	.wr-tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2);

		& span {
			padding: 2px var(--lith-space-2);
			border: 1px solid var(--lith-border-subtle);
			background: var(--lith-surface-inset);
			color: var(--lith-text-2);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
		}
	}

	.wr-track__status {
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-2);
		margin-inline-start: auto;
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-variant-numeric: tabular-nums;
		letter-spacing: 0.02em;

		[data-state="running"] & {
			color: var(--lith-accent-text);
		}
	}

	.wr-track__dot {
		inline-size: 6px;
		block-size: 6px;
		background: var(--lith-text-muted);

		[data-state="running"] & {
			background: var(--lith-accent);
			box-shadow: 0 0 8px var(--lith-glow-color);
			animation: wr-blink 0.8s steps(2, jump-none) infinite;
		}

		[data-state="done"] & {
			background: var(--lith-ok);
		}

		:is([data-state="failed"], [data-state="interrupted"]) & {
			background: var(--lith-danger);
		}
	}

	@keyframes wr-blink {
		50% {
			opacity: 0.25;
		}
	}

	/* The race's three seconds, in pixel blocks that light up. */
	.wr-progress {
		block-size: 8px;
		padding: 2px;
		background: var(--lith-surface-inset);
		box-shadow: inset 0 0 0 1px var(--lith-border-subtle);

		& i {
			display: block;
			block-size: 100%;
			background: repeating-linear-gradient(90deg, color-mix(in oklch, var(--lith-accent) calc(45% + var(--wr-heat) * 55%), var(--lith-border)) 0 6px, transparent 6px 8px);
			filter: drop-shadow(0 0 calc(var(--wr-heat) * 4px) var(--lith-glow-color));
			scale: var(--p) 1;
			transform-origin: left;
			transition: scale 120ms linear;

			&:dir(rtl) {
				transform-origin: right;
			}
		}

	}

	/* ── The result of a race that is over ─────────────────────────── */
	.wr-result {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--lith-space-3);
		margin: 0;

		@container track (width < 36rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		& > div {
			display: grid;
			gap: var(--lith-space-1);
			padding: var(--lith-space-3) var(--lith-space-4);
			border-inline-start: 3px solid var(--lith-accent);
			background: var(--lith-accent-subtle);
			transition:
				opacity var(--lith-dur-5) var(--lith-ease-glide),
				translate var(--lith-dur-5) var(--lith-ease-glide),
				filter var(--lith-dur-5) var(--lith-ease-glide);
		}

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			letter-spacing: -0.02em;
		}
	}

	/* A result that just came in settles into place, one card after the
	 * other. */
	.wr-result[data-fresh] > div {
		@starting-style {
			opacity: 0;
			translate: 0 0.5rem;
			filter: blur(4px);
		}

		&:nth-child(2) {
			transition-delay: 60ms;
		}

		&:nth-child(3) {
			transition-delay: 120ms;
		}

		&:nth-child(4) {
			transition-delay: 180ms;
		}
	}

	/* ── Commands a second ─────────────────────────────────────────── */
	.wr-rate {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--lith-space-1) var(--lith-space-3);
	}

	.wr-rate__now {
		color: var(--lith-text-2);

		& b {
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-3xl);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			letter-spacing: -0.03em;
			line-height: 1;
		}
	}

	.wr-rate__note {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-xs);
	}

	/* The chart: a stepped line over the race's seconds, with the
	 * benchmark's number for the same settings as a dashed line. The SVG
	 * stretches to its box; its strokes keep their width. */
	.wr-chart {
		display: grid;
		gap: var(--lith-space-1);
		margin: 0;
	}

	.wr-chart__box {
		position: relative;
		block-size: clamp(7rem, 26cqi, 11rem);
		border-block-end: 1px solid var(--lith-border);

		& svg {
			display: block;
			inline-size: 100%;
			block-size: 100%;
			overflow: visible;
		}

		& path {
			vector-effect: non-scaling-stroke;
		}
	}

	.wr-chart__grid {
		fill: none;
		stroke: var(--lith-border-subtle);
		stroke-width: 1px;
		stroke-dasharray: 1px 4px;
	}

	.wr-chart__bench {
		fill: none;
		stroke: var(--lith-text-muted);
		stroke-width: 1px;
		stroke-dasharray: 6px 4px;
	}

	.wr-chart__area {
		fill: var(--lith-accent);
		opacity: 0.14;
	}

	/* The line in the accent's edge: the accent itself on the dark
	 * theme, and dark enough to read on the light one. */
	.wr-chart__line {
		fill: none;
		stroke: var(--lith-accent-edge);
		stroke-width: 2px;
		stroke-linejoin: miter;
	}

	/* The newest point: a pixel that glows, and blinks while the race
	 * runs. */
	.wr-chart__head {
		position: absolute;
		inline-size: 7px;
		block-size: 7px;
		translate: -50% -50%;
		background: var(--lith-accent-edge);
		box-shadow: 0 0 10px var(--lith-glow-color);

		[data-state="running"] & {
			background: var(--lith-ember-1);
			animation: wr-blink 0.8s steps(2, jump-none) infinite;
		}
	}

	.wr-chart__top,
	.wr-chart__ref,
	.wr-chart__axis {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: 0.6875rem;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.wr-chart__ref {
		position: absolute;
		inset-inline-end: 0;
		padding-inline: var(--lith-space-1);
		background: var(--lith-surface-1);
		translate: 0 calc(-100% - 3px);
	}

	.wr-chart__axis {
		position: relative;
		block-size: 1.3em;

		& span {
			position: absolute;
			translate: -50% 0;

			&:first-child {
				translate: 0 0;
			}

			&:last-child {
				translate: -100% 0;
			}
		}
	}

	.wr-chart--mini .wr-chart__box {
		block-size: clamp(5rem, 18cqi, 7rem);
	}

	/* ── The tiles: per transaction, sizes, queue, p99 ─────────────── */
	.wr-tiles {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--lith-space-3);

		@container track (width < 46rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		@container track (width < 22rem) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	/* One column that never grows past the tile: the sparkline's canvas
	 * sizes itself from its box. */
	.wr-tile {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: var(--lith-space-2);
		padding: var(--lith-space-3) var(--lith-space-4) var(--lith-space-4);
		border: 1px solid var(--lith-border-subtle);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background: var(--lith-surface-inset);
	}

	.wr-tile__big {
		color: var(--lith-text-1);
		font-family: var(--lith-font-code);
		font-size: var(--lith-text-2xl);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		letter-spacing: -0.02em;
		line-height: 1.1;
	}

	.wr-tile__note {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-xs);
		line-height: 1.4;
	}

	.wr-tile--gauge {
		justify-items: center;
		text-align: center;

		& sb-gauge {
			--sb-gauge-size: min(100%, 9.5rem);
			--sb-ok: var(--lith-accent);
		}
	}

	.wr-tile--p99 sb-sparkline {
		--sb-sparkline-width: 100%;
		--sb-sparkline-height: 2.25rem;
	}

	.wr-tile--queue sb-meter {
		--sb-meter-height: 18px;
		--sb-meter-width: 100%;
		--sb-ok: var(--lith-accent);

		&::part(label) {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			font-weight: 600;
			letter-spacing: var(--lith-tracking-caps);
			text-transform: uppercase;
		}

		&::part(value) {
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			line-height: 1;
		}
	}

	/* Transactions by size: a bar for each power of two. */
	.wr-bars {
		display: grid;
		grid-template-columns: repeat(8, minmax(0, 1fr));
		align-items: end;
		gap: 3px;
		block-size: 5.5rem;
		margin: 0;
		padding: 0;

		& li {
			display: grid;
			grid-template-rows: minmax(0, 1fr) auto;
			gap: var(--lith-space-1);
			block-size: 100%;
		}
	}

	.wr-bars__bar {
		align-self: end;
		block-size: max(2px, calc(var(--h) * 100%));
		background: var(--lith-accent);
		box-shadow: inset 0 0 0 1px var(--lith-accent-edge);
		transition: block-size 160ms var(--lith-ease-glide);

		li[style*="--h: 0.000"] > & {
			background: var(--lith-border);
			box-shadow: none;
		}
	}

	.wr-bars__k {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: 0.625rem;
		text-align: center;
	}

	/* ── The line and the last races ───────────────────────────────── */
	.wr-below {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-6);
	}

	.wr-line,
	.wr-results {
		display: grid;
		gap: var(--lith-space-3);
	}

	.wr-line__empty,
	.wr-results__empty {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	.wr-line__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2);
		margin: 0;
		padding: 0;

		&:empty {
			display: none;
		}
	}

	.wr-wait {
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-2);
		padding: var(--lith-space-1) var(--lith-space-3) var(--lith-space-1) var(--lith-space-1);
		border: 1px solid var(--lith-border);
		background: var(--lith-surface-1);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		transition:
			opacity var(--lith-dur-4) var(--lith-ease-glide),
			translate var(--lith-dur-4) var(--lith-ease-glide),
			background-color var(--lith-dur-4) var(--lith-ease-glide),
			border-color var(--lith-dur-4) var(--lith-ease-glide),
			box-shadow var(--lith-dur-4) var(--lith-ease-glide);

		/* A race that joins slides in from where the line grows. */
		@starting-style {
			opacity: 0;
			translate: 0.75rem 0;
		}

		&.is-mine {
			border-color: var(--lith-accent-edge);
		}

		/* The head of the line: the race on the track. */
		&.is-on {
			border-color: var(--lith-accent-edge);
			background: var(--lith-accent-subtle);
			box-shadow: 0 6px 20px -10px var(--lith-glow-color);
		}
	}

	.wr-wait__place {
		display: grid;
		place-items: center;
		min-inline-size: 1.5rem;
		block-size: 1.5rem;
		background: var(--lith-surface-inset);
		color: var(--lith-text-muted);
		font-weight: 700;
		transition: background-color var(--lith-dur-4) var(--lith-ease-glide), color var(--lith-dur-4) var(--lith-ease-glide);

		/* The race on the track: a pixel arrow, lit. */
		.is-on > & {
			background: var(--lith-accent);
			color: var(--lith-on-accent);
		}

		& i {
			inline-size: 6px;
			block-size: 9px;
			background: currentColor;
			clip-path: polygon(0 0, 2px 0, 2px 1px, 4px 1px, 4px 3px, 6px 3px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 9px, 0 9px);
		}
	}

	.wr-wait__now {
		color: var(--lith-accent-text);
		font-weight: 700;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
		font-size: 0.625rem;
	}

	.wr-wait__race {
		color: var(--lith-text-1);
		font-weight: 600;
	}

	.wr-wait__set {
		color: var(--lith-text-2);
	}

	.wr-you {
		display: none;
		color: var(--lith-accent-text);
		font-family: var(--lith-font-ui);
		font-size: 0.625rem;
		font-weight: 700;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;

		.is-mine & {
			display: inline;
		}
	}

	.wr-results {
		container: results / inline-size;
	}

	/* Fixed columns: a row that arrives changes no other row's layout, so
	 * the rows that glide down keep their look. */
	.wr-table {
		inline-size: 100%;
		border-collapse: collapse;
		table-layout: fixed;
		font-size: var(--lith-text-sm);

		& th:first-child {
			inline-size: 3.5rem;
		}

		& th:nth-child(2) {
			inline-size: 8rem;
		}

		& th,
		& td {
			padding: var(--lith-space-2);
			border-block-end: 1px solid var(--lith-border-subtle);
			text-align: start;
			white-space: nowrap;
		}

		& thead th {
			padding-block-start: 0;
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: 0.6875rem;
			font-weight: 600;
			letter-spacing: 0.02em;
			white-space: normal;
			vertical-align: bottom;
		}

		& tbody th {
			color: var(--lith-text-1);
			font-family: var(--lith-font-ui);
		}

		/* The tab's own race: the row is marked, and says so to screen
		 * readers. */
		& .wr-you {
			position: absolute;
			inline-size: 1px;
			block-size: 1px;
			overflow: hidden;
			clip-path: inset(50%);
		}

		& td {
			color: var(--lith-text-2);
		}

		& .num {
			font-family: var(--lith-font-code);
			font-variant-numeric: tabular-nums;
			text-align: end;
		}

		@container results (width < 40rem) {
			& .wr-table__more {
				display: none;
			}
		}

		@container results (width < 26rem) {
			& .wr-table__p99 {
				display: none;
			}
		}
	}

	.wr-row {
		view-transition-class: writer-race-result;
		transition:
			opacity var(--lith-dur-5) var(--lith-ease-glide),
			background-color 2.4s var(--lith-ease-glide);

		&.is-mine {
			background: var(--lith-accent-subtle);
			box-shadow: inset 3px 0 0 var(--lith-accent);
		}

		& .wr-table__rate {
			color: var(--lith-accent-text);
			font-weight: 700;
		}

		& .wr-table__stopped {
			color: var(--lith-danger);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
		}
	}

	/* A row that just came in arrives with a glow that cools down. */
	.wr-row[data-fresh] {
		@starting-style {
			opacity: 0;
			background-color: var(--lith-glow-color);
		}
	}

	/* ── The landing page's slot ───────────────────────────────────── */
	.wr-embed {
		display: grid;
		gap: var(--lith-space-3);
		padding: var(--lith-space-5);
		border: 1px solid var(--lith-border);
		background: var(--lith-surface-inset);
		transition: border-color var(--lith-dur-4) var(--lith-ease-glide), box-shadow var(--lith-dur-4) var(--lith-ease-glide);

		&:has([data-state="running"]) {
			border-color: var(--lith-accent-edge);
			box-shadow: 0 12px 36px -18px var(--lith-glow-color);
		}
	}

	.wr-embed__go {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--lith-space-2) var(--lith-space-3);

		& .btn[disabled] {
			cursor: not-allowed;
			opacity: 0.6;
			translate: none;
			animation: none;
		}
	}

	.wr-embed__head {
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	.wr-embed__dot {
		inline-size: 6px;
		block-size: 6px;
		background: var(--lith-text-muted);

		.is-live > & {
			background: var(--lith-ok);
			box-shadow: 0 0 8px var(--lith-ok);
		}
	}

	.wr-embed__live {
		display: grid;
		gap: var(--lith-space-2);
	}

	.wr-embed__big {
		color: var(--lith-text-2);

		& b {
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-2xl);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			letter-spacing: -0.02em;
		}
	}

	.wr-embed__meta {
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);
	}

	.wr-embed__running {
		color: var(--lith-accent-text);
		font-weight: 600;
	}

	.wr-chart--mini .wr-chart__ref {
		background: var(--lith-surface-inset);
	}

	/* Forced colours: the lines, bars and blocks in the text colour. */
	@media (forced-colors: active) {
		.wr-chart__line,
		.wr-chart__bench {
			stroke: CanvasText;
		}

		.wr-chart__area {
			fill: CanvasText;
		}

		.wr-bars__bar,
		.wr-progress i {
			forced-color-adjust: none;
			background: CanvasText;
		}

		.wr-choice__options label:has(:checked) span {
			outline: 2px solid CanvasText;
		}
	}
}

/* View transitions belong to the document, outside the scope. The table
 * of results morphs inside one: the rows glide down under a new one,
 * which shows its own @starting-style arrival instead of a fade. */
::view-transition-group(.writer-race-result) {
	animation-duration: var(--lith-dur-5);
	animation-timing-function: var(--lith-ease-glide);
}

::view-transition-new(.writer-race-result):only-child {
	animation: none;
}

}
/* demo: stream */
@layer components {
/* The stream inspector. Numbers roll to their new values through
 * registered properties, which belong to the document: they sit outside
 * the scope. */
@property --stream-count {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}

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

@scope ([data-demo="stream"]) {
	.sx {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-5);
		/* Clear of the stage's live badge. */
		margin-block-start: var(--lith-space-5);
	}

	/* A panel: notched corners in the 8-bit style, round ones when smooth. */
	.sx-panel {
		--_n: calc(3px * var(--lith-notch));
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-4);
		padding: var(--lith-space-5);
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-surface-1);

		@container stage (width < 30rem) {
			padding: var(--lith-space-4);
		}
	}

	.sx-readout {
		background:
			radial-gradient(ellipse at 0% 0%, var(--lith-accent-subtle), transparent 60%),
			var(--lith-surface-1);
	}

	.sx-head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-3) var(--lith-space-5);
	}

	.sx-eyebrow {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-weight: 600;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	/* How fast the frames come, or how long the stream has been quiet. */
	.sx-pace {
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);

		& b {
			color: var(--lith-text-1);
			font-variant-numeric: tabular-nums;
		}
	}

	.sx-dot {
		inline-size: 6px;
		block-size: 6px;
		flex: none;
		background: var(--lith-text-muted);

		.is-live > & {
			background: var(--lith-ok);
			box-shadow: 0 0 8px var(--lith-ok);
			animation: stream-blink 2s steps(2, jump-none) infinite;
		}

		.is-live.is-quiet > & {
			background: var(--lith-accent);
			box-shadow: 0 0 8px var(--lith-glow-color);
			animation: none;
		}
	}

	@keyframes stream-blink {
		50% {
			opacity: 0.3;
		}
	}

	/* The coding the browser and the server agreed on, and what the budget
	 * gave the encoder. */
	.sx-encoder {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--lith-space-5);

		@container stage (width < 26rem) {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--lith-space-3);
		}
	}

	.sx-coding {
		--_n: calc(4px * var(--lith-notch));
		display: grid;
		place-items: center;
		justify-self: start;
		min-inline-size: 6.5rem;
		padding: var(--lith-space-3) var(--lith-space-5);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-accent);
		color: var(--lith-on-accent);
		font-family: var(--lith-font-display);
		font-size: var(--lith-text-2xl);
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.02em;
		transition: background-color var(--lith-dur-3) var(--lith-ease-glide), color var(--lith-dur-3) var(--lith-ease-glide);

		&[data-coding="none"],
		&[data-coding=""] {
			background: var(--lith-surface-2);
			color: var(--lith-text-muted);
		}
	}

	.sx-pairs {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
		gap: var(--lith-space-3) var(--lith-space-5);

		& dt {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
		}

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-md);
			font-weight: 600;
			font-variant-numeric: tabular-nums;
		}

		& code {
			font: inherit;
			color: var(--lith-accent-text);
		}
	}

	/* The two numbers that matter most: how much the last frame shrank,
	 * and what it cost on the wire. */
	.sx-heroes {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lith-space-3);

		@container stage (width < 34rem) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.sx-hero {
		container: hero / inline-size;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: var(--lith-space-2);
		padding: var(--lith-space-4);
		border: 1px solid var(--lith-border-subtle);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		background: var(--lith-surface-inset);
	}

	.sx-big {
		display: flex;
		align-items: baseline;
		color: var(--lith-accent-text);
		font-family: var(--lith-font-code);
		font-size: clamp(2rem, 1.2rem + 8cqi, 3rem);
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.03em;
		font-variant-numeric: tabular-nums;
		transition: opacity var(--lith-dur-4) var(--lith-ease-glide);

		.sx-heroes:not(.is-ready) & {
			opacity: 0.35;
		}
	}

	/* A number that rolls: the counter shows the registered property, which
	 * runs through every whole number on its way to the next value. */
	.sx-count {
		counter-reset: stream-count var(--stream-count);
		/* Shorter than a step, so the number rests between frames. */
		transition: --stream-count var(--lith-dur-2) var(--lith-ease-glide);

		&::before {
			content: counter(stream-count);
		}
	}

	/* The ratio in tenths: 69.1:1 below 10, 69:1 above. */
	.sx-count--ratio {
		counter-reset:
			stream-count round(var(--stream-count) / 10, 1)
			stream-whole round(down, var(--stream-count) / 10, 1)
			stream-tenth mod(var(--stream-count), 10);

		.is-fine > &::before {
			content: counter(stream-whole) "." counter(stream-tenth);
		}
	}

	/* Bytes, or kilobytes with a tenth from 10,000 bytes on. */
	.sx-count--bytes {
		counter-reset:
			stream-count var(--stream-count)
			stream-whole round(down, var(--stream-count) / 1000, 1)
			stream-tenth round(down, mod(var(--stream-count), 1000) / 100, 1);

		.is-kb > &::before {
			content: counter(stream-whole) "." counter(stream-tenth);
		}
	}

	.sx-unit {
		margin-inline-start: 0.08em;
		color: var(--lith-text-muted);
		font-size: 0.5em;
		font-weight: 600;
		letter-spacing: 0;
	}

	.sx-unit--spaced {
		margin-inline-start: 0.3em;
	}

	.sx-caption {
		color: var(--lith-text-2);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
	}

	/* The last frame's events and what went out for them, on one scale:
	 * the wire's bar grows and shrinks with the churn. */
	.sx-bars {
		display: grid;
		gap: var(--lith-space-2);
		margin-block-start: var(--lith-space-2);
	}

	.sx-bar {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr) 4.75rem;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);

		& i {
			position: relative;
			block-size: 10px;
			background: color-mix(in oklch, var(--lith-border) 35%, transparent);
			transition: --stream-fill var(--lith-dur-4) var(--lith-ease-glide);

			&::before {
				content: "";
				position: absolute;
				inset-block: 0;
				inset-inline-start: 0;
				inline-size: max(2px, calc(var(--stream-fill) * 1%));
				background: var(--lith-text-muted);
			}
		}

		&.is-wire i::before {
			background: var(--lith-accent);
			box-shadow: 0 0 10px var(--lith-glow-color);
		}

		& b {
			color: var(--lith-text-1);
			font-weight: 600;
			font-variant-numeric: tabular-nums;
			text-align: end;
		}
	}

	.sx-spark {
		--sb-sparkline-width: 100%;
		--sb-sparkline-height: 3.25rem;
		inline-size: 100%;
		margin-block-start: auto;
	}

	/* The stream so far. */
	.sx-tiles {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--lith-space-3);

		@container stage (width < 34rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		& > div {
			display: grid;
			gap: var(--lith-space-1);
			padding-inline-start: var(--lith-space-3);
			border-inline-start: 2px solid var(--lith-border);
		}

		& dt {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
		}

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-lg);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			white-space: nowrap;
		}
	}

	/* Every stream on the site, and their budget. */
	.sx-streams {
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);

		& b {
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			font-variant-numeric: tabular-nums;
		}
	}

	.sx-meter {
		--sb-meter-width: 100%;
	}

	.sx-budget {
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);

		& b {
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-weight: 600;
		}
	}

	.sx-tiers {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);

		& span {
			color: var(--lith-text-2);
		}
	}


	/* The payload and its controls. */
	.sx-controls {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-3) var(--lith-space-5);

		@container stage (width < 30rem) {
			display: grid;
			flex: 1 1 100%;
		}
	}

	.sx-note {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
	}

	.sx-choice {
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);

		& .choice button {
			min-inline-size: 4.25rem;
			padding-inline: var(--lith-space-3);
		}

		/* On a phone each choice takes a row, its buttons sharing it. */
		@container stage (width < 30rem) {
			display: grid;
			grid-template-columns: 3.25rem minmax(0, 1fr);

			& .choice button {
				min-inline-size: 0;
				padding-inline: var(--lith-space-1);
			}
		}

		/* Sent, and waiting for the stream to bring the change: the pending
		 * pixel walks beside the label. */
		& .choice button[aria-busy="true"] {
			color: var(--lith-text-1);
			cursor: progress;

			&::after {
				content: "";
				inline-size: 4px;
				block-size: 4px;
				background: var(--lith-accent);
				animation: stream-busy 0.8s steps(4, end) infinite;
			}
		}
	}

	@keyframes stream-busy {
		0% {
			translate: 0 -2px;
		}
		25% {
			translate: 2px 0;
		}
		50% {
			translate: 0 2px;
		}
		75% {
			translate: -2px 0;
		}
	}

	.sx-label {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
	}

	.sx-scroll {
		max-block-size: 21rem;
		overflow: auto;
		overscroll-behavior: contain;
		border: 1px solid var(--lith-border-subtle);
		background: var(--lith-surface-inset);
		scrollbar-color: var(--lith-border-strong) transparent;
		scrollbar-width: thin;

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

	.sx-table {
		inline-size: 100%;
		border-collapse: collapse;
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-variant-numeric: tabular-nums;
		line-height: 1.5;
		white-space: nowrap;

		& th,
		& td {
			padding: 1px var(--lith-space-3);
			text-align: end;
		}

		& thead th {
			position: sticky;
			inset-block-start: 0;
			z-index: 1;
			padding-block: var(--lith-space-1);
			background: var(--lith-surface-2);
			color: var(--lith-text-2);
			font-weight: 600;
			box-shadow: inset 0 -1px 0 var(--lith-border);
		}

		& th:first-child {
			text-align: start;
		}

		& tbody th {
			color: var(--lith-text-muted);
			font-weight: 500;
		}

		& tbody tr:nth-child(even) {
			background: color-mix(in oklch, var(--lith-surface-2) 45%, transparent);
		}

		/* A cell that changed in this frame lights up at once, and cools down
		 * once the next frame has taken the mark off. */
		& td {
			color: var(--lith-text-1);
			transition: background-color 1.1s var(--lith-ease-glide), color 1.1s var(--lith-ease-glide);
		}

		& td[data-new] {
			background-color: var(--lith-accent-subtle);
			color: var(--lith-accent-text);
			transition: none;
		}
	}

	/* The landing page's slot. */
	.sx-embed {
		display: grid;
		gap: var(--lith-space-3);
		padding: var(--lith-space-5);
		border: 1px solid var(--lith-border);
		background: var(--lith-surface-inset);

		& .btn {
			justify-self: start;
		}
	}

	.sx-embed__head {
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	.sx-embed__body {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--lith-space-3) var(--lith-space-4);

		& .sx-coding {
			min-inline-size: 5rem;
			padding: var(--lith-space-2) var(--lith-space-4);
			font-size: var(--lith-text-xl);
		}
	}

	.sx-embed__note {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	.sx-embed__tier {
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);

		& code {
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-weight: 600;
		}
	}

	.sx-embed__nums {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--lith-space-3);

		& dt {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
		}

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-md);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			white-space: nowrap;
		}

		& code {
			font: inherit;
			color: var(--lith-accent-text);
		}
	}

	/* Windows' high contrast: the bars and the marks in the system's
	 * colours. */
	@media (forced-colors: active) {
		.sx-bar i::before {
			background: CanvasText;
		}

		.sx-table td[data-new] {
			outline: 1px solid Highlight;
		}
	}
}

}
/* demo: canvas */
@layer components {
/* The canvas. Its rules apply inside its own elements only. */
@scope ([data-demo="canvas"]) {
	/* The palette: sixteen of the site's colours. The neutrals turn over
	 * with the theme, like ink on paper and chalk on slate, so a drawing
	 * keeps its contrast; the hues keep their colour, but the palest three
	 * (glow, flame, gold) take a darker step on paper. The page reads them
	 * into the hex colours sb-pixel-board paints with (expr.go). */
	:scope {
		--canvas-c0: var(--lith-surface-inset);
		--canvas-c1: light-dark(var(--lith-stone-12), var(--lith-stone-1));
		--canvas-c2: light-dark(var(--lith-stone-9), var(--lith-stone-3));
		--canvas-c3: light-dark(var(--lith-stone-7), var(--lith-stone-5));
		--canvas-c4: light-dark(var(--lith-stone-5), var(--lith-stone-7));
		--canvas-c5: light-dark(var(--lith-stone-3), var(--lith-stone-9));
		--canvas-c6: light-dark(var(--lith-ember-3), var(--lith-art-seam-core));
		--canvas-c7: var(--lith-art-seam);
		--canvas-c8: var(--lith-art-seam-edge);
		--canvas-c9: var(--lith-ember-9);
		--canvas-c10: light-dark(var(--lith-ember-6), var(--lith-ember-4));
		--canvas-c11: var(--lith-code-number);
		--canvas-c12: var(--lith-sage-light);
		--canvas-c13: var(--lith-green-dark);
		--canvas-c14: var(--lith-red-light);
		--canvas-c15: var(--lith-red-dark);
	}

	[data-c="0"] { --_c: var(--canvas-c0); }
	[data-c="1"] { --_c: var(--canvas-c1); }
	[data-c="2"] { --_c: var(--canvas-c2); }
	[data-c="3"] { --_c: var(--canvas-c3); }
	[data-c="4"] { --_c: var(--canvas-c4); }
	[data-c="5"] { --_c: var(--canvas-c5); }
	[data-c="6"] { --_c: var(--canvas-c6); }
	[data-c="7"] { --_c: var(--canvas-c7); }
	[data-c="8"] { --_c: var(--canvas-c8); }
	[data-c="9"] { --_c: var(--canvas-c9); }
	[data-c="10"] { --_c: var(--canvas-c10); }
	[data-c="11"] { --_c: var(--canvas-c11); }
	[data-c="12"] { --_c: var(--canvas-c12); }
	[data-c="13"] { --_c: var(--canvas-c13); }
	[data-c="14"] { --_c: var(--canvas-c14); }
	[data-c="15"] { --_c: var(--canvas-c15); }

	/* The brush: the colour of the checked swatch, for the frame and the
	 * palette's legend. */
	.cv:has([data-c="0"] > :checked) { --_brush: var(--canvas-c0); }
	.cv:has([data-c="1"] > :checked) { --_brush: var(--canvas-c1); }
	.cv:has([data-c="2"] > :checked) { --_brush: var(--canvas-c2); }
	.cv:has([data-c="3"] > :checked) { --_brush: var(--canvas-c3); }
	.cv:has([data-c="4"] > :checked) { --_brush: var(--canvas-c4); }
	.cv:has([data-c="5"] > :checked) { --_brush: var(--canvas-c5); }
	.cv:has([data-c="6"] > :checked) { --_brush: var(--canvas-c6); }
	.cv:has([data-c="7"] > :checked) { --_brush: var(--canvas-c7); }
	.cv:has([data-c="8"] > :checked) { --_brush: var(--canvas-c8); }
	.cv:has([data-c="9"] > :checked) { --_brush: var(--canvas-c9); }
	.cv:has([data-c="10"] > :checked) { --_brush: var(--canvas-c10); }
	.cv:has([data-c="11"] > :checked) { --_brush: var(--canvas-c11); }
	.cv:has([data-c="12"] > :checked) { --_brush: var(--canvas-c12); }
	.cv:has([data-c="13"] > :checked) { --_brush: var(--canvas-c13); }
	.cv:has([data-c="14"] > :checked) { --_brush: var(--canvas-c14); }
	.cv:has([data-c="15"] > :checked) { --_brush: var(--canvas-c15); }

	/* The stage: the canvas, and beside it (below it on narrow stages)
	 * the brush, the painters and the pulse. */
	.cv {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "canvas" "side" "notes";
		gap: var(--lith-space-5) var(--lith-space-6);

		@container stage (width >= 42rem) {
			grid-template-columns: minmax(0, 1fr) 13rem;
			grid-template-areas: "canvas side" "notes side";
			align-items: start;
		}
	}

	/* The probe the page resolves the palette's tokens with. It never
	 * transitions: the reduced-motion reset gives every element a short
	 * one, and a read in the middle would return the colour before. */
	.cv__probe {
		position: absolute;
		inline-size: 0;
		block-size: 0;
		overflow: hidden;
		transition-property: none;
	}

	.cv__canvas {
		grid-area: canvas;
		display: grid;
		gap: var(--lith-space-3);
	}

	/* The caption shares its line with the stage's live badge. */
	.cv__caption {
		padding-inline-end: 5.5rem;
	}

	/* The board sits in a frame of its own: notched in the 8-bit style,
	 * rounded in the smooth one. */
	.cv__frame {
		--_n: calc(6px * var(--lith-notch));
		padding: var(--lith-space-2);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background-color: var(--lith-border-subtle);
		box-shadow: inset 0 0 0 1px var(--lith-border);
		transition: background-color var(--lith-dur-4) var(--lith-ease-glide);
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
	}

	/* While you paint, the frame takes your brush's colour. */
	.cv__frame:has(sb-pixel-board:active) {
		background-color: color-mix(in oklch, var(--_brush, var(--lith-accent)) 55%, var(--lith-border-subtle));
		transition-duration: var(--lith-dur-1);
	}

	/* Until the page has read its palette from the tokens, the board
	 * would paint in Starbase's colours: it waits, and then comes into
	 * focus. Its square is kept from the first paint, so nothing moves. */
	sb-pixel-board {
		--sb-pixel-board-size: 100%;
		--sb-border: transparent;
		display: block;
		aspect-ratio: 1;
		transition:
			opacity var(--lith-dur-4) var(--lith-ease-glide),
			filter var(--lith-dur-5) var(--lith-ease-glide),
			scale var(--lith-dur-5) var(--lith-ease-glide);

		&:not([palette]) {
			opacity: 0;
			filter: blur(10px);
			scale: 0.97;
		}

		/* The page's own palette replaces the component's. */
		&::part(palette) {
			display: none;
		}

		&::part(canvas) {
			border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		}
	}

	.cv__problem {
		max-inline-size: 40rem;
	}

	.cv__side {
		grid-area: side;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-6);

		@container stage (30rem <= width < 42rem) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

			& .cv__palette {
				grid-column: 1 / -1;
			}
		}
	}

	/* Headings: small capitals, like the panels'. The canvas's caption
	 * shares its line with the stage's live badge. */
	.cv__caption,
	.cv__palette legend,
	.cv__here h3,
	.cv__pulse h3 {
		margin-block-end: var(--lith-space-3);
		padding: 0;
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-weight: 600;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	/* ── The brush: sixteen swatches, eight to a row ─────────────────── */
	.cv__palette {
		min-inline-size: 0;
		margin: 0;
		padding: 0;
		border: 0;

		/* The brush's colour beside its name. */
		& legend::after {
			content: "";
			display: inline-block;
			inline-size: 0.625rem;
			block-size: 0.625rem;
			margin-inline-start: var(--lith-space-2);
			vertical-align: -0.0625rem;
			background: var(--_brush, transparent);
			box-shadow: 0 0 0 1px color-mix(in oklch, var(--lith-text-1) 25%, transparent);
			transition: background-color var(--lith-dur-3) var(--lith-ease-glide);
		}
	}

	.cv__swatches {
		display: grid;
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: var(--lith-space-1);

		@container stage (width < 42rem) {
			gap: var(--lith-space-2);
		}
	}

	.cv__swatch {
		position: relative;
		display: grid;
		cursor: pointer;
		transition:
			translate var(--lith-dur-1) var(--lith-ease-snap),
			filter var(--lith-dur-2) var(--lith-ease-snap);

		& input {
			--_n: calc(2px * var(--lith-notch));
			appearance: none;
			display: block;
			inline-size: 100%;
			aspect-ratio: 1;
			margin: 0;
			border: 1px solid color-mix(in oklch, var(--lith-text-1) 18%, transparent);
			border-radius: calc(4px * (1 - var(--lith-notch)));
			background: var(--_c);
			clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
			cursor: inherit;
		}

		/* The background swatch paints the canvas back: an eraser's
		 * slash across it. */
		&[data-c="0"] input {
			background:
				linear-gradient(to top right, transparent calc(50% - 1px), var(--lith-text-muted) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
				var(--_c);
		}

		&:hover {
			translate: 0 -1px;
		}

		/* The brush: lifted, on a base of the accent that follows the
		 * swatch's notches. */
		&:has(:checked) {
			translate: 0 -3px;
			filter: drop-shadow(0 3px 0 var(--lith-accent-text));
		}

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

		/* .tip shows the name above the swatch on hover; the focus shows
		 * it too. */
		&.tip {
			text-decoration: none;
			cursor: pointer;
		}

		&:has(:focus-visible) .tip__bubble {
			opacity: 1;
			translate: 0 0;
		}
	}

	/* ── The painters here ─────────────────────────────────────────── */
	.cv__painters {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-3) var(--lith-space-2);
		margin: 0;
		padding-block-end: var(--lith-space-2);
	}

	/* A painter: a face of 5 by 5 pixels in the colour of their brush.
	 * One that arrives grows in from a pixel; a new colour flows in. */
	.cv__painter {
		--_size: 2.25rem;
		position: relative;
		display: grid;
		place-items: center;
		inline-size: var(--_size);
		block-size: var(--_size);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);
		box-shadow: inset 0 0 0 1px var(--lith-border-subtle), inset 0 0 0 2px var(--_ring, transparent);
		color: var(--_c, var(--lith-text-muted));
		transition:
			opacity var(--lith-dur-3) var(--lith-ease-glide),
			scale var(--lith-dur-3) var(--lith-ease-steps),
			color var(--lith-dur-4) var(--lith-ease-glide);

		@starting-style {
			opacity: 0;
			scale: 0.2;
		}

		& svg {
			inline-size: 1.25rem;
			block-size: 1.25rem;
			shape-rendering: crispEdges;
		}

		& path {
			fill: currentColor;
		}

		/* No colour yet, or the background's: the face as an outline. */
		&:is([data-c="-1"], [data-c="0"]) {
			color: var(--lith-text-muted);

			& path {
				fill: none;
				stroke: currentColor;
				stroke-width: 0.3;
			}
		}

		/* Painting now: a ring in their colour that blinks, like the live
		 * dot, until their strokes stop. */
		&[data-active] {
			outline: 2px solid currentColor;
			outline-offset: 2px;
			animation: canvas-painting 1.2s steps(2, jump-none) infinite;
		}
	}

	/* The pixels a painter painted in the last minute, on their face's
	 * corner. */
	.cv__painted {
		position: absolute;
		inset-block-end: 1px;
		inset-inline-end: 2px;
		color: var(--lith-text-2);
		font-family: var(--lith-font-ui);
		font-size: 0.5625rem;
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	/* The tab's own face: the style the document renders for its tag
	 * rings it in the accent and labels it. */
	.cv__painter::after {
		content: var(--_you, none);
		position: absolute;
		inset-block-end: -0.5rem;
		inset-inline: 0;
		inline-size: fit-content;
		margin-inline: auto;
		padding: 1px 3px;
		border-radius: calc(3px * (1 - var(--lith-notch)));
		background: var(--lith-accent);
		color: var(--lith-on-accent);
		font-family: var(--lith-font-ui);
		font-size: 0.5625rem;
		font-weight: 700;
		letter-spacing: var(--lith-tracking-caps);
		line-height: 1.2;
		text-transform: uppercase;
	}

	.cv__more {
		margin-block-start: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-size: var(--lith-text-xs);
	}

	/* ── The pulse: the last minute, second by second ──────────────── */
	.cv__minute {
		display: flex;
		align-items: baseline;
		gap: var(--lith-space-2);
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);
	}

	/* The count rolls to its new value: --canvas-n is an integer the browser
	 * can animate, and the counter shows it. The number itself is in
	 * the element for screen readers. */
	.cv__n {
		color: var(--lith-text-1);
		font-family: var(--lith-font-display);
		font-size: var(--lith-text-2xl);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		counter-reset: canvas-n var(--canvas-n);
		transition: --canvas-n var(--lith-dur-4) var(--lith-ease-glide);

		&::before {
			content: counter(canvas-n) / "";
		}
	}

	.cv__bars {
		display: flex;
		align-items: end;
		gap: 1px;
		block-size: 2.5rem;
		margin-block: var(--lith-space-3);
		border-block-end: 1px solid var(--lith-border);

		& i {
			flex: 1;
			block-size: round(up, calc(var(--h) * 100%), 2px);
			background: var(--lith-accent);
		}

		/* The second under way: the brightest bar. */
		& i:last-child {
			background: var(--lith-accent-strong);
			box-shadow: 0 0 6px var(--lith-glow-color);
		}
	}

	.cv__facts {
		display: grid;
		gap: var(--lith-space-1);
		margin: 0;
		font-size: var(--lith-text-xs);

		& div {
			display: flex;
			justify-content: space-between;
			gap: var(--lith-space-3);
			padding-block: var(--lith-space-1);
			border-block-end: 1px dashed var(--lith-border-subtle);
		}

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

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-ui);
			font-variant-numeric: tabular-nums;
		}
	}

	/* ── The rule of the day, and how to paint ─────────────────────── */
	.cv__notes {
		grid-area: notes;
		display: grid;
		gap: var(--lith-space-2);
		max-inline-size: 40rem;
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);

		& strong {
			color: var(--lith-text-1);
		}

		& p + p {
			color: var(--lith-text-muted);
		}
	}

	@media (forced-colors: active) {
		.cv__swatch input {
			forced-color-adjust: none;
		}

		.cv__swatch:has(:checked) {
			outline: 2px solid Highlight;
			outline-offset: 2px;
		}
	}
}

/* Outside the scope: keyframes and properties are the document's. */
@keyframes canvas-painting {
	50% {
		outline-color: transparent;
	}
}

/* The count's number, animatable. */
@property --canvas-n {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}

}
/* demo: board */
@layer components {
/* The shared board. Its rules apply inside its own island only; the view
 * transitions' rules follow at the end, outside the scope.
 *
 * The page's own state reaches the cards through custom properties that
 * the page's style element sets by id (expr.go, looks): --bd-lift on a card
 * dragged by the pointer, --bd-pick on one picked up from the keyboard,
 * --bd-wait and --bd-busy on a card whose move waits for its frame,
 * --bd-nudge on a refused one, --bd-target on the lane it would go to. */

/* A lane lights up as a drag reaches it, and fades as it leaves. */
@property --bd-target {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

/* A card that just landed glows, and the glow cools down. */
@property --bd-glow {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@scope ([data-demo="board"]) {
	.bd {
		container: bd / inline-size;
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-5);
		-webkit-tap-highlight-color: transparent;
	}

	/* ── Who is here, and what the board costs ─────────────────────── */
	/* One strip of three cells: the people, the last tick with a move,
	 * the frames a second. #board-stats is the stream's target for the
	 * last two; it lays them out as cells of the strip (display:
	 * contents). */
	.bd__top {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		margin-block-start: var(--lith-space-4);
		border: 1px solid var(--lith-border-subtle);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);

		@container bd (width < 38rem) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

			& .bd-here {
				grid-column: 1 / -1;
				border-block-end: 1px solid var(--lith-border-subtle);
			}

			& .bd-tick {
				border-inline-start: 0;
			}
		}

		@container bd (width < 26rem) {
			grid-template-columns: minmax(0, 1fr);

			& .bd-rate {
				border-inline-start: 0;
				border-block-start: 1px solid var(--lith-border-subtle);
			}
		}
	}

	.bd-stats {
		display: contents;
	}

	.bd-cell {
		display: grid;
		align-content: start;
		gap: var(--lith-space-2);
		min-inline-size: 0;
		padding: var(--lith-space-3) var(--lith-space-4);
	}

	.bd-tick,
	.bd-rate {
		border-inline-start: 1px solid var(--lith-border-subtle);
	}

	.bd-cell__label {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
		white-space: nowrap;
	}

	.bd-here__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2);
		min-block-size: 2rem;
		margin: 0;
	}

	.bd-here__more {
		display: grid;
		place-items: center;
		min-inline-size: 2rem;
		block-size: 2rem;
		padding-inline: var(--lith-space-2);
		color: var(--lith-text-2);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		background: var(--lith-surface-2);
	}

	/* An avatar: a pixel face on a notched tile, in the person's hue, its
	 * name in a bubble on hover (screen readers read it in the list). The
	 * viewer's own carries --bd-me and --bd-you (the page's style). A
	 * newcomer pops in from its @starting-style. */
	.bd-av {
		--_c: light-dark(oklch(52% 0.14 var(--h)), oklch(80% 0.12 var(--h)));
		--_n: calc(2px * var(--lith-notch));
		position: relative;
		outline: calc(2px * var(--bd-me, 0)) solid var(--lith-accent);
		outline-offset: 2px;
		transition: scale var(--lith-dur-3) var(--lith-ease-glide), opacity var(--lith-dur-3) var(--lith-ease-glide);

		@starting-style {
			scale: 0.4;
			opacity: 0;
		}

		& > .bd-face {
			inline-size: 2rem;
			block-size: 2rem;
			padding: 0.25rem;
			background: color-mix(in oklch, var(--_c) 16%, var(--lith-surface-inset));
			box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--_c) 45%, transparent);
			clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, 0 calc(100% - var(--_n)), 0 var(--_n));
			border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		}

		&:hover .bd-av__name {
			opacity: 1;
			translate: -50% 0;
		}
	}

	.bd-av__name {
		position: absolute;
		inset-block-end: calc(100% + 8px);
		inset-inline-start: 50%;
		z-index: var(--lith-z-tooltip);
		inline-size: max-content;
		padding: var(--lith-space-1) var(--lith-space-2);
		background: var(--lith-text-1);
		color: var(--lith-bg);
		font-size: var(--lith-text-xs);
		font-weight: 600;
		pointer-events: none;
		opacity: 0;
		translate: -50% 0.25rem;
		transition: opacity var(--lith-dur-2) var(--lith-ease-glide), translate var(--lith-dur-2) var(--lith-ease-glide);

		&::after {
			content: var(--bd-you, "");
		}
	}

	/* A face: pixels in the hue of the element around it (--h). */
	.bd-face {
		display: block;
		color: light-dark(oklch(52% 0.14 var(--h)), oklch(80% 0.12 var(--h)));
		fill: currentColor;
		shape-rendering: crispEdges;
	}

	/* The last tick with a move: moves, one render, frames, with a pixel
	 * arrow from each to the next. */
	.bd-tick__steps {
		display: flex;
		align-items: baseline;
		gap: var(--lith-space-2);
		min-block-size: 2rem;
		margin: 0;
	}

	.bd-tick__step {
		display: flex;
		align-items: baseline;
		gap: 0.3em;
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);

		& dd {
			order: -1;
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			line-height: 1;
		}

		& + &::before {
			content: "";
			order: -2;
			align-self: center;
			inline-size: 10px;
			block-size: 8px;
			margin-inline-end: var(--lith-space-1);
			background: var(--lith-text-muted);
			clip-path: polygon(0 3px, 6px 3px, 6px 0, 10px 4px, 6px 8px, 6px 5px, 0 5px);
		}
	}

	/* One render, whatever the number of tabs: the point of the demo. */
	.bd-tick__step--render dd {
		color: var(--lith-accent-text);
		text-shadow: 0 0 0.6em var(--lith-glow-color);
	}

	.bd-tick__none {
		display: flex;
		align-items: center;
		min-block-size: 2rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	.bd-rate__row {
		display: flex;
		align-items: center;
		gap: var(--lith-space-3);
		min-block-size: 2rem;
	}

	.bd-rate__value {
		min-inline-size: 3ch;
		color: var(--lith-text-1);
		font-family: var(--lith-font-code);
		font-size: var(--lith-text-xl);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	.bd-rate__line {
		--sb-sparkline-width: 7.5rem;
		--sb-sparkline-height: 1.75rem;
	}

	/* ── The board ─────────────────────────────────────────────────── */
	.bd__board {
		position: relative;
	}

	.bd.is-dragging,
	.bd.is-dragging * {
		cursor: grabbing;
	}

	.bd-lanes {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--lith-space-3);
		user-select: none;
		-webkit-user-select: none;

		@container bd (width < 32rem) {
			gap: var(--lith-space-2);
		}
	}

	.bd-lane {
		--_edge: color-mix(in oklch, var(--lith-accent) calc(var(--bd-target) * 70%), var(--lith-border-subtle));
		display: grid;
		grid-template-rows: auto 1fr;
		align-content: start;
		gap: var(--lith-space-3);
		min-inline-size: 0;
		min-block-size: 15rem;
		padding: var(--lith-space-3);
		border: 1px solid var(--_edge);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background:
			linear-gradient(color-mix(in oklch, var(--lith-accent) calc(var(--bd-target) * 9%), transparent), transparent 70%),
			color-mix(in oklch, var(--lith-surface-inset) 80%, transparent);
		box-shadow: 0 0 calc(var(--bd-target) * 22px) calc(var(--bd-target) * -6px) var(--lith-glow-color);
		transition: --bd-target var(--lith-dur-2) var(--lith-ease-glide);

	}

	.bd-lane__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-2);
		font-family: var(--lith-font-display);
		font-size: var(--lith-text-lg);
		font-weight: 600;
		line-height: 1.2;

	}

	.bd-lane__count {
		min-inline-size: 1.6rem;
		padding: 0.1rem 0.4rem;
		background: var(--lith-surface-2);
		color: var(--lith-text-2);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		text-align: center;
		font-variant-numeric: tabular-nums;
	}

	.bd-lane__cards {
		display: grid;
		align-content: start;
		gap: var(--lith-space-2);
		margin: 0;
	}

	/* A narrow board stacks its lanes, and each lane's cards wrap in rows:
	 * wider cards than three thin columns could hold. --bd-flow tells the
	 * drag (expr.go) to read places along the rows. */
	@container bd (width < 32rem) {
		.bd-lanes {
			grid-template-columns: minmax(0, 1fr);
		}

		.bd-lane {
			--bd-flow: 1;
			min-block-size: 0;
		}

		.bd-lane__cards {
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
			min-block-size: 3rem;
		}
	}

	.bd-slot {
		view-transition-class: board-card;
	}

	/* A card: the tag's colour down its edge, the title, the tag and the
	 * face of whoever moved it last. Notched corners, like a button. */
	.bd-card {
		--_t: light-dark(oklch(42% 0.12 var(--t, 60)), oklch(78% 0.11 var(--t, 60)));
		--_n: calc(3px * var(--lith-notch));
		--_lift: var(--bd-lift, 0);
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "grip title" "grip meta";
		align-items: start;
		gap: var(--lith-space-1) var(--lith-space-2);
		inline-size: 100%;
		padding: var(--lith-space-2) var(--lith-space-3) var(--lith-space-2) var(--lith-space-1);
		border: 1px solid color-mix(in oklch, var(--lith-accent-edge) calc(max(var(--bd-glow), var(--bd-pick, 0)) * 100%), var(--lith-border));
		border-inline-start: 3px solid var(--_t);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background:
			radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--lith-accent) calc(var(--bd-glow) * 30%), transparent), transparent 70%),
			var(--lith-surface-1);
		color: var(--lith-text-1);
		text-align: start;
		cursor: grab;
		touch-action: manipulation;
		-webkit-touch-callout: none;
		/* In hand (the pointer drags its ghost): the card leaves a hole.
		 * Picked up from the keyboard: it rises. Waiting for its frame:
		 * faded, a pixel walking in its corner. */
		opacity: calc(1 - 0.62 * var(--_lift) - 0.38 * var(--bd-wait, 0));
		/* No outline at all otherwise: forced colours would draw even a
		 * transparent one. */
		outline: calc(2px * max(var(--_lift), var(--bd-wait, 0))) dashed var(--lith-accent);
		outline-offset: -4px;
		translate: 0 calc(-3px * var(--bd-pick, 0));
		box-shadow: 0 calc(10px * var(--bd-pick, 0)) calc(24px * var(--bd-pick, 0)) calc(-10px * var(--bd-pick, 0)) var(--lith-glow-color);
		animation: var(--bd-nudge, none) 460ms var(--lith-ease-snap);
		transition:
			opacity var(--lith-dur-2) var(--lith-ease-glide),
			translate var(--lith-dur-1) var(--lith-ease-snap),
			border-color var(--lith-dur-1) var(--lith-ease-snap),
			background-color var(--lith-dur-1) var(--lith-ease-snap),
			box-shadow var(--lith-dur-2) var(--lith-ease-glide);

		&:hover {
			border-color: var(--lith-border-strong);
			border-inline-start-color: var(--_t);
			background-color: var(--lith-surface-hover);
		}

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

		/* The pending pixel walks around the corner while the move waits. */
		&::after {
			content: "";
			position: absolute;
			inset-block-start: 7px;
			inset-inline-end: 9px;
			inline-size: 5px;
			block-size: 5px;
			background: var(--lith-accent);
			opacity: var(--bd-wait, 0);
			animation: var(--bd-busy, none) 0.8s steps(4, end) infinite;
		}
	}

	.bd-card[data-tag="design"] {
		--t: 320;
	}

	.bd-card[data-tag="server"] {
		--t: 220;
	}

	.bd-card[data-tag="docs"] {
		--t: 145;
	}

	.bd-card[data-tag="ops"] {
		--t: 85;
	}

	/* A grip: two columns of pixels. On a touch screen it is the handle
	 * that drags; the rest of the card scrolls the page. */
	.bd-card__grip {
		grid-area: grip;
		align-self: stretch;
		inline-size: 10px;
		min-block-size: 1.25rem;
		background:
			radial-gradient(circle at 2px 2px, var(--lith-text-muted) 1.5px, transparent 1.6px) 1px 3px / 6px 6px;
		opacity: 0.35;
		transition: opacity var(--lith-dur-1) var(--lith-ease-snap);

		.bd-card:hover & {
			opacity: 0.9;
		}

		@media (pointer: coarse) {
			inline-size: 18px;
			margin-block: calc(-1 * var(--lith-space-2));
			margin-inline-start: calc(-1 * var(--lith-space-1));
			padding-block: var(--lith-space-2);
			background-position: 5px 9px;
			background-origin: content-box;
			opacity: 0.8;
			touch-action: none;
			cursor: grab;
		}
	}

	.bd-card__title {
		grid-area: title;
		font-size: var(--lith-text-sm);
		font-weight: 600;
		line-height: 1.35;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.bd-card__meta {
		grid-area: meta;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-2);
		min-block-size: 14px;
	}

	.bd-tag {
		padding: 0 0.35rem;
		background: color-mix(in oklch, var(--_t) 14%, transparent);
		color: var(--_t);
		font-family: var(--lith-font-ui);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.02em;

		@container bd (width < 20rem) {
			display: none;
		}
	}

	.bd-card__by {
		margin-inline-start: auto;

		& .bd-face {
			inline-size: 14px;
			block-size: 14px;
		}
	}

	/* The card that moved last: its glow cools down after it lands. The
	 * slot animates --bd-glow, which the card reads; the animation's name
	 * flips with the card's version, so every landing starts it again. */
	.bd-slot[data-landed="0"] {
		animation: bd-landed-a 1.8s var(--lith-ease-glide);
	}

	.bd-slot[data-landed="1"] {
		animation: bd-landed-b 1.8s var(--lith-ease-glide);
	}

	/* The last move, under the lanes. */
	.bd-last {
		grid-column: 1 / -1;
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);
		min-block-size: 1.5rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);

		& b {
			color: var(--lith-text-2);
			font-weight: 600;
		}
	}

	.bd-last__face {
		flex: none;

		& .bd-face {
			inline-size: 1.25rem;
			block-size: 1.25rem;
		}
	}

	/* Where the card would go: a bar of light in the gap above the card
	 * that would follow it, or below the lane's last card (anchor
	 * positioning: the page's style names the anchor). */
	.bd-marker {
		--_e: var(--bd-edge, 0);
		position: absolute;
		position-anchor: --bd-slot;
		inset-block-start: calc(anchor(top) * (1 - var(--_e)) + anchor(bottom) * var(--_e) + (var(--_e) * 2 - 1) * var(--lith-space-1));
		inset-inline: anchor(left) anchor(right);
		z-index: var(--lith-z-raised);
		block-size: 4px;
		translate: 0 -50%;
		background: var(--lith-accent);
		box-shadow: 0 0 12px var(--lith-glow-color);
		pointer-events: none;
		opacity: var(--bd-on, 0);
		transition:
			opacity var(--lith-dur-1) var(--lith-ease-snap),
			inset-block-start var(--lith-dur-1) var(--lith-ease-snap);

		/* Pixel caps at both ends. */
		&::before,
		&::after {
			content: "";
			position: absolute;
			inset-block-start: -3px;
			inline-size: 4px;
			block-size: 10px;
			background: inherit;
		}

		&::before {
			inset-inline-start: 0;
		}

		&::after {
			inset-inline-end: 0;
		}
	}

	/* Along a row of cards, the marker stands upright between two. */
	@container bd (width < 32rem) {
		.bd-marker {
			inset-block: anchor(top) anchor(bottom);
			inset-inline: auto;
			inset-inline-start: calc(anchor(left) * (1 - var(--_e)) + anchor(right) * var(--_e) + (var(--_e) * 2 - 1) * var(--lith-space-1));
			inline-size: 4px;
			block-size: auto;
			translate: -50% 0;

			&::before,
			&::after {
				inset-inline-start: -3px;
				inline-size: 10px;
				block-size: 4px;
			}

			&::before {
				inset-block-start: 0;
			}

			&::after {
				inset-block: auto 0;
				inset-inline-end: auto;
			}
		}
	}

	@supports not (anchor-name: --bd-slot) {
		.bd-marker {
			display: none;
		}
	}

	/* The card under the pointer: a copy of it, lifted and tilted, that
	 * follows the pointer (expr.go moves it). */
	.bd-ghost {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		z-index: var(--lith-z-overlay);
		pointer-events: none;
		rotate: -2deg;
		scale: 1.04;
		filter: drop-shadow(0 14px 18px light-dark(oklch(30% 0.01 60 / 0.28), oklch(0% 0 0 / 0.6)));
		transition: rotate var(--lith-dur-2) var(--lith-ease-snap), scale var(--lith-dur-2) var(--lith-ease-snap);

		@starting-style {
			rotate: 0deg;
			scale: 1;
		}

		& .bd-card {
			border-color: var(--lith-accent-edge);
			border-inline-start-color: var(--_t);
			background: var(--lith-surface-1);
			opacity: 1;
			outline: 0;
			animation: none;
			cursor: grabbing;
		}
	}

	/* ── Under the board ───────────────────────────────────────────── */
	.bd__foot {
		display: grid;
		gap: var(--lith-space-2);
	}

	.bd__help {
		max-inline-size: 46rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	/* ── The landing page's slot ───────────────────────────────────── */
	.bd-embed {
		container: bd / inline-size;
		display: grid;
		gap: var(--lith-space-4);
		padding: var(--lith-space-5);
		border: 1px solid var(--lith-border);
		background: var(--lith-surface-inset);

		& > .btn {
			justify-self: start;
		}

		/* The cells of the page's strip, as a plain column here. */
		& .bd-cell {
			padding: 0;
			border: 0;
		}

		& .bd-tick__step dd,
		& .bd-rate__value {
			font-size: var(--lith-text-lg);
		}
	}

	.bd-embed__head {
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	.bd-embed__dot {
		inline-size: 6px;
		block-size: 6px;
		background: var(--lith-text-muted);

		.is-live > & {
			background: var(--lith-ok);
			box-shadow: 0 0 8px var(--lith-ok);
		}
	}

	.bd-embed__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--lith-space-5);

		@container bd (width < 30rem) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.bd-embed__side {
		display: grid;
		align-content: start;
		gap: var(--lith-space-4);
	}

	/* The board in miniature: a pixel block for each card, its tag's
	 * colour on its edge. One that just moved arrives with a glow. */
	.bd-mini {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--lith-space-2);
	}

	.bd-mini__lane {
		display: grid;
		align-content: start;
		gap: var(--lith-space-2);
		min-block-size: 8.5rem;
		padding: var(--lith-space-2);
		border: 1px solid var(--lith-border-subtle);
		background: var(--lith-surface-1);
	}

	.bd-mini__name {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: 0.625rem;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bd-mini__cards {
		display: grid;
		gap: 4px;
		margin: 0;
	}

	.bd-mini__card {
		--_t: light-dark(oklch(48% 0.13 var(--t, 60)), oklch(78% 0.11 var(--t, 60)));
		block-size: 12px;
		border-inline-start: 3px solid var(--_t);
		background:
			linear-gradient(90deg, color-mix(in oklch, var(--lith-text-muted) 45%, transparent) 0 55%, transparent 55%) 4px 4px / calc(100% - 10px) 3px no-repeat,
			var(--lith-surface-2);
		transition:
			translate var(--lith-dur-5) var(--lith-ease-glide),
			opacity var(--lith-dur-5) var(--lith-ease-glide),
			box-shadow 2.4s var(--lith-ease-glide),
			background-color 2.4s var(--lith-ease-glide);

		&[data-tag="design"] {
			--t: 320;
		}

		&[data-tag="server"] {
			--t: 220;
		}

		&[data-tag="docs"] {
			--t: 145;
		}

		&[data-tag="ops"] {
			--t: 85;
		}

		&[data-fresh] {
			@starting-style {
				translate: 0 -0.5rem;
				opacity: 0;
				background-color: var(--lith-accent);
				box-shadow: 0 0 16px var(--lith-glow-color), inset 0 0 0 1px var(--lith-accent);
			}
		}
	}

	/* Forced colours: the cards keep their edges, the lane a card would go
	 * to and the marker show in the highlight colour. */
	@media (forced-colors: active) {
		.bd-card {
			border-color: CanvasText;
		}

		.bd-lane {
			outline: calc(2px * var(--bd-target)) solid Highlight;
		}

		.bd-marker {
			background: Highlight;
		}
	}
}

/* A refused card shakes, in pixel steps. */
@keyframes bd-nudge {
	0%,
	100% {
		translate: 0 0;
	}
	20%,
	60% {
		translate: -4px 0;
	}
	40%,
	80% {
		translate: 4px 0;
	}
}

@keyframes bd-busy {
	0% {
		translate: 0 0;
	}
	25% {
		translate: -5px 0;
	}
	50% {
		translate: -5px 5px;
	}
	75% {
		translate: 0 5px;
	}
}

/* Two names for one landing, so that each new version starts it again. */
@keyframes bd-landed-a {
	from {
		--bd-glow: 1;
	}
}

@keyframes bd-landed-b {
	from {
		--bd-glow: 1;
	}
}

/* View transitions belong to the document, outside the scope. The board's
 * frames morph in a view transition (sse.Patch's ViewTransition): each
 * card glides from its old place to its new one on the glide curve, and
 * shows its new look all the way (no cross-fade). */
::view-transition-group(.board-card) {
	animation-duration: var(--lith-dur-5);
	animation-timing-function: var(--lith-ease-glide);
}

::view-transition-old(.board-card) {
	animation: none;
	opacity: 0;
}

::view-transition-new(.board-card) {
	animation: none;
}

/* The card that moved: above the others while it flies (the groups stack
 * in the old page's order, which would pass it under a lane's cards),
 * lifted on the way and set down on arrival. */
::view-transition-group(.board-moved) {
	z-index: 1;
}

::view-transition-image-pair(.board-moved) {
	animation: bd-carry var(--lith-dur-5) var(--lith-ease-glide);
}

@keyframes bd-carry {
	40% {
		scale: 1.05;
		filter: drop-shadow(0 12px 14px oklch(0% 0 0 / 0.35));
	}
}

/* While this page drags a card, others' moves snap into place: a
 * transition would hold the dragged copy still while it runs. The
 * transition is scoped to the lanes, so its pseudo-elements are theirs. */
[data-demo="board"] .bd.is-dragging #board-lanes::view-transition-group(*),
[data-demo="board"] .bd.is-dragging #board-lanes::view-transition-image-pair(*),
[data-demo="board"] .bd.is-dragging #board-lanes::view-transition-old(*),
[data-demo="board"] .bd.is-dragging #board-lanes::view-transition-new(*) {
	animation: none;
}

}
/* demo: cursor-party */
@layer components {
/* The cursor party: a floor that every tab's pointer crosses, drawn from
 * one layer that the server renders for everyone. */

/* The counter's numbers as animatable integers: when a frame changes one,
 * it rolls to the new value. Registered properties are global, so they
 * carry the demo's prefix. */
@property --cursor-party-here {
	syntax: "<integer>";
	inherits: true;
	initial-value: 0;
}

@property --cursor-party-rate {
	syntax: "<integer>";
	inherits: true;
	initial-value: 0;
}

@scope ([data-demo="cursor-party"]) {
	:scope {
		/* The party's colours, its own semantic tokens: six of the site's
		 * palette, each a light-dark() pair as in theme.css. In the light
		 * theme they are dark enough to stand out on paper and to carry
		 * light text, in the dark theme light enough for dark text
		 * (contrast_test.go). A cursor's data-h picks one. */
		--_h0: light-dark(var(--lith-ember-8), var(--lith-ember-4));
		--_h1: light-dark(var(--lith-gold-dark), var(--lith-gold-light));
		--_h2: light-dark(var(--lith-sage-dark), var(--lith-sage-light));
		--_h3: light-dark(var(--lith-green-dark), var(--lith-green-light));
		--_h4: light-dark(var(--lith-red-dark), var(--lith-red-light));
		--_h5: light-dark(var(--lith-stone-7), var(--lith-stone-3));
		--_on-hue: light-dark(var(--lith-paper-raised), var(--lith-stone-12));
		--_halo: light-dark(var(--lith-paper-raised), var(--lith-stone-13));

		/* The pointer: an 8-bit arrow on a grid of 2px, its outline and its
		 * fill, as masks over the cursor's colours. With 60 cursors moving,
		 * masks cost Chromium's main thread less than clip-paths. */
		--_arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26' shape-rendering='crispEdges'%3E%3Cpath d='M0 0H2V2H4V4H6V6H8V8H10V10H12V12H14V14H16V18H8V20H6V22H4V24H2V26H0Z'/%3E%3C/svg%3E");
		--_arrow-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26' shape-rendering='crispEdges'%3E%3Cpath d='M2 4H4V6H6V8H8V10H10V12H12V14H14V16H8V18H6V20H4V22H2Z'/%3E%3C/svg%3E");
	}

	/* Without the 8-bit details the arrow has straight edges. */
	:root[data-lith-style="smooth"] :scope {
		--_arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26'%3E%3Cpath d='M0 0L16 15.5L7.3 16.5L0 24.5Z'/%3E%3C/svg%3E");
		--_arrow-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26'%3E%3Cpath d='M2 4.7L11.6 14L6.3 14.6L2 19.3Z'/%3E%3C/svg%3E");
	}

	/* ── The demo's page ─────────────────────────────────────────────── */
	.cp {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-4);
		padding-block-start: var(--lith-space-5);
	}

	/* The floor is the party: a size container named party, so that a
	 * cursor's place is a share of its width (cqi) and height (cqb), the
	 * same on any screen. A drag on it moves the cursor, not the page. */
	.cp__floor {
		--_dot: color-mix(in oklch, var(--lith-border-strong) 60%, transparent);
		--_n: calc(4px * var(--lith-notch));
		container: party / size;
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: clip;
		touch-action: none;
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background:
			radial-gradient(ellipse 60% 70% at 50% 45%, var(--lith-accent-subtle), transparent 70%),
			radial-gradient(circle, var(--_dot) 1px, transparent 1.5px) 0 0 / 24px 24px,
			var(--lith-surface-inset);
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, 0 calc(100% - var(--_n)), 0 var(--_n));

		@container stage (width < 34rem) {
			aspect-ratio: 4 / 3;
		}
	}

	/* What to do, under the cursors, in the middle of the floor. */
	.cp__hint {
		position: absolute;
		inset: 0;
		display: grid;
		place-content: center;
		justify-items: center;
		gap: var(--lith-space-3);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-display);
		font-size: clamp(var(--lith-text-md), 4cqi, var(--lith-text-2xl));
		text-align: center;
		pointer-events: none;
		user-select: none;
	}

	/* The hint's arrow: the cursor's, twice its size. */
	.cp__arrow {
		inline-size: 16px;
		block-size: 26px;
		background: var(--lith-border-strong);
		mask: var(--_arrow) 0 0 / 100% 100% no-repeat;
		scale: 2;
		margin-block-end: 26px;
		transform-origin: 50% 0;
	}

	.cp__bar {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--lith-space-2) var(--lith-space-6);
	}

	.cp__note {
		max-inline-size: 38rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	/* ── Behind the landing page's title ─────────────────────────────── */
	.cp--hero {
		position: absolute;
		inset: 0;
		display: block;
		padding: 0;

		/* The title and the lede stay ahead of the crowd that passes
		 * under them. */
		& .cp-layer {
			opacity: 0.85;
		}

		/* The floor fills the hero. The page still scrolls with a finger:
		 * only a sideways drag moves the cursor. */
		& .cp__floor {
			position: absolute;
			inset: 0;
			aspect-ratio: auto;
			border: 0;
			border-radius: 0;
			background: none;
			clip-path: none;
			touch-action: pan-y pinch-zoom;
		}
	}

	/* The badge in the hero's corner, level with the content's edge. */
	.cp-badge {
		--_n: calc(3px * var(--lith-notch));
		position: absolute;
		inset-block-end: var(--lith-space-5);
		inset-inline-end: max(clamp(var(--lith-space-4), 4vw, var(--lith-space-8)), (100cqi - var(--lith-content-max)) / 2);
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-2);
		padding: var(--lith-space-1) var(--lith-space-3);
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-surface-overlay);
		backdrop-filter: blur(8px);
		color: var(--lith-text-1);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		line-height: 1.6;
		text-decoration: none;
		white-space: nowrap;
		transition: border-color var(--lith-dur-1) var(--lith-ease-snap), translate var(--lith-dur-1) var(--lith-ease-snap);

		&:hover {
			border-color: var(--lith-text-muted);
			translate: 0 -1px;
		}

		&:focus-visible {
			outline-offset: -4px;
		}

		@container party (width < 30rem) {
			inset-block-end: var(--lith-space-3);
		}
	}

	.cp-badge__title {
		font-weight: 600;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	/* The stream's light: lit while the page's stream is open ($_live). */
	.cp-badge__dot {
		inline-size: 6px;
		block-size: 6px;
		background: var(--lith-text-muted);
		border-radius: calc(50% * (1 - var(--lith-notch)));

		.is-live > & {
			background: var(--lith-ok);
			box-shadow: 0 0 8px var(--lith-ok);
		}
	}

	/* ── The counter ─────────────────────────────────────────────────── */
	.cp-count {
		display: inline-flex;
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		white-space: nowrap;
		transition:
			--cursor-party-here var(--lith-dur-3) var(--lith-ease-glide),
			--cursor-party-rate var(--lith-dur-5) var(--lith-ease-glide);

		/* The numbers are counters, set from the properties a frame
		 * brings: they roll while the properties ease. */
		& b {
			color: var(--lith-text-1);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
		}

		& b[data-n="here"]::before {
			counter-reset: here var(--cursor-party-here);
			content: counter(here);
		}

		& b[data-n="rate"]::before {
			counter-reset: rate var(--cursor-party-rate);
			content: counter(rate);
		}

		& i::before {
			content: "·";
			padding-inline: 0.4em;
			font-style: normal;
		}

		/* Starbase's sb-sparkline: the moves of the last 30 seconds. It
		 * holds its place before its script defines it. */
		& sb-sparkline {
			--sb-sparkline-width: 4.5rem;
			--sb-sparkline-height: 1rem;
			margin-inline-start: var(--lith-space-3);
		}

		& sb-sparkline:not(:defined) {
			display: inline-block;
			inline-size: var(--sb-sparkline-width);
			block-size: var(--sb-sparkline-height);
		}

		.cp-badge & {
			align-items: center;
			padding-inline-start: var(--lith-space-2);
			border-inline-start: 1px solid var(--lith-border);

			/* On a phone the badge keeps its numbers and leaves the line out. */
			@container party (width < 34rem) {
				& sb-sparkline {
					display: none;
				}
			}
		}

		/* On the demo's page the numbers stand out. */
		.cp__bar & {
			align-items: baseline;
			font-size: var(--lith-text-sm);

			& b {
				color: var(--lith-accent-text);
				font-size: var(--lith-text-xl);
				line-height: 1;
			}

			& sb-sparkline {
				--sb-sparkline-width: 9rem;
				--sb-sparkline-height: 1.75rem;
				align-self: center;
				margin-inline-start: var(--lith-space-4);
			}
		}
	}

	/* ── The cursors ─────────────────────────────────────────────────── */
	.cp-layer {
		position: absolute;
		inset: 0;
		isolation: isolate;
		pointer-events: none;
	}

	/* A cursor. Its place is --x and --y, in percent of the floor. The <i>
	 * stays in the floor's corner: its name tag (<b>), which carries the
	 * arrow, and the two sparks of its trail (::before, ::after) each ease
	 * there on their own, the sparks more slowly. */
	.cp-layer > i {
		--_c: var(--_h0);
		--_x: calc(var(--x) * 1cqi);
		--_y: calc(var(--y) * 1cqb);
		position: absolute;
		inset: 0 auto auto 0;
		font-style: normal;
		transition: opacity var(--lith-dur-2) var(--lith-ease-glide);

		/* A cursor that arrives fades in where it is. */
		@starting-style {
			opacity: 0;
		}

		&[data-h="1"] {
			--_c: var(--_h1);
		}

		&[data-h="2"] {
			--_c: var(--_h2);
		}

		&[data-h="3"] {
			--_c: var(--_h3);
		}

		&[data-h="4"] {
			--_c: var(--_h4);
		}

		&[data-h="5"] {
			--_c: var(--_h5);
		}

		/* The trail: sparks of the cursor's colour. At rest they hide under
		 * the arrow; in motion they fall behind it along its path. */
		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: 0 auto auto 0;
			z-index: 0;
			inline-size: 6px;
			block-size: 6px;
			border-radius: calc(50% * (1 - var(--lith-notch)));
			background: var(--_c);
			box-shadow: 0 0 10px 1px color-mix(in oklch, var(--_c) 60%, transparent);
			opacity: 0.6;
			translate: calc(var(--_x) + 3px) calc(var(--_y) + 9px);
			transition: translate 180ms linear;
		}

		&::after {
			inline-size: 4px;
			block-size: 4px;
			opacity: 0.35;
			translate: calc(var(--_x) + 4px) calc(var(--_y) + 10px);
			transition-duration: 260ms;
		}
	}

	/* A crowd of 24 or more leaves the sparks out: every spark is one more
	 * transition that each frame starts again, and in a crowd the trails
	 * are clutter more than motion. */
	.cp-layer:has(> i:nth-child(24)) > i::before,
	.cp-layer:has(> i:nth-child(24)) > i::after {
		display: none;
	}

	/* A cursor that has not moved for a few seconds fades away, slowly at
	 * first; it comes back at once with its next move. */
	.cp-layer > i[data-idle] {
		opacity: 0;
		transition: opacity 1.6s var(--lith-ease-exit);
	}

	/* The name tag, under the arrow and to its right; near the floor's
	 * right or bottom edge it moves to the other side (--_fx, --_fy). Its
	 * 8-bit corners are four shadows of its colour, a pixel short at each
	 * corner. The arrow hangs on it, its tip on the cursor's place. */
	.cp-layer b {
		--_fx: 0;
		--_fy: 0;
		--_n: calc(2px * var(--lith-notch));
		--_tip-x: calc(-17px + var(--_fx) * (100% + 22px));
		--_tip-y: calc(-25px + var(--_fy) * (100% + 31px));
		position: absolute;
		inset: 0 auto auto 0;
		z-index: 1;
		padding: 0 4px;
		border-radius: calc(4px * (1 - var(--lith-notch)));
		background: var(--_c);
		box-shadow:
			var(--_n) 0 0 0 var(--_c),
			calc(-1 * var(--_n)) 0 0 0 var(--_c),
			0 var(--_n) 0 0 var(--_c),
			0 calc(-1 * var(--_n)) 0 0 var(--_c);
		color: var(--_on-hue);
		font-family: var(--lith-font-ui);
		font-size: 11px;
		font-weight: 600;
		line-height: 15px;
		white-space: nowrap;
		translate:
			calc(var(--_x) + 17px - var(--_fx) * (100% + 22px))
			calc(var(--_y) + 25px - var(--_fy) * (100% + 31px));
		transform-origin: var(--_tip-x) var(--_tip-y);
		transition:
			translate 120ms linear,
			scale var(--lith-dur-3) var(--lith-ease-snap),
			opacity var(--lith-dur-3) var(--lith-ease-glide);

		/* It arrives out of its arrow's tip. */
		@starting-style {
			scale: 0.2;
			opacity: 0;
		}

		/* The arrow: its outline, and its fill on top. */
		&::before,
		&::after {
			content: "";
			position: absolute;
			inset-inline-start: var(--_tip-x);
			inset-block-start: var(--_tip-y);
			inline-size: 16px;
			block-size: 26px;
			background: var(--_halo);
			mask: var(--_arrow) 0 0 / 100% 100% no-repeat;
		}

		&::after {
			background: var(--_c);
			mask-image: var(--_arrow-fill);
		}
	}

	/* A tag flips where it would leave the floor: past --_edge-x percent
	 * of the floor's width, the share a tag leaves free, which is smaller
	 * on a narrow floor, and past --_edge-y of its height. */
	@supports (inline-size: round(down, 1px, 1px)) {
		.cp-layer b {
			--_edge-x: 90;
			--_edge-y: 92;
			--_fx: min(1, round(down, var(--x) / var(--_edge-x), 1));
			--_fy: min(1, round(down, var(--y) / var(--_edge-y), 1));

			@container party (width < 60rem) {
				--_edge-x: 82;
			}

			@container party (width < 30rem) {
				--_edge-x: 66;
			}

			@container party (height < 22rem) {
				--_edge-y: 84;
			}
		}
	}

	/* Reduced motion: no trail, and every frame puts each cursor where it
	 * is, without easing. */
	@media (prefers-reduced-motion: reduce) {
		.cp-layer > i::before,
		.cp-layer > i::after {
			display: none;
		}

		.cp-layer > i,
		.cp-layer > i[data-idle],
		.cp-layer b,
		.cp-count {
			transition: none;
		}
	}

	/* Forced colours: the arrows and tags in the system's colours. */
	@media (forced-colors: active) {
		.cp-layer b {
			border: 1px solid CanvasText;

			&::before {
				background: CanvasText;
				forced-color-adjust: none;
			}

			&::after {
				background: Canvas;
				forced-color-adjust: none;
			}
		}
	}
}

}
/* demo: checkboxes */
@layer components {
/* A million checkboxes. Its rules apply inside its own elements only. The
 * page measures the grid (expr.go, measure): --cb-pitch is the distance
 * from box to box, and a row of the list is a tile and --cb-chrome. */
@scope ([data-demo="checkboxes"]) {
	.cb {
		--cb-chrome: 34px;
		--_pitch: var(--cb-pitch, 20px);
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-4);
	}

	/* ── The jump field ─────────────────────────────────────────────── */
	.cb-jump {
		display: grid;
		gap: var(--lith-space-1);
		inline-size: min(100%, 19rem);

		& label {
			color: var(--lith-text-2);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			font-weight: 600;
			letter-spacing: 0.02em;
			transition: color var(--lith-dur-1) var(--lith-ease-snap);
		}

		&:has(:focus-visible) label {
			color: var(--lith-accent-text);
		}

		& .input {
			font-family: var(--lith-font-code);
			font-variant-numeric: tabular-nums;
		}
	}

	.cb-jump__row {
		display: flex;
		gap: var(--lith-space-2);

		& .btn {
			flex: none;
			min-block-size: auto;
		}
	}

	/* ── The numbers ────────────────────────────────────────────────── */
	.cb-stats {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr);
		margin: 0;
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);

		@container stage (width < 32rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.cb-stat {
		display: grid;
		align-content: start;
		gap: var(--lith-space-1);
		padding: var(--lith-space-3) var(--lith-space-4);

		& + & {
			border-inline-start: 1px solid var(--lith-border-subtle);
		}

		& dt {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			letter-spacing: var(--lith-tracking-caps);
			text-transform: uppercase;
		}

		/* Numbers in the code face: every digit unmistakable. */
		& dd {
			order: -1;
			margin: 0;
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			line-height: 1.25;
		}
	}

	/* The rate beside its last 30 seconds. On a narrow stage it takes a
	 * row of its own, under the other two. */
	.cb-stat--rate {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--lith-space-3);

		& dt {
			grid-column: 1 / -1;
		}

		& dd {
			min-inline-size: 2ch;
		}

		@container stage (width < 32rem) {
			grid-column: 1 / -1;
			order: 1;
			border-block-start: 1px solid var(--lith-border-subtle);

			.cb-stat + & {
				border-inline-start: 0;
			}
		}
	}

	.cb-stat__trend {
		--sb-sparkline-width: 100%;
		--sb-sparkline-height: 1.5rem;
		order: -1;
		align-self: center;
		min-inline-size: 0;
	}

	.cb__problem {
		margin-block: calc(-1 * var(--lith-space-2));
	}

	/* ── The grid ───────────────────────────────────────────────────── */
	.cb__frame {
		container: cb-frame / inline-size;
		/* The list's scroller is in its shadow root: its timeline is named
		 * there through ::part and reaches the rail from here. */
		timeline-scope: --cb-grid;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-2);
	}

	/* Where the view is in the million: a mark on a rail that follows the
	 * list's scroll (a scroll-driven animation). A browser without scroll
	 * timelines shows no rail rather than a mark that stays put. */
	.cb-where {
		display: none;
		align-items: center;
		gap: var(--lith-space-3);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: 0.6875rem;
		font-variant-numeric: tabular-nums;
	}

	.cb-where__rail {
		position: relative;
		flex: 1;
		block-size: 2px;
		background:
			linear-gradient(90deg, transparent calc(25% - 1px), var(--lith-border-strong) 0 calc(25% + 1px), transparent 0 calc(50% - 1px), var(--lith-border-strong) 0 calc(50% + 1px), transparent 0 calc(75% - 1px), var(--lith-border-strong) 0 calc(75% + 1px), transparent 0) 0 50% / 100% 6px no-repeat,
			linear-gradient(var(--lith-border), var(--lith-border));
	}

	.cb-where__mark {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 0;
		inline-size: 10px;
		block-size: 6px;
		translate: -50% -50%;
		background: var(--lith-accent);
		box-shadow: 0 0 8px var(--lith-glow-color);
	}

	@supports (animation-timeline: scroll()) and (timeline-scope: --cb-grid) {
		.cb-where {
			display: flex;
		}

		.cb-grid::part(scroller) {
			scroll-timeline: --cb-grid block;
		}

		.cb-where__mark {
			animation: cb-where linear both;
			animation-timeline: --cb-grid;
		}
	}

	.cb-grid {
		/* The bars that stand in for tiles on their way. */
		--sb-surface-hover: color-mix(in oklch, var(--lith-border-subtle) 50%, transparent);
		block-size: min(38rem, 70dvh);
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background:
			radial-gradient(ellipse 80% 50% at 50% 0%, var(--lith-accent-subtle), transparent),
			var(--lith-surface-inset);
		box-shadow: inset 0 1px 0 var(--lith-border-subtle);

		/* The rows fade out at the frame's lower edge. */
		&::part(scroller) {
			mask-image: linear-gradient(#000 calc(100% - 1.5rem), transparent);
		}
	}

	/* Before the list is defined its slots show as they will: tiles, one
	 * or two to a row, cut off at the list's height. */
	sb-virtual-scroll:not(:defined) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: calc(16 * var(--_pitch) + var(--cb-chrome));
		overflow: hidden;

		@container cb-frame (width >= 600px) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.cb-slot {
		display: grid;
		justify-items: center;
		align-content: start;
		padding-block-start: 0.75rem;
	}

	.cb-tile {
		display: grid;
		grid-template-rows: 1.25rem auto;
		inline-size: calc(16 * var(--_pitch) - 2px);

		/* A tile that arrives, after a jump or further down, settles in. */
		transition:
			opacity var(--lith-dur-3) var(--lith-ease-glide),
			translate var(--lith-dur-3) var(--lith-ease-glide);

		@starting-style {
			opacity: 0;
			translate: 0 0.5rem;
		}
	}

	.cb-tile__head {
		display: flex;
		align-items: start;
		gap: var(--lith-space-3);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: 0.6875rem;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	/* Other tabs watch this tile too: it lights up like the live badge,
	 * and fades in when one arrives. */
	.cb-tile__eyes {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		color: var(--lith-text-2);
		transition: opacity var(--lith-dur-3) var(--lith-ease-glide);

		@starting-style {
			opacity: 0;
		}

		&::before {
			content: "";
			inline-size: 5px;
			block-size: 5px;
			background: var(--lith-ok);
			box-shadow: 0 0 6px var(--lith-ok);
		}
	}

	.cb-tile__on {
		margin-inline-start: auto;
		color: var(--lith-accent-text);
	}

	.cb-boxes {
		display: grid;
		grid-template-columns: repeat(16, calc(var(--_pitch) - 2px));
		grid-auto-rows: calc(var(--_pitch) - 2px);
		gap: 2px;
	}

	/* ── A box ──────────────────────────────────────────────────────────
	 * A socket when clear, a lit lamp when checked: filled against hollow
	 * tells them apart without the colour. The lamp follows the checked
	 * attribute, which is what the server sent: :checked would follow the
	 * browser's own toggling, and no browser matches it on an
	 * indeterminate box. --cb-lit, a registered number, is how far the lamp
	 * is lit; the fill, the edge and the glow follow it, so one transition
	 * moves them together. The key under the grid draws the same states. */
	.cb-boxes > input,
	.cb-key {
		--cb-lit: 0;
		--_on: calc(var(--cb-lit) * 100%);
		appearance: none;
		margin: 0;
		border: 1px solid color-mix(in oklch, var(--lith-accent-edge) var(--_on), var(--lith-border));
		border-radius: calc(var(--lith-radius-sm) * 0.5 * (1 - var(--lith-notch)));
		background: color-mix(in oklch, var(--lith-accent) var(--_on), var(--lith-surface-1));
		box-shadow:
			inset 2px 2px 0 -1px color-mix(in oklch, var(--lith-art-seam-core) var(--_on), transparent),
			0 0 calc(var(--cb-lit) * 6px) color-mix(in oklch, var(--lith-glow-color) var(--_on), transparent);
	}

	.cb-boxes > input[checked],
	.cb-key.is-on {
		--cb-lit: 1;
	}

	.cb-boxes > input {
		inline-size: 100%;
		block-size: 100%;
		cursor: pointer;
		/* A lamp that lights flares past full and settles: the curve
		 * overshoots, and the glow grows with it. */
		transition: --cb-lit var(--lith-dur-4) cubic-bezier(0.2, 2.2, 0.4, 1);

		&:not([checked]):hover {
			border-color: var(--lith-text-muted);
			background: var(--lith-surface-hover);
		}

		&[checked]:hover {
			--cb-lit: 1.25;
		}

		&:focus-visible {
			position: relative;
			z-index: 1;
			outline: 2px solid var(--lith-focus);
			outline-offset: 2px;
		}
	}

	/* Sent, waiting for the frame that flips it: a dashed edge, and the
	 * lamp blinks toward its new state (in the key it holds still). */
	.cb-boxes > input:indeterminate,
	.cb-key.is-sent {
		border-style: dashed;
		border-color: var(--lith-accent-edge);
	}

	.cb-key.is-sent {
		--cb-lit: 0.35;
	}

	.cb-boxes > input:indeterminate {
		animation: cb-sent 0.6s steps(2, jump-none) infinite;
	}

	/* The box asked for: a ring closes in on it as it takes the focus. */
	@media (prefers-reduced-motion: no-preference) {
		.cb-boxes > input:focus-visible {
			animation: cb-found var(--lith-dur-5) var(--lith-ease-glide);
		}

		.cb-boxes > input:focus-visible:indeterminate {
			animation:
				cb-found var(--lith-dur-5) var(--lith-ease-glide),
				cb-sent 0.6s steps(2, jump-none) infinite;
		}
	}

	/* ── Under the grid ─────────────────────────────────────────────── */
	.cb__foot {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: start;
		gap: var(--lith-space-3) var(--lith-space-6);
	}

	.cb__hint {
		flex: 1 1 18rem;
		max-inline-size: 38rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	.cb-legend {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2) var(--lith-space-4);
		margin: 0;
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);

		& li {
			display: flex;
			align-items: center;
			gap: var(--lith-space-2);
		}
	}

	.cb-key {
		inline-size: 0.875rem;
		block-size: 0.875rem;
	}

	@media (forced-colors: active) {
		.cb-boxes > input,
		.cb-key {
			forced-color-adjust: none;
			border-color: CanvasText;
			background: Canvas;
		}

		.cb-boxes > input[checked],
		.cb-key.is-on {
			border-color: Highlight;
			background: Highlight;
			box-shadow: none;
		}

		.cb-boxes > input:focus-visible {
			outline-color: CanvasText;
		}
	}
}

/* Global at-rules stay outside the scope. */
@property --cb-lit {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

/* A lamp that waits blinks half lit, between its state and the other. */
@keyframes cb-sent {
	50% {
		--cb-lit: 0.45;
	}
}

@keyframes cb-found {
	from {
		outline-offset: 12px;
		outline-color: transparent;
	}
}

@keyframes cb-where {
	to {
		inset-inline-start: 100%;
	}
}

}
/* demo: life */
@layer components {
/* The Game of Life. Its rules apply inside its own elements only. */
@scope ([data-demo="life"]) {
	.life {
		/* The people's colours and the soup's, each with its light and its
		 * dark value; --me is the one this tab draws in. */
		--life-a: light-dark(oklch(55% 0.2 27), oklch(70% 0.19 27));
		--life-b: light-dark(oklch(62% 0.17 52), oklch(76% 0.165 60));
		--life-c: light-dark(oklch(66% 0.14 92), oklch(87% 0.15 98));
		--life-d: light-dark(oklch(57% 0.15 148), oklch(79% 0.18 148));
		--life-e: light-dark(oklch(58% 0.1 200), oklch(81% 0.12 196));
		--life-f: light-dark(oklch(53% 0.18 258), oklch(72% 0.15 252));
		--life-g: light-dark(oklch(52% 0.2 302), oklch(73% 0.17 302));
		--life-h: light-dark(oklch(58% 0.2 352), oklch(76% 0.16 352));
		--life-w: light-dark(var(--lith-stone-8), var(--lith-stone-3));
		/* The board, with a dot where a cell is dead. */
		--life-board: light-dark(var(--lith-paper-raised), var(--lith-stone-13));
		--life-dot: light-dark(var(--lith-stone-3), var(--lith-stone-8));
		--me: var(--life-b);

		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-4);
	}

	/* ── Counters ───────────────────────────────────────────────────── */
	.life__stats {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: var(--lith-space-3) var(--lith-space-6);
		/* Below the stage's "live" badge. */
		padding-block-start: var(--lith-space-3);

		& dl {
			display: grid;
			grid-template-columns: repeat(4, auto);
			justify-content: start;
			gap: var(--lith-space-2) var(--lith-space-8);
			margin: 0;
		}

		@container stage (width < 34rem) {
			grid-template-columns: minmax(0, 1fr);

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

	.life__stat {
		display: grid;
		gap: 2px;
		min-inline-size: 0;

		& dt {
			overflow: hidden;
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			letter-spacing: var(--lith-tracking-caps);
			text-overflow: ellipsis;
			text-transform: uppercase;
			white-space: nowrap;
		}

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			font-weight: 700;
			line-height: 1.1;
			font-variant-numeric: tabular-nums;
		}

		&:first-child dd {
			color: var(--lith-accent-text);
		}

		/* On a phone the four counters share one row: smaller, and the
		 * labels in lower case, which fits "Generation" in a quarter. */
		@container stage (width < 34rem) {
			& dt {
				font-size: 0.6875rem;
				letter-spacing: 0;
				text-transform: none;
			}

			& dd {
				font-size: var(--lith-text-lg);
			}
		}
	}

	.life__history {
		--sb-sparkline-width: 10rem;
		--sb-sparkline-height: 2.25rem;

		@container stage (width < 34rem) {
			display: none;
		}
	}

	/* ── The board ──────────────────────────────────────────────────── */
	/* The field takes the pointer and the keyboard; the board inside it is
	 * what the stream morphs, ten times a second. */
	.life__field {
		--_n: calc(4px * var(--lith-notch));
		position: relative;
		aspect-ratio: 80 / 50;
		background: var(--life-board);
		box-shadow: inset 0 0 0 1px var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, 0 calc(100% - var(--_n)), 0 var(--_n));
		cursor: crosshair;
		touch-action: manipulation;
		/* Scrolled out of view, the board is morphed but not drawn. */
		content-visibility: auto;
		-webkit-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;

		/* Drawing follows the finger: the page does not scroll under it. */
		&.is-drawing {
			touch-action: none;
		}

		/* The clip-path cuts an outline off: the focus ring sits inside. */
		&:focus-visible {
			outline: none;
			box-shadow: inset 0 0 0 2px var(--lith-focus);
		}
	}

	.life__board {
		position: absolute;
		inset: 1px;
		display: grid;
		grid-template-columns: repeat(80, minmax(0, 1fr));
		grid-template-rows: repeat(50, minmax(0, 1fr));

		/* A cell is a square of its colour painted in the middle of its
		 * box, a circle in the smooth style: no transform, which would
		 * give each of the 4,000 cells a layer of its own to paint. A dead
		 * cell is a small dot. A cell that dies shrinks and cools into its
		 * dot in three steps, one a generation, so what moves leaves a
		 * short trail; a cell born grows in two. Stepped transitions
		 * repaint a cell only when it changes, which keeps the page's
		 * work low at ten frames a second. */
		& > p {
			color: var(--life-dot);
			background: radial-gradient(circle closest-side, currentColor calc(92% + 60% * var(--lith-notch)), transparent calc(100% + 60% * var(--lith-notch))) 50% 50% / 24% 24% no-repeat;
			transition:
				color 300ms steps(3, start),
				background-size 300ms steps(3, start);
		}

		& > p:not(._) {
			color: var(--c);
			background-size: 86% 86%;
			transition-duration: 100ms;
			transition-timing-function: steps(2, start);
		}
	}

	.life__board > .a,
	.life__share > .a,
	.life__swatch.a {
		--c: var(--life-a);
	}

	.life__board > .b,
	.life__share > .b,
	.life__swatch.b {
		--c: var(--life-b);
	}

	.life__board > .c,
	.life__share > .c,
	.life__swatch.c {
		--c: var(--life-c);
	}

	.life__board > .d,
	.life__share > .d,
	.life__swatch.d {
		--c: var(--life-d);
	}

	.life__board > .e,
	.life__share > .e,
	.life__swatch.e {
		--c: var(--life-e);
	}

	.life__board > .f,
	.life__share > .f,
	.life__swatch.f {
		--c: var(--life-f);
	}

	.life__board > .g,
	.life__share > .g,
	.life__swatch.g {
		--c: var(--life-g);
	}

	.life__board > .h,
	.life__share > .h,
	.life__swatch.h {
		--c: var(--life-h);
	}

	.life__board > .w,
	.life__share > .w {
		--c: var(--life-w);
	}

	/* What this tab drew and the server has not confirmed yet. */
	.life__marks {
		position: absolute;
		inset: 1px;
		inline-size: calc(100% - 2px);
		block-size: calc(100% - 2px);
		pointer-events: none;

		& path {
			fill: var(--me);
			opacity: 0.6;
		}

		&.is-clearing path {
			fill: var(--lith-text-muted);
			opacity: 0.4;
		}
	}

	/* The outline of what a tap would drop, under the pointer or the
	 * keyboard's cursor; the stamp is the one dropped, until the stream
	 * confirms it. */
	.life__cursor {
		position: absolute;
		inset: 1px;
		display: none;
		pointer-events: none;

		&.is-on {
			display: block;
		}
	}

	.life__shape {
		position: absolute;
		inset-inline-start: calc((var(--x) - var(--ax)) * 100% / 80);
		inset-block-start: calc((var(--y) - var(--ay)) * 100% / 50);
		inline-size: calc(var(--w) * 100% / 80);
		block-size: calc(var(--h) * 100% / 50);
		display: none;
		overflow: visible;
		rotate: calc(var(--turn) * 90deg);
		transform-origin: calc((var(--ax) + 0.5) / var(--w) * 100%) calc((var(--ay) + 0.5) / var(--h) * 100%);
		transition: rotate var(--lith-dur-2) var(--lith-ease-snap);

		& rect {
			fill: color-mix(in oklch, var(--me) 12%, transparent);
			stroke: color-mix(in oklch, var(--me) 75%, transparent);
			stroke-width: 1px;
			vector-effect: non-scaling-stroke;
		}

		& path {
			fill: var(--me);
			opacity: 0.65;
		}
	}

	/* On its side: the same shape for the board on its side, below. */
	.life__shape--side {
		visibility: hidden;
		inset-inline-start: calc((var(--y) - var(--ay)) * 100% / 50);
		inset-block-start: calc((var(--x) - var(--ax)) * 100% / 80);
		inline-size: calc(var(--h) * 100% / 50);
		block-size: calc(var(--w) * 100% / 80);
		rotate: calc(var(--turn) * -90deg);
		transform-origin: calc((var(--ay) + 0.5) / var(--h) * 100%) calc((var(--ax) + 0.5) / var(--w) * 100%);
	}

	.life__cursor[data-tool="draw"] > [data-shape="draw"],
	.life__cursor[data-tool="glider"] > [data-shape="glider"],
	.life__cursor[data-tool="spaceship"] > [data-shape="spaceship"],
	.life__cursor[data-tool="pulsar"] > [data-shape="pulsar"],
	.life__cursor[data-tool="gun"] > [data-shape="gun"] {
		display: block;
	}

	/* The stamp waits for its frame, and says so. */
	.life__cursor--stamp .life__shape {
		animation: life-pending 0.8s steps(2, jump-none) infinite;

		& path {
			opacity: 0.9;
		}
	}

	/* A narrow stage stands the board on its side: the same 80 × 50 cells,
	 * the same frames, laid out in 50 columns of 80, so that a phone shows
	 * them half again as large. The pointer's maths swap the axes too. */
	@container stage (width < 30rem) {
		.life__field {
			aspect-ratio: 50 / 80;
		}

		.life__board {
			grid-template-columns: repeat(50, minmax(0, 1fr));
			grid-template-rows: repeat(80, minmax(0, 1fr));
			grid-auto-flow: column;
		}

		.life__marks path {
			transform: matrix(0, 0.625, 1.6, 0, 0, 0);
		}

		.life__shape {
			visibility: hidden;
		}

		.life__shape--side {
			visibility: visible;
		}
	}

	/* ── The colours' shares ─────────────────────────────────────────── */
	.life__share {
		display: flex;
		block-size: 4px;
		gap: 1px;
		margin-block-start: calc(-1 * var(--lith-space-2));
		overflow: hidden;
		border-radius: calc(2px * (1 - var(--lith-notch)));

		& > i {
			flex: 0 1 0;
			min-inline-size: 0;
			background: var(--c);
			transition: flex-grow var(--lith-dur-3) var(--lith-ease-glide);
		}
	}

	/* ── Tools and colours ───────────────────────────────────────────── */
	.life__controls {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-3) var(--lith-space-6);
	}

	.life__tools {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2);
	}

	.life__tool[aria-pressed="true"] {
		--_bg: var(--lith-accent-subtle);
		--_edge: var(--lith-accent-edge);
		--_fg: var(--lith-accent-text);
	}

	.life__turn:disabled {
		cursor: default;
		opacity: 0.45;
		translate: none;
	}

	.life__icon {
		inline-size: auto;
		block-size: 0.875rem;
		aspect-ratio: var(--w) / var(--h);
	}

	.life__colours {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--lith-space-2);
	}

	.life__label {
		margin-inline-end: var(--lith-space-1);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;

		@container stage (width < 30rem) {
			flex-basis: 100%;
		}
	}

	.life__swatch {
		inline-size: 1.5rem;
		block-size: 1.5rem;
		padding: 0;
		border: 0;
		border-radius: calc(50% * (1 - var(--lith-notch)));
		background: var(--c);
		cursor: pointer;
		transition:
			scale var(--lith-dur-1) var(--lith-ease-snap),
			outline-offset var(--lith-dur-1) var(--lith-ease-snap);

		&:hover {
			scale: 1.12;
		}

		/* Ours: a ring around it, in its colour. */
		&[aria-pressed="true"] {
			outline: 2px solid var(--c);
			outline-offset: 3px;
		}

		&[aria-busy="true"] {
			animation: life-pending 0.8s steps(2, jump-none) infinite;
		}

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

	/* ── Status and reset ────────────────────────────────────────────── */
	.life__foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-3) var(--lith-space-6);
		padding-block-start: var(--lith-space-3);
		border-block-start: 1px solid var(--lith-border-subtle);
	}

	.life__status {
		flex: 1 1 18rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);

		&.is-quiet {
			color: var(--lith-text-2);
		}
	}

	.life__reset {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: end;
		gap: var(--lith-space-3);
		margin-inline-start: auto;
	}

	/* Why the board refused this tab's last action, and why an action did
	 * not go through: each rises into place when it appears. */
	.life__refusal,
	.life__problem {
		display: inline-block;
		transition:
			opacity var(--lith-dur-3) var(--lith-ease-glide),
			translate var(--lith-dur-3) var(--lith-ease-glide),
			display var(--lith-dur-3) allow-discrete;

		@starting-style {
			opacity: 0;
			translate: 0 0.375rem;
		}
	}

	.life__problem:empty {
		display: none;
	}
}

@keyframes life-pending {
	50% {
		opacity: 0.35;
	}
}

}