@luciodale/docs-ui-kit 0.2.1 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @luciodale/docs-ui-kit
 
-Astro component library for building documentation sites. Dark theme, orange accent, Tailwind CSS v4. Ships source `.astro` files — no build step in the library, your Astro project processes them.
+Astro component library for building documentation sites. Dark theme, orange accent, Tailwind CSS v4. Ships source `.astro` files and pre-compiled Tailwind utilities — your Astro project processes the components, the CSS works everywhere without `@source` hacks.
 
 ## Install
 
@@ -16,18 +16,25 @@ Runtime dependency: `shiki` (build-time syntax highlighting in Astro frontmatter
 
 ### 1. CSS
 
-Create a global CSS file and import the theme + tell Tailwind to scan the library's components:
+Create a global CSS file and import the theme + pre-compiled utilities:
 
 ```css
 /* src/styles/global.css */
 @import "tailwindcss";
 @import "@luciodale/docs-ui-kit/styles.css";
-
-/* Adjust the path to wherever node_modules lives relative to this file */
-@source "../../node_modules/@luciodale/docs-ui-kit/src";
+@import "@luciodale/docs-ui-kit/utilities.css";
 ```
 
-The theme CSS defines Tailwind v4 `@theme` tokens (colors, fonts) and base body styles (`background: black; color: white`). It also provides a `.liquid-glass-border` utility class.
+- `styles.css` — Tailwind v4 `@theme` tokens (colors, fonts), base body styles (`background: black; color: white`), and custom utilities like `.liquid-glass-border`
+- `utilities.css` — Pre-compiled Tailwind utility classes used by all components (navbar, sidebar, code blocks, etc.). Ships with the package so you don't need `@source` directives pointing into `node_modules`
+
+Then import this CSS in your base layout's frontmatter (not a `<style>` tag):
+
+```astro
+---
+import "../styles/global.css";
+---
+```
 
 ### 2. Fonts
 
@@ -313,6 +320,46 @@ import Callout from "@luciodale/docs-ui-kit/components/Callout.astro";
 
 Renders a left-bordered aside with icon, title, and slot content. Supports links (`<a>`) and inline code (`<code>`) in the body.
 
+#### FeatureList
+
+Highlighted feature list with colored dots and keywords. Designed for landing pages and feature summaries.
+
+```astro
+---
+import FeatureList from "@luciodale/docs-ui-kit/components/FeatureList.astro";
+---
+
+<FeatureList features={[
+  { highlight: "Type-safe", description: "Full TypeScript support out of the box" },
+  { highlight: "Lightweight", description: "Zero runtime overhead", color: "green" },
+  { highlight: "Dark theme", description: "Built for modern documentation sites" },
+]} />
+
+<!-- Or set a global color for all items -->
+<FeatureList
+  color="cyan"
+  features={[
+    { highlight: "Fast", description: "Build-time syntax highlighting via Shiki" },
+    { highlight: "Searchable", description: "Full-text search powered by Pagefind" },
+  ]}
+/>
+```
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `features` | `Array<FeatureItem>` | Yes | List of feature items (see below). |
+| `color` | `FeatureColor` | No | Default: `"accent"`. Global color for all items. Overridden by per-item `color`. |
+
+**FeatureItem:**
+
+| Field | Type | Required | Description |
+|---|---|---|---|
+| `highlight` | `string` | Yes | Colored keyword/phrase. Rendered in bold with the active color. |
+| `description` | `string` | No | Text after the highlight, separated by an em dash. |
+| `color` | `FeatureColor` | No | Per-item color override. |
+
+**FeatureColor:** `"accent"` \| `"blue"` \| `"green"` \| `"purple"` \| `"yellow"` \| `"cyan"`
+
 #### PackageInfo
 
 Displays npm version, license, GitHub stars, and a bundlephobia link. Data is fetched at build time from the npm registry and GitHub API (3s timeout, graceful fallback).
@@ -450,6 +497,7 @@ import LinkedInIcon from "@luciodale/docs-ui-kit/components/LinkedInIcon.astro";
 // src/layouts/Base.astro
 import SEO from "@luciodale/docs-ui-kit/components/SEO.astro";
 import { siteConfig } from "../config";
+import "../styles/global.css";
 
 type Props = { title: string; description?: string; type?: "website" | "article" };
 
@@ -472,10 +520,6 @@ const { title, description, type = "website" } = Astro.props;
     <slot />
   </body>
 </html>
-
-<style is:global>
-  @import "../styles/global.css";
-</style>
 ```
 
 ### Docs layout wrapper (create in your project)
@@ -506,6 +550,7 @@ const { title, description } = Astro.props;
 // src/pages/index.astro
 import PageLayout from "@luciodale/docs-ui-kit/components/PageLayout.astro";
 import HeroSection from "@luciodale/docs-ui-kit/components/HeroSection.astro";
+import FeatureList from "@luciodale/docs-ui-kit/components/FeatureList.astro";
 import { siteConfig } from "../config";
 import Base from "../layouts/Base.astro";
 
@@ -519,9 +564,11 @@ export const prerender = true;
       description={siteConfig.description}
       installCommand={siteConfig.installCommand}
     >
-      <a href="/docs/getting-started" class="rounded-lg bg-accent px-5 py-2.5 text-sm text-white">
-        Get Started
-      </a>
+      <FeatureList features={[
+        { highlight: "Type-safe", description: "Full TypeScript support" },
+        { highlight: "Lightweight", description: "Zero runtime dependencies", color: "green" },
+        { highlight: "Fast", description: "Build-time syntax highlighting", color: "cyan" },
+      ]} />
     </HeroSection>
   </PageLayout>
 </Base>
@@ -588,7 +635,7 @@ Defined in `theme.css` via Tailwind v4 `@theme` tokens:
 | `--color-border` | `#e5e7eb` | Light border. |
 | `--color-muted` | `#848d9f` | Muted text. |
 
-Body: `background: black`, `color: white`. All components use `white/` opacity variants for text hierarchy (`text-white/60`, `text-white/40`, `text-white/30`).
+Body: `background: black`, `color: white`. All components use `white/` opacity variants for text hierarchy (`text-white/70` body text, `text-white/60` secondary, `text-white/40` labels, `text-white/30` decorative).
 
 ## Responsive behavior
 

package/package.json

@@ -1,13 +1,14 @@
 {
 	"name": "@luciodale/docs-ui-kit",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"description": "Astro component library for documentation sites. Dark theme, orange accent.",
 	"type": "module",
 	"exports": {
 		"./components/*": "./src/components/*",
 		"./types/config": "./src/types/config.ts",
 		"./types/props": "./src/types/props.ts",
-		"./styles.css": "./src/styles/theme.css"
+		"./styles.css": "./src/styles/theme.css",
+		"./utilities.css": "./src/styles/utilities.css"
 	},
 	"files": [
 		"src"
@@ -16,7 +17,8 @@
 		"format": "biome format --write .",
 		"lint": "biome check .",
 		"lint:fix": "biome check --write .",
-		"npm": "npm publish --access public",
+		"build": "bunx @tailwindcss/cli --input src/styles/build-input.css --output src/styles/utilities.css --minify",
+		"npm": "bun run build && npm publish --access public",
 		"npm:test": "npm pack --dry-run"
 	},
 	"peerDependencies": {
@@ -27,7 +29,9 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.4.7",
+		"@tailwindcss/cli": "^4.2.2",
 		"astro": "^5.0.0",
+		"tailwindcss": "^4.2.2",
 		"typescript": "^5.9.3"
 	},
 	"keywords": [

package/src/components/Callout.astro

@@ -52,7 +52,7 @@ const heading = title ?? s.defaultTitle;
 		{type === "danger" && <DangerIcon />}
 		{heading}
 	</div>
-	<div class="text-sm text-white/60 leading-relaxed [&_a]:text-accent [&_a]:underline [&_code]:text-white/70 [&_code]:font-mono [&_code]:text-xs">
+	<div class="text-sm text-white/70 leading-relaxed [&_a]:text-accent [&_a]:underline [&_code]:text-white/80 [&_code]:font-mono [&_code]:text-xs">
 		<slot />
 	</div>
 </aside>

package/src/components/CodeBlock.astro

@@ -17,10 +17,10 @@ const html = await codeToHtml(trimmed, {
 
 <div class="rounded-lg border border-white/10 bg-[#161618] overflow-hidden my-4">
 	<div class="flex items-center justify-between px-4 py-2.5 border-b border-white/[0.06] bg-white/[0.02]">
-		<span class="text-xs text-white/30 font-mono">{filename ?? language}</span>
+		<span class="text-xs text-white/40 font-mono">{filename ?? language}</span>
 		<button
 			type="button"
-			class="copy-btn text-xs text-white/30 hover:text-white/60 transition-colors cursor-pointer"
+			class="copy-btn text-xs text-white/40 hover:text-white/70 transition-colors cursor-pointer"
 			data-code={trimmed}
 		>
 			<span class="copy-label">Copy</span>

package/src/components/FeatureList.astro

@@ -0,0 +1,42 @@
+---
+type FeatureColor = "accent" | "blue" | "green" | "purple" | "yellow" | "cyan";
+
+type FeatureItem = {
+	highlight: string;
+	description?: string;
+	color?: FeatureColor;
+};
+
+type Props = {
+	features: FeatureItem[];
+	color?: FeatureColor;
+};
+
+const { features, color = "accent" } = Astro.props;
+
+const colorMap: Record<FeatureColor, { text: string; dot: string }> = {
+	accent: { text: "text-accent", dot: "bg-accent" },
+	blue: { text: "text-blue-400", dot: "bg-blue-400" },
+	green: { text: "text-green-400", dot: "bg-green-400" },
+	purple: { text: "text-purple-400", dot: "bg-purple-400" },
+	yellow: { text: "text-yellow-400", dot: "bg-yellow-400" },
+	cyan: { text: "text-cyan-400", dot: "bg-cyan-400" },
+};
+---
+
+<ul class="flex flex-col gap-3 list-none m-0 p-0">
+	{features.map((feature) => {
+		const c = colorMap[feature.color ?? color];
+		return (
+			<li class="flex items-start gap-3">
+				<span class:list={["mt-[7px] w-1.5 h-1.5 rounded-full shrink-0", c.dot]} />
+				<span class="text-base leading-relaxed">
+					<span class:list={["font-semibold", c.text]}>{feature.highlight}</span>
+					{feature.description && (
+						<span class="text-white/70">{" "}&mdash; {feature.description}</span>
+					)}
+				</span>
+			</li>
+		);
+	})}
+</ul>

package/src/components/Footer.astro

@@ -20,13 +20,13 @@ const copyright = config.copyright ?? config.title;
 				{config.logoSrc && (
 					<a href={withBase("/")}>
 						<img
-							src={config.logoSrc}
+							src={withBase(config.logoSrc)}
 							alt={config.logoAlt ?? config.title}
 							class="w-8 h-auto opacity-60 hover:opacity-100 transition-opacity"
 						/>
 					</a>
 				)}
-				<span class="text-white/40 text-sm">
+				<span class="text-white/50 text-sm">
 					&copy; {year} {copyright}
 				</span>
 			</div>
@@ -35,7 +35,7 @@ const copyright = config.copyright ?? config.title;
 				{config.navLinks.map((link) => (
 					<a
 						href={withBase(link.href)}
-						class="text-white/40 text-sm hover:text-white/70 transition-colors"
+						class="text-white/50 text-sm hover:text-white/80 transition-colors"
 					>
 						{link.label}
 					</a>
@@ -47,7 +47,7 @@ const copyright = config.copyright ?? config.title;
 					href={config.socialLinks.github}
 					target="_blank"
 					rel="noopener noreferrer"
-					class="text-white/30 hover:text-white/60 transition-colors"
+					class="text-white/40 hover:text-white/70 transition-colors"
 				>
 					<GithubIcon class="w-5" />
 				</a>
@@ -56,7 +56,7 @@ const copyright = config.copyright ?? config.title;
 						href={config.socialLinks.linkedin}
 						target="_blank"
 						rel="noopener noreferrer"
-						class="text-white/30 hover:text-white/60 transition-colors"
+						class="text-white/40 hover:text-white/70 transition-colors"
 					>
 						<LinkedInIcon class="w-5" />
 					</a>

package/src/components/HeroSection.astro

@@ -18,7 +18,7 @@ const hasExtra = Astro.slots.has("default");
 	<h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white leading-[1.1] mb-4">
 		{title}
 	</h1>
-	<p class="text-lg text-white/50 leading-relaxed max-w-xl mb-10">{description}</p>
+	<p class="text-lg text-white/60 leading-relaxed max-w-xl mb-10">{description}</p>
 	<button
 		type="button"
 		class="copy-btn group rounded-lg border border-white/10 bg-white/5 hover:bg-white/[0.08] px-5 py-3 font-mono text-sm text-white/70 transition-colors cursor-pointer"
@@ -26,7 +26,7 @@ const hasExtra = Astro.slots.has("default");
 	>
 		<span class="text-accent">$</span>
 		<span class="ml-2">{installCommand}</span>
-		<span class="ml-3 text-white/30 group-hover:text-white/50 transition-colors text-xs copy-label">
+		<span class="ml-3 text-white/40 group-hover:text-white/60 transition-colors text-xs copy-label">
 			Copy
 		</span>
 	</button>

package/src/components/Navbar.astro

@@ -16,7 +16,7 @@ const { config, currentPath } = Astro.props;
 	<div class="max-w-7xl h-full mx-auto px-6 md:px-8 flex items-center justify-between">
 		<a href={withBase("/")} class="flex items-center gap-3 text-white hover:opacity-80 transition-opacity">
 			{config.logoSrc ? (
-				<img src={config.logoSrc} alt={config.logoAlt ?? config.title} class="h-7" />
+				<img src={withBase(config.logoSrc)} alt={config.logoAlt ?? config.title} class="h-7" />
 			) : (
 				<span class="text-base font-semibold tracking-tight">{config.title}</span>
 			)}
@@ -30,7 +30,7 @@ const { config, currentPath } = Astro.props;
 						"text-sm font-medium transition-colors duration-150",
 						currentPath.startsWith(link.href)
 							? "text-white"
-							: "text-white/50 hover:text-white/80",
+							: "text-white/60 hover:text-white/90",
 					]}
 				>
 					{link.label}
@@ -39,14 +39,14 @@ const { config, currentPath } = Astro.props;
 			<button
 				id="search-trigger"
 				type="button"
-				class="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] px-3 py-1.5 text-white/40 hover:text-white/60 transition-colors cursor-pointer"
+				class="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] px-3 py-1.5 text-white/50 hover:text-white/70 transition-colors cursor-pointer"
 			>
 				<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
 					<circle cx="11" cy="11" r="7" />
 					<line x1="16.5" y1="16.5" x2="21" y2="21" />
 				</svg>
 				<span class="text-xs">Search</span>
-				<kbd class="ml-2 rounded border border-white/10 bg-white/[0.04] px-1.5 py-0.5 text-[10px] font-mono text-white/30">
+				<kbd class="ml-2 rounded border border-white/10 bg-white/[0.04] px-1.5 py-0.5 text-[10px] font-mono text-white/40">
 					<span class="text-[10px]">&#8984;</span>K
 				</kbd>
 			</button>
@@ -54,7 +54,7 @@ const { config, currentPath } = Astro.props;
 				href={config.githubUrl}
 				target="_blank"
 				rel="noopener noreferrer"
-				class="text-white/40 hover:text-white/70 transition-colors duration-150"
+				class="text-white/50 hover:text-white/80 transition-colors duration-150"
 			>
 				<GithubIcon class="w-5" />
 			</a>
@@ -64,7 +64,7 @@ const { config, currentPath } = Astro.props;
 			<button
 				id="search-trigger-mobile"
 				type="button"
-				class="text-white/50 hover:text-white transition-colors cursor-pointer"
+				class="text-white/60 hover:text-white transition-colors cursor-pointer"
 				aria-label="Search"
 			>
 				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
@@ -75,7 +75,7 @@ const { config, currentPath } = Astro.props;
 			<button
 				id="mobile-nav-toggle"
 				type="button"
-				class="text-white/60 hover:text-white transition-colors cursor-pointer"
+				class="text-white/70 hover:text-white transition-colors cursor-pointer"
 				aria-label="Toggle menu"
 			>
 				<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -97,7 +97,7 @@ const { config, currentPath } = Astro.props;
 		<button
 			id="mobile-nav-close"
 			type="button"
-			class="text-white/60 hover:text-white transition-colors cursor-pointer"
+			class="text-white/70 hover:text-white transition-colors cursor-pointer"
 			aria-label="Close menu"
 		>
 			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -114,7 +114,7 @@ const { config, currentPath } = Astro.props;
 					"text-sm font-medium transition-colors",
 					currentPath.startsWith(link.href)
 						? "text-white"
-						: "text-white/50 hover:text-white/80",
+						: "text-white/60 hover:text-white/90",
 				]}
 			>
 				{link.label}
@@ -126,7 +126,7 @@ const { config, currentPath } = Astro.props;
 		<div class="px-6 py-4">
 			{config.sidebarSections.map((section) => (
 				<div class="mb-5">
-					<div class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-2">
+					<div class="text-xs font-semibold uppercase tracking-widest text-white/40 mb-2">
 						{section.title}
 					</div>
 					<div class="flex flex-col">
@@ -137,7 +137,7 @@ const { config, currentPath } = Astro.props;
 									"block py-1.5 pl-3 text-sm border-l-2 transition-colors",
 									currentPath === link.href
 										? "border-accent text-white font-medium"
-										: "border-transparent text-white/50 hover:text-white/80 hover:border-white/20",
+										: "border-transparent text-white/60 hover:text-white/90 hover:border-white/20",
 								]}
 							>
 								{link.label}
@@ -154,7 +154,7 @@ const { config, currentPath } = Astro.props;
 			href={config.socialLinks.github}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="text-white/30 hover:text-white/60 transition-colors"
+			class="text-white/40 hover:text-white/70 transition-colors"
 		>
 			<GithubIcon class="w-5" />
 		</a>

package/src/components/PackageInfo.astro

@@ -61,7 +61,7 @@ const [npm, github] = await Promise.all([fetchNpm(), fetchGithub()]);
 		</a>
 	)}
 	{npm?.license && (
-		<span class="inline-flex items-center rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/50">
+		<span class="inline-flex items-center rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/60">
 			{npm.license}
 		</span>
 	)}
@@ -70,7 +70,7 @@ const [npm, github] = await Promise.all([fetchNpm(), fetchGithub()]);
 			href={`https://github.com/${githubRepo}`}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/50 hover:bg-white/[0.06] transition-colors"
+			class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/60 hover:bg-white/[0.06] transition-colors"
 		>
 			<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
 				<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 19.771l-7.416 3.642 1.48-8.279L0 9.306l8.332-1.151z" />
@@ -82,7 +82,7 @@ const [npm, github] = await Promise.all([fetchNpm(), fetchGithub()]);
 		href={`https://bundlephobia.com/package/${packageName}${npm?.version ? `@${npm.version}` : ""}`}
 		target="_blank"
 		rel="noopener noreferrer"
-		class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/50 hover:bg-white/[0.06] transition-colors"
+		class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/60 hover:bg-white/[0.06] transition-colors"
 	>
 		<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
 			<path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 002 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />

package/src/components/PropsTable.astro

@@ -16,10 +16,10 @@ const { title, rows } = Astro.props;
 			<table class="w-full text-left text-sm">
 				<thead>
 					<tr class="border-b border-white/10 bg-white/[0.02]">
-						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Prop</th>
-						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Type</th>
-						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Default</th>
-						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Description</th>
+						<th class="py-3 px-4 text-xs font-medium text-white/50 uppercase tracking-wider">Prop</th>
+						<th class="py-3 px-4 text-xs font-medium text-white/50 uppercase tracking-wider">Type</th>
+						<th class="py-3 px-4 text-xs font-medium text-white/50 uppercase tracking-wider">Default</th>
+						<th class="py-3 px-4 text-xs font-medium text-white/50 uppercase tracking-wider">Description</th>
 					</tr>
 				</thead>
 				<tbody>
@@ -30,12 +30,12 @@ const { title, rows } = Astro.props;
 								{row.required && <span class="ml-1 text-red-400 text-xs">*</span>}
 							</td>
 							<td class="py-3 px-4">
-								<code class="text-white/50 font-mono text-xs">{row.type}</code>
+								<code class="text-white/60 font-mono text-xs">{row.type}</code>
 							</td>
-							<td class="py-3 px-4 text-white/35 text-xs font-mono">
+							<td class="py-3 px-4 text-white/45 text-xs font-mono">
 								{row.defaultValue ?? "\u2014"}
 							</td>
-							<td class="py-3 px-4 text-white/60 text-sm">{row.description}</td>
+							<td class="py-3 px-4 text-white/70 text-sm">{row.description}</td>
 						</tr>
 					))}
 				</tbody>

package/src/components/SearchModal.astro

@@ -75,7 +75,7 @@
 	.search-dialog-icon {
 		width: 0.875rem;
 		height: 0.875rem;
-		color: rgb(255 255 255 / 0.3);
+		color: rgb(255 255 255 / 0.4);
 		flex-shrink: 0;
 	}
 
@@ -88,7 +88,7 @@
 	}
 
 	.search-dialog-input::placeholder {
-		color: rgb(255 255 255 / 0.3);
+		color: rgb(255 255 255 / 0.4);
 	}
 
 	.search-dialog-kbd {
@@ -98,7 +98,7 @@
 		padding: 0.125rem 0.375rem;
 		font-size: 10px;
 		font-family: ui-monospace, monospace;
-		color: rgb(255 255 255 / 0.3);
+		color: rgb(255 255 255 / 0.4);
 	}
 
 	.search-dialog-results {
@@ -111,7 +111,7 @@
 		padding: 1.5rem 0.75rem;
 		text-align: center;
 		font-size: 0.875rem;
-		color: rgb(255 255 255 / 0.3);
+		color: rgb(255 255 255 / 0.4);
 	}
 
 	#search-results :global(mark) {
@@ -180,7 +180,7 @@
 		const container = document.getElementById("search-results");
 		if (!container) return;
 
-		const placeholderStyle = "padding: 1.5rem 0.75rem; text-align: center; font-size: 0.875rem; color: rgb(255 255 255 / 0.3);";
+		const placeholderStyle = "padding: 1.5rem 0.75rem; text-align: center; font-size: 0.875rem; color: rgb(255 255 255 / 0.4);";
 
 		if (!query.trim()) {
 			container.innerHTML = `<p style="${placeholderStyle}">Type to search...</p>`;
@@ -200,9 +200,9 @@
 			<a href="${r.url}" style="display: block; border-radius: 0.5rem; padding: 0.625rem 0.75rem; transition: background-color 150ms; text-decoration: none;" onmouseenter="this.style.background='rgb(255 255 255 / 0.04)'" onmouseleave="this.style.background='transparent'" data-search-result>
 				<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.125rem;">
 					<span style="font-size: 0.875rem; font-weight: 500; color: rgb(255 255 255 / 0.8);">${r.title}</span>
-					${r.section ? `<span style="font-size: 11px; color: rgb(255 255 255 / 0.25);">${r.section}</span>` : ""}
+					${r.section ? `<span style="font-size: 11px; color: rgb(255 255 255 / 0.35);">${r.section}</span>` : ""}
 				</div>
-				<div style="font-size: 0.75rem; color: rgb(255 255 255 / 0.4); line-height: 1.625; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">${r.excerpt}</div>
+				<div style="font-size: 0.75rem; color: rgb(255 255 255 / 0.5); line-height: 1.625; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">${r.excerpt}</div>
 			</a>`,
 			)
 			.join("");
@@ -215,7 +215,7 @@
 		if (!pf) {
 			const container = document.getElementById("search-results");
 			if (container) {
-				container.innerHTML = '<p style="padding: 1.5rem 0.75rem; text-align: center; font-size: 0.875rem; color: rgb(255 255 255 / 0.3);">Search not available. Run <code style="font-family: ui-monospace, monospace; color: rgb(255 255 255 / 0.5);">npx pagefind</code> after building.</p>';
+				container.innerHTML = '<p style="padding: 1.5rem 0.75rem; text-align: center; font-size: 0.875rem; color: rgb(255 255 255 / 0.4);">Search not available. Run <code style="font-family: ui-monospace, monospace; color: rgb(255 255 255 / 0.6);">npx pagefind</code> after building.</p>';
 			}
 			return;
 		}

package/src/components/SidebarSection.astro

@@ -11,7 +11,7 @@ const { section, currentPath } = Astro.props;
 ---
 
 <details class="mb-6 group" open>
-	<summary class="flex items-center justify-between w-full py-1.5 text-xs font-semibold uppercase tracking-widest text-white/30 hover:text-white/50 transition-colors cursor-pointer list-none [&::-webkit-details-marker]:hidden">
+	<summary class="flex items-center justify-between w-full py-1.5 text-xs font-semibold uppercase tracking-widest text-white/40 hover:text-white/60 transition-colors cursor-pointer list-none [&::-webkit-details-marker]:hidden">
 		{section.title}
 		<svg
 			class="w-3 h-3 transition-transform duration-150 group-open:rotate-180"
@@ -30,7 +30,7 @@ const { section, currentPath } = Astro.props;
 					"block py-1.5 pl-3 text-sm border-l-2 transition-colors",
 					currentPath === link.href
 						? "border-accent text-white font-medium"
-						: "border-transparent text-white/50 hover:text-white/80 hover:border-white/20",
+						: "border-transparent text-white/60 hover:text-white/90 hover:border-white/20",
 				]}
 			>
 				{link.label}

package/src/components/TableOfContents.astro

@@ -4,7 +4,7 @@
 ---
 
 <nav id="toc" class="w-44 shrink-0 hidden xl:block sticky top-16 h-[calc(100dvh-4rem)] pt-8 pr-4 overflow-y-auto">
-	<div class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-3">On this page</div>
+	<div class="text-xs font-semibold uppercase tracking-widest text-white/40 mb-3">On this page</div>
 	<ul id="toc-list" class="flex flex-col gap-0.5"></ul>
 </nav>
 
@@ -12,7 +12,7 @@
 	const ACTIVE_CLASS =
 		"block py-1 text-sm border-l-2 pl-3 transition-colors border-accent text-white font-medium";
 	const INACTIVE_CLASS =
-		"block py-1 text-sm border-l-2 pl-3 transition-colors border-transparent text-white/40 hover:text-white/60 hover:border-white/20";
+		"block py-1 text-sm border-l-2 pl-3 transition-colors border-transparent text-white/50 hover:text-white/70 hover:border-white/20";
 
 	function initToc() {
 		const tocList = document.getElementById("toc-list");

package/src/styles/build-input.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@source "../components/**/*.{astro,ts}";
+@source "../utils/**/*.ts";

package/src/styles/utilities.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-400:oklch(70.4% .191 22.216);--color-yellow-400:oklch(85.2% .199 91.936);--color-green-400:oklch(79.2% .209 151.711);--color-cyan-400:oklch(78.9% .154 211.53);--color-blue-400:oklch(70.7% .165 254.624);--color-purple-400:oklch(71.4% .203 305.504);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xl:36rem;--container-3xl:48rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--ease-out:cubic-bezier(0, 0, .2, 1);--blur-sm:8px;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.right-0{right:calc(var(--spacing) * 0)}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing) * 0)}.mx-auto{margin-inline:auto}.my-4{margin-block:calc(var(--spacing) * 4)}.my-6{margin-block:calc(var(--spacing) * 6)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-\[7px\]{margin-top:7px}.mt-auto{margin-top:auto}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.mb-12{margin-bottom:calc(var(--spacing) * 12)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-3{margin-left:calc(var(--spacing) * 3)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-\[calc\(100dvh-4rem\)\]{height:calc(100dvh - 4rem)}.h-auto{height:auto}.h-dvh{height:100dvh}.h-full{height:100%}.min-h-dvh{min-height:100dvh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-20{width:calc(var(--spacing) * 20)}.w-44{width:calc(var(--spacing) * 44)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-xl{max-width:var(--container-xl)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.scroll-mt-24{scroll-margin-top:calc(var(--spacing) * 24)}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-blue-400\/30{border-color:#54a2ff4d}@supports (color:color-mix(in lab, red, red)){.border-blue-400\/30{border-color:color-mix(in oklab, var(--color-blue-400) 30%, transparent)}}.border-green-400\/30{border-color:#05df724d}@supports (color:color-mix(in lab, red, red)){.border-green-400\/30{border-color:color-mix(in oklab, var(--color-green-400) 30%, transparent)}}.border-red-400\/30{border-color:#ff65684d}@supports (color:color-mix(in lab, red, red)){.border-red-400\/30{border-color:color-mix(in oklab, var(--color-red-400) 30%, transparent)}}.border-transparent{border-color:#0000}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/\[0\.04\]{border-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.04\]{border-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.border-white\/\[0\.06\]{border-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.06\]{border-color:color-mix(in oklab, var(--color-white) 6%, transparent)}}.border-yellow-400\/30{border-color:#fac8004d}@supports (color:color-mix(in lab, red, red)){.border-yellow-400\/30{border-color:color-mix(in oklab, var(--color-yellow-400) 30%, transparent)}}.bg-\[\#161618\]{background-color:#161618}.bg-black{background-color:var(--color-black)}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.bg-black\/60{background-color:color-mix(in oklab, var(--color-black) 60%, transparent)}}.bg-black\/80{background-color:#000c}@supports (color:color-mix(in lab, red, red)){.bg-black\/80{background-color:color-mix(in oklab, var(--color-black) 80%, transparent)}}.bg-blue-400{background-color:var(--color-blue-400)}.bg-blue-400\/5{background-color:#54a2ff0d}@supports (color:color-mix(in lab, red, red)){.bg-blue-400\/5{background-color:color-mix(in oklab, var(--color-blue-400) 5%, transparent)}}.bg-cyan-400{background-color:var(--color-cyan-400)}.bg-green-400{background-color:var(--color-green-400)}.bg-green-400\/5{background-color:#05df720d}@supports (color:color-mix(in lab, red, red)){.bg-green-400\/5{background-color:color-mix(in oklab, var(--color-green-400) 5%, transparent)}}.bg-purple-400{background-color:var(--color-purple-400)}.bg-red-400\/5{background-color:#ff65680d}@supports (color:color-mix(in lab, red, red)){.bg-red-400\/5{background-color:color-mix(in oklab, var(--color-red-400) 5%, transparent)}}.bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.bg-white\/5{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.bg-white\/\[0\.02\]{background-color:#ffffff05}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.02\]{background-color:color-mix(in oklab, var(--color-white) 2%, transparent)}}.bg-white\/\[0\.03\]{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.03\]{background-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.bg-white\/\[0\.04\]{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.04\]{background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.bg-yellow-400{background-color:var(--color-yellow-400)}.bg-yellow-400\/5{background-color:#fac8000d}@supports (color:color-mix(in lab, red, red)){.bg-yellow-400\/5{background-color:color-mix(in oklab, var(--color-yellow-400) 5%, transparent)}}.p-0{padding:calc(var(--spacing) * 0)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-24{padding-block:calc(var(--spacing) * 24)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pb-10{padding-bottom:calc(var(--spacing) * 10)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-6{padding-left:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.leading-\[1\.7\]{--tw-leading:1.7;line-height:1.7}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-blue-400{color:var(--color-blue-400)}.text-cyan-400{color:var(--color-cyan-400)}.text-green-400{color:var(--color-green-400)}.text-purple-400{color:var(--color-purple-400)}.text-red-400{color:var(--color-red-400)}.text-white{color:var(--color-white)}.text-white\/30{color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.text-white\/30{color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.text-white\/40{color:#fff6}@supports (color:color-mix(in lab, red, red)){.text-white\/40{color:color-mix(in oklab, var(--color-white) 40%, transparent)}}.text-white\/45{color:#ffffff73}@supports (color:color-mix(in lab, red, red)){.text-white\/45{color:color-mix(in oklab, var(--color-white) 45%, transparent)}}.text-white\/50{color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.text-white\/50{color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.text-white\/60{color:#fff9}@supports (color:color-mix(in lab, red, red)){.text-white\/60{color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.text-yellow-400{color:var(--color-yellow-400)}.uppercase{text-transform:uppercase}.opacity-60{opacity:.6}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.group-open\:rotate-180:is(:where(.group):is([open],:popover-open,:open) *){rotate:180deg}@media (hover:hover){.group-hover\:text-white\/60:is(:where(.group):hover *){color:#fff9}@supports (color:color-mix(in lab, red, red)){.group-hover\:text-white\/60:is(:where(.group):hover *){color:color-mix(in oklab, var(--color-white) 60%, transparent)}}}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:border-white\/20:hover{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/20:hover{border-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.hover\:bg-white\/\[0\.06\]:hover{background-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.06\]:hover{background-color:color-mix(in oklab, var(--color-white) 6%, transparent)}}.hover\:bg-white\/\[0\.08\]:hover{background-color:#ffffff14}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.08\]:hover{background-color:color-mix(in oklab, var(--color-white) 8%, transparent)}}.hover\:text-white:hover{color:var(--color-white)}.hover\:text-white\/60:hover{color:#fff9}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/60:hover{color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.hover\:text-white\/70:hover{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/70:hover{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.hover\:text-white\/80:hover{color:#fffc}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/80:hover{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.hover\:text-white\/90:hover{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/90:hover{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-100:hover{opacity:1}}@media (min-width:48rem){.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-24{height:calc(var(--spacing) * 24)}.md\:w-1\/3{width:33.3333%}.md\:w-24{width:calc(var(--spacing) * 24)}.md\:flex-row{flex-direction:row}.md\:gap-4{gap:calc(var(--spacing) * 4)}.md\:px-8{padding-inline:calc(var(--spacing) * 8)}.md\:py-16{padding-block:calc(var(--spacing) * 16)}.md\:py-32{padding-block:calc(var(--spacing) * 32)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}@media (min-width:80rem){.xl\:block{display:block}.xl\:px-12{padding-inline:calc(var(--spacing) * 12)}}.\[\&_a\]\:underline a{text-decoration-line:underline}.\[\&_code\]\:font-mono code{font-family:var(--font-mono)}.\[\&_code\]\:text-xs code{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\[\&_code\]\:text-white\/80 code{color:#fffc}@supports (color:color-mix(in lab, red, red)){.\[\&_code\]\:text-white\/80 code{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.\[\&_pre\]\:\!m-0 pre{margin:calc(var(--spacing) * 0)!important}.\[\&_pre\]\:\!bg-transparent pre{background-color:#0000!important}.\[\&_pre\]\:\!p-0 pre{padding:calc(var(--spacing) * 0)!important}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}