rizzo-css 0.0.56 → 0.0.58

package/README.md

@@ -68,7 +68,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.56 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.58 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/bin/rizzo-css.js

@@ -16,7 +16,51 @@ const CLI_BANNER = `      /\\___/\\
 | |_) || |  / /  / / | | | | |   \\___ \\___ \\
 |  _ < | | / /_ / /| |_| | | |___ ___) |__) |
 |_| \\_\\___/____/____\\___/   \\____|____/____/
-      Design system · Vanilla · Astro · Svelte`;
+
+  Design system · Vanilla · Astro · Svelte`;
+
+/** Rainbow theme colors for "RIZZOCSS" block (from our themes: red → orange → yellow → green → blue → purple → pink). */
+const BANNER_RAINBOW = [
+  { r: 196, g: 69, b: 54 },   /* red-velvet-cupcake accent */
+  { r: 224, g: 124, b: 62 },  /* rocky-blood-orange / orangy-one-light */
+  { r: 212, g: 168, b: 0 },   /* sunflower / minimal-dark-neon-yellow */
+  { r: 45, g: 157, b: 120 },  /* green-breeze-light / hack-the-box */
+  { r: 0, g: 82, b: 189 },    /* github-light primary */
+  { r: 124, g: 58, b: 237 },  /* shades-of-purple / semi-light-purple */
+  { r: 217, g: 70, b: 239 },  /* cute-pink / pink-cat-boo */
+];
+
+/** ANSI 24-bit foreground; reset with \\x1b[0m */
+function ansiFg(r, g, b) {
+  return '\x1b[38;2;' + r + ';' + g + ';' + b + 'm';
+}
+const ANSI_RESET = '\x1b[0m';
+
+/** Evenly spread column bounds (6 chars per color for first 6, rest for 7th). */
+const BANNER_BOUNDS = [0, 6, 12, 18, 24, 30, 36];
+
+/** Returns banner with "RIZZOCSS" block art in rainbow theme colors. No ANSI if stdout is not TTY or FORCE_COLOR=0. */
+function getBanner() {
+  const useColor = (process.stdout.isTTY || process.env.FORCE_COLOR === '1') && process.env.FORCE_COLOR !== '0';
+  if (!useColor) return CLI_BANNER;
+  const lines = CLI_BANNER.split('\n');
+  const RIZZOCSS_START = 5;
+  const RIZZOCSS_END = 9;
+  for (let i = RIZZOCSS_START; i <= RIZZOCSS_END; i++) {
+    const line = lines[i];
+    let out = '';
+    for (let s = 0; s < BANNER_BOUNDS.length; s++) {
+      const start = BANNER_BOUNDS[s];
+      const end = s === BANNER_BOUNDS.length - 1 ? line.length : BANNER_BOUNDS[s + 1];
+      if (start < line.length) {
+        const col = BANNER_RAINBOW[s % BANNER_RAINBOW.length];
+        out += ansiFg(col.r, col.g, col.b) + line.slice(start, Math.min(end, line.length)) + ANSI_RESET;
+      }
+    }
+    lines[i] = out;
+  }
+  return lines.join('\n');
+}
 
 const RIZZO_CONFIG_FILE = 'rizzo-css.json';
 /** Scaffold README filename; avoids overwriting an existing project README.md. */
@@ -914,7 +958,7 @@ function multiSelectMenu(options, title, initialSelected) {
 }
 
 function printHelp() {
-  console.log(CLI_BANNER);
+  console.log(getBanner());
   console.log(`
 rizzo-css CLI — Add Rizzo CSS to your project (Vanilla, Astro, Svelte)
 
@@ -1053,7 +1097,7 @@ function cmdTheme() {
 function cmdDoctor() {
   const cwd = process.cwd();
   const config = readRizzoConfig(cwd);
-  console.log(CLI_BANNER);
+  console.log(getBanner());
   console.log('  Doctor — check config, CSS path, and layout link\n');
   let ok = true;
   if (!config) {
@@ -1941,7 +1985,7 @@ async function cmdInit(argv) {
     defaultDark = DARK_THEMES[0];
     defaultLight = LIGHT_THEMES[0];
   } else {
-    console.log(CLI_BANNER);
+    console.log(getBanner());
     framework = await selectMenu(
       [
         { value: 'vanilla', label: 'Vanilla JS (HTML + CSS + same styles & components)', color: C.vanilla },

package/dist/rizzo.min.css

@@ -168,7 +168,8 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
 [data-theme="shades-of-purple"] .devicon--docker .devicon__path--dark,
 [data-theme="shades-of-purple"] .devicon--playwright .devicon__path--dark,
 [data-theme="shades-of-purple"] .devicon--rust .devicon__path{fill:var(--icon)}@media (width <= 640px){.icons-grid{gap:var(--spacing-2);grid-template-columns:repeat(2,1fr)}.icon-card{min-height:8.5rem;padding:var(--spacing-2)}.icon-card__preview{margin-bottom:var(--spacing-1);min-height:var(--spacing-24)}.icon-card__icon{height:var(--spacing-8);width:var(--spacing-8)}.icon-card__name{font-size:calc(var(--font-size-xs)*.875)}.icon-card__hint{font-size:calc(var(--font-size-xs)*.75)}}.dropdown{display:inline-block;position:relative}.dropdown__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-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.dropdown__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.dropdown__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.dropdown__trigger[aria-expanded="true"] .dropdown__icon{transform:rotate(180deg)}
-.dropdown__trigger:focus-visible .dropdown__icon,.dropdown__trigger:hover .dropdown__icon{color:var(--accent)}.dropdown__trigger-text{flex:1;text-align:left}.dropdown__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base),color var(--transition-base)}.dropdown__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);list-style:none;margin:0;max-width:calc(100vw - var(--spacing-8));min-width:var(--spacing-64);opacity:0;overflow:visible!important;padding:var(--spacing-2) 0;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:-moz-max-content;width:max-content;z-index:var(--z-dropdown)}.dropdown__menu--left{left:0}.dropdown__menu--right{right:0}.dropdown__menu--start{left:0}.dropdown__menu--end{right:0}.dropdown__menu--open{opacity:1;transform:translateY(0);visibility:visible}.dropdown__item{align-items:center;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);gap:var(--spacing-2);min-height:var(--touch-target-min);overflow:hidden;padding:var(--spacing-2) var(--spacing-4);text-align:left;text-decoration:none;text-overflow:ellipsis;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}
+.dropdown__trigger:focus-visible .dropdown__icon,.dropdown__trigger:hover .dropdown__icon{color:var(--accent)}
+#themes-preview .dropdown__trigger:focus-visible .themes-page__trigger-icon,#themes-preview .dropdown__trigger:hover .themes-page__trigger-icon{color:var(--accent)!important;stroke:var(--accent)!important}.dropdown__trigger-text{flex:1;text-align:left}.dropdown__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base),color var(--transition-base)}.dropdown__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);list-style:none;margin:0;max-width:calc(100vw - var(--spacing-8));min-width:var(--spacing-64);opacity:0;overflow:visible!important;padding:var(--spacing-2) 0;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:-moz-max-content;width:max-content;z-index:var(--z-dropdown)}.dropdown__menu--left{left:0}.dropdown__menu--right{right:0}.dropdown__menu--start{left:0}.dropdown__menu--end{right:0}.dropdown__menu--open{opacity:1;transform:translateY(0);visibility:visible}.dropdown__item{align-items:center;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);gap:var(--spacing-2);min-height:var(--touch-target-min);overflow:hidden;padding:var(--spacing-2) var(--spacing-4);text-align:left;text-decoration:none;text-overflow:ellipsis;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}
 .dropdown__item:focus-visible:not(.dropdown__item--disabled),.dropdown__item:hover:not(.dropdown__item--disabled){background-color:var(--background);color:var(--accent);outline:none}.dropdown__item:focus-visible:not(.dropdown__item--disabled){box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}.dropdown__item--disabled{cursor:not-allowed;opacity:var(--opacity-50);pointer-events:none}.dropdown__item-icon{flex-shrink:0;height:var(--spacing-4);width:var(--spacing-4)}.dropdown__separator{background-color:var(--border);height:var(--border-width);margin:var(--spacing-2) 0}.dropdown__item-wrapper,.dropdown__item-wrapper--has-submenu{overflow:visible;position:relative}.dropdown__item--has-submenu{align-items:center;display:flex;justify-content:space-between}.dropdown__item-arrow{color:var(--icon);flex-shrink:0;height:var(--spacing-3);margin-left:var(--spacing-2);transition:transform var(--transition-base),color var(--transition-base);width:var(--spacing-3)}
 .dropdown__item:focus-visible:not(.dropdown__item--disabled) .dropdown__item-arrow,.dropdown__item:hover:not(.dropdown__item--disabled) .dropdown__item-arrow{color:var(--accent)}.dropdown__item-wrapper--has-submenu .dropdown__submenu--open ~ .dropdown__item-arrow,
 .dropdown__item-wrapper--has-submenu:has(.dropdown__submenu--open) .dropdown__item-arrow{transform:rotate(-90deg)}.dropdown__item-wrapper--has-submenu .dropdown__item[aria-expanded="true"] .dropdown__item-arrow{transform:rotate(-90deg)}.dropdown__submenu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:block;left:0;list-style:none;margin:0;max-width:100%;min-width:100%;opacity:0;overflow:visible!important;padding:var(--spacing-2) 0;pointer-events:none;position:absolute;right:0;top:100%;transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;width:100%;z-index:var(--z-dropdown-submenu)}.dropdown__submenu--open{display:block!important;opacity:1!important;pointer-events:all!important;transform:translateY(0)!important;visibility:visible!important}.dropdown__submenu-item{min-height:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-4)}.dropdown__submenu .dropdown__item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (width <= 640px){.dropdown__menu{left:0;max-width:calc(100vw - var(--spacing-4));min-width:100%;right:auto}.dropdown__menu--right{left:auto;right:0}.dropdown__submenu{max-width:100%}}@media (prefers-reduced-motion:reduce){.dropdown__menu{transform:none;transition:opacity var(--transition-fast),visibility var(--transition-fast)}.dropdown__menu--open{transform:none}.dropdown__icon{transition:none}}.search{display:inline-block}.search,.search__trigger-wrapper{position:relative}.search__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-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)}@media (width <= 1024px){.search__trigger{gap:0}.search__icon{flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}}.search__icon{color:var(--icon)}.search__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.search__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.search__kbd{align-items:center;display:none;font-family:var(--font-family-mono);font-size:.875rem;gap:var(--spacing-1);line-height:1;margin-left:auto}.search__kbd-modifier{align-items:center;display:inline-flex}.search__kbd-modifier svg{flex-shrink:0;height:.875rem;width:.875rem}.search__kbd kbd{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius);font-size:inherit;line-height:1;padding:var(--spacing-0-125) var(--spacing-0-375)}@media (width >= 768px){.search__kbd{display:flex}}.search__overlay{backdrop-filter:blur(var(--blur-sm));background-color:var(--overlay);bottom:0;box-sizing:border-box;height:100%;left:0;min-height:100vh;min-height:100dvh;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity .2s ease-out;width:100%;z-index:var(--z-search-overlay)}.search__overlay[aria-hidden="false"]{opacity:1;pointer-events:all;z-index:var(--z-search-overlay)}.search__overlay[aria-hidden="true"]{display:none}@media (width <= 1024px){.search__overlay[aria-hidden="true"]{display:none!important;pointer-events:none!important}.search__overlay{backdrop-filter:blur(2px);background-color:oklch(from var(--overlay) l c h/60%)}}.search__panel{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);box-sizing:border-box;display:flex;flex-direction:column;left:50%;max-height:calc(100vh - var(--spacing-8));max-height:calc(100dvh - var(--spacing-8));max-width:var(--spacing-150);opacity:0;outline:none;overflow:hidden;padding-bottom:var(--spacing-6);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .2s ease-out;width:calc(100% - var(--spacing-8));z-index:var(--z-search-panel)}.search__panel[aria-hidden="true"]{display:none}.search__panel[aria-hidden="false"][data-open="true"]{background-color:var(--background);display:flex;opacity:1;pointer-events:all}@media (width <= 640px){.search__panel{max-height:calc(100dvh - var(--spacing-8));max-width:none;width:calc(100% - var(--spacing-8))}}@media (width <= 1024px){.search__panel[aria-hidden="false"][data-open="true"] .search__header{background-color:var(--background)!important;position:relative;z-index:var(--z-1)}}.search__header{background-color:var(--background);border-bottom:var(--border-width) solid var(--border);border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);gap:var(--spacing-3);padding:var(--spacing-5) var(--spacing-6);position:relative}.search__close-btn,.search__header{align-items:center;display:flex;flex-shrink:0}.search__close-btn{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2);transition:background-color var(--transition-base),border-color var(--transition-base)}.search__close-btn:hover{background-color:var(--background-alt);border-color:var(--accent);color:var(--accent)}.search__close-btn:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.search__close-btn:active{background-color:var(--background-alt)}.search__close-text{display:none}@media (width > 1024px){.search__close-btn{min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2)}}@media (width <= 1024px){.search__header{gap:var(--spacing-2);padding:var(--spacing-4)}.search__close-btn{min-height:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-4);white-space:nowrap}.search__close-text{display:inline}.search__input-wrapper{flex:1;min-width:0}}.search__input-wrapper{align-items:center;display:flex;flex:1;position:relative}.search__input-icon{color:var(--icon-dim);flex-shrink:0;height:var(--spacing-5);left:var(--spacing-4);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:var(--spacing-5);z-index:calc(var(--z-base) + 2)}.search__input{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-sizing:border-box;color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-3) calc(var(--spacing-14) + var(--spacing-0-125)) var(--spacing-3) var(--spacing-16)!important;transition:border-color var(--transition-base),background-color var(--transition-base);width:100%}.search__input:focus{background-color:var(--background);border-color:var(--accent);outline:none}.search__input::-moz-placeholder{color:var(--text-dim)}.search__input::placeholder{color:var(--text-dim)}.search__clear{align-items:center;background:none;border:none;border-radius:var(--radius);color:var(--text-dim);cursor:pointer;display:flex;height:var(--spacing-8);justify-content:center;opacity:0;padding:0;pointer-events:none;position:absolute;right:var(--spacing-3);transition:color var(--transition-base),background-color var(--transition-base);width:var(--spacing-8);z-index:calc(var(--z-base) + 3)}.search__clear[aria-hidden="false"]{opacity:1;pointer-events:all}@media (width <= 1024px){.search__clear{display:none!important}}.search__clear:hover{background-color:var(--background);color:var(--text)}.search__clear:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.search__results{background-color:var(--background)!important;display:flex!important;flex:1;flex-direction:column;height:auto!important;left:0!important;max-height:calc(var(--vh-70) - var(--spacing-20));min-height:var(--spacing-75)!important;opacity:1!important;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-4) var(--spacing-6) var(--spacing-8) var(--spacing-6);position:relative!important;right:auto!important;visibility:visible!important;width:100%!important;z-index:calc(var(--z-base) + 1)}.search__empty,
@@ -189,7 +190,7 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
 .button-group :global(button:last-child){border-radius:0 var(--radius) var(--radius) 0}.button-group--vertical :global(.btn:first-child),
 .button-group--vertical :global(button:first-child){border-radius:var(--radius) var(--radius) 0 0}.button-group--vertical :global(.btn:last-child),
 .button-group--vertical :global(button:last-child){border-radius:0 0 var(--radius) var(--radius)}.empty{padding:var(--spacing-12) var(--spacing-6);text-align:center}.empty,.empty__icon{color:var(--text-dim)}.empty__icon{margin-bottom:var(--spacing-4)}.empty__icon:empty{display:none}.empty__title{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.empty__description{font-size:var(--font-size-sm);margin:0 0 var(--spacing-5) 0}.empty__action:empty{display:none}.separator{background:var(--border);flex-shrink:0}.separator--horizontal{height:1px;width:100%}.separator--vertical{height:100%;min-height:1em;width:1px}.slider{padding:var(--spacing-3) 0;position:relative;width:100%}.slider__input{cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:100%}.slider__track{background:var(--background-alt);height:var(--spacing-1);overflow:hidden}.slider__fill,.slider__track{border-radius:var(--radius-full)}.slider__fill{background:var(--accent);height:100%;transition:width var(--transition-fast)}.sheet__overlay{background:oklch(from var(--background) l c h/70%);inset:0;opacity:0;position:fixed;transition:opacity var(--transition-base),visibility var(--transition-base);visibility:hidden;z-index:var(--z-sheet-overlay,9998)}.sheet__overlay--open{opacity:1;visibility:visible}.sheet{background:var(--background);border:var(--border-width) solid var(--border);box-shadow:var(--shadow-lg);max-height:100%;max-width:100%;overflow:auto;position:fixed;transition:transform var(--transition-base);z-index:var(--z-sheet,9999)}.sheet--right{height:100%;right:0;top:0;transform:translateX(100%);width:min(100%,var(--spacing-150))}.sheet--right.sheet--open{transform:translateX(0)}.sheet--left{height:100%;left:0;top:0;transform:translateX(-100%);width:min(100%,var(--spacing-150))}.sheet--left.sheet--open{transform:translateX(0)}.sheet--top{left:0;max-height:90vh;right:0;top:0;transform:translateY(-100%)}.sheet--top.sheet--open{transform:translateY(0)}.sheet--bottom{bottom:0;left:0;max-height:90vh;right:0;transform:translateY(100%)}.sheet--bottom.sheet--open{transform:translateY(0)}.sheet__content{display:flex;flex-direction:column;height:100%;min-height:0}.sheet__header{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-5)}.sheet__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0}.sheet__close{background:transparent;border:none;border-radius:var(--radius);color:var(--text);cursor:pointer;padding:var(--spacing-2)}.sheet__close:hover{background:var(--background-alt)}.sheet__body{flex:1;overflow:auto;padding:var(--spacing-5)}.popover{display:inline-block;position:relative}.popover__content{background:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-top:var(--spacing-1);min-width:var(--spacing-56);opacity:0;padding:var(--spacing-4);position:absolute;transition:opacity var(--transition-fast),visibility var(--transition-fast);visibility:hidden;z-index:var(--z-popover,100)}.popover__content--open{opacity:1;visibility:visible}.toggle{align-items:center;background:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);justify-content:center;padding:var(--spacing-2) var(--spacing-4);transition:background-color var(--transition-fast),border-color var(--transition-fast)}.toggle:hover{background:var(--background);border-color:var(--border)}.toggle--pressed,
-.toggle[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.toggle-group{display:inline-flex;flex-direction:row;gap:0}.toggle-group--vertical{flex-direction:column}.toggle-group :global(.toggle){border-radius:0}.toggle-group :global(.toggle:first-child){border-radius:var(--radius) 0 0 var(--radius)}.toggle-group :global(.toggle:last-child){border-radius:0 var(--radius) var(--radius) 0}.toggle-group--vertical :global(.toggle:first-child){border-radius:var(--radius) var(--radius) 0 0}.toggle-group--vertical :global(.toggle:last-child){border-radius:0 0 var(--radius) var(--radius)}.tabs{width:100%}.tabs__list{border-bottom:var(--outline-width) solid var(--border);display:flex;gap:var(--spacing-1);margin-bottom:var(--spacing-6);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.tabs__list::-webkit-scrollbar{height:var(--spacing-0-125)}.tabs__list::-webkit-scrollbar-track{background:var(--background-alt)}.tabs__list::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}.tabs__tab{align-items:center;background:transparent;border:none;border-bottom:calc(var(--outline-width)*2) solid transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;margin-bottom:calc(var(--outline-width)*-1*2);min-height:var(--touch-target-min);outline:none;padding:var(--spacing-3) var(--spacing-5);position:relative;transition:color var(--transition-base),border-color var(--transition-base),background-color var(--transition-base);white-space:nowrap}.tabs__tab-icon{flex-shrink:0;vertical-align:middle}.tabs__tab:hover:not(.tabs__tab--active){background-color:var(--background-alt);color:var(--text)}.tabs__tab:focus-visible{border-radius:var(--radius-md) var(--radius-md) 0 0;outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*3);font-weight:var(--font-weight-semibold)}.tabs__tab--active,.tabs__tab--active:hover{background-color:var(--background-alt);color:var(--accent-fg)}.tabs__tab--active:hover{border-bottom-color:var(--accent-fg)}.tabs__panels-wrapper{width:100%}.tabs__panel{display:none;min-height:var(--spacing-20);padding:var(--spacing-6) 0;width:100%}.tabs__panel--active{animation:fadeIn var(--transition-base);display:block}.tabs__panel-content{width:100%}@keyframes fade-in{from{opacity:0;transform:translateY(var(--spacing-1))}to{opacity:1;transform:translateY(0)}}.tabs__slot-content{display:none}.tabs--pills .tabs__list{border-bottom:none;gap:var(--spacing-2)}.tabs--pills .tabs__tab{border-bottom:none;border-radius:var(--radius-md);margin-bottom:0}.tabs--pills .tabs__tab--active{background-color:var(--accent);border-bottom-color:transparent;color:var(--accent-text)}.tabs--pills .tabs__tab--active:hover{background-color:var(--accent-hover);color:var(--accent-text)}.tabs--underline .tabs__list{border-bottom:var(--outline-width) solid var(--border)}.tabs--underline .tabs__tab{border-bottom:var(--outline-width) solid transparent;padding-bottom:var(--spacing-3)}.tabs--underline .tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*2)}@media (width <= 640px){.tabs__list{gap:var(--spacing-1)}.tabs__tab{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.tabs__panel{padding:var(--spacing-3) 0}}@media (prefers-reduced-motion:reduce){.tabs__tab{transition:none}.tabs__panel--active{animation:none}}.progress{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.progress__track{background-color:var(--background-alt);border:var(--border-width) solid var(--border);overflow:hidden;width:100%}.progress__bar,.progress__track{border-radius:var(--radius-full)}.progress__bar{flex-shrink:0;height:100%;min-height:var(--spacing-2);transition:width var(--transition-slow) var(--ease-in-out-cubic)}.progress--sm .progress__track{height:var(--spacing-1)}.progress--sm .progress__bar{min-height:var(--spacing-1)}.progress--md .progress__track{height:var(--spacing-2)}.progress--md .progress__bar{min-height:var(--spacing-2)}.progress--lg .progress__track{height:var(--spacing-3)}.progress--lg .progress__bar{min-height:var(--spacing-3)}.progress--primary .progress__bar{background-color:var(--accent)}.progress--success .progress__bar{background-color:var(--success)}.progress--warning .progress__bar{background-color:var(--warning)}.progress--error .progress__bar{background-color:var(--error)}.progress--info .progress__bar{background-color:var(--info)}.progress__label{color:var(--text-dim);font-size:var(--font-size-sm);text-align:right}.progress--indeterminate .progress__bar{animation:progress-indeterminate 1.5s ease-in-out infinite;min-width:30%;width:30%!important}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(233.333%)}}@media (prefers-reduced-motion:reduce){.progress__bar{transition:none}.progress--indeterminate .progress__bar{animation:none;opacity:.7;width:50%!important}}.spinner{align-items:center;display:inline-flex;justify-content:center;vertical-align:middle}.spinner__ring{animation:spinner-rotate .8s linear infinite;border-color:var(--border);border-radius:var(--radius-full);border-style:solid;border-top-color:currentcolor;display:block}.spinner--sm .spinner__ring{border-width:var(--border-width-2);height:var(--spacing-4);width:var(--spacing-4)}.spinner--md .spinner__ring{border-width:var(--border-width-3);height:var(--spacing-6);width:var(--spacing-6)}.spinner--lg .spinner__ring{border-width:var(--border-width-4);height:var(--spacing-8);width:var(--spacing-8)}.spinner--primary{color:var(--accent)}.spinner--success{color:var(--success)}.spinner--warning{color:var(--warning)}.spinner--error{color:var(--error)}.spinner--info{color:var(--info)}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner__ring{animation:none;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}}.avatar{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);color:var(--text-dim);display:inline-flex;flex-shrink:0;font-size:inherit;font-weight:var(--font-weight-semibold);justify-content:center;line-height:1;overflow:hidden}.avatar__img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar__initials{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar--sm{font-size:var(--font-size-xs);height:var(--spacing-8);width:var(--spacing-8)}.avatar--md{font-size:var(--font-size-sm);height:var(--spacing-10);width:var(--spacing-10)}.avatar--lg{font-size:var(--font-size-base);height:var(--spacing-12);width:var(--spacing-12)}.avatar--circle{border-radius:var(--radius-full)}.avatar--square{border-radius:var(--radius-md)}.divider{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3)}.divider__line{border:none;border-left:none;border-top:var(--border-width) solid var(--border);flex:1;min-height:0;min-width:0}.divider__label{flex-shrink:0;padding:0 var(--spacing-2);white-space:nowrap}.divider--horizontal{width:100%}.divider--horizontal .divider__line{border-left:none;border-top:var(--border-width) solid var(--border)}.divider--vertical{flex-direction:column;height:100%;min-height:var(--spacing-8);width:auto}.divider--vertical .divider__line{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-4);width:0}.footer{background-color:var(--background-alt);border-top:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);margin-top:auto;padding:var(--spacing-6) 0}.footer__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);padding-left:var(--content-padding-x);padding-right:var(--content-padding-x);width:100%}.footer__inner{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:space-between}.footer__copyright{color:var(--text-dim);margin:0}.footer__site-name{color:var(--text);font-weight:var(--font-weight-medium)}.footer__nav{margin:0}.footer__links{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-2) var(--spacing-4);list-style:none;margin:0;padding:0}.footer__link-item{margin:0}.footer__link{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.footer__link:hover{color:var(--accent-fg)}.footer__link:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table{display:flex;flex-direction:column;gap:var(--spacing-3);width:100%}.table__filter-wrap{align-items:center;display:flex;flex-shrink:0;position:relative}.table__filter-icon{align-items:center;color:var(--icon-dim);display:flex;justify-content:center;left:var(--spacing-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.table__filter-icon-svg{color:currentcolor;height:var(--table-filter-icon-size,1.25rem);width:var(--table-filter-icon-size,1.25rem)}.table__filter-wrap:focus-within .table__filter-icon{color:var(--accent)}.table__filter-wrap .table__filter{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);max-width:var(--spacing-80);padding-bottom:var(--spacing-2);padding-left:3.5rem;padding-right:var(--spacing-3);padding-top:var(--spacing-2);width:100%}.table__filter-wrap .table__filter::-moz-placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter::placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter:focus{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table__wrapper{min-width:0;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}.table__table{border-collapse:collapse;border-spacing:0;font-size:var(--font-size-sm);width:100%}.table__caption{color:var(--text);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) 0;text-align:left}.table__head .table__row{border-bottom:var(--border-width-2) solid var(--border)}.table__cell{border-bottom:var(--border-width) solid var(--border);color:var(--text);padding:var(--spacing-3) var(--spacing-4);text-align:left}.table__cell--head{color:var(--text);font-weight:var(--font-weight-semibold);white-space:nowrap}.table__sort-trigger{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--font-weight-semibold);padding:0;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);width:100%}.table__sort-trigger:hover{background-color:var(--background-alt);color:var(--text)}.table__sort-trigger:hover .table__sort-icon-svg{color:var(--accent)}.table__sort-trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table--sortable .table__cell--head{padding:0}.table--sortable .table__cell--head .table__sort-trigger{padding:var(--spacing-3) var(--spacing-4)}.table__cell-content{display:inline-block}.table__sort-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;margin-left:var(--spacing-2)}.table__sort-icon-svg{color:var(--icon-dim);height:var(--table-sort-icon-size,1.25rem);transition:color var(--transition-fast);width:var(--table-sort-icon-size,1.25rem)}.table__body .table__row:hover{background-color:var(--background-alt)}.table__body .table__row:hover .table__cell{color:var(--text)}.table--striped .table__body .table__row:nth-child(even){background-color:var(--background-alt)}.table--striped .table__body .table__row:nth-child(even):hover{background-color:var(--background)}.table--striped .table__body .table__row:nth-child(even):hover .table__cell{color:var(--text)}.table__body .table__row[hidden]{display:none}@media (prefers-reduced-motion:reduce){.table__sort-icon-svg,.table__sort-trigger{transition:none}}.skeleton{background-color:var(--background-alt);border-radius:var(--radius);display:block;overflow:hidden}.skeleton::after{animation:skeleton-shimmer 1.2s ease-in-out infinite;background:linear-gradient(90deg,transparent 0,oklch(from var(--background-alt) calc(l + .08) .01 264deg) 50%,transparent 100%);background-size:200% 100%;content:"";display:block;height:100%;min-height:1rem;width:100%}@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none;background:none}}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton--text{height:1em}.skeleton--circle{aspect-ratio:1;border-radius:var(--radius-full)}.skeleton--rect{aspect-ratio:16/9}.switch{align-items:center;color:var(--text);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-2)}.switch__input{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.switch__track{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);display:inline-flex;flex-shrink:0;height:var(--spacing-6);padding:var(--spacing-0-125);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base);width:2.75rem}.switch__thumb,.switch__track{border-radius:var(--radius-full)}.switch__thumb{background-color:var(--text);height:calc(var(--spacing-6) - var(--spacing-0-375));transition:transform var(--transition-base);width:calc(var(--spacing-6) - var(--spacing-0-375))}.switch:has(.switch__input:checked) .switch__track{background-color:var(--accent);border-color:var(--accent)}.switch:has(.switch__input:checked) .switch__thumb{background-color:var(--accent-text);transform:translateX(calc(2.75rem - 100% - var(--spacing-0-375)))}.switch:focus-within .switch__track{outline:var(--outline-width) solid var(--accent-fg);outline-offset:var(--outline-offset)}.switch:has(.switch__input:disabled){cursor:not-allowed;opacity:var(--opacity-60)}.switch:has(.switch__input:disabled) .switch__track{cursor:not-allowed}.reduced-motion .switch__thumb,
+.toggle[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.toggle-group{display:inline-flex;flex-direction:row;gap:0}.toggle-group--vertical{flex-direction:column}.toggle-group :global(.toggle){border-radius:0}.toggle-group :global(.toggle:first-child){border-radius:var(--radius) 0 0 var(--radius)}.toggle-group :global(.toggle:last-child){border-radius:0 var(--radius) var(--radius) 0}.toggle-group--vertical :global(.toggle:first-child){border-radius:var(--radius) var(--radius) 0 0}.toggle-group--vertical :global(.toggle:last-child){border-radius:0 0 var(--radius) var(--radius)}.tabs{width:100%}.tabs__list{border-bottom:var(--outline-width) solid var(--border);display:flex;gap:var(--spacing-1);margin-bottom:var(--spacing-6);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.tabs__list::-webkit-scrollbar{height:var(--spacing-0-125)}.tabs__list::-webkit-scrollbar-track{background:var(--background-alt)}.tabs__list::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}.tabs__tab{align-items:center;background:transparent;border:none;border-bottom:calc(var(--outline-width)*2) solid transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;margin-bottom:calc(var(--outline-width)*-1*2);min-height:var(--touch-target-min);outline:none;padding:var(--spacing-3) var(--spacing-5);position:relative;transition:color var(--transition-base),border-color var(--transition-base),background-color var(--transition-base);white-space:nowrap}.tabs__tab-icon{flex-shrink:0;vertical-align:middle}.tabs__tab:hover:not(.tabs__tab--active){background-color:var(--background-alt);color:var(--text)}.tabs__tab:focus-visible{border-radius:var(--radius-md) var(--radius-md) 0 0;outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*3);font-weight:var(--font-weight-semibold)}.tabs__tab--active,.tabs__tab--active:hover{background-color:var(--background-alt);color:var(--accent-fg)}.tabs__tab--active:hover{border-bottom-color:var(--accent-fg)}.tabs__panels-wrapper{width:100%}.tabs__panel{display:none;min-height:var(--spacing-20);padding:var(--spacing-6) 0;width:100%}.tabs__panel--active{animation:fadeIn var(--transition-base);display:block}.tabs__panel-content{width:100%}@keyframes fade-in{from{opacity:0;transform:translateY(var(--spacing-1))}to{opacity:1;transform:translateY(0)}}.tabs__slot-content{display:none}.tabs--pills .tabs__list{border-bottom:none;gap:var(--spacing-2)}.tabs--pills .tabs__tab{border-bottom:none;border-radius:var(--radius-md);margin-bottom:0}.tabs--pills .tabs__tab--active{background-color:var(--accent);border-bottom-color:transparent;color:var(--accent-text)}.tabs--pills .tabs__tab--active:hover{background-color:var(--accent-hover);color:var(--accent-text)}.tabs--underline .tabs__list{border-bottom:var(--outline-width) solid var(--border)}.tabs--underline .tabs__tab{border-bottom:var(--outline-width) solid transparent;padding-bottom:var(--spacing-3)}.tabs--underline .tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*2)}@media (width <= 640px){.tabs__list{gap:var(--spacing-1)}.tabs__tab{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.tabs__panel{padding:var(--spacing-3) 0}}@media (prefers-reduced-motion:reduce){.tabs__tab{transition:none}.tabs__panel--active{animation:none}}.progress{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.progress__track{background-color:var(--background-alt);border:var(--border-width) solid var(--border);overflow:hidden;width:100%}.progress__bar,.progress__track{border-radius:var(--radius-full)}.progress__bar{flex-shrink:0;height:100%;min-height:var(--spacing-2);transition:width var(--transition-slow) var(--ease-in-out-cubic)}.progress--sm .progress__track{height:var(--spacing-1)}.progress--sm .progress__bar{min-height:var(--spacing-1)}.progress--md .progress__track{height:var(--spacing-2)}.progress--md .progress__bar{min-height:var(--spacing-2)}.progress--lg .progress__track{height:var(--spacing-3)}.progress--lg .progress__bar{min-height:var(--spacing-3)}.progress--primary .progress__bar{background-color:var(--accent)}.progress--success .progress__bar{background-color:var(--success)}.progress--warning .progress__bar{background-color:var(--warning)}.progress--error .progress__bar{background-color:var(--error)}.progress--info .progress__bar{background-color:var(--info)}.progress__label{color:var(--text-dim);font-size:var(--font-size-sm);text-align:right}.progress--indeterminate .progress__bar{animation:progress-indeterminate 1.5s ease-in-out infinite;min-width:30%;width:30%!important}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(233.333%)}}@media (prefers-reduced-motion:reduce){.progress__bar{transition:none}.progress--indeterminate .progress__bar{animation:none;opacity:.7;width:50%!important}}.spinner{align-items:center;display:inline-flex;justify-content:center;vertical-align:middle}.spinner__ring{animation:spinner-rotate .8s linear infinite;border-color:var(--border);border-radius:var(--radius-full);border-style:solid;border-top-color:currentcolor;display:block}.spinner--sm .spinner__ring{border-width:var(--border-width-2);height:var(--spacing-4);width:var(--spacing-4)}.spinner--md .spinner__ring{border-width:var(--border-width-3);height:var(--spacing-6);width:var(--spacing-6)}.spinner--lg .spinner__ring{border-width:var(--border-width-4);height:var(--spacing-8);width:var(--spacing-8)}.spinner--primary{color:var(--accent)}.spinner--success{color:var(--success)}.spinner--warning{color:var(--warning)}.spinner--error{color:var(--error)}.spinner--info{color:var(--info)}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner__ring{animation:none;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}}.avatar{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);color:var(--text-dim);display:inline-flex;flex-shrink:0;font-size:inherit;font-weight:var(--font-weight-semibold);justify-content:center;line-height:1;overflow:hidden}.avatar__img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar__initials{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar--sm{font-size:var(--font-size-xs);height:var(--spacing-8);width:var(--spacing-8)}.avatar--md{font-size:var(--font-size-sm);height:var(--spacing-10);width:var(--spacing-10)}.avatar--lg{font-size:var(--font-size-base);height:var(--spacing-12);width:var(--spacing-12)}.avatar--circle{border-radius:var(--radius-full)}.avatar--square{border-radius:var(--radius-md)}.divider{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3)}.divider__line{border:none;border-left:none;border-top:var(--border-width) solid var(--border);flex:1;min-height:0;min-width:0}.divider__label{flex-shrink:0;padding:0 var(--spacing-2);white-space:nowrap}.divider--horizontal{width:100%}.divider--horizontal .divider__line{border-left:none;border-top:var(--border-width) solid var(--border)}.divider--vertical{flex-direction:column;height:100%;min-height:var(--spacing-8);width:auto}.divider--vertical .divider__line{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-4);width:0}.footer{background-color:var(--background-alt);border-top:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);margin-top:auto;padding:var(--spacing-6) 0}.footer__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);padding-left:var(--content-padding-x);padding-right:var(--content-padding-x);width:100%}.footer__inner{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:space-between}.footer__copyright{color:var(--text-dim);margin:0}.footer__site-name{color:var(--text);font-weight:var(--font-weight-medium)}.footer__nav{margin:0}.footer__links{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-2) var(--spacing-4);list-style:none;margin:0;padding:0}.footer__link-item{margin:0}.footer__link{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.footer__link:hover{color:var(--accent-fg)}.footer__link:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}@media (width <= 768px){.footer{padding-bottom:calc(var(--spacing-6) + var(--spacing-10) + var(--spacing-6))}}.table{display:flex;flex-direction:column;gap:var(--spacing-3);width:100%}.table__filter-wrap{align-items:center;display:flex;flex-shrink:0;position:relative}.table__filter-icon{align-items:center;color:var(--icon-dim);display:flex;justify-content:center;left:var(--spacing-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.table__filter-icon-svg{color:currentcolor;height:var(--table-filter-icon-size,1.25rem);width:var(--table-filter-icon-size,1.25rem)}.table__filter-wrap:focus-within .table__filter-icon{color:var(--accent)}.table__filter-wrap .table__filter{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);max-width:var(--spacing-80);padding-bottom:var(--spacing-2);padding-left:3.5rem;padding-right:var(--spacing-3);padding-top:var(--spacing-2);width:100%}.table__filter-wrap .table__filter::-moz-placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter::placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter:focus{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table__wrapper{min-width:0;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}.table__table{border-collapse:collapse;border-spacing:0;font-size:var(--font-size-sm);width:100%}.table__caption{color:var(--text);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) 0;text-align:left}.table__head .table__row{border-bottom:var(--border-width-2) solid var(--border)}.table__cell{border-bottom:var(--border-width) solid var(--border);color:var(--text);padding:var(--spacing-3) var(--spacing-4);text-align:left}.table__cell--head{color:var(--text);font-weight:var(--font-weight-semibold);white-space:nowrap}.table__sort-trigger{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--font-weight-semibold);padding:0;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);width:100%}.table__sort-trigger:hover{background-color:var(--background-alt);color:var(--text)}.table__sort-trigger:hover .table__sort-icon-svg{color:var(--accent)}.table__sort-trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table--sortable .table__cell--head{padding:0}.table--sortable .table__cell--head .table__sort-trigger{padding:var(--spacing-3) var(--spacing-4)}.table__cell-content{display:inline-block}.table__sort-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;margin-left:var(--spacing-2)}.table__sort-icon-svg{color:var(--icon-dim);height:var(--table-sort-icon-size,1.25rem);transition:color var(--transition-fast);width:var(--table-sort-icon-size,1.25rem)}.table__body .table__row:hover{background-color:var(--background-alt)}.table__body .table__row:hover .table__cell{color:var(--text)}.table--striped .table__body .table__row:nth-child(even){background-color:var(--background-alt)}.table--striped .table__body .table__row:nth-child(even):hover{background-color:var(--background)}.table--striped .table__body .table__row:nth-child(even):hover .table__cell{color:var(--text)}.table__body .table__row[hidden]{display:none}@media (prefers-reduced-motion:reduce){.table__sort-icon-svg,.table__sort-trigger{transition:none}}.skeleton{background-color:var(--background-alt);border-radius:var(--radius);display:block;overflow:hidden}.skeleton::after{animation:skeleton-shimmer 1.2s ease-in-out infinite;background:linear-gradient(90deg,transparent 0,oklch(from var(--background-alt) calc(l + .08) .01 264deg) 50%,transparent 100%);background-size:200% 100%;content:"";display:block;height:100%;min-height:1rem;width:100%}@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none;background:none}}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton--text{height:1em}.skeleton--circle{aspect-ratio:1;border-radius:var(--radius-full)}.skeleton--rect{aspect-ratio:16/9}.switch{align-items:center;color:var(--text);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-2)}.switch__input{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.switch__track{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);display:inline-flex;flex-shrink:0;height:var(--spacing-6);padding:var(--spacing-0-125);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base);width:2.75rem}.switch__thumb,.switch__track{border-radius:var(--radius-full)}.switch__thumb{background-color:var(--text);height:calc(var(--spacing-6) - var(--spacing-0-375));transition:transform var(--transition-base);width:calc(var(--spacing-6) - var(--spacing-0-375))}.switch:has(.switch__input:checked) .switch__track{background-color:var(--accent);border-color:var(--accent)}.switch:has(.switch__input:checked) .switch__thumb{background-color:var(--accent-text);transform:translateX(calc(2.75rem - 100% - var(--spacing-0-375)))}.switch:focus-within .switch__track{outline:var(--outline-width) solid var(--accent-fg);outline-offset:var(--outline-offset)}.switch:has(.switch__input:disabled){cursor:not-allowed;opacity:var(--opacity-60)}.switch:has(.switch__input:disabled) .switch__track{cursor:not-allowed}.reduced-motion .switch__thumb,
 .reduced-motion .switch__track{transition:none}.scroll-area{overflow:hidden;position:relative}.scroll-area__viewport{height:100%;overflow:auto;scrollbar-width:thin;width:100%}.scroll-area__viewport::-webkit-scrollbar{height:var(--spacing-2);width:var(--spacing-2)}.scroll-area__viewport::-webkit-scrollbar-track{background:var(--background-alt);border-radius:var(--radius)}.scroll-area__viewport::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}.scroll-area__viewport::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.scroll-area--horizontal .scroll-area__viewport{overflow-x:auto;overflow-y:hidden}.hover-card{display:inline-block;position:relative}.hover-card__content{background:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-top:var(--spacing-1);min-width:var(--spacing-56);opacity:0;padding:var(--spacing-4);pointer-events:none;position:absolute;transition:opacity var(--transition-fast),visibility var(--transition-fast);visibility:hidden;z-index:var(--z-popover,100)}.hover-card__content--open{opacity:1;pointer-events:auto;visibility:visible}.context-menu{display:inline-block;position:relative}.context-menu__content{background:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);min-width:var(--spacing-48);opacity:0;padding:var(--spacing-1);position:fixed;visibility:hidden;z-index:var(--z-context-menu,200)}.context-menu__content--open{opacity:1;visibility:visible}.context-menu__item{align-items:center;background:transparent;border:none;border-radius:var(--radius);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);gap:var(--spacing-4);justify-content:space-between;padding:var(--spacing-2) var(--spacing-3);text-align:left;transition:background-color var(--transition-fast);width:100%}
 .context-menu__item:focus-visible,.context-menu__item:hover:not(:disabled){background:var(--background-alt);outline:none}.context-menu__item:disabled{cursor:not-allowed;opacity:var(--opacity-60)}.context-menu__separator{background:var(--border);height:var(--border-width);margin:var(--spacing-1) 0}.resizable__pane-group{display:flex;height:100%;width:100%}.resizable__pane-group--horizontal{flex-direction:row}.resizable__pane-group--vertical{flex-direction:column}.resizable__pane{min-height:0;min-width:0;overflow:auto}.resizable__handle{background:var(--border);cursor:col-resize;flex-shrink:0;position:relative}.resizable__pane-group--horizontal > .resizable__handle{cursor:col-resize;width:var(--spacing-1)}.resizable__pane-group--vertical > .resizable__handle{cursor:row-resize;height:var(--spacing-1)}
 .resizable__handle:active,.resizable__handle:hover{background:var(--accent)}.resizable__handle--with-handle::after{background:var(--text-dim);border-radius:var(--radius);content:"";height:var(--spacing-4);left:50%;opacity:.5;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--spacing-4)}.resizable__pane-group--vertical > .resizable__handle--with-handle::after{height:var(--spacing-1);width:var(--spacing-4)}.resizable__pane-group--horizontal > .resizable__handle--with-handle::after{height:var(--spacing-4);width:var(--spacing-1)}.home{padding:var(--content-padding-y) 0}.home__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);min-width:0;padding-left:var(--content-padding-x);padding-right:var(--content-padding-x);width:100%}.home__announcement{align-items:center;background-color:oklch(from var(--accent-fg) l c h/8%);border:var(--border-width) solid oklch(from var(--accent-fg) l c h/14%);border-radius:var(--radius-lg);color:var(--text);display:flex;flex-wrap:wrap;font-size:var(--font-size-sm);gap:var(--spacing-2);justify-content:center;margin-bottom:var(--section-spacing);padding:var(--spacing-3) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),border-color var(--transition-base)}.home__announcement:hover{background-color:oklch(from var(--accent-fg) l c h/12%);border-color:oklch(from var(--accent-fg) l c h/20%)}.home__announcement-label{color:var(--accent-fg);font-weight:var(--font-weight-semibold)}.home__announcement-text{color:var(--text-dim)}.home__announcement-arrow{color:var(--text-dim);transition:transform var(--transition-base)}.home__announcement:hover .home__announcement-arrow{transform:translateX(var(--spacing-0-5))}.home__hero{margin-bottom:var(--section-spacing-lg);padding:var(--spacing-14) 0 var(--spacing-16);text-align:center}.home__title{color:var(--text);font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-6) 0}.home__subtitle{color:var(--text-dim);font-size:var(--font-size-xl);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-8) auto;max-width:var(--spacing-175)}.home__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:center;margin-top:var(--spacing-6)}.home__hero-cta{text-decoration:none}.home__examples-row{display:flex;flex-wrap:wrap;gap:var(--spacing-3);justify-content:center;margin-top:var(--spacing-10)}.home__example-pill{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-full);color:var(--text);display:inline-block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-2) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.home__example-pill:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent-fg)}.home__example-pill:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.home__showcase{margin-bottom:var(--section-spacing-lg)}.home__showcase-grid{display:grid;gap:var(--spacing-8);grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150)}@media (width >= 768px){.home__showcase-grid{grid-template-columns:1fr 1fr;max-width:100%}}.home__showcase .home__example{margin-bottom:0}.home__showcase .home__example:last-child{grid-column:1/-1;justify-self:center;max-width:var(--spacing-80)}@media (width >= 768px){.home__showcase .home__example:last-child{grid-column:auto;max-width:100%}}.home__section-title{color:var(--text);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--page-header-margin-bottom);text-align:center}.home__install{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:var(--section-spacing-lg);max-width:100%;min-width:0}.home__install-grid{display:grid;gap:0;grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150);min-width:0;width:100%}@media (width >= 768px){.home__install-grid{grid-template-columns:1fr auto 1fr;max-width:100%}}.home__install-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:var(--spacing-24);min-width:0;overflow:hidden;padding:var(--spacing-6);width:100%}.home__install-or{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-4);justify-content:center;letter-spacing:var(--letter-spacing-wider);padding:var(--spacing-4) 0}
@@ -197,13 +198,26 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
   .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,
 .home__cli-tabs .package-install-tabs__panel .code-block{margin:0;min-width:0;overflow:hidden}.home__features{margin-bottom:var(--spacing-16)}.home__features-intro{color:var(--text-dim);font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-10) auto;max-width:var(--spacing-125);text-align:center}.home__features-featured{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--spacing-80)),1fr));margin-bottom:var(--spacing-8)}.home__features-supporting-label{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-4) 0;text-align:center;text-transform:uppercase}.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__grid--supporting{gap:var(--spacing-5);margin-bottom:0}.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);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.home__card:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}.home__card--featured{border-color:var(--border);border-top:3px solid oklch(from var(--accent) l c h/24%);padding:var(--spacing-8)}.home__card--featured:hover{border-color:oklch(from var(--accent) l c h/28%);border-top-color:oklch(from var(--accent) l c h/40%);box-shadow:var(--shadow-md)}.home__card--supporting{display:flex;flex-direction:column;min-height:var(--spacing-32);padding:var(--spacing-5)}.home__card--supporting h3{font-size:var(--font-size-base);margin-bottom:var(--spacing-2)}.home__card--supporting p{font-size:var(--font-size-sm)}.home__card-icon{background-color:oklch(from var(--accent) l c h/14%);border-radius:var(--radius-md);color:var(--accent-fg);display:inline-block;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-wider);margin-bottom:var(--spacing-3);padding:var(--spacing-1) var(--spacing-2);text-transform:uppercase}.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--featured h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-4)}.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__add-command{margin-bottom:var(--spacing-16)}.home__add-command-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);display:flex;gap:var(--spacing-2);max-width:100%;min-width:0;overflow:hidden}.home__add-command-block pre{color:var(--text);flex:1;font-family:var(--font-family-mono);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0;min-width:0;overflow-x:auto;padding:var(--spacing-4)}.home__add-command-block code{white-space:pre}.home__add-command-copy{align-self:center;flex-shrink:0;margin-right:var(--spacing-2)}.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-fg);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__announcement{align-items:center;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-3) var(--spacing-4);text-align:center}.home__announcement-text{line-height:var(--line-height-relaxed)}.home__title{font-size:var(--font-size-4xl)}.home__subtitle{font-size:var(--font-size-lg)}.home__showcase-grid{max-width:100%}.home__showcase .home__example:last-child{justify-self:stretch;max-width:100%}.home__theme-demo{max-width:100%;width:100%}.home__install-grid{grid-template-columns:1fr}.home__features-intro{font-size:var(--font-size-base)}.home__features-featured{grid-template-columns:1fr}.home__card--supporting{min-height:0}
-  .home__docs-grid,.home__grid{grid-template-columns:1fr}}.docs-section-grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fill,minmax(var(--spacing-70),1fr));margin:var(--section-spacing) 0}.docs-format-tabs{border-bottom:var(--border-width) solid var(--border);display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin:var(--spacing-8) 0 var(--spacing-4);overflow-x:auto;padding-bottom:var(--spacing-2)}.docs-format-tab{align-items:center;background:none;border:none;border-bottom:var(--border-width-2) solid transparent;border-radius:0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin-bottom:calc(var(--spacing-2)*-1);padding:var(--spacing-2) var(--spacing-4);transition:color var(--transition-base),border-color var(--transition-base);white-space:nowrap}.docs-format-tab:hover{color:var(--text)}.docs-format-tab[aria-selected="true"]{border-bottom-color:var(--accent-fg);color:var(--accent-fg)}.docs-format-tab:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent-fg);outline-offset:var(--outline-offset)}.colors-doc__format-section{margin-bottom:var(--section-spacing)}.colors-doc__format-heading{color:var(--text);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-2) 0}.colors-doc__format-intro{color:var(--text-dim);font-size:var(--font-size-base);margin:0 0 var(--spacing-4) 0}.colors-doc .color-format-tabs{border-bottom:var(--border-width) solid var(--border);display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin:var(--spacing-4) 0 var(--spacing-4);overflow-x:auto;padding-bottom:var(--spacing-2)}.colors-doc .color-format-tab{align-items:center;background:none;border:none;border-bottom:var(--border-width-2) solid transparent;border-radius:0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin-bottom:calc(var(--spacing-2)*-1);padding:var(--spacing-2) var(--spacing-4);transition:color var(--transition-base),border-color var(--transition-base);white-space:nowrap}.colors-doc .color-format-tab:hover{color:var(--text)}.colors-doc .color-format-tab[aria-selected="true"]{border-bottom-color:var(--accent-fg);color:var(--accent-fg)}.colors-doc .color-format-tab:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent-fg);outline-offset:var(--outline-offset)}.colors-doc .color-card{background-color:var(--color-card-bg,var(--background,#64748b))!important;border-radius:var(--radius-lg);display:flex;flex-direction:column;min-height:var(--spacing-80);overflow:hidden}.colors-doc .color-card .color-swatch{background-color:var(--swatch-bg,var(--background,#64748b))!important;flex:1 1 auto;min-height:var(--spacing-80);position:relative}.colors-doc .color-card .color-swatch .color-swatch__bg{background-color:var(--swatch-bg,var(--background,#64748b))!important;border-radius:inherit;inset:0;pointer-events:none;position:absolute;z-index:0}.colors-doc .color-card .color-swatch > .color-swatch__info{background-color:#1e293b!important;color:#f1f5f9!important;position:relative;z-index:1}.colors-doc .color-swatch .copy-to-clipboard__text{color:inherit;min-height:1.5em;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;word-break:break-all}@media (width <= 640px){.docs-section-grid{grid-template-columns:1fr}}.theming-page__hero{margin-bottom:var(--section-spacing-lg);padding:var(--spacing-14) 0 var(--spacing-16);text-align:center}.theming-page__hero-title{color:var(--text);font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-6) 0}.theming-page__hero-subtitle{color:var(--text-dim);font-size:var(--font-size-xl);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-8) auto;max-width:var(--spacing-175)}.theming-page__hero-demo{align-items:center;display:inline-flex;flex-direction:column;margin-top:var(--spacing-6)}.theming-page__mobile-dropdown{display:none;max-width:var(--theme-switcher-width);width:100%}.theming-page__mobile-dropdown-inner{width:100%}@media (width <= 1024px){.theming-page .theming-page__mobile-dropdown{display:block!important}.theming-page .theming-page__hero-switcher{display:none!important}}@media (width <= 640px){.theming-page__hero-title{font-size:var(--font-size-3xl)}.theming-page__hero-subtitle{font-size:var(--font-size-lg)}}.theming-page .card a{color:var(--text);transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent-fg)}.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}.theming-page__grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fill,minmax(var(--spacing-70),1fr));margin:var(--section-spacing) 0}.theming-page__card-header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3)}.theming-page__card-header h3{margin:0}.theming-page__card-desc{color:var(--text-dim);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0 0 var(--spacing-2)}.theming-page__card-meta{color:var(--text-dim);font-size:var(--font-size-xs);margin:0}.theming-page__card-meta:last-of-type{margin-top:var(--spacing-1)}
+  .home__docs-grid,.home__grid{grid-template-columns:1fr}}.docs-section-grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fill,minmax(var(--spacing-70),1fr));margin:var(--section-spacing) 0}.docs-format-tabs{border-bottom:var(--border-width) solid var(--border);display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin:var(--spacing-8) 0 var(--spacing-4);overflow-x:auto;padding-bottom:var(--spacing-2)}.docs-format-tab{align-items:center;background:none;border:none;border-bottom:var(--border-width-2) solid transparent;border-radius:0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin-bottom:calc(var(--spacing-2)*-1);padding:var(--spacing-2) var(--spacing-4);transition:color var(--transition-base),border-color var(--transition-base);white-space:nowrap}.docs-format-tab:hover{color:var(--text)}.docs-format-tab[aria-selected="true"]{border-bottom-color:var(--accent-fg);color:var(--accent-fg)}.docs-format-tab:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent-fg);outline-offset:var(--outline-offset)}.colors-doc__format-section{margin-bottom:var(--section-spacing)}.colors-doc__format-heading{color:var(--text);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-2) 0}.colors-doc__format-intro{color:var(--text-dim);font-size:var(--font-size-base);margin:0 0 var(--spacing-4) 0}.colors-doc .color-format-tabs{border-bottom:var(--border-width) solid var(--border);display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin:var(--spacing-4) 0 var(--spacing-4);overflow-x:auto;padding-bottom:var(--spacing-2)}.colors-doc .color-format-tab{align-items:center;background:none;border:none;border-bottom:var(--border-width-2) solid transparent;border-radius:0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin-bottom:calc(var(--spacing-2)*-1);padding:var(--spacing-2) var(--spacing-4);transition:color var(--transition-base),border-color var(--transition-base);white-space:nowrap}.colors-doc .color-format-tab:hover{color:var(--text)}.colors-doc .color-format-tab[aria-selected="true"]{border-bottom-color:var(--accent-fg);color:var(--accent-fg)}.colors-doc .color-format-tab:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent-fg);outline-offset:var(--outline-offset)}.colors-doc .color-card{background-color:var(--color-card-bg,var(--swatch-bg,var(--background)))!important;border-radius:var(--radius-lg);display:flex;flex-direction:column;min-height:var(--spacing-80);overflow:hidden}.colors-doc .color-card .color-swatch{background-color:var(--swatch-bg,var(--background))!important;flex:1 1 auto;min-height:var(--spacing-80);position:relative}.colors-doc .color-card .color-swatch .color-swatch__bg{background-color:var(--swatch-bg,var(--background))!important;border-radius:inherit;inset:0;pointer-events:none;position:absolute;z-index:0}.colors-doc .color-card .color-swatch > .color-swatch__info{background-color:var(--background)!important;color:var(--text)!important;position:relative;z-index:1}.colors-doc .color-swatch .copy-to-clipboard__text{color:inherit;min-height:1.5em;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;word-break:break-all}@media (width <= 640px){.docs-section-grid{grid-template-columns:1fr}}.theming-page__hero{margin-bottom:var(--spacing-10);padding:var(--spacing-12) 0 var(--spacing-10);text-align:center}.theming-page__hero-title{color:var(--text);font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-4) 0}.theming-page__hero-subtitle{color:var(--text-dim);font-size:var(--font-size-xl);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-6) auto;max-width:var(--spacing-175)}.theming-page__hero-demo{align-items:center;display:inline-flex;flex-direction:column;margin-top:var(--spacing-5)}.theming-page .docs__content > section{margin-bottom:var(--spacing-10);margin-top:0}.theming-page .docs__content > section:last-child{margin-bottom:0}.theming-page .docs__content > section > h2{margin-bottom:var(--spacing-5);margin-top:0;padding-bottom:var(--spacing-2)}.theming-page__mobile-dropdown{display:none;max-width:var(--theme-switcher-width);width:100%}.theming-page__mobile-dropdown-inner{width:100%}@media (width <= 1024px){.theming-page .theming-page__mobile-dropdown{display:block!important;max-width:none}.theming-page .theming-page__hero-switcher{display:none!important}.theming-page .theming-page__mobile-dropdown-inner.dropdown{display:block;width:100%}.theming-page .theming-page__mobile-dropdown-inner .dropdown__trigger{justify-content:space-between;width:100%}.theming-page .theming-page__mobile-dropdown-inner .dropdown__menu{box-sizing:border-box;min-width:0;width:100%}.theming-page .theming-page__mobile-dropdown .dropdown__item-icon{color:var(--icon)}
+  .theming-page .theming-page__mobile-dropdown .dropdown__item:focus-visible:not(.dropdown__item--disabled) .dropdown__item-icon,.theming-page .theming-page__mobile-dropdown .dropdown__item:hover:not(.dropdown__item--disabled) .dropdown__item-icon{color:var(--accent)}.theming-page .theming-page__mobile-dropdown .dropdown__item--active,
+  .theming-page .theming-page__mobile-dropdown .dropdown__item--active:focus-visible,
+  .theming-page .theming-page__mobile-dropdown .dropdown__item--active:hover{background-color:var(--background);border-left:var(--border-width-accent) solid var(--accent);border-radius:var(--radius);color:var(--text);font-weight:var(--font-weight-medium);padding-left:calc(var(--spacing-4) - var(--border-width-accent))}.theming-page .theming-page__mobile-dropdown .dropdown__item--active .dropdown__item-icon,
+  .theming-page .theming-page__mobile-dropdown .dropdown__item--active:focus-visible .dropdown__item-icon,
+  .theming-page .theming-page__mobile-dropdown .dropdown__item--active:hover .dropdown__item-icon{color:var(--accent)}.theming-page .theming-page__mobile-dropdown .dropdown__item--active:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}}@media (width <= 640px){.theming-page__hero-title{font-size:var(--font-size-3xl)}.theming-page__hero-subtitle{font-size:var(--font-size-lg)}}.theming-page .card a{color:var(--text);transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent-fg)}.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}.theming-page__grid{display:grid;gap:var(--spacing-4);grid-template-columns:1fr;margin:0}.theming-page__grid .card{min-width:0;width:100%}.theming-page__card-header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.theming-page__card-header h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}.theming-page__card-desc{color:var(--text-dim);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0 0 var(--spacing-2)}.theming-page__card-meta{color:var(--text-dim);font-size:var(--font-size-xs);margin:0}.theming-page__card-meta:last-of-type{margin-top:var(--spacing-1)}
 .block-card-link,.component-card-link{text-decoration:none}
-.block-card-link:hover,.component-card-link:hover{text-decoration:underline;text-underline-offset:.15em}.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-fg);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-fg-hover);text-decoration:underline}html:has([data-docs]){scroll-behavior:smooth}.docs{align-items:stretch;background-color:var(--background);display:flex;flex-direction:row;min-height:calc(100vh - 4rem);padding:var(--content-padding-y) 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-base);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{background-color:var(--background);flex:1 1 0%;min-width:0;width:100%}@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-sm);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);display:block;font-size:var(--font-size-base);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-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar__sublist{border-left:2px solid var(--border);list-style:none;margin:0 0 0 var(--spacing-2);padding:0}.docs-sidebar__subitem{margin:0}.docs-sidebar__sublink{border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text);display:block;font-size:var(--font-size-sm);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__sublink:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__sublink--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__sublink--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar-demo{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);max-height:18rem;overflow:auto;padding:var(--spacing-3)}.docs-sidebar-demo .docs-sidebar{border-right:none;max-height:none;padding:0 var(--spacing-2) var(--spacing-4) 0;position:static;width:11rem}.docs-sidebar-demo .docs-sidebar__nav{gap:var(--spacing-4)}.docs-sidebar-demo .docs-sidebar__group-label,
+.block-card-link:hover,.component-card-link:hover{text-decoration:underline;text-underline-offset:.15em}.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-fg);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-fg-hover);text-decoration:underline}html:has([data-docs]){scroll-behavior:smooth}.docs{align-items:stretch;background-color:var(--background);display:flex;flex-direction:row;min-height:calc(100vh - 4rem);padding:var(--content-padding-y) 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-base);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:var(--overlay);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{background-color:var(--background);flex:1 1 0%;min-width:0;width:100%}@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-sm);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);display:block;font-size:var(--font-size-base);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-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar__sublist{border-left:2px solid var(--border);list-style:none;margin:0 0 0 var(--spacing-2);padding:0}.docs-sidebar__subitem{margin:0}.docs-sidebar__sublink{border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text);display:block;font-size:var(--font-size-sm);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__sublink:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__sublink--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__sublink--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar-demo{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);max-height:18rem;overflow:auto;padding:var(--spacing-3)}.docs-sidebar-demo .docs-sidebar{border-right:none;max-height:none;padding:0 var(--spacing-2) var(--spacing-4) 0;position:static;width:11rem}.docs-sidebar-demo .docs-sidebar__nav{gap:var(--spacing-4)}.docs-sidebar-demo .docs-sidebar__group-label,
 .docs-sidebar-demo h2.docs-sidebar__group-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__link{font-size:var(--font-size-sm);padding:var(--spacing-1) var(--spacing-2)}.docs-sidebar-demo .docs-sidebar__sublist{margin-left:var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__sublink{font-size:var(--font-size-xs);padding:var(--spacing-0-5) var(--spacing-1) var(--spacing-0-5) var(--spacing-2)}.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:oklch(45% 0.18 250deg);--accent-hover:oklch(48% 0.18 250deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--accent-fg:var(--cyan);--accent-fg-hover:oklch(78% 0.12 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);--scrollbar-thumb:oklch(42% 0.02 264deg);--scrollbar-thumb-hover:oklch(52% 0.03 264deg);--scrollbar-thumb-active:oklch(58% 0.04 264deg);.card .card__body h2,
+  .docs__sidebar-toggle{display:none!important}}@media (width >= 1025px){.docs__sidebar-overlay[aria-hidden="true"]{display:none!important}}
+#themes-preview .themes-page__preview-dropdown-menu .dropdown__item:focus-visible:not(.dropdown__item--disabled) svg,#themes-preview .themes-page__preview-dropdown-menu .dropdown__item:hover:not(.dropdown__item--disabled) svg,
+#themes-preview .themes-page__preview-dropdown-menu .dropdown__item[aria-current="true"] svg,
+#themes-preview .themes-page__preview-dropdown-menu .dropdown__item[aria-current="true"]:focus-visible svg,
+#themes-preview .themes-page__preview-dropdown-menu .dropdown__item[aria-current="true"]:hover svg{color:var(--accent)!important;stroke:var(--accent)!important}
+#themes-preview .themes-page__preview-dropdown-menu .dropdown__item:focus-visible:not(.dropdown__item--disabled) span,#themes-preview .themes-page__preview-dropdown-menu .dropdown__item:hover:not(.dropdown__item--disabled) span,
+#themes-preview .themes-page__preview-dropdown-menu .dropdown__item[aria-current="true"] span,
+#themes-preview .themes-page__preview-dropdown-menu .dropdown__item[aria-current="true"]:focus-visible span,
+#themes-preview .themes-page__preview-dropdown-menu .dropdown__item[aria-current="true"]:hover span{color:var(--accent)!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:oklch(45% 0.18 250deg);--accent-hover:oklch(48% 0.18 250deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--accent-fg:var(--cyan);--accent-fg-hover:oklch(78% 0.12 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);--scrollbar-thumb:oklch(42% 0.02 264deg);--scrollbar-thumb-hover:oklch(52% 0.03 264deg);--scrollbar-thumb-active:oklch(58% 0.04 264deg);.card .card__body h2,
   .card .card__body h3,
   .card .card__body h4,.footer__link{color:var(--fg)}}@supports (color:oklch(from red l c h)){[data-theme="github-dark-classic"]{--color-accent-50:oklch(from var(--accent) 0.97deg 0.03 h);--color-accent-100:oklch(from var(--accent) 0.93deg 0.06 h);--color-accent-200:oklch(from var(--accent) 0.88deg 0.1 h);--color-accent-300:oklch(from var(--accent) 0.78deg 0.14 h);--color-accent-400:oklch(from var(--accent) 0.65deg 0.16 h);--color-accent-500:var(--accent);--color-accent-600:oklch(from var(--accent) 0.45deg 0.18 h);--color-accent-700:oklch(from var(--accent) 0.38deg 0.16 h);--color-accent-800:oklch(from var(--accent) 0.3deg 0.12 h);--color-accent-900:oklch(from var(--accent) 0.22deg 0.08 h);--color-accent-950:oklch(from var(--accent) 0.15deg 0.05 h);--color-success-50:oklch(from var(--success) 0.97deg 0.03 h);--color-success-100:oklch(from var(--success) 0.93deg 0.06 h);--color-success-200:oklch(from var(--success) 0.88deg 0.1 h);--color-success-300:oklch(from var(--success) 0.78deg 0.14 h);--color-success-400:oklch(from var(--success) 0.65deg 0.16 h);--color-success-500:var(--success);--color-success-600:oklch(from var(--success) 0.45deg 0.18 h);--color-success-700:oklch(from var(--success) 0.38deg 0.16 h);--color-success-800:oklch(from var(--success) 0.3deg 0.12 h);--color-success-900:oklch(from var(--success) 0.22deg 0.08 h);--color-success-950:oklch(from var(--success) 0.15deg 0.05 h);--color-warning-50:oklch(from var(--warning) 0.97deg 0.03 h);--color-warning-100:oklch(from var(--warning) 0.93deg 0.06 h);--color-warning-200:oklch(from var(--warning) 0.88deg 0.1 h);--color-warning-300:oklch(from var(--warning) 0.82deg 0.12 h);--color-warning-400:oklch(from var(--warning) 0.75deg 0.14 h);--color-warning-500:var(--warning);--color-warning-600:oklch(from var(--warning) 0.55deg 0.14 h);--color-warning-700:oklch(from var(--warning) 0.45deg 0.12 h);--color-warning-800:oklch(from var(--warning) 0.35deg 0.1 h);--color-warning-900:oklch(from var(--warning) 0.25deg 0.06 h);--color-warning-950:oklch(from var(--warning) 0.18deg 0.04 h);--color-error-50:oklch(from var(--error) 0.97deg 0.03 h);--color-error-100:oklch(from var(--error) 0.93deg 0.06 h);--color-error-200:oklch(from var(--error) 0.88deg 0.1 h);--color-error-300:oklch(from var(--error) 0.78deg 0.14 h);--color-error-400:oklch(from var(--error) 0.65deg 0.18 h);--color-error-500:var(--error);--color-error-600:oklch(from var(--error) 0.45deg 0.2 h);--color-error-700:oklch(from var(--error) 0.38deg 0.18 h);--color-error-800:oklch(from var(--error) 0.3deg 0.14 h);--color-error-900:oklch(from var(--error) 0.22deg 0.1 h);--color-error-950:oklch(from var(--error) 0.15deg 0.06 h);--color-info-50:oklch(from var(--info) 0.97deg 0.03 h);--color-info-100:oklch(from var(--info) 0.93deg 0.06 h);--color-info-200:oklch(from var(--info) 0.88deg 0.08 h);--color-info-300:oklch(from var(--info) 0.78deg 0.1 h);--color-info-400:oklch(from var(--info) 0.65deg 0.12 h);--color-info-500:var(--info);--color-info-600:oklch(from var(--info) 0.45deg 0.12 h);--color-info-700:oklch(from var(--info) 0.38deg 0.1 h);--color-info-800:oklch(from var(--info) 0.3deg 0.08 h);--color-info-900:oklch(from var(--info) 0.22deg 0.06 h);--color-info-950:oklch(from var(--info) 0.15deg 0.04 h)}}
 [data-theme="github-dark-classic"] ::-webkit-scrollbar-thumb,[data-theme="github-dark-classic"]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "engines": { "node": ">=18" },
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"

package/scaffold/astro/Dropdown.astro

@@ -1,5 +1,6 @@
 ---
 import ChevronDown from './icons/ChevronDown.astro';
+import ThemeIcon from './ThemeIcon.astro';
 
 interface MenuItem {
   label: string;
@@ -9,6 +10,8 @@ interface MenuItem {
   disabled?: boolean;
   separator?: boolean;
   submenu?: MenuItem[];
+  /** When set, renders ThemeIcon before the label (e.g. theme picker dropdowns). */
+  themeId?: string;
 }
 
 interface Props {
@@ -289,6 +292,7 @@ const menuId = `${dropdownId}-menu`;
             data-dropdown-onclick={item.onClick || ''}
             data-dropdown-has-submenu={hasSubmenu ? 'true' : undefined}
           >
+            {item.themeId && <ThemeIcon themeId={item.themeId} size={16} class="dropdown__item-icon" />}
             <span>{item.label}</span>
             {hasSubmenu && <ChevronDown class="dropdown__item-arrow" width={12} height={12} />}
           </div>

package/scaffold/astro/ThemeIcon.astro

@@ -42,8 +42,11 @@ interface Props {
 }
 
 const { themeId, size = 24, class: className = '' } = Astro.props;
-const theme = ALL_THEMES.find((t) => t.value === themeId);
-const IconComponent = theme ? iconMap[theme.iconKey] : null;
+const IconComponent =
+  themeId === 'system' ? Gear : (() => {
+    const theme = ALL_THEMES.find((t) => t.value === themeId);
+    return theme ? iconMap[theme.iconKey] : null;
+  })();
 ---
 
 {IconComponent ? (

package/scaffold/astro/base/README-RIZZO.md

@@ -1,18 +1,19 @@
 # Astro + Rizzo CSS
 
-```
+<pre style="font-family: ui-monospace, monospace; font-size: 0.85em; line-height: 1.2;">
       /\___/\   
    __(  o o  )__
      (  =^=  )  
     _/   ~   \_ 
    /  \_____/  \
- ____  ___ _____________     ____ ____ ____
-|  _ \|_ _|__  /__  / _ \   / ___/ ___/ ___|
-| |_) || |  / /  / / | | | | |   \___ \___ \
-|  _ < | | / /_ / /| |_| | | |___ ___) |__) |
-|_| \_\___/____/____\___/   \____|____/____/
-      Design system · Vanilla · Astro · Svelte
-```
+<span style="color:#c44536"> ____ </span><span style="color:#e07c3e"> ___ _</span><span style="color:#d4a800">______</span><span style="color:#2d9d78">______</span><span style="color:#0052bd">     _</span><span style="color:#7c3aed">___ __</span><span style="color:#d946ef">__ ____</span>
+<span style="color:#c44536">|  _ \</span><span style="color:#e07c3e">|_ _|_</span><span style="color:#d4a800">_  /__</span><span style="color:#2d9d78">  / _ </span><span style="color:#0052bd">\   / </span><span style="color:#7c3aed">___/ _</span><span style="color:#d946ef">__/ ___|</span>
+<span style="color:#c44536">| |_) </span><span style="color:#e07c3e">|| |  </span><span style="color:#d4a800">/ /  /</span><span style="color:#2d9d78"> / | |</span><span style="color:#0052bd"> | | |</span><span style="color:#7c3aed">   \__</span><span style="color:#d946ef">_ \___ \</span>
+<span style="color:#c44536">|  _ &lt;</span><span style="color:#e07c3e"> | | /</span><span style="color:#d4a800"> /_ / </span><span style="color:#2d9d78">/| |_|</span><span style="color:#0052bd"> | | |</span><span style="color:#7c3aed">___ __</span><span style="color:#d946ef">_) |__) |</span>
+<span style="color:#c44536">|_| \_</span><span style="color:#e07c3e">\___/_</span><span style="color:#d4a800">___/__</span><span style="color:#2d9d78">__\___</span><span style="color:#0052bd">/   \_</span><span style="color:#7c3aed">___|__</span><span style="color:#d946ef">__/____/</span>
+
+  Design system · Vanilla · Astro · Svelte
+</pre>
 
 Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Astro, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = base + component picker (all 56 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 

package/scaffold/astro/variants/full/README-RIZZO.md

@@ -1,18 +1,19 @@
 # Astro + Rizzo CSS
 
-```
+<pre style="font-family: ui-monospace, monospace; font-size: 0.85em; line-height: 1.2;">
       /\___/\   
    __(  o o  )__
      (  =^=  )  
     _/   ~   \_ 
    /  \_____/  \
- ____  ___ _____________     ____ ____ ____
-|  _ \|_ _|__  /__  / _ \   / ___/ ___/ ___|
-| |_) || |  / /  / / | | | | |   \___ \___ \
-|  _ < | | / /_ / /| |_| | | |___ ___) |__) |
-|_| \_\___/____/____\___/   \____|____/____/
-      Design system · Vanilla · Astro · Svelte
-```
+<span style="color:#c44536"> ____ </span><span style="color:#e07c3e"> ___ _</span><span style="color:#d4a800">______</span><span style="color:#2d9d78">______</span><span style="color:#0052bd">     _</span><span style="color:#7c3aed">___ __</span><span style="color:#d946ef">__ ____</span>
+<span style="color:#c44536">|  _ \</span><span style="color:#e07c3e">|_ _|_</span><span style="color:#d4a800">_  /__</span><span style="color:#2d9d78">  / _ </span><span style="color:#0052bd">\   / </span><span style="color:#7c3aed">___/ _</span><span style="color:#d946ef">__/ ___|</span>
+<span style="color:#c44536">| |_) </span><span style="color:#e07c3e">|| |  </span><span style="color:#d4a800">/ /  /</span><span style="color:#2d9d78"> / | |</span><span style="color:#0052bd"> | | |</span><span style="color:#7c3aed">   \__</span><span style="color:#d946ef">_ \___ \</span>
+<span style="color:#c44536">|  _ &lt;</span><span style="color:#e07c3e"> | | /</span><span style="color:#d4a800"> /_ / </span><span style="color:#2d9d78">/| |_|</span><span style="color:#0052bd"> | | |</span><span style="color:#7c3aed">___ __</span><span style="color:#d946ef">_) |__) |</span>
+<span style="color:#c44536">|_| \_</span><span style="color:#e07c3e">\___/_</span><span style="color:#d4a800">___/__</span><span style="color:#2d9d78">__\___</span><span style="color:#0052bd">/   \_</span><span style="color:#7c3aed">___|__</span><span style="color:#d946ef">__/____/</span>
+
+  Design system · Vanilla · Astro · Svelte
+</pre>
 
 Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Astro, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 56 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 

package/scaffold/shared/sound-effects-inline.js

@@ -2,7 +2,7 @@
 (function() {
 	var SOUND_KEY = 'soundEffects';
 	var THROTTLE_MS = 120;
-	var clickableSelector = 'a[href], area[href], button, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], select, summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"], [role="tab"], [role="option"], [role="switch"], .btn, .tabs__tab, .dropdown__trigger, .accordion__trigger, [data-accordion-trigger], .navbar__link, .navbar__brand-link, .pagination__link, .breadcrumb__link, .search__trigger, .theme-switcher__option, .font-switcher__option, .framework-switcher__segment, .modal__close, .alert__close, .copy-btn, .copy-to-clipboard, [data-copy-btn], .docs-sidebar__link, .docs-sidebar__sublink, .docs__sidebar-toggle, .home__announcement, .home__example-pill, .block-card-link, .component-card-link, .home__doc-card, .skip-link, [data-sound-on-click]';
+	var clickableSelector = 'a[href], area[href], button, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], select, summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"], [role="tab"], [role="option"], [role="switch"], .btn, .tabs__tab, .dropdown__trigger, .accordion__trigger, [data-accordion-trigger], .navbar__link, .navbar__brand-link, .navbar__item, .pagination__link, .breadcrumb__link, .search__trigger, .theme-switcher__option, .font-switcher__option, .framework-switcher__segment, .modal__close, .alert__close, .copy-btn, .copy-to-clipboard, [data-copy-btn], .docs-sidebar__link, .docs-sidebar__sublink, .docs__sidebar-toggle, .home__announcement, .home__example-pill, .block-card-link, .component-card-link, .home__doc-card, .skip-link, [data-sound-on-click]';
 	var audioContext = null;
 	var soundBase = '/assets/sfx';
 	var soundUrls = [soundBase + '/click.mp3', soundBase + '/click.wav'];
@@ -69,7 +69,12 @@
 			playFallbackTone();
 		} catch (e) {}
 	}
-	function getClickable(el) {
+	function getEventTargetElement(target) {
+		if (!target) return null;
+		return target.nodeType === 3 ? target.parentElement : target;
+	}
+	function getClickable(target) {
+		var el = getEventTargetElement(target);
 		if (!el || !el.closest) return null;
 		var clickable = el.closest(clickableSelector);
 		if (!clickable) return null;
@@ -91,8 +96,20 @@
 		playClickSound();
 		setTimeout(function() { lastTouchSoundTarget = null; }, 450);
 	}
+	function onDocumentPointerdown(e) {
+		if (e.pointerType === 'mouse' && e.button !== 0) return;
+		if (!e.isPrimary) return;
+		var clickable = getClickable(e.target);
+		if (!clickable) return;
+		if (lastTouchSoundTarget === clickable && (Date.now() - lastTouchSoundTime) < 400) return;
+		lastTouchSoundTarget = clickable;
+		lastTouchSoundTime = Date.now();
+		playClickSound();
+		setTimeout(function() { lastTouchSoundTarget = null; }, 450);
+	}
 	function initSound() {
 		document.addEventListener('click', onDocumentClick, true);
+		document.addEventListener('pointerdown', onDocumentPointerdown, true);
 		if ('ontouchstart' in window || (navigator && navigator.maxTouchPoints > 0)) {
 			document.addEventListener('touchend', onDocumentTouchend, true);
 		}

package/scaffold/svelte/base/README-RIZZO.md

@@ -1,18 +1,19 @@
 # SvelteKit + Rizzo CSS
 
-```
+<pre style="font-family: ui-monospace, monospace; font-size: 0.85em; line-height: 1.2;">
       /\___/\   
    __(  o o  )__
      (  =^=  )  
     _/   ~   \_ 
    /  \_____/  \
- ____  ___ _____________     ____ ____ ____
-|  _ \|_ _|__  /__  / _ \   / ___/ ___/ ___|
-| |_) || |  / /  / / | | | | |   \___ \___ \
-|  _ < | | / /_ / /| |_| | | |___ ___) |__) |
-|_| \_\___/____/____\___/   \____|____/____/
-      Design system · Vanilla · Astro · Svelte
-```
+<span style="color:#c44536"> ____ </span><span style="color:#e07c3e"> ___ _</span><span style="color:#d4a800">______</span><span style="color:#2d9d78">______</span><span style="color:#0052bd">     _</span><span style="color:#7c3aed">___ __</span><span style="color:#d946ef">__ ____</span>
+<span style="color:#c44536">|  _ \</span><span style="color:#e07c3e">|_ _|_</span><span style="color:#d4a800">_  /__</span><span style="color:#2d9d78">  / _ </span><span style="color:#0052bd">\   / </span><span style="color:#7c3aed">___/ _</span><span style="color:#d946ef">__/ ___|</span>
+<span style="color:#c44536">| |_) </span><span style="color:#e07c3e">|| |  </span><span style="color:#d4a800">/ /  /</span><span style="color:#2d9d78"> / | |</span><span style="color:#0052bd"> | | |</span><span style="color:#7c3aed">   \__</span><span style="color:#d946ef">_ \___ \</span>
+<span style="color:#c44536">|  _ &lt;</span><span style="color:#e07c3e"> | | /</span><span style="color:#d4a800"> /_ / </span><span style="color:#2d9d78">/| |_|</span><span style="color:#0052bd"> | | |</span><span style="color:#7c3aed">___ __</span><span style="color:#d946ef">_) |__) |</span>
+<span style="color:#c44536">|_| \_</span><span style="color:#e07c3e">\___/_</span><span style="color:#d4a800">___/__</span><span style="color:#2d9d78">__\___</span><span style="color:#0052bd">/   \_</span><span style="color:#7c3aed">___|__</span><span style="color:#d946ef">__/____/</span>
+
+  Design system · Vanilla · Astro · Svelte
+</pre>
 
 SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = base + component picker (all 56 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 

package/scaffold/svelte/index.ts

@@ -5,6 +5,7 @@
 export { default as Button } from './Button.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Card } from './Card.svelte';
+export { default as Dashboard } from './Dashboard.svelte';
 export { default as Divider } from './Divider.svelte';
 export { default as Footer } from './Footer.svelte';
 export type { FooterLink } from './Footer.svelte';

package/scaffold/svelte/variants/full/README-RIZZO.md

@@ -1,18 +1,19 @@
 # SvelteKit + Rizzo CSS
 
-```
+<pre style="font-family: ui-monospace, monospace; font-size: 0.85em; line-height: 1.2;">
       /\___/\   
    __(  o o  )__
      (  =^=  )  
     _/   ~   \_ 
    /  \_____/  \
- ____  ___ _____________     ____ ____ ____
-|  _ \|_ _|__  /__  / _ \   / ___/ ___/ ___|
-| |_) || |  / /  / / | | | | |   \___ \___ \
-|  _ < | | / /_ / /| |_| | | |___ ___) |__) |
-|_| \_\___/____/____\___/   \____|____/____/
-      Design system · Vanilla · Astro · Svelte
-```
+<span style="color:#c44536"> ____ </span><span style="color:#e07c3e"> ___ _</span><span style="color:#d4a800">______</span><span style="color:#2d9d78">______</span><span style="color:#0052bd">     _</span><span style="color:#7c3aed">___ __</span><span style="color:#d946ef">__ ____</span>
+<span style="color:#c44536">|  _ \</span><span style="color:#e07c3e">|_ _|_</span><span style="color:#d4a800">_  /__</span><span style="color:#2d9d78">  / _ </span><span style="color:#0052bd">\   / </span><span style="color:#7c3aed">___/ _</span><span style="color:#d946ef">__/ ___|</span>
+<span style="color:#c44536">| |_) </span><span style="color:#e07c3e">|| |  </span><span style="color:#d4a800">/ /  /</span><span style="color:#2d9d78"> / | |</span><span style="color:#0052bd"> | | |</span><span style="color:#7c3aed">   \__</span><span style="color:#d946ef">_ \___ \</span>
+<span style="color:#c44536">|  _ &lt;</span><span style="color:#e07c3e"> | | /</span><span style="color:#d4a800"> /_ / </span><span style="color:#2d9d78">/| |_|</span><span style="color:#0052bd"> | | |</span><span style="color:#7c3aed">___ __</span><span style="color:#d946ef">_) |__) |</span>
+<span style="color:#c44536">|_| \_</span><span style="color:#e07c3e">\___/_</span><span style="color:#d4a800">___/__</span><span style="color:#2d9d78">__\___</span><span style="color:#0052bd">/   \_</span><span style="color:#7c3aed">___|__</span><span style="color:#d946ef">__/____/</span>
+
+  Design system · Vanilla · Astro · Svelte
+</pre>
 
 SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 56 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).