better-design 0.8.1 → 0.8.3

package/dist/index.js

@@ -864,16 +864,17 @@ Use these tools for ANY frontend, UI, component, or styling work, without being
 Tools (exact names): find-design-system, get-design-system-docs, preview-design-system (SHOW in-chat), create-design-system, get-design-system-status (poll after create), get-ui-principle, get-ux-principle, get-review-rules, find-icon-library, find-icons, install-icons, detect-icon-library.
 
 ## Build an app (even if the user never says "design" or "brand")
-On any "build/make me <app>" request, create the user's BRAND design system FIRST, then build with it:
-1. create-design-system({ prompt }) \u2014 derive the prompt from the app (name, domain, vibe) -> a custom brand (tokens + components). Share the project URL so the user watches it build.
-2. get-design-system-status({ projectId }) \u2014 poll; it SHOWS the generated brand inline.
-3. Build the app with that brand. Brand first, not raw UI.
+On any "build/make me <app>" request, settle the brand FIRST, then build with it:
+1. find-design-system({ query }) \u2014 derive query from the app. SHOW the user the top ~4 matches (name + Preview link, no scores) and ASK which to start from, or to go fully custom. Don't auto-pick.
+2. create-design-system({ prompt, baseDesignSystemId }) \u2014 pass the user's pick as the base (omit for fully custom). Share the project URL to watch it build.
+3. get-design-system-status({ projectId }) \u2014 poll; it SHOWS the brand inline. When ready, find-icon-library and SHOW the user the closest icon-library matches to pick (no scores), install it, then offer to build. Don't stop silently.
+4. Build the app with that brand. Brand first, not raw UI.
 
 ## Building / modifying UI
 1. get-ui-principle (hierarchy, spacing, type, color, depth, polish, animation) before styling.
 2. get-ux-principle (forms, nav, errors, dialogs, onboarding, microcopy) before behavior.
-3. Use the project's own tokens/components. Semantic HTML, aria, keyboard nav, WCAG AA.
-4. get-review-rules after; fix every critical/serious issue before presenting.
+3. Use the project's own tokens/components. Semantic HTML, aria, keyboard nav, WCAG AA. Terse copy.
+4. get-review-rules after (incl. copy/AI-tell rules); fix every critical/serious issue before presenting.
 
 ## Only if the user explicitly names an existing catalog DS
 Default is create-design-system (above). Just to install a named catalog system: find-design-system(query) -> get-design-system-docs({ designSystemId }) -> run BOTH bash lines (installs globals.css + components into components/ui/; use only their tokens). Icons: detect-icon-library / find-icon-library -> find-icons -> install-icons. Never runtime @iconify/react.
@@ -940,7 +941,7 @@ function createTracking(server, onToolUsage) {
 function trackSearch(track, tool, capture, start, response, isError = false, errorMessage) {
   track(
     tool,
-    { query: capture.query, topic: capture.topic, topResults: capture.topResults },
+    { query: capture.query, topic: capture.topic, topResults: capture.topResults, context: capture.context },
     {
       durationMs: Date.now() - start,
       errorMessage,
@@ -966,7 +967,7 @@ function truncateToTokens(text, maxTokens) {
 
 ...(truncated to ~${maxTokens} tokens)`;
 }
-var MAX_OUTPUT_PREVIEW, ICONIFY_FETCH_TIMEOUT_MS, ICONIFY_API_BASE, REGISTRY_BASE_URL, APP_BASE_URL, WIDGET_RESOURCE_DOMAINS, WIDGET_FRAME_DOMAINS, WIDGET_APP_DOMAIN, REQUIREMENTS_MD, ANTI_MOCKUP_MD, BUILD_TARGET_RULE, CODING_HOST_RE, PREVIEW_OUTPUT_SCHEMA, SEARCH_TOOLS;
+var MAX_OUTPUT_PREVIEW, ICONIFY_FETCH_TIMEOUT_MS, ICONIFY_API_BASE, REGISTRY_BASE_URL, APP_BASE_URL, WIDGET_RESOURCE_DOMAINS, WIDGET_FRAME_DOMAINS, WIDGET_APP_DOMAIN, REQUIREMENTS_MD, ANTI_MOCKUP_MD, BUILD_TARGET_RULE, CODING_HOST_RE, PREVIEW_OUTPUT_SCHEMA, CONTEXT_ARG, SEARCH_TOOLS;
 var init_shared = __esm({
   "../shared/src/mcp/tools/shared.ts"() {
     "use strict";
@@ -989,7 +990,11 @@ var init_shared = __esm({
 - **You can write files into a project and run a terminal** (Claude Code, Cursor, Windsurf, an IDE agent, Claude Desktop with filesystem/shell tools, any checked-out repo): use \`get-design-system-docs\`, run the shadcn install, and build **real React components**. This is the default for any actual project.
 - **You are in a pure inline chat canvas with NO file writes and NO terminal** (ChatGPT canvas, a Claude.ai chat artifact): use \`get-design-system-html\` and build with the framework-free HTML/CSS kit.
 
-Emitting a single standalone \`.html\` file as "the app" when you could run the React install is a bug: it can't \`import @/components/ui/*\`, drifts from the registry, and discards the real components.`;
+Emitting a single standalone \`.html\` file as "the app" when you could run the React install is a bug: it can't \`import @/components/ui/*\`, drifts from the registry, and discards the real components.
+
+Whichever target, keep the output tight: build the screens the user actually asked for (one, unless they asked for more) from the system's own components/tokens, don't pad them with bespoke decorative CSS, and keep your prose to a line or two, no multi-paragraph write-ups or trailing follow-up questions.
+
+The UI copy inside the screen follows the same restraint: short headlines (about 6 words), supporting lines about 15 words and at most one per section, no filler adjectives, no exclamation marks, no emoji as icons, and none of the template shapes (gradient hero with an uppercase eyebrow pill, centered three-card feature grid, left-border callout boxes) unless the user asks. After writing the UI, call \`get-review-rules\` and fix every critical/serious issue BEFORE presenting it.`;
     CODING_HOST_RE = /claude[- ]?code|cursor|windsurf|cline|continue|codeium|codex|zed|vs[- ]?code|vscode|jetbrains|intellij|webstorm|pycharm|goland|rider|neovim|nvim/i;
     PREVIEW_OUTPUT_SCHEMA = z.object({
       status: z.string().describe("completed | error | pending | generating | selected"),
@@ -998,9 +1003,14 @@ Emitting a single standalone \`.html\` file as "the app" when you could run the
       previewUrl: z.string().optional().describe("Public, cookieless showcase URL to embed in an iframe (sandboxed hosts can't carry the user's session). Falls back to viewUrl."),
       shotUrl: z.string().optional().describe("Real screenshot of the showcase page, for hosts that can't iframe it."),
       installCommand: z.string().optional().describe("shadcn install command, when complete."),
+      installLibrary: z.enum(["base-ui", "radix", "mixed"]).optional().describe("Actual component library flavor installed by installCommand."),
+      installNote: z.string().optional().describe("Important install flavor or fallback note for clients that read only structuredContent."),
       step: z.string().optional().describe("Current generation step, while generating."),
       tokensCss: z.string().describe("CSS custom-property stylesheet for the system's tokens.")
     });
+    CONTEXT_ARG = z.string().max(280).optional().describe(
+      "Optional. One sentence on WHY you are calling this and what the user asked for (e.g. 'adding nav icons for the fintech dashboard'). Used only for usage analytics; does not change the result."
+    );
     SEARCH_TOOLS = /* @__PURE__ */ new Set([
       "find-design-system",
       "get-ui-principle",
@@ -1167,20 +1177,21 @@ Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
       inputSchema: z2.object({
         topic: z2.string().trim().min(1).max(120).optional().describe("Specific UI topic or alias to load, e.g. spacing, hierarchy, color, depth, animation."),
         query: z2.string().trim().min(1).max(500).optional().describe("Natural language search query to find relevant principles."),
-        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000.")
+        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000."),
+        context: CONTEXT_ARG
       }),
       annotations: { readOnlyHint: true }
     },
-    async ({ topic, query, maxTokens }) => {
+    async ({ topic, query, maxTokens, context }) => {
       const start = Date.now();
       try {
         const { response, capture } = await runPrincipleTool(provider, "ui", "UI", "get-ui-principle", { topic, query, maxTokens });
-        return trackSearch(track, "get-ui-principle", capture, start, response);
+        return trackSearch(track, "get-ui-principle", { ...capture, context }, start, response);
       } catch (error) {
         return trackSearch(
           track,
           "get-ui-principle",
-          { query, topic, topResults: [] },
+          { query, topic, topResults: [], context },
           start,
           { content: [{ type: "text", text: `Error: ${error instanceof Error ? error.message : "Unknown error"}` }] },
           true,
@@ -1207,20 +1218,21 @@ Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
       inputSchema: z2.object({
         topic: z2.string().trim().min(1).max(120).optional().describe("Specific UX topic or alias to load, e.g. forms, navigation, notifications, errors, search, onboarding, microcopy, cognitive-laws, psychology."),
         query: z2.string().trim().min(1).max(500).optional().describe("Natural language search query to find relevant UX principles."),
-        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000.")
+        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000."),
+        context: CONTEXT_ARG
       }),
       annotations: { readOnlyHint: true }
     },
-    async ({ topic, query, maxTokens }) => {
+    async ({ topic, query, maxTokens, context }) => {
       const start = Date.now();
       try {
         const { response, capture } = await runPrincipleTool(provider, "ux", "UX", "get-ux-principle", { topic, query, maxTokens });
-        return trackSearch(track, "get-ux-principle", capture, start, response);
+        return trackSearch(track, "get-ux-principle", { ...capture, context }, start, response);
       } catch (error) {
         return trackSearch(
           track,
           "get-ux-principle",
-          { query, topic, topResults: [] },
+          { query, topic, topResults: [], context },
           start,
           { content: [{ type: "text", text: `Error: ${error instanceof Error ? error.message : "Unknown error"}` }] },
           true,
@@ -1233,9 +1245,9 @@ Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
     "get-review-rules",
     {
       title: "Get Code Review Rules",
-      description: `Retrieves accessibility (WCAG 2.1) and visual design review rules for analyzing code.
+      description: `Retrieves accessibility (WCAG 2.1), visual design, and content review rules for analyzing code.
 
-You MUST call this after writing UI code to self-review your output.
+You MUST call this after writing UI code to self-review your output, then fix every critical and serious issue BEFORE presenting the result.
 
 **Accessibility (WCAG 2.1):**
 - Critical: Images without alt text, icon buttons without aria-labels, form inputs without labels
@@ -1246,14 +1258,20 @@ You MUST call this after writing UI code to self-review your output.
 - Typography: Mixed fonts, line-height issues, missing fallbacks
 - Color & Contrast: Contrast below 4.5:1, missing hover/focus states
 
+**Content (generated-UI tells):**
+- Walls of text, overwritten copy, filler adjectives, emoji used as icons
+- Microcopy details: pluralization, improvised unit glyphs, empty states without a next action
+- Template layouts: gradient hero + eyebrow pill, left-border callout boxes
+
 Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
       inputSchema: z2.object({
-        category: z2.enum(["accessibility", "visual-design", "all"]).optional().describe("Filter rules by category (defaults to 'all')"),
-        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000\u201310000.")
+        category: z2.enum(["accessibility", "visual-design", "content", "all"]).optional().describe("Filter rules by category (defaults to 'all')"),
+        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000\u201310000."),
+        context: CONTEXT_ARG
       }),
       annotations: { readOnlyHint: true }
     },
-    async ({ category = "all", maxTokens }) => {
+    async ({ category = "all", maxTokens, context }) => {
       const start = Date.now();
       try {
         const rules = await provider.getReviewRules(category);
@@ -1262,7 +1280,7 @@ Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
           return trackSearch(
             track,
             "get-review-rules",
-            { query: category, topic: category, topResults },
+            { query: category, topic: category, topResults, context },
             start,
             { content: [{ type: "text", text: "No review rules found." }] }
           );
@@ -1289,7 +1307,7 @@ Start at 100. Minimum score is 0.
         return trackSearch(
           track,
           "get-review-rules",
-          { query: category, topic: category, topResults },
+          { query: category, topic: category, topResults, context },
           start,
           { content: [{ type: "text", text }] }
         );
@@ -1297,7 +1315,7 @@ Start at 100. Minimum score is 0.
         return trackSearch(
           track,
           "get-review-rules",
-          { query: category, topic: category, topResults: [] },
+          { query: category, topic: category, topResults: [], context },
           start,
           { content: [{ type: "text", text: `Error: ${error instanceof Error ? error.message : "Unknown error"}` }] },
           true,
@@ -1449,9 +1467,9 @@ import { z as z3 } from "zod";
 function registerIconTools({ server, provider, tracked, track }) {
   const iconLibraryConfig = {
     title: "Find Icon Library",
-    description: `Search for icon libraries matching a design style or personality using semantic search.
+    description: `Search for icon libraries matching a design style or personality using semantic search, and return the closest matches.
 
-Use this to find an icon library that matches your design system's personality:
+After a design system is ready, call this and SHOW the user the closest matches (name + style, no scores), then ask which they want, don't auto-pick. Use this to find an icon library that matches your design system's personality:
 - Style traits (minimal, bold, rounded, sharp, outlined, filled)
 - Mood (friendly, professional, playful, serious, warm, elegant)
 - Use case (consumer, enterprise, developer, dashboard, mobile)
@@ -1480,19 +1498,16 @@ Examples:
         );
       }
       const formatted = results.map((r) => {
+        const browseUrl = `https://icon-sets.iconify.design/${r.prefix}/`;
         const lines = [
-          `**ID:** ${r.id}`,
-          `**Name:** ${r.name}`,
-          `**Prefix:** ${r.prefix}`,
-          `**Style:** ${r.tags.join(", ")}`
+          `### [${r.name}](${browseUrl})`,
+          `_${r.tags.join(", ")}_ \xB7 id: \`${r.id}\` \xB7 prefix: \`${r.prefix}\``
         ];
         if (r.variants?.length) {
-          lines.push(`**Variants:** ${r.variants.join(", ")}`);
-          lines.push(`**Default Variant:** ${r.defaultVariant || r.variants[0]}`);
+          lines.push(`Variants: ${r.variants.join(", ")} (default: ${r.defaultVariant || r.variants[0]})`);
         }
-        lines.push(`**Match Score:** ${r.matchScore}%`);
         return lines.join("\n");
-      }).join("\n\n----------\n\n");
+      }).join("\n\n");
       return trackSearch(
         track,
         toolName,
@@ -1501,9 +1516,9 @@ Examples:
         {
           content: [{
             type: "text",
-            text: `# Matching Icon Libraries
+            text: `# Matching icon libraries
 
-Use the prefix with Iconify: \`<Icon icon="prefix:icon-name" />\`
+Show these to the user as options (no scores), keeping each name as its clickable link so they can open it and SEE the icons before choosing. Ask which fits their brand, don't auto-pick. Once they choose, use \`find-icons\` + \`install-icons\` with that library's \`id\`. (Iconify usage: \`<Icon icon="prefix:icon-name" />\`.)
 
 ---
 
@@ -1623,13 +1638,14 @@ If \`components/icons/index.ts\` already exists in the project, MERGE the new ex
         names: z3.array(z3.string()).min(1).describe("Icon names to install. May be bare (e.g. 'home') or prefixed (e.g. 'tabler:home')."),
         targetDir: z3.string().optional().describe("Directory inside the project to write into. Defaults to 'components/icons'."),
         format: z3.enum(["tsx", "svg"]).optional().describe("Output format. 'tsx' (default) generates React components; 'svg' generates raw .svg files."),
-        variant: z3.string().optional().describe("Optional library variant (e.g. 'outline', 'filled').")
+        variant: z3.string().optional().describe("Optional library variant (e.g. 'outline', 'filled')."),
+        context: CONTEXT_ARG
       }),
       annotations: { readOnlyHint: true }
     },
-    async ({ libraryId, names, targetDir, format, variant }) => tracked(
+    async ({ libraryId, names, targetDir, format, variant, context }) => tracked(
       "install-icons",
-      { libraryId, count: names.length, format: format ?? "tsx" },
+      { libraryId, count: names.length, format: format ?? "tsx", context },
       async () => {
         try {
           const dirResult = validateTargetDir(targetDir);
@@ -1827,11 +1843,12 @@ Returns either:
 - The locked library info + installed icon list, with a hint to call install-icons using that libraryId, OR
 - A "no library detected" response, prompting the agent to call find-icon-library normally.`,
       inputSchema: z3.object({
-        manifestContent: z3.string().optional().describe("Contents of the project's components/icons/.library.json file, if it exists. The agent should attempt to read this file from disk and pass it here. If the file doesn't exist or can't be read, omit this field.")
+        manifestContent: z3.string().optional().describe("Contents of the project's components/icons/.library.json file, if it exists. The agent should attempt to read this file from disk and pass it here. If the file doesn't exist or can't be read, omit this field."),
+        context: CONTEXT_ARG
       }),
       annotations: { readOnlyHint: true }
     },
-    async ({ manifestContent }) => tracked("detect-icon-library", { hasManifest: Boolean(manifestContent) }, async () => {
+    async ({ manifestContent, context }) => tracked("detect-icon-library", { hasManifest: Boolean(manifestContent), context }, async () => {
       if (!manifestContent || !manifestContent.trim()) {
         return { content: [{ type: "text", text: "No `.library.json` manifest found. Proceed by calling `find-icon-library` to pick a library, then `install-icons` to scaffold icons. The library you pick will be locked for subsequent installs." }] };
       }
@@ -1896,6 +1913,15 @@ Map each UI need to the installed component BEFORE writing markup:
 
 Read a component's source from \`components/ui/\` to learn its props/exports. Use only
 the design tokens in \`app/globals.css\`; never invent colors, spacing, or radii.
+
+**Copy and layout restraint.** The words inside the UI are part of the design system
+too. Write the fewest words that carry the meaning: headlines about 6 words, one short
+supporting line per section, no filler adjectives (seamless, effortless, powerful), no
+exclamation marks, never emoji as icons or status indicators (use the DS's icon library
+or \`badge\` variants). Skip the generated-template shapes unless explicitly requested:
+gradient hero with an uppercase eyebrow pill, centered three-card feature grid,
+left-border callout boxes, walls of text. After writing UI, self-review with
+\`get-review-rules\` and fix every critical/serious issue before presenting.
 `;
     DS_ESLINT_CONFIG = `// Better Design \u2014 design-system guardrail (flat ESLint config fragment).
 // Flags raw HTML primitives in feature code when the installed DS ships an
@@ -1965,6 +1991,55 @@ After wiring, \`npm run lint\` flags raw primitives in feature code (warnings; b
 function fence(lang, body) {
   return "```" + lang + "\n" + body + "\n```";
 }
+function parseDecls(body) {
+  const out = /* @__PURE__ */ new Map();
+  for (const decl of body.split(";")) {
+    const i = decl.indexOf(":");
+    if (i === -1) continue;
+    const prop = decl.slice(0, i).trim();
+    const val = decl.slice(i + 1).trim();
+    if (!prop || !val) continue;
+    if (prop.startsWith("--") && val.replace(/\s+/g, "") === `var(${prop})`) continue;
+    out.set(prop, val);
+  }
+  return out;
+}
+function hoistAtRules(css) {
+  const atRules = [];
+  const grab = (m) => {
+    atRules.push(m.trim());
+    return "";
+  };
+  const body = css.replace(/@charset\s+(['"]).*?\1\s*;/g, grab).replace(/@import\s+url\(\s*(['"]).*?\1\s*\)[^;]*;/g, grab).replace(/@import\s+(['"]).*?\1[^;]*;/g, grab);
+  return { atRules, body };
+}
+function compactTokensCss(css) {
+  const noComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  const { atRules, body } = hoistAtRules(noComments);
+  const header = atRules.length ? atRules.join("\n") + "\n\n" : "";
+  const merged = /* @__PURE__ */ new Map();
+  for (const m of body.matchAll(/:root\s*\{([^}]*)\}/g)) {
+    for (const [prop, val] of parseDecls(m[1])) merged.set(prop, val);
+  }
+  if (merged.size === 0) return (header + body.trim()).trim() || css.trim();
+  const rootBody = [...merged].map(([p, v]) => `  ${p}: ${v};`).join("\n");
+  let darkOut = "";
+  const darkMatch = body.match(/\.dark\s*\{([^}]*)\}/);
+  if (darkMatch) {
+    const diff = [...parseDecls(darkMatch[1])].filter(([p, v]) => merged.get(p) !== v);
+    if (diff.length) {
+      const darkBody = diff.map(([p, v]) => `  ${p}: ${v};`).join("\n");
+      darkOut = `
+.dark {
+${darkBody}
+}`;
+    }
+  }
+  const rest = body.replace(/:root\s*\{[^}]*\}/g, "").replace(/\.dark\s*\{[^}]*\}/g, "").replace(/\n{2,}/g, "\n").trim();
+  return `${header}:root {
+${rootBody}
+}${darkOut}${rest ? "\n\n" + rest : ""}`;
+}
 function buildDsHtmlKit({ name, tokensCss, viewUrl, componentKit }) {
   const materialCss = componentKit?.css?.trim();
   return [
@@ -1975,7 +2050,7 @@ function buildDsHtmlKit({ name, tokensCss, viewUrl, componentKit }) {
     "## 1. Design tokens (paste first)",
     "These are the system's actual oklch tokens, fonts, radius and shadow scale.",
     "",
-    fence("css", tokensCss.trim()),
+    fence("css", compactTokensCss(tokensCss)),
     "",
     "## 2. Component CSS (paste second)",
     "Token-driven, vanilla CSS. No Tailwind, no build step.",
@@ -1994,10 +2069,20 @@ function buildDsHtmlKit({ name, tokensCss, viewUrl, componentKit }) {
     fence("html", DS_KIT_EXAMPLE_HTML),
     "",
     "## How to use",
-    "- Put all CSS blocks in a single `<style>` tag (tokens first, real material last).",
+    "- Paste every CSS block above VERBATIM into a single `<style>` tag (tokens first, real material last). Copy the blocks exactly, never retype or summarize them from memory: retyped CSS silently drops this system's material.",
     '- Wrap your app in `<div class="ds">` so the base type/color apply.',
-    "- Components: `ds-btn` (`ds-btn-primary|secondary|outline|ghost`, `ds-btn-sm|lg`), `ds-input` / `ds-textarea` / `ds-select` + `ds-label`, `ds-card` (`ds-card-header|body|footer`, `ds-card-title|desc`), `ds-badge` (`ds-badge-primary|outline`), `ds-alert`, `ds-avatar`, `ds-divider`, layout helpers `ds-row` / `ds-field` / `ds-container`.",
+    "- Components: `ds-btn` (`ds-btn-primary|secondary|outline|ghost`, `ds-btn-sm|lg`), `ds-input` / `ds-textarea` / `ds-select` + `ds-label`, `ds-card` (`ds-card-header|body|footer`, `ds-card-title|desc`), `ds-badge` (`ds-badge-primary|outline|safe|warn|danger|unknown|verified`), `ds-alert`, `ds-avatar`, `ds-divider`, layout helpers `ds-row` / `ds-field` / `ds-container`.",
+    '- Status colors: the `ds-badge-safe|warn|danger|unknown|verified` classes are colour modifiers, so add them ALONGSIDE the base `ds-badge`, for example `<span class="ds-badge ds-badge-safe">Sesame-free</span>`. They map to the system\'s own status tokens. Reach for these instead of hand-writing a colored badge from a raw token.',
+    "- Filters, toggles and any tappable pill use `ds-chip` (or `ds-btn`) rendered as a real `<button>`, never a `ds-badge` span. Badges are read-only status labels.",
+    '- Make the mock WORK, not just render: wire a few lines of vanilla JS so every control has a VISIBLE EFFECT. Filter chips toggle `aria-pressed` (the kit styles `ds-chip[aria-pressed="true"]` as selected) AND actually filter: tag each list item with `data-tags="..."` and hide items that do not match the pressed chips. Search inputs filter the list on `input`. A control that changes nothing reads as broken.',
+    "- Custom classes are for LAYOUT only (position, spacing, grid). Never restyle a `ds-*` component's geometry or surface (border-radius, borders, shadows, fills) \u2014 those carry this system's identity. If a component looks wrong, use a different `ds-*` component, do not reshape it.",
+    "- Cards in a grid must stay aligned: the kit pins `ds-card-footer` to the card bottom so rows of cards keep equal footer lines even when a badge row wraps \u2014 do not override that. Keep wrap-prone rows (badges, chips) in the same slot on every card so nothing reads as misaligned.",
     "- Build any layout you want with these tokens, do not invent new colors. For the full React component set in a real project, use `get-design-system-docs` instead.",
+    "",
+    "## Keep it tight",
+    "Build the screens the user actually asked for (one, unless they asked for more) and compose the `ds-*` components above. Do not hand-roll a pile of bespoke decorative CSS (illustrative art, faux maps, gradients, glassmorphism panels, radial-glow backgrounds): reach for the `ds-*` classes and these tokens first. Skip a long write-up: ship the artifact with a one-line note, no multi-paragraph explanation or trailing follow-up questions.",
+    "",
+    HTML_KIT_CONDUCT_MD,
     ...componentKit?.excluded?.length ? [
       "",
       "## Not in this kit (use the real components)",
@@ -2007,13 +2092,13 @@ function buildDsHtmlKit({ name, tokensCss, viewUrl, componentKit }) {
 Full live showcase: ${viewUrl}` : ""
   ].join("\n");
 }
-var DS_KIT_CSS, DS_KIT_EXAMPLE_HTML;
+var DS_KIT_CSS, DS_KIT_EXAMPLE_HTML, HTML_KIT_CONDUCT_MD;
 var init_html_kit = __esm({
   "../shared/src/mcp/html-kit.ts"() {
     "use strict";
     DS_KIT_CSS = `*,*::before,*::after{box-sizing:border-box}
 :where(.ds){font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);color:var(--foreground,oklch(0.2 0 0));background:var(--background,oklch(1 0 0));line-height:1.5}
-.ds h1,.ds h2,.ds h3,.ds h4{font-family:var(--font-serif,var(--font-sans,ui-sans-serif));font-weight:600;margin:0 0 .5em;color:var(--foreground,oklch(0.2 0 0))}
+.ds h1,.ds h2,.ds h3,.ds h4{font-family:inherit;font-weight:600;margin:0 0 .5em;color:var(--foreground,oklch(0.2 0 0))}
 .ds a{color:var(--primary,oklch(0.45 0.15 264));text-decoration:none}
 .ds a:hover{text-decoration:underline}
 .ds p{margin:0 0 1em}
@@ -2034,16 +2119,17 @@ var init_html_kit = __esm({
 
 /* Form fields */
 .ds-label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.4rem;color:var(--foreground,oklch(0.2 0 0))}
-.ds-input,.ds-textarea,.ds-select{width:100%;font:inherit;font-size:.875rem;padding:.55rem .75rem;border-radius:var(--radius-md,calc(var(--radius,0.5rem) - 2px));border:1px solid var(--input,var(--border,oklch(0.85 0 0)));background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0));box-shadow:var(--shadow-2xs,none)}
+.ds-input,.ds-textarea,.ds-select{width:100%;font:inherit;font-size:.875rem;padding:.55rem .75rem;border-radius:var(--radius-lg,var(--radius,0.5rem));border:1px solid var(--border,oklch(0.85 0 0));background:var(--input,var(--background,oklch(1 0 0)));color:var(--foreground,oklch(0.2 0 0));box-shadow:var(--shadow-inset,var(--shadow-2xs,none));transition:border-color .15s,box-shadow .15s}
 .ds-input::placeholder,.ds-textarea::placeholder{color:var(--muted-foreground,oklch(0.6 0 0))}
-.ds-input:focus,.ds-textarea:focus,.ds-select:focus{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:1px;border-color:transparent}
+.ds-input:hover,.ds-textarea:hover,.ds-select:hover{border-color:color-mix(in oklab,var(--foreground,oklch(0.2 0 0)) 20%,transparent)}
+.ds-input:focus,.ds-textarea:focus,.ds-select:focus{outline:none;border-color:var(--ring,var(--primary,oklch(0.45 0.15 264)));box-shadow:var(--shadow-inset,0 0 0 0 transparent),0 0 0 2px color-mix(in oklab,var(--ring,var(--primary,oklch(0.45 0.15 264))) 35%,transparent)}
 .ds-textarea{min-height:5rem;resize:vertical}
 
 /* Card */
-.ds-card{background:var(--card,var(--background,oklch(1 0 0)));color:var(--card-foreground,var(--foreground,oklch(0.2 0 0)));border:1px solid var(--border,oklch(0.9 0 0));border-radius:var(--radius-xl,calc(var(--radius,0.5rem) + 4px));box-shadow:var(--shadow-glass,var(--shadow-md,var(--shadow-sm,none)));overflow:hidden}
+.ds-card{display:flex;flex-direction:column;background:var(--card,var(--background,oklch(1 0 0)));color:var(--card-foreground,var(--foreground,oklch(0.2 0 0)));border:1px solid var(--border,oklch(0.9 0 0));border-radius:var(--radius-xl,calc(var(--radius,0.5rem) + 4px));box-shadow:var(--shadow-glass,var(--shadow-md,var(--shadow-sm,none)));overflow:hidden}
 .ds-card-header{padding:1.1rem 1.25rem .5rem}
 .ds-card-body{padding:.5rem 1.25rem 1.1rem}
-.ds-card-footer{padding:.9rem 1.25rem;border-top:1px solid var(--border,oklch(0.92 0 0));display:flex;gap:.5rem;align-items:center}
+.ds-card-footer{margin-top:auto;padding:.9rem 1.25rem;border-top:1px solid var(--border,oklch(0.92 0 0));display:flex;gap:.5rem;align-items:center}
 .ds-card-title{font-size:1.05rem;margin:0 0 .25rem}
 .ds-card-desc{font-size:.875rem;color:var(--muted-foreground,oklch(0.55 0 0));margin:0}
 
@@ -2051,6 +2137,11 @@ var init_html_kit = __esm({
 .ds-badge{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:var(--secondary,oklch(0.96 0 0));color:var(--secondary-foreground,oklch(0.25 0 0));line-height:1.4}
 .ds-badge-primary{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0))}
 .ds-badge-outline{background:transparent;border:1px solid var(--border,oklch(0.85 0 0));color:var(--foreground,oklch(0.2 0 0))}
+.ds-badge-safe{background:var(--pop-green,oklch(0.92 0.06 150));color:var(--pop-green-foreground,oklch(0.42 0.11 152))}
+.ds-badge-warn{background:var(--pop-orange,oklch(0.93 0.05 40));color:var(--pop-orange-foreground,oklch(0.52 0.18 35))}
+.ds-badge-danger{background:var(--destructive,oklch(0.58 0.22 32));color:var(--destructive-foreground,oklch(0.99 0 0))}
+.ds-badge-unknown{background:var(--pop-yellow,oklch(0.95 0.06 92));color:var(--pop-yellow-foreground,oklch(0.5 0.1 75))}
+.ds-badge-verified{background:var(--pop-blue,oklch(0.92 0.045 245));color:var(--pop-blue-foreground,oklch(0.48 0.14 252))}
 
 /* Alert */
 .ds-alert{border:1px solid var(--border,oklch(0.9 0 0));border-radius:var(--radius-lg,var(--radius,0.5rem));padding:.9rem 1rem;background:var(--card,var(--background,oklch(1 0 0)));color:var(--card-foreground,var(--foreground,oklch(0.2 0 0)));font-size:.875rem}
@@ -2085,7 +2176,10 @@ var init_html_kit = __esm({
 .ds-table th{font-weight:600;color:var(--muted-foreground,oklch(0.5 0 0));font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em}
 
 /* Chip / keyboard key */
-.ds-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border,oklch(0.88 0 0));background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0))}
+.ds-chip{display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.8125rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border,oklch(0.88 0 0));background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0));cursor:pointer;transition:background .15s,border-color .15s}
+.ds-chip:hover{background:var(--accent,oklch(0.96 0 0))}
+.ds-chip:focus-visible{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:2px}
+.ds-chip[aria-pressed="true"]{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));border-color:var(--primary,oklch(0.45 0.15 264))}
 .ds-kbd{font-family:var(--font-mono,ui-monospace,monospace);font-size:.75rem;padding:.1rem .4rem;border-radius:var(--radius-sm,4px);border:1px solid var(--border,oklch(0.85 0 0));background:var(--muted,oklch(0.97 0 0));color:var(--foreground,oklch(0.2 0 0))}
 
 /* Selection adopts the accent, matching the real systems */
@@ -2118,6 +2212,20 @@ var init_html_kit = __esm({
     </div>
   </div>
 </div>`;
+    HTML_KIT_CONDUCT_MD = [
+      "## Write the UI copy like a designer",
+      "The words inside the screen are part of the design, and overwriting them is the fastest generated-content tell:",
+      "- Headlines: about 6 words max. Supporting line: about 15 words, at most one per section.",
+      "- No filler adjectives (seamless, effortless, powerful), no exclamation marks.",
+      "- Never use emoji as icons or status indicators. Use the badge/status classes this system ships or an inline SVG.",
+      '- Sweat the small strings: pluralize counts (1 bet, 2 bets), no redundant self-labels ("You (you)"), spell out abbreviations, units and currency as real words or an inline icon ("1,000 coins", never an improvised glyph like "\xA7"), and empty states name the next action.',
+      "- Skip the template-landing-page shapes unless the user asks for them: gradient hero with an uppercase eyebrow pill, centered three-card feature grid, left-border callout boxes.",
+      "- Status surfaces (warnings, banners) use the system's semantic status tokens; if it ships none, use a bordered card on the default surface, never a chart/data-viz tint. Selected rows get a clearly contrasting treatment (primary fill or a visible edge), not the hover token's faint tint.",
+      "",
+      "## Before you show it (mandatory)",
+      '1. Self-check the artifact: every input has a visible `<label>`; selected/active states use the role-appropriate native or ARIA state (`aria-pressed` for toggle buttons, `aria-selected` for tabs/options, native `checked` for checkboxes, `aria-current` for current links) plus a visible non-color cue; interactive tiles look pressable (border, hover, pressed state); focus stays visible (never remove an outline without a replacement); toasts and status text use `role="status"`; every color comes from the system\'s tokens; radii come from the `--radius` scale.',
+      "2. Call `get-review-rules` (category `all`) and fix every critical and serious issue it reports BEFORE presenting the artifact to the user."
+    ].join("\n");
   }
 });
 
@@ -2130,6 +2238,1325 @@ var init_preview_widget_sdk_generated = __esm({
   }
 });
 
+// ../shared/src/mcp/tw-extracted.generated.ts
+var TW_STATIC_EXTRACTED, TW_VARIANTS_EXTRACTED;
+var init_tw_extracted_generated = __esm({
+  "../shared/src/mcp/tw-extracted.generated.ts"() {
+    "use strict";
+    TW_STATIC_EXTRACTED = {
+      "ring-0": "--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)",
+      "ring-1": "--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)",
+      "ring-2": "--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)",
+      "ring-4": "--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)",
+      "ring-8": "--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)",
+      "ring-offset-0": "--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+      "ring-offset-1": "--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+      "ring-offset-2": "--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+      "ring-offset-4": "--tw-ring-offset-width:4px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+      "ring-inset": "--tw-ring-inset:inset",
+      "ring-offset-background": "--tw-ring-offset-color:var(--background)",
+      "opacity-0": "opacity:0",
+      "opacity-5": "opacity:0.05",
+      "opacity-10": "opacity:0.1",
+      "opacity-15": "opacity:0.15",
+      "opacity-20": "opacity:0.2",
+      "opacity-25": "opacity:0.25",
+      "opacity-30": "opacity:0.3",
+      "opacity-35": "opacity:0.35",
+      "opacity-40": "opacity:0.4",
+      "opacity-45": "opacity:0.45",
+      "opacity-50": "opacity:0.5",
+      "opacity-55": "opacity:0.55",
+      "opacity-60": "opacity:0.6",
+      "opacity-65": "opacity:0.65",
+      "opacity-70": "opacity:0.7",
+      "opacity-75": "opacity:0.75",
+      "opacity-80": "opacity:0.8",
+      "opacity-85": "opacity:0.85",
+      "opacity-90": "opacity:0.9",
+      "opacity-95": "opacity:0.95",
+      "opacity-100": "opacity:1",
+      "transform": "transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)",
+      "transform-gpu": "transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)",
+      "transform-none": "transform:none",
+      "rotate-0": "rotate:0deg",
+      "rotate-45": "rotate:45deg",
+      "rotate-90": "rotate:90deg",
+      "rotate-180": "rotate:180deg",
+      "scale-0": "--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-50": "--tw-scale-x:50%;--tw-scale-y:50%;--tw-scale-z:50%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-75": "--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-90": "--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-95": "--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-100": "--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-105": "--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-110": "--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-125": "--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-150": "--tw-scale-x:150%;--tw-scale-y:150%;--tw-scale-z:150%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "transition-none": "transition-property:none",
+      "transition": "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-all": "transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-colors": "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-transform": "transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-opacity": "transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-shadow": "transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "delay-0": "transition-delay:0s",
+      "delay-75": "animation-delay:75ms;--tw-animation-delay:75ms",
+      "delay-100": "animation-delay:0.1s;--tw-animation-delay:0.1s",
+      "delay-150": "animation-delay:0.15s;--tw-animation-delay:0.15s",
+      "delay-200": "animation-delay:0.2s;--tw-animation-delay:0.2s",
+      "delay-300": "animation-delay:0.3s;--tw-animation-delay:0.3s",
+      "delay-500": "animation-delay:0.5s;--tw-animation-delay:0.5s",
+      "delay-700": "animation-delay:0.7s;--tw-animation-delay:0.7s",
+      "delay-1000": "animation-delay:1s;--tw-animation-delay:1s",
+      "duration-0": "transition-duration:0s",
+      "duration-75": "animation-duration:75ms;--tw-animation-duration:75ms",
+      "duration-100": "animation-duration:0.1s;--tw-animation-duration:0.1s",
+      "duration-150": "animation-duration:0.15s;--tw-animation-duration:0.15s",
+      "duration-200": "animation-duration:0.2s;--tw-animation-duration:0.2s",
+      "duration-300": "animation-duration:0.3s;--tw-animation-duration:0.3s",
+      "duration-500": "animation-duration:0.5s;--tw-animation-duration:0.5s",
+      "duration-700": "animation-duration:0.7s;--tw-animation-duration:0.7s",
+      "duration-1000": "animation-duration:1s;--tw-animation-duration:1s",
+      "ease-linear": "transition-timing-function:linear",
+      "ease-in": "transition-timing-function:cubic-bezier(0.4,0,1,1)",
+      "ease-out": "transition-timing-function:cubic-bezier(0,0,0.2,1)",
+      "ease-in-out": "transition-timing-function:cubic-bezier(0.4,0,0.2,1)",
+      "animate-none": "animation:none",
+      "animate-spin": "animation:spin 1s linear infinite",
+      "animate-ping": "animation:ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
+      "animate-pulse": "animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      "animate-bounce": "animation:bounce 1s infinite",
+      "will-change-auto": "will-change:auto",
+      "will-change-scroll": "will-change:scroll-position",
+      "will-change-contents": "will-change:contents",
+      "will-change-transform": "will-change:transform",
+      "sr-only": "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0",
+      "not-sr-only": "position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip-path:none;white-space:normal",
+      "animate-in": "animation:enter var(--tw-animation-duration,var(--tw-duration,0.15s)) var(--tw-ease,ease) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "animate-out": "animation:exit var(--tw-animation-duration,var(--tw-duration,0.15s)) var(--tw-ease,ease) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "fade-in": "--tw-enter-opacity:0",
+      "fade-out": "--tw-exit-opacity:0",
+      "zoom-in": "--tw-enter-scale:0",
+      "zoom-out": "--tw-exit-scale:0",
+      "spin-in": "--tw-enter-rotate:30deg",
+      "spin-out": "--tw-exit-rotate:30deg",
+      "-spin-in": "--tw-enter-rotate:-30deg",
+      "-spin-out": "--tw-exit-rotate:-30deg",
+      "blur-in": "--tw-enter-blur:20px",
+      "blur-out": "--tw-exit-blur:20px",
+      "slide-in-from-top": "--tw-enter-translate-y:-100%",
+      "slide-in-from-bottom": "--tw-enter-translate-y:100%",
+      "slide-in-from-left": "--tw-enter-translate-x:-100%",
+      "slide-in-from-right": "--tw-enter-translate-x:100%",
+      "slide-out-to-top": "--tw-exit-translate-y:-100%",
+      "slide-out-to-bottom": "--tw-exit-translate-y:100%",
+      "slide-out-to-left": "--tw-exit-translate-x:-100%",
+      "slide-out-to-right": "--tw-exit-translate-x:100%",
+      "running": "animation-play-state:running",
+      "paused": "animation-play-state:paused",
+      "accordion-down": "animation:accordion-down var(--tw-animation-duration,var(--tw-duration,0.2s)) var(--tw-ease,ease-out) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "accordion-up": "animation:accordion-up var(--tw-animation-duration,var(--tw-duration,0.2s)) var(--tw-ease,ease-out) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "collapsible-down": "animation:collapsible-down var(--tw-animation-duration,var(--tw-duration,0.2s)) var(--tw-ease,ease-out) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "collapsible-up": "animation:collapsible-up var(--tw-animation-duration,var(--tw-duration,0.2s)) var(--tw-ease,ease-out) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "caret-blink": "animation:caret-blink 1.25s ease-out infinite",
+      "grid": "display:grid",
+      "inline-grid": "display:inline-grid",
+      "grid-cols-1": "grid-template-columns:repeat(1,minmax(0,1fr))",
+      "grid-cols-2": "grid-template-columns:repeat(2,minmax(0,1fr))",
+      "grid-cols-3": "grid-template-columns:repeat(3,minmax(0,1fr))",
+      "grid-cols-4": "grid-template-columns:repeat(4,minmax(0,1fr))",
+      "grid-cols-5": "grid-template-columns:repeat(5,minmax(0,1fr))",
+      "grid-cols-6": "grid-template-columns:repeat(6,minmax(0,1fr))",
+      "grid-cols-7": "grid-template-columns:repeat(7,minmax(0,1fr))",
+      "grid-cols-12": "grid-template-columns:repeat(12,minmax(0,1fr))",
+      "grid-rows-1": "grid-template-rows:repeat(1,minmax(0,1fr))",
+      "grid-rows-2": "grid-template-rows:repeat(2,minmax(0,1fr))",
+      "grid-rows-3": "grid-template-rows:repeat(3,minmax(0,1fr))",
+      "grid-rows-4": "grid-template-rows:repeat(4,minmax(0,1fr))",
+      "grid-rows-6": "grid-template-rows:repeat(6,minmax(0,1fr))",
+      "col-span-1": "grid-column:span 1/span 1",
+      "col-span-2": "grid-column:span 2/span 2",
+      "col-span-3": "grid-column:span 3/span 3",
+      "col-span-4": "grid-column:span 4/span 4",
+      "col-span-5": "grid-column:span 5/span 5",
+      "col-span-6": "grid-column:span 6/span 6",
+      "col-span-full": "grid-column:1/-1",
+      "col-auto": "grid-column:auto",
+      "col-start-1": "grid-column-start:1",
+      "col-start-2": "grid-column-start:2",
+      "col-start-3": "grid-column-start:3",
+      "col-start-4": "grid-column-start:4",
+      "col-start-5": "grid-column-start:5",
+      "col-start-6": "grid-column-start:6",
+      "col-start-7": "grid-column-start:7",
+      "col-start-auto": "grid-column-start:auto",
+      "col-end-1": "grid-column-end:1",
+      "col-end-2": "grid-column-end:2",
+      "col-end-3": "grid-column-end:3",
+      "col-end-4": "grid-column-end:4",
+      "col-end-5": "grid-column-end:5",
+      "col-end-6": "grid-column-end:6",
+      "col-end-7": "grid-column-end:7",
+      "col-end-auto": "grid-column-end:auto",
+      "row-span-1": "grid-row:span 1/span 1",
+      "row-span-2": "grid-row:span 2/span 2",
+      "row-span-3": "grid-row:span 3/span 3",
+      "row-span-full": "grid-row:1/-1",
+      "row-auto": "grid-row:auto",
+      "row-start-1": "grid-row-start:1",
+      "row-start-2": "grid-row-start:2",
+      "row-start-3": "grid-row-start:3",
+      "row-start-4": "grid-row-start:4",
+      "row-start-5": "grid-row-start:5",
+      "row-start-6": "grid-row-start:6",
+      "row-start-auto": "grid-row-start:auto",
+      "row-end-1": "grid-row-end:1",
+      "row-end-2": "grid-row-end:2",
+      "row-end-3": "grid-row-end:3",
+      "row-end-4": "grid-row-end:4",
+      "row-end-auto": "grid-row-end:auto",
+      "auto-cols-auto": "grid-auto-columns:auto",
+      "auto-cols-min": "grid-auto-columns:min-content",
+      "auto-cols-max": "grid-auto-columns:max-content",
+      "auto-cols-fr": "grid-auto-columns:minmax(0,1fr)",
+      "auto-rows-auto": "grid-auto-rows:auto",
+      "auto-rows-min": "grid-auto-rows:min-content",
+      "auto-rows-max": "grid-auto-rows:max-content",
+      "auto-rows-fr": "grid-auto-rows:minmax(0,1fr)",
+      "grid-flow-row": "grid-auto-flow:row",
+      "grid-flow-col": "grid-auto-flow:column",
+      "grid-flow-dense": "grid-auto-flow:dense",
+      "grid-flow-row-dense": "grid-auto-flow:row dense",
+      "grid-flow-col-dense": "grid-auto-flow:column dense",
+      "place-items-auto": "place-items:auto",
+      "place-items-start": "place-items:start",
+      "place-items-end": "place-items:end",
+      "place-items-center": "place-items:center",
+      "place-items-baseline": "place-items:baseline",
+      "place-items-stretch": "place-items:stretch stretch",
+      "place-content-auto": "place-content:auto",
+      "place-content-start": "place-content:start",
+      "place-content-end": "place-content:end",
+      "place-content-center": "place-content:center",
+      "place-content-between": "place-content:space-between",
+      "place-content-around": "place-content:space-around",
+      "place-content-evenly": "place-content:space-evenly",
+      "place-content-stretch": "place-content:stretch",
+      "place-self-auto": "place-self:auto",
+      "place-self-start": "place-self:start",
+      "place-self-end": "place-self:end",
+      "place-self-center": "place-self:center",
+      "place-self-baseline": "place-self:baseline",
+      "place-self-stretch": "place-self:stretch stretch",
+      "bg-none": "background-image:none",
+      "bg-cover": "background-size:cover",
+      "bg-contain": "background-size:contain",
+      "bg-center": "background-position:center",
+      "bg-bottom": "background-position:bottom",
+      "bg-left": "background-position:left",
+      "bg-left-bottom": "background-position:left bottom",
+      "bg-left-top": "background-position:left top",
+      "bg-right": "background-position:right",
+      "bg-right-bottom": "background-position:right bottom",
+      "bg-right-top": "background-position:right top",
+      "bg-top": "background-position:top",
+      "bg-no-repeat": "background-repeat:no-repeat",
+      "bg-repeat": "background-repeat:repeat",
+      "bg-repeat-x": "background-repeat:repeat-x",
+      "bg-repeat-y": "background-repeat:repeat-y",
+      "bg-fixed": "background-attachment:fixed",
+      "bg-local": "background-attachment:local",
+      "bg-scroll": "background-attachment:scroll",
+      "bg-clip-border": "background-clip:border-box",
+      "bg-clip-padding": "background-clip:padding-box",
+      "bg-clip-text": "background-clip:text",
+      "bg-origin-border": "background-origin:border-box",
+      "bg-gradient-to-t": "--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-tr": "--tw-gradient-position:to top right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-r": "--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-br": "--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-b": "--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-bl": "--tw-gradient-position:to bottom left in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-l": "--tw-gradient-position:to left in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-tl": "--tw-gradient-position:to top left in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "blur": "--tw-blur:blur(0px);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,)",
+      "blur-sm": "--tw-blur:blur(4px);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,)",
+      "blur-md": "--tw-blur:blur(12px);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,)",
+      "blur-lg": "--tw-blur:blur(20px);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,)",
+      "blur-xl": "--tw-blur:blur(40px);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,)",
+      "blur-2xl": "--tw-blur:blur(80px);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,)",
+      "brightness-50": "--tw-brightness:brightness(50%);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,)",
+      "brightness-75": "--tw-brightness:brightness(75%);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,)",
+      "brightness-100": "--tw-brightness:brightness(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,)",
+      "brightness-125": "--tw-brightness:brightness(125%);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,)",
+      "brightness-150": "--tw-brightness:brightness(150%);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,)",
+      "brightness-200": "--tw-brightness:brightness(200%);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,)",
+      "contrast": "--tw-contrast:contrast(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,)",
+      "contrast-50": "--tw-contrast:contrast(50%);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,)",
+      "contrast-75": "--tw-contrast:contrast(75%);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,)",
+      "contrast-100": "--tw-contrast:contrast(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,)",
+      "contrast-125": "--tw-contrast:contrast(125%);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,)",
+      "contrast-150": "--tw-contrast:contrast(150%);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,)",
+      "contrast-200": "--tw-contrast:contrast(200%);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,)",
+      "saturate": "--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,)",
+      "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,)",
+      "saturate-50": "--tw-saturate:saturate(50%);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,)",
+      "saturate-75": "--tw-saturate:saturate(75%);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,)",
+      "saturate-100": "--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,)",
+      "saturate-125": "--tw-saturate:saturate(125%);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,)",
+      "saturate-150": "--tw-saturate:saturate(150%);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,)",
+      "saturate-200": "--tw-saturate:saturate(200%);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,)",
+      "grayscale": "--tw-grayscale:grayscale(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,)",
+      "grayscale-0": "--tw-grayscale:grayscale(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,)",
+      "invert": "--tw-invert:invert(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,)",
+      "invert-0": "--tw-invert:invert(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,)",
+      "sepia": "--tw-sepia:sepia(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,)",
+      "sepia-0": "--tw-sepia:sepia(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,)",
+      "hue-rotate-0": "--tw-hue-rotate:hue-rotate(0deg);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,)",
+      "hue-rotate-15": "--tw-hue-rotate:hue-rotate(15deg);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,)",
+      "hue-rotate-30": "--tw-hue-rotate:hue-rotate(30deg);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,)",
+      "hue-rotate-45": "--tw-hue-rotate:hue-rotate(45deg);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,)",
+      "hue-rotate-60": "--tw-hue-rotate:hue-rotate(60deg);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,)",
+      "hue-rotate-90": "--tw-hue-rotate:hue-rotate(90deg);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,)",
+      "hue-rotate-180": "--tw-hue-rotate:hue-rotate(180deg);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-blur": "--tw-backdrop-blur:blur(0px);-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,)",
+      "backdrop-blur-sm": "--tw-backdrop-blur:blur(4px);-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,)",
+      "backdrop-blur-md": "--tw-backdrop-blur:blur(12px);-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,)",
+      "backdrop-blur-lg": "--tw-backdrop-blur:blur(20px);-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,)",
+      "backdrop-blur-xl": "--tw-backdrop-blur:blur(40px);-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,)",
+      "backdrop-blur-2xl": "--tw-backdrop-blur:blur(80px);-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,)",
+      "backdrop-brightness": "--tw-backdrop-brightness:brightness(100%);-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,)",
+      "backdrop-brightness-50": "--tw-backdrop-brightness:brightness(50%);-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,)",
+      "backdrop-brightness-75": "--tw-backdrop-brightness:brightness(75%);-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,)",
+      "backdrop-brightness-100": "--tw-backdrop-brightness:brightness(100%);-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,)",
+      "backdrop-contrast": "--tw-backdrop-contrast:contrast(100%);-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,)",
+      "backdrop-contrast-50": "--tw-backdrop-contrast:contrast(50%);-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,)",
+      "backdrop-contrast-75": "--tw-backdrop-contrast:contrast(75%);-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,)",
+      "backdrop-contrast-100": "--tw-backdrop-contrast:contrast(100%);-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,)",
+      "backdrop-saturate": "--tw-backdrop-saturate:saturate(100%);-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,)",
+      "backdrop-saturate-50": "--tw-backdrop-saturate:saturate(50%);-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,)",
+      "backdrop-saturate-75": "--tw-backdrop-saturate:saturate(75%);-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,)",
+      "backdrop-saturate-100": "--tw-backdrop-saturate:saturate(100%);-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,)",
+      "backdrop-grayscale": "--tw-backdrop-grayscale:grayscale(100%);-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,)",
+      "backdrop-grayscale-0": "--tw-backdrop-grayscale:grayscale(0%);-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,)",
+      "backdrop-invert": "--tw-backdrop-invert:invert(100%);-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,)",
+      "backdrop-invert-0": "--tw-backdrop-invert:invert(0%);-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,)",
+      "backdrop-sepia": "--tw-backdrop-sepia:sepia(100%);-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,)",
+      "backdrop-sepia-0": "--tw-backdrop-sepia:sepia(0%);-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,)",
+      "backdrop-opacity-10": "--tw-backdrop-opacity:opacity(10%);-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,)",
+      "backdrop-opacity-20": "--tw-backdrop-opacity:opacity(20%);-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,)",
+      "backdrop-opacity-30": "--tw-backdrop-opacity:opacity(30%);-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,)",
+      "backdrop-opacity-40": "--tw-backdrop-opacity:opacity(40%);-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,)",
+      "backdrop-opacity-50": "--tw-backdrop-opacity:opacity(50%);-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,)",
+      "backdrop-hue-rotate-0": "--tw-backdrop-hue-rotate:hue-rotate(0deg);-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,)",
+      "backdrop-hue-rotate-90": "--tw-backdrop-hue-rotate:hue-rotate(90deg);-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,)",
+      "backdrop-hue-rotate-180": "--tw-backdrop-hue-rotate:hue-rotate(180deg);-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,)",
+      "object-cover": "object-fit:cover",
+      "object-contain": "object-fit:contain",
+      "object-fill": "object-fit:fill",
+      "object-center": "object-position:center",
+      "aspect-square": "aspect-ratio:1",
+      "aspect-video": "aspect-ratio:16/9",
+      "aspect-auto": "aspect-ratio:auto",
+      "align-middle": "vertical-align:middle",
+      "align-top": "vertical-align:top",
+      "align-bottom": "vertical-align:bottom",
+      "align-baseline": "vertical-align:baseline",
+      "list-none": "list-style-type:none",
+      "list-disc": "list-style-type:disc",
+      "list-decimal": "list-style-type:decimal",
+      "appearance-none": "appearance:none",
+      "resize-none": "resize:none",
+      "resize-x": "resize:horizontal",
+      "resize-y": "resize:vertical",
+      "resize": "resize:both",
+      "snap-none": "scroll-snap-type:none",
+      "snap-x": "scroll-snap-type:x var(--tw-scroll-snap-strictness)",
+      "snap-y": "scroll-snap-type:y var(--tw-scroll-snap-strictness)",
+      "snap-mandatory": "--tw-scroll-snap-strictness:mandatory",
+      "snap-proximity": "--tw-scroll-snap-strictness:proximity",
+      "snap-align-none": "scroll-snap-align:none",
+      "touch-none": "touch-action:none",
+      "touch-auto": "touch-action:auto",
+      "isolate": "isolation:isolate",
+      "isolation-auto": "isolation:auto",
+      "mix-blend-normal": "mix-blend-mode:normal",
+      "mix-blend-multiply": "mix-blend-mode:multiply",
+      "mix-blend-screen": "mix-blend-mode:screen",
+      "mix-blend-overlay": "mix-blend-mode:overlay",
+      "mix-blend-darken": "mix-blend-mode:darken",
+      "mix-blend-lighten": "mix-blend-mode:lighten",
+      "mix-blend-color-dodge": "mix-blend-mode:color-dodge",
+      "mix-blend-color-burn": "mix-blend-mode:color-burn",
+      "mix-blend-hard-light": "mix-blend-mode:hard-light",
+      "mix-blend-soft-light": "mix-blend-mode:soft-light",
+      "mix-blend-difference": "mix-blend-mode:difference",
+      "mix-blend-exclusion": "mix-blend-mode:exclusion",
+      "mix-blend-hue": "mix-blend-mode:hue",
+      "mix-blend-saturation": "mix-blend-mode:saturation",
+      "mix-blend-color": "mix-blend-mode:color",
+      "mix-blend-luminosity": "mix-blend-mode:luminosity",
+      "mix-blend-plus-lighter": "mix-blend-mode:plus-lighter",
+      "underline-offset-0": "text-underline-offset:0px",
+      "underline-offset-1": "text-underline-offset:1px",
+      "underline-offset-2": "text-underline-offset:2px",
+      "underline-offset-4": "text-underline-offset:4px",
+      "underline-offset-8": "text-underline-offset:8px",
+      "decoration-1": "text-decoration-thickness:1px",
+      "decoration-2": "text-decoration-thickness:2px",
+      "decoration-4": "text-decoration-thickness:4px",
+      "decoration-8": "text-decoration-thickness:8px",
+      "indent-px": "text-indent:1px",
+      "columns-1": "columns:1",
+      "columns-2": "columns:2",
+      "columns-3": "columns:3",
+      "columns-auto": "columns:auto",
+      "w-0": "width:0",
+      "w-1": "width:0.25rem",
+      "w-2": "width:0.5rem",
+      "w-3": "width:0.75rem",
+      "w-4": "width:1rem",
+      "w-6": "width:1.5rem",
+      "w-8": "width:2rem",
+      "w-10": "width:2.5rem",
+      "w-12": "width:3rem",
+      "w-14": "width:3.5rem",
+      "w-16": "width:4rem",
+      "w-20": "width:5rem",
+      "w-24": "width:6rem",
+      "w-28": "width:7rem",
+      "w-32": "width:8rem",
+      "w-36": "width:9rem",
+      "w-40": "width:10rem",
+      "w-44": "width:11rem",
+      "w-48": "width:12rem",
+      "w-52": "width:13rem",
+      "w-56": "width:14rem",
+      "w-60": "width:15rem",
+      "w-64": "width:16rem",
+      "w-72": "width:18rem",
+      "w-80": "width:20rem",
+      "w-96": "width:24rem",
+      "h-0": "height:0",
+      "h-1": "height:0.25rem",
+      "h-2": "height:0.5rem",
+      "h-3": "height:0.75rem",
+      "h-4": "height:1rem",
+      "h-6": "height:1.5rem",
+      "h-8": "height:2rem",
+      "h-10": "height:2.5rem",
+      "h-12": "height:3rem",
+      "h-14": "height:3.5rem",
+      "h-16": "height:4rem",
+      "h-20": "height:5rem",
+      "h-24": "height:6rem",
+      "h-28": "height:7rem",
+      "h-32": "height:8rem",
+      "h-36": "height:9rem",
+      "h-40": "height:10rem",
+      "h-44": "height:11rem",
+      "h-48": "height:12rem",
+      "h-52": "height:13rem",
+      "h-56": "height:14rem",
+      "h-60": "height:15rem",
+      "h-64": "height:16rem",
+      "h-72": "height:18rem",
+      "h-80": "height:20rem",
+      "h-96": "height:24rem",
+      "min-w-0": "min-width:0",
+      "min-w-1": "min-width:0.25rem",
+      "min-w-2": "min-width:0.5rem",
+      "min-w-3": "min-width:0.75rem",
+      "min-w-4": "min-width:1rem",
+      "min-w-6": "min-width:1.5rem",
+      "min-w-8": "min-width:2rem",
+      "min-w-10": "min-width:2.5rem",
+      "min-w-12": "min-width:3rem",
+      "min-w-14": "min-width:3.5rem",
+      "min-w-16": "min-width:4rem",
+      "min-w-20": "min-width:5rem",
+      "min-w-24": "min-width:6rem",
+      "min-w-28": "min-width:7rem",
+      "min-w-32": "min-width:8rem",
+      "min-w-36": "min-width:9rem",
+      "min-w-40": "min-width:10rem",
+      "min-w-44": "min-width:11rem",
+      "min-w-48": "min-width:12rem",
+      "min-w-52": "min-width:13rem",
+      "min-w-56": "min-width:14rem",
+      "min-w-60": "min-width:15rem",
+      "min-w-64": "min-width:16rem",
+      "min-w-72": "min-width:18rem",
+      "min-w-80": "min-width:20rem",
+      "min-w-96": "min-width:24rem",
+      "max-w-xs": "max-width:20rem",
+      "max-w-sm": "max-width:24rem",
+      "max-w-md": "max-width:28rem",
+      "max-w-lg": "max-width:32rem",
+      "max-w-xl": "max-width:36rem",
+      "max-w-2xl": "max-width:42rem",
+      "max-w-3xl": "max-width:48rem",
+      "max-w-4xl": "max-width:56rem",
+      "max-w-5xl": "max-width:64rem",
+      "max-w-6xl": "max-width:72rem",
+      "max-w-7xl": "max-width:80rem",
+      "max-w-prose": "max-width:65ch",
+      "max-w-screen-sm": "max-width:40rem",
+      "max-w-screen-md": "max-width:48rem",
+      "max-w-screen-lg": "max-width:64rem",
+      "max-w-screen-xl": "max-width:80rem",
+      "max-w-screen-2xl": "max-width:96rem",
+      "min-h-0": "min-height:0",
+      "min-h-1": "min-height:0.25rem",
+      "min-h-2": "min-height:0.5rem",
+      "min-h-3": "min-height:0.75rem",
+      "min-h-4": "min-height:1rem",
+      "min-h-6": "min-height:1.5rem",
+      "min-h-8": "min-height:2rem",
+      "min-h-10": "min-height:2.5rem",
+      "min-h-12": "min-height:3rem",
+      "min-h-14": "min-height:3.5rem",
+      "min-h-16": "min-height:4rem",
+      "min-h-20": "min-height:5rem",
+      "min-h-24": "min-height:6rem",
+      "min-h-28": "min-height:7rem",
+      "min-h-32": "min-height:8rem",
+      "min-h-36": "min-height:9rem",
+      "min-h-40": "min-height:10rem",
+      "min-h-44": "min-height:11rem",
+      "min-h-48": "min-height:12rem",
+      "min-h-52": "min-height:13rem",
+      "min-h-56": "min-height:14rem",
+      "min-h-60": "min-height:15rem",
+      "min-h-64": "min-height:16rem",
+      "min-h-72": "min-height:18rem",
+      "min-h-80": "min-height:20rem",
+      "min-h-96": "min-height:24rem",
+      "max-h-0": "max-height:0",
+      "max-h-1": "max-height:0.25rem",
+      "max-h-2": "max-height:0.5rem",
+      "max-h-3": "max-height:0.75rem",
+      "max-h-4": "max-height:1rem",
+      "max-h-6": "max-height:1.5rem",
+      "max-h-8": "max-height:2rem",
+      "max-h-10": "max-height:2.5rem",
+      "max-h-12": "max-height:3rem",
+      "max-h-14": "max-height:3.5rem",
+      "max-h-16": "max-height:4rem",
+      "max-h-20": "max-height:5rem",
+      "max-h-24": "max-height:6rem",
+      "max-h-28": "max-height:7rem",
+      "max-h-32": "max-height:8rem",
+      "max-h-36": "max-height:9rem",
+      "max-h-40": "max-height:10rem",
+      "max-h-44": "max-height:11rem",
+      "max-h-48": "max-height:12rem",
+      "max-h-52": "max-height:13rem",
+      "max-h-56": "max-height:14rem",
+      "max-h-60": "max-height:15rem",
+      "max-h-64": "max-height:16rem",
+      "max-h-72": "max-height:18rem",
+      "max-h-80": "max-height:20rem",
+      "max-h-96": "max-height:24rem",
+      "w-px": "width:1px",
+      "h-px": "height:1px",
+      "w-1/2": "width:50%",
+      "w-1/3": "width:33.3333%",
+      "w-1/4": "width:25%",
+      "w-1/5": "width:20%",
+      "w-1/6": "width:16.6667%",
+      "w-2/3": "width:66.6667%",
+      "w-2/4": "width:50%",
+      "w-2/5": "width:40%",
+      "w-2/6": "width:33.3333%",
+      "w-3/4": "width:75%",
+      "w-3/5": "width:60%",
+      "w-3/6": "width:50%",
+      "w-4/5": "width:80%",
+      "w-4/6": "width:66.6667%",
+      "w-5/6": "width:83.3333%",
+      "h-1/2": "height:50%",
+      "h-1/3": "height:33.3333%",
+      "h-1/4": "height:25%",
+      "h-1/5": "height:20%",
+      "h-1/6": "height:16.6667%",
+      "h-2/3": "height:66.6667%",
+      "h-2/4": "height:50%",
+      "h-2/5": "height:40%",
+      "h-2/6": "height:33.3333%",
+      "h-3/4": "height:75%",
+      "h-3/5": "height:60%",
+      "h-3/6": "height:50%",
+      "h-4/5": "height:80%",
+      "h-4/6": "height:66.6667%",
+      "h-5/6": "height:83.3333%"
+    };
+    TW_VARIANTS_EXTRACTED = {
+      "hover": ":hover",
+      "focus": ":focus",
+      "focus-visible": ":focus-visible",
+      "active": ":active",
+      "disabled": ":disabled",
+      "group-hover": ":is(:where(.group):hover *)",
+      "group-data": "[data-{attr}={value}]",
+      "placeholder": "::placeholder",
+      "before": "::before",
+      "after": "::after",
+      "file": "::file-selector-button",
+      "marker": "::marker",
+      "first-line": "::first-line",
+      "first-letter": "::first-letter",
+      "peer-checked": "inherited from base variant handling"
+    };
+  }
+});
+
+// ../shared/src/mcp/tw-translate.ts
+function escapeClassName(cls) {
+  return cls.replace(ESCAPE_RE, (c) => `\\${c}`).replace(/ /g, "\\ ");
+}
+function dataAriaVariant(v) {
+  const m = v.match(/^(data|aria)-\[([^\]]+)\]$/);
+  if (!m) return null;
+  const [, kind, expr] = m;
+  const eq = expr.match(/^([\w-]+)\s*=\s*(.+)$/);
+  if (eq) {
+    const val = eq[2].replace(/^["']|["']$/g, "");
+    return (base) => `${base}[${kind}-${eq[1]}="${val}"]`;
+  }
+  return (base) => `${base}[${kind}-${expr}]`;
+}
+function applyVariant(selector, variant) {
+  if (STATE_VARIANTS[variant]) return `${selector}${STATE_VARIANTS[variant]}`;
+  if (PSEUDO_ELEMENTS[variant]) return `${selector}${PSEUDO_ELEMENTS[variant]}`;
+  if (GROUP_PEER[variant]) return GROUP_PEER[variant](selector);
+  if (TW_VARIANTS_EXTRACTED[variant] && !PSEUDO_ELEMENTS[variant] && !STATE_VARIANTS[variant]) {
+    const suffix = TW_VARIANTS_EXTRACTED[variant];
+    return suffix.startsWith(":") ? `${selector}${suffix}` : `${selector}${suffix}`;
+  }
+  const da = dataAriaVariant(variant);
+  if (da) return da(selector);
+  const ariaShort = variant.match(/^aria-(selected|checked|expanded|disabled|current|pressed|hidden)$/);
+  if (ariaShort) return `${selector}[aria-${ariaShort[1]}="true"]`;
+  const has = variant.match(/^has-\[(.+)\]$/);
+  if (has) return `${selector}:has(${has[1].replace(/(?<!\\)_/g, " ")})`;
+  const groupData = variant.match(/^group-(data|aria)-\[([^\]]+)\]$/);
+  if (groupData) {
+    const eq = groupData[2].match(/^([\w-]+)\s*=\s*(.+)$/);
+    const attr = eq ? `${groupData[1]}-${eq[1]}="${eq[2].replace(/^["']|["']$/g, "")}"` : `${groupData[1]}-${groupData[2]}`;
+    return `.group[${attr}] ${selector}`;
+  }
+  const groupArb = variant.match(/^group-\[(.+)\]$/);
+  if (groupArb) {
+    const inner = groupArb[1].replace(/&/g, "").replace(/(?<!\\)_/g, " ");
+    return `.group${inner} ${selector}`;
+  }
+  const arb = variant.match(/^\[(.+)\]$/);
+  if (arb && arb[1].includes("&")) {
+    const inner = arb[1].replace(/&/g, selector).replace(/(?<!\\)_/g, " ");
+    return inner;
+  }
+  return null;
+}
+function needsContent(variants, body) {
+  return (variants.includes("before") || variants.includes("after")) && !/(^|;)\s*content\s*:/.test(body);
+}
+function spacing(token) {
+  if (token === "px") return "1px";
+  if (token === "full") return "100%";
+  if (token === "auto") return "auto";
+  if (token === "screen") return "100vh";
+  if (/^\d+(\.\d+)?$/.test(token)) {
+    const n = parseFloat(token);
+    return `${(n * 0.25).toFixed(4).replace(/\.?0+$/, "")}rem`;
+  }
+  const frac = token.match(/^(\d+)\/(\d+)$/);
+  if (frac) return `${(+frac[1] / +frac[2] * 100).toFixed(4).replace(/\.?0+$/, "")}%`;
+  return null;
+}
+function colorValue(token) {
+  const [name, op] = token.split("/");
+  let base = null;
+  if (name === "transparent") base = "transparent";
+  else if (name === "current") base = "currentColor";
+  else if (name === "white") base = "oklch(1 0 0)";
+  else if (name === "black") base = "oklch(0 0 0)";
+  else if (SEMANTIC_TOKENS.has(name)) base = `var(--${name})`;
+  if (!base) return null;
+  if (op && /^\d+$/.test(op)) {
+    return `color-mix(in oklab, ${base} ${op}%, transparent)`;
+  }
+  return base;
+}
+function decodeArbitrary(raw) {
+  const v = raw.replace(/(?<!\\)_/g, " ").replace(/\\_/g, "_").trim();
+  return v && !/[{}<>;]/.test(v) ? v : null;
+}
+function animateModifier(base) {
+  const spin = {
+    "animate-spin": "animation:spin 1s linear infinite",
+    "animate-pulse": "animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+    "animate-bounce": "animation:bounce 1s infinite",
+    "animate-ping": "animation:ping 1s cubic-bezier(0,0,0.2,1) infinite",
+    "animate-accordion-down": "animation:accordion-down 0.2s ease-out",
+    "animate-accordion-up": "animation:accordion-up 0.2s ease-out",
+    "animate-collapsible-down": "animation:collapsible-down 0.2s ease-out",
+    "animate-collapsible-up": "animation:collapsible-up 0.2s ease-out",
+    "animate-none": "animation:none"
+  };
+  if (spin[base]) return spin[base];
+  let m = base.match(/^(fade|zoom)-(in|out)-(\d+)$/);
+  if (m) {
+    const kind = m[2] === "in" ? "enter" : "exit";
+    if (m[1] === "fade") return `--tw-${kind}-opacity:${(+m[3] / 100).toString().replace(/^0\./, ".")}`;
+    return `--tw-${kind}-scale:${(+m[3] / 100).toString().replace(/^0\./, ".")}`;
+  }
+  m = base.match(/^slide-(in-from|out-to)-(top|bottom|left|right)-(.+)$/);
+  if (m) {
+    const kind = m[1] === "in-from" ? "enter" : "exit";
+    const axis = m[2] === "top" || m[2] === "bottom" ? "y" : "x";
+    const sign = m[2] === "top" || m[2] === "left" ? "-" : "";
+    const v = m[3].startsWith("[") ? decodeArbitrary(m[3].slice(1, -1)) : spacing(m[3]);
+    if (v) return `--tw-${kind}-translate-${axis}:${sign}${v}`;
+  }
+  return null;
+}
+function paletteColor(base) {
+  const m = base.match(/^([a-z]+(?:-[trbl])?)-([a-z]+)-(\d{2,3})(?:\/(\d+))?$/);
+  if (!m) return null;
+  const prop = COLOR_PROP[m[1]];
+  const shade = PALETTE[m[2]]?.[m[3]];
+  if (!prop || !shade) return null;
+  const val = m[4] ? `color-mix(in oklab, ${shade} ${m[4]}%, transparent)` : shade;
+  return `${prop}:${val}`;
+}
+function translateBase(base) {
+  if (TW_STATIC_EXTRACTED[base]) return TW_STATIC_EXTRACTED[base];
+  if (STATIC[base]) return STATIC[base];
+  if (KNOWN_EMPTY.has(base)) return "";
+  if (FONT_FAMILY[base]) return FONT_FAMILY[base];
+  if (FLEX_EXTRA[base]) return FLEX_EXTRA[base];
+  const anim = animateModifier(base);
+  if (anim) return anim;
+  const pal = paletteColor(base);
+  if (pal) return pal;
+  if (FONT_SIZE[base]) return FONT_SIZE[base];
+  if (FONT_WEIGHT[base]) return `font-weight:${FONT_WEIGHT[base]}`;
+  if (RADIUS[base]) return `border-radius:${RADIUS[base]}`;
+  const propArb = base.match(/^\[([\w-]+):(.+)\]$/);
+  if (propArb) {
+    const val = decodeArbitrary(propArb[2]);
+    return val ? `${propArb[1]}:${val}` : null;
+  }
+  const rsa = base.match(/^rounded-(t|r|b|l|tl|tr|br|bl)-\[(.+)\]$/);
+  if (rsa && RADIUS_SIDE[rsa[1]]) {
+    const v = decodeArbitrary(rsa[2]);
+    if (v) return RADIUS_SIDE[rsa[1]].map((p) => `${p}:${v}`).join(";");
+  }
+  const arb = base.match(/^(-?[a-z][\w-]*)-\[(.+)\](?:\/(\d+))?$/);
+  if (arb) {
+    const val = decodeArbitrary(arb[2]);
+    if (val) {
+      const prop = ARBITRARY_PROP[arb[1]];
+      if (prop) return `${prop}:${val}`;
+      const colorProp = COLOR_PROP[arb[1]];
+      if (colorProp) {
+        const v = arb[3] ? `color-mix(in oklab, ${val} ${arb[3]}%, transparent)` : val;
+        return `${colorProp}:${v}`;
+      }
+    }
+  }
+  const rside = base.match(/^rounded-(t|r|b|l|tl|tr|br|bl)(?:-(.+))?$/);
+  if (rside_ok(rside)) {
+    const props = RADIUS_SIDE[rside[1]];
+    const key = rside[2] ? `rounded-${rside[2]}` : "rounded";
+    const val = RADIUS[key];
+    if (val) return props.map((p) => `${p}:${val}`).join(";");
+  }
+  const colorMatch = base.match(/^([a-z]+(?:-[trbl])?)-(.+)$/);
+  if (colorMatch && COLOR_PROP[colorMatch[1]]) {
+    const val = colorValue(colorMatch[2]);
+    if (val) return `${COLOR_PROP[colorMatch[1]]}:${val}`;
+  }
+  const sp = base.match(/^(-)?([a-z]+(?:-[xytrbl])?)-(.+)$/);
+  if (sp && SPACING_PROP[sp[2]]) {
+    const v = spacing(sp[3]);
+    if (v) {
+      const val = sp[1] ? `-${v}` : v;
+      return SPACING_PROP[sp[2]].map((p) => `${p}:${val}`).join(";");
+    }
+  }
+  const sz = base.match(/^(w|h|min-w|max-w|min-h|max-h|size)-(.+)$/);
+  if (sz && SIZE_PROP[sz[1]]) {
+    const v = sz[2] === "max" ? "max-content" : sz[2] === "min" ? "min-content" : sz[2] === "fit" ? "fit-content" : MAX_W_SCALE[sz[2]] ?? spacing(sz[2]);
+    if (v) return SIZE_PROP[sz[1]].map((p) => `${p}:${v}`).join(";");
+  }
+  const tr = base.match(/^(-)?translate-([xy])-(.+)$/);
+  if (tr) {
+    const raw = tr[3].startsWith("[") ? decodeArbitrary(tr[3].slice(1, -1)) : spacing(tr[3]);
+    if (raw) {
+      const v = `${tr[1] ?? ""}${raw}`;
+      return `--tw-translate-${tr[2]}:${v};translate:var(--tw-translate-x) var(--tw-translate-y)`;
+    }
+  }
+  const nz = base.match(/^-z-(\d+)$/);
+  if (nz) return `z-index:-${nz[1]}`;
+  const bw = base.match(/^border-([trbl])-(\d+)$/);
+  if (bw) {
+    const side = { t: "top", r: "right", b: "bottom", l: "left" }[bw[1]];
+    return `border-${side}-width:${bw[2]}px`;
+  }
+  const lh = base.match(/^leading-(\d+)$/);
+  if (lh) return `line-height:${(+lh[1] * 0.25).toString().replace(/\.?0+$/, "")}rem`;
+  const fil = base.match(/^(backdrop-)?(brightness|saturate|contrast|grayscale|invert|sepia|blur)-(\d+|none)$/);
+  if (fil) {
+    const prop = fil[1] ? "backdrop-filter" : "filter";
+    const fn = fil[2];
+    const n = fil[3] === "none" ? fn === "blur" ? "0" : "100" : fil[3];
+    const arg = fn === "blur" ? `${n}px` : ["grayscale", "invert", "sepia"].includes(fn) ? `${+n / 100}` : `${n}%`;
+    return `${prop}:${fn}(${arg})`;
+  }
+  const sm = base.match(/^scroll-(m|mt|mr|mb|ml|p|pt|pr|pb|pl)([xy])?-(.+)$/);
+  if (sm) {
+    const v = spacing(sm[3]);
+    if (v) {
+      const kind = sm[1][0] === "m" ? "margin" : "padding";
+      const side = { t: "-top", r: "-right", b: "-bottom", l: "-left", x: "-inline", y: "-block" }[sm[1][1] ?? sm[2] ?? ""] ?? "";
+      return `scroll-${kind}${side}:${v}`;
+    }
+  }
+  return null;
+}
+function rside_ok(m) {
+  return !!m && !!RADIUS_SIDE[m[1]];
+}
+function translateClass(cls) {
+  if (!cls || cls.startsWith("//")) return null;
+  const parts = splitVariants(cls);
+  const base = parts.pop();
+  let body = translateBase(base);
+  if (body === null) return null;
+  if (needsContent(parts, body)) body = `content:"";${body}`;
+  let selector = `.${escapeClassName(cls)}`;
+  let media;
+  for (const v of parts) {
+    if (BREAKPOINTS[v]) {
+      media = `(min-width:${BREAKPOINTS[v]})`;
+      continue;
+    }
+    const next = applyVariant(selector, v);
+    if (!next) return null;
+    selector = next;
+  }
+  return { selector, body, media };
+}
+function splitVariants(cls) {
+  const out = [];
+  let depth = 0;
+  let cur = "";
+  for (const ch of cls) {
+    if (ch === "[") depth++;
+    else if (ch === "]") depth--;
+    if (ch === ":" && depth === 0) {
+      out.push(cur);
+      cur = "";
+    } else cur += ch;
+  }
+  out.push(cur);
+  return out;
+}
+var BREAKPOINTS, KNOWN_EMPTY, PALETTE, FONT_FAMILY, FLEX_EXTRA, TW_DEFAULTS, ESCAPE_RE, STATE_VARIANTS, GROUP_PEER, PSEUDO_ELEMENTS, SPACING_PROP, SIZE_PROP, COLOR_PROP, SEMANTIC_TOKENS, RADIUS, RADIUS_SIDE, FONT_SIZE, FONT_WEIGHT, STATIC, ARBITRARY_PROP, MAX_W_SCALE;
+var init_tw_translate = __esm({
+  "../shared/src/mcp/tw-translate.ts"() {
+    "use strict";
+    init_tw_extracted_generated();
+    BREAKPOINTS = {
+      sm: "40rem",
+      md: "48rem",
+      lg: "64rem",
+      xl: "80rem",
+      "2xl": "96rem"
+    };
+    KNOWN_EMPTY = /* @__PURE__ */ new Set(["group", "peer"]);
+    PALETTE = {
+      emerald: { "50": "oklch(0.979 0.021 166.1)", "100": "oklch(0.95 0.052 163.1)", "200": "oklch(0.905 0.093 164.2)", "400": "oklch(0.765 0.177 163.2)", "500": "oklch(0.696 0.17 162.5)", "600": "oklch(0.596 0.145 163.2)", "700": "oklch(0.508 0.118 165.6)" },
+      green: { "50": "oklch(0.982 0.018 155.8)", "100": "oklch(0.962 0.044 156.7)", "400": "oklch(0.792 0.209 151.7)", "500": "oklch(0.723 0.219 149.6)", "600": "oklch(0.627 0.194 149.2)", "700": "oklch(0.527 0.154 150.1)" },
+      orange: { "50": "oklch(0.98 0.016 73.7)", "100": "oklch(0.954 0.038 75.2)", "200": "oklch(0.901 0.076 70.7)", "400": "oklch(0.75 0.183 55.9)", "500": "oklch(0.705 0.213 47.6)", "600": "oklch(0.646 0.222 41.1)", "700": "oklch(0.553 0.195 38.4)" },
+      amber: { "50": "oklch(0.987 0.022 95.3)", "100": "oklch(0.962 0.059 95.6)", "400": "oklch(0.828 0.189 84.4)", "500": "oklch(0.769 0.188 70.1)", "600": "oklch(0.666 0.179 58.3)", "700": "oklch(0.555 0.163 48.998)" },
+      red: { "50": "oklch(0.971 0.013 17.4)", "100": "oklch(0.936 0.032 17.7)", "200": "oklch(0.885 0.062 18.3)", "300": "oklch(0.808 0.114 19.6)", "400": "oklch(0.704 0.191 22.2)", "500": "oklch(0.637 0.237 25.3)", "600": "oklch(0.577 0.245 27.3)", "700": "oklch(0.505 0.213 27.5)" },
+      yellow: { "50": "oklch(0.987 0.026 102.2)", "100": "oklch(0.973 0.071 103.2)", "400": "oklch(0.852 0.199 91.9)", "500": "oklch(0.795 0.184 86.05)", "600": "oklch(0.681 0.162 75.8)", "700": "oklch(0.554 0.135 66.4)" },
+      blue: { "50": "oklch(0.97 0.014 254.6)", "100": "oklch(0.932 0.032 255.6)", "500": "oklch(0.623 0.214 259.8)", "600": "oklch(0.546 0.245 262.9)", "700": "oklch(0.488 0.243 264.4)" },
+      sky: { "50": "oklch(0.977 0.013 236.6)", "100": "oklch(0.951 0.026 236.8)", "500": "oklch(0.685 0.169 237.3)", "600": "oklch(0.588 0.158 241.97)", "700": "oklch(0.5 0.134 242.7)" },
+      rose: { "50": "oklch(0.969 0.015 12.4)", "100": "oklch(0.941 0.03 12.6)", "500": "oklch(0.645 0.246 16.4)", "600": "oklch(0.586 0.253 17.6)", "700": "oklch(0.514 0.222 16.9)" },
+      slate: { "50": "oklch(0.984 0.003 247.9)", "100": "oklch(0.968 0.007 247.9)", "500": "oklch(0.554 0.046 257.4)", "600": "oklch(0.446 0.043 257.3)", "700": "oklch(0.372 0.044 257.3)", "900": "oklch(0.208 0.042 265.8)" },
+      zinc: { "50": "oklch(0.985 0 0)", "100": "oklch(0.967 0.001 286.4)", "400": "oklch(0.705 0.015 286.1)", "500": "oklch(0.552 0.016 285.9)", "600": "oklch(0.442 0.017 285.8)", "700": "oklch(0.37 0.013 285.8)", "800": "oklch(0.274 0.006 286)", "900": "oklch(0.21 0.006 285.9)" },
+      gray: { "50": "oklch(0.985 0.002 247.8)", "100": "oklch(0.967 0.003 264.5)", "400": "oklch(0.707 0.022 261.3)", "500": "oklch(0.551 0.027 264.4)", "600": "oklch(0.446 0.03 256.8)", "700": "oklch(0.373 0.034 259.7)", "900": "oklch(0.21 0.034 264.7)" },
+      neutral: { "50": "oklch(0.985 0 0)", "100": "oklch(0.97 0 0)", "400": "oklch(0.708 0 0)", "500": "oklch(0.556 0 0)", "600": "oklch(0.439 0 0)", "700": "oklch(0.371 0 0)", "900": "oklch(0.205 0 0)" }
+    };
+    FONT_FAMILY = {
+      "font-sans": "font-family:var(--font-sans)",
+      "font-serif": "font-family:var(--font-serif)",
+      "font-mono": "font-family:var(--font-mono)"
+    };
+    FLEX_EXTRA = {
+      "flex-col-reverse": "flex-direction:column-reverse",
+      "flex-wrap-reverse": "flex-wrap:wrap-reverse",
+      "caption-bottom": "caption-side:bottom",
+      "shrink": "flex-shrink:1",
+      "sr-only": "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0"
+    };
+    TW_DEFAULTS = "*,::before,::after,::backdrop{--tw-ring-color:currentcolor;--tw-ring-shadow:0 0 0 transparent;--tw-ring-offset-shadow:0 0 0 transparent;--tw-ring-offset-width:0px;--tw-ring-offset-color:oklch(1 0 0);--tw-ring-inset:;--tw-shadow:0 0 0 transparent;--tw-inset-shadow:0 0 0 transparent;--tw-inset-ring-shadow:0 0 0 transparent;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:;--tw-rotate-y:;--tw-rotate-z:;--tw-skew-x:;--tw-skew-y:;--tw-gradient-from:transparent;--tw-gradient-to:transparent;--tw-gradient-stops:;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-saturate:;--tw-content:''}";
+    ESCAPE_RE = /[:\\[\]/.#(),%!&>~*+="'@]/g;
+    STATE_VARIANTS = {
+      hover: ":hover",
+      focus: ":focus",
+      "focus-visible": ":focus-visible",
+      "focus-within": ":focus-within",
+      active: ":active",
+      visited: ":visited",
+      disabled: ":disabled",
+      checked: ":checked",
+      required: ":required",
+      "read-only": ":read-only",
+      "first": ":first-child",
+      "last": ":last-child",
+      "odd": ":nth-child(odd)",
+      "even": ":nth-child(even)",
+      "empty": ":empty"
+    };
+    GROUP_PEER = {
+      "group-hover": (s) => `.group:hover ${s}`,
+      "group-focus": (s) => `.group:focus ${s}`,
+      "peer-hover": (s) => `.peer:hover ~ ${s}`,
+      "peer-focus": (s) => `.peer:focus ~ ${s}`,
+      "peer-checked": (s) => `.peer:checked ~ ${s}`,
+      "peer-disabled": (s) => `.peer:disabled ~ ${s}`
+    };
+    PSEUDO_ELEMENTS = {
+      placeholder: "::placeholder",
+      before: "::before",
+      after: "::after",
+      file: "::file-selector-button",
+      marker: "::marker",
+      selection: "::selection",
+      "first-line": "::first-line",
+      "first-letter": "::first-letter",
+      backdrop: "::backdrop"
+    };
+    SPACING_PROP = {
+      p: ["padding"],
+      px: ["padding-left", "padding-right"],
+      py: ["padding-top", "padding-bottom"],
+      pt: ["padding-top"],
+      pr: ["padding-right"],
+      pb: ["padding-bottom"],
+      pl: ["padding-left"],
+      ps: ["padding-inline-start"],
+      pe: ["padding-inline-end"],
+      m: ["margin"],
+      mx: ["margin-left", "margin-right"],
+      my: ["margin-top", "margin-bottom"],
+      mt: ["margin-top"],
+      mr: ["margin-right"],
+      mb: ["margin-bottom"],
+      ml: ["margin-left"],
+      ms: ["margin-inline-start"],
+      me: ["margin-inline-end"],
+      gap: ["gap"],
+      "gap-x": ["column-gap"],
+      "gap-y": ["row-gap"],
+      "space-x": ["column-gap"],
+      "space-y": ["row-gap"],
+      // approximation
+      inset: ["inset"],
+      top: ["top"],
+      right: ["right"],
+      bottom: ["bottom"],
+      left: ["left"]
+    };
+    SIZE_PROP = {
+      w: ["width"],
+      "min-w": ["min-width"],
+      "max-w": ["max-width"],
+      h: ["height"],
+      "min-h": ["min-height"],
+      "max-h": ["max-height"],
+      size: ["width", "height"]
+    };
+    COLOR_PROP = {
+      bg: "background-color",
+      text: "color",
+      border: "border-color",
+      "border-t": "border-top-color",
+      "border-r": "border-right-color",
+      "border-b": "border-bottom-color",
+      "border-l": "border-left-color",
+      ring: "--tw-ring-color",
+      fill: "fill",
+      stroke: "stroke",
+      outline: "outline-color",
+      decoration: "text-decoration-color",
+      caret: "caret-color",
+      accent: "accent-color",
+      from: "--tw-gradient-from",
+      to: "--tw-gradient-to",
+      via: "--tw-gradient-via"
+    };
+    SEMANTIC_TOKENS = /* @__PURE__ */ new Set([
+      "background",
+      "foreground",
+      "card",
+      "card-foreground",
+      "popover",
+      "popover-foreground",
+      "primary",
+      "primary-foreground",
+      "secondary",
+      "secondary-foreground",
+      "muted",
+      "muted-foreground",
+      "accent",
+      "accent-foreground",
+      "destructive",
+      "destructive-foreground",
+      "border",
+      "input",
+      "ring",
+      "chart-1",
+      "chart-2",
+      "chart-3",
+      "chart-4",
+      "chart-5",
+      "sidebar",
+      "sidebar-foreground",
+      "sidebar-primary",
+      "sidebar-accent",
+      "sidebar-border"
+    ]);
+    RADIUS = {
+      "rounded-none": "0",
+      "rounded-sm": "var(--radius-sm, calc(var(--radius) - 4px))",
+      "rounded": "0.25rem",
+      "rounded-md": "var(--radius-md, calc(var(--radius) - 2px))",
+      "rounded-lg": "var(--radius-lg, var(--radius))",
+      "rounded-xl": "var(--radius-xl, calc(var(--radius) + 4px))",
+      "rounded-2xl": "var(--radius-2xl, 1rem)",
+      "rounded-3xl": "var(--radius-3xl, 1.5rem)",
+      "rounded-full": "calc(infinity * 1px)"
+    };
+    RADIUS_SIDE = {
+      t: ["border-top-left-radius", "border-top-right-radius"],
+      r: ["border-top-right-radius", "border-bottom-right-radius"],
+      b: ["border-bottom-left-radius", "border-bottom-right-radius"],
+      l: ["border-top-left-radius", "border-bottom-left-radius"],
+      tl: ["border-top-left-radius"],
+      tr: ["border-top-right-radius"],
+      br: ["border-bottom-right-radius"],
+      bl: ["border-bottom-left-radius"]
+    };
+    FONT_SIZE = {
+      "text-xs": "font-size:0.75rem;line-height:1rem",
+      "text-sm": "font-size:0.875rem;line-height:1.25rem",
+      "text-base": "font-size:1rem;line-height:1.5rem",
+      "text-lg": "font-size:1.125rem;line-height:1.75rem",
+      "text-xl": "font-size:1.25rem;line-height:1.75rem",
+      "text-2xl": "font-size:1.5rem;line-height:2rem",
+      "text-3xl": "font-size:1.875rem;line-height:2.25rem",
+      "text-4xl": "font-size:2.25rem;line-height:2.5rem",
+      "text-5xl": "font-size:3rem;line-height:1",
+      "text-6xl": "font-size:3.75rem;line-height:1"
+    };
+    FONT_WEIGHT = {
+      "font-thin": "100",
+      "font-extralight": "200",
+      "font-light": "300",
+      "font-normal": "400",
+      "font-medium": "500",
+      "font-semibold": "600",
+      "font-bold": "700",
+      "font-extrabold": "800",
+      "font-black": "900"
+    };
+    STATIC = {
+      // display / box
+      block: "display:block",
+      "inline-block": "display:inline-block",
+      inline: "display:inline",
+      flex: "display:flex",
+      "inline-flex": "display:inline-flex",
+      grid: "display:grid",
+      "inline-grid": "display:inline-grid",
+      hidden: "display:none",
+      contents: "display:contents",
+      invisible: "visibility:hidden",
+      visible: "visibility:visible",
+      "sr-only-x": "",
+      table: "display:table",
+      "table-cell": "display:table-cell",
+      "table-row": "display:table-row",
+      // flex / grid
+      "flex-row": "flex-direction:row",
+      "flex-col": "flex-direction:column",
+      "flex-row-reverse": "flex-direction:row-reverse",
+      "flex-wrap": "flex-wrap:wrap",
+      "flex-nowrap": "flex-wrap:nowrap",
+      "flex-1": "flex:1 1 0%",
+      "flex-auto": "flex:1 1 auto",
+      "flex-initial": "flex:0 1 auto",
+      "flex-none": "flex:none",
+      "flex-shrink-0": "flex-shrink:0",
+      "shrink-0": "flex-shrink:0",
+      grow: "flex-grow:1",
+      "grow-0": "flex-grow:0",
+      "items-center": "align-items:center",
+      "items-start": "align-items:flex-start",
+      "items-end": "align-items:flex-end",
+      "items-stretch": "align-items:stretch",
+      "items-baseline": "align-items:baseline",
+      "justify-center": "justify-content:center",
+      "justify-start": "justify-content:flex-start",
+      "justify-end": "justify-content:flex-end",
+      "justify-between": "justify-content:space-between",
+      "justify-around": "justify-content:space-around",
+      "justify-evenly": "justify-content:space-evenly",
+      "self-center": "align-self:center",
+      "self-start": "align-self:flex-start",
+      "self-end": "align-self:flex-end",
+      "self-stretch": "align-self:stretch",
+      "content-center": "align-content:center",
+      "place-items-center": "place-items:center",
+      "place-content-center": "place-content:center",
+      // position
+      relative: "position:relative",
+      absolute: "position:absolute",
+      fixed: "position:fixed",
+      sticky: "position:sticky",
+      static: "position:static",
+      "inset-0": "inset:0",
+      "inset-x-0": "left:0;right:0",
+      "inset-y-0": "top:0;bottom:0",
+      // sizing shorthands
+      "w-full": "width:100%",
+      "h-full": "height:100%",
+      "w-screen": "width:100vw",
+      "h-screen": "height:100vh",
+      "min-h-screen": "min-height:100vh",
+      "w-fit": "width:fit-content",
+      "h-fit": "height:fit-content",
+      "w-auto": "width:auto",
+      "h-auto": "height:auto",
+      "min-w-0": "min-width:0",
+      "max-w-full": "max-width:100%",
+      "min-h-0": "min-height:0",
+      "size-full": "width:100%;height:100%",
+      // overflow / misc
+      "overflow-hidden": "overflow:hidden",
+      "overflow-auto": "overflow:auto",
+      "overflow-x-auto": "overflow-x:auto",
+      "overflow-y-auto": "overflow-y:auto",
+      "overflow-visible": "overflow:visible",
+      "overflow-x-hidden": "overflow-x:hidden",
+      "overflow-y-hidden": "overflow-y:hidden",
+      truncate: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap",
+      "whitespace-nowrap": "white-space:nowrap",
+      "whitespace-pre": "white-space:pre",
+      "break-words": "overflow-wrap:break-word",
+      "break-all": "word-break:break-all",
+      "select-none": "user-select:none",
+      "select-text": "user-select:text",
+      "pointer-events-none": "pointer-events:none",
+      "pointer-events-auto": "pointer-events:auto",
+      "cursor-pointer": "cursor:pointer",
+      "cursor-default": "cursor:default",
+      "cursor-not-allowed": "cursor:not-allowed",
+      "cursor-text": "cursor:text",
+      // typography
+      "text-left": "text-align:left",
+      "text-center": "text-align:center",
+      "text-right": "text-align:right",
+      "text-justify": "text-align:justify",
+      italic: "font-style:italic",
+      "not-italic": "font-style:normal",
+      underline: "text-decoration-line:underline",
+      "line-through": "text-decoration-line:line-through",
+      "no-underline": "text-decoration-line:none",
+      uppercase: "text-transform:uppercase",
+      lowercase: "text-transform:lowercase",
+      capitalize: "text-transform:capitalize",
+      "normal-case": "text-transform:none",
+      "leading-none": "line-height:1",
+      "leading-tight": "line-height:1.25",
+      "leading-snug": "line-height:1.375",
+      "leading-normal": "line-height:1.5",
+      "leading-relaxed": "line-height:1.625",
+      "leading-loose": "line-height:2",
+      "tracking-tighter": "letter-spacing:-0.05em",
+      "tracking-tight": "letter-spacing:-0.025em",
+      "tracking-normal": "letter-spacing:0",
+      "tracking-wide": "letter-spacing:0.025em",
+      "tracking-wider": "letter-spacing:0.05em",
+      "tracking-widest": "letter-spacing:0.1em",
+      "tabular-nums": "font-variant-numeric:tabular-nums",
+      "antialiased": "-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale",
+      // borders
+      border: "border-width:1px",
+      "border-0": "border-width:0",
+      "border-2": "border-width:2px",
+      "border-t": "border-top-width:1px",
+      "border-r": "border-right-width:1px",
+      "border-b": "border-bottom-width:1px",
+      "border-l": "border-left-width:1px",
+      "border-solid": "border-style:solid",
+      "border-dashed": "border-style:dashed",
+      "border-none": "border-style:none",
+      // effects
+      "shadow-none": "box-shadow:none",
+      "shadow-xs": "box-shadow:var(--shadow-xs, 0 1px 2px 0 oklch(0 0 0 / 0.05))",
+      "shadow-sm": "box-shadow:var(--shadow-sm, 0 1px 3px 0 oklch(0 0 0 / 0.1))",
+      shadow: "box-shadow:var(--shadow, 0 1px 3px 0 oklch(0 0 0 / 0.1))",
+      "shadow-md": "box-shadow:var(--shadow-md, 0 4px 6px -1px oklch(0 0 0 / 0.1))",
+      "shadow-lg": "box-shadow:var(--shadow-lg, 0 10px 15px -3px oklch(0 0 0 / 0.1))",
+      "shadow-xl": "box-shadow:var(--shadow-xl, 0 20px 25px -5px oklch(0 0 0 / 0.1))",
+      "shadow-2xl": "box-shadow:var(--shadow-2xl, 0 25px 50px -12px oklch(0 0 0 / 0.25))",
+      "opacity-0": "opacity:0",
+      "opacity-50": "opacity:0.5",
+      "opacity-100": "opacity:1",
+      "ring-0": "box-shadow:0 0 0 0",
+      "outline-none": "outline:2px solid transparent;outline-offset:2px",
+      // transitions
+      "transition-none": "transition-property:none",
+      transition: "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-colors": "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-transform": "transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-opacity": "transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-shadow": "transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "duration-75": "transition-duration:75ms",
+      "duration-100": "transition-duration:100ms",
+      "duration-150": "transition-duration:150ms",
+      "duration-200": "transition-duration:200ms",
+      "duration-300": "transition-duration:300ms",
+      "duration-500": "transition-duration:500ms",
+      "ease-linear": "transition-timing-function:linear",
+      "ease-in": "transition-timing-function:cubic-bezier(0.4,0,1,1)",
+      "ease-out": "transition-timing-function:cubic-bezier(0,0,0.2,1)",
+      "ease-in-out": "transition-timing-function:cubic-bezier(0.4,0,0.2,1)",
+      // z-index
+      "z-0": "z-index:0",
+      "z-10": "z-index:10",
+      "z-20": "z-index:20",
+      "z-30": "z-index:30",
+      "z-40": "z-index:40",
+      "z-50": "z-index:50",
+      "z-auto": "z-index:auto",
+      // transform-origin
+      "origin-center": "transform-origin:center",
+      "origin-top": "transform-origin:top",
+      "origin-bottom": "transform-origin:bottom",
+      "origin-left": "transform-origin:left",
+      "origin-right": "transform-origin:right",
+      "origin-top-left": "transform-origin:top left",
+      "origin-top-right": "transform-origin:top right",
+      "origin-bottom-left": "transform-origin:bottom left",
+      "origin-bottom-right": "transform-origin:bottom right",
+      "origin-top-center": "transform-origin:top center",
+      // table / misc
+      "border-collapse": "border-collapse:collapse",
+      "border-separate": "border-collapse:separate",
+      "table-auto": "table-layout:auto",
+      "table-fixed": "table-layout:fixed",
+      "align-middle": "vertical-align:middle",
+      "align-top": "vertical-align:top",
+      "align-bottom": "vertical-align:bottom",
+      "align-baseline": "vertical-align:baseline",
+      "list-none": "list-style-type:none",
+      "list-disc": "list-style-type:disc",
+      "list-decimal": "list-style-type:decimal",
+      "appearance-none": "appearance:none",
+      "resize-none": "resize:none",
+      "isolate": "isolation:isolate",
+      "object-cover": "object-fit:cover",
+      "object-contain": "object-fit:contain",
+      "object-center": "object-position:center",
+      "aspect-square": "aspect-ratio:1/1",
+      "aspect-video": "aspect-ratio:16/9",
+      "aspect-auto": "aspect-ratio:auto",
+      "backdrop-blur-sm": "backdrop-filter:blur(4px)",
+      "backdrop-blur": "backdrop-filter:blur(8px)",
+      "backdrop-blur-md": "backdrop-filter:blur(12px)",
+      "backdrop-blur-lg": "backdrop-filter:blur(16px)",
+      "backdrop-blur-xl": "backdrop-filter:blur(24px)",
+      "backdrop-blur-2xl": "backdrop-filter:blur(40px)",
+      "backdrop-blur-3xl": "backdrop-filter:blur(64px)",
+      "backdrop-blur-none": "backdrop-filter:blur(0)",
+      "underline-offset-2": "text-underline-offset:2px",
+      "underline-offset-4": "text-underline-offset:4px",
+      "rounded-xs": "border-radius:var(--radius-xs, 0.125rem)"
+    };
+    ARBITRARY_PROP = {
+      bg: "background",
+      text: "color",
+      w: "width",
+      h: "height",
+      "min-w": "min-width",
+      "max-w": "max-width",
+      "min-h": "min-height",
+      "max-h": "max-height",
+      size: "width",
+      p: "padding",
+      px: "padding-inline",
+      py: "padding-block",
+      pt: "padding-top",
+      pr: "padding-right",
+      pb: "padding-bottom",
+      pl: "padding-left",
+      m: "margin",
+      mx: "margin-inline",
+      my: "margin-block",
+      mt: "margin-top",
+      mr: "margin-right",
+      mb: "margin-bottom",
+      ml: "margin-left",
+      gap: "gap",
+      rounded: "border-radius",
+      shadow: "box-shadow",
+      border: "border-width",
+      top: "top",
+      left: "left",
+      right: "right",
+      bottom: "bottom",
+      inset: "inset",
+      "leading": "line-height",
+      "tracking": "letter-spacing",
+      opacity: "opacity",
+      z: "z-index",
+      grid: "grid-template-columns",
+      "font": "font-size",
+      "aspect": "aspect-ratio",
+      // transition props (transition-[background-color,box-shadow]) + timing
+      transition: "transition-property",
+      duration: "transition-duration",
+      delay: "transition-delay",
+      ease: "transition-timing-function"
+    };
+    MAX_W_SCALE = {
+      xs: "20rem",
+      sm: "24rem",
+      md: "28rem",
+      lg: "32rem",
+      xl: "36rem",
+      "2xl": "42rem",
+      "3xl": "48rem",
+      "4xl": "56rem",
+      "5xl": "64rem",
+      "6xl": "72rem",
+      "7xl": "80rem",
+      prose: "65ch",
+      none: "none"
+    };
+  }
+});
+
 // ../shared/src/mcp/preview-html.ts
 function cssFromRegistryVars(cssVars) {
   const block = (vars) => Object.entries(vars ?? {}).map(([k, v]) => `  --${k.replace(/^--/, "")}: ${v};`).join("\n");
@@ -2165,11 +3592,14 @@ function addFontFamily(families, raw) {
   if (!family || family.startsWith("var(") || SYSTEM_FONT_FAMILIES.has(family.toLowerCase())) return;
   families.add(family);
 }
+function stripComments(source) {
+  return source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:])\/\/[^\n]*/g, "$1");
+}
 function componentRadiusCss(files) {
   const radiusFor = (pattern) => {
     const file = files.find((f) => f.path && pattern.test(f.path));
     if (!file?.content) return null;
-    const m = file.content.match(/rounded(?:-(?:none|sm|md|lg|xl|2xl|3xl|full))?(?=[\s"'])/);
+    const m = stripComments(file.content).match(/rounded(?:-(?:none|sm|md|lg|xl|2xl|3xl|full))?(?=[\s"'])/);
     return m ? RADIUS_CLASS_TO_CSS[m[0]] ?? null : null;
   };
   const rules = [];
@@ -2181,7 +3611,7 @@ function componentRadiusCss(files) {
   if (card) rules.push(`.bd-card, .ds-card { border-radius: ${card}; }`);
   return rules.join("\n");
 }
-function decodeArbitrary(raw) {
+function decodeArbitrary2(raw) {
   const value = raw.replace(/(?<!\\)_/g, " ").replace(/\\_/g, "_").trim();
   return value && !/[<>{};]/.test(value) ? value : null;
 }
@@ -2189,12 +3619,12 @@ function restingValue(scope, cssProp, utilPrefixes) {
   for (const prefix of utilPrefixes) {
     const m = scope.match(new RegExp(`(?<![\\w:.\\-])${prefix}-\\[([^\\]]+)\\]`));
     if (m) {
-      const v = decodeArbitrary(m[1]);
+      const v = decodeArbitrary2(m[1]);
       if (v) return v;
     }
   }
   const pm = scope.match(new RegExp(`(?<!:)\\[${cssProp}:([^\\]]+)\\]`));
-  return pm ? decodeArbitrary(pm[1]) : null;
+  return pm ? decodeArbitrary2(pm[1]) : null;
 }
 function variantBody(content, name) {
   const vi = content.search(/variant\s*:\s*\{/);
@@ -2218,7 +3648,7 @@ function componentDepthCss(files) {
   return rules.join("\n");
 }
 function buildDsComponentCss(files) {
-  const contentOf = (re) => files.find((f) => f.path && re.test(f.path))?.content ?? "";
+  const contentOf = (re) => stripComments(files.find((f) => f.path && re.test(f.path))?.content ?? "");
   const has = (name) => Boolean(contentOf(new RegExp(`(^|/)${name}\\.(tsx|jsx)$`)));
   const arbitrary = (scope, re) => {
     const m = scope.match(re);
@@ -2252,9 +3682,102 @@ function buildDsComponentCss(files) {
     const radius = rm ? RADIUS_CLASS_TO_CSS[rm[0]] : null;
     if (radius) rules.push(`.ds-badge, .ds-badge-primary { border-radius: ${radius}; }`);
   }
+  const field = contentOf(/(^|\/)_shared\.(ts|tsx)$/) || contentOf(/(^|\/)input\.(tsx|jsx)$/);
+  if (field) {
+    covered.add("input");
+    const fieldSel = ".ds-input, .ds-textarea, .ds-select";
+    const rm = field.match(/rounded(?:-(?:none|sm|md|lg|xl|2xl|3xl|full))?(?=[\s"'])/);
+    const radius = rm ? RADIUS_CLASS_TO_CSS[rm[0]] : null;
+    if (radius) rules.push(`${fieldSel} { border-radius: ${radius}; }`);
+    const restShadow = restingValue(field, "box-shadow", ["shadow"]);
+    if (restShadow) rules.push(`${fieldSel} { box-shadow: ${restShadow}; }`);
+    const ringAlpha = field.match(/focus-visible:ring-2\s+(?:focus-visible:)?ring-ring\/(\d{1,2})/);
+    if (ringAlpha) {
+      const rest = restShadow ? `${restShadow}, ` : "";
+      rules.push(
+        `.ds-input:focus, .ds-textarea:focus, .ds-select:focus { outline: none; border-color: var(--ring); box-shadow: ${rest}0 0 0 2px color-mix(in oklab, var(--ring) ${ringAlpha[1]}%, transparent); }`
+      );
+    }
+  }
+  const translated = translatedKitComponentCss(contentOf, covered);
+  if (translated) rules.push(translated);
   const excluded = KIT_INTERACTIVE_EXCLUDED.filter((name) => has(name));
   return { css: rules.filter(Boolean).join("\n"), covered: [...covered].sort(), excluded };
 }
+function quotedStrings(scope) {
+  return [...scope.matchAll(/"([^"]*)"|'([^']*)'/g)].map((m) => m[1] ?? m[2]).join(" ");
+}
+function cvaBase(content) {
+  const i = content.search(/\bcva\s*\(/);
+  if (i === -1) return null;
+  const tail = content.slice(i, content.search(/variants\s*:/) !== -1 ? content.search(/variants\s*:/) : void 0);
+  const s = quotedStrings(tail);
+  return s || null;
+}
+function kitRuleFromClasses(selector, classString) {
+  const buckets = /* @__PURE__ */ new Map();
+  let usesTwVars = false;
+  for (const cls of new Set(classString.split(/\s+/).filter(Boolean))) {
+    const r = translateClass(cls);
+    if (!r || r.media || r.body === "") continue;
+    const esc = `.${escapeClassName(cls)}`;
+    if (!r.selector.startsWith(esc)) continue;
+    const suffix = r.selector.slice(esc.length);
+    if (r.body.includes("--tw-")) usesTwVars = true;
+    const bucket = buckets.get(suffix) ?? [];
+    bucket.push(r.body.replace(/;\s*$/, ""));
+    buckets.set(suffix, bucket);
+  }
+  const css = [...buckets.entries()].map(([suffix, bodies]) => {
+    const sel = selector.split(",").map((s) => `${s.trim()}${suffix}`).join(", ");
+    return `${sel} { ${bodies.join("; ")} }`;
+  }).join("\n");
+  return { css, usesTwVars };
+}
+function translatedKitComponentCss(contentOf, covered) {
+  const out = [];
+  let needsTwDefaults = false;
+  const emit = (selector, classes, component) => {
+    if (!classes) return;
+    const { css, usesTwVars } = kitRuleFromClasses(selector, classes);
+    if (css) {
+      out.push(css);
+      needsTwDefaults ||= usesTwVars;
+      if (component) covered.add(component);
+    }
+  };
+  const badge = contentOf(/(^|\/)badge\.(tsx|jsx)$/);
+  if (badge) {
+    const badgeDefault = variantBody(badge, "default");
+    emit(
+      ".ds-badge",
+      [cvaBase(badge), badgeDefault ? quotedStrings(badgeDefault) : null].filter(Boolean).join(" "),
+      "badge"
+    );
+  }
+  const button = contentOf(/(^|\/)button\.(tsx|jsx)$/);
+  if (button) {
+    emit(".ds-btn", cvaBase(button), "button");
+    emit(".ds-btn-primary", variantBody(button, "primary") ? quotedStrings(variantBody(button, "primary")) : variantBody(button, "default") ? quotedStrings(variantBody(button, "default")) : null);
+    for (const v of ["secondary", "outline", "ghost"]) {
+      const body = variantBody(button, v);
+      if (body) emit(`.ds-btn-${v}`, quotedStrings(body));
+    }
+  }
+  const shared = contentOf(/(^|\/)_shared\.(ts|tsx)$/);
+  const fieldScope = shared.match(/formFieldBase\s*=([\s\S]*?)(?:\nexport |$)/)?.[1] ?? contentOf(/(^|\/)input\.(tsx|jsx)$/);
+  if (fieldScope) {
+    emit(".ds-input, .ds-textarea, .ds-select", quotedStrings(fieldScope), "input");
+  }
+  const card = contentOf(/(^|\/)card\.(tsx|jsx)$/);
+  if (card) {
+    const root = card.match(/cn\(\s*([\s\S]*?)(?:,\s*className|\))/)?.[1];
+    if (root) emit(".ds-card", quotedStrings(root), "card");
+  }
+  if (out.length === 0) return "";
+  return (needsTwDefaults ? `${TW_DEFAULTS}
+` : "") + out.join("\n");
+}
 function extractRadiusScaleCss(rawGlobalsCss) {
   const decls = rawGlobalsCss.match(/--radius-[a-z0-9]+\s*:[^;]+;/g) ?? [];
   return decls.length ? `:root {
@@ -2272,6 +3795,7 @@ var init_preview_html = __esm({
   "../shared/src/mcp/preview-html.ts"() {
     "use strict";
     init_preview_widget_sdk_generated();
+    init_tw_translate();
     init_html_kit();
     SYSTEM_FONT_FAMILIES = /* @__PURE__ */ new Set([
       "arial",
@@ -3044,6 +4568,19 @@ async function fetchCatalog(designSystemId) {
 async function fetchCatalogTokensCss(designSystemId) {
   return (await fetchCatalog(designSystemId)).tokensCss;
 }
+async function fetchBaseVariantNames(designSystemId) {
+  try {
+    const res = await fetch(`${REGISTRY_BASE_URL}/${designSystemId}/index.json`, {
+      signal: AbortSignal.timeout(5e3)
+    });
+    if (!res.ok) return /* @__PURE__ */ new Set();
+    const parsed = DS_INDEX_SCHEMA.safeParse(await res.json());
+    if (!parsed.success) return /* @__PURE__ */ new Set();
+    return new Set((parsed.data.baseComponents ?? []).map((c) => c.name));
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
 function registerDesignSystemTools({
   server,
   provider,
@@ -3054,9 +4591,11 @@ function registerDesignSystemTools({
   const searchInputSchema = z4.object({
     query: z4.string().describe("Natural language query describing the type of UI you're building.")
   });
-  const searchDescription = () => `Search the Better Design catalog for an EXISTING design system via semantic search, and return its ID.
+  const searchDescription = () => `Search the Better Design catalog via semantic search and return ranked matches, each with a Preview link.
 
-For building an app, generate the user's OWN brand with create-design-system instead. Use this only to browse or inspect catalog systems (the user names one, or wants to preview before installing).
+**On a "build/make me <app>" request, call this FIRST.** Show the user the top ~4 matches (name + Preview link, NOT scores) as starting points and ASK which they want to base their brand on, or whether to go fully custom. Then pass the chosen id to create-design-system as \`baseDesignSystemId\`. Don't auto-pick or skip straight to generating, the user should choose the direction.
+
+Also use it to browse or inspect catalog systems (the user names one, or wants to preview before installing).
 
 Search by:
 - Industry (fintech, education, travel, developer tools)
@@ -3089,23 +4628,21 @@ Examples:
       }
       const formatted = results.map(
         (r) => [
-          `**ID:** ${r.id}`,
-          `**Title:** ${r.title}`,
-          `**Description:** ${r.description}`,
-          `**Personality:** ${r.personality.join(", ")}`,
-          `**Industry:** ${r.industry.join(", ")}`,
-          `**Components:** ${r.componentCount}`,
-          `**Match Score:** ${r.matchScore}%`,
-          `**Registry:** ${REGISTRY_BASE_URL}/${r.id}`
+          // Markdown link so the NAME is clickable in the host (Claude Code,
+          // ChatGPT, claude.ai all render markdown links). Keep it intact when
+          // presenting so the user can open the preview in one click.
+          `### [${r.title}](${APP_BASE_URL}/design-systems/${r.id})`,
+          `${r.description}`,
+          `_${r.personality.join(", ")}_ \xB7 id: \`${r.id}\``
         ].join("\n")
-      ).join("\n\n----------\n\n");
+      ).join("\n\n");
       return finish(
         {
           content: [{
             type: "text",
-            text: `# Available Design Systems
+            text: `# Catalog matches
 
-Each result includes an **ID** to use with get-design-system-docs.
+Present these to the user as options, keeping each name as its clickable markdown link (no scores) so they can open the preview. Ask which to start their brand from, or to go fully custom, then pass the chosen \`id\` as \`baseDesignSystemId\` to create-design-system.
 
 ---
 
@@ -3150,10 +4687,20 @@ full component library available.
 
 Pass 'component' only when the user explicitly asks to inspect or customise a
 specific component's source code. In that mode the tool returns the requested
-components, a scoped install command, and their source code.`,
+components, a scoped install command, and their source code.
+
+Base UI (@base-ui/react) is the default flavor. BEFORE installing, inspect the
+user's project: if package.json has any @radix-ui/* dependency (or
+components/ui already imports @radix-ui), pass 'library: "radix"' to match their
+existing setup; otherwise use the default Base UI. Both flavors install to the
+same components/ui/ paths.
+
+${BUILD_TARGET_RULE}`,
       inputSchema: z4.object({
         designSystemId: z4.string().describe("The design system ID from find-design-system"),
-        component: z4.union([z4.string(), z4.array(z4.string())]).optional().describe('Optional. Only pass this when the user asks to inspect specific component source code. Examples: "button", ["button", "card"]. Omit to scaffold the entire design system.')
+        component: z4.union([z4.string(), z4.array(z4.string())]).optional().describe('Optional. Only pass this when the user asks to inspect specific component source code. Examples: "button", ["button", "card"]. Omit to scaffold the entire design system.'),
+        library: z4.enum(["radix", "base-ui"]).optional().describe('Optional, default "base-ui". Base UI (@base-ui/react) is the default flavor; pass "radix" to force the Radix flavor when the project already uses Radix primitives. If a design system has no Base UI port yet, the tool falls back to Radix with a note.'),
+        context: CONTEXT_ARG
       }),
       outputSchema: PREVIEW_OUTPUT_SCHEMA,
       annotations: { readOnlyHint: true },
@@ -3163,7 +4710,7 @@ components, a scoped install command, and their source code.`,
         "openai/outputTemplate": DS_PREVIEW_WIDGET_URI
       }
     },
-    async ({ designSystemId, component }) => tracked("get-design-system-docs", { designSystemId, component }, async () => {
+    async ({ designSystemId, component, library, context }) => tracked("get-design-system-docs", { designSystemId, component, library, context }, async () => {
       try {
         const system = await provider.getDesignSystemById(designSystemId);
         if (!system) {
@@ -3191,11 +4738,51 @@ components, a scoped install command, and their source code.`,
         if (metadata.borderRadius) header.push(`**Border Radius:** ${metadata.borderRadius}`);
         if (metadata.font) header.push(`**Font:** ${metadata.font}`);
         header.push(`**Preview (see it live):** ${APP_BASE_URL}/design-systems/${metadata.id}`);
+        const wantsBase = library !== "radix";
+        const baseNames = wantsBase ? await fetchBaseVariantNames(metadata.id) : /* @__PURE__ */ new Set();
+        const baseUnavailableNote = wantsBase && baseNames.size === 0 ? `
+> Note: ${metadata.title} has no Base UI port yet, so the commands below install the Radix components.
+` : "";
+        const toInstallName = (name) => baseNames.has(`${name}-base`) ? `${name}-base` : name;
+        const describeInstall = (installNames) => {
+          const componentInstallNames = installNames.filter((name) => name !== "globals");
+          const baseCount = componentInstallNames.filter((name) => name.endsWith("-base")).length;
+          const plainCount = componentInstallNames.length - baseCount;
+          if (!wantsBase) {
+            return {
+              installLibrary: "radix",
+              installNote: "This installs the Radix flavor (matched to the project's existing Radix primitives)."
+            };
+          }
+          if (baseNames.size === 0) {
+            return {
+              installLibrary: "radix",
+              installNote: "This installs the Radix flavor because this design system has no Base UI port yet."
+            };
+          }
+          if (baseCount > 0 && plainCount > 0) {
+            return {
+              installLibrary: "mixed",
+              installNote: 'This installs the Base UI flavor where available, plus plain registry entries for components without a Base UI twin. If the project uses Radix, re-run this tool with `library: "radix"` instead.'
+            };
+          }
+          if (baseCount > 0) {
+            return {
+              installLibrary: "base-ui",
+              installNote: 'This installs the Base UI flavor (the default). If the project uses Radix, re-run this tool with `library: "radix"` instead.'
+            };
+          }
+          return {
+            installLibrary: "radix",
+            installNote: "This installs plain registry entries because the requested components do not have Base UI twins yet."
+          };
+        };
         if (!component) {
           const installNames = [
             "globals",
-            ...allComponents.map((c) => c.name).sort()
+            ...allComponents.map((c) => toInstallName(c.name)).sort()
           ];
+          const { installLibrary: installLibrary2, installNote: installNote2 } = describeInstall(installNames);
           const installUrls = installNames.map((name) => `${REGISTRY_BASE_URL}/${metadata.id}/${name}.json`).join(" \\\n  ");
           const installCommand2 = `npx shadcn@latest add \\
   ${installUrls}`;
@@ -3203,6 +4790,7 @@ components, a scoped install command, and their source code.`,
           const parts2 = [
             ...header,
             "\n## Scaffold the full design system\n",
+            ...baseUnavailableNote ? [baseUnavailableNote] : [],
             "_This is the React path, the right call whenever you have a filesystem + terminal. Build real components from `components/ui/`. Only fall back to `get-design-system-html` for inline chat canvases (ChatGPT / Claude artifacts) that cannot run a build._\n",
             REQUIREMENTS_MD,
             `Run these commands in the user's project root. The first **conditionally** runs \`shadcn init\` only when the project hasn't been set up yet (no \`components.json\`); the second installs **all ${installNames.length} pieces** (globals.css + ${allComponents.length} components) into \`components/ui/\` with a single shadcn invocation:`,
@@ -3214,6 +4802,8 @@ components, a scoped install command, and their source code.`,
             `# 2. Install Better Design's full DS into components/ui/`,
             installCommand2,
             "```",
+            `
+_${installNote2}_`,
             ANTI_MOCKUP_MD,
             "\nAfter the install completes, read files from `components/ui/` directly when writing feature code. Do not ask this tool for component source unless the user wants to inspect or customise a specific file.",
             "\n## Included components\n",
@@ -3222,7 +4812,12 @@ components, a scoped install command, and their source code.`,
           ];
           return {
             content: [{ type: "text", text: parts2.join("\n") }],
-            structuredContent: { ...previewStructured, installCommand: structuredInstallCommand2 }
+            structuredContent: {
+              ...previewStructured,
+              installCommand: structuredInstallCommand2,
+              installLibrary: installLibrary2,
+              installNote: installNote2
+            }
           };
         }
         const componentNames = Array.isArray(component) ? component : [component];
@@ -3249,13 +4844,16 @@ components, a scoped install command, and their source code.`,
             }
           };
         }
-        const scopedUrls = resolvedNames.map((name) => `${REGISTRY_BASE_URL}/${metadata.id}/${name}.json`).join(" \\\n  ");
+        const scopedInstallNames = resolvedNames.map((name) => toInstallName(name));
+        const { installLibrary, installNote } = describeInstall(scopedInstallNames);
+        const scopedUrls = scopedInstallNames.map((name) => `${REGISTRY_BASE_URL}/${metadata.id}/${name}.json`).join(" \\\n  ");
         const installCommand = `npx shadcn@latest add \\
   ${scopedUrls}`;
         const structuredInstallCommand = installCommandWithInit(installCommand);
         const parts = [
           ...header,
           "\n## Install just these components\n",
+          ...baseUnavailableNote ? [baseUnavailableNote] : [],
           REQUIREMENTS_MD,
           "```bash",
           `# Init shadcn if missing (idempotent, skips when components.json exists)`,
@@ -3263,6 +4861,8 @@ components, a scoped install command, and their source code.`,
           "",
           installCommand,
           "```",
+          `
+_${installNote}_`,
           ANTI_MOCKUP_MD,
           "\n---\n"
         ];
@@ -3278,7 +4878,12 @@ components, a scoped install command, and their source code.`,
         }
         return {
           content: [{ type: "text", text: parts.join("\n") }],
-          structuredContent: { ...previewStructured, installCommand: structuredInstallCommand }
+          structuredContent: {
+            ...previewStructured,
+            installCommand: structuredInstallCommand,
+            installLibrary,
+            installNote
+          }
         };
       } catch (error) {
         return {
@@ -3294,7 +4899,7 @@ components, a scoped install command, and their source code.`,
       title: "Create a New Design System",
       description: `Generate a brand new design system tailored to the user's product, and return a single shadcn install command that lands the entire set of components + tokens (globals.css) into the user's Next.js project.
 
-**Use this PROACTIVELY on any "build/make me <app>" request \u2014 even when the user never mentions design or branding.** A design system IS the app's brand/visual identity, so creating one first is the right first step for building an app: derive the \`prompt\` from the app (its name, domain, and vibe), generate the brand, show it with \`get-design-system-status\`, then build the app with that brand. Also use it when the user explicitly wants a **custom** design system instead of installing an existing one via 'get-design-system-docs'.
+**Use this on any "build/make me <app>" request \u2014 even when the user never mentions design or branding** (a design system IS the app's brand). But DON'T jump straight here: first call \`find-design-system\` with the app description, show the user the top ~4 matches, and ask which to start from (passed here as \`baseDesignSystemId\`) or whether to go fully custom. Then derive the \`prompt\` from the app (name, domain, vibe), generate, show it with \`get-design-system-status\`, and build with that brand. Also use it when the user explicitly wants a **custom** design system instead of installing an existing one via 'get-design-system-docs'.
 
 How it works:
 1. Sends the user's prompt to Better Design's generation pipeline (same flow the web chat input uses) and returns IMMEDIATELY with the project id + project URL.
@@ -3304,7 +4909,7 @@ How it works:
 Share the project URL with the user right away so they can watch the generation live.`,
       inputSchema: z4.object({
         prompt: z4.string().min(1).max(1e4).describe("Describe the design system the user wants. E.g. 'A warm, minimal design system for a personal finance app, soft pastels, rounded corners' or 'A brutalist developer tool aesthetic with sharp edges and monospace type'."),
-        baseDesignSystemId: z4.string().optional().describe("Optional. Pass a design system ID from `find-design-system` to bias generation toward an existing aesthetic (e.g. apply a theme tweak on top of Linear). Leave empty for a fully custom DS.")
+        baseDesignSystemId: z4.string().optional().describe("Optional. The catalog id the USER picked from the `find-design-system` matches you showed them, used to bias generation toward that aesthetic (e.g. a theme tweak on top of Linear). Leave empty only when the user chose fully custom.")
       }),
       annotations: {
         readOnlyHint: false,
@@ -3407,7 +5012,9 @@ npx shadcn@latest add ${registryUrl}
         ANTI_MOCKUP_MD,
         inlineBuildMd(projectId),
         "",
-        `In a real codebase, run the install above; do NOT hand-build an HTML/React copy of the components. The preview widget already shows it, and ${projectUrl} has the full showcase.`
+        `In a real codebase, run the install above; do NOT hand-build an HTML/React copy of the components. The preview widget already shows it, and ${projectUrl} has the full showcase.`,
+        "",
+        `Now help the user finish, don't stop here. No icon library has been picked yet: call \`find-icon-library\` (query from the brand's personality), SHOW them the closest matches and let them pick one, then \`install-icons\`. After that, ask if they want to start building components.`
       ];
       const previewUrl = project.previewFragmentId ? `${APP_BASE_URL}/preview/${project.previewFragmentId}` : projectUrl;
       const shotUrl = project.previewFragmentId ? `${APP_BASE_URL}/api/og/preview?fragment=${project.previewFragmentId}` : void 0;
@@ -3446,9 +5053,10 @@ Check again in ~30 seconds. Watch it live on the project page: ${projectUrl}` }]
   };
   const statusConfig = {
     title: "Get Design System Generation Status",
-    description: `Check on a design system generation started with 'create-design-system'. Returns progress while generating, and the live preview URL + the \`npx shadcn add\` install command once complete. Generation typically takes 1-3 minutes; poll every ~30 seconds until it reports ready.`,
+    description: `Check on a design system generation started with 'create-design-system'. Returns progress while generating, and the live preview URL + the \`npx shadcn add\` install command once complete. Generation typically takes 1-3 minutes; poll every ~30 seconds until it reports ready. Once ready, ask the user what's next (icon library, install, or build) instead of stopping.`,
     inputSchema: z4.object({
-      projectId: z4.string().min(1).describe("The project id returned by create-design-system.")
+      projectId: z4.string().min(1).describe("The project id returned by create-design-system."),
+      context: CONTEXT_ARG
     }),
     outputSchema: PREVIEW_OUTPUT_SCHEMA,
     annotations: { readOnlyHint: true, destructiveHint: false, openWorldHint: false },
@@ -3463,7 +5071,7 @@ Check again in ~30 seconds. Watch it live on the project page: ${projectUrl}` }]
   server.registerTool(
     "get-design-system-status",
     statusConfig,
-    ({ projectId }) => tracked("get-design-system-status", {}, () => runDesignSystemStatus(projectId))
+    ({ projectId, context }) => tracked("get-design-system-status", { context }, () => runDesignSystemStatus(projectId))
   );
   server.registerTool(
     "preview-design-system",
@@ -3471,7 +5079,8 @@ Check again in ~30 seconds. Watch it live on the project page: ${projectUrl}` }]
       title: "Preview a Design System",
       description: `Show the user a visual preview of a design system from the catalog (use the id from 'find-design-system'). Returns a token-true HTML preview: palette, typography, buttons, card, input, badge, plus a link to the full live showcase. Use this when the user wants to SEE a design system before installing it.`,
       inputSchema: z4.object({
-        designSystemId: z4.string().min(1).describe("Design system id from find-design-system, e.g. 'linear', 'editorial-warm'.")
+        designSystemId: z4.string().min(1).describe("Design system id from find-design-system, e.g. 'linear', 'editorial-warm'."),
+        context: CONTEXT_ARG
       }),
       outputSchema: PREVIEW_OUTPUT_SCHEMA,
       annotations: {
@@ -3487,7 +5096,7 @@ Check again in ~30 seconds. Watch it live on the project page: ${projectUrl}` }]
         "openai/toolInvocation/invoked": "Preview ready"
       }
     },
-    async ({ designSystemId }) => tracked("preview-design-system", { designSystemId }, async () => {
+    async ({ designSystemId, context }) => tracked("preview-design-system", { designSystemId, context }, async () => {
       const ds = await provider.getDesignSystemById(designSystemId);
       if (!ds) {
         return {
@@ -3532,12 +5141,15 @@ Check again in ~30 seconds. Watch it live on the project page: ${projectUrl}` }]
       title: "Get a Design System as HTML/CSS",
       description: `Export a design system as plain, framework-free HTML + CSS for building an app INLINE (ChatGPT canvas / Claude artifact) where npm and a Tailwind build are unavailable. Returns the system's real design tokens (globals.css) plus a token-driven component CSS kit (button, input, card, badge, alert, etc.) and an example to riff on.
 
+The response ends with a usage guide ("How to use"). Follow EVERY rule in it when building: paste the CSS blocks verbatim (never retype them), compose ONLY the \`ds-*\` component classes (custom classes are for layout only), and wire the few lines of JS that make controls actually work. The guide is the contract that keeps the build on-brand; never restyle the components it ships.
+
 Works for BOTH a catalog system (pass \`designSystemId\` from find-design-system) AND a custom system you just generated (pass \`projectId\` from create-design-system / get-design-system-status).
 
 ${BUILD_TARGET_RULE}`,
       inputSchema: z4.object({
         designSystemId: z4.string().min(1).optional().describe("Catalog design system id from find-design-system, e.g. 'linear', 'editorial-warm'. Pass this OR projectId."),
-        projectId: z4.string().min(1).optional().describe("Project id from create-design-system / get-design-system-status, for a custom generated DS. Pass this OR designSystemId.")
+        projectId: z4.string().min(1).optional().describe("Project id from create-design-system / get-design-system-status, for a custom generated DS. Pass this OR designSystemId."),
+        context: CONTEXT_ARG
       }),
       annotations: {
         readOnlyHint: true,
@@ -3545,7 +5157,7 @@ ${BUILD_TARGET_RULE}`,
         openWorldHint: false
       }
     },
-    async ({ designSystemId, projectId }) => tracked("get-design-system-html", { designSystemId, projectId }, async () => {
+    async ({ designSystemId, projectId, context }) => tracked("get-design-system-html", { designSystemId, projectId, context }, async () => {
       if (projectId) {
         const result = await fetchProjectTokensCss(projectId, authContext);
         const viewUrl2 = `${APP_BASE_URL}/projects/${projectId}`;
@@ -3582,7 +5194,9 @@ ${BUILD_TARGET_RULE}`,
         const fence2 = "`".repeat(Math.max(3, longestRun + 1));
         return { content: [{ type: "text", text: `${steer}${intro}${fence2}html
 ${ds.metadata.html}
-${fence2}` }] };
+${fence2}
+
+${HTML_KIT_CONDUCT_MD}` }] };
       }
       const { tokensCss, files } = await fetchCatalog(designSystemId);
       if (!tokensCss) {
@@ -3596,7 +5210,7 @@ ${fence2}` }] };
     })
   );
 }
-var REGISTRY_ITEM_SCHEMA, SHADCN_INIT_IF_MISSING, SAFE_COMPONENT_NAME_RE, CATALOG_KIT_COMPONENTS;
+var REGISTRY_ITEM_SCHEMA, SHADCN_INIT_IF_MISSING, SAFE_COMPONENT_NAME_RE, CATALOG_KIT_COMPONENTS, DS_INDEX_SCHEMA;
 var init_design_system_tools = __esm({
   "../shared/src/mcp/tools/design-system-tools.ts"() {
     "use strict";
@@ -3615,6 +5229,572 @@ var init_design_system_tools = __esm({
     SHADCN_INIT_IF_MISSING = "[ -f components.json ] || npx shadcn@latest init -d -y";
     SAFE_COMPONENT_NAME_RE = /^[a-z0-9][a-z0-9-]*$/i;
     CATALOG_KIT_COMPONENTS = ["button", "input", "card", "badge", "switch"];
+    DS_INDEX_SCHEMA = z4.object({
+      baseComponents: z4.array(z4.object({ name: z4.string() })).optional()
+    });
+  }
+});
+
+// ../shared/src/registry-css.ts
+function parseCssVars(css) {
+  const out = { theme: {}, light: {}, dark: {} };
+  const matchBlock = (selector) => {
+    const re = new RegExp(`${selector}\\s*\\{([^}]*)\\}`, "g");
+    const blocks = [];
+    let m;
+    while (m = re.exec(css)) blocks.push(m[1]);
+    return blocks.join("\n");
+  };
+  const extract = (body) => {
+    const result = {};
+    const clean = body.replace(/\/\*[\s\S]*?\*\//g, "");
+    const declRe = /--([a-zA-Z0-9_-]+)\s*:\s*([^;]+);/g;
+    let m;
+    while (m = declRe.exec(clean)) {
+      result[m[1]] = m[2].replace(/\s+/g, " ").trim();
+    }
+    return result;
+  };
+  out.light = extract(matchBlock(":root"));
+  out.dark = extract(matchBlock("\\.dark"));
+  return out;
+}
+var init_registry_css = __esm({
+  "../shared/src/registry-css.ts"() {
+    "use strict";
+  }
+});
+
+// ../shared/src/mcp/color-to-oklch.ts
+function clamp01(n) {
+  return Math.min(1, Math.max(0, n));
+}
+function round(n, places) {
+  const f = 10 ** places;
+  return Math.round(n * f) / f;
+}
+function parseAlpha(raw) {
+  if (raw == null) return 1;
+  const s = raw.trim();
+  if (s.endsWith("%")) return clamp01(parseFloat(s) / 100);
+  const n = parseFloat(s);
+  return Number.isFinite(n) ? clamp01(n) : 1;
+}
+function parseChannel(raw) {
+  const s = raw.trim();
+  if (s.endsWith("%")) return clamp01(parseFloat(s) / 100);
+  return clamp01(parseFloat(s) / 255);
+}
+function parseHex(hex) {
+  let h = hex.trim().replace(/^#/, "");
+  if (![3, 4, 6, 8].includes(h.length) || /[^0-9a-fA-F]/.test(h)) return null;
+  if (h.length === 3 || h.length === 4) {
+    h = h.split("").map((c) => c + c).join("");
+  }
+  const r = parseInt(h.slice(0, 2), 16) / 255;
+  const g = parseInt(h.slice(2, 4), 16) / 255;
+  const b = parseInt(h.slice(4, 6), 16) / 255;
+  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
+  return { r, g, b, a };
+}
+function splitColorArgs(inner) {
+  let alpha;
+  let body = inner;
+  const slash = inner.indexOf("/");
+  if (slash !== -1) {
+    alpha = inner.slice(slash + 1);
+    body = inner.slice(0, slash);
+  }
+  const parts = body.trim().split(/[\s,]+/).filter(Boolean);
+  if (alpha === void 0 && parts.length === 4) {
+    alpha = parts.pop();
+  }
+  return { parts, alpha };
+}
+function finiteRgba(rgba) {
+  return [rgba.r, rgba.g, rgba.b, rgba.a].every((n) => Number.isFinite(n)) ? rgba : null;
+}
+function parseRgb(value) {
+  const m = value.match(/^rgba?\(([^)]+)\)$/i);
+  if (!m) return null;
+  const { parts, alpha } = splitColorArgs(m[1]);
+  if (parts.length < 3) return null;
+  return finiteRgba({
+    r: parseChannel(parts[0]),
+    g: parseChannel(parts[1]),
+    b: parseChannel(parts[2]),
+    a: parseAlpha(alpha)
+  });
+}
+function hueToRgb(p, q, t) {
+  let tt = t;
+  if (tt < 0) tt += 1;
+  if (tt > 1) tt -= 1;
+  if (tt < 1 / 6) return p + (q - p) * 6 * tt;
+  if (tt < 1 / 2) return q;
+  if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6;
+  return p;
+}
+function parseHue(raw) {
+  const s = raw.trim().toLowerCase();
+  const n = parseFloat(s);
+  if (!Number.isFinite(n)) return NaN;
+  if (s.endsWith("turn")) return n * 360;
+  if (s.endsWith("grad")) return n * 0.9;
+  if (s.endsWith("rad")) return n * (180 / Math.PI);
+  return n;
+}
+function parseHsl(value) {
+  const m = value.match(/^hsla?\(([^)]+)\)$/i);
+  if (!m) return null;
+  const { parts, alpha } = splitColorArgs(m[1]);
+  if (parts.length < 3) return null;
+  const hRaw = parseHue(parts[0]);
+  const sRaw = parseFloat(parts[1]);
+  const lRaw = parseFloat(parts[2]);
+  if (![hRaw, sRaw, lRaw].every((n) => Number.isFinite(n))) return null;
+  const h = (hRaw % 360 + 360) % 360 / 360;
+  const s = clamp01(sRaw / 100);
+  const l = clamp01(lRaw / 100);
+  let r;
+  let g;
+  let b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hueToRgb(p, q, h + 1 / 3);
+    g = hueToRgb(p, q, h);
+    b = hueToRgb(p, q, h - 1 / 3);
+  }
+  return { r, g, b, a: parseAlpha(alpha) };
+}
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function rgbaToOklch({ r, g, b, a }) {
+  const lr = srgbToLinear(r);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+  const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+  const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+  const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  const aa = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const bb = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+  const C = Math.sqrt(aa * aa + bb * bb);
+  let h = Math.atan2(bb, aa) * 180 / Math.PI;
+  if (h < 0) h += 360;
+  const Lr = round(clamp01(L), 4);
+  const Cr = round(Math.max(0, C), 4);
+  const hr = Cr < 5e-4 ? 0 : round(h, 2);
+  const core = `${Lr} ${Cr} ${hr}`;
+  return a < 1 ? `oklch(${core} / ${round(a, 3)})` : `oklch(${core})`;
+}
+function toOklch(value) {
+  const v = value.trim();
+  if (!v) return null;
+  const lower = v.toLowerCase();
+  if (lower.startsWith("oklch(")) return v;
+  if (lower === "transparent") return "oklch(0 0 0 / 0)";
+  if (PASSTHROUGH_KEYWORDS.has(lower)) return v;
+  if (NON_COLOR_KEYWORDS.has(lower)) return null;
+  const named = NAMED_HEX[lower];
+  if (named) {
+    const rgbaNamed = parseHex(named);
+    if (rgbaNamed) return rgbaToOklch(rgbaNamed);
+  }
+  let rgba = null;
+  if (v.startsWith("#")) rgba = parseHex(v);
+  else if (/^rgba?\(/i.test(v)) rgba = parseRgb(v);
+  else if (/^hsla?\(/i.test(v)) rgba = parseHsl(v);
+  return rgba ? rgbaToOklch(rgba) : null;
+}
+var NAMED_HEX, PASSTHROUGH_KEYWORDS, NON_COLOR_KEYWORDS;
+var init_color_to_oklch = __esm({
+  "../shared/src/mcp/color-to-oklch.ts"() {
+    "use strict";
+    NAMED_HEX = {
+      aliceblue: "#f0f8ff",
+      antiquewhite: "#faebd7",
+      aqua: "#00ffff",
+      aquamarine: "#7fffd4",
+      azure: "#f0ffff",
+      beige: "#f5f5dc",
+      bisque: "#ffe4c4",
+      black: "#000000",
+      blanchedalmond: "#ffebcd",
+      blue: "#0000ff",
+      blueviolet: "#8a2be2",
+      brown: "#a52a2a",
+      burlywood: "#deb887",
+      cadetblue: "#5f9ea0",
+      chartreuse: "#7fff00",
+      chocolate: "#d2691e",
+      coral: "#ff7f50",
+      cornflowerblue: "#6495ed",
+      cornsilk: "#fff8dc",
+      crimson: "#dc143c",
+      cyan: "#00ffff",
+      darkblue: "#00008b",
+      darkcyan: "#008b8b",
+      darkgoldenrod: "#b8860b",
+      darkgray: "#a9a9a9",
+      darkgreen: "#006400",
+      darkgrey: "#a9a9a9",
+      darkkhaki: "#bdb76b",
+      darkmagenta: "#8b008b",
+      darkolivegreen: "#556b2f",
+      darkorange: "#ff8c00",
+      darkorchid: "#9932cc",
+      darkred: "#8b0000",
+      darksalmon: "#e9967a",
+      darkseagreen: "#8fbc8f",
+      darkslateblue: "#483d8b",
+      darkslategray: "#2f4f4f",
+      darkslategrey: "#2f4f4f",
+      darkturquoise: "#00ced1",
+      darkviolet: "#9400d3",
+      deeppink: "#ff1493",
+      deepskyblue: "#00bfff",
+      dimgray: "#696969",
+      dimgrey: "#696969",
+      dodgerblue: "#1e90ff",
+      firebrick: "#b22222",
+      floralwhite: "#fffaf0",
+      forestgreen: "#228b22",
+      fuchsia: "#ff00ff",
+      gainsboro: "#dcdcdc",
+      ghostwhite: "#f8f8ff",
+      gold: "#ffd700",
+      goldenrod: "#daa520",
+      gray: "#808080",
+      green: "#008000",
+      greenyellow: "#adff2f",
+      grey: "#808080",
+      honeydew: "#f0fff0",
+      hotpink: "#ff69b4",
+      indianred: "#cd5c5c",
+      indigo: "#4b0082",
+      ivory: "#fffff0",
+      khaki: "#f0e68c",
+      lavender: "#e6e6fa",
+      lavenderblush: "#fff0f5",
+      lawngreen: "#7cfc00",
+      lemonchiffon: "#fffacd",
+      lightblue: "#add8e6",
+      lightcoral: "#f08080",
+      lightcyan: "#e0ffff",
+      lightgoldenrodyellow: "#fafad2",
+      lightgray: "#d3d3d3",
+      lightgreen: "#90ee90",
+      lightgrey: "#d3d3d3",
+      lightpink: "#ffb6c1",
+      lightsalmon: "#ffa07a",
+      lightseagreen: "#20b2aa",
+      lightskyblue: "#87cefa",
+      lightslategray: "#778899",
+      lightslategrey: "#778899",
+      lightsteelblue: "#b0c4de",
+      lightyellow: "#ffffe0",
+      lime: "#00ff00",
+      limegreen: "#32cd32",
+      linen: "#faf0e6",
+      magenta: "#ff00ff",
+      maroon: "#800000",
+      mediumaquamarine: "#66cdaa",
+      mediumblue: "#0000cd",
+      mediumorchid: "#ba55d3",
+      mediumpurple: "#9370db",
+      mediumseagreen: "#3cb371",
+      mediumslateblue: "#7b68ee",
+      mediumspringgreen: "#00fa9a",
+      mediumturquoise: "#48d1cc",
+      mediumvioletred: "#c71585",
+      midnightblue: "#191970",
+      mintcream: "#f5fffa",
+      mistyrose: "#ffe4e1",
+      moccasin: "#ffe4b5",
+      navajowhite: "#ffdead",
+      navy: "#000080",
+      oldlace: "#fdf5e6",
+      olive: "#808000",
+      olivedrab: "#6b8e23",
+      orange: "#ffa500",
+      orangered: "#ff4500",
+      orchid: "#da70d6",
+      palegoldenrod: "#eee8aa",
+      palegreen: "#98fb98",
+      paleturquoise: "#afeeee",
+      palevioletred: "#db7093",
+      papayawhip: "#ffefd5",
+      peachpuff: "#ffdab9",
+      peru: "#cd853f",
+      pink: "#ffc0cb",
+      plum: "#dda0dd",
+      powderblue: "#b0e0e6",
+      purple: "#800080",
+      rebeccapurple: "#663399",
+      red: "#ff0000",
+      rosybrown: "#bc8f8f",
+      royalblue: "#4169e1",
+      saddlebrown: "#8b4513",
+      salmon: "#fa8072",
+      sandybrown: "#f4a460",
+      seagreen: "#2e8b57",
+      seashell: "#fff5ee",
+      sienna: "#a0522d",
+      silver: "#c0c0c0",
+      skyblue: "#87ceeb",
+      slateblue: "#6a5acd",
+      slategray: "#708090",
+      slategrey: "#708090",
+      snow: "#fffafa",
+      springgreen: "#00ff7f",
+      steelblue: "#4682b4",
+      tan: "#d2b48c",
+      teal: "#008080",
+      thistle: "#d8bfd8",
+      tomato: "#ff6347",
+      turquoise: "#40e0d0",
+      violet: "#ee82ee",
+      wheat: "#f5deb3",
+      white: "#ffffff",
+      whitesmoke: "#f5f5f5",
+      yellow: "#ffff00",
+      yellowgreen: "#9acd32"
+    };
+    PASSTHROUGH_KEYWORDS = /* @__PURE__ */ new Set(["currentcolor"]);
+    NON_COLOR_KEYWORDS = /* @__PURE__ */ new Set(["inherit", "initial", "unset"]);
+  }
+});
+
+// ../shared/src/mcp/extract-design-system.ts
+function classify(name, value) {
+  const n = name.toLowerCase();
+  if (n.includes("shadow")) return "shadow";
+  if (n.includes("font")) return "font";
+  if (n.includes("radius")) return "radius";
+  if (toOklch(value) !== null) return "color";
+  return "other";
+}
+function extractThemeBlock(css) {
+  const out = {};
+  const stripped = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  const re = /@theme[^{]*\{([^}]*)\}/g;
+  let block;
+  while (block = re.exec(stripped)) {
+    const declRe = /--([a-zA-Z0-9_-]+)\s*:\s*([^;}]+);?/g;
+    let m;
+    while (m = declRe.exec(block[1])) {
+      out[m[1]] = m[2].replace(/\s+/g, " ").trim();
+    }
+  }
+  return out;
+}
+function denamespace(name) {
+  return name.replace(/^color-/, "");
+}
+function normalizeMap(raw) {
+  const tokens = {};
+  const kinds = {};
+  for (const [rawName, value] of Object.entries(raw)) {
+    const kind = classify(rawName, value);
+    const normalizedValue = kind === "color" ? toOklch(value) ?? value : value;
+    tokens[rawName] = normalizedValue;
+    kinds[rawName] = kind;
+  }
+  return { tokens, kinds };
+}
+function extractDesignSystem(css, name) {
+  const { light: rootLight, dark: rootDark } = parseCssVars(css);
+  const themeVars = extractThemeBlock(css);
+  const mergedLight = {};
+  for (const [k, v] of Object.entries(themeVars)) {
+    mergedLight[denamespace(k)] = v;
+  }
+  Object.assign(mergedLight, rootLight);
+  const light = normalizeMap(mergedLight);
+  const dark = normalizeMap(rootDark);
+  const hasLight = Object.keys(light.tokens).length > 0;
+  const hasDark = Object.keys(dark.tokens).length > 0;
+  const themeMode = hasLight && hasDark ? "dual" : hasDark ? "dark" : hasLight ? "light" : "none";
+  const primaryKinds = hasLight ? light.kinds : dark.kinds;
+  return {
+    name,
+    themeMode,
+    light: light.tokens,
+    dark: dark.tokens,
+    kinds: primaryKinds,
+    tokenCount: (/* @__PURE__ */ new Set([...Object.keys(light.tokens), ...Object.keys(dark.tokens)])).size
+  };
+}
+function orderedEntries(tokens) {
+  const names = Object.keys(tokens);
+  const rank = (n) => {
+    const i = SEMANTIC_ORDER.indexOf(n);
+    return i === -1 ? SEMANTIC_ORDER.length : i;
+  };
+  return names.sort((a, b) => rank(a) - rank(b) || a.localeCompare(b)).map((n) => [n, tokens[n]]);
+}
+function renderBlock(selector, tokens) {
+  const lines = orderedEntries(tokens).map(([n, v]) => `  --${n}: ${v};`);
+  return `${selector} {
+${lines.join("\n")}
+}`;
+}
+function formatExtraction(result) {
+  if (result.themeMode === "none") {
+    return [
+      "# No design tokens found",
+      "",
+      "Could not find any CSS custom properties (`--name: value;`) in a `:root`, `.dark`, or `@theme` block.",
+      "Paste the contents of the project's `globals.css` (or wherever the design tokens live) as the `css` argument."
+    ].join("\n");
+  }
+  const base = Object.keys(result.light).length > 0 ? result.light : result.dark;
+  const pick = (n) => base[n];
+  const swatch = (label, n) => {
+    const v = pick(n);
+    return v ? `- **${label}** (\`--${n}\`): \`${v}\`` : null;
+  };
+  const palette = [
+    swatch("Primary", "primary"),
+    swatch("Background", "background"),
+    swatch("Foreground", "foreground"),
+    swatch("Accent", "accent"),
+    swatch("Secondary", "secondary"),
+    swatch("Border", "border"),
+    swatch("Ring", "ring"),
+    swatch("Destructive", "destructive")
+  ].filter(Boolean);
+  const radius = pick("radius");
+  const fontSans = pick("font-sans");
+  const fontMono = pick("font-mono");
+  const shadowCount = Object.values(result.kinds).filter((k) => k === "shadow").length;
+  const modeLabel = {
+    light: "single light theme",
+    dark: "single dark theme",
+    dual: "light + dark themes",
+    none: "none"
+  };
+  const meta = [
+    result.name ? `**Source:** ${result.name}` : null,
+    `**Theme:** ${modeLabel[result.themeMode]}`,
+    `**Tokens extracted:** ${result.tokenCount}`,
+    `**Colors normalized to oklch.**`
+  ].filter(Boolean);
+  const blocks = [];
+  if (Object.keys(result.light).length > 0) {
+    blocks.push(renderBlock(":root", result.light));
+  }
+  if (Object.keys(result.dark).length > 0) {
+    blocks.push(renderBlock(".dark", result.dark));
+  }
+  const details = [];
+  if (radius) details.push(`- **Radius:** \`${radius}\``);
+  if (fontSans) details.push(`- **Font (sans):** \`${fontSans}\``);
+  if (fontMono) details.push(`- **Font (mono):** \`${fontMono}\``);
+  if (shadowCount > 0) details.push(`- **Shadow scale:** ${shadowCount} token${shadowCount === 1 ? "" : "s"}`);
+  const sections = [
+    `# Extracted design system${result.name ? `: ${result.name}` : ""}`,
+    meta.join("  \n"),
+    "## Palette\n" + (palette.length ? palette.join("\n") : "_No semantic color tokens recognized; see the full token sheet below._")
+  ];
+  if (details.length) {
+    sections.push("## Type, radius & depth\n" + details.join("\n"));
+  }
+  sections.push(
+    "## Token sheet (oklch-normalized, paste into globals.css)\n\n```css\n" + blocks.join("\n\n") + "\n```",
+    "## How to use\n- Style new components against these tokens (`bg-background`, `text-foreground`, `bg-primary`, `border-border`, `ring-ring`) so they match the existing app.\n- To turn this into a full Better Design system, pass the palette to `create-design-system` as the brand description."
+  );
+  return sections.join("\n\n");
+}
+var SEMANTIC_ORDER;
+var init_extract_design_system = __esm({
+  "../shared/src/mcp/extract-design-system.ts"() {
+    "use strict";
+    init_registry_css();
+    init_color_to_oklch();
+    SEMANTIC_ORDER = [
+      "background",
+      "foreground",
+      "card",
+      "card-foreground",
+      "popover",
+      "popover-foreground",
+      "primary",
+      "primary-foreground",
+      "secondary",
+      "secondary-foreground",
+      "muted",
+      "muted-foreground",
+      "accent",
+      "accent-foreground",
+      "destructive",
+      "destructive-foreground",
+      "border",
+      "input",
+      "ring",
+      "chart-1",
+      "chart-2",
+      "chart-3",
+      "chart-4",
+      "chart-5",
+      "sidebar",
+      "sidebar-foreground",
+      "sidebar-primary",
+      "sidebar-primary-foreground",
+      "sidebar-accent",
+      "sidebar-accent-foreground",
+      "sidebar-border",
+      "sidebar-ring",
+      "radius",
+      "font-sans",
+      "font-serif",
+      "font-mono"
+    ];
+  }
+});
+
+// ../shared/src/mcp/tools/extract-tools.ts
+import { z as z5 } from "zod";
+function registerExtractTools({ server, tracked }) {
+  server.registerTool(
+    "extract-design-system",
+    {
+      title: "Extract Design System From Existing Code",
+      description: `Distill the design tokens out of a project's EXISTING CSS so new components match the app the user already built.
+
+Use this when the user says "match our existing style", "use our design system", "style this like the rest of the app", or you are adding UI to a codebase that already has its own look. This is the inverse of find-design-system / create-design-system: instead of giving the user one of our systems, it reads theirs.
+
+How to use it: read the project's \`globals.css\` (or wherever the design tokens / CSS custom properties live, e.g. a Tailwind v4 \`@theme\` block) and pass its full contents as \`css\`. The MCP server cannot read your filesystem, so you must paste the text.
+
+Returns: the semantic palette (primary, background, foreground, accent, border, ring, etc.), radius, fonts, and shadow scale, plus a pasteable token sheet with every color normalized to \`oklch()\`. Handles hex, rgb()/rgba(), hsl()/hsla(), named colors, and existing oklch values, across \`:root\`, \`.dark\`, and \`@theme\` blocks.`,
+      inputSchema: z5.object({
+        css: z5.string().trim().min(1).max(2e5).describe("Full contents of the project's globals.css (or any CSS holding the design tokens / CSS custom properties)."),
+        name: z5.string().trim().min(1).max(120).optional().describe("Optional label for the extracted system, e.g. the app or repo name."),
+        maxTokens: z5.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates the token sheet to fit.")
+      }),
+      annotations: { readOnlyHint: true }
+    },
+    async ({ css, name, maxTokens }) => tracked("extract-design-system", { name: name ?? null }, async () => {
+      const result = extractDesignSystem(css, name);
+      let text = formatExtraction(result);
+      if (maxTokens) text = truncateToTokens(text, maxTokens);
+      return { content: [{ type: "text", text }] };
+    })
+  );
+}
+var init_extract_tools = __esm({
+  "../shared/src/mcp/tools/extract-tools.ts"() {
+    "use strict";
+    init_shared();
+    init_extract_design_system();
   }
 });
 
@@ -3672,6 +5852,7 @@ function registerAllTools(server, provider, onToolUsage, authContext) {
   registerPrincipleTools(deps);
   registerIconTools(deps);
   registerDesignSystemTools(deps);
+  registerExtractTools(deps);
   registerPreviewResource(deps);
 }
 var init_tools = __esm({
@@ -3681,6 +5862,7 @@ var init_tools = __esm({
     init_principle_tools();
     init_icon_tools();
     init_design_system_tools();
+    init_extract_tools();
     init_preview_resource();
     init_shared();
   }
@@ -3689,6 +5871,7 @@ var init_tools = __esm({
 // ../shared/src/mcp/index.ts
 var mcp_exports = {};
 __export(mcp_exports, {
+  BUILD_TARGET_RULE: () => BUILD_TARGET_RULE,
   INSTRUCTIONS: () => INSTRUCTIONS,
   SEARCH_TOOLS: () => SEARCH_TOOLS,
   createMcpServer: () => createMcpServer
@@ -3716,6 +5899,7 @@ var init_mcp = __esm({
     init_tools();
     init_tools();
     init_instructions();
+    init_shared();
   }
 });
 
@@ -3735,14 +5919,14 @@ __export(api_client_exports, {
   trackToolUsage: () => trackToolUsage
 });
 import { createHash as createHash2 } from "crypto";
-async function request(path4) {
+async function request(path5) {
   if (!API_KEY) {
     throw new ApiError(
       401,
       "BETTER_DESIGN_API_KEY is not set. Run `npx better-design` to create a free key (no account needed), or get one at https://better-design.com/mcp"
     );
   }
-  const res = await fetch(`${API_URL2}/api${path4}`, {
+  const res = await fetch(`${API_URL2}/api${path5}`, {
     headers: {
       Authorization: `Bearer ${API_KEY}`,
       "Content-Type": "application/json"
@@ -3923,6 +6107,68 @@ var init_http_data_provider = __esm({
   }
 });
 
+// src/lib/install-marker.ts
+var install_marker_exports = {};
+__export(install_marker_exports, {
+  isFirstConnect: () => isFirstConnect
+});
+import { closeSync, mkdirSync as mkdirSync2, openSync, writeSync } from "fs";
+import os4 from "os";
+import path4 from "path";
+function slug(clientName) {
+  const base = (clientName ?? "unknown").toLowerCase();
+  const cleaned = base.replace(/[^a-z0-9._-]+/g, "-").replace(/^-+|-+$/g, "");
+  return cleaned || "unknown";
+}
+function isFirstConnect(clientName) {
+  try {
+    mkdirSync2(MARKER_DIR, { recursive: true });
+    const marker = path4.join(MARKER_DIR, slug(clientName));
+    const fd = openSync(marker, "wx", 420);
+    try {
+      writeSync(fd, (/* @__PURE__ */ new Date()).toISOString());
+    } finally {
+      closeSync(fd);
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+var MARKER_DIR;
+var init_install_marker = __esm({
+  "src/lib/install-marker.ts"() {
+    "use strict";
+    MARKER_DIR = path4.join(os4.homedir(), ".better-design", "connected");
+  }
+});
+
+// ../shared/src/mcp-debug-log.ts
+var mcp_debug_log_exports = {};
+__export(mcp_debug_log_exports, {
+  mcpDebugLog: () => mcpDebugLog,
+  mcpDebugLogPath: () => mcpDebugLogPath
+});
+function mcpDebugLogPath() {
+  try {
+    return typeof process !== "undefined" ? process.env?.MCP_DEBUG_LOG : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function mcpDebugLog(entry) {
+  const path5 = mcpDebugLogPath();
+  if (!path5) return Promise.resolve();
+  return import("fs").then((fs) => fs.appendFileSync(path5, `${JSON.stringify(entry)}
+`)).catch(() => {
+  });
+}
+var init_mcp_debug_log = __esm({
+  "../shared/src/mcp-debug-log.ts"() {
+    "use strict";
+  }
+});
+
 // src/index.ts
 var argv = process.argv.slice(2);
 var command = argv[0];
@@ -3943,16 +6189,34 @@ async function startServer() {
   const { createMcpServer: createMcpServer2 } = await Promise.resolve().then(() => (init_mcp(), mcp_exports));
   const { createHttpDataProvider: createHttpDataProvider2 } = await Promise.resolve().then(() => (init_http_data_provider(), http_data_provider_exports));
   const { trackToolUsage: trackToolUsage2, trackMcpInstalled: trackMcpInstalled2 } = await Promise.resolve().then(() => (init_api_client(), api_client_exports));
+  const { isFirstConnect: isFirstConnect2 } = await Promise.resolve().then(() => (init_install_marker(), install_marker_exports));
+  const { mcpDebugLog: mcpDebugLog2 } = await Promise.resolve().then(() => (init_mcp_debug_log(), mcp_debug_log_exports));
   const server = createMcpServer2({
     provider: createHttpDataProvider2(),
     name: "DesignSystems",
     version: "3.0.0",
-    onToolUsage: trackToolUsage2
+    onToolUsage: (tool, params, ctx) => {
+      mcpDebugLog2({
+        ts: (/* @__PURE__ */ new Date()).toISOString(),
+        transport: "stdio",
+        tool,
+        args: params,
+        durationMs: ctx.durationMs ?? null,
+        status: ctx.isError ? "error" : "ok",
+        errorMessage: ctx.errorMessage,
+        outputPreview: ctx.outputPreview ?? null,
+        clientName: ctx.clientName ?? null,
+        clientVersion: ctx.clientVersion ?? null
+      });
+      trackToolUsage2(tool, params, ctx);
+    }
   });
   server.server.oninitialized = () => {
     try {
       const info = server.server.getClientVersion?.();
-      trackMcpInstalled2({ clientName: info?.name, clientVersion: info?.version });
+      if (isFirstConnect2(info?.name)) {
+        trackMcpInstalled2({ clientName: info?.name, clientVersion: info?.version });
+      }
     } catch {
     }
   };