rizzo-css 0.0.21 → 0.0.23

package/README.md

@@ -41,7 +41,7 @@ You install **the same package** for every framework: `npm install rizzo-css`. N
 
 With `npx rizzo-css add --path <dir>`, the CLI still suggests the correct href for your framework (e.g. Astro/Svelte get a leading `/` path).
 
-Scaffolds in the package: `scaffold/vanilla/` (Full or Manual), `scaffold/astro-minimal/`, `scaffold/svelte-minimal/`, plus `scaffold/astro/` and `scaffold/svelte/` (component templates for hand-pick). Use `npx rizzo-css init` and choose **Create new project** to get a **Full** or **Manual** scaffold; the stylesheet link is in the layout. **Add to existing** (or `add` command) drops in CSS + hand-pick components; **you must add the stylesheet `<link>` yourself** — the CLI prints the exact tag. Every scaffold includes LICENSE and README; Astro/Svelte minimal include package.json and .env.example.
+Scaffolds in the package: `scaffold/vanilla/` (Full or Manual), `scaffold/astro-minimal/`, `scaffold/svelte-minimal/`, plus `scaffold/astro/` and `scaffold/svelte/` (component templates for hand-pick). Use `npx rizzo-css init` and choose **Create new project** to get a **Full** or **Manual** scaffold; the stylesheet link is in the layout. **Add to existing** (or `add` command) drops in CSS + hand-pick components; **you must add the stylesheet `<link>` yourself** — the CLI prints the exact tag. Every scaffold includes LICENSE-RIZZO and README-RIZZO.md (does not overwrite your project LICENSE/README); Astro/Svelte minimal include package.json and .env.example.
 
 ## Use
 
@@ -56,7 +56,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.21 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.23 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->
@@ -65,7 +65,7 @@ import 'rizzo-css';
 
 Short URLs also work: `https://unpkg.com/rizzo-css@latest` and `https://cdn.jsdelivr.net/npm/rizzo-css@latest` (CDNs serve the default file from package.json). To verify after publish: open the URL in a browser or run `curl -I https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css` and expect `200 OK`.
 
-Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). **Vanilla JS**, Astro, and Svelte all use the same CSS and BEM markup; Astro/Svelte add framework component files when you hand-pick. Each scaffold has a README; every install includes LICENSE. The **Vanilla** Full includes a Settings panel and toast; **Astro** and **Svelte** Full scaffolds include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
+Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). **Vanilla JS**, Astro, and Svelte all use the same CSS and BEM markup; Astro/Svelte add framework component files when you hand-pick. Each scaffold has README-RIZZO.md; every install includes LICENSE-RIZZO. The **Navbar** component in the scaffold includes the default Cat logo in the brand link (optional `logo` prop for a custom image). The **Vanilla** Full includes a Settings panel and toast; **Astro** and **Svelte** Full scaffolds include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
 
 ## Themes
 

package/bin/rizzo-css.js

@@ -6,6 +6,10 @@ const { spawnSync } = require('child_process');
 const readline = require('readline');
 
 const RIZZO_CONFIG_FILE = 'rizzo-css.json';
+/** Scaffold README filename; avoids overwriting an existing project README.md. */
+const SCAFFOLD_README_FILENAME = 'README-RIZZO.md';
+/** Scaffold license filename; avoids overwriting an existing project LICENSE. */
+const SCAFFOLD_LICENSE_FILENAME = 'LICENSE-RIZZO';
 
 const COMMANDS = ['init', 'add', 'theme', 'help'];
 const FRAMEWORKS = ['vanilla', 'astro', 'svelte'];
@@ -15,17 +19,17 @@ const VALID_PACKAGE_MANAGERS = ['npm', 'pnpm', 'yarn', 'bun'];
 /** Full = everything we ship. Minimal = recommended starting set. Manual = you choose. */
 const TEMPLATES = {
   vanilla: [
-    { value: 'full', label: 'Full — index.html + theme switcher, js/main.js, icons, component showcase, README' },
+    { value: 'full', label: 'Full — index.html + theme switcher, js/main.js, icons, component showcase, ' + SCAFFOLD_README_FILENAME },
     { value: 'minimal', label: 'Minimal — index.html + CSS + js/main.js (recommended starter; no showcase)' },
     { value: 'manual', label: 'Manual — index.html + CSS; pick components to add their pages + js/main.js' },
   ],
   astro: [
-    { value: 'full', label: 'Full — Astro app + all 25 components (config, one page, README, LICENSE, .env.example)' },
+    { value: 'full', label: 'Full — Astro app + all 25 components (config, one page, ' + SCAFFOLD_README_FILENAME + ', ' + SCAFFOLD_LICENSE_FILENAME + ', .env.example)' },
     { value: 'minimal', label: 'Minimal — Astro app + recommended components (Button, Badge, Card, Modal, Tabs, ThemeSwitcher, FormGroup, Alert, Toast, Dropdown)' },
     { value: 'manual', label: 'Manual — minimal base + pick the components you want' },
   ],
   svelte: [
-    { value: 'full', label: 'Full — SvelteKit app + all 25 components (config, one page, README, LICENSE, .env.example)' },
+    { value: 'full', label: 'Full — SvelteKit app + all 25 components (config, one page, ' + SCAFFOLD_README_FILENAME + ', ' + SCAFFOLD_LICENSE_FILENAME + ', .env.example)' },
     { value: 'minimal', label: 'Minimal — SvelteKit app + recommended components (Button, Badge, Card, Modal, Tabs, ThemeSwitcher, FormGroup, Alert, Toast, Dropdown)' },
     { value: 'manual', label: 'Manual — minimal base + pick the components you want' },
   ],
@@ -140,7 +144,7 @@ function getCssPath() {
   return join(getPackageRoot(), 'dist', 'rizzo.min.css');
 }
 
-/** Copy package dist/fonts into <cssTargetDir>/fonts so CSS url(./fonts/...) resolves. cssTargetDir is framework-specific (public/css | static/css | css). */
+/** Copy package dist/fonts into <cssTargetDir>/fonts so CSS url(./fonts/...) resolves. cssTargetDir is framework-specific (static/css | css). Not used for Astro; use copyRizzoCssAndFontsForAstro instead. */
 function copyRizzoFonts(cssTargetDir) {
   const fontsSrc = join(getPackageRoot(), 'dist', 'fonts');
   if (!existsSync(fontsSrc)) return;
@@ -158,11 +162,57 @@ function copyRizzoFonts(cssTargetDir) {
   }
 }
 
-/** Copy the package LICENSE into the project dir. Call after every scaffold so every install includes a license. */
+/** Astro only: copy rizzo.min.css to public/css with font URLs rewritten to /assets/fonts/, and copy fonts to public/assets/fonts. */
+function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
+  const cssDir = join(projectDir, 'public', 'css');
+  const cssTarget = join(cssDir, 'rizzo.min.css');
+  const fontsDest = join(projectDir, 'public', 'assets', 'fonts');
+  mkdirSync(cssDir, { recursive: true });
+  mkdirSync(fontsDest, { recursive: true });
+  copyFileSync(cssSource, cssTarget);
+  let css = readFileSync(cssTarget, 'utf8');
+  css = css.replace(/url\(['"]?\.\/fonts\//g, "url('/assets/fonts/");
+  writeFileSync(cssTarget, css, 'utf8');
+  const fontsSrc = join(getPackageRoot(), 'dist', 'fonts');
+  if (existsSync(fontsSrc)) {
+    const entries = readdirSync(fontsSrc, { withFileTypes: true });
+    for (const e of entries) {
+      const srcPath = join(fontsSrc, e.name);
+      const destPath = join(fontsDest, e.name);
+      if (e.isDirectory()) copyDirRecursive(srcPath, destPath);
+      else copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+/** SvelteKit only: copy rizzo.min.css to static/css with font URLs rewritten to /assets/fonts/, and copy fonts to static/assets/fonts. */
+function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
+  const cssDir = join(projectDir, 'static', 'css');
+  const cssTarget = join(cssDir, 'rizzo.min.css');
+  const fontsDest = join(projectDir, 'static', 'assets', 'fonts');
+  mkdirSync(cssDir, { recursive: true });
+  mkdirSync(fontsDest, { recursive: true });
+  copyFileSync(cssSource, cssTarget);
+  let css = readFileSync(cssTarget, 'utf8');
+  css = css.replace(/url\(['"]?\.\/fonts\//g, "url('/assets/fonts/");
+  writeFileSync(cssTarget, css, 'utf8');
+  const fontsSrc = join(getPackageRoot(), 'dist', 'fonts');
+  if (existsSync(fontsSrc)) {
+    const entries = readdirSync(fontsSrc, { withFileTypes: true });
+    for (const e of entries) {
+      const srcPath = join(fontsSrc, e.name);
+      const destPath = join(fontsDest, e.name);
+      if (e.isDirectory()) copyDirRecursive(srcPath, destPath);
+      else copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+/** Copy the package LICENSE into the project dir as LICENSE-RIZZO so we do not overwrite an existing LICENSE. */
 function copyPackageLicense(projectDir) {
   const licensePath = join(getPackageRoot(), 'LICENSE');
   if (existsSync(licensePath)) {
-    copyFileSync(licensePath, join(projectDir, 'LICENSE'));
+    copyFileSync(licensePath, join(projectDir, SCAFFOLD_LICENSE_FILENAME));
   }
 }
 
@@ -181,11 +231,17 @@ function readRizzoConfig(cwd) {
   } catch (_) { return null; }
 }
 
-/** Write rizzo-css.json to cwd. config: { targetDir?, framework?, packageManager? }. */
+/** Write rizzo-css.json to cwd. config: { targetDir?, framework?, packageManager? }. Preserves unknown keys from existing file. */
 function writeRizzoConfig(cwd, config) {
   if (!cwd || !existsSync(cwd)) return;
   const configPath = join(cwd, RIZZO_CONFIG_FILE);
-  const obj = {};
+  let obj = {};
+  if (existsSync(configPath)) {
+    try {
+      const raw = JSON.parse(readFileSync(configPath, 'utf8'));
+      if (raw && typeof raw === 'object') obj = { ...raw };
+    } catch (_) { /* ignore */ }
+  }
   if (config.targetDir != null) obj.targetDir = config.targetDir;
   if (config.framework != null) obj.framework = config.framework;
   if (config.packageManager != null) obj.packageManager = config.packageManager;
@@ -413,12 +469,13 @@ function getRealValues(items) {
   return items.map((i) => i.value);
 }
 
-/** Multi-select menu: circles ○/●, Space toggles, Enter confirms. Optional first two options: Select all / Select none (value __all__ / __none__). Returns array of selected values. */
-function multiSelectMenu(options, title) {
+/** Multi-select menu: circles ○/●, Space toggles, Enter confirms. Optional first two options: Select all / Select none (value __all__ / __none__). initialSelected: optional array of values to pre-check. Returns array of selected values. */
+function multiSelectMenu(options, title, initialSelected) {
   const items = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
   const isTty = process.stdin.isTTY && process.stdout.isTTY;
   const withSentinels = hasAllNoneSentinels(items);
   const realValues = getRealValues(items);
+  const initialSet = Array.isArray(initialSelected) ? new Set(initialSelected) : null;
 
   if (!isTty) {
     console.log('\n' + (title || 'Choose (space to toggle, enter when done)') + ':');
@@ -466,6 +523,11 @@ function multiSelectMenu(options, title) {
   return new Promise((resolve) => {
     let index = 0;
     const selected = new Set();
+    if (initialSet && initialSet.size > 0) {
+      for (let i = 0; i < items.length; i++) {
+        if (initialSet.has(items[i].value)) selected.add(i);
+      }
+    }
     const lineCount = (title ? 1 : 0) + items.length + 1;
     const realStart = withSentinels ? 2 : 0;
 
@@ -578,6 +640,8 @@ function printHelp() {
   console.log(`
 rizzo-css CLI — Add Rizzo CSS to your project (Vanilla, Astro, Svelte)
 
+Available commands: init, add, theme, help
+
 Usage (use your package manager):
   npx rizzo-css <command> [options]
   pnpm dlx rizzo-css <command> [options]
@@ -671,9 +735,20 @@ async function promptThemes() {
   return { theme, defaultDark: DARK_THEMES.includes(defaultDark) ? defaultDark : DARK_THEMES[0], defaultLight: LIGHT_THEMES.includes(defaultLight) ? defaultLight : LIGHT_THEMES[0] };
 }
 
-/** Ask what to include: CSS only, recommended set, all components, or pick. Returns array of component names. Only call when componentList.length > 0. */
-async function promptComponentChoice(componentList, framework) {
+/** Ask what to include: CSS only, recommended set, all components, or pick. Returns array of component names. Only call when componentList.length > 0. initialSelection: when set (e.g. for manual = minimal base), skip the menu and show multi-select with these pre-selected. */
+async function promptComponentChoice(componentList, framework, initialSelection) {
   const recommended = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
+  if (initialSelection !== undefined) {
+    return multiSelectMenu(
+      [
+        { value: SENTINEL_ALL, label: 'Select all components' },
+        { value: SENTINEL_NONE, label: 'Select no components' },
+        ...componentList.map((c) => ({ value: c, label: c })),
+      ],
+      '? Components (minimal set pre-selected) — Space to toggle, Enter to confirm',
+      initialSelection
+    );
+  }
   const choice = await selectMenu(
     [
       { value: 'none', label: 'CSS only — no components' },
@@ -713,15 +788,15 @@ function detectFramework(cwd) {
 /**
  * Framework-specific paths for CSS and static assets. Use these so fonts, sounds, images
  * go in the right place per framework (Astro: public/, SvelteKit: static/, Vanilla: project root).
- * - targetDir: where rizzo.min.css is copied (fonts go in targetDir/fonts so CSS ./fonts/ resolves).
- * - assetsRoot: root for other static assets (sounds, images); use assetsRoot + '/sounds' etc. when we ship them.
+ * - targetDir: where rizzo.min.css is copied. Fonts: Astro public/assets/fonts, Svelte static/assets/fonts (CLI rewrites URLs); Vanilla targetDir/fonts.
+ * - assetsRoot: root for static assets (Astro: public; Svelte: static; Vanilla: '').
  */
 function getFrameworkCssPaths(framework) {
   if (framework === 'svelte') {
-    return { targetDir: 'static/css', linkHref: '/css/rizzo.min.css', fontsDir: 'static/css/fonts', assetsRoot: 'static' };
+    return { targetDir: 'static/css', linkHref: '/css/rizzo.min.css', fontsDir: 'static/assets/fonts', assetsRoot: 'static' };
   }
   if (framework === 'astro') {
-    return { targetDir: 'public/css', linkHref: '/css/rizzo.min.css', fontsDir: 'public/css/fonts', assetsRoot: 'public' };
+    return { targetDir: 'public/css', linkHref: '/css/rizzo.min.css', fontsDir: 'public/assets/fonts', assetsRoot: 'public' };
   }
   return { targetDir: 'css', linkHref: 'css/rizzo.min.css', fontsDir: 'css/fonts', assetsRoot: '' };
 }
@@ -1079,11 +1154,20 @@ async function runAddToExisting(frameworkOverride, options) {
 
   const paths = getFrameworkCssPaths(framework);
   const targetDirRaw = (options && options.targetDir) || (config && config.targetDir) || paths.targetDir;
-  const targetDir = join(cwd, targetDirRaw);
-  const cssTarget = join(targetDir, 'rizzo.min.css');
-  mkdirSync(targetDir, { recursive: true });
-  copyFileSync(cssSource, cssTarget);
-  copyRizzoFonts(targetDir);
+  let cssTarget;
+  if (framework === 'astro') {
+    copyRizzoCssAndFontsForAstro(cwd, cssSource);
+    cssTarget = join(cwd, 'public', 'css', 'rizzo.min.css');
+  } else if (framework === 'svelte') {
+    copyRizzoCssAndFontsForSvelte(cwd, cssSource);
+    cssTarget = join(cwd, 'static', 'css', 'rizzo.min.css');
+  } else {
+    const targetDir = join(cwd, targetDirRaw);
+    cssTarget = join(targetDir, 'rizzo.min.css');
+    mkdirSync(targetDir, { recursive: true });
+    copyFileSync(cssSource, cssTarget);
+    copyRizzoFonts(targetDir);
+  }
 
   copyRizzoIcons(cwd, framework);
   if (framework === 'svelte' && selectedComponents.length > 0) {
@@ -1096,7 +1180,7 @@ async function runAddToExisting(frameworkOverride, options) {
     copyVanillaComponents(cwd, selectedComponents, vanillaRepl);
   }
 
-  const linkHref = (options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref;
+  const linkHref = (framework === 'astro' || framework === 'svelte') ? paths.linkHref : ((options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref);
   const pmFromOption = options && options.packageManager && VALID_PACKAGE_MANAGERS.includes(options.packageManager);
   const pm = pmFromOption
     ? getPackageManagerCommands({ agent: options.packageManager, command: options.packageManager })
@@ -1104,7 +1188,8 @@ async function runAddToExisting(frameworkOverride, options) {
       ? getPackageManagerCommands({ agent: config.packageManager, command: config.packageManager })
       : resolvePackageManager(cwd);
   const cliExample = pm.dlx('rizzo-css theme');
-  writeRizzoConfig(cwd, { targetDir: targetDirRaw, framework, packageManager: pm.agent });
+  const configTargetDir = framework === 'astro' ? 'public/css' : framework === 'svelte' ? 'static/css' : targetDirRaw;
+  writeRizzoConfig(cwd, { targetDir: configTargetDir, framework, packageManager: pm.agent });
   console.log('\n✓ Rizzo CSS added to your existing project');
   console.log('  - ' + cssTarget);
   console.log('  - Wrote ' + RIZZO_CONFIG_FILE);
@@ -1214,7 +1299,8 @@ async function cmdInit(argv) {
       selectedComponents = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
     } else if (selectedTemplate === 'manual') {
       const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : ASTRO_COMPONENTS;
-      selectedComponents = await promptComponentChoice(componentList, framework);
+      const recommended = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
+      selectedComponents = await promptComponentChoice(componentList, framework, recommended);
     }
 
     const wantsThemeSwitcher = (framework === 'vanilla' && (selectedTemplate === 'full' || selectedTemplate === 'minimal')) || selectedComponents.includes('ThemeSwitcher');
@@ -1242,7 +1328,7 @@ async function cmdInit(argv) {
     process.exit(1);
   }
 
-  const themeComment = '\n  <!-- Initial: ' + theme + '; dark: ' + defaultDark + '; light: ' + defaultLight + ' (all 14 themes in CSS) -->';
+  const themeComment = '  <!-- Initial: ' + theme + '; dark: ' + defaultDark + '; light: ' + defaultLight + ' (all 14 themes in CSS) -->';
   const projectNamePkg = name
     ? name.replace(/\s+/g, '-').toLowerCase()
     : (framework === 'astro' ? 'my-astro-app' : framework === 'svelte' ? 'my-svelte-app' : 'my-app');
@@ -1286,10 +1372,8 @@ async function cmdInit(argv) {
   if (useHandpickAstro) {
     mkdirSync(projectDir, { recursive: true });
     copyDirRecursiveWithReplacements(astroMinimalDir, projectDir, replacements);
-    mkdirSync(join(projectDir, 'public', 'css'), { recursive: true });
+    copyRizzoCssAndFontsForAstro(projectDir, cssSource);
     cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(dirname(cssTarget));
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
@@ -1301,10 +1385,8 @@ async function cmdInit(argv) {
   } else if (useAstroBase) {
     mkdirSync(projectDir, { recursive: true });
     copyDirRecursiveWithReplacements(astroMinimalDir, projectDir, replacements);
-    mkdirSync(join(projectDir, 'public', 'css'), { recursive: true });
+    copyRizzoCssAndFontsForAstro(projectDir, cssSource);
     cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(dirname(cssTarget));
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
@@ -1316,10 +1398,8 @@ async function cmdInit(argv) {
   } else if (useHandpickSvelte) {
     mkdirSync(projectDir, { recursive: true });
     copyDirRecursiveWithReplacements(svelteMinimalDir, projectDir, replacements);
-    mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
+    copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(dirname(cssTarget));
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
@@ -1331,10 +1411,8 @@ async function cmdInit(argv) {
   } else if (useSvelteBase) {
     mkdirSync(projectDir, { recursive: true });
     copyDirRecursiveWithReplacements(svelteMinimalDir, projectDir, replacements);
-    mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
+    copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(dirname(cssTarget));
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
@@ -1365,9 +1443,9 @@ async function cmdInit(argv) {
       .replace(/\{\{LINK_HREF\}\}/g, linkHref);
     writeFileSync(indexPath, indexHtml, 'utf8');
     copyRizzoIcons(projectDir, 'vanilla');
-    const vanillaReadme = join(getPackageRoot(), 'scaffold', 'vanilla', 'README.md');
+    const vanillaReadme = join(getPackageRoot(), 'scaffold', 'vanilla', SCAFFOLD_README_FILENAME);
     if (existsSync(vanillaReadme)) {
-      copyFileSync(vanillaReadme, join(projectDir, 'README.md'));
+      copyFileSync(vanillaReadme, join(projectDir, SCAFFOLD_README_FILENAME));
     }
     const vanillaJs = join(getPackageRoot(), 'scaffold', 'vanilla', 'js', 'main.js');
     if (existsSync(vanillaJs)) {
@@ -1399,14 +1477,19 @@ async function cmdInit(argv) {
     const minimalIndexWithScript = minimalHtml.replace('</body>', '  <script src="js/main.js"></script>\n</body>');
     indexPath = join(projectDir, 'index.html');
     writeFileSync(indexPath, minimalIndexWithScript, 'utf8');
-    writeFileSync(join(projectDir, 'README.md'), VANILLA_MINIMAL_README, 'utf8');
+    writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), VANILLA_MINIMAL_README, 'utf8');
     copyPackageLicense(projectDir);
   } else {
-    const cssDir = join(projectDir, pathsForScaffold.targetDir);
-    cssTarget = join(cssDir, 'rizzo.min.css');
-    mkdirSync(cssDir, { recursive: true });
-    copyFileSync(cssSource, cssTarget);
-    copyRizzoFonts(dirname(cssTarget));
+    if (framework === 'svelte') {
+      copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
+      cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
+    } else {
+      const cssDir = join(projectDir, pathsForScaffold.targetDir);
+      cssTarget = join(cssDir, 'rizzo.min.css');
+      mkdirSync(cssDir, { recursive: true });
+      copyFileSync(cssSource, cssTarget);
+      copyRizzoFonts(dirname(cssTarget));
+    }
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
@@ -1427,17 +1510,17 @@ async function cmdInit(argv) {
         indexContent = minimalHtml.replace('</body>', '  <script src="js/main.js"></script>\n</body>');
       }
       writeFileSync(indexPath, indexContent, 'utf8');
-      writeFileSync(join(projectDir, 'README.md'), VANILLA_MANUAL_README, 'utf8');
+      writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), VANILLA_MANUAL_README, 'utf8');
     } else if (framework === 'astro') {
       indexPath = join(projectDir, 'public', 'index.html');
       mkdirSync(join(projectDir, 'public'), { recursive: true });
       writeFileSync(indexPath, minimalHtml, 'utf8');
-      writeFileSync(join(projectDir, 'README.md'), FALLBACK_MINIMAL_README, 'utf8');
+      writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), FALLBACK_MINIMAL_README, 'utf8');
     } else {
       indexPath = join(projectDir, 'static', 'index.html');
       mkdirSync(join(projectDir, 'static'), { recursive: true });
       writeFileSync(indexPath, minimalHtml, 'utf8');
-      writeFileSync(join(projectDir, 'README.md'), FALLBACK_MINIMAL_README, 'utf8');
+      writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), FALLBACK_MINIMAL_README, 'utf8');
     }
     copyPackageLicense(projectDir);
   }
@@ -1447,7 +1530,7 @@ async function cmdInit(argv) {
   if (indexPath) console.log('  - ' + indexPath);
   if (framework === 'vanilla') {
     if (useVanillaFull) {
-      console.log('  - Vanilla JS (full): theme switcher, js/main.js, icons, component showcase, README.');
+      console.log('  - Vanilla JS (full): theme switcher, js/main.js, icons, component showcase, ' + SCAFFOLD_README_FILENAME + '.');
     } else if (useVanillaMinimal) {
       console.log('  - Vanilla JS (minimal): index.html + CSS + js/main.js. Add components from docs or use Full for showcase.');
     } else {

package/dist/rizzo.min.css

@@ -95,11 +95,11 @@ input[type="radio"]:disabled{cursor:not-allowed;opacity:var(--opacity-60)}.check
   [class*="delay-"],
   [class*="duration-"]{transition-delay:0s!important;transition-duration:.01ms!important}}.bg-primary{background-color:var(--background)}.bg-alt{background-color:var(--background-alt)}.bg-accent{background-color:var(--accent)}.bg-success{background-color:var(--success)}.bg-warning{background-color:var(--warning)}.bg-error{background-color:var(--error)}.bg-info{background-color:var(--info)}.bg-transparent{background-color:transparent}.text-primary{color:var(--text)}.text-dim{color:var(--text-dim)}.text-accent{color:var(--accent)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-error{color:var(--error)}.text-info{color:var(--info)}.text-on-accent{color:var(--accent-text)}.text-on-success{color:var(--success-text)}.text-on-warning{color:var(--warning-text)}.text-on-error{color:var(--error-text)}.text-on-info{color:var(--info-text)}.bg-neutral-50{background-color:var(--color-neutral-50)}.bg-neutral-100{background-color:var(--color-neutral-100)}.bg-neutral-200{background-color:var(--color-neutral-200)}.bg-neutral-300{background-color:var(--color-neutral-300)}.bg-neutral-400{background-color:var(--color-neutral-400)}.bg-neutral-500{background-color:var(--color-neutral-500)}.bg-neutral-600{background-color:var(--color-neutral-600)}.bg-neutral-700{background-color:var(--color-neutral-700)}.bg-neutral-800{background-color:var(--color-neutral-800)}.bg-neutral-900{background-color:var(--color-neutral-900)}.bg-neutral-950{background-color:var(--color-neutral-950)}.text-neutral-50{color:var(--color-neutral-50)}.text-neutral-100{color:var(--color-neutral-100)}.text-neutral-200{color:var(--color-neutral-200)}.text-neutral-300{color:var(--color-neutral-300)}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-500{color:var(--color-neutral-500)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-700{color:var(--color-neutral-700)}.text-neutral-800{color:var(--color-neutral-800)}.text-neutral-900{color:var(--color-neutral-900)}.text-neutral-950{color:var(--color-neutral-950)}.border-neutral-50{border-color:var(--color-neutral-50)}.border-neutral-100{border-color:var(--color-neutral-100)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-neutral-300{border-color:var(--color-neutral-300)}.border-neutral-400{border-color:var(--color-neutral-400)}.border-neutral-500{border-color:var(--color-neutral-500)}.border-neutral-600{border-color:var(--color-neutral-600)}.border-neutral-700{border-color:var(--color-neutral-700)}.border-neutral-800{border-color:var(--color-neutral-800)}.border-neutral-900{border-color:var(--color-neutral-900)}.border-neutral-950{border-color:var(--color-neutral-950)}.bg-accent-50{background-color:var(--color-accent-50)}.bg-accent-100{background-color:var(--color-accent-100)}.bg-accent-200{background-color:var(--color-accent-200)}.bg-accent-300{background-color:var(--color-accent-300)}.bg-accent-400{background-color:var(--color-accent-400)}.bg-accent-500{background-color:var(--color-accent-500)}.bg-accent-600{background-color:var(--color-accent-600)}.bg-accent-700{background-color:var(--color-accent-700)}.bg-accent-800{background-color:var(--color-accent-800)}.bg-accent-900{background-color:var(--color-accent-900)}.bg-accent-950{background-color:var(--color-accent-950)}.text-accent-50{color:var(--color-accent-50)}.text-accent-100{color:var(--color-accent-100)}.text-accent-200{color:var(--color-accent-200)}.text-accent-300{color:var(--color-accent-300)}.text-accent-400{color:var(--color-accent-400)}.text-accent-500{color:var(--color-accent-500)}.text-accent-600{color:var(--color-accent-600)}.text-accent-700{color:var(--color-accent-700)}.text-accent-800{color:var(--color-accent-800)}.text-accent-900{color:var(--color-accent-900)}.text-accent-950{color:var(--color-accent-950)}.border-accent-50{border-color:var(--color-accent-50)}.border-accent-100{border-color:var(--color-accent-100)}.border-accent-200{border-color:var(--color-accent-200)}.border-accent-300{border-color:var(--color-accent-300)}.border-accent-400{border-color:var(--color-accent-400)}.border-accent-500{border-color:var(--color-accent-500)}.border-accent-600{border-color:var(--color-accent-600)}.border-accent-700{border-color:var(--color-accent-700)}.border-accent-800{border-color:var(--color-accent-800)}.border-accent-900{border-color:var(--color-accent-900)}.border-accent-950{border-color:var(--color-accent-950)}.bg-success-50{background-color:var(--color-success-50)}.bg-success-100{background-color:var(--color-success-100)}.bg-success-200{background-color:var(--color-success-200)}.bg-success-300{background-color:var(--color-success-300)}.bg-success-400{background-color:var(--color-success-400)}.bg-success-500{background-color:var(--color-success-500)}.bg-success-600{background-color:var(--color-success-600)}.bg-success-700{background-color:var(--color-success-700)}.bg-success-800{background-color:var(--color-success-800)}.bg-success-900{background-color:var(--color-success-900)}.bg-success-950{background-color:var(--color-success-950)}.text-success-50{color:var(--color-success-50)}.text-success-100{color:var(--color-success-100)}.text-success-200{color:var(--color-success-200)}.text-success-300{color:var(--color-success-300)}.text-success-400{color:var(--color-success-400)}.text-success-500{color:var(--color-success-500)}.text-success-600{color:var(--color-success-600)}.text-success-700{color:var(--color-success-700)}.text-success-800{color:var(--color-success-800)}.text-success-900{color:var(--color-success-900)}.text-success-950{color:var(--color-success-950)}.border-success-50{border-color:var(--color-success-50)}.border-success-100{border-color:var(--color-success-100)}.border-success-200{border-color:var(--color-success-200)}.border-success-300{border-color:var(--color-success-300)}.border-success-400{border-color:var(--color-success-400)}.border-success-500{border-color:var(--color-success-500)}.border-success-600{border-color:var(--color-success-600)}.border-success-700{border-color:var(--color-success-700)}.border-success-800{border-color:var(--color-success-800)}.border-success-900{border-color:var(--color-success-900)}.border-success-950{border-color:var(--color-success-950)}.bg-warning-50{background-color:var(--color-warning-50)}.bg-warning-100{background-color:var(--color-warning-100)}.bg-warning-200{background-color:var(--color-warning-200)}.bg-warning-300{background-color:var(--color-warning-300)}.bg-warning-400{background-color:var(--color-warning-400)}.bg-warning-500{background-color:var(--color-warning-500)}.bg-warning-600{background-color:var(--color-warning-600)}.bg-warning-700{background-color:var(--color-warning-700)}.bg-warning-800{background-color:var(--color-warning-800)}.bg-warning-900{background-color:var(--color-warning-900)}.bg-warning-950{background-color:var(--color-warning-950)}.text-warning-50{color:var(--color-warning-50)}.text-warning-100{color:var(--color-warning-100)}.text-warning-200{color:var(--color-warning-200)}.text-warning-300{color:var(--color-warning-300)}.text-warning-400{color:var(--color-warning-400)}.text-warning-500{color:var(--color-warning-500)}.text-warning-600{color:var(--color-warning-600)}.text-warning-700{color:var(--color-warning-700)}.text-warning-800{color:var(--color-warning-800)}.text-warning-900{color:var(--color-warning-900)}.text-warning-950{color:var(--color-warning-950)}.border-warning-50{border-color:var(--color-warning-50)}.border-warning-100{border-color:var(--color-warning-100)}.border-warning-200{border-color:var(--color-warning-200)}.border-warning-300{border-color:var(--color-warning-300)}.border-warning-400{border-color:var(--color-warning-400)}.border-warning-500{border-color:var(--color-warning-500)}.border-warning-600{border-color:var(--color-warning-600)}.border-warning-700{border-color:var(--color-warning-700)}.border-warning-800{border-color:var(--color-warning-800)}.border-warning-900{border-color:var(--color-warning-900)}.border-warning-950{border-color:var(--color-warning-950)}.bg-error-50{background-color:var(--color-error-50)}.bg-error-100{background-color:var(--color-error-100)}.bg-error-200{background-color:var(--color-error-200)}.bg-error-300{background-color:var(--color-error-300)}.bg-error-400{background-color:var(--color-error-400)}.bg-error-500{background-color:var(--color-error-500)}.bg-error-600{background-color:var(--color-error-600)}.bg-error-700{background-color:var(--color-error-700)}.bg-error-800{background-color:var(--color-error-800)}.bg-error-900{background-color:var(--color-error-900)}.bg-error-950{background-color:var(--color-error-950)}.text-error-50{color:var(--color-error-50)}.text-error-100{color:var(--color-error-100)}.text-error-200{color:var(--color-error-200)}.text-error-300{color:var(--color-error-300)}.text-error-400{color:var(--color-error-400)}.text-error-500{color:var(--color-error-500)}.text-error-600{color:var(--color-error-600)}.text-error-700{color:var(--color-error-700)}.text-error-800{color:var(--color-error-800)}.text-error-900{color:var(--color-error-900)}.text-error-950{color:var(--color-error-950)}.border-error-50{border-color:var(--color-error-50)}.border-error-100{border-color:var(--color-error-100)}.border-error-200{border-color:var(--color-error-200)}.border-error-300{border-color:var(--color-error-300)}.border-error-400{border-color:var(--color-error-400)}.border-error-500{border-color:var(--color-error-500)}.border-error-600{border-color:var(--color-error-600)}.border-error-700{border-color:var(--color-error-700)}.border-error-800{border-color:var(--color-error-800)}.border-error-900{border-color:var(--color-error-900)}.border-error-950{border-color:var(--color-error-950)}.bg-info-50{background-color:var(--color-info-50)}.bg-info-100{background-color:var(--color-info-100)}.bg-info-200{background-color:var(--color-info-200)}.bg-info-300{background-color:var(--color-info-300)}.bg-info-400{background-color:var(--color-info-400)}.bg-info-500{background-color:var(--color-info-500)}.bg-info-600{background-color:var(--color-info-600)}.bg-info-700{background-color:var(--color-info-700)}.bg-info-800{background-color:var(--color-info-800)}.bg-info-900{background-color:var(--color-info-900)}.bg-info-950{background-color:var(--color-info-950)}.text-info-50{color:var(--color-info-50)}.text-info-100{color:var(--color-info-100)}.text-info-200{color:var(--color-info-200)}.text-info-300{color:var(--color-info-300)}.text-info-400{color:var(--color-info-400)}.text-info-500{color:var(--color-info-500)}.text-info-600{color:var(--color-info-600)}.text-info-700{color:var(--color-info-700)}.text-info-800{color:var(--color-info-800)}.text-info-900{color:var(--color-info-900)}.text-info-950{color:var(--color-info-950)}.border-info-50{border-color:var(--color-info-50)}.border-info-100{border-color:var(--color-info-100)}.border-info-200{border-color:var(--color-info-200)}.border-info-300{border-color:var(--color-info-300)}.border-info-400{border-color:var(--color-info-400)}.border-info-500{border-color:var(--color-info-500)}.border-info-600{border-color:var(--color-info-600)}.border-info-700{border-color:var(--color-info-700)}.border-info-800{border-color:var(--color-info-800)}.border-info-900{border-color:var(--color-info-900)}.border-info-950{border-color:var(--color-info-950)}:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}@media (prefers-reduced-motion:reduce){*,
   *::after,
-  *::before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}@media (prefers-contrast:high){:root{--border:oklch(from var(--border) calc(l - 10%) c h)}*{border-width:2px}}.navbar{backdrop-filter:blur(var(--blur));background-color:oklch(from var(--background-alt) l c h/90%);box-sizing:border-box;left:0;margin:0;max-width:100%;overflow:visible;padding:0;position:sticky;right:0;top:0;width:100%;z-index:var(--z-navbar,5000)}@media (width <= 1023px){.navbar--search-open{border-bottom:0 transparent!important;box-shadow:none!important}.navbar--search-open::after{display:none!important}}.navbar--menu-open{z-index:calc(var(--z-navbar) - 1)}.navbar--search-open{z-index:calc(var(--z-navbar-search-overlay) - 1)}.navbar:not(.navbar--menu-open, .navbar--search-open){z-index:var(--z-navbar)}@media (width <= 1023px){.navbar--menu-open{z-index:var(--z-navbar-mobile-menu-open)}.navbar--search-open{z-index:var(--z-navbar)}}.navbar__container{align-items:center;box-sizing:border-box;display:flex;gap:var(--spacing-4);justify-content:space-between;margin:0 auto;max-width:var(--container-default);min-height:var(--spacing-16);min-width:0;padding:0 var(--spacing-4);width:100%}.navbar::after{background-color:var(--border);bottom:0;content:"";height:var(--spacing-0-125);left:0;pointer-events:none;position:absolute;right:0;width:100%;z-index:var(--z-base)}@media (width <= 1023px){.navbar--search-open::after{display:none!important}}.navbar__actions-desktop{align-items:center;display:flex;flex-shrink:0;gap:var(--spacing-4);margin-left:auto;order:999}.navbar__brand{align-items:center;display:flex;gap:var(--spacing-3)}.navbar__logo{height:var(--spacing-8);width:auto}.navbar__brand-link{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);text-decoration:none;transition:color var(--transition-base)}.navbar__brand-link:hover{color:var(--accent)}.navbar__brand-link:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__toggle{align-items:center;background:none;border:none;color:var(--text);cursor:pointer;display:none;flex-direction:column;gap:var(--spacing-1);justify-content:center;padding:var(--spacing-2)}.navbar__toggle:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375);height:calc(var(--spacing-3) + var(--spacing-0-125));position:relative;width:var(--spacing-6)}.navbar__toggle-icon span{background-color:var(--text);border-radius:var(--spacing-0-125);display:block;height:var(--spacing-0-125);position:absolute;transform-origin:center;transition:transform var(--transition-slow) ease,opacity var(--transition-base) ease;width:100%}.navbar__toggle-icon span:nth-child(1){top:0}.navbar__toggle-icon span:nth-child(2){top:50%;transform:translateY(-50%)}.navbar__toggle-icon span:nth-child(3){bottom:0}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(2){opacity:0;transform:translateY(-50%) scaleX(0)}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}.navbar__menu{align-items:center;display:flex;flex:1;gap:var(--spacing-8);justify-content:flex-start;list-style:none;margin:0;margin-left:var(--spacing-4);padding:0}.navbar__item,.navbar__item--has-dropdown,.navbar__link{position:relative}.navbar__link{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);gap:var(--spacing-0-375);padding:var(--spacing-2) 0;text-decoration:none;transition:color var(--transition-base)}button.navbar__link,
-div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-align:left}div.navbar__sublink{cursor:pointer}.navbar__dropdown-icon{color:currentcolor;flex-shrink:0;height:var(--spacing-3);transition:transform var(--transition-base),color var(--transition-base);width:var(--spacing-3)}.navbar__item--has-dropdown:hover .navbar__dropdown-icon,.navbar__item--has-dropdown[aria-expanded="true"] .navbar__dropdown-icon{transform:rotate(180deg)}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__link{color:var(--accent)}.navbar__submenu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);left:0;list-style:none;margin:0;max-width:var(--spacing-80);min-width:var(--spacing-48);opacity:0;padding:var(--spacing-2) 0;position:absolute;top:100%;transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;white-space:nowrap;width:-moz-max-content;width:max-content;z-index:var(--z-dropdown)}@media (width > 1023px){.navbar__submenu--components{display:block;max-width:var(--spacing-96);min-width:var(--spacing-96);padding:var(--spacing-3);white-space:normal;width:var(--spacing-96)}.navbar__submenu--components > li{display:block;margin:0;padding:0}.navbar__submenu--components .navbar__submenu-overview{border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--spacing-2);padding-bottom:var(--spacing-2)}.navbar__submenu--components .navbar__sublink--overview{box-sizing:border-box;display:block;padding:var(--spacing-0-625) var(--spacing-4);width:100%}.navbar__submenu--components .navbar__submenu-components-grid{display:grid;gap:0 var(--spacing-2);grid-template-columns:1fr 1fr;min-width:0}.navbar__submenu--components .navbar__submenu-column{display:flex;flex-direction:column;gap:0;min-width:0}.navbar__submenu--components .navbar__submenu-column .navbar__sublink{box-sizing:border-box;min-width:0;overflow:hidden;padding:var(--spacing-0-625) var(--spacing-4);text-overflow:ellipsis;white-space:nowrap}.navbar__submenu--themes{display:block;max-width:var(--spacing-105);min-width:var(--spacing-105);padding:var(--spacing-3);white-space:normal;width:var(--spacing-105)}.navbar__submenu--themes > li{display:block;margin:0;padding:0}.navbar__submenu--themes .navbar__submenu-overview{border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--spacing-2);padding-bottom:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink--overview{box-sizing:border-box;display:block;padding:var(--spacing-0-625) var(--spacing-4);width:100%}.navbar__submenu--themes .navbar__submenu-themes-grid{display:grid;gap:0 var(--spacing-2);grid-template-columns:1fr 1fr;min-width:0}.navbar__submenu--themes .navbar__submenu-column{display:flex;flex-direction:column;gap:0;min-width:0}.navbar__submenu--themes .navbar__submenu-column-label{border-bottom:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.05em;margin-bottom:var(--spacing-0-625);padding:var(--spacing-0-625) var(--spacing-4);text-transform:uppercase}.navbar__submenu--themes .navbar__submenu-column .navbar__sublink{box-sizing:border-box;min-width:0;overflow:hidden;padding:var(--spacing-0-625) var(--spacing-4);text-overflow:ellipsis;white-space:nowrap}.navbar__submenu--themes .navbar__sublink--with-icon{align-items:center;display:flex;gap:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink-icon{color:var(--text-dim);flex-shrink:0}.navbar__submenu--themes .navbar__sublink-text{min-width:0;overflow:hidden;text-overflow:ellipsis}}.navbar__submenu--docs{max-width:var(--spacing-80);min-width:var(--spacing-56)}.navbar__submenu--docs .navbar__submenu-group{display:block;list-style:none;margin:0;padding:0}.navbar__submenu--docs .navbar__submenu-group:not(:first-child){border-top:var(--border-width) solid var(--border);margin-top:var(--spacing-3);padding-top:var(--spacing-2)}.navbar__submenu--docs .navbar__submenu-group-label{color:var(--text-dim);display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0;padding:0 var(--spacing-4) var(--spacing-0-625);text-transform:uppercase}.navbar__submenu--docs .navbar__submenu-list{list-style:none;margin:0;padding:0}.navbar__submenu--docs .navbar__submenu-list .navbar__sublink{padding-left:var(--spacing-4)}
+  *::before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}@media (prefers-contrast:high){:root{--border:oklch(from var(--border) calc(l - 10%) c h)}*{border-width:2px}}.navbar{backdrop-filter:blur(var(--blur));background-color:oklch(from var(--background-alt) l c h/90%);box-sizing:border-box;left:0;margin:0;max-width:100%;overflow:visible;padding:0;position:sticky;right:0;top:0;width:100%;z-index:var(--z-navbar,5000)}@media (width <= 1023px){.navbar--search-open{border-bottom:0 transparent!important;box-shadow:none!important}.navbar--search-open::after{display:none!important}}.navbar--menu-open{z-index:calc(var(--z-navbar) - 1)}.navbar--search-open{z-index:calc(var(--z-navbar-search-overlay) - 1)}.navbar:not(.navbar--menu-open, .navbar--search-open){z-index:var(--z-navbar)}@media (width <= 1023px){.navbar--menu-open{z-index:var(--z-navbar-mobile-menu-open)}.navbar--search-open{z-index:var(--z-navbar)}}.navbar__container{align-items:center;box-sizing:border-box;display:flex;gap:var(--spacing-4);justify-content:space-between;margin:0 auto;max-width:var(--container-default);min-height:var(--spacing-16);min-width:0;padding:0 var(--spacing-4);width:100%}.navbar::after{background-color:var(--border);bottom:0;content:"";height:var(--spacing-0-125);left:0;pointer-events:none;position:absolute;right:0;width:100%;z-index:var(--z-base)}@media (width <= 1023px){.navbar--search-open::after{display:none!important}}.navbar__actions-desktop{align-items:center;display:flex;flex-shrink:0;gap:var(--spacing-4);margin-left:auto;order:999}.navbar__brand{align-items:center;display:flex;gap:var(--spacing-3)}.navbar__logo{flex-shrink:0;height:var(--spacing-8);width:auto}.navbar__brand-link{align-items:center;color:var(--text);display:flex;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);gap:var(--spacing-2);text-decoration:none;transition:color var(--transition-base)}.navbar__brand-link:hover{color:var(--accent)}.navbar__brand-link:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__toggle{align-items:center;background:none;border:none;color:var(--text);cursor:pointer;display:none;flex-direction:column;gap:var(--spacing-1);justify-content:center;padding:var(--spacing-2)}.navbar__toggle:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375);height:calc(var(--spacing-3) + var(--spacing-0-125));position:relative;width:var(--spacing-6)}.navbar__toggle-icon span{background-color:var(--text);border-radius:var(--spacing-0-125);display:block;height:var(--spacing-0-125);position:absolute;transform-origin:center;transition:transform var(--transition-slow) ease,opacity var(--transition-base) ease;width:100%}.navbar__toggle-icon span:nth-child(1){top:0}.navbar__toggle-icon span:nth-child(2){top:50%;transform:translateY(-50%)}.navbar__toggle-icon span:nth-child(3){bottom:0}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(2){opacity:0;transform:translateY(-50%) scaleX(0)}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}.navbar__menu{align-items:center;display:flex;flex:1;gap:var(--spacing-8);justify-content:flex-start;list-style:none;margin:0;margin-left:var(--spacing-4);padding:0}.navbar__item,.navbar__item--has-dropdown,.navbar__link{position:relative}.navbar__link{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);gap:var(--spacing-0-375);padding:var(--spacing-2) 0;text-decoration:none;transition:color var(--transition-base)}button.navbar__link,
+div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-align:left}div.navbar__sublink{cursor:pointer}.navbar__dropdown-icon{color:currentcolor;flex-shrink:0;height:var(--spacing-3);transition:transform var(--transition-base),color var(--transition-base);width:var(--spacing-3)}.navbar__item--has-dropdown:hover .navbar__dropdown-icon,.navbar__item--has-dropdown[aria-expanded="true"] .navbar__dropdown-icon{transform:rotate(180deg)}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__link{color:var(--accent)}.navbar__submenu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);left:0;list-style:none;margin:0;max-width:var(--spacing-80);min-width:var(--spacing-48);opacity:0;padding:var(--spacing-2) 0;position:absolute;top:100%;transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;white-space:nowrap;width:-moz-max-content;width:max-content;z-index:var(--z-dropdown)}@media (width > 1023px){.navbar__submenu--components{display:block;max-width:var(--spacing-96);min-width:var(--spacing-96);padding:var(--spacing-3);white-space:normal;width:var(--spacing-96)}.navbar__submenu--components > li{display:block;margin:0;padding:0}.navbar__submenu--components .navbar__submenu-overview{border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--spacing-2);padding-bottom:var(--spacing-2)}.navbar__submenu--components .navbar__sublink--overview{box-sizing:border-box;display:block;padding:var(--spacing-0-625) var(--spacing-4);width:100%}.navbar__submenu--components .navbar__submenu-components-grid{display:grid;gap:0 var(--spacing-2);grid-template-columns:1fr 1fr;min-width:0}.navbar__submenu--components .navbar__submenu-column{display:flex;flex-direction:column;gap:0;min-width:0}.navbar__submenu--components .navbar__submenu-column .navbar__sublink{box-sizing:border-box;min-width:0;overflow:hidden;padding:var(--spacing-0-625) var(--spacing-4);text-overflow:ellipsis;white-space:nowrap}.navbar__submenu--themes{display:block;max-width:var(--spacing-105);min-width:var(--spacing-105);padding:var(--spacing-3);white-space:normal;width:var(--spacing-105)}.navbar__submenu--themes > li{display:block;margin:0;padding:0}.navbar__submenu--themes .navbar__submenu-overview{border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--spacing-2);padding-bottom:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink--overview{box-sizing:border-box;display:block;padding:var(--spacing-0-625) var(--spacing-4);width:100%}.navbar__submenu--themes .navbar__submenu-themes-grid{display:grid;gap:0 var(--spacing-2);grid-template-columns:1fr 1fr;min-width:0}.navbar__submenu--themes .navbar__submenu-column{display:flex;flex-direction:column;gap:0;min-width:0}.navbar__submenu--themes .navbar__submenu-column-label{border-bottom:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.05em;margin-bottom:var(--spacing-0-625);padding:var(--spacing-0-625) var(--spacing-4);text-transform:uppercase}.navbar__submenu--themes .navbar__submenu-column .navbar__sublink{box-sizing:border-box;min-width:0;overflow:hidden;padding:var(--spacing-0-625) var(--spacing-4);text-overflow:ellipsis;white-space:nowrap}.navbar__submenu--themes .navbar__sublink--with-icon{align-items:center;display:flex;gap:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink-icon{color:var(--text-dim);flex-shrink:0}.navbar__submenu--themes .navbar__sublink-text{min-width:0;overflow:hidden;text-overflow:ellipsis}}.navbar__submenu--docs{max-width:var(--spacing-80);min-width:var(--spacing-56)}.navbar__submenu--docs .navbar__submenu-group{display:block;list-style:none;margin:0;padding:0}.navbar__submenu--docs .navbar__submenu-group:not(:first-child){border-top:var(--border-width) solid var(--border);margin-top:var(--spacing-3);padding-top:var(--spacing-2)}.navbar__submenu--docs .navbar__submenu-group-label{color:var(--text-dim);display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0;padding:var(--spacing-2) var(--spacing-4) var(--spacing-2);text-transform:uppercase}.navbar__submenu--docs .navbar__submenu-list{list-style:none;margin:0;padding:0}.navbar__submenu--docs .navbar__submenu-list .navbar__sublink{padding-left:var(--spacing-4)}
 .navbar__item--has-dropdown:hover .navbar__submenu,.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu{opacity:1;transform:translateY(0);visibility:visible}.navbar__sublink{color:var(--text);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);padding:var(--spacing-0-625) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),color var(--transition-base)}.navbar__sublink:hover,.navbar__sublink[aria-current="page"]{background-color:var(--background);color:var(--accent)}.navbar__sublink[aria-current="page"]{font-weight:var(--font-weight-medium)}.navbar__sublink:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.navbar__link:hover{color:var(--accent)}.navbar__link:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__link::after{background-color:var(--accent);bottom:0;content:"";height:var(--spacing-0-125);left:0;position:absolute;transition:width var(--transition-slow);width:0}
 .navbar__link:focus-visible::after,.navbar__link:hover::after,
-.navbar__link[aria-current="page"]::after{width:100%}.navbar__link[aria-current="page"]{color:var(--accent)}.navbar__actions,.navbar__actions .search{display:none}.navbar__settings-btn{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__settings-btn:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.navbar__settings-btn:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__settings-icon{color:var(--icon);flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}.navbar__settings-label{font-size:var(--font-size-sm)}@media (width <= 1023px){.navbar{overflow-x:clip}.navbar__container{gap:var(--spacing-2);min-width:0;padding-left:var(--spacing-3);padding-right:var(--spacing-3)}.navbar__brand{flex-shrink:1;min-width:0;order:0;overflow:hidden}.navbar__brand-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navbar__toggle{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);display:flex;margin-left:var(--spacing-2);margin-right:0;min-height:var(--touch-target-min);min-width:var(--touch-target-min);order:1;padding:var(--spacing-2) var(--spacing-3);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__toggle:hover{background-color:var(--background);border-color:var(--accent)}.navbar__toggle-icon{height:var(--spacing-5)!important;width:var(--spacing-5)!important}.navbar__toggle-icon span{border-radius:var(--radius-sm);height:calc(var(--spacing-0-125)*1.5)!important}.navbar__menu{align-items:stretch;background-color:var(--background-alt);border-top:none;box-shadow:var(--shadow-md);box-sizing:border-box;flex-direction:column;gap:var(--spacing-0);left:0;margin:0;max-height:0;max-width:100%;opacity:0;overflow:hidden;padding:0;pointer-events:none;position:absolute;right:0;top:100%;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;z-index:var(--z-navbar-mobile-menu)}.navbar__menu--open{border-bottom:none!important;left:0;max-height:var(--vh-80);opacity:1;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-4) 0;pointer-events:auto;position:fixed;right:0;scroll-behavior:auto;top:var(--spacing-16);transform:translateZ(0);transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-in),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;will-change:scroll-position;z-index:var(--z-navbar-mobile-menu-open)}.navbar__menu .navbar__item{contain:layout;margin:0;max-width:100%;padding:0;width:100%}.navbar__menu:not(.navbar__menu--open){padding:0;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic)}.navbar__menu--open .navbar__item:last-of-type .navbar__link{border-bottom:none!important}.navbar__item{width:100%}.navbar__link{align-items:center;border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:flex;justify-content:space-between;margin:0;max-width:100%;min-height:var(--touch-target-min);min-width:0;overflow-wrap:break-word;padding:var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-3);transition:background-color var(--transition-base) ease,color var(--transition-base) ease;width:100%}.navbar__link .navbar__dropdown-icon{display:block!important;flex-shrink:0!important;height:var(--spacing-3)!important;margin-left:var(--spacing-2);margin-right:var(--spacing-4);opacity:1!important;transition:transform var(--transition-base) ease-out;visibility:visible!important;width:var(--spacing-3)!important}.navbar__submenu{background-color:var(--background);border:none;border-top:var(--border-width) solid var(--border);box-shadow:none;contain:layout;grid-template-columns:none!important;list-style:none;margin:0!important;max-height:0;max-width:100%!important;opacity:1;overflow:hidden;padding:0!important;position:static;transform:none;transition:max-height .25s cubic-bezier(.4,0,.2,1);visibility:visible;width:100%!important}.navbar__submenu,.navbar__submenu--components .navbar__submenu-components-grid{display:block!important}.navbar__submenu--components .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--components .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu{max-height:var(--max-height-navbar-submenu);overflow:visible;padding:0!important}@media (prefers-reduced-motion:reduce){.navbar__menu,.navbar__menu--open,.navbar__submenu{transition:none}}.navbar__submenu li{padding:0!important}.navbar__sublink,.navbar__submenu li{display:block!important;margin:0!important;max-width:100%!important;width:100%!important}.navbar__sublink{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box!important;min-height:var(--touch-target-min)!important;min-width:0!important;overflow-wrap:break-word!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__sublink:last-child{border-bottom:none}.navbar__submenu--themes .navbar__submenu-themes-grid{display:block!important}.navbar__submenu--themes .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--themes .navbar__submenu-column-label{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:block;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-0-625);margin-top:var(--spacing-2);padding-bottom:var(--spacing-0-625);padding-left:var(--spacing-10);padding-right:var(--spacing-5);width:100%}.navbar__submenu--themes .navbar__submenu-column:first-of-type .navbar__submenu-column-label{margin-top:0}.navbar__submenu--themes .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__submenu--themes .navbar__sublink--with-icon{align-items:center;display:flex!important;gap:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink-icon{color:var(--text-dim);flex-shrink:0}.navbar__submenu--themes .navbar__sublink-text{min-width:0;overflow:hidden;text-overflow:ellipsis}.navbar__submenu--docs .navbar__submenu-group{border-top:none;margin-top:0;padding-top:0}.navbar__submenu--docs .navbar__submenu-group:not(:first-child){border-top:var(--border-width) solid var(--border);margin-top:var(--spacing-2);padding-top:var(--spacing-2)}.navbar__submenu--docs .navbar__submenu-group-label{border-bottom:var(--border-width) solid var(--border);padding:var(--spacing-2) var(--spacing-5) var(--spacing-0-625) var(--spacing-10)}.navbar__submenu--docs .navbar__submenu-list .navbar__sublink{min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu--docs{max-height:min(70vh,420px)!important;overflow-x:hidden;overflow-y:auto!important;-webkit-overflow-scrolling:touch}.navbar__submenu--docs .navbar__sublink[aria-current="page"]{background-color:oklch(from var(--accent) l c h/12%)!important;box-shadow:inset var(--spacing-0-125) 0 0 var(--accent)!important;color:var(--accent)!important;font-weight:var(--font-weight-medium)}.navbar__item:last-of-type .navbar__link{border-bottom:var(--border-width) solid var(--border)}.navbar__actions-desktop .navbar__settings-btn{align-items:center;display:flex;justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}.navbar__actions-desktop .navbar__settings-label{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop .search__trigger{justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}
+.navbar__link[aria-current="page"]::after{width:100%}.navbar__link[aria-current="page"]{color:var(--accent)}.navbar__actions,.navbar__actions .search{display:none}.navbar__settings-btn{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__settings-btn:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.navbar__settings-btn:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__settings-icon{color:var(--icon);flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}.navbar__settings-label{font-size:var(--font-size-sm)}@media (width <= 1023px){.navbar{overflow-x:clip}.navbar__container{gap:var(--spacing-2);min-width:0;padding-left:var(--spacing-3);padding-right:var(--spacing-3)}.navbar__brand{flex-shrink:1;min-width:0;order:0;overflow:hidden}.navbar__brand-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navbar__toggle{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);display:flex;margin-left:var(--spacing-2);margin-right:0;min-height:var(--touch-target-min);min-width:var(--touch-target-min);order:1;padding:var(--spacing-2) var(--spacing-3);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__toggle:hover{background-color:var(--background);border-color:var(--accent)}.navbar__toggle-icon{height:var(--spacing-5)!important;width:var(--spacing-5)!important}.navbar__toggle-icon span{border-radius:var(--radius-sm);height:calc(var(--spacing-0-125)*1.5)!important}.navbar__menu{align-items:stretch;background-color:var(--background-alt);border-top:none;box-shadow:var(--shadow-md);box-sizing:border-box;flex-direction:column;gap:var(--spacing-0);left:0;margin:0;max-height:0;max-width:100%;opacity:0;overflow:hidden;padding:0;pointer-events:none;position:absolute;right:0;top:100%;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;z-index:var(--z-navbar-mobile-menu)}.navbar__menu--open{border-bottom:none!important;left:0;max-height:var(--vh-80);opacity:1;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-4) 0;pointer-events:auto;position:fixed;right:0;scroll-behavior:auto;top:var(--spacing-16);transform:translateZ(0);transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-in),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;will-change:scroll-position;z-index:var(--z-navbar-mobile-menu-open)}.navbar__menu .navbar__item{contain:layout;margin:0;max-width:100%;padding:0;width:100%}.navbar__menu:not(.navbar__menu--open){padding:0;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic)}.navbar__menu--open .navbar__item:last-of-type .navbar__link{border-bottom:none!important}.navbar__item{width:100%}.navbar__link{align-items:center;border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:flex;justify-content:space-between;margin:0;max-width:100%;min-height:var(--touch-target-min);min-width:0;overflow-wrap:break-word;padding:var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-3);transition:background-color var(--transition-base) ease,color var(--transition-base) ease;width:100%}.navbar__link .navbar__dropdown-icon{display:block!important;flex-shrink:0!important;height:var(--spacing-3)!important;margin-left:var(--spacing-2);margin-right:var(--spacing-4);opacity:1!important;transition:transform var(--transition-base) ease-out;visibility:visible!important;width:var(--spacing-3)!important}.navbar__submenu{background-color:var(--background);border:none;border-top:var(--border-width) solid var(--border);box-shadow:none;contain:layout;grid-template-columns:none!important;list-style:none;margin:0!important;max-height:0;max-width:100%!important;opacity:1;overflow:hidden;padding:0!important;position:static;transform:none;transition:max-height .25s cubic-bezier(.4,0,.2,1);visibility:visible;width:100%!important}.navbar__submenu,.navbar__submenu--components .navbar__submenu-components-grid{display:block!important}.navbar__submenu--components .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--components .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu{max-height:var(--max-height-navbar-submenu);overflow:visible;padding:0!important}@media (prefers-reduced-motion:reduce){.navbar__menu,.navbar__menu--open,.navbar__submenu{transition:none}}.navbar__submenu li{padding:0!important}.navbar__sublink,.navbar__submenu li{display:block!important;margin:0!important;max-width:100%!important;width:100%!important}.navbar__sublink{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box!important;min-height:var(--touch-target-min)!important;min-width:0!important;overflow-wrap:break-word!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__sublink:last-child{border-bottom:none}.navbar__submenu--themes .navbar__submenu-themes-grid{display:block!important}.navbar__submenu--themes .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--themes .navbar__submenu-column-label{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:block;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-0-625);margin-top:var(--spacing-2);padding-bottom:var(--spacing-0-625);padding-left:var(--spacing-10);padding-right:var(--spacing-5);width:100%}.navbar__submenu--themes .navbar__submenu-column:first-of-type .navbar__submenu-column-label{margin-top:0}.navbar__submenu--themes .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__submenu--themes .navbar__sublink--with-icon{align-items:center;display:flex!important;gap:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink-icon{color:var(--text-dim);flex-shrink:0}.navbar__submenu--themes .navbar__sublink-text{min-width:0;overflow:hidden;text-overflow:ellipsis}.navbar__submenu--docs .navbar__submenu-group{border-top:none;margin-top:0;padding-top:0}.navbar__submenu--docs .navbar__submenu-group:not(:first-child){border-top:var(--border-width) solid var(--border);margin-top:var(--spacing-2);padding-top:var(--spacing-2)}.navbar__submenu--docs .navbar__submenu-group-label{border-bottom:var(--border-width) solid var(--border);padding:var(--spacing-2) var(--spacing-5) var(--spacing-2) var(--spacing-10)}.navbar__submenu--docs .navbar__submenu-list .navbar__sublink{min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu--docs{max-height:min(70vh,420px)!important;overflow-x:hidden;overflow-y:auto!important;-webkit-overflow-scrolling:touch}.navbar__submenu--docs .navbar__sublink[aria-current="page"]{background-color:oklch(from var(--accent) l c h/12%)!important;box-shadow:inset var(--spacing-0-125) 0 0 var(--accent)!important;color:var(--accent)!important;font-weight:var(--font-weight-medium)}.navbar__item:last-of-type .navbar__link{border-bottom:var(--border-width) solid var(--border)}.navbar__actions-desktop .navbar__settings-btn{align-items:center;display:flex;justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}.navbar__actions-desktop .navbar__settings-label{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop .search__trigger{justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}
   .navbar__actions-desktop .search__kbd,.navbar__actions-desktop .search__trigger-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop{display:flex;flex-shrink:0;gap:var(--spacing-2);margin-left:auto;margin-right:0;min-width:0;order:2}.search__panel{z-index:var(--z-navbar-mobile-search-panel)}.search__overlay{z-index:var(--z-navbar-mobile-search-overlay)}}.theme-switcher{display:inline-block;position:relative;width:var(--theme-switcher-width)}.theme-switcher__trigger{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);justify-content:space-between;min-width:0;padding:var(--spacing-3) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base);width:100%}.theme-switcher__label-wrapper{align-items:center;display:flex;gap:var(--spacing-2)}.theme-switcher__label-icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-5);justify-content:center;width:var(--spacing-5)}.theme-switcher__label-icon svg{height:100%;width:100%}.theme-switcher__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.theme-switcher__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.theme-switcher__trigger[aria-expanded="true"] .theme-switcher__icon{transform:rotate(180deg)}.theme-switcher__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base),color var(--transition-base)}.theme-switcher__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:row;gap:0;left:0;max-height:var(--spacing-100);min-width:var(--theme-switcher-width);opacity:0;overflow-y:auto;position:absolute;top:calc(100% + var(--spacing-2));transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;width:var(--theme-switcher-width);z-index:var(--z-dropdown)}.theme-switcher__menu--open{opacity:1;transform:translateY(0);visibility:visible}.theme-switcher__menu-options{flex:1 1 auto;min-width:0;overflow-y:auto}.theme-switcher__preview{background-color:var(--background);display:flex;flex:0 0 auto;flex-direction:column;gap:var(--spacing-2);justify-content:flex-start;min-width:var(--spacing-32);opacity:1;padding:var(--spacing-4);pointer-events:none;transition:opacity var(--transition-fast);width:var(--spacing-32)}.theme-switcher__preview-title{color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);line-height:1.2;margin:0 0 var(--spacing-1) 0;overflow-wrap:break-word;padding:0}.theme-switcher__preview-header{color:var(--preview-accent,var(--text-dim));font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;line-height:1.2;margin:0 0 var(--spacing-2) 0;min-height:1.25em;overflow-wrap:break-word;padding:0;text-transform:uppercase}.theme-switcher__preview-swatch-wrap{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px oklch(0 0 0deg/6%);padding:var(--spacing-1)}.theme-switcher__preview-swatch{background-color:var(--background);border-radius:var(--radius);height:var(--spacing-10);min-height:var(--spacing-10);transition:background-color var(--transition-fast);width:100%}.theme-switcher__preview-accent{background-color:var(--preview-accent,var(--accent));border-radius:var(--radius-full);flex-shrink:0;height:var(--spacing-2);transition:background-color var(--transition-fast);width:100%}@media (width <= 480px){.theme-switcher__preview{display:none}}@media (width >= 481px){.theme-switcher__menu-options{border-right:var(--border-width) solid var(--border)}}.framework-switcher{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-wrap:wrap;gap:var(--spacing-3);margin-bottom:var(--spacing-6);padding:var(--spacing-3) 0}.framework-switcher__label{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;text-transform:uppercase}.framework-switcher__segmented{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:inset 0 1px 2px oklch(from var(--shadow-color) l c h/8%);display:inline-flex;padding:var(--spacing-0-5)}.framework-switcher__segment{align-items:center;border-radius:var(--radius-md);color:var(--text-dim);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;min-width:var(--spacing-20);padding:var(--spacing-2) var(--spacing-4);text-decoration:none;transition:color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast)}.framework-switcher__icon{display:block;flex-shrink:0}.framework-switcher__segment--current .framework-switcher__icon{opacity:.95}.framework-switcher__segment--first{border-radius:var(--radius-md) 0 0 var(--radius-md)}.framework-switcher__segment--last{border-radius:0 var(--radius-md) var(--radius-md) 0}.framework-switcher__segment:only-child{border-radius:var(--radius-md)}.framework-switcher__segment:hover:not(.framework-switcher__segment--current){background-color:oklch(from var(--text) l c h/10%);color:var(--text)}.framework-switcher__segment--current{background-color:var(--accent);box-shadow:var(--shadow-sm);color:var(--accent-text)}.framework-switcher__segment--current:hover{background-color:var(--accent-hover);color:var(--accent-text)}.theme-switcher__group{padding:var(--spacing-3) 0}.theme-switcher__group-label{border-bottom:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin-bottom:var(--spacing-1);padding:var(--spacing-2) var(--spacing-4);text-transform:uppercase}.theme-switcher__option{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font:inherit;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);padding:var(--spacing-2) var(--spacing-4);position:relative;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}
   .theme-switcher__option:focus-visible,.theme-switcher__option:hover{background-color:var(--background);color:var(--text);outline:none}.theme-switcher__option:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}.theme-switcher__option-icon{color:var(--icon);flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}.theme-switcher__option--active,
   .theme-switcher__option--active:focus-visible,
@@ -154,7 +154,7 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
 .home__install-or::after,.home__install-or::before{border-top:var(--border-width) solid var(--border);content:"";flex:1;height:0}@media (width >= 768px){.home__install-or{flex-direction:column;gap:var(--spacing-4);padding:0 var(--spacing-4)}
   .home__install-or::after,.home__install-or::before{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-8);width:0}}.home__install-title{color:var(--text);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0;text-align:center}.home__install-label{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0;text-align:center}.home__install-copy{align-items:center;display:flex;justify-content:center;width:100%}.home__install-copy .copy-to-clipboard{justify-content:space-between;width:100%}.home__install-copy .copy-to-clipboard__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home__cli-tabs{margin-top:var(--spacing-1)}.home__cli-tabs .cli-command-tabs__tabs,
 .home__cli-tabs .package-install-tabs__tabs{margin-top:0}.home__cli-tabs .tabs__list{margin-bottom:var(--spacing-2);overflow-x:visible;overflow-y:visible;scrollbar-width:none}.home__cli-tabs .tabs__list::-webkit-scrollbar{display:none}.home__cli-tabs .tabs__panel{min-height:0;padding:0}.home__cli-tabs .cli-command-tabs__panel .code-block__header{padding:var(--spacing-1) var(--spacing-2)}.home__cli-tabs .cli-command-tabs__panel .code-block pre{padding:var(--spacing-2)}.home__cli-tabs .cli-command-tabs__panel .code-block{margin:0}.home__grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-75),1fr));margin-bottom:var(--spacing-16)}.home__card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);padding:var(--spacing-6)}.home__card h3{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-3) 0}.home__card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}.home__examples{margin-bottom:var(--spacing-16)}.home__example{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--spacing-8);padding:var(--spacing-8)}.home__example h3{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4) 0}.home__example p{color:var(--text-dim);margin-bottom:var(--spacing-4)}.home__button-group{display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.home__theme-demo{max-width:var(--spacing-75)}.home__theme-demo .theme-switcher{position:relative;width:100%;z-index:var(--z-dropdown)}.home__theme-demo .theme-switcher__menu{z-index:var(--z-dropdown)}.home__docs{margin-bottom:var(--spacing-8)}.home__docs-grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-70),1fr))}.home__doc-card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:block;padding:var(--spacing-6);text-decoration:none;transition:border-color var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base)}.home__doc-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(calc(var(--spacing-0-125)*-1))}.home__doc-card:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.home__doc-card h3{color:var(--accent);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.home__doc-card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.home__title{font-size:var(--font-size-4xl)}.home__subtitle{font-size:var(--font-size-lg)}
-  .home__docs-grid,.home__grid,.home__install-grid{grid-template-columns:1fr}}.theming-page .card a{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent)}.theming-page .card:hover{transform:translateY(calc(var(--spacing-0-125)*-1));transition:transform var(--transition-base)}.reduced-motion .theming-page .card:hover{transform:none}.theme-by{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0}.theme-by a{color:var(--accent);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-hover);text-decoration:underline}.docs{align-items:stretch;display:flex;flex-direction:row;min-height:calc(100vh - 4rem);padding:var(--spacing-6) 0;position:relative}.docs__sidebar-toggle{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);bottom:var(--spacing-6);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:none;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);left:var(--spacing-6);padding:var(--spacing-3) var(--spacing-4);position:fixed;transition:background-color var(--transition-base),transform var(--transition-base);z-index:calc(var(--z-settings) - 1)}.docs__sidebar-toggle:hover{background-color:var(--accent-hover)}.docs__sidebar-toggle:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.docs__sidebar-toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375)}.docs__sidebar-toggle-icon span{background-color:currentcolor;border-radius:1px;display:block;height:2px;width:var(--spacing-4)}.docs__sidebar-overlay{background-color:oklch(0 0 0deg/40%);display:none;inset:0;opacity:0;position:fixed;transition:opacity var(--transition-base),visibility var(--transition-base);visibility:hidden;z-index:calc(var(--z-settings) - 2)}.docs--sidebar-open .docs__sidebar-overlay{opacity:1;visibility:visible}.docs__main{flex:1 1 0%;min-width:0}@media (width >= 1025px){#docs-sidebar-container{align-items:stretch;display:flex;flex-direction:column;min-height:0}}.docs-sidebar{background-color:var(--background);border-right:var(--border-width) solid var(--border);flex-shrink:0;overflow-y:auto;padding:var(--spacing-6) var(--spacing-4) var(--spacing-8) 0;width:var(--docs-sidebar-width,14rem)}@media (width >= 1025px){.docs-sidebar{align-self:flex-start;max-height:calc(100vh - var(--spacing-16) - var(--spacing-4));position:sticky;top:calc(var(--spacing-16) + var(--spacing-4));z-index:1}}.docs-sidebar__nav{display:flex;flex-direction:column;gap:var(--spacing-6)}.docs-sidebar__group-label{color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-2) 0;padding:0 var(--spacing-3);text-transform:uppercase}.docs-sidebar__list{list-style:none;margin:0;padding:0}.docs-sidebar__item{margin:0}.docs-sidebar__link{border-radius:var(--radius-md);color:var(--text-dim);display:block;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__link:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__link--active{background-color:oklch(from var(--accent) l c h/10%);color:var(--accent);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent) l c h/14%);color:var(--accent-hover)}.theme-page__header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.theme-page__header h2{margin:0}html.docs-sidebar-mobile #docs-sidebar-container{display:none!important}@media (width <= 1024px){#docs-sidebar-container,
+  .home__docs-grid,.home__grid,.home__install-grid{grid-template-columns:1fr}}.theming-page .card a{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent)}.theming-page .card:hover{transform:translateY(calc(var(--spacing-0-125)*-1));transition:transform var(--transition-base)}.reduced-motion .theming-page .card:hover{transform:none}.theme-by{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0}.theme-by a{color:var(--accent);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-hover);text-decoration:underline}.docs{align-items:stretch;display:flex;flex-direction:row;min-height:calc(100vh - 4rem);padding:var(--spacing-6) 0;position:relative}.docs__sidebar-toggle{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);bottom:var(--spacing-6);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:none;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);left:var(--spacing-6);padding:var(--spacing-3) var(--spacing-4);position:fixed;transition:background-color var(--transition-base),transform var(--transition-base);z-index:calc(var(--z-settings) - 1)}.docs__sidebar-toggle:hover{background-color:var(--accent-hover)}.docs__sidebar-toggle:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.docs__sidebar-toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375)}.docs__sidebar-toggle-icon span{background-color:currentcolor;border-radius:1px;display:block;height:2px;width:var(--spacing-4)}.docs__sidebar-overlay{background-color:oklch(0 0 0deg/40%);display:none;inset:0;opacity:0;position:fixed;transition:opacity var(--transition-base),visibility var(--transition-base);visibility:hidden;z-index:calc(var(--z-settings) - 2)}.docs--sidebar-open .docs__sidebar-overlay{opacity:1;visibility:visible}.docs__main{flex:1 1 0%;min-width:0}@media (width >= 1025px){#docs-sidebar-container{align-items:stretch;display:flex;flex-direction:column;min-height:0}}.docs-sidebar{background-color:var(--background);border-right:var(--border-width) solid var(--border);flex-shrink:0;overflow-y:auto;padding:var(--spacing-6) var(--spacing-4) var(--spacing-8) 0;width:var(--docs-sidebar-width,14rem)}@media (width >= 1025px){.docs-sidebar{align-self:flex-start;max-height:calc(100vh - var(--spacing-16) - var(--spacing-4));position:sticky;top:calc(var(--spacing-16) + var(--spacing-4));z-index:1}}.docs-sidebar__nav{display:flex;flex-direction:column;gap:var(--spacing-6)}.docs-sidebar__group-label{color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-2) 0;padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);text-transform:uppercase}.docs-sidebar__list{list-style:none;margin:0;padding:0}.docs-sidebar__item{margin:0}.docs-sidebar__link{border-radius:var(--radius-md);color:var(--text-dim);display:block;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__link:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__link--active{background-color:oklch(from var(--accent) l c h/10%);color:var(--accent);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent) l c h/14%);color:var(--accent-hover)}.theme-page__header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.theme-page__header h2{margin:0}html.docs-sidebar-mobile #docs-sidebar-container{display:none!important}@media (width <= 1024px){#docs-sidebar-container,
   .docs-sidebar,
   .docs__sidebar-overlay,
   .docs__sidebar-toggle{display:none!important}}@media (width >= 1025px){.docs__sidebar-overlay[aria-hidden="true"]{display:none!important}}[data-theme="github-dark-classic"]{--bg:oklch(18% 0.012 264deg);--bg-alt:oklch(15% 0.01 264deg);--current-line:oklch(20% 0.012 264deg);--selection:oklch(28% 0.08 255deg);--fg:oklch(91% 0.004 264deg);--fg-dim:oklch(66% 0.01 264deg);--comment:oklch(52% 0.015 264deg);--cyan:oklch(72% 0.12 250deg);--green:oklch(72% 0.19 145deg);--orange:oklch(78% 0.12 55deg);--pink:oklch(68% 0.14 15deg);--purple:oklch(68% 0.14 300deg);--red:oklch(68% 0.16 15deg);--yellow:oklch(88% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.01 264deg);--border:oklch(13% 0.01 264deg);--accent:var(--cyan);--accent-hover:oklch(78% 0.12 250deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 250deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.1 55deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="shades-of-purple"]{--bg:oklch(18% 0.08 290deg);--bg-alt:oklch(15% 0.08 290deg);--current-line:oklch(25% 0.10 290deg);--selection:oklch(30% 0.12 290deg);--fg:oklch(95% 0.01 300deg);--fg-dim:oklch(75% 0.05 300deg);--comment:oklch(55.% 0.08 280deg);--cyan:oklch(75% 0.15 220deg);--green:oklch(70% 0.20 150deg);--orange:oklch(75% 0.18 60deg);--pink:oklch(75% 0.22 340deg);--purple:oklch(65% 0.25 290deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(85% 0.18 100deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(80% 0.05 300deg);--border:var(--current-line);--accent:var(--purple);--accent-hover:var(--pink);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 300deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.1 95deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="sandstorm-classic"]{--bg:oklch(16% 0.025 25deg);--bg-alt:oklch(13% 0.02 25deg);--current-line:oklch(20% 0.025 25deg);--selection:oklch(28% 0.06 25deg);--fg:oklch(90% 0.01 25deg);--fg-dim:oklch(62% 0.02 25deg);--comment:oklch(52% 0.03 25deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(72% 0.14 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 25deg);--border:oklch(22% 0.02 25deg);--accent:var(--red);--accent-hover:oklch(62% 0.16 25deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 25deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(78% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="rocky-blood-orange"]{--bg:oklch(16% 0.03 45deg);--bg-alt:oklch(13% 0.025 45deg);--current-line:oklch(20% 0.03 45deg);--selection:oklch(28% 0.06 45deg);--fg:oklch(90% 0.01 45deg);--fg-dim:oklch(60% 0.02 45deg);--comment:oklch(52% 0.03 45deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(62% 0.16 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 45deg);--border:oklch(22% 0.02 45deg);--accent:var(--orange);--accent-hover:oklch(68% 0.14 55deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 55deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(72% 0.14 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="minimal-dark-neon-yellow"]{--bg:oklch(14% 0.01 95deg);--bg-alt:oklch(11% 0.008 95deg);--current-line:oklch(18% 0.015 95deg);--selection:oklch(25% 0.08 95deg);--fg:oklch(92% 0.02 95deg);--fg-dim:oklch(65% 0.02 95deg);--comment:oklch(50% 0.02 95deg);--icon:var(--fg);--icon-dim:oklch(72% 0.02 95deg);--cyan:oklch(72% 0.12 220deg);--green:oklch(72% 0.18 145deg);--orange:oklch(78% 0.14 55deg);--pink:oklch(68% 0.16 350deg);--purple:oklch(65% 0.14 300deg);--red:oklch(62% 0.18 25deg);--yellow:oklch(88% 0.18 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.02 95deg);--accent:var(--yellow);--accent-hover:oklch(90% 0.16 95deg);--accent-text:oklch(12% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.03 95deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(68% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="hack-the-box"]{--bg:oklch(16% 0.03 255deg);--bg-alt:oklch(13% 0.025 255deg);--current-line:oklch(20% 0.03 255deg);--selection:oklch(55% 0.08 255deg);--fg:oklch(82% 0.03 255deg);--fg-dim:oklch(62% 0.04 255deg);--comment:oklch(55% 0.03 255deg);--icon:var(--fg);--icon-dim:oklch(70% 0.04 255deg);--cyan:oklch(78% 0.12 175deg);--green:oklch(88% 0.22 130deg);--orange:oklch(78% 0.14 75deg);--pink:oklch(65% 0.18 340deg);--purple:oklch(65% 0.22 300deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(82% 0.16 95deg);--background:var(--bg);--background-alt:oklch(14% 0.028 255deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.03 255deg);--accent:var(--green);--accent-hover:oklch(85% 0.2 125deg);--accent-text:oklch(12% 0.02 255deg);--accent-text-on-hover:oklch(22% 0.03 130deg);--success:var(--green);--success-hover:oklch(90% 0.18 130deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 130deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.14 95deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(72% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:oklch(68% 0.14 240deg);--info-hover:oklch(75% 0.12 240deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 240deg)}[data-theme="pink-cat-boo"]{--bg:oklch(18% 0.03 280deg);--bg-alt:oklch(22% 0.04 280deg);--current-line:oklch(28% 0.06 320deg);--selection:oklch(28% 0.06 320deg);--fg:oklch(98% 0.01 350deg);--fg-dim:oklch(65% 0.04 280deg);--comment:oklch(55% 0.03 160deg);--cyan:oklch(72% 0.1 220deg);--green:oklch(72% 0.14 165deg);--orange:oklch(72% 0.14 75deg);--pink:oklch(78% 0.12 350deg);--purple:oklch(72% 0.14 300deg);--red:oklch(72% 0.18 350deg);--yellow:oklch(78% 0.14 85deg);--background:var(--bg);--background-alt:oklch(20% 0.035 280deg);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.04 280deg);--border:oklch(35% 0.04 280deg);--accent:var(--pink);--accent-hover:oklch(82% 0.1 350deg);--accent-text:oklch(18% 0.02 280deg);--accent-text-on-hover:oklch(22% 0.03 350deg);--success:var(--green);--success-hover:oklch(78% 0.12 165deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 165deg);--warning:var(--yellow);--warning-hover:oklch(85% 0.12 85deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 85deg);--error:var(--red);--error-hover:oklch(78% 0.14 350deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(98% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="github-light"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(97% 0.005 264deg);--current-line:oklch(95% 0.008 264deg);--selection:oklch(88% 0.06 255deg);--fg:oklch(18% 0.02 264deg);--fg-dim:oklch(52% 0.02 264deg);--comment:oklch(58% 0.02 264deg);--cyan:oklch(55% 0.18 255deg);--green:oklch(48% 0.16 145deg);--orange:oklch(65% 0.14 75deg);--pink:oklch(55% 0.18 340deg);--purple:oklch(50% 0.18 290deg);--red:oklch(50% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.01 264deg);--accent:var(--cyan);--accent-hover:oklch(38% 0.18 255deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(62% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg)}[data-theme="red-velvet-cupcake"]{--bg:oklch(99% 0.005 25deg);--bg-alt:oklch(96% 0.01 25deg);--current-line:oklch(94% 0.015 25deg);--selection:oklch(92% 0.04 25deg);--fg:oklch(28% 0.02 250deg);--fg-dim:oklch(48% 0.02 250deg);--comment:oklch(55% 0.02 250deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(55% 0.17 25deg);--yellow:oklch(75% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.015 25deg);--accent:var(--red);--accent-hover:oklch(48% 0.18 25deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(54% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(58% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="orangy-one-light"]{--bg:oklch(99% 0.008 70deg);--bg-alt:oklch(96% 0.012 70deg);--current-line:oklch(94% 0.015 70deg);--selection:oklch(92% 0.05 70deg);--fg:oklch(22% 0.02 70deg);--fg-dim:oklch(48% 0.02 70deg);--comment:oklch(55% 0.02 70deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(58% 0.16 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 70deg);--accent:var(--orange);--accent-hover:oklch(50% 0.18 55deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(72% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="sunflower"]{--bg:oklch(98% 0.03 95deg);--bg-alt:oklch(95% 0.04 95deg);--current-line:oklch(92% 0.05 95deg);--selection:oklch(88% 0.08 95deg);--fg:oklch(22% 0.03 95deg);--fg-dim:oklch(45% 0.03 95deg);--comment:oklch(52% 0.03 95deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.16 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(85% 0.04 95deg);--accent:var(--yellow);--accent-hover:oklch(65% 0.18 95deg);--accent-text:oklch(15% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.02 95deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="green-breeze-light"]{--bg:oklch(98% 0.008 140deg);--bg-alt:oklch(96% 0.01 140deg);--current-line:oklch(94% 0.012 140deg);--selection:oklch(88% 0.06 200deg);--fg:oklch(20% 0.02 80deg);--fg-dim:oklch(45% 0.02 80deg);--comment:oklch(55% 0.02 80deg);--cyan:oklch(58% 0.14 205deg);--green:oklch(42% 0.14 145deg);--orange:oklch(62% 0.12 65deg);--pink:oklch(55% 0.12 340deg);--purple:oklch(55% 0.12 290deg);--red:oklch(45% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 140deg);--accent:oklch(48% 0.16 155deg);--accent-hover:oklch(38% 0.16 155deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 95deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg)}[data-theme="cute-pink"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(98% 0.02 350deg);--current-line:oklch(96% 0.03 350deg);--selection:oklch(78% 0.12 350deg);--fg:oklch(25% 0.01 0deg);--fg-dim:oklch(50% 0.02 0deg);--comment:oklch(55% 0.02 0deg);--cyan:oklch(55% 0.1 220deg);--green:oklch(48% 0.12 145deg);--orange:oklch(65% 0.12 65deg);--pink:oklch(62% 0.2 350deg);--purple:oklch(42% 0.18 300deg);--red:oklch(55% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:oklch(98% 0.025 350deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.06 350deg);--accent:oklch(62% 0.22 350deg);--accent-hover:oklch(55% 0.22 350deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(58% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(80% 0.14 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="semi-light-purple"]{--bg:oklch(96% 0.02 290deg);--bg-alt:oklch(94% 0.03 290deg);--current-line:oklch(91% 0.04 290deg);--selection:oklch(88% 0.06 290deg);--fg:oklch(25% 0.02 290deg);--fg-dim:oklch(48% 0.03 290deg);--comment:oklch(55% 0.04 280deg);--cyan:oklch(58% 0.12 220deg);--green:oklch(50% 0.14 150deg);--orange:oklch(65% 0.12 60deg);--pink:oklch(62% 0.16 340deg);--purple:oklch(52% 0.2 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.05 290deg);--accent:var(--purple);--accent-hover:oklch(45% 0.2 290deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}