npm - rizzo-css - Versions diffs - 0.0.7 → 0.0.8 - Mend

rizzo-css 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +1 -1
package/bin/rizzo-css.js +99 -18
package/dist/rizzo.min.css +1 -1
package/package.json +1 -1
package/scaffold/astro-app/src/layouts/Layout.astro +8 -0
package/scaffold/astro-app/src/pages/index.astro +23 -8
package/scaffold/svelte-app/src/app.html +8 -0
package/scaffold/svelte-app/src/routes/+page.svelte +27 -8
package/scaffold/vanilla/index.html +441 -54

package/README.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,25 +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 = 0; i < items.length; i++) selected.add(i);
+        for (let i = realStart; i < items.length; i++) selected.add(i);
         render(false);
         return;
       }
       if (ch === 'n' || ch === 'N') {
         buf = '';
-        selected.clear();
+        for (let i = realStart; i < items.length; i++) selected.delete(i);
         render(false);
         return;
       }
@@ -533,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];
@@ -552,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'
       );
     }
   }
@@ -635,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];
@@ -654,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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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/src/app.html CHANGED Viewed

@@ -3,6 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- 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/+page.svelte CHANGED Viewed

@@ -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/vanilla/index.html CHANGED Viewed

@@ -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>