@axerity/cli 0.1.3 → 0.2.0

package/src/routes/layout.css

@@ -1,897 +0,0 @@
-@import 'tailwindcss';
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/typography';
-
-/* Manual (class-based) dark mode — toggled by the theme state module. */
-@custom-variant dark (&:where(.dark, .dark *));
-
-/*
- * Design tokens.
- *
- * Brand surface/foreground/border colors are exposed as semantic CSS vars so
- * components never reference raw palette values. Light values live on :root,
- * dark overrides on .dark — this keeps theming a single switch and makes the
- * token set easy to lift into the generator core later.
- */
-:root {
-	/*
-	 * Base theme — shadcn "neutral": pure grayscale (chroma 0), no hue. The
-	 * accent is itself neutral (near-black ink in light, near-white in dark),
-	 * so the UI stays monochrome and quiet.
-	 */
-	--brand-50: oklch(0.985 0 0);
-	--brand-100: oklch(0.97 0 0);
-	--brand-200: oklch(0.922 0 0);
-	--brand-300: oklch(0.87 0 0);
-	--brand-400: oklch(0.708 0 0);
-	--brand-500: oklch(0.556 0 0);
-	--brand-600: oklch(0.439 0 0);
-	--brand-700: oklch(0.371 0 0);
-	--brand-800: oklch(0.269 0 0);
-	--brand-900: oklch(0.205 0 0);
-
-	--accent: oklch(0.205 0 0);
-	--accent-hover: oklch(0.31 0 0);
-	--accent-contrast: oklch(0.985 0 0);
-	--brand-gradient: linear-gradient(135deg, oklch(0.3 0 0) 0%, oklch(0.5 0 0) 100%);
-
-	--bg: oklch(1 0 0);
-	--bg-subtle: oklch(0.97 0 0);
-	--surface: oklch(1 0 0);
-	--surface-raised: oklch(0.975 0 0);
-	--fg: oklch(0.205 0 0);
-	--fg-muted: oklch(0.4 0 0);
-	--fg-subtle: oklch(0.5 0 0);
-	--border: oklch(0.915 0 0);
-	--border-strong: oklch(0.82 0 0);
-
-	/* Chrome surfaces — the sidebar/header panels are a subtle wash of the accent
-	   over the page bg. Mix in oklab (not oklch) so a faint tint keeps the
-	   accent's hue instead of interpolating toward the bg's hue-0 (which turns
-	   a low-chroma green/blue pinkish). */
-	--sidebar-bg: color-mix(in oklab, var(--accent) 6%, var(--bg));
-	--header-bg: color-mix(in oklab, var(--accent) 3%, var(--bg));
-
-	color-scheme: light;
-}
-
-.dark {
-	--accent: oklch(0.922 0 0);
-	--accent-hover: oklch(0.82 0 0);
-	--accent-contrast: oklch(0.205 0 0);
-
-	/* shadcn neutral dark: near-black surfaces, near-white ink. */
-	--bg: oklch(0.145 0 0);
-	--bg-subtle: oklch(0.205 0 0);
-	--surface: oklch(0.205 0 0);
-	--surface-raised: oklch(0.245 0 0);
-	--fg: oklch(0.985 0 0);
-	--fg-muted: oklch(0.708 0 0);
-	--fg-subtle: oklch(0.58 0 0);
-	--border: oklch(0.275 0 0);
-	--border-strong: oklch(0.34 0 0);
-
-	color-scheme: dark;
-}
-
-/*
- * Theme presets.
- *
-  */
-
-/* Stripe — indigo accent, airy light surfaces, soft corners. */
-[data-theme='stripe'] {
-	--theme-radius-md: 0.375rem;
-	--theme-radius-lg: 0.5rem;
-	--theme-radius-xl: 0.75rem;
-	--theme-radius-2xl: 0.875rem;
-	--accent: oklch(0.55 0.23 274);
-	--accent-hover: oklch(0.5 0.23 274);
-	--accent-contrast: oklch(0.99 0 0);
-	--bg: oklch(1 0 0);
-	--bg-subtle: oklch(0.975 0.006 274);
-	--surface: oklch(1 0 0);
-	--surface-raised: oklch(0.985 0.006 274);
-	--fg: oklch(0.24 0.03 274);
-	--fg-muted: oklch(0.46 0.025 274);
-	--fg-subtle: oklch(0.58 0.02 274);
-	--border: oklch(0.92 0.01 274);
-	--border-strong: oklch(0.85 0.014 274);
-}
-[data-theme='stripe'].dark {
-	--accent: oklch(0.67 0.18 274);
-	--accent-hover: oklch(0.72 0.18 274);
-	--accent-contrast: oklch(0.16 0.03 274);
-	--bg: oklch(0.17 0.02 274);
-	--bg-subtle: oklch(0.21 0.022 274);
-	--surface: oklch(0.2 0.022 274);
-	--surface-raised: oklch(0.24 0.026 274);
-	--fg: oklch(0.97 0.006 274);
-	--fg-muted: oklch(0.72 0.016 274);
-	--fg-subtle: oklch(0.6 0.016 274);
-	--border: oklch(0.3 0.022 274);
-	--border-strong: oklch(0.38 0.024 274);
-}
-
-/* Vercel — pure monochrome, maximum contrast, sharp corners. */
-[data-theme='vercel'] {
-	--theme-radius-sm: 0.0625rem;
-	--theme-radius-md: 0.125rem;
-	--theme-radius-lg: 0.1875rem;
-	--theme-radius-xl: 0.25rem;
-	--theme-radius-2xl: 0.3125rem;
-	--theme-radius-3xl: 0.375rem;
-	--accent: oklch(0.18 0 0);
-	--accent-hover: oklch(0.32 0 0);
-	--accent-contrast: oklch(0.99 0 0);
-	--bg: oklch(1 0 0);
-	--bg-subtle: oklch(0.97 0 0);
-	--surface: oklch(1 0 0);
-	--surface-raised: oklch(0.98 0 0);
-	--fg: oklch(0.16 0 0);
-	--fg-muted: oklch(0.44 0 0);
-	--fg-subtle: oklch(0.6 0 0);
-	--border: oklch(0.92 0 0);
-	--border-strong: oklch(0.8 0 0);
-}
-[data-theme='vercel'].dark {
-	--accent: oklch(0.99 0 0);
-	--accent-hover: oklch(0.85 0 0);
-	--accent-contrast: oklch(0.14 0 0);
-	--bg: oklch(0.12 0 0);
-	--bg-subtle: oklch(0.18 0 0);
-	--surface: oklch(0.15 0 0);
-	--surface-raised: oklch(0.2 0 0);
-	--fg: oklch(0.99 0 0);
-	--fg-muted: oklch(0.7 0 0);
-	--fg-subtle: oklch(0.56 0 0);
-	--border: oklch(0.26 0 0);
-	--border-strong: oklch(0.34 0 0);
-}
-
-/* Linear — violet accent, cool grays, dense with small corners. */
-[data-theme='linear'] {
-	--theme-radius-lg: 0.3125rem;
-	--theme-radius-xl: 0.4375rem;
-	--accent: oklch(0.55 0.16 277);
-	--accent-hover: oklch(0.5 0.16 277);
-	--accent-contrast: oklch(0.99 0 0);
-	--bg: oklch(0.995 0.002 277);
-	--bg-subtle: oklch(0.975 0.005 277);
-	--surface: oklch(1 0 0);
-	--surface-raised: oklch(0.985 0.005 277);
-	--fg: oklch(0.24 0.02 277);
-	--fg-muted: oklch(0.47 0.016 277);
-	--fg-subtle: oklch(0.6 0.014 277);
-	--border: oklch(0.91 0.008 277);
-	--border-strong: oklch(0.84 0.012 277);
-}
-[data-theme='linear'].dark {
-	--accent: oklch(0.66 0.15 277);
-	--accent-hover: oklch(0.71 0.15 277);
-	--accent-contrast: oklch(0.15 0 0);
-	--bg: oklch(0.16 0.01 277);
-	--bg-subtle: oklch(0.19 0.012 277);
-	--surface: oklch(0.185 0.012 277);
-	--surface-raised: oklch(0.225 0.014 277);
-	--fg: oklch(0.96 0.005 277);
-	--fg-muted: oklch(0.7 0.012 277);
-	--fg-subtle: oklch(0.56 0.012 277);
-	--border: oklch(0.28 0.014 277);
-	--border-strong: oklch(0.36 0.016 277);
-}
-
-/* Supabase — signature green, dark-first surfaces. */
-[data-theme='supabase'] {
-	--accent: oklch(0.76 0.16 162);
-	--accent-hover: oklch(0.71 0.16 162);
-	--accent-contrast: oklch(0.2 0.03 162);
-	--bg: oklch(1 0 0);
-	--bg-subtle: oklch(0.975 0.004 162);
-	--surface: oklch(1 0 0);
-	--surface-raised: oklch(0.985 0.005 162);
-	--fg: oklch(0.22 0.01 162);
-	--fg-muted: oklch(0.45 0.012 162);
-	--fg-subtle: oklch(0.58 0.012 162);
-	--border: oklch(0.92 0.006 162);
-	--border-strong: oklch(0.84 0.01 162);
-}
-[data-theme='supabase'].dark {
-	--accent: oklch(0.78 0.16 162);
-	--accent-hover: oklch(0.83 0.16 162);
-	--accent-contrast: oklch(0.16 0.03 162);
-	--bg: oklch(0.16 0.006 162);
-	--bg-subtle: oklch(0.2 0.008 162);
-	--surface: oklch(0.19 0.008 162);
-	--surface-raised: oklch(0.23 0.01 162);
-	--fg: oklch(0.96 0.004 162);
-	--fg-muted: oklch(0.7 0.008 162);
-	--fg-subtle: oklch(0.56 0.008 162);
-	--border: oklch(0.28 0.01 162);
-	--border-strong: oklch(0.35 0.012 162);
-}
-
-/* GitHub — Primer blue, cool neutral grays, system font. */
-[data-theme='github'] {
-	--theme-font-sans:
-		-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
-	--accent: oklch(0.52 0.18 256);
-	--accent-hover: oklch(0.47 0.18 256);
-	--accent-contrast: oklch(0.99 0 0);
-	--bg: oklch(1 0 0);
-	--bg-subtle: oklch(0.97 0.004 256);
-	--surface: oklch(1 0 0);
-	--surface-raised: oklch(0.98 0.004 256);
-	--fg: oklch(0.27 0.012 256);
-	--fg-muted: oklch(0.48 0.014 256);
-	--fg-subtle: oklch(0.58 0.014 256);
-	--border: oklch(0.9 0.008 256);
-	--border-strong: oklch(0.8 0.01 256);
-}
-[data-theme='github'].dark {
-	--accent: oklch(0.66 0.16 245);
-	--accent-hover: oklch(0.71 0.16 245);
-	--accent-contrast: oklch(0.15 0.01 256);
-	--bg: oklch(0.17 0.012 268);
-	--bg-subtle: oklch(0.21 0.014 268);
-	--surface: oklch(0.19 0.013 268);
-	--surface-raised: oklch(0.24 0.015 268);
-	--fg: oklch(0.93 0.006 256);
-	--fg-muted: oklch(0.68 0.012 256);
-	--fg-subtle: oklch(0.55 0.012 256);
-	--border: oklch(0.3 0.014 268);
-	--border-strong: oklch(0.38 0.016 268);
-}
-
-/* Tailwind — sky accent, slate grays, generous corners. */
-[data-theme='tailwind'] {
-	--theme-radius-md: 0.375rem;
-	--theme-radius-lg: 0.5rem;
-	--theme-radius-xl: 0.75rem;
-	--theme-radius-2xl: 1rem;
-	--accent: oklch(0.68 0.15 233);
-	--accent-hover: oklch(0.62 0.15 233);
-	--accent-contrast: oklch(0.99 0 0);
-	--bg: oklch(1 0 0);
-	--bg-subtle: oklch(0.975 0.008 247);
-	--surface: oklch(1 0 0);
-	--surface-raised: oklch(0.985 0.008 247);
-	--fg: oklch(0.28 0.03 257);
-	--fg-muted: oklch(0.48 0.03 257);
-	--fg-subtle: oklch(0.6 0.025 257);
-	--border: oklch(0.92 0.012 247);
-	--border-strong: oklch(0.85 0.016 247);
-}
-[data-theme='tailwind'].dark {
-	--accent: oklch(0.72 0.14 233);
-	--accent-hover: oklch(0.77 0.14 233);
-	--accent-contrast: oklch(0.18 0.03 257);
-	--bg: oklch(0.21 0.03 257);
-	--bg-subtle: oklch(0.26 0.03 257);
-	--surface: oklch(0.24 0.03 257);
-	--surface-raised: oklch(0.29 0.03 257);
-	--fg: oklch(0.96 0.01 247);
-	--fg-muted: oklch(0.72 0.02 247);
-	--fg-subtle: oklch(0.6 0.02 247);
-	--border: oklch(0.32 0.03 257);
-	--border-strong: oklch(0.4 0.03 257);
-}
-
-/* Mintlify — friendly green, light-first, rounded. */
-[data-theme='mintlify'] {
-	--theme-radius-md: 0.375rem;
-	--theme-radius-lg: 0.5rem;
-	--theme-radius-xl: 0.75rem;
-	--theme-radius-2xl: 1rem;
-	--accent: oklch(0.62 0.16 150);
-	--accent-hover: oklch(0.57 0.16 150);
-	--accent-contrast: oklch(0.99 0 0);
-	--bg: oklch(1 0 0);
-	--bg-subtle: oklch(0.975 0.006 150);
-	--surface: oklch(1 0 0);
-	--surface-raised: oklch(0.985 0.006 150);
-	--fg: oklch(0.25 0.012 150);
-	--fg-muted: oklch(0.46 0.014 150);
-	--fg-subtle: oklch(0.58 0.014 150);
-	--border: oklch(0.91 0.008 150);
-	--border-strong: oklch(0.84 0.012 150);
-}
-[data-theme='mintlify'].dark {
-	--accent: oklch(0.72 0.16 150);
-	--accent-hover: oklch(0.77 0.16 150);
-	--accent-contrast: oklch(0.16 0.02 150);
-	--bg: oklch(0.16 0.006 150);
-	--bg-subtle: oklch(0.2 0.008 150);
-	--surface: oklch(0.19 0.008 150);
-	--surface-raised: oklch(0.23 0.01 150);
-	--fg: oklch(0.96 0.004 150);
-	--fg-muted: oklch(0.7 0.008 150);
-	--fg-subtle: oklch(0.56 0.008 150);
-	--border: oklch(0.28 0.01 150);
-	--border-strong: oklch(0.35 0.012 150);
-}
-
-/* Anthropic — warm clay accent on ivory, cozy dark. */
-[data-theme='anthropic'] {
-	--theme-radius-md: 0.375rem;
-	--theme-radius-lg: 0.5rem;
-	--accent: oklch(0.62 0.13 42);
-	--accent-hover: oklch(0.57 0.13 42);
-	--accent-contrast: oklch(0.99 0.005 80);
-	--bg: oklch(0.99 0.008 85);
-	--bg-subtle: oklch(0.96 0.012 85);
-	--surface: oklch(0.995 0.006 85);
-	--surface-raised: oklch(0.972 0.012 85);
-	--fg: oklch(0.26 0.015 60);
-	--fg-muted: oklch(0.47 0.02 60);
-	--fg-subtle: oklch(0.58 0.02 65);
-	--border: oklch(0.9 0.014 75);
-	--border-strong: oklch(0.82 0.018 70);
-}
-[data-theme='anthropic'].dark {
-	--accent: oklch(0.72 0.12 42);
-	--accent-hover: oklch(0.77 0.12 42);
-	--accent-contrast: oklch(0.18 0.02 60);
-	--bg: oklch(0.18 0.006 60);
-	--bg-subtle: oklch(0.22 0.008 60);
-	--surface: oklch(0.21 0.008 60);
-	--surface-raised: oklch(0.25 0.01 60);
-	--fg: oklch(0.95 0.008 80);
-	--fg-muted: oklch(0.71 0.012 70);
-	--fg-subtle: oklch(0.57 0.012 70);
-	--border: oklch(0.3 0.012 65);
-	--border-strong: oklch(0.37 0.014 65);
-}
-
-/* Expose semantic tokens to Tailwind utilities (bg-bg, text-fg, border-border…). */
-@theme inline {
-	--color-bg: var(--bg);
-	--color-bg-subtle: var(--bg-subtle);
-	--color-surface: var(--surface);
-	--color-surface-raised: var(--surface-raised);
-	--color-fg: var(--fg);
-	--color-fg-muted: var(--fg-muted);
-	--color-fg-subtle: var(--fg-subtle);
-	--color-border: var(--border);
-	--color-border-strong: var(--border-strong);
-	--color-accent: var(--accent);
-	--color-accent-hover: var(--accent-hover);
-	--color-accent-contrast: var(--accent-contrast);
-	--color-sidebar: var(--sidebar-bg);
-	--color-header: var(--header-bg);
-
-	/* Fonts route through a theme override var so a preset can swap the family. */
-	--font-sans: var(
-		--theme-font-sans,
-		'Geist Variable',
-		ui-sans-serif,
-		system-ui,
-		-apple-system,
-		'Segoe UI',
-		Roboto,
-		sans-serif
-	);
-	--font-mono: var(
-		--theme-font-mono,
-		'Geist Mono Variable',
-		ui-monospace,
-		'SF Mono',
-		'Cascadia Code',
-		Menlo,
-		monospace
-	);
-
-	--radius-sm: var(--theme-radius-sm, 0.125rem);
-	--radius-md: var(--theme-radius-md, 0.25rem);
-	--radius-lg: var(--theme-radius-lg, 0.375rem);
-	--radius-xl: var(--theme-radius-xl, 0.5rem);
-	--radius-2xl: var(--theme-radius-2xl, 0.625rem);
-	--radius-3xl: var(--theme-radius-3xl, 0.75rem);
-
-	/* Layout rails — referenced by the three-column grid. A preset can widen or
-	   tighten the sidebar/content to match a company's structure. */
-	--spacing-sidebar: var(--theme-sidebar-w, 17rem);
-	--spacing-toc: 15rem;
-	--spacing-header: 4rem;
-	--spacing-content: var(--theme-content-w, 48rem);
-}
-
-/*
- * Per-preset chrome.
- *
- * A handful of presets go beyond color and restructure the sidebar, density,
- * and type scale to match the company's actual docs. Selectors target the live
- * markup (`nav[aria-label='Documentation']`, `.doc-content`) so no component
- * needs to know which preset is active.
- */
-
-/* Stripe — clean text-link sidebar with an indigo edge marker, roomy reading. */
-[data-theme='stripe'] {
-	--theme-sidebar-w: 16rem;
-	--theme-content-w: 50rem;
-}
-[data-theme='stripe'] nav[aria-label='Documentation'] a[aria-current='page'] {
-	background: transparent;
-	box-shadow: inset 2px 0 0 0 var(--accent);
-	border-radius: 0;
-}
-[data-theme='stripe'] nav[aria-label='Documentation'] {
-	gap: 1.75rem;
-}
-[data-theme='stripe'] .doc-content {
-	line-height: 1.8;
-}
-[data-theme='stripe'] .doc-content h1 {
-	font-size: 2.6rem;
-	letter-spacing: -0.025em;
-}
-
-/* Mintlify — friendly rounded pills, soft and spacious. */
-[data-theme='mintlify'] nav[aria-label='Documentation'] a {
-	border-radius: 0.6rem;
-	padding-top: 0.4rem;
-	padding-bottom: 0.4rem;
-}
-[data-theme='mintlify'] nav[aria-label='Documentation'] a[aria-current='page'] {
-	background: color-mix(in oklch, var(--accent) 14%, transparent);
-	font-weight: 600;
-}
-[data-theme='mintlify'] .doc-content h2 {
-	font-weight: 700;
-}
-
-/* Linear — dense, compact, near-monochrome chrome with a tighter type scale. */
-[data-theme='linear'] {
-	--theme-sidebar-w: 15rem;
-}
-[data-theme='linear'] nav[aria-label='Documentation'] {
-	gap: 1.25rem;
-}
-[data-theme='linear'] nav[aria-label='Documentation'] a {
-	font-size: 0.8125rem;
-	padding-top: 0.28rem;
-	padding-bottom: 0.28rem;
-}
-[data-theme='linear'] nav[aria-label='Documentation'] a[aria-current='page'] {
-	background: var(--bg-subtle);
-	color: var(--fg);
-	font-weight: 500;
-}
-[data-theme='linear'] .doc-content {
-	font-size: 0.95rem;
-	line-height: 1.7;
-}
-[data-theme='linear'] .doc-content h1 {
-	font-size: 2rem;
-}
-[data-theme='linear'] .doc-content h2 {
-	font-size: 1.35rem;
-}
-
-html {
-	scroll-behavior: smooth;
-	scroll-padding-top: calc(var(--spacing-header) + 1rem);
-}
-
-body {
-	background-color: var(--bg);
-	color: var(--fg);
-	font-family: var(--font-sans);
-	-webkit-font-smoothing: antialiased;
-	text-rendering: optimizeLegibility;
-}
-
-/* Text selection uses the theme accent instead of the browser default blue. */
-::selection {
-	background-color: color-mix(in oklab, var(--accent) 25%, transparent);
-	color: var(--fg);
-}
-
-/* Respect users who don't want the smooth-scroll motion. */
-@media (prefers-reduced-motion: reduce) {
-	html {
-		scroll-behavior: auto;
-	}
-}
-
-/*
- * Rendered markdown (the `.doc-content` article).
- *
- * Hand-styled against the design tokens instead of the typography plugin so the
- * theme switch is a single source of truth and matches the rest of the UI.
- */
-.doc-content {
-	color: var(--fg-muted);
-	font-size: 1rem;
-	line-height: 1.75;
-}
-
-.doc-content > :first-child {
-	margin-top: 0;
-}
-
-.doc-content h1 {
-	color: var(--fg);
-	font-size: 2.25rem;
-	font-weight: 700;
-	letter-spacing: -0.02em;
-	line-height: 1.15;
-	margin-bottom: 1rem;
-}
-
-.doc-content h2 {
-	color: var(--fg);
-	font-size: 1.5rem;
-	font-weight: 600;
-	letter-spacing: -0.01em;
-	margin-top: 2.5rem;
-	margin-bottom: 0.75rem;
-	padding-top: 0.5rem;
-}
-
-.doc-content h3 {
-	color: var(--fg);
-	font-size: 1.2rem;
-	font-weight: 600;
-	margin-top: 1.75rem;
-	margin-bottom: 0.5rem;
-}
-
-/* Anchor offset so headings aren't hidden under the sticky header. */
-.doc-content :is(h1, h2, h3) {
-	scroll-margin-top: calc(var(--spacing-header) + 1rem);
-}
-
-.doc-content p {
-	margin-top: 0;
-	margin-bottom: 1.25rem;
-}
-
-.doc-content a {
-	color: var(--accent);
-	font-weight: 500;
-	text-decoration: underline;
-	text-decoration-color: color-mix(in oklch, var(--accent) 35%, transparent);
-	text-underline-offset: 2px;
-	transition: text-decoration-color 0.15s;
-}
-
-.doc-content a:hover {
-	text-decoration-color: var(--accent);
-}
-
-.doc-content strong {
-	color: var(--fg);
-	font-weight: 600;
-}
-
-.doc-content :is(ul, ol) {
-	margin-bottom: 1.25rem;
-	padding-left: 1.5rem;
-}
-
-.doc-content ul {
-	list-style: disc;
-}
-
-.doc-content ol {
-	list-style: decimal;
-}
-
-.doc-content li {
-	margin-top: 0.375rem;
-}
-
-.doc-content li::marker {
-	color: var(--fg-subtle);
-}
-
-.doc-content blockquote {
-	border-left: 3px solid var(--accent);
-	background-color: var(--bg-subtle);
-	border-radius: 0 0.375rem 0.375rem 0;
-	margin-bottom: 1.25rem;
-	padding: 0.5rem 1rem;
-	color: var(--fg-muted);
-}
-
-.doc-content blockquote p {
-	margin-bottom: 0;
-}
-
-/* Inline code */
-.doc-content :not(pre) > code {
-	background-color: var(--bg-subtle);
-	border: 1px solid var(--border);
-	border-radius: 0.25rem;
-	color: var(--accent);
-	font-family: var(--font-mono);
-	font-size: 0.85em;
-	padding: 0.15rem 0.4rem;
-}
-
-/* Fenced code blocks — Shiki dual-theme output wrapped in `.code-block`. */
-.doc-content .code-block {
-	position: relative;
-	margin: 1.25rem 0;
-}
-
-.doc-content pre {
-	background-color: var(--surface-raised);
-	border: 1px solid var(--border);
-	border-radius: 0.5rem;
-	margin-bottom: 1.25rem;
-	overflow-x: auto;
-	padding: 1rem 1.25rem;
-}
-
-/* The wrapper owns the spacing once a block is wrapped. */
-.doc-content .code-block pre {
-	margin: 0;
-}
-
-/* Horizontal padding moves to the lines so highlights can bleed to the edges. */
-.doc-content pre.shiki {
-	padding-left: 0;
-	padding-right: 0;
-}
-
-.doc-content .shiki code {
-	display: block;
-}
-
-.doc-content .shiki .line {
-	display: block;
-	padding-inline: 1.25rem;
-}
-
-.doc-content .shiki .line.highlighted {
-	background-color: color-mix(in oklch, var(--accent) 13%, transparent);
-	box-shadow: inset 2px 0 0 0 var(--accent);
-}
-
-/* Line numbers (```ts showLineNumbers) via CSS counters. */
-.doc-content .shiki.has-line-numbers code {
-	counter-reset: axerity-line;
-}
-
-.doc-content .shiki.has-line-numbers .line::before {
-	counter-increment: axerity-line;
-	content: counter(axerity-line);
-	display: inline-block;
-	width: 1.25rem;
-	margin-right: 1.25rem;
-	text-align: right;
-	color: var(--fg-subtle);
-	user-select: none;
-}
-
-/* Twoslash (```ts twoslash) — hover popups must not be clipped by the
-   horizontal scroll container, and the popup chrome maps to our theme tokens. */
-.doc-content .has-twoslash pre {
-	overflow: visible;
-}
-
-.doc-content .has-twoslash {
-	--twoslash-popup-bg: var(--surface-raised);
-	--twoslash-popup-color: var(--fg);
-	--twoslash-border-color: var(--border-strong);
-	--twoslash-docs-color: var(--fg-muted);
-	--twoslash-tag-color: var(--fg-subtle);
-	--twoslash-underline-color: var(--border-strong);
-	--twoslash-popup-shadow: 0 6px 24px oklch(0 0 0 / 0.18);
-	--twoslash-matched-color: inherit;
-	--twoslash-unmatched-color: var(--fg-subtle);
-}
-
-.doc-content .twoslash-popup-container {
-	font-family: var(--font-mono);
-	border-radius: 0.375rem;
-}
-
-/* Mermaid diagrams (```mermaid) — the raw block is replaced with an SVG by the
-   client runner, so strip the code-block chrome and center the result. */
-.doc-content pre.mermaid {
-	margin: 1.5rem 0;
-	padding: 0;
-	background: transparent;
-	border: 0;
-	text-align: center;
-	overflow-x: auto;
-}
-
-.doc-content pre.mermaid:not([data-processed]) {
-	color: transparent;
-}
-
-.doc-content pre.mermaid svg {
-	max-width: 100%;
-	height: auto;
-}
-
-/* Title bar (```ts title="app.ts"). */
-.doc-content .code-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 0.75rem;
-	padding: 0.4rem 0.5rem 0.4rem 1rem;
-	background-color: var(--bg-subtle);
-	border: 1px solid var(--border);
-	border-bottom: 0;
-	border-radius: 0.5rem 0.5rem 0 0;
-}
-
-.doc-content .code-title {
-	font-family: var(--font-mono);
-	font-size: 0.8rem;
-	color: var(--fg-muted);
-}
-
-/* A titled block's code joins seamlessly to the header above it. */
-.doc-content .has-header pre.shiki {
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-}
-
-/* Inside the header the copy button sits inline rather than floating. */
-.doc-content .code-header .copy-button {
-	position: static;
-}
-
-/* Copy button — top-right of the block; subtle by default, brighter on hover. */
-.doc-content .copy-button {
-	position: absolute;
-	top: 0.5rem;
-	right: 0.5rem;
-	z-index: 1;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 2rem;
-	height: 2rem;
-	border-radius: 0.375rem;
-	border: 1px solid var(--border);
-	background-color: var(--surface);
-	color: var(--fg-subtle);
-	cursor: pointer;
-	opacity: 0.65;
-	transition:
-		opacity 0.15s ease,
-		color 0.15s ease,
-		border-color 0.15s ease;
-}
-
-.doc-content .code-block:hover .copy-button,
-.doc-content .copy-button:focus-visible {
-	opacity: 1;
-}
-
-.doc-content .copy-button:hover {
-	color: var(--fg);
-	border-color: var(--border-strong);
-}
-
-/* Copied state: swap to a green check. */
-.doc-content .copy-button[data-copied='true'] {
-	opacity: 1;
-	color: oklch(0.62 0.16 155);
-	border-color: oklch(0.62 0.16 155);
-}
-
-.doc-content .copy-button .icon-check {
-	display: none;
-}
-
-.doc-content .copy-button[data-copied='true'] .icon-copy {
-	display: none;
-}
-
-.doc-content .copy-button[data-copied='true'] .icon-check {
-	display: inline;
-}
-
-.doc-content pre code {
-	background: none;
-	border: none;
-	color: var(--fg);
-	font-family: var(--font-mono);
-	font-size: 0.875rem;
-	padding: 0;
-}
-
-/*
- * Use our own surface for the block background (Shiki inlines the theme's bg),
- * keeping code blocks visually consistent with cards/callouts. Light token
- * colors are inlined by Shiki; under `.dark` we swap to the `--shiki-dark` vars.
- */
-.doc-content pre.shiki {
-	background-color: var(--surface-raised) !important;
-}
-
-.dark .doc-content pre.shiki,
-.dark .doc-content pre.shiki span {
-	color: var(--shiki-dark) !important;
-	font-style: var(--shiki-dark-font-style, inherit) !important;
-	font-weight: var(--shiki-dark-font-weight, inherit) !important;
-	text-decoration: var(--shiki-dark-text-decoration, inherit) !important;
-}
-
-.doc-content hr {
-	border: 0;
-	border-top: 1px solid var(--border);
-	margin: 2.5rem 0;
-}
-
-/* Tables — rendered as a rounded, scrollable card (see the rehype wrapper). */
-.doc-content .table-wrapper {
-	margin: 1.5rem 0;
-	overflow-x: auto;
-	border: 1px solid var(--border);
-	border-radius: 0.5rem;
-	background-color: var(--surface);
-}
-
-.doc-content table {
-	border-collapse: collapse;
-	width: 100%;
-	font-size: 0.9rem;
-	line-height: 1.5;
-}
-
-.doc-content thead {
-	background-color: var(--bg-subtle);
-}
-
-.doc-content th {
-	color: var(--fg);
-	font-weight: 600;
-	text-align: left;
-	white-space: nowrap;
-	padding: 0.7rem 1rem;
-	border-bottom: 1px solid var(--border-strong);
-}
-
-.doc-content td {
-	padding: 0.7rem 1rem;
-	border-top: 1px solid var(--border);
-	color: var(--fg-muted);
-}
-
-/* The header already provides the divider above the first body row. */
-.doc-content tbody tr:first-child td {
-	border-top: none;
-}
-
-.doc-content tbody tr {
-	transition: background-color 0.12s ease;
-}
-
-.doc-content tbody tr:hover {
-	background-color: color-mix(in oklch, var(--accent) 6%, transparent);
-}
-
-/* A little breathing room at the card edges. */
-.doc-content :is(th, td):first-child {
-	padding-left: 1.15rem;
-}
-.doc-content :is(th, td):last-child {
-	padding-right: 1.15rem;
-}
-
-/* First column tends to be a key/term — give it emphasis. */
-.doc-content tbody td:first-child {
-	color: var(--fg);
-	font-weight: 500;
-}
-
-.doc-content img {
-	border-radius: 0.5rem;
-	margin: 1.5rem 0;
-}
-
-@media (min-width: 1024px) {
-	.doc-content.doc-api > :not(.api) {
-		max-width: calc(100% - 30.5rem);
-	}
-}