kss-modern 1.3.0-beta.2 → 1.3.0

package/README.md

@@ -6,6 +6,7 @@ A modern, KSS-compatible styleguide generator. Parses KSS comment blocks from CS
 
 - KSS-compatible comment parsing from CSS/SCSS files
 - Live component previews with modifier variants
+- Per-section theme dropdown (`Themes:`) to switch previews between the default and themed views
 - Pug template support via worker thread pool
 - Color palette and icon gallery documentation
 - Figma embed integration with light/dark theme sync
@@ -47,7 +48,7 @@ This scans all `.css` and `.scss` files in `contentDir` for KSS comment blocks a
 ## Documentation
 
 - **[Setup Guide](docs/setup.md)** — Installation, configuration reference, watch mode, project structure, and API reference
-- **[Usage Guide](docs/usage.md)** — Writing KSS comments, all available properties (markup, modifiers, colors, icons, Markdown, Figma, status, wrapper, html/body classes, etc.), and styleguide UI features
+- **[Usage Guide](docs/usage.md)** — Writing KSS comments, all available properties (markup, modifiers, colors, icons, Markdown, Figma, status, wrapper, html/body classes, themes, etc.), and styleguide UI features
 - **[Changelog](CHANGELOG.md)** — Version history and release notes
 
 ## Basic KSS Example

package/dist/node/lib/index.d.mts

@@ -4,6 +4,14 @@ interface SectionMeta {
     }[];
 }
 
+/**
+ * One entry of a section's `Themes:` block — a theme class (or class list, e.g. `.theme-a.compact`)
+ * written as in the KSS comment, plus the label shown in the theme dropdown.
+ */
+interface ThemeOption {
+    value: string;
+    description: string;
+}
 interface ColorObject {
     name?: string;
     color: string;
@@ -31,6 +39,8 @@ interface in2Section {
     wrapper?: string;
     htmlclass?: string;
     bodyclass?: string;
+    /** Theme contexts offered by the section's theme dropdown; classes are applied to the preview's <html>. */
+    themes?: ThemeOption[];
     source: {
         css: {
             file: string;

package/dist/node/lib/index.d.ts

@@ -4,6 +4,14 @@ interface SectionMeta {
     }[];
 }
 
+/**
+ * One entry of a section's `Themes:` block — a theme class (or class list, e.g. `.theme-a.compact`)
+ * written as in the KSS comment, plus the label shown in the theme dropdown.
+ */
+interface ThemeOption {
+    value: string;
+    description: string;
+}
 interface ColorObject {
     name?: string;
     color: string;
@@ -31,6 +39,8 @@ interface in2Section {
     wrapper?: string;
     htmlclass?: string;
     bodyclass?: string;
+    /** Theme contexts offered by the section's theme dropdown; classes are applied to the preview's <html>. */
+    themes?: ThemeOption[];
     source: {
         css: {
             file: string;

package/dist/node/lib/index.mjs

@@ -3,8 +3,8 @@ import process from 'node:process';
 import { fileURLToPath } from 'node:url';
 import fs from 'fs-extra';
 import { glob } from 'tinyglobby';
-import { l as logger, s as sanitizeSpecialCharacters, I as INSERT_VITE_PUG_TAG_RE, P as PUG_SRC_RE, a as PUG_ERROR_OVERLAY_TAG, c as compileMarkup, p as pugErrorFile, b as slugify, d as sectionSanitizeId, e as stripPugErrorOverlay, f as ensureStartingSlash, g as generateId, r as replaceWrapperContent, h as htmlToSearchText } from '../shared/kss-modern.BQiL0d8K.mjs';
-export { i as createLogger } from '../shared/kss-modern.BQiL0d8K.mjs';
+import { l as logger, s as sanitizeSpecialCharacters, I as INSERT_VITE_PUG_TAG_RE, P as PUG_SRC_RE, t as themeClassList, a as PUG_ERROR_OVERLAY_TAG, c as compileMarkup, p as pugErrorFile, b as slugify, d as sectionSanitizeId, e as stripPugErrorOverlay, f as ensureStartingSlash, g as generateId, r as replaceWrapperContent, h as htmlToSearchText } from '../shared/kss-modern.DQ_V-57G.mjs';
+export { i as createLogger } from '../shared/kss-modern.DQ_V-57G.mjs';
 import htmlLang from '@shikijs/langs/html';
 import markdownLang from '@shikijs/langs/markdown';
 import scssLang from '@shikijs/langs/scss';
@@ -506,6 +506,16 @@ function parseIcons(text) {
   });
   return icons;
 }
+function parseThemes(text) {
+  return text.split("\n").map((line) => line.trim()).filter((line) => line.length > 0).map((line) => {
+    const [value, ...labelParts] = line.split(/\s+-\s+/);
+    const description = labelParts.join(" - ").trim();
+    return {
+      value: value.trim(),
+      description: description.length > 0 ? description : themeClassList(value)
+    };
+  });
+}
 function toFloat(value) {
   return Number.isNaN(Number(value)) ? 0 : Number.parseFloat(value);
 }
@@ -563,6 +573,7 @@ function kssParser(input, options = {}) {
       processProperty(sectionRecord, paragraphs, "Wrapper", (x) => x.trim());
       processProperty(sectionRecord, paragraphs, "htmlclass", (x) => x.trim());
       processProperty(sectionRecord, paragraphs, "bodyclass", (x) => x.trim());
+      processProperty(sectionRecord, paragraphs, "Themes", parseThemes);
       processProperty(sectionRecord, paragraphs, "Icons", parseIcons);
       processProperty(sectionRecord, paragraphs, "Figma", (x) => x.trim());
       processProperty(sectionRecord, paragraphs, "Status", (x) => x.trim().toLowerCase());
@@ -867,6 +878,7 @@ async function parse(input, contentDir) {
         wrapper: section.wrapper,
         htmlclass: section.htmlclass,
         bodyclass: section.bodyclass,
+        themes: section.themes,
         source: computeSource(section),
         previewFileName: `preview-${section.reference}.html`,
         fullpageFileName: `fullpage-${section.reference}.html`
@@ -905,6 +917,7 @@ async function parse(input, contentDir) {
           wrapper: section.wrapper,
           htmlclass: section.htmlclass,
           bodyclass: section.bodyclass,
+          themes: section.themes,
           source: computeSource(section),
           previewFileName: `preview-${section.reference}.html`,
           fullpageFileName: `fullpage-${section.reference}.html`
@@ -934,6 +947,7 @@ async function parse(input, contentDir) {
           wrapper: section.wrapper,
           htmlclass: section.htmlclass,
           bodyclass: section.bodyclass,
+          themes: section.themes,
           sections: [],
           source: computeSource(section),
           previewFileName: `preview-${section.reference}.html`,
@@ -1354,7 +1368,7 @@ async function generateFullPageFile(data) {
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="${data.theme.light}">
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="${data.theme.dark}">
       ` : `<meta name="theme-color" content="${data.theme}">`}
-    <script type="module" src="/styleguide-assets/fullpage-D-fU_bAa.js"><\/script>
+    <script type="module" src="/styleguide-assets/fullpage-B7IV3eSt.js"><\/script>
     ${computedStyleTags}
 </head>
 <body${data.page.bodyclass ? ` class="${data.page.bodyclass}"` : ""}>
@@ -1554,30 +1568,34 @@ function getCodeAuditDialog() {
     </dialog>
   `;
 }
-function renderTab(data) {
+function renderTab(data, aside = "") {
   const tabId = generateId();
   return `
     <div class="tabs">
-        <div
-            class="inline-flex relative justify-start flex-wrap rounded-md p-0.5 bg-styleguide-bg-highlight" 
-            role="tablist"
-        >
+        <div class="flex flex-wrap items-center justify-between gap-3">
             <div
-                class="tab-trigger-background absolute inset-y-0.5 left-0 bg-[rgb(242,242,242)] dark:bg-[rgb(26,26,26)] rounded"
-            ></div>
-        
-            ${data.map((tab, index) => `
-                <button 
-                    id="tab-trigger-${tabId}-${index}"
-                    role="tab"
-                    aria-selected="${(index === 0).toString()}"
-                    aria-controls="tab-panel-${tabId}-${index}" 
-                    class="inline-flex gap-1 items-center relative px-4 py-2 text-sm cursor-pointer aria-selected:text-styleguide-highlight transition duration-400"
-                >
-                    ${tab.icon ?? ""}
-                    ${tab.title}
-                </button>
-            `).join("\n")}
+                class="inline-flex relative justify-start flex-wrap rounded-md p-0.5 bg-styleguide-bg-highlight" 
+                role="tablist"
+            >
+                <div
+                    class="tab-trigger-background absolute inset-y-0.5 left-0 bg-[rgb(242,242,242)] dark:bg-[rgb(26,26,26)] rounded"
+                ></div>
+            
+                ${data.map((tab, index) => `
+                    <button 
+                        id="tab-trigger-${tabId}-${index}"
+                        role="tab"
+                        aria-selected="${(index === 0).toString()}"
+                        aria-controls="tab-panel-${tabId}-${index}" 
+                        class="inline-flex gap-1 items-center relative px-4 py-2 text-sm cursor-pointer aria-selected:text-styleguide-highlight transition duration-400"
+                    >
+                        ${tab.icon ?? ""}
+                        ${tab.title}
+                    </button>
+                `).join("\n")}
+            </div>
+
+            ${aside}
         </div>
         
         ${data.map((tab, index) => `
@@ -1594,6 +1612,27 @@ function renderTab(data) {
     </div>
   `;
 }
+function renderThemeSelect(section, themes) {
+  const selectId = `theme-select-${sectionSanitizeId(section.id)}`;
+  return `
+    <div class="inline-flex items-center gap-2 text-sm">
+        <label for="${selectId}" class="select-none">Theme</label>
+        <span class="relative inline-flex">
+            <select
+                id="${selectId}"
+                class="section-theme-select appearance-none cursor-pointer rounded-md border py-1.5 pl-3 pr-8 text-sm transition duration-200 border-styleguide-border bg-styleguide-bg-highlight hover:text-styleguide-highlight focus:text-styleguide-highlight focus-visible:outline focus-visible:outline-blue-600"
+                data-section-theme-select
+            >
+                <option value="">Default</option>
+                ${themes.map((theme) => `<option value="${sanitizeSpecialCharacters(themeClassList(theme.value))}">${sanitizeSpecialCharacters(theme.description)}</option>`).join("\n")}
+            </select>
+            <svg class="pointer-events-none absolute top-1/2 right-2.5 size-3.5 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
+            </svg>
+        </span>
+    </div>
+  `;
+}
 function getMainContentHtml(secondLevelSection, config) {
   let output = "";
   function renderSection(section) {
@@ -1728,6 +1767,7 @@ function getMainContentRegular(section, config) {
         >
     </a>
   `;
+  const themeSelectMarkup = section.markup && section.themes && section.themes.length > 0 ? renderThemeSelect(section, section.themes) : "";
   const codePreviewMarkup = `
     <!-- Preview Box -->
     <div class="mt-4 overflow-hidden rounded-2xl border border-styleguide-border">
@@ -1933,8 +1973,16 @@ function getMainContentRegular(section, config) {
     }
     return `
       <div class="mt-4">
-        ${renderTab(tabs).replaceAll("<replace-figma-iframe-loading-strategy>", tabs.length > 1 ? "lazy" : "eager")}
+        ${renderTab(tabs, themeSelectMarkup).replaceAll("<replace-figma-iframe-loading-strategy>", tabs.length > 1 ? "lazy" : "eager")}
+      </div>
+    `;
+  }
+  if (themeSelectMarkup) {
+    return `
+      <div class="mt-4 flex flex-wrap items-center justify-end gap-3">
+        ${themeSelectMarkup}
       </div>
+      ${codePreviewMarkup}
     `;
   }
   return codePreviewMarkup;
@@ -2173,7 +2221,7 @@ async function generatePreviewFile(data) {
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="${data.theme.light}">
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="${data.theme.dark}">
       ` : `<meta name="theme-color" content="${data.theme}">`}
-    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-BJ971T05.css">
+    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-Cg1aeKi1.css">
     <script>
   //#region client/lib/iframe-resize.ts
 var e = [
@@ -2336,7 +2384,7 @@ document.addEventListener("DOMContentLoaded", () => {
 //#endregion
 ;
 <\/script>
-    <script type="module" src="/styleguide-assets/preview-DEipbLLB.js"><\/script>
+    <script type="module" src="/styleguide-assets/preview-CWqxR9nN.js"><\/script>
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-300-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
@@ -2747,7 +2795,7 @@ async function buildContext(config) {
 }
 const ASSETS_MARKER_FILE = ".kss-modern-assets";
 function getAssetsBuildId(theme) {
-  return `kss-modern-BJ971T05.css
+  return `kss-modern-Cg1aeKi1.css
 ${JSON.stringify(theme)}
 `;
 }

package/dist/node/lib/pug/worker.mjs

@@ -1,5 +1,5 @@
 import { parentPort } from 'node:worker_threads';
-import { c as compileMarkup, p as pugErrorFile } from '../../shared/kss-modern.BQiL0d8K.mjs';
+import { c as compileMarkup, p as pugErrorFile } from '../../shared/kss-modern.DQ_V-57G.mjs';
 import 'node:fs';
 import 'node:fs/promises';
 import 'node:path';

package/dist/node/shared/{kss-modern.BQiL0d8K.mjs → kss-modern.DQ_V-57G.mjs}

@@ -80,6 +80,9 @@ const WRAPPER_CONTENT_RE = /<wrapper-content\s*\/>|\{\{\s*wrapper-content\s*\}\}
 function replaceWrapperContent(wrapper, content) {
   return wrapper.replace(WRAPPER_CONTENT_RE, () => content);
 }
+function themeClassList(value) {
+  return value.split(/[.\s]+/).filter(Boolean).join(" ");
+}
 function* idGenerator() {
   let id = 0;
   while (true) {
@@ -251,4 +254,4 @@ async function compileMarkup(contentDir, mode, html, sectionId) {
   return { html: result, dependencies: [...new Set(dependencies)] };
 }
 
-export { INSERT_VITE_PUG_TAG_RE as I, PUG_SRC_RE as P, PUG_ERROR_OVERLAY_TAG as a, slugify as b, compileMarkup as c, sectionSanitizeId as d, stripPugErrorOverlay as e, ensureStartingSlash as f, generateId as g, htmlToSearchText as h, createLogger as i, logger as l, pugErrorFile as p, replaceWrapperContent as r, sanitizeSpecialCharacters as s };
+export { INSERT_VITE_PUG_TAG_RE as I, PUG_SRC_RE as P, PUG_ERROR_OVERLAY_TAG as a, slugify as b, compileMarkup as c, sectionSanitizeId as d, stripPugErrorOverlay as e, ensureStartingSlash as f, generateId as g, htmlToSearchText as h, createLogger as i, logger as l, pugErrorFile as p, replaceWrapperContent as r, sanitizeSpecialCharacters as s, themeClassList as t };

package/dist/styleguide-assets/.vite/manifest.json

@@ -3,6 +3,10 @@
     "file": "animate-x_9xNIEv.js",
     "name": "animate"
   },
+  "_audit-runner-Ch009v98.js": {
+    "file": "audit-runner-Ch009v98.js",
+    "name": "audit-runner"
+  },
   "_code-highlight-Fm7cxf-E.js": {
     "file": "code-highlight-Fm7cxf-E.js",
     "name": "code-highlight"
@@ -11,8 +15,8 @@
     "file": "rolldown-runtime-B1bRi_D7.js",
     "name": "rolldown-runtime"
   },
-  "_section-previews-D-Mr2eVX.js": {
-    "file": "section-previews-D-Mr2eVX.js",
+  "_section-previews-V4M5aSu6.js": {
+    "file": "section-previews-V4M5aSu6.js",
     "name": "section-previews"
   },
   "_shared-hGcWlnRM.js": {
@@ -28,7 +32,7 @@
     "name": "utils"
   },
   "client/fullpage.ts": {
-    "file": "fullpage-D-fU_bAa.js",
+    "file": "fullpage-B7IV3eSt.js",
     "name": "fullpage",
     "src": "client/fullpage.ts",
     "isEntry": true,
@@ -42,13 +46,14 @@
     ]
   },
   "client/lib/a11y-report.ts": {
-    "file": "a11y-report-BgeWSrYe.js",
+    "file": "a11y-report-DJQyYaLp.js",
     "name": "a11y-report",
     "src": "client/lib/a11y-report.ts",
     "isDynamicEntry": true,
     "imports": [
       "_utils-DtB-AzJa.js",
-      "_section-previews-D-Mr2eVX.js"
+      "_audit-runner-Ch009v98.js",
+      "_section-previews-V4M5aSu6.js"
     ]
   },
   "client/lib/clipboard.ts": {
@@ -69,7 +74,7 @@
     "isDynamicEntry": true
   },
   "client/lib/html-validator.ts": {
-    "file": "html-validator-DJGwslsw.js",
+    "file": "html-validator-Cp2OkhS9.js",
     "name": "html-validator",
     "src": "client/lib/html-validator.ts",
     "isDynamicEntry": true,
@@ -77,7 +82,8 @@
       "_code-highlight-Fm7cxf-E.js",
       "_utils-DtB-AzJa.js",
       "_shared-hGcWlnRM.js",
-      "_section-previews-D-Mr2eVX.js"
+      "_audit-runner-Ch009v98.js",
+      "_section-previews-V4M5aSu6.js"
     ]
   },
   "client/lib/icons.ts": {
@@ -90,6 +96,15 @@
       "_utils-DtB-AzJa.js"
     ]
   },
+  "client/lib/section-theme-select.ts": {
+    "file": "section-theme-select-ygaSXIuK.js",
+    "name": "section-theme-select",
+    "src": "client/lib/section-theme-select.ts",
+    "isDynamicEntry": true,
+    "imports": [
+      "_section-previews-V4M5aSu6.js"
+    ]
+  },
   "client/preview-inline.ts": {
     "file": "preview-inline-ByTkw_pt.js",
     "name": "preview-inline",
@@ -97,7 +112,7 @@
     "isEntry": true
   },
   "client/preview.ts": {
-    "file": "preview-DEipbLLB.js",
+    "file": "preview-CWqxR9nN.js",
     "name": "preview",
     "src": "client/preview.ts",
     "isEntry": true,
@@ -113,6 +128,7 @@
       "client/lib/html-validator.ts",
       "client/lib/icons.ts",
       "client/lib/clipboard.ts",
+      "client/lib/section-theme-select.ts",
       "client/lib/editor-select.ts"
     ]
   },
@@ -135,7 +151,7 @@
     ]
   },
   "style.css": {
-    "file": "kss-modern-BJ971T05.css",
+    "file": "kss-modern-Cg1aeKi1.css",
     "src": "style.css"
   }
 }

package/dist/styleguide-assets/{a11y-report-BgeWSrYe.js → a11y-report-DJQyYaLp.js}

@@ -1,5 +1,6 @@
 import { r as e } from "./utils-DtB-AzJa.js";
-import { a as t, c as n, i as r, n as i, o as a, s as o, t as s } from "./section-previews-D-Mr2eVX.js";
+import { a as t, i as n, n as r, o as i, r as a } from "./audit-runner-Ch009v98.js";
+import { n as o, t as s } from "./section-previews-V4M5aSu6.js";
 //#region client/lib/a11y-report.ts
 var c = {
 	violations: ["violations", "incomplete"],
@@ -10,7 +11,7 @@ function l(t) {
 }
 function u() {
 	return Array.from(document.querySelectorAll(s)).flatMap((e) => {
-		let { base: t, modifiers: n } = i(e);
+		let { base: t, modifiers: n } = o(e);
 		if (!t) return [];
 		let r = Number.parseInt(e.dataset.sourceLine ?? "", 10);
 		return [{
@@ -37,7 +38,7 @@ function d(e, t) {
 }
 function f(e) {
 	return {
-		target: t(e.target),
+		target: a(e.target),
 		html: e.html || void 0,
 		failureSummary: e.failureSummary || void 0,
 		measured: e.measured,
@@ -60,24 +61,24 @@ function p(e, t, n = {}) {
 function m(e) {
 	let t = /* @__PURE__ */ new Map();
 	return e.forEach((e) => {
-		let n = {
+		let r = {
 			target: e.selector ?? void 0,
 			failureSummary: e.message,
 			line: e.line,
 			column: e.column
-		}, r = t.get(e.ruleId);
-		if (r) {
-			r.nodes.push(n);
+		}, i = t.get(e.ruleId);
+		if (i) {
+			i.nodes.push(r);
 			return;
 		}
 		t.set(e.ruleId, {
 			source: "html-validate",
 			group: "violations",
 			id: e.ruleId,
-			impact: a(e.severity.toString()),
+			impact: n(e.severity.toString()),
 			description: e.ruleDescription || e.message,
 			helpUrl: e.ruleUrl || "",
-			nodes: [n]
+			nodes: [r]
 		});
 	}), Array.from(t.values());
 }
@@ -128,8 +129,8 @@ async function b(e) {
 	for (; !e.every(t) && Date.now() < n;) await new Promise((e) => setTimeout(e, 100));
 }
 var x = {
-	runAccessibilityAudit: o,
-	runModifierContrastAudit: n,
+	runAccessibilityAudit: t,
+	runModifierContrastAudit: i,
 	waitForIframes: b
 };
 async function S(e = {}, t = x) {

package/dist/styleguide-assets/{section-previews-D-Mr2eVX.js → audit-runner-Ch009v98.js}

@@ -37,13 +37,4 @@ function s(e, t) {
 	return a(e, "runColorContrastAudit", t);
 }
 //#endregion
-//#region client/lib/section-previews.ts
-var c = ".styleguide-section";
-function l(e) {
-	return {
-		base: e?.querySelector("iframe.preview-iframe:not([data-modifier])") ?? null,
-		modifiers: Array.from(e?.querySelectorAll("iframe.preview-iframe[data-modifier]") ?? [])
-	};
-}
-//#endregion
-export { n as a, s as c, t as i, l as n, r as o, e as r, o as s, c as t };
+export { o as a, r as i, t as n, s as o, n as r, e as t };

package/dist/styleguide-assets/{fullpage-D-fU_bAa.js → fullpage-B7IV3eSt.js}

@@ -412,7 +412,7 @@ function re(e) {
 		return { kind: "unsupported" };
 	});
 }
-function I(e, t, n) {
+function ie(e, t, n) {
 	let r = e.trim().toLowerCase(), i = {
 		width: n.width || t.width,
 		height: n.height || t.height
@@ -439,7 +439,7 @@ function I(e, t, n) {
 		height: c
 	};
 }
-function L(e, t, n) {
+function I(e, t, n) {
 	let r = e.trim().toLowerCase();
 	switch (r) {
 		case "left":
@@ -453,7 +453,7 @@ function L(e, t, n) {
 	let i = Number.parseFloat(r);
 	return Number.isNaN(i) ? 0 : i;
 }
-function R(e, t) {
+function L(e, t) {
 	let n = e.map((e) => typeof e.position == "number" ? e.position : typeof e.positionPx == "number" ? t > 0 ? e.positionPx / t : 0 : null);
 	n[0] === null && (n[0] = 0), n[n.length - 1] === null && (n[n.length - 1] = 1);
 	let r = 0;
@@ -474,7 +474,7 @@ function R(e, t) {
 		return i = t, t;
 	});
 }
-function z(e) {
+function R(e) {
 	if (e.startsWith("data:") || e.startsWith("blob:")) return !1;
 	try {
 		return new URL(e, window.location.href).origin !== window.location.origin;
@@ -482,16 +482,16 @@ function z(e) {
 		return !1;
 	}
 }
-function B(e, t) {
+function z(e, t) {
 	let n = t.get(e);
 	if (n) return n;
 	let r = new Promise((t) => {
 		let n = new Image();
-		n.crossOrigin = "anonymous", n.onload = () => t(n), n.onerror = () => t({ error: z(e) ? "cross-origin" : "load" }), n.src = e;
+		n.crossOrigin = "anonymous", n.onload = () => t(n), n.onerror = () => t({ error: R(e) ? "cross-origin" : "load" }), n.src = e;
 	});
 	return t.set(e, r), r;
 }
-var V = {
+var B = {
 	"cross-origin-image": "The background image is served from another origin without CORS headers, so its pixels can't be read to measure contrast. Add `Access-Control-Allow-Origin` (or a `crossorigin` attribute on the source) to enable automatic checking, or verify the contrast manually.",
 	"image-load-failed": "The background image couldn't be loaded for pixel sampling. Verify the contrast manually.",
 	"unsupported-gradient": "This element sits over a radial, conic or otherwise unsupported gradient that isn't measured automatically yet. Verify the contrast manually.",
@@ -501,13 +501,13 @@ var V = {
 	"no-background-found": "Couldn't locate a background image behind this text to sample. Verify the contrast manually.",
 	"measurement-error": "The background behind this text couldn't be sampled automatically. Verify the contrast manually."
 };
-function H(e) {
+function V(e) {
 	return {
 		code: e,
-		message: V[e]
+		message: B[e]
 	};
 }
-function U(e) {
+function H(e) {
 	return {
 		left: e.left,
 		top: e.top,
@@ -515,7 +515,7 @@ function U(e) {
 		height: e.height
 	};
 }
-async function W(e, t, n) {
+async function U(e, t, n) {
 	let r = [], i = e, a = null, o = async (e, t) => {
 		let r = [], i = k(e.backgroundColor);
 		i && i.a > 0 && r.push({
@@ -526,7 +526,7 @@ async function W(e, t, n) {
 		let a = re(e.backgroundImage), o = P(e.backgroundSize || "auto"), s = P(e.backgroundPosition || "0% 0%"), c = P(e.backgroundRepeat || "repeat");
 		for (let e = a.length - 1; e >= 0; e--) {
 			let i = a[e], l = o[e % o.length] ?? "auto", u = s[e % s.length] ?? "0% 0%", d = c[e % c.length] ?? "repeat";
-			if (i.kind === "unsupported") return H("unsupported-gradient");
+			if (i.kind === "unsupported") return V("unsupported-gradient");
 			if (i.kind === "linear-gradient") {
 				r.push({
 					kind: "gradient",
@@ -535,8 +535,8 @@ async function W(e, t, n) {
 				});
 				continue;
 			}
-			let f = await B(i.url, n);
-			if ("error" in f) return H(f.error === "cross-origin" ? "cross-origin-image" : "image-load-failed");
+			let f = await z(i.url, n);
+			if ("error" in f) return V(f.error === "cross-origin" ? "cross-origin-image" : "image-load-failed");
 			r.push({
 				kind: "image",
 				box: t,
@@ -550,8 +550,8 @@ async function W(e, t, n) {
 	};
 	for (; i && i.nodeType === Node.ELEMENT_NODE;) {
 		let e = getComputedStyle(i), t = e.getPropertyValue("backdrop-filter"), n = P(e.backgroundBlendMode || "normal").some((e) => e.trim() !== "normal");
-		if (e.mixBlendMode !== "normal" || n || e.filter !== "none" || t !== "" && t !== "none" || Number.parseFloat(e.opacity) < 1) return H("overlay-element");
-		let s = U(i.getBoundingClientRect()), c = [], l = await o(e, s);
+		if (e.mixBlendMode !== "normal" || n || e.filter !== "none" || t !== "" && t !== "none" || Number.parseFloat(e.opacity) < 1) return V("overlay-element");
+		let s = H(i.getBoundingClientRect()), c = [], l = await o(e, s);
 		if (!Array.isArray(l)) return l;
 		c.push(...l);
 		for (let e of ["::before", "::after"]) {
@@ -595,8 +595,8 @@ async function W(e, t, n) {
 		base: a
 	};
 }
-var G = 256;
-function K(e, t, n, r) {
+var W = 256;
+function G(e, t, n, r) {
 	let i = {
 		left: Math.min(...t.map((e) => e.left)),
 		top: Math.min(...t.map((e) => e.top)),
@@ -604,10 +604,10 @@ function K(e, t, n, r) {
 		height: 0
 	};
 	i.width = Math.max(...t.map((e) => e.left + e.width)) - i.left, i.height = Math.max(...t.map((e) => e.top + e.height)) - i.top;
-	let a = Math.min(1, G / Math.max(i.width, i.height, 1)), o = Math.max(1, Math.ceil(i.width * a)), s = Math.max(1, Math.ceil(i.height * a)), c = document.createElement("canvas");
+	let a = Math.min(1, W / Math.max(i.width, i.height, 1)), o = Math.max(1, Math.ceil(i.width * a)), s = Math.max(1, Math.ceil(i.height * a)), c = document.createElement("canvas");
 	c.width = o, c.height = s;
 	let l = c.getContext("2d", { willReadFrequently: !0 });
-	if (!l) return H("measurement-error");
+	if (!l) return V("measurement-error");
 	let u = (e) => (e - i.left) * a, d = (e) => (e - i.top) * a;
 	l.fillStyle = `rgb(${r.r}, ${r.g}, ${r.b})`, l.fillRect(0, 0, o, s);
 	for (let e of n) {
@@ -616,7 +616,7 @@ function K(e, t, n, r) {
 			continue;
 		}
 		if (e.kind === "gradient") {
-			let t = e.gradient.angleDeg * Math.PI / 180, n = Math.sin(t), r = -Math.cos(t), i = Math.abs(e.box.width * n) + Math.abs(e.box.height * r), a = e.box.left + e.box.width / 2, c = e.box.top + e.box.height / 2, f = l.createLinearGradient(u(a - n * i / 2), d(c - r * i / 2), u(a + n * i / 2), d(c + r * i / 2)), p = R(e.gradient.stops, i);
+			let t = e.gradient.angleDeg * Math.PI / 180, n = Math.sin(t), r = -Math.cos(t), i = Math.abs(e.box.width * n) + Math.abs(e.box.height * r), a = e.box.left + e.box.width / 2, c = e.box.top + e.box.height / 2, f = l.createLinearGradient(u(a - n * i / 2), d(c - r * i / 2), u(a + n * i / 2), d(c + r * i / 2)), p = L(e.gradient.stops, i);
 			e.gradient.stops.forEach((e, t) => {
 				f.addColorStop(p[t], `rgba(${e.color.r}, ${e.color.g}, ${e.color.b}, ${e.color.a})`);
 			}), l.fillStyle = f, l.fillRect(0, 0, o, s);
@@ -628,9 +628,9 @@ function K(e, t, n, r) {
 		}, n = {
 			width: e.box.width,
 			height: e.box.height
-		}, r = I(e.size, n, t);
+		}, r = ie(e.size, n, t);
 		if (r.width <= 0 || r.height <= 0) continue;
-		let [c = "0%", f = "0%"] = e.position.split(/\s+/), p = e.box.left + L(c, n.width, r.width), m = e.box.top + L(f, n.height, r.height), h = e.repeat, g = h === "repeat" || h === "repeat-x" || h === "round" || h === "space", _ = h === "repeat" || h === "repeat-y" || h === "round" || h === "space", v = g ? p - Math.ceil((p - i.left) / r.width) * r.width : p, y = _ ? m - Math.ceil((m - i.top) / r.height) * r.height : m, b = g ? i.left + i.width : p, x = _ ? i.top + i.height : m, S = 0;
+		let [c = "0%", f = "0%"] = e.position.split(/\s+/), p = e.box.left + I(c, n.width, r.width), m = e.box.top + I(f, n.height, r.height), h = e.repeat, g = h === "repeat" || h === "repeat-x" || h === "round" || h === "space", _ = h === "repeat" || h === "repeat-y" || h === "round" || h === "space", v = g ? p - Math.ceil((p - i.left) / r.width) * r.width : p, y = _ ? m - Math.ceil((m - i.top) / r.height) * r.height : m, b = g ? i.left + i.width : p, x = _ ? i.top + i.height : m, S = 0;
 		for (let t = y; t <= x; t += r.height) {
 			for (let n = v; n <= b && (l.drawImage(e.img, u(n), d(t), r.width * a, r.height * a), !(++S > 4096)); n += r.width);
 			if (S > 4096) break;
@@ -640,7 +640,7 @@ function K(e, t, n, r) {
 	try {
 		f = l.getImageData(0, 0, o, s).data;
 	} catch {
-		return H("cross-origin-image");
+		return V("cross-origin-image");
 	}
 	let p = t.map((e) => ({
 		x0: u(e.left),
@@ -659,12 +659,12 @@ function K(e, t, n, r) {
 	}
 	return _;
 }
-async function q(e, t, n = /* @__PURE__ */ new Map()) {
+async function K(e, t, n = /* @__PURE__ */ new Map()) {
 	try {
 		let r = getComputedStyle(e), i = k(r.color);
 		if (!i || i.a < .999) return {
 			status: "unknown",
-			reason: H("measurement-error")
+			reason: V("measurement-error")
 		};
 		let a = {
 			r: i.r,
@@ -681,18 +681,18 @@ async function q(e, t, n = /* @__PURE__ */ new Map()) {
 		}).filter((e) => e.width > 0 && e.height > 0);
 		if (l.length === 0) return {
 			status: "unknown",
-			reason: H("no-geometry")
+			reason: V("no-geometry")
 		};
-		let u = await W(e, t, n);
+		let u = await U(e, t, n);
 		if ("code" in u) return {
 			status: "unknown",
 			reason: u
 		};
 		if (!u.ops.some((e) => e.kind === "image" || e.kind === "gradient")) return {
 			status: "unknown",
-			reason: H("no-background-found")
+			reason: V("no-background-found")
 		};
-		let d = K(a, l, u.ops, u.base);
+		let d = G(a, l, u.ops, u.base);
 		if ("code" in d) return {
 			status: "unknown",
 			reason: d
@@ -708,21 +708,21 @@ async function q(e, t, n = /* @__PURE__ */ new Map()) {
 	} catch {
 		return {
 			status: "unknown",
-			reason: H("measurement-error")
+			reason: V("measurement-error")
 		};
 	}
 }
-function J(e, t) {
+function q(e, t) {
 	return [
 		...e.any,
 		...e.all,
 		...e.none
 	].find((e) => e.id === t);
 }
-function Y(e) {
-	return J(e, "color-contrast")?.data?.messageKey;
+function J(e) {
+	return q(e, "color-contrast")?.data?.messageKey;
 }
-function ie(e) {
+function ae(e) {
 	switch (e) {
 		case "fgAlpha": return {
 			code: "measurement-error",
@@ -734,43 +734,43 @@ function ie(e) {
 		};
 		case "elmPartiallyObscured":
 		case "elmPartiallyObscuring":
-		case "bgOverlap": return H("overlay-element");
-		default: return H("measurement-error");
+		case "bgOverlap": return V("overlay-element");
+		default: return V("measurement-error");
 	}
 }
-function X(e, t) {
+function Y(e, t) {
 	return Object.assign(e, t);
 }
-function Z(e) {
+function X(e) {
 	return e.find((e) => e.id === "color-contrast");
 }
-function Q(e, t) {
+function Z(e, t) {
 	return {
 		...e,
 		nodes: t
 	};
 }
-async function ae(e, t) {
-	let n = Z(e.incomplete);
+async function oe(e, t) {
+	let n = X(e.incomplete);
 	if (!n || n.nodes.length === 0) return e;
 	let r = /* @__PURE__ */ new Map(), i = [], a = [], o = [];
 	for (let e of n.nodes) {
-		let n = Y(e);
+		let n = J(e);
 		if (!n || !T.has(n)) {
-			i.push(X(e, { reviewReason: ie(n) }));
+			i.push(Y(e, { reviewReason: ae(n) }));
 			continue;
 		}
 		let s = t.resolve(e.target);
 		if (!s) {
-			i.push(X(e, { reviewReason: H("no-geometry") }));
+			i.push(Y(e, { reviewReason: V("no-geometry") }));
 			continue;
 		}
-		let c = await q(s, t.mode, r);
+		let c = await K(s, t.mode, r);
 		if (c.status === "unknown") {
-			i.push(X(e, { reviewReason: c.reason }));
+			i.push(Y(e, { reviewReason: c.reason }));
 			continue;
 		}
-		X(e, { measured: {
+		Y(e, { measured: {
 			ratio: c.ratio,
 			required: c.required,
 			passed: c.status === "pass",
@@ -779,14 +779,14 @@ async function ae(e, t) {
 		} }), c.status === "pass" ? o.push(e) : a.push(e);
 	}
 	let s = e.incomplete.filter((e) => e !== n);
-	i.length > 0 && s.push(Q(n, i));
+	i.length > 0 && s.push(Z(n, i));
 	let c = (e, t) => {
 		if (t.length === 0) return e;
-		let r = Z(e);
+		let r = X(e);
 		return r ? e.map((e) => e === r ? {
 			...e,
 			nodes: [...e.nodes, ...t]
-		} : e) : [...e, Q(n, t)];
+		} : e) : [...e, Z(n, t)];
 	};
 	return {
 		...e,
@@ -797,7 +797,7 @@ async function ae(e, t) {
 }
 //#endregion
 //#region client/fullpage.ts
-var $ = class e {
+var Q = class e {
 	modifier;
 	placeholder;
 	constructor(e) {
@@ -845,9 +845,9 @@ var $ = class e {
 			t !== n && (e.value = n);
 		});
 	}
-};
-if (window.frameElement) {
-	window.frameElement.getAttribute("data-preview") === "true" && document.documentElement.classList.add("styleguide-preview"), window.frameElement.hasAttribute("data-modifier") && $.fromIframe();
+}, $ = window.frameElement ? window.frameElement.getAttribute("data-theme-class") : new URLSearchParams(window.location.search).get("theme");
+if ($ && document.documentElement.classList.add(...$.split(/\s+/).filter(Boolean)), window.frameElement) {
+	window.frameElement.getAttribute("data-preview") === "true" && document.documentElement.classList.add("styleguide-preview"), window.frameElement.hasAttribute("data-modifier") && Q.fromIframe();
 	let n = (e, t) => {
 		let n = /* @__PURE__ */ new Map();
 		return t.forEach((t) => {
@@ -862,7 +862,7 @@ if (window.frameElement) {
 				});
 			});
 		}), n;
-	}, o = (e) => a(e, i(), document.documentElement, (t, n) => ae(t, {
+	}, o = (e) => a(e, i(), document.documentElement, (t, n) => oe(t, {
 		mode: n,
 		resolve: (t) => e.utils.shadowSelect(t[t.length - 1])
 	}));
@@ -908,6 +908,6 @@ if (window.frameElement) {
 			targetMap: i
 		};
 	};
-} else new URLSearchParams(window.location.search).get("modifier") && $.fromUrl();
+} else new URLSearchParams(window.location.search).get("modifier") && Q.fromUrl();
 x(), window.querySelectorAnywhere = (e) => w(document, e);
 //#endregion

package/dist/styleguide-assets/{html-validator-DJGwslsw.js → html-validator-Cp2OkhS9.js}

@@ -1,7 +1,8 @@
 import { t as e } from "./code-highlight-Fm7cxf-E.js";
 import { n as t, t as n } from "./utils-DtB-AzJa.js";
 import { n as r } from "./shared-hGcWlnRM.js";
-import { a as i, c as a, i as o, n as s, o as c, s as l, t as u } from "./section-previews-D-Mr2eVX.js";
+import { a as i, i as a, n as o, o as s, r as c } from "./audit-runner-Ch009v98.js";
+import { n as l, t as u } from "./section-previews-V4M5aSu6.js";
 //#region lib/template-utils.ts
 var d = (e, t) => e ? t() : "";
 function f(e, t) {
@@ -65,11 +66,11 @@ async function g(g, _, v) {
 			}, 2e3);
 		}
 	};
-	let S = await l(b), { modifiers: C } = s(b.closest(u)), w = (await Promise.all(C.map(async (e) => {
+	let S = await i(b), { modifiers: C } = l(b.closest(u)), w = (await Promise.all(C.map(async (e) => {
 		try {
 			return {
 				iframe: e,
-				detail: await a(e)
+				detail: await s(e)
 			};
 		} catch (t) {
 			return console.error(`Modifier audit failed for "${e.getAttribute("data-modifier")}"`, t), null;
@@ -133,40 +134,40 @@ async function g(g, _, v) {
 			id: e.ruleId,
 			description: e.ruleDescription || e.message,
 			helpUrl: e.ruleUrl || "",
-			impact: c(e.severity.toString()),
+			impact: a(e.severity.toString()),
 			nodes: [{
 				type: "htmlvalidate",
 				selector: e.selector ?? void 0
 			}]
 		});
 	});
-	let k = (e, t, a) => {
-		let o = e.charAt(0).toUpperCase() + e.slice(1), s = [
+	let k = (e, t, i) => {
+		let a = e.charAt(0).toUpperCase() + e.slice(1), o = [
 			"critical",
 			"serious",
 			"moderate",
 			"minor"
-		], c = a.toSorted((e, t) => s.indexOf(e.impact || "minor") - s.indexOf(t.impact || "minor")), l = (e, t) => {
+		], s = i.toSorted((e, t) => o.indexOf(e.impact || "minor") - o.indexOf(t.impact || "minor")), l = (e, t) => {
 			if (e.isConnected) return;
 			let n = t.contentDocument?.querySelectorAll("template");
 			if (n) return Array.from(n).find((t) => t.content.contains(e));
 		}, u = (e, t) => {
-			let r = h(e), a = E[t] ?? E[0], o = e.target.map((e) => a.targetMap.get(e)).filter(Boolean);
-			return o.length === 0 ? `
+			let r = h(e), i = E[t] ?? E[0], a = e.target.map((e) => i.targetMap.get(e)).filter(Boolean);
+			return a.length === 0 ? `
           ${r}
           <span class="block font-mono py-1.5 text-[13px] text-styleguide-regular">
-            ${i(e.target)}
+            ${c(e.target)}
           </span>
         ` : `
         ${r}
-        ${f(o, (t) => {
-				let r = n.next().value, o = { element: t };
-				return o.templateParent = l(t, a.iframe), window.validator.referenceMap.set(r, o), `
+        ${f(a, (t) => {
+				let r = n.next().value, a = { element: t };
+				return a.templateParent = l(t, i.iframe), window.validator.referenceMap.set(r, a), `
             <button
                 class="block font-mono py-1.5 text-[13px] text-blue-600 text-sm cursor-pointer text-left"
                 onclick="window.validator.logReference(window.validator.referenceMap.get('${r}')); window.validator.logReferenceAlert(this)"
               >
-                ${i(e.target)}
+                ${c(e.target)}
             </button>
           `;
 			})}
@@ -193,20 +194,20 @@ async function g(g, _, v) {
       `;
 		};
 		return `
-      ${d(c.length > 0, () => `
+      ${d(s.length > 0, () => `
         <li>
           <details${["violations", "incomplete"].includes(e) ? " open" : ""}>
             <summary class="cursor-pointer">
               <h3 class="px-6 py-4 text-sm font-semibold leading-[1]">
                 <span class="mr-2" aria-hidden="true">${t}</span>
-                <span class="text-styleguide-highlight">${o}:</span>
-                <span class="ml-2">(${a.length})</span>        
+                <span class="text-styleguide-highlight">${a}:</span>
+                <span class="ml-2">(${i.length})</span>        
               </h3>
             </summary>
             
             <div class="px-6 pb-6 text-sm code-audit-container">
                <ol>
-                ${f(c, (t) => `
+                ${f(s, (t) => `
                   <li class="ml-6 border-b border-styleguide-border">
                     <details class="group">
                       <summary class="flex cursor-pointer group-open:text-styleguide-highlight justify-between items-center py-4 text-sm gap-2 transition">

package/dist/styleguide-assets/kss-modern-Cg1aeKi1.css

@@ -0,0 +1,3 @@
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:"Geist Sans";--font-mono:"Geist Mono";--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-900:oklch(39.6% .141 25.723);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-200:oklch(94.5% .129 101.54);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-yellow-900:oklch(42.1% .095 57.708);--color-green-700:oklch(52.7% .154 150.069);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-neutral-50:oklch(98.5% 0 0);--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--ease-out:cubic-bezier(0, 0, .2, 1);--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-styleguide:var(--styleguide-color-regular);--color-styleguide-highlight:var(--styleguide-color-highlight);--color-styleguide-theme-highlight:var(--styleguide-color-theme-highlight);--color-styleguide-bg:var(--styleguide-color-background);--color-styleguide-bg-highlight:var(--styleguide-color-background-highlight);--color-styleguide-border:var(--styleguide-color-border);--cp-neutral-0:#000;--cp-neutral-04:#0a0a0a;--cp-neutral-12:#1f1f1f;--cp-neutral-40:#666;--cp-neutral-64:#a3a3a3;--cp-neutral-92:#ebebeb;--cp-neutral-98:#fafafa;--cp-neutral-100:#fff;--cp-blue-11:#111827;--ca-theme-highlight:var(--cp-blue-11);--styleguide-color-background:light-dark(var(--cp-neutral-98),var(--cp-neutral-0));--styleguide-color-background-highlight:light-dark(var(--cp-neutral-100),var(--cp-neutral-04));--styleguide-color-highlight:light-dark(var(--ca-theme-highlight),var(--cp-neutral-100));--styleguide-color-regular:light-dark(var(--cp-neutral-40),var(--cp-neutral-64));--styleguide-color-border:light-dark(var(--cp-neutral-92),var(--cp-neutral-12))}:root{color-scheme:light dark}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-y-0\.5{inset-block:calc(var(--spacing) * .5)}.inset-y-2{inset-block:calc(var(--spacing) * 2)}.top-0{top:0}.top-1\/2{top:50%}.top-8{top:calc(var(--spacing) * 8)}.-right-0\.5{right:calc(var(--spacing) * -.5)}.right-0{right:0}.right-2\.5{right:calc(var(--spacing) * 2.5)}.-bottom-3{bottom:calc(var(--spacing) * -3)}.bottom-0{bottom:0}.-left-6{left:calc(var(--spacing) * -6)}.left-0{left:0}.isolate{isolation:isolate}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.z-100{z-index:100}.order-1{order:1}.order-2{order:2}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.mx-0{margin-inline:0}.mx-auto{margin-inline:auto}.my-6{margin-block:calc(var(--spacing) * 6)}.-mt-0\.5{margin-top:calc(var(--spacing) * -.5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.-mr-1{margin-right:calc(var(--spacing) * -1)}.-mr-2{margin-right:calc(var(--spacing) * -2)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.-mb-px{margin-bottom:-1px}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.ml-1{margin-left:var(--spacing)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-3{margin-left:calc(var(--spacing) * 3)}.ml-6{margin-left:calc(var(--spacing) * 6)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-video{aspect-ratio:var(--aspect-video)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-\[18px\]{width:18px;height:18px}.size-full{width:100%;height:100%}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-\[28px\]{height:28px}.h-\[53px\]{height:53px}.h-full{height:100%}.max-h-\[400px\]{max-height:400px}.max-h-\[calc\(100\%-2rem-53px-45px\)\]{max-height:calc(100% - 2rem - 98px)}.min-h-\[400px\]{min-height:400px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-\[260px\]{width:260px}.w-full{width:100%}.max-w-\[65ch\]{max-width:65ch}.max-w-\[1600px\]{max-width:1600px}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-0{min-width:0}.shrink-0{flex-shrink:0}.flex-grow-1,.grow{flex-grow:1}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-col-resize{cursor:col-resize}.cursor-copy{cursor:copy}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.scroll-mt-\[50px\]{scroll-margin-top:50px}.\!list-none{list-style-type:none!important}.appearance-none{appearance:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.scroll-smooth{scroll-behavior:smooth}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-2xl{border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl)}.rounded-b-2xl{border-bottom-right-radius:var(--radius-2xl);border-bottom-left-radius:var(--radius-2xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-blue-200{border-color:var(--color-blue-200)}.border-red-200{border-color:var(--color-red-200)}.border-styleguide-border{border-color:var(--color-styleguide-border)}.border-transparent{border-color:#0000}.border-yellow-300{border-color:var(--color-yellow-300)}.border-b-styleguide-border{border-bottom-color:var(--color-styleguide-border)}.bg-\[rgb\(242\,242\,242\)\]{background-color:#f2f2f2}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-red-100{background-color:var(--color-red-100)}.bg-styleguide-bg{background-color:var(--color-styleguide-bg)}.bg-styleguide-bg-highlight{background-color:var(--color-styleguide-bg-highlight)}.bg-transparent{background-color:#0000}.bg-yellow-50{background-color:var(--color-yellow-50)}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-\[4px\]{padding-top:4px}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-6{padding-right:calc(var(--spacing) * 6)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-\[3px\]{padding-bottom:3px}.\!pl-0{padding-left:0!important}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-6{padding-left:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.\!text-sm{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[18px\]{font-size:18px}.leading-\[1\]{--tw-leading:1;line-height:1}.leading-\[10px\]{--tw-leading:10px;line-height:10px}.leading-\[12px\]{--tw-leading:12px;line-height:12px}.leading-none{--tw-leading:1;line-height:1}.\!font-bold{--tw-font-weight:var(--font-weight-bold)!important;font-weight:var(--font-weight-bold)!important}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-all{word-break:break-all}.hyphens-auto{-webkit-hyphens:auto;hyphens:auto}.whitespace-nowrap{white-space:nowrap}.tab-1{tab-size:1}.tab-2{tab-size:2}.tab-3{tab-size:3}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-green-700{color:var(--color-green-700)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-800{color:var(--color-red-800)}.text-styleguide{color:var(--color-styleguide)}.text-styleguide-highlight{color:var(--color-styleguide-highlight)}.text-styleguide-theme-highlight{color:var(--color-styleguide-theme-highlight)}.text-yellow-500{color:var(--color-yellow-500)}.text-yellow-800{color:var(--color-yellow-800)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-60{opacity:.6}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.saturate-0{--tw-saturate:saturate(0%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-400{--tw-duration:.4s;transition-duration:.4s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}.group-open\:block:is(:where(.group):is([open],:popover-open,:open) *){display:block}.group-open\:hidden:is(:where(.group):is([open],:popover-open,:open) *){display:none}.group-open\:rotate-90:is(:where(.group):is([open],:popover-open,:open) *){rotate:90deg}.group-open\:text-styleguide-highlight:is(:where(.group):is([open],:popover-open,:open) *){color:var(--color-styleguide-highlight)}@media (hover:hover){.group-hover\:-translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-px:is(:where(.group):hover *){--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:-translate-y-px:is(:where(.group):hover *){--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\/externallink\:translate-x-px:is(:where(.group\/externallink):hover *){--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/externallink\:-translate-y-px:is(:where(.group\/externallink):hover *){--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/figma\:saturate-100:is(:where(.group\/figma):hover *){--tw-saturate:saturate(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.group-hover\/link\:translate-x-px:is(:where(.group\/link):hover *){--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/link\:-translate-y-px:is(:where(.group\/link):hover *){--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/phpstorm\:saturate-100:is(:where(.group\/phpstorm):hover *),.group-hover\/vscode\:saturate-100:is(:where(.group\/vscode):hover *){--tw-saturate:saturate(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.group-focus\:-translate-x-0\.5:is(:where(.group):focus *){--tw-translate-x:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-focus\:translate-x-0\.5:is(:where(.group):focus *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-focus\:translate-x-px:is(:where(.group):focus *){--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-focus\:-translate-y-px:is(:where(.group):focus *){--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-focus\:opacity-100:is(:where(.group):focus *){opacity:1}.group-focus\/externallink\:translate-x-px:is(:where(.group\/externallink):focus *),.group-focus\/link\:translate-x-px:is(:where(.group\/link):focus *){--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-focus\/link\:-translate-y-px:is(:where(.group\/link):focus *){--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-checked\:saturate-100:is(:where(.peer):checked~*){--tw-saturate:saturate(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop\:hidden::backdrop{display:none}.after\:pointer-events-none:after{content:var(--tw-content);pointer-events:none}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-x-0:after{content:var(--tw-content);inset-inline:0}.after\:bottom-0:after{content:var(--tw-content);bottom:0}.after\:h-\[80\%\]:after{content:var(--tw-content);height:80%}.after\:h-\[120px\]:after{content:var(--tw-content);height:120px}.after\:w-1:after{content:var(--tw-content);width:var(--spacing)}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:bg-current:after{content:var(--tw-content);background-color:currentColor}.after\:bg-gradient-to-t:after{content:var(--tw-content);--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.after\:from-styleguide-bg:after{content:var(--tw-content);--tw-gradient-from:var(--color-styleguide-bg);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.after\:to-transparent:after{content:var(--tw-content);--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.after\:opacity-0:after{content:var(--tw-content);opacity:0}.after\:transition-opacity:after{content:var(--tw-content);transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.after\:duration-150:after{content:var(--tw-content);--tw-duration:.15s;transition-duration:.15s}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}@media (hover:hover){.group-hover\/resize\:after\:opacity-\[0\.12\]:is(:where(.group\/resize):hover *):after{content:var(--tw-content);opacity:.12}}.group-\[\.is-resized\]\/resize\:after\:opacity-\[0\.12\]:is(:where(.group\/resize).is-resized *):after{content:var(--tw-content);opacity:.12}.group-\[\.is-resizing\]\/resize\:after\:opacity-\[0\.3\]:is(:where(.group\/resize).is-resizing *):after{content:var(--tw-content);opacity:.3}@media (hover:hover){.hover\:border-styleguide-border:hover{border-color:var(--color-styleguide-border)}.hover\:bg-\[rgb\(242\,242\,242\)\]:hover{background-color:#f2f2f2}.hover\:bg-blue-100:hover{background-color:var(--color-blue-100)}.hover\:bg-styleguide-bg-highlight:hover{background-color:var(--color-styleguide-bg-highlight)}.hover\:text-styleguide-highlight:hover{color:var(--color-styleguide-highlight)}.hover\:after\:opacity-\[0\.3\]:hover:after{content:var(--tw-content);opacity:.3}}.focus\:border-styleguide-border:focus{border-color:var(--color-styleguide-border)}.focus\:bg-\[rgb\(242\,242\,242\)\]:focus{background-color:#f2f2f2}.focus\:text-styleguide-highlight:focus{color:var(--color-styleguide-highlight)}.focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-blue-600:focus-visible{outline-color:var(--color-blue-600)}.active\:scale-90:active{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-\[0\.96\]:active{scale:.96}.aria-selected\:text-styleguide-highlight[aria-selected=true]{color:var(--color-styleguide-highlight)}@media not all and (width>=40rem){.max-sm\:max-h-none{max-height:none}}@media (width>=1220px){.min-\[1220px\]\:mx-auto{margin-inline:auto}}@media (width>=1222px){.min-\[1222px\]\:border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}}@media (width>=48rem){.md\:not-sr-only{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.md\:top-12{top:calc(var(--spacing) * 12)}.md\:bottom-auto{bottom:auto}.md\:left-1\/2{left:50%}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:inline-block{display:inline-block}.md\:inline-flex{display:inline-flex}.md\:h-auto{height:auto}.md\:max-h-\[85dvh\]{max-height:85dvh}.md\:max-h-\[calc\(100\%-5rem\)\]{max-height:calc(100% - 5rem)}.md\:max-h-none{max-height:none}.md\:min-h-0{min-height:0}.md\:min-h-\[250px\]{min-height:250px}.md\:w-\[calc\(100\%-260px\)\]{width:calc(100% - 260px)}.md\:max-w-\[720px\]{max-width:720px}.md\:min-w-\[150px\]{min-width:150px}.md\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:justify-between{justify-content:space-between}.md\:gap-x-10{column-gap:calc(var(--spacing) * 10)}.md\:gap-y-14{row-gap:calc(var(--spacing) * 14)}.md\:rounded-2xl{border-radius:var(--radius-2xl)}.md\:rounded-md{border-radius:var(--radius-md)}.md\:px-2{padding-inline:calc(var(--spacing) * 2)}.md\:px-10{padding-inline:calc(var(--spacing) * 10)}.md\:py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.open\:md\:flex:is([open],:popover-open,:open){display:flex}.open\:md\:flex-col:is([open],:popover-open,:open){flex-direction:column}}@media (width>=64rem){.lg\:top-24{top:calc(var(--spacing) * 24)}.lg\:max-h-\[calc\(100\%-8rem\)\]{max-height:calc(100% - 8rem)}}@media (width>=80rem){.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@container (width>=28rem){.\@md\:inline-flex{display:inline-flex}}@container (width>=32rem){.\@lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@container (width>=36rem){.\@xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@container (width>=42rem){.\@2xl\:inline-block{display:inline-block}}.dark\:border-blue-800:is(.theme-dark *){border-color:var(--color-blue-800)}.dark\:border-blue-900\/40:is(.theme-dark *){border-color:#1c398e66}@supports (color:color-mix(in lab, red, red)){.dark\:border-blue-900\/40:is(.theme-dark *){border-color:color-mix(in oklab, var(--color-blue-900) 40%, transparent)}}.dark\:border-red-900\/40:is(.theme-dark *){border-color:#82181a66}@supports (color:color-mix(in lab, red, red)){.dark\:border-red-900\/40:is(.theme-dark *){border-color:color-mix(in oklab, var(--color-red-900) 40%, transparent)}}.dark\:border-yellow-900\/40:is(.theme-dark *){border-color:#733e0a66}@supports (color:color-mix(in lab, red, red)){.dark\:border-yellow-900\/40:is(.theme-dark *){border-color:color-mix(in oklab, var(--color-yellow-900) 40%, transparent)}}.dark\:bg-\[rgb\(26\,26\,26\)\]:is(.theme-dark *){background-color:#1a1a1a}.dark\:bg-blue-900\/10:is(.theme-dark *){background-color:#1c398e1a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-900\/10:is(.theme-dark *){background-color:color-mix(in oklab, var(--color-blue-900) 10%, transparent)}}.dark\:bg-blue-900\/20:is(.theme-dark *){background-color:#1c398e33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-900\/20:is(.theme-dark *){background-color:color-mix(in oklab, var(--color-blue-900) 20%, transparent)}}.dark\:bg-red-900\/20:is(.theme-dark *){background-color:#82181a33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-red-900\/20:is(.theme-dark *){background-color:color-mix(in oklab, var(--color-red-900) 20%, transparent)}}.dark\:bg-yellow-900\/20:is(.theme-dark *){background-color:#733e0a33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-yellow-900\/20:is(.theme-dark *){background-color:color-mix(in oklab, var(--color-yellow-900) 20%, transparent)}}.dark\:pb-6:is(.theme-dark *){padding-bottom:calc(var(--spacing) * 6)}.dark\:text-blue-100:is(.theme-dark *){color:var(--color-blue-100)}.dark\:text-blue-200:is(.theme-dark *){color:var(--color-blue-200)}.dark\:text-red-200:is(.theme-dark *){color:var(--color-red-200)}.dark\:text-yellow-200:is(.theme-dark *){color:var(--color-yellow-200)}@media (hover:hover){.dark\:hover\:bg-\[rgb\(26\,26\,26\)\]:is(.theme-dark *):hover{background-color:#1a1a1a}.dark\:hover\:bg-blue-900\/20:is(.theme-dark *):hover{background-color:#1c398e33}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-blue-900\/20:is(.theme-dark *):hover{background-color:color-mix(in oklab, var(--color-blue-900) 20%, transparent)}}}.dark\:focus\:bg-\[rgb\(26\,26\,26\)\]:is(.theme-dark *):focus{background-color:#1a1a1a}.\[\&_\*\]\:\!text-blue-700 *{color:var(--color-blue-700)!important}.\[\&_\*\]\:\!text-red-700 *{color:var(--color-red-700)!important}.\[\&_\*\]\:\!text-yellow-700 *{color:var(--color-yellow-700)!important}.\[\&_\*\]\:dark\:\!text-blue-300 :is(.theme-dark *){color:var(--color-blue-300)!important}.\[\&_\*\]\:dark\:\!text-red-300 :is(.theme-dark *){color:var(--color-red-300)!important}.\[\&_\*\]\:dark\:\!text-yellow-300 :is(.theme-dark *){color:var(--color-yellow-300)!important}.\[\&\.is-resizing_iframe\]\:pointer-events-none.is-resizing iframe{pointer-events:none}.\[\&\>i\]\:size-\[24px\]>i{width:24px;height:24px}.\[\&\>i\]\:text-\[24px\]>i{font-size:24px}.\[\&\>i\]\:leading-\[1em\]>i{--tw-leading:1em;line-height:1em}.\[\&\>img\]\:\!size-6>img,.\[\&\>svg\]\:\!size-6>svg{width:calc(var(--spacing) * 6)!important;height:calc(var(--spacing) * 6)!important}.\[\&\>svg\]\:h-full>svg{height:100%}.\[\&\>svg\]\:w-auto>svg{width:auto}.styleguide-section--large .\[\.styleguide-section--large_\&\]\:inline-block{display:inline-block}html{view-transition-name:none;scrollbar-gutter:stable}body:not(.allow-transitions) .transition{transition-duration:0s!important}body{visibility:hidden;background-color:var(--styleguide-color-background);color:var(--styleguide-color-regular)}body.js-loaded{visibility:visible}body.is-scrolling iframe{pointer-events:none}summary{list-style:none}summary::marker{display:none}summary::-webkit-details-marker{display:none}.theme-normal{color-scheme:light dark}.theme-light{color-scheme:light only}.theme-dark{color-scheme:dark only}body:not([data-os=mac]) .mac-only,body:not([data-os=windows],[data-os=linux]) .winlinux-only,body[data-is-mobile=true] .desktop-device-only{display:none}.theme-dark .shiki,.theme-dark .shiki span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration)!important;text-decoration:var(--shiki-dark-text-decoration)!important}.code-highlight pre.shiki.shiki-themes{background-color:#0000!important}:is(.theme-select,.editor-select) input[type=radio]:checked+label{border-radius:var(--radius-3xl);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:var(--color-styleguide-border)}:is(.theme-select,.editor-select) input[type=radio]:focus+label,:is(.theme-select,.editor-select) input[type=radio]+label:hover{outline-color:var(--color-blue-600)}.dialog-backdrop{-webkit-backdrop-filter:blur(3px)brightness(.7);backdrop-filter:blur(3px)brightness(.7);opacity:0;pointer-events:none;z-index:100;display:none;position:absolute;inset:0}.search-category,.search-category__item:not(.search-category__item--active){display:none}.search-category:has(.search-category__item--active){display:block}.search-category--hidden{display:none!important}.search-category__item--focused a{background-color:#f2f2f2}.search-category__item--focused a:is(.theme-dark *){background-color:#1a1a1a}.search-mark{color:var(--color-styleguide-highlight);--search-mark-bg:var(--color-styleguide-theme-highlight);border-radius:3px}@supports (color:color-mix(in lab, red, red)){.search-mark{--search-mark-bg:color-mix(in oklab, var(--color-styleguide-theme-highlight) 18%, transparent)}}.search-mark{background-color:var(--search-mark-bg);box-shadow:0 0 0 2px var(--search-mark-bg)}.search-code{padding-inline:var(--spacing);font-family:var(--font-mono);color:var(--color-styleguide-highlight);background-color:color-mix(in srgb, light-dark(var(--cp-neutral-40),var(--cp-neutral-64)) 10%, transparent);border-radius:3px;font-size:.85em}@supports (color:color-mix(in lab, red, red)){.search-code{background-color:color-mix(in oklab, var(--color-styleguide) 10%, transparent)}}.search-code.search-mark{background-color:var(--color-styleguide-theme-highlight)}@supports (color:color-mix(in lab, red, red)){.search-code.search-mark{background-color:color-mix(in oklab, var(--color-styleguide-theme-highlight) 22%, transparent)}}.search-code.search-mark{box-shadow:none}[data-type=search-hint]:empty{display:none}[data-type=search-hint]:not(:empty):before{content:"↳";margin-right:var(--spacing);color:var(--color-styleguide)}.icon-search-list__item-copy-icon{pointer-events:none;--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y);opacity:0;position:absolute;left:50%}.menu-item{border-radius:var(--radius-md);padding:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));display:block}@media (hover:hover){.menu-item:hover{background-color:#f2f2f2}}.menu-item:focus{background-color:#f2f2f2}@media (hover:hover){.menu-item:is(.theme-dark *):hover{background-color:#1a1a1a}}.menu-item:is(.theme-dark *):focus{background-color:#1a1a1a}.menu-item--active{background-color:#f2f2f2}.menu-item--active:is(.theme-dark *){background-color:#1a1a1a}[class*=menu-item--status-]{align-items:center;gap:calc(var(--spacing) * 4);grid-template-columns:1fr auto;display:grid}.menu-item--status-complete:after{content:"🟢"}.menu-item--status-progress:after{content:"🚧"}.menu-item--status-feedback:after{content:"💬"}.menu-item--status-pending:after{content:"🔴"}.preview-iframe{border:none;width:100%;min-height:0;overflow-y:hidden}.c-toast{right:calc(var(--spacing) * 4);bottom:calc(var(--spacing) * 4);left:calc(var(--spacing) * 4);justify-content:center;align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-styleguide-border);background-color:var(--color-styleguide-bg-highlight);padding:calc(var(--spacing) * 4);font-family:var(--font-mono);--tw-font-weight:var(--font-weight-semibold);font-size:12px;font-weight:var(--font-weight-semibold);--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);display:flex;position:fixed}.c-toast:after{content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);inset-inline:0;width:100%;height:5px;position:absolute;top:-5px}@media (width>=48rem){.c-toast{justify-content:flex-start;left:auto}}.c-toast>span{color:var(--color-styleguide-highlight)}.markdown-container{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.markdown-container>:first-child:not(p){margin-top:1em}.markdown-container>:not(pre){max-width:65ch}.markdown-container>:not(:last-child){margin-bottom:calc(var(--spacing) * 4)}.markdown-container :is(h1,h2,h3,h4,h5,h6,strong){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-styleguide-highlight)}.markdown-container :is(h1,h2,h3,h4,h5,h6):has(+p){margin-bottom:calc(var(--spacing) * 1.5)!important}.markdown-container :is(h1,h2,h3,h4,h5,h6):not(:first-child){margin-top:1.5em}.markdown-container :is(h1,h2){font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.markdown-container h3{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.markdown-container h4{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.markdown-container :is(h5,h6){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.markdown-container a{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-styleguide-theme-highlight)}.markdown-container a:after{margin-bottom:-1px;margin-left:var(--spacing);background-color:var(--color-styleguide-theme-highlight);--icon-size:1em;content:"";inline-size:var(--icon-size);block-size:var(--icon-size);background-size:contain;display:inline-block;-webkit-mask-image:url(./icons/external-link.svg);mask-image:url(./icons/external-link.svg)}.markdown-container :is(ul,ol){padding-left:calc(var(--spacing) * 5)}.markdown-container ul{list-style-type:disc}.markdown-container ol{list-style-type:decimal}.markdown-container :is(.shiki,pre:not(.shiki)){max-width:83ch;padding-inline:calc(var(--spacing) * 6);padding-block:calc(var(--spacing) * 5)}.markdown-container :not(:is(pre))>code{border-radius:var(--radius-md);padding-inline:calc(var(--spacing) * 1.5);padding-block:calc(var(--spacing) * .5);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-styleguide-highlight);background-color:#f2f2f2}.markdown-container :not(:is(pre))>code:is(.theme-dark *){background-color:#1a1a1a}.markdown-container table{border-collapse:collapse;text-align:left;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.markdown-container :is(th,td){border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-styleguide-border);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);vertical-align:top}.markdown-container th{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-styleguide-highlight)}.markdown-container thead th{background-color:var(--color-styleguide-bg-highlight)}.markdown-container tbody tr:last-child :is(th,td){border-bottom-style:var(--tw-border-style);border-bottom-width:0}:is(.markdown-container,.code-audit-container) :is(.shiki,pre:not(.shiki)){border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-styleguide-border);background-color:var(--color-styleguide-bg-highlight);max-width:100%;padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));overflow-x:auto}:is(.markdown-container,.code-audit-container) :is(.shiki,pre:not(.shiki))>code{display:inline-block}}@font-face{font-family:Geist Mono;font-style:normal;font-display:swap;font-weight:300;src:url(/styleguide-assets/fonts/geist-mono-latin-300-normal.woff2)format("woff2")}@font-face{font-family:Geist Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/styleguide-assets/fonts/geist-mono-latin-400-normal.woff2)format("woff2")}@font-face{font-family:Geist Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/styleguide-assets/fonts/geist-mono-latin-600-normal.woff2)format("woff2")}@font-face{font-family:Geist Sans;font-style:normal;font-display:swap;font-weight:300;src:url(/styleguide-assets/fonts/geist-sans-latin-300-normal.woff2)format("woff2")}@font-face{font-family:Geist Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/styleguide-assets/fonts/geist-sans-latin-400-normal.woff2)format("woff2")}@font-face{font-family:Geist Sans;font-style:normal;font-display:swap;font-weight:600;src:url(/styleguide-assets/fonts/geist-sans-latin-600-normal.woff2)format("woff2")}body:not(.editor-vscode) .editor-vscode-only,body:not(.editor-phpstorm) .editor-phpstorm-only{display:none}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
+/*$vite$:1*/

package/dist/styleguide-assets/{preview-DEipbLLB.js → preview-CWqxR9nN.js}

@@ -1081,7 +1081,7 @@ q.addEventListener("keydown", Je), Y.forEach((e) => e.addEventListener("keydown"
 	let t = e.target, n = new URL(window.location.href), r = new URL(t.href);
 	n.pathname === r.pathname && n.search === r.search && await We();
 }), window.kssAudit = async (e) => {
-	let { runStyleguideAudit: t } = await import("./a11y-report-BgeWSrYe.js");
+	let { runStyleguideAudit: t } = await import("./a11y-report-DJQyYaLp.js");
 	return t(e);
 }, document.querySelectorAll(".styleguide-section").forEach((e) => {
 	new ResizeObserver(() => {
@@ -1097,7 +1097,7 @@ Xe.length > 0 && Xe.forEach((e) => {
 });
 var $ = document.querySelectorAll("[data-code-audit-iframe]"), Ze = document.querySelector("#code-audit-dialog"), Qe = document.querySelector(".dialog-backdrop");
 $.length > 0 && Ze && Qe && (async () => {
-	let { auditCode: e } = await import("./html-validator-DJGwslsw.js"), { show: t, close: n } = s(Ze, Qe);
+	let { auditCode: e } = await import("./html-validator-Cp2OkhS9.js"), { show: t, close: n } = s(Ze, Qe);
 	$.forEach((r) => r.addEventListener("click", async () => {
 		$.forEach((e) => e.setAttribute("aria-expanded", "false")), r.setAttribute("disabled", ""), await e(r, Ze, n), r.removeAttribute("disabled"), r.setAttribute("aria-expanded", "true"), await t(void 0, () => {
 			$.forEach((e) => {
@@ -1134,6 +1134,8 @@ window.addEventListener("scroll", () => {
 		document.body.classList.remove("is-scrolling");
 	}, 250);
 });
-var ot = document.querySelector(".editor-select");
-ot && import("./editor-select-DIZFtqe7.js").then(({ default: e }) => e(ot)).catch(console.error);
+var ot = document.querySelectorAll("[data-section-theme-select]");
+ot.length > 0 && import("./section-theme-select-ygaSXIuK.js").then(({ default: e }) => e(ot)).catch(console.error);
+var st = document.querySelector(".editor-select");
+st && import("./editor-select-DIZFtqe7.js").then(({ default: e }) => e(st)).catch(console.error);
 //#endregion

package/dist/styleguide-assets/section-previews-V4M5aSu6.js

@@ -0,0 +1,10 @@
+//#region client/lib/section-previews.ts
+var e = ".styleguide-section";
+function t(e) {
+	return {
+		base: e?.querySelector("iframe.preview-iframe:not([data-modifier])") ?? null,
+		modifiers: Array.from(e?.querySelectorAll("iframe.preview-iframe[data-modifier]") ?? [])
+	};
+}
+//#endregion
+export { t as n, e as t };

package/dist/styleguide-assets/section-theme-select-ygaSXIuK.js

@@ -0,0 +1,48 @@
+import { n as e, t } from "./section-previews-V4M5aSu6.js";
+//#region client/lib/section-theme-select.ts
+var n = "data-theme-class", r = "theme", i = "in2section-theme:";
+function a(e) {
+	return (e ?? "").split(/\s+/).filter(Boolean);
+}
+function o(e, t) {
+	let r = e.getAttribute(n);
+	t ? e.setAttribute(n, t) : e.removeAttribute(n);
+	let i = e.contentDocument?.documentElement;
+	i && (i.classList.remove(...a(r)), i.classList.add(...a(t)));
+}
+function s(e, t) {
+	e.querySelectorAll("a[href^=\"/fullpage-\"]").forEach((e) => {
+		let n = new URL(e.getAttribute("href"), window.location.href);
+		t ? n.searchParams.set(r, t) : n.searchParams.delete(r), e.setAttribute("href", `${n.pathname}${n.search}${n.hash}`);
+	});
+}
+function c(e) {
+	try {
+		return localStorage.getItem(e);
+	} catch {
+		return null;
+	}
+}
+function l(e, t) {
+	try {
+		t ? localStorage.setItem(e, t) : localStorage.removeItem(e);
+	} catch {}
+}
+function u(e, t) {
+	return Array.from(e.options).some((e) => e.value === t);
+}
+function d(n) {
+	for (let r of n) {
+		let n = r.closest(t);
+		if (!n) continue;
+		let a = `${i}${n.getAttribute("data-section-reference") ?? n.id}`, d = (t) => {
+			let { base: r, modifiers: i } = e(n);
+			(r ? [r, ...i] : i).forEach((e) => o(e, t)), s(n, t);
+		}, f = c(a);
+		f && u(r, f) && (r.value = f), r.value && d(r.value), r.addEventListener("change", () => {
+			l(a, r.value), d(r.value);
+		});
+	}
+}
+//#endregion
+export { d as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kss-modern",
   "type": "module",
-  "version": "1.3.0-beta.2",
+  "version": "1.3.0",
   "description": "Modern KSS compatible styleguide generator",
   "keywords": [
     "kss",

package/dist/styleguide-assets/kss-modern-BJ971T05.css

@@ -1,3 +0,0 @@
-/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:"Geist Sans";--font-mono:"Geist Mono";--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-900:oklch(39.6% .141 25.723);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-200:oklch(94.5% .129 101.54);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-yellow-900:oklch(42.1% .095 57.708);--color-green-700:oklch(52.7% .154 150.069);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-neutral-50:oklch(98.5% 0 0);--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--ease-out:cubic-bezier(0, 0, .2, 1);--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-styleguide:var(--styleguide-color-regular);--color-styleguide-highlight:var(--styleguide-color-highlight);--color-styleguide-theme-highlight:var(--styleguide-color-theme-highlight);--color-styleguide-bg:var(--styleguide-color-background);--color-styleguide-bg-highlight:var(--styleguide-color-background-highlight);--color-styleguide-border:var(--styleguide-color-border);--cp-neutral-0:#000;--cp-neutral-04:#0a0a0a;--cp-neutral-12:#1f1f1f;--cp-neutral-40:#666;--cp-neutral-64:#a3a3a3;--cp-neutral-92:#ebebeb;--cp-neutral-98:#fafafa;--cp-neutral-100:#fff;--cp-blue-11:#111827;--ca-theme-highlight:var(--cp-blue-11);--styleguide-color-background:light-dark(var(--cp-neutral-98),var(--cp-neutral-0));--styleguide-color-background-highlight:light-dark(var(--cp-neutral-100),var(--cp-neutral-04));--styleguide-color-highlight:light-dark(var(--ca-theme-highlight),var(--cp-neutral-100));--styleguide-color-regular:light-dark(var(--cp-neutral-40),var(--cp-neutral-64));--styleguide-color-border:light-dark(var(--cp-neutral-92),var(--cp-neutral-12))}:root{color-scheme:light dark}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-y-0\.5{inset-block:calc(var(--spacing) * .5)}.inset-y-2{inset-block:calc(var(--spacing) * 2)}.top-0{top:0}.top-1\/2{top:50%}.top-8{top:calc(var(--spacing) * 8)}.-right-0\.5{right:calc(var(--spacing) * -.5)}.right-0{right:0}.-bottom-3{bottom:calc(var(--spacing) * -3)}.bottom-0{bottom:0}.-left-6{left:calc(var(--spacing) * -6)}.left-0{left:0}.isolate{isolation:isolate}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.z-100{z-index:100}.order-1{order:1}.order-2{order:2}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.mx-0{margin-inline:0}.mx-auto{margin-inline:auto}.my-6{margin-block:calc(var(--spacing) * 6)}.-mt-0\.5{margin-top:calc(var(--spacing) * -.5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.-mr-1{margin-right:calc(var(--spacing) * -1)}.-mr-2{margin-right:calc(var(--spacing) * -2)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.-mb-px{margin-bottom:-1px}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.ml-1{margin-left:var(--spacing)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-3{margin-left:calc(var(--spacing) * 3)}.ml-6{margin-left:calc(var(--spacing) * 6)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-video{aspect-ratio:var(--aspect-video)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-\[18px\]{width:18px;height:18px}.size-full{width:100%;height:100%}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-\[28px\]{height:28px}.h-\[53px\]{height:53px}.h-full{height:100%}.max-h-\[400px\]{max-height:400px}.max-h-\[calc\(100\%-2rem-53px-45px\)\]{max-height:calc(100% - 2rem - 98px)}.min-h-\[400px\]{min-height:400px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-\[260px\]{width:260px}.w-full{width:100%}.max-w-\[65ch\]{max-width:65ch}.max-w-\[1600px\]{max-width:1600px}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-0{min-width:0}.shrink-0{flex-shrink:0}.flex-grow-1,.grow{flex-grow:1}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-col-resize{cursor:col-resize}.cursor-copy{cursor:copy}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.scroll-mt-\[50px\]{scroll-margin-top:50px}.\!list-none{list-style-type:none!important}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.scroll-smooth{scroll-behavior:smooth}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-2xl{border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl)}.rounded-b-2xl{border-bottom-right-radius:var(--radius-2xl);border-bottom-left-radius:var(--radius-2xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-blue-200{border-color:var(--color-blue-200)}.border-red-200{border-color:var(--color-red-200)}.border-styleguide-border{border-color:var(--color-styleguide-border)}.border-transparent{border-color:#0000}.border-yellow-300{border-color:var(--color-yellow-300)}.border-b-styleguide-border{border-bottom-color:var(--color-styleguide-border)}.bg-\[rgb\(242\,242\,242\)\]{background-color:#f2f2f2}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-red-100{background-color:var(--color-red-100)}.bg-styleguide-bg{background-color:var(--color-styleguide-bg)}.bg-styleguide-bg-highlight{background-color:var(--color-styleguide-bg-highlight)}.bg-transparent{background-color:#0000}.bg-yellow-50{background-color:var(--color-yellow-50)}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-\[4px\]{padding-top:4px}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-6{padding-right:calc(var(--spacing) * 6)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-\[3px\]{padding-bottom:3px}.\!pl-0{padding-left:0!important}.pl-6{padding-left:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.\!text-sm{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[18px\]{font-size:18px}.leading-\[1\]{--tw-leading:1;line-height:1}.leading-\[10px\]{--tw-leading:10px;line-height:10px}.leading-\[12px\]{--tw-leading:12px;line-height:12px}.leading-none{--tw-leading:1;line-height:1}.\!font-bold{--tw-font-weight:var(--font-weight-bold)!important;font-weight:var(--font-weight-bold)!important}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-all{word-break:break-all}.hyphens-auto{-webkit-hyphens:auto;hyphens:auto}.whitespace-nowrap{white-space:nowrap}.tab-1{tab-size:1}.tab-2{tab-size:2}.tab-3{tab-size:3}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-green-700{color:var(--color-green-700)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-800{color:var(--color-red-800)}.text-styleguide{color:var(--color-styleguide)}.text-styleguide-highlight{color:var(--color-styleguide-highlight)}.text-styleguide-theme-highlight{color:var(--color-styleguide-theme-highlight)}.text-yellow-500{color:var(--color-yellow-500)}.text-yellow-800{color:var(--color-yellow-800)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-60{opacity:.6}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.saturate-0{--tw-saturate:saturate(0%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-400{--tw-duration:.4s;transition-duration:.4s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}.group-open\:block:is(:where(.group):is([open],:popover-open,:open) *){display:block}.group-open\:hidden:is(:where(.group):is([open],:popover-open,:open) *){display:none}.group-open\:rotate-90:is(:where(.group):is([open],:popover-open,:open) *){rotate:90deg}.group-open\:text-styleguide-highlight:is(:where(.group):is([open],:popover-open,:open) *){color:var(--color-styleguide-highlight)}@media (hover:hover){.group-hover\:-translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-px:is(:where(.group):hover *){--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:-translate-y-px:is(:where(.group):hover *){--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\/externallink\:translate-x-px:is(:where(.group\/externallink):hover *){--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/externallink\:-translate-y-px:is(:where(.group\/externallink):hover *){--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/figma\:saturate-100:is(:where(.group\/figma):hover *){--tw-saturate:saturate(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.group-hover\/link\:translate-x-px:is(:where(.group\/link):hover *){--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/link\:-translate-y-px:is(:where(.group\/link):hover *){--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/phpstorm\:saturate-100:is(:where(.group\/phpstorm):hover *),.group-hover\/vscode\:saturate-100:is(:where(.group\/vscode):hover *){--tw-saturate:saturate(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.group-focus\:-translate-x-0\.5:is(:where(.group):focus *){--tw-translate-x:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-focus\:translate-x-0\.5:is(:where(.group):focus *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-focus\:translate-x-px:is(:where(.group):focus *){--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-focus\:-translate-y-px:is(:where(.group):focus *){--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-focus\:opacity-100:is(:where(.group):focus *){opacity:1}.group-focus\/externallink\:translate-x-px:is(:where(.group\/externallink):focus *),.group-focus\/link\:translate-x-px:is(:where(.group\/link):focus *){--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-focus\/link\:-translate-y-px:is(:where(.group\/link):focus *){--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-checked\:saturate-100:is(:where(.peer):checked~*){--tw-saturate:saturate(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop\:hidden::backdrop{display:none}.after\:pointer-events-none:after{content:var(--tw-content);pointer-events:none}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-x-0:after{content:var(--tw-content);inset-inline:0}.after\:bottom-0:after{content:var(--tw-content);bottom:0}.after\:h-\[80\%\]:after{content:var(--tw-content);height:80%}.after\:h-\[120px\]:after{content:var(--tw-content);height:120px}.after\:w-1:after{content:var(--tw-content);width:var(--spacing)}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:bg-current:after{content:var(--tw-content);background-color:currentColor}.after\:bg-gradient-to-t:after{content:var(--tw-content);--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.after\:from-styleguide-bg:after{content:var(--tw-content);--tw-gradient-from:var(--color-styleguide-bg);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.after\:to-transparent:after{content:var(--tw-content);--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.after\:opacity-0:after{content:var(--tw-content);opacity:0}.after\:transition-opacity:after{content:var(--tw-content);transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.after\:duration-150:after{content:var(--tw-content);--tw-duration:.15s;transition-duration:.15s}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}@media (hover:hover){.group-hover\/resize\:after\:opacity-\[0\.12\]:is(:where(.group\/resize):hover *):after{content:var(--tw-content);opacity:.12}}.group-\[\.is-resized\]\/resize\:after\:opacity-\[0\.12\]:is(:where(.group\/resize).is-resized *):after{content:var(--tw-content);opacity:.12}.group-\[\.is-resizing\]\/resize\:after\:opacity-\[0\.3\]:is(:where(.group\/resize).is-resizing *):after{content:var(--tw-content);opacity:.3}@media (hover:hover){.hover\:border-styleguide-border:hover{border-color:var(--color-styleguide-border)}.hover\:bg-\[rgb\(242\,242\,242\)\]:hover{background-color:#f2f2f2}.hover\:bg-blue-100:hover{background-color:var(--color-blue-100)}.hover\:bg-styleguide-bg-highlight:hover{background-color:var(--color-styleguide-bg-highlight)}.hover\:text-styleguide-highlight:hover{color:var(--color-styleguide-highlight)}.hover\:after\:opacity-\[0\.3\]:hover:after{content:var(--tw-content);opacity:.3}}.focus\:border-styleguide-border:focus{border-color:var(--color-styleguide-border)}.focus\:bg-\[rgb\(242\,242\,242\)\]:focus{background-color:#f2f2f2}.focus\:text-styleguide-highlight:focus{color:var(--color-styleguide-highlight)}.focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.active\:scale-90:active{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-\[0\.96\]:active{scale:.96}.aria-selected\:text-styleguide-highlight[aria-selected=true]{color:var(--color-styleguide-highlight)}@media not all and (width>=40rem){.max-sm\:max-h-none{max-height:none}}@media (width>=1220px){.min-\[1220px\]\:mx-auto{margin-inline:auto}}@media (width>=1222px){.min-\[1222px\]\:border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}}@media (width>=48rem){.md\:not-sr-only{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.md\:top-12{top:calc(var(--spacing) * 12)}.md\:bottom-auto{bottom:auto}.md\:left-1\/2{left:50%}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:inline-block{display:inline-block}.md\:inline-flex{display:inline-flex}.md\:h-auto{height:auto}.md\:max-h-\[85dvh\]{max-height:85dvh}.md\:max-h-\[calc\(100\%-5rem\)\]{max-height:calc(100% - 5rem)}.md\:max-h-none{max-height:none}.md\:min-h-0{min-height:0}.md\:min-h-\[250px\]{min-height:250px}.md\:w-\[calc\(100\%-260px\)\]{width:calc(100% - 260px)}.md\:max-w-\[720px\]{max-width:720px}.md\:min-w-\[150px\]{min-width:150px}.md\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:justify-between{justify-content:space-between}.md\:gap-x-10{column-gap:calc(var(--spacing) * 10)}.md\:gap-y-14{row-gap:calc(var(--spacing) * 14)}.md\:rounded-2xl{border-radius:var(--radius-2xl)}.md\:rounded-md{border-radius:var(--radius-md)}.md\:px-2{padding-inline:calc(var(--spacing) * 2)}.md\:px-10{padding-inline:calc(var(--spacing) * 10)}.md\:py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.open\:md\:flex:is([open],:popover-open,:open){display:flex}.open\:md\:flex-col:is([open],:popover-open,:open){flex-direction:column}}@media (width>=64rem){.lg\:top-24{top:calc(var(--spacing) * 24)}.lg\:max-h-\[calc\(100\%-8rem\)\]{max-height:calc(100% - 8rem)}}@media (width>=80rem){.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@container (width>=28rem){.\@md\:inline-flex{display:inline-flex}}@container (width>=32rem){.\@lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@container (width>=36rem){.\@xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@container (width>=42rem){.\@2xl\:inline-block{display:inline-block}}.dark\:border-blue-800:is(.theme-dark *){border-color:var(--color-blue-800)}.dark\:border-blue-900\/40:is(.theme-dark *){border-color:#1c398e66}@supports (color:color-mix(in lab, red, red)){.dark\:border-blue-900\/40:is(.theme-dark *){border-color:color-mix(in oklab, var(--color-blue-900) 40%, transparent)}}.dark\:border-red-900\/40:is(.theme-dark *){border-color:#82181a66}@supports (color:color-mix(in lab, red, red)){.dark\:border-red-900\/40:is(.theme-dark *){border-color:color-mix(in oklab, var(--color-red-900) 40%, transparent)}}.dark\:border-yellow-900\/40:is(.theme-dark *){border-color:#733e0a66}@supports (color:color-mix(in lab, red, red)){.dark\:border-yellow-900\/40:is(.theme-dark *){border-color:color-mix(in oklab, var(--color-yellow-900) 40%, transparent)}}.dark\:bg-\[rgb\(26\,26\,26\)\]:is(.theme-dark *){background-color:#1a1a1a}.dark\:bg-blue-900\/10:is(.theme-dark *){background-color:#1c398e1a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-900\/10:is(.theme-dark *){background-color:color-mix(in oklab, var(--color-blue-900) 10%, transparent)}}.dark\:bg-blue-900\/20:is(.theme-dark *){background-color:#1c398e33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-900\/20:is(.theme-dark *){background-color:color-mix(in oklab, var(--color-blue-900) 20%, transparent)}}.dark\:bg-red-900\/20:is(.theme-dark *){background-color:#82181a33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-red-900\/20:is(.theme-dark *){background-color:color-mix(in oklab, var(--color-red-900) 20%, transparent)}}.dark\:bg-yellow-900\/20:is(.theme-dark *){background-color:#733e0a33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-yellow-900\/20:is(.theme-dark *){background-color:color-mix(in oklab, var(--color-yellow-900) 20%, transparent)}}.dark\:pb-6:is(.theme-dark *){padding-bottom:calc(var(--spacing) * 6)}.dark\:text-blue-100:is(.theme-dark *){color:var(--color-blue-100)}.dark\:text-blue-200:is(.theme-dark *){color:var(--color-blue-200)}.dark\:text-red-200:is(.theme-dark *){color:var(--color-red-200)}.dark\:text-yellow-200:is(.theme-dark *){color:var(--color-yellow-200)}@media (hover:hover){.dark\:hover\:bg-\[rgb\(26\,26\,26\)\]:is(.theme-dark *):hover{background-color:#1a1a1a}.dark\:hover\:bg-blue-900\/20:is(.theme-dark *):hover{background-color:#1c398e33}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-blue-900\/20:is(.theme-dark *):hover{background-color:color-mix(in oklab, var(--color-blue-900) 20%, transparent)}}}.dark\:focus\:bg-\[rgb\(26\,26\,26\)\]:is(.theme-dark *):focus{background-color:#1a1a1a}.\[\&_\*\]\:\!text-blue-700 *{color:var(--color-blue-700)!important}.\[\&_\*\]\:\!text-red-700 *{color:var(--color-red-700)!important}.\[\&_\*\]\:\!text-yellow-700 *{color:var(--color-yellow-700)!important}.\[\&_\*\]\:dark\:\!text-blue-300 :is(.theme-dark *){color:var(--color-blue-300)!important}.\[\&_\*\]\:dark\:\!text-red-300 :is(.theme-dark *){color:var(--color-red-300)!important}.\[\&_\*\]\:dark\:\!text-yellow-300 :is(.theme-dark *){color:var(--color-yellow-300)!important}.\[\&\.is-resizing_iframe\]\:pointer-events-none.is-resizing iframe{pointer-events:none}.\[\&\>i\]\:size-\[24px\]>i{width:24px;height:24px}.\[\&\>i\]\:text-\[24px\]>i{font-size:24px}.\[\&\>i\]\:leading-\[1em\]>i{--tw-leading:1em;line-height:1em}.\[\&\>img\]\:\!size-6>img,.\[\&\>svg\]\:\!size-6>svg{width:calc(var(--spacing) * 6)!important;height:calc(var(--spacing) * 6)!important}.\[\&\>svg\]\:h-full>svg{height:100%}.\[\&\>svg\]\:w-auto>svg{width:auto}.styleguide-section--large .\[\.styleguide-section--large_\&\]\:inline-block{display:inline-block}html{view-transition-name:none;scrollbar-gutter:stable}body:not(.allow-transitions) .transition{transition-duration:0s!important}body{visibility:hidden;background-color:var(--styleguide-color-background);color:var(--styleguide-color-regular)}body.js-loaded{visibility:visible}body.is-scrolling iframe{pointer-events:none}summary{list-style:none}summary::marker{display:none}summary::-webkit-details-marker{display:none}.theme-normal{color-scheme:light dark}.theme-light{color-scheme:light only}.theme-dark{color-scheme:dark only}body:not([data-os=mac]) .mac-only,body:not([data-os=windows],[data-os=linux]) .winlinux-only,body[data-is-mobile=true] .desktop-device-only{display:none}.theme-dark .shiki,.theme-dark .shiki span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration)!important;text-decoration:var(--shiki-dark-text-decoration)!important}.code-highlight pre.shiki.shiki-themes{background-color:#0000!important}:is(.theme-select,.editor-select) input[type=radio]:checked+label{border-radius:var(--radius-3xl);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:var(--color-styleguide-border)}:is(.theme-select,.editor-select) input[type=radio]:focus+label,:is(.theme-select,.editor-select) input[type=radio]+label:hover{outline-color:var(--color-blue-600)}.dialog-backdrop{-webkit-backdrop-filter:blur(3px)brightness(.7);backdrop-filter:blur(3px)brightness(.7);opacity:0;pointer-events:none;z-index:100;display:none;position:absolute;inset:0}.search-category,.search-category__item:not(.search-category__item--active){display:none}.search-category:has(.search-category__item--active){display:block}.search-category--hidden{display:none!important}.search-category__item--focused a{background-color:#f2f2f2}.search-category__item--focused a:is(.theme-dark *){background-color:#1a1a1a}.search-mark{color:var(--color-styleguide-highlight);--search-mark-bg:var(--color-styleguide-theme-highlight);border-radius:3px}@supports (color:color-mix(in lab, red, red)){.search-mark{--search-mark-bg:color-mix(in oklab, var(--color-styleguide-theme-highlight) 18%, transparent)}}.search-mark{background-color:var(--search-mark-bg);box-shadow:0 0 0 2px var(--search-mark-bg)}.search-code{padding-inline:var(--spacing);font-family:var(--font-mono);color:var(--color-styleguide-highlight);background-color:color-mix(in srgb, light-dark(var(--cp-neutral-40),var(--cp-neutral-64)) 10%, transparent);border-radius:3px;font-size:.85em}@supports (color:color-mix(in lab, red, red)){.search-code{background-color:color-mix(in oklab, var(--color-styleguide) 10%, transparent)}}.search-code.search-mark{background-color:var(--color-styleguide-theme-highlight)}@supports (color:color-mix(in lab, red, red)){.search-code.search-mark{background-color:color-mix(in oklab, var(--color-styleguide-theme-highlight) 22%, transparent)}}.search-code.search-mark{box-shadow:none}[data-type=search-hint]:empty{display:none}[data-type=search-hint]:not(:empty):before{content:"↳";margin-right:var(--spacing);color:var(--color-styleguide)}.icon-search-list__item-copy-icon{pointer-events:none;--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y);opacity:0;position:absolute;left:50%}.menu-item{border-radius:var(--radius-md);padding:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));display:block}@media (hover:hover){.menu-item:hover{background-color:#f2f2f2}}.menu-item:focus{background-color:#f2f2f2}@media (hover:hover){.menu-item:is(.theme-dark *):hover{background-color:#1a1a1a}}.menu-item:is(.theme-dark *):focus{background-color:#1a1a1a}.menu-item--active{background-color:#f2f2f2}.menu-item--active:is(.theme-dark *){background-color:#1a1a1a}[class*=menu-item--status-]{align-items:center;gap:calc(var(--spacing) * 4);grid-template-columns:1fr auto;display:grid}.menu-item--status-complete:after{content:"🟢"}.menu-item--status-progress:after{content:"🚧"}.menu-item--status-feedback:after{content:"💬"}.menu-item--status-pending:after{content:"🔴"}.preview-iframe{border:none;width:100%;min-height:0;overflow-y:hidden}.c-toast{right:calc(var(--spacing) * 4);bottom:calc(var(--spacing) * 4);left:calc(var(--spacing) * 4);justify-content:center;align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-styleguide-border);background-color:var(--color-styleguide-bg-highlight);padding:calc(var(--spacing) * 4);font-family:var(--font-mono);--tw-font-weight:var(--font-weight-semibold);font-size:12px;font-weight:var(--font-weight-semibold);--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);display:flex;position:fixed}.c-toast:after{content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);inset-inline:0;width:100%;height:5px;position:absolute;top:-5px}@media (width>=48rem){.c-toast{justify-content:flex-start;left:auto}}.c-toast>span{color:var(--color-styleguide-highlight)}.markdown-container{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.markdown-container>:first-child:not(p){margin-top:1em}.markdown-container>:not(pre){max-width:65ch}.markdown-container>:not(:last-child){margin-bottom:calc(var(--spacing) * 4)}.markdown-container :is(h1,h2,h3,h4,h5,h6,strong){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-styleguide-highlight)}.markdown-container :is(h1,h2,h3,h4,h5,h6):has(+p){margin-bottom:calc(var(--spacing) * 1.5)!important}.markdown-container :is(h1,h2,h3,h4,h5,h6):not(:first-child){margin-top:1.5em}.markdown-container :is(h1,h2){font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.markdown-container h3{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.markdown-container h4{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.markdown-container :is(h5,h6){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.markdown-container a{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-styleguide-theme-highlight)}.markdown-container a:after{margin-bottom:-1px;margin-left:var(--spacing);background-color:var(--color-styleguide-theme-highlight);--icon-size:1em;content:"";inline-size:var(--icon-size);block-size:var(--icon-size);background-size:contain;display:inline-block;-webkit-mask-image:url(./icons/external-link.svg);mask-image:url(./icons/external-link.svg)}.markdown-container :is(ul,ol){padding-left:calc(var(--spacing) * 5)}.markdown-container ul{list-style-type:disc}.markdown-container ol{list-style-type:decimal}.markdown-container :is(.shiki,pre:not(.shiki)){max-width:83ch;padding-inline:calc(var(--spacing) * 6);padding-block:calc(var(--spacing) * 5)}.markdown-container :not(:is(pre))>code{border-radius:var(--radius-md);padding-inline:calc(var(--spacing) * 1.5);padding-block:calc(var(--spacing) * .5);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-styleguide-highlight);background-color:#f2f2f2}.markdown-container :not(:is(pre))>code:is(.theme-dark *){background-color:#1a1a1a}.markdown-container table{border-collapse:collapse;text-align:left;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.markdown-container :is(th,td){border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-styleguide-border);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);vertical-align:top}.markdown-container th{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-styleguide-highlight)}.markdown-container thead th{background-color:var(--color-styleguide-bg-highlight)}.markdown-container tbody tr:last-child :is(th,td){border-bottom-style:var(--tw-border-style);border-bottom-width:0}:is(.markdown-container,.code-audit-container) :is(.shiki,pre:not(.shiki)){border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-styleguide-border);background-color:var(--color-styleguide-bg-highlight);max-width:100%;padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));overflow-x:auto}:is(.markdown-container,.code-audit-container) :is(.shiki,pre:not(.shiki))>code{display:inline-block}}@font-face{font-family:Geist Mono;font-style:normal;font-display:swap;font-weight:300;src:url(/styleguide-assets/fonts/geist-mono-latin-300-normal.woff2)format("woff2")}@font-face{font-family:Geist Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/styleguide-assets/fonts/geist-mono-latin-400-normal.woff2)format("woff2")}@font-face{font-family:Geist Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/styleguide-assets/fonts/geist-mono-latin-600-normal.woff2)format("woff2")}@font-face{font-family:Geist Sans;font-style:normal;font-display:swap;font-weight:300;src:url(/styleguide-assets/fonts/geist-sans-latin-300-normal.woff2)format("woff2")}@font-face{font-family:Geist Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/styleguide-assets/fonts/geist-sans-latin-400-normal.woff2)format("woff2")}@font-face{font-family:Geist Sans;font-style:normal;font-display:swap;font-weight:600;src:url(/styleguide-assets/fonts/geist-sans-latin-600-normal.woff2)format("woff2")}body:not(.editor-vscode) .editor-vscode-only,body:not(.editor-phpstorm) .editor-phpstorm-only{display:none}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
-/*$vite$:1*/