PageSourceSearch

https://sigil-ui.vercel.app/docs

html sigil-ui.vercel.app collected 2026-10-03 07:42:22 UTC 667,140 bytes, 124 lines download raw bytes

1<!DOCTYPE html><html data-dpl-id="dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" lang="en" class="roboto_mono_6fe72337-module__Br3vFa__variable"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/2f13ad8e538108e0-s.p.0o52u8sd-fo14.woff2?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/chunks/05r._-xkhxe.w.css?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/07q8132~9~-gm.css?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/0yu21wm4~atfj.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN"/>
1<script src="/_next/static/chunks/0a4p15e44yond.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/08yl4nky1i9gh.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/15zx8nm0dv-w_.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/17e64oz4cpd45.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/turbopack-0sa-te.imwqlg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/0o~jm1~h~.mb5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/0njqfkuk24ws_.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/0ekfii.fqt-2y.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<script src="/_next/static/chunks/024d6fl2onegx.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" async=""></script>
1<link rel="preload" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&amp;family=Space+Grotesk:wght@500;700&amp;display=swap" as="style"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""/><meta name="next-size-adjust" content=""/><title>Getting Started — Sigil UI</title><meta name="description" content="One markdown file controls your entire design system. 519 tokens, 33 categories, 350+ components. Compiles to CSS + Tailwind v4."/><link rel="author" href="https://kevinliu.me"/><meta name="author" content="Kevin Liu"/><link rel="manifest" href="/manifest.webmanifest"/><meta name="keywords" content="sigil ui,design tokens,react component library,design system,tailwind css,css custom properties,theming presets,token-driven components,base ui primitives,open source ui"/><meta name="creator" content="Kevin Liu"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-image-preview:large, max-snippet:-1"/><meta name="category" content="technology"/><link rel="canonical" href="https://sigil-ui.com/docs/"/><meta property="og:title" content="Getting Started — Sigil UI Docs"/><meta property="og:description" content="One markdown file controls your entire design system. 519 tokens, 33 categories, 350+ components. Compiles to CSS + Tailwind v4."/><meta property="og:url" content="https://sigil-ui.com/docs/"/><meta property="og:image" content="https://sigil-ui.com/api/og?title=Getting%20Started&amp;type=docs"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Getting Started"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@kevinliu"/><meta name="twitter:creator" content="@kevinliu"/><meta name="twitter:title" content="Getting Started — Sigil UI Docs"/><meta name="twitter:description" content="One markdown file controls your entire design system. 519 tokens, 33 categories, 350+ components. Compiles to CSS + Tailwind v4."/><meta name="twitter:image" content="https://sigil-ui.com/api/og?title=Getting%20Started&amp;type=docs"/><meta name="twitter:image:alt" content="Getting Started"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><link rel="icon" href="/favicon.ico?favicon.00ti33qo2841f.ico?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" sizes="16x16" type="image/x-icon"/><link rel="icon" href="/icon.svg?icon.14v5nq4prn-xi.svg?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" sizes="any" type="image/svg+xml"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&amp;
1family=Space+Grotesk:wght@500;700&amp;display=swap"/>
1<script src="/_next/static/chunks/03~yq9q893hmn.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" noModule=""></script>
1</head><body><div hidden=""><!--$--><!--/$--></div>
1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://sigil-ui.com/#website","name":"Sigil UI","url":"https://sigil-ui.com","description":"One markdown file controls your entire design system.","publisher":{"@id":"https://sigil-ui.com/#organization"}},{"@type":"Organization","@id":"https://sigil-ui.com/#organization","name":"Sigil UI","url":"https://sigil-ui.com","logo":"https://sigil-ui.com/logo.svg","description":"Open-source React component library with 350+ components, 46 presets, 519 design tokens. One token file controls every color, font, radius, and animation.","sameAs":["https://github.com/keiranlovett/reticle-ui","https://www.npmjs.com/org/sigil-ui","https://x.com/kevinliu"],"founder":{"@type":"Person","name":"Kevin Liu","url":"https://kevinliu.me"}},{"@type":"SoftwareApplication","@id":"https://sigil-ui.com/#app","name":"Sigil UI","applicationCategory":"DeveloperApplication","operatingSystem":"Any","description":"One markdown file controls your entire design system. 350+ components, 46 presets, 519 design tokens, all styled through CSS custom properties from a single token layer.","url":"https://sigil-ui.com","author":{"@id":"https://sigil-ui.com/#organization"},"license":"https://opensource.org/licenses/MIT","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"featureList":["519 configurable design tokens in one file","350+ React components built on Radix + Base UI primitives","46 curated presets that change every token at once","OKLCH color system with perceptual uniformity","Token-driven theming via CSS custom properties","CLI for project setup, preset switching, and component scaffolding","Agent-readable token layer for AI-assisted development"]}]}</script>
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})(["class","data-theme"],"sigil-theme","dark",null,["light","dark"],null,true,true)</script>
1<div class="devbar-root" data-toolbar-dock="bottom" style="position:relative;display:flex;flex-direction:column;min-height:100dvh;transition:background 380ms cubic-bezier(0.32, 0.72, 0, 1)"><style>
2  /* Reserve space on the side the toolbar is docked, so the fixed toolbar
3     never covers article, sidebar, or TOC content — even inside layouts
4     (like fumadocs) that use 100dvh internally. */
5  body[data-devbar-toolbar-dock="bottom"] { padding-bottom: 44px; }
6  body[data-devbar-toolbar-dock="top"]    { padding-top:    44px; }
7  body[data-devbar-toolbar-dock="left"]   { padding-left:   44px; }
8  body[data-devbar-toolbar-dock="right"]  { padding-right:  44px; }
9
10  .devbar-root {
11    --db-bg: #ffffff;
12    --db-surface: #f8f8fa;
13    --db-border: #d0d0d8;
14    --db-text: #0a0a0f;
15    --db-text2: #4a4a55;
16    --db-muted: #8a8a95;
17    --db-accent: #18181b;
18    --db-accent-dim: rgba(24,24,27,0.06);
19    --db-accent-mid: rgba(24,24,27,0.10);
20    color: var(--db-text);
21  }
22  .dark .devbar-root, [data-theme="dark"] .devbar-root {
23    --db-bg: #0a0a0f;
24    --db-surface: #141419;
25    --db-border: #2c2c3c;
26    --db-text: #fafafa;
27    --db-text2: #a0a0aa;
28    --db-muted: #8888a0;
29    --db-accent: #e4e4e7;
30    --db-accent-dim: rgba(228,228,231,0.06);
31    --db-accent-mid: rgba(228,228,231,0.10);
32  }
33  .devbar-chrome {
34    --s-primary: var(--db-accent);
35    --s-primary-hover: var(--db-accent);
36    --s-background: var(--db-bg);
37    --s-surface: var(--db-surface);
38    --s-surface-sunken: var(--db-surface);
39    --s-border: var(--db-border);
40    --s-border-style: solid;
41    --s-text: var(--db-text);
42    --s-text-secondary: var(--db-text2);
43    --s-text-muted: var(--db-muted);
44    --s-ring: var(--db-accent);
45    --s-ring-offset: var(--db-bg);
46    --s-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
47    --s-radius-md: 6px;
48    --s-radius-input: 6px;
49    --s-radius-full: 9999px;
50    --s-duration-fast: 150ms;
51    --s-input-height: 28px;
52    --s-error: #dc2626;
53    font-family: "PP Telegraf", "PP Mori", system-ui, sans-serif;
54  }
55  .devbar-preset-strip { scrollbar-width: none; }
56  .devbar-preset-strip::-webkit-scrollbar { display: none; }
57  .devbar-scroll { scrollbar-width: none; }
58  .devbar-scroll::-webkit-scrollbar { display: none; }
59  @keyframes devbar-preset-in {
60    from { opacity: 0; transform: translateY(6px) scale(0.92); }
61    to   { opacity: 1; transform: translateY(0) scale(1); }
62  }
63  @keyframes devbar-preset-out {
64    from { opacity: 1; transform: translateY(0) scale(1); }
65    to   { opacity: 0; transform: translateY(-4px) scale(0.95); }
66  }
67  @keyframes devbar-tab-poke {
68    from { opacity: 0; transform: translateY(-50%) translateX(-20px); }
69    to   { opacity: 1; transform: translateY(-50%) translateX(-4px); }
70  }
71  @keyframes devbar-tab-poke-right {
72    from { opacity: 0; transform: translateY(-50%) translateX(20px); }
73    to   { opacity: 1; transform: translateY(-50%) translateX(4px); }
74  }
75  @media (max-width: 768px) {
76    .devbar-canvas-frame { border-radius: 0 !important; border: none !important; }
77  }
78</style><div style="flex:1;display:flex;flex-direction:row;min-height:0;min-width:0;position:relative"><div style="flex:1;min-width:0;min-height:0;display:flex;align-items:stretch;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;transition:padding 380ms cubic-bezier(0.32, 0.72, 0, 1)"><div style="width:100%;border-radius:0;border:0px solid transparent;transition:border-radius 380ms cubic-bezier(0.32, 0.72, 0, 1), border-color 380ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 500ms ease"><div style="width:100%"><!--$--><div class="bg-fd-secondary/50 p-3 empty:hidden"></div><!--/$--><div id="nd-docs-layout" data-sidebar-collapsed="false" data-column-changed="false" style="grid-template:&quot;sidebar sidebar header toc toc&quot;
79&quot;sidebar sidebar toc-popover toc toc&quot;
80&quot;sidebar sidebar main toc toc&quot; 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) var(--fd-toc-width) minmax(min-content, 1fr);--fd-docs-row-1:var(--fd-banner-height, 0px);--fd-docs-row-2:calc(var(--fd-docs-row-1) + var(--fd-header-height));--fd-docs-row-3:calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height));--fd-sidebar-col:var(--fd-sidebar-width)" class="grid overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px] data-[column-changed=true]:transition-[grid-template-columns]"><header id="nd-subnav" data-transparent="false" class="[grid-area:header] sticky top-(--fd-docs-row-1) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-(--fd-header-height) md:hidden max-md:layout:[--fd-header-height:--spacing(14)] data-[transparent=false]:bg-fd-background/80"><a class="inline-flex items-center gap-2.5 font-semibold" href="/"><div class="flex items-center gap-2.5"><svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><polygon points="0,0 56,0 56,32 40,40 40,56 0,56" fill="currentColor"></polygon><polygon points="120,0 120,56 88,56 80,40 64,40 64,0" fill="currentColor"></polygon><polygon points="0,120 0,64 32,64 40,80 56,80 56,120" fill="currentColor"></polygon><polygon points="120,120 64,120 64,88 80,80 80,64 120,64" fill="var(--s-primary, #18181b)"></polygon></svg>
80<span class="font-[family-name:var(--s-font-display)] font-bold text-[15px] tracking-[-0.03em]">sigil<span class="opacity-30 font-light">/</span><span class="font-medium text-[13px]">UI</span></span></div></a><div class="flex-1"></div><button type="button" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground [&amp;_svg]:size-4.5 p-2" data-search="" aria-label="Open Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></button><button aria-label="Open Sidebar" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground [&amp;_svg]:size-4.5 p-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg></button></header><div data-sidebar-placeholder="" class="sticky top-(--fd-docs-row-1) z-20 [grid-area:sidebar] pointer-events-none *:pointer-events-auto h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] md:layout:[--fd-sidebar-width:268px] max-md:hidden"><aside id="nd-sidebar" data-collapsed="false" data-hovered="false" class="absolute flex flex-col w-full inset-s-0 inset-y-0 items-end bg-fd-card text-sm border-e duration-250 *:w-(--fd-sidebar-width)"><div class="flex flex-col gap-3 p-4 pb-2"><div class="flex"><a class="inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto" href="/"><div class="flex items-center gap-2.5"><svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><polygon points="0,0 56,0 56,32 40,40 40,56 0,56" fill="currentColor"></polygon><polygon points="120,0 120,56 88,56 80,40 64,40 64,0" fill="currentColor"></polygon><polygon points="0,120 0,64 32,64 40,80 56,80 56,120" fill="currentColor"></polygon><polygon points="120,120 64,120 64,88 80,80 80,64 120,64" fill="var(--s-primary, #18181b)"></polygon></svg><span class="font-[family-name:var(--s-font-display)] font-bold text-[15px] tracking-[-0.03em]">sigil<span class="opacity-30 font-light">/</span><span class="font-medium text-[13px]">UI</span></span></div></a><button type="button" aria-label="Collapse Sidebar" data-collapsed="false" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&amp;_svg]:size-4.5 mb-auto text-fd-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg></button></div><button type="button" data-search-full="" class="inline-flex items-center gap-2 rounded-lg border bg-fd-secondary/50 p-1.5 ps-2 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search size-4" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>Search<div class="ms-auto inline-flex gap-0.5"><kbd class="rounded-md border bg-fd-background px-1.5">⌘</kbd><kbd class="rounded-md border bg-fd-background px-1.5">K</kbd></div></button></div><div dir="ltr" class="overflow-hidden min-h-0 flex-1" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] *:flex! *:flex-col! *:gap-0.5! p-4 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Getting Started</p><a data-active="true" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs">Getting Started</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/installation">Installation</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/theming">Theming</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/cli">CLI Reference</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/presets">Presets</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/alignment">Alignment Rails</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Components</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/accordion">Accordion</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/search-input">SearchInput</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/
80alert">Alert</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/aspect-ratio">AspectRatio</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/avatar">Avatar</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/badge">Badge</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/braille-spinner">BrailleSpinner</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/button">Button</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/button-group">ButtonGroup</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/calendar">Calendar</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/card">Card</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/carousel">Carousel</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/chart-container">ChartContainer</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/checkbox">Checkbox</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/checkbox-group">CheckboxGroup</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/circular-progress">CircularProgress</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/clipboard">Clipboard</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/code-block">CodeBlock</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/collapsible">Collapsible</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/color-picker">ColorPicker</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/combobox">Combobox</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/data-table">DataTable</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/date-picker">DatePicker</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/editable">Editable</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/empty">Empty</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/file-upload">FileUpload</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/input">Input</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/input-group">InputGroup</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/input-otp">InputOTP</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/item">Item</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/kpi">KPI</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/kbd">Kbd</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/label">Label</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/meter">Meter</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/native-select">NativeSelect</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/number-field">NumberField</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/panel">Panel</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/password-input">PasswordInput</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/code-tabs">CodeTabs</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/progress">Progress</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/radio-group">RadioGroup</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/rating-group">RatingGroup</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/resizable-panel-group">ResizablePanelGroup</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/scroll-area">ScrollArea</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/segmented-control">SegmentedControl</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/select">Select</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/separator">Separator</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/signature-pad">SignaturePad</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/skeleton">Skeleton</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/slider">Slider</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/split-button">SplitButton</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/status-badge">StatusBadge</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/stepper">Stepper</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/switch">Switch</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/table">Table</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/tabs">Tabs</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/tags-input">TagsInput</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/terminal">Terminal</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/textarea">Textarea</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/toggle">Toggle</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/toggle-group">ToggleGroup</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/tooltip-provider">TooltipProvider</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/tree-view">TreeView</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/components/h1">H1</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Layout</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/app-shell">AppShell</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/aside">Aside</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/banner">Banner</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/box">Box</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/center">Center</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/container">Container</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/divider">Divider</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/flex">Flex</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/frame">Frame</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/hairline">Hairline</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/sigil-frame">SigilFrame</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/sigil-full-bleed">SigilFullBleed</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/sigil-grid">SigilGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/sigil-page-grid">SigilPageGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/rhythm-modes">Rhythm Modes</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/structural-grid-rhythm">Structural Grid Rhythm</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/sigil-view-code">SigilViewCode</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/gutter">Gutter</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/h-rule">HRule</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/header">Header</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/layout-control
80s">LayoutControls</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/main">Main</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/margin">Margin</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/page-grid">PageGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/page-shell">PageShell</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/section">Section</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/section-divider">SectionDivider</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/sigil-navbar">SigilNavbar</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/sigil-gutter">SigilGutter</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/sigil-section">SigilSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/simple-grid">SimpleGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/spacer">Spacer</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/stack">Stack</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/layout/voronoi-bento">VoronoiBento</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Navigation</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/navigation/container-query">ContainerQuery</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/navigation/breadcrumb">Breadcrumb</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/navigation/footer">Footer</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/navigation/menubar">Menubar</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/navigation/navbar">Navbar</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/navigation/navigation-menu">NavigationMenu</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/navigation/pagination">Pagination</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/navigation/sidebar">Sidebar</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/navigation/social-icons">SocialIcons</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/navigation/toolbar">Toolbar</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Overlays</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/alert-dialog">AlertDialog</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/command">Command</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/modal">Modal</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/context-menu">ContextMenu</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/dialog">Dialog</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/drawer">Drawer</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/dropdown-menu">DropdownMenu</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/hover-card">HoverCard</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/popover">Popover</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/preview-card">PreviewCard</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/sheet">Sheet</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/sonner">Sonner</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/overlays/toaster">Toaster</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Shapes</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/shapes/diagonal">Diagonal</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/shapes/diamond">Diamond</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/shapes/hexagon">Hexagon</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/shapes/shape">Shape</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/shapes/triangle">Triangle</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">3D</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/3d/box3-d">Box3D</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/3d/box3-d-grid">Box3DGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/3d/card3-d">Card3D</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/3d/exploded-box3-d">ExplodedBox3D</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/3d/floating-ui">FloatingUI</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/3d/isometric-cylinder">IsometricCylinder</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/3d/isometric-prism">IsometricPrism</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/3d/isometric-scene">IsometricScene</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/3d/isometric-view">IsometricView</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Diagrams</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/architecture-diagram">ArchitectureDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/before-after-diagram">BeforeAfterDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/comparison-table">ComparisonTable</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/cross-hatch">CrossHatch</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/diagram">Diagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/diagram-callout-line">DiagramCalloutLine</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/diagram-connector">DiagramConnector</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/diagram-label">DiagramLabel</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/diagram-node">DiagramNode</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/ecosystem-diagram">EcosystemDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/exploded-view">ExplodedView</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/flow-diagram">FlowDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/hub-spoke-diagram">HubSpokeDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/pipeline-diagram">PipelineDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/stack-diagram">StackDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/timeline">Timeline</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/activity-feed">ActivityFeed</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/area-chart">AreaChart</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/bar-chart">BarChart</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/billing-chart">BillingChart</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/capability-grid">CapabilityGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/changelog-table">ChangelogTable</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/commit-grid">CommitGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/dependency-graph">DependencyGraph</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/donut-chart">DonutChart</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/feature-mini-diagram">FeatureMiniDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/funnel-chart">
80FunnelChart</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/gantt-chart">GanttChart</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/globe-diagram">GlobeDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/heatmap-grid">HeatmapGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/hub-route-diagram">HubRouteDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/isolation-stack">IsolationStack</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/isometric-stack-diagram">IsometricStackDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/leaderboard-table">LeaderboardTable</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/line-chart">LineChart</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/matrix-diagram">MatrixDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/mermaid-diagram">MermaidDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/metric-card">MetricCard</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/mini-bar-list">MiniBarList</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/network-graph">NetworkGraph</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/orbit-diagram">OrbitDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/pie-chart">PieChart</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/platform-hub-diagram">PlatformHubDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/pricing-table">PricingTable</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/progress-ring">ProgressRing</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/radar-chart">RadarChart</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/sankey-diagram">SankeyDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/spark-line">SparkLine</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/spec-table">SpecTable</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/state-persistence">StatePersistence</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/status-table">StatusTable</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/stream-flow-diagram">StreamFlowDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/tree-diagram">TreeDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/usage-gauge">UsageGauge</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/venn-diagram">VennDiagram</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/diagrams/waterfall-chart">WaterfallChart</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Marketing</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/announcement-bar">AnnouncementBar</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/blog-grid">BlogGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/blog-header">BlogHeader</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/cta">
80CTA</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/cost-calculator">CostCalculator</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/feature-frame">FeatureFrame</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/feature-grid">FeatureGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/hero">Hero</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/logo-bar">LogoBar</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/pricing">Pricing</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/pricing-tiers">PricingTiers</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/testimonial-card">TestimonialCard</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/marketing/unit-pricing">UnitPricing</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Patterns</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/patterns/cross">Cross</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/patterns/grain-gradient">GrainGradient</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/patterns/pattern">Pattern</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/patterns/tessellation">Tessellation</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Sections</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/bento-section">BentoSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/blueprint-grid-section">BlueprintGridSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/cta-section">CTASection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/code-showcase-section">CodeShowcaseSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/comparison-section">ComparisonSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/faq-section">FAQSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/feature-frame-section">FeatureFrameSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/feature-section">FeatureSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/feature-showcase-section">FeatureShowcaseSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/footer-section">FooterSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/gradient-banner-section">GradientBannerSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/hero-section">HeroSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/install-section">InstallSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/large-text-section">LargeTextSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/logo-cloud-section">LogoCloudSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/newsletter-section">NewsletterSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/section-heading">SectionHeading</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/stats-section">StatsSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/team-section">TeamSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/testimonials-section">TestimonialsSection</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/sections/timeline-section">TimelineSection</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Playbook</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/playbook/gap-pixel-grid">GapPixelGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/playbook/mono-label">MonoLabel</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/playbook/border-stack">BorderStack</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/playbook/accent-cta">AccentCTA</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/playbook/tabular-value">TabularValue</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/playbook/featured-grid">FeaturedGrid</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/playbook/density-text">DensityText</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/playbook/frosted-panel">FrostedPanel</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/playbook/card-cell">CardCell</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Effects</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/effects/proximity-glow">ProximityGlow</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Animation</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/animate-on-mount">AnimateOnMount</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/animate-on-scroll">AnimateOnScroll</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/blur-fade">
80BlurFade</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/fade-in">FadeIn</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/gradient-text">GradientText</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/letter-pull-up">LetterPullUp</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/marquee">Marquee</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/number-ticker">NumberTicker</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/parallax-layer">ParallaxLayer</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/pulse">Pulse</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/ripple">Ripple</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
80/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/scale-in">ScaleIn</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/scroll-progress">ScrollProgress</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/slide-in">SlideIn</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/stagger">Stagger</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/text-reveal">TextReveal</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/type-writer">TypeWriter</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/animation/word-rotate">WordRotate</a></div></div></div><div class="flex flex-col p-4 pt-2"><div class="flex text-fd-muted-foreground items-center border bg-fd-secondary/50 p-0.5 pe-0 rounded-lg empty:hidden"><button class="inline-flex items-center border p-1 overflow-hidden px-1 py-0 border-y-0 border-e-0 rounded-none ms-auto *:rounded-md" aria-label="Toggle Theme" data-theme-toggle=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun size-6.5 p-1.5 text-fd-muted-foreground" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon size-6.5 p-1.5 text-fd-muted-foreground" aria-hidden="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg></button></div></div></aside></div>
80<div data-sidebar-panel="" class="fixed flex top-[calc(--spacing(4)+var(--fd-docs-row-3))] inset-s-4 shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 pointer-events-none opacity-0"><button type="button" aria-label="Collapse Sidebar" data-collapsed="false" class="inline-flex items-center justify-center text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&amp;_svg]:size-4.5 rounded-lg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg></button><button type="button" class="inline-flex items-center justify-center text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&amp;_svg]:size-4.5 rounded-lg" data-search="" aria-label="Open Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></button></div><div data-state="closed" data-toc-popover="" class="sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]"><header class="border-b backdrop-blur-sm transition-colors bg-fd-background/80"><button type="button" aria-controls="radix-_R_1av5uabqhqlb_" aria-expanded="false" data-state="closed" class="flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&amp;_svg]:size-4 md:px-6" data-toc-popover-trigger=""><svg role="progressbar" viewBox="0 0 18 18" aria-valuenow="0" aria-valuemin="0" aria-valuemax="1" style="width:18px;height:18px" class="shrink-0"><circle cx="9" cy="9" r="7.5" fill="none" stroke-width="1.5" class="stroke-current/25"></circle><circle cx="9" cy="9" r="7.5" fill="none" stroke-width="1.5" stroke="currentColor" stroke-dasharray="47.12388980384689" stroke-dashoffset="47.12388980384689" stroke-linecap="round" transform="rotate(-90 9 9)" class="transition-all"></circle></svg><span class="grid flex-1 *:my-auto *:row-start-1 *:col-start-1"><span class="truncate transition-[opacity,translate,color]">Getting Started</span><span class="truncate transition-[opacity,translate] opacity-0 translate-y-full pointer-events-none"></span></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down shrink-0 transition-transform mx-0.5" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div data-state="closed" id="radix-_R_1av5uabqhqlb_" hidden="" data-toc-popover-content="" class="overflow-hidden"></div></header></div><article id="nd-page" data-full="false" class="flex flex-col w-full max-w-[900px] mx-auto [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14 xl:layout:[--fd-toc-width:268px]"><h1 class="text-[1.75em] font-semibold">Getting Started</h1><p class="mb-8 text-lg text-fd-muted-foreground">One markdown file controls your entire design system. 519 tokens, 33 categories, 350+ components. Compiles to CSS + Tailwind v4.</p><div class="prose flex-1"><h2 class="flex scroll-m-28 flex-row items-center gap-2" id="why-sigil-ui"><a data-card="" href="#why-sigil-ui" class="peer">Why Sigil UI</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h2>
81<p>Most component libraries scatter design decisions across dozens of files.
82Change a border radius? Hunt through every component. Update a color? Grep and pray.</p>
83<p><strong>Sigil takes the opposite approach.</strong></p>
84<p>Your entire design system lives in one <code>DESIGN.md</code> file — 519 tokens across 33 categories. Edit the markdown, run <code>sigil design compile</code>, and every component updates. Colors, spacing, radii, shadows, motion, page composition — all from one source.</p>
85<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="how-it-compares-to-traditional-component-libraries"><a data-card="" href="#how-it-compares-to-traditional-component-libraries" class="peer">How it compares to traditional component libraries</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
86<div class="relative overflow-auto prose-no-margin my-6"><table><thead><tr><th>
86</th><th>Radix, Chakra, MUI, etc.</th><th>Sigil UI</th></tr></thead><tbody><tr><td>Theming</td><td>Edit config files + CSS variables + component files</td><td>Edit one token file</td></tr><tr><td>Agent workflow</td><td>Agent modifies scattered Tailwind classes or style props</td><td>Your agent edits one file</td></tr><tr><td>Presets</td><td>Copy a config from a blog post</td><td><code>npx @sigil-ui/cli init --preset sigil</code></td></tr><tr><td>Token system</td><td>CSS variables, manually maintained</td><td>Three-layer architecture: primitive → semantic → component</td></tr><tr><td>Shipping themes</td><td>&quot;Just change the CSS variables&quot;</td><td>Ship a preset, not a config file</td></tr></tbody></table></div>
87<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="quick-start"><a data-card="" href="#quick-start" class="peer">Quick start</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
88<figure dir="ltr" class="my-4 bg-fd-card rounded-xl shiki relative border shadow-sm not-prose overflow-hidden text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="-1"><div class="empty:hidden absolute top-3 right-2 z-2 backdrop-blur-lg rounded-lg text-fd-muted-foreground"><button type="button" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring p-1 [&amp;_svg]:size-4 hover:text-fd-accent-foreground data-checked:text-fd-accent-foreground" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button></div><div role="region" tabindex="0" class="text-[0.8125rem] py-3.5 overflow-auto max-h-[600px] fd-scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fd-ring" style="--padding-right:calc(var(--spacing) * 8)"><pre class="min-w-full w-max *:flex *:flex-col"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"># Install the packages</span></span>
89<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @sigil-ui/tokens</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @sigil-ui/components</span></span>
90<span class="line"></span>
91<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"># Or scaffold a new project</span></span>
92<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @sigil-ui/cli</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> init</span></span></code></pre></div></figure>
93<p>Import the token CSS and start building:</p>
94<figure dir="ltr" class="my-4 bg-fd-card rounded-xl shiki relative border shadow-sm not-prose overflow-hidden text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="-1"><div class="empty:hidden absolute top-3 right-2 z-2 backdrop-blur-lg rounded-lg text-fd-muted-foreground"><button type="button" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring p-1 [&amp;_svg]:size-4 hover:text-fd-accent-foreground data-checked:text-fd-accent-foreground" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button></div><div role="region" tabindex="0" class="text-[0.8125rem] py-3.5 overflow-auto max-h-[600px] fd-scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fd-ring" style="--padding-right:calc(var(--spacing) * 8)"><pre class="min-w-full w-max *:flex *:flex-col"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">
94import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> &quot;@sigil-ui/tokens/css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
95<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { Button } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> &quot;@sigil-ui/components&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
96<span class="line"></span>
97<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> App</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">() {</span></span>
98<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">Button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> variant</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">&quot;primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&gt;Get started&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&gt;;</span></span>
99<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></figure>
100<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="token-architecture"><a data-card="" href="#token-architecture" class="peer">Token architecture</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
101<p>Sigil uses a three-layer token system:</p>
102<ol>
103<li><strong>Primitive</strong> — raw values like <code>oklch(0.65 0.15 280)</code> or <code>8px</code></li>
104<li><strong>Semantic</strong> — purpose-driven aliases like <code>--s-primary</code> or <code>--s-radius-md</code></li>
105<li><strong>Component</strong> — scoped tokens like <code>--s-card-radius</code> consumed by individual components</li>
106</ol>
107<p>Every layer compiles to CSS custom properties with the <code>--s-</code> prefix. Components only read variables — they never hardcode values.</p>
108<figure dir="ltr" class="my-4 bg-fd-card rounded-xl shiki relative border shadow-sm not-prose overflow-hidden text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="-1"><div class="empty:hidden absolute top-3 right-2 z-2 backdrop-blur-lg rounded-lg text-fd-muted-foreground"><button type="button" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring p-1 [&amp;_svg]:size-4 hover:text-fd-accent-foreground data-checked:text-fd-accent-foreground" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button></div><div role="region" tabindex="0" class="text-[0.8125rem] py-3.5 overflow-auto max-h-[600px] fd-scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fd-ring" style="--padding-right:calc(var(--spacing) * 8)"><pre class="min-w-full w-max *:flex *:flex-col"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* Your token file controls everything */</span></span>
109<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
110<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">  --s-primary</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">oklch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0.65</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0.15</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 280</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
111<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">  --s-radius-md</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
112<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">  --s-shadow-md</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> / </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0.06</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">), ...;</span></span>
113<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></figure>
114<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="packages-on-npm"><a data-card="" href="#packages-on-npm" class="peer">Packages on npm</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
115<div class="relative overflow-auto prose-no-margin my-6"><table><thead><tr><th>
115Package</th><th>Description</th></tr></thead><tbody><tr><td><a href="https://www.npmjs.com/package/@sigil-ui/tokens" rel="noreferrer noopener" target="_blank"><code>@sigil-ui/tokens</code></a></td><td>519 tokens, 33 categories. Compiles to CSS, Tailwind v4, W3C JSON.</td></tr><tr><td><a href="https://www.npmjs.com/package/@sigil-ui/components" rel="noreferrer noopener" target="_blank"><code>@sigil-ui/components</code></a></td><td>350+ token-driven React components</td></tr><tr><td><a href="https://www.npmjs.com/package/@sigil-ui/presets" rel="noreferrer noopener" target="_blank"><code>@sigil-ui/presets</code></a></td><td>46 curated preset bundles (500+ tokens each)</td></tr><tr><td><a href="https://www.npmjs.com/package/@sigil-ui/primitives" rel="noreferrer noopener" target="_blank"><code>@sigil-ui/primitives</code></a></td><td>40+ headless primitives (Radix + Base UI)</td></tr><tr><td><a href="https://www.npmjs.com/package/@sigil-ui/cli" rel="noreferrer noopener" target="_blank"><code>@sigil-ui/cli</code></a></td><td>CLI for init, design, preset, add, inspire, doctor</td></tr><tr><td><a href="https://www.npmjs.com/package/create-sigil-app" rel="noreferrer noopener" target="_blank"><code>create-sigil-app</code></a></td><td>One-command project scaffolding</td></tr></tbody></table></div>
116<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="next-steps"><a data-card="" href="#next-steps" class="peer">Next steps</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
117<ul>
118<li><a href="/docs/installation">Installation</a> — detailed setup for Next.js, Vite, and Remix</li>
119<li><a href="/docs/theming">Theming</a> — create and share presets</li>
120<li><a href="/docs/cli">CLI Reference</a> — all available commands</li>
121<li><a href="/docs/components/modal">Modal</a> — expanded overlay component docs</li>
122<li><a href="/docs/components/multi-select">MultiSelect</a> — advanced input component docs</li>
123<li><a href="/docs/components/button">Button</a> — your first component</li>
124</ul></div><div class="flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden"></div><div class="@container grid gap-4 grid-cols-1"><a class="flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full text-end" href="/docs/installation"><div class="inline-flex items-center gap-1.5 font-medium flex-row-reverse"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right -mx-1 size-4 shrink-0 rtl:rotate-180" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg><p>Installation</p></div><p class="text-fd-muted-foreground truncate">Add Sigil UI to a new or existing project in under two minutes.</p></a></div></article><div id="nd-toc" class="sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden"><h3 id="toc-title" class="inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-align-start size-4" aria-hidden="true"><path d="M21 5H3"></path><path d="M15 12H3"></path><path d="M17 19H3"></path></svg>On this page</h3><div class="relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3"><div class="relative">
124<div class="flex flex-col border-s border-fd-foreground/10"><a data-active="false" href="#why-sigil-ui" class="prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground ps-3">Why Sigil UI</a><a data-active="false" href="#how-it-compares-to-traditional-component-libraries" class="prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground ps-6">How it compares to traditional component libraries</a><a data-active="false" href="#quick-start" class="prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground ps-6">Quick start</a><a data-active="false" href="#token-architecture" class="prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground ps-6">Token architecture</a><a data-active="false" href="#packages-on-npm" class="prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground ps-6">Packages on npm</a><a data-active="false" href="#next-steps" class="prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground ps-6">Next steps</a></div></div></div></div><!--$--><!--/$--></div></div></div></div></div><div style="position:fixed;bottom:0;left:0;right:0;z-index:10001"><div class="devbar-chrome" style="height:44px;width:100%;flex-shrink:0;display:flex;align-items:center;padding:0 6px;background:var(--db-surface);border-top:1px solid var(--db-border);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);z-index:10001;gap:2px"><button type="button" style="display:flex;align-items:center;gap:4px;padding:5px 10px 5px 7px;border-radius:6px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:500;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;flex-shrink:0"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewB
124ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grid3x3 lucide-grid-3x3" aria-hidden="true" style="color:var(--db-accent)"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path><path d="M9 3v18"></path><path d="M15 3v18"></path></svg><span>Studio</span></button><div style="display:flex;align-items:center;gap:2px;flex:1;min-width:0;min-height:0;flex-direction:row;pointer-events:auto"><div style="width:1px;height:16px;background:var(--db-border);flex-shrink:0;opacity:0.6"></div><div class="devbar-preset-strip" style="flex:1;display:flex;gap:1px;flex-direction:row;overflow-x:auto;overflow-y:hidden;min-width:0;padding:2px 4px"><button type="button" title="default" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:var(--db-accent-dim);border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-accent);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 0ms both"><div style="width:8px;height:8px;border-radius:2px;background:#18181b;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>default</button><button type="button" title="sigil" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 15ms both"><div style="width:8px;height:8px;border-radius:2px;background:#9b99e8;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>sigil</button><button type="button" title="crux" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 30ms both"><div style="width:8px;height:8px;border-radius:2px;background:#dc2626;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>crux</button><button type="button" title="alloy" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 45ms both"><div style="width:8px;height:8px;border-radius:2px;background:#b87333;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>alloy</button><button type="button" title="basalt" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 60ms both"><div style="width:8px;height:8px;border-radius:2px;background:#14b8a6;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>basalt</button><button type="button" title="forge" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 75ms both"><div style="width:8px;height:8px;border-radius:2px;background:#ea580c;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>forge</button><button type="button" title="onyx" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 90ms both"><div style="width:8px;height:8px;border-radius:2px;background:#a855f7;
124border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>onyx</button><button type="button" title="flux" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 105ms both"><div style="width:8px;height:8px;border-radius:2px;background:#06b6d4;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>flux</button><button type="button" title="kova" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 120ms both"><div style="width:8px;height:8px;border-radius:2px;background:#38bdf8;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>kova</button><button type="button" title="etch" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 135ms both"><div style="width:8px;height:8px;border-radius:2px;background:#15803d;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>etch</button><button type="button" title="anvil" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 150ms both"><div style="width:8px;height:8px;border-radius:2px;background:#1e40af;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>anvil</button><button type="button" title="rivet" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 165ms both"><div style="width:8px;height:8px;border-radius:2px;background:#c2410c;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>rivet</button><button type="button" title="shard" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 180ms both"><div style="width:8px;height:8px;border-radius:2px;background:#7c3aed;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>shard</button><button type="button" title="rune" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 195ms both"><div style="width:8px;height:8px;border-radius:2px;background:#b45309;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>rune</button><button type="button" title="fang" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 210ms both"><div style="width:8px;height:8px;border-radius:2px;background:#84cc16;
124border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>fang</button><button type="button" title="cobalt" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 225ms both"><div style="width:8px;height:8px;border-radius:2px;background:#2563eb;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>cobalt</button><button type="button" title="strata" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 240ms both"><div style="width:8px;height:8px;border-radius:2px;background:#92400e;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>strata</button><button type="button" title="brass" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 255ms both"><div style="width:8px;height:8px;border-radius:2px;background:#a16207;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>brass</button><button type="button" title="obsid" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 270ms both"><div style="width:8px;height:8px;border-radius:2px;background:#be123c;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>obsid</button><button type="button" title="axiom" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 285ms both"><div style="width:8px;height:8px;border-radius:2px;background:#2563eb;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>axiom</button><button type="button" title="glyph" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 300ms both"><div style="width:8px;height:8px;border-radius:2px;background:#dc2626;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>glyph</button><button type="button" title="cipher" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 315ms both"><div style="width:8px;height:8px;border-radius:2px;background:#22c55e;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>cipher</button><button type="button" title="prism" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 330ms both"><div style="width:8px;height:8px;border-radius:2px;background:#8b5cf6;
124border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>prism</button><button type="button" title="helix" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 345ms both"><div style="width:8px;height:8px;border-radius:2px;background:#059669;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>helix</button><button type="button" title="hex" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 360ms both"><div style="width:8px;height:8px;border-radius:2px;background:#d946ef;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>hex</button><button type="button" title="vex" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 375ms both"><div style="width:8px;height:8px;border-radius:2px;background:#ec4899;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>vex</button><button type="button" title="arc" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 390ms both"><div style="width:8px;height:8px;border-radius:2px;background:#7c3aed;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>arc</button><button type="button" title="dsgn" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 405ms both"><div style="width:8px;height:8px;border-radius:2px;background:#2563eb;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>dsgn</button><button type="button" title="mrkr" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 420ms both"><div style="width:8px;height:8px;border-radius:2px;background:#eab308;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>mrkr</button><button type="button" title="noir" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 435ms both"><div style="width:8px;height:8px;border-radius:2px;background:#d97706;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>noir</button><button type="button" title="dusk" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 450ms both"><div style="width:8px;height:8px;border-radius:2px;background:#a78bfa;
124border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>dusk</button><button type="button" title="mono" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 465ms both"><div style="width:8px;height:8px;border-radius:2px;background:#525252;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>mono</button><button type="button" title="vast" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 480ms both"><div style="width:8px;height:8px;border-radius:2px;background:#a0522d;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>vast</button><button type="button" title="aura" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 495ms both"><div style="width:8px;height:8px;border-radius:2px;background:#8b5cf6;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>aura</button><button type="button" title="field" style="flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;border-radius:5px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:400;color:var(--db-muted);cursor:pointer;white-space:nowrap;animation:devbar-preset-in 400ms cubic-bezier(0.32, 0.72, 0, 1) 510ms both"><div style="width:8px;height:8px;border-radius:2px;background:#15803d;border:0.5px solid rgba(128,128,128,0.15);flex-shrink:0"></div>field</button></div><div style="width:1px;height:16px;background:var(--db-border);flex-shrink:0;opacity:0.6"></div></div><div style="display:flex;align-items:center;gap:1px;flex-shrink:0;flex-direction:row"><button type="button" style="display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:6px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:500;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;flex-shrink:0"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewB
124ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shuffle" aria-hidden="true"><path d="m18 14 4 4-4 4"></path><path d="m18 2 4 4-4 4"></path><path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"></path><path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"></path><path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"></path></svg></button><button type="button" style="display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:6px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:500;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;flex-shrink:0"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-bottom" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 15h18"></path></svg></button><div style="width:1px;height:16px;background:var(--db-border);flex-shrink:0;opacity:0.6"></div><button type="button" style="display:flex;align-items:center;gap:4px;padding:5px 10px 5px 7px;border-radius:6px;background:transparent;border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:500;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;flex-shrink:0"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewB
124ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg><span>Canvas</span></button><div style="width:1px;height:16px;background:var(--db-border);flex-shrink:0;opacity:0.6"></div><button type="button" style="display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:6px;background:var(--db-accent-dim);border:none;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-accent);cursor:pointer;transition:all 120ms ease-out;flex-shrink:0"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-volume2 lucide-volume-2" aria-hidden="true"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"></path><path d="M16 9a5 5 0 0 1 0 6"></path><path d="M19.364 18.364a9 9 0 0 0 0-12.728"></path></svg></button></div></div></div><div class="devbar-chrome" style="position:fixed;z-index:10000;top:0;bottom:44px;width:260px;left:0;border-right:1px solid var(--db-border);background:var(--db-surface);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);transform:translateX(-100%);transition:transform 380ms cubic-bezier(0.32, 0.72, 0, 1);will-change:transform;overflow:hidden"><div style="display:flex;flex-direction:column;height:100%"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;flex-shrink:0;border-bottom:1px solid var(--db-border)"><div style="display:flex;align-items:center;gap:6px"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grid3x3 lucide-grid-3x3" aria-hidden="true" style="color:var(--db-accent)"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path><path d="M9 3v18"></path><path d="M15 3v18"></path></svg><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:700;color:var(--db-text)">Studio</span><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:8px;font-weight:600;padding:1px 5px;border-radius:3px;background:var(--db-accent-dim);color:var(--db-accent)">default</span></div><div style="display:flex;gap:3px"><button type="button" title="Save preset" style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--db-border);background:none;color:var(--db-muted);cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-save" aria-hidden="true"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"></path><path d="M7 3v4a1 1 0 0 0 1 1h7"></path></svg></button><button type="button" title="Reset" style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--db-border);background:none;color:var(--db-muted);cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg></button><button type="button" title="Export CSS" style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--db-border);background:none;color:var(--db-muted);cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewB
124ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true"><path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path></svg></button><button type="button" title="Close" style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--db-border);background:none;color:var(--db-muted);cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div></div><div style="padding:8px 16px 0"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:600;color:var(--db-muted);text-transform:uppercase;letter-spacing:0.08em">Presets</span><button type="button" title="Random preset" style="display:flex;align-items:center;gap:3px;padding:2px 6px;border-radius:4px;border:1px solid var(--db-border);background:none;color:var(--db-muted);font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:8px;font-weight:500;cursor:pointer;transition:all 120ms ease"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shuffle" aria-hidden="true"><path d="m18 14 4 4-4 4"></path><path d="m18 2 4 4-4 4"></path><path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"></path><path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"></path><path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"></path></svg>random</button></div><div class="devbar-scroll" style="display:grid;grid-template-columns:1fr 1fr;gap:4px;max-height:280px;overflow-y:auto;margin-bottom:8px"><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1.5px solid var(--db-accent);background:var(--db-accent-dim);cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#18181b;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#ffffff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#0a0a0f;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fafafa;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:700;color:var(--db-accent);line-height:1.2">default</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">neutral</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#9b99e8;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#0a0a0f;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fafafa;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#141419;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">sigil</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;
124font-size:7px;color:var(--db-muted);opacity:0.6">structural</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#dc2626;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#ffffff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#000000;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f5f5;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">crux</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">minimal</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#b87333;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f4f0;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#1c1c1c;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#e8e6e0;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">alloy</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">industrial</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#14b8a6;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#0f172a;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#e2e8f0;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#1e293b;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">basalt</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">volcanic</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#ea580c;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#1c1917;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fafaf9;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#292524;
124border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">forge</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">fiery</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#a855f7;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#000000;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f5f5;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#171717;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">onyx</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">luxury</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#06b6d4;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#0a0a0f;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fafafa;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#141419;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">flux</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">dynamic</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#38bdf8;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f8fafc;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#0f172a;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#e2e8f0;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">kova</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">nordic</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#15803d;
124border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#faf8f5;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#292524;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f0ede8;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">etch</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">engraved</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#1e40af;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#e5e7eb;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#111827;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f3f4f6;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">anvil</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">heavy</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#c2410c;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fafaf9;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#18181b;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f0f0f0;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">rivet</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">structural</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#7c3aed;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fafafa;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#09090b;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f0f0f0;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">shard</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;
124font-size:7px;color:var(--db-muted);opacity:0.6">angular</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#b45309;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f0e8;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#1c1917;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#e8e0d4;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">rune</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">ancient</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#84cc16;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#000000;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#ffffff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#111111;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">fang</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">predatory</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#2563eb;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#020617;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#e0e0ff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#0a0a2f;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">cobalt</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">metallic</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#92400e;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f2ed;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#292524;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#e8e4dd;
124border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">strata</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">geological</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#a16207;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fefdf8;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#1c1917;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f0e0;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">brass</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">vintage</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#be123c;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#050505;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#d4d4d8;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#111111;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">obsid</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">obsidian</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#2563eb;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#ffffff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#000000;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f5f5;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">axiom</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">mathematical</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#dc2626;
124border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fafafa;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#09090b;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f0f0f0;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">glyph</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">typographic</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#22c55e;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#000000;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#22c55e;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#0a0a0a;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">cipher</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">terminal</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#8b5cf6;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#faf5ff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#1e1b4b;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f0e8ff;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">prism</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">spectral</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#059669;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#ffffff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#064e3b;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f0fdf4;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">helix</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;
124font-size:7px;color:var(--db-muted);opacity:0.6">biotech</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#d946ef;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#0f0720;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f3ff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#1a1030;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">hex</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">geometric</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#ec4899;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fef08a;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#000000;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fef9c3;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">vex</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">punk</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#7c3aed;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f3ff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#1e1b4b;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#ede9fe;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">arc</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">flowing</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#2563eb;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#ffffff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#000000;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f5f5;
124border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">dsgn</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">wireframe</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#eab308;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fefce8;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#1c1917;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#fef9c3;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">mrkr</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">annotated</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#d97706;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#000000;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#e8e8e8;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#0a0a0a;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">noir</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">cinematic</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#a78bfa;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#1a1625;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f3ff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#2a2035;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">dusk</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">twilight</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#525252;
124border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#ffffff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#000000;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f5f5f5;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">mono</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">monochrome</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#a0522d;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#faf6f0;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#2c1810;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f0e8df;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">vast</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">editorial</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#8b5cf6;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#0f0a1e;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#e8e0f8;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#1a1030;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">aura</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:7px;color:var(--db-muted);opacity:0.6">ethereal</span></div></button><button type="button" style="padding:6px 7px 5px;border-radius:5px;text-align:left;border:1px solid var(--db-border);background:transparent;cursor:pointer;transition:all 120ms ease"><div style="display:flex;gap:2px;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:2px;background:#15803d;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#ffffff;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#0a1a10;border:0.5px solid rgba(128,128,128,0.12)"></div><div style="width:10px;height:10px;border-radius:2px;background:#f0f4f0;border:0.5px solid rgba(128,128,128,0.12)"></div></div><div style="display:flex;align-items:baseline;gap:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text);line-height:1.2">field</span><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;
124font-size:7px;color:var(--db-muted);opacity:0.6">utilitarian</span></div></button></div><div style="height:1px;background:var(--db-border);margin-left:-16px;margin-right:-16px"></div></div><div class="devbar-scroll" style="flex:1;overflow-y:auto;overflow-x:hidden"><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Colors</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(180deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:600px;opacity:1;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:10px"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:grid;grid-template-columns:1fr 1fr;gap:6px 12px"><div style="display:flex;align-items:center;gap:6px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:oklch(0.9197 0.004 286.3201);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">primary</span></div><div style="display:flex;align-items:center;gap:6px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:oklch(0.2739 0.0055 286.0326);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">secondary</span></div><div style="display:flex;align-items:center;gap:6px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:oklch(0.1473 0.0107 285.0074);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">background</span></div><div style="display:flex;align-items:center;gap:6px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:oklch(0.1935 0.01 285.4272);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">surface</span></div><div style="display:flex;align-items:center;gap:6px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:oklch(0.9851 0 0);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">text</span></div><div style="display:flex;align-items:center;gap:6px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:oklch(0.3503 0.0381 284.2617);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">
124border</span></div><div style="display:flex;align-items:center;gap:6px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:oklch(0.2739 0.0055 286.0326);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">accent</span></div></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:4px"><div style="display:flex;align-items:center;gap:6px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:oklch(0.596 0.1274 163.2254);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">success</span></div><div style="display:flex;align-items:center;gap:6px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:oklch(0.6658 0.1574 58.3183);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">warning</span></div><div style="display:flex;align-items:center;gap:6px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:oklch(0.5771 0.2152 27.325);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">error</span></div><div style="display:flex;align-items:center;gap:6px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:oklch(0.5461 0.2152 262.8809);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">info</span></div></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Typography</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">display</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_hgkjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2" style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">body</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_igkjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2" style="font-family:&quot;PP Telegraf&quot;, system-ui, sans-serif"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">mono</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_jgkjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2" style="font-family:&quot;PP Fraktion Mono&quot;, system-ui, sans-serif"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">heading wt</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:50%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="300" aria-valuemax="900" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">600</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">heading trk</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:43.75%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="-0.06" aria-valuemax="0.02" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">-0.015em</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">base size</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:66.66666666666666%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="14" aria-valuemax="20" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">16px</span></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Spacing</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">page margin</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:71.42857142857143%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="8" aria-valuemax="64" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">24px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">section pad</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:70.58823529411765%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="24" aria-valuemax="160" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">64px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">card pad</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:60%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="8" aria-valuemax="48" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">24px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">grid gap</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:54.54545454545454%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="4" aria-valuemax="48" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">24px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">stack gap</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:71.42857142857143%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="4" aria-valuemax="32" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">12px</span></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Radius</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewB
124ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">global</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:75%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="32" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">8px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">button</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:66.66666666666666%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="24" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">8px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">card</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:62.5%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="32" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">12px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">input</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:62.5%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="16" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">6px</span></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Borders &amp; Shadows</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">border w</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:75%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="4" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">1px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">style</span><div style="flex:1;min-width:0"><div role="radiogroup" data-slot="segmented-control" class="inline-flex items-center gap-1 p-1 rounded-[var(--s-radius-md,6px)] bg-[var(--s-surface-sunken,var(--s-surface))] border border-[color:var(--s-border)] w-full text-xs"><button type="button" role="radio" aria-checked="true" data-state="active" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-[var(--s-background)] text-[var(--s-text)] shadow-[var(--s-shadow-sm,0_1px_3px_oklch(0 0 0 / 0.1))] text-[10px] px-2 py-0.5">solid</button><button type="button" role="radio" aria-checked="false" data-state="inactive" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-transparent text-[var(--s-text-muted)] hover:text-[var(--s-text)] text-[10px] px-2 py-0.5">dashed</button><button type="button" role="radio" aria-checked="false" data-state="inactive" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-transparent text-[var(--s-text-muted)] hover:text-[var(--s-text)] text-[10px] px-2 py-0.5">dotted</button><button type="button" role="radio" aria-checked="false" data-state="inactive" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-transparent text-[var(--s-text-muted)] hover:text-[var(--s-text)] text-[10px] px-2 py-0.5">none</button></div></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">card border</span><div style="flex:1;min-width:0"><button type="button" role="switch" aria-checked="true" data-state="checked" value="on" id="_R_jhcjalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="checked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" checked="" value="on"/></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">card shadow</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_khcjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">btn shadow</span><div style="flex:1;min-width:0"><button type="button" role="switch" aria-checked="false" data-state="unchecked" value="on" id="_R_lhcjalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="unchecked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" value="on"/></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">glow</span><div style="flex:1;min-width:0"><div style="display:flex;align-items:center;gap:8px"><button type="button" role="switch" aria-checked="false" data-state="unchecked" value="on" id="_R_1mhcjalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="unchecked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" value="on"/></div></div></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Motion</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewB
124ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(180deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:600px;opacity:1;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:10px"><div style="display:flex;flex-direction:column;gap:6px"><div><button type="button" style="width:100%;display:flex;align-items:center;gap:6px;padding:4px 0;background:none;border:none;cursor:pointer"><svg width="8" height="8" viewBox="0 0 8 8" fill="none" stroke="var(--db-muted)" stroke-width="1.5" stroke-linecap="round" style="transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(90deg)"><path d="M2 1l4 3-4 3"></path></svg><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text2);letter-spacing:0.02em">Transition Spring</span></button><div style="overflow:hidden;max-height:500px;opacity:1;transition:max-height 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;padding-left:14px"><div style="display:flex;flex-direction:column;gap:4px;padding-bottom:6px;border-left:1px solid var(--db-border);padding-left:10px"><div style="display:flex;flex-direction:column;gap:8px"><div style="border-radius:6px;background:var(--db-bg);border:1px solid var(--db-border);padding:6px 2px 2px;position:relative"><span style="position:absolute;top:4px;right:8px;font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:7px;color:var(--db-muted);opacity:0.5;letter-spacing:0.04em">spring</span><svg width="220" height="90" viewBox="0 0 220 90" style="display:block;width:100%"><line x1="8" y1="47.0159799818488" x2="212" y2="47.0159799818488" stroke="var(--db-muted)" stroke-width="0.5" stroke-dasharray="3 2" opacity="0.4"></line><line x1="8" y1="82.9349396493298" x2="212" y2="82.9349396493298" stroke="var(--db-muted)" stroke-width="0.5" opacity="0.15"></line><path d="M8.0,82.9 L9.0,68.8 L10.0,46.0 L11.1,23.7 L12.1,10.6 L13.1,11.9 L14.1,27.1 L15.1,50.1 L16.2,71.9 L17.2,83.8 L18.2,81.2 L19.2,65.1 L20.2,41.9 L21.3,20.7 L22.3,10.0 L23.3,13.9 L24.3,30.8 L25.3,54.2 L26.4,74.6 L27.4,84.2 L28.4,79.1 L29.4,61.3 L30.4,37.9 L31.5,18.1 L32.5,9.8 L33.5,16.2 L34.5,34.7 L35.5,58.1 L36.6,77.1 L37.6,84.2 L38.6,76.6 L39.6,57.3 L40.6,34.0 L41.7,15.9 L42.7,10.1 L43.7,18.8 L44.7,38.7 L45.7,61.8 L46.8,79.1 L47.8,83.7 L48.8,73.8 L49.8,53.3 L50.8,30.4 L51.9,14.1 L52.9,10.8 L53.9,21.8 L54.9,42.8 L55.9,65.4 L57.0,80.7 L58.0,82.7 L59.0,70.6 L60.0,49.3 L61.0,27.0 L62.1,12.7 L63.1,11.9 L64.1,25.0 L65.1,46.8 L66.1,68.6 L67.2,81.9 L68.2,81.4 L69.2,67.3 L70.2,45.2 L71.2,23.9 L72.3,11.7 L73.3,13.5 L74.3,28.5 L75.3,50.8 L76.3,71.6 L77.4,82.6 L78.4,79.6 L79.4,63.7 L80.4,41.3 L81.4,21.1 L82.5,11.2 L83.5,15.4 L84.5,32.1 L85.5,54.7 L86.5,74.2 L87.6,82.9 L88.6,77.5 L89.6,60.0 L90.6,37.4 L91.6,18.7 L92.7,11.1 L93.7,17.8 L94.7,35.9 L95.7,58.5 L96.7,76.4 L97.8,82.8 L98.8,75.0 L99.8,56.2 L100.8,33.8 L101.8,16.6 L102.9,11.5 L103.9,20.4 L104.9,39.8 L105.9,62.0 L106.9,78.3 L108.0,82.2 L109.0,72.2 L110.0,52.3 L111.0,30.3 L112.0,14.9 L113.1,12.3 L114.1,23.3 L115.1,43.7 L116.1,65.4 L117.1,79.8 L118.2,81.2 L119.2,69.2 L120.2,48.4 L121.2,27.1 L122.2,13.7 L123.3,13.5 L124.3,26.5 L125.3,47.6 L126.3,68.5 L127.3,80.8 L128.4,79.8 L129.4,65.9 L130.4,44.5 L131.4,24.1 L132.4,12.8 L133.5,15.0 L134.5,29.9 L135.5,51.4 L136.5,71.2 L137.5,81.5 L138.6,78.1 L139.6,62.4 L140.6,40.7 L141.6,21.5 L142.6,12.4 L143.7,17.0 L144.7,33.4 L145.7,55.2 L146.7,73.7 L147.7,81.7 L148.8,75.9 L149.8,58.8 L150.8,37.0 L151.8,19.2 L152.8,12.4 L153.9,19.3 L154.9,37.1 L155.9,58.8 L156.9,75.8 L157.9,81.4 L159.0,73.5 L160.0,55.1 L161.0,33.5 L162.0,17.3 L163.0,12.8 L164.1,21.9 L165.1,40.8 L166.1,62.2 L167.1,77.5 L168.1,80.8 L169.2,70.8 L170.2,51.3 L171.2,30.2 L172.2,15.8 L173.2,13.7 L174.3,24.7 L175.3,44.6 L176.3,65.4 L177.3,78.9 L178.3,79.8 L179.4,67.8 L180.4,47.6 L181.4,27.2 L182.4,14.6 L183.4,14.9 L184.5,27.9 L185.5,48.3 L186.5,68.3 L187.5,79.8 L188.5,78.4 L189.6,64.6 L190.6,43.8 L191.6,24.4 L192.6,13.9 L193.6,16.5 L194.7,31.1 L195.7,52.0 L196.7,70.9 L197.7,80.3 L198.7,76.6 L199.8,61.2 L200.8,40.2 L201.8,21.9 L202.8,13.6 L203.8,18.5 L204.9,34.6 L205.9,55.6 L206.9,73.2 L207.9,80.4 L208.9,74.5 L210.0,57.7 L211.0,36.7 L212.0,19.8" fill="none" stroke="var(--db-accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="212" cy="19.804349250704917" r="2" fill="var(--db-accent)"></circle></svg></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0">Type</span><div style="display:inline-flex;border-radius:5px;border:1px solid var(--db-border);overflow:hidden;background:var(--db-bg)"><button type="button" style="padding:3px 10px;border:none;background:var(--db-accent-dim);font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:600;color:var(--db-accent);cursor:pointer;transition:all 120ms ease-out;border-right:1px solid var(--db-border)">Time</button><button type="button" style="padding:3px 10px;border:none;background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;border-right:none">Physics</button></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">Duration</span><div style="flex:1;position:relative;height:14px"><div style="position:absolute;top:50%;left:0;right:0;height:3px;transform:translateY(-50%);border-radius:1.5px;background:var(--db-border)"></div><div style="position:absolute;top:50%;left:0;width:7.692307692307694%;height:3px;transform:translateY(-50%);border-radius:1.5px;background:var(--db-accent);opacity:0.6"></div><div style="position:absolute;top:50%;left:7.692307692307694%;transform:translate(-50%, -50%);width:8px;height:8px;border-radius:50%;background:var(--db-accent);border:1.5px solid var(--db-bg);box-shadow:0 0 0 0.5px var(--db-accent);pointer-events:none"></div><input type="range" min="0.05" max="2" step="0.01" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
124margin:0" value="0.2"/></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:40px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">0.20</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">Bounce</span><div style="flex:1;position:relative;height:14px"><div style="position:absolute;top:50%;left:0;right:0;height:3px;transform:translateY(-50%);border-radius:1.5px;background:var(--db-border)"></div><div style="position:absolute;top:50%;left:0;width:100%;height:3px;transform:translateY(-50%);border-radius:1.5px;background:var(--db-accent);opacity:0.6"></div><div style="position:absolute;top:50%;left:100%;transform:translate(-50%, -50%);width:8px;height:8px;border-radius:50%;background:var(--db-accent);border:1.5px solid var(--db-bg);box-shadow:0 0 0 0.5px var(--db-accent);pointer-events:none"></div><input type="range" min="0" max="1" step="0.01" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0" value="1"/></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:40px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">1.00</span></div></div></div></div></div><div><button type="button" style="width:100%;display:flex;align-items:center;gap:6px;padding:4px 0;background:none;border:none;cursor:pointer"><svg width="8" height="8" viewBox="0 0 8 8" fill="none" stroke="var(--db-muted)" stroke-width="1.5" stroke-linecap="round" style="transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(90deg)"><path d="M2 1l4 3-4 3"></path></svg><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text2);letter-spacing:0.02em">Default Easing</span></button><div style="overflow:hidden;max-height:500px;opacity:1;transition:max-height 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;padding-left:14px"><div style="display:flex;flex-direction:column;gap:4px;padding-bottom:6px;border-left:1px solid var(--db-border);padding-left:10px"><div style="display:flex;flex-direction:column;gap:8px"><div style="border-radius:6px;background:var(--db-bg);border:1px solid var(--db-border);padding:6px 2px 2px;position:relative"><span style="position:absolute;top:4px;right:8px;font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:7px;color:var(--db-muted);opacity:0.5;letter-spacing:0.04em">easing</span><svg width="220" height="90" viewBox="0 0 220 90" style="display:block;width:100%"><line x1="8" y1="14.782608695652172" x2="212" y2="14.782608695652172" stroke="var(--db-muted)" stroke-width="0.5" stroke-dasharray="3 2" opacity="0.4"></line><line x1="8" y1="82.6086956521739" x2="212" y2="82.6086956521739" stroke="var(--db-muted)" stroke-width="0.5" opacity="0.15"></line><path d="M8.0,82.6 L9.0,81.6 L10.0,80.6 L11.1,79.6 L12.1,78.6 L13.1,77.6 L14.1,76.7 L15.1,75.7 L16.2,74.8 L17.2,73.9 L18.2,72.9 L19.2,72.0 L20.2,71.1 L21.3,70.2 L22.3,69.3 L23.3,68.5 L24.3,67.6 L25.3,66.7 L26.4,65.9 L27.4,65.1 L28.4,64.2 L29.4,63.4 L30.4,62.6 L31.5,61.8 L32.5,61.0 L33.5,60.2 L34.5,59.4 L35.5,58.7 L36.6,57.9 L37.6,57.2 L38.6,56.4 L39.6,55.7 L40.6,55.0 L41.7,54.3 L42.7,53.6 L43.7,52.9 L44.7,52.2 L45.7,51.5 L46.8,50.8 L47.8,50.2 L48.8,49.5 L49.8,48.9 L50.8,48.2 L51.9,47.6 L52.9,47.0 L53.9,46.4 L54.9,45.7 L55.9,45.1 L57.0,44.6 L58.0,44.0 L59.0,43.4 L60.0,42.8 L61.0,42.3 L62.1,41.7 L63.1,41.2 L64.1,40.6 L65.1,40.1 L66.1,39.6 L67.2,39.1 L68.2,38.5 L69.2,38.0 L70.2,37.6 L71.2,37.1 L72.3,36.6 L73.3,36.1 L74.3,35.6 L75.3,35.2 L76.3,34.7 L77.4,34.3 L78.4,33.8 L79.4,33.4 L80.4,33.0 L81.4,32.6 L82.5,32.1 L83.5,31.7 L84.5,31.3 L85.5,30.9 L86.5,30.6 L87.6,30.2 L88.6,29.8 L89.6,29.4 L90.6,29.1 L91.6,28.7 L92.7,28.4 L93.7,28.0 L94.7,27.7 L95.7,27.3 L96.7,27.0 L97.8,26.7 
124L98.8,26.4 L99.8,26.1 L100.8,25.8 L101.8,25.5 L102.9,25.2 L103.9,24.9 L104.9,24.6 L105.9,24.3 L106.9,24.0 L108.0,23.8 L109.0,23.5 L110.0,23.3 L111.0,23.0 L112.0,22.8 L113.1,22.5 L114.1,22.3 L115.1,22.1 L116.1,21.8 L117.1,21.6 L118.2,21.4 L119.2,21.2 L120.2,21.0 L121.2,20.8 L122.2,20.6 L123.3,20.4 L124.3,20.2 L125.3,20.0 L126.3,19.8 L127.3,19.6 L128.4,19.5 L129.4,19.3 L130.4,19.1 L131.4,19.0 L132.4,18.8 L133.5,18.7 L134.5,18.5 L135.5,18.4 L136.5,18.2 L137.5,18.1 L138.6,17.9 L139.6,17.8 L140.6,17.7 L141.6,17.6 L142.6,17.4 L143.7,17.3 L144.7,17.2 L145.7,17.1 L146.7,17.0 L147.7,16.9 L148.8,16.8 L149.8,16.7 L150.8,16.6 L151.8,16.5 L152.8,16.4 L153.9,16.4 L154.9,16.3 L155.9,16.2 L156.9,16.1 L157.9,16.0 L159.0,16.0 L160.0,15.9 L161.0,15.8 L162.0,15.8 L163.0,15.7 L164.1,15.7 L165.1,15.6 L166.1,15.6 L167.1,15.5 L168.1,15.5 L169.2,15.4 L170.2,15.4 L171.2,15.3 L172.2,15.3 L173.2,15.2 L174.3,15.2 L175.3,15.2 L176.3,15.1 L177.3,15.1 L178.3,15.1 L179.4,15.1 L180.4,15.0 L181.4,15.0 L182.4,15.0 L183.4,15.0 L184.5,14.9 L185.5,14.9 L186.5,14.9 L187.5,14.9 L188.5,14.9 L189.6,14.9 L190.6,14.9 L191.6,14.9 L192.6,14.8 L193.6,14.8 L194.7,14.8 L195.7,14.8 L196.7,14.8 L197.7,14.8 L198.7,14.8 L199.8,14.8 L200.8,14.8 L201.8,14.8 L202.8,14.8 L203.8,14.8 L204.9,14.8 L205.9,14.8 L206.9,14.8 L207.9,14.8 L208.9,14.8 L210.0,14.8 L211.0,14.8 L212.0,14.8" fill="none" stroke="var(--db-accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="212" cy="14.782608695652172" r="2" fill="var(--db-accent)"></circle></svg></div><div style="display:flex;flex-wrap:wrap;gap:3px"><button type="button" style="padding:3px 7px;border-radius:4px;border:1px solid var(--db-accent);background:var(--db-accent-dim);font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:8px;font-weight:600;color:var(--db-accent);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">ease-out-expo</button><button type="button" style="padding:3px 7px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:8px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">ease-in-out</button><button type="button" style="padding:3px 7px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:8px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">spring</button><button type="button" style="padding:3px 7px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:8px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">bounce</button><button type="button" style="padding:3px 7px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:8px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">ease-out</button><button type="button" style="padding:3px 7px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:8px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">ease-in</button><button type="button" style="padding:3px 7px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:8px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">snappy</button><button type="button" style="padding:3px 7px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:8px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">linear</button></div><div style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:8px;color:var(--db-muted);opacity:0.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">cubic-bezier(0.16, 1, 0.3, 1)</div></div></div></div></div><div><button type="button" style="width:100%;display:flex;align-items:center;gap:6px;padding:4px 0;background:none;border:none;cursor:pointer"><svg width="8" height="8" viewBox="0 0 8 8" fill="none" stroke="var(--db-muted)" stroke-width="1.5" stroke-linecap="round" style="transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="M2 1l4 3-4 3"></path></svg><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text2);letter-spacing:0.02em">Durations</span></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;padding-left:14px"><div style="display:flex;flex-direction:column;gap:4px;padding-bottom:6px;border-left:1px solid var(--db-border);padding-left:10px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">fast</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:60%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="50" aria-valuemax="300" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">150ms</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">normal</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:75%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="100" aria-valuemax="500" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">200ms</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">slow</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:90%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="200" aria-valuemax="1200" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">300ms</span></div></div></div></div><div><button type="button" style="width:100%;display:flex;align-items:center;gap:6px;padding:4px 0;background:none;border:none;cursor:pointer"><svg width="8" height="8" viewBox="0 0 8 8" fill="none" stroke="var(--db-muted)" stroke-width="1.5" stroke-linecap="round" style="transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="M2 1l4 3-4 3"></path></svg><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:500;color:var(--db-text2);letter-spacing:0.02em">Interaction</span></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;padding-left:14px"><div style="display:flex;flex-direction:column;gap:4px;padding-bottom:6px;border-left:1px solid var(--db-border);padding-left:10px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">hover scale</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:80%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="1" aria-valuemax="1.1" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">1.02</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">press scale</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:20.00000000000003%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="0.9" aria-valuemax="1" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">0.98</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">hover lift</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:100%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="12" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">-1px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">stagger</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:78.94736842105263%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="10" aria-valuemax="200" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">50ms</span></div></div></div></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Buttons</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">weight</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_11hsjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">transform</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_12hsjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">hover</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_13hsjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">active scale</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:20.00000000000003%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0.9" aria-valuemax="1" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">0.98</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">min-width</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:100%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="200" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">0px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">letter sp</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:78.57142857142857%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="-0.02" aria-valuemax="0.12" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">0.010em</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">icon gap</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:57.14285714285714%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="2" aria-valuemax="16" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">8px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">shadow</span><div style="flex:1;min-width:0"><button type="button" role="switch" aria-checked="false" data-state="unchecked" value="on" id="_R_18hsjalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="unchecked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" value="on"/></div></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Cards</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">hover</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_11i4jalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">border</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_12i4jalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">shadow</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_13i4jalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">padding</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:60%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="8" aria-valuemax="48" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">24px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">title size</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:100%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="12" aria-valuemax="28" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">1px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">title wt</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_16i4jalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">desc size</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:100%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="10" aria-valuemax="20" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">0.875px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">aspect</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_18i4jalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">outline</span><div style="flex:1;min-width:0"><button type="button" role="switch" aria-checked="true" data-state="checked" value="on" id="_R_19i4jalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="checked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" checked="" value="on"/></div></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Inputs</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">height</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:71.42857142857143%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="28" aria-valuemax="56" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">36px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">focus ring</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:50%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="4" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">2px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">focus ring</span><div style="flex:1;min-width:0"><div style="display:flex;align-items:center;gap:8px"><div style="position:relative;width:24px;height:24px;flex-shrink:0"><div style="width:24px;height:24px;border-radius:4px;background:var(--s-primary);border:1px solid var(--db-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)"></div><input type="color" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" value="#888888"/></div></div></div></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Headings</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewB
124ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">h1 size</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:100%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="28" aria-valuemax="80" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">2.25px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">h2 size</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:100%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="20" aria-valuemax="60" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">1.875px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">h3 size</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:100%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="16" aria-valuemax="44" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">1.5px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">h4 size</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:100%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="14" aria-valuemax="36" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">1.25px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">weight</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_likjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">tracking</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:50.00000000000001%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="-0.06" aria-valuemax="0.02" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">-0.020em</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">leading</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:57.14285714285716%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0.9" aria-valuemax="1.6" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">1.20</span></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Backgrounds</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">pattern</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_hisjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">pattern α</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:94%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="0.5" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">0.03</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">noise</span><div style="flex:1;min-width:0"><button type="button" role="switch" aria-checked="false" data-state="unchecked" value="on" id="_R_jisjalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="unchecked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" value="on"/></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">gradient</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_kisjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">grad angle</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:50%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="360" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">180°</span></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">height</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:76.66666666666666%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="36" aria-valuemax="96" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">50px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">blur</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:62.5%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="32" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">12px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">border</span><div style="flex:1;min-width:0"><button type="button" role="switch" aria-checked="false" data-state="unchecked" value="on" id="_R_jj4jalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="unchecked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" value="on"/></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">padding</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:60%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="8" aria-valuemax="48" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">24px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">item gap</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:0%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="2" aria-valuemax="24" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">24px</span></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Hero</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">min-height</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:57.142857142857146%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="300" aria-valuemax="1000" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">600px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">padding Y</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:68.18181818181819%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="24" aria-valuemax="200" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">80px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">content-max</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:65%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="400" aria-valuemax="1200" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">680px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">layout</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_kjcjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">title size</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:58.8235294117647%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="28" aria-valuemax="96" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">56px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">desc size</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:62.5%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="12" aria-valuemax="28" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">18px</span></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">CTA</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">padding Y</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:70.58823529411765%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="24" aria-valuemax="160" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">64px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">max-width</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:58.8235294117647%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="320" aria-valuemax="1000" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">600px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">layout</span><div style="flex:1;min-width:0"><button type="button" role="combobox" aria-controls="radix-_R_jjkjalb_" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-slot="select" class="flex w-full items-center justify-between gap-2 rounded-[var(--s-radius-input,var(--s-radius-md,6px))] border bg-[var(--s-background)] transition-all duration-[var(--s-duration-fast,150ms)] focus:outline-none focus:ring-[length:var(--s-input-focus-ring-width)] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--s-surface)] disabled:text-[var(--s-text-muted)] curs
124or-pointer placeholder:text-[var(--s-text-muted)] [&amp;&gt;span]:truncate border-[color:var(--s-border)] focus:border-[color:var(--s-input-focus-ring-color)] focus:ring-[var(--s-input-focus-ring-color)]/20 h-7 text-[11px] px-2"><span style="pointer-events:none"></span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="shrink-0 text-[var(--s-text-muted)] opacity-50" aria-hidden="true"><path d="M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">title size</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:60%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="20" aria-valuemax="60" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">36px</span></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Footer</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">padding Y</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:69.23076923076923%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="16" aria-valuemax="120" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">48px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">columns</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:40%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="1" aria-valuemax="6" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">4</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">gap</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:30%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="8" aria-valuemax="48" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">36px</span></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Grid &amp; Layout</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">content-max</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:48.07692307692307%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="768" aria-valuemax="1600" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">1200px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">rail-gap</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:60%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
124left:calc(0% + 0px)"><span role="slider" aria-valuemin="8" aria-valuemax="48" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">24px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">grid-cell</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:46.875%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="16" aria-valuemax="80" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">50px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">cross-stroke</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:62.5%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="4" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">1.5px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">navbar-h</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:76.66666666666666%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="36" aria-valuemax="96" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">50px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">bento-gap</span><div style="flex:1;min-width:0"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" data-slot="slider" class="relative flex touch-none select-none items-center w-full" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" data-slot="slider-track" class="relative h-1.5 w-full grow overflow-hidden rounded-[var(--s-radius-full,9999px)] bg-[var(--s-border-muted,var(--s-surface))]"><span data-orientation="horizontal" data-slot="slider-range" class="absolute h-full bg-[var(--s-primary)]" style="left:0%;right:53.33333333333333%"></span></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;left:calc(0% + 0px)"><span role="slider" aria-valuemin="2" aria-valuemax="32" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" data-slot="slider-thumb" class="block size-4 border-2 border-[color:var(--s-primary)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] rounded-[var(--s-radius-full,9999px)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" style="display:none" data-radix-collection-item=""></span><input style="display:none"/></span></span></div><span style="font-family:&quot;PP Fraktion Mono&quot;, ui-monospace, monospace;font-size:9.5px;font-weight:500;color:var(--db-text2);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums">16px</span></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">grid lines</span><div style="flex:1;min-width:0"><button type="button" role="switch" aria-checked="true" data-state="checked" value="on" id="_R_17k4jalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="checked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" checked="" value="on"/></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">dots</span><div style="flex:1;min-width:0"><button type="button" role="switch" aria-checked="false" data-state="unchecked" value="on" id="_R_18k4jalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="unchecked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" value="on"/></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">cell borders</span><div style="flex:1;min-width:0"><button type="button" role="switch" aria-checked="false" data-state="unchecked" value="on" id="_R_19k4jalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="unchecked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" value="on"/></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">cell bg</span><div style="flex:1;min-width:0"><div role="radiogroup" data-slot="segmented-control" class="inline-flex items-center gap-1 p-1 rounded-[var(--s-radius-md,6px)] bg-[var(--s-surface-sunken,var(--s-surface))] border border-[color:var(--s-border)] w-full text-xs"><button type="button" role="radio" aria-checked="true" data-state="active" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-[var(--s-background)] text-[var(--s-text)] shadow-[var(--s-shadow-sm,0_1px_3px_oklch(0 0 0 / 0.1))] text-[10px] px-2 py-0.5">none</button><button type="button" role="radio" aria-checked="false" data-state="inactive" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-transparent text-[var(--s-text-muted)] hover:text-[var(--s-text)] text-[10px] px-2 py-0.5">surface</button><button type="button" role="radio" aria-checked="false" data-state="inactive" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-transparent text-[var(--s-text-muted)] hover:text-[var(--s-text)] text-[10px] px-2 py-0.5">alternate</button></div></div></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Patterns</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewB
124ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="margin-bottom:4px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">Gutter</span><div style="display:flex;flex-wrap:wrap;gap:3px;margin-top:4px"><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">grid</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">dots</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">crosshatch</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">diagonal</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">diamond</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">horizontal</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-accent);background:var(--db-accent-dim);font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:600;color:var(--db-accent);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">horizontal-thin</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">horizontal-fine</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">horizontal-wide</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">hexagon</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">triangle</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">zigzag</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">checker</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">plus</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">brick</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">wave</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">none</button></div></div><div><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;color:var(--db-muted);font-weight:500">Margin</span><div style="display:flex;flex-wrap:wrap;gap:3px;margin-top:4px"><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">grid</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">dots</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">crosshatch</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">diagonal</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">diamond</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-accent);background:var(--db-accent-dim);font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:600;color:var(--db-accent);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">horizontal</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">horizontal-thin</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">horizontal-fine</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">horizontal-wide</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">hexagon</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">triangle</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">zigzag</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">checker</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">plus</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">brick</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">wave</button><button type="button" style="padding:3px 8px;border-radius:4px;border:1px solid var(--db-border);background:transparent;font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9px;font-weight:400;color:var(--db-muted);cursor:pointer;transition:all 120ms ease-out;line-height:1.4">none</button></div></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Alignment</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewB
124ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">content</span><div style="flex:1;min-width:0"><div role="radiogroup" data-slot="segmented-control" class="inline-flex items-center gap-1 p-1 rounded-[var(--s-radius-md,6px)] bg-[var(--s-surface-sunken,var(--s-surface))] border border-[color:var(--s-border)] w-full text-xs"><button type="button" role="radio" aria-checked="true" data-state="active" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-[var(--s-background)] text-[var(--s-text)] shadow-[var(--s-shadow-sm,0_1px_3px_oklch(0 0 0 / 0.1))] text-[10px] px-2 py-0.5">center</button><button type="button" role="radio" aria-checked="false" data-state="inactive" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-transparent text-[var(--s-text-muted)] hover:text-[var(--s-text)] text-[10px] px-2 py-0.5">left</button><button type="button" role="radio" aria-checked="false" data-state="inactive" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-transparent text-[var(--s-text-muted)] hover:text-[var(--s-text)] text-[10px] px-2 py-0.5">wide</button></div></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">hero</span><div style="flex:1;min-width:0"><div role="radiogroup" data-slot="segmented-control" class="inline-flex items-center gap-1 p-1 rounded-[var(--s-radius-md,6px)] bg-[var(--s-surface-sunken,var(--s-surface))] border border-[color:var(--s-border)] w-full text-xs"><button type="button" role="radio" aria-checked="true" data-state="active" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-[var(--s-background)] text-[var(--s-text)] shadow-[var(--s-shadow-sm,0_1px_3px_oklch(0 0 0 / 0.1))] text-[10px] px-2 py-0.5">center</button><button type="button" role="radio" aria-checked="false" data-state="inactive" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-transparent text-[var(--s-text-muted)] hover:text-[var(--s-text)] text-[10px] px-2 py-0.5">left</button><button type="button" role="radio" aria-checked="false" data-state="inactive" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-transparent text-[var(--s-text-muted)] hover:text-[var(--s-text)] text-[10px] px-2 py-0.5">full-bleed</button></div></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">navbar</span><div style="flex:1;min-width:0"><div role="radiogroup" data-slot="segmented-control" class="inline-flex items-center gap-1 p-1 rounded-[var(--s-radius-md,6px)] bg-[var(--s-surface-sunken,var(--s-surface))] border border-[color:var(--s-border)] w-full text-xs"><button type="button" role="radio" aria-checked="true" data-state="active" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-[var(--s-background)] text-[var(--s-text)] shadow-[var(--s-shadow-sm,0_1px_3px_oklch(0 0 0 / 0.1))] text-[10px] px-2 py-0.5">full</button><button type="button" role="radio" aria-checked="false" data-state="inactive" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-transparent text-[var(--s-text-muted)] hover:text-[var(--s-text)] text-[10px] px-2 py-0.5">content</button><button type="button" role="radio" aria-checked="false" data-state="inactive" class="inline-flex items-center justify-center font-medium rounded-[calc(var(--s-radius-md,6px)-2px)] transition-all duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] disabled:pointer-events-none disabled:opacity-50 bg-transparent text-[var(--s-text-muted)] hover:text-[var(--s-text)] text-[10px] px-2 py-0.5">inset</button></div></div></div><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">rail visible</span><div style="flex:1;min-width:0"><button type="button" role="switch" aria-checked="false" data-state="unchecked" value="on" id="_R_kkkjalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focu
124s-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="unchecked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" value="on"/></div></div></div></div></div><div style="border-bottom:1px solid var(--db-border);padding:0 16px"><button type="button" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;border:none;cursor:pointer"><span style="font-family:&quot;PP Mori&quot;, system-ui, sans-serif;font-size:10px;font-weight:600;color:var(--db-text2);text-transform:uppercase;letter-spacing:0.08em">Sound</span><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" style="color:var(--db-muted);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transform:rotate(0deg)"><path d="m6 9 6 6 6-6"></path></svg></button><div style="overflow:hidden;max-height:0;opacity:0;transition:max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;padding-bottom:0"><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;align-items:center;gap:8px;min-height:26px"><span style="font-family:&quot;PP Telegraf&quot;, &quot;PP Mori&quot;, system-ui, sans-serif;font-size:9.5px;font-weight:500;color:var(--db-muted);width:72px;flex-shrink:0;letter-spacing:0.02em">enabled</span><div style="flex:1;min-width:0"><button type="button" role="switch" aria-checked="true" data-state="checked" value="on" id="_R_2ksjalb_" data-slot="switch" class="peer inline-flex shrink-0 cursor-pointer items-center rounded-[var(--s-radius-full,9999px)] border-2 border-transparent bg-[var(--s-border)] data-[state=checked]:bg-[var(--s-primary)] transition-colors duration-[var(--s-duration-fast,150ms)] focus-visible:outline-none focus-visible:ring-[length:var(--s-focus-ring-width)] focus-visible:ring-[var(--s-focus-ring-color)] focus-visible:ring-offset-[var(--s-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 h-4 w-7"><span data-state="checked" data-slot="switch-thumb" class="pointer-events-none rounded-[var(--s-radius-full,9999px)] bg-[var(--s-background)] shadow-[var(--s-shadow-sm)] ring-0 transition-transform duration-[var(--s-duration-fast,150ms)] data-[state=unchecked]:translate-x-0 block size-3 data-[state=checked]:translate-x-3"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" checked="" value="on"/></div></div></div></div></div></div></div></div></div>
124<script src="/_next/static/chunks/0yu21wm4~atfj.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN" id="_R_" async=""></script>
124<script>(self.__next_f=self.__next_f||[]).push([0])</script>
124<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n9:I[519315,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"default\",1]\n:HL[\"/_next/static/chunks/05r._-xkhxe.w.css?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"style\"]\n:HL[\"/_next/static/chunks/07q8132~9~-gm.css?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"style\"]\n:HL[\"/_next/static/media/2f13ad8e538108e0-s.p.0o52u8sd-fo14.woff2?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700\u0026family=Space+Grotesk:wght@500;700\u0026display=swap\",\"style\"]\n2:T6bb,"])</script>
124<script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://sigil-ui.com/#website\",\"name\":\"Sigil UI\",\"url\":\"https://sigil-ui.com\",\"description\":\"One markdown file controls your entire design system.\",\"publisher\":{\"@id\":\"https://sigil-ui.com/#organization\"}},{\"@type\":\"Organization\",\"@id\":\"https://sigil-ui.com/#organization\",\"name\":\"Sigil UI\",\"url\":\"https://sigil-ui.com\",\"logo\":\"https://sigil-ui.com/logo.svg\",\"description\":\"Open-source React component library with 350+ components, 46 presets, 519 design tokens. One token file controls every color, font, radius, and animation.\",\"sameAs\":[\"https://github.com/keiranlovett/reticle-ui\",\"https://www.npmjs.com/org/sigil-ui\",\"https://x.com/kevinliu\"],\"founder\":{\"@type\":\"Person\",\"name\":\"Kevin Liu\",\"url\":\"https://kevinliu.me\"}},{\"@type\":\"SoftwareApplication\",\"@id\":\"https://sigil-ui.com/#app\",\"name\":\"Sigil UI\",\"applicationCategory\":\"DeveloperApplication\",\"operatingSystem\":\"Any\",\"description\":\"One markdown file controls your entire design system. 350+ components, 46 presets, 519 design tokens, all styled through CSS custom properties from a single token layer.\",\"url\":\"https://sigil-ui.com\",\"author\":{\"@id\":\"https://sigil-ui.com/#organization\"},\"license\":\"https://opensource.org/licenses/MIT\",\"offers\":{\"@type\":\"Offer\",\"price\":\"0\",\"priceCurrency\":\"USD\"},\"featureList\":[\"519 configurable design tokens in one file\",\"350+ React components built on Radix + Base UI primitives\",\"46 curated presets that change every token at once\",\"OKLCH color system with perceptual uniformity\",\"Token-driven theming via CSS custom properties\",\"CLI for project setup, preset switching, and component scaffolding\",\"Agent-readable token layer for AI-assisted development\"]}]}"])</script>
124<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"docs\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"slug\",\"\",\"oc\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/05r._-xkhxe.w.css?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/07q8132~9~-gm.css?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-6\",{\"src\":\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-7\",{\"src\":\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"roboto_mono_6fe72337-module__Br3vFa__variable\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.googleapis.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.gstatic.com\",\"crossOrigin\":\"\"}],[\"$\",\"link\",null,{\"rel\":\"stylesheet\",\"href\":\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700\u0026family=Space+Grotesk:wght@500;700\u0026display=swap\"}]]}],[\"$\",\"body\",null,{\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2\"}}],\"$L3\"]}]]}]]}],{\"children\":[\"$L4\",{\"children\":[\"$L5\",{\"children\":[\"$L6\",{},null,false,null]},null,false,\"$@7\"]},null,false,null]},null,false,null],\"$L8\",false]],\"m\":\"$undefined\",\"G\":[\"$9\",[\"$La\",\"$Lb\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\"}\n"])</script>
124<script>self.__next_f.push([1,"c:I[405625,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"ThemeProvider\"]\nd:I[777677,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"SigilShell\"]\ne:I[16371,[\"/_next/static/chunks/0o~jm1~h~.mb5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0njqfkuk24ws_.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"default\"]\nf:I[115100,[\"/_next/static/chunks/0o~jm1~h~.mb5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0njqfkuk24ws_.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"default\"]\n10:I[834907,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"DocSearchPalette\"]\n11:I[427788,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"RootProvider\"]\n12:I[810824,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"LayoutBody\"]\n16:I[584946,[\"/_next/static/chunks/0o~jm1~h~.mb5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0njqfkuk24ws_.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"OutletBoundary\"]\n17:\"$Sreact.suspen"])</script>
124<script>self.__next_f.push([1,"se\"\n1a:I[584946,[\"/_next/static/chunks/0o~jm1~h~.mb5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0njqfkuk24ws_.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"ViewportBoundary\"]\n1c:I[584946,[\"/_next/static/chunks/0o~jm1~h~.mb5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0njqfkuk24ws_.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"MetadataBoundary\"]\n"])</script>
124<script>self.__next_f.push([1,"3:[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"$Ld\",null,{\"children\":[[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L10\",null,{}]]}]}]\n"])</script>
124<script>self.__next_f.push([1,"4:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L11\",null,{\"children\":[\"$\",\"$L12\",null,{\"tree\":{\"type\":\"root\",\"$ref\":\"meta.json\",\"$id\":\"root\",\"name\":\"Docs\",\"description\":\"$undefined\",\"children\":[{\"$id\":\"_0\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Getting Started\"},{\"$id\":\"index.mdx\",\"type\":\"page\",\"name\":\"Getting Started\",\"description\":\"One markdown file controls your entire design system. 519 tokens, 33 categories, 350+ components. Compiles to CSS + Tailwind v4.\",\"icon\":\"$undefined\",\"url\":\"/docs\",\"$ref\":\"index.mdx\"},{\"$id\":\"installation.mdx\",\"type\":\"page\",\"name\":\"Installation\",\"description\":\"Add Sigil UI to a new or existing project in under two minutes.\",\"icon\":\"$undefined\",\"url\":\"/docs/installation\",\"$ref\":\"installation.mdx\"},{\"$id\":\"theming.mdx\",\"type\":\"page\",\"name\":\"Theming\",\"description\":\"Change once, update everywhere. Sigil's three-layer token system makes theming deterministic.\",\"icon\":\"$undefined\",\"url\":\"/docs/theming\",\"$ref\":\"theming.mdx\"},{\"$id\":\"cli.mdx\",\"type\":\"page\",\"name\":\"CLI Reference\",\"description\":\"The Sigil CLI bootstraps projects, converts existing apps, installs components, manages presets, and validates setup.\",\"icon\":\"$undefined\",\"url\":\"/docs/cli\",\"$ref\":\"cli.mdx\"},{\"$id\":\"presets.mdx\",\"type\":\"page\",\"name\":\"Presets\",\"description\":\"44 curated visual identities — switch your entire design system with one config change.\",\"icon\":\"$undefined\",\"url\":\"/docs/presets\",\"$ref\":\"presets.mdx\"},{\"$id\":\"alignment.mdx\",\"type\":\"page\",\"name\":\"Alignment Rails\",\"description\":\"Snap sections, navbars, and grids to a deterministic alignment rail system.\",\"icon\":\"$undefined\",\"url\":\"/docs/alignment\",\"$ref\":\"alignment.mdx\"},{\"$id\":\"_1\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Components\"},{\"$id\":\"components/accordion.mdx\",\"type\":\"page\",\"name\":\"Accordion\",\"description\":\"A Accordion component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/accordion\",\"$ref\":\"components/accordion.mdx\"},{\"$id\":\"components/search-input.mdx\",\"type\":\"page\",\"name\":\"SearchInput\",\"description\":\"A SearchInput component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/search-input\",\"$ref\":\"components/search-input.mdx\"},{\"$id\":\"components/alert.mdx\",\"type\":\"page\",\"name\":\"Alert\",\"description\":\"A Alert component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/alert\",\"$ref\":\"components/alert.mdx\"},{\"$id\":\"components/aspect-ratio.mdx\",\"type\":\"page\",\"name\":\"AspectRatio\",\"description\":\"A AspectRatio component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/aspect-ratio\",\"$ref\":\"components/aspect-ratio.mdx\"},{\"$id\":\"components/avatar.mdx\",\"type\":\"page\",\"name\":\"Avatar\",\"description\":\"A Avatar component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/avatar\",\"$ref\":\"components/avatar.mdx\"},{\"$id\":\"components/badge.mdx\",\"type\":\"page\",\"name\":\"Badge\",\"description\":\"A Badge component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/badge\",\"$ref\":\"components/badge.mdx\"},{\"$id\":\"components/braille-spinner.mdx\",\"type\":\"page\",\"name\":\"BrailleSpinner\",\"description\":\"A BrailleSpinner component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/braille-spinner\",\"$ref\":\"components/braille-spinner.mdx\"},{\"$id\":\"components/button.mdx\",\"type\":\"page\",\"name\":\"Button\",\"description\":\"A polymorphic button with token-driven variants, sizes, and states. Supports asChild via Radix Slot for polymorphism.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/button\",\"$ref\":\"components/button.mdx\"},{\"$id\":\"components/button-group.mdx\",\"type\":\"page\",\"name\":\"ButtonGroup\",\"description\":\"A ButtonGroup component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/button-group\",\"$ref\":\"components/button-group.mdx\"},{\"$id\":\"components/calendar.mdx\",\"type\":\"page\",\"name\":\"Calendar\",\"description\":\"A token-driven calendar built on react-day-picker with single, range, and dropdown navigation modes.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/calendar\",\"$ref\":\"components/calendar.mdx\"},{\"$id\":\"components/card.mdx\",\"type\":\"page\",\"name\":\"Card\",\"description\":\"A composable card with header, content, and footer slots. Reads radius, shadow, and surface color from your token file.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/card\",\"$ref\":\"components/card.mdx\"},{\"$id\":\"components/carousel.mdx\",\"type\":\"page\",\"name\":\"Carousel\",\"description\":\"An accessible Embla-powered slider with keyboard support, optional 3D tilt, and dot pagination.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/carousel\",\"$ref\":\"components/carousel.mdx\"},{\"$id\":\"components/chart-container.mdx\",\"type\":\"page\",\"name\":\"ChartContainer\",\"description\":\"A ChartContainer component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/chart-container\",\"$ref\":\"components/chart-container.mdx\"},{\"$id\":\"components/checkbox.mdx\",\"type\":\"page\",\"name\":\"Checkbox\",\"description\":\"A Checkbox component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/checkbox\",\"$ref\":\"components/checkbox.mdx\"},{\"$id\":\"components/checkbox-group.mdx\",\"type\":\"page\",\"name\":\"CheckboxGroup\",\"description\":\"A multi-select checkbox group with shared state, sub-labels, and disabled support.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/checkbox-group\",\"$ref\":\"components/checkbox-group.mdx\"},{\"$id\":\"components/circular-progress.mdx\",\"type\":\"page\",\"name\":\"CircularProgress\",\"description\":\"A CircularProgress component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/circular-progress\",\"$ref\":\"components/circular-progress.mdx\"},{\"$id\":\"components/clipboard.mdx\",\"type\":\"page\",\"name\":\"Clipboard\",\"description\":\"A Clipboard component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/clipboard\",\"$ref\":\"components/clipboard.mdx\"},{\"$id\":\"components/code-block.mdx\",\"type\":\"page\",\"name\":\"CodeBlock\",\"description\":\"A CodeBlock component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/code-block\",\"$ref\":\"components/code-block.mdx\"},{\"$id\":\"components/collapsible.mdx\",\"type\":\"page\",\"name\":\"Collapsible\",\"description\":\"A Collapsible component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/collapsible\",\"$ref\":\"components/collapsible.mdx\"},{\"$id\":\"components/color-picker.mdx\",\"type\":\"page\",\"name\":\"ColorPicker\",\"description\":\"A ColorPicker component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/color-picker\",\"$ref\":\"components/color-picker.mdx\"},{\"$id\":\"components/combobox.mdx\",\"type\":\"page\",\"name\":\"Combobox\",\"description\":\"A Combobox component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/combobox\",\"$ref\":\"components/combobox.mdx\"},{\"$id\":\"components/data-table.mdx\",\"type\":\"page\",\"name\":\"DataTable\",\"description\":\"A token-driven data table with custom cell renderers, click handling, and empty states.\",\"
124icon\":\"$undefined\",\"url\":\"/docs/components/data-table\",\"$ref\":\"components/data-table.mdx\"},{\"$id\":\"components/date-picker.mdx\",\"type\":\"page\",\"name\":\"DatePicker\",\"description\":\"A DatePicker component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/date-picker\",\"$ref\":\"components/date-picker.mdx\"},{\"$id\":\"components/editable.mdx\",\"type\":\"page\",\"name\":\"Editable\",\"description\":\"A Editable component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/editable\",\"$ref\":\"components/editable.mdx\"},{\"$id\":\"components/empty.mdx\",\"type\":\"page\",\"name\":\"Empty\",\"description\":\"A Empty component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/empty\",\"$ref\":\"components/empty.mdx\"},{\"$id\":\"components/file-upload.mdx\",\"type\":\"page\",\"name\":\"FileUpload\",\"description\":\"A FileUpload component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/file-upload\",\"$ref\":\"components/file-upload.mdx\"},{\"$id\":\"components/input.mdx\",\"type\":\"page\",\"name\":\"Input\",\"description\":\"A styled text input that reads border, radius, and focus tokens from your token file.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/input\",\"$ref\":\"components/input.mdx\"},{\"$id\":\"components/input-group.mdx\",\"type\":\"page\",\"name\":\"InputGroup\",\"description\":\"A InputGroup component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/input-group\",\"$ref\":\"components/input-group.mdx\"},{\"$id\":\"components/input-otp.mdx\",\"type\":\"page\",\"name\":\"InputOTP\",\"description\":\"A InputOTP component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/input-otp\",\"$ref\":\"components/input-otp.mdx\"},{\"$id\":\"components/item.mdx\",\"type\":\"page\",\"name\":\"Item\",\"description\":\"A Item component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/item\",\"$ref\":\"components/item.mdx\"},{\"$id\":\"components/kpi.mdx\",\"type\":\"page\",\"name\":\"KPI\",\"description\":\"A KPI component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/kpi\",\"$ref\":\"components/kpi.mdx\"},{\"$id\":\"components/kbd.mdx\",\"type\":\"page\",\"name\":\"Kbd\",\"description\":\"A Kbd component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/kbd\",\"$ref\":\"components/kbd.mdx\"},{\"$id\":\"components/label.mdx\",\"type\":\"page\",\"name\":\"Label\",\"description\":\"A Label component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/label\",\"$ref\":\"components/label.mdx\"},{\"$id\":\"components/meter.mdx\",\"type\":\"page\",\"name\":\"Meter\",\"description\":\"A Meter component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/meter\",\"$ref\":\"components/meter.mdx\"},{\"$id\":\"components/native-select.mdx\",\"type\":\"page\",\"name\":\"NativeSelect\",\"description\":\"A NativeSelect component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/native-select\",\"$ref\":\"components/native-select.mdx\"},{\"$id\":\"components/number-field.mdx\",\"type\":\"page\",\"name\":\"NumberField\",\"description\":\"A NumberField component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/number-field\",\"$ref\":\"components/number-field.mdx\"},{\"$id\":\"components/panel.mdx\",\"type\":\"page\",\"name\":\"Panel\",\"description\":\"A Panel component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/panel\",\"$ref\":\"components/panel.mdx\"},{\"$id\":\"components/password-input.mdx\",\"type\":\"page\",\"name\":\"PasswordInput\",\"description\":\"A PasswordInput component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/password-input\",\"$ref\":\"components/password-input.mdx\"},{\"$id\":\"components/code-tabs.mdx\",\"type\":\"page\",\"name\":\"CodeTabs\",\"description\":\"A CodeTabs component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/code-tabs\",\"$ref\":\"components/code-tabs.mdx\"},{\"$id\":\"components/progress.mdx\",\"type\":\"page\",\"name\":\"Progress\",\"description\":\"A Progress component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/progress\",\"$ref\":\"components/progress.mdx\"},{\"$id\":\"components/radio-group.mdx\",\"type\":\"page\",\"name\":\"RadioGroup\",\"description\":\"A RadioGroup component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/radio-group\",\"$ref\":\"components/radio-group.mdx\"},{\"$id\":\"components/rating-group.mdx\",\"type\":\"page\",\"name\":\"RatingGroup\",\"description\":\"A RatingGroup component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/rating-group\",\"$ref\":\"components/rating-group.mdx\"},{\"$id\":\"components/resizable-panel-group.mdx\",\"type\":\"page\",\"name\":\"ResizablePanelGroup\",\"description\":\"A ResizablePanelGroup component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/resizable-panel-group\",\"$ref\":\"components/resizable-panel-group.mdx\"},{\"$id\":\"components/scroll-area.mdx\",\"type\":\"page\",\"name\":\"ScrollArea\",\"description\":\"A ScrollArea component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/scroll-area\",\"$ref\":\"components/scroll-area.mdx\"},{\"$id\":\"components/segmented-control.mdx\",\"type\":\"page\",\"name\":\"SegmentedControl\",\"description\":\"A SegmentedControl component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/segmented-control\",\"$ref\":\"components/segmented-control.mdx\"},{\"$id\":\"components/select.mdx\",\"type\":\"page\",\"name\":\"Select\",\"description\":\"A Select component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/select\",\"$ref\":\"components/select.mdx\"},{\"$id\":\"components/separator.mdx\",\"type\":\"page\",\"name\":\"Separator\",\"description\":\"A Separator component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/separator\",\"$ref\":\"components/separator.mdx\"},{\"$id\":\"components/signature-pad.mdx\",\"type\":\"page\",\"name\":\"SignaturePad\",\"description\":\"A SignaturePad component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/signature-pad\",\"$ref\":\"components/signature-pad.mdx\"},{\"$id\":\"components/skeleton.mdx\",\"type\":\"page\",\"name\":\"Skeleton\",\"description\":\"A Skeleton component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/skeleton\",\"$ref\":\"components/skeleton.mdx\"},{\"$id\":\"components/slider.mdx\",\"type\":\"page\",\"name\":\"Slider\",\"description\":\"A Slider component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/slider\",\"$ref\":\"components/slider.mdx\"},{\"$id\":\"components/split-button.mdx\",\"type\":\"page\",\"name\":\"SplitButton\",\"description\":\"A SplitButton component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/split-button\",\"$ref\":\"components/split-button.mdx\"},{\"$id\":\"components/status-badge.mdx\",\"type\":\"page\",\"name\":\"StatusBadge\",\"description\":\"A StatusBadge component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/status-badge\",\"$ref\":\"components/status-badge.mdx\"},{\"$id\":\"components/stepper.mdx\",\"type\":\"page\",\"name\":\"Stepper\",\"description\":\"A Stepper component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/stepper\",\"$ref\":\"components/stepper.mdx\"},{\"$id\":\"components/switch.mdx\",\"type\":\"page\",\"name\":\"Switch\",\"description\":\"A Switch component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/switch\",\"$ref\":\"components/switch.mdx\"},{\"$id\":\"components/table.mdx\",\"type\":\"page\",\"name\":\"Table\",\"description\":\"A Table component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/table\",\"$ref\":\"components/table.mdx\"},{\"$id\":\"components/tabs.mdx\",\"type\":\"page\",\"name\":\"Tabs\",\"description\":\"A Tabs component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/tabs\",\"$ref\":\"components/tabs.mdx\"},{\"$id\":\"components/tags-input.mdx\",\"type\":\"page\",\"name\":\"TagsInput\",\"description\":\"A TagsInput component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/tags-input\",\"$ref\":\"components/tags-input.mdx\"},{\"$id\":\"components/terminal.mdx\",\"type\":\"page\",\"name\":\"Terminal\",\"description\":\"A Terminal component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/terminal\",\"$ref\":\"components/terminal.mdx\"},{\"$id\":\"components/textarea.mdx\",\"type\":\"page\",\"name\":\"Textarea\",\"description\":\"A Textarea component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/textarea\",\"$ref\":\"components/textarea.mdx\"},{\"$id\":\"components/toggle.mdx\",\"type\":\"page\",\"name\":\"Toggle\",\"description\":\"A Toggle component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/toggle\",\"$ref\":\"components/toggle.mdx\"},{\"$id\":\"components/toggle-group.mdx\",\"type\":\"page\",\"name\":\"ToggleGroup\",\"description\":\"A ToggleGroup component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/toggle-group\",\"$ref\":\"components/toggle-group.mdx\"},{\"$id\":\"components/tooltip-provider.mdx\",\"type\":\"page\",\"name\":\"TooltipProvider\",\"description\":\"A TooltipProvider component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/tooltip-provider\",\"$ref\":\"components/tooltip-provider.mdx\"},{\"$id\":\"components/tree-view.mdx\",\"type\":\"page\",\"name\":\"TreeView\",\"description\":\"A TreeView component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/tree-view\",\"$ref\":\"components/tree-view.mdx\"},{\"$id\":\"components/h1.mdx\",\"type\":\"page\",\"name\":\"H1\",\"description\":\"A H1 component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/h1\",\"$ref\":\"components/h1.mdx\"},{\"$id\":\"_2\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Layout\"},{\"$id\":\"layout/app-shell.mdx\",\"type\":\"page\",\"name\":\"AppShell\",\"description\":\"A AppShell component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/app-shell\",\"$ref\":\"layout/app-shell.mdx\"},{\"$id\":\"layout/aside.mdx\",\"type\":\"page\",\"name\":\"Aside\",\"description\":\"A Aside component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/aside\",\"$ref\":\"layout/aside.mdx\"},{\"$id\":\"layout/banner.mdx\",\"type\":\"page\",\"name\":\"Banner\",\"description\":\"A Banner component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/banner\",\"$ref\":\"layout/banner.mdx\"},{\"$id\":\"layout/box.mdx\",\"type\":\"page\",\"name\":\"Box\",\"description\":\"A Box component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/box\",\"$ref\":\"layout/box.mdx\"},{\"$id\":\"layout/center.mdx\",\"type\":\"page\",\"name\":\"Center\",\"description\":\"A Center component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/center\",\"$ref\":\"layout/center.mdx\"},{\"$id\":\"layout/container.mdx\",\"type\":\"page\",\"name\":\"Container\",\"description\":\"A Container component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/container\",\"$ref\":\"layout/container.mdx\"},{\"$id\":\"layout/divider.mdx\",\"type\":\"page\",\"name\":\"Divider\",\"description\":\"A Divider component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/divider\",\"$ref\":\"layout/divider.mdx\"},{\"$id\":\"layout/flex.mdx\",\"type\":\"page\",\"name\":\"Flex\",\"description\":\"A Flex component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/flex\",\"$ref\":\"layout/flex.mdx\"},{\"$id\":\"layout/frame.mdx\",\"type\":\"page\",\"name\":\"Frame\",\"description\":\"A Frame component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/frame\",\"$ref\":\"layout/frame.mdx\"},{\"$id\":\"layout/hairline.mdx\",\"type\":\"page\",\"name\":\"Hairline\",\"description\":\"A free-flow rule for editorial and hairline rhythm pages.\",\"
124icon\":\"$undefined\",\"url\":\"/docs/layout/hairline\",\"$ref\":\"layout/hairline.mdx\"},{\"$id\":\"layout/sigil-frame.mdx\",\"type\":\"page\",\"name\":\"SigilFrame\",\"description\":\"A structural-visibility frame that displays the underlying token grid — cross marks, rail lines, and measurement labels — around its children.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/sigil-frame\",\"$ref\":\"layout/sigil-frame.mdx\"},{\"$id\":\"layout/sigil-full-bleed.mdx\",\"type\":\"page\",\"name\":\"SigilFullBleed\",\"description\":\"A layout primitive that breaks out of the content column to span the full viewport width while maintaining the structural grid.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/sigil-full-bleed\",\"$ref\":\"layout/sigil-full-bleed.mdx\"},{\"$id\":\"layout/sigil-grid.mdx\",\"type\":\"page\",\"name\":\"SigilGrid\",\"description\":\"Grid with visible cross marks at cell intersections. Uses a pseudo-element background to render the sigil pattern.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/sigil-grid\",\"$ref\":\"layout/sigil-grid.mdx\"},{\"$id\":\"layout/sigil-page-grid.mdx\",\"type\":\"page\",\"name\":\"SigilPageGrid\",\"description\":\"A page-level 12-column grid with structural-visibility rail lines, cross marks at intersections, and gutter patterns.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/sigil-page-grid\",\"$ref\":\"layout/sigil-page-grid.mdx\"},{\"$id\":\"layout/rhythm-modes.mdx\",\"type\":\"page\",\"name\":\"Rhythm Modes\",\"description\":\"Choose between locked full-cell structural layout and free-flow hairline composition.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/rhythm-modes\",\"$ref\":\"layout/rhythm-modes.mdx\"},{\"$id\":\"layout/structural-grid-rhythm.mdx\",\"type\":\"page\",\"name\":\"Structural Grid Rhythm\",\"description\":\"How Sigil keeps sections, dividers, rails, and gutter ruler patterns phase-locked to full grid-cell intervals.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/structural-grid-rhythm\",\"$ref\":\"layout/structural-grid-rhythm.mdx\"},{\"$id\":\"layout/sigil-view-code.mdx\",\"type\":\"page\",\"name\":\"SigilViewCode\",\"description\":\"Toggle between a live demo and the source code that produced it.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/sigil-view-code\",\"$ref\":\"layout/sigil-view-code.mdx\"},{\"$id\":\"layout/gutter.mdx\",\"type\":\"page\",\"name\":\"Gutter\",\"description\":\"A Gutter component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/gutter\",\"$ref\":\"layout/gutter.mdx\"},{\"$id\":\"layout/h-rule.mdx\",\"type\":\"page\",\"name\":\"HRule\",\"description\":\"A HRule component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/h-rule\",\"$ref\":\"layout/h-rule.mdx\"},{\"$id\":\"layout/header.mdx\",\"type\":\"page\",\"name\":\"Header\",\"description\":\"A Header component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/header\",\"$ref\":\"layout/header.mdx\"}
124,{\"$id\":\"layout/layout-controls.mdx\",\"type\":\"page\",\"name\":\"LayoutControls\",\"description\":\"A LayoutControls component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/layout-controls\",\"$ref\":\"layout/layout-controls.mdx\"},{\"$id\":\"layout/main.mdx\",\"type\":\"page\",\"name\":\"Main\",\"description\":\"A Main component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/main\",\"$ref\":\"layout/main.mdx\"},{\"$id\":\"layout/margin.mdx\",\"type\":\"page\",\"name\":\"Margin\",\"description\":\"A Margin component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/margin\",\"$ref\":\"layout/margin.mdx\"},{\"$id\":\"layout/page-grid.mdx\",\"type\":\"page\",\"name\":\"PageGrid\",\"description\":\"A PageGrid component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/page-grid\",\"$ref\":\"layout/page-grid.mdx\"},{\"$id\":\"layout/page-shell.mdx\",\"type\":\"page\",\"name\":\"PageShell\",\"description\":\"Top-level `\u003cmain\u003e` wrapper that centers content with token-driven max-width. Use `inset` for full-bleed tool layouts inside an AppShell.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/page-shell\",\"$ref\":\"layout/page-shell.mdx\"},{\"$id\":\"layout/section.mdx\",\"type\":\"page\",\"name\":\"Section\",\"description\":\"A Section component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/section\",\"$ref\":\"layout/section.mdx\"},{\"$id\":\"layout/section-divider.mdx\",\"type\":\"page\",\"name\":\"SectionDivider\",\"description\":\"A SectionDivider component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/section-divider\",\"$ref\":\"layout/section-divider.mdx\"},{\"$id\":\"layout/sigil-navbar.mdx\",\"type\":\"page\",\"name\":\"SigilNavbar\",\"description\":\"A SigilNavbar component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/sigil-navbar\",\"$ref\":\"layout/sigil-navbar.mdx\"},{\"$id\":\"layout/sigil-gutter.mdx\",\"type\":\"page\",\"name\":\"SigilGutter\",\"description\":\"A SigilGutter component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/sigil-gutter\",\"$ref\":\"layout/sigil-gutter.mdx\"},{\"$id\":\"layout/sigil-section.mdx\",\"type\":\"page\",\"name\":\"SigilSection\",\"description\":\"A SigilSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/sigil-section\",\"$ref\":\"layout/sigil-section.mdx\"},{\"$id\":\"layout/simple-grid.mdx\",\"type\":\"page\",\"name\":\"SimpleGrid\",\"description\":\"A SimpleGrid component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/simple-grid\",\"$ref\":\"layout/simple-grid.mdx\"},{\"$id\":\"layout/spacer.mdx\",\"type\":\"page\",\"name\":\"Spacer\",\"description\":\"A Spacer component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/spacer\",\"$ref\":\"layout/spacer.mdx\"},{\"$id\":\"layout/stack.mdx\",\"type\":\"page\",\"name\":\"Stack\",\"description\":\"A Stack component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/stack\",\"$ref\":\"layout/stack.mdx\"},{\"$id\":\"layout/voronoi-bento.mdx\",\"type\":\"page\",\"name\":\"VoronoiBento\",\"description\":\"A VoronoiBento component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/voronoi-bento\",\"$ref\":\"layout/voronoi-bento.mdx\"},{\"$id\":\"_3\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Navigation\"},{\"$id\":\"navigation/container-query.mdx\",\"type\":\"page\",\"name\":\"ContainerQuery\",\"description\":\"A ContainerQuery component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/navigation/container-query\",\"$ref\":\"navigation/container-query.mdx\"},{\"$id\":\"navigation/breadcrumb.mdx\",\"type\":\"page\",\"name\":\"Breadcrumb\",\"description\":\"A Breadcrumb component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/navigation/breadcrumb\",\"$ref\":\"navigation/breadcrumb.mdx\"},{\"$id\":\"navigation/footer.mdx\",\"type\":\"page\",\"name\":\"Footer\",\"description\":\"A Footer component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/navigation/footer\",\"$ref\":\"navigation/footer.mdx\"},{\"$id\":\"navigation/menubar.mdx\",\"type\":\"page\",\"name\":\"Menubar\",\"description\":\"A Menubar component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/navigation/menubar\",\"$ref\":\"navigation/menubar.mdx\"},{\"$id\":\"navigation/navbar.mdx\",\"type\":\"page\",\"name\":\"Navbar\",\"description\":\"A Navbar component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/navigation/navbar\",\"$ref\":\"navigation/navbar.mdx\"},{\"$id\":\"navigation/navigation-menu.mdx\",\"type\":\"page\",\"name\":\"NavigationMenu\",\"description\":\"A NavigationMenu component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/navigation/navigation-menu\",\"$ref\":\"navigation/navigation-menu.mdx\"},{\"$id\":\"navigation/pagination.mdx\",\"type\":\"page\",\"name\":\"Pagination\",\"description\":\"A Pagination component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/navigation/pagination\",\"$ref\":\"navigation/pagination.mdx\"},{\"$id\":\"navigation/sidebar.mdx\",\"type\":\"page\",\"name\":\"Sidebar\",\"description\":\"A Sidebar component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/navigation/sidebar\",\"$ref\":\"navigation/sidebar.mdx\"},{\"$id\":\"navigation/social-icons.mdx\",\"type\":\"page\",\"name\":\"SocialIcons\",\"description\":\"A SocialIcons component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/navigation/social-icons\",\"$ref\":\"navigation/social-icons.mdx\"},{\"$id\":\"navigation/toolbar.mdx\",\"type\":\"page\",\"name\":\"Toolbar\",\"description\":\"A Toolbar component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/navigation/toolbar\",\"$ref\":\"navigation/toolbar.mdx\"},{\"$id\":\"_4\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Overlays\"},{\"$id\":\"overlays/alert-dialog.mdx\",\"type\":\"page\",\"name\":\"AlertDialog\",\"description\":\"A AlertDialog component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/alert-dialog\",\"$ref\":\"overlays/alert-dialog.mdx\"},{\"$id\":\"overlays/command.mdx\",\"type\":\"page\",\"name\":\"Command\",\"description\":\"A Command component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/command\",\"$ref\":\"overlays/command.mdx\"},{\"$id\":\"overlays/modal.mdx\",\"type\":\"page\",\"name\":\"Modal\",\"description\":\"A Modal component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/modal\",\"$ref\":\"overlays/modal.mdx\"},{\"$id\":\"overlays/context-menu.mdx\",\"type\":\"page\",\"name\":\"ContextMenu\",\"description\":\"A ContextMenu component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/context-menu\",\"$ref\":\"overlays/context-menu.mdx\"},{\"$id\":\"overlays/dialog.mdx\",\"type\":\"page\",\"name\":\"Dialog\",\"description\":\"A Dialog component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/dialog\",\"$ref\":\"overlays/dialog.mdx\"},{\"$id\":\"overlays/drawer.mdx\",\"type\":\"page\",\"name\":\"Drawer\",\"description\":\"A Drawer component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/drawer\",\"$ref\":\"overlays/drawer.mdx\"},{\"$id\":\"overlays/dropdown-menu.mdx\",\"type\":\"page\",\"name\":\"DropdownMenu\",\"description\":\"A DropdownMenu component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/dropdown-menu\",\"$ref\":\"overlays/dropdown-menu.mdx\"},{\"$id\":\"overlays/hover-card.mdx\",\"type\":\"page\",\"name\":\"HoverCard\",\"description\":\"A HoverCard component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/hover-card\",\"$ref\":\"overlays/hover-card.mdx\"},{\"$id\":\"overlays/popover.mdx\",\"type\":\"page\",\"name\":\"Popover\",\"description\":\"A Popover component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/popover\",\"$ref\":\"overlays/popover.mdx\"},{\"$id\":\"overlays/preview-card.mdx\",\"type\":\"page\",\"name\":\"PreviewCard\",\"description\":\"A PreviewCard component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/preview-card\",\"$ref\":\"overlays/preview-card.mdx\"},{\"$id\":\"overlays/sheet.mdx\",\"type\":\"page\",\"name\":\"Sheet\",\"description\":\"A Sheet component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/sheet\",\"$ref\":\"overlays/sheet.mdx\"},{\"$id\":\"overlays/sonner.mdx\",\"type\":\"page\",\"name\":\"Sonner\",\"description\":\"A Sonner component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/sonner\",\"$ref\":\"overlays/sonner.mdx\"},{\"$id\":\"overlays/toaster.mdx\",\"type\":\"page\",\"name\":\"Toaster\",\"description\":\"A Toaster component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/overlays/toaster\",\"$ref\":\"overlays/toaster.mdx\"},{\"$id\":\"_5\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Shapes\"},{\"$id\":\"shapes/diagonal.mdx\",\"type\":\"page\",\"name\":\"Diagonal\",\"description\":\"A Diagonal component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/shapes/diagonal\",\"$ref\":\"shapes/diagonal.mdx\"},{\"$id\":\"shapes/diamond.mdx\",\"type\":\"page\",\"name\":\"Diamond\",\"description\":\"A Diamond component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/shapes/diamond\",\"$ref\":\"shapes/diamond.mdx\"},{\"$id\":\"shapes/hexagon.mdx\",\"type\":\"page\",\"name\":\"Hexagon\",\"description\":\"A Hexagon component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/shapes/hexagon\",\"$ref\":\"shapes/hexagon.mdx\"},{\"$id\":\"shapes/shape.mdx\",\"type\":\"page\",\"name\":\"Shape\",\"description\":\"A Shape component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/shapes/shape\",\"$ref\":\"shapes/shape.mdx\"},{\"$id\":\"shapes/triangle.mdx\",\"type\":\"page\",\"name\":\"Tr
124iangle\",\"description\":\"A Triangle component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/shapes/triangle\",\"$ref\":\"shapes/triangle.mdx\"},{\"$id\":\"_6\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"3D\"},{\"$id\":\"3d/box3-d.mdx\",\"type\":\"page\",\"name\":\"Box3D\",\"description\":\"A Box3D component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/3d/box3-d\",\"$ref\":\"3d/box3-d.mdx\"},{\"$id\":\"3d/box3-d-grid.mdx\",\"type\":\"page\",\"name\":\"Box3DGrid\",\"description\":\"A Box3DGrid component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/3d/box3-d-grid\",\"$ref\":\"3d/box3-d-grid.mdx\"},{\"$id\":\"3d/card3-d.mdx\",\"type\":\"page\",\"name\":\"Card3D\",\"description\":\"A Card3D component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/3d/card3-d\",\"$ref\":\"3d/card3-d.mdx\"},{\"$id\":\"3d/exploded-box3-d.mdx\",\"type\":\"page\",\"name\":\"ExplodedBox3D\",\"description\":\"A ExplodedBox3D component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/3d/exploded-box3-d\",\"$ref\":\"3d/exploded-box3-d.mdx\"},{\"$id\":\"3d/floating-ui.mdx\",\"type\":\"page\",\"name\":\"FloatingUI\",\"description\":\"A FloatingUI component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/3d/floating-ui\",\"$ref\":\"3d/floating-ui.mdx\"},{\"$id\":\"3d/isometric-cylinder.mdx\",\"type\":\"page\",\"name\":\"IsometricCylinder\",\"description\":\"A IsometricCylinder component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/3d/isometric-cylinder\",\"$ref\":\"3d/isometric-cylinder.mdx\"},{\"$id\":\"3d/isometric-prism.mdx\",\"type\":\"page\",\"name\":\"IsometricPrism\",\"description\":\"A IsometricPrism component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/3d/isometric-prism\",\"$ref\":\"3d/isometric-prism.mdx\"},{\"$id\":\"3d/isometric-scene.mdx\",\"type\":\"page\",\"name\":\"IsometricScene\",\"description\":\"A IsometricScene component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/3d/isometric-scene\",\"$ref\":\"3d/isometric-scene.mdx\"},{\"$id\":\"3d/isometric-view.mdx\",\"type\":\"page\",\"name\":\"IsometricView\",\"description\":\"A IsometricView component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/3d/isometric-view\",\"$ref\":\"3d/isometric-view.mdx\"},{\"$id\":\"_7\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Diagrams\"},{\"$id\":\"diagrams/architecture-diagram.mdx\",\"type\":\"page\",\"name\":\"ArchitectureDiagram\",\"description\":\"Isometric architecture diagram combining exploded-view layering with cross-hatching for infrastru
124cture layers.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/architecture-diagram\",\"$ref\":\"diagrams/architecture-diagram.mdx\"},{\"$id\":\"diagrams/before-after-diagram.mdx\",\"type\":\"page\",\"name\":\"BeforeAfterDiagram\",\"description\":\"A BeforeAfterDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/before-after-diagram\",\"$ref\":\"diagrams/before-after-diagram.mdx\"},{\"$id\":\"diagrams/comparison-table.mdx\",\"type\":\"page\",\"name\":\"ComparisonTable\",\"description\":\"A ComparisonTable component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/comparison-table\",\"$ref\":\"diagrams/comparison-table.mdx\"},{\"$id\":\"diagrams/cross-hatch.mdx\",\"type\":\"page\",\"name\":\"CrossHatch\",\"description\":\"A CrossHatch component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/cross-hatch\",\"$ref\":\"diagrams/cross-hatch.mdx\"},{\"$id\":\"diagrams/diagram.mdx\",\"type\":\"page\",\"name\":\"Diagram\",\"description\":\"A Diagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/diagram\",\"$ref\":\"diagrams/diagram.mdx\"},{\"$id\":\"diagrams/diagram-callout-line.mdx\",\"type\":\"page\",\"name\":\"DiagramCalloutLine\",\"description\":\"A DiagramCalloutLine component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/diagram-callout-line\",\"$ref\":\"diagrams/diagram-callout-line.mdx\"},{\"$id\":\"diagrams/diagram-connector.mdx\",\"type\":\"page\",\"name\":\"DiagramConnector\",\"description\":\"A DiagramConnector component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/diagram-connector\",\"$ref\":\"diagrams/diagram-connector.mdx\"},{\"$id\":\"diagrams/diagram-label.mdx\",\"type\":\"page\",\"name\":\"DiagramLabel\",\"description\":\"A DiagramLabel component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/diagram-label\",\"$ref\":\"diagrams/diagram-label.mdx\"},{\"$id\":\"diagrams/diagram-node.mdx\",\"type\":\"page\",\"name\":\"DiagramNode\",\"description\":\"A DiagramNode component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/diagram-node\",\"$ref\":\"diagrams/diagram-node.mdx\"},{\"$id\":\"diagrams/ecosystem-diagram.mdx\",\"type\":\"page\",\"name\":\"EcosystemDiagram\",\"description\":\"A EcosystemDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/ecosystem-diagram\",\"$ref\":\"diagrams/ecosystem-diagram.mdx\"},{\"$id\":\"diagrams/exploded-view.mdx\",\"type\":\"page\",\"name\":\"ExplodedView\",\"description\":\"A ExplodedView component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/exploded-view\",\"$ref\":\"diagrams/exploded-view.mdx\"},{\"$id\":\"diagrams/flow-diagram.mdx\",\"type\":\"page\",\"name\":\"FlowDiagram\",\"description\":\"A FlowDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/flow-diagram\",\"$ref\":\"diagrams/flow-diagram.mdx\"},{\"$id\":\"diagrams/hub-spoke-diagram.mdx\",\"type\":\"page\",\"name\":\"HubSpokeDiagram\",\"description\":\"A HubSpokeDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/hub-spoke-diagram\",\"$ref\":\"diagrams/hub-spoke-diagram.mdx\"},{\"$id\":\"diagrams/pipeline-diagram.mdx\",\"type\":\"page\",\"name\":\"PipelineDiagram\",\"description\":\"A PipelineDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/pipeline-diagram\",\"$ref\":\"diagrams/pipeline-diagram.mdx\"},{\"$id\":\"diagrams/stack-diagram.mdx\",\"type\":\"page\",\"name\":\"StackDiagram\",\"description\":\"A StackDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/stack-diagram\",\"$ref\":\"diagrams/stack-diagram.mdx\"},{\"$id\":\"diagrams/timeline.mdx\",\"type\":\"page\",\"name\":\"Timeline\",\"description\":\"A Timeline component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/timeline\",\"$ref\":\"diagrams/timeline.mdx\"},{\"$id\":\"diagrams/activity-feed.mdx\",\"type\":\"page\",\"name\":\"ActivityFeed\",\"description\":\"A ActivityFeed component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/activity-feed\",\"$ref\":\"diagrams/activity-feed.mdx\"},{\"$id\":\"diagrams/area-chart.mdx\",\"type\":\"page\",\"name\":\"AreaChart\",\"description\":\"A AreaChart component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/area-chart\",\"$ref\":\"diagrams/area-chart.mdx\"},{\"$id\":\"diagrams/bar-chart.mdx\",\"type\":\"page\",\"name\":\"BarChart\",\"description\":\"A BarChart component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/bar-chart\",\"$ref\":\"diagrams/bar-chart.mdx\"},{\"$id\":\"diagrams/billing-chart.mdx\",\"type\":\"page\",\"name\":\"BillingChart\",\"description\":\"A Billing
124Chart component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/billing-chart\",\"$ref\":\"diagrams/billing-chart.mdx\"},{\"$id\":\"diagrams/capability-grid.mdx\",\"type\":\"page\",\"name\":\"CapabilityGrid\",\"description\":\"A CapabilityGrid component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/capability-grid\",\"$ref\":\"diagrams/capability-grid.mdx\"},{\"$id\":\"diagrams/changelog-table.mdx\",\"type\":\"page\",\"name\":\"ChangelogTable\",\"description\":\"A ChangelogTable component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/changelog-table\",\"$ref\":\"diagrams/changelog-table.mdx\"},{\"$id\":\"diagrams/commit-grid.mdx\",\"type\":\"page\",\"name\":\"CommitGrid\",\"description\":\"A CommitGrid component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/commit-grid\",\"$ref\":\"diagrams/commit-grid.mdx\"},{\"$id\":\"diagrams/dependency-graph.mdx\",\"type\":\"page\",\"name\":\"DependencyGraph\",\"description\":\"A DependencyGraph component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/dependency-graph\",\"$ref\":\"diagrams/dependency-graph.mdx\"},{\"$id\":\"diagrams/donut-chart.mdx\",\"type\":\"page\",\"name\":\"DonutChart\",\"description\":\"A DonutChart component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/donut-chart\",\"$ref\":\"diagrams/donut-chart.mdx\"},{\"$id\":\"diagrams/feature-mini-diagram.mdx\",\"type\":\"page\",\"name\":\"FeatureMiniDiagram\",\"description\":\"A FeatureMiniDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/feature-mini-diagram\",\"$ref\":\"diagrams/feature-mini-diagram.mdx\"},{\"$id\":\"diagrams/funnel-chart.mdx\",\"type\":\"page\",\"name\":\"FunnelChart\",\"description\":\"A FunnelChart component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/funnel-chart\",\"$ref\":\"diagrams/funnel-chart.mdx\"},{\"$id\":\"diagrams/gantt-chart.mdx\",\"type\":\"page\",\"name\":\"GanttChart\",\"description\":\"A GanttChart component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/gantt-chart\",\"$ref\":\"diagrams/gantt-chart.mdx\"},{\"$id\":\"diagrams/globe-diagram.mdx\",\"type\":\"page\",\"name\":\"GlobeDiagram\",\"description\":\"A GlobeDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/globe-diagram\",\"$ref\":\"diagrams/globe-diagram.mdx\"},{\"$id\":\"diagrams/heatmap-grid.mdx\",\"type\":\"page\",\"name\":\"HeatmapGrid\",\"description\":\"A HeatmapGrid component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/heatmap-grid\",\"$ref\":\"diagrams/heatmap-grid.mdx\"},{\"$id\":\"diagrams/hub-route-diagram.mdx\",\"type\":\"page\",\"name\":\"HubRouteDiagram\",\"description\":\"A HubRouteDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/hub-route-diagram\",\"$ref\":\"diagrams/hub-route-diagram.mdx\"},{\"$id\":\"diagrams/isolation-stack.mdx\",\"type\":\"page\",\"name\":\"IsolationStack\",\"description\":\"A IsolationStack component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/isolation-stack\",\"$ref\":\"diagrams/isolation-stack.mdx\"},{\"$id\":\"diagrams/isometric-stack-diagram.mdx\",\"type\":\"page\",\"name\":\"IsometricStackDiagram\",\"description\":\"A IsometricStackDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/isometric-stack-diagram\",\"$ref\":\"diagrams/isometric-stack-diagram.mdx\"},{\"$id\":\"diagrams/leaderboard-table.mdx\",\"type\":\"page\",\"name\":\"LeaderboardTable\",\"description\":\"A LeaderboardTable component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/leaderboard-table\",\"$ref\":\"diagrams/leaderboard-table.mdx\"},{\"$id\":\"diagrams/line-chart.mdx\",\"type\":\"page\",\"name\":\"LineChart\",\"description\":\"A LineChart component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/line-chart\",\"$ref\":\"diagrams/line-chart.mdx\"},{\"$id\":\"diagrams/matrix-diagram.mdx\",\"type\":\"page\",\"name\":\"MatrixDiagram\",\"description\":\"A MatrixDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/matrix-diagram\",\"$ref\":\"diagrams/matrix-diagram.mdx\"},{\"$id\":\"diagrams/mermaid-diagram.mdx\",\"type\":\"page\",\"name\":\"MermaidDiagram\",\"description\":\"A MermaidDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/mermaid-diagram\",\"$ref\":\"diagrams/mermaid-diagram.mdx\"},{\"$id\":\"diagrams/metric-card.mdx\",\"type\":\"page\",\"name\":\"MetricCard\",\"description\":\"A MetricCard component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/metric-card\",\"$ref\":\"diagrams/metric-card.mdx\"},{\"$id\":\"diagrams/mini-bar-list.mdx\",\"type\":\"page\",\"name\":\"MiniBarList\",\"description\":\"A MiniBarList component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/mini-bar-list\",\"$ref\":\"diagrams/mini-bar-list.mdx\"}
124,{\"$id\":\"diagrams/network-graph.mdx\",\"type\":\"page\",\"name\":\"NetworkGraph\",\"description\":\"A NetworkGraph component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/network-graph\",\"$ref\":\"diagrams/network-graph.mdx\"},{\"$id\":\"diagrams/orbit-diagram.mdx\",\"type\":\"page\",\"name\":\"OrbitDiagram\",\"description\":\"A OrbitDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/orbit-diagram\",\"$ref\":\"diagrams/orbit-diagram.mdx\"},{\"$id\":\"diagrams/pie-chart.mdx\",\"type\":\"page\",\"name\":\"PieChart\",\"description\":\"A PieChart component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/pie-chart\",\"$ref\":\"diagrams/pie-chart.mdx\"},{\"$id\":\"diagrams/platform-hub-diagram.mdx\",\"type\":\"page\",\"name\":\"PlatformHubDiagram\",\"description\":\"A PlatformHubDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/platform-hub-diagram\",\"$ref\":\"diagrams/platform-hub-diagram.mdx\"},{\"$id\":\"diagrams/pricing-table.mdx\",\"type\":\"page\",\"name\":\"PricingTable\",\"description\":\"A PricingTable component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/pricing-table\",\"$ref\":\"diagrams/pricing-table.mdx\"},{\"$id\":\"diagrams/progress-ring.mdx\",\"type\":\"page\",\"name\":\"ProgressRing\",\"description\":\"A ProgressRing component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/progress-ring\",\"$ref\":\"diagrams/progress-ring.mdx\"},{\"$id\":\"diagrams/radar-chart.mdx\",\"type\":\"page\",\"name\":\"RadarChart\",\"description\":\"A RadarChart component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/radar-chart\",\"$ref\":\"diagrams/radar-chart.mdx\"},{\"$id\":\"diagrams/sankey-diagram.mdx\",\"type\":\"page\",\"name\":\"SankeyDiagram\",\"description\":\"A SankeyDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/sankey-diagram\",\"$ref\":\"diagrams/sankey-diagram.mdx\"},{\"$id\":\"diagrams/spark-line.mdx\",\"type\":\"page\",\"name\":\"SparkLine\",\"description\":\"A SparkLine component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/spark-line\",\"$ref\":\"diagrams/spark-line.mdx\"},{\"$id\":\"diagrams/spec-table.mdx\",\"type\":\"page\",\"name\":\"SpecTable\",\"description\":\"A SpecTable component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/spec-table\",\"$ref\":\"diagrams/spec-table.mdx\"},{\"$id\":\"diagrams/state-persistence.mdx\",\"type\":\"page\",\"name\":\"StatePersistence\",\"description\":\"A StatePersistence component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/state-persistence\",\"$ref\":\"diagrams/state-persistence.mdx\"},{\"$id\":\"diagrams/status-table.mdx\",\"type\":\"page\",\"name\":\"StatusTable\",\"description\":\"A StatusTable component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/status-table\",\"$ref\":\"diagrams/status-table.mdx\"},{\"$id\":\"diagrams/stream-flow-diagram.mdx\",\"type\":\"page\",\"name\":\"StreamFlowDiagram\",\"description\":\"A StreamFlowDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/stream-flow-diagram\",\"$ref\":\"diagrams/stream-flow-diagram.mdx\"},{\"$id\":\"diagrams/tree-diagram.mdx\",\"type\":\"page\",\"name\":\"TreeDiagram\",\"description\":\"A TreeDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/tree-diagram\",\"$ref\":\"diagrams/tree-diagram.mdx\"},{\"$id\":\"diagrams/usage-gauge.mdx\",\"type\":\"page\",\"name\":\"UsageGauge\",\"description\":\"A UsageGauge component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/usage-gauge\",\"$ref\":\"diagrams/usage-gauge.mdx\"},{\"$id\":\"diagrams/venn-diagram.mdx\",\"type\":\"page\",\"name\":\"VennDiagram\",\"description\":\"A VennDiagram component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/venn-diagram\",\"$ref\":\"diagrams/venn-diagram.mdx\"},{\"$id\":\"diagrams/waterfall-chart.mdx\",\"type\":\"page\",\"name\":\"WaterfallChart\",\"description\":\"A WaterfallChart component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/diagrams/waterfall-chart\",\"$ref\":\"diagrams/waterfall-chart.mdx\"},{\"$id\":\"_8\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Marketing\"},{\"$id\":\"marketing/announcement-bar.mdx\",\"type\":\"page\",\"name\":\"AnnouncementBar\",\"description\":\"A AnnouncementBar component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/announcement-bar\",\"$ref\":\"marketing/announcement-bar.mdx\"},{\"$id\":\"marketing/blog-grid.mdx\",\"type\":\"page\",\"name\":\"BlogGrid\",\"description\":\"A BlogGrid component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/blog-grid\",\"$ref\":\"marketing/blog-grid.mdx\"},{\"$id\":\"marketing/blog-header.mdx\",\"type\":\"page\",\"name\":\"BlogHeader\",\"description\":\"A BlogHeader component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/blog-header\",\"$ref\":\"marketing/blog-header.mdx\"},{\"$id\":\"marketing/cta.mdx\",\"type\":\"page\",\"name\":\"CTA\",\"description\":\"A CTA component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/cta\",\"$ref\":\"marketing/cta.mdx\"},{\"$id\":\"marketing/cost-calculator.mdx\",\"type\":\"page\",\"name\":\"CostCalculator\",\"description\":\"A CostCalculator component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/cost-calculator\",\"$ref\":\"marketing/cost-calculator.mdx\"},{\"$id\":\"marketing/feature-frame.mdx\",\"type\":\"page\",\"name\":\"FeatureFrame\",\"description\":\"A FeatureFrame component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/feature-frame\",\"$ref\":\"marketing/feature-frame.mdx\"},{\"$id\":\"marketing/feature-grid.mdx\",\"type\":\"page\",\"name\":\"FeatureGrid\",\"description\":\"A FeatureGrid component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/feature-grid\",\"$ref\":\"marketing/feature-grid.mdx\"},{\"$id\":\"marketing/hero.mdx\",\"type\":\"page\",\"name\":\"Hero\",\"description\":\"A Hero component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/hero\",\"$ref\":\"marketing/hero.mdx\"},{\"$id\":\"marketing/logo-bar.mdx\",\"type\":\"page\",\"name\":\"LogoBar\",\"description\":\"A LogoBar component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/logo-bar\",\"$ref\":\"marketing/logo-bar.mdx\"},{\"$id\":\"marketing/pricing.mdx\",\"type\":\"page\",\"name\":\"Pricing\",\"description\":\"A Pricing component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/pricing\",\"$ref\":\"marketing/pricing.mdx\"},{\"$id\":\"marketing/pricing-tiers.mdx\",\"type\":\"page\",\"name\":\"PricingTiers\",\"description\":\"A PricingTiers component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/pricing-tiers\",\"$ref\":\"marketing/pricing-tiers.mdx\"},{\"$id\":\"marketing/testimonial-card.mdx\",\"type\":\"page\",\"name\":\"TestimonialCard\",\"description\":\"A TestimonialCard component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/testimonial-card\",\"$ref\":\"marketing/testimonial-card.mdx\"},{\"$id\":\"marketing/unit-pricing.mdx\",\"type\":\"page\",\"name\":\"UnitPricing\",\"description\":\"A UnitPricing component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/marketing/unit-pricing\",\"$ref\":\"marketing/unit-pricing.mdx\"},{\"$id\":\"_9\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Patterns\"},{\"$id\":\"patterns/cross.mdx\",\"type\":\"page\",\"name\":\"Cross\",\"description\":\"A Cross component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/patterns/cross\",\"$ref\":\"patterns/cross.mdx\"},{\"$id\":\"patterns/grain-gradient.mdx\",\"type\":\"page\",\"name\":\"GrainGradient\",\"description\":\"A GrainGradient component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/patterns/grain-gradient\",\"$ref\":\"patterns/grain-gradient.mdx\"},{\"$id\":\"patterns/pattern.mdx\",\"type\":\"page\",\"name\":\"Pattern\",\"description\":\"A Pattern component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/patterns/pattern\",\"$ref\":\"patterns/pattern.mdx\"},{\"$id\":\"patterns/tessellation.mdx\",\"type\":\"page\",\"name\":\"Tessellation\",\"description\":\"A Tessellation component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/patterns/tessellation\",\"$ref\":\"patterns/tessellation.mdx\"},{\"$id\":\"_10\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Sections\"},{\"$id\":\"sections/bento-section.mdx\",\"type\":\"page\",\"name\":\"BentoSection\",\"description\":\"A BentoSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/bento-section\",\"$ref\":\"sections/bento-section.mdx\"},{\"$id\":\"sections/blueprint-grid-section.mdx\",\"type\":\"page\",\"name\":\"BlueprintGridSection\",\"description\":\"Blueprint-style 2-column feature grid inspired by Dedalus' BlueprintFeatures. Each card scroll-reveals with staggered delay; contains a diagram viewport, spec table, and callout chips.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/blueprint-grid-section\",\"$ref\":\"sections/blueprint-grid-section.mdx\"},{\"$id\":\"sections/cta-section.mdx\",\"type\":\"page\",\"name\":\"CTASection\",\"description\":\"A CTASection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/cta-section\",\"$ref\":\"sections/cta-section.mdx\"},{\"$id\":\"sections/code-showcase-section.mdx\",\"type\":\"page\",\"name\":\"CodeShowcaseSection\",\"description\":\"A CodeShowcaseSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/code-showcase-section\",\"$ref\":\"sections/code-showcase-section.mdx\"},{\"$id\":\"sections/comparison-section.mdx\",\"type\":\"page\",\"name\":\"ComparisonSection\",\"description\":\"A ComparisonSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/comparison-section\",\"$ref\":\"sections/comparison-section.mdx\"},{\"$id\":\"sections/faq-section.mdx\",\"type\":\"page\",\"name\":\"FAQSection\",\"description\":\"A FAQSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/faq-section\",\"$ref\":\"sections/faq-section.mdx\"},{\"$id\":\"sections/feature-frame-section.mdx\",\"type\":\"page\",\"name\":\"FeatureFrameSection\",\"description\":\"A FeatureFrameSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/feature-frame-section\",\"$ref\":\"sections/feature-frame-section.mdx\"},{\"$id\":\"sections/feature-section.mdx\",\"type\":\"page\",\"name\":\"FeatureSection\",\"description\":\"A FeatureSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/feature-section\",\"$ref\":\"sections/feature-section.mdx\"},{\"$id\":\"sections/feature-showcase-section.mdx\",\"type\":\"page\",\"name\":\"FeatureShowcaseSection\",\"description\":\"A FeatureShowcaseSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/feature-showcase-section\",\"$ref\":\"sections/feature-showcase-section.mdx\"},{\"$id\":\"sections/footer-section.mdx\",\"type\":\"page\",\"name\":\"FooterSection\",\"description\":\"A FooterSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/footer-section\",\"$ref\":\"sections/footer-section.mdx\"},{\"$id\":\"sections/gradient-banner-section.mdx\",\"type\":\"page\",\"name\":\"GradientBannerSection\",\"description\":\"A GradientBannerSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/gradient-banner-section\",\"$ref\":\"sections/gradient-banner-section.mdx\"},{\"$id\":\"sections/hero-section.mdx\",\"type\":\"page\",\"name\":\"HeroSection\",\"description\":\"A HeroSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/hero-section\",\"$ref\":\"sections/hero-section.mdx\"},{\"$id\":\"sections/install-section.mdx\",\"type\":\"page\",\"name\":\"InstallSection\",\"description\":\"A InstallSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/install-section\",\"$ref\":\"sections/install-section.mdx\"},{\"$id\":\"sections/large-text-section.mdx\",\"type\":\"page\",\"name\":\"LargeTextSection\",\"description\":\"A LargeTextSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/large-text-section\",\"$ref\":\"sections/large-text-section.mdx\"},{\"$id\":\"sections/logo-cloud-section.mdx\",\"type\":\"page\",\"name\":\"LogoCloudSection\",\"description\":\"A LogoCloudSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/logo-cloud-section\",\"$ref\":\"sections/logo-cloud-section.mdx\"},{\"$id\":\"sections/newsletter-section.mdx\",\"type\":\"page\",\"name\":\"NewsletterSection\",\"description\":\"A NewsletterSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/newsletter-section\",\"$ref\":\"sections/newsletter-section.mdx\"},{\"$id\":\"sections/section-heading.mdx\",\"type\":\"page\",\"name\":\"SectionHeading\",\"description\":\"A SectionHeading component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/section-heading\",\"$ref\":\"sections/section-heading.mdx\"},{\"$id\":\"sections/stats-section.mdx\",\"type\":\"page\",\"name\":\"StatsSection\",\"description\":\"A StatsSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/stats-section\",\"$ref\":\"sections/stats-section.mdx\"},{\"$id\":\"sections/team-section.mdx\",\"type\":\"page\",\"name\":\"TeamSection\",\"description\":\"A TeamSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/team-section\",\"$ref\":\"sections/team-section.mdx\"},{\"$id\":\"sections/testimonials-section.mdx\",\"type\":\"page\",\"name\":\"TestimonialsSection\",\"description\":\"A TestimonialsSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/testimonials-section\",\"$ref\":\"sections/testimonials-section.mdx\"},{\"$id\":\"sections/timeline-section.mdx\",\"type\":\"page\",\"name\":\"TimelineSection\",\"description\":\"A TimelineSection component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/sections/timeline-section\",\"$ref\":\"sections/timeline-section.mdx\"},{\"$id\":\"_11\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Playbook\"},{\"$id\":\"playbook/gap-pixel-grid.mdx\",\"type\":\"page\",\"name\":\"GapPixelGrid\",\"description\":\"A GapPixelGrid component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/playbook/gap-pixel-grid\",\"$ref\":\"playbook/gap-pixel-grid.mdx\"},{\"$id\":\"playbook/mono-label.mdx\",\"type\":\"page\",\"name\":\"MonoLabel\",\"description\":\"A MonoLabel component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/playbook/mono-label\",\"$ref\":\"playbook/mono-label.mdx\"},{\"$id\":\"playbook/border-stack.mdx\",\"type\":\"page\",\"name\":\"BorderStack\",\"description\":\"A BorderStack component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/playbook/border-stack\",\"$ref\":\"playbook/border-stack.mdx\"},{\"$id\":\"playbook/accent-cta.mdx\",\"type\":\"page\",\"name\":\"AccentCTA\",\"description\":\"A AccentCTA component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/playbook/accent-cta\",\"$ref\":\"playbook/accent-cta.mdx\"},{\"$id\":\"playbook/tabular-value.mdx\",\"type\":\"page\",\"name\":\"TabularValue\",\"description\
124":\"A TabularValue component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/playbook/tabular-value\",\"$ref\":\"playbook/tabular-value.mdx\"},{\"$id\":\"playbook/featured-grid.mdx\",\"type\":\"page\",\"name\":\"FeaturedGrid\",\"description\":\"A FeaturedGrid component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/playbook/featured-grid\",\"$ref\":\"playbook/featured-grid.mdx\"},{\"$id\":\"playbook/density-text.mdx\",\"type\":\"page\",\"name\":\"DensityText\",\"description\":\"A DensityText component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/playbook/density-text\",\"$ref\":\"playbook/density-text.mdx\"},{\"$id\":\"playbook/frosted-panel.mdx\",\"type\":\"page\",\"name\":\"FrostedPanel\",\"description\":\"A FrostedPanel component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/playbook/frosted-panel\",\"$ref\":\"playbook/frosted-panel.mdx\"},{\"$id\":\"playbook/card-cell.mdx\",\"type\":\"page\",\"name\":\"CardCell\",\"description\":\"A CardCell component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/playbook/card-cell\",\"$ref\":\"playbook/card-cell.mdx\"},{\"$id\":\"_12\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Effects\"},{\"$id\":\"effects/proximity-glow.mdx\",\"type\":\"page\",\"name\":\"ProximityGlow\",\"description\":\"Pointer-proximity glow border using CSS mask-composite and conic-gradient angle tracking.\",\"icon\":\"$undefined\",\"url\":\"/docs/effects/proximity-glow\",\"$ref\":\"effects/proximity-glow.mdx\"},{\"$id\":\"_13\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Animation\"},{\"$id\":\"animation/animate-on-mount.mdx\",\"type\":\"page\",\"name\":\"AnimateOnMount\",\"description\":\"Wrapper that plays a CSS transition on mount (no scroll trigger). Lighter alternative to the GSAP-based AnimateOnScroll for simple mount reveals.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/animate-on-mount\",\"$ref\":\"animation/animate-on-mount.mdx\"},{\"$id\":\"animation/animate-on-scroll.mdx\",\"type\":\"page\",\"name\":\"AnimateOnScroll\",\"description\":\"A AnimateOnScroll component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/animate-on-scroll\",\"$ref\":\"animation/animate-on-scroll.mdx\"},{\"$id\":\"animation/blur-fade.mdx\",\"type\":\"page\",\"name\":\"BlurFade\",\"description\":\"A BlurFade component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/blur-fade\",\"$ref\":\"animation/blur-fade.mdx\"},{\"$id\":\"animation/fade-in.mdx\",\"type\":\"page\",\"name\":\"FadeIn\",\"description\":\"A FadeIn component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/fade-in\",\"$ref\":\"animation/fade-in.mdx\"},{\"$id\":\"animation/gradient-text.mdx\",\"type\":\"page\",\"name\":\"GradientText\",\"description\":\"A GradientText component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/gradient-text\",\"$ref\":\"animation/gradient-text.mdx\"},{\"$id\":\"animation/letter-pull-up.mdx\",\"type\":\"page\",\"name\":\"LetterPullUp\",\"description\":\"A LetterPullUp component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/letter-pull-up\",\"$ref\":\"animation/letter-pull-up.mdx\"},{\"$id\":\"animation/marquee.mdx\",\"type\":\"page\",\"name\":\"Marquee\",\"description\":\"A Marquee component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/marquee\",\"$ref\":\"animation/marquee.mdx\"},{\"$id\":\"animation/number-ticker.mdx\",\"type\":\"page\",\"name\":\"NumberTicker\",\"description\":\"A NumberTicker component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/number-ticker\",\"$ref\":\"animation/number-ticker.mdx\"},{\"$id\":\"animation/parallax-layer.mdx\",\"type\":\"page\",\"name\":\"ParallaxLayer\",\"description\":\"A ParallaxLayer component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/parallax-layer\",\"$ref\":\"animation/parallax-layer.mdx\"},{\"$id\":\"animation/pulse.mdx\",\"type\":\"page\",\"name\":\"Pulse\",\"description\":\"A Pulse component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/pulse\",\"$ref\":\"animation/pulse.mdx\"},{\"$id\":\"animation/ripple.mdx\",\"type\":\"page\",\"name\":\"Ripple\",\"description\":\"A Ripple component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/ripple\",\"$ref\":\"animation/ripple.mdx\"},{\"$id\":\"animation/scale-in.mdx\",\"type\":\"page\",\"name\":\"ScaleIn\",\"description\":\"A ScaleIn component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/scale-in\",\"$ref\":\"animation/scale-in.mdx\"},{\"$id\":\"animation/scroll-progress.mdx\",\"type\":\"page\",\"name\":\"ScrollProgress\",\"description\":\"A ScrollProgress component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/scroll-progress\",\"$ref\":\"animation/scroll-progress.mdx\"},{\"$id\":\"animation/slide-in.mdx\",\"type\":\"page\",\"name\":\"SlideIn\",\"description\":\"A SlideIn component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/slide-in\",\"$ref\":\"animation/slide-in.mdx\"},{\"$id\":\"animation/stagger.mdx\",\"type\":\"page\",\"name\":\"Stagger\",\"description\":\"A Stagger component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/stagger\",\"$ref\":\"animation/stagger.mdx\"},{\"$id\":\"animation/text-reveal.mdx\",\"type\":\"page\",\"name\":\"TextReveal\",\"description\":\"A TextReveal component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/text-reveal\",\"$ref\":\"animation/text-reveal.mdx\"},{\"$id\":\"animation/type-writer.mdx\",\"type\":\"page\",\"name\":\"TypeWriter\",\"description\":\"A TypeWriter component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/type-writer\",\"$ref\":\"animation/type-writer.mdx\"},{\"$id\":\"animation/word-rotate.mdx\",\"type\":\"page\",\"name\":\"WordRotate\",\"description\":\"A WordRotate component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/word-rotate\",\"$ref\":\"animation/word-rotate.mdx\"}],\"fallback\":{\"type\":\"root\",\"$ref\":\"$undefined\",\"$id\":\"fallback:root\",\"name\":\"Docs\",\"description\":\"$undefined\",\"children\":[{\"type\":\"folder\",\"name\":\"3d\",\"root\":\"$undefined\",\"defaultOpen\":\"$undefined\",\"description\":\"$undefined\",\"collapsible\":\"$undefined\",\"children\":[{\"$id\":\"fallback:3d/box3d.mdx\",\"type\":\"page\",\"name\":\"Box3D\",\"description\":\"A CSS 3D box with six faces, configurable dimensions, and GSAP-powered rotation. No WebGL required.\",\"icon\":\"$undefined\",\"url\":\"/docs/3d/box3d\",\"$ref\":\"3d/box3d.mdx\"},{\"$id\":\"fallback:3d/card3d.mdx\",\"type\":\"page\",\"name\":\"Card3D\",\"description\":\"A card with perspective tilt that follows the cursor. GSAP-powered with configurable depth, glare, and spring physics.\",\"icon\":\"$undefined\",\"url\":\"/docs/3d/card3d\",\"$ref\":\"3d/card3d.mdx\"}],\"$id\":\"fallback:3d\",\"$ref\":\"$undefined\",\"icon\":\"$undefined\"},{\"type\":\"folder\",\"name\":\"Animation\",\"root\":\"$undefined\",\"defaultOpen\":\"$undefined\",\"description\":\"$undefined\",\"collapsible\":\"$undefined\",\"children\":[{\"$id\":\"fallback:animation/typewriter.mdx\",\"type\":\"page\",\"name\":\"TypeWriter\",\"description\":\"Typewriter text effect with blinking cursor. Types, pauses, deletes, and loops through multiple strings.\",\"
124icon\":\"$undefined\",\"url\":\"/docs/animation/typewriter\",\"$ref\":\"animation/typewriter.mdx\"},{\"$id\":\"fallback:animation/use-in-view.mdx\",\"type\":\"page\",\"name\":\"useInView\",\"description\":\"Lightweight IntersectionObserver hook. Returns a ref and visibility boolean for scroll-triggered animations.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/use-in-view\",\"$ref\":\"animation/use-in-view.mdx\"},{\"$id\":\"fallback:animation/use-reduced-motion.mdx\",\"type\":\"page\",\"name\":\"useReducedMotion\",\"description\":\"Returns true when the user prefers reduced motion. All animation components use this hook internally.\",\"icon\":\"$undefined\",\"url\":\"/docs/animation/use-reduced-motion\",\"$ref\":\"animation/use-reduced-motion.mdx\"}],\"$id\":\"fallback:animation\",\"$ref\":\"$undefined\",\"icon\":\"$undefined\"},{\"type\":\"folder\",\"name\":\"Components\",\"root\":\"$undefined\",\"defaultOpen\":\"$undefined\",\"description\":\"$undefined\",\"collapsible\":\"$undefined\",\"children\":[{\"$id\":\"fallback:components/accessible-icon.mdx\",\"type\":\"page\",\"name\":\"Accessible Icon\",\"description\":\"Makes decorative icons accessible by providing a visually hidden label.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/accessible-icon\",\"$ref\":\"components/accessible-icon.mdx\"},{\"$id\":\"fallback:components/action-menu.mdx\",\"type\":\"page\",\"name\":\"ActionMenu\",\"description\":\"ActionMenu is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/action-menu\",\"$ref\":\"components/action-menu.mdx\"},{\"$id\":\"fallback:components/activity-feed.mdx\",\"type\":\"page\",\"name\":\"ActivityFeed\",\"description\":\"A timeline-style feed showing events with colored status indicators and timestamps.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/activity-feed\",\"$ref\":\"components/activity-feed.mdx\"},{\"$id\":\"fallback:components/activity-timeline.mdx\",\"type\":\"page\",\"name\":\"ActivityTimeline\",\"description\":\"ActivityTimeline is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/activity-timeline\",\"$ref\":\"components/activity-timeline.mdx\"},{\"$id\":\"fallback:components/alert-dialog.mdx\",\"type\":\"page\",\"name\":\"AlertDialog\",\"description\":\"Modal confirmation dialog that requires an explicit user decision before proceeding.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/alert-dialog\",\"$ref\":\"components/alert-dialog.mdx\"},{\"$id\":\"fallback:components/anchor-nav.mdx\",\"type\":\"page\",\"name\":\"AnchorNav\",\"description\":\"AnchorNav is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/anchor-nav\",\"$ref\":\"components/anchor-nav.mdx\"},{\"$id\":\"fallback:components/announcement-bar.mdx\",\"type\":\"page\",\"name\":\"AnnouncementBar\",\"description\":\"Dismissible top-of-page announcement bar with optional icon, badge, and link.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/announcement-bar\",\"$ref\":\"components/announcement-bar.mdx\"},{\"$id\":\"fallback:components/app-header.mdx\",\"type\":\"page\",\"name\":\"AppHeader\",\"description\":\"AppHeader is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/app-header\",\"$ref\":\"components/app-header.mdx\"},{\"$id\":\"fallback:components/app-shell.mdx\",\"type\":\"page\",\"name\":\"AppShell\",\"description\":\"Full-page layout shell with header, sidebar, main content, and footer slots via CSS grid.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/app-shell\",\"$ref\":\"components/app-shell.mdx\"},{\"$id\":\"fallback:components/area-chart.mdx\",\"type\":\"page\",\"name\":\"AreaChart\",\"description\":\"A smooth area chart with gradient fill, Catmull-Rom curves, and multi-series support.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/area-chart\",\"$ref\":\"components/area-chart.mdx\"}
124,{\"$id\":\"fallback:components/aside.mdx\",\"type\":\"page\",\"name\":\"Aside\",\"description\":\"Sidebar panel with configurable width, optional sticky positioning, and border control.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/aside\",\"$ref\":\"components/aside.mdx\"},{\"$id\":\"fallback:components/async-select.mdx\",\"type\":\"page\",\"name\":\"AsyncSelect\",\"description\":\"AsyncSelect is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/async-select\",\"$ref\":\"components/async-select.mdx\"},{\"$id\":\"fallback:components/audit-log.mdx\",\"type\":\"page\",\"name\":\"AuditLog\",\"description\":\"AuditLog is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/audit-log\",\"$ref\":\"components/audit-log.mdx\"},{\"$id\":\"fallback:components/autocomplete.mdx\",\"type\":\"page\",\"name\":\"Autocomplete\",\"description\":\"Autocomplete is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/autocomplete\",\"$ref\":\"components/autocomplete.mdx\"},{\"$id\":\"fallback:components/avatar-upload.mdx\",\"type\":\"page\",\"name\":\"AvatarUpload\",\"description\":\"AvatarUpload is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/avatar-upload\",\"$ref\":\"components/avatar-upload.mdx\"},{\"$id\":\"fallback:components/banner-alert.mdx\",\"type\":\"page\",\"name\":\"BannerAlert\",\"description\":\"BannerAlert is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/banner-alert\",\"$ref\":\"components/banner-alert.mdx\"},{\"$id\":\"fallback:components/banner.mdx\",\"type\":\"page\",\"name\":\"Banner\",\"description\":\"Status banner for announcements and alerts with variant colors and optional dismiss.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/banner\",\"$ref\":\"components/banner.mdx\"},{\"$id\":\"fallback:components/bar-chart.mdx\",\"type\":\"page\",\"name\":\"BarChart\",\"description\":\"A grouped bar chart with vertical or horizontal layout, gridlines, and value labels.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/bar-chart\",\"$ref\":\"components/bar-chart.mdx\"},{\"$id\":\"fallback:components/before-after-diagram.mdx\",\"type\":\"page\",\"name\":\"BeforeAfterDiagram\",\"description\":\"A side-by-side comparison with color-coded before (error) and after (success) panels.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/before-after-diagram\",\"$ref\":\"components/before-after-diagram.mdx\"},{\"$id\":\"fallback:components/bento-section.mdx\",\"type\":\"page\",\"name\":\"BentoSection\",\"description\":\"Bento grid layout with configurable cell spans for feature showcases.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/bento-section\",\"$ref\":\"components/bento-section.mdx\"},{\"$id\":\"fallback:components/billing-chart.mdx\",\"type\":\"page\",\"name\":\"BillingChart\",\"description\":\"A stacked bar chart for visualizing cost breakdowns and billing trends over time.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/billing-chart\",\"$ref\":\"components/billing-chart.mdx\"},{\"$id\":\"fallback:components/bottom-bar.mdx\",\"type\":\"page\",\"name\":\"BottomBar\",\"description\":\"BottomBar is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/bottom-bar\",\"$ref\":\"components/bottom-bar.mdx\"},{\"$id\":\"fallback:components/box-3d.mdx\",\"type\":\"page\",\"name\":\"Box3D\",\"description\":\"CSS 3D-transform box with six visible faces, configurable tilt, depth, and hover lift.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/box-3d\",\"$ref\":\"components/box-3d.mdx\"},{\"$id\":\"fallback:components/box.mdx\",\"type\":\"page\",\"name\":\"Box\",\"description\":\"Generic polymorphic container with shorthand style props for spacing, color, radius, and shadow.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/box\",\"$ref\":\"components/box.mdx\"},{\"$id\":\"fallback:components/breadcrumb.mdx\",\"type\":\"page\",\"name\":\"Breadcrumb\",\"description\":\"Navigation trail showing the current page location within a hierarchy.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/breadcrumb\",\"$ref\":\"components/breadcrumb.mdx\"},{\"$id\":\"fallback:components/bulk-actions.mdx\",\"type\":\"page\",\"name\":\"BulkActions\",\"description\":\"BulkActions is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/bulk-actions\",\"$ref\":\"components/bulk-actions.mdx\"},{\"$id\":\"fallback:components/callout.mdx\",\"type\":\"page\",\"name\":\"Callout\",\"description\":\"Callout is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/callout\",\"$ref\":\"components/callout.mdx\"},{\"$id\":\"fallback:components/center.mdx\",\"type\":\"page\",\"name\":\"Center\",\"description\":\"Centers its children both horizontally and vertically using flexbox.\",\"
124icon\":\"$undefined\",\"url\":\"/docs/components/center\",\"$ref\":\"components/center.mdx\"},{\"$id\":\"fallback:components/changelog-table.mdx\",\"type\":\"page\",\"name\":\"ChangelogTable\",\"description\":\"A versioned changelog table with typed entry badges for release notes.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/changelog-table\",\"$ref\":\"components/changelog-table.mdx\"},{\"$id\":\"fallback:components/changelog.mdx\",\"type\":\"page\",\"name\":\"Changelog\",\"description\":\"Changelog is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/changelog\",\"$ref\":\"components/changelog.mdx\"},{\"$id\":\"fallback:components/chart.mdx\",\"type\":\"page\",\"name\":\"Chart\",\"description\":\"Token-aware chart wrapper that passes Sigil colors to your charting library.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/chart\",\"$ref\":\"components/chart.mdx\"},{\"$id\":\"fallback:components/chat-message.mdx\",\"type\":\"page\",\"name\":\"ChatMessage\",\"description\":\"ChatMessage is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/chat-message\",\"$ref\":\"components/chat-message.mdx\"},{\"$id\":\"fallback:components/chat-thread.mdx\",\"type\":\"page\",\"name\":\"ChatThread\",\"description\":\"ChatThread is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/chat-thread\",\"$ref\":\"components/chat-thread.mdx\"},{\"$id\":\"fallback:components/checkbox-card.mdx\",\"type\":\"page\",\"name\":\"CheckboxCard\",\"description\":\"CheckboxCard is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/checkbox-card\",\"$ref\":\"components/checkbox-card.mdx\"},{\"$id\":\"fallback:components/coachmark.mdx\",\"type\":\"page\",\"name\":\"Coachmark\",\"description\":\"Coachmark is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/coachmark\",\"$ref\":\"components/coachmark.mdx\"},{\"$id\":\"fallback:components/code-preview.mdx\",\"type\":\"page\",\"name\":\"CodePreview\",\"description\":\"CodePreview is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/code-preview\",\"$ref\":\"components/code-preview.mdx\"},{\"$id\":\"fallback:components/code-showcase-section.mdx\",\"type\":\"page\",\"name\":\"CodeShowcaseSection\",\"description\":\"Tabbed code block section for showcasing usage examples or config files.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/code-showcase-section\",\"$ref\":\"components/code-showcase-section.mdx\"},{\"$id\":\"fallback:components/color-field.mdx\",\"type\":\"page\",\"name\":\"ColorField\",\"description\":\"ColorField is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/color-field\",\"$ref\":\"components/color-field.mdx\"},{\"$id\":\"fallback:components/column-visibility.mdx\",\"type\":\"page\",\"name\":\"ColumnVisibility\",\"description\":\"ColumnVisibility is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/column-visibility\",\"$ref\":\"components/column-visibility.mdx\"},{\"$id\":\"fallback:components/combobox-field.mdx\",\"type\":\"page\",\"name\":\"ComboboxField\",\"description\":\"ComboboxField is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/combobox-field\",\"$ref\":\"components/combobox-field.mdx\"},{\"$id\":\"fallback:components/command-menu.mdx\",\"type\":\"page\",\"name\":\"CommandMenu\",\"description\":\"CommandMenu is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/command-menu\",\"$ref\":\"components/command-menu.mdx\"},{\"$id\":\"fallback:components/command.mdx\",\"type\":\"page\",\"name\":\"Command\",\"description\":\"Command palette with search, keyboard navigation, and grouped actions.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/command\",\"$ref\":\"components/command.mdx\"},{\"$id\":\"fallback:components/commit-grid.mdx\",\"type\":\"page\",\"name\":\"CommitGrid\",\"description\":\"A GitHub-style contribution heatmap showing activity intensity over time.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/commit-grid\",\"$ref\":\"components/commit-grid.mdx\"},{\"$id\":\"fallback:components/comparison-section.mdx\",\"type\":\"page\",\"name\":\"ComparisonSection\",\"description\":\"Feature comparison table with check/cross icons or custom text per cell.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/comparison-section\",\"$ref\":\"components/comparison-section.mdx\"},{\"$id\":\"fallback:components/confirm-dialog.mdx\",\"type\":\"page\",\"name\":\"ConfirmDialog\",\"description\":\"ConfirmDialog is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/confirm-dialog\",\"$ref\":\"components/confirm-dialog.mdx\"},{\"$id\":\"fallback:components/container-query.mdx\",\"type\":\"page\",\"name\":\"ContainerQuery\",\"description\":\"ContainerQuery is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/container-query\",\"$ref\":\"components/container-query.mdx\"},{\"$id\":\"fallback:components/container.mdx\",\"type\":\"page\",\"name\":\"Container\",\"description\":\"Max-width wrapper that centers page content with responsive padding.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/container\",\"$ref\":\"components/container.mdx\"},{\"$id\":\"fallback:components/content-tabs.mdx\",\"type\":\"page\",\"name\":\"ContentTabs\",\"description\":\"ContentTabs is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/content-tabs\",\"$ref\":\"components/content-tabs.mdx\"},{\"$id\":\"fallback:components/context-menu.mdx\",\"type\":\"page\",\"name\":\"ContextMenu\",\"description\":\"Right-click menu with nested submenus, checkboxes, and radio items.\",\"
124icon\":\"$undefined\",\"url\":\"/docs/components/context-menu\",\"$ref\":\"components/context-menu.mdx\"},{\"$id\":\"fallback:components/context-panel.mdx\",\"type\":\"page\",\"name\":\"ContextPanel\",\"description\":\"ContextPanel is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/context-panel\",\"$ref\":\"components/context-panel.mdx\"},{\"$id\":\"fallback:components/copy-button.mdx\",\"type\":\"page\",\"name\":\"CopyButton\",\"description\":\"CopyButton is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/copy-button\",\"$ref\":\"components/copy-button.mdx\"},{\"$id\":\"fallback:components/copy-input.mdx\",\"type\":\"page\",\"name\":\"CopyInput\",\"description\":\"CopyInput is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/copy-input\",\"$ref\":\"components/copy-input.mdx\"},{\"$id\":\"fallback:components/cost-calculator.mdx\",\"type\":\"page\",\"name\":\"CostCalculator\",\"description\":\"Interactive pricing calculator with configurable sliders and a brand-vs-competitor cost comparison.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/cost-calculator\",\"$ref\":\"components/cost-calculator.mdx\"},{\"$id\":\"fallback:components/creatable-select.mdx\",\"type\":\"page\",\"name\":\"CreatableSelect\",\"description\":\"CreatableSelect is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/creatable-select\",\"$ref\":\"components/creatable-select.mdx\"},{\"$id\":\"fallback:components/cta-section.mdx\",\"type\":\"page\",\"name\":\"CTASection\",\"description\":\"Call-to-action section with centered or split layout, headline, and action buttons.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/cta-section\",\"$ref\":\"components/cta-section.mdx\"},{\"$id\":\"fallback:components/cta.mdx\",\"type\":\"page\",\"name\":\"CTA\",\"description\":\"Call-to-action section with centered or split layout and token-styled action buttons.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/cta\",\"$ref\":\"components/cta.mdx\"},{\"$id\":\"fallback:components/currency-input.mdx\",\"type\":\"page\",\"name\":\"CurrencyInput\",\"description\":\"CurrencyInput is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/currency-input\",\"$ref\":\"components/currency-input.mdx\"},{\"$id\":\"fallback:components/data-filters.mdx\",\"type\":\"page\",\"name\":\"DataFilters\",\"description\":\"DataFilters is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/data-filters\",\"$ref\":\"components/data-filters.mdx\"},{\"$id\":\"fallback:components/data-grid.mdx\",\"type\":\"page\",\"name\":\"DataGrid\",\"description\":\"DataGrid is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/data-grid\",\"$ref\":\"components/data-grid.mdx\"},{\"$id\":\"fallback:components/data-list-item.mdx\",\"type\":\"page\",\"name\":\"DataListItem\",\"description\":\"DataListItem is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/data-list-item\",\"$ref\":\"components/data-list-item.mdx\"},{\"$id\":\"fallback:components/data-list.mdx\",\"type\":\"page\",\"name\":\"DataList\",\"description\":\"DataList is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/data-list\",\"$ref\":\"components/data-list.mdx\"},{\"$id\":\"fallback:components/data-pagination.mdx\",\"type\":\"page\",\"name\":\"DataPagination\",\"description\":\"DataPagination is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/data-pagination\",\"$ref\":\"components/data-pagination.mdx\"},{\"$id\":\"fallback:components/data-toolbar.mdx\",\"type\":\"page\",\"name\":\"DataToolbar\",\"description\":\"DataToolbar is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/data-toolbar\",\"$ref\":\"components/data-toolbar.mdx\"},{\"$id\":\"fallback:components/date-range-field.mdx\",\"type\":\"page\",\"name\":\"DateRangeField\",\"description\":\"DateRangeField is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/date-range-field\",\"$ref\":\"components/date-range-field.mdx\"},{\"$id\":\"fallback:components/date-time-picker.mdx\",\"type\":\"page\",\"name\":\"DateTimePicker\",\"description\":\"DateTimePicker is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/date-time-picker\",\"$ref\":\"components/date-time-picker.mdx\"},{\"$id\":\"fallback:components/dependency-graph.mdx\",\"type\":\"page\",\"name\":\"DependencyGraph\",\"description\":\"A directed dependency graph with positioned nodes, arrow edges, and optional labels.\",\"
124icon\":\"$undefined\",\"url\":\"/docs/components/dependency-graph\",\"$ref\":\"components/dependency-graph.mdx\"},{\"$id\":\"fallback:components/description-list.mdx\",\"type\":\"page\",\"name\":\"DescriptionList\",\"description\":\"DescriptionList is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/description-list\",\"$ref\":\"components/description-list.mdx\"},{\"$id\":\"fallback:components/diagram-connector.mdx\",\"type\":\"page\",\"name\":\"DiagramConnector\",\"description\":\"An SVG arrow connector with solid, dashed, or animated variants for linking diagram nodes.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/diagram-connector\",\"$ref\":\"components/diagram-connector.mdx\"},{\"$id\":\"fallback:components/diagram-node.mdx\",\"type\":\"page\",\"name\":\"DiagramNode\",\"description\":\"A labeled node with icon, sublabel, variant, and optional badge for use inside diagrams.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/diagram-node\",\"$ref\":\"components/diagram-node.mdx\"},{\"$id\":\"fallback:components/diagram.mdx\",\"type\":\"page\",\"name\":\"Diagram\",\"description\":\"A token-driven container with optional grid backgrounds for composing diagram layouts.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/diagram\",\"$ref\":\"components/diagram.mdx\"},{\"$id\":\"fallback:components/dialog.mdx\",\"type\":\"page\",\"name\":\"Dialog\",\"description\":\"Modal dialog with backdrop overlay, keyboard dismissal, and focus trapping.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/dialog\",\"$ref\":\"components/dialog.mdx\"},{\"$id\":\"fallback:components/diamond.mdx\",\"type\":\"page\",\"name\":\"Diamond\",\"description\":\"Diamond-shaped container using CSS clip-path with four size presets.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/diamond\",\"$ref\":\"components/diamond.mdx\"},{\"$id\":\"fallback:components/direction.mdx\",\"type\":\"page\",\"name\":\"Direction\",\"description\":\"RTL/LTR context provider and hook for bidirectional layout support.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/direction\",\"$ref\":\"components/direction.mdx\"},{\"$id\":\"fallback:components/dock.mdx\",\"type\":\"page\",\"name\":\"Dock\",\"description\":\"Dock is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/dock\",\"$ref\":\"components/dock.mdx\"},{\"$id\":\"fallback:components/donut-chart.mdx\",\"type\":\"page\",\"name\":\"DonutChart\",\"description\":\"A ring/donut chart for proportional data with optional center value and label.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/donut-chart\",\"$ref\":\"components/donut-chart.mdx\"},{\"$id\":\"fallback:components/drawer.mdx\",\"type\":\"page\",\"name\":\"Drawer\",\"description\":\"Bottom sheet drawer with drag-to-dismiss, built on Vaul.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/drawer\",\"$ref\":\"components/drawer.mdx\"},{\"$id\":\"fallback:components/dropdown-menu.mdx\",\"type\":\"page\",\"name\":\"DropdownMenu\",\"description\":\"Trigger-activated dropdown with items, submenus, checkboxes, and radio groups.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/dropdown-menu\",\"$ref\":\"components/dropdown-menu.mdx\"},{\"$id\":\"fallback:components/dual-range-slider.mdx\",\"type\":\"page\",\"name\":\"DualRangeSlider\",\"description\":\"DualRangeSlider is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/dual-range-slider\",\"$ref\":\"components/dual-range-slider.mdx\"},{\"$id\":\"fallback:components/ecosystem-diagram.mdx\",\"type\":\"page\",\"name\":\"EcosystemDiagram\",\"description\":\"A radial ecosystem layout with a center node and ring nodes connected by dashed lines.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/ecosystem-diagram\",\"$ref\":\"components/ecosystem-diagram.mdx\"},{\"$id\":\"fallback:components/empty-table.mdx\",\"type\":\"page\",\"name\":\"EmptyTable\",\"description\":\"EmptyTable is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/empty-table\",\"$ref\":\"components/empty-table.mdx\"},{\"$id\":\"fallback:components/error-state.mdx\",\"type\":\"page\",\"name\":\"ErrorState\",\"description\":\"ErrorState is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/error-state\",\"$ref\":\"components/error-state.mdx\"},{\"$id\":\"fallback:components/faq-section.mdx\",\"type\":\"page\",\"name\":\"FAQSection\",\"description\":\"Accordion-based FAQ section with optional two-column layout. Built on Radix Accordion.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/faq-section\",\"$ref\":\"components/faq-section.mdx\"},{\"$id\":\"fallback:components/feature-card.mdx\",\"type\":\"page\",\"name\":\"FeatureCard\",\"description\":\"FeatureCard is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/feature-card\",\"$ref\":\"components/feature-card.mdx\"},{\"$id\":\"fallback:components/feature-grid.mdx\",\"type\":\"page\",\"name\":\"FeatureGrid\",\"description\":\"Alternating two-column feature rows with text and visual panes.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/feature-grid\",\"$ref\":\"components/feature-grid.mdx\"},{\"$id\":\"fallback:components/feature-section.mdx\",\"type\":\"page\",\"name\":\"FeatureSection\",\"description\":\"Grid of feature cards with icon, title, and description.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/feature-section\",\"$ref\":\"components/feature-section.mdx\"},{\"$id\":\"fallback:components/feature-showcase-section.mdx\",\"type\":\"page\",\"name\":\"FeatureShowcaseSection\",\"description\":\"Alternating rows of text and media for deep-dive feature explanations.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/feature-showcase-section\",\"$ref\":\"components/feature-showcase-section.mdx\"},{\"$id\":\"fallback:components/field.mdx\",\"type\":\"page\",\"name\":\"Field\",\"description\":\"A form field wrapper that c
124onnects a label, input, description, and error message with accessible aria attributes.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/field\",\"$ref\":\"components/field.mdx\"},{\"$id\":\"fallback:components/file-dropzone.mdx\",\"type\":\"page\",\"name\":\"FileDropzone\",\"description\":\"FileDropzone is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/file-dropzone\",\"$ref\":\"components/file-dropzone.mdx\"},{\"$id\":\"fallback:components/flex.mdx\",\"type\":\"page\",\"name\":\"Flex\",\"description\":\"Flexbox layout container with shorthand props for direction, alignment, gap, and wrapping.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/flex\",\"$ref\":\"components/flex.mdx\"},{\"$id\":\"fallback:components/floating-panel.mdx\",\"type\":\"page\",\"name\":\"FloatingPanel\",\"description\":\"FloatingPanel is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/floating-panel\",\"$ref\":\"components/floating-panel.mdx\"},{\"$id\":\"fallback:components/floating-ui.mdx\",\"type\":\"page\",\"name\":\"FloatingUI\",\"description\":\"Stacked floating layer composition with configurable offset and shadow depth.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/floating-ui\",\"$ref\":\"components/floating-ui.mdx\"},{\"$id\":\"fallback:components/footer-section.mdx\",\"type\":\"page\",\"name\":\"FooterSection\",\"description\":\"Site footer with logo, tagline, link groups, social icons, copyright, and legal links.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/footer-section\",\"$ref\":\"components/footer-section.mdx\"},{\"$id\":\"fallback:components/form.mdx\",\"type\":\"page\",\"name\":\"Form\",\"description\":\"A form container with built-in validation, submission handling, and field-level error state propagation.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/form\",\"$ref\":\"components/form.mdx\"},{\"$id\":\"fallback:components/funnel-chart.mdx\",\"type\":\"page\",\"name\":\"FunnelChart\",\"description\":\"A conversion funnel chart showing step-by-step drop-off rates with values.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/funnel-chart\",\"$ref\":\"components/funnel-chart.mdx\"},{\"$id\":\"fallback:components/gantt-chart.mdx\",\"type\":\"page\",\"name\":\"GanttChart\",\"description\":\"A project timeline Gantt chart with grouped tasks, sprint columns, and milestone markers.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/gantt-chart\",\"$ref\":\"components/gantt-chart.mdx\"},{\"$id\":\"fallback:components/globe-diagram.mdx\",\"type\":\"page\",\"name\":\"GlobeDiagram\",\"description\":\"An SVG wireframe globe with city markers and arc connections for geographic visualizations.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/globe-diagram\",\"$ref\":\"components/globe-diagram.mdx\"},{\"$id\":\"fallback:components/gradient-banner-section.mdx\",\"type\":\"page\",\"name\":\"GradientBannerSection\",\"description\":\"Full-width gradient banner with centered logo and text, ideal for brand breaks between sections.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/gradient-banner-section\",\"$ref\":\"components/gradient-banner-section.mdx\"},{\"$id\":\"fallback:components/header.mdx\",\"type\":\"page\",\"name\":\"Header\",\"description\":\"Sticky page header with backdrop blur and configurable border.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/header\",\"$ref\":\"components/header.mdx\"},{\"$id\":\"fallback:components/heatmap-grid.mdx\",\"type\":\"page\",\"name\":\"HeatmapGrid\",\"description\":\"A color-intensity heatmap grid for visualizing 2D data matrices with axis labels.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/heatmap-grid\",\"$ref\":\"components/heatmap-grid.mdx\"},{\"$id\":\"fallback:components/hero-section.mdx\",\"type\":\"page\",\"name\":\"HeroSection\",\"description\":\"Full-width hero with badge, headline, description, CTA buttons, install command, and optional media.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/hero-section\",\"$ref\":\"components/hero-section.mdx\"},{\"$id\":\"fallback:components/hero.mdx\",\"type\":\"page\",\"name\":\"Hero\",\"description\":\"Hero section with headline, description, and CTA action buttons.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/hero\",\"$ref\":\"components/hero.mdx\"},{\"$id\":\"fallback:components/hotkey-provider.mdx\",\"type\":\"page\",\"name\":\"HotkeyProvider\",\"description\":\"HotkeyProvider is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/hotkey-provider\",\"$ref\":\"components/hotkey-provider.mdx\"},{\"$id\":\"fallback:components/hover-card.mdx\",\"type\":\"page\",\"name\":\"HoverCard\",\"description\":\"A card that appears on hover with rich preview content. Built on Radix HoverCard with token-driven styling.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/hover-card\",\"$ref\":\"components/hover-card.mdx\"},{\"$id\":\"fallback:components/hub-route-diagram.mdx\",\"type\":\"page\",\"name\":\"HubRouteDiagram\",\"description\":\"A source-to-hub routing diagram that fans out to categorized left and right target groups.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/hub-route-diagram\",\"$ref\":\"components/hub-route-diagram.mdx\"},{\"$id\":\"fallback:components/hub-spoke-diagram.mdx\",\"type\":\"page\",\"name\":\"HubSpokeDiagram\",\"description\":\"A hub-and-spoke layout with a central node connected to left and right spoke nodes.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/hub-spoke-diagram\",\"$ref\":\"components/hub-spoke-diagram.mdx\"},{\"$id\":\"fallback:components/image-preview.mdx\",\"type\":\"page\",\"name\":\"ImagePreview\",\"description\":\"ImagePreview is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/image-preview\",\"$ref\":\"components/image-preview.mdx\"},{\"$id\":\"fallback:components/image-upload.mdx\",\"type\":\"page\",\"name\":\"ImageUpload\",\"description\":\"ImageUpload is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/image-upload\",\"$ref\":\"components/image-upload.mdx\"},{\"$id\":\"fallback:components/inline-alert.mdx\",\"type\":\"page\",\"name\":\"InlineAlert\",\"description\":\"InlineAlert is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/inline-alert\",\"$ref\":\"components/inline-alert.mdx\"},{\"$id\":\"fallback:components/install-section.mdx\",\"type\":\"page\",\"name\":\"InstallSection\",\"description\":\"Split-layout install section with multiple copyable commands and package manager tabs.\",\"
124icon\":\"$undefined\",\"url\":\"/docs/components/install-section\",\"$ref\":\"components/install-section.mdx\"},{\"$id\":\"fallback:components/isometric-cylinder.mdx\",\"type\":\"page\",\"name\":\"IsometricCylinder\",\"description\":\"SVG isometric cylinder with configurable radius, height, and face colors.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/isometric-cylinder\",\"$ref\":\"components/isometric-cylinder.mdx\"},{\"$id\":\"fallback:components/isometric-prism.mdx\",\"type\":\"page\",\"name\":\"IsometricPrism\",\"description\":\"SVG isometric rectangular prism with configurable dimensions and per-face coloring.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/isometric-prism\",\"$ref\":\"components/isometric-prism.mdx\"},{\"$id\":\"fallback:components/isometric-scene.mdx\",\"type\":\"page\",\"name\":\"IsometricScene\",\"description\":\"Container with an isometric grid background for composing 3D primitives.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/isometric-scene\",\"$ref\":\"components/isometric-scene.mdx\"},{\"$id\":\"fallback:components/isometric-stack-diagram.mdx\",\"type\":\"page\",\"name\":\"IsometricStackDiagram\",\"description\":\"A 3D isometric stack of labeled layers rendered as an SVG with configurable dimensions and hatching.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/isometric-stack-diagram\",\"$ref\":\"components/isometric-stack-diagram.mdx\"},{\"$id\":\"fallback:components/key-value.mdx\",\"type\":\"page\",\"name\":\"KeyValue\",\"description\":\"KeyValue is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/key-value\",\"$ref\":\"components/key-value.mdx\"},{\"$id\":\"fallback:components/keyboard-key.mdx\",\"type\":\"page\",\"name\":\"KeyboardKey\",\"description\":\"KeyboardKey is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/keyboard-key\",\"$ref\":\"components/keyboard-key.mdx\"},{\"$id\":\"fallback:components/large-text-section.mdx\",\"type\":\"page\",\"name\":\"LargeTextSection\",\"description\":\"Full-width statement section with large display text. Highlights strong/em elements in the primary color.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/large-text-section\",\"$ref\":\"components/large-text-section.mdx\"},{\"$id\":\"fallback:components/leaderboard-table.mdx\",\"type\":\"page\",\"name\":\"LeaderboardTable\",\"description\":\"A ranked leaderboard table with medals for top 3, delta indicators, and row highlighting.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/leaderboard-table\",\"$ref\":\"components/leaderboard-table.mdx\"},{\"$id\":\"fallback:components/lightbox.mdx\",\"type\":\"page\",\"name\":\"Lightbox\",\"description\":\"Lightbox is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/lightbox\",\"$ref\":\"components/lightbox.mdx\"},{\"$id\":\"fallback:components/line-chart.mdx\",\"type\":\"page\",\"name\":\"LineChart\",\"description\":\"A multi-series line chart with data point nodes, grid, and axis labels.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/line-chart\",\"$ref\":\"components/line-chart.mdx\"},{\"$id\":\"fallback:components/listbox.mdx\",\"type\":\"page\",\"name\":\"Listbox\",\"description\":\"Listbox is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/listbox\",\"$ref\":\"components/listbox.mdx\"},{\"$id\":\"fallback:components/loading-spinner.mdx\",\"type\":\"page\",\"name\":\"LoadingSpinner\",\"description\":\"An animated loading indicator using token-driven colors, sizes, and durations. SVG-based with reduced-motion support.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/loading-spinner\",\"$ref\":\"components/loading-spinner.mdx\"},{\"$id\":\"fallback:components/loading-state.mdx\",\"type\":\"page\",\"name\":\"LoadingState\",\"description\":\"LoadingState is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/loading-state\",\"$ref\":\"components/loading-state.mdx\"},{\"$id\":\"fallback:components/logo-bar.mdx\",\"type\":\"page\",\"name\":\"LogoBar\",\"description\":\"Social proof logo showcase bar with grayscale-to-color hover transition.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/logo-bar\",\"$ref\":\"components/logo-bar.mdx\"},{\"$id\":\"fallback:components/logo-cloud-section.mdx\",\"type\":\"page\",\"name\":\"LogoCloudSection\",\"description\":\"Horizontal logo strip with grayscale-to-color hover effect.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/logo-cloud-section\",\"$ref\":\"components/logo-cloud-section.mdx\"},{\"$id\":\"fallback:components/main.mdx\",\"type\":\"page\",\"name\":\"Main\",\"description\":\"Semantic main content area with max-width constraint and auto centering.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/main\",\"$ref\":\"components/main.mdx\"},{\"$id\":\"fallback:components/masonry-grid.mdx\",\"type\":\"page\",\"name\":\"MasonryGrid\",\"description\":\"MasonryGrid is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/masonry-grid\",\"$ref\":\"components/masonry-grid.mdx\"},{\"$id\":\"fallback:components/matrix-diagram.mdx\",\"type\":\"page\",\"name\":\"MatrixDiagram\",\"description\":\"A 2D matrix/quadrant diagram for categorizing items by two dimensions.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/matrix-diagram\",\"$ref\":\"components/matrix-diagram.mdx\"},{\"$id\":\"fallback:components/media-card.mdx\",\"type\":\"page\",\"name\":\"MediaCard\",\"description\":\"MediaCard is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/media-card\",\"$ref\":\"components/media-card.mdx\"},{\"$id\":\"fallback:components/mega-menu.mdx\",\"type\":\"page\",\"name\":\"MegaMenu\",\"description\":\"MegaMenu is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/mega-menu\",\"$ref\":\"components/mega-menu.mdx\"},{\"$id\":\"fallback:components/menubar.mdx\",\"type\":\"page\",\"name\":\"Menubar\",\"description\":\"A horizontal menu bar with dropdown menus, keyboard navigation, and submenus. Built on Radix Menubar.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/menubar\",\"$ref\":\"components/menubar.mdx\"},{\"$id\":\"fallback:components/mermaid-diagram.mdx\",\"type\":\"page\",\"name\":\"MermaidDiagram\",\"description\":\"Renders Mermaid chart syntax as an SVG diagram with dark and default theme support.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/mermaid-diagram\",\"$ref\":\"components/mermaid-diagram.mdx\"},{\"$id\":\"fallback:components/message-composer.mdx\",\"type\":\"page\",\"name\":\"MessageComposer\",\"description\":\"MessageComposer is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/message-composer\",\"$ref\":\"components/message-composer.mdx\"},{\"$id\":\"fallback:components/metric-card.mdx\",\"type\":\"page\",\"name\":\"MetricCard\",\"description\":\"A dashboard stat c
124ard displaying a key metric with delta indicator and inline sparkline.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/metric-card\",\"$ref\":\"components/metric-card.mdx\"},{\"$id\":\"fallback:components/metric-grid.mdx\",\"type\":\"page\",\"name\":\"MetricGrid\",\"description\":\"MetricGrid is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/metric-grid\",\"$ref\":\"components/metric-grid.mdx\"},{\"$id\":\"fallback:components/mini-bar-list.mdx\",\"type\":\"page\",\"name\":\"MiniBarList\",\"description\":\"A horizontal bar ranking list for top-N analytics, page views, and leaderboards.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/mini-bar-list\",\"$ref\":\"components/mini-bar-list.mdx\"},{\"$id\":\"fallback:components/mobile-nav.mdx\",\"type\":\"page\",\"name\":\"MobileNav\",\"description\":\"MobileNav is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/mobile-nav\",\"$ref\":\"components/mobile-nav.mdx\"},{\"$id\":\"fallback:components/modal.mdx\",\"type\":\"page\",\"name\":\"Modal\",\"description\":\"Modal is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/modal\",\"$ref\":\"components/modal.mdx\"},{\"$id\":\"fallback:components/multi-select.mdx\",\"type\":\"page\",\"name\":\"MultiSelect\",\"description\":\"MultiSelect is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/multi-select\",\"$ref\":\"components/multi-select.mdx\"},{\"$id\":\"fallback:components/navigation-menu.mdx\",\"type\":\"page\",\"name\":\"NavigationMenu\",\"description\":\"A site-wide navigation component with dropdown panels, viewport animations, and responsive collapse. Built on Radix NavigationMenu.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/navigation-menu\",\"$ref\":\"components/navigation-menu.mdx\"},{\"$id\":\"fallback:components/network-graph.mdx\",\"type\":\"page\",\"name\":\"NetworkGraph\",\"description\":\"A node-link network graph for relationship visualization with weighted edges.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/network-graph\",\"$ref\":\"components/network-graph.mdx\"},{\"$id\":\"fallback:components/newsletter-section.mdx\",\"type\":\"page\",\"name\":\"NewsletterSection\",\"description\":\"Centered email signup form with customizable title, description, and submit handler.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/newsletter-section\",\"$ref\":\"components/newsletter-section.mdx\"},{\"$id\":\"fallback:components/notification-list.mdx\",\"type\":\"page\",\"name\":\"NotificationList\",\"description\":\"NotificationList is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/notification-list\",\"$ref\":\"components/notification-list.mdx\"},{\"$id\":\"fallback:components/notification.mdx\",\"type\":\"page\",\"name\":\"Notification\",\"description\":\"Notification is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/notification\",\"$ref\":\"components/notification.mdx\"},{\"$id\":\"fallback:components/online-indicator.mdx\",\"type\":\"page\",\"name\":\"OnlineIndicator\",\"description\":\"OnlineIndicator is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/online-indicator\",\"$ref\":\"components/online-indicator.mdx\"},{\"$id\":\"fallback:components/orbit-diagram.mdx\",\"type\":\"page\",\"name\":\"OrbitDiagram\",\"description\":\"A circular orbit layout with a center node, surrounding orbital nodes, and optional segment labels.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/orbit-diagram\",\"$ref\":\"components/orbit-diagram.mdx\"},{\"$id\":\"fallback:components/overflow-menu.mdx\",\"type\":\"page\",\"name\":\"OverflowMenu\",\"description\":\"OverflowMenu is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/overflow-menu\",\"$ref\":\"components/overflow-menu.mdx\"},{\"$id\":\"fallback:components/page-header.mdx\",\"type\":\"page\",\"name\":\"PageHeader\",\"description\":\"PageHeader is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/page-header\",\"$ref\":\"components/page-header.mdx\"},{\"$id\":\"fallback:components/pagination.mdx\",\"type\":\"page\",\"name\":\"Pagination\",\"description\":\"A page navigation component with previous/next buttons, numbered pages, and ellipsis truncation.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/pagination\",\"$ref\":\"components/pagination.mdx\"},{\"$id\":\"fallback:components/pattern.mdx\",\"type\":\"page\",\"name\":\"Pattern\",\"description\":\"CSS-only background pattern overlay with seven variants. No SVGs needed.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/pattern\",\"$ref\":\"components/pattern.mdx\"},{\"$id\":\"fallback:components/phone-input.mdx\",\"type\":\"page\",\"name\":\"PhoneInput\",\"description\":\"PhoneInput is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/phone-input\",\"$ref\":\"components/phone-input.mdx\"},{\"$id\":\"fallback:components/pie-chart.mdx\",\"type\":\"page\",\"name\":\"PieChart\",\"description\":\"A pie chart with percentage labels, colored slices, and auto-generated legend.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/pie-chart\",\"$ref\":\"components/pie-chart.mdx\"},{\"$id\":\"fallback:components/pipeline-diagram.mdx\",\"type\":\"page\",\"name\":\"PipelineDiagram\",\"description\":\"A step-by-step pipeline visualization with numbered nodes and animated connectors.\",\"
124icon\":\"$undefined\",\"url\":\"/docs/components/pipeline-diagram\",\"$ref\":\"components/pipeline-diagram.mdx\"},{\"$id\":\"fallback:components/popover-form.mdx\",\"type\":\"page\",\"name\":\"PopoverForm\",\"description\":\"PopoverForm is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/popover-form\",\"$ref\":\"components/popover-form.mdx\"},{\"$id\":\"fallback:components/popover.mdx\",\"type\":\"page\",\"name\":\"Popover\",\"description\":\"A floating panel anchored to a trigger element. Built on Radix Popover with token-driven styling and positioning.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/popover\",\"$ref\":\"components/popover.mdx\"},{\"$id\":\"fallback:components/presence-avatar.mdx\",\"type\":\"page\",\"name\":\"PresenceAvatar\",\"description\":\"PresenceAvatar is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/presence-avatar\",\"$ref\":\"components/presence-avatar.mdx\"},{\"$id\":\"fallback:components/preview-card.mdx\",\"type\":\"page\",\"name\":\"PreviewCard\",\"description\":\"A link preview card that shows a thumbnail, title, and description. Ideal for URL previews and content summaries.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/preview-card\",\"$ref\":\"components/preview-card.mdx\"},{\"$id\":\"fallback:components/pricing-card.mdx\",\"type\":\"page\",\"name\":\"PricingCard\",\"description\":\"PricingCard is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/pricing-card\",\"$ref\":\"components/pricing-card.mdx\"},{\"$id\":\"fallback:components/pricing-table.mdx\",\"type\":\"page\",\"name\":\"PricingTable\",\"description\":\"A feature comparison pricing table with tier highlighting, badges, and category grouping.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/pricing-table\",\"$ref\":\"components/pricing-table.mdx\"},{\"$id\":\"fallback:components/pricing.mdx\",\"type\":\"page\",\"name\":\"Pricing\",\"description\":\"Pricing card with plan name, price, feature list, and optional highlight ring.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/pricing\",\"$ref\":\"components/pricing.mdx\"},{\"$id\":\"fallback:components/progress-ring.mdx\",\"type\":\"page\",\"name\":\"ProgressRing\",\"description\":\"Concentric multi-ring progress indicator inspired by Apple Watch activity rings.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/progress-ring\",\"$ref\":\"components/progress-ring.mdx\"},{\"$id\":\"fallback:components/progress-steps.mdx\",\"type\":\"page\",\"name\":\"ProgressSteps\",\"description\":\"ProgressSteps is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/progress-steps\",\"$ref\":\"components/progress-steps.mdx\"},{\"$id\":\"fallback:components/prompt-dialog.mdx\",\"type\":\"page\",\"name\":\"PromptDialog\",\"description\":\"PromptDialog is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/prompt-dialog\",\"$ref\":\"components/prompt-dialog.mdx\"},{\"$id\":\"fallback:components/prompt-input.mdx\",\"type\":\"page\",\"name\":\"PromptInput\",\"description\":\"PromptInput is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/prompt-input\",\"$ref\":\"components/prompt-input.mdx\"},{\"$id\":\"fallback:components/property-list.mdx\",\"type\":\"page\",\"name\":\"PropertyList\",\"description\":\"PropertyList is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/property-list\",\"$ref\":\"components/property-list.mdx\"},{\"$id\":\"fallback:components/radar-chart.mdx\",\"type\":\"page\",\"name\":\"RadarChart\",\"description\":\"A spider/radar chart for comparing multi-dimensional data across axes.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/radar-chart\",\"$ref\":\"components/radar-chart.mdx\"},{\"$id\":\"fallback:components/radio-card.mdx\",\"type\":\"page\",\"name\":\"RadioCard\",\"description\":\"RadioCard is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/radio-card\",\"$ref\":\"components/radio-card.mdx\"},{\"$id\":\"fallback:components/range-slider.mdx\",\"type\":\"page\",\"name\":\"RangeSlider\",\"description\":\"RangeSlider is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/range-slider\",\"$ref\":\"components/range-slider.mdx\"},{\"$id\":\"fallback:components/resizable-panel.mdx\",\"type\":\"page\",\"name\":\"ResizablePanel\",\"description\":\"Resizable panel layouts with drag handles. Create split panes for editors, file browsers, and dashboards.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/resizable-panel\",\"$ref\":\"components/resizable-panel.mdx\"},{\"$id\":\"fallback:components/resource-card.mdx\",\"type\":\"page\",\"name\":\"ResourceCard\",\"description\":\"ResourceCard is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/resource-card\",\"$ref\":\"components/resource-card.mdx\"},{\"$id\":\"fallback:components/responsive-dialog.mdx\",\"type\":\"page\",\"name\":\"ResponsiveDialog\",\"description\":\"ResponsiveDialog is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/responsive-dialog\",\"$ref\":\"components/responsive-dialog.mdx\"},{\"$id\":\"fallback:components/sankey-diagram.mdx\",\"type\":\"page\",\"name\":\"SankeyDiagram\",\"description\":\"An SVG Sankey flow diagram showing weighted connections between source and target nodes.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/sankey-diagram\",\"$ref\":\"components/sankey-diagram.mdx\"},{\"$id\":\"fallback:components/scroll-spy.mdx\",\"type\":\"page\",\"name\":\"ScrollSpy\",\"description\":\"ScrollSpy is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/scroll-spy\",\"$ref\":\"components/scroll-spy.mdx\"},{\"$id\":\"fallback:components/section-header.mdx\",\"type\":\"page\",\"name\":\"SectionHeader\",\"description\":\"SectionHeader is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/section-header\",\"$ref\":\"components/section-header.mdx\"},{\"$id\":\"fallback:components/section-heading.mdx\",\"type\":\"page\",\"name\":\"SectionHeading\",\"description\":\"Reusable heading block with label, title, and description for page sections.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/section-heading\",\"$ref\":\"components/section-heading.mdx\"},{\"$id\":\"fallback:components/segmented-tabs.mdx\",\"type\":\"page\",\"name\":\"SegmentedTabs\",\"description\":\"SegmentedTabs is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/segmented-tabs\",\"$ref\":\"components/segmented-tabs.mdx\"},{\"$id\":\"fallback:components/shape.mdx\",\"type\":\"page\",\"name\":\"Shape\",\"description\":\"Generic SVG shape component with six variants and configurable size, fill, and stroke.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/shape\",\"$ref\":\"components/shape.mdx\"},{\"$id\":\"fallback:components/sheet.mdx\",\"type\":\"page\",\"name\":\"Sheet\",\"description\":\"A slide-out panel from any edge of the screen. Built on Radix Dialog with token-driven backdrop and transitions.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/sheet\",\"$ref\":\"components/sheet.mdx\"},{\"$id\":\"fallback:components/shortcut-recorder.mdx\",\"type\":\"page\",\"name\":\"ShortcutRecorder\",\"description\":\"ShortcutRecorder is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/shortcut-recorder\",\"$ref\":\"components/shortcut-recorder.mdx\"},{\"$id\":\"fallback:components/sidebar-nav.mdx\",\"type\":\"page\",\"name\":\"SidebarNav\",\"description\":\"SidebarNav is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/sidebar-nav\",\"$ref\":\"components/sidebar-nav.mdx\"},{\"$id\":\"fallback:components/sidebar.mdx\",\"type\":\"page\",\"name\":\"Sidebar\",\"description\":\"A collapsible application sidebar with navigation groups, icons, badges, and responsive behavior.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/sidebar\",\"$ref\":\"components/sidebar.mdx\"},{\"$id\":\"fallback:components/sigil-cursor.mdx\",\"type\":\"page\",\"name\":\"SigilCursor\",\"description\":\"A SigilCursor component from the Sigil design system.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/sigil-cursor\",\"$ref\":\"components/sigil-cursor.mdx\"},{\"$id\":\"fallback:components/simple-grid.mdx\",\"type\":\"page\",\"name\":\"SimpleGrid\",\"description\":\"CSS grid with a fixed column count or responsive auto-fill based on minimum child width.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/simple-grid\",\"$ref\":\"components/simple-grid.mdx\"},{\"$id\":\"fallback:components/skeleton-card.mdx\",\"type\":\"page\",\"name\":\"SkeletonCard\",\"description\":\"SkeletonCard is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/skeleton-card\",\"$ref\":\"components/skeleton-card.mdx\"},{\"$id\":\"fallback:components/skeleton-table.mdx\",\"type\":\"page\",\"name\":\"SkeletonTable\",\"description\":\"SkeletonTable is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/skeleton-table\",\"$ref\":\"components/skeleton-table.mdx\"},{\"$id\":\"fallback:components/slider-field.mdx\",\"type\":\"page\",\"name\":\"SliderField\",\"description\":\"SliderField is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/slider-field\",\"$ref\":\"components/slider-field.mdx\"},{\"$id\":\"fallback:components/sonner.mdx\",\"type\":\"page\",\"name\":\"Sonner\",\"description\":\"Token-styled toast notifications powered by sonner. Drop in the provider and call sonnerToast.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/sonner\",\"$ref\":\"components/sonner.mdx\"},{\"$id\":\"fallback:components/spacer.mdx\",\"type\":\"page\",\"name\":\"Spacer\",\"description\":\"Flexible or fixed-size spacer for pushing siblings apart inside flex containers.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/spacer\",\"$ref\":\"components/spacer.mdx\"},{\"$id\":\"fallback:components/spark-area.mdx\",\"type\":\"page\",\"name\":\"SparkArea\",\"description\":\"SparkArea is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/spark-area\",\"$ref\":\"components/spark-area.mdx\"},{\"$id\":\"fallback:components/spark-bar.mdx\",\"type\":\"page\",\"name\":\"SparkBar\",\"description\":\"SparkBar is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/spark-bar\",\"$ref\":\"components/spark-bar.mdx\"},{\"$id\":\"fallback:components/spark-line.mdx\",\"type\":\"page\",\"name\":\"SparkLine\",\"description\":\"A tiny inline sparkline chart for embedding in dashboard cards and tables.\",\"
124icon\":\"$undefined\",\"url\":\"/docs/components/spark-line\",\"$ref\":\"components/spark-line.mdx\"},{\"$id\":\"fallback:components/spec-table.mdx\",\"type\":\"page\",\"name\":\"SpecTable\",\"description\":\"A technical specification table for displaying key-value pairs with optional section grouping.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/spec-table\",\"$ref\":\"components/spec-table.mdx\"},{\"$id\":\"fallback:components/spinner-overlay.mdx\",\"type\":\"page\",\"name\":\"SpinnerOverlay\",\"description\":\"SpinnerOverlay is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/spinner-overlay\",\"$ref\":\"components/spinner-overlay.mdx\"},{\"$id\":\"fallback:components/split-pane.mdx\",\"type\":\"page\",\"name\":\"SplitPane\",\"description\":\"SplitPane is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/split-pane\",\"$ref\":\"components/split-pane.mdx\"},{\"$id\":\"fallback:components/spotlight.mdx\",\"type\":\"page\",\"name\":\"Spotlight\",\"description\":\"Spotlight is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/spotlight\",\"$ref\":\"components/spotlight.mdx\"},{\"$id\":\"fallback:components/stack-diagram.mdx\",\"type\":\"page\",\"name\":\"StackDiagram\",\"description\":\"A vertical stack of labeled layers with optional 3D tilt, hatching, and interactive hover states.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/stack-diagram\",\"$ref\":\"components/stack-diagram.mdx\"},{\"$id\":\"fallback:components/stat-card.mdx\",\"type\":\"page\",\"name\":\"StatCard\",\"description\":\"StatCard is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/stat-card\",\"$ref\":\"components/stat-card.mdx\"},{\"$id\":\"fallback:components/stats-section.mdx\",\"type\":\"page\",\"name\":\"StatsSection\",\"description\":\"Stat counters in bordered, card, or inline layout with optional trend indicators.\",\"
124icon\":\"$undefined\",\"url\":\"/docs/components/stats-section\",\"$ref\":\"components/stats-section.mdx\"},{\"$id\":\"fallback:components/status-dot.mdx\",\"type\":\"page\",\"name\":\"StatusDot\",\"description\":\"StatusDot is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/status-dot\",\"$ref\":\"components/status-dot.mdx\"},{\"$id\":\"fallback:components/status-pill.mdx\",\"type\":\"page\",\"name\":\"StatusPill\",\"description\":\"StatusPill is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/status-pill\",\"$ref\":\"components/status-pill.mdx\"},{\"$id\":\"fallback:components/status-table.mdx\",\"type\":\"page\",\"name\":\"StatusTable\",\"description\":\"A service health status table with colored indicators, uptime tracking, and incident dates.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/status-table\",\"$ref\":\"components/status-table.mdx\"},{\"$id\":\"fallback:components/stepper-field.mdx\",\"type\":\"page\",\"name\":\"StepperField\",\"description\":\"StepperField is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/stepper-field\",\"$ref\":\"components/stepper-field.mdx\"},{\"$id\":\"fallback:components/stream-flow-diagram.mdx\",\"type\":\"page\",\"name\":\"StreamFlowDiagram\",\"description\":\"A token-stream visualization showing a source emitting tokens with an optional aggregated output.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/stream-flow-diagram\",\"$ref\":\"components/stream-flow-diagram.mdx\"},{\"$id\":\"fallback:components/success-state.mdx\",\"type\":\"page\",\"name\":\"SuccessState\",\"description\":\"SuccessState is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/success-state\",\"$ref\":\"components/success-state.mdx\"},{\"$id\":\"fallback:components/switch-field.mdx\",\"type\":\"page\",\"name\":\"SwitchField\",\"description\":\"SwitchField is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/switch-field\",\"$ref\":\"components/switch-field.mdx\"},{\"$id\":\"fallback:components/table-of-contents.mdx\",\"type\":\"page\",\"name\":\"TableOfContents\",\"description\":\"TableOfContents is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/table-of-contents\",\"$ref\":\"components/table-of-contents.mdx\"},{\"$id\":\"fallback:components/tags-field.mdx\",\"type\":\"page\",\"name\":\"TagsField\",\"description\":\"TagsField is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/tags-field\",\"$ref\":\"components/tags-field.mdx\"},{\"$id\":\"fallback:components/team-section.mdx\",\"type\":\"page\",\"name\":\"TeamSection\",\"description\":\"Team member grid with avatar, name, role, and social links.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/team-section\",\"$ref\":\"components/team-section.mdx\"},{\"$id\":\"fallback:components/testimonial-card.mdx\",\"type\":\"page\",\"name\":\"TestimonialCard\",\"description\":\"Testimonial card with quote, author info, and optional avatar.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/testimonial-card\",\"$ref\":\"components/testimonial-card.mdx\"},{\"$id\":\"fallback:components/testimonial-carousel.mdx\",\"type\":\"page\",\"name\":\"TestimonialCarousel\",\"description\":\"TestimonialCarousel is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/testimonial-carousel\",\"$ref\":\"components/testimonial-carousel.mdx\"},{\"$id\":\"fallback:components/testimonials-section.mdx\",\"type\":\"page\",\"name\":\"TestimonialsSection\",\"description\":\"Customer testimonial cards with quote, author, role, and avatar.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/testimonials-section\",\"$ref\":\"components/testimonials-section.mdx\"},{\"$id\":\"fallback:components/theme-swatch.mdx\",\"type\":\"page\",\"name\":\"ThemeSwatch\",\"description\":\"ThemeSwatch is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/theme-swatch\",\"$ref\":\"components/theme-swatch.mdx\"},{\"$id\":\"fallback:components/theme-switcher.mdx\",\"type\":\"page\",\"name\":\"ThemeSwitcher\",\"description\":\"ThemeSwitcher is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/theme-switcher\",\"$ref\":\"components/theme-switcher.mdx\"},{\"$id\":\"fallback:components/time-picker.mdx\",\"type\":\"page\",\"name\":\"TimePicker\",\"description\":\"TimePicker is a token-driven Sigil component in the forms and inputs group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/time-picker\",\"$ref\":\"components/time-picker.mdx\"},{\"$id\":\"fallback:components/timeline-progress.mdx\",\"type\":\"page\",\"name\":\"TimelineProgress\",\"description\":\"TimelineProgress 
124is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/timeline-progress\",\"$ref\":\"components/timeline-progress.mdx\"},{\"$id\":\"fallback:components/timeline-section.mdx\",\"type\":\"page\",\"name\":\"TimelineSection\",\"description\":\"Vertical timeline with date, title, description, and optional icon per event.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/timeline-section\",\"$ref\":\"components/timeline-section.mdx\"},{\"$id\":\"fallback:components/toast-action.mdx\",\"type\":\"page\",\"name\":\"ToastAction\",\"description\":\"ToastAction is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/toast-action\",\"$ref\":\"components/toast-action.mdx\"},{\"$id\":\"fallback:components/toast-promise.mdx\",\"type\":\"page\",\"name\":\"ToastPromise\",\"description\":\"ToastPromise is a token-driven Sigil component in the feedback and status group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/toast-promise\",\"$ref\":\"components/toast-promise.mdx\"},{\"$id\":\"fallback:components/toast.mdx\",\"type\":\"page\",\"name\":\"Toast\",\"description\":\"A non-intrusive notification popup with auto-dismiss, action buttons, and swipe-to-dismiss. Built on Radix Toast.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/toast\",\"$ref\":\"components/toast.mdx\"},{\"$id\":\"fallback:components/token-preview.mdx\",\"type\":\"page\",\"name\":\"TokenPreview\",\"description\":\"TokenPreview is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/token-preview\",\"$ref\":\"components/token-preview.mdx\"},{\"$id\":\"fallback:components/toolbar.mdx\",\"type\":\"page\",\"name\":\"Toolbar\",\"description\":\"A horizontal toolbar for grouping actions, toggles, and separators. Built on Radix Toolbar.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/toolbar\",\"$ref\":\"components/toolbar.mdx\"},{\"$id\":\"fallback:components/tooltip-group.mdx\",\"type\":\"page\",\"name\":\"TooltipGroup\",\"description\":\"TooltipGroup is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/tooltip-group\",\"$ref\":\"components/tooltip-group.mdx\"},{\"$id\":\"fallback:components/tooltip.mdx\",\"type\":\"page\",\"name\":\"Tooltip\",\"description\":\"A brief text label that appears on hover or focus. Built on Radix Tooltip with token-driven delay, offset, and styling.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/tooltip\",\"$ref\":\"components/tooltip.mdx\"},{\"$id\":\"fallback:components/top-bar.mdx\",\"type\":\"page\",\"name\":\"TopBar\",\"description\":\"TopBar is a token-driven Sigil component in the layout, navigation, and content group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/top-bar\",\"$ref\":\"components/top-bar.mdx\"},{\"$id\":\"fallback:components/tour-step.mdx\",\"type\":\"page\",\"name\":\"TourStep\",\"description\":\"TourStep is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/tour-step\",\"$ref\":\"components/tour-step.mdx\"},{\"$id\":\"fallback:components/tour.mdx\",\"type\":\"page\",\"name\":\"Tour\",\"description\":\"Tour is a token-driven Sigil component in the overlay and interaction group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/tour\",\"$ref\":\"components/tour.mdx\"},{\"$id\":\"fallback:components/tree-diagram.mdx\",\"type\":\"page\",\"name\":\"TreeDiagram\",\"description\":\"A hierarchical tree diagram for visualizing parent-child relationships between nodes.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/tree-diagram\",\"$ref\":\"components/tree-diagram.mdx\"},{\"$id\":\"fallback:components/tree-table.mdx\",\"type\":\"page\",\"name\":\"TreeTable\",\"description\":\"TreeTable is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/tree-table\",\"$ref\":\"components/tree-table.mdx\"},{\"$id\":\"fallback:components/trend.mdx\",\"type\":\"page\",\"name\":\"Trend\",\"description\":\"Trend is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/trend\",\"$ref\":\"components/trend.mdx\"},{\"$id\":\"fallback:components/typography.mdx\",\"type\":\"page\",\"name\":\"Typography\",\"description\":\"Semantic text primitives — headings, paragraphs, and inline elements — driven entirely by token variables.\",\"
124icon\":\"$undefined\",\"url\":\"/docs/components/typography\",\"$ref\":\"components/typography.mdx\"},{\"$id\":\"fallback:components/usage-gauge.mdx\",\"type\":\"page\",\"name\":\"UsageGauge\",\"description\":\"A semicircular gauge for displaying resource usage with auto-color thresholds.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/usage-gauge\",\"$ref\":\"components/usage-gauge.mdx\"},{\"$id\":\"fallback:components/venn-diagram.mdx\",\"type\":\"page\",\"name\":\"VennDiagram\",\"description\":\"A Venn diagram for visualizing set intersections with 2 or 3 circles.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/venn-diagram\",\"$ref\":\"components/venn-diagram.mdx\"},{\"$id\":\"fallback:components/version-badge.mdx\",\"type\":\"page\",\"name\":\"VersionBadge\",\"description\":\"VersionBadge is a token-driven Sigil component in the developer and ai/product ui group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/version-badge\",\"$ref\":\"components/version-badge.mdx\"},{\"$id\":\"fallback:components/virtual-list.mdx\",\"type\":\"page\",\"name\":\"VirtualList\",\"description\":\"VirtualList is a token-driven Sigil component in the data display and tables group.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/virtual-list\",\"$ref\":\"components/virtual-list.mdx\"},{\"$id\":\"fallback:components/visually-hidden.mdx\",\"type\":\"page\",\"name\":\"Visually Hidden\",\"description\":\"Hides content visually while keeping it accessible to screen readers.\",\"icon\":\"$undefined\",\"url\":\"/docs/components/visually-hidden\",\"$ref\":\"components/visually-hidden.mdx\"}],\"$id\":\"fallback:components\",\"$ref\":\"$undefined\",\"icon\":\"$undefined\"},{\"type\":\"folder\",\"name\":\"Layout\",\"root\":\"$undefined\",\"defaultOpen\":\"$undefined\",\"description\":\"$undefined\",\"collapsible\":\"$undefined\",\"children\":[{\"$id\":\"fallback:layout/grid.mdx\",\"type\":\"page\",\"name\":\"SigilGrid\",\"description\":\"A CSS Grid with visible cross marks at cell intersections, powered by the sigil grid tokens.\",\"icon\":\"$undefined\",\"url\":\"/docs/layout/grid\",\"$ref\":\"layout/grid.mdx\"}],\"$id\":\"fallback:layout\",\"$ref\":\"$undefined\",\"icon\":\"$undefined\"},{\"type\":\"folder\",\"name\":\"Navigation\",\"root\":\"$undefined\",\"defaultOpen\":\"$undefined\",\"description\":\"$undefined\",\"collapsible\":\"$undefined\",\"children\":[{\"$id\":\"fallback:navigation/magnetic-nav.mdx\",\"type\":\"page\",\"name\":\"MagneticNav\",\"description\":\"Navigation with a sliding magnetic highlight indicator — pure CSS anchor positioning, no JS.\",\"icon\":\"$undefined\",\"url\":\"/docs/navigation/magnetic-nav\",\"$ref\":\"navigation/magnetic-nav.mdx\"}],\"$id\":\"fallback:navigation\",\"$ref\":\"$undefined\",\"icon\":\"$undefined\"}]}},\"tabs\":[],\"tabMode\":\"$undefined\",\"sidebar\":{\"defaultOpenLevel\":1},\"nav\":{\"title\":\"$L13\",\"url\":\"/\"},\"children\":\"$L14\"}]}]]}]\n"])</script>
124<script>self.__next_f.push([1,"5:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n6:[\"$\",\"$1\",\"c\",{\"children\":[\"$L15\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0ekfii.fqt-2y.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/024d6fl2onegx.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@18\"}]}]]}]\n19:[]\n7:\"$W19\"\n8:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L1a\",null,{\"children\":\"$L1b\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L1c\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L1d\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\na:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/05r._-xkhxe.w.css?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\nb:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/07q8132~9~-gm.css?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script>
124<script>self.__next_f.push([1,"13:[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2.5\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 120 120\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":18,\"height\":18,\"children\":[[\"$\",\"polygon\",null,{\"points\":\"0,0 56,0 56,32 40,40 40,56 0,56\",\"fill\":\"currentColor\"}],[\"$\",\"polygon\",null,{\"points\":\"120,0 120,56 88,56 80,40 64,40 64,0\",\"fill\":\"currentColor\"}],[\"$\",\"polygon\",null,{\"points\":\"0,120 0,64 32,64 40,80 56,80 56,120\",\"fill\":\"currentColor\"}],[\"$\",\"polygon\",null,{\"points\":\"120,120 64,120 64,88 80,80 80,64 120,64\",\"fill\":\"var(--s-primary, #18181b)\"}]]}],[\"$\",\"span\",null,{\"className\":\"font-[family-name:var(--s-font-display)] font-bold text-[15px] tracking-[-0.03em]\",\"children\":[\"sigil\",[\"$\",\"span\",null,{\"className\":\"opacity-30 font-light\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"font-medium text-[13px]\",\"children\":\"UI\"}]]}]]}]\n14:[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]\n"])</script>
124<script>self.__next_f.push([1,"1e:I[690911,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0ekfii.fqt-2y.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/024d6fl2onegx.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"DocsPage\"]\n1f:I[690911,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0ekfii.fqt-2y.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/024d6fl2onegx.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"DocsTitle\"]\n20:I[690911,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0ekfii.fqt-2y.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/024d6fl2onegx.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"DocsDescription\"]\n21:I[690911,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0ekfii.fqt-2y.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/024d6fl2onegx.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"DocsBody\"]\n22:I[294779,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=d"])</script>
124<script>self.__next_f.push([1,"pl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0ekfii.fqt-2y.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/024d6fl2onegx.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"default\"]\n23:I[687070,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0ekfii.fqt-2y.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/024d6fl2onegx.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"CodeBlock\"]\n"])</script>
124<script>self.__next_f.push([1,"15:[\"$\",\"$L1e\",null,{\"toc\":[{\"depth\":2,\"url\":\"#why-sigil-ui\",\"title\":\"Why Sigil UI\"},{\"depth\":3,\"url\":\"#how-it-compares-to-traditional-component-libraries\",\"title\":\"How it compares to traditional component libraries\"},{\"depth\":3,\"url\":\"#quick-start\",\"title\":\"Quick start\"},{\"depth\":3,\"url\":\"#token-architecture\",\"title\":\"Token architecture\"},{\"depth\":3,\"url\":\"#packages-on-npm\",\"title\":\"Packages on npm\"},{\"depth\":3,\"url\":\"#next-steps\",\"title\":\"Next steps\"}],\"full\":\"$undefined\",\"children\":[[\"$\",\"$L1f\",null,{\"children\":\"Getting Started\"}],[\"$\",\"$L20\",null,{\"children\":\"One markdown file controls your entire design system. 519 tokens, 33 categories, 350+ components. Compiles to CSS + Tailwind v4.\"}],[\"$\",\"$L21\",null,{\"children\":[[\"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"why-sigil-ui\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#why-sigil-ui\",\"className\":\"peer\",\"children\":\"Why Sigil UI\"}],[\"$\",\"$L22\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\",\"key\":\"1cjeqo\"}],[\"path\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\",\"key\":\"19qd67\"}]],\"className\":\"lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-hidden\":true}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Most component libraries scatter design decisions across dozens of files.\\nChange a border radius? Hunt through every component. Update a color? Grep and pray.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Sigil takes the opposite approach.\"}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Your entire design system lives in one \",[\"$\",\"code\",null,{\"children\":\"DESIGN.md\"}],\" file — 519 tokens across 33 categories. Edit the markdown, run \",[\"$\",\"code\",null,{\"children\":\"sigil design compile\"}],\", and every component updates. Colors, spacing, radii, shadows, motion, page composition — all from one source.\"]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"how-it-compares-to-traditional-component-libraries\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#how-it-compares-to-traditional-component-libraries\",\"className\":\"peer\",\"children\":\"How it compares to traditional component libraries\"}],[\"$\",\"$L22\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$15:props:children:2:props:children:0:props:children:1:props:iconNode\",\"className\":\"lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-hidden\":true}]]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"relative overflow-auto prose-no-margin my-6\",\"children\":[\"$\",\"table\",null,{\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{}],[\"$\",\"th\",null,{\"children\":\"Radix, Chakra, MUI, etc.\"}],[\"$\",\"th\",null,{\"children\":\"Sigil UI\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":\"Theming\"}],[\"$\",\"td\",null,{\"children\":\"Edit config files + CSS variables + component files\"}],[\"$\",\"td\",null,{\"children\":\"Edit one token file\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":\"Agent workflow\"}],[\"$\",\"td\",null,{\"children\":\"Agent modifies scattered Tailwind classes or style props\"}],[\"$\",\"td\",null,{\"children\":\"Your agent edits one file\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":\"Presets\"}],[\"$\",\"td\",null,{\"children\":\"Copy a config from a blog post\"}],[\"$\",\"td\",null,{\"children\":[\"$\",\"code\",null,{\"children\":\"npx @sigil-ui/cli init --preset sigil\"}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":\"Token system\"}],[\"$\",\"td\",null,{\"children\":\"CSS variables, manually maintained\"}],[\"$\",\"td\",null,{\"children\":\"Three-layer architecture: primitive → semantic → component\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":\"Shipping themes\"}],[\"$\",\"td\",null,{\"children\":\"\\\"Just change the CSS variables\\\"\"}],[\"$\",\"td\",null,{\"children\":\"Ship a preset, not a config file\"}]]}]]}]]}]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"quick-start\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#quick-start\",\"className\":\"peer\",\"children\":\"Quick start\"}],[\"$\",\"$L22\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$15:props:children:2:props:children:0:props:children:1:props:iconNode\",\"className\":\"lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-hidden\":true}]]}],\"\\n\",[\"$\",\"$L23\",null,{\"className\":\"shiki shiki-themes g
124ithub-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"icon\":\"\u003csvg viewBox=\\\"0 0 24 24\\\"\u003e\u003cpath d=\\\"m 4,4 a 1,1 0 0 0 -0.7070312,0.2929687 1,1 0 0 0 0,1.4140625 L 8.5859375,11 3.2929688,16.292969 a 1,1 0 0 0 0,1.414062 1,1 0 0 0 1.4140624,0 l 5.9999998,-6 a 1.0001,1.0001 0 0 0 0,-1.414062 L 4.7070312,4.2929687 A 1,1 0 0 0 4,4 Z m 8,14 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 h 8 a 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 z\\\" fill=\\\"currentColor\\\" /\u003e\u003c/svg\u003e\",\"children\":\"$L24\"}],\"\\n\",\"$L25\",\"\\n\",\"$L26\",\"\\n\",\"$L27\",\"\\n\",\"$L28\",\"\\n\",\"$L29\",\"\\n\",\"$L2a\",\"\\n\",\"$L2b\",\"\\n\",\"$L2c\",\"\\n\",\"$L2d\",\"\\n\",\"$L2e\",\"\\n\",\"$L2f\"]}]]}]\n"])</script>
124<script>self.__next_f.push([1,"30:I[687070,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0ekfii.fqt-2y.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/024d6fl2onegx.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"Pre\"]\n38:I[518877,[\"/_next/static/chunks/0hu6nd3nzpzw5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0j5uggvzrkkem.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/16742mgqb5-~7.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0~.0.9f8mbn7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0eeygfmxrdek8.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0307he2jy8dvm.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/13o_1vn-rxewg.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0si6_e~na.6q6.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/071gu4i45qq7e.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/06.r8eem.-uje.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0ekfii.fqt-2y.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/024d6fl2onegx.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"default\"]\n24:[\"$\",\"$L30\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"# Install the packages\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"pnpm\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" add\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" @sigil-ui/tokens\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" @sigil-ui/components\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"# Or scaffold a new project\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"npx\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" @sigil-ui/cli\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" init\"}]]}]]}]}]\n25:[\"$\",\"p\",null,{\"children\":\"Import the token CSS and start building:\"}]\n31:Tb41,"])</script>
124<script>self.__next_f.push([1,"\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e"])</script>
124<script>self.__next_f.push([1,"26:[\"$\",\"$L23\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"icon\":\"$31\",\"children\":[\"$\",\"$L30\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"@sigil-ui/tokens/css\\\"\"}],\"$L32\"]}],\"\\n\",\"$L33\",\"\\n\",\"$L34\",\"\\n\",\"$L35\",\"\\n\",\"$L36\",\"\\n\",\"$L37\"]}]}]}]\n27:[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"token-architecture\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#token-architecture\",\"className\":\"peer\",\"children\":\"Token architecture\"}],[\"$\",\"$L22\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$15:props:children:2:props:children:0:props:children:1:props:iconNode\",\"className\":\"lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-hidden\":true}]]}]\n28:[\"$\",\"p\",null,{\"children\":\"Sigil uses a three-layer token system:\"}]\n29:[\"$\",\"ol\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Primitive\"}],\" — raw values like \",[\"$\",\"code\",null,{\"children\":\"oklch(0.65 0.15 280)\"}],\" or \",[\"$\",\"code\",null,{\"children\":\"8px\"}]]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Semantic\"}],\" — purpose-driven aliases like \",[\"$\",\"code\",null,{\"children\":\"--s-primary\"}],\" or \",[\"$\",\"code\",null,{\"children\":\"--s-radius-md\"}]]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Component\"}],\" — scoped tokens like \",[\"$\",\"code\",null,{\"children\":\"--s-card-radius\"}],\" consumed by individual components\"]}],\"\\n\"]}]\n2a:[\"$\",\"p\",null,{\"children\":[\"Every layer compiles to CSS custom properties with the \",[\"$\",\"code\",null,{\"children\":\"--s-\"}],\" prefix. Components only read variables — they never hardcode values.\"]}]\n"])</script>
124<script>self.__next_f.push([1,"2b:[\"$\",\"$L23\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"icon\":\"\u003csvg viewBox=\\\"0 0 24 24\\\"\u003e\u003cpath d=\\\"M 6,1 C 4.354992,1 3,2.354992 3,4 v 16 c 0,1.645008 1.354992,3 3,3 h 12 c 1.645008,0 3,-1.354992 3,-3 V 8 7 A 1.0001,1.0001 0 0 0 20.707031,6.2929687 l -5,-5 A 1.0001,1.0001 0 0 0 15,1 h -1 z m 0,2 h 7 v 3 c 0,1.645008 1.354992,3 3,3 h 3 v 11 c 0,0.564129 -0.435871,1 -1,1 H 6 C 5.4358712,21 5,20.564129 5,20 V 4 C 5,3.4358712 5.4358712,3 6,3 Z M 15,3.4140625 18.585937,7 H 16 C 15.435871,7 15,6.5641288 15,6 Z\\\" fill=\\\"currentColor\\\" /\u003e\u003c/svg\u003e\",\"children\":[\"$\",\"$L30\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"/* Your token file controls everything */\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\":root\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"  --s-primary\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"oklch\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"0.65\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 0.15\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 280\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"  --s-radius-md\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"8\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"px\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"  --s-shadow-md\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"0\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 0\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 0\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 1\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"px\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" rgb\"}
124],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"0\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 0\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 0\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" / \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"0.06\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"), ...;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}]}]]}]}]}]\n"])</script>
124<script>self.__next_f.push([1,"2c:[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"packages-on-npm\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#packages-on-npm\",\"className\":\"peer\",\"children\":\"Packages on npm\"}],[\"$\",\"$L22\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$15:props:children:2:props:children:0:props:children:1:props:iconNode\",\"className\":\"lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-hidden\":true}]]}]\n"])</script>
124<script>self.__next_f.push([1,"2d:[\"$\",\"div\",null,{\"className\":\"relative overflow-auto prose-no-margin my-6\",\"children\":[\"$\",\"table\",null,{\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"children\":\"Package\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":[\"$\",\"$L38\",null,{\"href\":\"https://www.npmjs.com/package/@sigil-ui/tokens\",\"children\":[\"$\",\"code\",null,{\"children\":\"@sigil-ui/tokens\"}]}]}],[\"$\",\"td\",null,{\"children\":\"519 tokens, 33 categories. Compiles to CSS, Tailwind v4, W3C JSON.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":[\"$\",\"$L38\",null,{\"href\":\"https://www.npmjs.com/package/@sigil-ui/components\",\"children\":[\"$\",\"code\",null,{\"children\":\"@sigil-ui/components\"}]}]}],[\"$\",\"td\",null,{\"children\":\"350+ token-driven React components\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":[\"$\",\"$L38\",null,{\"href\":\"https://www.npmjs.com/package/@sigil-ui/preset
124s\",\"children\":[\"$\",\"code\",null,{\"children\":\"@sigil-ui/presets\"}]}]}],[\"$\",\"td\",null,{\"children\":\"46 curated preset bundles (500+ tokens each)\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":[\"$\",\"$L38\",null,{\"href\":\"https://www.npmjs.com/package/@sigil-ui/primitives\",\"children\":[\"$\",\"code\",null,{\"children\":\"@sigil-ui/primitives\"}]}]}],[\"$\",\"td\",null,{\"children\":\"40+ headless primitives (Radix + Base UI)\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":[\"$\",\"$L38\",null,{\"href\":\"https://www.npmjs.com/package/@sigil-ui/cli\",\"children\":[\"$\",\"code\",null,{\"children\":\"@sigil-ui/cli\"}]}]}],[\"$\",\"td\",null,{\"children\":\"CLI for init, design, preset, add, inspire, doctor\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":[\"$\",\"$L38\",null,{\"href\":\"https://www.npmjs.com/package/create-sigil-app\",\"children\":[\"$\",\"code\",null,{\"children\":\"create-sigil-app\"}]}]}],[\"$\",\"td\",null,{\"children\":\"One-command project scaffolding\"}]]}]]}]]}]}]\n"])</script>
124<script>self.__next_f.push([1,"2e:[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"next-steps\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#next-steps\",\"className\":\"peer\",\"children\":\"Next steps\"}],[\"$\",\"$L22\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$15:props:children:2:props:children:0:props:children:1:props:iconNode\",\"className\":\"lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-hidden\":true}]]}]\n2f:[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L38\",null,{\"href\":\"/docs/installation\",\"children\":\"Installation\"}],\" — detailed setup for Next.js, Vite, and Remix\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L38\",null,{\"href\":\"/docs/theming\",\"children\":\"Theming\"}],\" — create and share presets\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L38\",null,{\"href\":\"/docs/cli\",\"children\":\"CLI Reference\"}],\" — all available commands\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L38\",null,{\"href\":\"/docs/components/modal\",\"children\":\"Modal\"}],\" — expanded overlay component docs\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L38\",null,{\"href\":\"/docs/components/multi-select\",\"children\":\"MultiSelect\"}],\" — advanced input component docs\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L38\",null,{\"href\":\"/docs/components/button\",\"children\":\"Button\"}],\" — your first component\"]}],\"\\n\"]}]\n"])</script>
124<script>self.__next_f.push([1,"32:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]\n33:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { Button } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"@sigil-ui/components\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}]\n34:[\"$\",\"span\",null,{\"className\":\"line\"}]\n35:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" default\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" function\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" App\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"() {\"}]]}]\n36:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"  return\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"Button\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" variant\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"primary\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003eGet started\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"Button\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e;\"}]]}]\n37:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}]}]\n"])</script>
124<script>self.__next_f.push([1,"1b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
124<script>self.__next_f.push([1,"39:I[281937,[\"/_next/static/chunks/0o~jm1~h~.mb5.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"/_next/static/chunks/0njqfkuk24ws_.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\"],\"IconMark\"]\n18:null\n"])</script>
124<script>self.__next_f.push([1,"1d:[[\"$\",\"title\",\"0\",{\"children\":\"Getting Started — Sigil UI\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"One markdown file controls your entire design system. 519 tokens, 33 categories, 350+ components. Compiles to CSS + Tailwind v4.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://kevinliu.me\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Kevin Liu\"}],[\"$\",\"link\",\"4\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"5\",{\"name\":\"keywords\",\"content\":\"sigil ui,design tokens,react component library,design system,tailwind css,css custom properties,theming presets,token-driven components,base ui primitives,open source ui\"}],[\"$\",\"meta\",\"6\",{\"name\":\"creator\",\"content\":\"Kevin Liu\"}],[\"$\",\"meta\",\"7\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"8\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"9\",{\"name\":\"category\",\"content\":\"technology\"}],[\"$\",\"link\",\"10\",{\"rel\":\"canonical\",\"href\":\"https://sigil-ui.com/docs/\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:title\",\"content\":\"Getting Started — Sigil UI Docs\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:description\",\"content\":\"One markdown file controls your entire design system. 519 tokens, 33 categories, 350+ components. Compiles to CSS + Tailwind v4.\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:url\",\"content\":\"https://sigil-ui.com/docs/\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image\",\"content\":\"https://sigil-ui.com/api/og?title=Getting%20Started\u0026type=docs\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:alt\",\"content\":\"Getting Started\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:site\",\"content\":\"@kevinliu\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:creator\",\"content\":\"@kevinliu\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"Getting Started — Sigil UI Docs\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"One markdown file controls your entire design system. 519 tokens, 33 categories, 350+ components. Compiles to CSS + Tailwind v4.\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://sigil-ui.com/api/og?title=Getting%20Started\u0026type=docs\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:image:alt\",\"content\":\"Getting Started\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"27\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.00ti33qo2841f.ico?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"sizes\":\"16x16\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"28\",{\"rel\":\"icon\",\"href\":\"/icon.svg?icon.14v5nq4prn-xi.svg?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN\",\"sizes\":\"any\",\"type\":\"image/svg+xml\"}],[\"$\",\"$L39\",\"29\",{}]]\n"])</script>
124</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.