diff --git a/SLASHED-for-WP/admin-app/.vendored-manifest.json b/SLASHED-for-WP/admin-app/.vendored-manifest.json index 5db31113..6d25ed5b 100644 --- a/SLASHED-for-WP/admin-app/.vendored-manifest.json +++ b/SLASHED-for-WP/admin-app/.vendored-manifest.json @@ -3,205 +3,205 @@ "description": "Files vendored from the SLASHED framework configurator. DO NOT edit directly — make changes in codeslash-dev/SLASHED → configurator/src/ and re-run npm run sync.", "frameworkRepo": "https://github.com/codeslash-dev/SLASHED", "configuratorSrc": "configurator/src/", - "source": "github:codeslash-dev/slashed@main", - "syncedAt": "2026-07-01T01:34:09.798Z" + "source": "local", + "syncedAt": "2026-07-01T06:21:42.649Z" }, "vendoredFiles": [ { "file": "src/app.css", - "source": "github:codeslash-dev/slashed/configurator/src/app.css@main" + "source": "local:configurator/src/app.css" }, { "file": "src/App.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/App.svelte@main" + "source": "local:configurator/src/App.svelte" }, { "file": "src/components/CommandPalette.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/CommandPalette.svelte@main" + "source": "local:configurator/src/components/CommandPalette.svelte" }, { "file": "src/components/DomainPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/DomainPanel.svelte@main" + "source": "local:configurator/src/components/DomainPanel.svelte" }, { "file": "src/components/inputs/ClampField.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ClampField.svelte@main" + "source": "local:configurator/src/components/inputs/ClampField.svelte" }, { "file": "src/components/inputs/ColorInput.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ColorInput.svelte@main" + "source": "local:configurator/src/components/inputs/ColorInput.svelte" }, { "file": "src/components/inputs/OklchColorDesk.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/OklchColorDesk.svelte@main" + "source": "local:configurator/src/components/inputs/OklchColorDesk.svelte" }, { "file": "src/components/inputs/PowerKnobRow.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/PowerKnobRow.svelte@main" + "source": "local:configurator/src/components/inputs/PowerKnobRow.svelte" }, { "file": "src/components/inputs/RangeWithNumber.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/RangeWithNumber.svelte@main" + "source": "local:configurator/src/components/inputs/RangeWithNumber.svelte" }, { "file": "src/components/inputs/SliderRow.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/SliderRow.svelte@main" + "source": "local:configurator/src/components/inputs/SliderRow.svelte" }, { "file": "src/components/inputs/TokenRow.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/TokenRow.svelte@main" + "source": "local:configurator/src/components/inputs/TokenRow.svelte" }, { "file": "src/components/panels/AllTokensTab.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/AllTokensTab.svelte@main" + "source": "local:configurator/src/components/panels/AllTokensTab.svelte" }, { "file": "src/components/panels/BordersPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/BordersPanel.svelte@main" + "source": "local:configurator/src/components/panels/BordersPanel.svelte" }, { "file": "src/components/panels/CheatsheetPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/CheatsheetPanel.svelte@main" + "source": "local:configurator/src/components/panels/CheatsheetPanel.svelte" }, { "file": "src/components/panels/ColorsPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ColorsPanel.svelte@main" + "source": "local:configurator/src/components/panels/ColorsPanel.svelte" }, { "file": "src/components/panels/EffectsPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/EffectsPanel.svelte@main" + "source": "local:configurator/src/components/panels/EffectsPanel.svelte" }, { "file": "src/components/panels/ExportPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ExportPanel.svelte@main" + "source": "local:configurator/src/components/panels/ExportPanel.svelte" }, { "file": "src/components/panels/GenericTokenPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/GenericTokenPanel.svelte@main" + "source": "local:configurator/src/components/panels/GenericTokenPanel.svelte" }, { "file": "src/components/panels/HomePanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/HomePanel.svelte@main" + "source": "local:configurator/src/components/panels/HomePanel.svelte" }, { "file": "src/components/panels/LayoutPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/LayoutPanel.svelte@main" + "source": "local:configurator/src/components/panels/LayoutPanel.svelte" }, { "file": "src/components/panels/MacrosPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MacrosPanel.svelte@main" + "source": "local:configurator/src/components/panels/MacrosPanel.svelte" }, { "file": "src/components/panels/MiscPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MiscPanel.svelte@main" + "source": "local:configurator/src/components/panels/MiscPanel.svelte" }, { "file": "src/components/panels/MotionPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MotionPanel.svelte@main" + "source": "local:configurator/src/components/panels/MotionPanel.svelte" }, { "file": "src/components/panels/ShadowsPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ShadowsPanel.svelte@main" + "source": "local:configurator/src/components/panels/ShadowsPanel.svelte" }, { "file": "src/components/panels/SpacingPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/SpacingPanel.svelte@main" + "source": "local:configurator/src/components/panels/SpacingPanel.svelte" }, { "file": "src/components/panels/ThemesPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ThemesPanel.svelte@main" + "source": "local:configurator/src/components/panels/ThemesPanel.svelte" }, { "file": "src/components/panels/TypographyPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/TypographyPanel.svelte@main" + "source": "local:configurator/src/components/panels/TypographyPanel.svelte" }, { "file": "src/components/panels/WcagPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/WcagPanel.svelte@main" + "source": "local:configurator/src/components/panels/WcagPanel.svelte" }, { "file": "src/components/shell/PreviewPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/PreviewPanel.svelte@main" + "source": "local:configurator/src/components/shell/PreviewPanel.svelte" }, { "file": "src/components/shell/SidebarNav.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/SidebarNav.svelte@main" + "source": "local:configurator/src/components/shell/SidebarNav.svelte" }, { "file": "src/components/shell/StatusBar.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/StatusBar.svelte@main" + "source": "local:configurator/src/components/shell/StatusBar.svelte" }, { "file": "src/components/shell/StudioHeader.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/StudioHeader.svelte@main" + "source": "local:configurator/src/components/shell/StudioHeader.svelte" }, { "file": "src/data/api-index.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/api-index.generated.json@main" + "source": "local:configurator/src/data/api-index.generated.json" }, { "file": "src/data/bundles.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/bundles.generated.json@main" + "source": "local:configurator/src/data/bundles.generated.json" }, { "file": "src/data/classes.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/classes.generated.json@main" + "source": "local:configurator/src/data/classes.generated.json" }, { "file": "src/data/domain-patterns.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/domain-patterns.json@main" + "source": "local:configurator/src/data/domain-patterns.json" }, { "file": "src/data/token-registry.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/token-registry.generated.json@main" + "source": "local:configurator/src/data/token-registry.generated.json" }, { "file": "src/lib/basics.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/basics.ts@main" + "source": "local:configurator/src/lib/basics.ts" }, { "file": "src/lib/codec.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/codec.ts@main" + "source": "local:configurator/src/lib/codec.ts" }, { "file": "src/lib/colorUtils.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/colorUtils.ts@main" + "source": "local:configurator/src/lib/colorUtils.ts" }, { "file": "src/lib/domains.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/domains.ts@main" + "source": "local:configurator/src/lib/domains.ts" }, { "file": "src/lib/lumlockerPreview.svelte.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/lumlockerPreview.svelte.ts@main" + "source": "local:configurator/src/lib/lumlockerPreview.svelte.ts" }, { "file": "src/lib/persistence.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/persistence.ts@main" + "source": "local:configurator/src/lib/persistence.ts" }, { "file": "src/lib/powerKnobs.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/powerKnobs.ts@main" + "source": "local:configurator/src/lib/powerKnobs.ts" }, { "file": "src/lib/previewResolver.svelte.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/previewResolver.svelte.ts@main" + "source": "local:configurator/src/lib/previewResolver.svelte.ts" }, { "file": "src/lib/savedThemes.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/savedThemes.ts@main" + "source": "local:configurator/src/lib/savedThemes.ts" }, { "file": "src/main.ts", - "source": "github:codeslash-dev/slashed/configurator/src/main.ts@main" + "source": "local:configurator/src/main.ts" }, { "file": "src/types.ts", - "source": "github:codeslash-dev/slashed/configurator/src/types.ts@main" + "source": "local:configurator/src/types.ts" }, { "file": "src/vite-env.d.ts", - "source": "github:codeslash-dev/slashed/configurator/src/vite-env.d.ts@main" + "source": "local:configurator/src/vite-env.d.ts" } ] } diff --git a/SLASHED-for-WP/admin-app/src/App.svelte b/SLASHED-for-WP/admin-app/src/App.svelte index 12738160..3c3f068b 100644 --- a/SLASHED-for-WP/admin-app/src/App.svelte +++ b/SLASHED-for-WP/admin-app/src/App.svelte @@ -241,6 +241,21 @@ }); +{#snippet foldToggleButton(view: "controls" | "preview", Icon: typeof SlidersHorizontal, label: string)} + +{/snippet} +
+ +
+ {@render foldToggleButton("controls", SlidersHorizontal, "Controls")} + {@render foldToggleButton("preview", Eye, "Preview")} +
+
@@ -268,8 +291,10 @@ />
- -
+ +
@@ -308,31 +333,6 @@
- -
- - -
- { injectLivePreview(overrides); }); + // Panels (e.g. ColorsPanel's semantic preview) resolve real computed colors + // via previewResolver, which normally reads them out of the dedicated + // preview iframe App.svelte/PreviewPanel renders. The overlay has no such + // iframe — the host page itself *is* the live preview, per the class doc + // comment in class-frontend-configurator.php — so without registering it + // here, resolveColor()/resolveColorForTheme() always return "" and every + // swatch that depends on them (the whole Semantic colors grid) renders + // blank/transparent instead of the resolved color. + $effect(() => { + injectLivePreview(overrides); + // registerPreviewDoc() bumps previewVersion itself (on both the + // first-registration and already-registered paths), so panels reading + // previewVersion.value re-resolve on every override change without a + // separate explicit bump here. + registerPreviewDoc(document); + }); // On desktop push page content left; on mobile the panel is a full overlay. $effect(() => { diff --git a/SLASHED-for-WP/assets/admin-app/app.css b/SLASHED-for-WP/assets/admin-app/app.css index d5022cff..91489731 100644 --- a/SLASHED-for-WP/assets/admin-app/app.css +++ b/SLASHED-for-WP/assets/admin-app/app.css @@ -1 +1 @@ -/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-orange-400:oklch(75% .183 55.934);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-900:oklch(37.8% .077 168.94);--color-teal-400:oklch(77.7% .152 181.912);--color-sky-400:oklch(74.6% .16 232.661);--color-blue-500:oklch(62.3% .214 259.815);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-violet-400:oklch(70.2% .183 293.541);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-pink-400:oklch(71.8% .202 349.761);--color-rose-300:oklch(81% .117 11.638);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-rose-800:oklch(45.5% .188 13.697);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-widest:.1em;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.-top-0\.5{top:calc(var(--spacing) * -.5)}.top-0{top:0}.top-0\.5{top:calc(var(--spacing) * .5)}.top-1{top:var(--spacing)}.top-2{top:calc(var(--spacing) * 2)}.-right-0\.5{right:calc(var(--spacing) * -.5)}.right-0{right:0}.right-0\.5{right:calc(var(--spacing) * .5)}.right-2{right:calc(var(--spacing) * 2)}.bottom-0{bottom:0}.bottom-2{bottom:calc(var(--spacing) * 2)}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.left-3{left:calc(var(--spacing) * 3)}.left-12{left:calc(var(--spacing) * 12)}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[100000\]{z-index:100000}.z-\[100001\]{z-index:100001}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mx-0\.5{margin-inline:calc(var(--spacing) * .5)}.mx-1{margin-inline:var(--spacing)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mx-auto{margin-inline:auto}.my-2{margin-block:calc(var(--spacing) * 2)}.-mt-px{margin-top:-1px}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-0\.5{margin-bottom:calc(var(--spacing) * .5)}.mb-1{margin-bottom:var(--spacing)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.ml-0\.5{margin-left:calc(var(--spacing) * .5)}.ml-1{margin-left:var(--spacing)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.list-item{display:list-item}.table{display:table}.h-1{height:var(--spacing)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-24{height:calc(var(--spacing) * 24)}.h-\[52px\]{height:52px}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-80{max-height:calc(var(--spacing) * 80)}.max-h-\[360px\]{max-height:360px}.min-h-0{min-height:0}.min-h-10{min-height:calc(var(--spacing) * 10)}.min-h-\[34px\]{min-height:34px}.w-0\.5{width:calc(var(--spacing) * .5)}.w-1{width:var(--spacing)}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-\[560px\]{width:560px}.w-full{width:100%}.w-px{width:1px}.w-screen{width:100vw}.max-w-28{max-width:calc(var(--spacing) * 28)}.max-w-\[95vw\]{max-width:95vw}.max-w-\[100px\]{max-width:100px}.max-w-\[320px\]{max-width:320px}.max-w-full{max-width:100%}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:0}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0{--tw-translate-x:0;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0\.5{--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-px{gap:1px}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-px>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(1px * var(--tw-space-y-reverse));margin-block-end:calc(1px * calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-l-xl{border-top-left-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl)}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-500{border-color:var(--color-amber-500)}.border-amber-500\/20{border-color:#f99c0033}@supports (color:color-mix(in lab,red,red)){.border-amber-500\/20{border-color:color-mix(in oklab,var(--color-amber-500) 20%,transparent)}}.border-emerald-500\/30{border-color:#00bb7f4d}@supports (color:color-mix(in lab,red,red)){.border-emerald-500\/30{border-color:color-mix(in oklab,var(--color-emerald-500) 30%,transparent)}}.border-indigo-400\/40{border-color:#7d87ff66}@supports (color:color-mix(in lab,red,red)){.border-indigo-400\/40{border-color:color-mix(in oklab,var(--color-indigo-400) 40%,transparent)}}.border-indigo-500{border-color:var(--color-indigo-500)}.border-indigo-500\/15{border-color:#625fff26}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/15{border-color:color-mix(in oklab,var(--color-indigo-500) 15%,transparent)}}.border-indigo-500\/20{border-color:#625fff33}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/20{border-color:color-mix(in oklab,var(--color-indigo-500) 20%,transparent)}}.border-indigo-500\/25{border-color:#625fff40}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/25{border-color:color-mix(in oklab,var(--color-indigo-500) 25%,transparent)}}.border-indigo-500\/30{border-color:#625fff4d}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/30{border-color:color-mix(in oklab,var(--color-indigo-500) 30%,transparent)}}.border-indigo-500\/40{border-color:#625fff66}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/40{border-color:color-mix(in oklab,var(--color-indigo-500) 40%,transparent)}}.border-indigo-500\/50{border-color:#625fff80}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/50{border-color:color-mix(in oklab,var(--color-indigo-500) 50%,transparent)}}.border-rose-500\/20{border-color:#ff235733}@supports (color:color-mix(in lab,red,red)){.border-rose-500\/20{border-color:color-mix(in oklab,var(--color-rose-500) 20%,transparent)}}.border-rose-500\/30{border-color:#ff23574d}@supports (color:color-mix(in lab,red,red)){.border-rose-500\/30{border-color:color-mix(in oklab,var(--color-rose-500) 30%,transparent)}}.border-white\/6{border-color:#ffffff0f}@supports (color:color-mix(in lab,red,red)){.border-white\/6{border-color:color-mix(in oklab,var(--color-white) 6%,transparent)}}.border-white\/8{border-color:#ffffff14}@supports (color:color-mix(in lab,red,red)){.border-white\/8{border-color:color-mix(in oklab,var(--color-white) 8%,transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.border-white\/10{border-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.border-white\/12{border-color:#ffffff1f}@supports (color:color-mix(in lab,red,red)){.border-white\/12{border-color:color-mix(in oklab,var(--color-white) 12%,transparent)}}.border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab,red,red)){.border-white\/20{border-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.border-t-indigo-500{border-top-color:var(--color-indigo-500)}.bg-\[\#0a0a0f\]{background-color:#0a0a0f}.bg-\[\#0a0a10\]{background-color:#0a0a10}.bg-\[\#0c0c15\]{background-color:#0c0c15}.bg-\[\#0d0d14\]{background-color:#0d0d14}.bg-\[\#1a1a2e\]{background-color:#1a1a2e}.bg-\[\#06060a\]{background-color:#06060a}.bg-\[\#07070b\]{background-color:#07070b}.bg-\[\#09090e\]{background-color:#09090e}.bg-\[\#111118\]{background-color:#111118}.bg-amber-400{background-color:var(--color-amber-400)}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab,red,red)){.bg-amber-500\/10{background-color:color-mix(in oklab,var(--color-amber-500) 10%,transparent)}}.bg-amber-500\/20{background-color:#f99c0033}@supports (color:color-mix(in lab,red,red)){.bg-amber-500\/20{background-color:color-mix(in oklab,var(--color-amber-500) 20%,transparent)}}.bg-amber-600{background-color:var(--color-amber-600)}.bg-amber-600\/40{background-color:#dd740066}@supports (color:color-mix(in lab,red,red)){.bg-amber-600\/40{background-color:color-mix(in oklab,var(--color-amber-600) 40%,transparent)}}.bg-black\/30{background-color:#0000004d}@supports (color:color-mix(in lab,red,red)){.bg-black\/30{background-color:color-mix(in oklab,var(--color-black) 30%,transparent)}}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab,red,red)){.bg-black\/60{background-color:color-mix(in oklab,var(--color-black) 60%,transparent)}}.bg-blue-500\/30{background-color:#3080ff4d}@supports (color:color-mix(in lab,red,red)){.bg-blue-500\/30{background-color:color-mix(in oklab,var(--color-blue-500) 30%,transparent)}}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-emerald-500\/15{background-color:#00bb7f26}@supports (color:color-mix(in lab,red,red)){.bg-emerald-500\/15{background-color:color-mix(in oklab,var(--color-emerald-500) 15%,transparent)}}.bg-emerald-500\/20{background-color:#00bb7f33}@supports (color:color-mix(in lab,red,red)){.bg-emerald-500\/20{background-color:color-mix(in oklab,var(--color-emerald-500) 20%,transparent)}}.bg-emerald-500\/25{background-color:#00bb7f40}@supports (color:color-mix(in lab,red,red)){.bg-emerald-500\/25{background-color:color-mix(in oklab,var(--color-emerald-500) 25%,transparent)}}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-emerald-900\/40{background-color:#004e3b66}@supports (color:color-mix(in lab,red,red)){.bg-emerald-900\/40{background-color:color-mix(in oklab,var(--color-emerald-900) 40%,transparent)}}.bg-indigo-400{background-color:var(--color-indigo-400)}.bg-indigo-400\/40{background-color:#7d87ff66}@supports (color:color-mix(in lab,red,red)){.bg-indigo-400\/40{background-color:color-mix(in oklab,var(--color-indigo-400) 40%,transparent)}}.bg-indigo-400\/50{background-color:#7d87ff80}@supports (color:color-mix(in lab,red,red)){.bg-indigo-400\/50{background-color:color-mix(in oklab,var(--color-indigo-400) 50%,transparent)}}.bg-indigo-500{background-color:var(--color-indigo-500)}.bg-indigo-500\/8{background-color:#625fff14}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/8{background-color:color-mix(in oklab,var(--color-indigo-500) 8%,transparent)}}.bg-indigo-500\/10{background-color:#625fff1a}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/10{background-color:color-mix(in oklab,var(--color-indigo-500) 10%,transparent)}}.bg-indigo-500\/15{background-color:#625fff26}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/15{background-color:color-mix(in oklab,var(--color-indigo-500) 15%,transparent)}}.bg-indigo-500\/20{background-color:#625fff33}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/20{background-color:color-mix(in oklab,var(--color-indigo-500) 20%,transparent)}}.bg-indigo-500\/30{background-color:#625fff4d}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/30{background-color:color-mix(in oklab,var(--color-indigo-500) 30%,transparent)}}.bg-indigo-500\/40{background-color:#625fff66}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/40{background-color:color-mix(in oklab,var(--color-indigo-500) 40%,transparent)}}.bg-indigo-500\/50{background-color:#625fff80}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/50{background-color:color-mix(in oklab,var(--color-indigo-500) 50%,transparent)}}.bg-indigo-500\/70{background-color:#625fffb3}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/70{background-color:color-mix(in oklab,var(--color-indigo-500) 70%,transparent)}}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-indigo-600\/10{background-color:#4f39f61a}@supports (color:color-mix(in lab,red,red)){.bg-indigo-600\/10{background-color:color-mix(in oklab,var(--color-indigo-600) 10%,transparent)}}.bg-indigo-600\/15{background-color:#4f39f626}@supports (color:color-mix(in lab,red,red)){.bg-indigo-600\/15{background-color:color-mix(in oklab,var(--color-indigo-600) 15%,transparent)}}.bg-indigo-600\/20{background-color:#4f39f633}@supports (color:color-mix(in lab,red,red)){.bg-indigo-600\/20{background-color:color-mix(in oklab,var(--color-indigo-600) 20%,transparent)}}.bg-indigo-600\/25{background-color:#4f39f640}@supports (color:color-mix(in lab,red,red)){.bg-indigo-600\/25{background-color:color-mix(in oklab,var(--color-indigo-600) 25%,transparent)}}.bg-indigo-600\/30{background-color:#4f39f64d}@supports (color:color-mix(in lab,red,red)){.bg-indigo-600\/30{background-color:color-mix(in oklab,var(--color-indigo-600) 30%,transparent)}}.bg-purple-500\/40{background-color:#ac4bff66}@supports (color:color-mix(in lab,red,red)){.bg-purple-500\/40{background-color:color-mix(in oklab,var(--color-purple-500) 40%,transparent)}}.bg-rose-500\/20{background-color:#ff235733}@supports (color:color-mix(in lab,red,red)){.bg-rose-500\/20{background-color:color-mix(in oklab,var(--color-rose-500) 20%,transparent)}}.bg-rose-600{background-color:var(--color-rose-600)}.bg-rose-800{background-color:var(--color-rose-800)}.bg-rose-800\/40{background-color:#a3003766}@supports (color:color-mix(in lab,red,red)){.bg-rose-800\/40{background-color:color-mix(in oklab,var(--color-rose-800) 40%,transparent)}}.bg-slate-500{background-color:var(--color-slate-500)}.bg-slate-600\/60{background-color:#45556c99}@supports (color:color-mix(in lab,red,red)){.bg-slate-600\/60{background-color:color-mix(in oklab,var(--color-slate-600) 60%,transparent)}}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/3{background-color:#ffffff08}@supports (color:color-mix(in lab,red,red)){.bg-white\/3{background-color:color-mix(in oklab,var(--color-white) 3%,transparent)}}.bg-white\/4{background-color:#ffffff0a}@supports (color:color-mix(in lab,red,red)){.bg-white\/4{background-color:color-mix(in oklab,var(--color-white) 4%,transparent)}}.bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab,red,red)){.bg-white\/5{background-color:color-mix(in oklab,var(--color-white) 5%,transparent)}}.bg-white\/6{background-color:#ffffff0f}@supports (color:color-mix(in lab,red,red)){.bg-white\/6{background-color:color-mix(in oklab,var(--color-white) 6%,transparent)}}.bg-white\/8{background-color:#ffffff14}@supports (color:color-mix(in lab,red,red)){.bg-white\/8{background-color:color-mix(in oklab,var(--color-white) 8%,transparent)}}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.bg-white\/10{background-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.bg-white\/12{background-color:#ffffff1f}@supports (color:color-mix(in lab,red,red)){.bg-white\/12{background-color:color-mix(in oklab,var(--color-white) 12%,transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab,red,red)){.bg-white\/20{background-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-indigo-600\/20{--tw-gradient-from:#4f39f633}@supports (color:color-mix(in lab,red,red)){.from-indigo-600\/20{--tw-gradient-from:color-mix(in oklab, var(--color-indigo-600) 20%, transparent)}}.from-indigo-600\/20{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-purple-600\/10{--tw-gradient-to:#9810fa1a}@supports (color:color-mix(in lab,red,red)){.to-purple-600\/10{--tw-gradient-to:color-mix(in oklab, var(--color-purple-600) 10%, transparent)}}.to-purple-600\/10{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-0\.5{padding-inline:calc(var(--spacing) * .5)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-8{padding-block:calc(var(--spacing) * 8)}.pt-0\.5{padding-top:calc(var(--spacing) * .5)}.pt-1{padding-top:var(--spacing)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-\[15vh\]{padding-top:15vh}.pr-2{padding-right:calc(var(--spacing) * 2)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pl-1{padding-left:var(--spacing)}.pl-2{padding-left:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[6px\]{font-size:6px}.text-\[7px\]{font-size:7px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-\[26px\]{font-size:26px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-300{color:var(--color-amber-300)}.text-amber-400{color:var(--color-amber-400)}.text-amber-500\/80{color:#f99c00cc}@supports (color:color-mix(in lab,red,red)){.text-amber-500\/80{color:color-mix(in oklab,var(--color-amber-500) 80%,transparent)}}.text-emerald-200{color:var(--color-emerald-200)}.text-emerald-300{color:var(--color-emerald-300)}.text-emerald-400{color:var(--color-emerald-400)}.text-indigo-200{color:var(--color-indigo-200)}.text-indigo-300{color:var(--color-indigo-300)}.text-indigo-400{color:var(--color-indigo-400)}.text-indigo-400\/60{color:#7d87ff99}@supports (color:color-mix(in lab,red,red)){.text-indigo-400\/60{color:color-mix(in oklab,var(--color-indigo-400) 60%,transparent)}}.text-indigo-400\/70{color:#7d87ffb3}@supports (color:color-mix(in lab,red,red)){.text-indigo-400\/70{color:color-mix(in oklab,var(--color-indigo-400) 70%,transparent)}}.text-orange-400{color:var(--color-orange-400)}.text-pink-400{color:var(--color-pink-400)}.text-rose-300{color:var(--color-rose-300)}.text-rose-400{color:var(--color-rose-400)}.text-sky-400{color:var(--color-sky-400)}.text-slate-100{color:var(--color-slate-100)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-teal-400{color:var(--color-teal-400)}.text-violet-400{color:var(--color-violet-400)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab,red,red)){.text-white\/70{color:color-mix(in oklab,var(--color-white) 70%,transparent)}}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab,red,red)){.text-white\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.text-white\/85{color:#ffffffd9}@supports (color:color-mix(in lab,red,red)){.text-white\/85{color:color-mix(in oklab,var(--color-white) 85%,transparent)}}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.italic{font-style:italic}.proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.placeholder-slate-600::placeholder{color:var(--color-slate-600)}.accent-indigo-500{accent-color:var(--color-indigo-500)}.opacity-0{opacity:0}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-70{opacity:.7}.opacity-90{opacity:.9}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-black\/60{--tw-shadow-color:#0009}@supports (color:color-mix(in lab,red,red)){.shadow-black\/60{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-black) 60%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-emerald-600\/30{--tw-shadow-color:#0097674d}@supports (color:color-mix(in lab,red,red)){.shadow-emerald-600\/30{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-emerald-600) 30%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-indigo-600\/30{--tw-shadow-color:#4f39f64d}@supports (color:color-mix(in lab,red,red)){.shadow-indigo-600\/30{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-indigo-600) 30%, transparent) var(--tw-shadow-alpha), transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.delay-5{transition-delay:5ms}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.group-hover\:text-slate-300:is(:where(.group):hover *){color:var(--color-slate-300)}.group-hover\:text-slate-500:is(:where(.group):hover *){color:var(--color-slate-500)}.group-hover\:text-white:is(:where(.group):hover *){color:var(--color-white)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\:text-slate-500::placeholder{color:var(--color-slate-500)}.placeholder\:text-slate-600::placeholder{color:var(--color-slate-600)}@media(hover:hover){.hover\:border-rose-500\/30:hover{border-color:#ff23574d}@supports (color:color-mix(in lab,red,red)){.hover\:border-rose-500\/30:hover{border-color:color-mix(in oklab,var(--color-rose-500) 30%,transparent)}}.hover\:border-white\/12:hover{border-color:#ffffff1f}@supports (color:color-mix(in lab,red,red)){.hover\:border-white\/12:hover{border-color:color-mix(in oklab,var(--color-white) 12%,transparent)}}.hover\:border-white\/14:hover{border-color:#ffffff24}@supports (color:color-mix(in lab,red,red)){.hover\:border-white\/14:hover{border-color:color-mix(in oklab,var(--color-white) 14%,transparent)}}.hover\:bg-emerald-500:hover{background-color:var(--color-emerald-500)}.hover\:bg-emerald-500\/10:hover{background-color:#00bb7f1a}@supports (color:color-mix(in lab,red,red)){.hover\:bg-emerald-500\/10:hover{background-color:color-mix(in oklab,var(--color-emerald-500) 10%,transparent)}}.hover\:bg-indigo-500:hover{background-color:var(--color-indigo-500)}.hover\:bg-indigo-500\/20:hover{background-color:#625fff33}@supports (color:color-mix(in lab,red,red)){.hover\:bg-indigo-500\/20:hover{background-color:color-mix(in oklab,var(--color-indigo-500) 20%,transparent)}}.hover\:bg-indigo-600\/25:hover{background-color:#4f39f640}@supports (color:color-mix(in lab,red,red)){.hover\:bg-indigo-600\/25:hover{background-color:color-mix(in oklab,var(--color-indigo-600) 25%,transparent)}}.hover\:bg-indigo-600\/30:hover{background-color:#4f39f64d}@supports (color:color-mix(in lab,red,red)){.hover\:bg-indigo-600\/30:hover{background-color:color-mix(in oklab,var(--color-indigo-600) 30%,transparent)}}.hover\:bg-indigo-600\/35:hover{background-color:#4f39f659}@supports (color:color-mix(in lab,red,red)){.hover\:bg-indigo-600\/35:hover{background-color:color-mix(in oklab,var(--color-indigo-600) 35%,transparent)}}.hover\:bg-rose-500:hover{background-color:var(--color-rose-500)}.hover\:bg-rose-500\/10:hover{background-color:#ff23571a}@supports (color:color-mix(in lab,red,red)){.hover\:bg-rose-500\/10:hover{background-color:color-mix(in oklab,var(--color-rose-500) 10%,transparent)}}.hover\:bg-white\/4:hover{background-color:#ffffff0a}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/4:hover{background-color:color-mix(in oklab,var(--color-white) 4%,transparent)}}.hover\:bg-white\/5:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/5:hover{background-color:color-mix(in oklab,var(--color-white) 5%,transparent)}}.hover\:bg-white\/6:hover{background-color:#ffffff0f}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/6:hover{background-color:color-mix(in oklab,var(--color-white) 6%,transparent)}}.hover\:bg-white\/8:hover{background-color:#ffffff14}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/8:hover{background-color:color-mix(in oklab,var(--color-white) 8%,transparent)}}.hover\:bg-white\/12:hover{background-color:#ffffff1f}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/12:hover{background-color:color-mix(in oklab,var(--color-white) 12%,transparent)}}.hover\:text-emerald-300:hover{color:var(--color-emerald-300)}.hover\:text-indigo-400:hover{color:var(--color-indigo-400)}.hover\:text-rose-300:hover{color:var(--color-rose-300)}.hover\:text-rose-400:hover{color:var(--color-rose-400)}.hover\:text-slate-200:hover{color:var(--color-slate-200)}.hover\:text-slate-300:hover{color:var(--color-slate-300)}.hover\:text-slate-400:hover{color:var(--color-slate-400)}.hover\:text-white:hover{color:var(--color-white)}.hover\:opacity-100:hover{opacity:1}}.focus\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\:opacity-100:focus{opacity:1}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-25:disabled{opacity:.25}.disabled\:opacity-40:disabled{opacity:.4}@media(min-width:40rem){.sm\:block{display:block}.sm\:inline{display:inline}.sm\:gap-3{gap:calc(var(--spacing) * 3)}.sm\:opacity-0{opacity:0}.sm\:group-focus-within\:opacity-100:is(:where(.group):focus-within *){opacity:1}@media(hover:hover){.sm\:group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}}@media(min-width:48rem){.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-\[360px\]{width:360px}.md\:flex-1{flex:1}.md\:flex-nowrap{flex-wrap:nowrap}.md\:py-0{padding-block:0}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}.clampRange.svelte-iy59wr{-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;margin:0}.clampRange.svelte-iy59wr::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:9999px;background:transparent;cursor:pointer;pointer-events:auto}.clampRange.svelte-iy59wr::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:9999px;background:transparent;cursor:pointer;pointer-events:auto}.clampRange.svelte-iy59wr::-moz-range-track{background:transparent}@layer slashed.tokens,slashed.reset,slashed.base,slashed.forms,slashed.layout,slashed.components,slashed.macros,slashed.utilities,slashed.states,slashed.themes,slashed.motion,slashed.accessibility,slashed.print,slashed.legacy,slashed.overrides;@layer slashed.tokens{@property --sf-color-primary-source-light{syntax: ""; inherits: true; initial-value: oklch(.47 .27 264);}@property --sf-color-secondary-source-light{syntax: ""; inherits: true; initial-value: oklch(.22 .04 264);}@property --sf-color-tertiary-source-light{syntax: ""; inherits: true; initial-value: oklch(.42 .22 295);}@property --sf-color-action-source-light{syntax: ""; inherits: true; initial-value: oklch(.5 .22 235);}@property --sf-color-neutral-source-light{syntax: ""; inherits: true; initial-value: oklch(.52 .025 260);}@property --sf-color-base-source-light{syntax: ""; inherits: true; initial-value: oklch(.96 .006 250);}@property --sf-color-success-source-light{syntax: ""; inherits: true; initial-value: oklch(.5 .16 145);}@property --sf-color-warning-source-light{syntax: ""; inherits: true; initial-value: oklch(.75 .17 80);}@property --sf-color-info-source-light{syntax: ""; inherits: true; initial-value: oklch(.48 .18 235);}@property --sf-color-danger-source-light{syntax: ""; inherits: true; initial-value: oklch(.48 .22 12);}:root{--sf-color-primary-source-light: oklch(.47 .27 264);--sf-color-secondary-source-light: oklch(.22 .04 264);--sf-color-tertiary-source-light: oklch(.42 .22 295);--sf-color-action-source-light: oklch(.5 .22 235);--sf-color-neutral-source-light: oklch(.52 .025 260);--sf-color-base-source-light: oklch(.96 .006 250);--sf-color-success-source-light: oklch(.5 .16 145);--sf-color-warning-source-light: oklch(.75 .17 80);--sf-color-info-source-light: oklch(.48 .18 235);--sf-color-danger-source-light: oklch(.48 .22 12)}@property --sf-color-primary-source-dark{syntax: ""; inherits: true; initial-value: oklch(.715 .243 264);}@property --sf-color-secondary-source-dark{syntax: ""; inherits: true; initial-value: oklch(.84 .036 264);}@property --sf-color-tertiary-source-dark{syntax: ""; inherits: true; initial-value: oklch(.74 .198 295);}@property --sf-color-action-source-dark{syntax: ""; inherits: true; initial-value: oklch(.7 .198 235);}@property --sf-color-neutral-source-dark{syntax: ""; inherits: true; initial-value: oklch(.69 .0225 260);}@property --sf-color-base-source-dark{syntax: ""; inherits: true; initial-value: oklch(.22 .003 250);}@property --sf-color-success-source-dark{syntax: ""; inherits: true; initial-value: oklch(.7 .144 145);}@property --sf-color-warning-source-dark{syntax: ""; inherits: true; initial-value: oklch(.65 .153 80);}@property --sf-color-info-source-dark{syntax: ""; inherits: true; initial-value: oklch(.71 .162 235);}@property --sf-color-danger-source-dark{syntax: ""; inherits: true; initial-value: oklch(.71 .198 12);}@property --sf-color-primary{syntax: ""; inherits: true; initial-value: oklch(.47 .27 264);}@property --sf-color-secondary{syntax: ""; inherits: true; initial-value: oklch(.22 .04 264);}@property --sf-color-tertiary{syntax: ""; inherits: true; initial-value: oklch(.42 .22 295);}@property --sf-color-action{syntax: ""; inherits: true; initial-value: oklch(.5 .22 235);}@property --sf-color-neutral{syntax: ""; inherits: true; initial-value: oklch(.52 .025 260);}@property --sf-color-base{syntax: ""; inherits: true; initial-value: oklch(.96 .006 250);}@property --sf-color-success{syntax: ""; inherits: true; initial-value: oklch(.5 .16 145);}@property --sf-color-warning{syntax: ""; inherits: true; initial-value: oklch(.75 .17 80);}@property --sf-color-info{syntax: ""; inherits: true; initial-value: oklch(.48 .18 235);}@property --sf-color-danger{syntax: ""; inherits: true; initial-value: oklch(.48 .22 12);}:root{--sf-color-primary: var(--sf-color-primary-source-light);--sf-color-secondary: var(--sf-color-secondary-source-light);--sf-color-tertiary: var(--sf-color-tertiary-source-light);--sf-color-action: var(--sf-color-action-source-light);--sf-color-neutral: var(--sf-color-neutral-source-light);--sf-color-base: var(--sf-color-base-source-light);--sf-color-success: var(--sf-color-success-source-light);--sf-color-warning: var(--sf-color-warning-source-light);--sf-color-info: var(--sf-color-info-source-light);--sf-color-danger: var(--sf-color-danger-source-light)}@property --sf-is-dark{syntax: ""; inherits: true; initial-value: 0;}@property --sf-is-active{syntax: ""; inherits: true; initial-value: 0;}@property --sf-is-current{syntax: ""; inherits: true; initial-value: 0;}@property --sf-is-pressed{syntax: ""; inherits: true; initial-value: 0;}@property --sf-is-open{syntax: ""; inherits: true; initial-value: 0;}@property --sf-fluid-min-vw{syntax: ""; inherits: true; initial-value: 22.5;}@property --sf-fluid-max-vw{syntax: ""; inherits: true; initial-value: 90;}@property --sf-text-ratio-min{syntax: ""; inherits: true; initial-value: 1.25;}@property --sf-text-ratio-max{syntax: ""; inherits: true; initial-value: 1.333;}@property --sf-text-base-min{syntax: ""; inherits: true; initial-value: 1;}@property --sf-text-base-max{syntax: ""; inherits: true; initial-value: 1.25;}@property --sf-text-display-base-min{syntax: ""; inherits: true; initial-value: 2.4;}@property --sf-text-display-base-max{syntax: ""; inherits: true; initial-value: 3;}@property --sf-space-ratio-min{syntax: ""; inherits: true; initial-value: 1.25;}@property --sf-space-ratio-max{syntax: ""; inherits: true; initial-value: 1.333;}@property --sf-space-base-min{syntax: ""; inherits: true; initial-value: 1;}@property --sf-space-base-max{syntax: ""; inherits: true; initial-value: 2;}@property --sf-radius-none{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-2xs{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-xs{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-s{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-m{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-l{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-2xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-3xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-4xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-full{syntax: ""; inherits: true; initial-value: 9999px;}@property --sf-radius-pill{syntax: ""; inherits: true; initial-value: 9999px;}@property --sf-radius-outer{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-none{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-px{syntax: ""; inherits: true; initial-value: 1px;}@property --sf-space-2xs{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-xs{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-s{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-m{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-l{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-2xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-3xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-4xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-gap{syntax: ""; inherits: true; initial-value: 0;}@property --sf-content-gap{syntax: ""; inherits: true; initial-value: 0;}@property --sf-gutter{syntax: ""; inherits: true; initial-value: 0;}@property --sf-component-pad{syntax: ""; inherits: true; initial-value: 0;}@property --sf-field-block{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--xs{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--s{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--m{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--l{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--2xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-shadow-none{syntax: "*"; inherits: true;}@property --sf-shadow-xs{syntax: "*"; inherits: true;}@property --sf-shadow-s{syntax: "*"; inherits: true;}@property --sf-shadow-m{syntax: "*"; inherits: true;}@property --sf-shadow-l{syntax: "*"; inherits: true;}@property --sf-shadow-xl{syntax: "*"; inherits: true;}@property --sf-shadow-2xl{syntax: "*"; inherits: true;}@property --sf-shadow-inner{syntax: "*"; inherits: true;}@property --sf-text-shadow-none{syntax: "*"; inherits: true;}@property --sf-text-shadow-s{syntax: "*"; inherits: true;}@property --sf-text-shadow-m{syntax: "*"; inherits: true;}@property --sf-text-shadow-l{syntax: "*"; inherits: true;}@property --sf-drop-shadow-s{syntax: "*"; inherits: true;}@property --sf-drop-shadow-m{syntax: "*"; inherits: true;}@property --sf-drop-shadow-l{syntax: "*"; inherits: true;}@property --sf-shadow-glow{syntax: "*"; inherits: true;}:root{--sf-fluid-min-vw: 22.5;--sf-fluid-max-vw: 90;--sf-text-ratio-min: 1.25;--sf-text-ratio-max: 1.333;--sf-text-base-min: 1;--sf-text-base-max: 1.25;--sf-text-display-base-min: 2.4;--sf-text-display-base-max: 3;--sf-space-ratio-min: 1.25;--sf-space-ratio-max: 1.333;--sf-space-base-min: 1;--sf-space-base-max: 2}:root{--sf-color-scheme: light dark;--sf-lumlocker: .65;--sf-color-surface: var(--sf-color-base);--sf-color-text--on-base: var(--sf-color-text);--sf-color-text--on-primary: oklch(.95 0 0);--sf-color-text--on-secondary: oklch(.95 0 0);--sf-color-text--on-tertiary: oklch(.95 0 0);--sf-color-text--on-action: oklch(.95 0 0);--sf-color-text--on-neutral: oklch(.95 0 0);--sf-color-text--on-success: oklch(.95 0 0);--sf-color-text--on-warning: oklch(.1 0 0);--sf-color-text--on-info: oklch(.95 0 0);--sf-color-text--on-danger: oklch(.95 0 0);--sf-color-text--on-inverse: oklch(.95 0 0);--sf-color-code-text: oklch(.1 0 0);--sf-color-border--focus: var(--sf-color-action);--sf-color-link--disabled: var(--sf-color-text--disabled);--sf-link-underline-offset: .15em;--sf-link-underline-thickness: auto;--sf-color-bg--disabled: var(--sf-color-inset);--sf-color-code-bg: var(--sf-color-inset);--sf-color-selection-text: inherit;--sf-color-mark-text: inherit;--sf-color-dim: oklch(0 0 0 / .5);--sf-color-white: oklch(100% 0 0);--sf-color-black: oklch(0% 0 0);--sf-scrollbar-thumb: var(--sf-color-neutral);--sf-scrollbar-track: transparent;--sf-shadow-strength: calc(.08 + var(--sf-is-dark) * .17);--sf-shadow-lightness: .15;--sf-shadow-glow-color: var(--sf-color-primary);--sf-opacity-disabled: .45;--sf-state-pending-opacity: .7;--sf-focus-ring-color: var(--sf-color-action);--sf-focus-ring-shadow: 0 0 0 var(--sf-focus-ring-offset) var(--sf-color-bg, var(--sf-color-base-source-light, #fff)), 0 0 0 calc(var(--sf-focus-ring-offset) + var(--sf-focus-ring-width)) var(--sf-focus-ring-color);--sf-caret-color: var(--sf-color-action)}@supports (color: light-dark(white,black)) and (color: oklch(from red l c h)){:root{--sf-color-primary: light-dark(var(--sf-color-primary-source-light), var(--sf-color-primary-source-dark, oklch(from var(--sf-color-primary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-secondary: light-dark(var(--sf-color-secondary-source-light), var(--sf-color-secondary-source-dark, oklch(from var(--sf-color-secondary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-tertiary: light-dark(var(--sf-color-tertiary-source-light), var(--sf-color-tertiary-source-dark, oklch(from var(--sf-color-tertiary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-action: light-dark(var(--sf-color-action-source-light), var(--sf-color-action-source-dark, oklch(from var(--sf-color-action-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-neutral: light-dark(var(--sf-color-neutral-source-light), var(--sf-color-neutral-source-dark, oklch(from var(--sf-color-neutral-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-base: light-dark(var(--sf-color-base-source-light), var(--sf-color-base-source-dark, oklch(from var(--sf-color-base-source-light) clamp(.16, calc(1.18 - l) , .24) calc(c/2) h)));--sf-color-success: light-dark(var(--sf-color-success-source-light), var(--sf-color-success-source-dark, oklch(from var(--sf-color-success-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-warning: light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-info: light-dark(var(--sf-color-info-source-light), var(--sf-color-info-source-dark, oklch(from var(--sf-color-info-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-danger: light-dark(var(--sf-color-danger-source-light), var(--sf-color-danger-source-dark, oklch(from var(--sf-color-danger-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-text: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.05, calc(l - .4 - var(--sf-contrast-bias)), .35) c h), oklch(from var(--sf-color-neutral) clamp(.7, calc(l + .25 + var(--sf-contrast-bias)), 1) c h) );--sf-color-text--muted: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.35, calc(l - var(--sf-contrast-bias)), .62) c h), oklch(from var(--sf-color-neutral) clamp(.48, calc(l + var(--sf-contrast-bias)), .74) c h) );--sf-color-text--secondary: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.15, calc(l - .25 - var(--sf-contrast-bias)), .45) c h), oklch(from var(--sf-color-neutral) clamp(.55, calc(l + .1 + var(--sf-contrast-bias)), .9) c h) );--sf-color-text--placeholder: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.45, calc(l + .15) , .75) c h), oklch(from var(--sf-color-neutral) clamp(.35, calc(l - .1) , .65) c h) );--sf-color-text--disabled: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.55, calc(l + .25) , .82) c h), oklch(from var(--sf-color-neutral) clamp(.25, calc(l - .2) , .55) c h) );--sf-color-text--inverse: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.85, calc(l + .4) , .98) c h), oklch(from var(--sf-color-neutral) clamp(.05, calc(l - .4) , .35) c h) );--sf-color-heading: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.05, calc(l - .4 - var(--sf-contrast-bias)), .35) c h), oklch(from var(--sf-color-neutral) clamp(.7, calc(l + .25 + var(--sf-contrast-bias)), 1) c h) );--sf-color-border: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.7, calc(l + .35) , .95) .005 h), oklch(from var(--sf-color-neutral) clamp(.25, calc(l - .3) , .55) .005 h) );--sf-color-border--subtle: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.75, calc(l + .4) , .97) .005 h), oklch(from var(--sf-color-neutral) clamp(.2, calc(l - .38) , .45) .005 h) );--sf-color-border--strong: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.55, calc(l + .1) , .85) .02 h), oklch(from var(--sf-color-neutral) clamp(.38, calc(l - .1) , .65) .02 h) );--sf-color-link: light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - .07, .48), 1) c h), oklch(from var(--sf-color-action) clamp(.68, l, 1) c h) );--sf-color-link--hover: light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - .15, .4), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + .1, .68), 1) c h) );--sf-color-link--active: light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - .21, .34), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + .15, .74), 1) c h) );--sf-color-link--visited: light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - .07, .48), 1) c calc(h + 60) ), oklch(from var(--sf-color-action) clamp(.68, l, 1) c calc(h + 60) ) );--sf-color-selection-bg: light-dark( oklch(from var(--sf-color-action-source-light) l c h / .28), oklch(from var(--sf-color-action-source-dark) clamp(.62, calc(.93 - (l*.4)) , .78) c h / .55) );--sf-color-success-strong: light-dark( oklch(from var(--sf-color-success-source-light) calc(l - .15) c h), oklch(from var(--sf-color-success) clamp(.7, calc(l + .15) , 1) c h) );--sf-color-warning-strong: light-dark( oklch(from var(--sf-color-warning-source-light) calc(l - .25) c h), oklch(from var(--sf-color-warning) clamp(.7, calc(l + .05) , 1) c h) );--sf-color-info-strong: light-dark( oklch(from var(--sf-color-info-source-light) calc(l - .1) c h), oklch(from var(--sf-color-info) clamp(.7, calc(l + .15) , 1) c h) );--sf-color-danger-strong: light-dark( oklch(from var(--sf-color-danger-source-light) calc(l - .1) c h), oklch(from var(--sf-color-danger) clamp(.7, calc(l + .15) , 1) c h) )}}@supports (color: oklch(from red l c h)){:root{--sf-color-bg: oklch(from var(--sf-color-base) calc(l + .02) c h);--sf-color-inset: oklch(from var(--sf-color-base) calc(l - .02) c h);--sf-color-raised: oklch(from var(--sf-color-base) calc(l + .04) c h);--sf-color-overlay: oklch(from var(--sf-color-base) l c h / .9);--sf-color-inverse: oklch(from var(--sf-color-base) calc(1 - l) c h);--sf-color-border--disabled: oklch(from var(--sf-color-border--subtle) l 0 h / .5);--sf-color-border--translucent: oklch(from var(--sf-color-neutral) l c h / .15);--sf-color-link--underline: oklch(from var(--sf-color-action) l c h / .3);--sf-color-bg--hover: oklch(from var(--sf-color-neutral) l c h / .08);--sf-color-bg--active: oklch(from var(--sf-color-neutral) l c h / .12);--sf-color-bg--selected: oklch(from var(--sf-color-action) l c h / .1);--sf-color-bg--focus: oklch(from var(--sf-color-action) l c h / .06);--sf-color-mark-bg: oklch(from var(--sf-color-warning) l c h / .25);--sf-color-success-subtle: oklch(from var(--sf-color-success) l c h / .12);--sf-color-success-muted: oklch(from var(--sf-color-success) l c h / .3);--sf-color-warning-subtle: oklch(from var(--sf-color-warning) l c h / .12);--sf-color-warning-muted: oklch(from var(--sf-color-warning) l c h / .3);--sf-color-info-subtle: oklch(from var(--sf-color-info) l c h / .1);--sf-color-info-muted: oklch(from var(--sf-color-info) l c h / .3);--sf-color-danger-subtle: oklch(from var(--sf-color-danger) l c h / .1);--sf-color-danger-muted: oklch(from var(--sf-color-danger) l c h / .3);--sf-gradient-primary: linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - .08) c h));--sf-gradient-secondary: linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - .08) c h));--sf-gradient-tertiary: linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - .08) c h));--sf-gradient-brand: linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30) ));--sf-gradient-surface: linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg));--sf-gradient-fade--r: linear-gradient(in oklch to right, transparent, var(--sf-color-bg));--sf-gradient-fade--l: linear-gradient(in oklch to left, transparent, var(--sf-color-bg));--sf-gradient-fade--t: linear-gradient(in oklch to top, transparent, var(--sf-color-bg));--sf-gradient-fade--b: linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg));--sf-shadow-glow: 0 0 15px 2px oklch(from var(--sf-shadow-glow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7))}}@supports (color: oklch(from red l c h)) and (width: calc(1px*sign(1))){:root{--sf-color-code-text: oklch(from var(--sf-color-code-bg) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-primary: oklch(from var(--sf-color-primary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-secondary: oklch(from var(--sf-color-secondary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-tertiary: oklch(from var(--sf-color-tertiary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-action: oklch(from var(--sf-color-action) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-neutral: oklch(from var(--sf-color-neutral) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-success: oklch(from var(--sf-color-success) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-warning: oklch(from var(--sf-color-warning) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-info: oklch(from var(--sf-color-info) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-danger: oklch(from var(--sf-color-danger) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-inverse: oklch(from var(--sf-color-inverse) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0)}}@supports (color: oklch(from red l c h)){:root{--sf-palette-mix-50: 4%;--sf-palette-mix-100: 8%;--sf-palette-mix-200: 20%;--sf-palette-mix-300: 40%;--sf-palette-mix-400: 65%;--sf-palette-mix-600: 82%;--sf-palette-mix-700: 62%;--sf-palette-mix-800: 38%;--sf-palette-mix-900: 18%;--sf-palette-mix-950: 8%;--sf-color-primary-50: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-50), var(--sf-color-surface));--sf-color-primary-100: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-100), var(--sf-color-surface));--sf-color-primary-200: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-200), var(--sf-color-surface));--sf-color-primary-300: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-300), var(--sf-color-surface));--sf-color-primary-400: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-400), var(--sf-color-surface));--sf-color-primary-500: var(--sf-color-primary);--sf-color-primary-600: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-600), var(--sf-color-text));--sf-color-primary-700: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-700), var(--sf-color-text));--sf-color-primary-800: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-800), var(--sf-color-text));--sf-color-primary-900: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-900), var(--sf-color-text));--sf-color-primary-950: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-950), var(--sf-color-text));--sf-color-primary-a5: oklch(from var(--sf-color-primary) l c h / .05);--sf-color-primary-a10: oklch(from var(--sf-color-primary) l c h / .1);--sf-color-primary-a30: oklch(from var(--sf-color-primary) l c h / .3);--sf-color-primary-a50: oklch(from var(--sf-color-primary) l c h / .5);--sf-color-primary-a80: oklch(from var(--sf-color-primary) l c h / .8);--sf-color-primary-superlight: var(--sf-color-primary-50);--sf-color-primary-xlight: var(--sf-color-primary-200);--sf-color-primary-lighter: var(--sf-color-primary-400);--sf-color-primary-darker: var(--sf-color-primary-600);--sf-color-primary-xdark: var(--sf-color-primary-800);--sf-color-primary-superdark: var(--sf-color-primary-950);--sf-color-primary--hover: var(--sf-color-primary-darker);--sf-color-primary--active: var(--sf-color-primary-xdark);--sf-color-primary-subtle: var(--sf-color-primary-a10);--sf-color-primary-muted: var(--sf-color-primary-a30);--sf-color-primary-ghost: var(--sf-color-primary-a5);--sf-color-secondary-50: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-50), var(--sf-color-surface));--sf-color-secondary-100: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-100), var(--sf-color-surface));--sf-color-secondary-200: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-200), var(--sf-color-surface));--sf-color-secondary-300: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-300), var(--sf-color-surface));--sf-color-secondary-400: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-400), var(--sf-color-surface));--sf-color-secondary-500: var(--sf-color-secondary);--sf-color-secondary-600: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-600), var(--sf-color-text));--sf-color-secondary-700: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-700), var(--sf-color-text));--sf-color-secondary-800: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-800), var(--sf-color-text));--sf-color-secondary-900: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-900), var(--sf-color-text));--sf-color-secondary-950: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-950), var(--sf-color-text));--sf-color-secondary-a5: oklch(from var(--sf-color-secondary) l c h / .05);--sf-color-secondary-a10: oklch(from var(--sf-color-secondary) l c h / .1);--sf-color-secondary-a30: oklch(from var(--sf-color-secondary) l c h / .3);--sf-color-secondary-a50: oklch(from var(--sf-color-secondary) l c h / .5);--sf-color-secondary-a80: oklch(from var(--sf-color-secondary) l c h / .8);--sf-color-secondary-superlight: var(--sf-color-secondary-50);--sf-color-secondary-xlight: var(--sf-color-secondary-200);--sf-color-secondary-lighter: var(--sf-color-secondary-400);--sf-color-secondary-darker: var(--sf-color-secondary-600);--sf-color-secondary-xdark: var(--sf-color-secondary-800);--sf-color-secondary-superdark: var(--sf-color-secondary-950);--sf-color-secondary--hover: var(--sf-color-secondary-darker);--sf-color-secondary--active: var(--sf-color-secondary-xdark);--sf-color-secondary-subtle: var(--sf-color-secondary-a10);--sf-color-secondary-muted: var(--sf-color-secondary-a30);--sf-color-secondary-ghost: var(--sf-color-secondary-a5);--sf-color-tertiary-50: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-50), var(--sf-color-surface));--sf-color-tertiary-100: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-100), var(--sf-color-surface));--sf-color-tertiary-200: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-200), var(--sf-color-surface));--sf-color-tertiary-300: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-300), var(--sf-color-surface));--sf-color-tertiary-400: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-400), var(--sf-color-surface));--sf-color-tertiary-500: var(--sf-color-tertiary);--sf-color-tertiary-600: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-600), var(--sf-color-text));--sf-color-tertiary-700: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-700), var(--sf-color-text));--sf-color-tertiary-800: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-800), var(--sf-color-text));--sf-color-tertiary-900: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-900), var(--sf-color-text));--sf-color-tertiary-950: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-950), var(--sf-color-text));--sf-color-tertiary-a5: oklch(from var(--sf-color-tertiary) l c h / .05);--sf-color-tertiary-a10: oklch(from var(--sf-color-tertiary) l c h / .1);--sf-color-tertiary-a30: oklch(from var(--sf-color-tertiary) l c h / .3);--sf-color-tertiary-a50: oklch(from var(--sf-color-tertiary) l c h / .5);--sf-color-tertiary-a80: oklch(from var(--sf-color-tertiary) l c h / .8);--sf-color-tertiary-superlight: var(--sf-color-tertiary-50);--sf-color-tertiary-xlight: var(--sf-color-tertiary-200);--sf-color-tertiary-lighter: var(--sf-color-tertiary-400);--sf-color-tertiary-darker: var(--sf-color-tertiary-600);--sf-color-tertiary-xdark: var(--sf-color-tertiary-800);--sf-color-tertiary-superdark: var(--sf-color-tertiary-950);--sf-color-tertiary--hover: var(--sf-color-tertiary-darker);--sf-color-tertiary--active: var(--sf-color-tertiary-xdark);--sf-color-tertiary-subtle: var(--sf-color-tertiary-a10);--sf-color-tertiary-muted: var(--sf-color-tertiary-a30);--sf-color-tertiary-ghost: var(--sf-color-tertiary-a5);--sf-color-action-50: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-50), var(--sf-color-surface));--sf-color-action-100: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-100), var(--sf-color-surface));--sf-color-action-200: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-200), var(--sf-color-surface));--sf-color-action-300: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-300), var(--sf-color-surface));--sf-color-action-400: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-400), var(--sf-color-surface));--sf-color-action-500: var(--sf-color-action);--sf-color-action-600: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-600), var(--sf-color-text));--sf-color-action-700: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-700), var(--sf-color-text));--sf-color-action-800: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-800), var(--sf-color-text));--sf-color-action-900: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-900), var(--sf-color-text));--sf-color-action-950: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-950), var(--sf-color-text));--sf-color-action-a5: oklch(from var(--sf-color-action) l c h / .05);--sf-color-action-a10: oklch(from var(--sf-color-action) l c h / .1);--sf-color-action-a30: oklch(from var(--sf-color-action) l c h / .3);--sf-color-action-a50: oklch(from var(--sf-color-action) l c h / .5);--sf-color-action-a80: oklch(from var(--sf-color-action) l c h / .8);--sf-color-action-superlight: var(--sf-color-action-50);--sf-color-action-xlight: var(--sf-color-action-200);--sf-color-action-lighter: var(--sf-color-action-400);--sf-color-action-darker: var(--sf-color-action-600);--sf-color-action-xdark: var(--sf-color-action-800);--sf-color-action-superdark: var(--sf-color-action-950);--sf-color-action--hover: var(--sf-color-action-darker);--sf-color-action--active: var(--sf-color-action-xdark);--sf-color-action-subtle: var(--sf-color-action-a10);--sf-color-action-muted: var(--sf-color-action-a30);--sf-color-action-ghost: var(--sf-color-action-a5);--sf-color-neutral-50: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-50), var(--sf-color-surface));--sf-color-neutral-100: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-100), var(--sf-color-surface));--sf-color-neutral-200: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-200), var(--sf-color-surface));--sf-color-neutral-300: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-300), var(--sf-color-surface));--sf-color-neutral-400: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-400), var(--sf-color-surface));--sf-color-neutral-500: var(--sf-color-neutral);--sf-color-neutral-600: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-600), var(--sf-color-text));--sf-color-neutral-700: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-700), var(--sf-color-text));--sf-color-neutral-800: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-800), var(--sf-color-text));--sf-color-neutral-900: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-900), var(--sf-color-text));--sf-color-neutral-950: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-950), var(--sf-color-text));--sf-color-neutral-a5: oklch(from var(--sf-color-neutral) l c h / .05);--sf-color-neutral-a10: oklch(from var(--sf-color-neutral) l c h / .1);--sf-color-neutral-a30: oklch(from var(--sf-color-neutral) l c h / .3);--sf-color-neutral-a50: oklch(from var(--sf-color-neutral) l c h / .5);--sf-color-neutral-a80: oklch(from var(--sf-color-neutral) l c h / .8);--sf-color-neutral-superlight: var(--sf-color-neutral-50);--sf-color-neutral-xlight: var(--sf-color-neutral-200);--sf-color-neutral-lighter: var(--sf-color-neutral-400);--sf-color-neutral-darker: var(--sf-color-neutral-600);--sf-color-neutral-xdark: var(--sf-color-neutral-800);--sf-color-neutral-superdark: var(--sf-color-neutral-950);--sf-color-neutral--hover: var(--sf-color-neutral-darker);--sf-color-neutral--active: var(--sf-color-neutral-xdark);--sf-color-neutral-subtle: var(--sf-color-neutral-a10);--sf-color-neutral-muted: var(--sf-color-neutral-a30);--sf-color-neutral-ghost: var(--sf-color-neutral-a5);--sf-color-base-50: oklch(from var(--sf-color-base) .97 c h);--sf-color-base-100: oklch(from var(--sf-color-base) .94 c h);--sf-color-base-200: oklch(from var(--sf-color-base) .88 c h);--sf-color-base-300: oklch(from var(--sf-color-base) .78 c h);--sf-color-base-400: oklch(from var(--sf-color-base) .65 c h);--sf-color-base-500: oklch(from var(--sf-color-base) .5 c h);--sf-color-base-600: oklch(from var(--sf-color-base) .37 c h);--sf-color-base-700: oklch(from var(--sf-color-base) .27 c h);--sf-color-base-800: oklch(from var(--sf-color-base) .17 c h);--sf-color-base-900: oklch(from var(--sf-color-base) .11 c h);--sf-color-base-950: oklch(from var(--sf-color-base) .06 c h);--sf-color-base-a5: oklch(from var(--sf-color-base) l c h / .05);--sf-color-base-a10: oklch(from var(--sf-color-base) l c h / .1);--sf-color-base-a30: oklch(from var(--sf-color-base) l c h / .3);--sf-color-base-a50: oklch(from var(--sf-color-base) l c h / .5);--sf-color-base-a80: oklch(from var(--sf-color-base) l c h / .8);--sf-color-base--hover: oklch(from var(--sf-color-base) clamp(.01, calc(l - .04 + var(--sf-is-dark) * .08), .99) c h);--sf-color-base--active: oklch(from var(--sf-color-base) clamp(.01, calc(l - .08 + var(--sf-is-dark) * .16), .99) c h);--sf-color-base-subtle: var(--sf-color-base-a10);--sf-color-base-muted: var(--sf-color-base-a30);--sf-color-base-ghost: var(--sf-color-base-a5)}}:root{--sf-space-scale: 1;--sf-text-scale: 1;--sf-text-display-scale: 1;--sf-radius-scale: 1;--sf-motion-scale: 1;--sf-section-scale: 1;--sf-font-body: system-ui, -apple-system, sans-serif;--sf-font-heading: var(--sf-font-body);--sf-font-display: var(--sf-font-heading);--sf-font-mono: ui-monospace, monospace;--sf-font-humanist: "Seravek", "Gill Sans Nova", "Ubuntu", "Calibri", "DejaVu Sans", source-sans-pro, sans-serif;--sf-font-geometric: "Avenir", "Montserrat", "Corbel", "URW Gothic", source-sans-pro, sans-serif;--sf-font-slab: "Rockwell", "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;--sf-font-features: normal;--sf-font-variation: normal;--sf-optical-sizing: auto;--sf-font-weight-light: 300;--sf-font-weight-normal: 400;--sf-font-weight-medium: 500;--sf-font-weight-semibold: 600;--sf-font-weight-bold: 700;--sf-font-weight-body: var(--sf-font-weight-normal);--sf-font-weight-heading: var(--sf-font-weight-semibold);--sf-font-weight-display: var(--sf-font-weight-bold);--sf-font-weight-interactive: var(--sf-font-weight-semibold);--sf-font-weight-strong: var(--sf-font-weight-bold);--sf-current-font-weight: var(--sf-font-weight-bold);--sf-text-2xs: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) * 1rem)) * var(--sf-text-scale));--sf-text-xs: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) * 1rem)) * var(--sf-text-scale));--sf-text-s: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) * 1rem)) * var(--sf-text-scale));--sf-text-m: calc(clamp(calc(var(--sf-text-base-min) * 1rem), calc((var(--sf-text-base-max) - var(--sf-text-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * 1rem), calc(var(--sf-text-base-max) * 1rem)) * var(--sf-text-scale));--sf-text-l: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-scale));--sf-text-xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-scale));--sf-text-2xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) * 1rem)) * var(--sf-text-scale));--sf-text-3xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) * 1rem)) * var(--sf-text-scale));--sf-text-4xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) * 1rem)) * var(--sf-text-scale));--sf-text-display-s: calc(clamp(calc(var(--sf-text-display-base-min) * 1rem), calc((var(--sf-text-display-base-max) - var(--sf-text-display-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * 1rem), calc(var(--sf-text-display-base-max) * 1rem)) * var(--sf-text-display-scale));--sf-text-display-m: calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-display-scale));--sf-text-display-l: calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-display-scale));--sf-leading-tight: 1.1;--sf-leading-snug: 1.3;--sf-leading-normal: 1.5;--sf-leading-relaxed: 1.625;--sf-leading-taper: 0;--sf-display-s-line-height: var(--sf-leading-tight);--sf-display-m-line-height: 1.05;--sf-display-l-line-height: 1;--sf-tracking-tight: -.025em;--sf-tracking-normal: 0;--sf-tracking-wide: .025em;--sf-tracking-wider: .05em;--sf-tracking-widest: .1em;--sf-font-numeric: tabular-nums;--sf-text-2xs-line-height: var(--sf-leading-relaxed);--sf-text-2xs-font-weight: var(--sf-font-weight-body);--sf-text-2xs-letter-spacing: var(--sf-tracking-normal);--sf-text-2xs-max-width: 55ch;--sf-text-xs-line-height: calc(var(--sf-leading-relaxed) - 1 * var(--sf-leading-taper));--sf-text-xs-font-weight: var(--sf-font-weight-body);--sf-text-xs-letter-spacing: var(--sf-tracking-normal);--sf-text-xs-max-width: 60ch;--sf-text-s-line-height: calc(var(--sf-leading-relaxed) - 2 * var(--sf-leading-taper));--sf-text-s-font-weight: var(--sf-font-weight-body);--sf-text-s-letter-spacing: var(--sf-tracking-normal);--sf-text-s-max-width: 65ch;--sf-text-m-line-height: calc(var(--sf-leading-normal) - 3 * var(--sf-leading-taper));--sf-text-m-font-weight: var(--sf-font-weight-body);--sf-text-m-letter-spacing: var(--sf-tracking-normal);--sf-text-m-max-width: 65ch;--sf-text-l-line-height: calc(var(--sf-leading-normal) - 4 * var(--sf-leading-taper));--sf-text-l-font-weight: var(--sf-font-weight-body);--sf-text-l-letter-spacing: var(--sf-tracking-normal);--sf-text-l-max-width: none;--sf-text-xl-line-height: calc(var(--sf-leading-snug) - 5 * var(--sf-leading-taper));--sf-text-xl-font-weight: var(--sf-font-weight-body);--sf-text-xl-letter-spacing: var(--sf-tracking-normal);--sf-text-xl-max-width: none;--sf-text-2xl-line-height: calc(var(--sf-leading-snug) - 6 * var(--sf-leading-taper));--sf-text-2xl-font-weight: var(--sf-font-weight-heading);--sf-text-2xl-letter-spacing: var(--sf-tracking-normal);--sf-text-2xl-max-width: none;--sf-text-3xl-line-height: calc(var(--sf-leading-tight) - 7 * var(--sf-leading-taper));--sf-text-3xl-font-weight: var(--sf-font-weight-heading);--sf-text-3xl-letter-spacing: var(--sf-tracking-tight);--sf-text-3xl-max-width: none;--sf-text-4xl-line-height: calc(var(--sf-leading-tight) - 8 * var(--sf-leading-taper));--sf-text-4xl-font-weight: var(--sf-font-weight-heading);--sf-text-4xl-letter-spacing: var(--sf-tracking-tight);--sf-text-4xl-max-width: none;--sf-icon-xs: .875em;--sf-icon-s: 1em;--sf-icon-m: 1.5em;--sf-icon-l: 2em;--sf-icon-xl: 3em;--sf-icon-2xl: 4em;--sf-space-none: 0;--sf-space-px: 1px;--sf-space-2xs: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale));--sf-space-xs: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale));--sf-space-s: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) * 1rem)) * var(--sf-space-scale));--sf-space-m: calc(clamp(calc(var(--sf-space-base-min) * 1rem), calc((var(--sf-space-base-max) - var(--sf-space-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * 1rem), calc(var(--sf-space-base-max) * 1rem)) * var(--sf-space-scale));--sf-space-l: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) * 1rem)) * var(--sf-space-scale));--sf-space-xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale));--sf-space-2xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale));--sf-space-3xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale));--sf-space-4xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) * 1rem)) * var(--sf-space-scale));--sf-size-xs: 1.5rem;--sf-size-s: 2rem;--sf-size-m: 2.5rem;--sf-size-l: 2.75rem;--sf-size-xl: 3.5rem;--sf-container-narrow: 38rem;--sf-container-prose: 65ch;--sf-container-default: 75rem;--sf-container-wide: 90rem;--sf-container-full: 100%;--sf-ratio-square: 1;--sf-ratio-video: 16 / 9;--sf-ratio-cinema: 21 / 9;--sf-ratio-4-3: 4 / 3;--sf-ratio-3-2: 3 / 2;--sf-ratio-portrait: 3 / 4;--sf-ratio-golden: 1.618 / 1;--sf-border-scale: 1;--sf-border-width-hairline: .5px;--sf-border-width-1: calc(1px * var(--sf-border-scale, 1));--sf-border-width-2: calc(2px * var(--sf-border-scale, 1));--sf-border-width-3: calc(3px * var(--sf-border-scale, 1));--sf-border-width-4: calc(4px * var(--sf-border-scale, 1));--sf-border-style: solid;--sf-border: var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border);--sf-border-subtle: var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle);--sf-border-strong: var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong);--sf-divider-width: var(--sf-border-width-1);--sf-divider-style: solid;--sf-divider-color: var(--sf-color-border);--sf-divider-gap: var(--sf-space-m);--sf-radius-none: 0;--sf-radius-2xs: calc(1px * var(--sf-radius-scale));--sf-radius-xs: calc(2px * var(--sf-radius-scale));--sf-radius-s: calc(4px * var(--sf-radius-scale));--sf-radius-m: calc(8px * var(--sf-radius-scale));--sf-radius-l: calc(12px * var(--sf-radius-scale));--sf-radius-xl: calc(16px * var(--sf-radius-scale));--sf-radius-2xl: calc(24px * var(--sf-radius-scale));--sf-radius-3xl: calc(32px * var(--sf-radius-scale));--sf-radius-4xl: calc(48px * var(--sf-radius-scale));--sf-radius-full: 9999px;--sf-radius-pill: var(--sf-radius-full);--sf-radius-outer: calc(var(--sf-radius-m) + var(--sf-component-pad));--sf-blur: 12px;--sf-opacity-muted: .5;--sf-duration-none: 0ms;--sf-duration-instant: calc(.1s * var(--sf-motion-scale));--sf-duration-fast: calc(.15s * var(--sf-motion-scale));--sf-duration-normal: calc(.25s * var(--sf-motion-scale));--sf-duration-slow: calc(.4s * var(--sf-motion-scale));--sf-duration-slower: calc(.6s * var(--sf-motion-scale));--sf-theme-transition-duration: calc(.3s * var(--sf-motion-scale));--sf-ease-linear: linear;--sf-ease-out: cubic-bezier(.25, 0, .15, 1);--sf-ease-in: cubic-bezier(.5, 0, .75, .25);--sf-ease-in-out: cubic-bezier(.4, 0, .2, 1);--sf-ease-spring: linear(0, .5, 1.1, .95, 1.02, 1);--sf-ease-elastic: linear(0, .3, 1.2, .9, 1.05, 1);--sf-ease-bounce: linear(0, .35 18%, 1 32%, .86 42%, 1.02 56%, .98 72%, 1);--sf-ease-overshoot: linear(0, .6 30%, 1.08 55%, .98 75%, 1);--sf-animation-fade-in: sf-fade-in var(--sf-duration-normal) var(--sf-ease-out) both;--sf-animation-fade-out: sf-fade-out var(--sf-duration-normal) var(--sf-ease-in) both;--sf-animation-slide-in-up: sf-slide-in-up var(--sf-duration-normal) var(--sf-ease-out) both;--sf-animation-slide-in-down: sf-slide-in-down var(--sf-duration-normal) var(--sf-ease-out) both;--sf-animation-slide-in-left: sf-slide-in-left var(--sf-duration-normal) var(--sf-ease-out) both;--sf-animation-slide-in-right: sf-slide-in-right var(--sf-duration-normal) var(--sf-ease-out) both;--sf-animation-scale-up: sf-scale-up var(--sf-duration-normal) var(--sf-ease-overshoot) both;--sf-animation-scale-down: sf-scale-down var(--sf-duration-normal) var(--sf-ease-in) both;--sf-animation-color-pulse: sf-color-pulse var(--sf-duration-slow) var(--sf-ease-in-out) infinite;--sf-animation-ping: sf-ping var(--sf-duration-slow) var(--sf-ease-out) infinite;--sf-animation-blink: sf-blink calc(1s * var(--sf-motion-scale)) steps(1, end) infinite;--sf-animation-float: sf-float calc(3s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite;--sf-animation-spin: sf-spin var(--sf-duration-slower) linear infinite;--sf-animation-shimmer: sf-shimmer calc(1.5s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite;--sf-animation-delay-1: calc(75ms * var(--sf-motion-scale));--sf-animation-delay-2: calc(.15s * var(--sf-motion-scale));--sf-animation-delay-3: calc(225ms * var(--sf-motion-scale));--sf-animation-delay-4: calc(.3s * var(--sf-motion-scale));--sf-animation-delay-5: calc(375ms * var(--sf-motion-scale));--sf-scroll-timeline-range-start: entry 0%;--sf-scroll-timeline-range-end: cover 30%;--sf-mask-scrim-start: var(--sf-space-l);--sf-mask-scrim-end: var(--sf-space-l);--sf-z-below: -1;--sf-z-base: 0;--sf-z-raised: 1;--sf-z-sticky: 1000;--sf-z-fixed: 1010;--sf-z-dropdown: 1020;--sf-z-overlay: 1030;--sf-z-modal: 1040;--sf-z-toast: 1050;--sf-z-tooltip: 1060;--sf-header-height-mobile: 3.5rem;--sf-header-height-desktop: 5rem;--sf-header-height: clamp( var(--sf-header-height-mobile), calc((var(--sf-header-height-desktop) - var(--sf-header-height-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-header-height-mobile)), var(--sf-header-height-desktop));--sf-sticky-offset-mobile: var(--sf-header-height-mobile);--sf-sticky-offset-desktop: var(--sf-header-height-desktop);--sf-sticky-offset: clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop));--sf-focus-ring-width: 2px;--sf-focus-ring-offset: 2px;--sf-focus-ring-style: solid;--sf-touch-target: var(--sf-size-l);--sf-contrast-bias: 0;--sf-contrast-threshold: .6;--sf-safe-top: env(safe-area-inset-top, 0px);--sf-safe-bottom: env(safe-area-inset-bottom, 0px);--sf-safe-left: env(safe-area-inset-left, 0px);--sf-safe-right: env(safe-area-inset-right, 0px);--sf-print-page-margin: 2cm;--sf-print-page-size: a4;--sf-print-base-size: 11pt;--sf-object-fit: cover;--sf-object-position: 50% 50%}@supports (color: oklch(from red l c h)){:root{--sf-shadow-color: oklch(from var(--sf-color-neutral) var(--sf-shadow-lightness) c h);--sf-shadow-none: none;--sf-shadow-xs: 0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .5), .7));--sf-shadow-s: 0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .5), .7)), 0 2px 6px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, var(--sf-shadow-strength), .7));--sf-shadow-m: 0 1px 3px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .5), .7)), 0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7));--sf-shadow-l: 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .5), .7)), 0 8px 24px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), .7)), 0 16px 48px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7));--sf-shadow-xl: 0 2px 8px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .5), .7)), 0 12px 36px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3.5), .7)), 0 24px 72px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), .7));--sf-shadow-2xl: 0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .6), .7)), 0 20px 60px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 4), .7)), 0 40px 100px -8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 5), .7));--sf-shadow-inner: inset 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7));--sf-text-shadow-none: none;--sf-text-shadow-s: 0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), .7));--sf-text-shadow-m: 0 2px 4px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7));--sf-text-shadow-l: 0 4px 8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), .7));--sf-drop-shadow-s: drop-shadow(0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), .7)));--sf-drop-shadow-m: drop-shadow(0 4px 6px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7)));--sf-drop-shadow-l: drop-shadow(0 8px 16px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), .7)))}}:root{--sf-body-font-size: var(--sf-text-m);--sf-body-line-height: var(--sf-leading-normal);--sf-body-font-weight: var(--sf-font-weight-body);--sf-body-font-family: var(--sf-font-body);--sf-body-color: var(--sf-color-text);--sf-body-text-wrap: pretty;--sf-body-strong-weight: var(--sf-font-weight-strong);--sf-body-em-style: italic;--sf-code-font-size: .875em;--sf-heading-font-family: var(--sf-font-heading);--sf-heading-color: var(--sf-color-heading);--sf-heading-text-wrap: balance;--sf-h1-size: var(--sf-text-4xl);--sf-h1-line-height: var(--sf-leading-tight);--sf-h1-font-weight: var(--sf-font-weight-heading);--sf-h1-letter-spacing: var(--sf-tracking-tight);--sf-h2-size: var(--sf-text-3xl);--sf-h2-line-height: var(--sf-leading-tight);--sf-h2-font-weight: var(--sf-font-weight-heading);--sf-h2-letter-spacing: var(--sf-tracking-tight);--sf-h3-size: var(--sf-text-2xl);--sf-h3-line-height: var(--sf-leading-snug);--sf-h3-font-weight: var(--sf-font-weight-heading);--sf-h3-letter-spacing: var(--sf-tracking-normal);--sf-h4-size: var(--sf-text-xl);--sf-h4-line-height: var(--sf-leading-snug);--sf-h4-font-weight: var(--sf-font-weight-heading);--sf-h4-letter-spacing: var(--sf-tracking-normal);--sf-h5-size: var(--sf-text-l);--sf-h5-line-height: var(--sf-leading-normal);--sf-h5-font-weight: var(--sf-font-weight-heading);--sf-h5-letter-spacing: var(--sf-tracking-normal);--sf-h6-size: var(--sf-text-m);--sf-h6-line-height: var(--sf-leading-normal);--sf-h6-font-weight: var(--sf-font-weight-heading);--sf-h6-letter-spacing: var(--sf-tracking-wide);--sf-h1-max-width: none;--sf-h2-max-width: none;--sf-h3-max-width: none;--sf-h4-max-width: none;--sf-h5-max-width: none;--sf-h6-max-width: none;--sf-gap: var(--sf-space-m);--sf-content-gap: var(--sf-space-s);--sf-gutter: var(--sf-space-l);--sf-component-pad: var(--sf-space-m);--sf-field-block: var(--sf-space-l);--sf-field-required-marker: " *";--sf-link-external-marker: " ↗";--sf-section-pad: var(--sf-section-pad--m);--sf-section-pad--xs: calc(var(--sf-space-xl) * var(--sf-section-scale));--sf-section-pad--s: calc(var(--sf-space-2xl) * var(--sf-section-scale));--sf-section-pad--m: calc(var(--sf-space-3xl) * var(--sf-section-scale));--sf-section-pad--l: calc(var(--sf-space-4xl) * var(--sf-section-scale));--sf-section-pad--xl: calc(var(--sf-space-4xl) * 1.5 * var(--sf-section-scale));--sf-section-pad--2xl: calc(var(--sf-space-4xl) * 2 * var(--sf-section-scale));--sf-transition-colors: color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out);--sf-transition-form-field: color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out);--sf-transition-transform: transform var(--sf-duration-normal) var(--sf-ease-out);--sf-transition-opacity: opacity var(--sf-duration-normal) var(--sf-ease-out);--sf-transition-shadow: box-shadow var(--sf-duration-normal) var(--sf-ease-out);--sf-transition-fast: color var(--sf-duration-fast) var(--sf-ease-out), background-color var(--sf-duration-fast) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out), transform var(--sf-duration-fast) var(--sf-ease-out), filter var(--sf-duration-fast) var(--sf-ease-out);--sf-transition-slow: color var(--sf-duration-slow) var(--sf-ease-in-out), background-color var(--sf-duration-slow) var(--sf-ease-in-out), border-color var(--sf-duration-slow) var(--sf-ease-in-out), box-shadow var(--sf-duration-slow) var(--sf-ease-in-out), opacity var(--sf-duration-slow) var(--sf-ease-in-out), transform var(--sf-duration-slow) var(--sf-ease-in-out), filter var(--sf-duration-slow) var(--sf-ease-in-out);--sf-transition-enter: color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), box-shadow var(--sf-duration-normal) var(--sf-ease-out), opacity var(--sf-duration-normal) var(--sf-ease-out), transform var(--sf-duration-normal) var(--sf-ease-out), filter var(--sf-duration-normal) var(--sf-ease-out);--sf-transition-exit: color var(--sf-duration-fast) var(--sf-ease-in), background-color var(--sf-duration-fast) var(--sf-ease-in), border-color var(--sf-duration-fast) var(--sf-ease-in), box-shadow var(--sf-duration-fast) var(--sf-ease-in), opacity var(--sf-duration-fast) var(--sf-ease-in), transform var(--sf-duration-fast) var(--sf-ease-in), filter var(--sf-duration-fast) var(--sf-ease-in);--sf-transition-overlay: overlay var(--sf-duration-normal) allow-discrete, display var(--sf-duration-normal) allow-discrete}}@layer slashed.tokens{:root{--sf-stack-gap: var(--sf-content-gap);--sf-box-padding: var(--sf-space-m);--sf-box-border-width: 0;--sf-box-border-color: var(--sf-color-border);--sf-center-max: var(--sf-container-default);--sf-center-gutter: var(--sf-gutter);--sf-cluster-gap: var(--sf-gap);--sf-cluster-align: center;--sf-cluster-justify: flex-start;--sf-sidebar-gap: var(--sf-gap);--sf-sidebar-min-width: 50%;--sf-sidebar-width: 18rem;--sf-switcher-threshold: 30rem;--sf-switcher-gap: var(--sf-gap);--sf-grid-min: 16rem;--sf-grid-gap: var(--sf-gap);--sf-grid-min-xs: 10rem;--sf-grid-min-s: 13rem;--sf-grid-min-m: 16rem;--sf-grid-min-l: 20rem;--sf-grid-min-xl: 24rem;--sf-grid-min-2xl: 28rem;--sf-equal-min-col: 16rem;--sf-equal-min-col-2: 28rem;--sf-equal-min-col-3: 15rem;--sf-equal-min-col-4: 16rem;--sf-equal-min-col-6: 10rem;--sf-equal-gap: var(--sf-gap);--sf-cover-min-height: 100dvh;--sf-cover-padding: var(--sf-section-pad);--sf-frame-ratio: 16 / 9;--sf-bg-inset: 0;--sf-bg-fit: cover;--sf-bg-position: 50% 50%;--sf-bg-radius: 0;--sf-bg-z: -2;--sf-icon-box-pad: .5em;--sf-icon-box-radius: var(--sf-radius-s);--sf-icon-box-bg: var(--sf-color-inset);--sf-icon-box-border: var(--sf-border-width-1) solid var(--sf-color-border);--sf-reel-item-width: max-content;--sf-reel-gap: var(--sf-gap);--sf-reel-height: auto;--sf-imposter-margin: var(--sf-space-m);--sf-bento-cols-default: 4;--sf-bento-row-default: 10rem;--sf-bento-row-compact: 6rem;--sf-bento-row-tall: 16rem;--sf-bento-gap: var(--sf-gap);--sf-breakout-width: var(--sf-container-wide);--sf-content-width: var(--sf-container-default);--sf-prose-paragraph: var(--sf-content-gap);--sf-alternate-gap: var(--sf-content-gap);--sf-alternate-inner-gap: var(--sf-gap)}}@layer slashed.tokens{:root{--sf-flow-space: var(--sf-content-gap);--sf-line-clamp: 3;--sf-aspect: 16 / 9;--sf-prose-heading-gap: var(--sf-space-s);--sf-prose-list-gap: var(--sf-space-xs);--sf-prose-block-margin: var(--sf-space-m);--sf-prose-media-margin: var(--sf-space-m);--sf-prose-media-radius: var(--sf-radius-m);--sf-prose-figure-margin: var(--sf-space-l);--sf-prose-marker-color: var(--sf-color-primary);--sf-prose-figcaption-size: var(--sf-text-s);--sf-prose-blockquote-padding: var(--sf-space-m);--sf-prose-blockquote-border: var(--sf-border-width-2) solid var(--sf-color-border--subtle);--sf-prose-hr-margin: var(--sf-space-l);--sf-prose-nested-list-gap: var(--sf-space-2xs);--sf-prose-table-pad: var(--sf-space-xs);--sf-surface-color: var(--sf-color-base);--sf-scroll-shadow-size: 2rem;--sf-content-intrinsic-size: 500px;--sf-scrim-color: oklch(0 0 0 / .55);--sf-scrim-direction: to top;--sf-scrim-gradient: linear-gradient(var(--sf-scrim-direction), var(--sf-scrim-color), transparent);--sf-scrim-text-shadow: 0 1px 3px oklch(0 0 0 / .6)}}@layer slashed.themes{@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--sf-is-dark: 1}}[data-theme=light]{color-scheme:light;--sf-is-dark: 0}[data-theme=dark]{color-scheme:dark;--sf-is-dark: 1}:where([data-theme]:not(:root,html)){background-color:var(--sf-color-bg);color:var(--sf-color-text)}@supports (color: oklch(from red l c h)){:root[data-lumlocker]{--sf-color-primary: light-dark( oklch(from var(--sf-color-primary-source-light) var(--sf-lumlocker) c h), oklch(from var(--sf-color-primary-source-dark, var(--sf-color-primary-source-light)) var(--sf-lumlocker) c h) );--sf-color-secondary: light-dark( oklch(from var(--sf-color-secondary-source-light) var(--sf-lumlocker) c h), oklch(from var(--sf-color-secondary-source-dark, var(--sf-color-secondary-source-light)) var(--sf-lumlocker) c h) );--sf-color-tertiary: light-dark( oklch(from var(--sf-color-tertiary-source-light) var(--sf-lumlocker) c h), oklch(from var(--sf-color-tertiary-source-dark, var(--sf-color-tertiary-source-light)) var(--sf-lumlocker) c h) );--sf-color-action: light-dark( oklch(from var(--sf-color-action-source-light) var(--sf-lumlocker) c h), oklch(from var(--sf-color-action-source-dark, var(--sf-color-action-source-light)) var(--sf-lumlocker) c h) )}:root[data-lumlocker] [data-theme=dark]{--sf-color-primary: oklch(from var(--sf-color-primary-source-dark, var(--sf-color-primary-source-light)) var(--sf-lumlocker) c h);--sf-color-secondary: oklch(from var(--sf-color-secondary-source-dark, var(--sf-color-secondary-source-light)) var(--sf-lumlocker) c h);--sf-color-tertiary: oklch(from var(--sf-color-tertiary-source-dark, var(--sf-color-tertiary-source-light)) var(--sf-lumlocker) c h);--sf-color-action: oklch(from var(--sf-color-action-source-dark, var(--sf-color-action-source-light)) var(--sf-lumlocker) c h)}:root[data-lumlocker] [data-theme=light]{--sf-color-primary: oklch(from var(--sf-color-primary-source-light) var(--sf-lumlocker) c h);--sf-color-secondary: oklch(from var(--sf-color-secondary-source-light) var(--sf-lumlocker) c h);--sf-color-tertiary: oklch(from var(--sf-color-tertiary-source-light) var(--sf-lumlocker) c h);--sf-color-action: oklch(from var(--sf-color-action-source-light) var(--sf-lumlocker) c h)}}@supports (color: oklch(from red l c h)){:root{--sf-color-primary-source-dark: oklch(from var(--sf-color-primary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-secondary-source-dark: oklch(from var(--sf-color-secondary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-tertiary-source-dark: oklch(from var(--sf-color-tertiary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-action-source-dark: oklch(from var(--sf-color-action-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-neutral-source-dark: oklch(from var(--sf-color-neutral-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-base-source-dark: oklch(from var(--sf-color-base-source-light) clamp(.16, calc(1.18 - l) , .24) calc(c/2) h);--sf-color-success-source-dark: oklch(from var(--sf-color-success-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-warning-source-dark: oklch(from var(--sf-color-warning-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-info-source-dark: oklch(from var(--sf-color-info-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-danger-source-dark: oklch(from var(--sf-color-danger-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)}[data-theme=dark]{--sf-color-primary: var(--sf-color-primary-source-dark);--sf-color-secondary: var(--sf-color-secondary-source-dark);--sf-color-tertiary: var(--sf-color-tertiary-source-dark);--sf-color-action: var(--sf-color-action-source-dark);--sf-color-neutral: var(--sf-color-neutral-source-dark);--sf-color-base: var(--sf-color-base-source-dark);--sf-color-surface: var(--sf-color-base);--sf-color-bg: oklch(from var(--sf-color-base) calc(l + .02) c h);--sf-color-inset: oklch(from var(--sf-color-base) calc(l - .02) c h);--sf-color-raised: oklch(from var(--sf-color-base) calc(l + .04) c h);--sf-color-overlay: oklch(from var(--sf-color-base) l c h / .9);--sf-color-inverse: oklch(from var(--sf-color-base) calc(1 - l) c h);--sf-color-success: var(--sf-color-success-source-dark);--sf-color-warning: var(--sf-color-warning-source-dark);--sf-color-info: var(--sf-color-info-source-dark);--sf-color-danger: var(--sf-color-danger-source-dark);--sf-color-text: oklch(from var(--sf-color-neutral) clamp(.7, calc(l + .25 + var(--sf-contrast-bias)), 1) c h);--sf-color-text--secondary: oklch(from var(--sf-color-neutral) clamp(.55, calc(l + .1 + var(--sf-contrast-bias)), .9) c h);--sf-color-text--placeholder: oklch(from var(--sf-color-neutral) clamp(.35, calc(l - .1) , .65) c h);--sf-color-text--disabled: oklch(from var(--sf-color-neutral) clamp(.25, calc(l - .2) , .55) c h);--sf-color-text--inverse: oklch(from var(--sf-color-neutral) clamp(.05, calc(l - .4) , .35) c h);--sf-color-heading: oklch(from var(--sf-color-neutral) clamp(.7, calc(l + .25 + var(--sf-contrast-bias)), 1) c h);--sf-color-border: oklch(from var(--sf-color-neutral) clamp(.25, calc(l - .3) , .55) .005 h);--sf-color-border--subtle: oklch(from var(--sf-color-neutral) clamp(.2, calc(l - .38) , .45) .005 h);--sf-color-border--strong: oklch(from var(--sf-color-neutral) clamp(.38, calc(l - .1) , .65) .02 h);--sf-color-link: oklch(from var(--sf-color-action) clamp(.68, l, 1) c h);--sf-color-link--hover: oklch(from var(--sf-color-action) clamp(0, max(l + .1, .68), 1) c h);--sf-color-link--active: oklch(from var(--sf-color-action) clamp(0, max(l + .15, .74), 1) c h);--sf-color-link--visited: oklch(from var(--sf-color-action) clamp(.68, l, 1) c calc(h + 60) );--sf-color-selection-bg: oklch(from var(--sf-color-action-source-dark) clamp(.62, calc(.93 - (l*.4)) , .78) c h / .55);--sf-color-success-strong: oklch(from var(--sf-color-success) clamp(.7, calc(l + .15) , 1) c h);--sf-color-warning-strong: oklch(from var(--sf-color-warning) clamp(.7, calc(l + .05) , 1) c h);--sf-color-info-strong: oklch(from var(--sf-color-info) clamp(.7, calc(l + .15) , 1) c h);--sf-color-danger-strong: oklch(from var(--sf-color-danger) clamp(.7, calc(l + .15) , 1) c h)}[data-theme=light]{--sf-color-primary: var(--sf-color-primary-source-light);--sf-color-secondary: var(--sf-color-secondary-source-light);--sf-color-tertiary: var(--sf-color-tertiary-source-light);--sf-color-action: var(--sf-color-action-source-light);--sf-color-neutral: var(--sf-color-neutral-source-light);--sf-color-base: var(--sf-color-base-source-light);--sf-color-surface: var(--sf-color-base);--sf-color-bg: oklch(from var(--sf-color-base) calc(l + .02) c h);--sf-color-inset: oklch(from var(--sf-color-base) calc(l - .02) c h);--sf-color-raised: oklch(from var(--sf-color-base) calc(l + .04) c h);--sf-color-overlay: oklch(from var(--sf-color-base) l c h / .9);--sf-color-inverse: oklch(from var(--sf-color-base) calc(1 - l) c h);--sf-color-success: var(--sf-color-success-source-light);--sf-color-warning: var(--sf-color-warning-source-light);--sf-color-info: var(--sf-color-info-source-light);--sf-color-danger: var(--sf-color-danger-source-light);--sf-color-text: oklch(from var(--sf-color-neutral-source-light) clamp(.05, calc(l - .4 - var(--sf-contrast-bias)), .35) c h);--sf-color-text--secondary: oklch(from var(--sf-color-neutral-source-light) clamp(.15, calc(l - .25 - var(--sf-contrast-bias)), .45) c h);--sf-color-text--placeholder: oklch(from var(--sf-color-neutral-source-light) clamp(.45, calc(l + .15) , .75) c h);--sf-color-text--disabled: oklch(from var(--sf-color-neutral-source-light) clamp(.55, calc(l + .25) , .82) c h);--sf-color-text--inverse: oklch(from var(--sf-color-neutral-source-light) clamp(.85, calc(l + .4) , .98) c h);--sf-color-heading: oklch(from var(--sf-color-neutral-source-light) clamp(.05, calc(l - .4 - var(--sf-contrast-bias)), .35) c h);--sf-color-border: oklch(from var(--sf-color-neutral-source-light) clamp(.7, calc(l + .35) , .95) .005 h);--sf-color-border--subtle: oklch(from var(--sf-color-neutral-source-light) clamp(.75, calc(l + .4) , .97) .005 h);--sf-color-border--strong: oklch(from var(--sf-color-neutral-source-light) clamp(.55, calc(l + .1) , .85) .02 h);--sf-color-link: oklch(from var(--sf-color-action) clamp(0, min(l - .07, .48), 1) c h);--sf-color-link--hover: oklch(from var(--sf-color-action) clamp(0, min(l - .15, .4), 1) c h);--sf-color-link--active: oklch(from var(--sf-color-action) clamp(0, min(l - .21, .34), 1) c h);--sf-color-link--visited: oklch(from var(--sf-color-action) clamp(0, min(l - .07, .48), 1) c calc(h + 60) );--sf-color-selection-bg: oklch(from var(--sf-color-action-source-light) l c h / .28);--sf-color-success-strong: oklch(from var(--sf-color-success-source-light) calc(l - .15) c h);--sf-color-warning-strong: oklch(from var(--sf-color-warning-source-light) calc(l - .25) c h);--sf-color-info-strong: oklch(from var(--sf-color-info-source-light) calc(l - .1) c h);--sf-color-danger-strong: oklch(from var(--sf-color-danger-source-light) calc(l - .1) c h)}}@supports (color: oklch(from red l c h)) and (width: calc(1px*sign(1))){[data-theme=dark],[data-theme=light]{--sf-color-text--on-primary: oklch(from var(--sf-color-primary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-secondary: oklch(from var(--sf-color-secondary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-tertiary: oklch(from var(--sf-color-tertiary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-action: oklch(from var(--sf-color-action) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-neutral: oklch(from var(--sf-color-neutral) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-success: oklch(from var(--sf-color-success) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-warning: oklch(from var(--sf-color-warning) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-info: oklch(from var(--sf-color-info) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-danger: oklch(from var(--sf-color-danger) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-inverse: oklch(from var(--sf-color-inverse) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0)}}.sf-theme-transition{transition:--sf-color-primary var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-secondary var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-tertiary var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-action var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-neutral var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-base var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-success var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-warning var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-info var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-danger var(--sf-theme-transition-duration) var(--sf-ease-out)}@media(prefers-reduced-motion:reduce){.sf-theme-transition{transition:none}}}@layer slashed.layout{.sf-section{padding-block:var(--sf-section-pad)}.sf-section--xs{--sf-section-pad: var(--sf-section-pad--xs)}.sf-section--s{--sf-section-pad: var(--sf-section-pad--s)}.sf-section--m{--sf-section-pad: var(--sf-section-pad--m)}.sf-section--l{--sf-section-pad: var(--sf-section-pad--l)}.sf-section--xl{--sf-section-pad: var(--sf-section-pad--xl)}.sf-section--2xl{--sf-section-pad: var(--sf-section-pad--2xl)}.sf-section--guttered{padding-inline:var(--sf-gutter)}.sf-section--guttered .sf-container{padding-inline:0}.sf-section-group>.sf-section+.sf-section{padding-block-start:0}.sf-section--collapse:has(+.sf-section--collapse){padding-block-end:calc(var(--sf-section-pad) / 2)}.sf-section--collapse+.sf-section--collapse{padding-block-start:calc(var(--sf-section-pad) / 2)}.sf-divider{border:none;border-block-start:var(--sf-divider-width) var(--sf-divider-style) var(--sf-divider-color);margin-block:var(--sf-divider-gap)}.sf-divider--vertical{border-block-start:none;border-inline-start:var(--sf-divider-width) var(--sf-divider-style) var(--sf-divider-color);margin-block:0;margin-inline:var(--sf-divider-gap);align-self:stretch}.sf-divider--soft{--sf-divider-color: var(--sf-color-border--subtle)}.sf-divider--strong{--sf-divider-color: var(--sf-color-border--strong)}.sf-divider--dashed{--sf-divider-style: dashed}.sf-divider--dotted{--sf-divider-style: dotted}.sf-divider--gradient{border:none;block-size:var(--sf-divider-width);background:linear-gradient(to right,transparent,var(--sf-divider-color),transparent)}.sf-container{container:sf-layout / inline-size;width:100%;max-width:var(--sf-container-default);margin-inline:auto;padding-inline:var(--sf-gutter)}.sf-container--narrow{max-width:var(--sf-container-narrow)}.sf-container--prose{max-width:var(--sf-container-prose)}.sf-container--wide{max-width:var(--sf-container-wide)}.sf-container--full{max-width:var(--sf-container-full)}.sf-cq{container-type:inline-size}.sf-stack{display:flex;flex-direction:column;gap:var(--sf-stack-gap)}.sf-stack--xs{gap:var(--sf-space-xs)}.sf-stack--s{gap:var(--sf-space-s)}.sf-stack--m{gap:var(--sf-space-m)}.sf-stack--l{gap:var(--sf-space-l)}.sf-stack--xl{gap:var(--sf-space-xl)}.sf-stack--2xl{gap:var(--sf-space-2xl)}.sf-stack--center{align-items:center}.sf-stack--end{align-items:flex-end}.sf-stack--stretch{align-items:stretch}.sf-gap{gap:var(--sf-gap)}.sf-gap--xs{gap:var(--sf-space-xs)}.sf-gap--s{gap:var(--sf-space-s)}.sf-gap--m{gap:var(--sf-space-m)}.sf-gap--l{gap:var(--sf-space-l)}.sf-gap--xl{gap:var(--sf-space-xl)}.sf-gap--2xl{gap:var(--sf-space-2xl)}.sf-box{padding:var(--sf-box-padding);outline:var(--sf-box-border-width) solid var(--sf-box-border-color)}.sf-center{box-sizing:content-box;width:auto;margin-inline:auto;max-inline-size:var(--sf-center-max);padding-inline:var(--sf-center-gutter)}.sf-center--intrinsic{display:flex;flex-direction:column;align-items:center}.sf-cluster{display:flex;flex-wrap:wrap;gap:var(--sf-cluster-gap);align-items:var(--sf-cluster-align);justify-content:var(--sf-cluster-justify)}.sf-cluster--xs{gap:var(--sf-space-xs)}.sf-cluster--s{gap:var(--sf-space-s)}.sf-cluster--m{gap:var(--sf-space-m)}.sf-cluster--l{gap:var(--sf-space-l)}.sf-cluster--xl{gap:var(--sf-space-xl)}.sf-cluster--2xl{gap:var(--sf-space-2xl)}.sf-cluster--no-wrap{flex-wrap:nowrap}.sf-cluster--center{justify-content:center}.sf-cluster--end{justify-content:flex-end}.sf-cluster--between{justify-content:space-between}.sf-sidebar{display:flex;flex-wrap:wrap;gap:var(--sf-sidebar-gap)}.sf-sidebar>:first-child{flex-basis:var(--sf-sidebar-width);flex-grow:1}.sf-sidebar>:last-child{flex-basis:0;flex-grow:999;min-inline-size:var(--sf-sidebar-min-width)}.sf-sidebar--right>:first-child{flex-basis:0;flex-grow:999;min-inline-size:var(--sf-sidebar-min-width)}.sf-sidebar--right>:last-child{flex-basis:var(--sf-sidebar-width);flex-grow:1}.sf-sidebar--narrow{--sf-sidebar-width: 12rem}.sf-sidebar--wide{--sf-sidebar-width: 26rem}.sf-switcher{display:flex;flex-wrap:wrap;gap:var(--sf-switcher-gap)}.sf-switcher>*{flex-grow:1;flex-basis:calc((var(--sf-switcher-threshold) - 100%) * 999)}.sf-switcher--no-wrap{flex-wrap:nowrap;overflow-x:auto;overflow-inline:auto}.sf-switcher--vertical{flex-direction:column}.sf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--sf-grid-min),100%),1fr));gap:var(--sf-grid-gap)}.sf-grid--fit{grid-template-columns:repeat(auto-fit,minmax(min(var(--sf-grid-min),100%),1fr))}.sf-grid--xs{--sf-grid-min: var(--sf-grid-min-xs)}.sf-grid--s{--sf-grid-min: var(--sf-grid-min-s)}.sf-grid--m{--sf-grid-min: var(--sf-grid-min-m)}.sf-grid--l{--sf-grid-min: var(--sf-grid-min-l)}.sf-grid--xl{--sf-grid-min: var(--sf-grid-min-xl)}.sf-grid--2xl{--sf-grid-min: var(--sf-grid-min-2xl)}.sf-grid--dense{grid-auto-flow:dense}.sf-icon{display:inline-block;inline-size:var(--sf-icon-size, var(--sf-icon-m));block-size:var(--sf-icon-size, var(--sf-icon-m));flex-shrink:0;vertical-align:text-bottom;fill:currentcolor}.sf-icon--xs{--sf-icon-size: var(--sf-icon-xs)}.sf-icon--s{--sf-icon-size: var(--sf-icon-s)}.sf-icon--m{--sf-icon-size: var(--sf-icon-m)}.sf-icon--l{--sf-icon-size: var(--sf-icon-l)}.sf-icon--xl{--sf-icon-size: var(--sf-icon-xl)}.sf-icon--2xl{--sf-icon-size: var(--sf-icon-2xl)}.sf-icon--boxed{inline-size:calc(var(--sf-icon-size, var(--sf-icon-m)) + var(--sf-icon-box-pad) * 2);block-size:calc(var(--sf-icon-size, var(--sf-icon-m)) + var(--sf-icon-box-pad) * 2);padding:var(--sf-icon-box-pad);border:var(--sf-icon-box-border);border-radius:var(--sf-icon-box-radius);background:var(--sf-icon-box-bg);box-sizing:border-box}.sf-cover{display:flex;flex-direction:column;min-height:var(--sf-cover-min-height);padding-block:var(--sf-cover-padding)}.sf-cover>.sf-cover__center{margin-block:auto}.sf-cover--min{min-height:50dvh}.sf-cover--max{min-height:0;max-block-size:100dvh}.sf-cover--padding-s{padding-block:var(--sf-space-xl)}.sf-cover--padding-l{padding-block:var(--sf-space-4xl)}.sf-frame{aspect-ratio:var(--sf-frame-ratio);overflow:hidden;display:flex;justify-content:center;align-items:center}.sf-frame>img,.sf-frame>video{inline-size:100%;block-size:100%;object-fit:cover}.sf-frame--square{aspect-ratio:var(--sf-ratio-square)}.sf-frame--video{aspect-ratio:var(--sf-ratio-video)}.sf-frame--cinema{aspect-ratio:var(--sf-ratio-cinema)}.sf-frame--portrait{aspect-ratio:var(--sf-ratio-portrait)}.sf-frame--4-3{aspect-ratio:var(--sf-ratio-4-3)}.sf-frame--3-2{aspect-ratio:var(--sf-ratio-3-2)}.sf-frame--golden{aspect-ratio:var(--sf-ratio-golden)}:where(:has(>.sf-bg)){position:relative;isolation:isolate}.sf-bg{position:absolute;inset:var(--sf-bg-inset);inline-size:calc(100% - 2 * var(--sf-bg-inset));block-size:calc(100% - 2 * var(--sf-bg-inset));object-fit:var(--sf-bg-fit);object-position:var(--sf-bg-position);border-radius:var(--sf-bg-radius);z-index:var(--sf-bg-z);pointer-events:none}.sf-bg>:is(img,video,picture){inline-size:100%;block-size:100%;object-fit:var(--sf-bg-fit);object-position:var(--sf-bg-position);border-radius:var(--sf-bg-radius);pointer-events:none}.sf-bg>picture>img{inline-size:100%;block-size:100%;object-fit:var(--sf-bg-fit);object-position:var(--sf-bg-position);border-radius:var(--sf-bg-radius);pointer-events:none}.sf-reel{display:flex;block-size:var(--sf-reel-height);gap:var(--sf-reel-gap);overflow-x:auto;overflow-inline:auto;scroll-snap-type:inline mandatory;scroll-padding-inline:var(--sf-reel-gap);overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:var(--sf-scrollbar-thumb) var(--sf-scrollbar-track)}.sf-reel::-webkit-scrollbar{block-size:6px}.sf-reel::-webkit-scrollbar-track{background:var(--sf-scrollbar-track);border-radius:var(--sf-radius-full)}.sf-reel::-webkit-scrollbar-thumb{background:var(--sf-scrollbar-thumb);border-radius:var(--sf-radius-full)}.sf-reel>*{flex:0 0 var(--sf-reel-item-width);scroll-snap-align:start}.sf-imposter{position:absolute;inset-block-start:50%;left:50%;translate:-50% -50%}.sf-imposter--fixed{position:fixed}.sf-imposter--contain{max-inline-size:calc(100% - var(--sf-imposter-margin) * 2);max-block-size:calc(100% - var(--sf-imposter-margin) * 2);overflow:auto}.sf-alternate{display:grid;gap:var(--sf-alternate-gap);container:sf-alternate / inline-size}.sf-alternate>*{display:grid;gap:var(--sf-alternate-inner-gap);align-items:center}@container sf-alternate (min-width: 48em){.sf-alternate>*{grid-template-columns:1fr 1fr}.sf-alternate>:nth-child(2n)>:first-child{order:2}.sf-alternate>:nth-child(2n)>:last-child{order:1}}.sf-pancake{display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh}.sf-grid-cols-1{display:grid;gap:var(--sf-grid-gap)}.sf-grid-cols-2,.sf-grid-cols-3,.sf-grid-cols-4,.sf-grid-cols-6{display:grid;gap:var(--sf-grid-gap);container:sf-grid / inline-size}@container (min-width: 30em){.sf-grid-cols-4{grid-template-columns:repeat(2,1fr)}.sf-grid-cols-6{grid-template-columns:repeat(3,1fr)}}@container (min-width: 48em){.sf-grid-cols-2{grid-template-columns:repeat(2,1fr)}.sf-grid-cols-3{grid-template-columns:repeat(3,1fr)}.sf-grid-cols-4{grid-template-columns:repeat(4,1fr)}.sf-grid-cols-6{grid-template-columns:repeat(6,1fr)}}.sf-grid-cols-1-2,.sf-grid-cols-2-1,.sf-grid-cols-1-3,.sf-grid-cols-3-1{display:grid;gap:var(--sf-grid-gap)}@container (min-width: 48em){.sf-grid-cols-1-2{grid-template-columns:1fr 2fr}.sf-grid-cols-2-1{grid-template-columns:2fr 1fr}.sf-grid-cols-1-3{grid-template-columns:1fr 3fr}.sf-grid-cols-3-1{grid-template-columns:3fr 1fr}}.sf-equal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--sf-equal-min-col),100%),1fr));gap:var(--sf-equal-gap)}.sf-equal--2{--sf-equal-min-col: var(--sf-equal-min-col-2)}.sf-equal--3{--sf-equal-min-col: var(--sf-equal-min-col-3)}.sf-equal--4{--sf-equal-min-col: var(--sf-equal-min-col-4)}.sf-equal--6{--sf-equal-min-col: var(--sf-equal-min-col-6)}.sf-content-grid{display:grid;grid-template-columns:[full-start] minmax(var(--sf-gutter),1fr) [breakout-start] minmax(0,calc((var(--sf-breakout-width) - var(--sf-content-width)) / 2)) [content-start] min(var(--sf-content-width),100% - var(--sf-gutter) * 2) [content-end] minmax(0,calc((var(--sf-breakout-width) - var(--sf-content-width)) / 2)) [breakout-end] minmax(var(--sf-gutter),1fr) [full-end]}.sf-content-grid>*{grid-column:content}.sf-content-grid>.sf-breakout{grid-column:breakout}.sf-content-grid>.sf-full-bleed{grid-column:full}.sf-bento{display:grid;grid-template-columns:repeat(var(--sf-bento-cols, var(--sf-bento-cols-default)),1fr);grid-auto-rows:minmax(var(--sf-bento-row, var(--sf-bento-row-default)),auto);grid-auto-flow:dense;gap:var(--sf-bento-gap);container:sf-bento / inline-size}@container (max-width: 29.99em){.sf-bento{grid-template-columns:1fr}}@container (min-width: 30em) and (max-width: 47.99em){.sf-bento{grid-template-columns:repeat(2,1fr)}}.sf-bento--2{--sf-bento-cols: 2}.sf-bento--3{--sf-bento-cols: 3}.sf-bento--6{--sf-bento-cols: 6}.sf-bento--compact{--sf-bento-row: var(--sf-bento-row-compact)}.sf-bento--tall{--sf-bento-row: var(--sf-bento-row-tall)}.sf-bento-wide{grid-column:span 2}.sf-bento-full{grid-column:1 / -1}.sf-bento-tall{grid-row:span 2}.sf-bento-featured{grid-column:span 2;grid-row:span 2}.sf-subgrid{display:grid;grid-template-columns:subgrid}.sf-subgrid-rows{display:grid;grid-template-rows:subgrid}}@layer slashed.macros{.sf-prose{max-width:var(--sf-container-prose);overflow-wrap:break-word}.sf-prose>*+*{margin-block-start:var(--sf-prose-paragraph)}.sf-prose :is(h2,h3,h4,h5,h6)+*{margin-block-start:var(--sf-prose-heading-gap)}.sf-prose li+li{margin-block-start:var(--sf-prose-list-gap)}.sf-prose :is(blockquote,pre){margin-block:var(--sf-prose-block-margin)}.sf-prose blockquote{font-style:italic;padding-inline-start:var(--sf-prose-blockquote-padding);border-inline-start:var(--sf-prose-blockquote-border)}.sf-prose img{margin-block:var(--sf-prose-media-margin);border-radius:var(--sf-prose-media-radius)}.sf-prose :is(ul,ol){padding-inline-start:1.25em}.sf-prose>:is(ul,ol){margin-block-end:0}.sf-prose :is(ul,ol) :is(ul,ol){margin-block-start:var(--sf-prose-nested-list-gap)}.sf-prose ul{list-style:disc}.sf-prose ol{list-style:decimal}.sf-prose ::marker{color:var(--sf-prose-marker-color)}.sf-prose hr{margin-block:var(--sf-prose-hr-margin)}.sf-prose figure{margin-block:var(--sf-prose-figure-margin)}.sf-prose figcaption{font-size:var(--sf-prose-figcaption-size);color:var(--sf-color-text--muted);margin-block-start:var(--sf-prose-list-gap)}.sf-prose table{margin-block:var(--sf-prose-block-margin);display:block;overflow-x:auto;overflow-inline:auto;inline-size:100%;max-inline-size:100%}.sf-prose :is(th,td){padding:var(--sf-prose-table-pad)}.sf-prose video{margin-block:var(--sf-prose-media-margin);border-radius:var(--sf-prose-media-radius)}.sf-prose .sf-not-prose>*+*{margin-block-start:0}.sf-prose .sf-not-prose li+li{margin-block-start:0}.sf-prose .sf-not-prose :is(ul,ol){list-style:revert;padding-inline-start:revert}.sf-prose .sf-not-prose ::marker{color:inherit}.sf-prose .sf-not-prose blockquote{margin-block:0;padding-inline-start:0;border-inline-start:0;font-style:normal}.sf-prose .sf-not-prose hr{margin-block:0}.sf-prose .sf-not-prose img{margin-block:0;border-radius:0}.sf-prose .sf-not-prose figure{margin-block:0}.sf-prose .sf-not-prose figcaption{font-size:inherit;color:inherit;margin-block-start:0}.sf-prose .sf-not-prose table{margin-block:0;display:revert;overflow-x:revert;overflow-inline:revert;inline-size:revert;max-inline-size:revert}.sf-prose .sf-not-prose :is(th,td){padding:revert}.sf-prose .sf-not-prose video{margin-block:0;border-radius:0}.sf-flow>*+*{margin-block-start:var(--sf-flow-space)}.sf-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf-line-clamp-2,.sf-line-clamp-3,.sf-line-clamp-N{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.sf-line-clamp-2{-webkit-line-clamp:2}.sf-line-clamp-3{-webkit-line-clamp:3}.sf-line-clamp-N{-webkit-line-clamp:var(--sf-line-clamp)}.sf-equal-height{display:flex;align-items:stretch}.sf-equal-height>*{block-size:auto;flex:1 1 auto}.sf-aspect{aspect-ratio:var(--sf-aspect, 16 / 9)}.sf-scroll-shadow{overflow-y:auto;overflow-block:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-scroll-shadow-size),black calc(100% - var(--sf-scroll-shadow-size)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-scroll-shadow-size),black calc(100% - var(--sf-scroll-shadow-size)),transparent 100%)}.sf-scroll-snap{overflow-y:auto;overflow-block:auto;scroll-snap-type:block mandatory;overscroll-behavior-block:contain}.sf-scroll-snap>*{scroll-snap-align:start}.sf-overflow-fade,.sf-overflow-fade--right{overflow:hidden;-webkit-mask-image:linear-gradient(to right,black 0,black calc(100% - var(--sf-mask-scrim-end)),transparent 100%);mask-image:linear-gradient(to right,black 0,black calc(100% - var(--sf-mask-scrim-end)),transparent 100%)}.sf-overflow-fade--left{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--sf-mask-scrim-start),black 100%);mask-image:linear-gradient(to right,transparent 0,black var(--sf-mask-scrim-start),black 100%)}.sf-overflow-fade--top{overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-mask-scrim-start),black 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-mask-scrim-start),black 100%)}.sf-overflow-fade--bottom{overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,black 0,black calc(100% - var(--sf-mask-scrim-end)),transparent 100%);mask-image:linear-gradient(to bottom,black 0,black calc(100% - var(--sf-mask-scrim-end)),transparent 100%)}.sf-overflow-fade--block{overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-mask-scrim-start),black calc(100% - var(--sf-mask-scrim-end)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-mask-scrim-start),black calc(100% - var(--sf-mask-scrim-end)),transparent 100%)}.sf-overflow-fade--inline{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--sf-mask-scrim-start),black calc(100% - var(--sf-mask-scrim-end)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black var(--sf-mask-scrim-start),black calc(100% - var(--sf-mask-scrim-end)),transparent 100%)}.sf-no-tap-highlight{-webkit-tap-highlight-color:transparent}.sf-surface{background:var(--sf-surface-color)}.sf-surface--primary{--sf-surface-color: var(--sf-color-primary);background:var(--sf-color-primary);color:var(--sf-color-text--on-primary)}.sf-surface--secondary{--sf-surface-color: var(--sf-color-secondary);background:var(--sf-color-secondary);color:var(--sf-color-text--on-secondary)}.sf-surface--tertiary{--sf-surface-color: var(--sf-color-tertiary);background:var(--sf-color-tertiary);color:var(--sf-color-text--on-tertiary)}.sf-surface--action{--sf-surface-color: var(--sf-color-action);background:var(--sf-color-action);color:var(--sf-color-text--on-action)}.sf-surface--neutral{--sf-surface-color: var(--sf-color-neutral);background:var(--sf-color-neutral);color:var(--sf-color-text--on-neutral)}.sf-surface--inverse{--sf-surface-color: var(--sf-color-inverse);background:var(--sf-color-inverse);color:var(--sf-color-text--on-inverse)}.sf-surface--success{--sf-surface-color: var(--sf-color-success);background:var(--sf-color-success);color:var(--sf-color-text--on-success)}.sf-surface--warning{--sf-surface-color: var(--sf-color-warning);background:var(--sf-color-warning);color:var(--sf-color-text--on-warning)}.sf-surface--info{--sf-surface-color: var(--sf-color-info);background:var(--sf-color-info);color:var(--sf-color-text--on-info)}.sf-surface--danger{--sf-surface-color: var(--sf-color-danger);background:var(--sf-color-danger);color:var(--sf-color-text--on-danger)}@supports (color: oklch(from red l c h)) and (width: calc(1px*sign(1))){:is(.sf-surface,.sf-surface--primary,.sf-surface--secondary,.sf-surface--tertiary,.sf-surface--action,.sf-surface--neutral,.sf-surface--inverse,.sf-surface--success,.sf-surface--warning,.sf-surface--info,.sf-surface--danger){--sf-surface-contrast: oklch(from var(--sf-surface-color) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0 / 1);background:var(--sf-surface-color);color:var(--sf-surface-contrast);--sf-color-text: var(--sf-surface-contrast);--sf-color-heading: var(--sf-surface-contrast);--sf-color-link: oklch(from var(--sf-surface-contrast) l calc(c + .08) h);--sf-color-link--hover: var(--sf-surface-contrast);--sf-color-link--underline: oklch(from var(--sf-surface-contrast) l c h / .5);--sf-color-text--secondary: oklch(from var(--sf-surface-contrast) l c h / .7);--sf-color-text--placeholder: oklch(from var(--sf-surface-contrast) l c h / .45);--sf-color-text--disabled: oklch(from var(--sf-surface-contrast) l c h / .3);--sf-color-border: oklch(from var(--sf-surface-contrast) l c h / .2);--sf-color-border--subtle: oklch(from var(--sf-surface-contrast) l c h / .12);--sf-color-border--strong: oklch(from var(--sf-surface-contrast) l c h / .35);--sf-focus-ring-color: var(--sf-surface-contrast);--sf-caret-color: var(--sf-surface-contrast);--sf-shadow-color: oklch(from var(--sf-surface-color) var(--sf-shadow-lightness) c h)}}.sf-scrim{position:relative;isolation:isolate}.sf-scrim:before{content:"";position:absolute;inset:0;z-index:0;background:var(--sf-scrim-gradient);pointer-events:none}.sf-scrim>:not(img,picture,video,svg,canvas),.sf-scrim__content{position:relative;z-index:1}.sf-scrim--top{--sf-scrim-direction: to bottom}.sf-scrim--bottom{--sf-scrim-direction: to top}.sf-scrim--full{--sf-scrim-gradient: var(--sf-scrim-color)}.sf-text-protect{text-shadow:var(--sf-scrim-text-shadow)}.sf-text-gradient{background-image:var(--sf-gradient-primary);background-clip:text;color:transparent}.sf-link-external:after{content:var(--sf-link-external-marker);display:inline-block;font-size:.85em;text-decoration:none}.sf-content-auto{content-visibility:auto;contain-intrinsic-size:auto var(--sf-content-intrinsic-size, 500px)}.sf-tabular-nums{font-variant-numeric:var(--sf-font-numeric, tabular-nums)}.sf-link--subtle:link,.sf-link--subtle:visited{text-decoration-line:none}.sf-link--subtle:is(:link,:visited):hover,.sf-link--subtle:is(:link,:visited):focus-visible{text-decoration-line:underline;text-decoration-color:currentcolor}.sf-link--reverse:link,.sf-link--reverse:visited{text-decoration-line:underline}.sf-link--reverse:is(:link,:visited):hover,.sf-link--reverse:is(:link,:visited):focus-visible{text-decoration-line:none}} +/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-orange-400:oklch(75% .183 55.934);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-900:oklch(37.8% .077 168.94);--color-teal-400:oklch(77.7% .152 181.912);--color-sky-400:oklch(74.6% .16 232.661);--color-blue-500:oklch(62.3% .214 259.815);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-violet-400:oklch(70.2% .183 293.541);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-pink-400:oklch(71.8% .202 349.761);--color-rose-300:oklch(81% .117 11.638);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-rose-800:oklch(45.5% .188 13.697);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-widest:.1em;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.-top-0\.5{top:calc(var(--spacing) * -.5)}.top-0{top:0}.top-0\.5{top:calc(var(--spacing) * .5)}.top-1{top:var(--spacing)}.top-2{top:calc(var(--spacing) * 2)}.-right-0\.5{right:calc(var(--spacing) * -.5)}.right-0{right:0}.right-0\.5{right:calc(var(--spacing) * .5)}.right-2{right:calc(var(--spacing) * 2)}.bottom-0{bottom:0}.bottom-2{bottom:calc(var(--spacing) * 2)}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.left-3{left:calc(var(--spacing) * 3)}.left-12{left:calc(var(--spacing) * 12)}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[100000\]{z-index:100000}.z-\[100001\]{z-index:100001}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mx-0\.5{margin-inline:calc(var(--spacing) * .5)}.mx-1{margin-inline:var(--spacing)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mx-auto{margin-inline:auto}.my-2{margin-block:calc(var(--spacing) * 2)}.-mt-px{margin-top:-1px}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-0\.5{margin-bottom:calc(var(--spacing) * .5)}.mb-1{margin-bottom:var(--spacing)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.ml-0\.5{margin-left:calc(var(--spacing) * .5)}.ml-1{margin-left:var(--spacing)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.list-item{display:list-item}.table{display:table}.h-1{height:var(--spacing)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-24{height:calc(var(--spacing) * 24)}.h-\[52px\]{height:52px}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-80{max-height:calc(var(--spacing) * 80)}.max-h-\[360px\]{max-height:360px}.min-h-0{min-height:0}.min-h-10{min-height:calc(var(--spacing) * 10)}.min-h-\[34px\]{min-height:34px}.w-0\.5{width:calc(var(--spacing) * .5)}.w-1{width:var(--spacing)}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-\[560px\]{width:560px}.w-full{width:100%}.w-px{width:1px}.w-screen{width:100vw}.max-w-28{max-width:calc(var(--spacing) * 28)}.max-w-\[95vw\]{max-width:95vw}.max-w-\[100px\]{max-width:100px}.max-w-\[320px\]{max-width:320px}.max-w-full{max-width:100%}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:0}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0{--tw-translate-x:0;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0\.5{--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-px{gap:1px}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-px>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(1px * var(--tw-space-y-reverse));margin-block-end:calc(1px * calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-l-xl{border-top-left-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl)}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-500{border-color:var(--color-amber-500)}.border-amber-500\/20{border-color:#f99c0033}@supports (color:color-mix(in lab,red,red)){.border-amber-500\/20{border-color:color-mix(in oklab,var(--color-amber-500) 20%,transparent)}}.border-emerald-500\/30{border-color:#00bb7f4d}@supports (color:color-mix(in lab,red,red)){.border-emerald-500\/30{border-color:color-mix(in oklab,var(--color-emerald-500) 30%,transparent)}}.border-indigo-400\/40{border-color:#7d87ff66}@supports (color:color-mix(in lab,red,red)){.border-indigo-400\/40{border-color:color-mix(in oklab,var(--color-indigo-400) 40%,transparent)}}.border-indigo-500{border-color:var(--color-indigo-500)}.border-indigo-500\/15{border-color:#625fff26}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/15{border-color:color-mix(in oklab,var(--color-indigo-500) 15%,transparent)}}.border-indigo-500\/20{border-color:#625fff33}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/20{border-color:color-mix(in oklab,var(--color-indigo-500) 20%,transparent)}}.border-indigo-500\/25{border-color:#625fff40}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/25{border-color:color-mix(in oklab,var(--color-indigo-500) 25%,transparent)}}.border-indigo-500\/30{border-color:#625fff4d}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/30{border-color:color-mix(in oklab,var(--color-indigo-500) 30%,transparent)}}.border-indigo-500\/40{border-color:#625fff66}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/40{border-color:color-mix(in oklab,var(--color-indigo-500) 40%,transparent)}}.border-indigo-500\/50{border-color:#625fff80}@supports (color:color-mix(in lab,red,red)){.border-indigo-500\/50{border-color:color-mix(in oklab,var(--color-indigo-500) 50%,transparent)}}.border-rose-500\/20{border-color:#ff235733}@supports (color:color-mix(in lab,red,red)){.border-rose-500\/20{border-color:color-mix(in oklab,var(--color-rose-500) 20%,transparent)}}.border-rose-500\/30{border-color:#ff23574d}@supports (color:color-mix(in lab,red,red)){.border-rose-500\/30{border-color:color-mix(in oklab,var(--color-rose-500) 30%,transparent)}}.border-white\/6{border-color:#ffffff0f}@supports (color:color-mix(in lab,red,red)){.border-white\/6{border-color:color-mix(in oklab,var(--color-white) 6%,transparent)}}.border-white\/8{border-color:#ffffff14}@supports (color:color-mix(in lab,red,red)){.border-white\/8{border-color:color-mix(in oklab,var(--color-white) 8%,transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.border-white\/10{border-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.border-white\/12{border-color:#ffffff1f}@supports (color:color-mix(in lab,red,red)){.border-white\/12{border-color:color-mix(in oklab,var(--color-white) 12%,transparent)}}.border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab,red,red)){.border-white\/20{border-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.border-t-indigo-500{border-top-color:var(--color-indigo-500)}.bg-\[\#0a0a0f\]{background-color:#0a0a0f}.bg-\[\#0a0a10\]{background-color:#0a0a10}.bg-\[\#0c0c15\]{background-color:#0c0c15}.bg-\[\#0d0d14\]{background-color:#0d0d14}.bg-\[\#1a1a2e\]{background-color:#1a1a2e}.bg-\[\#06060a\]{background-color:#06060a}.bg-\[\#07070b\]{background-color:#07070b}.bg-\[\#09090e\]{background-color:#09090e}.bg-\[\#111118\]{background-color:#111118}.bg-amber-400{background-color:var(--color-amber-400)}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab,red,red)){.bg-amber-500\/10{background-color:color-mix(in oklab,var(--color-amber-500) 10%,transparent)}}.bg-amber-500\/20{background-color:#f99c0033}@supports (color:color-mix(in lab,red,red)){.bg-amber-500\/20{background-color:color-mix(in oklab,var(--color-amber-500) 20%,transparent)}}.bg-amber-600{background-color:var(--color-amber-600)}.bg-amber-600\/40{background-color:#dd740066}@supports (color:color-mix(in lab,red,red)){.bg-amber-600\/40{background-color:color-mix(in oklab,var(--color-amber-600) 40%,transparent)}}.bg-black\/30{background-color:#0000004d}@supports (color:color-mix(in lab,red,red)){.bg-black\/30{background-color:color-mix(in oklab,var(--color-black) 30%,transparent)}}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab,red,red)){.bg-black\/60{background-color:color-mix(in oklab,var(--color-black) 60%,transparent)}}.bg-blue-500\/30{background-color:#3080ff4d}@supports (color:color-mix(in lab,red,red)){.bg-blue-500\/30{background-color:color-mix(in oklab,var(--color-blue-500) 30%,transparent)}}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-emerald-500\/15{background-color:#00bb7f26}@supports (color:color-mix(in lab,red,red)){.bg-emerald-500\/15{background-color:color-mix(in oklab,var(--color-emerald-500) 15%,transparent)}}.bg-emerald-500\/20{background-color:#00bb7f33}@supports (color:color-mix(in lab,red,red)){.bg-emerald-500\/20{background-color:color-mix(in oklab,var(--color-emerald-500) 20%,transparent)}}.bg-emerald-500\/25{background-color:#00bb7f40}@supports (color:color-mix(in lab,red,red)){.bg-emerald-500\/25{background-color:color-mix(in oklab,var(--color-emerald-500) 25%,transparent)}}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-emerald-900\/40{background-color:#004e3b66}@supports (color:color-mix(in lab,red,red)){.bg-emerald-900\/40{background-color:color-mix(in oklab,var(--color-emerald-900) 40%,transparent)}}.bg-indigo-400{background-color:var(--color-indigo-400)}.bg-indigo-400\/40{background-color:#7d87ff66}@supports (color:color-mix(in lab,red,red)){.bg-indigo-400\/40{background-color:color-mix(in oklab,var(--color-indigo-400) 40%,transparent)}}.bg-indigo-400\/50{background-color:#7d87ff80}@supports (color:color-mix(in lab,red,red)){.bg-indigo-400\/50{background-color:color-mix(in oklab,var(--color-indigo-400) 50%,transparent)}}.bg-indigo-500{background-color:var(--color-indigo-500)}.bg-indigo-500\/8{background-color:#625fff14}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/8{background-color:color-mix(in oklab,var(--color-indigo-500) 8%,transparent)}}.bg-indigo-500\/10{background-color:#625fff1a}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/10{background-color:color-mix(in oklab,var(--color-indigo-500) 10%,transparent)}}.bg-indigo-500\/15{background-color:#625fff26}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/15{background-color:color-mix(in oklab,var(--color-indigo-500) 15%,transparent)}}.bg-indigo-500\/20{background-color:#625fff33}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/20{background-color:color-mix(in oklab,var(--color-indigo-500) 20%,transparent)}}.bg-indigo-500\/30{background-color:#625fff4d}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/30{background-color:color-mix(in oklab,var(--color-indigo-500) 30%,transparent)}}.bg-indigo-500\/40{background-color:#625fff66}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/40{background-color:color-mix(in oklab,var(--color-indigo-500) 40%,transparent)}}.bg-indigo-500\/50{background-color:#625fff80}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/50{background-color:color-mix(in oklab,var(--color-indigo-500) 50%,transparent)}}.bg-indigo-500\/70{background-color:#625fffb3}@supports (color:color-mix(in lab,red,red)){.bg-indigo-500\/70{background-color:color-mix(in oklab,var(--color-indigo-500) 70%,transparent)}}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-indigo-600\/10{background-color:#4f39f61a}@supports (color:color-mix(in lab,red,red)){.bg-indigo-600\/10{background-color:color-mix(in oklab,var(--color-indigo-600) 10%,transparent)}}.bg-indigo-600\/15{background-color:#4f39f626}@supports (color:color-mix(in lab,red,red)){.bg-indigo-600\/15{background-color:color-mix(in oklab,var(--color-indigo-600) 15%,transparent)}}.bg-indigo-600\/20{background-color:#4f39f633}@supports (color:color-mix(in lab,red,red)){.bg-indigo-600\/20{background-color:color-mix(in oklab,var(--color-indigo-600) 20%,transparent)}}.bg-indigo-600\/25{background-color:#4f39f640}@supports (color:color-mix(in lab,red,red)){.bg-indigo-600\/25{background-color:color-mix(in oklab,var(--color-indigo-600) 25%,transparent)}}.bg-indigo-600\/30{background-color:#4f39f64d}@supports (color:color-mix(in lab,red,red)){.bg-indigo-600\/30{background-color:color-mix(in oklab,var(--color-indigo-600) 30%,transparent)}}.bg-purple-500\/40{background-color:#ac4bff66}@supports (color:color-mix(in lab,red,red)){.bg-purple-500\/40{background-color:color-mix(in oklab,var(--color-purple-500) 40%,transparent)}}.bg-rose-500\/20{background-color:#ff235733}@supports (color:color-mix(in lab,red,red)){.bg-rose-500\/20{background-color:color-mix(in oklab,var(--color-rose-500) 20%,transparent)}}.bg-rose-600{background-color:var(--color-rose-600)}.bg-rose-800{background-color:var(--color-rose-800)}.bg-rose-800\/40{background-color:#a3003766}@supports (color:color-mix(in lab,red,red)){.bg-rose-800\/40{background-color:color-mix(in oklab,var(--color-rose-800) 40%,transparent)}}.bg-slate-500{background-color:var(--color-slate-500)}.bg-slate-600\/60{background-color:#45556c99}@supports (color:color-mix(in lab,red,red)){.bg-slate-600\/60{background-color:color-mix(in oklab,var(--color-slate-600) 60%,transparent)}}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/3{background-color:#ffffff08}@supports (color:color-mix(in lab,red,red)){.bg-white\/3{background-color:color-mix(in oklab,var(--color-white) 3%,transparent)}}.bg-white\/4{background-color:#ffffff0a}@supports (color:color-mix(in lab,red,red)){.bg-white\/4{background-color:color-mix(in oklab,var(--color-white) 4%,transparent)}}.bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab,red,red)){.bg-white\/5{background-color:color-mix(in oklab,var(--color-white) 5%,transparent)}}.bg-white\/6{background-color:#ffffff0f}@supports (color:color-mix(in lab,red,red)){.bg-white\/6{background-color:color-mix(in oklab,var(--color-white) 6%,transparent)}}.bg-white\/8{background-color:#ffffff14}@supports (color:color-mix(in lab,red,red)){.bg-white\/8{background-color:color-mix(in oklab,var(--color-white) 8%,transparent)}}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.bg-white\/10{background-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.bg-white\/12{background-color:#ffffff1f}@supports (color:color-mix(in lab,red,red)){.bg-white\/12{background-color:color-mix(in oklab,var(--color-white) 12%,transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab,red,red)){.bg-white\/20{background-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-indigo-600\/20{--tw-gradient-from:#4f39f633}@supports (color:color-mix(in lab,red,red)){.from-indigo-600\/20{--tw-gradient-from:color-mix(in oklab, var(--color-indigo-600) 20%, transparent)}}.from-indigo-600\/20{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-purple-600\/10{--tw-gradient-to:#9810fa1a}@supports (color:color-mix(in lab,red,red)){.to-purple-600\/10{--tw-gradient-to:color-mix(in oklab, var(--color-purple-600) 10%, transparent)}}.to-purple-600\/10{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-0\.5{padding-inline:calc(var(--spacing) * .5)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-8{padding-block:calc(var(--spacing) * 8)}.pt-0\.5{padding-top:calc(var(--spacing) * .5)}.pt-1{padding-top:var(--spacing)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-\[15vh\]{padding-top:15vh}.pr-2{padding-right:calc(var(--spacing) * 2)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pl-1{padding-left:var(--spacing)}.pl-2{padding-left:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[6px\]{font-size:6px}.text-\[7px\]{font-size:7px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-\[26px\]{font-size:26px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-300{color:var(--color-amber-300)}.text-amber-400{color:var(--color-amber-400)}.text-amber-500\/80{color:#f99c00cc}@supports (color:color-mix(in lab,red,red)){.text-amber-500\/80{color:color-mix(in oklab,var(--color-amber-500) 80%,transparent)}}.text-emerald-200{color:var(--color-emerald-200)}.text-emerald-300{color:var(--color-emerald-300)}.text-emerald-400{color:var(--color-emerald-400)}.text-indigo-200{color:var(--color-indigo-200)}.text-indigo-300{color:var(--color-indigo-300)}.text-indigo-400{color:var(--color-indigo-400)}.text-indigo-400\/60{color:#7d87ff99}@supports (color:color-mix(in lab,red,red)){.text-indigo-400\/60{color:color-mix(in oklab,var(--color-indigo-400) 60%,transparent)}}.text-indigo-400\/70{color:#7d87ffb3}@supports (color:color-mix(in lab,red,red)){.text-indigo-400\/70{color:color-mix(in oklab,var(--color-indigo-400) 70%,transparent)}}.text-orange-400{color:var(--color-orange-400)}.text-pink-400{color:var(--color-pink-400)}.text-rose-300{color:var(--color-rose-300)}.text-rose-400{color:var(--color-rose-400)}.text-sky-400{color:var(--color-sky-400)}.text-slate-100{color:var(--color-slate-100)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-teal-400{color:var(--color-teal-400)}.text-violet-400{color:var(--color-violet-400)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab,red,red)){.text-white\/70{color:color-mix(in oklab,var(--color-white) 70%,transparent)}}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab,red,red)){.text-white\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.text-white\/85{color:#ffffffd9}@supports (color:color-mix(in lab,red,red)){.text-white\/85{color:color-mix(in oklab,var(--color-white) 85%,transparent)}}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.italic{font-style:italic}.proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.placeholder-slate-600::placeholder{color:var(--color-slate-600)}.accent-indigo-500{accent-color:var(--color-indigo-500)}.opacity-0{opacity:0}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-70{opacity:.7}.opacity-90{opacity:.9}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-black\/60{--tw-shadow-color:#0009}@supports (color:color-mix(in lab,red,red)){.shadow-black\/60{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-black) 60%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-emerald-600\/30{--tw-shadow-color:#0097674d}@supports (color:color-mix(in lab,red,red)){.shadow-emerald-600\/30{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-emerald-600) 30%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-indigo-600\/30{--tw-shadow-color:#4f39f64d}@supports (color:color-mix(in lab,red,red)){.shadow-indigo-600\/30{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-indigo-600) 30%, transparent) var(--tw-shadow-alpha), transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.delay-5{transition-delay:5ms}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.group-hover\:text-slate-300:is(:where(.group):hover *){color:var(--color-slate-300)}.group-hover\:text-slate-500:is(:where(.group):hover *){color:var(--color-slate-500)}.group-hover\:text-white:is(:where(.group):hover *){color:var(--color-white)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\:text-slate-500::placeholder{color:var(--color-slate-500)}.placeholder\:text-slate-600::placeholder{color:var(--color-slate-600)}@media(hover:hover){.hover\:border-rose-500\/30:hover{border-color:#ff23574d}@supports (color:color-mix(in lab,red,red)){.hover\:border-rose-500\/30:hover{border-color:color-mix(in oklab,var(--color-rose-500) 30%,transparent)}}.hover\:border-white\/12:hover{border-color:#ffffff1f}@supports (color:color-mix(in lab,red,red)){.hover\:border-white\/12:hover{border-color:color-mix(in oklab,var(--color-white) 12%,transparent)}}.hover\:border-white\/14:hover{border-color:#ffffff24}@supports (color:color-mix(in lab,red,red)){.hover\:border-white\/14:hover{border-color:color-mix(in oklab,var(--color-white) 14%,transparent)}}.hover\:bg-emerald-500:hover{background-color:var(--color-emerald-500)}.hover\:bg-emerald-500\/10:hover{background-color:#00bb7f1a}@supports (color:color-mix(in lab,red,red)){.hover\:bg-emerald-500\/10:hover{background-color:color-mix(in oklab,var(--color-emerald-500) 10%,transparent)}}.hover\:bg-indigo-500:hover{background-color:var(--color-indigo-500)}.hover\:bg-indigo-500\/20:hover{background-color:#625fff33}@supports (color:color-mix(in lab,red,red)){.hover\:bg-indigo-500\/20:hover{background-color:color-mix(in oklab,var(--color-indigo-500) 20%,transparent)}}.hover\:bg-indigo-600\/25:hover{background-color:#4f39f640}@supports (color:color-mix(in lab,red,red)){.hover\:bg-indigo-600\/25:hover{background-color:color-mix(in oklab,var(--color-indigo-600) 25%,transparent)}}.hover\:bg-indigo-600\/30:hover{background-color:#4f39f64d}@supports (color:color-mix(in lab,red,red)){.hover\:bg-indigo-600\/30:hover{background-color:color-mix(in oklab,var(--color-indigo-600) 30%,transparent)}}.hover\:bg-indigo-600\/35:hover{background-color:#4f39f659}@supports (color:color-mix(in lab,red,red)){.hover\:bg-indigo-600\/35:hover{background-color:color-mix(in oklab,var(--color-indigo-600) 35%,transparent)}}.hover\:bg-rose-500:hover{background-color:var(--color-rose-500)}.hover\:bg-rose-500\/10:hover{background-color:#ff23571a}@supports (color:color-mix(in lab,red,red)){.hover\:bg-rose-500\/10:hover{background-color:color-mix(in oklab,var(--color-rose-500) 10%,transparent)}}.hover\:bg-white\/4:hover{background-color:#ffffff0a}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/4:hover{background-color:color-mix(in oklab,var(--color-white) 4%,transparent)}}.hover\:bg-white\/5:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/5:hover{background-color:color-mix(in oklab,var(--color-white) 5%,transparent)}}.hover\:bg-white\/6:hover{background-color:#ffffff0f}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/6:hover{background-color:color-mix(in oklab,var(--color-white) 6%,transparent)}}.hover\:bg-white\/8:hover{background-color:#ffffff14}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/8:hover{background-color:color-mix(in oklab,var(--color-white) 8%,transparent)}}.hover\:bg-white\/12:hover{background-color:#ffffff1f}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/12:hover{background-color:color-mix(in oklab,var(--color-white) 12%,transparent)}}.hover\:text-emerald-300:hover{color:var(--color-emerald-300)}.hover\:text-indigo-400:hover{color:var(--color-indigo-400)}.hover\:text-rose-300:hover{color:var(--color-rose-300)}.hover\:text-rose-400:hover{color:var(--color-rose-400)}.hover\:text-slate-200:hover{color:var(--color-slate-200)}.hover\:text-slate-300:hover{color:var(--color-slate-300)}.hover\:text-slate-400:hover{color:var(--color-slate-400)}.hover\:text-white:hover{color:var(--color-white)}.hover\:opacity-100:hover{opacity:1}}.focus\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\:opacity-100:focus{opacity:1}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-25:disabled{opacity:.25}.disabled\:opacity-40:disabled{opacity:.4}@media(min-width:40rem){.sm\:block{display:block}.sm\:inline{display:inline}.sm\:gap-3{gap:calc(var(--spacing) * 3)}.sm\:opacity-0{opacity:0}.sm\:group-focus-within\:opacity-100:is(:where(.group):focus-within *){opacity:1}@media(hover:hover){.sm\:group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}}@media(min-width:48rem){.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-\[360px\]{width:360px}.md\:flex-1{flex:1}.md\:flex-none{flex:none}.md\:flex-nowrap{flex-wrap:nowrap}.md\:py-0{padding-block:0}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}.clampRange.svelte-iy59wr{-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;margin:0}.clampRange.svelte-iy59wr::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:9999px;background:transparent;cursor:pointer;pointer-events:auto}.clampRange.svelte-iy59wr::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:9999px;background:transparent;cursor:pointer;pointer-events:auto}.clampRange.svelte-iy59wr::-moz-range-track{background:transparent}@layer slashed.tokens,slashed.reset,slashed.base,slashed.forms,slashed.layout,slashed.components,slashed.macros,slashed.utilities,slashed.states,slashed.themes,slashed.motion,slashed.accessibility,slashed.print,slashed.legacy,slashed.overrides;@layer slashed.tokens{@property --sf-color-primary-source-light{syntax: ""; inherits: true; initial-value: oklch(.47 .27 264);}@property --sf-color-secondary-source-light{syntax: ""; inherits: true; initial-value: oklch(.22 .04 264);}@property --sf-color-tertiary-source-light{syntax: ""; inherits: true; initial-value: oklch(.42 .22 295);}@property --sf-color-action-source-light{syntax: ""; inherits: true; initial-value: oklch(.5 .22 235);}@property --sf-color-neutral-source-light{syntax: ""; inherits: true; initial-value: oklch(.52 .025 260);}@property --sf-color-base-source-light{syntax: ""; inherits: true; initial-value: oklch(.96 .006 250);}@property --sf-color-success-source-light{syntax: ""; inherits: true; initial-value: oklch(.5 .16 145);}@property --sf-color-warning-source-light{syntax: ""; inherits: true; initial-value: oklch(.75 .17 80);}@property --sf-color-info-source-light{syntax: ""; inherits: true; initial-value: oklch(.48 .18 235);}@property --sf-color-danger-source-light{syntax: ""; inherits: true; initial-value: oklch(.48 .22 12);}:root{--sf-color-primary-source-light: oklch(.47 .27 264);--sf-color-secondary-source-light: oklch(.22 .04 264);--sf-color-tertiary-source-light: oklch(.42 .22 295);--sf-color-action-source-light: oklch(.5 .22 235);--sf-color-neutral-source-light: oklch(.52 .025 260);--sf-color-base-source-light: oklch(.96 .006 250);--sf-color-success-source-light: oklch(.5 .16 145);--sf-color-warning-source-light: oklch(.75 .17 80);--sf-color-info-source-light: oklch(.48 .18 235);--sf-color-danger-source-light: oklch(.48 .22 12)}@property --sf-color-primary-source-dark{syntax: ""; inherits: true; initial-value: oklch(.715 .243 264);}@property --sf-color-secondary-source-dark{syntax: ""; inherits: true; initial-value: oklch(.84 .036 264);}@property --sf-color-tertiary-source-dark{syntax: ""; inherits: true; initial-value: oklch(.74 .198 295);}@property --sf-color-action-source-dark{syntax: ""; inherits: true; initial-value: oklch(.7 .198 235);}@property --sf-color-neutral-source-dark{syntax: ""; inherits: true; initial-value: oklch(.69 .0225 260);}@property --sf-color-base-source-dark{syntax: ""; inherits: true; initial-value: oklch(.22 .003 250);}@property --sf-color-success-source-dark{syntax: ""; inherits: true; initial-value: oklch(.7 .144 145);}@property --sf-color-warning-source-dark{syntax: ""; inherits: true; initial-value: oklch(.65 .153 80);}@property --sf-color-info-source-dark{syntax: ""; inherits: true; initial-value: oklch(.71 .162 235);}@property --sf-color-danger-source-dark{syntax: ""; inherits: true; initial-value: oklch(.71 .198 12);}@property --sf-color-primary{syntax: ""; inherits: true; initial-value: oklch(.47 .27 264);}@property --sf-color-secondary{syntax: ""; inherits: true; initial-value: oklch(.22 .04 264);}@property --sf-color-tertiary{syntax: ""; inherits: true; initial-value: oklch(.42 .22 295);}@property --sf-color-action{syntax: ""; inherits: true; initial-value: oklch(.5 .22 235);}@property --sf-color-neutral{syntax: ""; inherits: true; initial-value: oklch(.52 .025 260);}@property --sf-color-base{syntax: ""; inherits: true; initial-value: oklch(.96 .006 250);}@property --sf-color-success{syntax: ""; inherits: true; initial-value: oklch(.5 .16 145);}@property --sf-color-warning{syntax: ""; inherits: true; initial-value: oklch(.75 .17 80);}@property --sf-color-info{syntax: ""; inherits: true; initial-value: oklch(.48 .18 235);}@property --sf-color-danger{syntax: ""; inherits: true; initial-value: oklch(.48 .22 12);}:root{--sf-color-primary: var(--sf-color-primary-source-light);--sf-color-secondary: var(--sf-color-secondary-source-light);--sf-color-tertiary: var(--sf-color-tertiary-source-light);--sf-color-action: var(--sf-color-action-source-light);--sf-color-neutral: var(--sf-color-neutral-source-light);--sf-color-base: var(--sf-color-base-source-light);--sf-color-success: var(--sf-color-success-source-light);--sf-color-warning: var(--sf-color-warning-source-light);--sf-color-info: var(--sf-color-info-source-light);--sf-color-danger: var(--sf-color-danger-source-light)}@property --sf-is-dark{syntax: ""; inherits: true; initial-value: 0;}@property --sf-is-active{syntax: ""; inherits: true; initial-value: 0;}@property --sf-is-current{syntax: ""; inherits: true; initial-value: 0;}@property --sf-is-pressed{syntax: ""; inherits: true; initial-value: 0;}@property --sf-is-open{syntax: ""; inherits: true; initial-value: 0;}@property --sf-fluid-min-vw{syntax: ""; inherits: true; initial-value: 22.5;}@property --sf-fluid-max-vw{syntax: ""; inherits: true; initial-value: 90;}@property --sf-text-ratio-min{syntax: ""; inherits: true; initial-value: 1.25;}@property --sf-text-ratio-max{syntax: ""; inherits: true; initial-value: 1.333;}@property --sf-text-base-min{syntax: ""; inherits: true; initial-value: 1;}@property --sf-text-base-max{syntax: ""; inherits: true; initial-value: 1.25;}@property --sf-text-display-base-min{syntax: ""; inherits: true; initial-value: 2.4;}@property --sf-text-display-base-max{syntax: ""; inherits: true; initial-value: 3;}@property --sf-space-ratio-min{syntax: ""; inherits: true; initial-value: 1.25;}@property --sf-space-ratio-max{syntax: ""; inherits: true; initial-value: 1.333;}@property --sf-space-base-min{syntax: ""; inherits: true; initial-value: 1;}@property --sf-space-base-max{syntax: ""; inherits: true; initial-value: 2;}@property --sf-radius-none{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-2xs{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-xs{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-s{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-m{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-l{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-2xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-3xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-4xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-radius-full{syntax: ""; inherits: true; initial-value: 9999px;}@property --sf-radius-pill{syntax: ""; inherits: true; initial-value: 9999px;}@property --sf-radius-outer{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-none{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-px{syntax: ""; inherits: true; initial-value: 1px;}@property --sf-space-2xs{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-xs{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-s{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-m{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-l{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-2xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-3xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-space-4xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-gap{syntax: ""; inherits: true; initial-value: 0;}@property --sf-content-gap{syntax: ""; inherits: true; initial-value: 0;}@property --sf-gutter{syntax: ""; inherits: true; initial-value: 0;}@property --sf-component-pad{syntax: ""; inherits: true; initial-value: 0;}@property --sf-field-block{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--xs{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--s{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--m{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--l{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-section-pad--2xl{syntax: ""; inherits: true; initial-value: 0;}@property --sf-shadow-none{syntax: "*"; inherits: true;}@property --sf-shadow-xs{syntax: "*"; inherits: true;}@property --sf-shadow-s{syntax: "*"; inherits: true;}@property --sf-shadow-m{syntax: "*"; inherits: true;}@property --sf-shadow-l{syntax: "*"; inherits: true;}@property --sf-shadow-xl{syntax: "*"; inherits: true;}@property --sf-shadow-2xl{syntax: "*"; inherits: true;}@property --sf-shadow-inner{syntax: "*"; inherits: true;}@property --sf-text-shadow-none{syntax: "*"; inherits: true;}@property --sf-text-shadow-s{syntax: "*"; inherits: true;}@property --sf-text-shadow-m{syntax: "*"; inherits: true;}@property --sf-text-shadow-l{syntax: "*"; inherits: true;}@property --sf-drop-shadow-s{syntax: "*"; inherits: true;}@property --sf-drop-shadow-m{syntax: "*"; inherits: true;}@property --sf-drop-shadow-l{syntax: "*"; inherits: true;}@property --sf-shadow-glow{syntax: "*"; inherits: true;}:root{--sf-fluid-min-vw: 22.5;--sf-fluid-max-vw: 90;--sf-text-ratio-min: 1.25;--sf-text-ratio-max: 1.333;--sf-text-base-min: 1;--sf-text-base-max: 1.25;--sf-text-display-base-min: 2.4;--sf-text-display-base-max: 3;--sf-space-ratio-min: 1.25;--sf-space-ratio-max: 1.333;--sf-space-base-min: 1;--sf-space-base-max: 2}:root{--sf-color-scheme: light dark;--sf-lumlocker: .65;--sf-color-surface: var(--sf-color-base);--sf-color-text--on-base: var(--sf-color-text);--sf-color-text--on-primary: oklch(.95 0 0);--sf-color-text--on-secondary: oklch(.95 0 0);--sf-color-text--on-tertiary: oklch(.95 0 0);--sf-color-text--on-action: oklch(.95 0 0);--sf-color-text--on-neutral: oklch(.95 0 0);--sf-color-text--on-success: oklch(.95 0 0);--sf-color-text--on-warning: oklch(.1 0 0);--sf-color-text--on-info: oklch(.95 0 0);--sf-color-text--on-danger: oklch(.95 0 0);--sf-color-text--on-inverse: oklch(.95 0 0);--sf-color-code-text: oklch(.1 0 0);--sf-color-border--focus: var(--sf-color-action);--sf-color-link--disabled: var(--sf-color-text--disabled);--sf-link-underline-offset: .15em;--sf-link-underline-thickness: auto;--sf-color-bg--disabled: var(--sf-color-inset);--sf-color-code-bg: var(--sf-color-inset);--sf-color-selection-text: inherit;--sf-color-mark-text: inherit;--sf-color-dim: oklch(0 0 0 / .5);--sf-color-white: oklch(100% 0 0);--sf-color-black: oklch(0% 0 0);--sf-scrollbar-thumb: var(--sf-color-neutral);--sf-scrollbar-track: transparent;--sf-shadow-strength: calc(.08 + var(--sf-is-dark) * .17);--sf-shadow-lightness: .15;--sf-shadow-glow-color: var(--sf-color-primary);--sf-opacity-disabled: .45;--sf-state-pending-opacity: .7;--sf-focus-ring-color: var(--sf-color-action);--sf-focus-ring-shadow: 0 0 0 var(--sf-focus-ring-offset) var(--sf-color-bg, var(--sf-color-base-source-light, #fff)), 0 0 0 calc(var(--sf-focus-ring-offset) + var(--sf-focus-ring-width)) var(--sf-focus-ring-color);--sf-caret-color: var(--sf-color-action)}@supports (color: light-dark(white,black)) and (color: oklch(from red l c h)){:root{--sf-color-primary: light-dark(var(--sf-color-primary-source-light), var(--sf-color-primary-source-dark, oklch(from var(--sf-color-primary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-secondary: light-dark(var(--sf-color-secondary-source-light), var(--sf-color-secondary-source-dark, oklch(from var(--sf-color-secondary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-tertiary: light-dark(var(--sf-color-tertiary-source-light), var(--sf-color-tertiary-source-dark, oklch(from var(--sf-color-tertiary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-action: light-dark(var(--sf-color-action-source-light), var(--sf-color-action-source-dark, oklch(from var(--sf-color-action-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-neutral: light-dark(var(--sf-color-neutral-source-light), var(--sf-color-neutral-source-dark, oklch(from var(--sf-color-neutral-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-base: light-dark(var(--sf-color-base-source-light), var(--sf-color-base-source-dark, oklch(from var(--sf-color-base-source-light) clamp(.16, calc(1.18 - l) , .24) calc(c/2) h)));--sf-color-success: light-dark(var(--sf-color-success-source-light), var(--sf-color-success-source-dark, oklch(from var(--sf-color-success-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-warning: light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-info: light-dark(var(--sf-color-info-source-light), var(--sf-color-info-source-dark, oklch(from var(--sf-color-info-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-danger: light-dark(var(--sf-color-danger-source-light), var(--sf-color-danger-source-dark, oklch(from var(--sf-color-danger-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)));--sf-color-text: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.05, calc(l - .4 - var(--sf-contrast-bias)), .35) c h), oklch(from var(--sf-color-neutral) clamp(.7, calc(l + .25 + var(--sf-contrast-bias)), 1) c h) );--sf-color-text--muted: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.35, calc(l - var(--sf-contrast-bias)), .62) c h), oklch(from var(--sf-color-neutral) clamp(.48, calc(l + var(--sf-contrast-bias)), .74) c h) );--sf-color-text--secondary: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.15, calc(l - .25 - var(--sf-contrast-bias)), .45) c h), oklch(from var(--sf-color-neutral) clamp(.55, calc(l + .1 + var(--sf-contrast-bias)), .9) c h) );--sf-color-text--placeholder: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.45, calc(l + .15) , .75) c h), oklch(from var(--sf-color-neutral) clamp(.35, calc(l - .1) , .65) c h) );--sf-color-text--disabled: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.55, calc(l + .25) , .82) c h), oklch(from var(--sf-color-neutral) clamp(.25, calc(l - .2) , .55) c h) );--sf-color-text--inverse: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.85, calc(l + .4) , .98) c h), oklch(from var(--sf-color-neutral) clamp(.05, calc(l - .4) , .35) c h) );--sf-color-heading: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.05, calc(l - .4 - var(--sf-contrast-bias)), .35) c h), oklch(from var(--sf-color-neutral) clamp(.7, calc(l + .25 + var(--sf-contrast-bias)), 1) c h) );--sf-color-border: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.7, calc(l + .35) , .95) .005 h), oklch(from var(--sf-color-neutral) clamp(.25, calc(l - .3) , .55) .005 h) );--sf-color-border--subtle: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.75, calc(l + .4) , .97) .005 h), oklch(from var(--sf-color-neutral) clamp(.2, calc(l - .38) , .45) .005 h) );--sf-color-border--strong: light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(.55, calc(l + .1) , .85) .02 h), oklch(from var(--sf-color-neutral) clamp(.38, calc(l - .1) , .65) .02 h) );--sf-color-link: light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - .07, .48), 1) c h), oklch(from var(--sf-color-action) clamp(.68, l, 1) c h) );--sf-color-link--hover: light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - .15, .4), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + .1, .68), 1) c h) );--sf-color-link--active: light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - .21, .34), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + .15, .74), 1) c h) );--sf-color-link--visited: light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - .07, .48), 1) c calc(h + 60) ), oklch(from var(--sf-color-action) clamp(.68, l, 1) c calc(h + 60) ) );--sf-color-selection-bg: light-dark( oklch(from var(--sf-color-action-source-light) l c h / .28), oklch(from var(--sf-color-action-source-dark) clamp(.62, calc(.93 - (l*.4)) , .78) c h / .55) );--sf-color-success-strong: light-dark( oklch(from var(--sf-color-success-source-light) calc(l - .15) c h), oklch(from var(--sf-color-success) clamp(.7, calc(l + .15) , 1) c h) );--sf-color-warning-strong: light-dark( oklch(from var(--sf-color-warning-source-light) calc(l - .25) c h), oklch(from var(--sf-color-warning) clamp(.7, calc(l + .05) , 1) c h) );--sf-color-info-strong: light-dark( oklch(from var(--sf-color-info-source-light) calc(l - .1) c h), oklch(from var(--sf-color-info) clamp(.7, calc(l + .15) , 1) c h) );--sf-color-danger-strong: light-dark( oklch(from var(--sf-color-danger-source-light) calc(l - .1) c h), oklch(from var(--sf-color-danger) clamp(.7, calc(l + .15) , 1) c h) )}}@supports (color: oklch(from red l c h)){:root{--sf-color-bg: oklch(from var(--sf-color-base) calc(l + .02) c h);--sf-color-inset: oklch(from var(--sf-color-base) calc(l - .02) c h);--sf-color-raised: oklch(from var(--sf-color-base) calc(l + .04) c h);--sf-color-overlay: oklch(from var(--sf-color-base) l c h / .9);--sf-color-inverse: oklch(from var(--sf-color-base) calc(1 - l) c h);--sf-color-border--disabled: oklch(from var(--sf-color-border--subtle) l 0 h / .5);--sf-color-border--translucent: oklch(from var(--sf-color-neutral) l c h / .15);--sf-color-link--underline: oklch(from var(--sf-color-action) l c h / .3);--sf-color-bg--hover: oklch(from var(--sf-color-neutral) l c h / .08);--sf-color-bg--active: oklch(from var(--sf-color-neutral) l c h / .12);--sf-color-bg--selected: oklch(from var(--sf-color-action) l c h / .1);--sf-color-bg--focus: oklch(from var(--sf-color-action) l c h / .06);--sf-color-mark-bg: oklch(from var(--sf-color-warning) l c h / .25);--sf-color-success-subtle: oklch(from var(--sf-color-success) l c h / .12);--sf-color-success-muted: oklch(from var(--sf-color-success) l c h / .3);--sf-color-warning-subtle: oklch(from var(--sf-color-warning) l c h / .12);--sf-color-warning-muted: oklch(from var(--sf-color-warning) l c h / .3);--sf-color-info-subtle: oklch(from var(--sf-color-info) l c h / .1);--sf-color-info-muted: oklch(from var(--sf-color-info) l c h / .3);--sf-color-danger-subtle: oklch(from var(--sf-color-danger) l c h / .1);--sf-color-danger-muted: oklch(from var(--sf-color-danger) l c h / .3);--sf-gradient-primary: linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - .08) c h));--sf-gradient-secondary: linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - .08) c h));--sf-gradient-tertiary: linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - .08) c h));--sf-gradient-brand: linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30) ));--sf-gradient-surface: linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg));--sf-gradient-fade--r: linear-gradient(in oklch to right, transparent, var(--sf-color-bg));--sf-gradient-fade--l: linear-gradient(in oklch to left, transparent, var(--sf-color-bg));--sf-gradient-fade--t: linear-gradient(in oklch to top, transparent, var(--sf-color-bg));--sf-gradient-fade--b: linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg));--sf-shadow-glow: 0 0 15px 2px oklch(from var(--sf-shadow-glow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7))}}@supports (color: oklch(from red l c h)) and (width: calc(1px*sign(1))){:root{--sf-color-code-text: oklch(from var(--sf-color-code-bg) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-primary: oklch(from var(--sf-color-primary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-secondary: oklch(from var(--sf-color-secondary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-tertiary: oklch(from var(--sf-color-tertiary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-action: oklch(from var(--sf-color-action) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-neutral: oklch(from var(--sf-color-neutral) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-success: oklch(from var(--sf-color-success) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-warning: oklch(from var(--sf-color-warning) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-info: oklch(from var(--sf-color-info) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-danger: oklch(from var(--sf-color-danger) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-inverse: oklch(from var(--sf-color-inverse) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0)}}@supports (color: oklch(from red l c h)){:root{--sf-palette-mix-50: 4%;--sf-palette-mix-100: 8%;--sf-palette-mix-200: 20%;--sf-palette-mix-300: 40%;--sf-palette-mix-400: 65%;--sf-palette-mix-600: 82%;--sf-palette-mix-700: 62%;--sf-palette-mix-800: 38%;--sf-palette-mix-900: 18%;--sf-palette-mix-950: 8%;--sf-color-primary-50: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-50), var(--sf-color-surface));--sf-color-primary-100: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-100), var(--sf-color-surface));--sf-color-primary-200: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-200), var(--sf-color-surface));--sf-color-primary-300: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-300), var(--sf-color-surface));--sf-color-primary-400: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-400), var(--sf-color-surface));--sf-color-primary-500: var(--sf-color-primary);--sf-color-primary-600: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-600), var(--sf-color-text));--sf-color-primary-700: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-700), var(--sf-color-text));--sf-color-primary-800: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-800), var(--sf-color-text));--sf-color-primary-900: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-900), var(--sf-color-text));--sf-color-primary-950: color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-950), var(--sf-color-text));--sf-color-primary-a5: oklch(from var(--sf-color-primary) l c h / .05);--sf-color-primary-a10: oklch(from var(--sf-color-primary) l c h / .1);--sf-color-primary-a30: oklch(from var(--sf-color-primary) l c h / .3);--sf-color-primary-a50: oklch(from var(--sf-color-primary) l c h / .5);--sf-color-primary-a80: oklch(from var(--sf-color-primary) l c h / .8);--sf-color-primary-superlight: var(--sf-color-primary-50);--sf-color-primary-xlight: var(--sf-color-primary-200);--sf-color-primary-lighter: var(--sf-color-primary-400);--sf-color-primary-darker: var(--sf-color-primary-600);--sf-color-primary-xdark: var(--sf-color-primary-800);--sf-color-primary-superdark: var(--sf-color-primary-950);--sf-color-primary--hover: var(--sf-color-primary-darker);--sf-color-primary--active: var(--sf-color-primary-xdark);--sf-color-primary-subtle: var(--sf-color-primary-a10);--sf-color-primary-muted: var(--sf-color-primary-a30);--sf-color-primary-ghost: var(--sf-color-primary-a5);--sf-color-secondary-50: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-50), var(--sf-color-surface));--sf-color-secondary-100: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-100), var(--sf-color-surface));--sf-color-secondary-200: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-200), var(--sf-color-surface));--sf-color-secondary-300: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-300), var(--sf-color-surface));--sf-color-secondary-400: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-400), var(--sf-color-surface));--sf-color-secondary-500: var(--sf-color-secondary);--sf-color-secondary-600: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-600), var(--sf-color-text));--sf-color-secondary-700: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-700), var(--sf-color-text));--sf-color-secondary-800: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-800), var(--sf-color-text));--sf-color-secondary-900: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-900), var(--sf-color-text));--sf-color-secondary-950: color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-950), var(--sf-color-text));--sf-color-secondary-a5: oklch(from var(--sf-color-secondary) l c h / .05);--sf-color-secondary-a10: oklch(from var(--sf-color-secondary) l c h / .1);--sf-color-secondary-a30: oklch(from var(--sf-color-secondary) l c h / .3);--sf-color-secondary-a50: oklch(from var(--sf-color-secondary) l c h / .5);--sf-color-secondary-a80: oklch(from var(--sf-color-secondary) l c h / .8);--sf-color-secondary-superlight: var(--sf-color-secondary-50);--sf-color-secondary-xlight: var(--sf-color-secondary-200);--sf-color-secondary-lighter: var(--sf-color-secondary-400);--sf-color-secondary-darker: var(--sf-color-secondary-600);--sf-color-secondary-xdark: var(--sf-color-secondary-800);--sf-color-secondary-superdark: var(--sf-color-secondary-950);--sf-color-secondary--hover: var(--sf-color-secondary-darker);--sf-color-secondary--active: var(--sf-color-secondary-xdark);--sf-color-secondary-subtle: var(--sf-color-secondary-a10);--sf-color-secondary-muted: var(--sf-color-secondary-a30);--sf-color-secondary-ghost: var(--sf-color-secondary-a5);--sf-color-tertiary-50: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-50), var(--sf-color-surface));--sf-color-tertiary-100: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-100), var(--sf-color-surface));--sf-color-tertiary-200: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-200), var(--sf-color-surface));--sf-color-tertiary-300: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-300), var(--sf-color-surface));--sf-color-tertiary-400: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-400), var(--sf-color-surface));--sf-color-tertiary-500: var(--sf-color-tertiary);--sf-color-tertiary-600: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-600), var(--sf-color-text));--sf-color-tertiary-700: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-700), var(--sf-color-text));--sf-color-tertiary-800: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-800), var(--sf-color-text));--sf-color-tertiary-900: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-900), var(--sf-color-text));--sf-color-tertiary-950: color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-950), var(--sf-color-text));--sf-color-tertiary-a5: oklch(from var(--sf-color-tertiary) l c h / .05);--sf-color-tertiary-a10: oklch(from var(--sf-color-tertiary) l c h / .1);--sf-color-tertiary-a30: oklch(from var(--sf-color-tertiary) l c h / .3);--sf-color-tertiary-a50: oklch(from var(--sf-color-tertiary) l c h / .5);--sf-color-tertiary-a80: oklch(from var(--sf-color-tertiary) l c h / .8);--sf-color-tertiary-superlight: var(--sf-color-tertiary-50);--sf-color-tertiary-xlight: var(--sf-color-tertiary-200);--sf-color-tertiary-lighter: var(--sf-color-tertiary-400);--sf-color-tertiary-darker: var(--sf-color-tertiary-600);--sf-color-tertiary-xdark: var(--sf-color-tertiary-800);--sf-color-tertiary-superdark: var(--sf-color-tertiary-950);--sf-color-tertiary--hover: var(--sf-color-tertiary-darker);--sf-color-tertiary--active: var(--sf-color-tertiary-xdark);--sf-color-tertiary-subtle: var(--sf-color-tertiary-a10);--sf-color-tertiary-muted: var(--sf-color-tertiary-a30);--sf-color-tertiary-ghost: var(--sf-color-tertiary-a5);--sf-color-action-50: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-50), var(--sf-color-surface));--sf-color-action-100: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-100), var(--sf-color-surface));--sf-color-action-200: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-200), var(--sf-color-surface));--sf-color-action-300: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-300), var(--sf-color-surface));--sf-color-action-400: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-400), var(--sf-color-surface));--sf-color-action-500: var(--sf-color-action);--sf-color-action-600: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-600), var(--sf-color-text));--sf-color-action-700: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-700), var(--sf-color-text));--sf-color-action-800: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-800), var(--sf-color-text));--sf-color-action-900: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-900), var(--sf-color-text));--sf-color-action-950: color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-950), var(--sf-color-text));--sf-color-action-a5: oklch(from var(--sf-color-action) l c h / .05);--sf-color-action-a10: oklch(from var(--sf-color-action) l c h / .1);--sf-color-action-a30: oklch(from var(--sf-color-action) l c h / .3);--sf-color-action-a50: oklch(from var(--sf-color-action) l c h / .5);--sf-color-action-a80: oklch(from var(--sf-color-action) l c h / .8);--sf-color-action-superlight: var(--sf-color-action-50);--sf-color-action-xlight: var(--sf-color-action-200);--sf-color-action-lighter: var(--sf-color-action-400);--sf-color-action-darker: var(--sf-color-action-600);--sf-color-action-xdark: var(--sf-color-action-800);--sf-color-action-superdark: var(--sf-color-action-950);--sf-color-action--hover: var(--sf-color-action-darker);--sf-color-action--active: var(--sf-color-action-xdark);--sf-color-action-subtle: var(--sf-color-action-a10);--sf-color-action-muted: var(--sf-color-action-a30);--sf-color-action-ghost: var(--sf-color-action-a5);--sf-color-neutral-50: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-50), var(--sf-color-surface));--sf-color-neutral-100: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-100), var(--sf-color-surface));--sf-color-neutral-200: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-200), var(--sf-color-surface));--sf-color-neutral-300: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-300), var(--sf-color-surface));--sf-color-neutral-400: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-400), var(--sf-color-surface));--sf-color-neutral-500: var(--sf-color-neutral);--sf-color-neutral-600: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-600), var(--sf-color-text));--sf-color-neutral-700: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-700), var(--sf-color-text));--sf-color-neutral-800: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-800), var(--sf-color-text));--sf-color-neutral-900: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-900), var(--sf-color-text));--sf-color-neutral-950: color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-950), var(--sf-color-text));--sf-color-neutral-a5: oklch(from var(--sf-color-neutral) l c h / .05);--sf-color-neutral-a10: oklch(from var(--sf-color-neutral) l c h / .1);--sf-color-neutral-a30: oklch(from var(--sf-color-neutral) l c h / .3);--sf-color-neutral-a50: oklch(from var(--sf-color-neutral) l c h / .5);--sf-color-neutral-a80: oklch(from var(--sf-color-neutral) l c h / .8);--sf-color-neutral-superlight: var(--sf-color-neutral-50);--sf-color-neutral-xlight: var(--sf-color-neutral-200);--sf-color-neutral-lighter: var(--sf-color-neutral-400);--sf-color-neutral-darker: var(--sf-color-neutral-600);--sf-color-neutral-xdark: var(--sf-color-neutral-800);--sf-color-neutral-superdark: var(--sf-color-neutral-950);--sf-color-neutral--hover: var(--sf-color-neutral-darker);--sf-color-neutral--active: var(--sf-color-neutral-xdark);--sf-color-neutral-subtle: var(--sf-color-neutral-a10);--sf-color-neutral-muted: var(--sf-color-neutral-a30);--sf-color-neutral-ghost: var(--sf-color-neutral-a5);--sf-color-base-50: oklch(from var(--sf-color-base) .97 c h);--sf-color-base-100: oklch(from var(--sf-color-base) .94 c h);--sf-color-base-200: oklch(from var(--sf-color-base) .88 c h);--sf-color-base-300: oklch(from var(--sf-color-base) .78 c h);--sf-color-base-400: oklch(from var(--sf-color-base) .65 c h);--sf-color-base-500: oklch(from var(--sf-color-base) .5 c h);--sf-color-base-600: oklch(from var(--sf-color-base) .37 c h);--sf-color-base-700: oklch(from var(--sf-color-base) .27 c h);--sf-color-base-800: oklch(from var(--sf-color-base) .17 c h);--sf-color-base-900: oklch(from var(--sf-color-base) .11 c h);--sf-color-base-950: oklch(from var(--sf-color-base) .06 c h);--sf-color-base-a5: oklch(from var(--sf-color-base) l c h / .05);--sf-color-base-a10: oklch(from var(--sf-color-base) l c h / .1);--sf-color-base-a30: oklch(from var(--sf-color-base) l c h / .3);--sf-color-base-a50: oklch(from var(--sf-color-base) l c h / .5);--sf-color-base-a80: oklch(from var(--sf-color-base) l c h / .8);--sf-color-base--hover: oklch(from var(--sf-color-base) clamp(.01, calc(l - .04 + var(--sf-is-dark) * .08), .99) c h);--sf-color-base--active: oklch(from var(--sf-color-base) clamp(.01, calc(l - .08 + var(--sf-is-dark) * .16), .99) c h);--sf-color-base-subtle: var(--sf-color-base-a10);--sf-color-base-muted: var(--sf-color-base-a30);--sf-color-base-ghost: var(--sf-color-base-a5)}}:root{--sf-space-scale: 1;--sf-text-scale: 1;--sf-text-display-scale: 1;--sf-radius-scale: 1;--sf-motion-scale: 1;--sf-section-scale: 1;--sf-font-body: system-ui, -apple-system, sans-serif;--sf-font-heading: var(--sf-font-body);--sf-font-display: var(--sf-font-heading);--sf-font-mono: ui-monospace, monospace;--sf-font-humanist: "Seravek", "Gill Sans Nova", "Ubuntu", "Calibri", "DejaVu Sans", source-sans-pro, sans-serif;--sf-font-geometric: "Avenir", "Montserrat", "Corbel", "URW Gothic", source-sans-pro, sans-serif;--sf-font-slab: "Rockwell", "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;--sf-font-features: normal;--sf-font-variation: normal;--sf-optical-sizing: auto;--sf-font-weight-light: 300;--sf-font-weight-normal: 400;--sf-font-weight-medium: 500;--sf-font-weight-semibold: 600;--sf-font-weight-bold: 700;--sf-font-weight-body: var(--sf-font-weight-normal);--sf-font-weight-heading: var(--sf-font-weight-semibold);--sf-font-weight-display: var(--sf-font-weight-bold);--sf-font-weight-interactive: var(--sf-font-weight-semibold);--sf-font-weight-strong: var(--sf-font-weight-bold);--sf-current-font-weight: var(--sf-font-weight-bold);--sf-text-2xs: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) * 1rem)) * var(--sf-text-scale));--sf-text-xs: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) * 1rem)) * var(--sf-text-scale));--sf-text-s: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) * 1rem)) * var(--sf-text-scale));--sf-text-m: calc(clamp(calc(var(--sf-text-base-min) * 1rem), calc((var(--sf-text-base-max) - var(--sf-text-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * 1rem), calc(var(--sf-text-base-max) * 1rem)) * var(--sf-text-scale));--sf-text-l: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-scale));--sf-text-xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-scale));--sf-text-2xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) * 1rem)) * var(--sf-text-scale));--sf-text-3xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) * 1rem)) * var(--sf-text-scale));--sf-text-4xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) * 1rem)) * var(--sf-text-scale));--sf-text-display-s: calc(clamp(calc(var(--sf-text-display-base-min) * 1rem), calc((var(--sf-text-display-base-max) - var(--sf-text-display-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * 1rem), calc(var(--sf-text-display-base-max) * 1rem)) * var(--sf-text-display-scale));--sf-text-display-m: calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-display-scale));--sf-text-display-l: calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-display-scale));--sf-leading-tight: 1.1;--sf-leading-snug: 1.3;--sf-leading-normal: 1.5;--sf-leading-relaxed: 1.625;--sf-leading-taper: 0;--sf-display-s-line-height: var(--sf-leading-tight);--sf-display-m-line-height: 1.05;--sf-display-l-line-height: 1;--sf-tracking-tight: -.025em;--sf-tracking-normal: 0;--sf-tracking-wide: .025em;--sf-tracking-wider: .05em;--sf-tracking-widest: .1em;--sf-font-numeric: tabular-nums;--sf-text-2xs-line-height: var(--sf-leading-relaxed);--sf-text-2xs-font-weight: var(--sf-font-weight-body);--sf-text-2xs-letter-spacing: var(--sf-tracking-normal);--sf-text-2xs-max-width: 55ch;--sf-text-xs-line-height: calc(var(--sf-leading-relaxed) - 1 * var(--sf-leading-taper));--sf-text-xs-font-weight: var(--sf-font-weight-body);--sf-text-xs-letter-spacing: var(--sf-tracking-normal);--sf-text-xs-max-width: 60ch;--sf-text-s-line-height: calc(var(--sf-leading-relaxed) - 2 * var(--sf-leading-taper));--sf-text-s-font-weight: var(--sf-font-weight-body);--sf-text-s-letter-spacing: var(--sf-tracking-normal);--sf-text-s-max-width: 65ch;--sf-text-m-line-height: calc(var(--sf-leading-normal) - 3 * var(--sf-leading-taper));--sf-text-m-font-weight: var(--sf-font-weight-body);--sf-text-m-letter-spacing: var(--sf-tracking-normal);--sf-text-m-max-width: 65ch;--sf-text-l-line-height: calc(var(--sf-leading-normal) - 4 * var(--sf-leading-taper));--sf-text-l-font-weight: var(--sf-font-weight-body);--sf-text-l-letter-spacing: var(--sf-tracking-normal);--sf-text-l-max-width: none;--sf-text-xl-line-height: calc(var(--sf-leading-snug) - 5 * var(--sf-leading-taper));--sf-text-xl-font-weight: var(--sf-font-weight-body);--sf-text-xl-letter-spacing: var(--sf-tracking-normal);--sf-text-xl-max-width: none;--sf-text-2xl-line-height: calc(var(--sf-leading-snug) - 6 * var(--sf-leading-taper));--sf-text-2xl-font-weight: var(--sf-font-weight-heading);--sf-text-2xl-letter-spacing: var(--sf-tracking-normal);--sf-text-2xl-max-width: none;--sf-text-3xl-line-height: calc(var(--sf-leading-tight) - 7 * var(--sf-leading-taper));--sf-text-3xl-font-weight: var(--sf-font-weight-heading);--sf-text-3xl-letter-spacing: var(--sf-tracking-tight);--sf-text-3xl-max-width: none;--sf-text-4xl-line-height: calc(var(--sf-leading-tight) - 8 * var(--sf-leading-taper));--sf-text-4xl-font-weight: var(--sf-font-weight-heading);--sf-text-4xl-letter-spacing: var(--sf-tracking-tight);--sf-text-4xl-max-width: none;--sf-icon-xs: .875em;--sf-icon-s: 1em;--sf-icon-m: 1.5em;--sf-icon-l: 2em;--sf-icon-xl: 3em;--sf-icon-2xl: 4em;--sf-space-none: 0;--sf-space-px: 1px;--sf-space-2xs: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale));--sf-space-xs: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale));--sf-space-s: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) * 1rem)) * var(--sf-space-scale));--sf-space-m: calc(clamp(calc(var(--sf-space-base-min) * 1rem), calc((var(--sf-space-base-max) - var(--sf-space-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * 1rem), calc(var(--sf-space-base-max) * 1rem)) * var(--sf-space-scale));--sf-space-l: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) * 1rem)) * var(--sf-space-scale));--sf-space-xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale));--sf-space-2xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale));--sf-space-3xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale));--sf-space-4xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) * 1rem)) * var(--sf-space-scale));--sf-size-xs: 1.5rem;--sf-size-s: 2rem;--sf-size-m: 2.5rem;--sf-size-l: 2.75rem;--sf-size-xl: 3.5rem;--sf-container-narrow: 38rem;--sf-container-prose: 65ch;--sf-container-default: 75rem;--sf-container-wide: 90rem;--sf-container-full: 100%;--sf-ratio-square: 1;--sf-ratio-video: 16 / 9;--sf-ratio-cinema: 21 / 9;--sf-ratio-4-3: 4 / 3;--sf-ratio-3-2: 3 / 2;--sf-ratio-portrait: 3 / 4;--sf-ratio-golden: 1.618 / 1;--sf-border-scale: 1;--sf-border-width-hairline: .5px;--sf-border-width-1: calc(1px * var(--sf-border-scale, 1));--sf-border-width-2: calc(2px * var(--sf-border-scale, 1));--sf-border-width-3: calc(3px * var(--sf-border-scale, 1));--sf-border-width-4: calc(4px * var(--sf-border-scale, 1));--sf-border-style: solid;--sf-border: var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border);--sf-border-subtle: var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle);--sf-border-strong: var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong);--sf-divider-width: var(--sf-border-width-1);--sf-divider-style: solid;--sf-divider-color: var(--sf-color-border);--sf-divider-gap: var(--sf-space-m);--sf-radius-none: 0;--sf-radius-2xs: calc(1px * var(--sf-radius-scale));--sf-radius-xs: calc(2px * var(--sf-radius-scale));--sf-radius-s: calc(4px * var(--sf-radius-scale));--sf-radius-m: calc(8px * var(--sf-radius-scale));--sf-radius-l: calc(12px * var(--sf-radius-scale));--sf-radius-xl: calc(16px * var(--sf-radius-scale));--sf-radius-2xl: calc(24px * var(--sf-radius-scale));--sf-radius-3xl: calc(32px * var(--sf-radius-scale));--sf-radius-4xl: calc(48px * var(--sf-radius-scale));--sf-radius-full: 9999px;--sf-radius-pill: var(--sf-radius-full);--sf-radius-outer: calc(var(--sf-radius-m) + var(--sf-component-pad));--sf-blur: 12px;--sf-opacity-muted: .5;--sf-duration-none: 0ms;--sf-duration-instant: calc(.1s * var(--sf-motion-scale));--sf-duration-fast: calc(.15s * var(--sf-motion-scale));--sf-duration-normal: calc(.25s * var(--sf-motion-scale));--sf-duration-slow: calc(.4s * var(--sf-motion-scale));--sf-duration-slower: calc(.6s * var(--sf-motion-scale));--sf-theme-transition-duration: calc(.3s * var(--sf-motion-scale));--sf-ease-linear: linear;--sf-ease-out: cubic-bezier(.25, 0, .15, 1);--sf-ease-in: cubic-bezier(.5, 0, .75, .25);--sf-ease-in-out: cubic-bezier(.4, 0, .2, 1);--sf-ease-spring: linear(0, .5, 1.1, .95, 1.02, 1);--sf-ease-elastic: linear(0, .3, 1.2, .9, 1.05, 1);--sf-ease-bounce: linear(0, .35 18%, 1 32%, .86 42%, 1.02 56%, .98 72%, 1);--sf-ease-overshoot: linear(0, .6 30%, 1.08 55%, .98 75%, 1);--sf-animation-fade-in: sf-fade-in var(--sf-duration-normal) var(--sf-ease-out) both;--sf-animation-fade-out: sf-fade-out var(--sf-duration-normal) var(--sf-ease-in) both;--sf-animation-slide-in-up: sf-slide-in-up var(--sf-duration-normal) var(--sf-ease-out) both;--sf-animation-slide-in-down: sf-slide-in-down var(--sf-duration-normal) var(--sf-ease-out) both;--sf-animation-slide-in-left: sf-slide-in-left var(--sf-duration-normal) var(--sf-ease-out) both;--sf-animation-slide-in-right: sf-slide-in-right var(--sf-duration-normal) var(--sf-ease-out) both;--sf-animation-scale-up: sf-scale-up var(--sf-duration-normal) var(--sf-ease-overshoot) both;--sf-animation-scale-down: sf-scale-down var(--sf-duration-normal) var(--sf-ease-in) both;--sf-animation-color-pulse: sf-color-pulse var(--sf-duration-slow) var(--sf-ease-in-out) infinite;--sf-animation-ping: sf-ping var(--sf-duration-slow) var(--sf-ease-out) infinite;--sf-animation-blink: sf-blink calc(1s * var(--sf-motion-scale)) steps(1, end) infinite;--sf-animation-float: sf-float calc(3s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite;--sf-animation-spin: sf-spin var(--sf-duration-slower) linear infinite;--sf-animation-shimmer: sf-shimmer calc(1.5s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite;--sf-animation-delay-1: calc(75ms * var(--sf-motion-scale));--sf-animation-delay-2: calc(.15s * var(--sf-motion-scale));--sf-animation-delay-3: calc(225ms * var(--sf-motion-scale));--sf-animation-delay-4: calc(.3s * var(--sf-motion-scale));--sf-animation-delay-5: calc(375ms * var(--sf-motion-scale));--sf-scroll-timeline-range-start: entry 0%;--sf-scroll-timeline-range-end: cover 30%;--sf-mask-scrim-start: var(--sf-space-l);--sf-mask-scrim-end: var(--sf-space-l);--sf-z-below: -1;--sf-z-base: 0;--sf-z-raised: 1;--sf-z-sticky: 1000;--sf-z-fixed: 1010;--sf-z-dropdown: 1020;--sf-z-overlay: 1030;--sf-z-modal: 1040;--sf-z-toast: 1050;--sf-z-tooltip: 1060;--sf-header-height-mobile: 3.5rem;--sf-header-height-desktop: 5rem;--sf-header-height: clamp( var(--sf-header-height-mobile), calc((var(--sf-header-height-desktop) - var(--sf-header-height-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-header-height-mobile)), var(--sf-header-height-desktop));--sf-sticky-offset-mobile: var(--sf-header-height-mobile);--sf-sticky-offset-desktop: var(--sf-header-height-desktop);--sf-sticky-offset: clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop));--sf-focus-ring-width: 2px;--sf-focus-ring-offset: 2px;--sf-focus-ring-style: solid;--sf-touch-target: var(--sf-size-l);--sf-contrast-bias: 0;--sf-contrast-threshold: .6;--sf-safe-top: env(safe-area-inset-top, 0px);--sf-safe-bottom: env(safe-area-inset-bottom, 0px);--sf-safe-left: env(safe-area-inset-left, 0px);--sf-safe-right: env(safe-area-inset-right, 0px);--sf-print-page-margin: 2cm;--sf-print-page-size: a4;--sf-print-base-size: 11pt;--sf-object-fit: cover;--sf-object-position: 50% 50%}@supports (color: oklch(from red l c h)){:root{--sf-shadow-color: oklch(from var(--sf-color-neutral) var(--sf-shadow-lightness) c h);--sf-shadow-none: none;--sf-shadow-xs: 0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .5), .7));--sf-shadow-s: 0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .5), .7)), 0 2px 6px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, var(--sf-shadow-strength), .7));--sf-shadow-m: 0 1px 3px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .5), .7)), 0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7));--sf-shadow-l: 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .5), .7)), 0 8px 24px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), .7)), 0 16px 48px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7));--sf-shadow-xl: 0 2px 8px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .5), .7)), 0 12px 36px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3.5), .7)), 0 24px 72px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), .7));--sf-shadow-2xl: 0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * .6), .7)), 0 20px 60px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 4), .7)), 0 40px 100px -8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 5), .7));--sf-shadow-inner: inset 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7));--sf-text-shadow-none: none;--sf-text-shadow-s: 0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), .7));--sf-text-shadow-m: 0 2px 4px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7));--sf-text-shadow-l: 0 4px 8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), .7));--sf-drop-shadow-s: drop-shadow(0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), .7)));--sf-drop-shadow-m: drop-shadow(0 4px 6px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), .7)));--sf-drop-shadow-l: drop-shadow(0 8px 16px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), .7)))}}:root{--sf-body-font-size: var(--sf-text-m);--sf-body-line-height: var(--sf-leading-normal);--sf-body-font-weight: var(--sf-font-weight-body);--sf-body-font-family: var(--sf-font-body);--sf-body-color: var(--sf-color-text);--sf-body-text-wrap: pretty;--sf-body-strong-weight: var(--sf-font-weight-strong);--sf-body-em-style: italic;--sf-code-font-size: .875em;--sf-heading-font-family: var(--sf-font-heading);--sf-heading-color: var(--sf-color-heading);--sf-heading-text-wrap: balance;--sf-h1-size: var(--sf-text-4xl);--sf-h1-line-height: var(--sf-leading-tight);--sf-h1-font-weight: var(--sf-font-weight-heading);--sf-h1-letter-spacing: var(--sf-tracking-tight);--sf-h2-size: var(--sf-text-3xl);--sf-h2-line-height: var(--sf-leading-tight);--sf-h2-font-weight: var(--sf-font-weight-heading);--sf-h2-letter-spacing: var(--sf-tracking-tight);--sf-h3-size: var(--sf-text-2xl);--sf-h3-line-height: var(--sf-leading-snug);--sf-h3-font-weight: var(--sf-font-weight-heading);--sf-h3-letter-spacing: var(--sf-tracking-normal);--sf-h4-size: var(--sf-text-xl);--sf-h4-line-height: var(--sf-leading-snug);--sf-h4-font-weight: var(--sf-font-weight-heading);--sf-h4-letter-spacing: var(--sf-tracking-normal);--sf-h5-size: var(--sf-text-l);--sf-h5-line-height: var(--sf-leading-normal);--sf-h5-font-weight: var(--sf-font-weight-heading);--sf-h5-letter-spacing: var(--sf-tracking-normal);--sf-h6-size: var(--sf-text-m);--sf-h6-line-height: var(--sf-leading-normal);--sf-h6-font-weight: var(--sf-font-weight-heading);--sf-h6-letter-spacing: var(--sf-tracking-wide);--sf-h1-max-width: none;--sf-h2-max-width: none;--sf-h3-max-width: none;--sf-h4-max-width: none;--sf-h5-max-width: none;--sf-h6-max-width: none;--sf-gap: var(--sf-space-m);--sf-content-gap: var(--sf-space-s);--sf-gutter: var(--sf-space-l);--sf-component-pad: var(--sf-space-m);--sf-field-block: var(--sf-space-l);--sf-field-required-marker: " *";--sf-link-external-marker: " ↗";--sf-section-pad: var(--sf-section-pad--m);--sf-section-pad--xs: calc(var(--sf-space-xl) * var(--sf-section-scale));--sf-section-pad--s: calc(var(--sf-space-2xl) * var(--sf-section-scale));--sf-section-pad--m: calc(var(--sf-space-3xl) * var(--sf-section-scale));--sf-section-pad--l: calc(var(--sf-space-4xl) * var(--sf-section-scale));--sf-section-pad--xl: calc(var(--sf-space-4xl) * 1.5 * var(--sf-section-scale));--sf-section-pad--2xl: calc(var(--sf-space-4xl) * 2 * var(--sf-section-scale));--sf-transition-colors: color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out);--sf-transition-form-field: color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out);--sf-transition-transform: transform var(--sf-duration-normal) var(--sf-ease-out);--sf-transition-opacity: opacity var(--sf-duration-normal) var(--sf-ease-out);--sf-transition-shadow: box-shadow var(--sf-duration-normal) var(--sf-ease-out);--sf-transition-fast: color var(--sf-duration-fast) var(--sf-ease-out), background-color var(--sf-duration-fast) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out), transform var(--sf-duration-fast) var(--sf-ease-out), filter var(--sf-duration-fast) var(--sf-ease-out);--sf-transition-slow: color var(--sf-duration-slow) var(--sf-ease-in-out), background-color var(--sf-duration-slow) var(--sf-ease-in-out), border-color var(--sf-duration-slow) var(--sf-ease-in-out), box-shadow var(--sf-duration-slow) var(--sf-ease-in-out), opacity var(--sf-duration-slow) var(--sf-ease-in-out), transform var(--sf-duration-slow) var(--sf-ease-in-out), filter var(--sf-duration-slow) var(--sf-ease-in-out);--sf-transition-enter: color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), box-shadow var(--sf-duration-normal) var(--sf-ease-out), opacity var(--sf-duration-normal) var(--sf-ease-out), transform var(--sf-duration-normal) var(--sf-ease-out), filter var(--sf-duration-normal) var(--sf-ease-out);--sf-transition-exit: color var(--sf-duration-fast) var(--sf-ease-in), background-color var(--sf-duration-fast) var(--sf-ease-in), border-color var(--sf-duration-fast) var(--sf-ease-in), box-shadow var(--sf-duration-fast) var(--sf-ease-in), opacity var(--sf-duration-fast) var(--sf-ease-in), transform var(--sf-duration-fast) var(--sf-ease-in), filter var(--sf-duration-fast) var(--sf-ease-in);--sf-transition-overlay: overlay var(--sf-duration-normal) allow-discrete, display var(--sf-duration-normal) allow-discrete}}@layer slashed.tokens{:root{--sf-stack-gap: var(--sf-content-gap);--sf-box-padding: var(--sf-space-m);--sf-box-border-width: 0;--sf-box-border-color: var(--sf-color-border);--sf-center-max: var(--sf-container-default);--sf-center-gutter: var(--sf-gutter);--sf-cluster-gap: var(--sf-gap);--sf-cluster-align: center;--sf-cluster-justify: flex-start;--sf-sidebar-gap: var(--sf-gap);--sf-sidebar-min-width: 50%;--sf-sidebar-width: 18rem;--sf-switcher-threshold: 30rem;--sf-switcher-gap: var(--sf-gap);--sf-grid-min: 16rem;--sf-grid-gap: var(--sf-gap);--sf-grid-min-xs: 10rem;--sf-grid-min-s: 13rem;--sf-grid-min-m: 16rem;--sf-grid-min-l: 20rem;--sf-grid-min-xl: 24rem;--sf-grid-min-2xl: 28rem;--sf-equal-min-col: 16rem;--sf-equal-min-col-2: 28rem;--sf-equal-min-col-3: 15rem;--sf-equal-min-col-4: 16rem;--sf-equal-min-col-6: 10rem;--sf-equal-gap: var(--sf-gap);--sf-cover-min-height: 100dvh;--sf-cover-padding: var(--sf-section-pad);--sf-frame-ratio: 16 / 9;--sf-bg-inset: 0;--sf-bg-fit: cover;--sf-bg-position: 50% 50%;--sf-bg-radius: 0;--sf-bg-z: -2;--sf-icon-box-pad: .5em;--sf-icon-box-radius: var(--sf-radius-s);--sf-icon-box-bg: var(--sf-color-inset);--sf-icon-box-border: var(--sf-border-width-1) solid var(--sf-color-border);--sf-reel-item-width: max-content;--sf-reel-gap: var(--sf-gap);--sf-reel-height: auto;--sf-imposter-margin: var(--sf-space-m);--sf-bento-cols-default: 4;--sf-bento-row-default: 10rem;--sf-bento-row-compact: 6rem;--sf-bento-row-tall: 16rem;--sf-bento-gap: var(--sf-gap);--sf-breakout-width: var(--sf-container-wide);--sf-content-width: var(--sf-container-default);--sf-prose-paragraph: var(--sf-content-gap);--sf-alternate-gap: var(--sf-content-gap);--sf-alternate-inner-gap: var(--sf-gap)}}@layer slashed.tokens{:root{--sf-flow-space: var(--sf-content-gap);--sf-line-clamp: 3;--sf-aspect: 16 / 9;--sf-prose-heading-gap: var(--sf-space-s);--sf-prose-list-gap: var(--sf-space-xs);--sf-prose-block-margin: var(--sf-space-m);--sf-prose-media-margin: var(--sf-space-m);--sf-prose-media-radius: var(--sf-radius-m);--sf-prose-figure-margin: var(--sf-space-l);--sf-prose-marker-color: var(--sf-color-primary);--sf-prose-figcaption-size: var(--sf-text-s);--sf-prose-blockquote-padding: var(--sf-space-m);--sf-prose-blockquote-border: var(--sf-border-width-2) solid var(--sf-color-border--subtle);--sf-prose-hr-margin: var(--sf-space-l);--sf-prose-nested-list-gap: var(--sf-space-2xs);--sf-prose-table-pad: var(--sf-space-xs);--sf-surface-color: var(--sf-color-base);--sf-scroll-shadow-size: 2rem;--sf-content-intrinsic-size: 500px;--sf-scrim-color: oklch(0 0 0 / .55);--sf-scrim-direction: to top;--sf-scrim-gradient: linear-gradient(var(--sf-scrim-direction), var(--sf-scrim-color), transparent);--sf-scrim-text-shadow: 0 1px 3px oklch(0 0 0 / .6)}}@layer slashed.themes{@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--sf-is-dark: 1}}[data-theme=light]{color-scheme:light;--sf-is-dark: 0}[data-theme=dark]{color-scheme:dark;--sf-is-dark: 1}:where([data-theme]:not(:root,html)){background-color:var(--sf-color-bg);color:var(--sf-color-text)}@supports (color: oklch(from red l c h)){:root[data-lumlocker]{--sf-color-primary: light-dark( oklch(from var(--sf-color-primary-source-light) var(--sf-lumlocker) c h), oklch(from var(--sf-color-primary-source-dark, var(--sf-color-primary-source-light)) var(--sf-lumlocker) c h) );--sf-color-secondary: light-dark( oklch(from var(--sf-color-secondary-source-light) var(--sf-lumlocker) c h), oklch(from var(--sf-color-secondary-source-dark, var(--sf-color-secondary-source-light)) var(--sf-lumlocker) c h) );--sf-color-tertiary: light-dark( oklch(from var(--sf-color-tertiary-source-light) var(--sf-lumlocker) c h), oklch(from var(--sf-color-tertiary-source-dark, var(--sf-color-tertiary-source-light)) var(--sf-lumlocker) c h) );--sf-color-action: light-dark( oklch(from var(--sf-color-action-source-light) var(--sf-lumlocker) c h), oklch(from var(--sf-color-action-source-dark, var(--sf-color-action-source-light)) var(--sf-lumlocker) c h) )}:root[data-lumlocker] [data-theme=dark]{--sf-color-primary: oklch(from var(--sf-color-primary-source-dark, var(--sf-color-primary-source-light)) var(--sf-lumlocker) c h);--sf-color-secondary: oklch(from var(--sf-color-secondary-source-dark, var(--sf-color-secondary-source-light)) var(--sf-lumlocker) c h);--sf-color-tertiary: oklch(from var(--sf-color-tertiary-source-dark, var(--sf-color-tertiary-source-light)) var(--sf-lumlocker) c h);--sf-color-action: oklch(from var(--sf-color-action-source-dark, var(--sf-color-action-source-light)) var(--sf-lumlocker) c h)}:root[data-lumlocker] [data-theme=light]{--sf-color-primary: oklch(from var(--sf-color-primary-source-light) var(--sf-lumlocker) c h);--sf-color-secondary: oklch(from var(--sf-color-secondary-source-light) var(--sf-lumlocker) c h);--sf-color-tertiary: oklch(from var(--sf-color-tertiary-source-light) var(--sf-lumlocker) c h);--sf-color-action: oklch(from var(--sf-color-action-source-light) var(--sf-lumlocker) c h)}}@supports (color: oklch(from red l c h)){:root{--sf-color-primary-source-dark: oklch(from var(--sf-color-primary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-secondary-source-dark: oklch(from var(--sf-color-secondary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-tertiary-source-dark: oklch(from var(--sf-color-tertiary-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-action-source-dark: oklch(from var(--sf-color-action-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-neutral-source-dark: oklch(from var(--sf-color-neutral-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-base-source-dark: oklch(from var(--sf-color-base-source-light) clamp(.16, calc(1.18 - l) , .24) calc(c/2) h);--sf-color-success-source-dark: oklch(from var(--sf-color-success-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-warning-source-dark: oklch(from var(--sf-color-warning-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-info-source-dark: oklch(from var(--sf-color-info-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h);--sf-color-danger-source-dark: oklch(from var(--sf-color-danger-source-light) clamp(.65, calc(.95 - (l/2)) , .88) calc(c*.9) h)}[data-theme=dark]{--sf-color-primary: var(--sf-color-primary-source-dark);--sf-color-secondary: var(--sf-color-secondary-source-dark);--sf-color-tertiary: var(--sf-color-tertiary-source-dark);--sf-color-action: var(--sf-color-action-source-dark);--sf-color-neutral: var(--sf-color-neutral-source-dark);--sf-color-base: var(--sf-color-base-source-dark);--sf-color-surface: var(--sf-color-base);--sf-color-bg: oklch(from var(--sf-color-base) calc(l + .02) c h);--sf-color-inset: oklch(from var(--sf-color-base) calc(l - .02) c h);--sf-color-raised: oklch(from var(--sf-color-base) calc(l + .04) c h);--sf-color-overlay: oklch(from var(--sf-color-base) l c h / .9);--sf-color-inverse: oklch(from var(--sf-color-base) calc(1 - l) c h);--sf-color-success: var(--sf-color-success-source-dark);--sf-color-warning: var(--sf-color-warning-source-dark);--sf-color-info: var(--sf-color-info-source-dark);--sf-color-danger: var(--sf-color-danger-source-dark);--sf-color-text: oklch(from var(--sf-color-neutral) clamp(.7, calc(l + .25 + var(--sf-contrast-bias)), 1) c h);--sf-color-text--secondary: oklch(from var(--sf-color-neutral) clamp(.55, calc(l + .1 + var(--sf-contrast-bias)), .9) c h);--sf-color-text--placeholder: oklch(from var(--sf-color-neutral) clamp(.35, calc(l - .1) , .65) c h);--sf-color-text--disabled: oklch(from var(--sf-color-neutral) clamp(.25, calc(l - .2) , .55) c h);--sf-color-text--inverse: oklch(from var(--sf-color-neutral) clamp(.05, calc(l - .4) , .35) c h);--sf-color-heading: oklch(from var(--sf-color-neutral) clamp(.7, calc(l + .25 + var(--sf-contrast-bias)), 1) c h);--sf-color-border: oklch(from var(--sf-color-neutral) clamp(.25, calc(l - .3) , .55) .005 h);--sf-color-border--subtle: oklch(from var(--sf-color-neutral) clamp(.2, calc(l - .38) , .45) .005 h);--sf-color-border--strong: oklch(from var(--sf-color-neutral) clamp(.38, calc(l - .1) , .65) .02 h);--sf-color-link: oklch(from var(--sf-color-action) clamp(.68, l, 1) c h);--sf-color-link--hover: oklch(from var(--sf-color-action) clamp(0, max(l + .1, .68), 1) c h);--sf-color-link--active: oklch(from var(--sf-color-action) clamp(0, max(l + .15, .74), 1) c h);--sf-color-link--visited: oklch(from var(--sf-color-action) clamp(.68, l, 1) c calc(h + 60) );--sf-color-selection-bg: oklch(from var(--sf-color-action-source-dark) clamp(.62, calc(.93 - (l*.4)) , .78) c h / .55);--sf-color-success-strong: oklch(from var(--sf-color-success) clamp(.7, calc(l + .15) , 1) c h);--sf-color-warning-strong: oklch(from var(--sf-color-warning) clamp(.7, calc(l + .05) , 1) c h);--sf-color-info-strong: oklch(from var(--sf-color-info) clamp(.7, calc(l + .15) , 1) c h);--sf-color-danger-strong: oklch(from var(--sf-color-danger) clamp(.7, calc(l + .15) , 1) c h)}[data-theme=light]{--sf-color-primary: var(--sf-color-primary-source-light);--sf-color-secondary: var(--sf-color-secondary-source-light);--sf-color-tertiary: var(--sf-color-tertiary-source-light);--sf-color-action: var(--sf-color-action-source-light);--sf-color-neutral: var(--sf-color-neutral-source-light);--sf-color-base: var(--sf-color-base-source-light);--sf-color-surface: var(--sf-color-base);--sf-color-bg: oklch(from var(--sf-color-base) calc(l + .02) c h);--sf-color-inset: oklch(from var(--sf-color-base) calc(l - .02) c h);--sf-color-raised: oklch(from var(--sf-color-base) calc(l + .04) c h);--sf-color-overlay: oklch(from var(--sf-color-base) l c h / .9);--sf-color-inverse: oklch(from var(--sf-color-base) calc(1 - l) c h);--sf-color-success: var(--sf-color-success-source-light);--sf-color-warning: var(--sf-color-warning-source-light);--sf-color-info: var(--sf-color-info-source-light);--sf-color-danger: var(--sf-color-danger-source-light);--sf-color-text: oklch(from var(--sf-color-neutral-source-light) clamp(.05, calc(l - .4 - var(--sf-contrast-bias)), .35) c h);--sf-color-text--secondary: oklch(from var(--sf-color-neutral-source-light) clamp(.15, calc(l - .25 - var(--sf-contrast-bias)), .45) c h);--sf-color-text--placeholder: oklch(from var(--sf-color-neutral-source-light) clamp(.45, calc(l + .15) , .75) c h);--sf-color-text--disabled: oklch(from var(--sf-color-neutral-source-light) clamp(.55, calc(l + .25) , .82) c h);--sf-color-text--inverse: oklch(from var(--sf-color-neutral-source-light) clamp(.85, calc(l + .4) , .98) c h);--sf-color-heading: oklch(from var(--sf-color-neutral-source-light) clamp(.05, calc(l - .4 - var(--sf-contrast-bias)), .35) c h);--sf-color-border: oklch(from var(--sf-color-neutral-source-light) clamp(.7, calc(l + .35) , .95) .005 h);--sf-color-border--subtle: oklch(from var(--sf-color-neutral-source-light) clamp(.75, calc(l + .4) , .97) .005 h);--sf-color-border--strong: oklch(from var(--sf-color-neutral-source-light) clamp(.55, calc(l + .1) , .85) .02 h);--sf-color-link: oklch(from var(--sf-color-action) clamp(0, min(l - .07, .48), 1) c h);--sf-color-link--hover: oklch(from var(--sf-color-action) clamp(0, min(l - .15, .4), 1) c h);--sf-color-link--active: oklch(from var(--sf-color-action) clamp(0, min(l - .21, .34), 1) c h);--sf-color-link--visited: oklch(from var(--sf-color-action) clamp(0, min(l - .07, .48), 1) c calc(h + 60) );--sf-color-selection-bg: oklch(from var(--sf-color-action-source-light) l c h / .28);--sf-color-success-strong: oklch(from var(--sf-color-success-source-light) calc(l - .15) c h);--sf-color-warning-strong: oklch(from var(--sf-color-warning-source-light) calc(l - .25) c h);--sf-color-info-strong: oklch(from var(--sf-color-info-source-light) calc(l - .1) c h);--sf-color-danger-strong: oklch(from var(--sf-color-danger-source-light) calc(l - .1) c h)}}@supports (color: oklch(from red l c h)) and (width: calc(1px*sign(1))){[data-theme=dark],[data-theme=light]{--sf-color-text--on-primary: oklch(from var(--sf-color-primary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-secondary: oklch(from var(--sf-color-secondary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-tertiary: oklch(from var(--sf-color-tertiary) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-action: oklch(from var(--sf-color-action) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-neutral: oklch(from var(--sf-color-neutral) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-success: oklch(from var(--sf-color-success) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-warning: oklch(from var(--sf-color-warning) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-info: oklch(from var(--sf-color-info) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-danger: oklch(from var(--sf-color-danger) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0);--sf-color-text--on-inverse: oklch(from var(--sf-color-inverse) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0)}}.sf-theme-transition{transition:--sf-color-primary var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-secondary var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-tertiary var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-action var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-neutral var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-base var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-success var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-warning var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-info var(--sf-theme-transition-duration) var(--sf-ease-out),--sf-color-danger var(--sf-theme-transition-duration) var(--sf-ease-out)}@media(prefers-reduced-motion:reduce){.sf-theme-transition{transition:none}}}@layer slashed.layout{.sf-section{padding-block:var(--sf-section-pad)}.sf-section--xs{--sf-section-pad: var(--sf-section-pad--xs)}.sf-section--s{--sf-section-pad: var(--sf-section-pad--s)}.sf-section--m{--sf-section-pad: var(--sf-section-pad--m)}.sf-section--l{--sf-section-pad: var(--sf-section-pad--l)}.sf-section--xl{--sf-section-pad: var(--sf-section-pad--xl)}.sf-section--2xl{--sf-section-pad: var(--sf-section-pad--2xl)}.sf-section--guttered{padding-inline:var(--sf-gutter)}.sf-section--guttered .sf-container{padding-inline:0}.sf-section-group>.sf-section+.sf-section{padding-block-start:0}.sf-section--collapse:has(+.sf-section--collapse){padding-block-end:calc(var(--sf-section-pad) / 2)}.sf-section--collapse+.sf-section--collapse{padding-block-start:calc(var(--sf-section-pad) / 2)}.sf-divider{border:none;border-block-start:var(--sf-divider-width) var(--sf-divider-style) var(--sf-divider-color);margin-block:var(--sf-divider-gap)}.sf-divider--vertical{border-block-start:none;border-inline-start:var(--sf-divider-width) var(--sf-divider-style) var(--sf-divider-color);margin-block:0;margin-inline:var(--sf-divider-gap);align-self:stretch}.sf-divider--soft{--sf-divider-color: var(--sf-color-border--subtle)}.sf-divider--strong{--sf-divider-color: var(--sf-color-border--strong)}.sf-divider--dashed{--sf-divider-style: dashed}.sf-divider--dotted{--sf-divider-style: dotted}.sf-divider--gradient{border:none;block-size:var(--sf-divider-width);background:linear-gradient(to right,transparent,var(--sf-divider-color),transparent)}.sf-container{container:sf-layout / inline-size;width:100%;max-width:var(--sf-container-default);margin-inline:auto;padding-inline:var(--sf-gutter)}.sf-container--narrow{max-width:var(--sf-container-narrow)}.sf-container--prose{max-width:var(--sf-container-prose)}.sf-container--wide{max-width:var(--sf-container-wide)}.sf-container--full{max-width:var(--sf-container-full)}.sf-cq{container-type:inline-size}.sf-stack{display:flex;flex-direction:column;gap:var(--sf-stack-gap)}.sf-stack--xs{gap:var(--sf-space-xs)}.sf-stack--s{gap:var(--sf-space-s)}.sf-stack--m{gap:var(--sf-space-m)}.sf-stack--l{gap:var(--sf-space-l)}.sf-stack--xl{gap:var(--sf-space-xl)}.sf-stack--2xl{gap:var(--sf-space-2xl)}.sf-stack--center{align-items:center}.sf-stack--end{align-items:flex-end}.sf-stack--stretch{align-items:stretch}.sf-gap{gap:var(--sf-gap)}.sf-gap--xs{gap:var(--sf-space-xs)}.sf-gap--s{gap:var(--sf-space-s)}.sf-gap--m{gap:var(--sf-space-m)}.sf-gap--l{gap:var(--sf-space-l)}.sf-gap--xl{gap:var(--sf-space-xl)}.sf-gap--2xl{gap:var(--sf-space-2xl)}.sf-box{padding:var(--sf-box-padding);outline:var(--sf-box-border-width) solid var(--sf-box-border-color)}.sf-center{box-sizing:content-box;width:auto;margin-inline:auto;max-inline-size:var(--sf-center-max);padding-inline:var(--sf-center-gutter)}.sf-center--intrinsic{display:flex;flex-direction:column;align-items:center}.sf-cluster{display:flex;flex-wrap:wrap;gap:var(--sf-cluster-gap);align-items:var(--sf-cluster-align);justify-content:var(--sf-cluster-justify)}.sf-cluster--xs{gap:var(--sf-space-xs)}.sf-cluster--s{gap:var(--sf-space-s)}.sf-cluster--m{gap:var(--sf-space-m)}.sf-cluster--l{gap:var(--sf-space-l)}.sf-cluster--xl{gap:var(--sf-space-xl)}.sf-cluster--2xl{gap:var(--sf-space-2xl)}.sf-cluster--no-wrap{flex-wrap:nowrap}.sf-cluster--center{justify-content:center}.sf-cluster--end{justify-content:flex-end}.sf-cluster--between{justify-content:space-between}.sf-sidebar{display:flex;flex-wrap:wrap;gap:var(--sf-sidebar-gap)}.sf-sidebar>:first-child{flex-basis:var(--sf-sidebar-width);flex-grow:1}.sf-sidebar>:last-child{flex-basis:0;flex-grow:999;min-inline-size:var(--sf-sidebar-min-width)}.sf-sidebar--right>:first-child{flex-basis:0;flex-grow:999;min-inline-size:var(--sf-sidebar-min-width)}.sf-sidebar--right>:last-child{flex-basis:var(--sf-sidebar-width);flex-grow:1}.sf-sidebar--narrow{--sf-sidebar-width: 12rem}.sf-sidebar--wide{--sf-sidebar-width: 26rem}.sf-switcher{display:flex;flex-wrap:wrap;gap:var(--sf-switcher-gap)}.sf-switcher>*{flex-grow:1;flex-basis:calc((var(--sf-switcher-threshold) - 100%) * 999)}.sf-switcher--no-wrap{flex-wrap:nowrap;overflow-x:auto;overflow-inline:auto}.sf-switcher--vertical{flex-direction:column}.sf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--sf-grid-min),100%),1fr));gap:var(--sf-grid-gap)}.sf-grid--fit{grid-template-columns:repeat(auto-fit,minmax(min(var(--sf-grid-min),100%),1fr))}.sf-grid--xs{--sf-grid-min: var(--sf-grid-min-xs)}.sf-grid--s{--sf-grid-min: var(--sf-grid-min-s)}.sf-grid--m{--sf-grid-min: var(--sf-grid-min-m)}.sf-grid--l{--sf-grid-min: var(--sf-grid-min-l)}.sf-grid--xl{--sf-grid-min: var(--sf-grid-min-xl)}.sf-grid--2xl{--sf-grid-min: var(--sf-grid-min-2xl)}.sf-grid--dense{grid-auto-flow:dense}.sf-icon{display:inline-block;inline-size:var(--sf-icon-size, var(--sf-icon-m));block-size:var(--sf-icon-size, var(--sf-icon-m));flex-shrink:0;vertical-align:text-bottom;fill:currentcolor}.sf-icon--xs{--sf-icon-size: var(--sf-icon-xs)}.sf-icon--s{--sf-icon-size: var(--sf-icon-s)}.sf-icon--m{--sf-icon-size: var(--sf-icon-m)}.sf-icon--l{--sf-icon-size: var(--sf-icon-l)}.sf-icon--xl{--sf-icon-size: var(--sf-icon-xl)}.sf-icon--2xl{--sf-icon-size: var(--sf-icon-2xl)}.sf-icon--boxed{inline-size:calc(var(--sf-icon-size, var(--sf-icon-m)) + var(--sf-icon-box-pad) * 2);block-size:calc(var(--sf-icon-size, var(--sf-icon-m)) + var(--sf-icon-box-pad) * 2);padding:var(--sf-icon-box-pad);border:var(--sf-icon-box-border);border-radius:var(--sf-icon-box-radius);background:var(--sf-icon-box-bg);box-sizing:border-box}.sf-cover{display:flex;flex-direction:column;min-height:var(--sf-cover-min-height);padding-block:var(--sf-cover-padding)}.sf-cover>.sf-cover__center{margin-block:auto}.sf-cover--min{min-height:50dvh}.sf-cover--max{min-height:0;max-block-size:100dvh}.sf-cover--padding-s{padding-block:var(--sf-space-xl)}.sf-cover--padding-l{padding-block:var(--sf-space-4xl)}.sf-frame{aspect-ratio:var(--sf-frame-ratio);overflow:hidden;display:flex;justify-content:center;align-items:center}.sf-frame>img,.sf-frame>video{inline-size:100%;block-size:100%;object-fit:cover}.sf-frame--square{aspect-ratio:var(--sf-ratio-square)}.sf-frame--video{aspect-ratio:var(--sf-ratio-video)}.sf-frame--cinema{aspect-ratio:var(--sf-ratio-cinema)}.sf-frame--portrait{aspect-ratio:var(--sf-ratio-portrait)}.sf-frame--4-3{aspect-ratio:var(--sf-ratio-4-3)}.sf-frame--3-2{aspect-ratio:var(--sf-ratio-3-2)}.sf-frame--golden{aspect-ratio:var(--sf-ratio-golden)}:where(:has(>.sf-bg)){position:relative;isolation:isolate}.sf-bg{position:absolute;inset:var(--sf-bg-inset);inline-size:calc(100% - 2 * var(--sf-bg-inset));block-size:calc(100% - 2 * var(--sf-bg-inset));object-fit:var(--sf-bg-fit);object-position:var(--sf-bg-position);border-radius:var(--sf-bg-radius);z-index:var(--sf-bg-z);pointer-events:none}.sf-bg>:is(img,video,picture){inline-size:100%;block-size:100%;object-fit:var(--sf-bg-fit);object-position:var(--sf-bg-position);border-radius:var(--sf-bg-radius);pointer-events:none}.sf-bg>picture>img{inline-size:100%;block-size:100%;object-fit:var(--sf-bg-fit);object-position:var(--sf-bg-position);border-radius:var(--sf-bg-radius);pointer-events:none}.sf-reel{display:flex;block-size:var(--sf-reel-height);gap:var(--sf-reel-gap);overflow-x:auto;overflow-inline:auto;scroll-snap-type:inline mandatory;scroll-padding-inline:var(--sf-reel-gap);overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:var(--sf-scrollbar-thumb) var(--sf-scrollbar-track)}.sf-reel::-webkit-scrollbar{block-size:6px}.sf-reel::-webkit-scrollbar-track{background:var(--sf-scrollbar-track);border-radius:var(--sf-radius-full)}.sf-reel::-webkit-scrollbar-thumb{background:var(--sf-scrollbar-thumb);border-radius:var(--sf-radius-full)}.sf-reel>*{flex:0 0 var(--sf-reel-item-width);scroll-snap-align:start}.sf-imposter{position:absolute;inset-block-start:50%;left:50%;translate:-50% -50%}.sf-imposter--fixed{position:fixed}.sf-imposter--contain{max-inline-size:calc(100% - var(--sf-imposter-margin) * 2);max-block-size:calc(100% - var(--sf-imposter-margin) * 2);overflow:auto}.sf-alternate{display:grid;gap:var(--sf-alternate-gap);container:sf-alternate / inline-size}.sf-alternate>*{display:grid;gap:var(--sf-alternate-inner-gap);align-items:center}@container sf-alternate (min-width: 48em){.sf-alternate>*{grid-template-columns:1fr 1fr}.sf-alternate>:nth-child(2n)>:first-child{order:2}.sf-alternate>:nth-child(2n)>:last-child{order:1}}.sf-pancake{display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh}.sf-grid-cols-1{display:grid;gap:var(--sf-grid-gap)}.sf-grid-cols-2,.sf-grid-cols-3,.sf-grid-cols-4,.sf-grid-cols-6{display:grid;gap:var(--sf-grid-gap);container:sf-grid / inline-size}@container (min-width: 30em){.sf-grid-cols-4{grid-template-columns:repeat(2,1fr)}.sf-grid-cols-6{grid-template-columns:repeat(3,1fr)}}@container (min-width: 48em){.sf-grid-cols-2{grid-template-columns:repeat(2,1fr)}.sf-grid-cols-3{grid-template-columns:repeat(3,1fr)}.sf-grid-cols-4{grid-template-columns:repeat(4,1fr)}.sf-grid-cols-6{grid-template-columns:repeat(6,1fr)}}.sf-grid-cols-1-2,.sf-grid-cols-2-1,.sf-grid-cols-1-3,.sf-grid-cols-3-1{display:grid;gap:var(--sf-grid-gap)}@container (min-width: 48em){.sf-grid-cols-1-2{grid-template-columns:1fr 2fr}.sf-grid-cols-2-1{grid-template-columns:2fr 1fr}.sf-grid-cols-1-3{grid-template-columns:1fr 3fr}.sf-grid-cols-3-1{grid-template-columns:3fr 1fr}}.sf-equal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--sf-equal-min-col),100%),1fr));gap:var(--sf-equal-gap)}.sf-equal--2{--sf-equal-min-col: var(--sf-equal-min-col-2)}.sf-equal--3{--sf-equal-min-col: var(--sf-equal-min-col-3)}.sf-equal--4{--sf-equal-min-col: var(--sf-equal-min-col-4)}.sf-equal--6{--sf-equal-min-col: var(--sf-equal-min-col-6)}.sf-content-grid{display:grid;grid-template-columns:[full-start] minmax(var(--sf-gutter),1fr) [breakout-start] minmax(0,calc((var(--sf-breakout-width) - var(--sf-content-width)) / 2)) [content-start] min(var(--sf-content-width),100% - var(--sf-gutter) * 2) [content-end] minmax(0,calc((var(--sf-breakout-width) - var(--sf-content-width)) / 2)) [breakout-end] minmax(var(--sf-gutter),1fr) [full-end]}.sf-content-grid>*{grid-column:content}.sf-content-grid>.sf-breakout{grid-column:breakout}.sf-content-grid>.sf-full-bleed{grid-column:full}.sf-bento{display:grid;grid-template-columns:repeat(var(--sf-bento-cols, var(--sf-bento-cols-default)),1fr);grid-auto-rows:minmax(var(--sf-bento-row, var(--sf-bento-row-default)),auto);grid-auto-flow:dense;gap:var(--sf-bento-gap);container:sf-bento / inline-size}@container (max-width: 29.99em){.sf-bento{grid-template-columns:1fr}}@container (min-width: 30em) and (max-width: 47.99em){.sf-bento{grid-template-columns:repeat(2,1fr)}}.sf-bento--2{--sf-bento-cols: 2}.sf-bento--3{--sf-bento-cols: 3}.sf-bento--6{--sf-bento-cols: 6}.sf-bento--compact{--sf-bento-row: var(--sf-bento-row-compact)}.sf-bento--tall{--sf-bento-row: var(--sf-bento-row-tall)}.sf-bento-wide{grid-column:span 2}.sf-bento-full{grid-column:1 / -1}.sf-bento-tall{grid-row:span 2}.sf-bento-featured{grid-column:span 2;grid-row:span 2}.sf-subgrid{display:grid;grid-template-columns:subgrid}.sf-subgrid-rows{display:grid;grid-template-rows:subgrid}}@layer slashed.macros{.sf-prose{max-width:var(--sf-container-prose);overflow-wrap:break-word}.sf-prose>*+*{margin-block-start:var(--sf-prose-paragraph)}.sf-prose :is(h2,h3,h4,h5,h6)+*{margin-block-start:var(--sf-prose-heading-gap)}.sf-prose li+li{margin-block-start:var(--sf-prose-list-gap)}.sf-prose :is(blockquote,pre){margin-block:var(--sf-prose-block-margin)}.sf-prose blockquote{font-style:italic;padding-inline-start:var(--sf-prose-blockquote-padding);border-inline-start:var(--sf-prose-blockquote-border)}.sf-prose img{margin-block:var(--sf-prose-media-margin);border-radius:var(--sf-prose-media-radius)}.sf-prose :is(ul,ol){padding-inline-start:1.25em}.sf-prose>:is(ul,ol){margin-block-end:0}.sf-prose :is(ul,ol) :is(ul,ol){margin-block-start:var(--sf-prose-nested-list-gap)}.sf-prose ul{list-style:disc}.sf-prose ol{list-style:decimal}.sf-prose ::marker{color:var(--sf-prose-marker-color)}.sf-prose hr{margin-block:var(--sf-prose-hr-margin)}.sf-prose figure{margin-block:var(--sf-prose-figure-margin)}.sf-prose figcaption{font-size:var(--sf-prose-figcaption-size);color:var(--sf-color-text--muted);margin-block-start:var(--sf-prose-list-gap)}.sf-prose table{margin-block:var(--sf-prose-block-margin);display:block;overflow-x:auto;overflow-inline:auto;inline-size:100%;max-inline-size:100%}.sf-prose :is(th,td){padding:var(--sf-prose-table-pad)}.sf-prose video{margin-block:var(--sf-prose-media-margin);border-radius:var(--sf-prose-media-radius)}.sf-prose .sf-not-prose>*+*{margin-block-start:0}.sf-prose .sf-not-prose li+li{margin-block-start:0}.sf-prose .sf-not-prose :is(ul,ol){list-style:revert;padding-inline-start:revert}.sf-prose .sf-not-prose ::marker{color:inherit}.sf-prose .sf-not-prose blockquote{margin-block:0;padding-inline-start:0;border-inline-start:0;font-style:normal}.sf-prose .sf-not-prose hr{margin-block:0}.sf-prose .sf-not-prose img{margin-block:0;border-radius:0}.sf-prose .sf-not-prose figure{margin-block:0}.sf-prose .sf-not-prose figcaption{font-size:inherit;color:inherit;margin-block-start:0}.sf-prose .sf-not-prose table{margin-block:0;display:revert;overflow-x:revert;overflow-inline:revert;inline-size:revert;max-inline-size:revert}.sf-prose .sf-not-prose :is(th,td){padding:revert}.sf-prose .sf-not-prose video{margin-block:0;border-radius:0}.sf-flow>*+*{margin-block-start:var(--sf-flow-space)}.sf-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf-line-clamp-2,.sf-line-clamp-3,.sf-line-clamp-N{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.sf-line-clamp-2{-webkit-line-clamp:2}.sf-line-clamp-3{-webkit-line-clamp:3}.sf-line-clamp-N{-webkit-line-clamp:var(--sf-line-clamp)}.sf-equal-height{display:flex;align-items:stretch}.sf-equal-height>*{block-size:auto;flex:1 1 auto}.sf-aspect{aspect-ratio:var(--sf-aspect, 16 / 9)}.sf-scroll-shadow{overflow-y:auto;overflow-block:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-scroll-shadow-size),black calc(100% - var(--sf-scroll-shadow-size)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-scroll-shadow-size),black calc(100% - var(--sf-scroll-shadow-size)),transparent 100%)}.sf-scroll-snap{overflow-y:auto;overflow-block:auto;scroll-snap-type:block mandatory;overscroll-behavior-block:contain}.sf-scroll-snap>*{scroll-snap-align:start}.sf-overflow-fade,.sf-overflow-fade--right{overflow:hidden;-webkit-mask-image:linear-gradient(to right,black 0,black calc(100% - var(--sf-mask-scrim-end)),transparent 100%);mask-image:linear-gradient(to right,black 0,black calc(100% - var(--sf-mask-scrim-end)),transparent 100%)}.sf-overflow-fade--left{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--sf-mask-scrim-start),black 100%);mask-image:linear-gradient(to right,transparent 0,black var(--sf-mask-scrim-start),black 100%)}.sf-overflow-fade--top{overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-mask-scrim-start),black 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-mask-scrim-start),black 100%)}.sf-overflow-fade--bottom{overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,black 0,black calc(100% - var(--sf-mask-scrim-end)),transparent 100%);mask-image:linear-gradient(to bottom,black 0,black calc(100% - var(--sf-mask-scrim-end)),transparent 100%)}.sf-overflow-fade--block{overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-mask-scrim-start),black calc(100% - var(--sf-mask-scrim-end)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--sf-mask-scrim-start),black calc(100% - var(--sf-mask-scrim-end)),transparent 100%)}.sf-overflow-fade--inline{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--sf-mask-scrim-start),black calc(100% - var(--sf-mask-scrim-end)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black var(--sf-mask-scrim-start),black calc(100% - var(--sf-mask-scrim-end)),transparent 100%)}.sf-no-tap-highlight{-webkit-tap-highlight-color:transparent}.sf-surface{background:var(--sf-surface-color)}.sf-surface--primary{--sf-surface-color: var(--sf-color-primary);background:var(--sf-color-primary);color:var(--sf-color-text--on-primary)}.sf-surface--secondary{--sf-surface-color: var(--sf-color-secondary);background:var(--sf-color-secondary);color:var(--sf-color-text--on-secondary)}.sf-surface--tertiary{--sf-surface-color: var(--sf-color-tertiary);background:var(--sf-color-tertiary);color:var(--sf-color-text--on-tertiary)}.sf-surface--action{--sf-surface-color: var(--sf-color-action);background:var(--sf-color-action);color:var(--sf-color-text--on-action)}.sf-surface--neutral{--sf-surface-color: var(--sf-color-neutral);background:var(--sf-color-neutral);color:var(--sf-color-text--on-neutral)}.sf-surface--inverse{--sf-surface-color: var(--sf-color-inverse);background:var(--sf-color-inverse);color:var(--sf-color-text--on-inverse)}.sf-surface--success{--sf-surface-color: var(--sf-color-success);background:var(--sf-color-success);color:var(--sf-color-text--on-success)}.sf-surface--warning{--sf-surface-color: var(--sf-color-warning);background:var(--sf-color-warning);color:var(--sf-color-text--on-warning)}.sf-surface--info{--sf-surface-color: var(--sf-color-info);background:var(--sf-color-info);color:var(--sf-color-text--on-info)}.sf-surface--danger{--sf-surface-color: var(--sf-color-danger);background:var(--sf-color-danger);color:var(--sf-color-text--on-danger)}@supports (color: oklch(from red l c h)) and (width: calc(1px*sign(1))){:is(.sf-surface,.sf-surface--primary,.sf-surface--secondary,.sf-surface--tertiary,.sf-surface--action,.sf-surface--neutral,.sf-surface--inverse,.sf-surface--success,.sf-surface--warning,.sf-surface--info,.sf-surface--danger){--sf-surface-contrast: oklch(from var(--sf-surface-color) clamp(.1, sign(var(--sf-contrast-threshold) - l) * 999, .95) 0 0 / 1);background:var(--sf-surface-color);color:var(--sf-surface-contrast);--sf-color-text: var(--sf-surface-contrast);--sf-color-heading: var(--sf-surface-contrast);--sf-color-link: oklch(from var(--sf-surface-contrast) l calc(c + .08) h);--sf-color-link--hover: var(--sf-surface-contrast);--sf-color-link--underline: oklch(from var(--sf-surface-contrast) l c h / .5);--sf-color-text--secondary: oklch(from var(--sf-surface-contrast) l c h / .7);--sf-color-text--placeholder: oklch(from var(--sf-surface-contrast) l c h / .45);--sf-color-text--disabled: oklch(from var(--sf-surface-contrast) l c h / .3);--sf-color-border: oklch(from var(--sf-surface-contrast) l c h / .2);--sf-color-border--subtle: oklch(from var(--sf-surface-contrast) l c h / .12);--sf-color-border--strong: oklch(from var(--sf-surface-contrast) l c h / .35);--sf-focus-ring-color: var(--sf-surface-contrast);--sf-caret-color: var(--sf-surface-contrast);--sf-shadow-color: oklch(from var(--sf-surface-color) var(--sf-shadow-lightness) c h)}}.sf-scrim{position:relative;isolation:isolate}.sf-scrim:before{content:"";position:absolute;inset:0;z-index:0;background:var(--sf-scrim-gradient);pointer-events:none}.sf-scrim>:not(img,picture,video,svg,canvas),.sf-scrim__content{position:relative;z-index:1}.sf-scrim--top{--sf-scrim-direction: to bottom}.sf-scrim--bottom{--sf-scrim-direction: to top}.sf-scrim--full{--sf-scrim-gradient: var(--sf-scrim-color)}.sf-text-protect{text-shadow:var(--sf-scrim-text-shadow)}.sf-text-gradient{background-image:var(--sf-gradient-primary);background-clip:text;color:transparent}.sf-link-external:after{content:var(--sf-link-external-marker);display:inline-block;font-size:.85em;text-decoration:none}.sf-content-auto{content-visibility:auto;contain-intrinsic-size:auto var(--sf-content-intrinsic-size, 500px)}.sf-tabular-nums{font-variant-numeric:var(--sf-font-numeric, tabular-nums)}.sf-link--subtle:link,.sf-link--subtle:visited{text-decoration-line:none}.sf-link--subtle:is(:link,:visited):hover,.sf-link--subtle:is(:link,:visited):focus-visible{text-decoration-line:underline;text-decoration-color:currentcolor}.sf-link--reverse:link,.sf-link--reverse:visited{text-decoration-line:underline}.sf-link--reverse:is(:link,:visited):hover,.sf-link--reverse:is(:link,:visited):focus-visible{text-decoration-line:none}} diff --git a/SLASHED-for-WP/assets/admin-app/app.js b/SLASHED-for-WP/assets/admin-app/app.js index 535151db..b09e0d6a 100644 --- a/SLASHED-for-WP/assets/admin-app/app.js +++ b/SLASHED-for-WP/assets/admin-app/app.js @@ -1,5 +1,5 @@ -var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=Array.from,oc=Object.defineProperty,Oo=Object.getOwnPropertyDescriptor,vl=Object.getOwnPropertyDescriptors,sc=Object.prototype,rc=Array.prototype,an=Object.getPrototypeOf,kn=Object.isExtensible;function ps(a){return typeof a=="function"}const hl=()=>{};function nc(a){return a()}function Tr(a){for(var e=0;e{a=n,e=l});return{promise:o,resolve:a,reject:e}}function Ta(a,e){if(Array.isArray(a))return a;if(!(Symbol.iterator in a))return Array.from(a);const o=[];for(const n of a)if(o.push(n),o.length===e)break;return o}const Oa=2,es=4,Ts=8,on=1<<24,Za=16,$a=32,Lo=64,Dr=128,qa=512,ka=1024,_a=2048,io=4096,Ba=8192,ja=16384,is=32768,Mr=1<<25,Po=65536,Qs=1<<17,lc=1<<18,cs=1<<19,bl=1<<20,oo=1<<25,qo=65536,$s=1<<21,Qo=1<<22,So=1<<23,so=Symbol("$state"),yl=Symbol("legacy props"),ic=Symbol(""),xl=Symbol("attributes"),Nr=Symbol("class"),Fr=Symbol("style"),jr=Symbol("text"),Vs=Symbol("form reset"),ir=new class extends Error{name="StaleReactionError";message="The reaction that called `getAbortSignal()` was re-run or destroyed"},cr=!!globalThis.document?.contentType&&globalThis.document.contentType.includes("xml");function cc(a){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function dc(){throw new Error("https://svelte.dev/e/async_derived_orphan")}function fc(a,e,o){throw new Error("https://svelte.dev/e/each_key_duplicate")}function uc(a){throw new Error("https://svelte.dev/e/effect_in_teardown")}function pc(){throw new Error("https://svelte.dev/e/effect_in_unowned_derived")}function mc(a){throw new Error("https://svelte.dev/e/effect_orphan")}function vc(){throw new Error("https://svelte.dev/e/effect_update_depth_exceeded")}function hc(a){throw new Error("https://svelte.dev/e/props_invalid_value")}function gc(){throw new Error("https://svelte.dev/e/state_descriptors_fixed")}function bc(){throw new Error("https://svelte.dev/e/state_prototype_fixed")}function yc(){throw new Error("https://svelte.dev/e/state_unsafe_mutation")}function xc(){throw new Error("https://svelte.dev/e/svelte_boundary_reset_onerror")}const kc=1,wc=2,kl=4,_c=8,Cc=16,Oc=1,Sc=2,wl=4,Lc=8,Pc=16,Ic=1,Bc=2,ya=Symbol("uninitialized"),_l="http://www.w3.org/1999/xhtml",Uc="http://www.w3.org/2000/svg",Ac="@attach";function zc(){console.warn("https://svelte.dev/e/derived_inert")}function Ec(){console.warn("https://svelte.dev/e/select_multiple_invalid_value")}function Rc(){console.warn("https://svelte.dev/e/svelte_boundary_reset_noop")}function Cl(a){return a===this.v}function Tc(a,e){return a!=a?e==e:a!==e||a!==null&&typeof a=="object"||typeof a=="function"}function Ol(a){return!Tc(a,this.v)}let ds=!1;function Dc(){ds=!0}let pa=null;function ts(a){pa=a}function ea(a,e=!1,o){pa={p:pa,i:!1,c:null,e:null,s:a,x:null,r:Gt,l:ds&&!e?{s:null,u:null,$:[]}:null}}function ta(a){var e=pa,o=e.e;if(o!==null){e.e=null;for(var n of o)Kl(n)}return e.i=!0,pa=e.p,{}}function fs(){return!ds||pa!==null&&pa.l===null}let Mo=[];function Sl(){var a=Mo;Mo=[],Tr(a)}function ho(a){if(Mo.length===0&&!Ss){var e=Mo;queueMicrotask(()=>{e===Mo&&Sl()})}Mo.push(a)}function Mc(){for(;Mo.length>0;)Sl()}function Ll(a){var e=Gt;if(e===null)return $t.f|=So,a;if((e.f&is)===0&&(e.f&es)===0)throw a;Co(a,e)}function Co(a,e){if(!(e!==null&&(e.f&ja)!==0)){for(;e!==null;){if((e.f&Dr)!==0){if((e.f&is)===0)throw a;try{e.b.error(a);return}catch(o){a=o}}e=e.parent}throw a}}const Nc=-7169;function ba(a,e){a.f=a.f&Nc|e}function sn(a){(a.f&qa)!==0||a.deps===null?ba(a,ka):ba(a,io)}function Pl(a){if(a!==null)for(const e of a)(e.f&Oa)===0||(e.f&qo)===0||(e.f^=qo,Pl(e.deps))}function Il(a,e,o){(a.f&_a)!==0?e.add(a):(a.f&io)!==0&&o.add(a),Pl(a.deps),ba(a,ka)}let Ns=!1;function Fc(a){var e=Ns;try{return Ns=!1,[a(),Ns]}finally{Ns=e}}function jc(a){let e=0,o=Bo(0),n;return()=>{dn()&&(t(o),fn(()=>(e===0&&(n=co(()=>a(()=>Ls(o)))),e+=1,()=>{ho(()=>{e-=1,e===0&&(n?.(),n=void 0,Ls(o))})})))}}var Gc=Po|cs;function Hc(a,e,o,n){new qc(a,e,o,n)}class qc{parent;is_pending=!1;transform_error;#t;#n=null;#e;#i;#o;#r=null;#a=null;#l=null;#s=null;#m=0;#c=0;#d=!1;#u=new Set;#h=new Set;#f=null;#b=jc(()=>(this.#f=Bo(this.#m),()=>{this.#f=null}));constructor(e,o,n,l){this.#t=e,this.#e=o,this.#i=i=>{var c=Gt;c.b=this,c.f|=Dr,n(i)},this.parent=Gt.b,this.transform_error=l??this.parent?.transform_error??(i=>i),this.#o=us(()=>{this.#y()},Gc)}#g(){try{this.#r=Ra(()=>this.#i(this.#t))}catch(e){this.error(e)}}#k(e){const o=this.#e.failed;o&&(this.#l=Ra(()=>{o(this.#t,()=>e,()=>()=>{})}))}#w(){const e=this.#e.pending;e&&(this.is_pending=!0,this.#a=Ra(()=>e(this.#t)),ho(()=>{var o=this.#s=document.createDocumentFragment(),n=ro();o.append(n),this.#r=this.#x(()=>Ra(()=>this.#i(n))),this.#c===0&&(this.#t.before(o),this.#s=null,jo(this.#a,()=>{this.#a=null}),this.#p(Nt))}))}#y(){try{if(this.is_pending=this.has_pending_snippet(),this.#c=0,this.#m=0,this.#r=Ra(()=>{this.#i(this.#t)}),this.#c>0){var e=this.#s=document.createDocumentFragment();pn(this.#r,e);const o=this.#e.pending;this.#a=Ra(()=>o(this.#t))}else this.#p(Nt)}catch(o){this.error(o)}}#p(e){this.is_pending=!1,e.transfer_effects(this.#u,this.#h)}defer_effect(e){Il(e,this.#u,this.#h)}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!this.#e.pending}#x(e){var o=Gt,n=$t,l=pa;Ka(this.#o),Va(this.#o),ts(this.#o.ctx);try{return Io.ensure(),e()}catch(i){return Ll(i),null}finally{Ka(o),Va(n),ts(l)}}#v(e,o){if(!this.has_pending_snippet()){this.parent&&this.parent.#v(e,o);return}this.#c+=e,this.#c===0&&(this.#p(o),this.#a&&jo(this.#a,()=>{this.#a=null}),this.#s&&(this.#t.before(this.#s),this.#s=null))}update_pending_count(e,o){this.#v(e,o),this.#m+=e,!(!this.#f||this.#d)&&(this.#d=!0,ho(()=>{this.#d=!1,this.#f&&os(this.#f,this.#m)}))}get_effect_pending(){return this.#b(),t(this.#f)}error(e){if(!this.#e.onerror&&!this.#e.failed)throw e;Nt?.is_fork?(this.#r&&Nt.skip_effect(this.#r),this.#a&&Nt.skip_effect(this.#a),this.#l&&Nt.skip_effect(this.#l),Nt.oncommit(()=>{this.#_(e)})):this.#_(e)}#_(e){this.#r&&(Ca(this.#r),this.#r=null),this.#a&&(Ca(this.#a),this.#a=null),this.#l&&(Ca(this.#l),this.#l=null);var o=this.#e.onerror;let n=this.#e.failed;var l=!1,i=!1;const c=()=>{if(l){Rc();return}l=!0,i&&xc(),this.#l!==null&&jo(this.#l,()=>{this.#l=null}),this.#x(()=>{this.#y()})},f=p=>{try{i=!0,o?.(p,c),i=!1}catch(m){Co(m,this.#o&&this.#o.parent)}n&&(this.#l=this.#x(()=>{try{return Ra(()=>{var m=Gt;m.b=this,m.f|=Dr,n(this.#t,()=>p,()=>c)})}catch(m){return Co(m,this.#o.parent),null}}))};ho(()=>{var p;try{p=this.transform_error(e)}catch(m){Co(m,this.#o&&this.#o.parent);return}p!==null&&typeof p=="object"&&typeof p.then=="function"?p.then(f,m=>Co(m,this.#o&&this.#o.parent)):f(p)})}}function Bl(a,e,o,n){const l=fs()?as:rn;var i=a.filter(k=>!k.settled),c=e.map(l);if(o.length===0&&i.length===0){n(c);return}var f=Gt,p=Vc(),m=i.length===1?i[0].promise:i.length>1?Promise.all(i.map(k=>k.promise)):null;function h(k){if((f.f&ja)===0){p();try{n([...c,...k])}catch(S){Co(S,f)}er()}}var v=Ul();if(o.length===0){m.then(()=>h([])).finally(v);return}function b(){Promise.all(o.map(k=>Kc(k))).then(h).catch(k=>Co(k,f)).finally(v)}m?m.then(()=>{p(),b(),er()}):b()}function Vc(){var a=Gt,e=$t,o=pa,n=Nt;return function(i=!0){Ka(a),Va(e),ts(o),i&&(a.f&ja)===0&&(n?.activate(),n?.apply())}}function er(a=!0){Ka(null),Va(null),ts(null),a&&Nt?.deactivate()}function Ul(){var a=Gt,e=a.b,o=Nt,n=!!e?.is_rendered();return e?.update_pending_count(1,o),o.increment(n,a),()=>{e?.update_pending_count(-1,o),o.decrement(n,a)}}function as(a){var e=Oa|_a;return Gt!==null&&(Gt.f|=cs),{ctx:pa,deps:null,effects:null,equals:Cl,f:e,fn:a,reactions:null,rv:0,v:ya,wv:0,parent:Gt,ac:null}}const _s=Symbol("obsolete");function Kc(a,e,o){let n=Gt;n===null&&dc();var l=void 0,i=Bo(ya),c=!$t,f=new Set;return id(()=>{var p=Gt,m=gl();l=m.promise;try{Promise.resolve(a()).then(m.resolve,k=>{k!==ir&&m.reject(k)}).finally(er)}catch(k){m.reject(k),er()}var h=Nt;if(c){if((p.f&is)!==0)var v=Ul();if(n.b?.is_rendered())h.async_deriveds.get(p)?.reject(_s);else for(const k of f.values())k.reject(_s);f.add(m),h.async_deriveds.set(p,m)}const b=(k,S=void 0)=>{v?.(),f.delete(m),S!==_s&&(h.activate(),S?(i.f|=So,os(i,S)):((i.f&So)!==0&&(i.f^=So),os(i,k)),h.deactivate())};m.promise.then(b,k=>b(null,k||"unknown"))}),fr(()=>{for(const p of f)p.reject(_s)}),new Promise(p=>{function m(h){function v(){h===l?p(i):m(l)}h.then(v,v)}m(l)})}function u(a){const e=as(a);return Ql(e),e}function rn(a){const e=as(a);return e.equals=Ol,e}function Wc(a){var e=a.effects;if(e!==null){a.effects=null;for(var o=0;othis.schedule(n)){var n=this.#u.get(e);if(n){this.#u.delete(e);for(var l of n.d)ba(l,_a),o(l);for(l of n.m)ba(l,io),o(l)}this.#h.add(e)}#g(){this.#t=!0,wn++>1e3&&(this.#v(),Jc());for(const p of this.#c)this.#d.delete(p),ba(p,_a),this.schedule(p);for(const p of this.#d)ba(p,io),this.schedule(p);const e=this.#s;this.#s=[],this.apply();var o=Xo=[],n=[],l=Ks=[];for(const p of e)try{this.#k(p,o,n)}catch(m){throw Tl(p),this.#b()||this.discard(),m}if(Nt=null,l.length>0){var i=Io.ensure();for(const p of l)i.schedule(p)}if(Xo=null,Ks=null,this.#b()){this.#p(n),this.#p(o);for(const[p,m]of this.#u)Rl(p,m);l.length>0&&Nt.#g();return}const c=this.#w();if(c){this.#p(n),this.#p(o),c.#y(this);return}this.#c.clear(),this.#d.clear();for(const p of this.#i)p(this);this.#i.clear(),Gr=this,_n(n),_n(o),Gr=null,this.#l?.resolve();var f=Nt;if(this.#r===0&&(this.#s.length===0||f!==null)&&this.#v(),this.#s.length>0)if(f!==null){const p=f;p.#s.push(...this.#s.filter(m=>!p.#s.includes(m)))}else f=this;f!==null&&f.#g()}#k(e,o,n){e.f^=ka;for(var l=e.first;l!==null;){var i=l.f,c=(i&($a|Lo))!==0,f=c&&(i&ka)!==0,p=f||(i&Ba)!==0||this.#u.has(l);if(!p&&l.fn!==null){c?l.f^=ka:(i&es)!==0?o.push(l):Ms(l)&&((i&Za)!==0&&this.#d.add(l),rs(l));var m=l.first;if(m!==null){l=m;continue}}for(;l!==null;){var h=l.next;if(h!==null){l=h;break}l=l.parent}}}#w(){for(var e=this.#n;e!==null;){if(!e.is_fork){for(const[o,[,n]]of this.current)if(e.current.has(o)&&!n)return e}e=e.#n}return null}#y(e){for(const[n,l]of e.current)!this.previous.has(n)&&e.previous.has(n)&&this.previous.set(n,e.previous.get(n)),this.current.set(n,l);for(const[n,l]of e.async_deriveds){const i=this.async_deriveds.get(n);i&&l.promise.then(i.resolve).catch(i.reject)}e.async_deriveds.clear(),this.transfer_effects(e.#c,e.#d);const o=n=>{var l=n.reactions;if(l!==null)for(const f of l){var i=f.f;if((i&Oa)!==0)o(f);else{var c=f;i&(Qo|Za)&&!this.async_deriveds.has(c)&&(this.#d.delete(c),ba(c,_a),this.schedule(c))}}};for(const n of this.current.keys())o(n);this.oncommit(()=>e.discard()),e.#v(),Nt=this,this.#g()}#p(e){for(var o=0;o!v.current.get(b)[1]);if(!(!v.#t||l.length===0)){var i=l.filter(b=>!this.current.has(b));if(i.length===0)e&&v.discard();else if(o.length>0){if(e)for(const b of this.#h)v.unskip_effect(b,k=>{(k.f&(Za|Qo))!==0?v.schedule(k):v.#p([k])});v.activate();var c=new Set,f=new Map;for(var p of o)El(p,i,c,f);f=new Map;var m=[...v.current].filter(([b,k])=>{const S=this.current.get(b);return S?S[0]!==k[0]||S[1]!==k[1]:!0}).map(([b])=>b);if(m.length>0)for(const b of this.#m)(b.f&(ja|Ba|Qs))===0&&ln(b,m,f)&&((b.f&(Qo|Za))!==0?(ba(b,_a),v.schedule(b)):v.#c.add(b));if(v.#s.length>0&&!v.#f){v.apply();for(var h of v.#s)v.#k(h,[],[]);v.#s=[]}v.deactivate()}}}}increment(e,o){if(this.#r+=1,e){let n=this.#a.get(o)??0;this.#a.set(o,n+1)}}decrement(e,o){if(this.#r-=1,e){let n=this.#a.get(o)??0;n===1?this.#a.delete(o):this.#a.set(o,n-1)}this.#f||(this.#f=!0,ho(()=>{this.#f=!1,this.linked&&this.flush()}))}transfer_effects(e,o){for(const n of e)this.#c.add(n);for(const n of o)this.#d.add(n);e.clear(),o.clear()}oncommit(e){this.#i.add(e)}ondiscard(e){this.#o.add(e)}settled(){return(this.#l??=gl()).promise}static ensure(){if(Nt===null){const e=Nt=new Io;!kr&&!Ss&&ho(()=>{e.#t||e.flush()})}return Nt}apply(){{Xa=null;return}}schedule(e){if(Hr=e,e.b?.is_pending&&(e.f&(es|Ts|on))!==0&&(e.f&is)===0){e.b.defer_effect(e);return}for(var o=e;o.parent!==null;){o=o.parent;var n=o.f;if(Xo!==null&&o===Gt&&($t===null||($t.f&Oa)===0))return;if((n&(Lo|$a))!==0){if((n&ka)===0)return;o.f^=ka}}this.#s.push(o)}#v(){if(this.linked){var e=this.#n,o=this.#e;e===null?xr=o:e.#e=o,o===null?Wo=e:o.#n=e,this.linked=!1}}}function Xc(a){var e=Ss;Ss=!0;try{for(var o;;){if(Mc(),Nt===null)return o;Nt.flush()}}finally{Ss=e}}function Jc(){try{vc()}catch(a){Co(a,Hr)}}let po=null;function _n(a){var e=a.length;if(e!==0){for(var o=0;o0)){Fo.clear();for(const l of po){if((l.f&(ja|Ba))!==0)continue;const i=[l];let c=l.parent;for(;c!==null;)po.has(c)&&(po.delete(c),i.push(c)),c=c.parent;for(let f=i.length-1;f>=0;f--){const p=i[f];(p.f&(ja|Ba))===0&&rs(p)}}po.clear()}}po=null}}function El(a,e,o,n){if(!o.has(a)&&(o.add(a),a.reactions!==null))for(const l of a.reactions){const i=l.f;(i&Oa)!==0?El(l,e,o,n):(i&(Qo|Za))!==0&&(i&_a)===0&&ln(l,e,n)&&(ba(l,_a),cn(l))}}function ln(a,e,o){const n=o.get(a);if(n!==void 0)return n;if(a.deps!==null)for(const l of a.deps){if(Js.call(e,l))return!0;if((l.f&Oa)!==0&&ln(l,e,o))return o.set(l,!0),!0}return o.set(a,!1),!1}function cn(a){Nt.schedule(a)}function Rl(a,e){if(!((a.f&$a)!==0&&(a.f&ka)!==0)){(a.f&_a)!==0?e.d.push(a):(a.f&io)!==0&&e.m.push(a),ba(a,ka);for(var o=a.first;o!==null;)Rl(o,e),o=o.next}}function Tl(a){ba(a,ka);for(var e=a.first;e!==null;)Tl(e),e=e.next}let tr=new Set;const Fo=new Map;let Dl=!1;function Bo(a,e){var o={f:0,v:a,reactions:null,equals:Cl,rv:0,wv:0};return o}function K(a,e){const o=Bo(a);return Ql(o),o}function Qc(a,e=!1,o=!0){const n=Bo(a);return e||(n.equals=Ol),ds&&o&&pa!==null&&pa.l!==null&&(pa.l.s??=[]).push(n),n}function _(a,e,o=!1){$t!==null&&(!Ja||($t.f&Qs)!==0)&&fs()&&($t.f&(Oa|Za|Qo|Qs))!==0&&(no===null||!no.has(a))&&yc();let n=o?va(e):e;return os(a,n,Ks)}function os(a,e,o=null){if(!a.equals(e)){Fo.set(a,yo?e:a.v);var n=Io.ensure();if(n.capture(a,e),(a.f&Oa)!==0){const l=a;(a.f&_a)!==0&&nn(l),Xa===null&&sn(l)}a.wv=ei(),Ml(a,_a,o),fs()&&Gt!==null&&(Gt.f&ka)!==0&&(Gt.f&($a|Lo))===0&&(Ga===null?fd([a]):Ga.push(a)),!n.is_fork&&tr.size>0&&!Dl&&$c()}return e}function $c(){Dl=!1;for(const a of tr){(a.f&ka)!==0&&ba(a,io);let e;try{e=Ms(a)}catch{e=!0}e&&rs(a)}tr.clear()}function Cn(a,e=1){var o=t(a),n=e===1?o++:o--;return _(a,o),n}function Ls(a){_(a,a.v+1)}function Ml(a,e,o){var n=a.reactions;if(n!==null)for(var l=fs(),i=n.length,c=0;c{if(Go===i)return f();var p=$t,m=Go;Va(null),In(i);var h=f();return Va(p),In(m),h};return n&&o.set("length",K(a.length)),new Proxy(a,{defineProperty(f,p,m){(!("value"in m)||m.configurable===!1||m.enumerable===!1||m.writable===!1)&&gc();var h=o.get(p);return h===void 0?c(()=>{var v=K(m.value);return o.set(p,v),v}):_(h,m.value,!0),!0},deleteProperty(f,p){var m=o.get(p);if(m===void 0){if(p in f){const h=c(()=>K(ya));o.set(p,h),Ls(l)}}else _(m,ya),Ls(l);return!0},get(f,p,m){if(p===so)return a;var h=o.get(p),v=p in f;if(h===void 0&&(!v||Oo(f,p)?.writable)&&(h=c(()=>{var k=va(v?f[p]:ya),S=K(k);return S}),o.set(p,h)),h!==void 0){var b=t(h);return b===ya?void 0:b}return Reflect.get(f,p,m)},getOwnPropertyDescriptor(f,p){var m=Reflect.getOwnPropertyDescriptor(f,p);if(m&&"value"in m){var h=o.get(p);h&&(m.value=t(h))}else if(m===void 0){var v=o.get(p),b=v?.v;if(v!==void 0&&b!==ya)return{enumerable:!0,configurable:!0,value:b,writable:!0}}return m},has(f,p){if(p===so)return!0;var m=o.get(p),h=m!==void 0&&m.v!==ya||Reflect.has(f,p);if(m!==void 0||Gt!==null&&(!h||Oo(f,p)?.writable)){m===void 0&&(m=c(()=>{var b=h?va(f[p]):ya,k=K(b);return k}),o.set(p,m));var v=t(m);if(v===ya)return!1}return h},set(f,p,m,h){var v=o.get(p),b=p in f;if(n&&p==="length")for(var k=m;kK(ya)),o.set(k+"",S))}if(v===void 0)(!b||Oo(f,p)?.writable)&&(v=c(()=>K(void 0)),_(v,va(m)),o.set(p,v));else{b=v.v!==ya;var E=c(()=>va(m));_(v,E)}var P=Reflect.getOwnPropertyDescriptor(f,p);if(P?.set&&P.set.call(h,m),!b){if(n&&typeof p=="string"){var B=o.get("length"),I=Number(p);Number.isInteger(I)&&I>=B.v&&_(B,I+1)}Ls(l)}return!0},ownKeys(f){t(l);var p=Reflect.ownKeys(f).filter(v=>{var b=o.get(v);return b===void 0||b.v!==ya});for(var[m,h]of o)h.v!==ya&&!(m in f)&&p.push(m);return p},setPrototypeOf(){bc()}})}function On(a){try{if(a!==null&&typeof a=="object"&&so in a)return a[so]}catch{}return a}function ed(a,e){return Object.is(On(a),On(e))}var Sn,Nl,Fl,jl;function td(){if(Sn===void 0){Sn=window,Nl=/Firefox/.test(navigator.userAgent);var a=Element.prototype,e=Node.prototype,o=Text.prototype;Fl=Oo(e,"firstChild").get,jl=Oo(e,"nextSibling").get,kn(a)&&(a[Nr]=void 0,a[xl]=null,a[Fr]=void 0,a.__e=void 0),kn(o)&&(o[jr]=void 0)}}function ro(a=""){return document.createTextNode(a)}function ss(a){return Fl.call(a)}function Ds(a){return jl.call(a)}function s(a,e){return ss(a)}function ce(a,e=!1){{var o=ss(a);return o instanceof Comment&&o.data===""?Ds(o):o}}function r(a,e=1,o=!1){let n=a;for(;e--;)n=Ds(n);return n}function ad(a){a.textContent=""}function Gl(){return!1}function Hl(a,e,o){return e==null||e===_l?o?document.createElement(a,{is:o}):document.createElement(a):o?document.createElementNS(e,a,{is:o}):document.createElementNS(e,a)}function od(a,e){if(e){const o=document.body;a.autofocus=!0,ho(()=>{document.activeElement===o&&a.focus()})}}let Ln=!1;function sd(){Ln||(Ln=!0,document.addEventListener("reset",a=>{Promise.resolve().then(()=>{if(!a.defaultPrevented)for(const e of a.target.elements)e[Vs]?.()})},{capture:!0}))}function dr(a){var e=$t,o=Gt;Va(null),Ka(null);try{return a()}finally{Va(e),Ka(o)}}function ql(a,e,o,n=o){a.addEventListener(e,()=>dr(o));const l=a[Vs];l?a[Vs]=()=>{l(),n(!0)}:a[Vs]=()=>n(!0),sd()}function Vl(a){Gt===null&&($t===null&&mc(),pc()),yo&&uc()}function rd(a,e){var o=e.last;o===null?e.last=e.first=a:(o.next=a,a.prev=o,e.last=a)}function eo(a,e){var o=Gt;o!==null&&(o.f&Ba)!==0&&(a|=Ba);var n={ctx:pa,deps:null,nodes:null,f:a|_a|qa,first:null,fn:e,last:null,next:null,parent:o,b:o&&o.b,prev:null,teardown:null,wv:0,ac:null};Nt?.register_created_effect(n);var l=n;if((a&es)!==0)Xo!==null?Xo.push(n):Io.ensure().schedule(n);else if(e!==null){try{rs(n)}catch(c){throw Ca(n),c}l.deps===null&&l.teardown===null&&l.nodes===null&&l.first===l.last&&(l.f&cs)===0&&(l=l.first,(a&Za)!==0&&(a&Po)!==0&&l!==null&&(l.f|=Po))}if(l!==null&&(l.parent=o,o!==null&&rd(l,o),$t!==null&&($t.f&Oa)!==0&&(a&Lo)===0)){var i=$t;(i.effects??=[]).push(l)}return n}function dn(){return $t!==null&&!Ja}function fr(a){const e=eo(Ts,null);return ba(e,ka),e.teardown=a,e}function xa(a){Vl();var e=Gt.f,o=!$t&&(e&$a)!==0&&pa!==null&&!pa.i;if(o){var n=pa;(n.e??=[]).push(a)}else return Kl(a)}function Kl(a){return eo(es|bl,a)}function nd(a){return Vl(),eo(Ts|bl,a)}function ld(a){Io.ensure();const e=eo(Lo|cs,a);return(o={})=>new Promise(n=>{o.outro?jo(e,()=>{Ca(e),n(void 0)}):(Ca(e),n(void 0))})}function ur(a){return eo(es,a)}function id(a){return eo(Qo|cs,a)}function fn(a,e=0){return eo(Ts|e,a)}function C(a,e=[],o=[],n=[]){Bl(n,e,o,l=>{eo(Ts,()=>{a(...l.map(t))})})}function us(a,e=0){var o=eo(Za|e,a);return o}function Wl(a,e=0){var o=eo(on|e,a);return o}function Ra(a){return eo($a|cs,a)}function Yl(a){var e=a.teardown;if(e!==null){const o=yo,n=$t;Pn(!0),Va(null);try{e.call(null)}finally{Pn(o),Va(n)}}}function un(a,e=!1){var o=a.first;for(a.first=a.last=null;o!==null;){const l=o.ac;l!==null&&dr(()=>{l.abort(ir)});var n=o.next;(o.f&Lo)!==0?o.parent=null:Ca(o,e),o=n}}function cd(a){for(var e=a.first;e!==null;){var o=e.next;(e.f&$a)===0&&Ca(e),e=o}}function Ca(a,e=!0){var o=!1;(e||(a.f&lc)!==0)&&a.nodes!==null&&a.nodes.end!==null&&(dd(a.nodes.start,a.nodes.end),o=!0),a.f|=Mr,un(a,e&&!o),Us(a,0);var n=a.nodes&&a.nodes.t;if(n!==null)for(const i of n)i.stop();Yl(a),a.f^=Mr,a.f|=ja;var l=a.parent;l!==null&&l.first!==null&&Zl(a),a.next=a.prev=a.teardown=a.ctx=a.deps=a.fn=a.nodes=a.ac=a.b=null}function dd(a,e){for(;a!==null;){var o=a===e?null:Ds(a);a.remove(),a=o}}function Zl(a){var e=a.parent,o=a.prev,n=a.next;o!==null&&(o.next=n),n!==null&&(n.prev=o),e!==null&&(e.first===a&&(e.first=n),e.last===a&&(e.last=o))}function jo(a,e,o=!0){var n=[];Xl(a,n,!0);var l=()=>{o&&Ca(a),e&&e()},i=n.length;if(i>0){var c=()=>--i||l();for(var f of n)f.out(c)}else l()}function Xl(a,e,o){if((a.f&Ba)===0){a.f^=Ba;var n=a.nodes&&a.nodes.t;if(n!==null)for(const f of n)(f.is_global||o)&&e.push(f);for(var l=a.first;l!==null;){var i=l.next;if((l.f&Lo)===0){var c=(l.f&Po)!==0||(l.f&$a)!==0&&(a.f&Za)!==0;Xl(l,e,c?o:!1)}l=i}}}function ar(a){Jl(a,!0)}function Jl(a,e){if((a.f&Ba)!==0){a.f^=Ba,(a.f&ka)===0&&(ba(a,_a),Io.ensure().schedule(a));for(var o=a.first;o!==null;){var n=o.next,l=(o.f&Po)!==0||(o.f&$a)!==0;Jl(o,l?e:!1),o=n}var i=a.nodes&&a.nodes.t;if(i!==null)for(const c of i)(c.is_global||e)&&c.in()}}function pn(a,e){if(a.nodes)for(var o=a.nodes.start,n=a.nodes.end;o!==null;){var l=o===n?null:Ds(o);e.append(o),o=l}}let Ws=!1,yo=!1;function Pn(a){yo=a}let $t=null,Ja=!1;function Va(a){$t=a}let Gt=null;function Ka(a){Gt=a}let no=null;function Ql(a){$t!==null&&(no??=new Set).add(a)}let Ea=null,Ma=0,Ga=null;function fd(a){Ga=a}let $l=1,No=0,Go=No;function In(a){Go=a}function ei(){return++$l}function Ms(a){var e=a.f;if((e&_a)!==0)return!0;if(e&Oa&&(a.f&=~qo),(e&io)!==0){for(var o=a.deps,n=o.length,l=0;la.wv)return!0}(e&qa)!==0&&Xa===null&&ba(a,ka)}return!1}function ti(a,e,o=!0){var n=a.reactions;if(n!==null&&!(no!==null&&no.has(a)))for(var l=0;l{a.ac.abort(ir)}),a.ac=null);try{a.f|=$s;var h=a.fn,v=h();a.f|=is;var b=a.deps,k=Nt?.is_fork;if(Ea!==null){var S;if(k||Us(a,Ma),b!==null&&Ma>0)for(b.length=Ma+Ea.length,S=0;So?.call(this,i))}return a.startsWith("pointer")||a.startsWith("touch")||a==="wheel"?ho(()=>{e.addEventListener(a,l,n)}):e.addEventListener(a,l,n),l}function go(a,e,o,n,l){var i={capture:n,passive:l},c=ni(a,e,o,i);(e===document.body||e===window||e===document||e instanceof HTMLMediaElement)&&fr(()=>{e.removeEventListener(a,c,i)})}function x(a,e,o){(e[Cs]??={})[a]=o}function oa(a){for(var e=0;e{throw E});throw b}}finally{a[Cs]=e,delete a.currentTarget,Va(h),Ka(v)}}}const xd=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy("svelte-trusted-html",{createHTML:a=>a});function kd(a){return xd?.createHTML(a)??a}function li(a){var e=Hl("template");return e.innerHTML=kd(a.replaceAll("","")),e.content}function ns(a,e){var o=Gt;o.nodes===null&&(o.nodes={start:a,end:e,a:null,t:null})}function g(a,e){var o=(e&Ic)!==0,n=(e&Bc)!==0,l,i=!a.startsWith("");return()=>{l===void 0&&(l=li(i?a:""+a),o||(l=ss(l)));var c=n||Nl?document.importNode(l,!0):l.cloneNode(!0);if(o){var f=ss(c),p=c.lastChild;ns(f,p)}else ns(c,c);return c}}function wd(a,e,o="svg"){var n=!a.startsWith(""),l=`<${o}>${n?a:""+a}`,i;return()=>{if(!i){var c=li(l),f=ss(c);i=ss(f)}var p=i.cloneNode(!0);return ns(p,p),p}}function _d(a,e){return wd(a,e,"svg")}function ls(a=""){{var e=ro(a+"");return ns(e,e),e}}function zt(){var a=document.createDocumentFragment(),e=document.createComment(""),o=ro();return a.append(e,o),ns(e,o),a}function d(a,e){a!==null&&a.before(e)}function y(a,e){var o=e==null?"":typeof e=="object"?`${e}`:e;o!==(a[jr]??=a.nodeValue)&&(a[jr]=o,a.nodeValue=`${o}`)}function ii(a,e){return Cd(a,e)}const Fs=new Map;function Cd(a,{target:e,anchor:o,props:n={},events:l,context:i,intro:c=!0,transformError:f}){td();var p=void 0,m=ld(()=>{var h=o??e.appendChild(ro());Hc(h,{pending:()=>{}},k=>{ea({});var S=pa;i&&(S.c=i),l&&(n.$$events=l),p=a(k,n)||{},ta()},f);var v=new Set,b=k=>{for(var S=0;S{for(var k of v)for(const P of[e,document]){var S=Fs.get(P),E=S.get(k);--E==0?(P.removeEventListener(k,Kr),S.delete(k),S.size===0&&Fs.delete(P)):S.set(k,E)}Vr.delete(b),h!==o&&h.parentNode?.removeChild(h)}});return Od.set(p,m),p}let Od=new WeakMap;class mr{anchor;#t=new Map;#n=new Map;#e=new Map;#i=new Set;#o=!0;constructor(e,o=!0){this.anchor=e,this.#o=o}#r=e=>{if(this.#t.has(e)){var o=this.#t.get(e),n=this.#n.get(o);if(n)ar(n),this.#i.delete(o);else{var l=this.#e.get(o);l&&(ar(l.effect),this.#n.set(o,l.effect),this.#e.delete(o),l.fragment.lastChild.remove(),this.anchor.before(l.fragment),n=l.effect)}for(const[i,c]of this.#t){if(this.#t.delete(i),i===e)break;const f=this.#e.get(c);f&&(Ca(f.effect),this.#e.delete(c))}for(const[i,c]of this.#n){if(i===o||this.#i.has(i))continue;const f=()=>{if(Array.from(this.#t.values()).includes(i)){var m=document.createDocumentFragment();pn(c,m),m.append(ro()),this.#e.set(i,{effect:c,fragment:m})}else Ca(c);this.#i.delete(i),this.#n.delete(i)};this.#o||!n?(this.#i.add(i),jo(c,f,!1)):f()}}};#a=e=>{this.#t.delete(e);const o=Array.from(this.#t.values());for(const[n,l]of this.#e)o.includes(n)||(Ca(l.effect),this.#e.delete(n))};ensure(e,o){var n=Nt,l=Gl();if(o&&!this.#n.has(e)&&!this.#e.has(e))if(l){var i=document.createDocumentFragment(),c=ro();i.append(c),this.#e.set(e,{effect:Ra(()=>o(c)),fragment:i})}else this.#n.set(e,Ra(()=>o(this.anchor)));if(this.#t.set(n,e),l){for(const[f,p]of this.#n)f===e?n.unskip_effect(p):n.skip_effect(p);for(const[f,p]of this.#e)f===e?n.unskip_effect(p.effect):n.skip_effect(p.effect);n.oncommit(this.#r),n.ondiscard(this.#a)}else this.#r(n)}}function L(a,e,o=!1){var n=new mr(a),l=o?Po:0;function i(c,f){n.ensure(c,f)}us(()=>{var c=!1;e((f,p=0)=>{c=!0,i(p,f)}),c||i(-1,null)},l)}const Sd=Symbol("NaN");function wr(a,e,o){var n=new mr(a),l=!fs();us(()=>{var i=e();i!==i&&(i=Sd),l&&i!==null&&typeof i=="object"&&(i={}),n.ensure(i,o)})}function mn(a,e){return e}function Ld(a,e,o){for(var n=[],l=e.length,i,c=e.length,f=0;f{if(i){if(i.pending.delete(v),i.done.add(v),i.pending.size===0){var b=a.outrogroups;Wr(a,lr(i.done)),b.delete(i),b.size===0&&(a.outrogroups=null)}}else c-=1},!1)}if(c===0){var p=n.length===0&&o!==null;if(p){var m=o,h=m.parentNode;ad(h),h.append(m),a.items.clear()}Wr(a,e,!p)}else i={pending:new Set(e),done:new Set},(a.outrogroups??=new Set).add(i)}function Wr(a,e,o=!0){var n;if(a.pending.size>0){n=new Set;for(const c of a.pending.values())for(const f of c)n.add(a.items.get(f).e)}for(var l=0;l{var H=o();return tn(H)?H:H==null?[]:lr(H)}),b,k=new Map,S=!0;function E(H){(I.effect.f&ja)===0&&(I.pending.delete(H),I.fallback=h,Pd(I,b,c,e,n),h!==null&&(b.length===0?(h.f&oo)===0?ar(h):(h.f^=oo,Os(h,null,c)):jo(h,()=>{h=null})))}function P(H){I.pending.delete(H)}var B=us(()=>{b=t(v);for(var H=b.length,T=new Set,R=Nt,w=Gl(),A=0;Ai(c)):(h=Ra(()=>i(Un??=ro())),h.f|=oo)),H>T.size&&fc(),!S)if(k.set(R,T),w){for(const[D,J]of f)T.has(D)||R.skip_effect(J.e);R.oncommit(E),R.ondiscard(P)}else E(R);t(v)}),I={effect:B,items:f,pending:k,outrogroups:null,fallback:h};S=!1}function ms(a){for(;a!==null&&(a.f&$a)===0;)a=a.next;return a}function Pd(a,e,o,n,l){var i=(n&_c)!==0,c=e.length,f=a.items,p=ms(a.effect.first),m,h=null,v,b=[],k=[],S,E,P,B;if(i)for(B=0;B0){var O=(n&kl)!==0&&c===0?o:null;if(i){for(B=0;B{if(v!==void 0)for(P of v)P.nodes?.a?.apply()})}function Id(a,e,o,n,l,i,c,f){var p=(c&kc)!==0?(c&Cc)===0?Qc(o,!1,!1):Bo(o):null,m=(c&wc)!==0?Bo(l):null;return{v:p,i:m,e:Ra(()=>(i(e,p??o,m??l,f),()=>{a.delete(n)}))}}function Os(a,e,o){if(a.nodes)for(var n=a.nodes.start,l=a.nodes.end,i=e&&(e.f&oo)===0?e.nodes.start:o;n!==null;){var c=Ds(n);if(i.before(n),n===l)return;n=c}}function ko(a,e,o){e===null?a.effect.first=o:e.next=o,o===null?a.effect.last=e:o.prev=e}function Kt(a,e,o,n,l){var i=e.$$slots?.[o],c=!1;i===!0&&(i=e.children,c=!0),i===void 0||i(a,c?()=>n:n)}function or(a,e,o){var n=new mr(a);us(()=>{var l=e()??null;n.ensure(l,l&&(i=>o(i,l)))},Po)}function Bd(a,e,o,n,l,i){var c=null,f=a,p=new mr(f,!1);us(()=>{const m=e()||null;var h=Uc;if(m===null){p.ensure(null,null);return}return p.ensure(m,v=>{if(m){if(c=Hl(m,h),ns(c,c),n){var b=null,k=c.appendChild(ro());n(c,k),b?.remove()}Gt.nodes.end=c,v.before(c)}}),()=>{}},Po),fr(()=>{})}function Ud(a,e){var o=void 0,n;Wl(()=>{o!==(o=e())&&(n&&(Ca(n),n=null),o&&(n=Ra(()=>{ur(()=>o(a))})))})}function ci(a){var e,o,n="";if(typeof a=="string"||typeof a=="number")n+=a;else if(typeof a=="object")if(Array.isArray(a)){var l=a.length;for(e=0;e=0;){var f=c+i;(c===0||An.includes(n[c-1]))&&(f===n.length||An.includes(n[f]))?n=(c===0?"":n.substring(0,c))+n.substring(f+1):c=f}}return n===""?null:n}function zn(a,e=!1){var o=e?" !important;":";",n="";for(var l of Object.keys(a)){var i=a[l];i!=null&&i!==""&&(n+=" "+l+": "+i+o)}return n}function _r(a){return a[0]!=="-"||a[1]!=="-"?a.toLowerCase():a}function Ed(a,e){if(e){var o="",n,l;if(Array.isArray(e)?(n=e[0],l=e[1]):n=e,a){a=String(a).replaceAll(/\s*\/\*.*?\*\/\s*/g,"").trim();var i=!1,c=0,f=!1,p=[];n&&p.push(...Object.keys(n).map(_r)),l&&p.push(...Object.keys(l).map(_r));var m=0,h=-1;const E=a.length;for(var v=0;v{Ia(a,a.__value)});e.observe(a,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),fr(()=>{e.disconnect()})}function En(a,e,o=e){var n=new WeakSet,l=!0;ql(a,"change",i=>{var c=i?"[selected]":":checked",f;if(a.multiple)f=[].map.call(a.querySelectorAll(c),Ps);else{var p=a.querySelector(c)??a.querySelector("option:not([disabled])");f=p&&Ps(p)}o(f),a.__value=f,Nt!==null&&n.add(Nt)}),ur(()=>{var i=e();if(a===document.activeElement){var c=Nt;if(n.has(c))return}if(Ia(a,i,l),l&&i===void 0){var f=a.querySelector(":checked");f!==null&&(i=Ps(f),o(i))}a.__value=i,l=!1}),Na(a)}function Ps(a){return"__value"in a?a.__value:a.value}const vs=Symbol("class"),hs=Symbol("style"),di=Symbol("is custom element"),fi=Symbol("is html"),Rd=cr?"input":"INPUT",Td=cr?"option":"OPTION",Dd=cr?"select":"SELECT",Md=cr?"progress":"PROGRESS";function Jt(a,e){var o=vn(a);o.value===(o.value=e??void 0)||a.value===e&&(e!==0||a.nodeName!==Md)||(a.value=e??"")}function Nd(a,e){e?a.hasAttribute("selected")||a.setAttribute("selected",""):a.removeAttribute("selected")}function ee(a,e,o,n){var l=vn(a);l[e]!==(l[e]=o)&&(e==="loading"&&(a[ic]=o),o==null?a.removeAttribute(e):typeof o!="string"&&ui(a).includes(e)?a[e]=o:a.setAttribute(e,o))}function Fd(a,e,o,n,l=!1,i=!1){var c=vn(a),f=c[di],p=!c[fi],m=e||{},h=a.nodeName===Td;for(var v in e)v in o||(o[v]=null);o.class?o.class=mo(o.class):o[vs]&&(o.class=null),o[hs]&&(o.style??=null);var b=ui(a);if(a.nodeName===Rd&&"type"in o&&("value"in o||"__value"in o)){var k=o.type;(k!==m.type||k===void 0&&a.hasAttribute("type"))&&(m.type=k,ee(a,"type",k))}for(const R in o){let w=o[R];if(h&&R==="value"&&w==null){a.value=a.__value="",m[R]=w;continue}if(R==="class"){var S=a.namespaceURI==="http://www.w3.org/1999/xhtml";Ye(a,S,w,n,e?.[vs],o[vs]),m[R]=w,m[vs]=o[vs];continue}if(R==="style"){it(a,w,e?.[hs],o[hs]),m[R]=w,m[hs]=o[hs];continue}var E=m[R];if(!(w===E&&!(w===void 0&&a.hasAttribute(R)))){m[R]=w;var P=R[0]+R[1];if(P!=="$$")if(P==="on"){const A={},j="$$"+R;let O=R.slice(2);var B=vd(O);if(pd(O)&&(O=O.slice(0,-7),A.capture=!0),!B&&E){if(w!=null)continue;a.removeEventListener(O,m[j],A),m[j]=null}if(B)x(O,a,w),oa([O]);else if(w!=null){let F=function(D){m[R].call(this,D)};var T=F;m[j]=ni(O,a,F,A)}}else if(R==="style")ee(a,R,w);else if(R==="autofocus")od(a,!!w);else if(!f&&(R==="__value"||R==="value"&&w!=null))a.value=a.__value=w;else if(R==="selected"&&h)Nd(a,w);else{var I=R;p||(I=gd(I));var H=I==="defaultValue"||I==="defaultChecked";if(w==null&&!f&&!H)if(c[R]=null,I==="value"||I==="checked"){let A=a;const j=e===void 0;if(I==="value"){let O=A.defaultValue;A.removeAttribute(I),A.defaultValue=O,A.value=A.__value=j?O:null}else{let O=A.defaultChecked;A.removeAttribute(I),A.defaultChecked=O,A.checked=j?O:!1}}else a.removeAttribute(R);else H||b.includes(I)&&(f||typeof w!="string")?(a[I]=w,I in c&&(c[I]=ya)):typeof w!="function"&&ee(a,I,w)}}}return m}function Rn(a,e,o=[],n=[],l=[],i,c=!1,f=!1){Bl(l,o,n,p=>{var m=void 0,h={},v=a.nodeName===Dd,b=!1;if(Wl(()=>{var S=e(...p.map(t)),E=Fd(a,m,S,i,c,f);b&&v&&"value"in S&&Ia(a,S.value);for(let B of Object.getOwnPropertySymbols(h))S[B]||Ca(h[B]);for(let B of Object.getOwnPropertySymbols(S)){var P=S[B];B.description===Ac&&(!m||P!==m[B])&&(h[B]&&Ca(h[B]),h[B]=Ra(()=>Ud(a,()=>P))),E[B]=P}m=E}),v){var k=a;ur(()=>{Ia(k,m.value,!0),Na(k)})}b=!0})}function vn(a){return a[xl]??={[di]:a.nodeName.includes("-"),[fi]:a.namespaceURI===_l}}var Tn=new Map;function ui(a){var e=a.getAttribute("is")||a.nodeName,o=Tn.get(e);if(o)return o;Tn.set(e,o=[]);for(var n,l=a,i=Element.prototype;i!==l;){n=vl(l);for(var c in n)n[c].set&&c!=="innerHTML"&&c!=="textContent"&&c!=="innerText"&&o.push(c);l=an(l)}return o}function vr(a,e,o=e){var n=new WeakSet;ql(a,"input",async l=>{var i=l?a.defaultValue:a.value;if(i=Or(a)?Sr(i):i,o(i),Nt!==null&&n.add(Nt),await pr(),i!==(i=e())){var c=a.selectionStart,f=a.selectionEnd,p=a.value.length;if(a.value=i??"",f!==null){var m=a.value.length;c===f&&f===p&&m>p?(a.selectionStart=m,a.selectionEnd=m):(a.selectionStart=c,a.selectionEnd=Math.min(f,m))}}}),co(e)==null&&a.value&&(o(Or(a)?Sr(a.value):a.value),Nt!==null&&n.add(Nt)),fn(()=>{var l=e();if(a===document.activeElement){var i=Nt;if(n.has(i))return}Or(a)&&l===Sr(a.value)||a.type==="date"&&!l&&!a.value||l!==a.value&&(a.value=l??"")})}function Or(a){var e=a.type;return e==="number"||e==="range"}function Sr(a){return a===""?null:+a}function Lr(a,e){return a===e||a?.[so]===e}function bo(a={},e,o,n){var l=pa.r,i=Gt;return ur(()=>{var c,f;return fn(()=>{c=f,f=[],co(()=>{Lr(o(...f),a)||(e(a,...f),c&&Lr(o(...c),a)&&e(null,...c))})}),()=>{let p=i;for(;p!==l&&p.parent!==null&&p.parent.f&Mr;)p=p.parent;const m=()=>{f&&Lr(o(...f),a)&&e(null,...f)},h=p.teardown;p.teardown=()=>{m(),h?.()}}}),a}function jd(a=!1){const e=pa,o=e.l.u;if(!o)return;let n=()=>Eo(e.s);if(a){let l=0,i={};const c=as(()=>{let f=!1;const p=e.s;for(const m in p)p[m]!==i[m]&&(i[m]=p[m],f=!0);return f&&l++,l});n=()=>t(c)}o.b.length&&nd(()=>{Dn(e,n),Tr(o.b)}),xa(()=>{const l=co(()=>o.m.map(nc));return()=>{for(const i of l)typeof i=="function"&&i()}}),o.a.length&&xa(()=>{Dn(e,n),Tr(o.a)})}function Dn(a,e){if(a.l.s)for(const o of a.l.s)t(o);e()}const Gd={get(a,e){if(!a.exclude.includes(e))return t(a.version),e in a.special?a.special[e]():a.props[e]},set(a,e,o){if(!(e in a.special)){var n=Gt;try{Ka(a.parent_effect),a.special[e]=Sa({get[e](){return a.props[e]}},e,wl)}finally{Ka(n)}}return a.special[e](o),Cn(a.version),!0},getOwnPropertyDescriptor(a,e){if(!a.exclude.includes(e)&&e in a.props)return{enumerable:!0,configurable:!0,value:a.props[e]}},deleteProperty(a,e){return a.exclude.includes(e)||(a.exclude.push(e),Cn(a.version)),!0},has(a,e){return a.exclude.includes(e)?!1:e in a.props},ownKeys(a){return Reflect.ownKeys(a.props).filter(e=>!a.exclude.includes(e))}};function Ht(a,e){return new Proxy({props:a,exclude:e,special:{},version:Bo(0),parent_effect:Gt},Gd)}const Hd={get(a,e){let o=a.props.length;for(;o--;){let n=a.props[o];if(ps(n)&&(n=n()),typeof n=="object"&&n!==null&&e in n)return n[e]}},set(a,e,o){let n=a.props.length;for(;n--;){let l=a.props[n];ps(l)&&(l=l());const i=Oo(l,e);if(i&&i.set)return i.set(o),!0}return!1},getOwnPropertyDescriptor(a,e){let o=a.props.length;for(;o--;){let n=a.props[o];if(ps(n)&&(n=n()),typeof n=="object"&&n!==null&&e in n){const l=Oo(n,e);return l&&!l.configurable&&(l.configurable=!0),l}}},has(a,e){if(e===so||e===yl)return!1;for(let o of a.props)if(ps(o)&&(o=o()),o!=null&&e in o)return!0;return!1},ownKeys(a){const e=[];for(let o of a.props)if(ps(o)&&(o=o()),!!o){for(const n in o)e.includes(n)||e.push(n);for(const n of Object.getOwnPropertySymbols(o))e.includes(n)||e.push(n)}return e}};function Yt(...a){return new Proxy({props:a},Hd)}function Sa(a,e,o,n){var l=!ds||(o&Sc)!==0,i=(o&Lc)!==0,c=(o&Pc)!==0,f=n,p=!0,m=void 0,h=()=>c&&l?(m??=as(n),t(m)):(p&&(p=!1,f=c?co(n):n),f);let v;if(i){var b=so in a||yl in a;v=Oo(a,e)?.set??(b&&e in a?T=>a[e]=T:void 0)}var k,S=!1;i?[k,S]=Fc(()=>a[e]):k=a[e],k===void 0&&n!==void 0&&(k=h(),v&&(l&&hc(),v(k)));var E;if(l?E=()=>{var T=a[e];return T===void 0?h():(p=!0,T)}:E=()=>{var T=a[e];return T!==void 0&&(f=void 0),T===void 0?f:T},l&&(o&wl)===0)return E;if(v){var P=a.$$legacy;return(function(T,R){return arguments.length>0?((!l||!R||P||S)&&v(R?E():T),T):E()})}var B=!1,I=((o&Oc)!==0?as:rn)(()=>(B=!1,E()));i&&t(I);var H=Gt;return(function(T,R){if(arguments.length>0){const w=R?t(I):l&&i?va(T):T;return _(I,w),B=!0,f!==void 0&&(f=w),T}return yo&&B||(H.f&ja)!==0?I.v:t(I)})}function pi(a){pa===null&&cc(),ds&&pa.l!==null?qd(pa).m.push(a):xa(()=>{const e=co(a);if(typeof e=="function")return e})}function qd(a){var e=a.l;return e.u??={a:[],b:[],m:[]}}const Vd="5";typeof window<"u"&&((window.__svelte??={}).v??=new Set).add(Vd);Dc();/** +var on=Array.isArray,ac=Array.prototype.indexOf,$s=Array.prototype.includes,ir=Array.from,oc=Object.defineProperty,Oo=Object.getOwnPropertyDescriptor,hl=Object.getOwnPropertyDescriptors,sc=Object.prototype,rc=Array.prototype,sn=Object.getPrototypeOf,_n=Object.isExtensible;function ps(a){return typeof a=="function"}const Ss=()=>{};function nc(a){return a()}function Dr(a){for(var e=0;e{a=n,e=l});return{promise:o,resolve:a,reject:e}}function Ta(a,e){if(Array.isArray(a))return a;if(!(Symbol.iterator in a))return Array.from(a);const o=[];for(const n of a)if(o.push(n),o.length===e)break;return o}const Oa=2,es=4,Ms=8,rn=1<<24,Za=16,$a=32,Lo=64,Mr=128,qa=512,ka=1024,_a=2048,io=4096,Ba=8192,ja=16384,is=32768,Nr=1<<25,Po=65536,er=1<<17,lc=1<<18,cs=1<<19,bl=1<<20,oo=1<<25,qo=65536,tr=1<<21,Qo=1<<22,So=1<<23,so=Symbol("$state"),yl=Symbol("legacy props"),ic=Symbol(""),xl=Symbol("attributes"),Fr=Symbol("class"),jr=Symbol("style"),Gr=Symbol("text"),Ws=Symbol("form reset"),cr=new class extends Error{name="StaleReactionError";message="The reaction that called `getAbortSignal()` was re-run or destroyed"},dr=!!globalThis.document?.contentType&&globalThis.document.contentType.includes("xml");function cc(a){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function dc(){throw new Error("https://svelte.dev/e/async_derived_orphan")}function fc(a,e,o){throw new Error("https://svelte.dev/e/each_key_duplicate")}function uc(a){throw new Error("https://svelte.dev/e/effect_in_teardown")}function pc(){throw new Error("https://svelte.dev/e/effect_in_unowned_derived")}function mc(a){throw new Error("https://svelte.dev/e/effect_orphan")}function vc(){throw new Error("https://svelte.dev/e/effect_update_depth_exceeded")}function hc(a){throw new Error("https://svelte.dev/e/props_invalid_value")}function gc(){throw new Error("https://svelte.dev/e/state_descriptors_fixed")}function bc(){throw new Error("https://svelte.dev/e/state_prototype_fixed")}function yc(){throw new Error("https://svelte.dev/e/state_unsafe_mutation")}function xc(){throw new Error("https://svelte.dev/e/svelte_boundary_reset_onerror")}const kc=1,wc=2,kl=4,_c=8,Cc=16,Oc=1,Sc=2,wl=4,Lc=8,Pc=16,Ic=1,Bc=2,ya=Symbol("uninitialized"),_l="http://www.w3.org/1999/xhtml",Uc="http://www.w3.org/2000/svg",Ac="@attach";function zc(){console.warn("https://svelte.dev/e/derived_inert")}function Ec(){console.warn("https://svelte.dev/e/select_multiple_invalid_value")}function Rc(){console.warn("https://svelte.dev/e/svelte_boundary_reset_noop")}function Cl(a){return a===this.v}function Tc(a,e){return a!=a?e==e:a!==e||a!==null&&typeof a=="object"||typeof a=="function"}function Ol(a){return!Tc(a,this.v)}let ds=!1;function Dc(){ds=!0}let pa=null;function ts(a){pa=a}function ea(a,e=!1,o){pa={p:pa,i:!1,c:null,e:null,s:a,x:null,r:Gt,l:ds&&!e?{s:null,u:null,$:[]}:null}}function ta(a){var e=pa,o=e.e;if(o!==null){e.e=null;for(var n of o)Kl(n)}return e.i=!0,pa=e.p,{}}function fs(){return!ds||pa!==null&&pa.l===null}let Mo=[];function Sl(){var a=Mo;Mo=[],Dr(a)}function ho(a){if(Mo.length===0&&!Ls){var e=Mo;queueMicrotask(()=>{e===Mo&&Sl()})}Mo.push(a)}function Mc(){for(;Mo.length>0;)Sl()}function Ll(a){var e=Gt;if(e===null)return $t.f|=So,a;if((e.f&is)===0&&(e.f&es)===0)throw a;Co(a,e)}function Co(a,e){if(!(e!==null&&(e.f&ja)!==0)){for(;e!==null;){if((e.f&Mr)!==0){if((e.f&is)===0)throw a;try{e.b.error(a);return}catch(o){a=o}}e=e.parent}throw a}}const Nc=-7169;function ba(a,e){a.f=a.f&Nc|e}function nn(a){(a.f&qa)!==0||a.deps===null?ba(a,ka):ba(a,io)}function Pl(a){if(a!==null)for(const e of a)(e.f&Oa)===0||(e.f&qo)===0||(e.f^=qo,Pl(e.deps))}function Il(a,e,o){(a.f&_a)!==0?e.add(a):(a.f&io)!==0&&o.add(a),Pl(a.deps),ba(a,ka)}let js=!1;function Fc(a){var e=js;try{return js=!1,[a(),js]}finally{js=e}}function jc(a){let e=0,o=Bo(0),n;return()=>{un()&&(t(o),pn(()=>(e===0&&(n=co(()=>a(()=>Ps(o)))),e+=1,()=>{ho(()=>{e-=1,e===0&&(n?.(),n=void 0,Ps(o))})})))}}var Gc=Po|cs;function Hc(a,e,o,n){new qc(a,e,o,n)}class qc{parent;is_pending=!1;transform_error;#t;#n=null;#e;#i;#o;#r=null;#a=null;#l=null;#s=null;#m=0;#c=0;#d=!1;#u=new Set;#h=new Set;#f=null;#b=jc(()=>(this.#f=Bo(this.#m),()=>{this.#f=null}));constructor(e,o,n,l){this.#t=e,this.#e=o,this.#i=i=>{var c=Gt;c.b=this,c.f|=Mr,n(i)},this.parent=Gt.b,this.transform_error=l??this.parent?.transform_error??(i=>i),this.#o=us(()=>{this.#y()},Gc)}#g(){try{this.#r=Ra(()=>this.#i(this.#t))}catch(e){this.error(e)}}#k(e){const o=this.#e.failed;o&&(this.#l=Ra(()=>{o(this.#t,()=>e,()=>()=>{})}))}#w(){const e=this.#e.pending;e&&(this.is_pending=!0,this.#a=Ra(()=>e(this.#t)),ho(()=>{var o=this.#s=document.createDocumentFragment(),n=ro();o.append(n),this.#r=this.#x(()=>Ra(()=>this.#i(n))),this.#c===0&&(this.#t.before(o),this.#s=null,jo(this.#a,()=>{this.#a=null}),this.#p(Nt))}))}#y(){try{if(this.is_pending=this.has_pending_snippet(),this.#c=0,this.#m=0,this.#r=Ra(()=>{this.#i(this.#t)}),this.#c>0){var e=this.#s=document.createDocumentFragment();vn(this.#r,e);const o=this.#e.pending;this.#a=Ra(()=>o(this.#t))}else this.#p(Nt)}catch(o){this.error(o)}}#p(e){this.is_pending=!1,e.transfer_effects(this.#u,this.#h)}defer_effect(e){Il(e,this.#u,this.#h)}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!this.#e.pending}#x(e){var o=Gt,n=$t,l=pa;Ka(this.#o),Va(this.#o),ts(this.#o.ctx);try{return Io.ensure(),e()}catch(i){return Ll(i),null}finally{Ka(o),Va(n),ts(l)}}#v(e,o){if(!this.has_pending_snippet()){this.parent&&this.parent.#v(e,o);return}this.#c+=e,this.#c===0&&(this.#p(o),this.#a&&jo(this.#a,()=>{this.#a=null}),this.#s&&(this.#t.before(this.#s),this.#s=null))}update_pending_count(e,o){this.#v(e,o),this.#m+=e,!(!this.#f||this.#d)&&(this.#d=!0,ho(()=>{this.#d=!1,this.#f&&os(this.#f,this.#m)}))}get_effect_pending(){return this.#b(),t(this.#f)}error(e){if(!this.#e.onerror&&!this.#e.failed)throw e;Nt?.is_fork?(this.#r&&Nt.skip_effect(this.#r),this.#a&&Nt.skip_effect(this.#a),this.#l&&Nt.skip_effect(this.#l),Nt.oncommit(()=>{this.#_(e)})):this.#_(e)}#_(e){this.#r&&(Ca(this.#r),this.#r=null),this.#a&&(Ca(this.#a),this.#a=null),this.#l&&(Ca(this.#l),this.#l=null);var o=this.#e.onerror;let n=this.#e.failed;var l=!1,i=!1;const c=()=>{if(l){Rc();return}l=!0,i&&xc(),this.#l!==null&&jo(this.#l,()=>{this.#l=null}),this.#x(()=>{this.#y()})},d=p=>{try{i=!0,o?.(p,c),i=!1}catch(m){Co(m,this.#o&&this.#o.parent)}n&&(this.#l=this.#x(()=>{try{return Ra(()=>{var m=Gt;m.b=this,m.f|=Mr,n(this.#t,()=>p,()=>c)})}catch(m){return Co(m,this.#o.parent),null}}))};ho(()=>{var p;try{p=this.transform_error(e)}catch(m){Co(m,this.#o&&this.#o.parent);return}p!==null&&typeof p=="object"&&typeof p.then=="function"?p.then(d,m=>Co(m,this.#o&&this.#o.parent)):d(p)})}}function Bl(a,e,o,n){const l=fs()?as:ln;var i=a.filter(k=>!k.settled),c=e.map(l);if(o.length===0&&i.length===0){n(c);return}var d=Gt,p=Vc(),m=i.length===1?i[0].promise:i.length>1?Promise.all(i.map(k=>k.promise)):null;function h(k){if((d.f&ja)===0){p();try{n([...c,...k])}catch(S){Co(S,d)}ar()}}var v=Ul();if(o.length===0){m.then(()=>h([])).finally(v);return}function b(){Promise.all(o.map(k=>Kc(k))).then(h).catch(k=>Co(k,d)).finally(v)}m?m.then(()=>{p(),b(),ar()}):b()}function Vc(){var a=Gt,e=$t,o=pa,n=Nt;return function(i=!0){Ka(a),Va(e),ts(o),i&&(a.f&ja)===0&&(n?.activate(),n?.apply())}}function ar(a=!0){Ka(null),Va(null),ts(null),a&&Nt?.deactivate()}function Ul(){var a=Gt,e=a.b,o=Nt,n=!!e?.is_rendered();return e?.update_pending_count(1,o),o.increment(n,a),()=>{e?.update_pending_count(-1,o),o.decrement(n,a)}}function as(a){var e=Oa|_a;return Gt!==null&&(Gt.f|=cs),{ctx:pa,deps:null,effects:null,equals:Cl,f:e,fn:a,reactions:null,rv:0,v:ya,wv:0,parent:Gt,ac:null}}const _s=Symbol("obsolete");function Kc(a,e,o){let n=Gt;n===null&&dc();var l=void 0,i=Bo(ya),c=!$t,d=new Set;return id(()=>{var p=Gt,m=gl();l=m.promise;try{Promise.resolve(a()).then(m.resolve,k=>{k!==cr&&m.reject(k)}).finally(ar)}catch(k){m.reject(k),ar()}var h=Nt;if(c){if((p.f&is)!==0)var v=Ul();if(n.b?.is_rendered())h.async_deriveds.get(p)?.reject(_s);else for(const k of d.values())k.reject(_s);d.add(m),h.async_deriveds.set(p,m)}const b=(k,S=void 0)=>{v?.(),d.delete(m),S!==_s&&(h.activate(),S?(i.f|=So,os(i,S)):((i.f&So)!==0&&(i.f^=So),os(i,k)),h.deactivate())};m.promise.then(b,k=>b(null,k||"unknown"))}),ur(()=>{for(const p of d)p.reject(_s)}),new Promise(p=>{function m(h){function v(){h===l?p(i):m(l)}h.then(v,v)}m(l)})}function u(a){const e=as(a);return Ql(e),e}function ln(a){const e=as(a);return e.equals=Ol,e}function Wc(a){var e=a.effects;if(e!==null){a.effects=null;for(var o=0;othis.schedule(n)){var n=this.#u.get(e);if(n){this.#u.delete(e);for(var l of n.d)ba(l,_a),o(l);for(l of n.m)ba(l,io),o(l)}this.#h.add(e)}#g(){this.#t=!0,Cn++>1e3&&(this.#v(),Jc());for(const p of this.#c)this.#d.delete(p),ba(p,_a),this.schedule(p);for(const p of this.#d)ba(p,io),this.schedule(p);const e=this.#s;this.#s=[],this.apply();var o=Xo=[],n=[],l=Ys=[];for(const p of e)try{this.#k(p,o,n)}catch(m){throw Tl(p),this.#b()||this.discard(),m}if(Nt=null,l.length>0){var i=Io.ensure();for(const p of l)i.schedule(p)}if(Xo=null,Ys=null,this.#b()){this.#p(n),this.#p(o);for(const[p,m]of this.#u)Rl(p,m);l.length>0&&Nt.#g();return}const c=this.#w();if(c){this.#p(n),this.#p(o),c.#y(this);return}this.#c.clear(),this.#d.clear();for(const p of this.#i)p(this);this.#i.clear(),Hr=this,On(n),On(o),Hr=null,this.#l?.resolve();var d=Nt;if(this.#r===0&&(this.#s.length===0||d!==null)&&this.#v(),this.#s.length>0)if(d!==null){const p=d;p.#s.push(...this.#s.filter(m=>!p.#s.includes(m)))}else d=this;d!==null&&d.#g()}#k(e,o,n){e.f^=ka;for(var l=e.first;l!==null;){var i=l.f,c=(i&($a|Lo))!==0,d=c&&(i&ka)!==0,p=d||(i&Ba)!==0||this.#u.has(l);if(!p&&l.fn!==null){c?l.f^=ka:(i&es)!==0?o.push(l):Fs(l)&&((i&Za)!==0&&this.#d.add(l),rs(l));var m=l.first;if(m!==null){l=m;continue}}for(;l!==null;){var h=l.next;if(h!==null){l=h;break}l=l.parent}}}#w(){for(var e=this.#n;e!==null;){if(!e.is_fork){for(const[o,[,n]]of this.current)if(e.current.has(o)&&!n)return e}e=e.#n}return null}#y(e){for(const[n,l]of e.current)!this.previous.has(n)&&e.previous.has(n)&&this.previous.set(n,e.previous.get(n)),this.current.set(n,l);for(const[n,l]of e.async_deriveds){const i=this.async_deriveds.get(n);i&&l.promise.then(i.resolve).catch(i.reject)}e.async_deriveds.clear(),this.transfer_effects(e.#c,e.#d);const o=n=>{var l=n.reactions;if(l!==null)for(const d of l){var i=d.f;if((i&Oa)!==0)o(d);else{var c=d;i&(Qo|Za)&&!this.async_deriveds.has(c)&&(this.#d.delete(c),ba(c,_a),this.schedule(c))}}};for(const n of this.current.keys())o(n);this.oncommit(()=>e.discard()),e.#v(),Nt=this,this.#g()}#p(e){for(var o=0;o!v.current.get(b)[1]);if(!(!v.#t||l.length===0)){var i=l.filter(b=>!this.current.has(b));if(i.length===0)e&&v.discard();else if(o.length>0){if(e)for(const b of this.#h)v.unskip_effect(b,k=>{(k.f&(Za|Qo))!==0?v.schedule(k):v.#p([k])});v.activate();var c=new Set,d=new Map;for(var p of o)El(p,i,c,d);d=new Map;var m=[...v.current].filter(([b,k])=>{const S=this.current.get(b);return S?S[0]!==k[0]||S[1]!==k[1]:!0}).map(([b])=>b);if(m.length>0)for(const b of this.#m)(b.f&(ja|Ba|er))===0&&dn(b,m,d)&&((b.f&(Qo|Za))!==0?(ba(b,_a),v.schedule(b)):v.#c.add(b));if(v.#s.length>0&&!v.#f){v.apply();for(var h of v.#s)v.#k(h,[],[]);v.#s=[]}v.deactivate()}}}}increment(e,o){if(this.#r+=1,e){let n=this.#a.get(o)??0;this.#a.set(o,n+1)}}decrement(e,o){if(this.#r-=1,e){let n=this.#a.get(o)??0;n===1?this.#a.delete(o):this.#a.set(o,n-1)}this.#f||(this.#f=!0,ho(()=>{this.#f=!1,this.linked&&this.flush()}))}transfer_effects(e,o){for(const n of e)this.#c.add(n);for(const n of o)this.#d.add(n);e.clear(),o.clear()}oncommit(e){this.#i.add(e)}ondiscard(e){this.#o.add(e)}settled(){return(this.#l??=gl()).promise}static ensure(){if(Nt===null){const e=Nt=new Io;!wr&&!Ls&&ho(()=>{e.#t||e.flush()})}return Nt}apply(){{Xa=null;return}}schedule(e){if(qr=e,e.b?.is_pending&&(e.f&(es|Ms|rn))!==0&&(e.f&is)===0){e.b.defer_effect(e);return}for(var o=e;o.parent!==null;){o=o.parent;var n=o.f;if(Xo!==null&&o===Gt&&($t===null||($t.f&Oa)===0))return;if((n&(Lo|$a))!==0){if((n&ka)===0)return;o.f^=ka}}this.#s.push(o)}#v(){if(this.linked){var e=this.#n,o=this.#e;e===null?kr=o:e.#e=o,o===null?Wo=e:o.#n=e,this.linked=!1}}}function Xc(a){var e=Ls;Ls=!0;try{for(var o;;){if(Mc(),Nt===null)return o;Nt.flush()}}finally{Ls=e}}function Jc(){try{vc()}catch(a){Co(a,qr)}}let po=null;function On(a){var e=a.length;if(e!==0){for(var o=0;o0)){Fo.clear();for(const l of po){if((l.f&(ja|Ba))!==0)continue;const i=[l];let c=l.parent;for(;c!==null;)po.has(c)&&(po.delete(c),i.push(c)),c=c.parent;for(let d=i.length-1;d>=0;d--){const p=i[d];(p.f&(ja|Ba))===0&&rs(p)}}po.clear()}}po=null}}function El(a,e,o,n){if(!o.has(a)&&(o.add(a),a.reactions!==null))for(const l of a.reactions){const i=l.f;(i&Oa)!==0?El(l,e,o,n):(i&(Qo|Za))!==0&&(i&_a)===0&&dn(l,e,n)&&(ba(l,_a),fn(l))}}function dn(a,e,o){const n=o.get(a);if(n!==void 0)return n;if(a.deps!==null)for(const l of a.deps){if($s.call(e,l))return!0;if((l.f&Oa)!==0&&dn(l,e,o))return o.set(l,!0),!0}return o.set(a,!1),!1}function fn(a){Nt.schedule(a)}function Rl(a,e){if(!((a.f&$a)!==0&&(a.f&ka)!==0)){(a.f&_a)!==0?e.d.push(a):(a.f&io)!==0&&e.m.push(a),ba(a,ka);for(var o=a.first;o!==null;)Rl(o,e),o=o.next}}function Tl(a){ba(a,ka);for(var e=a.first;e!==null;)Tl(e),e=e.next}let or=new Set;const Fo=new Map;let Dl=!1;function Bo(a,e){var o={f:0,v:a,reactions:null,equals:Cl,rv:0,wv:0};return o}function K(a,e){const o=Bo(a);return Ql(o),o}function Qc(a,e=!1,o=!0){const n=Bo(a);return e||(n.equals=Ol),ds&&o&&pa!==null&&pa.l!==null&&(pa.l.s??=[]).push(n),n}function w(a,e,o=!1){$t!==null&&(!Ja||($t.f&er)!==0)&&fs()&&($t.f&(Oa|Za|Qo|er))!==0&&(no===null||!no.has(a))&&yc();let n=o?va(e):e;return os(a,n,Ys)}function os(a,e,o=null){if(!a.equals(e)){Fo.set(a,yo?e:a.v);var n=Io.ensure();if(n.capture(a,e),(a.f&Oa)!==0){const l=a;(a.f&_a)!==0&&cn(l),Xa===null&&nn(l)}a.wv=ei(),Ml(a,_a,o),fs()&&Gt!==null&&(Gt.f&ka)!==0&&(Gt.f&($a|Lo))===0&&(Ga===null?fd([a]):Ga.push(a)),!n.is_fork&&or.size>0&&!Dl&&$c()}return e}function $c(){Dl=!1;for(const a of or){(a.f&ka)!==0&&ba(a,io);let e;try{e=Fs(a)}catch{e=!0}e&&rs(a)}or.clear()}function Sn(a,e=1){var o=t(a),n=e===1?o++:o--;return w(a,o),n}function Ps(a){w(a,a.v+1)}function Ml(a,e,o){var n=a.reactions;if(n!==null)for(var l=fs(),i=n.length,c=0;c{if(Go===i)return d();var p=$t,m=Go;Va(null),Un(i);var h=d();return Va(p),Un(m),h};return n&&o.set("length",K(a.length)),new Proxy(a,{defineProperty(d,p,m){(!("value"in m)||m.configurable===!1||m.enumerable===!1||m.writable===!1)&&gc();var h=o.get(p);return h===void 0?c(()=>{var v=K(m.value);return o.set(p,v),v}):w(h,m.value,!0),!0},deleteProperty(d,p){var m=o.get(p);if(m===void 0){if(p in d){const h=c(()=>K(ya));o.set(p,h),Ps(l)}}else w(m,ya),Ps(l);return!0},get(d,p,m){if(p===so)return a;var h=o.get(p),v=p in d;if(h===void 0&&(!v||Oo(d,p)?.writable)&&(h=c(()=>{var k=va(v?d[p]:ya),S=K(k);return S}),o.set(p,h)),h!==void 0){var b=t(h);return b===ya?void 0:b}return Reflect.get(d,p,m)},getOwnPropertyDescriptor(d,p){var m=Reflect.getOwnPropertyDescriptor(d,p);if(m&&"value"in m){var h=o.get(p);h&&(m.value=t(h))}else if(m===void 0){var v=o.get(p),b=v?.v;if(v!==void 0&&b!==ya)return{enumerable:!0,configurable:!0,value:b,writable:!0}}return m},has(d,p){if(p===so)return!0;var m=o.get(p),h=m!==void 0&&m.v!==ya||Reflect.has(d,p);if(m!==void 0||Gt!==null&&(!h||Oo(d,p)?.writable)){m===void 0&&(m=c(()=>{var b=h?va(d[p]):ya,k=K(b);return k}),o.set(p,m));var v=t(m);if(v===ya)return!1}return h},set(d,p,m,h){var v=o.get(p),b=p in d;if(n&&p==="length")for(var k=m;kK(ya)),o.set(k+"",S))}if(v===void 0)(!b||Oo(d,p)?.writable)&&(v=c(()=>K(void 0)),w(v,va(m)),o.set(p,v));else{b=v.v!==ya;var E=c(()=>va(m));w(v,E)}var I=Reflect.getOwnPropertyDescriptor(d,p);if(I?.set&&I.set.call(h,m),!b){if(n&&typeof p=="string"){var P=o.get("length"),B=Number(p);Number.isInteger(B)&&B>=P.v&&w(P,B+1)}Ps(l)}return!0},ownKeys(d){t(l);var p=Reflect.ownKeys(d).filter(v=>{var b=o.get(v);return b===void 0||b.v!==ya});for(var[m,h]of o)h.v!==ya&&!(m in d)&&p.push(m);return p},setPrototypeOf(){bc()}})}function Ln(a){try{if(a!==null&&typeof a=="object"&&so in a)return a[so]}catch{}return a}function ed(a,e){return Object.is(Ln(a),Ln(e))}var Pn,Nl,Fl,jl;function td(){if(Pn===void 0){Pn=window,Nl=/Firefox/.test(navigator.userAgent);var a=Element.prototype,e=Node.prototype,o=Text.prototype;Fl=Oo(e,"firstChild").get,jl=Oo(e,"nextSibling").get,_n(a)&&(a[Fr]=void 0,a[xl]=null,a[jr]=void 0,a.__e=void 0),_n(o)&&(o[Gr]=void 0)}}function ro(a=""){return document.createTextNode(a)}function ss(a){return Fl.call(a)}function Ns(a){return jl.call(a)}function s(a,e){return ss(a)}function ce(a,e=!1){{var o=ss(a);return o instanceof Comment&&o.data===""?Ns(o):o}}function r(a,e=1,o=!1){let n=a;for(;e--;)n=Ns(n);return n}function ad(a){a.textContent=""}function Gl(){return!1}function Hl(a,e,o){return e==null||e===_l?o?document.createElement(a,{is:o}):document.createElement(a):o?document.createElementNS(e,a,{is:o}):document.createElementNS(e,a)}function od(a,e){if(e){const o=document.body;a.autofocus=!0,ho(()=>{document.activeElement===o&&a.focus()})}}let In=!1;function sd(){In||(In=!0,document.addEventListener("reset",a=>{Promise.resolve().then(()=>{if(!a.defaultPrevented)for(const e of a.target.elements)e[Ws]?.()})},{capture:!0}))}function fr(a){var e=$t,o=Gt;Va(null),Ka(null);try{return a()}finally{Va(e),Ka(o)}}function ql(a,e,o,n=o){a.addEventListener(e,()=>fr(o));const l=a[Ws];l?a[Ws]=()=>{l(),n(!0)}:a[Ws]=()=>n(!0),sd()}function Vl(a){Gt===null&&($t===null&&mc(),pc()),yo&&uc()}function rd(a,e){var o=e.last;o===null?e.last=e.first=a:(o.next=a,a.prev=o,e.last=a)}function eo(a,e){var o=Gt;o!==null&&(o.f&Ba)!==0&&(a|=Ba);var n={ctx:pa,deps:null,nodes:null,f:a|_a|qa,first:null,fn:e,last:null,next:null,parent:o,b:o&&o.b,prev:null,teardown:null,wv:0,ac:null};Nt?.register_created_effect(n);var l=n;if((a&es)!==0)Xo!==null?Xo.push(n):Io.ensure().schedule(n);else if(e!==null){try{rs(n)}catch(c){throw Ca(n),c}l.deps===null&&l.teardown===null&&l.nodes===null&&l.first===l.last&&(l.f&cs)===0&&(l=l.first,(a&Za)!==0&&(a&Po)!==0&&l!==null&&(l.f|=Po))}if(l!==null&&(l.parent=o,o!==null&&rd(l,o),$t!==null&&($t.f&Oa)!==0&&(a&Lo)===0)){var i=$t;(i.effects??=[]).push(l)}return n}function un(){return $t!==null&&!Ja}function ur(a){const e=eo(Ms,null);return ba(e,ka),e.teardown=a,e}function xa(a){Vl();var e=Gt.f,o=!$t&&(e&$a)!==0&&pa!==null&&!pa.i;if(o){var n=pa;(n.e??=[]).push(a)}else return Kl(a)}function Kl(a){return eo(es|bl,a)}function nd(a){return Vl(),eo(Ms|bl,a)}function ld(a){Io.ensure();const e=eo(Lo|cs,a);return(o={})=>new Promise(n=>{o.outro?jo(e,()=>{Ca(e),n(void 0)}):(Ca(e),n(void 0))})}function pr(a){return eo(es,a)}function id(a){return eo(Qo|cs,a)}function pn(a,e=0){return eo(Ms|e,a)}function _(a,e=[],o=[],n=[]){Bl(n,e,o,l=>{eo(Ms,()=>{a(...l.map(t))})})}function us(a,e=0){var o=eo(Za|e,a);return o}function Wl(a,e=0){var o=eo(rn|e,a);return o}function Ra(a){return eo($a|cs,a)}function Yl(a){var e=a.teardown;if(e!==null){const o=yo,n=$t;Bn(!0),Va(null);try{e.call(null)}finally{Bn(o),Va(n)}}}function mn(a,e=!1){var o=a.first;for(a.first=a.last=null;o!==null;){const l=o.ac;l!==null&&fr(()=>{l.abort(cr)});var n=o.next;(o.f&Lo)!==0?o.parent=null:Ca(o,e),o=n}}function cd(a){for(var e=a.first;e!==null;){var o=e.next;(e.f&$a)===0&&Ca(e),e=o}}function Ca(a,e=!0){var o=!1;(e||(a.f&lc)!==0)&&a.nodes!==null&&a.nodes.end!==null&&(dd(a.nodes.start,a.nodes.end),o=!0),a.f|=Nr,mn(a,e&&!o),As(a,0);var n=a.nodes&&a.nodes.t;if(n!==null)for(const i of n)i.stop();Yl(a),a.f^=Nr,a.f|=ja;var l=a.parent;l!==null&&l.first!==null&&Zl(a),a.next=a.prev=a.teardown=a.ctx=a.deps=a.fn=a.nodes=a.ac=a.b=null}function dd(a,e){for(;a!==null;){var o=a===e?null:Ns(a);a.remove(),a=o}}function Zl(a){var e=a.parent,o=a.prev,n=a.next;o!==null&&(o.next=n),n!==null&&(n.prev=o),e!==null&&(e.first===a&&(e.first=n),e.last===a&&(e.last=o))}function jo(a,e,o=!0){var n=[];Xl(a,n,!0);var l=()=>{o&&Ca(a),e&&e()},i=n.length;if(i>0){var c=()=>--i||l();for(var d of n)d.out(c)}else l()}function Xl(a,e,o){if((a.f&Ba)===0){a.f^=Ba;var n=a.nodes&&a.nodes.t;if(n!==null)for(const d of n)(d.is_global||o)&&e.push(d);for(var l=a.first;l!==null;){var i=l.next;if((l.f&Lo)===0){var c=(l.f&Po)!==0||(l.f&$a)!==0&&(a.f&Za)!==0;Xl(l,e,c?o:!1)}l=i}}}function sr(a){Jl(a,!0)}function Jl(a,e){if((a.f&Ba)!==0){a.f^=Ba,(a.f&ka)===0&&(ba(a,_a),Io.ensure().schedule(a));for(var o=a.first;o!==null;){var n=o.next,l=(o.f&Po)!==0||(o.f&$a)!==0;Jl(o,l?e:!1),o=n}var i=a.nodes&&a.nodes.t;if(i!==null)for(const c of i)(c.is_global||e)&&c.in()}}function vn(a,e){if(a.nodes)for(var o=a.nodes.start,n=a.nodes.end;o!==null;){var l=o===n?null:Ns(o);e.append(o),o=l}}let Zs=!1,yo=!1;function Bn(a){yo=a}let $t=null,Ja=!1;function Va(a){$t=a}let Gt=null;function Ka(a){Gt=a}let no=null;function Ql(a){$t!==null&&(no??=new Set).add(a)}let Ea=null,Ma=0,Ga=null;function fd(a){Ga=a}let $l=1,No=0,Go=No;function Un(a){Go=a}function ei(){return++$l}function Fs(a){var e=a.f;if((e&_a)!==0)return!0;if(e&Oa&&(a.f&=~qo),(e&io)!==0){for(var o=a.deps,n=o.length,l=0;la.wv)return!0}(e&qa)!==0&&Xa===null&&ba(a,ka)}return!1}function ti(a,e,o=!0){var n=a.reactions;if(n!==null&&!(no!==null&&no.has(a)))for(var l=0;l{a.ac.abort(cr)}),a.ac=null);try{a.f|=tr;var h=a.fn,v=h();a.f|=is;var b=a.deps,k=Nt?.is_fork;if(Ea!==null){var S;if(k||As(a,Ma),b!==null&&Ma>0)for(b.length=Ma+Ea.length,S=0;So?.call(this,i))}return a.startsWith("pointer")||a.startsWith("touch")||a==="wheel"?ho(()=>{e.addEventListener(a,l,n)}):e.addEventListener(a,l,n),l}function go(a,e,o,n,l){var i={capture:n,passive:l},c=ni(a,e,o,i);(e===document.body||e===window||e===document||e instanceof HTMLMediaElement)&&ur(()=>{e.removeEventListener(a,c,i)})}function x(a,e,o){(e[Cs]??={})[a]=o}function oa(a){for(var e=0;e{throw E});throw b}}finally{a[Cs]=e,delete a.currentTarget,Va(h),Ka(v)}}}const xd=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy("svelte-trusted-html",{createHTML:a=>a});function kd(a){return xd?.createHTML(a)??a}function li(a){var e=Hl("template");return e.innerHTML=kd(a.replaceAll("","")),e.content}function ns(a,e){var o=Gt;o.nodes===null&&(o.nodes={start:a,end:e,a:null,t:null})}function g(a,e){var o=(e&Ic)!==0,n=(e&Bc)!==0,l,i=!a.startsWith("");return()=>{l===void 0&&(l=li(i?a:""+a),o||(l=ss(l)));var c=n||Nl?document.importNode(l,!0):l.cloneNode(!0);if(o){var d=ss(c),p=c.lastChild;ns(d,p)}else ns(c,c);return c}}function wd(a,e,o="svg"){var n=!a.startsWith(""),l=`<${o}>${n?a:""+a}`,i;return()=>{if(!i){var c=li(l),d=ss(c);i=ss(d)}var p=i.cloneNode(!0);return ns(p,p),p}}function _d(a,e){return wd(a,e,"svg")}function ls(a=""){{var e=ro(a+"");return ns(e,e),e}}function zt(){var a=document.createDocumentFragment(),e=document.createComment(""),o=ro();return a.append(e,o),ns(e,o),a}function f(a,e){a!==null&&a.before(e)}function y(a,e){var o=e==null?"":typeof e=="object"?`${e}`:e;o!==(a[Gr]??=a.nodeValue)&&(a[Gr]=o,a.nodeValue=`${o}`)}function ii(a,e){return Cd(a,e)}const Gs=new Map;function Cd(a,{target:e,anchor:o,props:n={},events:l,context:i,intro:c=!0,transformError:d}){td();var p=void 0,m=ld(()=>{var h=o??e.appendChild(ro());Hc(h,{pending:()=>{}},k=>{ea({});var S=pa;i&&(S.c=i),l&&(n.$$events=l),p=a(k,n)||{},ta()},d);var v=new Set,b=k=>{for(var S=0;S{for(var k of v)for(const I of[e,document]){var S=Gs.get(I),E=S.get(k);--E==0?(I.removeEventListener(k,Wr),S.delete(k),S.size===0&&Gs.delete(I)):S.set(k,E)}Kr.delete(b),h!==o&&h.parentNode?.removeChild(h)}});return Od.set(p,m),p}let Od=new WeakMap;class vr{anchor;#t=new Map;#n=new Map;#e=new Map;#i=new Set;#o=!0;constructor(e,o=!0){this.anchor=e,this.#o=o}#r=e=>{if(this.#t.has(e)){var o=this.#t.get(e),n=this.#n.get(o);if(n)sr(n),this.#i.delete(o);else{var l=this.#e.get(o);l&&(sr(l.effect),this.#n.set(o,l.effect),this.#e.delete(o),l.fragment.lastChild.remove(),this.anchor.before(l.fragment),n=l.effect)}for(const[i,c]of this.#t){if(this.#t.delete(i),i===e)break;const d=this.#e.get(c);d&&(Ca(d.effect),this.#e.delete(c))}for(const[i,c]of this.#n){if(i===o||this.#i.has(i))continue;const d=()=>{if(Array.from(this.#t.values()).includes(i)){var m=document.createDocumentFragment();vn(c,m),m.append(ro()),this.#e.set(i,{effect:c,fragment:m})}else Ca(c);this.#i.delete(i),this.#n.delete(i)};this.#o||!n?(this.#i.add(i),jo(c,d,!1)):d()}}};#a=e=>{this.#t.delete(e);const o=Array.from(this.#t.values());for(const[n,l]of this.#e)o.includes(n)||(Ca(l.effect),this.#e.delete(n))};ensure(e,o){var n=Nt,l=Gl();if(o&&!this.#n.has(e)&&!this.#e.has(e))if(l){var i=document.createDocumentFragment(),c=ro();i.append(c),this.#e.set(e,{effect:Ra(()=>o(c)),fragment:i})}else this.#n.set(e,Ra(()=>o(this.anchor)));if(this.#t.set(n,e),l){for(const[d,p]of this.#n)d===e?n.unskip_effect(p):n.skip_effect(p);for(const[d,p]of this.#e)d===e?n.unskip_effect(p.effect):n.skip_effect(p.effect);n.oncommit(this.#r),n.ondiscard(this.#a)}else this.#r(n)}}function L(a,e,o=!1){var n=new vr(a),l=o?Po:0;function i(c,d){n.ensure(c,d)}us(()=>{var c=!1;e((d,p=0)=>{c=!0,i(p,d)}),c||i(-1,null)},l)}const Sd=Symbol("NaN");function _r(a,e,o){var n=new vr(a),l=!fs();us(()=>{var i=e();i!==i&&(i=Sd),l&&i!==null&&typeof i=="object"&&(i={}),n.ensure(i,o)})}function hn(a,e){return e}function Ld(a,e,o){for(var n=[],l=e.length,i,c=e.length,d=0;d{if(i){if(i.pending.delete(v),i.done.add(v),i.pending.size===0){var b=a.outrogroups;Yr(a,ir(i.done)),b.delete(i),b.size===0&&(a.outrogroups=null)}}else c-=1},!1)}if(c===0){var p=n.length===0&&o!==null;if(p){var m=o,h=m.parentNode;ad(h),h.append(m),a.items.clear()}Yr(a,e,!p)}else i={pending:new Set(e),done:new Set},(a.outrogroups??=new Set).add(i)}function Yr(a,e,o=!0){var n;if(a.pending.size>0){n=new Set;for(const c of a.pending.values())for(const d of c)n.add(a.items.get(d).e)}for(var l=0;l{var H=o();return on(H)?H:H==null?[]:ir(H)}),b,k=new Map,S=!0;function E(H){(B.effect.f&ja)===0&&(B.pending.delete(H),B.fallback=h,Pd(B,b,c,e,n),h!==null&&(b.length===0?(h.f&oo)===0?sr(h):(h.f^=oo,Os(h,null,c)):jo(h,()=>{h=null})))}function I(H){B.pending.delete(H)}var P=us(()=>{b=t(v);for(var H=b.length,D=new Set,R=Nt,C=Gl(),A=0;Ai(c)):(h=Ra(()=>i(zn??=ro())),h.f|=oo)),H>D.size&&fc(),!S)if(k.set(R,D),C){for(const[M,J]of d)D.has(M)||R.skip_effect(J.e);R.oncommit(E),R.ondiscard(I)}else E(R);t(v)}),B={effect:P,items:d,pending:k,outrogroups:null,fallback:h};S=!1}function ms(a){for(;a!==null&&(a.f&$a)===0;)a=a.next;return a}function Pd(a,e,o,n,l){var i=(n&_c)!==0,c=e.length,d=a.items,p=ms(a.effect.first),m,h=null,v,b=[],k=[],S,E,I,P;if(i)for(P=0;P0){var O=(n&kl)!==0&&c===0?o:null;if(i){for(P=0;P{if(v!==void 0)for(I of v)I.nodes?.a?.apply()})}function Id(a,e,o,n,l,i,c,d){var p=(c&kc)!==0?(c&Cc)===0?Qc(o,!1,!1):Bo(o):null,m=(c&wc)!==0?Bo(l):null;return{v:p,i:m,e:Ra(()=>(i(e,p??o,m??l,d),()=>{a.delete(n)}))}}function Os(a,e,o){if(a.nodes)for(var n=a.nodes.start,l=a.nodes.end,i=e&&(e.f&oo)===0?e.nodes.start:o;n!==null;){var c=Ns(n);if(i.before(n),n===l)return;n=c}}function ko(a,e,o){e===null?a.effect.first=o:e.next=o,o===null?a.effect.last=e:o.prev=e}function Kt(a,e,o,n,l){var i=e.$$slots?.[o],c=!1;i===!0&&(i=e.children,c=!0),i===void 0||i(a,c?()=>n:n)}function zs(a,e,o){var n=new vr(a);us(()=>{var l=e()??null;n.ensure(l,l&&(i=>o(i,l)))},Po)}function Bd(a,e,o,n,l,i){var c=null,d=a,p=new vr(d,!1);us(()=>{const m=e()||null;var h=Uc;if(m===null){p.ensure(null,null);return}return p.ensure(m,v=>{if(m){if(c=Hl(m,h),ns(c,c),n){var b=null,k=c.appendChild(ro());n(c,k),b?.remove()}Gt.nodes.end=c,v.before(c)}}),()=>{}},Po),ur(()=>{})}function Ud(a,e){var o=void 0,n;Wl(()=>{o!==(o=e())&&(n&&(Ca(n),n=null),o&&(n=Ra(()=>{pr(()=>o(a))})))})}function ci(a){var e,o,n="";if(typeof a=="string"||typeof a=="number")n+=a;else if(typeof a=="object")if(Array.isArray(a)){var l=a.length;for(e=0;e=0;){var d=c+i;(c===0||En.includes(n[c-1]))&&(d===n.length||En.includes(n[d]))?n=(c===0?"":n.substring(0,c))+n.substring(d+1):c=d}}return n===""?null:n}function Rn(a,e=!1){var o=e?" !important;":";",n="";for(var l of Object.keys(a)){var i=a[l];i!=null&&i!==""&&(n+=" "+l+": "+i+o)}return n}function Cr(a){return a[0]!=="-"||a[1]!=="-"?a.toLowerCase():a}function Ed(a,e){if(e){var o="",n,l;if(Array.isArray(e)?(n=e[0],l=e[1]):n=e,a){a=String(a).replaceAll(/\s*\/\*.*?\*\/\s*/g,"").trim();var i=!1,c=0,d=!1,p=[];n&&p.push(...Object.keys(n).map(Cr)),l&&p.push(...Object.keys(l).map(Cr));var m=0,h=-1;const E=a.length;for(var v=0;v{Ia(a,a.__value)});e.observe(a,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),ur(()=>{e.disconnect()})}function Tn(a,e,o=e){var n=new WeakSet,l=!0;ql(a,"change",i=>{var c=i?"[selected]":":checked",d;if(a.multiple)d=[].map.call(a.querySelectorAll(c),Is);else{var p=a.querySelector(c)??a.querySelector("option:not([disabled])");d=p&&Is(p)}o(d),a.__value=d,Nt!==null&&n.add(Nt)}),pr(()=>{var i=e();if(a===document.activeElement){var c=Nt;if(n.has(c))return}if(Ia(a,i,l),l&&i===void 0){var d=a.querySelector(":checked");d!==null&&(i=Is(d),o(i))}a.__value=i,l=!1}),Na(a)}function Is(a){return"__value"in a?a.__value:a.value}const vs=Symbol("class"),hs=Symbol("style"),di=Symbol("is custom element"),fi=Symbol("is html"),Rd=dr?"input":"INPUT",Td=dr?"option":"OPTION",Dd=dr?"select":"SELECT",Md=dr?"progress":"PROGRESS";function Jt(a,e){var o=gn(a);o.value===(o.value=e??void 0)||a.value===e&&(e!==0||a.nodeName!==Md)||(a.value=e??"")}function Nd(a,e){e?a.hasAttribute("selected")||a.setAttribute("selected",""):a.removeAttribute("selected")}function ee(a,e,o,n){var l=gn(a);l[e]!==(l[e]=o)&&(e==="loading"&&(a[ic]=o),o==null?a.removeAttribute(e):typeof o!="string"&&ui(a).includes(e)?a[e]=o:a.setAttribute(e,o))}function Fd(a,e,o,n,l=!1,i=!1){var c=gn(a),d=c[di],p=!c[fi],m=e||{},h=a.nodeName===Td;for(var v in e)v in o||(o[v]=null);o.class?o.class=mo(o.class):o[vs]&&(o.class=null),o[hs]&&(o.style??=null);var b=ui(a);if(a.nodeName===Rd&&"type"in o&&("value"in o||"__value"in o)){var k=o.type;(k!==m.type||k===void 0&&a.hasAttribute("type"))&&(m.type=k,ee(a,"type",k))}for(const R in o){let C=o[R];if(h&&R==="value"&&C==null){a.value=a.__value="",m[R]=C;continue}if(R==="class"){var S=a.namespaceURI==="http://www.w3.org/1999/xhtml";Xe(a,S,C,n,e?.[vs],o[vs]),m[R]=C,m[vs]=o[vs];continue}if(R==="style"){ct(a,C,e?.[hs],o[hs]),m[R]=C,m[hs]=o[hs];continue}var E=m[R];if(!(C===E&&!(C===void 0&&a.hasAttribute(R)))){m[R]=C;var I=R[0]+R[1];if(I!=="$$")if(I==="on"){const A={},q="$$"+R;let O=R.slice(2);var P=vd(O);if(pd(O)&&(O=O.slice(0,-7),A.capture=!0),!P&&E){if(C!=null)continue;a.removeEventListener(O,m[q],A),m[q]=null}if(P)x(O,a,C),oa([O]);else if(C!=null){let F=function(M){m[R].call(this,M)};var D=F;m[q]=ni(O,a,F,A)}}else if(R==="style")ee(a,R,C);else if(R==="autofocus")od(a,!!C);else if(!d&&(R==="__value"||R==="value"&&C!=null))a.value=a.__value=C;else if(R==="selected"&&h)Nd(a,C);else{var B=R;p||(B=gd(B));var H=B==="defaultValue"||B==="defaultChecked";if(C==null&&!d&&!H)if(c[R]=null,B==="value"||B==="checked"){let A=a;const q=e===void 0;if(B==="value"){let O=A.defaultValue;A.removeAttribute(B),A.defaultValue=O,A.value=A.__value=q?O:null}else{let O=A.defaultChecked;A.removeAttribute(B),A.defaultChecked=O,A.checked=q?O:!1}}else a.removeAttribute(R);else H||b.includes(B)&&(d||typeof C!="string")?(a[B]=C,B in c&&(c[B]=ya)):typeof C!="function"&&ee(a,B,C)}}}return m}function Dn(a,e,o=[],n=[],l=[],i,c=!1,d=!1){Bl(l,o,n,p=>{var m=void 0,h={},v=a.nodeName===Dd,b=!1;if(Wl(()=>{var S=e(...p.map(t)),E=Fd(a,m,S,i,c,d);b&&v&&"value"in S&&Ia(a,S.value);for(let P of Object.getOwnPropertySymbols(h))S[P]||Ca(h[P]);for(let P of Object.getOwnPropertySymbols(S)){var I=S[P];P.description===Ac&&(!m||I!==m[P])&&(h[P]&&Ca(h[P]),h[P]=Ra(()=>Ud(a,()=>I))),E[P]=I}m=E}),v){var k=a;pr(()=>{Ia(k,m.value,!0),Na(k)})}b=!0})}function gn(a){return a[xl]??={[di]:a.nodeName.includes("-"),[fi]:a.namespaceURI===_l}}var Mn=new Map;function ui(a){var e=a.getAttribute("is")||a.nodeName,o=Mn.get(e);if(o)return o;Mn.set(e,o=[]);for(var n,l=a,i=Element.prototype;i!==l;){n=hl(l);for(var c in n)n[c].set&&c!=="innerHTML"&&c!=="textContent"&&c!=="innerText"&&o.push(c);l=sn(l)}return o}function hr(a,e,o=e){var n=new WeakSet;ql(a,"input",async l=>{var i=l?a.defaultValue:a.value;if(i=Sr(a)?Lr(i):i,o(i),Nt!==null&&n.add(Nt),await mr(),i!==(i=e())){var c=a.selectionStart,d=a.selectionEnd,p=a.value.length;if(a.value=i??"",d!==null){var m=a.value.length;c===d&&d===p&&m>p?(a.selectionStart=m,a.selectionEnd=m):(a.selectionStart=c,a.selectionEnd=Math.min(d,m))}}}),co(e)==null&&a.value&&(o(Sr(a)?Lr(a.value):a.value),Nt!==null&&n.add(Nt)),pn(()=>{var l=e();if(a===document.activeElement){var i=Nt;if(n.has(i))return}Sr(a)&&l===Lr(a.value)||a.type==="date"&&!l&&!a.value||l!==a.value&&(a.value=l??"")})}function Sr(a){var e=a.type;return e==="number"||e==="range"}function Lr(a){return a===""?null:+a}function Pr(a,e){return a===e||a?.[so]===e}function bo(a={},e,o,n){var l=pa.r,i=Gt;return pr(()=>{var c,d;return pn(()=>{c=d,d=[],co(()=>{Pr(o(...d),a)||(e(a,...d),c&&Pr(o(...c),a)&&e(null,...c))})}),()=>{let p=i;for(;p!==l&&p.parent!==null&&p.parent.f&Nr;)p=p.parent;const m=()=>{d&&Pr(o(...d),a)&&e(null,...d)},h=p.teardown;p.teardown=()=>{m(),h?.()}}}),a}function jd(a=!1){const e=pa,o=e.l.u;if(!o)return;let n=()=>Eo(e.s);if(a){let l=0,i={};const c=as(()=>{let d=!1;const p=e.s;for(const m in p)p[m]!==i[m]&&(i[m]=p[m],d=!0);return d&&l++,l});n=()=>t(c)}o.b.length&&nd(()=>{Nn(e,n),Dr(o.b)}),xa(()=>{const l=co(()=>o.m.map(nc));return()=>{for(const i of l)typeof i=="function"&&i()}}),o.a.length&&xa(()=>{Nn(e,n),Dr(o.a)})}function Nn(a,e){if(a.l.s)for(const o of a.l.s)t(o);e()}const Gd={get(a,e){if(!a.exclude.includes(e))return t(a.version),e in a.special?a.special[e]():a.props[e]},set(a,e,o){if(!(e in a.special)){var n=Gt;try{Ka(a.parent_effect),a.special[e]=Sa({get[e](){return a.props[e]}},e,wl)}finally{Ka(n)}}return a.special[e](o),Sn(a.version),!0},getOwnPropertyDescriptor(a,e){if(!a.exclude.includes(e)&&e in a.props)return{enumerable:!0,configurable:!0,value:a.props[e]}},deleteProperty(a,e){return a.exclude.includes(e)||(a.exclude.push(e),Sn(a.version)),!0},has(a,e){return a.exclude.includes(e)?!1:e in a.props},ownKeys(a){return Reflect.ownKeys(a.props).filter(e=>!a.exclude.includes(e))}};function Ht(a,e){return new Proxy({props:a,exclude:e,special:{},version:Bo(0),parent_effect:Gt},Gd)}const Hd={get(a,e){let o=a.props.length;for(;o--;){let n=a.props[o];if(ps(n)&&(n=n()),typeof n=="object"&&n!==null&&e in n)return n[e]}},set(a,e,o){let n=a.props.length;for(;n--;){let l=a.props[n];ps(l)&&(l=l());const i=Oo(l,e);if(i&&i.set)return i.set(o),!0}return!1},getOwnPropertyDescriptor(a,e){let o=a.props.length;for(;o--;){let n=a.props[o];if(ps(n)&&(n=n()),typeof n=="object"&&n!==null&&e in n){const l=Oo(n,e);return l&&!l.configurable&&(l.configurable=!0),l}}},has(a,e){if(e===so||e===yl)return!1;for(let o of a.props)if(ps(o)&&(o=o()),o!=null&&e in o)return!0;return!1},ownKeys(a){const e=[];for(let o of a.props)if(ps(o)&&(o=o()),!!o){for(const n in o)e.includes(n)||e.push(n);for(const n of Object.getOwnPropertySymbols(o))e.includes(n)||e.push(n)}return e}};function Yt(...a){return new Proxy({props:a},Hd)}function Sa(a,e,o,n){var l=!ds||(o&Sc)!==0,i=(o&Lc)!==0,c=(o&Pc)!==0,d=n,p=!0,m=void 0,h=()=>c&&l?(m??=as(n),t(m)):(p&&(p=!1,d=c?co(n):n),d);let v;if(i){var b=so in a||yl in a;v=Oo(a,e)?.set??(b&&e in a?D=>a[e]=D:void 0)}var k,S=!1;i?[k,S]=Fc(()=>a[e]):k=a[e],k===void 0&&n!==void 0&&(k=h(),v&&(l&&hc(),v(k)));var E;if(l?E=()=>{var D=a[e];return D===void 0?h():(p=!0,D)}:E=()=>{var D=a[e];return D!==void 0&&(d=void 0),D===void 0?d:D},l&&(o&wl)===0)return E;if(v){var I=a.$$legacy;return(function(D,R){return arguments.length>0?((!l||!R||I||S)&&v(R?E():D),D):E()})}var P=!1,B=((o&Oc)!==0?as:ln)(()=>(P=!1,E()));i&&t(B);var H=Gt;return(function(D,R){if(arguments.length>0){const C=R?t(B):l&&i?va(D):D;return w(B,C),P=!0,d!==void 0&&(d=C),D}return yo&&P||(H.f&ja)!==0?B.v:t(B)})}function pi(a){pa===null&&cc(),ds&&pa.l!==null?qd(pa).m.push(a):xa(()=>{const e=co(a);if(typeof e=="function")return e})}function qd(a){var e=a.l;return e.u??={a:[],b:[],m:[]}}const Vd="5";typeof window<"u"&&((window.__svelte??={}).v??=new Set).add(Vd);Dc();/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -140,7 +140,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const Mn=(...a)=>a.filter((e,o,n)=>!!e&&e.trim()!==""&&n.indexOf(e)===o).join(" ").trim();var Yd=_d("");function Zt(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]),n=Ht(o,["name","color","size","strokeWidth","absoluteStrokeWidth","iconNode"]);ea(e,!1);let l=Sa(e,"name",8,void 0),i=Sa(e,"color",8,"currentColor"),c=Sa(e,"size",8,24),f=Sa(e,"strokeWidth",8,2),p=Sa(e,"absoluteStrokeWidth",8,!1),m=Sa(e,"iconNode",24,()=>[]);jd();var h=Yd();Rn(h,(k,S,E)=>({...Kd,...k,...n,width:c(),height:c(),stroke:i(),"stroke-width":S,class:E}),[()=>Wd(n)?void 0:{"aria-hidden":"true"},()=>(Eo(p()),Eo(f()),Eo(c()),co(()=>p()?Number(f())*24/Number(c()):f())),()=>(Eo(Mn),Eo(l()),Eo(o),co(()=>Mn("lucide-icon","lucide",l()?`lucide-${l()}`:"",o.class)))]);var v=s(h);oe(v,1,m,mn,(k,S)=>{var E=u(()=>Ta(t(S),2));let P=()=>t(E)[0],B=()=>t(E)[1];var I=zt(),H=ce(I);Bd(H,P,!0,(T,R)=>{Rn(T,()=>({...B()}))}),d(k,I)});var b=r(v);Kt(b,e,"default",{}),d(a,h),ta()}function mi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const Fn=(...a)=>a.filter((e,o,n)=>!!e&&e.trim()!==""&&n.indexOf(e)===o).join(" ").trim();var Yd=_d("");function Zt(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]),n=Ht(o,["name","color","size","strokeWidth","absoluteStrokeWidth","iconNode"]);ea(e,!1);let l=Sa(e,"name",8,void 0),i=Sa(e,"color",8,"currentColor"),c=Sa(e,"size",8,24),d=Sa(e,"strokeWidth",8,2),p=Sa(e,"absoluteStrokeWidth",8,!1),m=Sa(e,"iconNode",24,()=>[]);jd();var h=Yd();Dn(h,(k,S,E)=>({...Kd,...k,...n,width:c(),height:c(),stroke:i(),"stroke-width":S,class:E}),[()=>Wd(n)?void 0:{"aria-hidden":"true"},()=>(Eo(p()),Eo(d()),Eo(c()),co(()=>p()?Number(d())*24/Number(c()):d())),()=>(Eo(Fn),Eo(l()),Eo(o),co(()=>Fn("lucide-icon","lucide",l()?`lucide-${l()}`:"",o.class)))]);var v=s(h);ae(v,1,m,hn,(k,S)=>{var E=u(()=>Ta(t(S),2));let I=()=>t(E)[0],P=()=>t(E)[1];var B=zt(),H=ce(B);Bd(H,I,!0,(D,R)=>{Dn(D,()=>({...P()}))}),f(k,B)});var b=r(v);Kt(b,e,"default",{}),f(a,h),ta()}function mi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -187,7 +187,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"}],["rect",{x:"14",y:"2",width:"8",height:"8",rx:"1"}]];Zt(a,Yt({name:"blocks"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function vi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"}],["rect",{x:"14",y:"2",width:"8",height:"8",rx:"1"}]];Zt(a,Yt({name:"blocks"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function vi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -234,7 +234,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M12 7v14"}],["path",{d:"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"}]];Zt(a,Yt({name:"book-open"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Uo(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M12 7v14"}],["path",{d:"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"}]];Zt(a,Yt({name:"book-open"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Uo(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -281,7 +281,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M20 6 9 17l-5-5"}]];Zt(a,Yt({name:"check"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Nn(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M20 6 9 17l-5-5"}]];Zt(a,Yt({name:"check"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function jn(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -328,7 +328,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"m9 18 6-6-6-6"}]];Zt(a,Yt({name:"chevron-right"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Zd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"m9 18 6-6-6-6"}]];Zt(a,Yt({name:"chevron-right"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Zd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -375,7 +375,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}],["path",{d:"M12 3v18"}]];Zt(a,Yt({name:"columns-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Yr(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}],["path",{d:"M12 3v18"}]];Zt(a,Yt({name:"columns-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Zr(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -422,7 +422,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}]];Zt(a,Yt({name:"copy"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Zr(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}]];Zt(a,Yt({name:"copy"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Xr(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -469,7 +469,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M12 15V3"}],["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}],["path",{d:"m7 10 5 5 5-5"}]];Zt(a,Yt({name:"download"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Xd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M12 15V3"}],["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}],["path",{d:"m7 10 5 5 5-5"}]];Zt(a,Yt({name:"download"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Xd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -516,7 +516,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M15 3h6v6"}],["path",{d:"M10 14 21 3"}],["path",{d:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}]];Zt(a,Yt({name:"external-link"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Jd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M15 3h6v6"}],["path",{d:"M10 14 21 3"}],["path",{d:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}]];Zt(a,Yt({name:"external-link"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Jd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -563,7 +563,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}],["circle",{cx:"12",cy:"12",r:"3"}]];Zt(a,Yt({name:"eye"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function hi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}],["circle",{cx:"12",cy:"12",r:"3"}]];Zt(a,Yt({name:"eye"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function hi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -610,7 +610,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"}]];Zt(a,Yt({name:"folder-open"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Qd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"}]];Zt(a,Yt({name:"folder-open"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Qd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -657,7 +657,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"}],["path",{d:"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}]];Zt(a,Yt({name:"house"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function gi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"}],["path",{d:"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}]];Zt(a,Yt({name:"house"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function gi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -704,7 +704,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}],["path",{d:"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}],["path",{d:"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}]];Zt(a,Yt({name:"layers"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function $d(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}],["path",{d:"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}],["path",{d:"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}]];Zt(a,Yt({name:"layers"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function $d(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -751,7 +751,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["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",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]];Zt(a,Yt({name:"link"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function ef(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["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",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]];Zt(a,Yt({name:"link"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ef(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -798,7 +798,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M3 5h.01"}],["path",{d:"M3 12h.01"}],["path",{d:"M3 19h.01"}],["path",{d:"M8 5h13"}],["path",{d:"M8 12h13"}],["path",{d:"M8 19h13"}]];Zt(a,Yt({name:"list"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function bi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M3 5h.01"}],["path",{d:"M3 12h.01"}],["path",{d:"M3 19h.01"}],["path",{d:"M8 5h13"}],["path",{d:"M8 12h13"}],["path",{d:"M8 19h13"}]];Zt(a,Yt({name:"list"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function bi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -845,7 +845,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56"}]];Zt(a,Yt({name:"loader-circle"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function tf(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56"}]];Zt(a,Yt({name:"loader-circle"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function tf(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -892,7 +892,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2"}],["line",{x1:"8",x2:"16",y1:"21",y2:"21"}],["line",{x1:"12",x2:"12",y1:"17",y2:"21"}]];Zt(a,Yt({name:"monitor"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Fn(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2"}],["line",{x1:"8",x2:"16",y1:"21",y2:"21"}],["line",{x1:"12",x2:"12",y1:"17",y2:"21"}]];Zt(a,Yt({name:"monitor"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Gn(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -939,7 +939,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["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"}]];Zt(a,Yt({name:"moon"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function yi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["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"}]];Zt(a,Yt({name:"moon"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function yi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -986,7 +986,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"}],["path",{d:"M12 22V12"}],["polyline",{points:"3.29 7 12 12 20.71 7"}],["path",{d:"m7.5 4.27 9 5.15"}]];Zt(a,Yt({name:"package"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function xi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"}],["path",{d:"M12 22V12"}],["polyline",{points:"3.29 7 12 12 20.71 7"}],["path",{d:"m7.5 4.27 9 5.15"}]];Zt(a,Yt({name:"package"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function xi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1033,7 +1033,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"}],["circle",{cx:"13.5",cy:"6.5",r:".5",fill:"currentColor"}],["circle",{cx:"17.5",cy:"10.5",r:".5",fill:"currentColor"}],["circle",{cx:"6.5",cy:"12.5",r:".5",fill:"currentColor"}],["circle",{cx:"8.5",cy:"7.5",r:".5",fill:"currentColor"}]];Zt(a,Yt({name:"palette"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function ki(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"}],["circle",{cx:"13.5",cy:"6.5",r:".5",fill:"currentColor"}],["circle",{cx:"17.5",cy:"10.5",r:".5",fill:"currentColor"}],["circle",{cx:"6.5",cy:"12.5",r:".5",fill:"currentColor"}],["circle",{cx:"8.5",cy:"7.5",r:".5",fill:"currentColor"}]];Zt(a,Yt({name:"palette"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ki(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1080,7 +1080,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}],["path",{d:"M3 9h18"}],["path",{d:"M9 21V9"}]];Zt(a,Yt({name:"panels-top-left"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function wi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}],["path",{d:"M3 9h18"}],["path",{d:"M9 21V9"}]];Zt(a,Yt({name:"panels-top-left"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function wi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1127,7 +1127,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"}]];Zt(a,Yt({name:"puzzle"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function _i(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"}]];Zt(a,Yt({name:"puzzle"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function _i(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1174,7 +1174,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"m15 14 5-5-5-5"}],["path",{d:"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]];Zt(a,Yt({name:"redo-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function af(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"m15 14 5-5-5-5"}],["path",{d:"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]];Zt(a,Yt({name:"redo-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function af(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1221,7 +1221,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}],["path",{d:"M21 3v5h-5"}],["path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}],["path",{d:"M8 16H3v5"}]];Zt(a,Yt({name:"refresh-cw"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Ci(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}],["path",{d:"M21 3v5h-5"}],["path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}],["path",{d:"M8 16H3v5"}]];Zt(a,Yt({name:"refresh-cw"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Ci(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1268,7 +1268,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z"}],["path",{d:"m14.5 12.5 2-2"}],["path",{d:"m11.5 9.5 2-2"}],["path",{d:"m8.5 6.5 2-2"}],["path",{d:"m17.5 15.5 2-2"}]];Zt(a,Yt({name:"ruler"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function hr(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z"}],["path",{d:"m14.5 12.5 2-2"}],["path",{d:"m11.5 9.5 2-2"}],["path",{d:"m8.5 6.5 2-2"}],["path",{d:"m17.5 15.5 2-2"}]];Zt(a,Yt({name:"ruler"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function gr(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1315,7 +1315,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["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",{d:"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"}],["path",{d:"M7 3v4a1 1 0 0 0 1 1h7"}]];Zt(a,Yt({name:"save"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function of(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["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",{d:"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"}],["path",{d:"M7 3v4a1 1 0 0 0 1 1h7"}]];Zt(a,Yt({name:"save"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function of(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1362,7 +1362,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["circle",{cx:"18",cy:"5",r:"3"}],["circle",{cx:"6",cy:"12",r:"3"}],["circle",{cx:"18",cy:"19",r:"3"}],["line",{x1:"8.59",x2:"15.42",y1:"13.51",y2:"17.49"}],["line",{x1:"15.41",x2:"8.59",y1:"6.51",y2:"10.49"}]];Zt(a,Yt({name:"share-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Oi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["circle",{cx:"18",cy:"5",r:"3"}],["circle",{cx:"6",cy:"12",r:"3"}],["circle",{cx:"18",cy:"19",r:"3"}],["line",{x1:"8.59",x2:"15.42",y1:"13.51",y2:"17.49"}],["line",{x1:"15.41",x2:"8.59",y1:"6.51",y2:"10.49"}]];Zt(a,Yt({name:"share-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Oi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1409,7 +1409,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{d:"m9 12 2 2 4-4"}]];Zt(a,Yt({name:"shield-check"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Si(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{d:"m9 12 2 2 4-4"}]];Zt(a,Yt({name:"shield-check"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Si(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1456,7 +1456,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M10 5H3"}],["path",{d:"M12 19H3"}],["path",{d:"M14 3v4"}],["path",{d:"M16 17v4"}],["path",{d:"M21 12h-9"}],["path",{d:"M21 19h-5"}],["path",{d:"M21 5h-7"}],["path",{d:"M8 10v4"}],["path",{d:"M8 12H3"}]];Zt(a,Yt({name:"sliders-horizontal"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function sf(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M10 5H3"}],["path",{d:"M12 19H3"}],["path",{d:"M14 3v4"}],["path",{d:"M16 17v4"}],["path",{d:"M21 12h-9"}],["path",{d:"M21 19h-5"}],["path",{d:"M21 5h-7"}],["path",{d:"M8 10v4"}],["path",{d:"M8 12H3"}]];Zt(a,Yt({name:"sliders-horizontal"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function sf(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1503,7 +1503,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["rect",{width:"14",height:"20",x:"5",y:"2",rx:"2",ry:"2"}],["path",{d:"M12 18h.01"}]];Zt(a,Yt({name:"smartphone"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Xr(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["rect",{width:"14",height:"20",x:"5",y:"2",rx:"2",ry:"2"}],["path",{d:"M12 18h.01"}]];Zt(a,Yt({name:"smartphone"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Jr(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1550,7 +1550,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"}],["path",{d:"M20 2v4"}],["path",{d:"M22 4h-4"}],["circle",{cx:"4",cy:"20",r:"2"}]];Zt(a,Yt({name:"sparkles"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Li(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"}],["path",{d:"M20 2v4"}],["path",{d:"M22 4h-4"}],["circle",{cx:"4",cy:"20",r:"2"}]];Zt(a,Yt({name:"sparkles"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Li(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1597,7 +1597,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}]];Zt(a,Yt({name:"square"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function jn(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}]];Zt(a,Yt({name:"square"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Hn(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1644,7 +1644,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["circle",{cx:"12",cy:"12",r:"4"}],["path",{d:"M12 2v2"}],["path",{d:"M12 20v2"}],["path",{d:"m4.93 4.93 1.41 1.41"}],["path",{d:"m17.66 17.66 1.41 1.41"}],["path",{d:"M2 12h2"}],["path",{d:"M20 12h2"}],["path",{d:"m6.34 17.66-1.41 1.41"}],["path",{d:"m19.07 4.93-1.41 1.41"}]];Zt(a,Yt({name:"sun"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Pi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["circle",{cx:"12",cy:"12",r:"4"}],["path",{d:"M12 2v2"}],["path",{d:"M12 20v2"}],["path",{d:"m4.93 4.93 1.41 1.41"}],["path",{d:"m17.66 17.66 1.41 1.41"}],["path",{d:"M2 12h2"}],["path",{d:"M20 12h2"}],["path",{d:"m6.34 17.66-1.41 1.41"}],["path",{d:"m19.07 4.93-1.41 1.41"}]];Zt(a,Yt({name:"sun"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Pi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1691,7 +1691,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"}],["path",{d:"M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"}],["path",{d:"M 7 17h.01"}],["path",{d:"m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"}]];Zt(a,Yt({name:"swatch-book"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function rf(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"}],["path",{d:"M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"}],["path",{d:"M 7 17h.01"}],["path",{d:"m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"}]];Zt(a,Yt({name:"swatch-book"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function rf(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1738,7 +1738,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",ry:"2"}],["line",{x1:"12",x2:"12.01",y1:"18",y2:"18"}]];Zt(a,Yt({name:"tablet"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function hn(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",ry:"2"}],["line",{x1:"12",x2:"12.01",y1:"18",y2:"18"}]];Zt(a,Yt({name:"tablet"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function bn(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1785,7 +1785,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M10 11v6"}],["path",{d:"M14 11v6"}],["path",{d:"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}],["path",{d:"M3 6h18"}],["path",{d:"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}]];Zt(a,Yt({name:"trash-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Ii(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M10 11v6"}],["path",{d:"M14 11v6"}],["path",{d:"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}],["path",{d:"M3 6h18"}],["path",{d:"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}]];Zt(a,Yt({name:"trash-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Ii(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1832,7 +1832,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M12 4v16"}],["path",{d:"M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"}],["path",{d:"M9 20h6"}]];Zt(a,Yt({name:"type"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Bi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M12 4v16"}],["path",{d:"M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"}],["path",{d:"M9 20h6"}]];Zt(a,Yt({name:"type"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Bi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1879,7 +1879,7 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M9 14 4 9l5-5"}],["path",{d:"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]];Zt(a,Yt({name:"undo-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}function Ui(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** + */const n=[["path",{d:"M9 14 4 9l5-5"}],["path",{d:"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]];Zt(a,Yt({name:"undo-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Ui(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/** * @license lucide-svelte v1.0.1 - ISC * * ISC License @@ -1926,22 +1926,22 @@ var tn=Array.isArray,ac=Array.prototype.indexOf,Js=Array.prototype.includes,lr=A * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * - */const n=[["path",{d:"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"}]];Zt(a,Yt({name:"zap"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),f=ce(c);Kt(f,e,"default",{}),d(l,c)},$$slots:{default:!0}}))}var nf=g(''),lf=g(" Saving…",1),cf=g(" Saved",1),df=g(" Save",1),ff=g(''),uf=g('
/
',1);function pf(a,e){ea(e,!0);const o=typeof window.__SLASHED_FW_VERSION__<"u"?window.__SLASHED_FW_VERSION__:"";let n=K(!1),l=K(!1),i=K(null),c=K(null);xa(()=>{t(l)&&pr().then(()=>t(i)?.focus())});async function f(){try{await navigator.clipboard.writeText(window.location.href),_(n,!0),setTimeout(()=>{_(n,!1)},2e3)}catch{}}function p(){_(l,!0)}function m(){_(l,!1),e.onResetAll()}function h(){_(l,!1)}var v=uf(),b=ce(v),k=r(s(b),2),S=s(k),E=r(s(S)),P=s(E),B=r(k,2);{var I=G=>{var Z=nf(),re=s(Z),Y=s(re);C(()=>y(Y,e.overridesCount)),x("click",Z,function(...de){e.onExport?.apply(this,de)}),d(G,Z)};L(B,G=>{e.overridesCount>0&&G(I)})}var H=r(B,4),T=s(H),R=s(T);{var w=G=>{var Z=lf(),re=ce(Z);bi(re,{class:"w-3.5 h-3.5 animate-spin"}),d(G,Z)},A=G=>{var Z=cf(),re=ce(Z);Uo(re,{class:"w-3.5 h-3.5"}),d(G,Z)},j=G=>{var Z=df(),re=ce(Z);hr(re,{class:"w-3.5 h-3.5"}),d(G,Z)};L(R,G=>{e.saveState==="saving"?G(w):e.saveState==="saved"?G(A,1):G(j,-1)})}var O=r(T,2),F=s(O);Bi(F,{class:"w-3.5 h-3.5"});var D=r(O,2),J=s(D);_i(J,{class:"w-3.5 h-3.5"});var ye=r(D,4),Ae=s(ye);{var Te=G=>{Uo(G,{class:"w-3.5 h-3.5 text-emerald-400"})},xe=G=>{of(G,{class:"w-3.5 h-3.5"})};L(Ae,G=>{t(n)?G(Te):G(xe,-1)})}var pe=r(ye,2),Q=s(pe);hi(Q,{class:"w-3.5 h-3.5"});var le=r(pe,2),we=s(le);hn(we,{class:"w-3.5 h-3.5"});var ze=r(b,2);{var N=G=>{var Z=ff(),re=s(Z),Y=r(s(re),2),de=s(Y),be=r(Y,2),he=s(be);bo(he,Pe=>_(i,Pe),()=>t(i));var ne=r(he,2);bo(ne,Pe=>_(c,Pe),()=>t(c)),C(()=>y(de,`This will clear all ${e.overridesCount??""} customisation${e.overridesCount!==1?"s":""}. - You can still undo this before saving.`)),x("click",Z,Pe=>{Pe.target===Pe.currentTarget&&h()}),x("keydown",Z,Pe=>{Pe.key==="Escape"&&(Pe.stopPropagation(),h()),Pe.key==="Tab"&&(Pe.preventDefault(),document.activeElement===t(i)?t(c)?.focus():t(i)?.focus())}),x("click",he,h),x("click",ne,m),d(G,Z)};L(ze,G=>{t(l)&&G(N)})}C(G=>{y(P,`v${o??""}`),T.disabled=!e.hasPendingChanges||e.saveState==="saving",ee(T,"title",e.hasPendingChanges?"Save changes (Ctrl+S)":"No unsaved changes"),Ye(T,1,G),O.disabled=!e.canUndo,D.disabled=!e.canRedo,le.disabled=e.overridesCount===0},[()=>mo(["flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold transition-colors cursor-pointer",e.saveState==="saved"?"bg-emerald-900/40 border border-emerald-500/30 text-emerald-300":e.hasPendingChanges?"bg-emerald-600 hover:bg-emerald-500 text-white shadow-sm shadow-emerald-600/30":"bg-white/5 text-slate-500 disabled:opacity-40 disabled:pointer-events-none"].join(" "))]),x("click",T,function(...G){e.onSave?.apply(this,G)}),x("click",O,function(...G){e.onUndo?.apply(this,G)}),x("click",D,function(...G){e.onRedo?.apply(this,G)}),x("click",ye,f),x("click",pe,function(...G){e.onImport?.apply(this,G)}),x("click",le,p),d(a,v),ta()}oa(["click","keydown"]);var Gn=g(' '),Hn=g(''),mf=g('');function Ai(a,e){ea(e,!0);let o=Sa(e,"overridesByDomain",19,()=>({}));const n=[{id:"home",icon:Qd,label:"Home",group:"tokens"},{id:"colors",icon:xi,label:"Colors",group:"tokens"},{id:"typography",icon:Ii,label:"Typography",group:"tokens"},{id:"spacing",icon:Ci,label:"Spacing",group:"tokens"},{id:"layout",icon:ki,label:"Layout",group:"tokens"},{id:"borders",icon:Li,label:"Borders",group:"tokens"},{id:"shadows",icon:gi,label:"Shadows",group:"tokens"},{id:"motion",icon:Ui,label:"Motion",group:"tokens"},{id:"effects",icon:Xr,label:"Effects",group:"tokens"},{id:"macros",icon:mi,label:"Macros",group:"tokens"},{id:"misc",icon:wi,label:"Misc",group:"tokens"},{id:"themes",icon:Pi,label:"Themes",group:"tools"},{id:"wcag",icon:Oi,label:"WCAG",group:"tools"},{id:"setup",icon:yi,label:"Install",group:"tools"},{id:"cheatsheet",icon:vi,label:"Classes",group:"tools"}];let l=u(()=>n.filter(m=>m.group==="tokens")),i=u(()=>n.filter(m=>m.group==="tools"));var c=mf(),f=s(c);oe(f,21,()=>t(l),m=>m.id,(m,h)=>{const v=u(()=>e.activeId===t(h).id),b=u(()=>o()[t(h).id]||0),k=u(()=>t(h).icon);var S=Hn(),E=s(S);or(E,()=>t(k),(T,R)=>{R(T,{class:"w-4 h-4"})});var P=r(E,2);{var B=T=>{var R=Gn(),w=s(R);C(()=>y(w,t(b)>9?"+":t(b))),d(T,R)};L(P,T=>{t(b)>0&&!t(v)&&T(B)})}var I=r(P,2),H=s(I);C(()=>{ee(S,"title",t(h).label),Ye(S,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${t(v)?"bg-indigo-600 text-white shadow-lg shadow-indigo-600/30":"text-slate-500 hover:text-slate-200 hover:bg-white/8"}`),y(H,t(h).label)}),x("click",S,()=>e.onSelect(t(h).id)),d(m,S)});var p=r(f,4);oe(p,21,()=>t(i),m=>m.id,(m,h)=>{const v=u(()=>e.activeId===t(h).id),b=u(()=>o()[t(h).id]||0),k=u(()=>t(h).icon);var S=Hn(),E=s(S);or(E,()=>t(k),(T,R)=>{R(T,{class:"w-4 h-4"})});var P=r(E,2);{var B=T=>{var R=Gn(),w=s(R);C(()=>y(w,t(b)>9?"+":t(b))),d(T,R)};L(P,T=>{t(b)>0&&!t(v)&&T(B)})}var I=r(P,2),H=s(I);C(()=>{ee(S,"title",t(h).label),Ye(S,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${t(v)?"bg-indigo-600 text-white shadow-lg shadow-indigo-600/30":"text-slate-500 hover:text-slate-200 hover:bg-white/8"}`),y(H,t(h).label)}),x("click",S,()=>e.onSelect(t(h).id)),d(m,S)}),d(a,c),ta()}oa(["click"]);var vf=g(' '),hf=g('
Live
');function gf(a,e){var o=hf(),n=r(s(o),2),l=s(n);{var i=m=>{var h=vf(),v=s(h);C(()=>y(v,`${e.overridesCount??""} override${e.overridesCount!==1?"s":""} active`)),d(m,h)},c=m=>{var h=ls("No overrides — showing framework defaults");d(m,h)};L(l,m=>{e.overridesCount>0?m(i):m(c,-1)})}var f=r(n,4),p=s(f);C(()=>y(p,e.domain)),d(a,o)}var La=Uint8Array,Fa=Uint16Array,gn=Int32Array,gr=new La([0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0]),br=new La([0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0]),Jr=new La([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),zi=function(a,e){for(var o=new Fa(31),n=0;n<31;++n)o[n]=e+=1<>1|(ca&21845)<<1;wo=(wo&52428)>>2|(wo&13107)<<2,wo=(wo&61680)>>4|(wo&3855)<<4,$r[ca]=((wo&65280)>>8|(wo&255)<<8)>>1}var lo=(function(a,e,o){for(var n=a.length,l=0,i=new Fa(e);l>p]=m}else for(f=new Fa(n),l=0;l>15-a[l]);return f}),Ao=new La(288);for(var ca=0;ca<144;++ca)Ao[ca]=8;for(var ca=144;ca<256;++ca)Ao[ca]=9;for(var ca=256;ca<280;++ca)Ao[ca]=7;for(var ca=280;ca<288;++ca)Ao[ca]=8;var As=new La(32);for(var ca=0;ca<32;++ca)As[ca]=5;var yf=lo(Ao,9,0),xf=lo(Ao,9,1),kf=lo(As,5,0),wf=lo(As,5,1),Pr=function(a){for(var e=a[0],o=1;oe&&(e=a[o]);return e},Wa=function(a,e,o){var n=e/8|0;return(a[n]|a[n+1]<<8)>>(e&7)&o},Ir=function(a,e){var o=e/8|0;return(a[o]|a[o+1]<<8|a[o+2]<<16)>>(e&7)},bn=function(a){return(a+7)/8|0},Di=function(a,e,o){return(o==null||o>a.length)&&(o=a.length),new La(a.subarray(e,o))},_f=["unexpected EOF","invalid block type","invalid length/literal","invalid distance","stream finished","no stream handler",,"no callback","invalid UTF-8 data","extra field too long","date not in range 1980-2099","filename too long","stream finishing","invalid zip data"],uo=function(a,e,o){var n=new Error(e||_f[a]);if(n.code=a,Error.captureStackTrace&&Error.captureStackTrace(n,uo),!o)throw n;return n},Cf=function(a,e,o,n){var l=a.length,i=0;if(!l||e.f&&!e.l)return o||new La(0);var c=!o,f=c||e.i!=2,p=e.i;c&&(o=new La(l*3));var m=function(Pe){var qe=o.length;if(Pe>qe){var at=new La(Math.max(qe*2,Pe));at.set(o),o=at}},h=e.f||0,v=e.p||0,b=e.b||0,k=e.l,S=e.d,E=e.m,P=e.n,B=l*8;do{if(!k){h=Wa(a,v,1);var I=Wa(a,v+1,3);if(v+=3,I)if(I==1)k=xf,S=wf,E=9,P=5;else if(I==2){var w=Wa(a,v,31)+257,A=Wa(a,v+10,15)+4,j=w+Wa(a,v+5,31)+1;v+=14;for(var O=new La(j),F=new La(19),D=0;D>4;if(H<16)O[D++]=H;else{var xe=0,pe=0;for(H==16?(pe=3+Wa(a,v,3),v+=2,xe=O[D-1]):H==17?(pe=3+Wa(a,v,7),v+=3):H==18&&(pe=11+Wa(a,v,127),v+=7);pe--;)O[D++]=xe}}var Q=O.subarray(0,w),le=O.subarray(w);E=Pr(Q),P=Pr(le),k=lo(Q,E,1),S=lo(le,P,1)}else uo(1);else{var H=bn(v)+4,T=a[H-4]|a[H-3]<<8,R=H+T;if(R>l){p&&uo(0);break}f&&m(b+T),o.set(a.subarray(H,R),b),e.b=b+=T,e.p=v=R*8,e.f=h;continue}if(v>B){p&&uo(0);break}}f&&m(b+131072);for(var we=(1<>4;if(v+=xe&15,v>B){p&&uo(0);break}if(xe||uo(2),G<256)o[b++]=G;else if(G==256){N=v,k=null;break}else{var Z=G-254;if(G>264){var D=G-257,re=gr[D];Z=Wa(a,v,(1<>4;Y||uo(3),v+=Y&15;var le=bf[de];if(de>3){var re=br[de];le+=Ir(a,v)&(1<B){p&&uo(0);break}f&&m(b+131072);var be=b+Z;if(b>8},gs=function(a,e,o){o<<=e&7;var n=e/8|0;a[n]|=o,a[n+1]|=o>>8,a[n+2]|=o>>16},Br=function(a,e){for(var o=[],n=0;nb&&(b=i[n].s);var k=new Fa(b+1),S=en(o[h-1],k,0);if(S>e){var n=0,E=0,P=S-e,B=1<e)E+=B-(1<>=P;E>0;){var H=i[n].s;k[H]=0&&E;--n){var T=i[n].s;k[T]==e&&(--k[T],++E)}S=e}return{t:new La(k),l:S}},en=function(a,e,o){return a.s==-1?Math.max(en(a.l,e,o+1),en(a.r,e,o+1)):e[a.s]=o},Vn=function(a){for(var e=a.length;e&&!a[--e];);for(var o=new Fa(++e),n=0,l=a[0],i=1,c=function(p){o[n++]=p},f=1;f<=e;++f)if(a[f]==l&&f!=e)++i;else{if(!l&&i>2){for(;i>138;i-=138)c(32754);i>2&&(c(i>10?i-11<<5|28690:i-3<<5|12305),i=0)}else if(i>3){for(c(l),--i;i>6;i-=6)c(8304);i>2&&(c(i-3<<5|8208),i=0)}for(;i--;)c(l);i=1,l=a[f]}return{c:o.subarray(0,n),n:e}},bs=function(a,e){for(var o=0,n=0;n>8,a[l+2]=a[l]^255,a[l+3]=a[l+1]^255;for(var i=0;i4&&!F[Jr[J-1]];--J);var ye=m+5<<3,Ae=bs(l,Ao)+bs(i,As)+c,Te=bs(l,b)+bs(i,E)+c+14+3*J+bs(A,F)+2*A[16]+3*A[17]+7*A[18];if(p>=0&&ye<=Ae&&ye<=Te)return Mi(e,h,a.subarray(p,p+m));var xe,pe,Q,le;if(fo(e,h,1+(Te15&&(fo(e,h,G[j]>>5&127),h+=G[j]>>12)}}else xe=yf,pe=Ao,Q=kf,le=As;for(var j=0;j255){var Z=re>>18&31;gs(e,h,xe[Z+257]),h+=pe[Z+257],Z>7&&(fo(e,h,re>>23&31),h+=gr[Z]);var Y=re&31;gs(e,h,Q[Y]),h+=le[Y],Y>3&&(gs(e,h,re>>5&8191),h+=br[Y])}else gs(e,h,xe[re]),h+=pe[re]}return gs(e,h,xe[256]),h+pe[256]},Of=new gn([65540,131080,131088,131104,262176,1048704,1048832,2114560,2117632]),Ni=new La(0),Sf=function(a,e,o,n,l,i){var c=i.z||a.length,f=new La(n+c+5*(1+Math.ceil(c/7e3))+l),p=f.subarray(n,f.length-l),m=i.l,h=(i.r||0)&7;if(e){h&&(p[0]=i.r>>3);for(var v=Of[e-1],b=v>>13,k=v&8191,S=(1<7e3||F>24576)&&(xe>423||!m)){h=Kn(a,p,0,T,R,w,j,F,J,O-J,h),F=A=j=0,J=O;for(var pe=0;pe<286;++pe)R[pe]=0;for(var pe=0;pe<30;++pe)w[pe]=0}var Q=2,le=0,we=k,ze=Ae-Te&32767;if(xe>2&&ye==H(O-ze))for(var N=Math.min(b,xe)-1,G=Math.min(32767,O),Z=Math.min(258,xe);ze<=G&&--we&&Ae!=Te;){if(a[O+Q]==a[O+Q-ze]){for(var re=0;reQ){if(Q=re,le=ze,re>N)break;for(var Y=Math.min(ze,re-2),de=0,pe=0;pede&&(de=ne,Te=be)}}}Ae=Te,Te=E[Ae],ze+=Ae-Te&32767}if(le){T[F++]=268435456|Qr[Q]<<18|qn[le];var Pe=Qr[Q]&31,qe=qn[le]&31;j+=gr[Pe]+br[qe],++R[257+Pe],++w[qe],D=O+Q,++A}else T[F++]=a[O],++R[a[O]]}}for(O=Math.max(O,D);O=c&&(p[h/8|0]=m,at=c),h=Mi(p,h+1,a.subarray(O,at))}i.i=c}return Di(f,0,n+bn(h)+l)},Lf=function(a,e,o,n,l){if(!l&&(l={l:1},e.dictionary)){var i=e.dictionary.subarray(-32768),c=new La(i.length+a.length);c.set(i),c.set(a,i.length),a=c,l.w=i.length}return Sf(a,e.level==null?6:e.level,e.mem==null?l.l?Math.ceil(Math.max(8,Math.min(13,Math.log(a.length)))*1.5):20:12+e.mem,o,n,l)};function Pf(a,e){return Lf(a,{},0,0)}function If(a,e){return Cf(a,{i:2},e,e)}var Bf=typeof TextDecoder<"u"&&new TextDecoder,Uf=0;try{Bf.decode(Ni,{stream:!0}),Uf=1}catch{}const Af={generatedBy:"scripts/gen-token-registry.js",nextId:701},zf=JSON.parse('[{"id":0,"name":"--sf-alternate-gap"},{"id":1,"name":"--sf-alternate-inner-gap"},{"id":2,"name":"--sf-animation-blink"},{"id":3,"name":"--sf-animation-color-pulse"},{"id":4,"name":"--sf-animation-delay-1"},{"id":5,"name":"--sf-animation-delay-2"},{"id":6,"name":"--sf-animation-delay-3"},{"id":7,"name":"--sf-animation-delay-4"},{"id":8,"name":"--sf-animation-delay-5"},{"id":9,"name":"--sf-animation-fade-in"},{"id":10,"name":"--sf-animation-fade-out"},{"id":11,"name":"--sf-animation-float"},{"id":12,"name":"--sf-animation-ping"},{"id":13,"name":"--sf-animation-scale-down"},{"id":14,"name":"--sf-animation-scale-up"},{"id":15,"name":"--sf-animation-shimmer"},{"id":16,"name":"--sf-animation-slide-in-down"},{"id":17,"name":"--sf-animation-slide-in-left"},{"id":18,"name":"--sf-animation-slide-in-right"},{"id":19,"name":"--sf-animation-slide-in-up"},{"id":20,"name":"--sf-animation-spin"},{"id":21,"name":"--sf-aspect"},{"id":22,"name":"--sf-bento-cols-default"},{"id":23,"name":"--sf-bento-gap"},{"id":24,"name":"--sf-bento-row-compact"},{"id":25,"name":"--sf-bento-row-default"},{"id":26,"name":"--sf-bento-row-tall"},{"id":27,"name":"--sf-blur"},{"id":28,"name":"--sf-body-color"},{"id":29,"name":"--sf-body-em-style"},{"id":30,"name":"--sf-body-font-family"},{"id":31,"name":"--sf-body-font-size"},{"id":32,"name":"--sf-body-font-weight"},{"id":33,"name":"--sf-body-line-height"},{"id":34,"name":"--sf-body-strong-weight"},{"id":35,"name":"--sf-body-text-wrap"},{"id":36,"name":"--sf-border"},{"id":37,"name":"--sf-border-scale"},{"id":38,"name":"--sf-border-strong"},{"id":39,"name":"--sf-border-style"},{"id":40,"name":"--sf-border-subtle"},{"id":41,"name":"--sf-border-width-1"},{"id":42,"name":"--sf-border-width-2"},{"id":43,"name":"--sf-border-width-3"},{"id":44,"name":"--sf-border-width-4"},{"id":45,"name":"--sf-border-width-hairline"},{"id":46,"name":"--sf-box-border-color"},{"id":47,"name":"--sf-box-border-width"},{"id":48,"name":"--sf-box-padding"},{"id":49,"name":"--sf-breakout-width"},{"id":50,"name":"--sf-button-padding-block","removed":true},{"id":51,"name":"--sf-button-padding-inline","removed":true},{"id":52,"name":"--sf-button-radius","removed":true},{"id":53,"name":"--sf-caret-color"},{"id":54,"name":"--sf-center-gutter"},{"id":55,"name":"--sf-center-max"},{"id":56,"name":"--sf-cluster-align"},{"id":57,"name":"--sf-cluster-gap"},{"id":58,"name":"--sf-cluster-justify"},{"id":59,"name":"--sf-code-font-size"},{"id":60,"name":"--sf-color-action"},{"id":61,"name":"--sf-color-action--active"},{"id":62,"name":"--sf-color-action--hover"},{"id":63,"name":"--sf-color-action-100"},{"id":64,"name":"--sf-color-action-200"},{"id":65,"name":"--sf-color-action-300"},{"id":66,"name":"--sf-color-action-400"},{"id":67,"name":"--sf-color-action-50"},{"id":68,"name":"--sf-color-action-500"},{"id":69,"name":"--sf-color-action-600"},{"id":70,"name":"--sf-color-action-700"},{"id":71,"name":"--sf-color-action-800"},{"id":72,"name":"--sf-color-action-900"},{"id":73,"name":"--sf-color-action-950"},{"id":74,"name":"--sf-color-action-a10"},{"id":75,"name":"--sf-color-action-a30"},{"id":76,"name":"--sf-color-action-a5"},{"id":77,"name":"--sf-color-action-a50"},{"id":78,"name":"--sf-color-action-a80"},{"id":79,"name":"--sf-color-action-source-dark"},{"id":80,"name":"--sf-color-action-darker"},{"id":81,"name":"--sf-color-action-ghost"},{"id":82,"name":"--sf-color-action-source-light"},{"id":83,"name":"--sf-color-action-lighter"},{"id":84,"name":"--sf-color-action-muted"},{"id":85,"name":"--sf-color-action-subtle"},{"id":86,"name":"--sf-color-action-superdark"},{"id":87,"name":"--sf-color-action-superlight"},{"id":88,"name":"--sf-color-action-xdark"},{"id":89,"name":"--sf-color-action-xlight"},{"id":90,"name":"--sf-color-base"},{"id":91,"name":"--sf-color-base--active"},{"id":92,"name":"--sf-color-base--hover"},{"id":93,"name":"--sf-color-base-100"},{"id":94,"name":"--sf-color-base-200"},{"id":95,"name":"--sf-color-base-300"},{"id":96,"name":"--sf-color-base-400"},{"id":97,"name":"--sf-color-base-50"},{"id":98,"name":"--sf-color-base-500"},{"id":99,"name":"--sf-color-base-600"},{"id":100,"name":"--sf-color-base-700"},{"id":101,"name":"--sf-color-base-800"},{"id":102,"name":"--sf-color-base-900"},{"id":103,"name":"--sf-color-base-950"},{"id":104,"name":"--sf-color-base-a10"},{"id":105,"name":"--sf-color-base-a30"},{"id":106,"name":"--sf-color-base-a5"},{"id":107,"name":"--sf-color-base-a50"},{"id":108,"name":"--sf-color-base-a80"},{"id":109,"name":"--sf-color-base-source-dark"},{"id":110,"name":"--sf-color-base-darker","removed":true},{"id":111,"name":"--sf-color-base-ghost"},{"id":112,"name":"--sf-color-base-source-light"},{"id":113,"name":"--sf-color-base-lighter","removed":true},{"id":114,"name":"--sf-color-base-muted"},{"id":115,"name":"--sf-color-base-subtle"},{"id":116,"name":"--sf-color-base-superdark","removed":true},{"id":117,"name":"--sf-color-base-superlight","removed":true},{"id":118,"name":"--sf-color-base-xdark","removed":true},{"id":119,"name":"--sf-color-base-xlight","removed":true},{"id":120,"name":"--sf-color-bg"},{"id":121,"name":"--sf-color-bg--active"},{"id":122,"name":"--sf-color-bg--disabled"},{"id":123,"name":"--sf-color-bg--focus"},{"id":124,"name":"--sf-color-bg--hover"},{"id":125,"name":"--sf-color-bg--selected"},{"id":126,"name":"--sf-color-black"},{"id":127,"name":"--sf-color-border"},{"id":128,"name":"--sf-color-border--disabled"},{"id":129,"name":"--sf-color-border--focus"},{"id":130,"name":"--sf-color-border--strong"},{"id":131,"name":"--sf-color-border--subtle"},{"id":132,"name":"--sf-color-border--translucent"},{"id":133,"name":"--sf-color-code-bg"},{"id":134,"name":"--sf-color-code-text"},{"id":135,"name":"--sf-color-danger"},{"id":136,"name":"--sf-color-danger-source-dark"},{"id":137,"name":"--sf-color-danger-source-light"},{"id":138,"name":"--sf-color-danger-muted"},{"id":139,"name":"--sf-color-danger-strong"},{"id":140,"name":"--sf-color-danger-subtle"},{"id":141,"name":"--sf-color-dim"},{"id":142,"name":"--sf-color-error","removed":true},{"id":143,"name":"--sf-color-error-dark","removed":true},{"id":144,"name":"--sf-color-error-light","removed":true},{"id":145,"name":"--sf-color-error-muted","removed":true},{"id":146,"name":"--sf-color-error-strong","removed":true},{"id":147,"name":"--sf-color-error-subtle","removed":true},{"id":148,"name":"--sf-color-heading"},{"id":149,"name":"--sf-color-info"},{"id":150,"name":"--sf-color-info-source-dark"},{"id":151,"name":"--sf-color-info-source-light"},{"id":152,"name":"--sf-color-info-muted"},{"id":153,"name":"--sf-color-info-strong"},{"id":154,"name":"--sf-color-info-subtle"},{"id":155,"name":"--sf-color-inset"},{"id":156,"name":"--sf-color-inverse"},{"id":157,"name":"--sf-color-link"},{"id":158,"name":"--sf-color-link--active"},{"id":159,"name":"--sf-color-link--disabled"},{"id":160,"name":"--sf-color-link--hover"},{"id":161,"name":"--sf-color-link--underline"},{"id":162,"name":"--sf-color-link--visited"},{"id":163,"name":"--sf-color-mark-bg"},{"id":164,"name":"--sf-color-mark-text"},{"id":165,"name":"--sf-color-neutral"},{"id":166,"name":"--sf-color-neutral--active"},{"id":167,"name":"--sf-color-neutral--hover"},{"id":168,"name":"--sf-color-neutral-100"},{"id":169,"name":"--sf-color-neutral-200"},{"id":170,"name":"--sf-color-neutral-300"},{"id":171,"name":"--sf-color-neutral-400"},{"id":172,"name":"--sf-color-neutral-50"},{"id":173,"name":"--sf-color-neutral-500"},{"id":174,"name":"--sf-color-neutral-600"},{"id":175,"name":"--sf-color-neutral-700"},{"id":176,"name":"--sf-color-neutral-800"},{"id":177,"name":"--sf-color-neutral-900"},{"id":178,"name":"--sf-color-neutral-950"},{"id":179,"name":"--sf-color-neutral-a10"},{"id":180,"name":"--sf-color-neutral-a30"},{"id":181,"name":"--sf-color-neutral-a5"},{"id":182,"name":"--sf-color-neutral-a50"},{"id":183,"name":"--sf-color-neutral-a80"},{"id":184,"name":"--sf-color-neutral-source-dark"},{"id":185,"name":"--sf-color-neutral-darker"},{"id":186,"name":"--sf-color-neutral-ghost"},{"id":187,"name":"--sf-color-neutral-source-light"},{"id":188,"name":"--sf-color-neutral-lighter"},{"id":189,"name":"--sf-color-neutral-muted"},{"id":190,"name":"--sf-color-neutral-subtle"},{"id":191,"name":"--sf-color-neutral-superdark"},{"id":192,"name":"--sf-color-neutral-superlight"},{"id":193,"name":"--sf-color-neutral-xdark"},{"id":194,"name":"--sf-color-neutral-xlight"},{"id":195,"name":"--sf-color-overlay"},{"id":196,"name":"--sf-color-primary"},{"id":197,"name":"--sf-color-primary--active"},{"id":198,"name":"--sf-color-primary--hover"},{"id":199,"name":"--sf-color-primary-100"},{"id":200,"name":"--sf-color-primary-200"},{"id":201,"name":"--sf-color-primary-300"},{"id":202,"name":"--sf-color-primary-400"},{"id":203,"name":"--sf-color-primary-50"},{"id":204,"name":"--sf-color-primary-500"},{"id":205,"name":"--sf-color-primary-600"},{"id":206,"name":"--sf-color-primary-700"},{"id":207,"name":"--sf-color-primary-800"},{"id":208,"name":"--sf-color-primary-900"},{"id":209,"name":"--sf-color-primary-950"},{"id":210,"name":"--sf-color-primary-a10"},{"id":211,"name":"--sf-color-primary-a30"},{"id":212,"name":"--sf-color-primary-a5"},{"id":213,"name":"--sf-color-primary-a50"},{"id":214,"name":"--sf-color-primary-a80"},{"id":215,"name":"--sf-color-primary-source-dark"},{"id":216,"name":"--sf-color-primary-darker"},{"id":217,"name":"--sf-color-primary-ghost"},{"id":218,"name":"--sf-color-primary-source-light"},{"id":219,"name":"--sf-color-primary-lighter"},{"id":220,"name":"--sf-color-primary-muted"},{"id":221,"name":"--sf-color-primary-subtle"},{"id":222,"name":"--sf-color-primary-superdark"},{"id":223,"name":"--sf-color-primary-superlight"},{"id":224,"name":"--sf-color-primary-xdark"},{"id":225,"name":"--sf-color-primary-xlight"},{"id":226,"name":"--sf-color-raised"},{"id":227,"name":"--sf-color-scheme"},{"id":228,"name":"--sf-color-secondary"},{"id":229,"name":"--sf-color-secondary--active"},{"id":230,"name":"--sf-color-secondary--hover"},{"id":231,"name":"--sf-color-secondary-100"},{"id":232,"name":"--sf-color-secondary-200"},{"id":233,"name":"--sf-color-secondary-300"},{"id":234,"name":"--sf-color-secondary-400"},{"id":235,"name":"--sf-color-secondary-50"},{"id":236,"name":"--sf-color-secondary-500"},{"id":237,"name":"--sf-color-secondary-600"},{"id":238,"name":"--sf-color-secondary-700"},{"id":239,"name":"--sf-color-secondary-800"},{"id":240,"name":"--sf-color-secondary-900"},{"id":241,"name":"--sf-color-secondary-950"},{"id":242,"name":"--sf-color-secondary-a10"},{"id":243,"name":"--sf-color-secondary-a30"},{"id":244,"name":"--sf-color-secondary-a5"},{"id":245,"name":"--sf-color-secondary-a50"},{"id":246,"name":"--sf-color-secondary-a80"},{"id":247,"name":"--sf-color-secondary-source-dark"},{"id":248,"name":"--sf-color-secondary-darker"},{"id":249,"name":"--sf-color-secondary-ghost"},{"id":250,"name":"--sf-color-secondary-source-light"},{"id":251,"name":"--sf-color-secondary-lighter"},{"id":252,"name":"--sf-color-secondary-muted"},{"id":253,"name":"--sf-color-secondary-subtle"},{"id":254,"name":"--sf-color-secondary-superdark"},{"id":255,"name":"--sf-color-secondary-superlight"},{"id":256,"name":"--sf-color-secondary-xdark"},{"id":257,"name":"--sf-color-secondary-xlight"},{"id":258,"name":"--sf-color-selection-bg"},{"id":259,"name":"--sf-color-selection-text"},{"id":260,"name":"--sf-color-success"},{"id":261,"name":"--sf-color-success-source-dark"},{"id":262,"name":"--sf-color-success-source-light"},{"id":263,"name":"--sf-color-success-muted"},{"id":264,"name":"--sf-color-success-strong"},{"id":265,"name":"--sf-color-success-subtle"},{"id":266,"name":"--sf-color-surface"},{"id":267,"name":"--sf-color-tertiary"},{"id":268,"name":"--sf-color-tertiary--active"},{"id":269,"name":"--sf-color-tertiary--hover"},{"id":270,"name":"--sf-color-tertiary-100"},{"id":271,"name":"--sf-color-tertiary-200"},{"id":272,"name":"--sf-color-tertiary-300"},{"id":273,"name":"--sf-color-tertiary-400"},{"id":274,"name":"--sf-color-tertiary-50"},{"id":275,"name":"--sf-color-tertiary-500"},{"id":276,"name":"--sf-color-tertiary-600"},{"id":277,"name":"--sf-color-tertiary-700"},{"id":278,"name":"--sf-color-tertiary-800"},{"id":279,"name":"--sf-color-tertiary-900"},{"id":280,"name":"--sf-color-tertiary-950"},{"id":281,"name":"--sf-color-tertiary-a10"},{"id":282,"name":"--sf-color-tertiary-a30"},{"id":283,"name":"--sf-color-tertiary-a5"},{"id":284,"name":"--sf-color-tertiary-a50"},{"id":285,"name":"--sf-color-tertiary-a80"},{"id":286,"name":"--sf-color-tertiary-source-dark"},{"id":287,"name":"--sf-color-tertiary-darker"},{"id":288,"name":"--sf-color-tertiary-ghost"},{"id":289,"name":"--sf-color-tertiary-source-light"},{"id":290,"name":"--sf-color-tertiary-lighter"},{"id":291,"name":"--sf-color-tertiary-muted"},{"id":292,"name":"--sf-color-tertiary-subtle"},{"id":293,"name":"--sf-color-tertiary-superdark"},{"id":294,"name":"--sf-color-tertiary-superlight"},{"id":295,"name":"--sf-color-tertiary-xdark"},{"id":296,"name":"--sf-color-tertiary-xlight"},{"id":297,"name":"--sf-color-text"},{"id":298,"name":"--sf-color-text--disabled"},{"id":299,"name":"--sf-color-text--inverse"},{"id":300,"name":"--sf-color-text--muted"},{"id":301,"name":"--sf-color-text--on-action"},{"id":302,"name":"--sf-color-text--on-base"},{"id":303,"name":"--sf-color-text--on-danger"},{"id":304,"name":"--sf-color-text--on-error","removed":true},{"id":305,"name":"--sf-color-text--on-info"},{"id":306,"name":"--sf-color-text--on-inverse"},{"id":307,"name":"--sf-color-text--on-neutral"},{"id":308,"name":"--sf-color-text--on-primary"},{"id":309,"name":"--sf-color-text--on-secondary"},{"id":310,"name":"--sf-color-text--on-success"},{"id":311,"name":"--sf-color-text--on-tertiary"},{"id":312,"name":"--sf-color-text--on-warning"},{"id":313,"name":"--sf-color-text--placeholder"},{"id":314,"name":"--sf-color-text--secondary"},{"id":315,"name":"--sf-color-warning"},{"id":316,"name":"--sf-color-warning-source-dark"},{"id":317,"name":"--sf-color-warning-source-light"},{"id":318,"name":"--sf-color-warning-muted"},{"id":319,"name":"--sf-color-warning-strong"},{"id":320,"name":"--sf-color-warning-subtle"},{"id":321,"name":"--sf-color-white"},{"id":322,"name":"--sf-component-pad"},{"id":323,"name":"--sf-container-default"},{"id":324,"name":"--sf-container-full"},{"id":325,"name":"--sf-container-narrow"},{"id":326,"name":"--sf-container-prose"},{"id":327,"name":"--sf-container-wide"},{"id":328,"name":"--sf-content-gap"},{"id":329,"name":"--sf-content-intrinsic-size"},{"id":330,"name":"--sf-content-width"},{"id":331,"name":"--sf-contrast-bias"},{"id":332,"name":"--sf-contrast-threshold"},{"id":333,"name":"--sf-cover-min-height"},{"id":334,"name":"--sf-cover-padding"},{"id":335,"name":"--sf-current-font-weight"},{"id":336,"name":"--sf-display-l-line-height"},{"id":337,"name":"--sf-display-m-line-height"},{"id":338,"name":"--sf-display-s-line-height"},{"id":339,"name":"--sf-divider-color"},{"id":340,"name":"--sf-divider-gap"},{"id":341,"name":"--sf-divider-style"},{"id":342,"name":"--sf-divider-width"},{"id":343,"name":"--sf-drop-shadow-l"},{"id":344,"name":"--sf-drop-shadow-m"},{"id":345,"name":"--sf-drop-shadow-s"},{"id":346,"name":"--sf-duration-fast"},{"id":347,"name":"--sf-duration-instant"},{"id":348,"name":"--sf-duration-none"},{"id":349,"name":"--sf-duration-normal"},{"id":350,"name":"--sf-duration-slow"},{"id":351,"name":"--sf-duration-slower"},{"id":352,"name":"--sf-ease-bounce"},{"id":353,"name":"--sf-ease-elastic"},{"id":354,"name":"--sf-ease-in"},{"id":355,"name":"--sf-ease-in-out"},{"id":356,"name":"--sf-ease-linear"},{"id":357,"name":"--sf-ease-out"},{"id":358,"name":"--sf-ease-overshoot"},{"id":359,"name":"--sf-ease-spring"},{"id":360,"name":"--sf-equal-gap"},{"id":361,"name":"--sf-equal-min-col"},{"id":362,"name":"--sf-equal-min-col-2"},{"id":363,"name":"--sf-equal-min-col-3"},{"id":364,"name":"--sf-equal-min-col-4"},{"id":365,"name":"--sf-equal-min-col-6"},{"id":366,"name":"--sf-field-block"},{"id":367,"name":"--sf-field-padding-block"},{"id":368,"name":"--sf-field-padding-inline"},{"id":369,"name":"--sf-field-radius"},{"id":370,"name":"--sf-field-required-marker"},{"id":371,"name":"--sf-flow-space"},{"id":372,"name":"--sf-fluid-max-vw"},{"id":373,"name":"--sf-fluid-min-vw"},{"id":374,"name":"--sf-focus-ring-color"},{"id":375,"name":"--sf-focus-ring-offset"},{"id":376,"name":"--sf-focus-ring-shadow"},{"id":377,"name":"--sf-focus-ring-style"},{"id":378,"name":"--sf-focus-ring-width"},{"id":379,"name":"--sf-font-body"},{"id":380,"name":"--sf-font-display"},{"id":381,"name":"--sf-font-features"},{"id":382,"name":"--sf-font-geometric"},{"id":383,"name":"--sf-font-heading"},{"id":384,"name":"--sf-font-humanist"},{"id":385,"name":"--sf-font-mono"},{"id":386,"name":"--sf-font-numeric"},{"id":387,"name":"--sf-font-slab"},{"id":388,"name":"--sf-font-variation"},{"id":389,"name":"--sf-font-weight-body"},{"id":390,"name":"--sf-font-weight-bold"},{"id":391,"name":"--sf-font-weight-display"},{"id":392,"name":"--sf-font-weight-heading"},{"id":393,"name":"--sf-font-weight-interactive"},{"id":394,"name":"--sf-font-weight-light"},{"id":395,"name":"--sf-font-weight-medium"},{"id":396,"name":"--sf-font-weight-normal"},{"id":397,"name":"--sf-font-weight-semibold"},{"id":398,"name":"--sf-font-weight-strong"},{"id":399,"name":"--sf-frame-ratio"},{"id":400,"name":"--sf-gap"},{"id":401,"name":"--sf-gradient-brand"},{"id":402,"name":"--sf-gradient-fade--b"},{"id":403,"name":"--sf-gradient-fade--l"},{"id":404,"name":"--sf-gradient-fade--r"},{"id":405,"name":"--sf-gradient-fade--t"},{"id":406,"name":"--sf-gradient-primary"},{"id":407,"name":"--sf-gradient-secondary"},{"id":408,"name":"--sf-gradient-surface"},{"id":409,"name":"--sf-gradient-tertiary"},{"id":410,"name":"--sf-grid-gap"},{"id":411,"name":"--sf-grid-min"},{"id":412,"name":"--sf-grid-min-2xl"},{"id":413,"name":"--sf-grid-min-l"},{"id":414,"name":"--sf-grid-min-m"},{"id":415,"name":"--sf-grid-min-s"},{"id":416,"name":"--sf-grid-min-xl"},{"id":417,"name":"--sf-grid-min-xs"},{"id":418,"name":"--sf-gutter"},{"id":419,"name":"--sf-h1-font-weight"},{"id":420,"name":"--sf-h1-letter-spacing"},{"id":421,"name":"--sf-h1-line-height"},{"id":422,"name":"--sf-h1-max-width"},{"id":423,"name":"--sf-h1-size"},{"id":424,"name":"--sf-h2-font-weight"},{"id":425,"name":"--sf-h2-letter-spacing"},{"id":426,"name":"--sf-h2-line-height"},{"id":427,"name":"--sf-h2-max-width"},{"id":428,"name":"--sf-h2-size"},{"id":429,"name":"--sf-h3-font-weight"},{"id":430,"name":"--sf-h3-letter-spacing"},{"id":431,"name":"--sf-h3-line-height"},{"id":432,"name":"--sf-h3-max-width"},{"id":433,"name":"--sf-h3-size"},{"id":434,"name":"--sf-h4-font-weight"},{"id":435,"name":"--sf-h4-letter-spacing"},{"id":436,"name":"--sf-h4-line-height"},{"id":437,"name":"--sf-h4-max-width"},{"id":438,"name":"--sf-h4-size"},{"id":439,"name":"--sf-h5-font-weight"},{"id":440,"name":"--sf-h5-letter-spacing"},{"id":441,"name":"--sf-h5-line-height"},{"id":442,"name":"--sf-h5-max-width"},{"id":443,"name":"--sf-h5-size"},{"id":444,"name":"--sf-h6-font-weight"},{"id":445,"name":"--sf-h6-letter-spacing"},{"id":446,"name":"--sf-h6-line-height"},{"id":447,"name":"--sf-h6-max-width"},{"id":448,"name":"--sf-h6-size"},{"id":449,"name":"--sf-header-height"},{"id":450,"name":"--sf-header-height-desktop"},{"id":451,"name":"--sf-header-height-mobile"},{"id":452,"name":"--sf-heading-color"},{"id":453,"name":"--sf-heading-font-family"},{"id":454,"name":"--sf-heading-text-wrap"},{"id":455,"name":"--sf-icon-2xl"},{"id":456,"name":"--sf-icon-box-bg"},{"id":457,"name":"--sf-icon-box-border"},{"id":458,"name":"--sf-icon-box-pad"},{"id":459,"name":"--sf-icon-box-radius"},{"id":460,"name":"--sf-icon-l"},{"id":461,"name":"--sf-icon-m"},{"id":462,"name":"--sf-icon-s"},{"id":463,"name":"--sf-icon-xl"},{"id":464,"name":"--sf-icon-xs"},{"id":465,"name":"--sf-imposter-margin"},{"id":466,"name":"--sf-is-active"},{"id":467,"name":"--sf-is-current"},{"id":468,"name":"--sf-is-dark"},{"id":469,"name":"--sf-is-open"},{"id":470,"name":"--sf-is-pressed"},{"id":471,"name":"--sf-leading-normal"},{"id":472,"name":"--sf-leading-relaxed"},{"id":473,"name":"--sf-leading-snug"},{"id":474,"name":"--sf-leading-taper"},{"id":475,"name":"--sf-leading-tight"},{"id":476,"name":"--sf-line-clamp"},{"id":477,"name":"--sf-link-external-marker"},{"id":478,"name":"--sf-link-underline-offset"},{"id":479,"name":"--sf-link-underline-thickness"},{"id":480,"name":"--sf-lumlocker"},{"id":481,"name":"--sf-mask-scrim-end"},{"id":482,"name":"--sf-mask-scrim-start"},{"id":483,"name":"--sf-motion-scale"},{"id":484,"name":"--sf-object-fit"},{"id":485,"name":"--sf-object-position"},{"id":486,"name":"--sf-opacity-disabled"},{"id":487,"name":"--sf-opacity-muted"},{"id":488,"name":"--sf-optical-sizing"},{"id":489,"name":"--sf-palette-mix-100"},{"id":490,"name":"--sf-palette-mix-200"},{"id":491,"name":"--sf-palette-mix-300"},{"id":492,"name":"--sf-palette-mix-400"},{"id":493,"name":"--sf-palette-mix-50"},{"id":494,"name":"--sf-palette-mix-600"},{"id":495,"name":"--sf-palette-mix-700"},{"id":496,"name":"--sf-palette-mix-800"},{"id":497,"name":"--sf-palette-mix-900"},{"id":498,"name":"--sf-palette-mix-950"},{"id":499,"name":"--sf-print-base-size"},{"id":500,"name":"--sf-print-page-margin"},{"id":501,"name":"--sf-print-page-size"},{"id":502,"name":"--sf-prose-block-margin"},{"id":503,"name":"--sf-prose-blockquote-border"},{"id":504,"name":"--sf-prose-blockquote-padding"},{"id":505,"name":"--sf-prose-figcaption-size"},{"id":506,"name":"--sf-prose-figure-margin"},{"id":507,"name":"--sf-prose-heading-gap"},{"id":508,"name":"--sf-prose-hr-margin"},{"id":509,"name":"--sf-prose-list-gap"},{"id":510,"name":"--sf-prose-marker-color"},{"id":511,"name":"--sf-prose-media-margin"},{"id":512,"name":"--sf-prose-media-radius"},{"id":513,"name":"--sf-prose-nested-list-gap"},{"id":514,"name":"--sf-prose-paragraph"},{"id":515,"name":"--sf-prose-table-pad"},{"id":516,"name":"--sf-radius-2xl"},{"id":517,"name":"--sf-radius-2xs"},{"id":518,"name":"--sf-radius-3xl"},{"id":519,"name":"--sf-radius-4xl"},{"id":520,"name":"--sf-radius-full"},{"id":521,"name":"--sf-radius-l"},{"id":522,"name":"--sf-radius-m"},{"id":523,"name":"--sf-radius-none"},{"id":524,"name":"--sf-radius-outer"},{"id":525,"name":"--sf-radius-pill"},{"id":526,"name":"--sf-radius-s"},{"id":527,"name":"--sf-radius-scale"},{"id":528,"name":"--sf-radius-xl"},{"id":529,"name":"--sf-radius-xs"},{"id":530,"name":"--sf-ratio-3-2"},{"id":531,"name":"--sf-ratio-4-3"},{"id":532,"name":"--sf-ratio-cinema"},{"id":533,"name":"--sf-ratio-golden"},{"id":534,"name":"--sf-ratio-portrait"},{"id":535,"name":"--sf-ratio-square"},{"id":536,"name":"--sf-ratio-video"},{"id":537,"name":"--sf-reel-gap"},{"id":538,"name":"--sf-reel-height"},{"id":539,"name":"--sf-reel-item-width"},{"id":540,"name":"--sf-safe-bottom"},{"id":541,"name":"--sf-safe-left"},{"id":542,"name":"--sf-safe-right"},{"id":543,"name":"--sf-safe-top"},{"id":544,"name":"--sf-scrim-color"},{"id":545,"name":"--sf-scrim-direction"},{"id":546,"name":"--sf-scrim-gradient"},{"id":547,"name":"--sf-scrim-text-shadow"},{"id":548,"name":"--sf-scroll-shadow-size"},{"id":549,"name":"--sf-scroll-timeline-range-end"},{"id":550,"name":"--sf-scroll-timeline-range-start"},{"id":551,"name":"--sf-scrollbar-thumb"},{"id":552,"name":"--sf-scrollbar-track"},{"id":553,"name":"--sf-section-pad"},{"id":554,"name":"--sf-section-pad--2xl"},{"id":555,"name":"--sf-section-pad--l"},{"id":556,"name":"--sf-section-pad--m"},{"id":557,"name":"--sf-section-pad--s"},{"id":558,"name":"--sf-section-pad--xl"},{"id":559,"name":"--sf-section-pad--xs"},{"id":560,"name":"--sf-section-scale"},{"id":561,"name":"--sf-shadow-2xl"},{"id":562,"name":"--sf-shadow-color"},{"id":563,"name":"--sf-shadow-glow"},{"id":564,"name":"--sf-shadow-glow-color"},{"id":565,"name":"--sf-shadow-inner"},{"id":566,"name":"--sf-shadow-l"},{"id":567,"name":"--sf-shadow-lightness"},{"id":568,"name":"--sf-shadow-m"},{"id":569,"name":"--sf-shadow-none"},{"id":570,"name":"--sf-shadow-s"},{"id":571,"name":"--sf-shadow-strength"},{"id":572,"name":"--sf-shadow-xl"},{"id":573,"name":"--sf-shadow-xs"},{"id":574,"name":"--sf-sidebar-gap"},{"id":575,"name":"--sf-sidebar-min-width"},{"id":576,"name":"--sf-sidebar-width"},{"id":577,"name":"--sf-size-l"},{"id":578,"name":"--sf-size-m"},{"id":579,"name":"--sf-size-s"},{"id":580,"name":"--sf-size-xl"},{"id":581,"name":"--sf-size-xs"},{"id":582,"name":"--sf-space-2xl"},{"id":583,"name":"--sf-space-2xs"},{"id":584,"name":"--sf-space-3xl"},{"id":585,"name":"--sf-space-4xl"},{"id":586,"name":"--sf-space-base-max"},{"id":587,"name":"--sf-space-base-min"},{"id":588,"name":"--sf-space-l"},{"id":589,"name":"--sf-space-m"},{"id":590,"name":"--sf-space-none"},{"id":591,"name":"--sf-space-px"},{"id":592,"name":"--sf-space-ratio-max"},{"id":593,"name":"--sf-space-ratio-min"},{"id":594,"name":"--sf-space-s"},{"id":595,"name":"--sf-space-scale"},{"id":596,"name":"--sf-space-xl"},{"id":597,"name":"--sf-space-xs"},{"id":598,"name":"--sf-stack-gap"},{"id":599,"name":"--sf-state-pending-opacity"},{"id":600,"name":"--sf-sticky-offset"},{"id":601,"name":"--sf-sticky-offset-desktop"},{"id":602,"name":"--sf-sticky-offset-mobile"},{"id":603,"name":"--sf-surface-color"},{"id":604,"name":"--sf-switcher-gap"},{"id":605,"name":"--sf-switcher-threshold"},{"id":606,"name":"--sf-text-2xl"},{"id":607,"name":"--sf-text-2xl-font-weight"},{"id":608,"name":"--sf-text-2xl-letter-spacing"},{"id":609,"name":"--sf-text-2xl-line-height"},{"id":610,"name":"--sf-text-2xl-max-width"},{"id":611,"name":"--sf-text-2xs"},{"id":612,"name":"--sf-text-2xs-font-weight"},{"id":613,"name":"--sf-text-2xs-letter-spacing"},{"id":614,"name":"--sf-text-2xs-line-height"},{"id":615,"name":"--sf-text-2xs-max-width"},{"id":616,"name":"--sf-text-3xl"},{"id":617,"name":"--sf-text-3xl-font-weight"},{"id":618,"name":"--sf-text-3xl-letter-spacing"},{"id":619,"name":"--sf-text-3xl-line-height"},{"id":620,"name":"--sf-text-3xl-max-width"},{"id":621,"name":"--sf-text-4xl"},{"id":622,"name":"--sf-text-4xl-font-weight"},{"id":623,"name":"--sf-text-4xl-letter-spacing"},{"id":624,"name":"--sf-text-4xl-line-height"},{"id":625,"name":"--sf-text-4xl-max-width"},{"id":626,"name":"--sf-text-base-max"},{"id":627,"name":"--sf-text-base-min"},{"id":628,"name":"--sf-text-display-base-max"},{"id":629,"name":"--sf-text-display-base-min"},{"id":630,"name":"--sf-text-display-l"},{"id":631,"name":"--sf-text-display-m"},{"id":632,"name":"--sf-text-display-s"},{"id":633,"name":"--sf-text-display-scale"},{"id":634,"name":"--sf-text-l"},{"id":635,"name":"--sf-text-l-font-weight"},{"id":636,"name":"--sf-text-l-letter-spacing"},{"id":637,"name":"--sf-text-l-line-height"},{"id":638,"name":"--sf-text-l-max-width"},{"id":639,"name":"--sf-text-m"},{"id":640,"name":"--sf-text-m-font-weight"},{"id":641,"name":"--sf-text-m-letter-spacing"},{"id":642,"name":"--sf-text-m-line-height"},{"id":643,"name":"--sf-text-m-max-width"},{"id":644,"name":"--sf-text-ratio-max"},{"id":645,"name":"--sf-text-ratio-min"},{"id":646,"name":"--sf-text-s"},{"id":647,"name":"--sf-text-s-font-weight"},{"id":648,"name":"--sf-text-s-letter-spacing"},{"id":649,"name":"--sf-text-s-line-height"},{"id":650,"name":"--sf-text-s-max-width"},{"id":651,"name":"--sf-text-scale"},{"id":652,"name":"--sf-text-shadow-l"},{"id":653,"name":"--sf-text-shadow-m"},{"id":654,"name":"--sf-text-shadow-none"},{"id":655,"name":"--sf-text-shadow-s"},{"id":656,"name":"--sf-text-xl"},{"id":657,"name":"--sf-text-xl-font-weight"},{"id":658,"name":"--sf-text-xl-letter-spacing"},{"id":659,"name":"--sf-text-xl-line-height"},{"id":660,"name":"--sf-text-xl-max-width"},{"id":661,"name":"--sf-text-xs"},{"id":662,"name":"--sf-text-xs-font-weight"},{"id":663,"name":"--sf-text-xs-letter-spacing"},{"id":664,"name":"--sf-text-xs-line-height"},{"id":665,"name":"--sf-text-xs-max-width"},{"id":666,"name":"--sf-theme-transition-duration"},{"id":667,"name":"--sf-touch-target"},{"id":668,"name":"--sf-tracking-normal"},{"id":669,"name":"--sf-tracking-tight"},{"id":670,"name":"--sf-tracking-wide"},{"id":671,"name":"--sf-tracking-wider"},{"id":672,"name":"--sf-tracking-widest"},{"id":673,"name":"--sf-transition-colors"},{"id":674,"name":"--sf-transition-enter"},{"id":675,"name":"--sf-transition-exit"},{"id":676,"name":"--sf-transition-fast"},{"id":677,"name":"--sf-transition-form-field"},{"id":678,"name":"--sf-transition-opacity"},{"id":679,"name":"--sf-transition-overlay"},{"id":680,"name":"--sf-transition-shadow"},{"id":681,"name":"--sf-transition-slow"},{"id":682,"name":"--sf-transition-transform"},{"id":683,"name":"--sf-z-base"},{"id":684,"name":"--sf-z-below"},{"id":685,"name":"--sf-z-dropdown"},{"id":686,"name":"--sf-z-fixed"},{"id":687,"name":"--sf-z-modal"},{"id":688,"name":"--sf-z-overlay"},{"id":689,"name":"--sf-z-raised"},{"id":690,"name":"--sf-z-sticky"},{"id":691,"name":"--sf-z-toast"},{"id":692,"name":"--sf-z-tooltip"},{"id":693,"name":"--sf-bg-fit"},{"id":694,"name":"--sf-bg-inset"},{"id":695,"name":"--sf-bg-position"},{"id":696,"name":"--sf-bg-radius"},{"id":697,"name":"--sf-bg-z"},{"id":698,"name":"--sf-btn-padding-block"},{"id":699,"name":"--sf-btn-padding-inline"},{"id":700,"name":"--sf-btn-radius"}]'),Ef={_meta:Af,tokens:zf};/** + */const n=[["path",{d:"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"}]];Zt(a,Yt({name:"zap"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=zt(),d=ce(c);Kt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}var nf=g(''),lf=g(" Saving…",1),cf=g(" Saved",1),df=g(" Save",1),ff=g(''),uf=g('
/
',1);function pf(a,e){ea(e,!0);const o=typeof window.__SLASHED_FW_VERSION__<"u"?window.__SLASHED_FW_VERSION__:"";let n=K(!1),l=K(!1),i=K(null),c=K(null);xa(()=>{t(l)&&mr().then(()=>t(i)?.focus())});async function d(){try{await navigator.clipboard.writeText(window.location.href),w(n,!0),setTimeout(()=>{w(n,!1)},2e3)}catch{}}function p(){w(l,!0)}function m(){w(l,!1),e.onResetAll()}function h(){w(l,!1)}var v=uf(),b=ce(v),k=r(s(b),2),S=s(k),E=r(s(S)),I=s(E),P=r(k,2);{var B=G=>{var Z=nf(),se=s(Z),Y=s(se);_(()=>y(Y,e.overridesCount)),x("click",Z,function(...de){e.onExport?.apply(this,de)}),f(G,Z)};L(P,G=>{e.overridesCount>0&&G(B)})}var H=r(P,4),D=s(H),R=s(D);{var C=G=>{var Z=lf(),se=ce(Z);bi(se,{class:"w-3.5 h-3.5 animate-spin"}),f(G,Z)},A=G=>{var Z=cf(),se=ce(Z);Uo(se,{class:"w-3.5 h-3.5"}),f(G,Z)},q=G=>{var Z=df(),se=ce(Z);gr(se,{class:"w-3.5 h-3.5"}),f(G,Z)};L(R,G=>{e.saveState==="saving"?G(C):e.saveState==="saved"?G(A,1):G(q,-1)})}var O=r(D,2),F=s(O);Bi(F,{class:"w-3.5 h-3.5"});var M=r(O,2),J=s(M);_i(J,{class:"w-3.5 h-3.5"});var be=r(M,4),ze=s(be);{var Me=G=>{Uo(G,{class:"w-3.5 h-3.5 text-emerald-400"})},ye=G=>{of(G,{class:"w-3.5 h-3.5"})};L(ze,G=>{t(n)?G(Me):G(ye,-1)})}var ue=r(be,2),X=s(ue);hi(X,{class:"w-3.5 h-3.5"});var ne=r(ue,2),_e=s(ne);bn(_e,{class:"w-3.5 h-3.5"});var Ae=r(b,2);{var j=G=>{var Z=ff(),se=s(Z),Y=r(s(se),2),de=s(Y),ge=r(Y,2),ve=s(ge);bo(ve,Ie=>w(i,Ie),()=>t(i));var re=r(ve,2);bo(re,Ie=>w(c,Ie),()=>t(c)),_(()=>y(de,`This will clear all ${e.overridesCount??""} customisation${e.overridesCount!==1?"s":""}. + You can still undo this before saving.`)),x("click",Z,Ie=>{Ie.target===Ie.currentTarget&&h()}),x("keydown",Z,Ie=>{Ie.key==="Escape"&&(Ie.stopPropagation(),h()),Ie.key==="Tab"&&(Ie.preventDefault(),document.activeElement===t(i)?t(c)?.focus():t(i)?.focus())}),x("click",ve,h),x("click",re,m),f(G,Z)};L(Ae,G=>{t(l)&&G(j)})}_(G=>{y(I,`v${o??""}`),D.disabled=!e.hasPendingChanges||e.saveState==="saving",ee(D,"title",e.hasPendingChanges?"Save changes (Ctrl+S)":"No unsaved changes"),Xe(D,1,G),O.disabled=!e.canUndo,M.disabled=!e.canRedo,ne.disabled=e.overridesCount===0},[()=>mo(["flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold transition-colors cursor-pointer",e.saveState==="saved"?"bg-emerald-900/40 border border-emerald-500/30 text-emerald-300":e.hasPendingChanges?"bg-emerald-600 hover:bg-emerald-500 text-white shadow-sm shadow-emerald-600/30":"bg-white/5 text-slate-500 disabled:opacity-40 disabled:pointer-events-none"].join(" "))]),x("click",D,function(...G){e.onSave?.apply(this,G)}),x("click",O,function(...G){e.onUndo?.apply(this,G)}),x("click",M,function(...G){e.onRedo?.apply(this,G)}),x("click",be,d),x("click",ue,function(...G){e.onImport?.apply(this,G)}),x("click",ne,p),f(a,v),ta()}oa(["click","keydown"]);var qn=g(' '),Vn=g(''),mf=g('');function Ai(a,e){ea(e,!0);let o=Sa(e,"overridesByDomain",19,()=>({}));const n=[{id:"home",icon:Qd,label:"Home",group:"tokens"},{id:"colors",icon:xi,label:"Colors",group:"tokens"},{id:"typography",icon:Ii,label:"Typography",group:"tokens"},{id:"spacing",icon:Ci,label:"Spacing",group:"tokens"},{id:"layout",icon:ki,label:"Layout",group:"tokens"},{id:"borders",icon:Li,label:"Borders",group:"tokens"},{id:"shadows",icon:gi,label:"Shadows",group:"tokens"},{id:"motion",icon:Ui,label:"Motion",group:"tokens"},{id:"effects",icon:Jr,label:"Effects",group:"tokens"},{id:"macros",icon:mi,label:"Macros",group:"tokens"},{id:"misc",icon:wi,label:"Misc",group:"tokens"},{id:"themes",icon:Pi,label:"Themes",group:"tools"},{id:"wcag",icon:Oi,label:"WCAG",group:"tools"},{id:"setup",icon:yi,label:"Install",group:"tools"},{id:"cheatsheet",icon:vi,label:"Classes",group:"tools"}];let l=u(()=>n.filter(m=>m.group==="tokens")),i=u(()=>n.filter(m=>m.group==="tools"));var c=mf(),d=s(c);ae(d,21,()=>t(l),m=>m.id,(m,h)=>{const v=u(()=>e.activeId===t(h).id),b=u(()=>o()[t(h).id]||0),k=u(()=>t(h).icon);var S=Vn(),E=s(S);zs(E,()=>t(k),(D,R)=>{R(D,{class:"w-4 h-4"})});var I=r(E,2);{var P=D=>{var R=qn(),C=s(R);_(()=>y(C,t(b)>9?"+":t(b))),f(D,R)};L(I,D=>{t(b)>0&&!t(v)&&D(P)})}var B=r(I,2),H=s(B);_(()=>{ee(S,"title",t(h).label),Xe(S,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${t(v)?"bg-indigo-600 text-white shadow-lg shadow-indigo-600/30":"text-slate-500 hover:text-slate-200 hover:bg-white/8"}`),y(H,t(h).label)}),x("click",S,()=>e.onSelect(t(h).id)),f(m,S)});var p=r(d,4);ae(p,21,()=>t(i),m=>m.id,(m,h)=>{const v=u(()=>e.activeId===t(h).id),b=u(()=>o()[t(h).id]||0),k=u(()=>t(h).icon);var S=Vn(),E=s(S);zs(E,()=>t(k),(D,R)=>{R(D,{class:"w-4 h-4"})});var I=r(E,2);{var P=D=>{var R=qn(),C=s(R);_(()=>y(C,t(b)>9?"+":t(b))),f(D,R)};L(I,D=>{t(b)>0&&!t(v)&&D(P)})}var B=r(I,2),H=s(B);_(()=>{ee(S,"title",t(h).label),Xe(S,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${t(v)?"bg-indigo-600 text-white shadow-lg shadow-indigo-600/30":"text-slate-500 hover:text-slate-200 hover:bg-white/8"}`),y(H,t(h).label)}),x("click",S,()=>e.onSelect(t(h).id)),f(m,S)}),f(a,c),ta()}oa(["click"]);var vf=g(' '),hf=g('
Live
');function gf(a,e){var o=hf(),n=r(s(o),2),l=s(n);{var i=m=>{var h=vf(),v=s(h);_(()=>y(v,`${e.overridesCount??""} override${e.overridesCount!==1?"s":""} active`)),f(m,h)},c=m=>{var h=ls("No overrides — showing framework defaults");f(m,h)};L(l,m=>{e.overridesCount>0?m(i):m(c,-1)})}var d=r(n,4),p=s(d);_(()=>y(p,e.domain)),f(a,o)}var La=Uint8Array,Fa=Uint16Array,yn=Int32Array,br=new La([0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0]),yr=new La([0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0]),Qr=new La([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),zi=function(a,e){for(var o=new Fa(31),n=0;n<31;++n)o[n]=e+=1<>1|(ca&21845)<<1;wo=(wo&52428)>>2|(wo&13107)<<2,wo=(wo&61680)>>4|(wo&3855)<<4,en[ca]=((wo&65280)>>8|(wo&255)<<8)>>1}var lo=(function(a,e,o){for(var n=a.length,l=0,i=new Fa(e);l>p]=m}else for(d=new Fa(n),l=0;l>15-a[l]);return d}),Ao=new La(288);for(var ca=0;ca<144;++ca)Ao[ca]=8;for(var ca=144;ca<256;++ca)Ao[ca]=9;for(var ca=256;ca<280;++ca)Ao[ca]=7;for(var ca=280;ca<288;++ca)Ao[ca]=8;var Es=new La(32);for(var ca=0;ca<32;++ca)Es[ca]=5;var yf=lo(Ao,9,0),xf=lo(Ao,9,1),kf=lo(Es,5,0),wf=lo(Es,5,1),Ir=function(a){for(var e=a[0],o=1;oe&&(e=a[o]);return e},Wa=function(a,e,o){var n=e/8|0;return(a[n]|a[n+1]<<8)>>(e&7)&o},Br=function(a,e){var o=e/8|0;return(a[o]|a[o+1]<<8|a[o+2]<<16)>>(e&7)},xn=function(a){return(a+7)/8|0},Di=function(a,e,o){return(o==null||o>a.length)&&(o=a.length),new La(a.subarray(e,o))},_f=["unexpected EOF","invalid block type","invalid length/literal","invalid distance","stream finished","no stream handler",,"no callback","invalid UTF-8 data","extra field too long","date not in range 1980-2099","filename too long","stream finishing","invalid zip data"],uo=function(a,e,o){var n=new Error(e||_f[a]);if(n.code=a,Error.captureStackTrace&&Error.captureStackTrace(n,uo),!o)throw n;return n},Cf=function(a,e,o,n){var l=a.length,i=0;if(!l||e.f&&!e.l)return o||new La(0);var c=!o,d=c||e.i!=2,p=e.i;c&&(o=new La(l*3));var m=function(Ie){var qe=o.length;if(Ie>qe){var rt=new La(Math.max(qe*2,Ie));rt.set(o),o=rt}},h=e.f||0,v=e.p||0,b=e.b||0,k=e.l,S=e.d,E=e.m,I=e.n,P=l*8;do{if(!k){h=Wa(a,v,1);var B=Wa(a,v+1,3);if(v+=3,B)if(B==1)k=xf,S=wf,E=9,I=5;else if(B==2){var C=Wa(a,v,31)+257,A=Wa(a,v+10,15)+4,q=C+Wa(a,v+5,31)+1;v+=14;for(var O=new La(q),F=new La(19),M=0;M>4;if(H<16)O[M++]=H;else{var ye=0,ue=0;for(H==16?(ue=3+Wa(a,v,3),v+=2,ye=O[M-1]):H==17?(ue=3+Wa(a,v,7),v+=3):H==18&&(ue=11+Wa(a,v,127),v+=7);ue--;)O[M++]=ye}}var X=O.subarray(0,C),ne=O.subarray(C);E=Ir(X),I=Ir(ne),k=lo(X,E,1),S=lo(ne,I,1)}else uo(1);else{var H=xn(v)+4,D=a[H-4]|a[H-3]<<8,R=H+D;if(R>l){p&&uo(0);break}d&&m(b+D),o.set(a.subarray(H,R),b),e.b=b+=D,e.p=v=R*8,e.f=h;continue}if(v>P){p&&uo(0);break}}d&&m(b+131072);for(var _e=(1<>4;if(v+=ye&15,v>P){p&&uo(0);break}if(ye||uo(2),G<256)o[b++]=G;else if(G==256){j=v,k=null;break}else{var Z=G-254;if(G>264){var M=G-257,se=br[M];Z=Wa(a,v,(1<>4;Y||uo(3),v+=Y&15;var ne=bf[de];if(de>3){var se=yr[de];ne+=Br(a,v)&(1<P){p&&uo(0);break}d&&m(b+131072);var ge=b+Z;if(b>8},gs=function(a,e,o){o<<=e&7;var n=e/8|0;a[n]|=o,a[n+1]|=o>>8,a[n+2]|=o>>16},Ur=function(a,e){for(var o=[],n=0;nb&&(b=i[n].s);var k=new Fa(b+1),S=tn(o[h-1],k,0);if(S>e){var n=0,E=0,I=S-e,P=1<e)E+=P-(1<>=I;E>0;){var H=i[n].s;k[H]=0&&E;--n){var D=i[n].s;k[D]==e&&(--k[D],++E)}S=e}return{t:new La(k),l:S}},tn=function(a,e,o){return a.s==-1?Math.max(tn(a.l,e,o+1),tn(a.r,e,o+1)):e[a.s]=o},Wn=function(a){for(var e=a.length;e&&!a[--e];);for(var o=new Fa(++e),n=0,l=a[0],i=1,c=function(p){o[n++]=p},d=1;d<=e;++d)if(a[d]==l&&d!=e)++i;else{if(!l&&i>2){for(;i>138;i-=138)c(32754);i>2&&(c(i>10?i-11<<5|28690:i-3<<5|12305),i=0)}else if(i>3){for(c(l),--i;i>6;i-=6)c(8304);i>2&&(c(i-3<<5|8208),i=0)}for(;i--;)c(l);i=1,l=a[d]}return{c:o.subarray(0,n),n:e}},bs=function(a,e){for(var o=0,n=0;n>8,a[l+2]=a[l]^255,a[l+3]=a[l+1]^255;for(var i=0;i4&&!F[Qr[J-1]];--J);var be=m+5<<3,ze=bs(l,Ao)+bs(i,Es)+c,Me=bs(l,b)+bs(i,E)+c+14+3*J+bs(A,F)+2*A[16]+3*A[17]+7*A[18];if(p>=0&&be<=ze&&be<=Me)return Mi(e,h,a.subarray(p,p+m));var ye,ue,X,ne;if(fo(e,h,1+(Me15&&(fo(e,h,G[q]>>5&127),h+=G[q]>>12)}}else ye=yf,ue=Ao,X=kf,ne=Es;for(var q=0;q255){var Z=se>>18&31;gs(e,h,ye[Z+257]),h+=ue[Z+257],Z>7&&(fo(e,h,se>>23&31),h+=br[Z]);var Y=se&31;gs(e,h,X[Y]),h+=ne[Y],Y>3&&(gs(e,h,se>>5&8191),h+=yr[Y])}else gs(e,h,ye[se]),h+=ue[se]}return gs(e,h,ye[256]),h+ue[256]},Of=new yn([65540,131080,131088,131104,262176,1048704,1048832,2114560,2117632]),Ni=new La(0),Sf=function(a,e,o,n,l,i){var c=i.z||a.length,d=new La(n+c+5*(1+Math.ceil(c/7e3))+l),p=d.subarray(n,d.length-l),m=i.l,h=(i.r||0)&7;if(e){h&&(p[0]=i.r>>3);for(var v=Of[e-1],b=v>>13,k=v&8191,S=(1<7e3||F>24576)&&(ye>423||!m)){h=Yn(a,p,0,D,R,C,q,F,J,O-J,h),F=A=q=0,J=O;for(var ue=0;ue<286;++ue)R[ue]=0;for(var ue=0;ue<30;++ue)C[ue]=0}var X=2,ne=0,_e=k,Ae=ze-Me&32767;if(ye>2&&be==H(O-Ae))for(var j=Math.min(b,ye)-1,G=Math.min(32767,O),Z=Math.min(258,ye);Ae<=G&&--_e&&ze!=Me;){if(a[O+X]==a[O+X-Ae]){for(var se=0;seX){if(X=se,ne=Ae,se>j)break;for(var Y=Math.min(Ae,se-2),de=0,ue=0;uede&&(de=re,Me=ge)}}}ze=Me,Me=E[ze],Ae+=ze-Me&32767}if(ne){D[F++]=268435456|$r[X]<<18|Kn[ne];var Ie=$r[X]&31,qe=Kn[ne]&31;q+=br[Ie]+yr[qe],++R[257+Ie],++C[qe],M=O+X,++A}else D[F++]=a[O],++R[a[O]]}}for(O=Math.max(O,M);O=c&&(p[h/8|0]=m,rt=c),h=Mi(p,h+1,a.subarray(O,rt))}i.i=c}return Di(d,0,n+xn(h)+l)},Lf=function(a,e,o,n,l){if(!l&&(l={l:1},e.dictionary)){var i=e.dictionary.subarray(-32768),c=new La(i.length+a.length);c.set(i),c.set(a,i.length),a=c,l.w=i.length}return Sf(a,e.level==null?6:e.level,e.mem==null?l.l?Math.ceil(Math.max(8,Math.min(13,Math.log(a.length)))*1.5):20:12+e.mem,o,n,l)};function Pf(a,e){return Lf(a,{},0,0)}function If(a,e){return Cf(a,{i:2},e,e)}var Bf=typeof TextDecoder<"u"&&new TextDecoder,Uf=0;try{Bf.decode(Ni,{stream:!0}),Uf=1}catch{}const Af={generatedBy:"scripts/gen-token-registry.js",nextId:701},zf=JSON.parse('[{"id":0,"name":"--sf-alternate-gap"},{"id":1,"name":"--sf-alternate-inner-gap"},{"id":2,"name":"--sf-animation-blink"},{"id":3,"name":"--sf-animation-color-pulse"},{"id":4,"name":"--sf-animation-delay-1"},{"id":5,"name":"--sf-animation-delay-2"},{"id":6,"name":"--sf-animation-delay-3"},{"id":7,"name":"--sf-animation-delay-4"},{"id":8,"name":"--sf-animation-delay-5"},{"id":9,"name":"--sf-animation-fade-in"},{"id":10,"name":"--sf-animation-fade-out"},{"id":11,"name":"--sf-animation-float"},{"id":12,"name":"--sf-animation-ping"},{"id":13,"name":"--sf-animation-scale-down"},{"id":14,"name":"--sf-animation-scale-up"},{"id":15,"name":"--sf-animation-shimmer"},{"id":16,"name":"--sf-animation-slide-in-down"},{"id":17,"name":"--sf-animation-slide-in-left"},{"id":18,"name":"--sf-animation-slide-in-right"},{"id":19,"name":"--sf-animation-slide-in-up"},{"id":20,"name":"--sf-animation-spin"},{"id":21,"name":"--sf-aspect"},{"id":22,"name":"--sf-bento-cols-default"},{"id":23,"name":"--sf-bento-gap"},{"id":24,"name":"--sf-bento-row-compact"},{"id":25,"name":"--sf-bento-row-default"},{"id":26,"name":"--sf-bento-row-tall"},{"id":27,"name":"--sf-blur"},{"id":28,"name":"--sf-body-color"},{"id":29,"name":"--sf-body-em-style"},{"id":30,"name":"--sf-body-font-family"},{"id":31,"name":"--sf-body-font-size"},{"id":32,"name":"--sf-body-font-weight"},{"id":33,"name":"--sf-body-line-height"},{"id":34,"name":"--sf-body-strong-weight"},{"id":35,"name":"--sf-body-text-wrap"},{"id":36,"name":"--sf-border"},{"id":37,"name":"--sf-border-scale"},{"id":38,"name":"--sf-border-strong"},{"id":39,"name":"--sf-border-style"},{"id":40,"name":"--sf-border-subtle"},{"id":41,"name":"--sf-border-width-1"},{"id":42,"name":"--sf-border-width-2"},{"id":43,"name":"--sf-border-width-3"},{"id":44,"name":"--sf-border-width-4"},{"id":45,"name":"--sf-border-width-hairline"},{"id":46,"name":"--sf-box-border-color"},{"id":47,"name":"--sf-box-border-width"},{"id":48,"name":"--sf-box-padding"},{"id":49,"name":"--sf-breakout-width"},{"id":50,"name":"--sf-button-padding-block","removed":true},{"id":51,"name":"--sf-button-padding-inline","removed":true},{"id":52,"name":"--sf-button-radius","removed":true},{"id":53,"name":"--sf-caret-color"},{"id":54,"name":"--sf-center-gutter"},{"id":55,"name":"--sf-center-max"},{"id":56,"name":"--sf-cluster-align"},{"id":57,"name":"--sf-cluster-gap"},{"id":58,"name":"--sf-cluster-justify"},{"id":59,"name":"--sf-code-font-size"},{"id":60,"name":"--sf-color-action"},{"id":61,"name":"--sf-color-action--active"},{"id":62,"name":"--sf-color-action--hover"},{"id":63,"name":"--sf-color-action-100"},{"id":64,"name":"--sf-color-action-200"},{"id":65,"name":"--sf-color-action-300"},{"id":66,"name":"--sf-color-action-400"},{"id":67,"name":"--sf-color-action-50"},{"id":68,"name":"--sf-color-action-500"},{"id":69,"name":"--sf-color-action-600"},{"id":70,"name":"--sf-color-action-700"},{"id":71,"name":"--sf-color-action-800"},{"id":72,"name":"--sf-color-action-900"},{"id":73,"name":"--sf-color-action-950"},{"id":74,"name":"--sf-color-action-a10"},{"id":75,"name":"--sf-color-action-a30"},{"id":76,"name":"--sf-color-action-a5"},{"id":77,"name":"--sf-color-action-a50"},{"id":78,"name":"--sf-color-action-a80"},{"id":79,"name":"--sf-color-action-source-dark"},{"id":80,"name":"--sf-color-action-darker"},{"id":81,"name":"--sf-color-action-ghost"},{"id":82,"name":"--sf-color-action-source-light"},{"id":83,"name":"--sf-color-action-lighter"},{"id":84,"name":"--sf-color-action-muted"},{"id":85,"name":"--sf-color-action-subtle"},{"id":86,"name":"--sf-color-action-superdark"},{"id":87,"name":"--sf-color-action-superlight"},{"id":88,"name":"--sf-color-action-xdark"},{"id":89,"name":"--sf-color-action-xlight"},{"id":90,"name":"--sf-color-base"},{"id":91,"name":"--sf-color-base--active"},{"id":92,"name":"--sf-color-base--hover"},{"id":93,"name":"--sf-color-base-100"},{"id":94,"name":"--sf-color-base-200"},{"id":95,"name":"--sf-color-base-300"},{"id":96,"name":"--sf-color-base-400"},{"id":97,"name":"--sf-color-base-50"},{"id":98,"name":"--sf-color-base-500"},{"id":99,"name":"--sf-color-base-600"},{"id":100,"name":"--sf-color-base-700"},{"id":101,"name":"--sf-color-base-800"},{"id":102,"name":"--sf-color-base-900"},{"id":103,"name":"--sf-color-base-950"},{"id":104,"name":"--sf-color-base-a10"},{"id":105,"name":"--sf-color-base-a30"},{"id":106,"name":"--sf-color-base-a5"},{"id":107,"name":"--sf-color-base-a50"},{"id":108,"name":"--sf-color-base-a80"},{"id":109,"name":"--sf-color-base-source-dark"},{"id":110,"name":"--sf-color-base-darker","removed":true},{"id":111,"name":"--sf-color-base-ghost"},{"id":112,"name":"--sf-color-base-source-light"},{"id":113,"name":"--sf-color-base-lighter","removed":true},{"id":114,"name":"--sf-color-base-muted"},{"id":115,"name":"--sf-color-base-subtle"},{"id":116,"name":"--sf-color-base-superdark","removed":true},{"id":117,"name":"--sf-color-base-superlight","removed":true},{"id":118,"name":"--sf-color-base-xdark","removed":true},{"id":119,"name":"--sf-color-base-xlight","removed":true},{"id":120,"name":"--sf-color-bg"},{"id":121,"name":"--sf-color-bg--active"},{"id":122,"name":"--sf-color-bg--disabled"},{"id":123,"name":"--sf-color-bg--focus"},{"id":124,"name":"--sf-color-bg--hover"},{"id":125,"name":"--sf-color-bg--selected"},{"id":126,"name":"--sf-color-black"},{"id":127,"name":"--sf-color-border"},{"id":128,"name":"--sf-color-border--disabled"},{"id":129,"name":"--sf-color-border--focus"},{"id":130,"name":"--sf-color-border--strong"},{"id":131,"name":"--sf-color-border--subtle"},{"id":132,"name":"--sf-color-border--translucent"},{"id":133,"name":"--sf-color-code-bg"},{"id":134,"name":"--sf-color-code-text"},{"id":135,"name":"--sf-color-danger"},{"id":136,"name":"--sf-color-danger-source-dark"},{"id":137,"name":"--sf-color-danger-source-light"},{"id":138,"name":"--sf-color-danger-muted"},{"id":139,"name":"--sf-color-danger-strong"},{"id":140,"name":"--sf-color-danger-subtle"},{"id":141,"name":"--sf-color-dim"},{"id":142,"name":"--sf-color-error","removed":true},{"id":143,"name":"--sf-color-error-dark","removed":true},{"id":144,"name":"--sf-color-error-light","removed":true},{"id":145,"name":"--sf-color-error-muted","removed":true},{"id":146,"name":"--sf-color-error-strong","removed":true},{"id":147,"name":"--sf-color-error-subtle","removed":true},{"id":148,"name":"--sf-color-heading"},{"id":149,"name":"--sf-color-info"},{"id":150,"name":"--sf-color-info-source-dark"},{"id":151,"name":"--sf-color-info-source-light"},{"id":152,"name":"--sf-color-info-muted"},{"id":153,"name":"--sf-color-info-strong"},{"id":154,"name":"--sf-color-info-subtle"},{"id":155,"name":"--sf-color-inset"},{"id":156,"name":"--sf-color-inverse"},{"id":157,"name":"--sf-color-link"},{"id":158,"name":"--sf-color-link--active"},{"id":159,"name":"--sf-color-link--disabled"},{"id":160,"name":"--sf-color-link--hover"},{"id":161,"name":"--sf-color-link--underline"},{"id":162,"name":"--sf-color-link--visited"},{"id":163,"name":"--sf-color-mark-bg"},{"id":164,"name":"--sf-color-mark-text"},{"id":165,"name":"--sf-color-neutral"},{"id":166,"name":"--sf-color-neutral--active"},{"id":167,"name":"--sf-color-neutral--hover"},{"id":168,"name":"--sf-color-neutral-100"},{"id":169,"name":"--sf-color-neutral-200"},{"id":170,"name":"--sf-color-neutral-300"},{"id":171,"name":"--sf-color-neutral-400"},{"id":172,"name":"--sf-color-neutral-50"},{"id":173,"name":"--sf-color-neutral-500"},{"id":174,"name":"--sf-color-neutral-600"},{"id":175,"name":"--sf-color-neutral-700"},{"id":176,"name":"--sf-color-neutral-800"},{"id":177,"name":"--sf-color-neutral-900"},{"id":178,"name":"--sf-color-neutral-950"},{"id":179,"name":"--sf-color-neutral-a10"},{"id":180,"name":"--sf-color-neutral-a30"},{"id":181,"name":"--sf-color-neutral-a5"},{"id":182,"name":"--sf-color-neutral-a50"},{"id":183,"name":"--sf-color-neutral-a80"},{"id":184,"name":"--sf-color-neutral-source-dark"},{"id":185,"name":"--sf-color-neutral-darker"},{"id":186,"name":"--sf-color-neutral-ghost"},{"id":187,"name":"--sf-color-neutral-source-light"},{"id":188,"name":"--sf-color-neutral-lighter"},{"id":189,"name":"--sf-color-neutral-muted"},{"id":190,"name":"--sf-color-neutral-subtle"},{"id":191,"name":"--sf-color-neutral-superdark"},{"id":192,"name":"--sf-color-neutral-superlight"},{"id":193,"name":"--sf-color-neutral-xdark"},{"id":194,"name":"--sf-color-neutral-xlight"},{"id":195,"name":"--sf-color-overlay"},{"id":196,"name":"--sf-color-primary"},{"id":197,"name":"--sf-color-primary--active"},{"id":198,"name":"--sf-color-primary--hover"},{"id":199,"name":"--sf-color-primary-100"},{"id":200,"name":"--sf-color-primary-200"},{"id":201,"name":"--sf-color-primary-300"},{"id":202,"name":"--sf-color-primary-400"},{"id":203,"name":"--sf-color-primary-50"},{"id":204,"name":"--sf-color-primary-500"},{"id":205,"name":"--sf-color-primary-600"},{"id":206,"name":"--sf-color-primary-700"},{"id":207,"name":"--sf-color-primary-800"},{"id":208,"name":"--sf-color-primary-900"},{"id":209,"name":"--sf-color-primary-950"},{"id":210,"name":"--sf-color-primary-a10"},{"id":211,"name":"--sf-color-primary-a30"},{"id":212,"name":"--sf-color-primary-a5"},{"id":213,"name":"--sf-color-primary-a50"},{"id":214,"name":"--sf-color-primary-a80"},{"id":215,"name":"--sf-color-primary-source-dark"},{"id":216,"name":"--sf-color-primary-darker"},{"id":217,"name":"--sf-color-primary-ghost"},{"id":218,"name":"--sf-color-primary-source-light"},{"id":219,"name":"--sf-color-primary-lighter"},{"id":220,"name":"--sf-color-primary-muted"},{"id":221,"name":"--sf-color-primary-subtle"},{"id":222,"name":"--sf-color-primary-superdark"},{"id":223,"name":"--sf-color-primary-superlight"},{"id":224,"name":"--sf-color-primary-xdark"},{"id":225,"name":"--sf-color-primary-xlight"},{"id":226,"name":"--sf-color-raised"},{"id":227,"name":"--sf-color-scheme"},{"id":228,"name":"--sf-color-secondary"},{"id":229,"name":"--sf-color-secondary--active"},{"id":230,"name":"--sf-color-secondary--hover"},{"id":231,"name":"--sf-color-secondary-100"},{"id":232,"name":"--sf-color-secondary-200"},{"id":233,"name":"--sf-color-secondary-300"},{"id":234,"name":"--sf-color-secondary-400"},{"id":235,"name":"--sf-color-secondary-50"},{"id":236,"name":"--sf-color-secondary-500"},{"id":237,"name":"--sf-color-secondary-600"},{"id":238,"name":"--sf-color-secondary-700"},{"id":239,"name":"--sf-color-secondary-800"},{"id":240,"name":"--sf-color-secondary-900"},{"id":241,"name":"--sf-color-secondary-950"},{"id":242,"name":"--sf-color-secondary-a10"},{"id":243,"name":"--sf-color-secondary-a30"},{"id":244,"name":"--sf-color-secondary-a5"},{"id":245,"name":"--sf-color-secondary-a50"},{"id":246,"name":"--sf-color-secondary-a80"},{"id":247,"name":"--sf-color-secondary-source-dark"},{"id":248,"name":"--sf-color-secondary-darker"},{"id":249,"name":"--sf-color-secondary-ghost"},{"id":250,"name":"--sf-color-secondary-source-light"},{"id":251,"name":"--sf-color-secondary-lighter"},{"id":252,"name":"--sf-color-secondary-muted"},{"id":253,"name":"--sf-color-secondary-subtle"},{"id":254,"name":"--sf-color-secondary-superdark"},{"id":255,"name":"--sf-color-secondary-superlight"},{"id":256,"name":"--sf-color-secondary-xdark"},{"id":257,"name":"--sf-color-secondary-xlight"},{"id":258,"name":"--sf-color-selection-bg"},{"id":259,"name":"--sf-color-selection-text"},{"id":260,"name":"--sf-color-success"},{"id":261,"name":"--sf-color-success-source-dark"},{"id":262,"name":"--sf-color-success-source-light"},{"id":263,"name":"--sf-color-success-muted"},{"id":264,"name":"--sf-color-success-strong"},{"id":265,"name":"--sf-color-success-subtle"},{"id":266,"name":"--sf-color-surface"},{"id":267,"name":"--sf-color-tertiary"},{"id":268,"name":"--sf-color-tertiary--active"},{"id":269,"name":"--sf-color-tertiary--hover"},{"id":270,"name":"--sf-color-tertiary-100"},{"id":271,"name":"--sf-color-tertiary-200"},{"id":272,"name":"--sf-color-tertiary-300"},{"id":273,"name":"--sf-color-tertiary-400"},{"id":274,"name":"--sf-color-tertiary-50"},{"id":275,"name":"--sf-color-tertiary-500"},{"id":276,"name":"--sf-color-tertiary-600"},{"id":277,"name":"--sf-color-tertiary-700"},{"id":278,"name":"--sf-color-tertiary-800"},{"id":279,"name":"--sf-color-tertiary-900"},{"id":280,"name":"--sf-color-tertiary-950"},{"id":281,"name":"--sf-color-tertiary-a10"},{"id":282,"name":"--sf-color-tertiary-a30"},{"id":283,"name":"--sf-color-tertiary-a5"},{"id":284,"name":"--sf-color-tertiary-a50"},{"id":285,"name":"--sf-color-tertiary-a80"},{"id":286,"name":"--sf-color-tertiary-source-dark"},{"id":287,"name":"--sf-color-tertiary-darker"},{"id":288,"name":"--sf-color-tertiary-ghost"},{"id":289,"name":"--sf-color-tertiary-source-light"},{"id":290,"name":"--sf-color-tertiary-lighter"},{"id":291,"name":"--sf-color-tertiary-muted"},{"id":292,"name":"--sf-color-tertiary-subtle"},{"id":293,"name":"--sf-color-tertiary-superdark"},{"id":294,"name":"--sf-color-tertiary-superlight"},{"id":295,"name":"--sf-color-tertiary-xdark"},{"id":296,"name":"--sf-color-tertiary-xlight"},{"id":297,"name":"--sf-color-text"},{"id":298,"name":"--sf-color-text--disabled"},{"id":299,"name":"--sf-color-text--inverse"},{"id":300,"name":"--sf-color-text--muted"},{"id":301,"name":"--sf-color-text--on-action"},{"id":302,"name":"--sf-color-text--on-base"},{"id":303,"name":"--sf-color-text--on-danger"},{"id":304,"name":"--sf-color-text--on-error","removed":true},{"id":305,"name":"--sf-color-text--on-info"},{"id":306,"name":"--sf-color-text--on-inverse"},{"id":307,"name":"--sf-color-text--on-neutral"},{"id":308,"name":"--sf-color-text--on-primary"},{"id":309,"name":"--sf-color-text--on-secondary"},{"id":310,"name":"--sf-color-text--on-success"},{"id":311,"name":"--sf-color-text--on-tertiary"},{"id":312,"name":"--sf-color-text--on-warning"},{"id":313,"name":"--sf-color-text--placeholder"},{"id":314,"name":"--sf-color-text--secondary"},{"id":315,"name":"--sf-color-warning"},{"id":316,"name":"--sf-color-warning-source-dark"},{"id":317,"name":"--sf-color-warning-source-light"},{"id":318,"name":"--sf-color-warning-muted"},{"id":319,"name":"--sf-color-warning-strong"},{"id":320,"name":"--sf-color-warning-subtle"},{"id":321,"name":"--sf-color-white"},{"id":322,"name":"--sf-component-pad"},{"id":323,"name":"--sf-container-default"},{"id":324,"name":"--sf-container-full"},{"id":325,"name":"--sf-container-narrow"},{"id":326,"name":"--sf-container-prose"},{"id":327,"name":"--sf-container-wide"},{"id":328,"name":"--sf-content-gap"},{"id":329,"name":"--sf-content-intrinsic-size"},{"id":330,"name":"--sf-content-width"},{"id":331,"name":"--sf-contrast-bias"},{"id":332,"name":"--sf-contrast-threshold"},{"id":333,"name":"--sf-cover-min-height"},{"id":334,"name":"--sf-cover-padding"},{"id":335,"name":"--sf-current-font-weight"},{"id":336,"name":"--sf-display-l-line-height"},{"id":337,"name":"--sf-display-m-line-height"},{"id":338,"name":"--sf-display-s-line-height"},{"id":339,"name":"--sf-divider-color"},{"id":340,"name":"--sf-divider-gap"},{"id":341,"name":"--sf-divider-style"},{"id":342,"name":"--sf-divider-width"},{"id":343,"name":"--sf-drop-shadow-l"},{"id":344,"name":"--sf-drop-shadow-m"},{"id":345,"name":"--sf-drop-shadow-s"},{"id":346,"name":"--sf-duration-fast"},{"id":347,"name":"--sf-duration-instant"},{"id":348,"name":"--sf-duration-none"},{"id":349,"name":"--sf-duration-normal"},{"id":350,"name":"--sf-duration-slow"},{"id":351,"name":"--sf-duration-slower"},{"id":352,"name":"--sf-ease-bounce"},{"id":353,"name":"--sf-ease-elastic"},{"id":354,"name":"--sf-ease-in"},{"id":355,"name":"--sf-ease-in-out"},{"id":356,"name":"--sf-ease-linear"},{"id":357,"name":"--sf-ease-out"},{"id":358,"name":"--sf-ease-overshoot"},{"id":359,"name":"--sf-ease-spring"},{"id":360,"name":"--sf-equal-gap"},{"id":361,"name":"--sf-equal-min-col"},{"id":362,"name":"--sf-equal-min-col-2"},{"id":363,"name":"--sf-equal-min-col-3"},{"id":364,"name":"--sf-equal-min-col-4"},{"id":365,"name":"--sf-equal-min-col-6"},{"id":366,"name":"--sf-field-block"},{"id":367,"name":"--sf-field-padding-block"},{"id":368,"name":"--sf-field-padding-inline"},{"id":369,"name":"--sf-field-radius"},{"id":370,"name":"--sf-field-required-marker"},{"id":371,"name":"--sf-flow-space"},{"id":372,"name":"--sf-fluid-max-vw"},{"id":373,"name":"--sf-fluid-min-vw"},{"id":374,"name":"--sf-focus-ring-color"},{"id":375,"name":"--sf-focus-ring-offset"},{"id":376,"name":"--sf-focus-ring-shadow"},{"id":377,"name":"--sf-focus-ring-style"},{"id":378,"name":"--sf-focus-ring-width"},{"id":379,"name":"--sf-font-body"},{"id":380,"name":"--sf-font-display"},{"id":381,"name":"--sf-font-features"},{"id":382,"name":"--sf-font-geometric"},{"id":383,"name":"--sf-font-heading"},{"id":384,"name":"--sf-font-humanist"},{"id":385,"name":"--sf-font-mono"},{"id":386,"name":"--sf-font-numeric"},{"id":387,"name":"--sf-font-slab"},{"id":388,"name":"--sf-font-variation"},{"id":389,"name":"--sf-font-weight-body"},{"id":390,"name":"--sf-font-weight-bold"},{"id":391,"name":"--sf-font-weight-display"},{"id":392,"name":"--sf-font-weight-heading"},{"id":393,"name":"--sf-font-weight-interactive"},{"id":394,"name":"--sf-font-weight-light"},{"id":395,"name":"--sf-font-weight-medium"},{"id":396,"name":"--sf-font-weight-normal"},{"id":397,"name":"--sf-font-weight-semibold"},{"id":398,"name":"--sf-font-weight-strong"},{"id":399,"name":"--sf-frame-ratio"},{"id":400,"name":"--sf-gap"},{"id":401,"name":"--sf-gradient-brand"},{"id":402,"name":"--sf-gradient-fade--b"},{"id":403,"name":"--sf-gradient-fade--l"},{"id":404,"name":"--sf-gradient-fade--r"},{"id":405,"name":"--sf-gradient-fade--t"},{"id":406,"name":"--sf-gradient-primary"},{"id":407,"name":"--sf-gradient-secondary"},{"id":408,"name":"--sf-gradient-surface"},{"id":409,"name":"--sf-gradient-tertiary"},{"id":410,"name":"--sf-grid-gap"},{"id":411,"name":"--sf-grid-min"},{"id":412,"name":"--sf-grid-min-2xl"},{"id":413,"name":"--sf-grid-min-l"},{"id":414,"name":"--sf-grid-min-m"},{"id":415,"name":"--sf-grid-min-s"},{"id":416,"name":"--sf-grid-min-xl"},{"id":417,"name":"--sf-grid-min-xs"},{"id":418,"name":"--sf-gutter"},{"id":419,"name":"--sf-h1-font-weight"},{"id":420,"name":"--sf-h1-letter-spacing"},{"id":421,"name":"--sf-h1-line-height"},{"id":422,"name":"--sf-h1-max-width"},{"id":423,"name":"--sf-h1-size"},{"id":424,"name":"--sf-h2-font-weight"},{"id":425,"name":"--sf-h2-letter-spacing"},{"id":426,"name":"--sf-h2-line-height"},{"id":427,"name":"--sf-h2-max-width"},{"id":428,"name":"--sf-h2-size"},{"id":429,"name":"--sf-h3-font-weight"},{"id":430,"name":"--sf-h3-letter-spacing"},{"id":431,"name":"--sf-h3-line-height"},{"id":432,"name":"--sf-h3-max-width"},{"id":433,"name":"--sf-h3-size"},{"id":434,"name":"--sf-h4-font-weight"},{"id":435,"name":"--sf-h4-letter-spacing"},{"id":436,"name":"--sf-h4-line-height"},{"id":437,"name":"--sf-h4-max-width"},{"id":438,"name":"--sf-h4-size"},{"id":439,"name":"--sf-h5-font-weight"},{"id":440,"name":"--sf-h5-letter-spacing"},{"id":441,"name":"--sf-h5-line-height"},{"id":442,"name":"--sf-h5-max-width"},{"id":443,"name":"--sf-h5-size"},{"id":444,"name":"--sf-h6-font-weight"},{"id":445,"name":"--sf-h6-letter-spacing"},{"id":446,"name":"--sf-h6-line-height"},{"id":447,"name":"--sf-h6-max-width"},{"id":448,"name":"--sf-h6-size"},{"id":449,"name":"--sf-header-height"},{"id":450,"name":"--sf-header-height-desktop"},{"id":451,"name":"--sf-header-height-mobile"},{"id":452,"name":"--sf-heading-color"},{"id":453,"name":"--sf-heading-font-family"},{"id":454,"name":"--sf-heading-text-wrap"},{"id":455,"name":"--sf-icon-2xl"},{"id":456,"name":"--sf-icon-box-bg"},{"id":457,"name":"--sf-icon-box-border"},{"id":458,"name":"--sf-icon-box-pad"},{"id":459,"name":"--sf-icon-box-radius"},{"id":460,"name":"--sf-icon-l"},{"id":461,"name":"--sf-icon-m"},{"id":462,"name":"--sf-icon-s"},{"id":463,"name":"--sf-icon-xl"},{"id":464,"name":"--sf-icon-xs"},{"id":465,"name":"--sf-imposter-margin"},{"id":466,"name":"--sf-is-active"},{"id":467,"name":"--sf-is-current"},{"id":468,"name":"--sf-is-dark"},{"id":469,"name":"--sf-is-open"},{"id":470,"name":"--sf-is-pressed"},{"id":471,"name":"--sf-leading-normal"},{"id":472,"name":"--sf-leading-relaxed"},{"id":473,"name":"--sf-leading-snug"},{"id":474,"name":"--sf-leading-taper"},{"id":475,"name":"--sf-leading-tight"},{"id":476,"name":"--sf-line-clamp"},{"id":477,"name":"--sf-link-external-marker"},{"id":478,"name":"--sf-link-underline-offset"},{"id":479,"name":"--sf-link-underline-thickness"},{"id":480,"name":"--sf-lumlocker"},{"id":481,"name":"--sf-mask-scrim-end"},{"id":482,"name":"--sf-mask-scrim-start"},{"id":483,"name":"--sf-motion-scale"},{"id":484,"name":"--sf-object-fit"},{"id":485,"name":"--sf-object-position"},{"id":486,"name":"--sf-opacity-disabled"},{"id":487,"name":"--sf-opacity-muted"},{"id":488,"name":"--sf-optical-sizing"},{"id":489,"name":"--sf-palette-mix-100"},{"id":490,"name":"--sf-palette-mix-200"},{"id":491,"name":"--sf-palette-mix-300"},{"id":492,"name":"--sf-palette-mix-400"},{"id":493,"name":"--sf-palette-mix-50"},{"id":494,"name":"--sf-palette-mix-600"},{"id":495,"name":"--sf-palette-mix-700"},{"id":496,"name":"--sf-palette-mix-800"},{"id":497,"name":"--sf-palette-mix-900"},{"id":498,"name":"--sf-palette-mix-950"},{"id":499,"name":"--sf-print-base-size"},{"id":500,"name":"--sf-print-page-margin"},{"id":501,"name":"--sf-print-page-size"},{"id":502,"name":"--sf-prose-block-margin"},{"id":503,"name":"--sf-prose-blockquote-border"},{"id":504,"name":"--sf-prose-blockquote-padding"},{"id":505,"name":"--sf-prose-figcaption-size"},{"id":506,"name":"--sf-prose-figure-margin"},{"id":507,"name":"--sf-prose-heading-gap"},{"id":508,"name":"--sf-prose-hr-margin"},{"id":509,"name":"--sf-prose-list-gap"},{"id":510,"name":"--sf-prose-marker-color"},{"id":511,"name":"--sf-prose-media-margin"},{"id":512,"name":"--sf-prose-media-radius"},{"id":513,"name":"--sf-prose-nested-list-gap"},{"id":514,"name":"--sf-prose-paragraph"},{"id":515,"name":"--sf-prose-table-pad"},{"id":516,"name":"--sf-radius-2xl"},{"id":517,"name":"--sf-radius-2xs"},{"id":518,"name":"--sf-radius-3xl"},{"id":519,"name":"--sf-radius-4xl"},{"id":520,"name":"--sf-radius-full"},{"id":521,"name":"--sf-radius-l"},{"id":522,"name":"--sf-radius-m"},{"id":523,"name":"--sf-radius-none"},{"id":524,"name":"--sf-radius-outer"},{"id":525,"name":"--sf-radius-pill"},{"id":526,"name":"--sf-radius-s"},{"id":527,"name":"--sf-radius-scale"},{"id":528,"name":"--sf-radius-xl"},{"id":529,"name":"--sf-radius-xs"},{"id":530,"name":"--sf-ratio-3-2"},{"id":531,"name":"--sf-ratio-4-3"},{"id":532,"name":"--sf-ratio-cinema"},{"id":533,"name":"--sf-ratio-golden"},{"id":534,"name":"--sf-ratio-portrait"},{"id":535,"name":"--sf-ratio-square"},{"id":536,"name":"--sf-ratio-video"},{"id":537,"name":"--sf-reel-gap"},{"id":538,"name":"--sf-reel-height"},{"id":539,"name":"--sf-reel-item-width"},{"id":540,"name":"--sf-safe-bottom"},{"id":541,"name":"--sf-safe-left"},{"id":542,"name":"--sf-safe-right"},{"id":543,"name":"--sf-safe-top"},{"id":544,"name":"--sf-scrim-color"},{"id":545,"name":"--sf-scrim-direction"},{"id":546,"name":"--sf-scrim-gradient"},{"id":547,"name":"--sf-scrim-text-shadow"},{"id":548,"name":"--sf-scroll-shadow-size"},{"id":549,"name":"--sf-scroll-timeline-range-end"},{"id":550,"name":"--sf-scroll-timeline-range-start"},{"id":551,"name":"--sf-scrollbar-thumb"},{"id":552,"name":"--sf-scrollbar-track"},{"id":553,"name":"--sf-section-pad"},{"id":554,"name":"--sf-section-pad--2xl"},{"id":555,"name":"--sf-section-pad--l"},{"id":556,"name":"--sf-section-pad--m"},{"id":557,"name":"--sf-section-pad--s"},{"id":558,"name":"--sf-section-pad--xl"},{"id":559,"name":"--sf-section-pad--xs"},{"id":560,"name":"--sf-section-scale"},{"id":561,"name":"--sf-shadow-2xl"},{"id":562,"name":"--sf-shadow-color"},{"id":563,"name":"--sf-shadow-glow"},{"id":564,"name":"--sf-shadow-glow-color"},{"id":565,"name":"--sf-shadow-inner"},{"id":566,"name":"--sf-shadow-l"},{"id":567,"name":"--sf-shadow-lightness"},{"id":568,"name":"--sf-shadow-m"},{"id":569,"name":"--sf-shadow-none"},{"id":570,"name":"--sf-shadow-s"},{"id":571,"name":"--sf-shadow-strength"},{"id":572,"name":"--sf-shadow-xl"},{"id":573,"name":"--sf-shadow-xs"},{"id":574,"name":"--sf-sidebar-gap"},{"id":575,"name":"--sf-sidebar-min-width"},{"id":576,"name":"--sf-sidebar-width"},{"id":577,"name":"--sf-size-l"},{"id":578,"name":"--sf-size-m"},{"id":579,"name":"--sf-size-s"},{"id":580,"name":"--sf-size-xl"},{"id":581,"name":"--sf-size-xs"},{"id":582,"name":"--sf-space-2xl"},{"id":583,"name":"--sf-space-2xs"},{"id":584,"name":"--sf-space-3xl"},{"id":585,"name":"--sf-space-4xl"},{"id":586,"name":"--sf-space-base-max"},{"id":587,"name":"--sf-space-base-min"},{"id":588,"name":"--sf-space-l"},{"id":589,"name":"--sf-space-m"},{"id":590,"name":"--sf-space-none"},{"id":591,"name":"--sf-space-px"},{"id":592,"name":"--sf-space-ratio-max"},{"id":593,"name":"--sf-space-ratio-min"},{"id":594,"name":"--sf-space-s"},{"id":595,"name":"--sf-space-scale"},{"id":596,"name":"--sf-space-xl"},{"id":597,"name":"--sf-space-xs"},{"id":598,"name":"--sf-stack-gap"},{"id":599,"name":"--sf-state-pending-opacity"},{"id":600,"name":"--sf-sticky-offset"},{"id":601,"name":"--sf-sticky-offset-desktop"},{"id":602,"name":"--sf-sticky-offset-mobile"},{"id":603,"name":"--sf-surface-color"},{"id":604,"name":"--sf-switcher-gap"},{"id":605,"name":"--sf-switcher-threshold"},{"id":606,"name":"--sf-text-2xl"},{"id":607,"name":"--sf-text-2xl-font-weight"},{"id":608,"name":"--sf-text-2xl-letter-spacing"},{"id":609,"name":"--sf-text-2xl-line-height"},{"id":610,"name":"--sf-text-2xl-max-width"},{"id":611,"name":"--sf-text-2xs"},{"id":612,"name":"--sf-text-2xs-font-weight"},{"id":613,"name":"--sf-text-2xs-letter-spacing"},{"id":614,"name":"--sf-text-2xs-line-height"},{"id":615,"name":"--sf-text-2xs-max-width"},{"id":616,"name":"--sf-text-3xl"},{"id":617,"name":"--sf-text-3xl-font-weight"},{"id":618,"name":"--sf-text-3xl-letter-spacing"},{"id":619,"name":"--sf-text-3xl-line-height"},{"id":620,"name":"--sf-text-3xl-max-width"},{"id":621,"name":"--sf-text-4xl"},{"id":622,"name":"--sf-text-4xl-font-weight"},{"id":623,"name":"--sf-text-4xl-letter-spacing"},{"id":624,"name":"--sf-text-4xl-line-height"},{"id":625,"name":"--sf-text-4xl-max-width"},{"id":626,"name":"--sf-text-base-max"},{"id":627,"name":"--sf-text-base-min"},{"id":628,"name":"--sf-text-display-base-max"},{"id":629,"name":"--sf-text-display-base-min"},{"id":630,"name":"--sf-text-display-l"},{"id":631,"name":"--sf-text-display-m"},{"id":632,"name":"--sf-text-display-s"},{"id":633,"name":"--sf-text-display-scale"},{"id":634,"name":"--sf-text-l"},{"id":635,"name":"--sf-text-l-font-weight"},{"id":636,"name":"--sf-text-l-letter-spacing"},{"id":637,"name":"--sf-text-l-line-height"},{"id":638,"name":"--sf-text-l-max-width"},{"id":639,"name":"--sf-text-m"},{"id":640,"name":"--sf-text-m-font-weight"},{"id":641,"name":"--sf-text-m-letter-spacing"},{"id":642,"name":"--sf-text-m-line-height"},{"id":643,"name":"--sf-text-m-max-width"},{"id":644,"name":"--sf-text-ratio-max"},{"id":645,"name":"--sf-text-ratio-min"},{"id":646,"name":"--sf-text-s"},{"id":647,"name":"--sf-text-s-font-weight"},{"id":648,"name":"--sf-text-s-letter-spacing"},{"id":649,"name":"--sf-text-s-line-height"},{"id":650,"name":"--sf-text-s-max-width"},{"id":651,"name":"--sf-text-scale"},{"id":652,"name":"--sf-text-shadow-l"},{"id":653,"name":"--sf-text-shadow-m"},{"id":654,"name":"--sf-text-shadow-none"},{"id":655,"name":"--sf-text-shadow-s"},{"id":656,"name":"--sf-text-xl"},{"id":657,"name":"--sf-text-xl-font-weight"},{"id":658,"name":"--sf-text-xl-letter-spacing"},{"id":659,"name":"--sf-text-xl-line-height"},{"id":660,"name":"--sf-text-xl-max-width"},{"id":661,"name":"--sf-text-xs"},{"id":662,"name":"--sf-text-xs-font-weight"},{"id":663,"name":"--sf-text-xs-letter-spacing"},{"id":664,"name":"--sf-text-xs-line-height"},{"id":665,"name":"--sf-text-xs-max-width"},{"id":666,"name":"--sf-theme-transition-duration"},{"id":667,"name":"--sf-touch-target"},{"id":668,"name":"--sf-tracking-normal"},{"id":669,"name":"--sf-tracking-tight"},{"id":670,"name":"--sf-tracking-wide"},{"id":671,"name":"--sf-tracking-wider"},{"id":672,"name":"--sf-tracking-widest"},{"id":673,"name":"--sf-transition-colors"},{"id":674,"name":"--sf-transition-enter"},{"id":675,"name":"--sf-transition-exit"},{"id":676,"name":"--sf-transition-fast"},{"id":677,"name":"--sf-transition-form-field"},{"id":678,"name":"--sf-transition-opacity"},{"id":679,"name":"--sf-transition-overlay"},{"id":680,"name":"--sf-transition-shadow"},{"id":681,"name":"--sf-transition-slow"},{"id":682,"name":"--sf-transition-transform"},{"id":683,"name":"--sf-z-base"},{"id":684,"name":"--sf-z-below"},{"id":685,"name":"--sf-z-dropdown"},{"id":686,"name":"--sf-z-fixed"},{"id":687,"name":"--sf-z-modal"},{"id":688,"name":"--sf-z-overlay"},{"id":689,"name":"--sf-z-raised"},{"id":690,"name":"--sf-z-sticky"},{"id":691,"name":"--sf-z-toast"},{"id":692,"name":"--sf-z-tooltip"},{"id":693,"name":"--sf-bg-fit"},{"id":694,"name":"--sf-bg-inset"},{"id":695,"name":"--sf-bg-position"},{"id":696,"name":"--sf-bg-radius"},{"id":697,"name":"--sf-bg-z"},{"id":698,"name":"--sf-btn-padding-block"},{"id":699,"name":"--sf-btn-padding-inline"},{"id":700,"name":"--sf-btn-radius"}]'),Ef={_meta:Af,tokens:zf};/** * @license * SPDX-License-Identifier: Apache-2.0 - */const zs=Ef,Rf=typeof window.__SLASHED_FW_VERSION__<"u"?window.__SLASHED_FW_VERSION__:"0.0.0",Tf=65535,Df=new TextEncoder,Mf=new TextDecoder("utf-8",{fatal:!1}),Nf=65535,sr=32*1024,Wn=256*1024;function Ff(a){return Number.isInteger(a)&&a>=0&&a<=Nf}function jf(a){const e=new Map;for(const o of a?.tokens??[])o&&!o.removed&&typeof o.name=="string"&&Ff(o.id)&&e.set(o.name,o.id);return e}function Gf(a){const e=new Map;for(const o of a?.tokens??[])o&&typeof o.name=="string"&&Number.isInteger(o.id)&&e.set(o.id,o.name);return e}function Hf(a){let e="";for(let o=0;oTf||n.push({id:v,valueBytes:b})}if(n.length===0)return"";n.sort((m,h)=>m.id-h.id);let l=0;for(const m of n)l+=4+m.valueBytes.length;const i=new Uint8Array(l);let c=0;for(const{id:m,valueBytes:h}of n)i[c++]=m>>8&255,i[c++]=m&255,i[c++]=h.length>>8&255,i[c++]=h.length&255,i.set(h,c),c+=h.length;const f=Pf(i);if(f.length>sr)return console.warn(`[codec] compressed payload too large (${f.length} B > ${sr} B); refusing to encode.`),"";const p=new Uint8Array(1+f.length);return p[0]=2,p.set(f,1),Hf(p)}function Kf(a,e=zs,o={}){const n=String(a??"").trim();if(n==="")return{};const l=qf(n);if(!l||l.length===0)return{};if(l[0]!==2)return console.warn(`[codec] unknown config-code version ${l[0]} (expected 2); ignoring.`),{};const i=l.length-1;if(i>sr)return console.warn(`[codec] compressed payload too large (${i} B > ${sr} B); ignoring.`),{};let c;try{c=If(l.subarray(1))}catch{return console.warn("[codec] failed to decompress config; ignoring."),{}}if(!c||c.length===0)return{};if(c.length>Wn)return console.warn(`[codec] decompressed payload too large (${c.length} B > ${Wn} B); ignoring.`),{};const f=Gf(e),p=typeof o.sanitize=="function"?o.sanitize:b=>b,m=typeof o.isKnown=="function"?o.isKnown:()=>!0,h={};let v=0;try{for(;vc.length)throw new Error("truncated entry header");const b=c[v]<<8|c[v+1],k=c[v+2]<<8|c[v+3];if(v+=4,v+k>c.length)throw new Error("truncated value");const S=Mf.decode(c.subarray(v,v+k));v+=k;const E=f.get(b);if(E===void 0||!m(E))continue;const P=p(S);P!==""&&(h[E]=P)}}catch(b){return console.warn(`[codec] malformed config code; ignoring (${b.message}).`),{}}return h}function Fi(a){return a==null?"":String(a).replace(/\/\*[\s\S]*?\*\//g," ").replace(/[;{}]/g," ").replace(/[/*]{2,}/g," ").replace(/\s+/g," ").trim()}function Ho(a,e={}){const{mode:o="layer",banner:n=!0}=e,l=Object.keys(a).filter(m=>/^--sf-[\w-]+$/.test(m)).sort((m,h)=>m.localeCompare(h));if(l.length===0)return"";const i=l.map(m=>`${m}: ${Fi(a[m])};`),c=o==="layer"?" ":" ",f=i.map(m=>`${c}${m}`).join(` + */const Rs=Ef,Rf=typeof window.__SLASHED_FW_VERSION__<"u"?window.__SLASHED_FW_VERSION__:"0.0.0",Tf=65535,Df=new TextEncoder,Mf=new TextDecoder("utf-8",{fatal:!1}),Nf=65535,rr=32*1024,Zn=256*1024;function Ff(a){return Number.isInteger(a)&&a>=0&&a<=Nf}function jf(a){const e=new Map;for(const o of a?.tokens??[])o&&!o.removed&&typeof o.name=="string"&&Ff(o.id)&&e.set(o.name,o.id);return e}function Gf(a){const e=new Map;for(const o of a?.tokens??[])o&&typeof o.name=="string"&&Number.isInteger(o.id)&&e.set(o.id,o.name);return e}function Hf(a){let e="";for(let o=0;oTf||n.push({id:v,valueBytes:b})}if(n.length===0)return"";n.sort((m,h)=>m.id-h.id);let l=0;for(const m of n)l+=4+m.valueBytes.length;const i=new Uint8Array(l);let c=0;for(const{id:m,valueBytes:h}of n)i[c++]=m>>8&255,i[c++]=m&255,i[c++]=h.length>>8&255,i[c++]=h.length&255,i.set(h,c),c+=h.length;const d=Pf(i);if(d.length>rr)return console.warn(`[codec] compressed payload too large (${d.length} B > ${rr} B); refusing to encode.`),"";const p=new Uint8Array(1+d.length);return p[0]=2,p.set(d,1),Hf(p)}function Kf(a,e=Rs,o={}){const n=String(a??"").trim();if(n==="")return{};const l=qf(n);if(!l||l.length===0)return{};if(l[0]!==2)return console.warn(`[codec] unknown config-code version ${l[0]} (expected 2); ignoring.`),{};const i=l.length-1;if(i>rr)return console.warn(`[codec] compressed payload too large (${i} B > ${rr} B); ignoring.`),{};let c;try{c=If(l.subarray(1))}catch{return console.warn("[codec] failed to decompress config; ignoring."),{}}if(!c||c.length===0)return{};if(c.length>Zn)return console.warn(`[codec] decompressed payload too large (${c.length} B > ${Zn} B); ignoring.`),{};const d=Gf(e),p=typeof o.sanitize=="function"?o.sanitize:b=>b,m=typeof o.isKnown=="function"?o.isKnown:()=>!0,h={};let v=0;try{for(;vc.length)throw new Error("truncated entry header");const b=c[v]<<8|c[v+1],k=c[v+2]<<8|c[v+3];if(v+=4,v+k>c.length)throw new Error("truncated value");const S=Mf.decode(c.subarray(v,v+k));v+=k;const E=d.get(b);if(E===void 0||!m(E))continue;const I=p(S);I!==""&&(h[E]=I)}}catch(b){return console.warn(`[codec] malformed config code; ignoring (${b.message}).`),{}}return h}function Fi(a){return a==null?"":String(a).replace(/\/\*[\s\S]*?\*\//g," ").replace(/[;{}]/g," ").replace(/[/*]{2,}/g," ").replace(/\s+/g," ").trim()}function Ho(a,e={}){const{mode:o="layer",banner:n=!0}=e,l=Object.keys(a).filter(m=>/^--sf-[\w-]+$/.test(m)).sort((m,h)=>m.localeCompare(h));if(l.length===0)return"";const i=l.map(m=>`${m}: ${Fi(a[m])};`),c=o==="layer"?" ":" ",d=i.map(m=>`${c}${m}`).join(` `);let p="";return n&&(p+=`/* SLASHED override tokens v${Rf} — generated by the SLASHED configurator. Load this AFTER the SLASHED stylesheet. ${l.length} token${l.length===1?"":"s"} customised. */ `),o==="layer"?`${p}@layer slashed.overrides { :root { -${f} +${d} } } `:`${p}:root { -${f} +${d} } -`}function ji(a){return Vf(a,zs)}function Wf(a,e={}){const o=new Set(zs.tokens.map(c=>c.name)),n=e.isKnown??(c=>o.has(c));let l=String(a??"").trim();const i=l.match(/[#&]?c=([^&]+)/);return i&&(l=i[1]),Kf(l,zs,{sanitize:Fi,isKnown:n})}function Yf(a,e){const o=typeof window<"u"?window.location.href:"https://example.com/",n=e??o,l=new URL(n),i=ji(a);return l.hash=i?`c=${i}`:"",l.toString()}function Zf(a,e={}){const o=String(a??"");return o.includes("c=")?Wf(o,e):{}}const Gi="slashed-studio/overrides/v2",Xf=new Set(["--sf-text-base-min","--sf-text-base-max","--sf-text-ratio-min","--sf-text-ratio-max","--sf-text-scale","--sf-text-display-base-min","--sf-text-display-base-max","--sf-text-display-scale","--sf-fluid-min-vw","--sf-fluid-max-vw"]),Jf=new Set(["--sf-space-base-min","--sf-space-base-max","--sf-space-ratio-min","--sf-space-ratio-max","--sf-space-scale","--sf-fluid-min-vw","--sf-fluid-max-vw"]),Qf=[["2xs",-3],["xs",-2],["s",-1],["m",0],["l",1],["xl",2],["2xl",3],["3xl",4],["4xl",5]],$f=[["display-s",0],["display-m",1],["display-l",2]],eu=[["2xs",-3],["xs",-2],["s",-1],["m",0],["l",1],["xl",2],["2xl",3],["3xl",4],["4xl",5]],tu=[["2xs",1],["xs",2],["s",4],["m",8],["l",12],["xl",16],["2xl",24],["3xl",32],["4xl",48]],au=[["1",1],["2",2],["3",3],["4",4]],ou=[["instant",100],["fast",150],["normal",250],["slow",400],["slower",600]];function wa(a,e,o){const n=a[e];if(n===void 0)return o;const l=parseFloat(n);return Number.isFinite(l)?l:o}function Ya(a){if(!Number.isFinite(a))return"0";const o=a.toFixed(6).replace(/\.?0+$/,"");return o===""||o==="-"?"0":o}function Ur(a,e,o,n,l,i,c,f){const p=a*Math.pow(o,c)*f,m=e*Math.pow(n,c)*f;if(i<=l||Math.abs(p-m)<1e-9)return`${Ya(p)}rem`;const h=(m-p)/(i-l);return`clamp(${Ya(p)}rem, calc(${Ya(h)} * (100vw - ${Ya(l)}rem) + ${Ya(p)}rem), ${Ya(m)}rem)`}function Hi(a,{reduceMotion:e=!1}={}){const o={},n=Object.keys(a),l=n.some(v=>Xf.has(v)),i=n.some(v=>Jf.has(v)),c="--sf-radius-scale"in a,f="--sf-border-scale"in a,p="--sf-motion-scale"in a;if(!l&&!i&&!c&&!f&&!p)return o;const m=wa(a,"--sf-fluid-min-vw",22.5),h=wa(a,"--sf-fluid-max-vw",90);if(l){const v=wa(a,"--sf-text-base-min",1),b=wa(a,"--sf-text-base-max",1.25),k=wa(a,"--sf-text-ratio-min",1.25),S=wa(a,"--sf-text-ratio-max",1.333),E=wa(a,"--sf-text-scale",1);for(const[H,T]of Qf)o[`--sf-text-${H}`]=Ur(v,b,k,S,m,h,T,E);const P=wa(a,"--sf-text-display-base-min",2.4),B=wa(a,"--sf-text-display-base-max",3),I=wa(a,"--sf-text-display-scale",1);for(const[H,T]of $f)o[`--sf-text-${H}`]=Ur(P,B,k,S,m,h,T,I)}if(i){const v=wa(a,"--sf-space-base-min",1),b=wa(a,"--sf-space-base-max",2),k=wa(a,"--sf-space-ratio-min",1.25),S=wa(a,"--sf-space-ratio-max",1.333),E=wa(a,"--sf-space-scale",1);for(const[P,B]of eu)o[`--sf-space-${P}`]=Ur(v,b,k,S,m,h,B,E)}if(c){const v=wa(a,"--sf-radius-scale",1);for(const[b,k]of tu)o[`--sf-radius-${b}`]=`${Ya(k*v)}px`;o["--sf-radius-none"]="0",o["--sf-radius-full"]="9999px",o["--sf-radius-pill"]="var(--sf-radius-full)",o["--sf-radius-outer"]="calc(var(--sf-radius-m) + var(--sf-component-pad))"}if(f){const v=wa(a,"--sf-border-scale",1);for(const[b,k]of au)o[`--sf-border-width-${b}`]=`${Ya(k*v)}px`}if(p&&!e){const v=wa(a,"--sf-motion-scale",1);for(const[b,k]of ou)o[`--sf-duration-${b}`]=`${Ya(k*v)}ms`;o["--sf-duration-none"]="0ms",o["--sf-theme-transition-duration"]=`${Ya(300*v)}ms`;for(let b=1;b<=5;b+=1)o[`--sf-animation-delay-${b}`]=`${Ya(75*b*v)}ms`}return o}function yn(){return typeof window>"u"?null:window.slashedApp??null}function su(){return!!yn()}function qi(){if(typeof window>"u")return{};const a=yn();if(a)return a.overrides&&typeof a.overrides=="object"&&!Array.isArray(a.overrides)?{...a.overrides}:{};const e=window.location.hash;if(e?.includes("c="))try{return Zf(e)}catch{}const o=localStorage.getItem(Gi);if(o)try{return JSON.parse(o)}catch{}return{}}function Vi(a){if(typeof document>"u")return;let e=document.getElementById("sf-parent-overrides");e||(e=document.createElement("style"),e.id="sf-parent-overrides",document.head.appendChild(e));const o=typeof window<"u"&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,n=Hi(a,{reduceMotion:o}),l=Object.keys(n).length>0?{...n,...a}:a;e.textContent=Ho(l,{mode:"root",banner:!1})}async function ru(a,e){const o=(a.url??"").replace(/\/$/,""),n=new URL(o+"/tokens/overrides",window.location.href);if(n.origin!==window.location.origin)throw new Error("slashed: REST URL must be same-origin");const l=n.href,i=await fetch(l,{method:"POST",credentials:"same-origin",headers:{"Content-Type":"application/json","X-WP-Nonce":a.nonce??""},body:JSON.stringify({overrides:e})});if(!i.ok)throw new Error(`slashed: save failed ${i.status} ${i.statusText}`)}function nu(a){try{localStorage.setItem(Gi,JSON.stringify(a))}catch{}const e=ji(a),o=e?`c=${e}`:"";window.location.hash.replace("#","")!==o&&(window.location.hash=o)}async function Ki(a){if(typeof window>"u")return;const e=yn();if(e?.rest?.url){await ru(e.rest,{...a});return}nu(a)}let ia=null,_o=null,Zo=null,to=null,ao=null,Ro=null,To=null;const Es=new Map,Ha=va({value:0});let Yn=0;function Zn(a){if(ia===a){rr();return}_o&&_o.remove(),to&&to.remove(),ao&&ao.remove(),ia=a,_o=null,Zo=null,to=null,ao=null,Ro=null,To=null,rr()}function Xn(){return ia?.documentElement.getAttribute("data-theme")==="dark"?"dark":"light"}function rr(){Yn+=1,Ha.value=Yn,Es.clear()}function Wi(){if(!ia||!ia.body)return null;if(_o&&_o.ownerDocument===ia&&_o.isConnected)return _o;const a=ia.createElement("div");return a.setAttribute("data-sf-probe",""),a.style.cssText="position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;",ia.body.appendChild(a),_o=a,a}function vo(a){const e=Es.get(a);if(e!==void 0)return e;const o=Wi();if(!o||!ia)return"";o.style.color="",o.style.color=a;const n=ia.defaultView?.getComputedStyle(o).color??"";return Es.set(a,n),n}function lu(a){return!ia||!ia.body?null:a==="light"?(Ro&&Ro.isConnected||(to&&to.remove(),to=ia.createElement("div"),to.setAttribute("data-theme","light"),to.style.cssText="position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;",Ro=ia.createElement("div"),to.appendChild(Ro),ia.body.appendChild(to)),Ro):(To&&To.isConnected||(ao&&ao.remove(),ao=ia.createElement("div"),ao.setAttribute("data-theme","dark"),ao.style.cssText="position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;",To=ia.createElement("div"),ao.appendChild(To),ia.body.appendChild(ao)),To)}function iu(a,e){const o=`${e}\0${a}`,n=Es.get(o);if(n!==void 0)return n;const l=lu(e);if(!l||!ia)return"";l.style.color="",l.style.color=a;const i=ia.defaultView?.getComputedStyle(l).color??"";return Es.set(o,i),i}function cu(){if(!ia)return null;if(Zo&&Zo.canvas.ownerDocument===ia)return Zo;const a=ia.createElement("canvas");return a.width=1,a.height=1,Zo=a.getContext("2d",{willReadFrequently:!0}),Zo}function Is(a){const e=vo(a);if(!e)return null;const o=cu();if(!o)return null;o.clearRect(0,0,1,1),o.fillStyle=e,o.fillRect(0,0,1,1);try{const n=o.getImageData(0,0,1,1).data;return[n[0],n[1],n[2]]}catch{return null}}function du(a){const e=Wi();return!e||!ia?"":(e.style.background="",e.style.background=a,ia.defaultView?.getComputedStyle(e).backgroundImage??"")}const Jo=va({value:!1}),js=`/* SLASHED v0.6.30 — slashed.full.css */ +`}function ji(a){return Vf(a,Rs)}function Wf(a,e={}){const o=new Set(Rs.tokens.map(c=>c.name)),n=e.isKnown??(c=>o.has(c));let l=String(a??"").trim();const i=l.match(/[#&]?c=([^&]+)/);return i&&(l=i[1]),Kf(l,Rs,{sanitize:Fi,isKnown:n})}function Yf(a,e){const o=typeof window<"u"?window.location.href:"https://example.com/",n=e??o,l=new URL(n),i=ji(a);return l.hash=i?`c=${i}`:"",l.toString()}function Zf(a,e={}){const o=String(a??"");return o.includes("c=")?Wf(o,e):{}}const Gi="slashed-studio/overrides/v2",Xf=new Set(["--sf-text-base-min","--sf-text-base-max","--sf-text-ratio-min","--sf-text-ratio-max","--sf-text-scale","--sf-text-display-base-min","--sf-text-display-base-max","--sf-text-display-scale","--sf-fluid-min-vw","--sf-fluid-max-vw"]),Jf=new Set(["--sf-space-base-min","--sf-space-base-max","--sf-space-ratio-min","--sf-space-ratio-max","--sf-space-scale","--sf-fluid-min-vw","--sf-fluid-max-vw"]),Qf=[["2xs",-3],["xs",-2],["s",-1],["m",0],["l",1],["xl",2],["2xl",3],["3xl",4],["4xl",5]],$f=[["display-s",0],["display-m",1],["display-l",2]],eu=[["2xs",-3],["xs",-2],["s",-1],["m",0],["l",1],["xl",2],["2xl",3],["3xl",4],["4xl",5]],tu=[["2xs",1],["xs",2],["s",4],["m",8],["l",12],["xl",16],["2xl",24],["3xl",32],["4xl",48]],au=[["1",1],["2",2],["3",3],["4",4]],ou=[["instant",100],["fast",150],["normal",250],["slow",400],["slower",600]];function wa(a,e,o){const n=a[e];if(n===void 0)return o;const l=parseFloat(n);return Number.isFinite(l)?l:o}function Ya(a){if(!Number.isFinite(a))return"0";const o=a.toFixed(6).replace(/\.?0+$/,"");return o===""||o==="-"?"0":o}function Ar(a,e,o,n,l,i,c,d){const p=a*Math.pow(o,c)*d,m=e*Math.pow(n,c)*d;if(i<=l||Math.abs(p-m)<1e-9)return`${Ya(p)}rem`;const h=(m-p)/(i-l);return`clamp(${Ya(p)}rem, calc(${Ya(h)} * (100vw - ${Ya(l)}rem) + ${Ya(p)}rem), ${Ya(m)}rem)`}function Hi(a,{reduceMotion:e=!1}={}){const o={},n=Object.keys(a),l=n.some(v=>Xf.has(v)),i=n.some(v=>Jf.has(v)),c="--sf-radius-scale"in a,d="--sf-border-scale"in a,p="--sf-motion-scale"in a;if(!l&&!i&&!c&&!d&&!p)return o;const m=wa(a,"--sf-fluid-min-vw",22.5),h=wa(a,"--sf-fluid-max-vw",90);if(l){const v=wa(a,"--sf-text-base-min",1),b=wa(a,"--sf-text-base-max",1.25),k=wa(a,"--sf-text-ratio-min",1.25),S=wa(a,"--sf-text-ratio-max",1.333),E=wa(a,"--sf-text-scale",1);for(const[H,D]of Qf)o[`--sf-text-${H}`]=Ar(v,b,k,S,m,h,D,E);const I=wa(a,"--sf-text-display-base-min",2.4),P=wa(a,"--sf-text-display-base-max",3),B=wa(a,"--sf-text-display-scale",1);for(const[H,D]of $f)o[`--sf-text-${H}`]=Ar(I,P,k,S,m,h,D,B)}if(i){const v=wa(a,"--sf-space-base-min",1),b=wa(a,"--sf-space-base-max",2),k=wa(a,"--sf-space-ratio-min",1.25),S=wa(a,"--sf-space-ratio-max",1.333),E=wa(a,"--sf-space-scale",1);for(const[I,P]of eu)o[`--sf-space-${I}`]=Ar(v,b,k,S,m,h,P,E)}if(c){const v=wa(a,"--sf-radius-scale",1);for(const[b,k]of tu)o[`--sf-radius-${b}`]=`${Ya(k*v)}px`;o["--sf-radius-none"]="0",o["--sf-radius-full"]="9999px",o["--sf-radius-pill"]="var(--sf-radius-full)",o["--sf-radius-outer"]="calc(var(--sf-radius-m) + var(--sf-component-pad))"}if(d){const v=wa(a,"--sf-border-scale",1);for(const[b,k]of au)o[`--sf-border-width-${b}`]=`${Ya(k*v)}px`}if(p&&!e){const v=wa(a,"--sf-motion-scale",1);for(const[b,k]of ou)o[`--sf-duration-${b}`]=`${Ya(k*v)}ms`;o["--sf-duration-none"]="0ms",o["--sf-theme-transition-duration"]=`${Ya(300*v)}ms`;for(let b=1;b<=5;b+=1)o[`--sf-animation-delay-${b}`]=`${Ya(75*b*v)}ms`}return o}function kn(){return typeof window>"u"?null:window.slashedApp??null}function su(){return!!kn()}function qi(){if(typeof window>"u")return{};const a=kn();if(a)return a.overrides&&typeof a.overrides=="object"&&!Array.isArray(a.overrides)?{...a.overrides}:{};const e=window.location.hash;if(e?.includes("c="))try{return Zf(e)}catch{}const o=localStorage.getItem(Gi);if(o)try{return JSON.parse(o)}catch{}return{}}function Vi(a){if(typeof document>"u")return;let e=document.getElementById("sf-parent-overrides");e||(e=document.createElement("style"),e.id="sf-parent-overrides",document.head.appendChild(e));const o=typeof window<"u"&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,n=Hi(a,{reduceMotion:o}),l=Object.keys(n).length>0?{...n,...a}:a;e.textContent=Ho(l,{mode:"root",banner:!1})}async function ru(a,e){const o=(a.url??"").replace(/\/$/,""),n=new URL(o+"/tokens/overrides",window.location.href);if(n.origin!==window.location.origin)throw new Error("slashed: REST URL must be same-origin");const l=n.href,i=await fetch(l,{method:"POST",credentials:"same-origin",headers:{"Content-Type":"application/json","X-WP-Nonce":a.nonce??""},body:JSON.stringify({overrides:e})});if(!i.ok)throw new Error(`slashed: save failed ${i.status} ${i.statusText}`)}function nu(a){try{localStorage.setItem(Gi,JSON.stringify(a))}catch{}const e=ji(a),o=e?`c=${e}`:"";window.location.hash.replace("#","")!==o&&(window.location.hash=o)}async function Ki(a){if(typeof window>"u")return;const e=kn();if(e?.rest?.url){await ru(e.rest,{...a});return}nu(a)}let ia=null,_o=null,Zo=null,to=null,ao=null,Ro=null,To=null;const Ts=new Map,Ha=va({value:0});let Xn=0;function an(a){if(ia===a){nr();return}_o&&_o.remove(),to&&to.remove(),ao&&ao.remove(),ia=a,_o=null,Zo=null,to=null,ao=null,Ro=null,To=null,nr()}function Jn(){return ia?.documentElement.getAttribute("data-theme")==="dark"?"dark":"light"}function nr(){Xn+=1,Ha.value=Xn,Ts.clear()}function Wi(){if(!ia||!ia.body)return null;if(_o&&_o.ownerDocument===ia&&_o.isConnected)return _o;const a=ia.createElement("div");return a.setAttribute("data-sf-probe",""),a.style.cssText="position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;",ia.body.appendChild(a),_o=a,a}function vo(a){const e=Ts.get(a);if(e!==void 0)return e;const o=Wi();if(!o||!ia)return"";o.style.color="",o.style.color=a;const n=ia.defaultView?.getComputedStyle(o).color??"";return Ts.set(a,n),n}function lu(a){return!ia||!ia.body?null:a==="light"?(Ro&&Ro.isConnected||(to&&to.remove(),to=ia.createElement("div"),to.setAttribute("data-theme","light"),to.style.cssText="position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;",Ro=ia.createElement("div"),to.appendChild(Ro),ia.body.appendChild(to)),Ro):(To&&To.isConnected||(ao&&ao.remove(),ao=ia.createElement("div"),ao.setAttribute("data-theme","dark"),ao.style.cssText="position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;",To=ia.createElement("div"),ao.appendChild(To),ia.body.appendChild(ao)),To)}function iu(a,e){const o=`${e}\0${a}`,n=Ts.get(o);if(n!==void 0)return n;const l=lu(e);if(!l||!ia)return"";l.style.color="",l.style.color=a;const i=ia.defaultView?.getComputedStyle(l).color??"";return Ts.set(o,i),i}function cu(){if(!ia)return null;if(Zo&&Zo.canvas.ownerDocument===ia)return Zo;const a=ia.createElement("canvas");return a.width=1,a.height=1,Zo=a.getContext("2d",{willReadFrequently:!0}),Zo}function Bs(a){const e=vo(a);if(!e)return null;const o=cu();if(!o)return null;o.clearRect(0,0,1,1),o.fillStyle=e,o.fillRect(0,0,1,1);try{const n=o.getImageData(0,0,1,1).data;return[n[0],n[1],n[2]]}catch{return null}}function du(a){const e=Wi();return!e||!ia?"":(e.style.background="",e.style.background=a,ia.defaultView?.getComputedStyle(e).backgroundImage??"")}const Jo=va({value:!1}),Hs=`/* SLASHED v0.6.30 — slashed.full.css */ /* ─── core/layers.css ─── */ /* SLASHED — core/layers.css @@ -7017,7 +7017,7 @@ ${f} } */ } -`;var fu=g(""),uu=g(""),pu=g(''),mu=g(''),vu=g('
Light
Dark
'),hu=g(''),gu=g("
"),bu=g('
');function yu(a,e){ea(e,!0);function o(ae){const fe=typeof window<"u"&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,q=Hi(ae,{reduceMotion:fe});return Object.keys(q).length>0?{...q,...ae}:ae}const n=[{id:"marketing",label:"Marketing"},{id:"components",label:"Components"},{id:"stylescape",label:"Stylescape"}],l=new Set(["system-ui","-apple-system","BlinkMacSystemFont","ui-monospace","ui-serif","ui-sans-serif","sans-serif","serif","monospace","cursive","fantasy","Georgia","Times New Roman","Times","Impact","Arial Narrow","Arial","Helvetica","Helvetica Neue","Courier New","Courier","Fira Code","Verdana"]);function i(ae){if(!ae?.trim())return null;const fe=ae.trim().match(/^['"]([^'"]+)['"]/),X=(fe?fe[1]:ae.split(",")[0]).trim();return X&&!l.has(X)?X:null}function c(ae){const fe=new Set,q=[];for(const X of["--sf-font-body","--sf-font-heading","--sf-font-mono"]){const ue=i(ae[X]??"");!ue||fe.has(ue)||(fe.add(ue),q.push({name:ue,url:`https://fonts.googleapis.com/css2?family=${encodeURIComponent(ue)}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap`}))}return q}function f(ae,fe){for(const{name:q,url:X}of c(fe)){const ue=`gf-${q.replace(/\s+/g,"-").toLowerCase()}`;if(!ae.getElementById(ue)){const je=ae.createElement("link");je.id=ue,je.rel="stylesheet",je.href=X,ae.head.appendChild(je)}}}const p=[50,100,200,300,400,500,600,700,800,900,950],m=["xs","s","m","l","xl","2xl","full"],h=["xs","s","m","l","xl","2xl"],v=["3xs","2xs","xs","s","m","l","xl","2xl","3xl","4xl"],b=["display-l","display-m","display-s","2xl","xl","l","m","s","xs"];function k(){const ae=(fe,q,X)=>p.map(ue=>`.pv-sw--${fe}-${ue}{background:var(--sf-color-${q}-${ue}${X?`,var(--sf-color-${X}-${ue})`:""});}`).join("");return` +`;var fu=g(""),uu=g(""),pu=g(''),mu=g(''),vu=g('
Light
Dark
'),hu=g(''),gu=g("
"),bu=g('
');function yu(a,e){ea(e,!0);function o(T){const Q=typeof window<"u"&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,le=Hi(T,{reduceMotion:Q});return Object.keys(le).length>0?{...le,...T}:T}const n=[{id:"marketing",label:"Marketing"},{id:"components",label:"Components"},{id:"stylescape",label:"Stylescape"}],l=new Set(["system-ui","-apple-system","BlinkMacSystemFont","ui-monospace","ui-serif","ui-sans-serif","sans-serif","serif","monospace","cursive","fantasy","Georgia","Times New Roman","Times","Impact","Arial Narrow","Arial","Helvetica","Helvetica Neue","Courier New","Courier","Fira Code","Verdana"]);function i(T){if(!T?.trim())return null;const Q=T.trim().match(/^['"]([^'"]+)['"]/),ke=(Q?Q[1]:T.split(",")[0]).trim();return ke&&!l.has(ke)?ke:null}function c(T){const Q=new Set,le=[];for(const ke of["--sf-font-body","--sf-font-heading","--sf-font-mono"]){const Ce=i(T[ke]??"");!Ce||Q.has(Ce)||(Q.add(Ce),le.push({name:Ce,url:`https://fonts.googleapis.com/css2?family=${encodeURIComponent(Ce)}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap`}))}return le}function d(T,Q){for(const{name:le,url:ke}of c(Q)){const Ce=`gf-${le.replace(/\s+/g,"-").toLowerCase()}`;if(!T.getElementById(Ce)){const Ve=T.createElement("link");Ve.id=Ce,Ve.rel="stylesheet",Ve.href=ke,T.head.appendChild(Ve)}}}const p=[50,100,200,300,400,500,600,700,800,900,950],m=["xs","s","m","l","xl","2xl","full"],h=["xs","s","m","l","xl","2xl"],v=["3xs","2xs","xs","s","m","l","xl","2xl","3xl","4xl"],b=["display-l","display-m","display-s","2xl","xl","l","m","s","xs"];function k(){const T=(Q,le,ke)=>p.map(Ce=>`.pv-sw--${Q}-${Ce}{background:var(--sf-color-${le}-${Ce}${ke?`,var(--sf-color-${ke}-${Ce})`:""});}`).join("");return` /* Text roles (core ships no utility classes — these mirror semantic tokens) */ .pv-eyebrow{font-size:var(--sf-text-xs);font-weight:var(--sf-font-weight-heading);text-transform:uppercase;letter-spacing:0.08em;color:var(--sf-color-text--muted);} .pv-lead{font-size:var(--sf-text-l);color:var(--sf-color-text--secondary);} @@ -7065,13 +7065,13 @@ ${f} .pv-delta--down{color:var(--sf-color-danger);} .pv-delta--flat{color:var(--sf-color-warning);} /* Type-scale ramp — one class per scale step, all token-driven */ - ${b.map(fe=>`.pv-type--${fe}{font-size:var(--sf-text-${fe});line-height:var(--sf-leading-tight);}`).join("")} + ${b.map(Q=>`.pv-type--${Q}{font-size:var(--sf-text-${Q});line-height:var(--sf-leading-tight);}`).join("")} /* Colour ramps */ .pv-ramp{display:flex;gap:2px;block-size:36px;border-radius:var(--sf-radius-m);overflow:hidden;} .pv-ramp>*{flex:1;} - ${ae("primary","primary")} - ${ae("base","base")} - ${ae("action","action","primary")} + ${T("primary","primary")} + ${T("base","base")} + ${T("action","action","primary")} .pv-chip{display:block;inline-size:28px;block-size:28px;border-radius:var(--sf-radius-s);} .pv-chip--success{background:var(--sf-color-success);} .pv-chip--warning{background:var(--sf-color-warning);} @@ -7085,12 +7085,12 @@ ${f} .pv-grad--surface{background:var(--sf-gradient-surface);} /* Radius + shadow demo boxes */ .pv-demo-box{inline-size:52px;block-size:52px;background:var(--sf-color-primary-100);border:2px solid var(--sf-color-primary-300);} - ${m.map(fe=>`.pv-radius--${fe}{border-radius:var(--sf-radius-${fe});}`).join("")} + ${m.map(Q=>`.pv-radius--${Q}{border-radius:var(--sf-radius-${Q});}`).join("")} .pv-shadow-box{inline-size:52px;block-size:52px;background:var(--sf-color-surface);border-radius:var(--sf-radius-m);} - ${h.map(fe=>`.pv-shadow--${fe}{box-shadow:var(--sf-shadow-${fe});}`).join("")} + ${h.map(Q=>`.pv-shadow--${Q}{box-shadow:var(--sf-shadow-${Q});}`).join("")} /* Spacing scale bars */ .pv-space-bar{background:var(--sf-color-primary-400);border-radius:2px;min-inline-size:3px;min-block-size:3px;} - ${v.map(fe=>{const q=fe==="3xs"?"var(--sf-space-3xs,0.125rem)":`var(--sf-space-${fe})`;return`.pv-space--${fe}{inline-size:${q};block-size:${q};}`}).join("")} + ${v.map(Q=>{const le=Q==="3xs"?"var(--sf-space-3xs,0.125rem)":`var(--sf-space-${Q})`;return`.pv-space--${Q}{inline-size:${le};block-size:${le};}`}).join("")} .pv-swatch-label{font-size:var(--sf-text-2xs);font-family:var(--sf-font-mono);color:var(--sf-color-text--muted);} /* Stylescape demo layout */ .pv-heading{font-family:var(--sf-font-heading);color:var(--sf-color-heading);} @@ -7175,7 +7175,7 @@ ${f} Small caption text for metadata and secondary info.
-
`,P=(ae,fe)=>`
${ae}
${p.map(q=>``).join("")}
`,B=` +`,I=(T,Q)=>`
${T}
${p.map(le=>``).join("")}
`,P=`
@@ -7188,15 +7188,15 @@ ${f}
Color palette
- ${P("Primary","primary")} - ${P("Action","action")} - ${P("Neutral","base")} + ${I("Primary","primary")} + ${I("Action","action")} + ${I("Neutral","base")}
- ${[["success","Success"],["warning","Warning"],["danger","Danger"],["info","Info"]].map(([ae,fe])=>`
${fe}
`).join("")} + ${[["success","Success"],["warning","Warning"],["danger","Danger"],["info","Info"]].map(([T,Q])=>`
${Q}
`).join("")}
Gradients
- ${["primary","brand","tertiary","surface"].map(ae=>`
${ae}
`).join("")} + ${["primary","brand","tertiary","surface"].map(T=>`
${T}
`).join("")}
@@ -7230,13 +7230,13 @@ ${f}
Border radius
- ${m.map(ae=>`
${ae}
`).join("")} + ${m.map(T=>`
${T}
`).join("")}
Shadows
- ${h.map(ae=>`
${ae}
`).join("")} + ${h.map(T=>`
${T}
`).join("")}
@@ -7306,19 +7306,19 @@ ${f}
Spacing scale
- ${v.map(ae=>`
${ae}
`).join("")} + ${v.map(T=>`
${T}
`).join("")}
-`,I={marketing:S,components:E,stylescape:B};function H(ae,fe,q,X,ue){const je=Ho(o(ae),{mode:"root",banner:!1}),Ze=q==="slow"?"*, *::before, *::after { transition-duration: 200% !important; animation-duration: 200% !important; }":q==="none"?"*, *::before, *::after { transition: none !important; animation: none !important; }":"",U=c(ae).map(({url:W})=>` `).join(` +`,B={marketing:S,components:E,stylescape:P};function H(T,Q,le,ke,Ce){const Ve=Ho(o(T),{mode:"root",banner:!1}),Ke=le==="slow"?"*, *::before, *::after { transition-duration: 200% !important; animation-duration: 200% !important; }":le==="none"?"*, *::before, *::after { transition: none !important; animation: none !important; }":"",U=c(T).map(({url:W})=>` `).join(` `);return` - + SLASHED Preview ${U?U+` -`:""} - +`:""} + @@ -7326,35 +7326,35 @@ ${U?U+` html, body { height: 100%; margin: 0; padding: 0; } body { box-sizing: border-box; } ${k()} - ${Ze} + ${Ke} -${I[X]} +${B[ke]} -`}let T=K(!1),R=K(null),w=K(null),A=K(null),j=K(0),O=K(0),F=K(0),D=K(0),J=u(()=>H({},e.previewTheme,e.previewMotion,e.previewTemplate,js)),ye=u(()=>H({},"light",e.previewMotion,e.previewTemplate,js)),Ae=u(()=>H({},"dark",e.previewMotion,e.previewTemplate,js));xa(()=>{const ae=e.overrides,fe=e.previewTheme,q=t(j),X=Jo.value,ue=t(R);if(q===0||!ue)return;const je=ue.contentDocument;if(!je)return;const Ze=je.getElementById("slashed-overrides");Ze&&(Ze.textContent=Ho(o(ae),{mode:"root",banner:!1})),f(je,ae),je.documentElement.setAttribute("data-theme",fe),X?je.documentElement.setAttribute("data-lumlocker",""):je.documentElement.removeAttribute("data-lumlocker"),Zn(je),rr()}),xa(()=>{const ae=e.overrides,fe=t(O),q=t(F),X=Jo.value,ue=Ho(o(ae),{mode:"root",banner:!1}),je=Ze=>{X?Ze.documentElement.setAttribute("data-lumlocker",""):Ze.documentElement.removeAttribute("data-lumlocker")};if(t(w)&&fe>0){const Ze=t(w).contentDocument;if(Ze){const U=Ze.getElementById("slashed-overrides");U&&(U.textContent=ue),f(Ze,ae),je(Ze),Zn(Ze)}}if(t(A)&&q>0){const Ze=t(A).contentDocument;if(Ze){const U=Ze.getElementById("slashed-overrides");U&&(U.textContent=ue),f(Ze,ae),je(Ze)}}rr()});let Te=u(()=>e.previewWidth!=="fluid");function xe(){return e.previewWidth==="fluid"?"width:100%;height:100%":e.previewWidth==="mobile"?"width:390px;height:750px;border:1px solid rgba(255,255,255,0.12);border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)":e.previewWidth==="tablet"?"width:768px;height:900px;border:1px solid rgba(255,255,255,0.12);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)":"width:1024px;height:720px;border:1px solid rgba(255,255,255,0.12);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)"}var pe=bu(),Q=s(pe),le=s(Q);oe(le,21,()=>n,ae=>ae.id,(ae,fe)=>{var q=fu(),X=s(q);C(()=>{Ye(q,1,`shrink-0 px-2.5 py-0.5 rounded-md text-[10px] font-bold transition-all cursor-pointer ${e.previewTemplate===t(fe).id?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),y(X,t(fe).label)}),x("click",q,()=>e.onTemplateChange(t(fe).id)),d(ae,q)});var we=r(le,4);oe(we,20,()=>["fluid","desktop","tablet","mobile"],ae=>ae,(ae,fe)=>{var q=uu(),X=s(q);{var ue=U=>{sf(U,{class:"w-3 h-3"})},je=U=>{rf(U,{class:"w-3 h-3"})},Ze=U=>{tf(U,{class:"w-3 h-3"})};L(X,U=>{fe==="mobile"?U(ue):fe==="tablet"?U(je,1):U(Ze,-1)})}C(()=>{ee(q,"title",fe==="fluid"?"Full width":fe==="desktop"?"Desktop (1024px)":fe==="tablet"?"Tablet (768px)":"Mobile (390px)"),Ye(q,1,`p-1 rounded-md transition-all cursor-pointer ${e.previewWidth===fe?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`)}),x("click",q,()=>e.onWidthChange(fe)),d(ae,q)});var ze=r(we,2),N=s(ze),G=s(N);jn(G,{class:"w-3 h-3"});var Z=r(N,2),re=s(Z);Fn(re,{class:"w-3 h-3"});var Y=r(Z,2),de=s(Y);Zd(de,{class:"w-3 h-3"});var be=r(ze,4),he=s(be);he.value=he.__value="normal";var ne=r(he);ne.value=ne.__value="slow";var Pe=r(ne);Pe.value=Pe.__value="none";var qe;Na(be);var at=r(be,2),Ke=s(at);af(Ke,{class:"w-3 h-3"});var et=r(at,2),ft=s(et);Xd(ft,{class:"w-3 h-3"});var gt=r(Q,2),Ot=s(gt);{var _t=ae=>{var fe=vu(),q=s(fe),X=s(q),ue=s(X),je=s(ue);jn(je,{class:"w-2.5 h-2.5"});var Ze=r(X,2);wr(Ze,()=>t(D),vt=>{var He=pu();bo(He,ct=>_(w,ct),()=>t(w)),C(()=>ee(He,"srcdoc",t(ye))),go("load",He,()=>{_(O,t(O)+1)}),d(vt,He)});var U=r(q,2),W=s(U),se=s(W),Oe=s(se);Fn(Oe,{class:"w-2.5 h-2.5"});var Ce=r(W,2);wr(Ce,()=>t(D),vt=>{var He=mu();bo(He,ct=>_(A,ct),()=>t(A)),C(()=>ee(He,"srcdoc",t(Ae))),go("load",He,()=>{_(F,t(F)+1)}),d(vt,He)}),d(ae,fe)},mt=ae=>{var fe=gu(),q=s(fe);wr(q,()=>t(D),X=>{var ue=hu();bo(ue,je=>_(R,je),()=>t(R)),C(()=>ee(ue,"srcdoc",t(J))),go("load",ue,()=>{_(j,t(j)+1)}),d(X,ue)}),C(X=>{it(fe,X),Ye(fe,1,mo(t(Te)?"":"w-full h-full"))},[()=>xe()]),d(ae,fe)};L(Ot,ae=>{t(T)?ae(_t):ae(mt,-1)})}C(()=>{Ye(N,1,`p-1 rounded-md transition-all cursor-pointer ${!t(T)&&e.previewTheme==="light"?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),Ye(Z,1,`p-1 rounded-md transition-all cursor-pointer ${!t(T)&&e.previewTheme==="dark"?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),Ye(Y,1,`p-1 rounded-md transition-all cursor-pointer ${t(T)?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),qe!==(qe=e.previewMotion)&&(be.value=(be.__value=e.previewMotion)??"",Ia(be,e.previewMotion)),Ye(gt,1,`flex-1 min-h-0 flex overflow-auto ${t(Te)&&!t(T)?"items-center justify-center bg-[#06060a]":""}`)}),x("click",N,()=>{_(T,!1),e.onThemeChange("light")}),x("click",Z,()=>{_(T,!1),e.onThemeChange("dark")}),x("click",Y,()=>{_(T,!t(T))}),x("change",be,ae=>e.onMotionChange(ae.target.value)),x("click",at,()=>{_(j,0),_(O,0),_(F,0),_(D,t(D)+1)}),x("click",et,()=>{const ae=new Blob([H(e.overrides,e.previewTheme,e.previewMotion,e.previewTemplate,js)],{type:"text/html"}),fe=URL.createObjectURL(ae);window.open(fe,"_blank")}),d(a,pe),ta()}oa(["click","change"]);const xu=["prose","flow-space","line-clamp","aspect","scroll-shadow","scrim","surface-color","content-intrinsic"],ku=["color","contrast","palette-mix","lumlocker","gradient"],wu=["font","--sf-text","leading","tracking","weight","body-font","heading-font","body-em","body-text","heading-text","display-l-","display-m-","-h1-","-h2-","-h3-","-h4-","-h5-","-h6-","link-","optical-sizing","fluid-min-vw","fluid-max-vw"],_u=["space","section","gutter","content-gap","component-pad"],Cu=["container","layout","grid","breakpoint","measure","column","header-height","touch-target","bento","cluster","cover-min","equal-min","frame","ratio-","reel","safe-","sidebar","switcher","-bg-"],Ou=["radius","border-width","border-scale","border-style","divider"],Su=["shadow"],Lu=["motion","duration","easing","ease","scroll-timeline"],Pu=["filter","blur","backdrop","opacity","effect"],Iu=["z-","cursor","ring","focus","outline","selection","icon","is-active","is-current","is-open","is-pressed","field-required","object-fit","object-position","print-","scrollbar","size-"],Bu={macros:xu,colors:ku,typography:wu,spacing:_u,layout:Cu,borders:Ou,shadows:Su,motion:Lu,effects:Pu,misc:Iu},Yi=Bu;function xn(a){for(const[e,o]of Object.entries(Yi))if(e!=="misc"&&o.some(n=>a.includes(n)))return e;return"misc"}const Zi="slashed-studio/themes/v1";function Uu(a){return!!a&&typeof a=="object"&&!Array.isArray(a)&&Object.values(a).every(e=>typeof e=="string")}function Au(a){if(!a||typeof a!="object"||Array.isArray(a))return!1;const e=a;return typeof e.id=="string"&&typeof e.name=="string"&&typeof e.icon=="string"&&typeof e.blurb=="string"&&Uu(e.overrides)}function nr(){if(typeof window>"u")return[];try{const a=localStorage.getItem(Zi);if(!a)return[];const e=JSON.parse(a);return Array.isArray(e)?e.filter(Au):[]}catch{return[]}}function Xi(a){if(typeof window>"u")return!1;try{return localStorage.setItem(Zi,JSON.stringify(a)),!0}catch{return!1}}function Ji(){return nr()}function Qi(a,e){const o=nr(),n=a.trim()||"Untitled theme",l={id:`theme-${Date.now()}-${Math.random().toString(36).slice(2,7)}`,name:n,icon:"🎨",blurb:`${Object.keys(e).length} override${Object.keys(e).length===1?"":"s"}`,overrides:{...e}},i=[...o,l];return Xi(i)?i:o}function zu(a){const e=nr().filter(o=>o.id!==a);return Xi(e)?e:nr()}var Eu=g('You have .',1),Ru=g(''),Tu=g(' '),Du=g(''),Mu=g(''),Nu=g('

No saved themes yet. Configure tokens, then save.

'),Fu=g(''),ju=g('
'),Gu=g('
SLASHED Studio

Configure every SLASHED design token visually. Changes appear live in the preview.

Token domains
Tools
Saved themes
');function Hu(a,e){ea(e,!0);const o=[{id:"colors",icon:xi,label:"Colors",desc:"Brand, semantic & neutral palettes"},{id:"typography",icon:Ii,label:"Typography",desc:"Font families & fluid type scale"},{id:"spacing",icon:Ci,label:"Spacing",desc:"Space scale & section rhythm"},{id:"layout",icon:ki,label:"Layout",desc:"Containers, grids & primitives"},{id:"borders",icon:Li,label:"Borders",desc:"Corner radius & border widths"},{id:"shadows",icon:gi,label:"Shadows",desc:"Elevation & depth control"},{id:"motion",icon:Ui,label:"Motion",desc:"Duration & easing curves"},{id:"effects",icon:Xr,label:"Effects",desc:"Blur, opacity & scrollbars"},{id:"macros",icon:mi,label:"Macros",desc:"Flow, prose, aspect & scrim"},{id:"misc",icon:wi,label:"Misc",desc:"Z-index & remaining tokens"}],n=[{id:"themes",icon:Pi,label:"Themes",desc:"Save & re-apply configurations"},{id:"wcag",icon:Oi,label:"WCAG",desc:"Contrast checker & fixes"},{id:"setup",icon:yi,label:"Install",desc:"Export overrides & setup"},{id:"cheatsheet",icon:vi,label:"Classes",desc:"Utility class reference"}],l={colors:["color","contrast","focus-ring"],typography:["text","font","leading","tracking","h1","h2","h3","h4","h5","h6","body"],spacing:["space","gap","gutter","section"],layout:["container","grid","sidebar","bento","reel","cluster","stack","frame"],borders:["radius","border","divider","btn-","field-"],shadows:["shadow"],motion:["motion","duration","ease","animation","transition"],effects:["blur","opacity","scrollbar","scrim","backdrop"],macros:["flow","prose","aspect","scroll-shadow","line-clamp"],misc:["z-"]};function i(Q){const le=l[Q];return le?Object.keys(e.overrides).filter(we=>le.some(ze=>we.includes(ze))).length:0}let c=u(()=>Object.keys(e.overrides).length),f=K(va(Ji())),p=K("");function m(){t(c)!==0&&(_(f,Qi(t(p),e.overrides),!0),_(p,""))}var h=Gu(),v=s(h),b=s(v),k=s(b);Xr(k,{class:"w-4 h-4 text-indigo-400"});var S=r(b,2),E=r(s(S));{var P=Q=>{var le=Eu(),we=r(ce(le)),ze=s(we);C(()=>y(ze,`${t(c)??""} active override${t(c)!==1?"s":""}`)),d(Q,le)},B=Q=>{var le=ls("Pick any domain below to get started.");d(Q,le)};L(E,Q=>{t(c)>0?Q(P):Q(B,-1)})}var I=r(S,2);{var H=Q=>{var le=Ru();x("click",le,function(...we){e.onResetAll?.apply(this,we)}),d(Q,le)};L(I,Q=>{t(c)>0&&Q(H)})}var T=r(v,2),R=r(s(T),2);oe(R,21,()=>o,Q=>Q.id,(Q,le)=>{const we=u(()=>i(t(le).id)),ze=u(()=>t(le).icon);var N=Du(),G=s(N),Z=s(G);or(Z,()=>t(ze),(qe,at)=>{at(qe,{class:"w-4 h-4"})});var re=r(G,2),Y=s(re),de=s(Y),be=r(Y,2),he=s(be),ne=r(re,2);{var Pe=qe=>{var at=Tu(),Ke=s(at);C(()=>y(Ke,t(we))),d(qe,at)};L(ne,qe=>{t(we)>0&&qe(Pe)})}C(()=>{y(de,t(le).label),y(he,t(le).desc)}),x("click",N,()=>e.onSelect(t(le).id)),d(Q,N)});var w=r(T,2),A=r(s(w),2);oe(A,21,()=>n,Q=>Q.id,(Q,le)=>{const we=u(()=>t(le).icon);var ze=Mu(),N=s(ze),G=s(N);or(G,()=>t(we),(he,ne)=>{ne(he,{class:"w-4 h-4"})});var Z=r(N,2),re=s(Z),Y=s(re),de=r(re,2),be=s(de);C(()=>{y(Y,t(le).label),y(be,t(le).desc)}),x("click",ze,()=>e.onSelect(t(le).id)),d(Q,ze)});var j=r(w,2),O=s(j),F=r(s(O),2),D=r(O,2),J=s(D),ye=r(J,2),Ae=s(ye);hr(Ae,{class:"w-3 h-3"});var Te=r(D,2);{var xe=Q=>{var le=Nu();d(Q,le)},pe=Q=>{var le=ju();oe(le,21,()=>t(f).slice(0,6),we=>we.id,(we,ze)=>{var N=Fu(),G=s(N),Z=s(G),re=r(G,2),Y=s(re),de=s(Y),be=r(Y,2),he=s(be);C(()=>{y(Z,t(ze).icon),y(de,t(ze).name),y(he,t(ze).blurb)}),x("click",N,()=>e.onApplyTheme(t(ze).overrides)),d(we,N)}),d(Q,le)};L(Te,Q=>{t(f).length===0?Q(xe):Q(pe,-1)})}C(()=>ye.disabled=t(c)===0),x("click",F,()=>e.onSelect("themes")),x("keydown",J,Q=>{Q.key==="Enter"&&m()}),vr(J,()=>t(p),Q=>_(p,Q)),x("click",ye,m),d(a,h),ta()}oa(["click","keydown"]);const Vo={colors:[{name:"--sf-contrast-bias",label:"Contrast bias",help:"Shifts the lightness threshold used by text-on-color pairing toward darker (negative) or lighter (positive) text.",default:0,min:-1,max:1,step:.05,driving:3},{name:"--sf-contrast-threshold",label:"Contrast threshold",help:"OKLCH lightness above which a swatch is considered 'light' (gets dark text). Below = light text.",default:.6,min:0,max:1,step:.01,driving:11},{name:"--sf-focus-ring-width",label:"Focus ring width",help:"Thickness of the focus ring on every interactive element.",default:2,min:0,max:6,step:.5,unit:"px",driving:1}],typography:[{name:"--sf-text-scale",label:"Text scale",help:"Multiplier applied to the entire fluid text ramp (2xs … 2xl).",default:1,min:.5,max:2,step:.05,driving:9},{name:"--sf-text-display-scale",label:"Display scale",help:"Multiplier applied to the display ramp (display-s, display-m, display-l).",default:1,min:.5,max:2,step:.05,driving:3}],spacing:[{name:"--sf-space-scale",label:"Space scale",help:"Multiplier applied to every fluid spacing step. One drag moves 45 tokens.",default:1,min:.5,max:2,step:.05,driving:45},{name:"--sf-section-scale",label:"Section scale",help:"Multiplier applied to section paddings only.",default:1,min:.5,max:2,step:.05,driving:6}],borders:[{name:"--sf-radius-scale",label:"Radius scale",help:"Multiplier applied to every radius step (set to 0 for sharp brutalist corners).",default:1,min:0,max:2,step:.05,driving:8}],shadows:[{name:"--sf-shadow-strength",label:"Shadow strength",help:"Base shadow opacity. Auto-boosted +0.17 in dark mode. Slider sets the light-mode base.",default:.08,min:0,max:.5,step:.01,driving:14,encode:a=>`calc(${a} + var(--sf-is-dark) * 0.17)`,decode:a=>{const e=/^calc\(\s*([\d.e+-]+)/.exec(String(a));return e?parseFloat(e[1]):NaN}}],motion:[{name:"--sf-motion-scale",label:"Motion scale",help:"Speed multiplier on every duration. Set to 0 to effectively disable motion.",default:1,min:0,max:2,step:.05,driving:13}]};/** +`}let D=K(!1),R=K(null),C=K(null),A=K(null),q=K(0),O=K(0),F=K(0),M=K(0),J=u(()=>H({},e.previewTheme,e.previewMotion,e.previewTemplate,Hs)),be=u(()=>H({},"light",e.previewMotion,e.previewTemplate,Hs)),ze=u(()=>H({},"dark",e.previewMotion,e.previewTemplate,Hs));xa(()=>{const T=e.overrides,Q=e.previewTheme,le=t(q),ke=Jo.value,Ce=t(R);if(le===0||!Ce)return;const Ve=Ce.contentDocument;if(!Ve)return;const Ke=Ve.getElementById("slashed-overrides");Ke&&(Ke.textContent=Ho(o(T),{mode:"root",banner:!1})),d(Ve,T),Ve.documentElement.setAttribute("data-theme",Q),ke?Ve.documentElement.setAttribute("data-lumlocker",""):Ve.documentElement.removeAttribute("data-lumlocker"),an(Ve),nr()}),xa(()=>{const T=e.overrides,Q=t(O),le=t(F),ke=Jo.value,Ce=Ho(o(T),{mode:"root",banner:!1}),Ve=Ke=>{ke?Ke.documentElement.setAttribute("data-lumlocker",""):Ke.documentElement.removeAttribute("data-lumlocker")};if(t(C)&&Q>0){const Ke=t(C).contentDocument;if(Ke){const U=Ke.getElementById("slashed-overrides");U&&(U.textContent=Ce),d(Ke,T),Ve(Ke),an(Ke)}}if(t(A)&&le>0){const Ke=t(A).contentDocument;if(Ke){const U=Ke.getElementById("slashed-overrides");U&&(U.textContent=Ce),d(Ke,T),Ve(Ke)}}nr()});let Me=u(()=>e.previewWidth!=="fluid");function ye(){return e.previewWidth==="fluid"?"width:100%;height:100%":e.previewWidth==="mobile"?"width:390px;height:750px;border:1px solid rgba(255,255,255,0.12);border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)":e.previewWidth==="tablet"?"width:768px;height:900px;border:1px solid rgba(255,255,255,0.12);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)":"width:1024px;height:720px;border:1px solid rgba(255,255,255,0.12);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)"}var ue=bu(),X=s(ue),ne=s(X);ae(ne,21,()=>n,T=>T.id,(T,Q)=>{var le=fu(),ke=s(le);_(()=>{Xe(le,1,`shrink-0 px-2.5 py-0.5 rounded-md text-[10px] font-bold transition-all cursor-pointer ${e.previewTemplate===t(Q).id?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),y(ke,t(Q).label)}),x("click",le,()=>e.onTemplateChange(t(Q).id)),f(T,le)});var _e=r(ne,4);ae(_e,20,()=>["fluid","desktop","tablet","mobile"],T=>T,(T,Q)=>{var le=uu(),ke=s(le);{var Ce=U=>{sf(U,{class:"w-3 h-3"})},Ve=U=>{rf(U,{class:"w-3 h-3"})},Ke=U=>{tf(U,{class:"w-3 h-3"})};L(ke,U=>{Q==="mobile"?U(Ce):Q==="tablet"?U(Ve,1):U(Ke,-1)})}_(()=>{ee(le,"title",Q==="fluid"?"Full width":Q==="desktop"?"Desktop (1024px)":Q==="tablet"?"Tablet (768px)":"Mobile (390px)"),Xe(le,1,`p-1 rounded-md transition-all cursor-pointer ${e.previewWidth===Q?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`)}),x("click",le,()=>e.onWidthChange(Q)),f(T,le)});var Ae=r(_e,2),j=s(Ae),G=s(j);Hn(G,{class:"w-3 h-3"});var Z=r(j,2),se=s(Z);Gn(se,{class:"w-3 h-3"});var Y=r(Z,2),de=s(Y);Zd(de,{class:"w-3 h-3"});var ge=r(Ae,4),ve=s(ge);ve.value=ve.__value="normal";var re=r(ve);re.value=re.__value="slow";var Ie=r(re);Ie.value=Ie.__value="none";var qe;Na(ge);var rt=r(ge,2),et=s(rt);af(et,{class:"w-3 h-3"});var tt=r(rt,2),vt=s(tt);Xd(vt,{class:"w-3 h-3"});var gt=r(X,2),Ot=s(gt);{var _t=T=>{var Q=vu(),le=s(Q),ke=s(le),Ce=s(ke),Ve=s(Ce);Hn(Ve,{class:"w-2.5 h-2.5"});var Ke=r(ke,2);_r(Ke,()=>t(M),mt=>{var He=pu();bo(He,dt=>w(C,dt),()=>t(C)),_(()=>ee(He,"srcdoc",t(be))),go("load",He,()=>{w(O,t(O)+1)}),f(mt,He)});var U=r(le,2),W=s(U),oe=s(W),Ee=s(oe);Gn(Ee,{class:"w-2.5 h-2.5"});var Le=r(W,2);_r(Le,()=>t(M),mt=>{var He=mu();bo(He,dt=>w(A,dt),()=>t(A)),_(()=>ee(He,"srcdoc",t(ze))),go("load",He,()=>{w(F,t(F)+1)}),f(mt,He)}),f(T,Q)},fe=T=>{var Q=gu(),le=s(Q);_r(le,()=>t(M),ke=>{var Ce=hu();bo(Ce,Ve=>w(R,Ve),()=>t(R)),_(()=>ee(Ce,"srcdoc",t(J))),go("load",Ce,()=>{w(q,t(q)+1)}),f(ke,Ce)}),_(ke=>{ct(Q,ke),Xe(Q,1,mo(t(Me)?"":"w-full h-full"))},[()=>ye()]),f(T,Q)};L(Ot,T=>{t(D)?T(_t):T(fe,-1)})}_(()=>{Xe(j,1,`p-1 rounded-md transition-all cursor-pointer ${!t(D)&&e.previewTheme==="light"?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),Xe(Z,1,`p-1 rounded-md transition-all cursor-pointer ${!t(D)&&e.previewTheme==="dark"?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),Xe(Y,1,`p-1 rounded-md transition-all cursor-pointer ${t(D)?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),qe!==(qe=e.previewMotion)&&(ge.value=(ge.__value=e.previewMotion)??"",Ia(ge,e.previewMotion)),Xe(gt,1,`flex-1 min-h-0 flex overflow-auto ${t(Me)&&!t(D)?"items-center justify-center bg-[#06060a]":""}`)}),x("click",j,()=>{w(D,!1),e.onThemeChange("light")}),x("click",Z,()=>{w(D,!1),e.onThemeChange("dark")}),x("click",Y,()=>{w(D,!t(D))}),x("change",ge,T=>e.onMotionChange(T.target.value)),x("click",rt,()=>{w(q,0),w(O,0),w(F,0),w(M,t(M)+1)}),x("click",tt,()=>{const T=new Blob([H(e.overrides,e.previewTheme,e.previewMotion,e.previewTemplate,Hs)],{type:"text/html"}),Q=URL.createObjectURL(T);window.open(Q,"_blank")}),f(a,ue),ta()}oa(["click","change"]);const xu=["prose","flow-space","line-clamp","aspect","scroll-shadow","scrim","surface-color","content-intrinsic"],ku=["color","contrast","palette-mix","lumlocker","gradient"],wu=["font","--sf-text","leading","tracking","weight","body-font","heading-font","body-em","body-text","heading-text","display-l-","display-m-","-h1-","-h2-","-h3-","-h4-","-h5-","-h6-","link-","optical-sizing","fluid-min-vw","fluid-max-vw"],_u=["space","section","gutter","content-gap","component-pad"],Cu=["container","layout","grid","breakpoint","measure","column","header-height","touch-target","bento","cluster","cover-min","equal-min","frame","ratio-","reel","safe-","sidebar","switcher","-bg-"],Ou=["radius","border-width","border-scale","border-style","divider"],Su=["shadow"],Lu=["motion","duration","easing","ease","scroll-timeline"],Pu=["filter","blur","backdrop","opacity","effect"],Iu=["z-","cursor","ring","focus","outline","selection","icon","is-active","is-current","is-open","is-pressed","field-required","object-fit","object-position","print-","scrollbar","size-"],Bu={macros:xu,colors:ku,typography:wu,spacing:_u,layout:Cu,borders:Ou,shadows:Su,motion:Lu,effects:Pu,misc:Iu},Yi=Bu;function wn(a){for(const[e,o]of Object.entries(Yi))if(e!=="misc"&&o.some(n=>a.includes(n)))return e;return"misc"}const Zi="slashed-studio/themes/v1";function Uu(a){return!!a&&typeof a=="object"&&!Array.isArray(a)&&Object.values(a).every(e=>typeof e=="string")}function Au(a){if(!a||typeof a!="object"||Array.isArray(a))return!1;const e=a;return typeof e.id=="string"&&typeof e.name=="string"&&typeof e.icon=="string"&&typeof e.blurb=="string"&&Uu(e.overrides)}function lr(){if(typeof window>"u")return[];try{const a=localStorage.getItem(Zi);if(!a)return[];const e=JSON.parse(a);return Array.isArray(e)?e.filter(Au):[]}catch{return[]}}function Xi(a){if(typeof window>"u")return!1;try{return localStorage.setItem(Zi,JSON.stringify(a)),!0}catch{return!1}}function Ji(){return lr()}function Qi(a,e){const o=lr(),n=a.trim()||"Untitled theme",l={id:`theme-${Date.now()}-${Math.random().toString(36).slice(2,7)}`,name:n,icon:"🎨",blurb:`${Object.keys(e).length} override${Object.keys(e).length===1?"":"s"}`,overrides:{...e}},i=[...o,l];return Xi(i)?i:o}function zu(a){const e=lr().filter(o=>o.id!==a);return Xi(e)?e:lr()}var Eu=g('You have .',1),Ru=g(''),Tu=g(' '),Du=g(''),Mu=g(''),Nu=g('

No saved themes yet. Configure tokens, then save.

'),Fu=g(''),ju=g('
'),Gu=g('
SLASHED Studio

Configure every SLASHED design token visually. Changes appear live in the preview.

Token domains
Tools
Saved themes
');function Hu(a,e){ea(e,!0);const o=[{id:"colors",icon:xi,label:"Colors",desc:"Brand, semantic & neutral palettes"},{id:"typography",icon:Ii,label:"Typography",desc:"Font families & fluid type scale"},{id:"spacing",icon:Ci,label:"Spacing",desc:"Space scale & section rhythm"},{id:"layout",icon:ki,label:"Layout",desc:"Containers, grids & primitives"},{id:"borders",icon:Li,label:"Borders",desc:"Corner radius & border widths"},{id:"shadows",icon:gi,label:"Shadows",desc:"Elevation & depth control"},{id:"motion",icon:Ui,label:"Motion",desc:"Duration & easing curves"},{id:"effects",icon:Jr,label:"Effects",desc:"Blur, opacity & scrollbars"},{id:"macros",icon:mi,label:"Macros",desc:"Flow, prose, aspect & scrim"},{id:"misc",icon:wi,label:"Misc",desc:"Z-index & remaining tokens"}],n=[{id:"themes",icon:Pi,label:"Themes",desc:"Save & re-apply configurations"},{id:"wcag",icon:Oi,label:"WCAG",desc:"Contrast checker & fixes"},{id:"setup",icon:yi,label:"Install",desc:"Export overrides & setup"},{id:"cheatsheet",icon:vi,label:"Classes",desc:"Utility class reference"}],l={colors:["color","contrast","focus-ring"],typography:["text","font","leading","tracking","h1","h2","h3","h4","h5","h6","body"],spacing:["space","gap","gutter","section"],layout:["container","grid","sidebar","bento","reel","cluster","stack","frame"],borders:["radius","border","divider","btn-","field-"],shadows:["shadow"],motion:["motion","duration","ease","animation","transition"],effects:["blur","opacity","scrollbar","scrim","backdrop"],macros:["flow","prose","aspect","scroll-shadow","line-clamp"],misc:["z-"]};function i(X){const ne=l[X];return ne?Object.keys(e.overrides).filter(_e=>ne.some(Ae=>_e.includes(Ae))).length:0}let c=u(()=>Object.keys(e.overrides).length),d=K(va(Ji())),p=K("");function m(){t(c)!==0&&(w(d,Qi(t(p),e.overrides),!0),w(p,""))}var h=Gu(),v=s(h),b=s(v),k=s(b);Jr(k,{class:"w-4 h-4 text-indigo-400"});var S=r(b,2),E=r(s(S));{var I=X=>{var ne=Eu(),_e=r(ce(ne)),Ae=s(_e);_(()=>y(Ae,`${t(c)??""} active override${t(c)!==1?"s":""}`)),f(X,ne)},P=X=>{var ne=ls("Pick any domain below to get started.");f(X,ne)};L(E,X=>{t(c)>0?X(I):X(P,-1)})}var B=r(S,2);{var H=X=>{var ne=Ru();x("click",ne,function(..._e){e.onResetAll?.apply(this,_e)}),f(X,ne)};L(B,X=>{t(c)>0&&X(H)})}var D=r(v,2),R=r(s(D),2);ae(R,21,()=>o,X=>X.id,(X,ne)=>{const _e=u(()=>i(t(ne).id)),Ae=u(()=>t(ne).icon);var j=Du(),G=s(j),Z=s(G);zs(Z,()=>t(Ae),(qe,rt)=>{rt(qe,{class:"w-4 h-4"})});var se=r(G,2),Y=s(se),de=s(Y),ge=r(Y,2),ve=s(ge),re=r(se,2);{var Ie=qe=>{var rt=Tu(),et=s(rt);_(()=>y(et,t(_e))),f(qe,rt)};L(re,qe=>{t(_e)>0&&qe(Ie)})}_(()=>{y(de,t(ne).label),y(ve,t(ne).desc)}),x("click",j,()=>e.onSelect(t(ne).id)),f(X,j)});var C=r(D,2),A=r(s(C),2);ae(A,21,()=>n,X=>X.id,(X,ne)=>{const _e=u(()=>t(ne).icon);var Ae=Mu(),j=s(Ae),G=s(j);zs(G,()=>t(_e),(ve,re)=>{re(ve,{class:"w-4 h-4"})});var Z=r(j,2),se=s(Z),Y=s(se),de=r(se,2),ge=s(de);_(()=>{y(Y,t(ne).label),y(ge,t(ne).desc)}),x("click",Ae,()=>e.onSelect(t(ne).id)),f(X,Ae)});var q=r(C,2),O=s(q),F=r(s(O),2),M=r(O,2),J=s(M),be=r(J,2),ze=s(be);gr(ze,{class:"w-3 h-3"});var Me=r(M,2);{var ye=X=>{var ne=Nu();f(X,ne)},ue=X=>{var ne=ju();ae(ne,21,()=>t(d).slice(0,6),_e=>_e.id,(_e,Ae)=>{var j=Fu(),G=s(j),Z=s(G),se=r(G,2),Y=s(se),de=s(Y),ge=r(Y,2),ve=s(ge);_(()=>{y(Z,t(Ae).icon),y(de,t(Ae).name),y(ve,t(Ae).blurb)}),x("click",j,()=>e.onApplyTheme(t(Ae).overrides)),f(_e,j)}),f(X,ne)};L(Me,X=>{t(d).length===0?X(ye):X(ue,-1)})}_(()=>be.disabled=t(c)===0),x("click",F,()=>e.onSelect("themes")),x("keydown",J,X=>{X.key==="Enter"&&m()}),hr(J,()=>t(p),X=>w(p,X)),x("click",be,m),f(a,h),ta()}oa(["click","keydown"]);const Vo={colors:[{name:"--sf-contrast-bias",label:"Contrast bias",help:"Shifts the lightness threshold used by text-on-color pairing toward darker (negative) or lighter (positive) text.",default:0,min:-1,max:1,step:.05,driving:3},{name:"--sf-contrast-threshold",label:"Contrast threshold",help:"OKLCH lightness above which a swatch is considered 'light' (gets dark text). Below = light text.",default:.6,min:0,max:1,step:.01,driving:11},{name:"--sf-focus-ring-width",label:"Focus ring width",help:"Thickness of the focus ring on every interactive element.",default:2,min:0,max:6,step:.5,unit:"px",driving:1}],typography:[{name:"--sf-text-scale",label:"Text scale",help:"Multiplier applied to the entire fluid text ramp (2xs … 2xl).",default:1,min:.5,max:2,step:.05,driving:9},{name:"--sf-text-display-scale",label:"Display scale",help:"Multiplier applied to the display ramp (display-s, display-m, display-l).",default:1,min:.5,max:2,step:.05,driving:3}],spacing:[{name:"--sf-space-scale",label:"Space scale",help:"Multiplier applied to every fluid spacing step. One drag moves 45 tokens.",default:1,min:.5,max:2,step:.05,driving:45},{name:"--sf-section-scale",label:"Section scale",help:"Multiplier applied to section paddings only.",default:1,min:.5,max:2,step:.05,driving:6}],borders:[{name:"--sf-radius-scale",label:"Radius scale",help:"Multiplier applied to every radius step (set to 0 for sharp brutalist corners).",default:1,min:0,max:2,step:.05,driving:8}],shadows:[{name:"--sf-shadow-strength",label:"Shadow strength",help:"Base shadow opacity. Auto-boosted +0.17 in dark mode. Slider sets the light-mode base.",default:.08,min:0,max:.5,step:.01,driving:14,encode:a=>`calc(${a} + var(--sf-is-dark) * 0.17)`,decode:a=>{const e=/^calc\(\s*([\d.e+-]+)/.exec(String(a));return e?parseFloat(e[1]):NaN}}],motion:[{name:"--sf-motion-scale",label:"Motion scale",help:"Speed multiplier on every duration. Set to 0 to effectively disable motion.",default:1,min:0,max:2,step:.05,driving:13}]};/** * @license * SPDX-License-Identifier: Apache-2.0 - */function Jn(a,e,o){const n=o*Math.PI/180,l=a,i=e*Math.cos(n),c=e*Math.sin(n),f=l+.3963377774*i+.2158037573*c,p=l-.1055613458*i-.0638541728*c,m=l-.0894841775*i-1.291485548*c,h=f*f*f,v=p*p*p,b=m*m*m,k=4.0767416621*h-3.3077115913*v+.2309699292*b,S=-1.2684380046*h+2.6097574011*v-.3413193965*b,E=-.0041960863*h-.7034186147*v+1.707614701*b,P=T=>T<=.0031308?12.92*T:1.055*Math.pow(T,1/2.4)-.055,B=Math.max(0,Math.min(255,Math.round(P(k)*255))),I=Math.max(0,Math.min(255,Math.round(P(S)*255))),H=Math.max(0,Math.min(255,Math.round(P(E)*255)));return[B,I,H]}function Do(a,e,o){const n=l=>{const i=l/255;return i<=.04045?i/12.92:Math.pow((i+.055)/1.055,2.4)};return .2126*n(a)+.7152*n(e)+.0722*n(o)}function Ys(a,e){const o=Math.max(a,e),n=Math.min(a,e);return(o+.05)/(n+.05)}function Zs(a){const e=a.match(/oklch\(\s*([\d.%]+)\s+([\d.]+)\s+([\d.]+)/i);if(e){const o=e[1],n=o.endsWith("%")?parseFloat(o)/100:parseFloat(o),l=parseFloat(e[2]),i=parseFloat(e[3]);return{l:n,c:l,h:i,valid:!0}}return{l:.5,c:.15,h:200,valid:!1}}function Xs(a,e,o){return`oklch(${a.toFixed(3)} ${e.toFixed(3)} ${Math.round(o)})`}var qu=g(' '),Vu=g('
');function $o(a,e){ea(e,!0);let o=Sa(e,"disabled",3,!1);function n(S){return Math.min(e.max,Math.max(e.min,S))}let l=u(()=>(e.value-e.min)/(e.max-e.min)*100);var i=Vu(),c=s(i),f=r(s(c),2),p=r(f,2),m=r(p,2),h=r(c,2),v=s(h),b=r(v,2);{var k=S=>{var E=qu(),P=s(E);C(()=>y(P,e.unit)),d(S,E)};L(b,S=>{e.unit&&S(k)})}C(()=>{it(f,`width: ${t(l)}%`),ee(p,"min",e.min),ee(p,"max",e.max),ee(p,"step",e.step),Jt(p,e.value),p.disabled=o(),it(m,`left: calc(${t(l)}% - 6px)`),ee(v,"min",e.min),ee(v,"max",e.max),ee(v,"step",e.step),Jt(v,e.value),v.disabled=o()}),x("input",p,S=>e.onChange(n(parseFloat(S.target.value)))),x("change",v,S=>e.onChange(n(parseFloat(S.target.value)||0))),d(a,i),ta()}oa(["input","change"]);var Ku=g('
'),Wu=g(''),Yu=g('
Lightness (L)
Chroma (C)
Hue (H)
Raw value
'),Zu=g('
');function Gs(a,e){ea(e,!0);function o(D){const J=/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/.exec(D);return J?{l:parseFloat(J[1]),c:parseFloat(J[2]),h:parseFloat(J[3])}:null}function n(D,J,ye){return`oklch(${D.toFixed(3)} ${J.toFixed(3)} ${ye.toFixed(1)})`}function l(D,J,ye){const Ae=ye*Math.PI/180,Te=J*Math.cos(Ae),xe=J*Math.sin(Ae),pe=D+.3963377774*Te+.2158037573*xe,Q=D-.1055613458*Te-.0638541728*xe,le=D-.0894841775*Te-1.291485548*xe,we=pe*pe*pe,ze=Q*Q*Q,N=le*le*le;let G=4.0767416621*we-3.3077115913*ze+.2309699292*N,Z=-1.2684380046*we+2.6097574011*ze-.3413193965*N,re=-.0041960863*we-.7034186147*ze+1.707614701*N;const Y=de=>de<=0?0:de>=1?255:Math.round(Math.pow(de,1/2.2)*255);return`rgb(${Y(G)},${Y(Z)},${Y(re)})`}let i=u(()=>o(e.value)??{l:.6,c:.15,h:264}),c=K(!1),f=K(""),p=u(()=>l(t(i).l,t(i).c,t(i).h)),m=u(()=>e.tokenName.replace("--sf-",""));function h(D,J,ye){e.onChange(n(D,J,ye))}var v=Zu(),b=s(v),k=s(b);let S;var E=r(k,2),P=s(E),B=s(P),I=r(P,2),H=s(I),T=r(I,2),R=s(T),w=r(E,2);{var A=D=>{var J=Ku();d(D,J)};L(w,D=>{e.overridden&&D(A)})}var j=r(w,2),O=r(b,2);{var F=D=>{var J=Yu(),ye=s(J),Ae=s(ye),Te=r(s(Ae),2),xe=s(Te),pe=r(Ae,2),Q=r(pe,2);$o(Q,{get value(){return t(i).l},min:0,max:1,step:.005,onChange:et=>h(et,t(i).c,t(i).h)});var le=r(ye,2),we=s(le),ze=r(s(we),2),N=s(ze),G=r(we,2);$o(G,{get value(){return t(i).c},min:0,max:.4,step:.005,onChange:et=>h(t(i).l,et,t(i).h)});var Z=r(le,2),re=s(Z),Y=r(s(re),2),de=s(Y),be=r(re,2),he=r(be,2);$o(he,{get value(){return t(i).h},min:0,max:360,step:1,unit:"°",onChange:et=>h(t(i).l,t(i).c,et)});var ne=r(Z,2),Pe=r(s(ne),2),qe=s(Pe),at=r(qe,2);{var Ke=et=>{var ft=Wu();x("click",ft,function(...gt){e.onReset?.apply(this,gt)}),d(et,ft)};L(at,et=>{e.overridden&&et(Ke)})}C((et,ft,gt,Ot,_t)=>{y(xe,et),it(pe,ft),y(N,gt),y(de,`${Ot??""}°`),it(be,_t),Jt(qe,t(f)||e.value)},[()=>t(i).l.toFixed(3),()=>`background: linear-gradient(to right, oklch(0 ${t(i).c.toFixed(3)} ${t(i).h.toFixed(1)}), oklch(1 ${t(i).c.toFixed(3)} ${t(i).h.toFixed(1)}))`,()=>t(i).c.toFixed(3),()=>t(i).h.toFixed(1),()=>`background: linear-gradient(to right, oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 0), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 60), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 120), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 180), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 240), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 300), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 360))`]),x("input",qe,et=>{_(f,et.target.value,!0)}),go("blur",qe,()=>{t(f).trim()&&(e.onChange(t(f).trim()),_(f,""))}),x("keydown",qe,et=>{et.key==="Enter"&&(t(f).trim()&&(e.onChange(t(f).trim()),_(f,"")),et.currentTarget.blur())}),d(D,J)};L(O,D=>{t(c)&&D(F)})}C(()=>{Ye(v,1,`rounded-xl border transition-all ${e.overridden?"bg-indigo-500/8 border-indigo-500/20":"bg-white/4 border-white/8 hover:border-white/12"}`),S=it(k,"",S,{background:t(p)}),y(B,e.label),y(H,t(m)),y(R,e.value),Ye(j,1,`text-slate-500 text-[10px] transition-transform ${t(c)?"rotate-180":""}`)}),x("click",b,()=>{_(c,!t(c))}),d(a,v),ta()}oa(["click","input","keydown"]);var Xu=g(' '),Ju=g(''),Qu=g('

'),$u=g('
');function Ko(a,e){ea(e,!0);let o=u(()=>e.overrides[e.knob.name]),n=u(()=>t(o)!==void 0?e.knob.decode?e.knob.decode(t(o)):parseFloat(t(o)):e.knob.default),l=u(()=>isNaN(t(n))?e.knob.default:t(n)),i=u(()=>e.knob.name in e.overrides);function c(T){const R=e.knob.encode?e.knob.encode(T):String(T);e.onChange(e.knob.name,R)}function f(){e.onChange(e.knob.name,null)}var p=$u(),m=s(p),h=s(m),v=s(h),b=s(v),k=r(v,2);{var S=T=>{var R=Xu(),w=s(R);C(()=>y(w,`→ ${e.knob.driving??""} tokens`)),d(T,R)};L(k,T=>{e.knob.driving!==void 0&&T(S)})}var E=r(h,2);{var P=T=>{var R=Ju();x("click",R,f),d(T,R)};L(E,T=>{t(i)&&T(P)})}var B=r(m,2);$o(B,{get value(){return t(l)},get min(){return e.knob.min},get max(){return e.knob.max},get step(){return e.knob.step},get unit(){return e.knob.unit},onChange:c});var I=r(B,2);{var H=T=>{var R=Qu(),w=s(R);C(()=>y(w,e.knob.help)),d(T,R)};L(I,T=>{e.knob.help&&T(H)})}C(()=>y(b,e.knob.label)),d(a,p),ta()}oa(["click"]);var ep=g(' '),tp=g(""),ap=g(""),op=g(''),sp=g(''),rp=g('

'),np=g(" ",1),lp=g('

'),ip=g('
');function xt(a,e){ea(e,!0);let o=K(!1),n=K(""),l=K(!1),i=u(()=>!!e.currentRaw&&/^(var|calc|clamp|min|max|env)\(/.test(e.currentRaw.trim())),c=u(()=>!!(e.rawDefault&&e.onRawSet&&(t(o)||t(i)||t(l))));xa(()=>{t(l)||_(n,e.currentRaw??"",!0)});var f=ip(),p=s(f),m=s(p);{var h=w=>{var A=ep(),j=s(A);C(()=>y(j,e.label)),d(w,A)},v=w=>{var A=tp();d(w,A)};L(m,w=>{e.label?w(h):w(v,-1)})}var b=r(m,2),k=s(b);{var S=w=>{var A=ap();C(()=>{ee(A,"title",t(c)?"Switch to slider":"Enter raw CSS value"),Ye(A,1,`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${t(c)?"text-indigo-400":"opacity-0 group-hover:opacity-100 text-slate-500 hover:text-indigo-400"}`)}),x("click",A,()=>{_(o,!t(o))}),d(w,A)};L(k,w=>{e.rawDefault&&e.onRawSet&&w(S)})}var E=r(k,2);{var P=w=>{var A=op();x("click",A,function(...j){e.onReset?.apply(this,j)}),d(w,A)};L(E,w=>{e.overridden&&w(P)})}var B=r(p,2);{var I=w=>{var A=sp();C(()=>{Jt(A,t(n)),ee(A,"placeholder",e.rawDefault)}),go("focus",A,()=>{_(l,!0)}),go("blur",A,()=>{_(l,!1),t(n).trim()||e.onReset()}),x("input",A,j=>{_(n,j.target.value,!0);const O=t(n).trim();O&&e.onRawSet&&e.onRawSet(O)}),d(w,A)},H=w=>{var A=np(),j=ce(A);$o(j,{get value(){return e.value},get min(){return e.min},get max(){return e.max},get step(){return e.step},get unit(){return e.unit},get onChange(){return e.onChange}});var O=r(j,2);{var F=D=>{var J=rp(),ye=s(J);C(()=>y(ye,`default: ${e.rawDefault??""}`)),d(D,J)};L(O,D=>{e.rawDefault&&!e.overridden&&D(F)})}d(w,A)};L(B,w=>{t(c)&&e.rawDefault?w(I):w(H,-1)})}var T=r(B,2);{var R=w=>{var A=lp(),j=s(A);C(()=>y(j,e.help)),d(w,A)};L(T,w=>{e.help&&w(R)})}d(a,f),ta()}oa(["click","input"]);var cp=g(''),dp=g(''),fp=g(' '),up=g(''),pp=g(''),mp=g('
');function Qa(a,e){ea(e,!0);let o=K(!1),n=K(!1),l=K(null);xa(()=>{t(o)&&pr().then(()=>t(l)?.focus())});function i(R){const w=R.trim();return w.startsWith("--")&&!w.startsWith("var(")?`var(${w})`:w}function c(R){Ha.value;const w=i(R);return vo(w)||w||"transparent"}let f=u(()=>c(e.value||`var(${e.token})`)),p=u(()=>e.value.trim().startsWith("var(")||e.value.trim().startsWith("--"));function m(R){if(R.match(/^#([0-9a-fA-F]{6})$/))return R.toLowerCase();const A=R.match(/^#([0-9a-fA-F]{3})$/);if(A)return"#"+A[1].split("").map(O=>O+O).join("");const j=R.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);return j?"#"+[j[1],j[2],j[3]].map(O=>parseInt(O).toString(16).padStart(2,"0")).join(""):"#6366f1"}var h=mp(),v=s(h),b=s(v);let k;var S=r(b,2);{var E=R=>{var w=cp();C(A=>Jt(w,A),[()=>m(t(f))]),x("input",w,A=>e.onSet(A.target.value)),d(R,w)};L(S,R=>{t(p)||R(E)})}var P=r(v,2);{var B=R=>{var w=dp();bo(w,A=>_(l,A),()=>t(l)),C(()=>{Jt(w,e.value),ee(w,"placeholder",e.placeholder??"default")}),go("blur",w,A=>{if(t(n)){_(n,!1),_(o,!1);return}const j=i(A.target.value);j?e.onSet(j):e.onReset(),_(o,!1)}),x("keydown",w,A=>{A.key==="Enter"&&A.currentTarget.blur(),A.key==="Escape"&&(_(n,!0),_(o,!1))}),d(R,w)},I=R=>{var w=up(),A=s(w);{var j=F=>{var D=fp(),J=s(D);C(()=>y(J,e.value)),d(F,D)},O=F=>{var D=ls();C(()=>y(D,e.placeholder??"default")),d(F,D)};L(A,F=>{e.isOverridden?F(j):F(O,-1)})}x("click",w,()=>{_(o,!0)}),d(R,w)};L(P,R=>{t(o)?R(B):R(I,-1)})}var H=r(P,2);{var T=R=>{var w=pp();x("click",w,function(...A){e.onReset?.apply(this,A)}),d(R,w)};L(H,R=>{e.isOverridden&&R(T)})}C(()=>k=it(b,"",k,{background:t(f)})),d(a,h),ta()}oa(["input","keydown","click"]);const ys=(a,e=hl)=>{var o=vp(),n=s(o);C(()=>y(n,e())),d(a,o)};var vp=g(''),hp=g('
Aa
'),gp=g('
'),bp=g('
'),Yo=g(""),yp=g('
'),xp=g('
'),kp=g(`

Absolute lightness ramp — each step pins L and inherits chroma + hue from the source. Not the brand mix curve. + */function Qn(a,e,o){const n=o*Math.PI/180,l=a,i=e*Math.cos(n),c=e*Math.sin(n),d=l+.3963377774*i+.2158037573*c,p=l-.1055613458*i-.0638541728*c,m=l-.0894841775*i-1.291485548*c,h=d*d*d,v=p*p*p,b=m*m*m,k=4.0767416621*h-3.3077115913*v+.2309699292*b,S=-1.2684380046*h+2.6097574011*v-.3413193965*b,E=-.0041960863*h-.7034186147*v+1.707614701*b,I=D=>D<=.0031308?12.92*D:1.055*Math.pow(D,1/2.4)-.055,P=Math.max(0,Math.min(255,Math.round(I(k)*255))),B=Math.max(0,Math.min(255,Math.round(I(S)*255))),H=Math.max(0,Math.min(255,Math.round(I(E)*255)));return[P,B,H]}function Do(a,e,o){const n=l=>{const i=l/255;return i<=.04045?i/12.92:Math.pow((i+.055)/1.055,2.4)};return .2126*n(a)+.7152*n(e)+.0722*n(o)}function Xs(a,e){const o=Math.max(a,e),n=Math.min(a,e);return(o+.05)/(n+.05)}function Js(a){const e=a.match(/oklch\(\s*([\d.%]+)\s+([\d.]+)\s+([\d.]+)/i);if(e){const o=e[1],n=o.endsWith("%")?parseFloat(o)/100:parseFloat(o),l=parseFloat(e[2]),i=parseFloat(e[3]);return{l:n,c:l,h:i,valid:!0}}return{l:.5,c:.15,h:200,valid:!1}}function Qs(a,e,o){return`oklch(${a.toFixed(3)} ${e.toFixed(3)} ${Math.round(o)})`}var qu=g(' '),Vu=g('

');function $o(a,e){ea(e,!0);let o=Sa(e,"disabled",3,!1);function n(S){return Math.min(e.max,Math.max(e.min,S))}let l=u(()=>(e.value-e.min)/(e.max-e.min)*100);var i=Vu(),c=s(i),d=r(s(c),2),p=r(d,2),m=r(p,2),h=r(c,2),v=s(h),b=r(v,2);{var k=S=>{var E=qu(),I=s(E);_(()=>y(I,e.unit)),f(S,E)};L(b,S=>{e.unit&&S(k)})}_(()=>{ct(d,`width: ${t(l)}%`),ee(p,"min",e.min),ee(p,"max",e.max),ee(p,"step",e.step),Jt(p,e.value),p.disabled=o(),ct(m,`left: calc(${t(l)}% - 6px)`),ee(v,"min",e.min),ee(v,"max",e.max),ee(v,"step",e.step),Jt(v,e.value),v.disabled=o()}),x("input",p,S=>e.onChange(n(parseFloat(S.target.value)))),x("change",v,S=>e.onChange(n(parseFloat(S.target.value)||0))),f(a,i),ta()}oa(["input","change"]);var Ku=g('
'),Wu=g(''),Yu=g('
Lightness (L)
Chroma (C)
Hue (H)
Raw value
'),Zu=g('
');function qs(a,e){ea(e,!0);function o(M){const J=/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/.exec(M);return J?{l:parseFloat(J[1]),c:parseFloat(J[2]),h:parseFloat(J[3])}:null}function n(M,J,be){return`oklch(${M.toFixed(3)} ${J.toFixed(3)} ${be.toFixed(1)})`}function l(M,J,be){const ze=be*Math.PI/180,Me=J*Math.cos(ze),ye=J*Math.sin(ze),ue=M+.3963377774*Me+.2158037573*ye,X=M-.1055613458*Me-.0638541728*ye,ne=M-.0894841775*Me-1.291485548*ye,_e=ue*ue*ue,Ae=X*X*X,j=ne*ne*ne;let G=4.0767416621*_e-3.3077115913*Ae+.2309699292*j,Z=-1.2684380046*_e+2.6097574011*Ae-.3413193965*j,se=-.0041960863*_e-.7034186147*Ae+1.707614701*j;const Y=de=>de<=0?0:de>=1?255:Math.round(Math.pow(de,1/2.2)*255);return`rgb(${Y(G)},${Y(Z)},${Y(se)})`}let i=u(()=>o(e.value)??{l:.6,c:.15,h:264}),c=K(!1),d=K(""),p=u(()=>l(t(i).l,t(i).c,t(i).h)),m=u(()=>e.tokenName.replace("--sf-",""));function h(M,J,be){e.onChange(n(M,J,be))}var v=Zu(),b=s(v),k=s(b);let S;var E=r(k,2),I=s(E),P=s(I),B=r(I,2),H=s(B),D=r(B,2),R=s(D),C=r(E,2);{var A=M=>{var J=Ku();f(M,J)};L(C,M=>{e.overridden&&M(A)})}var q=r(C,2),O=r(b,2);{var F=M=>{var J=Yu(),be=s(J),ze=s(be),Me=r(s(ze),2),ye=s(Me),ue=r(ze,2),X=r(ue,2);$o(X,{get value(){return t(i).l},min:0,max:1,step:.005,onChange:tt=>h(tt,t(i).c,t(i).h)});var ne=r(be,2),_e=s(ne),Ae=r(s(_e),2),j=s(Ae),G=r(_e,2);$o(G,{get value(){return t(i).c},min:0,max:.4,step:.005,onChange:tt=>h(t(i).l,tt,t(i).h)});var Z=r(ne,2),se=s(Z),Y=r(s(se),2),de=s(Y),ge=r(se,2),ve=r(ge,2);$o(ve,{get value(){return t(i).h},min:0,max:360,step:1,unit:"°",onChange:tt=>h(t(i).l,t(i).c,tt)});var re=r(Z,2),Ie=r(s(re),2),qe=s(Ie),rt=r(qe,2);{var et=tt=>{var vt=Wu();x("click",vt,function(...gt){e.onReset?.apply(this,gt)}),f(tt,vt)};L(rt,tt=>{e.overridden&&tt(et)})}_((tt,vt,gt,Ot,_t)=>{y(ye,tt),ct(ue,vt),y(j,gt),y(de,`${Ot??""}°`),ct(ge,_t),Jt(qe,t(d)||e.value)},[()=>t(i).l.toFixed(3),()=>`background: linear-gradient(to right, oklch(0 ${t(i).c.toFixed(3)} ${t(i).h.toFixed(1)}), oklch(1 ${t(i).c.toFixed(3)} ${t(i).h.toFixed(1)}))`,()=>t(i).c.toFixed(3),()=>t(i).h.toFixed(1),()=>`background: linear-gradient(to right, oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 0), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 60), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 120), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 180), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 240), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 300), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 360))`]),x("input",qe,tt=>{w(d,tt.target.value,!0)}),go("blur",qe,()=>{t(d).trim()&&(e.onChange(t(d).trim()),w(d,""))}),x("keydown",qe,tt=>{tt.key==="Enter"&&(t(d).trim()&&(e.onChange(t(d).trim()),w(d,"")),tt.currentTarget.blur())}),f(M,J)};L(O,M=>{t(c)&&M(F)})}_(()=>{Xe(v,1,`rounded-xl border transition-all ${e.overridden?"bg-indigo-500/8 border-indigo-500/20":"bg-white/4 border-white/8 hover:border-white/12"}`),S=ct(k,"",S,{background:t(p)}),y(P,e.label),y(H,t(m)),y(R,e.value),Xe(q,1,`text-slate-500 text-[10px] transition-transform ${t(c)?"rotate-180":""}`)}),x("click",b,()=>{w(c,!t(c))}),f(a,v),ta()}oa(["click","input","keydown"]);var Xu=g(' '),Ju=g(''),Qu=g('

'),$u=g('
');function Ko(a,e){ea(e,!0);let o=u(()=>e.overrides[e.knob.name]),n=u(()=>t(o)!==void 0?e.knob.decode?e.knob.decode(t(o)):parseFloat(t(o)):e.knob.default),l=u(()=>isNaN(t(n))?e.knob.default:t(n)),i=u(()=>e.knob.name in e.overrides);function c(D){const R=e.knob.encode?e.knob.encode(D):String(D);e.onChange(e.knob.name,R)}function d(){e.onChange(e.knob.name,null)}var p=$u(),m=s(p),h=s(m),v=s(h),b=s(v),k=r(v,2);{var S=D=>{var R=Xu(),C=s(R);_(()=>y(C,`→ ${e.knob.driving??""} tokens`)),f(D,R)};L(k,D=>{e.knob.driving!==void 0&&D(S)})}var E=r(h,2);{var I=D=>{var R=Ju();x("click",R,d),f(D,R)};L(E,D=>{t(i)&&D(I)})}var P=r(m,2);$o(P,{get value(){return t(l)},get min(){return e.knob.min},get max(){return e.knob.max},get step(){return e.knob.step},get unit(){return e.knob.unit},onChange:c});var B=r(P,2);{var H=D=>{var R=Qu(),C=s(R);_(()=>y(C,e.knob.help)),f(D,R)};L(B,D=>{e.knob.help&&D(H)})}_(()=>y(b,e.knob.label)),f(a,p),ta()}oa(["click"]);var ep=g(' '),tp=g(""),ap=g(""),op=g(''),sp=g(''),rp=g('

'),np=g(" ",1),lp=g('

'),ip=g('
');function xt(a,e){ea(e,!0);let o=K(!1),n=K(""),l=K(!1),i=u(()=>!!e.currentRaw&&/^(var|calc|clamp|min|max|env)\(/.test(e.currentRaw.trim())),c=u(()=>!!(e.rawDefault&&e.onRawSet&&(t(o)||t(i)||t(l))));xa(()=>{t(l)||w(n,e.currentRaw??"",!0)});var d=ip(),p=s(d),m=s(p);{var h=C=>{var A=ep(),q=s(A);_(()=>y(q,e.label)),f(C,A)},v=C=>{var A=tp();f(C,A)};L(m,C=>{e.label?C(h):C(v,-1)})}var b=r(m,2),k=s(b);{var S=C=>{var A=ap();_(()=>{ee(A,"title",t(c)?"Switch to slider":"Enter raw CSS value"),Xe(A,1,`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${t(c)?"text-indigo-400":"opacity-0 group-hover:opacity-100 text-slate-500 hover:text-indigo-400"}`)}),x("click",A,()=>{w(o,!t(o))}),f(C,A)};L(k,C=>{e.rawDefault&&e.onRawSet&&C(S)})}var E=r(k,2);{var I=C=>{var A=op();x("click",A,function(...q){e.onReset?.apply(this,q)}),f(C,A)};L(E,C=>{e.overridden&&C(I)})}var P=r(p,2);{var B=C=>{var A=sp();_(()=>{Jt(A,t(n)),ee(A,"placeholder",e.rawDefault)}),go("focus",A,()=>{w(l,!0)}),go("blur",A,()=>{w(l,!1),t(n).trim()||e.onReset()}),x("input",A,q=>{w(n,q.target.value,!0);const O=t(n).trim();O&&e.onRawSet&&e.onRawSet(O)}),f(C,A)},H=C=>{var A=np(),q=ce(A);$o(q,{get value(){return e.value},get min(){return e.min},get max(){return e.max},get step(){return e.step},get unit(){return e.unit},get onChange(){return e.onChange}});var O=r(q,2);{var F=M=>{var J=rp(),be=s(J);_(()=>y(be,`default: ${e.rawDefault??""}`)),f(M,J)};L(O,M=>{e.rawDefault&&!e.overridden&&M(F)})}f(C,A)};L(P,C=>{t(c)&&e.rawDefault?C(B):C(H,-1)})}var D=r(P,2);{var R=C=>{var A=lp(),q=s(A);_(()=>y(q,e.help)),f(C,A)};L(D,C=>{e.help&&C(R)})}f(a,d),ta()}oa(["click","input"]);var cp=g(''),dp=g(''),fp=g(' '),up=g(''),pp=g(''),mp=g('
');function Qa(a,e){ea(e,!0);let o=K(!1),n=K(!1),l=K(null);xa(()=>{t(o)&&mr().then(()=>t(l)?.focus())});function i(R){const C=R.trim();return C.startsWith("--")&&!C.startsWith("var(")?`var(${C})`:C}function c(R){Ha.value;const C=i(R);return vo(C)||C||"transparent"}let d=u(()=>c(e.value||`var(${e.token})`)),p=u(()=>e.value.trim().startsWith("var(")||e.value.trim().startsWith("--"));function m(R){if(R.match(/^#([0-9a-fA-F]{6})$/))return R.toLowerCase();const A=R.match(/^#([0-9a-fA-F]{3})$/);if(A)return"#"+A[1].split("").map(O=>O+O).join("");const q=R.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);return q?"#"+[q[1],q[2],q[3]].map(O=>parseInt(O).toString(16).padStart(2,"0")).join(""):"#6366f1"}var h=mp(),v=s(h),b=s(v);let k;var S=r(b,2);{var E=R=>{var C=cp();_(A=>Jt(C,A),[()=>m(t(d))]),x("input",C,A=>e.onSet(A.target.value)),f(R,C)};L(S,R=>{t(p)||R(E)})}var I=r(v,2);{var P=R=>{var C=dp();bo(C,A=>w(l,A),()=>t(l)),_(()=>{Jt(C,e.value),ee(C,"placeholder",e.placeholder??"default")}),go("blur",C,A=>{if(t(n)){w(n,!1),w(o,!1);return}const q=i(A.target.value);q?e.onSet(q):e.onReset(),w(o,!1)}),x("keydown",C,A=>{A.key==="Enter"&&A.currentTarget.blur(),A.key==="Escape"&&(w(n,!0),w(o,!1))}),f(R,C)},B=R=>{var C=up(),A=s(C);{var q=F=>{var M=fp(),J=s(M);_(()=>y(J,e.value)),f(F,M)},O=F=>{var M=ls();_(()=>y(M,e.placeholder??"default")),f(F,M)};L(A,F=>{e.isOverridden?F(q):F(O,-1)})}x("click",C,()=>{w(o,!0)}),f(R,C)};L(I,R=>{t(o)?R(P):R(B,-1)})}var H=r(I,2);{var D=R=>{var C=pp();x("click",C,function(...A){e.onReset?.apply(this,A)}),f(R,C)};L(H,R=>{e.isOverridden&&R(D)})}_(()=>k=ct(b,"",k,{background:t(d)})),f(a,h),ta()}oa(["input","keydown","click"]);const ys=(a,e=Ss)=>{var o=vp(),n=s(o);_(()=>y(n,e())),f(a,o)};var vp=g(''),hp=g('
Aa
'),gp=g('
'),bp=g('
'),Yo=g(""),yp=g('
'),xp=g('
'),kp=g(`

Absolute lightness ramp — each step pins L and inherits chroma + hue from the source. Not the brand mix curve. Light and dark use the same L per step, so at the default near-zero chroma the two rows look almost - identical — add chroma above to see them diverge by hue.

`),wp=g('
L
D
',1),Qn=g('
'),_p=g('
'),Cp=g(`

OKLCH source values — all 200+ derived color steps are computed automatically. Tints (50–400) mix toward Base + identical — add chroma above to see them diverge by hue.

`),wp=g('
L
D
',1),$n=g('
'),_p=g('
'),Cp=g(`

OKLCH source values — all 200+ derived color steps are computed automatically. Tints (50–400) mix toward Base (the "Surface" color) and shades (600–950) mix toward Text (driven by Neutral) — so editing Base or Neutral below will shift every family's tints/shades too. That's expected, not a bug.

`,1),Op=g('
→
'),Sp=g(`

Pins brand colors (primary, secondary, tertiary, action) to a fixed OKLCH lightness — useful for always-stable sections. Enable on canvas to preview.

Color Current Locked
`,1),Lp=g(' '),Pp=g('
'),Ip=g('
'),Bp=g(`

Status colors don't ride the brand mix curve — only the resolved color plus subtle/muted alpha washes and a strong shade are derived. There's no -50…-950 ramp for success/warning/info/danger.

`),Up=g(`

Dark mode is auto-derived from each light source by default. Switch to Manual dark to set a bespoke dark value.

`,1),Ap=g('
Aa
'),zp=g(''),Ep=g('

Controls whether text on brand-coloured surfaces is light or dark.

',1),Rp=g(''),Tp=g('
'),Dp=g('
'),Mp=g('
'),Np=g('

Controls how much color is mixed into each palette step. Step 500 is always the source color.

Tints (50–400) — mixed toward surface
Shades (600–950) — mixed toward text
Palette & curve preview

Bar height = mix amount · fill = the resolved primary palette swatch at each step

Mini palettes — all brand colors
',1),Fp=g(''),jp=g('
Dir
'),Gp=g('
Angle
'),Hp=g('
Stops
default:
'),qp=g('
',1),Vp=g(`

Auto-derived from your brand colors. Use the angle/direction and stop - controls, or edit the raw value for full control.

`,1),Kp=g('

--sf-color-scheme — sets the CSS color-scheme property on the root, controlling browser UI (scrollbars, inputs) and default background.

',1),Wp=g('
'),Yp=g('

Direct color overrides for tokens the framework auto-derives. Use for edge cases.

',1),Zp=g('
Semantic colors

Live preview — every semantic role on its on-color text, shown in light and dark. Resolved from the canvas, updates as you edit.

All tokens tab — override individual color steps (50–950), semantic aliases, or surface tokens directly.

');function Xp(a,e){ea(e,!0);function o(z,$){return Ha.value,vo(z)||$}function n(z,$){Ha.value;const M=du(z);return M&&M!=="none"?M:$}function l(z,$,M){return Ha.value,iu(z,$)||M}const i=[{name:"--sf-gradient-primary",label:"Primary",group:"brand",kind:"angle",space:"oklch",angle:135,dir:"right",stop1:"var(--sf-color-primary)",stop2:"oklch(from var(--sf-color-primary) calc(l - 0.08) c h)",formula:"linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))"},{name:"--sf-gradient-secondary",label:"Secondary",group:"brand",kind:"angle",space:"oklch",angle:135,dir:"right",stop1:"var(--sf-color-secondary)",stop2:"oklch(from var(--sf-color-secondary) calc(l - 0.08) c h)",formula:"linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))"},{name:"--sf-gradient-tertiary",label:"Tertiary",group:"brand",kind:"angle",space:"oklch",angle:135,dir:"right",stop1:"var(--sf-color-tertiary)",stop2:"oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h)",formula:"linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))"},{name:"--sf-gradient-brand",label:"Brand",group:"brand",kind:"angle",space:"oklch",angle:135,dir:"right",stop1:"var(--sf-color-primary)",stop2:"oklch(from var(--sf-color-primary) l c calc(h + 30))",formula:"linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))"},{name:"--sf-gradient-surface",label:"Surface",group:"brand",kind:"angle",space:"oklab",angle:180,dir:"bottom",stop1:"var(--sf-color-surface)",stop2:"var(--sf-color-bg)",formula:"linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))"},{name:"--sf-gradient-fade--r",label:"Fade →",group:"fade",kind:"dir",space:"oklch",angle:90,dir:"right",stop1:"transparent",stop2:"var(--sf-color-bg)",formula:"linear-gradient(in oklch to right, transparent, var(--sf-color-bg))"},{name:"--sf-gradient-fade--l",label:"Fade ←",group:"fade",kind:"dir",space:"oklch",angle:270,dir:"left",stop1:"transparent",stop2:"var(--sf-color-bg)",formula:"linear-gradient(in oklch to left, transparent, var(--sf-color-bg))"},{name:"--sf-gradient-fade--t",label:"Fade ↑",group:"fade",kind:"dir",space:"oklch",angle:0,dir:"top",stop1:"transparent",stop2:"var(--sf-color-bg)",formula:"linear-gradient(in oklch to top, transparent, var(--sf-color-bg))"},{name:"--sf-gradient-fade--b",label:"Fade ↓",group:"fade",kind:"dir",space:"oklch",angle:180,dir:"bottom",stop1:"transparent",stop2:"var(--sf-color-bg)",formula:"linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))"}],c=[{key:"primary",label:"Primary"},{key:"secondary",label:"Secondary"},{key:"tertiary",label:"Tertiary"},{key:"action",label:"Action"}],f=[{name:"--sf-color-primary-source-light",label:"Primary",side:"light",default:"oklch(0.47 0.27 264)",colorKey:"primary"},{name:"--sf-color-primary-source-dark",label:"Primary",side:"dark",default:"oklch(0.715 0.243 264)",colorKey:"primary"},{name:"--sf-color-secondary-source-light",label:"Secondary",side:"light",default:"oklch(0.22 0.04 264)",colorKey:"secondary"},{name:"--sf-color-secondary-source-dark",label:"Secondary",side:"dark",default:"oklch(0.84 0.036 264)",colorKey:"secondary"},{name:"--sf-color-tertiary-source-light",label:"Tertiary",side:"light",default:"oklch(0.42 0.22 295)",colorKey:"tertiary"},{name:"--sf-color-tertiary-source-dark",label:"Tertiary",side:"dark",default:"oklch(0.74 0.198 295)",colorKey:"tertiary"},{name:"--sf-color-action-source-light",label:"Action",side:"light",default:"oklch(0.50 0.22 235)",colorKey:"action"},{name:"--sf-color-action-source-dark",label:"Action",side:"dark",default:"oklch(0.70 0.198 235)",colorKey:"action"},{name:"--sf-color-neutral-source-light",label:"Neutral",side:"light",default:"oklch(0.52 0.025 260)",colorKey:"neutral"},{name:"--sf-color-neutral-source-dark",label:"Neutral",side:"dark",default:"oklch(0.69 0.0225 260)",colorKey:"neutral"},{name:"--sf-color-base-source-light",label:"Base",side:"light",default:"oklch(0.96 0.006 250)",colorKey:"base"},{name:"--sf-color-base-source-dark",label:"Base",side:"dark",default:"oklch(0.22 0.003 250)",colorKey:"base"}],p=[{name:"--sf-color-success-source-light",label:"Success",side:"light",default:"oklch(0.50 0.16 145)",colorKey:"success"},{name:"--sf-color-success-source-dark",label:"Success",side:"dark",default:"oklch(0.70 0.144 145)",colorKey:"success"},{name:"--sf-color-warning-source-light",label:"Warning",side:"light",default:"oklch(0.75 0.17 80)",colorKey:"warning"},{name:"--sf-color-warning-source-dark",label:"Warning",side:"dark",default:"oklch(0.65 0.153 80)",colorKey:"warning"},{name:"--sf-color-info-source-light",label:"Info",side:"light",default:"oklch(0.48 0.18 235)",colorKey:"info"},{name:"--sf-color-info-source-dark",label:"Info",side:"dark",default:"oklch(0.71 0.162 235)",colorKey:"info"},{name:"--sf-color-danger-source-light",label:"Danger",side:"light",default:"oklch(0.48 0.22 12)",colorKey:"danger"},{name:"--sf-color-danger-source-dark",label:"Danger",side:"dark",default:"oklch(0.73 0.198 12)",colorKey:"danger"}],m=[{name:"--sf-palette-mix-50",label:"50",step:"tint",default:4},{name:"--sf-palette-mix-100",label:"100",step:"tint",default:8},{name:"--sf-palette-mix-200",label:"200",step:"tint",default:20},{name:"--sf-palette-mix-300",label:"300",step:"tint",default:40},{name:"--sf-palette-mix-400",label:"400",step:"tint",default:65},{name:"--sf-palette-mix-600",label:"600",step:"shade",default:82},{name:"--sf-palette-mix-700",label:"700",step:"shade",default:62},{name:"--sf-palette-mix-800",label:"800",step:"shade",default:38},{name:"--sf-palette-mix-900",label:"900",step:"shade",default:18},{name:"--sf-palette-mix-950",label:"950",step:"shade",default:8}],h=[{label:"Softer",desc:"Low contrast palette",patch:{"--sf-palette-mix-50":"3%","--sf-palette-mix-100":"6%","--sf-palette-mix-200":"14%","--sf-palette-mix-300":"30%","--sf-palette-mix-400":"55%","--sf-palette-mix-600":"72%","--sf-palette-mix-700":"52%","--sf-palette-mix-800":"28%","--sf-palette-mix-900":"12%","--sf-palette-mix-950":"5%"}},{label:"Default",desc:"Balanced contrast",patch:Object.fromEntries(m.map(z=>[z.name,null]))},{label:"Punchy",desc:"High contrast palette",patch:{"--sf-palette-mix-50":"6%","--sf-palette-mix-100":"12%","--sf-palette-mix-200":"28%","--sf-palette-mix-300":"52%","--sf-palette-mix-400":"78%","--sf-palette-mix-600":"90%","--sf-palette-mix-700":"72%","--sf-palette-mix-800":"50%","--sf-palette-mix-900":"26%","--sf-palette-mix-950":"12%"}}],v=[{name:"--sf-color-link",label:"Link"},{name:"--sf-color-link--visited",label:"Link visited"},{name:"--sf-color-mark-bg",label:"Mark background"},{name:"--sf-color-mark-text",label:"Mark text"},{name:"--sf-color-code-bg",label:"Code background"},{name:"--sf-color-code-text",label:"Code text"},{name:"--sf-color-overlay",label:"Overlay"},{name:"--sf-color-black",label:"Black"},{name:"--sf-color-white",label:"White"},{name:"--sf-color-dim",label:"Dim (translucent black)"}],b=["50","100","200","300","400","500","600","700","800","900","950"],k=["primary","secondary","tertiary","action","neutral"],S={50:.97,100:.94,200:.88,300:.78,400:.65,500:.5,600:.37,700:.27,800:.17,900:.11,950:.06},E=[...k,"base"],P=[{label:"Base",expr:z=>`var(--sf-color-${z})`},{label:"Subtle",expr:z=>`var(--sf-color-${z}-subtle)`},{label:"Muted",expr:z=>`var(--sf-color-${z}-muted)`},{label:"Strong",expr:z=>`var(--sf-color-${z}-strong)`}],B=[...f,...p],I=[{heading:"Brand",items:[{name:"--sf-color-primary",label:"Primary",fg:"--sf-color-text--on-primary"},{name:"--sf-color-secondary",label:"Secondary",fg:"--sf-color-text--on-secondary"},{name:"--sf-color-tertiary",label:"Tertiary",fg:"--sf-color-text--on-tertiary"},{name:"--sf-color-action",label:"Action",fg:"--sf-color-text--on-action"},{name:"--sf-color-neutral",label:"Neutral",fg:"--sf-color-text--on-neutral"}]},{heading:"Status",items:[{name:"--sf-color-success",label:"Success",fg:"--sf-color-text--on-success"},{name:"--sf-color-warning",label:"Warning",fg:"--sf-color-text--on-warning"},{name:"--sf-color-info",label:"Info",fg:"--sf-color-text--on-info"},{name:"--sf-color-danger",label:"Danger",fg:"--sf-color-text--on-danger"}]},{heading:"Surfaces & text",items:[{name:"--sf-color-bg",label:"Bg",fg:"--sf-color-text"},{name:"--sf-color-surface",label:"Surface",fg:"--sf-color-text"},{name:"--sf-color-raised",label:"Raised",fg:"--sf-color-text"},{name:"--sf-color-inset",label:"Inset",fg:"--sf-color-text"},{name:"--sf-color-inverse",label:"Inverse",fg:"--sf-color-text--on-inverse"}]}],H=(Vo.colors??[]).filter(z=>z.name==="--sf-contrast-bias"||z.name==="--sf-contrast-threshold"),T=(Vo.colors??[]).filter(z=>z.name==="--sf-focus-ring-width");let R=K(!1),w=K(!1),A=K(!1),j=K(!1),O=K(!1),F=K(!1),D=K(!1),J=K(!1),ye=K("light"),Ae=va({}),Te=u(()=>parseFloat(e.overrides["--sf-lumlocker"]??"0.65"));function xe(z){const $=z.match(/^linear-gradient\(\s*in\s+(\S+)\s+(to\s+\w+|\d+deg)\s*,(.+)\)$/i);if(!$)return null;const M=$[1],V=$[2].trim(),te=V.startsWith("to "),Re=te?V.slice(3).trim():"right",ie=te?0:parseInt(V);let me=0,ge=0;const Le=[],Ue=$[3];for(let Ct=0;Ctte.name===M)?.default??"";return V?`oklch(from ${V} ${t(Te)} c h)`:""}let N=K(va(new Set(B.filter(z=>z.side==="light"&&!((B.find($=>$.colorKey===z.colorKey&&$.side==="dark")?.name??"")in e.overrides)).map(z=>z.colorKey)))),G=u(()=>{const z={};for(const $ of e.tokens)B.some(M=>M.name===$.name)&&(z[$.name]=$);return z});function Z(z){return z?e.overrides[z.name]??t(G)[z.name]?.value??z.default:""}function re(z){return B.find($=>$.name===z)}let Y=u(()=>h.find(z=>Object.entries(z.patch).every(([$,M])=>M===null?!($ in e.overrides):e.overrides[$]===M)));function de(z){const $=e.overrides[z.name];return $?parseFloat($):z.default}const be=[];for(let z=0;zLe.label===$);if(!Re)return z;const ie=de(Re),ge=`color-mix(in oklab, ${z} ${ie}%, ${te?M:V})`;return vo(ge)||ge}function ft(z,$){Ha.value;const M=S[$];if(M===void 0)return z;const V=`oklch(from ${z} ${M} c h)`;return vo(V)||V}function gt(z,$,M,V,te){return z==="base"?ft($,M):et($,M,V,te)}function Ot(z,$,M){e.onSet(z.name,M)}function _t(z,$,M){const V=!!($&&$.name in e.overrides);if(t(N).has(z)&&!V){const Re=Z(B.find(ie=>ie.name===M));$&&e.onSet($.name,ne(Re,z)),_(N,new Set([...t(N)].filter(ie=>ie!==z)),!0)}else $&&e.onBulkChange({[$.name]:null}),_(N,new Set([...t(N),z]),!0)}const mt=[{label:"Body text on surface",fg:"var(--sf-color-text)",bg:"var(--sf-color-surface)"},{label:"White on primary",fg:"#ffffff",bg:"var(--sf-color-primary)"},{label:"Primary on surface",fg:"var(--sf-color-primary)",bg:"var(--sf-color-surface)"}];function ae(z,$){Ha.value;const M=Is(z),V=Is($);return!M||!V?null:Ys(Do(...M),Do(...V))}var fe=Zp(),q=s(fe),X=r(s(q),4);oe(X,21,()=>I,z=>z.heading,(z,$)=>{var M=bp(),V=s(M),te=s(V),Re=r(V,2);oe(Re,16,()=>["light","dark"],ie=>ie,(ie,me)=>{var ge=gp(),Le=s(ge),Ue=s(Le),Ct=r(Le,2);oe(Ct,21,()=>t($).items,Bt=>Bt.name,(Bt,ut)=>{const $e=u(()=>l(`var(${t(ut).name})`,me,"transparent")),Lt=u(()=>l(`var(${t(ut).fg})`,me,"currentColor"));var yt=hp(),Ne=r(s(yt),2),Ve=s(Ne);C(()=>{it(yt,`background:${t($e)}; color:${t(Lt)}`),ee(yt,"title",`${t(ut).name} (${me}) — ${t($e)}`),y(Ve,t(ut).label)}),d(Bt,yt)}),C(()=>y(Ue,me==="light"?"L":"D")),d(ie,ge)}),C(()=>y(te,t($).heading)),d(z,M)});var ue=r(q,4),je=s(ue),Ze=r(s(je),2),U=s(Ze),W=r(je,2);{var se=z=>{var $=Cp(),M=r(ce($),2);oe(M,21,()=>be,([V,te])=>V.name,(V,te)=>{var Re=u(()=>Ta(t(te),2));let ie=()=>t(Re)[0],me=()=>t(Re)[1];const ge=u(()=>!!(me()&&me().name in e.overrides)),Le=u(()=>t(N).has(ie().colorKey)&&!t(ge));var Ue=_p(),Ct=s(Ue),Bt=s(Ct),ut=s(Bt),$e=r(Bt,2);{var Lt=We=>{var Ee=Yo(),Je=s(Ee);C(()=>{Ye(Ee,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${t(Le)?"border-indigo-500/40 bg-indigo-500/15 text-indigo-300":"border-white/10 text-slate-500 hover:text-slate-300"}`),y(Je,t(Le)?"Auto dark":"Manual dark")}),x("click",Ee,()=>_t(ie().colorKey,me(),ie().name)),d(We,Ee)};L($e,We=>{me()&&We(Lt)})}var yt=r(Ct,2);{let We=u(()=>`${ie().label} (light)`),Ee=u(()=>Z(ie())),Je=u(()=>ie().name in e.overrides);Gs(yt,{get label(){return t(We)},get tokenName(){return ie().name},get value(){return t(Ee)},get overridden(){return t(Je)},onChange:pt=>Ot(ie(),me(),pt),onReset:()=>e.onReset(ie().name)})}var Ne=r(yt,2);{var Ve=We=>{const Ee=u(()=>Z(ie())),Je=u(()=>t(Le)?ne(t(Ee),ie().colorKey):me()?Z(me()):t(Ee)),pt=u(Pe),Et=u(qe),ra=u(at),Qt=u(Ke);var ke=wp(),Fe=ce(ke),Ut=s(Fe),Pt=r(s(Ut),2);oe(Pt,20,()=>b,sa=>sa,(sa,ga)=>{const Da=u(()=>gt(ie().colorKey,t(Ee),ga,t(pt),t(ra)));var za=yp();let xo;var yr=s(za);ys(yr,()=>`${ie().colorKey}-${ga}`),C(()=>{ee(za,"title",`${ie().colorKey}-${ga} (light) — ${t(Da)}`),xo=it(za,"",xo,{background:t(Da)})}),d(sa,za)});var Xt=r(Ut,2),ma=r(s(Xt),2);oe(ma,20,()=>b,sa=>sa,(sa,ga)=>{const Da=u(()=>gt(ie().colorKey,t(Je),ga,t(Et),t(Qt)));var za=xp();let xo;var yr=s(za);ys(yr,()=>`${ie().colorKey}-${ga}`),C(()=>{ee(za,"title",`${ie().colorKey}-${ga} (dark) — ${t(Da)}`),xo=it(za,"",xo,{background:t(Da)})}),d(sa,za)});var la=r(Fe,2);{var ha=sa=>{var ga=kp();d(sa,ga)};L(la,sa=>{ie().colorKey==="base"&&sa(ha)})}d(We,ke)},St=u(()=>E.includes(ie().colorKey));L(Ne,We=>{t(St)&&We(Ve)})}var Ge=r(Ne,2);{var ve=We=>{{let Ee=u(()=>`${me().label} (dark mode)`),Je=u(()=>Z(me())),pt=u(()=>me().name in e.overrides);Gs(We,{get label(){return t(Ee)},get tokenName(){return me().name},get value(){return t(Je)},get overridden(){return t(pt)},onChange:Et=>e.onSet(me().name,Et),onReset:()=>e.onReset(me().name)})}},wt=We=>{const Ee=u(()=>ne(Z(ie()),ie().colorKey));var Je=Qn(),pt=s(Je);let Et;var ra=r(pt);C(Qt=>{ee(pt,"title",t(Ee)),Et=it(pt,"",Et,Qt),y(ra,` Dark: auto-derived (${t(Ee)??""})`)},[()=>({background:o(t(Ee),t(Ee))})]),d(We,Je)};L(Ge,We=>{me()&&!t(Le)?We(ve):me()&&t(Le)&&We(wt,1)})}C(()=>y(ut,ie().label)),d(V,Ue)}),d(z,$)};L(W,z=>{t(R)&&z(se)})}var Oe=r(ue,4),Ce=s(Oe),vt=r(s(Ce),2),He=s(vt),ct=r(Ce,2);{var rt=z=>{var $=Sp(),M=r(ce($),2);{let me=u(()=>"--sf-lumlocker"in e.overrides);xt(M,{label:"LumLocker lightness (L)",get value(){return t(Te)},min:0,max:1,step:.01,help:"--sf-lumlocker — fixed OKLCH L applied to lockable brand colors under [data-lumlocker]",get overridden(){return t(me)},onChange:ge=>e.onSet("--sf-lumlocker",String(ge)),onReset:()=>e.onReset("--sf-lumlocker")})}var V=r(M,2),te=r(s(V),2);oe(te,17,()=>c,me=>me.key,(me,ge)=>{var Le=zt(),Ue=ce(Le);oe(Ue,16,()=>["light","dark"],Ct=>Ct,(Ct,Bt)=>{const ut=u(()=>l(`var(--sf-color-${t(ge).key}-source-${Bt})`,Bt,"")),$e=u(()=>ze(t(ge).key,Bt));var Lt=Op(),yt=s(Lt),Ne=s(yt),Ve=r(Ne),St=s(Ve),Ge=r(yt,2),ve=r(Ge,4);C(wt=>{y(Ne,`${t(ge).label??""} `),y(St,Bt==="light"?"L":"D"),it(Ge,`background:${t(ut)||`var(--sf-color-${t(ge).key})`}`),it(ve,wt),ee(ve,"title",t($e))},[()=>`background:${o(t($e),t($e))}`]),d(Ct,Lt)}),d(me,Le)});var Re=r(V,2),ie=s(Re);C(()=>{Ye(Re,1,`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${Jo.value?"bg-indigo-600/25 border-indigo-500/40 text-indigo-200":"border-white/10 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(ie,Jo.value?"✓ LumLocker active on canvas — click to disable":"Preview LumLocker on live canvas")}),x("click",Re,()=>{Jo.value=!Jo.value}),d(z,$)};L(ct,z=>{t(J)&&z(rt)})}var ht=r(Oe,4),Me=s(ht),At=r(s(Me),2),Ft=s(At),aa=r(Me,2);{var Mt=z=>{var $=Up(),M=r(ce($),2);oe(M,21,()=>he,([V,te])=>V.name,(V,te)=>{var Re=u(()=>Ta(t(te),2));let ie=()=>t(Re)[0],me=()=>t(Re)[1];const ge=u(()=>!!(me()&&me().name in e.overrides)),Le=u(()=>t(N).has(ie().colorKey)&&!t(ge));var Ue=Bp(),Ct=s(Ue),Bt=s(Ct),ut=s(Bt),$e=r(Bt,2);{var Lt=Ee=>{var Je=Yo(),pt=s(Je);C(()=>{Ye(Je,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${t(Le)?"border-indigo-500/40 bg-indigo-500/15 text-indigo-300":"border-white/10 text-slate-500 hover:text-slate-300"}`),y(pt,t(Le)?"Auto dark":"Manual dark")}),x("click",Je,()=>_t(ie().colorKey,me(),ie().name)),d(Ee,Je)};L($e,Ee=>{me()&&Ee(Lt)})}var yt=r(Ct,2);{let Ee=u(()=>`${ie().label} light`),Je=u(()=>Z(ie())),pt=u(()=>ie().name in e.overrides);Gs(yt,{get label(){return t(Ee)},get tokenName(){return ie().name},get value(){return t(Je)},get overridden(){return t(pt)},onChange:Et=>e.onSet(ie().name,Et),onReset:()=>e.onReset(ie().name)})}var Ne=r(yt,2);{var Ve=Ee=>{{let Je=u(()=>`${me().label} dark`),pt=u(()=>Z(me())),Et=u(()=>me().name in e.overrides);Gs(Ee,{get label(){return t(Je)},get tokenName(){return me().name},get value(){return t(pt)},get overridden(){return t(Et)},onChange:ra=>e.onSet(me().name,ra),onReset:()=>e.onReset(me().name)})}},St=Ee=>{const Je=u(()=>ne(Z(ie()),ie().colorKey));var pt=Qn(),Et=s(pt);let ra;var Qt=r(Et);C(ke=>{ee(Et,"title",t(Je)),ra=it(Et,"",ra,ke),y(Qt,` Dark: auto-derived (${t(Je)??""})`)},[()=>({background:o(t(Je),t(Je))})]),d(Ee,pt)};L(Ne,Ee=>{me()&&!t(Le)?Ee(Ve):me()&&t(Le)&&Ee(St,1)})}var Ge=r(Ne,2),ve=s(Ge),wt=r(s(ve),2);oe(wt,21,()=>P,Ee=>Ee.label,(Ee,Je)=>{var pt=Lp(),Et=s(pt);C(()=>y(Et,t(Je).label)),d(Ee,pt)});var We=r(ve,2);oe(We,16,()=>[["L","light"],["D","dark"]],([Ee,Je])=>Ee,(Ee,Je)=>{var pt=u(()=>Ta(Je,2));let Et=()=>t(pt)[0],ra=()=>t(pt)[1];var Qt=Ip(),ke=s(Qt),Fe=s(ke),Ut=r(ke,2);oe(Ut,21,()=>P,Pt=>Pt.label,(Pt,Xt)=>{const ma=u(()=>l(t(Xt).expr(ie().colorKey),ra(),""));var la=Pp();let ha;var sa=s(la);{let ga=u(()=>`${ie().colorKey}-${t(Xt).label.toLowerCase()}`);ys(sa,()=>t(ga))}C(ga=>{ee(la,"title",ga),ha=it(la,"",ha,{background:t(ma)})},[()=>`${ie().colorKey}-${t(Xt).label.toLowerCase()} (${ra()}) — ${t(ma)}`]),d(Pt,la)}),C(()=>y(Fe,Et())),d(Ee,Qt)}),C(()=>y(ut,ie().label)),d(V,Ue)}),d(z,$)};L(aa,z=>{t(j)&&z(Mt)})}var Rt=r(ht,4),na=s(Rt),da=r(s(na),2),fa=s(da),_e=r(na,2);{var kt=z=>{var $=Ep(),M=r(ce($),2);oe(M,17,()=>H,ge=>ge.name,(ge,Le)=>{Ko(ge,{get knob(){return t(Le)},get overrides(){return e.overrides},onChange:(Ue,Ct)=>Ct===null?e.onReset(Ue):e.onSet(Ue,Ct)})});var V=r(M,2),te=s(V);oe(te,17,()=>mt,ge=>ge.label,(ge,Le)=>{const Ue=u(()=>ae(t(Le).fg,t(Le).bg));var Ct=zt(),Bt=ce(Ct);{var ut=$e=>{var Lt=Ap(),yt=s(Lt),Ne=r(yt,2),Ve=s(Ne),St=r(Ne,2),Ge=s(St),ve=r(St,2),wt=s(ve);C((We,Ee)=>{it(yt,We),y(Ve,t(Le).label),y(Ge,`${Ee??""}:1`),Ye(ve,1,`text-[9px] font-bold px-1.5 py-0.5 rounded ${t(Ue)>=4.5?"bg-emerald-500/20 text-emerald-300":"bg-amber-500/20 text-amber-300"}`),y(wt,t(Ue)>=4.5?"AA":t(Ue)>=3?"AA-L":"✗")},[()=>`background:${o(t(Le).bg,t(Le).bg)}; color:${o(t(Le).fg,t(Le).fg)}`,()=>t(Ue).toFixed(2)]),d($e,Lt)};L(Bt,$e=>{t(Ue)!==null&&$e(ut)})}d(ge,Ct)});var Re=r(te,2);{var ie=ge=>{var Le=zp();x("click",Le,()=>e.onSelectDomain?.("wcag")),d(ge,Le)};L(Re,ge=>{e.onSelectDomain&&ge(ie)})}var me=r(V,2);oe(me,17,()=>T,ge=>ge.name,(ge,Le)=>{Ko(ge,{get knob(){return t(Le)},get overrides(){return e.overrides},onChange:(Ue,Ct)=>Ct===null?e.onReset(Ue):e.onSet(Ue,Ct)})}),d(z,$)};L(_e,z=>{t(w)&&z(kt)})}var Tt=r(Rt,4),Xe=s(Tt),It=r(s(Xe),2),ot=s(It),nt=r(Xe,2);{var qt=z=>{const $=u(()=>e.overrides["--sf-color-primary-source-light"]??f.find(We=>We.name==="--sf-color-primary-source-light")?.default??"oklch(0.47 0.27 264)"),M=u(()=>e.overrides["--sf-color-primary-source-dark"]),V=u(()=>t(M)??(!t(N).has("primary")||t(M)?f.find(We=>We.name==="--sf-color-primary-source-dark")?.default??ne(t($),"primary"):ne(t($),"primary"))),te=u(()=>t(ye)==="light"?t($):t(V)),Re=u(()=>t(ye)==="light"?Pe():qe()),ie=u(()=>t(ye)==="light"?at():Ke()),me=u(()=>t(ye)==="light"?Pe():qe()),ge=u(()=>t(ye)==="light"?at():Ke());var Le=Np(),Ue=r(ce(Le),2);oe(Ue,21,()=>h,We=>We.label,(We,Ee)=>{var Je=Rp(),pt=s(Je),Et=s(pt),ra=r(pt,2),Qt=s(ra);C(()=>{Ye(Je,1,`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${t(Y)?.label===t(Ee).label?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Et,t(Ee).label),y(Qt,t(Ee).desc)}),x("click",Je,()=>e.onBulkChange(t(Ee).patch)),d(We,Je)});var Ct=r(Ue,2),Bt=r(s(Ct),2);oe(Bt,21,()=>m.filter(We=>We.step==="tint"),We=>We.name,(We,Ee)=>{{let Je=u(()=>de(t(Ee))),pt=u(()=>t(Ee).name in e.overrides);xt(We,{get label(){return t(Ee).label},get value(){return t(Je)},min:0,max:100,step:1,unit:"%",get overridden(){return t(pt)},onChange:Et=>e.onSet(t(Ee).name,`${Et}%`),onReset:()=>e.onReset(t(Ee).name)})}});var ut=r(Ct,2),$e=r(s(ut),2);oe($e,21,()=>m.filter(We=>We.step==="shade"),We=>We.name,(We,Ee)=>{{let Je=u(()=>de(t(Ee))),pt=u(()=>t(Ee).name in e.overrides);xt(We,{get label(){return t(Ee).label},get value(){return t(Je)},min:0,max:100,step:1,unit:"%",get overridden(){return t(pt)},onChange:Et=>e.onSet(t(Ee).name,`${Et}%`),onReset:()=>e.onReset(t(Ee).name)})}});var Lt=r(ut,2),yt=s(Lt),Ne=r(s(yt),2);oe(Ne,20,()=>["light","dark"],We=>We,(We,Ee)=>{var Je=Yo(),pt=s(Je);C(()=>{Ye(Je,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${t(ye)===Ee?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),y(pt,Ee==="light"?"Light":"Dark")}),x("click",Je,()=>{_(ye,Ee,!0)}),d(We,Je)});var Ve=r(yt,2);oe(Ve,21,()=>m,We=>We.name,(We,Ee)=>{const Je=u(()=>de(t(Ee))),pt=u(()=>t(Ee).label),Et=u(()=>et(t(te),t(pt),t(Re),t(ie)));var ra=Tp(),Qt=s(ra),ke=s(Qt),Fe=r(Qt,2),Ut=s(Fe);ys(Ut,()=>`primary-${t(pt)}`);var Pt=r(Fe,2),Xt=s(Pt);C((ma,la,ha)=>{y(ke,ma),it(Fe,la),ee(Fe,"title",ha),y(Xt,t(pt))},[()=>Math.round(t(Je)),()=>`background:${t(Et)}; height: ${Math.max(t(Je)/100*56,6)}px`,()=>`primary-${t(pt)} (${t(ye)}) · mix ${Math.round(t(Je))}%`]),d(We,ra)});var St=r(Lt,2),Ge=s(St),ve=r(s(Ge),2);oe(ve,20,()=>["light","dark"],We=>We,(We,Ee)=>{var Je=Yo(),pt=s(Je);C(()=>{Ye(Je,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${t(ye)===Ee?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),y(pt,Ee==="light"?"Light":"Dark")}),x("click",Je,()=>{_(ye,Ee,!0)}),d(We,Je)});var wt=r(Ge,2);oe(wt,16,()=>k,We=>We,(We,Ee)=>{const Je=u(()=>e.overrides[`--sf-color-${Ee}-source-light`]??f.find(Pt=>Pt.name===`--sf-color-${Ee}-source-light`)?.default??"oklch(0.5 0.15 264)"),pt=u(()=>`--sf-color-${Ee}-source-dark`),Et=u(()=>e.overrides[t(pt)]??(t(N).has(Ee)&&!e.overrides[t(pt)]?ne(t(Je),Ee):f.find(Pt=>Pt.name===t(pt))?.default??ne(t(Je),Ee))),ra=u(()=>t(ye)==="light"?t(Je):t(Et));var Qt=Mp(),ke=s(Qt),Fe=s(ke),Ut=r(ke,2);oe(Ut,20,()=>b,Pt=>Pt,(Pt,Xt)=>{const ma=u(()=>et(t(ra),Xt,t(me),t(ge)));var la=Dp(),ha=s(la);ys(ha,()=>`${Ee}-${Xt}`),C(()=>{it(la,`background:${t(ma)}`),ee(la,"title",`${Ee}-${Xt} (${t(ye)})`)}),d(Pt,la)}),C(()=>y(Fe,Ee)),d(We,Qt)}),d(z,Le)};L(nt,z=>{t(A)&&z(qt)})}var jt=r(Tt,4),Dt=s(jt),Vt=r(s(Dt),2),Wt=s(Vt),ua=r(Dt,2);{var Ua=z=>{var $=Vp(),M=r(ce($),2);oe(M,16,()=>["brand","fade"],V=>V,(V,te)=>{var Re=qp(),ie=ce(Re),me=s(ie),ge=r(ie,2);oe(ge,21,()=>i.filter(Le=>Le.group===te),Le=>Le.name,(Le,Ue)=>{const Ct=u(()=>`var(${t(Ue).name})`),Bt=u(()=>Q(t(Ue)));var ut=Hp(),$e=s(ut),Lt=r($e,2),yt=s(Lt),Ne=s(yt),Ve=s(Ne),St=r(Ne,2);{var Ge=ke=>{var Fe=Fp();x("click",Fe,()=>{delete Ae[t(Ue).name],e.onReset(t(Ue).name)}),d(ke,Fe)};L(St,ke=>{t(Ue).name in e.overrides&&ke(Ge)})}var ve=r(yt,2);{var wt=ke=>{var Fe=jp(),Ut=r(s(Fe),2);oe(Ut,16,()=>["top","right","bottom","left"],Pt=>Pt,(Pt,Xt)=>{var ma=Yo(),la=s(ma);C(()=>{Ye(ma,1,`flex-1 py-0.5 rounded text-[9px] border transition-all cursor-pointer capitalize ${t(Bt).dir===Xt?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),y(la,Xt)}),x("click",ma,()=>we(t(Ue),"dir",Xt)),d(Pt,ma)}),d(ke,Fe)},We=ke=>{var Fe=Gp(),Ut=r(s(Fe),2),Pt=r(Ut,2),Xt=s(Pt);C(()=>{Jt(Ut,t(Bt).angle),y(Xt,`${t(Bt).angle??""}°`)}),x("input",Ut,ma=>we(t(Ue),"angle",parseInt(ma.target.value))),d(ke,Fe)};L(ve,ke=>{t(Ue).kind==="dir"&&t(Ue).group!=="fade"?ke(wt):t(Ue).kind!=="dir"&&ke(We,1)})}var Ee=r(ve,2),Je=r(s(Ee),2),pt=r(Je,2),Et=r(Ee,2),ra=r(s(Et)),Qt=r(Et,2);C(ke=>{it($e,ke),y(Ve,t(Ue).label),Jt(Je,t(Bt).stop1),Jt(pt,t(Bt).stop2),y(ra,` ${t(Ue).formula??""}`),Jt(Qt,e.overrides[t(Ue).name]??"")},[()=>`background:${n(t(Ct),t(Ct))}`]),x("change",Je,ke=>we(t(Ue),"stop1",ke.target.value.trim())),x("change",pt,ke=>we(t(Ue),"stop2",ke.target.value.trim())),x("change",Qt,ke=>{const Fe=ke.target.value.trim();delete Ae[t(Ue).name],Fe?e.onSet(t(Ue).name,Fe):e.onReset(t(Ue).name)}),d(Le,ut)}),C(()=>y(me,te==="brand"?"Brand & surface":"Edge fades")),d(V,Re)}),d(z,$)};L(ua,z=>{t(D)&&z(Ua)})}var Pa=r(jt,4),Aa=s(Pa),bt=r(s(Aa),2),Se=s(bt),Qe=r(Aa,2);{var lt=z=>{var $=Kp(),M=r(ce($),2);oe(M,20,()=>[["light dark","light dark (default)"],["light","Light only"],["dark","Dark only"]],([V,te])=>V,(V,te)=>{var Re=u(()=>Ta(te,2));let ie=()=>t(Re)[0],me=()=>t(Re)[1];const ge=u(()=>e.overrides["--sf-color-scheme"]??"light dark");var Le=Yo(),Ue=s(Le);C(()=>{Ye(Le,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(ge)===ie()?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Ue,me())}),x("click",Le,()=>ie()==="light dark"?e.onReset("--sf-color-scheme"):e.onSet("--sf-color-scheme",ie())),d(V,Le)}),d(z,$)};L(Qe,z=>{t(F)&&z(lt)})}var Be=r(Pa,4),De=s(Be),dt=r(s(De),2),tt=s(dt),Ie=r(De,2);{var st=z=>{var $=Yp(),M=r(ce($),2);oe(M,21,()=>v,V=>V.name,(V,te)=>{const Re=u(()=>o(`var(${t(te).name})`,""));var ie=Wp(),me=s(ie),ge=s(me),Le=r(me,2);{let Ue=u(()=>e.overrides[t(te).name]??""),Ct=u(()=>t(Re)?`auto-derived · ${t(Re)}`:"auto-derived"),Bt=u(()=>t(te).name in e.overrides);Qa(Le,{get token(){return t(te).name},get value(){return t(Ue)},get placeholder(){return t(Ct)},get isOverridden(){return t(Bt)},onSet:ut=>e.onSet(t(te).name,ut),onReset:()=>e.onReset(t(te).name)})}C(()=>y(ge,t(te).label)),d(V,ie)}),d(z,$)};L(Ie,z=>{t(O)&&z(st)})}C(()=>{ee(je,"aria-expanded",t(R)),y(U,t(R)?"▲":"▼"),ee(Ce,"aria-expanded",t(J)),y(He,t(J)?"▲":"▼"),ee(Me,"aria-expanded",t(j)),y(Ft,t(j)?"▲":"▼"),ee(na,"aria-expanded",t(w)),y(fa,t(w)?"▲":"▼"),ee(Xe,"aria-expanded",t(A)),y(ot,t(A)?"▲":"▼"),ee(Dt,"aria-expanded",t(D)),y(Wt,t(D)?"▲":"▼"),ee(Aa,"aria-expanded",t(F)),y(Se,t(F)?"▲":"▼"),ee(De,"aria-expanded",t(O)),y(tt,t(O)?"▲":"▼")}),x("click",je,()=>{_(R,!t(R))}),x("click",Ce,()=>{_(J,!t(J))}),x("click",Me,()=>{_(j,!t(j))}),x("click",na,()=>{_(w,!t(w))}),x("click",Xe,()=>{_(A,!t(A))}),x("click",Dt,()=>{_(D,!t(D))}),x("click",Aa,()=>{_(F,!t(F))}),x("click",De,()=>{_(O,!t(O))}),d(a,fe),ta()}oa(["click","input","change"]);var Jp=g('
Aa Aa
'),Qp=g('
min
max
'),$p=g(''),em=g(''),tm=g('
'),am=g('
Modular scale ratio
'),om=g('
'),sm=g('
clamp( … )
');function Bs(a,e){ea(e,!0);let o=Sa(e,"unit",3,"rem"),n=Sa(e,"minLabel",3,"Min"),l=Sa(e,"maxLabel",3,"Max"),i=Sa(e,"overridden",3,!1),c=Sa(e,"ratioMin_bound",3,1.05),f=Sa(e,"ratioMax_bound",3,1.8),p=Sa(e,"previewKind",3,"none");function m(ne){return Math.min(e.max,Math.max(e.min,ne))}let h=u(()=>(e.minValue-e.min)/(e.max-e.min)*100),v=u(()=>(e.maxValue-e.min)/(e.max-e.min)*100);function b(ne){return Math.min(f(),Math.max(c(),ne))}let k=u(()=>e.ratioPresets?.find(ne=>e.ratioMin!==void 0&&Math.abs(ne.value-e.ratioMin)<.0015)?.value),S=u(()=>e.ratioPresets?.find(ne=>e.ratioMax!==void 0&&Math.abs(ne.value-e.ratioMax)<.0015)?.value);var E=sm(),P=s(E),B=s(P),I=s(B),H=r(B,2),T=r(s(H)),R=s(T),w=r(T,2),A=s(w),j=r(P,2),O=r(s(j),2),F=r(O,2),D=r(F,2),J=r(D,2),ye=r(J,2),Ae=r(j,2),Te=s(Ae),xe=s(Te),pe=s(xe),Q=r(xe,2),le=r(Te,2),we=s(le),ze=s(we),N=r(we,2),G=r(Ae,2);{var Z=ne=>{var Pe=Jp(),qe=s(Pe),at=r(s(qe)),Ke=s(at),et=r(qe,2),ft=r(s(et)),gt=s(ft);C((Ot,_t,mt,ae)=>{it(qe,Ot),y(Ke,_t),it(et,mt),y(gt,ae)},[()=>`font-size:${Math.min(e.minValue,2)}rem`,()=>n().toLowerCase(),()=>`font-size:${Math.min(e.maxValue,2.6)}rem`,()=>l().toLowerCase()]),d(ne,Pe)},re=ne=>{var Pe=Qp(),qe=s(Pe),at=r(qe,4);C((Ke,et)=>{it(qe,Ke),it(at,et)},[()=>`width:${Math.min(e.minValue*28,120)}px`,()=>`width:${Math.min(e.maxValue*28,200)}px`]),d(ne,Pe)};L(G,ne=>{p()==="type"?ne(Z):p()==="space"&&ne(re,1)})}var Y=r(G,2);{var de=ne=>{var Pe=am(),qe=r(s(Pe),2);oe(qe,21,()=>[{side:n(),value:e.ratioMin,active:t(k),onChange:e.onRatioMinChange},{side:l(),value:e.ratioMax,active:t(S),onChange:e.onRatioMaxChange}],at=>at.side,(at,Ke)=>{var et=tm(),ft=s(et),gt=s(ft),Ot=r(ft,2),_t=s(Ot);{var mt=X=>{var ue=$p();ue.value=ue.__value="",d(X,ue)};L(_t,X=>{t(Ke).active===void 0&&X(mt)})}var ae=r(_t);oe(ae,17,()=>e.ratioPresets,X=>X.value,(X,ue)=>{var je=em(),Ze=s(je),U={};C(W=>{y(Ze,t(ue).label),U!==(U=W)&&(je.value=(je.__value=W)??"")},[()=>String(t(ue).value)]),d(X,je)});var fe;Na(Ot);var q=r(Ot,2);ee(q,"step",.001),C(X=>{y(gt,t(Ke).side),ee(Ot,"aria-label",`${t(Ke).side} modular scale ratio preset`),fe!==(fe=X)&&(Ot.value=(Ot.__value=X)??"",Ia(Ot,X)),ee(q,"aria-label",`${t(Ke).side} modular scale custom ratio`),ee(q,"min",c()),ee(q,"max",f()),Jt(q,t(Ke).value)},[()=>t(Ke).active!==void 0?String(t(Ke).active):""]),x("change",Ot,X=>{const ue=parseFloat(X.target.value);Number.isFinite(ue)&&t(Ke).onChange?.(b(ue))}),x("change",q,X=>{const ue=parseFloat(X.target.value);Number.isFinite(ue)&&t(Ke).onChange?.(b(ue))}),d(at,et)}),d(ne,Pe)};L(Y,ne=>{e.ratioPresets&&ne(de)})}var be=r(Y,2);{var he=ne=>{var Pe=om(),qe=s(Pe);x("click",qe,function(...at){e.onReset?.apply(this,at)}),d(ne,Pe)};L(be,ne=>{i()&&e.onReset&&ne(he)})}C(ne=>{Ye(E,1,`rounded-xl border p-3 ${i()?"bg-indigo-500/8 border-indigo-500/25":"bg-white/4 border-white/8"}`,"svelte-iy59wr"),y(I,e.title),y(R,`${e.minValue??""}${o()??""}`),y(A,`${e.maxValue??""}${o()??""}`),it(O,ne),ee(F,"min",e.min),ee(F,"max",e.max),ee(F,"step",e.step),Jt(F,e.minValue),ee(F,"aria-label",`${e.title} min`),ee(D,"min",e.min),ee(D,"max",e.max),ee(D,"step",e.step),Jt(D,e.maxValue),ee(D,"aria-label",`${e.title} max`),it(J,`left: calc(${t(h)}% - 6px)`),it(ye,`left: calc(${t(v)}% - 6px)`),y(pe,n()),ee(Q,"min",e.min),ee(Q,"max",e.max),ee(Q,"step",e.step),Jt(Q,e.minValue),y(ze,l()),ee(N,"min",e.min),ee(N,"max",e.max),ee(N,"step",e.step),Jt(N,e.maxValue)},[()=>`left:${Math.min(t(h),t(v))}%; right:${100-Math.max(t(h),t(v))}%`]),x("input",F,ne=>e.onMinChange(Math.min(m(parseFloat(ne.target.value)),e.maxValue))),x("input",D,ne=>e.onMaxChange(Math.max(m(parseFloat(ne.target.value)),e.minValue))),x("change",Q,ne=>e.onMinChange(m(parseFloat(ne.target.value)||e.min))),x("change",N,ne=>e.onMaxChange(m(parseFloat(ne.target.value)||e.max))),d(a,E),ta()}oa(["input","change","click"]);var rm=g(''),xs=g(''),Ar=g(''),nm=g('
'),lm=g('
Google Font
',1),im=g(''),cm=g(""),zr=g(''),zo=g(""),dm=g('
Tracking
'),fm=g('
Max width
'),um=g(''),pm=g('
The quick brown fox
Size
Line height
Weight
',1),$n=g(''),el=g('
'),mm=g(""),vm=g('
'),hm=g('
Emphasis style
External marker
',1),tl=g(''),gm=g('
'),bm=g('

Named weight tokens. Override if your font uses non-standard axis values.

',1),ym=g('
'),xm=g('
',1),km=g('
'),wm=g('
'),_m=g(`

Utopia-style fluid scale. Each endpoint has three values — viewport width, - base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.

Line height scale
Letter-spacing scale

Overriding these propagates to heading sizes that reference them.

`,1),Cm=g('
Aa
'),Om=g('
'),Er=g(''),Sm=g('
'),Lm=g('

Per-text-size max-width caps on .sf-text-* elements. Set to none to remove the constraint; use ch units for character-based measures.

',1),Pm=g('

Advanced OpenType and variable-font axes. Leave as normal unless your font supports these features.

Numeric figures
Optical sizing
Font features
Variation
',1),Im=g('
');function Bm(a,e){ea(e,!0);const o=[{label:"Minor Second — 1.067",value:1.067},{label:"Major Second — 1.125",value:1.125},{label:"Minor Third — 1.200",value:1.2},{label:"Major Third — 1.250",value:1.25},{label:"Perfect Fourth — 1.333",value:1.333},{label:"Aug. Fourth — 1.414",value:1.414},{label:"Golden — 1.618",value:1.618}],n=[{label:"System sans-serif",value:""},{label:"Geometric (Avenir, Montserrat…)",value:"var(--sf-font-geometric)"},{label:"Humanist (Seravek, Gill Sans…)",value:"var(--sf-font-humanist)"},{label:"Slab serif (Rockwell, Roboto Slab…)",value:"var(--sf-font-slab)"},{label:"Inter",value:"Inter, system-ui, sans-serif"},{label:"Georgia (serif)",value:"Georgia, 'Times New Roman', serif"},{label:"Merriweather (serif)",value:"'Merriweather', Georgia, serif"},{label:"JetBrains Mono",value:"'JetBrains Mono', 'Fira Code', monospace"}],l=[{label:"Same as body",value:""},{label:"Geometric (Avenir, Montserrat…)",value:"var(--sf-font-geometric)"},{label:"Humanist (Seravek, Gill Sans…)",value:"var(--sf-font-humanist)"},{label:"Slab serif (Rockwell, Roboto Slab…)",value:"var(--sf-font-slab)"},{label:"Inter",value:"Inter, system-ui, sans-serif"},{label:"Georgia (serif)",value:"Georgia, 'Times New Roman', serif"},{label:"Impact / condensed",value:"Impact, 'Arial Narrow', sans-serif"}],i=[{label:"System mono",value:"ui-monospace, monospace"},{label:"JetBrains Mono",value:"'JetBrains Mono', 'Fira Code', monospace"},{label:"Source Code Pro",value:"'Source Code Pro', 'Courier New', monospace"}],c=["Inter","Roboto","Open Sans","Lato","Montserrat","Poppins","Source Sans 3","Raleway","Nunito","Work Sans","Manrope","DM Sans","Outfit","Plus Jakarta Sans","Geist","Space Grotesk","Figtree","Merriweather","Playfair Display","Lora","Source Serif 4","Roboto Slab","IBM Plex Sans","IBM Plex Mono","JetBrains Mono","Fira Code","Space Mono"],f=[{label:"balance",value:"balance"},{label:"pretty",value:"pretty"},{label:"normal",value:"normal"}],p=["100","200","300","400","500","600","700","800","900"],m={"--sf-font-weight-body":"400","--sf-font-weight-heading":"600","--sf-font-weight-display":"700","--sf-font-weight-interactive":"600"},h=[{label:"2xs",factor:.64},{label:"xs",factor:.75},{label:"s",factor:.875},{label:"m",factor:1},{label:"l",factor:1.125},{label:"xl",factor:1.25},{label:"2xl",factor:1.5},{label:"3xl",factor:1.875},{label:"4xl",factor:2.25}],v=[{label:"Tight",token:"--sf-tracking-tight",default:-.025},{label:"Normal",token:"--sf-tracking-normal",default:0},{label:"Wide",token:"--sf-tracking-wide",default:.025},{label:"Wider",token:"--sf-tracking-wider",default:.05},{label:"Widest",token:"--sf-tracking-widest",default:.1}],b=[{label:"Tight",token:"--sf-leading-tight",default:1.1},{label:"Snug",token:"--sf-leading-snug",default:1.3},{label:"Normal",token:"--sf-leading-normal",default:1.5},{label:"Relaxed",token:"--sf-leading-relaxed",default:1.625}],k=[{label:"2xs",value:"var(--sf-text-2xs)",approx:.64},{label:"xs",value:"var(--sf-text-xs)",approx:.75},{label:"s",value:"var(--sf-text-s)",approx:.875},{label:"m",value:"var(--sf-text-m)",approx:1},{label:"l",value:"var(--sf-text-l)",approx:1.125},{label:"xl",value:"var(--sf-text-xl)",approx:1.25},{label:"2xl",value:"var(--sf-text-2xl)",approx:1.5},{label:"3xl",value:"var(--sf-text-3xl)",approx:1.875},{label:"4xl",value:"var(--sf-text-4xl)",approx:2.25},{label:"display-s",value:"var(--sf-text-display-s)",approx:2.6},{label:"display-m",value:"var(--sf-text-display-m)",approx:3.2},{label:"display-l",value:"var(--sf-text-display-l)",approx:3.8}],S=b.map(M=>({label:M.label,value:`var(${M.token})`,num:M.default})),E=v.map(M=>({label:M.label,value:`var(${M.token})`,em:M.default})),P=[{id:"body",label:"Body",size:"--sf-body-font-size",lh:"--sf-body-line-height",wt:"--sf-body-font-weight",ls:null,dSize:"var(--sf-text-m)",dLh:"var(--sf-leading-normal)",dWt:"400",dLs:""},{id:"h1",label:"H1",size:"--sf-h1-size",lh:"--sf-h1-line-height",wt:"--sf-h1-font-weight",ls:"--sf-h1-letter-spacing",dSize:"var(--sf-text-4xl)",dLh:"var(--sf-leading-tight)",dWt:"600",dLs:"var(--sf-tracking-tight)"},{id:"h2",label:"H2",size:"--sf-h2-size",lh:"--sf-h2-line-height",wt:"--sf-h2-font-weight",ls:"--sf-h2-letter-spacing",dSize:"var(--sf-text-3xl)",dLh:"var(--sf-leading-tight)",dWt:"600",dLs:"var(--sf-tracking-tight)"},{id:"h3",label:"H3",size:"--sf-h3-size",lh:"--sf-h3-line-height",wt:"--sf-h3-font-weight",ls:"--sf-h3-letter-spacing",dSize:"var(--sf-text-2xl)",dLh:"var(--sf-leading-snug)",dWt:"600",dLs:"var(--sf-tracking-normal)"},{id:"h4",label:"H4",size:"--sf-h4-size",lh:"--sf-h4-line-height",wt:"--sf-h4-font-weight",ls:"--sf-h4-letter-spacing",dSize:"var(--sf-text-xl)",dLh:"var(--sf-leading-snug)",dWt:"600",dLs:"var(--sf-tracking-normal)"},{id:"h5",label:"H5",size:"--sf-h5-size",lh:"--sf-h5-line-height",wt:"--sf-h5-font-weight",ls:"--sf-h5-letter-spacing",dSize:"var(--sf-text-l)",dLh:"var(--sf-leading-normal)",dWt:"600",dLs:"var(--sf-tracking-normal)"},{id:"h6",label:"H6",size:"--sf-h6-size",lh:"--sf-h6-line-height",wt:"--sf-h6-font-weight",ls:"--sf-h6-letter-spacing",dSize:"var(--sf-text-m)",dLh:"var(--sf-leading-normal)",dWt:"600",dLs:"var(--sf-tracking-wide)"}];let B=K("h1"),I=u(()=>P.find(M=>M.id===t(B)));const H=Vo.typography??[];function T(M,V){const te=parseFloat(e.overrides[M]??"");return isNaN(te)?V:te}let R=u(()=>T("--sf-text-ratio-min",1.25)),w=u(()=>T("--sf-text-ratio-max",1.333)),A=u(()=>T("--sf-text-base-min",1)),j=u(()=>T("--sf-text-base-max",1.25)),O=u(()=>T("--sf-text-display-base-min",2.4)),F=u(()=>T("--sf-text-display-base-max",3)),D=u(()=>T("--sf-leading-taper",0)),J=u(()=>T("--sf-text-scale",1)),ye=u(()=>T("--sf-fluid-min-vw",22.5)),Ae=u(()=>T("--sf-fluid-max-vw",90)),Te=K(!1),xe=K(!1),pe=K(!1),Q=K(!1),le=K(!1),we=K(!1),ze=K(!1),N=K(!1),G=K(!1),Z=K(!1),re=u(()=>e.overrides["--sf-font-body"]??""),Y=u(()=>e.overrides["--sf-font-heading"]??""),de=u(()=>e.overrides["--sf-font-mono"]??"ui-monospace, monospace"),be=K(""),he=K("body");function ne(M){const V=e.overrides[M.token];return V?parseFloat(V.replace("em","")):M.default}function Pe(M){return T(M.token,M.default)}function qe(M){if(!M.trim())return;const V=`gf-${M.replace(/\s+/g,"-")}`;if(!document.getElementById(V)){const te=document.createElement("link");te.id=V,te.rel="stylesheet",te.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(M)}:wght@100;200;300;400;500;600;700;800;900&display=swap`,document.head.appendChild(te)}}function at(M,V){if(!M.trim())return;qe(M);const te=V==="body"?"--sf-font-body":"--sf-font-heading";e.onSet(te,`'${M}', sans-serif`)}function Ke(M,V){return M?e.overrides[M]??V:V}function et(M,V,te){M&&(V===te?e.onReset(M):e.onSet(M,V))}let ft=u(()=>{const M=Ke(t(I).size,t(I).dSize),V=k.find(Re=>Re.value===M),te=(t(A)+t(j))/2;return Math.min((V?.approx??1)*te*t(J),2.4)}),gt=u(()=>{const M=Ke(t(I).wt,t(I).dWt),V=parseInt(M);return isNaN(V)?600:V}),Ot=u(()=>{if(!t(I).ls)return 0;const M=Ke(t(I).ls,t(I).dLs),V=E.find(Re=>Re.value===M);if(V)return V.em;const te=parseFloat(M.replace("em",""));return isNaN(te)?0:te}),_t=u(()=>{const M=Ke(t(I).lh,t(I).dLh),V=S.find(Re=>Re.value===M);if(V)return V.num;const te=parseFloat(M);return isNaN(te)?1.3:te});var mt=Im(),ae=s(mt),fe=s(ae),q=r(s(fe),2),X=s(q),ue=r(fe,2);{var je=M=>{var V=lm(),te=ce(V);oe(te,17,()=>[{label:"Body",token:"--sf-font-body",current:t(re),opts:n},{label:"Heading",token:"--sf-font-heading",current:t(Y),opts:l},{label:"Mono",token:"--sf-font-mono",current:t(de),opts:i}],Ne=>Ne.token,(Ne,Ve)=>{var St=nm(),Ge=s(St),ve=s(Ge),wt=r(Ge,2),We=s(wt);oe(We,17,()=>t(Ve).opts,ke=>ke.label,(ke,Fe)=>{var Ut=rm(),Pt=s(Ut),Xt={};C(()=>{y(Pt,t(Fe).label),Xt!==(Xt=t(Fe).value)&&(Ut.value=(Ut.__value=t(Fe).value)??"")}),d(ke,Ut)});var Ee=r(We);{var Je=ke=>{var Fe=xs(),Ut=s(Fe),Pt={};C(Xt=>{y(Ut,`Custom: ${Xt??""}`),Pt!==(Pt=t(Ve).current)&&(Fe.value=(Fe.__value=t(Ve).current)??"")},[()=>t(Ve).current.split(",")[0].replace(/['"]/g,"")]),d(ke,Fe)},pt=u(()=>t(Ve).current&&!t(Ve).opts.some(ke=>ke.value===t(Ve).current));L(Ee,ke=>{t(pt)&&ke(Je)})}var Et;Na(wt);var ra=r(wt,2);{var Qt=ke=>{var Fe=Ar();x("click",Fe,()=>e.onReset(t(Ve).token)),d(ke,Fe)};L(ra,ke=>{t(Ve).token in e.overrides&&ke(Qt)})}C(()=>{y(ve,t(Ve).label),it(wt,`font-family: ${t(Ve).current||"inherit"}`),Et!==(Et=t(Ve).current)&&(wt.value=(wt.__value=t(Ve).current)??"",Ia(wt,t(Ve).current))}),x("change",wt,ke=>{const Fe=ke.target.value;Fe?e.onSet(t(Ve).token,Fe):e.onReset(t(Ve).token)}),d(Ne,St)});var Re=r(te,2),ie=r(s(Re),2),me=s(ie),ge=s(me);ge.value=ge.__value="";var Le=r(ge);oe(Le,16,()=>c,Ne=>Ne,(Ne,Ve)=>{var St=xs(),Ge=s(St),ve={};C(()=>{y(Ge,Ve),ve!==(ve=Ve)&&(St.value=(St.__value=Ve)??"")}),d(Ne,St)});var Ue;Na(me);var Ct=r(me,2),Bt=s(Ct),ut=r(Bt,2),$e=r(ie,2),Lt=r($e,2),yt=s(Lt);C(()=>{Ue!==(Ue=t(be))&&(me.value=(me.__value=t(be))??"",Ia(me,t(be))),Ye(Bt,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${t(he)==="body"?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400"}`),Ye(ut,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${t(he)==="heading"?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400"}`),Jt($e,t(be)),y(yt,`Load & apply to ${t(he)??""}`)}),x("change",me,Ne=>{_(be,Ne.target.value,!0)}),x("click",Bt,()=>{_(he,"body")}),x("click",ut,()=>{_(he,"heading")}),x("input",$e,Ne=>{_(be,Ne.target.value,!0)}),x("click",Lt,()=>at(t(be),t(he))),d(M,V)};L(ue,M=>{t(Te)&&M(je)})}var Ze=r(ae,4),U=s(Ze),W=r(s(U),2),se=s(W),Oe=r(U,2);{var Ce=M=>{var V=pm(),te=ce(V);oe(te,21,()=>P,ke=>ke.id,(ke,Fe)=>{const Ut=u(()=>t(Fe).size in e.overrides||t(Fe).lh in e.overrides||t(Fe).wt in e.overrides||!!t(Fe).ls&&t(Fe).ls in e.overrides);var Pt=cm(),Xt=s(Pt),ma=r(Xt);{var la=ha=>{var sa=im();d(ha,sa)};L(ma,ha=>{t(Ut)&&ha(la)})}C(()=>{Ye(Pt,1,`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${t(B)===t(Fe).id?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),y(Xt,`${t(Fe).label??""} `)}),x("click",Pt,()=>{_(B,t(Fe).id,!0)}),d(ke,Pt)});var Re=r(te,2),ie=s(Re),me=r(Re,2),ge=r(s(me),2),Le=s(ge);oe(Le,17,()=>k,ke=>ke.value,(ke,Fe)=>{var Ut=xs(),Pt=s(Ut),Xt={};C(()=>{y(Pt,t(Fe).label),Xt!==(Xt=t(Fe).value)&&(Ut.value=(Ut.__value=t(Fe).value)??"")}),d(ke,Ut)});var Ue=r(Le);{var Ct=ke=>{var Fe=zr(),Ut={};C(Pt=>{Ut!==(Ut=Pt)&&(Fe.value=(Fe.__value=Pt)??"")},[()=>Ke(t(I).size,t(I).dSize)]),d(ke,Fe)},Bt=u(()=>!k.some(ke=>ke.value===Ke(t(I).size,t(I).dSize)));L(Ue,ke=>{t(Bt)&&ke(Ct)})}var ut;Na(ge);var $e=r(me,2),Lt=r(s($e),2),yt=s(Lt);oe(yt,17,()=>S,ke=>ke.value,(ke,Fe)=>{var Ut=xs(),Pt=s(Ut),Xt={};C(()=>{y(Pt,`${t(Fe).label??""} · ${t(Fe).num??""}`),Xt!==(Xt=t(Fe).value)&&(Ut.value=(Ut.__value=t(Fe).value)??"")}),d(ke,Ut)});var Ne=r(yt);{var Ve=ke=>{var Fe=zr(),Ut={};C(Pt=>{Ut!==(Ut=Pt)&&(Fe.value=(Fe.__value=Pt)??"")},[()=>Ke(t(I).lh,t(I).dLh)]),d(ke,Fe)},St=u(()=>!S.some(ke=>ke.value===Ke(t(I).lh,t(I).dLh)));L(Ne,ke=>{t(St)&&ke(Ve)})}var Ge;Na(Lt);var ve=r($e,2),wt=r(s(ve),2);oe(wt,20,()=>p,ke=>ke,(ke,Fe)=>{const Ut=u(()=>Ke(t(I).wt,t(I).dWt));var Pt=zo(),Xt=s(Pt);C(ma=>{it(Pt,ma),Ye(Pt,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(Ut)===Fe?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Xt,Fe)},[()=>`font-weight:${parseInt(Fe)}`]),x("click",Pt,()=>et(t(I).wt,Fe,t(I).dWt)),d(ke,Pt)});var We=r(ve,2);{var Ee=ke=>{var Fe=dm(),Ut=r(s(Fe),2),Pt=s(Ut);oe(Pt,17,()=>E,sa=>sa.value,(sa,ga)=>{var Da=xs(),za=s(Da),xo={};C(()=>{y(za,t(ga).label),xo!==(xo=t(ga).value)&&(Da.value=(Da.__value=t(ga).value)??"")}),d(sa,Da)});var Xt=r(Pt);{var ma=sa=>{var ga=zr(),Da={};C(za=>{Da!==(Da=za)&&(ga.value=(ga.__value=za)??"")},[()=>Ke(t(I).ls,t(I).dLs)]),d(sa,ga)},la=u(()=>!E.some(sa=>sa.value===Ke(t(I).ls,t(I).dLs)));L(Xt,sa=>{t(la)&&sa(ma)})}var ha;Na(Ut),C(sa=>{ha!==(ha=sa)&&(Ut.value=(Ut.__value=sa)??"",Ia(Ut,sa))},[()=>Ke(t(I).ls,t(I).dLs)]),x("change",Ut,sa=>et(t(I).ls,sa.target.value,t(I).dLs)),d(ke,Fe)};L(We,ke=>{t(I).ls&&ke(Ee)})}var Je=r(We,2);{var pt=ke=>{const Fe=u(()=>`--sf-${t(I).id}-max-width`);var Ut=fm(),Pt=r(s(Ut),2),Xt=r(Pt,2);{var ma=la=>{var ha=Ar();x("click",ha,()=>e.onReset(t(Fe))),d(la,ha)};L(Xt,la=>{t(Fe)in e.overrides&&la(ma)})}C(()=>Jt(Pt,e.overrides[t(Fe)]??"")),x("input",Pt,la=>{const ha=la.target.value.trim();ha?e.onSet(t(Fe),ha):e.onReset(t(Fe))}),d(ke,Ut)};L(Je,ke=>{t(I).id!=="body"&&ke(pt)})}var Et=r(Je,2),ra=s(Et);{var Qt=ke=>{var Fe=um(),Ut=s(Fe);C(()=>y(Ut,`reset ${t(I).label??""}`)),x("click",Fe,()=>{const Pt={[t(I).size]:null,[t(I).lh]:null,[t(I).wt]:null};t(I).ls&&(Pt[t(I).ls]=null),e.onBulkChange(Pt)}),d(ke,Fe)};L(ra,ke=>{(t(I).size in e.overrides||t(I).lh in e.overrides||t(I).wt in e.overrides||t(I).ls&&t(I).ls in e.overrides)&&ke(Qt)})}C((ke,Fe)=>{it(ie,`font-size:${t(ft)}rem; font-weight:${t(gt)}; letter-spacing:${t(Ot)}em; line-height:${t(_t)}; font-family:${t(I).id==="body"?t(re)||"inherit":t(Y)||t(re)||"inherit"}`),ut!==(ut=ke)&&(ge.value=(ge.__value=ke)??"",Ia(ge,ke)),Ge!==(Ge=Fe)&&(Lt.value=(Lt.__value=Fe)??"",Ia(Lt,Fe))},[()=>Ke(t(I).size,t(I).dSize),()=>Ke(t(I).lh,t(I).dLh)]),x("change",ge,ke=>et(t(I).size,ke.target.value,t(I).dSize)),x("change",Lt,ke=>et(t(I).lh,ke.target.value,t(I).dLh)),d(M,V)};L(Oe,M=>{t(xe)&&M(Ce)})}var vt=r(Ze,4),He=s(vt),ct=r(s(He),2),rt=s(ct),ht=r(He,2);{var Me=M=>{var V=hm(),te=ce(V);oe(te,16,()=>[{label:"Body strong",tokenName:"--sf-font-weight-strong"},{label:"Interactive",tokenName:"--sf-font-weight-interactive"}],ut=>ut.tokenName,(ut,$e)=>{const Lt=u(()=>m[$e.tokenName]??"600"),yt=u(()=>e.overrides[$e.tokenName]??t(Lt)),Ne=u(()=>$e.tokenName in e.overrides);var Ve=el(),St=s(Ve),Ge=s(St),ve=s(Ge),wt=r(Ge,2);{var We=Je=>{var pt=$n();x("click",pt,()=>e.onReset($e.tokenName)),d(Je,pt)};L(wt,Je=>{t(Ne)&&Je(We)})}var Ee=r(St,2);oe(Ee,20,()=>p,Je=>Je,(Je,pt)=>{var Et=zo(),ra=s(Et);C(Qt=>{it(Et,Qt),Ye(Et,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(yt)===pt?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(ra,pt)},[()=>`font-weight: ${parseInt(pt)}`]),x("click",Et,()=>pt===t(Lt)&&!t(Ne)?void 0:pt===t(Lt)?e.onReset($e.tokenName):e.onSet($e.tokenName,pt)),d(Je,Et)}),C(()=>y(ve,`${$e.label??""} weight`)),d(ut,Ve)});var Re=r(te,2),ie=r(s(Re),2);oe(ie,20,()=>[["Italic","italic"],["Normal","normal"]],([ut,$e])=>$e,(ut,$e)=>{var Lt=u(()=>Ta($e,2));let yt=()=>t(Lt)[0],Ne=()=>t(Lt)[1];const Ve=u(()=>e.overrides["--sf-body-em-style"]??"italic");var St=mm(),Ge=s(St),ve=s(Ge);C(()=>{Ye(St,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(Ve)===Ne()?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),it(Ge,`font-style: ${Ne()}`),y(ve,yt())}),x("click",St,()=>Ne()==="italic"?e.onReset("--sf-body-em-style"):e.onSet("--sf-body-em-style",Ne())),d(ut,St)});var me=r(Re,2);{let ut=u(()=>T("--sf-code-font-size",.875)),$e=u(()=>"--sf-code-font-size"in e.overrides);xt(me,{label:"Code font size",get value(){return t(ut)},min:.7,max:1.1,step:.005,unit:"em",help:"--sf-code-font-size — size of inline code relative to surrounding text",get overridden(){return t($e)},onChange:Lt=>e.onSet("--sf-code-font-size",`${Lt}em`),onReset:()=>e.onReset("--sf-code-font-size")})}var ge=r(me,2);oe(ge,16,()=>[{label:"Heading wrap",token:"--sf-heading-text-wrap",defaultVal:"balance"},{label:"Body wrap",token:"--sf-body-text-wrap",defaultVal:"pretty"}],ut=>ut.token,(ut,$e)=>{const Lt=u(()=>e.overrides[$e.token]??$e.defaultVal);var yt=vm(),Ne=s(yt),Ve=s(Ne),St=r(Ne,2);oe(St,21,()=>f,Ge=>Ge.value,(Ge,ve)=>{var wt=zo(),We=s(wt);C(()=>{Ye(wt,1,`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(Lt)===t(ve).value?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(We,t(ve).label)}),x("click",wt,()=>t(ve).value===$e.defaultVal&&!($e.token in e.overrides)?void 0:t(ve).value===$e.defaultVal?e.onReset($e.token):e.onSet($e.token,t(ve).value)),d(Ge,wt)}),C(()=>y(Ve,$e.label)),d(ut,yt)});var Le=r(ge,2),Ue=r(s(Le),2);ee(Ue,"placeholder",'" ↗"');var Ct=r(Ue,2);{var Bt=ut=>{var $e=Ar();x("click",$e,()=>e.onReset("--sf-link-external-marker")),d(ut,$e)};L(Ct,ut=>{"--sf-link-external-marker"in e.overrides&&ut(Bt)})}C(()=>Jt(Ue,e.overrides["--sf-link-external-marker"]??"")),x("input",Ue,ut=>{const $e=ut.target.value;$e?e.onSet("--sf-link-external-marker",$e):e.onReset("--sf-link-external-marker")}),d(M,V)};L(ht,M=>{t(pe)&&M(Me)})}var At=r(vt,4),Ft=s(At),aa=r(s(Ft),2),Mt=s(aa),Rt=r(Ft,2);{var na=M=>{var V=bm(),te=r(ce(V),2);oe(te,16,()=>[{label:"Light",token:"--sf-font-weight-light",def:300},{label:"Normal",token:"--sf-font-weight-normal",def:400},{label:"Medium",token:"--sf-font-weight-medium",def:500},{label:"Semibold",token:"--sf-font-weight-semibold",def:600},{label:"Bold",token:"--sf-font-weight-bold",def:700}],Re=>Re.token,(Re,ie)=>{var me=gm(),ge=s(me),Le=s(ge),Ue=s(Le),Ct=r(Le,2);{var Bt=$e=>{var Lt=tl();x("click",Lt,()=>e.onReset(ie.token)),d($e,Lt)};L(Ct,$e=>{ie.token in e.overrides&&$e(Bt)})}var ut=r(ge,2);oe(ut,20,()=>p,$e=>$e,($e,Lt)=>{const yt=u(()=>e.overrides[ie.token]??String(ie.def));var Ne=zo(),Ve=s(Ne);C(St=>{it(Ne,St),Ye(Ne,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(yt)===Lt?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Ve,Lt)},[()=>`font-weight:${parseInt(Lt)}`]),x("click",Ne,()=>Lt===String(ie.def)&&!(ie.token in e.overrides)?void 0:Lt===String(ie.def)?e.onReset(ie.token):e.onSet(ie.token,Lt)),d($e,Ne)}),C(()=>y(Ue,ie.label)),d(Re,me)}),d(M,V)};L(Rt,M=>{t(Z)&&M(na)})}var da=r(At,4),fa=s(da),_e=r(s(fa),2),kt=s(_e),Tt=r(fa,2);{var Xe=M=>{var V=xm(),te=ce(V);{let me=u(()=>"--sf-text-display-base-min"in e.overrides||"--sf-text-display-base-max"in e.overrides);Bs(te,{title:"Display base size",get minValue(){return t(O)},get maxValue(){return t(F)},min:1.5,max:6,step:.05,unit:"rem",previewKind:"type",get overridden(){return t(me)},onReset:()=>{e.onReset("--sf-text-display-base-min"),e.onReset("--sf-text-display-base-max")},onMinChange:ge=>e.onSet("--sf-text-display-base-min",String(ge)),onMaxChange:ge=>e.onSet("--sf-text-display-base-max",String(ge))})}var Re=r(te,2);oe(Re,20,()=>[{label:"Display L line-height",token:"--sf-display-l-line-height",def:1},{label:"Display M line-height",token:"--sf-display-m-line-height",def:1.05}],me=>me.token,(me,ge)=>{var Le=ym(),Ue=s(Le),Ct=s(Ue),Bt=r(Ue,2);{let ut=u(()=>T(ge.token,ge.def)),$e=u(()=>ge.token in e.overrides);xt(Bt,{label:"",get value(){return t(ut)},min:.8,max:1.5,step:.025,get overridden(){return t($e)},onChange:Lt=>e.onSet(ge.token,String(Lt)),onReset:()=>e.onReset(ge.token)})}C(()=>y(Ct,ge.label)),d(me,Le)});var ie=r(Re,2);oe(ie,16,()=>[{label:"Display",tokenName:"--sf-font-weight-display"},{label:"Heading",tokenName:"--sf-font-weight-heading"}],me=>me.tokenName,(me,ge)=>{const Le=u(()=>m[ge.tokenName]??"700"),Ue=u(()=>e.overrides[ge.tokenName]??t(Le)),Ct=u(()=>ge.tokenName in e.overrides);var Bt=el(),ut=s(Bt),$e=s(ut),Lt=s($e),yt=r($e,2);{var Ne=St=>{var Ge=$n();x("click",Ge,()=>e.onReset(ge.tokenName)),d(St,Ge)};L(yt,St=>{t(Ct)&&St(Ne)})}var Ve=r(ut,2);oe(Ve,20,()=>p,St=>St,(St,Ge)=>{var ve=zo(),wt=s(ve);C(We=>{it(ve,We),Ye(ve,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(Ue)===Ge?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(wt,Ge)},[()=>`font-weight: ${parseInt(Ge)}`]),x("click",ve,()=>Ge===t(Le)&&!t(Ct)?void 0:Ge===t(Le)?e.onReset(ge.tokenName):e.onSet(ge.tokenName,Ge)),d(St,ve)}),C(()=>y(Lt,`${ge.label??""} weight`)),d(me,Bt)}),d(M,V)};L(Tt,M=>{t(Q)&&M(Xe)})}var It=r(da,4),ot=s(It),nt=r(s(ot),2),qt=s(nt),jt=r(ot,2);{var Dt=M=>{var V=_m(),te=r(ce(V),2);{let Ne=u(()=>"--sf-fluid-min-vw"in e.overrides||"--sf-fluid-max-vw"in e.overrides);Bs(te,{title:"Viewport range",get minValue(){return t(ye)},get maxValue(){return t(Ae)},min:15,max:120,step:.5,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",get overridden(){return t(Ne)},onReset:()=>{e.onReset("--sf-fluid-min-vw"),e.onReset("--sf-fluid-max-vw")},onMinChange:Ve=>e.onSet("--sf-fluid-min-vw",String(Ve)),onMaxChange:Ve=>e.onSet("--sf-fluid-max-vw",String(Ve))})}var Re=r(te,2);{let Ne=u(()=>"--sf-text-base-min"in e.overrides||"--sf-text-base-max"in e.overrides);Bs(Re,{title:"Base size & ratio",get minValue(){return t(A)},get maxValue(){return t(j)},min:.7,max:2,step:.01,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",previewKind:"type",get overridden(){return t(Ne)},onReset:()=>{e.onReset("--sf-text-base-min"),e.onReset("--sf-text-base-max")},onMinChange:Ve=>e.onSet("--sf-text-base-min",String(Ve)),onMaxChange:Ve=>e.onSet("--sf-text-base-max",String(Ve)),get ratioPresets(){return o},get ratioMin(){return t(R)},get ratioMax(){return t(w)},ratioMin_bound:1.05,ratioMax_bound:1.8,onRatioMinChange:Ve=>e.onSet("--sf-text-ratio-min",String(Ve)),onRatioMaxChange:Ve=>e.onSet("--sf-text-ratio-max",String(Ve))})}var ie=r(Re,2),me=r(s(ie),2);oe(me,21,()=>b,Ne=>Ne.token,(Ne,Ve)=>{{let St=u(()=>Pe(t(Ve))),Ge=u(()=>`${t(Ve).token} — ${t(Ve).label.toLowerCase()} line height`),ve=u(()=>t(Ve).token in e.overrides);xt(Ne,{get label(){return t(Ve).label},get value(){return t(St)},min:1,max:2.2,step:.05,get help(){return t(Ge)},get overridden(){return t(ve)},onChange:wt=>e.onSet(t(Ve).token,String(wt)),onReset:()=>e.onReset(t(Ve).token)})}});var ge=r(ie,2);{let Ne=u(()=>"--sf-leading-taper"in e.overrides);xt(ge,{label:"Leading taper",get value(){return t(D)},min:0,max:.5,step:.01,help:"How aggressively large display sizes shrink their line-height.",get overridden(){return t(Ne)},onChange:Ve=>e.onSet("--sf-leading-taper",String(Ve)),onReset:()=>e.onReset("--sf-leading-taper")})}var Le=r(ge,2),Ue=r(s(Le),4);oe(Ue,21,()=>v,Ne=>Ne.token,(Ne,Ve)=>{var St=km(),Ge=s(St),ve=s(Ge),wt=s(ve),We=r(ve,2);{var Ee=pt=>{var Et=tl();x("click",Et,()=>e.onReset(t(Ve).token)),d(pt,Et)};L(We,pt=>{t(Ve).token in e.overrides&&pt(Ee)})}var Je=r(Ge,2);{let pt=u(()=>ne(t(Ve)));$o(Je,{get value(){return t(pt)},min:-.1,max:.2,step:.005,unit:"em",onChange:Et=>e.onSet(t(Ve).token,`${Et}em`)})}C(()=>y(wt,t(Ve).label)),d(Ne,St)});var Ct=r(Le,2),Bt=s(Ct),ut=r(s(Bt),2),$e=s(ut),Lt=r(Bt,2);{var yt=Ne=>{var Ve=wm();oe(Ve,21,()=>H,St=>St.name,(St,Ge)=>{Ko(St,{get knob(){return t(Ge)},get overrides(){return e.overrides},onChange:(ve,wt)=>wt===null?e.onReset(ve):e.onSet(ve,wt)})}),d(Ne,Ve)};L(Lt,Ne=>{t(we)&&Ne(yt)})}C(()=>{ee(Bt,"aria-expanded",t(we)),y($e,t(we)?"▲":"▼")}),x("click",Bt,()=>{_(we,!t(we))}),d(M,V)};L(jt,M=>{t(le)&&M(Dt)})}var Vt=r(It,4),Wt=s(Vt),ua=r(s(Wt),2),Ua=s(ua),Pa=r(Wt,2);{var Aa=M=>{var V=Om();oe(V,21,()=>[...h].reverse(),({label:te,factor:Re})=>te,(te,Re)=>{let ie=()=>t(Re).label,me=()=>t(Re).factor;const ge=u(()=>(t(A)+t(j))/2),Le=u(()=>t(ge)*me()*t(J));var Ue=Cm(),Ct=s(Ue),Bt=s(Ct),ut=r(Ct,2),$e=r(ut,2),Lt=s($e);C((yt,Ne)=>{y(Bt,ie()),it(ut,yt),y(Lt,`${Ne??""}rem`)},[()=>`font-size: ${Math.min(t(Le),2.5)}rem; font-family: ${t(re)||"inherit"}`,()=>t(Le).toFixed(2)]),d(te,Ue)}),d(M,V)};L(Pa,M=>{t(ze)&&M(Aa)})}var bt=r(Vt,4),Se=s(bt),Qe=r(s(Se),2),lt=s(Qe),Be=r(Se,2);{var De=M=>{var V=Lm(),te=r(ce(V),2);oe(te,20,()=>[{label:"2xs",token:"--sf-text-2xs-max-width",def:"55ch"},{label:"xs",token:"--sf-text-xs-max-width",def:"60ch"},{label:"s",token:"--sf-text-s-max-width",def:"65ch"},{label:"m",token:"--sf-text-m-max-width",def:"65ch"},{label:"l",token:"--sf-text-l-max-width",def:"none"},{label:"xl",token:"--sf-text-xl-max-width",def:"none"},{label:"2xl",token:"--sf-text-2xl-max-width",def:"none"},{label:"3xl",token:"--sf-text-3xl-max-width",def:"none"},{label:"4xl",token:"--sf-text-4xl-max-width",def:"none"}],Re=>Re.token,(Re,ie)=>{var me=Sm(),ge=s(me),Le=s(ge),Ue=r(ge,2),Ct=r(Ue,2);{var Bt=ut=>{var $e=Er();x("click",$e,()=>e.onReset(ie.token)),d(ut,$e)};L(Ct,ut=>{ie.token in e.overrides&&ut(Bt)})}C(()=>{y(Le,ie.label),Jt(Ue,e.overrides[ie.token]??""),ee(Ue,"placeholder",ie.def)}),x("input",Ue,ut=>{const $e=ut.target.value.trim();$e?e.onSet(ie.token,$e):e.onReset(ie.token)}),d(Re,me)}),d(M,V)};L(Be,M=>{t(G)&&M(De)})}var dt=r(bt,4),tt=s(dt),Ie=r(s(tt),2),st=s(Ie),z=r(tt,2);{var $=M=>{var V=Pm(),te=r(ce(V),2),Re=r(s(te),2);oe(Re,20,()=>[["tabular-nums","tabular-nums (default)"],["proportional-nums","proportional-nums"],["normal","normal"]],([yt,Ne])=>yt,(yt,Ne)=>{var Ve=u(()=>Ta(Ne,2));let St=()=>t(Ve)[0],Ge=()=>t(Ve)[1];const ve=u(()=>e.overrides["--sf-font-numeric"]??"tabular-nums");var wt=zo(),We=s(wt);C(()=>{Ye(wt,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(ve)===St()?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(We,Ge())}),x("click",wt,()=>St()==="tabular-nums"?e.onReset("--sf-font-numeric"):e.onSet("--sf-font-numeric",St())),d(yt,wt)});var ie=r(te,2),me=r(s(ie),2);oe(me,20,()=>[["auto","auto (default)"],["none","none"]],([yt,Ne])=>yt,(yt,Ne)=>{var Ve=u(()=>Ta(Ne,2));let St=()=>t(Ve)[0],Ge=()=>t(Ve)[1];const ve=u(()=>e.overrides["--sf-optical-sizing"]??"auto");var wt=zo(),We=s(wt);C(()=>{Ye(wt,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(ve)===St()?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(We,Ge())}),x("click",wt,()=>St()==="auto"?e.onReset("--sf-optical-sizing"):e.onSet("--sf-optical-sizing",St())),d(yt,wt)});var ge=r(ie,2),Le=r(s(ge),2),Ue=r(Le,2);{var Ct=yt=>{var Ne=Er();x("click",Ne,()=>e.onReset("--sf-font-features")),d(yt,Ne)};L(Ue,yt=>{"--sf-font-features"in e.overrides&&yt(Ct)})}var Bt=r(ge,2),ut=r(s(Bt),2),$e=r(ut,2);{var Lt=yt=>{var Ne=Er();x("click",Ne,()=>e.onReset("--sf-font-variation")),d(yt,Ne)};L($e,yt=>{"--sf-font-variation"in e.overrides&&yt(Lt)})}C(()=>{Jt(Le,e.overrides["--sf-font-features"]??""),Jt(ut,e.overrides["--sf-font-variation"]??"")}),x("input",Le,yt=>{const Ne=yt.target.value.trim();Ne?e.onSet("--sf-font-features",Ne):e.onReset("--sf-font-features")}),x("input",ut,yt=>{const Ne=yt.target.value.trim();Ne?e.onSet("--sf-font-variation",Ne):e.onReset("--sf-font-variation")}),d(M,V)};L(z,M=>{t(N)&&M($)})}C(()=>{ee(fe,"aria-expanded",t(Te)),y(X,t(Te)?"▲":"▼"),ee(U,"aria-expanded",t(xe)),y(se,t(xe)?"▲":"▼"),ee(He,"aria-expanded",t(pe)),y(rt,t(pe)?"▲":"▼"),ee(Ft,"aria-expanded",t(Z)),y(Mt,t(Z)?"▲":"▼"),ee(fa,"aria-expanded",t(Q)),y(kt,t(Q)?"▲":"▼"),ee(ot,"aria-expanded",t(le)),y(qt,t(le)?"▲":"▼"),ee(Wt,"aria-expanded",t(ze)),y(Ua,t(ze)?"▲":"▼"),ee(Se,"aria-expanded",t(G)),y(lt,t(G)?"▲":"▼"),ee(tt,"aria-expanded",t(N)),y(st,t(N)?"▲":"▼")}),x("click",fe,()=>{_(Te,!t(Te))}),x("click",U,()=>{_(xe,!t(xe))}),x("click",He,()=>{_(pe,!t(pe))}),x("click",Ft,()=>{_(Z,!t(Z))}),x("click",fa,()=>{_(Q,!t(Q))}),x("click",ot,()=>{_(le,!t(le))}),x("click",Wt,()=>{_(ze,!t(ze))}),x("click",Se,()=>{_(G,!t(G))}),x("click",tt,()=>{_(N,!t(N))}),d(a,mt),ta()}oa(["click","change","input"]);var Um=g('
'),Am=g('

The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).

',1),zm=g(`

Utopia-style fluid scale — viewport width, base unit and ratio per endpoint. - The viewport range is shared with the type scale.

`,1),Em=g('
'),Rm=g('
Space scale preview
');function Tm(a,e){ea(e,!0);const o=[{label:"Minor Third — 1.200",value:1.2},{label:"Major Third — 1.250",value:1.25},{label:"Perfect Fourth — 1.333",value:1.333},{label:"Aug. Fourth — 1.414",value:1.414},{label:"Golden — 1.618",value:1.618}],n=["2xs","xs","s","m","l","xl","2xl","3xl","4xl"],l=Vo.spacing??[];function i(Z,re){const Y=parseFloat(e.overrides[Z]??"");return isNaN(Y)?re:Y}let c=u(()=>i("--sf-space-ratio-min",1.25)),f=u(()=>i("--sf-space-ratio-max",1.333)),p=u(()=>i("--sf-space-base-min",1)),m=u(()=>i("--sf-space-base-max",2)),h=u(()=>i("--sf-space-scale",1)),v=u(()=>i("--sf-gap",1)),b=u(()=>i("--sf-gutter",1.5)),k=u(()=>i("--sf-content-gap",.5)),S=u(()=>i("--sf-fluid-min-vw",22.5)),E=u(()=>i("--sf-fluid-max-vw",90)),P=K(!1),B=K(!1),I=K(!1);var H=Rm(),T=s(H),R=r(s(T),2);oe(R,22,()=>n,Z=>Z,(Z,re,Y)=>{const de=u(()=>(t(p)+t(m))/2),be=u(()=>(t(c)+t(f))/2),he=u(()=>t(Y)-3),ne=u(()=>t(he)>=0?t(de)*Math.pow(t(be),t(he)):t(de)/Math.pow(t(be),-t(he))),Pe=u(()=>t(ne)*t(h)),qe=u(()=>Math.min(t(Pe)*28,240));var at=Um(),Ke=s(at),et=s(Ke),ft=r(Ke,2),gt=r(ft,2),Ot=s(gt);C(_t=>{y(et,re),it(ft,`width: ${t(qe)}px; min-width: 3px`),y(Ot,`${_t??""}rem`)},[()=>t(Pe).toFixed(2)]),d(Z,at)});var w=r(T,4),A=s(w),j=r(s(A),2),O=s(j),F=r(A,2);{var D=Z=>{var re=Am(),Y=r(ce(re),2);{let he=u(()=>"--sf-gap"in e.overrides);xt(Y,{label:"Gap",get value(){return t(v)},min:0,max:4,step:.0625,unit:"rem",help:"--sf-gap — spacing between layout items (cluster, grid, reel, stack, sidebar, bento)",get overridden(){return t(he)},onChange:ne=>e.onSet("--sf-gap",`${ne}rem`),onReset:()=>e.onReset("--sf-gap"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-gap"]},onRawSet:ne=>e.onSet("--sf-gap",ne)})}var de=r(Y,2);{let he=u(()=>"--sf-content-gap"in e.overrides);xt(de,{label:"Content gap",get value(){return t(k)},min:0,max:2,step:.0625,unit:"rem",help:"--sf-content-gap — tighter gap within components (defaults to space-s)",get overridden(){return t(he)},onChange:ne=>e.onSet("--sf-content-gap",`${ne}rem`),onReset:()=>e.onReset("--sf-content-gap"),rawDefault:"var(--sf-space-s)",get currentRaw(){return e.overrides["--sf-content-gap"]},onRawSet:ne=>e.onSet("--sf-content-gap",ne)})}var be=r(de,2);{let he=u(()=>"--sf-gutter"in e.overrides);xt(be,{label:"Gutter",get value(){return t(b)},min:0,max:6,step:.0625,unit:"rem",help:"--sf-gutter — wide page/section side gutter (containers, .sf-section--guttered)",get overridden(){return t(he)},onChange:ne=>e.onSet("--sf-gutter",`${ne}rem`),onReset:()=>e.onReset("--sf-gutter"),rawDefault:"var(--sf-space-l)",get currentRaw(){return e.overrides["--sf-gutter"]},onRawSet:ne=>e.onSet("--sf-gutter",ne)})}d(Z,re)};L(F,Z=>{t(P)&&Z(D)})}var J=r(w,4),ye=s(J),Ae=r(s(ye),2),Te=s(Ae),xe=r(ye,2);{var pe=Z=>{var re=zm(),Y=r(ce(re),2);{let be=u(()=>"--sf-fluid-min-vw"in e.overrides||"--sf-fluid-max-vw"in e.overrides);Bs(Y,{title:"Viewport range",get minValue(){return t(S)},get maxValue(){return t(E)},min:15,max:120,step:.5,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",get overridden(){return t(be)},onReset:()=>{e.onReset("--sf-fluid-min-vw"),e.onReset("--sf-fluid-max-vw")},onMinChange:he=>e.onSet("--sf-fluid-min-vw",String(he)),onMaxChange:he=>e.onSet("--sf-fluid-max-vw",String(he))})}var de=r(Y,2);{let be=u(()=>"--sf-space-base-min"in e.overrides||"--sf-space-base-max"in e.overrides);Bs(de,{title:"Base unit & ratio",get minValue(){return t(p)},get maxValue(){return t(m)},min:.5,max:4,step:.05,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",previewKind:"space",get overridden(){return t(be)},onReset:()=>{e.onReset("--sf-space-base-min"),e.onReset("--sf-space-base-max")},onMinChange:he=>e.onSet("--sf-space-base-min",String(he)),onMaxChange:he=>e.onSet("--sf-space-base-max",String(he)),get ratioPresets(){return o},get ratioMin(){return t(c)},get ratioMax(){return t(f)},ratioMin_bound:1.1,ratioMax_bound:1.8,onRatioMinChange:he=>e.onSet("--sf-space-ratio-min",String(he)),onRatioMaxChange:he=>e.onSet("--sf-space-ratio-max",String(he))})}d(Z,re)};L(xe,Z=>{t(B)&&Z(pe)})}var Q=r(J,4),le=s(Q),we=r(s(le),2),ze=s(we),N=r(le,2);{var G=Z=>{var re=Em();oe(re,21,()=>l,Y=>Y.name,(Y,de)=>{Ko(Y,{get knob(){return t(de)},get overrides(){return e.overrides},onChange:(be,he)=>he===null?e.onReset(be):e.onSet(be,he)})}),d(Z,re)};L(N,Z=>{t(I)&&Z(G)})}C(()=>{ee(A,"aria-expanded",t(P)),y(O,t(P)?"▲":"▼"),ee(ye,"aria-expanded",t(B)),y(Te,t(B)?"▲":"▼"),ee(le,"aria-expanded",t(I)),y(ze,t(I)?"▲":"▼")}),x("click",A,()=>{_(P,!t(P))}),x("click",ye,()=>{_(B,!t(B))}),x("click",le,()=>{_(I,!t(I))}),d(a,H),ta()}oa(["click"]);var Dm=g('
'),Mm=g('
Narrow
Prose
Default
Wide
',1),Nm=g(" ",1),Fm=g('
col
'),jm=g('
Named sizes (grid-min-xs → 2xl)
Preview at 360px panel width
',1),Gm=g('
'),Hm=g('
Mobile
Desktop
',1),qm=g('

Offsets position:sticky elements below a fixed header. Defaults to header heights.

Mobile
Desktop
',1),Vm=g('
',1),Km=g('
'),al=g(''),Hs=g(''),ol=g('
'),sl=g(""),Wm=g('
Switcher
Sidebar content
Cluster
Equal grid
Named column counts (equal-min-col-2/3/4/6)
Cover
Frame ratio

--sf-frame-ratio — aspect ratio for .sf-frame

Reel

--sf-reel-item-width — width of each item in a horizontal .sf-reel

Height
Imposter
Content grid (breakout)
Alternate (zigzag)
'),Ym=g('
'),Zm=g('

Override the built-in named aspect ratios used by .sf-ratio-* utilities.

'),Xm=g('

Default values for the .sf-bg full-bleed background utility.

'),Jm=g('
');function Qm(a,e){ea(e,!0);function o(Se,Qe){if(!Se)return Qe;const lt=parseFloat(Se);return isNaN(lt)?Qe:lt}let n=u(()=>o(e.overrides["--sf-container-narrow"],38)),l=u(()=>o(e.overrides["--sf-container-prose"],65)),i=u(()=>o(e.overrides["--sf-container-default"],75)),c=u(()=>o(e.overrides["--sf-container-wide"],90)),f=u(()=>o(e.overrides["--sf-center-max"],75)),p=u(()=>o(e.overrides["--sf-center-gutter"],1)),m=u(()=>o(e.overrides["--sf-grid-min"],16)),h=u(()=>o(e.overrides["--sf-header-height-mobile"],3.5)),v=u(()=>o(e.overrides["--sf-header-height-desktop"],5)),b=u(()=>o(e.overrides["--sf-sidebar-width"],18)),k=u(()=>o(e.overrides["--sf-sticky-offset-mobile"],3.5)),S=u(()=>o(e.overrides["--sf-sticky-offset-desktop"],5));const E=[{label:"Columns",token:"--sf-bento-cols-default",min:1,max:12,step:1,unit:"",default:4},{label:"Row default",token:"--sf-bento-row-default",min:4,max:24,step:.5,unit:"rem",default:10},{label:"Row compact",token:"--sf-bento-row-compact",min:2,max:16,step:.5,unit:"rem",default:6},{label:"Row tall",token:"--sf-bento-row-tall",min:8,max:32,step:.5,unit:"rem",default:16}];let P=K(!1),B=K(!1),I=K(!1),H=K(!1),T=K(!1),R=K(!1),w=K(!1),A=K(!1),j=K(!1),O=K(!1);function F(Se){const Qe=e.overrides[Se.token];return Qe?parseFloat(Qe):Se.default}let D=u(()=>o(e.overrides["--sf-switcher-threshold"],30)),J=u(()=>o(e.overrides["--sf-sidebar-min-width"],50)),ye=u(()=>o(e.overrides["--sf-equal-min-col"],16)),Ae=u(()=>o(e.overrides["--sf-cover-min-height"],100)),Te=u(()=>o(e.overrides["--sf-imposter-margin"],1)),xe=u(()=>o(e.overrides["--sf-breakout-width"],90)),pe=u(()=>o(e.overrides["--sf-content-width"],75)),Q=u(()=>o(e.overrides["--sf-alternate-inner-gap"],1)),le=u(()=>e.overrides["--sf-frame-ratio"]??"16 / 9"),we=u(()=>e.overrides["--sf-reel-item-width"]??"max-content");const ze=["16 / 9","4 / 3","3 / 2","1 / 1","21 / 9"],N=[{label:"auto",value:"max-content"},{label:"12rem",value:"12rem"},{label:"16rem",value:"16rem"},{label:"20rem",value:"20rem"}];var G=Jm(),Z=s(G),re=s(Z),Y=r(s(re),2),de=s(Y),be=r(re,2);{var he=Se=>{var Qe=Mm(),lt=ce(Qe),Be=s(lt),De=r(s(Be),2);{let V=u(()=>"--sf-container-narrow"in e.overrides);xt(De,{label:"",get value(){return t(n)},min:20,max:60,step:1,unit:"rem",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-container-narrow",`${te}rem`),onReset:()=>e.onReset("--sf-container-narrow")})}var dt=r(Be,2),tt=r(s(dt),2);{let V=u(()=>"--sf-container-prose"in e.overrides);xt(tt,{label:"",get value(){return t(l)},min:40,max:90,step:1,unit:"ch",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-container-prose",`${te}ch`),onReset:()=>e.onReset("--sf-container-prose")})}var Ie=r(dt,2),st=r(s(Ie),2);{let V=u(()=>"--sf-container-default"in e.overrides);xt(st,{label:"",get value(){return t(i)},min:50,max:120,step:1,unit:"rem",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-container-default",`${te}rem`),onReset:()=>e.onReset("--sf-container-default")})}var z=r(Ie,2),$=r(s(z),2);{let V=u(()=>"--sf-container-wide"in e.overrides);xt($,{label:"",get value(){return t(c)},min:60,max:160,step:1,unit:"rem",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-container-wide",`${te}rem`),onReset:()=>e.onReset("--sf-container-wide")})}var M=r(lt,2);oe(M,21,()=>[{label:"narrow",value:t(n),max:t(c),unit:"rem"},{label:"prose",value:t(l),max:t(c)*1.5,unit:"ch"},{label:"default",value:t(i),max:t(c),unit:"rem"},{label:"wide",value:t(c),max:t(c),unit:"rem"}],V=>V.label,(V,te)=>{var Re=Dm(),ie=s(Re),me=s(ie),ge=r(ie,2),Le=s(ge),Ue=r(ge,2),Ct=s(Ue);C(Bt=>{y(me,t(te).label),it(Le,Bt),y(Ct,`${t(te).value??""}${t(te).unit??""}`)},[()=>`width: ${Math.min(t(te).value/t(te).max*100,100)}%`]),d(V,Re)}),d(Se,Qe)};L(be,Se=>{t(P)&&Se(he)})}var ne=r(Z,4),Pe=s(ne),qe=r(s(Pe),2),at=s(qe),Ke=r(Pe,2);{var et=Se=>{var Qe=Nm(),lt=ce(Qe);{let De=u(()=>"--sf-center-max"in e.overrides);xt(lt,{label:"Max width",get value(){return t(f)},min:30,max:160,step:1,unit:"rem",help:"--sf-center-max — max-width of the .sf-center centering wrapper",get overridden(){return t(De)},onChange:dt=>e.onSet("--sf-center-max",`${dt}rem`),onReset:()=>e.onReset("--sf-center-max"),rawDefault:"var(--sf-container-default)",get currentRaw(){return e.overrides["--sf-center-max"]},onRawSet:dt=>e.onSet("--sf-center-max",dt)})}var Be=r(lt,2);{let De=u(()=>"--sf-center-gutter"in e.overrides);xt(Be,{label:"Gutter",get value(){return t(p)},min:0,max:4,step:.125,unit:"rem",help:"--sf-center-gutter — minimum side padding inside the center wrapper",get overridden(){return t(De)},onChange:dt=>e.onSet("--sf-center-gutter",`${dt}rem`),onReset:()=>e.onReset("--sf-center-gutter"),rawDefault:"var(--sf-gutter)",get currentRaw(){return e.overrides["--sf-center-gutter"]},onRawSet:dt=>e.onSet("--sf-center-gutter",dt)})}d(Se,Qe)};L(Ke,Se=>{t(B)&&Se(et)})}var ft=r(ne,4),gt=s(ft),Ot=r(s(gt),2),_t=s(Ot),mt=r(gt,2);{var ae=Se=>{var Qe=jm(),lt=ce(Qe);{let Ie=u(()=>"--sf-grid-min"in e.overrides);xt(lt,{label:"Grid min cell width",get value(){return t(m)},min:8,max:40,step:.5,unit:"rem",help:"sf-grid minimum column width — browser auto-fills columns",get overridden(){return t(Ie)},onChange:st=>e.onSet("--sf-grid-min",`${st}rem`),onReset:()=>e.onReset("--sf-grid-min")})}var Be=r(lt,2),De=r(s(Be),2);oe(De,20,()=>[{label:"xs",token:"--sf-grid-min-xs",def:10},{label:"s",token:"--sf-grid-min-s",def:13},{label:"m",token:"--sf-grid-min-m",def:16},{label:"l",token:"--sf-grid-min-l",def:20},{label:"xl",token:"--sf-grid-min-xl",def:24},{label:"2xl",token:"--sf-grid-min-2xl",def:28}],Ie=>Ie.token,(Ie,st)=>{{let z=u(()=>o(e.overrides[st.token],st.def)),$=u(()=>st.token in e.overrides);xt(Ie,{get label(){return st.label},get value(){return t(z)},min:6,max:40,step:.5,unit:"rem",get overridden(){return t($)},onChange:M=>e.onSet(st.token,`${M}rem`),onReset:()=>e.onReset(st.token)})}});var dt=r(Be,2),tt=r(s(dt),2);oe(tt,20,()=>Array.from({length:8}),mn,(Ie,st)=>{var z=Fm();d(Ie,z)}),C(Ie=>it(tt,Ie),[()=>`grid-template-columns: repeat(auto-fill, minmax(${Math.min(t(m)*16*.3,120)}px, 1fr))`]),d(Se,Qe)};L(mt,Se=>{t(I)&&Se(ae)})}var fe=r(ft,4),q=s(fe),X=r(s(q),2),ue=s(X),je=r(q,2);{var Ze=Se=>{var Qe=Hm(),lt=ce(Qe),Be=s(lt),De=r(s(Be),2);{let V=u(()=>"--sf-header-height-mobile"in e.overrides);xt(De,{label:"",get value(){return t(h)},min:2,max:8,step:.25,unit:"rem",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-header-height-mobile",`${te}rem`),onReset:()=>e.onReset("--sf-header-height-mobile")})}var dt=r(Be,2),tt=r(s(dt),2);{let V=u(()=>"--sf-header-height-desktop"in e.overrides);xt(tt,{label:"",get value(){return t(v)},min:3,max:10,step:.25,unit:"rem",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-header-height-desktop",`${te}rem`),onReset:()=>e.onReset("--sf-header-height-desktop")})}var Ie=r(lt,2),st=s(Ie),z=r(s(st),2);oe(z,20,()=>[1,2,3],V=>V,(V,te)=>{var Re=Gm();d(V,Re)});var $=r(st,2),M=s($);C(V=>{it(st,V),y(M,`${t(h)??""}rem mobile · ${t(v)??""}rem desktop`)},[()=>`height: ${Math.min(t(h)*12,64)}px`]),d(Se,Qe)};L(je,Se=>{t(H)&&Se(Ze)})}var U=r(fe,4),W=s(U),se=r(s(W),2),Oe=s(se),Ce=r(W,2);{var vt=Se=>{var Qe=qm(),lt=r(ce(Qe),2),Be=s(lt),De=r(s(Be),2);{let Ie=u(()=>"--sf-sticky-offset-mobile"in e.overrides);xt(De,{label:"",get value(){return t(k)},min:0,max:12,step:.25,unit:"rem",get overridden(){return t(Ie)},onChange:st=>e.onSet("--sf-sticky-offset-mobile",`${st}rem`),onReset:()=>e.onReset("--sf-sticky-offset-mobile"),rawDefault:"var(--sf-header-height-mobile)",get currentRaw(){return e.overrides["--sf-sticky-offset-mobile"]},onRawSet:st=>e.onSet("--sf-sticky-offset-mobile",st)})}var dt=r(Be,2),tt=r(s(dt),2);{let Ie=u(()=>"--sf-sticky-offset-desktop"in e.overrides);xt(tt,{label:"",get value(){return t(S)},min:0,max:12,step:.25,unit:"rem",get overridden(){return t(Ie)},onChange:st=>e.onSet("--sf-sticky-offset-desktop",`${st}rem`),onReset:()=>e.onReset("--sf-sticky-offset-desktop"),rawDefault:"var(--sf-header-height-desktop)",get currentRaw(){return e.overrides["--sf-sticky-offset-desktop"]},onRawSet:st=>e.onSet("--sf-sticky-offset-desktop",st)})}d(Se,Qe)};L(Ce,Se=>{t(T)&&Se(vt)})}var He=r(U,4),ct=s(He),rt=r(s(ct),2),ht=s(rt),Me=r(ct,2);{var At=Se=>{var Qe=Vm(),lt=ce(Qe);{let Ie=u(()=>"--sf-sidebar-width"in e.overrides);xt(lt,{label:"Sidebar width",get value(){return t(b)},min:10,max:32,step:.5,unit:"rem",help:"--sf-sidebar-width — default sidebar / drawer width",get overridden(){return t(Ie)},onChange:st=>e.onSet("--sf-sidebar-width",`${st}rem`),onReset:()=>e.onReset("--sf-sidebar-width")})}var Be=r(lt,2),De=s(Be),dt=s(De),tt=s(dt);C(Ie=>{it(De,Ie),y(tt,`${t(b)??""}rem`)},[()=>`width: ${Math.min(t(b)*3.5,100)}px`]),d(Se,Qe)};L(Me,Se=>{t(R)&&Se(At)})}var Ft=r(He,4),aa=s(Ft),Mt=r(s(aa),2),Rt=s(Mt),na=r(aa,2);{var da=Se=>{var Qe=Km();oe(Qe,21,()=>E,lt=>lt.token,(lt,Be)=>{{let De=u(()=>F(t(Be))),dt=u(()=>t(Be).token in e.overrides);xt(lt,{get label(){return t(Be).label},get value(){return t(De)},get min(){return t(Be).min},get max(){return t(Be).max},get step(){return t(Be).step},get unit(){return t(Be).unit},get help(){return t(Be).token},get overridden(){return t(dt)},onChange:tt=>e.onSet(t(Be).token,t(Be).unit?`${tt}${t(Be).unit}`:String(tt)),onReset:()=>e.onReset(t(Be).token)})}}),d(Se,Qe)};L(na,Se=>{t(w)&&Se(da)})}var fa=r(Ft,4),_e=s(fa),kt=r(s(_e),2),Tt=s(kt),Xe=r(_e,2);{var It=Se=>{var Qe=Wm(),lt=s(Qe),Be=r(s(lt),2);{let Ge=u(()=>"--sf-switcher-threshold"in e.overrides);xt(Be,{label:"Threshold",get value(){return t(D)},min:10,max:60,step:1,unit:"rem",help:"--sf-switcher-threshold — width below which .sf-switcher stacks vertically",get overridden(){return t(Ge)},onChange:ve=>e.onSet("--sf-switcher-threshold",`${ve}rem`),onReset:()=>e.onReset("--sf-switcher-threshold")})}var De=r(lt,2),dt=r(s(De),2);{let Ge=u(()=>"--sf-sidebar-min-width"in e.overrides);xt(dt,{label:"Content min width",get value(){return t(J)},min:20,max:80,step:1,unit:"%",help:"--sf-sidebar-min-width — minimum width of the .sf-sidebar content column before it wraps",get overridden(){return t(Ge)},onChange:ve=>e.onSet("--sf-sidebar-min-width",`${ve}%`),onReset:()=>e.onReset("--sf-sidebar-min-width")})}var tt=r(De,2),Ie=r(s(tt),2);oe(Ie,16,()=>[{label:"Align",token:"--sf-cluster-align",def:"center",opts:["flex-start","center","flex-end","stretch","baseline"]},{label:"Justify",token:"--sf-cluster-justify",def:"flex-start",opts:["flex-start","center","flex-end","space-between","space-around"]}],Ge=>Ge.token,(Ge,ve)=>{var wt=ol(),We=s(wt),Ee=s(We),Je=r(We,2);oe(Je,20,()=>ve.opts,Qt=>Qt,(Qt,ke)=>{var Fe=al(),Ut=s(Fe),Pt={};C(()=>{y(Ut,ke),Pt!==(Pt=ke)&&(Fe.value=(Fe.__value=ke)??"")}),d(Qt,Fe)});var pt;Na(Je);var Et=r(Je,2);{var ra=Qt=>{var ke=Hs();x("click",ke,()=>e.onReset(ve.token)),d(Qt,ke)};L(Et,Qt=>{ve.token in e.overrides&&Qt(ra)})}C(()=>{y(Ee,ve.label),pt!==(pt=e.overrides[ve.token]??ve.def)&&(Je.value=(Je.__value=e.overrides[ve.token]??ve.def)??"",Ia(Je,e.overrides[ve.token]??ve.def))}),x("change",Je,Qt=>{const ke=Qt.target.value;ke===ve.def?e.onReset(ve.token):e.onSet(ve.token,ke)}),d(Ge,wt)});var st=r(tt,2),z=r(s(st),2);{let Ge=u(()=>"--sf-equal-min-col"in e.overrides);xt(z,{label:"Min column",get value(){return t(ye)},min:6,max:36,step:.5,unit:"rem",help:"--sf-equal-min-col — minimum column width for .sf-equal",get overridden(){return t(Ge)},onChange:ve=>e.onSet("--sf-equal-min-col",`${ve}rem`),onReset:()=>e.onReset("--sf-equal-min-col")})}var $=r(z,2),M=r(s($),2);oe(M,20,()=>[{label:"2-col",token:"--sf-equal-min-col-2",def:28},{label:"3-col",token:"--sf-equal-min-col-3",def:15},{label:"4-col",token:"--sf-equal-min-col-4",def:16},{label:"6-col",token:"--sf-equal-min-col-6",def:10}],Ge=>Ge.token,(Ge,ve)=>{{let wt=u(()=>o(e.overrides[ve.token],ve.def)),We=u(()=>ve.token in e.overrides);xt(Ge,{get label(){return ve.label},get value(){return t(wt)},min:4,max:36,step:.5,unit:"rem",get overridden(){return t(We)},onChange:Ee=>e.onSet(ve.token,`${Ee}rem`),onReset:()=>e.onReset(ve.token)})}});var V=r(st,2),te=r(s(V),2);{let Ge=u(()=>"--sf-cover-min-height"in e.overrides);xt(te,{label:"Min height",get value(){return t(Ae)},min:20,max:100,step:1,unit:"dvh",help:"--sf-cover-min-height — minimum height of the .sf-cover layout",get overridden(){return t(Ge)},onChange:ve=>e.onSet("--sf-cover-min-height",`${ve}dvh`),onReset:()=>e.onReset("--sf-cover-min-height")})}var Re=r(V,2),ie=r(s(Re),4);oe(ie,20,()=>ze,Ge=>Ge,(Ge,ve)=>{var wt=sl(),We=s(wt);C(Ee=>{Ye(wt,1,Ee),y(We,ve)},[()=>`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${t(le).replace(/\s/g,"")===ve.replace(/\s/g,"")?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`]),x("click",wt,()=>ve==="16 / 9"?e.onReset("--sf-frame-ratio"):e.onSet("--sf-frame-ratio",ve)),d(Ge,wt)});var me=r(Re,2),ge=r(s(me),4);oe(ge,21,()=>N,Ge=>Ge.value,(Ge,ve)=>{var wt=sl(),We=s(wt);C(()=>{Ye(wt,1,`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${t(we)===t(ve).value?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(We,t(ve).label)}),x("click",wt,()=>t(ve).value==="max-content"?e.onReset("--sf-reel-item-width"):e.onSet("--sf-reel-item-width",t(ve).value)),d(Ge,wt)});var Le=r(ge,2),Ue=r(s(Le),2),Ct=r(Ue,2);{var Bt=Ge=>{var ve=Hs();x("click",ve,()=>e.onReset("--sf-reel-height")),d(Ge,ve)};L(Ct,Ge=>{"--sf-reel-height"in e.overrides&&Ge(Bt)})}var ut=r(me,2),$e=r(s(ut),2);{let Ge=u(()=>"--sf-imposter-margin"in e.overrides);xt($e,{label:"Margin",get value(){return t(Te)},min:0,max:4,step:.125,unit:"rem",help:"--sf-imposter-margin — viewport inset for the centered .sf-imposter overlay",get overridden(){return t(Ge)},onChange:ve=>e.onSet("--sf-imposter-margin",`${ve}rem`),onReset:()=>e.onReset("--sf-imposter-margin"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-imposter-margin"]},onRawSet:ve=>e.onSet("--sf-imposter-margin",ve)})}var Lt=r(ut,2),yt=r(s(Lt),2);{let Ge=u(()=>"--sf-content-width"in e.overrides);xt(yt,{label:"Content width",get value(){return t(pe)},min:40,max:120,step:1,unit:"rem",help:"--sf-content-width — default reading column width in .sf-content-grid",get overridden(){return t(Ge)},onChange:ve=>e.onSet("--sf-content-width",`${ve}rem`),onReset:()=>e.onReset("--sf-content-width"),rawDefault:"var(--sf-container-default)",get currentRaw(){return e.overrides["--sf-content-width"]},onRawSet:ve=>e.onSet("--sf-content-width",ve)})}var Ne=r(yt,2);{let Ge=u(()=>"--sf-breakout-width"in e.overrides);xt(Ne,{label:"Breakout width",get value(){return t(xe)},min:50,max:160,step:1,unit:"rem",help:"--sf-breakout-width — wide breakout column width in .sf-content-grid",get overridden(){return t(Ge)},onChange:ve=>e.onSet("--sf-breakout-width",`${ve}rem`),onReset:()=>e.onReset("--sf-breakout-width"),rawDefault:"var(--sf-container-wide)",get currentRaw(){return e.overrides["--sf-breakout-width"]},onRawSet:ve=>e.onSet("--sf-breakout-width",ve)})}var Ve=r(Lt,2),St=r(s(Ve),2);{let Ge=u(()=>"--sf-alternate-inner-gap"in e.overrides);xt(St,{label:"Inner gap",get value(){return t(Q)},min:0,max:4,step:.125,unit:"rem",help:"--sf-alternate-inner-gap — gap between media and text within an .sf-alternate row",get overridden(){return t(Ge)},onChange:ve=>e.onSet("--sf-alternate-inner-gap",`${ve}rem`),onReset:()=>e.onReset("--sf-alternate-inner-gap"),rawDefault:"var(--sf-gap)",get currentRaw(){return e.overrides["--sf-alternate-inner-gap"]},onRawSet:ve=>e.onSet("--sf-alternate-inner-gap",ve)})}C(()=>Jt(Ue,e.overrides["--sf-reel-height"]??"")),x("input",Ue,Ge=>{const ve=Ge.target.value.trim();ve?e.onSet("--sf-reel-height",ve):e.onReset("--sf-reel-height")}),d(Se,Qe)};L(Xe,Se=>{t(A)&&Se(It)})}var ot=r(fa,4),nt=s(ot),qt=r(s(nt),2),jt=s(qt),Dt=r(nt,2);{var Vt=Se=>{var Qe=Zm(),lt=r(s(Qe),2);oe(lt,16,()=>[{label:"Square",token:"--sf-ratio-square",def:"1"},{label:"Portrait",token:"--sf-ratio-portrait",def:"3 / 4"},{label:"3:2",token:"--sf-ratio-3-2",def:"3 / 2"},{label:"4:3",token:"--sf-ratio-4-3",def:"4 / 3"},{label:"Video",token:"--sf-ratio-video",def:"16 / 9"},{label:"Cinema",token:"--sf-ratio-cinema",def:"21 / 9"},{label:"Golden",token:"--sf-ratio-golden",def:"1.618 / 1"}],Be=>Be.token,(Be,De)=>{var dt=Ym(),tt=s(dt),Ie=s(tt),st=r(tt,2),z=r(st,2);{var $=M=>{var V=Hs();x("click",V,()=>e.onReset(De.token)),d(M,V)};L(z,M=>{De.token in e.overrides&&M($)})}C(()=>{y(Ie,De.label),Jt(st,e.overrides[De.token]??""),ee(st,"placeholder",De.def)}),x("input",st,M=>{const V=M.target.value.trim();V?e.onSet(De.token,V):e.onReset(De.token)}),d(Be,dt)}),d(Se,Qe)};L(Dt,Se=>{t(O)&&Se(Vt)})}var Wt=r(ot,4),ua=s(Wt),Ua=r(s(ua),2),Pa=s(Ua),Aa=r(ua,2);{var bt=Se=>{var Qe=Xm(),lt=r(s(Qe),2);oe(lt,16,()=>[{label:"Fit",token:"--sf-bg-fit",placeholder:"cover",opts:["cover","contain","fill","none","scale-down"]},{label:"Position",token:"--sf-bg-position",placeholder:"50% 50%",opts:["50% 50%","top","bottom","left","right","center"]}],tt=>tt.token,(tt,Ie)=>{var st=ol(),z=s(st),$=s(z),M=r(z,2);oe(M,20,()=>Ie.opts,ie=>ie,(ie,me)=>{var ge=al(),Le=s(ge),Ue={};C(()=>{y(Le,me),Ue!==(Ue=me)&&(ge.value=(ge.__value=me)??"")}),d(ie,ge)});var V;Na(M);var te=r(M,2);{var Re=ie=>{var me=Hs();x("click",me,()=>e.onReset(Ie.token)),d(ie,me)};L(te,ie=>{Ie.token in e.overrides&&ie(Re)})}C(()=>{y($,Ie.label),V!==(V=e.overrides[Ie.token]??Ie.placeholder)&&(M.value=(M.__value=e.overrides[Ie.token]??Ie.placeholder)??"",Ia(M,e.overrides[Ie.token]??Ie.placeholder))}),x("change",M,ie=>{const me=ie.target.value;me===Ie.placeholder?e.onReset(Ie.token):e.onSet(Ie.token,me)}),d(tt,st)});var Be=r(lt,2);{let tt=u(()=>o(e.overrides["--sf-bg-inset"],0)),Ie=u(()=>"--sf-bg-inset"in e.overrides);xt(Be,{label:"Inset",get value(){return t(tt)},min:0,max:4,step:.25,unit:"rem",help:"--sf-bg-inset — inset the background from the container edges",get overridden(){return t(Ie)},onChange:st=>e.onSet("--sf-bg-inset",`${st}rem`),onReset:()=>e.onReset("--sf-bg-inset")})}var De=r(Be,2);{let tt=u(()=>o(e.overrides["--sf-bg-radius"],0)),Ie=u(()=>"--sf-bg-radius"in e.overrides);xt(De,{label:"Radius",get value(){return t(tt)},min:0,max:4,step:.125,unit:"rem",help:"--sf-bg-radius — corner radius of the background element",get overridden(){return t(Ie)},onChange:st=>e.onSet("--sf-bg-radius",`${st}rem`),onReset:()=>e.onReset("--sf-bg-radius")})}var dt=r(De,2);{let tt=u(()=>o(e.overrides["--sf-bg-z"],-2)),Ie=u(()=>"--sf-bg-z"in e.overrides);xt(dt,{label:"Z-index",get value(){return t(tt)},min:-10,max:0,step:1,help:"--sf-bg-z — stack order of the background pseudo-element (typically negative)",get overridden(){return t(Ie)},onChange:st=>e.onSet("--sf-bg-z",String(st)),onReset:()=>e.onReset("--sf-bg-z")})}d(Se,Qe)};L(Aa,Se=>{t(j)&&Se(bt)})}C(()=>{ee(re,"aria-expanded",t(P)),y(de,t(P)?"▲":"▼"),ee(Pe,"aria-expanded",t(B)),y(at,t(B)?"▲":"▼"),ee(gt,"aria-expanded",t(I)),y(_t,t(I)?"▲":"▼"),ee(q,"aria-expanded",t(H)),y(ue,t(H)?"▲":"▼"),ee(W,"aria-expanded",t(T)),y(Oe,t(T)?"▲":"▼"),ee(ct,"aria-expanded",t(R)),y(ht,t(R)?"▲":"▼"),ee(aa,"aria-expanded",t(w)),y(Rt,t(w)?"▲":"▼"),ee(_e,"aria-expanded",t(A)),y(Tt,t(A)?"▲":"▼"),ee(nt,"aria-expanded",t(O)),y(jt,t(O)?"▲":"▼"),ee(ua,"aria-expanded",t(j)),y(Pa,t(j)?"▲":"▼")}),x("click",re,()=>{_(P,!t(P))}),x("click",Pe,()=>{_(B,!t(B))}),x("click",gt,()=>{_(I,!t(I))}),x("click",q,()=>{_(H,!t(H))}),x("click",W,()=>{_(T,!t(T))}),x("click",ct,()=>{_(R,!t(R))}),x("click",aa,()=>{_(w,!t(w))}),x("click",_e,()=>{_(A,!t(A))}),x("click",nt,()=>{_(O,!t(O))}),x("click",ua,()=>{_(j,!t(j))}),d(a,G),ta()}oa(["click","change","input"]);var $m=g('

Drives --sf-color-border--strong, --subtle, --translucent automatically.

',1),ev=g('
'),tv=g('
',1),av=g(''),ov=g('
'),sv=g('
Border sample
',1),rv=g('
Color
',1),nv=g('
Ring color
Focus preview
',1),lv=g('
'),iv=g('
'),cv=g('
'),dv=g('
'),fv=g('
'),uv=g('
Radius
');function pv(a,e){ea(e,!0);const o=["solid","dashed","dotted"],n=["xs","s","m","l","xl","2xl","full"],l={xs:2,s:4,m:8,l:12,xl:16,"2xl":24,full:9999},i=[{step:"xs",name:"--sf-radius-xs",default:2,max:16,step_size:.5,rawDefault:"calc(2px * var(--sf-radius-scale))"},{step:"s",name:"--sf-radius-s",default:4,max:24,step_size:.5,rawDefault:"calc(4px * var(--sf-radius-scale))"},{step:"m",name:"--sf-radius-m",default:8,max:32,step_size:1,rawDefault:"calc(8px * var(--sf-radius-scale))"},{step:"l",name:"--sf-radius-l",default:12,max:48,step_size:1,rawDefault:"calc(12px * var(--sf-radius-scale))"},{step:"xl",name:"--sf-radius-xl",default:16,max:64,step_size:1,rawDefault:"calc(16px * var(--sf-radius-scale))"},{step:"2xl",name:"--sf-radius-2xl",default:24,max:80,step_size:2,rawDefault:"calc(24px * var(--sf-radius-scale))"}],c=[{label:"Button radius",token:"--sf-btn-radius",unit:"rem",min:0,max:2,step:.05,default:.5,rawDefault:"var(--sf-radius-m)",help:"--sf-btn-radius"},{label:"Button padding block",token:"--sf-btn-padding-block",unit:"rem",min:0,max:1,step:.025,default:.375,rawDefault:"var(--sf-space-xs)",help:"--sf-btn-padding-block"},{label:"Button padding inline",token:"--sf-btn-padding-inline",unit:"rem",min:0,max:2,step:.025,default:1,rawDefault:"var(--sf-space-m)",help:"--sf-btn-padding-inline"},{label:"Field radius",token:"--sf-field-radius",unit:"rem",min:0,max:2,step:.05,default:.5,rawDefault:"var(--sf-radius-m)",help:"--sf-field-radius"},{label:"Field padding block",token:"--sf-field-padding-block",unit:"rem",min:0,max:1,step:.025,default:.375,rawDefault:"var(--sf-space-xs)",help:"--sf-field-padding-block"},{label:"Field padding inline",token:"--sf-field-padding-inline",unit:"rem",min:0,max:2,step:.025,default:.75,rawDefault:"var(--sf-space-s)",help:"--sf-field-padding-inline"}],f=Vo.borders??[];let p=K(!1),m=K(!1),h=K(!1),v=K(!1),b=K(!1),k=K(!1),S=K(!1),E=K(!1),P=K(!1);function B(Xe,It,ot){if(!Xe)return It;const nt=parseFloat(ot?Xe.replace(ot,""):Xe);return isNaN(nt)?It:nt}let I=u(()=>B(e.overrides["--sf-radius-scale"],1)),H=u(()=>B(e.overrides["--sf-border-scale"],1)),T=u(()=>B(e.overrides["--sf-focus-ring-width"],2,"px")),R=u(()=>B(e.overrides["--sf-focus-ring-offset"],2,"px")),w=u(()=>B(e.overrides["--sf-divider-width"]?.replace("px",""),1)),A=u(()=>B(e.overrides["--sf-divider-gap"]?.replace("rem",""),1)),j=u(()=>e.overrides["--sf-color-border"]??""),O=u(()=>e.overrides["--sf-border-style"]??"solid"),F=u(()=>e.overrides["--sf-focus-ring-color"]??""),D=u(()=>e.overrides["--sf-divider-color"]??"");function J(Xe,It){return e.overrides[Xe]??It}function ye(Xe){const It=e.overrides[Xe.name];if(!It||/^(var|calc|clamp)\(/.test(It.trim()))return Xe.default;const ot=parseFloat(It);return isNaN(ot)?Xe.default:ot}function Ae(Xe){const It=e.overrides[Xe.token];if(!It||/^(var|calc|clamp)\(/.test(It.trim()))return Xe.default;const ot=parseFloat(It);return isNaN(ot)?Xe.default:ot}var Te=uv(),xe=s(Te),pe=s(xe),Q=r(s(pe),2),le=s(Q),we=r(pe,2);{var ze=Xe=>{var It=$m(),ot=ce(It);{let nt=u(()=>"--sf-color-border"in e.overrides);Qa(ot,{token:"--sf-color-border",get value(){return t(j)},placeholder:"auto-derived",get isOverridden(){return t(nt)},onSet:qt=>e.onSet("--sf-color-border",qt),onReset:()=>e.onReset("--sf-color-border")})}d(Xe,It)};L(we,Xe=>{t(p)&&Xe(ze)})}var N=r(xe,4),G=s(N),Z=r(s(G),2),re=s(Z),Y=r(G,2);{var de=Xe=>{var It=tv(),ot=ce(It);{let Dt=u(()=>"--sf-border-scale"in e.overrides);xt(ot,{label:"Border scale",get value(){return t(H)},min:0,max:4,step:.25,help:"Multiplier applied to all border widths. 0 hides all borders.",get overridden(){return t(Dt)},onChange:Vt=>e.onSet("--sf-border-scale",String(Vt)),onReset:()=>e.onReset("--sf-border-scale")})}var nt=r(ot,2);{let Dt=u(()=>B(e.overrides["--sf-border-width-hairline"]?.replace("px",""),.5)),Vt=u(()=>"--sf-border-width-hairline"in e.overrides);xt(nt,{label:"Hairline",get value(){return t(Dt)},min:0,max:1,step:.25,unit:"px",help:"--sf-border-width-hairline — ultra-thin border for retina displays",get overridden(){return t(Vt)},onChange:Wt=>e.onSet("--sf-border-width-hairline",`${Wt}px`),onReset:()=>e.onReset("--sf-border-width-hairline")})}var qt=r(nt,2);{let Dt=u(()=>B(e.overrides["--sf-box-border-width"]?.replace("px",""),0)),Vt=u(()=>"--sf-box-border-width"in e.overrides);xt(qt,{label:"Box border",get value(){return t(Dt)},min:0,max:4,step:.5,unit:"px",help:"--sf-box-border-width — box-shadow border drawn without affecting layout",get overridden(){return t(Vt)},onChange:Wt=>e.onSet("--sf-box-border-width",`${Wt}px`),onReset:()=>e.onReset("--sf-box-border-width")})}var jt=r(qt,2);oe(jt,20,()=>[1,2,3,4],Dt=>Dt,(Dt,Vt)=>{var Wt=ev(),ua=s(Wt),Ua=s(ua),Pa=r(ua,2),Aa=r(Pa,2),bt=s(Aa);C((Se,Qe)=>{y(Ua,`${Vt??""}px →`),it(Pa,Se),y(bt,`${Qe??""}px`)},[()=>`height: ${Math.max(Vt*t(H),.5)}px`,()=>(Vt*t(H)).toFixed(1)]),d(Dt,Wt)}),d(Xe,It)};L(Y,Xe=>{t(m)&&Xe(de)})}var be=r(N,4),he=s(be),ne=r(s(he),2),Pe=s(ne),qe=r(he,2);{var at=Xe=>{var It=sv(),ot=ce(It);oe(ot,20,()=>[{label:"Border",token:"--sf-border-style",default:"solid"},{label:"Divider",token:"--sf-divider-style",default:"solid"}],Vt=>Vt.token,(Vt,Wt)=>{var ua=ov(),Ua=s(ua),Pa=s(Ua),Aa=r(Ua,2);oe(Aa,20,()=>o,bt=>bt,(bt,Se)=>{const Qe=u(()=>J(Wt.token,Wt.default));var lt=av(),Be=s(lt),De=r(Be);C(()=>{Ye(lt,1,`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${t(Qe)===Se?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),it(Be,`width: 20px; height: 0; border-bottom: 2px ${Se} currentColor; opacity: 0.7`),y(De,` ${Se??""}`)}),x("click",lt,()=>Se===Wt.default?e.onReset(Wt.token):e.onSet(Wt.token,Se)),d(bt,lt)}),C(()=>y(Pa,Wt.label)),d(Vt,ua)});var nt=r(ot,2),qt=s(nt),jt=r(qt,2),Dt=s(jt);C((Vt,Wt)=>{it(qt,Vt),y(Dt,`${Wt??""}px · ${t(O)??""}`)},[()=>`border: ${Math.max(t(H),.5)}px ${t(O)} ${t(j)||"var(--sf-color-border, #64748b)"}`,()=>(1*t(H)).toFixed(1)]),d(Xe,It)};L(qe,Xe=>{t(h)&&Xe(at)})}var Ke=r(be,4),et=s(Ke),ft=r(s(et),2),gt=s(ft),Ot=r(et,2);{var _t=Xe=>{var It=rv(),ot=ce(It),nt=r(s(ot),2);{let Dt=u(()=>"--sf-divider-color"in e.overrides);Qa(nt,{token:"--sf-divider-color",get value(){return t(D)},placeholder:"inherits border",get isOverridden(){return t(Dt)},onSet:Vt=>e.onSet("--sf-divider-color",Vt),onReset:()=>e.onReset("--sf-divider-color")})}var qt=r(ot,2);{let Dt=u(()=>"--sf-divider-width"in e.overrides);xt(qt,{label:"Width",get value(){return t(w)},min:.5,max:4,step:.5,unit:"px",help:"--sf-divider-width",get overridden(){return t(Dt)},onChange:Vt=>e.onSet("--sf-divider-width",`${Vt}px`),onReset:()=>e.onReset("--sf-divider-width"),rawDefault:"var(--sf-border-width-1)",get currentRaw(){return e.overrides["--sf-divider-width"]},onRawSet:Vt=>e.onSet("--sf-divider-width",Vt)})}var jt=r(qt,2);{let Dt=u(()=>"--sf-divider-gap"in e.overrides);xt(jt,{label:"Gap",get value(){return t(A)},min:0,max:4,step:.125,unit:"rem",help:"--sf-divider-gap — spacing around divider lines",get overridden(){return t(Dt)},onChange:Vt=>e.onSet("--sf-divider-gap",`${Vt}rem`),onReset:()=>e.onReset("--sf-divider-gap"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-divider-gap"]},onRawSet:Vt=>e.onSet("--sf-divider-gap",Vt)})}d(Xe,It)};L(Ot,Xe=>{t(v)&&Xe(_t)})}var mt=r(Ke,4),ae=s(mt),fe=r(s(ae),2),q=s(fe),X=r(ae,2);{var ue=Xe=>{var It=nv(),ot=ce(It);{let Wt=u(()=>"--sf-focus-ring-width"in e.overrides);xt(ot,{label:"Ring width",get value(){return t(T)},min:0,max:6,step:.5,unit:"px",help:"Thickness of the keyboard focus indicator",get overridden(){return t(Wt)},onChange:ua=>e.onSet("--sf-focus-ring-width",`${ua}px`),onReset:()=>e.onReset("--sf-focus-ring-width")})}var nt=r(ot,2);{let Wt=u(()=>"--sf-focus-ring-offset"in e.overrides);xt(nt,{label:"Ring offset",get value(){return t(R)},min:0,max:8,step:.5,unit:"px",help:"Gap between element edge and focus ring",get overridden(){return t(Wt)},onChange:ua=>e.onSet("--sf-focus-ring-offset",`${ua}px`),onReset:()=>e.onReset("--sf-focus-ring-offset")})}var qt=r(nt,2),jt=r(s(qt),2);{let Wt=u(()=>"--sf-focus-ring-color"in e.overrides);Qa(jt,{token:"--sf-focus-ring-color",get value(){return t(F)},placeholder:"default (action)",get isOverridden(){return t(Wt)},onSet:ua=>e.onSet("--sf-focus-ring-color",ua),onReset:()=>e.onReset("--sf-focus-ring-color")})}var Dt=r(qt,2),Vt=s(Dt);C(()=>it(Vt,`outline: ${t(T)}px solid ${t(F)||"oklch(0.7 0.2 235)"}; outline-offset: ${t(R)}px`)),d(Xe,It)};L(X,Xe=>{t(b)&&Xe(ue)})}var je=r(mt,6),Ze=s(je),U=r(s(Ze),2),W=s(U),se=r(Ze,2);{var Oe=Xe=>{var It=lv();oe(It,21,()=>i,ot=>ot.name,(ot,nt)=>{{let qt=u(()=>ye(t(nt))),jt=u(()=>t(nt).name in e.overrides);xt(ot,{get label(){return t(nt).step},get value(){return t(qt)},min:0,get max(){return t(nt).max},get step(){return t(nt).step_size},unit:"px",get overridden(){return t(jt)},onChange:Dt=>e.onSet(t(nt).name,`${Dt}px`),onReset:()=>e.onReset(t(nt).name),get rawDefault(){return t(nt).rawDefault},get currentRaw(){return e.overrides[t(nt).name]},onRawSet:Dt=>e.onSet(t(nt).name,Dt)})}}),d(Xe,It)};L(se,Xe=>{t(E)&&Xe(Oe)})}var Ce=r(je,2),vt=s(Ce),He=r(s(vt),2),ct=s(He),rt=r(vt,2);{var ht=Xe=>{var It=cv(),ot=s(It);oe(ot,20,()=>n,nt=>nt,(nt,qt)=>{const jt=u(()=>l[qt]??6),Dt=u(()=>qt==="full"?9999:t(jt)*t(I));var Vt=iv(),Wt=s(Vt),ua=r(Wt,2),Ua=s(ua);C(Pa=>{it(Wt,Pa),y(Ua,qt)},[()=>`border-radius: ${Math.min(t(Dt),9999)}px`]),d(nt,Vt)}),d(Xe,It)};L(rt,Xe=>{t(S)&&Xe(ht)})}var Me=r(Ce,4),At=s(Me),Ft=r(s(At),2),aa=s(Ft),Mt=r(At,2);{var Rt=Xe=>{var It=dv();oe(It,21,()=>c,ot=>ot.token,(ot,nt)=>{{let qt=u(()=>Ae(t(nt))),jt=u(()=>t(nt).token in e.overrides);xt(ot,{get label(){return t(nt).label},get value(){return t(qt)},get min(){return t(nt).min},get max(){return t(nt).max},get step(){return t(nt).step},get unit(){return t(nt).unit},get help(){return t(nt).help},get overridden(){return t(jt)},onChange:Dt=>e.onSet(t(nt).token,`${Dt}${t(nt).unit}`),onReset:()=>e.onReset(t(nt).token),get rawDefault(){return t(nt).rawDefault},get currentRaw(){return e.overrides[t(nt).token]},onRawSet:Dt=>e.onSet(t(nt).token,Dt)})}}),d(Xe,It)};L(Mt,Xe=>{t(P)&&Xe(Rt)})}var na=r(Me,4),da=s(na),fa=r(s(da),2),_e=s(fa),kt=r(da,2);{var Tt=Xe=>{var It=fv();oe(It,21,()=>f,ot=>ot.name,(ot,nt)=>{Ko(ot,{get knob(){return t(nt)},get overrides(){return e.overrides},onChange:(qt,jt)=>jt===null?e.onReset(qt):e.onSet(qt,jt)})}),d(Xe,It)};L(kt,Xe=>{t(k)&&Xe(Tt)})}C(()=>{ee(pe,"aria-expanded",t(p)),y(le,t(p)?"▲":"▼"),ee(G,"aria-expanded",t(m)),y(re,t(m)?"▲":"▼"),ee(he,"aria-expanded",t(h)),y(Pe,t(h)?"▲":"▼"),ee(et,"aria-expanded",t(v)),y(gt,t(v)?"▲":"▼"),ee(ae,"aria-expanded",t(b)),y(q,t(b)?"▲":"▼"),ee(Ze,"aria-expanded",t(E)),y(W,t(E)?"▲":"▼"),ee(vt,"aria-expanded",t(S)),y(ct,t(S)?"▲":"▼"),ee(At,"aria-expanded",t(P)),y(aa,t(P)?"▲":"▼"),ee(da,"aria-expanded",t(k)),y(_e,t(k)?"▲":"▼")}),x("click",pe,()=>{_(p,!t(p))}),x("click",G,()=>{_(m,!t(m))}),x("click",he,()=>{_(h,!t(h))}),x("click",et,()=>{_(v,!t(v))}),x("click",ae,()=>{_(b,!t(b))}),x("click",Ze,()=>{_(E,!t(E))}),x("click",vt,()=>{_(S,!t(S))}),x("click",At,()=>{_(P,!t(P))}),x("click",da,()=>{_(k,!t(k))}),d(a,Te),ta()}oa(["click"]);var mv=g('
'),vv=g('
Shadow color

Warm, cool or brand-tinted shadows. Default uses neutral hue.

'),hv=g('
Glow color

Which brand color radiates the glow. Defaults to primary.

'),gv=g('

Glow disabled.

'),bv=g('
Shadow glow
Ambient glow on elevated surfaces
',1),yv=g('
'),xv=g('
');function kv(a,e){ea(e,!0);const o=["xs","s","m","l","xl","2xl"],n=Vo.shadows??[];let l=u(()=>(()=>{const xe=parseFloat(e.overrides["--sf-shadow-lightness"]??"0.15");return isFinite(xe)?xe:.15})()),i=u(()=>e.overrides["--sf-shadow-color"]??""),c=u(()=>e.overrides["--sf-shadow-glow-color"]??""),f=u(()=>e.overrides["--sf-shadow-glow"]==="none"),p=K(!1),m=K(!1),h=K(!1);var v=xv(),b=s(v);oe(b,22,()=>o,xe=>xe,(xe,pe,Q)=>{var le=mv(),we=s(le),ze=r(we,2),N=s(ze);C(()=>{it(we,`width: ${40+t(Q)*4}px; height: ${40+t(Q)*4}px; box-shadow: var(--sf-shadow-${pe})`),y(N,pe)}),d(xe,le)});var k=r(b,4);{let xe=u(()=>"--sf-shadow-lightness"in e.overrides);xt(k,{label:"Shadow lightness",get value(){return t(l)},min:0,max:.5,step:.01,help:"--sf-shadow-lightness — OKLCH lightness of the shadow color. Lower = darker, more visible shadows.",get overridden(){return t(xe)},onChange:pe=>e.onSet("--sf-shadow-lightness",String(pe)),onReset:()=>e.onReset("--sf-shadow-lightness")})}var S=r(k,4),E=s(S),P=r(s(E),2),B=s(P),I=r(E,2);{var H=xe=>{var pe=vv(),Q=r(s(pe),2);{let le=u(()=>"--sf-shadow-color"in e.overrides);Qa(Q,{token:"--sf-shadow-color",get value(){return t(i)},placeholder:"auto (neutral hue)",get isOverridden(){return t(le)},onSet:we=>e.onSet("--sf-shadow-color",we),onReset:()=>e.onReset("--sf-shadow-color")})}d(xe,pe)};L(I,xe=>{t(p)&&xe(H)})}var T=r(S,4),R=s(T),w=r(s(R),2),A=s(w),j=r(R,2);{var O=xe=>{var pe=bv(),Q=ce(pe),le=r(s(Q),2),we=s(le),ze=r(Q,2);{var N=de=>{var be=hv(),he=r(s(be),2);{let ne=u(()=>"--sf-shadow-glow-color"in e.overrides);Qa(he,{token:"--sf-shadow-glow-color",get value(){return t(c)},placeholder:"default (primary color)",get isOverridden(){return t(ne)},onSet:Pe=>e.onSet("--sf-shadow-glow-color",Pe),onReset:()=>e.onReset("--sf-shadow-glow-color")})}d(de,be)};L(ze,de=>{t(f)||de(N)})}var G=r(ze,2),Z=s(G),re=r(G,2);{var Y=de=>{var be=gv();d(de,be)};L(re,de=>{t(f)&&de(Y)})}C(()=>{ee(le,"aria-label",t(f)?"Enable shadow glow":"Disable shadow glow"),Ye(le,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${t(f)?"bg-white/10":"bg-indigo-600"}`),Ye(we,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${t(f)?"translate-x-0.5":"translate-x-4"}`),it(Z,`box-shadow: ${t(f)?"none":"var(--sf-shadow-glow)"}`)}),x("click",le,()=>{t(f)?e.onReset("--sf-shadow-glow"):e.onSet("--sf-shadow-glow","none")}),d(xe,pe)};L(j,xe=>{t(m)&&xe(O)})}var F=r(T,4),D=s(F),J=r(s(D),2),ye=s(J),Ae=r(D,2);{var Te=xe=>{var pe=yv();oe(pe,21,()=>n,Q=>Q.name,(Q,le)=>{Ko(Q,{get knob(){return t(le)},get overrides(){return e.overrides},onChange:(we,ze)=>ze===null?e.onReset(we):e.onSet(we,ze)})}),d(xe,pe)};L(Ae,xe=>{t(h)&&xe(Te)})}C(()=>{ee(E,"aria-expanded",t(p)),y(B,t(p)?"▲":"▼"),ee(R,"aria-expanded",t(m)),y(A,t(m)?"▲":"▼"),ee(D,"aria-expanded",t(h)),y(ye,t(h)?"▲":"▼")}),x("click",E,()=>{_(p,!t(p))}),x("click",R,()=>{_(m,!t(m))}),x("click",D,()=>{_(h,!t(h))}),d(a,v),ta()}oa(["click"]);var wv=g('

Motion is disabled — duration & easing have no effect while scale is 0.

'),rl=g(''),_v=g('(No effect while motion is disabled.)'),Cv=g('
'),Ov=g('

Named duration tokens. Drag to set an absolute ms value, overriding the global scale.

',1),Sv=g(''),Lv=g('
'),Pv=g('

Edit the named easing tokens. Accepts any CSS timing function — cubic-bezier(…) or linear(…). Use “Live preview” above to feel a curve.

',1),Iv=g(''),Bv=g('
'),Uv=g('

One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).

Stagger base
',1),Av=g(''),zv=g('
'),Ev=g('

Default animation-range for scroll-driven animations using the .sf-scroll-timeline utility.

',1),Rv=g('
Disable motion
Respects prefers-reduced-motion
Live preview
');function Tv(a,e){ea(e,!0);const o=[{label:"Instant",token:"--sf-duration-instant",base:100,max:300},{label:"Fast",token:"--sf-duration-fast",base:150,max:500},{label:"Normal",token:"--sf-duration-normal",base:250,max:800},{label:"Slow",token:"--sf-duration-slow",base:400,max:1200},{label:"Slower",token:"--sf-duration-slower",base:600,max:2e3}],n=[{label:"Linear",token:"--sf-ease-linear",value:"linear",preview:"M0,40 L40,0"},{label:"Ease out",token:"--sf-ease-out",value:"cubic-bezier(0.25, 0, 0.15, 1)",preview:"M0,40 C8,40 28,0 40,0"},{label:"Ease in",token:"--sf-ease-in",value:"cubic-bezier(0.5, 0, 0.75, 0.25)",preview:"M0,40 C12,40 32,32 40,0"},{label:"Ease in-out",token:"--sf-ease-in-out",value:"cubic-bezier(0.4, 0, 0.2, 1)",preview:"M0,40 C8,40 32,0 40,0"},{label:"Spring",token:"--sf-ease-spring",value:"linear(0, 0.5, 1.1, 0.95, 1.02, 1)",preview:"M0,40 C10,20 20,-4 28,-2 S38,2 40,0"},{label:"Bounce",token:"--sf-ease-bounce",value:"linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)",preview:"M0,40 L12,16 L20,0 L26,6 L32,-1 L36,1 L40,0"},{label:"Elastic",token:"--sf-ease-elastic",value:"linear(0, 0.3, 1.2, 0.9, 1.05, 1)",preview:"M0,40 C8,40 16,-10 24,-2 S36,2 40,0"},{label:"Overshoot",token:"--sf-ease-overshoot",value:"linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)",preview:"M0,40 C8,40 20,-10 40,0"}],l=["--sf-animation-delay-1","--sf-animation-delay-2","--sf-animation-delay-3","--sf-animation-delay-4","--sf-animation-delay-5"],i=Vo.motion??[];let c=u(()=>(()=>{const U=parseFloat(e.overrides["--sf-motion-scale"]??"1");return isFinite(U)?U:1})()),f=u(()=>e.overrides["--sf-motion-scale"]==="0"),p=u(()=>(()=>{const U=parseFloat(e.overrides["--sf-theme-transition-duration"]?.replace("ms","")??String(300*t(c)));return isFinite(U)?U:Math.round(300*t(c))})()),m=u(()=>{const U=e.overrides[l[0]];return U?parseFloat(U.replace("ms","")):75*t(c)}),h=K(!1),v=K(0),b=K("--sf-ease-out"),k=K("--sf-duration-normal"),S=K(!1),E=K(!1),P=K(!1),B=K(!1);function I(U,W){const se=e.overrides[U];if(se){const Oe=parseFloat(se);if(isFinite(Oe))return Oe}return Math.round(W*t(c))}function H(U){return e.overrides[U]??n.find(W=>W.token===U)?.value??"ease"}function T(){if(t(h))return;const U=o.find(se=>se.token===t(k))?.base??250,W=I(t(k),U);_(h,!0),_(v,180),setTimeout(()=>{_(v,0),setTimeout(()=>{_(h,!1)},W)},W)}function R(U){const W={};for(let se=1;se<=5;se++)W[`--sf-animation-delay-${se}`]=`${Math.round(U*se)}ms`;e.onBulkChange(W)}function w(){const U={};for(let W=1;W<=5;W++)U[`--sf-animation-delay-${W}`]=null;e.onBulkChange(U)}var A=Rv(),j=s(A),O=r(s(j),2),F=s(O),D=r(j,2);{var J=U=>{var W=wv();d(U,W)};L(D,U=>{t(f)&&U(J)})}var ye=r(D,2),Ae=r(s(ye),2),Te=s(Ae),xe=s(Te),pe=r(Te,2),Q=s(pe);oe(Q,21,()=>n,U=>U.token,(U,W)=>{var se=rl(),Oe=s(se),Ce={};C(()=>{y(Oe,t(W).label),Ce!==(Ce=t(W).token)&&(se.value=(se.__value=t(W).token)??"")}),d(U,se)});var le;Na(Q);var we=r(Q,2);oe(we,21,()=>o,U=>U.token,(U,W)=>{var se=rl(),Oe=s(se),Ce={};C(()=>{y(Oe,t(W).label),Ce!==(Ce=t(W).token)&&(se.value=(se.__value=t(W).token)??"")}),d(U,se)});var ze;Na(we);var N=r(we,2),G=s(N),Z=r(ye,4),re=s(Z),Y=r(s(re),2),de=s(Y),be=r(re,2);{var he=U=>{var W=Ov(),se=ce(W),Oe=r(s(se));{var Ce=ct=>{var rt=_v();d(ct,rt)};L(Oe,ct=>{t(f)&&ct(Ce)})}var vt=r(se,2);oe(vt,17,()=>o,ct=>ct.token,(ct,rt)=>{const ht=u(()=>I(t(rt).token,t(rt).base));{let Me=u(()=>t(rt).token in e.overrides);xt(ct,{get label(){return t(rt).label},get value(){return t(ht)},min:0,get max(){return t(rt).max},step:10,unit:"ms",get overridden(){return t(Me)},onChange:At=>e.onSet(t(rt).token,`${At}ms`),onReset:()=>e.onReset(t(rt).token)})}});var He=r(vt,2);oe(He,21,()=>o,ct=>ct.label,(ct,rt)=>{const ht=u(()=>I(t(rt).token,t(rt).base));var Me=Cv(),At=s(Me),Ft=s(At),aa=r(At,2),Mt=s(aa),Rt=r(aa,2),na=s(Rt);C(da=>{y(Ft,t(rt).label),it(Mt,da),y(na,`${t(ht)??""}ms`)},[()=>`width: ${Math.min(t(ht)/1200*100,100)}%`]),d(ct,Me)}),d(U,W)};L(be,U=>{t(S)&&U(he)})}var ne=r(Z,4),Pe=s(ne),qe=r(s(Pe),2),at=s(qe),Ke=r(Pe,2);{var et=U=>{var W=Pv(),se=r(ce(W),2);oe(se,21,()=>n,Oe=>Oe.token,(Oe,Ce)=>{const vt=u(()=>t(Ce).token in e.overrides);var He=Lv(),ct=s(He),rt=s(ct),ht=s(rt),Me=r(rt,2),At=s(Me),Ft=s(At),aa=s(Ft),Mt=r(Ft,2),Rt=s(Mt),na=r(Rt,2);{var da=_e=>{var kt=Sv();x("click",kt,()=>e.onReset(t(Ce).token)),d(_e,kt)};L(na,_e=>{t(vt)&&_e(da)})}var fa=r(At,2);C(()=>{Ye(He,1,`p-2.5 rounded-xl border transition-all ${t(vt)?"bg-indigo-500/10 border-indigo-500/30":"border-white/8 bg-white/3"}`),ee(ht,"d",t(Ce).preview),y(aa,t(Ce).label),Jt(fa,e.overrides[t(Ce).token]??""),ee(fa,"placeholder",t(Ce).value)}),x("click",Rt,()=>{_(b,t(Ce).token,!0),T()}),x("input",fa,_e=>{const kt=_e.target.value.trim();kt?e.onSet(t(Ce).token,kt):e.onReset(t(Ce).token)}),d(Oe,He)}),d(U,W)};L(Ke,U=>{t(E)&&U(et)})}var ft=r(ne,4),gt=s(ft),Ot=r(s(gt),2),_t=s(Ot),mt=r(gt,2);{var ae=U=>{var W=Uv(),se=r(ce(W),2),Oe=s(se),Ce=r(s(Oe),2);{var vt=ht=>{var Me=Iv();x("click",Me,w),d(ht,Me)},He=u(()=>l.some(ht=>ht in e.overrides));L(Ce,ht=>{t(He)&&ht(vt)})}var ct=r(Oe,2);{let ht=u(()=>Math.round(t(m))),Me=u(()=>l.some(At=>At in e.overrides));xt(ct,{label:"",get value(){return t(ht)},min:0,max:200,step:5,unit:"ms",help:"Base unit for --sf-animation-delay-1 through -5",get overridden(){return t(Me)},onChange:At=>R(At),onReset:w})}var rt=r(se,2);oe(rt,20,()=>[1,2,3,4,5],ht=>ht,(ht,Me)=>{const At=u(()=>Math.round(t(m)*Me));var Ft=Bv(),aa=s(Ft),Mt=s(aa),Rt=r(aa,2),na=s(Rt),da=r(Rt,2),fa=s(da);C(_e=>{y(Mt,`–${Me??""}`),it(na,_e),y(fa,`${t(At)??""}ms`)},[()=>`width: ${Math.min(t(At)/600*100,100)}%`]),d(ht,Ft)}),d(U,W)};L(mt,U=>{t(P)&&U(ae)})}var fe=r(ft,4),q=s(fe),X=r(s(q),2),ue=s(X),je=r(q,2);{var Ze=U=>{var W=Ev(),se=ce(W);oe(se,21,()=>i,He=>He.name,(He,ct)=>{Ko(He,{get knob(){return t(ct)},get overrides(){return e.overrides},onChange:(rt,ht)=>ht===null?e.onReset(rt):e.onSet(rt,ht)})});var Oe=r(se,2);{let He=u(()=>"--sf-theme-transition-duration"in e.overrides);xt(Oe,{label:"Theme switch speed",get value(){return t(p)},min:0,max:600,step:10,unit:"ms",help:"--sf-theme-transition-duration — dark/light color-scheme switch animation speed",get overridden(){return t(He)},onChange:ct=>e.onSet("--sf-theme-transition-duration",`${ct}ms`),onReset:()=>e.onReset("--sf-theme-transition-duration")})}var Ce=r(Oe,2),vt=r(s(Ce),2);oe(vt,16,()=>[{label:"Range start",token:"--sf-scroll-timeline-range-start",placeholder:"entry 0%"},{label:"Range end",token:"--sf-scroll-timeline-range-end",placeholder:"cover 30%"}],He=>He.token,(He,ct)=>{var rt=zv(),ht=s(rt),Me=s(ht),At=r(ht,2),Ft=r(At,2);{var aa=Mt=>{var Rt=Av();x("click",Rt,()=>e.onReset(ct.token)),d(Mt,Rt)};L(Ft,Mt=>{ct.token in e.overrides&&Mt(aa)})}C(()=>{y(Me,ct.label),Jt(At,e.overrides[ct.token]??""),ee(At,"placeholder",ct.placeholder)}),x("input",At,Mt=>{const Rt=Mt.target.value.trim();Rt?e.onSet(ct.token,Rt):e.onReset(ct.token)}),d(He,rt)}),d(U,W)};L(je,U=>{t(B)&&U(Ze)})}C(U=>{ee(O,"title",t(f)?"Enable motion":"Disable motion"),Ye(O,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${t(f)?"bg-indigo-600":"bg-white/10"}`),Ye(F,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${t(f)?"translate-x-4":"translate-x-0.5"}`),it(xe,U),le!==(le=t(b))&&(Q.value=(Q.__value=t(b))??"",Ia(Q,t(b))),ze!==(ze=t(k))&&(we.value=(we.__value=t(k))??"",Ia(we,t(k))),N.disabled=t(h),y(G,t(h)?"…":"▶ Play"),ee(re,"aria-expanded",t(S)),y(de,t(S)?"▲":"▼"),ee(Pe,"aria-expanded",t(E)),y(at,t(E)?"▲":"▼"),ee(gt,"aria-expanded",t(P)),y(_t,t(P)?"▲":"▼"),ee(q,"aria-expanded",t(B)),y(ue,t(B)?"▲":"▼")},[()=>`transform: translateX(${t(v)}px); transition: transform ${I(t(k),o.find(U=>U.token===t(k))?.base??250)}ms ${H(t(b))}`]),x("click",O,()=>{t(f)?e.onReset("--sf-motion-scale"):e.onSet("--sf-motion-scale","0")}),x("change",Q,U=>{_(b,U.target.value,!0)}),x("change",we,U=>{_(k,U.target.value,!0)}),x("click",N,T),x("click",re,()=>{_(S,!t(S))}),x("click",Pe,()=>{_(E,!t(E))}),x("click",gt,()=>{_(P,!t(P))}),x("click",q,()=>{_(B,!t(B))}),d(a,A),ta()}oa(["click","change","input"]);var Dv=g("
"),Mv=g('
',1),Nv=g('
'),Fv=g('
',1),jv=g(""),Gv=g('

Gradient overlay for hero images and media content. Used by the .sf-scrim macro.

Color
Direction
Scrim preview
',1),Hv=g('
'),qv=g('
Scrollbar preview
',1),Vv=g(''),Kv=g('
'),Wv=g(`

Controls text legibility over images. Applied via text-shadow: var(--sf-text-shadow-m). - Edit each token directly — use none to disable.

`,1),Yv=g('
');function Zv(a,e){ea(e,!0);const o=[{label:"To top",value:"to top"},{label:"To bottom",value:"to bottom"},{label:"To left",value:"to left"},{label:"To right",value:"to right"}],n=[{label:"Small",token:"--sf-text-shadow-s",default:"0 1px 2px oklch(…)"},{label:"Medium",token:"--sf-text-shadow-m",default:"0 2px 4px oklch(…)"},{label:"Large",token:"--sf-text-shadow-l",default:"0 4px 8px oklch(…)"}];function l(ae,fe,q){if(!ae)return fe;const X=parseFloat(q?ae.replace(q,""):ae);return isNaN(X)?fe:X}let i=u(()=>l(e.overrides["--sf-blur"],12,"px")),c=u(()=>l(e.overrides["--sf-opacity-muted"],.5)),f=u(()=>l(e.overrides["--sf-opacity-disabled"],.45)),p=u(()=>e.overrides["--sf-scrim-direction"]??"to top"),m=u(()=>e.overrides["--sf-scrim-color"]??""),h=u(()=>l(e.overrides["--sf-scroll-shadow-size"]?.replace("rem",""),2)),v=u(()=>l(e.overrides["--sf-state-pending-opacity"],.7)),b=u(()=>e.overrides["--sf-scrollbar-thumb"]??""),k=u(()=>e.overrides["--sf-scrollbar-track"]??""),S=K(!1),E=K(!1),P=K(!1),B=K(!1),I=K(!1),H=K(!1);var T=Yv(),R=s(T),w=s(R),A=r(s(w),2),j=s(A),O=r(w,2);{var F=ae=>{var fe=Mv(),q=ce(fe);{let W=u(()=>"--sf-blur"in e.overrides);xt(q,{label:"Blur radius",get value(){return t(i)},min:0,max:48,step:1,unit:"px",help:"--sf-blur — used for frosted glass, modals, tooltips",get overridden(){return t(W)},onChange:se=>e.onSet("--sf-blur",`${se}px`),onReset:()=>e.onReset("--sf-blur")})}var X=r(q,2),ue=s(X);oe(ue,20,()=>Array.from({length:12}),mn,(W,se,Oe)=>{var Ce=Dv();Ye(Ce,1,mo(Oe%3===0?"bg-indigo-500/50":Oe%3===1?"bg-purple-500/40":"bg-blue-500/30")),d(W,Ce)});var je=r(ue,2),Ze=s(je),U=s(Ze);C(()=>{it(je,`backdrop-filter: blur(${t(i)}px)`),y(U,`${t(i)??""}px`)}),d(ae,fe)};L(O,ae=>{t(S)&&ae(F)})}var D=r(R,4),J=s(D),ye=r(s(J),2),Ae=s(ye),Te=r(J,2);{var xe=ae=>{var fe=Fv(),q=ce(fe);{let Ze=u(()=>"--sf-opacity-muted"in e.overrides);xt(q,{label:"Muted opacity",get value(){return t(c)},min:0,max:1,step:.05,help:"--sf-opacity-muted — secondary text, icons, and placeholder content",get overridden(){return t(Ze)},onChange:U=>e.onSet("--sf-opacity-muted",String(U)),onReset:()=>e.onReset("--sf-opacity-muted")})}var X=r(q,2);{let Ze=u(()=>"--sf-opacity-disabled"in e.overrides);xt(X,{label:"Disabled opacity",get value(){return t(f)},min:0,max:1,step:.05,help:"--sf-opacity-disabled — disabled form controls and interactive elements",get overridden(){return t(Ze)},onChange:U=>e.onSet("--sf-opacity-disabled",String(U)),onReset:()=>e.onReset("--sf-opacity-disabled")})}var ue=r(X,2);{let Ze=u(()=>"--sf-state-pending-opacity"in e.overrides);xt(ue,{label:"Pending opacity",get value(){return t(v)},min:.1,max:1,step:.05,help:"--sf-state-pending-opacity — opacity of elements in loading/pending state",get overridden(){return t(Ze)},onChange:U=>e.onSet("--sf-state-pending-opacity",String(U)),onReset:()=>e.onReset("--sf-state-pending-opacity")})}var je=r(ue,2);oe(je,21,()=>[{label:"muted",val:t(c)},{label:"disabled",val:t(f)},{label:"pending",val:t(v)}],Ze=>Ze.label,(Ze,U)=>{var W=Nv(),se=s(W),Oe=s(se),Ce=r(se,2),vt=r(Ce,2),He=s(vt);C(()=>{y(Oe,t(U).label),it(Ce,`opacity: ${t(U).val}`),y(He,t(U).val)}),d(Ze,W)}),d(ae,fe)};L(Te,ae=>{t(E)&&ae(xe)})}var pe=r(D,4),Q=s(pe),le=r(s(Q),2),we=s(le),ze=r(Q,2);{var N=ae=>{var fe=Gv(),q=r(ce(fe),2),X=r(s(q),2);{let se=u(()=>"--sf-scrim-color"in e.overrides);Qa(X,{token:"--sf-scrim-color",get value(){return t(m)},placeholder:"default (base color)",get isOverridden(){return t(se)},onSet:Oe=>e.onSet("--sf-scrim-color",Oe),onReset:()=>e.onReset("--sf-scrim-color")})}var ue=r(q,2),je=r(s(ue),2);oe(je,21,()=>o,se=>se.value,(se,Oe)=>{var Ce=jv(),vt=s(Ce);C(()=>{Ye(Ce,1,`py-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${t(p)===t(Oe).value?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(vt,t(Oe).label)}),x("click",Ce,()=>t(Oe).value==="to top"?e.onReset("--sf-scrim-direction"):e.onSet("--sf-scrim-direction",t(Oe).value)),d(se,Ce)});var Ze=r(ue,2),U=s(Ze),W=s(U);C(()=>it(W,`background: linear-gradient(${t(p)}, ${t(m)||"oklch(0 0 0 / 0.6)"}, transparent)`)),d(ae,fe)};L(ze,ae=>{t(P)&&ae(N)})}var G=r(pe,4),Z=s(G),re=r(s(Z),2),Y=s(re),de=r(Z,2);{var be=ae=>{var fe=qv(),q=ce(fe);oe(q,17,()=>[{label:"Thumb color",token:"--sf-scrollbar-thumb",val:t(b)},{label:"Track color",token:"--sf-scrollbar-track",val:t(k)}],W=>W.token,(W,se)=>{var Oe=Hv(),Ce=s(Oe),vt=s(Ce),He=r(Ce,2);{let ct=u(()=>t(se).token in e.overrides);Qa(He,{get token(){return t(se).token},get value(){return t(se).val},placeholder:"default",get isOverridden(){return t(ct)},onSet:rt=>e.onSet(t(se).token,rt),onReset:()=>e.onReset(t(se).token)})}C(()=>y(vt,t(se).label)),d(W,Oe)});var X=r(q,2),ue=s(X);let je;var Ze=s(ue);let U;C(()=>{je=it(ue,"",je,{background:t(k)||"rgba(255,255,255,0.08)"}),U=it(Ze,"",U,{background:t(b)||"oklch(0.52 0.025 260)"})}),d(ae,fe)};L(de,ae=>{t(B)&&ae(be)})}var he=r(G,4),ne=s(he),Pe=r(s(ne),2),qe=s(Pe),at=r(ne,2);{var Ke=ae=>{{let fe=u(()=>"--sf-scroll-shadow-size"in e.overrides);xt(ae,{label:"Shadow size",get value(){return t(h)},min:0,max:6,step:.25,unit:"rem",help:"--sf-scroll-shadow-size — gradient edge mask on .sf-scroll-shadow elements",get overridden(){return t(fe)},onChange:q=>e.onSet("--sf-scroll-shadow-size",`${q}rem`),onReset:()=>e.onReset("--sf-scroll-shadow-size")})}};L(at,ae=>{t(I)&&ae(Ke)})}var et=r(he,4),ft=s(et),gt=r(s(ft),2),Ot=s(gt),_t=r(ft,2);{var mt=ae=>{var fe=Wv(),q=r(ce(fe),2);oe(q,21,()=>n,X=>X.token,(X,ue)=>{var je=Kv(),Ze=s(je),U=s(Ze),W=r(Ze,2),se=r(W,2);{var Oe=Ce=>{var vt=Vv();x("click",vt,()=>e.onReset(t(ue).token)),d(Ce,vt)};L(se,Ce=>{t(ue).token in e.overrides&&Ce(Oe)})}C(()=>{y(U,t(ue).label),Jt(W,e.overrides[t(ue).token]??""),ee(W,"placeholder",t(ue).default)}),x("input",W,Ce=>{const He=Ce.target.value.trim();He?e.onSet(t(ue).token,He):e.onReset(t(ue).token)}),d(X,je)}),d(ae,fe)};L(_t,ae=>{t(H)&&ae(mt)})}C(()=>{ee(w,"aria-expanded",t(S)),y(j,t(S)?"▲":"▼"),ee(J,"aria-expanded",t(E)),y(Ae,t(E)?"▲":"▼"),ee(Q,"aria-expanded",t(P)),y(we,t(P)?"▲":"▼"),ee(Z,"aria-expanded",t(B)),y(Y,t(B)?"▲":"▼"),ee(ne,"aria-expanded",t(I)),y(qe,t(I)?"▲":"▼"),ee(ft,"aria-expanded",t(H)),y(Ot,t(H)?"▲":"▼")}),x("click",w,()=>{_(S,!t(S))}),x("click",J,()=>{_(E,!t(E))}),x("click",Q,()=>{_(P,!t(P))}),x("click",Z,()=>{_(B,!t(B))}),x("click",ne,()=>{_(I,!t(I))}),x("click",ft,()=>{_(H,!t(H))}),d(a,T),ta()}oa(["click","input"]);var Xv=g('
'),Jv=g('
',1),Qv=g(`

SLASHED is a token-first CSS framework. This sample paragraph repeats so you + controls, or edit the raw value for full control.

`,1),Kp=g('

--sf-color-scheme — sets the CSS color-scheme property on the root, controlling browser UI (scrollbars, inputs) and default background.

',1),Wp=g('
'),Yp=g('

Direct color overrides for tokens the framework auto-derives. Use for edge cases.

',1),Zp=g('
Semantic colors

Live preview — every semantic role on its on-color text, shown in light and dark. Resolved from the canvas, updates as you edit.

All tokens tab — override individual color steps (50–950), semantic aliases, or surface tokens directly.

');function Xp(a,e){ea(e,!0);function o(z,$){return Ha.value,vo(z)||$}function n(z,$){Ha.value;const N=du(z);return N&&N!=="none"?N:$}function l(z,$,N){return Ha.value,iu(z,$)||N}const i=[{name:"--sf-gradient-primary",label:"Primary",group:"brand",kind:"angle",space:"oklch",angle:135,dir:"right",stop1:"var(--sf-color-primary)",stop2:"oklch(from var(--sf-color-primary) calc(l - 0.08) c h)",formula:"linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))"},{name:"--sf-gradient-secondary",label:"Secondary",group:"brand",kind:"angle",space:"oklch",angle:135,dir:"right",stop1:"var(--sf-color-secondary)",stop2:"oklch(from var(--sf-color-secondary) calc(l - 0.08) c h)",formula:"linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))"},{name:"--sf-gradient-tertiary",label:"Tertiary",group:"brand",kind:"angle",space:"oklch",angle:135,dir:"right",stop1:"var(--sf-color-tertiary)",stop2:"oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h)",formula:"linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))"},{name:"--sf-gradient-brand",label:"Brand",group:"brand",kind:"angle",space:"oklch",angle:135,dir:"right",stop1:"var(--sf-color-primary)",stop2:"oklch(from var(--sf-color-primary) l c calc(h + 30))",formula:"linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))"},{name:"--sf-gradient-surface",label:"Surface",group:"brand",kind:"angle",space:"oklab",angle:180,dir:"bottom",stop1:"var(--sf-color-surface)",stop2:"var(--sf-color-bg)",formula:"linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))"},{name:"--sf-gradient-fade--r",label:"Fade →",group:"fade",kind:"dir",space:"oklch",angle:90,dir:"right",stop1:"transparent",stop2:"var(--sf-color-bg)",formula:"linear-gradient(in oklch to right, transparent, var(--sf-color-bg))"},{name:"--sf-gradient-fade--l",label:"Fade ←",group:"fade",kind:"dir",space:"oklch",angle:270,dir:"left",stop1:"transparent",stop2:"var(--sf-color-bg)",formula:"linear-gradient(in oklch to left, transparent, var(--sf-color-bg))"},{name:"--sf-gradient-fade--t",label:"Fade ↑",group:"fade",kind:"dir",space:"oklch",angle:0,dir:"top",stop1:"transparent",stop2:"var(--sf-color-bg)",formula:"linear-gradient(in oklch to top, transparent, var(--sf-color-bg))"},{name:"--sf-gradient-fade--b",label:"Fade ↓",group:"fade",kind:"dir",space:"oklch",angle:180,dir:"bottom",stop1:"transparent",stop2:"var(--sf-color-bg)",formula:"linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))"}],c=[{key:"primary",label:"Primary"},{key:"secondary",label:"Secondary"},{key:"tertiary",label:"Tertiary"},{key:"action",label:"Action"}],d=[{name:"--sf-color-primary-source-light",label:"Primary",side:"light",default:"oklch(0.47 0.27 264)",colorKey:"primary"},{name:"--sf-color-primary-source-dark",label:"Primary",side:"dark",default:"oklch(0.715 0.243 264)",colorKey:"primary"},{name:"--sf-color-secondary-source-light",label:"Secondary",side:"light",default:"oklch(0.22 0.04 264)",colorKey:"secondary"},{name:"--sf-color-secondary-source-dark",label:"Secondary",side:"dark",default:"oklch(0.84 0.036 264)",colorKey:"secondary"},{name:"--sf-color-tertiary-source-light",label:"Tertiary",side:"light",default:"oklch(0.42 0.22 295)",colorKey:"tertiary"},{name:"--sf-color-tertiary-source-dark",label:"Tertiary",side:"dark",default:"oklch(0.74 0.198 295)",colorKey:"tertiary"},{name:"--sf-color-action-source-light",label:"Action",side:"light",default:"oklch(0.50 0.22 235)",colorKey:"action"},{name:"--sf-color-action-source-dark",label:"Action",side:"dark",default:"oklch(0.70 0.198 235)",colorKey:"action"},{name:"--sf-color-neutral-source-light",label:"Neutral",side:"light",default:"oklch(0.52 0.025 260)",colorKey:"neutral"},{name:"--sf-color-neutral-source-dark",label:"Neutral",side:"dark",default:"oklch(0.69 0.0225 260)",colorKey:"neutral"},{name:"--sf-color-base-source-light",label:"Base",side:"light",default:"oklch(0.96 0.006 250)",colorKey:"base"},{name:"--sf-color-base-source-dark",label:"Base",side:"dark",default:"oklch(0.22 0.003 250)",colorKey:"base"}],p=[{name:"--sf-color-success-source-light",label:"Success",side:"light",default:"oklch(0.50 0.16 145)",colorKey:"success"},{name:"--sf-color-success-source-dark",label:"Success",side:"dark",default:"oklch(0.70 0.144 145)",colorKey:"success"},{name:"--sf-color-warning-source-light",label:"Warning",side:"light",default:"oklch(0.75 0.17 80)",colorKey:"warning"},{name:"--sf-color-warning-source-dark",label:"Warning",side:"dark",default:"oklch(0.65 0.153 80)",colorKey:"warning"},{name:"--sf-color-info-source-light",label:"Info",side:"light",default:"oklch(0.48 0.18 235)",colorKey:"info"},{name:"--sf-color-info-source-dark",label:"Info",side:"dark",default:"oklch(0.71 0.162 235)",colorKey:"info"},{name:"--sf-color-danger-source-light",label:"Danger",side:"light",default:"oklch(0.48 0.22 12)",colorKey:"danger"},{name:"--sf-color-danger-source-dark",label:"Danger",side:"dark",default:"oklch(0.73 0.198 12)",colorKey:"danger"}],m=[{name:"--sf-palette-mix-50",label:"50",step:"tint",default:4},{name:"--sf-palette-mix-100",label:"100",step:"tint",default:8},{name:"--sf-palette-mix-200",label:"200",step:"tint",default:20},{name:"--sf-palette-mix-300",label:"300",step:"tint",default:40},{name:"--sf-palette-mix-400",label:"400",step:"tint",default:65},{name:"--sf-palette-mix-600",label:"600",step:"shade",default:82},{name:"--sf-palette-mix-700",label:"700",step:"shade",default:62},{name:"--sf-palette-mix-800",label:"800",step:"shade",default:38},{name:"--sf-palette-mix-900",label:"900",step:"shade",default:18},{name:"--sf-palette-mix-950",label:"950",step:"shade",default:8}],h=[{label:"Softer",desc:"Low contrast palette",patch:{"--sf-palette-mix-50":"3%","--sf-palette-mix-100":"6%","--sf-palette-mix-200":"14%","--sf-palette-mix-300":"30%","--sf-palette-mix-400":"55%","--sf-palette-mix-600":"72%","--sf-palette-mix-700":"52%","--sf-palette-mix-800":"28%","--sf-palette-mix-900":"12%","--sf-palette-mix-950":"5%"}},{label:"Default",desc:"Balanced contrast",patch:Object.fromEntries(m.map(z=>[z.name,null]))},{label:"Punchy",desc:"High contrast palette",patch:{"--sf-palette-mix-50":"6%","--sf-palette-mix-100":"12%","--sf-palette-mix-200":"28%","--sf-palette-mix-300":"52%","--sf-palette-mix-400":"78%","--sf-palette-mix-600":"90%","--sf-palette-mix-700":"72%","--sf-palette-mix-800":"50%","--sf-palette-mix-900":"26%","--sf-palette-mix-950":"12%"}}],v=[{name:"--sf-color-link",label:"Link"},{name:"--sf-color-link--visited",label:"Link visited"},{name:"--sf-color-mark-bg",label:"Mark background"},{name:"--sf-color-mark-text",label:"Mark text"},{name:"--sf-color-code-bg",label:"Code background"},{name:"--sf-color-code-text",label:"Code text"},{name:"--sf-color-overlay",label:"Overlay"},{name:"--sf-color-black",label:"Black"},{name:"--sf-color-white",label:"White"},{name:"--sf-color-dim",label:"Dim (translucent black)"}],b=["50","100","200","300","400","500","600","700","800","900","950"],k=["primary","secondary","tertiary","action","neutral"],S={50:.97,100:.94,200:.88,300:.78,400:.65,500:.5,600:.37,700:.27,800:.17,900:.11,950:.06},E=[...k,"base"],I=[{label:"Base",expr:z=>`var(--sf-color-${z})`},{label:"Subtle",expr:z=>`var(--sf-color-${z}-subtle)`},{label:"Muted",expr:z=>`var(--sf-color-${z}-muted)`},{label:"Strong",expr:z=>`var(--sf-color-${z}-strong)`}],P=[...d,...p],B=[{heading:"Brand",items:[{name:"--sf-color-primary",label:"Primary",fg:"--sf-color-text--on-primary"},{name:"--sf-color-secondary",label:"Secondary",fg:"--sf-color-text--on-secondary"},{name:"--sf-color-tertiary",label:"Tertiary",fg:"--sf-color-text--on-tertiary"},{name:"--sf-color-action",label:"Action",fg:"--sf-color-text--on-action"},{name:"--sf-color-neutral",label:"Neutral",fg:"--sf-color-text--on-neutral"}]},{heading:"Status",items:[{name:"--sf-color-success",label:"Success",fg:"--sf-color-text--on-success"},{name:"--sf-color-warning",label:"Warning",fg:"--sf-color-text--on-warning"},{name:"--sf-color-info",label:"Info",fg:"--sf-color-text--on-info"},{name:"--sf-color-danger",label:"Danger",fg:"--sf-color-text--on-danger"}]},{heading:"Surfaces & text",items:[{name:"--sf-color-bg",label:"Bg",fg:"--sf-color-text"},{name:"--sf-color-surface",label:"Surface",fg:"--sf-color-text"},{name:"--sf-color-raised",label:"Raised",fg:"--sf-color-text"},{name:"--sf-color-inset",label:"Inset",fg:"--sf-color-text"},{name:"--sf-color-inverse",label:"Inverse",fg:"--sf-color-text--on-inverse"}]}],H=(Vo.colors??[]).filter(z=>z.name==="--sf-contrast-bias"||z.name==="--sf-contrast-threshold"),D=(Vo.colors??[]).filter(z=>z.name==="--sf-focus-ring-width");let R=K(!1),C=K(!1),A=K(!1),q=K(!1),O=K(!1),F=K(!1),M=K(!1),J=K(!1),be=K("light"),ze=va({}),Me=u(()=>parseFloat(e.overrides["--sf-lumlocker"]??"0.65"));function ye(z){const $=z.match(/^linear-gradient\(\s*in\s+(\S+)\s+(to\s+\w+|\d+deg)\s*,(.+)\)$/i);if(!$)return null;const N=$[1],V=$[2].trim(),te=V.startsWith("to "),Te=te?V.slice(3).trim():"right",ie=te?0:parseInt(V);let pe=0,he=0;const Se=[],Ue=$[3];for(let Ct=0;Ctte.name===N)?.default??"";return V?`oklch(from ${V} ${t(Me)} c h)`:""}let j=K(va(new Set(P.filter(z=>z.side==="light"&&!((P.find($=>$.colorKey===z.colorKey&&$.side==="dark")?.name??"")in e.overrides)).map(z=>z.colorKey)))),G=u(()=>{const z={};for(const $ of e.tokens)P.some(N=>N.name===$.name)&&(z[$.name]=$);return z});function Z(z){return z?e.overrides[z.name]??t(G)[z.name]?.value??z.default:""}function se(z){return P.find($=>$.name===z)}let Y=u(()=>h.find(z=>Object.entries(z.patch).every(([$,N])=>N===null?!($ in e.overrides):e.overrides[$]===N)));function de(z){const $=e.overrides[z.name];return $?parseFloat($):z.default}const ge=[];for(let z=0;zSe.label===$);if(!Te)return z;const ie=de(Te),he=`color-mix(in oklab, ${z} ${ie}%, ${te?N:V})`;return vo(he)||he}function vt(z,$){Ha.value;const N=S[$];if(N===void 0)return z;const V=`oklch(from ${z} ${N} c h)`;return vo(V)||V}function gt(z,$,N,V,te){return z==="base"?vt($,N):tt($,N,V,te)}function Ot(z,$,N){e.onSet(z.name,N)}function _t(z,$,N){const V=!!($&&$.name in e.overrides);if(t(j).has(z)&&!V){const Te=Z(P.find(ie=>ie.name===N));$&&e.onSet($.name,re(Te,z)),w(j,new Set([...t(j)].filter(ie=>ie!==z)),!0)}else $&&e.onBulkChange({[$.name]:null}),w(j,new Set([...t(j),z]),!0)}const fe=[{label:"Body text on surface",fg:"var(--sf-color-text)",bg:"var(--sf-color-surface)"},{label:"White on primary",fg:"#ffffff",bg:"var(--sf-color-primary)"},{label:"Primary on surface",fg:"var(--sf-color-primary)",bg:"var(--sf-color-surface)"}];function T(z,$){Ha.value;const N=Bs(z),V=Bs($);return!N||!V?null:Xs(Do(...N),Do(...V))}var Q=Zp(),le=s(Q),ke=r(s(le),4);ae(ke,21,()=>B,z=>z.heading,(z,$)=>{var N=bp(),V=s(N),te=s(V),Te=r(V,2);ae(Te,16,()=>["light","dark"],ie=>ie,(ie,pe)=>{var he=gp(),Se=s(he),Ue=s(Se),Ct=r(Se,2);ae(Ct,21,()=>t($).items,Bt=>Bt.name,(Bt,ut)=>{const $e=u(()=>l(`var(${t(ut).name})`,pe,"transparent")),Lt=u(()=>l(`var(${t(ut).fg})`,pe,"currentColor"));var yt=hp(),Fe=r(s(yt),2),We=s(Fe);_(()=>{ct(yt,`background:${t($e)}; color:${t(Lt)}`),ee(yt,"title",`${t(ut).name} (${pe}) — ${t($e)}`),y(We,t(ut).label)}),f(Bt,yt)}),_(()=>y(Ue,pe==="light"?"L":"D")),f(ie,he)}),_(()=>y(te,t($).heading)),f(z,N)});var Ce=r(le,4),Ve=s(Ce),Ke=r(s(Ve),2),U=s(Ke),W=r(Ve,2);{var oe=z=>{var $=Cp(),N=r(ce($),2);ae(N,21,()=>ge,([V,te])=>V.name,(V,te)=>{var Te=u(()=>Ta(t(te),2));let ie=()=>t(Te)[0],pe=()=>t(Te)[1];const he=u(()=>!!(pe()&&pe().name in e.overrides)),Se=u(()=>t(j).has(ie().colorKey)&&!t(he));var Ue=_p(),Ct=s(Ue),Bt=s(Ct),ut=s(Bt),$e=r(Bt,2);{var Lt=Ye=>{var Re=Yo(),Je=s(Re);_(()=>{Xe(Re,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${t(Se)?"border-indigo-500/40 bg-indigo-500/15 text-indigo-300":"border-white/10 text-slate-500 hover:text-slate-300"}`),y(Je,t(Se)?"Auto dark":"Manual dark")}),x("click",Re,()=>_t(ie().colorKey,pe(),ie().name)),f(Ye,Re)};L($e,Ye=>{pe()&&Ye(Lt)})}var yt=r(Ct,2);{let Ye=u(()=>`${ie().label} (light)`),Re=u(()=>Z(ie())),Je=u(()=>ie().name in e.overrides);qs(yt,{get label(){return t(Ye)},get tokenName(){return ie().name},get value(){return t(Re)},get overridden(){return t(Je)},onChange:pt=>Ot(ie(),pe(),pt),onReset:()=>e.onReset(ie().name)})}var Fe=r(yt,2);{var We=Ye=>{const Re=u(()=>Z(ie())),Je=u(()=>t(Se)?re(t(Re),ie().colorKey):pe()?Z(pe()):t(Re)),pt=u(Ie),Et=u(qe),ra=u(rt),Qt=u(et);var xe=wp(),je=ce(xe),Ut=s(je),Pt=r(s(Ut),2);ae(Pt,20,()=>b,sa=>sa,(sa,ga)=>{const Da=u(()=>gt(ie().colorKey,t(Re),ga,t(pt),t(ra)));var za=yp();let xo;var xr=s(za);ys(xr,()=>`${ie().colorKey}-${ga}`),_(()=>{ee(za,"title",`${ie().colorKey}-${ga} (light) — ${t(Da)}`),xo=ct(za,"",xo,{background:t(Da)})}),f(sa,za)});var Xt=r(Ut,2),ma=r(s(Xt),2);ae(ma,20,()=>b,sa=>sa,(sa,ga)=>{const Da=u(()=>gt(ie().colorKey,t(Je),ga,t(Et),t(Qt)));var za=xp();let xo;var xr=s(za);ys(xr,()=>`${ie().colorKey}-${ga}`),_(()=>{ee(za,"title",`${ie().colorKey}-${ga} (dark) — ${t(Da)}`),xo=ct(za,"",xo,{background:t(Da)})}),f(sa,za)});var la=r(je,2);{var ha=sa=>{var ga=kp();f(sa,ga)};L(la,sa=>{ie().colorKey==="base"&&sa(ha)})}f(Ye,xe)},St=u(()=>E.includes(ie().colorKey));L(Fe,Ye=>{t(St)&&Ye(We)})}var Ge=r(Fe,2);{var me=Ye=>{{let Re=u(()=>`${pe().label} (dark mode)`),Je=u(()=>Z(pe())),pt=u(()=>pe().name in e.overrides);qs(Ye,{get label(){return t(Re)},get tokenName(){return pe().name},get value(){return t(Je)},get overridden(){return t(pt)},onChange:Et=>e.onSet(pe().name,Et),onReset:()=>e.onReset(pe().name)})}},wt=Ye=>{const Re=u(()=>re(Z(ie()),ie().colorKey));var Je=$n(),pt=s(Je);let Et;var ra=r(pt);_(Qt=>{ee(pt,"title",t(Re)),Et=ct(pt,"",Et,Qt),y(ra,` Dark: auto-derived (${t(Re)??""})`)},[()=>({background:o(t(Re),t(Re))})]),f(Ye,Je)};L(Ge,Ye=>{pe()&&!t(Se)?Ye(me):pe()&&t(Se)&&Ye(wt,1)})}_(()=>y(ut,ie().label)),f(V,Ue)}),f(z,$)};L(W,z=>{t(R)&&z(oe)})}var Ee=r(Ce,4),Le=s(Ee),mt=r(s(Le),2),He=s(mt),dt=r(Le,2);{var nt=z=>{var $=Sp(),N=r(ce($),2);{let pe=u(()=>"--sf-lumlocker"in e.overrides);xt(N,{label:"LumLocker lightness (L)",get value(){return t(Me)},min:0,max:1,step:.01,help:"--sf-lumlocker — fixed OKLCH L applied to lockable brand colors under [data-lumlocker]",get overridden(){return t(pe)},onChange:he=>e.onSet("--sf-lumlocker",String(he)),onReset:()=>e.onReset("--sf-lumlocker")})}var V=r(N,2),te=r(s(V),2);ae(te,17,()=>c,pe=>pe.key,(pe,he)=>{var Se=zt(),Ue=ce(Se);ae(Ue,16,()=>["light","dark"],Ct=>Ct,(Ct,Bt)=>{const ut=u(()=>l(`var(--sf-color-${t(he).key}-source-${Bt})`,Bt,"")),$e=u(()=>Ae(t(he).key,Bt));var Lt=Op(),yt=s(Lt),Fe=s(yt),We=r(Fe),St=s(We),Ge=r(yt,2),me=r(Ge,4);_(wt=>{y(Fe,`${t(he).label??""} `),y(St,Bt==="light"?"L":"D"),ct(Ge,`background:${t(ut)||`var(--sf-color-${t(he).key})`}`),ct(me,wt),ee(me,"title",t($e))},[()=>`background:${o(t($e),t($e))}`]),f(Ct,Lt)}),f(pe,Se)});var Te=r(V,2),ie=s(Te);_(()=>{Xe(Te,1,`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${Jo.value?"bg-indigo-600/25 border-indigo-500/40 text-indigo-200":"border-white/10 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(ie,Jo.value?"✓ LumLocker active on canvas — click to disable":"Preview LumLocker on live canvas")}),x("click",Te,()=>{Jo.value=!Jo.value}),f(z,$)};L(dt,z=>{t(J)&&z(nt)})}var ht=r(Ee,4),Ne=s(ht),At=r(s(Ne),2),Ft=s(At),aa=r(Ne,2);{var Mt=z=>{var $=Up(),N=r(ce($),2);ae(N,21,()=>ve,([V,te])=>V.name,(V,te)=>{var Te=u(()=>Ta(t(te),2));let ie=()=>t(Te)[0],pe=()=>t(Te)[1];const he=u(()=>!!(pe()&&pe().name in e.overrides)),Se=u(()=>t(j).has(ie().colorKey)&&!t(he));var Ue=Bp(),Ct=s(Ue),Bt=s(Ct),ut=s(Bt),$e=r(Bt,2);{var Lt=Re=>{var Je=Yo(),pt=s(Je);_(()=>{Xe(Je,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${t(Se)?"border-indigo-500/40 bg-indigo-500/15 text-indigo-300":"border-white/10 text-slate-500 hover:text-slate-300"}`),y(pt,t(Se)?"Auto dark":"Manual dark")}),x("click",Je,()=>_t(ie().colorKey,pe(),ie().name)),f(Re,Je)};L($e,Re=>{pe()&&Re(Lt)})}var yt=r(Ct,2);{let Re=u(()=>`${ie().label} light`),Je=u(()=>Z(ie())),pt=u(()=>ie().name in e.overrides);qs(yt,{get label(){return t(Re)},get tokenName(){return ie().name},get value(){return t(Je)},get overridden(){return t(pt)},onChange:Et=>e.onSet(ie().name,Et),onReset:()=>e.onReset(ie().name)})}var Fe=r(yt,2);{var We=Re=>{{let Je=u(()=>`${pe().label} dark`),pt=u(()=>Z(pe())),Et=u(()=>pe().name in e.overrides);qs(Re,{get label(){return t(Je)},get tokenName(){return pe().name},get value(){return t(pt)},get overridden(){return t(Et)},onChange:ra=>e.onSet(pe().name,ra),onReset:()=>e.onReset(pe().name)})}},St=Re=>{const Je=u(()=>re(Z(ie()),ie().colorKey));var pt=$n(),Et=s(pt);let ra;var Qt=r(Et);_(xe=>{ee(Et,"title",t(Je)),ra=ct(Et,"",ra,xe),y(Qt,` Dark: auto-derived (${t(Je)??""})`)},[()=>({background:o(t(Je),t(Je))})]),f(Re,pt)};L(Fe,Re=>{pe()&&!t(Se)?Re(We):pe()&&t(Se)&&Re(St,1)})}var Ge=r(Fe,2),me=s(Ge),wt=r(s(me),2);ae(wt,21,()=>I,Re=>Re.label,(Re,Je)=>{var pt=Lp(),Et=s(pt);_(()=>y(Et,t(Je).label)),f(Re,pt)});var Ye=r(me,2);ae(Ye,16,()=>[["L","light"],["D","dark"]],([Re,Je])=>Re,(Re,Je)=>{var pt=u(()=>Ta(Je,2));let Et=()=>t(pt)[0],ra=()=>t(pt)[1];var Qt=Ip(),xe=s(Qt),je=s(xe),Ut=r(xe,2);ae(Ut,21,()=>I,Pt=>Pt.label,(Pt,Xt)=>{const ma=u(()=>l(t(Xt).expr(ie().colorKey),ra(),""));var la=Pp();let ha;var sa=s(la);{let ga=u(()=>`${ie().colorKey}-${t(Xt).label.toLowerCase()}`);ys(sa,()=>t(ga))}_(ga=>{ee(la,"title",ga),ha=ct(la,"",ha,{background:t(ma)})},[()=>`${ie().colorKey}-${t(Xt).label.toLowerCase()} (${ra()}) — ${t(ma)}`]),f(Pt,la)}),_(()=>y(je,Et())),f(Re,Qt)}),_(()=>y(ut,ie().label)),f(V,Ue)}),f(z,$)};L(aa,z=>{t(q)&&z(Mt)})}var Rt=r(ht,4),na=s(Rt),da=r(s(na),2),fa=s(da),we=r(na,2);{var kt=z=>{var $=Ep(),N=r(ce($),2);ae(N,17,()=>H,he=>he.name,(he,Se)=>{Ko(he,{get knob(){return t(Se)},get overrides(){return e.overrides},onChange:(Ue,Ct)=>Ct===null?e.onReset(Ue):e.onSet(Ue,Ct)})});var V=r(N,2),te=s(V);ae(te,17,()=>fe,he=>he.label,(he,Se)=>{const Ue=u(()=>T(t(Se).fg,t(Se).bg));var Ct=zt(),Bt=ce(Ct);{var ut=$e=>{var Lt=Ap(),yt=s(Lt),Fe=r(yt,2),We=s(Fe),St=r(Fe,2),Ge=s(St),me=r(St,2),wt=s(me);_((Ye,Re)=>{ct(yt,Ye),y(We,t(Se).label),y(Ge,`${Re??""}:1`),Xe(me,1,`text-[9px] font-bold px-1.5 py-0.5 rounded ${t(Ue)>=4.5?"bg-emerald-500/20 text-emerald-300":"bg-amber-500/20 text-amber-300"}`),y(wt,t(Ue)>=4.5?"AA":t(Ue)>=3?"AA-L":"✗")},[()=>`background:${o(t(Se).bg,t(Se).bg)}; color:${o(t(Se).fg,t(Se).fg)}`,()=>t(Ue).toFixed(2)]),f($e,Lt)};L(Bt,$e=>{t(Ue)!==null&&$e(ut)})}f(he,Ct)});var Te=r(te,2);{var ie=he=>{var Se=zp();x("click",Se,()=>e.onSelectDomain?.("wcag")),f(he,Se)};L(Te,he=>{e.onSelectDomain&&he(ie)})}var pe=r(V,2);ae(pe,17,()=>D,he=>he.name,(he,Se)=>{Ko(he,{get knob(){return t(Se)},get overrides(){return e.overrides},onChange:(Ue,Ct)=>Ct===null?e.onReset(Ue):e.onSet(Ue,Ct)})}),f(z,$)};L(we,z=>{t(C)&&z(kt)})}var Tt=r(Rt,4),Ze=s(Tt),It=r(s(Ze),2),ot=s(It),lt=r(Ze,2);{var qt=z=>{const $=u(()=>e.overrides["--sf-color-primary-source-light"]??d.find(Ye=>Ye.name==="--sf-color-primary-source-light")?.default??"oklch(0.47 0.27 264)"),N=u(()=>e.overrides["--sf-color-primary-source-dark"]),V=u(()=>t(N)??(!t(j).has("primary")||t(N)?d.find(Ye=>Ye.name==="--sf-color-primary-source-dark")?.default??re(t($),"primary"):re(t($),"primary"))),te=u(()=>t(be)==="light"?t($):t(V)),Te=u(()=>t(be)==="light"?Ie():qe()),ie=u(()=>t(be)==="light"?rt():et()),pe=u(()=>t(be)==="light"?Ie():qe()),he=u(()=>t(be)==="light"?rt():et());var Se=Np(),Ue=r(ce(Se),2);ae(Ue,21,()=>h,Ye=>Ye.label,(Ye,Re)=>{var Je=Rp(),pt=s(Je),Et=s(pt),ra=r(pt,2),Qt=s(ra);_(()=>{Xe(Je,1,`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${t(Y)?.label===t(Re).label?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Et,t(Re).label),y(Qt,t(Re).desc)}),x("click",Je,()=>e.onBulkChange(t(Re).patch)),f(Ye,Je)});var Ct=r(Ue,2),Bt=r(s(Ct),2);ae(Bt,21,()=>m.filter(Ye=>Ye.step==="tint"),Ye=>Ye.name,(Ye,Re)=>{{let Je=u(()=>de(t(Re))),pt=u(()=>t(Re).name in e.overrides);xt(Ye,{get label(){return t(Re).label},get value(){return t(Je)},min:0,max:100,step:1,unit:"%",get overridden(){return t(pt)},onChange:Et=>e.onSet(t(Re).name,`${Et}%`),onReset:()=>e.onReset(t(Re).name)})}});var ut=r(Ct,2),$e=r(s(ut),2);ae($e,21,()=>m.filter(Ye=>Ye.step==="shade"),Ye=>Ye.name,(Ye,Re)=>{{let Je=u(()=>de(t(Re))),pt=u(()=>t(Re).name in e.overrides);xt(Ye,{get label(){return t(Re).label},get value(){return t(Je)},min:0,max:100,step:1,unit:"%",get overridden(){return t(pt)},onChange:Et=>e.onSet(t(Re).name,`${Et}%`),onReset:()=>e.onReset(t(Re).name)})}});var Lt=r(ut,2),yt=s(Lt),Fe=r(s(yt),2);ae(Fe,20,()=>["light","dark"],Ye=>Ye,(Ye,Re)=>{var Je=Yo(),pt=s(Je);_(()=>{Xe(Je,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${t(be)===Re?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),y(pt,Re==="light"?"Light":"Dark")}),x("click",Je,()=>{w(be,Re,!0)}),f(Ye,Je)});var We=r(yt,2);ae(We,21,()=>m,Ye=>Ye.name,(Ye,Re)=>{const Je=u(()=>de(t(Re))),pt=u(()=>t(Re).label),Et=u(()=>tt(t(te),t(pt),t(Te),t(ie)));var ra=Tp(),Qt=s(ra),xe=s(Qt),je=r(Qt,2),Ut=s(je);ys(Ut,()=>`primary-${t(pt)}`);var Pt=r(je,2),Xt=s(Pt);_((ma,la,ha)=>{y(xe,ma),ct(je,la),ee(je,"title",ha),y(Xt,t(pt))},[()=>Math.round(t(Je)),()=>`background:${t(Et)}; height: ${Math.max(t(Je)/100*56,6)}px`,()=>`primary-${t(pt)} (${t(be)}) · mix ${Math.round(t(Je))}%`]),f(Ye,ra)});var St=r(Lt,2),Ge=s(St),me=r(s(Ge),2);ae(me,20,()=>["light","dark"],Ye=>Ye,(Ye,Re)=>{var Je=Yo(),pt=s(Je);_(()=>{Xe(Je,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${t(be)===Re?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),y(pt,Re==="light"?"Light":"Dark")}),x("click",Je,()=>{w(be,Re,!0)}),f(Ye,Je)});var wt=r(Ge,2);ae(wt,16,()=>k,Ye=>Ye,(Ye,Re)=>{const Je=u(()=>e.overrides[`--sf-color-${Re}-source-light`]??d.find(Pt=>Pt.name===`--sf-color-${Re}-source-light`)?.default??"oklch(0.5 0.15 264)"),pt=u(()=>`--sf-color-${Re}-source-dark`),Et=u(()=>e.overrides[t(pt)]??(t(j).has(Re)&&!e.overrides[t(pt)]?re(t(Je),Re):d.find(Pt=>Pt.name===t(pt))?.default??re(t(Je),Re))),ra=u(()=>t(be)==="light"?t(Je):t(Et));var Qt=Mp(),xe=s(Qt),je=s(xe),Ut=r(xe,2);ae(Ut,20,()=>b,Pt=>Pt,(Pt,Xt)=>{const ma=u(()=>tt(t(ra),Xt,t(pe),t(he)));var la=Dp(),ha=s(la);ys(ha,()=>`${Re}-${Xt}`),_(()=>{ct(la,`background:${t(ma)}`),ee(la,"title",`${Re}-${Xt} (${t(be)})`)}),f(Pt,la)}),_(()=>y(je,Re)),f(Ye,Qt)}),f(z,Se)};L(lt,z=>{t(A)&&z(qt)})}var jt=r(Tt,4),Dt=s(jt),Vt=r(s(Dt),2),Wt=s(Vt),ua=r(Dt,2);{var Ua=z=>{var $=Vp(),N=r(ce($),2);ae(N,16,()=>["brand","fade"],V=>V,(V,te)=>{var Te=qp(),ie=ce(Te),pe=s(ie),he=r(ie,2);ae(he,21,()=>i.filter(Se=>Se.group===te),Se=>Se.name,(Se,Ue)=>{const Ct=u(()=>`var(${t(Ue).name})`),Bt=u(()=>X(t(Ue)));var ut=Hp(),$e=s(ut),Lt=r($e,2),yt=s(Lt),Fe=s(yt),We=s(Fe),St=r(Fe,2);{var Ge=xe=>{var je=Fp();x("click",je,()=>{delete ze[t(Ue).name],e.onReset(t(Ue).name)}),f(xe,je)};L(St,xe=>{t(Ue).name in e.overrides&&xe(Ge)})}var me=r(yt,2);{var wt=xe=>{var je=jp(),Ut=r(s(je),2);ae(Ut,16,()=>["top","right","bottom","left"],Pt=>Pt,(Pt,Xt)=>{var ma=Yo(),la=s(ma);_(()=>{Xe(ma,1,`flex-1 py-0.5 rounded text-[9px] border transition-all cursor-pointer capitalize ${t(Bt).dir===Xt?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),y(la,Xt)}),x("click",ma,()=>_e(t(Ue),"dir",Xt)),f(Pt,ma)}),f(xe,je)},Ye=xe=>{var je=Gp(),Ut=r(s(je),2),Pt=r(Ut,2),Xt=s(Pt);_(()=>{Jt(Ut,t(Bt).angle),y(Xt,`${t(Bt).angle??""}°`)}),x("input",Ut,ma=>_e(t(Ue),"angle",parseInt(ma.target.value))),f(xe,je)};L(me,xe=>{t(Ue).kind==="dir"&&t(Ue).group!=="fade"?xe(wt):t(Ue).kind!=="dir"&&xe(Ye,1)})}var Re=r(me,2),Je=r(s(Re),2),pt=r(Je,2),Et=r(Re,2),ra=r(s(Et)),Qt=r(Et,2);_(xe=>{ct($e,xe),y(We,t(Ue).label),Jt(Je,t(Bt).stop1),Jt(pt,t(Bt).stop2),y(ra,` ${t(Ue).formula??""}`),Jt(Qt,e.overrides[t(Ue).name]??"")},[()=>`background:${n(t(Ct),t(Ct))}`]),x("change",Je,xe=>_e(t(Ue),"stop1",xe.target.value.trim())),x("change",pt,xe=>_e(t(Ue),"stop2",xe.target.value.trim())),x("change",Qt,xe=>{const je=xe.target.value.trim();delete ze[t(Ue).name],je?e.onSet(t(Ue).name,je):e.onReset(t(Ue).name)}),f(Se,ut)}),_(()=>y(pe,te==="brand"?"Brand & surface":"Edge fades")),f(V,Te)}),f(z,$)};L(ua,z=>{t(M)&&z(Ua)})}var Pa=r(jt,4),Aa=s(Pa),bt=r(s(Aa),2),Oe=s(bt),Qe=r(Aa,2);{var it=z=>{var $=Kp(),N=r(ce($),2);ae(N,20,()=>[["light dark","light dark (default)"],["light","Light only"],["dark","Dark only"]],([V,te])=>V,(V,te)=>{var Te=u(()=>Ta(te,2));let ie=()=>t(Te)[0],pe=()=>t(Te)[1];const he=u(()=>e.overrides["--sf-color-scheme"]??"light dark");var Se=Yo(),Ue=s(Se);_(()=>{Xe(Se,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(he)===ie()?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Ue,pe())}),x("click",Se,()=>ie()==="light dark"?e.onReset("--sf-color-scheme"):e.onSet("--sf-color-scheme",ie())),f(V,Se)}),f(z,$)};L(Qe,z=>{t(F)&&z(it)})}var Be=r(Pa,4),De=s(Be),ft=r(s(De),2),at=s(ft),Pe=r(De,2);{var st=z=>{var $=Yp(),N=r(ce($),2);ae(N,21,()=>v,V=>V.name,(V,te)=>{const Te=u(()=>o(`var(${t(te).name})`,""));var ie=Wp(),pe=s(ie),he=s(pe),Se=r(pe,2);{let Ue=u(()=>e.overrides[t(te).name]??""),Ct=u(()=>t(Te)?`auto-derived · ${t(Te)}`:"auto-derived"),Bt=u(()=>t(te).name in e.overrides);Qa(Se,{get token(){return t(te).name},get value(){return t(Ue)},get placeholder(){return t(Ct)},get isOverridden(){return t(Bt)},onSet:ut=>e.onSet(t(te).name,ut),onReset:()=>e.onReset(t(te).name)})}_(()=>y(he,t(te).label)),f(V,ie)}),f(z,$)};L(Pe,z=>{t(O)&&z(st)})}_(()=>{ee(Ve,"aria-expanded",t(R)),y(U,t(R)?"▲":"▼"),ee(Le,"aria-expanded",t(J)),y(He,t(J)?"▲":"▼"),ee(Ne,"aria-expanded",t(q)),y(Ft,t(q)?"▲":"▼"),ee(na,"aria-expanded",t(C)),y(fa,t(C)?"▲":"▼"),ee(Ze,"aria-expanded",t(A)),y(ot,t(A)?"▲":"▼"),ee(Dt,"aria-expanded",t(M)),y(Wt,t(M)?"▲":"▼"),ee(Aa,"aria-expanded",t(F)),y(Oe,t(F)?"▲":"▼"),ee(De,"aria-expanded",t(O)),y(at,t(O)?"▲":"▼")}),x("click",Ve,()=>{w(R,!t(R))}),x("click",Le,()=>{w(J,!t(J))}),x("click",Ne,()=>{w(q,!t(q))}),x("click",na,()=>{w(C,!t(C))}),x("click",Ze,()=>{w(A,!t(A))}),x("click",Dt,()=>{w(M,!t(M))}),x("click",Aa,()=>{w(F,!t(F))}),x("click",De,()=>{w(O,!t(O))}),f(a,Q),ta()}oa(["click","input","change"]);var Jp=g('
Aa Aa
'),Qp=g('
min
max
'),$p=g(''),em=g(''),tm=g('
'),am=g('
Modular scale ratio
'),om=g('
'),sm=g('
clamp( … )
');function Us(a,e){ea(e,!0);let o=Sa(e,"unit",3,"rem"),n=Sa(e,"minLabel",3,"Min"),l=Sa(e,"maxLabel",3,"Max"),i=Sa(e,"overridden",3,!1),c=Sa(e,"ratioMin_bound",3,1.05),d=Sa(e,"ratioMax_bound",3,1.8),p=Sa(e,"previewKind",3,"none");function m(re){return Math.min(e.max,Math.max(e.min,re))}let h=u(()=>(e.minValue-e.min)/(e.max-e.min)*100),v=u(()=>(e.maxValue-e.min)/(e.max-e.min)*100);function b(re){return Math.min(d(),Math.max(c(),re))}let k=u(()=>e.ratioPresets?.find(re=>e.ratioMin!==void 0&&Math.abs(re.value-e.ratioMin)<.0015)?.value),S=u(()=>e.ratioPresets?.find(re=>e.ratioMax!==void 0&&Math.abs(re.value-e.ratioMax)<.0015)?.value);var E=sm(),I=s(E),P=s(I),B=s(P),H=r(P,2),D=r(s(H)),R=s(D),C=r(D,2),A=s(C),q=r(I,2),O=r(s(q),2),F=r(O,2),M=r(F,2),J=r(M,2),be=r(J,2),ze=r(q,2),Me=s(ze),ye=s(Me),ue=s(ye),X=r(ye,2),ne=r(Me,2),_e=s(ne),Ae=s(_e),j=r(_e,2),G=r(ze,2);{var Z=re=>{var Ie=Jp(),qe=s(Ie),rt=r(s(qe)),et=s(rt),tt=r(qe,2),vt=r(s(tt)),gt=s(vt);_((Ot,_t,fe,T)=>{ct(qe,Ot),y(et,_t),ct(tt,fe),y(gt,T)},[()=>`font-size:${Math.min(e.minValue,2)}rem`,()=>n().toLowerCase(),()=>`font-size:${Math.min(e.maxValue,2.6)}rem`,()=>l().toLowerCase()]),f(re,Ie)},se=re=>{var Ie=Qp(),qe=s(Ie),rt=r(qe,4);_((et,tt)=>{ct(qe,et),ct(rt,tt)},[()=>`width:${Math.min(e.minValue*28,120)}px`,()=>`width:${Math.min(e.maxValue*28,200)}px`]),f(re,Ie)};L(G,re=>{p()==="type"?re(Z):p()==="space"&&re(se,1)})}var Y=r(G,2);{var de=re=>{var Ie=am(),qe=r(s(Ie),2);ae(qe,21,()=>[{side:n(),value:e.ratioMin,active:t(k),onChange:e.onRatioMinChange},{side:l(),value:e.ratioMax,active:t(S),onChange:e.onRatioMaxChange}],rt=>rt.side,(rt,et)=>{var tt=tm(),vt=s(tt),gt=s(vt),Ot=r(vt,2),_t=s(Ot);{var fe=ke=>{var Ce=$p();Ce.value=Ce.__value="",f(ke,Ce)};L(_t,ke=>{t(et).active===void 0&&ke(fe)})}var T=r(_t);ae(T,17,()=>e.ratioPresets,ke=>ke.value,(ke,Ce)=>{var Ve=em(),Ke=s(Ve),U={};_(W=>{y(Ke,t(Ce).label),U!==(U=W)&&(Ve.value=(Ve.__value=W)??"")},[()=>String(t(Ce).value)]),f(ke,Ve)});var Q;Na(Ot);var le=r(Ot,2);ee(le,"step",.001),_(ke=>{y(gt,t(et).side),ee(Ot,"aria-label",`${t(et).side} modular scale ratio preset`),Q!==(Q=ke)&&(Ot.value=(Ot.__value=ke)??"",Ia(Ot,ke)),ee(le,"aria-label",`${t(et).side} modular scale custom ratio`),ee(le,"min",c()),ee(le,"max",d()),Jt(le,t(et).value)},[()=>t(et).active!==void 0?String(t(et).active):""]),x("change",Ot,ke=>{const Ce=parseFloat(ke.target.value);Number.isFinite(Ce)&&t(et).onChange?.(b(Ce))}),x("change",le,ke=>{const Ce=parseFloat(ke.target.value);Number.isFinite(Ce)&&t(et).onChange?.(b(Ce))}),f(rt,tt)}),f(re,Ie)};L(Y,re=>{e.ratioPresets&&re(de)})}var ge=r(Y,2);{var ve=re=>{var Ie=om(),qe=s(Ie);x("click",qe,function(...rt){e.onReset?.apply(this,rt)}),f(re,Ie)};L(ge,re=>{i()&&e.onReset&&re(ve)})}_(re=>{Xe(E,1,`rounded-xl border p-3 ${i()?"bg-indigo-500/8 border-indigo-500/25":"bg-white/4 border-white/8"}`,"svelte-iy59wr"),y(B,e.title),y(R,`${e.minValue??""}${o()??""}`),y(A,`${e.maxValue??""}${o()??""}`),ct(O,re),ee(F,"min",e.min),ee(F,"max",e.max),ee(F,"step",e.step),Jt(F,e.minValue),ee(F,"aria-label",`${e.title} min`),ee(M,"min",e.min),ee(M,"max",e.max),ee(M,"step",e.step),Jt(M,e.maxValue),ee(M,"aria-label",`${e.title} max`),ct(J,`left: calc(${t(h)}% - 6px)`),ct(be,`left: calc(${t(v)}% - 6px)`),y(ue,n()),ee(X,"min",e.min),ee(X,"max",e.max),ee(X,"step",e.step),Jt(X,e.minValue),y(Ae,l()),ee(j,"min",e.min),ee(j,"max",e.max),ee(j,"step",e.step),Jt(j,e.maxValue)},[()=>`left:${Math.min(t(h),t(v))}%; right:${100-Math.max(t(h),t(v))}%`]),x("input",F,re=>e.onMinChange(Math.min(m(parseFloat(re.target.value)),e.maxValue))),x("input",M,re=>e.onMaxChange(Math.max(m(parseFloat(re.target.value)),e.minValue))),x("change",X,re=>e.onMinChange(m(parseFloat(re.target.value)||e.min))),x("change",j,re=>e.onMaxChange(m(parseFloat(re.target.value)||e.max))),f(a,E),ta()}oa(["input","change","click"]);var rm=g(''),xs=g(''),zr=g(''),nm=g('
'),lm=g('
Google Font
',1),im=g(''),cm=g(""),Er=g(''),zo=g(""),dm=g('
Tracking
'),fm=g('
Max width
'),um=g(''),pm=g('
The quick brown fox
Size
Line height
Weight
',1),el=g(''),tl=g('
'),mm=g(""),vm=g('
'),hm=g('
Emphasis style
External marker
',1),al=g(''),gm=g('
'),bm=g('

Named weight tokens. Override if your font uses non-standard axis values.

',1),ym=g('
'),xm=g('
',1),km=g('
'),wm=g('
'),_m=g(`

Utopia-style fluid scale. Each endpoint has three values — viewport width, + base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.

Line height scale
Letter-spacing scale

Overriding these propagates to heading sizes that reference them.

`,1),Cm=g('
Aa
'),Om=g('
'),Rr=g(''),Sm=g('
'),Lm=g('

Per-text-size max-width caps on .sf-text-* elements. Set to none to remove the constraint; use ch units for character-based measures.

',1),Pm=g('

Advanced OpenType and variable-font axes. Leave as normal unless your font supports these features.

Numeric figures
Optical sizing
Font features
Variation
',1),Im=g('
');function Bm(a,e){ea(e,!0);const o=[{label:"Minor Second — 1.067",value:1.067},{label:"Major Second — 1.125",value:1.125},{label:"Minor Third — 1.200",value:1.2},{label:"Major Third — 1.250",value:1.25},{label:"Perfect Fourth — 1.333",value:1.333},{label:"Aug. Fourth — 1.414",value:1.414},{label:"Golden — 1.618",value:1.618}],n=[{label:"System sans-serif",value:""},{label:"Geometric (Avenir, Montserrat…)",value:"var(--sf-font-geometric)"},{label:"Humanist (Seravek, Gill Sans…)",value:"var(--sf-font-humanist)"},{label:"Slab serif (Rockwell, Roboto Slab…)",value:"var(--sf-font-slab)"},{label:"Inter",value:"Inter, system-ui, sans-serif"},{label:"Georgia (serif)",value:"Georgia, 'Times New Roman', serif"},{label:"Merriweather (serif)",value:"'Merriweather', Georgia, serif"},{label:"JetBrains Mono",value:"'JetBrains Mono', 'Fira Code', monospace"}],l=[{label:"Same as body",value:""},{label:"Geometric (Avenir, Montserrat…)",value:"var(--sf-font-geometric)"},{label:"Humanist (Seravek, Gill Sans…)",value:"var(--sf-font-humanist)"},{label:"Slab serif (Rockwell, Roboto Slab…)",value:"var(--sf-font-slab)"},{label:"Inter",value:"Inter, system-ui, sans-serif"},{label:"Georgia (serif)",value:"Georgia, 'Times New Roman', serif"},{label:"Impact / condensed",value:"Impact, 'Arial Narrow', sans-serif"}],i=[{label:"System mono",value:"ui-monospace, monospace"},{label:"JetBrains Mono",value:"'JetBrains Mono', 'Fira Code', monospace"},{label:"Source Code Pro",value:"'Source Code Pro', 'Courier New', monospace"}],c=["Inter","Roboto","Open Sans","Lato","Montserrat","Poppins","Source Sans 3","Raleway","Nunito","Work Sans","Manrope","DM Sans","Outfit","Plus Jakarta Sans","Geist","Space Grotesk","Figtree","Merriweather","Playfair Display","Lora","Source Serif 4","Roboto Slab","IBM Plex Sans","IBM Plex Mono","JetBrains Mono","Fira Code","Space Mono"],d=[{label:"balance",value:"balance"},{label:"pretty",value:"pretty"},{label:"normal",value:"normal"}],p=["100","200","300","400","500","600","700","800","900"],m={"--sf-font-weight-body":"400","--sf-font-weight-heading":"600","--sf-font-weight-display":"700","--sf-font-weight-interactive":"600"},h=[{label:"2xs",factor:.64},{label:"xs",factor:.75},{label:"s",factor:.875},{label:"m",factor:1},{label:"l",factor:1.125},{label:"xl",factor:1.25},{label:"2xl",factor:1.5},{label:"3xl",factor:1.875},{label:"4xl",factor:2.25}],v=[{label:"Tight",token:"--sf-tracking-tight",default:-.025},{label:"Normal",token:"--sf-tracking-normal",default:0},{label:"Wide",token:"--sf-tracking-wide",default:.025},{label:"Wider",token:"--sf-tracking-wider",default:.05},{label:"Widest",token:"--sf-tracking-widest",default:.1}],b=[{label:"Tight",token:"--sf-leading-tight",default:1.1},{label:"Snug",token:"--sf-leading-snug",default:1.3},{label:"Normal",token:"--sf-leading-normal",default:1.5},{label:"Relaxed",token:"--sf-leading-relaxed",default:1.625}],k=[{label:"2xs",value:"var(--sf-text-2xs)",approx:.64},{label:"xs",value:"var(--sf-text-xs)",approx:.75},{label:"s",value:"var(--sf-text-s)",approx:.875},{label:"m",value:"var(--sf-text-m)",approx:1},{label:"l",value:"var(--sf-text-l)",approx:1.125},{label:"xl",value:"var(--sf-text-xl)",approx:1.25},{label:"2xl",value:"var(--sf-text-2xl)",approx:1.5},{label:"3xl",value:"var(--sf-text-3xl)",approx:1.875},{label:"4xl",value:"var(--sf-text-4xl)",approx:2.25},{label:"display-s",value:"var(--sf-text-display-s)",approx:2.6},{label:"display-m",value:"var(--sf-text-display-m)",approx:3.2},{label:"display-l",value:"var(--sf-text-display-l)",approx:3.8}],S=b.map(N=>({label:N.label,value:`var(${N.token})`,num:N.default})),E=v.map(N=>({label:N.label,value:`var(${N.token})`,em:N.default})),I=[{id:"body",label:"Body",size:"--sf-body-font-size",lh:"--sf-body-line-height",wt:"--sf-body-font-weight",ls:null,dSize:"var(--sf-text-m)",dLh:"var(--sf-leading-normal)",dWt:"400",dLs:""},{id:"h1",label:"H1",size:"--sf-h1-size",lh:"--sf-h1-line-height",wt:"--sf-h1-font-weight",ls:"--sf-h1-letter-spacing",dSize:"var(--sf-text-4xl)",dLh:"var(--sf-leading-tight)",dWt:"600",dLs:"var(--sf-tracking-tight)"},{id:"h2",label:"H2",size:"--sf-h2-size",lh:"--sf-h2-line-height",wt:"--sf-h2-font-weight",ls:"--sf-h2-letter-spacing",dSize:"var(--sf-text-3xl)",dLh:"var(--sf-leading-tight)",dWt:"600",dLs:"var(--sf-tracking-tight)"},{id:"h3",label:"H3",size:"--sf-h3-size",lh:"--sf-h3-line-height",wt:"--sf-h3-font-weight",ls:"--sf-h3-letter-spacing",dSize:"var(--sf-text-2xl)",dLh:"var(--sf-leading-snug)",dWt:"600",dLs:"var(--sf-tracking-normal)"},{id:"h4",label:"H4",size:"--sf-h4-size",lh:"--sf-h4-line-height",wt:"--sf-h4-font-weight",ls:"--sf-h4-letter-spacing",dSize:"var(--sf-text-xl)",dLh:"var(--sf-leading-snug)",dWt:"600",dLs:"var(--sf-tracking-normal)"},{id:"h5",label:"H5",size:"--sf-h5-size",lh:"--sf-h5-line-height",wt:"--sf-h5-font-weight",ls:"--sf-h5-letter-spacing",dSize:"var(--sf-text-l)",dLh:"var(--sf-leading-normal)",dWt:"600",dLs:"var(--sf-tracking-normal)"},{id:"h6",label:"H6",size:"--sf-h6-size",lh:"--sf-h6-line-height",wt:"--sf-h6-font-weight",ls:"--sf-h6-letter-spacing",dSize:"var(--sf-text-m)",dLh:"var(--sf-leading-normal)",dWt:"600",dLs:"var(--sf-tracking-wide)"}];let P=K("h1"),B=u(()=>I.find(N=>N.id===t(P)));const H=Vo.typography??[];function D(N,V){const te=parseFloat(e.overrides[N]??"");return isNaN(te)?V:te}let R=u(()=>D("--sf-text-ratio-min",1.25)),C=u(()=>D("--sf-text-ratio-max",1.333)),A=u(()=>D("--sf-text-base-min",1)),q=u(()=>D("--sf-text-base-max",1.25)),O=u(()=>D("--sf-text-display-base-min",2.4)),F=u(()=>D("--sf-text-display-base-max",3)),M=u(()=>D("--sf-leading-taper",0)),J=u(()=>D("--sf-text-scale",1)),be=u(()=>D("--sf-fluid-min-vw",22.5)),ze=u(()=>D("--sf-fluid-max-vw",90)),Me=K(!1),ye=K(!1),ue=K(!1),X=K(!1),ne=K(!1),_e=K(!1),Ae=K(!1),j=K(!1),G=K(!1),Z=K(!1),se=u(()=>e.overrides["--sf-font-body"]??""),Y=u(()=>e.overrides["--sf-font-heading"]??""),de=u(()=>e.overrides["--sf-font-mono"]??"ui-monospace, monospace"),ge=K(""),ve=K("body");function re(N){const V=e.overrides[N.token];return V?parseFloat(V.replace("em","")):N.default}function Ie(N){return D(N.token,N.default)}function qe(N){if(!N.trim())return;const V=`gf-${N.replace(/\s+/g,"-")}`;if(!document.getElementById(V)){const te=document.createElement("link");te.id=V,te.rel="stylesheet",te.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(N)}:wght@100;200;300;400;500;600;700;800;900&display=swap`,document.head.appendChild(te)}}function rt(N,V){if(!N.trim())return;qe(N);const te=V==="body"?"--sf-font-body":"--sf-font-heading";e.onSet(te,`'${N}', sans-serif`)}function et(N,V){return N?e.overrides[N]??V:V}function tt(N,V,te){N&&(V===te?e.onReset(N):e.onSet(N,V))}let vt=u(()=>{const N=et(t(B).size,t(B).dSize),V=k.find(Te=>Te.value===N),te=(t(A)+t(q))/2;return Math.min((V?.approx??1)*te*t(J),2.4)}),gt=u(()=>{const N=et(t(B).wt,t(B).dWt),V=parseInt(N);return isNaN(V)?600:V}),Ot=u(()=>{if(!t(B).ls)return 0;const N=et(t(B).ls,t(B).dLs),V=E.find(Te=>Te.value===N);if(V)return V.em;const te=parseFloat(N.replace("em",""));return isNaN(te)?0:te}),_t=u(()=>{const N=et(t(B).lh,t(B).dLh),V=S.find(Te=>Te.value===N);if(V)return V.num;const te=parseFloat(N);return isNaN(te)?1.3:te});var fe=Im(),T=s(fe),Q=s(T),le=r(s(Q),2),ke=s(le),Ce=r(Q,2);{var Ve=N=>{var V=lm(),te=ce(V);ae(te,17,()=>[{label:"Body",token:"--sf-font-body",current:t(se),opts:n},{label:"Heading",token:"--sf-font-heading",current:t(Y),opts:l},{label:"Mono",token:"--sf-font-mono",current:t(de),opts:i}],Fe=>Fe.token,(Fe,We)=>{var St=nm(),Ge=s(St),me=s(Ge),wt=r(Ge,2),Ye=s(wt);ae(Ye,17,()=>t(We).opts,xe=>xe.label,(xe,je)=>{var Ut=rm(),Pt=s(Ut),Xt={};_(()=>{y(Pt,t(je).label),Xt!==(Xt=t(je).value)&&(Ut.value=(Ut.__value=t(je).value)??"")}),f(xe,Ut)});var Re=r(Ye);{var Je=xe=>{var je=xs(),Ut=s(je),Pt={};_(Xt=>{y(Ut,`Custom: ${Xt??""}`),Pt!==(Pt=t(We).current)&&(je.value=(je.__value=t(We).current)??"")},[()=>t(We).current.split(",")[0].replace(/['"]/g,"")]),f(xe,je)},pt=u(()=>t(We).current&&!t(We).opts.some(xe=>xe.value===t(We).current));L(Re,xe=>{t(pt)&&xe(Je)})}var Et;Na(wt);var ra=r(wt,2);{var Qt=xe=>{var je=zr();x("click",je,()=>e.onReset(t(We).token)),f(xe,je)};L(ra,xe=>{t(We).token in e.overrides&&xe(Qt)})}_(()=>{y(me,t(We).label),ct(wt,`font-family: ${t(We).current||"inherit"}`),Et!==(Et=t(We).current)&&(wt.value=(wt.__value=t(We).current)??"",Ia(wt,t(We).current))}),x("change",wt,xe=>{const je=xe.target.value;je?e.onSet(t(We).token,je):e.onReset(t(We).token)}),f(Fe,St)});var Te=r(te,2),ie=r(s(Te),2),pe=s(ie),he=s(pe);he.value=he.__value="";var Se=r(he);ae(Se,16,()=>c,Fe=>Fe,(Fe,We)=>{var St=xs(),Ge=s(St),me={};_(()=>{y(Ge,We),me!==(me=We)&&(St.value=(St.__value=We)??"")}),f(Fe,St)});var Ue;Na(pe);var Ct=r(pe,2),Bt=s(Ct),ut=r(Bt,2),$e=r(ie,2),Lt=r($e,2),yt=s(Lt);_(()=>{Ue!==(Ue=t(ge))&&(pe.value=(pe.__value=t(ge))??"",Ia(pe,t(ge))),Xe(Bt,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${t(ve)==="body"?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400"}`),Xe(ut,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${t(ve)==="heading"?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400"}`),Jt($e,t(ge)),y(yt,`Load & apply to ${t(ve)??""}`)}),x("change",pe,Fe=>{w(ge,Fe.target.value,!0)}),x("click",Bt,()=>{w(ve,"body")}),x("click",ut,()=>{w(ve,"heading")}),x("input",$e,Fe=>{w(ge,Fe.target.value,!0)}),x("click",Lt,()=>rt(t(ge),t(ve))),f(N,V)};L(Ce,N=>{t(Me)&&N(Ve)})}var Ke=r(T,4),U=s(Ke),W=r(s(U),2),oe=s(W),Ee=r(U,2);{var Le=N=>{var V=pm(),te=ce(V);ae(te,21,()=>I,xe=>xe.id,(xe,je)=>{const Ut=u(()=>t(je).size in e.overrides||t(je).lh in e.overrides||t(je).wt in e.overrides||!!t(je).ls&&t(je).ls in e.overrides);var Pt=cm(),Xt=s(Pt),ma=r(Xt);{var la=ha=>{var sa=im();f(ha,sa)};L(ma,ha=>{t(Ut)&&ha(la)})}_(()=>{Xe(Pt,1,`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${t(P)===t(je).id?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),y(Xt,`${t(je).label??""} `)}),x("click",Pt,()=>{w(P,t(je).id,!0)}),f(xe,Pt)});var Te=r(te,2),ie=s(Te),pe=r(Te,2),he=r(s(pe),2),Se=s(he);ae(Se,17,()=>k,xe=>xe.value,(xe,je)=>{var Ut=xs(),Pt=s(Ut),Xt={};_(()=>{y(Pt,t(je).label),Xt!==(Xt=t(je).value)&&(Ut.value=(Ut.__value=t(je).value)??"")}),f(xe,Ut)});var Ue=r(Se);{var Ct=xe=>{var je=Er(),Ut={};_(Pt=>{Ut!==(Ut=Pt)&&(je.value=(je.__value=Pt)??"")},[()=>et(t(B).size,t(B).dSize)]),f(xe,je)},Bt=u(()=>!k.some(xe=>xe.value===et(t(B).size,t(B).dSize)));L(Ue,xe=>{t(Bt)&&xe(Ct)})}var ut;Na(he);var $e=r(pe,2),Lt=r(s($e),2),yt=s(Lt);ae(yt,17,()=>S,xe=>xe.value,(xe,je)=>{var Ut=xs(),Pt=s(Ut),Xt={};_(()=>{y(Pt,`${t(je).label??""} · ${t(je).num??""}`),Xt!==(Xt=t(je).value)&&(Ut.value=(Ut.__value=t(je).value)??"")}),f(xe,Ut)});var Fe=r(yt);{var We=xe=>{var je=Er(),Ut={};_(Pt=>{Ut!==(Ut=Pt)&&(je.value=(je.__value=Pt)??"")},[()=>et(t(B).lh,t(B).dLh)]),f(xe,je)},St=u(()=>!S.some(xe=>xe.value===et(t(B).lh,t(B).dLh)));L(Fe,xe=>{t(St)&&xe(We)})}var Ge;Na(Lt);var me=r($e,2),wt=r(s(me),2);ae(wt,20,()=>p,xe=>xe,(xe,je)=>{const Ut=u(()=>et(t(B).wt,t(B).dWt));var Pt=zo(),Xt=s(Pt);_(ma=>{ct(Pt,ma),Xe(Pt,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(Ut)===je?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Xt,je)},[()=>`font-weight:${parseInt(je)}`]),x("click",Pt,()=>tt(t(B).wt,je,t(B).dWt)),f(xe,Pt)});var Ye=r(me,2);{var Re=xe=>{var je=dm(),Ut=r(s(je),2),Pt=s(Ut);ae(Pt,17,()=>E,sa=>sa.value,(sa,ga)=>{var Da=xs(),za=s(Da),xo={};_(()=>{y(za,t(ga).label),xo!==(xo=t(ga).value)&&(Da.value=(Da.__value=t(ga).value)??"")}),f(sa,Da)});var Xt=r(Pt);{var ma=sa=>{var ga=Er(),Da={};_(za=>{Da!==(Da=za)&&(ga.value=(ga.__value=za)??"")},[()=>et(t(B).ls,t(B).dLs)]),f(sa,ga)},la=u(()=>!E.some(sa=>sa.value===et(t(B).ls,t(B).dLs)));L(Xt,sa=>{t(la)&&sa(ma)})}var ha;Na(Ut),_(sa=>{ha!==(ha=sa)&&(Ut.value=(Ut.__value=sa)??"",Ia(Ut,sa))},[()=>et(t(B).ls,t(B).dLs)]),x("change",Ut,sa=>tt(t(B).ls,sa.target.value,t(B).dLs)),f(xe,je)};L(Ye,xe=>{t(B).ls&&xe(Re)})}var Je=r(Ye,2);{var pt=xe=>{const je=u(()=>`--sf-${t(B).id}-max-width`);var Ut=fm(),Pt=r(s(Ut),2),Xt=r(Pt,2);{var ma=la=>{var ha=zr();x("click",ha,()=>e.onReset(t(je))),f(la,ha)};L(Xt,la=>{t(je)in e.overrides&&la(ma)})}_(()=>Jt(Pt,e.overrides[t(je)]??"")),x("input",Pt,la=>{const ha=la.target.value.trim();ha?e.onSet(t(je),ha):e.onReset(t(je))}),f(xe,Ut)};L(Je,xe=>{t(B).id!=="body"&&xe(pt)})}var Et=r(Je,2),ra=s(Et);{var Qt=xe=>{var je=um(),Ut=s(je);_(()=>y(Ut,`reset ${t(B).label??""}`)),x("click",je,()=>{const Pt={[t(B).size]:null,[t(B).lh]:null,[t(B).wt]:null};t(B).ls&&(Pt[t(B).ls]=null),e.onBulkChange(Pt)}),f(xe,je)};L(ra,xe=>{(t(B).size in e.overrides||t(B).lh in e.overrides||t(B).wt in e.overrides||t(B).ls&&t(B).ls in e.overrides)&&xe(Qt)})}_((xe,je)=>{ct(ie,`font-size:${t(vt)}rem; font-weight:${t(gt)}; letter-spacing:${t(Ot)}em; line-height:${t(_t)}; font-family:${t(B).id==="body"?t(se)||"inherit":t(Y)||t(se)||"inherit"}`),ut!==(ut=xe)&&(he.value=(he.__value=xe)??"",Ia(he,xe)),Ge!==(Ge=je)&&(Lt.value=(Lt.__value=je)??"",Ia(Lt,je))},[()=>et(t(B).size,t(B).dSize),()=>et(t(B).lh,t(B).dLh)]),x("change",he,xe=>tt(t(B).size,xe.target.value,t(B).dSize)),x("change",Lt,xe=>tt(t(B).lh,xe.target.value,t(B).dLh)),f(N,V)};L(Ee,N=>{t(ye)&&N(Le)})}var mt=r(Ke,4),He=s(mt),dt=r(s(He),2),nt=s(dt),ht=r(He,2);{var Ne=N=>{var V=hm(),te=ce(V);ae(te,16,()=>[{label:"Body strong",tokenName:"--sf-font-weight-strong"},{label:"Interactive",tokenName:"--sf-font-weight-interactive"}],ut=>ut.tokenName,(ut,$e)=>{const Lt=u(()=>m[$e.tokenName]??"600"),yt=u(()=>e.overrides[$e.tokenName]??t(Lt)),Fe=u(()=>$e.tokenName in e.overrides);var We=tl(),St=s(We),Ge=s(St),me=s(Ge),wt=r(Ge,2);{var Ye=Je=>{var pt=el();x("click",pt,()=>e.onReset($e.tokenName)),f(Je,pt)};L(wt,Je=>{t(Fe)&&Je(Ye)})}var Re=r(St,2);ae(Re,20,()=>p,Je=>Je,(Je,pt)=>{var Et=zo(),ra=s(Et);_(Qt=>{ct(Et,Qt),Xe(Et,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(yt)===pt?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(ra,pt)},[()=>`font-weight: ${parseInt(pt)}`]),x("click",Et,()=>pt===t(Lt)&&!t(Fe)?void 0:pt===t(Lt)?e.onReset($e.tokenName):e.onSet($e.tokenName,pt)),f(Je,Et)}),_(()=>y(me,`${$e.label??""} weight`)),f(ut,We)});var Te=r(te,2),ie=r(s(Te),2);ae(ie,20,()=>[["Italic","italic"],["Normal","normal"]],([ut,$e])=>$e,(ut,$e)=>{var Lt=u(()=>Ta($e,2));let yt=()=>t(Lt)[0],Fe=()=>t(Lt)[1];const We=u(()=>e.overrides["--sf-body-em-style"]??"italic");var St=mm(),Ge=s(St),me=s(Ge);_(()=>{Xe(St,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(We)===Fe()?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),ct(Ge,`font-style: ${Fe()}`),y(me,yt())}),x("click",St,()=>Fe()==="italic"?e.onReset("--sf-body-em-style"):e.onSet("--sf-body-em-style",Fe())),f(ut,St)});var pe=r(Te,2);{let ut=u(()=>D("--sf-code-font-size",.875)),$e=u(()=>"--sf-code-font-size"in e.overrides);xt(pe,{label:"Code font size",get value(){return t(ut)},min:.7,max:1.1,step:.005,unit:"em",help:"--sf-code-font-size — size of inline code relative to surrounding text",get overridden(){return t($e)},onChange:Lt=>e.onSet("--sf-code-font-size",`${Lt}em`),onReset:()=>e.onReset("--sf-code-font-size")})}var he=r(pe,2);ae(he,16,()=>[{label:"Heading wrap",token:"--sf-heading-text-wrap",defaultVal:"balance"},{label:"Body wrap",token:"--sf-body-text-wrap",defaultVal:"pretty"}],ut=>ut.token,(ut,$e)=>{const Lt=u(()=>e.overrides[$e.token]??$e.defaultVal);var yt=vm(),Fe=s(yt),We=s(Fe),St=r(Fe,2);ae(St,21,()=>d,Ge=>Ge.value,(Ge,me)=>{var wt=zo(),Ye=s(wt);_(()=>{Xe(wt,1,`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(Lt)===t(me).value?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Ye,t(me).label)}),x("click",wt,()=>t(me).value===$e.defaultVal&&!($e.token in e.overrides)?void 0:t(me).value===$e.defaultVal?e.onReset($e.token):e.onSet($e.token,t(me).value)),f(Ge,wt)}),_(()=>y(We,$e.label)),f(ut,yt)});var Se=r(he,2),Ue=r(s(Se),2);ee(Ue,"placeholder",'" ↗"');var Ct=r(Ue,2);{var Bt=ut=>{var $e=zr();x("click",$e,()=>e.onReset("--sf-link-external-marker")),f(ut,$e)};L(Ct,ut=>{"--sf-link-external-marker"in e.overrides&&ut(Bt)})}_(()=>Jt(Ue,e.overrides["--sf-link-external-marker"]??"")),x("input",Ue,ut=>{const $e=ut.target.value;$e?e.onSet("--sf-link-external-marker",$e):e.onReset("--sf-link-external-marker")}),f(N,V)};L(ht,N=>{t(ue)&&N(Ne)})}var At=r(mt,4),Ft=s(At),aa=r(s(Ft),2),Mt=s(aa),Rt=r(Ft,2);{var na=N=>{var V=bm(),te=r(ce(V),2);ae(te,16,()=>[{label:"Light",token:"--sf-font-weight-light",def:300},{label:"Normal",token:"--sf-font-weight-normal",def:400},{label:"Medium",token:"--sf-font-weight-medium",def:500},{label:"Semibold",token:"--sf-font-weight-semibold",def:600},{label:"Bold",token:"--sf-font-weight-bold",def:700}],Te=>Te.token,(Te,ie)=>{var pe=gm(),he=s(pe),Se=s(he),Ue=s(Se),Ct=r(Se,2);{var Bt=$e=>{var Lt=al();x("click",Lt,()=>e.onReset(ie.token)),f($e,Lt)};L(Ct,$e=>{ie.token in e.overrides&&$e(Bt)})}var ut=r(he,2);ae(ut,20,()=>p,$e=>$e,($e,Lt)=>{const yt=u(()=>e.overrides[ie.token]??String(ie.def));var Fe=zo(),We=s(Fe);_(St=>{ct(Fe,St),Xe(Fe,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(yt)===Lt?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(We,Lt)},[()=>`font-weight:${parseInt(Lt)}`]),x("click",Fe,()=>Lt===String(ie.def)&&!(ie.token in e.overrides)?void 0:Lt===String(ie.def)?e.onReset(ie.token):e.onSet(ie.token,Lt)),f($e,Fe)}),_(()=>y(Ue,ie.label)),f(Te,pe)}),f(N,V)};L(Rt,N=>{t(Z)&&N(na)})}var da=r(At,4),fa=s(da),we=r(s(fa),2),kt=s(we),Tt=r(fa,2);{var Ze=N=>{var V=xm(),te=ce(V);{let pe=u(()=>"--sf-text-display-base-min"in e.overrides||"--sf-text-display-base-max"in e.overrides);Us(te,{title:"Display base size",get minValue(){return t(O)},get maxValue(){return t(F)},min:1.5,max:6,step:.05,unit:"rem",previewKind:"type",get overridden(){return t(pe)},onReset:()=>{e.onReset("--sf-text-display-base-min"),e.onReset("--sf-text-display-base-max")},onMinChange:he=>e.onSet("--sf-text-display-base-min",String(he)),onMaxChange:he=>e.onSet("--sf-text-display-base-max",String(he))})}var Te=r(te,2);ae(Te,20,()=>[{label:"Display L line-height",token:"--sf-display-l-line-height",def:1},{label:"Display M line-height",token:"--sf-display-m-line-height",def:1.05}],pe=>pe.token,(pe,he)=>{var Se=ym(),Ue=s(Se),Ct=s(Ue),Bt=r(Ue,2);{let ut=u(()=>D(he.token,he.def)),$e=u(()=>he.token in e.overrides);xt(Bt,{label:"",get value(){return t(ut)},min:.8,max:1.5,step:.025,get overridden(){return t($e)},onChange:Lt=>e.onSet(he.token,String(Lt)),onReset:()=>e.onReset(he.token)})}_(()=>y(Ct,he.label)),f(pe,Se)});var ie=r(Te,2);ae(ie,16,()=>[{label:"Display",tokenName:"--sf-font-weight-display"},{label:"Heading",tokenName:"--sf-font-weight-heading"}],pe=>pe.tokenName,(pe,he)=>{const Se=u(()=>m[he.tokenName]??"700"),Ue=u(()=>e.overrides[he.tokenName]??t(Se)),Ct=u(()=>he.tokenName in e.overrides);var Bt=tl(),ut=s(Bt),$e=s(ut),Lt=s($e),yt=r($e,2);{var Fe=St=>{var Ge=el();x("click",Ge,()=>e.onReset(he.tokenName)),f(St,Ge)};L(yt,St=>{t(Ct)&&St(Fe)})}var We=r(ut,2);ae(We,20,()=>p,St=>St,(St,Ge)=>{var me=zo(),wt=s(me);_(Ye=>{ct(me,Ye),Xe(me,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(Ue)===Ge?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(wt,Ge)},[()=>`font-weight: ${parseInt(Ge)}`]),x("click",me,()=>Ge===t(Se)&&!t(Ct)?void 0:Ge===t(Se)?e.onReset(he.tokenName):e.onSet(he.tokenName,Ge)),f(St,me)}),_(()=>y(Lt,`${he.label??""} weight`)),f(pe,Bt)}),f(N,V)};L(Tt,N=>{t(X)&&N(Ze)})}var It=r(da,4),ot=s(It),lt=r(s(ot),2),qt=s(lt),jt=r(ot,2);{var Dt=N=>{var V=_m(),te=r(ce(V),2);{let Fe=u(()=>"--sf-fluid-min-vw"in e.overrides||"--sf-fluid-max-vw"in e.overrides);Us(te,{title:"Viewport range",get minValue(){return t(be)},get maxValue(){return t(ze)},min:15,max:120,step:.5,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",get overridden(){return t(Fe)},onReset:()=>{e.onReset("--sf-fluid-min-vw"),e.onReset("--sf-fluid-max-vw")},onMinChange:We=>e.onSet("--sf-fluid-min-vw",String(We)),onMaxChange:We=>e.onSet("--sf-fluid-max-vw",String(We))})}var Te=r(te,2);{let Fe=u(()=>"--sf-text-base-min"in e.overrides||"--sf-text-base-max"in e.overrides);Us(Te,{title:"Base size & ratio",get minValue(){return t(A)},get maxValue(){return t(q)},min:.7,max:2,step:.01,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",previewKind:"type",get overridden(){return t(Fe)},onReset:()=>{e.onReset("--sf-text-base-min"),e.onReset("--sf-text-base-max")},onMinChange:We=>e.onSet("--sf-text-base-min",String(We)),onMaxChange:We=>e.onSet("--sf-text-base-max",String(We)),get ratioPresets(){return o},get ratioMin(){return t(R)},get ratioMax(){return t(C)},ratioMin_bound:1.05,ratioMax_bound:1.8,onRatioMinChange:We=>e.onSet("--sf-text-ratio-min",String(We)),onRatioMaxChange:We=>e.onSet("--sf-text-ratio-max",String(We))})}var ie=r(Te,2),pe=r(s(ie),2);ae(pe,21,()=>b,Fe=>Fe.token,(Fe,We)=>{{let St=u(()=>Ie(t(We))),Ge=u(()=>`${t(We).token} — ${t(We).label.toLowerCase()} line height`),me=u(()=>t(We).token in e.overrides);xt(Fe,{get label(){return t(We).label},get value(){return t(St)},min:1,max:2.2,step:.05,get help(){return t(Ge)},get overridden(){return t(me)},onChange:wt=>e.onSet(t(We).token,String(wt)),onReset:()=>e.onReset(t(We).token)})}});var he=r(ie,2);{let Fe=u(()=>"--sf-leading-taper"in e.overrides);xt(he,{label:"Leading taper",get value(){return t(M)},min:0,max:.5,step:.01,help:"How aggressively large display sizes shrink their line-height.",get overridden(){return t(Fe)},onChange:We=>e.onSet("--sf-leading-taper",String(We)),onReset:()=>e.onReset("--sf-leading-taper")})}var Se=r(he,2),Ue=r(s(Se),4);ae(Ue,21,()=>v,Fe=>Fe.token,(Fe,We)=>{var St=km(),Ge=s(St),me=s(Ge),wt=s(me),Ye=r(me,2);{var Re=pt=>{var Et=al();x("click",Et,()=>e.onReset(t(We).token)),f(pt,Et)};L(Ye,pt=>{t(We).token in e.overrides&&pt(Re)})}var Je=r(Ge,2);{let pt=u(()=>re(t(We)));$o(Je,{get value(){return t(pt)},min:-.1,max:.2,step:.005,unit:"em",onChange:Et=>e.onSet(t(We).token,`${Et}em`)})}_(()=>y(wt,t(We).label)),f(Fe,St)});var Ct=r(Se,2),Bt=s(Ct),ut=r(s(Bt),2),$e=s(ut),Lt=r(Bt,2);{var yt=Fe=>{var We=wm();ae(We,21,()=>H,St=>St.name,(St,Ge)=>{Ko(St,{get knob(){return t(Ge)},get overrides(){return e.overrides},onChange:(me,wt)=>wt===null?e.onReset(me):e.onSet(me,wt)})}),f(Fe,We)};L(Lt,Fe=>{t(_e)&&Fe(yt)})}_(()=>{ee(Bt,"aria-expanded",t(_e)),y($e,t(_e)?"▲":"▼")}),x("click",Bt,()=>{w(_e,!t(_e))}),f(N,V)};L(jt,N=>{t(ne)&&N(Dt)})}var Vt=r(It,4),Wt=s(Vt),ua=r(s(Wt),2),Ua=s(ua),Pa=r(Wt,2);{var Aa=N=>{var V=Om();ae(V,21,()=>[...h].reverse(),({label:te,factor:Te})=>te,(te,Te)=>{let ie=()=>t(Te).label,pe=()=>t(Te).factor;const he=u(()=>(t(A)+t(q))/2),Se=u(()=>t(he)*pe()*t(J));var Ue=Cm(),Ct=s(Ue),Bt=s(Ct),ut=r(Ct,2),$e=r(ut,2),Lt=s($e);_((yt,Fe)=>{y(Bt,ie()),ct(ut,yt),y(Lt,`${Fe??""}rem`)},[()=>`font-size: ${Math.min(t(Se),2.5)}rem; font-family: ${t(se)||"inherit"}`,()=>t(Se).toFixed(2)]),f(te,Ue)}),f(N,V)};L(Pa,N=>{t(Ae)&&N(Aa)})}var bt=r(Vt,4),Oe=s(bt),Qe=r(s(Oe),2),it=s(Qe),Be=r(Oe,2);{var De=N=>{var V=Lm(),te=r(ce(V),2);ae(te,20,()=>[{label:"2xs",token:"--sf-text-2xs-max-width",def:"55ch"},{label:"xs",token:"--sf-text-xs-max-width",def:"60ch"},{label:"s",token:"--sf-text-s-max-width",def:"65ch"},{label:"m",token:"--sf-text-m-max-width",def:"65ch"},{label:"l",token:"--sf-text-l-max-width",def:"none"},{label:"xl",token:"--sf-text-xl-max-width",def:"none"},{label:"2xl",token:"--sf-text-2xl-max-width",def:"none"},{label:"3xl",token:"--sf-text-3xl-max-width",def:"none"},{label:"4xl",token:"--sf-text-4xl-max-width",def:"none"}],Te=>Te.token,(Te,ie)=>{var pe=Sm(),he=s(pe),Se=s(he),Ue=r(he,2),Ct=r(Ue,2);{var Bt=ut=>{var $e=Rr();x("click",$e,()=>e.onReset(ie.token)),f(ut,$e)};L(Ct,ut=>{ie.token in e.overrides&&ut(Bt)})}_(()=>{y(Se,ie.label),Jt(Ue,e.overrides[ie.token]??""),ee(Ue,"placeholder",ie.def)}),x("input",Ue,ut=>{const $e=ut.target.value.trim();$e?e.onSet(ie.token,$e):e.onReset(ie.token)}),f(Te,pe)}),f(N,V)};L(Be,N=>{t(G)&&N(De)})}var ft=r(bt,4),at=s(ft),Pe=r(s(at),2),st=s(Pe),z=r(at,2);{var $=N=>{var V=Pm(),te=r(ce(V),2),Te=r(s(te),2);ae(Te,20,()=>[["tabular-nums","tabular-nums (default)"],["proportional-nums","proportional-nums"],["normal","normal"]],([yt,Fe])=>yt,(yt,Fe)=>{var We=u(()=>Ta(Fe,2));let St=()=>t(We)[0],Ge=()=>t(We)[1];const me=u(()=>e.overrides["--sf-font-numeric"]??"tabular-nums");var wt=zo(),Ye=s(wt);_(()=>{Xe(wt,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(me)===St()?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Ye,Ge())}),x("click",wt,()=>St()==="tabular-nums"?e.onReset("--sf-font-numeric"):e.onSet("--sf-font-numeric",St())),f(yt,wt)});var ie=r(te,2),pe=r(s(ie),2);ae(pe,20,()=>[["auto","auto (default)"],["none","none"]],([yt,Fe])=>yt,(yt,Fe)=>{var We=u(()=>Ta(Fe,2));let St=()=>t(We)[0],Ge=()=>t(We)[1];const me=u(()=>e.overrides["--sf-optical-sizing"]??"auto");var wt=zo(),Ye=s(wt);_(()=>{Xe(wt,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(me)===St()?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Ye,Ge())}),x("click",wt,()=>St()==="auto"?e.onReset("--sf-optical-sizing"):e.onSet("--sf-optical-sizing",St())),f(yt,wt)});var he=r(ie,2),Se=r(s(he),2),Ue=r(Se,2);{var Ct=yt=>{var Fe=Rr();x("click",Fe,()=>e.onReset("--sf-font-features")),f(yt,Fe)};L(Ue,yt=>{"--sf-font-features"in e.overrides&&yt(Ct)})}var Bt=r(he,2),ut=r(s(Bt),2),$e=r(ut,2);{var Lt=yt=>{var Fe=Rr();x("click",Fe,()=>e.onReset("--sf-font-variation")),f(yt,Fe)};L($e,yt=>{"--sf-font-variation"in e.overrides&&yt(Lt)})}_(()=>{Jt(Se,e.overrides["--sf-font-features"]??""),Jt(ut,e.overrides["--sf-font-variation"]??"")}),x("input",Se,yt=>{const Fe=yt.target.value.trim();Fe?e.onSet("--sf-font-features",Fe):e.onReset("--sf-font-features")}),x("input",ut,yt=>{const Fe=yt.target.value.trim();Fe?e.onSet("--sf-font-variation",Fe):e.onReset("--sf-font-variation")}),f(N,V)};L(z,N=>{t(j)&&N($)})}_(()=>{ee(Q,"aria-expanded",t(Me)),y(ke,t(Me)?"▲":"▼"),ee(U,"aria-expanded",t(ye)),y(oe,t(ye)?"▲":"▼"),ee(He,"aria-expanded",t(ue)),y(nt,t(ue)?"▲":"▼"),ee(Ft,"aria-expanded",t(Z)),y(Mt,t(Z)?"▲":"▼"),ee(fa,"aria-expanded",t(X)),y(kt,t(X)?"▲":"▼"),ee(ot,"aria-expanded",t(ne)),y(qt,t(ne)?"▲":"▼"),ee(Wt,"aria-expanded",t(Ae)),y(Ua,t(Ae)?"▲":"▼"),ee(Oe,"aria-expanded",t(G)),y(it,t(G)?"▲":"▼"),ee(at,"aria-expanded",t(j)),y(st,t(j)?"▲":"▼")}),x("click",Q,()=>{w(Me,!t(Me))}),x("click",U,()=>{w(ye,!t(ye))}),x("click",He,()=>{w(ue,!t(ue))}),x("click",Ft,()=>{w(Z,!t(Z))}),x("click",fa,()=>{w(X,!t(X))}),x("click",ot,()=>{w(ne,!t(ne))}),x("click",Wt,()=>{w(Ae,!t(Ae))}),x("click",Oe,()=>{w(G,!t(G))}),x("click",at,()=>{w(j,!t(j))}),f(a,fe),ta()}oa(["click","change","input"]);var Um=g('
'),Am=g('

The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).

',1),zm=g(`

Utopia-style fluid scale — viewport width, base unit and ratio per endpoint. + The viewport range is shared with the type scale.

`,1),Em=g('
'),Rm=g('
Space scale preview
');function Tm(a,e){ea(e,!0);const o=[{label:"Minor Third — 1.200",value:1.2},{label:"Major Third — 1.250",value:1.25},{label:"Perfect Fourth — 1.333",value:1.333},{label:"Aug. Fourth — 1.414",value:1.414},{label:"Golden — 1.618",value:1.618}],n=["2xs","xs","s","m","l","xl","2xl","3xl","4xl"],l=Vo.spacing??[];function i(Z,se){const Y=parseFloat(e.overrides[Z]??"");return isNaN(Y)?se:Y}let c=u(()=>i("--sf-space-ratio-min",1.25)),d=u(()=>i("--sf-space-ratio-max",1.333)),p=u(()=>i("--sf-space-base-min",1)),m=u(()=>i("--sf-space-base-max",2)),h=u(()=>i("--sf-space-scale",1)),v=u(()=>i("--sf-gap",1)),b=u(()=>i("--sf-gutter",1.5)),k=u(()=>i("--sf-content-gap",.5)),S=u(()=>i("--sf-fluid-min-vw",22.5)),E=u(()=>i("--sf-fluid-max-vw",90)),I=K(!1),P=K(!1),B=K(!1);var H=Rm(),D=s(H),R=r(s(D),2);ae(R,22,()=>n,Z=>Z,(Z,se,Y)=>{const de=u(()=>(t(p)+t(m))/2),ge=u(()=>(t(c)+t(d))/2),ve=u(()=>t(Y)-3),re=u(()=>t(ve)>=0?t(de)*Math.pow(t(ge),t(ve)):t(de)/Math.pow(t(ge),-t(ve))),Ie=u(()=>t(re)*t(h)),qe=u(()=>Math.min(t(Ie)*28,240));var rt=Um(),et=s(rt),tt=s(et),vt=r(et,2),gt=r(vt,2),Ot=s(gt);_(_t=>{y(tt,se),ct(vt,`width: ${t(qe)}px; min-width: 3px`),y(Ot,`${_t??""}rem`)},[()=>t(Ie).toFixed(2)]),f(Z,rt)});var C=r(D,4),A=s(C),q=r(s(A),2),O=s(q),F=r(A,2);{var M=Z=>{var se=Am(),Y=r(ce(se),2);{let ve=u(()=>"--sf-gap"in e.overrides);xt(Y,{label:"Gap",get value(){return t(v)},min:0,max:4,step:.0625,unit:"rem",help:"--sf-gap — spacing between layout items (cluster, grid, reel, stack, sidebar, bento)",get overridden(){return t(ve)},onChange:re=>e.onSet("--sf-gap",`${re}rem`),onReset:()=>e.onReset("--sf-gap"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-gap"]},onRawSet:re=>e.onSet("--sf-gap",re)})}var de=r(Y,2);{let ve=u(()=>"--sf-content-gap"in e.overrides);xt(de,{label:"Content gap",get value(){return t(k)},min:0,max:2,step:.0625,unit:"rem",help:"--sf-content-gap — tighter gap within components (defaults to space-s)",get overridden(){return t(ve)},onChange:re=>e.onSet("--sf-content-gap",`${re}rem`),onReset:()=>e.onReset("--sf-content-gap"),rawDefault:"var(--sf-space-s)",get currentRaw(){return e.overrides["--sf-content-gap"]},onRawSet:re=>e.onSet("--sf-content-gap",re)})}var ge=r(de,2);{let ve=u(()=>"--sf-gutter"in e.overrides);xt(ge,{label:"Gutter",get value(){return t(b)},min:0,max:6,step:.0625,unit:"rem",help:"--sf-gutter — wide page/section side gutter (containers, .sf-section--guttered)",get overridden(){return t(ve)},onChange:re=>e.onSet("--sf-gutter",`${re}rem`),onReset:()=>e.onReset("--sf-gutter"),rawDefault:"var(--sf-space-l)",get currentRaw(){return e.overrides["--sf-gutter"]},onRawSet:re=>e.onSet("--sf-gutter",re)})}f(Z,se)};L(F,Z=>{t(I)&&Z(M)})}var J=r(C,4),be=s(J),ze=r(s(be),2),Me=s(ze),ye=r(be,2);{var ue=Z=>{var se=zm(),Y=r(ce(se),2);{let ge=u(()=>"--sf-fluid-min-vw"in e.overrides||"--sf-fluid-max-vw"in e.overrides);Us(Y,{title:"Viewport range",get minValue(){return t(S)},get maxValue(){return t(E)},min:15,max:120,step:.5,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",get overridden(){return t(ge)},onReset:()=>{e.onReset("--sf-fluid-min-vw"),e.onReset("--sf-fluid-max-vw")},onMinChange:ve=>e.onSet("--sf-fluid-min-vw",String(ve)),onMaxChange:ve=>e.onSet("--sf-fluid-max-vw",String(ve))})}var de=r(Y,2);{let ge=u(()=>"--sf-space-base-min"in e.overrides||"--sf-space-base-max"in e.overrides);Us(de,{title:"Base unit & ratio",get minValue(){return t(p)},get maxValue(){return t(m)},min:.5,max:4,step:.05,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",previewKind:"space",get overridden(){return t(ge)},onReset:()=>{e.onReset("--sf-space-base-min"),e.onReset("--sf-space-base-max")},onMinChange:ve=>e.onSet("--sf-space-base-min",String(ve)),onMaxChange:ve=>e.onSet("--sf-space-base-max",String(ve)),get ratioPresets(){return o},get ratioMin(){return t(c)},get ratioMax(){return t(d)},ratioMin_bound:1.1,ratioMax_bound:1.8,onRatioMinChange:ve=>e.onSet("--sf-space-ratio-min",String(ve)),onRatioMaxChange:ve=>e.onSet("--sf-space-ratio-max",String(ve))})}f(Z,se)};L(ye,Z=>{t(P)&&Z(ue)})}var X=r(J,4),ne=s(X),_e=r(s(ne),2),Ae=s(_e),j=r(ne,2);{var G=Z=>{var se=Em();ae(se,21,()=>l,Y=>Y.name,(Y,de)=>{Ko(Y,{get knob(){return t(de)},get overrides(){return e.overrides},onChange:(ge,ve)=>ve===null?e.onReset(ge):e.onSet(ge,ve)})}),f(Z,se)};L(j,Z=>{t(B)&&Z(G)})}_(()=>{ee(A,"aria-expanded",t(I)),y(O,t(I)?"▲":"▼"),ee(be,"aria-expanded",t(P)),y(Me,t(P)?"▲":"▼"),ee(ne,"aria-expanded",t(B)),y(Ae,t(B)?"▲":"▼")}),x("click",A,()=>{w(I,!t(I))}),x("click",be,()=>{w(P,!t(P))}),x("click",ne,()=>{w(B,!t(B))}),f(a,H),ta()}oa(["click"]);var Dm=g('
'),Mm=g('
Narrow
Prose
Default
Wide
',1),Nm=g(" ",1),Fm=g('
col
'),jm=g('
Named sizes (grid-min-xs → 2xl)
Preview at 360px panel width
',1),Gm=g('
'),Hm=g('
Mobile
Desktop
',1),qm=g('

Offsets position:sticky elements below a fixed header. Defaults to header heights.

Mobile
Desktop
',1),Vm=g('
',1),Km=g('
'),ol=g(''),Vs=g(''),sl=g('
'),rl=g(""),Wm=g('
Switcher
Sidebar content
Cluster
Equal grid
Named column counts (equal-min-col-2/3/4/6)
Cover
Frame ratio

--sf-frame-ratio — aspect ratio for .sf-frame

Reel

--sf-reel-item-width — width of each item in a horizontal .sf-reel

Height
Imposter
Content grid (breakout)
Alternate (zigzag)
'),Ym=g('
'),Zm=g('

Override the built-in named aspect ratios used by .sf-ratio-* utilities.

'),Xm=g('

Default values for the .sf-bg full-bleed background utility.

'),Jm=g('
');function Qm(a,e){ea(e,!0);function o(Oe,Qe){if(!Oe)return Qe;const it=parseFloat(Oe);return isNaN(it)?Qe:it}let n=u(()=>o(e.overrides["--sf-container-narrow"],38)),l=u(()=>o(e.overrides["--sf-container-prose"],65)),i=u(()=>o(e.overrides["--sf-container-default"],75)),c=u(()=>o(e.overrides["--sf-container-wide"],90)),d=u(()=>o(e.overrides["--sf-center-max"],75)),p=u(()=>o(e.overrides["--sf-center-gutter"],1)),m=u(()=>o(e.overrides["--sf-grid-min"],16)),h=u(()=>o(e.overrides["--sf-header-height-mobile"],3.5)),v=u(()=>o(e.overrides["--sf-header-height-desktop"],5)),b=u(()=>o(e.overrides["--sf-sidebar-width"],18)),k=u(()=>o(e.overrides["--sf-sticky-offset-mobile"],3.5)),S=u(()=>o(e.overrides["--sf-sticky-offset-desktop"],5));const E=[{label:"Columns",token:"--sf-bento-cols-default",min:1,max:12,step:1,unit:"",default:4},{label:"Row default",token:"--sf-bento-row-default",min:4,max:24,step:.5,unit:"rem",default:10},{label:"Row compact",token:"--sf-bento-row-compact",min:2,max:16,step:.5,unit:"rem",default:6},{label:"Row tall",token:"--sf-bento-row-tall",min:8,max:32,step:.5,unit:"rem",default:16}];let I=K(!1),P=K(!1),B=K(!1),H=K(!1),D=K(!1),R=K(!1),C=K(!1),A=K(!1),q=K(!1),O=K(!1);function F(Oe){const Qe=e.overrides[Oe.token];return Qe?parseFloat(Qe):Oe.default}let M=u(()=>o(e.overrides["--sf-switcher-threshold"],30)),J=u(()=>o(e.overrides["--sf-sidebar-min-width"],50)),be=u(()=>o(e.overrides["--sf-equal-min-col"],16)),ze=u(()=>o(e.overrides["--sf-cover-min-height"],100)),Me=u(()=>o(e.overrides["--sf-imposter-margin"],1)),ye=u(()=>o(e.overrides["--sf-breakout-width"],90)),ue=u(()=>o(e.overrides["--sf-content-width"],75)),X=u(()=>o(e.overrides["--sf-alternate-inner-gap"],1)),ne=u(()=>e.overrides["--sf-frame-ratio"]??"16 / 9"),_e=u(()=>e.overrides["--sf-reel-item-width"]??"max-content");const Ae=["16 / 9","4 / 3","3 / 2","1 / 1","21 / 9"],j=[{label:"auto",value:"max-content"},{label:"12rem",value:"12rem"},{label:"16rem",value:"16rem"},{label:"20rem",value:"20rem"}];var G=Jm(),Z=s(G),se=s(Z),Y=r(s(se),2),de=s(Y),ge=r(se,2);{var ve=Oe=>{var Qe=Mm(),it=ce(Qe),Be=s(it),De=r(s(Be),2);{let V=u(()=>"--sf-container-narrow"in e.overrides);xt(De,{label:"",get value(){return t(n)},min:20,max:60,step:1,unit:"rem",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-container-narrow",`${te}rem`),onReset:()=>e.onReset("--sf-container-narrow")})}var ft=r(Be,2),at=r(s(ft),2);{let V=u(()=>"--sf-container-prose"in e.overrides);xt(at,{label:"",get value(){return t(l)},min:40,max:90,step:1,unit:"ch",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-container-prose",`${te}ch`),onReset:()=>e.onReset("--sf-container-prose")})}var Pe=r(ft,2),st=r(s(Pe),2);{let V=u(()=>"--sf-container-default"in e.overrides);xt(st,{label:"",get value(){return t(i)},min:50,max:120,step:1,unit:"rem",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-container-default",`${te}rem`),onReset:()=>e.onReset("--sf-container-default")})}var z=r(Pe,2),$=r(s(z),2);{let V=u(()=>"--sf-container-wide"in e.overrides);xt($,{label:"",get value(){return t(c)},min:60,max:160,step:1,unit:"rem",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-container-wide",`${te}rem`),onReset:()=>e.onReset("--sf-container-wide")})}var N=r(it,2);ae(N,21,()=>[{label:"narrow",value:t(n),max:t(c),unit:"rem"},{label:"prose",value:t(l),max:t(c)*1.5,unit:"ch"},{label:"default",value:t(i),max:t(c),unit:"rem"},{label:"wide",value:t(c),max:t(c),unit:"rem"}],V=>V.label,(V,te)=>{var Te=Dm(),ie=s(Te),pe=s(ie),he=r(ie,2),Se=s(he),Ue=r(he,2),Ct=s(Ue);_(Bt=>{y(pe,t(te).label),ct(Se,Bt),y(Ct,`${t(te).value??""}${t(te).unit??""}`)},[()=>`width: ${Math.min(t(te).value/t(te).max*100,100)}%`]),f(V,Te)}),f(Oe,Qe)};L(ge,Oe=>{t(I)&&Oe(ve)})}var re=r(Z,4),Ie=s(re),qe=r(s(Ie),2),rt=s(qe),et=r(Ie,2);{var tt=Oe=>{var Qe=Nm(),it=ce(Qe);{let De=u(()=>"--sf-center-max"in e.overrides);xt(it,{label:"Max width",get value(){return t(d)},min:30,max:160,step:1,unit:"rem",help:"--sf-center-max — max-width of the .sf-center centering wrapper",get overridden(){return t(De)},onChange:ft=>e.onSet("--sf-center-max",`${ft}rem`),onReset:()=>e.onReset("--sf-center-max"),rawDefault:"var(--sf-container-default)",get currentRaw(){return e.overrides["--sf-center-max"]},onRawSet:ft=>e.onSet("--sf-center-max",ft)})}var Be=r(it,2);{let De=u(()=>"--sf-center-gutter"in e.overrides);xt(Be,{label:"Gutter",get value(){return t(p)},min:0,max:4,step:.125,unit:"rem",help:"--sf-center-gutter — minimum side padding inside the center wrapper",get overridden(){return t(De)},onChange:ft=>e.onSet("--sf-center-gutter",`${ft}rem`),onReset:()=>e.onReset("--sf-center-gutter"),rawDefault:"var(--sf-gutter)",get currentRaw(){return e.overrides["--sf-center-gutter"]},onRawSet:ft=>e.onSet("--sf-center-gutter",ft)})}f(Oe,Qe)};L(et,Oe=>{t(P)&&Oe(tt)})}var vt=r(re,4),gt=s(vt),Ot=r(s(gt),2),_t=s(Ot),fe=r(gt,2);{var T=Oe=>{var Qe=jm(),it=ce(Qe);{let Pe=u(()=>"--sf-grid-min"in e.overrides);xt(it,{label:"Grid min cell width",get value(){return t(m)},min:8,max:40,step:.5,unit:"rem",help:"sf-grid minimum column width — browser auto-fills columns",get overridden(){return t(Pe)},onChange:st=>e.onSet("--sf-grid-min",`${st}rem`),onReset:()=>e.onReset("--sf-grid-min")})}var Be=r(it,2),De=r(s(Be),2);ae(De,20,()=>[{label:"xs",token:"--sf-grid-min-xs",def:10},{label:"s",token:"--sf-grid-min-s",def:13},{label:"m",token:"--sf-grid-min-m",def:16},{label:"l",token:"--sf-grid-min-l",def:20},{label:"xl",token:"--sf-grid-min-xl",def:24},{label:"2xl",token:"--sf-grid-min-2xl",def:28}],Pe=>Pe.token,(Pe,st)=>{{let z=u(()=>o(e.overrides[st.token],st.def)),$=u(()=>st.token in e.overrides);xt(Pe,{get label(){return st.label},get value(){return t(z)},min:6,max:40,step:.5,unit:"rem",get overridden(){return t($)},onChange:N=>e.onSet(st.token,`${N}rem`),onReset:()=>e.onReset(st.token)})}});var ft=r(Be,2),at=r(s(ft),2);ae(at,20,()=>Array.from({length:8}),hn,(Pe,st)=>{var z=Fm();f(Pe,z)}),_(Pe=>ct(at,Pe),[()=>`grid-template-columns: repeat(auto-fill, minmax(${Math.min(t(m)*16*.3,120)}px, 1fr))`]),f(Oe,Qe)};L(fe,Oe=>{t(B)&&Oe(T)})}var Q=r(vt,4),le=s(Q),ke=r(s(le),2),Ce=s(ke),Ve=r(le,2);{var Ke=Oe=>{var Qe=Hm(),it=ce(Qe),Be=s(it),De=r(s(Be),2);{let V=u(()=>"--sf-header-height-mobile"in e.overrides);xt(De,{label:"",get value(){return t(h)},min:2,max:8,step:.25,unit:"rem",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-header-height-mobile",`${te}rem`),onReset:()=>e.onReset("--sf-header-height-mobile")})}var ft=r(Be,2),at=r(s(ft),2);{let V=u(()=>"--sf-header-height-desktop"in e.overrides);xt(at,{label:"",get value(){return t(v)},min:3,max:10,step:.25,unit:"rem",get overridden(){return t(V)},onChange:te=>e.onSet("--sf-header-height-desktop",`${te}rem`),onReset:()=>e.onReset("--sf-header-height-desktop")})}var Pe=r(it,2),st=s(Pe),z=r(s(st),2);ae(z,20,()=>[1,2,3],V=>V,(V,te)=>{var Te=Gm();f(V,Te)});var $=r(st,2),N=s($);_(V=>{ct(st,V),y(N,`${t(h)??""}rem mobile · ${t(v)??""}rem desktop`)},[()=>`height: ${Math.min(t(h)*12,64)}px`]),f(Oe,Qe)};L(Ve,Oe=>{t(H)&&Oe(Ke)})}var U=r(Q,4),W=s(U),oe=r(s(W),2),Ee=s(oe),Le=r(W,2);{var mt=Oe=>{var Qe=qm(),it=r(ce(Qe),2),Be=s(it),De=r(s(Be),2);{let Pe=u(()=>"--sf-sticky-offset-mobile"in e.overrides);xt(De,{label:"",get value(){return t(k)},min:0,max:12,step:.25,unit:"rem",get overridden(){return t(Pe)},onChange:st=>e.onSet("--sf-sticky-offset-mobile",`${st}rem`),onReset:()=>e.onReset("--sf-sticky-offset-mobile"),rawDefault:"var(--sf-header-height-mobile)",get currentRaw(){return e.overrides["--sf-sticky-offset-mobile"]},onRawSet:st=>e.onSet("--sf-sticky-offset-mobile",st)})}var ft=r(Be,2),at=r(s(ft),2);{let Pe=u(()=>"--sf-sticky-offset-desktop"in e.overrides);xt(at,{label:"",get value(){return t(S)},min:0,max:12,step:.25,unit:"rem",get overridden(){return t(Pe)},onChange:st=>e.onSet("--sf-sticky-offset-desktop",`${st}rem`),onReset:()=>e.onReset("--sf-sticky-offset-desktop"),rawDefault:"var(--sf-header-height-desktop)",get currentRaw(){return e.overrides["--sf-sticky-offset-desktop"]},onRawSet:st=>e.onSet("--sf-sticky-offset-desktop",st)})}f(Oe,Qe)};L(Le,Oe=>{t(D)&&Oe(mt)})}var He=r(U,4),dt=s(He),nt=r(s(dt),2),ht=s(nt),Ne=r(dt,2);{var At=Oe=>{var Qe=Vm(),it=ce(Qe);{let Pe=u(()=>"--sf-sidebar-width"in e.overrides);xt(it,{label:"Sidebar width",get value(){return t(b)},min:10,max:32,step:.5,unit:"rem",help:"--sf-sidebar-width — default sidebar / drawer width",get overridden(){return t(Pe)},onChange:st=>e.onSet("--sf-sidebar-width",`${st}rem`),onReset:()=>e.onReset("--sf-sidebar-width")})}var Be=r(it,2),De=s(Be),ft=s(De),at=s(ft);_(Pe=>{ct(De,Pe),y(at,`${t(b)??""}rem`)},[()=>`width: ${Math.min(t(b)*3.5,100)}px`]),f(Oe,Qe)};L(Ne,Oe=>{t(R)&&Oe(At)})}var Ft=r(He,4),aa=s(Ft),Mt=r(s(aa),2),Rt=s(Mt),na=r(aa,2);{var da=Oe=>{var Qe=Km();ae(Qe,21,()=>E,it=>it.token,(it,Be)=>{{let De=u(()=>F(t(Be))),ft=u(()=>t(Be).token in e.overrides);xt(it,{get label(){return t(Be).label},get value(){return t(De)},get min(){return t(Be).min},get max(){return t(Be).max},get step(){return t(Be).step},get unit(){return t(Be).unit},get help(){return t(Be).token},get overridden(){return t(ft)},onChange:at=>e.onSet(t(Be).token,t(Be).unit?`${at}${t(Be).unit}`:String(at)),onReset:()=>e.onReset(t(Be).token)})}}),f(Oe,Qe)};L(na,Oe=>{t(C)&&Oe(da)})}var fa=r(Ft,4),we=s(fa),kt=r(s(we),2),Tt=s(kt),Ze=r(we,2);{var It=Oe=>{var Qe=Wm(),it=s(Qe),Be=r(s(it),2);{let Ge=u(()=>"--sf-switcher-threshold"in e.overrides);xt(Be,{label:"Threshold",get value(){return t(M)},min:10,max:60,step:1,unit:"rem",help:"--sf-switcher-threshold — width below which .sf-switcher stacks vertically",get overridden(){return t(Ge)},onChange:me=>e.onSet("--sf-switcher-threshold",`${me}rem`),onReset:()=>e.onReset("--sf-switcher-threshold")})}var De=r(it,2),ft=r(s(De),2);{let Ge=u(()=>"--sf-sidebar-min-width"in e.overrides);xt(ft,{label:"Content min width",get value(){return t(J)},min:20,max:80,step:1,unit:"%",help:"--sf-sidebar-min-width — minimum width of the .sf-sidebar content column before it wraps",get overridden(){return t(Ge)},onChange:me=>e.onSet("--sf-sidebar-min-width",`${me}%`),onReset:()=>e.onReset("--sf-sidebar-min-width")})}var at=r(De,2),Pe=r(s(at),2);ae(Pe,16,()=>[{label:"Align",token:"--sf-cluster-align",def:"center",opts:["flex-start","center","flex-end","stretch","baseline"]},{label:"Justify",token:"--sf-cluster-justify",def:"flex-start",opts:["flex-start","center","flex-end","space-between","space-around"]}],Ge=>Ge.token,(Ge,me)=>{var wt=sl(),Ye=s(wt),Re=s(Ye),Je=r(Ye,2);ae(Je,20,()=>me.opts,Qt=>Qt,(Qt,xe)=>{var je=ol(),Ut=s(je),Pt={};_(()=>{y(Ut,xe),Pt!==(Pt=xe)&&(je.value=(je.__value=xe)??"")}),f(Qt,je)});var pt;Na(Je);var Et=r(Je,2);{var ra=Qt=>{var xe=Vs();x("click",xe,()=>e.onReset(me.token)),f(Qt,xe)};L(Et,Qt=>{me.token in e.overrides&&Qt(ra)})}_(()=>{y(Re,me.label),pt!==(pt=e.overrides[me.token]??me.def)&&(Je.value=(Je.__value=e.overrides[me.token]??me.def)??"",Ia(Je,e.overrides[me.token]??me.def))}),x("change",Je,Qt=>{const xe=Qt.target.value;xe===me.def?e.onReset(me.token):e.onSet(me.token,xe)}),f(Ge,wt)});var st=r(at,2),z=r(s(st),2);{let Ge=u(()=>"--sf-equal-min-col"in e.overrides);xt(z,{label:"Min column",get value(){return t(be)},min:6,max:36,step:.5,unit:"rem",help:"--sf-equal-min-col — minimum column width for .sf-equal",get overridden(){return t(Ge)},onChange:me=>e.onSet("--sf-equal-min-col",`${me}rem`),onReset:()=>e.onReset("--sf-equal-min-col")})}var $=r(z,2),N=r(s($),2);ae(N,20,()=>[{label:"2-col",token:"--sf-equal-min-col-2",def:28},{label:"3-col",token:"--sf-equal-min-col-3",def:15},{label:"4-col",token:"--sf-equal-min-col-4",def:16},{label:"6-col",token:"--sf-equal-min-col-6",def:10}],Ge=>Ge.token,(Ge,me)=>{{let wt=u(()=>o(e.overrides[me.token],me.def)),Ye=u(()=>me.token in e.overrides);xt(Ge,{get label(){return me.label},get value(){return t(wt)},min:4,max:36,step:.5,unit:"rem",get overridden(){return t(Ye)},onChange:Re=>e.onSet(me.token,`${Re}rem`),onReset:()=>e.onReset(me.token)})}});var V=r(st,2),te=r(s(V),2);{let Ge=u(()=>"--sf-cover-min-height"in e.overrides);xt(te,{label:"Min height",get value(){return t(ze)},min:20,max:100,step:1,unit:"dvh",help:"--sf-cover-min-height — minimum height of the .sf-cover layout",get overridden(){return t(Ge)},onChange:me=>e.onSet("--sf-cover-min-height",`${me}dvh`),onReset:()=>e.onReset("--sf-cover-min-height")})}var Te=r(V,2),ie=r(s(Te),4);ae(ie,20,()=>Ae,Ge=>Ge,(Ge,me)=>{var wt=rl(),Ye=s(wt);_(Re=>{Xe(wt,1,Re),y(Ye,me)},[()=>`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${t(ne).replace(/\s/g,"")===me.replace(/\s/g,"")?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`]),x("click",wt,()=>me==="16 / 9"?e.onReset("--sf-frame-ratio"):e.onSet("--sf-frame-ratio",me)),f(Ge,wt)});var pe=r(Te,2),he=r(s(pe),4);ae(he,21,()=>j,Ge=>Ge.value,(Ge,me)=>{var wt=rl(),Ye=s(wt);_(()=>{Xe(wt,1,`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${t(_e)===t(me).value?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Ye,t(me).label)}),x("click",wt,()=>t(me).value==="max-content"?e.onReset("--sf-reel-item-width"):e.onSet("--sf-reel-item-width",t(me).value)),f(Ge,wt)});var Se=r(he,2),Ue=r(s(Se),2),Ct=r(Ue,2);{var Bt=Ge=>{var me=Vs();x("click",me,()=>e.onReset("--sf-reel-height")),f(Ge,me)};L(Ct,Ge=>{"--sf-reel-height"in e.overrides&&Ge(Bt)})}var ut=r(pe,2),$e=r(s(ut),2);{let Ge=u(()=>"--sf-imposter-margin"in e.overrides);xt($e,{label:"Margin",get value(){return t(Me)},min:0,max:4,step:.125,unit:"rem",help:"--sf-imposter-margin — viewport inset for the centered .sf-imposter overlay",get overridden(){return t(Ge)},onChange:me=>e.onSet("--sf-imposter-margin",`${me}rem`),onReset:()=>e.onReset("--sf-imposter-margin"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-imposter-margin"]},onRawSet:me=>e.onSet("--sf-imposter-margin",me)})}var Lt=r(ut,2),yt=r(s(Lt),2);{let Ge=u(()=>"--sf-content-width"in e.overrides);xt(yt,{label:"Content width",get value(){return t(ue)},min:40,max:120,step:1,unit:"rem",help:"--sf-content-width — default reading column width in .sf-content-grid",get overridden(){return t(Ge)},onChange:me=>e.onSet("--sf-content-width",`${me}rem`),onReset:()=>e.onReset("--sf-content-width"),rawDefault:"var(--sf-container-default)",get currentRaw(){return e.overrides["--sf-content-width"]},onRawSet:me=>e.onSet("--sf-content-width",me)})}var Fe=r(yt,2);{let Ge=u(()=>"--sf-breakout-width"in e.overrides);xt(Fe,{label:"Breakout width",get value(){return t(ye)},min:50,max:160,step:1,unit:"rem",help:"--sf-breakout-width — wide breakout column width in .sf-content-grid",get overridden(){return t(Ge)},onChange:me=>e.onSet("--sf-breakout-width",`${me}rem`),onReset:()=>e.onReset("--sf-breakout-width"),rawDefault:"var(--sf-container-wide)",get currentRaw(){return e.overrides["--sf-breakout-width"]},onRawSet:me=>e.onSet("--sf-breakout-width",me)})}var We=r(Lt,2),St=r(s(We),2);{let Ge=u(()=>"--sf-alternate-inner-gap"in e.overrides);xt(St,{label:"Inner gap",get value(){return t(X)},min:0,max:4,step:.125,unit:"rem",help:"--sf-alternate-inner-gap — gap between media and text within an .sf-alternate row",get overridden(){return t(Ge)},onChange:me=>e.onSet("--sf-alternate-inner-gap",`${me}rem`),onReset:()=>e.onReset("--sf-alternate-inner-gap"),rawDefault:"var(--sf-gap)",get currentRaw(){return e.overrides["--sf-alternate-inner-gap"]},onRawSet:me=>e.onSet("--sf-alternate-inner-gap",me)})}_(()=>Jt(Ue,e.overrides["--sf-reel-height"]??"")),x("input",Ue,Ge=>{const me=Ge.target.value.trim();me?e.onSet("--sf-reel-height",me):e.onReset("--sf-reel-height")}),f(Oe,Qe)};L(Ze,Oe=>{t(A)&&Oe(It)})}var ot=r(fa,4),lt=s(ot),qt=r(s(lt),2),jt=s(qt),Dt=r(lt,2);{var Vt=Oe=>{var Qe=Zm(),it=r(s(Qe),2);ae(it,16,()=>[{label:"Square",token:"--sf-ratio-square",def:"1"},{label:"Portrait",token:"--sf-ratio-portrait",def:"3 / 4"},{label:"3:2",token:"--sf-ratio-3-2",def:"3 / 2"},{label:"4:3",token:"--sf-ratio-4-3",def:"4 / 3"},{label:"Video",token:"--sf-ratio-video",def:"16 / 9"},{label:"Cinema",token:"--sf-ratio-cinema",def:"21 / 9"},{label:"Golden",token:"--sf-ratio-golden",def:"1.618 / 1"}],Be=>Be.token,(Be,De)=>{var ft=Ym(),at=s(ft),Pe=s(at),st=r(at,2),z=r(st,2);{var $=N=>{var V=Vs();x("click",V,()=>e.onReset(De.token)),f(N,V)};L(z,N=>{De.token in e.overrides&&N($)})}_(()=>{y(Pe,De.label),Jt(st,e.overrides[De.token]??""),ee(st,"placeholder",De.def)}),x("input",st,N=>{const V=N.target.value.trim();V?e.onSet(De.token,V):e.onReset(De.token)}),f(Be,ft)}),f(Oe,Qe)};L(Dt,Oe=>{t(O)&&Oe(Vt)})}var Wt=r(ot,4),ua=s(Wt),Ua=r(s(ua),2),Pa=s(Ua),Aa=r(ua,2);{var bt=Oe=>{var Qe=Xm(),it=r(s(Qe),2);ae(it,16,()=>[{label:"Fit",token:"--sf-bg-fit",placeholder:"cover",opts:["cover","contain","fill","none","scale-down"]},{label:"Position",token:"--sf-bg-position",placeholder:"50% 50%",opts:["50% 50%","top","bottom","left","right","center"]}],at=>at.token,(at,Pe)=>{var st=sl(),z=s(st),$=s(z),N=r(z,2);ae(N,20,()=>Pe.opts,ie=>ie,(ie,pe)=>{var he=ol(),Se=s(he),Ue={};_(()=>{y(Se,pe),Ue!==(Ue=pe)&&(he.value=(he.__value=pe)??"")}),f(ie,he)});var V;Na(N);var te=r(N,2);{var Te=ie=>{var pe=Vs();x("click",pe,()=>e.onReset(Pe.token)),f(ie,pe)};L(te,ie=>{Pe.token in e.overrides&&ie(Te)})}_(()=>{y($,Pe.label),V!==(V=e.overrides[Pe.token]??Pe.placeholder)&&(N.value=(N.__value=e.overrides[Pe.token]??Pe.placeholder)??"",Ia(N,e.overrides[Pe.token]??Pe.placeholder))}),x("change",N,ie=>{const pe=ie.target.value;pe===Pe.placeholder?e.onReset(Pe.token):e.onSet(Pe.token,pe)}),f(at,st)});var Be=r(it,2);{let at=u(()=>o(e.overrides["--sf-bg-inset"],0)),Pe=u(()=>"--sf-bg-inset"in e.overrides);xt(Be,{label:"Inset",get value(){return t(at)},min:0,max:4,step:.25,unit:"rem",help:"--sf-bg-inset — inset the background from the container edges",get overridden(){return t(Pe)},onChange:st=>e.onSet("--sf-bg-inset",`${st}rem`),onReset:()=>e.onReset("--sf-bg-inset")})}var De=r(Be,2);{let at=u(()=>o(e.overrides["--sf-bg-radius"],0)),Pe=u(()=>"--sf-bg-radius"in e.overrides);xt(De,{label:"Radius",get value(){return t(at)},min:0,max:4,step:.125,unit:"rem",help:"--sf-bg-radius — corner radius of the background element",get overridden(){return t(Pe)},onChange:st=>e.onSet("--sf-bg-radius",`${st}rem`),onReset:()=>e.onReset("--sf-bg-radius")})}var ft=r(De,2);{let at=u(()=>o(e.overrides["--sf-bg-z"],-2)),Pe=u(()=>"--sf-bg-z"in e.overrides);xt(ft,{label:"Z-index",get value(){return t(at)},min:-10,max:0,step:1,help:"--sf-bg-z — stack order of the background pseudo-element (typically negative)",get overridden(){return t(Pe)},onChange:st=>e.onSet("--sf-bg-z",String(st)),onReset:()=>e.onReset("--sf-bg-z")})}f(Oe,Qe)};L(Aa,Oe=>{t(q)&&Oe(bt)})}_(()=>{ee(se,"aria-expanded",t(I)),y(de,t(I)?"▲":"▼"),ee(Ie,"aria-expanded",t(P)),y(rt,t(P)?"▲":"▼"),ee(gt,"aria-expanded",t(B)),y(_t,t(B)?"▲":"▼"),ee(le,"aria-expanded",t(H)),y(Ce,t(H)?"▲":"▼"),ee(W,"aria-expanded",t(D)),y(Ee,t(D)?"▲":"▼"),ee(dt,"aria-expanded",t(R)),y(ht,t(R)?"▲":"▼"),ee(aa,"aria-expanded",t(C)),y(Rt,t(C)?"▲":"▼"),ee(we,"aria-expanded",t(A)),y(Tt,t(A)?"▲":"▼"),ee(lt,"aria-expanded",t(O)),y(jt,t(O)?"▲":"▼"),ee(ua,"aria-expanded",t(q)),y(Pa,t(q)?"▲":"▼")}),x("click",se,()=>{w(I,!t(I))}),x("click",Ie,()=>{w(P,!t(P))}),x("click",gt,()=>{w(B,!t(B))}),x("click",le,()=>{w(H,!t(H))}),x("click",W,()=>{w(D,!t(D))}),x("click",dt,()=>{w(R,!t(R))}),x("click",aa,()=>{w(C,!t(C))}),x("click",we,()=>{w(A,!t(A))}),x("click",lt,()=>{w(O,!t(O))}),x("click",ua,()=>{w(q,!t(q))}),f(a,G),ta()}oa(["click","change","input"]);var $m=g('

Drives --sf-color-border--strong, --subtle, --translucent automatically.

',1),ev=g('
'),tv=g('
',1),av=g(''),ov=g('
'),sv=g('
Border sample
',1),rv=g('
Color
',1),nv=g('
Ring color
Focus preview
',1),lv=g('
'),iv=g('
'),cv=g('
'),dv=g('
'),fv=g('
'),uv=g('
Radius
');function pv(a,e){ea(e,!0);const o=["solid","dashed","dotted"],n=["xs","s","m","l","xl","2xl","full"],l={xs:2,s:4,m:8,l:12,xl:16,"2xl":24,full:9999},i=[{step:"xs",name:"--sf-radius-xs",default:2,max:16,step_size:.5,rawDefault:"calc(2px * var(--sf-radius-scale))"},{step:"s",name:"--sf-radius-s",default:4,max:24,step_size:.5,rawDefault:"calc(4px * var(--sf-radius-scale))"},{step:"m",name:"--sf-radius-m",default:8,max:32,step_size:1,rawDefault:"calc(8px * var(--sf-radius-scale))"},{step:"l",name:"--sf-radius-l",default:12,max:48,step_size:1,rawDefault:"calc(12px * var(--sf-radius-scale))"},{step:"xl",name:"--sf-radius-xl",default:16,max:64,step_size:1,rawDefault:"calc(16px * var(--sf-radius-scale))"},{step:"2xl",name:"--sf-radius-2xl",default:24,max:80,step_size:2,rawDefault:"calc(24px * var(--sf-radius-scale))"}],c=[{label:"Button radius",token:"--sf-btn-radius",unit:"rem",min:0,max:2,step:.05,default:.5,rawDefault:"var(--sf-radius-m)",help:"--sf-btn-radius"},{label:"Button padding block",token:"--sf-btn-padding-block",unit:"rem",min:0,max:1,step:.025,default:.375,rawDefault:"var(--sf-space-xs)",help:"--sf-btn-padding-block"},{label:"Button padding inline",token:"--sf-btn-padding-inline",unit:"rem",min:0,max:2,step:.025,default:1,rawDefault:"var(--sf-space-m)",help:"--sf-btn-padding-inline"},{label:"Field radius",token:"--sf-field-radius",unit:"rem",min:0,max:2,step:.05,default:.5,rawDefault:"var(--sf-radius-m)",help:"--sf-field-radius"},{label:"Field padding block",token:"--sf-field-padding-block",unit:"rem",min:0,max:1,step:.025,default:.375,rawDefault:"var(--sf-space-xs)",help:"--sf-field-padding-block"},{label:"Field padding inline",token:"--sf-field-padding-inline",unit:"rem",min:0,max:2,step:.025,default:.75,rawDefault:"var(--sf-space-s)",help:"--sf-field-padding-inline"}],d=Vo.borders??[];let p=K(!1),m=K(!1),h=K(!1),v=K(!1),b=K(!1),k=K(!1),S=K(!1),E=K(!1),I=K(!1);function P(Ze,It,ot){if(!Ze)return It;const lt=parseFloat(ot?Ze.replace(ot,""):Ze);return isNaN(lt)?It:lt}let B=u(()=>P(e.overrides["--sf-radius-scale"],1)),H=u(()=>P(e.overrides["--sf-border-scale"],1)),D=u(()=>P(e.overrides["--sf-focus-ring-width"],2,"px")),R=u(()=>P(e.overrides["--sf-focus-ring-offset"],2,"px")),C=u(()=>P(e.overrides["--sf-divider-width"]?.replace("px",""),1)),A=u(()=>P(e.overrides["--sf-divider-gap"]?.replace("rem",""),1)),q=u(()=>e.overrides["--sf-color-border"]??""),O=u(()=>e.overrides["--sf-border-style"]??"solid"),F=u(()=>e.overrides["--sf-focus-ring-color"]??""),M=u(()=>e.overrides["--sf-divider-color"]??"");function J(Ze,It){return e.overrides[Ze]??It}function be(Ze){const It=e.overrides[Ze.name];if(!It||/^(var|calc|clamp)\(/.test(It.trim()))return Ze.default;const ot=parseFloat(It);return isNaN(ot)?Ze.default:ot}function ze(Ze){const It=e.overrides[Ze.token];if(!It||/^(var|calc|clamp)\(/.test(It.trim()))return Ze.default;const ot=parseFloat(It);return isNaN(ot)?Ze.default:ot}var Me=uv(),ye=s(Me),ue=s(ye),X=r(s(ue),2),ne=s(X),_e=r(ue,2);{var Ae=Ze=>{var It=$m(),ot=ce(It);{let lt=u(()=>"--sf-color-border"in e.overrides);Qa(ot,{token:"--sf-color-border",get value(){return t(q)},placeholder:"auto-derived",get isOverridden(){return t(lt)},onSet:qt=>e.onSet("--sf-color-border",qt),onReset:()=>e.onReset("--sf-color-border")})}f(Ze,It)};L(_e,Ze=>{t(p)&&Ze(Ae)})}var j=r(ye,4),G=s(j),Z=r(s(G),2),se=s(Z),Y=r(G,2);{var de=Ze=>{var It=tv(),ot=ce(It);{let Dt=u(()=>"--sf-border-scale"in e.overrides);xt(ot,{label:"Border scale",get value(){return t(H)},min:0,max:4,step:.25,help:"Multiplier applied to all border widths. 0 hides all borders.",get overridden(){return t(Dt)},onChange:Vt=>e.onSet("--sf-border-scale",String(Vt)),onReset:()=>e.onReset("--sf-border-scale")})}var lt=r(ot,2);{let Dt=u(()=>P(e.overrides["--sf-border-width-hairline"]?.replace("px",""),.5)),Vt=u(()=>"--sf-border-width-hairline"in e.overrides);xt(lt,{label:"Hairline",get value(){return t(Dt)},min:0,max:1,step:.25,unit:"px",help:"--sf-border-width-hairline — ultra-thin border for retina displays",get overridden(){return t(Vt)},onChange:Wt=>e.onSet("--sf-border-width-hairline",`${Wt}px`),onReset:()=>e.onReset("--sf-border-width-hairline")})}var qt=r(lt,2);{let Dt=u(()=>P(e.overrides["--sf-box-border-width"]?.replace("px",""),0)),Vt=u(()=>"--sf-box-border-width"in e.overrides);xt(qt,{label:"Box border",get value(){return t(Dt)},min:0,max:4,step:.5,unit:"px",help:"--sf-box-border-width — box-shadow border drawn without affecting layout",get overridden(){return t(Vt)},onChange:Wt=>e.onSet("--sf-box-border-width",`${Wt}px`),onReset:()=>e.onReset("--sf-box-border-width")})}var jt=r(qt,2);ae(jt,20,()=>[1,2,3,4],Dt=>Dt,(Dt,Vt)=>{var Wt=ev(),ua=s(Wt),Ua=s(ua),Pa=r(ua,2),Aa=r(Pa,2),bt=s(Aa);_((Oe,Qe)=>{y(Ua,`${Vt??""}px →`),ct(Pa,Oe),y(bt,`${Qe??""}px`)},[()=>`height: ${Math.max(Vt*t(H),.5)}px`,()=>(Vt*t(H)).toFixed(1)]),f(Dt,Wt)}),f(Ze,It)};L(Y,Ze=>{t(m)&&Ze(de)})}var ge=r(j,4),ve=s(ge),re=r(s(ve),2),Ie=s(re),qe=r(ve,2);{var rt=Ze=>{var It=sv(),ot=ce(It);ae(ot,20,()=>[{label:"Border",token:"--sf-border-style",default:"solid"},{label:"Divider",token:"--sf-divider-style",default:"solid"}],Vt=>Vt.token,(Vt,Wt)=>{var ua=ov(),Ua=s(ua),Pa=s(Ua),Aa=r(Ua,2);ae(Aa,20,()=>o,bt=>bt,(bt,Oe)=>{const Qe=u(()=>J(Wt.token,Wt.default));var it=av(),Be=s(it),De=r(Be);_(()=>{Xe(it,1,`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${t(Qe)===Oe?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),ct(Be,`width: 20px; height: 0; border-bottom: 2px ${Oe} currentColor; opacity: 0.7`),y(De,` ${Oe??""}`)}),x("click",it,()=>Oe===Wt.default?e.onReset(Wt.token):e.onSet(Wt.token,Oe)),f(bt,it)}),_(()=>y(Pa,Wt.label)),f(Vt,ua)});var lt=r(ot,2),qt=s(lt),jt=r(qt,2),Dt=s(jt);_((Vt,Wt)=>{ct(qt,Vt),y(Dt,`${Wt??""}px · ${t(O)??""}`)},[()=>`border: ${Math.max(t(H),.5)}px ${t(O)} ${t(q)||"var(--sf-color-border, #64748b)"}`,()=>(1*t(H)).toFixed(1)]),f(Ze,It)};L(qe,Ze=>{t(h)&&Ze(rt)})}var et=r(ge,4),tt=s(et),vt=r(s(tt),2),gt=s(vt),Ot=r(tt,2);{var _t=Ze=>{var It=rv(),ot=ce(It),lt=r(s(ot),2);{let Dt=u(()=>"--sf-divider-color"in e.overrides);Qa(lt,{token:"--sf-divider-color",get value(){return t(M)},placeholder:"inherits border",get isOverridden(){return t(Dt)},onSet:Vt=>e.onSet("--sf-divider-color",Vt),onReset:()=>e.onReset("--sf-divider-color")})}var qt=r(ot,2);{let Dt=u(()=>"--sf-divider-width"in e.overrides);xt(qt,{label:"Width",get value(){return t(C)},min:.5,max:4,step:.5,unit:"px",help:"--sf-divider-width",get overridden(){return t(Dt)},onChange:Vt=>e.onSet("--sf-divider-width",`${Vt}px`),onReset:()=>e.onReset("--sf-divider-width"),rawDefault:"var(--sf-border-width-1)",get currentRaw(){return e.overrides["--sf-divider-width"]},onRawSet:Vt=>e.onSet("--sf-divider-width",Vt)})}var jt=r(qt,2);{let Dt=u(()=>"--sf-divider-gap"in e.overrides);xt(jt,{label:"Gap",get value(){return t(A)},min:0,max:4,step:.125,unit:"rem",help:"--sf-divider-gap — spacing around divider lines",get overridden(){return t(Dt)},onChange:Vt=>e.onSet("--sf-divider-gap",`${Vt}rem`),onReset:()=>e.onReset("--sf-divider-gap"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-divider-gap"]},onRawSet:Vt=>e.onSet("--sf-divider-gap",Vt)})}f(Ze,It)};L(Ot,Ze=>{t(v)&&Ze(_t)})}var fe=r(et,4),T=s(fe),Q=r(s(T),2),le=s(Q),ke=r(T,2);{var Ce=Ze=>{var It=nv(),ot=ce(It);{let Wt=u(()=>"--sf-focus-ring-width"in e.overrides);xt(ot,{label:"Ring width",get value(){return t(D)},min:0,max:6,step:.5,unit:"px",help:"Thickness of the keyboard focus indicator",get overridden(){return t(Wt)},onChange:ua=>e.onSet("--sf-focus-ring-width",`${ua}px`),onReset:()=>e.onReset("--sf-focus-ring-width")})}var lt=r(ot,2);{let Wt=u(()=>"--sf-focus-ring-offset"in e.overrides);xt(lt,{label:"Ring offset",get value(){return t(R)},min:0,max:8,step:.5,unit:"px",help:"Gap between element edge and focus ring",get overridden(){return t(Wt)},onChange:ua=>e.onSet("--sf-focus-ring-offset",`${ua}px`),onReset:()=>e.onReset("--sf-focus-ring-offset")})}var qt=r(lt,2),jt=r(s(qt),2);{let Wt=u(()=>"--sf-focus-ring-color"in e.overrides);Qa(jt,{token:"--sf-focus-ring-color",get value(){return t(F)},placeholder:"default (action)",get isOverridden(){return t(Wt)},onSet:ua=>e.onSet("--sf-focus-ring-color",ua),onReset:()=>e.onReset("--sf-focus-ring-color")})}var Dt=r(qt,2),Vt=s(Dt);_(()=>ct(Vt,`outline: ${t(D)}px solid ${t(F)||"oklch(0.7 0.2 235)"}; outline-offset: ${t(R)}px`)),f(Ze,It)};L(ke,Ze=>{t(b)&&Ze(Ce)})}var Ve=r(fe,6),Ke=s(Ve),U=r(s(Ke),2),W=s(U),oe=r(Ke,2);{var Ee=Ze=>{var It=lv();ae(It,21,()=>i,ot=>ot.name,(ot,lt)=>{{let qt=u(()=>be(t(lt))),jt=u(()=>t(lt).name in e.overrides);xt(ot,{get label(){return t(lt).step},get value(){return t(qt)},min:0,get max(){return t(lt).max},get step(){return t(lt).step_size},unit:"px",get overridden(){return t(jt)},onChange:Dt=>e.onSet(t(lt).name,`${Dt}px`),onReset:()=>e.onReset(t(lt).name),get rawDefault(){return t(lt).rawDefault},get currentRaw(){return e.overrides[t(lt).name]},onRawSet:Dt=>e.onSet(t(lt).name,Dt)})}}),f(Ze,It)};L(oe,Ze=>{t(E)&&Ze(Ee)})}var Le=r(Ve,2),mt=s(Le),He=r(s(mt),2),dt=s(He),nt=r(mt,2);{var ht=Ze=>{var It=cv(),ot=s(It);ae(ot,20,()=>n,lt=>lt,(lt,qt)=>{const jt=u(()=>l[qt]??6),Dt=u(()=>qt==="full"?9999:t(jt)*t(B));var Vt=iv(),Wt=s(Vt),ua=r(Wt,2),Ua=s(ua);_(Pa=>{ct(Wt,Pa),y(Ua,qt)},[()=>`border-radius: ${Math.min(t(Dt),9999)}px`]),f(lt,Vt)}),f(Ze,It)};L(nt,Ze=>{t(S)&&Ze(ht)})}var Ne=r(Le,4),At=s(Ne),Ft=r(s(At),2),aa=s(Ft),Mt=r(At,2);{var Rt=Ze=>{var It=dv();ae(It,21,()=>c,ot=>ot.token,(ot,lt)=>{{let qt=u(()=>ze(t(lt))),jt=u(()=>t(lt).token in e.overrides);xt(ot,{get label(){return t(lt).label},get value(){return t(qt)},get min(){return t(lt).min},get max(){return t(lt).max},get step(){return t(lt).step},get unit(){return t(lt).unit},get help(){return t(lt).help},get overridden(){return t(jt)},onChange:Dt=>e.onSet(t(lt).token,`${Dt}${t(lt).unit}`),onReset:()=>e.onReset(t(lt).token),get rawDefault(){return t(lt).rawDefault},get currentRaw(){return e.overrides[t(lt).token]},onRawSet:Dt=>e.onSet(t(lt).token,Dt)})}}),f(Ze,It)};L(Mt,Ze=>{t(I)&&Ze(Rt)})}var na=r(Ne,4),da=s(na),fa=r(s(da),2),we=s(fa),kt=r(da,2);{var Tt=Ze=>{var It=fv();ae(It,21,()=>d,ot=>ot.name,(ot,lt)=>{Ko(ot,{get knob(){return t(lt)},get overrides(){return e.overrides},onChange:(qt,jt)=>jt===null?e.onReset(qt):e.onSet(qt,jt)})}),f(Ze,It)};L(kt,Ze=>{t(k)&&Ze(Tt)})}_(()=>{ee(ue,"aria-expanded",t(p)),y(ne,t(p)?"▲":"▼"),ee(G,"aria-expanded",t(m)),y(se,t(m)?"▲":"▼"),ee(ve,"aria-expanded",t(h)),y(Ie,t(h)?"▲":"▼"),ee(tt,"aria-expanded",t(v)),y(gt,t(v)?"▲":"▼"),ee(T,"aria-expanded",t(b)),y(le,t(b)?"▲":"▼"),ee(Ke,"aria-expanded",t(E)),y(W,t(E)?"▲":"▼"),ee(mt,"aria-expanded",t(S)),y(dt,t(S)?"▲":"▼"),ee(At,"aria-expanded",t(I)),y(aa,t(I)?"▲":"▼"),ee(da,"aria-expanded",t(k)),y(we,t(k)?"▲":"▼")}),x("click",ue,()=>{w(p,!t(p))}),x("click",G,()=>{w(m,!t(m))}),x("click",ve,()=>{w(h,!t(h))}),x("click",tt,()=>{w(v,!t(v))}),x("click",T,()=>{w(b,!t(b))}),x("click",Ke,()=>{w(E,!t(E))}),x("click",mt,()=>{w(S,!t(S))}),x("click",At,()=>{w(I,!t(I))}),x("click",da,()=>{w(k,!t(k))}),f(a,Me),ta()}oa(["click"]);var mv=g('
'),vv=g('
Shadow color

Warm, cool or brand-tinted shadows. Default uses neutral hue.

'),hv=g('
Glow color

Which brand color radiates the glow. Defaults to primary.

'),gv=g('

Glow disabled.

'),bv=g('
Shadow glow
Ambient glow on elevated surfaces
',1),yv=g('
'),xv=g('
');function kv(a,e){ea(e,!0);const o=["xs","s","m","l","xl","2xl"],n=Vo.shadows??[];let l=u(()=>(()=>{const ye=parseFloat(e.overrides["--sf-shadow-lightness"]??"0.15");return isFinite(ye)?ye:.15})()),i=u(()=>e.overrides["--sf-shadow-color"]??""),c=u(()=>e.overrides["--sf-shadow-glow-color"]??""),d=u(()=>e.overrides["--sf-shadow-glow"]==="none"),p=K(!1),m=K(!1),h=K(!1);var v=xv(),b=s(v);ae(b,22,()=>o,ye=>ye,(ye,ue,X)=>{var ne=mv(),_e=s(ne),Ae=r(_e,2),j=s(Ae);_(()=>{ct(_e,`width: ${40+t(X)*4}px; height: ${40+t(X)*4}px; box-shadow: var(--sf-shadow-${ue})`),y(j,ue)}),f(ye,ne)});var k=r(b,4);{let ye=u(()=>"--sf-shadow-lightness"in e.overrides);xt(k,{label:"Shadow lightness",get value(){return t(l)},min:0,max:.5,step:.01,help:"--sf-shadow-lightness — OKLCH lightness of the shadow color. Lower = darker, more visible shadows.",get overridden(){return t(ye)},onChange:ue=>e.onSet("--sf-shadow-lightness",String(ue)),onReset:()=>e.onReset("--sf-shadow-lightness")})}var S=r(k,4),E=s(S),I=r(s(E),2),P=s(I),B=r(E,2);{var H=ye=>{var ue=vv(),X=r(s(ue),2);{let ne=u(()=>"--sf-shadow-color"in e.overrides);Qa(X,{token:"--sf-shadow-color",get value(){return t(i)},placeholder:"auto (neutral hue)",get isOverridden(){return t(ne)},onSet:_e=>e.onSet("--sf-shadow-color",_e),onReset:()=>e.onReset("--sf-shadow-color")})}f(ye,ue)};L(B,ye=>{t(p)&&ye(H)})}var D=r(S,4),R=s(D),C=r(s(R),2),A=s(C),q=r(R,2);{var O=ye=>{var ue=bv(),X=ce(ue),ne=r(s(X),2),_e=s(ne),Ae=r(X,2);{var j=de=>{var ge=hv(),ve=r(s(ge),2);{let re=u(()=>"--sf-shadow-glow-color"in e.overrides);Qa(ve,{token:"--sf-shadow-glow-color",get value(){return t(c)},placeholder:"default (primary color)",get isOverridden(){return t(re)},onSet:Ie=>e.onSet("--sf-shadow-glow-color",Ie),onReset:()=>e.onReset("--sf-shadow-glow-color")})}f(de,ge)};L(Ae,de=>{t(d)||de(j)})}var G=r(Ae,2),Z=s(G),se=r(G,2);{var Y=de=>{var ge=gv();f(de,ge)};L(se,de=>{t(d)&&de(Y)})}_(()=>{ee(ne,"aria-label",t(d)?"Enable shadow glow":"Disable shadow glow"),Xe(ne,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${t(d)?"bg-white/10":"bg-indigo-600"}`),Xe(_e,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${t(d)?"translate-x-0.5":"translate-x-4"}`),ct(Z,`box-shadow: ${t(d)?"none":"var(--sf-shadow-glow)"}`)}),x("click",ne,()=>{t(d)?e.onReset("--sf-shadow-glow"):e.onSet("--sf-shadow-glow","none")}),f(ye,ue)};L(q,ye=>{t(m)&&ye(O)})}var F=r(D,4),M=s(F),J=r(s(M),2),be=s(J),ze=r(M,2);{var Me=ye=>{var ue=yv();ae(ue,21,()=>n,X=>X.name,(X,ne)=>{Ko(X,{get knob(){return t(ne)},get overrides(){return e.overrides},onChange:(_e,Ae)=>Ae===null?e.onReset(_e):e.onSet(_e,Ae)})}),f(ye,ue)};L(ze,ye=>{t(h)&&ye(Me)})}_(()=>{ee(E,"aria-expanded",t(p)),y(P,t(p)?"▲":"▼"),ee(R,"aria-expanded",t(m)),y(A,t(m)?"▲":"▼"),ee(M,"aria-expanded",t(h)),y(be,t(h)?"▲":"▼")}),x("click",E,()=>{w(p,!t(p))}),x("click",R,()=>{w(m,!t(m))}),x("click",M,()=>{w(h,!t(h))}),f(a,v),ta()}oa(["click"]);var wv=g('

Motion is disabled — duration & easing have no effect while scale is 0.

'),nl=g(''),_v=g('(No effect while motion is disabled.)'),Cv=g('
'),Ov=g('

Named duration tokens. Drag to set an absolute ms value, overriding the global scale.

',1),Sv=g(''),Lv=g('
'),Pv=g('

Edit the named easing tokens. Accepts any CSS timing function — cubic-bezier(…) or linear(…). Use “Live preview” above to feel a curve.

',1),Iv=g(''),Bv=g('
'),Uv=g('

One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).

Stagger base
',1),Av=g(''),zv=g('
'),Ev=g('

Default animation-range for scroll-driven animations using the .sf-scroll-timeline utility.

',1),Rv=g('
Disable motion
Respects prefers-reduced-motion
Live preview
');function Tv(a,e){ea(e,!0);const o=[{label:"Instant",token:"--sf-duration-instant",base:100,max:300},{label:"Fast",token:"--sf-duration-fast",base:150,max:500},{label:"Normal",token:"--sf-duration-normal",base:250,max:800},{label:"Slow",token:"--sf-duration-slow",base:400,max:1200},{label:"Slower",token:"--sf-duration-slower",base:600,max:2e3}],n=[{label:"Linear",token:"--sf-ease-linear",value:"linear",preview:"M0,40 L40,0"},{label:"Ease out",token:"--sf-ease-out",value:"cubic-bezier(0.25, 0, 0.15, 1)",preview:"M0,40 C8,40 28,0 40,0"},{label:"Ease in",token:"--sf-ease-in",value:"cubic-bezier(0.5, 0, 0.75, 0.25)",preview:"M0,40 C12,40 32,32 40,0"},{label:"Ease in-out",token:"--sf-ease-in-out",value:"cubic-bezier(0.4, 0, 0.2, 1)",preview:"M0,40 C8,40 32,0 40,0"},{label:"Spring",token:"--sf-ease-spring",value:"linear(0, 0.5, 1.1, 0.95, 1.02, 1)",preview:"M0,40 C10,20 20,-4 28,-2 S38,2 40,0"},{label:"Bounce",token:"--sf-ease-bounce",value:"linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)",preview:"M0,40 L12,16 L20,0 L26,6 L32,-1 L36,1 L40,0"},{label:"Elastic",token:"--sf-ease-elastic",value:"linear(0, 0.3, 1.2, 0.9, 1.05, 1)",preview:"M0,40 C8,40 16,-10 24,-2 S36,2 40,0"},{label:"Overshoot",token:"--sf-ease-overshoot",value:"linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)",preview:"M0,40 C8,40 20,-10 40,0"}],l=["--sf-animation-delay-1","--sf-animation-delay-2","--sf-animation-delay-3","--sf-animation-delay-4","--sf-animation-delay-5"],i=Vo.motion??[];let c=u(()=>(()=>{const U=parseFloat(e.overrides["--sf-motion-scale"]??"1");return isFinite(U)?U:1})()),d=u(()=>e.overrides["--sf-motion-scale"]==="0"),p=u(()=>(()=>{const U=parseFloat(e.overrides["--sf-theme-transition-duration"]?.replace("ms","")??String(300*t(c)));return isFinite(U)?U:Math.round(300*t(c))})()),m=u(()=>{const U=e.overrides[l[0]];return U?parseFloat(U.replace("ms","")):75*t(c)}),h=K(!1),v=K(0),b=K("--sf-ease-out"),k=K("--sf-duration-normal"),S=K(!1),E=K(!1),I=K(!1),P=K(!1);function B(U,W){const oe=e.overrides[U];if(oe){const Ee=parseFloat(oe);if(isFinite(Ee))return Ee}return Math.round(W*t(c))}function H(U){return e.overrides[U]??n.find(W=>W.token===U)?.value??"ease"}function D(){if(t(h))return;const U=o.find(oe=>oe.token===t(k))?.base??250,W=B(t(k),U);w(h,!0),w(v,180),setTimeout(()=>{w(v,0),setTimeout(()=>{w(h,!1)},W)},W)}function R(U){const W={};for(let oe=1;oe<=5;oe++)W[`--sf-animation-delay-${oe}`]=`${Math.round(U*oe)}ms`;e.onBulkChange(W)}function C(){const U={};for(let W=1;W<=5;W++)U[`--sf-animation-delay-${W}`]=null;e.onBulkChange(U)}var A=Rv(),q=s(A),O=r(s(q),2),F=s(O),M=r(q,2);{var J=U=>{var W=wv();f(U,W)};L(M,U=>{t(d)&&U(J)})}var be=r(M,2),ze=r(s(be),2),Me=s(ze),ye=s(Me),ue=r(Me,2),X=s(ue);ae(X,21,()=>n,U=>U.token,(U,W)=>{var oe=nl(),Ee=s(oe),Le={};_(()=>{y(Ee,t(W).label),Le!==(Le=t(W).token)&&(oe.value=(oe.__value=t(W).token)??"")}),f(U,oe)});var ne;Na(X);var _e=r(X,2);ae(_e,21,()=>o,U=>U.token,(U,W)=>{var oe=nl(),Ee=s(oe),Le={};_(()=>{y(Ee,t(W).label),Le!==(Le=t(W).token)&&(oe.value=(oe.__value=t(W).token)??"")}),f(U,oe)});var Ae;Na(_e);var j=r(_e,2),G=s(j),Z=r(be,4),se=s(Z),Y=r(s(se),2),de=s(Y),ge=r(se,2);{var ve=U=>{var W=Ov(),oe=ce(W),Ee=r(s(oe));{var Le=dt=>{var nt=_v();f(dt,nt)};L(Ee,dt=>{t(d)&&dt(Le)})}var mt=r(oe,2);ae(mt,17,()=>o,dt=>dt.token,(dt,nt)=>{const ht=u(()=>B(t(nt).token,t(nt).base));{let Ne=u(()=>t(nt).token in e.overrides);xt(dt,{get label(){return t(nt).label},get value(){return t(ht)},min:0,get max(){return t(nt).max},step:10,unit:"ms",get overridden(){return t(Ne)},onChange:At=>e.onSet(t(nt).token,`${At}ms`),onReset:()=>e.onReset(t(nt).token)})}});var He=r(mt,2);ae(He,21,()=>o,dt=>dt.label,(dt,nt)=>{const ht=u(()=>B(t(nt).token,t(nt).base));var Ne=Cv(),At=s(Ne),Ft=s(At),aa=r(At,2),Mt=s(aa),Rt=r(aa,2),na=s(Rt);_(da=>{y(Ft,t(nt).label),ct(Mt,da),y(na,`${t(ht)??""}ms`)},[()=>`width: ${Math.min(t(ht)/1200*100,100)}%`]),f(dt,Ne)}),f(U,W)};L(ge,U=>{t(S)&&U(ve)})}var re=r(Z,4),Ie=s(re),qe=r(s(Ie),2),rt=s(qe),et=r(Ie,2);{var tt=U=>{var W=Pv(),oe=r(ce(W),2);ae(oe,21,()=>n,Ee=>Ee.token,(Ee,Le)=>{const mt=u(()=>t(Le).token in e.overrides);var He=Lv(),dt=s(He),nt=s(dt),ht=s(nt),Ne=r(nt,2),At=s(Ne),Ft=s(At),aa=s(Ft),Mt=r(Ft,2),Rt=s(Mt),na=r(Rt,2);{var da=we=>{var kt=Sv();x("click",kt,()=>e.onReset(t(Le).token)),f(we,kt)};L(na,we=>{t(mt)&&we(da)})}var fa=r(At,2);_(()=>{Xe(He,1,`p-2.5 rounded-xl border transition-all ${t(mt)?"bg-indigo-500/10 border-indigo-500/30":"border-white/8 bg-white/3"}`),ee(ht,"d",t(Le).preview),y(aa,t(Le).label),Jt(fa,e.overrides[t(Le).token]??""),ee(fa,"placeholder",t(Le).value)}),x("click",Rt,()=>{w(b,t(Le).token,!0),D()}),x("input",fa,we=>{const kt=we.target.value.trim();kt?e.onSet(t(Le).token,kt):e.onReset(t(Le).token)}),f(Ee,He)}),f(U,W)};L(et,U=>{t(E)&&U(tt)})}var vt=r(re,4),gt=s(vt),Ot=r(s(gt),2),_t=s(Ot),fe=r(gt,2);{var T=U=>{var W=Uv(),oe=r(ce(W),2),Ee=s(oe),Le=r(s(Ee),2);{var mt=ht=>{var Ne=Iv();x("click",Ne,C),f(ht,Ne)},He=u(()=>l.some(ht=>ht in e.overrides));L(Le,ht=>{t(He)&&ht(mt)})}var dt=r(Ee,2);{let ht=u(()=>Math.round(t(m))),Ne=u(()=>l.some(At=>At in e.overrides));xt(dt,{label:"",get value(){return t(ht)},min:0,max:200,step:5,unit:"ms",help:"Base unit for --sf-animation-delay-1 through -5",get overridden(){return t(Ne)},onChange:At=>R(At),onReset:C})}var nt=r(oe,2);ae(nt,20,()=>[1,2,3,4,5],ht=>ht,(ht,Ne)=>{const At=u(()=>Math.round(t(m)*Ne));var Ft=Bv(),aa=s(Ft),Mt=s(aa),Rt=r(aa,2),na=s(Rt),da=r(Rt,2),fa=s(da);_(we=>{y(Mt,`–${Ne??""}`),ct(na,we),y(fa,`${t(At)??""}ms`)},[()=>`width: ${Math.min(t(At)/600*100,100)}%`]),f(ht,Ft)}),f(U,W)};L(fe,U=>{t(I)&&U(T)})}var Q=r(vt,4),le=s(Q),ke=r(s(le),2),Ce=s(ke),Ve=r(le,2);{var Ke=U=>{var W=Ev(),oe=ce(W);ae(oe,21,()=>i,He=>He.name,(He,dt)=>{Ko(He,{get knob(){return t(dt)},get overrides(){return e.overrides},onChange:(nt,ht)=>ht===null?e.onReset(nt):e.onSet(nt,ht)})});var Ee=r(oe,2);{let He=u(()=>"--sf-theme-transition-duration"in e.overrides);xt(Ee,{label:"Theme switch speed",get value(){return t(p)},min:0,max:600,step:10,unit:"ms",help:"--sf-theme-transition-duration — dark/light color-scheme switch animation speed",get overridden(){return t(He)},onChange:dt=>e.onSet("--sf-theme-transition-duration",`${dt}ms`),onReset:()=>e.onReset("--sf-theme-transition-duration")})}var Le=r(Ee,2),mt=r(s(Le),2);ae(mt,16,()=>[{label:"Range start",token:"--sf-scroll-timeline-range-start",placeholder:"entry 0%"},{label:"Range end",token:"--sf-scroll-timeline-range-end",placeholder:"cover 30%"}],He=>He.token,(He,dt)=>{var nt=zv(),ht=s(nt),Ne=s(ht),At=r(ht,2),Ft=r(At,2);{var aa=Mt=>{var Rt=Av();x("click",Rt,()=>e.onReset(dt.token)),f(Mt,Rt)};L(Ft,Mt=>{dt.token in e.overrides&&Mt(aa)})}_(()=>{y(Ne,dt.label),Jt(At,e.overrides[dt.token]??""),ee(At,"placeholder",dt.placeholder)}),x("input",At,Mt=>{const Rt=Mt.target.value.trim();Rt?e.onSet(dt.token,Rt):e.onReset(dt.token)}),f(He,nt)}),f(U,W)};L(Ve,U=>{t(P)&&U(Ke)})}_(U=>{ee(O,"title",t(d)?"Enable motion":"Disable motion"),Xe(O,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${t(d)?"bg-indigo-600":"bg-white/10"}`),Xe(F,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${t(d)?"translate-x-4":"translate-x-0.5"}`),ct(ye,U),ne!==(ne=t(b))&&(X.value=(X.__value=t(b))??"",Ia(X,t(b))),Ae!==(Ae=t(k))&&(_e.value=(_e.__value=t(k))??"",Ia(_e,t(k))),j.disabled=t(h),y(G,t(h)?"…":"▶ Play"),ee(se,"aria-expanded",t(S)),y(de,t(S)?"▲":"▼"),ee(Ie,"aria-expanded",t(E)),y(rt,t(E)?"▲":"▼"),ee(gt,"aria-expanded",t(I)),y(_t,t(I)?"▲":"▼"),ee(le,"aria-expanded",t(P)),y(Ce,t(P)?"▲":"▼")},[()=>`transform: translateX(${t(v)}px); transition: transform ${B(t(k),o.find(U=>U.token===t(k))?.base??250)}ms ${H(t(b))}`]),x("click",O,()=>{t(d)?e.onReset("--sf-motion-scale"):e.onSet("--sf-motion-scale","0")}),x("change",X,U=>{w(b,U.target.value,!0)}),x("change",_e,U=>{w(k,U.target.value,!0)}),x("click",j,D),x("click",se,()=>{w(S,!t(S))}),x("click",Ie,()=>{w(E,!t(E))}),x("click",gt,()=>{w(I,!t(I))}),x("click",le,()=>{w(P,!t(P))}),f(a,A),ta()}oa(["click","change","input"]);var Dv=g("
"),Mv=g('
',1),Nv=g('
'),Fv=g('
',1),jv=g(""),Gv=g('

Gradient overlay for hero images and media content. Used by the .sf-scrim macro.

Color
Direction
Scrim preview
',1),Hv=g('
'),qv=g('
Scrollbar preview
',1),Vv=g(''),Kv=g('
'),Wv=g(`

Controls text legibility over images. Applied via text-shadow: var(--sf-text-shadow-m). + Edit each token directly — use none to disable.

`,1),Yv=g('
');function Zv(a,e){ea(e,!0);const o=[{label:"To top",value:"to top"},{label:"To bottom",value:"to bottom"},{label:"To left",value:"to left"},{label:"To right",value:"to right"}],n=[{label:"Small",token:"--sf-text-shadow-s",default:"0 1px 2px oklch(…)"},{label:"Medium",token:"--sf-text-shadow-m",default:"0 2px 4px oklch(…)"},{label:"Large",token:"--sf-text-shadow-l",default:"0 4px 8px oklch(…)"}];function l(T,Q,le){if(!T)return Q;const ke=parseFloat(le?T.replace(le,""):T);return isNaN(ke)?Q:ke}let i=u(()=>l(e.overrides["--sf-blur"],12,"px")),c=u(()=>l(e.overrides["--sf-opacity-muted"],.5)),d=u(()=>l(e.overrides["--sf-opacity-disabled"],.45)),p=u(()=>e.overrides["--sf-scrim-direction"]??"to top"),m=u(()=>e.overrides["--sf-scrim-color"]??""),h=u(()=>l(e.overrides["--sf-scroll-shadow-size"]?.replace("rem",""),2)),v=u(()=>l(e.overrides["--sf-state-pending-opacity"],.7)),b=u(()=>e.overrides["--sf-scrollbar-thumb"]??""),k=u(()=>e.overrides["--sf-scrollbar-track"]??""),S=K(!1),E=K(!1),I=K(!1),P=K(!1),B=K(!1),H=K(!1);var D=Yv(),R=s(D),C=s(R),A=r(s(C),2),q=s(A),O=r(C,2);{var F=T=>{var Q=Mv(),le=ce(Q);{let W=u(()=>"--sf-blur"in e.overrides);xt(le,{label:"Blur radius",get value(){return t(i)},min:0,max:48,step:1,unit:"px",help:"--sf-blur — used for frosted glass, modals, tooltips",get overridden(){return t(W)},onChange:oe=>e.onSet("--sf-blur",`${oe}px`),onReset:()=>e.onReset("--sf-blur")})}var ke=r(le,2),Ce=s(ke);ae(Ce,20,()=>Array.from({length:12}),hn,(W,oe,Ee)=>{var Le=Dv();Xe(Le,1,mo(Ee%3===0?"bg-indigo-500/50":Ee%3===1?"bg-purple-500/40":"bg-blue-500/30")),f(W,Le)});var Ve=r(Ce,2),Ke=s(Ve),U=s(Ke);_(()=>{ct(Ve,`backdrop-filter: blur(${t(i)}px)`),y(U,`${t(i)??""}px`)}),f(T,Q)};L(O,T=>{t(S)&&T(F)})}var M=r(R,4),J=s(M),be=r(s(J),2),ze=s(be),Me=r(J,2);{var ye=T=>{var Q=Fv(),le=ce(Q);{let Ke=u(()=>"--sf-opacity-muted"in e.overrides);xt(le,{label:"Muted opacity",get value(){return t(c)},min:0,max:1,step:.05,help:"--sf-opacity-muted — secondary text, icons, and placeholder content",get overridden(){return t(Ke)},onChange:U=>e.onSet("--sf-opacity-muted",String(U)),onReset:()=>e.onReset("--sf-opacity-muted")})}var ke=r(le,2);{let Ke=u(()=>"--sf-opacity-disabled"in e.overrides);xt(ke,{label:"Disabled opacity",get value(){return t(d)},min:0,max:1,step:.05,help:"--sf-opacity-disabled — disabled form controls and interactive elements",get overridden(){return t(Ke)},onChange:U=>e.onSet("--sf-opacity-disabled",String(U)),onReset:()=>e.onReset("--sf-opacity-disabled")})}var Ce=r(ke,2);{let Ke=u(()=>"--sf-state-pending-opacity"in e.overrides);xt(Ce,{label:"Pending opacity",get value(){return t(v)},min:.1,max:1,step:.05,help:"--sf-state-pending-opacity — opacity of elements in loading/pending state",get overridden(){return t(Ke)},onChange:U=>e.onSet("--sf-state-pending-opacity",String(U)),onReset:()=>e.onReset("--sf-state-pending-opacity")})}var Ve=r(Ce,2);ae(Ve,21,()=>[{label:"muted",val:t(c)},{label:"disabled",val:t(d)},{label:"pending",val:t(v)}],Ke=>Ke.label,(Ke,U)=>{var W=Nv(),oe=s(W),Ee=s(oe),Le=r(oe,2),mt=r(Le,2),He=s(mt);_(()=>{y(Ee,t(U).label),ct(Le,`opacity: ${t(U).val}`),y(He,t(U).val)}),f(Ke,W)}),f(T,Q)};L(Me,T=>{t(E)&&T(ye)})}var ue=r(M,4),X=s(ue),ne=r(s(X),2),_e=s(ne),Ae=r(X,2);{var j=T=>{var Q=Gv(),le=r(ce(Q),2),ke=r(s(le),2);{let oe=u(()=>"--sf-scrim-color"in e.overrides);Qa(ke,{token:"--sf-scrim-color",get value(){return t(m)},placeholder:"default (base color)",get isOverridden(){return t(oe)},onSet:Ee=>e.onSet("--sf-scrim-color",Ee),onReset:()=>e.onReset("--sf-scrim-color")})}var Ce=r(le,2),Ve=r(s(Ce),2);ae(Ve,21,()=>o,oe=>oe.value,(oe,Ee)=>{var Le=jv(),mt=s(Le);_(()=>{Xe(Le,1,`py-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${t(p)===t(Ee).value?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(mt,t(Ee).label)}),x("click",Le,()=>t(Ee).value==="to top"?e.onReset("--sf-scrim-direction"):e.onSet("--sf-scrim-direction",t(Ee).value)),f(oe,Le)});var Ke=r(Ce,2),U=s(Ke),W=s(U);_(()=>ct(W,`background: linear-gradient(${t(p)}, ${t(m)||"oklch(0 0 0 / 0.6)"}, transparent)`)),f(T,Q)};L(Ae,T=>{t(I)&&T(j)})}var G=r(ue,4),Z=s(G),se=r(s(Z),2),Y=s(se),de=r(Z,2);{var ge=T=>{var Q=qv(),le=ce(Q);ae(le,17,()=>[{label:"Thumb color",token:"--sf-scrollbar-thumb",val:t(b)},{label:"Track color",token:"--sf-scrollbar-track",val:t(k)}],W=>W.token,(W,oe)=>{var Ee=Hv(),Le=s(Ee),mt=s(Le),He=r(Le,2);{let dt=u(()=>t(oe).token in e.overrides);Qa(He,{get token(){return t(oe).token},get value(){return t(oe).val},placeholder:"default",get isOverridden(){return t(dt)},onSet:nt=>e.onSet(t(oe).token,nt),onReset:()=>e.onReset(t(oe).token)})}_(()=>y(mt,t(oe).label)),f(W,Ee)});var ke=r(le,2),Ce=s(ke);let Ve;var Ke=s(Ce);let U;_(()=>{Ve=ct(Ce,"",Ve,{background:t(k)||"rgba(255,255,255,0.08)"}),U=ct(Ke,"",U,{background:t(b)||"oklch(0.52 0.025 260)"})}),f(T,Q)};L(de,T=>{t(P)&&T(ge)})}var ve=r(G,4),re=s(ve),Ie=r(s(re),2),qe=s(Ie),rt=r(re,2);{var et=T=>{{let Q=u(()=>"--sf-scroll-shadow-size"in e.overrides);xt(T,{label:"Shadow size",get value(){return t(h)},min:0,max:6,step:.25,unit:"rem",help:"--sf-scroll-shadow-size — gradient edge mask on .sf-scroll-shadow elements",get overridden(){return t(Q)},onChange:le=>e.onSet("--sf-scroll-shadow-size",`${le}rem`),onReset:()=>e.onReset("--sf-scroll-shadow-size")})}};L(rt,T=>{t(B)&&T(et)})}var tt=r(ve,4),vt=s(tt),gt=r(s(vt),2),Ot=s(gt),_t=r(vt,2);{var fe=T=>{var Q=Wv(),le=r(ce(Q),2);ae(le,21,()=>n,ke=>ke.token,(ke,Ce)=>{var Ve=Kv(),Ke=s(Ve),U=s(Ke),W=r(Ke,2),oe=r(W,2);{var Ee=Le=>{var mt=Vv();x("click",mt,()=>e.onReset(t(Ce).token)),f(Le,mt)};L(oe,Le=>{t(Ce).token in e.overrides&&Le(Ee)})}_(()=>{y(U,t(Ce).label),Jt(W,e.overrides[t(Ce).token]??""),ee(W,"placeholder",t(Ce).default)}),x("input",W,Le=>{const He=Le.target.value.trim();He?e.onSet(t(Ce).token,He):e.onReset(t(Ce).token)}),f(ke,Ve)}),f(T,Q)};L(_t,T=>{t(H)&&T(fe)})}_(()=>{ee(C,"aria-expanded",t(S)),y(q,t(S)?"▲":"▼"),ee(J,"aria-expanded",t(E)),y(ze,t(E)?"▲":"▼"),ee(X,"aria-expanded",t(I)),y(_e,t(I)?"▲":"▼"),ee(Z,"aria-expanded",t(P)),y(Y,t(P)?"▲":"▼"),ee(re,"aria-expanded",t(B)),y(qe,t(B)?"▲":"▼"),ee(vt,"aria-expanded",t(H)),y(Ot,t(H)?"▲":"▼")}),x("click",C,()=>{w(S,!t(S))}),x("click",J,()=>{w(E,!t(E))}),x("click",X,()=>{w(I,!t(I))}),x("click",Z,()=>{w(P,!t(P))}),x("click",re,()=>{w(B,!t(B))}),x("click",vt,()=>{w(H,!t(H))}),f(a,D),ta()}oa(["click","input"]);var Xv=g('
'),Jv=g('
',1),Qv=g(`

SLASHED is a token-first CSS framework. This sample paragraph repeats so you can see exactly how many lines survive the clamp before the ellipsis kicks in. Drag the slider above and watch the visible line count change in real time. - Extra filler text keeps the block taller than the clamp at every setting.

`,1),nl=g(""),$v=g('

--sf-aspect — default ratio for .sf-aspect / .sf-frame

',1),eh=g('
',1),qs=g(''),th=g('

--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim

Color
Direction
Caption over scrim
Text shadow
',1),ah=g('

Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.

Marker color
',1),oh=g('

--sf-content-intrinsic-size — placeholder size used with content-visibility: auto to improve scroll performance on tall pages.

Intrinsic size
',1),sh=g(`

Tokens for the framework's utility macros — .sf-prose, .sf-flow, .sf-line-clamp, .sf-aspect, .sf-scroll-shadow and .sf-scrim.

All tokens tab — edit every prose, scrim and surface token directly.

`);function rh(a,e){ea(e,!0);function o(U,W,se){const Oe=e.overrides[U];if(!Oe)return W;const Ce=parseFloat(se?Oe.replace(se,""):Oe);return isNaN(Ce)?W:Ce}const n=[{label:"16 / 9",value:"16 / 9"},{label:"4 / 3",value:"4 / 3"},{label:"3 / 2",value:"3 / 2"},{label:"1 / 1",value:"1 / 1"},{label:"21 / 9",value:"21 / 9"},{label:"9 / 16",value:"9 / 16"}],l=[{label:"↑ top",value:"to top"},{label:"↓ bottom",value:"to bottom"},{label:"← left",value:"to left"},{label:"→ right",value:"to right"},{label:"↗ top-right",value:"to top right"},{label:"↖ top-left",value:"to top left"}],i=[{label:"Heading gap",token:"--sf-prose-heading-gap",def:.75,max:3,raw:"var(--sf-space-s)"},{label:"List gap",token:"--sf-prose-list-gap",def:.5,max:2,raw:"var(--sf-space-xs)"},{label:"Block margin",token:"--sf-prose-block-margin",def:1,max:4,raw:"var(--sf-space-m)"},{label:"Media margin",token:"--sf-prose-media-margin",def:1,max:4,raw:"var(--sf-space-m)"},{label:"Figure margin",token:"--sf-prose-figure-margin",def:1.5,max:4,raw:"var(--sf-space-l)"},{label:"Blockquote padding",token:"--sf-prose-blockquote-padding",def:1,max:3,raw:"var(--sf-space-m)"},{label:"HR margin",token:"--sf-prose-hr-margin",def:1.5,max:4,raw:"var(--sf-space-l)"}];let c=K(!1),f=K(!1),p=K(!1),m=K(!1),h=K(!1),v=K(!1),b=K(!1),k=u(()=>o("--sf-line-clamp",3)),S=u(()=>o("--sf-flow-space",.5,"rem")),E=u(()=>o("--sf-scroll-shadow-size",2,"rem")),P=u(()=>e.overrides["--sf-aspect"]??"16 / 9"),B=u(()=>e.overrides["--sf-scrim-color"]??"oklch(0 0 0 / 0.55)"),I=u(()=>e.overrides["--sf-scrim-direction"]??"to top"),H=u(()=>o("--sf-prose-media-radius",6,"px"));function T(U){const W=e.overrides[U.token];if(!W)return U.def;const se=parseFloat(W);return isNaN(se)?U.def:se}var R=sh(),w=r(s(R),2),A=s(w),j=r(s(A),2),O=s(j),F=r(A,2);{var D=U=>{var W=Jv(),se=ce(W);{let Ce=u(()=>"--sf-flow-space"in e.overrides);xt(se,{label:"Flow space",get value(){return t(S)},min:0,max:4,step:.0625,unit:"rem",help:"--sf-flow-space — vertical gap between adjacent children of .sf-flow",get overridden(){return t(Ce)},onChange:vt=>e.onSet("--sf-flow-space",`${vt}rem`),onReset:()=>e.onReset("--sf-flow-space"),rawDefault:"var(--sf-content-gap)",get currentRaw(){return e.overrides["--sf-flow-space"]},onRawSet:vt=>e.onSet("--sf-flow-space",vt)})}var Oe=r(se,2);oe(Oe,20,()=>[0,1,2],Ce=>Ce,(Ce,vt)=>{var He=Xv();C(()=>it(He,`width:${90-vt*12}%`)),d(Ce,He)}),C(()=>it(Oe,`display:flex;flex-direction:column;gap:${t(S)}rem`)),d(U,W)};L(F,U=>{t(c)&&U(D)})}var J=r(w,4),ye=s(J),Ae=r(s(ye),2),Te=s(Ae),xe=r(ye,2);{var pe=U=>{var W=Qv(),se=ce(W);{let vt=u(()=>"--sf-line-clamp"in e.overrides);xt(se,{label:"Default lines",get value(){return t(k)},min:1,max:8,step:1,help:"--sf-line-clamp — default line count for .sf-line-clamp (override per element)",get overridden(){return t(vt)},onChange:He=>e.onSet("--sf-line-clamp",String(He)),onReset:()=>e.onReset("--sf-line-clamp")})}var Oe=r(se,2),Ce=s(Oe);C(()=>it(Ce,`display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${t(k)};overflow:hidden`)),d(U,W)};L(xe,U=>{t(f)&&U(pe)})}var Q=r(J,4),le=s(Q),we=r(s(le),2),ze=s(we),N=r(le,2);{var G=U=>{var W=$v(),se=r(ce(W),2);oe(se,21,()=>n,He=>He.value,(He,ct)=>{var rt=nl(),ht=s(rt);C(Me=>{Ye(rt,1,Me),y(ht,t(ct).label)},[()=>`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(P).replace(/\s/g,"")===t(ct).value.replace(/\s/g,"")?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`]),x("click",rt,()=>t(ct).value==="16 / 9"?e.onReset("--sf-aspect"):e.onSet("--sf-aspect",t(ct).value)),d(He,rt)});var Oe=r(se,2),Ce=s(Oe),vt=s(Ce);C(()=>{it(Ce,`aspect-ratio:${t(P)};max-height:120px;max-width:100%;width:auto;height:120px`),y(vt,t(P))}),d(U,W)};L(N,U=>{t(p)&&U(G)})}var Z=r(Q,4),re=s(Z),Y=r(s(re),2),de=s(Y),be=r(re,2);{var he=U=>{var W=eh(),se=ce(W);{let vt=u(()=>"--sf-scroll-shadow-size"in e.overrides);xt(se,{label:"Fade size",get value(){return t(E)},min:0,max:6,step:.25,unit:"rem",help:"--sf-scroll-shadow-size — size of the edge fade mask on .sf-scroll-shadow / .sf-overflow-fade",get overridden(){return t(vt)},onChange:He=>e.onSet("--sf-scroll-shadow-size",`${He}rem`),onReset:()=>e.onReset("--sf-scroll-shadow-size"),rawDefault:"2rem",get currentRaw(){return e.overrides["--sf-scroll-shadow-size"]},onRawSet:He=>e.onSet("--sf-scroll-shadow-size",He)})}var Oe=r(se,2),Ce=s(Oe);C(()=>it(Ce,`mask:linear-gradient(to right, transparent, #000 ${t(E)}rem, #000 calc(100% - ${t(E)}rem), transparent)`)),d(U,W)};L(be,U=>{t(m)&&U(he)})}var ne=r(Z,4),Pe=s(ne),qe=r(s(Pe),2),at=s(qe),Ke=r(Pe,2);{var et=U=>{var W=th(),se=r(ce(W),2),Oe=r(s(se),2),Ce=r(Oe,2);{var vt=Mt=>{var Rt=qs();x("click",Rt,()=>e.onReset("--sf-scrim-color")),d(Mt,Rt)};L(Ce,Mt=>{"--sf-scrim-color"in e.overrides&&Mt(vt)})}var He=r(se,2),ct=r(s(He),2);oe(ct,21,()=>l,Mt=>Mt.value,(Mt,Rt)=>{var na=nl(),da=s(na);C(()=>{Ye(na,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${t(I)===t(Rt).value?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(da,t(Rt).label)}),x("click",na,()=>t(Rt).value==="to top"?e.onReset("--sf-scrim-direction"):e.onSet("--sf-scrim-direction",t(Rt).value)),d(Mt,na)});var rt=r(He,2),ht=s(rt),Me=r(rt,2),At=r(s(Me),2),Ft=r(At,2);{var aa=Mt=>{var Rt=qs();x("click",Rt,()=>e.onReset("--sf-scrim-text-shadow")),d(Mt,Rt)};L(Ft,Mt=>{"--sf-scrim-text-shadow"in e.overrides&&Mt(aa)})}C(()=>{Jt(Oe,e.overrides["--sf-scrim-color"]??""),it(ht,`background:linear-gradient(${t(I)}, ${t(B)}, transparent)`),Jt(At,e.overrides["--sf-scrim-text-shadow"]??"")}),x("input",Oe,Mt=>{const Rt=Mt.target.value.trim();Rt?e.onSet("--sf-scrim-color",Rt):e.onReset("--sf-scrim-color")}),x("input",At,Mt=>{const Rt=Mt.target.value.trim();Rt?e.onSet("--sf-scrim-text-shadow",Rt):e.onReset("--sf-scrim-text-shadow")}),d(U,W)};L(Ke,U=>{t(h)&&U(et)})}var ft=r(ne,4),gt=s(ft),Ot=r(s(gt),2),_t=s(Ot),mt=r(gt,2);{var ae=U=>{var W=ah(),se=r(ce(W),2),Oe=s(se);oe(Oe,17,()=>i,ht=>ht.token,(ht,Me)=>{{let At=u(()=>T(t(Me))),Ft=u(()=>t(Me).token in e.overrides);xt(ht,{get label(){return t(Me).label},get value(){return t(At)},min:0,get max(){return t(Me).max},step:.0625,unit:"rem",get help(){return t(Me).token},get overridden(){return t(Ft)},onChange:aa=>e.onSet(t(Me).token,`${aa}rem`),onReset:()=>e.onReset(t(Me).token),get rawDefault(){return t(Me).raw},get currentRaw(){return e.overrides[t(Me).token]},onRawSet:aa=>e.onSet(t(Me).token,aa)})}});var Ce=r(Oe,2);{let ht=u(()=>"--sf-prose-media-radius"in e.overrides);xt(Ce,{label:"Media radius",get value(){return t(H)},min:0,max:32,step:1,unit:"px",help:"--sf-prose-media-radius — corner radius on prose images/video",get overridden(){return t(ht)},onChange:Me=>e.onSet("--sf-prose-media-radius",`${Me}px`),onReset:()=>e.onReset("--sf-prose-media-radius"),rawDefault:"var(--sf-radius-m)",get currentRaw(){return e.overrides["--sf-prose-media-radius"]},onRawSet:Me=>e.onSet("--sf-prose-media-radius",Me)})}var vt=r(Ce,2),He=r(s(vt),2),ct=r(He,2);{var rt=ht=>{var Me=qs();x("click",Me,()=>e.onReset("--sf-prose-marker-color")),d(ht,Me)};L(ct,ht=>{"--sf-prose-marker-color"in e.overrides&&ht(rt)})}C(()=>Jt(He,e.overrides["--sf-prose-marker-color"]??"")),x("input",He,ht=>{const Me=ht.target.value.trim();Me?e.onSet("--sf-prose-marker-color",Me):e.onReset("--sf-prose-marker-color")}),d(U,W)};L(mt,U=>{t(v)&&U(ae)})}var fe=r(ft,2),q=s(fe),X=r(s(q),2),ue=s(X),je=r(q,2);{var Ze=U=>{var W=oh(),se=r(ce(W),2),Oe=r(s(se),2),Ce=r(Oe,2);{var vt=He=>{var ct=qs();x("click",ct,()=>e.onReset("--sf-content-intrinsic-size")),d(He,ct)};L(Ce,He=>{"--sf-content-intrinsic-size"in e.overrides&&He(vt)})}C(()=>Jt(Oe,e.overrides["--sf-content-intrinsic-size"]??"")),x("input",Oe,He=>{const ct=He.target.value.trim();ct?e.onSet("--sf-content-intrinsic-size",ct):e.onReset("--sf-content-intrinsic-size")}),d(U,W)};L(je,U=>{t(b)&&U(Ze)})}C(()=>{ee(A,"aria-expanded",t(c)),y(O,t(c)?"▲":"▼"),ee(ye,"aria-expanded",t(f)),y(Te,t(f)?"▲":"▼"),ee(le,"aria-expanded",t(p)),y(ze,t(p)?"▲":"▼"),ee(re,"aria-expanded",t(m)),y(de,t(m)?"▲":"▼"),ee(Pe,"aria-expanded",t(h)),y(at,t(h)?"▲":"▼"),ee(gt,"aria-expanded",t(v)),y(_t,t(v)?"▲":"▼"),ee(q,"aria-expanded",t(b)),y(ue,t(b)?"▲":"▼")}),x("click",A,()=>{_(c,!t(c))}),x("click",ye,()=>{_(f,!t(f))}),x("click",le,()=>{_(p,!t(p))}),x("click",re,()=>{_(m,!t(m))}),x("click",Pe,()=>{_(h,!t(h))}),x("click",gt,()=>{_(v,!t(v))}),x("click",q,()=>{_(b,!t(b))}),d(a,R),ta()}oa(["click","input"]);var nh=g('

Minimum interactive area — ensures accessibility on touch devices.

',1),ks=g(""),lh=g('
'),ih=g('
'),ch=g('

Override individual z-index tokens in the "All tokens" tab.

',1),dh=g('
Selection background
Selection text color

Select this text to preview the selection color.

'),fh=g('
',1),uh=g('
'),ph=g('

Controls the height / tap-target of all sized components (buttons, inputs, badges).

',1),mh=g(''),vh=g('
Caret color
Underline thickness

A sample link with the current underline settings.

',1),hh=g('

Icon scale tokens used by .sf-icon-* utilities. Values are in em units relative to surrounding text.

',1),gh=g(''),ws=g(''),bh=g('

Default values for .sf-media images and replaced elements.

Fit
Position
',1),yh=g('
'),xh=g(`

Default to the device's env(safe-area-inset-*). Override only if you need fixed padding regardless of notch/home-indicator.

`,1),kh=g('
'),wh=g('

Applied inside @media print via optional/print.css.

Page size
',1),_h=g('
'),Ch=g(`

Boolean CSS custom property flags (0 = off, 1 = on). Components toggle these to activate state-specific styles. + Extra filler text keeps the block taller than the clamp at every setting.

`,1),ll=g(""),$v=g('

--sf-aspect — default ratio for .sf-aspect / .sf-frame

',1),eh=g('
',1),Ks=g(''),th=g('

--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim

Color
Direction
Caption over scrim
Text shadow
',1),ah=g('

Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.

Marker color
',1),oh=g('

--sf-content-intrinsic-size — placeholder size used with content-visibility: auto to improve scroll performance on tall pages.

Intrinsic size
',1),sh=g(`

Tokens for the framework's utility macros — .sf-prose, .sf-flow, .sf-line-clamp, .sf-aspect, .sf-scroll-shadow and .sf-scrim.

All tokens tab — edit every prose, scrim and surface token directly.

`);function rh(a,e){ea(e,!0);function o(U,W,oe){const Ee=e.overrides[U];if(!Ee)return W;const Le=parseFloat(oe?Ee.replace(oe,""):Ee);return isNaN(Le)?W:Le}const n=[{label:"16 / 9",value:"16 / 9"},{label:"4 / 3",value:"4 / 3"},{label:"3 / 2",value:"3 / 2"},{label:"1 / 1",value:"1 / 1"},{label:"21 / 9",value:"21 / 9"},{label:"9 / 16",value:"9 / 16"}],l=[{label:"↑ top",value:"to top"},{label:"↓ bottom",value:"to bottom"},{label:"← left",value:"to left"},{label:"→ right",value:"to right"},{label:"↗ top-right",value:"to top right"},{label:"↖ top-left",value:"to top left"}],i=[{label:"Heading gap",token:"--sf-prose-heading-gap",def:.75,max:3,raw:"var(--sf-space-s)"},{label:"List gap",token:"--sf-prose-list-gap",def:.5,max:2,raw:"var(--sf-space-xs)"},{label:"Block margin",token:"--sf-prose-block-margin",def:1,max:4,raw:"var(--sf-space-m)"},{label:"Media margin",token:"--sf-prose-media-margin",def:1,max:4,raw:"var(--sf-space-m)"},{label:"Figure margin",token:"--sf-prose-figure-margin",def:1.5,max:4,raw:"var(--sf-space-l)"},{label:"Blockquote padding",token:"--sf-prose-blockquote-padding",def:1,max:3,raw:"var(--sf-space-m)"},{label:"HR margin",token:"--sf-prose-hr-margin",def:1.5,max:4,raw:"var(--sf-space-l)"}];let c=K(!1),d=K(!1),p=K(!1),m=K(!1),h=K(!1),v=K(!1),b=K(!1),k=u(()=>o("--sf-line-clamp",3)),S=u(()=>o("--sf-flow-space",.5,"rem")),E=u(()=>o("--sf-scroll-shadow-size",2,"rem")),I=u(()=>e.overrides["--sf-aspect"]??"16 / 9"),P=u(()=>e.overrides["--sf-scrim-color"]??"oklch(0 0 0 / 0.55)"),B=u(()=>e.overrides["--sf-scrim-direction"]??"to top"),H=u(()=>o("--sf-prose-media-radius",6,"px"));function D(U){const W=e.overrides[U.token];if(!W)return U.def;const oe=parseFloat(W);return isNaN(oe)?U.def:oe}var R=sh(),C=r(s(R),2),A=s(C),q=r(s(A),2),O=s(q),F=r(A,2);{var M=U=>{var W=Jv(),oe=ce(W);{let Le=u(()=>"--sf-flow-space"in e.overrides);xt(oe,{label:"Flow space",get value(){return t(S)},min:0,max:4,step:.0625,unit:"rem",help:"--sf-flow-space — vertical gap between adjacent children of .sf-flow",get overridden(){return t(Le)},onChange:mt=>e.onSet("--sf-flow-space",`${mt}rem`),onReset:()=>e.onReset("--sf-flow-space"),rawDefault:"var(--sf-content-gap)",get currentRaw(){return e.overrides["--sf-flow-space"]},onRawSet:mt=>e.onSet("--sf-flow-space",mt)})}var Ee=r(oe,2);ae(Ee,20,()=>[0,1,2],Le=>Le,(Le,mt)=>{var He=Xv();_(()=>ct(He,`width:${90-mt*12}%`)),f(Le,He)}),_(()=>ct(Ee,`display:flex;flex-direction:column;gap:${t(S)}rem`)),f(U,W)};L(F,U=>{t(c)&&U(M)})}var J=r(C,4),be=s(J),ze=r(s(be),2),Me=s(ze),ye=r(be,2);{var ue=U=>{var W=Qv(),oe=ce(W);{let mt=u(()=>"--sf-line-clamp"in e.overrides);xt(oe,{label:"Default lines",get value(){return t(k)},min:1,max:8,step:1,help:"--sf-line-clamp — default line count for .sf-line-clamp (override per element)",get overridden(){return t(mt)},onChange:He=>e.onSet("--sf-line-clamp",String(He)),onReset:()=>e.onReset("--sf-line-clamp")})}var Ee=r(oe,2),Le=s(Ee);_(()=>ct(Le,`display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${t(k)};overflow:hidden`)),f(U,W)};L(ye,U=>{t(d)&&U(ue)})}var X=r(J,4),ne=s(X),_e=r(s(ne),2),Ae=s(_e),j=r(ne,2);{var G=U=>{var W=$v(),oe=r(ce(W),2);ae(oe,21,()=>n,He=>He.value,(He,dt)=>{var nt=ll(),ht=s(nt);_(Ne=>{Xe(nt,1,Ne),y(ht,t(dt).label)},[()=>`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(I).replace(/\s/g,"")===t(dt).value.replace(/\s/g,"")?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`]),x("click",nt,()=>t(dt).value==="16 / 9"?e.onReset("--sf-aspect"):e.onSet("--sf-aspect",t(dt).value)),f(He,nt)});var Ee=r(oe,2),Le=s(Ee),mt=s(Le);_(()=>{ct(Le,`aspect-ratio:${t(I)};max-height:120px;max-width:100%;width:auto;height:120px`),y(mt,t(I))}),f(U,W)};L(j,U=>{t(p)&&U(G)})}var Z=r(X,4),se=s(Z),Y=r(s(se),2),de=s(Y),ge=r(se,2);{var ve=U=>{var W=eh(),oe=ce(W);{let mt=u(()=>"--sf-scroll-shadow-size"in e.overrides);xt(oe,{label:"Fade size",get value(){return t(E)},min:0,max:6,step:.25,unit:"rem",help:"--sf-scroll-shadow-size — size of the edge fade mask on .sf-scroll-shadow / .sf-overflow-fade",get overridden(){return t(mt)},onChange:He=>e.onSet("--sf-scroll-shadow-size",`${He}rem`),onReset:()=>e.onReset("--sf-scroll-shadow-size"),rawDefault:"2rem",get currentRaw(){return e.overrides["--sf-scroll-shadow-size"]},onRawSet:He=>e.onSet("--sf-scroll-shadow-size",He)})}var Ee=r(oe,2),Le=s(Ee);_(()=>ct(Le,`mask:linear-gradient(to right, transparent, #000 ${t(E)}rem, #000 calc(100% - ${t(E)}rem), transparent)`)),f(U,W)};L(ge,U=>{t(m)&&U(ve)})}var re=r(Z,4),Ie=s(re),qe=r(s(Ie),2),rt=s(qe),et=r(Ie,2);{var tt=U=>{var W=th(),oe=r(ce(W),2),Ee=r(s(oe),2),Le=r(Ee,2);{var mt=Mt=>{var Rt=Ks();x("click",Rt,()=>e.onReset("--sf-scrim-color")),f(Mt,Rt)};L(Le,Mt=>{"--sf-scrim-color"in e.overrides&&Mt(mt)})}var He=r(oe,2),dt=r(s(He),2);ae(dt,21,()=>l,Mt=>Mt.value,(Mt,Rt)=>{var na=ll(),da=s(na);_(()=>{Xe(na,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${t(B)===t(Rt).value?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(da,t(Rt).label)}),x("click",na,()=>t(Rt).value==="to top"?e.onReset("--sf-scrim-direction"):e.onSet("--sf-scrim-direction",t(Rt).value)),f(Mt,na)});var nt=r(He,2),ht=s(nt),Ne=r(nt,2),At=r(s(Ne),2),Ft=r(At,2);{var aa=Mt=>{var Rt=Ks();x("click",Rt,()=>e.onReset("--sf-scrim-text-shadow")),f(Mt,Rt)};L(Ft,Mt=>{"--sf-scrim-text-shadow"in e.overrides&&Mt(aa)})}_(()=>{Jt(Ee,e.overrides["--sf-scrim-color"]??""),ct(ht,`background:linear-gradient(${t(B)}, ${t(P)}, transparent)`),Jt(At,e.overrides["--sf-scrim-text-shadow"]??"")}),x("input",Ee,Mt=>{const Rt=Mt.target.value.trim();Rt?e.onSet("--sf-scrim-color",Rt):e.onReset("--sf-scrim-color")}),x("input",At,Mt=>{const Rt=Mt.target.value.trim();Rt?e.onSet("--sf-scrim-text-shadow",Rt):e.onReset("--sf-scrim-text-shadow")}),f(U,W)};L(et,U=>{t(h)&&U(tt)})}var vt=r(re,4),gt=s(vt),Ot=r(s(gt),2),_t=s(Ot),fe=r(gt,2);{var T=U=>{var W=ah(),oe=r(ce(W),2),Ee=s(oe);ae(Ee,17,()=>i,ht=>ht.token,(ht,Ne)=>{{let At=u(()=>D(t(Ne))),Ft=u(()=>t(Ne).token in e.overrides);xt(ht,{get label(){return t(Ne).label},get value(){return t(At)},min:0,get max(){return t(Ne).max},step:.0625,unit:"rem",get help(){return t(Ne).token},get overridden(){return t(Ft)},onChange:aa=>e.onSet(t(Ne).token,`${aa}rem`),onReset:()=>e.onReset(t(Ne).token),get rawDefault(){return t(Ne).raw},get currentRaw(){return e.overrides[t(Ne).token]},onRawSet:aa=>e.onSet(t(Ne).token,aa)})}});var Le=r(Ee,2);{let ht=u(()=>"--sf-prose-media-radius"in e.overrides);xt(Le,{label:"Media radius",get value(){return t(H)},min:0,max:32,step:1,unit:"px",help:"--sf-prose-media-radius — corner radius on prose images/video",get overridden(){return t(ht)},onChange:Ne=>e.onSet("--sf-prose-media-radius",`${Ne}px`),onReset:()=>e.onReset("--sf-prose-media-radius"),rawDefault:"var(--sf-radius-m)",get currentRaw(){return e.overrides["--sf-prose-media-radius"]},onRawSet:Ne=>e.onSet("--sf-prose-media-radius",Ne)})}var mt=r(Le,2),He=r(s(mt),2),dt=r(He,2);{var nt=ht=>{var Ne=Ks();x("click",Ne,()=>e.onReset("--sf-prose-marker-color")),f(ht,Ne)};L(dt,ht=>{"--sf-prose-marker-color"in e.overrides&&ht(nt)})}_(()=>Jt(He,e.overrides["--sf-prose-marker-color"]??"")),x("input",He,ht=>{const Ne=ht.target.value.trim();Ne?e.onSet("--sf-prose-marker-color",Ne):e.onReset("--sf-prose-marker-color")}),f(U,W)};L(fe,U=>{t(v)&&U(T)})}var Q=r(vt,2),le=s(Q),ke=r(s(le),2),Ce=s(ke),Ve=r(le,2);{var Ke=U=>{var W=oh(),oe=r(ce(W),2),Ee=r(s(oe),2),Le=r(Ee,2);{var mt=He=>{var dt=Ks();x("click",dt,()=>e.onReset("--sf-content-intrinsic-size")),f(He,dt)};L(Le,He=>{"--sf-content-intrinsic-size"in e.overrides&&He(mt)})}_(()=>Jt(Ee,e.overrides["--sf-content-intrinsic-size"]??"")),x("input",Ee,He=>{const dt=He.target.value.trim();dt?e.onSet("--sf-content-intrinsic-size",dt):e.onReset("--sf-content-intrinsic-size")}),f(U,W)};L(Ve,U=>{t(b)&&U(Ke)})}_(()=>{ee(A,"aria-expanded",t(c)),y(O,t(c)?"▲":"▼"),ee(be,"aria-expanded",t(d)),y(Me,t(d)?"▲":"▼"),ee(ne,"aria-expanded",t(p)),y(Ae,t(p)?"▲":"▼"),ee(se,"aria-expanded",t(m)),y(de,t(m)?"▲":"▼"),ee(Ie,"aria-expanded",t(h)),y(rt,t(h)?"▲":"▼"),ee(gt,"aria-expanded",t(v)),y(_t,t(v)?"▲":"▼"),ee(le,"aria-expanded",t(b)),y(Ce,t(b)?"▲":"▼")}),x("click",A,()=>{w(c,!t(c))}),x("click",be,()=>{w(d,!t(d))}),x("click",ne,()=>{w(p,!t(p))}),x("click",se,()=>{w(m,!t(m))}),x("click",Ie,()=>{w(h,!t(h))}),x("click",gt,()=>{w(v,!t(v))}),x("click",le,()=>{w(b,!t(b))}),f(a,R),ta()}oa(["click","input"]);var nh=g('

Minimum interactive area — ensures accessibility on touch devices.

',1),ks=g(""),lh=g('
'),ih=g('
'),ch=g('

Override individual z-index tokens in the "All tokens" tab.

',1),dh=g('
Selection background
Selection text color

Select this text to preview the selection color.

'),fh=g('
',1),uh=g('
'),ph=g('

Controls the height / tap-target of all sized components (buttons, inputs, badges).

',1),mh=g(''),vh=g('
Caret color
Underline thickness

A sample link with the current underline settings.

',1),hh=g('

Icon scale tokens used by .sf-icon-* utilities. Values are in em units relative to surrounding text.

',1),gh=g(''),ws=g(''),bh=g('

Default values for .sf-media images and replaced elements.

Fit
Position
',1),yh=g('
'),xh=g(`

Default to the device's env(safe-area-inset-*). Override only if you need fixed padding regardless of notch/home-indicator.

`,1),kh=g('
'),wh=g('

Applied inside @media print via optional/print.css.

Page size
',1),_h=g('
'),Ch=g(`

Boolean CSS custom property flags (0 = off, 1 = on). Components toggle these to activate state-specific styles. Overriding globally forces all matching elements into that state — useful for testing and demos.

Required marker
`,1),Oh=g(`

Selection colors, caret, links, focus ring, borders and sizes all render in the live preview (try the Components template). Scroll behavior applies to the page - itself and can't be shown in the static canvas.

`);function Sh(a,e){ea(e,!0);const o=[{label:"Below",token:"--sf-z-below",note:"Behind content (e.g. decorative BG)"},{label:"Raised",token:"--sf-z-raised",note:"Slightly above flow"},{label:"Dropdown",token:"--sf-z-dropdown",note:"Dropdowns, popovers"},{label:"Sticky",token:"--sf-z-sticky",note:"Sticky headers, toolbars"},{label:"Fixed",token:"--sf-z-fixed",note:"Fixed UI chrome"},{label:"Overlay",token:"--sf-z-overlay",note:"Modals, drawers backdrop"},{label:"Modal",token:"--sf-z-modal",note:"Modal dialogs"},{label:"Popover",token:"--sf-z-popover",note:"Tooltips, menus"},{label:"Tooltip",token:"--sf-z-tooltip",note:"Inline tooltips"},{label:"Toast",token:"--sf-z-toast",note:"Notifications"}],n=[{label:"Smooth",value:"smooth"},{label:"Auto",value:"auto"}],l=[{label:"XS",token:"--sf-size-xs",default:1.5},{label:"S",token:"--sf-size-s",default:2},{label:"M",token:"--sf-size-m",default:2.5},{label:"L",token:"--sf-size-l",default:2.75},{label:"XL",token:"--sf-size-xl",default:3.5}];function i(bt,Se,Qe){if(!bt)return Se;const lt=parseFloat(Qe?bt.replace(Qe,""):bt);return isNaN(lt)?Se:lt}let c=u(()=>i(e.overrides["--sf-touch-target"],44,"px")),f=u(()=>e.overrides["--sf-scroll-behavior"]??"smooth"),p=u(()=>i(e.overrides["--sf-z-base"],0)),m=u(()=>e.overrides["--sf-caret-color"]??""),h=u(()=>i(e.overrides["--sf-link-underline-offset"]?.replace("em",""),.15)),v=u(()=>e.overrides["--sf-link-underline-thickness"]??"auto"),b=u(()=>e.overrides["--sf-focus-ring-style"]??"solid"),k=K(!1),S=K(!1),E=K(!1),P=K(!1),B=K(!1),I=K(!1),H=K(!1),T=K(!1),R=K(!1),w=K(!1),A=K(!1),j=K(!1);function O(bt){return i(e.overrides[bt.token]?.replace("rem",""),bt.default)}var F=Oh(),D=s(F),J=s(D),ye=r(s(J),2),Ae=s(ye),Te=r(J,2);{var xe=bt=>{var Se=nh(),Qe=ce(Se);{let dt=u(()=>"--sf-touch-target"in e.overrides);xt(Qe,{label:"Min touch size",get value(){return t(c)},min:32,max:64,step:1,unit:"px",help:"--sf-touch-target — minimum tappable area for interactive elements (WCAG 2.5.5)",get overridden(){return t(dt)},onChange:tt=>e.onSet("--sf-touch-target",`${tt}px`),onReset:()=>e.onReset("--sf-touch-target")})}var lt=r(Qe,2),Be=s(lt),De=s(Be);C(()=>{it(Be,`width: ${t(c)}px; height: ${t(c)}px`),y(De,`${t(c)??""}px`)}),d(bt,Se)};L(Te,bt=>{t(k)&&bt(xe)})}var pe=r(D,4),Q=s(pe),le=r(s(Q),2),we=s(le),ze=r(Q,2);{var N=bt=>{var Se=lh();oe(Se,21,()=>n,Qe=>Qe.value,(Qe,lt)=>{var Be=ks(),De=s(Be);C(()=>{Ye(Be,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(f)===t(lt).value?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(De,t(lt).label)}),x("click",Be,()=>t(lt).value==="smooth"?e.onReset("--sf-scroll-behavior"):e.onSet("--sf-scroll-behavior",t(lt).value)),d(Qe,Be)}),d(bt,Se)};L(ze,bt=>{t(S)&&bt(N)})}var G=r(pe,4),Z=s(G),re=r(s(Z),2),Y=s(re),de=r(Z,2);{var be=bt=>{var Se=ch(),Qe=ce(Se);{let Be=u(()=>"--sf-z-base"in e.overrides);xt(Qe,{label:"Base offset",get value(){return t(p)},min:0,max:1e3,step:10,help:"--sf-z-base — added to all z-index tokens to avoid conflicts with existing stacking contexts",get overridden(){return t(Be)},onChange:De=>e.onSet("--sf-z-base",String(De)),onReset:()=>e.onReset("--sf-z-base")})}var lt=r(Qe,2);oe(lt,21,()=>o,Be=>Be.token,(Be,De)=>{const dt=u(()=>t(De).token in e.overrides);var tt=ih(),Ie=s(tt),st=r(Ie,2),z=s(st),$=r(st,2),M=s($),V=r($,2),te=s(V);C(Re=>{Ye(Ie,1,`w-1.5 h-1.5 rounded-full shrink-0 ${t(dt)?"bg-amber-400":"bg-white/20"}`),y(z,t(De).label),y(M,t(De).note),y(te,Re)},[()=>t(De).token.replace("--sf-z-","")]),d(Be,tt)}),d(bt,Se)};L(de,bt=>{t(E)&&bt(be)})}var he=r(G,4),ne=s(he),Pe=r(s(ne),2),qe=s(Pe),at=r(ne,2);{var Ke=bt=>{var Se=dh(),Qe=s(Se),lt=r(s(Qe),2);{let Ie=u(()=>e.overrides["--sf-color-selection-bg"]??""),st=u(()=>"--sf-color-selection-bg"in e.overrides);Qa(lt,{token:"--sf-color-selection-bg",get value(){return t(Ie)},placeholder:"default",get isOverridden(){return t(st)},onSet:z=>e.onSet("--sf-color-selection-bg",z),onReset:()=>e.onReset("--sf-color-selection-bg")})}var Be=r(Qe,2),De=r(s(Be),2);{let Ie=u(()=>e.overrides["--sf-color-selection-text"]??""),st=u(()=>"--sf-color-selection-text"in e.overrides);Qa(De,{token:"--sf-color-selection-text",get value(){return t(Ie)},placeholder:"default",get isOverridden(){return t(st)},onSet:z=>e.onSet("--sf-color-selection-text",z),onReset:()=>e.onReset("--sf-color-selection-text")})}var dt=r(Be,2),tt=s(dt);C(()=>it(tt,`--sf-color-selection-bg: ${e.overrides["--sf-color-selection-bg"]??"#6366f1"}; --sf-color-selection-text: ${e.overrides["--sf-color-selection-text"]??"#ffffff"}`)),d(bt,Se)};L(at,bt=>{t(P)&&bt(Ke)})}var et=r(he,4),ft=s(et),gt=r(s(ft),2),Ot=s(gt),_t=r(ft,2);{var mt=bt=>{var Se=fh(),Qe=ce(Se);oe(Qe,20,()=>["solid","dashed","dotted"],dt=>dt,(dt,tt)=>{const Ie=u(()=>e.overrides["--sf-focus-ring-style"]??"solid");var st=ks(),z=s(st);C(()=>{Ye(st,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${t(Ie)===tt?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(z,tt)}),x("click",st,()=>tt==="solid"?e.onReset("--sf-focus-ring-style"):e.onSet("--sf-focus-ring-style",tt)),d(dt,st)});var lt=r(Qe,2),Be=s(lt),De=s(Be);C(()=>{it(Be,`outline: 2px ${t(b)} ${e.overrides["--sf-focus-ring-color"]||"oklch(0.7 0.2 235)"}; outline-offset: 2px`),y(De,`Focus ring · ${t(b)??""}`)}),d(bt,Se)};L(_t,bt=>{t(B)&&bt(mt)})}var ae=r(et,4),fe=s(ae),q=r(s(fe),2),X=s(q),ue=r(fe,2);{var je=bt=>{var Se=ph(),Qe=r(ce(Se),2);oe(Qe,21,()=>l,Be=>Be.token,(Be,De)=>{const dt=u(()=>O(t(De)));{let tt=u(()=>`${t(De).token} — component size step ${t(De).label}`),Ie=u(()=>t(De).token in e.overrides);xt(Be,{get label(){return t(De).label},get value(){return t(dt)},min:1,max:5,step:.05,unit:"rem",get help(){return t(tt)},get overridden(){return t(Ie)},onChange:st=>e.onSet(t(De).token,`${st}rem`),onReset:()=>e.onReset(t(De).token)})}});var lt=r(Qe,2);oe(lt,21,()=>l,Be=>Be.token,(Be,De)=>{const dt=u(()=>O(t(De)));var tt=uh(),Ie=s(tt),st=r(Ie,2),z=s(st);C($=>{it(Ie,$),y(z,t(De).label)},[()=>`height: ${Math.min(t(dt)*14,64)}px`]),d(Be,tt)}),d(bt,Se)};L(ue,bt=>{t(I)&&bt(je)})}var Ze=r(ae,4),U=s(Ze),W=r(s(U),2),se=s(W),Oe=r(U,2);{var Ce=bt=>{var Se=vh(),Qe=ce(Se),lt=r(s(Qe),2);{let te=u(()=>"--sf-caret-color"in e.overrides);Qa(lt,{token:"--sf-caret-color",get value(){return t(m)},placeholder:"default (action color)",get isOverridden(){return t(te)},onSet:Re=>e.onSet("--sf-caret-color",Re),onReset:()=>e.onReset("--sf-caret-color")})}var Be=r(Qe,2);{let te=u(()=>"--sf-link-underline-offset"in e.overrides);xt(Be,{label:"Underline offset",get value(){return t(h)},min:0,max:.5,step:.01,unit:"em",help:"--sf-link-underline-offset — gap between text baseline and underline",get overridden(){return t(te)},onChange:Re=>e.onSet("--sf-link-underline-offset",`${Re}em`),onReset:()=>e.onReset("--sf-link-underline-offset")})}var De=r(Be,2),dt=s(De),tt=r(s(dt),2);{var Ie=te=>{var Re=mh();x("click",Re,()=>e.onReset("--sf-link-underline-thickness")),d(te,Re)};L(tt,te=>{"--sf-link-underline-thickness"in e.overrides&&te(Ie)})}var st=r(dt,2);oe(st,20,()=>[["auto","auto"],["1px","1px"],["2px","2px"],["3px","3px"]],([te,Re])=>Re,(te,Re)=>{var ie=u(()=>Ta(Re,2));let me=()=>t(ie)[0],ge=()=>t(ie)[1];var Le=ks(),Ue=s(Le);C(()=>{Ye(Le,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(v)===ge()?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Ue,me())}),x("click",Le,()=>ge()==="auto"?e.onReset("--sf-link-underline-thickness"):e.onSet("--sf-link-underline-thickness",ge())),d(te,Le)});var z=r(De,2),$=s(z),M=r($,2),V=r(s(M));C(()=>{it($,`caret-color:${t(m)||"#6366f1"}`),it(V,`text-decoration:underline;text-underline-offset:${t(h)}em;text-decoration-thickness:${t(v)}`)}),x("click",V,te=>te.preventDefault()),d(bt,Se)};L(Oe,bt=>{t(H)&&bt(Ce)})}var vt=r(Ze,4),He=s(vt),ct=r(s(He),2),rt=s(ct),ht=r(He,2);{var Me=bt=>{var Se=hh(),Qe=r(ce(Se),2);oe(Qe,20,()=>[{label:"xs",token:"--sf-icon-xs",def:.875},{label:"s",token:"--sf-icon-s",def:1},{label:"m",token:"--sf-icon-m",def:1.5},{label:"l",token:"--sf-icon-l",def:2},{label:"xl",token:"--sf-icon-xl",def:3},{label:"2xl",token:"--sf-icon-2xl",def:4}],Be=>Be.token,(Be,De)=>{{let dt=u(()=>i(e.overrides[De.token]?.replace("em",""),De.def)),tt=u(()=>De.token in e.overrides);xt(Be,{get label(){return De.label},get value(){return t(dt)},min:.5,max:6,step:.125,unit:"em",get overridden(){return t(tt)},onChange:Ie=>e.onSet(De.token,`${Ie}em`),onReset:()=>e.onReset(De.token)})}});var lt=r(Qe,2);{let Be=u(()=>i(e.overrides["--sf-icon-box-pad"]?.replace("em",""),.5)),De=u(()=>"--sf-icon-box-pad"in e.overrides);xt(lt,{label:"Box padding",get value(){return t(Be)},min:0,max:2,step:.125,unit:"em",help:"--sf-icon-box-pad — padding around icon when using .sf-icon-box",get overridden(){return t(De)},onChange:dt=>e.onSet("--sf-icon-box-pad",`${dt}em`),onReset:()=>e.onReset("--sf-icon-box-pad")})}d(bt,Se)};L(ht,bt=>{t(T)&&bt(Me)})}var At=r(vt,4),Ft=s(At),aa=r(s(Ft),2),Mt=s(aa),Rt=r(Ft,2);{var na=bt=>{var Se=bh(),Qe=r(ce(Se),2),lt=r(s(Qe),2);oe(lt,20,()=>["cover","contain","fill","none"],z=>z,(z,$)=>{const M=u(()=>e.overrides["--sf-object-fit"]??"cover");var V=ks(),te=s(V);C(()=>{Ye(V,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(M)===$?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),y(te,$)}),x("click",V,()=>$==="cover"?e.onReset("--sf-object-fit"):e.onSet("--sf-object-fit",$)),d(z,V)});var Be=r(lt,2);{var De=z=>{var $=gh();x("click",$,()=>e.onReset("--sf-object-fit")),d(z,$)};L(Be,z=>{"--sf-object-fit"in e.overrides&&z(De)})}var dt=r(Qe,2),tt=r(s(dt),2),Ie=r(tt,2);{var st=z=>{var $=ws();x("click",$,()=>e.onReset("--sf-object-position")),d(z,$)};L(Ie,z=>{"--sf-object-position"in e.overrides&&z(st)})}C(()=>Jt(tt,e.overrides["--sf-object-position"]??"")),x("input",tt,z=>{const $=z.target.value.trim();$?e.onSet("--sf-object-position",$):e.onReset("--sf-object-position")}),d(bt,Se)};L(Rt,bt=>{t(R)&&bt(na)})}var da=r(At,4),fa=s(da),_e=r(s(fa),2),kt=s(_e),Tt=r(fa,2);{var Xe=bt=>{var Se=xh(),Qe=r(ce(Se),2);oe(Qe,20,()=>[{label:"Top",token:"--sf-safe-top",placeholder:"env(safe-area-inset-top, 0px)"},{label:"Right",token:"--sf-safe-right",placeholder:"env(safe-area-inset-right, 0px)"},{label:"Bottom",token:"--sf-safe-bottom",placeholder:"env(safe-area-inset-bottom, 0px)"},{label:"Left",token:"--sf-safe-left",placeholder:"env(safe-area-inset-left, 0px)"}],lt=>lt.token,(lt,Be)=>{var De=yh(),dt=s(De),tt=s(dt),Ie=r(dt,2),st=r(Ie,2);{var z=$=>{var M=ws();x("click",M,()=>e.onReset(Be.token)),d($,M)};L(st,$=>{Be.token in e.overrides&&$(z)})}C(()=>{y(tt,Be.label),Jt(Ie,e.overrides[Be.token]??""),ee(Ie,"placeholder",Be.placeholder)}),x("input",Ie,$=>{const M=$.target.value.trim();M?e.onSet(Be.token,M):e.onReset(Be.token)}),d(lt,De)}),d(bt,Se)};L(Tt,bt=>{t(A)&&bt(Xe)})}var It=r(da,4),ot=s(It),nt=r(s(ot),2),qt=s(nt),jt=r(ot,2);{var Dt=bt=>{var Se=wh(),Qe=r(ce(Se),2),lt=r(s(Qe),2);oe(lt,20,()=>["a4","letter","legal","a3"],De=>De,(De,dt)=>{const tt=u(()=>e.overrides["--sf-print-page-size"]??"a4");var Ie=ks(),st=s(Ie);C(()=>{Ye(Ie,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(tt)===dt?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),y(st,dt)}),x("click",Ie,()=>dt==="a4"?e.onReset("--sf-print-page-size"):e.onSet("--sf-print-page-size",dt)),d(De,Ie)});var Be=r(Qe,2);oe(Be,16,()=>[{label:"Base size",token:"--sf-print-base-size",placeholder:"11pt"},{label:"Page margin",token:"--sf-print-page-margin",placeholder:"2cm"}],De=>De.token,(De,dt)=>{var tt=kh(),Ie=s(tt),st=s(Ie),z=r(Ie,2),$=r(z,2);{var M=V=>{var te=ws();x("click",te,()=>e.onReset(dt.token)),d(V,te)};L($,V=>{dt.token in e.overrides&&V(M)})}C(()=>{y(st,dt.label),Jt(z,e.overrides[dt.token]??""),ee(z,"placeholder",dt.placeholder)}),x("input",z,V=>{const te=V.target.value.trim();te?e.onSet(dt.token,te):e.onReset(dt.token)}),d(De,tt)}),d(bt,Se)};L(jt,bt=>{t(w)&&bt(Dt)})}var Vt=r(It,4),Wt=s(Vt),ua=r(s(Wt),2),Ua=s(ua),Pa=r(Wt,2);{var Aa=bt=>{var Se=Ch(),Qe=r(ce(Se),2);oe(Qe,20,()=>[{label:"is-active",token:"--sf-is-active",note:"Active/selected state"},{label:"is-current",token:"--sf-is-current",note:"Current page/item"},{label:"is-open",token:"--sf-is-open",note:"Open/expanded state"},{label:"is-pressed",token:"--sf-is-pressed",note:"Pressed/depressed state"}],tt=>tt.token,(tt,Ie)=>{const st=u(()=>e.overrides[Ie.token]??"0");var z=_h(),$=s(z),M=s($),V=r($,2),te=s(V),Re=r(V,2),ie=s(Re),me=r(Re,2);{var ge=Le=>{var Ue=ws();x("click",Ue,()=>e.onReset(Ie.token)),d(Le,Ue)};L(me,Le=>{Ie.token in e.overrides&&Le(ge)})}C(()=>{ee($,"aria-label",Ie.label),ee($,"aria-pressed",t(st)==="1"),Ye($,1,`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${t(st)==="1"?"bg-indigo-600":"bg-white/10"}`),Ye(M,1,`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${t(st)==="1"?"translate-x-4":"translate-x-0.5"}`),y(te,Ie.label),y(ie,Ie.note)}),x("click",$,()=>t(st)==="1"?e.onReset(Ie.token):e.onSet(Ie.token,"1")),d(tt,z)});var lt=r(Qe,2),Be=r(s(lt),2),De=r(Be,2);{var dt=tt=>{var Ie=ws();x("click",Ie,()=>e.onReset("--sf-field-required-marker")),d(tt,Ie)};L(De,tt=>{"--sf-field-required-marker"in e.overrides&&tt(dt)})}C(()=>Jt(Be,e.overrides["--sf-field-required-marker"]??"")),x("input",Be,tt=>{const Ie=tt.target.value;Ie?e.onSet("--sf-field-required-marker",Ie):e.onReset("--sf-field-required-marker")}),d(bt,Se)};L(Pa,bt=>{t(j)&&bt(Aa)})}C(()=>{ee(J,"aria-expanded",t(k)),y(Ae,t(k)?"▲":"▼"),ee(Q,"aria-expanded",t(S)),y(we,t(S)?"▲":"▼"),ee(Z,"aria-expanded",t(E)),y(Y,t(E)?"▲":"▼"),ee(ne,"aria-expanded",t(P)),y(qe,t(P)?"▲":"▼"),ee(ft,"aria-expanded",t(B)),y(Ot,t(B)?"▲":"▼"),ee(fe,"aria-expanded",t(I)),y(X,t(I)?"▲":"▼"),ee(U,"aria-expanded",t(H)),y(se,t(H)?"▲":"▼"),ee(He,"aria-expanded",t(T)),y(rt,t(T)?"▲":"▼"),ee(Ft,"aria-expanded",t(R)),y(Mt,t(R)?"▲":"▼"),ee(fa,"aria-expanded",t(A)),y(kt,t(A)?"▲":"▼"),ee(ot,"aria-expanded",t(w)),y(qt,t(w)?"▲":"▼"),ee(Wt,"aria-expanded",t(j)),y(Ua,t(j)?"▲":"▼")}),x("click",J,()=>{_(k,!t(k))}),x("click",Q,()=>{_(S,!t(S))}),x("click",Z,()=>{_(E,!t(E))}),x("click",ne,()=>{_(P,!t(P))}),x("click",ft,()=>{_(B,!t(B))}),x("click",fe,()=>{_(I,!t(I))}),x("click",U,()=>{_(H,!t(H))}),x("click",He,()=>{_(T,!t(T))}),x("click",Ft,()=>{_(R,!t(R))}),x("click",fa,()=>{_(A,!t(A))}),x("click",ot,()=>{_(w,!t(w))}),x("click",Wt,()=>{_(j,!t(j))}),d(a,F),ta()}oa(["click","input"]);var Lh=g('

No saved themes yet.

Configure your tokens, then save them above.

'),Ph=g('
'),Ih=g('
'),Bh=g(' '),Uh=g('
'),Ah=g('
'),zh=g(''),Eh=g(`
Themes

Save your current configuration as a named theme, then re-apply it any time. - Themes are stored in this browser.

Save current

`);function Rh(a,e){ea(e,!0);let o=K(va(Ji())),n=K(""),l=u(()=>Object.keys(e.overrides).length);function i(O,F){const D=Object.keys(O);return D.length!==Object.keys(F).length?!1:D.every(J=>O[J]===F[J])}let c=u(()=>t(o).find(O=>i(O.overrides,e.overrides))?.id??"");function f(){t(l)!==0&&(_(o,Qi(t(n),e.overrides),!0),_(n,""))}function p(O){_(o,zu(O),!0)}var m=Eh(),h=r(s(m),4),v=r(s(h),2),b=s(v),k=r(b,2),S=s(k);hr(S,{class:"w-3 h-3"});var E=r(v,2),P=s(E);{var B=O=>{var F=ls("No active overrides yet — adjust some tokens first.");d(O,F)},I=O=>{var F=ls();C(()=>y(F,`Captures all ${t(l)??""} active override${t(l)===1?"":"s"}.`)),d(O,F)};L(P,O=>{t(l)===0?O(B):O(I,-1)})}var H=r(h,2),T=s(H);{var R=O=>{var F=Lh();d(O,F)},w=O=>{var F=zt(),D=ce(F);oe(D,17,()=>t(o),J=>J.id,(J,ye)=>{const Ae=u(()=>Object.keys(t(ye).overrides).length);var Te=Ah(),xe=s(Te),pe=s(xe),Q=s(pe),le=r(pe,2),we=s(le),ze=s(we),N=r(ze);{var G=qe=>{Uo(qe,{class:"w-3 h-3 text-indigo-400"})};L(N,qe=>{t(c)===t(ye).id&&qe(G)})}var Z=r(we,2),re=s(Z),Y=r(le,2),de=s(Y),be=r(de,2),he=s(be);hn(he,{class:"w-3.5 h-3.5"});var ne=r(xe,2);{var Pe=qe=>{var at=Uh(),Ke=s(at);oe(Ke,17,()=>Object.entries(t(ye).overrides).slice(0,5),([gt,Ot])=>gt,(gt,Ot)=>{var _t=u(()=>Ta(t(Ot),2));let mt=()=>t(_t)[0],ae=()=>t(_t)[1];var fe=Ih(),q=s(fe);{var X=U=>{var W=Ph();let se;C(()=>se=it(W,"",se,{background:ae()})),d(U,W)},ue=u(()=>mt().includes("color")||mt().includes("source"));L(q,U=>{t(ue)&&U(X)})}var je=r(q,2),Ze=s(je);C(U=>y(Ze,U),[()=>mt().replace("--sf-","")]),d(gt,fe)});var et=r(Ke,2);{var ft=gt=>{var Ot=Bh(),_t=s(Ot);C(()=>y(_t,`+${t(Ae)-5} more`)),d(gt,Ot)};L(et,gt=>{t(Ae)>5&>(ft)})}d(qe,at)};L(ne,qe=>{t(Ae)>0&&qe(Pe)})}C(()=>{Ye(Te,1,`group rounded-xl border transition-all overflow-hidden ${t(c)===t(ye).id?"border-indigo-500/40 bg-indigo-500/10":"border-white/8 bg-white/4 hover:bg-white/6 hover:border-white/14"}`),y(Q,t(ye).icon),y(ze,`${t(ye).name??""} `),y(re,`${t(Ae)??""} override${t(Ae)===1?"":"s"}`)}),x("click",de,()=>e.onApplyTheme(t(ye).overrides)),x("click",be,()=>p(t(ye).id)),d(J,Te)}),d(O,F)};L(T,O=>{t(o).length===0?O(R):O(w,-1)})}var A=r(H,2);{var j=O=>{var F=zh();x("click",F,function(...D){e.onResetAll?.apply(this,D)}),d(O,F)};L(A,O=>{t(l)>0&&O(j)})}C(()=>k.disabled=t(l)===0),x("keydown",b,O=>{O.key==="Enter"&&f()}),vr(b,()=>t(n),O=>_(n,O)),x("click",k,f),d(a,m),ta()}oa(["keydown","click"]);var Th=g(' Link copied!',1),Dh=g(" Copy shareable link",1),Mh=g('
Export

CSS output
Usage
Paste this CSS into your project after the SLASHED import.
');function Nh(a,e){ea(e,!0);let o=K("layer"),n=K(!1),l=K(!1),i=u(()=>Ho(e.overrides,{mode:t(o),banner:!0})),c=u(()=>Object.keys(e.overrides).length);async function f(){try{await navigator.clipboard.writeText(t(i)),_(n,!0),setTimeout(()=>{_(n,!1)},2e3)}catch{}}async function p(){try{const N=Yf(e.overrides);await navigator.clipboard.writeText(N),_(l,!0),setTimeout(()=>{_(l,!1)},2e3)}catch{}}function m(){const N=new Blob([t(i)],{type:"text/css"}),G=URL.createObjectURL(N),Z=document.createElement("a");Z.href=G,Z.download="slashed-overrides.css",Z.click(),URL.revokeObjectURL(G)}function h(N){return N.includes("color")||N.includes("scrim-color")||N.includes("shadow-color")?"color":N.includes("duration")||N.includes("delay")||N.includes("transition-duration")?"duration":N.includes("radius")||N.includes("space")||N.includes("size")||N.includes("width")||N.includes("height")||N.includes("gap")||N.includes("blur")||N.includes("text-")||N.includes("leading")||N.includes("tracking")?"dimension":N.includes("font-family")||N.includes("font-mono")||N.includes("font-body")||N.includes("font-heading")||N.includes("font-code")?"fontFamily":N.includes("font-weight")||N.includes("weight")?"fontWeight":"string"}function v(){const N={};for(const[de,be]of Object.entries(e.overrides)){const he=de.replace(/^--sf-/,"").replace(/-/g,".");N[he]={$value:be,$type:h(de)}}const G=JSON.stringify({$schema:"https://design-tokens.github.io/community-group/format/",...N},null,2),Z=new Blob([G],{type:"application/json"}),re=URL.createObjectURL(Z),Y=document.createElement("a");Y.href=re,Y.download="slashed-tokens.w3c.json",Y.click(),URL.revokeObjectURL(re)}var b=Mh(),k=s(b),S=r(s(k),2),E=s(S),P=r(k,2),B=s(P);{var I=N=>{var G=Th(),Z=ce(G);Uo(Z,{class:"w-3 h-3 text-emerald-400"}),d(N,G)},H=N=>{var G=Dh(),Z=ce(G);$d(Z,{class:"w-3 h-3"}),d(N,G)};L(B,N=>{t(l)?N(I):N(H,-1)})}var T=r(P,2),R=r(s(T),2),w=s(R),A=r(w,2),j=r(T,2),O=s(j),F=s(O),D=r(O,2),J=s(D),ye=s(J);{var Ae=N=>{Uo(N,{class:"w-3 h-3 text-emerald-400"})},Te=N=>{Yr(N,{class:"w-3 h-3"})};L(ye,N=>{t(n)?N(Ae):N(Te,-1)})}var xe=r(J,2),pe=s(xe);Zr(pe,{class:"w-3 h-3"});var Q=r(j,2),le=s(Q);Zr(le,{class:"w-3 h-3"});var we=r(Q,2),ze=r(s(we),4);ze.textContent=`@import 'slashed/slashed.full.css';
-@import './slashed-overrides.css';`,C(()=>{y(E,t(c)>0?`${t(c)} override${t(c)!==1?"s":""} ready to export.`:"No overrides yet. Customise tokens, then export."),P.disabled=t(c)===0,Ye(w,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${t(o)==="layer"?"bg-indigo-600 text-white":"text-slate-400 hover:text-slate-200"}`),Ye(A,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${t(o)==="root"?"bg-indigo-600 text-white":"text-slate-400 hover:text-slate-200"}`),y(F,t(i)||"/* No overrides */"),Q.disabled=t(c)===0}),x("click",P,p),x("click",w,()=>{_(o,"layer")}),x("click",A,()=>{_(o,"root")}),x("click",J,f),x("click",xe,m),x("click",Q,v),d(a,b),ta()}oa(["click"]);const Fh=JSON.parse(`[{"name":"is-active","selector":".is-active","kind":"state","category":"State classes","group":"ACTIVE / SELECTED / CURRENT","description":"Active state — applied to the currently interacted-with element (e.g. pressed button, active menu item). Sets --sf-is-active to 1 for calc() branching.","optional":false,"layer":"slashed.states"},{"name":"is-busy","selector":".is-busy","kind":"state","category":"State classes","group":"LOADING / ASYNC FEEDBACK","description":"Busy state — shows a progress cursor to indicate background processing. Does not mask content; use is-loading when content should be hidden during loading.","optional":false,"layer":"slashed.states"},{"name":"is-clickable","selector":".is-clickable","kind":"state","category":"State classes","group":"FOCUS / INTERACTION MODIFIERS","description":"Makes the element appear interactive (pointer cursor). Use when an element has a click handler but no native button or link role.","optional":false,"layer":"slashed.states"},{"name":"is-clipped","selector":".is-clipped","kind":"state","category":"State classes","group":"OVERFLOW / CLIPPING","description":"Clips overflowing content (overflow: hidden). Use to constrain media or tooltips within a container boundary.","optional":false,"layer":"slashed.states"},{"name":"is-collapsed","selector":".is-collapsed","kind":"state","category":"State classes","group":"OPEN / CLOSED","description":"Collapsed state for disclosure widgets — hides the expandable region. Pair with is-expanded or is-open. Components add transitions.","optional":false,"layer":"slashed.states"},{"name":"is-current","selector":".is-current","kind":"state","category":"State classes","group":"ACTIVE / SELECTED / CURRENT","description":"Current/selected state — marks the active page in navigation or the selected item in a list. Sets --sf-is-current to 1 for calc() branching.","optional":false,"layer":"slashed.states"},{"name":"is-danger","selector":".is-danger","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Danger status state — applies danger color tokens for destructive actions (e.g. a delete confirmation dialog) and form validation errors.","optional":false,"layer":"slashed.states"},{"name":"is-disabled","selector":".is-disabled","kind":"state","category":"State classes","group":"INTERACTIVITY","description":"Disabled state — dims the element (--sf-opacity-disabled), removes pointer events, and sets cursor: not-allowed. Inherited by child elements that re-enable pointer events.","optional":false,"layer":"slashed.states"},{"name":"is-draggable","selector":".is-draggable","kind":"state","category":"State classes","group":"DRAG & DROP","description":"Draggable state — shows a grab cursor to indicate the element can be dragged. Apply before a drag interaction begins.","optional":false,"layer":"slashed.states"},{"name":"is-dragging","selector":".is-dragging","kind":"state","category":"State classes","group":"DRAG & DROP","description":"Active drag state — shows a grabbing cursor while the element is being dragged. Apply during the drag event.","optional":false,"layer":"slashed.states"},{"name":"is-drop-target","selector":".is-drop-target","kind":"state","category":"State classes","group":"DRAG & DROP","description":"Drop-target state — applies a visual highlight to indicate a valid drag-and-drop destination. Toggle on drag-over events.","optional":false,"layer":"slashed.states"},{"name":"is-empty","selector":".is-empty","kind":"state","category":"State classes","group":"EMPTY STATE","description":"Empty state — hides the element when it has no child nodes (:empty). Used for dynamic lists or containers that may render empty.","optional":false,"layer":"slashed.states"},{"name":"is-error","selector":".is-error","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Error state — alias for is-danger. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to is-invalid.","optional":false,"layer":"slashed.states"},{"name":"is-expanded","selector":".is-expanded","kind":"state","category":"State classes","group":"OPEN / CLOSED","description":"Expanded state for disclosure widgets — shows the expandable region. Inverse of is-collapsed. Components add transitions.","optional":false,"layer":"slashed.states"},{"name":"is-fixed","selector":".is-fixed","kind":"state","category":"State classes","group":"POSITION / STICKINESS","description":"Fixed positioning state — removes the element from the document flow and positions it relative to the viewport. Respects writing-mode (logical variant of fixed positioning).","optional":false,"layer":"slashed.states"},{"name":"is-focused","selector":".is-focused","kind":"state","category":"State classes","group":"FOCUS / INTERACTION MODIFIERS","description":"Programmatic focus state — applies the focus ring to an element that should appear focused. Use when :focus-visible alone is insufficient (e.g. custom select).","optional":false,"layer":"slashed.states"},{"name":"is-fullscreen","selector":".is-fullscreen","kind":"state","category":"State classes","group":"POSITION / STICKINESS","description":"Fullscreen positioning state — stretches the element to cover the viewport. Bare positioning only; consumers supply inset values.","optional":false,"layer":"slashed.states"},{"name":"is-hidden","selector":".is-hidden","kind":"state","category":"State classes","group":"VISIBILITY","description":"Hidden state — removes the element from layout and accessibility tree (display: none !important).","optional":false,"layer":"slashed.states"},{"name":"is-highlighted","selector":".is-highlighted","kind":"state","category":"State classes","group":"ACTIVE / SELECTED / CURRENT","description":"Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists.","optional":false,"layer":"slashed.states"},{"name":"is-info","selector":".is-info","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Info status state — applies info color tokens. Use for neutral informational messages and hints.","optional":false,"layer":"slashed.states"},{"name":"is-invalid","selector":".is-invalid","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Invalid state — applies danger color tokens to form fields with validation failures. Identical visual output to is-error; the name signals form-field context.","optional":false,"layer":"slashed.states"},{"name":"is-invisible","selector":".is-invisible","kind":"state","category":"State classes","group":"VISIBILITY","description":"Invisible state — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden).","optional":false,"layer":"slashed.states"},{"name":"is-loading","selector":".is-loading","kind":"state","category":"State classes","group":"LOADING / ASYNC FEEDBACK","description":"Loading state — hides the element's text (color: transparent), removes pointer events, and renders a spinner via ::after. Use for buttons and containers awaiting async results.","optional":false,"layer":"slashed.states"},{"name":"is-open","selector":".is-open","kind":"state","category":"State classes","group":"OPEN / CLOSED","description":"Open/shown state for modals, dropdowns, and drawers — counterpart to is-collapsed/is-hidden. Sets --sf-is-open to 1 for calc() branching.","optional":false,"layer":"slashed.states"},{"name":"is-overlay","selector":".is-overlay","kind":"state","category":"State classes","group":"OVERLAY / BACKDROP","description":"Overlay positioning state — renders the element as a full-screen fixed overlay with a backdrop scrim. Use for modal backgrounds.","optional":false,"layer":"slashed.states"},{"name":"is-pending","selector":".is-pending","kind":"state","category":"State classes","group":"LOADING / ASYNC FEEDBACK","description":"Pending state for optimistic UI — content remains visible but dimmed while an async request is in flight. Differs from is-loading (which hides content entirely).","optional":false,"layer":"slashed.states"},{"name":"is-pinned","selector":".is-pinned","kind":"state","category":"State classes","group":"POSITION / STICKINESS","description":"Pinned / sticky state — applies a visual affordance (e.g. border or shadow) to indicate the element is in its stuck (sticky) position. Toggle via IntersectionObserver.","optional":false,"layer":"slashed.states"},{"name":"is-pressed","selector":".is-pressed","kind":"state","category":"State classes","group":"ACTIVE / SELECTED / CURRENT","description":"Pressed/toggled-on state for toggle buttons. Sets --sf-is-pressed to 1 for calc() branching and signals the selected state to components.","optional":false,"layer":"slashed.states"},{"name":"is-readonly","selector":".is-readonly","kind":"state","category":"State classes","group":"INTERACTIVITY","description":"Readonly state — removes pointer events and text selection. Use for fields that display data but cannot be edited.","optional":false,"layer":"slashed.states"},{"name":"is-resizable","selector":".is-resizable","kind":"state","category":"State classes","group":"POSITION / STICKINESS","description":"Resizable state — enables user resize handle on the element (resize: both). Typically applied to textareas or panels.","optional":false,"layer":"slashed.states"},{"name":"is-scrollable","selector":".is-scrollable","kind":"state","category":"State classes","group":"OVERFLOW / CLIPPING","description":"Makes the element scrollable (overflow: auto) when its content overflows. Applies to both axes.","optional":false,"layer":"slashed.states"},{"name":"is-selected","selector":".is-selected","kind":"state","category":"State classes","group":"ACTIVE / SELECTED / CURRENT","description":"Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles.","optional":false,"layer":"slashed.states"},{"name":"is-skeleton","selector":".is-skeleton","kind":"state","category":"State classes","group":"LOADING / ASYNC FEEDBACK","description":"Skeleton loading placeholder state. Applies a shimmer animation over the element to indicate that content is loading. Works on both img and non-media elements.","optional":false,"layer":"slashed.states"},{"name":"is-sticky","selector":".is-sticky","kind":"state","category":"State classes","group":"POSITION / STICKINESS","description":"Sticky positioning state — sets position: sticky with a top offset from --sf-sticky-offset. Useful for sticky headers and sidebar sub-menus.","optional":false,"layer":"slashed.states"},{"name":"is-success","selector":".is-success","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Success status state — applies success color tokens. Use for confirmation messages, completed form steps, and positive feedback.","optional":false,"layer":"slashed.states"},{"name":"is-truncated","selector":".is-truncated","kind":"state","category":"State classes","group":"OVERFLOW / CLIPPING","description":"Single-line truncation state — clips overflowing text with an ellipsis (overflow: hidden, text-overflow: ellipsis, white-space: nowrap).","optional":false,"layer":"slashed.states"},{"name":"is-unselectable","selector":".is-unselectable","kind":"state","category":"State classes","group":"FOCUS / INTERACTION MODIFIERS","description":"Prevents text selection (user-select: none) on the element. Use on interactive drag handles, labels, and UI chrome that shouldn't be selected.","optional":false,"layer":"slashed.states"},{"name":"is-valid","selector":".is-valid","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Valid state — applies success color tokens to form fields that have passed validation. Visual styling is identical to is-success; the name signals form-field context.","optional":false,"layer":"slashed.states"},{"name":"is-visible","selector":".is-visible","kind":"state","category":"State classes","group":"VISIBILITY","description":"Visible state — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.","optional":false,"layer":"slashed.states"},{"name":"is-warning","selector":".is-warning","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Warning status state — applies warning color tokens. Use for cautionary messages and non-critical alerts.","optional":false,"layer":"slashed.states"},{"name":"no-motion","selector":".no-motion","kind":"accessibility","category":"Accessibility","group":"Reduced motion. Token override helps components that read","description":"Suppresses all animations and transitions within the subtree. Apply to a container to create a reduced-motion zone without relying on the system preference.","optional":false,"layer":"slashed.accessibility"},{"name":"no-print","selector":".no-print","kind":"print","category":"Print","group":"Print visibility utilities","description":"Hides the element in @media print. Use on sidebars, navigation bars, and decorative elements that should not appear on paper.","optional":false,"layer":"slashed.print"},{"name":"print-color-exact","selector":".print-color-exact","kind":"print","category":"Print","group":"Opt-in colour treatment","description":"Forces exact color rendering in print (print-color-adjust: exact). Use on charts and colored badges that must preserve their fill colors in print.","optional":false,"layer":"slashed.print"},{"name":"print-no-color","selector":".print-no-color","kind":"print","category":"Print","group":"Opt-in colour treatment","description":"Strips color information in print (print-color-adjust: economy). Defers to the printer's ink-saving mode for backgrounds and non-critical color fills.","optional":false,"layer":"slashed.print"},{"name":"print-only","selector":".print-only","kind":"print","category":"Print","group":"Print visibility utilities","description":"Hides the element on screen (display: none) but shows it in @media print. Use for print-only headers, footers, and supplementary content not needed on screen.","optional":false,"layer":"slashed.print"},{"name":"sf-alternate","selector":".sf-alternate","kind":"layout","category":"Layout primitives","group":"Alternate (zigzag / media-object)","description":"Zigzag / alternating two-column layout. Even children align image-left/text-right; odd children flip. Collapses to a single column below the breakpoint.","optional":false,"layer":"slashed.layout"},{"name":"sf-aspect","selector":".sf-aspect","kind":"macro","category":"Macro classes","group":"Aspect","description":"Sets aspect-ratio from a --sf-aspect-ratio scoped token. Override the token inline to get any ratio without a new class.","optional":false,"layer":"slashed.macros"},{"name":"sf-bento","selector":".sf-bento","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Auto-fill bento grid for card dashboards. Children span 1 column by default; use span modifiers (sf-bento-wide, sf-bento-tall, sf-bento-full, sf-bento-featured) to break the grid.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento--2","selector":".sf-bento--2","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Bento grid variant with a 2-column base layout.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento--3","selector":".sf-bento--3","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Bento grid variant with a 3-column base layout.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento--6","selector":".sf-bento--6","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Bento grid variant with a 6-column base layout.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento--compact","selector":".sf-bento--compact","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Bento grid variant with shorter default row height.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento--tall","selector":".sf-bento--tall","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Bento grid variant with taller default row height.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento-featured","selector":".sf-bento-featured","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Span modifier for a bento item: takes up 2×2 cells (featured hero placement).","optional":false,"layer":"slashed.layout"},{"name":"sf-bento-full","selector":".sf-bento-full","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Span modifier for a bento item: stretches across all columns (full-width banner).","optional":false,"layer":"slashed.layout"},{"name":"sf-bento-tall","selector":".sf-bento-tall","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Span modifier for a bento item: doubles the row height (tall card).","optional":false,"layer":"slashed.layout"},{"name":"sf-bento-wide","selector":".sf-bento-wide","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Span modifier for a bento item: spans 2 columns (wide card).","optional":false,"layer":"slashed.layout"},{"name":"sf-bg","selector":".sf-bg","kind":"layout","category":"Layout primitives","group":"Background","description":"Background layer — absolutely-positioned cover media that sits behind a parent's content. The parent is auto-promoted to a positioned, isolated stacking context via :has(), so .sf-bg composes natively under .sf-scrim (background → scrim gradient → content). Works as a bare  or as a wrapper with a nested > img / > video / > picture.","optional":false,"layer":"slashed.layout"},{"name":"sf-box","selector":".sf-box","kind":"layout","category":"Layout primitives","group":"Box","description":"Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room.","optional":false,"layer":"slashed.layout"},{"name":"sf-breakout","selector":".sf-breakout","kind":"layout","category":"Layout primitives","group":"Content grid (breakout pattern)","description":"Breaks a child element out of a parent sf-content-grid, spanning full bleed (or a named grid area) regardless of the parent column. Useful for full-width sections inside constrained prose.","optional":false,"layer":"slashed.layout"},{"name":"sf-center","selector":".sf-center","kind":"layout","category":"Layout primitives","group":"Center","description":"Centers children both horizontally and vertically using flexbox. Optionally add sf-center--intrinsic to size the container to its content.","optional":false,"layer":"slashed.layout"},{"name":"sf-center--intrinsic","selector":".sf-center--intrinsic","kind":"layout","category":"Layout primitives","group":"Center","description":"Modifier for sf-center: constrains the container to the natural width of its children (no stretching to fill available space).","optional":false,"layer":"slashed.layout"},{"name":"sf-clickable-parent","selector":".sf-clickable-parent","kind":"accessibility","category":"Accessibility","group":"Clickable-parent","description":"Makes the entire card or list-item clickable via an absolutely-positioned child overlay link. Apply to the container; place sf-clickable-parent__overlay on the .","optional":false,"layer":"slashed.accessibility"},{"name":"sf-clickable-parent__overlay","selector":".sf-clickable-parent__overlay","kind":"accessibility","category":"Accessibility","group":"Clickable-parent","description":"The full-bleed overlay link inside an sf-clickable-parent. Stretches to cover the parent and uses pointer-events to let interactive children keep their own clicks.","optional":false,"layer":"slashed.accessibility"},{"name":"sf-cluster","selector":".sf-cluster","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Flex-wrap row of variable-width items with automatic gap. Children wrap when the container is too narrow. Use for tag lists, button groups, and icon rows.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--2xl","selector":".sf-cluster--2xl","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with 2xl gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--between","selector":".sf-cluster--between","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant that distributes items with space-between alignment.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--center","selector":".sf-cluster--center","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant that centers the item row horizontally.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--end","selector":".sf-cluster--end","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant that aligns items to the inline end (right in LTR).","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--l","selector":".sf-cluster--l","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with large (l) gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--m","selector":".sf-cluster--m","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with medium (m) gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--no-wrap","selector":".sf-cluster--no-wrap","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant that prevents item wrapping (single-line row).","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--s","selector":".sf-cluster--s","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with small (s) gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--xl","selector":".sf-cluster--xl","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with xl gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--xs","selector":".sf-cluster--xs","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with xs gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-color-pulse","selector":".sf-color-pulse","kind":"motion","category":"Motion / animation","group":"@property color animation","description":"Applies a gentle color-pulse animation to draw attention to a dynamic value change (e.g. a counter updating). Scoped to users who have not requested reduced motion.","optional":false,"layer":"slashed.motion"},{"name":"sf-container","selector":".sf-container","kind":"layout","category":"Layout primitives","group":"Section","description":"Max-width page container, centered with auto side gutters. Establishes a named inline-size container (cq-container) for container queries. Default width is --sf-container-m.","optional":false,"layer":"slashed.layout"},{"name":"sf-container--full","selector":".sf-container--full","kind":"layout","category":"Layout primitives","group":"Container","description":"Container variant that spans the full viewport width (no max-width cap).","optional":false,"layer":"slashed.layout"},{"name":"sf-container--narrow","selector":".sf-container--narrow","kind":"layout","category":"Layout primitives","group":"Container","description":"Container variant with a narrower max-width (--sf-container-s). Use for single-column prose and forms.","optional":false,"layer":"slashed.layout"},{"name":"sf-container--prose","selector":".sf-container--prose","kind":"layout","category":"Layout primitives","group":"Container","description":"Container variant with a prose-optimised max-width (--sf-container-prose). Ideal for long-form reading content.","optional":false,"layer":"slashed.layout"},{"name":"sf-container--wide","selector":".sf-container--wide","kind":"layout","category":"Layout primitives","group":"Container","description":"Container variant with a wider max-width (--sf-container-l). Use for dashboards and wide media.","optional":false,"layer":"slashed.layout"},{"name":"sf-content-auto","selector":".sf-content-auto","kind":"macro","category":"Macro classes","group":"Content visibility","description":"Sets content-visibility: auto on the element. The browser skips rendering off-screen content, improving LCP for long pages.","optional":false,"layer":"slashed.macros"},{"name":"sf-content-grid","selector":".sf-content-grid","kind":"layout","category":"Layout primitives","group":"Content grid (breakout pattern)","description":"Holy-grail content grid with named areas: full-bleed, popout, and content columns. Use sf-breakout on children to escape the content column.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover","selector":".sf-cover","kind":"layout","category":"Layout primitives","group":"Cover","description":"Vertically stretches to at least a viewport height with a centered element (sf-cover__center). Typical use: hero sections.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover__center","selector":".sf-cover__center","kind":"layout","category":"Layout primitives","group":"Cover","description":"The centered focal element inside an sf-cover. Stays vertically centered even when the cover content is shorter than the viewport.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover--max","selector":".sf-cover--max","kind":"layout","category":"Layout primitives","group":"Cover","description":"Cover variant that uses a max-height instead of min-height for the viewport constraint.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover--min","selector":".sf-cover--min","kind":"layout","category":"Layout primitives","group":"Cover","description":"Cover variant that reduces the minimum height to half a viewport.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover--padding-l","selector":".sf-cover--padding-l","kind":"layout","category":"Layout primitives","group":"Cover","description":"Cover variant with large vertical padding above and below the centered content.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover--padding-s","selector":".sf-cover--padding-s","kind":"layout","category":"Layout primitives","group":"Cover","description":"Cover variant with small vertical padding above and below the centered content.","optional":false,"layer":"slashed.layout"},{"name":"sf-cq","selector":".sf-cq","kind":"layout","category":"Layout primitives","group":"Container query context","description":"Assigns an inline-size container context to any element. Children can then use @container rules or container-query-aware tokens.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider","selector":".sf-divider","kind":"layout","category":"Layout primitives","group":"Divider","description":"Horizontal rule (divider line). Uses --sf-divider-* tokens for color, width, and style. Modifiers change dash style or orientation.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--dashed","selector":".sf-divider--dashed","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant with a dashed stroke.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--dotted","selector":".sf-divider--dotted","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant with a dotted stroke.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--gradient","selector":".sf-divider--gradient","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant rendered as a gradient that fades to transparent at both ends.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--soft","selector":".sf-divider--soft","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant with reduced opacity (subtle separator).","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--strong","selector":".sf-divider--strong","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant with stronger/darker color for a more prominent separator.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--vertical","selector":".sf-divider--vertical","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant rendered as a vertical line. Use inside flex or grid containers.","optional":false,"layer":"slashed.layout"},{"name":"sf-entrance--fade","selector":".sf-entrance--fade","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in as it enters the viewport. Animation tied to scroll progress via animation-timeline.","optional":false,"layer":"slashed.motion"},{"name":"sf-entrance--fade-down","selector":".sf-entrance--fade-down","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in while moving downward into position.","optional":false,"layer":"slashed.motion"},{"name":"sf-entrance--fade-left","selector":".sf-entrance--fade-left","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in while moving from the right toward the left.","optional":false,"layer":"slashed.motion"},{"name":"sf-entrance--fade-right","selector":".sf-entrance--fade-right","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in while moving from the left toward the right.","optional":false,"layer":"slashed.motion"},{"name":"sf-entrance--fade-up","selector":".sf-entrance--fade-up","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in while moving upward into position.","optional":false,"layer":"slashed.motion"},{"name":"sf-entrance--scale-up","selector":".sf-entrance--scale-up","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in while scaling up from a slightly smaller size.","optional":false,"layer":"slashed.motion"},{"name":"sf-equal","selector":".sf-equal","kind":"layout","category":"Layout primitives","group":"Equal columns (intrinsically responsive)","description":"Auto-fill equal-columns grid. Columns fill the row and wrap when they hit --sf-equal-min-col. No breakpoints needed.","optional":false,"layer":"slashed.layout"},{"name":"sf-equal--2","selector":".sf-equal--2","kind":"layout","category":"Layout primitives","group":"Equal columns (intrinsically responsive)","description":"Equal-columns variant locked to 2 columns using --sf-equal-min-col-2.","optional":false,"layer":"slashed.layout"},{"name":"sf-equal--3","selector":".sf-equal--3","kind":"layout","category":"Layout primitives","group":"Equal columns (intrinsically responsive)","description":"Equal-columns variant locked to 3 columns using --sf-equal-min-col-3.","optional":false,"layer":"slashed.layout"},{"name":"sf-equal--4","selector":".sf-equal--4","kind":"layout","category":"Layout primitives","group":"Equal columns (intrinsically responsive)","description":"Equal-columns variant locked to 4 columns using --sf-equal-min-col-4.","optional":false,"layer":"slashed.layout"},{"name":"sf-equal--6","selector":".sf-equal--6","kind":"layout","category":"Layout primitives","group":"Equal columns (intrinsically responsive)","description":"Equal-columns variant locked to 6 columns using --sf-equal-min-col-6.","optional":false,"layer":"slashed.layout"},{"name":"sf-equal-height","selector":".sf-equal-height","kind":"macro","category":"Macro classes","group":"Equal height","description":"Forces all flex children to equal height (align-items: stretch). Use on a flex row to make cards in a grid share the tallest card's height.","optional":false,"layer":"slashed.macros"},{"name":"sf-fade-in","selector":".sf-fade-in","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot fade-in animation (opacity 0 → 1). Scoped to no-preference so it stops automatically for reduced-motion users.","optional":false,"layer":"slashed.motion"},{"name":"sf-fade-out","selector":".sf-fade-out","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot fade-out animation (opacity 1 → 0). Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-flow","selector":".sf-flow","kind":"macro","category":"Macro classes","group":"Flow","description":"Applies --sf-flow-space as margin-block-start to all direct children except the first. Establishes consistent vertical rhythm in prose-like containers.","optional":false,"layer":"slashed.macros"},{"name":"sf-focus-parent","selector":".sf-focus-parent","kind":"accessibility","category":"Accessibility","group":"Focus-parent","description":"Forwards focus-visible styling to this container when any descendant is keyboard-focused. Useful for custom controls that wrap a visually-hidden .","optional":false,"layer":"slashed.accessibility"},{"name":"sf-focus-shadow","selector":".sf-focus-shadow","kind":"accessibility","category":"Accessibility","group":"Focus-shadow opt-in","description":"Applies the standard focus ring as a box-shadow to any element. Use on custom controls where the native :focus-visible ring doesn't render correctly.","optional":false,"layer":"slashed.accessibility"},{"name":"sf-frame","selector":".sf-frame","kind":"layout","category":"Layout primitives","group":"Frame","description":"Aspect-ratio container for media (images, video, maps). Children fill and cover the fixed-ratio box. Default ratio is 16:9.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--3-2","selector":".sf-frame--3-2","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to a 3:2 aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--4-3","selector":".sf-frame--4-3","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to a 4:3 aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--cinema","selector":".sf-frame--cinema","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to a cinematic 21:9 aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--golden","selector":".sf-frame--golden","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to the golden ratio (1.618:1).","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--portrait","selector":".sf-frame--portrait","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to a portrait 2:3 aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--square","selector":".sf-frame--square","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to a square 1:1 aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--video","selector":".sf-frame--video","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to the standard 16:9 video aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-full-bleed","selector":".sf-full-bleed","kind":"layout","category":"Layout primitives","group":"Content grid (breakout pattern)","description":"Forces an element to span the full viewport width, breaking out of any centered container. Use for full-bleed images and section backgrounds.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap","selector":".sf-gap","kind":"layout","category":"Layout primitives","group":"Gap","description":"Injects the default --sf-gap into an existing flex or grid container without imposing display:flex itself. Use when the parent is already a flex or grid.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--2xl","selector":".sf-gap--2xl","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with 2xl gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--l","selector":".sf-gap--l","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with large (l) gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--m","selector":".sf-gap--m","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with medium (m) gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--s","selector":".sf-gap--s","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with small (s) gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--xl","selector":".sf-gap--xl","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with xl gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--xs","selector":".sf-gap--xs","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with xs gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid","selector":".sf-grid","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Auto-fill CSS grid. Columns are sized with RAM pattern (Repeat, Auto-fill, Minmax) and wrap automatically. Default column min-width is --sf-grid-min-col.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--2xl","selector":".sf-grid--2xl","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with a 2xl minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--dense","selector":".sf-grid--dense","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with grid-auto-flow: dense, allowing the grid to fill holes created by span modifiers.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--fit","selector":".sf-grid--fit","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant that switches from auto-fill to auto-fit, collapsing empty columns.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--l","selector":".sf-grid--l","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with a large (l) minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--m","selector":".sf-grid--m","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with a medium (m) minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--s","selector":".sf-grid--s","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with a small (s) minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--xl","selector":".sf-grid--xl","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with an xl minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--xs","selector":".sf-grid--xs","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with an xs minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-1","selector":".sf-grid-cols-1","kind":"layout","category":"Layout primitives","group":"Single-column grid","description":"Single-column layout (forces all children to one column).","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-1-2","selector":".sf-grid-cols-1-2","kind":"layout","category":"Layout primitives","group":"Ratio grids","description":"Two-column ratio grid: first child takes 1fr, second takes 2fr. Container-query responsive.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-1-3","selector":".sf-grid-cols-1-3","kind":"layout","category":"Layout primitives","group":"Ratio grids","description":"Two-column ratio grid: first child takes 1fr, second takes 3fr. Container-query responsive.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-2","selector":".sf-grid-cols-2","kind":"layout","category":"Layout primitives","group":"Fixed column grids (container-query responsive)","description":"Responsive 2-column fixed grid. Uses container queries to collapse to one column on narrow containers.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-2-1","selector":".sf-grid-cols-2-1","kind":"layout","category":"Layout primitives","group":"Ratio grids","description":"Two-column ratio grid: first child takes 2fr, second takes 1fr. Container-query responsive.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-3","selector":".sf-grid-cols-3","kind":"layout","category":"Layout primitives","group":"Fixed column grids (container-query responsive)","description":"Responsive 3-column fixed grid. Collapses progressively on narrow containers.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-3-1","selector":".sf-grid-cols-3-1","kind":"layout","category":"Layout primitives","group":"Ratio grids","description":"Two-column ratio grid: first child takes 3fr, second takes 1fr. Container-query responsive.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-4","selector":".sf-grid-cols-4","kind":"layout","category":"Layout primitives","group":"Fixed column grids (container-query responsive)","description":"Responsive 4-column fixed grid. Collapses progressively on narrow containers.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-6","selector":".sf-grid-cols-6","kind":"layout","category":"Layout primitives","group":"Fixed column grids (container-query responsive)","description":"Responsive 6-column fixed grid. Collapses progressively on narrow containers.","optional":false,"layer":"slashed.layout"},{"name":"sf-icon","selector":".sf-icon","kind":"layout","category":"Layout primitives","group":"Icon","description":"Inline icon sizing primitive. Sets width and height to --sf-icon-m via em-based tokens so the icon scales with the surrounding text.","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--2xl","selector":".sf-icon--2xl","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-2xl (extra-extra-large).","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--boxed","selector":".sf-icon--boxed","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant with a square bordered box background. Useful for standalone icon buttons and feature icons.","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--l","selector":".sf-icon--l","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-l (large).","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--m","selector":".sf-icon--m","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-m (medium, same as base sf-icon).","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--s","selector":".sf-icon--s","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-s (small).","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--xl","selector":".sf-icon--xl","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-xl (extra-large).","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--xs","selector":".sf-icon--xs","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-xs (extra-small).","optional":false,"layer":"slashed.layout"},{"name":"sf-imposter","selector":".sf-imposter","kind":"layout","category":"Layout primitives","group":"Imposter","description":"Absolutely positions an element at the center of its nearest positioned ancestor. Use for overlays, badges, and floating labels.","optional":false,"layer":"slashed.layout"},{"name":"sf-imposter--contain","selector":".sf-imposter--contain","kind":"layout","category":"Layout primitives","group":"Imposter","description":"Imposter variant that clamps the element within the bounds of its parent using overflow:hidden on the parent.","optional":false,"layer":"slashed.layout"},{"name":"sf-imposter--fixed","selector":".sf-imposter--fixed","kind":"layout","category":"Layout primitives","group":"Imposter","description":"Imposter variant that uses position:fixed instead of absolute. Use for viewport-level overlays and modals.","optional":false,"layer":"slashed.layout"},{"name":"sf-line-clamp-2","selector":".sf-line-clamp-2","kind":"macro","category":"Macro classes","group":"Truncate / line-clamp","description":"Clamps text to 2 lines with an ellipsis. Applies -webkit-line-clamp: 2.","optional":false,"layer":"slashed.macros"},{"name":"sf-line-clamp-3","selector":".sf-line-clamp-3","kind":"macro","category":"Macro classes","group":"Truncate / line-clamp","description":"Clamps text to 3 lines with an ellipsis. Applies -webkit-line-clamp: 3.","optional":false,"layer":"slashed.macros"},{"name":"sf-line-clamp-N","selector":".sf-line-clamp-N","kind":"macro","category":"Macro classes","group":"Truncate / line-clamp","description":"Clamps text to a custom N lines. Set --sf-line-clamp on the element to control the number of visible lines.","optional":false,"layer":"slashed.macros"},{"name":"sf-link--reverse","selector":".sf-link--reverse","kind":"macro","category":"Macro classes","group":"Link variants","description":"Link color modifier: reverses the default link color to work on dark/inverted backgrounds. Sets color to --sf-color-text--inverse.","optional":false,"layer":"slashed.macros"},{"name":"sf-link--subtle","selector":".sf-link--subtle","kind":"macro","category":"Macro classes","group":"Link variants","description":"Link color modifier: renders the link in the body text color instead of the default action color. Underline still indicates the link on hover.","optional":false,"layer":"slashed.macros"},{"name":"sf-link-external","selector":".sf-link-external","kind":"macro","category":"Macro classes","group":"External link indication","description":"Automatically appends an external-link icon (via ::after content) to indicate the link opens in a new tab or goes to an external domain.","optional":false,"layer":"slashed.macros"},{"name":"sf-no-tap-highlight","selector":".sf-no-tap-highlight","kind":"macro","category":"Macro classes","group":"No tap highlight","description":"Removes the mobile tap highlight color (-webkit-tap-highlight-color: transparent). Use on interactive elements with a custom active state.","optional":false,"layer":"slashed.macros"},{"name":"sf-not-prose","selector":".sf-not-prose","kind":"macro","category":"Macro classes","group":"Prose","description":"Opt-out of sf-prose typography styles within a prose block. Apply to an element that should keep default browser or component styles.","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade","selector":".sf-overflow-fade","kind":"macro","category":"Macro classes","group":"Overflow fade","description":"Adds a gradient fade at the inline-end of an overflowing element to hint at hidden content. Use inside sf-reel or any scroll container.","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--block","selector":".sf-overflow-fade--block","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades both the top and bottom edges simultaneously (block axis).","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--bottom","selector":".sf-overflow-fade--bottom","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades the bottom (block-end) edge.","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--inline","selector":".sf-overflow-fade--inline","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades both the left and right edges simultaneously (inline axis).","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--left","selector":".sf-overflow-fade--left","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades the left (inline-start) edge.","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--right","selector":".sf-overflow-fade--right","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades the right (inline-end) edge. Explicit alias for the default sf-overflow-fade behaviour.","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--top","selector":".sf-overflow-fade--top","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades the top (block-start) edge.","optional":false,"layer":"slashed.macros"},{"name":"sf-pancake","selector":".sf-pancake","kind":"layout","category":"Layout primitives","group":"Pancake (sticky footer)","description":"Three-row layout (header, main, footer) where main takes all remaining vertical space via flex-grow. The footer always sticks to the bottom on tall viewports.","optional":false,"layer":"slashed.layout"},{"name":"sf-prose","selector":".sf-prose","kind":"macro","category":"Macro classes","group":"Prose","description":"Opinionated typographic defaults for long-form content: heading hierarchy, paragraph spacing, blockquote, code, and list styling. Override with sf-not-prose.","optional":false,"layer":"slashed.macros"},{"name":"sf-reel","selector":".sf-reel","kind":"layout","category":"Layout primitives","group":"Reel","description":"Horizontally scrollable row of fixed-height items with snap scrolling. Children don't shrink below their intrinsic width, creating a card carousel effect.","optional":false,"layer":"slashed.layout"},{"name":"sf-scale-down","selector":".sf-scale-down","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot scale-down animation (element shrinks from full size). Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-scale-up","selector":".sf-scale-up","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot scale-up animation (element grows from smaller size). Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-scrim","selector":".sf-scrim","kind":"macro","category":"Macro classes","group":"Scrim","description":"Overlay container with a gradient darkening scrim behind text placed on an image or colored background.","optional":false,"layer":"slashed.macros"},{"name":"sf-scrim__content","selector":".sf-scrim__content","kind":"macro","category":"Macro classes","group":"Scrim","description":"Content area inside an sf-scrim. Positioned above the gradient overlay layer.","optional":false,"layer":"slashed.macros"},{"name":"sf-scrim--bottom","selector":".sf-scrim--bottom","kind":"macro","category":"Macro classes","group":"Scrim","description":"Scrim variant with the gradient emanating from the bottom edge (bottom-to-top fade).","optional":false,"layer":"slashed.macros"},{"name":"sf-scrim--full","selector":".sf-scrim--full","kind":"macro","category":"Macro classes","group":"Scrim","description":"Scrim variant that covers the entire surface with a uniform translucent overlay.","optional":false,"layer":"slashed.macros"},{"name":"sf-scrim--top","selector":".sf-scrim--top","kind":"macro","category":"Macro classes","group":"Scrim","description":"Scrim variant with the gradient emanating from the top edge (top-to-bottom fade).","optional":false,"layer":"slashed.macros"},{"name":"sf-scroll-shadow","selector":".sf-scroll-shadow","kind":"macro","category":"Macro classes","group":"Scroll shadow","description":"Adds inset box-shadows at the top and bottom of a scrollable container to indicate hidden overflow above or below.","optional":false,"layer":"slashed.macros"},{"name":"sf-scroll-snap","selector":".sf-scroll-snap","kind":"macro","category":"Macro classes","group":"Scroll snap","description":"Enables CSS scroll-snap-type: x mandatory on a horizontal scroll container. Children should have scroll-snap-align.","optional":false,"layer":"slashed.macros"},{"name":"sf-section","selector":".sf-section","kind":"layout","category":"Layout primitives","group":"Section","description":"Full-width page section with vertical padding (--sf-section-pad-default). Use to create visually distinct content bands.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--2xl","selector":".sf-section--2xl","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with 2xl vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--collapse","selector":".sf-section--collapse","kind":"layout","category":"Layout primitives","group":"Collapse modifier","description":"Section variant that removes vertical padding (zero-padding section for adjacent same-color blocks).","optional":false,"layer":"slashed.layout"},{"name":"sf-section--guttered","selector":".sf-section--guttered","kind":"layout","category":"Layout primitives","group":"Section","description":"Adds horizontal page gutters directly to a section — use when you want to skip a separate .sf-container wrapper (gutterless layout inside section). Neutralises container gutter to prevent double padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--l","selector":".sf-section--l","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with large (l) vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--m","selector":".sf-section--m","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with medium (m) vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--s","selector":".sf-section--s","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with small (s) vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--xl","selector":".sf-section--xl","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with xl vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--xs","selector":".sf-section--xs","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with xs vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section-group","selector":".sf-section-group","kind":"layout","category":"Layout primitives","group":"Section","description":"Groups adjacent sf-section elements so their combined padding collapses correctly at the top and bottom edges.","optional":false,"layer":"slashed.layout"},{"name":"sf-sidebar","selector":".sf-sidebar","kind":"layout","category":"Layout primitives","group":"Sidebar","description":"Two-column sidebar layout: first child is the sidebar, second child is main content. The sidebar collapses below the breakpoint (--sf-sidebar-min-width). Default sidebar on the left.","optional":false,"layer":"slashed.layout"},{"name":"sf-sidebar--narrow","selector":".sf-sidebar--narrow","kind":"layout","category":"Layout primitives","group":"Sidebar","description":"Sidebar variant with a narrower sidebar column.","optional":false,"layer":"slashed.layout"},{"name":"sf-sidebar--right","selector":".sf-sidebar--right","kind":"layout","category":"Layout primitives","group":"Sidebar","description":"Sidebar variant with the sidebar on the right (second child becomes the sidebar).","optional":false,"layer":"slashed.layout"},{"name":"sf-sidebar--wide","selector":".sf-sidebar--wide","kind":"layout","category":"Layout primitives","group":"Sidebar","description":"Sidebar variant with a wider sidebar column.","optional":false,"layer":"slashed.layout"},{"name":"sf-slide-in-down","selector":".sf-slide-in-down","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot slide-in-from-above animation. Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-slide-in-left","selector":".sf-slide-in-left","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot slide-in-from-right animation (slides to the left). Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-slide-in-right","selector":".sf-slide-in-right","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot slide-in-from-left animation (slides to the right). Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-slide-in-up","selector":".sf-slide-in-up","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot slide-in-from-below animation. Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-stack","selector":".sf-stack","kind":"layout","category":"Layout primitives","group":"Stack","description":"Flex column with even vertical spacing between children (--sf-stack-gap). Stacking context for vertical rhythm.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--2xl","selector":".sf-stack--2xl","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with 2xl gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--center","selector":".sf-stack--center","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant that centers children on the cross axis.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--end","selector":".sf-stack--end","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant that aligns children to the cross-axis end (right in LTR).","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--l","selector":".sf-stack--l","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with large (l) gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--m","selector":".sf-stack--m","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with medium (m) gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--s","selector":".sf-stack--s","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with small (s) gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--stretch","selector":".sf-stack--stretch","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant that stretches children to fill the full available width.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--xl","selector":".sf-stack--xl","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with xl gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--xs","selector":".sf-stack--xs","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with xs gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-subgrid","selector":".sf-subgrid","kind":"layout","category":"Layout primitives","group":"Subgrid","description":"Passes the parent grid columns through to children via subgrid. Place on a grid item that should align its own children to the outer grid columns.","optional":false,"layer":"slashed.layout"},{"name":"sf-subgrid-rows","selector":".sf-subgrid-rows","kind":"layout","category":"Layout primitives","group":"Subgrid","description":"Passes the parent grid rows through to children via subgrid. Place on a grid item that should align its own children to the outer grid rows.","optional":false,"layer":"slashed.layout"},{"name":"sf-surface","selector":".sf-surface","kind":"macro","category":"Macro classes","group":"Surface","description":"Generic semantic surface: applies --sf-surface-color as the background and automatically sets a contrasting text color. Tone variants (--primary, --action, etc.) activate preset palettes.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--action","selector":".sf-surface--action","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the action color palette (button/CTA primary color).","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--danger","selector":".sf-surface--danger","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the danger status palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--info","selector":".sf-surface--info","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the info status palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--inverse","selector":".sf-surface--inverse","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant that inverts light/dark, creating an always-dark surface in light mode and always-light in dark mode.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--neutral","selector":".sf-surface--neutral","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the neutral palette (muted/gray).","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--primary","selector":".sf-surface--primary","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the primary brand color palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--secondary","selector":".sf-surface--secondary","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the secondary brand color palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--success","selector":".sf-surface--success","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the success status palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--tertiary","selector":".sf-surface--tertiary","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the tertiary brand color palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--warning","selector":".sf-surface--warning","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the warning status palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-switcher","selector":".sf-switcher","kind":"layout","category":"Layout primitives","group":"Switcher","description":"Flex layout that switches from a horizontal row to a vertical column when the container is narrower than --sf-switcher-threshold.","optional":false,"layer":"slashed.layout"},{"name":"sf-switcher--no-wrap","selector":".sf-switcher--no-wrap","kind":"layout","category":"Layout primitives","group":"Switcher","description":"Switcher variant that stays horizontal and never wraps (single-line regardless of container width).","optional":false,"layer":"slashed.layout"},{"name":"sf-switcher--vertical","selector":".sf-switcher--vertical","kind":"layout","category":"Layout primitives","group":"Switcher","description":"Switcher variant that starts in the vertical (stacked) direction on all sizes.","optional":false,"layer":"slashed.layout"},{"name":"sf-tabular-nums","selector":".sf-tabular-nums","kind":"macro","category":"Macro classes","group":"Tabular figures","description":"Forces tabular (monospaced) number rendering. Use on price tables, counters, and anywhere numbers need to align vertically across rows.","optional":false,"layer":"slashed.macros"},{"name":"sf-text-gradient","selector":".sf-text-gradient","kind":"macro","category":"Macro classes","group":"Text gradient","description":"Applies a brand gradient to inline text. Sets the background to the gradient, clips it to the text, and makes the text color transparent.","optional":false,"layer":"slashed.macros"},{"name":"sf-text-protect","selector":".sf-text-protect","kind":"macro","category":"Macro classes","group":"Text protect","description":"Wraps text in a translucent dark gradient overlay to ensure legibility when placed over a light or variable background image.","optional":false,"layer":"slashed.macros"},{"name":"sf-theme-transition","selector":".sf-theme-transition","kind":"theme","category":"Theme utilities","group":"OPT-IN THEME CROSS-FADE","description":"Opt-in animated light/dark theme crossfade. Apply to  (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration.","optional":false,"layer":"slashed.themes"},{"name":"sf-truncate","selector":".sf-truncate","kind":"macro","category":"Macro classes","group":"Truncate / line-clamp","description":"Single-line text overflow with ellipsis. Equivalent to the classic text-overflow: ellipsis trio (white-space nowrap, overflow hidden, text-overflow ellipsis).","optional":false,"layer":"slashed.macros"},{"name":"skip-link","selector":".skip-link","kind":"accessibility","category":"Accessibility","group":"Skip link","description":"Accessible skip-navigation link. Hidden until focused; jumps keyboard users past repeated navigation blocks. Place as the very first element in .","optional":false,"layer":"slashed.accessibility"},{"name":"sr-only","selector":".sr-only","kind":"accessibility","category":"Accessibility","group":"Screen-reader-only. Atomic contract: a partial override","description":"Visually hides content while keeping it accessible to screen readers. Use for labels, descriptions, and off-screen text that assistive technology needs.","optional":false,"layer":"slashed.accessibility"},{"name":"sr-only-focusable","selector":".sr-only-focusable","kind":"accessibility","category":"Accessibility","group":"Screen-reader-only. Atomic contract: a partial override","description":"Extends sr-only — also reveals the element when it receives keyboard focus. Typical use: skip links and visually-hidden focus targets.","optional":false,"layer":"slashed.accessibility"},{"name":"theme-transition","selector":".theme-transition","kind":"theme","category":"Theme example","group":"5. SMOOTH THEME-TRANSITION HELPER","description":"Internal helper class used by the sf-theme-transition macro. Applies per-property transitions to registered color tokens during light/dark mode switches.","optional":true,"layer":"slashed.themes"}]`),jh={classes:Fh},Gh={generatedBy:"configurator/scripts/sync-api.mjs",source:"docs/api-index.json",tokensHash:"29dec6de6d0c",bundles:["full","optimal","optimal-components","optimal-utilities"],counts:{tokens:685,byTier:{PUBLIC:629,"PUBLIC-ADVANCED":55,INTERNAL:1},byCategory:{"Layout tokens":54,"Core tokens":602,"Macro tokens":23,"Component tokens":6}}},Hh=JSON.parse(`[{"name":"--sf-alternate-gap","tier":"PUBLIC","role":"consumption","namespace":"alternate","category":"Layout tokens","group":"Alternate (zigzag)","description":"Gap tokens for the alternating content/media (zigzag) layout.","note":"Gap between items in the alternating zigzag layout.","value":"var(--sf-content-gap)","aliasOf":"--sf-content-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-alternate-inner-gap","tier":"PUBLIC","role":"consumption","namespace":"alternate","category":"Layout tokens","group":"Alternate (zigzag)","description":"Gap tokens for the alternating content/media (zigzag) layout.","note":"Gap between content and media within each zigzag item.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-blink","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Blinking visibility loop. Use for cursor indicators or critical attention cues. Respect prefers-reduced-motion.","value":"sf-blink calc(1s * var(--sf-motion-scale)) steps(1, end) infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-color-pulse","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Pulsing color loop. Use for live-status badges (recording, live). Respect prefers-reduced-motion.","value":"sf-color-pulse var(--sf-duration-slow) var(--sf-ease-in-out) infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-delay-1","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Shortest stagger delay. Apply to the first element in a sequentially animated group.","value":"calc(75ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-delay-2","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Second stagger delay step.","value":"calc(150ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-delay-3","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Third stagger delay step.","value":"calc(225ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-delay-4","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Fourth stagger delay step.","value":"calc(300ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-delay-5","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Longest stagger delay. Apply to the last element in a sequentially animated group.","value":"calc(375ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-fade-in","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Fade-in entrance animation shorthand. Use directly as animation property value.","value":"sf-fade-in var(--sf-duration-normal) var(--sf-ease-out) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-fade-out","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Fade-out exit animation shorthand.","value":"sf-fade-out var(--sf-duration-normal) var(--sf-ease-in) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-float","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Gentle floating / levitating loop. Use for hero illustrations or floating UI elements. Decorative — disable for prefers-reduced-motion.","value":"sf-float calc(3s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-ping","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Expanding ping / ripple loop. Use for notification badges and live-indicator dots.","value":"sf-ping var(--sf-duration-slow) var(--sf-ease-out) infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-scale-down","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Scale-down exit animation. Pairs with --sf-animation-scale-up for enter/leave transitions.","value":"sf-scale-down var(--sf-duration-normal) var(--sf-ease-in) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-scale-up","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Scale-up entrance animation. Use for modals, popovers, and tooltips appearing.","value":"sf-scale-up var(--sf-duration-normal) var(--sf-ease-overshoot) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-shimmer","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Shimmer / skeleton-loading sweep. Apply on placeholder elements while content loads.","value":"sf-shimmer calc(1.5s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-slide-in-down","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Slide-in from above. Use for dropdown menus and top-attached sheets.","value":"sf-slide-in-down var(--sf-duration-normal) var(--sf-ease-out) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-slide-in-left","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Slide-in from the left. Use for left-side drawers and navigation panels.","value":"sf-slide-in-left var(--sf-duration-normal) var(--sf-ease-out) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-slide-in-right","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Slide-in from the right. Use for right-side drawers and detail panels.","value":"sf-slide-in-right var(--sf-duration-normal) var(--sf-ease-out) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-slide-in-up","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Slide-in from below. Use for bottom sheets, toasts, and floating action buttons.","value":"sf-slide-in-up var(--sf-duration-normal) var(--sf-ease-out) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-spin","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Continuous rotation loop. Use for loading spinners and progress indicators.","value":"sf-spin var(--sf-duration-slower) linear infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-aspect","tier":"PUBLIC","role":"knob","namespace":"aspect","category":"Macro tokens","group":"Aspect ratio","description":"Aspect-ratio value for the .aspect-ratio macro.","note":"Aspect ratio value for the .aspect-ratio macro.","value":"16 / 9","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bento-cols-default","tier":"PUBLIC","role":"knob","namespace":"bento","category":"Layout tokens","group":"Bento grid","description":"Configuration tokens for the bento-grid layout primitive.","note":"Default column count for the bento grid.","value":"4","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bento-gap","tier":"PUBLIC","role":"consumption","namespace":"bento","category":"Layout tokens","group":"Bento grid","description":"Configuration tokens for the bento-grid layout primitive.","note":"Gap between bento grid cells.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bento-row-compact","tier":"PUBLIC","role":"knob","namespace":"bento","category":"Layout tokens","group":"Bento grid","description":"Configuration tokens for the bento-grid layout primitive.","note":"Row height for compact-variant bento items.","value":"6rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bento-row-default","tier":"PUBLIC","role":"knob","namespace":"bento","category":"Layout tokens","group":"Bento grid","description":"Configuration tokens for the bento-grid layout primitive.","note":"Default row height for standard bento grid cells.","value":"10rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bento-row-tall","tier":"PUBLIC","role":"knob","namespace":"bento","category":"Layout tokens","group":"Bento grid","description":"Configuration tokens for the bento-grid layout primitive.","note":"Tall row height for visually prominent or hero bento cells.","value":"16rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bg-fit","tier":"PUBLIC","role":"knob","namespace":"bg","category":"Layout tokens","group":"Background layer (.sf-bg)","description":"object-fit applied to .sf-bg when used as a bare media element, and to .sf-bg > img / video / picture children. Defaults to cover.","note":"object-fit applied to .sf-bg when used as a bare media element, and to .sf-bg > img / video / picture children. Defaults to cover.","value":"cover","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bg-inset","tier":"PUBLIC","role":"knob","namespace":"bg","category":"Layout tokens","group":"Background layer (.sf-bg)","description":"Inset from every edge of the parent. A single length applied uniformly; the layer size is derived from it so a non-zero inset still fills correctly.","note":"Inset from every edge of the parent. A single length applied uniformly; the layer size is derived from it so a non-zero inset still fills correctly.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bg-position","tier":"PUBLIC","role":"knob","namespace":"bg","category":"Layout tokens","group":"Background layer (.sf-bg)","description":"object-position controlling where the media is anchored within the layer. Defaults to center (50% 50%).","note":"object-position controlling where the media is anchored within the layer. Defaults to center (50% 50%).","value":"50% 50%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bg-radius","tier":"PUBLIC","role":"knob","namespace":"bg","category":"Layout tokens","group":"Background layer (.sf-bg)","description":"border-radius applied to the .sf-bg layer and its img/video/picture children. Defaults to 0; set to match the parent's radius when clipping is needed.","note":"border-radius applied to the .sf-bg layer and its img/video/picture children. Defaults to 0; set to match the parent's radius when clipping is needed.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bg-z","tier":"PUBLIC","role":"knob","namespace":"bg","category":"Layout tokens","group":"Background layer (.sf-bg)","description":"z-index of the background layer. Defaults to -2 so it sits behind sibling content but above the parent's own background.","note":"z-index of the background layer. Defaults to -2 so it sits behind sibling content but above the parent's own background.","value":"-2","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-blur","tier":"PUBLIC","role":"knob","namespace":"blur","category":"Core tokens","group":"Blur & opacity","description":"Backdrop-filter blur scale and background-opacity tokens.","note":"Backdrop-filter blur amount for frosted-glass surfaces (navbars, overlays, dialogs). Default 12px. Pair with a semi-transparent background.","value":"12px","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-color","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Text color for body copy. Alias of --sf-color-text. Override here to deviate body text from the global text color.","value":"var(--sf-color-text)","aliasOf":"--sf-color-text","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-em-style","tier":"PUBLIC","role":"knob","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"font-style for  inside body text (italic by default). Override to suppress italics if your typeface has no italic variant.","value":"italic","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-font-family","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font family for body text. Alias of --sf-font-body.","value":"var(--sf-font-body)","aliasOf":"--sf-font-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-font-size","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Base font size for body paragraphs. Alias of --sf-text-m.","value":"var(--sf-text-m)","aliasOf":"--sf-text-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-font-weight","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for body text. Alias of --sf-font-weight-body.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-line-height","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for body paragraphs. Alias of --sf-leading-normal.","value":"var(--sf-leading-normal)","aliasOf":"--sf-leading-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-strong-weight","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for  inside body text. Override to choose a specific weight instead of inheriting bold.","value":"var(--sf-font-weight-strong)","aliasOf":"--sf-font-weight-strong","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-text-wrap","tier":"PUBLIC","role":"knob","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"text-wrap mode for body paragraphs. 'pretty' prevents orphaned last words; 'balance' equalises line lengths.","value":"pretty","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border shorthands","description":"Ready-to-use border shorthand values (width + style + color) for the three most common border weights.","note":"Default border shorthand (width + solid + color). Apply directly to border property.","value":"var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-scale","tier":"PUBLIC","role":"knob","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"Global border-width multiplier. Set to 0 for borderless UI; 0.5 for hairline-only; 2 to double all border widths across the system.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-strong","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border shorthands","description":"Ready-to-use border shorthand values (width + style + color) for the three most common border weights.","note":"Strong-emphasis border shorthand.","value":"var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-style","tier":"PUBLIC","role":"knob","namespace":"border","category":"Core tokens","group":"Border style","description":"Global border-style default (solid, dashed, etc.).","note":"Global border-style default applied across all border tokens.","value":"solid","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-subtle","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border shorthands","description":"Ready-to-use border shorthand values (width + style + color) for the three most common border weights.","note":"Low-contrast subtle border shorthand.","value":"var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-width-1","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"Standard 1px border width.","value":"calc(1px * var(--sf-border-scale, 1))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-width-2","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"Medium 2px border width. Common for focus outlines.","value":"calc(2px * var(--sf-border-scale, 1))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-width-3","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"Thick 3px border width.","value":"calc(3px * var(--sf-border-scale, 1))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-width-4","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"Extra-thick 4px border width for decorative borders.","value":"calc(4px * var(--sf-border-scale, 1))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-width-hairline","tier":"PUBLIC","role":"knob","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"1px border width (hairline).","value":"0.5px","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-box-border-color","tier":"PUBLIC","role":"consumption","namespace":"box","category":"Layout tokens","group":"Box","description":"Border, background, and padding tokens for the box layout primitive.","note":"Border color for the box layout primitive.","value":"var(--sf-color-border)","aliasOf":"--sf-color-border","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-box-border-width","tier":"PUBLIC","role":"knob","namespace":"box","category":"Layout tokens","group":"Box","description":"Border, background, and padding tokens for the box layout primitive.","note":"Border width for the box layout primitive.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-box-padding","tier":"PUBLIC","role":"consumption","namespace":"box","category":"Layout tokens","group":"Box","description":"Border, background, and padding tokens for the box layout primitive.","note":"Inner padding for the box layout primitive.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-breakout-width","tier":"PUBLIC","role":"consumption","namespace":"breakout","category":"Layout tokens","group":"Content grid (breakout pattern)","description":"Breakout width and content width for the content-grid pattern (full-bleed breakouts inside a constrained column).","note":"Width of full-bleed breakout elements inside a content grid.","value":"var(--sf-container-wide)","aliasOf":"--sf-container-wide","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-btn-padding-block","tier":"PUBLIC","role":"consumption","namespace":"btn","category":"Component tokens","group":"BUTTON TOKENS","description":"Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.","note":"","value":"var(--sf-space-xs)","aliasOf":"--sf-space-xs","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-btn-padding-inline","tier":"PUBLIC","role":"consumption","namespace":"btn","category":"Component tokens","group":"BUTTON TOKENS","description":"Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.","note":"","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-btn-radius","tier":"PUBLIC","role":"consumption","namespace":"btn","category":"Component tokens","group":"BUTTON TOKENS","description":"Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.","note":"","value":"var(--sf-radius-m)","aliasOf":"--sf-radius-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-caret-color","tier":"PUBLIC","role":"consumption","namespace":"caret","category":"Core tokens","group":"Focus / form colors","description":"Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.","note":"Cursor caret color inside text inputs and contenteditable elements.","value":"var(--sf-color-action)","aliasOf":"--sf-color-action","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-center-gutter","tier":"PUBLIC","role":"consumption","namespace":"center","category":"Layout tokens","group":"Center","description":"Max-width and gutter for the center layout primitive.","note":"Minimum side gutter for the center layout.","value":"var(--sf-gutter)","aliasOf":"--sf-gutter","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-center-max","tier":"PUBLIC","role":"consumption","namespace":"center","category":"Layout tokens","group":"Center","description":"Max-width and gutter for the center layout primitive.","note":"Maximum width for the center layout.","value":"var(--sf-container-default)","aliasOf":"--sf-container-default","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-cluster-align","tier":"PUBLIC","role":"knob","namespace":"cluster","category":"Layout tokens","group":"Cluster","description":"Configuration tokens for the cluster layout (inline wrapped items).","note":"Vertical alignment of cluster items (align-items value).","value":"center","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-cluster-gap","tier":"PUBLIC","role":"consumption","namespace":"cluster","category":"Layout tokens","group":"Cluster","description":"Configuration tokens for the cluster layout (inline wrapped items).","note":"Gap between wrapped inline items in the cluster layout.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-cluster-justify","tier":"PUBLIC","role":"knob","namespace":"cluster","category":"Layout tokens","group":"Cluster","description":"Configuration tokens for the cluster layout (inline wrapped items).","note":"Horizontal justification of the cluster (justify-content value).","value":"flex-start","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-code-font-size","tier":"PUBLIC","role":"knob","namespace":"code","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for inline  and 
. Usually slightly smaller than body text so monospace doesn't feel oversized.","value":"0.875em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Primary interactive color. Applied to filled buttons, active indicators, and brand accent surfaces.","value":"light-dark(var(--sf-color-action-source-light), var(--sf-color-action-source-dark, oklch(from var(--sf-color-action-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Action color at pressed/active brightness.","value":"var(--sf-color-action-xdark)","aliasOf":"--sf-color-action-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Action color at hover brightness.","value":"var(--sf-color-action-darker)","aliasOf":"--sf-color-action-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Very light action shade. Hover fills on white surfaces, badge backgrounds.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-100), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Light action shade. Subtle fills and outlined badge backgrounds.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-200), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Light-mid action shade. Borders on light backgrounds, low-emphasis fills.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-300), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Mid-light action shade. Disabled state fills, decorative accents.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-400), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Lightest action tint. Background fill for subtle action-tinted surfaces.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-50), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Mid action shade — the 'pure' hue. Accessible on both light and dark backgrounds.","value":"var(--sf-color-action)","aliasOf":"--sf-color-action","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Mid-dark action shade. Text on light surfaces, icon fills.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Dark action shade. Strong text and icon fills on light backgrounds.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Very dark action shade. High-contrast text on white.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Near-black action shade. Extreme contrast on white surfaces.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Darkest action tint. Near-black for dark-theme surface accents.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"10% opacity action tint. Subtle hover or selected-row background.","value":"oklch(from var(--sf-color-action) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"30% opacity action tint.","value":"oklch(from var(--sf-color-action) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"5% opacity action tint. Barely-there hover highlight.","value":"oklch(from var(--sf-color-action) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"50% opacity action tint. Mid-transparency badge or overlay.","value":"oklch(from var(--sf-color-action) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"80% opacity action tint.","value":"oklch(from var(--sf-color-action) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-darker","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Deep action shade for high-contrast contexts.","value":"var(--sf-color-action-600)","aliasOf":"--sf-color-action-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Near-transparent action tint for ghost-button hover backgrounds.","value":"var(--sf-color-action-a5)","aliasOf":"--sf-color-action-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-lighter","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Light action shade for soft accents.","value":"var(--sf-color-action-400)","aliasOf":"--sf-color-action-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Medium action fill — outlined button hover backgrounds.","value":"var(--sf-color-action-a30)","aliasOf":"--sf-color-action-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without  registration the browser cannot interpolate and transitions snap at 50%.","value":"oklch(0.70 0.198 235)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes.","note":"OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes.","value":"oklch(0.50 0.22 235)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Lightest action tint — selected rows, active nav, chips.","value":"var(--sf-color-action-a10)","aliasOf":"--sf-color-action-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-superdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Near-black action shade for maximum contrast on light surfaces.","value":"var(--sf-color-action-950)","aliasOf":"--sf-color-action-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-superlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Near-white action shade for maximum contrast on dark surfaces.","value":"var(--sf-color-action-50)","aliasOf":"--sf-color-action-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-xdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Extra-dark action shade.","value":"var(--sf-color-action-800)","aliasOf":"--sf-color-action-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-xlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Extra-light action shade.","value":"var(--sf-color-action-200)","aliasOf":"--sf-color-action-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Mode-adaptive base surface color. Drives the page canvas and the surface elevation family; not an interactive/brand role.","value":"light-dark(var(--sf-color-base-source-light), var(--sf-color-base-source-dark, oklch(from var(--sf-color-base-source-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Pressed/active surface derived from --sf-color-base for subtle background interactions.","value":"oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Hover-state surface derived from --sf-color-base for subtle background interactions.","value":"oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.04 + var(--sf-is-dark) * 0.08), 0.99) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Very light base-surface level.","value":"oklch(from var(--sf-color-base) 0.94 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Light base-surface level.","value":"oklch(from var(--sf-color-base) 0.88 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Light-mid base-surface level.","value":"oklch(from var(--sf-color-base) 0.78 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Mid-light base-surface level.","value":"oklch(from var(--sf-color-base) 0.65 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Lightest base-surface level.","value":"oklch(from var(--sf-color-base) 0.97 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Mid base-surface level.","value":"oklch(from var(--sf-color-base) 0.50 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Mid-dark base-surface level.","value":"oklch(from var(--sf-color-base) 0.37 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Dark base-surface level.","value":"oklch(from var(--sf-color-base) 0.27 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Very dark base-surface level.","value":"oklch(from var(--sf-color-base) 0.17 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Near-black base-surface level.","value":"oklch(from var(--sf-color-base) 0.11 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Darkest base-surface level.","value":"oklch(from var(--sf-color-base) 0.06 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"10% opacity base-surface tint.","value":"oklch(from var(--sf-color-base) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"30% opacity base-surface tint.","value":"oklch(from var(--sf-color-base) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"5% opacity base-surface tint.","value":"oklch(from var(--sf-color-base) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"50% opacity base-surface tint.","value":"oklch(from var(--sf-color-base) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"80% opacity base-surface tint.","value":"oklch(from var(--sf-color-base) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Near-transparent base-surface tint for ghost backgrounds.","value":"var(--sf-color-base-a5)","aliasOf":"--sf-color-base-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Medium base-surface fill for muted containers or overlays.","value":"var(--sf-color-base-a30)","aliasOf":"--sf-color-base-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-base. Keep near-black for dark-mode surfaces and elevation offsets.","value":"oklch(0.22 0.003 250)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH source color for the light-mode base surface. Keep near-white so --sf-color-bg, --sf-color-surface, and raised/inset levels have room to separate.","note":"OKLCH source color for the light-mode base surface. Keep near-white so --sf-color-bg, --sf-color-surface, and raised/inset levels have room to separate.","value":"oklch(0.96 0.006 250)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Subtle base-surface tint for low-emphasis backgrounds.","value":"var(--sf-color-base-a10)","aliasOf":"--sf-color-base-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Surfaces","description":"Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.","note":"Base page / component background. The canvas all other surfaces layer on top of.","value":"oklch(from var(--sf-color-base) calc(l + 0.02) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background tint for pressed/active interactive elements.","value":"oklch(from var(--sf-color-neutral) l c h / 0.12)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg--disabled","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background for disabled interactive elements.","value":"var(--sf-color-inset)","aliasOf":"--sf-color-inset","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg--focus","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background tint for focused interactive elements.","value":"oklch(from var(--sf-color-action) l c h / 0.06)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background tint for hovered interactive elements (rows, list items, etc.).","value":"oklch(from var(--sf-color-neutral) l c h / 0.08)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg--selected","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background for selected items (checked rows, active nav links).","value":"oklch(from var(--sf-color-action) l c h / 0.1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-black","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Selection & backdrop","description":"Absolute reference colors and overlay tints for selections, marks, and backdrops.","note":"Absolute black reference value.","value":"oklch(0% 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Borders","description":"Semantic border colors for dividers, component edges, and focus indicators.","note":"Default border for dividers and component edges.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border--disabled","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Border alpha tokens","description":"Semi-transparent border variants for overlays and glass-morphism effects.","note":"Semi-transparent border for disabled element edges.","value":"oklch(from var(--sf-color-border--subtle) l 0 h / 0.5)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border--focus","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Borders","description":"Semantic border colors for dividers, component edges, and focus indicators.","note":"Focus indicator border, used alongside --sf-focus-ring-color.","value":"var(--sf-color-action)","aliasOf":"--sf-color-action","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border--strong","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Borders","description":"Semantic border colors for dividers, component edges, and focus indicators.","note":"Stronger border for visually prominent edges and active outlines.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.1), 0.85) 0.02 h), oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border--subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Borders","description":"Semantic border colors for dividers, component edges, and focus indicators.","note":"Low-contrast border for subtle separation without strong visual weight.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.75, calc(l + 0.4), 0.97) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border--translucent","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Border alpha tokens","description":"Semi-transparent border variants for overlays and glass-morphism effects.","note":"Translucent border for glass-morphism and frosted surfaces.","value":"oklch(from var(--sf-color-neutral) l c h / 0.15)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-code-bg","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background for inline  elements. Usually a subtle tint of the inset surface.","value":"var(--sf-color-inset)","aliasOf":"--sf-color-inset","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-code-text","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Text color for inline code and monospace preformatted text.","value":"oklch(from var(--sf-color-code-bg) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Destructive / danger state color. Used for delete actions, error alerts, and critical warnings.","value":"light-dark(var(--sf-color-danger-source-light), var(--sf-color-danger-source-dark, oklch(from var(--sf-color-danger-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Medium danger fill for icon backgrounds and badge fills.","value":"oklch(from var(--sf-color-danger) l c h / 0.3)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-danger.","value":"oklch(0.71 0.198 12)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"STATUS COLORS (-source-light source tokens)","description":"OKLCH lightness source for the danger status color (covers destructive actions and form validation errors).","note":"OKLCH lightness source for the danger status color (covers destructive actions and form validation errors).","value":"oklch(0.48 0.22 12)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger-strong","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"High-contrast danger color for alert body text and icons.","value":"light-dark( oklch(from var(--sf-color-danger-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Light danger tint for error row backgrounds and alert container fills.","value":"oklch(from var(--sf-color-danger) l c h / 0.1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-dim","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Selection & backdrop","description":"Absolute reference colors and overlay tints for selections, marks, and backdrops.","note":"Backdrop overlay color for modals, drawers, and lightboxes.","value":"oklch(0 0 0 / 0.5)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-heading","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Heading text color. Slightly stronger contrast than body text for visual hierarchy.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Informational color for neutral tips, hints, and non-urgent notices.","value":"light-dark(var(--sf-color-info-source-light), var(--sf-color-info-source-dark, oklch(from var(--sf-color-info-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Medium info fill for info icons and hint chips.","value":"oklch(from var(--sf-color-info) l c h / 0.3)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-info.","value":"oklch(0.71 0.162 235)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"STATUS COLORS (-source-light source tokens)","description":"OKLCH lightness source for the info status color.","note":"OKLCH lightness source for the info status color.","value":"oklch(0.48 0.18 235)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info-strong","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"High-contrast info color for hint body text.","value":"light-dark( oklch(from var(--sf-color-info-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Light info tint for informational note backgrounds.","value":"oklch(from var(--sf-color-info) l c h / 0.1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-inset","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Surfaces","description":"Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.","note":"Slightly inset surface for nested areas — inputs, code blocks, sidebar panels.","value":"oklch(from var(--sf-color-base) calc(l - 0.02) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-inverse","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Surfaces","description":"Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.","note":"Inverted (dark-on-light / light-on-dark) surface for high-contrast banners or tooltips.","value":"oklch(from var(--sf-color-base) calc(1 - l) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Default hyperlink color.","value":"light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c h), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Link color when actively pressed.","value":"light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.21, 0.34), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.15, 0.74), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link--disabled","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Disabled link color (low contrast, no interaction).","value":"var(--sf-color-text--disabled)","aliasOf":"--sf-color-text--disabled","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Link color on hover.","value":"light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.15, 0.40), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.10, 0.68), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link--underline","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Link alpha token","description":"Semi-transparent underline color token used to tint the link underline independently from the link text color.","note":"Color of the link underline decoration. Defaults to a semi-transparent variant of the link color.","value":"oklch(from var(--sf-color-action) l c h / 0.3)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link--visited","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Visited link color.","value":"light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c calc(h + 60)), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c calc(h + 60)) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-mark-bg","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Selection & mark","description":"Background and text colors for browser text selections and  highlights. Adapts automatically in dark mode.","note":"Background color for highlighted  elements.","value":"oklch(from var(--sf-color-warning) l c h / 0.25)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-mark-text","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Selection & backdrop","description":"Absolute reference colors and overlay tints for selections, marks, and backdrops.","note":"Text color inside highlighted  elements.","value":"inherit","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Neutral interactive color for low-emphasis actions and tertiary buttons.","value":"light-dark(var(--sf-color-neutral-source-light), var(--sf-color-neutral-source-dark, oklch(from var(--sf-color-neutral-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Neutral color at pressed/active brightness.","value":"var(--sf-color-neutral-xdark)","aliasOf":"--sf-color-neutral-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Neutral color at hover brightness.","value":"var(--sf-color-neutral-darker)","aliasOf":"--sf-color-neutral-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Very light neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-100), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Light neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-200), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Light-mid neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-300), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Mid-light neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-400), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Lightest neutral tint.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-50), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Mid neutral shade — the 'pure' hue.","value":"var(--sf-color-neutral)","aliasOf":"--sf-color-neutral","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Mid-dark neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Dark neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Very dark neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Near-black neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Darkest neutral tint.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"10% opacity neutral tint.","value":"oklch(from var(--sf-color-neutral) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"30% opacity neutral tint.","value":"oklch(from var(--sf-color-neutral) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"5% opacity neutral tint.","value":"oklch(from var(--sf-color-neutral) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"50% opacity neutral tint.","value":"oklch(from var(--sf-color-neutral) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"80% opacity neutral tint.","value":"oklch(from var(--sf-color-neutral) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-darker","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Deep neutral shade for high-contrast contexts.","value":"var(--sf-color-neutral-600)","aliasOf":"--sf-color-neutral-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Near-transparent neutral tint for ghost-button hover backgrounds.","value":"var(--sf-color-neutral-a5)","aliasOf":"--sf-color-neutral-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-lighter","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Light neutral shade.","value":"var(--sf-color-neutral-400)","aliasOf":"--sf-color-neutral-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Muted neutral fill for low-emphasis contexts.","value":"var(--sf-color-neutral-a30)","aliasOf":"--sf-color-neutral-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-neutral.","value":"oklch(0.69 0.0225 260)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH lightness source for the neutral color.","note":"OKLCH lightness source for the neutral color.","value":"oklch(0.52 0.025 260)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Lightest neutral semantic tint.","value":"var(--sf-color-neutral-a10)","aliasOf":"--sf-color-neutral-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-superdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Near-black neutral shade.","value":"var(--sf-color-neutral-950)","aliasOf":"--sf-color-neutral-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-superlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Near-white neutral shade.","value":"var(--sf-color-neutral-50)","aliasOf":"--sf-color-neutral-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-xdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Extra-dark neutral shade.","value":"var(--sf-color-neutral-800)","aliasOf":"--sf-color-neutral-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-xlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Extra-light neutral shade.","value":"var(--sf-color-neutral-200)","aliasOf":"--sf-color-neutral-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-overlay","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Surfaces","description":"Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.","note":"Overlay surface for floating panels, sheets, and modals.","value":"oklch(from var(--sf-color-base) l c h / 0.9)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Primary brand palette color. Independent from --sf-color-action by default; override either source token to couple or separate brand and action roles.","value":"light-dark(var(--sf-color-primary-source-light), var(--sf-color-primary-source-dark, oklch(from var(--sf-color-primary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Primary color at pressed/active brightness.","value":"var(--sf-color-primary-xdark)","aliasOf":"--sf-color-primary-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Primary color at hover brightness.","value":"var(--sf-color-primary-darker)","aliasOf":"--sf-color-primary-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Very light primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-100), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Light primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-200), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Light-mid primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-300), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Mid-light primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-400), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Lightest primary tint.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-50), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Mid primary shade — the 'pure' hue.","value":"var(--sf-color-primary)","aliasOf":"--sf-color-primary","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Mid-dark primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Dark primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Very dark primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Near-black primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Darkest primary tint.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"10% opacity primary tint.","value":"oklch(from var(--sf-color-primary) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"30% opacity primary tint.","value":"oklch(from var(--sf-color-primary) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"5% opacity primary tint.","value":"oklch(from var(--sf-color-primary) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"50% opacity primary tint.","value":"oklch(from var(--sf-color-primary) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"80% opacity primary tint.","value":"oklch(from var(--sf-color-primary) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-darker","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Deep primary shade.","value":"var(--sf-color-primary-600)","aliasOf":"--sf-color-primary-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Near-transparent primary tint for ghost-button hover backgrounds.","value":"var(--sf-color-primary-a5)","aliasOf":"--sf-color-primary-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-lighter","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Light primary shade.","value":"var(--sf-color-primary-400)","aliasOf":"--sf-color-primary-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Muted primary fill.","value":"var(--sf-color-primary-a30)","aliasOf":"--sf-color-primary-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-primary.","value":"oklch(0.715 0.243 264)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH lightness source for the primary color.","note":"OKLCH lightness source for the primary color.","value":"oklch(0.47 0.27 264)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Lightest primary semantic tint.","value":"var(--sf-color-primary-a10)","aliasOf":"--sf-color-primary-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-superdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Near-black primary shade.","value":"var(--sf-color-primary-950)","aliasOf":"--sf-color-primary-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-superlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Near-white primary shade.","value":"var(--sf-color-primary-50)","aliasOf":"--sf-color-primary-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-xdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Extra-dark primary shade.","value":"var(--sf-color-primary-800)","aliasOf":"--sf-color-primary-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-xlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Extra-light primary shade.","value":"var(--sf-color-primary-200)","aliasOf":"--sf-color-primary-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-raised","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Surfaces","description":"Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.","note":"Elevated card surface that floats above the page background.","value":"oklch(from var(--sf-color-base) calc(l + 0.04) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-scheme","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Color scheme","description":"Preferred color-scheme hint sent to the browser (light / dark / normal).","note":"Preferred color scheme hint (light / dark / normal). Sent to the browser to influence UA chrome styling.","value":"light dark","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Raw secondary palette token for the secondary brand color.","value":"light-dark(var(--sf-color-secondary-source-light), var(--sf-color-secondary-source-dark, oklch(from var(--sf-color-secondary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Secondary color at pressed/active brightness.","value":"var(--sf-color-secondary-xdark)","aliasOf":"--sf-color-secondary-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Secondary color at hover brightness.","value":"var(--sf-color-secondary-darker)","aliasOf":"--sf-color-secondary-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Very light secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-100), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Light secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-200), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Light-mid secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-300), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Mid-light secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-400), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Lightest secondary tint.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-50), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Mid secondary shade — the 'pure' hue.","value":"var(--sf-color-secondary)","aliasOf":"--sf-color-secondary","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Mid-dark secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Dark secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Very dark secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Near-black secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Darkest secondary tint.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"10% opacity secondary tint.","value":"oklch(from var(--sf-color-secondary) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"30% opacity secondary tint.","value":"oklch(from var(--sf-color-secondary) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"5% opacity secondary tint.","value":"oklch(from var(--sf-color-secondary) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"50% opacity secondary tint.","value":"oklch(from var(--sf-color-secondary) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"80% opacity secondary tint.","value":"oklch(from var(--sf-color-secondary) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-darker","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Deep secondary shade.","value":"var(--sf-color-secondary-600)","aliasOf":"--sf-color-secondary-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Near-transparent secondary tint for ghost-button hover backgrounds.","value":"var(--sf-color-secondary-a5)","aliasOf":"--sf-color-secondary-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-lighter","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Light secondary shade.","value":"var(--sf-color-secondary-400)","aliasOf":"--sf-color-secondary-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Muted secondary fill.","value":"var(--sf-color-secondary-a30)","aliasOf":"--sf-color-secondary-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-secondary.","value":"oklch(0.84 0.036 264)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH lightness source for the secondary color.","note":"OKLCH lightness source for the secondary color.","value":"oklch(0.22 0.04 264)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Lightest secondary semantic tint.","value":"var(--sf-color-secondary-a10)","aliasOf":"--sf-color-secondary-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-superdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Near-black secondary shade.","value":"var(--sf-color-secondary-950)","aliasOf":"--sf-color-secondary-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-superlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Near-white secondary shade.","value":"var(--sf-color-secondary-50)","aliasOf":"--sf-color-secondary-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-xdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Extra-dark secondary shade.","value":"var(--sf-color-secondary-800)","aliasOf":"--sf-color-secondary-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-xlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Extra-light secondary shade.","value":"var(--sf-color-secondary-200)","aliasOf":"--sf-color-secondary-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-selection-bg","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Selection","description":"Text-selection background color.","note":"Background color applied to browser text selections.","value":"light-dark( oklch(from var(--sf-color-action-source-light) l c h / 0.28), oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-selection-text","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Selection & backdrop","description":"Absolute reference colors and overlay tints for selections, marks, and backdrops.","note":"Text color inside browser text selections.","value":"inherit","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Positive / success color for confirmation messages and completed-state indicators.","value":"light-dark(var(--sf-color-success-source-light), var(--sf-color-success-source-dark, oklch(from var(--sf-color-success-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Medium success fill for success icons and status chips.","value":"oklch(from var(--sf-color-success) l c h / 0.3)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-success.","value":"oklch(0.70 0.144 145)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"STATUS COLORS (-source-light source tokens)","description":"OKLCH lightness source for the success status color.","note":"OKLCH lightness source for the success status color.","value":"oklch(0.50 0.16 145)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success-strong","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"High-contrast success color for confirmation message text.","value":"light-dark( oklch(from var(--sf-color-success-source-light) calc(l - 0.15) c h), oklch(from var(--sf-color-success) clamp(0.70, calc(l + 0.15), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Light success tint for confirmation backgrounds.","value":"oklch(from var(--sf-color-success) l c h / 0.12)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-surface","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Resolved color tokens","description":"High-level semantic color aliases. Each resolves to the matching palette source token and adapts automatically between light and dark mode. Start here when applying your brand palette.","note":"Default component surface color. Alias of --sf-color-base; use --sf-color-raised for an elevated card/background level.","value":"var(--sf-color-base)","aliasOf":"--sf-color-base","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Raw tertiary palette token for the third brand color.","value":"light-dark(var(--sf-color-tertiary-source-light), var(--sf-color-tertiary-source-dark, oklch(from var(--sf-color-tertiary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Tertiary color at pressed/active brightness.","value":"var(--sf-color-tertiary-xdark)","aliasOf":"--sf-color-tertiary-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Tertiary color at hover brightness.","value":"var(--sf-color-tertiary-darker)","aliasOf":"--sf-color-tertiary-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Very light tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-100), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Light tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-200), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Light-mid tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-300), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Mid-light tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-400), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Lightest tertiary tint.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-50), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Mid tertiary shade — the 'pure' hue.","value":"var(--sf-color-tertiary)","aliasOf":"--sf-color-tertiary","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Mid-dark tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Dark tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Very dark tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Near-black tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Darkest tertiary tint.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"10% opacity tertiary tint.","value":"oklch(from var(--sf-color-tertiary) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"30% opacity tertiary tint.","value":"oklch(from var(--sf-color-tertiary) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"5% opacity tertiary tint.","value":"oklch(from var(--sf-color-tertiary) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"50% opacity tertiary tint.","value":"oklch(from var(--sf-color-tertiary) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"80% opacity tertiary tint.","value":"oklch(from var(--sf-color-tertiary) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-darker","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Deep tertiary shade.","value":"var(--sf-color-tertiary-600)","aliasOf":"--sf-color-tertiary-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Near-transparent tertiary tint for ghost-button hover backgrounds.","value":"var(--sf-color-tertiary-a5)","aliasOf":"--sf-color-tertiary-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-lighter","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Light tertiary shade.","value":"var(--sf-color-tertiary-400)","aliasOf":"--sf-color-tertiary-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Muted tertiary fill.","value":"var(--sf-color-tertiary-a30)","aliasOf":"--sf-color-tertiary-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-tertiary.","value":"oklch(0.74 0.198 295)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH lightness source for the tertiary color.","note":"OKLCH lightness source for the tertiary color.","value":"oklch(0.42 0.22 295)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Lightest tertiary semantic tint.","value":"var(--sf-color-tertiary-a10)","aliasOf":"--sf-color-tertiary-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-superdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Near-black tertiary shade.","value":"var(--sf-color-tertiary-950)","aliasOf":"--sf-color-tertiary-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-superlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Near-white tertiary shade.","value":"var(--sf-color-tertiary-50)","aliasOf":"--sf-color-tertiary-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-xdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Extra-dark tertiary shade.","value":"var(--sf-color-tertiary-800)","aliasOf":"--sf-color-tertiary-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-xlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Extra-light tertiary shade.","value":"var(--sf-color-tertiary-200)","aliasOf":"--sf-color-tertiary-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Primary text color. Contrasts against --sf-color-bg for body copy.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--disabled","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Text color for disabled UI elements. Intentionally low contrast.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.25), 0.82) c h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2), 0.55) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--inverse","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Text color for use on dark/inverted backgrounds.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.85, calc(l + 0.4), 0.98) c h), oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4), 0.35) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Muted text for metadata, timestamps, and low-priority annotations.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.35, calc(l - var(--sf-contrast-bias)), 0.62) c h), oklch(from var(--sf-color-neutral) clamp(0.48, calc(l + var(--sf-contrast-bias)), 0.74) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-action","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground color for text on action-colored backgrounds.","value":"oklch(from var(--sf-color-action) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-base","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on base-colored backgrounds.","value":"var(--sf-color-text)","aliasOf":"--sf-color-text","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-danger","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on danger-colored backgrounds.","value":"oklch(from var(--sf-color-danger) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-info","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on info-colored backgrounds.","value":"oklch(from var(--sf-color-info) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-inverse","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on inverted (dark-on-light / light-on-dark) backgrounds.","value":"oklch(from var(--sf-color-inverse) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-neutral","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text placed on neutral-colored backgrounds.","value":"oklch(from var(--sf-color-neutral) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-primary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text placed on primary-colored backgrounds.","value":"oklch(from var(--sf-color-primary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-secondary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text placed on secondary-colored backgrounds.","value":"oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-success","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on success-colored backgrounds.","value":"oklch(from var(--sf-color-success) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-tertiary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text placed on tertiary-colored backgrounds.","value":"oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-warning","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on warning-colored backgrounds.","value":"oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--placeholder","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Placeholder text color for inputs and textareas.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--secondary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"De-emphasised secondary text (captions, labels, supporting copy).","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Warning / caution color for non-critical alerts and degraded-state indicators.","value":"light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Medium warning fill for icons and caution chips.","value":"oklch(from var(--sf-color-warning) l c h / 0.3)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-warning.","value":"oklch(0.65 0.153 80)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"STATUS COLORS (-source-light source tokens)","description":"OKLCH lightness source for the warning status color.","note":"OKLCH lightness source for the warning status color.","value":"oklch(0.75 0.17 80)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning-strong","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"High-contrast warning color for caution text.","value":"light-dark( oklch(from var(--sf-color-warning-source-light) calc(l - 0.25) c h), oklch(from var(--sf-color-warning) clamp(0.70, calc(l + 0.05), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Light warning tint for warning notification backgrounds.","value":"oklch(from var(--sf-color-warning) l c h / 0.12)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-white","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Selection & backdrop","description":"Absolute reference colors and overlay tints for selections, marks, and backdrops.","note":"Absolute white reference value.","value":"oklch(100% 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-component-pad","tier":"PUBLIC","role":"consumption","namespace":"component","category":"Core tokens","group":"Output token @property registrations","description":"Standard inner padding for interactive components (buttons, form inputs, chips).","note":"Standard inner padding for interactive components (buttons, form inputs, chips).","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-container-default","tier":"PUBLIC","role":"knob","namespace":"container","category":"Core tokens","group":"Containers","description":"Max-width container tokens for page-level layout.","note":"Default content container max-width (~1200px).","value":"75rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-container-full","tier":"PUBLIC","role":"knob","namespace":"container","category":"Core tokens","group":"Containers","description":"Max-width container tokens for page-level layout.","note":"Full-width container — removes the max-width constraint.","value":"100%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-container-narrow","tier":"PUBLIC","role":"knob","namespace":"container","category":"Core tokens","group":"Containers","description":"Max-width container tokens for page-level layout.","note":"Narrow content max-width — ideal for article body and blog posts (~65ch).","value":"38rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-container-prose","tier":"PUBLIC","role":"knob","namespace":"container","category":"Core tokens","group":"Containers","description":"Max-width container tokens for page-level layout.","note":"Prose max-width — optimised for readability (~75ch).","value":"65ch","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-container-wide","tier":"PUBLIC","role":"knob","namespace":"container","category":"Core tokens","group":"Containers","description":"Max-width container tokens for page-level layout.","note":"Wide container for marketing / dashboard layouts (~1440px).","value":"90rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-content-gap","tier":"PUBLIC","role":"consumption","namespace":"content","category":"Core tokens","group":"Output token @property registrations","description":"Tight gap within related content (stack, flow, prose). Override globally to retune all tight primitives at once.","note":"Tight gap within related content (stack, flow, prose). Override globally to retune all tight primitives at once.","value":"var(--sf-space-s)","aliasOf":"--sf-space-s","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-content-intrinsic-size","tier":"PUBLIC","role":"knob","namespace":"content","category":"Macro tokens","group":"Content visibility","description":"intrinsic-size hint for content-visibility: auto (lazy off-screen rendering).","note":"Intrinsic-size hint for content-visibility: auto (prevents layout shift on first reveal).","value":"500px","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-content-width","tier":"PUBLIC","role":"consumption","namespace":"content","category":"Layout tokens","group":"Content grid (breakout pattern)","description":"Breakout width and content width for the content-grid pattern (full-bleed breakouts inside a constrained column).","note":"Max-width of the main content column in a content grid.","value":"var(--sf-container-default)","aliasOf":"--sf-container-default","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-contrast-bias","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"contrast","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Global text-contrast nudge. Positive values push derived reading-text colors toward the extremes (darker in light mode, lighter in dark). Default 0 (neutral).","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-contrast-threshold","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"contrast","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"OKLCH lightness crossover for auto-contrast on colored surfaces. Colors with L above this get dark text; below get light text. Default 0.6.","value":"0.6","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-cover-min-height","tier":"PUBLIC","role":"knob","namespace":"cover","category":"Layout tokens","group":"Cover","description":"Min-height and padding for the full-viewport cover layout.","note":"Minimum height of the cover layout (typically 100svh).","value":"100dvh","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-cover-padding","tier":"PUBLIC","role":"consumption","namespace":"cover","category":"Layout tokens","group":"Cover","description":"Min-height and padding for the full-viewport cover layout.","note":"Inner padding for the cover layout.","value":"var(--sf-section-pad)","aliasOf":"--sf-section-pad","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-current-font-weight","tier":"PUBLIC","role":"consumption","namespace":"current","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Inherits the current font-weight from context. Useful as a reset.","value":"var(--sf-font-weight-bold)","aliasOf":"--sf-font-weight-bold","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-display-l-line-height","tier":"PUBLIC","role":"knob","namespace":"display","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Line height for large display text (--sf-text-display-l). Very tight to avoid excessive gaps at oversized sizes.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-display-m-line-height","tier":"PUBLIC","role":"knob","namespace":"display","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Line height for medium display text (--sf-text-display-m).","value":"1.05","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-display-s-line-height","tier":"PUBLIC","role":"consumption","namespace":"display","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Line height for small display text (--sf-text-display-s).","value":"var(--sf-leading-tight)","aliasOf":"--sf-leading-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-divider-color","tier":"PUBLIC","role":"consumption","namespace":"divider","category":"Core tokens","group":"Divider","description":"Horizontal/vertical rule (divider) properties.","note":"Color of horizontal/vertical divider rules.","value":"var(--sf-color-border)","aliasOf":"--sf-color-border","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-divider-gap","tier":"PUBLIC","role":"consumption","namespace":"divider","category":"Core tokens","group":"Divider","description":"Horizontal/vertical rule (divider) properties.","note":"Spacing (margin) around divider elements.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-divider-style","tier":"PUBLIC","role":"knob","namespace":"divider","category":"Core tokens","group":"Divider","description":"Horizontal/vertical rule (divider) properties.","note":"Border style of dividers.","value":"solid","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-divider-width","tier":"PUBLIC","role":"consumption","namespace":"divider","category":"Core tokens","group":"Divider","description":"Horizontal/vertical rule (divider) properties.","note":"Stroke width of horizontal and vertical divider rules.","value":"var(--sf-border-width-1)","aliasOf":"--sf-border-width-1","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-drop-shadow-l","tier":"PUBLIC","role":"consumption","namespace":"drop","category":"Core tokens","group":"Output token @property registrations","description":"Large CSS filter: drop-shadow for prominent illustrated or cut-out elements.","note":"Large CSS filter: drop-shadow for prominent illustrated or cut-out elements.","value":"drop-shadow(0 8px 16px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7)))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-drop-shadow-m","tier":"PUBLIC","role":"consumption","namespace":"drop","category":"Core tokens","group":"Output token @property registrations","description":"Medium CSS filter: drop-shadow for elevated icons and card thumbnails.","note":"Medium CSS filter: drop-shadow for elevated icons and card thumbnails.","value":"drop-shadow(0 4px 6px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7)))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-drop-shadow-s","tier":"PUBLIC","role":"consumption","namespace":"drop","category":"Core tokens","group":"Output token @property registrations","description":"Small CSS filter: drop-shadow. Use filter (not box-shadow) for elements with transparent areas — SVGs, PNGs, cutout images.","note":"Small CSS filter: drop-shadow. Use filter (not box-shadow) for elements with transparent areas — SVGs, PNGs, cutout images.","value":"drop-shadow(0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7)))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-fast","tier":"PUBLIC","role":"consumption","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Fast duration (~100ms). Hover transitions, tooltip appear.","value":"calc(150ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-instant","tier":"PUBLIC","role":"consumption","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Near-instant duration (~50ms). Micro-interactions and cursor-follow effects.","value":"calc(100ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-none","tier":"PUBLIC","role":"knob","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"0ms duration. Disables transitions (respects prefers-reduced-motion).","value":"0ms","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-normal","tier":"PUBLIC","role":"consumption","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Normal duration (~200ms). Default for most transitions.","value":"calc(250ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-slow","tier":"PUBLIC","role":"consumption","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Slow duration (~350ms). Emphasis transitions, drawers.","value":"calc(400ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-slower","tier":"PUBLIC","role":"consumption","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Extra-slow duration (~600ms). Page-level enter/exit transitions.","value":"calc(600ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-bounce","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Bounce easing. Playful overshooting effect.","value":"linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-elastic","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Elastic easing. Spring-like overshooting effect.","value":"linear(0, 0.3, 1.2, 0.9, 1.05, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-in","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Accelerating easing. Use for elements leaving the viewport.","value":"cubic-bezier(0.5, 0, 0.75, 0.25)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-in-out","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Symmetric easing. Use for elements that move within the viewport.","value":"cubic-bezier(0.4, 0, 0.2, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-linear","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Linear easing. Use for progress indicators and spinner rotations.","value":"linear","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-out","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Decelerating easing. Use for elements entering the viewport.","value":"cubic-bezier(0.25, 0, 0.15, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-overshoot","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Subtle overshoot easing. Softer spring effect.","value":"linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-spring","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Spring easing. Natural physics-based motion.","value":"linear(0, 0.5, 1.1, 0.95, 1.02, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-gap","tier":"PUBLIC","role":"consumption","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Gap between equal columns.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-min-col","tier":"PUBLIC","role":"knob","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Minimum column width for the default auto-fill equal-columns layout. Columns fill the row until this width is reached, then wrap to the next line.","value":"16rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-min-col-2","tier":"PUBLIC","role":"knob","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Minimum column width for the 2-column equal preset.","value":"28rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-min-col-3","tier":"PUBLIC","role":"knob","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Minimum column width for the 3-column equal preset.","value":"15rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-min-col-4","tier":"PUBLIC","role":"knob","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Minimum column width for the 4-column equal preset.","value":"16rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-min-col-6","tier":"PUBLIC","role":"knob","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Minimum column width for the 6-column equal preset.","value":"10rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-field-block","tier":"PUBLIC","role":"consumption","namespace":"field","category":"Core tokens","group":"Output token @property registrations","description":"Vertical (block) padding inside form fields.","note":"Vertical (block) padding inside form fields.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-field-padding-block","tier":"PUBLIC","role":"consumption","namespace":"field","category":"Component tokens","group":"FIELD TOKENS","description":"Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.","note":"Vertical (block) inner padding for form field inputs.","value":"var(--sf-space-xs)","aliasOf":"--sf-space-xs","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-field-padding-inline","tier":"PUBLIC","role":"consumption","namespace":"field","category":"Component tokens","group":"FIELD TOKENS","description":"Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.","note":"Horizontal (inline) inner padding for form field inputs.","value":"var(--sf-space-s)","aliasOf":"--sf-space-s","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-field-radius","tier":"PUBLIC","role":"consumption","namespace":"field","category":"Component tokens","group":"FIELD TOKENS","description":"Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.","note":"Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once.","value":"var(--sf-radius-m)","aliasOf":"--sf-radius-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-field-required-marker","tier":"PUBLIC","role":"knob","namespace":"field","category":"Core tokens","group":"Semantic gap tokens","description":"CSS content value for required-field markers (e.g. \\" *\\"). Used by pseudo-elements in the .required utility pattern.","note":"CSS content value for required-field markers (e.g. \\" *\\"). Used by pseudo-elements in the .required utility pattern.","value":"\\" *\\"","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-flow-space","tier":"PUBLIC","role":"consumption","namespace":"flow","category":"Macro tokens","group":"Flow","description":"Vertical rhythm gap between flow children (margin-block-start on all but the first child).","note":"Margin-block-start applied to all flow children except the first.","value":"var(--sf-content-gap)","aliasOf":"--sf-content-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-fluid-max-vw","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"fluid","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Maximum viewport width (in rem) at which the fluid scale clamps to its largest values. Default 90rem (~1440px). Part of the fluid scale engine.","value":"90","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-fluid-min-vw","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"fluid","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Minimum viewport width (in rem) at which the fluid scale clamps to its smallest values. Default 22.5rem (~360px). Part of the fluid scale engine.","value":"22.5","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-focus-ring-color","tier":"PUBLIC","role":"consumption","namespace":"focus","category":"Core tokens","group":"Focus / form colors","description":"Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.","note":"Color of the keyboard focus ring. Ensure sufficient contrast against all background surfaces.","value":"var(--sf-color-action)","aliasOf":"--sf-color-action","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-focus-ring-offset","tier":"PUBLIC","role":"knob","namespace":"focus","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Gap between the element edge and the focus ring.","value":"2px","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-focus-ring-shadow","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"focus","category":"Core tokens","group":"Focus / form colors","description":"Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.","note":"Computed box-shadow value for the focus ring — two-layer technique: offset shadow in bg color, then ring shadow in focus-ring color. Tune via --sf-focus-ring-width and --sf-focus-ring-color instead of overriding this directly.","value":"0 0 0 var(--sf-focus-ring-offset) var(--sf-color-bg, var(--sf-color-base-source-light, #fff)), 0 0 0 calc(var(--sf-focus-ring-offset) + var(--sf-focus-ring-width)) var(--sf-focus-ring-color)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-focus-ring-style","tier":"PUBLIC","role":"knob","namespace":"focus","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Border style of the focus ring (solid, dashed, dotted).","value":"solid","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-focus-ring-width","tier":"PUBLIC","role":"knob","namespace":"focus","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Stroke width of the focus ring outline.","value":"2px","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-body","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Font family stack for body text. Override to set your primary typeface.","value":"system-ui, -apple-system, sans-serif","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-display","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Font family for display/marketing text. Override for large headline typefaces.","value":"var(--sf-font-heading)","aliasOf":"--sf-font-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-features","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"OpenType feature-settings string for body text (e.g. 'ss01', 'cv11'). Default 'normal'. Override on :root or a subtree to enable ligatures, alternate glyphs, etc.","value":"normal","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-geometric","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Geometric sans-serif slot — circular letterforms for brand alternates.","value":"\\"Avenir\\", \\"Montserrat\\", \\"Corbel\\", \\"URW Gothic\\", source-sans-pro, sans-serif","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-heading","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Font family for headings. Defaults to display if not overridden separately.","value":"var(--sf-font-body)","aliasOf":"--sf-font-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-humanist","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Humanist sans-serif slot — warm, readable alternate typeface.","value":"\\"Seravek\\", \\"Gill Sans Nova\\", \\"Ubuntu\\", \\"Calibri\\", \\"DejaVu Sans\\", source-sans-pro, sans-serif","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-mono","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Monospace font family for code, pre, and kbd elements.","value":"ui-monospace, monospace","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-numeric","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"font-variant-numeric shorthand (e.g. tabular-nums) for aligned numeric data.","value":"tabular-nums","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-slab","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Slab-serif slot for editorial or display headings.","value":"\\"Rockwell\\", \\"Rockwell Nova\\", \\"Roboto Slab\\", \\"DejaVu Serif\\", \\"Sitka Small\\", serif","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-variation","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Variable-font axis settings for body text (e.g. \\"wght\\" 450). Default 'normal'. Override on :root or a subtree to activate variable-font axes.","value":"normal","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-body","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Font weight for body text (typically 400 / normal).","value":"var(--sf-font-weight-normal)","aliasOf":"--sf-font-weight-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-bold","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Strong emphasis weight (700).","value":"700","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-display","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Font weight for display-size text.","value":"var(--sf-font-weight-bold)","aliasOf":"--sf-font-weight-bold","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-heading","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Font weight for headings (typically 600–700).","value":"var(--sf-font-weight-semibold)","aliasOf":"--sf-font-weight-semibold","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-interactive","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Font weight for interactive role text — buttons, badges, and navigation labels. Defaults to semibold.","value":"var(--sf-font-weight-semibold)","aliasOf":"--sf-font-weight-semibold","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-light","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Light weight (300). Use sparingly — check contrast at small sizes.","value":"300","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-medium","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Medium weight (500). Subtle emphasis without full bold.","value":"500","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-normal","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Normal / regular weight (400).","value":"400","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-semibold","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Semibold weight (600). Common for labels and subheadings.","value":"600","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-strong","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Font weight for strong/emphasis inline role. Defaults to bold.","value":"var(--sf-font-weight-bold)","aliasOf":"--sf-font-weight-bold","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-frame-ratio","tier":"PUBLIC","role":"knob","namespace":"frame","category":"Layout tokens","group":"Frame","description":"Aspect ratio for the frame layout primitive (media container).","note":"Aspect ratio for the frame (media container) layout.","value":"16 / 9","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gap","tier":"PUBLIC","role":"consumption","namespace":"gap","category":"Core tokens","group":"Output token @property registrations","description":"Default gap between components (the loose rhythm). Layout primitives like cluster/grid/sidebar default to it. Override globally to retune them all at once, or set a primitive token (e.g. --sf-cluster-gap) for one element.","note":"Default gap between components (the loose rhythm). Layout primitives like cluster/grid/sidebar default to it. Override globally to retune them all at once, or set a primitive token (e.g. --sf-cluster-gap) for one element.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-brand","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Multi-stop brand gradient spanning primary and secondary palette colors. Use for hero backgrounds and brand accents.","value":"linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-fade--b","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Fade-to-bottom gradient (transparent → surface). Use to fade content into a background below (infinite scroll fade, content cutoff).","value":"linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-fade--l","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Fade-to-left gradient. Use to indicate left-side scrollable overflow.","value":"linear-gradient(in oklch to left, transparent, var(--sf-color-bg))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-fade--r","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Fade-to-right gradient. Use to indicate right-side scrollable overflow.","value":"linear-gradient(in oklch to right, transparent, var(--sf-color-bg))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-fade--t","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Fade-to-top gradient (transparent → surface). Use to fade content into a background above.","value":"linear-gradient(in oklch to top, transparent, var(--sf-color-bg))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-primary","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Gradient using primary palette colors (light to saturated).","value":"linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-secondary","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Gradient using secondary palette colors.","value":"linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-surface","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Subtle surface-color gradient for depth layering and glass effects.","value":"linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-tertiary","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Gradient using tertiary palette colors.","value":"linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-gap","tier":"PUBLIC","role":"consumption","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Gap between auto-fill grid cells.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Minimum column width for the auto-fill grid.","value":"16rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-2xl","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Minimum column width at the 2× breakpoint.","value":"28rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-l","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Large minimum column width for the auto-fill grid.","value":"20rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-m","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Medium minimum column width for the auto-fill grid.","value":"16rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-s","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Small minimum column width for the auto-fill grid.","value":"13rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-xl","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Extra-large minimum column width for the auto-fill grid. Use for wide content cards.","value":"24rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-xs","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Extra-small minimum column width for the auto-fill grid. Use for very compact tile layouts (icon grids).","value":"10rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gutter","tier":"PUBLIC","role":"consumption","namespace":"gutter","category":"Core tokens","group":"Output token @property registrations","description":"Wide page/section-edge gutter (used by center/container). Override to set the page-edge breathing room across breakpoints.","note":"Wide page/section-edge gutter (used by center/container). Override to set the page-edge breathing room across breakpoints.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h1-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h1","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h1-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h1","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
. Typically slightly negative at large sizes.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h1-line-height","tier":"PUBLIC","role":"consumption","namespace":"h1","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
. Tighter than body to avoid excessive whitespace at large sizes.","value":"var(--sf-leading-tight)","aliasOf":"--sf-leading-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h1-max-width","tier":"PUBLIC","role":"knob","namespace":"h1","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none (unconstrained). Set to a ch value (e.g. 20ch) to prevent wide headings from spanning the full column on large screens.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h1-size","tier":"PUBLIC","role":"consumption","namespace":"h1","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-4xl)","aliasOf":"--sf-text-4xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h2-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h2","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h2-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h2","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h2-line-height","tier":"PUBLIC","role":"consumption","namespace":"h2","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
.","value":"var(--sf-leading-tight)","aliasOf":"--sf-leading-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h2-max-width","tier":"PUBLIC","role":"knob","namespace":"h2","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h2-size","tier":"PUBLIC","role":"consumption","namespace":"h2","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-3xl)","aliasOf":"--sf-text-3xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h3-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h3","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h3-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h3","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h3-line-height","tier":"PUBLIC","role":"consumption","namespace":"h3","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
.","value":"var(--sf-leading-snug)","aliasOf":"--sf-leading-snug","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h3-max-width","tier":"PUBLIC","role":"knob","namespace":"h3","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h3-size","tier":"PUBLIC","role":"consumption","namespace":"h3","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-2xl)","aliasOf":"--sf-text-2xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h4-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h4","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h4-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h4","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h4-line-height","tier":"PUBLIC","role":"consumption","namespace":"h4","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
.","value":"var(--sf-leading-snug)","aliasOf":"--sf-leading-snug","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h4-max-width","tier":"PUBLIC","role":"knob","namespace":"h4","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h4-size","tier":"PUBLIC","role":"consumption","namespace":"h4","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-xl)","aliasOf":"--sf-text-xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h5-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h5","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h5-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h5","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h5-line-height","tier":"PUBLIC","role":"consumption","namespace":"h5","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
.","value":"var(--sf-leading-normal)","aliasOf":"--sf-leading-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h5-max-width","tier":"PUBLIC","role":"knob","namespace":"h5","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h5-size","tier":"PUBLIC","role":"consumption","namespace":"h5","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-l)","aliasOf":"--sf-text-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h6-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h6","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h6-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h6","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
.","value":"var(--sf-tracking-wide)","aliasOf":"--sf-tracking-wide","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h6-line-height","tier":"PUBLIC","role":"consumption","namespace":"h6","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
.","value":"var(--sf-leading-normal)","aliasOf":"--sf-leading-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h6-max-width","tier":"PUBLIC","role":"knob","namespace":"h6","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h6-size","tier":"PUBLIC","role":"consumption","namespace":"h6","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-m)","aliasOf":"--sf-text-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-header-height","tier":"PUBLIC","role":"consumption","namespace":"header","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Total height of the sticky page header. Used by --sf-sticky-offset to prevent content from hiding under it.","value":"clamp( var(--sf-header-height-mobile), calc((var(--sf-header-height-desktop) - var(--sf-header-height-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-header-height-mobile)), var(--sf-header-height-desktop))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-header-height-desktop","tier":"PUBLIC","role":"knob","namespace":"header","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Header height at desktop breakpoints.","value":"5rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-header-height-mobile","tier":"PUBLIC","role":"knob","namespace":"header","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Header height at mobile breakpoints.","value":"3.5rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-heading-color","tier":"PUBLIC","role":"consumption","namespace":"heading","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Text color for all headings (h1–h6). Alias of --sf-color-heading.","value":"var(--sf-color-heading)","aliasOf":"--sf-color-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-heading-font-family","tier":"PUBLIC","role":"consumption","namespace":"heading","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font family for all headings. Alias of --sf-font-heading.","value":"var(--sf-font-heading)","aliasOf":"--sf-font-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-heading-text-wrap","tier":"PUBLIC","role":"knob","namespace":"heading","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"text-wrap for headings. 'balance' prevents orphaned short last lines in multi-line headings.","value":"balance","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-2xl","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"2× large icon size (~40px+). Hero or onboarding icons.","value":"4em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-box-bg","tier":"PUBLIC","role":"consumption","namespace":"icon","category":"Layout tokens","group":"Icon (boxed variant)","description":"Background, border, and padding for boxed icon containers.","note":"Background color for boxed icon containers.","value":"var(--sf-color-inset)","aliasOf":"--sf-color-inset","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-box-border","tier":"PUBLIC","role":"consumption","namespace":"icon","category":"Layout tokens","group":"Icon (boxed variant)","description":"Background, border, and padding for boxed icon containers.","note":"Border for boxed icon containers.","value":"var(--sf-border-width-1) solid var(--sf-color-border)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-box-pad","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Layout tokens","group":"Icon (boxed variant)","description":"Background, border, and padding for boxed icon containers.","note":"Padding inside boxed icon containers.","value":"0.5em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-box-radius","tier":"PUBLIC","role":"consumption","namespace":"icon","category":"Layout tokens","group":"Icon (boxed variant)","description":"Background, border, and padding for boxed icon containers.","note":"Border radius for boxed icon containers.","value":"var(--sf-radius-s)","aliasOf":"--sf-radius-s","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-l","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"Large icon size (~24px). Standalone icon buttons.","value":"2em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-m","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"Medium icon size (~20px). Default for inline and button icons.","value":"1.5em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-s","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"Small icon size (~16px). Dense UI chrome.","value":"1em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-xl","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"Extra-large icon size (~32px). Feature icons.","value":"3em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-xs","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"Extra-small icon size (~12px). Inline indicators.","value":"0.875em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-imposter-margin","tier":"PUBLIC","role":"consumption","namespace":"imposter","category":"Layout tokens","group":"Imposter (centered absolute/fixed overlay)","description":"Margin for the imposter layout (centered fixed/absolute overlay).","note":"Margin between the imposter overlay and the viewport edges.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-is-active","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"is","category":"Core tokens","group":"INTERACTION STATE FLAGS","description":"Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.","note":"Integer state flag for the active state. Set to 1 (via JS or .is-active) to drive branching calc() expressions. 0 = default (inactive).","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-is-current","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"is","category":"Core tokens","group":"INTERACTION STATE FLAGS","description":"Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.","note":"Integer state flag for the current/selected state. Set to 1 (via .is-current) to drive branching calc() expressions. 0 = default.","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-is-dark","tier":"INTERNAL","role":"knob","namespace":"is","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Mode flag — 0 in light mode, 1 in dark mode. Set automatically by [data-theme='dark'] and prefers-color-scheme. Drives dark-mode formula branches in calc().","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-is-open","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"is","category":"Core tokens","group":"INTERACTION STATE FLAGS","description":"Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.","note":"Integer state flag for the open/expanded state. Set to 1 (via .is-open) to drive branching calc() expressions. 0 = default (closed).","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-is-pressed","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"is","category":"Core tokens","group":"INTERACTION STATE FLAGS","description":"Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.","note":"Integer state flag for the pressed state. Set to 1 (via .is-pressed) to drive branching calc() expressions. 0 = default.","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-leading-normal","tier":"PUBLIC","role":"knob","namespace":"leading","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Normal line height (~1.5). Default for body text.","value":"1.5","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-leading-relaxed","tier":"PUBLIC","role":"knob","namespace":"leading","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Relaxed line height (~1.65). Long-form reading text.","value":"1.625","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-leading-snug","tier":"PUBLIC","role":"knob","namespace":"leading","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Snug line height (~1.35). Use for sub-headings.","value":"1.3","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-leading-taper","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"leading","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Progressive leading tightener: each step up the type scale subtracts step-index × taper from its per-size line-height token. Default 0 keeps the curated defaults.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-leading-tight","tier":"PUBLIC","role":"knob","namespace":"leading","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Tight line height (~1.2). Use for large display headings.","value":"1.1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-line-clamp","tier":"PUBLIC","role":"knob","namespace":"line","category":"Macro tokens","group":"Line clamp","description":"Number of lines before text truncates with an ellipsis.","note":"Number of visible lines before text is clipped with an ellipsis.","value":"3","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-link-external-marker","tier":"PUBLIC","role":"knob","namespace":"link","category":"Core tokens","group":"Semantic gap tokens","description":"CSS content value appended to external links (e.g. \\" ↗\\"). Used by the .external-link pseudo-element pattern.","note":"CSS content value appended to external links (e.g. \\" ↗\\"). Used by the .external-link pseudo-element pattern.","value":"\\" \\\\2197\\"","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-link-underline-offset","tier":"PUBLIC","role":"knob","namespace":"link","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Vertical offset of the link underline from the text baseline.","value":"0.15em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-link-underline-thickness","tier":"PUBLIC","role":"knob","namespace":"link","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Stroke width of the link underline.","value":"auto","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-lumlocker","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"lumlocker","category":"Core tokens","group":"LumLocker","description":"OKLCH lightness lock for the data-lumlocker attribute. Pins surface brightness to a fixed L value — useful for always-dark or always-light sections that must stay stable while the rest of the page switches color-scheme.","note":"OKLCH lightness lock value. When :root has [data-lumlocker], brand colors (primary, secondary, action, base) are remapped to this L so their contrast remains constant as hues shift.","value":"0.65","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-mask-scrim-end","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"mask","category":"Core tokens","group":"Mask scrim","description":"Edge-fade stop positions for the scroll-shadow mask effect on overflowing containers. Expressed as percentages or lengths; consumed by mask-image gradients.","note":"End stop for edge-fade mask gradients. Mirrors --sf-mask-scrim-start for the trailing edge of a scroll container.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-mask-scrim-start","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"mask","category":"Core tokens","group":"Mask scrim","description":"Edge-fade stop positions for the scroll-shadow mask effect on overflowing containers. Expressed as percentages or lengths; consumed by mask-image gradients.","note":"Start stop for edge-fade mask gradients on scroll reels / overflow containers. Use in mask-image: linear-gradient(..., transparent var(--sf-mask-scrim-start)) to fade content near the leading edge.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-motion-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"motion","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Global motion multiplier. All transition and animation durations multiply by this factor. Set to 0 to disable all motion; reduce below 1 for snappier feel.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-object-fit","tier":"PUBLIC","role":"knob","namespace":"object","category":"Core tokens","group":"Object fit / position","description":"Defaults for object-fit and object-position on replaced elements (img, video).","note":"Default object-fit value for replaced elements (img, video).","value":"cover","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-object-position","tier":"PUBLIC","role":"knob","namespace":"object","category":"Core tokens","group":"Object fit / position","description":"Defaults for object-fit and object-position on replaced elements (img, video).","note":"Default object-position for replaced elements.","value":"50% 50%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-opacity-disabled","tier":"PUBLIC","role":"knob","namespace":"opacity","category":"Core tokens","group":"Opacity","description":"Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements; --sf-state-pending-opacity dims elements in an async/loading state.","note":"Opacity for disabled UI elements (typically 0.4–0.5).","value":"0.45","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-opacity-muted","tier":"PUBLIC","role":"knob","namespace":"opacity","category":"Core tokens","group":"Blur & opacity","description":"Backdrop-filter blur scale and background-opacity tokens.","note":"General de-emphasis opacity for secondary content, ghost elements, or non-primary layers. Default 0.5.","value":"0.5","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-optical-sizing","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"optical","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"CSS font-optical-sizing value. 'auto' lets the browser optimize letterforms for the rendered size. Set 'none' to disable optical sizing.","value":"auto","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-100","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 100. Controls blend depth toward the surface. Default 8%.","note":"Color-mix percentage for palette step 100. Controls blend depth toward the surface. Default 8%.","value":"8%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-200","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 200. Controls blend depth toward the surface. Default 20%.","note":"Color-mix percentage for palette step 200. Controls blend depth toward the surface. Default 20%.","value":"20%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-300","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 300. Controls blend depth toward the surface. Default 40%.","note":"Color-mix percentage for palette step 300. Controls blend depth toward the surface. Default 40%.","value":"40%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-400","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 400 (near-mid tint). Controls blend depth. Default 65%.","note":"Color-mix percentage for palette step 400 (near-mid tint). Controls blend depth. Default 65%.","value":"65%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-50","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for the lightest palette step (50). Controls how far step 50 blends toward the surface. Default 4%.","note":"Color-mix percentage for the lightest palette step (50). Controls how far step 50 blends toward the surface. Default 4%.","value":"4%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-600","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 600 (near-mid shade). Controls blend depth toward the text color. Default 82%.","note":"Color-mix percentage for palette step 600 (near-mid shade). Controls blend depth toward the text color. Default 82%.","value":"82%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-700","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 700. Controls blend depth toward the text color. Default 62%.","note":"Color-mix percentage for palette step 700. Controls blend depth toward the text color. Default 62%.","value":"62%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-800","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 800 (dark shade). Controls blend depth toward text. Default 38%.","note":"Color-mix percentage for palette step 800 (dark shade). Controls blend depth toward text. Default 38%.","value":"38%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-900","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 900 (very dark shade). Controls blend depth toward text. Default 18%.","note":"Color-mix percentage for palette step 900 (very dark shade). Controls blend depth toward text. Default 18%.","value":"18%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-950","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for the darkest palette step (950). Controls how far step 950 blends toward the text color. Default 8%.","note":"Color-mix percentage for the darkest palette step (950). Controls how far step 950 blends toward the text color. Default 8%.","value":"8%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-print-base-size","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"print","category":"Core tokens","group":"Print","description":"Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.","note":"Base font size for @media print stylesheets. Default 11pt. Override on :root to adjust printed body text size.","value":"11pt","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-print-page-margin","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"print","category":"Core tokens","group":"Print","description":"Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.","note":"Page margin for printed output. Default 2cm. Maps to @page margin.","value":"2cm","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-print-page-size","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"print","category":"Core tokens","group":"Print","description":"Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.","note":"Target paper size for printing. Default 'a4'. Maps to @page size. Common values: a4, letter, legal.","value":"a4","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-block-margin","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Block margin between prose elements (h2, p, ul, etc.).","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-blockquote-border","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Left border style for blockquotes inside prose.","value":"var(--sf-border-width-2) solid var(--sf-color-border--subtle)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-blockquote-padding","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Inner padding for blockquotes inside prose.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-figcaption-size","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Font size for figure captions inside .prose. Typically smaller than body text.","value":"var(--sf-text-s)","aliasOf":"--sf-text-s","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-figure-margin","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Block margin around 
 elements inside .prose.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-heading-gap","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Space between a heading and the content that follows it inside .prose.","value":"var(--sf-space-s)","aliasOf":"--sf-space-s","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-hr-margin","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Block margin around 
 rules inside .prose.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-list-gap","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Gap between list items inside .prose.","value":"var(--sf-space-xs)","aliasOf":"--sf-space-xs","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-marker-color","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Color of list bullets and ordered-list numbers inside .prose.","value":"var(--sf-color-primary)","aliasOf":"--sf-color-primary","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-media-margin","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Block margin around images, video, and figures inside .prose.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-media-radius","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Border radius applied to images and media inside .prose.","value":"var(--sf-radius-m)","aliasOf":"--sf-radius-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-nested-list-gap","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Gap between items in nested lists inside .prose.","value":"var(--sf-space-2xs)","aliasOf":"--sf-space-2xs","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-paragraph","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Layout tokens","group":"Prose","description":"Max-width for the prose layout primitive (long-form reading column).","note":"Max width of prose paragraphs (layout token for the prose layout).","value":"var(--sf-content-gap)","aliasOf":"--sf-content-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-table-pad","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Cell padding for tables inside .prose.","value":"var(--sf-space-xs)","aliasOf":"--sf-space-xs","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-2xl","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"2× large radius (~20px). Rounded card variants.","note":"2× large radius (~20px). Rounded card variants.","value":"calc(24px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-2xs","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Extra-extra-small radius (~1px). Minimal rounding for very tight UI elements.","note":"Extra-extra-small radius (~1px). Minimal rounding for very tight UI elements.","value":"calc(1px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-3xl","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"3× large radius (~24px). Large rounded surfaces.","note":"3× large radius (~24px). Large rounded surfaces.","value":"calc(32px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-4xl","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"4× large radius (~32px). Near-pill rounding.","note":"4× large radius (~32px). Near-pill rounding.","value":"calc(48px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-full","tier":"PUBLIC","role":"knob","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Full rounding (50%). For circular elements like avatars.","note":"Full rounding (50%). For circular elements like avatars.","value":"9999px","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-l","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Large radius (~12px). Modals, popovers, panels.","note":"Large radius (~12px). Modals, popovers, panels.","value":"calc(12px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-m","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Medium radius (~6–8px). Default — inputs, standard buttons, cards.","note":"Medium radius (~6–8px). Default — inputs, standard buttons, cards.","value":"calc(8px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-none","tier":"PUBLIC","role":"knob","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Zero border radius — square corners.","note":"Zero border radius — square corners.","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-outer","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Concentric corner helper: outer radius for a container that wraps content with inner radius of --sf-radius-m. Computed as --sf-radius-m + --sf-component-pad so corners align visually.","note":"Concentric corner helper: outer radius for a container that wraps content with inner radius of --sf-radius-m. Computed as --sf-radius-m + --sf-component-pad so corners align visually.","value":"calc(var(--sf-radius-m) + var(--sf-component-pad))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-pill","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Pill rounding (9999px). Tags, toggle pills, status badges.","note":"Pill rounding (9999px). Tags, toggle pills, status badges.","value":"var(--sf-radius-full)","aliasOf":"--sf-radius-full","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-s","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Small radius (~4px). Badges, chips, small buttons.","note":"Small radius (~4px). Badges, chips, small buttons.","value":"calc(4px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"radius","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Global border-radius multiplier. Scales the entire radius ramp up (>1) or down (<1) from one knob. Set to 0 for sharp corners everywhere.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-xl","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Extra-large radius (~16px). Prominent cards and feature blocks.","note":"Extra-large radius (~16px). Prominent cards and feature blocks.","value":"calc(16px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-xs","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Hairline radius (~2px). Subtle rounding for tight components.","note":"Hairline radius (~2px). Subtle rounding for tight components.","value":"calc(2px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-3-2","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"3:2 aspect ratio. Common for landscape photography.","value":"3 / 2","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-4-3","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"4:3 aspect ratio. Classic screen ratio.","value":"4 / 3","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-cinema","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"2.39:1 cinematic widescreen aspect ratio.","value":"21 / 9","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-golden","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"1.618:1 golden ratio. Harmonious proportions.","value":"1.618 / 1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-portrait","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"2:3 portrait aspect ratio.","value":"3 / 4","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-square","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"1:1 square aspect ratio. Use for avatars, icon containers, and square thumbnails.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-video","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"16:9 widescreen video aspect ratio. Use for video embeds and video-thumbnail containers.","value":"16 / 9","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-reel-gap","tier":"PUBLIC","role":"consumption","namespace":"reel","category":"Layout tokens","group":"Reel","description":"Configuration tokens for the reel layout (horizontal scroll container).","note":"Gap between items in the horizontal reel.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-reel-height","tier":"PUBLIC","role":"knob","namespace":"reel","category":"Layout tokens","group":"Reel","description":"Configuration tokens for the reel layout (horizontal scroll container).","note":"Fixed height of the reel container.","value":"auto","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-reel-item-width","tier":"PUBLIC","role":"knob","namespace":"reel","category":"Layout tokens","group":"Reel","description":"Configuration tokens for the reel layout (horizontal scroll container).","note":"Width of each item in the reel.","value":"max-content","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-safe-bottom","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"safe","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Device safe-area inset at the bottom edge (home indicator, gesture bar). Resolves to env(safe-area-inset-bottom, 0px). Use for fixed footers.","value":"env(safe-area-inset-bottom, 0px)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-safe-left","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"safe","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Device safe-area inset at the left edge. Resolves to env(safe-area-inset-left, 0px).","value":"env(safe-area-inset-left, 0px)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-safe-right","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"safe","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Device safe-area inset at the right edge (rounded corners, home indicator). Resolves to env(safe-area-inset-right, 0px).","value":"env(safe-area-inset-right, 0px)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-safe-top","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"safe","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Device safe-area inset at the top edge (notch, Dynamic Island). Resolves to env(safe-area-inset-top, 0px). Use for fixed headers on notched devices.","value":"env(safe-area-inset-top, 0px)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrim-color","tier":"PUBLIC","role":"knob","namespace":"scrim","category":"Macro tokens","group":"Scrim","description":"Gradient scrim configuration (direction, size, color) for overlaying images with readable text.","note":"Base color of the gradient scrim overlay.","value":"oklch(0 0 0 / 0.55)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrim-direction","tier":"PUBLIC","role":"knob","namespace":"scrim","category":"Macro tokens","group":"Scrim","description":"Gradient scrim configuration (direction, size, color) for overlaying images with readable text.","note":"Direction of the scrim gradient (to bottom, to top, etc.).","value":"to top","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrim-gradient","tier":"PUBLIC","role":"consumption","namespace":"scrim","category":"Macro tokens","group":"Scrim","description":"Gradient scrim configuration (direction, size, color) for overlaying images with readable text.","note":"Full gradient shorthand for the scrim. Override to customise the fade.","value":"linear-gradient(var(--sf-scrim-direction), var(--sf-scrim-color), transparent)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrim-text-shadow","tier":"PUBLIC","role":"knob","namespace":"scrim","category":"Macro tokens","group":"Scrim","description":"Gradient scrim configuration (direction, size, color) for overlaying images with readable text.","note":"Text-shadow layered over the scrim gradient to ensure legibility for text placed directly on image backgrounds.","value":"0 1px 3px oklch(0 0 0 / 0.6)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scroll-shadow-size","tier":"PUBLIC","role":"knob","namespace":"scroll","category":"Macro tokens","group":"Scroll shadow / overflow fade","description":"Size of the scroll-shadow fade effect on overflowing containers.","note":"Size of the scroll-shadow fade effect on overflowing containers.","value":"2rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scroll-timeline-range-end","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"scroll","category":"Core tokens","group":"Scroll-driven animation range","description":"animation-range start and end positions for scroll-driven entrance effects (animation-timeline: view()). Controls how far into the viewport an element must scroll before its entrance animation starts and ends.","note":"animation-range end value for scroll-driven entrance effects. Default 'cover 30%'. Override on an element to control when its entrance animation finishes.","value":"cover 30%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scroll-timeline-range-start","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"scroll","category":"Core tokens","group":"Scroll-driven animation range","description":"animation-range start and end positions for scroll-driven entrance effects (animation-timeline: view()). Controls how far into the viewport an element must scroll before its entrance animation starts and ends.","note":"animation-range start value for scroll-driven entrance effects. Default 'entry 0%'. Override on an element to control when its entrance animation begins.","value":"entry 0%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrollbar-thumb","tier":"PUBLIC","role":"consumption","namespace":"scrollbar","category":"Core tokens","group":"Scrollbar","description":"Custom scrollbar thumb and track colors.","note":"Color of the custom scrollbar thumb.","value":"var(--sf-color-neutral)","aliasOf":"--sf-color-neutral","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrollbar-track","tier":"PUBLIC","role":"knob","namespace":"scrollbar","category":"Core tokens","group":"Scrollbar","description":"Custom scrollbar thumb and track colors.","note":"Color of the custom scrollbar track.","value":"transparent","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Section padding","description":"Vertical padding for full-width page sections at each responsive tier.","note":"Default vertical padding for full-width page sections.","value":"var(--sf-section-pad--m)","aliasOf":"--sf-section-pad--m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--2xl","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"2× large section vertical padding for hero areas.","note":"2× large section vertical padding for hero areas.","value":"calc(var(--sf-space-4xl) * 2 * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--l","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"Large section vertical padding.","note":"Large section vertical padding.","value":"calc(var(--sf-space-4xl) * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--m","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"Medium section vertical padding.","note":"Medium section vertical padding.","value":"calc(var(--sf-space-3xl) * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--s","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"Small section vertical padding.","note":"Small section vertical padding.","value":"calc(var(--sf-space-2xl) * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--xl","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"Extra-large vertical section padding for hero and feature sections.","note":"Extra-large vertical section padding for hero and feature sections.","value":"calc(var(--sf-space-4xl) * 1.5 * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--xs","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"Extra-small vertical section padding for compact in-page modules.","note":"Extra-small vertical section padding for compact in-page modules.","value":"calc(var(--sf-space-xl) * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"section","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Global multiplier applied to every --sf-section-pad--* size — one dial re-rhythms all section padding (default 1).","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-2xl","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Largest shadow for hero cards, feature highlights, and marketing surfaces.","note":"Largest shadow for hero cards, feature highlights, and marketing surfaces.","value":"0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.6), 0.7)), 0 20px 60px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 4), 0.7)), 0 40px 100px -8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 5), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-color","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Shadow ramp (box-shadow, text-shadow, drop-shadow)","description":"Elevation box-shadow ramp from xs to 2xl plus inner, text-shadow, and drop-shadow presets. All opacity values scale with --sf-shadow-strength so dark-mode contrast boost is automatic.","note":"Near-black shadow tint derived from the neutral palette. Inherits the neutral's chroma and hue so colorless neutrals produce colorless shadows.","value":"oklch(from var(--sf-color-neutral) var(--sf-shadow-lightness) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-glow","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Glow box-shadow shorthand for decorative glow effects.","note":"Glow box-shadow shorthand for decorative glow effects.","value":"0 0 15px 2px oklch(from var(--sf-shadow-glow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-glow-color","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Shadow glow color","description":"Tint color used by --sf-shadow-glow. Override to retint glows; opacity and dark-mode adaptation are handled automatically.","note":"Ambient glow tint used by --sf-shadow-glow. Override to retint all glow shadows; opacity and dark-mode boost are controlled by --sf-shadow-strength.","value":"var(--sf-color-primary)","aliasOf":"--sf-color-primary","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-inner","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Inset shadow for pressed states, inset inputs, and recessed surfaces.","note":"Inset shadow for pressed states, inset inputs, and recessed surfaces.","value":"inset 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-l","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Large shadow for drawers, sidebars, and prominent elevated surfaces.","note":"Large shadow for drawers, sidebars, and prominent elevated surfaces.","value":"0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 8px 24px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7)), 0 16px 48px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-lightness","tier":"PUBLIC","role":"knob","namespace":"shadow","category":"Core tokens","group":"Shadow strength","description":"Base opacity for the shadow ramp. --sf-shadow-lightness controls tonal density; --sf-shadow-strength is auto-boosted in dark mode so elevation reads on dark surfaces.","note":"OKLCH lightness component of the shadow color. Lower = denser-looking shadows. Tune this independently of --sf-shadow-strength to control tonal weight without affecting opacity.","value":"0.15","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-m","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Medium shadow for cards and content panels.","note":"Medium shadow for cards and content panels.","value":"0 1px 3px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-none","tier":"PUBLIC","role":"knob","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"No box-shadow (resets inherited shadows). Use to explicitly remove elevation.","note":"No box-shadow (resets inherited shadows). Use to explicitly remove elevation.","value":"none","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-s","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Small shadow for chips, tags, and inline elevated surfaces.","note":"Small shadow for chips, tags, and inline elevated surfaces.","value":"0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 2px 6px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, var(--sf-shadow-strength), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-strength","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"shadow","category":"Core tokens","group":"Shadow strength","description":"Base opacity for the shadow ramp. --sf-shadow-lightness controls tonal density; --sf-shadow-strength is auto-boosted in dark mode so elevation reads on dark surfaces.","note":"Base opacity for the entire shadow ramp. Auto-boosted in dark mode via --sf-is-dark. Override with calc() to preserve the adaptation: e.g. calc(0.12 + var(--sf-is-dark) * 0.17).","value":"calc(0.08 + var(--sf-is-dark) * 0.17)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-xl","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Extra-large shadow for modals, dialogs, and high-elevation sheets.","note":"Extra-large shadow for modals, dialogs, and high-elevation sheets.","value":"0 2px 8px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 12px 36px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3.5), 0.7)), 0 24px 72px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-xs","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Extra-small shadow for barely-elevated elements (focused inputs, small chips).","note":"Extra-small shadow for barely-elevated elements (focused inputs, small chips).","value":"0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sidebar-gap","tier":"PUBLIC","role":"consumption","namespace":"sidebar","category":"Layout tokens","group":"Sidebar","description":"Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).","note":"Gap between sidebar and main content column.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sidebar-min-width","tier":"PUBLIC","role":"knob","namespace":"sidebar","category":"Layout tokens","group":"Sidebar","description":"Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).","note":"Minimum sidebar width before the layout collapses to stacking.","value":"50%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sidebar-width","tier":"PUBLIC","role":"knob","namespace":"sidebar","category":"Layout tokens","group":"Sidebar","description":"Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).","note":"Preferred width of the sidebar column.","value":"18rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-size-l","tier":"PUBLIC","role":"knob","namespace":"size","category":"Core tokens","group":"UI sizes","description":"Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.","note":"Large UI component height (~44px). Touch-friendly interactive elements.","value":"2.75rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-size-m","tier":"PUBLIC","role":"knob","namespace":"size","category":"Core tokens","group":"UI sizes","description":"Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.","note":"Medium UI component height (~36px). Default size for buttons and inputs.","value":"2.5rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-size-s","tier":"PUBLIC","role":"knob","namespace":"size","category":"Core tokens","group":"UI sizes","description":"Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.","note":"Small UI component height (~28px). Compact buttons and input variants.","value":"2rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-size-xl","tier":"PUBLIC","role":"knob","namespace":"size","category":"Core tokens","group":"UI sizes","description":"Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.","note":"Extra-large interactive component height (~52px). For oversized or prominently touch-friendly controls.","value":"3.5rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-size-xs","tier":"PUBLIC","role":"knob","namespace":"size","category":"Core tokens","group":"UI sizes","description":"Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.","note":"Extra-small interactive component height (~24px). For very compact inline elements and micro-controls.","value":"1.5rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-2xl","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"48px-equivalent spacing. Large section spacing.","note":"48px-equivalent spacing. Large section spacing.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-2xs","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"4px-equivalent spacing. Tight inline gaps, icon-to-text padding.","note":"4px-equivalent spacing. Tight inline gaps, icon-to-text padding.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-3xl","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"64px-equivalent spacing. Extra-large layout gaps.","note":"64px-equivalent spacing. Extra-large layout gaps.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-4xl","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"96px-equivalent spacing. Hero / page-level section padding.","note":"96px-equivalent spacing. Hero / page-level section padding.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-base-max","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"space","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Maximum base spacing unit (rem) at the widest viewport. Drives the top of the fluid spacing ramp. Part of the fluid scale engine.","value":"2","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-base-min","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"space","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Minimum base spacing unit (rem) at the narrowest viewport. Drives the bottom of the fluid spacing ramp. Part of the fluid scale engine.","value":"1","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-l","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"24px-equivalent spacing. Card padding, section dividers.","note":"24px-equivalent spacing. Card padding, section dividers.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-m","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"16px-equivalent spacing. Default unit, widely applicable.","note":"16px-equivalent spacing. Default unit, widely applicable.","value":"calc(clamp(calc(var(--sf-space-base-min) * 1rem), calc((var(--sf-space-base-max) - var(--sf-space-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * 1rem), calc(var(--sf-space-base-max) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-none","tier":"PUBLIC","role":"knob","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"Zero spacing. Explicit alias for clarity in utility classes.","note":"Zero spacing. Explicit alias for clarity in utility classes.","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-px","tier":"PUBLIC","role":"knob","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"1px spacing. Hairline offset for fine adjustments.","note":"1px spacing. Hairline offset for fine adjustments.","value":"1px","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-ratio-max","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"space","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Modular spacing ratio at the widest viewport. Controls step-to-step growth in the spacing ramp. Default 1.333 (perfect fourth). Part of the fluid scale engine.","value":"1.333","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-ratio-min","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"space","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Modular spacing ratio at the narrowest viewport. Controls step-to-step growth in the spacing ramp. Default 1.25 (major third). Part of the fluid scale engine.","value":"1.25","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-s","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"12px-equivalent spacing. Form field inner padding, narrow gaps.","note":"12px-equivalent spacing. Form field inner padding, narrow gaps.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"space","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Global spacing multiplier. Scales the fluid spacing ramp. Increase above 1 for airier layouts; reduce below 1 for compact UIs.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-xl","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"32px-equivalent spacing. Feature row gaps, generous section padding.","note":"32px-equivalent spacing. Feature row gaps, generous section padding.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-xs","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"8px-equivalent spacing. Compact list rows, tab padding.","note":"8px-equivalent spacing. Compact list rows, tab padding.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-stack-gap","tier":"PUBLIC","role":"consumption","namespace":"stack","category":"Layout tokens","group":"Stack","description":"Gap for the stack layout primitive (vertically stacked blocks).","note":"Vertical gap between stacked block-level elements in the stack layout.","value":"var(--sf-content-gap)","aliasOf":"--sf-content-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-state-pending-opacity","tier":"PUBLIC","role":"knob","namespace":"state","category":"Core tokens","group":"Opacity","description":"Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements; --sf-state-pending-opacity dims elements in an async/loading state.","note":"Opacity for pending / loading state elements.","value":"0.7","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sticky-offset","tier":"PUBLIC","role":"consumption","namespace":"sticky","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"top offset for position: sticky elements, accounting for the header height.","value":"clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sticky-offset-desktop","tier":"PUBLIC","role":"consumption","namespace":"sticky","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Sticky offset at desktop breakpoints.","value":"var(--sf-header-height-desktop)","aliasOf":"--sf-header-height-desktop","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sticky-offset-mobile","tier":"PUBLIC","role":"consumption","namespace":"sticky","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Sticky offset at mobile breakpoints.","value":"var(--sf-header-height-mobile)","aliasOf":"--sf-header-height-mobile","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-surface-color","tier":"PUBLIC","role":"consumption","namespace":"surface","category":"Macro tokens","group":"Surface color","description":"Input color for the generic .sf-surface macro. Set any color value; the macro derives the background, auto-contrast foreground, and contextual token set from it.","note":"Input for the generic .sf-surface macro. Set any color (including palette shades); the macro derives background, auto-contrast foreground, and the contextual token set from it.","value":"var(--sf-color-base)","aliasOf":"--sf-color-base","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-switcher-gap","tier":"PUBLIC","role":"consumption","namespace":"switcher","category":"Layout tokens","group":"Switcher","description":"Configuration tokens for the switcher layout (horizontal → vertical breakpoint).","note":"Gap between switcher columns / rows.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-switcher-threshold","tier":"PUBLIC","role":"knob","namespace":"switcher","category":"Layout tokens","group":"Switcher","description":"Configuration tokens for the switcher layout (horizontal → vertical breakpoint).","note":"Inline-size threshold below which the switcher flips from horizontal to vertical.","value":"30rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xl","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"2× large font size (~24px). Section headings.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xl-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for 2×-large text.","note":"Font weight for 2×-large text.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xl-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for 2×-large text.","note":"Letter-spacing for 2×-large text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xl-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for 2×-large text.","note":"Line height for 2×-large text.","value":"calc(var(--sf-leading-snug) - 6 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xl-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for 2×-large text.","note":"Optimal line length for 2×-large text.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xs","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Extra-extra-small font size (~11px). Fine print, badges.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xs-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for 2×-extra-small text. Override to deviate from the global weight at this size.","note":"Font weight for 2×-extra-small text. Override to deviate from the global weight at this size.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xs-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for 2×-extra-small text.","note":"Letter-spacing for 2×-extra-small text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xs-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for 2×-extra-small text.","note":"Line height for 2×-extra-small text.","value":"var(--sf-leading-relaxed)","aliasOf":"--sf-leading-relaxed","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xs-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length (max-width in ch) for 2×-extra-small text.","note":"Optimal line length (max-width in ch) for 2×-extra-small text.","value":"55ch","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-3xl","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"3× large font size (~30px). Major headings.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-3xl-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for 3×-large text.","note":"Font weight for 3×-large text.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-3xl-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for 3×-large text. Typically negative to tighten large headings.","note":"Letter-spacing for 3×-large text. Typically negative to tighten large headings.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-3xl-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for 3×-large text.","note":"Line height for 3×-large text.","value":"calc(var(--sf-leading-tight) - 7 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-3xl-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for 3×-large text.","note":"Optimal line length for 3×-large text.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-4xl","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"4× large font size (~36px). Display-level headings.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-4xl-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for 4×-large text.","note":"Font weight for 4×-large text.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-4xl-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for 4×-large text.","note":"Letter-spacing for 4×-large text.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-4xl-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for 4×-large text.","note":"Line height for 4×-large text.","value":"calc(var(--sf-leading-tight) - 8 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-4xl-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for 4×-large text.","note":"Optimal line length for 4×-large text.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-base-max","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Maximum base font size (rem) at the widest viewport. End point for the fluid type scale at wide screens. Part of the fluid scale engine.","value":"1.25","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-base-min","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Minimum base font size (rem) at the narrowest viewport. Starting point for the fluid type scale at narrow screens. Part of the fluid scale engine.","value":"1","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-base-max","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Maximum display/hero font size (rem) at the widest viewport. Drives the ceiling of the fluid display type scale. Part of the fluid scale engine.","value":"3","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-base-min","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Minimum display/hero font size (rem) at the narrowest viewport. Drives the floor of the fluid display type scale. Part of the fluid scale engine.","value":"2.4","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-l","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Large display font size (~68px+). Oversized hero text.","value":"calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-display-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-m","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Medium display font size (~54px). Hero headings.","value":"calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-display-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-s","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Small display font size (~42px). Hero sub-headings.","value":"calc(clamp(calc(var(--sf-text-display-base-min) * 1rem), calc((var(--sf-text-display-base-max) - var(--sf-text-display-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * 1rem), calc(var(--sf-text-display-base-max) * 1rem)) * var(--sf-text-display-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Multiplier applied only to the display/hero type scale (--sf-text-display-*). Tune headline impact independently of body text.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-l","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Large font size (~18px). Lead paragraphs, prominent labels.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-l-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for large text.","note":"Font weight for large text.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-l-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for large text.","note":"Letter-spacing for large text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-l-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for large text.","note":"Line height for large text.","value":"calc(var(--sf-leading-normal) - 4 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-l-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for large text.","note":"Optimal line length for large text.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-m","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Medium / base font size (~16px). Typical body text.","value":"calc(clamp(calc(var(--sf-text-base-min) * 1rem), calc((var(--sf-text-base-max) - var(--sf-text-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * 1rem), calc(var(--sf-text-base-max) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-m-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for medium (body) text.","note":"Font weight for medium (body) text.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-m-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for medium text.","note":"Letter-spacing for medium text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-m-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for medium text.","note":"Line height for medium text.","value":"calc(var(--sf-leading-normal) - 3 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-m-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal reading line length for medium text (~65–75ch).","note":"Optimal reading line length for medium text (~65–75ch).","value":"65ch","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-ratio-max","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Modular type scale ratio at the widest viewport. Controls step-to-step size growth. Default 1.333. Part of the fluid scale engine.","value":"1.333","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-ratio-min","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Modular type scale ratio at the narrowest viewport. Controls step-to-step size growth in the fluid type ramp. Default 1.25. Part of the fluid scale engine.","value":"1.25","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-s","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Small font size (~14px). Secondary content, UI annotations.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-s-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for small text.","note":"Font weight for small text.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-s-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for small text.","note":"Letter-spacing for small text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-s-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for small text.","note":"Line height for small text.","value":"calc(var(--sf-leading-relaxed) - 2 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-s-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for small text.","note":"Optimal line length for small text.","value":"65ch","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Global type-size multiplier. Scales the entire fluid type scale. 1.08 gives noticeably larger body text without breaking layout.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-shadow-l","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Output token @property registrations","description":"Large text-shadow for high-contrast text over busy or dark image backgrounds.","note":"Large text-shadow for high-contrast text over busy or dark image backgrounds.","value":"0 4px 8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-shadow-m","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Output token @property registrations","description":"Medium text-shadow. Use for text overlaid on images to improve legibility.","note":"Medium text-shadow. Use for text overlaid on images to improve legibility.","value":"0 2px 4px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-shadow-none","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Output token @property registrations","description":"Removes text-shadow (use to explicitly reset inherited shadows).","note":"Removes text-shadow (use to explicitly reset inherited shadows).","value":"none","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-shadow-s","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Output token @property registrations","description":"Small text-shadow for subtle depth on display headings.","note":"Small text-shadow for subtle depth on display headings.","value":"0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xl","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Extra-large font size (~20px). Sub-headings, callout text.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xl-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for extra-large text.","note":"Font weight for extra-large text.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xl-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for extra-large text.","note":"Letter-spacing for extra-large text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xl-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for extra-large text.","note":"Line height for extra-large text.","value":"calc(var(--sf-leading-snug) - 5 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xl-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for extra-large text.","note":"Optimal line length for extra-large text.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xs","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Extra-small font size (~12px). Labels, captions, metadata.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xs-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for extra-small text.","note":"Font weight for extra-small text.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xs-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for extra-small text.","note":"Letter-spacing for extra-small text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xs-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for extra-small text.","note":"Line height for extra-small text.","value":"calc(var(--sf-leading-relaxed) - 1 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xs-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for extra-small text.","note":"Optimal line length for extra-small text.","value":"60ch","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-theme-transition-duration","tier":"PUBLIC","role":"consumption","namespace":"theme","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Duration of the .sf-theme-transition animated color-scheme crossfade. Scales with --sf-motion-scale so reduced-motion preferences are respected. Default 300ms.","value":"calc(300ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-touch-target","tier":"PUBLIC","role":"consumption","namespace":"touch","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Minimum touch-target size for interactive elements per WCAG 2.5.5.","value":"var(--sf-size-l)","aliasOf":"--sf-size-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-tracking-normal","tier":"PUBLIC","role":"knob","namespace":"tracking","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Normal letter-spacing (0). Default for body text.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-tracking-tight","tier":"PUBLIC","role":"knob","namespace":"tracking","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Tight letter-spacing (slightly negative). Suitable for large headings.","value":"-0.025em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-tracking-wide","tier":"PUBLIC","role":"knob","namespace":"tracking","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Wide letter-spacing. Use for small-caps labels.","value":"0.025em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-tracking-wider","tier":"PUBLIC","role":"knob","namespace":"tracking","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Wider letter-spacing for strongly spaced labels.","value":"0.05em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-tracking-widest","tier":"PUBLIC","role":"knob","namespace":"tracking","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Widest letter-spacing for all-caps microcopy.","value":"0.1em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-colors","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand for color-related properties (color, background, border-color).","value":"color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-enter","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Enter-phase transition (ease-out). Use on elements appearing in the viewport.","value":"color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), box-shadow var(--sf-duration-normal) var(--sf-ease-out), opacity var(--sf-duration-normal) var(--sf-ease-out), transform var(--sf-duration-normal) var(--sf-ease-out), filter var(--sf-duration-normal) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-exit","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Exit-phase transition (ease-in). Use on elements leaving the viewport.","value":"color var(--sf-duration-fast) var(--sf-ease-in), background-color var(--sf-duration-fast) var(--sf-ease-in), border-color var(--sf-duration-fast) var(--sf-ease-in), box-shadow var(--sf-duration-fast) var(--sf-ease-in), opacity var(--sf-duration-fast) var(--sf-ease-in), transform var(--sf-duration-fast) var(--sf-ease-in), filter var(--sf-duration-fast) var(--sf-ease-in)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-fast","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Fast-duration transition shorthand.","value":"color var(--sf-duration-fast) var(--sf-ease-out), background-color var(--sf-duration-fast) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out), transform var(--sf-duration-fast) var(--sf-ease-out), filter var(--sf-duration-fast) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-form-field","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand optimised for form fields: color and background at normal pace so label color shifts feel natural; border, shadow, and opacity at fast pace so focus rings appear crisply.","value":"color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-opacity","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand for opacity.","value":"opacity var(--sf-duration-normal) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-overlay","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand for overlay fades (opacity + visibility).","value":"overlay var(--sf-duration-normal) allow-discrete, display var(--sf-duration-normal) allow-discrete","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-shadow","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand for box-shadow.","value":"box-shadow var(--sf-duration-normal) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-slow","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Slow-duration transition shorthand.","value":"color var(--sf-duration-slow) var(--sf-ease-in-out), background-color var(--sf-duration-slow) var(--sf-ease-in-out), border-color var(--sf-duration-slow) var(--sf-ease-in-out), box-shadow var(--sf-duration-slow) var(--sf-ease-in-out), opacity var(--sf-duration-slow) var(--sf-ease-in-out), transform var(--sf-duration-slow) var(--sf-ease-in-out), filter var(--sf-duration-slow) var(--sf-ease-in-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-transform","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand for transform.","value":"transform var(--sf-duration-normal) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-base","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Base stacking level (1). Establishes a stacking context without elevation.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-below","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index below stacking context base. For decorative pseudo-elements.","value":"-1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-dropdown","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for dropdown menus and select popups.","value":"1020","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-fixed","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for position: fixed elements.","value":"1010","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-modal","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for modal dialogs and their non-top-layer backdrop scrims. Sits above overlays and dropdowns. Default 1040.","value":"1040","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-overlay","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for modal / dialog backdrops.","value":"1030","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-raised","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Raised elevation (50). Cards, sticky headers.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-sticky","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for position: sticky elements (navbars, table headers).","value":"1000","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-toast","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for toast / snackbar notifications.","value":"1050","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-tooltip","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for tooltips and transient floating notifications. Highest named layer in the z-index stack. Default 1060.","value":"1060","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]}]`),Rs={_sync:Gh,tokens:Hh};var ll=g('
 
'),il=g('
 
'),qh=g(" "),Vh=g('optional'),cl=g('
 
'),Kh=g('
   
 
 
'),dl=g(' 
',1),fl=g('
 
 ',1),Wh=g('knob'),Yh=g('advanced'),Zh=g('
 
'),Xh=g('
   
  
 
'),Jh=g('
Classes & Variables
  
 
 
');function Qh(a,e){ea(e,!0);const o=jh.classes,n=Rs.tokens.filter(D=>D.tier==="PUBLIC"||D.tier==="PUBLIC-ADVANCED");let l=K(""),i=K("classes"),c=K(""),f=u(()=>()=>{const D=t(l).trim().toLowerCase();return D?o.filter(J=>J.name.toLowerCase().includes(D)||J.selector?.toLowerCase().includes(D)||J.description?.toLowerCase().includes(D)||J.group?.toLowerCase().includes(D)):o}),p=u(()=>()=>{const D=t(l).trim().toLowerCase();return D?n.filter(J=>J.name.toLowerCase().includes(D)||J.description?.toLowerCase().includes(D)||J.group?.toLowerCase().includes(D)||J.value?.toLowerCase().includes(D)):n});function m(D){const J=new Map;for(const ye of D){const Ae=ye.category||"Other",Te=ye.group||"";J.has(Ae)||J.set(Ae,new Map);const xe=J.get(Ae);xe.has(Te)||xe.set(Te,[]),xe.get(Te).push(ye)}return J}let h=u(()=>m(t(f)())),v=u(()=>m(t(p)())),b=null;async function k(D){try{await navigator.clipboard.writeText(D),_(c,D,!0),b&&clearTimeout(b),b=setTimeout(()=>{t(c)===D&&_(c,""),b=null},1500)}catch{}}const S={layout:"text-violet-400",macro:"text-sky-400",state:"text-amber-400",accessibility:"text-emerald-400",motion:"text-pink-400",print:"text-slate-400",form:"text-orange-400",component:"text-indigo-400",theme:"text-teal-400"};var E=Jh(),P=s(E),B=r(s(P),2),I=r(B,2),H=s(I),T=s(H),R=r(H,2),w=s(R),A=r(P,2),j=s(A);{var O=D=>{var J=zt(),ye=ce(J);{var Ae=pe=>{var Q=ll(),le=s(Q);C(()=>y(le,`No classes match "${t(l)??""}"`)),d(pe,Q)},Te=u(()=>t(f)().length===0),xe=pe=>{var Q=zt(),le=ce(Q);oe(le,17,()=>[...t(h).entries()],([we,ze])=>we,(we,ze)=>{var N=u(()=>Ta(t(ze),2));let G=()=>t(N)[0],Z=()=>t(N)[1];var re=fl(),Y=ce(re),de=s(Y),be=s(de),he=r(Y,2);oe(he,17,()=>[...Z().entries()],([ne,Pe])=>ne,(ne,Pe)=>{var qe=u(()=>Ta(t(Pe),2));let at=()=>t(qe)[0],Ke=()=>t(qe)[1];var et=dl(),ft=ce(et);{var gt=_t=>{var mt=il(),ae=s(mt);C(()=>y(ae,at())),d(_t,mt)};L(ft,_t=>{at()&&_t(gt)})}var Ot=r(ft,2);oe(Ot,21,Ke,_t=>_t.name,(_t,mt)=>{var ae=Kh(),fe=s(ae),q=s(fe),X=s(q),ue=s(X),je=r(X,2);{var Ze=rt=>{var ht=qh(),Me=s(ht);C(()=>{Ye(ht,1,`text-[8px] font-bold uppercase ${S[t(mt).kind]??"text-slate-500"}`),y(Me,t(mt).kind)}),d(rt,ht)};L(je,rt=>{t(mt).kind&&rt(Ze)})}var U=r(je,2);{var W=rt=>{var ht=Vh();d(rt,ht)};L(U,rt=>{t(mt).optional&&rt(W)})}var se=r(q,2);{var Oe=rt=>{var ht=cl(),Me=s(ht);C(()=>y(Me,t(mt).description)),d(rt,ht)};L(se,rt=>{t(mt).description&&rt(Oe)})}var Ce=r(fe,2),vt=s(Ce);{var He=rt=>{Uo(rt,{class:"w-3 h-3 text-emerald-400"})},ct=rt=>{Yr(rt,{class:"w-3 h-3 text-slate-500"})};L(vt,rt=>{t(c)===t(mt).selector?rt(He):rt(ct,-1)})}C(()=>y(ue,t(mt).selector)),x("click",Ce,()=>k(t(mt).selector)),d(_t,ae)}),d(ne,et)}),C(()=>y(be,G())),d(we,re)}),d(pe,Q)};L(ye,pe=>{t(Te)?pe(Ae):pe(xe,-1)})}d(D,J)},F=D=>{var J=zt(),ye=ce(J);{var Ae=pe=>{var Q=ll(),le=s(Q);C(()=>y(le,`No tokens match "${t(l)??""}"`)),d(pe,Q)},Te=u(()=>t(p)().length===0),xe=pe=>{var Q=zt(),le=ce(Q);oe(le,17,()=>[...t(v).entries()],([we,ze])=>we,(we,ze)=>{var N=u(()=>Ta(t(ze),2));let G=()=>t(N)[0],Z=()=>t(N)[1];var re=fl(),Y=ce(re),de=s(Y),be=s(de),he=r(Y,2);oe(he,17,()=>[...Z().entries()],([ne,Pe])=>ne,(ne,Pe)=>{var qe=u(()=>Ta(t(Pe),2));let at=()=>t(qe)[0],Ke=()=>t(qe)[1];var et=dl(),ft=ce(et);{var gt=_t=>{var mt=il(),ae=s(mt);C(()=>y(ae,at())),d(_t,mt)};L(ft,_t=>{at()&&_t(gt)})}var Ot=r(ft,2);oe(Ot,21,Ke,_t=>_t.name,(_t,mt)=>{var ae=Xh(),fe=s(ae),q=s(fe),X=s(q),ue=s(X),je=r(X,2);{var Ze=Me=>{var At=Wh();d(Me,At)};L(je,Me=>{t(mt).role==="knob"&&Me(Ze)})}var U=r(je,2);{var W=Me=>{var At=Yh();d(Me,At)};L(U,Me=>{t(mt).tier==="PUBLIC-ADVANCED"&&Me(W)})}var se=r(q,2);{var Oe=Me=>{var At=Zh(),Ft=s(At);C(()=>y(Ft,t(mt).value)),d(Me,At)};L(se,Me=>{t(mt).value&&Me(Oe)})}var Ce=r(se,2);{var vt=Me=>{var At=cl(),Ft=s(At);C(()=>y(Ft,t(mt).description)),d(Me,At)};L(Ce,Me=>{t(mt).description&&Me(vt)})}var He=r(fe,2),ct=s(He);{var rt=Me=>{Uo(Me,{class:"w-3 h-3 text-emerald-400"})},ht=Me=>{Yr(Me,{class:"w-3 h-3 text-slate-500"})};L(ct,Me=>{t(c)===`var(${t(mt).name})`?Me(rt):Me(ht,-1)})}C(()=>y(ue,t(mt).name)),x("click",He,()=>k(`var(${t(mt).name})`)),d(_t,ae)}),d(ne,et)}),C(()=>y(be,G())),d(we,re)}),d(pe,Q)};L(ye,pe=>{t(Te)?pe(Ae):pe(xe,-1)})}d(D,J)};L(j,D=>{t(i)==="classes"?D(O):D(F,-1)})}C((D,J)=>{Ye(H,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${t(i)==="classes"?"bg-indigo-600/30 text-indigo-200 border border-indigo-500/30":"text-slate-500 hover:text-slate-300"}`),y(T,`CSS classes (${D??""})`),Ye(R,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${t(i)==="tokens"?"bg-indigo-600/30 text-indigo-200 border border-indigo-500/30":"text-slate-500 hover:text-slate-300"}`),y(w,`CSS vars (${J??""})`)},[()=>t(f)().length,()=>t(p)().length]),vr(B,()=>t(l),D=>_(l,D)),x("click",H,()=>{_(i,"classes")}),x("click",R,()=>{_(i,"tokens")}),d(a,E),ta()}oa(["click"]);var $h=g('
'),eg=g('
'),tg=g('
 
'),ag=g(''),og=g(' '),sg=g(''),rg=g(''),ng=g('
  
 
 
  
');function $i(a,e){ea(e,!0);let o=K(!1);function n(O){const F=O.name;if(F.includes("color")||F.includes("source")||F.includes("-bg")||F.includes("-border"))return"color";if(F.includes("font")||F.includes("family"))return"font";const D=O.syntax?.toLowerCase()??"";return D.includes("number")||D.includes("length")||D.includes("integer")?"number":"text"}let l=u(()=>e.overrideValue??e.token.value),i=u(()=>e.overrideValue!==void 0),c=u(()=>n(e.token)),f=u(()=>e.token.name.replace("--sf-",""));function p(O){return Ha.value,vo(O)||vo(`var(${e.token.name})`)||O}let m=u(()=>t(c)==="color"?p(t(l)):"");var h=ng(),v=s(h),b=r(v,2);{var k=O=>{var F=$h();let D;C(()=>D=it(F,"",D,{background:t(m)})),d(O,F)},S=O=>{var F=eg();d(O,F)};L(b,O=>{t(c)==="color"?O(k):O(S,-1)})}var E=r(b,2),P=s(E),B=s(P),I=r(P,2);{var H=O=>{var F=tg(),D=s(F);C(()=>y(D,e.token.description)),d(O,F)};L(I,O=>{e.token.description&&O(H)})}var T=r(E,2);{var R=O=>{var F=ag();C(()=>Jt(F,t(l))),go("blur",F,D=>{const J=D.target.value.trim();J&&J!==e.token.value?e.onSet(J):(!J||J===e.token.value)&&e.onReset(),_(o,!1)}),x("keydown",F,D=>{D.key==="Enter"&&D.currentTarget.blur(),D.key==="Escape"&&_(o,!1)}),d(O,F)},w=O=>{var F=sg(),D=s(F);{var J=Ae=>{var Te=og(),xe=s(Te);C(()=>y(xe,t(l))),d(Ae,Te)},ye=Ae=>{var Te=ls();C(()=>y(Te,t(l))),d(Ae,Te)};L(D,Ae=>{t(i)?Ae(J):Ae(ye,-1)})}C(()=>ee(F,"title",t(l))),x("click",F,()=>{_(o,!0)}),d(O,F)};L(T,O=>{t(o)?O(R):O(w,-1)})}var A=r(T,2);{var j=O=>{var F=rg();x("click",F,function(...D){e.onReset?.apply(this,D)}),d(O,F)};L(A,O=>{t(i)&&O(j)})}C(()=>{Ye(h,1,`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${t(i)?"bg-indigo-500/8 border border-indigo-500/15":"hover:bg-white/4"}`),Ye(v,1,`w-1.5 h-1.5 rounded-full shrink-0 ${t(i)?"bg-indigo-500":"bg-transparent"}`),ee(P,"title",e.token.name),y(B,t(f))}),d(a,h),ta()}oa(["keydown","click"]);var lg=g(' '),ig=g('
No tokens found
'),cg=g('
 
'),dg=g('
 
'),fg=g('
 
 
  
');function ug(a,e){ea(e,!0);let o=K(""),n=u(()=>()=>{const B=e.patterns??[e.domain];return e.tokens.filter(I=>B.some(H=>I.name.includes(H))&&I.tier!=="INTERNAL")}),l=u(()=>()=>{if(!t(o))return t(n)();const B=t(o).toLowerCase();return t(n)().filter(I=>I.name.toLowerCase().includes(B)||I.description?.toLowerCase().includes(B))}),i=u(()=>t(l)().filter(B=>B.name in e.overrides).length);var c=fg(),f=s(c),p=s(f),m=s(p),h=r(p,2);{var v=B=>{var I=lg(),H=s(I);C(()=>y(H,`${t(i)??""} modified`)),d(B,I)};L(h,B=>{t(i)>0&&B(v)})}var b=r(f,2),k=r(b,2);{var S=B=>{var I=ig();d(B,I)},E=u(()=>t(l)().length===0),P=B=>{var I=dg(),H=s(I);oe(H,17,()=>t(l)().slice(0,60),A=>A.name,(A,j)=>{$i(A,{get token(){return t(j)},get overrideValue(){return e.overrides[t(j).name]},onSet:O=>e.onSet(t(j).name,O),onReset:()=>e.onReset(t(j).name)})});var T=r(H,2);{var R=A=>{var j=cg(),O=s(j);C(F=>y(O,`${F??""} more — refine your search`),[()=>t(l)().length-60]),d(A,j)},w=u(()=>t(l)().length>60);L(T,A=>{t(w)&&A(R)})}d(B,I)};L(k,B=>{t(E)?B(S):B(P,-1)})}C(()=>{y(m,`${e.domain??""} tokens`),ee(b,"placeholder",`Search ${e.domain} tokens…`),Jt(b,t(o))}),x("input",b,B=>{_(o,B.target.value,!0)}),d(a,c),ta()}oa(["input"]);var ul=g('
'),pg=g('
  
'),mg=g('
 
'),vg=g('
'),hg=g('
'),gg=g('
  
'),bg=g('
'),yg=g('
 
   
 
  
 
  
 
 
 
');function xg(a,e){ea(e,!0);const o={PUBLIC:0,"PUBLIC-ADVANCED":1,INTERNAL:2};let n=K(""),l=K(!1),i=K(!1),c=u(()=>e.tokens.filter(Y=>e.patterns.some(de=>Y.name.includes(de))).sort((Y,de)=>{const be=o[Y.tier??"INTERNAL"]??2,he=o[de.tier??"INTERNAL"]??2;return be!==he?be-he:Y.name.localeCompare(de.name)})),f=u(()=>()=>{let Y=t(c);if(t(l)||(Y=Y.filter(de=>de.tier!=="INTERNAL")),t(i)&&(Y=Y.filter(de=>de.name in e.overrides)),t(n)){const de=t(n).toLowerCase();Y=Y.filter(be=>be.name.toLowerCase().includes(de)||be.description?.toLowerCase().includes(de))}return Y}),p=u(()=>t(c).filter(Y=>Y.name in e.overrides).length),m=u(()=>t(c).filter(Y=>Y.tier==="PUBLIC").length),h=u(()=>t(c).filter(Y=>Y.tier==="PUBLIC-ADVANCED").length),v=u(()=>t(c).filter(Y=>Y.tier==="INTERNAL").length);var b=yg(),k=s(b),S=s(k),E=r(S,2),P=s(E),B=s(P),I=s(B);{var H=Y=>{var de=ul();d(Y,de)};L(I,Y=>{t(i)&&Y(H)})}var T=r(B),R=r(P,2),w=s(R),A=s(w);{var j=Y=>{var de=ul();d(Y,de)};L(A,Y=>{t(l)&&Y(j)})}var O=r(w),F=r(R,2),D=s(F),J=r(E,2),ye=s(J),Ae=r(s(ye),2),Te=s(Ae),xe=r(ye,2),pe=r(s(xe),2),Q=s(pe),le=r(xe,2);{var we=Y=>{var de=pg(),be=r(s(de),2),he=s(be);C(()=>y(he,`Internal (${t(v)??""})`)),d(Y,de)};L(le,Y=>{t(l)&&Y(we)})}var ze=r(k,4),N=s(ze);{var G=Y=>{var de=mg(),be=s(de);C(()=>y(be,t(i)?"No modified tokens in this domain":"No tokens found")),d(Y,de)},Z=u(()=>t(f)().length===0),re=Y=>{var de=bg();oe(de,21,()=>t(f)(),be=>be.name,(be,he)=>{var ne=gg(),Pe=s(ne);{var qe=ft=>{var gt=vg();d(ft,gt)};L(Pe,ft=>{t(he).tier==="PUBLIC-ADVANCED"&&ft(qe)})}var at=r(Pe,2);{var Ke=ft=>{var gt=hg();d(ft,gt)};L(at,ft=>{t(he).tier==="INTERNAL"&&ft(Ke)})}var et=r(at,2);$i(et,{get token(){return t(he)},get overrideValue(){return e.overrides[t(he).name]},onSet:ft=>e.onSet(t(he).name,ft),onReset:()=>e.onReset(t(he).name)}),d(be,ne)}),d(Y,de)};L(N,Y=>{t(Z)?Y(G):Y(re,-1)})}C(Y=>{Jt(S,t(n)),Ye(P,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${t(i)?"text-indigo-400":"text-slate-600 hover:text-slate-400"}`),Ye(B,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${t(i)?"bg-indigo-600 border-indigo-500":"border-white/20"}`),y(T,` Modified only ${t(p)>0?`(${t(p)})`:""}`),ee(R,"aria-expanded",t(l)),Ye(R,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${t(l)?"text-amber-400":"text-slate-600 hover:text-slate-400"}`),Ye(w,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${t(l)?"bg-amber-600 border-amber-500":"border-white/20"}`),y(O,` Internal (${t(v)??""})`),y(D,`${Y??""}/${t(c).length??""}`),y(Te,`Public (${t(m)??""})`),y(Q,`Advanced (${t(h)??""})`)},[()=>t(f)().length]),x("input",S,Y=>{_(n,Y.target.value,!0)}),x("click",P,()=>{_(i,!t(i))}),x("click",R,()=>{_(l,!t(l))}),d(a,b),ta()}oa(["input","click"]);var pl=g(''),kg=g('
    
 
       
'),wg=g('
Waiting for live preview…
'),_g=g(""),Cg=g('
Pick an editable brand/status (base) color as the foreground to enable auto-fix.
'),Og=g('
 
'),Sg=g('
 
 
 
 
 
'),Lg=g('
 
'),Pg=g('
Foreground
 
  
Background
 
 
Aa Bb Cc
 
 
Auto-fix to pass   
 
',1),Ig=g(' '),Bg=g(''),Ug=g('·'),Ag=g(' '),zg=g('
Foreground (rows) × background (cols). Click a cell to load it above.
 
',1),Eg=g('
Contrast checker
 
Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.
 
 
 
 
 
');function Rg(a,e){ea(e,!0);const o=[{label:"Text",expr:"var(--sf-color-text)"},{label:"Text secondary",expr:"var(--sf-color-text--secondary)"},{label:"Text muted",expr:"var(--sf-color-text--muted)"},{label:"White",expr:"#ffffff"},{label:"Black",expr:"#000000"}],n=[{label:"Surface",expr:"var(--sf-color-surface)"},{label:"Bg",expr:"var(--sf-color-bg)"},{label:"Border",expr:"var(--sf-color-border)"}],l=[{key:"primary",srcLight:"--sf-color-primary-source-light",defLight:"oklch(0.47 0.27 264)",srcDark:"--sf-color-primary-source-dark",defDark:"oklch(0.715 0.243 264)"},{key:"secondary",srcLight:"--sf-color-secondary-source-light",defLight:"oklch(0.22 0.04 264)",srcDark:"--sf-color-secondary-source-dark",defDark:"oklch(0.84 0.036 264)"},{key:"tertiary",srcLight:"--sf-color-tertiary-source-light",defLight:"oklch(0.42 0.22 295)",srcDark:"--sf-color-tertiary-source-dark",defDark:"oklch(0.74 0.198 295)"},{key:"action",srcLight:"--sf-color-action-source-light",defLight:"oklch(0.50 0.22 235)",srcDark:"--sf-color-action-source-dark",defDark:"oklch(0.70 0.198 235)"},{key:"neutral",srcLight:"--sf-color-neutral-source-light",defLight:"oklch(0.52 0.025 260)",srcDark:"--sf-color-neutral-source-dark",defDark:"oklch(0.69 0.0225 260)"},{key:"success",srcLight:"--sf-color-success-source-light",defLight:"oklch(0.50 0.16 145)",srcDark:"--sf-color-success-source-dark",defDark:"oklch(0.70 0.144 145)"},{key:"warning",srcLight:"--sf-color-warning-source-light",defLight:"oklch(0.75 0.17 80)",srcDark:"--sf-color-warning-source-dark",defDark:"oklch(0.65 0.153 80)"},{key:"danger",srcLight:"--sf-color-danger-source-light",defLight:"oklch(0.48 0.22 12)",srcDark:"--sf-color-danger-source-dark",defDark:"oklch(0.71 0.198 12)"},{key:"info",srcLight:"--sf-color-info-source-light",defLight:"oklch(0.48 0.18 235)",srcDark:"--sf-color-info-source-dark",defDark:"oklch(0.71 0.162 235)"}],i=l.flatMap(G=>[{label:`${G.key} (base)`,expr:`var(--sf-color-${G.key})`,editKey:G.key},{label:`${G.key}-100`,expr:`var(--sf-color-${G.key}-100)`},{label:`${G.key}-600`,expr:`var(--sf-color-${G.key}-600)`},{label:`${G.key}-900`,expr:`var(--sf-color-${G.key}-900)`}]),c=[...o,...n,...i],f=Object.fromEntries(l.map(G=>[G.key,G])),p=[{label:"text",expr:"var(--sf-color-text)"},{label:"white",expr:"#ffffff"},{label:"black",expr:"#000000"},{label:"primary",expr:"var(--sf-color-primary)",editKey:"primary"}],m=[{label:"surface",expr:"var(--sf-color-surface)"},{label:"primary",expr:"var(--sf-color-primary)"},{label:"neutral-100",expr:"var(--sf-color-neutral-100)"},{label:"success",expr:"var(--sf-color-success)"},{label:"warning",expr:"var(--sf-color-warning)"},{label:"danger",expr:"var(--sf-color-danger)"}];let h=K("White"),v=K("primary (base)"),b=K("AA"),k=u(()=>c.find(G=>G.label===t(h))??c[0]),S=u(()=>c.find(G=>G.label===t(v))??c[0]);function E(G,Z){Ha.value;const re=Is(G),Y=Is(Z);return!re||!Y?null:Ys(Do(...re),Do(...Y))}function P(G){return G>=7?{tag:"AAA",cls:"bg-emerald-500/25 text-emerald-200"}:G>=4.5?{tag:"AA",cls:"bg-emerald-500/15 text-emerald-300"}:G>=3?{tag:"AA-L",cls:"bg-amber-500/20 text-amber-300"}:{tag:"Fail",cls:"bg-rose-500/20 text-rose-300"}}let B=u(()=>E(t(k).expr,t(S).expr));function I(){const G=t(h);_(h,t(v),!0),_(v,G,!0)}function H(G,Z){const re=c.find(de=>de.expr===G),Y=c.find(de=>de.expr===Z);re&&_(h,re.label,!0),Y&&_(v,Y.label,!0)}function T(G){return Ha.value,vo(G)||G}let R=K(!1),w=K(!1),A=K(null);function j(){_(A,null);const G=t(k).editKey?f[t(k).editKey]:null;if(!G)return;const Z=Xn()==="dark",re=Z?G.srcDark:G.srcLight,Y=Z?G.defDark:G.defLight,de=e.overrides[re]??Y,{c:be,h:he,l:ne,valid:Pe}=Zs(de);if(!Pe)return;const qe=Is(t(S).expr);if(!qe)return;const at=Do(...qe),Ke=t(b)==="AAA"?7:4.5;let et=null;for(let mt=0;mt<=1.0001;mt+=.005){const[ae,fe,q]=Jn(mt,be,he);Ys(Do(ae,fe,q),at)>=Ke&&(et===null||Math.abs(mt-ne){if(!t(R)){_(A,null);return}Ha.value,t(h),t(v),t(b),t(k).editKey&&t(B)!==null&&t(B)<(t(b)==="AAA"?7:4.5)?j():_(A,null)});var F=Eg(),D=r(s(F),2),J=s(D),ye=r(s(J),2),Ae=s(ye),Te=r(J,2);{var xe=G=>{var Z=Pg(),re=ce(Z),Y=s(re),de=r(s(Y),2);oe(de,21,()=>c,U=>U.label,(U,W)=>{var se=pl(),Oe=s(se),Ce={};C(()=>{y(Oe,t(W).label),Ce!==(Ce=t(W).label)&&(se.value=(se.__value=t(W).label)??"")}),d(U,se)});var be=r(Y,2),he=r(be,2),ne=r(s(he),2);oe(ne,21,()=>c,U=>U.label,(U,W)=>{var se=pl(),Oe=s(se),Ce={};C(()=>{y(Oe,t(W).label),Ce!==(Ce=t(W).label)&&(se.value=(se.__value=t(W).label)??"")}),d(U,se)});var Pe=r(re,2),qe=s(Pe),at=s(qe),Ke=r(qe,2);{var et=U=>{const W=u(()=>P(t(B)));var se=kg(),Oe=s(se),Ce=s(Oe),vt=r(Oe,2),He=s(vt),ct=r(vt,4),rt=s(ct),ht=s(rt),Me=r(rt,2),At=s(Me),Ft=r(Me,2),aa=s(Ft),Mt=r(Ft,2),Rt=s(Mt);C(na=>{y(Ce,`${na??""}:1`),Ye(vt,1,`text-[10px] font-bold px-2 py-0.5 rounded ${t(W).cls}`),y(He,t(W).tag),Ye(rt,1,mo(t(B)>=4.5?"text-emerald-300":"text-rose-300")),y(ht,`${t(B)>=4.5?"✓":"✗"} AA normal`),Ye(Me,1,mo(t(B)>=3?"text-emerald-300":"text-rose-300")),y(At,`${t(B)>=3?"✓":"✗"} AA large`),Ye(Ft,1,mo(t(B)>=7?"text-emerald-300":"text-rose-300")),y(aa,`${t(B)>=7?"✓":"✗"} AAA normal`),Ye(Mt,1,mo(t(B)>=4.5?"text-emerald-300":"text-rose-300")),y(Rt,`${t(B)>=4.5?"✓":"✗"} AAA large`)},[()=>t(B).toFixed(2)]),d(U,se)},ft=U=>{var W=wg();d(U,W)};L(Ke,U=>{t(B)!==null?U(et):U(ft,-1)})}var gt=r(Pe,2),Ot=s(gt),_t=s(Ot),mt=r(s(_t)),ae=s(mt),fe=r(_t,2);oe(fe,20,()=>["AA","AAA"],U=>U,(U,W)=>{var se=_g(),Oe=s(se);C(()=>{Ye(se,1,`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${t(b)===W?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),y(Oe,W)}),x("click",se,()=>{_(b,W,!0)}),d(U,se)});var q=r(Ot,2);{var X=U=>{var W=Cg();d(U,W)},ue=U=>{var W=Og(),se=s(W);C(()=>y(se,`Already passes ${t(b)??""}. 🎉`)),d(U,W)},je=U=>{var W=Sg(),se=s(W),Oe=r(se,2),Ce=s(Oe),vt=s(Ce),He=r(Ce,2),ct=s(He),rt=r(Oe,2);C((ht,Me)=>{it(se,ht),y(vt,t(A).value),y(ct,`→ ${Me??""}:1 (${t(b)??""} ✓)`)},[()=>`background:${T(t(A).value)}`,()=>t(A).ratio.toFixed(2)]),x("click",rt,O),d(U,W)},Ze=U=>{var W=Lg(),se=s(W);C(()=>y(se,`No lightness of this hue reaches ${t(b)??""} on this background — try a different background or hue.`)),d(U,W)};L(q,U=>{t(k).editKey?t(B)!==null&&t(B)>=(t(b)==="AAA"?7:4.5)?U(ue,1):t(A)?U(je,2):U(Ze,-1):U(X)})}C((U,W,se)=>{it(qe,U),it(at,W),y(ae,`(for ${se??""} mode)`)},[()=>`background:${T(t(S).expr)}`,()=>`color:${T(t(k).expr)}`,()=>Xn()]),En(de,()=>t(h),U=>_(h,U)),x("click",be,I),En(ne,()=>t(v),U=>_(v,U)),d(G,Z)};L(Te,G=>{t(R)&&G(xe)})}var pe=r(D,4),Q=s(pe),le=r(s(Q),2),we=s(le),ze=r(Q,2);{var N=G=>{var Z=zg(),re=r(ce(Z),2),Y=s(re),de=s(Y),be=s(de),he=r(s(be));oe(he,17,()=>m,Pe=>Pe.label,(Pe,qe)=>{var at=Ig(),Ke=s(at);C(()=>y(Ke,t(qe).label)),d(Pe,at)});var ne=r(de);oe(ne,21,()=>p,Pe=>Pe.label,(Pe,qe)=>{var at=Ag(),Ke=s(at),et=s(Ke),ft=r(Ke);oe(ft,17,()=>m,gt=>gt.label,(gt,Ot)=>{const _t=u(()=>E(t(qe).expr,t(Ot).expr));var mt=zt(),ae=ce(mt);{var fe=X=>{const ue=u(()=>P(t(_t)));var je=Bg(),Ze=s(je),U=s(Ze);C((W,se)=>{ee(Ze,"title",W),Ye(Ze,1,`w-full px-1.5 py-1 rounded font-mono font-bold cursor-pointer ${t(ue).cls}`),y(U,se)},[()=>`${t(qe).label} on ${t(Ot).label} — ${t(_t).toFixed(2)}:1`,()=>t(_t).toFixed(1)]),x("click",Ze,()=>H(t(qe).expr,t(Ot).expr)),d(X,je)},q=X=>{var ue=Ug();d(X,ue)};L(ae,X=>{t(_t)!==null?X(fe):X(q,-1)})}d(gt,mt)}),C(()=>y(et,t(qe).label)),d(Pe,at)}),d(G,Z)};L(ze,G=>{t(w)&&G(N)})}C(()=>{ee(J,"aria-expanded",t(R)),y(Ae,t(R)?"▲":"▼"),ee(Q,"aria-expanded",t(w)),y(we,t(w)?"▲":"▼")}),x("click",J,()=>{_(R,!t(R))}),x("click",Q,()=>{_(w,!t(w))}),d(a,F),ta()}oa(["click"]);var Tg=g('
'),Dg=g(' '),Mg=g('
 
 
 
');function ec(a,e){ea(e,!0);const o=new Set(["home","themes","wcag","setup","cheatsheet"]);let n=K("controls");xa(()=>{e.domain,_(n,"controls")});let l=u(()=>Yi[e.domain]??[e.domain]),i=u(()=>e.tokens.filter(v=>t(l).some(b=>v.name.includes(b))&&v.name in e.overrides).length);var c=zt(),f=ce(c);{var p=v=>{var b=zt(),k=ce(b);{var S=H=>{Hu(H,{get overrides(){return e.overrides},get onSelect(){return e.onSelectDomain},get onApplyTheme(){return e.onApplyTheme},get onResetAll(){return e.onResetAll}})},E=H=>{Rh(H,{get overrides(){return e.overrides},get onApplyTheme(){return e.onApplyTheme},get onResetAll(){return e.onResetAll}})},P=H=>{Rg(H,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onBulkChange(){return e.onBulkChange}})},B=H=>{Nh(H,{get overrides(){return e.overrides}})},I=H=>{Qh(H,{})};L(k,H=>{e.domain==="home"?H(S):e.domain==="themes"?H(E,1):e.domain==="wcag"?H(P,2):e.domain==="setup"?H(B,3):e.domain==="cheatsheet"&&H(I,4)})}d(v,b)},m=u(()=>o.has(e.domain)),h=v=>{var b=Mg(),k=s(b),S=s(k);{var E=j=>{var O=Tg(),F=s(O);{var D=N=>{Xp(N,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange},get onSelectDomain(){return e.onSelectDomain}})},J=N=>{Bm(N,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},ye=N=>{Tm(N,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},Ae=N=>{Qm(N,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},Te=N=>{pv(N,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},xe=N=>{kv(N,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},pe=N=>{Tv(N,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},Q=N=>{Zv(N,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},le=N=>{rh(N,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},we=N=>{Sh(N,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},ze=N=>{ug(N,{get domain(){return e.domain},get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})};L(F,N=>{e.domain==="colors"?N(D):e.domain==="typography"?N(J,1):e.domain==="spacing"?N(ye,2):e.domain==="layout"?N(Ae,3):e.domain==="borders"?N(Te,4):e.domain==="shadows"?N(xe,5):e.domain==="motion"?N(pe,6):e.domain==="effects"?N(Q,7):e.domain==="macros"?N(le,8):e.domain==="misc"?N(we,9):N(ze,-1)})}d(j,O)},P=j=>{xg(j,{get tokens(){return e.tokens},get overrides(){return e.overrides},get patterns(){return t(l)},get onSet(){return e.onSet},get onReset(){return e.onReset}})};L(S,j=>{t(n)==="controls"?j(E):j(P,-1)})}var B=r(k,2),I=s(B),H=s(I);Si(H,{class:"w-3 h-3"});var T=r(I,4),R=s(T);ef(R,{class:"w-3 h-3"});var w=r(R,2);{var A=j=>{var O=Dg(),F=s(O);C(()=>y(F,t(i))),d(j,O)};L(w,j=>{t(i)>0&&j(A)})}C(()=>{Ye(I,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${t(n)==="controls"?"text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px":"text-slate-500 hover:text-slate-300"}`),Ye(T,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${t(n)==="tokens"?"text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px":"text-slate-500 hover:text-slate-300"}`)}),x("click",I,()=>{_(n,"controls")}),x("click",T,()=>{_(n,"tokens")}),d(v,b)};L(f,v=>{t(m)?v(p):v(h,-1)})}d(a,c),ta()}oa(["click"]);var Ng=g('
 
'),Fg=g('
Type to search tokens by name or description
'),jg=g('overridden'),Gg=g('
 
'),Hg=g(''),qg=g('
↑↓ navigate ↵ open panel Esc close
'),Vg=g('');function tc(a,e){ea(e,!0);let o=K(""),n=K(0),l=K(null);const i={colors:"Colors",typography:"Typography",spacing:"Spacing",layout:"Layout",borders:"Borders",shadows:"Shadows",motion:"Motion",effects:"Effects",macros:"Macros",misc:"Misc"};let c=u(()=>(()=>{const w=t(o).trim().toLowerCase();if(!w)return[];const A=[];for(const j of e.tokens){if(j.tier==="INTERNAL")continue;const O=j.name.toLowerCase().includes(w),F=j.description?.toLowerCase().includes(w)??!1;if((O||F)&&(A.push({token:j,domain:xn(j.name),overridden:j.name in e.overrides}),A.length>=40))break}return A})());xa(()=>{t(o),_(n,0)}),xa(()=>{t(l)&&t(l).focus()});function f(w){e.onNavigate(w),e.onClose()}function p(w){if(w.key==="Escape"){w.preventDefault(),e.onClose();return}if(t(c).length===0&&(w.key==="ArrowDown"||w.key==="ArrowUp")){w.preventDefault(),_(n,0);return}if(w.key==="ArrowDown"){w.preventDefault(),_(n,Math.min(t(n)+1,t(c).length-1),!0);return}if(w.key==="ArrowUp"){w.preventDefault(),_(n,Math.max(t(n)-1,0),!0);return}w.key==="Enter"&&t(c)[t(n)]&&(w.preventDefault(),f(t(c)[t(n)].domain))}var m=Vg(),h=s(m),v=s(h),b=r(s(v),2);bo(b,w=>_(l,w),()=>t(l));var k=r(v,2),S=s(k);{var E=w=>{var A=Ng(),j=s(A);C(()=>y(j,`No tokens matching "${t(o)??""}"`)),d(w,A)},P=u(()=>t(o).trim()&&t(c).length===0),B=w=>{var A=Fg();d(w,A)},I=u(()=>!t(o).trim()),H=w=>{var A=zt(),j=ce(A);oe(j,19,()=>t(c),O=>O.token.name,(O,F,D)=>{var J=Hg(),ye=s(J),Ae=s(ye),Te=s(Ae),xe=s(Te),pe=r(Te,2);{var Q=Y=>{var de=jg();d(Y,de)};L(pe,Y=>{t(F).overridden&&Y(Q)})}var le=r(Ae,2);{var we=Y=>{var de=Gg(),be=s(de);C(()=>y(be,t(F).token.description)),d(Y,de)};L(le,Y=>{t(F).token.description&&Y(we)})}var ze=r(ye,2),N=s(ze),G=s(N),Z=r(N,2),re=s(Z);C(()=>{Ye(J,1,`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${t(n)===t(D)?"bg-indigo-500/15":"hover:bg-white/4"}`),y(xe,t(F).token.name),y(G,t(F).overridden?e.overrides[t(F).token.name]:t(F).token.value),y(re,i[t(F).domain]??t(F).domain)}),go("mouseenter",J,()=>{_(n,t(D),!0)}),x("click",J,()=>f(t(F).domain)),d(O,J)}),d(w,A)};L(S,w=>{t(P)?w(E):t(I)?w(B,1):w(H,-1)})}var T=r(k,2);{var R=w=>{var A=qg();d(w,A)};L(T,w=>{t(c).length>0&&w(R)})}x("mousedown",m,w=>{w.target===w.currentTarget&&e.onClose()}),x("keydown",b,p),vr(b,()=>t(o),w=>_(o,w)),d(a,m),ta()}oa(["mousedown","keydown","click"]);var Kg=g(' '),Wg=g('
 
 
 
 
 
 
 
  
');function Yg(a,e){ea(e,!0);const o=Rs.tokens??Rs,n={home:"Home",colors:"Colors",typography:"Typography",spacing:"Spacing",layout:"Layout",borders:"Borders",shadows:"Shadows",motion:"Motion",effects:"Effects",macros:"Macros",misc:"Misc",themes:"Themes",wcag:"WCAG",setup:"Install",cheatsheet:"Classes"};function l(q){const X={};for(const ue of Object.keys(q)){const je=xn(ue);X[je]=(X[je]??0)+1}return X}const i=su();let c=K(va(qi())),f=K(va([])),p=K(va([])),m=K("home"),h=K(!1),v=K("controls"),b=K("light"),k=K("fluid"),S=K("normal"),E=K("marketing"),P=u(()=>Object.keys(t(c)).length),B=u(()=>l(t(c))),I=u(()=>t(f).length>0),H=u(()=>t(p).length>0);function T(q,X){const ue=Object.keys(q);return ue.length!==Object.keys(X).length?!1:ue.every(je=>q[je]===X[je])}let R=K(va(co(()=>({...t(c)})))),w=K("idle"),A=u(()=>!T(t(c),t(R))),j=null;xa(()=>{Vi(t(c))});function O(q){const X=t(c),ue=typeof q=="function"?q(X):q;T(X,ue)||(_(f,[...t(f).slice(-49),X],!0),_(p,[],!0),t(w)==="saved"&&_(w,"idle")),_(c,ue,!0)}async function F(){if(!t(A)||t(w)==="saving")return;const q={...t(c)};_(w,"saving");try{await Ki(t(c)),T(t(c),q)?(_(R,q,!0),_(w,"saved"),j&&clearTimeout(j),j=setTimeout(()=>{t(w)==="saved"&&_(w,"idle"),j=null},2e3)):_(w,"idle")}catch(X){console.warn("slashed: save failed",X),_(w,"idle")}}function D(q,X){O(ue=>({...ue,[q]:X}))}function J(q){O(X=>{const ue={...X};return delete ue[q],ue})}function ye(q){O(X=>{const ue={...X};for(const[je,Ze]of Object.entries(q))Ze===null?delete ue[je]:ue[je]=Ze;return ue})}function Ae(q){O({...q})}function Te(){O({})}function xe(){if(t(f).length===0)return;const q=t(f)[t(f).length-1],X=t(c);_(f,t(f).slice(0,-1),!0),_(p,[X,...t(p)],!0),_(c,q,!0)}function pe(){if(t(p).length===0)return;const q=t(p)[0],X=t(c);_(p,t(p).slice(1),!0),_(f,[...t(f),X],!0),_(c,q,!0)}function Q(){const q=document.createElement("input");q.type="file",q.accept=".css,.json",q.onchange=X=>{const ue=X.target.files?.[0];if(!ue)return;const je=new FileReader;je.onload=Ze=>{const U=Ze.target?.result;if(U)if(ue.name.endsWith(".json"))try{const W=JSON.parse(U);if(W!==null&&typeof W=="object"&&!Array.isArray(W)){const se=Object.fromEntries(Object.entries(W).filter(([Oe,Ce])=>typeof Ce=="string"&&/^--sf-[\w-]+$/.test(Oe)));Object.keys(se).length>0&&O(se)}}catch{}else{const W={},se=/(--sf-[\w-]+)\s*:\s*([^;]+);/g;let Oe;for(;(Oe=se.exec(U))!==null;)W[Oe[1].trim()]=Oe[2].trim();Object.keys(W).length>0&&O(Ce=>({...Ce,...W}))}},je.readAsText(ue)},q.click()}function le(){const q=Ho(t(c),{mode:"layer",banner:!0}),X=new Blob([q],{type:"text/css"}),ue=URL.createObjectURL(X),je=document.createElement("a");je.href=ue,je.download="slashed-overrides.css",je.click(),URL.revokeObjectURL(ue)}pi(()=>{const q=X=>{(X.ctrlKey||X.metaKey)&&!X.shiftKey&&X.key==="z"&&(X.preventDefault(),xe()),(X.ctrlKey||X.metaKey)&&(X.shiftKey&&X.key==="z"||X.key==="y")&&(X.preventDefault(),pe()),(X.ctrlKey||X.metaKey)&&!X.shiftKey&&X.key.toLowerCase()==="s"&&(X.preventDefault(),F()),(X.ctrlKey||X.metaKey)&&!X.repeat&&X.key.toLowerCase()==="k"&&(X.preventDefault(),_(h,!t(h)))};return window.addEventListener("keydown",q),()=>{window.removeEventListener("keydown",q),j&&clearTimeout(j)}});var we=Wg(),ze=s(we);pf(ze,{get overridesCount(){return t(P)},get canUndo(){return t(I)},get canRedo(){return t(H)},get hasPendingChanges(){return t(A)},get saveState(){return t(w)},onUndo:xe,onRedo:pe,onResetAll:Te,onImport:Q,onExport:le,onSave:F});var N=r(ze,2),G=s(N),Z=s(G);Ai(Z,{get activeId(){return t(m)},onSelect:q=>{_(m,q,!0)},get overridesByDomain(){return t(B)}});var re=r(G,2),Y=s(re),de=s(Y),be=s(de),he=r(Y,2),ne=s(he);ec(ne,{get domain(){return t(m)},get tokens(){return o},get overrides(){return t(c)},onSet:D,onReset:J,onBulkChange:ye,onApplyTheme:Ae,onSelectDomain:q=>{_(m,q,!0)},onResetAll:Te});var Pe=r(re,2),qe=s(Pe);yu(qe,{get overrides(){return t(c)},get previewTheme(){return t(b)},get previewWidth(){return t(k)},get previewMotion(){return t(S)},get previewTemplate(){return t(E)},onThemeChange:q=>{_(b,q,!0)},onWidthChange:q=>{_(k,q,!0)},onMotionChange:q=>{_(S,q,!0)},onTemplateChange:q=>{_(E,q,!0)}});var at=r(N,2),Ke=s(at),et=s(Ke);Si(et,{class:"w-3.5 h-3.5"});var ft=r(Ke,2),gt=s(ft);Jd(gt,{class:"w-3.5 h-3.5"});var Ot=r(gt,2);{var _t=q=>{var X=Kg(),ue=s(X);C(()=>y(ue,t(P)>9?"9+":t(P))),d(q,X)};L(Ot,q=>{t(P)>0&&q(_t)})}var mt=r(at,2);{let q=u(()=>n[t(m)]??t(m));gf(mt,{get overridesCount(){return t(P)},get domain(){return t(q)}})}var ae=r(mt,2);{var fe=q=>{tc(q,{get tokens(){return o},get overrides(){return t(c)},onNavigate:X=>{_(m,X,!0)},onClose:()=>{_(h,!1)}})};L(ae,q=>{t(h)&&q(fe)})}C(()=>{Ye(we,1,`${i?"w-full h-full":"w-screen h-screen"} flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans`),Ye(G,1,`shrink-0 ${t(v)==="preview"?"hidden md:flex":"flex"}`),Ye(re,1,`w-full md:w-[360px] shrink-0 bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${t(v)==="preview"?"hidden md:flex":"flex"}`),y(be,n[t(m)]??t(m)),Ye(Pe,1,`flex-1 flex-col min-h-0 min-w-0 ${t(v)==="controls"?"hidden md:flex":"flex"}`),ee(Ke,"aria-pressed",t(v)==="controls"),Ye(Ke,1,`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${t(v)==="controls"?"text-indigo-300 bg-indigo-500/10":"text-slate-500 hover:text-slate-300"}`),ee(ft,"aria-pressed",t(v)==="preview"),Ye(ft,1,`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${t(v)==="preview"?"text-indigo-300 bg-indigo-500/10":"text-slate-500 hover:text-slate-300"}`)}),x("click",Ke,()=>{_(v,"controls")}),x("click",ft,()=>{_(v,"preview")}),d(a,we),ta()}oa(["click"]);const Rr=document.getElementById("app")??document.getElementById("slashed-admin-app");Rr&&(Rr.innerHTML="",ii(Yg,{target:Rr}));var Zg=g(''),Xg=g(' '),Jg=g(''),Qg=g(' 
/
 SLASHED    
    
    
 
 
 
 
 
  
',1);function $g(a,e){ea(e,!0);const o=Rs.tokens??Rs,n="slashed-overlay/open",l="slashed-overlay/domain",i={home:"Home",colors:"Colors",typography:"Typography",spacing:"Spacing",layout:"Layout",borders:"Borders",shadows:"Shadows",motion:"Motion",effects:"Effects",macros:"Macros",misc:"Misc",themes:"Themes",wcag:"WCAG",setup:"Install",cheatsheet:"Classes"};function c(_e){const kt={};for(const Tt of Object.keys(_e)){const Xe=xn(Tt);kt[Xe]=(kt[Xe]??0)+1}return kt}function f(_e,kt){try{const Tt=localStorage.getItem(_e);return Tt===null?kt:Tt!=="false"}catch{return kt}}function p(_e,kt){try{return localStorage.getItem(_e)??kt}catch{return kt}}let m=K(va(f(n,!0))),h=K(va(typeof window<"u"?window.matchMedia("(max-width: 768px)").matches:!1)),v=K(va(qi())),b=K(va([])),k=K(va([])),S=K(va(p(l,"home"))),E=K(!1),P=K(!1),B=K(null),I=K(null);xa(()=>{t(P)&&pr().then(()=>t(B)?.focus())});let H=u(()=>Object.keys(t(v)).length),T=u(()=>c(t(v))),R=u(()=>t(b).length>0),w=u(()=>t(k).length>0);function A(_e,kt){const Tt=Object.keys(_e);return Tt.length!==Object.keys(kt).length?!1:Tt.every(Xe=>_e[Xe]===kt[Xe])}let j=K(va(co(()=>({...t(v)})))),O=K("idle"),F=u(()=>!A(t(v),t(j))),D=null;function J(){const _e=document.getElementById("slashed-frontend-overlay");if(!_e)return;const kt="var(--wp-admin--admin-bar--height, 32px)";_e.style.position="fixed",_e.style.right="0",_e.style.zIndex="100000",_e.style.pointerEvents="auto",t(m)?(_e.style.top=kt,_e.style.width=t(h)?"100vw":"420px",_e.style.height=`calc(100vh - ${kt})`):(_e.style.top=`calc(${kt} + 16px)`,_e.style.width="40px",_e.style.height="64px")}xa(()=>{Vi(t(v))}),xa(()=>{!t(h)&&t(m)?document.documentElement.classList.add("sf-panel-active"):document.documentElement.classList.remove("sf-panel-active")}),xa(()=>{J()}),xa(()=>{try{localStorage.setItem(n,String(t(m)))}catch{}}),xa(()=>{try{localStorage.setItem(l,t(S))}catch{}});function ye(){_(m,!t(m))}function Ae(_e){const kt=t(v),Tt=typeof _e=="function"?_e(kt):_e;A(kt,Tt)||(_(b,[...t(b).slice(-49),kt],!0),_(k,[],!0),t(O)==="saved"&&_(O,"idle")),_(v,Tt,!0)}async function Te(){if(!t(F)||t(O)==="saving")return;const _e={...t(v)};_(O,"saving");try{await Ki(t(v)),A(t(v),_e)?(_(j,_e,!0),_(O,"saved"),D&&clearTimeout(D),D=setTimeout(()=>{t(O)==="saved"&&_(O,"idle"),D=null},2e3)):_(O,"idle")}catch(kt){console.warn("slashed: save failed",kt),_(O,"idle")}}function xe(_e,kt){Ae(Tt=>({...Tt,[_e]:kt}))}function pe(_e){Ae(kt=>{const Tt={...kt};return delete Tt[_e],Tt})}function Q(_e){Ae(kt=>{const Tt={...kt};for(const[Xe,It]of Object.entries(_e))It===null?delete Tt[Xe]:Tt[Xe]=It;return Tt})}function le(_e){Ae({..._e})}function we(){_(P,!0)}function ze(){_(P,!1),Ae({})}function N(){_(P,!1)}function G(){if(!t(b).length)return;const _e=t(b)[t(b).length-1];_(k,[t(v),...t(k)],!0),_(b,t(b).slice(0,-1),!0),_(v,_e,!0)}function Z(){if(!t(k).length)return;const _e=t(k)[0];_(b,[...t(b),t(v)],!0),_(k,t(k).slice(1),!0),_(v,_e,!0)}function re(){const _e=Ho(t(v),{mode:"layer",banner:!0}),kt=new Blob([_e],{type:"text/css"}),Tt=URL.createObjectURL(kt),Xe=document.createElement("a");Xe.href=Tt,Xe.download="slashed-overrides.css",Xe.click(),URL.revokeObjectURL(Tt)}function Y(){const _e=document.createElement("input");_e.type="file",_e.accept=".css,.json",_e.onchange=kt=>{const Tt=kt.target.files?.[0];if(!Tt)return;const Xe=new FileReader;Xe.onload=It=>{const ot=It.target?.result;if(ot)if(Tt.name.endsWith(".json"))try{const nt=JSON.parse(ot);if(nt!==null&&typeof nt=="object"&&!Array.isArray(nt)){const qt=Object.fromEntries(Object.entries(nt).filter(([jt,Dt])=>typeof Dt=="string"&&/^--sf-[\w-]+$/.test(jt)));Ae(qt)}}catch{}else{const nt={},qt=/(--sf-[\w-]+)\s*:\s*([^;]+);/g;let jt;for(;(jt=qt.exec(ot))!==null;)nt[jt[1].trim()]=jt[2].trim();Object.keys(nt).length&&Ae(Dt=>({...Dt,...nt}))}},Xe.readAsText(Tt)},_e.click()}pi(()=>{const _e=document.createElement("style");_e.id="sf-panel-push",_e.textContent=["html { transition: padding-right 200ms ease-in-out; }","html.sf-panel-active { padding-right: 420px !important; overflow-x: clip; }"].join(`
-`),document.head.appendChild(_e);const kt=window.matchMedia("(max-width: 768px)"),Tt=ot=>{_(h,ot.matches,!0)};kt.addEventListener("change",Tt);const Xe=ot=>{const nt=ot.key.toLowerCase();t(m)&&((ot.ctrlKey||ot.metaKey)&&!ot.shiftKey&&nt==="z"&&(ot.preventDefault(),G()),(ot.ctrlKey||ot.metaKey)&&(ot.shiftKey&&nt==="z"||nt==="y")&&(ot.preventDefault(),Z()),(ot.ctrlKey||ot.metaKey)&&!ot.repeat&&nt==="k"&&(ot.preventDefault(),_(E,!t(E))),(ot.ctrlKey||ot.metaKey)&&!ot.shiftKey&&nt==="s"&&(ot.preventDefault(),Te()))},It=()=>ye();return window.addEventListener("keydown",Xe),document.addEventListener("slashed:toggle-overlay",It),()=>{_e.remove(),document.documentElement.classList.remove("sf-panel-active"),kt.removeEventListener("change",Tt),window.removeEventListener("keydown",Xe),document.removeEventListener("slashed:toggle-overlay",It),D&&clearTimeout(D)}});var de=Qg(),be=ce(de);{var he=_e=>{var kt=Zg(),Tt=r(s(kt),2);Nn(Tt,{class:"w-3 h-3 opacity-70 rotate-180"}),x("click",kt,ye),d(_e,kt)};L(be,_e=>{t(m)||_e(he)})}var ne=r(be,2);let Pe,qe;var at=s(ne),Ke=r(s(at),4),et=s(Ke),ft=r(Ke,2);{var gt=_e=>{var kt=Xg(),Tt=s(kt);C(()=>y(Tt,t(H))),d(_e,kt)};L(ft,_e=>{t(H)>0&&_e(gt)})}var Ot=r(ft,4),_t=s(Ot);{var mt=_e=>{bi(_e,{class:"w-3 h-3 animate-spin"})},ae=_e=>{Uo(_e,{class:"w-3 h-3"})},fe=_e=>{hr(_e,{class:"w-3 h-3"})};L(_t,_e=>{t(O)==="saving"?_e(mt):t(O)==="saved"?_e(ae,1):_e(fe,-1)})}var q=r(Ot,2),X=s(q);Bi(X,{class:"w-3 h-3"});var ue=r(q,2),je=s(ue);_i(je,{class:"w-3 h-3"});var Ze=r(ue,4),U=s(Ze);hi(U,{class:"w-3 h-3"});var W=r(Ze,2),se=s(W);Zr(se,{class:"w-3 h-3"});var Oe=r(W,2),Ce=s(Oe);hn(Ce,{class:"w-3 h-3"});var vt=r(Oe,4),He=s(vt);Nn(He,{class:"w-3 h-3"});var ct=r(at,2),rt=s(ct);Ai(rt,{get activeId(){return t(S)},onSelect:_e=>{_(S,_e,!0)},get overridesByDomain(){return t(T)}});var ht=r(rt,2),Me=s(ht),At=s(Me),Ft=s(At),aa=r(Me,2),Mt=s(aa);ec(Mt,{get domain(){return t(S)},get tokens(){return o},get overrides(){return t(v)},onSet:xe,onReset:pe,onBulkChange:Q,onApplyTheme:le,onSelectDomain:_e=>{_(S,_e,!0)},onResetAll:we});var Rt=r(ct,2);{var na=_e=>{tc(_e,{get tokens(){return o},get overrides(){return t(v)},onNavigate:kt=>{_(S,kt,!0)},onClose:()=>{_(E,!1)}})};L(Rt,_e=>{t(E)&&_e(na)})}var da=r(Rt,2);{var fa=_e=>{var kt=Jg(),Tt=s(kt),Xe=r(s(Tt),2),It=s(Xe),ot=r(Xe,2),nt=s(ot);bo(nt,jt=>_(B,jt),()=>t(B));var qt=r(nt,2);bo(qt,jt=>_(I,jt),()=>t(I)),C(()=>y(It,`This will clear all ${t(H)??""} customisation${t(H)!==1?"s":""}.
-          You can still undo this before saving.`)),x("keydown",kt,jt=>{jt.key==="Escape"&&(jt.stopPropagation(),N()),jt.key==="Tab"&&(jt.preventDefault(),document.activeElement===t(B)?t(I)?.focus():t(B)?.focus())}),x("click",nt,N),x("click",qt,ze),d(_e,kt)};L(da,_e=>{t(P)&&_e(fa)})}C(_e=>{Pe=Ye(ne,1,"fixed right-0 z-[100000] pointer-events-auto flex flex-col bg-[#0a0a0f] text-slate-200 font-sans shadow-2xl shadow-black/60 border-l border-white/8 transition-transform duration-200 ease-in-out",null,Pe,{"translate-x-full":!t(m),"translate-x-0":t(m),"pointer-events-none":!t(m)}),qe=it(ne,`top: var(--wp-admin--admin-bar--height, 32px); width: ${t(h)?"100vw":"420px"}; height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));`,qe,{visibility:t(m)?void 0:"hidden"}),ee(ne,"aria-hidden",!t(m)),ne.inert=!t(m)||void 0,y(et,i[t(S)]??t(S)),Ot.disabled=!t(F)||t(O)==="saving",ee(Ot,"title",t(F)?"Save changes (Ctrl+S)":"No unsaved changes"),ee(Ot,"aria-label",t(O)==="saving"?"Saving changes":t(F)?"Save changes":"No unsaved changes"),Ye(Ot,1,_e),q.disabled=!t(R),ue.disabled=!t(w),W.disabled=t(H)===0,Oe.disabled=t(H)===0,y(Ft,i[t(S)]??t(S))},[()=>mo(["p-1 rounded transition-colors cursor-pointer shrink-0 disabled:pointer-events-none",t(O)==="saved"?"text-emerald-300":t(F)?"text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10":"text-slate-500 opacity-40"].join(" "))]),x("click",Ot,Te),x("click",q,G),x("click",ue,Z),x("click",Ze,Y),x("click",W,re),x("click",Oe,we),x("click",vt,ye),d(a,de),ta()}oa(["click","keydown"]);function ml(){const a=document.getElementById("slashed-frontend-overlay");if(!a||a.shadowRoot)return;const e=a.attachShadow({mode:"open"}),o=document.createElement("div");e.appendChild(o);let n=!1;const l=()=>{n||(ii($g,{target:o}),n=!0,a.setAttribute("data-slashed-ready",""))},i=window.slashedApp?.cssUrl;if(i){const c=document.createElement("link");c.rel="stylesheet",c.href=i;const f=setTimeout(l,5e3),p=()=>{clearTimeout(f),l()};c.addEventListener("load",p),c.addEventListener("error",p),e.appendChild(c)}else l()}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",ml):ml();
+      itself and can't be shown in the static canvas.
`);function Sh(a,e){ea(e,!0);const o=[{label:"Below",token:"--sf-z-below",note:"Behind content (e.g. decorative BG)"},{label:"Raised",token:"--sf-z-raised",note:"Slightly above flow"},{label:"Dropdown",token:"--sf-z-dropdown",note:"Dropdowns, popovers"},{label:"Sticky",token:"--sf-z-sticky",note:"Sticky headers, toolbars"},{label:"Fixed",token:"--sf-z-fixed",note:"Fixed UI chrome"},{label:"Overlay",token:"--sf-z-overlay",note:"Modals, drawers backdrop"},{label:"Modal",token:"--sf-z-modal",note:"Modal dialogs"},{label:"Popover",token:"--sf-z-popover",note:"Tooltips, menus"},{label:"Tooltip",token:"--sf-z-tooltip",note:"Inline tooltips"},{label:"Toast",token:"--sf-z-toast",note:"Notifications"}],n=[{label:"Smooth",value:"smooth"},{label:"Auto",value:"auto"}],l=[{label:"XS",token:"--sf-size-xs",default:1.5},{label:"S",token:"--sf-size-s",default:2},{label:"M",token:"--sf-size-m",default:2.5},{label:"L",token:"--sf-size-l",default:2.75},{label:"XL",token:"--sf-size-xl",default:3.5}];function i(bt,Oe,Qe){if(!bt)return Oe;const it=parseFloat(Qe?bt.replace(Qe,""):bt);return isNaN(it)?Oe:it}let c=u(()=>i(e.overrides["--sf-touch-target"],44,"px")),d=u(()=>e.overrides["--sf-scroll-behavior"]??"smooth"),p=u(()=>i(e.overrides["--sf-z-base"],0)),m=u(()=>e.overrides["--sf-caret-color"]??""),h=u(()=>i(e.overrides["--sf-link-underline-offset"]?.replace("em",""),.15)),v=u(()=>e.overrides["--sf-link-underline-thickness"]??"auto"),b=u(()=>e.overrides["--sf-focus-ring-style"]??"solid"),k=K(!1),S=K(!1),E=K(!1),I=K(!1),P=K(!1),B=K(!1),H=K(!1),D=K(!1),R=K(!1),C=K(!1),A=K(!1),q=K(!1);function O(bt){return i(e.overrides[bt.token]?.replace("rem",""),bt.default)}var F=Oh(),M=s(F),J=s(M),be=r(s(J),2),ze=s(be),Me=r(J,2);{var ye=bt=>{var Oe=nh(),Qe=ce(Oe);{let ft=u(()=>"--sf-touch-target"in e.overrides);xt(Qe,{label:"Min touch size",get value(){return t(c)},min:32,max:64,step:1,unit:"px",help:"--sf-touch-target — minimum tappable area for interactive elements (WCAG 2.5.5)",get overridden(){return t(ft)},onChange:at=>e.onSet("--sf-touch-target",`${at}px`),onReset:()=>e.onReset("--sf-touch-target")})}var it=r(Qe,2),Be=s(it),De=s(Be);_(()=>{ct(Be,`width: ${t(c)}px; height: ${t(c)}px`),y(De,`${t(c)??""}px`)}),f(bt,Oe)};L(Me,bt=>{t(k)&&bt(ye)})}var ue=r(M,4),X=s(ue),ne=r(s(X),2),_e=s(ne),Ae=r(X,2);{var j=bt=>{var Oe=lh();ae(Oe,21,()=>n,Qe=>Qe.value,(Qe,it)=>{var Be=ks(),De=s(Be);_(()=>{Xe(Be,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(d)===t(it).value?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(De,t(it).label)}),x("click",Be,()=>t(it).value==="smooth"?e.onReset("--sf-scroll-behavior"):e.onSet("--sf-scroll-behavior",t(it).value)),f(Qe,Be)}),f(bt,Oe)};L(Ae,bt=>{t(S)&&bt(j)})}var G=r(ue,4),Z=s(G),se=r(s(Z),2),Y=s(se),de=r(Z,2);{var ge=bt=>{var Oe=ch(),Qe=ce(Oe);{let Be=u(()=>"--sf-z-base"in e.overrides);xt(Qe,{label:"Base offset",get value(){return t(p)},min:0,max:1e3,step:10,help:"--sf-z-base — added to all z-index tokens to avoid conflicts with existing stacking contexts",get overridden(){return t(Be)},onChange:De=>e.onSet("--sf-z-base",String(De)),onReset:()=>e.onReset("--sf-z-base")})}var it=r(Qe,2);ae(it,21,()=>o,Be=>Be.token,(Be,De)=>{const ft=u(()=>t(De).token in e.overrides);var at=ih(),Pe=s(at),st=r(Pe,2),z=s(st),$=r(st,2),N=s($),V=r($,2),te=s(V);_(Te=>{Xe(Pe,1,`w-1.5 h-1.5 rounded-full shrink-0 ${t(ft)?"bg-amber-400":"bg-white/20"}`),y(z,t(De).label),y(N,t(De).note),y(te,Te)},[()=>t(De).token.replace("--sf-z-","")]),f(Be,at)}),f(bt,Oe)};L(de,bt=>{t(E)&&bt(ge)})}var ve=r(G,4),re=s(ve),Ie=r(s(re),2),qe=s(Ie),rt=r(re,2);{var et=bt=>{var Oe=dh(),Qe=s(Oe),it=r(s(Qe),2);{let Pe=u(()=>e.overrides["--sf-color-selection-bg"]??""),st=u(()=>"--sf-color-selection-bg"in e.overrides);Qa(it,{token:"--sf-color-selection-bg",get value(){return t(Pe)},placeholder:"default",get isOverridden(){return t(st)},onSet:z=>e.onSet("--sf-color-selection-bg",z),onReset:()=>e.onReset("--sf-color-selection-bg")})}var Be=r(Qe,2),De=r(s(Be),2);{let Pe=u(()=>e.overrides["--sf-color-selection-text"]??""),st=u(()=>"--sf-color-selection-text"in e.overrides);Qa(De,{token:"--sf-color-selection-text",get value(){return t(Pe)},placeholder:"default",get isOverridden(){return t(st)},onSet:z=>e.onSet("--sf-color-selection-text",z),onReset:()=>e.onReset("--sf-color-selection-text")})}var ft=r(Be,2),at=s(ft);_(()=>ct(at,`--sf-color-selection-bg: ${e.overrides["--sf-color-selection-bg"]??"#6366f1"}; --sf-color-selection-text: ${e.overrides["--sf-color-selection-text"]??"#ffffff"}`)),f(bt,Oe)};L(rt,bt=>{t(I)&&bt(et)})}var tt=r(ve,4),vt=s(tt),gt=r(s(vt),2),Ot=s(gt),_t=r(vt,2);{var fe=bt=>{var Oe=fh(),Qe=ce(Oe);ae(Qe,20,()=>["solid","dashed","dotted"],ft=>ft,(ft,at)=>{const Pe=u(()=>e.overrides["--sf-focus-ring-style"]??"solid");var st=ks(),z=s(st);_(()=>{Xe(st,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${t(Pe)===at?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(z,at)}),x("click",st,()=>at==="solid"?e.onReset("--sf-focus-ring-style"):e.onSet("--sf-focus-ring-style",at)),f(ft,st)});var it=r(Qe,2),Be=s(it),De=s(Be);_(()=>{ct(Be,`outline: 2px ${t(b)} ${e.overrides["--sf-focus-ring-color"]||"oklch(0.7 0.2 235)"}; outline-offset: 2px`),y(De,`Focus ring · ${t(b)??""}`)}),f(bt,Oe)};L(_t,bt=>{t(P)&&bt(fe)})}var T=r(tt,4),Q=s(T),le=r(s(Q),2),ke=s(le),Ce=r(Q,2);{var Ve=bt=>{var Oe=ph(),Qe=r(ce(Oe),2);ae(Qe,21,()=>l,Be=>Be.token,(Be,De)=>{const ft=u(()=>O(t(De)));{let at=u(()=>`${t(De).token} — component size step ${t(De).label}`),Pe=u(()=>t(De).token in e.overrides);xt(Be,{get label(){return t(De).label},get value(){return t(ft)},min:1,max:5,step:.05,unit:"rem",get help(){return t(at)},get overridden(){return t(Pe)},onChange:st=>e.onSet(t(De).token,`${st}rem`),onReset:()=>e.onReset(t(De).token)})}});var it=r(Qe,2);ae(it,21,()=>l,Be=>Be.token,(Be,De)=>{const ft=u(()=>O(t(De)));var at=uh(),Pe=s(at),st=r(Pe,2),z=s(st);_($=>{ct(Pe,$),y(z,t(De).label)},[()=>`height: ${Math.min(t(ft)*14,64)}px`]),f(Be,at)}),f(bt,Oe)};L(Ce,bt=>{t(B)&&bt(Ve)})}var Ke=r(T,4),U=s(Ke),W=r(s(U),2),oe=s(W),Ee=r(U,2);{var Le=bt=>{var Oe=vh(),Qe=ce(Oe),it=r(s(Qe),2);{let te=u(()=>"--sf-caret-color"in e.overrides);Qa(it,{token:"--sf-caret-color",get value(){return t(m)},placeholder:"default (action color)",get isOverridden(){return t(te)},onSet:Te=>e.onSet("--sf-caret-color",Te),onReset:()=>e.onReset("--sf-caret-color")})}var Be=r(Qe,2);{let te=u(()=>"--sf-link-underline-offset"in e.overrides);xt(Be,{label:"Underline offset",get value(){return t(h)},min:0,max:.5,step:.01,unit:"em",help:"--sf-link-underline-offset — gap between text baseline and underline",get overridden(){return t(te)},onChange:Te=>e.onSet("--sf-link-underline-offset",`${Te}em`),onReset:()=>e.onReset("--sf-link-underline-offset")})}var De=r(Be,2),ft=s(De),at=r(s(ft),2);{var Pe=te=>{var Te=mh();x("click",Te,()=>e.onReset("--sf-link-underline-thickness")),f(te,Te)};L(at,te=>{"--sf-link-underline-thickness"in e.overrides&&te(Pe)})}var st=r(ft,2);ae(st,20,()=>[["auto","auto"],["1px","1px"],["2px","2px"],["3px","3px"]],([te,Te])=>Te,(te,Te)=>{var ie=u(()=>Ta(Te,2));let pe=()=>t(ie)[0],he=()=>t(ie)[1];var Se=ks(),Ue=s(Se);_(()=>{Xe(Se,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(v)===he()?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"}`),y(Ue,pe())}),x("click",Se,()=>he()==="auto"?e.onReset("--sf-link-underline-thickness"):e.onSet("--sf-link-underline-thickness",he())),f(te,Se)});var z=r(De,2),$=s(z),N=r($,2),V=r(s(N));_(()=>{ct($,`caret-color:${t(m)||"#6366f1"}`),ct(V,`text-decoration:underline;text-underline-offset:${t(h)}em;text-decoration-thickness:${t(v)}`)}),x("click",V,te=>te.preventDefault()),f(bt,Oe)};L(Ee,bt=>{t(H)&&bt(Le)})}var mt=r(Ke,4),He=s(mt),dt=r(s(He),2),nt=s(dt),ht=r(He,2);{var Ne=bt=>{var Oe=hh(),Qe=r(ce(Oe),2);ae(Qe,20,()=>[{label:"xs",token:"--sf-icon-xs",def:.875},{label:"s",token:"--sf-icon-s",def:1},{label:"m",token:"--sf-icon-m",def:1.5},{label:"l",token:"--sf-icon-l",def:2},{label:"xl",token:"--sf-icon-xl",def:3},{label:"2xl",token:"--sf-icon-2xl",def:4}],Be=>Be.token,(Be,De)=>{{let ft=u(()=>i(e.overrides[De.token]?.replace("em",""),De.def)),at=u(()=>De.token in e.overrides);xt(Be,{get label(){return De.label},get value(){return t(ft)},min:.5,max:6,step:.125,unit:"em",get overridden(){return t(at)},onChange:Pe=>e.onSet(De.token,`${Pe}em`),onReset:()=>e.onReset(De.token)})}});var it=r(Qe,2);{let Be=u(()=>i(e.overrides["--sf-icon-box-pad"]?.replace("em",""),.5)),De=u(()=>"--sf-icon-box-pad"in e.overrides);xt(it,{label:"Box padding",get value(){return t(Be)},min:0,max:2,step:.125,unit:"em",help:"--sf-icon-box-pad — padding around icon when using .sf-icon-box",get overridden(){return t(De)},onChange:ft=>e.onSet("--sf-icon-box-pad",`${ft}em`),onReset:()=>e.onReset("--sf-icon-box-pad")})}f(bt,Oe)};L(ht,bt=>{t(D)&&bt(Ne)})}var At=r(mt,4),Ft=s(At),aa=r(s(Ft),2),Mt=s(aa),Rt=r(Ft,2);{var na=bt=>{var Oe=bh(),Qe=r(ce(Oe),2),it=r(s(Qe),2);ae(it,20,()=>["cover","contain","fill","none"],z=>z,(z,$)=>{const N=u(()=>e.overrides["--sf-object-fit"]??"cover");var V=ks(),te=s(V);_(()=>{Xe(V,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(N)===$?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),y(te,$)}),x("click",V,()=>$==="cover"?e.onReset("--sf-object-fit"):e.onSet("--sf-object-fit",$)),f(z,V)});var Be=r(it,2);{var De=z=>{var $=gh();x("click",$,()=>e.onReset("--sf-object-fit")),f(z,$)};L(Be,z=>{"--sf-object-fit"in e.overrides&&z(De)})}var ft=r(Qe,2),at=r(s(ft),2),Pe=r(at,2);{var st=z=>{var $=ws();x("click",$,()=>e.onReset("--sf-object-position")),f(z,$)};L(Pe,z=>{"--sf-object-position"in e.overrides&&z(st)})}_(()=>Jt(at,e.overrides["--sf-object-position"]??"")),x("input",at,z=>{const $=z.target.value.trim();$?e.onSet("--sf-object-position",$):e.onReset("--sf-object-position")}),f(bt,Oe)};L(Rt,bt=>{t(R)&&bt(na)})}var da=r(At,4),fa=s(da),we=r(s(fa),2),kt=s(we),Tt=r(fa,2);{var Ze=bt=>{var Oe=xh(),Qe=r(ce(Oe),2);ae(Qe,20,()=>[{label:"Top",token:"--sf-safe-top",placeholder:"env(safe-area-inset-top, 0px)"},{label:"Right",token:"--sf-safe-right",placeholder:"env(safe-area-inset-right, 0px)"},{label:"Bottom",token:"--sf-safe-bottom",placeholder:"env(safe-area-inset-bottom, 0px)"},{label:"Left",token:"--sf-safe-left",placeholder:"env(safe-area-inset-left, 0px)"}],it=>it.token,(it,Be)=>{var De=yh(),ft=s(De),at=s(ft),Pe=r(ft,2),st=r(Pe,2);{var z=$=>{var N=ws();x("click",N,()=>e.onReset(Be.token)),f($,N)};L(st,$=>{Be.token in e.overrides&&$(z)})}_(()=>{y(at,Be.label),Jt(Pe,e.overrides[Be.token]??""),ee(Pe,"placeholder",Be.placeholder)}),x("input",Pe,$=>{const N=$.target.value.trim();N?e.onSet(Be.token,N):e.onReset(Be.token)}),f(it,De)}),f(bt,Oe)};L(Tt,bt=>{t(A)&&bt(Ze)})}var It=r(da,4),ot=s(It),lt=r(s(ot),2),qt=s(lt),jt=r(ot,2);{var Dt=bt=>{var Oe=wh(),Qe=r(ce(Oe),2),it=r(s(Qe),2);ae(it,20,()=>["a4","letter","legal","a3"],De=>De,(De,ft)=>{const at=u(()=>e.overrides["--sf-print-page-size"]??"a4");var Pe=ks(),st=s(Pe);_(()=>{Xe(Pe,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(at)===ft?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),y(st,ft)}),x("click",Pe,()=>ft==="a4"?e.onReset("--sf-print-page-size"):e.onSet("--sf-print-page-size",ft)),f(De,Pe)});var Be=r(Qe,2);ae(Be,16,()=>[{label:"Base size",token:"--sf-print-base-size",placeholder:"11pt"},{label:"Page margin",token:"--sf-print-page-margin",placeholder:"2cm"}],De=>De.token,(De,ft)=>{var at=kh(),Pe=s(at),st=s(Pe),z=r(Pe,2),$=r(z,2);{var N=V=>{var te=ws();x("click",te,()=>e.onReset(ft.token)),f(V,te)};L($,V=>{ft.token in e.overrides&&V(N)})}_(()=>{y(st,ft.label),Jt(z,e.overrides[ft.token]??""),ee(z,"placeholder",ft.placeholder)}),x("input",z,V=>{const te=V.target.value.trim();te?e.onSet(ft.token,te):e.onReset(ft.token)}),f(De,at)}),f(bt,Oe)};L(jt,bt=>{t(C)&&bt(Dt)})}var Vt=r(It,4),Wt=s(Vt),ua=r(s(Wt),2),Ua=s(ua),Pa=r(Wt,2);{var Aa=bt=>{var Oe=Ch(),Qe=r(ce(Oe),2);ae(Qe,20,()=>[{label:"is-active",token:"--sf-is-active",note:"Active/selected state"},{label:"is-current",token:"--sf-is-current",note:"Current page/item"},{label:"is-open",token:"--sf-is-open",note:"Open/expanded state"},{label:"is-pressed",token:"--sf-is-pressed",note:"Pressed/depressed state"}],at=>at.token,(at,Pe)=>{const st=u(()=>e.overrides[Pe.token]??"0");var z=_h(),$=s(z),N=s($),V=r($,2),te=s(V),Te=r(V,2),ie=s(Te),pe=r(Te,2);{var he=Se=>{var Ue=ws();x("click",Ue,()=>e.onReset(Pe.token)),f(Se,Ue)};L(pe,Se=>{Pe.token in e.overrides&&Se(he)})}_(()=>{ee($,"aria-label",Pe.label),ee($,"aria-pressed",t(st)==="1"),Xe($,1,`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${t(st)==="1"?"bg-indigo-600":"bg-white/10"}`),Xe(N,1,`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${t(st)==="1"?"translate-x-4":"translate-x-0.5"}`),y(te,Pe.label),y(ie,Pe.note)}),x("click",$,()=>t(st)==="1"?e.onReset(Pe.token):e.onSet(Pe.token,"1")),f(at,z)});var it=r(Qe,2),Be=r(s(it),2),De=r(Be,2);{var ft=at=>{var Pe=ws();x("click",Pe,()=>e.onReset("--sf-field-required-marker")),f(at,Pe)};L(De,at=>{"--sf-field-required-marker"in e.overrides&&at(ft)})}_(()=>Jt(Be,e.overrides["--sf-field-required-marker"]??"")),x("input",Be,at=>{const Pe=at.target.value;Pe?e.onSet("--sf-field-required-marker",Pe):e.onReset("--sf-field-required-marker")}),f(bt,Oe)};L(Pa,bt=>{t(q)&&bt(Aa)})}_(()=>{ee(J,"aria-expanded",t(k)),y(ze,t(k)?"▲":"▼"),ee(X,"aria-expanded",t(S)),y(_e,t(S)?"▲":"▼"),ee(Z,"aria-expanded",t(E)),y(Y,t(E)?"▲":"▼"),ee(re,"aria-expanded",t(I)),y(qe,t(I)?"▲":"▼"),ee(vt,"aria-expanded",t(P)),y(Ot,t(P)?"▲":"▼"),ee(Q,"aria-expanded",t(B)),y(ke,t(B)?"▲":"▼"),ee(U,"aria-expanded",t(H)),y(oe,t(H)?"▲":"▼"),ee(He,"aria-expanded",t(D)),y(nt,t(D)?"▲":"▼"),ee(Ft,"aria-expanded",t(R)),y(Mt,t(R)?"▲":"▼"),ee(fa,"aria-expanded",t(A)),y(kt,t(A)?"▲":"▼"),ee(ot,"aria-expanded",t(C)),y(qt,t(C)?"▲":"▼"),ee(Wt,"aria-expanded",t(q)),y(Ua,t(q)?"▲":"▼")}),x("click",J,()=>{w(k,!t(k))}),x("click",X,()=>{w(S,!t(S))}),x("click",Z,()=>{w(E,!t(E))}),x("click",re,()=>{w(I,!t(I))}),x("click",vt,()=>{w(P,!t(P))}),x("click",Q,()=>{w(B,!t(B))}),x("click",U,()=>{w(H,!t(H))}),x("click",He,()=>{w(D,!t(D))}),x("click",Ft,()=>{w(R,!t(R))}),x("click",fa,()=>{w(A,!t(A))}),x("click",ot,()=>{w(C,!t(C))}),x("click",Wt,()=>{w(q,!t(q))}),f(a,F),ta()}oa(["click","input"]);var Lh=g('
No saved themes yet.
 
Configure your tokens, then save them above.
'),Ph=g('
'),Ih=g('
  
'),Bh=g(' '),Uh=g('
 
'),Ah=g('
  
 
 
 
 
 
 
'),zh=g(''),Eh=g(`
Themes
 
Save your current configuration as a named theme, then re-apply it any time.
+    Themes are stored in this browser.
 
Save current
 
 
 
 
 
`);function Rh(a,e){ea(e,!0);let o=K(va(Ji())),n=K(""),l=u(()=>Object.keys(e.overrides).length);function i(O,F){const M=Object.keys(O);return M.length!==Object.keys(F).length?!1:M.every(J=>O[J]===F[J])}let c=u(()=>t(o).find(O=>i(O.overrides,e.overrides))?.id??"");function d(){t(l)!==0&&(w(o,Qi(t(n),e.overrides),!0),w(n,""))}function p(O){w(o,zu(O),!0)}var m=Eh(),h=r(s(m),4),v=r(s(h),2),b=s(v),k=r(b,2),S=s(k);gr(S,{class:"w-3 h-3"});var E=r(v,2),I=s(E);{var P=O=>{var F=ls("No active overrides yet — adjust some tokens first.");f(O,F)},B=O=>{var F=ls();_(()=>y(F,`Captures all ${t(l)??""} active override${t(l)===1?"":"s"}.`)),f(O,F)};L(I,O=>{t(l)===0?O(P):O(B,-1)})}var H=r(h,2),D=s(H);{var R=O=>{var F=Lh();f(O,F)},C=O=>{var F=zt(),M=ce(F);ae(M,17,()=>t(o),J=>J.id,(J,be)=>{const ze=u(()=>Object.keys(t(be).overrides).length);var Me=Ah(),ye=s(Me),ue=s(ye),X=s(ue),ne=r(ue,2),_e=s(ne),Ae=s(_e),j=r(Ae);{var G=qe=>{Uo(qe,{class:"w-3 h-3 text-indigo-400"})};L(j,qe=>{t(c)===t(be).id&&qe(G)})}var Z=r(_e,2),se=s(Z),Y=r(ne,2),de=s(Y),ge=r(de,2),ve=s(ge);bn(ve,{class:"w-3.5 h-3.5"});var re=r(ye,2);{var Ie=qe=>{var rt=Uh(),et=s(rt);ae(et,17,()=>Object.entries(t(be).overrides).slice(0,5),([gt,Ot])=>gt,(gt,Ot)=>{var _t=u(()=>Ta(t(Ot),2));let fe=()=>t(_t)[0],T=()=>t(_t)[1];var Q=Ih(),le=s(Q);{var ke=U=>{var W=Ph();let oe;_(()=>oe=ct(W,"",oe,{background:T()})),f(U,W)},Ce=u(()=>fe().includes("color")||fe().includes("source"));L(le,U=>{t(Ce)&&U(ke)})}var Ve=r(le,2),Ke=s(Ve);_(U=>y(Ke,U),[()=>fe().replace("--sf-","")]),f(gt,Q)});var tt=r(et,2);{var vt=gt=>{var Ot=Bh(),_t=s(Ot);_(()=>y(_t,`+${t(ze)-5} more`)),f(gt,Ot)};L(tt,gt=>{t(ze)>5&>(vt)})}f(qe,rt)};L(re,qe=>{t(ze)>0&&qe(Ie)})}_(()=>{Xe(Me,1,`group rounded-xl border transition-all overflow-hidden ${t(c)===t(be).id?"border-indigo-500/40 bg-indigo-500/10":"border-white/8 bg-white/4 hover:bg-white/6 hover:border-white/14"}`),y(X,t(be).icon),y(Ae,`${t(be).name??""} `),y(se,`${t(ze)??""} override${t(ze)===1?"":"s"}`)}),x("click",de,()=>e.onApplyTheme(t(be).overrides)),x("click",ge,()=>p(t(be).id)),f(J,Me)}),f(O,F)};L(D,O=>{t(o).length===0?O(R):O(C,-1)})}var A=r(H,2);{var q=O=>{var F=zh();x("click",F,function(...M){e.onResetAll?.apply(this,M)}),f(O,F)};L(A,O=>{t(l)>0&&O(q)})}_(()=>k.disabled=t(l)===0),x("keydown",b,O=>{O.key==="Enter"&&d()}),hr(b,()=>t(n),O=>w(n,O)),x("click",k,d),f(a,m),ta()}oa(["keydown","click"]);var Th=g(' Link copied!',1),Dh=g(" Copy shareable link",1),Mh=g('
Export
 
 
  
CSS output
 
 
 
 
 
 
  
Usage
 
Paste this CSS into your project after the SLASHED import.
 
');function Nh(a,e){ea(e,!0);let o=K("layer"),n=K(!1),l=K(!1),i=u(()=>Ho(e.overrides,{mode:t(o),banner:!0})),c=u(()=>Object.keys(e.overrides).length);async function d(){try{await navigator.clipboard.writeText(t(i)),w(n,!0),setTimeout(()=>{w(n,!1)},2e3)}catch{}}async function p(){try{const j=Yf(e.overrides);await navigator.clipboard.writeText(j),w(l,!0),setTimeout(()=>{w(l,!1)},2e3)}catch{}}function m(){const j=new Blob([t(i)],{type:"text/css"}),G=URL.createObjectURL(j),Z=document.createElement("a");Z.href=G,Z.download="slashed-overrides.css",Z.click(),URL.revokeObjectURL(G)}function h(j){return j.includes("color")||j.includes("scrim-color")||j.includes("shadow-color")?"color":j.includes("duration")||j.includes("delay")||j.includes("transition-duration")?"duration":j.includes("radius")||j.includes("space")||j.includes("size")||j.includes("width")||j.includes("height")||j.includes("gap")||j.includes("blur")||j.includes("text-")||j.includes("leading")||j.includes("tracking")?"dimension":j.includes("font-family")||j.includes("font-mono")||j.includes("font-body")||j.includes("font-heading")||j.includes("font-code")?"fontFamily":j.includes("font-weight")||j.includes("weight")?"fontWeight":"string"}function v(){const j={};for(const[de,ge]of Object.entries(e.overrides)){const ve=de.replace(/^--sf-/,"").replace(/-/g,".");j[ve]={$value:ge,$type:h(de)}}const G=JSON.stringify({$schema:"https://design-tokens.github.io/community-group/format/",...j},null,2),Z=new Blob([G],{type:"application/json"}),se=URL.createObjectURL(Z),Y=document.createElement("a");Y.href=se,Y.download="slashed-tokens.w3c.json",Y.click(),URL.revokeObjectURL(se)}var b=Mh(),k=s(b),S=r(s(k),2),E=s(S),I=r(k,2),P=s(I);{var B=j=>{var G=Th(),Z=ce(G);Uo(Z,{class:"w-3 h-3 text-emerald-400"}),f(j,G)},H=j=>{var G=Dh(),Z=ce(G);$d(Z,{class:"w-3 h-3"}),f(j,G)};L(P,j=>{t(l)?j(B):j(H,-1)})}var D=r(I,2),R=r(s(D),2),C=s(R),A=r(C,2),q=r(D,2),O=s(q),F=s(O),M=r(O,2),J=s(M),be=s(J);{var ze=j=>{Uo(j,{class:"w-3 h-3 text-emerald-400"})},Me=j=>{Zr(j,{class:"w-3 h-3"})};L(be,j=>{t(n)?j(ze):j(Me,-1)})}var ye=r(J,2),ue=s(ye);Xr(ue,{class:"w-3 h-3"});var X=r(q,2),ne=s(X);Xr(ne,{class:"w-3 h-3"});var _e=r(X,2),Ae=r(s(_e),4);Ae.textContent=`@import 'slashed/slashed.full.css';
+@import './slashed-overrides.css';`,_(()=>{y(E,t(c)>0?`${t(c)} override${t(c)!==1?"s":""} ready to export.`:"No overrides yet. Customise tokens, then export."),I.disabled=t(c)===0,Xe(C,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${t(o)==="layer"?"bg-indigo-600 text-white":"text-slate-400 hover:text-slate-200"}`),Xe(A,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${t(o)==="root"?"bg-indigo-600 text-white":"text-slate-400 hover:text-slate-200"}`),y(F,t(i)||"/* No overrides */"),X.disabled=t(c)===0}),x("click",I,p),x("click",C,()=>{w(o,"layer")}),x("click",A,()=>{w(o,"root")}),x("click",J,d),x("click",ye,m),x("click",X,v),f(a,b),ta()}oa(["click"]);const Fh=JSON.parse(`[{"name":"is-active","selector":".is-active","kind":"state","category":"State classes","group":"ACTIVE / SELECTED / CURRENT","description":"Active state — applied to the currently interacted-with element (e.g. pressed button, active menu item). Sets --sf-is-active to 1 for calc() branching.","optional":false,"layer":"slashed.states"},{"name":"is-busy","selector":".is-busy","kind":"state","category":"State classes","group":"LOADING / ASYNC FEEDBACK","description":"Busy state — shows a progress cursor to indicate background processing. Does not mask content; use is-loading when content should be hidden during loading.","optional":false,"layer":"slashed.states"},{"name":"is-clickable","selector":".is-clickable","kind":"state","category":"State classes","group":"FOCUS / INTERACTION MODIFIERS","description":"Makes the element appear interactive (pointer cursor). Use when an element has a click handler but no native button or link role.","optional":false,"layer":"slashed.states"},{"name":"is-clipped","selector":".is-clipped","kind":"state","category":"State classes","group":"OVERFLOW / CLIPPING","description":"Clips overflowing content (overflow: hidden). Use to constrain media or tooltips within a container boundary.","optional":false,"layer":"slashed.states"},{"name":"is-collapsed","selector":".is-collapsed","kind":"state","category":"State classes","group":"OPEN / CLOSED","description":"Collapsed state for disclosure widgets — hides the expandable region. Pair with is-expanded or is-open. Components add transitions.","optional":false,"layer":"slashed.states"},{"name":"is-current","selector":".is-current","kind":"state","category":"State classes","group":"ACTIVE / SELECTED / CURRENT","description":"Current/selected state — marks the active page in navigation or the selected item in a list. Sets --sf-is-current to 1 for calc() branching.","optional":false,"layer":"slashed.states"},{"name":"is-danger","selector":".is-danger","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Danger status state — applies danger color tokens for destructive actions (e.g. a delete confirmation dialog) and form validation errors.","optional":false,"layer":"slashed.states"},{"name":"is-disabled","selector":".is-disabled","kind":"state","category":"State classes","group":"INTERACTIVITY","description":"Disabled state — dims the element (--sf-opacity-disabled), removes pointer events, and sets cursor: not-allowed. Inherited by child elements that re-enable pointer events.","optional":false,"layer":"slashed.states"},{"name":"is-draggable","selector":".is-draggable","kind":"state","category":"State classes","group":"DRAG & DROP","description":"Draggable state — shows a grab cursor to indicate the element can be dragged. Apply before a drag interaction begins.","optional":false,"layer":"slashed.states"},{"name":"is-dragging","selector":".is-dragging","kind":"state","category":"State classes","group":"DRAG & DROP","description":"Active drag state — shows a grabbing cursor while the element is being dragged. Apply during the drag event.","optional":false,"layer":"slashed.states"},{"name":"is-drop-target","selector":".is-drop-target","kind":"state","category":"State classes","group":"DRAG & DROP","description":"Drop-target state — applies a visual highlight to indicate a valid drag-and-drop destination. Toggle on drag-over events.","optional":false,"layer":"slashed.states"},{"name":"is-empty","selector":".is-empty","kind":"state","category":"State classes","group":"EMPTY STATE","description":"Empty state — hides the element when it has no child nodes (:empty). Used for dynamic lists or containers that may render empty.","optional":false,"layer":"slashed.states"},{"name":"is-error","selector":".is-error","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Error state — alias for is-danger. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to is-invalid.","optional":false,"layer":"slashed.states"},{"name":"is-expanded","selector":".is-expanded","kind":"state","category":"State classes","group":"OPEN / CLOSED","description":"Expanded state for disclosure widgets — shows the expandable region. Inverse of is-collapsed. Components add transitions.","optional":false,"layer":"slashed.states"},{"name":"is-fixed","selector":".is-fixed","kind":"state","category":"State classes","group":"POSITION / STICKINESS","description":"Fixed positioning state — removes the element from the document flow and positions it relative to the viewport. Respects writing-mode (logical variant of fixed positioning).","optional":false,"layer":"slashed.states"},{"name":"is-focused","selector":".is-focused","kind":"state","category":"State classes","group":"FOCUS / INTERACTION MODIFIERS","description":"Programmatic focus state — applies the focus ring to an element that should appear focused. Use when :focus-visible alone is insufficient (e.g. custom select).","optional":false,"layer":"slashed.states"},{"name":"is-fullscreen","selector":".is-fullscreen","kind":"state","category":"State classes","group":"POSITION / STICKINESS","description":"Fullscreen positioning state — stretches the element to cover the viewport. Bare positioning only; consumers supply inset values.","optional":false,"layer":"slashed.states"},{"name":"is-hidden","selector":".is-hidden","kind":"state","category":"State classes","group":"VISIBILITY","description":"Hidden state — removes the element from layout and accessibility tree (display: none !important).","optional":false,"layer":"slashed.states"},{"name":"is-highlighted","selector":".is-highlighted","kind":"state","category":"State classes","group":"ACTIVE / SELECTED / CURRENT","description":"Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists.","optional":false,"layer":"slashed.states"},{"name":"is-info","selector":".is-info","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Info status state — applies info color tokens. Use for neutral informational messages and hints.","optional":false,"layer":"slashed.states"},{"name":"is-invalid","selector":".is-invalid","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Invalid state — applies danger color tokens to form fields with validation failures. Identical visual output to is-error; the name signals form-field context.","optional":false,"layer":"slashed.states"},{"name":"is-invisible","selector":".is-invisible","kind":"state","category":"State classes","group":"VISIBILITY","description":"Invisible state — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden).","optional":false,"layer":"slashed.states"},{"name":"is-loading","selector":".is-loading","kind":"state","category":"State classes","group":"LOADING / ASYNC FEEDBACK","description":"Loading state — hides the element's text (color: transparent), removes pointer events, and renders a spinner via ::after. Use for buttons and containers awaiting async results.","optional":false,"layer":"slashed.states"},{"name":"is-open","selector":".is-open","kind":"state","category":"State classes","group":"OPEN / CLOSED","description":"Open/shown state for modals, dropdowns, and drawers — counterpart to is-collapsed/is-hidden. Sets --sf-is-open to 1 for calc() branching.","optional":false,"layer":"slashed.states"},{"name":"is-overlay","selector":".is-overlay","kind":"state","category":"State classes","group":"OVERLAY / BACKDROP","description":"Overlay positioning state — renders the element as a full-screen fixed overlay with a backdrop scrim. Use for modal backgrounds.","optional":false,"layer":"slashed.states"},{"name":"is-pending","selector":".is-pending","kind":"state","category":"State classes","group":"LOADING / ASYNC FEEDBACK","description":"Pending state for optimistic UI — content remains visible but dimmed while an async request is in flight. Differs from is-loading (which hides content entirely).","optional":false,"layer":"slashed.states"},{"name":"is-pinned","selector":".is-pinned","kind":"state","category":"State classes","group":"POSITION / STICKINESS","description":"Pinned / sticky state — applies a visual affordance (e.g. border or shadow) to indicate the element is in its stuck (sticky) position. Toggle via IntersectionObserver.","optional":false,"layer":"slashed.states"},{"name":"is-pressed","selector":".is-pressed","kind":"state","category":"State classes","group":"ACTIVE / SELECTED / CURRENT","description":"Pressed/toggled-on state for toggle buttons. Sets --sf-is-pressed to 1 for calc() branching and signals the selected state to components.","optional":false,"layer":"slashed.states"},{"name":"is-readonly","selector":".is-readonly","kind":"state","category":"State classes","group":"INTERACTIVITY","description":"Readonly state — removes pointer events and text selection. Use for fields that display data but cannot be edited.","optional":false,"layer":"slashed.states"},{"name":"is-resizable","selector":".is-resizable","kind":"state","category":"State classes","group":"POSITION / STICKINESS","description":"Resizable state — enables user resize handle on the element (resize: both). Typically applied to textareas or panels.","optional":false,"layer":"slashed.states"},{"name":"is-scrollable","selector":".is-scrollable","kind":"state","category":"State classes","group":"OVERFLOW / CLIPPING","description":"Makes the element scrollable (overflow: auto) when its content overflows. Applies to both axes.","optional":false,"layer":"slashed.states"},{"name":"is-selected","selector":".is-selected","kind":"state","category":"State classes","group":"ACTIVE / SELECTED / CURRENT","description":"Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles.","optional":false,"layer":"slashed.states"},{"name":"is-skeleton","selector":".is-skeleton","kind":"state","category":"State classes","group":"LOADING / ASYNC FEEDBACK","description":"Skeleton loading placeholder state. Applies a shimmer animation over the element to indicate that content is loading. Works on both img and non-media elements.","optional":false,"layer":"slashed.states"},{"name":"is-sticky","selector":".is-sticky","kind":"state","category":"State classes","group":"POSITION / STICKINESS","description":"Sticky positioning state — sets position: sticky with a top offset from --sf-sticky-offset. Useful for sticky headers and sidebar sub-menus.","optional":false,"layer":"slashed.states"},{"name":"is-success","selector":".is-success","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Success status state — applies success color tokens. Use for confirmation messages, completed form steps, and positive feedback.","optional":false,"layer":"slashed.states"},{"name":"is-truncated","selector":".is-truncated","kind":"state","category":"State classes","group":"OVERFLOW / CLIPPING","description":"Single-line truncation state — clips overflowing text with an ellipsis (overflow: hidden, text-overflow: ellipsis, white-space: nowrap).","optional":false,"layer":"slashed.states"},{"name":"is-unselectable","selector":".is-unselectable","kind":"state","category":"State classes","group":"FOCUS / INTERACTION MODIFIERS","description":"Prevents text selection (user-select: none) on the element. Use on interactive drag handles, labels, and UI chrome that shouldn't be selected.","optional":false,"layer":"slashed.states"},{"name":"is-valid","selector":".is-valid","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Valid state — applies success color tokens to form fields that have passed validation. Visual styling is identical to is-success; the name signals form-field context.","optional":false,"layer":"slashed.states"},{"name":"is-visible","selector":".is-visible","kind":"state","category":"State classes","group":"VISIBILITY","description":"Visible state — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.","optional":false,"layer":"slashed.states"},{"name":"is-warning","selector":".is-warning","kind":"state","category":"State classes","group":"VALIDATION / FEEDBACK","description":"Warning status state — applies warning color tokens. Use for cautionary messages and non-critical alerts.","optional":false,"layer":"slashed.states"},{"name":"no-motion","selector":".no-motion","kind":"accessibility","category":"Accessibility","group":"Reduced motion. Token override helps components that read","description":"Suppresses all animations and transitions within the subtree. Apply to a container to create a reduced-motion zone without relying on the system preference.","optional":false,"layer":"slashed.accessibility"},{"name":"no-print","selector":".no-print","kind":"print","category":"Print","group":"Print visibility utilities","description":"Hides the element in @media print. Use on sidebars, navigation bars, and decorative elements that should not appear on paper.","optional":false,"layer":"slashed.print"},{"name":"print-color-exact","selector":".print-color-exact","kind":"print","category":"Print","group":"Opt-in colour treatment","description":"Forces exact color rendering in print (print-color-adjust: exact). Use on charts and colored badges that must preserve their fill colors in print.","optional":false,"layer":"slashed.print"},{"name":"print-no-color","selector":".print-no-color","kind":"print","category":"Print","group":"Opt-in colour treatment","description":"Strips color information in print (print-color-adjust: economy). Defers to the printer's ink-saving mode for backgrounds and non-critical color fills.","optional":false,"layer":"slashed.print"},{"name":"print-only","selector":".print-only","kind":"print","category":"Print","group":"Print visibility utilities","description":"Hides the element on screen (display: none) but shows it in @media print. Use for print-only headers, footers, and supplementary content not needed on screen.","optional":false,"layer":"slashed.print"},{"name":"sf-alternate","selector":".sf-alternate","kind":"layout","category":"Layout primitives","group":"Alternate (zigzag / media-object)","description":"Zigzag / alternating two-column layout. Even children align image-left/text-right; odd children flip. Collapses to a single column below the breakpoint.","optional":false,"layer":"slashed.layout"},{"name":"sf-aspect","selector":".sf-aspect","kind":"macro","category":"Macro classes","group":"Aspect","description":"Sets aspect-ratio from a --sf-aspect-ratio scoped token. Override the token inline to get any ratio without a new class.","optional":false,"layer":"slashed.macros"},{"name":"sf-bento","selector":".sf-bento","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Auto-fill bento grid for card dashboards. Children span 1 column by default; use span modifiers (sf-bento-wide, sf-bento-tall, sf-bento-full, sf-bento-featured) to break the grid.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento--2","selector":".sf-bento--2","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Bento grid variant with a 2-column base layout.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento--3","selector":".sf-bento--3","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Bento grid variant with a 3-column base layout.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento--6","selector":".sf-bento--6","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Bento grid variant with a 6-column base layout.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento--compact","selector":".sf-bento--compact","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Bento grid variant with shorter default row height.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento--tall","selector":".sf-bento--tall","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Bento grid variant with taller default row height.","optional":false,"layer":"slashed.layout"},{"name":"sf-bento-featured","selector":".sf-bento-featured","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Span modifier for a bento item: takes up 2×2 cells (featured hero placement).","optional":false,"layer":"slashed.layout"},{"name":"sf-bento-full","selector":".sf-bento-full","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Span modifier for a bento item: stretches across all columns (full-width banner).","optional":false,"layer":"slashed.layout"},{"name":"sf-bento-tall","selector":".sf-bento-tall","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Span modifier for a bento item: doubles the row height (tall card).","optional":false,"layer":"slashed.layout"},{"name":"sf-bento-wide","selector":".sf-bento-wide","kind":"layout","category":"Layout primitives","group":"Bento grid","description":"Span modifier for a bento item: spans 2 columns (wide card).","optional":false,"layer":"slashed.layout"},{"name":"sf-bg","selector":".sf-bg","kind":"layout","category":"Layout primitives","group":"Background","description":"Background layer — absolutely-positioned cover media that sits behind a parent's content. The parent is auto-promoted to a positioned, isolated stacking context via :has(), so .sf-bg composes natively under .sf-scrim (background → scrim gradient → content). Works as a bare  or as a wrapper with a nested > img / > video / > picture.","optional":false,"layer":"slashed.layout"},{"name":"sf-box","selector":".sf-box","kind":"layout","category":"Layout primitives","group":"Box","description":"Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room.","optional":false,"layer":"slashed.layout"},{"name":"sf-breakout","selector":".sf-breakout","kind":"layout","category":"Layout primitives","group":"Content grid (breakout pattern)","description":"Breaks a child element out of a parent sf-content-grid, spanning full bleed (or a named grid area) regardless of the parent column. Useful for full-width sections inside constrained prose.","optional":false,"layer":"slashed.layout"},{"name":"sf-center","selector":".sf-center","kind":"layout","category":"Layout primitives","group":"Center","description":"Centers children both horizontally and vertically using flexbox. Optionally add sf-center--intrinsic to size the container to its content.","optional":false,"layer":"slashed.layout"},{"name":"sf-center--intrinsic","selector":".sf-center--intrinsic","kind":"layout","category":"Layout primitives","group":"Center","description":"Modifier for sf-center: constrains the container to the natural width of its children (no stretching to fill available space).","optional":false,"layer":"slashed.layout"},{"name":"sf-clickable-parent","selector":".sf-clickable-parent","kind":"accessibility","category":"Accessibility","group":"Clickable-parent","description":"Makes the entire card or list-item clickable via an absolutely-positioned child overlay link. Apply to the container; place sf-clickable-parent__overlay on the .","optional":false,"layer":"slashed.accessibility"},{"name":"sf-clickable-parent__overlay","selector":".sf-clickable-parent__overlay","kind":"accessibility","category":"Accessibility","group":"Clickable-parent","description":"The full-bleed overlay link inside an sf-clickable-parent. Stretches to cover the parent and uses pointer-events to let interactive children keep their own clicks.","optional":false,"layer":"slashed.accessibility"},{"name":"sf-cluster","selector":".sf-cluster","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Flex-wrap row of variable-width items with automatic gap. Children wrap when the container is too narrow. Use for tag lists, button groups, and icon rows.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--2xl","selector":".sf-cluster--2xl","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with 2xl gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--between","selector":".sf-cluster--between","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant that distributes items with space-between alignment.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--center","selector":".sf-cluster--center","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant that centers the item row horizontally.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--end","selector":".sf-cluster--end","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant that aligns items to the inline end (right in LTR).","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--l","selector":".sf-cluster--l","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with large (l) gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--m","selector":".sf-cluster--m","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with medium (m) gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--no-wrap","selector":".sf-cluster--no-wrap","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant that prevents item wrapping (single-line row).","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--s","selector":".sf-cluster--s","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with small (s) gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--xl","selector":".sf-cluster--xl","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with xl gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-cluster--xs","selector":".sf-cluster--xs","kind":"layout","category":"Layout primitives","group":"Cluster","description":"Cluster variant with xs gap between items.","optional":false,"layer":"slashed.layout"},{"name":"sf-color-pulse","selector":".sf-color-pulse","kind":"motion","category":"Motion / animation","group":"@property color animation","description":"Applies a gentle color-pulse animation to draw attention to a dynamic value change (e.g. a counter updating). Scoped to users who have not requested reduced motion.","optional":false,"layer":"slashed.motion"},{"name":"sf-container","selector":".sf-container","kind":"layout","category":"Layout primitives","group":"Section","description":"Max-width page container, centered with auto side gutters. Establishes a named inline-size container (cq-container) for container queries. Default width is --sf-container-m.","optional":false,"layer":"slashed.layout"},{"name":"sf-container--full","selector":".sf-container--full","kind":"layout","category":"Layout primitives","group":"Container","description":"Container variant that spans the full viewport width (no max-width cap).","optional":false,"layer":"slashed.layout"},{"name":"sf-container--narrow","selector":".sf-container--narrow","kind":"layout","category":"Layout primitives","group":"Container","description":"Container variant with a narrower max-width (--sf-container-s). Use for single-column prose and forms.","optional":false,"layer":"slashed.layout"},{"name":"sf-container--prose","selector":".sf-container--prose","kind":"layout","category":"Layout primitives","group":"Container","description":"Container variant with a prose-optimised max-width (--sf-container-prose). Ideal for long-form reading content.","optional":false,"layer":"slashed.layout"},{"name":"sf-container--wide","selector":".sf-container--wide","kind":"layout","category":"Layout primitives","group":"Container","description":"Container variant with a wider max-width (--sf-container-l). Use for dashboards and wide media.","optional":false,"layer":"slashed.layout"},{"name":"sf-content-auto","selector":".sf-content-auto","kind":"macro","category":"Macro classes","group":"Content visibility","description":"Sets content-visibility: auto on the element. The browser skips rendering off-screen content, improving LCP for long pages.","optional":false,"layer":"slashed.macros"},{"name":"sf-content-grid","selector":".sf-content-grid","kind":"layout","category":"Layout primitives","group":"Content grid (breakout pattern)","description":"Holy-grail content grid with named areas: full-bleed, popout, and content columns. Use sf-breakout on children to escape the content column.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover","selector":".sf-cover","kind":"layout","category":"Layout primitives","group":"Cover","description":"Vertically stretches to at least a viewport height with a centered element (sf-cover__center). Typical use: hero sections.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover__center","selector":".sf-cover__center","kind":"layout","category":"Layout primitives","group":"Cover","description":"The centered focal element inside an sf-cover. Stays vertically centered even when the cover content is shorter than the viewport.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover--max","selector":".sf-cover--max","kind":"layout","category":"Layout primitives","group":"Cover","description":"Cover variant that uses a max-height instead of min-height for the viewport constraint.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover--min","selector":".sf-cover--min","kind":"layout","category":"Layout primitives","group":"Cover","description":"Cover variant that reduces the minimum height to half a viewport.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover--padding-l","selector":".sf-cover--padding-l","kind":"layout","category":"Layout primitives","group":"Cover","description":"Cover variant with large vertical padding above and below the centered content.","optional":false,"layer":"slashed.layout"},{"name":"sf-cover--padding-s","selector":".sf-cover--padding-s","kind":"layout","category":"Layout primitives","group":"Cover","description":"Cover variant with small vertical padding above and below the centered content.","optional":false,"layer":"slashed.layout"},{"name":"sf-cq","selector":".sf-cq","kind":"layout","category":"Layout primitives","group":"Container query context","description":"Assigns an inline-size container context to any element. Children can then use @container rules or container-query-aware tokens.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider","selector":".sf-divider","kind":"layout","category":"Layout primitives","group":"Divider","description":"Horizontal rule (divider line). Uses --sf-divider-* tokens for color, width, and style. Modifiers change dash style or orientation.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--dashed","selector":".sf-divider--dashed","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant with a dashed stroke.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--dotted","selector":".sf-divider--dotted","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant with a dotted stroke.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--gradient","selector":".sf-divider--gradient","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant rendered as a gradient that fades to transparent at both ends.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--soft","selector":".sf-divider--soft","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant with reduced opacity (subtle separator).","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--strong","selector":".sf-divider--strong","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant with stronger/darker color for a more prominent separator.","optional":false,"layer":"slashed.layout"},{"name":"sf-divider--vertical","selector":".sf-divider--vertical","kind":"layout","category":"Layout primitives","group":"Divider","description":"Divider variant rendered as a vertical line. Use inside flex or grid containers.","optional":false,"layer":"slashed.layout"},{"name":"sf-entrance--fade","selector":".sf-entrance--fade","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in as it enters the viewport. Animation tied to scroll progress via animation-timeline.","optional":false,"layer":"slashed.motion"},{"name":"sf-entrance--fade-down","selector":".sf-entrance--fade-down","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in while moving downward into position.","optional":false,"layer":"slashed.motion"},{"name":"sf-entrance--fade-left","selector":".sf-entrance--fade-left","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in while moving from the right toward the left.","optional":false,"layer":"slashed.motion"},{"name":"sf-entrance--fade-right","selector":".sf-entrance--fade-right","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in while moving from the left toward the right.","optional":false,"layer":"slashed.motion"},{"name":"sf-entrance--fade-up","selector":".sf-entrance--fade-up","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in while moving upward into position.","optional":false,"layer":"slashed.motion"},{"name":"sf-entrance--scale-up","selector":".sf-entrance--scale-up","kind":"motion","category":"Motion / animation","group":"Scroll-driven entrances","description":"Scroll-driven entrance: element fades in while scaling up from a slightly smaller size.","optional":false,"layer":"slashed.motion"},{"name":"sf-equal","selector":".sf-equal","kind":"layout","category":"Layout primitives","group":"Equal columns (intrinsically responsive)","description":"Auto-fill equal-columns grid. Columns fill the row and wrap when they hit --sf-equal-min-col. No breakpoints needed.","optional":false,"layer":"slashed.layout"},{"name":"sf-equal--2","selector":".sf-equal--2","kind":"layout","category":"Layout primitives","group":"Equal columns (intrinsically responsive)","description":"Equal-columns variant locked to 2 columns using --sf-equal-min-col-2.","optional":false,"layer":"slashed.layout"},{"name":"sf-equal--3","selector":".sf-equal--3","kind":"layout","category":"Layout primitives","group":"Equal columns (intrinsically responsive)","description":"Equal-columns variant locked to 3 columns using --sf-equal-min-col-3.","optional":false,"layer":"slashed.layout"},{"name":"sf-equal--4","selector":".sf-equal--4","kind":"layout","category":"Layout primitives","group":"Equal columns (intrinsically responsive)","description":"Equal-columns variant locked to 4 columns using --sf-equal-min-col-4.","optional":false,"layer":"slashed.layout"},{"name":"sf-equal--6","selector":".sf-equal--6","kind":"layout","category":"Layout primitives","group":"Equal columns (intrinsically responsive)","description":"Equal-columns variant locked to 6 columns using --sf-equal-min-col-6.","optional":false,"layer":"slashed.layout"},{"name":"sf-equal-height","selector":".sf-equal-height","kind":"macro","category":"Macro classes","group":"Equal height","description":"Forces all flex children to equal height (align-items: stretch). Use on a flex row to make cards in a grid share the tallest card's height.","optional":false,"layer":"slashed.macros"},{"name":"sf-fade-in","selector":".sf-fade-in","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot fade-in animation (opacity 0 → 1). Scoped to no-preference so it stops automatically for reduced-motion users.","optional":false,"layer":"slashed.motion"},{"name":"sf-fade-out","selector":".sf-fade-out","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot fade-out animation (opacity 1 → 0). Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-flow","selector":".sf-flow","kind":"macro","category":"Macro classes","group":"Flow","description":"Applies --sf-flow-space as margin-block-start to all direct children except the first. Establishes consistent vertical rhythm in prose-like containers.","optional":false,"layer":"slashed.macros"},{"name":"sf-focus-parent","selector":".sf-focus-parent","kind":"accessibility","category":"Accessibility","group":"Focus-parent","description":"Forwards focus-visible styling to this container when any descendant is keyboard-focused. Useful for custom controls that wrap a visually-hidden .","optional":false,"layer":"slashed.accessibility"},{"name":"sf-focus-shadow","selector":".sf-focus-shadow","kind":"accessibility","category":"Accessibility","group":"Focus-shadow opt-in","description":"Applies the standard focus ring as a box-shadow to any element. Use on custom controls where the native :focus-visible ring doesn't render correctly.","optional":false,"layer":"slashed.accessibility"},{"name":"sf-frame","selector":".sf-frame","kind":"layout","category":"Layout primitives","group":"Frame","description":"Aspect-ratio container for media (images, video, maps). Children fill and cover the fixed-ratio box. Default ratio is 16:9.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--3-2","selector":".sf-frame--3-2","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to a 3:2 aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--4-3","selector":".sf-frame--4-3","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to a 4:3 aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--cinema","selector":".sf-frame--cinema","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to a cinematic 21:9 aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--golden","selector":".sf-frame--golden","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to the golden ratio (1.618:1).","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--portrait","selector":".sf-frame--portrait","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to a portrait 2:3 aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--square","selector":".sf-frame--square","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to a square 1:1 aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-frame--video","selector":".sf-frame--video","kind":"layout","category":"Layout primitives","group":"Frame","description":"Frame variant locked to the standard 16:9 video aspect ratio.","optional":false,"layer":"slashed.layout"},{"name":"sf-full-bleed","selector":".sf-full-bleed","kind":"layout","category":"Layout primitives","group":"Content grid (breakout pattern)","description":"Forces an element to span the full viewport width, breaking out of any centered container. Use for full-bleed images and section backgrounds.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap","selector":".sf-gap","kind":"layout","category":"Layout primitives","group":"Gap","description":"Injects the default --sf-gap into an existing flex or grid container without imposing display:flex itself. Use when the parent is already a flex or grid.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--2xl","selector":".sf-gap--2xl","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with 2xl gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--l","selector":".sf-gap--l","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with large (l) gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--m","selector":".sf-gap--m","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with medium (m) gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--s","selector":".sf-gap--s","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with small (s) gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--xl","selector":".sf-gap--xl","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with xl gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-gap--xs","selector":".sf-gap--xs","kind":"layout","category":"Layout primitives","group":"Gap","description":"Gap injection variant with xs gap value.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid","selector":".sf-grid","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Auto-fill CSS grid. Columns are sized with RAM pattern (Repeat, Auto-fill, Minmax) and wrap automatically. Default column min-width is --sf-grid-min-col.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--2xl","selector":".sf-grid--2xl","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with a 2xl minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--dense","selector":".sf-grid--dense","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with grid-auto-flow: dense, allowing the grid to fill holes created by span modifiers.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--fit","selector":".sf-grid--fit","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant that switches from auto-fill to auto-fit, collapsing empty columns.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--l","selector":".sf-grid--l","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with a large (l) minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--m","selector":".sf-grid--m","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with a medium (m) minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--s","selector":".sf-grid--s","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with a small (s) minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--xl","selector":".sf-grid--xl","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with an xl minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid--xs","selector":".sf-grid--xs","kind":"layout","category":"Layout primitives","group":"Grid (auto)","description":"Grid variant with an xs minimum column width.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-1","selector":".sf-grid-cols-1","kind":"layout","category":"Layout primitives","group":"Single-column grid","description":"Single-column layout (forces all children to one column).","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-1-2","selector":".sf-grid-cols-1-2","kind":"layout","category":"Layout primitives","group":"Ratio grids","description":"Two-column ratio grid: first child takes 1fr, second takes 2fr. Container-query responsive.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-1-3","selector":".sf-grid-cols-1-3","kind":"layout","category":"Layout primitives","group":"Ratio grids","description":"Two-column ratio grid: first child takes 1fr, second takes 3fr. Container-query responsive.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-2","selector":".sf-grid-cols-2","kind":"layout","category":"Layout primitives","group":"Fixed column grids (container-query responsive)","description":"Responsive 2-column fixed grid. Uses container queries to collapse to one column on narrow containers.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-2-1","selector":".sf-grid-cols-2-1","kind":"layout","category":"Layout primitives","group":"Ratio grids","description":"Two-column ratio grid: first child takes 2fr, second takes 1fr. Container-query responsive.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-3","selector":".sf-grid-cols-3","kind":"layout","category":"Layout primitives","group":"Fixed column grids (container-query responsive)","description":"Responsive 3-column fixed grid. Collapses progressively on narrow containers.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-3-1","selector":".sf-grid-cols-3-1","kind":"layout","category":"Layout primitives","group":"Ratio grids","description":"Two-column ratio grid: first child takes 3fr, second takes 1fr. Container-query responsive.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-4","selector":".sf-grid-cols-4","kind":"layout","category":"Layout primitives","group":"Fixed column grids (container-query responsive)","description":"Responsive 4-column fixed grid. Collapses progressively on narrow containers.","optional":false,"layer":"slashed.layout"},{"name":"sf-grid-cols-6","selector":".sf-grid-cols-6","kind":"layout","category":"Layout primitives","group":"Fixed column grids (container-query responsive)","description":"Responsive 6-column fixed grid. Collapses progressively on narrow containers.","optional":false,"layer":"slashed.layout"},{"name":"sf-icon","selector":".sf-icon","kind":"layout","category":"Layout primitives","group":"Icon","description":"Inline icon sizing primitive. Sets width and height to --sf-icon-m via em-based tokens so the icon scales with the surrounding text.","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--2xl","selector":".sf-icon--2xl","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-2xl (extra-extra-large).","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--boxed","selector":".sf-icon--boxed","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant with a square bordered box background. Useful for standalone icon buttons and feature icons.","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--l","selector":".sf-icon--l","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-l (large).","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--m","selector":".sf-icon--m","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-m (medium, same as base sf-icon).","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--s","selector":".sf-icon--s","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-s (small).","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--xl","selector":".sf-icon--xl","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-xl (extra-large).","optional":false,"layer":"slashed.layout"},{"name":"sf-icon--xs","selector":".sf-icon--xs","kind":"layout","category":"Layout primitives","group":"Icon","description":"Icon variant sized to --sf-icon-xs (extra-small).","optional":false,"layer":"slashed.layout"},{"name":"sf-imposter","selector":".sf-imposter","kind":"layout","category":"Layout primitives","group":"Imposter","description":"Absolutely positions an element at the center of its nearest positioned ancestor. Use for overlays, badges, and floating labels.","optional":false,"layer":"slashed.layout"},{"name":"sf-imposter--contain","selector":".sf-imposter--contain","kind":"layout","category":"Layout primitives","group":"Imposter","description":"Imposter variant that clamps the element within the bounds of its parent using overflow:hidden on the parent.","optional":false,"layer":"slashed.layout"},{"name":"sf-imposter--fixed","selector":".sf-imposter--fixed","kind":"layout","category":"Layout primitives","group":"Imposter","description":"Imposter variant that uses position:fixed instead of absolute. Use for viewport-level overlays and modals.","optional":false,"layer":"slashed.layout"},{"name":"sf-line-clamp-2","selector":".sf-line-clamp-2","kind":"macro","category":"Macro classes","group":"Truncate / line-clamp","description":"Clamps text to 2 lines with an ellipsis. Applies -webkit-line-clamp: 2.","optional":false,"layer":"slashed.macros"},{"name":"sf-line-clamp-3","selector":".sf-line-clamp-3","kind":"macro","category":"Macro classes","group":"Truncate / line-clamp","description":"Clamps text to 3 lines with an ellipsis. Applies -webkit-line-clamp: 3.","optional":false,"layer":"slashed.macros"},{"name":"sf-line-clamp-N","selector":".sf-line-clamp-N","kind":"macro","category":"Macro classes","group":"Truncate / line-clamp","description":"Clamps text to a custom N lines. Set --sf-line-clamp on the element to control the number of visible lines.","optional":false,"layer":"slashed.macros"},{"name":"sf-link--reverse","selector":".sf-link--reverse","kind":"macro","category":"Macro classes","group":"Link variants","description":"Link color modifier: reverses the default link color to work on dark/inverted backgrounds. Sets color to --sf-color-text--inverse.","optional":false,"layer":"slashed.macros"},{"name":"sf-link--subtle","selector":".sf-link--subtle","kind":"macro","category":"Macro classes","group":"Link variants","description":"Link color modifier: renders the link in the body text color instead of the default action color. Underline still indicates the link on hover.","optional":false,"layer":"slashed.macros"},{"name":"sf-link-external","selector":".sf-link-external","kind":"macro","category":"Macro classes","group":"External link indication","description":"Automatically appends an external-link icon (via ::after content) to indicate the link opens in a new tab or goes to an external domain.","optional":false,"layer":"slashed.macros"},{"name":"sf-no-tap-highlight","selector":".sf-no-tap-highlight","kind":"macro","category":"Macro classes","group":"No tap highlight","description":"Removes the mobile tap highlight color (-webkit-tap-highlight-color: transparent). Use on interactive elements with a custom active state.","optional":false,"layer":"slashed.macros"},{"name":"sf-not-prose","selector":".sf-not-prose","kind":"macro","category":"Macro classes","group":"Prose","description":"Opt-out of sf-prose typography styles within a prose block. Apply to an element that should keep default browser or component styles.","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade","selector":".sf-overflow-fade","kind":"macro","category":"Macro classes","group":"Overflow fade","description":"Adds a gradient fade at the inline-end of an overflowing element to hint at hidden content. Use inside sf-reel or any scroll container.","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--block","selector":".sf-overflow-fade--block","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades both the top and bottom edges simultaneously (block axis).","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--bottom","selector":".sf-overflow-fade--bottom","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades the bottom (block-end) edge.","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--inline","selector":".sf-overflow-fade--inline","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades both the left and right edges simultaneously (inline axis).","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--left","selector":".sf-overflow-fade--left","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades the left (inline-start) edge.","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--right","selector":".sf-overflow-fade--right","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades the right (inline-end) edge. Explicit alias for the default sf-overflow-fade behaviour.","optional":false,"layer":"slashed.macros"},{"name":"sf-overflow-fade--top","selector":".sf-overflow-fade--top","kind":"macro","category":"Macro classes","group":"","description":"Overflow fade variant: fades the top (block-start) edge.","optional":false,"layer":"slashed.macros"},{"name":"sf-pancake","selector":".sf-pancake","kind":"layout","category":"Layout primitives","group":"Pancake (sticky footer)","description":"Three-row layout (header, main, footer) where main takes all remaining vertical space via flex-grow. The footer always sticks to the bottom on tall viewports.","optional":false,"layer":"slashed.layout"},{"name":"sf-prose","selector":".sf-prose","kind":"macro","category":"Macro classes","group":"Prose","description":"Opinionated typographic defaults for long-form content: heading hierarchy, paragraph spacing, blockquote, code, and list styling. Override with sf-not-prose.","optional":false,"layer":"slashed.macros"},{"name":"sf-reel","selector":".sf-reel","kind":"layout","category":"Layout primitives","group":"Reel","description":"Horizontally scrollable row of fixed-height items with snap scrolling. Children don't shrink below their intrinsic width, creating a card carousel effect.","optional":false,"layer":"slashed.layout"},{"name":"sf-scale-down","selector":".sf-scale-down","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot scale-down animation (element shrinks from full size). Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-scale-up","selector":".sf-scale-up","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot scale-up animation (element grows from smaller size). Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-scrim","selector":".sf-scrim","kind":"macro","category":"Macro classes","group":"Scrim","description":"Overlay container with a gradient darkening scrim behind text placed on an image or colored background.","optional":false,"layer":"slashed.macros"},{"name":"sf-scrim__content","selector":".sf-scrim__content","kind":"macro","category":"Macro classes","group":"Scrim","description":"Content area inside an sf-scrim. Positioned above the gradient overlay layer.","optional":false,"layer":"slashed.macros"},{"name":"sf-scrim--bottom","selector":".sf-scrim--bottom","kind":"macro","category":"Macro classes","group":"Scrim","description":"Scrim variant with the gradient emanating from the bottom edge (bottom-to-top fade).","optional":false,"layer":"slashed.macros"},{"name":"sf-scrim--full","selector":".sf-scrim--full","kind":"macro","category":"Macro classes","group":"Scrim","description":"Scrim variant that covers the entire surface with a uniform translucent overlay.","optional":false,"layer":"slashed.macros"},{"name":"sf-scrim--top","selector":".sf-scrim--top","kind":"macro","category":"Macro classes","group":"Scrim","description":"Scrim variant with the gradient emanating from the top edge (top-to-bottom fade).","optional":false,"layer":"slashed.macros"},{"name":"sf-scroll-shadow","selector":".sf-scroll-shadow","kind":"macro","category":"Macro classes","group":"Scroll shadow","description":"Adds inset box-shadows at the top and bottom of a scrollable container to indicate hidden overflow above or below.","optional":false,"layer":"slashed.macros"},{"name":"sf-scroll-snap","selector":".sf-scroll-snap","kind":"macro","category":"Macro classes","group":"Scroll snap","description":"Enables CSS scroll-snap-type: x mandatory on a horizontal scroll container. Children should have scroll-snap-align.","optional":false,"layer":"slashed.macros"},{"name":"sf-section","selector":".sf-section","kind":"layout","category":"Layout primitives","group":"Section","description":"Full-width page section with vertical padding (--sf-section-pad-default). Use to create visually distinct content bands.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--2xl","selector":".sf-section--2xl","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with 2xl vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--collapse","selector":".sf-section--collapse","kind":"layout","category":"Layout primitives","group":"Collapse modifier","description":"Section variant that removes vertical padding (zero-padding section for adjacent same-color blocks).","optional":false,"layer":"slashed.layout"},{"name":"sf-section--guttered","selector":".sf-section--guttered","kind":"layout","category":"Layout primitives","group":"Section","description":"Adds horizontal page gutters directly to a section — use when you want to skip a separate .sf-container wrapper (gutterless layout inside section). Neutralises container gutter to prevent double padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--l","selector":".sf-section--l","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with large (l) vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--m","selector":".sf-section--m","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with medium (m) vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--s","selector":".sf-section--s","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with small (s) vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--xl","selector":".sf-section--xl","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with xl vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section--xs","selector":".sf-section--xs","kind":"layout","category":"Layout primitives","group":"Section","description":"Section variant with xs vertical padding.","optional":false,"layer":"slashed.layout"},{"name":"sf-section-group","selector":".sf-section-group","kind":"layout","category":"Layout primitives","group":"Section","description":"Groups adjacent sf-section elements so their combined padding collapses correctly at the top and bottom edges.","optional":false,"layer":"slashed.layout"},{"name":"sf-sidebar","selector":".sf-sidebar","kind":"layout","category":"Layout primitives","group":"Sidebar","description":"Two-column sidebar layout: first child is the sidebar, second child is main content. The sidebar collapses below the breakpoint (--sf-sidebar-min-width). Default sidebar on the left.","optional":false,"layer":"slashed.layout"},{"name":"sf-sidebar--narrow","selector":".sf-sidebar--narrow","kind":"layout","category":"Layout primitives","group":"Sidebar","description":"Sidebar variant with a narrower sidebar column.","optional":false,"layer":"slashed.layout"},{"name":"sf-sidebar--right","selector":".sf-sidebar--right","kind":"layout","category":"Layout primitives","group":"Sidebar","description":"Sidebar variant with the sidebar on the right (second child becomes the sidebar).","optional":false,"layer":"slashed.layout"},{"name":"sf-sidebar--wide","selector":".sf-sidebar--wide","kind":"layout","category":"Layout primitives","group":"Sidebar","description":"Sidebar variant with a wider sidebar column.","optional":false,"layer":"slashed.layout"},{"name":"sf-slide-in-down","selector":".sf-slide-in-down","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot slide-in-from-above animation. Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-slide-in-left","selector":".sf-slide-in-left","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot slide-in-from-right animation (slides to the left). Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-slide-in-right","selector":".sf-slide-in-right","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot slide-in-from-left animation (slides to the right). Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-slide-in-up","selector":".sf-slide-in-up","kind":"motion","category":"Motion / animation","group":"Animation presets","description":"One-shot slide-in-from-below animation. Scoped to no-preference.","optional":false,"layer":"slashed.motion"},{"name":"sf-stack","selector":".sf-stack","kind":"layout","category":"Layout primitives","group":"Stack","description":"Flex column with even vertical spacing between children (--sf-stack-gap). Stacking context for vertical rhythm.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--2xl","selector":".sf-stack--2xl","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with 2xl gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--center","selector":".sf-stack--center","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant that centers children on the cross axis.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--end","selector":".sf-stack--end","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant that aligns children to the cross-axis end (right in LTR).","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--l","selector":".sf-stack--l","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with large (l) gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--m","selector":".sf-stack--m","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with medium (m) gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--s","selector":".sf-stack--s","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with small (s) gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--stretch","selector":".sf-stack--stretch","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant that stretches children to fill the full available width.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--xl","selector":".sf-stack--xl","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with xl gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-stack--xs","selector":".sf-stack--xs","kind":"layout","category":"Layout primitives","group":"Stack","description":"Stack variant with xs gap between children.","optional":false,"layer":"slashed.layout"},{"name":"sf-subgrid","selector":".sf-subgrid","kind":"layout","category":"Layout primitives","group":"Subgrid","description":"Passes the parent grid columns through to children via subgrid. Place on a grid item that should align its own children to the outer grid columns.","optional":false,"layer":"slashed.layout"},{"name":"sf-subgrid-rows","selector":".sf-subgrid-rows","kind":"layout","category":"Layout primitives","group":"Subgrid","description":"Passes the parent grid rows through to children via subgrid. Place on a grid item that should align its own children to the outer grid rows.","optional":false,"layer":"slashed.layout"},{"name":"sf-surface","selector":".sf-surface","kind":"macro","category":"Macro classes","group":"Surface","description":"Generic semantic surface: applies --sf-surface-color as the background and automatically sets a contrasting text color. Tone variants (--primary, --action, etc.) activate preset palettes.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--action","selector":".sf-surface--action","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the action color palette (button/CTA primary color).","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--danger","selector":".sf-surface--danger","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the danger status palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--info","selector":".sf-surface--info","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the info status palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--inverse","selector":".sf-surface--inverse","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant that inverts light/dark, creating an always-dark surface in light mode and always-light in dark mode.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--neutral","selector":".sf-surface--neutral","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the neutral palette (muted/gray).","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--primary","selector":".sf-surface--primary","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the primary brand color palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--secondary","selector":".sf-surface--secondary","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the secondary brand color palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--success","selector":".sf-surface--success","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the success status palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--tertiary","selector":".sf-surface--tertiary","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the tertiary brand color palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-surface--warning","selector":".sf-surface--warning","kind":"macro","category":"Macro classes","group":"Surface","description":"Surface variant using the warning status palette.","optional":false,"layer":"slashed.macros"},{"name":"sf-switcher","selector":".sf-switcher","kind":"layout","category":"Layout primitives","group":"Switcher","description":"Flex layout that switches from a horizontal row to a vertical column when the container is narrower than --sf-switcher-threshold.","optional":false,"layer":"slashed.layout"},{"name":"sf-switcher--no-wrap","selector":".sf-switcher--no-wrap","kind":"layout","category":"Layout primitives","group":"Switcher","description":"Switcher variant that stays horizontal and never wraps (single-line regardless of container width).","optional":false,"layer":"slashed.layout"},{"name":"sf-switcher--vertical","selector":".sf-switcher--vertical","kind":"layout","category":"Layout primitives","group":"Switcher","description":"Switcher variant that starts in the vertical (stacked) direction on all sizes.","optional":false,"layer":"slashed.layout"},{"name":"sf-tabular-nums","selector":".sf-tabular-nums","kind":"macro","category":"Macro classes","group":"Tabular figures","description":"Forces tabular (monospaced) number rendering. Use on price tables, counters, and anywhere numbers need to align vertically across rows.","optional":false,"layer":"slashed.macros"},{"name":"sf-text-gradient","selector":".sf-text-gradient","kind":"macro","category":"Macro classes","group":"Text gradient","description":"Applies a brand gradient to inline text. Sets the background to the gradient, clips it to the text, and makes the text color transparent.","optional":false,"layer":"slashed.macros"},{"name":"sf-text-protect","selector":".sf-text-protect","kind":"macro","category":"Macro classes","group":"Text protect","description":"Wraps text in a translucent dark gradient overlay to ensure legibility when placed over a light or variable background image.","optional":false,"layer":"slashed.macros"},{"name":"sf-theme-transition","selector":".sf-theme-transition","kind":"theme","category":"Theme utilities","group":"OPT-IN THEME CROSS-FADE","description":"Opt-in animated light/dark theme crossfade. Apply to  (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration.","optional":false,"layer":"slashed.themes"},{"name":"sf-truncate","selector":".sf-truncate","kind":"macro","category":"Macro classes","group":"Truncate / line-clamp","description":"Single-line text overflow with ellipsis. Equivalent to the classic text-overflow: ellipsis trio (white-space nowrap, overflow hidden, text-overflow ellipsis).","optional":false,"layer":"slashed.macros"},{"name":"skip-link","selector":".skip-link","kind":"accessibility","category":"Accessibility","group":"Skip link","description":"Accessible skip-navigation link. Hidden until focused; jumps keyboard users past repeated navigation blocks. Place as the very first element in .","optional":false,"layer":"slashed.accessibility"},{"name":"sr-only","selector":".sr-only","kind":"accessibility","category":"Accessibility","group":"Screen-reader-only. Atomic contract: a partial override","description":"Visually hides content while keeping it accessible to screen readers. Use for labels, descriptions, and off-screen text that assistive technology needs.","optional":false,"layer":"slashed.accessibility"},{"name":"sr-only-focusable","selector":".sr-only-focusable","kind":"accessibility","category":"Accessibility","group":"Screen-reader-only. Atomic contract: a partial override","description":"Extends sr-only — also reveals the element when it receives keyboard focus. Typical use: skip links and visually-hidden focus targets.","optional":false,"layer":"slashed.accessibility"},{"name":"theme-transition","selector":".theme-transition","kind":"theme","category":"Theme example","group":"5. SMOOTH THEME-TRANSITION HELPER","description":"Internal helper class used by the sf-theme-transition macro. Applies per-property transitions to registered color tokens during light/dark mode switches.","optional":true,"layer":"slashed.themes"}]`),jh={classes:Fh},Gh={generatedBy:"configurator/scripts/sync-api.mjs",source:"docs/api-index.json",tokensHash:"29dec6de6d0c",bundles:["full","optimal","optimal-components","optimal-utilities"],counts:{tokens:685,byTier:{PUBLIC:629,"PUBLIC-ADVANCED":55,INTERNAL:1},byCategory:{"Layout tokens":54,"Core tokens":602,"Macro tokens":23,"Component tokens":6}}},Hh=JSON.parse(`[{"name":"--sf-alternate-gap","tier":"PUBLIC","role":"consumption","namespace":"alternate","category":"Layout tokens","group":"Alternate (zigzag)","description":"Gap tokens for the alternating content/media (zigzag) layout.","note":"Gap between items in the alternating zigzag layout.","value":"var(--sf-content-gap)","aliasOf":"--sf-content-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-alternate-inner-gap","tier":"PUBLIC","role":"consumption","namespace":"alternate","category":"Layout tokens","group":"Alternate (zigzag)","description":"Gap tokens for the alternating content/media (zigzag) layout.","note":"Gap between content and media within each zigzag item.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-blink","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Blinking visibility loop. Use for cursor indicators or critical attention cues. Respect prefers-reduced-motion.","value":"sf-blink calc(1s * var(--sf-motion-scale)) steps(1, end) infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-color-pulse","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Pulsing color loop. Use for live-status badges (recording, live). Respect prefers-reduced-motion.","value":"sf-color-pulse var(--sf-duration-slow) var(--sf-ease-in-out) infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-delay-1","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Shortest stagger delay. Apply to the first element in a sequentially animated group.","value":"calc(75ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-delay-2","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Second stagger delay step.","value":"calc(150ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-delay-3","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Third stagger delay step.","value":"calc(225ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-delay-4","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Fourth stagger delay step.","value":"calc(300ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-delay-5","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Longest stagger delay. Apply to the last element in a sequentially animated group.","value":"calc(375ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-fade-in","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Fade-in entrance animation shorthand. Use directly as animation property value.","value":"sf-fade-in var(--sf-duration-normal) var(--sf-ease-out) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-fade-out","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Fade-out exit animation shorthand.","value":"sf-fade-out var(--sf-duration-normal) var(--sf-ease-in) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-float","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Gentle floating / levitating loop. Use for hero illustrations or floating UI elements. Decorative — disable for prefers-reduced-motion.","value":"sf-float calc(3s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-ping","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Expanding ping / ripple loop. Use for notification badges and live-indicator dots.","value":"sf-ping var(--sf-duration-slow) var(--sf-ease-out) infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-scale-down","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Scale-down exit animation. Pairs with --sf-animation-scale-up for enter/leave transitions.","value":"sf-scale-down var(--sf-duration-normal) var(--sf-ease-in) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-scale-up","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Scale-up entrance animation. Use for modals, popovers, and tooltips appearing.","value":"sf-scale-up var(--sf-duration-normal) var(--sf-ease-overshoot) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-shimmer","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Shimmer / skeleton-loading sweep. Apply on placeholder elements while content loads.","value":"sf-shimmer calc(1.5s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-slide-in-down","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Slide-in from above. Use for dropdown menus and top-attached sheets.","value":"sf-slide-in-down var(--sf-duration-normal) var(--sf-ease-out) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-slide-in-left","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Slide-in from the left. Use for left-side drawers and navigation panels.","value":"sf-slide-in-left var(--sf-duration-normal) var(--sf-ease-out) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-slide-in-right","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Slide-in from the right. Use for right-side drawers and detail panels.","value":"sf-slide-in-right var(--sf-duration-normal) var(--sf-ease-out) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-slide-in-up","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Slide-in from below. Use for bottom sheets, toasts, and floating action buttons.","value":"sf-slide-in-up var(--sf-duration-normal) var(--sf-ease-out) both","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-animation-spin","tier":"PUBLIC","role":"consumption","namespace":"animation","category":"Core tokens","group":"Animation presets","description":"Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.","note":"Continuous rotation loop. Use for loading spinners and progress indicators.","value":"sf-spin var(--sf-duration-slower) linear infinite","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-aspect","tier":"PUBLIC","role":"knob","namespace":"aspect","category":"Macro tokens","group":"Aspect ratio","description":"Aspect-ratio value for the .aspect-ratio macro.","note":"Aspect ratio value for the .aspect-ratio macro.","value":"16 / 9","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bento-cols-default","tier":"PUBLIC","role":"knob","namespace":"bento","category":"Layout tokens","group":"Bento grid","description":"Configuration tokens for the bento-grid layout primitive.","note":"Default column count for the bento grid.","value":"4","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bento-gap","tier":"PUBLIC","role":"consumption","namespace":"bento","category":"Layout tokens","group":"Bento grid","description":"Configuration tokens for the bento-grid layout primitive.","note":"Gap between bento grid cells.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bento-row-compact","tier":"PUBLIC","role":"knob","namespace":"bento","category":"Layout tokens","group":"Bento grid","description":"Configuration tokens for the bento-grid layout primitive.","note":"Row height for compact-variant bento items.","value":"6rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bento-row-default","tier":"PUBLIC","role":"knob","namespace":"bento","category":"Layout tokens","group":"Bento grid","description":"Configuration tokens for the bento-grid layout primitive.","note":"Default row height for standard bento grid cells.","value":"10rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bento-row-tall","tier":"PUBLIC","role":"knob","namespace":"bento","category":"Layout tokens","group":"Bento grid","description":"Configuration tokens for the bento-grid layout primitive.","note":"Tall row height for visually prominent or hero bento cells.","value":"16rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bg-fit","tier":"PUBLIC","role":"knob","namespace":"bg","category":"Layout tokens","group":"Background layer (.sf-bg)","description":"object-fit applied to .sf-bg when used as a bare media element, and to .sf-bg > img / video / picture children. Defaults to cover.","note":"object-fit applied to .sf-bg when used as a bare media element, and to .sf-bg > img / video / picture children. Defaults to cover.","value":"cover","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bg-inset","tier":"PUBLIC","role":"knob","namespace":"bg","category":"Layout tokens","group":"Background layer (.sf-bg)","description":"Inset from every edge of the parent. A single length applied uniformly; the layer size is derived from it so a non-zero inset still fills correctly.","note":"Inset from every edge of the parent. A single length applied uniformly; the layer size is derived from it so a non-zero inset still fills correctly.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bg-position","tier":"PUBLIC","role":"knob","namespace":"bg","category":"Layout tokens","group":"Background layer (.sf-bg)","description":"object-position controlling where the media is anchored within the layer. Defaults to center (50% 50%).","note":"object-position controlling where the media is anchored within the layer. Defaults to center (50% 50%).","value":"50% 50%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bg-radius","tier":"PUBLIC","role":"knob","namespace":"bg","category":"Layout tokens","group":"Background layer (.sf-bg)","description":"border-radius applied to the .sf-bg layer and its img/video/picture children. Defaults to 0; set to match the parent's radius when clipping is needed.","note":"border-radius applied to the .sf-bg layer and its img/video/picture children. Defaults to 0; set to match the parent's radius when clipping is needed.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-bg-z","tier":"PUBLIC","role":"knob","namespace":"bg","category":"Layout tokens","group":"Background layer (.sf-bg)","description":"z-index of the background layer. Defaults to -2 so it sits behind sibling content but above the parent's own background.","note":"z-index of the background layer. Defaults to -2 so it sits behind sibling content but above the parent's own background.","value":"-2","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-blur","tier":"PUBLIC","role":"knob","namespace":"blur","category":"Core tokens","group":"Blur & opacity","description":"Backdrop-filter blur scale and background-opacity tokens.","note":"Backdrop-filter blur amount for frosted-glass surfaces (navbars, overlays, dialogs). Default 12px. Pair with a semi-transparent background.","value":"12px","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-color","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Text color for body copy. Alias of --sf-color-text. Override here to deviate body text from the global text color.","value":"var(--sf-color-text)","aliasOf":"--sf-color-text","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-em-style","tier":"PUBLIC","role":"knob","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"font-style for  inside body text (italic by default). Override to suppress italics if your typeface has no italic variant.","value":"italic","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-font-family","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font family for body text. Alias of --sf-font-body.","value":"var(--sf-font-body)","aliasOf":"--sf-font-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-font-size","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Base font size for body paragraphs. Alias of --sf-text-m.","value":"var(--sf-text-m)","aliasOf":"--sf-text-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-font-weight","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for body text. Alias of --sf-font-weight-body.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-line-height","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for body paragraphs. Alias of --sf-leading-normal.","value":"var(--sf-leading-normal)","aliasOf":"--sf-leading-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-strong-weight","tier":"PUBLIC","role":"consumption","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for  inside body text. Override to choose a specific weight instead of inheriting bold.","value":"var(--sf-font-weight-strong)","aliasOf":"--sf-font-weight-strong","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-body-text-wrap","tier":"PUBLIC","role":"knob","namespace":"body","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"text-wrap mode for body paragraphs. 'pretty' prevents orphaned last words; 'balance' equalises line lengths.","value":"pretty","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border shorthands","description":"Ready-to-use border shorthand values (width + style + color) for the three most common border weights.","note":"Default border shorthand (width + solid + color). Apply directly to border property.","value":"var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-scale","tier":"PUBLIC","role":"knob","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"Global border-width multiplier. Set to 0 for borderless UI; 0.5 for hairline-only; 2 to double all border widths across the system.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-strong","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border shorthands","description":"Ready-to-use border shorthand values (width + style + color) for the three most common border weights.","note":"Strong-emphasis border shorthand.","value":"var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-style","tier":"PUBLIC","role":"knob","namespace":"border","category":"Core tokens","group":"Border style","description":"Global border-style default (solid, dashed, etc.).","note":"Global border-style default applied across all border tokens.","value":"solid","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-subtle","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border shorthands","description":"Ready-to-use border shorthand values (width + style + color) for the three most common border weights.","note":"Low-contrast subtle border shorthand.","value":"var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-width-1","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"Standard 1px border width.","value":"calc(1px * var(--sf-border-scale, 1))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-width-2","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"Medium 2px border width. Common for focus outlines.","value":"calc(2px * var(--sf-border-scale, 1))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-width-3","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"Thick 3px border width.","value":"calc(3px * var(--sf-border-scale, 1))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-width-4","tier":"PUBLIC","role":"consumption","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"Extra-thick 4px border width for decorative borders.","value":"calc(4px * var(--sf-border-scale, 1))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-border-width-hairline","tier":"PUBLIC","role":"knob","namespace":"border","category":"Core tokens","group":"Border widths","description":"Raw border-width values. Use the shorthands above unless you need to override just the width.","note":"1px border width (hairline).","value":"0.5px","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-box-border-color","tier":"PUBLIC","role":"consumption","namespace":"box","category":"Layout tokens","group":"Box","description":"Border, background, and padding tokens for the box layout primitive.","note":"Border color for the box layout primitive.","value":"var(--sf-color-border)","aliasOf":"--sf-color-border","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-box-border-width","tier":"PUBLIC","role":"knob","namespace":"box","category":"Layout tokens","group":"Box","description":"Border, background, and padding tokens for the box layout primitive.","note":"Border width for the box layout primitive.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-box-padding","tier":"PUBLIC","role":"consumption","namespace":"box","category":"Layout tokens","group":"Box","description":"Border, background, and padding tokens for the box layout primitive.","note":"Inner padding for the box layout primitive.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-breakout-width","tier":"PUBLIC","role":"consumption","namespace":"breakout","category":"Layout tokens","group":"Content grid (breakout pattern)","description":"Breakout width and content width for the content-grid pattern (full-bleed breakouts inside a constrained column).","note":"Width of full-bleed breakout elements inside a content grid.","value":"var(--sf-container-wide)","aliasOf":"--sf-container-wide","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-btn-padding-block","tier":"PUBLIC","role":"consumption","namespace":"btn","category":"Component tokens","group":"BUTTON TOKENS","description":"Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.","note":"","value":"var(--sf-space-xs)","aliasOf":"--sf-space-xs","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-btn-padding-inline","tier":"PUBLIC","role":"consumption","namespace":"btn","category":"Component tokens","group":"BUTTON TOKENS","description":"Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.","note":"","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-btn-radius","tier":"PUBLIC","role":"consumption","namespace":"btn","category":"Component tokens","group":"BUTTON TOKENS","description":"Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.","note":"","value":"var(--sf-radius-m)","aliasOf":"--sf-radius-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-caret-color","tier":"PUBLIC","role":"consumption","namespace":"caret","category":"Core tokens","group":"Focus / form colors","description":"Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.","note":"Cursor caret color inside text inputs and contenteditable elements.","value":"var(--sf-color-action)","aliasOf":"--sf-color-action","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-center-gutter","tier":"PUBLIC","role":"consumption","namespace":"center","category":"Layout tokens","group":"Center","description":"Max-width and gutter for the center layout primitive.","note":"Minimum side gutter for the center layout.","value":"var(--sf-gutter)","aliasOf":"--sf-gutter","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-center-max","tier":"PUBLIC","role":"consumption","namespace":"center","category":"Layout tokens","group":"Center","description":"Max-width and gutter for the center layout primitive.","note":"Maximum width for the center layout.","value":"var(--sf-container-default)","aliasOf":"--sf-container-default","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-cluster-align","tier":"PUBLIC","role":"knob","namespace":"cluster","category":"Layout tokens","group":"Cluster","description":"Configuration tokens for the cluster layout (inline wrapped items).","note":"Vertical alignment of cluster items (align-items value).","value":"center","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-cluster-gap","tier":"PUBLIC","role":"consumption","namespace":"cluster","category":"Layout tokens","group":"Cluster","description":"Configuration tokens for the cluster layout (inline wrapped items).","note":"Gap between wrapped inline items in the cluster layout.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-cluster-justify","tier":"PUBLIC","role":"knob","namespace":"cluster","category":"Layout tokens","group":"Cluster","description":"Configuration tokens for the cluster layout (inline wrapped items).","note":"Horizontal justification of the cluster (justify-content value).","value":"flex-start","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-code-font-size","tier":"PUBLIC","role":"knob","namespace":"code","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for inline  and 
. Usually slightly smaller than body text so monospace doesn't feel oversized.","value":"0.875em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Primary interactive color. Applied to filled buttons, active indicators, and brand accent surfaces.","value":"light-dark(var(--sf-color-action-source-light), var(--sf-color-action-source-dark, oklch(from var(--sf-color-action-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Action color at pressed/active brightness.","value":"var(--sf-color-action-xdark)","aliasOf":"--sf-color-action-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Action color at hover brightness.","value":"var(--sf-color-action-darker)","aliasOf":"--sf-color-action-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Very light action shade. Hover fills on white surfaces, badge backgrounds.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-100), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Light action shade. Subtle fills and outlined badge backgrounds.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-200), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Light-mid action shade. Borders on light backgrounds, low-emphasis fills.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-300), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Mid-light action shade. Disabled state fills, decorative accents.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-400), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Lightest action tint. Background fill for subtle action-tinted surfaces.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-50), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Mid action shade — the 'pure' hue. Accessible on both light and dark backgrounds.","value":"var(--sf-color-action)","aliasOf":"--sf-color-action","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Mid-dark action shade. Text on light surfaces, icon fills.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Dark action shade. Strong text and icon fills on light backgrounds.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Very dark action shade. High-contrast text on white.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Near-black action shade. Extreme contrast on white surfaces.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Darkest action tint. Near-black for dark-theme surface accents.","value":"color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"10% opacity action tint. Subtle hover or selected-row background.","value":"oklch(from var(--sf-color-action) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"30% opacity action tint.","value":"oklch(from var(--sf-color-action) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"5% opacity action tint. Barely-there hover highlight.","value":"oklch(from var(--sf-color-action) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"50% opacity action tint. Mid-transparency badge or overlay.","value":"oklch(from var(--sf-color-action) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"80% opacity action tint.","value":"oklch(from var(--sf-color-action) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-darker","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Deep action shade for high-contrast contexts.","value":"var(--sf-color-action-600)","aliasOf":"--sf-color-action-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Near-transparent action tint for ghost-button hover backgrounds.","value":"var(--sf-color-action-a5)","aliasOf":"--sf-color-action-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-lighter","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Light action shade for soft accents.","value":"var(--sf-color-action-400)","aliasOf":"--sf-color-action-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Medium action fill — outlined button hover backgrounds.","value":"var(--sf-color-action-a30)","aliasOf":"--sf-color-action-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without  registration the browser cannot interpolate and transitions snap at 50%.","value":"oklch(0.70 0.198 235)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes.","note":"OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes.","value":"oklch(0.50 0.22 235)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Lightest action tint — selected rows, active nav, chips.","value":"var(--sf-color-action-a10)","aliasOf":"--sf-color-action-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-superdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Near-black action shade for maximum contrast on light surfaces.","value":"var(--sf-color-action-950)","aliasOf":"--sf-color-action-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-superlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Near-white action shade for maximum contrast on dark surfaces.","value":"var(--sf-color-action-50)","aliasOf":"--sf-color-action-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-xdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Extra-dark action shade.","value":"var(--sf-color-action-800)","aliasOf":"--sf-color-action-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-action-xlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"action","description":"Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.","note":"Extra-light action shade.","value":"var(--sf-color-action-200)","aliasOf":"--sf-color-action-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Mode-adaptive base surface color. Drives the page canvas and the surface elevation family; not an interactive/brand role.","value":"light-dark(var(--sf-color-base-source-light), var(--sf-color-base-source-dark, oklch(from var(--sf-color-base-source-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Pressed/active surface derived from --sf-color-base for subtle background interactions.","value":"oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Hover-state surface derived from --sf-color-base for subtle background interactions.","value":"oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.04 + var(--sf-is-dark) * 0.08), 0.99) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Very light base-surface level.","value":"oklch(from var(--sf-color-base) 0.94 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Light base-surface level.","value":"oklch(from var(--sf-color-base) 0.88 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Light-mid base-surface level.","value":"oklch(from var(--sf-color-base) 0.78 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Mid-light base-surface level.","value":"oklch(from var(--sf-color-base) 0.65 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Lightest base-surface level.","value":"oklch(from var(--sf-color-base) 0.97 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Mid base-surface level.","value":"oklch(from var(--sf-color-base) 0.50 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Mid-dark base-surface level.","value":"oklch(from var(--sf-color-base) 0.37 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Dark base-surface level.","value":"oklch(from var(--sf-color-base) 0.27 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Very dark base-surface level.","value":"oklch(from var(--sf-color-base) 0.17 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Near-black base-surface level.","value":"oklch(from var(--sf-color-base) 0.11 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Darkest base-surface level.","value":"oklch(from var(--sf-color-base) 0.06 c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"10% opacity base-surface tint.","value":"oklch(from var(--sf-color-base) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"30% opacity base-surface tint.","value":"oklch(from var(--sf-color-base) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"5% opacity base-surface tint.","value":"oklch(from var(--sf-color-base) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"50% opacity base-surface tint.","value":"oklch(from var(--sf-color-base) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"80% opacity base-surface tint.","value":"oklch(from var(--sf-color-base) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Near-transparent base-surface tint for ghost backgrounds.","value":"var(--sf-color-base-a5)","aliasOf":"--sf-color-base-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Medium base-surface fill for muted containers or overlays.","value":"var(--sf-color-base-a30)","aliasOf":"--sf-color-base-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-base. Keep near-black for dark-mode surfaces and elevation offsets.","value":"oklch(0.22 0.003 250)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH source color for the light-mode base surface. Keep near-white so --sf-color-bg, --sf-color-surface, and raised/inset levels have room to separate.","note":"OKLCH source color for the light-mode base surface. Keep near-white so --sf-color-bg, --sf-color-surface, and raised/inset levels have room to separate.","value":"oklch(0.96 0.006 250)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"base","description":"Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.","note":"Subtle base-surface tint for low-emphasis backgrounds.","value":"var(--sf-color-base-a10)","aliasOf":"--sf-color-base-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Surfaces","description":"Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.","note":"Base page / component background. The canvas all other surfaces layer on top of.","value":"oklch(from var(--sf-color-base) calc(l + 0.02) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background tint for pressed/active interactive elements.","value":"oklch(from var(--sf-color-neutral) l c h / 0.12)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg--disabled","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background for disabled interactive elements.","value":"var(--sf-color-inset)","aliasOf":"--sf-color-inset","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg--focus","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background tint for focused interactive elements.","value":"oklch(from var(--sf-color-action) l c h / 0.06)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background tint for hovered interactive elements (rows, list items, etc.).","value":"oklch(from var(--sf-color-neutral) l c h / 0.08)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-bg--selected","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background for selected items (checked rows, active nav links).","value":"oklch(from var(--sf-color-action) l c h / 0.1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-black","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Selection & backdrop","description":"Absolute reference colors and overlay tints for selections, marks, and backdrops.","note":"Absolute black reference value.","value":"oklch(0% 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Borders","description":"Semantic border colors for dividers, component edges, and focus indicators.","note":"Default border for dividers and component edges.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border--disabled","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Border alpha tokens","description":"Semi-transparent border variants for overlays and glass-morphism effects.","note":"Semi-transparent border for disabled element edges.","value":"oklch(from var(--sf-color-border--subtle) l 0 h / 0.5)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border--focus","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Borders","description":"Semantic border colors for dividers, component edges, and focus indicators.","note":"Focus indicator border, used alongside --sf-focus-ring-color.","value":"var(--sf-color-action)","aliasOf":"--sf-color-action","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border--strong","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Borders","description":"Semantic border colors for dividers, component edges, and focus indicators.","note":"Stronger border for visually prominent edges and active outlines.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.1), 0.85) 0.02 h), oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border--subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Borders","description":"Semantic border colors for dividers, component edges, and focus indicators.","note":"Low-contrast border for subtle separation without strong visual weight.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.75, calc(l + 0.4), 0.97) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-border--translucent","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Border alpha tokens","description":"Semi-transparent border variants for overlays and glass-morphism effects.","note":"Translucent border for glass-morphism and frosted surfaces.","value":"oklch(from var(--sf-color-neutral) l c h / 0.15)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-code-bg","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Interactive states","description":"Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.","note":"Background for inline  elements. Usually a subtle tint of the inset surface.","value":"var(--sf-color-inset)","aliasOf":"--sf-color-inset","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-code-text","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Text color for inline code and monospace preformatted text.","value":"oklch(from var(--sf-color-code-bg) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Destructive / danger state color. Used for delete actions, error alerts, and critical warnings.","value":"light-dark(var(--sf-color-danger-source-light), var(--sf-color-danger-source-dark, oklch(from var(--sf-color-danger-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Medium danger fill for icon backgrounds and badge fills.","value":"oklch(from var(--sf-color-danger) l c h / 0.3)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-danger.","value":"oklch(0.71 0.198 12)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"STATUS COLORS (-source-light source tokens)","description":"OKLCH lightness source for the danger status color (covers destructive actions and form validation errors).","note":"OKLCH lightness source for the danger status color (covers destructive actions and form validation errors).","value":"oklch(0.48 0.22 12)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger-strong","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"High-contrast danger color for alert body text and icons.","value":"light-dark( oklch(from var(--sf-color-danger-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-danger-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Light danger tint for error row backgrounds and alert container fills.","value":"oklch(from var(--sf-color-danger) l c h / 0.1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-dim","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Selection & backdrop","description":"Absolute reference colors and overlay tints for selections, marks, and backdrops.","note":"Backdrop overlay color for modals, drawers, and lightboxes.","value":"oklch(0 0 0 / 0.5)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-heading","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Heading text color. Slightly stronger contrast than body text for visual hierarchy.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Informational color for neutral tips, hints, and non-urgent notices.","value":"light-dark(var(--sf-color-info-source-light), var(--sf-color-info-source-dark, oklch(from var(--sf-color-info-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Medium info fill for info icons and hint chips.","value":"oklch(from var(--sf-color-info) l c h / 0.3)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-info.","value":"oklch(0.71 0.162 235)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"STATUS COLORS (-source-light source tokens)","description":"OKLCH lightness source for the info status color.","note":"OKLCH lightness source for the info status color.","value":"oklch(0.48 0.18 235)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info-strong","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"High-contrast info color for hint body text.","value":"light-dark( oklch(from var(--sf-color-info-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-info-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Light info tint for informational note backgrounds.","value":"oklch(from var(--sf-color-info) l c h / 0.1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-inset","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Surfaces","description":"Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.","note":"Slightly inset surface for nested areas — inputs, code blocks, sidebar panels.","value":"oklch(from var(--sf-color-base) calc(l - 0.02) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-inverse","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Surfaces","description":"Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.","note":"Inverted (dark-on-light / light-on-dark) surface for high-contrast banners or tooltips.","value":"oklch(from var(--sf-color-base) calc(1 - l) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Default hyperlink color.","value":"light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c h), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Link color when actively pressed.","value":"light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.21, 0.34), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.15, 0.74), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link--disabled","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Disabled link color (low contrast, no interaction).","value":"var(--sf-color-text--disabled)","aliasOf":"--sf-color-text--disabled","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Link color on hover.","value":"light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.15, 0.40), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.10, 0.68), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link--underline","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Link alpha token","description":"Semi-transparent underline color token used to tint the link underline independently from the link text color.","note":"Color of the link underline decoration. Defaults to a semi-transparent variant of the link color.","value":"oklch(from var(--sf-color-action) l c h / 0.3)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-link--visited","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Visited link color.","value":"light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c calc(h + 60)), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c calc(h + 60)) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-mark-bg","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Selection & mark","description":"Background and text colors for browser text selections and  highlights. Adapts automatically in dark mode.","note":"Background color for highlighted  elements.","value":"oklch(from var(--sf-color-warning) l c h / 0.25)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-mark-text","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Selection & backdrop","description":"Absolute reference colors and overlay tints for selections, marks, and backdrops.","note":"Text color inside highlighted  elements.","value":"inherit","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Neutral interactive color for low-emphasis actions and tertiary buttons.","value":"light-dark(var(--sf-color-neutral-source-light), var(--sf-color-neutral-source-dark, oklch(from var(--sf-color-neutral-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Neutral color at pressed/active brightness.","value":"var(--sf-color-neutral-xdark)","aliasOf":"--sf-color-neutral-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Neutral color at hover brightness.","value":"var(--sf-color-neutral-darker)","aliasOf":"--sf-color-neutral-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Very light neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-100), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Light neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-200), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Light-mid neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-300), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Mid-light neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-400), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Lightest neutral tint.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-50), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Mid neutral shade — the 'pure' hue.","value":"var(--sf-color-neutral)","aliasOf":"--sf-color-neutral","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Mid-dark neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Dark neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Very dark neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Near-black neutral shade.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Darkest neutral tint.","value":"color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"10% opacity neutral tint.","value":"oklch(from var(--sf-color-neutral) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"30% opacity neutral tint.","value":"oklch(from var(--sf-color-neutral) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"5% opacity neutral tint.","value":"oklch(from var(--sf-color-neutral) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"50% opacity neutral tint.","value":"oklch(from var(--sf-color-neutral) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"80% opacity neutral tint.","value":"oklch(from var(--sf-color-neutral) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-darker","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Deep neutral shade for high-contrast contexts.","value":"var(--sf-color-neutral-600)","aliasOf":"--sf-color-neutral-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Near-transparent neutral tint for ghost-button hover backgrounds.","value":"var(--sf-color-neutral-a5)","aliasOf":"--sf-color-neutral-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-lighter","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Light neutral shade.","value":"var(--sf-color-neutral-400)","aliasOf":"--sf-color-neutral-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Muted neutral fill for low-emphasis contexts.","value":"var(--sf-color-neutral-a30)","aliasOf":"--sf-color-neutral-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-neutral.","value":"oklch(0.69 0.0225 260)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH lightness source for the neutral color.","note":"OKLCH lightness source for the neutral color.","value":"oklch(0.52 0.025 260)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Lightest neutral semantic tint.","value":"var(--sf-color-neutral-a10)","aliasOf":"--sf-color-neutral-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-superdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Near-black neutral shade.","value":"var(--sf-color-neutral-950)","aliasOf":"--sf-color-neutral-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-superlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Near-white neutral shade.","value":"var(--sf-color-neutral-50)","aliasOf":"--sf-color-neutral-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-xdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Extra-dark neutral shade.","value":"var(--sf-color-neutral-800)","aliasOf":"--sf-color-neutral-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-neutral-xlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"neutral","description":"Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.","note":"Extra-light neutral shade.","value":"var(--sf-color-neutral-200)","aliasOf":"--sf-color-neutral-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-overlay","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Surfaces","description":"Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.","note":"Overlay surface for floating panels, sheets, and modals.","value":"oklch(from var(--sf-color-base) l c h / 0.9)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Primary brand palette color. Independent from --sf-color-action by default; override either source token to couple or separate brand and action roles.","value":"light-dark(var(--sf-color-primary-source-light), var(--sf-color-primary-source-dark, oklch(from var(--sf-color-primary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Primary color at pressed/active brightness.","value":"var(--sf-color-primary-xdark)","aliasOf":"--sf-color-primary-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Primary color at hover brightness.","value":"var(--sf-color-primary-darker)","aliasOf":"--sf-color-primary-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Very light primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-100), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Light primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-200), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Light-mid primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-300), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Mid-light primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-400), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Lightest primary tint.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-50), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Mid primary shade — the 'pure' hue.","value":"var(--sf-color-primary)","aliasOf":"--sf-color-primary","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Mid-dark primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Dark primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Very dark primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Near-black primary shade.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Darkest primary tint.","value":"color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"10% opacity primary tint.","value":"oklch(from var(--sf-color-primary) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"30% opacity primary tint.","value":"oklch(from var(--sf-color-primary) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"5% opacity primary tint.","value":"oklch(from var(--sf-color-primary) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"50% opacity primary tint.","value":"oklch(from var(--sf-color-primary) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"80% opacity primary tint.","value":"oklch(from var(--sf-color-primary) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-darker","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Deep primary shade.","value":"var(--sf-color-primary-600)","aliasOf":"--sf-color-primary-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Near-transparent primary tint for ghost-button hover backgrounds.","value":"var(--sf-color-primary-a5)","aliasOf":"--sf-color-primary-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-lighter","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Light primary shade.","value":"var(--sf-color-primary-400)","aliasOf":"--sf-color-primary-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Muted primary fill.","value":"var(--sf-color-primary-a30)","aliasOf":"--sf-color-primary-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-primary.","value":"oklch(0.715 0.243 264)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH lightness source for the primary color.","note":"OKLCH lightness source for the primary color.","value":"oklch(0.47 0.27 264)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Lightest primary semantic tint.","value":"var(--sf-color-primary-a10)","aliasOf":"--sf-color-primary-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-superdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Near-black primary shade.","value":"var(--sf-color-primary-950)","aliasOf":"--sf-color-primary-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-superlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Near-white primary shade.","value":"var(--sf-color-primary-50)","aliasOf":"--sf-color-primary-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-xdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Extra-dark primary shade.","value":"var(--sf-color-primary-800)","aliasOf":"--sf-color-primary-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-primary-xlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"primary","description":"Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.","note":"Extra-light primary shade.","value":"var(--sf-color-primary-200)","aliasOf":"--sf-color-primary-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-raised","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Surfaces","description":"Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.","note":"Elevated card surface that floats above the page background.","value":"oklch(from var(--sf-color-base) calc(l + 0.04) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-scheme","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Color scheme","description":"Preferred color-scheme hint sent to the browser (light / dark / normal).","note":"Preferred color scheme hint (light / dark / normal). Sent to the browser to influence UA chrome styling.","value":"light dark","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Raw secondary palette token for the secondary brand color.","value":"light-dark(var(--sf-color-secondary-source-light), var(--sf-color-secondary-source-dark, oklch(from var(--sf-color-secondary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Secondary color at pressed/active brightness.","value":"var(--sf-color-secondary-xdark)","aliasOf":"--sf-color-secondary-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Secondary color at hover brightness.","value":"var(--sf-color-secondary-darker)","aliasOf":"--sf-color-secondary-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Very light secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-100), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Light secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-200), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Light-mid secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-300), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Mid-light secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-400), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Lightest secondary tint.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-50), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Mid secondary shade — the 'pure' hue.","value":"var(--sf-color-secondary)","aliasOf":"--sf-color-secondary","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Mid-dark secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Dark secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Very dark secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Near-black secondary shade.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Darkest secondary tint.","value":"color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"10% opacity secondary tint.","value":"oklch(from var(--sf-color-secondary) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"30% opacity secondary tint.","value":"oklch(from var(--sf-color-secondary) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"5% opacity secondary tint.","value":"oklch(from var(--sf-color-secondary) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"50% opacity secondary tint.","value":"oklch(from var(--sf-color-secondary) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"80% opacity secondary tint.","value":"oklch(from var(--sf-color-secondary) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-darker","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Deep secondary shade.","value":"var(--sf-color-secondary-600)","aliasOf":"--sf-color-secondary-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Near-transparent secondary tint for ghost-button hover backgrounds.","value":"var(--sf-color-secondary-a5)","aliasOf":"--sf-color-secondary-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-lighter","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Light secondary shade.","value":"var(--sf-color-secondary-400)","aliasOf":"--sf-color-secondary-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Muted secondary fill.","value":"var(--sf-color-secondary-a30)","aliasOf":"--sf-color-secondary-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-secondary.","value":"oklch(0.84 0.036 264)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH lightness source for the secondary color.","note":"OKLCH lightness source for the secondary color.","value":"oklch(0.22 0.04 264)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Lightest secondary semantic tint.","value":"var(--sf-color-secondary-a10)","aliasOf":"--sf-color-secondary-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-superdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Near-black secondary shade.","value":"var(--sf-color-secondary-950)","aliasOf":"--sf-color-secondary-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-superlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Near-white secondary shade.","value":"var(--sf-color-secondary-50)","aliasOf":"--sf-color-secondary-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-xdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Extra-dark secondary shade.","value":"var(--sf-color-secondary-800)","aliasOf":"--sf-color-secondary-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-secondary-xlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"secondary","description":"Semantic secondary-color scale derived from --sf-color-secondary.","note":"Extra-light secondary shade.","value":"var(--sf-color-secondary-200)","aliasOf":"--sf-color-secondary-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-selection-bg","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Selection","description":"Text-selection background color.","note":"Background color applied to browser text selections.","value":"light-dark( oklch(from var(--sf-color-action-source-light) l c h / 0.28), oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-selection-text","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Selection & backdrop","description":"Absolute reference colors and overlay tints for selections, marks, and backdrops.","note":"Text color inside browser text selections.","value":"inherit","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Positive / success color for confirmation messages and completed-state indicators.","value":"light-dark(var(--sf-color-success-source-light), var(--sf-color-success-source-dark, oklch(from var(--sf-color-success-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Medium success fill for success icons and status chips.","value":"oklch(from var(--sf-color-success) l c h / 0.3)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-success.","value":"oklch(0.70 0.144 145)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"STATUS COLORS (-source-light source tokens)","description":"OKLCH lightness source for the success status color.","note":"OKLCH lightness source for the success status color.","value":"oklch(0.50 0.16 145)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success-strong","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"High-contrast success color for confirmation message text.","value":"light-dark( oklch(from var(--sf-color-success-source-light) calc(l - 0.15) c h), oklch(from var(--sf-color-success) clamp(0.70, calc(l + 0.15), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-success-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Light success tint for confirmation backgrounds.","value":"oklch(from var(--sf-color-success) l c h / 0.12)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-surface","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Resolved color tokens","description":"High-level semantic color aliases. Each resolves to the matching palette source token and adapts automatically between light and dark mode. Start here when applying your brand palette.","note":"Default component surface color. Alias of --sf-color-base; use --sf-color-raised for an elevated card/background level.","value":"var(--sf-color-base)","aliasOf":"--sf-color-base","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Raw tertiary palette token for the third brand color.","value":"light-dark(var(--sf-color-tertiary-source-light), var(--sf-color-tertiary-source-dark, oklch(from var(--sf-color-tertiary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary--active","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Tertiary color at pressed/active brightness.","value":"var(--sf-color-tertiary-xdark)","aliasOf":"--sf-color-tertiary-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary--hover","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Tertiary color at hover brightness.","value":"var(--sf-color-tertiary-darker)","aliasOf":"--sf-color-tertiary-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-100","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Very light tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-100), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-200","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Light tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-200), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-300","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Light-mid tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-300), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-400","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Mid-light tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-400), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Lightest tertiary tint.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-50), var(--sf-color-surface))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-500","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Mid tertiary shade — the 'pure' hue.","value":"var(--sf-color-tertiary)","aliasOf":"--sf-color-tertiary","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-600","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Mid-dark tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-700","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Dark tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-800","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Very dark tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-900","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Near-black tertiary shade.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-950","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Darkest tertiary tint.","value":"color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-a10","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"10% opacity tertiary tint.","value":"oklch(from var(--sf-color-tertiary) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-a30","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"30% opacity tertiary tint.","value":"oklch(from var(--sf-color-tertiary) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-a5","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"5% opacity tertiary tint.","value":"oklch(from var(--sf-color-tertiary) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-a50","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"50% opacity tertiary tint.","value":"oklch(from var(--sf-color-tertiary) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-a80","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"80% opacity tertiary tint.","value":"oklch(from var(--sf-color-tertiary) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-darker","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Deep tertiary shade.","value":"var(--sf-color-tertiary-600)","aliasOf":"--sf-color-tertiary-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-ghost","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Near-transparent tertiary tint for ghost-button hover backgrounds.","value":"var(--sf-color-tertiary-a5)","aliasOf":"--sf-color-tertiary-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-lighter","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Light tertiary shade.","value":"var(--sf-color-tertiary-400)","aliasOf":"--sf-color-tertiary-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Muted tertiary fill.","value":"var(--sf-color-tertiary-a30)","aliasOf":"--sf-color-tertiary-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-tertiary.","value":"oklch(0.74 0.198 295)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"BRAND COLORS (-source-light source tokens, animatable)","description":"OKLCH lightness source for the tertiary color.","note":"OKLCH lightness source for the tertiary color.","value":"oklch(0.42 0.22 295)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Lightest tertiary semantic tint.","value":"var(--sf-color-tertiary-a10)","aliasOf":"--sf-color-tertiary-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-superdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Near-black tertiary shade.","value":"var(--sf-color-tertiary-950)","aliasOf":"--sf-color-tertiary-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-superlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Near-white tertiary shade.","value":"var(--sf-color-tertiary-50)","aliasOf":"--sf-color-tertiary-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-xdark","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Extra-dark tertiary shade.","value":"var(--sf-color-tertiary-800)","aliasOf":"--sf-color-tertiary-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-tertiary-xlight","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"tertiary","description":"Semantic tertiary-color scale derived from --sf-color-tertiary.","note":"Extra-light tertiary shade.","value":"var(--sf-color-tertiary-200)","aliasOf":"--sf-color-tertiary-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Primary text color. Contrasts against --sf-color-bg for body copy.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--disabled","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Text color for disabled UI elements. Intentionally low contrast.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.25), 0.82) c h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2), 0.55) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--inverse","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Text color for use on dark/inverted backgrounds.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.85, calc(l + 0.4), 0.98) c h), oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4), 0.35) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Muted text for metadata, timestamps, and low-priority annotations.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.35, calc(l - var(--sf-contrast-bias)), 0.62) c h), oklch(from var(--sf-color-neutral) clamp(0.48, calc(l + var(--sf-contrast-bias)), 0.74) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-action","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground color for text on action-colored backgrounds.","value":"oklch(from var(--sf-color-action) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-base","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on base-colored backgrounds.","value":"var(--sf-color-text)","aliasOf":"--sf-color-text","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-danger","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on danger-colored backgrounds.","value":"oklch(from var(--sf-color-danger) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-info","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on info-colored backgrounds.","value":"oklch(from var(--sf-color-info) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-inverse","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on inverted (dark-on-light / light-on-dark) backgrounds.","value":"oklch(from var(--sf-color-inverse) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-neutral","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text placed on neutral-colored backgrounds.","value":"oklch(from var(--sf-color-neutral) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-primary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text placed on primary-colored backgrounds.","value":"oklch(from var(--sf-color-primary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-secondary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text placed on secondary-colored backgrounds.","value":"oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-success","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on success-colored backgrounds.","value":"oklch(from var(--sf-color-success) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-tertiary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text placed on tertiary-colored backgrounds.","value":"oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--on-warning","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text-on-color","description":"Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.","note":"Accessible foreground for text on warning-colored backgrounds.","value":"oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--placeholder","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"Placeholder text color for inputs and textareas.","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-text--secondary","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Text","description":"Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.","note":"De-emphasised secondary text (captions, labels, supporting copy).","value":"light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Warning / caution color for non-critical alerts and degraded-state indicators.","value":"light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning-muted","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Medium warning fill for icons and caution chips.","value":"oklch(from var(--sf-color-warning) l c h / 0.3)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning-source-dark","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered  dark counterpart of --sf-color-warning.","value":"oklch(0.65 0.153 80)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning-source-light","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"STATUS COLORS (-source-light source tokens)","description":"OKLCH lightness source for the warning status color.","note":"OKLCH lightness source for the warning status color.","value":"oklch(0.75 0.17 80)","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning-strong","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"High-contrast warning color for caution text.","value":"light-dark( oklch(from var(--sf-color-warning-source-light) calc(l - 0.25) c h), oklch(from var(--sf-color-warning) clamp(0.70, calc(l + 0.05), 1) c h) )","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-warning-subtle","tier":"PUBLIC","role":"consumption","namespace":"color","category":"Core tokens","group":"Status triplets","description":"Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.","note":"Light warning tint for warning notification backgrounds.","value":"oklch(from var(--sf-color-warning) l c h / 0.12)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-white","tier":"PUBLIC","role":"knob","namespace":"color","category":"Core tokens","group":"Selection & backdrop","description":"Absolute reference colors and overlay tints for selections, marks, and backdrops.","note":"Absolute white reference value.","value":"oklch(100% 0 0)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-component-pad","tier":"PUBLIC","role":"consumption","namespace":"component","category":"Core tokens","group":"Output token @property registrations","description":"Standard inner padding for interactive components (buttons, form inputs, chips).","note":"Standard inner padding for interactive components (buttons, form inputs, chips).","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-container-default","tier":"PUBLIC","role":"knob","namespace":"container","category":"Core tokens","group":"Containers","description":"Max-width container tokens for page-level layout.","note":"Default content container max-width (~1200px).","value":"75rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-container-full","tier":"PUBLIC","role":"knob","namespace":"container","category":"Core tokens","group":"Containers","description":"Max-width container tokens for page-level layout.","note":"Full-width container — removes the max-width constraint.","value":"100%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-container-narrow","tier":"PUBLIC","role":"knob","namespace":"container","category":"Core tokens","group":"Containers","description":"Max-width container tokens for page-level layout.","note":"Narrow content max-width — ideal for article body and blog posts (~65ch).","value":"38rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-container-prose","tier":"PUBLIC","role":"knob","namespace":"container","category":"Core tokens","group":"Containers","description":"Max-width container tokens for page-level layout.","note":"Prose max-width — optimised for readability (~75ch).","value":"65ch","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-container-wide","tier":"PUBLIC","role":"knob","namespace":"container","category":"Core tokens","group":"Containers","description":"Max-width container tokens for page-level layout.","note":"Wide container for marketing / dashboard layouts (~1440px).","value":"90rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-content-gap","tier":"PUBLIC","role":"consumption","namespace":"content","category":"Core tokens","group":"Output token @property registrations","description":"Tight gap within related content (stack, flow, prose). Override globally to retune all tight primitives at once.","note":"Tight gap within related content (stack, flow, prose). Override globally to retune all tight primitives at once.","value":"var(--sf-space-s)","aliasOf":"--sf-space-s","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-content-intrinsic-size","tier":"PUBLIC","role":"knob","namespace":"content","category":"Macro tokens","group":"Content visibility","description":"intrinsic-size hint for content-visibility: auto (lazy off-screen rendering).","note":"Intrinsic-size hint for content-visibility: auto (prevents layout shift on first reveal).","value":"500px","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-content-width","tier":"PUBLIC","role":"consumption","namespace":"content","category":"Layout tokens","group":"Content grid (breakout pattern)","description":"Breakout width and content width for the content-grid pattern (full-bleed breakouts inside a constrained column).","note":"Max-width of the main content column in a content grid.","value":"var(--sf-container-default)","aliasOf":"--sf-container-default","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-contrast-bias","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"contrast","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Global text-contrast nudge. Positive values push derived reading-text colors toward the extremes (darker in light mode, lighter in dark). Default 0 (neutral).","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-contrast-threshold","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"contrast","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"OKLCH lightness crossover for auto-contrast on colored surfaces. Colors with L above this get dark text; below get light text. Default 0.6.","value":"0.6","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-cover-min-height","tier":"PUBLIC","role":"knob","namespace":"cover","category":"Layout tokens","group":"Cover","description":"Min-height and padding for the full-viewport cover layout.","note":"Minimum height of the cover layout (typically 100svh).","value":"100dvh","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-cover-padding","tier":"PUBLIC","role":"consumption","namespace":"cover","category":"Layout tokens","group":"Cover","description":"Min-height and padding for the full-viewport cover layout.","note":"Inner padding for the cover layout.","value":"var(--sf-section-pad)","aliasOf":"--sf-section-pad","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-current-font-weight","tier":"PUBLIC","role":"consumption","namespace":"current","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Inherits the current font-weight from context. Useful as a reset.","value":"var(--sf-font-weight-bold)","aliasOf":"--sf-font-weight-bold","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-display-l-line-height","tier":"PUBLIC","role":"knob","namespace":"display","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Line height for large display text (--sf-text-display-l). Very tight to avoid excessive gaps at oversized sizes.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-display-m-line-height","tier":"PUBLIC","role":"knob","namespace":"display","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Line height for medium display text (--sf-text-display-m).","value":"1.05","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-display-s-line-height","tier":"PUBLIC","role":"consumption","namespace":"display","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Line height for small display text (--sf-text-display-s).","value":"var(--sf-leading-tight)","aliasOf":"--sf-leading-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-divider-color","tier":"PUBLIC","role":"consumption","namespace":"divider","category":"Core tokens","group":"Divider","description":"Horizontal/vertical rule (divider) properties.","note":"Color of horizontal/vertical divider rules.","value":"var(--sf-color-border)","aliasOf":"--sf-color-border","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-divider-gap","tier":"PUBLIC","role":"consumption","namespace":"divider","category":"Core tokens","group":"Divider","description":"Horizontal/vertical rule (divider) properties.","note":"Spacing (margin) around divider elements.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-divider-style","tier":"PUBLIC","role":"knob","namespace":"divider","category":"Core tokens","group":"Divider","description":"Horizontal/vertical rule (divider) properties.","note":"Border style of dividers.","value":"solid","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-divider-width","tier":"PUBLIC","role":"consumption","namespace":"divider","category":"Core tokens","group":"Divider","description":"Horizontal/vertical rule (divider) properties.","note":"Stroke width of horizontal and vertical divider rules.","value":"var(--sf-border-width-1)","aliasOf":"--sf-border-width-1","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-drop-shadow-l","tier":"PUBLIC","role":"consumption","namespace":"drop","category":"Core tokens","group":"Output token @property registrations","description":"Large CSS filter: drop-shadow for prominent illustrated or cut-out elements.","note":"Large CSS filter: drop-shadow for prominent illustrated or cut-out elements.","value":"drop-shadow(0 8px 16px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7)))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-drop-shadow-m","tier":"PUBLIC","role":"consumption","namespace":"drop","category":"Core tokens","group":"Output token @property registrations","description":"Medium CSS filter: drop-shadow for elevated icons and card thumbnails.","note":"Medium CSS filter: drop-shadow for elevated icons and card thumbnails.","value":"drop-shadow(0 4px 6px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7)))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-drop-shadow-s","tier":"PUBLIC","role":"consumption","namespace":"drop","category":"Core tokens","group":"Output token @property registrations","description":"Small CSS filter: drop-shadow. Use filter (not box-shadow) for elements with transparent areas — SVGs, PNGs, cutout images.","note":"Small CSS filter: drop-shadow. Use filter (not box-shadow) for elements with transparent areas — SVGs, PNGs, cutout images.","value":"drop-shadow(0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7)))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-fast","tier":"PUBLIC","role":"consumption","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Fast duration (~100ms). Hover transitions, tooltip appear.","value":"calc(150ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-instant","tier":"PUBLIC","role":"consumption","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Near-instant duration (~50ms). Micro-interactions and cursor-follow effects.","value":"calc(100ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-none","tier":"PUBLIC","role":"knob","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"0ms duration. Disables transitions (respects prefers-reduced-motion).","value":"0ms","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-normal","tier":"PUBLIC","role":"consumption","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Normal duration (~200ms). Default for most transitions.","value":"calc(250ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-slow","tier":"PUBLIC","role":"consumption","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Slow duration (~350ms). Emphasis transitions, drawers.","value":"calc(400ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-duration-slower","tier":"PUBLIC","role":"consumption","namespace":"duration","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Extra-slow duration (~600ms). Page-level enter/exit transitions.","value":"calc(600ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-bounce","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Bounce easing. Playful overshooting effect.","value":"linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-elastic","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Elastic easing. Spring-like overshooting effect.","value":"linear(0, 0.3, 1.2, 0.9, 1.05, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-in","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Accelerating easing. Use for elements leaving the viewport.","value":"cubic-bezier(0.5, 0, 0.75, 0.25)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-in-out","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Symmetric easing. Use for elements that move within the viewport.","value":"cubic-bezier(0.4, 0, 0.2, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-linear","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Linear easing. Use for progress indicators and spinner rotations.","value":"linear","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-out","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Decelerating easing. Use for elements entering the viewport.","value":"cubic-bezier(0.25, 0, 0.15, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-overshoot","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Subtle overshoot easing. Softer spring effect.","value":"linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ease-spring","tier":"PUBLIC","role":"knob","namespace":"ease","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Spring easing. Natural physics-based motion.","value":"linear(0, 0.5, 1.1, 0.95, 1.02, 1)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-gap","tier":"PUBLIC","role":"consumption","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Gap between equal columns.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-min-col","tier":"PUBLIC","role":"knob","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Minimum column width for the default auto-fill equal-columns layout. Columns fill the row until this width is reached, then wrap to the next line.","value":"16rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-min-col-2","tier":"PUBLIC","role":"knob","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Minimum column width for the 2-column equal preset.","value":"28rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-min-col-3","tier":"PUBLIC","role":"knob","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Minimum column width for the 3-column equal preset.","value":"15rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-min-col-4","tier":"PUBLIC","role":"knob","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Minimum column width for the 4-column equal preset.","value":"16rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-equal-min-col-6","tier":"PUBLIC","role":"knob","namespace":"equal","category":"Layout tokens","group":"Equal columns (intrinsically responsive RAM)","description":"Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.","note":"Minimum column width for the 6-column equal preset.","value":"10rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-field-block","tier":"PUBLIC","role":"consumption","namespace":"field","category":"Core tokens","group":"Output token @property registrations","description":"Vertical (block) padding inside form fields.","note":"Vertical (block) padding inside form fields.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-field-padding-block","tier":"PUBLIC","role":"consumption","namespace":"field","category":"Component tokens","group":"FIELD TOKENS","description":"Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.","note":"Vertical (block) inner padding for form field inputs.","value":"var(--sf-space-xs)","aliasOf":"--sf-space-xs","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-field-padding-inline","tier":"PUBLIC","role":"consumption","namespace":"field","category":"Component tokens","group":"FIELD TOKENS","description":"Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.","note":"Horizontal (inline) inner padding for form field inputs.","value":"var(--sf-space-s)","aliasOf":"--sf-space-s","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-field-radius","tier":"PUBLIC","role":"consumption","namespace":"field","category":"Component tokens","group":"FIELD TOKENS","description":"Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.","note":"Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once.","value":"var(--sf-radius-m)","aliasOf":"--sf-radius-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":true,"layer":"slashed.tokens","bundles":["full","optimal-components"]},{"name":"--sf-field-required-marker","tier":"PUBLIC","role":"knob","namespace":"field","category":"Core tokens","group":"Semantic gap tokens","description":"CSS content value for required-field markers (e.g. \\" *\\"). Used by pseudo-elements in the .required utility pattern.","note":"CSS content value for required-field markers (e.g. \\" *\\"). Used by pseudo-elements in the .required utility pattern.","value":"\\" *\\"","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-flow-space","tier":"PUBLIC","role":"consumption","namespace":"flow","category":"Macro tokens","group":"Flow","description":"Vertical rhythm gap between flow children (margin-block-start on all but the first child).","note":"Margin-block-start applied to all flow children except the first.","value":"var(--sf-content-gap)","aliasOf":"--sf-content-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-fluid-max-vw","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"fluid","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Maximum viewport width (in rem) at which the fluid scale clamps to its largest values. Default 90rem (~1440px). Part of the fluid scale engine.","value":"90","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-fluid-min-vw","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"fluid","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Minimum viewport width (in rem) at which the fluid scale clamps to its smallest values. Default 22.5rem (~360px). Part of the fluid scale engine.","value":"22.5","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-focus-ring-color","tier":"PUBLIC","role":"consumption","namespace":"focus","category":"Core tokens","group":"Focus / form colors","description":"Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.","note":"Color of the keyboard focus ring. Ensure sufficient contrast against all background surfaces.","value":"var(--sf-color-action)","aliasOf":"--sf-color-action","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-focus-ring-offset","tier":"PUBLIC","role":"knob","namespace":"focus","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Gap between the element edge and the focus ring.","value":"2px","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-focus-ring-shadow","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"focus","category":"Core tokens","group":"Focus / form colors","description":"Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.","note":"Computed box-shadow value for the focus ring — two-layer technique: offset shadow in bg color, then ring shadow in focus-ring color. Tune via --sf-focus-ring-width and --sf-focus-ring-color instead of overriding this directly.","value":"0 0 0 var(--sf-focus-ring-offset) var(--sf-color-bg, var(--sf-color-base-source-light, #fff)), 0 0 0 calc(var(--sf-focus-ring-offset) + var(--sf-focus-ring-width)) var(--sf-focus-ring-color)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-focus-ring-style","tier":"PUBLIC","role":"knob","namespace":"focus","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Border style of the focus ring (solid, dashed, dotted).","value":"solid","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-focus-ring-width","tier":"PUBLIC","role":"knob","namespace":"focus","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Stroke width of the focus ring outline.","value":"2px","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-body","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Font family stack for body text. Override to set your primary typeface.","value":"system-ui, -apple-system, sans-serif","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-display","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Font family for display/marketing text. Override for large headline typefaces.","value":"var(--sf-font-heading)","aliasOf":"--sf-font-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-features","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"OpenType feature-settings string for body text (e.g. 'ss01', 'cv11'). Default 'normal'. Override on :root or a subtree to enable ligatures, alternate glyphs, etc.","value":"normal","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-geometric","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Geometric sans-serif slot — circular letterforms for brand alternates.","value":"\\"Avenir\\", \\"Montserrat\\", \\"Corbel\\", \\"URW Gothic\\", source-sans-pro, sans-serif","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-heading","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Font family for headings. Defaults to display if not overridden separately.","value":"var(--sf-font-body)","aliasOf":"--sf-font-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-humanist","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Humanist sans-serif slot — warm, readable alternate typeface.","value":"\\"Seravek\\", \\"Gill Sans Nova\\", \\"Ubuntu\\", \\"Calibri\\", \\"DejaVu Sans\\", source-sans-pro, sans-serif","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-mono","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Monospace font family for code, pre, and kbd elements.","value":"ui-monospace, monospace","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-numeric","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"font-variant-numeric shorthand (e.g. tabular-nums) for aligned numeric data.","value":"tabular-nums","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-slab","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Slab-serif slot for editorial or display headings.","value":"\\"Rockwell\\", \\"Rockwell Nova\\", \\"Roboto Slab\\", \\"DejaVu Serif\\", \\"Sitka Small\\", serif","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-variation","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"font","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"Variable-font axis settings for body text (e.g. \\"wght\\" 450). Default 'normal'. Override on :root or a subtree to activate variable-font axes.","value":"normal","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-body","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Font weight for body text (typically 400 / normal).","value":"var(--sf-font-weight-normal)","aliasOf":"--sf-font-weight-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-bold","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Strong emphasis weight (700).","value":"700","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-display","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Font weight for display-size text.","value":"var(--sf-font-weight-bold)","aliasOf":"--sf-font-weight-bold","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-heading","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Font weight for headings (typically 600–700).","value":"var(--sf-font-weight-semibold)","aliasOf":"--sf-font-weight-semibold","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-interactive","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Font weight for interactive role text — buttons, badges, and navigation labels. Defaults to semibold.","value":"var(--sf-font-weight-semibold)","aliasOf":"--sf-font-weight-semibold","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-light","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Light weight (300). Use sparingly — check contrast at small sizes.","value":"300","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-medium","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Medium weight (500). Subtle emphasis without full bold.","value":"500","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-normal","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Normal / regular weight (400).","value":"400","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-semibold","tier":"PUBLIC","role":"knob","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Semibold weight (600). Common for labels and subheadings.","value":"600","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-font-weight-strong","tier":"PUBLIC","role":"consumption","namespace":"font","category":"Core tokens","group":"Font weights","description":"Numeric font-weight scale plus named aliases for common roles.","note":"Font weight for strong/emphasis inline role. Defaults to bold.","value":"var(--sf-font-weight-bold)","aliasOf":"--sf-font-weight-bold","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-frame-ratio","tier":"PUBLIC","role":"knob","namespace":"frame","category":"Layout tokens","group":"Frame","description":"Aspect ratio for the frame layout primitive (media container).","note":"Aspect ratio for the frame (media container) layout.","value":"16 / 9","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gap","tier":"PUBLIC","role":"consumption","namespace":"gap","category":"Core tokens","group":"Output token @property registrations","description":"Default gap between components (the loose rhythm). Layout primitives like cluster/grid/sidebar default to it. Override globally to retune them all at once, or set a primitive token (e.g. --sf-cluster-gap) for one element.","note":"Default gap between components (the loose rhythm). Layout primitives like cluster/grid/sidebar default to it. Override globally to retune them all at once, or set a primitive token (e.g. --sf-cluster-gap) for one element.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-brand","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Multi-stop brand gradient spanning primary and secondary palette colors. Use for hero backgrounds and brand accents.","value":"linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-fade--b","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Fade-to-bottom gradient (transparent → surface). Use to fade content into a background below (infinite scroll fade, content cutoff).","value":"linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-fade--l","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Fade-to-left gradient. Use to indicate left-side scrollable overflow.","value":"linear-gradient(in oklch to left, transparent, var(--sf-color-bg))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-fade--r","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Fade-to-right gradient. Use to indicate right-side scrollable overflow.","value":"linear-gradient(in oklch to right, transparent, var(--sf-color-bg))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-fade--t","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Fade-to-top gradient (transparent → surface). Use to fade content into a background above.","value":"linear-gradient(in oklch to top, transparent, var(--sf-color-bg))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-primary","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Gradient using primary palette colors (light to saturated).","value":"linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-secondary","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Gradient using secondary palette colors.","value":"linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-surface","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Subtle surface-color gradient for depth layering and glass effects.","value":"linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gradient-tertiary","tier":"PUBLIC","role":"consumption","namespace":"gradient","category":"Core tokens","group":"Gradients","description":"Pre-built gradient shorthands for brand fills and directional fade effects.","note":"Gradient using tertiary palette colors.","value":"linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-gap","tier":"PUBLIC","role":"consumption","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Gap between auto-fill grid cells.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Minimum column width for the auto-fill grid.","value":"16rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-2xl","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Minimum column width at the 2× breakpoint.","value":"28rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-l","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Large minimum column width for the auto-fill grid.","value":"20rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-m","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Medium minimum column width for the auto-fill grid.","value":"16rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-s","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Small minimum column width for the auto-fill grid.","value":"13rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-xl","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Extra-large minimum column width for the auto-fill grid. Use for wide content cards.","value":"24rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-grid-min-xs","tier":"PUBLIC","role":"knob","namespace":"grid","category":"Layout tokens","group":"Grid (auto-fill, breakpoint-free)","description":"Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.","note":"Extra-small minimum column width for the auto-fill grid. Use for very compact tile layouts (icon grids).","value":"10rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-gutter","tier":"PUBLIC","role":"consumption","namespace":"gutter","category":"Core tokens","group":"Output token @property registrations","description":"Wide page/section-edge gutter (used by center/container). Override to set the page-edge breathing room across breakpoints.","note":"Wide page/section-edge gutter (used by center/container). Override to set the page-edge breathing room across breakpoints.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h1-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h1","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h1-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h1","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
. Typically slightly negative at large sizes.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h1-line-height","tier":"PUBLIC","role":"consumption","namespace":"h1","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
. Tighter than body to avoid excessive whitespace at large sizes.","value":"var(--sf-leading-tight)","aliasOf":"--sf-leading-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h1-max-width","tier":"PUBLIC","role":"knob","namespace":"h1","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none (unconstrained). Set to a ch value (e.g. 20ch) to prevent wide headings from spanning the full column on large screens.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h1-size","tier":"PUBLIC","role":"consumption","namespace":"h1","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-4xl)","aliasOf":"--sf-text-4xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h2-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h2","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h2-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h2","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h2-line-height","tier":"PUBLIC","role":"consumption","namespace":"h2","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
.","value":"var(--sf-leading-tight)","aliasOf":"--sf-leading-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h2-max-width","tier":"PUBLIC","role":"knob","namespace":"h2","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h2-size","tier":"PUBLIC","role":"consumption","namespace":"h2","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-3xl)","aliasOf":"--sf-text-3xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h3-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h3","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h3-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h3","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h3-line-height","tier":"PUBLIC","role":"consumption","namespace":"h3","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
.","value":"var(--sf-leading-snug)","aliasOf":"--sf-leading-snug","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h3-max-width","tier":"PUBLIC","role":"knob","namespace":"h3","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h3-size","tier":"PUBLIC","role":"consumption","namespace":"h3","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-2xl)","aliasOf":"--sf-text-2xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h4-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h4","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h4-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h4","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h4-line-height","tier":"PUBLIC","role":"consumption","namespace":"h4","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
.","value":"var(--sf-leading-snug)","aliasOf":"--sf-leading-snug","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h4-max-width","tier":"PUBLIC","role":"knob","namespace":"h4","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h4-size","tier":"PUBLIC","role":"consumption","namespace":"h4","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-xl)","aliasOf":"--sf-text-xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h5-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h5","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h5-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h5","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h5-line-height","tier":"PUBLIC","role":"consumption","namespace":"h5","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
.","value":"var(--sf-leading-normal)","aliasOf":"--sf-leading-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h5-max-width","tier":"PUBLIC","role":"knob","namespace":"h5","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h5-size","tier":"PUBLIC","role":"consumption","namespace":"h5","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-l)","aliasOf":"--sf-text-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h6-font-weight","tier":"PUBLIC","role":"consumption","namespace":"h6","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font weight for 
.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h6-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"h6","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Letter-spacing for 
.","value":"var(--sf-tracking-wide)","aliasOf":"--sf-tracking-wide","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h6-line-height","tier":"PUBLIC","role":"consumption","namespace":"h6","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Line height for 
.","value":"var(--sf-leading-normal)","aliasOf":"--sf-leading-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h6-max-width","tier":"PUBLIC","role":"knob","namespace":"h6","category":"Core tokens","group":"Heading line-length constraints","description":"Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.","note":"Max-inline-size cap for 
. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-h6-size","tier":"PUBLIC","role":"consumption","namespace":"h6","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font size for 
.","value":"var(--sf-text-m)","aliasOf":"--sf-text-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-header-height","tier":"PUBLIC","role":"consumption","namespace":"header","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Total height of the sticky page header. Used by --sf-sticky-offset to prevent content from hiding under it.","value":"clamp( var(--sf-header-height-mobile), calc((var(--sf-header-height-desktop) - var(--sf-header-height-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-header-height-mobile)), var(--sf-header-height-desktop))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-header-height-desktop","tier":"PUBLIC","role":"knob","namespace":"header","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Header height at desktop breakpoints.","value":"5rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-header-height-mobile","tier":"PUBLIC","role":"knob","namespace":"header","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Header height at mobile breakpoints.","value":"3.5rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-heading-color","tier":"PUBLIC","role":"consumption","namespace":"heading","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Text color for all headings (h1–h6). Alias of --sf-color-heading.","value":"var(--sf-color-heading)","aliasOf":"--sf-color-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-heading-font-family","tier":"PUBLIC","role":"consumption","namespace":"heading","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"Font family for all headings. Alias of --sf-font-heading.","value":"var(--sf-font-heading)","aliasOf":"--sf-font-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-heading-text-wrap","tier":"PUBLIC","role":"knob","namespace":"heading","category":"Core tokens","group":"TYPOGRAPHY ALIASES","description":"Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.","note":"text-wrap for headings. 'balance' prevents orphaned short last lines in multi-line headings.","value":"balance","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-2xl","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"2× large icon size (~40px+). Hero or onboarding icons.","value":"4em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-box-bg","tier":"PUBLIC","role":"consumption","namespace":"icon","category":"Layout tokens","group":"Icon (boxed variant)","description":"Background, border, and padding for boxed icon containers.","note":"Background color for boxed icon containers.","value":"var(--sf-color-inset)","aliasOf":"--sf-color-inset","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-box-border","tier":"PUBLIC","role":"consumption","namespace":"icon","category":"Layout tokens","group":"Icon (boxed variant)","description":"Background, border, and padding for boxed icon containers.","note":"Border for boxed icon containers.","value":"var(--sf-border-width-1) solid var(--sf-color-border)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-box-pad","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Layout tokens","group":"Icon (boxed variant)","description":"Background, border, and padding for boxed icon containers.","note":"Padding inside boxed icon containers.","value":"0.5em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-box-radius","tier":"PUBLIC","role":"consumption","namespace":"icon","category":"Layout tokens","group":"Icon (boxed variant)","description":"Background, border, and padding for boxed icon containers.","note":"Border radius for boxed icon containers.","value":"var(--sf-radius-s)","aliasOf":"--sf-radius-s","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-l","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"Large icon size (~24px). Standalone icon buttons.","value":"2em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-m","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"Medium icon size (~20px). Default for inline and button icons.","value":"1.5em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-s","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"Small icon size (~16px). Dense UI chrome.","value":"1em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-xl","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"Extra-large icon size (~32px). Feature icons.","value":"3em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-icon-xs","tier":"PUBLIC","role":"knob","namespace":"icon","category":"Core tokens","group":"Icon sizes","description":"Standard icon sizes tied to the type scale.","note":"Extra-small icon size (~12px). Inline indicators.","value":"0.875em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-imposter-margin","tier":"PUBLIC","role":"consumption","namespace":"imposter","category":"Layout tokens","group":"Imposter (centered absolute/fixed overlay)","description":"Margin for the imposter layout (centered fixed/absolute overlay).","note":"Margin between the imposter overlay and the viewport edges.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-is-active","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"is","category":"Core tokens","group":"INTERACTION STATE FLAGS","description":"Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.","note":"Integer state flag for the active state. Set to 1 (via JS or .is-active) to drive branching calc() expressions. 0 = default (inactive).","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-is-current","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"is","category":"Core tokens","group":"INTERACTION STATE FLAGS","description":"Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.","note":"Integer state flag for the current/selected state. Set to 1 (via .is-current) to drive branching calc() expressions. 0 = default.","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-is-dark","tier":"INTERNAL","role":"knob","namespace":"is","category":"Core tokens","group":"DARK SOURCE TOKENS (-dark, animatable)","description":"OKLCH dark source tokens for brand and status colors. Registered as typed  so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Mode flag — 0 in light mode, 1 in dark mode. Set automatically by [data-theme='dark'] and prefers-color-scheme. Drives dark-mode formula branches in calc().","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-is-open","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"is","category":"Core tokens","group":"INTERACTION STATE FLAGS","description":"Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.","note":"Integer state flag for the open/expanded state. Set to 1 (via .is-open) to drive branching calc() expressions. 0 = default (closed).","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-is-pressed","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"is","category":"Core tokens","group":"INTERACTION STATE FLAGS","description":"Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.","note":"Integer state flag for the pressed state. Set to 1 (via .is-pressed) to drive branching calc() expressions. 0 = default.","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-leading-normal","tier":"PUBLIC","role":"knob","namespace":"leading","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Normal line height (~1.5). Default for body text.","value":"1.5","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-leading-relaxed","tier":"PUBLIC","role":"knob","namespace":"leading","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Relaxed line height (~1.65). Long-form reading text.","value":"1.625","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-leading-snug","tier":"PUBLIC","role":"knob","namespace":"leading","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Snug line height (~1.35). Use for sub-headings.","value":"1.3","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-leading-taper","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"leading","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Progressive leading tightener: each step up the type scale subtracts step-index × taper from its per-size line-height token. Default 0 keeps the curated defaults.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-leading-tight","tier":"PUBLIC","role":"knob","namespace":"leading","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Tight line height (~1.2). Use for large display headings.","value":"1.1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-line-clamp","tier":"PUBLIC","role":"knob","namespace":"line","category":"Macro tokens","group":"Line clamp","description":"Number of lines before text truncates with an ellipsis.","note":"Number of visible lines before text is clipped with an ellipsis.","value":"3","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-link-external-marker","tier":"PUBLIC","role":"knob","namespace":"link","category":"Core tokens","group":"Semantic gap tokens","description":"CSS content value appended to external links (e.g. \\" ↗\\"). Used by the .external-link pseudo-element pattern.","note":"CSS content value appended to external links (e.g. \\" ↗\\"). Used by the .external-link pseudo-element pattern.","value":"\\" \\\\2197\\"","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-link-underline-offset","tier":"PUBLIC","role":"knob","namespace":"link","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Vertical offset of the link underline from the text baseline.","value":"0.15em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-link-underline-thickness","tier":"PUBLIC","role":"knob","namespace":"link","category":"Core tokens","group":"Links","description":"Colors and text-decoration properties for hyperlinks in every interactive state.","note":"Stroke width of the link underline.","value":"auto","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-lumlocker","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"lumlocker","category":"Core tokens","group":"LumLocker","description":"OKLCH lightness lock for the data-lumlocker attribute. Pins surface brightness to a fixed L value — useful for always-dark or always-light sections that must stay stable while the rest of the page switches color-scheme.","note":"OKLCH lightness lock value. When :root has [data-lumlocker], brand colors (primary, secondary, action, base) are remapped to this L so their contrast remains constant as hues shift.","value":"0.65","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-mask-scrim-end","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"mask","category":"Core tokens","group":"Mask scrim","description":"Edge-fade stop positions for the scroll-shadow mask effect on overflowing containers. Expressed as percentages or lengths; consumed by mask-image gradients.","note":"End stop for edge-fade mask gradients. Mirrors --sf-mask-scrim-start for the trailing edge of a scroll container.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-mask-scrim-start","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"mask","category":"Core tokens","group":"Mask scrim","description":"Edge-fade stop positions for the scroll-shadow mask effect on overflowing containers. Expressed as percentages or lengths; consumed by mask-image gradients.","note":"Start stop for edge-fade mask gradients on scroll reels / overflow containers. Use in mask-image: linear-gradient(..., transparent var(--sf-mask-scrim-start)) to fade content near the leading edge.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-motion-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"motion","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Global motion multiplier. All transition and animation durations multiply by this factor. Set to 0 to disable all motion; reduce below 1 for snappier feel.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-object-fit","tier":"PUBLIC","role":"knob","namespace":"object","category":"Core tokens","group":"Object fit / position","description":"Defaults for object-fit and object-position on replaced elements (img, video).","note":"Default object-fit value for replaced elements (img, video).","value":"cover","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-object-position","tier":"PUBLIC","role":"knob","namespace":"object","category":"Core tokens","group":"Object fit / position","description":"Defaults for object-fit and object-position on replaced elements (img, video).","note":"Default object-position for replaced elements.","value":"50% 50%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-opacity-disabled","tier":"PUBLIC","role":"knob","namespace":"opacity","category":"Core tokens","group":"Opacity","description":"Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements; --sf-state-pending-opacity dims elements in an async/loading state.","note":"Opacity for disabled UI elements (typically 0.4–0.5).","value":"0.45","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-opacity-muted","tier":"PUBLIC","role":"knob","namespace":"opacity","category":"Core tokens","group":"Blur & opacity","description":"Backdrop-filter blur scale and background-opacity tokens.","note":"General de-emphasis opacity for secondary content, ghost elements, or non-primary layers. Default 0.5.","value":"0.5","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-optical-sizing","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"optical","category":"Core tokens","group":"Font families","description":"Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.","note":"CSS font-optical-sizing value. 'auto' lets the browser optimize letterforms for the rendered size. Set 'none' to disable optical sizing.","value":"auto","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-100","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 100. Controls blend depth toward the surface. Default 8%.","note":"Color-mix percentage for palette step 100. Controls blend depth toward the surface. Default 8%.","value":"8%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-200","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 200. Controls blend depth toward the surface. Default 20%.","note":"Color-mix percentage for palette step 200. Controls blend depth toward the surface. Default 20%.","value":"20%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-300","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 300. Controls blend depth toward the surface. Default 40%.","note":"Color-mix percentage for palette step 300. Controls blend depth toward the surface. Default 40%.","value":"40%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-400","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 400 (near-mid tint). Controls blend depth. Default 65%.","note":"Color-mix percentage for palette step 400 (near-mid tint). Controls blend depth. Default 65%.","value":"65%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-50","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for the lightest palette step (50). Controls how far step 50 blends toward the surface. Default 4%.","note":"Color-mix percentage for the lightest palette step (50). Controls how far step 50 blends toward the surface. Default 4%.","value":"4%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-600","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 600 (near-mid shade). Controls blend depth toward the text color. Default 82%.","note":"Color-mix percentage for palette step 600 (near-mid shade). Controls blend depth toward the text color. Default 82%.","value":"82%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-700","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 700. Controls blend depth toward the text color. Default 62%.","note":"Color-mix percentage for palette step 700. Controls blend depth toward the text color. Default 62%.","value":"62%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-800","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 800 (dark shade). Controls blend depth toward text. Default 38%.","note":"Color-mix percentage for palette step 800 (dark shade). Controls blend depth toward text. Default 38%.","value":"38%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-900","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for palette step 900 (very dark shade). Controls blend depth toward text. Default 18%.","note":"Color-mix percentage for palette step 900 (very dark shade). Controls blend depth toward text. Default 18%.","value":"18%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-palette-mix-950","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"palette","category":"Core tokens","group":"Palette shade mix percentages","description":"Color-mix percentage for the darkest palette step (950). Controls how far step 950 blends toward the text color. Default 8%.","note":"Color-mix percentage for the darkest palette step (950). Controls how far step 950 blends toward the text color. Default 8%.","value":"8%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-print-base-size","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"print","category":"Core tokens","group":"Print","description":"Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.","note":"Base font size for @media print stylesheets. Default 11pt. Override on :root to adjust printed body text size.","value":"11pt","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-print-page-margin","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"print","category":"Core tokens","group":"Print","description":"Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.","note":"Page margin for printed output. Default 2cm. Maps to @page margin.","value":"2cm","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-print-page-size","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"print","category":"Core tokens","group":"Print","description":"Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.","note":"Target paper size for printing. Default 'a4'. Maps to @page size. Common values: a4, letter, legal.","value":"a4","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-block-margin","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Block margin between prose elements (h2, p, ul, etc.).","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-blockquote-border","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Left border style for blockquotes inside prose.","value":"var(--sf-border-width-2) solid var(--sf-color-border--subtle)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-blockquote-padding","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Inner padding for blockquotes inside prose.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-figcaption-size","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Font size for figure captions inside .prose. Typically smaller than body text.","value":"var(--sf-text-s)","aliasOf":"--sf-text-s","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-figure-margin","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Block margin around 
 elements inside .prose.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-heading-gap","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Space between a heading and the content that follows it inside .prose.","value":"var(--sf-space-s)","aliasOf":"--sf-space-s","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-hr-margin","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Block margin around 
 rules inside .prose.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-list-gap","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Gap between list items inside .prose.","value":"var(--sf-space-xs)","aliasOf":"--sf-space-xs","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-marker-color","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Color of list bullets and ordered-list numbers inside .prose.","value":"var(--sf-color-primary)","aliasOf":"--sf-color-primary","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-media-margin","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Block margin around images, video, and figures inside .prose.","value":"var(--sf-space-m)","aliasOf":"--sf-space-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-media-radius","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Border radius applied to images and media inside .prose.","value":"var(--sf-radius-m)","aliasOf":"--sf-radius-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-nested-list-gap","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Gap between items in nested lists inside .prose.","value":"var(--sf-space-2xs)","aliasOf":"--sf-space-2xs","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-paragraph","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Layout tokens","group":"Prose","description":"Max-width for the prose layout primitive (long-form reading column).","note":"Max width of prose paragraphs (layout token for the prose layout).","value":"var(--sf-content-gap)","aliasOf":"--sf-content-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-prose-table-pad","tier":"PUBLIC","role":"consumption","namespace":"prose","category":"Macro tokens","group":"Prose","description":"Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).","note":"Cell padding for tables inside .prose.","value":"var(--sf-space-xs)","aliasOf":"--sf-space-xs","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-2xl","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"2× large radius (~20px). Rounded card variants.","note":"2× large radius (~20px). Rounded card variants.","value":"calc(24px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-2xs","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Extra-extra-small radius (~1px). Minimal rounding for very tight UI elements.","note":"Extra-extra-small radius (~1px). Minimal rounding for very tight UI elements.","value":"calc(1px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-3xl","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"3× large radius (~24px). Large rounded surfaces.","note":"3× large radius (~24px). Large rounded surfaces.","value":"calc(32px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-4xl","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"4× large radius (~32px). Near-pill rounding.","note":"4× large radius (~32px). Near-pill rounding.","value":"calc(48px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-full","tier":"PUBLIC","role":"knob","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Full rounding (50%). For circular elements like avatars.","note":"Full rounding (50%). For circular elements like avatars.","value":"9999px","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-l","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Large radius (~12px). Modals, popovers, panels.","note":"Large radius (~12px). Modals, popovers, panels.","value":"calc(12px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-m","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Medium radius (~6–8px). Default — inputs, standard buttons, cards.","note":"Medium radius (~6–8px). Default — inputs, standard buttons, cards.","value":"calc(8px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-none","tier":"PUBLIC","role":"knob","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Zero border radius — square corners.","note":"Zero border radius — square corners.","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-outer","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Concentric corner helper: outer radius for a container that wraps content with inner radius of --sf-radius-m. Computed as --sf-radius-m + --sf-component-pad so corners align visually.","note":"Concentric corner helper: outer radius for a container that wraps content with inner radius of --sf-radius-m. Computed as --sf-radius-m + --sf-component-pad so corners align visually.","value":"calc(var(--sf-radius-m) + var(--sf-component-pad))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-pill","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Pill rounding (9999px). Tags, toggle pills, status badges.","note":"Pill rounding (9999px). Tags, toggle pills, status badges.","value":"var(--sf-radius-full)","aliasOf":"--sf-radius-full","registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-s","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Small radius (~4px). Badges, chips, small buttons.","note":"Small radius (~4px). Badges, chips, small buttons.","value":"calc(4px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"radius","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Global border-radius multiplier. Scales the entire radius ramp up (>1) or down (<1) from one knob. Set to 0 for sharp corners everywhere.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-xl","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Extra-large radius (~16px). Prominent cards and feature blocks.","note":"Extra-large radius (~16px). Prominent cards and feature blocks.","value":"calc(16px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-radius-xs","tier":"PUBLIC","role":"consumption","namespace":"radius","category":"Core tokens","group":"Output token @property registrations","description":"Hairline radius (~2px). Subtle rounding for tight components.","note":"Hairline radius (~2px). Subtle rounding for tight components.","value":"calc(2px * var(--sf-radius-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-3-2","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"3:2 aspect ratio. Common for landscape photography.","value":"3 / 2","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-4-3","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"4:3 aspect ratio. Classic screen ratio.","value":"4 / 3","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-cinema","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"2.39:1 cinematic widescreen aspect ratio.","value":"21 / 9","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-golden","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"1.618:1 golden ratio. Harmonious proportions.","value":"1.618 / 1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-portrait","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"2:3 portrait aspect ratio.","value":"3 / 4","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-square","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"1:1 square aspect ratio. Use for avatars, icon containers, and square thumbnails.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-ratio-video","tier":"PUBLIC","role":"knob","namespace":"ratio","category":"Core tokens","group":"Aspect ratios","description":"Named aspect-ratio values for images, video embeds, and card thumbnails.","note":"16:9 widescreen video aspect ratio. Use for video embeds and video-thumbnail containers.","value":"16 / 9","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-reel-gap","tier":"PUBLIC","role":"consumption","namespace":"reel","category":"Layout tokens","group":"Reel","description":"Configuration tokens for the reel layout (horizontal scroll container).","note":"Gap between items in the horizontal reel.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-reel-height","tier":"PUBLIC","role":"knob","namespace":"reel","category":"Layout tokens","group":"Reel","description":"Configuration tokens for the reel layout (horizontal scroll container).","note":"Fixed height of the reel container.","value":"auto","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-reel-item-width","tier":"PUBLIC","role":"knob","namespace":"reel","category":"Layout tokens","group":"Reel","description":"Configuration tokens for the reel layout (horizontal scroll container).","note":"Width of each item in the reel.","value":"max-content","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-safe-bottom","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"safe","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Device safe-area inset at the bottom edge (home indicator, gesture bar). Resolves to env(safe-area-inset-bottom, 0px). Use for fixed footers.","value":"env(safe-area-inset-bottom, 0px)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-safe-left","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"safe","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Device safe-area inset at the left edge. Resolves to env(safe-area-inset-left, 0px).","value":"env(safe-area-inset-left, 0px)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-safe-right","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"safe","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Device safe-area inset at the right edge (rounded corners, home indicator). Resolves to env(safe-area-inset-right, 0px).","value":"env(safe-area-inset-right, 0px)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-safe-top","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"safe","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Device safe-area inset at the top edge (notch, Dynamic Island). Resolves to env(safe-area-inset-top, 0px). Use for fixed headers on notched devices.","value":"env(safe-area-inset-top, 0px)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrim-color","tier":"PUBLIC","role":"knob","namespace":"scrim","category":"Macro tokens","group":"Scrim","description":"Gradient scrim configuration (direction, size, color) for overlaying images with readable text.","note":"Base color of the gradient scrim overlay.","value":"oklch(0 0 0 / 0.55)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrim-direction","tier":"PUBLIC","role":"knob","namespace":"scrim","category":"Macro tokens","group":"Scrim","description":"Gradient scrim configuration (direction, size, color) for overlaying images with readable text.","note":"Direction of the scrim gradient (to bottom, to top, etc.).","value":"to top","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrim-gradient","tier":"PUBLIC","role":"consumption","namespace":"scrim","category":"Macro tokens","group":"Scrim","description":"Gradient scrim configuration (direction, size, color) for overlaying images with readable text.","note":"Full gradient shorthand for the scrim. Override to customise the fade.","value":"linear-gradient(var(--sf-scrim-direction), var(--sf-scrim-color), transparent)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrim-text-shadow","tier":"PUBLIC","role":"knob","namespace":"scrim","category":"Macro tokens","group":"Scrim","description":"Gradient scrim configuration (direction, size, color) for overlaying images with readable text.","note":"Text-shadow layered over the scrim gradient to ensure legibility for text placed directly on image backgrounds.","value":"0 1px 3px oklch(0 0 0 / 0.6)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scroll-shadow-size","tier":"PUBLIC","role":"knob","namespace":"scroll","category":"Macro tokens","group":"Scroll shadow / overflow fade","description":"Size of the scroll-shadow fade effect on overflowing containers.","note":"Size of the scroll-shadow fade effect on overflowing containers.","value":"2rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scroll-timeline-range-end","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"scroll","category":"Core tokens","group":"Scroll-driven animation range","description":"animation-range start and end positions for scroll-driven entrance effects (animation-timeline: view()). Controls how far into the viewport an element must scroll before its entrance animation starts and ends.","note":"animation-range end value for scroll-driven entrance effects. Default 'cover 30%'. Override on an element to control when its entrance animation finishes.","value":"cover 30%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scroll-timeline-range-start","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"scroll","category":"Core tokens","group":"Scroll-driven animation range","description":"animation-range start and end positions for scroll-driven entrance effects (animation-timeline: view()). Controls how far into the viewport an element must scroll before its entrance animation starts and ends.","note":"animation-range start value for scroll-driven entrance effects. Default 'entry 0%'. Override on an element to control when its entrance animation begins.","value":"entry 0%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrollbar-thumb","tier":"PUBLIC","role":"consumption","namespace":"scrollbar","category":"Core tokens","group":"Scrollbar","description":"Custom scrollbar thumb and track colors.","note":"Color of the custom scrollbar thumb.","value":"var(--sf-color-neutral)","aliasOf":"--sf-color-neutral","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-scrollbar-track","tier":"PUBLIC","role":"knob","namespace":"scrollbar","category":"Core tokens","group":"Scrollbar","description":"Custom scrollbar thumb and track colors.","note":"Color of the custom scrollbar track.","value":"transparent","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Section padding","description":"Vertical padding for full-width page sections at each responsive tier.","note":"Default vertical padding for full-width page sections.","value":"var(--sf-section-pad--m)","aliasOf":"--sf-section-pad--m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--2xl","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"2× large section vertical padding for hero areas.","note":"2× large section vertical padding for hero areas.","value":"calc(var(--sf-space-4xl) * 2 * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--l","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"Large section vertical padding.","note":"Large section vertical padding.","value":"calc(var(--sf-space-4xl) * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--m","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"Medium section vertical padding.","note":"Medium section vertical padding.","value":"calc(var(--sf-space-3xl) * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--s","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"Small section vertical padding.","note":"Small section vertical padding.","value":"calc(var(--sf-space-2xl) * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--xl","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"Extra-large vertical section padding for hero and feature sections.","note":"Extra-large vertical section padding for hero and feature sections.","value":"calc(var(--sf-space-4xl) * 1.5 * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-pad--xs","tier":"PUBLIC","role":"consumption","namespace":"section","category":"Core tokens","group":"Output token @property registrations","description":"Extra-small vertical section padding for compact in-page modules.","note":"Extra-small vertical section padding for compact in-page modules.","value":"calc(var(--sf-space-xl) * var(--sf-section-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-section-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"section","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Global multiplier applied to every --sf-section-pad--* size — one dial re-rhythms all section padding (default 1).","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-2xl","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Largest shadow for hero cards, feature highlights, and marketing surfaces.","note":"Largest shadow for hero cards, feature highlights, and marketing surfaces.","value":"0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.6), 0.7)), 0 20px 60px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 4), 0.7)), 0 40px 100px -8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 5), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-color","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Shadow ramp (box-shadow, text-shadow, drop-shadow)","description":"Elevation box-shadow ramp from xs to 2xl plus inner, text-shadow, and drop-shadow presets. All opacity values scale with --sf-shadow-strength so dark-mode contrast boost is automatic.","note":"Near-black shadow tint derived from the neutral palette. Inherits the neutral's chroma and hue so colorless neutrals produce colorless shadows.","value":"oklch(from var(--sf-color-neutral) var(--sf-shadow-lightness) c h)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-glow","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Glow box-shadow shorthand for decorative glow effects.","note":"Glow box-shadow shorthand for decorative glow effects.","value":"0 0 15px 2px oklch(from var(--sf-shadow-glow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-glow-color","tier":"PUBLIC-ADVANCED","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Shadow glow color","description":"Tint color used by --sf-shadow-glow. Override to retint glows; opacity and dark-mode adaptation are handled automatically.","note":"Ambient glow tint used by --sf-shadow-glow. Override to retint all glow shadows; opacity and dark-mode boost are controlled by --sf-shadow-strength.","value":"var(--sf-color-primary)","aliasOf":"--sf-color-primary","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-inner","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Inset shadow for pressed states, inset inputs, and recessed surfaces.","note":"Inset shadow for pressed states, inset inputs, and recessed surfaces.","value":"inset 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-l","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Large shadow for drawers, sidebars, and prominent elevated surfaces.","note":"Large shadow for drawers, sidebars, and prominent elevated surfaces.","value":"0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 8px 24px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7)), 0 16px 48px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-lightness","tier":"PUBLIC","role":"knob","namespace":"shadow","category":"Core tokens","group":"Shadow strength","description":"Base opacity for the shadow ramp. --sf-shadow-lightness controls tonal density; --sf-shadow-strength is auto-boosted in dark mode so elevation reads on dark surfaces.","note":"OKLCH lightness component of the shadow color. Lower = denser-looking shadows. Tune this independently of --sf-shadow-strength to control tonal weight without affecting opacity.","value":"0.15","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-m","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Medium shadow for cards and content panels.","note":"Medium shadow for cards and content panels.","value":"0 1px 3px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-none","tier":"PUBLIC","role":"knob","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"No box-shadow (resets inherited shadows). Use to explicitly remove elevation.","note":"No box-shadow (resets inherited shadows). Use to explicitly remove elevation.","value":"none","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-s","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Small shadow for chips, tags, and inline elevated surfaces.","note":"Small shadow for chips, tags, and inline elevated surfaces.","value":"0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 2px 6px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, var(--sf-shadow-strength), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-strength","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"shadow","category":"Core tokens","group":"Shadow strength","description":"Base opacity for the shadow ramp. --sf-shadow-lightness controls tonal density; --sf-shadow-strength is auto-boosted in dark mode so elevation reads on dark surfaces.","note":"Base opacity for the entire shadow ramp. Auto-boosted in dark mode via --sf-is-dark. Override with calc() to preserve the adaptation: e.g. calc(0.12 + var(--sf-is-dark) * 0.17).","value":"calc(0.08 + var(--sf-is-dark) * 0.17)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-xl","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Extra-large shadow for modals, dialogs, and high-elevation sheets.","note":"Extra-large shadow for modals, dialogs, and high-elevation sheets.","value":"0 2px 8px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 12px 36px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3.5), 0.7)), 0 24px 72px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-shadow-xs","tier":"PUBLIC","role":"consumption","namespace":"shadow","category":"Core tokens","group":"Output token @property registrations","description":"Extra-small shadow for barely-elevated elements (focused inputs, small chips).","note":"Extra-small shadow for barely-elevated elements (focused inputs, small chips).","value":"0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sidebar-gap","tier":"PUBLIC","role":"consumption","namespace":"sidebar","category":"Layout tokens","group":"Sidebar","description":"Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).","note":"Gap between sidebar and main content column.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sidebar-min-width","tier":"PUBLIC","role":"knob","namespace":"sidebar","category":"Layout tokens","group":"Sidebar","description":"Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).","note":"Minimum sidebar width before the layout collapses to stacking.","value":"50%","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sidebar-width","tier":"PUBLIC","role":"knob","namespace":"sidebar","category":"Layout tokens","group":"Sidebar","description":"Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).","note":"Preferred width of the sidebar column.","value":"18rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-size-l","tier":"PUBLIC","role":"knob","namespace":"size","category":"Core tokens","group":"UI sizes","description":"Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.","note":"Large UI component height (~44px). Touch-friendly interactive elements.","value":"2.75rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-size-m","tier":"PUBLIC","role":"knob","namespace":"size","category":"Core tokens","group":"UI sizes","description":"Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.","note":"Medium UI component height (~36px). Default size for buttons and inputs.","value":"2.5rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-size-s","tier":"PUBLIC","role":"knob","namespace":"size","category":"Core tokens","group":"UI sizes","description":"Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.","note":"Small UI component height (~28px). Compact buttons and input variants.","value":"2rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-size-xl","tier":"PUBLIC","role":"knob","namespace":"size","category":"Core tokens","group":"UI sizes","description":"Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.","note":"Extra-large interactive component height (~52px). For oversized or prominently touch-friendly controls.","value":"3.5rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-size-xs","tier":"PUBLIC","role":"knob","namespace":"size","category":"Core tokens","group":"UI sizes","description":"Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.","note":"Extra-small interactive component height (~24px). For very compact inline elements and micro-controls.","value":"1.5rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-2xl","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"48px-equivalent spacing. Large section spacing.","note":"48px-equivalent spacing. Large section spacing.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-2xs","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"4px-equivalent spacing. Tight inline gaps, icon-to-text padding.","note":"4px-equivalent spacing. Tight inline gaps, icon-to-text padding.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-3xl","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"64px-equivalent spacing. Extra-large layout gaps.","note":"64px-equivalent spacing. Extra-large layout gaps.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-4xl","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"96px-equivalent spacing. Hero / page-level section padding.","note":"96px-equivalent spacing. Hero / page-level section padding.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-base-max","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"space","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Maximum base spacing unit (rem) at the widest viewport. Drives the top of the fluid spacing ramp. Part of the fluid scale engine.","value":"2","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-base-min","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"space","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Minimum base spacing unit (rem) at the narrowest viewport. Drives the bottom of the fluid spacing ramp. Part of the fluid scale engine.","value":"1","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-l","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"24px-equivalent spacing. Card padding, section dividers.","note":"24px-equivalent spacing. Card padding, section dividers.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-m","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"16px-equivalent spacing. Default unit, widely applicable.","note":"16px-equivalent spacing. Default unit, widely applicable.","value":"calc(clamp(calc(var(--sf-space-base-min) * 1rem), calc((var(--sf-space-base-max) - var(--sf-space-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * 1rem), calc(var(--sf-space-base-max) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-none","tier":"PUBLIC","role":"knob","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"Zero spacing. Explicit alias for clarity in utility classes.","note":"Zero spacing. Explicit alias for clarity in utility classes.","value":"0","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-px","tier":"PUBLIC","role":"knob","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"1px spacing. Hairline offset for fine adjustments.","note":"1px spacing. Hairline offset for fine adjustments.","value":"1px","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-ratio-max","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"space","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Modular spacing ratio at the widest viewport. Controls step-to-step growth in the spacing ramp. Default 1.333 (perfect fourth). Part of the fluid scale engine.","value":"1.333","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-ratio-min","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"space","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Modular spacing ratio at the narrowest viewport. Controls step-to-step growth in the spacing ramp. Default 1.25 (major third). Part of the fluid scale engine.","value":"1.25","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-s","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"12px-equivalent spacing. Form field inner padding, narrow gaps.","note":"12px-equivalent spacing. Form field inner padding, narrow gaps.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"space","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Global spacing multiplier. Scales the fluid spacing ramp. Increase above 1 for airier layouts; reduce below 1 for compact UIs.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-xl","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"32px-equivalent spacing. Feature row gaps, generous section padding.","note":"32px-equivalent spacing. Feature row gaps, generous section padding.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-space-xs","tier":"PUBLIC","role":"consumption","namespace":"space","category":"Core tokens","group":"Output token @property registrations","description":"8px-equivalent spacing. Compact list rows, tab padding.","note":"8px-equivalent spacing. Compact list rows, tab padding.","value":"calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale))","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-stack-gap","tier":"PUBLIC","role":"consumption","namespace":"stack","category":"Layout tokens","group":"Stack","description":"Gap for the stack layout primitive (vertically stacked blocks).","note":"Vertical gap between stacked block-level elements in the stack layout.","value":"var(--sf-content-gap)","aliasOf":"--sf-content-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-state-pending-opacity","tier":"PUBLIC","role":"knob","namespace":"state","category":"Core tokens","group":"Opacity","description":"Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements; --sf-state-pending-opacity dims elements in an async/loading state.","note":"Opacity for pending / loading state elements.","value":"0.7","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sticky-offset","tier":"PUBLIC","role":"consumption","namespace":"sticky","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"top offset for position: sticky elements, accounting for the header height.","value":"clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sticky-offset-desktop","tier":"PUBLIC","role":"consumption","namespace":"sticky","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Sticky offset at desktop breakpoints.","value":"var(--sf-header-height-desktop)","aliasOf":"--sf-header-height-desktop","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-sticky-offset-mobile","tier":"PUBLIC","role":"consumption","namespace":"sticky","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Sticky offset at mobile breakpoints.","value":"var(--sf-header-height-mobile)","aliasOf":"--sf-header-height-mobile","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-surface-color","tier":"PUBLIC","role":"consumption","namespace":"surface","category":"Macro tokens","group":"Surface color","description":"Input color for the generic .sf-surface macro. Set any color value; the macro derives the background, auto-contrast foreground, and contextual token set from it.","note":"Input for the generic .sf-surface macro. Set any color (including palette shades); the macro derives background, auto-contrast foreground, and the contextual token set from it.","value":"var(--sf-color-base)","aliasOf":"--sf-color-base","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-switcher-gap","tier":"PUBLIC","role":"consumption","namespace":"switcher","category":"Layout tokens","group":"Switcher","description":"Configuration tokens for the switcher layout (horizontal → vertical breakpoint).","note":"Gap between switcher columns / rows.","value":"var(--sf-gap)","aliasOf":"--sf-gap","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-switcher-threshold","tier":"PUBLIC","role":"knob","namespace":"switcher","category":"Layout tokens","group":"Switcher","description":"Configuration tokens for the switcher layout (horizontal → vertical breakpoint).","note":"Inline-size threshold below which the switcher flips from horizontal to vertical.","value":"30rem","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xl","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"2× large font size (~24px). Section headings.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xl-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for 2×-large text.","note":"Font weight for 2×-large text.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xl-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for 2×-large text.","note":"Letter-spacing for 2×-large text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xl-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for 2×-large text.","note":"Line height for 2×-large text.","value":"calc(var(--sf-leading-snug) - 6 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xl-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for 2×-large text.","note":"Optimal line length for 2×-large text.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xs","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Extra-extra-small font size (~11px). Fine print, badges.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xs-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for 2×-extra-small text. Override to deviate from the global weight at this size.","note":"Font weight for 2×-extra-small text. Override to deviate from the global weight at this size.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xs-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for 2×-extra-small text.","note":"Letter-spacing for 2×-extra-small text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xs-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for 2×-extra-small text.","note":"Line height for 2×-extra-small text.","value":"var(--sf-leading-relaxed)","aliasOf":"--sf-leading-relaxed","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-2xs-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length (max-width in ch) for 2×-extra-small text.","note":"Optimal line length (max-width in ch) for 2×-extra-small text.","value":"55ch","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-3xl","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"3× large font size (~30px). Major headings.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-3xl-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for 3×-large text.","note":"Font weight for 3×-large text.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-3xl-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for 3×-large text. Typically negative to tighten large headings.","note":"Letter-spacing for 3×-large text. Typically negative to tighten large headings.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-3xl-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for 3×-large text.","note":"Line height for 3×-large text.","value":"calc(var(--sf-leading-tight) - 7 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-3xl-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for 3×-large text.","note":"Optimal line length for 3×-large text.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-4xl","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"4× large font size (~36px). Display-level headings.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-4xl-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for 4×-large text.","note":"Font weight for 4×-large text.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-4xl-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for 4×-large text.","note":"Letter-spacing for 4×-large text.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-4xl-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for 4×-large text.","note":"Line height for 4×-large text.","value":"calc(var(--sf-leading-tight) - 8 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-4xl-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for 4×-large text.","note":"Optimal line length for 4×-large text.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-base-max","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Maximum base font size (rem) at the widest viewport. End point for the fluid type scale at wide screens. Part of the fluid scale engine.","value":"1.25","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-base-min","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Minimum base font size (rem) at the narrowest viewport. Starting point for the fluid type scale at narrow screens. Part of the fluid scale engine.","value":"1","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-base-max","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Maximum display/hero font size (rem) at the widest viewport. Drives the ceiling of the fluid display type scale. Part of the fluid scale engine.","value":"3","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-base-min","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Minimum display/hero font size (rem) at the narrowest viewport. Drives the floor of the fluid display type scale. Part of the fluid scale engine.","value":"2.4","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-l","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Large display font size (~68px+). Oversized hero text.","value":"calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-display-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-m","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Medium display font size (~54px). Hero headings.","value":"calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-display-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-s","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Small display font size (~42px). Hero sub-headings.","value":"calc(clamp(calc(var(--sf-text-display-base-min) * 1rem), calc((var(--sf-text-display-base-max) - var(--sf-text-display-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * 1rem), calc(var(--sf-text-display-base-max) * 1rem)) * var(--sf-text-display-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-display-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Multiplier applied only to the display/hero type scale (--sf-text-display-*). Tune headline impact independently of body text.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-l","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Large font size (~18px). Lead paragraphs, prominent labels.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-l-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for large text.","note":"Font weight for large text.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-l-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for large text.","note":"Letter-spacing for large text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-l-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for large text.","note":"Line height for large text.","value":"calc(var(--sf-leading-normal) - 4 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-l-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for large text.","note":"Optimal line length for large text.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-m","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Medium / base font size (~16px). Typical body text.","value":"calc(clamp(calc(var(--sf-text-base-min) * 1rem), calc((var(--sf-text-base-max) - var(--sf-text-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * 1rem), calc(var(--sf-text-base-max) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-m-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for medium (body) text.","note":"Font weight for medium (body) text.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-m-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for medium text.","note":"Letter-spacing for medium text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-m-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for medium text.","note":"Line height for medium text.","value":"calc(var(--sf-leading-normal) - 3 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-m-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal reading line length for medium text (~65–75ch).","note":"Optimal reading line length for medium text (~65–75ch).","value":"65ch","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-ratio-max","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Modular type scale ratio at the widest viewport. Controls step-to-step size growth. Default 1.333. Part of the fluid scale engine.","value":"1.333","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-ratio-min","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"FLUID SCALE ENGINE","description":"Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.","note":"Modular type scale ratio at the narrowest viewport. Controls step-to-step size growth in the fluid type ramp. Default 1.25. Part of the fluid scale engine.","value":"1.25","aliasOf":null,"registered":true,"syntax":"","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-s","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Small font size (~14px). Secondary content, UI annotations.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-s-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for small text.","note":"Font weight for small text.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-s-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for small text.","note":"Letter-spacing for small text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-s-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for small text.","note":"Line height for small text.","value":"calc(var(--sf-leading-relaxed) - 2 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-s-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for small text.","note":"Optimal line length for small text.","value":"65ch","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-scale","tier":"PUBLIC-ADVANCED","role":"knob","namespace":"text","category":"Core tokens","group":"Scale multipliers","description":"Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.","note":"Global type-size multiplier. Scales the entire fluid type scale. 1.08 gives noticeably larger body text without breaking layout.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-shadow-l","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Output token @property registrations","description":"Large text-shadow for high-contrast text over busy or dark image backgrounds.","note":"Large text-shadow for high-contrast text over busy or dark image backgrounds.","value":"0 4px 8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-shadow-m","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Output token @property registrations","description":"Medium text-shadow. Use for text overlaid on images to improve legibility.","note":"Medium text-shadow. Use for text overlaid on images to improve legibility.","value":"0 2px 4px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-shadow-none","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Output token @property registrations","description":"Removes text-shadow (use to explicitly reset inherited shadows).","note":"Removes text-shadow (use to explicitly reset inherited shadows).","value":"none","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-shadow-s","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Output token @property registrations","description":"Small text-shadow for subtle depth on display headings.","note":"Small text-shadow for subtle depth on display headings.","value":"0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7))","aliasOf":null,"registered":true,"syntax":"*","fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xl","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Extra-large font size (~20px). Sub-headings, callout text.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xl-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for extra-large text.","note":"Font weight for extra-large text.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xl-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for extra-large text.","note":"Letter-spacing for extra-large text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xl-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for extra-large text.","note":"Line height for extra-large text.","value":"calc(var(--sf-leading-snug) - 5 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xl-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for extra-large text.","note":"Optimal line length for extra-large text.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xs","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Font sizes","description":"Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.","note":"Extra-small font size (~12px). Labels, captions, metadata.","value":"calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) * 1rem)) * var(--sf-text-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xs-font-weight","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Font weight for extra-small text.","note":"Font weight for extra-small text.","value":"var(--sf-font-weight-body)","aliasOf":"--sf-font-weight-body","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xs-letter-spacing","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Letter-spacing for extra-small text.","note":"Letter-spacing for extra-small text.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xs-line-height","tier":"PUBLIC","role":"consumption","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Line height for extra-small text.","note":"Line height for extra-small text.","value":"calc(var(--sf-leading-relaxed) - 1 * var(--sf-leading-taper))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-text-xs-max-width","tier":"PUBLIC","role":"knob","namespace":"text","category":"Core tokens","group":"Per-size typography sub-properties","description":"Optimal line length for extra-small text.","note":"Optimal line length for extra-small text.","value":"60ch","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-theme-transition-duration","tier":"PUBLIC","role":"consumption","namespace":"theme","category":"Core tokens","group":"Motion & easing","description":"Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.","note":"Duration of the .sf-theme-transition animated color-scheme crossfade. Scales with --sf-motion-scale so reduced-motion preferences are respected. Default 300ms.","value":"calc(300ms * var(--sf-motion-scale))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-touch-target","tier":"PUBLIC","role":"consumption","namespace":"touch","category":"Core tokens","group":"Layout & a11y","description":"Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.","note":"Minimum touch-target size for interactive elements per WCAG 2.5.5.","value":"var(--sf-size-l)","aliasOf":"--sf-size-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-tracking-normal","tier":"PUBLIC","role":"knob","namespace":"tracking","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Normal letter-spacing (0). Default for body text.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-tracking-tight","tier":"PUBLIC","role":"knob","namespace":"tracking","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Tight letter-spacing (slightly negative). Suitable for large headings.","value":"-0.025em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-tracking-wide","tier":"PUBLIC","role":"knob","namespace":"tracking","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Wide letter-spacing. Use for small-caps labels.","value":"0.025em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-tracking-wider","tier":"PUBLIC","role":"knob","namespace":"tracking","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Wider letter-spacing for strongly spaced labels.","value":"0.05em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-tracking-widest","tier":"PUBLIC","role":"knob","namespace":"tracking","category":"Core tokens","group":"Line heights & letter spacing","description":"Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.","note":"Widest letter-spacing for all-caps microcopy.","value":"0.1em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-colors","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand for color-related properties (color, background, border-color).","value":"color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-enter","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Enter-phase transition (ease-out). Use on elements appearing in the viewport.","value":"color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), box-shadow var(--sf-duration-normal) var(--sf-ease-out), opacity var(--sf-duration-normal) var(--sf-ease-out), transform var(--sf-duration-normal) var(--sf-ease-out), filter var(--sf-duration-normal) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-exit","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Exit-phase transition (ease-in). Use on elements leaving the viewport.","value":"color var(--sf-duration-fast) var(--sf-ease-in), background-color var(--sf-duration-fast) var(--sf-ease-in), border-color var(--sf-duration-fast) var(--sf-ease-in), box-shadow var(--sf-duration-fast) var(--sf-ease-in), opacity var(--sf-duration-fast) var(--sf-ease-in), transform var(--sf-duration-fast) var(--sf-ease-in), filter var(--sf-duration-fast) var(--sf-ease-in)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-fast","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Fast-duration transition shorthand.","value":"color var(--sf-duration-fast) var(--sf-ease-out), background-color var(--sf-duration-fast) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out), transform var(--sf-duration-fast) var(--sf-ease-out), filter var(--sf-duration-fast) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-form-field","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand optimised for form fields: color and background at normal pace so label color shifts feel natural; border, shadow, and opacity at fast pace so focus rings appear crisply.","value":"color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-opacity","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand for opacity.","value":"opacity var(--sf-duration-normal) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-overlay","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand for overlay fades (opacity + visibility).","value":"overlay var(--sf-duration-normal) allow-discrete, display var(--sf-duration-normal) allow-discrete","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-shadow","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand for box-shadow.","value":"box-shadow var(--sf-duration-normal) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-slow","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Slow-duration transition shorthand.","value":"color var(--sf-duration-slow) var(--sf-ease-in-out), background-color var(--sf-duration-slow) var(--sf-ease-in-out), border-color var(--sf-duration-slow) var(--sf-ease-in-out), box-shadow var(--sf-duration-slow) var(--sf-ease-in-out), opacity var(--sf-duration-slow) var(--sf-ease-in-out), transform var(--sf-duration-slow) var(--sf-ease-in-out), filter var(--sf-duration-slow) var(--sf-ease-in-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-transition-transform","tier":"PUBLIC","role":"consumption","namespace":"transition","category":"Core tokens","group":"Transition shorthands","description":"Pre-built transition shorthand values for the most common animated properties.","note":"Transition shorthand for transform.","value":"transform var(--sf-duration-normal) var(--sf-ease-out)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-base","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Base stacking level (1). Establishes a stacking context without elevation.","value":"0","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-below","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index below stacking context base. For decorative pseudo-elements.","value":"-1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-dropdown","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for dropdown menus and select popups.","value":"1020","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-fixed","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for position: fixed elements.","value":"1010","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-modal","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for modal dialogs and their non-top-layer backdrop scrims. Sits above overlays and dropdowns. Default 1040.","value":"1040","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-overlay","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for modal / dialog backdrops.","value":"1030","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-raised","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Raised elevation (50). Cards, sticky headers.","value":"1","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-sticky","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for position: sticky elements (navbars, table headers).","value":"1000","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-toast","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for toast / snackbar notifications.","value":"1050","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-z-tooltip","tier":"PUBLIC","role":"knob","namespace":"z","category":"Core tokens","group":"Z-index","description":"Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.","note":"Z-index for tooltips and transient floating notifications. Highest named layer in the z-index stack. Default 1060.","value":"1060","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]}]`),Ds={_sync:Gh,tokens:Hh};var il=g('
 
'),cl=g('
 
'),qh=g(" "),Vh=g('optional'),dl=g('
 
'),Kh=g('
   
 
 
'),fl=g(' 
',1),ul=g('
 
 ',1),Wh=g('knob'),Yh=g('advanced'),Zh=g('
 
'),Xh=g('
   
  
 
'),Jh=g('
Classes & Variables
  
 
 
');function Qh(a,e){ea(e,!0);const o=jh.classes,n=Ds.tokens.filter(M=>M.tier==="PUBLIC"||M.tier==="PUBLIC-ADVANCED");let l=K(""),i=K("classes"),c=K(""),d=u(()=>()=>{const M=t(l).trim().toLowerCase();return M?o.filter(J=>J.name.toLowerCase().includes(M)||J.selector?.toLowerCase().includes(M)||J.description?.toLowerCase().includes(M)||J.group?.toLowerCase().includes(M)):o}),p=u(()=>()=>{const M=t(l).trim().toLowerCase();return M?n.filter(J=>J.name.toLowerCase().includes(M)||J.description?.toLowerCase().includes(M)||J.group?.toLowerCase().includes(M)||J.value?.toLowerCase().includes(M)):n});function m(M){const J=new Map;for(const be of M){const ze=be.category||"Other",Me=be.group||"";J.has(ze)||J.set(ze,new Map);const ye=J.get(ze);ye.has(Me)||ye.set(Me,[]),ye.get(Me).push(be)}return J}let h=u(()=>m(t(d)())),v=u(()=>m(t(p)())),b=null;async function k(M){try{await navigator.clipboard.writeText(M),w(c,M,!0),b&&clearTimeout(b),b=setTimeout(()=>{t(c)===M&&w(c,""),b=null},1500)}catch{}}const S={layout:"text-violet-400",macro:"text-sky-400",state:"text-amber-400",accessibility:"text-emerald-400",motion:"text-pink-400",print:"text-slate-400",form:"text-orange-400",component:"text-indigo-400",theme:"text-teal-400"};var E=Jh(),I=s(E),P=r(s(I),2),B=r(P,2),H=s(B),D=s(H),R=r(H,2),C=s(R),A=r(I,2),q=s(A);{var O=M=>{var J=zt(),be=ce(J);{var ze=ue=>{var X=il(),ne=s(X);_(()=>y(ne,`No classes match "${t(l)??""}"`)),f(ue,X)},Me=u(()=>t(d)().length===0),ye=ue=>{var X=zt(),ne=ce(X);ae(ne,17,()=>[...t(h).entries()],([_e,Ae])=>_e,(_e,Ae)=>{var j=u(()=>Ta(t(Ae),2));let G=()=>t(j)[0],Z=()=>t(j)[1];var se=ul(),Y=ce(se),de=s(Y),ge=s(de),ve=r(Y,2);ae(ve,17,()=>[...Z().entries()],([re,Ie])=>re,(re,Ie)=>{var qe=u(()=>Ta(t(Ie),2));let rt=()=>t(qe)[0],et=()=>t(qe)[1];var tt=fl(),vt=ce(tt);{var gt=_t=>{var fe=cl(),T=s(fe);_(()=>y(T,rt())),f(_t,fe)};L(vt,_t=>{rt()&&_t(gt)})}var Ot=r(vt,2);ae(Ot,21,et,_t=>_t.name,(_t,fe)=>{var T=Kh(),Q=s(T),le=s(Q),ke=s(le),Ce=s(ke),Ve=r(ke,2);{var Ke=nt=>{var ht=qh(),Ne=s(ht);_(()=>{Xe(ht,1,`text-[8px] font-bold uppercase ${S[t(fe).kind]??"text-slate-500"}`),y(Ne,t(fe).kind)}),f(nt,ht)};L(Ve,nt=>{t(fe).kind&&nt(Ke)})}var U=r(Ve,2);{var W=nt=>{var ht=Vh();f(nt,ht)};L(U,nt=>{t(fe).optional&&nt(W)})}var oe=r(le,2);{var Ee=nt=>{var ht=dl(),Ne=s(ht);_(()=>y(Ne,t(fe).description)),f(nt,ht)};L(oe,nt=>{t(fe).description&&nt(Ee)})}var Le=r(Q,2),mt=s(Le);{var He=nt=>{Uo(nt,{class:"w-3 h-3 text-emerald-400"})},dt=nt=>{Zr(nt,{class:"w-3 h-3 text-slate-500"})};L(mt,nt=>{t(c)===t(fe).selector?nt(He):nt(dt,-1)})}_(()=>y(Ce,t(fe).selector)),x("click",Le,()=>k(t(fe).selector)),f(_t,T)}),f(re,tt)}),_(()=>y(ge,G())),f(_e,se)}),f(ue,X)};L(be,ue=>{t(Me)?ue(ze):ue(ye,-1)})}f(M,J)},F=M=>{var J=zt(),be=ce(J);{var ze=ue=>{var X=il(),ne=s(X);_(()=>y(ne,`No tokens match "${t(l)??""}"`)),f(ue,X)},Me=u(()=>t(p)().length===0),ye=ue=>{var X=zt(),ne=ce(X);ae(ne,17,()=>[...t(v).entries()],([_e,Ae])=>_e,(_e,Ae)=>{var j=u(()=>Ta(t(Ae),2));let G=()=>t(j)[0],Z=()=>t(j)[1];var se=ul(),Y=ce(se),de=s(Y),ge=s(de),ve=r(Y,2);ae(ve,17,()=>[...Z().entries()],([re,Ie])=>re,(re,Ie)=>{var qe=u(()=>Ta(t(Ie),2));let rt=()=>t(qe)[0],et=()=>t(qe)[1];var tt=fl(),vt=ce(tt);{var gt=_t=>{var fe=cl(),T=s(fe);_(()=>y(T,rt())),f(_t,fe)};L(vt,_t=>{rt()&&_t(gt)})}var Ot=r(vt,2);ae(Ot,21,et,_t=>_t.name,(_t,fe)=>{var T=Xh(),Q=s(T),le=s(Q),ke=s(le),Ce=s(ke),Ve=r(ke,2);{var Ke=Ne=>{var At=Wh();f(Ne,At)};L(Ve,Ne=>{t(fe).role==="knob"&&Ne(Ke)})}var U=r(Ve,2);{var W=Ne=>{var At=Yh();f(Ne,At)};L(U,Ne=>{t(fe).tier==="PUBLIC-ADVANCED"&&Ne(W)})}var oe=r(le,2);{var Ee=Ne=>{var At=Zh(),Ft=s(At);_(()=>y(Ft,t(fe).value)),f(Ne,At)};L(oe,Ne=>{t(fe).value&&Ne(Ee)})}var Le=r(oe,2);{var mt=Ne=>{var At=dl(),Ft=s(At);_(()=>y(Ft,t(fe).description)),f(Ne,At)};L(Le,Ne=>{t(fe).description&&Ne(mt)})}var He=r(Q,2),dt=s(He);{var nt=Ne=>{Uo(Ne,{class:"w-3 h-3 text-emerald-400"})},ht=Ne=>{Zr(Ne,{class:"w-3 h-3 text-slate-500"})};L(dt,Ne=>{t(c)===`var(${t(fe).name})`?Ne(nt):Ne(ht,-1)})}_(()=>y(Ce,t(fe).name)),x("click",He,()=>k(`var(${t(fe).name})`)),f(_t,T)}),f(re,tt)}),_(()=>y(ge,G())),f(_e,se)}),f(ue,X)};L(be,ue=>{t(Me)?ue(ze):ue(ye,-1)})}f(M,J)};L(q,M=>{t(i)==="classes"?M(O):M(F,-1)})}_((M,J)=>{Xe(H,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${t(i)==="classes"?"bg-indigo-600/30 text-indigo-200 border border-indigo-500/30":"text-slate-500 hover:text-slate-300"}`),y(D,`CSS classes (${M??""})`),Xe(R,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${t(i)==="tokens"?"bg-indigo-600/30 text-indigo-200 border border-indigo-500/30":"text-slate-500 hover:text-slate-300"}`),y(C,`CSS vars (${J??""})`)},[()=>t(d)().length,()=>t(p)().length]),hr(P,()=>t(l),M=>w(l,M)),x("click",H,()=>{w(i,"classes")}),x("click",R,()=>{w(i,"tokens")}),f(a,E),ta()}oa(["click"]);var $h=g('
'),eg=g('
'),tg=g('
 
'),ag=g(''),og=g(' '),sg=g(''),rg=g(''),ng=g('
  
 
 
  
');function $i(a,e){ea(e,!0);let o=K(!1);function n(O){const F=O.name;if(F.includes("color")||F.includes("source")||F.includes("-bg")||F.includes("-border"))return"color";if(F.includes("font")||F.includes("family"))return"font";const M=O.syntax?.toLowerCase()??"";return M.includes("number")||M.includes("length")||M.includes("integer")?"number":"text"}let l=u(()=>e.overrideValue??e.token.value),i=u(()=>e.overrideValue!==void 0),c=u(()=>n(e.token)),d=u(()=>e.token.name.replace("--sf-",""));function p(O){return Ha.value,vo(O)||vo(`var(${e.token.name})`)||O}let m=u(()=>t(c)==="color"?p(t(l)):"");var h=ng(),v=s(h),b=r(v,2);{var k=O=>{var F=$h();let M;_(()=>M=ct(F,"",M,{background:t(m)})),f(O,F)},S=O=>{var F=eg();f(O,F)};L(b,O=>{t(c)==="color"?O(k):O(S,-1)})}var E=r(b,2),I=s(E),P=s(I),B=r(I,2);{var H=O=>{var F=tg(),M=s(F);_(()=>y(M,e.token.description)),f(O,F)};L(B,O=>{e.token.description&&O(H)})}var D=r(E,2);{var R=O=>{var F=ag();_(()=>Jt(F,t(l))),go("blur",F,M=>{const J=M.target.value.trim();J&&J!==e.token.value?e.onSet(J):(!J||J===e.token.value)&&e.onReset(),w(o,!1)}),x("keydown",F,M=>{M.key==="Enter"&&M.currentTarget.blur(),M.key==="Escape"&&w(o,!1)}),f(O,F)},C=O=>{var F=sg(),M=s(F);{var J=ze=>{var Me=og(),ye=s(Me);_(()=>y(ye,t(l))),f(ze,Me)},be=ze=>{var Me=ls();_(()=>y(Me,t(l))),f(ze,Me)};L(M,ze=>{t(i)?ze(J):ze(be,-1)})}_(()=>ee(F,"title",t(l))),x("click",F,()=>{w(o,!0)}),f(O,F)};L(D,O=>{t(o)?O(R):O(C,-1)})}var A=r(D,2);{var q=O=>{var F=rg();x("click",F,function(...M){e.onReset?.apply(this,M)}),f(O,F)};L(A,O=>{t(i)&&O(q)})}_(()=>{Xe(h,1,`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${t(i)?"bg-indigo-500/8 border border-indigo-500/15":"hover:bg-white/4"}`),Xe(v,1,`w-1.5 h-1.5 rounded-full shrink-0 ${t(i)?"bg-indigo-500":"bg-transparent"}`),ee(I,"title",e.token.name),y(P,t(d))}),f(a,h),ta()}oa(["keydown","click"]);var lg=g(' '),ig=g('
No tokens found
'),cg=g('
 
'),dg=g('
 
'),fg=g('
 
 
  
');function ug(a,e){ea(e,!0);let o=K(""),n=u(()=>()=>{const P=e.patterns??[e.domain];return e.tokens.filter(B=>P.some(H=>B.name.includes(H))&&B.tier!=="INTERNAL")}),l=u(()=>()=>{if(!t(o))return t(n)();const P=t(o).toLowerCase();return t(n)().filter(B=>B.name.toLowerCase().includes(P)||B.description?.toLowerCase().includes(P))}),i=u(()=>t(l)().filter(P=>P.name in e.overrides).length);var c=fg(),d=s(c),p=s(d),m=s(p),h=r(p,2);{var v=P=>{var B=lg(),H=s(B);_(()=>y(H,`${t(i)??""} modified`)),f(P,B)};L(h,P=>{t(i)>0&&P(v)})}var b=r(d,2),k=r(b,2);{var S=P=>{var B=ig();f(P,B)},E=u(()=>t(l)().length===0),I=P=>{var B=dg(),H=s(B);ae(H,17,()=>t(l)().slice(0,60),A=>A.name,(A,q)=>{$i(A,{get token(){return t(q)},get overrideValue(){return e.overrides[t(q).name]},onSet:O=>e.onSet(t(q).name,O),onReset:()=>e.onReset(t(q).name)})});var D=r(H,2);{var R=A=>{var q=cg(),O=s(q);_(F=>y(O,`${F??""} more — refine your search`),[()=>t(l)().length-60]),f(A,q)},C=u(()=>t(l)().length>60);L(D,A=>{t(C)&&A(R)})}f(P,B)};L(k,P=>{t(E)?P(S):P(I,-1)})}_(()=>{y(m,`${e.domain??""} tokens`),ee(b,"placeholder",`Search ${e.domain} tokens…`),Jt(b,t(o))}),x("input",b,P=>{w(o,P.target.value,!0)}),f(a,c),ta()}oa(["input"]);var pl=g('
'),pg=g('
  
'),mg=g('
 
'),vg=g('
'),hg=g('
'),gg=g('
  
'),bg=g('
'),yg=g('
 
   
 
  
 
  
 
 
 
');function xg(a,e){ea(e,!0);const o={PUBLIC:0,"PUBLIC-ADVANCED":1,INTERNAL:2};let n=K(""),l=K(!1),i=K(!1),c=u(()=>e.tokens.filter(Y=>e.patterns.some(de=>Y.name.includes(de))).sort((Y,de)=>{const ge=o[Y.tier??"INTERNAL"]??2,ve=o[de.tier??"INTERNAL"]??2;return ge!==ve?ge-ve:Y.name.localeCompare(de.name)})),d=u(()=>()=>{let Y=t(c);if(t(l)||(Y=Y.filter(de=>de.tier!=="INTERNAL")),t(i)&&(Y=Y.filter(de=>de.name in e.overrides)),t(n)){const de=t(n).toLowerCase();Y=Y.filter(ge=>ge.name.toLowerCase().includes(de)||ge.description?.toLowerCase().includes(de))}return Y}),p=u(()=>t(c).filter(Y=>Y.name in e.overrides).length),m=u(()=>t(c).filter(Y=>Y.tier==="PUBLIC").length),h=u(()=>t(c).filter(Y=>Y.tier==="PUBLIC-ADVANCED").length),v=u(()=>t(c).filter(Y=>Y.tier==="INTERNAL").length);var b=yg(),k=s(b),S=s(k),E=r(S,2),I=s(E),P=s(I),B=s(P);{var H=Y=>{var de=pl();f(Y,de)};L(B,Y=>{t(i)&&Y(H)})}var D=r(P),R=r(I,2),C=s(R),A=s(C);{var q=Y=>{var de=pl();f(Y,de)};L(A,Y=>{t(l)&&Y(q)})}var O=r(C),F=r(R,2),M=s(F),J=r(E,2),be=s(J),ze=r(s(be),2),Me=s(ze),ye=r(be,2),ue=r(s(ye),2),X=s(ue),ne=r(ye,2);{var _e=Y=>{var de=pg(),ge=r(s(de),2),ve=s(ge);_(()=>y(ve,`Internal (${t(v)??""})`)),f(Y,de)};L(ne,Y=>{t(l)&&Y(_e)})}var Ae=r(k,4),j=s(Ae);{var G=Y=>{var de=mg(),ge=s(de);_(()=>y(ge,t(i)?"No modified tokens in this domain":"No tokens found")),f(Y,de)},Z=u(()=>t(d)().length===0),se=Y=>{var de=bg();ae(de,21,()=>t(d)(),ge=>ge.name,(ge,ve)=>{var re=gg(),Ie=s(re);{var qe=vt=>{var gt=vg();f(vt,gt)};L(Ie,vt=>{t(ve).tier==="PUBLIC-ADVANCED"&&vt(qe)})}var rt=r(Ie,2);{var et=vt=>{var gt=hg();f(vt,gt)};L(rt,vt=>{t(ve).tier==="INTERNAL"&&vt(et)})}var tt=r(rt,2);$i(tt,{get token(){return t(ve)},get overrideValue(){return e.overrides[t(ve).name]},onSet:vt=>e.onSet(t(ve).name,vt),onReset:()=>e.onReset(t(ve).name)}),f(ge,re)}),f(Y,de)};L(j,Y=>{t(Z)?Y(G):Y(se,-1)})}_(Y=>{Jt(S,t(n)),Xe(I,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${t(i)?"text-indigo-400":"text-slate-600 hover:text-slate-400"}`),Xe(P,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${t(i)?"bg-indigo-600 border-indigo-500":"border-white/20"}`),y(D,` Modified only ${t(p)>0?`(${t(p)})`:""}`),ee(R,"aria-expanded",t(l)),Xe(R,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${t(l)?"text-amber-400":"text-slate-600 hover:text-slate-400"}`),Xe(C,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${t(l)?"bg-amber-600 border-amber-500":"border-white/20"}`),y(O,` Internal (${t(v)??""})`),y(M,`${Y??""}/${t(c).length??""}`),y(Me,`Public (${t(m)??""})`),y(X,`Advanced (${t(h)??""})`)},[()=>t(d)().length]),x("input",S,Y=>{w(n,Y.target.value,!0)}),x("click",I,()=>{w(i,!t(i))}),x("click",R,()=>{w(l,!t(l))}),f(a,b),ta()}oa(["input","click"]);var ml=g(''),kg=g('
    
 
       
'),wg=g('
Waiting for live preview…
'),_g=g(""),Cg=g('
Pick an editable brand/status (base) color as the foreground to enable auto-fix.
'),Og=g('
 
'),Sg=g('
 
 
 
 
 
'),Lg=g('
 
'),Pg=g('
Foreground
 
  
Background
 
 
Aa Bb Cc
 
 
Auto-fix to pass   
 
',1),Ig=g(' '),Bg=g(''),Ug=g('·'),Ag=g(' '),zg=g('
Foreground (rows) × background (cols). Click a cell to load it above.
 
',1),Eg=g('
Contrast checker
 
Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.
 
 
 
 
 
');function Rg(a,e){ea(e,!0);const o=[{label:"Text",expr:"var(--sf-color-text)"},{label:"Text secondary",expr:"var(--sf-color-text--secondary)"},{label:"Text muted",expr:"var(--sf-color-text--muted)"},{label:"White",expr:"#ffffff"},{label:"Black",expr:"#000000"}],n=[{label:"Surface",expr:"var(--sf-color-surface)"},{label:"Bg",expr:"var(--sf-color-bg)"},{label:"Border",expr:"var(--sf-color-border)"}],l=[{key:"primary",srcLight:"--sf-color-primary-source-light",defLight:"oklch(0.47 0.27 264)",srcDark:"--sf-color-primary-source-dark",defDark:"oklch(0.715 0.243 264)"},{key:"secondary",srcLight:"--sf-color-secondary-source-light",defLight:"oklch(0.22 0.04 264)",srcDark:"--sf-color-secondary-source-dark",defDark:"oklch(0.84 0.036 264)"},{key:"tertiary",srcLight:"--sf-color-tertiary-source-light",defLight:"oklch(0.42 0.22 295)",srcDark:"--sf-color-tertiary-source-dark",defDark:"oklch(0.74 0.198 295)"},{key:"action",srcLight:"--sf-color-action-source-light",defLight:"oklch(0.50 0.22 235)",srcDark:"--sf-color-action-source-dark",defDark:"oklch(0.70 0.198 235)"},{key:"neutral",srcLight:"--sf-color-neutral-source-light",defLight:"oklch(0.52 0.025 260)",srcDark:"--sf-color-neutral-source-dark",defDark:"oklch(0.69 0.0225 260)"},{key:"success",srcLight:"--sf-color-success-source-light",defLight:"oklch(0.50 0.16 145)",srcDark:"--sf-color-success-source-dark",defDark:"oklch(0.70 0.144 145)"},{key:"warning",srcLight:"--sf-color-warning-source-light",defLight:"oklch(0.75 0.17 80)",srcDark:"--sf-color-warning-source-dark",defDark:"oklch(0.65 0.153 80)"},{key:"danger",srcLight:"--sf-color-danger-source-light",defLight:"oklch(0.48 0.22 12)",srcDark:"--sf-color-danger-source-dark",defDark:"oklch(0.71 0.198 12)"},{key:"info",srcLight:"--sf-color-info-source-light",defLight:"oklch(0.48 0.18 235)",srcDark:"--sf-color-info-source-dark",defDark:"oklch(0.71 0.162 235)"}],i=l.flatMap(G=>[{label:`${G.key} (base)`,expr:`var(--sf-color-${G.key})`,editKey:G.key},{label:`${G.key}-100`,expr:`var(--sf-color-${G.key}-100)`},{label:`${G.key}-600`,expr:`var(--sf-color-${G.key}-600)`},{label:`${G.key}-900`,expr:`var(--sf-color-${G.key}-900)`}]),c=[...o,...n,...i],d=Object.fromEntries(l.map(G=>[G.key,G])),p=[{label:"text",expr:"var(--sf-color-text)"},{label:"white",expr:"#ffffff"},{label:"black",expr:"#000000"},{label:"primary",expr:"var(--sf-color-primary)",editKey:"primary"}],m=[{label:"surface",expr:"var(--sf-color-surface)"},{label:"primary",expr:"var(--sf-color-primary)"},{label:"neutral-100",expr:"var(--sf-color-neutral-100)"},{label:"success",expr:"var(--sf-color-success)"},{label:"warning",expr:"var(--sf-color-warning)"},{label:"danger",expr:"var(--sf-color-danger)"}];let h=K("White"),v=K("primary (base)"),b=K("AA"),k=u(()=>c.find(G=>G.label===t(h))??c[0]),S=u(()=>c.find(G=>G.label===t(v))??c[0]);function E(G,Z){Ha.value;const se=Bs(G),Y=Bs(Z);return!se||!Y?null:Xs(Do(...se),Do(...Y))}function I(G){return G>=7?{tag:"AAA",cls:"bg-emerald-500/25 text-emerald-200"}:G>=4.5?{tag:"AA",cls:"bg-emerald-500/15 text-emerald-300"}:G>=3?{tag:"AA-L",cls:"bg-amber-500/20 text-amber-300"}:{tag:"Fail",cls:"bg-rose-500/20 text-rose-300"}}let P=u(()=>E(t(k).expr,t(S).expr));function B(){const G=t(h);w(h,t(v),!0),w(v,G,!0)}function H(G,Z){const se=c.find(de=>de.expr===G),Y=c.find(de=>de.expr===Z);se&&w(h,se.label,!0),Y&&w(v,Y.label,!0)}function D(G){return Ha.value,vo(G)||G}let R=K(!1),C=K(!1),A=K(null);function q(){w(A,null);const G=t(k).editKey?d[t(k).editKey]:null;if(!G)return;const Z=Jn()==="dark",se=Z?G.srcDark:G.srcLight,Y=Z?G.defDark:G.defLight,de=e.overrides[se]??Y,{c:ge,h:ve,l:re,valid:Ie}=Js(de);if(!Ie)return;const qe=Bs(t(S).expr);if(!qe)return;const rt=Do(...qe),et=t(b)==="AAA"?7:4.5;let tt=null;for(let fe=0;fe<=1.0001;fe+=.005){const[T,Q,le]=Qn(fe,ge,ve);Xs(Do(T,Q,le),rt)>=et&&(tt===null||Math.abs(fe-re){if(!t(R)){w(A,null);return}Ha.value,t(h),t(v),t(b),t(k).editKey&&t(P)!==null&&t(P)<(t(b)==="AAA"?7:4.5)?q():w(A,null)});var F=Eg(),M=r(s(F),2),J=s(M),be=r(s(J),2),ze=s(be),Me=r(J,2);{var ye=G=>{var Z=Pg(),se=ce(Z),Y=s(se),de=r(s(Y),2);ae(de,21,()=>c,U=>U.label,(U,W)=>{var oe=ml(),Ee=s(oe),Le={};_(()=>{y(Ee,t(W).label),Le!==(Le=t(W).label)&&(oe.value=(oe.__value=t(W).label)??"")}),f(U,oe)});var ge=r(Y,2),ve=r(ge,2),re=r(s(ve),2);ae(re,21,()=>c,U=>U.label,(U,W)=>{var oe=ml(),Ee=s(oe),Le={};_(()=>{y(Ee,t(W).label),Le!==(Le=t(W).label)&&(oe.value=(oe.__value=t(W).label)??"")}),f(U,oe)});var Ie=r(se,2),qe=s(Ie),rt=s(qe),et=r(qe,2);{var tt=U=>{const W=u(()=>I(t(P)));var oe=kg(),Ee=s(oe),Le=s(Ee),mt=r(Ee,2),He=s(mt),dt=r(mt,4),nt=s(dt),ht=s(nt),Ne=r(nt,2),At=s(Ne),Ft=r(Ne,2),aa=s(Ft),Mt=r(Ft,2),Rt=s(Mt);_(na=>{y(Le,`${na??""}:1`),Xe(mt,1,`text-[10px] font-bold px-2 py-0.5 rounded ${t(W).cls}`),y(He,t(W).tag),Xe(nt,1,mo(t(P)>=4.5?"text-emerald-300":"text-rose-300")),y(ht,`${t(P)>=4.5?"✓":"✗"} AA normal`),Xe(Ne,1,mo(t(P)>=3?"text-emerald-300":"text-rose-300")),y(At,`${t(P)>=3?"✓":"✗"} AA large`),Xe(Ft,1,mo(t(P)>=7?"text-emerald-300":"text-rose-300")),y(aa,`${t(P)>=7?"✓":"✗"} AAA normal`),Xe(Mt,1,mo(t(P)>=4.5?"text-emerald-300":"text-rose-300")),y(Rt,`${t(P)>=4.5?"✓":"✗"} AAA large`)},[()=>t(P).toFixed(2)]),f(U,oe)},vt=U=>{var W=wg();f(U,W)};L(et,U=>{t(P)!==null?U(tt):U(vt,-1)})}var gt=r(Ie,2),Ot=s(gt),_t=s(Ot),fe=r(s(_t)),T=s(fe),Q=r(_t,2);ae(Q,20,()=>["AA","AAA"],U=>U,(U,W)=>{var oe=_g(),Ee=s(oe);_(()=>{Xe(oe,1,`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${t(b)===W?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),y(Ee,W)}),x("click",oe,()=>{w(b,W,!0)}),f(U,oe)});var le=r(Ot,2);{var ke=U=>{var W=Cg();f(U,W)},Ce=U=>{var W=Og(),oe=s(W);_(()=>y(oe,`Already passes ${t(b)??""}. 🎉`)),f(U,W)},Ve=U=>{var W=Sg(),oe=s(W),Ee=r(oe,2),Le=s(Ee),mt=s(Le),He=r(Le,2),dt=s(He),nt=r(Ee,2);_((ht,Ne)=>{ct(oe,ht),y(mt,t(A).value),y(dt,`→ ${Ne??""}:1 (${t(b)??""} ✓)`)},[()=>`background:${D(t(A).value)}`,()=>t(A).ratio.toFixed(2)]),x("click",nt,O),f(U,W)},Ke=U=>{var W=Lg(),oe=s(W);_(()=>y(oe,`No lightness of this hue reaches ${t(b)??""} on this background — try a different background or hue.`)),f(U,W)};L(le,U=>{t(k).editKey?t(P)!==null&&t(P)>=(t(b)==="AAA"?7:4.5)?U(Ce,1):t(A)?U(Ve,2):U(Ke,-1):U(ke)})}_((U,W,oe)=>{ct(qe,U),ct(rt,W),y(T,`(for ${oe??""} mode)`)},[()=>`background:${D(t(S).expr)}`,()=>`color:${D(t(k).expr)}`,()=>Jn()]),Tn(de,()=>t(h),U=>w(h,U)),x("click",ge,B),Tn(re,()=>t(v),U=>w(v,U)),f(G,Z)};L(Me,G=>{t(R)&&G(ye)})}var ue=r(M,4),X=s(ue),ne=r(s(X),2),_e=s(ne),Ae=r(X,2);{var j=G=>{var Z=zg(),se=r(ce(Z),2),Y=s(se),de=s(Y),ge=s(de),ve=r(s(ge));ae(ve,17,()=>m,Ie=>Ie.label,(Ie,qe)=>{var rt=Ig(),et=s(rt);_(()=>y(et,t(qe).label)),f(Ie,rt)});var re=r(de);ae(re,21,()=>p,Ie=>Ie.label,(Ie,qe)=>{var rt=Ag(),et=s(rt),tt=s(et),vt=r(et);ae(vt,17,()=>m,gt=>gt.label,(gt,Ot)=>{const _t=u(()=>E(t(qe).expr,t(Ot).expr));var fe=zt(),T=ce(fe);{var Q=ke=>{const Ce=u(()=>I(t(_t)));var Ve=Bg(),Ke=s(Ve),U=s(Ke);_((W,oe)=>{ee(Ke,"title",W),Xe(Ke,1,`w-full px-1.5 py-1 rounded font-mono font-bold cursor-pointer ${t(Ce).cls}`),y(U,oe)},[()=>`${t(qe).label} on ${t(Ot).label} — ${t(_t).toFixed(2)}:1`,()=>t(_t).toFixed(1)]),x("click",Ke,()=>H(t(qe).expr,t(Ot).expr)),f(ke,Ve)},le=ke=>{var Ce=Ug();f(ke,Ce)};L(T,ke=>{t(_t)!==null?ke(Q):ke(le,-1)})}f(gt,fe)}),_(()=>y(tt,t(qe).label)),f(Ie,rt)}),f(G,Z)};L(Ae,G=>{t(C)&&G(j)})}_(()=>{ee(J,"aria-expanded",t(R)),y(ze,t(R)?"▲":"▼"),ee(X,"aria-expanded",t(C)),y(_e,t(C)?"▲":"▼")}),x("click",J,()=>{w(R,!t(R))}),x("click",X,()=>{w(C,!t(C))}),f(a,F),ta()}oa(["click"]);var Tg=g('
'),Dg=g(' '),Mg=g('
 
 
 
');function ec(a,e){ea(e,!0);const o=new Set(["home","themes","wcag","setup","cheatsheet"]);let n=K("controls");xa(()=>{e.domain,w(n,"controls")});let l=u(()=>Yi[e.domain]??[e.domain]),i=u(()=>e.tokens.filter(v=>t(l).some(b=>v.name.includes(b))&&v.name in e.overrides).length);var c=zt(),d=ce(c);{var p=v=>{var b=zt(),k=ce(b);{var S=H=>{Hu(H,{get overrides(){return e.overrides},get onSelect(){return e.onSelectDomain},get onApplyTheme(){return e.onApplyTheme},get onResetAll(){return e.onResetAll}})},E=H=>{Rh(H,{get overrides(){return e.overrides},get onApplyTheme(){return e.onApplyTheme},get onResetAll(){return e.onResetAll}})},I=H=>{Rg(H,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onBulkChange(){return e.onBulkChange}})},P=H=>{Nh(H,{get overrides(){return e.overrides}})},B=H=>{Qh(H,{})};L(k,H=>{e.domain==="home"?H(S):e.domain==="themes"?H(E,1):e.domain==="wcag"?H(I,2):e.domain==="setup"?H(P,3):e.domain==="cheatsheet"&&H(B,4)})}f(v,b)},m=u(()=>o.has(e.domain)),h=v=>{var b=Mg(),k=s(b),S=s(k);{var E=q=>{var O=Tg(),F=s(O);{var M=j=>{Xp(j,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange},get onSelectDomain(){return e.onSelectDomain}})},J=j=>{Bm(j,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},be=j=>{Tm(j,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},ze=j=>{Qm(j,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},Me=j=>{pv(j,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},ye=j=>{kv(j,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},ue=j=>{Tv(j,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},X=j=>{Zv(j,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},ne=j=>{rh(j,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},_e=j=>{Sh(j,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},Ae=j=>{ug(j,{get domain(){return e.domain},get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})};L(F,j=>{e.domain==="colors"?j(M):e.domain==="typography"?j(J,1):e.domain==="spacing"?j(be,2):e.domain==="layout"?j(ze,3):e.domain==="borders"?j(Me,4):e.domain==="shadows"?j(ye,5):e.domain==="motion"?j(ue,6):e.domain==="effects"?j(X,7):e.domain==="macros"?j(ne,8):e.domain==="misc"?j(_e,9):j(Ae,-1)})}f(q,O)},I=q=>{xg(q,{get tokens(){return e.tokens},get overrides(){return e.overrides},get patterns(){return t(l)},get onSet(){return e.onSet},get onReset(){return e.onReset}})};L(S,q=>{t(n)==="controls"?q(E):q(I,-1)})}var P=r(k,2),B=s(P),H=s(B);Si(H,{class:"w-3 h-3"});var D=r(B,4),R=s(D);ef(R,{class:"w-3 h-3"});var C=r(R,2);{var A=q=>{var O=Dg(),F=s(O);_(()=>y(F,t(i))),f(q,O)};L(C,q=>{t(i)>0&&q(A)})}_(()=>{Xe(B,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${t(n)==="controls"?"text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px":"text-slate-500 hover:text-slate-300"}`),Xe(D,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${t(n)==="tokens"?"text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px":"text-slate-500 hover:text-slate-300"}`)}),x("click",B,()=>{w(n,"controls")}),x("click",D,()=>{w(n,"tokens")}),f(v,b)};L(d,v=>{t(m)?v(p):v(h,-1)})}f(a,c),ta()}oa(["click"]);var Ng=g('
 
'),Fg=g('
Type to search tokens by name or description
'),jg=g('overridden'),Gg=g('
 
'),Hg=g(''),qg=g('
↑↓ navigate ↵ open panel Esc close
'),Vg=g('');function tc(a,e){ea(e,!0);let o=K(""),n=K(0),l=K(null);const i={colors:"Colors",typography:"Typography",spacing:"Spacing",layout:"Layout",borders:"Borders",shadows:"Shadows",motion:"Motion",effects:"Effects",macros:"Macros",misc:"Misc"};let c=u(()=>(()=>{const C=t(o).trim().toLowerCase();if(!C)return[];const A=[];for(const q of e.tokens){if(q.tier==="INTERNAL")continue;const O=q.name.toLowerCase().includes(C),F=q.description?.toLowerCase().includes(C)??!1;if((O||F)&&(A.push({token:q,domain:wn(q.name),overridden:q.name in e.overrides}),A.length>=40))break}return A})());xa(()=>{t(o),w(n,0)}),xa(()=>{t(l)&&t(l).focus()});function d(C){e.onNavigate(C),e.onClose()}function p(C){if(C.key==="Escape"){C.preventDefault(),e.onClose();return}if(t(c).length===0&&(C.key==="ArrowDown"||C.key==="ArrowUp")){C.preventDefault(),w(n,0);return}if(C.key==="ArrowDown"){C.preventDefault(),w(n,Math.min(t(n)+1,t(c).length-1),!0);return}if(C.key==="ArrowUp"){C.preventDefault(),w(n,Math.max(t(n)-1,0),!0);return}C.key==="Enter"&&t(c)[t(n)]&&(C.preventDefault(),d(t(c)[t(n)].domain))}var m=Vg(),h=s(m),v=s(h),b=r(s(v),2);bo(b,C=>w(l,C),()=>t(l));var k=r(v,2),S=s(k);{var E=C=>{var A=Ng(),q=s(A);_(()=>y(q,`No tokens matching "${t(o)??""}"`)),f(C,A)},I=u(()=>t(o).trim()&&t(c).length===0),P=C=>{var A=Fg();f(C,A)},B=u(()=>!t(o).trim()),H=C=>{var A=zt(),q=ce(A);ae(q,19,()=>t(c),O=>O.token.name,(O,F,M)=>{var J=Hg(),be=s(J),ze=s(be),Me=s(ze),ye=s(Me),ue=r(Me,2);{var X=Y=>{var de=jg();f(Y,de)};L(ue,Y=>{t(F).overridden&&Y(X)})}var ne=r(ze,2);{var _e=Y=>{var de=Gg(),ge=s(de);_(()=>y(ge,t(F).token.description)),f(Y,de)};L(ne,Y=>{t(F).token.description&&Y(_e)})}var Ae=r(be,2),j=s(Ae),G=s(j),Z=r(j,2),se=s(Z);_(()=>{Xe(J,1,`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${t(n)===t(M)?"bg-indigo-500/15":"hover:bg-white/4"}`),y(ye,t(F).token.name),y(G,t(F).overridden?e.overrides[t(F).token.name]:t(F).token.value),y(se,i[t(F).domain]??t(F).domain)}),go("mouseenter",J,()=>{w(n,t(M),!0)}),x("click",J,()=>d(t(F).domain)),f(O,J)}),f(C,A)};L(S,C=>{t(I)?C(E):t(B)?C(P,1):C(H,-1)})}var D=r(k,2);{var R=C=>{var A=qg();f(C,A)};L(D,C=>{t(c).length>0&&C(R)})}x("mousedown",m,C=>{C.target===C.currentTarget&&e.onClose()}),x("keydown",b,p),hr(b,()=>t(o),C=>w(o,C)),f(a,m),ta()}oa(["mousedown","keydown","click"]);var Kg=g(' '),Wg=g(""),Yg=g('
 
 
 
 
 
 
 
  
');function Zg(a,e){ea(e,!0);const o=(fe,T=Ss,Q=Ss,le=Ss)=>{var ke=Wg(),Ce=s(ke);zs(Ce,Q,(W,oe)=>{oe(W,{class:"w-3.5 h-3.5"})});var Ve=r(Ce),Ke=r(Ve);{var U=W=>{var oe=Kg(),Ee=s(oe);_(()=>y(Ee,t(P)>9?"9+":t(P))),f(W,oe)};L(Ke,W=>{T()==="preview"&&t(P)>0&&W(U)})}_(()=>{ee(ke,"aria-pressed",t(b)===T()),Xe(ke,1,`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${t(b)===T()?"text-indigo-300 bg-indigo-500/10":"text-slate-500 hover:text-slate-300"}`),y(Ve,` ${le()??""} `)}),x("click",ke,()=>{w(b,T(),!0)}),f(fe,ke)},n=Ds.tokens??Ds,l={home:"Home",colors:"Colors",typography:"Typography",spacing:"Spacing",layout:"Layout",borders:"Borders",shadows:"Shadows",motion:"Motion",effects:"Effects",macros:"Macros",misc:"Misc",themes:"Themes",wcag:"WCAG",setup:"Install",cheatsheet:"Classes"};function i(fe){const T={};for(const Q of Object.keys(fe)){const le=wn(Q);T[le]=(T[le]??0)+1}return T}const c=su();let d=K(va(qi())),p=K(va([])),m=K(va([])),h=K("home"),v=K(!1),b=K("controls"),k=K("light"),S=K("fluid"),E=K("normal"),I=K("marketing"),P=u(()=>Object.keys(t(d)).length),B=u(()=>i(t(d))),H=u(()=>t(p).length>0),D=u(()=>t(m).length>0);function R(fe,T){const Q=Object.keys(fe);return Q.length!==Object.keys(T).length?!1:Q.every(le=>fe[le]===T[le])}let C=K(va(co(()=>({...t(d)})))),A=K("idle"),q=u(()=>!R(t(d),t(C))),O=null;xa(()=>{Vi(t(d))});function F(fe){const T=t(d),Q=typeof fe=="function"?fe(T):fe;R(T,Q)||(w(p,[...t(p).slice(-49),T],!0),w(m,[],!0),t(A)==="saved"&&w(A,"idle")),w(d,Q,!0)}async function M(){if(!t(q)||t(A)==="saving")return;const fe={...t(d)};w(A,"saving");try{await Ki(t(d)),R(t(d),fe)?(w(C,fe,!0),w(A,"saved"),O&&clearTimeout(O),O=setTimeout(()=>{t(A)==="saved"&&w(A,"idle"),O=null},2e3)):w(A,"idle")}catch(T){console.warn("slashed: save failed",T),w(A,"idle")}}function J(fe,T){F(Q=>({...Q,[fe]:T}))}function be(fe){F(T=>{const Q={...T};return delete Q[fe],Q})}function ze(fe){F(T=>{const Q={...T};for(const[le,ke]of Object.entries(fe))ke===null?delete Q[le]:Q[le]=ke;return Q})}function Me(fe){F({...fe})}function ye(){F({})}function ue(){if(t(p).length===0)return;const fe=t(p)[t(p).length-1],T=t(d);w(p,t(p).slice(0,-1),!0),w(m,[T,...t(m)],!0),w(d,fe,!0)}function X(){if(t(m).length===0)return;const fe=t(m)[0],T=t(d);w(m,t(m).slice(1),!0),w(p,[...t(p),T],!0),w(d,fe,!0)}function ne(){const fe=document.createElement("input");fe.type="file",fe.accept=".css,.json",fe.onchange=T=>{const Q=T.target.files?.[0];if(!Q)return;const le=new FileReader;le.onload=ke=>{const Ce=ke.target?.result;if(Ce)if(Q.name.endsWith(".json"))try{const Ve=JSON.parse(Ce);if(Ve!==null&&typeof Ve=="object"&&!Array.isArray(Ve)){const Ke=Object.fromEntries(Object.entries(Ve).filter(([U,W])=>typeof W=="string"&&/^--sf-[\w-]+$/.test(U)));Object.keys(Ke).length>0&&F(Ke)}}catch{}else{const Ve={},Ke=/(--sf-[\w-]+)\s*:\s*([^;]+);/g;let U;for(;(U=Ke.exec(Ce))!==null;)Ve[U[1].trim()]=U[2].trim();Object.keys(Ve).length>0&&F(W=>({...W,...Ve}))}},le.readAsText(Q)},fe.click()}function _e(){const fe=Ho(t(d),{mode:"layer",banner:!0}),T=new Blob([fe],{type:"text/css"}),Q=URL.createObjectURL(T),le=document.createElement("a");le.href=Q,le.download="slashed-overrides.css",le.click(),URL.revokeObjectURL(Q)}pi(()=>{const fe=T=>{(T.ctrlKey||T.metaKey)&&!T.shiftKey&&T.key==="z"&&(T.preventDefault(),ue()),(T.ctrlKey||T.metaKey)&&(T.shiftKey&&T.key==="z"||T.key==="y")&&(T.preventDefault(),X()),(T.ctrlKey||T.metaKey)&&!T.shiftKey&&T.key.toLowerCase()==="s"&&(T.preventDefault(),M()),(T.ctrlKey||T.metaKey)&&!T.repeat&&T.key.toLowerCase()==="k"&&(T.preventDefault(),w(v,!t(v)))};return window.addEventListener("keydown",fe),()=>{window.removeEventListener("keydown",fe),O&&clearTimeout(O)}});var Ae=Yg(),j=s(Ae);pf(j,{get overridesCount(){return t(P)},get canUndo(){return t(H)},get canRedo(){return t(D)},get hasPendingChanges(){return t(q)},get saveState(){return t(A)},onUndo:ue,onRedo:X,onResetAll:ye,onImport:ne,onExport:_e,onSave:M});var G=r(j,2),Z=s(G);o(Z,()=>"controls",()=>Si,()=>"Controls");var se=r(Z,2);o(se,()=>"preview",()=>Jd,()=>"Preview");var Y=r(G,2),de=s(Y),ge=s(de);Ai(ge,{get activeId(){return t(h)},onSelect:fe=>{w(h,fe,!0)},get overridesByDomain(){return t(B)}});var ve=r(de,2),re=s(ve),Ie=s(re),qe=s(Ie),rt=r(re,2),et=s(rt);ec(et,{get domain(){return t(h)},get tokens(){return n},get overrides(){return t(d)},onSet:J,onReset:be,onBulkChange:ze,onApplyTheme:Me,onSelectDomain:fe=>{w(h,fe,!0)},onResetAll:ye});var tt=r(ve,2),vt=s(tt);yu(vt,{get overrides(){return t(d)},get previewTheme(){return t(k)},get previewWidth(){return t(S)},get previewMotion(){return t(E)},get previewTemplate(){return t(I)},onThemeChange:fe=>{w(k,fe,!0)},onWidthChange:fe=>{w(S,fe,!0)},onMotionChange:fe=>{w(E,fe,!0)},onTemplateChange:fe=>{w(I,fe,!0)}});var gt=r(Y,2);{let fe=u(()=>l[t(h)]??t(h));gf(gt,{get overridesCount(){return t(P)},get domain(){return t(fe)}})}var Ot=r(gt,2);{var _t=fe=>{tc(fe,{get tokens(){return n},get overrides(){return t(d)},onNavigate:T=>{w(h,T,!0)},onClose:()=>{w(v,!1)}})};L(Ot,fe=>{t(v)&&fe(_t)})}_(()=>{Xe(Ae,1,`${c?"w-full h-full":"w-screen h-screen"} flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans`),Xe(de,1,`shrink-0 ${t(b)==="preview"?"hidden md:flex":"flex"}`),Xe(ve,1,`flex-1 min-w-0 md:flex-none md:w-[360px] bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${t(b)==="preview"?"hidden md:flex":"flex"}`),y(qe,l[t(h)]??t(h)),Xe(tt,1,`flex-1 flex-col min-h-0 min-w-0 ${t(b)==="controls"?"hidden md:flex":"flex"}`)}),f(a,Ae),ta()}oa(["click"]);const Tr=document.getElementById("app")??document.getElementById("slashed-admin-app");Tr&&(Tr.innerHTML="",ii(Zg,{target:Tr}));var Xg=g(''),Jg=g(' '),Qg=g(''),$g=g(' 
/
 SLASHED    
    
    
 
 
 
 
 
  
',1);function eb(a,e){ea(e,!0);const o=Ds.tokens??Ds,n="slashed-overlay/open",l="slashed-overlay/domain",i={home:"Home",colors:"Colors",typography:"Typography",spacing:"Spacing",layout:"Layout",borders:"Borders",shadows:"Shadows",motion:"Motion",effects:"Effects",macros:"Macros",misc:"Misc",themes:"Themes",wcag:"WCAG",setup:"Install",cheatsheet:"Classes"};function c(we){const kt={};for(const Tt of Object.keys(we)){const Ze=wn(Tt);kt[Ze]=(kt[Ze]??0)+1}return kt}function d(we,kt){try{const Tt=localStorage.getItem(we);return Tt===null?kt:Tt!=="false"}catch{return kt}}function p(we,kt){try{return localStorage.getItem(we)??kt}catch{return kt}}let m=K(va(d(n,!0))),h=K(va(typeof window<"u"?window.matchMedia("(max-width: 768px)").matches:!1)),v=K(va(qi())),b=K(va([])),k=K(va([])),S=K(va(p(l,"home"))),E=K(!1),I=K(!1),P=K(null),B=K(null);xa(()=>{t(I)&&mr().then(()=>t(P)?.focus())});let H=u(()=>Object.keys(t(v)).length),D=u(()=>c(t(v))),R=u(()=>t(b).length>0),C=u(()=>t(k).length>0);function A(we,kt){const Tt=Object.keys(we);return Tt.length!==Object.keys(kt).length?!1:Tt.every(Ze=>we[Ze]===kt[Ze])}let q=K(va(co(()=>({...t(v)})))),O=K("idle"),F=u(()=>!A(t(v),t(q))),M=null;function J(){const we=document.getElementById("slashed-frontend-overlay");if(!we)return;const kt="var(--wp-admin--admin-bar--height, 32px)";we.style.position="fixed",we.style.right="0",we.style.zIndex="100000",we.style.pointerEvents="auto",t(m)?(we.style.top=kt,we.style.width=t(h)?"100vw":"420px",we.style.height=`calc(100vh - ${kt})`):(we.style.top=`calc(${kt} + 16px)`,we.style.width="40px",we.style.height="64px")}xa(()=>{Vi(t(v)),an(document)}),xa(()=>{!t(h)&&t(m)?document.documentElement.classList.add("sf-panel-active"):document.documentElement.classList.remove("sf-panel-active")}),xa(()=>{J()}),xa(()=>{try{localStorage.setItem(n,String(t(m)))}catch{}}),xa(()=>{try{localStorage.setItem(l,t(S))}catch{}});function be(){w(m,!t(m))}function ze(we){const kt=t(v),Tt=typeof we=="function"?we(kt):we;A(kt,Tt)||(w(b,[...t(b).slice(-49),kt],!0),w(k,[],!0),t(O)==="saved"&&w(O,"idle")),w(v,Tt,!0)}async function Me(){if(!t(F)||t(O)==="saving")return;const we={...t(v)};w(O,"saving");try{await Ki(t(v)),A(t(v),we)?(w(q,we,!0),w(O,"saved"),M&&clearTimeout(M),M=setTimeout(()=>{t(O)==="saved"&&w(O,"idle"),M=null},2e3)):w(O,"idle")}catch(kt){console.warn("slashed: save failed",kt),w(O,"idle")}}function ye(we,kt){ze(Tt=>({...Tt,[we]:kt}))}function ue(we){ze(kt=>{const Tt={...kt};return delete Tt[we],Tt})}function X(we){ze(kt=>{const Tt={...kt};for(const[Ze,It]of Object.entries(we))It===null?delete Tt[Ze]:Tt[Ze]=It;return Tt})}function ne(we){ze({...we})}function _e(){w(I,!0)}function Ae(){w(I,!1),ze({})}function j(){w(I,!1)}function G(){if(!t(b).length)return;const we=t(b)[t(b).length-1];w(k,[t(v),...t(k)],!0),w(b,t(b).slice(0,-1),!0),w(v,we,!0)}function Z(){if(!t(k).length)return;const we=t(k)[0];w(b,[...t(b),t(v)],!0),w(k,t(k).slice(1),!0),w(v,we,!0)}function se(){const we=Ho(t(v),{mode:"layer",banner:!0}),kt=new Blob([we],{type:"text/css"}),Tt=URL.createObjectURL(kt),Ze=document.createElement("a");Ze.href=Tt,Ze.download="slashed-overrides.css",Ze.click(),URL.revokeObjectURL(Tt)}function Y(){const we=document.createElement("input");we.type="file",we.accept=".css,.json",we.onchange=kt=>{const Tt=kt.target.files?.[0];if(!Tt)return;const Ze=new FileReader;Ze.onload=It=>{const ot=It.target?.result;if(ot)if(Tt.name.endsWith(".json"))try{const lt=JSON.parse(ot);if(lt!==null&&typeof lt=="object"&&!Array.isArray(lt)){const qt=Object.fromEntries(Object.entries(lt).filter(([jt,Dt])=>typeof Dt=="string"&&/^--sf-[\w-]+$/.test(jt)));ze(qt)}}catch{}else{const lt={},qt=/(--sf-[\w-]+)\s*:\s*([^;]+);/g;let jt;for(;(jt=qt.exec(ot))!==null;)lt[jt[1].trim()]=jt[2].trim();Object.keys(lt).length&&ze(Dt=>({...Dt,...lt}))}},Ze.readAsText(Tt)},we.click()}pi(()=>{const we=document.createElement("style");we.id="sf-panel-push",we.textContent=["html { transition: padding-right 200ms ease-in-out; }","html.sf-panel-active { padding-right: 420px !important; overflow-x: clip; }"].join(`
+`),document.head.appendChild(we);const kt=window.matchMedia("(max-width: 768px)"),Tt=ot=>{w(h,ot.matches,!0)};kt.addEventListener("change",Tt);const Ze=ot=>{const lt=ot.key.toLowerCase();t(m)&&((ot.ctrlKey||ot.metaKey)&&!ot.shiftKey&<==="z"&&(ot.preventDefault(),G()),(ot.ctrlKey||ot.metaKey)&&(ot.shiftKey&<==="z"||lt==="y")&&(ot.preventDefault(),Z()),(ot.ctrlKey||ot.metaKey)&&!ot.repeat&<==="k"&&(ot.preventDefault(),w(E,!t(E))),(ot.ctrlKey||ot.metaKey)&&!ot.shiftKey&<==="s"&&(ot.preventDefault(),Me()))},It=()=>be();return window.addEventListener("keydown",Ze),document.addEventListener("slashed:toggle-overlay",It),()=>{we.remove(),document.documentElement.classList.remove("sf-panel-active"),kt.removeEventListener("change",Tt),window.removeEventListener("keydown",Ze),document.removeEventListener("slashed:toggle-overlay",It),M&&clearTimeout(M)}});var de=$g(),ge=ce(de);{var ve=we=>{var kt=Xg(),Tt=r(s(kt),2);jn(Tt,{class:"w-3 h-3 opacity-70 rotate-180"}),x("click",kt,be),f(we,kt)};L(ge,we=>{t(m)||we(ve)})}var re=r(ge,2);let Ie,qe;var rt=s(re),et=r(s(rt),4),tt=s(et),vt=r(et,2);{var gt=we=>{var kt=Jg(),Tt=s(kt);_(()=>y(Tt,t(H))),f(we,kt)};L(vt,we=>{t(H)>0&&we(gt)})}var Ot=r(vt,4),_t=s(Ot);{var fe=we=>{bi(we,{class:"w-3 h-3 animate-spin"})},T=we=>{Uo(we,{class:"w-3 h-3"})},Q=we=>{gr(we,{class:"w-3 h-3"})};L(_t,we=>{t(O)==="saving"?we(fe):t(O)==="saved"?we(T,1):we(Q,-1)})}var le=r(Ot,2),ke=s(le);Bi(ke,{class:"w-3 h-3"});var Ce=r(le,2),Ve=s(Ce);_i(Ve,{class:"w-3 h-3"});var Ke=r(Ce,4),U=s(Ke);hi(U,{class:"w-3 h-3"});var W=r(Ke,2),oe=s(W);Xr(oe,{class:"w-3 h-3"});var Ee=r(W,2),Le=s(Ee);bn(Le,{class:"w-3 h-3"});var mt=r(Ee,4),He=s(mt);jn(He,{class:"w-3 h-3"});var dt=r(rt,2),nt=s(dt);Ai(nt,{get activeId(){return t(S)},onSelect:we=>{w(S,we,!0)},get overridesByDomain(){return t(D)}});var ht=r(nt,2),Ne=s(ht),At=s(Ne),Ft=s(At),aa=r(Ne,2),Mt=s(aa);ec(Mt,{get domain(){return t(S)},get tokens(){return o},get overrides(){return t(v)},onSet:ye,onReset:ue,onBulkChange:X,onApplyTheme:ne,onSelectDomain:we=>{w(S,we,!0)},onResetAll:_e});var Rt=r(dt,2);{var na=we=>{tc(we,{get tokens(){return o},get overrides(){return t(v)},onNavigate:kt=>{w(S,kt,!0)},onClose:()=>{w(E,!1)}})};L(Rt,we=>{t(E)&&we(na)})}var da=r(Rt,2);{var fa=we=>{var kt=Qg(),Tt=s(kt),Ze=r(s(Tt),2),It=s(Ze),ot=r(Ze,2),lt=s(ot);bo(lt,jt=>w(P,jt),()=>t(P));var qt=r(lt,2);bo(qt,jt=>w(B,jt),()=>t(B)),_(()=>y(It,`This will clear all ${t(H)??""} customisation${t(H)!==1?"s":""}.
+          You can still undo this before saving.`)),x("keydown",kt,jt=>{jt.key==="Escape"&&(jt.stopPropagation(),j()),jt.key==="Tab"&&(jt.preventDefault(),document.activeElement===t(P)?t(B)?.focus():t(P)?.focus())}),x("click",lt,j),x("click",qt,Ae),f(we,kt)};L(da,we=>{t(I)&&we(fa)})}_(we=>{Ie=Xe(re,1,"fixed right-0 z-[100000] pointer-events-auto flex flex-col bg-[#0a0a0f] text-slate-200 font-sans shadow-2xl shadow-black/60 border-l border-white/8 transition-transform duration-200 ease-in-out",null,Ie,{"translate-x-full":!t(m),"translate-x-0":t(m),"pointer-events-none":!t(m)}),qe=ct(re,`top: var(--wp-admin--admin-bar--height, 32px); width: ${t(h)?"100vw":"420px"}; height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));`,qe,{visibility:t(m)?void 0:"hidden"}),ee(re,"aria-hidden",!t(m)),re.inert=!t(m)||void 0,y(tt,i[t(S)]??t(S)),Ot.disabled=!t(F)||t(O)==="saving",ee(Ot,"title",t(F)?"Save changes (Ctrl+S)":"No unsaved changes"),ee(Ot,"aria-label",t(O)==="saving"?"Saving changes":t(F)?"Save changes":"No unsaved changes"),Xe(Ot,1,we),le.disabled=!t(R),Ce.disabled=!t(C),W.disabled=t(H)===0,Ee.disabled=t(H)===0,y(Ft,i[t(S)]??t(S))},[()=>mo(["p-1 rounded transition-colors cursor-pointer shrink-0 disabled:pointer-events-none",t(O)==="saved"?"text-emerald-300":t(F)?"text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10":"text-slate-500 opacity-40"].join(" "))]),x("click",Ot,Me),x("click",le,G),x("click",Ce,Z),x("click",Ke,Y),x("click",W,se),x("click",Ee,_e),x("click",mt,be),f(a,de),ta()}oa(["click","keydown"]);function vl(){const a=document.getElementById("slashed-frontend-overlay");if(!a||a.shadowRoot)return;const e=a.attachShadow({mode:"open"}),o=document.createElement("div");e.appendChild(o);let n=!1;const l=()=>{n||(ii(eb,{target:o}),n=!0,a.setAttribute("data-slashed-ready",""))},i=window.slashedApp?.cssUrl;if(i){const c=document.createElement("link");c.rel="stylesheet",c.href=i;const d=setTimeout(l,5e3),p=()=>{clearTimeout(d),l()};c.addEventListener("load",p),c.addEventListener("error",p),e.appendChild(c)}else l()}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",vl):vl();
 //# sourceMappingURL=app.js.map