rizzo-css 0.0.6 → 0.0.8

package/README.md

@@ -41,7 +41,7 @@ import 'rizzo-css';
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rizzo-css@latest" />
 ```
 
-Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). **Vanilla JS**, Astro, and Svelte all use the same CSS and BEM markup; Astro/Svelte add framework component files for convenience.
+Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). **Vanilla JS**, Astro, and Svelte all use the same CSS and BEM markup; Astro/Svelte add framework component files for convenience. The **Vanilla** scaffold includes a full Settings panel and toast; **Astro** and **Svelte** scaffold layouts include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
 
 ## Themes
 

package/bin/rizzo-css.js

@@ -154,13 +154,28 @@ function selectMenu(options, title) {
   });
 }
 
-/** Multi-select menu: circles ○/●, Space toggles, Enter confirms. Returns array of selected values. */
+/** Index of first "real" option when using all/none sentinels (0=Select all, 1=Select none, 2+=real). */
+const SENTINEL_ALL = '__all__';
+const SENTINEL_NONE = '__none__';
+
+function hasAllNoneSentinels(items) {
+  return items.length >= 2 && items[0].value === SENTINEL_ALL && items[1].value === SENTINEL_NONE;
+}
+
+function getRealValues(items) {
+  if (hasAllNoneSentinels(items)) return items.slice(2).map((i) => i.value);
+  return items.map((i) => i.value);
+}
+
+/** Multi-select menu: circles ○/●, Space toggles, Enter confirms. Optional first two options: Select all / Select none (value __all__ / __none__). Returns array of selected values. */
 function multiSelectMenu(options, title) {
   const items = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
   const isTty = process.stdin.isTTY && process.stdout.isTTY;
+  const withSentinels = hasAllNoneSentinels(items);
+  const realValues = getRealValues(items);
 
   if (!isTty) {
-    console.log('\n' + (title || 'Choose (space to toggle, enter when done') + ':');
+    console.log('\n' + (title || 'Choose (space to toggle, enter when done)') + ':');
     items.forEach((item, i) => console.log('  ' + (i + 1) + '. ' + (item.label || item.value)));
     const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
     return new Promise((resolve) => {
@@ -168,7 +183,15 @@ function multiSelectMenu(options, title) {
         rl.close();
         const s = (answer || '').trim().toLowerCase();
         if (s === 'all' || s === 'a') {
-          resolve(items.map((i) => i.value));
+          resolve(realValues);
+          return;
+        }
+        if (withSentinels && s === '1') {
+          resolve(realValues);
+          return;
+        }
+        if (withSentinels && (s === '2' || s === 'none' || s === 'n')) {
+          resolve([]);
           return;
         }
         const parts = s.split(/[\s,]+/).filter(Boolean);
@@ -177,7 +200,19 @@ function multiSelectMenu(options, title) {
           const n = parseInt(p, 10);
           if (n >= 1 && n <= items.length) indices.add(n - 1);
         }
-        resolve(Array.from(indices).sort((a, b) => a - b).map((i) => items[i].value));
+        if (withSentinels && indices.has(0)) {
+          resolve(realValues);
+          return;
+        }
+        if (withSentinels && indices.has(1)) {
+          resolve([]);
+          return;
+        }
+        const result = Array.from(indices)
+          .sort((a, b) => a - b)
+          .filter((i) => !withSentinels || (i !== 0 && i !== 1))
+          .map((i) => items[i].value);
+        resolve(result);
       });
     });
   }
@@ -186,11 +221,30 @@ function multiSelectMenu(options, title) {
     let index = 0;
     const selected = new Set();
     const lineCount = (title ? 1 : 0) + items.length + 1;
+    const realStart = withSentinels ? 2 : 0;
+
+    const finish = () => {
+      if (withSentinels && index === 0) {
+        resolve(realValues);
+        return;
+      }
+      if (withSentinels && index === 1) {
+        resolve([]);
+        return;
+      }
+      resolve(
+        Array.from(selected)
+          .filter((i) => i >= realStart)
+          .sort((a, b) => a - b)
+          .map((i) => items[i].value)
+      );
+    };
 
     const render = (first) => {
       const lines = (title ? [title] : []).concat(
         items.map((item, i) => {
-          const circle = selected.has(i) ? CIRCLE_FILLED : CIRCLE_EMPTY;
+          const isAction = withSentinels && (i === 0 || i === 1);
+          const circle = isAction ? CIRCLE_EMPTY : selected.has(i) ? CIRCLE_FILLED : CIRCLE_EMPTY;
           const prefix = i === index ? C.cyan + '>' + C.reset + ' ' : '  ';
           return prefix + circle + formatLabel(item);
         })
@@ -222,13 +276,36 @@ function multiSelectMenu(options, title) {
         process.stdin.removeListener('data', onData);
         process.stdin.pause();
         process.stdout.write('\n');
-        resolve(Array.from(selected).sort((a, b) => a - b).map((i) => items[i].value));
+        if (withSentinels && (index === 0 || index === 1)) {
+          if (index === 0) resolve(realValues);
+          else resolve([]);
+        } else {
+          finish();
+        }
         return;
       }
       if (ch === ' ') {
         buf = '';
-        if (selected.has(index)) selected.delete(index);
-        else selected.add(index);
+        if (withSentinels && index === 0) {
+          for (let i = realStart; i < items.length; i++) selected.add(i);
+        } else if (withSentinels && index === 1) {
+          for (let i = realStart; i < items.length; i++) selected.delete(i);
+        } else {
+          if (selected.has(index)) selected.delete(index);
+          else selected.add(index);
+        }
+        render(false);
+        return;
+      }
+      if (ch === 'a' || ch === 'A') {
+        buf = '';
+        for (let i = realStart; i < items.length; i++) selected.add(i);
+        render(false);
+        return;
+      }
+      if (ch === 'n' || ch === 'N') {
+        buf = '';
+        for (let i = realStart; i < items.length; i++) selected.delete(i);
         render(false);
         return;
       }
@@ -521,8 +598,12 @@ async function runAddToExisting() {
   const framework = await selectMenu(frameworkOptions, frameworkPrompt);
 
   const selectedThemes = await multiSelectMenu(
-    THEMES.map((t) => ({ value: t, label: t })),
-    '? Themes (Space to toggle, Enter to confirm) — we\'ll suggest the first as default data-theme'
+    [
+      { value: SENTINEL_ALL, label: 'Select all themes' },
+      { value: SENTINEL_NONE, label: 'Select no themes' },
+      ...THEMES.map((t) => ({ value: t, label: t })),
+    ],
+    '? Themes — pick individuals (Space to toggle) or choose Select all/none below. Enter=confirm'
   );
   const themeList = selectedThemes.length > 0 ? selectedThemes : [THEMES[0]];
   const suggestedTheme = THEMES.includes(themeList[0]) ? themeList[0] : THEMES[0];
@@ -540,8 +621,12 @@ async function runAddToExisting() {
     );
     if (includeChoice === 'pick') {
       selectedComponents = await multiSelectMenu(
-        componentList.map((c) => ({ value: c, label: c })),
-        '? Components (Space to toggle, Enter to confirm)'
+        [
+          { value: SENTINEL_ALL, label: 'Select all components' },
+          { value: SENTINEL_NONE, label: 'Select no components' },
+          ...componentList.map((c) => ({ value: c, label: c })),
+        ],
+        '? Components — pick individuals (Space to toggle) or choose Select all/none below. Enter=confirm'
       );
     }
   }
@@ -623,8 +708,12 @@ async function cmdInit() {
   );
 
   const selectedThemes = await multiSelectMenu(
-    THEMES.map((t) => ({ value: t, label: t })),
-    '? Themes (Space to toggle, Enter to confirm)'
+    [
+      { value: SENTINEL_ALL, label: 'Select all themes' },
+      { value: SENTINEL_NONE, label: 'Select no themes' },
+      ...THEMES.map((t) => ({ value: t, label: t })),
+    ],
+    '? Themes — pick individuals (Space to toggle) or choose Select all/none below. Enter=confirm'
   );
   const themeList = selectedThemes.length > 0 ? selectedThemes : [THEMES[0]];
   const theme = THEMES.includes(themeList[0]) ? themeList[0] : THEMES[0];
@@ -642,8 +731,12 @@ async function cmdInit() {
     );
     if (includeChoice === 'pick') {
       selectedComponents = await multiSelectMenu(
-        componentList.map((c) => ({ value: c, label: c })),
-        '? Components (Space to toggle, Enter to confirm)'
+        [
+          { value: SENTINEL_ALL, label: 'Select all components' },
+          { value: SENTINEL_NONE, label: 'Select no components' },
+          ...componentList.map((c) => ({ value: c, label: c })),
+        ],
+        '? Components — pick individuals (Space to toggle) or choose Select all/none below. Enter=confirm'
       );
     }
   }

package/dist/rizzo.min.css

@@ -133,5 +133,5 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
 .accordion__panel-content :global(ol:first-child),.accordion__panel-content :global(p:first-child),
 .accordion__panel-content :global(ul:first-child){margin-top:0}
 .accordion__panel-content :global(ol:last-child),.accordion__panel-content :global(p:last-child),
-.accordion__panel-content :global(ul:last-child){margin-bottom:0}.accordion__slot-content{display:none}.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);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: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);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)}.tabs__tab--active:hover{border-bottom-color:var(--accent)}.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);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}.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{overflow-x:auto;-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}}.home{padding:var(--spacing-8) var(--spacing-4)}.home__container{margin:0 auto;max-width:var(--container-default);padding:0 var(--spacing-4)}.home__hero{margin-bottom:var(--spacing-16);padding:var(--spacing-16) 0;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;max-width:var(--spacing-175)}.home__section-title{color:var(--text);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-8);text-align:center}.home__grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-75),1fr));margin-bottom:var(--spacing-16)}.home__card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);padding:var(--spacing-6)}.home__card h3{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-3) 0}.home__card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}.home__examples{margin-bottom:var(--spacing-16)}.home__example{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--spacing-8);padding:var(--spacing-8)}.home__example h3{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4) 0}.home__example p{color:var(--text-dim);margin-bottom:var(--spacing-4)}.home__button-group{display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.home__theme-demo{max-width:var(--spacing-75)}.home__theme-demo .theme-switcher{position:relative;width:100%;z-index:var(--z-dropdown)}.home__theme-demo .theme-switcher__menu{z-index:var(--z-dropdown)}.home__docs{margin-bottom:var(--spacing-8)}.home__docs-grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-70),1fr))}.home__doc-card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:block;padding:var(--spacing-6);text-decoration:none;transition:border-color var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base)}.home__doc-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(calc(var(--spacing-0-125)*-1))}.home__doc-card:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.home__doc-card h3{color:var(--accent);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.home__doc-card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.home__title{font-size:var(--font-size-4xl)}.home__subtitle{font-size:var(--font-size-lg)}
+.accordion__panel-content :global(ul:last-child){margin-bottom:0}.accordion__slot-content{display:none}.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);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: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);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)}.tabs__tab--active:hover{border-bottom-color:var(--accent)}.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);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}.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{overflow-x:auto;-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}}.home{padding:var(--spacing-8) var(--spacing-4)}.home__container{margin:0 auto;max-width:var(--container-default);padding:0 var(--spacing-4)}.home__hero{margin-bottom:var(--spacing-16);padding:var(--spacing-16) 0;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;max-width:var(--spacing-175)}.home__section-title{color:var(--text);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-8);text-align:center}.home__install{margin-bottom:var(--spacing-16)}.home__install-grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--spacing-100)),1fr));margin:0 auto;max-width:var(--spacing-175)}.home__install-block{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-5)}.home__install-label{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-3) 0}.home__install-copy{display:block;max-width:100%;width:100%}.home__install-copy .copy-to-clipboard__text{white-space:normal;word-break:break-all}.home__grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-75),1fr));margin-bottom:var(--spacing-16)}.home__card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);padding:var(--spacing-6)}.home__card h3{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-3) 0}.home__card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}.home__examples{margin-bottom:var(--spacing-16)}.home__example{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--spacing-8);padding:var(--spacing-8)}.home__example h3{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4) 0}.home__example p{color:var(--text-dim);margin-bottom:var(--spacing-4)}.home__button-group{display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.home__theme-demo{max-width:var(--spacing-75)}.home__theme-demo .theme-switcher{position:relative;width:100%;z-index:var(--z-dropdown)}.home__theme-demo .theme-switcher__menu{z-index:var(--z-dropdown)}.home__docs{margin-bottom:var(--spacing-8)}.home__docs-grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-70),1fr))}.home__doc-card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:block;padding:var(--spacing-6);text-decoration:none;transition:border-color var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base)}.home__doc-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(calc(var(--spacing-0-125)*-1))}.home__doc-card:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.home__doc-card h3{color:var(--accent);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.home__doc-card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.home__title{font-size:var(--font-size-4xl)}.home__subtitle{font-size:var(--font-size-lg)}
   .home__docs-grid,.home__grid{grid-template-columns:1fr}}.theming-page .card a{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent)}.theming-page .card:hover{transform:translateY(calc(var(--spacing-0-125)*-1));transition:transform var(--transition-base)}.reduced-motion .theming-page .card:hover{transform:none}.theme-by{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0}.theme-by a{color:var(--accent);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-hover);text-decoration:underline}[data-theme="github-dark-classic"]{--bg:oklch(18% 0.012 264deg);--bg-alt:oklch(15% 0.01 264deg);--current-line:oklch(20% 0.012 264deg);--selection:oklch(28% 0.08 255deg);--fg:oklch(91% 0.004 264deg);--fg-dim:oklch(66% 0.01 264deg);--comment:oklch(52% 0.015 264deg);--cyan:oklch(72% 0.12 250deg);--green:oklch(72% 0.19 145deg);--orange:oklch(78% 0.12 55deg);--pink:oklch(68% 0.14 15deg);--purple:oklch(68% 0.14 300deg);--red:oklch(68% 0.16 15deg);--yellow:oklch(88% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.01 264deg);--border:oklch(13% 0.01 264deg);--accent:var(--cyan);--accent-hover:oklch(78% 0.12 250deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 250deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.1 55deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="shades-of-purple"]{--bg:oklch(18% 0.08 290deg);--bg-alt:oklch(15% 0.08 290deg);--current-line:oklch(25% 0.10 290deg);--selection:oklch(30% 0.12 290deg);--fg:oklch(95% 0.01 300deg);--fg-dim:oklch(75% 0.05 300deg);--comment:oklch(55.% 0.08 280deg);--cyan:oklch(75% 0.15 220deg);--green:oklch(70% 0.20 150deg);--orange:oklch(75% 0.18 60deg);--pink:oklch(75% 0.22 340deg);--purple:oklch(65% 0.25 290deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(85% 0.18 100deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(80% 0.05 300deg);--border:var(--current-line);--accent:var(--purple);--accent-hover:var(--pink);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 300deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.1 95deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="sandstorm-classic"]{--bg:oklch(16% 0.025 25deg);--bg-alt:oklch(13% 0.02 25deg);--current-line:oklch(20% 0.025 25deg);--selection:oklch(28% 0.06 25deg);--fg:oklch(90% 0.01 25deg);--fg-dim:oklch(62% 0.02 25deg);--comment:oklch(52% 0.03 25deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(72% 0.14 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 25deg);--border:oklch(22% 0.02 25deg);--accent:var(--red);--accent-hover:oklch(62% 0.16 25deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 25deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(78% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="rocky-blood-orange"]{--bg:oklch(16% 0.03 45deg);--bg-alt:oklch(13% 0.025 45deg);--current-line:oklch(20% 0.03 45deg);--selection:oklch(28% 0.06 45deg);--fg:oklch(90% 0.01 45deg);--fg-dim:oklch(60% 0.02 45deg);--comment:oklch(52% 0.03 45deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(62% 0.16 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 45deg);--border:oklch(22% 0.02 45deg);--accent:var(--orange);--accent-hover:oklch(68% 0.14 55deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 55deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(72% 0.14 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="minimal-dark-neon-yellow"]{--bg:oklch(14% 0.01 95deg);--bg-alt:oklch(11% 0.008 95deg);--current-line:oklch(18% 0.015 95deg);--selection:oklch(25% 0.08 95deg);--fg:oklch(92% 0.02 95deg);--fg-dim:oklch(65% 0.02 95deg);--comment:oklch(50% 0.02 95deg);--icon:var(--fg);--icon-dim:oklch(72% 0.02 95deg);--cyan:oklch(72% 0.12 220deg);--green:oklch(72% 0.18 145deg);--orange:oklch(78% 0.14 55deg);--pink:oklch(68% 0.16 350deg);--purple:oklch(65% 0.14 300deg);--red:oklch(62% 0.18 25deg);--yellow:oklch(88% 0.18 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.02 95deg);--accent:var(--yellow);--accent-hover:oklch(90% 0.16 95deg);--accent-text:oklch(12% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.03 95deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(68% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="hack-the-box"]{--bg:oklch(16% 0.03 255deg);--bg-alt:oklch(13% 0.025 255deg);--current-line:oklch(20% 0.03 255deg);--selection:oklch(55% 0.08 255deg);--fg:oklch(82% 0.03 255deg);--fg-dim:oklch(62% 0.04 255deg);--comment:oklch(55% 0.03 255deg);--icon:var(--fg);--icon-dim:oklch(70% 0.04 255deg);--cyan:oklch(78% 0.12 175deg);--green:oklch(88% 0.22 130deg);--orange:oklch(78% 0.14 75deg);--pink:oklch(65% 0.18 340deg);--purple:oklch(65% 0.22 300deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(82% 0.16 95deg);--background:var(--bg);--background-alt:oklch(14% 0.028 255deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.03 255deg);--accent:var(--green);--accent-hover:oklch(85% 0.2 125deg);--accent-text:oklch(12% 0.02 255deg);--accent-text-on-hover:oklch(22% 0.03 130deg);--success:var(--green);--success-hover:oklch(90% 0.18 130deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 130deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.14 95deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(72% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:oklch(68% 0.14 240deg);--info-hover:oklch(75% 0.12 240deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 240deg)}[data-theme="pink-cat-boo"]{--bg:oklch(18% 0.03 280deg);--bg-alt:oklch(22% 0.04 280deg);--current-line:oklch(28% 0.06 320deg);--selection:oklch(28% 0.06 320deg);--fg:oklch(98% 0.01 350deg);--fg-dim:oklch(65% 0.04 280deg);--comment:oklch(55% 0.03 160deg);--cyan:oklch(72% 0.1 220deg);--green:oklch(72% 0.14 165deg);--orange:oklch(72% 0.14 75deg);--pink:oklch(78% 0.12 350deg);--purple:oklch(72% 0.14 300deg);--red:oklch(72% 0.18 350deg);--yellow:oklch(78% 0.14 85deg);--background:var(--bg);--background-alt:oklch(20% 0.035 280deg);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.04 280deg);--border:oklch(35% 0.04 280deg);--accent:var(--pink);--accent-hover:oklch(82% 0.1 350deg);--accent-text:oklch(18% 0.02 280deg);--accent-text-on-hover:oklch(22% 0.03 350deg);--success:var(--green);--success-hover:oklch(78% 0.12 165deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 165deg);--warning:var(--yellow);--warning-hover:oklch(85% 0.12 85deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 85deg);--error:var(--red);--error-hover:oklch(78% 0.14 350deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(98% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="github-light"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(97% 0.005 264deg);--current-line:oklch(95% 0.008 264deg);--selection:oklch(88% 0.06 255deg);--fg:oklch(18% 0.02 264deg);--fg-dim:oklch(52% 0.02 264deg);--comment:oklch(58% 0.02 264deg);--cyan:oklch(55% 0.18 255deg);--green:oklch(48% 0.16 145deg);--orange:oklch(65% 0.14 75deg);--pink:oklch(55% 0.18 340deg);--purple:oklch(50% 0.18 290deg);--red:oklch(50% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.01 264deg);--accent:var(--cyan);--accent-hover:oklch(38% 0.18 255deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(62% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg)}[data-theme="red-velvet-cupcake"]{--bg:oklch(99% 0.005 25deg);--bg-alt:oklch(96% 0.01 25deg);--current-line:oklch(94% 0.015 25deg);--selection:oklch(92% 0.04 25deg);--fg:oklch(28% 0.02 250deg);--fg-dim:oklch(48% 0.02 250deg);--comment:oklch(55% 0.02 250deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(55% 0.17 25deg);--yellow:oklch(75% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.015 25deg);--accent:var(--red);--accent-hover:oklch(48% 0.18 25deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(54% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(58% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="orangy-one-light"]{--bg:oklch(99% 0.008 70deg);--bg-alt:oklch(96% 0.012 70deg);--current-line:oklch(94% 0.015 70deg);--selection:oklch(92% 0.05 70deg);--fg:oklch(22% 0.02 70deg);--fg-dim:oklch(48% 0.02 70deg);--comment:oklch(55% 0.02 70deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(58% 0.16 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 70deg);--accent:var(--orange);--accent-hover:oklch(50% 0.18 55deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(72% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="sunflower"]{--bg:oklch(98% 0.03 95deg);--bg-alt:oklch(95% 0.04 95deg);--current-line:oklch(92% 0.05 95deg);--selection:oklch(88% 0.08 95deg);--fg:oklch(22% 0.03 95deg);--fg-dim:oklch(45% 0.03 95deg);--comment:oklch(52% 0.03 95deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.16 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(85% 0.04 95deg);--accent:var(--yellow);--accent-hover:oklch(65% 0.18 95deg);--accent-text:oklch(15% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.02 95deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="green-breeze-light"]{--bg:oklch(98% 0.008 140deg);--bg-alt:oklch(96% 0.01 140deg);--current-line:oklch(94% 0.012 140deg);--selection:oklch(88% 0.06 200deg);--fg:oklch(20% 0.02 80deg);--fg-dim:oklch(45% 0.02 80deg);--comment:oklch(55% 0.02 80deg);--cyan:oklch(58% 0.14 205deg);--green:oklch(42% 0.14 145deg);--orange:oklch(62% 0.12 65deg);--pink:oklch(55% 0.12 340deg);--purple:oklch(55% 0.12 290deg);--red:oklch(45% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 140deg);--accent:oklch(48% 0.16 155deg);--accent-hover:oklch(38% 0.16 155deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 95deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg)}[data-theme="cute-pink"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(98% 0.02 350deg);--current-line:oklch(96% 0.03 350deg);--selection:oklch(78% 0.12 350deg);--fg:oklch(25% 0.01 0deg);--fg-dim:oklch(50% 0.02 0deg);--comment:oklch(55% 0.02 0deg);--cyan:oklch(55% 0.1 220deg);--green:oklch(48% 0.12 145deg);--orange:oklch(65% 0.12 65deg);--pink:oklch(62% 0.2 350deg);--purple:oklch(42% 0.18 300deg);--red:oklch(55% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:oklch(98% 0.025 350deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.06 350deg);--accent:oklch(62% 0.22 350deg);--accent-hover:oklch(55% 0.22 350deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(58% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(80% 0.14 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="semi-light-purple"]{--bg:oklch(96% 0.02 290deg);--bg-alt:oklch(94% 0.03 290deg);--current-line:oklch(91% 0.04 290deg);--selection:oklch(88% 0.06 290deg);--fg:oklch(25% 0.02 290deg);--fg-dim:oklch(48% 0.03 290deg);--comment:oklch(55% 0.04 280deg);--cyan:oklch(58% 0.12 220deg);--green:oklch(50% 0.14 150deg);--orange:oklch(65% 0.12 60deg);--pink:oklch(62% 0.16 340deg);--purple:oklch(52% 0.2 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.05 290deg);--accent:var(--purple);--accent-hover:oklch(45% 0.2 290deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm build:css && node scripts/copy-scaffold.js"
   },

package/scaffold/astro-app/package.json

@@ -1,13 +1 @@
-{
-  "name": "{{PROJECT_NAME}}",
-  "type": "module",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  },
-  "dependencies": {
-    "astro": "^5.0.0"
-  }
-}
+{"name":"{{PROJECT_NAME}}","type":"module","version":"0.0.1","scripts":{"dev":"astro dev","build":"astro build","preview":"astro preview"},"devDependencies":{"astro":"^5.0.0"}}

package/scaffold/astro-app/src/layouts/Layout.astro

@@ -11,6 +11,14 @@ const { title = '{{TITLE}}' } = Astro.props;
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <!-- Theme flash prevention + accessibility (same as main site) -->
+    <script is:inline>
+      (function(){try{var s=localStorage.getItem('theme');var d='github-dark-classic';var l='github-light';var r=!s?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);var f=localStorage.getItem('fontSizeScale');if(f)document.documentElement.style.setProperty('--font-size-scale',f);if(localStorage.getItem('reducedMotion')==='true')document.documentElement.classList.add('reduced-motion');if(localStorage.getItem('highContrast')==='true')document.documentElement.classList.add('high-contrast');var b=localStorage.getItem('scrollbarStyle')||'thin';if(b==='thick')document.documentElement.classList.add('scrollbar-thick');else if(b==='hidden')document.documentElement.classList.add('scrollbar-hidden','hide-scrollbars');}catch(e){}})();
+    </script>
+    <!-- Toast: showToast, removeToast, removeAllToasts -->
+    <script is:inline>
+      (function(){if(typeof window==='undefined'||window.showToast)return;function t(m,o){if(!m)return null;o=o||{};var v=o.variant||'info',p=o.position||'top-right',a=o.autoDismiss!==undefined?o.autoDismiss:5000,d=o.dismissible!==undefined?o.dismissible:true,i='toast-'+Math.random().toString(36).substr(2,9);function c(){if(!document.body)return;var cn=document.getElementById('toast-container-'+p);if(!cn){cn=document.createElement('div');cn.id='toast-container-'+p;cn.className='toast-container toast-container--'+p;cn.style.cssText='display:flex;visibility:visible;z-index:1100';document.body.appendChild(cn);}var to=document.createElement('div');to.id=i;to.className='alert alert--'+v;to.setAttribute('role','alert');to.setAttribute('aria-live','polite');to.style.cssText='display:flex;visibility:visible;opacity:0;transition:opacity .3s ease-out,transform .3s ease-out';var ir=p.indexOf('right')!==-1,il=p.indexOf('left')!==-1;to.style.transform=ir?'translateX(100%)':il?'translateX(-100%)':'translateY(-100%)';var co=document.createElement('div');co.className='alert__content';co.textContent=m;to.appendChild(co);if(d){var cb=document.createElement('button');cb.type='button';cb.className='alert__close';cb.setAttribute('aria-label','Dismiss toast');cb.innerHTML='<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>';to.appendChild(cb);cb.onclick=function(){to.style.opacity='0';to.style.transform=ir?'translateX(100%)':il?'translateX(-100%)':'translateY(-100%)';setTimeout(function(){if(to.parentNode)to.remove();if(cn.children.length===0)cn.remove();},300);};}cn.appendChild(to);requestAnimationFrame(function(){to.offsetHeight;setTimeout(function(){requestAnimationFrame(function(){to.style.opacity='1';to.style.transform=ir||il?'translateX(0)':'translateY(0)';});},10);});if(a>0)setTimeout(function(){if(to.parentNode){to.style.opacity='0';to.style.transform=ir?'translateX(100%)':il?'translateX(-100%)':'translateY(-100%)';setTimeout(function(){if(to.parentNode)to.remove();if(cn.children.length===0)cn.remove();},300);}},a);return i;}document.body?c():document.addEventListener('DOMContentLoaded',c);return i;}function r(i){var to=document.getElementById(i);if(to){var cn=to.parentElement;to.style.opacity='0';to.style.transform='translateY(-10px)';setTimeout(function(){if(to.parentNode)to.remove();if(cn&&cn.classList.contains('toast-container')&&!cn.children.length)cn.remove();},300);}}function ra(){document.querySelectorAll('.toast-container').forEach(function(c){c.querySelectorAll('.alert').forEach(function(t){t.style.opacity='0';t.style.transform='translateY(-10px)';});setTimeout(function(){c.remove();},300);});}window.showToast=t;window.removeToast=r;window.removeAllToasts=ra;})();
+    </script>
     <!-- Rizzo CSS: full bundle (reset + base + components + themes) -->
     <link rel="stylesheet" href="/css/rizzo.min.css" />
     <title>{title}</title>

package/scaffold/astro-app/src/pages/index.astro

@@ -1,13 +1,28 @@
 ---
 import Layout from '../layouts/Layout.astro';
 ---
-<Layout>
-  <main style="padding: var(--spacing-6); max-width: 65ch;">
-    <h1>Hello, Rizzo CSS</h1>
-    <p>Your Astro project is set up with Rizzo CSS. Same styles and components as Vanilla JS and Svelte.</p>
-    <p>
-      <a href="https://rizzo-css.vercel.app/docs/components">Component docs</a>
-      — Set theme via <code>data-theme</code> on <code>&lt;html&gt;</code> (e.g. <code>github-dark-classic</code>). Run <code>npx rizzo-css theme</code> to list themes.
-    </p>
+<Layout title="{{TITLE}}">
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+  <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
+    <a href="/" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
+    <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Docs</a>
+  </header>
+  <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
+    <span class="badge badge--primary badge--sm mb-4">Astro + Rizzo CSS</span>
+    <h1 style="font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; line-height: 1.1; margin: 0 0 var(--spacing-4) 0; color: var(--text);">Build something great</h1>
+    <p style="font-size: var(--font-size-xl); color: var(--text-dim); max-width: 42ch; margin: 0 0 var(--spacing-8) 0; line-height: var(--line-height-relaxed);">Same design system as Vanilla JS and Svelte — 14 themes, 24 components, full keyboard and screen reader support.</p>
+    <div class="flex flex-wrap justify-center gap-4 mb-12">
+      <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Get started</a>
+      <a href="https://rizzo-css.vercel.app/docs/components" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Components</a>
+      <button type="button" class="btn btn-outline" onclick="window.showToast && window.showToast('Hello from Rizzo!', { variant: 'success' })">Show toast</button>
+    </div>
+    <div class="flex flex-wrap justify-center gap-3 mb-16">
+      <span class="badge badge--info">14 themes</span>
+      <span class="badge badge--info">24 components</span>
+      <span class="badge badge--info">WCAG AA</span>
+    </div>
+    <footer style="margin-top: auto; padding-top: var(--spacing-8); color: var(--text-dim); font-size: var(--font-size-sm);">
+      <a href="https://rizzo-css.vercel.app" style="color: var(--accent);">Rizzo CSS</a> — design system for the web
+    </footer>
   </main>
 </Layout>

package/scaffold/svelte-app/package.json

@@ -3,18 +3,20 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "cookie": "^0.7.0"
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "svelte": "^5.0.0",
-    "vite": "^6.0.0"
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"svelte": "^5.49.2",
+		"svelte-check": "^4.3.6",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
   }
 }

package/scaffold/svelte-app/src/app.html

@@ -3,7 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <!-- Theme flash prevention + accessibility (same as main site) -->
+    <script>
+      (function(){try{var s=localStorage.getItem('theme');var d='github-dark-classic';var l='github-light';var r=!s?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);var f=localStorage.getItem('fontSizeScale');if(f)document.documentElement.style.setProperty('--font-size-scale',f);if(localStorage.getItem('reducedMotion')==='true')document.documentElement.classList.add('reduced-motion');if(localStorage.getItem('highContrast')==='true')document.documentElement.classList.add('high-contrast');var b=localStorage.getItem('scrollbarStyle')||'thin';if(b==='thick')document.documentElement.classList.add('scrollbar-thick');else if(b==='hidden')document.documentElement.classList.add('scrollbar-hidden','hide-scrollbars');}catch(e){}})();
+    </script>
+    <!-- Toast: showToast, removeToast, removeAllToasts -->
+    <script>
+      (function(){if(typeof window==='undefined'||window.showToast)return;function t(m,o){if(!m)return null;o=o||{};var v=o.variant||'info',p=o.position||'top-right',a=o.autoDismiss!==undefined?o.autoDismiss:5000,d=o.dismissible!==undefined?o.dismissible:true,i='toast-'+Math.random().toString(36).substr(2,9);function c(){if(!document.body)return;var cn=document.getElementById('toast-container-'+p);if(!cn){cn=document.createElement('div');cn.id='toast-container-'+p;cn.className='toast-container toast-container--'+p;cn.style.cssText='display:flex;visibility:visible;z-index:1100';document.body.appendChild(cn);}var to=document.createElement('div');to.id=i;to.className='alert alert--'+v;to.setAttribute('role','alert');to.setAttribute('aria-live','polite');to.style.cssText='display:flex;visibility:visible;opacity:0;transition:opacity .3s ease-out,transform .3s ease-out';var ir=p.indexOf('right')!==-1,il=p.indexOf('left')!==-1;to.style.transform=ir?'translateX(100%)':il?'translateX(-100%)':'translateY(-100%)';var co=document.createElement('div');co.className='alert__content';co.textContent=m;to.appendChild(co);if(d){var cb=document.createElement('button');cb.type='button';cb.className='alert__close';cb.setAttribute('aria-label','Dismiss toast');cb.innerHTML='<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>';to.appendChild(cb);cb.onclick=function(){to.style.opacity='0';to.style.transform=ir?'translateX(100%)':il?'translateX(-100%)':'translateY(-100%)';setTimeout(function(){if(to.parentNode)to.remove();if(cn.children.length===0)cn.remove();},300);};}cn.appendChild(to);requestAnimationFrame(function(){to.offsetHeight;setTimeout(function(){requestAnimationFrame(function(){to.style.opacity='1';to.style.transform=ir||il?'translateX(0)':'translateY(0)';});},10);});if(a>0)setTimeout(function(){if(to.parentNode){to.style.opacity='0';to.style.transform=ir?'translateX(100%)':il?'translateX(-100%)':'translateY(-100%)';setTimeout(function(){if(to.parentNode)to.remove();if(cn.children.length===0)cn.remove();},300);}},a);return i;}document.body?c():document.addEventListener('DOMContentLoaded',c);return i;}function r(i){var to=document.getElementById(i);if(to){var cn=to.parentElement;to.style.opacity='0';to.style.transform='translateY(-10px)';setTimeout(function(){if(to.parentNode)to.remove();if(cn&&cn.classList.contains('toast-container')&&!cn.children.length)cn.remove();},300);}}function ra(){document.querySelectorAll('.toast-container').forEach(function(c){c.querySelectorAll('.alert').forEach(function(t){t.style.opacity='0';t.style.transform='translateY(-10px)';});setTimeout(function(){c.remove();},300);});}window.showToast=t;window.removeToast=r;window.removeAllToasts=ra;})();
+    </script>
     <!-- Rizzo CSS: full bundle (reset + base + components + themes) -->
     <link rel="stylesheet" href="/css/rizzo.min.css" />
     %sveltekit.head%

package/scaffold/svelte-app/src/routes/+layout.svelte

@@ -1,5 +1,10 @@
 <script>
+  import favicon from '$lib/assets/favicon.svg?url';
   // Root layout — Rizzo CSS is loaded via app.html
 </script>
 
+<svelte:head>
+  <link rel="icon" type="image/svg+xml" href={favicon} />
+</svelte:head>
+
 <slot />

package/scaffold/svelte-app/src/routes/+page.svelte

@@ -1,12 +1,31 @@
 <script>
-  // Welcome page
+  function showDemoToast() {
+    if (typeof window !== 'undefined' && window.showToast) {
+      window.showToast('Hello from Rizzo!', { variant: 'success' });
+    }
+  }
 </script>
 
-<main style="padding: var(--spacing-6); max-width: 65ch;">
-  <h1>Hello, Rizzo CSS</h1>
-  <p>Your SvelteKit project is set up with Rizzo CSS. Same styles and components as Vanilla JS and Astro.</p>
-  <p>
-    <a href="https://rizzo-css.vercel.app/docs/components">Component docs</a>
-    — Set theme via <code>data-theme</code> on <code>&lt;html&gt;</code> (e.g. <code>github-dark-classic</code>). Run <code>npx rizzo-css theme</code> to list themes.
-  </p>
+<a href="#main-content" class="skip-link">Skip to main content</a>
+<header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
+  <a href="/" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
+  <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Docs</a>
+</header>
+<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
+  <span class="badge badge--primary badge--sm mb-4">Svelte + Rizzo CSS</span>
+  <h1 style="font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; line-height: 1.1; margin: 0 0 var(--spacing-4) 0; color: var(--text);">Build something great</h1>
+  <p style="font-size: var(--font-size-xl); color: var(--text-dim); max-width: 42ch; margin: 0 0 var(--spacing-8) 0; line-height: var(--line-height-relaxed);">Same design system as Vanilla JS and Astro — 14 themes, 24 components, full keyboard and screen reader support.</p>
+  <div class="flex flex-wrap justify-center gap-4 mb-12">
+    <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Get started</a>
+    <a href="https://rizzo-css.vercel.app/docs/components" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Components</a>
+    <button type="button" class="btn btn-outline" on:click={showDemoToast}>Show toast</button>
+  </div>
+  <div class="flex flex-wrap justify-center gap-3 mb-16">
+    <span class="badge badge--info">14 themes</span>
+    <span class="badge badge--info">24 components</span>
+    <span class="badge badge--info">WCAG AA</span>
+  </div>
+  <footer style="margin-top: auto; padding-top: var(--spacing-8); color: var(--text-dim); font-size: var(--font-size-sm);">
+    <a href="https://rizzo-css.vercel.app" style="color: var(--accent);">Rizzo CSS</a> — design system for the web
+  </footer>
 </main>

package/scaffold/svelte-app/static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

package/scaffold/svelte-app/svelte.config.js

@@ -1,11 +1,13 @@
-// @ts-check
 import adapter from '@sveltejs/adapter-auto';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  kit: {
-    adapter: adapter()
-  }
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
 };
 
 export default config;

package/scaffold/svelte-app/tsconfig.json

@@ -1,15 +1,21 @@
 {
-  "extends": "./.svelte-kit/tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler"
-  }
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
 }

package/scaffold/vanilla/index.html

@@ -4,73 +4,460 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{{TITLE}}</title>
+  <!-- Theme flash prevention: apply saved theme/settings before first paint (same as main site) -->
+  <script>
+    (function() {
+      try {
+        var savedTheme = localStorage.getItem('theme');
+        var defaultDark = 'github-dark-classic';
+        var defaultLight = 'github-light';
+        var resolvedTheme;
+        if (!savedTheme) {
+          resolvedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? defaultDark : defaultLight;
+        } else if (savedTheme === 'system') {
+          resolvedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? defaultDark : defaultLight;
+        } else {
+          resolvedTheme = savedTheme;
+        }
+        document.documentElement.setAttribute('data-theme', resolvedTheme);
+        var savedFontScale = localStorage.getItem('fontSizeScale');
+        if (savedFontScale) {
+          document.documentElement.style.setProperty('--font-size-scale', savedFontScale);
+        }
+        if (localStorage.getItem('reducedMotion') === 'true') {
+          document.documentElement.classList.add('reduced-motion');
+        }
+        if (localStorage.getItem('highContrast') === 'true') {
+          document.documentElement.classList.add('high-contrast');
+        }
+        var savedScrollbarStyle = localStorage.getItem('scrollbarStyle') || 'thin';
+        if (savedScrollbarStyle === 'thick') {
+          document.documentElement.classList.add('scrollbar-thick');
+        } else if (savedScrollbarStyle === 'hidden') {
+          document.documentElement.classList.add('scrollbar-hidden', 'hide-scrollbars');
+        }
+        if (!savedScrollbarStyle && localStorage.getItem('hideScrollbars') === 'true') {
+          document.documentElement.classList.add('scrollbar-hidden', 'hide-scrollbars');
+          localStorage.setItem('scrollbarStyle', 'hidden');
+        }
+      } catch (e) {}
+    })();
+  </script>
+  <!-- Toast: showToast, removeToast, removeAllToasts (same as main site) -->
+  <script>
+    (function() {
+      if (typeof window === 'undefined' || window.showToast) return;
+      function showToast(message, options) {
+        if (!message) return null;
+        options = options || {};
+        var variant = options.variant || 'info';
+        var position = options.position || 'top-right';
+        var autoDismiss = options.autoDismiss !== undefined ? options.autoDismiss : 5000;
+        var dismissible = options.dismissible !== undefined ? options.dismissible : true;
+        var toastId = 'toast-' + Math.random().toString(36).substr(2, 9);
+        function createToast() {
+          if (!document.body) return;
+          var containerId = 'toast-container-' + position;
+          var container = document.getElementById(containerId);
+          if (!container) {
+            container = document.createElement('div');
+            container.id = containerId;
+            container.className = 'toast-container toast-container--' + position;
+            container.style.cssText = 'display:flex;visibility:visible;z-index:1100;';
+            document.body.appendChild(container);
+          }
+          var toast = document.createElement('div');
+          toast.id = toastId;
+          toast.className = 'alert alert--' + variant;
+          toast.setAttribute('role', 'alert');
+          toast.setAttribute('aria-live', 'polite');
+          toast.style.cssText = 'display:flex;visibility:visible;opacity:0;transition:opacity 0.3s ease-out, transform 0.3s ease-out;';
+          var isRight = position.indexOf('right') !== -1;
+          var isLeft = position.indexOf('left') !== -1;
+          toast.style.transform = isRight ? 'translateX(100%)' : isLeft ? 'translateX(-100%)' : 'translateY(-100%)';
+          var content = document.createElement('div');
+          content.className = 'alert__content';
+          content.textContent = message;
+          toast.appendChild(content);
+          var closeBtn;
+          if (dismissible) {
+            closeBtn = document.createElement('button');
+            closeBtn.type = 'button';
+            closeBtn.className = 'alert__close';
+            closeBtn.setAttribute('aria-label', 'Dismiss toast');
+            closeBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>';
+            toast.appendChild(closeBtn);
+            closeBtn.addEventListener('click', function() {
+              toast.style.opacity = '0';
+              toast.style.transform = isRight ? 'translateX(100%)' : isLeft ? 'translateX(-100%)' : 'translateY(-100%)';
+              setTimeout(function() {
+                if (toast.parentNode) toast.remove();
+                if (container.children.length === 0) container.remove();
+              }, 300);
+            });
+          }
+          container.appendChild(toast);
+          requestAnimationFrame(function() {
+            toast.offsetHeight;
+            if (variant === 'warning') {
+              toast.style.color = 'var(--warning-text)';
+              content.style.color = 'var(--warning-text)';
+              if (closeBtn) closeBtn.style.color = 'var(--warning-text)';
+            }
+            setTimeout(function() {
+              requestAnimationFrame(function() {
+                toast.style.opacity = '1';
+                toast.style.transform = isRight || isLeft ? 'translateX(0)' : 'translateY(0)';
+              });
+            }, 10);
+          });
+          if (autoDismiss > 0) {
+            setTimeout(function() {
+              if (toast.parentNode) {
+                toast.style.opacity = '0';
+                toast.style.transform = isRight ? 'translateX(100%)' : isLeft ? 'translateX(-100%)' : 'translateY(-100%)';
+                setTimeout(function() {
+                  if (toast.parentNode) toast.remove();
+                  if (container.children.length === 0) container.remove();
+                }, 300);
+              }
+            }, autoDismiss);
+          }
+        }
+        if (document.body) createToast();
+        else document.addEventListener('DOMContentLoaded', createToast);
+        return toastId;
+      }
+      function removeToast(toastId) {
+        var toast = document.getElementById(toastId);
+        if (toast) {
+          var container = toast.parentElement;
+          var position = container ? container.id.replace('toast-container-', '') : 'top-right';
+          toast.style.opacity = '0';
+          toast.style.transform = position.indexOf('right') !== -1 ? 'translateX(100%)' : position.indexOf('left') !== -1 ? 'translateX(-100%)' : 'translateY(-100%)';
+          setTimeout(function() {
+            if (toast.parentNode) toast.remove();
+            if (container && container.classList.contains('toast-container') && container.children.length === 0) container.remove();
+          }, 300);
+        }
+      }
+      function removeAllToasts() {
+        document.querySelectorAll('.toast-container').forEach(function(c) {
+          c.querySelectorAll('.alert').forEach(function(t) {
+            t.style.opacity = '0';
+            t.style.transform = 'translateY(-10px)';
+          });
+          setTimeout(function() { c.remove(); }, 300);
+        });
+      }
+      window.showToast = showToast;
+      window.removeToast = removeToast;
+      window.removeAllToasts = removeAllToasts;
+    })();
+  </script>
   <link rel="stylesheet" href="{{LINK_HREF}}" />
 </head>
 <body>
-  <header style="margin-bottom: var(--spacing-6);">
-    <h1>Hello, Rizzo CSS</h1>
-    <p>Vanilla JS — same styles and components as Astro/Svelte. Use the same BEM classes; see <a href="https://rizzo-css.vercel.app/docs/components">docs</a>.</p>
-    <div style="display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; margin-top: var(--spacing-3);">
-      <label for="theme-select">Theme:</label>
-      <select id="theme-select" style="width: auto; min-width: 12rem;">
-        <option value="github-dark-classic">github-dark-classic</option>
-        <option value="github-light">github-light</option>
-        <option value="shades-of-purple">shades-of-purple</option>
-        <option value="sandstorm-classic">sandstorm-classic</option>
-        <option value="rocky-blood-orange">rocky-blood-orange</option>
-        <option value="minimal-dark-neon-yellow">minimal-dark-neon-yellow</option>
-        <option value="hack-the-box">hack-the-box</option>
-        <option value="pink-cat-boo">pink-cat-boo</option>
-        <option value="red-velvet-cupcake">red-velvet-cupcake</option>
-        <option value="orangy-one-light">orangy-one-light</option>
-        <option value="sunflower">sunflower</option>
-        <option value="green-breeze-light">green-breeze-light</option>
-        <option value="cute-pink">cute-pink</option>
-        <option value="semi-light-purple">semi-light-purple</option>
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+  <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
+    <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
+    <div class="flex items-center gap-3 flex-wrap">
+      <label for="theme-select" class="sr-only">Theme</label>
+      <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
+        <option value="system">System</option>
+        <optgroup label="Dark themes">
+          <option value="github-dark-classic">GitHub Dark Classic</option>
+          <option value="shades-of-purple">Shades of Purple</option>
+          <option value="sandstorm-classic">Sandstorm Classic</option>
+          <option value="rocky-blood-orange">Rocky Blood Orange</option>
+          <option value="minimal-dark-neon-yellow">Minimal Dark Neon Yellow</option>
+          <option value="hack-the-box">Hack The Box</option>
+          <option value="pink-cat-boo">Pink Cat Boo</option>
+        </optgroup>
+        <optgroup label="Light themes">
+          <option value="github-light">GitHub Light</option>
+          <option value="red-velvet-cupcake">Red Velvet Cupcake</option>
+          <option value="orangy-one-light">Orangy One Light</option>
+          <option value="sunflower">Sunflower</option>
+          <option value="green-breeze-light">Green Breeze Light</option>
+          <option value="cute-pink">Cute Pink</option>
+          <option value="semi-light-purple">Semi Light Purple</option>
+        </optgroup>
       </select>
+      <button type="button" class="btn btn-outline" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">Settings</button>
     </div>
   </header>
 
-  <section style="margin-bottom: var(--spacing-6);">
-    <h2>Buttons</h2>
-    <div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3);">
-      <button type="button" class="btn">Default</button>
-      <button type="button" class="btn btn-primary">Primary</button>
-      <button type="button" class="btn btn-success">Success</button>
-      <button type="button" class="btn btn-warning">Warning</button>
-      <button type="button" class="btn btn-error">Error</button>
-      <button type="button" class="btn btn-outline">Outline</button>
-    </div>
-  </section>
-
-  <section style="margin-bottom: var(--spacing-6);">
-    <h2>Card &amp; Badge</h2>
-    <div class="card" style="max-width: 20rem;">
-      <div class="card__body">
-        <h3 class="card__title">Card title</h3>
-        <p>Same component styles as Astro and Svelte. Use class names from the <a href="https://rizzo-css.vercel.app/docs/components">component docs</a>.</p>
-        <span class="badge badge--primary">Badge</span>
+  <!-- Settings panel (same structure as main site; CSS from Rizzo) -->
+  <div class="settings" data-settings aria-hidden="true">
+    <div class="settings__overlay" data-settings-overlay aria-hidden="true"></div>
+    <div class="settings__panel" role="dialog" aria-modal="true" aria-labelledby="settings-title" aria-hidden="true">
+      <div class="settings__header">
+        <h2 id="settings-title" class="settings__title">Settings</h2>
+        <button type="button" class="settings__close" aria-label="Close settings" data-settings-close>
+          <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
+        </button>
+      </div>
+      <div class="settings__content">
+        <section class="settings__section">
+          <h3 class="settings__section-title">Theme</h3>
+          <div class="settings__control">
+            <label for="settings-theme" class="settings__label">Theme</label>
+            <select id="settings-theme" class="form-control" aria-label="Theme" data-settings-theme style="width: 100%;">
+              <option value="system">System</option>
+              <optgroup label="Dark themes">
+                <option value="github-dark-classic">GitHub Dark Classic</option>
+                <option value="shades-of-purple">Shades of Purple</option>
+                <option value="sandstorm-classic">Sandstorm Classic</option>
+                <option value="rocky-blood-orange">Rocky Blood Orange</option>
+                <option value="minimal-dark-neon-yellow">Minimal Dark Neon Yellow</option>
+                <option value="hack-the-box">Hack The Box</option>
+                <option value="pink-cat-boo">Pink Cat Boo</option>
+              </optgroup>
+              <optgroup label="Light themes">
+                <option value="github-light">GitHub Light</option>
+                <option value="red-velvet-cupcake">Red Velvet Cupcake</option>
+                <option value="orangy-one-light">Orangy One Light</option>
+                <option value="sunflower">Sunflower</option>
+                <option value="green-breeze-light">Green Breeze Light</option>
+                <option value="cute-pink">Cute Pink</option>
+                <option value="semi-light-purple">Semi Light Purple</option>
+              </optgroup>
+            </select>
+          </div>
+        </section>
+        <section class="settings__section">
+          <h3 class="settings__section-title">Font Size</h3>
+          <div class="settings__control">
+            <label for="font-size-slider" class="settings__label">
+              <span class="settings__label-text">Adjust text size</span>
+              <span class="settings__label-value" data-font-size-value>100%</span>
+            </label>
+            <input type="range" id="font-size-slider" class="settings__slider" min="0.75" max="1.5" step="0.05" value="1" aria-label="Font size" data-font-size-slider style="--slider-progress: 50%;" />
+            <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
+          </div>
+        </section>
+        <section class="settings__section">
+          <h3 class="settings__section-title">Accessibility</h3>
+          <div class="settings__control">
+            <label class="settings__checkbox-label">
+              <input type="checkbox" class="settings__checkbox" data-reduced-motion aria-label="Reduce motion" />
+              <span>Reduce motion</span>
+            </label>
+            <p class="settings__help-text">Minimize animations and transitions</p>
+          </div>
+          <div class="settings__control">
+            <label class="settings__checkbox-label">
+              <input type="checkbox" class="settings__checkbox" data-high-contrast aria-label="High contrast" />
+              <span>High contrast</span>
+            </label>
+            <p class="settings__help-text">Increase contrast for better visibility</p>
+          </div>
+          <div class="settings__control">
+            <div class="settings__label"><span class="settings__label-text">Scrollbar style</span></div>
+            <div class="settings__radio-group" role="radiogroup" aria-label="Scrollbar style">
+              <label class="settings__radio-label">
+                <input type="radio" name="scrollbar-style" value="thin" class="settings__radio" data-scrollbar-style aria-label="Thin scrollbar" checked />
+                <span>Thin</span>
+              </label>
+              <label class="settings__radio-label">
+                <input type="radio" name="scrollbar-style" value="thick" class="settings__radio" data-scrollbar-style aria-label="Thick scrollbar" />
+                <span>Thick</span>
+              </label>
+              <label class="settings__radio-label">
+                <input type="radio" name="scrollbar-style" value="hidden" class="settings__radio" data-scrollbar-style aria-label="Hidden scrollbars" />
+                <span>Hidden</span>
+              </label>
+            </div>
+            <p class="settings__help-text">Choose your preferred scrollbar appearance</p>
+          </div>
+        </section>
       </div>
     </div>
-  </section>
+  </div>
 
-  <p><small>All themes and component styles are included. Run <code>npx rizzo-css theme</code> to list themes.</small></p>
+  <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
+    <span class="badge badge--primary badge--sm mb-4">Vanilla JS + Rizzo CSS</span>
+    <h1 style="font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; line-height: 1.1; margin: 0 0 var(--spacing-4) 0; color: var(--text);">Build something great</h1>
+    <p style="font-size: var(--font-size-xl); color: var(--text-dim); max-width: 42ch; margin: 0 0 var(--spacing-8) 0; line-height: var(--line-height-relaxed);">Same design system as Astro and Svelte — 14 themes, 24 components, full keyboard and screen reader support.</p>
+    <div class="flex flex-wrap justify-center gap-4 mb-12">
+      <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Get started</a>
+      <a href="https://rizzo-css.vercel.app/docs/components" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Components</a>
+      <button type="button" class="btn btn-outline" onclick="window.showToast && window.showToast('Hello from Rizzo!', { variant: 'success' });">Show toast</button>
+    </div>
+    <div class="flex flex-wrap justify-center gap-3 mb-16">
+      <span class="badge badge--info">14 themes</span>
+      <span class="badge badge--info">24 components</span>
+      <span class="badge badge--info">WCAG AA</span>
+    </div>
+    <footer style="margin-top: auto; padding-top: var(--spacing-8); color: var(--text-dim); font-size: var(--font-size-sm);">
+      <a href="https://rizzo-css.vercel.app" class="text-accent" style="color: var(--accent);">Rizzo CSS</a> — design system for the web
+    </footer>
+  </main>
 
   <script>
-    (function () {
-      var select = document.getElementById('theme-select');
-      var html = document.documentElement;
-      var key = 'rizzo-theme';
+    (function() {
+      var KEY = 'theme';
+      var defaultDark = 'github-dark-classic';
+      var defaultLight = 'github-light';
+      function resolveSystem() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? defaultDark : defaultLight;
+      }
       function applyTheme(value) {
-        html.setAttribute('data-theme', value);
-        try { localStorage.setItem(key, value); } catch (e) {}
-        select.value = value;
-      }
-      var stored = null;
-      try { stored = localStorage.getItem(key); } catch (e) {}
-      var initial = stored || html.getAttribute('data-theme') || 'github-dark-classic';
-      applyTheme(initial);
-      select.addEventListener('change', function () { applyTheme(select.value); });
+        var effective = value === 'system' ? resolveSystem() : value;
+        document.documentElement.setAttribute('data-theme', effective);
+        try { localStorage.setItem(KEY, value); } catch (e) {}
+        var headerSelect = document.getElementById('theme-select');
+        var settingsSelect = document.getElementById('settings-theme');
+        if (headerSelect && headerSelect.value !== value) headerSelect.value = value;
+        if (settingsSelect && settingsSelect.value !== value) settingsSelect.value = value;
+        try { window.dispatchEvent(new CustomEvent('rizzo-theme-change', { detail: { themeValue: value, effective: effective } })); } catch (e) {}
+      }
+      function syncSelects() {
+        var stored = null;
+        try { stored = localStorage.getItem(KEY); } catch (e) {}
+        var value = stored || 'system';
+        var headerSelect = document.getElementById('theme-select');
+        var settingsSelect = document.getElementById('settings-theme');
+        if (headerSelect) headerSelect.value = value;
+        if (settingsSelect) settingsSelect.value = value;
+      }
+      var headerSelect = document.getElementById('theme-select');
+      var settingsSelect = document.getElementById('settings-theme');
+      if (headerSelect) headerSelect.addEventListener('change', function() { applyTheme(headerSelect.value); });
+      if (settingsSelect) settingsSelect.addEventListener('change', function() { applyTheme(settingsSelect.value); });
+      syncSelects();
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
+        if ((localStorage.getItem(KEY) || 'system') === 'system') applyTheme('system');
+      });
+    })();
+  </script>
+  <script>
+    (function initSettings() {
+      var settings = document.querySelector('[data-settings]');
+      if (!settings) return;
+      var overlay = settings.querySelector('[data-settings-overlay]');
+      var panel = settings.querySelector('.settings__panel');
+      var closeBtn = settings.querySelector('[data-settings-close]');
+      var fontSizeSlider = settings.querySelector('[data-font-size-slider]');
+      var fontSizeValue = settings.querySelector('[data-font-size-value]');
+      var reducedMotion = settings.querySelector('[data-reduced-motion]');
+      var highContrast = settings.querySelector('[data-high-contrast]');
+      var scrollbarStyleRadios = settings.querySelectorAll('[data-scrollbar-style]');
+      var html = document.documentElement;
+      if (!panel || !overlay || !closeBtn) return;
+      function updateSliderProgress(slider) {
+        var min = parseFloat(slider.min), max = parseFloat(slider.max), value = parseFloat(slider.value);
+        slider.style.setProperty('--slider-progress', ((value - min) / (max - min)) * 100 + '%');
+      }
+      function applyFontSize(scale) {
+        html.style.setProperty('--font-size-scale', scale);
+        if (fontSizeValue) fontSizeValue.textContent = Math.round(scale * 100) + '%';
+      }
+      function applyScrollbarStyle(style) {
+        html.classList.remove('scrollbar-thin', 'scrollbar-thick', 'scrollbar-hidden', 'hide-scrollbars');
+        if (style === 'thick') html.classList.add('scrollbar-thick');
+        else if (style === 'hidden') html.classList.add('scrollbar-hidden', 'hide-scrollbars');
+      }
+      function loadSettings() {
+        var saved = localStorage.getItem('fontSizeScale');
+        if (saved && fontSizeSlider) {
+          fontSizeSlider.value = saved;
+          applyFontSize(parseFloat(saved));
+        }
+        if (fontSizeSlider) updateSliderProgress(fontSizeSlider);
+        if (reducedMotion) {
+          reducedMotion.checked = localStorage.getItem('reducedMotion') === 'true';
+          html.classList.toggle('reduced-motion', reducedMotion.checked);
+        }
+        if (highContrast) {
+          highContrast.checked = localStorage.getItem('highContrast') === 'true';
+          html.classList.toggle('high-contrast', highContrast.checked);
+        }
+        var scrollbar = localStorage.getItem('scrollbarStyle') || 'thin';
+        for (var i = 0; i < scrollbarStyleRadios.length; i++) {
+          if (scrollbarStyleRadios[i].value === scrollbar) scrollbarStyleRadios[i].checked = true;
+        }
+        applyScrollbarStyle(scrollbar);
+      }
+      function getFocusable(container) {
+        var sel = 'button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+        return Array.prototype.slice.call(container.querySelectorAll(sel));
+      }
+      var previousActive = null;
+      function openSettings() {
+        previousActive = document.activeElement;
+        settings.setAttribute('aria-hidden', 'false');
+        overlay.setAttribute('aria-hidden', 'false');
+        panel.setAttribute('aria-hidden', 'false');
+        panel.removeAttribute('data-open');
+        void panel.offsetHeight;
+        requestAnimationFrame(function() {
+          requestAnimationFrame(function() {
+            panel.setAttribute('data-open', 'true');
+            if (closeBtn) closeBtn.focus();
+          });
+        });
+      }
+      function closeSettings() {
+        panel.removeAttribute('data-open');
+        var duration = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 300;
+        setTimeout(function() {
+          settings.setAttribute('aria-hidden', 'true');
+          overlay.setAttribute('aria-hidden', 'true');
+          panel.setAttribute('aria-hidden', 'true');
+          if (previousActive) {
+            previousActive.focus();
+            previousActive = null;
+          }
+        }, duration);
+      }
+      closeBtn.addEventListener('click', closeSettings);
+      overlay.addEventListener('click', closeSettings);
+      document.addEventListener('keydown', function(e) {
+        if (panel.getAttribute('data-open') !== 'true') return;
+        if (e.key === 'Escape') { e.preventDefault(); closeSettings(); return; }
+        if (e.key === 'Tab') {
+          var els = getFocusable(panel);
+          if (els.length === 0) return;
+          var first = els[0], last = els[els.length - 1], active = document.activeElement;
+          if (e.shiftKey) {
+            if (active === first || !panel.contains(active)) { e.preventDefault(); last.focus(); }
+          } else {
+            if (active === last || !panel.contains(active)) { e.preventDefault(); first.focus(); }
+          }
+        }
+      });
+      if (fontSizeSlider) {
+        fontSizeSlider.addEventListener('input', function() {
+          var scale = parseFloat(this.value);
+          applyFontSize(scale);
+          updateSliderProgress(this);
+          localStorage.setItem('fontSizeScale', scale);
+        });
+      }
+      if (reducedMotion) {
+        reducedMotion.addEventListener('change', function() {
+          html.classList.toggle('reduced-motion', this.checked);
+          localStorage.setItem('reducedMotion', this.checked);
+        });
+      }
+      if (highContrast) {
+        highContrast.addEventListener('change', function() {
+          html.classList.toggle('high-contrast', this.checked);
+          localStorage.setItem('highContrast', this.checked);
+        });
+      }
+      for (var j = 0; j < scrollbarStyleRadios.length; j++) {
+        scrollbarStyleRadios[j].addEventListener('change', function() {
+          if (this.checked) {
+            applyScrollbarStyle(this.value);
+            localStorage.setItem('scrollbarStyle', this.value);
+          }
+        });
+      }
+      loadSettings();
+      window.openSettings = openSettings;
     })();
   </script>
 </body>