diff --git a/SLASHED-for-WP/admin-app/.vendored-manifest.json b/SLASHED-for-WP/admin-app/.vendored-manifest.json
index aab56124..a30fc678 100644
--- a/SLASHED-for-WP/admin-app/.vendored-manifest.json
+++ b/SLASHED-for-WP/admin-app/.vendored-manifest.json
@@ -4,7 +4,7 @@
     "frameworkRepo": "https://github.com/codeslash-dev/SLASHED",
     "configuratorSrc": "configurator/src/",
     "source": "local",
-    "syncedAt": "2026-07-01T18:41:55.013Z"
+    "syncedAt": "2026-07-02T16:31:02.085Z"
   },
   "vendoredFiles": [
     {
diff --git a/SLASHED-for-WP/admin-app/framework-css/core/layout.css b/SLASHED-for-WP/admin-app/framework-css/core/layout.css
index ef3bbefa..c482b527 100644
--- a/SLASHED-for-WP/admin-app/framework-css/core/layout.css
+++ b/SLASHED-for-WP/admin-app/framework-css/core/layout.css
@@ -1,11 +1,15 @@
 /* SLASHED — core/layout.css
    @layer slashed.layout
    Layout primitives: section, container, stack, cluster, grid, sidebar, switcher, frame.
-   Prefix: .sf-*; local rhythm via --sf-*-gap / sizing tokens. */
+   Prefix: .sf-*; local rhythm via --sf-*-gap / sizing tokens.
+   SL-005: every @container query in this file hardcodes its breakpoint
+   instead of referencing a --sf-* token — var() is not allowed inside an
+   @container condition per the CSS spec. This applies framework-wide to
+   every @container site below; not re-explained at each one. */
 
 @layer slashed.layout {
 
-  
+  /* Section */
   .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); }
@@ -52,6 +56,7 @@
   }
 
   
+  /* Container */
   .sf-container {
     container:      sf-layout / inline-size;
     width:          100%;
@@ -71,6 +76,7 @@
   }
 
   
+  /* Stack & gap */
   .sf-stack {
     display:        flex;
     flex-direction: column;
@@ -96,12 +102,14 @@
   .sf-gap--2xl { gap: var(--sf-space-2xl); }
 
   
+  /* Box */
   .sf-box {
     padding: var(--sf-box-padding);
     outline: var(--sf-box-border-width) solid var(--sf-box-border-color);
   }
 
   
+  /* Center */
   .sf-center {
     box-sizing:      content-box;
     width:           auto;
@@ -117,6 +125,7 @@
   }
 
   
+  /* Cluster */
   .sf-cluster {
     display:         flex;
     flex-wrap:       wrap;
@@ -137,6 +146,7 @@
   .sf-cluster--between  { justify-content: space-between; }
 
   
+  /* Sidebar */
   .sf-sidebar {
     display:   flex;
     flex-wrap: wrap;
@@ -169,6 +179,7 @@
   .sf-sidebar--wide   { --sf-sidebar-width: 26rem; }
 
   
+  /* Switcher */
   .sf-switcher {
     display:   flex;
     flex-wrap: wrap;
@@ -184,6 +195,7 @@
   .sf-switcher--vertical { flex-direction: column; }
 
   
+  /* Grid & icon */
   .sf-grid {
     display:               grid;
     grid-template-columns: repeat(auto-fill, minmax(min(var(--sf-grid-min), 100%), 1fr));
@@ -229,6 +241,7 @@
   }
 
   
+  /* Cover */
   .sf-cover {
     display:        flex;
     flex-direction: column;
@@ -247,6 +260,7 @@
   .sf-cover--padding-l { padding-block: var(--sf-space-4xl); }
 
   
+  /* Frame */
   .sf-frame {
     aspect-ratio:    var(--sf-frame-ratio);
     overflow:        hidden;
@@ -395,7 +409,6 @@
     container: sf-grid / inline-size;
   }
 
-  /* Cannot use var() inside @container per CSS spec — breakpoints hardcoded. */
   @container (min-width: 30em) {
     .sf-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
     .sf-grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
diff --git a/SLASHED-for-WP/admin-app/framework-css/core/themes.css b/SLASHED-for-WP/admin-app/framework-css/core/themes.css
index a0bb707f..8f501eba 100644
--- a/SLASHED-for-WP/admin-app/framework-css/core/themes.css
+++ b/SLASHED-for-WP/admin-app/framework-css/core/themes.css
@@ -58,7 +58,12 @@
 
   /* SECTION-LEVEL THEMING */
   /* light-dark() bakes at :root declaration time; re-declarations on [data-theme]
-     elements are required for section-level theming to work. */
+     elements are required for section-level theming to work.
+     SL-001: the clamp() derivation formula below is the same one used inside
+     tokens.css's "Resolved color tokens — auto-switch via light-dark()"
+     block (search core/tokens.css for that comment) — duplicated here, not
+     shared, because this file needs flat values outside light-dark().
+     Keep both copies in sync if the formula ever changes. */
   @supports (color: oklch(from red l c h)) {
 
         :root {
diff --git a/SLASHED-for-WP/admin-app/framework-css/core/tokens.css b/SLASHED-for-WP/admin-app/framework-css/core/tokens.css
index 4bc09994..35613a14 100644
--- a/SLASHED-for-WP/admin-app/framework-css/core/tokens.css
+++ b/SLASHED-for-WP/admin-app/framework-css/core/tokens.css
@@ -101,14 +101,20 @@
     --sf-color-danger:    var(--sf-color-danger-source-light);
   }
 
-  /* Mode flag — drives formula direction for non-color dark overrides.
-     Set by themes.css via [data-theme="dark"] and the prefers-color-scheme
-     media query. Do not set directly. */
+  /* Mode flag — INTERNAL, not a public hook (SL-003: same "--sf-is-*" naming
+     pattern as the public flags below, opposite contract — read here, don't
+     set). Drives formula direction for non-color dark overrides. Set only by
+     themes.css via [data-theme="dark"] and the prefers-color-scheme media
+     query; every other read site (core/tokens.css, the configurator's power
+     knobs) only reads it inside calc() expressions. Setting it directly
+     desyncs it from color-scheme/[data-theme] and produces an inconsistent
+     theme. */
   @property --sf-is-dark { syntax: "<integer>"; inherits: true; initial-value: 0; }
 
   /* @property — INTERACTION STATE FLAGS */
-  /* Public hooks for Style Queries. Allow components to react to states
-     toggled on ancestors via .is-* classes. */
+  /* PUBLIC hooks for Style Queries — safe to set from consumer code, unlike
+     --sf-is-dark above. Allow components to react to states toggled on
+     ancestors via .is-* classes. */
   @property --sf-is-active  { syntax: "<integer>"; inherits: true; initial-value: 0; }
   @property --sf-is-current { syntax: "<integer>"; inherits: true; initial-value: 0; }
   @property --sf-is-pressed { syntax: "<integer>"; inherits: true; initial-value: 0; }
@@ -366,7 +372,11 @@
          Dark auto-derivation formula (brand + status):
          clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source.
          Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark.
-         Override any --sf-color-X-dark to take full per-mode control. */
+         Override any --sf-color-X-dark to take full per-mode control.
+         SL-001: this same clamp() formula is re-declared flat in themes.css
+         (SECTION-LEVEL THEMING) so [data-theme] overrides on non-:root elements
+         still resolve correctly — light-dark() only bakes at :root. Keep both
+         copies in sync if the formula ever changes. */
       --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(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.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(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.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(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));
diff --git a/SLASHED-for-WP/admin-app/src/App.svelte b/SLASHED-for-WP/admin-app/src/App.svelte
index 6b5d3b7d..9a256f18 100644
--- a/SLASHED-for-WP/admin-app/src/App.svelte
+++ b/SLASHED-for-WP/admin-app/src/App.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
   import { onMount, untrack } from 'svelte';
-  import { SlidersHorizontal, Eye, RotateCcw } from 'lucide-svelte';
-  import type { PreviewTemplate, SlashedToken } from './types';
+  import { SlidersHorizontal, Eye, RotateCcw } from '@lucide/svelte';
+  import type { PreviewTemplate, SlashedToken, ApiIndex } from './types';
   import StudioHeader from './components/shell/StudioHeader.svelte';
   import SidebarNav from './components/shell/SidebarNav.svelte';
   import StatusBar from './components/shell/StatusBar.svelte';
   import PreviewPanel from './components/shell/PreviewPanel.svelte';
   import DomainPanel from './components/DomainPanel.svelte';
-  import { fa } from './lib/codec';
+  import { generateCSS } from './lib/codec';
   import { loadInitialOverrides, injectLivePreview, saveOverrides, hasWpBoot } from './lib/persistence';
   import { domainOf } from './lib/domains';
   import tokensRaw from './data/api-index.generated.json';
   import CommandPalette from './components/CommandPalette.svelte';
 
-  const ALL_TOKENS = ((tokensRaw as any).tokens ?? tokensRaw) as SlashedToken[];
+  const ALL_TOKENS = ((tokensRaw as ApiIndex).tokens ?? tokensRaw) as SlashedToken[];
 
   const DOMAIN_LABELS: Record<string, string> = {
     home: "Home", colors: "Colors", typography: "Typography", spacing: "Spacing",
@@ -79,7 +79,7 @@
 
   // Save state — hasPendingChanges is derived so undo/redo update it automatically.
   let lastSavedOverrides = $state<Record<string, string>>(untrack(() => ({ ...overrides })));
-  let saveState = $state<'idle' | 'saving' | 'saved'>('idle');
+  let saveState = $state<'idle' | 'saving' | 'saved' | 'error'>('idle');
   let hasPendingChanges = $derived(!shallowEq(overrides, lastSavedOverrides));
   let saveStateTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -92,7 +92,7 @@
     if (!shallowEq(prev, next)) {
       past = [...past.slice(-49), prev];
       future = [];
-      if (saveState === 'saved') saveState = 'idle';
+      if (saveState === 'saved' || saveState === 'error') saveState = 'idle';
     }
     overrides = next;
   }
@@ -117,7 +117,7 @@
       }
     } catch (err) {
       console.warn('slashed: save failed', err);
-      saveState = 'idle';
+      saveState = 'error';
     }
   }
 
@@ -219,7 +219,7 @@
   }
 
   function handleExport() {
-    const css = fa(overrides, { mode: "layer", banner: true });
+    const css = generateCSS(overrides, { mode: "layer", banner: true });
     const blob = new Blob([css], { type: "text/css" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
diff --git a/SLASHED-for-WP/admin-app/src/components/DomainPanel.svelte b/SLASHED-for-WP/admin-app/src/components/DomainPanel.svelte
index 8df3e773..2f9d6d3a 100644
--- a/SLASHED-for-WP/admin-app/src/components/DomainPanel.svelte
+++ b/SLASHED-for-WP/admin-app/src/components/DomainPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SlidersHorizontal, List } from 'lucide-svelte';
+  import { SlidersHorizontal, List } from '@lucide/svelte';
   import type { SlashedToken } from '../types';
   import { DOMAIN_PATTERNS, domainOf } from '../lib/domains';
   import HomePanel from './panels/HomePanel.svelte';
diff --git a/SLASHED-for-WP/admin-app/src/components/panels/CheatsheetPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/CheatsheetPanel.svelte
index 3b83f4c1..bff6fee3 100644
--- a/SLASHED-for-WP/admin-app/src/components/panels/CheatsheetPanel.svelte
+++ b/SLASHED-for-WP/admin-app/src/components/panels/CheatsheetPanel.svelte
@@ -5,10 +5,11 @@
 <script lang="ts">
   import classesData from '../../data/classes.generated.json';
   import tokensData from '../../data/api-index.generated.json';
-  import { Copy, Check } from 'lucide-svelte';
+  import { Copy, Check } from '@lucide/svelte';
+  import type { SlashedClass } from '../../types';
 
   const classes = classesData.classes;
-  const tokens = tokensData.tokens.filter((t: any) => t.tier === 'PUBLIC' || t.tier === 'PUBLIC-ADVANCED');
+  const tokens = tokensData.tokens.filter((t) => t.tier === 'PUBLIC' || t.tier === 'PUBLIC-ADVANCED');
 
   let query = $state('');
   let tab = $state<'classes' | 'tokens'>('classes');
@@ -17,7 +18,7 @@
   let filteredClasses = $derived(() => {
     const q = query.trim().toLowerCase();
     if (!q) return classes;
-    return classes.filter((c: any) =>
+    return classes.filter((c: SlashedClass) =>
       c.name.toLowerCase().includes(q) ||
       c.selector?.toLowerCase().includes(q) ||
       c.description?.toLowerCase().includes(q) ||
@@ -28,7 +29,7 @@
   let filteredTokens = $derived(() => {
     const q = query.trim().toLowerCase();
     if (!q) return tokens;
-    return tokens.filter((t: any) =>
+    return tokens.filter((t) =>
       t.name.toLowerCase().includes(q) ||
       t.description?.toLowerCase().includes(q) ||
       t.group?.toLowerCase().includes(q) ||
diff --git a/SLASHED-for-WP/admin-app/src/components/panels/ExportPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/ExportPanel.svelte
index 46d8d1dd..c25ef76a 100644
--- a/SLASHED-for-WP/admin-app/src/components/panels/ExportPanel.svelte
+++ b/SLASHED-for-WP/admin-app/src/components/panels/ExportPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { Check, Copy, Download, Link } from 'lucide-svelte';
-  import { fa, qa } from '../../lib/codec';
+  import { Check, Copy, Download, Link } from '@lucide/svelte';
+  import { generateCSS, buildShareUrl } from '../../lib/codec';
 
   let { overrides }: {
     overrides: Record<string, string>;
@@ -10,7 +10,7 @@
   let copied = $state(false);
   let copiedLink = $state(false);
 
-  let css = $derived(fa(overrides, { mode: outputMode, banner: true }));
+  let css = $derived(generateCSS(overrides, { mode: outputMode, banner: true }));
   let count = $derived(Object.keys(overrides).length);
 
   async function handleCopy() {
@@ -23,7 +23,7 @@
 
   async function handleCopyLink() {
     try {
-      const url = qa(overrides);
+      const url = buildShareUrl(overrides);
       await navigator.clipboard.writeText(url);
       copiedLink = true;
       setTimeout(() => { copiedLink = false; }, 2000);
diff --git a/SLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelte
index 60eda01e..3a695283 100644
--- a/SLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelte
+++ b/SLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelte
@@ -2,7 +2,7 @@
   import {
     Sparkles, Palette, Type, Ruler, Layout, Square, Layers, Zap,
     Puzzle, Blocks, SwatchBook, ShieldCheck, Package, BookOpen, Save,
-  } from 'lucide-svelte';
+  } from '@lucide/svelte';
   import type { SavedSlot } from '../../types';
   import { listSavedThemes, saveTheme } from '../../lib/savedThemes';
 
diff --git a/SLASHED-for-WP/admin-app/src/components/panels/ThemesPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/ThemesPanel.svelte
index f972e078..5c95a3aa 100644
--- a/SLASHED-for-WP/admin-app/src/components/panels/ThemesPanel.svelte
+++ b/SLASHED-for-WP/admin-app/src/components/panels/ThemesPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Save, Trash2, Check } from 'lucide-svelte';
+  import { Save, Trash2, Check } from '@lucide/svelte';
   import type { SavedSlot } from '../../types';
   import { listSavedThemes, saveTheme, deleteTheme } from '../../lib/savedThemes';
 
diff --git a/SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte b/SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte
index 0539f5aa..52645254 100644
--- a/SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte
+++ b/SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { Sun, Moon, Smartphone, Tablet, Monitor, RefreshCw, ExternalLink, Columns2 } from 'lucide-svelte';
+  import { Sun, Moon, Smartphone, Tablet, Monitor, RefreshCw, ExternalLink, Columns2 } from '@lucide/svelte';
   import type { PreviewTemplate } from '../../types';
-  import { fa } from '../../lib/codec';
+  import { generateCSS } from '../../lib/codec';
   import { computeDerivedOverrides } from '../../lib/persistence';
   import { registerPreviewDoc, bumpPreviewVersion } from '../../lib/previewResolver.svelte';
   import { lumlockerPreview } from '../../lib/lumlockerPreview.svelte';
@@ -429,7 +429,7 @@
     template: PreviewTemplate,
     frameworkCSS: string,
   ): string {
-    const css = fa(withDerivedOverrides(ov), { mode: "root", banner: false });
+    const css = generateCSS(withDerivedOverrides(ov), { mode: "root", banner: false });
     const motionCSS =
       motion === "slow"
         ? "*, *::before, *::after { transition-duration: 200% !important; animation-duration: 200% !important; }"
@@ -481,70 +481,108 @@ ${BODIES[template]}
   let htmlLight = $derived(buildIframeHTML({}, "light", previewMotion, previewTemplate, frameworkCSSStatic));
   let htmlDark = $derived(buildIframeHTML({}, "dark", previewMotion, previewTemplate, frameworkCSSStatic));
 
+  // SL-020: the DOM writes below (style/attribute mutation on the iframe
+  // document, plus bumpPreviewVersion()'s resolveCache.clear()) are cheap
+  // individually but these effects re-run on every override tick — e.g. every
+  // input event while dragging a slider, many times per animation frame.
+  // rAF-coalescing collapses a burst of same-frame reruns into a single
+  // apply using the latest captured values ("coalesce to latest"), since only
+  // the frame actually painted to the user matters. The effect body above
+  // this comment still runs synchronously on every change (so Svelte's
+  // dependency tracking is unaffected) — only the DOM-writing work below is
+  // deferred. The `return () => cancelAnimationFrame(rafId)` cleanup fires
+  // before Svelte re-runs this effect (or on unmount), so a still-pending
+  // frame from a superseded run is cancelled before scheduling the next one.
   $effect(() => {
     const _ov = overrides;
     const _theme = previewTheme;
     const _count = loadCount;
     const _lock = lumlockerPreview.value;
 
-    const iframe = iframeEl;
-    if (_count === 0 || !iframe) return;
-    const doc = iframe.contentDocument;
-    if (!doc) return;
+    const rafId = requestAnimationFrame(() => {
+      const iframe = iframeEl;
+      if (_count === 0 || !iframe) return;
+      const doc = iframe.contentDocument;
+      if (!doc) return;
 
-    const styleEl = doc.getElementById("slashed-overrides");
-    if (styleEl) {
-      styleEl.textContent = fa(withDerivedOverrides(_ov), { mode: "root", banner: false });
-    }
+      const styleEl = doc.getElementById("slashed-overrides");
+      if (styleEl) {
+        styleEl.textContent = generateCSS(withDerivedOverrides(_ov), { mode: "root", banner: false });
+      }
+
+      injectFontsIntoDoc(doc, _ov);
 
-    injectFontsIntoDoc(doc, _ov);
+      // Framework activates dark mode via [data-theme="dark"] (color-scheme +
+      // light-dark()), NOT a class — keep this in sync with buildIframeHTML.
+      doc.documentElement.setAttribute("data-theme", _theme);
 
-    // Framework activates dark mode via [data-theme="dark"] (color-scheme +
-    // light-dark()), NOT a class — keep this in sync with buildIframeHTML.
-    doc.documentElement.setAttribute("data-theme", _theme);
+      // Luminance lock preview — mirrors :root[data-lumlocker] in core/themes.css.
+      if (_lock) doc.documentElement.setAttribute("data-lumlocker", "");
+      else doc.documentElement.removeAttribute("data-lumlocker");
 
-    // Luminance lock preview — mirrors :root[data-lumlocker] in core/themes.css.
-    if (_lock) doc.documentElement.setAttribute("data-lumlocker", "");
-    else doc.documentElement.removeAttribute("data-lumlocker");
+      // This single-mode iframe is the canonical resolver source.
+      // registerPreviewDoc() always bumps internally (both its
+      // activeDoc-unchanged early-return and its replace-doc path do), so an
+      // explicit bumpPreviewVersion() here would double-bump/double-clear
+      // resolveCache for no reason.
+      registerPreviewDoc(doc);
+    });
 
-    // This single-mode iframe is the canonical resolver source.
-    registerPreviewDoc(doc);
-    bumpPreviewVersion();
+    return () => cancelAnimationFrame(rafId);
   });
 
   $effect(() => {
+    const _splitMode = splitMode;
     const _ov = overrides;
     const _lightCount = splitLightLoadCount;
     const _darkCount = splitDarkLoadCount;
     const _lock = lumlockerPreview.value;
-    const css = fa(withDerivedOverrides(_ov), { mode: "root", banner: false });
 
-    const applyLock = (doc: Document) => {
-      if (_lock) doc.documentElement.setAttribute("data-lumlocker", "");
-      else doc.documentElement.removeAttribute("data-lumlocker");
-    };
-
-    if (splitLightEl && _lightCount > 0) {
-      const doc = splitLightEl.contentDocument;
-      if (doc) {
-        const styleEl = doc.getElementById("slashed-overrides");
-        if (styleEl) styleEl.textContent = css;
-        injectFontsIntoDoc(doc, _ov);
-        applyLock(doc);
-        // In split mode the light pane is the canonical resolver source.
-        registerPreviewDoc(doc);
+    // Split iframes only exist in the DOM under {#if splitMode} below — skip
+    // scheduling entirely rather than doing per-frame no-op work while the
+    // single-iframe effect above is the one actually driving the preview.
+    if (!_splitMode) return;
+
+    const rafId = requestAnimationFrame(() => {
+      const css = generateCSS(withDerivedOverrides(_ov), { mode: "root", banner: false });
+
+      const applyLock = (doc: Document) => {
+        if (_lock) doc.documentElement.setAttribute("data-lumlocker", "");
+        else doc.documentElement.removeAttribute("data-lumlocker");
+      };
+
+      // registerPreviewDoc() (light pane) already bumps internally; only
+      // bump explicitly when the dark pane was the sole one updated this
+      // frame, so consumers still get notified without double-bumping.
+      let lightApplied = false;
+      let darkApplied = false;
+
+      if (splitLightEl && _lightCount > 0) {
+        const doc = splitLightEl.contentDocument;
+        if (doc) {
+          const styleEl = doc.getElementById("slashed-overrides");
+          if (styleEl) styleEl.textContent = css;
+          injectFontsIntoDoc(doc, _ov);
+          applyLock(doc);
+          // In split mode the light pane is the canonical resolver source.
+          registerPreviewDoc(doc);
+          lightApplied = true;
+        }
       }
-    }
-    if (splitDarkEl && _darkCount > 0) {
-      const doc = splitDarkEl.contentDocument;
-      if (doc) {
-        const styleEl = doc.getElementById("slashed-overrides");
-        if (styleEl) styleEl.textContent = css;
-        injectFontsIntoDoc(doc, _ov);
-        applyLock(doc);
+      if (splitDarkEl && _darkCount > 0) {
+        const doc = splitDarkEl.contentDocument;
+        if (doc) {
+          const styleEl = doc.getElementById("slashed-overrides");
+          if (styleEl) styleEl.textContent = css;
+          injectFontsIntoDoc(doc, _ov);
+          applyLock(doc);
+          darkApplied = true;
+        }
       }
-    }
-    bumpPreviewVersion();
+      if (darkApplied && !lightApplied) bumpPreviewVersion();
+    });
+
+    return () => cancelAnimationFrame(rafId);
   });
 
   let isConstrained = $derived(previewWidth !== "fluid");
diff --git a/SLASHED-for-WP/admin-app/src/components/shell/SidebarNav.svelte b/SLASHED-for-WP/admin-app/src/components/shell/SidebarNav.svelte
index 2cea2cb1..d8a0d872 100644
--- a/SLASHED-for-WP/admin-app/src/components/shell/SidebarNav.svelte
+++ b/SLASHED-for-WP/admin-app/src/components/shell/SidebarNav.svelte
@@ -2,7 +2,7 @@
   import {
     Home, Palette, Type, Ruler, Layout, Square, Layers, Zap, Sparkles, Puzzle,
     Blocks, SwatchBook, ShieldCheck, Package, BookOpen,
-  } from 'lucide-svelte';
+  } from '@lucide/svelte';
 
   let { activeId, onSelect, overridesByDomain = {} }: {
     activeId: string;
diff --git a/SLASHED-for-WP/admin-app/src/components/shell/StudioHeader.svelte b/SLASHED-for-WP/admin-app/src/components/shell/StudioHeader.svelte
index 58b70ac3..8e4ed757 100644
--- a/SLASHED-for-WP/admin-app/src/components/shell/StudioHeader.svelte
+++ b/SLASHED-for-WP/admin-app/src/components/shell/StudioHeader.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { tick } from 'svelte';
-  import { Undo2, Redo2, Trash2, Share2, FolderOpen, Check, Save, Loader2 } from 'lucide-svelte';
+  import { Undo2, Redo2, Trash2, Share2, FolderOpen, Check, Save, Loader2, AlertTriangle } from '@lucide/svelte';
 
   const version = typeof __SLASHED_VERSION__ !== "undefined" ? __SLASHED_VERSION__ : "";
 
@@ -9,7 +9,7 @@
     canUndo: boolean;
     canRedo: boolean;
     hasPendingChanges: boolean;
-    saveState: 'idle' | 'saving' | 'saved';
+    saveState: 'idle' | 'saving' | 'saved' | 'error';
     onUndo: () => void;
     onRedo: () => void;
     onResetAll: () => void;
@@ -86,10 +86,12 @@
     <button
       onclick={onSave}
       disabled={!hasPendingChanges || saveState === 'saving'}
-      title={hasPendingChanges ? "Save changes (Ctrl+S)" : "No unsaved changes"}
+      title={saveState === 'error' ? "Save failed — click to retry" : hasPendingChanges ? "Save changes (Ctrl+S)" : "No unsaved changes"}
       class={[
         "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold transition-colors cursor-pointer",
-        saveState === 'saved'
+        saveState === 'error'
+          ? "bg-red-900/40 border border-red-500/30 text-red-300"
+          : saveState === 'saved'
           ? "bg-emerald-900/40 border border-emerald-500/30 text-emerald-300"
           : hasPendingChanges
             ? "bg-emerald-600 hover:bg-emerald-500 text-white shadow-sm shadow-emerald-600/30"
@@ -102,6 +104,9 @@
       {:else if saveState === 'saved'}
         <Check class="w-3.5 h-3.5" />
         Saved
+      {:else if saveState === 'error'}
+        <AlertTriangle class="w-3.5 h-3.5" />
+        Save failed
       {:else}
         <Save class="w-3.5 h-3.5" />
         Save
diff --git a/SLASHED-for-WP/admin-app/src/lib/codec.ts b/SLASHED-for-WP/admin-app/src/lib/codec.ts
index 02bfc29e..7b08c06e 100644
--- a/SLASHED-for-WP/admin-app/src/lib/codec.ts
+++ b/SLASHED-for-WP/admin-app/src/lib/codec.ts
@@ -5,100 +5,108 @@
 
 import { deflateSync, inflateSync } from "fflate";
 import tokensData from "../data/token-registry.generated.json";
+import type { TokenRegistry, DecodeOptions, ShareOptions } from "../types";
 
 declare const __SLASHED_VERSION__: string;
 
-const Wa = tokensData; // The token id registry — append-only map of name → numeric id
-const Ki: string = typeof __SLASHED_VERSION__ !== "undefined" ? __SLASHED_VERSION__ : "0.0.0";
+const frameworkVersion: string = typeof __SLASHED_VERSION__ !== "undefined" ? __SLASHED_VERSION__ : "0.0.0";
 
-const Na = 65535;
-const Pa = new TextEncoder();
-const Fa = new TextDecoder("utf-8", { fatal: false });
-const Ia = 65535;
+export const CODEC_VERSION = 2;
+export const SHARE_PARAM = "c";
+
+// SL-026: MAX_VALUE_BYTES and MAX_ID happen to share the same value (both
+// bounded by the 2-byte length-prefix / id field in the wire format — see
+// encode()'s payload layout below) but are independent limits for unrelated
+// things (a value's encoded byte length vs. a token's registry id). Don't
+// assume changing one should change the other.
+const MAX_VALUE_BYTES = 65535;
+const MAX_ID = 65535;
+const textEncoder = new TextEncoder();
+const textDecoder = new TextDecoder("utf-8", { fatal: false });
 const MAX_COMPRESSED_BYTES = 32 * 1024;
 const MAX_DECOMPRESSED_BYTES = 256 * 1024;
 
-function La(e: number): boolean {
-  return Number.isInteger(e) && e >= 0 && e <= Ia;
+function isValidId(id: number): boolean {
+  return Number.isInteger(id) && id >= 0 && id <= MAX_ID;
 }
 
-function Ra(e: any): Map<string, number> {
-  const t = new Map<string, number>();
-  for (const n of e?.tokens ?? []) {
-    if (n && !n.removed && typeof n.name === "string" && La(n.id)) {
-      t.set(n.name, n.id);
+function buildNameToIdMap(registry: TokenRegistry): Map<string, number> {
+  const nameToId = new Map<string, number>();
+  for (const entry of registry?.tokens ?? []) {
+    if (entry && !entry.removed && typeof entry.name === "string" && isValidId(entry.id)) {
+      nameToId.set(entry.name, entry.id);
     }
   }
-  return t;
+  return nameToId;
 }
 
-function za(e: any): Map<number, string> {
-  const t = new Map<number, string>();
-  for (const n of e?.tokens ?? []) {
-    if (n && typeof n.name === "string" && Number.isInteger(n.id)) {
-      t.set(n.id, n.name);
+function buildIdToNameMap(registry: TokenRegistry): Map<number, string> {
+  const idToName = new Map<number, string>();
+  for (const entry of registry?.tokens ?? []) {
+    if (entry && typeof entry.name === "string" && Number.isInteger(entry.id)) {
+      idToName.set(entry.id, entry.name);
     }
   }
-  return t;
+  return idToName;
 }
 
-function Ba(e: Uint8Array): string {
-  let t = "";
-  for (let n = 0; n < e.length; n++) {
-    t += String.fromCharCode(e[n]);
+function bytesToBase64Url(bytes: Uint8Array): string {
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
   }
-  return btoa(t)
+  return btoa(binary)
     .replace(/\+/g, "-")
     .replace(/\//g, "_")
     .replace(/=+$/, "");
 }
 
-function Va(e: string): Uint8Array | null {
+function base64UrlToBytes(value: string): Uint8Array | null {
   try {
-    let t = e.replace(/-/g, "+").replace(/_/g, "/");
-    while (t.length % 4) {
-      t += "=";
+    let base64 = value.replace(/-/g, "+").replace(/_/g, "/");
+    while (base64.length % 4) {
+      base64 += "=";
     }
-    const decoded = atob(t);
-    const n = new Uint8Array(decoded.length);
-    for (let t = 0; t < decoded.length; t++) {
-      n[t] = decoded.charCodeAt(t);
+    const decoded = atob(base64);
+    const bytes = new Uint8Array(decoded.length);
+    for (let j = 0; j < decoded.length; j++) {
+      bytes[j] = decoded.charCodeAt(j);
     }
-    return n;
+    return bytes;
   } catch {
     return null;
   }
 }
 
-export function Ha(e: Record<string, string>, t: any = Wa): string {
-  if (!e || typeof e !== "object") return "";
-  const n = Ra(t);
-  const r: { id: number; valueBytes: Uint8Array }[] = [];
+export function encode(overrides: Record<string, string>, registry: TokenRegistry = tokensData): string {
+  if (!overrides || typeof overrides !== "object") return "";
+  const nameToId = buildNameToIdMap(registry);
+  const entries: { id: number; valueBytes: Uint8Array }[] = [];
 
-  for (const [key, val] of Object.entries(e)) {
+  for (const [key, val] of Object.entries(overrides)) {
     if (typeof key !== "string" || typeof val !== "string" || val === "") continue;
-    const id = n.get(key);
+    const id = nameToId.get(key);
     if (id === undefined) continue;
-    const valueBytes = Pa.encode(val);
-    if (valueBytes.length > Na) continue;
-    r.push({ id, valueBytes });
+    const valueBytes = textEncoder.encode(val);
+    if (valueBytes.length > MAX_VALUE_BYTES) continue;
+    entries.push({ id, valueBytes });
   }
 
-  if (r.length === 0) return "";
-  r.sort((a, b) => a.id - b.id);
+  if (entries.length === 0) return "";
+  entries.sort((a, b) => a.id - b.id);
 
   let payloadLen = 0;
-  for (const item of r) payloadLen += 4 + item.valueBytes.length;
+  for (const item of entries) payloadLen += 4 + item.valueBytes.length;
 
   const payload = new Uint8Array(payloadLen);
-  let o = 0;
-  for (const { id, valueBytes } of r) {
-    payload[o++] = (id >> 8) & 255;
-    payload[o++] = id & 255;
-    payload[o++] = (valueBytes.length >> 8) & 255;
-    payload[o++] = valueBytes.length & 255;
-    payload.set(valueBytes, o);
-    o += valueBytes.length;
+  let offset = 0;
+  for (const { id, valueBytes } of entries) {
+    payload[offset++] = (id >> 8) & 255;
+    payload[offset++] = id & 255;
+    payload[offset++] = (valueBytes.length >> 8) & 255;
+    payload[offset++] = valueBytes.length & 255;
+    payload.set(valueBytes, offset);
+    offset += valueBytes.length;
   }
 
   const compressed = deflateSync(payload);
@@ -107,19 +115,19 @@ export function Ha(e: Record<string, string>, t: any = Wa): string {
     return "";
   }
   const out = new Uint8Array(1 + compressed.length);
-  out[0] = 2;
+  out[0] = CODEC_VERSION;
   out.set(compressed, 1);
-  return Ba(out);
+  return bytesToBase64Url(out);
 }
 
-export function Ua(e: string, t: any = Wa, n: any = {}): Record<string, string> {
-  const r = String(e ?? "").trim();
-  if (r === "") return {};
-  const rawBytes = Va(r);
+export function decode(code: string, registry: TokenRegistry = tokensData, options: DecodeOptions = {}): Record<string, string> {
+  const trimmed = String(code ?? "").trim();
+  if (trimmed === "") return {};
+  const rawBytes = base64UrlToBytes(trimmed);
   if (!rawBytes || rawBytes.length === 0) return {};
 
-  if (rawBytes[0] !== 2) {
-    console.warn(`[codec] unknown config-code version ${rawBytes[0]} (expected 2); ignoring.`);
+  if (rawBytes[0] !== CODEC_VERSION) {
+    console.warn(`[codec] unknown config-code version ${rawBytes[0]} (expected ${CODEC_VERSION}); ignoring.`);
     return {};
   }
 
@@ -129,54 +137,54 @@ export function Ua(e: string, t: any = Wa, n: any = {}): Record<string, string>
     return {};
   }
 
-  let i: Uint8Array;
+  let decompressed: Uint8Array;
   try {
-    i = inflateSync(rawBytes.subarray(1));
+    decompressed = inflateSync(rawBytes.subarray(1));
   } catch {
     console.warn("[codec] failed to decompress config; ignoring.");
     return {};
   }
-  if (!i || i.length === 0) return {};
-  if (i.length > MAX_DECOMPRESSED_BYTES) {
-    console.warn(`[codec] decompressed payload too large (${i.length} B > ${MAX_DECOMPRESSED_BYTES} B); ignoring.`);
+  if (!decompressed || decompressed.length === 0) return {};
+  if (decompressed.length > MAX_DECOMPRESSED_BYTES) {
+    console.warn(`[codec] decompressed payload too large (${decompressed.length} B > ${MAX_DECOMPRESSED_BYTES} B); ignoring.`);
     return {};
   }
 
-  const a = za(t);
-  const sanitize = typeof n.sanitize === "function" ? n.sanitize : (val: string) => val;
-  const isKnown = typeof n.isKnown === "function" ? n.isKnown : () => true;
-  const c: Record<string, string> = {};
-  let l = 0;
-  
+  const idToName = buildIdToNameMap(registry);
+  const sanitize = typeof options.sanitize === "function" ? options.sanitize : (val: string) => val;
+  const isKnown = typeof options.isKnown === "function" ? options.isKnown : () => true;
+  const result: Record<string, string> = {};
+  let offset = 0;
+
   try {
-    while (l < i.length) {
-      if (l + 4 > i.length) throw new Error("truncated entry header");
-      const id = (i[l] << 8) | i[l + 1];
-      const valLen = (i[l + 2] << 8) | i[l + 3];
-      l += 4;
-      if (l + valLen > i.length) throw new Error("truncated value");
-      const decodedVal = Fa.decode(i.subarray(l, l + valLen));
-      l += valLen;
-      
-      const tokenName = a.get(id);
+    while (offset < decompressed.length) {
+      if (offset + 4 > decompressed.length) throw new Error("truncated entry header");
+      const id = (decompressed[offset] << 8) | decompressed[offset + 1];
+      const valLen = (decompressed[offset + 2] << 8) | decompressed[offset + 3];
+      offset += 4;
+      if (offset + valLen > decompressed.length) throw new Error("truncated value");
+      const decodedVal = textDecoder.decode(decompressed.subarray(offset, offset + valLen));
+      offset += valLen;
+
+      const tokenName = idToName.get(id);
       if (tokenName === undefined || !isKnown(tokenName)) continue;
       const sanitizedVal = sanitize(decodedVal);
       if (sanitizedVal !== "") {
-        c[tokenName] = sanitizedVal;
+        result[tokenName] = sanitizedVal;
       }
     }
   } catch (err: any) {
     console.warn(`[codec] malformed config code; ignoring (${err.message}).`);
     return {};
   }
-  
-  return c;
+
+  return result;
 }
 
-export function da(e: string | null | undefined): string {
-  return e == null
+export function sanitizeValue(value: string | null | undefined): string {
+  return value == null
     ? ""
-    : String(e)
+    : String(value)
         .replace(/\/\*[\s\S]*?\*\//g, " ")
         .replace(/[;{}]/g, " ")
         .replace(/[/*]{2,}/g, " ")
@@ -184,48 +192,48 @@ export function da(e: string | null | undefined): string {
         .trim();
 }
 
-export function fa(e: Record<string, string>, t: { mode?: "layer" | "root"; banner?: boolean } = {}): string {
-  const { mode = "layer", banner = true } = t;
+export function generateCSS(overrides: Record<string, string>, options: { mode?: "layer" | "root"; banner?: boolean } = {}): string {
+  const { mode = "layer", banner = true } = options;
   // Keys land here from several untrusted-ish entry points (imported JSON,
   // shared URL hash, localStorage, WP hydration) — unlike values, they were
   // never sanitized before being interpolated into the emitted CSS, so a
   // crafted key could break out of its declaration. Every real token name
   // (source or derived) is --sf-<word-chars/hyphens>; anything else is dropped.
-  const i = Object.keys(e).filter((key) => /^--sf-[\w-]+$/.test(key)).sort((a, b) => a.localeCompare(b));
-  if (i.length === 0) return "";
-  
-  const a = i.map((key) => `${key}: ${da(e[key])};`);
-  const o = mode === "layer" ? "\t\t" : "\t";
-  const s = a.map((val) => `${o}${val}`).join("\n");
-  let c = "";
-  
+  const keys = Object.keys(overrides).filter((key) => /^--sf-[\w-]+$/.test(key)).sort((a, b) => a.localeCompare(b));
+  if (keys.length === 0) return "";
+
+  const lines = keys.map((key) => `${key}: ${sanitizeValue(overrides[key])};`);
+  const indent = mode === "layer" ? "\t\t" : "\t";
+  const body = lines.map((val) => `${indent}${val}`).join("\n");
+  let output = "";
+
   if (banner) {
-    c += `/* SLASHED override tokens v${Ki} — generated by the SLASHED configurator.\n   Load this AFTER the SLASHED stylesheet. ${i.length} token${i.length === 1 ? "" : "s"} customised. */\n`;
+    output += `/* SLASHED override tokens v${frameworkVersion} — generated by the SLASHED configurator.\n   Load this AFTER the SLASHED stylesheet. ${keys.length} token${keys.length === 1 ? "" : "s"} customised. */\n`;
   }
-  
+
   return mode === "layer"
-    ? `${c}@layer slashed.overrides {\n\t:root {\n${s}\n\t}\n}\n`
-    : `${c}:root {\n${s}\n}\n`;
+    ? `${output}@layer slashed.overrides {\n\t:root {\n${body}\n\t}\n}\n`
+    : `${output}:root {\n${body}\n}\n`;
 }
 
-export function pa(e: string): Record<string, string> {
-  const t: Record<string, string> = {};
-  if (!e) return t;
-  const n = e.replace(/\/\*[\s\S]*?\*\//g, "");
-  const r = /(--sf-[\w-]+)\s*:/g;
-  let i;
-  
-  while ((i = r.exec(n)) !== null) {
-    const key = i[1];
-    let index = i.index + i[0].length;
+export function parseCSS(css: string): Record<string, string> {
+  const result: Record<string, string> = {};
+  if (!css) return result;
+  const stripped = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  const declarationRe = /(--sf-[\w-]+)\s*:/g;
+  let match;
+
+  while ((match = declarationRe.exec(stripped)) !== null) {
+    const key = match[1];
+    let index = match.index + match[0].length;
     let parenCount = 0;
     let quoteChar = "";
     let accumulatedValue = "";
-    
-    for (; index < n.length; index++) {
-      const char = n[index];
+
+    for (; index < stripped.length; index++) {
+      const char = stripped[index];
       if (quoteChar) {
-        if (char === quoteChar && n[index - 1] !== "\\") {
+        if (char === quoteChar && stripped[index - 1] !== "\\") {
           quoteChar = "";
         }
       } else if (char === '"' || char === "'") {
@@ -239,54 +247,44 @@ export function pa(e: string): Record<string, string> {
       }
       accumulatedValue += char;
     }
-    
+
     const trimmedVal = accumulatedValue.replace(/\s+/g, " ").trim();
     if (trimmedVal !== "") {
-      t[key] = trimmedVal;
+      result[key] = trimmedVal;
     }
-    r.lastIndex = index;
+    declarationRe.lastIndex = index;
   }
-  
-  return t;
+
+  return result;
 }
 
-export function Ga(e: Record<string, string>): string {
-  return Ha(e, Wa);
+export function encodeOverrides(overrides: Record<string, string>): string {
+  return encode(overrides, tokensData);
 }
 
-export function Ka(e: string, t: any = {}): Record<string, string> {
-  const knownTokensSet = new Set(Wa.tokens.map((tok: any) => tok.name));
-  const isKnown = t.isKnown ?? ((name: string) => knownTokensSet.has(name));
-  let r = String(e ?? "").trim();
-  const i = r.match(/[#&]?c=([^&]+)/);
-  if (i) {
-    r = i[1];
+const SHARE_PARAM_RE = new RegExp(`[#&]?${SHARE_PARAM}=([^&]+)`);
+
+export function readShareFromHash(hashOrParam: string, options: ShareOptions = {}): Record<string, string> {
+  const knownTokensSet = new Set(tokensData.tokens.map((tok) => tok.name));
+  const isKnown = options.isKnown ?? ((name: string) => knownTokensSet.has(name));
+  let trimmed = String(hashOrParam ?? "").trim();
+  const match = trimmed.match(SHARE_PARAM_RE);
+  if (match) {
+    trimmed = match[1];
   }
-  return Ua(r, Wa, { sanitize: da, isKnown });
+  return decode(trimmed, tokensData, { sanitize: sanitizeValue, isKnown });
 }
 
-export function qa(e: Record<string, string>, t?: string): string {
+export function buildShareUrl(overrides: Record<string, string>, baseUrlOverride?: string): string {
   const fallbackUrl = typeof window !== "undefined" ? window.location.href : "https://example.com/";
-  const baseUrl = t ?? fallbackUrl;
-  const r = new URL(baseUrl);
-  const code = Ga(e);
-  r.hash = code ? `c=${code}` : "";
-  return r.toString();
+  const baseUrl = baseUrlOverride ?? fallbackUrl;
+  const url = new URL(baseUrl);
+  const code = encodeOverrides(overrides);
+  url.hash = code ? `${SHARE_PARAM}=${code}` : "";
+  return url.toString();
 }
 
-export function Ja(e: string, t: any = {}): Record<string, string> {
-  const n = String(e ?? "");
-  return n.includes("c=") ? Ka(n, t) : {};
+export function readShareFromHashIfPresent(hash: string, options: ShareOptions = {}): Record<string, string> {
+  const value = String(hash ?? "");
+  return value.includes(`${SHARE_PARAM}=`) ? readShareFromHash(value, options) : {};
 }
-
-// Named aliases for tests and external consumers
-export const encode = Ha;
-export const decode = Ua;
-export const sanitizeValue = da;
-export const generateCSS = fa;
-export const parseCSS = pa;
-export const encodeOverrides = Ga;
-export const buildShareUrl = qa;
-export const readShareFromHash = Ka;
-export const CODEC_VERSION = 2;
-export const SHARE_PARAM = "c";
diff --git a/SLASHED-for-WP/admin-app/src/lib/persistence.ts b/SLASHED-for-WP/admin-app/src/lib/persistence.ts
index ea5e2c16..3e2fd72b 100644
--- a/SLASHED-for-WP/admin-app/src/lib/persistence.ts
+++ b/SLASHED-for-WP/admin-app/src/lib/persistence.ts
@@ -13,7 +13,8 @@
  * In every mode a live `<style id="sf-parent-overrides">` is injected so the
  * chrome + preview reflect the current overrides immediately.
  */
-import { Ja, Ga, fa } from "./codec";
+import { readShareFromHashIfPresent, encodeOverrides, generateCSS } from "./codec";
+import { isStringRecord } from "./savedThemes";
 
 const LS_KEY = "slashed-studio/overrides/v2";
 
@@ -212,11 +213,14 @@ export function loadInitialOverrides(): Record<string, string> {
   // Standalone: URL hash (shareable config) takes priority over localStorage.
   const hash = window.location.hash;
   if (hash?.includes("c=")) {
-    try { return Ja(hash); } catch { /* fall through */ }
+    try { return readShareFromHashIfPresent(hash); } catch { /* fall through */ }
   }
   const local = localStorage.getItem(LS_KEY);
   if (local) {
-    try { return JSON.parse(local); } catch { /* fall through */ }
+    try {
+      const parsed: unknown = JSON.parse(local);
+      if (isStringRecord(parsed)) return parsed;
+    } catch { /* fall through */ }
   }
   return {};
 }
@@ -235,7 +239,7 @@ export function injectLivePreview(ov: Record<string, string>): void {
   const reduceMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
   const derived = computeDerivedOverrides(ov, { reduceMotion });
   const preview = Object.keys(derived).length > 0 ? { ...derived, ...ov } : ov;
-  styleEl.textContent = fa(preview, { mode: "root", banner: false });
+  styleEl.textContent = generateCSS(preview, { mode: "root", banner: false });
 }
 
 async function wpSave(rest: { url?: string; nonce?: string }, ov: Record<string, string>): Promise<void> {
@@ -259,7 +263,7 @@ async function wpSave(rest: { url?: string; nonce?: string }, ov: Record<string,
 
 function saveStandalone(ov: Record<string, string>): void {
   try { localStorage.setItem(LS_KEY, JSON.stringify(ov)); } catch { /* quota */ }
-  const code = Ga(ov);
+  const code = encodeOverrides(ov);
   const nextHash = code ? `c=${code}` : "";
   if (window.location.hash.replace("#", "") !== nextHash) {
     window.location.hash = nextHash;
diff --git a/SLASHED-for-WP/admin-app/src/lib/previewResolver.svelte.ts b/SLASHED-for-WP/admin-app/src/lib/previewResolver.svelte.ts
index 819eb0ec..c55066c7 100644
--- a/SLASHED-for-WP/admin-app/src/lib/previewResolver.svelte.ts
+++ b/SLASHED-for-WP/admin-app/src/lib/previewResolver.svelte.ts
@@ -34,6 +34,14 @@ let probeDarkEl: HTMLElement | null = null;
 // function is a pure write with no reactive read, so clearing here can't cause loops.
 const resolveCache = new Map<string, string>();
 
+// SL-025: deliberately module-level (not created inside a component/store
+// factory). Every panel across the whole tree resolves colors against the
+// *same* single preview iframe registered via registerPreviewDoc(), so there
+// is exactly one meaningful "preview version" for the app to share — scoping
+// this to a component would just mean re-deriving/passing it down everywhere
+// for no benefit. Wrapped in an object (`.value`) because `$state` on a bare
+// module-level primitive isn't itself reactive outside a component context;
+// consumers read `previewVersion.value`, never reassign `previewVersion`.
 /** Reactive version counter — Svelte runes pick this up via `.value`. */
 export const previewVersion = $state({ value: 0 });
 
diff --git a/SLASHED-for-WP/admin-app/src/lib/savedThemes.ts b/SLASHED-for-WP/admin-app/src/lib/savedThemes.ts
index 364f8026..cb765ef3 100644
--- a/SLASHED-for-WP/admin-app/src/lib/savedThemes.ts
+++ b/SLASHED-for-WP/admin-app/src/lib/savedThemes.ts
@@ -10,7 +10,7 @@ import type { SavedSlot } from "../types";
 
 const LS_KEY = "slashed-studio/themes/v1";
 
-function isStringRecord(value: unknown): value is Record<string, string> {
+export function isStringRecord(value: unknown): value is Record<string, string> {
   return !!value
     && typeof value === "object"
     && !Array.isArray(value)
diff --git a/SLASHED-for-WP/admin-app/src/types.ts b/SLASHED-for-WP/admin-app/src/types.ts
index 7d18d08c..8f576474 100644
--- a/SLASHED-for-WP/admin-app/src/types.ts
+++ b/SLASHED-for-WP/admin-app/src/types.ts
@@ -19,6 +19,68 @@ export interface SlashedToken {
   syntax?: string | null;
 }
 
+// SL-017/024: types for the two consumed-generated-JSON shapes and codec.ts's
+// options objects, replacing `any` at their 7 call sites.
+
+/** A token entry as it appears in data/api-index.generated.json's `tokens` array. */
+export interface ApiIndexToken extends SlashedToken {
+  fallbackOnly?: boolean;
+  optional?: boolean;
+  layer?: string | null;
+  bundles?: string[];
+}
+
+/** Shape of data/api-index.generated.json (configurator/scripts/sync-api.mjs's output). */
+export interface ApiIndex {
+  _sync?: Record<string, unknown>;
+  tokens: ApiIndexToken[];
+}
+
+/** A class entry as it appears in data/classes.generated.json's `classes` array. */
+export interface SlashedClass {
+  name: string;
+  selector: string;
+  kind: string;
+  category: string;
+  group?: string;
+  description?: string;
+  optional?: boolean;
+  layer?: string | null;
+}
+
+/** Shape of data/classes.generated.json (configurator/scripts/sync-api.mjs's output). */
+export interface ClassIndex {
+  _sync?: Record<string, unknown>;
+  classes: SlashedClass[];
+}
+
+/** A registry entry as it appears in data/token-registry.generated.json's `tokens` array. */
+export interface TokenRegistryEntry {
+  id: number;
+  name: string;
+  removed?: boolean;
+}
+
+/** Shape of data/token-registry.generated.json, consumed by codec.ts's encode/decode. */
+export interface TokenRegistry {
+  _meta?: Record<string, unknown>;
+  tokens: TokenRegistryEntry[];
+}
+
+/** Options accepted by codec.ts's decode(). */
+export interface DecodeOptions {
+  sanitize?: (value: string) => string;
+  isKnown?: (tokenName: string) => boolean;
+}
+
+/**
+ * Options accepted by codec.ts's readShareFromHash() / readShareFromHashIfPresent().
+ * Deliberately omits `sanitize` (unlike DecodeOptions): these are the public
+ * share-link entry points and always force sanitizeValue as a CSS-injection
+ * safeguard, so a caller-supplied sanitize is never honoured.
+ */
+export type ShareOptions = Pick<DecodeOptions, "isKnown">;
+
 export interface SlashedCategory {
   id: string;
   label: string;
diff --git a/SLASHED-for-WP/assets/admin-app/app.css b/SLASHED-for-WP/assets/admin-app/app.css
index 6eae0efd..6e30b738 100644
--- a/SLASHED-for-WP/assets/admin-app/app.css
+++ b/SLASHED-for-WP/assets/admin-app/app.css
@@ -1,3 +1,3 @@
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after{--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}::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:#ff8b1a;--color-amber-300:#ffd236;--color-amber-400:#fcbb00;--color-amber-500:#f99c00;--color-amber-600:#dd7400;--color-emerald-200:#a4f4cf;--color-emerald-300:#5ee9b5;--color-emerald-400:#00d294;--color-emerald-500:#00bb7f;--color-emerald-600:#009767;--color-emerald-900:#004e3b;--color-teal-400:#00d3bd;--color-sky-400:#00bcfe;--color-blue-500:#3080ff;--color-indigo-200:#c7d2ff;--color-indigo-300:#a4b3ff;--color-indigo-400:#7d87ff;--color-indigo-500:#625fff;--color-indigo-600:#4f39f6;--color-violet-400:#a685ff;--color-purple-500:#ac4bff;--color-purple-600:#9810fa;--color-pink-400:#fb64b6;--color-rose-300:#ffa2ae;--color-rose-400:#ff667f;--color-rose-500:#ff2357;--color-rose-600:#e70044;--color-rose-800:#a30037;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cad5e2;--color-slate-400:#90a1b9;--color-slate-500:#62748e;--color-slate-600:#45556c;--color-slate-700:#314158;--color-slate-800:#1d293d;--color-slate-900:#0f172b;--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)}@supports (color:lab(0% 0 0)){:root,:host{--color-orange-400:lab(70.0429% 42.5156 75.8207);--color-amber-300:lab(86.4156% 6.13147 78.3961);--color-amber-400:lab(80.1641% 16.6016 99.2089);--color-amber-500:lab(72.7183% 31.8672 97.9407);--color-amber-600:lab(60.3514% 40.5624 87.1228);--color-emerald-200:lab(90.2247% -31.039 9.47084);--color-emerald-300:lab(83.9203% -48.7124 13.8849);--color-emerald-400:lab(75.0771% -60.7313 19.4147);--color-emerald-500:lab(66.9756% -58.27 19.5419);--color-emerald-600:lab(55.0481% -49.9246 15.93);--color-emerald-900:lab(28.8637% -26.9249 5.45986);--color-teal-400:lab(76.0109% -53.3483 -2.27906);--color-sky-400:lab(70.687% -23.6078 -45.9483);--color-blue-500:lab(54.1736% 13.3369 -74.6839);--color-indigo-200:lab(84.4329% 3.18977 -23.9688);--color-indigo-300:lab(74.0235% 8.54138 -41.6075);--color-indigo-400:lab(59.866% 22.4834 -64.4485);--color-indigo-500:lab(48.295% 38.3129 -81.9673);--color-indigo-600:lab(38.4009% 52.6132 -92.3857);--color-violet-400:lab(62.8239% 34.9159 -60.0512);--color-purple-500:lab(52.0183% 66.11 -78.2316);--color-purple-600:lab(43.0295% 75.21 -86.5669);--color-pink-400:lab(64.5597% 64.3615 -12.7988);--color-rose-300:lab(76.6339% 38.3549 9.68835);--color-rose-400:lab(64.4125% 63.0291 19.2068);--color-rose-500:lab(56.101% 79.4328 31.4532);--color-rose-600:lab(49.1882% 81.577 36.0311);--color-rose-800:lab(34.6481% 60.802 20.1957);--color-slate-100:lab(96.286% -.852436 -2.46847);--color-slate-200:lab(91.7353% -.998765 -4.76968);--color-slate-300:lab(84.7652% -1.94535 -7.93337);--color-slate-400:lab(65.5349% -2.25151 -14.5072);--color-slate-500:lab(48.0876% -2.03595 -16.5814);--color-slate-600:lab(35.5623% -1.74978 -15.4316);--color-slate-700:lab(26.9569% -1.47016 -15.6993);--color-slate-800:lab(16.132% -.318035 -14.6672);--color-slate-900:lab(7.78673% 1.82345 -15.0537)}}}@layer base{*,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.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-\[100\]{z-index:100}.z-\[99998\]{z-index:99998}.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:calc(calc(1 / 2 * 100%) * -1);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-nowrap{flex-wrap:nowrap}.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}}}@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:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-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:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}.clampRange.svelte-iy59wr{appearance:none;pointer-events:none;background:0 0;margin:0}.clampRange.svelte-iy59wr::-webkit-slider-thumb{appearance:none;cursor:pointer;pointer-events:auto;background:0 0;border-radius:9999px;width:16px;height:16px}.clampRange.svelte-iy59wr::-moz-range-thumb{cursor:pointer;pointer-events:auto;background:0 0;border:0;border-radius:9999px;width:16px;height:16px}.clampRange.svelte-iy59wr::-moz-range-track{background:0 0}@layer slashed.tokens{@property --sf-color-primary-source-light{syntax:"<color>";inherits:true;initial-value:oklch(47% .27 264)}@property --sf-color-secondary-source-light{syntax:"<color>";inherits:true;initial-value:oklch(22% .04 264)}@property --sf-color-tertiary-source-light{syntax:"<color>";inherits:true;initial-value:oklch(42% .22 295)}@property --sf-color-action-source-light{syntax:"<color>";inherits:true;initial-value:oklch(50% .22 235)}@property --sf-color-neutral-source-light{syntax:"<color>";inherits:true;initial-value:oklch(52% .025 260)}@property --sf-color-base-source-light{syntax:"<color>";inherits:true;initial-value:oklch(96% .006 250)}@property --sf-color-success-source-light{syntax:"<color>";inherits:true;initial-value:oklch(50% .16 145)}@property --sf-color-warning-source-light{syntax:"<color>";inherits:true;initial-value:oklch(75% .17 80)}@property --sf-color-info-source-light{syntax:"<color>";inherits:true;initial-value:oklch(48% .18 235)}@property --sf-color-danger-source-light{syntax:"<color>";inherits:true;initial-value:oklch(48% .22 12)}:root{--sf-color-primary-source-light:#0137ee;--sf-color-secondary-source-light:#111a2d;--sf-color-tertiary-source-light:#5c10b4;--sf-color-action-source-light:#006c98;--sf-color-neutral-source-light:#616978;--sf-color-base-source-light:#eff2f6;--sf-color-success-source-light:#00791d;--sf-color-warning-source-light:#e2a000;--sf-color-info-source-light:#006693;--sf-color-danger-source-light:#af0040}@supports (color:lab(0% 0 0)){:root{--sf-color-primary-source-light:lab(33.7875% 46.3905 -95.4963);--sf-color-secondary-source-light:lab(9.22675% 1.07623 -14.3482);--sf-color-tertiary-source-light:lab(28.2584% 55.0822 -70.9314);--sf-color-action-source-light:lab(41.335% -12.4269 -63.6346);--sf-color-neutral-source-light:lab(44.2238% -1.00827 -9.19603);--sf-color-base-source-light:lab(95.3554% -.662148 -2.14612);--sf-color-success-source-light:lab(43.8665% -45.1423 39.6128);--sf-color-warning-source-light:lab(70.9465% 19.2186 87.3143);--sf-color-info-source-light:lab(39.3159% -14.401 -52.2544);--sf-color-danger-source-light:lab(37.1443% 71.0626 21.0806)}}@property --sf-color-primary-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(71.5% .243 264)}@property --sf-color-secondary-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(84% .036 264)}@property --sf-color-tertiary-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(74% .198 295)}@property --sf-color-action-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(70% .198 235)}@property --sf-color-neutral-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(69% .0225 260)}@property --sf-color-base-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(22% .003 250)}@property --sf-color-success-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(70% .144 145)}@property --sf-color-warning-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(65% .153 80)}@property --sf-color-info-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(71% .162 235)}@property --sf-color-danger-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(71% .198 12)}@property --sf-color-primary{syntax:"<color>";inherits:true;initial-value:oklch(47% .27 264)}@property --sf-color-secondary{syntax:"<color>";inherits:true;initial-value:oklch(22% .04 264)}@property --sf-color-tertiary{syntax:"<color>";inherits:true;initial-value:oklch(42% .22 295)}@property --sf-color-action{syntax:"<color>";inherits:true;initial-value:oklch(50% .22 235)}@property --sf-color-neutral{syntax:"<color>";inherits:true;initial-value:oklch(52% .025 260)}@property --sf-color-base{syntax:"<color>";inherits:true;initial-value:oklch(96% .006 250)}@property --sf-color-success{syntax:"<color>";inherits:true;initial-value:oklch(50% .16 145)}@property --sf-color-warning{syntax:"<color>";inherits:true;initial-value:oklch(75% .17 80)}@property --sf-color-info{syntax:"<color>";inherits:true;initial-value:oklch(48% .18 235)}@property --sf-color-danger{syntax:"<color>";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:"<integer>";inherits:true;initial-value:0}@property --sf-is-active{syntax:"<integer>";inherits:true;initial-value:0}@property --sf-is-current{syntax:"<integer>";inherits:true;initial-value:0}@property --sf-is-pressed{syntax:"<integer>";inherits:true;initial-value:0}@property --sf-is-open{syntax:"<integer>";inherits:true;initial-value:0}@property --sf-fluid-min-vw{syntax:"<number>";inherits:true;initial-value:22.5}@property --sf-fluid-max-vw{syntax:"<number>";inherits:true;initial-value:90}@property --sf-text-ratio-min{syntax:"<number>";inherits:true;initial-value:1.25}@property --sf-text-ratio-max{syntax:"<number>";inherits:true;initial-value:1.333}@property --sf-text-base-min{syntax:"<number>";inherits:true;initial-value:1}@property --sf-text-base-max{syntax:"<number>";inherits:true;initial-value:1.25}@property --sf-text-display-base-min{syntax:"<number>";inherits:true;initial-value:2.4}@property --sf-text-display-base-max{syntax:"<number>";inherits:true;initial-value:3}@property --sf-space-ratio-min{syntax:"<number>";inherits:true;initial-value:1.25}@property --sf-space-ratio-max{syntax:"<number>";inherits:true;initial-value:1.333}@property --sf-space-base-min{syntax:"<number>";inherits:true;initial-value:1}@property --sf-space-base-max{syntax:"<number>";inherits:true;initial-value:2}@property --sf-radius-none{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-2xs{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-xs{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-s{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-m{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-l{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-2xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-3xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-4xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-full{syntax:"<length>";inherits:true;initial-value:9999px}@property --sf-radius-pill{syntax:"<length>";inherits:true;initial-value:9999px}@property --sf-radius-outer{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-none{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-px{syntax:"<length>";inherits:true;initial-value:1px}@property --sf-space-2xs{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-xs{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-s{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-m{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-l{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-2xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-3xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-4xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-gap{syntax:"<length>";inherits:true;initial-value:0}@property --sf-content-gap{syntax:"<length>";inherits:true;initial-value:0}@property --sf-gutter{syntax:"<length>";inherits:true;initial-value:0}@property --sf-component-pad{syntax:"<length>";inherits:true;initial-value:0}@property --sf-field-block{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--xs{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--s{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--m{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--l{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--2xl{syntax:"<length>";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;--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:#eee;--sf-color-text--on-secondary:#eee;--sf-color-text--on-tertiary:#eee;--sf-color-text--on-action:#eee;--sf-color-text--on-neutral:#eee;--sf-color-text--on-success:#eee;--sf-color-text--on-warning:#030303;--sf-color-text--on-info:#eee;--sf-color-text--on-danger:#eee;--sf-color-text--on-inverse:#eee;--sf-color-code-text:#030303;--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:#00000080;--sf-color-white:#fff;--sf-color-black:#000;--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:lab(0% 0 0)){:root{--sf-color-text--on-primary:lab(94.2% 0 0);--sf-color-text--on-secondary:lab(94.2% 0 0);--sf-color-text--on-tertiary:lab(94.2% 0 0);--sf-color-text--on-action:lab(94.2% 0 0);--sf-color-text--on-neutral:lab(94.2% 0 0);--sf-color-text--on-success:lab(94.2% 0 0);--sf-color-text--on-warning:lab(.903296% 0 0);--sf-color-text--on-info:lab(94.2% 0 0);--sf-color-text--on-danger:lab(94.2% 0 0);--sf-color-text--on-inverse:lab(94.2% 0 0);--sf-color-code-text:lab(.903296% 0 0);--sf-color-dim:lab(0% 0 0/.5);--sf-color-white:lab(100% 0 0);--sf-color-black:lab(0% 0 0)}}@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 * .5), .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 * .5), .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 * .5), .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 * .5), .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 * .5), .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 * .5) 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 * .5), .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 * .5), .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 * .5), .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 * .5), .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:0s;--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(.225s * var(--sf-motion-scale));--sf-animation-delay-4:calc(.3s * var(--sf-motion-scale));--sf-animation-delay-5:calc(.375s * 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;--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);--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:#0000008c;--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 #0009}@supports (color:lab(0% 0 0)){:root{--sf-scrim-color:lab(0% 0 0/.55);--sf-scrim-text-shadow:0 1px 3px lab(0% 0 0/.6)}}}@layer slashed.reset,slashed.base,slashed.forms;@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{block-size:var(--sf-divider-width);background:linear-gradient(to right, transparent, var(--sf-divider-color), transparent);border:none}.sf-container{width:100%;max-width:var(--sf-container-default);padding-inline:var(--sf-gutter);margin-inline:auto;container:sf-layout/inline-size}.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{gap:var(--sf-stack-gap);flex-direction:column;display:flex}.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;max-inline-size:var(--sf-center-max);padding-inline:var(--sf-center-gutter);margin-inline:auto}.sf-center--intrinsic{flex-direction:column;align-items:center;display:flex}.sf-cluster{gap:var(--sf-cluster-gap);align-items:var(--sf-cluster-align);justify-content:var(--sf-cluster-justify);flex-wrap:wrap;display:flex}.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{gap:var(--sf-sidebar-gap);flex-wrap:wrap;display:flex}.sf-sidebar>:first-child{flex-basis:var(--sf-sidebar-width);flex-grow:1}.sf-sidebar>:last-child,.sf-sidebar--right>:first-child{min-inline-size:var(--sf-sidebar-min-width);flex-grow:999;flex-basis:0}.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{gap:var(--sf-switcher-gap);flex-wrap:wrap;display:flex}.sf-switcher>*{flex-grow:1;flex-basis:calc((var(--sf-switcher-threshold) - 100%) * 999)}.sf-switcher--no-wrap{overflow-inline:auto;flex-wrap:nowrap;overflow-x:auto}.sf-switcher--vertical{flex-direction:column}.sf-grid{grid-template-columns:repeat(auto-fill, minmax(min(var(--sf-grid-min), 100%), 1fr));gap:var(--sf-grid-gap);display:grid}.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{inline-size:var(--sf-icon-size,var(--sf-icon-m));block-size:var(--sf-icon-size,var(--sf-icon-m));vertical-align:text-bottom;fill:currentColor;flex-shrink:0;display:inline-block}.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{min-height:var(--sf-cover-min-height);padding-block:var(--sf-cover-padding);flex-direction:column;display:flex}.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);justify-content:center;align-items:center;display:flex;overflow:hidden}.sf-frame>img,.sf-frame>video{object-fit:cover;block-size:100%;inline-size:100%}.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)){isolation:isolate;position:relative}.sf-bg{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;position:absolute}.sf-bg>:is(img,video,picture),.sf-bg>picture>img{object-fit:var(--sf-bg-fit);object-position:var(--sf-bg-position);border-radius:var(--sf-bg-radius);pointer-events:none;block-size:100%;inline-size:100%}.sf-reel{block-size:var(--sf-reel-height);gap:var(--sf-reel-gap);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);display:flex;overflow-x:auto}.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{inset-block-start:50%;position:absolute;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{gap:var(--sf-alternate-gap);display:grid;container:sf-alternate/inline-size}.sf-alternate>*{gap:var(--sf-alternate-inner-gap);align-items:center;display:grid}@container sf-alternate (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{grid-template-rows:auto 1fr auto;min-height:100dvh;display:grid}.sf-grid-cols-1{gap:var(--sf-grid-gap);display:grid}.sf-grid-cols-2,.sf-grid-cols-3,.sf-grid-cols-4,.sf-grid-cols-6{gap:var(--sf-grid-gap);display:grid;container:sf-grid/inline-size}@container (width>=30em){.sf-grid-cols-4{grid-template-columns:repeat(2,1fr)}.sf-grid-cols-6{grid-template-columns:repeat(3,1fr)}}@container (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{gap:var(--sf-grid-gap);display:grid}@container (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{grid-template-columns:repeat(auto-fit, minmax(min(var(--sf-equal-min-col), 100%), 1fr));gap:var(--sf-equal-gap);display:grid}.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{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];display:grid}.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{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);display:grid;container:sf-bento/inline-size}@container (width<=29.99em){.sf-bento{grid-template-columns:1fr}}@container (width>=30em) and (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-area:span 2/span 2}.sf-subgrid{grid-template-columns:subgrid;display:grid}.sf-subgrid-rows{grid-template-rows:subgrid;display:grid}}@layer slashed.components;@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{border-inline-start:var(--sf-prose-blockquote-border);padding-inline-start:var(--sf-prose-blockquote-padding);font-style:italic}.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:outside}.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);overflow-inline:auto;inline-size:100%;max-inline-size:100%;display:block;overflow-x:auto}.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>*+*,.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{border-inline-start:0;margin-block:0;padding-inline-start:0;font-style:normal}.sf-prose .sf-not-prose hr{margin-block:0}.sf-prose .sf-not-prose img{border-radius:0;margin-block: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{display:revert;overflow-x:revert;overflow-inline:revert;inline-size:revert;max-inline-size:revert;margin-block:0}.sf-prose .sf-not-prose :is(th,td){padding:revert}.sf-prose .sf-not-prose video{border-radius:0;margin-block:0}.sf-flow>*+*{margin-block-start:var(--sf-flow-space)}.sf-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sf-line-clamp-2,.sf-line-clamp-3,.sf-line-clamp-N{-webkit-box-orient:vertical;display:-webkit-box;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{align-items:stretch;display:flex}.sf-equal-height>*{flex:auto;block-size:auto}.sf-aspect{aspect-ratio:var(--sf-aspect,16 / 9)}.sf-scroll-shadow{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%);-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%);overflow-y:auto}.sf-scroll-snap{overflow-block:auto;scroll-snap-type:block mandatory;overscroll-behavior-block:contain;overflow-y:auto}.sf-scroll-snap>*{scroll-snap-align:start}.sf-overflow-fade,.sf-overflow-fade--right{-webkit-mask-image:linear-gradient(to right, black 0, black calc(100% - var(--sf-mask-scrim-end)), transparent 100%);-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%);overflow:hidden}.sf-overflow-fade--left{-webkit-mask-image:linear-gradient(to right, transparent 0, black var(--sf-mask-scrim-start), black 100%);-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%);overflow:hidden}.sf-overflow-fade--top{-webkit-mask-image:linear-gradient(to bottom, transparent 0, black var(--sf-mask-scrim-start), black 100%);-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%);overflow:hidden}.sf-overflow-fade--bottom{-webkit-mask-image:linear-gradient(to bottom, black 0, black calc(100% - var(--sf-mask-scrim-end)), transparent 100%);-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%);overflow:hidden}.sf-overflow-fade--block{-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%);-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%);overflow:hidden}.sf-overflow-fade--inline{-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%);-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%);overflow:hidden}.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{isolation:isolate;position:relative}.sf-scrim:before{content:"";z-index:0;background:var(--sf-scrim-gradient);pointer-events:none;position:absolute;inset:0}.sf-scrim>:not(img,picture,video,svg,canvas),.sf-scrim__content{z-index:1;position:relative}.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);color:#0000;-webkit-background-clip:text;background-clip:text}.sf-link-external:after{content:var(--sf-link-external-marker);font-size:.85em;text-decoration:none;display:inline-block}.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}}@layer slashed.utilities,slashed.states;@layer slashed.themes{@media (prefers-color-scheme:dark){:root:not([data-theme]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--sf-is-dark:1}}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--sf-is-dark:0}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;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:var(--lightningcss-light,oklch(from var(--sf-color-primary-source-light) var(--sf-lumlocker) c h))var(--lightningcss-dark,oklch(from var(--sf-color-primary-source-dark,var(--sf-color-primary-source-light)) var(--sf-lumlocker) c h));--sf-color-secondary:var(--lightningcss-light,oklch(from var(--sf-color-secondary-source-light) var(--sf-lumlocker) c h))var(--lightningcss-dark,oklch(from var(--sf-color-secondary-source-dark,var(--sf-color-secondary-source-light)) var(--sf-lumlocker) c h));--sf-color-tertiary:var(--lightningcss-light,oklch(from var(--sf-color-tertiary-source-light) var(--sf-lumlocker) c h))var(--lightningcss-dark,oklch(from var(--sf-color-tertiary-source-dark,var(--sf-color-tertiary-source-light)) var(--sf-lumlocker) c h));--sf-color-action:var(--lightningcss-light,oklch(from var(--sf-color-action-source-light) var(--sf-lumlocker) c h))var(--lightningcss-dark,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)}:root{--sf-color-primary-source-dark:oklch(from var(--sf-color-primary-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-secondary-source-dark:oklch(from var(--sf-color-secondary-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-tertiary-source-dark:oklch(from var(--sf-color-tertiary-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-action-source-dark:oklch(from var(--sf-color-action-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-neutral-source-dark:oklch(from var(--sf-color-neutral-source-light) clamp(.65, calc(.95 - l * .5), .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 * .5) h);--sf-color-success-source-dark:oklch(from var(--sf-color-success-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-warning-source-dark:oklch(from var(--sf-color-warning-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-info-source-dark:oklch(from var(--sf-color-info-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-danger-source-dark:oklch(from var(--sf-color-danger-source-light) clamp(.65, calc(.95 - l * .5), .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.motion,slashed.accessibility,slashed.print,slashed.legacy,slashed.overrides;
+@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{--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}::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-red-300:#ffa3a3;--color-red-500:#fb2c36;--color-red-900:#82181a;--color-orange-400:#ff8b1a;--color-amber-300:#ffd236;--color-amber-400:#fcbb00;--color-amber-500:#f99c00;--color-amber-600:#dd7400;--color-emerald-200:#a4f4cf;--color-emerald-300:#5ee9b5;--color-emerald-400:#00d294;--color-emerald-500:#00bb7f;--color-emerald-600:#009767;--color-emerald-900:#004e3b;--color-teal-400:#00d3bd;--color-sky-400:#00bcfe;--color-blue-500:#3080ff;--color-indigo-200:#c7d2ff;--color-indigo-300:#a4b3ff;--color-indigo-400:#7d87ff;--color-indigo-500:#625fff;--color-indigo-600:#4f39f6;--color-violet-400:#a685ff;--color-purple-500:#ac4bff;--color-purple-600:#9810fa;--color-pink-400:#fb64b6;--color-rose-300:#ffa2ae;--color-rose-400:#ff667f;--color-rose-500:#ff2357;--color-rose-600:#e70044;--color-rose-800:#a30037;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cad5e2;--color-slate-400:#90a1b9;--color-slate-500:#62748e;--color-slate-600:#45556c;--color-slate-700:#314158;--color-slate-800:#1d293d;--color-slate-900:#0f172b;--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)}@supports (color:lab(0% 0 0)){:root,:host{--color-red-300:lab(76.5514% 36.422 15.5335);--color-red-500:lab(55.4814% 75.0732 48.8528);--color-red-900:lab(28.5139% 44.5539 29.0463);--color-orange-400:lab(70.0429% 42.5156 75.8207);--color-amber-300:lab(86.4156% 6.13147 78.3961);--color-amber-400:lab(80.1641% 16.6016 99.2089);--color-amber-500:lab(72.7183% 31.8672 97.9407);--color-amber-600:lab(60.3514% 40.5624 87.1228);--color-emerald-200:lab(90.2247% -31.039 9.47084);--color-emerald-300:lab(83.9203% -48.7124 13.8849);--color-emerald-400:lab(75.0771% -60.7313 19.4147);--color-emerald-500:lab(66.9756% -58.27 19.5419);--color-emerald-600:lab(55.0481% -49.9246 15.93);--color-emerald-900:lab(28.8637% -26.9249 5.45986);--color-teal-400:lab(76.0109% -53.3483 -2.27906);--color-sky-400:lab(70.687% -23.6078 -45.9483);--color-blue-500:lab(54.1736% 13.3369 -74.6839);--color-indigo-200:lab(84.4329% 3.18977 -23.9688);--color-indigo-300:lab(74.0235% 8.54138 -41.6075);--color-indigo-400:lab(59.866% 22.4834 -64.4485);--color-indigo-500:lab(48.295% 38.3129 -81.9673);--color-indigo-600:lab(38.4009% 52.6132 -92.3857);--color-violet-400:lab(62.8239% 34.9159 -60.0512);--color-purple-500:lab(52.0183% 66.11 -78.2316);--color-purple-600:lab(43.0295% 75.21 -86.5669);--color-pink-400:lab(64.5597% 64.3615 -12.7988);--color-rose-300:lab(76.6339% 38.3549 9.68835);--color-rose-400:lab(64.4125% 63.0291 19.2068);--color-rose-500:lab(56.101% 79.4328 31.4532);--color-rose-600:lab(49.1882% 81.577 36.0311);--color-rose-800:lab(34.6481% 60.802 20.1957);--color-slate-100:lab(96.286% -.852436 -2.46847);--color-slate-200:lab(91.7353% -.998765 -4.76968);--color-slate-300:lab(84.7652% -1.94535 -7.93337);--color-slate-400:lab(65.5349% -2.25151 -14.5072);--color-slate-500:lab(48.0876% -2.03595 -16.5814);--color-slate-600:lab(35.5623% -1.74978 -15.4316);--color-slate-700:lab(26.9569% -1.47016 -15.6993);--color-slate-800:lab(16.132% -.318035 -14.6672);--color-slate-900:lab(7.78673% 1.82345 -15.0537)}}}@layer base{*,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.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-\[100\]{z-index:100}.z-\[99998\]{z-index:99998}.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:calc(calc(1 / 2 * 100%) * -1);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-nowrap{flex-wrap:nowrap}.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-red-500\/30{border-color:#fb2c364d}@supports (color:color-mix(in lab, red, red)){.border-red-500\/30{border-color:color-mix(in oklab, var(--color-red-500) 30%, 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-red-900\/40{background-color:#82181a66}@supports (color:color-mix(in lab, red, red)){.bg-red-900\/40{background-color:color-mix(in oklab, var(--color-red-900) 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-red-300{color:var(--color-red-300)}.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}}}@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:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-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:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}.clampRange.svelte-iy59wr{appearance:none;pointer-events:none;background:0 0;margin:0}.clampRange.svelte-iy59wr::-webkit-slider-thumb{appearance:none;cursor:pointer;pointer-events:auto;background:0 0;border-radius:9999px;width:16px;height:16px}.clampRange.svelte-iy59wr::-moz-range-thumb{cursor:pointer;pointer-events:auto;background:0 0;border:0;border-radius:9999px;width:16px;height:16px}.clampRange.svelte-iy59wr::-moz-range-track{background:0 0}@layer slashed.tokens{@property --sf-color-primary-source-light{syntax:"<color>";inherits:true;initial-value:oklch(47% .27 264)}@property --sf-color-secondary-source-light{syntax:"<color>";inherits:true;initial-value:oklch(22% .04 264)}@property --sf-color-tertiary-source-light{syntax:"<color>";inherits:true;initial-value:oklch(42% .22 295)}@property --sf-color-action-source-light{syntax:"<color>";inherits:true;initial-value:oklch(50% .22 235)}@property --sf-color-neutral-source-light{syntax:"<color>";inherits:true;initial-value:oklch(52% .025 260)}@property --sf-color-base-source-light{syntax:"<color>";inherits:true;initial-value:oklch(96% .006 250)}@property --sf-color-success-source-light{syntax:"<color>";inherits:true;initial-value:oklch(50% .16 145)}@property --sf-color-warning-source-light{syntax:"<color>";inherits:true;initial-value:oklch(75% .17 80)}@property --sf-color-info-source-light{syntax:"<color>";inherits:true;initial-value:oklch(48% .18 235)}@property --sf-color-danger-source-light{syntax:"<color>";inherits:true;initial-value:oklch(48% .22 12)}:root{--sf-color-primary-source-light:#0137ee;--sf-color-secondary-source-light:#111a2d;--sf-color-tertiary-source-light:#5c10b4;--sf-color-action-source-light:#006c98;--sf-color-neutral-source-light:#616978;--sf-color-base-source-light:#eff2f6;--sf-color-success-source-light:#00791d;--sf-color-warning-source-light:#e2a000;--sf-color-info-source-light:#006693;--sf-color-danger-source-light:#af0040}@supports (color:lab(0% 0 0)){:root{--sf-color-primary-source-light:lab(33.7875% 46.3905 -95.4963);--sf-color-secondary-source-light:lab(9.22675% 1.07623 -14.3482);--sf-color-tertiary-source-light:lab(28.2584% 55.0822 -70.9314);--sf-color-action-source-light:lab(41.335% -12.4269 -63.6346);--sf-color-neutral-source-light:lab(44.2238% -1.00827 -9.19603);--sf-color-base-source-light:lab(95.3554% -.662148 -2.14612);--sf-color-success-source-light:lab(43.8665% -45.1423 39.6128);--sf-color-warning-source-light:lab(70.9465% 19.2186 87.3143);--sf-color-info-source-light:lab(39.3159% -14.401 -52.2544);--sf-color-danger-source-light:lab(37.1443% 71.0626 21.0806)}}@property --sf-color-primary-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(71.5% .243 264)}@property --sf-color-secondary-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(84% .036 264)}@property --sf-color-tertiary-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(74% .198 295)}@property --sf-color-action-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(70% .198 235)}@property --sf-color-neutral-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(69% .0225 260)}@property --sf-color-base-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(22% .003 250)}@property --sf-color-success-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(70% .144 145)}@property --sf-color-warning-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(65% .153 80)}@property --sf-color-info-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(71% .162 235)}@property --sf-color-danger-source-dark{syntax:"<color>";inherits:true;initial-value:oklch(71% .198 12)}@property --sf-color-primary{syntax:"<color>";inherits:true;initial-value:oklch(47% .27 264)}@property --sf-color-secondary{syntax:"<color>";inherits:true;initial-value:oklch(22% .04 264)}@property --sf-color-tertiary{syntax:"<color>";inherits:true;initial-value:oklch(42% .22 295)}@property --sf-color-action{syntax:"<color>";inherits:true;initial-value:oklch(50% .22 235)}@property --sf-color-neutral{syntax:"<color>";inherits:true;initial-value:oklch(52% .025 260)}@property --sf-color-base{syntax:"<color>";inherits:true;initial-value:oklch(96% .006 250)}@property --sf-color-success{syntax:"<color>";inherits:true;initial-value:oklch(50% .16 145)}@property --sf-color-warning{syntax:"<color>";inherits:true;initial-value:oklch(75% .17 80)}@property --sf-color-info{syntax:"<color>";inherits:true;initial-value:oklch(48% .18 235)}@property --sf-color-danger{syntax:"<color>";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:"<integer>";inherits:true;initial-value:0}@property --sf-is-active{syntax:"<integer>";inherits:true;initial-value:0}@property --sf-is-current{syntax:"<integer>";inherits:true;initial-value:0}@property --sf-is-pressed{syntax:"<integer>";inherits:true;initial-value:0}@property --sf-is-open{syntax:"<integer>";inherits:true;initial-value:0}@property --sf-fluid-min-vw{syntax:"<number>";inherits:true;initial-value:22.5}@property --sf-fluid-max-vw{syntax:"<number>";inherits:true;initial-value:90}@property --sf-text-ratio-min{syntax:"<number>";inherits:true;initial-value:1.25}@property --sf-text-ratio-max{syntax:"<number>";inherits:true;initial-value:1.333}@property --sf-text-base-min{syntax:"<number>";inherits:true;initial-value:1}@property --sf-text-base-max{syntax:"<number>";inherits:true;initial-value:1.25}@property --sf-text-display-base-min{syntax:"<number>";inherits:true;initial-value:2.4}@property --sf-text-display-base-max{syntax:"<number>";inherits:true;initial-value:3}@property --sf-space-ratio-min{syntax:"<number>";inherits:true;initial-value:1.25}@property --sf-space-ratio-max{syntax:"<number>";inherits:true;initial-value:1.333}@property --sf-space-base-min{syntax:"<number>";inherits:true;initial-value:1}@property --sf-space-base-max{syntax:"<number>";inherits:true;initial-value:2}@property --sf-radius-none{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-2xs{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-xs{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-s{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-m{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-l{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-2xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-3xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-4xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-radius-full{syntax:"<length>";inherits:true;initial-value:9999px}@property --sf-radius-pill{syntax:"<length>";inherits:true;initial-value:9999px}@property --sf-radius-outer{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-none{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-px{syntax:"<length>";inherits:true;initial-value:1px}@property --sf-space-2xs{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-xs{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-s{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-m{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-l{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-2xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-3xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-space-4xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-gap{syntax:"<length>";inherits:true;initial-value:0}@property --sf-content-gap{syntax:"<length>";inherits:true;initial-value:0}@property --sf-gutter{syntax:"<length>";inherits:true;initial-value:0}@property --sf-component-pad{syntax:"<length>";inherits:true;initial-value:0}@property --sf-field-block{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--xs{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--s{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--m{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--l{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--xl{syntax:"<length>";inherits:true;initial-value:0}@property --sf-section-pad--2xl{syntax:"<length>";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;--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:#eee;--sf-color-text--on-secondary:#eee;--sf-color-text--on-tertiary:#eee;--sf-color-text--on-action:#eee;--sf-color-text--on-neutral:#eee;--sf-color-text--on-success:#eee;--sf-color-text--on-warning:#030303;--sf-color-text--on-info:#eee;--sf-color-text--on-danger:#eee;--sf-color-text--on-inverse:#eee;--sf-color-code-text:#030303;--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:#00000080;--sf-color-white:#fff;--sf-color-black:#000;--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:lab(0% 0 0)){:root{--sf-color-text--on-primary:lab(94.2% 0 0);--sf-color-text--on-secondary:lab(94.2% 0 0);--sf-color-text--on-tertiary:lab(94.2% 0 0);--sf-color-text--on-action:lab(94.2% 0 0);--sf-color-text--on-neutral:lab(94.2% 0 0);--sf-color-text--on-success:lab(94.2% 0 0);--sf-color-text--on-warning:lab(.903296% 0 0);--sf-color-text--on-info:lab(94.2% 0 0);--sf-color-text--on-danger:lab(94.2% 0 0);--sf-color-text--on-inverse:lab(94.2% 0 0);--sf-color-code-text:lab(.903296% 0 0);--sf-color-dim:lab(0% 0 0/.5);--sf-color-white:lab(100% 0 0);--sf-color-black:lab(0% 0 0)}}@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 * .5), .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 * .5), .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 * .5), .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 * .5), .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 * .5), .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 * .5) 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 * .5), .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 * .5), .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 * .5), .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 * .5), .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:0s;--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(.225s * var(--sf-motion-scale));--sf-animation-delay-4:calc(.3s * var(--sf-motion-scale));--sf-animation-delay-5:calc(.375s * 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;--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);--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:#0000008c;--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 #0009}@supports (color:lab(0% 0 0)){:root{--sf-scrim-color:lab(0% 0 0/.55);--sf-scrim-text-shadow:0 1px 3px lab(0% 0 0/.6)}}}@layer slashed.reset,slashed.base,slashed.forms;@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{block-size:var(--sf-divider-width);background:linear-gradient(to right, transparent, var(--sf-divider-color), transparent);border:none}.sf-container{width:100%;max-width:var(--sf-container-default);padding-inline:var(--sf-gutter);margin-inline:auto;container:sf-layout/inline-size}.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{gap:var(--sf-stack-gap);flex-direction:column;display:flex}.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;max-inline-size:var(--sf-center-max);padding-inline:var(--sf-center-gutter);margin-inline:auto}.sf-center--intrinsic{flex-direction:column;align-items:center;display:flex}.sf-cluster{gap:var(--sf-cluster-gap);align-items:var(--sf-cluster-align);justify-content:var(--sf-cluster-justify);flex-wrap:wrap;display:flex}.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{gap:var(--sf-sidebar-gap);flex-wrap:wrap;display:flex}.sf-sidebar>:first-child{flex-basis:var(--sf-sidebar-width);flex-grow:1}.sf-sidebar>:last-child,.sf-sidebar--right>:first-child{min-inline-size:var(--sf-sidebar-min-width);flex-grow:999;flex-basis:0}.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{gap:var(--sf-switcher-gap);flex-wrap:wrap;display:flex}.sf-switcher>*{flex-grow:1;flex-basis:calc((var(--sf-switcher-threshold) - 100%) * 999)}.sf-switcher--no-wrap{overflow-inline:auto;flex-wrap:nowrap;overflow-x:auto}.sf-switcher--vertical{flex-direction:column}.sf-grid{grid-template-columns:repeat(auto-fill, minmax(min(var(--sf-grid-min), 100%), 1fr));gap:var(--sf-grid-gap);display:grid}.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{inline-size:var(--sf-icon-size,var(--sf-icon-m));block-size:var(--sf-icon-size,var(--sf-icon-m));vertical-align:text-bottom;fill:currentColor;flex-shrink:0;display:inline-block}.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{min-height:var(--sf-cover-min-height);padding-block:var(--sf-cover-padding);flex-direction:column;display:flex}.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);justify-content:center;align-items:center;display:flex;overflow:hidden}.sf-frame>img,.sf-frame>video{object-fit:cover;block-size:100%;inline-size:100%}.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)){isolation:isolate;position:relative}.sf-bg{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;position:absolute}.sf-bg>:is(img,video,picture),.sf-bg>picture>img{object-fit:var(--sf-bg-fit);object-position:var(--sf-bg-position);border-radius:var(--sf-bg-radius);pointer-events:none;block-size:100%;inline-size:100%}.sf-reel{block-size:var(--sf-reel-height);gap:var(--sf-reel-gap);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);display:flex;overflow-x:auto}.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{inset-block-start:50%;position:absolute;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{gap:var(--sf-alternate-gap);display:grid;container:sf-alternate/inline-size}.sf-alternate>*{gap:var(--sf-alternate-inner-gap);align-items:center;display:grid}@container sf-alternate (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{grid-template-rows:auto 1fr auto;min-height:100dvh;display:grid}.sf-grid-cols-1{gap:var(--sf-grid-gap);display:grid}.sf-grid-cols-2,.sf-grid-cols-3,.sf-grid-cols-4,.sf-grid-cols-6{gap:var(--sf-grid-gap);display:grid;container:sf-grid/inline-size}@container (width>=30em){.sf-grid-cols-4{grid-template-columns:repeat(2,1fr)}.sf-grid-cols-6{grid-template-columns:repeat(3,1fr)}}@container (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{gap:var(--sf-grid-gap);display:grid}@container (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{grid-template-columns:repeat(auto-fit, minmax(min(var(--sf-equal-min-col), 100%), 1fr));gap:var(--sf-equal-gap);display:grid}.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{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];display:grid}.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{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);display:grid;container:sf-bento/inline-size}@container (width<=29.99em){.sf-bento{grid-template-columns:1fr}}@container (width>=30em) and (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-area:span 2/span 2}.sf-subgrid{grid-template-columns:subgrid;display:grid}.sf-subgrid-rows{grid-template-rows:subgrid;display:grid}}@layer slashed.components;@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{border-inline-start:var(--sf-prose-blockquote-border);padding-inline-start:var(--sf-prose-blockquote-padding);font-style:italic}.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:outside}.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);overflow-inline:auto;inline-size:100%;max-inline-size:100%;display:block;overflow-x:auto}.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>*+*,.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{border-inline-start:0;margin-block:0;padding-inline-start:0;font-style:normal}.sf-prose .sf-not-prose hr{margin-block:0}.sf-prose .sf-not-prose img{border-radius:0;margin-block: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{display:revert;overflow-x:revert;overflow-inline:revert;inline-size:revert;max-inline-size:revert;margin-block:0}.sf-prose .sf-not-prose :is(th,td){padding:revert}.sf-prose .sf-not-prose video{border-radius:0;margin-block:0}.sf-flow>*+*{margin-block-start:var(--sf-flow-space)}.sf-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sf-line-clamp-2,.sf-line-clamp-3,.sf-line-clamp-N{-webkit-box-orient:vertical;display:-webkit-box;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{align-items:stretch;display:flex}.sf-equal-height>*{flex:auto;block-size:auto}.sf-aspect{aspect-ratio:var(--sf-aspect,16 / 9)}.sf-scroll-shadow{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%);-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%);overflow-y:auto}.sf-scroll-snap{overflow-block:auto;scroll-snap-type:block mandatory;overscroll-behavior-block:contain;overflow-y:auto}.sf-scroll-snap>*{scroll-snap-align:start}.sf-overflow-fade,.sf-overflow-fade--right{-webkit-mask-image:linear-gradient(to right, black 0, black calc(100% - var(--sf-mask-scrim-end)), transparent 100%);-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%);overflow:hidden}.sf-overflow-fade--left{-webkit-mask-image:linear-gradient(to right, transparent 0, black var(--sf-mask-scrim-start), black 100%);-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%);overflow:hidden}.sf-overflow-fade--top{-webkit-mask-image:linear-gradient(to bottom, transparent 0, black var(--sf-mask-scrim-start), black 100%);-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%);overflow:hidden}.sf-overflow-fade--bottom{-webkit-mask-image:linear-gradient(to bottom, black 0, black calc(100% - var(--sf-mask-scrim-end)), transparent 100%);-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%);overflow:hidden}.sf-overflow-fade--block{-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%);-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%);overflow:hidden}.sf-overflow-fade--inline{-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%);-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%);overflow:hidden}.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{isolation:isolate;position:relative}.sf-scrim:before{content:"";z-index:0;background:var(--sf-scrim-gradient);pointer-events:none;position:absolute;inset:0}.sf-scrim>:not(img,picture,video,svg,canvas),.sf-scrim__content{z-index:1;position:relative}.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);color:#0000;-webkit-background-clip:text;background-clip:text}.sf-link-external:after{content:var(--sf-link-external-marker);font-size:.85em;text-decoration:none;display:inline-block}.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}}@layer slashed.utilities,slashed.states;@layer slashed.themes{@media (prefers-color-scheme:dark){:root:not([data-theme]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--sf-is-dark:1}}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--sf-is-dark:0}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;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:var(--lightningcss-light,oklch(from var(--sf-color-primary-source-light) var(--sf-lumlocker) c h))var(--lightningcss-dark,oklch(from var(--sf-color-primary-source-dark,var(--sf-color-primary-source-light)) var(--sf-lumlocker) c h));--sf-color-secondary:var(--lightningcss-light,oklch(from var(--sf-color-secondary-source-light) var(--sf-lumlocker) c h))var(--lightningcss-dark,oklch(from var(--sf-color-secondary-source-dark,var(--sf-color-secondary-source-light)) var(--sf-lumlocker) c h));--sf-color-tertiary:var(--lightningcss-light,oklch(from var(--sf-color-tertiary-source-light) var(--sf-lumlocker) c h))var(--lightningcss-dark,oklch(from var(--sf-color-tertiary-source-dark,var(--sf-color-tertiary-source-light)) var(--sf-lumlocker) c h));--sf-color-action:var(--lightningcss-light,oklch(from var(--sf-color-action-source-light) var(--sf-lumlocker) c h))var(--lightningcss-dark,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)}:root{--sf-color-primary-source-dark:oklch(from var(--sf-color-primary-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-secondary-source-dark:oklch(from var(--sf-color-secondary-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-tertiary-source-dark:oklch(from var(--sf-color-tertiary-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-action-source-dark:oklch(from var(--sf-color-action-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-neutral-source-dark:oklch(from var(--sf-color-neutral-source-light) clamp(.65, calc(.95 - l * .5), .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 * .5) h);--sf-color-success-source-dark:oklch(from var(--sf-color-success-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-warning-source-dark:oklch(from var(--sf-color-warning-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-info-source-dark:oklch(from var(--sf-color-info-source-light) clamp(.65, calc(.95 - l * .5), .88) calc(c * .9) h);--sf-color-danger-source-dark:oklch(from var(--sf-color-danger-source-light) clamp(.65, calc(.95 - l * .5), .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.motion,slashed.accessibility,slashed.print,slashed.legacy,slashed.overrides;
 /*$vite$:1*/
\ No newline at end of file
diff --git a/SLASHED-for-WP/assets/admin-app/app.js b/SLASHED-for-WP/assets/admin-app/app.js
index cdf66110..1f557e67 100644
--- a/SLASHED-for-WP/assets/admin-app/app.js
+++ b/SLASHED-for-WP/assets/admin-app/app.js
@@ -1,7 +1,7 @@
-var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array.from,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyDescriptors,s=Object.prototype,c=Array.prototype,l=Object.getPrototypeOf,u=Object.isExtensible;function d(e){return typeof e==`function`}var f=()=>{};function p(e){return e()}function m(e){for(var t=0;t<e.length;t++)e[t]()}function h(){var e,t;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}}function g(e,t){if(Array.isArray(e))return e;if(t===void 0||!(Symbol.iterator in e))return Array.from(e);let n=[];for(let r of e)if(n.push(r),n.length===t)break;return n}var _=1<<24,v=1024,y=2048,b=4096,x=8192,S=16384,C=32768,w=1<<25,T=65536,E=1<<19,D=1<<20,O=1<<25,k=65536,A=1<<21,ee=1<<22,te=1<<23,j=Symbol(`$state`),M=Symbol(`legacy props`),ne=Symbol(``),re=Symbol(`attributes`),ie=Symbol(`class`),ae=Symbol(`style`),oe=Symbol(`text`),se=Symbol(`form reset`),N=new class extends Error{name=`StaleReactionError`;message="The reaction that called `getAbortSignal()` was re-run or destroyed"},ce=!!globalThis.document?.contentType&&globalThis.document.contentType.includes(`xml`);function le(e){throw Error(`https://svelte.dev/e/lifecycle_outside_component`)}function ue(){throw Error(`https://svelte.dev/e/async_derived_orphan`)}function de(e,t,n){throw Error(`https://svelte.dev/e/each_key_duplicate`)}function fe(e){throw Error(`https://svelte.dev/e/effect_in_teardown`)}function pe(){throw Error(`https://svelte.dev/e/effect_in_unowned_derived`)}function me(e){throw Error(`https://svelte.dev/e/effect_orphan`)}function he(){throw Error(`https://svelte.dev/e/effect_update_depth_exceeded`)}function ge(e){throw Error(`https://svelte.dev/e/props_invalid_value`)}function _e(){throw Error(`https://svelte.dev/e/state_descriptors_fixed`)}function ve(){throw Error(`https://svelte.dev/e/state_prototype_fixed`)}function ye(){throw Error(`https://svelte.dev/e/state_unsafe_mutation`)}function be(){throw Error(`https://svelte.dev/e/svelte_boundary_reset_onerror`)}var xe={},Se=Symbol(`uninitialized`),Ce=`http://www.w3.org/1999/xhtml`,we=`http://www.w3.org/2000/svg`;function Te(){console.warn(`https://svelte.dev/e/derived_inert`)}function Ee(e){console.warn(`https://svelte.dev/e/hydration_mismatch`)}function De(){console.warn(`https://svelte.dev/e/select_multiple_invalid_value`)}function Oe(){console.warn(`https://svelte.dev/e/svelte_boundary_reset_noop`)}var P=!1;function ke(e){P=e}var Ae;function je(e){if(e===null)throw Ee(),xe;return Ae=e}function Me(){return je(pn(Ae))}function F(e){if(P){if(pn(Ae)!==null)throw Ee(),xe;Ae=e}}function Ne(e=1){if(P){for(var t=e,n=Ae;t--;)n=pn(n);Ae=n}}function Pe(e=!0){for(var t=0,n=Ae;;){if(n.nodeType===8){var r=n.data;if(r===`]`){if(t===0)return n;--t}else(r===`[`||r===`[!`||r[0]===`[`&&!isNaN(Number(r.slice(1))))&&(t+=1)}var i=pn(n);e&&n.remove(),n=i}}function Fe(e){if(!e||e.nodeType!==8)throw Ee(),xe;return e.data}function Ie(e){return e===this.v}function Le(e,t){return e==e?e!==t||typeof e==`object`&&!!e||typeof e==`function`:t==t}function Re(e){return!Le(e,this.v)}var ze=!1,Be=!1;function Ve(){Be=!0}var He=null;function Ue(e){He=e}function We(e,t=!1,n){He={p:He,i:!1,c:null,e:null,s:e,x:null,r:nr,l:Be&&!t?{s:null,u:null,$:[]}:null}}function Ge(e){var t=He,n=t.e;if(n!==null){t.e=null;for(var r of n)kn(r)}return e!==void 0&&(t.x=e),t.i=!0,He=t.p,e??{}}function Ke(){return!Be||He!==null&&He.l===null}var qe=[];function Je(){var e=qe;qe=[],m(e)}function Ye(e){if(qe.length===0&&!At){var t=qe;queueMicrotask(()=>{t===qe&&Je()})}qe.push(e)}function Xe(){for(;qe.length>0;)Je()}function Ze(e){var t=nr;if(t===null)return $n.f|=te,e;if(!(t.f&32768)&&!(t.f&4))throw e;Qe(e,t)}function Qe(e,t){if(!(t!==null&&t.f&16384)){for(;t!==null;){if(t.f&128){if(!(t.f&32768))throw e;try{t.b.error(e);return}catch(t){e=t}}t=t.parent}throw e}}var $e=~(y|b|v);function et(e,t){e.f=e.f&$e|t}function tt(e){e.f&512||e.deps===null?et(e,v):et(e,b)}function nt(e){if(e!==null)for(let t of e)!(t.f&2)||!(t.f&65536)||(t.f^=k,nt(t.deps))}function rt(e,t,n){e.f&2048?t.add(e):e.f&4096&&n.add(e),nt(e.deps),et(e,v)}var it=!1,at=!1;function ot(e){var t=at;try{return at=!1,[e(),at]}finally{at=t}}function st(e){let t=0,n=Yt(0),r;return()=>{En()&&(U(n),Pn(()=>(t===0&&(r=wr(()=>e(()=>en(n)))),t+=1,()=>{Ye(()=>{--t,t===0&&(r?.(),r=void 0,en(n))})})))}}var ct=T|E;function lt(e,t,n,r){new ut(e,t,n,r)}var ut=class{parent;is_pending=!1;transform_error;#e;#t=P?Ae:null;#n;#r;#i;#a=null;#o=null;#s=null;#c=null;#l=0;#u=0;#d=!1;#f=new Set;#p=new Set;#m=null;#h=st(()=>(this.#m=Yt(this.#l),()=>{this.#m=null}));constructor(e,t,n,r){this.#e=e,this.#n=t,this.#r=e=>{var t=nr;t.b=this,t.f|=128,n(e)},this.parent=nr.b,this.transform_error=r??this.parent?.transform_error??(e=>e),this.#i=Fn(()=>{if(P){let e=this.#t;Me();let t=e.data===`[!`;if(e.data.startsWith(`[?`)){let t=JSON.parse(e.data.slice(2));this.#_(t)}else t?this.#v():this.#g()}else this.#y()},ct),P&&(this.#e=Ae)}#g(){try{this.#a=Ln(()=>this.#r(this.#e))}catch(e){this.error(e)}}#_(e){let t=this.#n.failed;t&&(this.#s=Ln(()=>{t(this.#e,()=>e,()=>()=>{})}))}#v(){let e=this.#n.pending;e&&(this.is_pending=!0,this.#o=Ln(()=>e(this.#e)),Ye(()=>{var e=this.#c=document.createDocumentFragment(),t=dn();e.append(t),this.#a=this.#x(()=>Ln(()=>this.#r(t))),this.#u===0&&(this.#e.before(e),this.#c=null,Wn(this.#o,()=>{this.#o=null}),this.#b(Et))}))}#y(){try{if(this.is_pending=this.has_pending_snippet(),this.#u=0,this.#l=0,this.#a=Ln(()=>{this.#r(this.#e)}),this.#u>0){var e=this.#c=document.createDocumentFragment();Jn(this.#a,e);let t=this.#n.pending;this.#o=Ln(()=>t(this.#e))}else this.#b(Et)}catch(e){this.error(e)}}#b(e){this.is_pending=!1,e.transfer_effects(this.#f,this.#p)}defer_effect(e){rt(e,this.#f,this.#p)}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!this.#n.pending}#x(e){var t=nr,n=$n,r=He;rr(this.#i),tr(this.#i),Ue(this.#i.ctx);try{return It.ensure(),e()}catch(e){return Ze(e),null}finally{rr(t),tr(n),Ue(r)}}#S(e,t){if(!this.has_pending_snippet()){this.parent&&this.parent.#S(e,t);return}this.#u+=e,this.#u===0&&(this.#b(t),this.#o&&Wn(this.#o,()=>{this.#o=null}),this.#c&&=(this.#e.before(this.#c),null))}update_pending_count(e,t){this.#S(e,t),this.#l+=e,!(!this.#m||this.#d)&&(this.#d=!0,Ye(()=>{this.#d=!1,this.#m&&Zt(this.#m,this.#l)}))}get_effect_pending(){return this.#h(),U(this.#m)}error(e){if(!this.#n.onerror&&!this.#n.failed)throw e;Et?.is_fork?(this.#a&&Et.skip_effect(this.#a),this.#o&&Et.skip_effect(this.#o),this.#s&&Et.skip_effect(this.#s),Et.oncommit(()=>{this.#C(e)})):this.#C(e)}#C(e){this.#a&&=(Vn(this.#a),null),this.#o&&=(Vn(this.#o),null),this.#s&&=(Vn(this.#s),null),P&&(je(this.#t),Ne(),je(Pe()));var t=this.#n.onerror;let n=this.#n.failed;var r=!1,i=!1;let a=()=>{if(r){Oe();return}r=!0,i&&be(),this.#s!==null&&Wn(this.#s,()=>{this.#s=null}),this.#x(()=>{this.#y()})},o=e=>{try{i=!0,t?.(e,a),i=!1}catch(e){Qe(e,this.#i&&this.#i.parent)}n&&(this.#s=this.#x(()=>{try{return Ln(()=>{var t=nr;t.b=this,t.f|=128,n(this.#e,()=>e,()=>a)})}catch(e){return Qe(e,this.#i.parent),null}}))};Ye(()=>{var t;try{t=this.transform_error(e)}catch(e){Qe(e,this.#i&&this.#i.parent);return}typeof t==`object`&&t&&typeof t.then==`function`?t.then(o,e=>Qe(e,this.#i&&this.#i.parent)):o(t)})}};function dt(e,t,n,r){let i=Ke()?ht:vt;var a=e.filter(e=>!e.settled),o=t.map(i);if(n.length===0&&a.length===0){r(o);return}var s=nr,c=ft(),l=a.length===1?a[0].promise:a.length>1?Promise.all(a.map(e=>e.promise)):null;function u(e){if(!(s.f&16384)){c();try{r([...o,...e])}catch(e){Qe(e,s)}pt()}}var d=mt();if(n.length===0){l.then(()=>u([])).finally(d);return}function f(){Promise.all(n.map(e=>_t(e))).then(u).catch(e=>Qe(e,s)).finally(d)}l?l.then(()=>{c(),f(),pt()}):f()}function ft(){var e=nr,t=$n,n=He,r=Et;return function(i=!0){rr(e),tr(t),Ue(n),i&&!(e.f&16384)&&(r?.activate(),r?.apply())}}function pt(e=!0){rr(null),tr(null),Ue(null),e&&Et?.deactivate()}function mt(){var e=nr,t=e.b,n=Et,r=!!t?.is_rendered();return t?.update_pending_count(1,n),n.increment(r,e),()=>{t?.update_pending_count(-1,n),n.decrement(r,e)}}function ht(e){var t=2|y;return nr!==null&&(nr.f|=E),{ctx:He,deps:null,effects:null,equals:Ie,f:t,fn:e,reactions:null,rv:0,v:Se,wv:0,parent:nr,ac:null}}var gt=Symbol(`obsolete`);function _t(e,t,n){let r=nr;r===null&&ue();var i=void 0,a=Yt(Se),o=!$n,s=new Set;return Nn(()=>{var t=nr,n=h();i=n.promise;try{Promise.resolve(e()).then(n.resolve,e=>{e!==N&&n.reject(e)}).finally(pt)}catch(e){n.reject(e),pt()}var c=Et;if(o){if(t.f&32768)var l=mt();if(r.b?.is_rendered())c.async_deriveds.get(t)?.reject(gt);else for(let e of s.values())e.reject(gt);s.add(n),c.async_deriveds.set(t,n)}let u=(e,t=void 0)=>{l?.(),s.delete(n),t!==gt&&(c.activate(),t?(a.f|=te,Zt(a,t)):(a.f&8388608&&(a.f^=te),Zt(a,e)),c.deactivate())};n.promise.then(u,e=>u(null,e||`unknown`))}),Dn(()=>{for(let e of s)e.reject(gt)}),new Promise(e=>{function t(n){function r(){n===i?e(a):t(i)}n.then(r,r)}t(i)})}function I(e){let t=ht(e);return ze||ar(t),t}function vt(e){let t=ht(e);return t.equals=Re,t}function yt(e){var t=e.effects;if(t!==null){e.effects=null;for(var n=0;n<t.length;n+=1)Vn(t[n])}}function bt(e){var t,n=nr,r=e.parent;if(!Zn&&r!==null&&e.v!==Se&&r.f&24576)return Te(),e.v;rr(r);try{e.f&=~k,yt(e),t=_r(e)}finally{rr(n)}return t}function xt(e){var t=bt(e);if(!e.equals(t)&&(e.wv=mr(),(!Et?.is_fork||e.deps===null)&&(Et===null?e.v=t:(Et.capture(e,t,!0),Dt?.capture(e,t,!0)),e.deps===null))){et(e,v);return}Zn||(Ot===null?tt(e):(En()||Et?.is_fork)&&Ot.set(e,t))}function St(e){if(e.effects!==null)for(let t of e.effects)(t.teardown||t.ac)&&(t.teardown?.(),t.ac?.abort(N),t.fn!==null&&(t.teardown=f),t.ac=null,yr(t,0),zn(t))}function Ct(e){if(e.effects!==null)for(let t of e.effects)t.teardown&&t.fn!==null&&br(t)}var wt=null,Tt=null,Et=null,Dt=null,Ot=null,kt=null,At=!1,jt=!1,Mt=null,Nt=null,Pt=0,Ft=1,It=class e{id=Ft++;#e=!1;linked=!0;#t=null;#n=null;async_deriveds=new Map;current=new Map;previous=new Map;#r=new Set;#i=new Set;#a=0;#o=new Map;#s=null;#c=[];#l=[];#u=new Set;#d=new Set;#f=new Map;#p=new Set;is_fork=!1;#m=!1;constructor(){Tt===null?wt=Tt=this:(Tt.#n=this,this.#t=Tt),Tt=this}#h(){if(this.is_fork)return!0;for(let n of this.#o.keys()){for(var e=n,t=!1;e.parent!==null;){if(this.#f.has(e)){t=!0;break}e=e.parent}if(!t)return!0}return!1}skip_effect(e){this.#f.has(e)||this.#f.set(e,{d:[],m:[]}),this.#p.delete(e)}unskip_effect(e,t=e=>this.schedule(e)){var n=this.#f.get(e);if(n){this.#f.delete(e);for(var r of n.d)et(r,y),t(r);for(r of n.m)et(r,b),t(r)}this.#p.add(e)}#g(){this.#e=!0,Pt++>1e3&&(this.#S(),Rt());for(let e of this.#u)this.#d.delete(e),et(e,y),this.schedule(e);for(let e of this.#d)et(e,b),this.schedule(e);let t=this.#c;this.#c=[],this.apply();var n=Mt=[],r=[],i=Nt=[];for(let e of t)try{this.#_(e,n,r)}catch(t){throw Gt(e),this.#h()||this.discard(),t}if(Et=null,i.length>0){var a=e.ensure();for(let e of i)a.schedule(e)}if(Mt=null,Nt=null,this.#h()){this.#b(r),this.#b(n);for(let[e,t]of this.#f)Wt(e,t);i.length>0&&Et.#g();return}let o=this.#v();if(o){this.#b(r),this.#b(n),o.#y(this);return}this.#u.clear(),this.#d.clear();for(let e of this.#r)e(this);this.#r.clear(),Dt=this,Bt(r),Bt(n),Dt=null,this.#s?.resolve();var s=Et;if(this.#a===0&&(this.#c.length===0||s!==null)&&(this.#S(),ze&&(this.#x(),Et=s)),this.#c.length>0)if(s!==null){let e=s;e.#c.push(...this.#c.filter(t=>!e.#c.includes(t)))}else s=this;s!==null&&s.#g()}#_(e,t,n){e.f^=v;for(var r=e.first;r!==null;){var i=r.f,a=(i&96)!=0;if(!(a&&i&1024||i&8192||this.#f.has(r))&&r.fn!==null){a?r.f^=v:i&4?t.push(r):ze&&i&16777224?n.push(r):hr(r)&&(i&16&&this.#d.add(r),br(r));var o=r.first;if(o!==null){r=o;continue}}for(;r!==null;){var s=r.next;if(s!==null){r=s;break}r=r.parent}}}#v(){for(var e=this.#t;e!==null;){if(!e.is_fork){for(let[t,[,n]]of this.current)if(e.current.has(t)&&!n)return e}e=e.#t}return null}#y(e){for(let[t,n]of e.current)!this.previous.has(t)&&e.previous.has(t)&&this.previous.set(t,e.previous.get(t)),this.current.set(t,n);for(let[t,n]of e.async_deriveds){let e=this.async_deriveds.get(t);e&&n.promise.then(e.resolve).catch(e.reject)}e.async_deriveds.clear(),this.transfer_effects(e.#u,e.#d);let t=e=>{var n=e.reactions;if(n!==null)for(let e of n){var r=e.f;if(r&2)t(e);else{var i=e;r&4194320&&!this.async_deriveds.has(i)&&(this.#d.delete(i),et(i,y),this.schedule(i))}}};for(let e of this.current.keys())t(e);this.oncommit(()=>e.discard()),e.#S(),Et=this,this.#g()}#b(e){for(var t=0;t<e.length;t+=1)rt(e[t],this.#u,this.#d)}capture(e,t,n=!1){e.v!==Se&&!this.previous.has(e)&&this.previous.set(e,e.v),e.f&8388608||(this.current.set(e,[t,n]),Ot?.set(e,t)),this.is_fork||(e.v=t)}activate(){Et=this}deactivate(){Et=null,Ot=null}flush(){try{jt=!0,Et=this,this.#g()}finally{Pt=0,kt=null,Mt=null,Nt=null,jt=!1,Et=null,Ot=null,qt.clear()}}discard(){for(let e of this.#i)e(this);this.#i.clear();for(let e of this.async_deriveds.values())e.reject(gt);this.#S(),this.#s?.resolve()}register_created_effect(e){this.#l.push(e)}#x(){for(let u=wt;u!==null;u=u.#n){var e=u.id<this.id,t=[];for(let[r,[i,a]]of this.current){if(u.current.has(r)){var n=u.current.get(r)[0];if(e&&i!==n)u.current.set(r,[i,a]);else continue}t.push(r)}if(e)for(let[e,t]of this.async_deriveds){let n=u.async_deriveds.get(e);n&&t.promise.then(n.resolve).catch(n.reject)}var r=[...u.current.keys()].filter(e=>!u.current.get(e)[1]);if(!(!u.#e||r.length===0)){var i=r.filter(e=>!this.current.has(e));if(i.length===0)e&&u.discard();else if(t.length>0){if(e)for(let e of this.#p)u.unskip_effect(e,e=>{e.f&4194320?u.schedule(e):u.#b([e])});u.activate();var a=new Set,o=new Map;for(var s of t)Vt(s,i,a,o);o=new Map;var c=[...u.current].filter(([e,t])=>{let n=this.current.get(e);return n?n[0]!==t[0]||n[1]!==t[1]:!0}).map(([e])=>e);if(c.length>0)for(let e of this.#l)!(e.f&155648)&&Ht(e,c,o)&&(e.f&4194320?(et(e,y),u.schedule(e)):u.#u.add(e));if(u.#c.length>0&&!u.#m){u.apply();for(var l of u.#c)u.#_(l,[],[]);u.#c=[]}u.deactivate()}}}}increment(e,t){if(this.#a+=1,e){let e=this.#o.get(t)??0;this.#o.set(t,e+1)}}decrement(e,t){if(--this.#a,e){let e=this.#o.get(t)??0;e===1?this.#o.delete(t):this.#o.set(t,e-1)}this.#m||(this.#m=!0,Ye(()=>{this.#m=!1,this.linked&&this.flush()}))}transfer_effects(e,t){for(let t of e)this.#u.add(t);for(let e of t)this.#d.add(e);e.clear(),t.clear()}oncommit(e){this.#r.add(e)}ondiscard(e){this.#i.add(e)}settled(){return(this.#s??=h()).promise}static ensure(){if(Et===null){let t=Et=new e;!jt&&!At&&Ye(()=>{t.#e||t.flush()})}return Et}apply(){if(!ze||!this.is_fork&&this.#t===null&&this.#n===null){Ot=null;return}Ot=new Map;for(let[e,[t]]of this.current)Ot.set(e,t);for(let t=wt;t!==null;t=t.#n)if(!(t===this||t.is_fork)){var e=!1;if(t.id<this.id){for(let[n,[,r]]of t.current)if(!r&&this.current.has(n)){e=!0;break}}if(!e)for(let[e,n]of t.previous)Ot.has(e)||Ot.set(e,n)}}schedule(e){if(kt=e,e.b?.is_pending&&e.f&16777228&&!(e.f&32768)){e.b.defer_effect(e);return}for(var t=e;t.parent!==null;){t=t.parent;var n=t.f;if(Mt!==null&&t===nr&&(ze||($n===null||!($n.f&2))&&!it))return;if(n&96){if(!(n&1024))return;t.f^=v}}this.#c.push(t)}#S(){if(this.linked){var e=this.#t,t=this.#n;e===null?wt=t:e.#n=t,t===null?Tt=e:t.#t=e,this.linked=!1}}};function Lt(e){var t=At;At=!0;try{var n;for(e&&(Et!==null&&!Et.is_fork&&Et.flush(),n=e());;){if(Xe(),Et===null)return n;Et.flush()}}finally{At=t}}function Rt(){try{he()}catch(e){Qe(e,kt)}}var zt=null;function Bt(e){var t=e.length;if(t!==0){for(var n=0;n<t;){var r=e[n++];if(!(r.f&24576)&&hr(r)&&(zt=new Set,br(r),r.deps===null&&r.first===null&&r.nodes===null&&r.teardown===null&&r.ac===null&&Un(r),zt?.size>0)){qt.clear();for(let e of zt){if(e.f&24576)continue;let t=[e],n=e.parent;for(;n!==null;)zt.has(n)&&(zt.delete(n),t.push(n)),n=n.parent;for(let e=t.length-1;e>=0;e--){let n=t[e];n.f&24576||br(n)}}zt.clear()}}zt=null}}function Vt(e,t,n,r){if(!n.has(e)&&(n.add(e),e.reactions!==null))for(let i of e.reactions){let e=i.f;e&2?Vt(i,t,n,r):e&4194320&&!(e&2048)&&Ht(i,t,r)&&(et(i,y),Ut(i))}}function Ht(e,t,r){let i=r.get(e);if(i!==void 0)return i;if(e.deps!==null)for(let i of e.deps){if(n.call(t,i))return!0;if(i.f&2&&Ht(i,t,r))return r.set(i,!0),!0}return r.set(e,!1),!1}function Ut(e){Et.schedule(e)}function Wt(e,t){if(!(e.f&32&&e.f&1024)){e.f&2048?t.d.push(e):e.f&4096&&t.m.push(e),et(e,v);for(var n=e.first;n!==null;)Wt(n,t),n=n.next}}function Gt(e){et(e,v);for(var t=e.first;t!==null;)Gt(t),t=t.next}var Kt=new Set,qt=new Map,Jt=!1;function Yt(e,t){return{f:0,v:e,reactions:null,equals:Ie,rv:0,wv:0}}function L(e,t){let n=Yt(e,t);return ar(n),n}function Xt(e,t=!1,n=!0){let r=Yt(e);return t||(r.equals=Re),Be&&n&&He!==null&&He.l!==null&&(He.l.s??=[]).push(r),r}function R(e,t,n=!1){return $n!==null&&(!er||$n.f&131072)&&Ke()&&$n.f&4325394&&(ir===null||!ir.has(e))&&ye(),Zt(e,n?nn(t):t,Nt)}function Zt(e,t,n=null){if(!e.equals(t)){qt.set(e,Zn?t:e.v);var r=It.ensure();if(r.capture(e,t),e.f&2){let t=e;e.f&2048&&bt(t),Ot===null&&tt(t)}e.wv=mr(),tn(e,y,n),Ke()&&nr!==null&&nr.f&1024&&!(nr.f&96)&&(cr===null?lr([e]):cr.push(e)),!r.is_fork&&Kt.size>0&&!Jt&&Qt()}return t}function Qt(){Jt=!1;for(let e of Kt){e.f&1024&&et(e,b);let t;try{t=hr(e)}catch{t=!0}t&&br(e)}Kt.clear()}function $t(e,t=1){var n=U(e),r=t===1?n++:n--;return R(e,n),r}function en(e){R(e,e.v+1)}function tn(e,t,n){var r=e.reactions;if(r!==null)for(var i=Ke(),a=r.length,o=0;o<a;o++){var s=r[o],c=s.f;if(!(!i&&s===nr)){var l=(c&y)===0;if(l&&et(s,t),c&131072)Kt.add(s);else if(c&2){var u=s;Ot?.delete(u),c&65536||(c&512&&(nr===null||!(nr.f&2097152))&&(s.f|=k),tn(u,b,n))}else if(l){var d=s;c&16&&zt!==null&&zt.add(d),n===null?Ut(d):n.push(d)}}}}function nn(t){if(typeof t!=`object`||!t||j in t)return t;let n=l(t);if(n!==s&&n!==c)return t;var r=new Map,i=e(t),o=L(0),u=null,d=fr,f=e=>{if(fr===d)return e();var t=$n,n=fr;tr(null),pr(d);var r=e();return tr(t),pr(n),r};return i&&r.set(`length`,L(t.length,u)),new Proxy(t,{defineProperty(e,t,n){(!(`value`in n)||n.configurable===!1||n.enumerable===!1||n.writable===!1)&&_e();var i=r.get(t);return i===void 0?f(()=>{var e=L(n.value,u);return r.set(t,e),e}):R(i,n.value,!0),!0},deleteProperty(e,t){var n=r.get(t);if(n===void 0){if(t in e){let e=f(()=>L(Se,u));r.set(t,e),en(o)}}else R(n,Se),en(o);return!0},get(e,n,i){if(n===j)return t;var o=r.get(n),s=n in e;if(o===void 0&&(!s||a(e,n)?.writable)&&(o=f(()=>L(nn(s?e[n]:Se),u)),r.set(n,o)),o!==void 0){var c=U(o);return c===Se?void 0:c}return Reflect.get(e,n,i)},getOwnPropertyDescriptor(e,t){var n=Reflect.getOwnPropertyDescriptor(e,t);if(n&&`value`in n){var i=r.get(t);i&&(n.value=U(i))}else if(n===void 0){var a=r.get(t),o=a?.v;if(a!==void 0&&o!==Se)return{enumerable:!0,configurable:!0,value:o,writable:!0}}return n},has(e,t){if(t===j)return!0;var n=r.get(t),i=n!==void 0&&n.v!==Se||Reflect.has(e,t);return(n!==void 0||nr!==null&&(!i||a(e,t)?.writable))&&(n===void 0&&(n=f(()=>L(i?nn(e[t]):Se,u)),r.set(t,n)),U(n)===Se)?!1:i},set(e,t,n,s){var c=r.get(t),l=t in e;if(i&&t===`length`)for(var d=n;d<c.v;d+=1){var p=r.get(d+``);p===void 0?d in e&&(p=f(()=>L(Se,u)),r.set(d+``,p)):R(p,Se)}if(c===void 0)(!l||a(e,t)?.writable)&&(c=f(()=>L(void 0,u)),R(c,nn(n)),r.set(t,c));else{l=c.v!==Se;var m=f(()=>nn(n));R(c,m)}var h=Reflect.getOwnPropertyDescriptor(e,t);if(h?.set&&h.set.call(s,n),!l){if(i&&typeof t==`string`){var g=r.get(`length`),_=Number(t);Number.isInteger(_)&&_>=g.v&&R(g,_+1)}en(o)}return!0},ownKeys(e){U(o);var t=Reflect.ownKeys(e).filter(e=>{var t=r.get(e);return t===void 0||t.v!==Se});for(var[n,i]of r)i.v!==Se&&!(n in e)&&t.push(n);return t},setPrototypeOf(){ve()}})}function rn(e){try{if(typeof e==`object`&&e&&j in e)return e[j]}catch{}return e}function an(e,t){return Object.is(rn(e),rn(t))}var on,sn,cn,ln;function un(){if(on===void 0){on=window,sn=/Firefox/.test(navigator.userAgent);var e=Element.prototype,t=Node.prototype,n=Text.prototype;cn=a(t,`firstChild`).get,ln=a(t,`nextSibling`).get,u(e)&&(e[ie]=void 0,e[re]=null,e[ae]=void 0,e.__e=void 0),u(n)&&(n[oe]=void 0)}}function dn(e=``){return document.createTextNode(e)}function fn(e){return cn.call(e)}function pn(e){return ln.call(e)}function z(e,t){if(!P)return fn(e);var n=fn(Ae);if(n===null)n=Ae.appendChild(dn());else if(t&&n.nodeType!==3){var r=dn();return n?.before(r),je(r),r}return t&&_n(n),je(n),n}function B(e,t=!1){if(!P){var n=fn(e);return n instanceof Comment&&n.data===``?pn(n):n}if(t){if(Ae?.nodeType!==3){var r=dn();return Ae?.before(r),je(r),r}_n(Ae)}return Ae}function V(e,t=1,n=!1){let r=P?Ae:e;for(var i;t--;)i=r,r=pn(r);if(!P)return r;if(n){if(r?.nodeType!==3){var a=dn();return r===null?i?.after(a):r.before(a),je(a),a}_n(r)}return je(r),r}function mn(e){e.textContent=``}function hn(){return!ze||zt!==null?!1:(nr.f&C)!==0}function gn(e,t,n){return t==null||t===`http://www.w3.org/1999/xhtml`?n?document.createElement(e,{is:n}):document.createElement(e):n?document.createElementNS(t,e,{is:n}):document.createElementNS(t,e)}function _n(e){if(e.nodeValue.length<65536)return;let t=e.nextSibling;for(;t!==null&&t.nodeType===3;)t.remove(),e.nodeValue+=t.nodeValue,t=e.nextSibling}function vn(e,t){if(t){let t=document.body;e.autofocus=!0,Ye(()=>{document.activeElement===t&&e.focus()})}}var yn=!1;function bn(){yn||(yn=!0,document.addEventListener(`reset`,e=>{Promise.resolve().then(()=>{if(!e.defaultPrevented)for(let t of e.target.elements)t[se]?.()})},{capture:!0}))}function xn(e){var t=$n,n=nr;tr(null),rr(null);try{return e()}finally{tr(t),rr(n)}}function Sn(e,t,n,r=n){e.addEventListener(t,()=>xn(n));let i=e[se];i?e[se]=()=>{i(),r(!0)}:e[se]=()=>r(!0),bn()}function Cn(e){nr===null&&($n===null&&me(e),pe()),Zn&&fe(e)}function wn(e,t){var n=t.last;n===null?t.last=t.first=e:(n.next=e,e.prev=n,t.last=e)}function Tn(e,t){var n=nr;n!==null&&n.f&8192&&(e|=x);var r={ctx:He,deps:null,nodes:null,f:e|y|512,first:null,fn:t,last:null,next:null,parent:n,b:n&&n.b,prev:null,teardown:null,wv:0,ac:null};Et?.register_created_effect(r);var i=r;if(e&4)Mt===null?It.ensure().schedule(r):Mt.push(r);else if(t!==null){try{br(r)}catch(e){throw Vn(r),e}i.deps===null&&i.teardown===null&&i.nodes===null&&i.first===i.last&&!(i.f&524288)&&(i=i.first,e&16&&e&65536&&i!==null&&(i.f|=T))}if(i!==null&&(i.parent=n,n!==null&&wn(i,n),$n!==null&&$n.f&2&&!(e&64))){var a=$n;(a.effects??=[]).push(i)}return r}function En(){return $n!==null&&!er}function Dn(e){let t=Tn(8,null);return et(t,v),t.teardown=e,t}function On(e){Cn(`$effect`);var t=nr.f;if(!$n&&t&32&&He!==null&&!He.i){var n=He;(n.e??=[]).push(e)}else return kn(e)}function kn(e){return Tn(4|D,e)}function An(e){return Cn(`$effect.pre`),Tn(8|D,e)}function jn(e){It.ensure();let t=Tn(64|E,e);return(e={})=>new Promise(n=>{e.outro?Wn(t,()=>{Vn(t),n(void 0)}):(Vn(t),n(void 0))})}function Mn(e){return Tn(4,e)}function Nn(e){return Tn(ee|E,e)}function Pn(e,t=0){return Tn(8|t,e)}function H(e,t=[],n=[],r=[]){dt(r,t,n,t=>{Tn(8,()=>{e(...t.map(U))})})}function Fn(e,t=0){return Tn(16|t,e)}function In(e,t=0){return Tn(_|t,e)}function Ln(e){return Tn(32|E,e)}function Rn(e){var t=e.teardown;if(t!==null){let e=Zn,n=$n;Qn(!0),tr(null);try{t.call(null)}finally{Qn(e),tr(n)}}}function zn(e,t=!1){var n=e.first;for(e.first=e.last=null;n!==null;){let e=n.ac;e!==null&&xn(()=>{e.abort(N)});var r=n.next;n.f&64?n.parent=null:Vn(n,t),n=r}}function Bn(e){for(var t=e.first;t!==null;){var n=t.next;t.f&32||Vn(t),t=n}}function Vn(e,t=!0){var n=!1;(t||e.f&262144)&&e.nodes!==null&&e.nodes.end!==null&&(Hn(e.nodes.start,e.nodes.end),n=!0),e.f|=w,zn(e,t&&!n),yr(e,0);var r=e.nodes&&e.nodes.t;if(r!==null)for(let e of r)e.stop();Rn(e),e.f^=w,e.f|=S;var i=e.parent;i!==null&&i.first!==null&&Un(e),e.next=e.prev=e.teardown=e.ctx=e.deps=e.fn=e.nodes=e.ac=e.b=null}function Hn(e,t){for(;e!==null;){var n=e===t?null:pn(e);e.remove(),e=n}}function Un(e){var t=e.parent,n=e.prev,r=e.next;n!==null&&(n.next=r),r!==null&&(r.prev=n),t!==null&&(t.first===e&&(t.first=r),t.last===e&&(t.last=n))}function Wn(e,t,n=!0){var r=[];Gn(e,r,!0);var i=()=>{n&&Vn(e),t&&t()},a=r.length;if(a>0){var o=()=>--a||i();for(var s of r)s.out(o)}else i()}function Gn(e,t,n){if(!(e.f&8192)){e.f^=x;var r=e.nodes&&e.nodes.t;if(r!==null)for(let e of r)(e.is_global||n)&&t.push(e);for(var i=e.first;i!==null;){var a=i.next;if(!(i.f&64)){var o=(i.f&65536)!=0||(i.f&32)!=0&&(e.f&16)!=0;Gn(i,t,o?n:!1)}i=a}}}function Kn(e){qn(e,!0)}function qn(e,t){if(e.f&8192){e.f^=x,e.f&1024||(et(e,y),It.ensure().schedule(e));for(var n=e.first;n!==null;){var r=n.next,i=(n.f&65536)!=0||(n.f&32)!=0;qn(n,i?t:!1),n=r}var a=e.nodes&&e.nodes.t;if(a!==null)for(let e of a)(e.is_global||t)&&e.in()}}function Jn(e,t){if(e.nodes)for(var n=e.nodes.start,r=e.nodes.end;n!==null;){var i=n===r?null:pn(n);t.append(n),n=i}}var Yn=null,Xn=!1,Zn=!1;function Qn(e){Zn=e}var $n=null,er=!1;function tr(e){$n=e}var nr=null;function rr(e){nr=e}var ir=null;function ar(e){$n!==null&&(!ze||$n.f&2)&&(ir??=new Set).add(e)}var or=null,sr=0,cr=null;function lr(e){cr=e}var ur=1,dr=0,fr=dr;function pr(e){fr=e}function mr(){return++ur}function hr(e){var t=e.f;if(t&2048)return!0;if(t&2&&(e.f&=~k),t&4096){for(var n=e.deps,r=n.length,i=0;i<r;i++){var a=n[i];if(hr(a)&&xt(a),a.wv>e.wv)return!0}t&512&&Ot===null&&et(e,v)}return!1}function gr(e,t,n=!0){var r=e.reactions;if(r!==null&&!(!ze&&ir!==null&&ir.has(e)))for(var i=0;i<r.length;i++){var a=r[i];a.f&2?gr(a,t,!1):t===a&&(n?et(a,y):a.f&1024&&et(a,b),Ut(a))}}function _r(e){var t=or,n=sr,r=cr,i=$n,a=ir,o=He,s=er,c=fr,l=e.f;or=null,sr=0,cr=null,$n=l&96?null:e,ir=null,Ue(e.ctx),er=!1,fr=++dr,e.ac!==null&&(xn(()=>{e.ac.abort(N)}),e.ac=null);try{e.f|=A;var u=e.fn,d=u();e.f|=C;var f=e.deps,p=Et?.is_fork;if(or!==null){var m;if(p||yr(e,sr),f!==null&&sr>0)for(f.length=sr+or.length,m=0;m<or.length;m++)f[sr+m]=or[m];else e.deps=f=or;if(En()&&e.f&512)for(m=sr;m<f.length;m++)(f[m].reactions??=[]).push(e)}else!p&&f!==null&&sr<f.length&&(yr(e,sr),f.length=sr);if(Ke()&&cr!==null&&!er&&f!==null&&!(e.f&6146))for(m=0;m<cr.length;m++)gr(cr[m],e);if(i!==null&&i!==e){if(dr++,i.deps!==null)for(let e=0;e<n;e+=1)i.deps[e].rv=dr;if(t!==null)for(let e of t)e.rv=dr;cr!==null&&(r===null?r=cr:r.push(...cr))}return e.f&8388608&&(e.f^=te),d}catch(e){return Ze(e)}finally{e.f^=A,or=t,sr=n,cr=r,$n=i,ir=a,Ue(o),er=s,fr=c}}function vr(e,r){let i=r.reactions;if(i!==null){var a=t.call(i,e);if(a!==-1){var o=i.length-1;o===0?i=r.reactions=null:(i[a]=i[o],i.pop())}}if(i===null&&r.f&2&&(or===null||!n.call(or,r))){var s=r;s.f&512&&(s.f^=512,s.f&=~k),s.v!==Se&&tt(s),St(s),yr(s,0)}}function yr(e,t){var n=e.deps;if(n!==null)for(var r=t;r<n.length;r++)vr(e,n[r])}function br(e){var t=e.f;if(!(t&16384)){et(e,v);var n=nr,r=Xn;nr=e,Xn=!0;try{t&16777232?Bn(e):zn(e),Rn(e);var i=_r(e);e.teardown=typeof i==`function`?i:null,e.wv=ur}finally{Xn=r,nr=n}}}async function xr(){if(ze)return new Promise(e=>{requestAnimationFrame(()=>e()),setTimeout(()=>e())});await Promise.resolve(),Lt()}function U(e){var t=(e.f&2)!=0;if(Yn?.add(e),$n!==null&&!er&&!(nr!==null&&nr.f&16384)&&(ir===null||!ir.has(e))){var r=$n.deps;if($n.f&2097152)e.rv<dr&&(e.rv=dr,or===null&&r!==null&&r[sr]===e?sr++:or===null?or=[e]:or.push(e));else{$n.deps??=[],n.call($n.deps,e)||$n.deps.push(e);var i=e.reactions;i===null?e.reactions=[$n]:n.call(i,$n)||i.push($n)}}if(Zn&&qt.has(e))return qt.get(e);if(t){var a=e;if(Zn){var o=a.v;return(!(a.f&1024)&&a.reactions!==null||Cr(a))&&(o=bt(a)),qt.set(a,o),o}var s=(a.f&512)==0&&!er&&$n!==null&&(Xn||($n.f&512)!=0),c=(a.f&C)===0;hr(a)&&(s&&(a.f|=512),xt(a)),s&&!c&&(Ct(a),Sr(a))}if(Ot?.has(e))return Ot.get(e);if(e.f&8388608)throw e.v;return e.v}function Sr(e){if(e.f|=512,e.deps!==null)for(let t of e.deps)(t.reactions??=[]).push(e),t.f&2&&!(t.f&512)&&(Ct(t),Sr(t))}function Cr(e){if(e.v===Se)return!0;if(e.deps===null)return!1;for(let t of e.deps)if(qt.has(t)||t.f&2&&Cr(t))return!0;return!1}function wr(e){var t=er;try{return er=!0,e()}finally{er=t}}function Tr(e){if(!(typeof e!=`object`||!e||e instanceof EventTarget)){if(j in e)Er(e);else if(!Array.isArray(e))for(let t in e){let n=e[t];typeof n==`object`&&n&&j in n&&Er(n)}}}function Er(e,t=new Set){if(typeof e==`object`&&e&&!(e instanceof EventTarget)&&!t.has(e)){t.add(e),e instanceof Date&&e.getTime();for(let n in e)try{Er(e[n],t)}catch{}let n=l(e);if(n!==Object.prototype&&n!==Array.prototype&&n!==Map.prototype&&n!==Set.prototype&&n!==Date.prototype){let t=o(n);for(let n in t){let r=t[n].get;if(r)try{r.call(e)}catch{}}}}}function Dr(e){return e.endsWith(`capture`)&&e!==`gotpointercapture`&&e!==`lostpointercapture`}var Or=[`beforeinput`,`click`,`change`,`dblclick`,`contextmenu`,`focusin`,`focusout`,`input`,`keydown`,`keyup`,`mousedown`,`mousemove`,`mouseout`,`mouseover`,`mouseup`,`pointerdown`,`pointermove`,`pointerout`,`pointerover`,`pointerup`,`touchend`,`touchmove`,`touchstart`];function kr(e){return Or.includes(e)}var Ar=`allowfullscreen.async.autofocus.autoplay.checked.controls.default.disabled.formnovalidate.indeterminate.inert.ismap.loop.multiple.muted.nomodule.novalidate.open.playsinline.readonly.required.reversed.seamless.selected.webkitdirectory.defer.disablepictureinpicture.disableremoteplayback`.split(`.`),jr={formnovalidate:`formNoValidate`,ismap:`isMap`,nomodule:`noModule`,playsinline:`playsInline`,readonly:`readOnly`,defaultvalue:`defaultValue`,defaultchecked:`defaultChecked`,srcobject:`srcObject`,novalidate:`noValidate`,allowfullscreen:`allowFullscreen`,disablepictureinpicture:`disablePictureInPicture`,disableremoteplayback:`disableRemotePlayback`};function Mr(e){return e=e.toLowerCase(),jr[e]??e}[...Ar];var Nr=[`touchstart`,`touchmove`];function Pr(e){return Nr.includes(e)}var Fr=[`textarea`,`script`,`style`,`title`];function Ir(e){return Fr.includes(e)}var Lr=Symbol(`events`),Rr=new Set,zr=new Set;function Br(e){if(!P)return;e.removeAttribute(`onload`),e.removeAttribute(`onerror`);let t=e.__e;t!==void 0&&(e.__e=void 0,queueMicrotask(()=>{e.isConnected&&e.dispatchEvent(t)}))}function Vr(e,t,n,r={}){function i(e){if(r.capture||Gr.call(t,e),!e.cancelBubble)return xn(()=>n?.call(this,e))}return e.startsWith(`pointer`)||e.startsWith(`touch`)||e===`wheel`?Ye(()=>{t.addEventListener(e,i,r)}):t.addEventListener(e,i,r),i}function Hr(e,t,n,r,i){var a={capture:r,passive:i},o=Vr(e,t,n,a);(t===document.body||t===window||t===document||t instanceof HTMLMediaElement)&&Dn(()=>{t.removeEventListener(e,o,a)})}function W(e,t,n){(t[Lr]??={})[e]=n}function Ur(e){for(var t=0;t<e.length;t++)Rr.add(e[t]);for(var n of zr)n(e)}var Wr=null;function Gr(e){var t=this,n=t.ownerDocument,r=e.type,a=e.composedPath?.()||[],o=a[0]||e.target;Wr=e;var s=0,c=Wr===e&&e[Lr];if(c){var l=a.indexOf(c);if(l!==-1&&(t===document||t===window)){e[Lr]=t;return}var u=a.indexOf(t);if(u===-1)return;l<=u&&(s=l)}if(o=a[s]||e.target,o!==t){i(e,`currentTarget`,{configurable:!0,get(){return o||n}});var d=$n,f=nr;tr(null),rr(null);try{for(var p,m=[];o!==null&&o!==t;){try{var h=o[Lr]?.[r];h!=null&&(!o.disabled||e.target===o)&&h.call(o,e)}catch(e){p?m.push(e):p=e}if(e.cancelBubble)break;s++,o=s<a.length?a[s]:null}if(p){for(let e of m)queueMicrotask(()=>{throw e});throw p}}finally{e[Lr]=t,delete e.currentTarget,tr(d),rr(f)}}}var Kr=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy(`svelte-trusted-html`,{createHTML:e=>e});function qr(e){return Kr?.createHTML(e)??e}function Jr(e){var t=gn(`template`);return t.innerHTML=qr(e.replaceAll(`<!>`,`<!---->`)),t.content}function Yr(e,t){var n=nr;n.nodes===null&&(n.nodes={start:e,end:t,a:null,t:null})}function G(e,t){var n=(t&1)!=0,r=(t&2)!=0,i,a=!e.startsWith(`<!>`);return()=>{if(P)return Yr(Ae,null),Ae;i===void 0&&(i=Jr(a?e:`<!>`+e),n||(i=fn(i)));var t=r||sn?document.importNode(i,!0):i.cloneNode(!0);if(n){var o=fn(t),s=t.lastChild;Yr(o,s)}else Yr(t,t);return t}}function Xr(e,t,n=`svg`){var r=!e.startsWith(`<!>`),i=(t&1)!=0,a=`<${n}>${r?e:`<!>`+e}</${n}>`,o;return()=>{if(P)return Yr(Ae,null),Ae;if(!o){var e=fn(Jr(a));if(i)for(o=document.createDocumentFragment();fn(e);)o.appendChild(fn(e));else o=fn(e)}var t=o.cloneNode(!0);if(i){var n=fn(t),r=t.lastChild;Yr(n,r)}else Yr(t,t);return t}}function Zr(e,t){return Xr(e,t,`svg`)}function Qr(e=``){if(!P){var t=dn(e+``);return Yr(t,t),t}var n=Ae;return n.nodeType===3?_n(n):(n.before(n=dn()),je(n)),Yr(n,n),n}function $r(){if(P)return Yr(Ae,null),Ae;var e=document.createDocumentFragment(),t=document.createComment(``),n=dn();return e.append(t,n),Yr(t,n),e}function K(e,t){if(P){var n=nr;(!(n.f&32768)||n.nodes.end===null)&&(n.nodes.end=Ae),Me();return}e!==null&&e.before(t)}function q(e,t){var n=t==null?``:typeof t==`object`?`${t}`:t;n!==(e[oe]??=e.nodeValue)&&(e[oe]=n,e.nodeValue=`${n}`)}function ei(e,t){return ni(e,t)}var ti=new Map;function ni(e,{target:t,anchor:n,props:i={},events:a,context:o,intro:s=!0,transformError:c}){un();var l=void 0,u=jn(()=>{var s=n??t.appendChild(dn());lt(s,{pending:()=>{}},t=>{We({});var n=He;if(o&&(n.c=o),a&&(i.$$events=a),P&&Yr(t,null),l=e(t,i)||{},P&&(nr.nodes.end=Ae,Ae===null||Ae.nodeType!==8||Ae.data!==`]`))throw Ee(),xe;Ge()},c);var u=new Set,d=e=>{for(var n=0;n<e.length;n++){var r=e[n];if(!u.has(r)){u.add(r);var i=Pr(r);for(let e of[t,document]){var a=ti.get(e);a===void 0&&(a=new Map,ti.set(e,a));var o=a.get(r);o===void 0?(e.addEventListener(r,Gr,{passive:i}),a.set(r,1)):a.set(r,o+1)}}}};return d(r(Rr)),zr.add(d),()=>{for(var e of u)for(let n of[t,document]){var r=ti.get(n),i=r.get(e);--i==0?(n.removeEventListener(e,Gr),r.delete(e),r.size===0&&ti.delete(n)):r.set(e,i)}zr.delete(d),s!==n&&s.parentNode?.removeChild(s)}});return ri.set(l,u),l}var ri=new WeakMap,ii=class{anchor;#e=new Map;#t=new Map;#n=new Map;#r=new Set;#i=!0;constructor(e,t=!0){this.anchor=e,this.#i=t}#a=e=>{if(this.#e.has(e)){var t=this.#e.get(e),n=this.#t.get(t);if(n)Kn(n),this.#r.delete(t);else{var r=this.#n.get(t);r&&(Kn(r.effect),this.#t.set(t,r.effect),this.#n.delete(t),r.fragment.lastChild.remove(),this.anchor.before(r.fragment),n=r.effect)}for(let[t,n]of this.#e){if(this.#e.delete(t),t===e)break;let r=this.#n.get(n);r&&(Vn(r.effect),this.#n.delete(n))}for(let[e,r]of this.#t){if(e===t||this.#r.has(e))continue;let i=()=>{if(Array.from(this.#e.values()).includes(e)){var t=document.createDocumentFragment();Jn(r,t),t.append(dn()),this.#n.set(e,{effect:r,fragment:t})}else Vn(r);this.#r.delete(e),this.#t.delete(e)};this.#i||!n?(this.#r.add(e),Wn(r,i,!1)):i()}}};#o=e=>{this.#e.delete(e);let t=Array.from(this.#e.values());for(let[e,n]of this.#n)t.includes(e)||(Vn(n.effect),this.#n.delete(e))};ensure(e,t){var n=Et,r=hn();if(t&&!this.#t.has(e)&&!this.#n.has(e))if(r){var i=document.createDocumentFragment(),a=dn();i.append(a),this.#n.set(e,{effect:Ln(()=>t(a)),fragment:i})}else this.#t.set(e,Ln(()=>t(this.anchor)));if(this.#e.set(n,e),r){for(let[t,r]of this.#t)t===e?n.unskip_effect(r):n.skip_effect(r);for(let[t,r]of this.#n)t===e?n.unskip_effect(r.effect):n.skip_effect(r.effect);n.oncommit(this.#a),n.ondiscard(this.#o)}else P&&(this.anchor=Ae),this.#a(n)}};function J(e,t,n=!1){var r;P&&(r=Ae,Me());var i=new ii(e),a=n?T:0;function o(e,t){if(P){var n=Fe(r);if(e!==parseInt(n.substring(1))){var a=Pe();je(a),i.anchor=a,ke(!1),i.ensure(e,t),ke(!0);return}}i.ensure(e,t)}Fn(()=>{var e=!1;t((t,n=0)=>{e=!0,o(n,t)}),e||o(-1,null)},a)}var ai=Symbol(`NaN`);function oi(e,t,n){P&&Me();var r=new ii(e),i=!Ke();Fn(()=>{var e=t();e!==e&&(e=ai),i&&typeof e==`object`&&e&&(e={}),r.ensure(e,n)})}function si(e,t){return t}function ci(e,t,n){for(var i=[],a=t.length,o,s=t.length,c=0;c<a;c++){let n=t[c];Wn(n,()=>{if(o){if(o.pending.delete(n),o.done.add(n),o.pending.size===0){var t=e.outrogroups;li(e,r(o.done)),t.delete(o),t.size===0&&(e.outrogroups=null)}}else--s},!1)}if(s===0){var l=i.length===0&&n!==null;if(l){var u=n,d=u.parentNode;mn(d),d.append(u),e.items.clear()}li(e,t,!l)}else o={pending:new Set(t),done:new Set},(e.outrogroups??=new Set).add(o)}function li(e,t,n=!0){var r;if(e.pending.size>0){r=new Set;for(let t of e.pending.values())for(let n of t)r.add(e.items.get(n).e)}for(var i=0;i<t.length;i++){var a=t[i];r?.has(a)?(a.f|=O,Jn(a,document.createDocumentFragment())):Vn(t[i],n)}}var ui;function Y(t,n,i,a,o,s=null){var c=t,l=new Map;if(n&4){var u=t;c=P?je(fn(u)):u.appendChild(dn())}P&&Me();var d=null,f=vt(()=>{var t=i();return e(t)?t:t==null?[]:r(t)}),p,m=new Map,h=!0;function g(e){v.effect.f&16384||(v.pending.delete(e),v.fallback=d,fi(v,p,c,n,a),d!==null&&(p.length===0?d.f&33554432?(d.f^=O,mi(d,null,c)):Kn(d):Wn(d,()=>{d=null})))}function _(e){v.pending.delete(e)}var v={effect:Fn(()=>{p=U(f);var e=p.length;let t=!1;P&&Fe(c)===`[!`!=(e===0)&&(c=Pe(),je(c),ke(!1),t=!0);for(var r=new Set,u=Et,v=hn(),y=0;y<e;y+=1){P&&Ae.nodeType===8&&Ae.data===`]`&&(c=Ae,t=!0,ke(!1));var b=p[y],x=a(b,y),S=h?null:l.get(x);S?(S.v&&Zt(S.v,b),S.i&&Zt(S.i,y),v&&u.unskip_effect(S.e)):(S=pi(l,h?c:ui??=dn(),b,x,y,o,n,i),h||(S.e.f|=O),l.set(x,S)),r.add(x)}if(e===0&&s&&!d&&(h?d=Ln(()=>s(c)):(d=Ln(()=>s(ui??=dn())),d.f|=O)),e>r.size&&de(``,``,``),P&&e>0&&je(Pe()),!h)if(m.set(u,r),v){for(let[e,t]of l)r.has(e)||u.skip_effect(t.e);u.oncommit(g),u.ondiscard(_)}else g(u);t&&ke(!0),U(f)}),flags:n,items:l,pending:m,outrogroups:null,fallback:d};h=!1,P&&(c=Ae)}function di(e){for(;e!==null&&!(e.f&32);)e=e.next;return e}function fi(e,t,n,i,a){var o=(i&8)!=0,s=t.length,c=e.items,l=di(e.effect.first),u,d=null,f,p=[],m=[],h,g,_,v;if(o)for(v=0;v<s;v+=1)h=t[v],g=a(h,v),_=c.get(g).e,_.f&33554432||(_.nodes?.a?.measure(),(f??=new Set).add(_));for(v=0;v<s;v+=1){if(h=t[v],g=a(h,v),_=c.get(g).e,e.outrogroups!==null)for(let t of e.outrogroups)t.pending.delete(_),t.done.delete(_);if(_.f&8192&&(Kn(_),o&&(_.nodes?.a?.unfix(),(f??=new Set).delete(_))),_.f&33554432)if(_.f^=O,_===l)mi(_,null,n);else{var y=d?d.next:l;_===e.effect.last&&(e.effect.last=_.prev),_.prev&&(_.prev.next=_.next),_.next&&(_.next.prev=_.prev),hi(e,d,_),hi(e,_,y),mi(_,y,n),d=_,p=[],m=[],l=di(d.next);continue}if(_!==l){if(u!==void 0&&u.has(_)){if(p.length<m.length){var b=m[0],x;d=b.prev;var S=p[0],C=p[p.length-1];for(x=0;x<p.length;x+=1)mi(p[x],b,n);for(x=0;x<m.length;x+=1)u.delete(m[x]);hi(e,S.prev,C.next),hi(e,d,S),hi(e,C,b),l=b,d=C,--v,p=[],m=[]}else u.delete(_),mi(_,l,n),hi(e,_.prev,_.next),hi(e,_,d===null?e.effect.first:d.next),hi(e,d,_),d=_;continue}for(p=[],m=[];l!==null&&l!==_;)(u??=new Set).add(l),m.push(l),l=di(l.next);if(l===null)continue}_.f&33554432||p.push(_),d=_,l=di(_.next)}if(e.outrogroups!==null){for(let t of e.outrogroups)t.pending.size===0&&(li(e,r(t.done)),e.outrogroups?.delete(t));e.outrogroups.size===0&&(e.outrogroups=null)}if(l!==null||u!==void 0){var w=[];if(u!==void 0)for(_ of u)_.f&8192||w.push(_);for(;l!==null;)!(l.f&8192)&&l!==e.fallback&&w.push(l),l=di(l.next);var T=w.length;if(T>0){var E=i&4&&s===0?n:null;if(o){for(v=0;v<T;v+=1)w[v].nodes?.a?.measure();for(v=0;v<T;v+=1)w[v].nodes?.a?.fix()}ci(e,w,E)}}o&&Ye(()=>{if(f!==void 0)for(_ of f)_.nodes?.a?.apply()})}function pi(e,t,n,r,i,a,o,s){var c=o&1?o&16?Yt(n):Xt(n,!1,!1):null,l=o&2?Yt(i):null;return{v:c,i:l,e:Ln(()=>(a(t,c??n,l??i,s),()=>{e.delete(r)}))}}function mi(e,t,n){if(e.nodes)for(var r=e.nodes.start,i=e.nodes.end,a=t&&!(t.f&33554432)?t.nodes.start:n;r!==null;){var o=pn(r);if(a.before(r),r===i)return;r=o}}function hi(e,t,n){t===null?e.effect.first=n:t.next=n,n===null?e.effect.last=t:n.prev=t}function gi(e,t,n,r,i){P&&Me();var a=t.$$slots?.[n],o=!1;a===!0&&(a=t[n==="default"?`children`:n],o=!0),a===void 0?i!==null&&i(e):a(e,o?()=>r:r)}function _i(e,t,n){var r;P&&(r=Ae,Me());var i=new ii(e);Fn(()=>{var e=t()??null;if(P&&Fe(r)===`[`!=(e!==null)){var a=Pe();je(a),i.anchor=a,ke(!1),i.ensure(e,e&&(t=>n(t,e))),ke(!0);return}i.ensure(e,e&&(t=>n(t,e)))},T)}function vi(e,t,n,r,i,a){let o=P;P&&Me();var s=null;P&&Ae.nodeType===1&&(s=Ae,Me());var c=P?Ae:e,l=new ii(c,!1);Fn(()=>{let e=t()||null;var a=i?i():n||e===`svg`?we:void 0;if(e===null){l.ensure(null,null);return}return l.ensure(e,t=>{if(e){if(s=P?s:gn(e,a),Yr(s,s),r){var n=null;P&&Ir(e)&&s.append(n=document.createComment(``));var i=P?fn(s):s.appendChild(dn());P&&(i===null?ke(!1):je(i)),r(s,i),n?.remove()}nr.nodes.end=s,t.before(s)}P&&je(t)}),()=>{}},T),Dn(()=>{}),o&&(ke(!0),je(c))}function yi(e,t){var n=void 0,r;In(()=>{n!==(n=t())&&(r&&=(Vn(r),null),n&&(r=Ln(()=>{Mn(()=>n(e))})))})}function bi(e){var t,n,r=``;if(typeof e==`string`||typeof e==`number`)r+=e;else if(typeof e==`object`)if(Array.isArray(e)){var i=e.length;for(t=0;t<i;t++)e[t]&&(n=bi(e[t]))&&(r&&(r+=` `),r+=n)}else for(n in e)e[n]&&(r&&(r+=` `),r+=n);return r}function xi(){for(var e,t,n=0,r=``,i=arguments.length;n<i;n++)(e=arguments[n])&&(t=bi(e))&&(r&&(r+=` `),r+=t);return r}function Si(e){return typeof e==`object`?xi(e):e??``}var Ci=[...` 	
-\r\f\xA0\v`];function wi(e,t,n){var r=e==null?``:``+e;if(t&&(r=r?r+` `+t:t),n){for(var i of Object.keys(n))if(n[i])r=r?r+` `+i:i;else if(r.length)for(var a=i.length,o=0;(o=r.indexOf(i,o))>=0;){var s=o+a;(o===0||Ci.includes(r[o-1]))&&(s===r.length||Ci.includes(r[s]))?r=(o===0?``:r.substring(0,o))+r.substring(s+1):o=s}}return r===``?null:r}function Ti(e,t=!1){var n=t?` !important;`:`;`,r=``;for(var i of Object.keys(e)){var a=e[i];a!=null&&a!==``&&(r+=` `+i+`: `+a+n)}return r}function Ei(e){return e[0]!==`-`||e[1]!==`-`?e.toLowerCase():e}function Di(e,t){if(t){var n=``,r,i;if(Array.isArray(t)?(r=t[0],i=t[1]):r=t,e){e=String(e).replaceAll(/\s*\/\*.*?\*\/\s*/g,``).trim();var a=!1,o=0,s=!1,c=[];r&&c.push(...Object.keys(r).map(Ei)),i&&c.push(...Object.keys(i).map(Ei));var l=0,u=-1;let t=e.length;for(var d=0;d<t;d++){var f=e[d];if(s?f===`/`&&e[d-1]===`*`&&(s=!1):a?a===f&&(a=!1):f===`/`&&e[d+1]===`*`?s=!0:f===`"`||f===`'`?a=f:f===`(`?o++:f===`)`&&o--,!s&&a===!1&&o===0){if(f===`:`&&u===-1)u=d;else if(f===`;`||d===t-1){if(u!==-1){var p=Ei(e.substring(l,u).trim());if(!c.includes(p)){f!==`;`&&d++;var m=e.substring(l,d).trim();n+=` `+m+`;`}}l=d+1,u=-1}}}}return r&&(n+=Ti(r)),i&&(n+=Ti(i,!0)),n=n.trim(),n===``?null:n}return e==null?null:String(e)}function X(e,t,n,r,i,a){var o=e[ie];if(P||o!==n||o===void 0){var s=wi(n,r,a);(!P||s!==e.getAttribute(`class`))&&(s==null?e.removeAttribute(`class`):t?e.className=s:e.setAttribute(`class`,s)),e[ie]=n}else if(a&&i!==a)for(var c in a){var l=!!a[c];(i==null||l!==!!i[c])&&e.classList.toggle(c,l)}return a}function Oi(e,t={},n,r){for(var i in n){var a=n[i];t[i]!==a&&(n[i]==null?e.style.removeProperty(i):e.style.setProperty(i,a,r))}}function Z(e,t,n,r){var i=e[ae];if(P||i!==t){var a=Di(t,r);(!P||a!==e.getAttribute(`style`))&&(a==null?e.removeAttribute(`style`):e.style.cssText=a),e[ae]=t}else r&&(Array.isArray(r)?(Oi(e,n?.[0],r[0]),Oi(e,n?.[1],r[1],`important`)):Oi(e,n,r));return r}function ki(t,n,r=!1){if(t.multiple){if(n==null)return;if(!e(n))return De();for(var i of t.options)i.selected=n.includes(Mi(i));return}for(i of t.options)if(an(Mi(i),n)){i.selected=!0;return}(!r||n!==void 0)&&(t.selectedIndex=-1)}function Ai(e){var t=new MutationObserver(()=>{ki(e,e.__value)});t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`value`]}),Dn(()=>{t.disconnect()})}function ji(e,t,n=t){var r=new WeakSet,i=!0;Sn(e,`change`,t=>{var i=t?`[selected]`:`:checked`,a;if(e.multiple)a=[].map.call(e.querySelectorAll(i),Mi);else{var o=e.querySelector(i)??e.querySelector(`option:not([disabled])`);a=o&&Mi(o)}n(a),e.__value=a,Et!==null&&r.add(Et)}),Mn(()=>{var a=t();if(e===document.activeElement){var o=ze?Dt:Et;if(r.has(o))return}if(ki(e,a,i),i&&a===void 0){var s=e.querySelector(`:checked`);s!==null&&(a=Mi(s),n(a))}e.__value=a,i=!1}),Ai(e)}function Mi(e){return`__value`in e?e.__value:e.value}var Ni=Symbol(`class`),Pi=Symbol(`style`),Fi=Symbol(`is custom element`),Ii=Symbol(`is html`),Li=ce?`link`:`LINK`,Ri=ce?`input`:`INPUT`,zi=ce?`option`:`OPTION`,Bi=ce?`select`:`SELECT`,Vi=ce?`progress`:`PROGRESS`;function Hi(e){if(P){var t=!1,n=()=>{if(!t){if(t=!0,e.hasAttribute(`value`)){var n=e.value;Q(e,`value`,null),e.value=n}if(e.hasAttribute(`checked`)){var r=e.checked;Q(e,`checked`,null),e.checked=r}}};e[se]=n,Ye(n),bn()}}function Ui(e,t){var n=qi(e);n.value===(n.value=t??void 0)||e.value===t&&(t!==0||e.nodeName!==Vi)||(e.value=t??``)}function Wi(e,t){t?e.hasAttribute(`selected`)||e.setAttribute(`selected`,``):e.removeAttribute(`selected`)}function Q(e,t,n,r){var i=qi(e);P&&(i[t]=e.getAttribute(t),t===`src`||t===`srcset`||t===`href`&&e.nodeName===Li)||i[t]!==(i[t]=n)&&(t===`loading`&&(e[ne]=n),n==null?e.removeAttribute(t):typeof n!=`string`&&Yi(e).includes(t)?e[t]=n:e.setAttribute(t,n))}function Gi(e,t,n,r,i=!1,a=!1){if(P&&i&&e.nodeName===Ri){var o=e;(o.type===`checkbox`?`defaultChecked`:`defaultValue`)in n||Hi(o)}var s=qi(e),c=s[Fi],l=!s[Ii];let u=P&&c;u&&ke(!1);var d=t||{},f=e.nodeName===zi;for(var p in t)p in n||(n[p]=null);n.class?n.class=Si(n.class):(r||n[Ni])&&(n.class=null),n[Pi]&&(n.style??=null);var m=Yi(e);if(e.nodeName===Ri&&`type`in n&&(`value`in n||`__value`in n)){var h=n.type;(h!==d.type||h===void 0&&e.hasAttribute(`type`))&&(d.type=h,Q(e,`type`,h,a))}for(let i in n){let o=n[i];if(f&&i===`value`&&o==null){e.value=e.__value=``,d[i]=o;continue}if(i===`class`){X(e,e.namespaceURI===`http://www.w3.org/1999/xhtml`,o,r,t?.[Ni],n[Ni]),d[i]=o,d[Ni]=n[Ni];continue}if(i===`style`){Z(e,o,t?.[Pi],n[Pi]),d[i]=o,d[Pi]=n[Pi];continue}var g=d[i];if(!(o===g&&!(o===void 0&&e.hasAttribute(i)))){d[i]=o;var _=i[0]+i[1];if(_!==`$$`)if(_===`on`){let t={},n=`$$`+i,r=i.slice(2);var v=kr(r);if(Dr(r)&&(r=r.slice(0,-7),t.capture=!0),!v&&g){if(o!=null)continue;e.removeEventListener(r,d[n],t),d[n]=null}if(v)W(r,e,o),Ur([r]);else if(o!=null){function a(e){d[i].call(this,e)}d[n]=Vr(r,e,a,t)}}else if(i===`style`)Q(e,i,o);else if(i===`autofocus`)vn(e,!!o);else if(!c&&(i===`__value`||i===`value`&&o!=null))e.value=e.__value=o;else if(i===`selected`&&f)Wi(e,o);else{var y=i;l||(y=Mr(y));var b=y===`defaultValue`||y===`defaultChecked`;if(o==null&&!c&&!b)if(s[i]=null,y===`value`||y===`checked`){let n=e,r=t===void 0;if(y===`value`){let e=n.defaultValue;n.removeAttribute(y),n.defaultValue=e,n.value=n.__value=r?e:null}else{let e=n.defaultChecked;n.removeAttribute(y),n.defaultChecked=e,n.checked=r?e:!1}}else e.removeAttribute(i);else b||m.includes(y)&&(c||typeof o!=`string`)?(e[y]=o,y in s&&(s[y]=Se)):typeof o!=`function`&&Q(e,y,o,a)}}}return u&&ke(!0),d}function Ki(e,t,n=[],r=[],i=[],a,o=!1,s=!1){dt(i,n,r,n=>{var r=void 0,i={},c=e.nodeName===Bi,l=!1;if(In(()=>{var u=t(...n.map(U)),d=Gi(e,r,u,a,o,s);l&&c&&`value`in u&&ki(e,u.value);for(let e of Object.getOwnPropertySymbols(i))u[e]||Vn(i[e]);for(let t of Object.getOwnPropertySymbols(u)){var f=u[t];t.description===`@attach`&&(!r||f!==r[t])&&(i[t]&&Vn(i[t]),i[t]=Ln(()=>yi(e,()=>f))),d[t]=f}r=d}),c){var u=e;Mn(()=>{ki(u,r.value,!0),Ai(u)})}l=!0})}function qi(e){return e[re]??={[Fi]:e.nodeName.includes(`-`),[Ii]:e.namespaceURI===Ce}}var Ji=new Map;function Yi(e){var t=e.getAttribute(`is`)||e.nodeName,n=Ji.get(t);if(n)return n;Ji.set(t,n=[]);for(var r,i=e,a=Element.prototype;a!==i;){for(var s in r=o(i),r)r[s].set&&s!==`innerHTML`&&s!==`textContent`&&s!==`innerText`&&n.push(s);i=l(i)}return n}function Xi(e,t,n=t){var r=new WeakSet;Sn(e,`input`,async i=>{var a=i?e.defaultValue:e.value;if(a=Zi(e)?Qi(a):a,n(a),Et!==null&&r.add(Et),await xr(),a!==(a=t())){var o=e.selectionStart,s=e.selectionEnd,c=e.value.length;if(e.value=a??``,s!==null){var l=e.value.length;o===s&&s===c&&l>c?(e.selectionStart=l,e.selectionEnd=l):(e.selectionStart=o,e.selectionEnd=Math.min(s,l))}}}),(P&&e.defaultValue!==e.value||wr(t)==null&&e.value)&&(n(Zi(e)?Qi(e.value):e.value),Et!==null&&r.add(Et)),Pn(()=>{var n=t();if(e===document.activeElement){var i=ze?Dt:Et;if(r.has(i))return}Zi(e)&&n===Qi(e.value)||e.type===`date`&&!n&&!e.value||n!==e.value&&(e.value=n??``)})}function Zi(e){var t=e.type;return t===`number`||t===`range`}function Qi(e){return e===``?null:+e}function $i(e,t){return e===t||e?.[j]===t}function ea(e={},t,n,r){var i=He.r,a=nr;return Mn(()=>{var o,s;return Pn(()=>{o=s,s=r?.()||[],wr(()=>{$i(n(...s),e)||(t(e,...s),o&&$i(n(...o),e)&&t(null,...o))})}),()=>{let r=a;for(;r!==i&&r.parent!==null&&r.parent.f&33554432;)r=r.parent;let o=()=>{s&&$i(n(...s),e)&&t(null,...s)},c=r.teardown;r.teardown=()=>{o(),c?.()}}}),e}function ta(e=!1){let t=He,n=t.l.u;if(!n)return;let r=()=>Tr(t.s);if(e){let e=0,n={},i=ht(()=>{let r=!1,i=t.s;for(let e in i)i[e]!==n[e]&&(n[e]=i[e],r=!0);return r&&e++,e});r=()=>U(i)}n.b.length&&An(()=>{na(t,r),m(n.b)}),On(()=>{let e=wr(()=>n.m.map(p));return()=>{for(let t of e)typeof t==`function`&&t()}}),n.a.length&&On(()=>{na(t,r),m(n.a)})}function na(e,t){if(e.l.s)for(let t of e.l.s)U(t);t()}var ra={get(e,t){if(!e.exclude.includes(t))return U(e.version),t in e.special?e.special[t]():e.props[t]},set(e,t,n){if(!(t in e.special)){var r=nr;try{rr(e.parent_effect),e.special[t]=sa({get[t](){return e.props[t]}},t,4)}finally{rr(r)}}return e.special[t](n),$t(e.version),!0},getOwnPropertyDescriptor(e,t){if(!e.exclude.includes(t)&&t in e.props)return{enumerable:!0,configurable:!0,value:e.props[t]}},deleteProperty(e,t){return e.exclude.includes(t)?!0:(e.exclude.push(t),$t(e.version),!0)},has(e,t){return e.exclude.includes(t)?!1:t in e.props},ownKeys(e){return Reflect.ownKeys(e.props).filter(t=>!e.exclude.includes(t))}};function ia(e,t){return new Proxy({props:e,exclude:t,special:{},version:Yt(0),parent_effect:nr},ra)}var aa={get(e,t){let n=e.props.length;for(;n--;){let r=e.props[n];if(d(r)&&(r=r()),typeof r==`object`&&r&&t in r)return r[t]}},set(e,t,n){let r=e.props.length;for(;r--;){let i=e.props[r];d(i)&&(i=i());let o=a(i,t);if(o&&o.set)return o.set(n),!0}return!1},getOwnPropertyDescriptor(e,t){let n=e.props.length;for(;n--;){let r=e.props[n];if(d(r)&&(r=r()),typeof r==`object`&&r&&t in r){let e=a(r,t);return e&&!e.configurable&&(e.configurable=!0),e}}},has(e,t){if(t===j||t===M)return!1;for(let n of e.props)if(d(n)&&(n=n()),n!=null&&t in n)return!0;return!1},ownKeys(e){let t=[];for(let n of e.props)if(d(n)&&(n=n()),n){for(let e in n)t.includes(e)||t.push(e);for(let e of Object.getOwnPropertySymbols(n))t.includes(e)||t.push(e)}return t}};function oa(...e){return new Proxy({props:e},aa)}function sa(e,t,n,r){var i=!Be||(n&2)!=0,o=(n&8)!=0,s=(n&16)!=0,c=r,l=!0,u=void 0,d=()=>s&&i?(u??=ht(r),U(u)):(l&&(l=!1,c=s?wr(r):r),c);let f;if(o){var p=j in e||M in e;f=a(e,t)?.set??(p&&t in e?n=>e[t]=n:void 0)}var m,h=!1;o?[m,h]=ot(()=>e[t]):m=e[t],m===void 0&&r!==void 0&&(m=d(),f&&(i&&ge(t),f(m)));var g=i?()=>{var n=e[t];return n===void 0?d():(l=!0,n)}:()=>{var n=e[t];return n!==void 0&&(c=void 0),n===void 0?c:n};if(i&&!(n&4))return g;if(f){var _=e.$$legacy;return(function(e,t){return arguments.length>0?((!i||!t||_||h)&&f(t?g():e),e):g()})}var v=!1,y=(n&1?ht:vt)(()=>(v=!1,g()));o&&U(y);var b=nr;return(function(e,t){if(arguments.length>0){let n=t?U(y):i&&o?nn(e):e;return R(y,n),v=!0,c!==void 0&&(c=n),e}return Zn&&v||b.f&16384?y.v:U(y)})}function ca(e){He===null&&le(`onMount`),Be&&He.l!==null?la(He).m.push(e):On(()=>{let t=wr(e);if(typeof t==`function`)return t})}function la(e){var t=e.l;return t.u??={a:[],b:[],m:[]}}typeof window<`u`&&((window.__svelte??={}).v??=new Set).add(`5`),Ve();var ua={xmlns:`http://www.w3.org/2000/svg`,width:24,height:24,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":2,"stroke-linecap":`round`,"stroke-linejoin":`round`},da=e=>{for(let t in e)if(t.startsWith(`aria-`)||t===`role`||t===`title`)return!0;return!1},fa=(...e)=>e.filter((e,t,n)=>!!e&&e.trim()!==``&&n.indexOf(e)===t).join(` `).trim(),pa=Zr(`<svg><!><!></svg>`);function ma(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=ia(n,[`name`,`color`,`size`,`strokeWidth`,`absoluteStrokeWidth`,`iconNode`]);We(t,!1);let i=sa(t,`name`,8,void 0),a=sa(t,`color`,8,`currentColor`),o=sa(t,`size`,8,24),s=sa(t,`strokeWidth`,8,2),c=sa(t,`absoluteStrokeWidth`,8,!1),l=sa(t,`iconNode`,24,()=>[]);ta();var u=pa();Ki(u,(e,t,n)=>({...ua,...e,...r,width:o(),height:o(),stroke:a(),"stroke-width":t,class:n}),[()=>da(r)?void 0:{"aria-hidden":`true`},()=>(Tr(c()),Tr(s()),Tr(o()),wr(()=>c()?Number(s())*24/Number(o()):s())),()=>(Tr(fa),Tr(i()),Tr(n),wr(()=>fa(`lucide-icon`,`lucide`,i()?`lucide-${i()}`:``,n.class)))]);var d=z(u);Y(d,1,l,si,(e,t)=>{var n=I(()=>g(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=$r();vi(B(a),r,!0,(e,t)=>{Ki(e,()=>({...i()}))}),K(e,a)}),gi(V(d),t,`default`,{},null),F(u),K(e,u),Ge()}function ha(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`blocks`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function ga(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`book-open`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function _a(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`path`,{d:`M20 6 9 17l-5-5`}]];ma(e,oa({name:`check`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function va(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`path`,{d:`m9 18 6-6-6-6`}]];ma(e,oa({name:`chevron-right`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function ya(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}],[`path`,{d:`M12 3v18`}]];ma(e,oa({name:`columns-2`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function ba(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`copy`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function xa(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`download`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Sa(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`external-link`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ca(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`eye`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function wa(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`folder-open`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ta(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`layers`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ea(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`link`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Da(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`list`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Oa(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`monitor`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function ka(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`moon`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Aa(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`package`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function ja(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`palette`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ma(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`puzzle`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Na(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`redo-2`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Pa(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`refresh-cw`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Fa(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`path`,{d:`M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`}],[`path`,{d:`M3 3v5h5`}]];ma(e,oa({name:`rotate-ccw`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ia(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`ruler`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function La(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`save`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ra(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`share-2`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function za(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`shield-check`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ba(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`sliders-horizontal`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Va(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`rect`,{width:`14`,height:`20`,x:`5`,y:`2`,rx:`2`,ry:`2`}],[`path`,{d:`M12 18h.01`}]];ma(e,oa({name:`smartphone`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ha(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`sparkles`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ua(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}]];ma(e,oa({name:`square`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Wa(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`sun`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ga(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`swatch-book`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ka(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`rect`,{width:`16`,height:`20`,x:`4`,y:`2`,rx:`2`,ry:`2`}],[`line`,{x1:`12`,x2:`12.01`,y1:`18`,y2:`18`}]];ma(e,oa({name:`tablet`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function qa(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`trash-2`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ja(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`path`,{d:`M12 4v16`}],[`path`,{d:`M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2`}],[`path`,{d:`M9 20h6`}]];ma(e,oa({name:`type`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Ya(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`undo-2`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Xa(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`zap`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Za(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`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`}]];ma(e,oa({name:`house`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function Qa(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`path`,{d:`M21 12a9 9 0 1 1-6.219-8.56`}]];ma(e,oa({name:`loader-circle`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}function $a(e,t){let n=ia(t,[`children`,`$$slots`,`$$events`,`$$legacy`]),r=[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}],[`path`,{d:`M3 9h18`}],[`path`,{d:`M9 21V9`}]];ma(e,oa({name:`panels-top-left`},()=>n,{get iconNode(){return r},children:(e,n)=>{var r=$r();gi(B(r),t,`default`,{},null),K(e,r)},$$slots:{default:!0}}))}var eo=G(`<button class="flex items-center gap-1.5 px-2.5 py-1 bg-indigo-500/10 border border-indigo-500/20 rounded-lg text-indigo-300 text-[10px] font-bold font-mono hover:bg-indigo-500/20 transition-colors cursor-pointer shrink-0"><span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[9px] font-black"> </span> <span class="hidden sm:inline">customised ·</span>Export →</button>`),to=G(`<!> Saving…`,1),no=G(`<!> Saved`,1),ro=G(`<!> Save`,1),io=G(`<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="reset-confirm-title" tabindex="-1"><div class="bg-[#1a1a2e] border border-white/10 rounded-xl p-6 max-w-sm w-full mx-4 shadow-2xl"><h3 id="reset-confirm-title" class="text-white font-bold text-sm mb-2">Reset all overrides?</h3> <p class="text-slate-400 text-xs mb-5"> </p> <div class="flex gap-2 justify-end"><button class="px-3 py-1.5 text-xs rounded-lg bg-white/8 text-slate-300 hover:bg-white/12 transition-colors cursor-pointer">Cancel</button> <button class="px-3 py-1.5 text-xs rounded-lg bg-rose-600 hover:bg-rose-500 text-white font-bold transition-colors cursor-pointer">Reset all</button></div></div></div>`),ao=G(`<header class="h-[52px] bg-[#0d0d14] border-b border-white/8 flex items-center px-3 gap-2 sm:gap-3 shrink-0 z-20"><div class="w-8 h-8 bg-indigo-600 rounded-xl flex items-center justify-center text-white font-black text-lg leading-none select-none shadow-lg shadow-indigo-600/30 shrink-0">/</div> <div class="hidden sm:block shrink-0"><div class="text-[11px] font-bold text-white tracking-tight leading-none flex items-center gap-1.5">SLASHED Studio <span class="text-[9px] bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 font-bold px-1.5 py-0.5 rounded-full font-mono"> </span></div> <div class="text-[9px] text-slate-500 font-mono tracking-widest uppercase mt-0.5">Token Architect</div></div> <!> <div class="flex-1"></div> <div class="flex items-center gap-1.5"><button><!></button> <button title="Undo (Ctrl+Z)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button> <button title="Redo (Ctrl+Shift+Z)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button> <div class="w-px h-4 bg-white/10 mx-1"></div> <button title="Copy share link" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Import CSS overrides" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Reset all overrides" class="p-1.5 rounded-lg text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button></div></header> <!>`,1);function oo(e,t){We(t,!0);let n=window.__SLASHED_FW_VERSION__===void 0?``:window.__SLASHED_FW_VERSION__,r=L(!1),i=L(!1),a=L(null),o=L(null);On(()=>{U(i)&&xr().then(()=>U(a)?.focus())});async function s(){try{await navigator.clipboard.writeText(window.location.href),R(r,!0),setTimeout(()=>{R(r,!1)},2e3)}catch{}}function c(){R(i,!0)}function l(){R(i,!1),t.onResetAll()}function u(){R(i,!1)}var d=ao(),f=B(d),p=V(z(f),2),m=z(p),h=V(z(m)),g=z(h);F(h),F(m),Ne(2),F(p);var _=V(p,2),v=e=>{var n=eo(),r=z(n),i=z(r,!0);F(r),Ne(3),F(n),H(()=>q(i,t.overridesCount)),W(`click`,n,function(...e){t.onExport?.apply(this,e)}),K(e,n)};J(_,e=>{t.overridesCount>0&&e(v)});var y=V(_,4),b=z(y),x=z(b),S=e=>{var t=to();Qa(B(t),{class:`w-3.5 h-3.5 animate-spin`}),Ne(),K(e,t)},C=e=>{var t=no();_a(B(t),{class:`w-3.5 h-3.5`}),Ne(),K(e,t)},w=e=>{var t=ro();La(B(t),{class:`w-3.5 h-3.5`}),Ne(),K(e,t)};J(x,e=>{t.saveState===`saving`?e(S):t.saveState===`saved`?e(C,1):e(w,-1)}),F(b);var T=V(b,2);Ya(z(T),{class:`w-3.5 h-3.5`}),F(T);var E=V(T,2);Na(z(E),{class:`w-3.5 h-3.5`}),F(E);var D=V(E,4),O=z(D),k=e=>{_a(e,{class:`w-3.5 h-3.5 text-emerald-400`})},A=e=>{Ra(e,{class:`w-3.5 h-3.5`})};J(O,e=>{U(r)?e(k):e(A,-1)}),F(D);var ee=V(D,2);wa(z(ee),{class:`w-3.5 h-3.5`}),F(ee);var te=V(ee,2);qa(z(te),{class:`w-3.5 h-3.5`}),F(te),F(y),F(f);var j=V(f,2),M=e=>{var n=io(),r=z(n),i=V(z(r),2),s=z(i);F(i);var c=V(i,2),d=z(c);ea(d,e=>R(a,e),()=>U(a));var f=V(d,2);ea(f,e=>R(o,e),()=>U(o)),F(c),F(r),F(n),H(()=>q(s,`This will clear all ${t.overridesCount??``} customisation${t.overridesCount===1?``:`s`}.
-        You can still undo this before saving.`)),W(`click`,n,e=>{e.target===e.currentTarget&&u()}),W(`keydown`,n,e=>{e.key===`Escape`&&(e.stopPropagation(),u()),e.key===`Tab`&&(e.preventDefault(),document.activeElement===U(a)?U(o)?.focus():U(a)?.focus())}),W(`click`,d,u),W(`click`,f,l),K(e,n)};J(j,e=>{U(i)&&e(M)}),H(e=>{q(g,`v${n??``}`),b.disabled=!t.hasPendingChanges||t.saveState===`saving`,Q(b,`title`,t.hasPendingChanges?`Save changes (Ctrl+S)`:`No unsaved changes`),X(b,1,e),T.disabled=!t.canUndo,E.disabled=!t.canRedo,te.disabled=t.overridesCount===0},[()=>Si([`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold transition-colors cursor-pointer`,t.saveState===`saved`?`bg-emerald-900/40 border border-emerald-500/30 text-emerald-300`:t.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(` `))]),W(`click`,b,function(...e){t.onSave?.apply(this,e)}),W(`click`,T,function(...e){t.onUndo?.apply(this,e)}),W(`click`,E,function(...e){t.onRedo?.apply(this,e)}),W(`click`,D,s),W(`click`,ee,function(...e){t.onImport?.apply(this,e)}),W(`click`,te,c),K(e,d),Ge()}Ur([`click`,`keydown`]);var so=G(`<span class="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 bg-indigo-500 rounded-full text-[8px] font-black text-white flex items-center justify-center"> </span>`),co=G(`<button><!> <!> <span class="absolute left-12 bg-slate-800 text-white text-[10px] font-semibold px-2 py-1 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 border border-white/10"> </span></button>`),lo=G(`<nav class="w-14 bg-[#0a0a0f] border-r border-white/8 flex flex-col items-center py-3 gap-1 shrink-0 overflow-y-auto overflow-x-hidden"><div class="flex flex-col items-center gap-1 w-full px-2"></div> <div class="w-8 h-px bg-white/8 my-2"></div> <div class="flex flex-col items-center gap-1 w-full px-2"></div></nav>`);function uo(e,t){We(t,!0);let n=sa(t,`overridesByDomain`,19,()=>({})),r=[{id:`home`,icon:Za,label:`Home`,group:`tokens`},{id:`colors`,icon:ja,label:`Colors`,group:`tokens`},{id:`typography`,icon:Ja,label:`Typography`,group:`tokens`},{id:`spacing`,icon:Ia,label:`Spacing`,group:`tokens`},{id:`layout`,icon:$a,label:`Layout`,group:`tokens`},{id:`borders`,icon:Ua,label:`Borders`,group:`tokens`},{id:`shadows`,icon:Ta,label:`Shadows`,group:`tokens`},{id:`motion`,icon:Xa,label:`Motion`,group:`tokens`},{id:`effects`,icon:Ha,label:`Effects`,group:`tokens`},{id:`macros`,icon:ha,label:`Macros`,group:`tokens`},{id:`misc`,icon:Ma,label:`Misc`,group:`tokens`},{id:`themes`,icon:Ga,label:`Themes`,group:`tools`},{id:`wcag`,icon:za,label:`WCAG`,group:`tools`},{id:`setup`,icon:Aa,label:`Install`,group:`tools`},{id:`cheatsheet`,icon:ga,label:`Classes`,group:`tools`}],i=I(()=>r.filter(e=>e.group===`tokens`)),a=I(()=>r.filter(e=>e.group===`tools`));var o=lo(),s=z(o);Y(s,21,()=>U(i),e=>e.id,(e,r)=>{let i=I(()=>t.activeId===U(r).id),a=I(()=>n()[U(r).id]||0),o=I(()=>U(r).icon);var s=co(),c=z(s);_i(c,()=>U(o),(e,t)=>{t(e,{class:`w-4 h-4`})});var l=V(c,2),u=e=>{var t=so(),n=z(t,!0);F(t),H(()=>q(n,U(a)>9?`+`:U(a))),K(e,t)};J(l,e=>{U(a)>0&&!U(i)&&e(u)});var d=V(l,2),f=z(d,!0);F(d),F(s),H(()=>{Q(s,`title`,U(r).label),X(s,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${U(i)?`bg-indigo-600 text-white shadow-lg shadow-indigo-600/30`:`text-slate-500 hover:text-slate-200 hover:bg-white/8`}`),q(f,U(r).label)}),W(`click`,s,()=>t.onSelect(U(r).id)),K(e,s)}),F(s);var c=V(s,4);Y(c,21,()=>U(a),e=>e.id,(e,r)=>{let i=I(()=>t.activeId===U(r).id),a=I(()=>n()[U(r).id]||0),o=I(()=>U(r).icon);var s=co(),c=z(s);_i(c,()=>U(o),(e,t)=>{t(e,{class:`w-4 h-4`})});var l=V(c,2),u=e=>{var t=so(),n=z(t,!0);F(t),H(()=>q(n,U(a)>9?`+`:U(a))),K(e,t)};J(l,e=>{U(a)>0&&!U(i)&&e(u)});var d=V(l,2),f=z(d,!0);F(d),F(s),H(()=>{Q(s,`title`,U(r).label),X(s,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${U(i)?`bg-indigo-600 text-white shadow-lg shadow-indigo-600/30`:`text-slate-500 hover:text-slate-200 hover:bg-white/8`}`),q(f,U(r).label)}),W(`click`,s,()=>t.onSelect(U(r).id)),K(e,s)}),F(c),F(o),K(e,o),Ge()}Ur([`click`]);var fo=G(`<span class="text-indigo-400"> </span>`),po=G(`<div class="h-6 bg-[#07070b] border-t border-white/6 flex items-center px-4 gap-4 shrink-0 select-none"><div class="flex items-center gap-1.5"><div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> <span class="text-[9px] font-mono font-bold text-slate-500 uppercase tracking-widest">Live</span></div> <span class="text-[9px] font-mono text-slate-600"><!></span> <div class="flex-1"></div> <span class="text-[9px] font-mono text-slate-700"> </span></div>`);function mo(e,t){var n=po(),r=V(z(n),2),i=z(r),a=e=>{var n=fo(),r=z(n);F(n),H(()=>q(r,`${t.overridesCount??``} override${t.overridesCount===1?``:`s`} active`)),K(e,n)},o=e=>{K(e,Qr(`No overrides — showing framework defaults`))};J(i,e=>{t.overridesCount>0?e(a):e(o,-1)}),F(r);var s=V(r,4),c=z(s,!0);F(s),F(n),H(()=>q(c,t.domain)),K(e,n)}var ho=Uint8Array,go=Uint16Array,_o=Int32Array,vo=new ho([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]),yo=new ho([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]),bo=new ho([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),xo=function(e,t){for(var n=new go(31),r=0;r<31;++r)n[r]=t+=1<<e[r-1];for(var i=new _o(n[30]),r=1;r<30;++r)for(var a=n[r];a<n[r+1];++a)i[a]=a-n[r]<<5|r;return{b:n,r:i}},So=xo(vo,2),Co=So.b,wo=So.r;Co[28]=258,wo[258]=28;for(var To=xo(yo,0),Eo=To.b,Do=To.r,Oo=new go(32768),ko=0;ko<32768;++ko){var Ao=(ko&43690)>>1|(ko&21845)<<1;Ao=(Ao&52428)>>2|(Ao&13107)<<2,Ao=(Ao&61680)>>4|(Ao&3855)<<4,Oo[ko]=((Ao&65280)>>8|(Ao&255)<<8)>>1}for(var jo=(function(e,t,n){for(var r=e.length,i=0,a=new go(t);i<r;++i)e[i]&&++a[e[i]-1];var o=new go(t);for(i=1;i<t;++i)o[i]=o[i-1]+a[i-1]<<1;var s;if(n){s=new go(1<<t);var c=15-t;for(i=0;i<r;++i)if(e[i])for(var l=i<<4|e[i],u=t-e[i],d=o[e[i]-1]++<<u,f=d|(1<<u)-1;d<=f;++d)s[Oo[d]>>c]=l}else for(s=new go(r),i=0;i<r;++i)e[i]&&(s[i]=Oo[o[e[i]-1]++]>>15-e[i]);return s}),Mo=new ho(288),ko=0;ko<144;++ko)Mo[ko]=8;for(var ko=144;ko<256;++ko)Mo[ko]=9;for(var ko=256;ko<280;++ko)Mo[ko]=7;for(var ko=280;ko<288;++ko)Mo[ko]=8;for(var No=new ho(32),ko=0;ko<32;++ko)No[ko]=5;var Po=jo(Mo,9,0),Fo=jo(Mo,9,1),Io=jo(No,5,0),Lo=jo(No,5,1),Ro=function(e){for(var t=e[0],n=1;n<e.length;++n)e[n]>t&&(t=e[n]);return t},zo=function(e,t,n){var r=t/8|0;return(e[r]|e[r+1]<<8)>>(t&7)&n},Bo=function(e,t){var n=t/8|0;return(e[n]|e[n+1]<<8|e[n+2]<<16)>>(t&7)},Vo=function(e){return(e+7)/8|0},Ho=function(e,t,n){return(t==null||t<0)&&(t=0),(n==null||n>e.length)&&(n=e.length),new ho(e.subarray(t,n))},Uo=[`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`],Wo=function(e,t,n){var r=Error(t||Uo[e]);if(r.code=e,Error.captureStackTrace&&Error.captureStackTrace(r,Wo),!n)throw r;return r},Go=function(e,t,n,r){var i=e.length,a=r?r.length:0;if(!i||t.f&&!t.l)return n||new ho(0);var o=!n,s=o||t.i!=2,c=t.i;o&&(n=new ho(i*3));var l=function(e){var t=n.length;if(e>t){var r=new ho(Math.max(t*2,e));r.set(n),n=r}},u=t.f||0,d=t.p||0,f=t.b||0,p=t.l,m=t.d,h=t.m,g=t.n,_=i*8;do{if(!p){u=zo(e,d,1);var v=zo(e,d+1,3);if(d+=3,!v){var y=Vo(d)+4,b=e[y-4]|e[y-3]<<8,x=y+b;if(x>i){c&&Wo(0);break}s&&l(f+b),n.set(e.subarray(y,x),f),t.b=f+=b,t.p=d=x*8,t.f=u;continue}else if(v==1)p=Fo,m=Lo,h=9,g=5;else if(v==2){var S=zo(e,d,31)+257,C=zo(e,d+10,15)+4,w=S+zo(e,d+5,31)+1;d+=14;for(var T=new ho(w),E=new ho(19),D=0;D<C;++D)E[bo[D]]=zo(e,d+D*3,7);d+=C*3;for(var O=Ro(E),k=(1<<O)-1,A=jo(E,O,1),D=0;D<w;){var ee=A[zo(e,d,k)];d+=ee&15;var y=ee>>4;if(y<16)T[D++]=y;else{var te=0,j=0;for(y==16?(j=3+zo(e,d,3),d+=2,te=T[D-1]):y==17?(j=3+zo(e,d,7),d+=3):y==18&&(j=11+zo(e,d,127),d+=7);j--;)T[D++]=te}}var M=T.subarray(0,S),ne=T.subarray(S);h=Ro(M),g=Ro(ne),p=jo(M,h,1),m=jo(ne,g,1)}else Wo(1);if(d>_){c&&Wo(0);break}}s&&l(f+131072);for(var re=(1<<h)-1,ie=(1<<g)-1,ae=d;;ae=d){var te=p[Bo(e,d)&re],oe=te>>4;if(d+=te&15,d>_){c&&Wo(0);break}if(te||Wo(2),oe<256)n[f++]=oe;else if(oe==256){ae=d,p=null;break}else{var se=oe-254;if(oe>264){var D=oe-257,N=vo[D];se=zo(e,d,(1<<N)-1)+Co[D],d+=N}var ce=m[Bo(e,d)&ie],le=ce>>4;ce||Wo(3),d+=ce&15;var ne=Eo[le];if(le>3){var N=yo[le];ne+=Bo(e,d)&(1<<N)-1,d+=N}if(d>_){c&&Wo(0);break}s&&l(f+131072);var ue=f+se;if(f<ne){var de=a-ne,fe=Math.min(ne,ue);for(de+f<0&&Wo(3);f<fe;++f)n[f]=r[de+f]}for(;f<ue;++f)n[f]=n[f-ne]}}t.l=p,t.p=ae,t.b=f,t.f=u,p&&(u=1,t.m=h,t.d=m,t.n=g)}while(!u);return f!=n.length&&o?Ho(n,0,f):n.subarray(0,f)},Ko=function(e,t,n){n<<=t&7;var r=t/8|0;e[r]|=n,e[r+1]|=n>>8},qo=function(e,t,n){n<<=t&7;var r=t/8|0;e[r]|=n,e[r+1]|=n>>8,e[r+2]|=n>>16},Jo=function(e,t){for(var n=[],r=0;r<e.length;++r)e[r]&&n.push({s:r,f:e[r]});var i=n.length,a=n.slice();if(!i)return{t:ts,l:0};if(i==1){var o=new ho(n[0].s+1);return o[n[0].s]=1,{t:o,l:1}}n.sort(function(e,t){return e.f-t.f}),n.push({s:-1,f:25001});var s=n[0],c=n[1],l=0,u=1,d=2;for(n[0]={s:-1,f:s.f+c.f,l:s,r:c};u!=i-1;)s=n[n[l].f<n[d].f?l++:d++],c=n[l!=u&&n[l].f<n[d].f?l++:d++],n[u++]={s:-1,f:s.f+c.f,l:s,r:c};for(var f=a[0].s,r=1;r<i;++r)a[r].s>f&&(f=a[r].s);var p=new go(f+1),m=Yo(n[u-1],p,0);if(m>t){var r=0,h=0,g=m-t,_=1<<g;for(a.sort(function(e,t){return p[t.s]-p[e.s]||e.f-t.f});r<i;++r){var v=a[r].s;if(p[v]>t)h+=_-(1<<m-p[v]),p[v]=t;else break}for(h>>=g;h>0;){var y=a[r].s;p[y]<t?h-=1<<t-p[y]++-1:++r}for(;r>=0&&h;--r){var b=a[r].s;p[b]==t&&(--p[b],++h)}m=t}return{t:new ho(p),l:m}},Yo=function(e,t,n){return e.s==-1?Math.max(Yo(e.l,t,n+1),Yo(e.r,t,n+1)):t[e.s]=n},Xo=function(e){for(var t=e.length;t&&!e[--t];);for(var n=new go(++t),r=0,i=e[0],a=1,o=function(e){n[r++]=e},s=1;s<=t;++s)if(e[s]==i&&s!=t)++a;else{if(!i&&a>2){for(;a>138;a-=138)o(32754);a>2&&(o(a>10?a-11<<5|28690:a-3<<5|12305),a=0)}else if(a>3){for(o(i),--a;a>6;a-=6)o(8304);a>2&&(o(a-3<<5|8208),a=0)}for(;a--;)o(i);a=1,i=e[s]}return{c:n.subarray(0,r),n:t}},Zo=function(e,t){for(var n=0,r=0;r<t.length;++r)n+=e[r]*t[r];return n},Qo=function(e,t,n){var r=n.length,i=Vo(t+2);e[i]=r&255,e[i+1]=r>>8,e[i+2]=e[i]^255,e[i+3]=e[i+1]^255;for(var a=0;a<r;++a)e[i+a+4]=n[a];return(i+4+r)*8},$o=function(e,t,n,r,i,a,o,s,c,l,u){Ko(t,u++,n),++i[256];for(var d=Jo(i,15),f=d.t,p=d.l,m=Jo(a,15),h=m.t,g=m.l,_=Xo(f),v=_.c,y=_.n,b=Xo(h),x=b.c,S=b.n,C=new go(19),w=0;w<v.length;++w)++C[v[w]&31];for(var w=0;w<x.length;++w)++C[x[w]&31];for(var T=Jo(C,7),E=T.t,D=T.l,O=19;O>4&&!E[bo[O-1]];--O);var k=l+5<<3,A=Zo(i,Mo)+Zo(a,No)+o,ee=Zo(i,f)+Zo(a,h)+o+14+3*O+Zo(C,E)+2*C[16]+3*C[17]+7*C[18];if(c>=0&&k<=A&&k<=ee)return Qo(t,u,e.subarray(c,c+l));var te,j,M,ne;if(Ko(t,u,1+(ee<A)),u+=2,ee<A){te=jo(f,p,0),j=f,M=jo(h,g,0),ne=h;var re=jo(E,D,0);Ko(t,u,y-257),Ko(t,u+5,S-1),Ko(t,u+10,O-4),u+=14;for(var w=0;w<O;++w)Ko(t,u+3*w,E[bo[w]]);u+=3*O;for(var ie=[v,x],ae=0;ae<2;++ae)for(var oe=ie[ae],w=0;w<oe.length;++w){var se=oe[w]&31;Ko(t,u,re[se]),u+=E[se],se>15&&(Ko(t,u,oe[w]>>5&127),u+=oe[w]>>12)}}else te=Po,j=Mo,M=Io,ne=No;for(var w=0;w<s;++w){var N=r[w];if(N>255){var se=N>>18&31;qo(t,u,te[se+257]),u+=j[se+257],se>7&&(Ko(t,u,N>>23&31),u+=vo[se]);var ce=N&31;qo(t,u,M[ce]),u+=ne[ce],ce>3&&(qo(t,u,N>>5&8191),u+=yo[ce])}else qo(t,u,te[N]),u+=j[N]}return qo(t,u,te[256]),u+j[256]},es=new _o([65540,131080,131088,131104,262176,1048704,1048832,2114560,2117632]),ts=new ho(0),ns=function(e,t,n,r,i,a){var o=a.z||e.length,s=new ho(r+o+5*(1+Math.ceil(o/7e3))+i),c=s.subarray(r,s.length-i),l=a.l,u=(a.r||0)&7;if(t){u&&(c[0]=a.r>>3);for(var d=es[t-1],f=d>>13,p=d&8191,m=(1<<n)-1,h=a.p||new go(32768),g=a.h||new go(m+1),_=Math.ceil(n/3),v=2*_,y=function(t){return(e[t]^e[t+1]<<_^e[t+2]<<v)&m},b=new _o(25e3),x=new go(288),S=new go(32),C=0,w=0,T=a.i||0,E=0,D=a.w||0,O=0;T+2<o;++T){var k=y(T),A=T&32767,ee=g[k];if(h[A]=ee,g[k]=A,D<=T){var te=o-T;if((C>7e3||E>24576)&&(te>423||!l)){u=$o(e,c,0,b,x,S,w,E,O,T-O,u),E=C=w=0,O=T;for(var j=0;j<286;++j)x[j]=0;for(var j=0;j<30;++j)S[j]=0}var M=2,ne=0,re=p,ie=A-ee&32767;if(te>2&&k==y(T-ie))for(var ae=Math.min(f,te)-1,oe=Math.min(32767,T),se=Math.min(258,te);ie<=oe&&--re&&A!=ee;){if(e[T+M]==e[T+M-ie]){for(var N=0;N<se&&e[T+N]==e[T+N-ie];++N);if(N>M){if(M=N,ne=ie,N>ae)break;for(var ce=Math.min(ie,N-2),le=0,j=0;j<ce;++j){var ue=T-ie+j&32767,de=ue-h[ue]&32767;de>le&&(le=de,ee=ue)}}}A=ee,ee=h[A],ie+=A-ee&32767}if(ne){b[E++]=268435456|wo[M]<<18|Do[ne];var fe=wo[M]&31,pe=Do[ne]&31;w+=vo[fe]+yo[pe],++x[257+fe],++S[pe],D=T+M,++C}else b[E++]=e[T],++x[e[T]]}}for(T=Math.max(T,D);T<o;++T)b[E++]=e[T],++x[e[T]];u=$o(e,c,l,b,x,S,w,E,O,T-O,u),l||(a.r=u&7|c[u/8|0]<<3,u-=7,a.h=g,a.p=h,a.i=T,a.w=D)}else{for(var T=a.w||0;T<o+l;T+=65535){var me=T+65535;me>=o&&(c[u/8|0]=l,me=o),u=Qo(c,u+1,e.subarray(T,me))}a.i=o}return Ho(s,0,r+Vo(u)+i)},rs=function(e,t,n,r,i){if(!i&&(i={l:1},t.dictionary)){var a=t.dictionary.subarray(-32768),o=new ho(a.length+e.length);o.set(a),o.set(e,a.length),e=o,i.w=a.length}return ns(e,t.level==null?6:t.level,t.mem==null?i.l?Math.ceil(Math.max(8,Math.min(13,Math.log(e.length)))*1.5):20:12+t.mem,n,r,i)};function is(e,t){return rs(e,t||{},0,0)}function as(e,t){return Go(e,{i:2},t&&t.out,t&&t.dictionary)}var os=typeof TextDecoder<`u`&&new TextDecoder;try{os.decode(ts,{stream:!0})}catch{}var ss={_meta:{generatedBy:`scripts/gen-token-registry.js`,nextId:701},tokens:[{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:!0},{id:51,name:`--sf-button-padding-inline`,removed:!0},{id:52,name:`--sf-button-radius`,removed:!0},{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:!0},{id:111,name:`--sf-color-base-ghost`},{id:112,name:`--sf-color-base-source-light`},{id:113,name:`--sf-color-base-lighter`,removed:!0},{id:114,name:`--sf-color-base-muted`},{id:115,name:`--sf-color-base-subtle`},{id:116,name:`--sf-color-base-superdark`,removed:!0},{id:117,name:`--sf-color-base-superlight`,removed:!0},{id:118,name:`--sf-color-base-xdark`,removed:!0},{id:119,name:`--sf-color-base-xlight`,removed:!0},{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:!0},{id:143,name:`--sf-color-error-dark`,removed:!0},{id:144,name:`--sf-color-error-light`,removed:!0},{id:145,name:`--sf-color-error-muted`,removed:!0},{id:146,name:`--sf-color-error-strong`,removed:!0},{id:147,name:`--sf-color-error-subtle`,removed:!0},{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:!0},{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`}]},cs=window.__SLASHED_FW_VERSION__===void 0?`0.0.0`:window.__SLASHED_FW_VERSION__,ls=65535,us=new TextEncoder,ds=new TextDecoder(`utf-8`,{fatal:!1}),fs=65535,ps=32*1024,ms=256*1024;function hs(e){return Number.isInteger(e)&&e>=0&&e<=fs}function gs(e){let t=new Map;for(let n of e?.tokens??[])n&&!n.removed&&typeof n.name==`string`&&hs(n.id)&&t.set(n.name,n.id);return t}function _s(e){let t=new Map;for(let n of e?.tokens??[])n&&typeof n.name==`string`&&Number.isInteger(n.id)&&t.set(n.id,n.name);return t}function vs(e){let t=``;for(let n=0;n<e.length;n++)t+=String.fromCharCode(e[n]);return btoa(t).replace(/\+/g,`-`).replace(/\//g,`_`).replace(/=+$/,``)}function ys(e){try{let t=e.replace(/-/g,`+`).replace(/_/g,`/`);for(;t.length%4;)t+=`=`;let n=atob(t),r=new Uint8Array(n.length);for(let e=0;e<n.length;e++)r[e]=n.charCodeAt(e);return r}catch{return null}}function bs(e,t=ss){if(!e||typeof e!=`object`)return``;let n=gs(t),r=[];for(let[t,i]of Object.entries(e)){if(typeof t!=`string`||typeof i!=`string`||i===``)continue;let e=n.get(t);if(e===void 0)continue;let a=us.encode(i);a.length>ls||r.push({id:e,valueBytes:a})}if(r.length===0)return``;r.sort((e,t)=>e.id-t.id);let i=0;for(let e of r)i+=4+e.valueBytes.length;let a=new Uint8Array(i),o=0;for(let{id:e,valueBytes:t}of r)a[o++]=e>>8&255,a[o++]=e&255,a[o++]=t.length>>8&255,a[o++]=t.length&255,a.set(t,o),o+=t.length;let s=is(a);if(s.length>ps)return console.warn(`[codec] compressed payload too large (${s.length} B > ${ps} B); refusing to encode.`),``;let c=new Uint8Array(1+s.length);return c[0]=2,c.set(s,1),vs(c)}function xs(e,t=ss,n={}){let r=String(e??``).trim();if(r===``)return{};let i=ys(r);if(!i||i.length===0)return{};if(i[0]!==2)return console.warn(`[codec] unknown config-code version ${i[0]} (expected 2); ignoring.`),{};let a=i.length-1;if(a>ps)return console.warn(`[codec] compressed payload too large (${a} B > ${ps} B); ignoring.`),{};let o;try{o=as(i.subarray(1))}catch{return console.warn(`[codec] failed to decompress config; ignoring.`),{}}if(!o||o.length===0)return{};if(o.length>ms)return console.warn(`[codec] decompressed payload too large (${o.length} B > ${ms} B); ignoring.`),{};let s=_s(t),c=typeof n.sanitize==`function`?n.sanitize:e=>e,l=typeof n.isKnown==`function`?n.isKnown:()=>!0,u={},d=0;try{for(;d<o.length;){if(d+4>o.length)throw Error(`truncated entry header`);let e=o[d]<<8|o[d+1],t=o[d+2]<<8|o[d+3];if(d+=4,d+t>o.length)throw Error(`truncated value`);let n=ds.decode(o.subarray(d,d+t));d+=t;let r=s.get(e);if(r===void 0||!l(r))continue;let i=c(n);i!==``&&(u[r]=i)}}catch(e){return console.warn(`[codec] malformed config code; ignoring (${e.message}).`),{}}return u}function Ss(e){return e==null?``:String(e).replace(/\/\*[\s\S]*?\*\//g,` `).replace(/[;{}]/g,` `).replace(/[/*]{2,}/g,` `).replace(/\s+/g,` `).trim()}function Cs(e,t={}){let{mode:n=`layer`,banner:r=!0}=t,i=Object.keys(e).filter(e=>/^--sf-[\w-]+$/.test(e)).sort((e,t)=>e.localeCompare(t));if(i.length===0)return``;let a=i.map(t=>`${t}: ${Ss(e[t])};`),o=n===`layer`?`		`:`	`,s=a.map(e=>`${o}${e}`).join(`
-`),c=``;return r&&(c+=`/* SLASHED override tokens v${cs} — generated by the SLASHED configurator.\n   Load this AFTER the SLASHED stylesheet. ${i.length} token${i.length===1?``:`s`} customised. */\n`),n===`layer`?`${c}@layer slashed.overrides {\n\t:root {\n${s}\n\t}\n}\n`:`${c}:root {\n${s}\n}\n`}function ws(e){return bs(e,ss)}function Ts(e,t={}){let n=new Set(ss.tokens.map(e=>e.name)),r=t.isKnown??(e=>n.has(e)),i=String(e??``).trim(),a=i.match(/[#&]?c=([^&]+)/);return a&&(i=a[1]),xs(i,ss,{sanitize:Ss,isKnown:r})}function Es(e,t){let n=typeof window<`u`?window.location.href:`https://example.com/`,r=new URL(t??n),i=ws(e);return r.hash=i?`c=${i}`:``,r.toString()}function Ds(e,t={}){let n=String(e??``);return n.includes(`c=`)?Ts(n,t):{}}var Os=`slashed-studio/overrides/v2`,ks=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`]),As=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`]),js=[[`2xs`,-3],[`xs`,-2],[`s`,-1],[`m`,0],[`l`,1],[`xl`,2],[`2xl`,3],[`3xl`,4],[`4xl`,5]],Ms=[[`display-s`,0],[`display-m`,1],[`display-l`,2]],Ns=[[`2xs`,-3],[`xs`,-2],[`s`,-1],[`m`,0],[`l`,1],[`xl`,2],[`2xl`,3],[`3xl`,4],[`4xl`,5]],Ps=[[`2xs`,1],[`xs`,2],[`s`,4],[`m`,8],[`l`,12],[`xl`,16],[`2xl`,24],[`3xl`,32],[`4xl`,48]],Fs=[[`1`,1],[`2`,2],[`3`,3],[`4`,4]],Is=[[`instant`,100],[`fast`,150],[`normal`,250],[`slow`,400],[`slower`,600]];function Ls(e,t,n){let r=e[t];if(r===void 0)return n;let i=parseFloat(r);return Number.isFinite(i)?i:n}function Rs(e){if(!Number.isFinite(e))return`0`;let t=e.toFixed(6).replace(/\.?0+$/,``);return t===``||t===`-`?`0`:t}function zs(e,t,n,r,i,a,o,s){let c=e*n**+o*s,l=t*r**+o*s;if(a<=i||Math.abs(c-l)<1e-9)return`${Rs(c)}rem`;let u=(l-c)/(a-i);return`clamp(${Rs(c)}rem, calc(${Rs(u)} * (100vw - ${Rs(i)}rem) + ${Rs(c)}rem), ${Rs(l)}rem)`}function Bs(e,{reduceMotion:t=!1}={}){let n={},r=Object.keys(e),i=r.some(e=>ks.has(e)),a=r.some(e=>As.has(e)),o=`--sf-radius-scale`in e,s=`--sf-border-scale`in e,c=`--sf-motion-scale`in e;if(!i&&!a&&!o&&!s&&!c)return n;let l=Ls(e,`--sf-fluid-min-vw`,22.5),u=Ls(e,`--sf-fluid-max-vw`,90);if(i){let t=Ls(e,`--sf-text-base-min`,1),r=Ls(e,`--sf-text-base-max`,1.25),i=Ls(e,`--sf-text-ratio-min`,1.25),a=Ls(e,`--sf-text-ratio-max`,1.333),o=Ls(e,`--sf-text-scale`,1);for(let[e,s]of js)n[`--sf-text-${e}`]=zs(t,r,i,a,l,u,s,o);let s=Ls(e,`--sf-text-display-base-min`,2.4),c=Ls(e,`--sf-text-display-base-max`,3),d=Ls(e,`--sf-text-display-scale`,1);for(let[e,t]of Ms)n[`--sf-text-${e}`]=zs(s,c,i,a,l,u,t,d)}if(a){let t=Ls(e,`--sf-space-base-min`,1),r=Ls(e,`--sf-space-base-max`,2),i=Ls(e,`--sf-space-ratio-min`,1.25),a=Ls(e,`--sf-space-ratio-max`,1.333),o=Ls(e,`--sf-space-scale`,1);for(let[e,s]of Ns)n[`--sf-space-${e}`]=zs(t,r,i,a,l,u,s,o)}if(o){let t=Ls(e,`--sf-radius-scale`,1);for(let[e,r]of Ps)n[`--sf-radius-${e}`]=`${Rs(r*t)}px`;n[`--sf-radius-none`]=`0`,n[`--sf-radius-full`]=`9999px`,n[`--sf-radius-pill`]=`var(--sf-radius-full)`,n[`--sf-radius-outer`]=`calc(var(--sf-radius-m) + var(--sf-component-pad))`}if(s){let t=Ls(e,`--sf-border-scale`,1);for(let[e,r]of Fs)n[`--sf-border-width-${e}`]=`${Rs(r*t)}px`}if(c&&!t){let t=Ls(e,`--sf-motion-scale`,1);for(let[e,r]of Is)n[`--sf-duration-${e}`]=`${Rs(r*t)}ms`;n[`--sf-duration-none`]=`0ms`,n[`--sf-theme-transition-duration`]=`${Rs(300*t)}ms`;for(let e=1;e<=5;e+=1)n[`--sf-animation-delay-${e}`]=`${Rs(75*e*t)}ms`}return n}function Vs(){return typeof window>`u`?null:window.slashedApp??null}function Hs(){return!!Vs()}function Us(){if(typeof window>`u`)return{};let e=Vs();if(e)return e.overrides&&typeof e.overrides==`object`&&!Array.isArray(e.overrides)?{...e.overrides}:{};let t=window.location.hash;if(t?.includes(`c=`))try{return Ds(t)}catch{}let n=localStorage.getItem(Os);if(n)try{return JSON.parse(n)}catch{}return{}}function Ws(e){if(typeof document>`u`)return;let t=document.getElementById(`sf-parent-overrides`);t||(t=document.createElement(`style`),t.id=`sf-parent-overrides`,document.head.appendChild(t));let n=Bs(e,{reduceMotion:typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches}),r=Object.keys(n).length>0?{...n,...e}:e;t.textContent=Cs(r,{mode:`root`,banner:!1})}async function Gs(e,t){let n=(e.url??``).replace(/\/$/,``),r=new URL(n+`/tokens/overrides`,window.location.href);if(r.origin!==window.location.origin)throw Error(`slashed: REST URL must be same-origin`);let i=r.href,a=await fetch(i,{method:`POST`,credentials:`same-origin`,headers:{"Content-Type":`application/json`,"X-WP-Nonce":e.nonce??``},body:JSON.stringify({overrides:t})});if(!a.ok)throw Error(`slashed: save failed ${a.status} ${a.statusText}`)}function Ks(e){try{localStorage.setItem(Os,JSON.stringify(e))}catch{}let t=ws(e),n=t?`c=${t}`:``;window.location.hash.replace(`#`,``)!==n&&(window.location.hash=n)}async function qs(e){if(typeof window>`u`)return;let t=Vs();if(t?.rest?.url){await Gs(t.rest,{...e});return}Ks(e)}var Js=null,Ys=null,Xs=null,Zs=null,Qs=null,$s=null,ec=null,tc=new Map,nc=nn({value:0}),rc=0;function ic(e){if(Js===e){oc();return}Ys&&Ys.remove(),Zs&&Zs.remove(),Qs&&Qs.remove(),Js=e,Ys=null,Xs=null,Zs=null,Qs=null,$s=null,ec=null,oc()}function ac(){return Js?.documentElement.getAttribute(`data-theme`)===`dark`?`dark`:`light`}function oc(){rc+=1,nc.value=rc,tc.clear()}function sc(){if(!Js||!Js.body)return null;if(Ys&&Ys.ownerDocument===Js&&Ys.isConnected)return Ys;let e=Js.createElement(`div`);return e.setAttribute(`data-sf-probe`,``),e.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,Js.body.appendChild(e),Ys=e,e}function cc(e){let t=tc.get(e);if(t!==void 0)return t;let n=sc();if(!n||!Js)return``;n.style.color=``,n.style.color=e;let r=Js.defaultView?.getComputedStyle(n).color??``;return tc.set(e,r),r}function lc(e){return!Js||!Js.body?null:e===`light`?$s&&$s.isConnected?$s:(Zs&&Zs.remove(),Zs=Js.createElement(`div`),Zs.setAttribute(`data-theme`,`light`),Zs.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,$s=Js.createElement(`div`),Zs.appendChild($s),Js.body.appendChild(Zs),$s):ec&&ec.isConnected?ec:(Qs&&Qs.remove(),Qs=Js.createElement(`div`),Qs.setAttribute(`data-theme`,`dark`),Qs.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,ec=Js.createElement(`div`),Qs.appendChild(ec),Js.body.appendChild(Qs),ec)}function uc(e,t){let n=`${t}\0${e}`,r=tc.get(n);if(r!==void 0)return r;let i=lc(t);if(!i||!Js)return``;i.style.color=``,i.style.color=e;let a=Js.defaultView?.getComputedStyle(i).color??``;return tc.set(n,a),a}function dc(){if(!Js)return null;if(Xs&&Xs.canvas.ownerDocument===Js)return Xs;let e=Js.createElement(`canvas`);return e.width=1,e.height=1,Xs=e.getContext(`2d`,{willReadFrequently:!0}),Xs}function fc(e){let t=cc(e);if(!t)return null;let n=dc();if(!n)return null;n.clearRect(0,0,1,1),n.fillStyle=t,n.fillRect(0,0,1,1);try{let e=n.getImageData(0,0,1,1).data;return[e[0],e[1],e[2]]}catch{return null}}function pc(e){let t=sc();return!t||!Js?``:(t.style.background=``,t.style.background=e,Js.defaultView?.getComputedStyle(t).backgroundImage??``)}var mc=nn({value:!1}),hc=`/* SLASHED v0.6.33 — slashed.full.css */
+var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array.from,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyDescriptors,s=Object.prototype,c=Array.prototype,l=Object.getPrototypeOf,u=Object.isExtensible;function d(e){return typeof e==`function`}var f=()=>{};function p(e){for(var t=0;t<e.length;t++)e[t]()}function m(){var e,t;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}}function h(e,t){if(Array.isArray(e))return e;if(t===void 0||!(Symbol.iterator in e))return Array.from(e);let n=[];for(let r of e)if(n.push(r),n.length===t)break;return n}var g=1<<24,_=1024,v=2048,y=4096,b=8192,x=16384,S=32768,C=1<<25,w=65536,T=1<<19,E=1<<20,D=1<<25,O=65536,k=1<<21,ee=1<<22,te=1<<23,ne=Symbol(`$state`),A=Symbol(`legacy props`),j=Symbol(``),M=Symbol(`attributes`),re=Symbol(`class`),ie=Symbol(`style`),ae=Symbol(`text`),oe=Symbol(`form reset`),se=new class extends Error{name=`StaleReactionError`;message="The reaction that called `getAbortSignal()` was re-run or destroyed"},N=!!globalThis.document?.contentType&&globalThis.document.contentType.includes(`xml`);function ce(e){throw Error(`https://svelte.dev/e/lifecycle_outside_component`)}function le(){throw Error(`https://svelte.dev/e/async_derived_orphan`)}function ue(e,t,n){throw Error(`https://svelte.dev/e/each_key_duplicate`)}function de(e){throw Error(`https://svelte.dev/e/effect_in_teardown`)}function fe(){throw Error(`https://svelte.dev/e/effect_in_unowned_derived`)}function pe(e){throw Error(`https://svelte.dev/e/effect_orphan`)}function me(){throw Error(`https://svelte.dev/e/effect_update_depth_exceeded`)}function he(e){throw Error(`https://svelte.dev/e/props_invalid_value`)}function ge(){throw Error(`https://svelte.dev/e/state_descriptors_fixed`)}function _e(){throw Error(`https://svelte.dev/e/state_prototype_fixed`)}function ve(){throw Error(`https://svelte.dev/e/state_unsafe_mutation`)}function ye(){throw Error(`https://svelte.dev/e/svelte_boundary_reset_onerror`)}var be={},xe=Symbol(`uninitialized`),Se=`http://www.w3.org/1999/xhtml`,Ce=`http://www.w3.org/2000/svg`;function we(){console.warn(`https://svelte.dev/e/derived_inert`)}function Te(e){console.warn(`https://svelte.dev/e/hydration_mismatch`)}function Ee(){console.warn(`https://svelte.dev/e/select_multiple_invalid_value`)}function De(){console.warn(`https://svelte.dev/e/svelte_boundary_reset_noop`)}var P=!1;function Oe(e){P=e}var ke;function Ae(e){if(e===null)throw Te(),be;return ke=e}function je(){return Ae(pn(ke))}function F(e){if(P){if(pn(ke)!==null)throw Te(),be;ke=e}}function Me(e=1){if(P){for(var t=e,n=ke;t--;)n=pn(n);ke=n}}function Ne(e=!0){for(var t=0,n=ke;;){if(n.nodeType===8){var r=n.data;if(r===`]`){if(t===0)return n;--t}else(r===`[`||r===`[!`||r[0]===`[`&&!isNaN(Number(r.slice(1))))&&(t+=1)}var i=pn(n);e&&n.remove(),n=i}}function Pe(e){if(!e||e.nodeType!==8)throw Te(),be;return e.data}function Fe(e){return e===this.v}function Ie(e,t){return e==e?e!==t||typeof e==`object`&&!!e||typeof e==`function`:t==t}function Le(e){return!Ie(e,this.v)}var Re=!1,ze=!1,Be=null;function Ve(e){Be=e}function He(e){return Ke(`getContext`).get(e)}function Ue(e,t=!1,n){Be={p:Be,i:!1,c:null,e:null,s:e,x:null,r:tr,l:ze&&!t?{s:null,u:null,$:[]}:null}}function We(e){var t=Be,n=t.e;if(n!==null){t.e=null;for(var r of n)kn(r)}return e!==void 0&&(t.x=e),t.i=!0,Be=t.p,e??{}}function Ge(){return!ze||Be!==null&&Be.l===null}function Ke(e){return Be===null&&ce(e),Be.c??=new Map(qe(Be)||void 0)}function qe(e){let t=e.p;for(;t!==null;){let e=t.c;if(e!==null)return e;t=t.p}return null}var Je=[];function Ye(){var e=Je;Je=[],p(e)}function Xe(e){if(Je.length===0&&!jt){var t=Je;queueMicrotask(()=>{t===Je&&Ye()})}Je.push(e)}function Ze(){for(;Je.length>0;)Ye()}function Qe(e){var t=tr;if(t===null)return Qn.f|=te,e;if(!(t.f&32768)&&!(t.f&4))throw e;$e(e,t)}function $e(e,t){if(!(t!==null&&t.f&16384)){for(;t!==null;){if(t.f&128){if(!(t.f&32768))throw e;try{t.b.error(e);return}catch(t){e=t}}t=t.parent}throw e}}var et=~(v|y|_);function tt(e,t){e.f=e.f&et|t}function nt(e){e.f&512||e.deps===null?tt(e,_):tt(e,y)}function rt(e){if(e!==null)for(let t of e)!(t.f&2)||!(t.f&65536)||(t.f^=O,rt(t.deps))}function it(e,t,n){e.f&2048?t.add(e):e.f&4096&&n.add(e),rt(e.deps),tt(e,_)}var at=!1,ot=!1;function st(e){var t=ot;try{return ot=!1,[e(),ot]}finally{ot=t}}function ct(e){let t=0,n=Xt(0),r;return()=>{En()&&(U(n),Nn(()=>(t===0&&(r=Cr(()=>e(()=>en(n)))),t+=1,()=>{Xe(()=>{--t,t===0&&(r?.(),r=void 0,en(n))})})))}}var lt=w|T;function ut(e,t,n,r){new dt(e,t,n,r)}var dt=class{parent;is_pending=!1;transform_error;#e;#t=P?ke:null;#n;#r;#i;#a=null;#o=null;#s=null;#c=null;#l=0;#u=0;#d=!1;#f=new Set;#p=new Set;#m=null;#h=ct(()=>(this.#m=Xt(this.#l),()=>{this.#m=null}));constructor(e,t,n,r){this.#e=e,this.#n=t,this.#r=e=>{var t=tr;t.b=this,t.f|=128,n(e)},this.parent=tr.b,this.transform_error=r??this.parent?.transform_error??(e=>e),this.#i=Pn(()=>{if(P){let e=this.#t;je();let t=e.data===`[!`;if(e.data.startsWith(`[?`)){let t=JSON.parse(e.data.slice(2));this.#_(t)}else t?this.#v():this.#g()}else this.#y()},lt),P&&(this.#e=ke)}#g(){try{this.#a=In(()=>this.#r(this.#e))}catch(e){this.error(e)}}#_(e){let t=this.#n.failed;t&&(this.#s=In(()=>{t(this.#e,()=>e,()=>()=>{})}))}#v(){let e=this.#n.pending;e&&(this.is_pending=!0,this.#o=In(()=>e(this.#e)),Xe(()=>{var e=this.#c=document.createDocumentFragment(),t=dn();e.append(t),this.#a=this.#x(()=>In(()=>this.#r(t))),this.#u===0&&(this.#e.before(e),this.#c=null,Un(this.#o,()=>{this.#o=null}),this.#b(Dt))}))}#y(){try{if(this.is_pending=this.has_pending_snippet(),this.#u=0,this.#l=0,this.#a=In(()=>{this.#r(this.#e)}),this.#u>0){var e=this.#c=document.createDocumentFragment();qn(this.#a,e);let t=this.#n.pending;this.#o=In(()=>t(this.#e))}else this.#b(Dt)}catch(e){this.error(e)}}#b(e){this.is_pending=!1,e.transfer_effects(this.#f,this.#p)}defer_effect(e){it(e,this.#f,this.#p)}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!this.#n.pending}#x(e){var t=tr,n=Qn,r=Be;nr(this.#i),er(this.#i),Ve(this.#i.ctx);try{return Lt.ensure(),e()}catch(e){return Qe(e),null}finally{nr(t),er(n),Ve(r)}}#S(e,t){if(!this.has_pending_snippet()){this.parent&&this.parent.#S(e,t);return}this.#u+=e,this.#u===0&&(this.#b(t),this.#o&&Un(this.#o,()=>{this.#o=null}),this.#c&&=(this.#e.before(this.#c),null))}update_pending_count(e,t){this.#S(e,t),this.#l+=e,!(!this.#m||this.#d)&&(this.#d=!0,Xe(()=>{this.#d=!1,this.#m&&Qt(this.#m,this.#l)}))}get_effect_pending(){return this.#h(),U(this.#m)}error(e){if(!this.#n.onerror&&!this.#n.failed)throw e;Dt?.is_fork?(this.#a&&Dt.skip_effect(this.#a),this.#o&&Dt.skip_effect(this.#o),this.#s&&Dt.skip_effect(this.#s),Dt.oncommit(()=>{this.#C(e)})):this.#C(e)}#C(e){this.#a&&=(Bn(this.#a),null),this.#o&&=(Bn(this.#o),null),this.#s&&=(Bn(this.#s),null),P&&(Ae(this.#t),Me(),Ae(Ne()));var t=this.#n.onerror;let n=this.#n.failed;var r=!1,i=!1;let a=()=>{if(r){De();return}r=!0,i&&ye(),this.#s!==null&&Un(this.#s,()=>{this.#s=null}),this.#x(()=>{this.#y()})},o=e=>{try{i=!0,t?.(e,a),i=!1}catch(e){$e(e,this.#i&&this.#i.parent)}n&&(this.#s=this.#x(()=>{try{return In(()=>{var t=tr;t.b=this,t.f|=128,n(this.#e,()=>e,()=>a)})}catch(e){return $e(e,this.#i.parent),null}}))};Xe(()=>{var t;try{t=this.transform_error(e)}catch(e){$e(e,this.#i&&this.#i.parent);return}typeof t==`object`&&t&&typeof t.then==`function`?t.then(o,e=>$e(e,this.#i&&this.#i.parent)):o(t)})}};function ft(e,t,n,r){let i=Ge()?gt:yt;var a=e.filter(e=>!e.settled),o=t.map(i);if(n.length===0&&a.length===0){r(o);return}var s=tr,c=pt(),l=a.length===1?a[0].promise:a.length>1?Promise.all(a.map(e=>e.promise)):null;function u(e){if(!(s.f&16384)){c();try{r([...o,...e])}catch(e){$e(e,s)}mt()}}var d=ht();if(n.length===0){l.then(()=>u([])).finally(d);return}function f(){Promise.all(n.map(e=>vt(e))).then(u).catch(e=>$e(e,s)).finally(d)}l?l.then(()=>{c(),f(),mt()}):f()}function pt(){var e=tr,t=Qn,n=Be,r=Dt;return function(i=!0){nr(e),er(t),Ve(n),i&&!(e.f&16384)&&(r?.activate(),r?.apply())}}function mt(e=!0){nr(null),er(null),Ve(null),e&&Dt?.deactivate()}function ht(){var e=tr,t=e.b,n=Dt,r=!!t?.is_rendered();return t?.update_pending_count(1,n),n.increment(r,e),()=>{t?.update_pending_count(-1,n),n.decrement(r,e)}}function gt(e){var t=2|v;return tr!==null&&(tr.f|=T),{ctx:Be,deps:null,effects:null,equals:Fe,f:t,fn:e,reactions:null,rv:0,v:xe,wv:0,parent:tr,ac:null}}var _t=Symbol(`obsolete`);function vt(e,t,n){let r=tr;r===null&&le();var i=void 0,a=Xt(xe),o=!Qn,s=new Set;return Mn(()=>{var t=tr,n=m();i=n.promise;try{Promise.resolve(e()).then(n.resolve,e=>{e!==se&&n.reject(e)}).finally(mt)}catch(e){n.reject(e),mt()}var c=Dt;if(o){if(t.f&32768)var l=ht();if(r.b?.is_rendered())c.async_deriveds.get(t)?.reject(_t);else for(let e of s.values())e.reject(_t);s.add(n),c.async_deriveds.set(t,n)}let u=(e,t=void 0)=>{l?.(),s.delete(n),t!==_t&&(c.activate(),t?(a.f|=te,Qt(a,t)):(a.f&8388608&&(a.f^=te),Qt(a,e)),c.deactivate())};n.promise.then(u,e=>u(null,e||`unknown`))}),Dn(()=>{for(let e of s)e.reject(_t)}),new Promise(e=>{function t(n){function r(){n===i?e(a):t(i)}n.then(r,r)}t(i)})}function I(e){let t=gt(e);return Re||ir(t),t}function yt(e){let t=gt(e);return t.equals=Le,t}function bt(e){var t=e.effects;if(t!==null){e.effects=null;for(var n=0;n<t.length;n+=1)Bn(t[n])}}function xt(e){var t,n=tr,r=e.parent;if(!Xn&&r!==null&&e.v!==xe&&r.f&24576)return we(),e.v;nr(r);try{e.f&=~O,bt(e),t=gr(e)}finally{nr(n)}return t}function St(e){var t=xt(e);if(!e.equals(t)&&(e.wv=pr(),(!Dt?.is_fork||e.deps===null)&&(Dt===null?e.v=t:(Dt.capture(e,t,!0),Ot?.capture(e,t,!0)),e.deps===null))){tt(e,_);return}Xn||(kt===null?nt(e):(En()||Dt?.is_fork)&&kt.set(e,t))}function Ct(e){if(e.effects!==null)for(let t of e.effects)(t.teardown||t.ac)&&(t.teardown?.(),t.ac?.abort(se),t.fn!==null&&(t.teardown=f),t.ac=null,vr(t,0),Rn(t))}function wt(e){if(e.effects!==null)for(let t of e.effects)t.teardown&&t.fn!==null&&yr(t)}var Tt=null,Et=null,Dt=null,Ot=null,kt=null,At=null,jt=!1,Mt=!1,Nt=null,Pt=null,Ft=0,It=1,Lt=class e{id=It++;#e=!1;linked=!0;#t=null;#n=null;async_deriveds=new Map;current=new Map;previous=new Map;#r=new Set;#i=new Set;#a=0;#o=new Map;#s=null;#c=[];#l=[];#u=new Set;#d=new Set;#f=new Map;#p=new Set;is_fork=!1;#m=!1;constructor(){Et===null?Tt=Et=this:(Et.#n=this,this.#t=Et),Et=this}#h(){if(this.is_fork)return!0;for(let n of this.#o.keys()){for(var e=n,t=!1;e.parent!==null;){if(this.#f.has(e)){t=!0;break}e=e.parent}if(!t)return!0}return!1}skip_effect(e){this.#f.has(e)||this.#f.set(e,{d:[],m:[]}),this.#p.delete(e)}unskip_effect(e,t=e=>this.schedule(e)){var n=this.#f.get(e);if(n){this.#f.delete(e);for(var r of n.d)tt(r,v),t(r);for(r of n.m)tt(r,y),t(r)}this.#p.add(e)}#g(){this.#e=!0,Ft++>1e3&&(this.#S(),zt());for(let e of this.#u)this.#d.delete(e),tt(e,v),this.schedule(e);for(let e of this.#d)tt(e,y),this.schedule(e);let t=this.#c;this.#c=[],this.apply();var n=Nt=[],r=[],i=Pt=[];for(let e of t)try{this.#_(e,n,r)}catch(t){throw Kt(e),this.#h()||this.discard(),t}if(Dt=null,i.length>0){var a=e.ensure();for(let e of i)a.schedule(e)}if(Nt=null,Pt=null,this.#h()){this.#b(r),this.#b(n);for(let[e,t]of this.#f)Gt(e,t);i.length>0&&Dt.#g();return}let o=this.#v();if(o){this.#b(r),this.#b(n),o.#y(this);return}this.#u.clear(),this.#d.clear();for(let e of this.#r)e(this);this.#r.clear(),Ot=this,Vt(r),Vt(n),Ot=null,this.#s?.resolve();var s=Dt;if(this.#a===0&&(this.#c.length===0||s!==null)&&(this.#S(),Re&&(this.#x(),Dt=s)),this.#c.length>0)if(s!==null){let e=s;e.#c.push(...this.#c.filter(t=>!e.#c.includes(t)))}else s=this;s!==null&&s.#g()}#_(e,t,n){e.f^=_;for(var r=e.first;r!==null;){var i=r.f,a=(i&96)!=0;if(!(a&&i&1024||i&8192||this.#f.has(r))&&r.fn!==null){a?r.f^=_:i&4?t.push(r):Re&&i&16777224?n.push(r):mr(r)&&(i&16&&this.#d.add(r),yr(r));var o=r.first;if(o!==null){r=o;continue}}for(;r!==null;){var s=r.next;if(s!==null){r=s;break}r=r.parent}}}#v(){for(var e=this.#t;e!==null;){if(!e.is_fork){for(let[t,[,n]]of this.current)if(e.current.has(t)&&!n)return e}e=e.#t}return null}#y(e){for(let[t,n]of e.current)!this.previous.has(t)&&e.previous.has(t)&&this.previous.set(t,e.previous.get(t)),this.current.set(t,n);for(let[t,n]of e.async_deriveds){let e=this.async_deriveds.get(t);e&&n.promise.then(e.resolve).catch(e.reject)}e.async_deriveds.clear(),this.transfer_effects(e.#u,e.#d);let t=e=>{var n=e.reactions;if(n!==null)for(let e of n){var r=e.f;if(r&2)t(e);else{var i=e;r&4194320&&!this.async_deriveds.has(i)&&(this.#d.delete(i),tt(i,v),this.schedule(i))}}};for(let e of this.current.keys())t(e);this.oncommit(()=>e.discard()),e.#S(),Dt=this,this.#g()}#b(e){for(var t=0;t<e.length;t+=1)it(e[t],this.#u,this.#d)}capture(e,t,n=!1){e.v!==xe&&!this.previous.has(e)&&this.previous.set(e,e.v),e.f&8388608||(this.current.set(e,[t,n]),kt?.set(e,t)),this.is_fork||(e.v=t)}activate(){Dt=this}deactivate(){Dt=null,kt=null}flush(){try{Mt=!0,Dt=this,this.#g()}finally{Ft=0,At=null,Nt=null,Pt=null,Mt=!1,Dt=null,kt=null,Jt.clear()}}discard(){for(let e of this.#i)e(this);this.#i.clear();for(let e of this.async_deriveds.values())e.reject(_t);this.#S(),this.#s?.resolve()}register_created_effect(e){this.#l.push(e)}#x(){for(let u=Tt;u!==null;u=u.#n){var e=u.id<this.id,t=[];for(let[r,[i,a]]of this.current){if(u.current.has(r)){var n=u.current.get(r)[0];if(e&&i!==n)u.current.set(r,[i,a]);else continue}t.push(r)}if(e)for(let[e,t]of this.async_deriveds){let n=u.async_deriveds.get(e);n&&t.promise.then(n.resolve).catch(n.reject)}var r=[...u.current.keys()].filter(e=>!u.current.get(e)[1]);if(!(!u.#e||r.length===0)){var i=r.filter(e=>!this.current.has(e));if(i.length===0)e&&u.discard();else if(t.length>0){if(e)for(let e of this.#p)u.unskip_effect(e,e=>{e.f&4194320?u.schedule(e):u.#b([e])});u.activate();var a=new Set,o=new Map;for(var s of t)Ht(s,i,a,o);o=new Map;var c=[...u.current].filter(([e,t])=>{let n=this.current.get(e);return n?n[0]!==t[0]||n[1]!==t[1]:!0}).map(([e])=>e);if(c.length>0)for(let e of this.#l)!(e.f&155648)&&Ut(e,c,o)&&(e.f&4194320?(tt(e,v),u.schedule(e)):u.#u.add(e));if(u.#c.length>0&&!u.#m){u.apply();for(var l of u.#c)u.#_(l,[],[]);u.#c=[]}u.deactivate()}}}}increment(e,t){if(this.#a+=1,e){let e=this.#o.get(t)??0;this.#o.set(t,e+1)}}decrement(e,t){if(--this.#a,e){let e=this.#o.get(t)??0;e===1?this.#o.delete(t):this.#o.set(t,e-1)}this.#m||(this.#m=!0,Xe(()=>{this.#m=!1,this.linked&&this.flush()}))}transfer_effects(e,t){for(let t of e)this.#u.add(t);for(let e of t)this.#d.add(e);e.clear(),t.clear()}oncommit(e){this.#r.add(e)}ondiscard(e){this.#i.add(e)}settled(){return(this.#s??=m()).promise}static ensure(){if(Dt===null){let t=Dt=new e;!Mt&&!jt&&Xe(()=>{t.#e||t.flush()})}return Dt}apply(){if(!Re||!this.is_fork&&this.#t===null&&this.#n===null){kt=null;return}kt=new Map;for(let[e,[t]]of this.current)kt.set(e,t);for(let t=Tt;t!==null;t=t.#n)if(!(t===this||t.is_fork)){var e=!1;if(t.id<this.id){for(let[n,[,r]]of t.current)if(!r&&this.current.has(n)){e=!0;break}}if(!e)for(let[e,n]of t.previous)kt.has(e)||kt.set(e,n)}}schedule(e){if(At=e,e.b?.is_pending&&e.f&16777228&&!(e.f&32768)){e.b.defer_effect(e);return}for(var t=e;t.parent!==null;){t=t.parent;var n=t.f;if(Nt!==null&&t===tr&&(Re||(Qn===null||!(Qn.f&2))&&!at))return;if(n&96){if(!(n&1024))return;t.f^=_}}this.#c.push(t)}#S(){if(this.linked){var e=this.#t,t=this.#n;e===null?Tt=t:e.#n=t,t===null?Et=e:t.#t=e,this.linked=!1}}};function Rt(e){var t=jt;jt=!0;try{var n;for(e&&(Dt!==null&&!Dt.is_fork&&Dt.flush(),n=e());;){if(Ze(),Dt===null)return n;Dt.flush()}}finally{jt=t}}function zt(){try{me()}catch(e){$e(e,At)}}var Bt=null;function Vt(e){var t=e.length;if(t!==0){for(var n=0;n<t;){var r=e[n++];if(!(r.f&24576)&&mr(r)&&(Bt=new Set,yr(r),r.deps===null&&r.first===null&&r.nodes===null&&r.teardown===null&&r.ac===null&&Hn(r),Bt?.size>0)){Jt.clear();for(let e of Bt){if(e.f&24576)continue;let t=[e],n=e.parent;for(;n!==null;)Bt.has(n)&&(Bt.delete(n),t.push(n)),n=n.parent;for(let e=t.length-1;e>=0;e--){let n=t[e];n.f&24576||yr(n)}}Bt.clear()}}Bt=null}}function Ht(e,t,n,r){if(!n.has(e)&&(n.add(e),e.reactions!==null))for(let i of e.reactions){let e=i.f;e&2?Ht(i,t,n,r):e&4194320&&!(e&2048)&&Ut(i,t,r)&&(tt(i,v),Wt(i))}}function Ut(e,t,r){let i=r.get(e);if(i!==void 0)return i;if(e.deps!==null)for(let i of e.deps){if(n.call(t,i))return!0;if(i.f&2&&Ut(i,t,r))return r.set(i,!0),!0}return r.set(e,!1),!1}function Wt(e){Dt.schedule(e)}function Gt(e,t){if(!(e.f&32&&e.f&1024)){e.f&2048?t.d.push(e):e.f&4096&&t.m.push(e),tt(e,_);for(var n=e.first;n!==null;)Gt(n,t),n=n.next}}function Kt(e){tt(e,_);for(var t=e.first;t!==null;)Kt(t),t=t.next}var qt=new Set,Jt=new Map,Yt=!1;function Xt(e,t){return{f:0,v:e,reactions:null,equals:Fe,rv:0,wv:0}}function L(e,t){let n=Xt(e,t);return ir(n),n}function Zt(e,t=!1,n=!0){let r=Xt(e);return t||(r.equals=Le),ze&&n&&Be!==null&&Be.l!==null&&(Be.l.s??=[]).push(r),r}function R(e,t,n=!1){return Qn!==null&&(!$n||Qn.f&131072)&&Ge()&&Qn.f&4325394&&(rr===null||!rr.has(e))&&ve(),Qt(e,n?nn(t):t,Pt)}function Qt(e,t,n=null){if(!e.equals(t)){Jt.set(e,Xn?t:e.v);var r=Lt.ensure();if(r.capture(e,t),e.f&2){let t=e;e.f&2048&&xt(t),kt===null&&nt(t)}e.wv=pr(),tn(e,v,n),Ge()&&tr!==null&&tr.f&1024&&!(tr.f&96)&&(sr===null?cr([e]):sr.push(e)),!r.is_fork&&qt.size>0&&!Yt&&$t()}return t}function $t(){Yt=!1;for(let e of qt){e.f&1024&&tt(e,y);let t;try{t=mr(e)}catch{t=!0}t&&yr(e)}qt.clear()}function en(e){R(e,e.v+1)}function tn(e,t,n){var r=e.reactions;if(r!==null)for(var i=Ge(),a=r.length,o=0;o<a;o++){var s=r[o],c=s.f;if(!(!i&&s===tr)){var l=(c&v)===0;if(l&&tt(s,t),c&131072)qt.add(s);else if(c&2){var u=s;kt?.delete(u),c&65536||(c&512&&(tr===null||!(tr.f&2097152))&&(s.f|=O),tn(u,y,n))}else if(l){var d=s;c&16&&Bt!==null&&Bt.add(d),n===null?Wt(d):n.push(d)}}}}function nn(t){if(typeof t!=`object`||!t||ne in t)return t;let n=l(t);if(n!==s&&n!==c)return t;var r=new Map,i=e(t),o=L(0),u=null,d=dr,f=e=>{if(dr===d)return e();var t=Qn,n=dr;er(null),fr(d);var r=e();return er(t),fr(n),r};return i&&r.set(`length`,L(t.length,u)),new Proxy(t,{defineProperty(e,t,n){(!(`value`in n)||n.configurable===!1||n.enumerable===!1||n.writable===!1)&&ge();var i=r.get(t);return i===void 0?f(()=>{var e=L(n.value,u);return r.set(t,e),e}):R(i,n.value,!0),!0},deleteProperty(e,t){var n=r.get(t);if(n===void 0){if(t in e){let e=f(()=>L(xe,u));r.set(t,e),en(o)}}else R(n,xe),en(o);return!0},get(e,n,i){if(n===ne)return t;var o=r.get(n),s=n in e;if(o===void 0&&(!s||a(e,n)?.writable)&&(o=f(()=>L(nn(s?e[n]:xe),u)),r.set(n,o)),o!==void 0){var c=U(o);return c===xe?void 0:c}return Reflect.get(e,n,i)},getOwnPropertyDescriptor(e,t){var n=Reflect.getOwnPropertyDescriptor(e,t);if(n&&`value`in n){var i=r.get(t);i&&(n.value=U(i))}else if(n===void 0){var a=r.get(t),o=a?.v;if(a!==void 0&&o!==xe)return{enumerable:!0,configurable:!0,value:o,writable:!0}}return n},has(e,t){if(t===ne)return!0;var n=r.get(t),i=n!==void 0&&n.v!==xe||Reflect.has(e,t);return(n!==void 0||tr!==null&&(!i||a(e,t)?.writable))&&(n===void 0&&(n=f(()=>L(i?nn(e[t]):xe,u)),r.set(t,n)),U(n)===xe)?!1:i},set(e,t,n,s){var c=r.get(t),l=t in e;if(i&&t===`length`)for(var d=n;d<c.v;d+=1){var p=r.get(d+``);p===void 0?d in e&&(p=f(()=>L(xe,u)),r.set(d+``,p)):R(p,xe)}if(c===void 0)(!l||a(e,t)?.writable)&&(c=f(()=>L(void 0,u)),R(c,nn(n)),r.set(t,c));else{l=c.v!==xe;var m=f(()=>nn(n));R(c,m)}var h=Reflect.getOwnPropertyDescriptor(e,t);if(h?.set&&h.set.call(s,n),!l){if(i&&typeof t==`string`){var g=r.get(`length`),_=Number(t);Number.isInteger(_)&&_>=g.v&&R(g,_+1)}en(o)}return!0},ownKeys(e){U(o);var t=Reflect.ownKeys(e).filter(e=>{var t=r.get(e);return t===void 0||t.v!==xe});for(var[n,i]of r)i.v!==xe&&!(n in e)&&t.push(n);return t},setPrototypeOf(){_e()}})}function rn(e){try{if(typeof e==`object`&&e&&ne in e)return e[ne]}catch{}return e}function an(e,t){return Object.is(rn(e),rn(t))}var on,sn,cn,ln;function un(){if(on===void 0){on=window,sn=/Firefox/.test(navigator.userAgent);var e=Element.prototype,t=Node.prototype,n=Text.prototype;cn=a(t,`firstChild`).get,ln=a(t,`nextSibling`).get,u(e)&&(e[re]=void 0,e[M]=null,e[ie]=void 0,e.__e=void 0),u(n)&&(n[ae]=void 0)}}function dn(e=``){return document.createTextNode(e)}function fn(e){return cn.call(e)}function pn(e){return ln.call(e)}function z(e,t){if(!P)return fn(e);var n=fn(ke);if(n===null)n=ke.appendChild(dn());else if(t&&n.nodeType!==3){var r=dn();return n?.before(r),Ae(r),r}return t&&_n(n),Ae(n),n}function B(e,t=!1){if(!P){var n=fn(e);return n instanceof Comment&&n.data===``?pn(n):n}if(t){if(ke?.nodeType!==3){var r=dn();return ke?.before(r),Ae(r),r}_n(ke)}return ke}function V(e,t=1,n=!1){let r=P?ke:e;for(var i;t--;)i=r,r=pn(r);if(!P)return r;if(n){if(r?.nodeType!==3){var a=dn();return r===null?i?.after(a):r.before(a),Ae(a),a}_n(r)}return Ae(r),r}function mn(e){e.textContent=``}function hn(){return!Re||Bt!==null?!1:(tr.f&S)!==0}function gn(e,t,n){return t==null||t===`http://www.w3.org/1999/xhtml`?n?document.createElement(e,{is:n}):document.createElement(e):n?document.createElementNS(t,e,{is:n}):document.createElementNS(t,e)}function _n(e){if(e.nodeValue.length<65536)return;let t=e.nextSibling;for(;t!==null&&t.nodeType===3;)t.remove(),e.nodeValue+=t.nodeValue,t=e.nextSibling}function vn(e,t){if(t){let t=document.body;e.autofocus=!0,Xe(()=>{document.activeElement===t&&e.focus()})}}var yn=!1;function bn(){yn||(yn=!0,document.addEventListener(`reset`,e=>{Promise.resolve().then(()=>{if(!e.defaultPrevented)for(let t of e.target.elements)t[oe]?.()})},{capture:!0}))}function xn(e){var t=Qn,n=tr;er(null),nr(null);try{return e()}finally{er(t),nr(n)}}function Sn(e,t,n,r=n){e.addEventListener(t,()=>xn(n));let i=e[oe];i?e[oe]=()=>{i(),r(!0)}:e[oe]=()=>r(!0),bn()}function Cn(e){tr===null&&(Qn===null&&pe(e),fe()),Xn&&de(e)}function wn(e,t){var n=t.last;n===null?t.last=t.first=e:(n.next=e,e.prev=n,t.last=e)}function Tn(e,t){var n=tr;n!==null&&n.f&8192&&(e|=b);var r={ctx:Be,deps:null,nodes:null,f:e|v|512,first:null,fn:t,last:null,next:null,parent:n,b:n&&n.b,prev:null,teardown:null,wv:0,ac:null};Dt?.register_created_effect(r);var i=r;if(e&4)Nt===null?Lt.ensure().schedule(r):Nt.push(r);else if(t!==null){try{yr(r)}catch(e){throw Bn(r),e}i.deps===null&&i.teardown===null&&i.nodes===null&&i.first===i.last&&!(i.f&524288)&&(i=i.first,e&16&&e&65536&&i!==null&&(i.f|=w))}if(i!==null&&(i.parent=n,n!==null&&wn(i,n),Qn!==null&&Qn.f&2&&!(e&64))){var a=Qn;(a.effects??=[]).push(i)}return r}function En(){return Qn!==null&&!$n}function Dn(e){let t=Tn(8,null);return tt(t,_),t.teardown=e,t}function On(e){Cn(`$effect`);var t=tr.f;if(!Qn&&t&32&&Be!==null&&!Be.i){var n=Be;(n.e??=[]).push(e)}else return kn(e)}function kn(e){return Tn(4|E,e)}function An(e){Lt.ensure();let t=Tn(64|T,e);return(e={})=>new Promise(n=>{e.outro?Un(t,()=>{Bn(t),n(void 0)}):(Bn(t),n(void 0))})}function jn(e){return Tn(4,e)}function Mn(e){return Tn(ee|T,e)}function Nn(e,t=0){return Tn(8|t,e)}function H(e,t=[],n=[],r=[]){ft(r,t,n,t=>{Tn(8,()=>{e(...t.map(U))})})}function Pn(e,t=0){return Tn(16|t,e)}function Fn(e,t=0){return Tn(g|t,e)}function In(e){return Tn(32|T,e)}function Ln(e){var t=e.teardown;if(t!==null){let e=Xn,n=Qn;Zn(!0),er(null);try{t.call(null)}finally{Zn(e),er(n)}}}function Rn(e,t=!1){var n=e.first;for(e.first=e.last=null;n!==null;){let e=n.ac;e!==null&&xn(()=>{e.abort(se)});var r=n.next;n.f&64?n.parent=null:Bn(n,t),n=r}}function zn(e){for(var t=e.first;t!==null;){var n=t.next;t.f&32||Bn(t),t=n}}function Bn(e,t=!0){var n=!1;(t||e.f&262144)&&e.nodes!==null&&e.nodes.end!==null&&(Vn(e.nodes.start,e.nodes.end),n=!0),e.f|=C,Rn(e,t&&!n),vr(e,0);var r=e.nodes&&e.nodes.t;if(r!==null)for(let e of r)e.stop();Ln(e),e.f^=C,e.f|=x;var i=e.parent;i!==null&&i.first!==null&&Hn(e),e.next=e.prev=e.teardown=e.ctx=e.deps=e.fn=e.nodes=e.ac=e.b=null}function Vn(e,t){for(;e!==null;){var n=e===t?null:pn(e);e.remove(),e=n}}function Hn(e){var t=e.parent,n=e.prev,r=e.next;n!==null&&(n.next=r),r!==null&&(r.prev=n),t!==null&&(t.first===e&&(t.first=r),t.last===e&&(t.last=n))}function Un(e,t,n=!0){var r=[];Wn(e,r,!0);var i=()=>{n&&Bn(e),t&&t()},a=r.length;if(a>0){var o=()=>--a||i();for(var s of r)s.out(o)}else i()}function Wn(e,t,n){if(!(e.f&8192)){e.f^=b;var r=e.nodes&&e.nodes.t;if(r!==null)for(let e of r)(e.is_global||n)&&t.push(e);for(var i=e.first;i!==null;){var a=i.next;if(!(i.f&64)){var o=(i.f&65536)!=0||(i.f&32)!=0&&(e.f&16)!=0;Wn(i,t,o?n:!1)}i=a}}}function Gn(e){Kn(e,!0)}function Kn(e,t){if(e.f&8192){e.f^=b,e.f&1024||(tt(e,v),Lt.ensure().schedule(e));for(var n=e.first;n!==null;){var r=n.next,i=(n.f&65536)!=0||(n.f&32)!=0;Kn(n,i?t:!1),n=r}var a=e.nodes&&e.nodes.t;if(a!==null)for(let e of a)(e.is_global||t)&&e.in()}}function qn(e,t){if(e.nodes)for(var n=e.nodes.start,r=e.nodes.end;n!==null;){var i=n===r?null:pn(n);t.append(n),n=i}}var Jn=null,Yn=!1,Xn=!1;function Zn(e){Xn=e}var Qn=null,$n=!1;function er(e){Qn=e}var tr=null;function nr(e){tr=e}var rr=null;function ir(e){Qn!==null&&(!Re||Qn.f&2)&&(rr??=new Set).add(e)}var ar=null,or=0,sr=null;function cr(e){sr=e}var lr=1,ur=0,dr=ur;function fr(e){dr=e}function pr(){return++lr}function mr(e){var t=e.f;if(t&2048)return!0;if(t&2&&(e.f&=~O),t&4096){for(var n=e.deps,r=n.length,i=0;i<r;i++){var a=n[i];if(mr(a)&&St(a),a.wv>e.wv)return!0}t&512&&kt===null&&tt(e,_)}return!1}function hr(e,t,n=!0){var r=e.reactions;if(r!==null&&!(!Re&&rr!==null&&rr.has(e)))for(var i=0;i<r.length;i++){var a=r[i];a.f&2?hr(a,t,!1):t===a&&(n?tt(a,v):a.f&1024&&tt(a,y),Wt(a))}}function gr(e){var t=ar,n=or,r=sr,i=Qn,a=rr,o=Be,s=$n,c=dr,l=e.f;ar=null,or=0,sr=null,Qn=l&96?null:e,rr=null,Ve(e.ctx),$n=!1,dr=++ur,e.ac!==null&&(xn(()=>{e.ac.abort(se)}),e.ac=null);try{e.f|=k;var u=e.fn,d=u();e.f|=S;var f=e.deps,p=Dt?.is_fork;if(ar!==null){var m;if(p||vr(e,or),f!==null&&or>0)for(f.length=or+ar.length,m=0;m<ar.length;m++)f[or+m]=ar[m];else e.deps=f=ar;if(En()&&e.f&512)for(m=or;m<f.length;m++)(f[m].reactions??=[]).push(e)}else!p&&f!==null&&or<f.length&&(vr(e,or),f.length=or);if(Ge()&&sr!==null&&!$n&&f!==null&&!(e.f&6146))for(m=0;m<sr.length;m++)hr(sr[m],e);if(i!==null&&i!==e){if(ur++,i.deps!==null)for(let e=0;e<n;e+=1)i.deps[e].rv=ur;if(t!==null)for(let e of t)e.rv=ur;sr!==null&&(r===null?r=sr:r.push(...sr))}return e.f&8388608&&(e.f^=te),d}catch(e){return Qe(e)}finally{e.f^=k,ar=t,or=n,sr=r,Qn=i,rr=a,Ve(o),$n=s,dr=c}}function _r(e,r){let i=r.reactions;if(i!==null){var a=t.call(i,e);if(a!==-1){var o=i.length-1;o===0?i=r.reactions=null:(i[a]=i[o],i.pop())}}if(i===null&&r.f&2&&(ar===null||!n.call(ar,r))){var s=r;s.f&512&&(s.f^=512,s.f&=~O),s.v!==xe&&nt(s),Ct(s),vr(s,0)}}function vr(e,t){var n=e.deps;if(n!==null)for(var r=t;r<n.length;r++)_r(e,n[r])}function yr(e){var t=e.f;if(!(t&16384)){tt(e,_);var n=tr,r=Yn;tr=e,Yn=!0;try{t&16777232?zn(e):Rn(e),Ln(e);var i=gr(e);e.teardown=typeof i==`function`?i:null,e.wv=lr}finally{Yn=r,tr=n}}}async function br(){if(Re)return new Promise(e=>{requestAnimationFrame(()=>e()),setTimeout(()=>e())});await Promise.resolve(),Rt()}function U(e){var t=(e.f&2)!=0;if(Jn?.add(e),Qn!==null&&!$n&&!(tr!==null&&tr.f&16384)&&(rr===null||!rr.has(e))){var r=Qn.deps;if(Qn.f&2097152)e.rv<ur&&(e.rv=ur,ar===null&&r!==null&&r[or]===e?or++:ar===null?ar=[e]:ar.push(e));else{Qn.deps??=[],n.call(Qn.deps,e)||Qn.deps.push(e);var i=e.reactions;i===null?e.reactions=[Qn]:n.call(i,Qn)||i.push(Qn)}}if(Xn&&Jt.has(e))return Jt.get(e);if(t){var a=e;if(Xn){var o=a.v;return(!(a.f&1024)&&a.reactions!==null||Sr(a))&&(o=xt(a)),Jt.set(a,o),o}var s=(a.f&512)==0&&!$n&&Qn!==null&&(Yn||(Qn.f&512)!=0),c=(a.f&S)===0;mr(a)&&(s&&(a.f|=512),St(a)),s&&!c&&(wt(a),xr(a))}if(kt?.has(e))return kt.get(e);if(e.f&8388608)throw e.v;return e.v}function xr(e){if(e.f|=512,e.deps!==null)for(let t of e.deps)(t.reactions??=[]).push(e),t.f&2&&!(t.f&512)&&(wt(t),xr(t))}function Sr(e){if(e.v===xe)return!0;if(e.deps===null)return!1;for(let t of e.deps)if(Jt.has(t)||t.f&2&&Sr(t))return!0;return!1}function Cr(e){var t=$n;try{return $n=!0,e()}finally{$n=t}}function wr(e){return e.endsWith(`capture`)&&e!==`gotpointercapture`&&e!==`lostpointercapture`}var Tr=[`beforeinput`,`click`,`change`,`dblclick`,`contextmenu`,`focusin`,`focusout`,`input`,`keydown`,`keyup`,`mousedown`,`mousemove`,`mouseout`,`mouseover`,`mouseup`,`pointerdown`,`pointermove`,`pointerout`,`pointerover`,`pointerup`,`touchend`,`touchmove`,`touchstart`];function Er(e){return Tr.includes(e)}var Dr=`allowfullscreen.async.autofocus.autoplay.checked.controls.default.disabled.formnovalidate.indeterminate.inert.ismap.loop.multiple.muted.nomodule.novalidate.open.playsinline.readonly.required.reversed.seamless.selected.webkitdirectory.defer.disablepictureinpicture.disableremoteplayback`.split(`.`),Or={formnovalidate:`formNoValidate`,ismap:`isMap`,nomodule:`noModule`,playsinline:`playsInline`,readonly:`readOnly`,defaultvalue:`defaultValue`,defaultchecked:`defaultChecked`,srcobject:`srcObject`,novalidate:`noValidate`,allowfullscreen:`allowFullscreen`,disablepictureinpicture:`disablePictureInPicture`,disableremoteplayback:`disableRemotePlayback`};function kr(e){return e=e.toLowerCase(),Or[e]??e}[...Dr];var Ar=[`touchstart`,`touchmove`];function jr(e){return Ar.includes(e)}var Mr=[`textarea`,`script`,`style`,`title`];function Nr(e){return Mr.includes(e)}var Pr=Symbol(`events`),Fr=new Set,Ir=new Set;function Lr(e){if(!P)return;e.removeAttribute(`onload`),e.removeAttribute(`onerror`);let t=e.__e;t!==void 0&&(e.__e=void 0,queueMicrotask(()=>{e.isConnected&&e.dispatchEvent(t)}))}function Rr(e,t,n,r={}){function i(e){if(r.capture||Hr.call(t,e),!e.cancelBubble)return xn(()=>n?.call(this,e))}return e.startsWith(`pointer`)||e.startsWith(`touch`)||e===`wheel`?Xe(()=>{t.addEventListener(e,i,r)}):t.addEventListener(e,i,r),i}function zr(e,t,n,r,i){var a={capture:r,passive:i},o=Rr(e,t,n,a);(t===document.body||t===window||t===document||t instanceof HTMLMediaElement)&&Dn(()=>{t.removeEventListener(e,o,a)})}function W(e,t,n){(t[Pr]??={})[e]=n}function Br(e){for(var t=0;t<e.length;t++)Fr.add(e[t]);for(var n of Ir)n(e)}var Vr=null;function Hr(e){var t=this,n=t.ownerDocument,r=e.type,a=e.composedPath?.()||[],o=a[0]||e.target;Vr=e;var s=0,c=Vr===e&&e[Pr];if(c){var l=a.indexOf(c);if(l!==-1&&(t===document||t===window)){e[Pr]=t;return}var u=a.indexOf(t);if(u===-1)return;l<=u&&(s=l)}if(o=a[s]||e.target,o!==t){i(e,`currentTarget`,{configurable:!0,get(){return o||n}});var d=Qn,f=tr;er(null),nr(null);try{for(var p,m=[];o!==null&&o!==t;){try{var h=o[Pr]?.[r];h!=null&&(!o.disabled||e.target===o)&&h.call(o,e)}catch(e){p?m.push(e):p=e}if(e.cancelBubble)break;s++,o=s<a.length?a[s]:null}if(p){for(let e of m)queueMicrotask(()=>{throw e});throw p}}finally{e[Pr]=t,delete e.currentTarget,er(d),nr(f)}}}var Ur=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy(`svelte-trusted-html`,{createHTML:e=>e});function Wr(e){return Ur?.createHTML(e)??e}function Gr(e){var t=gn(`template`);return t.innerHTML=Wr(e.replaceAll(`<!>`,`<!---->`)),t.content}function Kr(e,t){var n=tr;n.nodes===null&&(n.nodes={start:e,end:t,a:null,t:null})}function G(e,t){var n=(t&1)!=0,r=(t&2)!=0,i,a=!e.startsWith(`<!>`);return()=>{if(P)return Kr(ke,null),ke;i===void 0&&(i=Gr(a?e:`<!>`+e),n||(i=fn(i)));var t=r||sn?document.importNode(i,!0):i.cloneNode(!0);if(n){var o=fn(t),s=t.lastChild;Kr(o,s)}else Kr(t,t);return t}}function qr(e,t,n=`svg`){var r=!e.startsWith(`<!>`),i=(t&1)!=0,a=`<${n}>${r?e:`<!>`+e}</${n}>`,o;return()=>{if(P)return Kr(ke,null),ke;if(!o){var e=fn(Gr(a));if(i)for(o=document.createDocumentFragment();fn(e);)o.appendChild(fn(e));else o=fn(e)}var t=o.cloneNode(!0);if(i){var n=fn(t),r=t.lastChild;Kr(n,r)}else Kr(t,t);return t}}function Jr(e,t){return qr(e,t,`svg`)}function Yr(e=``){if(!P){var t=dn(e+``);return Kr(t,t),t}var n=ke;return n.nodeType===3?_n(n):(n.before(n=dn()),Ae(n)),Kr(n,n),n}function Xr(){if(P)return Kr(ke,null),ke;var e=document.createDocumentFragment(),t=document.createComment(``),n=dn();return e.append(t,n),Kr(t,n),e}function K(e,t){if(P){var n=tr;(!(n.f&32768)||n.nodes.end===null)&&(n.nodes.end=ke),je();return}e!==null&&e.before(t)}function q(e,t){var n=t==null?``:typeof t==`object`?`${t}`:t;n!==(e[ae]??=e.nodeValue)&&(e[ae]=n,e.nodeValue=`${n}`)}function Zr(e,t){return $r(e,t)}var Qr=new Map;function $r(e,{target:t,anchor:n,props:i={},events:a,context:o,intro:s=!0,transformError:c}){un();var l=void 0,u=An(()=>{var s=n??t.appendChild(dn());ut(s,{pending:()=>{}},t=>{Ue({});var n=Be;if(o&&(n.c=o),a&&(i.$$events=a),P&&Kr(t,null),l=e(t,i)||{},P&&(tr.nodes.end=ke,ke===null||ke.nodeType!==8||ke.data!==`]`))throw Te(),be;We()},c);var u=new Set,d=e=>{for(var n=0;n<e.length;n++){var r=e[n];if(!u.has(r)){u.add(r);var i=jr(r);for(let e of[t,document]){var a=Qr.get(e);a===void 0&&(a=new Map,Qr.set(e,a));var o=a.get(r);o===void 0?(e.addEventListener(r,Hr,{passive:i}),a.set(r,1)):a.set(r,o+1)}}}};return d(r(Fr)),Ir.add(d),()=>{for(var e of u)for(let n of[t,document]){var r=Qr.get(n),i=r.get(e);--i==0?(n.removeEventListener(e,Hr),r.delete(e),r.size===0&&Qr.delete(n)):r.set(e,i)}Ir.delete(d),s!==n&&s.parentNode?.removeChild(s)}});return ei.set(l,u),l}var ei=new WeakMap,ti=class{anchor;#e=new Map;#t=new Map;#n=new Map;#r=new Set;#i=!0;constructor(e,t=!0){this.anchor=e,this.#i=t}#a=e=>{if(this.#e.has(e)){var t=this.#e.get(e),n=this.#t.get(t);if(n)Gn(n),this.#r.delete(t);else{var r=this.#n.get(t);r&&(Gn(r.effect),this.#t.set(t,r.effect),this.#n.delete(t),r.fragment.lastChild.remove(),this.anchor.before(r.fragment),n=r.effect)}for(let[t,n]of this.#e){if(this.#e.delete(t),t===e)break;let r=this.#n.get(n);r&&(Bn(r.effect),this.#n.delete(n))}for(let[e,r]of this.#t){if(e===t||this.#r.has(e))continue;let i=()=>{if(Array.from(this.#e.values()).includes(e)){var t=document.createDocumentFragment();qn(r,t),t.append(dn()),this.#n.set(e,{effect:r,fragment:t})}else Bn(r);this.#r.delete(e),this.#t.delete(e)};this.#i||!n?(this.#r.add(e),Un(r,i,!1)):i()}}};#o=e=>{this.#e.delete(e);let t=Array.from(this.#e.values());for(let[e,n]of this.#n)t.includes(e)||(Bn(n.effect),this.#n.delete(e))};ensure(e,t){var n=Dt,r=hn();if(t&&!this.#t.has(e)&&!this.#n.has(e))if(r){var i=document.createDocumentFragment(),a=dn();i.append(a),this.#n.set(e,{effect:In(()=>t(a)),fragment:i})}else this.#t.set(e,In(()=>t(this.anchor)));if(this.#e.set(n,e),r){for(let[t,r]of this.#t)t===e?n.unskip_effect(r):n.skip_effect(r);for(let[t,r]of this.#n)t===e?n.unskip_effect(r.effect):n.skip_effect(r.effect);n.oncommit(this.#a),n.ondiscard(this.#o)}else P&&(this.anchor=ke),this.#a(n)}};function J(e,t,n=!1){var r;P&&(r=ke,je());var i=new ti(e),a=n?w:0;function o(e,t){if(P){var n=Pe(r);if(e!==parseInt(n.substring(1))){var a=Ne();Ae(a),i.anchor=a,Oe(!1),i.ensure(e,t),Oe(!0);return}}i.ensure(e,t)}Pn(()=>{var e=!1;t((t,n=0)=>{e=!0,o(n,t)}),e||o(-1,null)},a)}var ni=Symbol(`NaN`);function ri(e,t,n){P&&je();var r=new ti(e),i=!Ge();Pn(()=>{var e=t();e!==e&&(e=ni),i&&typeof e==`object`&&e&&(e={}),r.ensure(e,n)})}function ii(e,t){return t}function ai(e,t,n){for(var i=[],a=t.length,o,s=t.length,c=0;c<a;c++){let n=t[c];Un(n,()=>{if(o){if(o.pending.delete(n),o.done.add(n),o.pending.size===0){var t=e.outrogroups;oi(e,r(o.done)),t.delete(o),t.size===0&&(e.outrogroups=null)}}else--s},!1)}if(s===0){var l=i.length===0&&n!==null;if(l){var u=n,d=u.parentNode;mn(d),d.append(u),e.items.clear()}oi(e,t,!l)}else o={pending:new Set(t),done:new Set},(e.outrogroups??=new Set).add(o)}function oi(e,t,n=!0){var r;if(e.pending.size>0){r=new Set;for(let t of e.pending.values())for(let n of t)r.add(e.items.get(n).e)}for(var i=0;i<t.length;i++){var a=t[i];r?.has(a)?(a.f|=D,qn(a,document.createDocumentFragment())):Bn(t[i],n)}}var si;function Y(t,n,i,a,o,s=null){var c=t,l=new Map;if(n&4){var u=t;c=P?Ae(fn(u)):u.appendChild(dn())}P&&je();var d=null,f=yt(()=>{var t=i();return e(t)?t:t==null?[]:r(t)}),p,m=new Map,h=!0;function g(e){v.effect.f&16384||(v.pending.delete(e),v.fallback=d,li(v,p,c,n,a),d!==null&&(p.length===0?d.f&33554432?(d.f^=D,di(d,null,c)):Gn(d):Un(d,()=>{d=null})))}function _(e){v.pending.delete(e)}var v={effect:Pn(()=>{p=U(f);var e=p.length;let t=!1;P&&Pe(c)===`[!`!=(e===0)&&(c=Ne(),Ae(c),Oe(!1),t=!0);for(var r=new Set,u=Dt,v=hn(),y=0;y<e;y+=1){P&&ke.nodeType===8&&ke.data===`]`&&(c=ke,t=!0,Oe(!1));var b=p[y],x=a(b,y),S=h?null:l.get(x);S?(S.v&&Qt(S.v,b),S.i&&Qt(S.i,y),v&&u.unskip_effect(S.e)):(S=ui(l,h?c:si??=dn(),b,x,y,o,n,i),h||(S.e.f|=D),l.set(x,S)),r.add(x)}if(e===0&&s&&!d&&(h?d=In(()=>s(c)):(d=In(()=>s(si??=dn())),d.f|=D)),e>r.size&&ue(``,``,``),P&&e>0&&Ae(Ne()),!h)if(m.set(u,r),v){for(let[e,t]of l)r.has(e)||u.skip_effect(t.e);u.oncommit(g),u.ondiscard(_)}else g(u);t&&Oe(!0),U(f)}),flags:n,items:l,pending:m,outrogroups:null,fallback:d};h=!1,P&&(c=ke)}function ci(e){for(;e!==null&&!(e.f&32);)e=e.next;return e}function li(e,t,n,i,a){var o=(i&8)!=0,s=t.length,c=e.items,l=ci(e.effect.first),u,d=null,f,p=[],m=[],h,g,_,v;if(o)for(v=0;v<s;v+=1)h=t[v],g=a(h,v),_=c.get(g).e,_.f&33554432||(_.nodes?.a?.measure(),(f??=new Set).add(_));for(v=0;v<s;v+=1){if(h=t[v],g=a(h,v),_=c.get(g).e,e.outrogroups!==null)for(let t of e.outrogroups)t.pending.delete(_),t.done.delete(_);if(_.f&8192&&(Gn(_),o&&(_.nodes?.a?.unfix(),(f??=new Set).delete(_))),_.f&33554432)if(_.f^=D,_===l)di(_,null,n);else{var y=d?d.next:l;_===e.effect.last&&(e.effect.last=_.prev),_.prev&&(_.prev.next=_.next),_.next&&(_.next.prev=_.prev),fi(e,d,_),fi(e,_,y),di(_,y,n),d=_,p=[],m=[],l=ci(d.next);continue}if(_!==l){if(u!==void 0&&u.has(_)){if(p.length<m.length){var b=m[0],x;d=b.prev;var S=p[0],C=p[p.length-1];for(x=0;x<p.length;x+=1)di(p[x],b,n);for(x=0;x<m.length;x+=1)u.delete(m[x]);fi(e,S.prev,C.next),fi(e,d,S),fi(e,C,b),l=b,d=C,--v,p=[],m=[]}else u.delete(_),di(_,l,n),fi(e,_.prev,_.next),fi(e,_,d===null?e.effect.first:d.next),fi(e,d,_),d=_;continue}for(p=[],m=[];l!==null&&l!==_;)(u??=new Set).add(l),m.push(l),l=ci(l.next);if(l===null)continue}_.f&33554432||p.push(_),d=_,l=ci(_.next)}if(e.outrogroups!==null){for(let t of e.outrogroups)t.pending.size===0&&(oi(e,r(t.done)),e.outrogroups?.delete(t));e.outrogroups.size===0&&(e.outrogroups=null)}if(l!==null||u!==void 0){var w=[];if(u!==void 0)for(_ of u)_.f&8192||w.push(_);for(;l!==null;)!(l.f&8192)&&l!==e.fallback&&w.push(l),l=ci(l.next);var T=w.length;if(T>0){var E=i&4&&s===0?n:null;if(o){for(v=0;v<T;v+=1)w[v].nodes?.a?.measure();for(v=0;v<T;v+=1)w[v].nodes?.a?.fix()}ai(e,w,E)}}o&&Xe(()=>{if(f!==void 0)for(_ of f)_.nodes?.a?.apply()})}function ui(e,t,n,r,i,a,o,s){var c=o&1?o&16?Xt(n):Zt(n,!1,!1):null,l=o&2?Xt(i):null;return{v:c,i:l,e:In(()=>(a(t,c??n,l??i,s),()=>{e.delete(r)}))}}function di(e,t,n){if(e.nodes)for(var r=e.nodes.start,i=e.nodes.end,a=t&&!(t.f&33554432)?t.nodes.start:n;r!==null;){var o=pn(r);if(a.before(r),r===i)return;r=o}}function fi(e,t,n){t===null?e.effect.first=n:t.next=n,n===null?e.effect.last=t:n.prev=t}function pi(e,t,...n){var r=new ti(e);Pn(()=>{let e=t()??null;r.ensure(e,e&&(t=>e(t,...n)))},w)}function mi(e,t,n){var r;P&&(r=ke,je());var i=new ti(e);Pn(()=>{var e=t()??null;if(P&&Pe(r)===`[`!=(e!==null)){var a=Ne();Ae(a),i.anchor=a,Oe(!1),i.ensure(e,e&&(t=>n(t,e))),Oe(!0);return}i.ensure(e,e&&(t=>n(t,e)))},w)}function hi(e,t,n,r,i,a){let o=P;P&&je();var s=null;P&&ke.nodeType===1&&(s=ke,je());var c=P?ke:e,l=new ti(c,!1);Pn(()=>{let e=t()||null;var a=i?i():n||e===`svg`?Ce:void 0;if(e===null){l.ensure(null,null);return}return l.ensure(e,t=>{if(e){if(s=P?s:gn(e,a),Kr(s,s),r){var n=null;P&&Nr(e)&&s.append(n=document.createComment(``));var i=P?fn(s):s.appendChild(dn());P&&(i===null?Oe(!1):Ae(i)),r(s,i),n?.remove()}tr.nodes.end=s,t.before(s)}P&&Ae(t)}),()=>{}},w),Dn(()=>{}),o&&(Oe(!0),Ae(c))}function gi(e,t){var n=void 0,r;Fn(()=>{n!==(n=t())&&(r&&=(Bn(r),null),n&&(r=In(()=>{jn(()=>n(e))})))})}function _i(e){var t,n,r=``;if(typeof e==`string`||typeof e==`number`)r+=e;else if(typeof e==`object`)if(Array.isArray(e)){var i=e.length;for(t=0;t<i;t++)e[t]&&(n=_i(e[t]))&&(r&&(r+=` `),r+=n)}else for(n in e)e[n]&&(r&&(r+=` `),r+=n);return r}function vi(){for(var e,t,n=0,r=``,i=arguments.length;n<i;n++)(e=arguments[n])&&(t=_i(e))&&(r&&(r+=` `),r+=t);return r}function yi(e){return typeof e==`object`?vi(e):e??``}var bi=[...` 	
+\r\f\xA0\v`];function xi(e,t,n){var r=e==null?``:``+e;if(t&&(r=r?r+` `+t:t),n){for(var i of Object.keys(n))if(n[i])r=r?r+` `+i:i;else if(r.length)for(var a=i.length,o=0;(o=r.indexOf(i,o))>=0;){var s=o+a;(o===0||bi.includes(r[o-1]))&&(s===r.length||bi.includes(r[s]))?r=(o===0?``:r.substring(0,o))+r.substring(s+1):o=s}}return r===``?null:r}function Si(e,t=!1){var n=t?` !important;`:`;`,r=``;for(var i of Object.keys(e)){var a=e[i];a!=null&&a!==``&&(r+=` `+i+`: `+a+n)}return r}function Ci(e){return e[0]!==`-`||e[1]!==`-`?e.toLowerCase():e}function wi(e,t){if(t){var n=``,r,i;if(Array.isArray(t)?(r=t[0],i=t[1]):r=t,e){e=String(e).replaceAll(/\s*\/\*.*?\*\/\s*/g,``).trim();var a=!1,o=0,s=!1,c=[];r&&c.push(...Object.keys(r).map(Ci)),i&&c.push(...Object.keys(i).map(Ci));var l=0,u=-1;let t=e.length;for(var d=0;d<t;d++){var f=e[d];if(s?f===`/`&&e[d-1]===`*`&&(s=!1):a?a===f&&(a=!1):f===`/`&&e[d+1]===`*`?s=!0:f===`"`||f===`'`?a=f:f===`(`?o++:f===`)`&&o--,!s&&a===!1&&o===0){if(f===`:`&&u===-1)u=d;else if(f===`;`||d===t-1){if(u!==-1){var p=Ci(e.substring(l,u).trim());if(!c.includes(p)){f!==`;`&&d++;var m=e.substring(l,d).trim();n+=` `+m+`;`}}l=d+1,u=-1}}}}return r&&(n+=Si(r)),i&&(n+=Si(i,!0)),n=n.trim(),n===``?null:n}return e==null?null:String(e)}function X(e,t,n,r,i,a){var o=e[re];if(P||o!==n||o===void 0){var s=xi(n,r,a);(!P||s!==e.getAttribute(`class`))&&(s==null?e.removeAttribute(`class`):t?e.className=s:e.setAttribute(`class`,s)),e[re]=n}else if(a&&i!==a)for(var c in a){var l=!!a[c];(i==null||l!==!!i[c])&&e.classList.toggle(c,l)}return a}function Ti(e,t={},n,r){for(var i in n){var a=n[i];t[i]!==a&&(n[i]==null?e.style.removeProperty(i):e.style.setProperty(i,a,r))}}function Z(e,t,n,r){var i=e[ie];if(P||i!==t){var a=wi(t,r);(!P||a!==e.getAttribute(`style`))&&(a==null?e.removeAttribute(`style`):e.style.cssText=a),e[ie]=t}else r&&(Array.isArray(r)?(Ti(e,n?.[0],r[0]),Ti(e,n?.[1],r[1],`important`)):Ti(e,n,r));return r}function Ei(t,n,r=!1){if(t.multiple){if(n==null)return;if(!e(n))return Ee();for(var i of t.options)i.selected=n.includes(ki(i));return}for(i of t.options)if(an(ki(i),n)){i.selected=!0;return}(!r||n!==void 0)&&(t.selectedIndex=-1)}function Di(e){var t=new MutationObserver(()=>{Ei(e,e.__value)});t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`value`]}),Dn(()=>{t.disconnect()})}function Oi(e,t,n=t){var r=new WeakSet,i=!0;Sn(e,`change`,t=>{var i=t?`[selected]`:`:checked`,a;if(e.multiple)a=[].map.call(e.querySelectorAll(i),ki);else{var o=e.querySelector(i)??e.querySelector(`option:not([disabled])`);a=o&&ki(o)}n(a),e.__value=a,Dt!==null&&r.add(Dt)}),jn(()=>{var a=t();if(e===document.activeElement){var o=Re?Ot:Dt;if(r.has(o))return}if(Ei(e,a,i),i&&a===void 0){var s=e.querySelector(`:checked`);s!==null&&(a=ki(s),n(a))}e.__value=a,i=!1}),Di(e)}function ki(e){return`__value`in e?e.__value:e.value}var Ai=Symbol(`class`),ji=Symbol(`style`),Mi=Symbol(`is custom element`),Ni=Symbol(`is html`),Pi=N?`link`:`LINK`,Fi=N?`input`:`INPUT`,Ii=N?`option`:`OPTION`,Li=N?`select`:`SELECT`,Ri=N?`progress`:`PROGRESS`;function zi(e){if(P){var t=!1,n=()=>{if(!t){if(t=!0,e.hasAttribute(`value`)){var n=e.value;Q(e,`value`,null),e.value=n}if(e.hasAttribute(`checked`)){var r=e.checked;Q(e,`checked`,null),e.checked=r}}};e[oe]=n,Xe(n),bn()}}function Bi(e,t){var n=Wi(e);n.value===(n.value=t??void 0)||e.value===t&&(t!==0||e.nodeName!==Ri)||(e.value=t??``)}function Vi(e,t){t?e.hasAttribute(`selected`)||e.setAttribute(`selected`,``):e.removeAttribute(`selected`)}function Q(e,t,n,r){var i=Wi(e);P&&(i[t]=e.getAttribute(t),t===`src`||t===`srcset`||t===`href`&&e.nodeName===Pi)||i[t]!==(i[t]=n)&&(t===`loading`&&(e[j]=n),n==null?e.removeAttribute(t):typeof n!=`string`&&Ki(e).includes(t)?e[t]=n:e.setAttribute(t,n))}function Hi(e,t,n,r,i=!1,a=!1){if(P&&i&&e.nodeName===Fi){var o=e;(o.type===`checkbox`?`defaultChecked`:`defaultValue`)in n||zi(o)}var s=Wi(e),c=s[Mi],l=!s[Ni];let u=P&&c;u&&Oe(!1);var d=t||{},f=e.nodeName===Ii;for(var p in t)p in n||(n[p]=null);n.class?n.class=yi(n.class):(r||n[Ai])&&(n.class=null),n[ji]&&(n.style??=null);var m=Ki(e);if(e.nodeName===Fi&&`type`in n&&(`value`in n||`__value`in n)){var h=n.type;(h!==d.type||h===void 0&&e.hasAttribute(`type`))&&(d.type=h,Q(e,`type`,h,a))}for(let i in n){let o=n[i];if(f&&i===`value`&&o==null){e.value=e.__value=``,d[i]=o;continue}if(i===`class`){X(e,e.namespaceURI===`http://www.w3.org/1999/xhtml`,o,r,t?.[Ai],n[Ai]),d[i]=o,d[Ai]=n[Ai];continue}if(i===`style`){Z(e,o,t?.[ji],n[ji]),d[i]=o,d[ji]=n[ji];continue}var g=d[i];if(!(o===g&&!(o===void 0&&e.hasAttribute(i)))){d[i]=o;var _=i[0]+i[1];if(_!==`$$`)if(_===`on`){let t={},n=`$$`+i,r=i.slice(2);var v=Er(r);if(wr(r)&&(r=r.slice(0,-7),t.capture=!0),!v&&g){if(o!=null)continue;e.removeEventListener(r,d[n],t),d[n]=null}if(v)W(r,e,o),Br([r]);else if(o!=null){function a(e){d[i].call(this,e)}d[n]=Rr(r,e,a,t)}}else if(i===`style`)Q(e,i,o);else if(i===`autofocus`)vn(e,!!o);else if(!c&&(i===`__value`||i===`value`&&o!=null))e.value=e.__value=o;else if(i===`selected`&&f)Vi(e,o);else{var y=i;l||(y=kr(y));var b=y===`defaultValue`||y===`defaultChecked`;if(o==null&&!c&&!b)if(s[i]=null,y===`value`||y===`checked`){let n=e,r=t===void 0;if(y===`value`){let e=n.defaultValue;n.removeAttribute(y),n.defaultValue=e,n.value=n.__value=r?e:null}else{let e=n.defaultChecked;n.removeAttribute(y),n.defaultChecked=e,n.checked=r?e:!1}}else e.removeAttribute(i);else b||m.includes(y)&&(c||typeof o!=`string`)?(e[y]=o,y in s&&(s[y]=xe)):typeof o!=`function`&&Q(e,y,o,a)}}}return u&&Oe(!0),d}function Ui(e,t,n=[],r=[],i=[],a,o=!1,s=!1){ft(i,n,r,n=>{var r=void 0,i={},c=e.nodeName===Li,l=!1;if(Fn(()=>{var u=t(...n.map(U)),d=Hi(e,r,u,a,o,s);l&&c&&`value`in u&&Ei(e,u.value);for(let e of Object.getOwnPropertySymbols(i))u[e]||Bn(i[e]);for(let t of Object.getOwnPropertySymbols(u)){var f=u[t];t.description===`@attach`&&(!r||f!==r[t])&&(i[t]&&Bn(i[t]),i[t]=In(()=>gi(e,()=>f))),d[t]=f}r=d}),c){var u=e;jn(()=>{Ei(u,r.value,!0),Di(u)})}l=!0})}function Wi(e){return e[M]??={[Mi]:e.nodeName.includes(`-`),[Ni]:e.namespaceURI===Se}}var Gi=new Map;function Ki(e){var t=e.getAttribute(`is`)||e.nodeName,n=Gi.get(t);if(n)return n;Gi.set(t,n=[]);for(var r,i=e,a=Element.prototype;a!==i;){for(var s in r=o(i),r)r[s].set&&s!==`innerHTML`&&s!==`textContent`&&s!==`innerText`&&n.push(s);i=l(i)}return n}function qi(e,t,n=t){var r=new WeakSet;Sn(e,`input`,async i=>{var a=i?e.defaultValue:e.value;if(a=Ji(e)?Yi(a):a,n(a),Dt!==null&&r.add(Dt),await br(),a!==(a=t())){var o=e.selectionStart,s=e.selectionEnd,c=e.value.length;if(e.value=a??``,s!==null){var l=e.value.length;o===s&&s===c&&l>c?(e.selectionStart=l,e.selectionEnd=l):(e.selectionStart=o,e.selectionEnd=Math.min(s,l))}}}),(P&&e.defaultValue!==e.value||Cr(t)==null&&e.value)&&(n(Ji(e)?Yi(e.value):e.value),Dt!==null&&r.add(Dt)),Nn(()=>{var n=t();if(e===document.activeElement){var i=Re?Ot:Dt;if(r.has(i))return}Ji(e)&&n===Yi(e.value)||e.type===`date`&&!n&&!e.value||n!==e.value&&(e.value=n??``)})}function Ji(e){var t=e.type;return t===`number`||t===`range`}function Yi(e){return e===``?null:+e}function Xi(e,t){return e===t||e?.[ne]===t}function Zi(e={},t,n,r){var i=Be.r,a=tr;return jn(()=>{var o,s;return Nn(()=>{o=s,s=r?.()||[],Cr(()=>{Xi(n(...s),e)||(t(e,...s),o&&Xi(n(...o),e)&&t(null,...o))})}),()=>{let r=a;for(;r!==i&&r.parent!==null&&r.parent.f&33554432;)r=r.parent;let o=()=>{s&&Xi(n(...s),e)&&t(null,...s)},c=r.teardown;r.teardown=()=>{o(),c?.()}}}),e}var Qi={get(e,t){if(!e.exclude.has(t))return e.props[t]},set(e,t){return!1},getOwnPropertyDescriptor(e,t){if(!e.exclude.has(t)&&t in e.props)return{enumerable:!0,configurable:!0,value:e.props[t]}},has(e,t){return e.exclude.has(t)?!1:t in e.props},ownKeys(e){return Reflect.ownKeys(e.props).filter(t=>!e.exclude.has(t))}};function $i(e,t,n){return new Proxy({props:e,exclude:t},Qi)}var ea={get(e,t){let n=e.props.length;for(;n--;){let r=e.props[n];if(d(r)&&(r=r()),typeof r==`object`&&r&&t in r)return r[t]}},set(e,t,n){let r=e.props.length;for(;r--;){let i=e.props[r];d(i)&&(i=i());let o=a(i,t);if(o&&o.set)return o.set(n),!0}return!1},getOwnPropertyDescriptor(e,t){let n=e.props.length;for(;n--;){let r=e.props[n];if(d(r)&&(r=r()),typeof r==`object`&&r&&t in r){let e=a(r,t);return e&&!e.configurable&&(e.configurable=!0),e}}},has(e,t){if(t===ne||t===A)return!1;for(let n of e.props)if(d(n)&&(n=n()),n!=null&&t in n)return!0;return!1},ownKeys(e){let t=[];for(let n of e.props)if(d(n)&&(n=n()),n){for(let e in n)t.includes(e)||t.push(e);for(let e of Object.getOwnPropertySymbols(n))t.includes(e)||t.push(e)}return t}};function ta(...e){return new Proxy({props:e},ea)}function na(e,t,n,r){var i=!ze||(n&2)!=0,o=(n&8)!=0,s=(n&16)!=0,c=r,l=!0,u=void 0,d=()=>s&&i?(u??=gt(r),U(u)):(l&&(l=!1,c=s?Cr(r):r),c);let f;if(o){var p=ne in e||A in e;f=a(e,t)?.set??(p&&t in e?n=>e[t]=n:void 0)}var m,h=!1;o?[m,h]=st(()=>e[t]):m=e[t],m===void 0&&r!==void 0&&(m=d(),f&&(i&&he(t),f(m)));var g=i?()=>{var n=e[t];return n===void 0?d():(l=!0,n)}:()=>{var n=e[t];return n!==void 0&&(c=void 0),n===void 0?c:n};if(i&&!(n&4))return g;if(f){var _=e.$$legacy;return(function(e,t){return arguments.length>0?((!i||!t||_||h)&&f(t?g():e),e):g()})}var v=!1,y=(n&1?gt:yt)(()=>(v=!1,g()));o&&U(y);var b=tr;return(function(e,t){if(arguments.length>0){let n=t?U(y):i&&o?nn(e):e;return R(y,n),v=!0,c!==void 0&&(c=n),e}return Xn&&v||b.f&16384?y.v:U(y)})}function ra(e){Be===null&&ce(`onMount`),ze&&Be.l!==null?ia(Be).m.push(e):On(()=>{let t=Cr(e);if(typeof t==`function`)return t})}function ia(e){var t=e.l;return t.u??={a:[],b:[],m:[]}}typeof window<`u`&&((window.__svelte??={}).v??=new Set).add(`5`);var aa={xmlns:`http://www.w3.org/2000/svg`,width:24,height:24,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":2,"stroke-linecap":`round`,"stroke-linejoin":`round`},oa=e=>{for(let t in e)if(t.startsWith(`aria-`)||t===`role`||t===`title`)return!0;return!1},sa=Symbol(`lucide-context`),ca=()=>He(sa),la=new Set([`$$slots`,`$$events`,`$$legacy`,`name`,`color`,`size`,`strokeWidth`,`absoluteStrokeWidth`,`iconNode`,`children`]),ua=Jr(`<svg><!><!></svg>`);function da(e,t){Ue(t,!0);let n=ca()??{},r=na(t,`color`,19,()=>n.color??`currentColor`),i=na(t,`size`,19,()=>n.size??24),a=na(t,`strokeWidth`,19,()=>n.strokeWidth??2),o=na(t,`absoluteStrokeWidth`,19,()=>n.absoluteStrokeWidth??!1),s=na(t,`iconNode`,19,()=>[]),c=$i(t,la),l=I(()=>o()?Number(a())*24/Number(i()):a());var u=ua();Ui(u,e=>({...aa,...e,...c,width:i(),height:i(),stroke:r(),"stroke-width":U(l),class:[`lucide-icon lucide`,n.class,t.name&&`lucide-${t.name}`,t.class]}),[()=>!t.children&&!oa(c)&&{"aria-hidden":`true`}]);var d=z(u);Y(d,17,s,ii,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Xr();hi(B(a),r,!0,(e,t)=>{Ui(e,()=>({...i()}))}),K(e,a)}),pi(V(d),()=>t.children??f),F(u),K(e,u),We()}var fa=new Set([`$$slots`,`$$events`,`$$legacy`]);function pa(e,t){let n=$i(t,fa),r=[[`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`}]];da(e,ta({name:`blocks`},()=>n,{get iconNode(){return r}}))}var ma=new Set([`$$slots`,`$$events`,`$$legacy`]);function ha(e,t){let n=$i(t,ma),r=[[`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`}]];da(e,ta({name:`book-open`},()=>n,{get iconNode(){return r}}))}var ga=new Set([`$$slots`,`$$events`,`$$legacy`]);function _a(e,t){let n=$i(t,ga),r=[[`path`,{d:`M20 6 9 17l-5-5`}]];da(e,ta({name:`check`},()=>n,{get iconNode(){return r}}))}var va=new Set([`$$slots`,`$$events`,`$$legacy`]);function ya(e,t){let n=$i(t,va),r=[[`path`,{d:`m9 18 6-6-6-6`}]];da(e,ta({name:`chevron-right`},()=>n,{get iconNode(){return r}}))}var ba=new Set([`$$slots`,`$$events`,`$$legacy`]);function xa(e,t){let n=$i(t,ba),r=[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}],[`path`,{d:`M12 3v18`}]];da(e,ta({name:`columns-2`},()=>n,{get iconNode(){return r}}))}var Sa=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ca(e,t){let n=$i(t,Sa),r=[[`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`}]];da(e,ta({name:`copy`},()=>n,{get iconNode(){return r}}))}var wa=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ta(e,t){let n=$i(t,wa),r=[[`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`}]];da(e,ta({name:`download`},()=>n,{get iconNode(){return r}}))}var Ea=new Set([`$$slots`,`$$events`,`$$legacy`]);function Da(e,t){let n=$i(t,Ea),r=[[`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`}]];da(e,ta({name:`external-link`},()=>n,{get iconNode(){return r}}))}var Oa=new Set([`$$slots`,`$$events`,`$$legacy`]);function ka(e,t){let n=$i(t,Oa),r=[[`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`}]];da(e,ta({name:`eye`},()=>n,{get iconNode(){return r}}))}var Aa=new Set([`$$slots`,`$$events`,`$$legacy`]);function ja(e,t){let n=$i(t,Aa),r=[[`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`}]];da(e,ta({name:`folder-open`},()=>n,{get iconNode(){return r}}))}var Ma=new Set([`$$slots`,`$$events`,`$$legacy`]);function Na(e,t){let n=$i(t,Ma),r=[[`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`}]];da(e,ta({name:`layers`},()=>n,{get iconNode(){return r}}))}var Pa=new Set([`$$slots`,`$$events`,`$$legacy`]);function Fa(e,t){let n=$i(t,Pa),r=[[`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`}]];da(e,ta({name:`link`},()=>n,{get iconNode(){return r}}))}var Ia=new Set([`$$slots`,`$$events`,`$$legacy`]);function La(e,t){let n=$i(t,Ia),r=[[`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`}]];da(e,ta({name:`list`},()=>n,{get iconNode(){return r}}))}var Ra=new Set([`$$slots`,`$$events`,`$$legacy`]);function za(e,t){let n=$i(t,Ra),r=[[`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`}]];da(e,ta({name:`monitor`},()=>n,{get iconNode(){return r}}))}var Ba=new Set([`$$slots`,`$$events`,`$$legacy`]);function Va(e,t){let n=$i(t,Ba),r=[[`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`}]];da(e,ta({name:`moon`},()=>n,{get iconNode(){return r}}))}var Ha=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ua(e,t){let n=$i(t,Ha),r=[[`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`}]];da(e,ta({name:`package`},()=>n,{get iconNode(){return r}}))}var Wa=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ga(e,t){let n=$i(t,Wa),r=[[`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`}]];da(e,ta({name:`palette`},()=>n,{get iconNode(){return r}}))}var Ka=new Set([`$$slots`,`$$events`,`$$legacy`]);function qa(e,t){let n=$i(t,Ka),r=[[`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`}]];da(e,ta({name:`puzzle`},()=>n,{get iconNode(){return r}}))}var Ja=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ya(e,t){let n=$i(t,Ja),r=[[`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`}]];da(e,ta({name:`redo-2`},()=>n,{get iconNode(){return r}}))}var Xa=new Set([`$$slots`,`$$events`,`$$legacy`]);function Za(e,t){let n=$i(t,Xa),r=[[`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`}]];da(e,ta({name:`refresh-cw`},()=>n,{get iconNode(){return r}}))}var Qa=new Set([`$$slots`,`$$events`,`$$legacy`]);function $a(e,t){let n=$i(t,Qa),r=[[`path`,{d:`M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`}],[`path`,{d:`M3 3v5h5`}]];da(e,ta({name:`rotate-ccw`},()=>n,{get iconNode(){return r}}))}var eo=new Set([`$$slots`,`$$events`,`$$legacy`]);function to(e,t){let n=$i(t,eo),r=[[`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`}]];da(e,ta({name:`ruler`},()=>n,{get iconNode(){return r}}))}var no=new Set([`$$slots`,`$$events`,`$$legacy`]);function ro(e,t){let n=$i(t,no),r=[[`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`}]];da(e,ta({name:`save`},()=>n,{get iconNode(){return r}}))}var io=new Set([`$$slots`,`$$events`,`$$legacy`]);function ao(e,t){let n=$i(t,io),r=[[`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`}]];da(e,ta({name:`share-2`},()=>n,{get iconNode(){return r}}))}var oo=new Set([`$$slots`,`$$events`,`$$legacy`]);function so(e,t){let n=$i(t,oo),r=[[`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`}]];da(e,ta({name:`shield-check`},()=>n,{get iconNode(){return r}}))}var co=new Set([`$$slots`,`$$events`,`$$legacy`]);function lo(e,t){let n=$i(t,co),r=[[`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`}]];da(e,ta({name:`sliders-horizontal`},()=>n,{get iconNode(){return r}}))}var uo=new Set([`$$slots`,`$$events`,`$$legacy`]);function fo(e,t){let n=$i(t,uo),r=[[`rect`,{width:`14`,height:`20`,x:`5`,y:`2`,rx:`2`,ry:`2`}],[`path`,{d:`M12 18h.01`}]];da(e,ta({name:`smartphone`},()=>n,{get iconNode(){return r}}))}var po=new Set([`$$slots`,`$$events`,`$$legacy`]);function mo(e,t){let n=$i(t,po),r=[[`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`}]];da(e,ta({name:`sparkles`},()=>n,{get iconNode(){return r}}))}var ho=new Set([`$$slots`,`$$events`,`$$legacy`]);function go(e,t){let n=$i(t,ho),r=[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}]];da(e,ta({name:`square`},()=>n,{get iconNode(){return r}}))}var _o=new Set([`$$slots`,`$$events`,`$$legacy`]);function vo(e,t){let n=$i(t,_o),r=[[`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`}]];da(e,ta({name:`sun`},()=>n,{get iconNode(){return r}}))}var yo=new Set([`$$slots`,`$$events`,`$$legacy`]);function bo(e,t){let n=$i(t,yo),r=[[`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`}]];da(e,ta({name:`swatch-book`},()=>n,{get iconNode(){return r}}))}var xo=new Set([`$$slots`,`$$events`,`$$legacy`]);function So(e,t){let n=$i(t,xo),r=[[`rect`,{width:`16`,height:`20`,x:`4`,y:`2`,rx:`2`,ry:`2`}],[`line`,{x1:`12`,x2:`12.01`,y1:`18`,y2:`18`}]];da(e,ta({name:`tablet`},()=>n,{get iconNode(){return r}}))}var Co=new Set([`$$slots`,`$$events`,`$$legacy`]);function wo(e,t){let n=$i(t,Co),r=[[`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`}]];da(e,ta({name:`trash-2`},()=>n,{get iconNode(){return r}}))}var To=new Set([`$$slots`,`$$events`,`$$legacy`]);function Eo(e,t){let n=$i(t,To),r=[[`path`,{d:`M12 4v16`}],[`path`,{d:`M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2`}],[`path`,{d:`M9 20h6`}]];da(e,ta({name:`type`},()=>n,{get iconNode(){return r}}))}var Do=new Set([`$$slots`,`$$events`,`$$legacy`]);function Oo(e,t){let n=$i(t,Do),r=[[`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`}]];da(e,ta({name:`undo-2`},()=>n,{get iconNode(){return r}}))}var ko=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ao(e,t){let n=$i(t,ko),r=[[`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`}]];da(e,ta({name:`zap`},()=>n,{get iconNode(){return r}}))}var jo=new Set([`$$slots`,`$$events`,`$$legacy`]);function Mo(e,t){let n=$i(t,jo),r=[[`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`}]];da(e,ta({name:`house`},()=>n,{get iconNode(){return r}}))}var No=new Set([`$$slots`,`$$events`,`$$legacy`]);function Po(e,t){let n=$i(t,No),r=[[`path`,{d:`M21 12a9 9 0 1 1-6.219-8.56`}]];da(e,ta({name:`loader-circle`},()=>n,{get iconNode(){return r}}))}var Fo=new Set([`$$slots`,`$$events`,`$$legacy`]);function Io(e,t){let n=$i(t,Fo),r=[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}],[`path`,{d:`M3 9h18`}],[`path`,{d:`M9 21V9`}]];da(e,ta({name:`panels-top-left`},()=>n,{get iconNode(){return r}}))}var Lo=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ro(e,t){let n=$i(t,Lo),r=[[`path`,{d:`m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3`}],[`path`,{d:`M12 9v4`}],[`path`,{d:`M12 17h.01`}]];da(e,ta({name:`triangle-alert`},()=>n,{get iconNode(){return r}}))}var zo=G(`<button class="flex items-center gap-1.5 px-2.5 py-1 bg-indigo-500/10 border border-indigo-500/20 rounded-lg text-indigo-300 text-[10px] font-bold font-mono hover:bg-indigo-500/20 transition-colors cursor-pointer shrink-0"><span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[9px] font-black"> </span> <span class="hidden sm:inline">customised ·</span>Export →</button>`),Bo=G(`<!> Saving…`,1),Vo=G(`<!> Saved`,1),Ho=G(`<!> Save failed`,1),Uo=G(`<!> Save`,1),Wo=G(`<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="reset-confirm-title" tabindex="-1"><div class="bg-[#1a1a2e] border border-white/10 rounded-xl p-6 max-w-sm w-full mx-4 shadow-2xl"><h3 id="reset-confirm-title" class="text-white font-bold text-sm mb-2">Reset all overrides?</h3> <p class="text-slate-400 text-xs mb-5"> </p> <div class="flex gap-2 justify-end"><button class="px-3 py-1.5 text-xs rounded-lg bg-white/8 text-slate-300 hover:bg-white/12 transition-colors cursor-pointer">Cancel</button> <button class="px-3 py-1.5 text-xs rounded-lg bg-rose-600 hover:bg-rose-500 text-white font-bold transition-colors cursor-pointer">Reset all</button></div></div></div>`),Go=G(`<header class="h-[52px] bg-[#0d0d14] border-b border-white/8 flex items-center px-3 gap-2 sm:gap-3 shrink-0 z-20"><div class="w-8 h-8 bg-indigo-600 rounded-xl flex items-center justify-center text-white font-black text-lg leading-none select-none shadow-lg shadow-indigo-600/30 shrink-0">/</div> <div class="hidden sm:block shrink-0"><div class="text-[11px] font-bold text-white tracking-tight leading-none flex items-center gap-1.5">SLASHED Studio <span class="text-[9px] bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 font-bold px-1.5 py-0.5 rounded-full font-mono"> </span></div> <div class="text-[9px] text-slate-500 font-mono tracking-widest uppercase mt-0.5">Token Architect</div></div> <!> <div class="flex-1"></div> <div class="flex items-center gap-1.5"><button><!></button> <button title="Undo (Ctrl+Z)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button> <button title="Redo (Ctrl+Shift+Z)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button> <div class="w-px h-4 bg-white/10 mx-1"></div> <button title="Copy share link" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Import CSS overrides" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Reset all overrides" class="p-1.5 rounded-lg text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button></div></header> <!>`,1);function Ko(e,t){Ue(t,!0);let n=window.__SLASHED_FW_VERSION__===void 0?``:window.__SLASHED_FW_VERSION__,r=L(!1),i=L(!1),a=L(null),o=L(null);On(()=>{U(i)&&br().then(()=>U(a)?.focus())});async function s(){try{await navigator.clipboard.writeText(window.location.href),R(r,!0),setTimeout(()=>{R(r,!1)},2e3)}catch{}}function c(){R(i,!0)}function l(){R(i,!1),t.onResetAll()}function u(){R(i,!1)}var d=Go(),f=B(d),p=V(z(f),2),m=z(p),h=V(z(m)),g=z(h);F(h),F(m),Me(2),F(p);var _=V(p,2),v=e=>{var n=zo(),r=z(n),i=z(r,!0);F(r),Me(3),F(n),H(()=>q(i,t.overridesCount)),W(`click`,n,function(...e){t.onExport?.apply(this,e)}),K(e,n)};J(_,e=>{t.overridesCount>0&&e(v)});var y=V(_,4),b=z(y),x=z(b),S=e=>{var t=Bo();Po(B(t),{class:`w-3.5 h-3.5 animate-spin`}),Me(),K(e,t)},C=e=>{var t=Vo();_a(B(t),{class:`w-3.5 h-3.5`}),Me(),K(e,t)},w=e=>{var t=Ho();Ro(B(t),{class:`w-3.5 h-3.5`}),Me(),K(e,t)},T=e=>{var t=Uo();ro(B(t),{class:`w-3.5 h-3.5`}),Me(),K(e,t)};J(x,e=>{t.saveState===`saving`?e(S):t.saveState===`saved`?e(C,1):t.saveState===`error`?e(w,2):e(T,-1)}),F(b);var E=V(b,2);Oo(z(E),{class:`w-3.5 h-3.5`}),F(E);var D=V(E,2);Ya(z(D),{class:`w-3.5 h-3.5`}),F(D);var O=V(D,4),k=z(O),ee=e=>{_a(e,{class:`w-3.5 h-3.5 text-emerald-400`})},te=e=>{ao(e,{class:`w-3.5 h-3.5`})};J(k,e=>{U(r)?e(ee):e(te,-1)}),F(O);var ne=V(O,2);ja(z(ne),{class:`w-3.5 h-3.5`}),F(ne);var A=V(ne,2);wo(z(A),{class:`w-3.5 h-3.5`}),F(A),F(y),F(f);var j=V(f,2),M=e=>{var n=Wo(),r=z(n),i=V(z(r),2),s=z(i);F(i);var c=V(i,2),d=z(c);Zi(d,e=>R(a,e),()=>U(a));var f=V(d,2);Zi(f,e=>R(o,e),()=>U(o)),F(c),F(r),F(n),H(()=>q(s,`This will clear all ${t.overridesCount??``} customisation${t.overridesCount===1?``:`s`}.
+        You can still undo this before saving.`)),W(`click`,n,e=>{e.target===e.currentTarget&&u()}),W(`keydown`,n,e=>{e.key===`Escape`&&(e.stopPropagation(),u()),e.key===`Tab`&&(e.preventDefault(),document.activeElement===U(a)?U(o)?.focus():U(a)?.focus())}),W(`click`,d,u),W(`click`,f,l),K(e,n)};J(j,e=>{U(i)&&e(M)}),H(e=>{q(g,`v${n??``}`),b.disabled=!t.hasPendingChanges||t.saveState===`saving`,Q(b,`title`,t.saveState===`error`?`Save failed — click to retry`:t.hasPendingChanges?`Save changes (Ctrl+S)`:`No unsaved changes`),X(b,1,e),E.disabled=!t.canUndo,D.disabled=!t.canRedo,A.disabled=t.overridesCount===0},[()=>yi([`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold transition-colors cursor-pointer`,t.saveState===`error`?`bg-red-900/40 border border-red-500/30 text-red-300`:t.saveState===`saved`?`bg-emerald-900/40 border border-emerald-500/30 text-emerald-300`:t.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(` `))]),W(`click`,b,function(...e){t.onSave?.apply(this,e)}),W(`click`,E,function(...e){t.onUndo?.apply(this,e)}),W(`click`,D,function(...e){t.onRedo?.apply(this,e)}),W(`click`,O,s),W(`click`,ne,function(...e){t.onImport?.apply(this,e)}),W(`click`,A,c),K(e,d),We()}Br([`click`,`keydown`]);var qo=G(`<span class="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 bg-indigo-500 rounded-full text-[8px] font-black text-white flex items-center justify-center"> </span>`),Jo=G(`<button><!> <!> <span class="absolute left-12 bg-slate-800 text-white text-[10px] font-semibold px-2 py-1 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 border border-white/10"> </span></button>`),Yo=G(`<nav class="w-14 bg-[#0a0a0f] border-r border-white/8 flex flex-col items-center py-3 gap-1 shrink-0 overflow-y-auto overflow-x-hidden"><div class="flex flex-col items-center gap-1 w-full px-2"></div> <div class="w-8 h-px bg-white/8 my-2"></div> <div class="flex flex-col items-center gap-1 w-full px-2"></div></nav>`);function Xo(e,t){Ue(t,!0);let n=na(t,`overridesByDomain`,19,()=>({})),r=[{id:`home`,icon:Mo,label:`Home`,group:`tokens`},{id:`colors`,icon:Ga,label:`Colors`,group:`tokens`},{id:`typography`,icon:Eo,label:`Typography`,group:`tokens`},{id:`spacing`,icon:to,label:`Spacing`,group:`tokens`},{id:`layout`,icon:Io,label:`Layout`,group:`tokens`},{id:`borders`,icon:go,label:`Borders`,group:`tokens`},{id:`shadows`,icon:Na,label:`Shadows`,group:`tokens`},{id:`motion`,icon:Ao,label:`Motion`,group:`tokens`},{id:`effects`,icon:mo,label:`Effects`,group:`tokens`},{id:`macros`,icon:pa,label:`Macros`,group:`tokens`},{id:`misc`,icon:qa,label:`Misc`,group:`tokens`},{id:`themes`,icon:bo,label:`Themes`,group:`tools`},{id:`wcag`,icon:so,label:`WCAG`,group:`tools`},{id:`setup`,icon:Ua,label:`Install`,group:`tools`},{id:`cheatsheet`,icon:ha,label:`Classes`,group:`tools`}],i=I(()=>r.filter(e=>e.group===`tokens`)),a=I(()=>r.filter(e=>e.group===`tools`));var o=Yo(),s=z(o);Y(s,21,()=>U(i),e=>e.id,(e,r)=>{let i=I(()=>t.activeId===U(r).id),a=I(()=>n()[U(r).id]||0),o=I(()=>U(r).icon);var s=Jo(),c=z(s);mi(c,()=>U(o),(e,t)=>{t(e,{class:`w-4 h-4`})});var l=V(c,2),u=e=>{var t=qo(),n=z(t,!0);F(t),H(()=>q(n,U(a)>9?`+`:U(a))),K(e,t)};J(l,e=>{U(a)>0&&!U(i)&&e(u)});var d=V(l,2),f=z(d,!0);F(d),F(s),H(()=>{Q(s,`title`,U(r).label),X(s,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${U(i)?`bg-indigo-600 text-white shadow-lg shadow-indigo-600/30`:`text-slate-500 hover:text-slate-200 hover:bg-white/8`}`),q(f,U(r).label)}),W(`click`,s,()=>t.onSelect(U(r).id)),K(e,s)}),F(s);var c=V(s,4);Y(c,21,()=>U(a),e=>e.id,(e,r)=>{let i=I(()=>t.activeId===U(r).id),a=I(()=>n()[U(r).id]||0),o=I(()=>U(r).icon);var s=Jo(),c=z(s);mi(c,()=>U(o),(e,t)=>{t(e,{class:`w-4 h-4`})});var l=V(c,2),u=e=>{var t=qo(),n=z(t,!0);F(t),H(()=>q(n,U(a)>9?`+`:U(a))),K(e,t)};J(l,e=>{U(a)>0&&!U(i)&&e(u)});var d=V(l,2),f=z(d,!0);F(d),F(s),H(()=>{Q(s,`title`,U(r).label),X(s,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${U(i)?`bg-indigo-600 text-white shadow-lg shadow-indigo-600/30`:`text-slate-500 hover:text-slate-200 hover:bg-white/8`}`),q(f,U(r).label)}),W(`click`,s,()=>t.onSelect(U(r).id)),K(e,s)}),F(c),F(o),K(e,o),We()}Br([`click`]);var Zo=G(`<span class="text-indigo-400"> </span>`),Qo=G(`<div class="h-6 bg-[#07070b] border-t border-white/6 flex items-center px-4 gap-4 shrink-0 select-none"><div class="flex items-center gap-1.5"><div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> <span class="text-[9px] font-mono font-bold text-slate-500 uppercase tracking-widest">Live</span></div> <span class="text-[9px] font-mono text-slate-600"><!></span> <div class="flex-1"></div> <span class="text-[9px] font-mono text-slate-700"> </span></div>`);function $o(e,t){var n=Qo(),r=V(z(n),2),i=z(r),a=e=>{var n=Zo(),r=z(n);F(n),H(()=>q(r,`${t.overridesCount??``} override${t.overridesCount===1?``:`s`} active`)),K(e,n)},o=e=>{K(e,Yr(`No overrides — showing framework defaults`))};J(i,e=>{t.overridesCount>0?e(a):e(o,-1)}),F(r);var s=V(r,4),c=z(s,!0);F(s),F(n),H(()=>q(c,t.domain)),K(e,n)}var es=Uint8Array,ts=Uint16Array,ns=Int32Array,rs=new es([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]),is=new es([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]),as=new es([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),os=function(e,t){for(var n=new ts(31),r=0;r<31;++r)n[r]=t+=1<<e[r-1];for(var i=new ns(n[30]),r=1;r<30;++r)for(var a=n[r];a<n[r+1];++a)i[a]=a-n[r]<<5|r;return{b:n,r:i}},ss=os(rs,2),cs=ss.b,ls=ss.r;cs[28]=258,ls[258]=28;for(var us=os(is,0),ds=us.b,fs=us.r,ps=new ts(32768),ms=0;ms<32768;++ms){var hs=(ms&43690)>>1|(ms&21845)<<1;hs=(hs&52428)>>2|(hs&13107)<<2,hs=(hs&61680)>>4|(hs&3855)<<4,ps[ms]=((hs&65280)>>8|(hs&255)<<8)>>1}for(var gs=(function(e,t,n){for(var r=e.length,i=0,a=new ts(t);i<r;++i)e[i]&&++a[e[i]-1];var o=new ts(t);for(i=1;i<t;++i)o[i]=o[i-1]+a[i-1]<<1;var s;if(n){s=new ts(1<<t);var c=15-t;for(i=0;i<r;++i)if(e[i])for(var l=i<<4|e[i],u=t-e[i],d=o[e[i]-1]++<<u,f=d|(1<<u)-1;d<=f;++d)s[ps[d]>>c]=l}else for(s=new ts(r),i=0;i<r;++i)e[i]&&(s[i]=ps[o[e[i]-1]++]>>15-e[i]);return s}),_s=new es(288),ms=0;ms<144;++ms)_s[ms]=8;for(var ms=144;ms<256;++ms)_s[ms]=9;for(var ms=256;ms<280;++ms)_s[ms]=7;for(var ms=280;ms<288;++ms)_s[ms]=8;for(var vs=new es(32),ms=0;ms<32;++ms)vs[ms]=5;var ys=gs(_s,9,0),bs=gs(_s,9,1),xs=gs(vs,5,0),Ss=gs(vs,5,1),Cs=function(e){for(var t=e[0],n=1;n<e.length;++n)e[n]>t&&(t=e[n]);return t},ws=function(e,t,n){var r=t/8|0;return(e[r]|e[r+1]<<8)>>(t&7)&n},Ts=function(e,t){var n=t/8|0;return(e[n]|e[n+1]<<8|e[n+2]<<16)>>(t&7)},Es=function(e){return(e+7)/8|0},Ds=function(e,t,n){return(t==null||t<0)&&(t=0),(n==null||n>e.length)&&(n=e.length),new es(e.subarray(t,n))},Os=[`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`],ks=function(e,t,n){var r=Error(t||Os[e]);if(r.code=e,Error.captureStackTrace&&Error.captureStackTrace(r,ks),!n)throw r;return r},As=function(e,t,n,r){var i=e.length,a=r?r.length:0;if(!i||t.f&&!t.l)return n||new es(0);var o=!n,s=o||t.i!=2,c=t.i;o&&(n=new es(i*3));var l=function(e){var t=n.length;if(e>t){var r=new es(Math.max(t*2,e));r.set(n),n=r}},u=t.f||0,d=t.p||0,f=t.b||0,p=t.l,m=t.d,h=t.m,g=t.n,_=i*8;do{if(!p){u=ws(e,d,1);var v=ws(e,d+1,3);if(d+=3,!v){var y=Es(d)+4,b=e[y-4]|e[y-3]<<8,x=y+b;if(x>i){c&&ks(0);break}s&&l(f+b),n.set(e.subarray(y,x),f),t.b=f+=b,t.p=d=x*8,t.f=u;continue}else if(v==1)p=bs,m=Ss,h=9,g=5;else if(v==2){var S=ws(e,d,31)+257,C=ws(e,d+10,15)+4,w=S+ws(e,d+5,31)+1;d+=14;for(var T=new es(w),E=new es(19),D=0;D<C;++D)E[as[D]]=ws(e,d+D*3,7);d+=C*3;for(var O=Cs(E),k=(1<<O)-1,ee=gs(E,O,1),D=0;D<w;){var te=ee[ws(e,d,k)];d+=te&15;var y=te>>4;if(y<16)T[D++]=y;else{var ne=0,A=0;for(y==16?(A=3+ws(e,d,3),d+=2,ne=T[D-1]):y==17?(A=3+ws(e,d,7),d+=3):y==18&&(A=11+ws(e,d,127),d+=7);A--;)T[D++]=ne}}var j=T.subarray(0,S),M=T.subarray(S);h=Cs(j),g=Cs(M),p=gs(j,h,1),m=gs(M,g,1)}else ks(1);if(d>_){c&&ks(0);break}}s&&l(f+131072);for(var re=(1<<h)-1,ie=(1<<g)-1,ae=d;;ae=d){var ne=p[Ts(e,d)&re],oe=ne>>4;if(d+=ne&15,d>_){c&&ks(0);break}if(ne||ks(2),oe<256)n[f++]=oe;else if(oe==256){ae=d,p=null;break}else{var se=oe-254;if(oe>264){var D=oe-257,N=rs[D];se=ws(e,d,(1<<N)-1)+cs[D],d+=N}var ce=m[Ts(e,d)&ie],le=ce>>4;ce||ks(3),d+=ce&15;var M=ds[le];if(le>3){var N=is[le];M+=Ts(e,d)&(1<<N)-1,d+=N}if(d>_){c&&ks(0);break}s&&l(f+131072);var ue=f+se;if(f<M){var de=a-M,fe=Math.min(M,ue);for(de+f<0&&ks(3);f<fe;++f)n[f]=r[de+f]}for(;f<ue;++f)n[f]=n[f-M]}}t.l=p,t.p=ae,t.b=f,t.f=u,p&&(u=1,t.m=h,t.d=m,t.n=g)}while(!u);return f!=n.length&&o?Ds(n,0,f):n.subarray(0,f)},js=function(e,t,n){n<<=t&7;var r=t/8|0;e[r]|=n,e[r+1]|=n>>8},Ms=function(e,t,n){n<<=t&7;var r=t/8|0;e[r]|=n,e[r+1]|=n>>8,e[r+2]|=n>>16},Ns=function(e,t){for(var n=[],r=0;r<e.length;++r)e[r]&&n.push({s:r,f:e[r]});var i=n.length,a=n.slice();if(!i)return{t:Bs,l:0};if(i==1){var o=new es(n[0].s+1);return o[n[0].s]=1,{t:o,l:1}}n.sort(function(e,t){return e.f-t.f}),n.push({s:-1,f:25001});var s=n[0],c=n[1],l=0,u=1,d=2;for(n[0]={s:-1,f:s.f+c.f,l:s,r:c};u!=i-1;)s=n[n[l].f<n[d].f?l++:d++],c=n[l!=u&&n[l].f<n[d].f?l++:d++],n[u++]={s:-1,f:s.f+c.f,l:s,r:c};for(var f=a[0].s,r=1;r<i;++r)a[r].s>f&&(f=a[r].s);var p=new ts(f+1),m=Ps(n[u-1],p,0);if(m>t){var r=0,h=0,g=m-t,_=1<<g;for(a.sort(function(e,t){return p[t.s]-p[e.s]||e.f-t.f});r<i;++r){var v=a[r].s;if(p[v]>t)h+=_-(1<<m-p[v]),p[v]=t;else break}for(h>>=g;h>0;){var y=a[r].s;p[y]<t?h-=1<<t-p[y]++-1:++r}for(;r>=0&&h;--r){var b=a[r].s;p[b]==t&&(--p[b],++h)}m=t}return{t:new es(p),l:m}},Ps=function(e,t,n){return e.s==-1?Math.max(Ps(e.l,t,n+1),Ps(e.r,t,n+1)):t[e.s]=n},Fs=function(e){for(var t=e.length;t&&!e[--t];);for(var n=new ts(++t),r=0,i=e[0],a=1,o=function(e){n[r++]=e},s=1;s<=t;++s)if(e[s]==i&&s!=t)++a;else{if(!i&&a>2){for(;a>138;a-=138)o(32754);a>2&&(o(a>10?a-11<<5|28690:a-3<<5|12305),a=0)}else if(a>3){for(o(i),--a;a>6;a-=6)o(8304);a>2&&(o(a-3<<5|8208),a=0)}for(;a--;)o(i);a=1,i=e[s]}return{c:n.subarray(0,r),n:t}},Is=function(e,t){for(var n=0,r=0;r<t.length;++r)n+=e[r]*t[r];return n},Ls=function(e,t,n){var r=n.length,i=Es(t+2);e[i]=r&255,e[i+1]=r>>8,e[i+2]=e[i]^255,e[i+3]=e[i+1]^255;for(var a=0;a<r;++a)e[i+a+4]=n[a];return(i+4+r)*8},Rs=function(e,t,n,r,i,a,o,s,c,l,u){js(t,u++,n),++i[256];for(var d=Ns(i,15),f=d.t,p=d.l,m=Ns(a,15),h=m.t,g=m.l,_=Fs(f),v=_.c,y=_.n,b=Fs(h),x=b.c,S=b.n,C=new ts(19),w=0;w<v.length;++w)++C[v[w]&31];for(var w=0;w<x.length;++w)++C[x[w]&31];for(var T=Ns(C,7),E=T.t,D=T.l,O=19;O>4&&!E[as[O-1]];--O);var k=l+5<<3,ee=Is(i,_s)+Is(a,vs)+o,te=Is(i,f)+Is(a,h)+o+14+3*O+Is(C,E)+2*C[16]+3*C[17]+7*C[18];if(c>=0&&k<=ee&&k<=te)return Ls(t,u,e.subarray(c,c+l));var ne,A,j,M;if(js(t,u,1+(te<ee)),u+=2,te<ee){ne=gs(f,p,0),A=f,j=gs(h,g,0),M=h;var re=gs(E,D,0);js(t,u,y-257),js(t,u+5,S-1),js(t,u+10,O-4),u+=14;for(var w=0;w<O;++w)js(t,u+3*w,E[as[w]]);u+=3*O;for(var ie=[v,x],ae=0;ae<2;++ae)for(var oe=ie[ae],w=0;w<oe.length;++w){var se=oe[w]&31;js(t,u,re[se]),u+=E[se],se>15&&(js(t,u,oe[w]>>5&127),u+=oe[w]>>12)}}else ne=ys,A=_s,j=xs,M=vs;for(var w=0;w<s;++w){var N=r[w];if(N>255){var se=N>>18&31;Ms(t,u,ne[se+257]),u+=A[se+257],se>7&&(js(t,u,N>>23&31),u+=rs[se]);var ce=N&31;Ms(t,u,j[ce]),u+=M[ce],ce>3&&(Ms(t,u,N>>5&8191),u+=is[ce])}else Ms(t,u,ne[N]),u+=A[N]}return Ms(t,u,ne[256]),u+A[256]},zs=new ns([65540,131080,131088,131104,262176,1048704,1048832,2114560,2117632]),Bs=new es(0),Vs=function(e,t,n,r,i,a){var o=a.z||e.length,s=new es(r+o+5*(1+Math.ceil(o/7e3))+i),c=s.subarray(r,s.length-i),l=a.l,u=(a.r||0)&7;if(t){u&&(c[0]=a.r>>3);for(var d=zs[t-1],f=d>>13,p=d&8191,m=(1<<n)-1,h=a.p||new ts(32768),g=a.h||new ts(m+1),_=Math.ceil(n/3),v=2*_,y=function(t){return(e[t]^e[t+1]<<_^e[t+2]<<v)&m},b=new ns(25e3),x=new ts(288),S=new ts(32),C=0,w=0,T=a.i||0,E=0,D=a.w||0,O=0;T+2<o;++T){var k=y(T),ee=T&32767,te=g[k];if(h[ee]=te,g[k]=ee,D<=T){var ne=o-T;if((C>7e3||E>24576)&&(ne>423||!l)){u=Rs(e,c,0,b,x,S,w,E,O,T-O,u),E=C=w=0,O=T;for(var A=0;A<286;++A)x[A]=0;for(var A=0;A<30;++A)S[A]=0}var j=2,M=0,re=p,ie=ee-te&32767;if(ne>2&&k==y(T-ie))for(var ae=Math.min(f,ne)-1,oe=Math.min(32767,T),se=Math.min(258,ne);ie<=oe&&--re&&ee!=te;){if(e[T+j]==e[T+j-ie]){for(var N=0;N<se&&e[T+N]==e[T+N-ie];++N);if(N>j){if(j=N,M=ie,N>ae)break;for(var ce=Math.min(ie,N-2),le=0,A=0;A<ce;++A){var ue=T-ie+A&32767,de=ue-h[ue]&32767;de>le&&(le=de,te=ue)}}}ee=te,te=h[ee],ie+=ee-te&32767}if(M){b[E++]=268435456|ls[j]<<18|fs[M];var fe=ls[j]&31,pe=fs[M]&31;w+=rs[fe]+is[pe],++x[257+fe],++S[pe],D=T+j,++C}else b[E++]=e[T],++x[e[T]]}}for(T=Math.max(T,D);T<o;++T)b[E++]=e[T],++x[e[T]];u=Rs(e,c,l,b,x,S,w,E,O,T-O,u),l||(a.r=u&7|c[u/8|0]<<3,u-=7,a.h=g,a.p=h,a.i=T,a.w=D)}else{for(var T=a.w||0;T<o+l;T+=65535){var me=T+65535;me>=o&&(c[u/8|0]=l,me=o),u=Ls(c,u+1,e.subarray(T,me))}a.i=o}return Ds(s,0,r+Es(u)+i)},Hs=function(e,t,n,r,i){if(!i&&(i={l:1},t.dictionary)){var a=t.dictionary.subarray(-32768),o=new es(a.length+e.length);o.set(a),o.set(e,a.length),e=o,i.w=a.length}return Vs(e,t.level==null?6:t.level,t.mem==null?i.l?Math.ceil(Math.max(8,Math.min(13,Math.log(e.length)))*1.5):20:12+t.mem,n,r,i)};function Us(e,t){return Hs(e,t||{},0,0)}function Ws(e,t){return As(e,{i:2},t&&t.out,t&&t.dictionary)}var Gs=typeof TextDecoder<`u`&&new TextDecoder;try{Gs.decode(Bs,{stream:!0})}catch{}var Ks={_meta:{generatedBy:`scripts/gen-token-registry.js`,nextId:701},tokens:[{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:!0},{id:51,name:`--sf-button-padding-inline`,removed:!0},{id:52,name:`--sf-button-radius`,removed:!0},{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:!0},{id:111,name:`--sf-color-base-ghost`},{id:112,name:`--sf-color-base-source-light`},{id:113,name:`--sf-color-base-lighter`,removed:!0},{id:114,name:`--sf-color-base-muted`},{id:115,name:`--sf-color-base-subtle`},{id:116,name:`--sf-color-base-superdark`,removed:!0},{id:117,name:`--sf-color-base-superlight`,removed:!0},{id:118,name:`--sf-color-base-xdark`,removed:!0},{id:119,name:`--sf-color-base-xlight`,removed:!0},{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:!0},{id:143,name:`--sf-color-error-dark`,removed:!0},{id:144,name:`--sf-color-error-light`,removed:!0},{id:145,name:`--sf-color-error-muted`,removed:!0},{id:146,name:`--sf-color-error-strong`,removed:!0},{id:147,name:`--sf-color-error-subtle`,removed:!0},{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:!0},{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`}]},qs=window.__SLASHED_FW_VERSION__===void 0?`0.0.0`:window.__SLASHED_FW_VERSION__,Js=65535,Ys=65535,Xs=new TextEncoder,Zs=new TextDecoder(`utf-8`,{fatal:!1}),Qs=32*1024,$s=256*1024;function ec(e){return Number.isInteger(e)&&e>=0&&e<=Ys}function tc(e){let t=new Map;for(let n of e?.tokens??[])n&&!n.removed&&typeof n.name==`string`&&ec(n.id)&&t.set(n.name,n.id);return t}function nc(e){let t=new Map;for(let n of e?.tokens??[])n&&typeof n.name==`string`&&Number.isInteger(n.id)&&t.set(n.id,n.name);return t}function rc(e){let t=``;for(let n=0;n<e.length;n++)t+=String.fromCharCode(e[n]);return btoa(t).replace(/\+/g,`-`).replace(/\//g,`_`).replace(/=+$/,``)}function ic(e){try{let t=e.replace(/-/g,`+`).replace(/_/g,`/`);for(;t.length%4;)t+=`=`;let n=atob(t),r=new Uint8Array(n.length);for(let e=0;e<n.length;e++)r[e]=n.charCodeAt(e);return r}catch{return null}}function ac(e,t=Ks){if(!e||typeof e!=`object`)return``;let n=tc(t),r=[];for(let[t,i]of Object.entries(e)){if(typeof t!=`string`||typeof i!=`string`||i===``)continue;let e=n.get(t);if(e===void 0)continue;let a=Xs.encode(i);a.length>Js||r.push({id:e,valueBytes:a})}if(r.length===0)return``;r.sort((e,t)=>e.id-t.id);let i=0;for(let e of r)i+=4+e.valueBytes.length;let a=new Uint8Array(i),o=0;for(let{id:e,valueBytes:t}of r)a[o++]=e>>8&255,a[o++]=e&255,a[o++]=t.length>>8&255,a[o++]=t.length&255,a.set(t,o),o+=t.length;let s=Us(a);if(s.length>Qs)return console.warn(`[codec] compressed payload too large (${s.length} B > ${Qs} B); refusing to encode.`),``;let c=new Uint8Array(1+s.length);return c[0]=2,c.set(s,1),rc(c)}function oc(e,t=Ks,n={}){let r=String(e??``).trim();if(r===``)return{};let i=ic(r);if(!i||i.length===0)return{};if(i[0]!==2)return console.warn(`[codec] unknown config-code version ${i[0]} (expected 2); ignoring.`),{};let a=i.length-1;if(a>Qs)return console.warn(`[codec] compressed payload too large (${a} B > ${Qs} B); ignoring.`),{};let o;try{o=Ws(i.subarray(1))}catch{return console.warn(`[codec] failed to decompress config; ignoring.`),{}}if(!o||o.length===0)return{};if(o.length>$s)return console.warn(`[codec] decompressed payload too large (${o.length} B > ${$s} B); ignoring.`),{};let s=nc(t),c=typeof n.sanitize==`function`?n.sanitize:e=>e,l=typeof n.isKnown==`function`?n.isKnown:()=>!0,u={},d=0;try{for(;d<o.length;){if(d+4>o.length)throw Error(`truncated entry header`);let e=o[d]<<8|o[d+1],t=o[d+2]<<8|o[d+3];if(d+=4,d+t>o.length)throw Error(`truncated value`);let n=Zs.decode(o.subarray(d,d+t));d+=t;let r=s.get(e);if(r===void 0||!l(r))continue;let i=c(n);i!==``&&(u[r]=i)}}catch(e){return console.warn(`[codec] malformed config code; ignoring (${e.message}).`),{}}return u}function sc(e){return e==null?``:String(e).replace(/\/\*[\s\S]*?\*\//g,` `).replace(/[;{}]/g,` `).replace(/[/*]{2,}/g,` `).replace(/\s+/g,` `).trim()}function cc(e,t={}){let{mode:n=`layer`,banner:r=!0}=t,i=Object.keys(e).filter(e=>/^--sf-[\w-]+$/.test(e)).sort((e,t)=>e.localeCompare(t));if(i.length===0)return``;let a=i.map(t=>`${t}: ${sc(e[t])};`),o=n===`layer`?`		`:`	`,s=a.map(e=>`${o}${e}`).join(`
+`),c=``;return r&&(c+=`/* SLASHED override tokens v${qs} — generated by the SLASHED configurator.\n   Load this AFTER the SLASHED stylesheet. ${i.length} token${i.length===1?``:`s`} customised. */\n`),n===`layer`?`${c}@layer slashed.overrides {\n\t:root {\n${s}\n\t}\n}\n`:`${c}:root {\n${s}\n}\n`}function lc(e){return ac(e,Ks)}var uc=RegExp(`[#&]?c=([^&]+)`);function dc(e,t={}){let n=new Set(Ks.tokens.map(e=>e.name)),r=t.isKnown??(e=>n.has(e)),i=String(e??``).trim(),a=i.match(uc);return a&&(i=a[1]),oc(i,Ks,{sanitize:sc,isKnown:r})}function fc(e,t){let n=typeof window<`u`?window.location.href:`https://example.com/`,r=new URL(t??n),i=lc(e);return r.hash=i?`c=${i}`:``,r.toString()}function pc(e,t={}){let n=String(e??``);return n.includes(`c=`)?dc(n,t):{}}var mc=`slashed-studio/themes/v1`;function hc(e){return!!e&&typeof e==`object`&&!Array.isArray(e)&&Object.values(e).every(e=>typeof e==`string`)}function gc(e){if(!e||typeof e!=`object`||Array.isArray(e))return!1;let t=e;return typeof t.id==`string`&&typeof t.name==`string`&&typeof t.icon==`string`&&typeof t.blurb==`string`&&hc(t.overrides)}function _c(){if(typeof window>`u`)return[];try{let e=localStorage.getItem(mc);if(!e)return[];let t=JSON.parse(e);return Array.isArray(t)?t.filter(gc):[]}catch{return[]}}function vc(e){if(typeof window>`u`)return!1;try{return localStorage.setItem(mc,JSON.stringify(e)),!0}catch{return!1}}function yc(){return _c()}function bc(e,t){let n=_c(),r=e.trim()||`Untitled theme`,i={id:`theme-${Date.now()}-${Math.random().toString(36).slice(2,7)}`,name:r,icon:`🎨`,blurb:`${Object.keys(t).length} override${Object.keys(t).length===1?``:`s`}`,overrides:{...t}},a=[...n,i];return vc(a)?a:n}function xc(e){let t=_c().filter(t=>t.id!==e);return vc(t)?t:_c()}var Sc=`slashed-studio/overrides/v2`,Cc=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`]),wc=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`]),Tc=[[`2xs`,-3],[`xs`,-2],[`s`,-1],[`m`,0],[`l`,1],[`xl`,2],[`2xl`,3],[`3xl`,4],[`4xl`,5]],Ec=[[`display-s`,0],[`display-m`,1],[`display-l`,2]],Dc=[[`2xs`,-3],[`xs`,-2],[`s`,-1],[`m`,0],[`l`,1],[`xl`,2],[`2xl`,3],[`3xl`,4],[`4xl`,5]],Oc=[[`2xs`,1],[`xs`,2],[`s`,4],[`m`,8],[`l`,12],[`xl`,16],[`2xl`,24],[`3xl`,32],[`4xl`,48]],kc=[[`1`,1],[`2`,2],[`3`,3],[`4`,4]],Ac=[[`instant`,100],[`fast`,150],[`normal`,250],[`slow`,400],[`slower`,600]];function jc(e,t,n){let r=e[t];if(r===void 0)return n;let i=parseFloat(r);return Number.isFinite(i)?i:n}function Mc(e){if(!Number.isFinite(e))return`0`;let t=e.toFixed(6).replace(/\.?0+$/,``);return t===``||t===`-`?`0`:t}function Nc(e,t,n,r,i,a,o,s){let c=e*n**+o*s,l=t*r**+o*s;if(a<=i||Math.abs(c-l)<1e-9)return`${Mc(c)}rem`;let u=(l-c)/(a-i);return`clamp(${Mc(c)}rem, calc(${Mc(u)} * (100vw - ${Mc(i)}rem) + ${Mc(c)}rem), ${Mc(l)}rem)`}function Pc(e,{reduceMotion:t=!1}={}){let n={},r=Object.keys(e),i=r.some(e=>Cc.has(e)),a=r.some(e=>wc.has(e)),o=`--sf-radius-scale`in e,s=`--sf-border-scale`in e,c=`--sf-motion-scale`in e;if(!i&&!a&&!o&&!s&&!c)return n;let l=jc(e,`--sf-fluid-min-vw`,22.5),u=jc(e,`--sf-fluid-max-vw`,90);if(i){let t=jc(e,`--sf-text-base-min`,1),r=jc(e,`--sf-text-base-max`,1.25),i=jc(e,`--sf-text-ratio-min`,1.25),a=jc(e,`--sf-text-ratio-max`,1.333),o=jc(e,`--sf-text-scale`,1);for(let[e,s]of Tc)n[`--sf-text-${e}`]=Nc(t,r,i,a,l,u,s,o);let s=jc(e,`--sf-text-display-base-min`,2.4),c=jc(e,`--sf-text-display-base-max`,3),d=jc(e,`--sf-text-display-scale`,1);for(let[e,t]of Ec)n[`--sf-text-${e}`]=Nc(s,c,i,a,l,u,t,d)}if(a){let t=jc(e,`--sf-space-base-min`,1),r=jc(e,`--sf-space-base-max`,2),i=jc(e,`--sf-space-ratio-min`,1.25),a=jc(e,`--sf-space-ratio-max`,1.333),o=jc(e,`--sf-space-scale`,1);for(let[e,s]of Dc)n[`--sf-space-${e}`]=Nc(t,r,i,a,l,u,s,o)}if(o){let t=jc(e,`--sf-radius-scale`,1);for(let[e,r]of Oc)n[`--sf-radius-${e}`]=`${Mc(r*t)}px`;n[`--sf-radius-none`]=`0`,n[`--sf-radius-full`]=`9999px`,n[`--sf-radius-pill`]=`var(--sf-radius-full)`,n[`--sf-radius-outer`]=`calc(var(--sf-radius-m) + var(--sf-component-pad))`}if(s){let t=jc(e,`--sf-border-scale`,1);for(let[e,r]of kc)n[`--sf-border-width-${e}`]=`${Mc(r*t)}px`}if(c&&!t){let t=jc(e,`--sf-motion-scale`,1);for(let[e,r]of Ac)n[`--sf-duration-${e}`]=`${Mc(r*t)}ms`;n[`--sf-duration-none`]=`0ms`,n[`--sf-theme-transition-duration`]=`${Mc(300*t)}ms`;for(let e=1;e<=5;e+=1)n[`--sf-animation-delay-${e}`]=`${Mc(75*e*t)}ms`}return n}function Fc(){return typeof window>`u`?null:window.slashedApp??null}function Ic(){return!!Fc()}function Lc(){if(typeof window>`u`)return{};let e=Fc();if(e)return e.overrides&&typeof e.overrides==`object`&&!Array.isArray(e.overrides)?{...e.overrides}:{};let t=window.location.hash;if(t?.includes(`c=`))try{return pc(t)}catch{}let n=localStorage.getItem(Sc);if(n)try{let e=JSON.parse(n);if(hc(e))return e}catch{}return{}}function Rc(e){if(typeof document>`u`)return;let t=document.getElementById(`sf-parent-overrides`);t||(t=document.createElement(`style`),t.id=`sf-parent-overrides`,document.head.appendChild(t));let n=Pc(e,{reduceMotion:typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches}),r=Object.keys(n).length>0?{...n,...e}:e;t.textContent=cc(r,{mode:`root`,banner:!1})}async function zc(e,t){let n=(e.url??``).replace(/\/$/,``),r=new URL(n+`/tokens/overrides`,window.location.href);if(r.origin!==window.location.origin)throw Error(`slashed: REST URL must be same-origin`);let i=r.href,a=await fetch(i,{method:`POST`,credentials:`same-origin`,headers:{"Content-Type":`application/json`,"X-WP-Nonce":e.nonce??``},body:JSON.stringify({overrides:t})});if(!a.ok)throw Error(`slashed: save failed ${a.status} ${a.statusText}`)}function Bc(e){try{localStorage.setItem(Sc,JSON.stringify(e))}catch{}let t=lc(e),n=t?`c=${t}`:``;window.location.hash.replace(`#`,``)!==n&&(window.location.hash=n)}async function Vc(e){if(typeof window>`u`)return;let t=Fc();if(t?.rest?.url){await zc(t.rest,{...e});return}Bc(e)}var Hc=null,Uc=null,Wc=null,Gc=null,Kc=null,qc=null,Jc=null,Yc=new Map,Xc=nn({value:0}),Zc=0;function Qc(e){if(Hc===e){el();return}Uc&&Uc.remove(),Gc&&Gc.remove(),Kc&&Kc.remove(),Hc=e,Uc=null,Wc=null,Gc=null,Kc=null,qc=null,Jc=null,el()}function $c(){return Hc?.documentElement.getAttribute(`data-theme`)===`dark`?`dark`:`light`}function el(){Zc+=1,Xc.value=Zc,Yc.clear()}function tl(){if(!Hc||!Hc.body)return null;if(Uc&&Uc.ownerDocument===Hc&&Uc.isConnected)return Uc;let e=Hc.createElement(`div`);return e.setAttribute(`data-sf-probe`,``),e.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,Hc.body.appendChild(e),Uc=e,e}function nl(e){let t=Yc.get(e);if(t!==void 0)return t;let n=tl();if(!n||!Hc)return``;n.style.color=``,n.style.color=e;let r=Hc.defaultView?.getComputedStyle(n).color??``;return Yc.set(e,r),r}function rl(e){return!Hc||!Hc.body?null:e===`light`?qc&&qc.isConnected?qc:(Gc&&Gc.remove(),Gc=Hc.createElement(`div`),Gc.setAttribute(`data-theme`,`light`),Gc.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,qc=Hc.createElement(`div`),Gc.appendChild(qc),Hc.body.appendChild(Gc),qc):Jc&&Jc.isConnected?Jc:(Kc&&Kc.remove(),Kc=Hc.createElement(`div`),Kc.setAttribute(`data-theme`,`dark`),Kc.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,Jc=Hc.createElement(`div`),Kc.appendChild(Jc),Hc.body.appendChild(Kc),Jc)}function il(e,t){let n=`${t}\0${e}`,r=Yc.get(n);if(r!==void 0)return r;let i=rl(t);if(!i||!Hc)return``;i.style.color=``,i.style.color=e;let a=Hc.defaultView?.getComputedStyle(i).color??``;return Yc.set(n,a),a}function al(){if(!Hc)return null;if(Wc&&Wc.canvas.ownerDocument===Hc)return Wc;let e=Hc.createElement(`canvas`);return e.width=1,e.height=1,Wc=e.getContext(`2d`,{willReadFrequently:!0}),Wc}function ol(e){let t=nl(e);if(!t)return null;let n=al();if(!n)return null;n.clearRect(0,0,1,1),n.fillStyle=t,n.fillRect(0,0,1,1);try{let e=n.getImageData(0,0,1,1).data;return[e[0],e[1],e[2]]}catch{return null}}function sl(e){let t=tl();return!t||!Hc?``:(t.style.background=``,t.style.background=e,Hc.defaultView?.getComputedStyle(t).backgroundImage??``)}var cl=nn({value:!1}),ll=`/* SLASHED v0.6.33 — slashed.full.css */
 
 /* ─── core/layers.css ─── */
 /* SLASHED — core/layers.css
@@ -5077,7 +5077,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array
   } */
 
 }
-`,gc=G(`<button> </button>`),_c=G(`<button><!></button>`),vc=G(`<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="flex-1 w-full border-0" title="SLASHED light preview"></iframe>`),yc=G(`<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="flex-1 w-full border-0" title="SLASHED dark preview"></iframe>`),bc=G(`<div class="flex-1 flex min-w-0 h-full"><div class="flex-1 flex flex-col min-w-0 border-r border-white/8"><div class="h-6 flex items-center justify-center bg-[#0d0d14] border-b border-white/6 shrink-0"><span class="text-[9px] font-bold text-slate-600 uppercase tracking-widest flex items-center gap-1"><!> Light</span></div> <!></div> <div class="flex-1 flex flex-col min-w-0"><div class="h-6 flex items-center justify-center bg-[#0d0d14] border-b border-white/6 shrink-0"><span class="text-[9px] font-bold text-slate-600 uppercase tracking-widest flex items-center gap-1"><!> Dark</span></div> <!></div></div>`),xc=G(`<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="w-full h-full border-0" title="SLASHED live preview"></iframe>`),Sc=G(`<div><!></div>`),Cc=G(`<div class="flex flex-col flex-1 min-h-0 bg-[#09090e]"><div class="min-h-10 bg-[#0d0d14] border-b border-white/8 flex flex-nowrap items-center px-3 gap-2 overflow-x-auto shrink-0"><div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5 max-w-full overflow-x-auto"></div> <div class="w-px h-4 bg-white/10 mx-1"></div> <div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div> <div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"><button title="Light mode"><!></button> <button title="Dark mode"><!></button> <button title="Split: light + dark side by side"><!></button></div> <div class="hidden md:block md:flex-1"></div> <select class="shrink-0 bg-white/5 border border-white/8 text-slate-400 rounded-lg px-2 py-0.5 text-[10px] font-bold focus:outline-none cursor-pointer"><option>Normal motion</option><option>Slow motion</option><option>No motion</option></select> <button title="Reload preview" class="shrink-0 p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Open in new tab" class="shrink-0 p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"><!></button></div> <div><!></div></div>`);function wc(e,t){We(t,!0);function n(e){let t=Bs(e,{reduceMotion:typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches});return Object.keys(t).length>0?{...t,...e}:e}let r=[{id:`marketing`,label:`Marketing`},{id:`components`,label:`Components`},{id:`stylescape`,label:`Stylescape`}],i=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 a(e){if(!e?.trim())return null;let t=e.trim().match(/^['"]([^'"]+)['"]/),n=(t?t[1]:e.split(`,`)[0]).trim();return n&&!i.has(n)?n:null}function o(e){let t=new Set,n=[];for(let r of[`--sf-font-body`,`--sf-font-heading`,`--sf-font-mono`]){let i=a(e[r]??``);!i||t.has(i)||(t.add(i),n.push({name:i,url:`https://fonts.googleapis.com/css2?family=${encodeURIComponent(i)}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap`}))}return n}function s(e,t){for(let{name:n,url:r}of o(t)){let t=`gf-${n.replace(/\s+/g,`-`).toLowerCase()}`;if(!e.getElementById(t)){let n=e.createElement(`link`);n.id=t,n.rel=`stylesheet`,n.href=r,e.head.appendChild(n)}}}let c=[50,100,200,300,400,500,600,700,800,900,950],l=[`xs`,`s`,`m`,`l`,`xl`,`2xl`,`full`],u=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],d=[`3xs`,`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`],f=[`display-l`,`display-m`,`display-s`,`2xl`,`xl`,`l`,`m`,`s`,`xs`];function p(){let e=(e,t,n)=>c.map(r=>`.pv-sw--${e}-${r}{background:var(--sf-color-${t}-${r}${n?`,var(--sf-color-${n}-${r})`:``});}`).join(``);return`
+`,ul=G(`<button> </button>`),dl=G(`<button><!></button>`),fl=G(`<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="flex-1 w-full border-0" title="SLASHED light preview"></iframe>`),pl=G(`<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="flex-1 w-full border-0" title="SLASHED dark preview"></iframe>`),ml=G(`<div class="flex-1 flex min-w-0 h-full"><div class="flex-1 flex flex-col min-w-0 border-r border-white/8"><div class="h-6 flex items-center justify-center bg-[#0d0d14] border-b border-white/6 shrink-0"><span class="text-[9px] font-bold text-slate-600 uppercase tracking-widest flex items-center gap-1"><!> Light</span></div> <!></div> <div class="flex-1 flex flex-col min-w-0"><div class="h-6 flex items-center justify-center bg-[#0d0d14] border-b border-white/6 shrink-0"><span class="text-[9px] font-bold text-slate-600 uppercase tracking-widest flex items-center gap-1"><!> Dark</span></div> <!></div></div>`),hl=G(`<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="w-full h-full border-0" title="SLASHED live preview"></iframe>`),gl=G(`<div><!></div>`),_l=G(`<div class="flex flex-col flex-1 min-h-0 bg-[#09090e]"><div class="min-h-10 bg-[#0d0d14] border-b border-white/8 flex flex-nowrap items-center px-3 gap-2 overflow-x-auto shrink-0"><div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5 max-w-full overflow-x-auto"></div> <div class="w-px h-4 bg-white/10 mx-1"></div> <div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div> <div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"><button title="Light mode"><!></button> <button title="Dark mode"><!></button> <button title="Split: light + dark side by side"><!></button></div> <div class="hidden md:block md:flex-1"></div> <select class="shrink-0 bg-white/5 border border-white/8 text-slate-400 rounded-lg px-2 py-0.5 text-[10px] font-bold focus:outline-none cursor-pointer"><option>Normal motion</option><option>Slow motion</option><option>No motion</option></select> <button title="Reload preview" class="shrink-0 p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Open in new tab" class="shrink-0 p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"><!></button></div> <div><!></div></div>`);function vl(e,t){Ue(t,!0);function n(e){let t=Pc(e,{reduceMotion:typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches});return Object.keys(t).length>0?{...t,...e}:e}let r=[{id:`marketing`,label:`Marketing`},{id:`components`,label:`Components`},{id:`stylescape`,label:`Stylescape`}],i=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 a(e){if(!e?.trim())return null;let t=e.trim().match(/^['"]([^'"]+)['"]/),n=(t?t[1]:e.split(`,`)[0]).trim();return n&&!i.has(n)?n:null}function o(e){let t=new Set,n=[];for(let r of[`--sf-font-body`,`--sf-font-heading`,`--sf-font-mono`]){let i=a(e[r]??``);!i||t.has(i)||(t.add(i),n.push({name:i,url:`https://fonts.googleapis.com/css2?family=${encodeURIComponent(i)}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap`}))}return n}function s(e,t){for(let{name:n,url:r}of o(t)){let t=`gf-${n.replace(/\s+/g,`-`).toLowerCase()}`;if(!e.getElementById(t)){let n=e.createElement(`link`);n.id=t,n.rel=`stylesheet`,n.href=r,e.head.appendChild(n)}}}let c=[50,100,200,300,400,500,600,700,800,900,950],l=[`xs`,`s`,`m`,`l`,`xl`,`2xl`,`full`],u=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],d=[`3xs`,`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`],f=[`display-l`,`display-m`,`display-s`,`2xl`,`xl`,`l`,`m`,`s`,`xs`];function p(){let e=(e,t,n)=>c.map(r=>`.pv-sw--${e}-${r}{background:var(--sf-color-${t}-${r}${n?`,var(--sf-color-${n}-${r})`:``});}`).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);}
@@ -5370,7 +5370,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array
     </div>
   </section>
 
-</div>`};function g(e,t,r,i,a){let s=Cs(n(e),{mode:`root`,banner:!1}),c=r===`slow`?`*, *::before, *::after { transition-duration: 200% !important; animation-duration: 200% !important; }`:r===`none`?`*, *::before, *::after { transition: none !important; animation: none !important; }`:``,l=o(e).map(({url:e})=>`  <link rel="stylesheet" href="${e}">`).join(`
+</div>`};function g(e,t,r,i,a){let s=cc(n(e),{mode:`root`,banner:!1}),c=r===`slow`?`*, *::before, *::after { transition-duration: 200% !important; animation-duration: 200% !important; }`:r===`none`?`*, *::before, *::after { transition: none !important; animation: none !important; }`:``,l=o(e).map(({url:e})=>`  <link rel="stylesheet" href="${e}">`).join(`
 `);return`<!DOCTYPE html>
 <html lang="en" data-theme="${t}">
 <head>
@@ -5392,26 +5392,26 @@ ${l?l+`
 <body>
 ${h[i]}
 </body>
-</html>`}let _=L(!1),v=L(null),y=L(null),b=L(null),x=L(0),S=L(0),C=L(0),w=L(0),T=I(()=>g({},t.previewTheme,t.previewMotion,t.previewTemplate,hc)),E=I(()=>g({},`light`,t.previewMotion,t.previewTemplate,hc)),D=I(()=>g({},`dark`,t.previewMotion,t.previewTemplate,hc));On(()=>{let e=t.overrides,r=t.previewTheme,i=U(x),a=mc.value,o=U(v);if(i===0||!o)return;let c=o.contentDocument;if(!c)return;let l=c.getElementById(`slashed-overrides`);l&&(l.textContent=Cs(n(e),{mode:`root`,banner:!1})),s(c,e),c.documentElement.setAttribute(`data-theme`,r),a?c.documentElement.setAttribute(`data-lumlocker`,``):c.documentElement.removeAttribute(`data-lumlocker`),ic(c),oc()}),On(()=>{let e=t.overrides,r=U(S),i=U(C),a=mc.value,o=Cs(n(e),{mode:`root`,banner:!1}),c=e=>{a?e.documentElement.setAttribute(`data-lumlocker`,``):e.documentElement.removeAttribute(`data-lumlocker`)};if(U(y)&&r>0){let t=U(y).contentDocument;if(t){let n=t.getElementById(`slashed-overrides`);n&&(n.textContent=o),s(t,e),c(t),ic(t)}}if(U(b)&&i>0){let t=U(b).contentDocument;if(t){let n=t.getElementById(`slashed-overrides`);n&&(n.textContent=o),s(t,e),c(t)}}oc()});let O=I(()=>t.previewWidth!==`fluid`);function k(){return t.previewWidth===`fluid`?`width:100%;height:100%`:t.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)`:t.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 A=Cc(),ee=z(A),te=z(ee);Y(te,21,()=>r,e=>e.id,(e,n)=>{var r=gc(),i=z(r,!0);F(r),H(()=>{X(r,1,`shrink-0 px-2.5 py-0.5 rounded-md text-[10px] font-bold transition-all cursor-pointer ${t.previewTemplate===U(n).id?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(i,U(n).label)}),W(`click`,r,()=>t.onTemplateChange(U(n).id)),K(e,r)}),F(te);var j=V(te,4);Y(j,20,()=>[`fluid`,`desktop`,`tablet`,`mobile`],e=>e,(e,n)=>{var r=_c(),i=z(r),a=e=>{Va(e,{class:`w-3 h-3`})},o=e=>{Ka(e,{class:`w-3 h-3`})},s=e=>{Oa(e,{class:`w-3 h-3`})};J(i,e=>{n===`mobile`?e(a):n===`tablet`?e(o,1):e(s,-1)}),F(r),H(()=>{Q(r,`title`,n===`fluid`?`Full width`:n===`desktop`?`Desktop (1024px)`:n===`tablet`?`Tablet (768px)`:`Mobile (390px)`),X(r,1,`p-1 rounded-md transition-all cursor-pointer ${t.previewWidth===n?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`)}),W(`click`,r,()=>t.onWidthChange(n)),K(e,r)}),F(j);var M=V(j,2),ne=z(M);Wa(z(ne),{class:`w-3 h-3`}),F(ne);var re=V(ne,2);ka(z(re),{class:`w-3 h-3`}),F(re);var ie=V(re,2);ya(z(ie),{class:`w-3 h-3`}),F(ie),F(M);var ae=V(M,4),oe=z(ae);oe.value=oe.__value=`normal`;var se=V(oe);se.value=se.__value=`slow`;var N=V(se);N.value=N.__value=`none`,F(ae);var ce;Ai(ae);var le=V(ae,2);Pa(z(le),{class:`w-3 h-3`}),F(le);var ue=V(le,2);Sa(z(ue),{class:`w-3 h-3`}),F(ue),F(ee);var de=V(ee,2),fe=z(de),pe=e=>{var t=bc(),n=z(t),r=z(n),i=z(r);Wa(z(i),{class:`w-2.5 h-2.5`}),Ne(),F(i),F(r),oi(V(r,2),()=>U(w),e=>{var t=vc();ea(t,e=>R(y,e),()=>U(y)),H(()=>Q(t,`srcdoc`,U(E))),Hr(`load`,t,()=>{R(S,U(S)+1)}),Br(t),K(e,t)}),F(n);var a=V(n,2),o=z(a),s=z(o);ka(z(s),{class:`w-2.5 h-2.5`}),Ne(),F(s),F(o),oi(V(o,2),()=>U(w),e=>{var t=yc();ea(t,e=>R(b,e),()=>U(b)),H(()=>Q(t,`srcdoc`,U(D))),Hr(`load`,t,()=>{R(C,U(C)+1)}),Br(t),K(e,t)}),F(a),F(t),K(e,t)},me=e=>{var t=Sc();oi(z(t),()=>U(w),e=>{var t=xc();ea(t,e=>R(v,e),()=>U(v)),H(()=>Q(t,`srcdoc`,U(T))),Hr(`load`,t,()=>{R(x,U(x)+1)}),Br(t),K(e,t)}),F(t),H(e=>{Z(t,e),X(t,1,Si(U(O)?``:`w-full h-full`))},[()=>k()]),K(e,t)};J(fe,e=>{U(_)?e(pe):e(me,-1)}),F(de),F(A),H(()=>{X(ne,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`light`?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),X(re,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`dark`?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),X(ie,1,`p-1 rounded-md transition-all cursor-pointer ${U(_)?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),ce!==(ce=t.previewMotion)&&(ae.value=(ae.__value=t.previewMotion)??``,ki(ae,t.previewMotion)),X(de,1,`flex-1 min-h-0 flex overflow-auto ${U(O)&&!U(_)?`items-center justify-center bg-[#06060a]`:``}`)}),W(`click`,ne,()=>{R(_,!1),t.onThemeChange(`light`)}),W(`click`,re,()=>{R(_,!1),t.onThemeChange(`dark`)}),W(`click`,ie,()=>{R(_,!U(_))}),W(`change`,ae,e=>t.onMotionChange(e.target.value)),W(`click`,le,()=>{R(x,0),R(S,0),R(C,0),R(w,U(w)+1)}),W(`click`,ue,()=>{let e=new Blob([g(t.overrides,t.previewTheme,t.previewMotion,t.previewTemplate,hc)],{type:`text/html`}),n=URL.createObjectURL(e);window.open(n,`_blank`)}),K(e,A),Ge()}Ur([`click`,`change`]);var Tc={macros:[`prose`,`flow-space`,`line-clamp`,`aspect`,`scroll-shadow`,`scrim`,`surface-color`,`content-intrinsic`],colors:[`color`,`contrast`,`palette-mix`,`lumlocker`,`gradient`],typography:[`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`],spacing:[`space`,`section`,`gutter`,`content-gap`,`component-pad`],layout:[`container`,`layout`,`grid`,`breakpoint`,`measure`,`column`,`header-height`,`touch-target`,`bento`,`cluster`,`cover-min`,`equal-min`,`frame`,`ratio-`,`reel`,`safe-`,`sidebar`,`switcher`,`-bg-`],borders:[`radius`,`border-width`,`border-scale`,`border-style`,`divider`],shadows:[`shadow`],motion:[`motion`,`duration`,`easing`,`ease`,`scroll-timeline`],effects:[`filter`,`blur`,`backdrop`,`opacity`,`effect`],misc:[`z-`,`cursor`,`ring`,`focus`,`outline`,`selection`,`icon`,`is-active`,`is-current`,`is-open`,`is-pressed`,`field-required`,`object-fit`,`object-position`,`print-`,`scrollbar`,`size-`]};function Ec(e){for(let[t,n]of Object.entries(Tc))if(t!==`misc`&&n.some(t=>e.includes(t)))return t;return`misc`}var Dc=`slashed-studio/themes/v1`;function Oc(e){return!!e&&typeof e==`object`&&!Array.isArray(e)&&Object.values(e).every(e=>typeof e==`string`)}function kc(e){if(!e||typeof e!=`object`||Array.isArray(e))return!1;let t=e;return typeof t.id==`string`&&typeof t.name==`string`&&typeof t.icon==`string`&&typeof t.blurb==`string`&&Oc(t.overrides)}function Ac(){if(typeof window>`u`)return[];try{let e=localStorage.getItem(Dc);if(!e)return[];let t=JSON.parse(e);return Array.isArray(t)?t.filter(kc):[]}catch{return[]}}function jc(e){if(typeof window>`u`)return!1;try{return localStorage.setItem(Dc,JSON.stringify(e)),!0}catch{return!1}}function Mc(){return Ac()}function Nc(e,t){let n=Ac(),r=e.trim()||`Untitled theme`,i={id:`theme-${Date.now()}-${Math.random().toString(36).slice(2,7)}`,name:r,icon:`🎨`,blurb:`${Object.keys(t).length} override${Object.keys(t).length===1?``:`s`}`,overrides:{...t}},a=[...n,i];return jc(a)?a:n}function Pc(e){let t=Ac().filter(t=>t.id!==e);return jc(t)?t:Ac()}var Fc=G(`You have <span class="text-indigo-300 font-bold"> </span>.`,1),Ic=G(`<button class="mt-2 text-[10px] text-rose-400 hover:text-rose-300 transition-colors cursor-pointer">Reset all overrides →</button>`),Lc=G(`<span class="text-[9px] font-bold text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded-full font-mono shrink-0"> </span>`),Rc=G(`<button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-white/6 transition-colors cursor-pointer group text-left"><div class="text-slate-500 group-hover:text-slate-300 transition-colors shrink-0"><!></div> <div class="flex-1 min-w-0"><div class="text-[11px] font-semibold text-slate-300 group-hover:text-white transition-colors"> </div> <div class="text-[9px] text-slate-600"> </div></div> <!> <span class="text-slate-700 group-hover:text-slate-500 text-[10px]">→</span></button>`),zc=G(`<button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-white/6 transition-colors cursor-pointer group text-left"><div class="text-slate-500 group-hover:text-slate-300 transition-colors shrink-0"><!></div> <div class="flex-1 min-w-0"><div class="text-[11px] font-semibold text-slate-300 group-hover:text-white transition-colors"> </div> <div class="text-[9px] text-slate-600"> </div></div> <span class="text-slate-700 group-hover:text-slate-500 text-[10px]">→</span></button>`),Bc=G(`<p class="text-[10px] text-slate-600">No saved themes yet. Configure tokens, then save.</p>`),Vc=G(`<button class="flex items-start gap-2 p-3 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 hover:border-white/14 transition-all cursor-pointer text-left group"><span class="text-lg leading-none shrink-0"> </span> <div class="min-w-0"><div class="text-[11px] font-semibold text-slate-200 group-hover:text-white transition-colors truncate"> </div> <div class="text-[9px] text-slate-500 mt-0.5 font-mono"> </div></div></button>`),Hc=G(`<div class="grid grid-cols-2 gap-2"></div>`),Uc=G(`<div class="p-4 space-y-5 overflow-y-auto flex-1"><div class="rounded-xl bg-gradient-to-br from-indigo-600/20 to-purple-600/10 border border-indigo-500/20 p-4"><div class="flex items-center gap-2 mb-2"><!> <span class="text-[11px] font-bold text-indigo-300 uppercase tracking-widest">SLASHED Studio</span></div> <p class="text-[12px] text-slate-300 leading-relaxed">Configure every SLASHED design token visually. Changes appear live in the preview. <!></p> <!></div> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Token domains</div> <div class="space-y-1"></div></div> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Tools</div> <div class="space-y-1"></div></div> <div><div class="flex items-center justify-between mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Saved themes</div> <button class="text-[10px] text-slate-500 hover:text-indigo-400 transition-colors cursor-pointer">Manage →</button></div> <div class="flex items-center gap-2 mb-2"><input type="text" placeholder="Save current as…" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <button aria-label="Save current theme" class="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-[11px] font-bold bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/30 transition-all cursor-pointer shrink-0 disabled:opacity-40 disabled:cursor-not-allowed"><!></button></div> <!></div></div>`);function Wc(e,t){We(t,!0);let n=[{id:`colors`,icon:ja,label:`Colors`,desc:`Brand, semantic & neutral palettes`},{id:`typography`,icon:Ja,label:`Typography`,desc:`Font families & fluid type scale`},{id:`spacing`,icon:Ia,label:`Spacing`,desc:`Space scale & section rhythm`},{id:`layout`,icon:$a,label:`Layout`,desc:`Containers, grids & primitives`},{id:`borders`,icon:Ua,label:`Borders`,desc:`Corner radius & border widths`},{id:`shadows`,icon:Ta,label:`Shadows`,desc:`Elevation & depth control`},{id:`motion`,icon:Xa,label:`Motion`,desc:`Duration & easing curves`},{id:`effects`,icon:Ha,label:`Effects`,desc:`Blur, opacity & scrollbars`},{id:`macros`,icon:ha,label:`Macros`,desc:`Flow, prose, aspect & scrim`},{id:`misc`,icon:Ma,label:`Misc`,desc:`Z-index & remaining tokens`}],r=[{id:`themes`,icon:Ga,label:`Themes`,desc:`Save & re-apply configurations`},{id:`wcag`,icon:za,label:`WCAG`,desc:`Contrast checker & fixes`},{id:`setup`,icon:Aa,label:`Install`,desc:`Export overrides & setup`},{id:`cheatsheet`,icon:ga,label:`Classes`,desc:`Utility class reference`}],i={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 a(e){let n=i[e];return n?Object.keys(t.overrides).filter(e=>n.some(t=>e.includes(t))).length:0}let o=I(()=>Object.keys(t.overrides).length),s=L(nn(Mc())),c=L(``);function l(){U(o)!==0&&(R(s,Nc(U(c),t.overrides),!0),R(c,``))}var u=Uc(),d=z(u),f=z(d);Ha(z(f),{class:`w-4 h-4 text-indigo-400`}),Ne(2),F(f);var p=V(f,2),m=V(z(p)),h=e=>{var t=Fc(),n=V(B(t)),r=z(n);F(n),Ne(),H(()=>q(r,`${U(o)??``} active override${U(o)===1?``:`s`}`)),K(e,t)},g=e=>{K(e,Qr(`Pick any domain below to get started.`))};J(m,e=>{U(o)>0?e(h):e(g,-1)}),F(p);var _=V(p,2),v=e=>{var n=Ic();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(_,e=>{U(o)>0&&e(v)}),F(d);var y=V(d,2),b=V(z(y),2);Y(b,21,()=>n,e=>e.id,(e,n)=>{let r=I(()=>a(U(n).id)),i=I(()=>U(n).icon);var o=Rc(),s=z(o);_i(z(s),()=>U(i),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(s);var c=V(s,2),l=z(c),u=z(l,!0);F(l);var d=V(l,2),f=z(d,!0);F(d),F(c);var p=V(c,2),m=e=>{var t=Lc(),n=z(t,!0);F(t),H(()=>q(n,U(r))),K(e,t)};J(p,e=>{U(r)>0&&e(m)}),Ne(2),F(o),H(()=>{q(u,U(n).label),q(f,U(n).desc)}),W(`click`,o,()=>t.onSelect(U(n).id)),K(e,o)}),F(b),F(y);var x=V(y,2),S=V(z(x),2);Y(S,21,()=>r,e=>e.id,(e,n)=>{let r=I(()=>U(n).icon);var i=zc(),a=z(i);_i(z(a),()=>U(r),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(a);var o=V(a,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),Ne(2),F(i),H(()=>{q(c,U(n).label),q(u,U(n).desc)}),W(`click`,i,()=>t.onSelect(U(n).id)),K(e,i)}),F(S),F(x);var C=V(x,2),w=z(C),T=V(z(w),2);F(w);var E=V(w,2),D=z(E);Hi(D);var O=V(D,2);La(z(O),{class:`w-3 h-3`}),F(O),F(E);var k=V(E,2),A=e=>{K(e,Bc())},ee=e=>{var n=Hc();Y(n,21,()=>U(s).slice(0,6),e=>e.id,(e,n)=>{var r=Vc(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),F(r),H(()=>{q(a,U(n).icon),q(c,U(n).name),q(u,U(n).blurb)}),W(`click`,r,()=>t.onApplyTheme(U(n).overrides)),K(e,r)}),F(n),K(e,n)};J(k,e=>{U(s).length===0?e(A):e(ee,-1)}),F(C),F(u),H(()=>O.disabled=U(o)===0),W(`click`,T,()=>t.onSelect(`themes`)),W(`keydown`,D,e=>{e.key===`Enter`&&l()}),Xi(D,()=>U(c),e=>R(c,e)),W(`click`,O,l),K(e,u),Ge()}Ur([`click`,`keydown`]);var Gc={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:e=>`calc(${e} + var(--sf-is-dark) * 0.17)`,decode:e=>{let t=/^calc\(\s*([\d.e+-]+)/.exec(String(e));return t?parseFloat(t[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}]};function Kc(e,t,n){let r=n*Math.PI/180,i=e,a=t*Math.cos(r),o=t*Math.sin(r),s=i+.3963377774*a+.2158037573*o,c=i-.1055613458*a-.0638541728*o,l=i-.0894841775*a-1.291485548*o,u=s*s*s,d=c*c*c,f=l*l*l,p=4.0767416621*u-3.3077115913*d+.2309699292*f,m=-1.2684380046*u+2.6097574011*d-.3413193965*f,h=-.0041960863*u-.7034186147*d+1.707614701*f,g=e=>e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055;return[Math.max(0,Math.min(255,Math.round(g(p)*255))),Math.max(0,Math.min(255,Math.round(g(m)*255))),Math.max(0,Math.min(255,Math.round(g(h)*255)))]}function qc(e,t,n){let r=e=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4};return .2126*r(e)+.7152*r(t)+.0722*r(n)}function Jc(e,t){let n=Math.max(e,t),r=Math.min(e,t);return(n+.05)/(r+.05)}function Yc(e){let t=e.match(/oklch\(\s*([\d.%]+)\s+([\d.]+)\s+([\d.]+)/i);if(t){let e=t[1];return{l:e.endsWith(`%`)?parseFloat(e)/100:parseFloat(e),c:parseFloat(t[2]),h:parseFloat(t[3]),valid:!0}}return{l:.5,c:.15,h:200,valid:!1}}function Xc(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${Math.round(n)})`}var Zc=G(`<span class="text-[10px] text-slate-500 ml-1 font-mono"> </span>`),Qc=G(`<div class="flex items-center gap-2 w-full"><div class="relative flex-1 h-5 flex items-center"><div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div> <div class="absolute left-0 h-1 bg-indigo-500 rounded-full"></div> <input type="range" class="absolute inset-0 w-full opacity-0 cursor-pointer disabled:cursor-not-allowed h-full"/> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-white/20 pointer-events-none"></div></div> <div class="flex items-center shrink-0"><input type="number" class="w-14 bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500 disabled:opacity-40"/> <!></div></div>`);function $c(e,t){We(t,!0);let n=sa(t,`disabled`,3,!1);function r(e){return Math.min(t.max,Math.max(t.min,e))}let i=I(()=>(t.value-t.min)/(t.max-t.min)*100);var a=Qc(),o=z(a),s=V(z(o),2),c=V(s,2);Hi(c);var l=V(c,2);F(o);var u=V(o,2),d=z(u);Hi(d);var f=V(d,2),p=e=>{var n=Zc(),r=z(n,!0);F(n),H(()=>q(r,t.unit)),K(e,n)};J(f,e=>{t.unit&&e(p)}),F(u),F(a),H(()=>{Z(s,`width: ${U(i)}%`),Q(c,`min`,t.min),Q(c,`max`,t.max),Q(c,`step`,t.step),Ui(c,t.value),c.disabled=n(),Z(l,`left: calc(${U(i)}% - 6px)`),Q(d,`min`,t.min),Q(d,`max`,t.max),Q(d,`step`,t.step),Ui(d,t.value),d.disabled=n()}),W(`input`,c,e=>t.onChange(r(parseFloat(e.target.value)))),W(`change`,d,e=>t.onChange(r(parseFloat(e.target.value)||0))),K(e,a),Ge()}Ur([`input`,`change`]);var el=G(`<div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0"></div>`),tl=G(`<button class="px-2 py-1 rounded-lg text-[10px] text-rose-400 hover:bg-rose-500/10 border border-rose-500/20 transition-colors cursor-pointer">Reset</button>`),nl=G(`<div class="px-3 pb-3 border-t border-white/6 pt-3 space-y-3"><div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Lightness (L)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <div class="h-4 rounded-full mb-1"></div> <!></div> <div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Chroma (C)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <!></div> <div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Hue (H)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <div class="h-4 rounded-full mb-1"></div> <!></div> <div><div class="text-[10px] font-bold text-slate-500 mb-1">Raw value</div> <div class="flex gap-2"><input type="text" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] font-mono text-slate-200 focus:outline-none focus:border-indigo-500" placeholder="oklch(0.6 0.15 264)"/> <!></div></div></div>`),rl=G(`<div><button class="w-full flex items-center gap-3 px-3 py-2.5 cursor-pointer"><div class="w-8 h-8 rounded-lg border border-white/10 shrink-0 shadow-lg"></div> <div class="flex-1 text-left min-w-0"><div class="text-[11px] font-semibold text-slate-200"> </div> <div class="text-[9px] font-mono text-slate-500"> </div> <div class="text-[9px] font-mono text-slate-600"> </div></div> <!> <div>▾</div></button> <!></div>`);function il(e,t){We(t,!0);function n(e){let t=/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/.exec(e);return t?{l:parseFloat(t[1]),c:parseFloat(t[2]),h:parseFloat(t[3])}:null}function r(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${n.toFixed(1)})`}function i(e,t,n){let r=n*Math.PI/180,i=t*Math.cos(r),a=t*Math.sin(r),o=e+.3963377774*i+.2158037573*a,s=e-.1055613458*i-.0638541728*a,c=e-.0894841775*i-1.291485548*a,l=o*o*o,u=s*s*s,d=c*c*c,f=4.0767416621*l-3.3077115913*u+.2309699292*d,p=-1.2684380046*l+2.6097574011*u-.3413193965*d,m=-.0041960863*l-.7034186147*u+1.707614701*d,h=e=>e<=0?0:e>=1?255:Math.round(e**(1/2.2)*255);return`rgb(${h(f)},${h(p)},${h(m)})`}let a=I(()=>n(t.value)??{l:.6,c:.15,h:264}),o=L(!1),s=L(``),c=I(()=>i(U(a).l,U(a).c,U(a).h)),l=I(()=>t.tokenName.replace(`--sf-`,``));function u(e,n,i){t.onChange(r(e,n,i))}var d=rl(),f=z(d),p=z(f);let m;var h=V(p,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=z(v,!0);F(v);var b=V(v,2),x=z(b,!0);F(b),F(h);var S=V(h,2),C=e=>{K(e,el())};J(S,e=>{t.overridden&&e(C)});var w=V(S,2);F(f);var T=V(f,2),E=e=>{var n=nl(),r=z(n),i=z(r),o=V(z(i),2),c=z(o,!0);F(o),F(i);var l=V(i,2);$c(V(l,2),{get value(){return U(a).l},min:0,max:1,step:.005,onChange:e=>u(e,U(a).c,U(a).h)}),F(r);var d=V(r,2),f=z(d),p=V(z(f),2),m=z(p,!0);F(p),F(f),$c(V(f,2),{get value(){return U(a).c},min:0,max:.4,step:.005,onChange:e=>u(U(a).l,e,U(a).h)}),F(d);var h=V(d,2),g=z(h),_=V(z(g),2),v=z(_);F(_),F(g);var y=V(g,2);$c(V(y,2),{get value(){return U(a).h},min:0,max:360,step:1,unit:`°`,onChange:e=>u(U(a).l,U(a).c,e)}),F(h);var b=V(h,2),x=V(z(b),2),S=z(x);Hi(S);var C=V(S,2),w=e=>{var n=tl();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{t.overridden&&e(w)}),F(x),F(b),F(n),H((e,n,r,i,a)=>{q(c,e),Z(l,n),q(m,r),q(v,`${i??``}°`),Z(y,a),Ui(S,U(s)||t.value)},[()=>U(a).l.toFixed(3),()=>`background: linear-gradient(to right, oklch(0 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}), oklch(1 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}))`,()=>U(a).c.toFixed(3),()=>U(a).h.toFixed(1),()=>`background: linear-gradient(to right, oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 0), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 60), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 120), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 180), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 240), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 300), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 360))`]),W(`input`,S,e=>{R(s,e.target.value,!0)}),Hr(`blur`,S,()=>{U(s).trim()&&(t.onChange(U(s).trim()),R(s,``))}),W(`keydown`,S,e=>{e.key===`Enter`&&(U(s).trim()&&(t.onChange(U(s).trim()),R(s,``)),e.currentTarget.blur())}),K(e,n)};J(T,e=>{U(o)&&e(E)}),F(d),H(()=>{X(d,1,`rounded-xl border transition-all ${t.overridden?`bg-indigo-500/8 border-indigo-500/20`:`bg-white/4 border-white/8 hover:border-white/12`}`),m=Z(p,``,m,{background:U(c)}),q(_,t.label),q(y,U(l)),q(x,t.value),X(w,1,`text-slate-500 text-[10px] transition-transform ${U(o)?`rotate-180`:``}`)}),W(`click`,f,()=>{R(o,!U(o))}),K(e,d),Ge()}Ur([`click`,`input`,`keydown`]);var al=G(`<span class="text-[9px] text-slate-600 font-mono"> </span>`),ol=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>`),sl=G(`<p class="text-[10px] text-slate-600 mt-1 leading-relaxed"> </p>`),cl=G(`<div class="group"><div class="flex items-center justify-between mb-1.5"><div class="flex items-center gap-2"><span class="text-[11px] font-semibold text-slate-300"> </span> <!></div> <!></div> <!> <!></div>`);function ll(e,t){We(t,!0);let n=I(()=>t.overrides[t.knob.name]),r=I(()=>U(n)===void 0?t.knob.default:t.knob.decode?t.knob.decode(U(n)):parseFloat(U(n))),i=I(()=>isNaN(U(r))?t.knob.default:U(r)),a=I(()=>t.knob.name in t.overrides);function o(e){let n=t.knob.encode?t.knob.encode(e):String(e);t.onChange(t.knob.name,n)}function s(){t.onChange(t.knob.name,null)}var c=cl(),l=z(c),u=z(l),d=z(u),f=z(d,!0);F(d);var p=V(d,2),m=e=>{var n=al(),r=z(n);F(n),H(()=>q(r,`→ ${t.knob.driving??``} tokens`)),K(e,n)};J(p,e=>{t.knob.driving!==void 0&&e(m)}),F(u);var h=V(u,2),g=e=>{var t=ol();W(`click`,t,s),K(e,t)};J(h,e=>{U(a)&&e(g)}),F(l);var _=V(l,2);$c(_,{get value(){return U(i)},get min(){return t.knob.min},get max(){return t.knob.max},get step(){return t.knob.step},get unit(){return t.knob.unit},onChange:o});var v=V(_,2),y=e=>{var n=sl(),r=z(n,!0);F(n),H(()=>q(r,t.knob.help)),K(e,n)};J(v,e=>{t.knob.help&&e(y)}),F(c),H(()=>q(f,t.knob.label)),K(e,c),Ge()}Ur([`click`]);var ul=G(`<span class="text-[11px] font-semibold text-slate-200"> </span>`),dl=G(`<span></span>`),fl=G(`<button>&lt;/&gt;</button>`),pl=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>`),ml=G(`<input type="text" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-500 focus:outline-none focus:border-indigo-500"/>`),hl=G(`<p class="text-[9px] font-mono text-slate-700 mt-0.5 leading-none"> </p>`),gl=G(`<!> <!>`,1),_l=G(`<p class="text-[10px] text-slate-600 mt-1 leading-relaxed"> </p>`),vl=G(`<div class="group"><div class="flex items-center justify-between mb-1.5"><!> <div class="flex items-center gap-1.5"><!> <!></div></div> <!> <!></div>`);function $(e,t){We(t,!0);let n=L(!1),r=L(``),i=L(!1),a=I(()=>!!t.currentRaw&&/^(var|calc|clamp|min|max|env)\(/.test(t.currentRaw.trim())),o=I(()=>!!(t.rawDefault&&t.onRawSet&&(U(n)||U(a)||U(i))));On(()=>{U(i)||R(r,t.currentRaw??``,!0)});var s=vl(),c=z(s),l=z(c),u=e=>{var n=ul(),r=z(n,!0);F(n),H(()=>q(r,t.label)),K(e,n)},d=e=>{K(e,dl())};J(l,e=>{t.label?e(u):e(d,-1)});var f=V(l,2),p=z(f),m=e=>{var t=fl();H(()=>{Q(t,`title`,U(o)?`Switch to slider`:`Enter raw CSS value`),X(t,1,`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${U(o)?`text-indigo-400`:`opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-400`}`)}),W(`click`,t,()=>{R(n,!U(n))}),K(e,t)};J(p,e=>{t.rawDefault&&t.onRawSet&&e(m)});var h=V(p,2),g=e=>{var n=pl();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(h,e=>{t.overridden&&e(g)}),F(f),F(c);var _=V(c,2),v=e=>{var n=ml();Hi(n),H(()=>{Ui(n,U(r)),Q(n,`placeholder`,t.rawDefault)}),Hr(`focus`,n,()=>{R(i,!0)}),Hr(`blur`,n,()=>{R(i,!1),U(r).trim()||t.onReset()}),W(`input`,n,e=>{R(r,e.target.value,!0);let n=U(r).trim();n&&t.onRawSet&&t.onRawSet(n)}),K(e,n)},y=e=>{var n=gl(),r=B(n);$c(r,{get value(){return t.value},get min(){return t.min},get max(){return t.max},get step(){return t.step},get unit(){return t.unit},get onChange(){return t.onChange}});var i=V(r,2),a=e=>{var n=hl(),r=z(n);F(n),H(()=>q(r,`default: ${t.rawDefault??``}`)),K(e,n)};J(i,e=>{t.rawDefault&&!t.overridden&&e(a)}),K(e,n)};J(_,e=>{U(o)&&t.rawDefault?e(v):e(y,-1)});var b=V(_,2),x=e=>{var n=_l(),r=z(n,!0);F(n),H(()=>q(r,t.help)),K(e,n)};J(b,e=>{t.help&&e(x)}),F(s),K(e,s),Ge()}Ur([`click`,`input`]);var yl=G(`<input type="color" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" tabindex="-1"/>`),bl=G(`<input class="flex-1 bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 focus:outline-none"/>`),xl=G(`<span class="text-indigo-300"> </span>`),Sl=G(`<button class="flex-1 text-left text-[9px] font-mono text-slate-500 hover:text-slate-200 truncate cursor-pointer transition-colors"><!></button>`),Cl=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),wl=G(`<div class="flex items-center gap-2"><div class="relative shrink-0 w-7 h-7 rounded border border-white/10 overflow-hidden cursor-pointer"><div class="absolute inset-0"></div> <!></div> <!> <!></div>`);function Tl(e,t){We(t,!0);let n=L(!1),r=L(!1),i=L(null);On(()=>{U(n)&&xr().then(()=>U(i)?.focus())});function a(e){let t=e.trim();return t.startsWith(`--`)&&!t.startsWith(`var(`)?`var(${t})`:t}function o(e){nc.value;let t=a(e);return cc(t)||t||`transparent`}let s=I(()=>o(t.value||`var(${t.token})`)),c=I(()=>t.value.trim().startsWith(`var(`)||t.value.trim().startsWith(`--`));function l(e){if(e.match(/^#([0-9a-fA-F]{6})$/))return e.toLowerCase();let t=e.match(/^#([0-9a-fA-F]{3})$/);if(t)return`#`+t[1].split(``).map(e=>e+e).join(``);let n=e.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);return n?`#`+[n[1],n[2],n[3]].map(e=>parseInt(e).toString(16).padStart(2,`0`)).join(``):`#6366f1`}var u=wl(),d=z(u),f=z(d);let p;var m=V(f,2),h=e=>{var n=yl();Hi(n),H(e=>Ui(n,e),[()=>l(U(s))]),W(`input`,n,e=>t.onSet(e.target.value)),K(e,n)};J(m,e=>{U(c)||e(h)}),F(d);var g=V(d,2),_=e=>{var o=bl();Hi(o),ea(o,e=>R(i,e),()=>U(i)),H(()=>{Ui(o,t.value),Q(o,`placeholder`,t.placeholder??`default`)}),Hr(`blur`,o,e=>{if(U(r)){R(r,!1),R(n,!1);return}let i=a(e.target.value);i?t.onSet(i):t.onReset(),R(n,!1)}),W(`keydown`,o,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&(R(r,!0),R(n,!1))}),K(e,o)},v=e=>{var r=Sl(),i=z(r),a=e=>{var n=xl(),r=z(n,!0);F(n),H(()=>q(r,t.value)),K(e,n)},o=e=>{var n=Qr();H(()=>q(n,t.placeholder??`default`)),K(e,n)};J(i,e=>{t.isOverridden?e(a):e(o,-1)}),F(r),W(`click`,r,()=>{R(n,!0)}),K(e,r)};J(g,e=>{U(n)?e(_):e(v,-1)});var y=V(g,2),b=e=>{var n=Cl();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(y,e=>{t.isOverridden&&e(b)}),F(u),H(()=>p=Z(f,``,p,{background:U(s)})),K(e,u),Ge()}Ur([`input`,`keydown`,`click`]);var El=(e,t=f)=>{var n=Dl(),r=z(n,!0);F(n),H(()=>q(r,t())),K(e,n)},Dl=G(`<span aria-hidden="true" class="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-1 z-20 whitespace-nowrap rounded bg-slate-900 border border-white/10 px-1.5 py-0.5 text-[8px] font-mono text-slate-200 opacity-0 group-hover:opacity-100 transition-opacity"> </span>`),Ol=G(`<div class="rounded-md border border-white/10 px-1 py-1.5 flex flex-col items-center justify-center gap-0.5 min-h-[34px]"><span class="text-[11px] font-bold leading-none">Aa</span> <span class="text-[7px] leading-none opacity-90"> </span></div>`),kl=G(`<div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none uppercase"> </span> <div class="grid grid-cols-5 gap-1 flex-1"></div></div>`),Al=G(`<div class="space-y-1"><div class="text-[8px] font-semibold text-slate-600 uppercase tracking-widest"> </div> <!></div>`),jl=G(`<button> </button>`),Ml=G(`<div class="group relative w-5 h-3 rounded-t border-x border-t border-white/10"><!></div>`),Nl=G(`<div class="group relative w-5 h-3 rounded-b border-x border-b border-white/10"><!></div>`),Pl=G(`<p class="text-[8px] text-slate-600 leading-snug pl-1">Absolute lightness ramp — each step pins L and inherits chroma + hue from the source. Not the brand mix curve.
+</html>`}let _=L(!1),v=L(null),y=L(null),b=L(null),x=L(0),S=L(0),C=L(0),w=L(0),T=I(()=>g({},t.previewTheme,t.previewMotion,t.previewTemplate,ll)),E=I(()=>g({},`light`,t.previewMotion,t.previewTemplate,ll)),D=I(()=>g({},`dark`,t.previewMotion,t.previewTemplate,ll));On(()=>{let e=t.overrides,r=t.previewTheme,i=U(x),a=cl.value,o=requestAnimationFrame(()=>{let t=U(v);if(i===0||!t)return;let o=t.contentDocument;if(!o)return;let c=o.getElementById(`slashed-overrides`);c&&(c.textContent=cc(n(e),{mode:`root`,banner:!1})),s(o,e),o.documentElement.setAttribute(`data-theme`,r),a?o.documentElement.setAttribute(`data-lumlocker`,``):o.documentElement.removeAttribute(`data-lumlocker`),Qc(o)});return()=>cancelAnimationFrame(o)}),On(()=>{let e=U(_),r=t.overrides,i=U(S),a=U(C),o=cl.value;if(!e)return;let c=requestAnimationFrame(()=>{let e=cc(n(r),{mode:`root`,banner:!1}),t=e=>{o?e.documentElement.setAttribute(`data-lumlocker`,``):e.documentElement.removeAttribute(`data-lumlocker`)},c=!1,l=!1;if(U(y)&&i>0){let n=U(y).contentDocument;if(n){let i=n.getElementById(`slashed-overrides`);i&&(i.textContent=e),s(n,r),t(n),Qc(n),c=!0}}if(U(b)&&a>0){let n=U(b).contentDocument;if(n){let i=n.getElementById(`slashed-overrides`);i&&(i.textContent=e),s(n,r),t(n),l=!0}}l&&!c&&el()});return()=>cancelAnimationFrame(c)});let O=I(()=>t.previewWidth!==`fluid`);function k(){return t.previewWidth===`fluid`?`width:100%;height:100%`:t.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)`:t.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 ee=_l(),te=z(ee),ne=z(te);Y(ne,21,()=>r,e=>e.id,(e,n)=>{var r=ul(),i=z(r,!0);F(r),H(()=>{X(r,1,`shrink-0 px-2.5 py-0.5 rounded-md text-[10px] font-bold transition-all cursor-pointer ${t.previewTemplate===U(n).id?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(i,U(n).label)}),W(`click`,r,()=>t.onTemplateChange(U(n).id)),K(e,r)}),F(ne);var A=V(ne,4);Y(A,20,()=>[`fluid`,`desktop`,`tablet`,`mobile`],e=>e,(e,n)=>{var r=dl(),i=z(r),a=e=>{fo(e,{class:`w-3 h-3`})},o=e=>{So(e,{class:`w-3 h-3`})},s=e=>{za(e,{class:`w-3 h-3`})};J(i,e=>{n===`mobile`?e(a):n===`tablet`?e(o,1):e(s,-1)}),F(r),H(()=>{Q(r,`title`,n===`fluid`?`Full width`:n===`desktop`?`Desktop (1024px)`:n===`tablet`?`Tablet (768px)`:`Mobile (390px)`),X(r,1,`p-1 rounded-md transition-all cursor-pointer ${t.previewWidth===n?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`)}),W(`click`,r,()=>t.onWidthChange(n)),K(e,r)}),F(A);var j=V(A,2),M=z(j);vo(z(M),{class:`w-3 h-3`}),F(M);var re=V(M,2);Va(z(re),{class:`w-3 h-3`}),F(re);var ie=V(re,2);xa(z(ie),{class:`w-3 h-3`}),F(ie),F(j);var ae=V(j,4),oe=z(ae);oe.value=oe.__value=`normal`;var se=V(oe);se.value=se.__value=`slow`;var N=V(se);N.value=N.__value=`none`,F(ae);var ce;Di(ae);var le=V(ae,2);Za(z(le),{class:`w-3 h-3`}),F(le);var ue=V(le,2);Da(z(ue),{class:`w-3 h-3`}),F(ue),F(te);var de=V(te,2),fe=z(de),pe=e=>{var t=ml(),n=z(t),r=z(n),i=z(r);vo(z(i),{class:`w-2.5 h-2.5`}),Me(),F(i),F(r),ri(V(r,2),()=>U(w),e=>{var t=fl();Zi(t,e=>R(y,e),()=>U(y)),H(()=>Q(t,`srcdoc`,U(E))),zr(`load`,t,()=>{R(S,U(S)+1)}),Lr(t),K(e,t)}),F(n);var a=V(n,2),o=z(a),s=z(o);Va(z(s),{class:`w-2.5 h-2.5`}),Me(),F(s),F(o),ri(V(o,2),()=>U(w),e=>{var t=pl();Zi(t,e=>R(b,e),()=>U(b)),H(()=>Q(t,`srcdoc`,U(D))),zr(`load`,t,()=>{R(C,U(C)+1)}),Lr(t),K(e,t)}),F(a),F(t),K(e,t)},me=e=>{var t=gl();ri(z(t),()=>U(w),e=>{var t=hl();Zi(t,e=>R(v,e),()=>U(v)),H(()=>Q(t,`srcdoc`,U(T))),zr(`load`,t,()=>{R(x,U(x)+1)}),Lr(t),K(e,t)}),F(t),H(e=>{Z(t,e),X(t,1,yi(U(O)?``:`w-full h-full`))},[()=>k()]),K(e,t)};J(fe,e=>{U(_)?e(pe):e(me,-1)}),F(de),F(ee),H(()=>{X(M,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`light`?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),X(re,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`dark`?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),X(ie,1,`p-1 rounded-md transition-all cursor-pointer ${U(_)?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),ce!==(ce=t.previewMotion)&&(ae.value=(ae.__value=t.previewMotion)??``,Ei(ae,t.previewMotion)),X(de,1,`flex-1 min-h-0 flex overflow-auto ${U(O)&&!U(_)?`items-center justify-center bg-[#06060a]`:``}`)}),W(`click`,M,()=>{R(_,!1),t.onThemeChange(`light`)}),W(`click`,re,()=>{R(_,!1),t.onThemeChange(`dark`)}),W(`click`,ie,()=>{R(_,!U(_))}),W(`change`,ae,e=>t.onMotionChange(e.target.value)),W(`click`,le,()=>{R(x,0),R(S,0),R(C,0),R(w,U(w)+1)}),W(`click`,ue,()=>{let e=new Blob([g(t.overrides,t.previewTheme,t.previewMotion,t.previewTemplate,ll)],{type:`text/html`}),n=URL.createObjectURL(e);window.open(n,`_blank`)}),K(e,ee),We()}Br([`click`,`change`]);var yl={macros:[`prose`,`flow-space`,`line-clamp`,`aspect`,`scroll-shadow`,`scrim`,`surface-color`,`content-intrinsic`],colors:[`color`,`contrast`,`palette-mix`,`lumlocker`,`gradient`],typography:[`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`],spacing:[`space`,`section`,`gutter`,`content-gap`,`component-pad`],layout:[`container`,`layout`,`grid`,`breakpoint`,`measure`,`column`,`header-height`,`touch-target`,`bento`,`cluster`,`cover-min`,`equal-min`,`frame`,`ratio-`,`reel`,`safe-`,`sidebar`,`switcher`,`-bg-`],borders:[`radius`,`border-width`,`border-scale`,`border-style`,`divider`],shadows:[`shadow`],motion:[`motion`,`duration`,`easing`,`ease`,`scroll-timeline`],effects:[`filter`,`blur`,`backdrop`,`opacity`,`effect`],misc:[`z-`,`cursor`,`ring`,`focus`,`outline`,`selection`,`icon`,`is-active`,`is-current`,`is-open`,`is-pressed`,`field-required`,`object-fit`,`object-position`,`print-`,`scrollbar`,`size-`]};function bl(e){for(let[t,n]of Object.entries(yl))if(t!==`misc`&&n.some(t=>e.includes(t)))return t;return`misc`}var xl=G(`You have <span class="text-indigo-300 font-bold"> </span>.`,1),Sl=G(`<button class="mt-2 text-[10px] text-rose-400 hover:text-rose-300 transition-colors cursor-pointer">Reset all overrides →</button>`),Cl=G(`<span class="text-[9px] font-bold text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded-full font-mono shrink-0"> </span>`),wl=G(`<button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-white/6 transition-colors cursor-pointer group text-left"><div class="text-slate-500 group-hover:text-slate-300 transition-colors shrink-0"><!></div> <div class="flex-1 min-w-0"><div class="text-[11px] font-semibold text-slate-300 group-hover:text-white transition-colors"> </div> <div class="text-[9px] text-slate-600"> </div></div> <!> <span class="text-slate-700 group-hover:text-slate-500 text-[10px]">→</span></button>`),Tl=G(`<button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-white/6 transition-colors cursor-pointer group text-left"><div class="text-slate-500 group-hover:text-slate-300 transition-colors shrink-0"><!></div> <div class="flex-1 min-w-0"><div class="text-[11px] font-semibold text-slate-300 group-hover:text-white transition-colors"> </div> <div class="text-[9px] text-slate-600"> </div></div> <span class="text-slate-700 group-hover:text-slate-500 text-[10px]">→</span></button>`),El=G(`<p class="text-[10px] text-slate-600">No saved themes yet. Configure tokens, then save.</p>`),Dl=G(`<button class="flex items-start gap-2 p-3 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 hover:border-white/14 transition-all cursor-pointer text-left group"><span class="text-lg leading-none shrink-0"> </span> <div class="min-w-0"><div class="text-[11px] font-semibold text-slate-200 group-hover:text-white transition-colors truncate"> </div> <div class="text-[9px] text-slate-500 mt-0.5 font-mono"> </div></div></button>`),Ol=G(`<div class="grid grid-cols-2 gap-2"></div>`),kl=G(`<div class="p-4 space-y-5 overflow-y-auto flex-1"><div class="rounded-xl bg-gradient-to-br from-indigo-600/20 to-purple-600/10 border border-indigo-500/20 p-4"><div class="flex items-center gap-2 mb-2"><!> <span class="text-[11px] font-bold text-indigo-300 uppercase tracking-widest">SLASHED Studio</span></div> <p class="text-[12px] text-slate-300 leading-relaxed">Configure every SLASHED design token visually. Changes appear live in the preview. <!></p> <!></div> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Token domains</div> <div class="space-y-1"></div></div> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Tools</div> <div class="space-y-1"></div></div> <div><div class="flex items-center justify-between mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Saved themes</div> <button class="text-[10px] text-slate-500 hover:text-indigo-400 transition-colors cursor-pointer">Manage →</button></div> <div class="flex items-center gap-2 mb-2"><input type="text" placeholder="Save current as…" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <button aria-label="Save current theme" class="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-[11px] font-bold bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/30 transition-all cursor-pointer shrink-0 disabled:opacity-40 disabled:cursor-not-allowed"><!></button></div> <!></div></div>`);function Al(e,t){Ue(t,!0);let n=[{id:`colors`,icon:Ga,label:`Colors`,desc:`Brand, semantic & neutral palettes`},{id:`typography`,icon:Eo,label:`Typography`,desc:`Font families & fluid type scale`},{id:`spacing`,icon:to,label:`Spacing`,desc:`Space scale & section rhythm`},{id:`layout`,icon:Io,label:`Layout`,desc:`Containers, grids & primitives`},{id:`borders`,icon:go,label:`Borders`,desc:`Corner radius & border widths`},{id:`shadows`,icon:Na,label:`Shadows`,desc:`Elevation & depth control`},{id:`motion`,icon:Ao,label:`Motion`,desc:`Duration & easing curves`},{id:`effects`,icon:mo,label:`Effects`,desc:`Blur, opacity & scrollbars`},{id:`macros`,icon:pa,label:`Macros`,desc:`Flow, prose, aspect & scrim`},{id:`misc`,icon:qa,label:`Misc`,desc:`Z-index & remaining tokens`}],r=[{id:`themes`,icon:bo,label:`Themes`,desc:`Save & re-apply configurations`},{id:`wcag`,icon:so,label:`WCAG`,desc:`Contrast checker & fixes`},{id:`setup`,icon:Ua,label:`Install`,desc:`Export overrides & setup`},{id:`cheatsheet`,icon:ha,label:`Classes`,desc:`Utility class reference`}],i={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 a(e){let n=i[e];return n?Object.keys(t.overrides).filter(e=>n.some(t=>e.includes(t))).length:0}let o=I(()=>Object.keys(t.overrides).length),s=L(nn(yc())),c=L(``);function l(){U(o)!==0&&(R(s,bc(U(c),t.overrides),!0),R(c,``))}var u=kl(),d=z(u),f=z(d);mo(z(f),{class:`w-4 h-4 text-indigo-400`}),Me(2),F(f);var p=V(f,2),m=V(z(p)),h=e=>{var t=xl(),n=V(B(t)),r=z(n);F(n),Me(),H(()=>q(r,`${U(o)??``} active override${U(o)===1?``:`s`}`)),K(e,t)},g=e=>{K(e,Yr(`Pick any domain below to get started.`))};J(m,e=>{U(o)>0?e(h):e(g,-1)}),F(p);var _=V(p,2),v=e=>{var n=Sl();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(_,e=>{U(o)>0&&e(v)}),F(d);var y=V(d,2),b=V(z(y),2);Y(b,21,()=>n,e=>e.id,(e,n)=>{let r=I(()=>a(U(n).id)),i=I(()=>U(n).icon);var o=wl(),s=z(o);mi(z(s),()=>U(i),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(s);var c=V(s,2),l=z(c),u=z(l,!0);F(l);var d=V(l,2),f=z(d,!0);F(d),F(c);var p=V(c,2),m=e=>{var t=Cl(),n=z(t,!0);F(t),H(()=>q(n,U(r))),K(e,t)};J(p,e=>{U(r)>0&&e(m)}),Me(2),F(o),H(()=>{q(u,U(n).label),q(f,U(n).desc)}),W(`click`,o,()=>t.onSelect(U(n).id)),K(e,o)}),F(b),F(y);var x=V(y,2),S=V(z(x),2);Y(S,21,()=>r,e=>e.id,(e,n)=>{let r=I(()=>U(n).icon);var i=Tl(),a=z(i);mi(z(a),()=>U(r),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(a);var o=V(a,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),Me(2),F(i),H(()=>{q(c,U(n).label),q(u,U(n).desc)}),W(`click`,i,()=>t.onSelect(U(n).id)),K(e,i)}),F(S),F(x);var C=V(x,2),w=z(C),T=V(z(w),2);F(w);var E=V(w,2),D=z(E);zi(D);var O=V(D,2);ro(z(O),{class:`w-3 h-3`}),F(O),F(E);var k=V(E,2),ee=e=>{K(e,El())},te=e=>{var n=Ol();Y(n,21,()=>U(s).slice(0,6),e=>e.id,(e,n)=>{var r=Dl(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),F(r),H(()=>{q(a,U(n).icon),q(c,U(n).name),q(u,U(n).blurb)}),W(`click`,r,()=>t.onApplyTheme(U(n).overrides)),K(e,r)}),F(n),K(e,n)};J(k,e=>{U(s).length===0?e(ee):e(te,-1)}),F(C),F(u),H(()=>O.disabled=U(o)===0),W(`click`,T,()=>t.onSelect(`themes`)),W(`keydown`,D,e=>{e.key===`Enter`&&l()}),qi(D,()=>U(c),e=>R(c,e)),W(`click`,O,l),K(e,u),We()}Br([`click`,`keydown`]);var jl={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:e=>`calc(${e} + var(--sf-is-dark) * 0.17)`,decode:e=>{let t=/^calc\(\s*([\d.e+-]+)/.exec(String(e));return t?parseFloat(t[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}]};function Ml(e,t,n){let r=n*Math.PI/180,i=e,a=t*Math.cos(r),o=t*Math.sin(r),s=i+.3963377774*a+.2158037573*o,c=i-.1055613458*a-.0638541728*o,l=i-.0894841775*a-1.291485548*o,u=s*s*s,d=c*c*c,f=l*l*l,p=4.0767416621*u-3.3077115913*d+.2309699292*f,m=-1.2684380046*u+2.6097574011*d-.3413193965*f,h=-.0041960863*u-.7034186147*d+1.707614701*f,g=e=>e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055;return[Math.max(0,Math.min(255,Math.round(g(p)*255))),Math.max(0,Math.min(255,Math.round(g(m)*255))),Math.max(0,Math.min(255,Math.round(g(h)*255)))]}function Nl(e,t,n){let r=e=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4};return .2126*r(e)+.7152*r(t)+.0722*r(n)}function Pl(e,t){let n=Math.max(e,t),r=Math.min(e,t);return(n+.05)/(r+.05)}function Fl(e){let t=e.match(/oklch\(\s*([\d.%]+)\s+([\d.]+)\s+([\d.]+)/i);if(t){let e=t[1];return{l:e.endsWith(`%`)?parseFloat(e)/100:parseFloat(e),c:parseFloat(t[2]),h:parseFloat(t[3]),valid:!0}}return{l:.5,c:.15,h:200,valid:!1}}function Il(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${Math.round(n)})`}var Ll=G(`<span class="text-[10px] text-slate-500 ml-1 font-mono"> </span>`),Rl=G(`<div class="flex items-center gap-2 w-full"><div class="relative flex-1 h-5 flex items-center"><div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div> <div class="absolute left-0 h-1 bg-indigo-500 rounded-full"></div> <input type="range" class="absolute inset-0 w-full opacity-0 cursor-pointer disabled:cursor-not-allowed h-full"/> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-white/20 pointer-events-none"></div></div> <div class="flex items-center shrink-0"><input type="number" class="w-14 bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500 disabled:opacity-40"/> <!></div></div>`);function zl(e,t){Ue(t,!0);let n=na(t,`disabled`,3,!1);function r(e){return Math.min(t.max,Math.max(t.min,e))}let i=I(()=>(t.value-t.min)/(t.max-t.min)*100);var a=Rl(),o=z(a),s=V(z(o),2),c=V(s,2);zi(c);var l=V(c,2);F(o);var u=V(o,2),d=z(u);zi(d);var f=V(d,2),p=e=>{var n=Ll(),r=z(n,!0);F(n),H(()=>q(r,t.unit)),K(e,n)};J(f,e=>{t.unit&&e(p)}),F(u),F(a),H(()=>{Z(s,`width: ${U(i)}%`),Q(c,`min`,t.min),Q(c,`max`,t.max),Q(c,`step`,t.step),Bi(c,t.value),c.disabled=n(),Z(l,`left: calc(${U(i)}% - 6px)`),Q(d,`min`,t.min),Q(d,`max`,t.max),Q(d,`step`,t.step),Bi(d,t.value),d.disabled=n()}),W(`input`,c,e=>t.onChange(r(parseFloat(e.target.value)))),W(`change`,d,e=>t.onChange(r(parseFloat(e.target.value)||0))),K(e,a),We()}Br([`input`,`change`]);var Bl=G(`<div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0"></div>`),Vl=G(`<button class="px-2 py-1 rounded-lg text-[10px] text-rose-400 hover:bg-rose-500/10 border border-rose-500/20 transition-colors cursor-pointer">Reset</button>`),Hl=G(`<div class="px-3 pb-3 border-t border-white/6 pt-3 space-y-3"><div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Lightness (L)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <div class="h-4 rounded-full mb-1"></div> <!></div> <div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Chroma (C)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <!></div> <div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Hue (H)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <div class="h-4 rounded-full mb-1"></div> <!></div> <div><div class="text-[10px] font-bold text-slate-500 mb-1">Raw value</div> <div class="flex gap-2"><input type="text" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] font-mono text-slate-200 focus:outline-none focus:border-indigo-500" placeholder="oklch(0.6 0.15 264)"/> <!></div></div></div>`),Ul=G(`<div><button class="w-full flex items-center gap-3 px-3 py-2.5 cursor-pointer"><div class="w-8 h-8 rounded-lg border border-white/10 shrink-0 shadow-lg"></div> <div class="flex-1 text-left min-w-0"><div class="text-[11px] font-semibold text-slate-200"> </div> <div class="text-[9px] font-mono text-slate-500"> </div> <div class="text-[9px] font-mono text-slate-600"> </div></div> <!> <div>▾</div></button> <!></div>`);function Wl(e,t){Ue(t,!0);function n(e){let t=/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/.exec(e);return t?{l:parseFloat(t[1]),c:parseFloat(t[2]),h:parseFloat(t[3])}:null}function r(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${n.toFixed(1)})`}function i(e,t,n){let r=n*Math.PI/180,i=t*Math.cos(r),a=t*Math.sin(r),o=e+.3963377774*i+.2158037573*a,s=e-.1055613458*i-.0638541728*a,c=e-.0894841775*i-1.291485548*a,l=o*o*o,u=s*s*s,d=c*c*c,f=4.0767416621*l-3.3077115913*u+.2309699292*d,p=-1.2684380046*l+2.6097574011*u-.3413193965*d,m=-.0041960863*l-.7034186147*u+1.707614701*d,h=e=>e<=0?0:e>=1?255:Math.round(e**(1/2.2)*255);return`rgb(${h(f)},${h(p)},${h(m)})`}let a=I(()=>n(t.value)??{l:.6,c:.15,h:264}),o=L(!1),s=L(``),c=I(()=>i(U(a).l,U(a).c,U(a).h)),l=I(()=>t.tokenName.replace(`--sf-`,``));function u(e,n,i){t.onChange(r(e,n,i))}var d=Ul(),f=z(d),p=z(f);let m;var h=V(p,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=z(v,!0);F(v);var b=V(v,2),x=z(b,!0);F(b),F(h);var S=V(h,2),C=e=>{K(e,Bl())};J(S,e=>{t.overridden&&e(C)});var w=V(S,2);F(f);var T=V(f,2),E=e=>{var n=Hl(),r=z(n),i=z(r),o=V(z(i),2),c=z(o,!0);F(o),F(i);var l=V(i,2);zl(V(l,2),{get value(){return U(a).l},min:0,max:1,step:.005,onChange:e=>u(e,U(a).c,U(a).h)}),F(r);var d=V(r,2),f=z(d),p=V(z(f),2),m=z(p,!0);F(p),F(f),zl(V(f,2),{get value(){return U(a).c},min:0,max:.4,step:.005,onChange:e=>u(U(a).l,e,U(a).h)}),F(d);var h=V(d,2),g=z(h),_=V(z(g),2),v=z(_);F(_),F(g);var y=V(g,2);zl(V(y,2),{get value(){return U(a).h},min:0,max:360,step:1,unit:`°`,onChange:e=>u(U(a).l,U(a).c,e)}),F(h);var b=V(h,2),x=V(z(b),2),S=z(x);zi(S);var C=V(S,2),w=e=>{var n=Vl();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{t.overridden&&e(w)}),F(x),F(b),F(n),H((e,n,r,i,a)=>{q(c,e),Z(l,n),q(m,r),q(v,`${i??``}°`),Z(y,a),Bi(S,U(s)||t.value)},[()=>U(a).l.toFixed(3),()=>`background: linear-gradient(to right, oklch(0 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}), oklch(1 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}))`,()=>U(a).c.toFixed(3),()=>U(a).h.toFixed(1),()=>`background: linear-gradient(to right, oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 0), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 60), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 120), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 180), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 240), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 300), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 360))`]),W(`input`,S,e=>{R(s,e.target.value,!0)}),zr(`blur`,S,()=>{U(s).trim()&&(t.onChange(U(s).trim()),R(s,``))}),W(`keydown`,S,e=>{e.key===`Enter`&&(U(s).trim()&&(t.onChange(U(s).trim()),R(s,``)),e.currentTarget.blur())}),K(e,n)};J(T,e=>{U(o)&&e(E)}),F(d),H(()=>{X(d,1,`rounded-xl border transition-all ${t.overridden?`bg-indigo-500/8 border-indigo-500/20`:`bg-white/4 border-white/8 hover:border-white/12`}`),m=Z(p,``,m,{background:U(c)}),q(_,t.label),q(y,U(l)),q(x,t.value),X(w,1,`text-slate-500 text-[10px] transition-transform ${U(o)?`rotate-180`:``}`)}),W(`click`,f,()=>{R(o,!U(o))}),K(e,d),We()}Br([`click`,`input`,`keydown`]);var Gl=G(`<span class="text-[9px] text-slate-600 font-mono"> </span>`),Kl=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>`),ql=G(`<p class="text-[10px] text-slate-600 mt-1 leading-relaxed"> </p>`),Jl=G(`<div class="group"><div class="flex items-center justify-between mb-1.5"><div class="flex items-center gap-2"><span class="text-[11px] font-semibold text-slate-300"> </span> <!></div> <!></div> <!> <!></div>`);function Yl(e,t){Ue(t,!0);let n=I(()=>t.overrides[t.knob.name]),r=I(()=>U(n)===void 0?t.knob.default:t.knob.decode?t.knob.decode(U(n)):parseFloat(U(n))),i=I(()=>isNaN(U(r))?t.knob.default:U(r)),a=I(()=>t.knob.name in t.overrides);function o(e){let n=t.knob.encode?t.knob.encode(e):String(e);t.onChange(t.knob.name,n)}function s(){t.onChange(t.knob.name,null)}var c=Jl(),l=z(c),u=z(l),d=z(u),f=z(d,!0);F(d);var p=V(d,2),m=e=>{var n=Gl(),r=z(n);F(n),H(()=>q(r,`→ ${t.knob.driving??``} tokens`)),K(e,n)};J(p,e=>{t.knob.driving!==void 0&&e(m)}),F(u);var h=V(u,2),g=e=>{var t=Kl();W(`click`,t,s),K(e,t)};J(h,e=>{U(a)&&e(g)}),F(l);var _=V(l,2);zl(_,{get value(){return U(i)},get min(){return t.knob.min},get max(){return t.knob.max},get step(){return t.knob.step},get unit(){return t.knob.unit},onChange:o});var v=V(_,2),y=e=>{var n=ql(),r=z(n,!0);F(n),H(()=>q(r,t.knob.help)),K(e,n)};J(v,e=>{t.knob.help&&e(y)}),F(c),H(()=>q(f,t.knob.label)),K(e,c),We()}Br([`click`]);var Xl=G(`<span class="text-[11px] font-semibold text-slate-200"> </span>`),Zl=G(`<span></span>`),Ql=G(`<button>&lt;/&gt;</button>`),$l=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>`),eu=G(`<input type="text" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-500 focus:outline-none focus:border-indigo-500"/>`),tu=G(`<p class="text-[9px] font-mono text-slate-700 mt-0.5 leading-none"> </p>`),nu=G(`<!> <!>`,1),ru=G(`<p class="text-[10px] text-slate-600 mt-1 leading-relaxed"> </p>`),iu=G(`<div class="group"><div class="flex items-center justify-between mb-1.5"><!> <div class="flex items-center gap-1.5"><!> <!></div></div> <!> <!></div>`);function $(e,t){Ue(t,!0);let n=L(!1),r=L(``),i=L(!1),a=I(()=>!!t.currentRaw&&/^(var|calc|clamp|min|max|env)\(/.test(t.currentRaw.trim())),o=I(()=>!!(t.rawDefault&&t.onRawSet&&(U(n)||U(a)||U(i))));On(()=>{U(i)||R(r,t.currentRaw??``,!0)});var s=iu(),c=z(s),l=z(c),u=e=>{var n=Xl(),r=z(n,!0);F(n),H(()=>q(r,t.label)),K(e,n)},d=e=>{K(e,Zl())};J(l,e=>{t.label?e(u):e(d,-1)});var f=V(l,2),p=z(f),m=e=>{var t=Ql();H(()=>{Q(t,`title`,U(o)?`Switch to slider`:`Enter raw CSS value`),X(t,1,`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${U(o)?`text-indigo-400`:`opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-400`}`)}),W(`click`,t,()=>{R(n,!U(n))}),K(e,t)};J(p,e=>{t.rawDefault&&t.onRawSet&&e(m)});var h=V(p,2),g=e=>{var n=$l();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(h,e=>{t.overridden&&e(g)}),F(f),F(c);var _=V(c,2),v=e=>{var n=eu();zi(n),H(()=>{Bi(n,U(r)),Q(n,`placeholder`,t.rawDefault)}),zr(`focus`,n,()=>{R(i,!0)}),zr(`blur`,n,()=>{R(i,!1),U(r).trim()||t.onReset()}),W(`input`,n,e=>{R(r,e.target.value,!0);let n=U(r).trim();n&&t.onRawSet&&t.onRawSet(n)}),K(e,n)},y=e=>{var n=nu(),r=B(n);zl(r,{get value(){return t.value},get min(){return t.min},get max(){return t.max},get step(){return t.step},get unit(){return t.unit},get onChange(){return t.onChange}});var i=V(r,2),a=e=>{var n=tu(),r=z(n);F(n),H(()=>q(r,`default: ${t.rawDefault??``}`)),K(e,n)};J(i,e=>{t.rawDefault&&!t.overridden&&e(a)}),K(e,n)};J(_,e=>{U(o)&&t.rawDefault?e(v):e(y,-1)});var b=V(_,2),x=e=>{var n=ru(),r=z(n,!0);F(n),H(()=>q(r,t.help)),K(e,n)};J(b,e=>{t.help&&e(x)}),F(s),K(e,s),We()}Br([`click`,`input`]);var au=G(`<input type="color" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" tabindex="-1"/>`),ou=G(`<input class="flex-1 bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 focus:outline-none"/>`),su=G(`<span class="text-indigo-300"> </span>`),cu=G(`<button class="flex-1 text-left text-[9px] font-mono text-slate-500 hover:text-slate-200 truncate cursor-pointer transition-colors"><!></button>`),lu=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),uu=G(`<div class="flex items-center gap-2"><div class="relative shrink-0 w-7 h-7 rounded border border-white/10 overflow-hidden cursor-pointer"><div class="absolute inset-0"></div> <!></div> <!> <!></div>`);function du(e,t){Ue(t,!0);let n=L(!1),r=L(!1),i=L(null);On(()=>{U(n)&&br().then(()=>U(i)?.focus())});function a(e){let t=e.trim();return t.startsWith(`--`)&&!t.startsWith(`var(`)?`var(${t})`:t}function o(e){Xc.value;let t=a(e);return nl(t)||t||`transparent`}let s=I(()=>o(t.value||`var(${t.token})`)),c=I(()=>t.value.trim().startsWith(`var(`)||t.value.trim().startsWith(`--`));function l(e){if(e.match(/^#([0-9a-fA-F]{6})$/))return e.toLowerCase();let t=e.match(/^#([0-9a-fA-F]{3})$/);if(t)return`#`+t[1].split(``).map(e=>e+e).join(``);let n=e.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);return n?`#`+[n[1],n[2],n[3]].map(e=>parseInt(e).toString(16).padStart(2,`0`)).join(``):`#6366f1`}var u=uu(),d=z(u),f=z(d);let p;var m=V(f,2),h=e=>{var n=au();zi(n),H(e=>Bi(n,e),[()=>l(U(s))]),W(`input`,n,e=>t.onSet(e.target.value)),K(e,n)};J(m,e=>{U(c)||e(h)}),F(d);var g=V(d,2),_=e=>{var o=ou();zi(o),Zi(o,e=>R(i,e),()=>U(i)),H(()=>{Bi(o,t.value),Q(o,`placeholder`,t.placeholder??`default`)}),zr(`blur`,o,e=>{if(U(r)){R(r,!1),R(n,!1);return}let i=a(e.target.value);i?t.onSet(i):t.onReset(),R(n,!1)}),W(`keydown`,o,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&(R(r,!0),R(n,!1))}),K(e,o)},v=e=>{var r=cu(),i=z(r),a=e=>{var n=su(),r=z(n,!0);F(n),H(()=>q(r,t.value)),K(e,n)},o=e=>{var n=Yr();H(()=>q(n,t.placeholder??`default`)),K(e,n)};J(i,e=>{t.isOverridden?e(a):e(o,-1)}),F(r),W(`click`,r,()=>{R(n,!0)}),K(e,r)};J(g,e=>{U(n)?e(_):e(v,-1)});var y=V(g,2),b=e=>{var n=lu();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(y,e=>{t.isOverridden&&e(b)}),F(u),H(()=>p=Z(f,``,p,{background:U(s)})),K(e,u),We()}Br([`input`,`keydown`,`click`]);var fu=(e,t=f)=>{var n=pu(),r=z(n,!0);F(n),H(()=>q(r,t())),K(e,n)},pu=G(`<span aria-hidden="true" class="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-1 z-20 whitespace-nowrap rounded bg-slate-900 border border-white/10 px-1.5 py-0.5 text-[8px] font-mono text-slate-200 opacity-0 group-hover:opacity-100 transition-opacity"> </span>`),mu=G(`<div class="rounded-md border border-white/10 px-1 py-1.5 flex flex-col items-center justify-center gap-0.5 min-h-[34px]"><span class="text-[11px] font-bold leading-none">Aa</span> <span class="text-[7px] leading-none opacity-90"> </span></div>`),hu=G(`<div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none uppercase"> </span> <div class="grid grid-cols-5 gap-1 flex-1"></div></div>`),gu=G(`<div class="space-y-1"><div class="text-[8px] font-semibold text-slate-600 uppercase tracking-widest"> </div> <!></div>`),_u=G(`<button> </button>`),vu=G(`<div class="group relative w-5 h-3 rounded-t border-x border-t border-white/10"><!></div>`),yu=G(`<div class="group relative w-5 h-3 rounded-b border-x border-b border-white/10"><!></div>`),bu=G(`<p class="text-[8px] text-slate-600 leading-snug pl-1">Absolute lightness ramp — each step pins L and inherits chroma + hue from the source. Not the brand mix curve.
                 Light and dark use the <em>same</em> 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.</p>`),Fl=G(`<div class="mt-1 pl-1 space-y-px"><div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none">L</span> <div class="flex gap-0.5"></div></div> <div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none">D</span> <div class="flex gap-0.5"></div></div></div> <!>`,1),Il=G(`<div class="flex items-center gap-1.5 text-[9px] text-slate-600 pl-1"><span class="w-3.5 h-3.5 rounded border border-white/10 shrink-0"></span> </div>`),Ll=G(`<div class="space-y-1"><div class="flex items-center justify-between"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest"> </div> <!></div> <!> <!> <!></div>`),Rl=G(`<p class="text-[10px] text-slate-600 leading-relaxed">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.</p>`),xu=G(`<div class="mt-1 pl-1 space-y-px"><div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none">L</span> <div class="flex gap-0.5"></div></div> <div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none">D</span> <div class="flex gap-0.5"></div></div></div> <!>`,1),Su=G(`<div class="flex items-center gap-1.5 text-[9px] text-slate-600 pl-1"><span class="w-3.5 h-3.5 rounded border border-white/10 shrink-0"></span> </div>`),Cu=G(`<div class="space-y-1"><div class="flex items-center justify-between"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest"> </div> <!></div> <!> <!> <!></div>`),wu=G(`<p class="text-[10px] text-slate-600 leading-relaxed">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.</p> <div class="space-y-3"></div>`,1),zl=G(`<div class="flex items-center gap-1"><span class="text-[9px] text-slate-500 w-16 shrink-0"> <span class="text-slate-600"> </span></span> <span class="flex-1 h-5 rounded border border-white/10"></span> <span class="text-slate-600 text-[10px] px-1">→</span> <span class="flex-1 h-5 rounded border border-white/10"></span></div>`),Bl=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Pins brand colors (primary, secondary, tertiary, action) to a fixed OKLCH
-        lightness — useful for always-stable sections. Enable on canvas to preview.</p> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"><div class="flex items-center text-[8px] font-mono text-slate-600 uppercase tracking-widest"><span class="w-16 shrink-0">Color</span> <span class="flex-1 text-center">Current</span> <span class="flex-1 text-center">Locked</span></div> <!></div> <button> </button>`,1),Vl=G(`<span class="w-9 text-center text-[6px] font-mono text-slate-600 uppercase tracking-wide"> </span>`),Hl=G(`<div class="group relative w-9 h-4 rounded-sm border border-white/10"><!></div>`),Ul=G(`<div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none"> </span> <div class="flex gap-0.5"></div></div>`),Wl=G(`<div class="space-y-1"><div class="flex items-center justify-between"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest"> </div> <!></div> <!> <!> <div class="mt-1 pl-1 space-y-px"><div class="flex items-center gap-1"><span class="w-2.5 shrink-0"></span> <div class="flex gap-0.5"></div></div> <!></div> <p class="text-[8px] text-slate-600 leading-snug pl-1">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.</p></div>`),Gl=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Dark mode is auto-derived from each light source by default. Switch to
-        Manual dark to set a bespoke dark value.</p> <div class="space-y-3"></div>`,1),Kl=G(`<div class="flex items-center gap-2"><span class="w-6 h-6 rounded border border-white/10 shrink-0 flex items-center justify-center text-[10px] font-bold">Aa</span> <span class="text-[9px] text-slate-500 flex-1 truncate"> </span> <span class="text-[10px] font-mono font-bold text-slate-200"> </span> <span> </span></div>`),ql=G(`<button class="w-full mt-1 py-1.5 rounded-lg bg-indigo-600/15 border border-indigo-500/30 text-indigo-300 text-[10px] font-bold cursor-pointer hover:bg-indigo-600/25 transition-all">Open contrast tool →</button>`),Jl=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Controls whether text on brand-coloured surfaces is light or dark.</p> <!> <div class="rounded-lg bg-white/4 border border-white/8 p-2.5 space-y-2"><!> <!></div> <!>`,1),Yl=G(`<button><span class="text-[11px] font-bold"> </span> <span class="text-[9px] text-slate-500 text-center"> </span></button>`),Xl=G(`<div class="flex-1 flex flex-col items-center gap-0.5 h-full justify-end"><span class="text-[7px] font-mono text-slate-600"> </span> <div class="group relative w-full rounded-sm border-x border-t border-white/10"><!></div> <span class="text-[7px] font-mono text-slate-600"> </span></div>`),Zl=G(`<div class="group relative flex-1 h-4 rounded-sm border border-white/10"><!></div>`),Ql=G(`<div class="flex items-center gap-1.5"><span class="text-[7px] font-mono text-slate-600 w-12 shrink-0 truncate"> </span> <div class="flex gap-0.5 flex-1"></div></div>`),$l=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Controls how much color is mixed into each palette step. Step 500 is always the source color.</p> <div class="grid grid-cols-3 gap-1.5"></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Tints (50–400) — mixed toward surface</div> <div class="space-y-2"></div></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Shades (600–950) — mixed toward text</div> <div class="space-y-2"></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><div class="flex items-center justify-between mb-2"><span class="text-[9px] text-slate-600">Palette &amp; curve preview</span> <div class="flex bg-white/5 border border-white/8 rounded p-0.5 gap-0.5"></div></div> <div class="flex items-end gap-0.5 h-20"></div> <p class="text-[8px] text-slate-600 mt-2">Bar height = mix amount · fill = the resolved primary palette swatch at each step</p></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"><div class="flex items-center justify-between mb-1"><span class="text-[9px] text-slate-600">Mini palettes — all brand colors</span> <div class="flex bg-white/5 border border-white/8 rounded p-0.5 gap-0.5"></div></div> <!></div>`,1),eu=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),tu=G(`<div class="flex items-center gap-1"><span class="text-[8px] text-slate-500 w-10 shrink-0">Dir</span> <!></div>`),nu=G(`<div class="flex items-center gap-2"><span class="text-[8px] text-slate-500 w-10 shrink-0">Angle</span> <input type="range" min="0" max="360" step="1" class="flex-1 accent-indigo-500"/> <span class="text-[9px] font-mono text-slate-400 w-9 text-right shrink-0"> </span></div>`),ru=G(`<div class="rounded-lg border border-white/8 bg-white/3 overflow-hidden"><div class="h-9 w-full"></div> <div class="px-2 py-1.5 space-y-1.5"><div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-300 flex-1"> </span> <!></div> <!> <div class="flex items-center gap-1"><span class="text-[8px] text-slate-500 w-10 shrink-0">Stops</span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-0.5 text-[8px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500"/> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-0.5 text-[8px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500"/></div> <div class="text-[8px] font-mono text-slate-600 leading-snug break-all"><span class="text-slate-500">default:</span> </div> <input type="text" placeholder="raw override (auto-derived if blank)" class="w-full bg-white/5 border border-white/10 rounded px-1.5 py-0.5 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/></div></div>`),iu=G(`<div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest pt-1"> </div> <div class="space-y-2"></div>`,1),au=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Auto-derived from your brand colors. Use the angle/direction and stop
-        controls, or edit the raw value for full control.</p> <!>`,1),ou=G(`<p class="text-[9px] text-slate-600 leading-relaxed">--sf-color-scheme — sets the CSS <span class="font-mono text-slate-400">color-scheme</span> property on the root, controlling browser UI (scrollbars, inputs) and default background.</p> <div class="flex gap-1"></div>`,1),su=G(`<div><div class="text-[10px] font-semibold text-slate-400 mb-1"> </div> <!></div>`),cu=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Direct color overrides for tokens the framework auto-derives. Use for edge cases.</p> <div class="space-y-2"></div>`,1),lu=G(`<div class="p-4 space-y-6"><section class="space-y-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Semantic colors</div> <p class="text-[9px] text-slate-600 leading-relaxed">Live preview — every semantic role on its on-color text, shown in light and dark. Resolved from the canvas, updates as you edit.</p> <div class="space-y-2.5"></div></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Brand color sources</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">LumLocker</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Status colors</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text contrast</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Shade / tint curve</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Gradients</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Color scheme</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Semantic overrides</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="rounded-lg bg-white/3 border border-white/6 p-3"><p class="text-[10px] text-slate-500 leading-relaxed"><span class="text-slate-400 font-semibold">All tokens tab</span> — override individual color steps (50–950), semantic aliases, or surface tokens directly.</p></div></div>`);function uu(e,t){We(t,!0);function n(e,t){return nc.value,cc(e)||t}function r(e,t){nc.value;let n=pc(e);return n&&n!==`none`?n:t}function i(e,t,n){return nc.value,uc(e,t)||n}let a=[{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))`}],o=[{key:`primary`,label:`Primary`},{key:`secondary`,label:`Secondary`},{key:`tertiary`,label:`Tertiary`},{key:`action`,label:`Action`}],s=[{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`}],c=[{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`}],l=[{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}],u=[{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(l.map(e=>[e.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%`}}],d=[{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)`}],f=[`50`,`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`,`950`],p=[`primary`,`secondary`,`tertiary`,`action`,`neutral`],m={50:.97,100:.94,200:.88,300:.78,400:.65,500:.5,600:.37,700:.27,800:.17,900:.11,950:.06},h=[...p,`base`],_=[{label:`Base`,expr:e=>`var(--sf-color-${e})`},{label:`Subtle`,expr:e=>`var(--sf-color-${e}-subtle)`},{label:`Muted`,expr:e=>`var(--sf-color-${e}-muted)`},{label:`Strong`,expr:e=>`var(--sf-color-${e}-strong)`}],v=[...s,...c],y=[{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`}]}],b=(Gc.colors??[]).filter(e=>e.name===`--sf-contrast-bias`||e.name===`--sf-contrast-threshold`),x=(Gc.colors??[]).filter(e=>e.name===`--sf-focus-ring-width`),S=L(!1),C=L(!1),w=L(!1),T=L(!1),E=L(!1),D=L(!1),O=L(!1),k=L(!1),A=L(`light`),ee=nn({}),te=I(()=>parseFloat(t.overrides[`--sf-lumlocker`]??`0.65`));function j(e){let t=e.match(/^linear-gradient\(\s*in\s+(\S+)\s+(to\s+\w+|\d+deg)\s*,(.+)\)$/i);if(!t)return null;let n=t[1],r=t[2].trim(),i=r.startsWith(`to `),a=i?r.slice(3).trim():`right`,o=i?0:parseInt(r),s=0,c=0,l=[],u=t[3];for(let e=0;e<u.length;e++)u[e]===`(`?s++:u[e]===`)`?s--:u[e]===`,`&&s===0&&(l.push(u.slice(c,e).trim()),c=e+1);return l.push(u.slice(c).trim()),l.length<2?null:{space:n,kind:i?`dir`:`angle`,angle:o,dir:a,stop1:l[0],stop2:l[1]}}function M(e){let n=t.overrides[e.name];return(n?j(n):null)??{space:e.space,kind:e.kind,angle:e.angle,dir:e.dir,stop1:e.stop1,stop2:e.stop2}}function ne(e){return ee[e.name]??M(e)}function re(e){let t=ne(e),n=t.kind===`dir`?`to ${t.dir}`:`${t.angle}deg`;return`linear-gradient(in ${t.space} ${n}, ${t.stop1}, ${t.stop2})`}function ie(e,n,r){ee[e.name]||(ee[e.name]=M(e)),ee[e.name][n]=r,t.onSet(e.name,re(e))}function ae(e,n){let r=`--sf-color-${e}-source-${n}`,i=t.overrides[r]??s.find(e=>e.name===r)?.default??``;return i?`oklch(from ${i} ${U(te)} c h)`:``}let oe=L(nn(new Set(v.filter(e=>e.side===`light`&&!((v.find(t=>t.colorKey===e.colorKey&&t.side===`dark`)?.name??``)in t.overrides)).map(e=>e.colorKey)))),se=I(()=>{let e={};for(let n of t.tokens)v.some(e=>e.name===n.name)&&(e[n.name]=n);return e});function N(e){return e?t.overrides[e.name]??U(se)[e.name]?.value??e.default:``}function ce(e){return v.find(t=>t.name===e)}let le=I(()=>u.find(e=>Object.entries(e.patch).every(([e,n])=>n===null?!(e in t.overrides):t.overrides[e]===n)));function ue(e){let n=t.overrides[e.name];return n?parseFloat(n):e.default}let de=[];for(let e=0;e<s.length;e+=2)de.push([s[e],s[e+1]]);let fe=[];for(let e=0;e<c.length;e+=2)fe.push([c[e],c[e+1]]);function pe(e,t){let{l:n,c:r,h:i,valid:a}=Yc(e);if(!a)return e;let o,s;return t===`base`?(o=Math.max(.16,Math.min(1.18-n,.24)),s=r*.5):(o=Math.max(.65,Math.min(.95-n*.5,.88)),s=r*.9),Xc(o,s,i)}function me(){return N(ce(`--sf-color-base-source-light`))}function he(){let e=ce(`--sf-color-base-source-dark`);return e&&(t.overrides[e.name]??U(se)[e.name]?.value)!==void 0?N(e):pe(N(ce(`--sf-color-base-source-light`)),`base`)}function ge(){let{l:e,c:t,h:n,valid:r}=Yc(N(ce(`--sf-color-neutral-source-light`)));return r?Xc(Math.max(.05,Math.min(e-.38,.3)),t*.8,n):`oklch(0.12 0.02 260)`}function _e(){let{l:e,c:t,h:n,valid:r}=Yc(N(ce(`--sf-color-neutral-source-dark`)));return r?Xc(Math.min(1,Math.max(e+.22,.88)),t*.8,n):`oklch(0.92 0.02 260)`}function ve(e,t,n,r){if(nc.value,t===`500`)return cc(e)||e;let i=parseInt(t)<500,a=l.find(e=>e.label===t);if(!a)return e;let o=`color-mix(in oklab, ${e} ${ue(a)}%, ${i?n:r})`;return cc(o)||o}function ye(e,t){nc.value;let n=m[t];if(n===void 0)return e;let r=`oklch(from ${e} ${n} c h)`;return cc(r)||r}function be(e,t,n,r,i){return e===`base`?ye(t,n):ve(t,n,r,i)}function xe(e,n,r){t.onSet(e.name,r)}function Se(e,n,r){let i=!!(n&&n.name in t.overrides);if(U(oe).has(e)&&!i){let i=N(v.find(e=>e.name===r));n&&t.onSet(n.name,pe(i,e)),R(oe,new Set([...U(oe)].filter(t=>t!==e)),!0)}else n&&t.onBulkChange({[n.name]:null}),R(oe,new Set([...U(oe),e]),!0)}let Ce=[{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 we(e,t){nc.value;let n=fc(e),r=fc(t);return!n||!r?null:Jc(qc(...n),qc(...r))}var Te=lu(),Ee=z(Te),De=V(z(Ee),4);Y(De,21,()=>y,e=>e.heading,(e,t)=>{var n=Al(),r=z(n),a=z(r,!0);F(r),Y(V(r,2),16,()=>[`light`,`dark`],e=>e,(e,n)=>{var r=kl(),a=z(r),o=z(a,!0);F(a);var s=V(a,2);Y(s,21,()=>U(t).items,e=>e.name,(e,t)=>{let r=I(()=>i(`var(${U(t).name})`,n,`transparent`)),a=I(()=>i(`var(${U(t).fg})`,n,`currentColor`));var o=Ol(),s=V(z(o),2),c=z(s,!0);F(s),F(o),H(()=>{Z(o,`background:${U(r)}; color:${U(a)}`),Q(o,`title`,`${U(t).name} (${n}) — ${U(r)}`),q(c,U(t).label)}),K(e,o)}),F(s),F(r),H(()=>q(o,n===`light`?`L`:`D`)),K(e,r)}),F(n),H(()=>q(a,U(t).heading)),K(e,n)}),F(De),F(Ee);var Oe=V(Ee,4),P=z(Oe),ke=V(z(P),2),Ae=z(ke,!0);F(ke),F(P);var je=V(P,2),Me=e=>{var r=Rl(),i=V(B(r),2);Y(i,21,()=>de,([e,t])=>e.name,(e,r)=>{var i=I(()=>g(U(r),2));let a=()=>U(i)[0],o=()=>U(i)[1],s=I(()=>!!(o()&&o().name in t.overrides)),c=I(()=>U(oe).has(a().colorKey)&&!U(s));var l=Ll(),u=z(l),d=z(u),p=z(d,!0);F(d);var m=V(d,2),_=e=>{var t=jl(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(c)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-300`:`border-white/10 text-slate-500 hover:text-slate-300`}`),q(n,U(c)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(a().colorKey,o(),a().name)),K(e,t)};J(m,e=>{o()&&e(_)}),F(u);var v=V(u,2);{let e=I(()=>`${a().label} (light)`),n=I(()=>N(a())),r=I(()=>a().name in t.overrides);il(v,{get label(){return U(e)},get tokenName(){return a().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>xe(a(),o(),e),onReset:()=>t.onReset(a().name)})}var y=V(v,2),b=e=>{let t=I(()=>N(a())),n=I(()=>U(c)?pe(U(t),a().colorKey):o()?N(o()):U(t)),r=I(me),i=I(he),s=I(ge),l=I(_e);var u=Fl(),d=B(u),p=z(d),m=V(z(p),2);Y(m,20,()=>f,e=>e,(e,n)=>{let i=I(()=>be(a().colorKey,U(t),n,U(r),U(s)));var o=Ml();let c;El(z(o),()=>`${a().colorKey}-${n}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${n} (light) — ${U(i)}`),c=Z(o,``,c,{background:U(i)})}),K(e,o)}),F(m),F(p);var h=V(p,2),g=V(z(h),2);Y(g,20,()=>f,e=>e,(e,t)=>{let r=I(()=>be(a().colorKey,U(n),t,U(i),U(l)));var o=Nl();let s;El(z(o),()=>`${a().colorKey}-${t}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${t} (dark) — ${U(r)}`),s=Z(o,``,s,{background:U(r)})}),K(e,o)}),F(g),F(h),F(d);var _=V(d,2),v=e=>{K(e,Pl())};J(_,e=>{a().colorKey===`base`&&e(v)}),K(e,u)},x=I(()=>h.includes(a().colorKey));J(y,e=>{U(x)&&e(b)});var S=V(y,2),C=e=>{{let n=I(()=>`${o().label} (dark mode)`),r=I(()=>N(o())),i=I(()=>o().name in t.overrides);il(e,{get label(){return U(n)},get tokenName(){return o().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}},w=e=>{let t=I(()=>pe(N(a()),a().colorKey));var r=Il(),i=z(r);let o;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),o=Z(i,``,o,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(S,e=>{o()&&!U(c)?e(C):o()&&U(c)&&e(w,1)}),F(l),H(()=>q(p,a().label)),K(e,l)}),F(i),K(e,r)};J(je,e=>{U(S)&&e(Me)}),F(Oe);var Pe=V(Oe,4),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var r=Bl(),a=V(B(r),2);{let e=I(()=>`--sf-lumlocker`in t.overrides);$(a,{label:`LumLocker lightness (L)`,get value(){return U(te)},min:0,max:1,step:.01,help:`--sf-lumlocker — fixed OKLCH L applied to lockable brand colors under [data-lumlocker]`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-lumlocker`,String(e)),onReset:()=>t.onReset(`--sf-lumlocker`)})}var s=V(a,2);Y(V(z(s),2),17,()=>o,e=>e.key,(e,t)=>{var r=$r();Y(B(r),16,()=>[`light`,`dark`],e=>e,(e,r)=>{let a=I(()=>i(`var(--sf-color-${U(t).key}-source-${r})`,r,``)),o=I(()=>ae(U(t).key,r));var s=zl(),c=z(s),l=z(c),u=V(l),d=z(u,!0);F(u),F(c);var f=V(c,2),p=V(f,4);F(s),H(e=>{q(l,`${U(t).label??``} `),q(d,r===`light`?`L`:`D`),Z(f,`background:${U(a)||`var(--sf-color-${U(t).key})`}`),Z(p,e),Q(p,`title`,U(o))},[()=>`background:${n(U(o),U(o))}`]),K(e,s)}),K(e,r)}),F(s);var c=V(s,2),l=z(c,!0);F(c),H(()=>{X(c,1,`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${mc.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`}`),q(l,mc.value?`✓ LumLocker active on canvas — click to disable`:`Preview LumLocker on live canvas`)}),W(`click`,c,()=>{mc.value=!mc.value}),K(e,r)};J(Re,e=>{U(k)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ue=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var r=Gl(),a=V(B(r),2);Y(a,21,()=>fe,([e,t])=>e.name,(e,r)=>{var a=I(()=>g(U(r),2));let o=()=>U(a)[0],s=()=>U(a)[1],c=I(()=>!!(s()&&s().name in t.overrides)),l=I(()=>U(oe).has(o().colorKey)&&!U(c));var u=Wl(),d=z(u),f=z(d),p=z(f,!0);F(f);var m=V(f,2),h=e=>{var t=jl(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(l)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-300`:`border-white/10 text-slate-500 hover:text-slate-300`}`),q(n,U(l)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(o().colorKey,s(),o().name)),K(e,t)};J(m,e=>{s()&&e(h)}),F(d);var v=V(d,2);{let e=I(()=>`${o().label} light`),n=I(()=>N(o())),r=I(()=>o().name in t.overrides);il(v,{get label(){return U(e)},get tokenName(){return o().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}var y=V(v,2),b=e=>{{let n=I(()=>`${s().label} dark`),r=I(()=>N(s())),i=I(()=>s().name in t.overrides);il(e,{get label(){return U(n)},get tokenName(){return s().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(s().name,e),onReset:()=>t.onReset(s().name)})}},x=e=>{let t=I(()=>pe(N(o()),o().colorKey));var r=Il(),i=z(r);let a;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),a=Z(i,``,a,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(y,e=>{s()&&!U(l)?e(b):s()&&U(l)&&e(x,1)});var S=V(y,2),C=z(S),w=V(z(C),2);Y(w,21,()=>_,e=>e.label,(e,t)=>{var n=Vl(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(w),F(C),Y(V(C,2),16,()=>[[`L`,`light`],[`D`,`dark`]],([e,t])=>e,(e,t)=>{var n=I(()=>g(t,2));let r=()=>U(n)[0],a=()=>U(n)[1];var s=Ul(),c=z(s),l=z(c,!0);F(c);var u=V(c,2);Y(u,21,()=>_,e=>e.label,(e,t)=>{let n=I(()=>i(U(t).expr(o().colorKey),a(),``));var r=Hl();let s;var c=z(r);{let e=I(()=>`${o().colorKey}-${U(t).label.toLowerCase()}`);El(c,()=>U(e))}F(r),H(e=>{Q(r,`title`,e),s=Z(r,``,s,{background:U(n)})},[()=>`${o().colorKey}-${U(t).label.toLowerCase()} (${a()}) — ${U(n)}`]),K(e,r)}),F(u),F(s),H(()=>q(l,r())),K(e,s)}),F(S),Ne(2),F(u),H(()=>q(p,o().label)),K(e,u)}),F(a),K(e,r)};J(Ke,e=>{U(T)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var r=Jl(),i=V(B(r),2);Y(i,17,()=>b,e=>e.name,(e,n)=>{ll(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})});var a=V(i,2),o=z(a);Y(o,17,()=>Ce,e=>e.label,(e,t)=>{let r=I(()=>we(U(t).fg,U(t).bg));var i=$r(),a=B(i),o=e=>{var i=Kl(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H((e,n)=>{Z(a,e),q(s,U(t).label),q(l,`${n??``}:1`),X(u,1,`text-[9px] font-bold px-1.5 py-0.5 rounded ${U(r)>=4.5?`bg-emerald-500/20 text-emerald-300`:`bg-amber-500/20 text-amber-300`}`),q(d,U(r)>=4.5?`AA`:U(r)>=3?`AA-L`:`✗`)},[()=>`background:${n(U(t).bg,U(t).bg)}; color:${n(U(t).fg,U(t).fg)}`,()=>U(r).toFixed(2)]),K(e,i)};J(a,e=>{U(r)!==null&&e(o)}),K(e,i)});var s=V(o,2),c=e=>{var n=ql();W(`click`,n,()=>t.onSelectDomain?.(`wcag`)),K(e,n)};J(s,e=>{t.onSelectDomain&&e(c)}),F(a),Y(V(a,2),17,()=>x,e=>e.name,(e,n)=>{ll(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),K(e,r)};J(Qe,e=>{U(C)&&e($e)}),F(Je);var et=V(Je,4),tt=z(et),nt=V(z(tt),2),rt=z(nt,!0);F(nt),F(tt);var it=V(tt,2),at=e=>{let n=I(()=>t.overrides[`--sf-color-primary-source-light`]??s.find(e=>e.name===`--sf-color-primary-source-light`)?.default??`oklch(0.47 0.27 264)`),r=I(()=>t.overrides[`--sf-color-primary-source-dark`]),i=I(()=>U(r)??(!U(oe).has(`primary`)||U(r)?s.find(e=>e.name===`--sf-color-primary-source-dark`)?.default??pe(U(n),`primary`):pe(U(n),`primary`))),a=I(()=>U(A)===`light`?U(n):U(i)),o=I(()=>U(A)===`light`?me():he()),c=I(()=>U(A)===`light`?ge():_e()),d=I(()=>U(A)===`light`?me():he()),m=I(()=>U(A)===`light`?ge():_e());var h=$l(),g=V(B(h),2);Y(g,21,()=>u,e=>e.label,(e,n)=>{var r=Yl(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o,!0);F(o),F(r),H(()=>{X(r,1,`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${U(le)?.label===U(n).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`}`),q(a,U(n).label),q(s,U(n).desc)}),W(`click`,r,()=>t.onBulkChange(U(n).patch)),K(e,r)}),F(g);var _=V(g,2),v=V(z(_),2);Y(v,21,()=>l.filter(e=>e.step===`tint`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(v),F(_);var y=V(_,2),b=V(z(y),2);Y(b,21,()=>l.filter(e=>e.step===`shade`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(b),F(y);var x=V(y,2),S=z(x),C=V(z(S),2);Y(C,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=jl(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(A)===t?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(A,t,!0)}),K(e,n)}),F(C),F(S);var w=V(S,2);Y(w,21,()=>l,e=>e.name,(e,t)=>{let n=I(()=>ue(U(t))),r=I(()=>U(t).label),i=I(()=>ve(U(a),U(r),U(o),U(c)));var s=Xl(),l=z(s),u=z(l,!0);F(l);var d=V(l,2);El(z(d),()=>`primary-${U(r)}`),F(d);var f=V(d,2),p=z(f,!0);F(f),F(s),H((e,t,n)=>{q(u,e),Z(d,t),Q(d,`title`,n),q(p,U(r))},[()=>Math.round(U(n)),()=>`background:${U(i)}; height: ${Math.max(U(n)/100*56,6)}px`,()=>`primary-${U(r)} (${U(A)}) · mix ${Math.round(U(n))}%`]),K(e,s)}),F(w),Ne(2),F(x);var T=V(x,2),E=z(T),D=V(z(E),2);Y(D,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=jl(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(A)===t?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(A,t,!0)}),K(e,n)}),F(D),F(E),Y(V(E,2),16,()=>p,e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-color-${n}-source-light`]??s.find(e=>e.name===`--sf-color-${n}-source-light`)?.default??`oklch(0.5 0.15 264)`),i=I(()=>`--sf-color-${n}-source-dark`),a=I(()=>t.overrides[U(i)]??(U(oe).has(n)&&!t.overrides[U(i)]?pe(U(r),n):s.find(e=>e.name===U(i))?.default??pe(U(r),n))),o=I(()=>U(A)===`light`?U(r):U(a));var c=Ql(),l=z(c),u=z(l,!0);F(l);var p=V(l,2);Y(p,20,()=>f,e=>e,(e,t)=>{let r=I(()=>ve(U(o),t,U(d),U(m)));var i=Zl();El(z(i),()=>`${n}-${t}`),F(i),H(()=>{Z(i,`background:${U(r)}`),Q(i,`title`,`${n}-${t} (${U(A)})`)}),K(e,i)}),F(p),F(c),H(()=>q(u,n)),K(e,c)}),F(T),K(e,h)};J(it,e=>{U(w)&&e(at)}),F(et);var ot=V(et,4),st=z(ot),ct=V(z(st),2),lt=z(ct,!0);F(ct),F(st);var ut=V(st,2),dt=e=>{var n=au();Y(V(B(n),2),16,()=>[`brand`,`fade`],e=>e,(e,n)=>{var i=iu(),o=B(i),s=z(o,!0);F(o);var c=V(o,2);Y(c,21,()=>a.filter(e=>e.group===n),e=>e.name,(e,n)=>{let i=I(()=>`var(${U(n).name})`),a=I(()=>ne(U(n)));var o=ru(),s=z(o),c=V(s,2),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{var r=eu();W(`click`,r,()=>{delete ee[U(n).name],t.onReset(U(n).name)}),K(e,r)};J(f,e=>{U(n).name in t.overrides&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=tu();Y(V(z(t),2),16,()=>[`top`,`right`,`bottom`,`left`],e=>e,(e,t)=>{var r=jl(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-0.5 rounded text-[9px] border transition-all cursor-pointer capitalize ${U(a).dir===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5`}`),q(i,t)}),W(`click`,r,()=>ie(U(n),`dir`,t)),K(e,r)}),F(t),K(e,t)},g=e=>{var t=nu(),r=V(z(t),2);Hi(r);var i=V(r,2),o=z(i);F(i),F(t),H(()=>{Ui(r,U(a).angle),q(o,`${U(a).angle??``}°`)}),W(`input`,r,e=>ie(U(n),`angle`,parseInt(e.target.value))),K(e,t)};J(m,e=>{U(n).kind===`dir`&&U(n).group!==`fade`?e(h):U(n).kind!==`dir`&&e(g,1)});var _=V(m,2),v=V(z(_),2);Hi(v);var y=V(v,2);Hi(y),F(_);var b=V(_,2),x=V(z(b));F(b);var S=V(b,2);Hi(S),F(c),F(o),H(e=>{Z(s,e),q(d,U(n).label),Ui(v,U(a).stop1),Ui(y,U(a).stop2),q(x,` ${U(n).formula??``}`),Ui(S,t.overrides[U(n).name]??``)},[()=>`background:${r(U(i),U(i))}`]),W(`change`,v,e=>ie(U(n),`stop1`,e.target.value.trim())),W(`change`,y,e=>ie(U(n),`stop2`,e.target.value.trim())),W(`change`,S,e=>{let r=e.target.value.trim();delete ee[U(n).name],r?t.onSet(U(n).name,r):t.onReset(U(n).name)}),K(e,o)}),F(c),H(()=>q(s,n===`brand`?`Brand & surface`:`Edge fades`)),K(e,i)}),K(e,n)};J(ut,e=>{U(O)&&e(dt)}),F(ot);var ft=V(ot,4),pt=z(ft),mt=V(z(pt),2),ht=z(mt,!0);F(mt),F(pt);var gt=V(pt,2),_t=e=>{var n=ou(),r=V(B(n),2);Y(r,20,()=>[[`light dark`,`light dark (default)`],[`light`,`Light only`],[`dark`,`Dark only`]],([e,t])=>e,(e,n)=>{var r=I(()=>g(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-color-scheme`]??`light dark`);var s=jl(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`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`}`),q(c,a())}),W(`click`,s,()=>i()===`light dark`?t.onReset(`--sf-color-scheme`):t.onSet(`--sf-color-scheme`,i())),K(e,s)}),F(r),K(e,n)};J(gt,e=>{U(D)&&e(_t)}),F(ft);var vt=V(ft,4),yt=z(vt),bt=V(z(yt),2),xt=z(bt,!0);F(bt),F(yt);var St=V(yt,2),Ct=e=>{var r=cu(),i=V(B(r),2);Y(i,21,()=>d,e=>e.name,(e,r)=>{let i=I(()=>n(`var(${U(r).name})`,``));var a=su(),o=z(a),s=z(o,!0);F(o);var c=V(o,2);{let e=I(()=>t.overrides[U(r).name]??``),n=I(()=>U(i)?`auto-derived · ${U(i)}`:`auto-derived`),a=I(()=>U(r).name in t.overrides);Tl(c,{get token(){return U(r).name},get value(){return U(e)},get placeholder(){return U(n)},get isOverridden(){return U(a)},onSet:e=>t.onSet(U(r).name,e),onReset:()=>t.onReset(U(r).name)})}F(a),H(()=>q(s,U(r).label)),K(e,a)}),F(i),K(e,r)};J(St,e=>{U(E)&&e(Ct)}),F(vt),Ne(2),F(Te),H(()=>{Q(P,`aria-expanded`,U(S)),q(Ae,U(S)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(k)),q(Le,U(k)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(T)),q(Ue,U(T)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(C)),q(Ze,U(C)?`▲`:`▼`),Q(tt,`aria-expanded`,U(w)),q(rt,U(w)?`▲`:`▼`),Q(st,`aria-expanded`,U(O)),q(lt,U(O)?`▲`:`▼`),Q(pt,`aria-expanded`,U(D)),q(ht,U(D)?`▲`:`▼`),Q(yt,`aria-expanded`,U(E)),q(xt,U(E)?`▲`:`▼`)}),W(`click`,P,()=>{R(S,!U(S))}),W(`click`,Fe,()=>{R(k,!U(k))}),W(`click`,Ve,()=>{R(T,!U(T))}),W(`click`,Ye,()=>{R(C,!U(C))}),W(`click`,tt,()=>{R(w,!U(w))}),W(`click`,st,()=>{R(O,!U(O))}),W(`click`,pt,()=>{R(D,!U(D))}),W(`click`,yt,()=>{R(E,!U(E))}),K(e,Te),Ge()}Ur([`click`,`input`,`change`]);var du=G(`<div class="flex items-baseline justify-between gap-3 mt-2 px-1 overflow-hidden"><span class="text-slate-500 leading-none truncate">Aa<span class="text-[8px] font-mono align-middle ml-1"> </span></span> <span class="text-white/80 leading-none truncate">Aa<span class="text-[8px] font-mono align-middle ml-1"> </span></span></div>`),fu=G(`<div class="flex items-center gap-2 mt-2 px-1"><div class="h-2 bg-indigo-500/40 rounded shrink-0"></div> <span class="text-[8px] font-mono text-slate-600">min</span> <div class="h-2 bg-indigo-500/70 rounded shrink-0"></div> <span class="text-[8px] font-mono text-slate-600">max</span></div>`),pu=G(`<option style="background:#16161e;">Custom</option>`),mu=G(`<option style="background:#16161e;"> </option>`),hu=G(`<div class="flex items-center gap-2"><span class="text-[9px] text-slate-500 w-14 shrink-0"> </span> <select class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded text-[10px] text-slate-200 px-1.5 py-1 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select> <input type="number" class="w-16 shrink-0 bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500"/></div>`),gu=G(`<div class="mt-3 pt-3 border-t border-white/6"><div class="text-[9px] font-semibold text-slate-500 mb-2">Modular scale ratio</div> <div class="space-y-2"></div></div>`),_u=G(`<div class="flex justify-end mt-2"><button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button></div>`),vu=G(`<div><div class="flex items-center justify-between mb-2"><span class="text-[10px] font-bold text-slate-300"> </span> <span class="text-[9px] font-mono text-slate-500">clamp(<span class="text-indigo-300"> </span> … <span class="text-indigo-300"> </span>)</span></div> <div class="clampTrack relative h-5 flex items-center mb-2"><div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div> <div class="absolute h-1 bg-indigo-500 rounded-full"></div> <input type="range" class="clampRange absolute inset-0 w-full svelte-iy59wr"/> <input type="range" class="clampRange absolute inset-0 w-full svelte-iy59wr"/> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-indigo-400/40 pointer-events-none"></div> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-indigo-400/40 pointer-events-none"></div></div> <div class="grid grid-cols-2 gap-2"><label class="flex items-center gap-1.5"><span class="text-[9px] text-slate-500 shrink-0"> </span> <input type="number" class="w-full bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500"/></label> <label class="flex items-center gap-1.5"><span class="text-[9px] text-slate-500 shrink-0"> </span> <input type="number" class="w-full bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500"/></label></div> <!> <!> <!></div>`);function yu(e,t){We(t,!0);let n=sa(t,`unit`,3,`rem`),r=sa(t,`minLabel`,3,`Min`),i=sa(t,`maxLabel`,3,`Max`),a=sa(t,`overridden`,3,!1),o=sa(t,`ratioMin_bound`,3,1.05),s=sa(t,`ratioMax_bound`,3,1.8),c=sa(t,`previewKind`,3,`none`);function l(e){return Math.min(t.max,Math.max(t.min,e))}let u=I(()=>(t.minValue-t.min)/(t.max-t.min)*100),d=I(()=>(t.maxValue-t.min)/(t.max-t.min)*100);function f(e){return Math.min(s(),Math.max(o(),e))}let p=I(()=>t.ratioPresets?.find(e=>t.ratioMin!==void 0&&Math.abs(e.value-t.ratioMin)<.0015)?.value),m=I(()=>t.ratioPresets?.find(e=>t.ratioMax!==void 0&&Math.abs(e.value-t.ratioMax)<.0015)?.value);var h=vu(),g=z(h),_=z(g),v=z(_,!0);F(_);var y=V(_,2),b=V(z(y)),x=z(b);F(b);var S=V(b,2),C=z(S);F(S),Ne(),F(y),F(g);var w=V(g,2),T=V(z(w),2),E=V(T,2);Hi(E);var D=V(E,2);Hi(D);var O=V(D,2),k=V(O,2);F(w);var A=V(w,2),ee=z(A),te=z(ee),j=z(te,!0);F(te);var M=V(te,2);Hi(M),F(ee);var ne=V(ee,2),re=z(ne),ie=z(re,!0);F(re);var ae=V(re,2);Hi(ae),F(ne),F(A);var oe=V(A,2),se=e=>{var n=du(),a=z(n),o=V(z(a)),s=z(o,!0);F(o),F(a);var c=V(a,2),l=V(z(c)),u=z(l,!0);F(l),F(c),F(n),H((e,t,n,r)=>{Z(a,e),q(s,t),Z(c,n),q(u,r)},[()=>`font-size:${Math.min(t.minValue,2)}rem`,()=>r().toLowerCase(),()=>`font-size:${Math.min(t.maxValue,2.6)}rem`,()=>i().toLowerCase()]),K(e,n)},N=e=>{var n=fu(),r=z(n),i=V(r,4);Ne(2),F(n),H((e,t)=>{Z(r,e),Z(i,t)},[()=>`width:${Math.min(t.minValue*28,120)}px`,()=>`width:${Math.min(t.maxValue*28,200)}px`]),K(e,n)};J(oe,e=>{c()===`type`?e(se):c()===`space`&&e(N,1)});var ce=V(oe,2),le=e=>{var n=gu(),a=V(z(n),2);Y(a,21,()=>[{side:r(),value:t.ratioMin,active:U(p),onChange:t.onRatioMinChange},{side:i(),value:t.ratioMax,active:U(m),onChange:t.onRatioMaxChange}],e=>e.side,(e,n)=>{var r=hu(),i=z(r),a=z(i,!0);F(i);var c=V(i,2),l=z(c),u=e=>{var t=pu();t.value=t.__value=``,K(e,t)};J(l,e=>{U(n).active===void 0&&e(u)}),Y(V(l),17,()=>t.ratioPresets,e=>e.value,(e,t)=>{var n=mu(),r=z(n,!0);F(n);var i={};H(e=>{q(r,U(t).label),i!==(i=e)&&(n.value=(n.__value=e)??``)},[()=>String(U(t).value)]),K(e,n)}),F(c);var d;Ai(c);var p=V(c,2);Hi(p),Q(p,`step`,.001),F(r),H(e=>{q(a,U(n).side),Q(c,`aria-label`,`${U(n).side} modular scale ratio preset`),d!==(d=e)&&(c.value=(c.__value=e)??``,ki(c,e)),Q(p,`aria-label`,`${U(n).side} modular scale custom ratio`),Q(p,`min`,o()),Q(p,`max`,s()),Ui(p,U(n).value)},[()=>U(n).active===void 0?``:String(U(n).active)]),W(`change`,c,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(n).onChange?.(f(t))}),W(`change`,p,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(n).onChange?.(f(t))}),K(e,r)}),F(a),F(n),K(e,n)};J(ce,e=>{t.ratioPresets&&e(le)});var ue=V(ce,2),de=e=>{var n=_u(),r=z(n);F(n),W(`click`,r,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(ue,e=>{a()&&t.onReset&&e(de)}),F(h),H(e=>{X(h,1,`rounded-xl border p-3 ${a()?`bg-indigo-500/8 border-indigo-500/25`:`bg-white/4 border-white/8`}`,`svelte-iy59wr`),q(v,t.title),q(x,`${t.minValue??``}${n()??``}`),q(C,`${t.maxValue??``}${n()??``}`),Z(T,e),Q(E,`min`,t.min),Q(E,`max`,t.max),Q(E,`step`,t.step),Ui(E,t.minValue),Q(E,`aria-label`,`${t.title} min`),Q(D,`min`,t.min),Q(D,`max`,t.max),Q(D,`step`,t.step),Ui(D,t.maxValue),Q(D,`aria-label`,`${t.title} max`),Z(O,`left: calc(${U(u)}% - 6px)`),Z(k,`left: calc(${U(d)}% - 6px)`),q(j,r()),Q(M,`min`,t.min),Q(M,`max`,t.max),Q(M,`step`,t.step),Ui(M,t.minValue),q(ie,i()),Q(ae,`min`,t.min),Q(ae,`max`,t.max),Q(ae,`step`,t.step),Ui(ae,t.maxValue)},[()=>`left:${Math.min(U(u),U(d))}%; right:${100-Math.max(U(u),U(d))}%`]),W(`input`,E,e=>t.onMinChange(Math.min(l(parseFloat(e.target.value)),t.maxValue))),W(`input`,D,e=>t.onMaxChange(Math.max(l(parseFloat(e.target.value)),t.minValue))),W(`change`,M,e=>t.onMinChange(l(parseFloat(e.target.value)||t.min))),W(`change`,ae,e=>t.onMaxChange(l(parseFloat(e.target.value)||t.max))),K(e,h),Ge()}Ur([`input`,`change`,`click`]);var bu=G(`<option style="font-family:inherit;background:#16161e;"> </option>`),xu=G(`<option style="background:#16161e;"> </option>`),Su=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),Cu=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-14 shrink-0"> </span> <select class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select> <!></div>`),wu=G(`<!> <div class="rounded-xl bg-white/4 border border-white/8 p-3 space-y-2"><div class="text-[10px] font-semibold text-slate-400">Google Font</div> <div class="flex gap-2"><select class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"><option style="background:#16161e;">Pick a font…</option><!></select> <div class="flex gap-1 shrink-0"><button>Body</button> <button>Heading</button></div></div> <input type="text" placeholder="…or type any Google font name" class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <button class="w-full py-1.5 rounded-lg bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 text-[11px] font-bold cursor-pointer hover:bg-indigo-600/30 transition-all"> </button></div>`,1),Tu=G(`<span class="absolute top-0.5 right-0.5 w-1 h-1 rounded-full bg-indigo-400"></span>`),Eu=G(`<button> <!></button>`),Du=G(`<option style="background:#16161e;">custom</option>`),Ou=G(`<button> </button>`),ku=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Tracking</span> <select class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select></div>`),Au=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Max width</span> <input type="text" placeholder="none" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),ju=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer"> </button>`),Mu=G(`<div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div> <div class="bg-white/4 rounded-xl border border-white/8 px-3 py-3 overflow-hidden"><div class="text-white/85 truncate">The quick brown fox</div></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Size</span> <select class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Line height</span> <select class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select></div> <div><span class="text-[10px] font-semibold text-slate-400">Weight</span> <div class="flex gap-1 mt-1"></div></div> <!> <!> <div class="flex justify-end"><!></div>`,1),Nu=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>`),Pu=G(`<div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200"> </span> <!></div> <div class="flex gap-1"></div></div>`),Fu=G(`<button><span> </span></button>`),Iu=G(`<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5"> </div> <div class="flex gap-1"></div></div>`),Lu=G(`<!> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Emphasis style</div> <div class="flex gap-1"></div></div> <!> <!> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">External marker</span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),Ru=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>`),zu=G(`<div class="group"><div class="flex items-center justify-between mb-1"><span class="text-[10px] font-semibold text-slate-200"> </span> <!></div> <div class="flex gap-1"></div></div>`),Bu=G(`<p class="text-[9px] text-slate-600 leading-relaxed">Named weight tokens. Override if your font uses non-standard axis values.</p> <!>`,1),Vu=G(`<div><div class="text-[9px] text-slate-600 mb-1"> </div> <!></div>`),Hu=G(`<!> <div class="grid grid-cols-2 gap-3"></div> <!>`,1),Uu=G(`<div class="group"><div class="flex items-center justify-between mb-1"><span class="text-[10px] font-semibold text-slate-200"> </span> <!></div> <!></div>`),Wu=G(`<div class="mt-3 space-y-4"></div>`),Gu=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Utopia-style fluid scale. Each endpoint has three values — viewport width,
-      base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.</p> <!> <!> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Line height scale</div> <div class="space-y-2"></div></div> <!> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Letter-spacing scale</div> <p class="text-[9px] text-slate-600 mb-2">Overriding these propagates to heading sizes that reference them.</p> <div class="space-y-2"></div></div> <div class="pt-1"><button class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"><div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div> <span class="text-[10px]"> </span></button> <!></div>`,1),Ku=G(`<div class="flex items-baseline gap-2"><span class="text-[9px] font-mono text-slate-600 w-6 shrink-0 text-right"> </span> <span class="text-white/80 font-medium leading-none truncate">Aa</span> <span class="text-[9px] font-mono text-slate-600 ml-auto shrink-0"> </span></div>`),qu=G(`<div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1 overflow-hidden"></div>`),Ju=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),Yu=G(`<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-400 w-6 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),Xu=G(`<p class="text-[9px] text-slate-600 leading-relaxed">Per-text-size max-width caps on <span class="font-mono text-slate-400">.sf-text-*</span> elements. Set to <span class="font-mono text-slate-400">none</span> to remove the constraint; use <span class="font-mono text-slate-400">ch</span> units for character-based measures.</p> <div class="space-y-1.5"></div>`,1),Zu=G(`<p class="text-[9px] text-slate-600 leading-relaxed">Advanced OpenType and variable-font axes. Leave as <span class="font-mono text-slate-400">normal</span> unless your font supports these features.</p> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Numeric figures</div> <div class="flex gap-1"></div></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Optical sizing</div> <div class="flex gap-1"></div></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Font features</span> <input type="text" placeholder="normal" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Variation</span> <input type="text" placeholder="normal" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),Qu=G(`<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Font families</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Per-type styles</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Body text</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Font weight scale</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Display type</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Modular scale (Mobile → Desktop)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section><button class="w-full flex items-center justify-between cursor-pointer mb-3"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scale preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line lengths (max-width)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Advanced typography</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>`);function $u(e,t){We(t,!0);let n=[{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}],r=[{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`}],i=[{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`}],a=[{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`}],o=`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`.split(`.`),s=[{label:`balance`,value:`balance`},{label:`pretty`,value:`pretty`},{label:`normal`,value:`normal`}],c=[`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`],l={"--sf-font-weight-body":`400`,"--sf-font-weight-heading":`600`,"--sf-font-weight-display":`700`,"--sf-font-weight-interactive":`600`},u=[{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}],d=[{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}],f=[{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}],p=[{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}],m=f.map(e=>({label:e.label,value:`var(${e.token})`,num:e.default})),h=d.map(e=>({label:e.label,value:`var(${e.token})`,em:e.default})),_=[{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)`}],v=L(`h1`),y=I(()=>_.find(e=>e.id===U(v))),b=Gc.typography??[];function x(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let S=I(()=>x(`--sf-text-ratio-min`,1.25)),C=I(()=>x(`--sf-text-ratio-max`,1.333)),w=I(()=>x(`--sf-text-base-min`,1)),T=I(()=>x(`--sf-text-base-max`,1.25)),E=I(()=>x(`--sf-text-display-base-min`,2.4)),D=I(()=>x(`--sf-text-display-base-max`,3)),O=I(()=>x(`--sf-leading-taper`,0)),k=I(()=>x(`--sf-text-scale`,1)),A=I(()=>x(`--sf-fluid-min-vw`,22.5)),ee=I(()=>x(`--sf-fluid-max-vw`,90)),te=L(!1),j=L(!1),M=L(!1),ne=L(!1),re=L(!1),ie=L(!1),ae=L(!1),oe=L(!1),se=L(!1),N=L(!1),ce=I(()=>t.overrides[`--sf-font-body`]??``),le=I(()=>t.overrides[`--sf-font-heading`]??``),ue=I(()=>t.overrides[`--sf-font-mono`]??`ui-monospace, monospace`),de=L(``),fe=L(`body`);function pe(e){let n=t.overrides[e.token];return n?parseFloat(n.replace(`em`,``)):e.default}function me(e){return x(e.token,e.default)}function he(e){if(!e.trim())return;let t=`gf-${e.replace(/\s+/g,`-`)}`;if(!document.getElementById(t)){let n=document.createElement(`link`);n.id=t,n.rel=`stylesheet`,n.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(e)}:wght@100;200;300;400;500;600;700;800;900&display=swap`,document.head.appendChild(n)}}function ge(e,n){if(!e.trim())return;he(e);let r=n===`body`?`--sf-font-body`:`--sf-font-heading`;t.onSet(r,`'${e}', sans-serif`)}function _e(e,n){return e?t.overrides[e]??n:n}function ve(e,n,r){e&&(n===r?t.onReset(e):t.onSet(e,n))}let ye=I(()=>{let e=_e(U(y).size,U(y).dSize),t=p.find(t=>t.value===e),n=(U(w)+U(T))/2;return Math.min((t?.approx??1)*n*U(k),2.4)}),be=I(()=>{let e=_e(U(y).wt,U(y).dWt),t=parseInt(e);return isNaN(t)?600:t}),xe=I(()=>{if(!U(y).ls)return 0;let e=_e(U(y).ls,U(y).dLs),t=h.find(t=>t.value===e);if(t)return t.em;let n=parseFloat(e.replace(`em`,``));return isNaN(n)?0:n}),Se=I(()=>{let e=_e(U(y).lh,U(y).dLh),t=m.find(t=>t.value===e);if(t)return t.num;let n=parseFloat(e);return isNaN(n)?1.3:n});var Ce=Qu(),we=z(Ce),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var Oe=V(Te,2),P=e=>{var n=wu(),s=B(n);Y(s,17,()=>[{label:`Body`,token:`--sf-font-body`,current:U(ce),opts:r},{label:`Heading`,token:`--sf-font-heading`,current:U(le),opts:i},{label:`Mono`,token:`--sf-font-mono`,current:U(ue),opts:a}],e=>e.token,(e,n)=>{var r=Cu(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);Y(s,17,()=>U(n).opts,e=>e.label,(e,t)=>{var n=bu(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var c=V(s),l=e=>{var t=xu(),r=z(t);F(t);var i={};H(e=>{q(r,`Custom: ${e??``}`),i!==(i=U(n).current)&&(t.value=(t.__value=U(n).current)??``)},[()=>U(n).current.split(`,`)[0].replace(/['"]/g,``)]),K(e,t)},u=I(()=>U(n).current&&!U(n).opts.some(e=>e.value===U(n).current));J(c,e=>{U(u)&&e(l)}),F(o);var d;Ai(o);var f=V(o,2),p=e=>{var r=Su();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(f,e=>{U(n).token in t.overrides&&e(p)}),F(r),H(()=>{q(a,U(n).label),Z(o,`font-family: ${U(n).current||`inherit`}`),d!==(d=U(n).current)&&(o.value=(o.__value=U(n).current)??``,ki(o,U(n).current))}),W(`change`,o,e=>{let r=e.target.value;r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)});var c=V(s,2),l=V(z(c),2),u=z(l),d=z(u);d.value=d.__value=``,Y(V(d),16,()=>o,e=>e,(e,t)=>{var n=xu(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(u);var f;Ai(u);var p=V(u,2),m=z(p),h=V(m,2);F(p),F(l);var g=V(l,2);Hi(g);var _=V(g,2),v=z(_);F(_),F(c),H(()=>{f!==(f=U(de))&&(u.value=(u.__value=U(de))??``,ki(u,U(de))),X(m,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(fe)===`body`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400`}`),X(h,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(fe)===`heading`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400`}`),Ui(g,U(de)),q(v,`Load & apply to ${U(fe)??``}`)}),W(`change`,u,e=>{R(de,e.target.value,!0)}),W(`click`,m,()=>{R(fe,`body`)}),W(`click`,h,()=>{R(fe,`heading`)}),W(`input`,g,e=>{R(de,e.target.value,!0)}),W(`click`,_,()=>ge(U(de),U(fe))),K(e,n)};J(Oe,e=>{U(te)&&e(P)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Me=z(je,!0);F(je),F(Ae);var Ne=V(Ae,2),Pe=e=>{var n=Mu(),r=B(n);Y(r,21,()=>_,e=>e.id,(e,n)=>{let r=I(()=>U(n).size in t.overrides||U(n).lh in t.overrides||U(n).wt in t.overrides||!!U(n).ls&&U(n).ls in t.overrides);var i=Eu(),a=z(i),o=V(a),s=e=>{K(e,Tu())};J(o,e=>{U(r)&&e(s)}),F(i),H(()=>{X(i,1,`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${U(v)===U(n).id?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(a,`${U(n).label??``} `)}),W(`click`,i,()=>{R(v,U(n).id,!0)}),K(e,i)}),F(r);var i=V(r,2),a=z(i);F(i);var o=V(i,2),s=V(z(o),2),l=z(s);Y(l,17,()=>p,e=>e.value,(e,t)=>{var n=xu(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var u=V(l),d=e=>{var t=Du(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).size,U(y).dSize)]),K(e,t)},f=I(()=>!p.some(e=>e.value===_e(U(y).size,U(y).dSize)));J(u,e=>{U(f)&&e(d)}),F(s);var g;Ai(s),F(o);var b=V(o,2),x=V(z(b),2),S=z(x);Y(S,17,()=>m,e=>e.value,(e,t)=>{var n=xu(),r=z(n);F(n);var i={};H(()=>{q(r,`${U(t).label??``} · ${U(t).num??``}`),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var C=V(S),w=e=>{var t=Du(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).lh,U(y).dLh)]),K(e,t)},T=I(()=>!m.some(e=>e.value===_e(U(y).lh,U(y).dLh)));J(C,e=>{U(T)&&e(w)}),F(x);var E;Ai(x),F(b);var D=V(b,2),O=V(z(D),2);Y(O,20,()=>c,e=>e,(e,t)=>{let n=I(()=>_e(U(y).wt,U(y).dWt));var r=Ou(),i=z(r,!0);F(r),H(e=>{Z(r,e),X(r,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(n)===t?`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`}`),q(i,t)},[()=>`font-weight:${parseInt(t)}`]),W(`click`,r,()=>ve(U(y).wt,t,U(y).dWt)),K(e,r)}),F(O),F(D);var k=V(D,2),A=e=>{var t=ku(),n=V(z(t),2),r=z(n);Y(r,17,()=>h,e=>e.value,(e,t)=>{var n=xu(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var i=V(r),a=e=>{var t=Du(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).ls,U(y).dLs)]),K(e,t)},o=I(()=>!h.some(e=>e.value===_e(U(y).ls,U(y).dLs)));J(i,e=>{U(o)&&e(a)}),F(n);var s;Ai(n),F(t),H(e=>{s!==(s=e)&&(n.value=(n.__value=e)??``,ki(n,e))},[()=>_e(U(y).ls,U(y).dLs)]),W(`change`,n,e=>ve(U(y).ls,e.target.value,U(y).dLs)),K(e,t)};J(k,e=>{U(y).ls&&e(A)});var ee=V(k,2),te=e=>{let n=I(()=>`--sf-${U(y).id}-max-width`);var r=Au(),i=V(z(r),2);Hi(i);var a=V(i,2),o=e=>{var r=Su();W(`click`,r,()=>t.onReset(U(n))),K(e,r)};J(a,e=>{U(n)in t.overrides&&e(o)}),F(r),H(()=>Ui(i,t.overrides[U(n)]??``)),W(`input`,i,e=>{let r=e.target.value.trim();r?t.onSet(U(n),r):t.onReset(U(n))}),K(e,r)};J(ee,e=>{U(y).id!==`body`&&e(te)});var j=V(ee,2),M=z(j),ne=e=>{var n=ju(),r=z(n);F(n),H(()=>q(r,`reset ${U(y).label??``}`)),W(`click`,n,()=>{let e={[U(y).size]:null,[U(y).lh]:null,[U(y).wt]:null};U(y).ls&&(e[U(y).ls]=null),t.onBulkChange(e)}),K(e,n)};J(M,e=>{(U(y).size in t.overrides||U(y).lh in t.overrides||U(y).wt in t.overrides||U(y).ls&&U(y).ls in t.overrides)&&e(ne)}),F(j),H((e,t)=>{Z(a,`font-size:${U(ye)}rem; font-weight:${U(be)}; letter-spacing:${U(xe)}em; line-height:${U(Se)}; font-family:${U(y).id===`body`?U(ce)||`inherit`:U(le)||U(ce)||`inherit`}`),g!==(g=e)&&(s.value=(s.__value=e)??``,ki(s,e)),E!==(E=t)&&(x.value=(x.__value=t)??``,ki(x,t))},[()=>_e(U(y).size,U(y).dSize),()=>_e(U(y).lh,U(y).dLh)]),W(`change`,s,e=>ve(U(y).size,e.target.value,U(y).dSize)),W(`change`,x,e=>ve(U(y).lh,e.target.value,U(y).dLh)),K(e,n)};J(Ne,e=>{U(j)&&e(Pe)}),F(ke);var Fe=V(ke,4),Ie=z(Fe),Le=V(z(Ie),2),Re=z(Le,!0);F(Le),F(Ie);var ze=V(Ie,2),Be=e=>{var n=Lu(),r=B(n);Y(r,16,()=>[{label:`Body strong`,tokenName:`--sf-font-weight-strong`},{label:`Interactive`,tokenName:`--sf-font-weight-interactive`}],e=>e.tokenName,(e,n)=>{let r=I(()=>l[n.tokenName]??`600`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=Pu(),s=z(o),u=z(s),d=z(u);F(u);var f=V(u,2),p=e=>{var r=Nu();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>c,e=>e,(e,o)=>{var s=Ou(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`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`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)});var i=V(r,2),a=V(z(i),2);Y(a,20,()=>[[`Italic`,`italic`],[`Normal`,`normal`]],([e,t])=>t,(e,n)=>{var r=I(()=>g(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-body-em-style`]??`italic`);var s=Fu(),c=z(s),l=z(c,!0);F(c),F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===a()?`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`}`),Z(c,`font-style: ${a()}`),q(l,i())}),W(`click`,s,()=>a()===`italic`?t.onReset(`--sf-body-em-style`):t.onSet(`--sf-body-em-style`,a())),K(e,s)}),F(a),F(i);var o=V(i,2);{let e=I(()=>x(`--sf-code-font-size`,.875)),n=I(()=>`--sf-code-font-size`in t.overrides);$(o,{label:`Code font size`,get value(){return U(e)},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 U(n)},onChange:e=>t.onSet(`--sf-code-font-size`,`${e}em`),onReset:()=>t.onReset(`--sf-code-font-size`)})}var u=V(o,2);Y(u,16,()=>[{label:`Heading wrap`,token:`--sf-heading-text-wrap`,defaultVal:`balance`},{label:`Body wrap`,token:`--sf-body-text-wrap`,defaultVal:`pretty`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??n.defaultVal);var i=Iu(),a=z(i),o=z(a,!0);F(a);var c=V(a,2);Y(c,21,()=>s,e=>e.value,(e,i)=>{var a=Ou(),o=z(a,!0);F(a),H(()=>{X(a,1,`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===U(i).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`}`),q(o,U(i).label)}),W(`click`,a,()=>U(i).value===n.defaultVal&&!(n.token in t.overrides)?void 0:U(i).value===n.defaultVal?t.onReset(n.token):t.onSet(n.token,U(i).value)),K(e,a)}),F(c),F(i),H(()=>q(o,n.label)),K(e,i)});var d=V(u,2),f=V(z(d),2);Hi(f),Q(f,`placeholder`,`" ↗"`);var p=V(f,2),m=e=>{var n=Su();W(`click`,n,()=>t.onReset(`--sf-link-external-marker`)),K(e,n)};J(p,e=>{`--sf-link-external-marker`in t.overrides&&e(m)}),F(d),H(()=>Ui(f,t.overrides[`--sf-link-external-marker`]??``)),W(`input`,f,e=>{let n=e.target.value;n?t.onSet(`--sf-link-external-marker`,n):t.onReset(`--sf-link-external-marker`)}),K(e,n)};J(ze,e=>{U(M)&&e(Be)}),F(Fe);var Ve=V(Fe,4),He=z(Ve),Ue=V(z(He),2),Ke=z(Ue,!0);F(Ue),F(He);var qe=V(He,2),Je=e=>{var n=Bu();Y(V(B(n),2),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}],e=>e.token,(e,n)=>{var r=zu(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),l=e=>{var r=Ru();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(l)}),F(i);var u=V(i,2);Y(u,20,()=>c,e=>e,(e,r)=>{let i=I(()=>t.overrides[n.token]??String(n.def));var a=Ou(),o=z(a,!0);F(a),H(e=>{Z(a,e),X(a,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===r?`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`}`),q(o,r)},[()=>`font-weight:${parseInt(r)}`]),W(`click`,a,()=>r===String(n.def)&&!(n.token in t.overrides)?void 0:r===String(n.def)?t.onReset(n.token):t.onSet(n.token,r)),K(e,a)}),F(u),F(r),H(()=>q(o,n.label)),K(e,r)}),K(e,n)};J(qe,e=>{U(N)&&e(Je)}),F(Ve);var Ye=V(Ve,4),Xe=z(Ye),Ze=V(z(Xe),2),Qe=z(Ze,!0);F(Ze),F(Xe);var $e=V(Xe,2),et=e=>{var n=Hu(),r=B(n);{let e=I(()=>`--sf-text-display-base-min`in t.overrides||`--sf-text-display-base-max`in t.overrides);yu(r,{title:`Display base size`,get minValue(){return U(E)},get maxValue(){return U(D)},min:1.5,max:6,step:.05,unit:`rem`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-display-base-min`),t.onReset(`--sf-text-display-base-max`)},onMinChange:e=>t.onSet(`--sf-text-display-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-display-base-max`,String(e))})}var i=V(r,2);Y(i,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}],e=>e.token,(e,n)=>{var r=Vu(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>x(n.token,n.def)),r=I(()=>n.token in t.overrides);$(o,{label:``,get value(){return U(e)},min:.8,max:1.5,step:.025,get overridden(){return U(r)},onChange:e=>t.onSet(n.token,String(e)),onReset:()=>t.onReset(n.token)})}F(r),H(()=>q(a,n.label)),K(e,r)}),F(i),Y(V(i,2),16,()=>[{label:`Display`,tokenName:`--sf-font-weight-display`},{label:`Heading`,tokenName:`--sf-font-weight-heading`}],e=>e.tokenName,(e,n)=>{let r=I(()=>l[n.tokenName]??`700`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=Pu(),s=z(o),u=z(s),d=z(u);F(u);var f=V(u,2),p=e=>{var r=Nu();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>c,e=>e,(e,o)=>{var s=Ou(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`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`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)}),K(e,n)};J($e,e=>{U(ne)&&e(et)}),F(Ye);var tt=V(Ye,4),nt=z(tt),rt=V(z(nt),2),it=z(rt,!0);F(rt),F(nt);var at=V(nt,2),ot=e=>{var r=Gu(),i=V(B(r),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);yu(i,{title:`Viewport range`,get minValue(){return U(A)},get maxValue(){return U(ee)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-text-base-min`in t.overrides||`--sf-text-base-max`in t.overrides);yu(a,{title:`Base size & ratio`,get minValue(){return U(w)},get maxValue(){return U(T)},min:.7,max:2,step:.01,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-base-min`),t.onReset(`--sf-text-base-max`)},onMinChange:e=>t.onSet(`--sf-text-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-base-max`,String(e)),get ratioPresets(){return n},get ratioMin(){return U(S)},get ratioMax(){return U(C)},ratioMin_bound:1.05,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-text-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-text-ratio-max`,String(e))})}var o=V(a,2),s=V(z(o),2);Y(s,21,()=>f,e=>e.token,(e,n)=>{{let r=I(()=>me(U(n))),i=I(()=>`${U(n).token} — ${U(n).label.toLowerCase()} line height`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:2.2,step:.05,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(s),F(o);var c=V(o,2);{let e=I(()=>`--sf-leading-taper`in t.overrides);$(c,{label:`Leading taper`,get value(){return U(O)},min:0,max:.5,step:.01,help:`How aggressively large display sizes shrink their line-height.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-leading-taper`,String(e)),onReset:()=>t.onReset(`--sf-leading-taper`)})}var l=V(c,2),u=V(z(l),4);Y(u,21,()=>d,e=>e.token,(e,n)=>{var r=Uu(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),c=e=>{var r=Ru();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(i);var l=V(i,2);{let e=I(()=>pe(U(n)));$c(l,{get value(){return U(e)},min:-.1,max:.2,step:.005,unit:`em`,onChange:e=>t.onSet(U(n).token,`${e}em`)})}F(r),H(()=>q(o,U(n).label)),K(e,r)}),F(u),F(l);var p=V(l,2),m=z(p),h=V(z(m),2),g=z(h,!0);F(h),F(m);var _=V(m,2),v=e=>{var n=Wu();Y(n,21,()=>b,e=>e.name,(e,n)=>{ll(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(_,e=>{U(ie)&&e(v)}),F(p),H(()=>{Q(m,`aria-expanded`,U(ie)),q(g,U(ie)?`▲`:`▼`)}),W(`click`,m,()=>{R(ie,!U(ie))}),K(e,r)};J(at,e=>{U(re)&&e(ot)}),F(tt);var st=V(tt,4),ct=z(st),lt=V(z(ct),2),ut=z(lt,!0);F(lt),F(ct);var dt=V(ct,2),ft=e=>{var t=qu();Y(t,21,()=>[...u].reverse(),({label:e,factor:t})=>e,(e,t)=>{let n=()=>U(t).label,r=()=>U(t).factor,i=I(()=>(U(w)+U(T))/2),a=I(()=>U(i)*r()*U(k));var o=Ku(),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=V(l,2),d=z(u);F(u),F(o),H((e,t)=>{q(c,n()),Z(l,e),q(d,`${t??``}rem`)},[()=>`font-size: ${Math.min(U(a),2.5)}rem; font-family: ${U(ce)||`inherit`}`,()=>U(a).toFixed(2)]),K(e,o)}),F(t),K(e,t)};J(dt,e=>{U(ae)&&e(ft)}),F(st);var pt=V(st,4),mt=z(pt),ht=V(z(mt),2),gt=z(ht,!0);F(ht),F(mt);var _t=V(mt,2),vt=e=>{var n=Xu(),r=V(B(n),2);Y(r,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`}],e=>e.token,(e,n)=>{var r=Yu(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Hi(o);var s=V(o,2),c=e=>{var r=Ju();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Ui(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(_t,e=>{U(se)&&e(vt)}),F(pt);var yt=V(pt,4),bt=z(yt),xt=V(z(bt),2),St=z(xt,!0);F(xt),F(bt);var Ct=V(bt,2),wt=e=>{var n=Zu(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[[`tabular-nums`,`tabular-nums (default)`],[`proportional-nums`,`proportional-nums`],[`normal`,`normal`]],([e,t])=>e,(e,n)=>{var r=I(()=>g(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-font-numeric`]??`tabular-nums`);var s=Ou(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(o)===i()?`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`}`),q(c,a())}),W(`click`,s,()=>i()===`tabular-nums`?t.onReset(`--sf-font-numeric`):t.onSet(`--sf-font-numeric`,i())),K(e,s)}),F(i),F(r);var a=V(r,2),o=V(z(a),2);Y(o,20,()=>[[`auto`,`auto (default)`],[`none`,`none`]],([e,t])=>e,(e,n)=>{var r=I(()=>g(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-optical-sizing`]??`auto`);var s=Ou(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`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`}`),q(c,a())}),W(`click`,s,()=>i()===`auto`?t.onReset(`--sf-optical-sizing`):t.onSet(`--sf-optical-sizing`,i())),K(e,s)}),F(o),F(a);var s=V(a,2),c=V(z(s),2);Hi(c);var l=V(c,2),u=e=>{var n=Ju();W(`click`,n,()=>t.onReset(`--sf-font-features`)),K(e,n)};J(l,e=>{`--sf-font-features`in t.overrides&&e(u)}),F(s);var d=V(s,2),f=V(z(d),2);Hi(f);var p=V(f,2),m=e=>{var n=Ju();W(`click`,n,()=>t.onReset(`--sf-font-variation`)),K(e,n)};J(p,e=>{`--sf-font-variation`in t.overrides&&e(m)}),F(d),H(()=>{Ui(c,t.overrides[`--sf-font-features`]??``),Ui(f,t.overrides[`--sf-font-variation`]??``)}),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-features`,n):t.onReset(`--sf-font-features`)}),W(`input`,f,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-variation`,n):t.onReset(`--sf-font-variation`)}),K(e,n)};J(Ct,e=>{U(oe)&&e(wt)}),F(yt),F(Ce),H(()=>{Q(Te,`aria-expanded`,U(te)),q(De,U(te)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(j)),q(Me,U(j)?`▲`:`▼`),Q(Ie,`aria-expanded`,U(M)),q(Re,U(M)?`▲`:`▼`),Q(He,`aria-expanded`,U(N)),q(Ke,U(N)?`▲`:`▼`),Q(Xe,`aria-expanded`,U(ne)),q(Qe,U(ne)?`▲`:`▼`),Q(nt,`aria-expanded`,U(re)),q(it,U(re)?`▲`:`▼`),Q(ct,`aria-expanded`,U(ae)),q(ut,U(ae)?`▲`:`▼`),Q(mt,`aria-expanded`,U(se)),q(gt,U(se)?`▲`:`▼`),Q(bt,`aria-expanded`,U(oe)),q(St,U(oe)?`▲`:`▼`)}),W(`click`,Te,()=>{R(te,!U(te))}),W(`click`,Ae,()=>{R(j,!U(j))}),W(`click`,Ie,()=>{R(M,!U(M))}),W(`click`,He,()=>{R(N,!U(N))}),W(`click`,Xe,()=>{R(ne,!U(ne))}),W(`click`,nt,()=>{R(re,!U(re))}),W(`click`,ct,()=>{R(ae,!U(ae))}),W(`click`,mt,()=>{R(se,!U(se))}),W(`click`,bt,()=>{R(oe,!U(oe))}),K(e,Ce),Ge()}Ur([`click`,`change`,`input`]);var ed=G(`<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-6 text-right shrink-0"> </span> <div class="bg-indigo-500/50 rounded shrink-0 h-3"></div> <span class="text-[9px] font-mono text-slate-500 shrink-0"> </span></div>`),td=G(`<p class="text-[10px] text-slate-600 leading-relaxed">The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).</p> <!> <!> <!>`,1),nd=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Utopia-style fluid scale — viewport width, base unit and ratio per endpoint.
-        The viewport range is shared with the type scale.</p> <!> <!>`,1),rd=G(`<div class="space-y-4"></div>`),id=G(`<div class="p-4 space-y-6"><section><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Space scale preview</div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Layout gap</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Modular scale (Mobile → Desktop)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"><div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div> <span class="text-[10px]"> </span></button> <!></section></div>`);function ad(e,t){We(t,!0);let n=[{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}],r=[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`],i=Gc.spacing??[];function a(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let o=I(()=>a(`--sf-space-ratio-min`,1.25)),s=I(()=>a(`--sf-space-ratio-max`,1.333)),c=I(()=>a(`--sf-space-base-min`,1)),l=I(()=>a(`--sf-space-base-max`,2)),u=I(()=>a(`--sf-space-scale`,1)),d=I(()=>a(`--sf-gap`,1)),f=I(()=>a(`--sf-gutter`,1.5)),p=I(()=>a(`--sf-content-gap`,.5)),m=I(()=>a(`--sf-fluid-min-vw`,22.5)),h=I(()=>a(`--sf-fluid-max-vw`,90)),g=L(!1),_=L(!1),v=L(!1);var y=id(),b=z(y),x=V(z(b),2);Y(x,22,()=>r,e=>e,(e,t,n)=>{let r=I(()=>(U(c)+U(l))/2),i=I(()=>(U(o)+U(s))/2),a=I(()=>U(n)-3),d=I(()=>U(a)>=0?U(r)*U(i)**+U(a):U(r)/U(i)**+-U(a)),f=I(()=>U(d)*U(u)),p=I(()=>Math.min(U(f)*28,240));var m=ed(),h=z(m),g=z(h,!0);F(h);var _=V(h,2),v=V(_,2),y=z(v);F(v),F(m),H(e=>{q(g,t),Z(_,`width: ${U(p)}px; min-width: 3px`),q(y,`${e??``}rem`)},[()=>U(f).toFixed(2)]),K(e,m)}),F(x),F(b);var S=V(b,4),C=z(S),w=V(z(C),2),T=z(w,!0);F(w),F(C);var E=V(C,2),D=e=>{var n=td(),r=V(B(n),2);{let e=I(()=>`--sf-gap`in t.overrides);$(r,{label:`Gap`,get value(){return U(d)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-gap — spacing between layout items (cluster, grid, reel, stack, sidebar, bento)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-gap`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-gap`]},onRawSet:e=>t.onSet(`--sf-gap`,e)})}var i=V(r,2);{let e=I(()=>`--sf-content-gap`in t.overrides);$(i,{label:`Content gap`,get value(){return U(p)},min:0,max:2,step:.0625,unit:`rem`,help:`--sf-content-gap — tighter gap within components (defaults to space-s)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-gap`),rawDefault:`var(--sf-space-s)`,get currentRaw(){return t.overrides[`--sf-content-gap`]},onRawSet:e=>t.onSet(`--sf-content-gap`,e)})}var a=V(i,2);{let e=I(()=>`--sf-gutter`in t.overrides);$(a,{label:`Gutter`,get value(){return U(f)},min:0,max:6,step:.0625,unit:`rem`,help:`--sf-gutter — wide page/section side gutter (containers, .sf-section--guttered)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-gutter`),rawDefault:`var(--sf-space-l)`,get currentRaw(){return t.overrides[`--sf-gutter`]},onRawSet:e=>t.onSet(`--sf-gutter`,e)})}K(e,n)};J(E,e=>{U(g)&&e(D)}),F(S);var O=V(S,4),k=z(O),A=V(z(k),2),ee=z(A,!0);F(A),F(k);var te=V(k,2),j=e=>{var r=nd(),i=V(B(r),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);yu(i,{title:`Viewport range`,get minValue(){return U(m)},get maxValue(){return U(h)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-space-base-min`in t.overrides||`--sf-space-base-max`in t.overrides);yu(a,{title:`Base unit & ratio`,get minValue(){return U(c)},get maxValue(){return U(l)},min:.5,max:4,step:.05,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`space`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-space-base-min`),t.onReset(`--sf-space-base-max`)},onMinChange:e=>t.onSet(`--sf-space-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-space-base-max`,String(e)),get ratioPresets(){return n},get ratioMin(){return U(o)},get ratioMax(){return U(s)},ratioMin_bound:1.1,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-space-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-space-ratio-max`,String(e))})}K(e,r)};J(te,e=>{U(_)&&e(j)}),F(O);var M=V(O,4),ne=z(M),re=V(z(ne),2),ie=z(re,!0);F(re),F(ne);var ae=V(ne,2),oe=e=>{var n=rd();Y(n,21,()=>i,e=>e.name,(e,n)=>{ll(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(ae,e=>{U(v)&&e(oe)}),F(M),F(y),H(()=>{Q(C,`aria-expanded`,U(g)),q(T,U(g)?`▲`:`▼`),Q(k,`aria-expanded`,U(_)),q(ee,U(_)?`▲`:`▼`),Q(ne,`aria-expanded`,U(v)),q(ie,U(v)?`▲`:`▼`)}),W(`click`,C,()=>{R(g,!U(g))}),W(`click`,k,()=>{R(_,!U(_))}),W(`click`,ne,()=>{R(v,!U(v))}),K(e,y),Ge()}Ur([`click`]);var od=G(`<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-12 text-right shrink-0"> </span> <div class="flex-1 h-4 bg-white/5 rounded overflow-hidden"><div class="h-full bg-indigo-500/30 border-r border-indigo-400/40 rounded"></div></div> <span class="text-[9px] font-mono text-slate-500 w-14 shrink-0"> </span></div>`),sd=G(`<div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Narrow</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Prose</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Default</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Wide</div> <!></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>`,1),cd=G(`<!> <!>`,1),ld=G(`<div class="h-8 bg-indigo-500/20 border border-indigo-500/20 rounded text-[8px] font-mono text-indigo-400/60 flex items-center justify-center">col</div>`),ud=G(`<!> <div><div class="text-[9px] text-slate-600 mb-1.5">Named sizes (grid-min-xs → 2xl)</div> <div class="space-y-1.5"></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><div class="text-[9px] text-slate-600 mb-2 font-mono">Preview at 360px panel width</div> <div class="grid gap-1"></div></div>`,1),dd=G(`<div class="w-8 h-1.5 bg-slate-600/60 rounded"></div>`),fd=G(`<div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Mobile</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Desktop</div> <!></div></div> <div class="bg-white/4 rounded-xl border border-white/8 overflow-hidden"><div class="flex items-center px-3 bg-indigo-500/10 border-b border-white/8"><div class="w-16 h-2 bg-indigo-400/40 rounded"></div> <div class="ml-auto flex gap-2"></div></div> <div class="p-2 text-[9px] text-slate-600 font-mono"> </div></div>`,1),pd=G(`<p class="text-[9px] text-slate-600">Offsets position:sticky elements below a fixed header. Defaults to header heights.</p> <div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Mobile</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Desktop</div> <!></div></div>`,1),md=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex gap-2 items-stretch" style="height: 60px"><div class="bg-indigo-500/15 border border-indigo-500/20 rounded flex-shrink-0 flex items-center justify-center"><span class="text-[8px] font-mono text-indigo-400/60 rotate-90 whitespace-nowrap"> </span></div> <div class="flex-1 bg-white/4 rounded"></div></div>`,1),hd=G(`<div class="mt-2 space-y-2"></div>`),gd=G(`<option style="background:#16161e;"> </option>`),_d=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),vd=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0"> </span> <select class="flex-1 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"></select> <!></div>`),yd=G(`<button> </button>`),bd=G(`<div id="more-layout-primitives" class="mt-3 space-y-5"><section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Switcher</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Sidebar content</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Cluster</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Equal grid</div> <!> <div><div class="text-[9px] text-slate-600 mb-1.5">Named column counts (equal-min-col-2/3/4/6)</div> <div class="space-y-1.5"></div></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Cover</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Frame ratio</div> <p class="text-[9px] text-slate-600">--sf-frame-ratio — aspect ratio for .sf-frame</p> <div class="grid grid-cols-5 gap-1"></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Reel</div> <p class="text-[9px] text-slate-600">--sf-reel-item-width — width of each item in a horizontal .sf-reel</p> <div class="grid grid-cols-4 gap-1"></div> <div class="flex items-center gap-2 pt-0.5"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Height</span> <input type="text" placeholder="auto" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Imposter</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Content grid (breakout)</div> <!> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Alternate (zigzag)</div> <!></section></div>`),xd=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),Sd=G(`<div class="mt-2 space-y-2"><p class="text-[9px] text-slate-600">Override the built-in named aspect ratios used by <span class="font-mono text-slate-400">.sf-ratio-*</span> utilities.</p> <!></div>`),Cd=G(`<div class="mt-2 space-y-3"><p class="text-[9px] text-slate-600">Default values for the <span class="font-mono text-slate-400">.sf-bg</span> full-bleed background utility.</p> <!> <!> <!> <!></div>`),wd=G(`<div class="p-4 space-y-6"><section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Container widths</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Center wrapper</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Auto grid</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Header height</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sticky offset</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sidebar</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Bento grid</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button aria-controls="more-layout-primitives" class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">More layout primitives</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Named ratios</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Background layer (.sf-bg)</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div></div>`);function Td(e,t){We(t,!0);function n(e,t){if(!e)return t;let n=parseFloat(e);return isNaN(n)?t:n}let r=I(()=>n(t.overrides[`--sf-container-narrow`],38)),i=I(()=>n(t.overrides[`--sf-container-prose`],65)),a=I(()=>n(t.overrides[`--sf-container-default`],75)),o=I(()=>n(t.overrides[`--sf-container-wide`],90)),s=I(()=>n(t.overrides[`--sf-center-max`],75)),c=I(()=>n(t.overrides[`--sf-center-gutter`],1)),l=I(()=>n(t.overrides[`--sf-grid-min`],16)),u=I(()=>n(t.overrides[`--sf-header-height-mobile`],3.5)),d=I(()=>n(t.overrides[`--sf-header-height-desktop`],5)),f=I(()=>n(t.overrides[`--sf-sidebar-width`],18)),p=I(()=>n(t.overrides[`--sf-sticky-offset-mobile`],3.5)),m=I(()=>n(t.overrides[`--sf-sticky-offset-desktop`],5)),h=[{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}],g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1);function E(e){let n=t.overrides[e.token];return n?parseFloat(n):e.default}let D=I(()=>n(t.overrides[`--sf-switcher-threshold`],30)),O=I(()=>n(t.overrides[`--sf-sidebar-min-width`],50)),k=I(()=>n(t.overrides[`--sf-equal-min-col`],16)),A=I(()=>n(t.overrides[`--sf-cover-min-height`],100)),ee=I(()=>n(t.overrides[`--sf-imposter-margin`],1)),te=I(()=>n(t.overrides[`--sf-breakout-width`],90)),j=I(()=>n(t.overrides[`--sf-content-width`],75)),M=I(()=>n(t.overrides[`--sf-alternate-inner-gap`],1)),ne=I(()=>t.overrides[`--sf-frame-ratio`]??`16 / 9`),re=I(()=>t.overrides[`--sf-reel-item-width`]??`max-content`),ie=[`16 / 9`,`4 / 3`,`3 / 2`,`1 / 1`,`21 / 9`],ae=[{label:`auto`,value:`max-content`},{label:`12rem`,value:`12rem`},{label:`16rem`,value:`16rem`},{label:`20rem`,value:`20rem`}];var oe=wd(),se=z(oe),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var n=sd(),s=B(n),c=z(s),l=V(z(c),2);{let e=I(()=>`--sf-container-narrow`in t.overrides);$(l,{label:``,get value(){return U(r)},min:20,max:60,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-narrow`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-narrow`)})}F(c);var u=V(c,2),d=V(z(u),2);{let e=I(()=>`--sf-container-prose`in t.overrides);$(d,{label:``,get value(){return U(i)},min:40,max:90,step:1,unit:`ch`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-prose`,`${e}ch`),onReset:()=>t.onReset(`--sf-container-prose`)})}F(u);var f=V(u,2),p=V(z(f),2);{let e=I(()=>`--sf-container-default`in t.overrides);$(p,{label:``,get value(){return U(a)},min:50,max:120,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-default`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-default`)})}F(f);var m=V(f,2),h=V(z(m),2);{let e=I(()=>`--sf-container-wide`in t.overrides);$(h,{label:``,get value(){return U(o)},min:60,max:160,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-wide`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-wide`)})}F(m),F(s);var g=V(s,2);Y(g,21,()=>[{label:`narrow`,value:U(r),max:U(o),unit:`rem`},{label:`prose`,value:U(i),max:U(o)*1.5,unit:`ch`},{label:`default`,value:U(a),max:U(o),unit:`rem`},{label:`wide`,value:U(o),max:U(o),unit:`rem`}],e=>e.label,(e,t)=>{var n=od(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=z(a);F(a);var s=V(a,2),c=z(s);F(s),F(n),H(e=>{q(i,U(t).label),Z(o,e),q(c,`${U(t).value??``}${U(t).unit??``}`)},[()=>`width: ${Math.min(U(t).value/U(t).max*100,100)}%`]),K(e,n)}),F(g),K(e,n)};J(ue,e=>{U(g)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=cd(),r=B(n);{let e=I(()=>`--sf-center-max`in t.overrides);$(r,{label:`Max width`,get value(){return U(s)},min:30,max:160,step:1,unit:`rem`,help:`--sf-center-max — max-width of the .sf-center centering wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-max`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-max`),rawDefault:`var(--sf-container-default)`,get currentRaw(){return t.overrides[`--sf-center-max`]},onRawSet:e=>t.onSet(`--sf-center-max`,e)})}var i=V(r,2);{let e=I(()=>`--sf-center-gutter`in t.overrides);$(i,{label:`Gutter`,get value(){return U(c)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-center-gutter — minimum side padding inside the center wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-gutter`),rawDefault:`var(--sf-gutter)`,get currentRaw(){return t.overrides[`--sf-center-gutter`]},onRawSet:e=>t.onSet(`--sf-center-gutter`,e)})}K(e,n)};J(ge,e=>{U(_)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var r=ud(),i=B(r);{let e=I(()=>`--sf-grid-min`in t.overrides);$(i,{label:`Grid min cell width`,get value(){return U(l)},min:8,max:40,step:.5,unit:`rem`,help:`sf-grid minimum column width — browser auto-fills columns`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-grid-min`,`${e}rem`),onReset:()=>t.onReset(`--sf-grid-min`)})}var a=V(i,2),o=V(z(a),2);Y(o,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}],e=>e.token,(e,r)=>{{let i=I(()=>n(t.overrides[r.token],r.def)),a=I(()=>r.token in t.overrides);$(e,{get label(){return r.label},get value(){return U(i)},min:6,max:40,step:.5,unit:`rem`,get overridden(){return U(a)},onChange:e=>t.onSet(r.token,`${e}rem`),onReset:()=>t.onReset(r.token)})}}),F(o),F(a);var s=V(a,2),c=V(z(s),2);Y(c,20,()=>Array.from({length:8}),si,(e,t)=>{K(e,ld())}),F(c),F(s),H(e=>Z(c,e),[()=>`grid-template-columns: repeat(auto-fill, minmax(${Math.min(U(l)*16*(360/1200),120)}px, 1fr))`]),K(e,r)};J(Se,e=>{U(v)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var Oe=V(Te,2),P=e=>{var n=fd(),r=B(n),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-header-height-mobile`in t.overrides);$(a,{label:``,get value(){return U(u)},min:2,max:8,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-mobile`)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-header-height-desktop`in t.overrides);$(s,{label:``,get value(){return U(d)},min:3,max:10,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-desktop`)})}F(o),F(r);var c=V(r,2),l=z(c),f=V(z(l),2);Y(f,20,()=>[1,2,3],e=>e,(e,t)=>{K(e,dd())}),F(f),F(l);var p=V(l,2),m=z(p);F(p),F(c),H(e=>{Z(l,e),q(m,`${U(u)??``}rem mobile · ${U(d)??``}rem desktop`)},[()=>`height: ${Math.min(U(u)*12,64)}px`]),K(e,n)};J(Oe,e=>{U(y)&&e(P)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Me=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=pd(),r=V(B(n),2),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-sticky-offset-mobile`in t.overrides);$(a,{label:``,get value(){return U(p)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-mobile`),rawDefault:`var(--sf-header-height-mobile)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-mobile`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-mobile`,e)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-sticky-offset-desktop`in t.overrides);$(s,{label:``,get value(){return U(m)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-desktop`),rawDefault:`var(--sf-header-height-desktop)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-desktop`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-desktop`,e)})}F(o),F(r),K(e,n)};J(Pe,e=>{U(b)&&e(Fe)}),F(ke);var Ie=V(ke,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=md(),r=B(n);{let e=I(()=>`--sf-sidebar-width`in t.overrides);$(r,{label:`Sidebar width`,get value(){return U(f)},min:10,max:32,step:.5,unit:`rem`,help:`--sf-sidebar-width — default sidebar / drawer width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sidebar-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-sidebar-width`)})}var i=V(r,2),a=z(i),o=z(a),s=z(o);F(o),F(a),Ne(2),F(i),H(e=>{Z(a,e),q(s,`${U(f)??``}rem`)},[()=>`width: ${Math.min(U(f)*3.5,100)}px`]),K(e,n)};J(Be,e=>{U(x)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ue=z(He),Ke=V(z(Ue),2),qe=z(Ke,!0);F(Ke),F(Ue);var Je=V(Ue,2),Ye=e=>{var n=hd();Y(n,21,()=>h,e=>e.token,(e,n)=>{{let r=I(()=>E(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,U(n).unit?`${e}${U(n).unit}`:String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(n),K(e,n)};J(Je,e=>{U(S)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var r=bd(),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-switcher-threshold`in t.overrides);$(a,{label:`Threshold`,get value(){return U(D)},min:10,max:60,step:1,unit:`rem`,help:`--sf-switcher-threshold — width below which .sf-switcher stacks vertically`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-switcher-threshold`,`${e}rem`),onReset:()=>t.onReset(`--sf-switcher-threshold`)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-sidebar-min-width`in t.overrides);$(s,{label:`Content min width`,get value(){return U(O)},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 U(e)},onChange:e=>t.onSet(`--sf-sidebar-min-width`,`${e}%`),onReset:()=>t.onReset(`--sf-sidebar-min-width`)})}F(o);var c=V(o,2);Y(V(z(c),2),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`]}],e=>e.token,(e,n)=>{var r=vd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Y(o,20,()=>n.opts,e=>e,(e,t)=>{var n=gd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(o);var s;Ai(o);var c=V(o,2),l=e=>{var r=_d();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(c,e=>{n.token in t.overrides&&e(l)}),F(r),H(()=>{q(a,n.label),s!==(s=t.overrides[n.token]??n.def)&&(o.value=(o.__value=t.overrides[n.token]??n.def)??``,ki(o,t.overrides[n.token]??n.def))}),W(`change`,o,e=>{let r=e.target.value;r===n.def?t.onReset(n.token):t.onSet(n.token,r)}),K(e,r)}),F(c);var l=V(c,2),u=V(z(l),2);{let e=I(()=>`--sf-equal-min-col`in t.overrides);$(u,{label:`Min column`,get value(){return U(k)},min:6,max:36,step:.5,unit:`rem`,help:`--sf-equal-min-col — minimum column width for .sf-equal`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-equal-min-col`,`${e}rem`),onReset:()=>t.onReset(`--sf-equal-min-col`)})}var d=V(u,2),f=V(z(d),2);Y(f,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}],e=>e.token,(e,r)=>{{let i=I(()=>n(t.overrides[r.token],r.def)),a=I(()=>r.token in t.overrides);$(e,{get label(){return r.label},get value(){return U(i)},min:4,max:36,step:.5,unit:`rem`,get overridden(){return U(a)},onChange:e=>t.onSet(r.token,`${e}rem`),onReset:()=>t.onReset(r.token)})}}),F(f),F(d),F(l);var p=V(l,2),m=V(z(p),2);{let e=I(()=>`--sf-cover-min-height`in t.overrides);$(m,{label:`Min height`,get value(){return U(A)},min:20,max:100,step:1,unit:`dvh`,help:`--sf-cover-min-height — minimum height of the .sf-cover layout`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-cover-min-height`,`${e}dvh`),onReset:()=>t.onReset(`--sf-cover-min-height`)})}F(p);var h=V(p,2),g=V(z(h),4);Y(g,20,()=>ie,e=>e,(e,n)=>{var r=yd(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,n)},[()=>`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${U(ne).replace(/\s/g,``)===n.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`}`]),W(`click`,r,()=>n===`16 / 9`?t.onReset(`--sf-frame-ratio`):t.onSet(`--sf-frame-ratio`,n)),K(e,r)}),F(g),F(h);var _=V(h,2),v=V(z(_),4);Y(v,21,()=>ae,e=>e.value,(e,n)=>{var r=yd(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${U(re)===U(n).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`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`max-content`?t.onReset(`--sf-reel-item-width`):t.onSet(`--sf-reel-item-width`,U(n).value)),K(e,r)}),F(v);var y=V(v,2),b=V(z(y),2);Hi(b);var x=V(b,2),S=e=>{var n=_d();W(`click`,n,()=>t.onReset(`--sf-reel-height`)),K(e,n)};J(x,e=>{`--sf-reel-height`in t.overrides&&e(S)}),F(y),F(_);var C=V(_,2),w=V(z(C),2);{let e=I(()=>`--sf-imposter-margin`in t.overrides);$(w,{label:`Margin`,get value(){return U(ee)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-imposter-margin — viewport inset for the centered .sf-imposter overlay`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-imposter-margin`,`${e}rem`),onReset:()=>t.onReset(`--sf-imposter-margin`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-imposter-margin`]},onRawSet:e=>t.onSet(`--sf-imposter-margin`,e)})}F(C);var T=V(C,2),E=V(z(T),2);{let e=I(()=>`--sf-content-width`in t.overrides);$(E,{label:`Content width`,get value(){return U(j)},min:40,max:120,step:1,unit:`rem`,help:`--sf-content-width — default reading column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-width`),rawDefault:`var(--sf-container-default)`,get currentRaw(){return t.overrides[`--sf-content-width`]},onRawSet:e=>t.onSet(`--sf-content-width`,e)})}var oe=V(E,2);{let e=I(()=>`--sf-breakout-width`in t.overrides);$(oe,{label:`Breakout width`,get value(){return U(te)},min:50,max:160,step:1,unit:`rem`,help:`--sf-breakout-width — wide breakout column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-breakout-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-breakout-width`),rawDefault:`var(--sf-container-wide)`,get currentRaw(){return t.overrides[`--sf-breakout-width`]},onRawSet:e=>t.onSet(`--sf-breakout-width`,e)})}F(T);var se=V(T,2),N=V(z(se),2);{let e=I(()=>`--sf-alternate-inner-gap`in t.overrides);$(N,{label:`Inner gap`,get value(){return U(M)},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 U(e)},onChange:e=>t.onSet(`--sf-alternate-inner-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-alternate-inner-gap`),rawDefault:`var(--sf-gap)`,get currentRaw(){return t.overrides[`--sf-alternate-inner-gap`]},onRawSet:e=>t.onSet(`--sf-alternate-inner-gap`,e)})}F(se),F(r),H(()=>Ui(b,t.overrides[`--sf-reel-height`]??``)),W(`input`,b,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-reel-height`,n):t.onReset(`--sf-reel-height`)}),K(e,r)};J(et,e=>{U(C)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=Sd();Y(V(z(n),2),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`}],e=>e.token,(e,n)=>{var r=xd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Hi(o);var s=V(o,2),c=e=>{var r=_d();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Ui(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(n),K(e,n)};J(ot,e=>{U(T)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var r=Cd(),i=V(z(r),2);Y(i,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`]}],e=>e.token,(e,n)=>{var r=vd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Y(o,20,()=>n.opts,e=>e,(e,t)=>{var n=gd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(o);var s;Ai(o);var c=V(o,2),l=e=>{var r=_d();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(c,e=>{n.token in t.overrides&&e(l)}),F(r),H(()=>{q(a,n.label),s!==(s=t.overrides[n.token]??n.placeholder)&&(o.value=(o.__value=t.overrides[n.token]??n.placeholder)??``,ki(o,t.overrides[n.token]??n.placeholder))}),W(`change`,o,e=>{let r=e.target.value;r===n.placeholder?t.onReset(n.token):t.onSet(n.token,r)}),K(e,r)});var a=V(i,2);{let e=I(()=>n(t.overrides[`--sf-bg-inset`],0)),r=I(()=>`--sf-bg-inset`in t.overrides);$(a,{label:`Inset`,get value(){return U(e)},min:0,max:4,step:.25,unit:`rem`,help:`--sf-bg-inset — inset the background from the container edges`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-inset`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-inset`)})}var o=V(a,2);{let e=I(()=>n(t.overrides[`--sf-bg-radius`],0)),r=I(()=>`--sf-bg-radius`in t.overrides);$(o,{label:`Radius`,get value(){return U(e)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-bg-radius — corner radius of the background element`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-radius`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-radius`)})}var s=V(o,2);{let e=I(()=>n(t.overrides[`--sf-bg-z`],-2)),r=I(()=>`--sf-bg-z`in t.overrides);$(s,{label:`Z-index`,get value(){return U(e)},min:-10,max:0,step:1,help:`--sf-bg-z — stack order of the background pseudo-element (typically negative)`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-z`,String(e)),onReset:()=>t.onReset(`--sf-bg-z`)})}F(r),K(e,r)};J(ft,e=>{U(w)&&e(pt)}),F(ct),F(oe),H(()=>{Q(N,`aria-expanded`,U(g)),q(le,U(g)?`▲`:`▼`),Q(pe,`aria-expanded`,U(_)),q(he,U(_)?`▲`:`▼`),Q(ye,`aria-expanded`,U(v)),q(xe,U(v)?`▲`:`▼`),Q(Te,`aria-expanded`,U(y)),q(De,U(y)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(b)),q(Me,U(b)?`▲`:`▼`),Q(Le,`aria-expanded`,U(x)),q(ze,U(x)?`▲`:`▼`),Q(Ue,`aria-expanded`,U(S)),q(qe,U(S)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(C)),q($e,U(C)?`▲`:`▼`),Q(rt,`aria-expanded`,U(T)),q(at,U(T)?`▲`:`▼`),Q(lt,`aria-expanded`,U(w)),q(dt,U(w)?`▲`:`▼`)}),W(`click`,N,()=>{R(g,!U(g))}),W(`click`,pe,()=>{R(_,!U(_))}),W(`click`,ye,()=>{R(v,!U(v))}),W(`click`,Te,()=>{R(y,!U(y))}),W(`click`,Ae,()=>{R(b,!U(b))}),W(`click`,Le,()=>{R(x,!U(x))}),W(`click`,Ue,()=>{R(S,!U(S))}),W(`click`,Ze,()=>{R(C,!U(C))}),W(`click`,rt,()=>{R(T,!U(T))}),W(`click`,lt,()=>{R(w,!U(w))}),K(e,oe),Ge()}Ur([`click`,`change`,`input`]);var Ed=G(`<!> <p class="text-[9px] text-slate-600">Drives --sf-color-border--strong, --subtle, --translucent automatically.</p>`,1),Dd=G(`<div class="flex items-center gap-3"><span class="text-[9px] font-mono text-slate-600 w-10"> </span> <div class="flex-1 bg-indigo-400/50 rounded"></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>`),Od=G(`<!> <!> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>`,1),kd=G(`<button><span class="block mx-auto mb-0.5"></span> </button>`),Ad=G(`<div><div class="text-[9px] text-slate-500 mb-1.5"> </div> <div class="flex flex-col gap-1"></div></div>`),jd=G(`<div class="grid grid-cols-2 gap-3"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center gap-3"><div class="px-4 py-2 rounded-lg text-[11px] text-slate-300 bg-white/4">Border sample</div> <span class="text-[9px] font-mono text-slate-600"> </span></div>`,1),Md=G(`<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Color</div> <!></div> <!> <!>`,1),Nd=G(`<!> <!> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Ring color</div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center"><div class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-200">Focus preview</div></div>`,1),Pd=G(`<div class="mt-2 space-y-2 pl-2 border-l border-white/10"></div>`),Fd=G(`<div class="flex flex-col items-center gap-1"><div class="w-10 h-10 bg-indigo-500/40 border border-indigo-500/30"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>`),Id=G(`<div class="bg-white/4 rounded-xl border border-white/8 p-4"><div class="flex gap-3 flex-wrap"></div></div>`),Ld=G(`<div class="mt-2 space-y-2"></div>`),Rd=G(`<div class="mt-3 space-y-4"></div>`),zd=G(`<div class="p-4 space-y-5"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Border color</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Border widths</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line styles</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Dividers</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Focus ring</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Radius</div> <div><button class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1"><span>Fine-tune radius steps</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div><button class="w-full flex items-center justify-between cursor-pointer mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Radius preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Component shape</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"><div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div> <span class="text-[10px]"> </span></button> <!></div></div>`);function Bd(e,t){We(t,!0);let n=[`solid`,`dashed`,`dotted`],r=[`xs`,`s`,`m`,`l`,`xl`,`2xl`,`full`],i={xs:2,s:4,m:8,l:12,xl:16,"2xl":24,full:9999},a=[{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))`}],o=[{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`}],s=Gc.borders??[],c=L(!1),l=L(!1),u=L(!1),d=L(!1),f=L(!1),p=L(!1),m=L(!1),h=L(!1),g=L(!1);function _(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let v=I(()=>_(t.overrides[`--sf-radius-scale`],1)),y=I(()=>_(t.overrides[`--sf-border-scale`],1)),b=I(()=>_(t.overrides[`--sf-focus-ring-width`],2,`px`)),x=I(()=>_(t.overrides[`--sf-focus-ring-offset`],2,`px`)),S=I(()=>_(t.overrides[`--sf-divider-width`]?.replace(`px`,``),1)),C=I(()=>_(t.overrides[`--sf-divider-gap`]?.replace(`rem`,``),1)),w=I(()=>t.overrides[`--sf-color-border`]??``),T=I(()=>t.overrides[`--sf-border-style`]??`solid`),E=I(()=>t.overrides[`--sf-focus-ring-color`]??``),D=I(()=>t.overrides[`--sf-divider-color`]??``);function O(e,n){return t.overrides[e]??n}function k(e){let n=t.overrides[e.name];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}function A(e){let n=t.overrides[e.token];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}var ee=zd(),te=z(ee),j=z(te),M=V(z(j),2),ne=z(M,!0);F(M),F(j);var re=V(j,2),ie=e=>{var n=Ed(),r=B(n);{let e=I(()=>`--sf-color-border`in t.overrides);Tl(r,{token:`--sf-color-border`,get value(){return U(w)},placeholder:`auto-derived`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-color-border`,e),onReset:()=>t.onReset(`--sf-color-border`)})}Ne(2),K(e,n)};J(re,e=>{U(c)&&e(ie)}),F(te);var ae=V(te,4),oe=z(ae),se=V(z(oe),2),N=z(se,!0);F(se),F(oe);var ce=V(oe,2),le=e=>{var n=Od(),r=B(n);{let e=I(()=>`--sf-border-scale`in t.overrides);$(r,{label:`Border scale`,get value(){return U(y)},min:0,max:4,step:.25,help:`Multiplier applied to all border widths. 0 hides all borders.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-border-scale`,String(e)),onReset:()=>t.onReset(`--sf-border-scale`)})}var i=V(r,2);{let e=I(()=>_(t.overrides[`--sf-border-width-hairline`]?.replace(`px`,``),.5)),n=I(()=>`--sf-border-width-hairline`in t.overrides);$(i,{label:`Hairline`,get value(){return U(e)},min:0,max:1,step:.25,unit:`px`,help:`--sf-border-width-hairline — ultra-thin border for retina displays`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-border-width-hairline`,`${e}px`),onReset:()=>t.onReset(`--sf-border-width-hairline`)})}var a=V(i,2);{let e=I(()=>_(t.overrides[`--sf-box-border-width`]?.replace(`px`,``),0)),n=I(()=>`--sf-box-border-width`in t.overrides);$(a,{label:`Box border`,get value(){return U(e)},min:0,max:4,step:.5,unit:`px`,help:`--sf-box-border-width — box-shadow border drawn without affecting layout`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-box-border-width`,`${e}px`),onReset:()=>t.onReset(`--sf-box-border-width`)})}var o=V(a,2);Y(o,20,()=>[1,2,3,4],e=>e,(e,t)=>{var n=Dd(),r=z(n),i=z(r);F(r);var a=V(r,2),o=V(a,2),s=z(o);F(o),F(n),H((e,n)=>{q(i,`${t??``}px →`),Z(a,e),q(s,`${n??``}px`)},[()=>`height: ${Math.max(t*U(y),.5)}px`,()=>(t*U(y)).toFixed(1)]),K(e,n)}),F(o),K(e,n)};J(ce,e=>{U(l)&&e(le)}),F(ae);var ue=V(ae,4),de=z(ue),fe=V(z(de),2),pe=z(fe,!0);F(fe),F(de);var me=V(de,2),he=e=>{var r=jd(),i=B(r);Y(i,20,()=>[{label:`Border`,token:`--sf-border-style`,default:`solid`},{label:`Divider`,token:`--sf-divider-style`,default:`solid`}],e=>e.token,(e,r)=>{var i=Ad(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,20,()=>n,e=>e,(e,n)=>{let i=I(()=>O(r.token,r.default));var a=kd(),o=z(a),s=V(o);F(a),H(()=>{X(a,1,`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${U(i)===n?`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`}`),Z(o,`width: 20px; height: 0; border-bottom: 2px ${n} currentColor; opacity: 0.7`),q(s,` ${n??``}`)}),W(`click`,a,()=>n===r.default?t.onReset(r.token):t.onSet(r.token,n)),K(e,a)}),F(s),F(i),H(()=>q(o,r.label)),K(e,i)}),F(i);var a=V(i,2),o=z(a),s=V(o,2),c=z(s);F(s),F(a),H((e,t)=>{Z(o,e),q(c,`${t??``}px · ${U(T)??``}`)},[()=>`border: ${Math.max(U(y),.5)}px ${U(T)} ${U(w)||`var(--sf-color-border, #64748b)`}`,()=>(1*U(y)).toFixed(1)]),K(e,r)};J(me,e=>{U(u)&&e(he)}),F(ue);var ge=V(ue,4),_e=z(ge),ve=V(z(_e),2),ye=z(ve,!0);F(ve),F(_e);var be=V(_e,2),xe=e=>{var n=Md(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-divider-color`in t.overrides);Tl(i,{token:`--sf-divider-color`,get value(){return U(D)},placeholder:`inherits border`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-divider-color`,e),onReset:()=>t.onReset(`--sf-divider-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-divider-width`in t.overrides);$(a,{label:`Width`,get value(){return U(S)},min:.5,max:4,step:.5,unit:`px`,help:`--sf-divider-width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-width`,`${e}px`),onReset:()=>t.onReset(`--sf-divider-width`),rawDefault:`var(--sf-border-width-1)`,get currentRaw(){return t.overrides[`--sf-divider-width`]},onRawSet:e=>t.onSet(`--sf-divider-width`,e)})}var o=V(a,2);{let e=I(()=>`--sf-divider-gap`in t.overrides);$(o,{label:`Gap`,get value(){return U(C)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-divider-gap — spacing around divider lines`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-divider-gap`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-divider-gap`]},onRawSet:e=>t.onSet(`--sf-divider-gap`,e)})}K(e,n)};J(be,e=>{U(d)&&e(xe)}),F(ge);var Se=V(ge,4),Ce=z(Se),we=V(z(Ce),2),Te=z(we,!0);F(we),F(Ce);var Ee=V(Ce,2),De=e=>{var n=Nd(),r=B(n);{let e=I(()=>`--sf-focus-ring-width`in t.overrides);$(r,{label:`Ring width`,get value(){return U(b)},min:0,max:6,step:.5,unit:`px`,help:`Thickness of the keyboard focus indicator`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-width`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-width`)})}var i=V(r,2);{let e=I(()=>`--sf-focus-ring-offset`in t.overrides);$(i,{label:`Ring offset`,get value(){return U(x)},min:0,max:8,step:.5,unit:`px`,help:`Gap between element edge and focus ring`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-offset`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-offset`)})}var a=V(i,2),o=V(z(a),2);{let e=I(()=>`--sf-focus-ring-color`in t.overrides);Tl(o,{token:`--sf-focus-ring-color`,get value(){return U(E)},placeholder:`default (action)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-focus-ring-color`,e),onReset:()=>t.onReset(`--sf-focus-ring-color`)})}F(a);var s=V(a,2),c=z(s);F(s),H(()=>Z(c,`outline: ${U(b)}px solid ${U(E)||`oklch(0.7 0.2 235)`}; outline-offset: ${U(x)}px`)),K(e,n)};J(Ee,e=>{U(f)&&e(De)}),F(Se);var Oe=V(Se,6),P=z(Oe),ke=V(z(P),2),Ae=z(ke,!0);F(ke),F(P);var je=V(P,2),Me=e=>{var n=Pd();Y(n,21,()=>a,e=>e.name,(e,n)=>{{let r=I(()=>k(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).step},get value(){return U(r)},min:0,get max(){return U(n).max},get step(){return U(n).step_size},unit:`px`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}px`),onReset:()=>t.onReset(U(n).name),get rawDefault(){return U(n).rawDefault},get currentRaw(){return t.overrides[U(n).name]},onRawSet:e=>t.onSet(U(n).name,e)})}}),F(n),K(e,n)};J(je,e=>{U(h)&&e(Me)}),F(Oe);var Pe=V(Oe,2),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var t=Id(),n=z(t);Y(n,20,()=>r,e=>e,(e,t)=>{let n=I(()=>i[t]??6),r=I(()=>t===`full`?9999:U(n)*U(v));var a=Fd(),o=z(a),s=V(o,2),c=z(s,!0);F(s),F(a),H(e=>{Z(o,e),q(c,t)},[()=>`border-radius: ${Math.min(U(r),9999)}px`]),K(e,a)}),F(n),F(t),K(e,t)};J(Re,e=>{U(m)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ue=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var n=Ld();Y(n,21,()=>o,e=>e.token,(e,n)=>{{let r=I(()=>A(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).help},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}${U(n).unit}`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).rawDefault},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}}),F(n),K(e,n)};J(Ke,e=>{U(g)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var n=Rd();Y(n,21,()=>s,e=>e.name,(e,n)=>{ll(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(Qe,e=>{U(p)&&e($e)}),F(Je),F(ee),H(()=>{Q(j,`aria-expanded`,U(c)),q(ne,U(c)?`▲`:`▼`),Q(oe,`aria-expanded`,U(l)),q(N,U(l)?`▲`:`▼`),Q(de,`aria-expanded`,U(u)),q(pe,U(u)?`▲`:`▼`),Q(_e,`aria-expanded`,U(d)),q(ye,U(d)?`▲`:`▼`),Q(Ce,`aria-expanded`,U(f)),q(Te,U(f)?`▲`:`▼`),Q(P,`aria-expanded`,U(h)),q(Ae,U(h)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(m)),q(Le,U(m)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(g)),q(Ue,U(g)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(p)),q(Ze,U(p)?`▲`:`▼`)}),W(`click`,j,()=>{R(c,!U(c))}),W(`click`,oe,()=>{R(l,!U(l))}),W(`click`,de,()=>{R(u,!U(u))}),W(`click`,_e,()=>{R(d,!U(d))}),W(`click`,Ce,()=>{R(f,!U(f))}),W(`click`,P,()=>{R(h,!U(h))}),W(`click`,Fe,()=>{R(m,!U(m))}),W(`click`,Ve,()=>{R(g,!U(g))}),W(`click`,Ye,()=>{R(p,!U(p))}),K(e,ee),Ge()}Ur([`click`]);var Vd=G(`<div class="flex flex-col items-center gap-2"><div class="bg-[#1a1a2e] border border-white/8 rounded-lg"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>`),Hd=G(`<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Shadow color</div> <!> <p class="text-[9px] text-slate-600 mt-1">Warm, cool or brand-tinted shadows. Default uses neutral hue.</p></div>`),Ud=G(`<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Glow color</div> <!> <p class="text-[9px] text-slate-600 mt-1">Which brand color radiates the glow. Defaults to primary.</p></div>`),Wd=G(`<p class="text-[9px] text-slate-600 text-center">Glow disabled.</p>`),Gd=G(`<div class="flex items-center justify-between p-3 rounded-xl bg-white/4 border border-white/8"><div><div class="text-[11px] font-semibold text-slate-200">Shadow glow</div> <div class="text-[9px] text-slate-500 mt-0.5">Ambient glow on elevated surfaces</div></div> <button><div></div></button></div> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-6 flex items-center justify-center"><div class="w-16 h-16 bg-[#1a1a2e] border border-white/8 rounded-xl"></div></div> <!>`,1),Kd=G(`<div class="space-y-4"></div>`),qd=G(`<div class="p-4 space-y-5"><div class="bg-white/4 rounded-xl border border-white/8 p-4 flex gap-4 flex-wrap items-end justify-center"></div> <div class="h-px bg-white/6"></div> <!> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Shadow color</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Glow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"><div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div> <span class="text-[10px]"> </span></button> <!></section></div>`);function Jd(e,t){We(t,!0);let n=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],r=Gc.shadows??[],i=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-shadow-lightness`]??`0.15`);return isFinite(e)?e:.15})()),a=I(()=>t.overrides[`--sf-shadow-color`]??``),o=I(()=>t.overrides[`--sf-shadow-glow-color`]??``),s=I(()=>t.overrides[`--sf-shadow-glow`]===`none`),c=L(!1),l=L(!1),u=L(!1);var d=qd(),f=z(d);Y(f,22,()=>n,e=>e,(e,t,n)=>{var r=Vd(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(()=>{Z(i,`width: ${40+U(n)*4}px; height: ${40+U(n)*4}px; box-shadow: var(--sf-shadow-${t})`),q(o,t)}),K(e,r)}),F(f);var p=V(f,4);{let e=I(()=>`--sf-shadow-lightness`in t.overrides);$(p,{label:`Shadow lightness`,get value(){return U(i)},min:0,max:.5,step:.01,help:`--sf-shadow-lightness — OKLCH lightness of the shadow color. Lower = darker, more visible shadows.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-shadow-lightness`,String(e)),onReset:()=>t.onReset(`--sf-shadow-lightness`)})}var m=V(p,4),h=z(m),g=V(z(h),2),_=z(g,!0);F(g),F(h);var v=V(h,2),y=e=>{var n=Hd(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-color`in t.overrides);Tl(r,{token:`--sf-shadow-color`,get value(){return U(a)},placeholder:`auto (neutral hue)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-color`,e),onReset:()=>t.onReset(`--sf-shadow-color`)})}Ne(2),F(n),K(e,n)};J(v,e=>{U(c)&&e(y)}),F(m);var b=V(m,4),x=z(b),S=V(z(x),2),C=z(S,!0);F(S),F(x);var w=V(x,2),T=e=>{var n=Gd(),r=B(n),i=V(z(r),2),a=z(i);F(i),F(r);var c=V(r,2),l=e=>{var n=Ud(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-glow-color`in t.overrides);Tl(r,{token:`--sf-shadow-glow-color`,get value(){return U(o)},placeholder:`default (primary color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-glow-color`,e),onReset:()=>t.onReset(`--sf-shadow-glow-color`)})}Ne(2),F(n),K(e,n)};J(c,e=>{U(s)||e(l)});var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=e=>{K(e,Wd())};J(f,e=>{U(s)&&e(p)}),H(()=>{Q(i,`aria-label`,U(s)?`Enable shadow glow`:`Disable shadow glow`),X(i,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(s)?`bg-white/10`:`bg-indigo-600`}`),X(a,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(s)?`translate-x-0.5`:`translate-x-4`}`),Z(d,`box-shadow: ${U(s)?`none`:`var(--sf-shadow-glow)`}`)}),W(`click`,i,()=>{U(s)?t.onReset(`--sf-shadow-glow`):t.onSet(`--sf-shadow-glow`,`none`)}),K(e,n)};J(w,e=>{U(l)&&e(T)}),F(b);var E=V(b,4),D=z(E),O=V(z(D),2),k=z(O,!0);F(O),F(D);var A=V(D,2),ee=e=>{var n=Kd();Y(n,21,()=>r,e=>e.name,(e,n)=>{ll(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(A,e=>{U(u)&&e(ee)}),F(E),F(d),H(()=>{Q(h,`aria-expanded`,U(c)),q(_,U(c)?`▲`:`▼`),Q(x,`aria-expanded`,U(l)),q(C,U(l)?`▲`:`▼`),Q(D,`aria-expanded`,U(u)),q(k,U(u)?`▲`:`▼`)}),W(`click`,h,()=>{R(c,!U(c))}),W(`click`,x,()=>{R(l,!U(l))}),W(`click`,D,()=>{R(u,!U(u))}),K(e,d),Ge()}Ur([`click`]);var Yd=G(`<div class="rounded-lg bg-amber-500/10 border border-amber-500/20 p-2.5"><p class="text-[10px] text-amber-300">Motion is disabled — duration & easing have no effect while scale is 0.</p></div>`),Xd=G(`<option style="background:#16161e;"> </option>`),Zd=G(`<span class="text-amber-400">(No effect while motion is disabled.)</span>`),Qd=G(`<div class="flex items-center gap-3"><span class="text-[10px] text-slate-500 w-14 shrink-0"> </span> <div class="flex-1 h-1 bg-white/8 rounded-full overflow-hidden"><div class="h-full bg-indigo-500 rounded-full"></div></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>`),$d=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Named duration tokens. Drag to set an absolute ms value, overriding the global scale. <!></p> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-4 space-y-3"></div>`,1),ef=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>`),tf=G(`<div><div class="flex items-center gap-2.5"><svg width="40" height="28" viewBox="0 0 40 28" class="overflow-visible shrink-0"><path stroke="rgb(99 102 241 / 0.6)" stroke-width="1.5" fill="none" stroke-linecap="round"></path></svg> <div class="flex-1 min-w-0"><div class="flex items-center justify-between mb-1"><span class="text-[10px] font-semibold text-slate-300"> </span> <div class="flex items-center gap-1.5"><button class="text-[8px] text-slate-500 hover:text-indigo-400 cursor-pointer">preview</button> <!></div></div> <input type="text" class="w-full bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/></div></div></div>`),nf=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Edit the named easing tokens. Accepts any CSS timing function — <span class="font-mono text-slate-400">cubic-bezier(…)</span> or <span class="font-mono text-slate-400">linear(…)</span>. Use “Live preview” above to feel a curve.</p> <div class="space-y-2"></div>`,1),rf=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>`),af=G(`<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-6"> </span> <div class="flex-1 h-1.5 bg-white/8 rounded-full"><div class="h-full bg-indigo-500 rounded-full"></div></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>`),of=G(`<p class="text-[10px] text-slate-600 leading-relaxed">One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).</p> <div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200">Stagger base</span> <!></div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1"></div>`,1),sf=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),cf=G(`<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0"> </div> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),lf=G(`<div class="space-y-4"></div> <!> <div class="space-y-2"><p class="text-[10px] text-slate-600 leading-relaxed">Default animation-range for scroll-driven animations using the <span class="font-mono text-slate-400">.sf-scroll-timeline</span> utility.</p> <!></div>`,1),uf=G(`<div class="p-4 space-y-5"><div class="flex items-center justify-between p-3 rounded-xl bg-white/4 border border-white/8"><div><div class="text-[11px] font-semibold text-slate-200">Disable motion</div> <div class="text-[9px] text-slate-500 mt-0.5">Respects prefers-reduced-motion</div></div> <button><div></div></button></div> <!> <section class="space-y-3"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Live preview</div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 space-y-3"><div class="relative h-10 overflow-hidden rounded"><div class="absolute top-1 h-8 w-8 bg-indigo-500 rounded-lg"></div></div> <div class="flex items-center gap-2"><select aria-label="Preview easing" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"></select> <select aria-label="Preview duration" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"></select> <button class="px-3 py-1.5 rounded-lg text-[10px] font-bold border border-indigo-500/40 bg-indigo-500/10 text-indigo-300 hover:bg-indigo-500/20 transition-all cursor-pointer disabled:opacity-40 shrink-0"> </button></div></div></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Durations</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Easing curves</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Stagger</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"><div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div> <span class="text-[10px]"> </span></button> <!></section></div>`);function df(e,t){We(t,!0);let n=[{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}],r=[{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`}],i=[`--sf-animation-delay-1`,`--sf-animation-delay-2`,`--sf-animation-delay-3`,`--sf-animation-delay-4`,`--sf-animation-delay-5`],a=Gc.motion??[],o=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-motion-scale`]??`1`);return isFinite(e)?e:1})()),s=I(()=>t.overrides[`--sf-motion-scale`]===`0`),c=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-theme-transition-duration`]?.replace(`ms`,``)??String(300*U(o)));return isFinite(e)?e:Math.round(300*U(o))})()),l=I(()=>{let e=t.overrides[i[0]];return e?parseFloat(e.replace(`ms`,``)):75*U(o)}),u=L(!1),d=L(0),f=L(`--sf-ease-out`),p=L(`--sf-duration-normal`),m=L(!1),h=L(!1),g=L(!1),_=L(!1);function v(e,n){let r=t.overrides[e];if(r){let e=parseFloat(r);if(isFinite(e))return e}return Math.round(n*U(o))}function y(e){return t.overrides[e]??r.find(t=>t.token===e)?.value??`ease`}function b(){if(U(u))return;let e=n.find(e=>e.token===U(p))?.base??250,t=v(U(p),e);R(u,!0),R(d,180),setTimeout(()=>{R(d,0),setTimeout(()=>{R(u,!1)},t)},t)}function x(e){let n={};for(let t=1;t<=5;t++)n[`--sf-animation-delay-${t}`]=`${Math.round(e*t)}ms`;t.onBulkChange(n)}function S(){let e={};for(let t=1;t<=5;t++)e[`--sf-animation-delay-${t}`]=null;t.onBulkChange(e)}var C=uf(),w=z(C),T=V(z(w),2),E=z(T);F(T),F(w);var D=V(w,2),O=e=>{K(e,Yd())};J(D,e=>{U(s)&&e(O)});var k=V(D,2),A=V(z(k),2),ee=z(A),te=z(ee);F(ee);var j=V(ee,2),M=z(j);Y(M,21,()=>r,e=>e.token,(e,t)=>{var n=Xd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).token)&&(n.value=(n.__value=U(t).token)??``)}),K(e,n)}),F(M);var ne;Ai(M);var re=V(M,2);Y(re,21,()=>n,e=>e.token,(e,t)=>{var n=Xd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).token)&&(n.value=(n.__value=U(t).token)??``)}),K(e,n)}),F(re);var ie;Ai(re);var ae=V(re,2),oe=z(ae,!0);F(ae),F(j),F(A),F(k);var se=V(k,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var r=$d(),i=B(r),a=V(z(i)),o=e=>{K(e,Zd())};J(a,e=>{U(s)&&e(o)}),F(i);var c=V(i,2);Y(c,17,()=>n,e=>e.token,(e,n)=>{let r=I(()=>v(U(n).token,U(n).base));{let i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:10,unit:`ms`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}ms`),onReset:()=>t.onReset(U(n).token)})}});var l=V(c,2);Y(l,21,()=>n,e=>e.label,(e,t)=>{let n=I(()=>v(U(t).token,U(t).base));var r=Qd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),l=z(c);F(c),F(r),H(e=>{q(a,U(t).label),Z(s,e),q(l,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/1200*100,100)}%`]),K(e,r)}),F(l),K(e,r)};J(ue,e=>{U(m)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=nf(),i=V(B(n),2);Y(i,21,()=>r,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=tf(),a=z(i),o=z(a),s=z(o);F(o);var c=V(o,2),l=z(c),u=z(l),d=z(u,!0);F(u);var p=V(u,2),m=z(p),h=V(m,2),g=e=>{var r=ef();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(h,e=>{U(r)&&e(g)}),F(p),F(l);var _=V(l,2);Hi(_),F(c),F(a),F(i),H(()=>{X(i,1,`p-2.5 rounded-xl border transition-all ${U(r)?`bg-indigo-500/10 border-indigo-500/30`:`border-white/8 bg-white/3`}`),Q(s,`d`,U(n).preview),q(d,U(n).label),Ui(_,t.overrides[U(n).token]??``),Q(_,`placeholder`,U(n).value)}),W(`click`,m,()=>{R(f,U(n).token,!0),b()}),W(`input`,_,e=>{let r=e.target.value.trim();r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,i)}),F(i),K(e,n)};J(ge,e=>{U(h)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=of(),r=V(B(n),2),a=z(r),o=V(z(a),2),s=e=>{var t=rf();W(`click`,t,S),K(e,t)},c=I(()=>i.some(e=>e in t.overrides));J(o,e=>{U(c)&&e(s)}),F(a);var u=V(a,2);{let e=I(()=>Math.round(U(l))),n=I(()=>i.some(e=>e in t.overrides));$(u,{label:``,get value(){return U(e)},min:0,max:200,step:5,unit:`ms`,help:`Base unit for --sf-animation-delay-1 through -5`,get overridden(){return U(n)},onChange:e=>x(e),onReset:S})}F(r);var d=V(r,2);Y(d,20,()=>[1,2,3,4,5],e=>e,(e,t)=>{let n=I(()=>Math.round(U(l)*t));var r=af(),i=z(r),a=z(i);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),u=z(c);F(c),F(r),H(e=>{q(a,`–${t??``}`),Z(s,e),q(u,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/600*100,100)}%`]),K(e,r)}),F(d),K(e,n)};J(Se,e=>{U(g)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var Oe=V(Te,2),P=e=>{var n=lf(),r=B(n);Y(r,21,()=>a,e=>e.name,(e,n)=>{ll(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(r);var i=V(r,2);{let e=I(()=>`--sf-theme-transition-duration`in t.overrides);$(i,{label:`Theme switch speed`,get value(){return U(c)},min:0,max:600,step:10,unit:`ms`,help:`--sf-theme-transition-duration — dark/light color-scheme switch animation speed`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-theme-transition-duration`,`${e}ms`),onReset:()=>t.onReset(`--sf-theme-transition-duration`)})}var o=V(i,2);Y(V(z(o),2),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%`}],e=>e.token,(e,n)=>{var r=cf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Hi(o);var s=V(o,2),c=e=>{var r=sf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Ui(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(o),K(e,n)};J(Oe,e=>{U(_)&&e(P)}),F(we),F(C),H(e=>{Q(T,`title`,U(s)?`Enable motion`:`Disable motion`),X(T,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(s)?`bg-indigo-600`:`bg-white/10`}`),X(E,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(s)?`translate-x-4`:`translate-x-0.5`}`),Z(te,e),ne!==(ne=U(f))&&(M.value=(M.__value=U(f))??``,ki(M,U(f))),ie!==(ie=U(p))&&(re.value=(re.__value=U(p))??``,ki(re,U(p))),ae.disabled=U(u),q(oe,U(u)?`…`:`▶ Play`),Q(N,`aria-expanded`,U(m)),q(le,U(m)?`▲`:`▼`),Q(pe,`aria-expanded`,U(h)),q(he,U(h)?`▲`:`▼`),Q(ye,`aria-expanded`,U(g)),q(xe,U(g)?`▲`:`▼`),Q(Te,`aria-expanded`,U(_)),q(De,U(_)?`▲`:`▼`)},[()=>`transform: translateX(${U(d)}px); transition: transform ${v(U(p),n.find(e=>e.token===U(p))?.base??250)}ms ${y(U(f))}`]),W(`click`,T,()=>{U(s)?t.onReset(`--sf-motion-scale`):t.onSet(`--sf-motion-scale`,`0`)}),W(`change`,M,e=>{R(f,e.target.value,!0)}),W(`change`,re,e=>{R(p,e.target.value,!0)}),W(`click`,ae,b),W(`click`,N,()=>{R(m,!U(m))}),W(`click`,pe,()=>{R(h,!U(h))}),W(`click`,ye,()=>{R(g,!U(g))}),W(`click`,Te,()=>{R(_,!U(_))}),K(e,C),Ge()}Ur([`click`,`change`,`input`]);var ff=G(`<div></div>`),pf=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex gap-3 items-center justify-center overflow-hidden relative"><div class="absolute inset-0 grid grid-cols-4 grid-rows-3 gap-px opacity-30"></div> <div class="relative z-10 w-20 h-12 rounded-lg border border-white/20 bg-white/10 flex items-center justify-center"><span class="text-[9px] font-mono text-white/70"> </span></div></div>`,1),mf=G(`<div class="flex items-center gap-3"><span class="text-[9px] text-slate-600 w-14"> </span> <div class="flex-1 h-4 bg-indigo-400 rounded"></div> <span class="text-[9px] font-mono text-slate-500 w-8"> </span></div>`),hf=G(`<!> <!> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>`,1),gf=G(`<button> </button>`),_f=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Gradient overlay for hero images and media content. Used by the <code class="text-slate-400">.sf-scrim</code> macro.</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Color</div> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Direction</div> <div class="grid grid-cols-2 gap-1"></div></div> <div class="rounded-xl overflow-hidden border border-white/8" style="height: 80px"><div class="w-full h-full relative" style="background: linear-gradient(135deg, oklch(0.3 0.15 264), oklch(0.25 0.1 300))"><div class="absolute inset-0"></div> <div class="absolute bottom-2 left-3 text-[10px] text-white/80 font-medium">Scrim preview</div></div></div>`,1),vf=G(`<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0"> </div> <!></div>`),yf=G(`<!> <div class="flex items-center gap-2 p-2 rounded-lg bg-white/4 border border-white/8"><div class="w-16 h-3 rounded-full"><div class="w-6 h-3 rounded-full"></div></div> <span class="text-[9px] text-slate-600">Scrollbar preview</span></div>`,1),bf=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),xf=G(`<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-16 shrink-0"> </div> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),Sf=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Controls text legibility over images. Applied via <code class="text-slate-400">text-shadow: var(--sf-text-shadow-m)</code>.
-        Edit each token directly — use <code class="text-slate-400">none</code> to disable.</p> <div class="space-y-2"></div>`,1),Cf=G(`<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Blur</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Opacity</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrim overlay</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrollbar</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>`);function wf(e,t){We(t,!0);let n=[{label:`To top`,value:`to top`},{label:`To bottom`,value:`to bottom`},{label:`To left`,value:`to left`},{label:`To right`,value:`to right`}],r=[{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 i(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let a=I(()=>i(t.overrides[`--sf-blur`],12,`px`)),o=I(()=>i(t.overrides[`--sf-opacity-muted`],.5)),s=I(()=>i(t.overrides[`--sf-opacity-disabled`],.45)),c=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),l=I(()=>t.overrides[`--sf-scrim-color`]??``),u=I(()=>i(t.overrides[`--sf-scroll-shadow-size`]?.replace(`rem`,``),2)),d=I(()=>i(t.overrides[`--sf-state-pending-opacity`],.7)),f=I(()=>t.overrides[`--sf-scrollbar-thumb`]??``),p=I(()=>t.overrides[`--sf-scrollbar-track`]??``),m=L(!1),h=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1);var b=Cf(),x=z(b),S=z(x),C=V(z(S),2),w=z(C,!0);F(C),F(S);var T=V(S,2),E=e=>{var n=pf(),r=B(n);{let e=I(()=>`--sf-blur`in t.overrides);$(r,{label:`Blur radius`,get value(){return U(a)},min:0,max:48,step:1,unit:`px`,help:`--sf-blur — used for frosted glass, modals, tooltips`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-blur`,`${e}px`),onReset:()=>t.onReset(`--sf-blur`)})}var i=V(r,2),o=z(i);Y(o,20,()=>Array.from({length:12}),si,(e,t,n)=>{var r=ff();X(r,1,Si(n%3==0?`bg-indigo-500/50`:n%3==1?`bg-purple-500/40`:`bg-blue-500/30`)),K(e,r)}),F(o);var s=V(o,2),c=z(s),l=z(c);F(c),F(s),F(i),H(()=>{Z(s,`backdrop-filter: blur(${U(a)}px)`),q(l,`${U(a)??``}px`)}),K(e,n)};J(T,e=>{U(m)&&e(E)}),F(x);var D=V(x,4),O=z(D),k=V(z(O),2),A=z(k,!0);F(k),F(O);var ee=V(O,2),te=e=>{var n=hf(),r=B(n);{let e=I(()=>`--sf-opacity-muted`in t.overrides);$(r,{label:`Muted opacity`,get value(){return U(o)},min:0,max:1,step:.05,help:`--sf-opacity-muted — secondary text, icons, and placeholder content`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-muted`,String(e)),onReset:()=>t.onReset(`--sf-opacity-muted`)})}var i=V(r,2);{let e=I(()=>`--sf-opacity-disabled`in t.overrides);$(i,{label:`Disabled opacity`,get value(){return U(s)},min:0,max:1,step:.05,help:`--sf-opacity-disabled — disabled form controls and interactive elements`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-disabled`,String(e)),onReset:()=>t.onReset(`--sf-opacity-disabled`)})}var a=V(i,2);{let e=I(()=>`--sf-state-pending-opacity`in t.overrides);$(a,{label:`Pending opacity`,get value(){return U(d)},min:.1,max:1,step:.05,help:`--sf-state-pending-opacity — opacity of elements in loading/pending state`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-state-pending-opacity`,String(e)),onReset:()=>t.onReset(`--sf-state-pending-opacity`)})}var c=V(a,2);Y(c,21,()=>[{label:`muted`,val:U(o)},{label:`disabled`,val:U(s)},{label:`pending`,val:U(d)}],e=>e.label,(e,t)=>{var n=mf(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=V(a,2),s=z(o,!0);F(o),F(n),H(()=>{q(i,U(t).label),Z(a,`opacity: ${U(t).val}`),q(s,U(t).val)}),K(e,n)}),F(c),K(e,n)};J(ee,e=>{U(h)&&e(te)}),F(D);var j=V(D,4),M=z(j),ne=V(z(M),2),re=z(ne,!0);F(ne),F(M);var ie=V(M,2),ae=e=>{var r=_f(),i=V(B(r),2),a=V(z(i),2);{let e=I(()=>`--sf-scrim-color`in t.overrides);Tl(a,{token:`--sf-scrim-color`,get value(){return U(l)},placeholder:`default (base color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-scrim-color`,e),onReset:()=>t.onReset(`--sf-scrim-color`)})}F(i);var o=V(i,2),s=V(z(o),2);Y(s,21,()=>n,e=>e.value,(e,n)=>{var r=gf(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${U(c)===U(n).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`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(s),F(o);var u=V(o,2),d=z(u),f=z(d);Ne(2),F(d),F(u),H(()=>Z(f,`background: linear-gradient(${U(c)}, ${U(l)||`oklch(0 0 0 / 0.6)`}, transparent)`)),K(e,r)};J(ie,e=>{U(g)&&e(ae)}),F(j);var oe=V(j,4),se=z(oe),N=V(z(se),2),ce=z(N,!0);F(N),F(se);var le=V(se,2),ue=e=>{var n=yf(),r=B(n);Y(r,17,()=>[{label:`Thumb color`,token:`--sf-scrollbar-thumb`,val:U(f)},{label:`Track color`,token:`--sf-scrollbar-track`,val:U(p)}],e=>e.token,(e,n)=>{var r=vf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>U(n).token in t.overrides);Tl(o,{get token(){return U(n).token},get value(){return U(n).val},placeholder:`default`,get isOverridden(){return U(e)},onSet:e=>t.onSet(U(n).token,e),onReset:()=>t.onReset(U(n).token)})}F(r),H(()=>q(a,U(n).label)),K(e,r)});var i=V(r,2),a=z(i);let o;var s=z(a);let c;F(a),Ne(2),F(i),H(()=>{o=Z(a,``,o,{background:U(p)||`rgba(255,255,255,0.08)`}),c=Z(s,``,c,{background:U(f)||`oklch(0.52 0.025 260)`})}),K(e,n)};J(le,e=>{U(_)&&e(ue)}),F(oe);var de=V(oe,4),fe=z(de),pe=V(z(fe),2),me=z(pe,!0);F(pe),F(fe);var he=V(fe,2),ge=e=>{{let n=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(e,{label:`Shadow size`,get value(){return U(u)},min:0,max:6,step:.25,unit:`rem`,help:`--sf-scroll-shadow-size — gradient edge mask on .sf-scroll-shadow elements`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`)})}};J(he,e=>{U(v)&&e(ge)}),F(de);var _e=V(de,4),ve=z(_e),ye=V(z(ve),2),be=z(ye,!0);F(ye),F(ve);var xe=V(ve,2),Se=e=>{var n=Sf(),i=V(B(n),2);Y(i,21,()=>r,e=>e.token,(e,n)=>{var r=xf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Hi(o);var s=V(o,2),c=e=>{var r=bf();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(r),H(()=>{q(a,U(n).label),Ui(o,t.overrides[U(n).token]??``),Q(o,`placeholder`,U(n).default)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)}),F(i),K(e,n)};J(xe,e=>{U(y)&&e(Se)}),F(_e),F(b),H(()=>{Q(S,`aria-expanded`,U(m)),q(w,U(m)?`▲`:`▼`),Q(O,`aria-expanded`,U(h)),q(A,U(h)?`▲`:`▼`),Q(M,`aria-expanded`,U(g)),q(re,U(g)?`▲`:`▼`),Q(se,`aria-expanded`,U(_)),q(ce,U(_)?`▲`:`▼`),Q(fe,`aria-expanded`,U(v)),q(me,U(v)?`▲`:`▼`),Q(ve,`aria-expanded`,U(y)),q(be,U(y)?`▲`:`▼`)}),W(`click`,S,()=>{R(m,!U(m))}),W(`click`,O,()=>{R(h,!U(h))}),W(`click`,M,()=>{R(g,!U(g))}),W(`click`,se,()=>{R(_,!U(_))}),W(`click`,fe,()=>{R(v,!U(v))}),W(`click`,ve,()=>{R(y,!U(y))}),K(e,b),Ge()}Ur([`click`,`input`]);var Tf=G(`<div class="h-2.5 rounded bg-indigo-500/40"></div>`),Ef=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"></div>`,1),Df=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><p class="text-[11px] text-slate-300 leading-relaxed">SLASHED is a token-first CSS framework. This sample paragraph repeats so you
+      will shift every family's tints/shades too. That's expected, not a bug.</p> <div class="space-y-3"></div>`,1),Tu=G(`<div class="flex items-center gap-1"><span class="text-[9px] text-slate-500 w-16 shrink-0"> <span class="text-slate-600"> </span></span> <span class="flex-1 h-5 rounded border border-white/10"></span> <span class="text-slate-600 text-[10px] px-1">→</span> <span class="flex-1 h-5 rounded border border-white/10"></span></div>`),Eu=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Pins brand colors (primary, secondary, tertiary, action) to a fixed OKLCH
+        lightness — useful for always-stable sections. Enable on canvas to preview.</p> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"><div class="flex items-center text-[8px] font-mono text-slate-600 uppercase tracking-widest"><span class="w-16 shrink-0">Color</span> <span class="flex-1 text-center">Current</span> <span class="flex-1 text-center">Locked</span></div> <!></div> <button> </button>`,1),Du=G(`<span class="w-9 text-center text-[6px] font-mono text-slate-600 uppercase tracking-wide"> </span>`),Ou=G(`<div class="group relative w-9 h-4 rounded-sm border border-white/10"><!></div>`),ku=G(`<div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none"> </span> <div class="flex gap-0.5"></div></div>`),Au=G(`<div class="space-y-1"><div class="flex items-center justify-between"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest"> </div> <!></div> <!> <!> <div class="mt-1 pl-1 space-y-px"><div class="flex items-center gap-1"><span class="w-2.5 shrink-0"></span> <div class="flex gap-0.5"></div></div> <!></div> <p class="text-[8px] text-slate-600 leading-snug pl-1">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.</p></div>`),ju=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Dark mode is auto-derived from each light source by default. Switch to
+        Manual dark to set a bespoke dark value.</p> <div class="space-y-3"></div>`,1),Mu=G(`<div class="flex items-center gap-2"><span class="w-6 h-6 rounded border border-white/10 shrink-0 flex items-center justify-center text-[10px] font-bold">Aa</span> <span class="text-[9px] text-slate-500 flex-1 truncate"> </span> <span class="text-[10px] font-mono font-bold text-slate-200"> </span> <span> </span></div>`),Nu=G(`<button class="w-full mt-1 py-1.5 rounded-lg bg-indigo-600/15 border border-indigo-500/30 text-indigo-300 text-[10px] font-bold cursor-pointer hover:bg-indigo-600/25 transition-all">Open contrast tool →</button>`),Pu=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Controls whether text on brand-coloured surfaces is light or dark.</p> <!> <div class="rounded-lg bg-white/4 border border-white/8 p-2.5 space-y-2"><!> <!></div> <!>`,1),Fu=G(`<button><span class="text-[11px] font-bold"> </span> <span class="text-[9px] text-slate-500 text-center"> </span></button>`),Iu=G(`<div class="flex-1 flex flex-col items-center gap-0.5 h-full justify-end"><span class="text-[7px] font-mono text-slate-600"> </span> <div class="group relative w-full rounded-sm border-x border-t border-white/10"><!></div> <span class="text-[7px] font-mono text-slate-600"> </span></div>`),Lu=G(`<div class="group relative flex-1 h-4 rounded-sm border border-white/10"><!></div>`),Ru=G(`<div class="flex items-center gap-1.5"><span class="text-[7px] font-mono text-slate-600 w-12 shrink-0 truncate"> </span> <div class="flex gap-0.5 flex-1"></div></div>`),zu=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Controls how much color is mixed into each palette step. Step 500 is always the source color.</p> <div class="grid grid-cols-3 gap-1.5"></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Tints (50–400) — mixed toward surface</div> <div class="space-y-2"></div></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Shades (600–950) — mixed toward text</div> <div class="space-y-2"></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><div class="flex items-center justify-between mb-2"><span class="text-[9px] text-slate-600">Palette &amp; curve preview</span> <div class="flex bg-white/5 border border-white/8 rounded p-0.5 gap-0.5"></div></div> <div class="flex items-end gap-0.5 h-20"></div> <p class="text-[8px] text-slate-600 mt-2">Bar height = mix amount · fill = the resolved primary palette swatch at each step</p></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"><div class="flex items-center justify-between mb-1"><span class="text-[9px] text-slate-600">Mini palettes — all brand colors</span> <div class="flex bg-white/5 border border-white/8 rounded p-0.5 gap-0.5"></div></div> <!></div>`,1),Bu=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),Vu=G(`<div class="flex items-center gap-1"><span class="text-[8px] text-slate-500 w-10 shrink-0">Dir</span> <!></div>`),Hu=G(`<div class="flex items-center gap-2"><span class="text-[8px] text-slate-500 w-10 shrink-0">Angle</span> <input type="range" min="0" max="360" step="1" class="flex-1 accent-indigo-500"/> <span class="text-[9px] font-mono text-slate-400 w-9 text-right shrink-0"> </span></div>`),Uu=G(`<div class="rounded-lg border border-white/8 bg-white/3 overflow-hidden"><div class="h-9 w-full"></div> <div class="px-2 py-1.5 space-y-1.5"><div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-300 flex-1"> </span> <!></div> <!> <div class="flex items-center gap-1"><span class="text-[8px] text-slate-500 w-10 shrink-0">Stops</span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-0.5 text-[8px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500"/> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-0.5 text-[8px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500"/></div> <div class="text-[8px] font-mono text-slate-600 leading-snug break-all"><span class="text-slate-500">default:</span> </div> <input type="text" placeholder="raw override (auto-derived if blank)" class="w-full bg-white/5 border border-white/10 rounded px-1.5 py-0.5 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/></div></div>`),Wu=G(`<div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest pt-1"> </div> <div class="space-y-2"></div>`,1),Gu=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Auto-derived from your brand colors. Use the angle/direction and stop
+        controls, or edit the raw value for full control.</p> <!>`,1),Ku=G(`<p class="text-[9px] text-slate-600 leading-relaxed">--sf-color-scheme — sets the CSS <span class="font-mono text-slate-400">color-scheme</span> property on the root, controlling browser UI (scrollbars, inputs) and default background.</p> <div class="flex gap-1"></div>`,1),qu=G(`<div><div class="text-[10px] font-semibold text-slate-400 mb-1"> </div> <!></div>`),Ju=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Direct color overrides for tokens the framework auto-derives. Use for edge cases.</p> <div class="space-y-2"></div>`,1),Yu=G(`<div class="p-4 space-y-6"><section class="space-y-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Semantic colors</div> <p class="text-[9px] text-slate-600 leading-relaxed">Live preview — every semantic role on its on-color text, shown in light and dark. Resolved from the canvas, updates as you edit.</p> <div class="space-y-2.5"></div></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Brand color sources</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">LumLocker</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Status colors</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text contrast</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Shade / tint curve</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Gradients</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Color scheme</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Semantic overrides</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="rounded-lg bg-white/3 border border-white/6 p-3"><p class="text-[10px] text-slate-500 leading-relaxed"><span class="text-slate-400 font-semibold">All tokens tab</span> — override individual color steps (50–950), semantic aliases, or surface tokens directly.</p></div></div>`);function Xu(e,t){Ue(t,!0);function n(e,t){return Xc.value,nl(e)||t}function r(e,t){Xc.value;let n=sl(e);return n&&n!==`none`?n:t}function i(e,t,n){return Xc.value,il(e,t)||n}let a=[{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))`}],o=[{key:`primary`,label:`Primary`},{key:`secondary`,label:`Secondary`},{key:`tertiary`,label:`Tertiary`},{key:`action`,label:`Action`}],s=[{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`}],c=[{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`}],l=[{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}],u=[{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(l.map(e=>[e.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%`}}],d=[{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)`}],f=[`50`,`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`,`950`],p=[`primary`,`secondary`,`tertiary`,`action`,`neutral`],m={50:.97,100:.94,200:.88,300:.78,400:.65,500:.5,600:.37,700:.27,800:.17,900:.11,950:.06},g=[...p,`base`],_=[{label:`Base`,expr:e=>`var(--sf-color-${e})`},{label:`Subtle`,expr:e=>`var(--sf-color-${e}-subtle)`},{label:`Muted`,expr:e=>`var(--sf-color-${e}-muted)`},{label:`Strong`,expr:e=>`var(--sf-color-${e}-strong)`}],v=[...s,...c],y=[{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`}]}],b=(jl.colors??[]).filter(e=>e.name===`--sf-contrast-bias`||e.name===`--sf-contrast-threshold`),x=(jl.colors??[]).filter(e=>e.name===`--sf-focus-ring-width`),S=L(!1),C=L(!1),w=L(!1),T=L(!1),E=L(!1),D=L(!1),O=L(!1),k=L(!1),ee=L(`light`),te=nn({}),ne=I(()=>parseFloat(t.overrides[`--sf-lumlocker`]??`0.65`));function A(e){let t=e.match(/^linear-gradient\(\s*in\s+(\S+)\s+(to\s+\w+|\d+deg)\s*,(.+)\)$/i);if(!t)return null;let n=t[1],r=t[2].trim(),i=r.startsWith(`to `),a=i?r.slice(3).trim():`right`,o=i?0:parseInt(r),s=0,c=0,l=[],u=t[3];for(let e=0;e<u.length;e++)u[e]===`(`?s++:u[e]===`)`?s--:u[e]===`,`&&s===0&&(l.push(u.slice(c,e).trim()),c=e+1);return l.push(u.slice(c).trim()),l.length<2?null:{space:n,kind:i?`dir`:`angle`,angle:o,dir:a,stop1:l[0],stop2:l[1]}}function j(e){let n=t.overrides[e.name];return(n?A(n):null)??{space:e.space,kind:e.kind,angle:e.angle,dir:e.dir,stop1:e.stop1,stop2:e.stop2}}function M(e){return te[e.name]??j(e)}function re(e){let t=M(e),n=t.kind===`dir`?`to ${t.dir}`:`${t.angle}deg`;return`linear-gradient(in ${t.space} ${n}, ${t.stop1}, ${t.stop2})`}function ie(e,n,r){te[e.name]||(te[e.name]=j(e)),te[e.name][n]=r,t.onSet(e.name,re(e))}function ae(e,n){let r=`--sf-color-${e}-source-${n}`,i=t.overrides[r]??s.find(e=>e.name===r)?.default??``;return i?`oklch(from ${i} ${U(ne)} c h)`:``}let oe=L(nn(new Set(v.filter(e=>e.side===`light`&&!((v.find(t=>t.colorKey===e.colorKey&&t.side===`dark`)?.name??``)in t.overrides)).map(e=>e.colorKey)))),se=I(()=>{let e={};for(let n of t.tokens)v.some(e=>e.name===n.name)&&(e[n.name]=n);return e});function N(e){return e?t.overrides[e.name]??U(se)[e.name]?.value??e.default:``}function ce(e){return v.find(t=>t.name===e)}let le=I(()=>u.find(e=>Object.entries(e.patch).every(([e,n])=>n===null?!(e in t.overrides):t.overrides[e]===n)));function ue(e){let n=t.overrides[e.name];return n?parseFloat(n):e.default}let de=[];for(let e=0;e<s.length;e+=2)de.push([s[e],s[e+1]]);let fe=[];for(let e=0;e<c.length;e+=2)fe.push([c[e],c[e+1]]);function pe(e,t){let{l:n,c:r,h:i,valid:a}=Fl(e);if(!a)return e;let o,s;return t===`base`?(o=Math.max(.16,Math.min(1.18-n,.24)),s=r*.5):(o=Math.max(.65,Math.min(.95-n*.5,.88)),s=r*.9),Il(o,s,i)}function me(){return N(ce(`--sf-color-base-source-light`))}function he(){let e=ce(`--sf-color-base-source-dark`);return e&&(t.overrides[e.name]??U(se)[e.name]?.value)!==void 0?N(e):pe(N(ce(`--sf-color-base-source-light`)),`base`)}function ge(){let{l:e,c:t,h:n,valid:r}=Fl(N(ce(`--sf-color-neutral-source-light`)));return r?Il(Math.max(.05,Math.min(e-.38,.3)),t*.8,n):`oklch(0.12 0.02 260)`}function _e(){let{l:e,c:t,h:n,valid:r}=Fl(N(ce(`--sf-color-neutral-source-dark`)));return r?Il(Math.min(1,Math.max(e+.22,.88)),t*.8,n):`oklch(0.92 0.02 260)`}function ve(e,t,n,r){if(Xc.value,t===`500`)return nl(e)||e;let i=parseInt(t)<500,a=l.find(e=>e.label===t);if(!a)return e;let o=`color-mix(in oklab, ${e} ${ue(a)}%, ${i?n:r})`;return nl(o)||o}function ye(e,t){Xc.value;let n=m[t];if(n===void 0)return e;let r=`oklch(from ${e} ${n} c h)`;return nl(r)||r}function be(e,t,n,r,i){return e===`base`?ye(t,n):ve(t,n,r,i)}function xe(e,n,r){t.onSet(e.name,r)}function Se(e,n,r){let i=!!(n&&n.name in t.overrides);if(U(oe).has(e)&&!i){let i=N(v.find(e=>e.name===r));n&&t.onSet(n.name,pe(i,e)),R(oe,new Set([...U(oe)].filter(t=>t!==e)),!0)}else n&&t.onBulkChange({[n.name]:null}),R(oe,new Set([...U(oe),e]),!0)}let Ce=[{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 we(e,t){Xc.value;let n=ol(e),r=ol(t);return!n||!r?null:Pl(Nl(...n),Nl(...r))}var Te=Yu(),Ee=z(Te),De=V(z(Ee),4);Y(De,21,()=>y,e=>e.heading,(e,t)=>{var n=gu(),r=z(n),a=z(r,!0);F(r),Y(V(r,2),16,()=>[`light`,`dark`],e=>e,(e,n)=>{var r=hu(),a=z(r),o=z(a,!0);F(a);var s=V(a,2);Y(s,21,()=>U(t).items,e=>e.name,(e,t)=>{let r=I(()=>i(`var(${U(t).name})`,n,`transparent`)),a=I(()=>i(`var(${U(t).fg})`,n,`currentColor`));var o=mu(),s=V(z(o),2),c=z(s,!0);F(s),F(o),H(()=>{Z(o,`background:${U(r)}; color:${U(a)}`),Q(o,`title`,`${U(t).name} (${n}) — ${U(r)}`),q(c,U(t).label)}),K(e,o)}),F(s),F(r),H(()=>q(o,n===`light`?`L`:`D`)),K(e,r)}),F(n),H(()=>q(a,U(t).heading)),K(e,n)}),F(De),F(Ee);var P=V(Ee,4),Oe=z(P),ke=V(z(Oe),2),Ae=z(ke,!0);F(ke),F(Oe);var je=V(Oe,2),Ne=e=>{var r=wu(),i=V(B(r),2);Y(i,21,()=>de,([e,t])=>e.name,(e,r)=>{var i=I(()=>h(U(r),2));let a=()=>U(i)[0],o=()=>U(i)[1],s=I(()=>!!(o()&&o().name in t.overrides)),c=I(()=>U(oe).has(a().colorKey)&&!U(s));var l=Cu(),u=z(l),d=z(u),p=z(d,!0);F(d);var m=V(d,2),_=e=>{var t=_u(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(c)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-300`:`border-white/10 text-slate-500 hover:text-slate-300`}`),q(n,U(c)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(a().colorKey,o(),a().name)),K(e,t)};J(m,e=>{o()&&e(_)}),F(u);var v=V(u,2);{let e=I(()=>`${a().label} (light)`),n=I(()=>N(a())),r=I(()=>a().name in t.overrides);Wl(v,{get label(){return U(e)},get tokenName(){return a().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>xe(a(),o(),e),onReset:()=>t.onReset(a().name)})}var y=V(v,2),b=e=>{let t=I(()=>N(a())),n=I(()=>U(c)?pe(U(t),a().colorKey):o()?N(o()):U(t)),r=I(me),i=I(he),s=I(ge),l=I(_e);var u=xu(),d=B(u),p=z(d),m=V(z(p),2);Y(m,20,()=>f,e=>e,(e,n)=>{let i=I(()=>be(a().colorKey,U(t),n,U(r),U(s)));var o=vu();let c;fu(z(o),()=>`${a().colorKey}-${n}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${n} (light) — ${U(i)}`),c=Z(o,``,c,{background:U(i)})}),K(e,o)}),F(m),F(p);var h=V(p,2),g=V(z(h),2);Y(g,20,()=>f,e=>e,(e,t)=>{let r=I(()=>be(a().colorKey,U(n),t,U(i),U(l)));var o=yu();let s;fu(z(o),()=>`${a().colorKey}-${t}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${t} (dark) — ${U(r)}`),s=Z(o,``,s,{background:U(r)})}),K(e,o)}),F(g),F(h),F(d);var _=V(d,2),v=e=>{K(e,bu())};J(_,e=>{a().colorKey===`base`&&e(v)}),K(e,u)},x=I(()=>g.includes(a().colorKey));J(y,e=>{U(x)&&e(b)});var S=V(y,2),C=e=>{{let n=I(()=>`${o().label} (dark mode)`),r=I(()=>N(o())),i=I(()=>o().name in t.overrides);Wl(e,{get label(){return U(n)},get tokenName(){return o().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}},w=e=>{let t=I(()=>pe(N(a()),a().colorKey));var r=Su(),i=z(r);let o;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),o=Z(i,``,o,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(S,e=>{o()&&!U(c)?e(C):o()&&U(c)&&e(w,1)}),F(l),H(()=>q(p,a().label)),K(e,l)}),F(i),K(e,r)};J(je,e=>{U(S)&&e(Ne)}),F(P);var Pe=V(P,4),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var r=Eu(),a=V(B(r),2);{let e=I(()=>`--sf-lumlocker`in t.overrides);$(a,{label:`LumLocker lightness (L)`,get value(){return U(ne)},min:0,max:1,step:.01,help:`--sf-lumlocker — fixed OKLCH L applied to lockable brand colors under [data-lumlocker]`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-lumlocker`,String(e)),onReset:()=>t.onReset(`--sf-lumlocker`)})}var s=V(a,2);Y(V(z(s),2),17,()=>o,e=>e.key,(e,t)=>{var r=Xr();Y(B(r),16,()=>[`light`,`dark`],e=>e,(e,r)=>{let a=I(()=>i(`var(--sf-color-${U(t).key}-source-${r})`,r,``)),o=I(()=>ae(U(t).key,r));var s=Tu(),c=z(s),l=z(c),u=V(l),d=z(u,!0);F(u),F(c);var f=V(c,2),p=V(f,4);F(s),H(e=>{q(l,`${U(t).label??``} `),q(d,r===`light`?`L`:`D`),Z(f,`background:${U(a)||`var(--sf-color-${U(t).key})`}`),Z(p,e),Q(p,`title`,U(o))},[()=>`background:${n(U(o),U(o))}`]),K(e,s)}),K(e,r)}),F(s);var c=V(s,2),l=z(c,!0);F(c),H(()=>{X(c,1,`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${cl.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`}`),q(l,cl.value?`✓ LumLocker active on canvas — click to disable`:`Preview LumLocker on live canvas`)}),W(`click`,c,()=>{cl.value=!cl.value}),K(e,r)};J(Re,e=>{U(k)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ge=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var r=ju(),a=V(B(r),2);Y(a,21,()=>fe,([e,t])=>e.name,(e,r)=>{var a=I(()=>h(U(r),2));let o=()=>U(a)[0],s=()=>U(a)[1],c=I(()=>!!(s()&&s().name in t.overrides)),l=I(()=>U(oe).has(o().colorKey)&&!U(c));var u=Au(),d=z(u),f=z(d),p=z(f,!0);F(f);var m=V(f,2),g=e=>{var t=_u(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(l)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-300`:`border-white/10 text-slate-500 hover:text-slate-300`}`),q(n,U(l)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(o().colorKey,s(),o().name)),K(e,t)};J(m,e=>{s()&&e(g)}),F(d);var v=V(d,2);{let e=I(()=>`${o().label} light`),n=I(()=>N(o())),r=I(()=>o().name in t.overrides);Wl(v,{get label(){return U(e)},get tokenName(){return o().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}var y=V(v,2),b=e=>{{let n=I(()=>`${s().label} dark`),r=I(()=>N(s())),i=I(()=>s().name in t.overrides);Wl(e,{get label(){return U(n)},get tokenName(){return s().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(s().name,e),onReset:()=>t.onReset(s().name)})}},x=e=>{let t=I(()=>pe(N(o()),o().colorKey));var r=Su(),i=z(r);let a;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),a=Z(i,``,a,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(y,e=>{s()&&!U(l)?e(b):s()&&U(l)&&e(x,1)});var S=V(y,2),C=z(S),w=V(z(C),2);Y(w,21,()=>_,e=>e.label,(e,t)=>{var n=Du(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(w),F(C),Y(V(C,2),16,()=>[[`L`,`light`],[`D`,`dark`]],([e,t])=>e,(e,t)=>{var n=I(()=>h(t,2));let r=()=>U(n)[0],a=()=>U(n)[1];var s=ku(),c=z(s),l=z(c,!0);F(c);var u=V(c,2);Y(u,21,()=>_,e=>e.label,(e,t)=>{let n=I(()=>i(U(t).expr(o().colorKey),a(),``));var r=Ou();let s;var c=z(r);{let e=I(()=>`${o().colorKey}-${U(t).label.toLowerCase()}`);fu(c,()=>U(e))}F(r),H(e=>{Q(r,`title`,e),s=Z(r,``,s,{background:U(n)})},[()=>`${o().colorKey}-${U(t).label.toLowerCase()} (${a()}) — ${U(n)}`]),K(e,r)}),F(u),F(s),H(()=>q(l,r())),K(e,s)}),F(S),Me(2),F(u),H(()=>q(p,o().label)),K(e,u)}),F(a),K(e,r)};J(Ke,e=>{U(T)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var r=Pu(),i=V(B(r),2);Y(i,17,()=>b,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})});var a=V(i,2),o=z(a);Y(o,17,()=>Ce,e=>e.label,(e,t)=>{let r=I(()=>we(U(t).fg,U(t).bg));var i=Xr(),a=B(i),o=e=>{var i=Mu(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H((e,n)=>{Z(a,e),q(s,U(t).label),q(l,`${n??``}:1`),X(u,1,`text-[9px] font-bold px-1.5 py-0.5 rounded ${U(r)>=4.5?`bg-emerald-500/20 text-emerald-300`:`bg-amber-500/20 text-amber-300`}`),q(d,U(r)>=4.5?`AA`:U(r)>=3?`AA-L`:`✗`)},[()=>`background:${n(U(t).bg,U(t).bg)}; color:${n(U(t).fg,U(t).fg)}`,()=>U(r).toFixed(2)]),K(e,i)};J(a,e=>{U(r)!==null&&e(o)}),K(e,i)});var s=V(o,2),c=e=>{var n=Nu();W(`click`,n,()=>t.onSelectDomain?.(`wcag`)),K(e,n)};J(s,e=>{t.onSelectDomain&&e(c)}),F(a),Y(V(a,2),17,()=>x,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),K(e,r)};J(Qe,e=>{U(C)&&e($e)}),F(Je);var et=V(Je,4),tt=z(et),nt=V(z(tt),2),rt=z(nt,!0);F(nt),F(tt);var it=V(tt,2),at=e=>{let n=I(()=>t.overrides[`--sf-color-primary-source-light`]??s.find(e=>e.name===`--sf-color-primary-source-light`)?.default??`oklch(0.47 0.27 264)`),r=I(()=>t.overrides[`--sf-color-primary-source-dark`]),i=I(()=>U(r)??(!U(oe).has(`primary`)||U(r)?s.find(e=>e.name===`--sf-color-primary-source-dark`)?.default??pe(U(n),`primary`):pe(U(n),`primary`))),a=I(()=>U(ee)===`light`?U(n):U(i)),o=I(()=>U(ee)===`light`?me():he()),c=I(()=>U(ee)===`light`?ge():_e()),d=I(()=>U(ee)===`light`?me():he()),m=I(()=>U(ee)===`light`?ge():_e());var h=zu(),g=V(B(h),2);Y(g,21,()=>u,e=>e.label,(e,n)=>{var r=Fu(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o,!0);F(o),F(r),H(()=>{X(r,1,`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${U(le)?.label===U(n).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`}`),q(a,U(n).label),q(s,U(n).desc)}),W(`click`,r,()=>t.onBulkChange(U(n).patch)),K(e,r)}),F(g);var _=V(g,2),v=V(z(_),2);Y(v,21,()=>l.filter(e=>e.step===`tint`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(v),F(_);var y=V(_,2),b=V(z(y),2);Y(b,21,()=>l.filter(e=>e.step===`shade`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(b),F(y);var x=V(y,2),S=z(x),C=V(z(S),2);Y(C,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=_u(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(ee)===t?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(ee,t,!0)}),K(e,n)}),F(C),F(S);var w=V(S,2);Y(w,21,()=>l,e=>e.name,(e,t)=>{let n=I(()=>ue(U(t))),r=I(()=>U(t).label),i=I(()=>ve(U(a),U(r),U(o),U(c)));var s=Iu(),l=z(s),u=z(l,!0);F(l);var d=V(l,2);fu(z(d),()=>`primary-${U(r)}`),F(d);var f=V(d,2),p=z(f,!0);F(f),F(s),H((e,t,n)=>{q(u,e),Z(d,t),Q(d,`title`,n),q(p,U(r))},[()=>Math.round(U(n)),()=>`background:${U(i)}; height: ${Math.max(U(n)/100*56,6)}px`,()=>`primary-${U(r)} (${U(ee)}) · mix ${Math.round(U(n))}%`]),K(e,s)}),F(w),Me(2),F(x);var T=V(x,2),E=z(T),D=V(z(E),2);Y(D,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=_u(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(ee)===t?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(ee,t,!0)}),K(e,n)}),F(D),F(E),Y(V(E,2),16,()=>p,e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-color-${n}-source-light`]??s.find(e=>e.name===`--sf-color-${n}-source-light`)?.default??`oklch(0.5 0.15 264)`),i=I(()=>`--sf-color-${n}-source-dark`),a=I(()=>t.overrides[U(i)]??(U(oe).has(n)&&!t.overrides[U(i)]?pe(U(r),n):s.find(e=>e.name===U(i))?.default??pe(U(r),n))),o=I(()=>U(ee)===`light`?U(r):U(a));var c=Ru(),l=z(c),u=z(l,!0);F(l);var p=V(l,2);Y(p,20,()=>f,e=>e,(e,t)=>{let r=I(()=>ve(U(o),t,U(d),U(m)));var i=Lu();fu(z(i),()=>`${n}-${t}`),F(i),H(()=>{Z(i,`background:${U(r)}`),Q(i,`title`,`${n}-${t} (${U(ee)})`)}),K(e,i)}),F(p),F(c),H(()=>q(u,n)),K(e,c)}),F(T),K(e,h)};J(it,e=>{U(w)&&e(at)}),F(et);var ot=V(et,4),st=z(ot),ct=V(z(st),2),lt=z(ct,!0);F(ct),F(st);var ut=V(st,2),dt=e=>{var n=Gu();Y(V(B(n),2),16,()=>[`brand`,`fade`],e=>e,(e,n)=>{var i=Wu(),o=B(i),s=z(o,!0);F(o);var c=V(o,2);Y(c,21,()=>a.filter(e=>e.group===n),e=>e.name,(e,n)=>{let i=I(()=>`var(${U(n).name})`),a=I(()=>M(U(n)));var o=Uu(),s=z(o),c=V(s,2),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{var r=Bu();W(`click`,r,()=>{delete te[U(n).name],t.onReset(U(n).name)}),K(e,r)};J(f,e=>{U(n).name in t.overrides&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=Vu();Y(V(z(t),2),16,()=>[`top`,`right`,`bottom`,`left`],e=>e,(e,t)=>{var r=_u(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-0.5 rounded text-[9px] border transition-all cursor-pointer capitalize ${U(a).dir===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5`}`),q(i,t)}),W(`click`,r,()=>ie(U(n),`dir`,t)),K(e,r)}),F(t),K(e,t)},g=e=>{var t=Hu(),r=V(z(t),2);zi(r);var i=V(r,2),o=z(i);F(i),F(t),H(()=>{Bi(r,U(a).angle),q(o,`${U(a).angle??``}°`)}),W(`input`,r,e=>ie(U(n),`angle`,parseInt(e.target.value))),K(e,t)};J(m,e=>{U(n).kind===`dir`&&U(n).group!==`fade`?e(h):U(n).kind!==`dir`&&e(g,1)});var _=V(m,2),v=V(z(_),2);zi(v);var y=V(v,2);zi(y),F(_);var b=V(_,2),x=V(z(b));F(b);var S=V(b,2);zi(S),F(c),F(o),H(e=>{Z(s,e),q(d,U(n).label),Bi(v,U(a).stop1),Bi(y,U(a).stop2),q(x,` ${U(n).formula??``}`),Bi(S,t.overrides[U(n).name]??``)},[()=>`background:${r(U(i),U(i))}`]),W(`change`,v,e=>ie(U(n),`stop1`,e.target.value.trim())),W(`change`,y,e=>ie(U(n),`stop2`,e.target.value.trim())),W(`change`,S,e=>{let r=e.target.value.trim();delete te[U(n).name],r?t.onSet(U(n).name,r):t.onReset(U(n).name)}),K(e,o)}),F(c),H(()=>q(s,n===`brand`?`Brand & surface`:`Edge fades`)),K(e,i)}),K(e,n)};J(ut,e=>{U(O)&&e(dt)}),F(ot);var ft=V(ot,4),pt=z(ft),mt=V(z(pt),2),ht=z(mt,!0);F(mt),F(pt);var gt=V(pt,2),_t=e=>{var n=Ku(),r=V(B(n),2);Y(r,20,()=>[[`light dark`,`light dark (default)`],[`light`,`Light only`],[`dark`,`Dark only`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-color-scheme`]??`light dark`);var s=_u(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`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`}`),q(c,a())}),W(`click`,s,()=>i()===`light dark`?t.onReset(`--sf-color-scheme`):t.onSet(`--sf-color-scheme`,i())),K(e,s)}),F(r),K(e,n)};J(gt,e=>{U(D)&&e(_t)}),F(ft);var vt=V(ft,4),yt=z(vt),bt=V(z(yt),2),xt=z(bt,!0);F(bt),F(yt);var St=V(yt,2),Ct=e=>{var r=Ju(),i=V(B(r),2);Y(i,21,()=>d,e=>e.name,(e,r)=>{let i=I(()=>n(`var(${U(r).name})`,``));var a=qu(),o=z(a),s=z(o,!0);F(o);var c=V(o,2);{let e=I(()=>t.overrides[U(r).name]??``),n=I(()=>U(i)?`auto-derived · ${U(i)}`:`auto-derived`),a=I(()=>U(r).name in t.overrides);du(c,{get token(){return U(r).name},get value(){return U(e)},get placeholder(){return U(n)},get isOverridden(){return U(a)},onSet:e=>t.onSet(U(r).name,e),onReset:()=>t.onReset(U(r).name)})}F(a),H(()=>q(s,U(r).label)),K(e,a)}),F(i),K(e,r)};J(St,e=>{U(E)&&e(Ct)}),F(vt),Me(2),F(Te),H(()=>{Q(Oe,`aria-expanded`,U(S)),q(Ae,U(S)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(k)),q(Le,U(k)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(T)),q(Ge,U(T)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(C)),q(Ze,U(C)?`▲`:`▼`),Q(tt,`aria-expanded`,U(w)),q(rt,U(w)?`▲`:`▼`),Q(st,`aria-expanded`,U(O)),q(lt,U(O)?`▲`:`▼`),Q(pt,`aria-expanded`,U(D)),q(ht,U(D)?`▲`:`▼`),Q(yt,`aria-expanded`,U(E)),q(xt,U(E)?`▲`:`▼`)}),W(`click`,Oe,()=>{R(S,!U(S))}),W(`click`,Fe,()=>{R(k,!U(k))}),W(`click`,Ve,()=>{R(T,!U(T))}),W(`click`,Ye,()=>{R(C,!U(C))}),W(`click`,tt,()=>{R(w,!U(w))}),W(`click`,st,()=>{R(O,!U(O))}),W(`click`,pt,()=>{R(D,!U(D))}),W(`click`,yt,()=>{R(E,!U(E))}),K(e,Te),We()}Br([`click`,`input`,`change`]);var Zu=G(`<div class="flex items-baseline justify-between gap-3 mt-2 px-1 overflow-hidden"><span class="text-slate-500 leading-none truncate">Aa<span class="text-[8px] font-mono align-middle ml-1"> </span></span> <span class="text-white/80 leading-none truncate">Aa<span class="text-[8px] font-mono align-middle ml-1"> </span></span></div>`),Qu=G(`<div class="flex items-center gap-2 mt-2 px-1"><div class="h-2 bg-indigo-500/40 rounded shrink-0"></div> <span class="text-[8px] font-mono text-slate-600">min</span> <div class="h-2 bg-indigo-500/70 rounded shrink-0"></div> <span class="text-[8px] font-mono text-slate-600">max</span></div>`),$u=G(`<option style="background:#16161e;">Custom</option>`),ed=G(`<option style="background:#16161e;"> </option>`),td=G(`<div class="flex items-center gap-2"><span class="text-[9px] text-slate-500 w-14 shrink-0"> </span> <select class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded text-[10px] text-slate-200 px-1.5 py-1 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select> <input type="number" class="w-16 shrink-0 bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500"/></div>`),nd=G(`<div class="mt-3 pt-3 border-t border-white/6"><div class="text-[9px] font-semibold text-slate-500 mb-2">Modular scale ratio</div> <div class="space-y-2"></div></div>`),rd=G(`<div class="flex justify-end mt-2"><button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button></div>`),id=G(`<div><div class="flex items-center justify-between mb-2"><span class="text-[10px] font-bold text-slate-300"> </span> <span class="text-[9px] font-mono text-slate-500">clamp(<span class="text-indigo-300"> </span> … <span class="text-indigo-300"> </span>)</span></div> <div class="clampTrack relative h-5 flex items-center mb-2"><div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div> <div class="absolute h-1 bg-indigo-500 rounded-full"></div> <input type="range" class="clampRange absolute inset-0 w-full svelte-iy59wr"/> <input type="range" class="clampRange absolute inset-0 w-full svelte-iy59wr"/> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-indigo-400/40 pointer-events-none"></div> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-indigo-400/40 pointer-events-none"></div></div> <div class="grid grid-cols-2 gap-2"><label class="flex items-center gap-1.5"><span class="text-[9px] text-slate-500 shrink-0"> </span> <input type="number" class="w-full bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500"/></label> <label class="flex items-center gap-1.5"><span class="text-[9px] text-slate-500 shrink-0"> </span> <input type="number" class="w-full bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500"/></label></div> <!> <!> <!></div>`);function ad(e,t){Ue(t,!0);let n=na(t,`unit`,3,`rem`),r=na(t,`minLabel`,3,`Min`),i=na(t,`maxLabel`,3,`Max`),a=na(t,`overridden`,3,!1),o=na(t,`ratioMin_bound`,3,1.05),s=na(t,`ratioMax_bound`,3,1.8),c=na(t,`previewKind`,3,`none`);function l(e){return Math.min(t.max,Math.max(t.min,e))}let u=I(()=>(t.minValue-t.min)/(t.max-t.min)*100),d=I(()=>(t.maxValue-t.min)/(t.max-t.min)*100);function f(e){return Math.min(s(),Math.max(o(),e))}let p=I(()=>t.ratioPresets?.find(e=>t.ratioMin!==void 0&&Math.abs(e.value-t.ratioMin)<.0015)?.value),m=I(()=>t.ratioPresets?.find(e=>t.ratioMax!==void 0&&Math.abs(e.value-t.ratioMax)<.0015)?.value);var h=id(),g=z(h),_=z(g),v=z(_,!0);F(_);var y=V(_,2),b=V(z(y)),x=z(b);F(b);var S=V(b,2),C=z(S);F(S),Me(),F(y),F(g);var w=V(g,2),T=V(z(w),2),E=V(T,2);zi(E);var D=V(E,2);zi(D);var O=V(D,2),k=V(O,2);F(w);var ee=V(w,2),te=z(ee),ne=z(te),A=z(ne,!0);F(ne);var j=V(ne,2);zi(j),F(te);var M=V(te,2),re=z(M),ie=z(re,!0);F(re);var ae=V(re,2);zi(ae),F(M),F(ee);var oe=V(ee,2),se=e=>{var n=Zu(),a=z(n),o=V(z(a)),s=z(o,!0);F(o),F(a);var c=V(a,2),l=V(z(c)),u=z(l,!0);F(l),F(c),F(n),H((e,t,n,r)=>{Z(a,e),q(s,t),Z(c,n),q(u,r)},[()=>`font-size:${Math.min(t.minValue,2)}rem`,()=>r().toLowerCase(),()=>`font-size:${Math.min(t.maxValue,2.6)}rem`,()=>i().toLowerCase()]),K(e,n)},N=e=>{var n=Qu(),r=z(n),i=V(r,4);Me(2),F(n),H((e,t)=>{Z(r,e),Z(i,t)},[()=>`width:${Math.min(t.minValue*28,120)}px`,()=>`width:${Math.min(t.maxValue*28,200)}px`]),K(e,n)};J(oe,e=>{c()===`type`?e(se):c()===`space`&&e(N,1)});var ce=V(oe,2),le=e=>{var n=nd(),a=V(z(n),2);Y(a,21,()=>[{side:r(),value:t.ratioMin,active:U(p),onChange:t.onRatioMinChange},{side:i(),value:t.ratioMax,active:U(m),onChange:t.onRatioMaxChange}],e=>e.side,(e,n)=>{var r=td(),i=z(r),a=z(i,!0);F(i);var c=V(i,2),l=z(c),u=e=>{var t=$u();t.value=t.__value=``,K(e,t)};J(l,e=>{U(n).active===void 0&&e(u)}),Y(V(l),17,()=>t.ratioPresets,e=>e.value,(e,t)=>{var n=ed(),r=z(n,!0);F(n);var i={};H(e=>{q(r,U(t).label),i!==(i=e)&&(n.value=(n.__value=e)??``)},[()=>String(U(t).value)]),K(e,n)}),F(c);var d;Di(c);var p=V(c,2);zi(p),Q(p,`step`,.001),F(r),H(e=>{q(a,U(n).side),Q(c,`aria-label`,`${U(n).side} modular scale ratio preset`),d!==(d=e)&&(c.value=(c.__value=e)??``,Ei(c,e)),Q(p,`aria-label`,`${U(n).side} modular scale custom ratio`),Q(p,`min`,o()),Q(p,`max`,s()),Bi(p,U(n).value)},[()=>U(n).active===void 0?``:String(U(n).active)]),W(`change`,c,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(n).onChange?.(f(t))}),W(`change`,p,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(n).onChange?.(f(t))}),K(e,r)}),F(a),F(n),K(e,n)};J(ce,e=>{t.ratioPresets&&e(le)});var ue=V(ce,2),de=e=>{var n=rd(),r=z(n);F(n),W(`click`,r,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(ue,e=>{a()&&t.onReset&&e(de)}),F(h),H(e=>{X(h,1,`rounded-xl border p-3 ${a()?`bg-indigo-500/8 border-indigo-500/25`:`bg-white/4 border-white/8`}`,`svelte-iy59wr`),q(v,t.title),q(x,`${t.minValue??``}${n()??``}`),q(C,`${t.maxValue??``}${n()??``}`),Z(T,e),Q(E,`min`,t.min),Q(E,`max`,t.max),Q(E,`step`,t.step),Bi(E,t.minValue),Q(E,`aria-label`,`${t.title} min`),Q(D,`min`,t.min),Q(D,`max`,t.max),Q(D,`step`,t.step),Bi(D,t.maxValue),Q(D,`aria-label`,`${t.title} max`),Z(O,`left: calc(${U(u)}% - 6px)`),Z(k,`left: calc(${U(d)}% - 6px)`),q(A,r()),Q(j,`min`,t.min),Q(j,`max`,t.max),Q(j,`step`,t.step),Bi(j,t.minValue),q(ie,i()),Q(ae,`min`,t.min),Q(ae,`max`,t.max),Q(ae,`step`,t.step),Bi(ae,t.maxValue)},[()=>`left:${Math.min(U(u),U(d))}%; right:${100-Math.max(U(u),U(d))}%`]),W(`input`,E,e=>t.onMinChange(Math.min(l(parseFloat(e.target.value)),t.maxValue))),W(`input`,D,e=>t.onMaxChange(Math.max(l(parseFloat(e.target.value)),t.minValue))),W(`change`,j,e=>t.onMinChange(l(parseFloat(e.target.value)||t.min))),W(`change`,ae,e=>t.onMaxChange(l(parseFloat(e.target.value)||t.max))),K(e,h),We()}Br([`input`,`change`,`click`]);var od=G(`<option style="font-family:inherit;background:#16161e;"> </option>`),sd=G(`<option style="background:#16161e;"> </option>`),cd=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),ld=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-14 shrink-0"> </span> <select class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select> <!></div>`),ud=G(`<!> <div class="rounded-xl bg-white/4 border border-white/8 p-3 space-y-2"><div class="text-[10px] font-semibold text-slate-400">Google Font</div> <div class="flex gap-2"><select class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"><option style="background:#16161e;">Pick a font…</option><!></select> <div class="flex gap-1 shrink-0"><button>Body</button> <button>Heading</button></div></div> <input type="text" placeholder="…or type any Google font name" class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <button class="w-full py-1.5 rounded-lg bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 text-[11px] font-bold cursor-pointer hover:bg-indigo-600/30 transition-all"> </button></div>`,1),dd=G(`<span class="absolute top-0.5 right-0.5 w-1 h-1 rounded-full bg-indigo-400"></span>`),fd=G(`<button> <!></button>`),pd=G(`<option style="background:#16161e;">custom</option>`),md=G(`<button> </button>`),hd=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Tracking</span> <select class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select></div>`),gd=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Max width</span> <input type="text" placeholder="none" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),_d=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer"> </button>`),vd=G(`<div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div> <div class="bg-white/4 rounded-xl border border-white/8 px-3 py-3 overflow-hidden"><div class="text-white/85 truncate">The quick brown fox</div></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Size</span> <select class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Line height</span> <select class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select></div> <div><span class="text-[10px] font-semibold text-slate-400">Weight</span> <div class="flex gap-1 mt-1"></div></div> <!> <!> <div class="flex justify-end"><!></div>`,1),yd=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>`),bd=G(`<div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200"> </span> <!></div> <div class="flex gap-1"></div></div>`),xd=G(`<button><span> </span></button>`),Sd=G(`<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5"> </div> <div class="flex gap-1"></div></div>`),Cd=G(`<!> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Emphasis style</div> <div class="flex gap-1"></div></div> <!> <!> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">External marker</span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),wd=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>`),Td=G(`<div class="group"><div class="flex items-center justify-between mb-1"><span class="text-[10px] font-semibold text-slate-200"> </span> <!></div> <div class="flex gap-1"></div></div>`),Ed=G(`<p class="text-[9px] text-slate-600 leading-relaxed">Named weight tokens. Override if your font uses non-standard axis values.</p> <!>`,1),Dd=G(`<div><div class="text-[9px] text-slate-600 mb-1"> </div> <!></div>`),Od=G(`<!> <div class="grid grid-cols-2 gap-3"></div> <!>`,1),kd=G(`<div class="group"><div class="flex items-center justify-between mb-1"><span class="text-[10px] font-semibold text-slate-200"> </span> <!></div> <!></div>`),Ad=G(`<div class="mt-3 space-y-4"></div>`),jd=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Utopia-style fluid scale. Each endpoint has three values — viewport width,
+      base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.</p> <!> <!> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Line height scale</div> <div class="space-y-2"></div></div> <!> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Letter-spacing scale</div> <p class="text-[9px] text-slate-600 mb-2">Overriding these propagates to heading sizes that reference them.</p> <div class="space-y-2"></div></div> <div class="pt-1"><button class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"><div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div> <span class="text-[10px]"> </span></button> <!></div>`,1),Md=G(`<div class="flex items-baseline gap-2"><span class="text-[9px] font-mono text-slate-600 w-6 shrink-0 text-right"> </span> <span class="text-white/80 font-medium leading-none truncate">Aa</span> <span class="text-[9px] font-mono text-slate-600 ml-auto shrink-0"> </span></div>`),Nd=G(`<div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1 overflow-hidden"></div>`),Pd=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),Fd=G(`<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-400 w-6 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),Id=G(`<p class="text-[9px] text-slate-600 leading-relaxed">Per-text-size max-width caps on <span class="font-mono text-slate-400">.sf-text-*</span> elements. Set to <span class="font-mono text-slate-400">none</span> to remove the constraint; use <span class="font-mono text-slate-400">ch</span> units for character-based measures.</p> <div class="space-y-1.5"></div>`,1),Ld=G(`<p class="text-[9px] text-slate-600 leading-relaxed">Advanced OpenType and variable-font axes. Leave as <span class="font-mono text-slate-400">normal</span> unless your font supports these features.</p> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Numeric figures</div> <div class="flex gap-1"></div></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Optical sizing</div> <div class="flex gap-1"></div></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Font features</span> <input type="text" placeholder="normal" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Variation</span> <input type="text" placeholder="normal" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),Rd=G(`<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Font families</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Per-type styles</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Body text</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Font weight scale</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Display type</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Modular scale (Mobile → Desktop)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section><button class="w-full flex items-center justify-between cursor-pointer mb-3"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scale preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line lengths (max-width)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Advanced typography</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>`);function zd(e,t){Ue(t,!0);let n=[{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}],r=[{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`}],i=[{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`}],a=[{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`}],o=`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`.split(`.`),s=[{label:`balance`,value:`balance`},{label:`pretty`,value:`pretty`},{label:`normal`,value:`normal`}],c=[`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`],l={"--sf-font-weight-body":`400`,"--sf-font-weight-heading":`600`,"--sf-font-weight-display":`700`,"--sf-font-weight-interactive":`600`},u=[{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}],d=[{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}],f=[{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}],p=[{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}],m=f.map(e=>({label:e.label,value:`var(${e.token})`,num:e.default})),g=d.map(e=>({label:e.label,value:`var(${e.token})`,em:e.default})),_=[{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)`}],v=L(`h1`),y=I(()=>_.find(e=>e.id===U(v))),b=jl.typography??[];function x(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let S=I(()=>x(`--sf-text-ratio-min`,1.25)),C=I(()=>x(`--sf-text-ratio-max`,1.333)),w=I(()=>x(`--sf-text-base-min`,1)),T=I(()=>x(`--sf-text-base-max`,1.25)),E=I(()=>x(`--sf-text-display-base-min`,2.4)),D=I(()=>x(`--sf-text-display-base-max`,3)),O=I(()=>x(`--sf-leading-taper`,0)),k=I(()=>x(`--sf-text-scale`,1)),ee=I(()=>x(`--sf-fluid-min-vw`,22.5)),te=I(()=>x(`--sf-fluid-max-vw`,90)),ne=L(!1),A=L(!1),j=L(!1),M=L(!1),re=L(!1),ie=L(!1),ae=L(!1),oe=L(!1),se=L(!1),N=L(!1),ce=I(()=>t.overrides[`--sf-font-body`]??``),le=I(()=>t.overrides[`--sf-font-heading`]??``),ue=I(()=>t.overrides[`--sf-font-mono`]??`ui-monospace, monospace`),de=L(``),fe=L(`body`);function pe(e){let n=t.overrides[e.token];return n?parseFloat(n.replace(`em`,``)):e.default}function me(e){return x(e.token,e.default)}function he(e){if(!e.trim())return;let t=`gf-${e.replace(/\s+/g,`-`)}`;if(!document.getElementById(t)){let n=document.createElement(`link`);n.id=t,n.rel=`stylesheet`,n.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(e)}:wght@100;200;300;400;500;600;700;800;900&display=swap`,document.head.appendChild(n)}}function ge(e,n){if(!e.trim())return;he(e);let r=n===`body`?`--sf-font-body`:`--sf-font-heading`;t.onSet(r,`'${e}', sans-serif`)}function _e(e,n){return e?t.overrides[e]??n:n}function ve(e,n,r){e&&(n===r?t.onReset(e):t.onSet(e,n))}let ye=I(()=>{let e=_e(U(y).size,U(y).dSize),t=p.find(t=>t.value===e),n=(U(w)+U(T))/2;return Math.min((t?.approx??1)*n*U(k),2.4)}),be=I(()=>{let e=_e(U(y).wt,U(y).dWt),t=parseInt(e);return isNaN(t)?600:t}),xe=I(()=>{if(!U(y).ls)return 0;let e=_e(U(y).ls,U(y).dLs),t=g.find(t=>t.value===e);if(t)return t.em;let n=parseFloat(e.replace(`em`,``));return isNaN(n)?0:n}),Se=I(()=>{let e=_e(U(y).lh,U(y).dLh),t=m.find(t=>t.value===e);if(t)return t.num;let n=parseFloat(e);return isNaN(n)?1.3:n});var Ce=Rd(),we=z(Ce),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=ud(),s=B(n);Y(s,17,()=>[{label:`Body`,token:`--sf-font-body`,current:U(ce),opts:r},{label:`Heading`,token:`--sf-font-heading`,current:U(le),opts:i},{label:`Mono`,token:`--sf-font-mono`,current:U(ue),opts:a}],e=>e.token,(e,n)=>{var r=ld(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);Y(s,17,()=>U(n).opts,e=>e.label,(e,t)=>{var n=od(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var c=V(s),l=e=>{var t=sd(),r=z(t);F(t);var i={};H(e=>{q(r,`Custom: ${e??``}`),i!==(i=U(n).current)&&(t.value=(t.__value=U(n).current)??``)},[()=>U(n).current.split(`,`)[0].replace(/['"]/g,``)]),K(e,t)},u=I(()=>U(n).current&&!U(n).opts.some(e=>e.value===U(n).current));J(c,e=>{U(u)&&e(l)}),F(o);var d;Di(o);var f=V(o,2),p=e=>{var r=cd();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(f,e=>{U(n).token in t.overrides&&e(p)}),F(r),H(()=>{q(a,U(n).label),Z(o,`font-family: ${U(n).current||`inherit`}`),d!==(d=U(n).current)&&(o.value=(o.__value=U(n).current)??``,Ei(o,U(n).current))}),W(`change`,o,e=>{let r=e.target.value;r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)});var c=V(s,2),l=V(z(c),2),u=z(l),d=z(u);d.value=d.__value=``,Y(V(d),16,()=>o,e=>e,(e,t)=>{var n=sd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(u);var f;Di(u);var p=V(u,2),m=z(p),h=V(m,2);F(p),F(l);var g=V(l,2);zi(g);var _=V(g,2),v=z(_);F(_),F(c),H(()=>{f!==(f=U(de))&&(u.value=(u.__value=U(de))??``,Ei(u,U(de))),X(m,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(fe)===`body`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400`}`),X(h,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(fe)===`heading`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400`}`),Bi(g,U(de)),q(v,`Load & apply to ${U(fe)??``}`)}),W(`change`,u,e=>{R(de,e.target.value,!0)}),W(`click`,m,()=>{R(fe,`body`)}),W(`click`,h,()=>{R(fe,`heading`)}),W(`input`,g,e=>{R(de,e.target.value,!0)}),W(`click`,_,()=>ge(U(de),U(fe))),K(e,n)};J(P,e=>{U(ne)&&e(Oe)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Me=z(je,!0);F(je),F(Ae);var Ne=V(Ae,2),Pe=e=>{var n=vd(),r=B(n);Y(r,21,()=>_,e=>e.id,(e,n)=>{let r=I(()=>U(n).size in t.overrides||U(n).lh in t.overrides||U(n).wt in t.overrides||!!U(n).ls&&U(n).ls in t.overrides);var i=fd(),a=z(i),o=V(a),s=e=>{K(e,dd())};J(o,e=>{U(r)&&e(s)}),F(i),H(()=>{X(i,1,`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${U(v)===U(n).id?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(a,`${U(n).label??``} `)}),W(`click`,i,()=>{R(v,U(n).id,!0)}),K(e,i)}),F(r);var i=V(r,2),a=z(i);F(i);var o=V(i,2),s=V(z(o),2),l=z(s);Y(l,17,()=>p,e=>e.value,(e,t)=>{var n=sd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var u=V(l),d=e=>{var t=pd(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).size,U(y).dSize)]),K(e,t)},f=I(()=>!p.some(e=>e.value===_e(U(y).size,U(y).dSize)));J(u,e=>{U(f)&&e(d)}),F(s);var h;Di(s),F(o);var b=V(o,2),x=V(z(b),2),S=z(x);Y(S,17,()=>m,e=>e.value,(e,t)=>{var n=sd(),r=z(n);F(n);var i={};H(()=>{q(r,`${U(t).label??``} · ${U(t).num??``}`),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var C=V(S),w=e=>{var t=pd(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).lh,U(y).dLh)]),K(e,t)},T=I(()=>!m.some(e=>e.value===_e(U(y).lh,U(y).dLh)));J(C,e=>{U(T)&&e(w)}),F(x);var E;Di(x),F(b);var D=V(b,2),O=V(z(D),2);Y(O,20,()=>c,e=>e,(e,t)=>{let n=I(()=>_e(U(y).wt,U(y).dWt));var r=md(),i=z(r,!0);F(r),H(e=>{Z(r,e),X(r,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(n)===t?`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`}`),q(i,t)},[()=>`font-weight:${parseInt(t)}`]),W(`click`,r,()=>ve(U(y).wt,t,U(y).dWt)),K(e,r)}),F(O),F(D);var k=V(D,2),ee=e=>{var t=hd(),n=V(z(t),2),r=z(n);Y(r,17,()=>g,e=>e.value,(e,t)=>{var n=sd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var i=V(r),a=e=>{var t=pd(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).ls,U(y).dLs)]),K(e,t)},o=I(()=>!g.some(e=>e.value===_e(U(y).ls,U(y).dLs)));J(i,e=>{U(o)&&e(a)}),F(n);var s;Di(n),F(t),H(e=>{s!==(s=e)&&(n.value=(n.__value=e)??``,Ei(n,e))},[()=>_e(U(y).ls,U(y).dLs)]),W(`change`,n,e=>ve(U(y).ls,e.target.value,U(y).dLs)),K(e,t)};J(k,e=>{U(y).ls&&e(ee)});var te=V(k,2),ne=e=>{let n=I(()=>`--sf-${U(y).id}-max-width`);var r=gd(),i=V(z(r),2);zi(i);var a=V(i,2),o=e=>{var r=cd();W(`click`,r,()=>t.onReset(U(n))),K(e,r)};J(a,e=>{U(n)in t.overrides&&e(o)}),F(r),H(()=>Bi(i,t.overrides[U(n)]??``)),W(`input`,i,e=>{let r=e.target.value.trim();r?t.onSet(U(n),r):t.onReset(U(n))}),K(e,r)};J(te,e=>{U(y).id!==`body`&&e(ne)});var A=V(te,2),j=z(A),M=e=>{var n=_d(),r=z(n);F(n),H(()=>q(r,`reset ${U(y).label??``}`)),W(`click`,n,()=>{let e={[U(y).size]:null,[U(y).lh]:null,[U(y).wt]:null};U(y).ls&&(e[U(y).ls]=null),t.onBulkChange(e)}),K(e,n)};J(j,e=>{(U(y).size in t.overrides||U(y).lh in t.overrides||U(y).wt in t.overrides||U(y).ls&&U(y).ls in t.overrides)&&e(M)}),F(A),H((e,t)=>{Z(a,`font-size:${U(ye)}rem; font-weight:${U(be)}; letter-spacing:${U(xe)}em; line-height:${U(Se)}; font-family:${U(y).id===`body`?U(ce)||`inherit`:U(le)||U(ce)||`inherit`}`),h!==(h=e)&&(s.value=(s.__value=e)??``,Ei(s,e)),E!==(E=t)&&(x.value=(x.__value=t)??``,Ei(x,t))},[()=>_e(U(y).size,U(y).dSize),()=>_e(U(y).lh,U(y).dLh)]),W(`change`,s,e=>ve(U(y).size,e.target.value,U(y).dSize)),W(`change`,x,e=>ve(U(y).lh,e.target.value,U(y).dLh)),K(e,n)};J(Ne,e=>{U(A)&&e(Pe)}),F(ke);var Fe=V(ke,4),Ie=z(Fe),Le=V(z(Ie),2),Re=z(Le,!0);F(Le),F(Ie);var ze=V(Ie,2),Be=e=>{var n=Cd(),r=B(n);Y(r,16,()=>[{label:`Body strong`,tokenName:`--sf-font-weight-strong`},{label:`Interactive`,tokenName:`--sf-font-weight-interactive`}],e=>e.tokenName,(e,n)=>{let r=I(()=>l[n.tokenName]??`600`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=bd(),s=z(o),u=z(s),d=z(u);F(u);var f=V(u,2),p=e=>{var r=yd();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>c,e=>e,(e,o)=>{var s=md(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`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`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)});var i=V(r,2),a=V(z(i),2);Y(a,20,()=>[[`Italic`,`italic`],[`Normal`,`normal`]],([e,t])=>t,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-body-em-style`]??`italic`);var s=xd(),c=z(s),l=z(c,!0);F(c),F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===a()?`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`}`),Z(c,`font-style: ${a()}`),q(l,i())}),W(`click`,s,()=>a()===`italic`?t.onReset(`--sf-body-em-style`):t.onSet(`--sf-body-em-style`,a())),K(e,s)}),F(a),F(i);var o=V(i,2);{let e=I(()=>x(`--sf-code-font-size`,.875)),n=I(()=>`--sf-code-font-size`in t.overrides);$(o,{label:`Code font size`,get value(){return U(e)},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 U(n)},onChange:e=>t.onSet(`--sf-code-font-size`,`${e}em`),onReset:()=>t.onReset(`--sf-code-font-size`)})}var u=V(o,2);Y(u,16,()=>[{label:`Heading wrap`,token:`--sf-heading-text-wrap`,defaultVal:`balance`},{label:`Body wrap`,token:`--sf-body-text-wrap`,defaultVal:`pretty`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??n.defaultVal);var i=Sd(),a=z(i),o=z(a,!0);F(a);var c=V(a,2);Y(c,21,()=>s,e=>e.value,(e,i)=>{var a=md(),o=z(a,!0);F(a),H(()=>{X(a,1,`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===U(i).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`}`),q(o,U(i).label)}),W(`click`,a,()=>U(i).value===n.defaultVal&&!(n.token in t.overrides)?void 0:U(i).value===n.defaultVal?t.onReset(n.token):t.onSet(n.token,U(i).value)),K(e,a)}),F(c),F(i),H(()=>q(o,n.label)),K(e,i)});var d=V(u,2),f=V(z(d),2);zi(f),Q(f,`placeholder`,`" ↗"`);var p=V(f,2),m=e=>{var n=cd();W(`click`,n,()=>t.onReset(`--sf-link-external-marker`)),K(e,n)};J(p,e=>{`--sf-link-external-marker`in t.overrides&&e(m)}),F(d),H(()=>Bi(f,t.overrides[`--sf-link-external-marker`]??``)),W(`input`,f,e=>{let n=e.target.value;n?t.onSet(`--sf-link-external-marker`,n):t.onReset(`--sf-link-external-marker`)}),K(e,n)};J(ze,e=>{U(j)&&e(Be)}),F(Fe);var Ve=V(Fe,4),He=z(Ve),Ge=V(z(He),2),Ke=z(Ge,!0);F(Ge),F(He);var qe=V(He,2),Je=e=>{var n=Ed();Y(V(B(n),2),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}],e=>e.token,(e,n)=>{var r=Td(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),l=e=>{var r=wd();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(l)}),F(i);var u=V(i,2);Y(u,20,()=>c,e=>e,(e,r)=>{let i=I(()=>t.overrides[n.token]??String(n.def));var a=md(),o=z(a,!0);F(a),H(e=>{Z(a,e),X(a,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===r?`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`}`),q(o,r)},[()=>`font-weight:${parseInt(r)}`]),W(`click`,a,()=>r===String(n.def)&&!(n.token in t.overrides)?void 0:r===String(n.def)?t.onReset(n.token):t.onSet(n.token,r)),K(e,a)}),F(u),F(r),H(()=>q(o,n.label)),K(e,r)}),K(e,n)};J(qe,e=>{U(N)&&e(Je)}),F(Ve);var Ye=V(Ve,4),Xe=z(Ye),Ze=V(z(Xe),2),Qe=z(Ze,!0);F(Ze),F(Xe);var $e=V(Xe,2),et=e=>{var n=Od(),r=B(n);{let e=I(()=>`--sf-text-display-base-min`in t.overrides||`--sf-text-display-base-max`in t.overrides);ad(r,{title:`Display base size`,get minValue(){return U(E)},get maxValue(){return U(D)},min:1.5,max:6,step:.05,unit:`rem`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-display-base-min`),t.onReset(`--sf-text-display-base-max`)},onMinChange:e=>t.onSet(`--sf-text-display-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-display-base-max`,String(e))})}var i=V(r,2);Y(i,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}],e=>e.token,(e,n)=>{var r=Dd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>x(n.token,n.def)),r=I(()=>n.token in t.overrides);$(o,{label:``,get value(){return U(e)},min:.8,max:1.5,step:.025,get overridden(){return U(r)},onChange:e=>t.onSet(n.token,String(e)),onReset:()=>t.onReset(n.token)})}F(r),H(()=>q(a,n.label)),K(e,r)}),F(i),Y(V(i,2),16,()=>[{label:`Display`,tokenName:`--sf-font-weight-display`},{label:`Heading`,tokenName:`--sf-font-weight-heading`}],e=>e.tokenName,(e,n)=>{let r=I(()=>l[n.tokenName]??`700`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=bd(),s=z(o),u=z(s),d=z(u);F(u);var f=V(u,2),p=e=>{var r=yd();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>c,e=>e,(e,o)=>{var s=md(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`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`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)}),K(e,n)};J($e,e=>{U(M)&&e(et)}),F(Ye);var tt=V(Ye,4),nt=z(tt),rt=V(z(nt),2),it=z(rt,!0);F(rt),F(nt);var at=V(nt,2),ot=e=>{var r=jd(),i=V(B(r),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);ad(i,{title:`Viewport range`,get minValue(){return U(ee)},get maxValue(){return U(te)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-text-base-min`in t.overrides||`--sf-text-base-max`in t.overrides);ad(a,{title:`Base size & ratio`,get minValue(){return U(w)},get maxValue(){return U(T)},min:.7,max:2,step:.01,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-base-min`),t.onReset(`--sf-text-base-max`)},onMinChange:e=>t.onSet(`--sf-text-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-base-max`,String(e)),get ratioPresets(){return n},get ratioMin(){return U(S)},get ratioMax(){return U(C)},ratioMin_bound:1.05,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-text-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-text-ratio-max`,String(e))})}var o=V(a,2),s=V(z(o),2);Y(s,21,()=>f,e=>e.token,(e,n)=>{{let r=I(()=>me(U(n))),i=I(()=>`${U(n).token} — ${U(n).label.toLowerCase()} line height`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:2.2,step:.05,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(s),F(o);var c=V(o,2);{let e=I(()=>`--sf-leading-taper`in t.overrides);$(c,{label:`Leading taper`,get value(){return U(O)},min:0,max:.5,step:.01,help:`How aggressively large display sizes shrink their line-height.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-leading-taper`,String(e)),onReset:()=>t.onReset(`--sf-leading-taper`)})}var l=V(c,2),u=V(z(l),4);Y(u,21,()=>d,e=>e.token,(e,n)=>{var r=kd(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),c=e=>{var r=wd();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(i);var l=V(i,2);{let e=I(()=>pe(U(n)));zl(l,{get value(){return U(e)},min:-.1,max:.2,step:.005,unit:`em`,onChange:e=>t.onSet(U(n).token,`${e}em`)})}F(r),H(()=>q(o,U(n).label)),K(e,r)}),F(u),F(l);var p=V(l,2),m=z(p),h=V(z(m),2),g=z(h,!0);F(h),F(m);var _=V(m,2),v=e=>{var n=Ad();Y(n,21,()=>b,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(_,e=>{U(ie)&&e(v)}),F(p),H(()=>{Q(m,`aria-expanded`,U(ie)),q(g,U(ie)?`▲`:`▼`)}),W(`click`,m,()=>{R(ie,!U(ie))}),K(e,r)};J(at,e=>{U(re)&&e(ot)}),F(tt);var st=V(tt,4),ct=z(st),lt=V(z(ct),2),ut=z(lt,!0);F(lt),F(ct);var dt=V(ct,2),ft=e=>{var t=Nd();Y(t,21,()=>[...u].reverse(),({label:e,factor:t})=>e,(e,t)=>{let n=()=>U(t).label,r=()=>U(t).factor,i=I(()=>(U(w)+U(T))/2),a=I(()=>U(i)*r()*U(k));var o=Md(),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=V(l,2),d=z(u);F(u),F(o),H((e,t)=>{q(c,n()),Z(l,e),q(d,`${t??``}rem`)},[()=>`font-size: ${Math.min(U(a),2.5)}rem; font-family: ${U(ce)||`inherit`}`,()=>U(a).toFixed(2)]),K(e,o)}),F(t),K(e,t)};J(dt,e=>{U(ae)&&e(ft)}),F(st);var pt=V(st,4),mt=z(pt),ht=V(z(mt),2),gt=z(ht,!0);F(ht),F(mt);var _t=V(mt,2),vt=e=>{var n=Id(),r=V(B(n),2);Y(r,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`}],e=>e.token,(e,n)=>{var r=Fd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Pd();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(_t,e=>{U(se)&&e(vt)}),F(pt);var yt=V(pt,4),bt=z(yt),xt=V(z(bt),2),St=z(xt,!0);F(xt),F(bt);var Ct=V(bt,2),wt=e=>{var n=Ld(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[[`tabular-nums`,`tabular-nums (default)`],[`proportional-nums`,`proportional-nums`],[`normal`,`normal`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-font-numeric`]??`tabular-nums`);var s=md(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(o)===i()?`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`}`),q(c,a())}),W(`click`,s,()=>i()===`tabular-nums`?t.onReset(`--sf-font-numeric`):t.onSet(`--sf-font-numeric`,i())),K(e,s)}),F(i),F(r);var a=V(r,2),o=V(z(a),2);Y(o,20,()=>[[`auto`,`auto (default)`],[`none`,`none`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-optical-sizing`]??`auto`);var s=md(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`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`}`),q(c,a())}),W(`click`,s,()=>i()===`auto`?t.onReset(`--sf-optical-sizing`):t.onSet(`--sf-optical-sizing`,i())),K(e,s)}),F(o),F(a);var s=V(a,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=Pd();W(`click`,n,()=>t.onReset(`--sf-font-features`)),K(e,n)};J(l,e=>{`--sf-font-features`in t.overrides&&e(u)}),F(s);var d=V(s,2),f=V(z(d),2);zi(f);var p=V(f,2),m=e=>{var n=Pd();W(`click`,n,()=>t.onReset(`--sf-font-variation`)),K(e,n)};J(p,e=>{`--sf-font-variation`in t.overrides&&e(m)}),F(d),H(()=>{Bi(c,t.overrides[`--sf-font-features`]??``),Bi(f,t.overrides[`--sf-font-variation`]??``)}),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-features`,n):t.onReset(`--sf-font-features`)}),W(`input`,f,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-variation`,n):t.onReset(`--sf-font-variation`)}),K(e,n)};J(Ct,e=>{U(oe)&&e(wt)}),F(yt),F(Ce),H(()=>{Q(Te,`aria-expanded`,U(ne)),q(De,U(ne)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(A)),q(Me,U(A)?`▲`:`▼`),Q(Ie,`aria-expanded`,U(j)),q(Re,U(j)?`▲`:`▼`),Q(He,`aria-expanded`,U(N)),q(Ke,U(N)?`▲`:`▼`),Q(Xe,`aria-expanded`,U(M)),q(Qe,U(M)?`▲`:`▼`),Q(nt,`aria-expanded`,U(re)),q(it,U(re)?`▲`:`▼`),Q(ct,`aria-expanded`,U(ae)),q(ut,U(ae)?`▲`:`▼`),Q(mt,`aria-expanded`,U(se)),q(gt,U(se)?`▲`:`▼`),Q(bt,`aria-expanded`,U(oe)),q(St,U(oe)?`▲`:`▼`)}),W(`click`,Te,()=>{R(ne,!U(ne))}),W(`click`,Ae,()=>{R(A,!U(A))}),W(`click`,Ie,()=>{R(j,!U(j))}),W(`click`,He,()=>{R(N,!U(N))}),W(`click`,Xe,()=>{R(M,!U(M))}),W(`click`,nt,()=>{R(re,!U(re))}),W(`click`,ct,()=>{R(ae,!U(ae))}),W(`click`,mt,()=>{R(se,!U(se))}),W(`click`,bt,()=>{R(oe,!U(oe))}),K(e,Ce),We()}Br([`click`,`change`,`input`]);var Bd=G(`<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-6 text-right shrink-0"> </span> <div class="bg-indigo-500/50 rounded shrink-0 h-3"></div> <span class="text-[9px] font-mono text-slate-500 shrink-0"> </span></div>`),Vd=G(`<p class="text-[10px] text-slate-600 leading-relaxed">The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).</p> <!> <!> <!>`,1),Hd=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Utopia-style fluid scale — viewport width, base unit and ratio per endpoint.
+        The viewport range is shared with the type scale.</p> <!> <!>`,1),Ud=G(`<div class="space-y-4"></div>`),Wd=G(`<div class="p-4 space-y-6"><section><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Space scale preview</div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Layout gap</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Modular scale (Mobile → Desktop)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"><div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div> <span class="text-[10px]"> </span></button> <!></section></div>`);function Gd(e,t){Ue(t,!0);let n=[{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}],r=[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`],i=jl.spacing??[];function a(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let o=I(()=>a(`--sf-space-ratio-min`,1.25)),s=I(()=>a(`--sf-space-ratio-max`,1.333)),c=I(()=>a(`--sf-space-base-min`,1)),l=I(()=>a(`--sf-space-base-max`,2)),u=I(()=>a(`--sf-space-scale`,1)),d=I(()=>a(`--sf-gap`,1)),f=I(()=>a(`--sf-gutter`,1.5)),p=I(()=>a(`--sf-content-gap`,.5)),m=I(()=>a(`--sf-fluid-min-vw`,22.5)),h=I(()=>a(`--sf-fluid-max-vw`,90)),g=L(!1),_=L(!1),v=L(!1);var y=Wd(),b=z(y),x=V(z(b),2);Y(x,22,()=>r,e=>e,(e,t,n)=>{let r=I(()=>(U(c)+U(l))/2),i=I(()=>(U(o)+U(s))/2),a=I(()=>U(n)-3),d=I(()=>U(a)>=0?U(r)*U(i)**+U(a):U(r)/U(i)**+-U(a)),f=I(()=>U(d)*U(u)),p=I(()=>Math.min(U(f)*28,240));var m=Bd(),h=z(m),g=z(h,!0);F(h);var _=V(h,2),v=V(_,2),y=z(v);F(v),F(m),H(e=>{q(g,t),Z(_,`width: ${U(p)}px; min-width: 3px`),q(y,`${e??``}rem`)},[()=>U(f).toFixed(2)]),K(e,m)}),F(x),F(b);var S=V(b,4),C=z(S),w=V(z(C),2),T=z(w,!0);F(w),F(C);var E=V(C,2),D=e=>{var n=Vd(),r=V(B(n),2);{let e=I(()=>`--sf-gap`in t.overrides);$(r,{label:`Gap`,get value(){return U(d)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-gap — spacing between layout items (cluster, grid, reel, stack, sidebar, bento)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-gap`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-gap`]},onRawSet:e=>t.onSet(`--sf-gap`,e)})}var i=V(r,2);{let e=I(()=>`--sf-content-gap`in t.overrides);$(i,{label:`Content gap`,get value(){return U(p)},min:0,max:2,step:.0625,unit:`rem`,help:`--sf-content-gap — tighter gap within components (defaults to space-s)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-gap`),rawDefault:`var(--sf-space-s)`,get currentRaw(){return t.overrides[`--sf-content-gap`]},onRawSet:e=>t.onSet(`--sf-content-gap`,e)})}var a=V(i,2);{let e=I(()=>`--sf-gutter`in t.overrides);$(a,{label:`Gutter`,get value(){return U(f)},min:0,max:6,step:.0625,unit:`rem`,help:`--sf-gutter — wide page/section side gutter (containers, .sf-section--guttered)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-gutter`),rawDefault:`var(--sf-space-l)`,get currentRaw(){return t.overrides[`--sf-gutter`]},onRawSet:e=>t.onSet(`--sf-gutter`,e)})}K(e,n)};J(E,e=>{U(g)&&e(D)}),F(S);var O=V(S,4),k=z(O),ee=V(z(k),2),te=z(ee,!0);F(ee),F(k);var ne=V(k,2),A=e=>{var r=Hd(),i=V(B(r),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);ad(i,{title:`Viewport range`,get minValue(){return U(m)},get maxValue(){return U(h)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-space-base-min`in t.overrides||`--sf-space-base-max`in t.overrides);ad(a,{title:`Base unit & ratio`,get minValue(){return U(c)},get maxValue(){return U(l)},min:.5,max:4,step:.05,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`space`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-space-base-min`),t.onReset(`--sf-space-base-max`)},onMinChange:e=>t.onSet(`--sf-space-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-space-base-max`,String(e)),get ratioPresets(){return n},get ratioMin(){return U(o)},get ratioMax(){return U(s)},ratioMin_bound:1.1,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-space-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-space-ratio-max`,String(e))})}K(e,r)};J(ne,e=>{U(_)&&e(A)}),F(O);var j=V(O,4),M=z(j),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=Ud();Y(n,21,()=>i,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(ae,e=>{U(v)&&e(oe)}),F(j),F(y),H(()=>{Q(C,`aria-expanded`,U(g)),q(T,U(g)?`▲`:`▼`),Q(k,`aria-expanded`,U(_)),q(te,U(_)?`▲`:`▼`),Q(M,`aria-expanded`,U(v)),q(ie,U(v)?`▲`:`▼`)}),W(`click`,C,()=>{R(g,!U(g))}),W(`click`,k,()=>{R(_,!U(_))}),W(`click`,M,()=>{R(v,!U(v))}),K(e,y),We()}Br([`click`]);var Kd=G(`<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-12 text-right shrink-0"> </span> <div class="flex-1 h-4 bg-white/5 rounded overflow-hidden"><div class="h-full bg-indigo-500/30 border-r border-indigo-400/40 rounded"></div></div> <span class="text-[9px] font-mono text-slate-500 w-14 shrink-0"> </span></div>`),qd=G(`<div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Narrow</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Prose</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Default</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Wide</div> <!></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>`,1),Jd=G(`<!> <!>`,1),Yd=G(`<div class="h-8 bg-indigo-500/20 border border-indigo-500/20 rounded text-[8px] font-mono text-indigo-400/60 flex items-center justify-center">col</div>`),Xd=G(`<!> <div><div class="text-[9px] text-slate-600 mb-1.5">Named sizes (grid-min-xs → 2xl)</div> <div class="space-y-1.5"></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><div class="text-[9px] text-slate-600 mb-2 font-mono">Preview at 360px panel width</div> <div class="grid gap-1"></div></div>`,1),Zd=G(`<div class="w-8 h-1.5 bg-slate-600/60 rounded"></div>`),Qd=G(`<div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Mobile</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Desktop</div> <!></div></div> <div class="bg-white/4 rounded-xl border border-white/8 overflow-hidden"><div class="flex items-center px-3 bg-indigo-500/10 border-b border-white/8"><div class="w-16 h-2 bg-indigo-400/40 rounded"></div> <div class="ml-auto flex gap-2"></div></div> <div class="p-2 text-[9px] text-slate-600 font-mono"> </div></div>`,1),$d=G(`<p class="text-[9px] text-slate-600">Offsets position:sticky elements below a fixed header. Defaults to header heights.</p> <div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Mobile</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Desktop</div> <!></div></div>`,1),ef=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex gap-2 items-stretch" style="height: 60px"><div class="bg-indigo-500/15 border border-indigo-500/20 rounded flex-shrink-0 flex items-center justify-center"><span class="text-[8px] font-mono text-indigo-400/60 rotate-90 whitespace-nowrap"> </span></div> <div class="flex-1 bg-white/4 rounded"></div></div>`,1),tf=G(`<div class="mt-2 space-y-2"></div>`),nf=G(`<option style="background:#16161e;"> </option>`),rf=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),af=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0"> </span> <select class="flex-1 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"></select> <!></div>`),of=G(`<button> </button>`),sf=G(`<div id="more-layout-primitives" class="mt-3 space-y-5"><section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Switcher</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Sidebar content</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Cluster</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Equal grid</div> <!> <div><div class="text-[9px] text-slate-600 mb-1.5">Named column counts (equal-min-col-2/3/4/6)</div> <div class="space-y-1.5"></div></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Cover</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Frame ratio</div> <p class="text-[9px] text-slate-600">--sf-frame-ratio — aspect ratio for .sf-frame</p> <div class="grid grid-cols-5 gap-1"></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Reel</div> <p class="text-[9px] text-slate-600">--sf-reel-item-width — width of each item in a horizontal .sf-reel</p> <div class="grid grid-cols-4 gap-1"></div> <div class="flex items-center gap-2 pt-0.5"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Height</span> <input type="text" placeholder="auto" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Imposter</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Content grid (breakout)</div> <!> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Alternate (zigzag)</div> <!></section></div>`),cf=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),lf=G(`<div class="mt-2 space-y-2"><p class="text-[9px] text-slate-600">Override the built-in named aspect ratios used by <span class="font-mono text-slate-400">.sf-ratio-*</span> utilities.</p> <!></div>`),uf=G(`<div class="mt-2 space-y-3"><p class="text-[9px] text-slate-600">Default values for the <span class="font-mono text-slate-400">.sf-bg</span> full-bleed background utility.</p> <!> <!> <!> <!></div>`),df=G(`<div class="p-4 space-y-6"><section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Container widths</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Center wrapper</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Auto grid</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Header height</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sticky offset</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sidebar</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Bento grid</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button aria-controls="more-layout-primitives" class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">More layout primitives</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Named ratios</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Background layer (.sf-bg)</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div></div>`);function ff(e,t){Ue(t,!0);function n(e,t){if(!e)return t;let n=parseFloat(e);return isNaN(n)?t:n}let r=I(()=>n(t.overrides[`--sf-container-narrow`],38)),i=I(()=>n(t.overrides[`--sf-container-prose`],65)),a=I(()=>n(t.overrides[`--sf-container-default`],75)),o=I(()=>n(t.overrides[`--sf-container-wide`],90)),s=I(()=>n(t.overrides[`--sf-center-max`],75)),c=I(()=>n(t.overrides[`--sf-center-gutter`],1)),l=I(()=>n(t.overrides[`--sf-grid-min`],16)),u=I(()=>n(t.overrides[`--sf-header-height-mobile`],3.5)),d=I(()=>n(t.overrides[`--sf-header-height-desktop`],5)),f=I(()=>n(t.overrides[`--sf-sidebar-width`],18)),p=I(()=>n(t.overrides[`--sf-sticky-offset-mobile`],3.5)),m=I(()=>n(t.overrides[`--sf-sticky-offset-desktop`],5)),h=[{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}],g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1);function E(e){let n=t.overrides[e.token];return n?parseFloat(n):e.default}let D=I(()=>n(t.overrides[`--sf-switcher-threshold`],30)),O=I(()=>n(t.overrides[`--sf-sidebar-min-width`],50)),k=I(()=>n(t.overrides[`--sf-equal-min-col`],16)),ee=I(()=>n(t.overrides[`--sf-cover-min-height`],100)),te=I(()=>n(t.overrides[`--sf-imposter-margin`],1)),ne=I(()=>n(t.overrides[`--sf-breakout-width`],90)),A=I(()=>n(t.overrides[`--sf-content-width`],75)),j=I(()=>n(t.overrides[`--sf-alternate-inner-gap`],1)),M=I(()=>t.overrides[`--sf-frame-ratio`]??`16 / 9`),re=I(()=>t.overrides[`--sf-reel-item-width`]??`max-content`),ie=[`16 / 9`,`4 / 3`,`3 / 2`,`1 / 1`,`21 / 9`],ae=[{label:`auto`,value:`max-content`},{label:`12rem`,value:`12rem`},{label:`16rem`,value:`16rem`},{label:`20rem`,value:`20rem`}];var oe=df(),se=z(oe),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var n=qd(),s=B(n),c=z(s),l=V(z(c),2);{let e=I(()=>`--sf-container-narrow`in t.overrides);$(l,{label:``,get value(){return U(r)},min:20,max:60,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-narrow`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-narrow`)})}F(c);var u=V(c,2),d=V(z(u),2);{let e=I(()=>`--sf-container-prose`in t.overrides);$(d,{label:``,get value(){return U(i)},min:40,max:90,step:1,unit:`ch`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-prose`,`${e}ch`),onReset:()=>t.onReset(`--sf-container-prose`)})}F(u);var f=V(u,2),p=V(z(f),2);{let e=I(()=>`--sf-container-default`in t.overrides);$(p,{label:``,get value(){return U(a)},min:50,max:120,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-default`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-default`)})}F(f);var m=V(f,2),h=V(z(m),2);{let e=I(()=>`--sf-container-wide`in t.overrides);$(h,{label:``,get value(){return U(o)},min:60,max:160,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-wide`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-wide`)})}F(m),F(s);var g=V(s,2);Y(g,21,()=>[{label:`narrow`,value:U(r),max:U(o),unit:`rem`},{label:`prose`,value:U(i),max:U(o)*1.5,unit:`ch`},{label:`default`,value:U(a),max:U(o),unit:`rem`},{label:`wide`,value:U(o),max:U(o),unit:`rem`}],e=>e.label,(e,t)=>{var n=Kd(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=z(a);F(a);var s=V(a,2),c=z(s);F(s),F(n),H(e=>{q(i,U(t).label),Z(o,e),q(c,`${U(t).value??``}${U(t).unit??``}`)},[()=>`width: ${Math.min(U(t).value/U(t).max*100,100)}%`]),K(e,n)}),F(g),K(e,n)};J(ue,e=>{U(g)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=Jd(),r=B(n);{let e=I(()=>`--sf-center-max`in t.overrides);$(r,{label:`Max width`,get value(){return U(s)},min:30,max:160,step:1,unit:`rem`,help:`--sf-center-max — max-width of the .sf-center centering wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-max`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-max`),rawDefault:`var(--sf-container-default)`,get currentRaw(){return t.overrides[`--sf-center-max`]},onRawSet:e=>t.onSet(`--sf-center-max`,e)})}var i=V(r,2);{let e=I(()=>`--sf-center-gutter`in t.overrides);$(i,{label:`Gutter`,get value(){return U(c)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-center-gutter — minimum side padding inside the center wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-gutter`),rawDefault:`var(--sf-gutter)`,get currentRaw(){return t.overrides[`--sf-center-gutter`]},onRawSet:e=>t.onSet(`--sf-center-gutter`,e)})}K(e,n)};J(ge,e=>{U(_)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var r=Xd(),i=B(r);{let e=I(()=>`--sf-grid-min`in t.overrides);$(i,{label:`Grid min cell width`,get value(){return U(l)},min:8,max:40,step:.5,unit:`rem`,help:`sf-grid minimum column width — browser auto-fills columns`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-grid-min`,`${e}rem`),onReset:()=>t.onReset(`--sf-grid-min`)})}var a=V(i,2),o=V(z(a),2);Y(o,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}],e=>e.token,(e,r)=>{{let i=I(()=>n(t.overrides[r.token],r.def)),a=I(()=>r.token in t.overrides);$(e,{get label(){return r.label},get value(){return U(i)},min:6,max:40,step:.5,unit:`rem`,get overridden(){return U(a)},onChange:e=>t.onSet(r.token,`${e}rem`),onReset:()=>t.onReset(r.token)})}}),F(o),F(a);var s=V(a,2),c=V(z(s),2);Y(c,20,()=>Array.from({length:8}),ii,(e,t)=>{K(e,Yd())}),F(c),F(s),H(e=>Z(c,e),[()=>`grid-template-columns: repeat(auto-fill, minmax(${Math.min(U(l)*16*(360/1200),120)}px, 1fr))`]),K(e,r)};J(Se,e=>{U(v)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=Qd(),r=B(n),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-header-height-mobile`in t.overrides);$(a,{label:``,get value(){return U(u)},min:2,max:8,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-mobile`)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-header-height-desktop`in t.overrides);$(s,{label:``,get value(){return U(d)},min:3,max:10,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-desktop`)})}F(o),F(r);var c=V(r,2),l=z(c),f=V(z(l),2);Y(f,20,()=>[1,2,3],e=>e,(e,t)=>{K(e,Zd())}),F(f),F(l);var p=V(l,2),m=z(p);F(p),F(c),H(e=>{Z(l,e),q(m,`${U(u)??``}rem mobile · ${U(d)??``}rem desktop`)},[()=>`height: ${Math.min(U(u)*12,64)}px`]),K(e,n)};J(P,e=>{U(y)&&e(Oe)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Ne=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=$d(),r=V(B(n),2),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-sticky-offset-mobile`in t.overrides);$(a,{label:``,get value(){return U(p)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-mobile`),rawDefault:`var(--sf-header-height-mobile)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-mobile`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-mobile`,e)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-sticky-offset-desktop`in t.overrides);$(s,{label:``,get value(){return U(m)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-desktop`),rawDefault:`var(--sf-header-height-desktop)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-desktop`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-desktop`,e)})}F(o),F(r),K(e,n)};J(Pe,e=>{U(b)&&e(Fe)}),F(ke);var Ie=V(ke,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=ef(),r=B(n);{let e=I(()=>`--sf-sidebar-width`in t.overrides);$(r,{label:`Sidebar width`,get value(){return U(f)},min:10,max:32,step:.5,unit:`rem`,help:`--sf-sidebar-width — default sidebar / drawer width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sidebar-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-sidebar-width`)})}var i=V(r,2),a=z(i),o=z(a),s=z(o);F(o),F(a),Me(2),F(i),H(e=>{Z(a,e),q(s,`${U(f)??``}rem`)},[()=>`width: ${Math.min(U(f)*3.5,100)}px`]),K(e,n)};J(Be,e=>{U(x)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=tf();Y(n,21,()=>h,e=>e.token,(e,n)=>{{let r=I(()=>E(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,U(n).unit?`${e}${U(n).unit}`:String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(n),K(e,n)};J(Je,e=>{U(S)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var r=sf(),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-switcher-threshold`in t.overrides);$(a,{label:`Threshold`,get value(){return U(D)},min:10,max:60,step:1,unit:`rem`,help:`--sf-switcher-threshold — width below which .sf-switcher stacks vertically`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-switcher-threshold`,`${e}rem`),onReset:()=>t.onReset(`--sf-switcher-threshold`)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-sidebar-min-width`in t.overrides);$(s,{label:`Content min width`,get value(){return U(O)},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 U(e)},onChange:e=>t.onSet(`--sf-sidebar-min-width`,`${e}%`),onReset:()=>t.onReset(`--sf-sidebar-min-width`)})}F(o);var c=V(o,2);Y(V(z(c),2),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`]}],e=>e.token,(e,n)=>{var r=af(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Y(o,20,()=>n.opts,e=>e,(e,t)=>{var n=nf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(o);var s;Di(o);var c=V(o,2),l=e=>{var r=rf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(c,e=>{n.token in t.overrides&&e(l)}),F(r),H(()=>{q(a,n.label),s!==(s=t.overrides[n.token]??n.def)&&(o.value=(o.__value=t.overrides[n.token]??n.def)??``,Ei(o,t.overrides[n.token]??n.def))}),W(`change`,o,e=>{let r=e.target.value;r===n.def?t.onReset(n.token):t.onSet(n.token,r)}),K(e,r)}),F(c);var l=V(c,2),u=V(z(l),2);{let e=I(()=>`--sf-equal-min-col`in t.overrides);$(u,{label:`Min column`,get value(){return U(k)},min:6,max:36,step:.5,unit:`rem`,help:`--sf-equal-min-col — minimum column width for .sf-equal`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-equal-min-col`,`${e}rem`),onReset:()=>t.onReset(`--sf-equal-min-col`)})}var d=V(u,2),f=V(z(d),2);Y(f,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}],e=>e.token,(e,r)=>{{let i=I(()=>n(t.overrides[r.token],r.def)),a=I(()=>r.token in t.overrides);$(e,{get label(){return r.label},get value(){return U(i)},min:4,max:36,step:.5,unit:`rem`,get overridden(){return U(a)},onChange:e=>t.onSet(r.token,`${e}rem`),onReset:()=>t.onReset(r.token)})}}),F(f),F(d),F(l);var p=V(l,2),m=V(z(p),2);{let e=I(()=>`--sf-cover-min-height`in t.overrides);$(m,{label:`Min height`,get value(){return U(ee)},min:20,max:100,step:1,unit:`dvh`,help:`--sf-cover-min-height — minimum height of the .sf-cover layout`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-cover-min-height`,`${e}dvh`),onReset:()=>t.onReset(`--sf-cover-min-height`)})}F(p);var h=V(p,2),g=V(z(h),4);Y(g,20,()=>ie,e=>e,(e,n)=>{var r=of(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,n)},[()=>`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${U(M).replace(/\s/g,``)===n.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`}`]),W(`click`,r,()=>n===`16 / 9`?t.onReset(`--sf-frame-ratio`):t.onSet(`--sf-frame-ratio`,n)),K(e,r)}),F(g),F(h);var _=V(h,2),v=V(z(_),4);Y(v,21,()=>ae,e=>e.value,(e,n)=>{var r=of(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${U(re)===U(n).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`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`max-content`?t.onReset(`--sf-reel-item-width`):t.onSet(`--sf-reel-item-width`,U(n).value)),K(e,r)}),F(v);var y=V(v,2),b=V(z(y),2);zi(b);var x=V(b,2),S=e=>{var n=rf();W(`click`,n,()=>t.onReset(`--sf-reel-height`)),K(e,n)};J(x,e=>{`--sf-reel-height`in t.overrides&&e(S)}),F(y),F(_);var C=V(_,2),w=V(z(C),2);{let e=I(()=>`--sf-imposter-margin`in t.overrides);$(w,{label:`Margin`,get value(){return U(te)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-imposter-margin — viewport inset for the centered .sf-imposter overlay`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-imposter-margin`,`${e}rem`),onReset:()=>t.onReset(`--sf-imposter-margin`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-imposter-margin`]},onRawSet:e=>t.onSet(`--sf-imposter-margin`,e)})}F(C);var T=V(C,2),E=V(z(T),2);{let e=I(()=>`--sf-content-width`in t.overrides);$(E,{label:`Content width`,get value(){return U(A)},min:40,max:120,step:1,unit:`rem`,help:`--sf-content-width — default reading column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-width`),rawDefault:`var(--sf-container-default)`,get currentRaw(){return t.overrides[`--sf-content-width`]},onRawSet:e=>t.onSet(`--sf-content-width`,e)})}var oe=V(E,2);{let e=I(()=>`--sf-breakout-width`in t.overrides);$(oe,{label:`Breakout width`,get value(){return U(ne)},min:50,max:160,step:1,unit:`rem`,help:`--sf-breakout-width — wide breakout column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-breakout-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-breakout-width`),rawDefault:`var(--sf-container-wide)`,get currentRaw(){return t.overrides[`--sf-breakout-width`]},onRawSet:e=>t.onSet(`--sf-breakout-width`,e)})}F(T);var se=V(T,2),N=V(z(se),2);{let e=I(()=>`--sf-alternate-inner-gap`in t.overrides);$(N,{label:`Inner gap`,get value(){return U(j)},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 U(e)},onChange:e=>t.onSet(`--sf-alternate-inner-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-alternate-inner-gap`),rawDefault:`var(--sf-gap)`,get currentRaw(){return t.overrides[`--sf-alternate-inner-gap`]},onRawSet:e=>t.onSet(`--sf-alternate-inner-gap`,e)})}F(se),F(r),H(()=>Bi(b,t.overrides[`--sf-reel-height`]??``)),W(`input`,b,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-reel-height`,n):t.onReset(`--sf-reel-height`)}),K(e,r)};J(et,e=>{U(C)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=lf();Y(V(z(n),2),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`}],e=>e.token,(e,n)=>{var r=cf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=rf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(n),K(e,n)};J(ot,e=>{U(T)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var r=uf(),i=V(z(r),2);Y(i,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`]}],e=>e.token,(e,n)=>{var r=af(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Y(o,20,()=>n.opts,e=>e,(e,t)=>{var n=nf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(o);var s;Di(o);var c=V(o,2),l=e=>{var r=rf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(c,e=>{n.token in t.overrides&&e(l)}),F(r),H(()=>{q(a,n.label),s!==(s=t.overrides[n.token]??n.placeholder)&&(o.value=(o.__value=t.overrides[n.token]??n.placeholder)??``,Ei(o,t.overrides[n.token]??n.placeholder))}),W(`change`,o,e=>{let r=e.target.value;r===n.placeholder?t.onReset(n.token):t.onSet(n.token,r)}),K(e,r)});var a=V(i,2);{let e=I(()=>n(t.overrides[`--sf-bg-inset`],0)),r=I(()=>`--sf-bg-inset`in t.overrides);$(a,{label:`Inset`,get value(){return U(e)},min:0,max:4,step:.25,unit:`rem`,help:`--sf-bg-inset — inset the background from the container edges`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-inset`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-inset`)})}var o=V(a,2);{let e=I(()=>n(t.overrides[`--sf-bg-radius`],0)),r=I(()=>`--sf-bg-radius`in t.overrides);$(o,{label:`Radius`,get value(){return U(e)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-bg-radius — corner radius of the background element`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-radius`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-radius`)})}var s=V(o,2);{let e=I(()=>n(t.overrides[`--sf-bg-z`],-2)),r=I(()=>`--sf-bg-z`in t.overrides);$(s,{label:`Z-index`,get value(){return U(e)},min:-10,max:0,step:1,help:`--sf-bg-z — stack order of the background pseudo-element (typically negative)`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-z`,String(e)),onReset:()=>t.onReset(`--sf-bg-z`)})}F(r),K(e,r)};J(ft,e=>{U(w)&&e(pt)}),F(ct),F(oe),H(()=>{Q(N,`aria-expanded`,U(g)),q(le,U(g)?`▲`:`▼`),Q(pe,`aria-expanded`,U(_)),q(he,U(_)?`▲`:`▼`),Q(ye,`aria-expanded`,U(v)),q(xe,U(v)?`▲`:`▼`),Q(Te,`aria-expanded`,U(y)),q(De,U(y)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(b)),q(Ne,U(b)?`▲`:`▼`),Q(Le,`aria-expanded`,U(x)),q(ze,U(x)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(S)),q(qe,U(S)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(C)),q($e,U(C)?`▲`:`▼`),Q(rt,`aria-expanded`,U(T)),q(at,U(T)?`▲`:`▼`),Q(lt,`aria-expanded`,U(w)),q(dt,U(w)?`▲`:`▼`)}),W(`click`,N,()=>{R(g,!U(g))}),W(`click`,pe,()=>{R(_,!U(_))}),W(`click`,ye,()=>{R(v,!U(v))}),W(`click`,Te,()=>{R(y,!U(y))}),W(`click`,Ae,()=>{R(b,!U(b))}),W(`click`,Le,()=>{R(x,!U(x))}),W(`click`,Ge,()=>{R(S,!U(S))}),W(`click`,Ze,()=>{R(C,!U(C))}),W(`click`,rt,()=>{R(T,!U(T))}),W(`click`,lt,()=>{R(w,!U(w))}),K(e,oe),We()}Br([`click`,`change`,`input`]);var pf=G(`<!> <p class="text-[9px] text-slate-600">Drives --sf-color-border--strong, --subtle, --translucent automatically.</p>`,1),mf=G(`<div class="flex items-center gap-3"><span class="text-[9px] font-mono text-slate-600 w-10"> </span> <div class="flex-1 bg-indigo-400/50 rounded"></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>`),hf=G(`<!> <!> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>`,1),gf=G(`<button><span class="block mx-auto mb-0.5"></span> </button>`),_f=G(`<div><div class="text-[9px] text-slate-500 mb-1.5"> </div> <div class="flex flex-col gap-1"></div></div>`),vf=G(`<div class="grid grid-cols-2 gap-3"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center gap-3"><div class="px-4 py-2 rounded-lg text-[11px] text-slate-300 bg-white/4">Border sample</div> <span class="text-[9px] font-mono text-slate-600"> </span></div>`,1),yf=G(`<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Color</div> <!></div> <!> <!>`,1),bf=G(`<!> <!> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Ring color</div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center"><div class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-200">Focus preview</div></div>`,1),xf=G(`<div class="mt-2 space-y-2 pl-2 border-l border-white/10"></div>`),Sf=G(`<div class="flex flex-col items-center gap-1"><div class="w-10 h-10 bg-indigo-500/40 border border-indigo-500/30"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>`),Cf=G(`<div class="bg-white/4 rounded-xl border border-white/8 p-4"><div class="flex gap-3 flex-wrap"></div></div>`),wf=G(`<div class="mt-2 space-y-2"></div>`),Tf=G(`<div class="mt-3 space-y-4"></div>`),Ef=G(`<div class="p-4 space-y-5"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Border color</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Border widths</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line styles</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Dividers</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Focus ring</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Radius</div> <div><button class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1"><span>Fine-tune radius steps</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div><button class="w-full flex items-center justify-between cursor-pointer mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Radius preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Component shape</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"><div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div> <span class="text-[10px]"> </span></button> <!></div></div>`);function Df(e,t){Ue(t,!0);let n=[`solid`,`dashed`,`dotted`],r=[`xs`,`s`,`m`,`l`,`xl`,`2xl`,`full`],i={xs:2,s:4,m:8,l:12,xl:16,"2xl":24,full:9999},a=[{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))`}],o=[{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`}],s=jl.borders??[],c=L(!1),l=L(!1),u=L(!1),d=L(!1),f=L(!1),p=L(!1),m=L(!1),h=L(!1),g=L(!1);function _(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let v=I(()=>_(t.overrides[`--sf-radius-scale`],1)),y=I(()=>_(t.overrides[`--sf-border-scale`],1)),b=I(()=>_(t.overrides[`--sf-focus-ring-width`],2,`px`)),x=I(()=>_(t.overrides[`--sf-focus-ring-offset`],2,`px`)),S=I(()=>_(t.overrides[`--sf-divider-width`]?.replace(`px`,``),1)),C=I(()=>_(t.overrides[`--sf-divider-gap`]?.replace(`rem`,``),1)),w=I(()=>t.overrides[`--sf-color-border`]??``),T=I(()=>t.overrides[`--sf-border-style`]??`solid`),E=I(()=>t.overrides[`--sf-focus-ring-color`]??``),D=I(()=>t.overrides[`--sf-divider-color`]??``);function O(e,n){return t.overrides[e]??n}function k(e){let n=t.overrides[e.name];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}function ee(e){let n=t.overrides[e.token];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}var te=Ef(),ne=z(te),A=z(ne),j=V(z(A),2),M=z(j,!0);F(j),F(A);var re=V(A,2),ie=e=>{var n=pf(),r=B(n);{let e=I(()=>`--sf-color-border`in t.overrides);du(r,{token:`--sf-color-border`,get value(){return U(w)},placeholder:`auto-derived`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-color-border`,e),onReset:()=>t.onReset(`--sf-color-border`)})}Me(2),K(e,n)};J(re,e=>{U(c)&&e(ie)}),F(ne);var ae=V(ne,4),oe=z(ae),se=V(z(oe),2),N=z(se,!0);F(se),F(oe);var ce=V(oe,2),le=e=>{var n=hf(),r=B(n);{let e=I(()=>`--sf-border-scale`in t.overrides);$(r,{label:`Border scale`,get value(){return U(y)},min:0,max:4,step:.25,help:`Multiplier applied to all border widths. 0 hides all borders.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-border-scale`,String(e)),onReset:()=>t.onReset(`--sf-border-scale`)})}var i=V(r,2);{let e=I(()=>_(t.overrides[`--sf-border-width-hairline`]?.replace(`px`,``),.5)),n=I(()=>`--sf-border-width-hairline`in t.overrides);$(i,{label:`Hairline`,get value(){return U(e)},min:0,max:1,step:.25,unit:`px`,help:`--sf-border-width-hairline — ultra-thin border for retina displays`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-border-width-hairline`,`${e}px`),onReset:()=>t.onReset(`--sf-border-width-hairline`)})}var a=V(i,2);{let e=I(()=>_(t.overrides[`--sf-box-border-width`]?.replace(`px`,``),0)),n=I(()=>`--sf-box-border-width`in t.overrides);$(a,{label:`Box border`,get value(){return U(e)},min:0,max:4,step:.5,unit:`px`,help:`--sf-box-border-width — box-shadow border drawn without affecting layout`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-box-border-width`,`${e}px`),onReset:()=>t.onReset(`--sf-box-border-width`)})}var o=V(a,2);Y(o,20,()=>[1,2,3,4],e=>e,(e,t)=>{var n=mf(),r=z(n),i=z(r);F(r);var a=V(r,2),o=V(a,2),s=z(o);F(o),F(n),H((e,n)=>{q(i,`${t??``}px →`),Z(a,e),q(s,`${n??``}px`)},[()=>`height: ${Math.max(t*U(y),.5)}px`,()=>(t*U(y)).toFixed(1)]),K(e,n)}),F(o),K(e,n)};J(ce,e=>{U(l)&&e(le)}),F(ae);var ue=V(ae,4),de=z(ue),fe=V(z(de),2),pe=z(fe,!0);F(fe),F(de);var me=V(de,2),he=e=>{var r=vf(),i=B(r);Y(i,20,()=>[{label:`Border`,token:`--sf-border-style`,default:`solid`},{label:`Divider`,token:`--sf-divider-style`,default:`solid`}],e=>e.token,(e,r)=>{var i=_f(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,20,()=>n,e=>e,(e,n)=>{let i=I(()=>O(r.token,r.default));var a=gf(),o=z(a),s=V(o);F(a),H(()=>{X(a,1,`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${U(i)===n?`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`}`),Z(o,`width: 20px; height: 0; border-bottom: 2px ${n} currentColor; opacity: 0.7`),q(s,` ${n??``}`)}),W(`click`,a,()=>n===r.default?t.onReset(r.token):t.onSet(r.token,n)),K(e,a)}),F(s),F(i),H(()=>q(o,r.label)),K(e,i)}),F(i);var a=V(i,2),o=z(a),s=V(o,2),c=z(s);F(s),F(a),H((e,t)=>{Z(o,e),q(c,`${t??``}px · ${U(T)??``}`)},[()=>`border: ${Math.max(U(y),.5)}px ${U(T)} ${U(w)||`var(--sf-color-border, #64748b)`}`,()=>(1*U(y)).toFixed(1)]),K(e,r)};J(me,e=>{U(u)&&e(he)}),F(ue);var ge=V(ue,4),_e=z(ge),ve=V(z(_e),2),ye=z(ve,!0);F(ve),F(_e);var be=V(_e,2),xe=e=>{var n=yf(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-divider-color`in t.overrides);du(i,{token:`--sf-divider-color`,get value(){return U(D)},placeholder:`inherits border`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-divider-color`,e),onReset:()=>t.onReset(`--sf-divider-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-divider-width`in t.overrides);$(a,{label:`Width`,get value(){return U(S)},min:.5,max:4,step:.5,unit:`px`,help:`--sf-divider-width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-width`,`${e}px`),onReset:()=>t.onReset(`--sf-divider-width`),rawDefault:`var(--sf-border-width-1)`,get currentRaw(){return t.overrides[`--sf-divider-width`]},onRawSet:e=>t.onSet(`--sf-divider-width`,e)})}var o=V(a,2);{let e=I(()=>`--sf-divider-gap`in t.overrides);$(o,{label:`Gap`,get value(){return U(C)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-divider-gap — spacing around divider lines`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-divider-gap`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-divider-gap`]},onRawSet:e=>t.onSet(`--sf-divider-gap`,e)})}K(e,n)};J(be,e=>{U(d)&&e(xe)}),F(ge);var Se=V(ge,4),Ce=z(Se),we=V(z(Ce),2),Te=z(we,!0);F(we),F(Ce);var Ee=V(Ce,2),De=e=>{var n=bf(),r=B(n);{let e=I(()=>`--sf-focus-ring-width`in t.overrides);$(r,{label:`Ring width`,get value(){return U(b)},min:0,max:6,step:.5,unit:`px`,help:`Thickness of the keyboard focus indicator`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-width`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-width`)})}var i=V(r,2);{let e=I(()=>`--sf-focus-ring-offset`in t.overrides);$(i,{label:`Ring offset`,get value(){return U(x)},min:0,max:8,step:.5,unit:`px`,help:`Gap between element edge and focus ring`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-offset`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-offset`)})}var a=V(i,2),o=V(z(a),2);{let e=I(()=>`--sf-focus-ring-color`in t.overrides);du(o,{token:`--sf-focus-ring-color`,get value(){return U(E)},placeholder:`default (action)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-focus-ring-color`,e),onReset:()=>t.onReset(`--sf-focus-ring-color`)})}F(a);var s=V(a,2),c=z(s);F(s),H(()=>Z(c,`outline: ${U(b)}px solid ${U(E)||`oklch(0.7 0.2 235)`}; outline-offset: ${U(x)}px`)),K(e,n)};J(Ee,e=>{U(f)&&e(De)}),F(Se);var P=V(Se,6),Oe=z(P),ke=V(z(Oe),2),Ae=z(ke,!0);F(ke),F(Oe);var je=V(Oe,2),Ne=e=>{var n=xf();Y(n,21,()=>a,e=>e.name,(e,n)=>{{let r=I(()=>k(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).step},get value(){return U(r)},min:0,get max(){return U(n).max},get step(){return U(n).step_size},unit:`px`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}px`),onReset:()=>t.onReset(U(n).name),get rawDefault(){return U(n).rawDefault},get currentRaw(){return t.overrides[U(n).name]},onRawSet:e=>t.onSet(U(n).name,e)})}}),F(n),K(e,n)};J(je,e=>{U(h)&&e(Ne)}),F(P);var Pe=V(P,2),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var t=Cf(),n=z(t);Y(n,20,()=>r,e=>e,(e,t)=>{let n=I(()=>i[t]??6),r=I(()=>t===`full`?9999:U(n)*U(v));var a=Sf(),o=z(a),s=V(o,2),c=z(s,!0);F(s),F(a),H(e=>{Z(o,e),q(c,t)},[()=>`border-radius: ${Math.min(U(r),9999)}px`]),K(e,a)}),F(n),F(t),K(e,t)};J(Re,e=>{U(m)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ge=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var n=wf();Y(n,21,()=>o,e=>e.token,(e,n)=>{{let r=I(()=>ee(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).help},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}${U(n).unit}`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).rawDefault},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}}),F(n),K(e,n)};J(Ke,e=>{U(g)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var n=Tf();Y(n,21,()=>s,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(Qe,e=>{U(p)&&e($e)}),F(Je),F(te),H(()=>{Q(A,`aria-expanded`,U(c)),q(M,U(c)?`▲`:`▼`),Q(oe,`aria-expanded`,U(l)),q(N,U(l)?`▲`:`▼`),Q(de,`aria-expanded`,U(u)),q(pe,U(u)?`▲`:`▼`),Q(_e,`aria-expanded`,U(d)),q(ye,U(d)?`▲`:`▼`),Q(Ce,`aria-expanded`,U(f)),q(Te,U(f)?`▲`:`▼`),Q(Oe,`aria-expanded`,U(h)),q(Ae,U(h)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(m)),q(Le,U(m)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(g)),q(Ge,U(g)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(p)),q(Ze,U(p)?`▲`:`▼`)}),W(`click`,A,()=>{R(c,!U(c))}),W(`click`,oe,()=>{R(l,!U(l))}),W(`click`,de,()=>{R(u,!U(u))}),W(`click`,_e,()=>{R(d,!U(d))}),W(`click`,Ce,()=>{R(f,!U(f))}),W(`click`,Oe,()=>{R(h,!U(h))}),W(`click`,Fe,()=>{R(m,!U(m))}),W(`click`,Ve,()=>{R(g,!U(g))}),W(`click`,Ye,()=>{R(p,!U(p))}),K(e,te),We()}Br([`click`]);var Of=G(`<div class="flex flex-col items-center gap-2"><div class="bg-[#1a1a2e] border border-white/8 rounded-lg"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>`),kf=G(`<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Shadow color</div> <!> <p class="text-[9px] text-slate-600 mt-1">Warm, cool or brand-tinted shadows. Default uses neutral hue.</p></div>`),Af=G(`<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Glow color</div> <!> <p class="text-[9px] text-slate-600 mt-1">Which brand color radiates the glow. Defaults to primary.</p></div>`),jf=G(`<p class="text-[9px] text-slate-600 text-center">Glow disabled.</p>`),Mf=G(`<div class="flex items-center justify-between p-3 rounded-xl bg-white/4 border border-white/8"><div><div class="text-[11px] font-semibold text-slate-200">Shadow glow</div> <div class="text-[9px] text-slate-500 mt-0.5">Ambient glow on elevated surfaces</div></div> <button><div></div></button></div> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-6 flex items-center justify-center"><div class="w-16 h-16 bg-[#1a1a2e] border border-white/8 rounded-xl"></div></div> <!>`,1),Nf=G(`<div class="space-y-4"></div>`),Pf=G(`<div class="p-4 space-y-5"><div class="bg-white/4 rounded-xl border border-white/8 p-4 flex gap-4 flex-wrap items-end justify-center"></div> <div class="h-px bg-white/6"></div> <!> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Shadow color</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Glow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"><div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div> <span class="text-[10px]"> </span></button> <!></section></div>`);function Ff(e,t){Ue(t,!0);let n=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],r=jl.shadows??[],i=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-shadow-lightness`]??`0.15`);return isFinite(e)?e:.15})()),a=I(()=>t.overrides[`--sf-shadow-color`]??``),o=I(()=>t.overrides[`--sf-shadow-glow-color`]??``),s=I(()=>t.overrides[`--sf-shadow-glow`]===`none`),c=L(!1),l=L(!1),u=L(!1);var d=Pf(),f=z(d);Y(f,22,()=>n,e=>e,(e,t,n)=>{var r=Of(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(()=>{Z(i,`width: ${40+U(n)*4}px; height: ${40+U(n)*4}px; box-shadow: var(--sf-shadow-${t})`),q(o,t)}),K(e,r)}),F(f);var p=V(f,4);{let e=I(()=>`--sf-shadow-lightness`in t.overrides);$(p,{label:`Shadow lightness`,get value(){return U(i)},min:0,max:.5,step:.01,help:`--sf-shadow-lightness — OKLCH lightness of the shadow color. Lower = darker, more visible shadows.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-shadow-lightness`,String(e)),onReset:()=>t.onReset(`--sf-shadow-lightness`)})}var m=V(p,4),h=z(m),g=V(z(h),2),_=z(g,!0);F(g),F(h);var v=V(h,2),y=e=>{var n=kf(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-color`in t.overrides);du(r,{token:`--sf-shadow-color`,get value(){return U(a)},placeholder:`auto (neutral hue)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-color`,e),onReset:()=>t.onReset(`--sf-shadow-color`)})}Me(2),F(n),K(e,n)};J(v,e=>{U(c)&&e(y)}),F(m);var b=V(m,4),x=z(b),S=V(z(x),2),C=z(S,!0);F(S),F(x);var w=V(x,2),T=e=>{var n=Mf(),r=B(n),i=V(z(r),2),a=z(i);F(i),F(r);var c=V(r,2),l=e=>{var n=Af(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-glow-color`in t.overrides);du(r,{token:`--sf-shadow-glow-color`,get value(){return U(o)},placeholder:`default (primary color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-glow-color`,e),onReset:()=>t.onReset(`--sf-shadow-glow-color`)})}Me(2),F(n),K(e,n)};J(c,e=>{U(s)||e(l)});var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=e=>{K(e,jf())};J(f,e=>{U(s)&&e(p)}),H(()=>{Q(i,`aria-label`,U(s)?`Enable shadow glow`:`Disable shadow glow`),X(i,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(s)?`bg-white/10`:`bg-indigo-600`}`),X(a,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(s)?`translate-x-0.5`:`translate-x-4`}`),Z(d,`box-shadow: ${U(s)?`none`:`var(--sf-shadow-glow)`}`)}),W(`click`,i,()=>{U(s)?t.onReset(`--sf-shadow-glow`):t.onSet(`--sf-shadow-glow`,`none`)}),K(e,n)};J(w,e=>{U(l)&&e(T)}),F(b);var E=V(b,4),D=z(E),O=V(z(D),2),k=z(O,!0);F(O),F(D);var ee=V(D,2),te=e=>{var n=Nf();Y(n,21,()=>r,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(ee,e=>{U(u)&&e(te)}),F(E),F(d),H(()=>{Q(h,`aria-expanded`,U(c)),q(_,U(c)?`▲`:`▼`),Q(x,`aria-expanded`,U(l)),q(C,U(l)?`▲`:`▼`),Q(D,`aria-expanded`,U(u)),q(k,U(u)?`▲`:`▼`)}),W(`click`,h,()=>{R(c,!U(c))}),W(`click`,x,()=>{R(l,!U(l))}),W(`click`,D,()=>{R(u,!U(u))}),K(e,d),We()}Br([`click`]);var If=G(`<div class="rounded-lg bg-amber-500/10 border border-amber-500/20 p-2.5"><p class="text-[10px] text-amber-300">Motion is disabled — duration & easing have no effect while scale is 0.</p></div>`),Lf=G(`<option style="background:#16161e;"> </option>`),Rf=G(`<span class="text-amber-400">(No effect while motion is disabled.)</span>`),zf=G(`<div class="flex items-center gap-3"><span class="text-[10px] text-slate-500 w-14 shrink-0"> </span> <div class="flex-1 h-1 bg-white/8 rounded-full overflow-hidden"><div class="h-full bg-indigo-500 rounded-full"></div></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>`),Bf=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Named duration tokens. Drag to set an absolute ms value, overriding the global scale. <!></p> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-4 space-y-3"></div>`,1),Vf=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>`),Hf=G(`<div><div class="flex items-center gap-2.5"><svg width="40" height="28" viewBox="0 0 40 28" class="overflow-visible shrink-0"><path stroke="rgb(99 102 241 / 0.6)" stroke-width="1.5" fill="none" stroke-linecap="round"></path></svg> <div class="flex-1 min-w-0"><div class="flex items-center justify-between mb-1"><span class="text-[10px] font-semibold text-slate-300"> </span> <div class="flex items-center gap-1.5"><button class="text-[8px] text-slate-500 hover:text-indigo-400 cursor-pointer">preview</button> <!></div></div> <input type="text" class="w-full bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/></div></div></div>`),Uf=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Edit the named easing tokens. Accepts any CSS timing function — <span class="font-mono text-slate-400">cubic-bezier(…)</span> or <span class="font-mono text-slate-400">linear(…)</span>. Use “Live preview” above to feel a curve.</p> <div class="space-y-2"></div>`,1),Wf=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>`),Gf=G(`<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-6"> </span> <div class="flex-1 h-1.5 bg-white/8 rounded-full"><div class="h-full bg-indigo-500 rounded-full"></div></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>`),Kf=G(`<p class="text-[10px] text-slate-600 leading-relaxed">One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).</p> <div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200">Stagger base</span> <!></div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1"></div>`,1),qf=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),Jf=G(`<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0"> </div> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),Yf=G(`<div class="space-y-4"></div> <!> <div class="space-y-2"><p class="text-[10px] text-slate-600 leading-relaxed">Default animation-range for scroll-driven animations using the <span class="font-mono text-slate-400">.sf-scroll-timeline</span> utility.</p> <!></div>`,1),Xf=G(`<div class="p-4 space-y-5"><div class="flex items-center justify-between p-3 rounded-xl bg-white/4 border border-white/8"><div><div class="text-[11px] font-semibold text-slate-200">Disable motion</div> <div class="text-[9px] text-slate-500 mt-0.5">Respects prefers-reduced-motion</div></div> <button><div></div></button></div> <!> <section class="space-y-3"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Live preview</div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 space-y-3"><div class="relative h-10 overflow-hidden rounded"><div class="absolute top-1 h-8 w-8 bg-indigo-500 rounded-lg"></div></div> <div class="flex items-center gap-2"><select aria-label="Preview easing" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"></select> <select aria-label="Preview duration" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"></select> <button class="px-3 py-1.5 rounded-lg text-[10px] font-bold border border-indigo-500/40 bg-indigo-500/10 text-indigo-300 hover:bg-indigo-500/20 transition-all cursor-pointer disabled:opacity-40 shrink-0"> </button></div></div></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Durations</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Easing curves</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Stagger</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"><div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div> <span class="text-[10px]"> </span></button> <!></section></div>`);function Zf(e,t){Ue(t,!0);let n=[{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}],r=[{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`}],i=[`--sf-animation-delay-1`,`--sf-animation-delay-2`,`--sf-animation-delay-3`,`--sf-animation-delay-4`,`--sf-animation-delay-5`],a=jl.motion??[],o=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-motion-scale`]??`1`);return isFinite(e)?e:1})()),s=I(()=>t.overrides[`--sf-motion-scale`]===`0`),c=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-theme-transition-duration`]?.replace(`ms`,``)??String(300*U(o)));return isFinite(e)?e:Math.round(300*U(o))})()),l=I(()=>{let e=t.overrides[i[0]];return e?parseFloat(e.replace(`ms`,``)):75*U(o)}),u=L(!1),d=L(0),f=L(`--sf-ease-out`),p=L(`--sf-duration-normal`),m=L(!1),h=L(!1),g=L(!1),_=L(!1);function v(e,n){let r=t.overrides[e];if(r){let e=parseFloat(r);if(isFinite(e))return e}return Math.round(n*U(o))}function y(e){return t.overrides[e]??r.find(t=>t.token===e)?.value??`ease`}function b(){if(U(u))return;let e=n.find(e=>e.token===U(p))?.base??250,t=v(U(p),e);R(u,!0),R(d,180),setTimeout(()=>{R(d,0),setTimeout(()=>{R(u,!1)},t)},t)}function x(e){let n={};for(let t=1;t<=5;t++)n[`--sf-animation-delay-${t}`]=`${Math.round(e*t)}ms`;t.onBulkChange(n)}function S(){let e={};for(let t=1;t<=5;t++)e[`--sf-animation-delay-${t}`]=null;t.onBulkChange(e)}var C=Xf(),w=z(C),T=V(z(w),2),E=z(T);F(T),F(w);var D=V(w,2),O=e=>{K(e,If())};J(D,e=>{U(s)&&e(O)});var k=V(D,2),ee=V(z(k),2),te=z(ee),ne=z(te);F(te);var A=V(te,2),j=z(A);Y(j,21,()=>r,e=>e.token,(e,t)=>{var n=Lf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).token)&&(n.value=(n.__value=U(t).token)??``)}),K(e,n)}),F(j);var M;Di(j);var re=V(j,2);Y(re,21,()=>n,e=>e.token,(e,t)=>{var n=Lf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).token)&&(n.value=(n.__value=U(t).token)??``)}),K(e,n)}),F(re);var ie;Di(re);var ae=V(re,2),oe=z(ae,!0);F(ae),F(A),F(ee),F(k);var se=V(k,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var r=Bf(),i=B(r),a=V(z(i)),o=e=>{K(e,Rf())};J(a,e=>{U(s)&&e(o)}),F(i);var c=V(i,2);Y(c,17,()=>n,e=>e.token,(e,n)=>{let r=I(()=>v(U(n).token,U(n).base));{let i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:10,unit:`ms`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}ms`),onReset:()=>t.onReset(U(n).token)})}});var l=V(c,2);Y(l,21,()=>n,e=>e.label,(e,t)=>{let n=I(()=>v(U(t).token,U(t).base));var r=zf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),l=z(c);F(c),F(r),H(e=>{q(a,U(t).label),Z(s,e),q(l,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/1200*100,100)}%`]),K(e,r)}),F(l),K(e,r)};J(ue,e=>{U(m)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=Uf(),i=V(B(n),2);Y(i,21,()=>r,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=Hf(),a=z(i),o=z(a),s=z(o);F(o);var c=V(o,2),l=z(c),u=z(l),d=z(u,!0);F(u);var p=V(u,2),m=z(p),h=V(m,2),g=e=>{var r=Vf();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(h,e=>{U(r)&&e(g)}),F(p),F(l);var _=V(l,2);zi(_),F(c),F(a),F(i),H(()=>{X(i,1,`p-2.5 rounded-xl border transition-all ${U(r)?`bg-indigo-500/10 border-indigo-500/30`:`border-white/8 bg-white/3`}`),Q(s,`d`,U(n).preview),q(d,U(n).label),Bi(_,t.overrides[U(n).token]??``),Q(_,`placeholder`,U(n).value)}),W(`click`,m,()=>{R(f,U(n).token,!0),b()}),W(`input`,_,e=>{let r=e.target.value.trim();r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,i)}),F(i),K(e,n)};J(ge,e=>{U(h)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=Kf(),r=V(B(n),2),a=z(r),o=V(z(a),2),s=e=>{var t=Wf();W(`click`,t,S),K(e,t)},c=I(()=>i.some(e=>e in t.overrides));J(o,e=>{U(c)&&e(s)}),F(a);var u=V(a,2);{let e=I(()=>Math.round(U(l))),n=I(()=>i.some(e=>e in t.overrides));$(u,{label:``,get value(){return U(e)},min:0,max:200,step:5,unit:`ms`,help:`Base unit for --sf-animation-delay-1 through -5`,get overridden(){return U(n)},onChange:e=>x(e),onReset:S})}F(r);var d=V(r,2);Y(d,20,()=>[1,2,3,4,5],e=>e,(e,t)=>{let n=I(()=>Math.round(U(l)*t));var r=Gf(),i=z(r),a=z(i);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),u=z(c);F(c),F(r),H(e=>{q(a,`–${t??``}`),Z(s,e),q(u,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/600*100,100)}%`]),K(e,r)}),F(d),K(e,n)};J(Se,e=>{U(g)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=Yf(),r=B(n);Y(r,21,()=>a,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(r);var i=V(r,2);{let e=I(()=>`--sf-theme-transition-duration`in t.overrides);$(i,{label:`Theme switch speed`,get value(){return U(c)},min:0,max:600,step:10,unit:`ms`,help:`--sf-theme-transition-duration — dark/light color-scheme switch animation speed`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-theme-transition-duration`,`${e}ms`),onReset:()=>t.onReset(`--sf-theme-transition-duration`)})}var o=V(i,2);Y(V(z(o),2),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%`}],e=>e.token,(e,n)=>{var r=Jf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=qf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(o),K(e,n)};J(P,e=>{U(_)&&e(Oe)}),F(we),F(C),H(e=>{Q(T,`title`,U(s)?`Enable motion`:`Disable motion`),X(T,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(s)?`bg-indigo-600`:`bg-white/10`}`),X(E,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(s)?`translate-x-4`:`translate-x-0.5`}`),Z(ne,e),M!==(M=U(f))&&(j.value=(j.__value=U(f))??``,Ei(j,U(f))),ie!==(ie=U(p))&&(re.value=(re.__value=U(p))??``,Ei(re,U(p))),ae.disabled=U(u),q(oe,U(u)?`…`:`▶ Play`),Q(N,`aria-expanded`,U(m)),q(le,U(m)?`▲`:`▼`),Q(pe,`aria-expanded`,U(h)),q(he,U(h)?`▲`:`▼`),Q(ye,`aria-expanded`,U(g)),q(xe,U(g)?`▲`:`▼`),Q(Te,`aria-expanded`,U(_)),q(De,U(_)?`▲`:`▼`)},[()=>`transform: translateX(${U(d)}px); transition: transform ${v(U(p),n.find(e=>e.token===U(p))?.base??250)}ms ${y(U(f))}`]),W(`click`,T,()=>{U(s)?t.onReset(`--sf-motion-scale`):t.onSet(`--sf-motion-scale`,`0`)}),W(`change`,j,e=>{R(f,e.target.value,!0)}),W(`change`,re,e=>{R(p,e.target.value,!0)}),W(`click`,ae,b),W(`click`,N,()=>{R(m,!U(m))}),W(`click`,pe,()=>{R(h,!U(h))}),W(`click`,ye,()=>{R(g,!U(g))}),W(`click`,Te,()=>{R(_,!U(_))}),K(e,C),We()}Br([`click`,`change`,`input`]);var Qf=G(`<div></div>`),$f=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex gap-3 items-center justify-center overflow-hidden relative"><div class="absolute inset-0 grid grid-cols-4 grid-rows-3 gap-px opacity-30"></div> <div class="relative z-10 w-20 h-12 rounded-lg border border-white/20 bg-white/10 flex items-center justify-center"><span class="text-[9px] font-mono text-white/70"> </span></div></div>`,1),ep=G(`<div class="flex items-center gap-3"><span class="text-[9px] text-slate-600 w-14"> </span> <div class="flex-1 h-4 bg-indigo-400 rounded"></div> <span class="text-[9px] font-mono text-slate-500 w-8"> </span></div>`),tp=G(`<!> <!> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>`,1),np=G(`<button> </button>`),rp=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Gradient overlay for hero images and media content. Used by the <code class="text-slate-400">.sf-scrim</code> macro.</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Color</div> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Direction</div> <div class="grid grid-cols-2 gap-1"></div></div> <div class="rounded-xl overflow-hidden border border-white/8" style="height: 80px"><div class="w-full h-full relative" style="background: linear-gradient(135deg, oklch(0.3 0.15 264), oklch(0.25 0.1 300))"><div class="absolute inset-0"></div> <div class="absolute bottom-2 left-3 text-[10px] text-white/80 font-medium">Scrim preview</div></div></div>`,1),ip=G(`<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0"> </div> <!></div>`),ap=G(`<!> <div class="flex items-center gap-2 p-2 rounded-lg bg-white/4 border border-white/8"><div class="w-16 h-3 rounded-full"><div class="w-6 h-3 rounded-full"></div></div> <span class="text-[9px] text-slate-600">Scrollbar preview</span></div>`,1),op=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),sp=G(`<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-16 shrink-0"> </div> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),cp=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Controls text legibility over images. Applied via <code class="text-slate-400">text-shadow: var(--sf-text-shadow-m)</code>.
+        Edit each token directly — use <code class="text-slate-400">none</code> to disable.</p> <div class="space-y-2"></div>`,1),lp=G(`<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Blur</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Opacity</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrim overlay</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrollbar</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>`);function up(e,t){Ue(t,!0);let n=[{label:`To top`,value:`to top`},{label:`To bottom`,value:`to bottom`},{label:`To left`,value:`to left`},{label:`To right`,value:`to right`}],r=[{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 i(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let a=I(()=>i(t.overrides[`--sf-blur`],12,`px`)),o=I(()=>i(t.overrides[`--sf-opacity-muted`],.5)),s=I(()=>i(t.overrides[`--sf-opacity-disabled`],.45)),c=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),l=I(()=>t.overrides[`--sf-scrim-color`]??``),u=I(()=>i(t.overrides[`--sf-scroll-shadow-size`]?.replace(`rem`,``),2)),d=I(()=>i(t.overrides[`--sf-state-pending-opacity`],.7)),f=I(()=>t.overrides[`--sf-scrollbar-thumb`]??``),p=I(()=>t.overrides[`--sf-scrollbar-track`]??``),m=L(!1),h=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1);var b=lp(),x=z(b),S=z(x),C=V(z(S),2),w=z(C,!0);F(C),F(S);var T=V(S,2),E=e=>{var n=$f(),r=B(n);{let e=I(()=>`--sf-blur`in t.overrides);$(r,{label:`Blur radius`,get value(){return U(a)},min:0,max:48,step:1,unit:`px`,help:`--sf-blur — used for frosted glass, modals, tooltips`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-blur`,`${e}px`),onReset:()=>t.onReset(`--sf-blur`)})}var i=V(r,2),o=z(i);Y(o,20,()=>Array.from({length:12}),ii,(e,t,n)=>{var r=Qf();X(r,1,yi(n%3==0?`bg-indigo-500/50`:n%3==1?`bg-purple-500/40`:`bg-blue-500/30`)),K(e,r)}),F(o);var s=V(o,2),c=z(s),l=z(c);F(c),F(s),F(i),H(()=>{Z(s,`backdrop-filter: blur(${U(a)}px)`),q(l,`${U(a)??``}px`)}),K(e,n)};J(T,e=>{U(m)&&e(E)}),F(x);var D=V(x,4),O=z(D),k=V(z(O),2),ee=z(k,!0);F(k),F(O);var te=V(O,2),ne=e=>{var n=tp(),r=B(n);{let e=I(()=>`--sf-opacity-muted`in t.overrides);$(r,{label:`Muted opacity`,get value(){return U(o)},min:0,max:1,step:.05,help:`--sf-opacity-muted — secondary text, icons, and placeholder content`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-muted`,String(e)),onReset:()=>t.onReset(`--sf-opacity-muted`)})}var i=V(r,2);{let e=I(()=>`--sf-opacity-disabled`in t.overrides);$(i,{label:`Disabled opacity`,get value(){return U(s)},min:0,max:1,step:.05,help:`--sf-opacity-disabled — disabled form controls and interactive elements`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-disabled`,String(e)),onReset:()=>t.onReset(`--sf-opacity-disabled`)})}var a=V(i,2);{let e=I(()=>`--sf-state-pending-opacity`in t.overrides);$(a,{label:`Pending opacity`,get value(){return U(d)},min:.1,max:1,step:.05,help:`--sf-state-pending-opacity — opacity of elements in loading/pending state`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-state-pending-opacity`,String(e)),onReset:()=>t.onReset(`--sf-state-pending-opacity`)})}var c=V(a,2);Y(c,21,()=>[{label:`muted`,val:U(o)},{label:`disabled`,val:U(s)},{label:`pending`,val:U(d)}],e=>e.label,(e,t)=>{var n=ep(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=V(a,2),s=z(o,!0);F(o),F(n),H(()=>{q(i,U(t).label),Z(a,`opacity: ${U(t).val}`),q(s,U(t).val)}),K(e,n)}),F(c),K(e,n)};J(te,e=>{U(h)&&e(ne)}),F(D);var A=V(D,4),j=z(A),M=V(z(j),2),re=z(M,!0);F(M),F(j);var ie=V(j,2),ae=e=>{var r=rp(),i=V(B(r),2),a=V(z(i),2);{let e=I(()=>`--sf-scrim-color`in t.overrides);du(a,{token:`--sf-scrim-color`,get value(){return U(l)},placeholder:`default (base color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-scrim-color`,e),onReset:()=>t.onReset(`--sf-scrim-color`)})}F(i);var o=V(i,2),s=V(z(o),2);Y(s,21,()=>n,e=>e.value,(e,n)=>{var r=np(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${U(c)===U(n).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`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(s),F(o);var u=V(o,2),d=z(u),f=z(d);Me(2),F(d),F(u),H(()=>Z(f,`background: linear-gradient(${U(c)}, ${U(l)||`oklch(0 0 0 / 0.6)`}, transparent)`)),K(e,r)};J(ie,e=>{U(g)&&e(ae)}),F(A);var oe=V(A,4),se=z(oe),N=V(z(se),2),ce=z(N,!0);F(N),F(se);var le=V(se,2),ue=e=>{var n=ap(),r=B(n);Y(r,17,()=>[{label:`Thumb color`,token:`--sf-scrollbar-thumb`,val:U(f)},{label:`Track color`,token:`--sf-scrollbar-track`,val:U(p)}],e=>e.token,(e,n)=>{var r=ip(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>U(n).token in t.overrides);du(o,{get token(){return U(n).token},get value(){return U(n).val},placeholder:`default`,get isOverridden(){return U(e)},onSet:e=>t.onSet(U(n).token,e),onReset:()=>t.onReset(U(n).token)})}F(r),H(()=>q(a,U(n).label)),K(e,r)});var i=V(r,2),a=z(i);let o;var s=z(a);let c;F(a),Me(2),F(i),H(()=>{o=Z(a,``,o,{background:U(p)||`rgba(255,255,255,0.08)`}),c=Z(s,``,c,{background:U(f)||`oklch(0.52 0.025 260)`})}),K(e,n)};J(le,e=>{U(_)&&e(ue)}),F(oe);var de=V(oe,4),fe=z(de),pe=V(z(fe),2),me=z(pe,!0);F(pe),F(fe);var he=V(fe,2),ge=e=>{{let n=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(e,{label:`Shadow size`,get value(){return U(u)},min:0,max:6,step:.25,unit:`rem`,help:`--sf-scroll-shadow-size — gradient edge mask on .sf-scroll-shadow elements`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`)})}};J(he,e=>{U(v)&&e(ge)}),F(de);var _e=V(de,4),ve=z(_e),ye=V(z(ve),2),be=z(ye,!0);F(ye),F(ve);var xe=V(ve,2),Se=e=>{var n=cp(),i=V(B(n),2);Y(i,21,()=>r,e=>e.token,(e,n)=>{var r=sp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=op();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(r),H(()=>{q(a,U(n).label),Bi(o,t.overrides[U(n).token]??``),Q(o,`placeholder`,U(n).default)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)}),F(i),K(e,n)};J(xe,e=>{U(y)&&e(Se)}),F(_e),F(b),H(()=>{Q(S,`aria-expanded`,U(m)),q(w,U(m)?`▲`:`▼`),Q(O,`aria-expanded`,U(h)),q(ee,U(h)?`▲`:`▼`),Q(j,`aria-expanded`,U(g)),q(re,U(g)?`▲`:`▼`),Q(se,`aria-expanded`,U(_)),q(ce,U(_)?`▲`:`▼`),Q(fe,`aria-expanded`,U(v)),q(me,U(v)?`▲`:`▼`),Q(ve,`aria-expanded`,U(y)),q(be,U(y)?`▲`:`▼`)}),W(`click`,S,()=>{R(m,!U(m))}),W(`click`,O,()=>{R(h,!U(h))}),W(`click`,j,()=>{R(g,!U(g))}),W(`click`,se,()=>{R(_,!U(_))}),W(`click`,fe,()=>{R(v,!U(v))}),W(`click`,ve,()=>{R(y,!U(y))}),K(e,b),We()}Br([`click`,`input`]);var dp=G(`<div class="h-2.5 rounded bg-indigo-500/40"></div>`),fp=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"></div>`,1),pp=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><p class="text-[11px] text-slate-300 leading-relaxed">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.</p></div>`,1),Of=G(`<button> </button>`),kf=G(`<p class="text-[9px] text-slate-600">--sf-aspect — default ratio for .sf-aspect / .sf-frame</p> <div class="grid grid-cols-3 gap-1.5"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex justify-center"><div class="bg-indigo-500/30 border border-indigo-500/30 rounded-lg flex items-center justify-center text-[9px] font-mono text-indigo-200"> </div></div>`,1),Af=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><div class="h-8 rounded bg-indigo-500/40"></div></div>`,1),jf=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),Mf=G(`<p class="text-[9px] text-slate-600">--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Color</div> <input type="text" placeholder="oklch(0 0 0 / 0.55)" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Direction</div> <div class="grid grid-cols-3 gap-1"></div></div> <div class="relative h-24 rounded-xl border border-white/8 overflow-hidden flex items-end p-2" style="background:repeating-linear-gradient(45deg,#475569,#475569 8px,#334155 8px,#334155 16px)"><div class="absolute inset-0"></div> <span class="relative text-[11px] font-bold text-white">Caption over scrim</span></div> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Text shadow</div> <input type="text" placeholder="0 1px 3px oklch(0 0 0 / 0.6)" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),Nf=G(`<p class="text-[9px] text-slate-600">Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.</p> <div class="space-y-2"><!> <!> <div class="flex items-center gap-2 pt-1"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Marker color</div> <input type="text" placeholder="var(--sf-color-primary)" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div></div>`,1),Pf=G(`<p class="text-[9px] text-slate-600 leading-relaxed">--sf-content-intrinsic-size — placeholder size used with <span class="font-mono text-slate-400">content-visibility: auto</span> to improve scroll performance on tall pages.</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Intrinsic size</div> <input type="text" placeholder="500px" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),Ff=G(`<div class="p-4 space-y-6"><p class="text-[10px] text-slate-600 leading-relaxed">Tokens for the framework's utility macros — <span class="font-mono text-slate-400">.sf-prose</span>, <span class="font-mono text-slate-400">.sf-flow</span>, <span class="font-mono text-slate-400">.sf-line-clamp</span>, <span class="font-mono text-slate-400">.sf-aspect</span>, <span class="font-mono text-slate-400">.sf-scroll-shadow</span> and <span class="font-mono text-slate-400">.sf-scrim</span>.</p> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Flow rhythm</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line clamp</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Aspect ratio</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrim overlay</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Prose rhythm</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Content visibility</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="rounded-lg bg-white/3 border border-white/6 p-3"><p class="text-[10px] text-slate-500 leading-relaxed"><span class="text-slate-400 font-semibold">All tokens tab</span> — edit every prose, scrim and surface token directly.</p></div></div>`);function If(e,t){We(t,!0);function n(e,n,r){let i=t.overrides[e];if(!i)return n;let a=parseFloat(r?i.replace(r,``):i);return isNaN(a)?n:a}let r=[{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`}],i=[{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`}],a=[{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)`}],o=L(!1),s=L(!1),c=L(!1),l=L(!1),u=L(!1),d=L(!1),f=L(!1),p=I(()=>n(`--sf-line-clamp`,3)),m=I(()=>n(`--sf-flow-space`,.5,`rem`)),h=I(()=>n(`--sf-scroll-shadow-size`,2,`rem`)),g=I(()=>t.overrides[`--sf-aspect`]??`16 / 9`),_=I(()=>t.overrides[`--sf-scrim-color`]??`oklch(0 0 0 / 0.55)`),v=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),y=I(()=>n(`--sf-prose-media-radius`,6,`px`));function b(e){let n=t.overrides[e.token];if(!n)return e.def;let r=parseFloat(n);return isNaN(r)?e.def:r}var x=Ff(),S=V(z(x),2),C=z(S),w=V(z(C),2),T=z(w,!0);F(w),F(C);var E=V(C,2),D=e=>{var n=Ef(),r=B(n);{let e=I(()=>`--sf-flow-space`in t.overrides);$(r,{label:`Flow space`,get value(){return U(m)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-flow-space — vertical gap between adjacent children of .sf-flow`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-flow-space`,`${e}rem`),onReset:()=>t.onReset(`--sf-flow-space`),rawDefault:`var(--sf-content-gap)`,get currentRaw(){return t.overrides[`--sf-flow-space`]},onRawSet:e=>t.onSet(`--sf-flow-space`,e)})}var i=V(r,2);Y(i,20,()=>[0,1,2],e=>e,(e,t)=>{var n=Tf();H(()=>Z(n,`width:${90-t*12}%`)),K(e,n)}),F(i),H(()=>Z(i,`display:flex;flex-direction:column;gap:${U(m)}rem`)),K(e,n)};J(E,e=>{U(o)&&e(D)}),F(S);var O=V(S,4),k=z(O),A=V(z(k),2),ee=z(A,!0);F(A),F(k);var te=V(k,2),j=e=>{var n=Df(),r=B(n);{let e=I(()=>`--sf-line-clamp`in t.overrides);$(r,{label:`Default lines`,get value(){return U(p)},min:1,max:8,step:1,help:`--sf-line-clamp — default line count for .sf-line-clamp (override per element)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-line-clamp`,String(e)),onReset:()=>t.onReset(`--sf-line-clamp`)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${U(p)};overflow:hidden`)),K(e,n)};J(te,e=>{U(s)&&e(j)}),F(O);var M=V(O,4),ne=z(M),re=V(z(ne),2),ie=z(re,!0);F(re),F(ne);var ae=V(ne,2),oe=e=>{var n=kf(),i=V(B(n),2);Y(i,21,()=>r,e=>e.value,(e,n)=>{var r=Of(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,U(n).label)},[()=>`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(g).replace(/\s/g,``)===U(n).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`}`]),W(`click`,r,()=>U(n).value===`16 / 9`?t.onReset(`--sf-aspect`):t.onSet(`--sf-aspect`,U(n).value)),K(e,r)}),F(i);var a=V(i,2),o=z(a),s=z(o,!0);F(o),F(a),H(()=>{Z(o,`aspect-ratio:${U(g)};max-height:120px;max-width:100%;width:auto;height:120px`),q(s,U(g))}),K(e,n)};J(ae,e=>{U(c)&&e(oe)}),F(M);var se=V(M,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var n=Af(),r=B(n);{let e=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(r,{label:`Fade size`,get value(){return U(h)},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 U(e)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`),rawDefault:`2rem`,get currentRaw(){return t.overrides[`--sf-scroll-shadow-size`]},onRawSet:e=>t.onSet(`--sf-scroll-shadow-size`,e)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`mask:linear-gradient(to right, transparent, #000 ${U(h)}rem, #000 calc(100% - ${U(h)}rem), transparent)`)),K(e,n)};J(ue,e=>{U(l)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=Mf(),r=V(B(n),2),a=V(z(r),2);Hi(a);var o=V(a,2),s=e=>{var n=jf();W(`click`,n,()=>t.onReset(`--sf-scrim-color`)),K(e,n)};J(o,e=>{`--sf-scrim-color`in t.overrides&&e(s)}),F(r);var c=V(r,2),l=V(z(c),2);Y(l,21,()=>i,e=>e.value,(e,n)=>{var r=Of(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(v)===U(n).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`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(l),F(c);var u=V(c,2),d=z(u);Ne(2),F(u);var f=V(u,2),p=V(z(f),2);Hi(p);var m=V(p,2),h=e=>{var n=jf();W(`click`,n,()=>t.onReset(`--sf-scrim-text-shadow`)),K(e,n)};J(m,e=>{`--sf-scrim-text-shadow`in t.overrides&&e(h)}),F(f),H(()=>{Ui(a,t.overrides[`--sf-scrim-color`]??``),Z(d,`background:linear-gradient(${U(v)}, ${U(_)}, transparent)`),Ui(p,t.overrides[`--sf-scrim-text-shadow`]??``)}),W(`input`,a,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-color`,n):t.onReset(`--sf-scrim-color`)}),W(`input`,p,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-text-shadow`,n):t.onReset(`--sf-scrim-text-shadow`)}),K(e,n)};J(ge,e=>{U(u)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=Nf(),r=V(B(n),2),i=z(r);Y(i,17,()=>a,e=>e.token,(e,n)=>{{let r=I(()=>b(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:.0625,unit:`rem`,get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).raw},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}});var o=V(i,2);{let e=I(()=>`--sf-prose-media-radius`in t.overrides);$(o,{label:`Media radius`,get value(){return U(y)},min:0,max:32,step:1,unit:`px`,help:`--sf-prose-media-radius — corner radius on prose images/video`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-prose-media-radius`,`${e}px`),onReset:()=>t.onReset(`--sf-prose-media-radius`),rawDefault:`var(--sf-radius-m)`,get currentRaw(){return t.overrides[`--sf-prose-media-radius`]},onRawSet:e=>t.onSet(`--sf-prose-media-radius`,e)})}var s=V(o,2),c=V(z(s),2);Hi(c);var l=V(c,2),u=e=>{var n=jf();W(`click`,n,()=>t.onReset(`--sf-prose-marker-color`)),K(e,n)};J(l,e=>{`--sf-prose-marker-color`in t.overrides&&e(u)}),F(s),F(r),H(()=>Ui(c,t.overrides[`--sf-prose-marker-color`]??``)),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-prose-marker-color`,n):t.onReset(`--sf-prose-marker-color`)}),K(e,n)};J(Se,e=>{U(d)&&e(Ce)}),F(ve);var we=V(ve,2),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var Oe=V(Te,2),P=e=>{var n=Pf(),r=V(B(n),2),i=V(z(r),2);Hi(i);var a=V(i,2),o=e=>{var n=jf();W(`click`,n,()=>t.onReset(`--sf-content-intrinsic-size`)),K(e,n)};J(a,e=>{`--sf-content-intrinsic-size`in t.overrides&&e(o)}),F(r),H(()=>Ui(i,t.overrides[`--sf-content-intrinsic-size`]??``)),W(`input`,i,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-content-intrinsic-size`,n):t.onReset(`--sf-content-intrinsic-size`)}),K(e,n)};J(Oe,e=>{U(f)&&e(P)}),F(we),Ne(2),F(x),H(()=>{Q(C,`aria-expanded`,U(o)),q(T,U(o)?`▲`:`▼`),Q(k,`aria-expanded`,U(s)),q(ee,U(s)?`▲`:`▼`),Q(ne,`aria-expanded`,U(c)),q(ie,U(c)?`▲`:`▼`),Q(N,`aria-expanded`,U(l)),q(le,U(l)?`▲`:`▼`),Q(pe,`aria-expanded`,U(u)),q(he,U(u)?`▲`:`▼`),Q(ye,`aria-expanded`,U(d)),q(xe,U(d)?`▲`:`▼`),Q(Te,`aria-expanded`,U(f)),q(De,U(f)?`▲`:`▼`)}),W(`click`,C,()=>{R(o,!U(o))}),W(`click`,k,()=>{R(s,!U(s))}),W(`click`,ne,()=>{R(c,!U(c))}),W(`click`,N,()=>{R(l,!U(l))}),W(`click`,pe,()=>{R(u,!U(u))}),W(`click`,ye,()=>{R(d,!U(d))}),W(`click`,Te,()=>{R(f,!U(f))}),K(e,x),Ge()}Ur([`click`,`input`]);var Lf=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex items-center gap-3"><div class="bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center text-[9px] font-mono text-indigo-400/70 shrink-0"> </div> <p class="text-[9px] text-slate-600">Minimum interactive area — ensures accessibility on touch devices.</p></div>`,1),Rf=G(`<button> </button>`),zf=G(`<div class="flex gap-2"></div>`),Bf=G(`<div class="flex items-center gap-2"><div></div> <span class="text-[9px] font-mono text-slate-400 w-20 shrink-0"> </span> <span class="text-[8px] text-slate-600 flex-1"> </span> <span class="text-[8px] font-mono text-slate-500"> </span></div>`),Vf=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1.5"></div> <p class="text-[9px] text-slate-600">Override individual z-index tokens in the "All tokens" tab.</p>`,1),Hf=G(`<div class="space-y-2"><div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection background</div> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection text color</div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><p class="text-[11px] text-slate-200 select-all">Select this text to preview the selection color.</p></div></div>`),Uf=G(`<div class="flex gap-2"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center"><div class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-200"> </div></div>`,1),Wf=G(`<div class="flex flex-col items-center gap-1 flex-1"><div class="w-full bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>`),Gf=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Controls the height / tap-target of all sized components (buttons, inputs, badges).</p> <div class="space-y-2"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex items-end gap-2"></div>`,1),Kf=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>`),qf=G(`<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Caret color</div> <!></div> <!> <div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200">Underline thickness</span> <!></div> <div class="flex gap-1"></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"><input type="text" placeholder="Click and type to see the caret…" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <p class="text-[11px] text-slate-300">A <a href="#sample-link" class="text-indigo-300">sample link</a> with the current underline settings.</p></div>`,1),Jf=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Icon scale tokens used by <span class="font-mono text-slate-400">.sf-icon-*</span> utilities. Values are in <span class="font-mono text-slate-400">em</span> units relative to surrounding text.</p> <div class="space-y-1.5"></div> <!>`,1),Yf=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>`),Xf=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),Zf=G(`<p class="text-[9px] text-slate-600">Default values for <span class="font-mono text-slate-400">.sf-media</span> images and replaced elements.</p> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Fit</span> <div class="flex gap-1 flex-1"></div> <!></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Position</span> <input type="text" placeholder="50% 50%" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),Qf=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-14 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),$f=G(`<p class="text-[9px] text-slate-600 leading-relaxed">Default to the device's <span class="font-mono text-slate-400">env(safe-area-inset-*)</span>. Override only if you need fixed padding regardless of notch/home-indicator.</p> <div class="space-y-1.5"></div>`,1),ep=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),tp=G(`<p class="text-[9px] text-slate-600">Applied inside <span class="font-mono text-slate-400">@media print</span> via <span class="font-mono text-slate-400">optional/print.css</span>.</p> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Page size</span> <div class="flex gap-1 flex-1"></div></div> <!>`,1),np=G(`<div class="flex items-center gap-2 py-0.5"><button type="button"><div></div></button> <span class="text-[9px] font-mono text-slate-300 w-24 shrink-0"> </span> <span class="text-[9px] text-slate-600 flex-1"> </span> <!></div>`),rp=G(`<p class="text-[10px] text-slate-600 leading-relaxed">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.</p> <div class="space-y-1.5"></div> <div class="flex items-center gap-2 pt-1"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Required marker</span> <input type="text" placeholder=" *" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),ip=G(`<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Touch target</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll behavior</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Z-index layers</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text selection</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Focus ring style</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Component size scale</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Caret &amp; links</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Icon sizes</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Object fit</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Safe area insets</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Print styles</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">State flags</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div class="rounded-lg bg-white/3 border border-white/6 p-3"><p class="text-[10px] text-slate-500 leading-relaxed">Selection colors, caret, links, focus ring, borders and sizes all render in the
+          Extra filler text keeps the block taller than the clamp at every setting.</p></div>`,1),mp=G(`<button> </button>`),hp=G(`<p class="text-[9px] text-slate-600">--sf-aspect — default ratio for .sf-aspect / .sf-frame</p> <div class="grid grid-cols-3 gap-1.5"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex justify-center"><div class="bg-indigo-500/30 border border-indigo-500/30 rounded-lg flex items-center justify-center text-[9px] font-mono text-indigo-200"> </div></div>`,1),gp=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><div class="h-8 rounded bg-indigo-500/40"></div></div>`,1),_p=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),vp=G(`<p class="text-[9px] text-slate-600">--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Color</div> <input type="text" placeholder="oklch(0 0 0 / 0.55)" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Direction</div> <div class="grid grid-cols-3 gap-1"></div></div> <div class="relative h-24 rounded-xl border border-white/8 overflow-hidden flex items-end p-2" style="background:repeating-linear-gradient(45deg,#475569,#475569 8px,#334155 8px,#334155 16px)"><div class="absolute inset-0"></div> <span class="relative text-[11px] font-bold text-white">Caption over scrim</span></div> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Text shadow</div> <input type="text" placeholder="0 1px 3px oklch(0 0 0 / 0.6)" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),yp=G(`<p class="text-[9px] text-slate-600">Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.</p> <div class="space-y-2"><!> <!> <div class="flex items-center gap-2 pt-1"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Marker color</div> <input type="text" placeholder="var(--sf-color-primary)" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div></div>`,1),bp=G(`<p class="text-[9px] text-slate-600 leading-relaxed">--sf-content-intrinsic-size — placeholder size used with <span class="font-mono text-slate-400">content-visibility: auto</span> to improve scroll performance on tall pages.</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Intrinsic size</div> <input type="text" placeholder="500px" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),xp=G(`<div class="p-4 space-y-6"><p class="text-[10px] text-slate-600 leading-relaxed">Tokens for the framework's utility macros — <span class="font-mono text-slate-400">.sf-prose</span>, <span class="font-mono text-slate-400">.sf-flow</span>, <span class="font-mono text-slate-400">.sf-line-clamp</span>, <span class="font-mono text-slate-400">.sf-aspect</span>, <span class="font-mono text-slate-400">.sf-scroll-shadow</span> and <span class="font-mono text-slate-400">.sf-scrim</span>.</p> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Flow rhythm</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line clamp</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Aspect ratio</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrim overlay</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Prose rhythm</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Content visibility</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="rounded-lg bg-white/3 border border-white/6 p-3"><p class="text-[10px] text-slate-500 leading-relaxed"><span class="text-slate-400 font-semibold">All tokens tab</span> — edit every prose, scrim and surface token directly.</p></div></div>`);function Sp(e,t){Ue(t,!0);function n(e,n,r){let i=t.overrides[e];if(!i)return n;let a=parseFloat(r?i.replace(r,``):i);return isNaN(a)?n:a}let r=[{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`}],i=[{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`}],a=[{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)`}],o=L(!1),s=L(!1),c=L(!1),l=L(!1),u=L(!1),d=L(!1),f=L(!1),p=I(()=>n(`--sf-line-clamp`,3)),m=I(()=>n(`--sf-flow-space`,.5,`rem`)),h=I(()=>n(`--sf-scroll-shadow-size`,2,`rem`)),g=I(()=>t.overrides[`--sf-aspect`]??`16 / 9`),_=I(()=>t.overrides[`--sf-scrim-color`]??`oklch(0 0 0 / 0.55)`),v=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),y=I(()=>n(`--sf-prose-media-radius`,6,`px`));function b(e){let n=t.overrides[e.token];if(!n)return e.def;let r=parseFloat(n);return isNaN(r)?e.def:r}var x=xp(),S=V(z(x),2),C=z(S),w=V(z(C),2),T=z(w,!0);F(w),F(C);var E=V(C,2),D=e=>{var n=fp(),r=B(n);{let e=I(()=>`--sf-flow-space`in t.overrides);$(r,{label:`Flow space`,get value(){return U(m)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-flow-space — vertical gap between adjacent children of .sf-flow`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-flow-space`,`${e}rem`),onReset:()=>t.onReset(`--sf-flow-space`),rawDefault:`var(--sf-content-gap)`,get currentRaw(){return t.overrides[`--sf-flow-space`]},onRawSet:e=>t.onSet(`--sf-flow-space`,e)})}var i=V(r,2);Y(i,20,()=>[0,1,2],e=>e,(e,t)=>{var n=dp();H(()=>Z(n,`width:${90-t*12}%`)),K(e,n)}),F(i),H(()=>Z(i,`display:flex;flex-direction:column;gap:${U(m)}rem`)),K(e,n)};J(E,e=>{U(o)&&e(D)}),F(S);var O=V(S,4),k=z(O),ee=V(z(k),2),te=z(ee,!0);F(ee),F(k);var ne=V(k,2),A=e=>{var n=pp(),r=B(n);{let e=I(()=>`--sf-line-clamp`in t.overrides);$(r,{label:`Default lines`,get value(){return U(p)},min:1,max:8,step:1,help:`--sf-line-clamp — default line count for .sf-line-clamp (override per element)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-line-clamp`,String(e)),onReset:()=>t.onReset(`--sf-line-clamp`)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${U(p)};overflow:hidden`)),K(e,n)};J(ne,e=>{U(s)&&e(A)}),F(O);var j=V(O,4),M=z(j),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=hp(),i=V(B(n),2);Y(i,21,()=>r,e=>e.value,(e,n)=>{var r=mp(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,U(n).label)},[()=>`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(g).replace(/\s/g,``)===U(n).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`}`]),W(`click`,r,()=>U(n).value===`16 / 9`?t.onReset(`--sf-aspect`):t.onSet(`--sf-aspect`,U(n).value)),K(e,r)}),F(i);var a=V(i,2),o=z(a),s=z(o,!0);F(o),F(a),H(()=>{Z(o,`aspect-ratio:${U(g)};max-height:120px;max-width:100%;width:auto;height:120px`),q(s,U(g))}),K(e,n)};J(ae,e=>{U(c)&&e(oe)}),F(j);var se=V(j,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var n=gp(),r=B(n);{let e=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(r,{label:`Fade size`,get value(){return U(h)},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 U(e)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`),rawDefault:`2rem`,get currentRaw(){return t.overrides[`--sf-scroll-shadow-size`]},onRawSet:e=>t.onSet(`--sf-scroll-shadow-size`,e)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`mask:linear-gradient(to right, transparent, #000 ${U(h)}rem, #000 calc(100% - ${U(h)}rem), transparent)`)),K(e,n)};J(ue,e=>{U(l)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=vp(),r=V(B(n),2),a=V(z(r),2);zi(a);var o=V(a,2),s=e=>{var n=_p();W(`click`,n,()=>t.onReset(`--sf-scrim-color`)),K(e,n)};J(o,e=>{`--sf-scrim-color`in t.overrides&&e(s)}),F(r);var c=V(r,2),l=V(z(c),2);Y(l,21,()=>i,e=>e.value,(e,n)=>{var r=mp(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(v)===U(n).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`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(l),F(c);var u=V(c,2),d=z(u);Me(2),F(u);var f=V(u,2),p=V(z(f),2);zi(p);var m=V(p,2),h=e=>{var n=_p();W(`click`,n,()=>t.onReset(`--sf-scrim-text-shadow`)),K(e,n)};J(m,e=>{`--sf-scrim-text-shadow`in t.overrides&&e(h)}),F(f),H(()=>{Bi(a,t.overrides[`--sf-scrim-color`]??``),Z(d,`background:linear-gradient(${U(v)}, ${U(_)}, transparent)`),Bi(p,t.overrides[`--sf-scrim-text-shadow`]??``)}),W(`input`,a,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-color`,n):t.onReset(`--sf-scrim-color`)}),W(`input`,p,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-text-shadow`,n):t.onReset(`--sf-scrim-text-shadow`)}),K(e,n)};J(ge,e=>{U(u)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=yp(),r=V(B(n),2),i=z(r);Y(i,17,()=>a,e=>e.token,(e,n)=>{{let r=I(()=>b(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:.0625,unit:`rem`,get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).raw},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}});var o=V(i,2);{let e=I(()=>`--sf-prose-media-radius`in t.overrides);$(o,{label:`Media radius`,get value(){return U(y)},min:0,max:32,step:1,unit:`px`,help:`--sf-prose-media-radius — corner radius on prose images/video`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-prose-media-radius`,`${e}px`),onReset:()=>t.onReset(`--sf-prose-media-radius`),rawDefault:`var(--sf-radius-m)`,get currentRaw(){return t.overrides[`--sf-prose-media-radius`]},onRawSet:e=>t.onSet(`--sf-prose-media-radius`,e)})}var s=V(o,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=_p();W(`click`,n,()=>t.onReset(`--sf-prose-marker-color`)),K(e,n)};J(l,e=>{`--sf-prose-marker-color`in t.overrides&&e(u)}),F(s),F(r),H(()=>Bi(c,t.overrides[`--sf-prose-marker-color`]??``)),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-prose-marker-color`,n):t.onReset(`--sf-prose-marker-color`)}),K(e,n)};J(Se,e=>{U(d)&&e(Ce)}),F(ve);var we=V(ve,2),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=bp(),r=V(B(n),2),i=V(z(r),2);zi(i);var a=V(i,2),o=e=>{var n=_p();W(`click`,n,()=>t.onReset(`--sf-content-intrinsic-size`)),K(e,n)};J(a,e=>{`--sf-content-intrinsic-size`in t.overrides&&e(o)}),F(r),H(()=>Bi(i,t.overrides[`--sf-content-intrinsic-size`]??``)),W(`input`,i,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-content-intrinsic-size`,n):t.onReset(`--sf-content-intrinsic-size`)}),K(e,n)};J(P,e=>{U(f)&&e(Oe)}),F(we),Me(2),F(x),H(()=>{Q(C,`aria-expanded`,U(o)),q(T,U(o)?`▲`:`▼`),Q(k,`aria-expanded`,U(s)),q(te,U(s)?`▲`:`▼`),Q(M,`aria-expanded`,U(c)),q(ie,U(c)?`▲`:`▼`),Q(N,`aria-expanded`,U(l)),q(le,U(l)?`▲`:`▼`),Q(pe,`aria-expanded`,U(u)),q(he,U(u)?`▲`:`▼`),Q(ye,`aria-expanded`,U(d)),q(xe,U(d)?`▲`:`▼`),Q(Te,`aria-expanded`,U(f)),q(De,U(f)?`▲`:`▼`)}),W(`click`,C,()=>{R(o,!U(o))}),W(`click`,k,()=>{R(s,!U(s))}),W(`click`,M,()=>{R(c,!U(c))}),W(`click`,N,()=>{R(l,!U(l))}),W(`click`,pe,()=>{R(u,!U(u))}),W(`click`,ye,()=>{R(d,!U(d))}),W(`click`,Te,()=>{R(f,!U(f))}),K(e,x),We()}Br([`click`,`input`]);var Cp=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex items-center gap-3"><div class="bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center text-[9px] font-mono text-indigo-400/70 shrink-0"> </div> <p class="text-[9px] text-slate-600">Minimum interactive area — ensures accessibility on touch devices.</p></div>`,1),wp=G(`<button> </button>`),Tp=G(`<div class="flex gap-2"></div>`),Ep=G(`<div class="flex items-center gap-2"><div></div> <span class="text-[9px] font-mono text-slate-400 w-20 shrink-0"> </span> <span class="text-[8px] text-slate-600 flex-1"> </span> <span class="text-[8px] font-mono text-slate-500"> </span></div>`),Dp=G(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1.5"></div> <p class="text-[9px] text-slate-600">Override individual z-index tokens in the "All tokens" tab.</p>`,1),Op=G(`<div class="space-y-2"><div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection background</div> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection text color</div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><p class="text-[11px] text-slate-200 select-all">Select this text to preview the selection color.</p></div></div>`),kp=G(`<div class="flex gap-2"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center"><div class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-200"> </div></div>`,1),Ap=G(`<div class="flex flex-col items-center gap-1 flex-1"><div class="w-full bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>`),jp=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Controls the height / tap-target of all sized components (buttons, inputs, badges).</p> <div class="space-y-2"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex items-end gap-2"></div>`,1),Mp=G(`<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>`),Np=G(`<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Caret color</div> <!></div> <!> <div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200">Underline thickness</span> <!></div> <div class="flex gap-1"></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"><input type="text" placeholder="Click and type to see the caret…" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <p class="text-[11px] text-slate-300">A <a href="#sample-link" class="text-indigo-300">sample link</a> with the current underline settings.</p></div>`,1),Pp=G(`<p class="text-[10px] text-slate-600 leading-relaxed">Icon scale tokens used by <span class="font-mono text-slate-400">.sf-icon-*</span> utilities. Values are in <span class="font-mono text-slate-400">em</span> units relative to surrounding text.</p> <div class="space-y-1.5"></div> <!>`,1),Fp=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>`),Ip=G(`<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>`),Lp=G(`<p class="text-[9px] text-slate-600">Default values for <span class="font-mono text-slate-400">.sf-media</span> images and replaced elements.</p> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Fit</span> <div class="flex gap-1 flex-1"></div> <!></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Position</span> <input type="text" placeholder="50% 50%" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),Rp=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-14 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),zp=G(`<p class="text-[9px] text-slate-600 leading-relaxed">Default to the device's <span class="font-mono text-slate-400">env(safe-area-inset-*)</span>. Override only if you need fixed padding regardless of notch/home-indicator.</p> <div class="space-y-1.5"></div>`,1),Bp=G(`<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`),Vp=G(`<p class="text-[9px] text-slate-600">Applied inside <span class="font-mono text-slate-400">@media print</span> via <span class="font-mono text-slate-400">optional/print.css</span>.</p> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Page size</span> <div class="flex gap-1 flex-1"></div></div> <!>`,1),Hp=G(`<div class="flex items-center gap-2 py-0.5"><button type="button"><div></div></button> <span class="text-[9px] font-mono text-slate-300 w-24 shrink-0"> </span> <span class="text-[9px] text-slate-600 flex-1"> </span> <!></div>`),Up=G(`<p class="text-[10px] text-slate-600 leading-relaxed">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.</p> <div class="space-y-1.5"></div> <div class="flex items-center gap-2 pt-1"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Required marker</span> <input type="text" placeholder=" *" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`,1),Wp=G(`<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Touch target</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll behavior</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Z-index layers</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text selection</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Focus ring style</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Component size scale</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Caret &amp; links</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Icon sizes</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Object fit</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Safe area insets</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Print styles</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">State flags</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div class="rounded-lg bg-white/3 border border-white/6 p-3"><p class="text-[10px] text-slate-500 leading-relaxed">Selection colors, caret, links, focus ring, borders and sizes all render in the
       live preview (try the <span class="text-slate-400 font-semibold">Components</span> template). <span class="text-slate-400 font-semibold">Scroll behavior</span> applies to the page
-      itself and can't be shown in the static canvas.</p></div></div>`);function ap(e,t){We(t,!0);let n=[{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`}],r=[{label:`Smooth`,value:`smooth`},{label:`Auto`,value:`auto`}],i=[{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 a(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let o=I(()=>a(t.overrides[`--sf-touch-target`],44,`px`)),s=I(()=>t.overrides[`--sf-scroll-behavior`]??`smooth`),c=I(()=>a(t.overrides[`--sf-z-base`],0)),l=I(()=>t.overrides[`--sf-caret-color`]??``),u=I(()=>a(t.overrides[`--sf-link-underline-offset`]?.replace(`em`,``),.15)),d=I(()=>t.overrides[`--sf-link-underline-thickness`]??`auto`),f=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`),p=L(!1),m=L(!1),h=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1);function E(e){return a(t.overrides[e.token]?.replace(`rem`,``),e.default)}var D=ip(),O=z(D),k=z(O),A=V(z(k),2),ee=z(A,!0);F(A),F(k);var te=V(k,2),j=e=>{var n=Lf(),r=B(n);{let e=I(()=>`--sf-touch-target`in t.overrides);$(r,{label:`Min touch size`,get value(){return U(o)},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 U(e)},onChange:e=>t.onSet(`--sf-touch-target`,`${e}px`),onReset:()=>t.onReset(`--sf-touch-target`)})}var i=V(r,2),a=z(i),s=z(a);F(a),Ne(2),F(i),H(()=>{Z(a,`width: ${U(o)}px; height: ${U(o)}px`),q(s,`${U(o)??``}px`)}),K(e,n)};J(te,e=>{U(p)&&e(j)}),F(O);var M=V(O,4),ne=z(M),re=V(z(ne),2),ie=z(re,!0);F(re),F(ne);var ae=V(ne,2),oe=e=>{var n=zf();Y(n,21,()=>r,e=>e.value,(e,n)=>{var r=Rf(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(s)===U(n).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`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`smooth`?t.onReset(`--sf-scroll-behavior`):t.onSet(`--sf-scroll-behavior`,U(n).value)),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(m)&&e(oe)}),F(M);var se=V(M,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var r=Vf(),i=B(r);{let e=I(()=>`--sf-z-base`in t.overrides);$(i,{label:`Base offset`,get value(){return U(c)},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 U(e)},onChange:e=>t.onSet(`--sf-z-base`,String(e)),onReset:()=>t.onReset(`--sf-z-base`)})}var a=V(i,2);Y(a,21,()=>n,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=Bf(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c,!0);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H(e=>{X(a,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(r)?`bg-amber-400`:`bg-white/20`}`),q(s,U(n).label),q(l,U(n).note),q(d,e)},[()=>U(n).token.replace(`--sf-z-`,``)]),K(e,i)}),F(a),Ne(2),K(e,r)};J(ue,e=>{U(h)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=Hf(),r=z(n),i=V(z(r),2);{let e=I(()=>t.overrides[`--sf-color-selection-bg`]??``),n=I(()=>`--sf-color-selection-bg`in t.overrides);Tl(i,{token:`--sf-color-selection-bg`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-bg`,e),onReset:()=>t.onReset(`--sf-color-selection-bg`)})}F(r);var a=V(r,2),o=V(z(a),2);{let e=I(()=>t.overrides[`--sf-color-selection-text`]??``),n=I(()=>`--sf-color-selection-text`in t.overrides);Tl(o,{token:`--sf-color-selection-text`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-text`,e),onReset:()=>t.onReset(`--sf-color-selection-text`)})}F(a);var s=V(a,2),c=z(s);F(s),F(n),H(()=>Z(c,`--sf-color-selection-bg: ${t.overrides[`--sf-color-selection-bg`]??`#6366f1`}; --sf-color-selection-text: ${t.overrides[`--sf-color-selection-text`]??`#ffffff`}`)),K(e,n)};J(ge,e=>{U(_)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=Uf(),r=B(n);Y(r,20,()=>[`solid`,`dashed`,`dotted`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`);var i=Rf(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${U(r)===n?`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`}`),q(a,n)}),W(`click`,i,()=>n===`solid`?t.onReset(`--sf-focus-ring-style`):t.onSet(`--sf-focus-ring-style`,n)),K(e,i)}),F(r);var i=V(r,2),a=z(i),o=z(a);F(a),F(i),H(()=>{Z(a,`outline: 2px ${U(f)} ${t.overrides[`--sf-focus-ring-color`]||`oklch(0.7 0.2 235)`}; outline-offset: 2px`),q(o,`Focus ring · ${U(f)??``}`)}),K(e,n)};J(Se,e=>{U(v)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var Oe=V(Te,2),P=e=>{var n=Gf(),r=V(B(n),2);Y(r,21,()=>i,e=>e.token,(e,n)=>{let r=I(()=>E(U(n)));{let i=I(()=>`${U(n).token} — component size step ${U(n).label}`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:5,step:.05,unit:`rem`,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token)})}}),F(r);var a=V(r,2);Y(a,21,()=>i,e=>e.token,(e,t)=>{let n=I(()=>E(U(t)));var r=Wf(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(e=>{Z(i,e),q(o,U(t).label)},[()=>`height: ${Math.min(U(n)*14,64)}px`]),K(e,r)}),F(a),K(e,n)};J(Oe,e=>{U(y)&&e(P)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Me=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=qf(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-caret-color`in t.overrides);Tl(i,{token:`--sf-caret-color`,get value(){return U(l)},placeholder:`default (action color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-caret-color`,e),onReset:()=>t.onReset(`--sf-caret-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-link-underline-offset`in t.overrides);$(a,{label:`Underline offset`,get value(){return U(u)},min:0,max:.5,step:.01,unit:`em`,help:`--sf-link-underline-offset — gap between text baseline and underline`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-link-underline-offset`,`${e}em`),onReset:()=>t.onReset(`--sf-link-underline-offset`)})}var o=V(a,2),s=z(o),c=V(z(s),2),f=e=>{var n=Kf();W(`click`,n,()=>t.onReset(`--sf-link-underline-thickness`)),K(e,n)};J(c,e=>{`--sf-link-underline-thickness`in t.overrides&&e(f)}),F(s);var p=V(s,2);Y(p,20,()=>[[`auto`,`auto`],[`1px`,`1px`],[`2px`,`2px`],[`3px`,`3px`]],([e,t])=>t,(e,n)=>{var r=I(()=>g(n,2));let i=()=>U(r)[0],a=()=>U(r)[1];var o=Rf(),s=z(o,!0);F(o),H(()=>{X(o,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(d)===a()?`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`}`),q(s,i())}),W(`click`,o,()=>a()===`auto`?t.onReset(`--sf-link-underline-thickness`):t.onSet(`--sf-link-underline-thickness`,a())),K(e,o)}),F(p),F(o);var m=V(o,2),h=z(m),_=V(h,2),v=V(z(_));Ne(),F(_),F(m),H(()=>{Z(h,`caret-color:${U(l)||`#6366f1`}`),Z(v,`text-decoration:underline;text-underline-offset:${U(u)}em;text-decoration-thickness:${U(d)}`)}),W(`click`,v,e=>e.preventDefault()),K(e,n)};J(Pe,e=>{U(b)&&e(Fe)}),F(ke);var Ie=V(ke,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=Jf(),r=V(B(n),2);Y(r,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}],e=>e.token,(e,n)=>{{let r=I(()=>a(t.overrides[n.token]?.replace(`em`,``),n.def)),i=I(()=>n.token in t.overrides);$(e,{get label(){return n.label},get value(){return U(r)},min:.5,max:6,step:.125,unit:`em`,get overridden(){return U(i)},onChange:e=>t.onSet(n.token,`${e}em`),onReset:()=>t.onReset(n.token)})}}),F(r);var i=V(r,2);{let e=I(()=>a(t.overrides[`--sf-icon-box-pad`]?.replace(`em`,``),.5)),n=I(()=>`--sf-icon-box-pad`in t.overrides);$(i,{label:`Box padding`,get value(){return U(e)},min:0,max:2,step:.125,unit:`em`,help:`--sf-icon-box-pad — padding around icon when using .sf-icon-box`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-icon-box-pad`,`${e}em`),onReset:()=>t.onReset(`--sf-icon-box-pad`)})}K(e,n)};J(Be,e=>{U(x)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ue=z(He),Ke=V(z(Ue),2),qe=z(Ke,!0);F(Ke),F(Ue);var Je=V(Ue,2),Ye=e=>{var n=Zf(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`cover`,`contain`,`fill`,`none`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-object-fit`]??`cover`);var i=Rf(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`cover`?t.onReset(`--sf-object-fit`):t.onSet(`--sf-object-fit`,n)),K(e,i)}),F(i);var a=V(i,2),o=e=>{var n=Yf();W(`click`,n,()=>t.onReset(`--sf-object-fit`)),K(e,n)};J(a,e=>{`--sf-object-fit`in t.overrides&&e(o)}),F(r);var s=V(r,2),c=V(z(s),2);Hi(c);var l=V(c,2),u=e=>{var n=Xf();W(`click`,n,()=>t.onReset(`--sf-object-position`)),K(e,n)};J(l,e=>{`--sf-object-position`in t.overrides&&e(u)}),F(s),H(()=>Ui(c,t.overrides[`--sf-object-position`]??``)),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-object-position`,n):t.onReset(`--sf-object-position`)}),K(e,n)};J(Je,e=>{U(S)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var n=$f(),r=V(B(n),2);Y(r,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)`}],e=>e.token,(e,n)=>{var r=Qf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Hi(o);var s=V(o,2),c=e=>{var r=Xf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Ui(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(et,e=>{U(w)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=tp(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`a4`,`letter`,`legal`,`a3`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-print-page-size`]??`a4`);var i=Rf(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`a4`?t.onReset(`--sf-print-page-size`):t.onSet(`--sf-print-page-size`,n)),K(e,i)}),F(i),F(r),Y(V(r,2),16,()=>[{label:`Base size`,token:`--sf-print-base-size`,placeholder:`11pt`},{label:`Page margin`,token:`--sf-print-page-margin`,placeholder:`2cm`}],e=>e.token,(e,n)=>{var r=ep(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Hi(o);var s=V(o,2),c=e=>{var r=Xf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Ui(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),K(e,n)};J(ot,e=>{U(C)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var n=rp(),r=V(B(n),2);Y(r,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`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??`0`);var i=np(),a=z(i),o=z(a);F(a);var s=V(a,2),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l);var d=V(l,2),f=e=>{var r=Xf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(d,e=>{n.token in t.overrides&&e(f)}),F(i),H(()=>{Q(a,`aria-label`,n.label),Q(a,`aria-pressed`,U(r)===`1`),X(a,1,`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${U(r)===`1`?`bg-indigo-600`:`bg-white/10`}`),X(o,1,`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${U(r)===`1`?`translate-x-4`:`translate-x-0.5`}`),q(c,n.label),q(u,n.note)}),W(`click`,a,()=>U(r)===`1`?t.onReset(n.token):t.onSet(n.token,`1`)),K(e,i)}),F(r);var i=V(r,2),a=V(z(i),2);Hi(a);var o=V(a,2),s=e=>{var n=Xf();W(`click`,n,()=>t.onReset(`--sf-field-required-marker`)),K(e,n)};J(o,e=>{`--sf-field-required-marker`in t.overrides&&e(s)}),F(i),H(()=>Ui(a,t.overrides[`--sf-field-required-marker`]??``)),W(`input`,a,e=>{let n=e.target.value;n?t.onSet(`--sf-field-required-marker`,n):t.onReset(`--sf-field-required-marker`)}),K(e,n)};J(ft,e=>{U(T)&&e(pt)}),F(ct),Ne(4),F(D),H(()=>{Q(k,`aria-expanded`,U(p)),q(ee,U(p)?`▲`:`▼`),Q(ne,`aria-expanded`,U(m)),q(ie,U(m)?`▲`:`▼`),Q(N,`aria-expanded`,U(h)),q(le,U(h)?`▲`:`▼`),Q(pe,`aria-expanded`,U(_)),q(he,U(_)?`▲`:`▼`),Q(ye,`aria-expanded`,U(v)),q(xe,U(v)?`▲`:`▼`),Q(Te,`aria-expanded`,U(y)),q(De,U(y)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(b)),q(Me,U(b)?`▲`:`▼`),Q(Le,`aria-expanded`,U(x)),q(ze,U(x)?`▲`:`▼`),Q(Ue,`aria-expanded`,U(S)),q(qe,U(S)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(w)),q($e,U(w)?`▲`:`▼`),Q(rt,`aria-expanded`,U(C)),q(at,U(C)?`▲`:`▼`),Q(lt,`aria-expanded`,U(T)),q(dt,U(T)?`▲`:`▼`)}),W(`click`,k,()=>{R(p,!U(p))}),W(`click`,ne,()=>{R(m,!U(m))}),W(`click`,N,()=>{R(h,!U(h))}),W(`click`,pe,()=>{R(_,!U(_))}),W(`click`,ye,()=>{R(v,!U(v))}),W(`click`,Te,()=>{R(y,!U(y))}),W(`click`,Ae,()=>{R(b,!U(b))}),W(`click`,Le,()=>{R(x,!U(x))}),W(`click`,Ue,()=>{R(S,!U(S))}),W(`click`,Ze,()=>{R(w,!U(w))}),W(`click`,rt,()=>{R(C,!U(C))}),W(`click`,lt,()=>{R(T,!U(T))}),K(e,D),Ge()}Ur([`click`,`input`]);var op=G(`<div class="rounded-xl border border-dashed border-white/10 p-6 text-center"><p class="text-[11px] text-slate-500">No saved themes yet.</p> <p class="text-[10px] text-slate-600 mt-1">Configure your tokens, then save them above.</p></div>`),sp=G(`<div class="w-2.5 h-2.5 rounded-full border border-white/10 shrink-0"></div>`),cp=G(`<div class="flex items-center gap-1 bg-white/4 rounded px-1.5 py-0.5"><!> <span class="text-[8px] font-mono text-slate-600"> </span></div>`),lp=G(`<span class="text-[8px] text-slate-600 px-1.5 py-0.5"> </span>`),up=G(`<div class="px-4 pb-3 flex flex-wrap gap-1"><!> <!></div>`),dp=G(`<div><div class="flex items-start gap-3 p-4"><span class="text-2xl leading-none shrink-0 mt-0.5"> </span> <div class="flex-1 min-w-0"><div class="text-[12px] font-bold text-slate-200 flex items-center gap-1.5"> <!></div> <div class="text-[10px] text-slate-500 mt-0.5 font-mono"> </div></div> <div class="flex items-center gap-1.5 shrink-0"><button class="px-3 py-1.5 rounded-lg text-[11px] font-bold bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/30 transition-all cursor-pointer">Apply</button> <button aria-label="Delete theme" class="p-1.5 rounded-lg border border-white/8 text-slate-500 hover:text-rose-400 hover:border-rose-500/30 transition-all cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"><!></button></div></div> <!></div>`),fp=G(`<button class="w-full py-2 rounded-lg text-[11px] font-bold border border-rose-500/30 text-rose-400 hover:bg-rose-500/10 transition-all cursor-pointer">Reset all overrides</button>`),pp=G(`<div class="p-4 space-y-5 overflow-y-auto flex-1 h-full"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Themes</div> <p class="text-[11px] text-slate-400 leading-relaxed">Save your current configuration as a named theme, then re-apply it any time.
-    Themes are stored in this browser.</p> <div class="rounded-xl border border-white/8 bg-white/4 p-3 space-y-2"><div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Save current</div> <div class="flex items-center gap-2"><input type="text" placeholder="Theme name" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <button class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/30 transition-all cursor-pointer shrink-0 disabled:opacity-40 disabled:cursor-not-allowed"><!> Save</button></div> <p class="text-[9px] text-slate-600"><!></p></div> <div class="space-y-2"><!></div> <!></div>`);function mp(e,t){We(t,!0);let n=L(nn(Mc())),r=L(``),i=I(()=>Object.keys(t.overrides).length);function a(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let o=I(()=>U(n).find(e=>a(e.overrides,t.overrides))?.id??``);function s(){U(i)!==0&&(R(n,Nc(U(r),t.overrides),!0),R(r,``))}function c(e){R(n,Pc(e),!0)}var l=pp(),u=V(z(l),4),d=V(z(u),2),f=z(d);Hi(f);var p=V(f,2);La(z(p),{class:`w-3 h-3`}),Ne(),F(p),F(d);var m=V(d,2),h=z(m),_=e=>{K(e,Qr(`No active overrides yet — adjust some tokens first.`))},v=e=>{var t=Qr();H(()=>q(t,`Captures all ${U(i)??``} active override${U(i)===1?``:`s`}.`)),K(e,t)};J(h,e=>{U(i)===0?e(_):e(v,-1)}),F(m),F(u);var y=V(u,2),b=z(y),x=e=>{K(e,op())},S=e=>{var r=$r();Y(B(r),17,()=>U(n),e=>e.id,(e,n)=>{let r=I(()=>Object.keys(U(n).overrides).length);var i=dp(),a=z(i),s=z(a),l=z(s,!0);F(s);var u=V(s,2),d=z(u),f=z(d),p=V(f),m=e=>{_a(e,{class:`w-3 h-3 text-indigo-400`})};J(p,e=>{U(o)===U(n).id&&e(m)}),F(d);var h=V(d,2),_=z(h);F(h),F(u);var v=V(u,2),y=z(v),b=V(y,2);qa(z(b),{class:`w-3.5 h-3.5`}),F(b),F(v),F(a);var x=V(a,2),S=e=>{var t=up(),i=z(t);Y(i,17,()=>Object.entries(U(n).overrides).slice(0,5),([e,t])=>e,(e,t)=>{var n=I(()=>g(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=cp(),o=z(a),s=e=>{var t=sp();let n;H(()=>n=Z(t,``,n,{background:i()})),K(e,t)},c=I(()=>r().includes(`color`)||r().includes(`source`));J(o,e=>{U(c)&&e(s)});var l=V(o,2),u=z(l,!0);F(l),F(a),H(e=>q(u,e),[()=>r().replace(`--sf-`,``)]),K(e,a)});var a=V(i,2),o=e=>{var t=lp(),n=z(t);F(t),H(()=>q(n,`+${U(r)-5} more`)),K(e,t)};J(a,e=>{U(r)>5&&e(o)}),F(t),K(e,t)};J(x,e=>{U(r)>0&&e(S)}),F(i),H(()=>{X(i,1,`group rounded-xl border transition-all overflow-hidden ${U(o)===U(n).id?`border-indigo-500/40 bg-indigo-500/10`:`border-white/8 bg-white/4 hover:bg-white/6 hover:border-white/14`}`),q(l,U(n).icon),q(f,`${U(n).name??``} `),q(_,`${U(r)??``} override${U(r)===1?``:`s`}`)}),W(`click`,y,()=>t.onApplyTheme(U(n).overrides)),W(`click`,b,()=>c(U(n).id)),K(e,i)}),K(e,r)};J(b,e=>{U(n).length===0?e(x):e(S,-1)}),F(y);var C=V(y,2),w=e=>{var n=fp();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(C,e=>{U(i)>0&&e(w)}),F(l),H(()=>p.disabled=U(i)===0),W(`keydown`,f,e=>{e.key===`Enter`&&s()}),Xi(f,()=>U(r),e=>R(r,e)),W(`click`,p,s),K(e,l),Ge()}Ur([`keydown`,`click`]);var hp=G(`<!> <span class="text-emerald-400">Link copied!</span>`,1),gp=G(`<!> Copy shareable link`,1),_p=G(`<div class="p-4 space-y-4 overflow-y-auto flex-1 h-full"><div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Export</div> <p class="text-[11px] text-slate-400 leading-relaxed"> </p></div> <button class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-white/8 bg-white/4 text-[11px] font-bold text-slate-300 hover:bg-white/8 hover:text-white transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"><!></button> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">CSS output</div> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5"><button>@layer</button> <button>:root</button></div></div> <div class="relative"><pre class="bg-[#06060a] border border-white/8 rounded-xl p-4 text-[10px] font-mono text-slate-300 overflow-x-auto max-h-80 whitespace-pre-wrap"> </pre> <div class="absolute top-2 right-2 flex gap-1"><button class="p-1.5 rounded-lg bg-white/5 hover:bg-white/12 text-slate-400 hover:text-white transition-all cursor-pointer border border-white/8" title="Copy to clipboard"><!></button> <button class="p-1.5 rounded-lg bg-white/5 hover:bg-white/12 text-slate-400 hover:text-white transition-all cursor-pointer border border-white/8" title="Download .css"><!></button></div></div> <button class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-white/8 bg-white/4 text-[10px] font-bold text-slate-400 hover:bg-white/8 hover:text-slate-200 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"><!> Download W3C Design Tokens (.json)</button> <div class="rounded-lg bg-indigo-500/8 border border-indigo-500/15 p-3 space-y-2"><div class="text-[10px] font-bold text-indigo-300">Usage</div> <div class="text-[10px] text-slate-400 leading-relaxed">Paste this CSS into your project after the SLASHED import.</div> <pre class="text-[9px] font-mono text-slate-500 bg-black/30 rounded p-2 overflow-x-auto"></pre></div></div>`);function vp(e,t){We(t,!0);let n=L(`layer`),r=L(!1),i=L(!1),a=I(()=>Cs(t.overrides,{mode:U(n),banner:!0})),o=I(()=>Object.keys(t.overrides).length);async function s(){try{await navigator.clipboard.writeText(U(a)),R(r,!0),setTimeout(()=>{R(r,!1)},2e3)}catch{}}async function c(){try{let e=Es(t.overrides);await navigator.clipboard.writeText(e),R(i,!0),setTimeout(()=>{R(i,!1)},2e3)}catch{}}function l(){let e=new Blob([U(a)],{type:`text/css`}),t=URL.createObjectURL(e),n=document.createElement(`a`);n.href=t,n.download=`slashed-overrides.css`,n.click(),URL.revokeObjectURL(t)}function u(e){return e.includes(`color`)||e.includes(`scrim-color`)||e.includes(`shadow-color`)?`color`:e.includes(`duration`)||e.includes(`delay`)||e.includes(`transition-duration`)?`duration`:e.includes(`radius`)||e.includes(`space`)||e.includes(`size`)||e.includes(`width`)||e.includes(`height`)||e.includes(`gap`)||e.includes(`blur`)||e.includes(`text-`)||e.includes(`leading`)||e.includes(`tracking`)?`dimension`:e.includes(`font-family`)||e.includes(`font-mono`)||e.includes(`font-body`)||e.includes(`font-heading`)||e.includes(`font-code`)?`fontFamily`:e.includes(`font-weight`)||e.includes(`weight`)?`fontWeight`:`string`}function d(){let e={};for(let[n,r]of Object.entries(t.overrides)){let t=n.replace(/^--sf-/,``).replace(/-/g,`.`);e[t]={$value:r,$type:u(n)}}let n=JSON.stringify({$schema:`https://design-tokens.github.io/community-group/format/`,...e},null,2),r=new Blob([n],{type:`application/json`}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=`slashed-tokens.w3c.json`,a.click(),URL.revokeObjectURL(i)}var f=_p(),p=z(f),m=V(z(p),2),h=z(m,!0);F(m),F(p);var g=V(p,2),_=z(g),v=e=>{var t=hp();_a(B(t),{class:`w-3 h-3 text-emerald-400`}),Ne(2),K(e,t)},y=e=>{var t=gp();Ea(B(t),{class:`w-3 h-3`}),Ne(),K(e,t)};J(_,e=>{U(i)?e(v):e(y,-1)}),F(g);var b=V(g,2),x=V(z(b),2),S=z(x),C=V(S,2);F(x),F(b);var w=V(b,2),T=z(w),E=z(T,!0);F(T);var D=V(T,2),O=z(D),k=z(O),A=e=>{_a(e,{class:`w-3 h-3 text-emerald-400`})},ee=e=>{ba(e,{class:`w-3 h-3`})};J(k,e=>{U(r)?e(A):e(ee,-1)}),F(O);var te=V(O,2);xa(z(te),{class:`w-3 h-3`}),F(te),F(D),F(w);var j=V(w,2);xa(z(j),{class:`w-3 h-3`}),Ne(),F(j);var M=V(j,2),ne=V(z(M),4);ne.textContent=`@import 'slashed/slashed.full.css';
-@import './slashed-overrides.css';`,F(M),F(f),H(()=>{q(h,U(o)>0?`${U(o)} override${U(o)===1?``:`s`} ready to export.`:`No overrides yet. Customise tokens, then export.`),g.disabled=U(o)===0,X(S,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`layer`?`bg-indigo-600 text-white`:`text-slate-400 hover:text-slate-200`}`),X(C,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`root`?`bg-indigo-600 text-white`:`text-slate-400 hover:text-slate-200`}`),q(E,U(a)||`/* No overrides */`),j.disabled=U(o)===0}),W(`click`,g,c),W(`click`,S,()=>{R(n,`layer`)}),W(`click`,C,()=>{R(n,`root`)}),W(`click`,O,s),W(`click`,te,l),W(`click`,j,d),K(e,f),Ge()}Ur([`click`]);var yp={_sync:{generatedBy:`configurator/scripts/sync-api.mjs`,source:`docs/api-index.json`},classes:[{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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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 <img class="sf-bg"> or as a wrapper with a nested > img / > video / > picture.`,optional:!1,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:!1,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:!1,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:!1,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:!1,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 <a>.`,optional:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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 <input>.`,optional:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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 <html> (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration.`,optional:!1,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:!1,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 <body>.`,optional:!1,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:!1,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:!1,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:!0,layer:`slashed.themes`}]},bp={_sync:{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}}},tokens:[{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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <em> inside body text (italic by default). Override to suppress italics if your typeface has no italic variant.`,value:`italic`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <strong> 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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <code> and <pre>. Usually slightly smaller than body text so monospace doesn't feel oversized.`,value:`0.875em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without <color> registration the browser cannot interpolate and transitions snap at 50%.`,value:`oklch(0.70 0.198 235)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <code> elements. Usually a subtle tint of the inset surface.`,value:`var(--sf-color-inset)`,aliasOf:`--sf-color-inset`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-danger.`,value:`oklch(0.71 0.198 12)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-info.`,value:`oklch(0.71 0.162 235)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <mark> highlights. Adapts automatically in dark mode.`,note:`Background color for highlighted <mark> elements.`,value:`oklch(from var(--sf-color-warning) l c h / 0.25)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <mark> elements.`,value:`inherit`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-neutral.`,value:`oklch(0.69 0.0225 260)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-primary.`,value:`oklch(0.715 0.243 264)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-secondary.`,value:`oklch(0.84 0.036 264)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-success.`,value:`oklch(0.70 0.144 145)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-tertiary.`,value:`oklch(0.74 0.198 295)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-warning.`,value:`oklch(0.65 0.153 80)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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 <h1>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h1>. Typically slightly negative at large sizes.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h1>. Tighter than body to avoid excessive whitespace at large sizes.`,value:`var(--sf-leading-tight)`,aliasOf:`--sf-leading-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h1>. 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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h1>.`,value:`var(--sf-text-4xl)`,aliasOf:`--sf-text-4xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h2>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h2>.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h2>.`,value:`var(--sf-leading-tight)`,aliasOf:`--sf-leading-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h2>. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h2>.`,value:`var(--sf-text-3xl)`,aliasOf:`--sf-text-3xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h3>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h3>.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h3>.`,value:`var(--sf-leading-snug)`,aliasOf:`--sf-leading-snug`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h3>. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h3>.`,value:`var(--sf-text-2xl)`,aliasOf:`--sf-text-2xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h4>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h4>.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h4>.`,value:`var(--sf-leading-snug)`,aliasOf:`--sf-leading-snug`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h4>. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h4>.`,value:`var(--sf-text-xl)`,aliasOf:`--sf-text-xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h5>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h5>.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h5>.`,value:`var(--sf-leading-normal)`,aliasOf:`--sf-leading-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h5>. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h5>.`,value:`var(--sf-text-l)`,aliasOf:`--sf-text-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h6>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h6>.`,value:`var(--sf-tracking-wide)`,aliasOf:`--sf-tracking-wide`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h6>.`,value:`var(--sf-leading-normal)`,aliasOf:`--sf-leading-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h6>. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h6>.`,value:`var(--sf-text-m)`,aliasOf:`--sf-text-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<integer>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<integer>`,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<integer>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<integer>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<integer>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <figure> elements inside .prose.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <hr> rules inside .prose.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]}]},xp=G(`<div class="text-[11px] text-slate-600 py-8 text-center"> </div>`),Sp=G(`<div class="text-[8px] text-slate-600 uppercase tracking-widest pt-2 pb-1 font-semibold"> </div>`),Cp=G(`<span> </span>`),wp=G(`<span class="text-[8px] text-slate-600 border border-white/10 px-1 rounded">optional</span>`),Tp=G(`<div class="text-[9px] text-slate-500 mt-0.5 leading-relaxed"> </div>`),Ep=G(`<div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-white/4 transition-colors"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><span class="font-mono text-[11px] font-semibold text-slate-200"> </span> <!> <!></div> <!></div> <button title="Copy selector" class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-white/8"><!></button></div>`),Dp=G(`<!> <div class="space-y-0.5"></div>`,1),Op=G(`<div class="mt-4 mb-1"><div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest py-1 border-b border-white/6"> </div></div> <!>`,1),kp=G(`<span class="text-[8px] font-bold text-indigo-400 uppercase">knob</span>`),Ap=G(`<span class="text-[8px] text-amber-500/80 border border-amber-500/20 px-1 rounded">advanced</span>`),jp=G(`<div class="font-mono text-[9px] text-slate-600 mt-0.5"> </div>`),Mp=G(`<div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-white/4 transition-colors"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><span class="font-mono text-[10px] font-semibold text-slate-200"> </span> <!> <!></div> <!> <!></div> <button title="Copy var()" class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-white/8"><!></button></div>`),Np=G(`<div class="flex flex-col h-full min-h-0"><div class="px-4 pt-4 pb-2 space-y-2 shrink-0"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Classes &amp; Variables</div> <input type="search" placeholder="Search classes, tokens, descriptions…" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <div class="flex bg-white/4 border border-white/8 rounded-lg p-0.5 gap-0.5"><button> </button> <button> </button></div></div> <div class="flex-1 min-h-0 overflow-y-auto px-4 pb-4"><!></div></div>`);function Pp(e,t){We(t,!0);let n=yp.classes,r=bp.tokens.filter(e=>e.tier===`PUBLIC`||e.tier===`PUBLIC-ADVANCED`),i=L(``),a=L(`classes`),o=L(``),s=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?n.filter(t=>t.name.toLowerCase().includes(e)||t.selector?.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)):n}),c=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?r.filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)||t.value?.toLowerCase().includes(e)):r});function l(e){let t=new Map;for(let n of e){let e=n.category||`Other`,r=n.group||``;t.has(e)||t.set(e,new Map);let i=t.get(e);i.has(r)||i.set(r,[]),i.get(r).push(n)}return t}let u=I(()=>l(U(s)())),d=I(()=>l(U(c)())),f=null;async function p(e){try{await navigator.clipboard.writeText(e),R(o,e,!0),f&&clearTimeout(f),f=setTimeout(()=>{U(o)===e&&R(o,``),f=null},1500)}catch{}}let m={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 h=Np(),_=z(h),v=V(z(_),2);Hi(v);var y=V(v,2),b=z(y),x=z(b);F(b);var S=V(b,2),C=z(S);F(S),F(y),F(_);var w=V(_,2),T=z(w),E=e=>{var t=$r(),n=B(t),r=e=>{var t=xp(),n=z(t);F(t),H(()=>q(n,`No classes match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(s)().length===0),c=e=>{var t=$r();Y(B(t),17,()=>[...U(u).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>g(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Op(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>g(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Dp(),s=B(a),c=e=>{var t=Sp(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=Ep(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{var n=Cp(),r=z(n,!0);F(n),H(()=>{X(n,1,`text-[8px] font-bold uppercase ${m[U(t).kind]??`text-slate-500`}`),q(r,U(t).kind)}),K(e,n)};J(c,e=>{U(t).kind&&e(l)});var u=V(c,2),d=e=>{K(e,wp())};J(u,e=>{U(t).optional&&e(d)}),F(i);var f=V(i,2),h=e=>{var n=Tp(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(f,e=>{U(t).description&&e(h)}),F(r);var g=V(r,2),_=z(g),v=e=>{_a(e,{class:`w-3 h-3 text-emerald-400`})},y=e=>{ba(e,{class:`w-3 h-3 text-slate-500`})};J(_,e=>{U(o)===U(t).selector?e(v):e(y,-1)}),F(g),F(n),H(()=>q(s,U(t).selector)),W(`click`,g,()=>p(U(t).selector)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(c,-1)}),K(e,t)},D=e=>{var t=$r(),n=B(t),r=e=>{var t=xp(),n=z(t);F(t),H(()=>q(n,`No tokens match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(c)().length===0),s=e=>{var t=$r();Y(B(t),17,()=>[...U(d).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>g(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Op(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>g(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Dp(),s=B(a),c=e=>{var t=Sp(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=Mp(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{K(e,kp())};J(c,e=>{U(t).role===`knob`&&e(l)});var u=V(c,2),d=e=>{K(e,Ap())};J(u,e=>{U(t).tier===`PUBLIC-ADVANCED`&&e(d)}),F(i);var f=V(i,2),m=e=>{var n=jp(),r=z(n,!0);F(n),H(()=>q(r,U(t).value)),K(e,n)};J(f,e=>{U(t).value&&e(m)});var h=V(f,2),g=e=>{var n=Tp(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(h,e=>{U(t).description&&e(g)}),F(r);var _=V(r,2),v=z(_),y=e=>{_a(e,{class:`w-3 h-3 text-emerald-400`})},b=e=>{ba(e,{class:`w-3 h-3 text-slate-500`})};J(v,e=>{U(o)===`var(${U(t).name})`?e(y):e(b,-1)}),F(_),F(n),H(()=>q(s,U(t).name)),W(`click`,_,()=>p(`var(${U(t).name})`)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(s,-1)}),K(e,t)};J(T,e=>{U(a)===`classes`?e(E):e(D,-1)}),F(w),F(h),H((e,t)=>{X(b,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`classes`?`bg-indigo-600/30 text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-300`}`),q(x,`CSS classes (${e??``})`),X(S,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`tokens`?`bg-indigo-600/30 text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-300`}`),q(C,`CSS vars (${t??``})`)},[()=>U(s)().length,()=>U(c)().length]),Xi(v,()=>U(i),e=>R(i,e)),W(`click`,b,()=>{R(a,`classes`)}),W(`click`,S,()=>{R(a,`tokens`)}),K(e,h),Ge()}Ur([`click`]);var Fp=G(`<div class="w-4 h-4 rounded-sm border border-white/10 shrink-0"></div>`),Ip=G(`<div class="w-4 h-4 shrink-0"></div>`),Lp=G(`<div class="text-[9px] text-slate-600 truncate"> </div>`),Rp=G(`<input class="w-28 bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 focus:outline-none text-right"/>`),zp=G(`<span class="text-indigo-300"> </span>`),Bp=G(`<button class="text-[10px] font-mono text-slate-500 hover:text-slate-200 truncate max-w-28 text-right cursor-pointer transition-colors"><!></button>`),Vp=G(`<button class="text-[9px] text-slate-600 hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 shrink-0">✕</button>`),Hp=G(`<div><div></div> <!> <div class="flex-1 min-w-0"><div class="text-[10px] font-mono text-slate-400 truncate"> </div> <!></div> <!> <!></div>`);function Up(e,t){We(t,!0);let n=L(!1);function r(e){let t=e.name;if(t.includes(`color`)||t.includes(`source`)||t.includes(`-bg`)||t.includes(`-border`))return`color`;if(t.includes(`font`)||t.includes(`family`))return`font`;let n=e.syntax?.toLowerCase()??``;return n.includes(`number`)||n.includes(`length`)||n.includes(`integer`)?`number`:`text`}let i=I(()=>t.overrideValue??t.token.value),a=I(()=>t.overrideValue!==void 0),o=I(()=>r(t.token)),s=I(()=>t.token.name.replace(`--sf-`,``));function c(e){return nc.value,cc(e)||cc(`var(${t.token.name})`)||e}let l=I(()=>U(o)===`color`?c(U(i)):``);var u=Hp(),d=z(u),f=V(d,2),p=e=>{var t=Fp();let n;H(()=>n=Z(t,``,n,{background:U(l)})),K(e,t)},m=e=>{K(e,Ip())};J(f,e=>{U(o)===`color`?e(p):e(m,-1)});var h=V(f,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=e=>{var n=Lp(),r=z(n,!0);F(n),H(()=>q(r,t.token.description)),K(e,n)};J(v,e=>{t.token.description&&e(y)}),F(h);var b=V(h,2),x=e=>{var r=Rp();Hi(r),H(()=>Ui(r,U(i))),Hr(`blur`,r,e=>{let r=e.target.value.trim();r&&r!==t.token.value?t.onSet(r):(!r||r===t.token.value)&&t.onReset(),R(n,!1)}),W(`keydown`,r,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&R(n,!1)}),K(e,r)},S=e=>{var t=Bp(),r=z(t),o=e=>{var t=zp(),n=z(t,!0);F(t),H(()=>q(n,U(i))),K(e,t)},s=e=>{var t=Qr();H(()=>q(t,U(i))),K(e,t)};J(r,e=>{U(a)?e(o):e(s,-1)}),F(t),H(()=>Q(t,`title`,U(i))),W(`click`,t,()=>{R(n,!0)}),K(e,t)};J(b,e=>{U(n)?e(x):e(S,-1)});var C=V(b,2),w=e=>{var n=Vp();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{U(a)&&e(w)}),F(u),H(()=>{X(u,1,`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${U(a)?`bg-indigo-500/8 border border-indigo-500/15`:`hover:bg-white/4`}`),X(d,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(a)?`bg-indigo-500`:`bg-transparent`}`),Q(g,`title`,t.token.name),q(_,U(s))}),K(e,u),Ge()}Ur([`keydown`,`click`]);var Wp=G(`<span class="text-[9px] font-bold text-indigo-400 font-mono"> </span>`),Gp=G(`<p class="text-[11px] text-slate-600 text-center py-8">No tokens found</p>`),Kp=G(`<p class="text-[10px] text-slate-600 text-center py-2"> </p>`),qp=G(`<div class="space-y-0.5"><!> <!></div>`),Jp=G(`<div class="p-4 space-y-4"><div class="flex items-center justify-between"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest capitalize"> </div> <!></div> <input type="text" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`);function Yp(e,t){We(t,!0);let n=L(``),r=I(()=>()=>{let e=t.patterns??[t.domain];return t.tokens.filter(t=>e.some(e=>t.name.includes(e))&&t.tier!==`INTERNAL`)}),i=I(()=>()=>{if(!U(n))return U(r)();let e=U(n).toLowerCase();return U(r)().filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e))}),a=I(()=>U(i)().filter(e=>e.name in t.overrides).length);var o=Jp(),s=z(o),c=z(s),l=z(c);F(c);var u=V(c,2),d=e=>{var t=Wp(),n=z(t);F(t),H(()=>q(n,`${U(a)??``} modified`)),K(e,t)};J(u,e=>{U(a)>0&&e(d)}),F(s);var f=V(s,2);Hi(f);var p=V(f,2),m=e=>{K(e,Gp())},h=I(()=>U(i)().length===0),g=e=>{var n=qp(),r=z(n);Y(r,17,()=>U(i)().slice(0,60),e=>e.name,(e,n)=>{Up(e,{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)})});var a=V(r,2),o=e=>{var t=Kp(),n=z(t);F(t),H(e=>q(n,`${e??``} more — refine your search`),[()=>U(i)().length-60]),K(e,t)},s=I(()=>U(i)().length>60);J(a,e=>{U(s)&&e(o)}),F(n),K(e,n)};J(p,e=>{U(h)?e(m):e(g,-1)}),F(o),H(()=>{q(l,`${t.domain??``} tokens`),Q(f,`placeholder`,`Search ${t.domain} tokens…`),Ui(f,U(n))}),W(`input`,f,e=>{R(n,e.target.value,!0)}),K(e,o),Ge()}Ur([`input`]);var Xp=G(`<div class="w-1 h-1 bg-white rounded-sm"></div>`),Zp=G(`<div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-rose-800"></div> <span class="text-[8px] text-slate-600"> </span></div>`),Qp=G(`<div class="text-center py-8 text-[11px] text-slate-600"> </div>`),$p=G(`<div class="absolute left-0 top-0 bottom-0 w-0.5 bg-amber-600/40 rounded-full"></div>`),em=G(`<div class="absolute left-0 top-0 bottom-0 w-0.5 bg-rose-800/40 rounded-full"></div>`),tm=G(`<div class="relative"><!> <!> <!></div>`),nm=G(`<div class="space-y-0.5 px-1"></div>`),rm=G(`<div class="flex flex-col h-full min-h-0"><div class="px-3 pt-3 pb-2 space-y-2 shrink-0"><input type="text" placeholder="Search tokens…" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <div class="flex items-center gap-3"><button><div><!></div> </button> <button><div><!></div> </button> <span class="ml-auto text-[9px] text-slate-700 font-mono"> </span></div> <div class="flex gap-3"><div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-slate-500"></div> <span class="text-[8px] text-slate-600"> </span></div> <div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-amber-600"></div> <span class="text-[8px] text-slate-600"> </span></div> <!></div></div> <div class="w-full h-px bg-white/6 shrink-0"></div> <div class="flex-1 min-h-0 overflow-y-auto py-1"><!></div></div>`);function im(e,t){We(t,!0);let n={PUBLIC:0,"PUBLIC-ADVANCED":1,INTERNAL:2},r=L(``),i=L(!1),a=L(!1),o=I(()=>t.tokens.filter(e=>t.patterns.some(t=>e.name.includes(t))).sort((e,t)=>{let r=n[e.tier??`INTERNAL`]??2,i=n[t.tier??`INTERNAL`]??2;return r===i?e.name.localeCompare(t.name):r-i})),s=I(()=>()=>{let e=U(o);if(U(i)||(e=e.filter(e=>e.tier!==`INTERNAL`)),U(a)&&(e=e.filter(e=>e.name in t.overrides)),U(r)){let t=U(r).toLowerCase();e=e.filter(e=>e.name.toLowerCase().includes(t)||e.description?.toLowerCase().includes(t))}return e}),c=I(()=>U(o).filter(e=>e.name in t.overrides).length),l=I(()=>U(o).filter(e=>e.tier===`PUBLIC`).length),u=I(()=>U(o).filter(e=>e.tier===`PUBLIC-ADVANCED`).length),d=I(()=>U(o).filter(e=>e.tier===`INTERNAL`).length);var f=rm(),p=z(f),m=z(p);Hi(m);var h=V(m,2),g=z(h),_=z(g),v=z(_),y=e=>{K(e,Xp())};J(v,e=>{U(a)&&e(y)}),F(_);var b=V(_);F(g);var x=V(g,2),S=z(x),C=z(S),w=e=>{K(e,Xp())};J(C,e=>{U(i)&&e(w)}),F(S);var T=V(S);F(x);var E=V(x,2),D=z(E);F(E),F(h);var O=V(h,2),k=z(O),A=V(z(k),2),ee=z(A);F(A),F(k);var te=V(k,2),j=V(z(te),2),M=z(j);F(j),F(te);var ne=V(te,2),re=e=>{var t=Zp(),n=V(z(t),2),r=z(n);F(n),F(t),H(()=>q(r,`Internal (${U(d)??``})`)),K(e,t)};J(ne,e=>{U(i)&&e(re)}),F(O),F(p);var ie=V(p,4),ae=z(ie),oe=e=>{var t=Qp(),n=z(t,!0);F(t),H(()=>q(n,U(a)?`No modified tokens in this domain`:`No tokens found`)),K(e,t)},se=I(()=>U(s)().length===0),N=e=>{var n=nm();Y(n,21,()=>U(s)(),e=>e.name,(e,n)=>{var r=tm(),i=z(r),a=e=>{K(e,$p())};J(i,e=>{U(n).tier===`PUBLIC-ADVANCED`&&e(a)});var o=V(i,2),s=e=>{K(e,em())};J(o,e=>{U(n).tier===`INTERNAL`&&e(s)}),Up(V(o,2),{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)}),F(r),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(se)?e(oe):e(N,-1)}),F(ie),F(f),H(e=>{Ui(m,U(r)),X(g,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(a)?`text-indigo-400`:`text-slate-600 hover:text-slate-400`}`),X(_,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(a)?`bg-indigo-600 border-indigo-500`:`border-white/20`}`),q(b,` Modified only ${U(c)>0?`(${U(c)})`:``}`),Q(x,`aria-expanded`,U(i)),X(x,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(i)?`text-amber-400`:`text-slate-600 hover:text-slate-400`}`),X(S,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(i)?`bg-amber-600 border-amber-500`:`border-white/20`}`),q(T,` Internal (${U(d)??``})`),q(D,`${e??``}/${U(o).length??``}`),q(ee,`Public (${U(l)??``})`),q(M,`Advanced (${U(u)??``})`)},[()=>U(s)().length]),W(`input`,m,e=>{R(r,e.target.value,!0)}),W(`click`,g,()=>{R(a,!U(a))}),W(`click`,x,()=>{R(i,!U(i))}),K(e,f),Ge()}Ur([`input`,`click`]);var am=G(`<option style="background:#16161e;"> </option>`),om=G(`<div class="flex items-center gap-2 p-2.5 bg-white/4"><span class="text-[15px] font-mono font-bold text-slate-100"> </span> <span> </span> <div class="flex-1"></div> <div class="grid grid-cols-2 gap-x-2 gap-y-0.5 text-[9px]"><span> </span> <span> </span> <span> </span> <span> </span></div></div>`),sm=G(`<div class="p-2.5 bg-white/4 text-[10px] text-slate-500">Waiting for live preview…</div>`),cm=G(`<button> </button>`),lm=G(`<p class="text-[9px] text-slate-600">Pick an editable brand/status <span class="font-mono">(base)</span> color as the foreground to enable auto-fix.</p>`),um=G(`<p class="text-[9px] text-emerald-300"> </p>`),dm=G(`<div class="flex items-center gap-2"><span class="w-7 h-7 rounded border border-white/10 shrink-0"></span> <div class="flex-1 min-w-0"><div class="text-[9px] font-mono text-slate-400 truncate"> </div> <div class="text-[9px] text-emerald-300"> </div></div> <button class="px-2.5 py-1 rounded-lg bg-indigo-600/25 border border-indigo-500/40 text-indigo-200 text-[10px] font-bold cursor-pointer hover:bg-indigo-600/35 shrink-0">Apply</button></div>`),fm=G(`<p class="text-[9px] text-slate-600"> </p>`),pm=G(`<div class="grid grid-cols-[1fr_auto_1fr] gap-2 items-end"><div><div class="text-[9px] text-slate-500 mb-1">Foreground</div> <select class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"></select></div> <button title="Swap" class="mb-0.5 px-2 py-1.5 rounded-lg border border-white/10 text-slate-400 hover:text-slate-200 hover:bg-white/5 cursor-pointer text-[12px]">⇄</button> <div><div class="text-[9px] text-slate-500 mb-1">Background</div> <select class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"></select></div></div> <div class="rounded-xl border border-white/8 overflow-hidden"><div class="h-24 flex items-center justify-center"><span class="text-[26px] font-bold">Aa Bb Cc</span></div> <!></div> <div class="rounded-xl bg-white/4 border border-white/8 p-3 space-y-2"><div class="flex items-center justify-between"><span class="text-[10px] font-bold text-slate-300">Auto-fix to pass <span class="text-slate-600 font-normal"> </span></span> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div></div> <!></div>`,1),mm=G(`<th class="p-1 font-mono font-semibold text-slate-500 text-center whitespace-nowrap"> </th>`),hm=G(`<td class="p-0.5"><button> </button></td>`),gm=G(`<td class="p-0.5 text-slate-700 text-center">·</td>`),_m=G(`<tr><td class="p-1 font-mono font-semibold text-slate-500 whitespace-nowrap pr-2"> </td><!></tr>`),vm=G(`<p class="text-[10px] text-slate-600">Foreground (rows) × background (cols). Click a cell to load it above.</p> <div class="overflow-x-auto"><table class="border-collapse text-[9px]"><thead><tr><th class="p-1"></th><!></tr></thead><tbody></tbody></table></div>`,1),ym=G(`<div class="p-4 space-y-6"><section class="space-y-1"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Contrast checker</div> <p class="text-[10px] text-slate-600 leading-relaxed">Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.</p></section> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Pair checker</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-2"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Contrast matrix</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>`);function bm(e,t){We(t,!0);let n=[{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`}],r=[{label:`Surface`,expr:`var(--sf-color-surface)`},{label:`Bg`,expr:`var(--sf-color-bg)`},{label:`Border`,expr:`var(--sf-color-border)`}],i=[{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)`}],a=i.flatMap(e=>[{label:`${e.key} (base)`,expr:`var(--sf-color-${e.key})`,editKey:e.key},{label:`${e.key}-100`,expr:`var(--sf-color-${e.key}-100)`},{label:`${e.key}-600`,expr:`var(--sf-color-${e.key}-600)`},{label:`${e.key}-900`,expr:`var(--sf-color-${e.key}-900)`}]),o=[...n,...r,...a],s=Object.fromEntries(i.map(e=>[e.key,e])),c=[{label:`text`,expr:`var(--sf-color-text)`},{label:`white`,expr:`#ffffff`},{label:`black`,expr:`#000000`},{label:`primary`,expr:`var(--sf-color-primary)`,editKey:`primary`}],l=[{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)`}],u=L(`White`),d=L(`primary (base)`),f=L(`AA`),p=I(()=>o.find(e=>e.label===U(u))??o[0]),m=I(()=>o.find(e=>e.label===U(d))??o[0]);function h(e,t){nc.value;let n=fc(e),r=fc(t);return!n||!r?null:Jc(qc(...n),qc(...r))}function g(e){return e>=7?{tag:`AAA`,cls:`bg-emerald-500/25 text-emerald-200`}:e>=4.5?{tag:`AA`,cls:`bg-emerald-500/15 text-emerald-300`}:e>=3?{tag:`AA-L`,cls:`bg-amber-500/20 text-amber-300`}:{tag:`Fail`,cls:`bg-rose-500/20 text-rose-300`}}let _=I(()=>h(U(p).expr,U(m).expr));function v(){let e=U(u);R(u,U(d),!0),R(d,e,!0)}function y(e,t){let n=o.find(t=>t.expr===e),r=o.find(e=>e.expr===t);n&&R(u,n.label,!0),r&&R(d,r.label,!0)}function b(e){return nc.value,cc(e)||e}let x=L(!1),S=L(!1),C=L(null);function w(){R(C,null);let e=U(p).editKey?s[U(p).editKey]:null;if(!e)return;let n=ac()===`dark`,r=n?e.srcDark:e.srcLight,i=n?e.defDark:e.defLight,{c:a,h:o,l:c,valid:l}=Yc(t.overrides[r]??i);if(!l)return;let u=fc(U(m).expr);if(!u)return;let d=qc(...u),h=U(f)===`AAA`?7:4.5,g=null;for(let e=0;e<=1.0001;e+=.005){let[t,n,r]=Kc(e,a,o);Jc(qc(t,n,r),d)>=h&&(g===null||Math.abs(e-c)<Math.abs(g-c))&&(g=e)}if(g===null)return;let[_,v,y]=Kc(g,a,o),b=Jc(qc(_,v,y),d);R(C,{token:r,value:Xc(g,a,o),ratio:b},!0)}function T(){U(C)&&(t.onSet(U(C).token,U(C).value),R(C,null))}On(()=>{if(!U(x)){R(C,null);return}nc.value,U(u),U(d),U(f),U(p).editKey&&U(_)!==null&&U(_)<(U(f)===`AAA`?7:4.5)?w():R(C,null)});var E=ym(),D=V(z(E),2),O=z(D),k=V(z(O),2),A=z(k,!0);F(k),F(O);var ee=V(O,2),te=e=>{var t=pm(),n=B(t),r=z(n),i=V(z(r),2);Y(i,21,()=>o,e=>e.label,(e,t)=>{var n=am(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).label)&&(n.value=(n.__value=U(t).label)??``)}),K(e,n)}),F(i),F(r);var a=V(r,2),s=V(a,2),c=V(z(s),2);Y(c,21,()=>o,e=>e.label,(e,t)=>{var n=am(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).label)&&(n.value=(n.__value=U(t).label)??``)}),K(e,n)}),F(c),F(s),F(n);var l=V(n,2),h=z(l),y=z(h);F(h);var x=V(h,2),S=e=>{let t=I(()=>g(U(_)));var n=om(),r=z(n),i=z(r);F(r);var a=V(r,2),o=z(a,!0);F(a);var s=V(a,4),c=z(s),l=z(c);F(c);var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=z(f);F(f);var m=V(f,2),h=z(m);F(m),F(s),F(n),H(e=>{q(i,`${e??``}:1`),X(a,1,`text-[10px] font-bold px-2 py-0.5 rounded ${U(t).cls}`),q(o,U(t).tag),X(c,1,Si(U(_)>=4.5?`text-emerald-300`:`text-rose-300`)),q(l,`${U(_)>=4.5?`✓`:`✗`} AA normal`),X(u,1,Si(U(_)>=3?`text-emerald-300`:`text-rose-300`)),q(d,`${U(_)>=3?`✓`:`✗`} AA large`),X(f,1,Si(U(_)>=7?`text-emerald-300`:`text-rose-300`)),q(p,`${U(_)>=7?`✓`:`✗`} AAA normal`),X(m,1,Si(U(_)>=4.5?`text-emerald-300`:`text-rose-300`)),q(h,`${U(_)>=4.5?`✓`:`✗`} AAA large`)},[()=>U(_).toFixed(2)]),K(e,n)},w=e=>{K(e,sm())};J(x,e=>{U(_)===null?e(w,-1):e(S)}),F(l);var E=V(l,2),D=z(E),O=z(D),k=V(z(O)),A=z(k);F(k),F(O);var ee=V(O,2);Y(ee,20,()=>[`AA`,`AAA`],e=>e,(e,t)=>{var n=cm(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${U(f)===t?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(r,t)}),W(`click`,n,()=>{R(f,t,!0)}),K(e,n)}),F(ee),F(D);var te=V(D,2),j=e=>{K(e,lm())},M=e=>{var t=um(),n=z(t);F(t),H(()=>q(n,`Already passes ${U(f)??``}. 🎉`)),K(e,t)},ne=e=>{var t=dm(),n=z(t),r=V(n,2),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o),F(r);var c=V(r,2);F(t),H((e,t)=>{Z(n,e),q(a,U(C).value),q(s,`→ ${t??``}:1 (${U(f)??``} ✓)`)},[()=>`background:${b(U(C).value)}`,()=>U(C).ratio.toFixed(2)]),W(`click`,c,T),K(e,t)},re=e=>{var t=fm(),n=z(t);F(t),H(()=>q(n,`No lightness of this hue reaches ${U(f)??``} on this background — try a different background or hue.`)),K(e,t)};J(te,e=>{U(p).editKey?U(_)!==null&&U(_)>=(U(f)===`AAA`?7:4.5)?e(M,1):U(C)?e(ne,2):e(re,-1):e(j)}),F(E),H((e,t,n)=>{Z(h,e),Z(y,t),q(A,`(for ${n??``} mode)`)},[()=>`background:${b(U(m).expr)}`,()=>`color:${b(U(p).expr)}`,()=>ac()]),ji(i,()=>U(u),e=>R(u,e)),W(`click`,a,v),ji(c,()=>U(d),e=>R(d,e)),K(e,t)};J(ee,e=>{U(x)&&e(te)}),F(D);var j=V(D,4),M=z(j),ne=V(z(M),2),re=z(ne,!0);F(ne),F(M);var ie=V(M,2),ae=e=>{var t=vm(),n=V(B(t),2),r=z(n),i=z(r),a=z(i);Y(V(z(a)),17,()=>l,e=>e.label,(e,t)=>{var n=mm(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(a),F(i);var o=V(i);Y(o,21,()=>c,e=>e.label,(e,t)=>{var n=_m(),r=z(n),i=z(r,!0);F(r),Y(V(r),17,()=>l,e=>e.label,(e,n)=>{let r=I(()=>h(U(t).expr,U(n).expr));var i=$r(),a=B(i),o=e=>{let i=I(()=>g(U(r)));var a=hm(),o=z(a),s=z(o,!0);F(o),F(a),H((e,t)=>{Q(o,`title`,e),X(o,1,`w-full px-1.5 py-1 rounded font-mono font-bold cursor-pointer ${U(i).cls}`),q(s,t)},[()=>`${U(t).label} on ${U(n).label} — ${U(r).toFixed(2)}:1`,()=>U(r).toFixed(1)]),W(`click`,o,()=>y(U(t).expr,U(n).expr)),K(e,a)},s=e=>{K(e,gm())};J(a,e=>{U(r)===null?e(s,-1):e(o)}),K(e,i)}),F(n),H(()=>q(i,U(t).label)),K(e,n)}),F(o),F(r),F(n),K(e,t)};J(ie,e=>{U(S)&&e(ae)}),F(j),F(E),H(()=>{Q(O,`aria-expanded`,U(x)),q(A,U(x)?`▲`:`▼`),Q(M,`aria-expanded`,U(S)),q(re,U(S)?`▲`:`▼`)}),W(`click`,O,()=>{R(x,!U(x))}),W(`click`,M,()=>{R(S,!U(S))}),K(e,E),Ge()}Ur([`click`]);var xm=G(`<div class="h-full overflow-y-auto"><!></div>`),Sm=G(`<span class="ml-0.5 text-[8px] bg-indigo-600 text-white rounded-full px-1.5 py-0.5 leading-none font-black"> </span>`),Cm=G(`<div class="flex flex-col h-full min-h-0"><div class="flex-1 min-h-0 overflow-hidden"><!></div> <div class="shrink-0 border-t border-white/8 bg-[#0a0a10] flex"><button><!> Controls</button> <div class="w-px bg-white/8"></div> <button><!> All tokens <!></button></div></div>`);function wm(e,t){We(t,!0);let n=new Set([`home`,`themes`,`wcag`,`setup`,`cheatsheet`]),r=L(`controls`);On(()=>{t.domain,R(r,`controls`)});let i=I(()=>Tc[t.domain]??[t.domain]),a=I(()=>t.tokens.filter(e=>Ec(e.name)===t.domain&&e.name in t.overrides).length);var o=$r(),s=B(o),c=e=>{var n=$r(),r=B(n),i=e=>{Wc(e,{get overrides(){return t.overrides},get onSelect(){return t.onSelectDomain},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},a=e=>{mp(e,{get overrides(){return t.overrides},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},o=e=>{bm(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onBulkChange(){return t.onBulkChange}})},s=e=>{vp(e,{get overrides(){return t.overrides}})},c=e=>{Pp(e,{})};J(r,e=>{t.domain===`home`?e(i):t.domain===`themes`?e(a,1):t.domain===`wcag`?e(o,2):t.domain===`setup`?e(s,3):t.domain===`cheatsheet`&&e(c,4)}),K(e,n)},l=I(()=>n.has(t.domain)),u=e=>{var n=Cm(),o=z(n),s=z(o),c=e=>{var n=xm(),r=z(n),i=e=>{uu(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange},get onSelectDomain(){return t.onSelectDomain}})},a=e=>{$u(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},o=e=>{ad(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},s=e=>{Td(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},c=e=>{Bd(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},l=e=>{Jd(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},u=e=>{df(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},d=e=>{wf(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},f=e=>{If(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},p=e=>{ap(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},m=e=>{Yp(e,{get domain(){return t.domain},get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(r,e=>{t.domain===`colors`?e(i):t.domain===`typography`?e(a,1):t.domain===`spacing`?e(o,2):t.domain===`layout`?e(s,3):t.domain===`borders`?e(c,4):t.domain===`shadows`?e(l,5):t.domain===`motion`?e(u,6):t.domain===`effects`?e(d,7):t.domain===`macros`?e(f,8):t.domain===`misc`?e(p,9):e(m,-1)}),F(n),K(e,n)},l=e=>{im(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get patterns(){return U(i)},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(s,e=>{U(r)===`controls`?e(c):e(l,-1)}),F(o);var u=V(o,2),d=z(u);Ba(z(d),{class:`w-3 h-3`}),Ne(),F(d);var f=V(d,4),p=z(f);Da(p,{class:`w-3 h-3`});var m=V(p,2),h=e=>{var t=Sm(),n=z(t,!0);F(t),H(()=>q(n,U(a))),K(e,t)};J(m,e=>{U(a)>0&&e(h)}),F(f),F(u),F(n),H(()=>{X(d,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`controls`?`text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-300`}`),X(f,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`tokens`?`text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-300`}`)}),W(`click`,d,()=>{R(r,`controls`)}),W(`click`,f,()=>{R(r,`tokens`)}),K(e,n)};J(s,e=>{U(l)?e(c):e(u,-1)}),K(e,o),Ge()}Ur([`click`]);var Tm=G(`<div class="px-4 py-8 text-center text-[11px] text-slate-600"> </div>`),Em=G(`<div class="px-4 py-8 text-center text-[11px] text-slate-600">Type to search tokens by name or description</div>`),Dm=G(`<span class="shrink-0 text-[8px] font-bold text-indigo-400 bg-indigo-500/15 border border-indigo-500/25 rounded px-1 py-0.5">overridden</span>`),Om=G(`<div class="text-[10px] text-slate-600 truncate mt-0.5"> </div>`),km=G(`<button><div class="flex-1 min-w-0"><div class="flex items-center gap-2"><span class="text-[11px] font-mono text-slate-200 truncate"> </span> <!></div> <!></div> <div class="flex items-center gap-2 shrink-0"><span class="text-[9px] text-slate-600 font-mono truncate max-w-[100px]"> </span> <span class="text-[9px] font-bold text-slate-500 bg-white/5 rounded px-1.5 py-0.5"> </span></div></button>`),Am=G(`<div class="px-4 py-2 border-t border-white/6 flex items-center gap-3 text-[9px] text-slate-600"><span><kbd class="font-mono border border-white/10 rounded px-1">↑↓</kbd> navigate</span> <span><kbd class="font-mono border border-white/10 rounded px-1">↵</kbd> open panel</span> <span><kbd class="font-mono border border-white/10 rounded px-1">Esc</kbd> close</span></div>`),jm=G(`<div class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-start justify-center pt-[15vh]" role="dialog" aria-modal="true" aria-label="Token search" tabindex="-1"><div class="w-[560px] max-w-[95vw] bg-[#111118] border border-white/12 rounded-2xl shadow-2xl overflow-hidden"><div class="flex items-center gap-3 px-4 py-3 border-b border-white/8"><svg class="w-4 h-4 text-slate-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg> <input placeholder="Search tokens… (e.g. radius, primary, duration)" class="flex-1 bg-transparent text-[13px] text-slate-100 placeholder-slate-600 outline-none"/> <kbd class="text-[9px] font-mono text-slate-600 border border-white/10 rounded px-1.5 py-0.5 shrink-0">Esc</kbd></div> <div class="max-h-[360px] overflow-y-auto"><!></div> <!></div></div>`);function Mm(e,t){We(t,!0);let n=L(``),r=L(0),i=L(null),a={colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`},o=I(()=>(()=>{let e=U(n).trim().toLowerCase();if(!e)return[];let r=[];for(let n of t.tokens){if(n.tier===`INTERNAL`)continue;let i=n.name.toLowerCase().includes(e),a=n.description?.toLowerCase().includes(e)??!1;if((i||a)&&(r.push({token:n,domain:Ec(n.name),overridden:n.name in t.overrides}),r.length>=40))break}return r})());On(()=>{U(n),R(r,0)}),On(()=>{U(i)&&U(i).focus()});function s(e){t.onNavigate(e),t.onClose()}function c(e){if(e.key===`Escape`){e.preventDefault(),t.onClose();return}if(U(o).length===0&&(e.key===`ArrowDown`||e.key===`ArrowUp`)){e.preventDefault(),R(r,0);return}if(e.key===`ArrowDown`){e.preventDefault(),R(r,Math.min(U(r)+1,U(o).length-1),!0);return}if(e.key===`ArrowUp`){e.preventDefault(),R(r,Math.max(U(r)-1,0),!0);return}e.key===`Enter`&&U(o)[U(r)]&&(e.preventDefault(),s(U(o)[U(r)].domain))}var l=jm(),u=z(l),d=z(u),f=V(z(d),2);Hi(f),ea(f,e=>R(i,e),()=>U(i)),Ne(2),F(d);var p=V(d,2),m=z(p),h=e=>{var t=Tm(),r=z(t);F(t),H(()=>q(r,`No tokens matching "${U(n)??``}"`)),K(e,t)},g=I(()=>U(n).trim()&&U(o).length===0),_=e=>{K(e,Em())},v=I(()=>!U(n).trim()),y=e=>{var n=$r();Y(B(n),19,()=>U(o),e=>e.token.name,(e,n,i)=>{var o=km(),c=z(o),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{K(e,Dm())};J(f,e=>{U(n).overridden&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=Om(),r=z(t,!0);F(t),H(()=>q(r,U(n).token.description)),K(e,t)};J(m,e=>{U(n).token.description&&e(h)}),F(c);var g=V(c,2),_=z(g),v=z(_,!0);F(_);var y=V(_,2),b=z(y,!0);F(y),F(g),F(o),H(()=>{X(o,1,`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${U(r)===U(i)?`bg-indigo-500/15`:`hover:bg-white/4`}`),q(d,U(n).token.name),q(v,U(n).overridden?t.overrides[U(n).token.name]:U(n).token.value),q(b,a[U(n).domain]??U(n).domain)}),Hr(`mouseenter`,o,()=>{R(r,U(i),!0)}),W(`click`,o,()=>s(U(n).domain)),K(e,o)}),K(e,n)};J(m,e=>{U(g)?e(h):U(v)?e(_,1):e(y,-1)}),F(p);var b=V(p,2),x=e=>{K(e,Am())};J(b,e=>{U(o).length>0&&e(x)}),F(u),F(l),W(`mousedown`,l,e=>{e.target===e.currentTarget&&t.onClose()}),W(`keydown`,f,c),Xi(f,()=>U(n),e=>R(n,e)),K(e,l),Ge()}Ur([`mousedown`,`keydown`,`click`]);var Nm=G(`<span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[8px] font-black"> </span>`),Pm=G(`<button><!> <!></button>`),Fm=G(`<button data-testid="reset-category" class="flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[9px] font-bold text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 transition-colors cursor-pointer shrink-0"><!> </button>`),Im=G(`<div><!> <div class="md:hidden flex items-stretch border-b border-white/8 bg-[#0d0d14] shrink-0"><!> <!></div> <div class="flex flex-1 min-h-0"><div><!></div> <div><div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0 gap-2"><span data-testid="panel-heading" class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1"> </span> <!></div> <div class="flex-1 min-h-0 flex flex-col overflow-hidden"><!></div></div> <div><!></div></div> <!> <!></div>`);function Lm(e,t){We(t,!0);let n=(e,t=f,n=f,r=f)=>{var i=Pm(),a=z(i);_i(a,n,(e,t)=>{t(e,{class:`w-3.5 h-3.5`})});var o=V(a),s=V(o),c=e=>{var t=Nm(),n=z(t,!0);F(t),H(()=>q(n,U(v)>9?`9+`:U(v))),K(e,t)};J(s,e=>{t()===`preview`&&U(v)>0&&e(c)}),F(i),H(()=>{Q(i,`aria-pressed`,U(p)===t()),X(i,1,`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${U(p)===t()?`text-indigo-300 bg-indigo-500/10`:`text-slate-500 hover:text-slate-300`}`),q(o,` ${r()??``} `)}),W(`click`,i,()=>{R(p,t(),!0)}),K(e,i)},r=bp.tokens??bp,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 a(e){let t={};for(let n of Object.keys(e)){let e=Ec(n);t[e]=(t[e]??0)+1}return t}let o=Hs(),s=L(nn(Us())),c=L(nn([])),l=L(nn([])),u=L(`home`),d=L(!1),p=L(`controls`),m=L(`light`),h=L(`fluid`),g=L(`normal`),_=L(`marketing`),v=I(()=>Object.keys(U(s)).length),y=I(()=>a(U(s))),b=I(()=>Object.keys(U(s)).filter(e=>Ec(e)===U(u))),x=I(()=>U(b).length),S=I(()=>U(c).length>0),C=I(()=>U(l).length>0);function w(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let T=L(nn(wr(()=>({...U(s)})))),E=L(`idle`),D=I(()=>!w(U(s),U(T))),O=null;On(()=>{Ws(U(s))});function k(e){let t=U(s),n=typeof e==`function`?e(t):e;w(t,n)||(R(c,[...U(c).slice(-49),t],!0),R(l,[],!0),U(E)===`saved`&&R(E,`idle`)),R(s,n,!0)}async function A(){if(!U(D)||U(E)===`saving`)return;let e={...U(s)};R(E,`saving`);try{await qs(U(s)),w(U(s),e)?(R(T,e,!0),R(E,`saved`),O&&clearTimeout(O),O=setTimeout(()=>{U(E)===`saved`&&R(E,`idle`),O=null},2e3)):R(E,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(E,`idle`)}}function ee(e,t){k(n=>({...n,[e]:t}))}function te(e){k(t=>{let n={...t};return delete n[e],n})}function j(e){k(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function M(e){k({...e})}function ne(){k({})}function re(){let e={};for(let t of U(b))e[t]=null;j(e)}function ie(){if(U(c).length===0)return;let e=U(c)[U(c).length-1],t=U(s);R(c,U(c).slice(0,-1),!0),R(l,[t,...U(l)],!0),R(s,e,!0)}function ae(){if(U(l).length===0)return;let e=U(l)[0],t=U(s);R(l,U(l).slice(1),!0),R(c,[...U(c),t],!0),R(s,e,!0)}function oe(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);if(typeof e==`object`&&e&&!Array.isArray(e)){let t=Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e)));Object.keys(t).length>0&&k(t)}}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length>0&&k(t=>({...t,...e}))}},n.readAsText(t)},e.click()}function se(){let e=Cs(U(s),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}ca(()=>{let e=e=>{(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key===`z`&&(e.preventDefault(),ie()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&e.key===`z`||e.key===`y`)&&(e.preventDefault(),ae()),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key.toLowerCase()===`s`&&(e.preventDefault(),A()),(e.ctrlKey||e.metaKey)&&!e.repeat&&e.key.toLowerCase()===`k`&&(e.preventDefault(),R(d,!U(d)))};return window.addEventListener(`keydown`,e),()=>{window.removeEventListener(`keydown`,e),O&&clearTimeout(O)}});var N=Im(),ce=z(N);oo(ce,{get overridesCount(){return U(v)},get canUndo(){return U(S)},get canRedo(){return U(C)},get hasPendingChanges(){return U(D)},get saveState(){return U(E)},onUndo:ie,onRedo:ae,onResetAll:ne,onImport:oe,onExport:se,onSave:A});var le=V(ce,2),ue=z(le);n(ue,()=>`controls`,()=>Ba,()=>`Controls`),n(V(ue,2),()=>`preview`,()=>Ca,()=>`Preview`),F(le);var de=V(le,2),fe=z(de);uo(z(fe),{get activeId(){return U(u)},onSelect:e=>{R(u,e,!0)},get overridesByDomain(){return U(y)}}),F(fe);var pe=V(fe,2),me=z(pe),he=z(me),ge=z(he,!0);F(he);var _e=V(he,2),ve=e=>{var t=Fm(),n=z(t);Fa(n,{class:`w-3 h-3`});var r=V(n);F(t),H(()=>{Q(t,`title`,`Reset ${U(x)} override${U(x)===1?``:`s`} in ${i[U(u)]??U(u)}`),q(r,` Reset ${U(x)??``}`)}),W(`click`,t,re),K(e,t)};J(_e,e=>{U(x)>0&&e(ve)}),F(me);var ye=V(me,2);wm(z(ye),{get domain(){return U(u)},get tokens(){return r},get overrides(){return U(s)},onSet:ee,onReset:te,onBulkChange:j,onApplyTheme:M,onSelectDomain:e=>{R(u,e,!0)},onResetAll:ne}),F(ye),F(pe);var be=V(pe,2);wc(z(be),{get overrides(){return U(s)},get previewTheme(){return U(m)},get previewWidth(){return U(h)},get previewMotion(){return U(g)},get previewTemplate(){return U(_)},onThemeChange:e=>{R(m,e,!0)},onWidthChange:e=>{R(h,e,!0)},onMotionChange:e=>{R(g,e,!0)},onTemplateChange:e=>{R(_,e,!0)}}),F(be),F(de);var xe=V(de,2);{let e=I(()=>i[U(u)]??U(u));mo(xe,{get overridesCount(){return U(v)},get domain(){return U(e)}})}var Se=V(xe,2),Ce=e=>{Mm(e,{get tokens(){return r},get overrides(){return U(s)},onNavigate:e=>{R(u,e,!0)},onClose:()=>{R(d,!1)}})};J(Se,e=>{U(d)&&e(Ce)}),F(N),H(()=>{X(N,1,`${o?`w-full h-full`:`w-screen h-screen`} flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans`),X(fe,1,`shrink-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),X(pe,1,`flex-1 min-w-0 md:flex-none md:w-[360px] bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),q(ge,i[U(u)]??U(u)),X(be,1,`flex-1 flex-col min-h-0 min-w-0 ${U(p)===`controls`?`hidden md:flex`:`flex`}`)}),K(e,N),Ge()}Ur([`click`]);var Rm=document.getElementById(`app`)??document.getElementById(`slashed-admin-app`);Rm&&(Rm.innerHTML=``,ei(Lm,{target:Rm}));var zm=G(`<button aria-label="Open SLASHED token editor" class="fixed right-0 z-[99998] pointer-events-auto bg-indigo-600 hover:bg-indigo-500 text-white shadow-xl flex flex-col items-center justify-center gap-1 px-1.5 py-3 rounded-l-xl transition-colors cursor-pointer" style="top: calc(var(--wp-admin--admin-bar--height, 32px) + 16px);"><span class="text-sm font-black leading-none select-none">/</span> <!></button>`),Bm=G(`<span class="shrink-0 text-[9px] bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 font-bold px-1.5 py-0.5 rounded-full font-mono leading-none"> </span>`),Vm=G(`<div class="absolute inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="reset-confirm-title" tabindex="-1"><div class="bg-[#1a1a2e] border border-white/10 rounded-xl p-5 mx-4 shadow-2xl w-full max-w-[320px]"><h3 id="reset-confirm-title" class="text-white font-bold text-sm mb-2">Reset all overrides?</h3> <p class="text-slate-400 text-xs mb-4"> </p> <div class="flex gap-2 justify-end"><button class="px-3 py-1.5 text-xs rounded-lg bg-white/8 text-slate-300 hover:bg-white/12 transition-colors cursor-pointer">Cancel</button> <button class="px-3 py-1.5 text-xs rounded-lg bg-rose-600 hover:bg-rose-500 text-white font-bold transition-colors cursor-pointer">Reset all</button></div></div></div>`),Hm=G(`<!> <div><div class="h-10 bg-[#0d0d14] border-b border-white/8 flex items-center px-2 gap-1.5 shrink-0"><div class="w-6 h-6 bg-indigo-600 rounded-lg flex items-center justify-center text-white font-black text-sm leading-none shrink-0 shadow-lg shadow-indigo-600/30 select-none">/</div> <span class="text-[10px] font-bold text-white tracking-tight shrink-0">SLASHED</span> <span class="text-[9px] text-slate-500 font-mono uppercase tracking-widest truncate min-w-0"> </span> <!> <div class="flex-1 min-w-0"></div> <button><!></button> <button title="Undo (Ctrl+Z)" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <button title="Redo (Ctrl+Shift+Z)" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <div class="w-px h-3.5 bg-white/10 mx-0.5 shrink-0"></div> <button title="Import CSS / JSON" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer shrink-0"><!></button> <button title="Export CSS" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <button title="Reset all overrides" class="p-1 rounded text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <div class="w-px h-3.5 bg-white/10 mx-0.5 shrink-0"></div> <button title="Collapse panel" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer shrink-0"><!></button></div> <div class="flex flex-1 min-h-0"><!> <div class="flex-1 bg-[#0c0c15] flex flex-col min-h-0"><div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0"><span class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1"> </span></div> <div class="flex-1 min-h-0 flex flex-col overflow-hidden"><!></div></div></div> <!> <!></div>`,1);function Um(e,t){We(t,!0);let n=bp.tokens??bp,r=`slashed-overlay/open`,i=`slashed-overlay/domain`,a={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 o(e){let t={};for(let n of Object.keys(e)){let e=Ec(n);t[e]=(t[e]??0)+1}return t}function s(e,t){try{let n=localStorage.getItem(e);return n===null?t:n!==`false`}catch{return t}}function c(e,t){try{return localStorage.getItem(e)??t}catch{return t}}let l=L(nn(s(r,!0))),u=L(nn(typeof window<`u`?window.matchMedia(`(max-width: 768px)`).matches:!1)),d=L(nn(Us())),f=L(nn([])),p=L(nn([])),m=L(nn(c(i,`home`))),h=L(!1),g=L(!1),_=L(null),v=L(null);On(()=>{U(g)&&xr().then(()=>U(_)?.focus())});let y=I(()=>Object.keys(U(d)).length),b=I(()=>o(U(d))),x=I(()=>U(f).length>0),S=I(()=>U(p).length>0);function C(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let w=L(nn(wr(()=>({...U(d)})))),T=L(`idle`),E=I(()=>!C(U(d),U(w))),D=null;function O(){let e=document.getElementById(`slashed-frontend-overlay`);if(!e)return;let t=`var(--wp-admin--admin-bar--height, 32px)`;e.style.position=`fixed`,e.style.right=`0`,e.style.zIndex=`99998`,e.style.pointerEvents=`auto`,U(l)?(e.style.top=t,e.style.width=U(u)?`100vw`:`420px`,e.style.height=`calc(100vh - ${t})`):(e.style.top=`calc(${t} + 16px)`,e.style.width=`40px`,e.style.height=`64px`)}On(()=>{Ws(U(d)),ic(document)}),On(()=>{!U(u)&&U(l)?document.documentElement.classList.add(`sf-panel-active`):document.documentElement.classList.remove(`sf-panel-active`)}),On(()=>{O()}),On(()=>{try{localStorage.setItem(r,String(U(l)))}catch{}}),On(()=>{try{localStorage.setItem(i,U(m))}catch{}});function k(){R(l,!U(l))}function A(e){let t=U(d),n=typeof e==`function`?e(t):e;C(t,n)||(R(f,[...U(f).slice(-49),t],!0),R(p,[],!0),U(T)===`saved`&&R(T,`idle`)),R(d,n,!0)}async function ee(){if(!U(E)||U(T)===`saving`)return;let e={...U(d)};R(T,`saving`);try{await qs(U(d)),C(U(d),e)?(R(w,e,!0),R(T,`saved`),D&&clearTimeout(D),D=setTimeout(()=>{U(T)===`saved`&&R(T,`idle`),D=null},2e3)):R(T,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(T,`idle`)}}function te(e,t){A(n=>({...n,[e]:t}))}function j(e){A(t=>{let n={...t};return delete n[e],n})}function M(e){A(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function ne(e){A({...e})}function re(){R(g,!0)}function ie(){R(g,!1),A({})}function ae(){R(g,!1)}function oe(){if(!U(f).length)return;let e=U(f)[U(f).length-1];R(p,[U(d),...U(p)],!0),R(f,U(f).slice(0,-1),!0),R(d,e,!0)}function se(){if(!U(p).length)return;let e=U(p)[0];R(f,[...U(f),U(d)],!0),R(p,U(p).slice(1),!0),R(d,e,!0)}function N(){let e=Cs(U(d),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}function ce(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);typeof e==`object`&&e&&!Array.isArray(e)&&A(Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e))))}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length&&A(t=>({...t,...e}))}},n.readAsText(t)},e.click()}ca(()=>{let 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);let t=window.matchMedia(`(max-width: 768px)`),n=e=>{R(u,e.matches,!0)};t.addEventListener(`change`,n);let r=e=>{let t=e.key.toLowerCase();U(l)&&((e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`z`&&(e.preventDefault(),oe()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&t===`z`||t===`y`)&&(e.preventDefault(),se()),(e.ctrlKey||e.metaKey)&&!e.repeat&&t===`k`&&(e.preventDefault(),R(h,!U(h))),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`s`&&(e.preventDefault(),ee()))},i=()=>k();return window.addEventListener(`keydown`,r),document.addEventListener(`slashed:toggle-overlay`,i),()=>{e.remove(),document.documentElement.classList.remove(`sf-panel-active`),t.removeEventListener(`change`,n),window.removeEventListener(`keydown`,r),document.removeEventListener(`slashed:toggle-overlay`,i),D&&clearTimeout(D)}});var le=Hm(),ue=B(le),de=e=>{var t=zm();va(V(z(t),2),{class:`w-3 h-3 opacity-70 rotate-180`}),F(t),W(`click`,t,k),K(e,t)};J(ue,e=>{U(l)||e(de)});var fe=V(ue,2);let pe,me;var he=z(fe),ge=V(z(he),4),_e=z(ge,!0);F(ge);var ve=V(ge,2),ye=e=>{var t=Bm(),n=z(t,!0);F(t),H(()=>q(n,U(y))),K(e,t)};J(ve,e=>{U(y)>0&&e(ye)});var be=V(ve,4),xe=z(be),Se=e=>{Qa(e,{class:`w-3 h-3 animate-spin`})},Ce=e=>{_a(e,{class:`w-3 h-3`})},we=e=>{La(e,{class:`w-3 h-3`})};J(xe,e=>{U(T)===`saving`?e(Se):U(T)===`saved`?e(Ce,1):e(we,-1)}),F(be);var Te=V(be,2);Ya(z(Te),{class:`w-3 h-3`}),F(Te);var Ee=V(Te,2);Na(z(Ee),{class:`w-3 h-3`}),F(Ee);var De=V(Ee,4);wa(z(De),{class:`w-3 h-3`}),F(De);var Oe=V(De,2);xa(z(Oe),{class:`w-3 h-3`}),F(Oe);var P=V(Oe,2);qa(z(P),{class:`w-3 h-3`}),F(P);var ke=V(P,4);va(z(ke),{class:`w-3 h-3`}),F(ke),F(he);var Ae=V(he,2),je=z(Ae);uo(je,{get activeId(){return U(m)},onSelect:e=>{R(m,e,!0)},get overridesByDomain(){return U(b)}});var Me=V(je,2),Ne=z(Me),Pe=z(Ne),Fe=z(Pe,!0);F(Pe),F(Ne);var Ie=V(Ne,2);wm(z(Ie),{get domain(){return U(m)},get tokens(){return n},get overrides(){return U(d)},onSet:te,onReset:j,onBulkChange:M,onApplyTheme:ne,onSelectDomain:e=>{R(m,e,!0)},onResetAll:re}),F(Ie),F(Me),F(Ae);var Le=V(Ae,2),Re=e=>{Mm(e,{get tokens(){return n},get overrides(){return U(d)},onNavigate:e=>{R(m,e,!0)},onClose:()=>{R(h,!1)}})};J(Le,e=>{U(h)&&e(Re)});var ze=V(Le,2),Be=e=>{var t=Vm(),n=z(t),r=V(z(n),2),i=z(r);F(r);var a=V(r,2),o=z(a);ea(o,e=>R(_,e),()=>U(_));var s=V(o,2);ea(s,e=>R(v,e),()=>U(v)),F(a),F(n),F(t),H(()=>q(i,`This will clear all ${U(y)??``} customisation${U(y)===1?``:`s`}.
-          You can still undo this before saving.`)),W(`keydown`,t,e=>{e.key===`Escape`&&(e.stopPropagation(),ae()),e.key===`Tab`&&(e.preventDefault(),document.activeElement===U(_)?U(v)?.focus():U(_)?.focus())}),W(`click`,o,ae),W(`click`,s,ie),K(e,t)};J(ze,e=>{U(g)&&e(Be)}),F(fe),H(e=>{pe=X(fe,1,`fixed right-0 z-[99998] 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":!U(l),"translate-x-0":U(l),"pointer-events-none":!U(l)}),me=Z(fe,`top: var(--wp-admin--admin-bar--height, 32px); width: ${U(u)?`100vw`:`420px`}; height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));`,me,{visibility:U(l)?void 0:`hidden`}),Q(fe,`aria-hidden`,!U(l)),fe.inert=!U(l)||void 0,q(_e,a[U(m)]??U(m)),be.disabled=!U(E)||U(T)===`saving`,Q(be,`title`,U(E)?`Save changes (Ctrl+S)`:`No unsaved changes`),Q(be,`aria-label`,U(T)===`saving`?`Saving changes`:U(E)?`Save changes`:`No unsaved changes`),X(be,1,e),Te.disabled=!U(x),Ee.disabled=!U(S),Oe.disabled=U(y)===0,P.disabled=U(y)===0,q(Fe,a[U(m)]??U(m))},[()=>Si([`p-1 rounded transition-colors cursor-pointer shrink-0 disabled:pointer-events-none`,U(T)===`saved`?`text-emerald-300`:U(E)?`text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10`:`text-slate-500 opacity-40`].join(` `))]),W(`click`,be,ee),W(`click`,Te,oe),W(`click`,Ee,se),W(`click`,De,ce),W(`click`,Oe,N),W(`click`,P,re),W(`click`,ke,k),K(e,le),Ge()}Ur([`click`,`keydown`]);function Wm(){let e=document.getElementById(`slashed-frontend-overlay`);if(!e||e.shadowRoot)return;let t=e.attachShadow({mode:`open`}),n=document.createElement(`div`);t.appendChild(n);let r=!1,i=()=>{r||(ei(Um,{target:n}),r=!0,e.setAttribute(`data-slashed-ready`,``))},a=window.slashedApp?.cssUrl;if(a){let e=document.createElement(`link`);e.rel=`stylesheet`,e.href=a;let n=setTimeout(i,5e3),r=()=>{clearTimeout(n),i()};e.addEventListener(`load`,r),e.addEventListener(`error`,r),t.appendChild(e)}else i()}document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,Wm):Wm();
+      itself and can't be shown in the static canvas.</p></div></div>`);function Gp(e,t){Ue(t,!0);let n=[{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`}],r=[{label:`Smooth`,value:`smooth`},{label:`Auto`,value:`auto`}],i=[{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 a(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let o=I(()=>a(t.overrides[`--sf-touch-target`],44,`px`)),s=I(()=>t.overrides[`--sf-scroll-behavior`]??`smooth`),c=I(()=>a(t.overrides[`--sf-z-base`],0)),l=I(()=>t.overrides[`--sf-caret-color`]??``),u=I(()=>a(t.overrides[`--sf-link-underline-offset`]?.replace(`em`,``),.15)),d=I(()=>t.overrides[`--sf-link-underline-thickness`]??`auto`),f=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`),p=L(!1),m=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1);function E(e){return a(t.overrides[e.token]?.replace(`rem`,``),e.default)}var D=Wp(),O=z(D),k=z(O),ee=V(z(k),2),te=z(ee,!0);F(ee),F(k);var ne=V(k,2),A=e=>{var n=Cp(),r=B(n);{let e=I(()=>`--sf-touch-target`in t.overrides);$(r,{label:`Min touch size`,get value(){return U(o)},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 U(e)},onChange:e=>t.onSet(`--sf-touch-target`,`${e}px`),onReset:()=>t.onReset(`--sf-touch-target`)})}var i=V(r,2),a=z(i),s=z(a);F(a),Me(2),F(i),H(()=>{Z(a,`width: ${U(o)}px; height: ${U(o)}px`),q(s,`${U(o)??``}px`)}),K(e,n)};J(ne,e=>{U(p)&&e(A)}),F(O);var j=V(O,4),M=z(j),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=Tp();Y(n,21,()=>r,e=>e.value,(e,n)=>{var r=wp(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(s)===U(n).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`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`smooth`?t.onReset(`--sf-scroll-behavior`):t.onSet(`--sf-scroll-behavior`,U(n).value)),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(m)&&e(oe)}),F(j);var se=V(j,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var r=Dp(),i=B(r);{let e=I(()=>`--sf-z-base`in t.overrides);$(i,{label:`Base offset`,get value(){return U(c)},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 U(e)},onChange:e=>t.onSet(`--sf-z-base`,String(e)),onReset:()=>t.onReset(`--sf-z-base`)})}var a=V(i,2);Y(a,21,()=>n,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=Ep(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c,!0);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H(e=>{X(a,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(r)?`bg-amber-400`:`bg-white/20`}`),q(s,U(n).label),q(l,U(n).note),q(d,e)},[()=>U(n).token.replace(`--sf-z-`,``)]),K(e,i)}),F(a),Me(2),K(e,r)};J(ue,e=>{U(g)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=Op(),r=z(n),i=V(z(r),2);{let e=I(()=>t.overrides[`--sf-color-selection-bg`]??``),n=I(()=>`--sf-color-selection-bg`in t.overrides);du(i,{token:`--sf-color-selection-bg`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-bg`,e),onReset:()=>t.onReset(`--sf-color-selection-bg`)})}F(r);var a=V(r,2),o=V(z(a),2);{let e=I(()=>t.overrides[`--sf-color-selection-text`]??``),n=I(()=>`--sf-color-selection-text`in t.overrides);du(o,{token:`--sf-color-selection-text`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-text`,e),onReset:()=>t.onReset(`--sf-color-selection-text`)})}F(a);var s=V(a,2),c=z(s);F(s),F(n),H(()=>Z(c,`--sf-color-selection-bg: ${t.overrides[`--sf-color-selection-bg`]??`#6366f1`}; --sf-color-selection-text: ${t.overrides[`--sf-color-selection-text`]??`#ffffff`}`)),K(e,n)};J(ge,e=>{U(_)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=kp(),r=B(n);Y(r,20,()=>[`solid`,`dashed`,`dotted`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`);var i=wp(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${U(r)===n?`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`}`),q(a,n)}),W(`click`,i,()=>n===`solid`?t.onReset(`--sf-focus-ring-style`):t.onSet(`--sf-focus-ring-style`,n)),K(e,i)}),F(r);var i=V(r,2),a=z(i),o=z(a);F(a),F(i),H(()=>{Z(a,`outline: 2px ${U(f)} ${t.overrides[`--sf-focus-ring-color`]||`oklch(0.7 0.2 235)`}; outline-offset: 2px`),q(o,`Focus ring · ${U(f)??``}`)}),K(e,n)};J(Se,e=>{U(v)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=jp(),r=V(B(n),2);Y(r,21,()=>i,e=>e.token,(e,n)=>{let r=I(()=>E(U(n)));{let i=I(()=>`${U(n).token} — component size step ${U(n).label}`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:5,step:.05,unit:`rem`,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token)})}}),F(r);var a=V(r,2);Y(a,21,()=>i,e=>e.token,(e,t)=>{let n=I(()=>E(U(t)));var r=Ap(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(e=>{Z(i,e),q(o,U(t).label)},[()=>`height: ${Math.min(U(n)*14,64)}px`]),K(e,r)}),F(a),K(e,n)};J(P,e=>{U(y)&&e(Oe)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Ne=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=Np(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-caret-color`in t.overrides);du(i,{token:`--sf-caret-color`,get value(){return U(l)},placeholder:`default (action color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-caret-color`,e),onReset:()=>t.onReset(`--sf-caret-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-link-underline-offset`in t.overrides);$(a,{label:`Underline offset`,get value(){return U(u)},min:0,max:.5,step:.01,unit:`em`,help:`--sf-link-underline-offset — gap between text baseline and underline`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-link-underline-offset`,`${e}em`),onReset:()=>t.onReset(`--sf-link-underline-offset`)})}var o=V(a,2),s=z(o),c=V(z(s),2),f=e=>{var n=Mp();W(`click`,n,()=>t.onReset(`--sf-link-underline-thickness`)),K(e,n)};J(c,e=>{`--sf-link-underline-thickness`in t.overrides&&e(f)}),F(s);var p=V(s,2);Y(p,20,()=>[[`auto`,`auto`],[`1px`,`1px`],[`2px`,`2px`],[`3px`,`3px`]],([e,t])=>t,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1];var o=wp(),s=z(o,!0);F(o),H(()=>{X(o,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(d)===a()?`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`}`),q(s,i())}),W(`click`,o,()=>a()===`auto`?t.onReset(`--sf-link-underline-thickness`):t.onSet(`--sf-link-underline-thickness`,a())),K(e,o)}),F(p),F(o);var m=V(o,2),g=z(m),_=V(g,2),v=V(z(_));Me(),F(_),F(m),H(()=>{Z(g,`caret-color:${U(l)||`#6366f1`}`),Z(v,`text-decoration:underline;text-underline-offset:${U(u)}em;text-decoration-thickness:${U(d)}`)}),W(`click`,v,e=>e.preventDefault()),K(e,n)};J(Pe,e=>{U(b)&&e(Fe)}),F(ke);var Ie=V(ke,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=Pp(),r=V(B(n),2);Y(r,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}],e=>e.token,(e,n)=>{{let r=I(()=>a(t.overrides[n.token]?.replace(`em`,``),n.def)),i=I(()=>n.token in t.overrides);$(e,{get label(){return n.label},get value(){return U(r)},min:.5,max:6,step:.125,unit:`em`,get overridden(){return U(i)},onChange:e=>t.onSet(n.token,`${e}em`),onReset:()=>t.onReset(n.token)})}}),F(r);var i=V(r,2);{let e=I(()=>a(t.overrides[`--sf-icon-box-pad`]?.replace(`em`,``),.5)),n=I(()=>`--sf-icon-box-pad`in t.overrides);$(i,{label:`Box padding`,get value(){return U(e)},min:0,max:2,step:.125,unit:`em`,help:`--sf-icon-box-pad — padding around icon when using .sf-icon-box`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-icon-box-pad`,`${e}em`),onReset:()=>t.onReset(`--sf-icon-box-pad`)})}K(e,n)};J(Be,e=>{U(x)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=Lp(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`cover`,`contain`,`fill`,`none`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-object-fit`]??`cover`);var i=wp(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`cover`?t.onReset(`--sf-object-fit`):t.onSet(`--sf-object-fit`,n)),K(e,i)}),F(i);var a=V(i,2),o=e=>{var n=Fp();W(`click`,n,()=>t.onReset(`--sf-object-fit`)),K(e,n)};J(a,e=>{`--sf-object-fit`in t.overrides&&e(o)}),F(r);var s=V(r,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=Ip();W(`click`,n,()=>t.onReset(`--sf-object-position`)),K(e,n)};J(l,e=>{`--sf-object-position`in t.overrides&&e(u)}),F(s),H(()=>Bi(c,t.overrides[`--sf-object-position`]??``)),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-object-position`,n):t.onReset(`--sf-object-position`)}),K(e,n)};J(Je,e=>{U(S)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var n=zp(),r=V(B(n),2);Y(r,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)`}],e=>e.token,(e,n)=>{var r=Rp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Ip();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(et,e=>{U(w)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=Vp(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`a4`,`letter`,`legal`,`a3`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-print-page-size`]??`a4`);var i=wp(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`a4`?t.onReset(`--sf-print-page-size`):t.onSet(`--sf-print-page-size`,n)),K(e,i)}),F(i),F(r),Y(V(r,2),16,()=>[{label:`Base size`,token:`--sf-print-base-size`,placeholder:`11pt`},{label:`Page margin`,token:`--sf-print-page-margin`,placeholder:`2cm`}],e=>e.token,(e,n)=>{var r=Bp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Ip();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),K(e,n)};J(ot,e=>{U(C)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var n=Up(),r=V(B(n),2);Y(r,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`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??`0`);var i=Hp(),a=z(i),o=z(a);F(a);var s=V(a,2),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l);var d=V(l,2),f=e=>{var r=Ip();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(d,e=>{n.token in t.overrides&&e(f)}),F(i),H(()=>{Q(a,`aria-label`,n.label),Q(a,`aria-pressed`,U(r)===`1`),X(a,1,`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${U(r)===`1`?`bg-indigo-600`:`bg-white/10`}`),X(o,1,`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${U(r)===`1`?`translate-x-4`:`translate-x-0.5`}`),q(c,n.label),q(u,n.note)}),W(`click`,a,()=>U(r)===`1`?t.onReset(n.token):t.onSet(n.token,`1`)),K(e,i)}),F(r);var i=V(r,2),a=V(z(i),2);zi(a);var o=V(a,2),s=e=>{var n=Ip();W(`click`,n,()=>t.onReset(`--sf-field-required-marker`)),K(e,n)};J(o,e=>{`--sf-field-required-marker`in t.overrides&&e(s)}),F(i),H(()=>Bi(a,t.overrides[`--sf-field-required-marker`]??``)),W(`input`,a,e=>{let n=e.target.value;n?t.onSet(`--sf-field-required-marker`,n):t.onReset(`--sf-field-required-marker`)}),K(e,n)};J(ft,e=>{U(T)&&e(pt)}),F(ct),Me(4),F(D),H(()=>{Q(k,`aria-expanded`,U(p)),q(te,U(p)?`▲`:`▼`),Q(M,`aria-expanded`,U(m)),q(ie,U(m)?`▲`:`▼`),Q(N,`aria-expanded`,U(g)),q(le,U(g)?`▲`:`▼`),Q(pe,`aria-expanded`,U(_)),q(he,U(_)?`▲`:`▼`),Q(ye,`aria-expanded`,U(v)),q(xe,U(v)?`▲`:`▼`),Q(Te,`aria-expanded`,U(y)),q(De,U(y)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(b)),q(Ne,U(b)?`▲`:`▼`),Q(Le,`aria-expanded`,U(x)),q(ze,U(x)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(S)),q(qe,U(S)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(w)),q($e,U(w)?`▲`:`▼`),Q(rt,`aria-expanded`,U(C)),q(at,U(C)?`▲`:`▼`),Q(lt,`aria-expanded`,U(T)),q(dt,U(T)?`▲`:`▼`)}),W(`click`,k,()=>{R(p,!U(p))}),W(`click`,M,()=>{R(m,!U(m))}),W(`click`,N,()=>{R(g,!U(g))}),W(`click`,pe,()=>{R(_,!U(_))}),W(`click`,ye,()=>{R(v,!U(v))}),W(`click`,Te,()=>{R(y,!U(y))}),W(`click`,Ae,()=>{R(b,!U(b))}),W(`click`,Le,()=>{R(x,!U(x))}),W(`click`,Ge,()=>{R(S,!U(S))}),W(`click`,Ze,()=>{R(w,!U(w))}),W(`click`,rt,()=>{R(C,!U(C))}),W(`click`,lt,()=>{R(T,!U(T))}),K(e,D),We()}Br([`click`,`input`]);var Kp=G(`<div class="rounded-xl border border-dashed border-white/10 p-6 text-center"><p class="text-[11px] text-slate-500">No saved themes yet.</p> <p class="text-[10px] text-slate-600 mt-1">Configure your tokens, then save them above.</p></div>`),qp=G(`<div class="w-2.5 h-2.5 rounded-full border border-white/10 shrink-0"></div>`),Jp=G(`<div class="flex items-center gap-1 bg-white/4 rounded px-1.5 py-0.5"><!> <span class="text-[8px] font-mono text-slate-600"> </span></div>`),Yp=G(`<span class="text-[8px] text-slate-600 px-1.5 py-0.5"> </span>`),Xp=G(`<div class="px-4 pb-3 flex flex-wrap gap-1"><!> <!></div>`),Zp=G(`<div><div class="flex items-start gap-3 p-4"><span class="text-2xl leading-none shrink-0 mt-0.5"> </span> <div class="flex-1 min-w-0"><div class="text-[12px] font-bold text-slate-200 flex items-center gap-1.5"> <!></div> <div class="text-[10px] text-slate-500 mt-0.5 font-mono"> </div></div> <div class="flex items-center gap-1.5 shrink-0"><button class="px-3 py-1.5 rounded-lg text-[11px] font-bold bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/30 transition-all cursor-pointer">Apply</button> <button aria-label="Delete theme" class="p-1.5 rounded-lg border border-white/8 text-slate-500 hover:text-rose-400 hover:border-rose-500/30 transition-all cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"><!></button></div></div> <!></div>`),Qp=G(`<button class="w-full py-2 rounded-lg text-[11px] font-bold border border-rose-500/30 text-rose-400 hover:bg-rose-500/10 transition-all cursor-pointer">Reset all overrides</button>`),$p=G(`<div class="p-4 space-y-5 overflow-y-auto flex-1 h-full"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Themes</div> <p class="text-[11px] text-slate-400 leading-relaxed">Save your current configuration as a named theme, then re-apply it any time.
+    Themes are stored in this browser.</p> <div class="rounded-xl border border-white/8 bg-white/4 p-3 space-y-2"><div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Save current</div> <div class="flex items-center gap-2"><input type="text" placeholder="Theme name" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <button class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/30 transition-all cursor-pointer shrink-0 disabled:opacity-40 disabled:cursor-not-allowed"><!> Save</button></div> <p class="text-[9px] text-slate-600"><!></p></div> <div class="space-y-2"><!></div> <!></div>`);function em(e,t){Ue(t,!0);let n=L(nn(yc())),r=L(``),i=I(()=>Object.keys(t.overrides).length);function a(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let o=I(()=>U(n).find(e=>a(e.overrides,t.overrides))?.id??``);function s(){U(i)!==0&&(R(n,bc(U(r),t.overrides),!0),R(r,``))}function c(e){R(n,xc(e),!0)}var l=$p(),u=V(z(l),4),d=V(z(u),2),f=z(d);zi(f);var p=V(f,2);ro(z(p),{class:`w-3 h-3`}),Me(),F(p),F(d);var m=V(d,2),g=z(m),_=e=>{K(e,Yr(`No active overrides yet — adjust some tokens first.`))},v=e=>{var t=Yr();H(()=>q(t,`Captures all ${U(i)??``} active override${U(i)===1?``:`s`}.`)),K(e,t)};J(g,e=>{U(i)===0?e(_):e(v,-1)}),F(m),F(u);var y=V(u,2),b=z(y),x=e=>{K(e,Kp())},S=e=>{var r=Xr();Y(B(r),17,()=>U(n),e=>e.id,(e,n)=>{let r=I(()=>Object.keys(U(n).overrides).length);var i=Zp(),a=z(i),s=z(a),l=z(s,!0);F(s);var u=V(s,2),d=z(u),f=z(d),p=V(f),m=e=>{_a(e,{class:`w-3 h-3 text-indigo-400`})};J(p,e=>{U(o)===U(n).id&&e(m)}),F(d);var g=V(d,2),_=z(g);F(g),F(u);var v=V(u,2),y=z(v),b=V(y,2);wo(z(b),{class:`w-3.5 h-3.5`}),F(b),F(v),F(a);var x=V(a,2),S=e=>{var t=Xp(),i=z(t);Y(i,17,()=>Object.entries(U(n).overrides).slice(0,5),([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Jp(),o=z(a),s=e=>{var t=qp();let n;H(()=>n=Z(t,``,n,{background:i()})),K(e,t)},c=I(()=>r().includes(`color`)||r().includes(`source`));J(o,e=>{U(c)&&e(s)});var l=V(o,2),u=z(l,!0);F(l),F(a),H(e=>q(u,e),[()=>r().replace(`--sf-`,``)]),K(e,a)});var a=V(i,2),o=e=>{var t=Yp(),n=z(t);F(t),H(()=>q(n,`+${U(r)-5} more`)),K(e,t)};J(a,e=>{U(r)>5&&e(o)}),F(t),K(e,t)};J(x,e=>{U(r)>0&&e(S)}),F(i),H(()=>{X(i,1,`group rounded-xl border transition-all overflow-hidden ${U(o)===U(n).id?`border-indigo-500/40 bg-indigo-500/10`:`border-white/8 bg-white/4 hover:bg-white/6 hover:border-white/14`}`),q(l,U(n).icon),q(f,`${U(n).name??``} `),q(_,`${U(r)??``} override${U(r)===1?``:`s`}`)}),W(`click`,y,()=>t.onApplyTheme(U(n).overrides)),W(`click`,b,()=>c(U(n).id)),K(e,i)}),K(e,r)};J(b,e=>{U(n).length===0?e(x):e(S,-1)}),F(y);var C=V(y,2),w=e=>{var n=Qp();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(C,e=>{U(i)>0&&e(w)}),F(l),H(()=>p.disabled=U(i)===0),W(`keydown`,f,e=>{e.key===`Enter`&&s()}),qi(f,()=>U(r),e=>R(r,e)),W(`click`,p,s),K(e,l),We()}Br([`keydown`,`click`]);var tm=G(`<!> <span class="text-emerald-400">Link copied!</span>`,1),nm=G(`<!> Copy shareable link`,1),rm=G(`<div class="p-4 space-y-4 overflow-y-auto flex-1 h-full"><div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Export</div> <p class="text-[11px] text-slate-400 leading-relaxed"> </p></div> <button class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-white/8 bg-white/4 text-[11px] font-bold text-slate-300 hover:bg-white/8 hover:text-white transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"><!></button> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">CSS output</div> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5"><button>@layer</button> <button>:root</button></div></div> <div class="relative"><pre class="bg-[#06060a] border border-white/8 rounded-xl p-4 text-[10px] font-mono text-slate-300 overflow-x-auto max-h-80 whitespace-pre-wrap"> </pre> <div class="absolute top-2 right-2 flex gap-1"><button class="p-1.5 rounded-lg bg-white/5 hover:bg-white/12 text-slate-400 hover:text-white transition-all cursor-pointer border border-white/8" title="Copy to clipboard"><!></button> <button class="p-1.5 rounded-lg bg-white/5 hover:bg-white/12 text-slate-400 hover:text-white transition-all cursor-pointer border border-white/8" title="Download .css"><!></button></div></div> <button class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-white/8 bg-white/4 text-[10px] font-bold text-slate-400 hover:bg-white/8 hover:text-slate-200 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"><!> Download W3C Design Tokens (.json)</button> <div class="rounded-lg bg-indigo-500/8 border border-indigo-500/15 p-3 space-y-2"><div class="text-[10px] font-bold text-indigo-300">Usage</div> <div class="text-[10px] text-slate-400 leading-relaxed">Paste this CSS into your project after the SLASHED import.</div> <pre class="text-[9px] font-mono text-slate-500 bg-black/30 rounded p-2 overflow-x-auto"></pre></div></div>`);function im(e,t){Ue(t,!0);let n=L(`layer`),r=L(!1),i=L(!1),a=I(()=>cc(t.overrides,{mode:U(n),banner:!0})),o=I(()=>Object.keys(t.overrides).length);async function s(){try{await navigator.clipboard.writeText(U(a)),R(r,!0),setTimeout(()=>{R(r,!1)},2e3)}catch{}}async function c(){try{let e=fc(t.overrides);await navigator.clipboard.writeText(e),R(i,!0),setTimeout(()=>{R(i,!1)},2e3)}catch{}}function l(){let e=new Blob([U(a)],{type:`text/css`}),t=URL.createObjectURL(e),n=document.createElement(`a`);n.href=t,n.download=`slashed-overrides.css`,n.click(),URL.revokeObjectURL(t)}function u(e){return e.includes(`color`)||e.includes(`scrim-color`)||e.includes(`shadow-color`)?`color`:e.includes(`duration`)||e.includes(`delay`)||e.includes(`transition-duration`)?`duration`:e.includes(`radius`)||e.includes(`space`)||e.includes(`size`)||e.includes(`width`)||e.includes(`height`)||e.includes(`gap`)||e.includes(`blur`)||e.includes(`text-`)||e.includes(`leading`)||e.includes(`tracking`)?`dimension`:e.includes(`font-family`)||e.includes(`font-mono`)||e.includes(`font-body`)||e.includes(`font-heading`)||e.includes(`font-code`)?`fontFamily`:e.includes(`font-weight`)||e.includes(`weight`)?`fontWeight`:`string`}function d(){let e={};for(let[n,r]of Object.entries(t.overrides)){let t=n.replace(/^--sf-/,``).replace(/-/g,`.`);e[t]={$value:r,$type:u(n)}}let n=JSON.stringify({$schema:`https://design-tokens.github.io/community-group/format/`,...e},null,2),r=new Blob([n],{type:`application/json`}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=`slashed-tokens.w3c.json`,a.click(),URL.revokeObjectURL(i)}var f=rm(),p=z(f),m=V(z(p),2),h=z(m,!0);F(m),F(p);var g=V(p,2),_=z(g),v=e=>{var t=tm();_a(B(t),{class:`w-3 h-3 text-emerald-400`}),Me(2),K(e,t)},y=e=>{var t=nm();Fa(B(t),{class:`w-3 h-3`}),Me(),K(e,t)};J(_,e=>{U(i)?e(v):e(y,-1)}),F(g);var b=V(g,2),x=V(z(b),2),S=z(x),C=V(S,2);F(x),F(b);var w=V(b,2),T=z(w),E=z(T,!0);F(T);var D=V(T,2),O=z(D),k=z(O),ee=e=>{_a(e,{class:`w-3 h-3 text-emerald-400`})},te=e=>{Ca(e,{class:`w-3 h-3`})};J(k,e=>{U(r)?e(ee):e(te,-1)}),F(O);var ne=V(O,2);Ta(z(ne),{class:`w-3 h-3`}),F(ne),F(D),F(w);var A=V(w,2);Ta(z(A),{class:`w-3 h-3`}),Me(),F(A);var j=V(A,2),M=V(z(j),4);M.textContent=`@import 'slashed/slashed.full.css';
+@import './slashed-overrides.css';`,F(j),F(f),H(()=>{q(h,U(o)>0?`${U(o)} override${U(o)===1?``:`s`} ready to export.`:`No overrides yet. Customise tokens, then export.`),g.disabled=U(o)===0,X(S,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`layer`?`bg-indigo-600 text-white`:`text-slate-400 hover:text-slate-200`}`),X(C,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`root`?`bg-indigo-600 text-white`:`text-slate-400 hover:text-slate-200`}`),q(E,U(a)||`/* No overrides */`),A.disabled=U(o)===0}),W(`click`,g,c),W(`click`,S,()=>{R(n,`layer`)}),W(`click`,C,()=>{R(n,`root`)}),W(`click`,O,s),W(`click`,ne,l),W(`click`,A,d),K(e,f),We()}Br([`click`]);var am={_sync:{generatedBy:`configurator/scripts/sync-api.mjs`,source:`docs/api-index.json`},classes:[{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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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 <img class="sf-bg"> or as a wrapper with a nested > img / > video / > picture.`,optional:!1,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:!1,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:!1,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:!1,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:!1,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 <a>.`,optional:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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 <input>.`,optional:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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:!1,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 <html> (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration.`,optional:!1,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:!1,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 <body>.`,optional:!1,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:!1,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:!1,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:!0,layer:`slashed.themes`}]},om={_sync:{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}}},tokens:[{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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <em> inside body text (italic by default). Override to suppress italics if your typeface has no italic variant.`,value:`italic`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <strong> 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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <code> and <pre>. Usually slightly smaller than body text so monospace doesn't feel oversized.`,value:`0.875em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without <color> registration the browser cannot interpolate and transitions snap at 50%.`,value:`oklch(0.70 0.198 235)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <code> elements. Usually a subtle tint of the inset surface.`,value:`var(--sf-color-inset)`,aliasOf:`--sf-color-inset`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-danger.`,value:`oklch(0.71 0.198 12)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-info.`,value:`oklch(0.71 0.162 235)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <mark> highlights. Adapts automatically in dark mode.`,note:`Background color for highlighted <mark> elements.`,value:`oklch(from var(--sf-color-warning) l c h / 0.25)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <mark> elements.`,value:`inherit`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-neutral.`,value:`oklch(0.69 0.0225 260)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-primary.`,value:`oklch(0.715 0.243 264)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-secondary.`,value:`oklch(0.84 0.036 264)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-success.`,value:`oklch(0.70 0.144 145)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-tertiary.`,value:`oklch(0.74 0.198 295)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <color> so scoped [data-theme="dark"] sections inherit correct absolute values rather than an unresolved var() text string.`,note:`Registered <color> dark counterpart of --sf-color-warning.`,value:`oklch(0.65 0.153 80)`,aliasOf:null,registered:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<color>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!0,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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 <h1>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h1>. Typically slightly negative at large sizes.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h1>. Tighter than body to avoid excessive whitespace at large sizes.`,value:`var(--sf-leading-tight)`,aliasOf:`--sf-leading-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h1>. 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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h1>.`,value:`var(--sf-text-4xl)`,aliasOf:`--sf-text-4xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h2>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h2>.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h2>.`,value:`var(--sf-leading-tight)`,aliasOf:`--sf-leading-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h2>. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h2>.`,value:`var(--sf-text-3xl)`,aliasOf:`--sf-text-3xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h3>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h3>.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h3>.`,value:`var(--sf-leading-snug)`,aliasOf:`--sf-leading-snug`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h3>. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h3>.`,value:`var(--sf-text-2xl)`,aliasOf:`--sf-text-2xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h4>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h4>.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h4>.`,value:`var(--sf-leading-snug)`,aliasOf:`--sf-leading-snug`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h4>. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h4>.`,value:`var(--sf-text-xl)`,aliasOf:`--sf-text-xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h5>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h5>.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h5>.`,value:`var(--sf-leading-normal)`,aliasOf:`--sf-leading-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h5>. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h5>.`,value:`var(--sf-text-l)`,aliasOf:`--sf-text-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h6>.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h6>.`,value:`var(--sf-tracking-wide)`,aliasOf:`--sf-tracking-wide`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h6>.`,value:`var(--sf-leading-normal)`,aliasOf:`--sf-leading-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h6>. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <h6>.`,value:`var(--sf-text-m)`,aliasOf:`--sf-text-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<integer>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<integer>`,fallbackOnly:!1,optional:!1,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 <color> 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:!0,syntax:`<integer>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<integer>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<integer>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <figure> elements inside .prose.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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 <hr> rules inside .prose.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<length>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!0,syntax:`<number>`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!0,syntax:`*`,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,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:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]}]},sm=G(`<div class="text-[11px] text-slate-600 py-8 text-center"> </div>`),cm=G(`<div class="text-[8px] text-slate-600 uppercase tracking-widest pt-2 pb-1 font-semibold"> </div>`),lm=G(`<span> </span>`),um=G(`<span class="text-[8px] text-slate-600 border border-white/10 px-1 rounded">optional</span>`),dm=G(`<div class="text-[9px] text-slate-500 mt-0.5 leading-relaxed"> </div>`),fm=G(`<div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-white/4 transition-colors"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><span class="font-mono text-[11px] font-semibold text-slate-200"> </span> <!> <!></div> <!></div> <button title="Copy selector" class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-white/8"><!></button></div>`),pm=G(`<!> <div class="space-y-0.5"></div>`,1),mm=G(`<div class="mt-4 mb-1"><div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest py-1 border-b border-white/6"> </div></div> <!>`,1),hm=G(`<span class="text-[8px] font-bold text-indigo-400 uppercase">knob</span>`),gm=G(`<span class="text-[8px] text-amber-500/80 border border-amber-500/20 px-1 rounded">advanced</span>`),_m=G(`<div class="font-mono text-[9px] text-slate-600 mt-0.5"> </div>`),vm=G(`<div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-white/4 transition-colors"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><span class="font-mono text-[10px] font-semibold text-slate-200"> </span> <!> <!></div> <!> <!></div> <button title="Copy var()" class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-white/8"><!></button></div>`),ym=G(`<div class="flex flex-col h-full min-h-0"><div class="px-4 pt-4 pb-2 space-y-2 shrink-0"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Classes &amp; Variables</div> <input type="search" placeholder="Search classes, tokens, descriptions…" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <div class="flex bg-white/4 border border-white/8 rounded-lg p-0.5 gap-0.5"><button> </button> <button> </button></div></div> <div class="flex-1 min-h-0 overflow-y-auto px-4 pb-4"><!></div></div>`);function bm(e,t){Ue(t,!0);let n=am.classes,r=om.tokens.filter(e=>e.tier===`PUBLIC`||e.tier===`PUBLIC-ADVANCED`),i=L(``),a=L(`classes`),o=L(``),s=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?n.filter(t=>t.name.toLowerCase().includes(e)||t.selector?.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)):n}),c=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?r.filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)||t.value?.toLowerCase().includes(e)):r});function l(e){let t=new Map;for(let n of e){let e=n.category||`Other`,r=n.group||``;t.has(e)||t.set(e,new Map);let i=t.get(e);i.has(r)||i.set(r,[]),i.get(r).push(n)}return t}let u=I(()=>l(U(s)())),d=I(()=>l(U(c)())),f=null;async function p(e){try{await navigator.clipboard.writeText(e),R(o,e,!0),f&&clearTimeout(f),f=setTimeout(()=>{U(o)===e&&R(o,``),f=null},1500)}catch{}}let m={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 g=ym(),_=z(g),v=V(z(_),2);zi(v);var y=V(v,2),b=z(y),x=z(b);F(b);var S=V(b,2),C=z(S);F(S),F(y),F(_);var w=V(_,2),T=z(w),E=e=>{var t=Xr(),n=B(t),r=e=>{var t=sm(),n=z(t);F(t),H(()=>q(n,`No classes match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(s)().length===0),c=e=>{var t=Xr();Y(B(t),17,()=>[...U(u).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=mm(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=pm(),s=B(a),c=e=>{var t=cm(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=fm(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{var n=lm(),r=z(n,!0);F(n),H(()=>{X(n,1,`text-[8px] font-bold uppercase ${m[U(t).kind]??`text-slate-500`}`),q(r,U(t).kind)}),K(e,n)};J(c,e=>{U(t).kind&&e(l)});var u=V(c,2),d=e=>{K(e,um())};J(u,e=>{U(t).optional&&e(d)}),F(i);var f=V(i,2),h=e=>{var n=dm(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(f,e=>{U(t).description&&e(h)}),F(r);var g=V(r,2),_=z(g),v=e=>{_a(e,{class:`w-3 h-3 text-emerald-400`})},y=e=>{Ca(e,{class:`w-3 h-3 text-slate-500`})};J(_,e=>{U(o)===U(t).selector?e(v):e(y,-1)}),F(g),F(n),H(()=>q(s,U(t).selector)),W(`click`,g,()=>p(U(t).selector)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(c,-1)}),K(e,t)},D=e=>{var t=Xr(),n=B(t),r=e=>{var t=sm(),n=z(t);F(t),H(()=>q(n,`No tokens match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(c)().length===0),s=e=>{var t=Xr();Y(B(t),17,()=>[...U(d).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=mm(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=pm(),s=B(a),c=e=>{var t=cm(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=vm(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{K(e,hm())};J(c,e=>{U(t).role===`knob`&&e(l)});var u=V(c,2),d=e=>{K(e,gm())};J(u,e=>{U(t).tier===`PUBLIC-ADVANCED`&&e(d)}),F(i);var f=V(i,2),m=e=>{var n=_m(),r=z(n,!0);F(n),H(()=>q(r,U(t).value)),K(e,n)};J(f,e=>{U(t).value&&e(m)});var h=V(f,2),g=e=>{var n=dm(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(h,e=>{U(t).description&&e(g)}),F(r);var _=V(r,2),v=z(_),y=e=>{_a(e,{class:`w-3 h-3 text-emerald-400`})},b=e=>{Ca(e,{class:`w-3 h-3 text-slate-500`})};J(v,e=>{U(o)===`var(${U(t).name})`?e(y):e(b,-1)}),F(_),F(n),H(()=>q(s,U(t).name)),W(`click`,_,()=>p(`var(${U(t).name})`)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(s,-1)}),K(e,t)};J(T,e=>{U(a)===`classes`?e(E):e(D,-1)}),F(w),F(g),H((e,t)=>{X(b,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`classes`?`bg-indigo-600/30 text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-300`}`),q(x,`CSS classes (${e??``})`),X(S,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`tokens`?`bg-indigo-600/30 text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-300`}`),q(C,`CSS vars (${t??``})`)},[()=>U(s)().length,()=>U(c)().length]),qi(v,()=>U(i),e=>R(i,e)),W(`click`,b,()=>{R(a,`classes`)}),W(`click`,S,()=>{R(a,`tokens`)}),K(e,g),We()}Br([`click`]);var xm=G(`<div class="w-4 h-4 rounded-sm border border-white/10 shrink-0"></div>`),Sm=G(`<div class="w-4 h-4 shrink-0"></div>`),Cm=G(`<div class="text-[9px] text-slate-600 truncate"> </div>`),wm=G(`<input class="w-28 bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 focus:outline-none text-right"/>`),Tm=G(`<span class="text-indigo-300"> </span>`),Em=G(`<button class="text-[10px] font-mono text-slate-500 hover:text-slate-200 truncate max-w-28 text-right cursor-pointer transition-colors"><!></button>`),Dm=G(`<button class="text-[9px] text-slate-600 hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 shrink-0">✕</button>`),Om=G(`<div><div></div> <!> <div class="flex-1 min-w-0"><div class="text-[10px] font-mono text-slate-400 truncate"> </div> <!></div> <!> <!></div>`);function km(e,t){Ue(t,!0);let n=L(!1);function r(e){let t=e.name;if(t.includes(`color`)||t.includes(`source`)||t.includes(`-bg`)||t.includes(`-border`))return`color`;if(t.includes(`font`)||t.includes(`family`))return`font`;let n=e.syntax?.toLowerCase()??``;return n.includes(`number`)||n.includes(`length`)||n.includes(`integer`)?`number`:`text`}let i=I(()=>t.overrideValue??t.token.value),a=I(()=>t.overrideValue!==void 0),o=I(()=>r(t.token)),s=I(()=>t.token.name.replace(`--sf-`,``));function c(e){return Xc.value,nl(e)||nl(`var(${t.token.name})`)||e}let l=I(()=>U(o)===`color`?c(U(i)):``);var u=Om(),d=z(u),f=V(d,2),p=e=>{var t=xm();let n;H(()=>n=Z(t,``,n,{background:U(l)})),K(e,t)},m=e=>{K(e,Sm())};J(f,e=>{U(o)===`color`?e(p):e(m,-1)});var h=V(f,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=e=>{var n=Cm(),r=z(n,!0);F(n),H(()=>q(r,t.token.description)),K(e,n)};J(v,e=>{t.token.description&&e(y)}),F(h);var b=V(h,2),x=e=>{var r=wm();zi(r),H(()=>Bi(r,U(i))),zr(`blur`,r,e=>{let r=e.target.value.trim();r&&r!==t.token.value?t.onSet(r):(!r||r===t.token.value)&&t.onReset(),R(n,!1)}),W(`keydown`,r,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&R(n,!1)}),K(e,r)},S=e=>{var t=Em(),r=z(t),o=e=>{var t=Tm(),n=z(t,!0);F(t),H(()=>q(n,U(i))),K(e,t)},s=e=>{var t=Yr();H(()=>q(t,U(i))),K(e,t)};J(r,e=>{U(a)?e(o):e(s,-1)}),F(t),H(()=>Q(t,`title`,U(i))),W(`click`,t,()=>{R(n,!0)}),K(e,t)};J(b,e=>{U(n)?e(x):e(S,-1)});var C=V(b,2),w=e=>{var n=Dm();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{U(a)&&e(w)}),F(u),H(()=>{X(u,1,`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${U(a)?`bg-indigo-500/8 border border-indigo-500/15`:`hover:bg-white/4`}`),X(d,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(a)?`bg-indigo-500`:`bg-transparent`}`),Q(g,`title`,t.token.name),q(_,U(s))}),K(e,u),We()}Br([`keydown`,`click`]);var Am=G(`<span class="text-[9px] font-bold text-indigo-400 font-mono"> </span>`),jm=G(`<p class="text-[11px] text-slate-600 text-center py-8">No tokens found</p>`),Mm=G(`<p class="text-[10px] text-slate-600 text-center py-2"> </p>`),Nm=G(`<div class="space-y-0.5"><!> <!></div>`),Pm=G(`<div class="p-4 space-y-4"><div class="flex items-center justify-between"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest capitalize"> </div> <!></div> <input type="text" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>`);function Fm(e,t){Ue(t,!0);let n=L(``),r=I(()=>()=>{let e=t.patterns??[t.domain];return t.tokens.filter(t=>e.some(e=>t.name.includes(e))&&t.tier!==`INTERNAL`)}),i=I(()=>()=>{if(!U(n))return U(r)();let e=U(n).toLowerCase();return U(r)().filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e))}),a=I(()=>U(i)().filter(e=>e.name in t.overrides).length);var o=Pm(),s=z(o),c=z(s),l=z(c);F(c);var u=V(c,2),d=e=>{var t=Am(),n=z(t);F(t),H(()=>q(n,`${U(a)??``} modified`)),K(e,t)};J(u,e=>{U(a)>0&&e(d)}),F(s);var f=V(s,2);zi(f);var p=V(f,2),m=e=>{K(e,jm())},h=I(()=>U(i)().length===0),g=e=>{var n=Nm(),r=z(n);Y(r,17,()=>U(i)().slice(0,60),e=>e.name,(e,n)=>{km(e,{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)})});var a=V(r,2),o=e=>{var t=Mm(),n=z(t);F(t),H(e=>q(n,`${e??``} more — refine your search`),[()=>U(i)().length-60]),K(e,t)},s=I(()=>U(i)().length>60);J(a,e=>{U(s)&&e(o)}),F(n),K(e,n)};J(p,e=>{U(h)?e(m):e(g,-1)}),F(o),H(()=>{q(l,`${t.domain??``} tokens`),Q(f,`placeholder`,`Search ${t.domain} tokens…`),Bi(f,U(n))}),W(`input`,f,e=>{R(n,e.target.value,!0)}),K(e,o),We()}Br([`input`]);var Im=G(`<div class="w-1 h-1 bg-white rounded-sm"></div>`),Lm=G(`<div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-rose-800"></div> <span class="text-[8px] text-slate-600"> </span></div>`),Rm=G(`<div class="text-center py-8 text-[11px] text-slate-600"> </div>`),zm=G(`<div class="absolute left-0 top-0 bottom-0 w-0.5 bg-amber-600/40 rounded-full"></div>`),Bm=G(`<div class="absolute left-0 top-0 bottom-0 w-0.5 bg-rose-800/40 rounded-full"></div>`),Vm=G(`<div class="relative"><!> <!> <!></div>`),Hm=G(`<div class="space-y-0.5 px-1"></div>`),Um=G(`<div class="flex flex-col h-full min-h-0"><div class="px-3 pt-3 pb-2 space-y-2 shrink-0"><input type="text" placeholder="Search tokens…" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <div class="flex items-center gap-3"><button><div><!></div> </button> <button><div><!></div> </button> <span class="ml-auto text-[9px] text-slate-700 font-mono"> </span></div> <div class="flex gap-3"><div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-slate-500"></div> <span class="text-[8px] text-slate-600"> </span></div> <div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-amber-600"></div> <span class="text-[8px] text-slate-600"> </span></div> <!></div></div> <div class="w-full h-px bg-white/6 shrink-0"></div> <div class="flex-1 min-h-0 overflow-y-auto py-1"><!></div></div>`);function Wm(e,t){Ue(t,!0);let n={PUBLIC:0,"PUBLIC-ADVANCED":1,INTERNAL:2},r=L(``),i=L(!1),a=L(!1),o=I(()=>t.tokens.filter(e=>t.patterns.some(t=>e.name.includes(t))).sort((e,t)=>{let r=n[e.tier??`INTERNAL`]??2,i=n[t.tier??`INTERNAL`]??2;return r===i?e.name.localeCompare(t.name):r-i})),s=I(()=>()=>{let e=U(o);if(U(i)||(e=e.filter(e=>e.tier!==`INTERNAL`)),U(a)&&(e=e.filter(e=>e.name in t.overrides)),U(r)){let t=U(r).toLowerCase();e=e.filter(e=>e.name.toLowerCase().includes(t)||e.description?.toLowerCase().includes(t))}return e}),c=I(()=>U(o).filter(e=>e.name in t.overrides).length),l=I(()=>U(o).filter(e=>e.tier===`PUBLIC`).length),u=I(()=>U(o).filter(e=>e.tier===`PUBLIC-ADVANCED`).length),d=I(()=>U(o).filter(e=>e.tier===`INTERNAL`).length);var f=Um(),p=z(f),m=z(p);zi(m);var h=V(m,2),g=z(h),_=z(g),v=z(_),y=e=>{K(e,Im())};J(v,e=>{U(a)&&e(y)}),F(_);var b=V(_);F(g);var x=V(g,2),S=z(x),C=z(S),w=e=>{K(e,Im())};J(C,e=>{U(i)&&e(w)}),F(S);var T=V(S);F(x);var E=V(x,2),D=z(E);F(E),F(h);var O=V(h,2),k=z(O),ee=V(z(k),2),te=z(ee);F(ee),F(k);var ne=V(k,2),A=V(z(ne),2),j=z(A);F(A),F(ne);var M=V(ne,2),re=e=>{var t=Lm(),n=V(z(t),2),r=z(n);F(n),F(t),H(()=>q(r,`Internal (${U(d)??``})`)),K(e,t)};J(M,e=>{U(i)&&e(re)}),F(O),F(p);var ie=V(p,4),ae=z(ie),oe=e=>{var t=Rm(),n=z(t,!0);F(t),H(()=>q(n,U(a)?`No modified tokens in this domain`:`No tokens found`)),K(e,t)},se=I(()=>U(s)().length===0),N=e=>{var n=Hm();Y(n,21,()=>U(s)(),e=>e.name,(e,n)=>{var r=Vm(),i=z(r),a=e=>{K(e,zm())};J(i,e=>{U(n).tier===`PUBLIC-ADVANCED`&&e(a)});var o=V(i,2),s=e=>{K(e,Bm())};J(o,e=>{U(n).tier===`INTERNAL`&&e(s)}),km(V(o,2),{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)}),F(r),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(se)?e(oe):e(N,-1)}),F(ie),F(f),H(e=>{Bi(m,U(r)),X(g,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(a)?`text-indigo-400`:`text-slate-600 hover:text-slate-400`}`),X(_,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(a)?`bg-indigo-600 border-indigo-500`:`border-white/20`}`),q(b,` Modified only ${U(c)>0?`(${U(c)})`:``}`),Q(x,`aria-expanded`,U(i)),X(x,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(i)?`text-amber-400`:`text-slate-600 hover:text-slate-400`}`),X(S,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(i)?`bg-amber-600 border-amber-500`:`border-white/20`}`),q(T,` Internal (${U(d)??``})`),q(D,`${e??``}/${U(o).length??``}`),q(te,`Public (${U(l)??``})`),q(j,`Advanced (${U(u)??``})`)},[()=>U(s)().length]),W(`input`,m,e=>{R(r,e.target.value,!0)}),W(`click`,g,()=>{R(a,!U(a))}),W(`click`,x,()=>{R(i,!U(i))}),K(e,f),We()}Br([`input`,`click`]);var Gm=G(`<option style="background:#16161e;"> </option>`),Km=G(`<div class="flex items-center gap-2 p-2.5 bg-white/4"><span class="text-[15px] font-mono font-bold text-slate-100"> </span> <span> </span> <div class="flex-1"></div> <div class="grid grid-cols-2 gap-x-2 gap-y-0.5 text-[9px]"><span> </span> <span> </span> <span> </span> <span> </span></div></div>`),qm=G(`<div class="p-2.5 bg-white/4 text-[10px] text-slate-500">Waiting for live preview…</div>`),Jm=G(`<button> </button>`),Ym=G(`<p class="text-[9px] text-slate-600">Pick an editable brand/status <span class="font-mono">(base)</span> color as the foreground to enable auto-fix.</p>`),Xm=G(`<p class="text-[9px] text-emerald-300"> </p>`),Zm=G(`<div class="flex items-center gap-2"><span class="w-7 h-7 rounded border border-white/10 shrink-0"></span> <div class="flex-1 min-w-0"><div class="text-[9px] font-mono text-slate-400 truncate"> </div> <div class="text-[9px] text-emerald-300"> </div></div> <button class="px-2.5 py-1 rounded-lg bg-indigo-600/25 border border-indigo-500/40 text-indigo-200 text-[10px] font-bold cursor-pointer hover:bg-indigo-600/35 shrink-0">Apply</button></div>`),Qm=G(`<p class="text-[9px] text-slate-600"> </p>`),$m=G(`<div class="grid grid-cols-[1fr_auto_1fr] gap-2 items-end"><div><div class="text-[9px] text-slate-500 mb-1">Foreground</div> <select class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"></select></div> <button title="Swap" class="mb-0.5 px-2 py-1.5 rounded-lg border border-white/10 text-slate-400 hover:text-slate-200 hover:bg-white/5 cursor-pointer text-[12px]">⇄</button> <div><div class="text-[9px] text-slate-500 mb-1">Background</div> <select class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"></select></div></div> <div class="rounded-xl border border-white/8 overflow-hidden"><div class="h-24 flex items-center justify-center"><span class="text-[26px] font-bold">Aa Bb Cc</span></div> <!></div> <div class="rounded-xl bg-white/4 border border-white/8 p-3 space-y-2"><div class="flex items-center justify-between"><span class="text-[10px] font-bold text-slate-300">Auto-fix to pass <span class="text-slate-600 font-normal"> </span></span> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div></div> <!></div>`,1),eh=G(`<th class="p-1 font-mono font-semibold text-slate-500 text-center whitespace-nowrap"> </th>`),th=G(`<td class="p-0.5"><button> </button></td>`),nh=G(`<td class="p-0.5 text-slate-700 text-center">·</td>`),rh=G(`<tr><td class="p-1 font-mono font-semibold text-slate-500 whitespace-nowrap pr-2"> </td><!></tr>`),ih=G(`<p class="text-[10px] text-slate-600">Foreground (rows) × background (cols). Click a cell to load it above.</p> <div class="overflow-x-auto"><table class="border-collapse text-[9px]"><thead><tr><th class="p-1"></th><!></tr></thead><tbody></tbody></table></div>`,1),ah=G(`<div class="p-4 space-y-6"><section class="space-y-1"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Contrast checker</div> <p class="text-[10px] text-slate-600 leading-relaxed">Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.</p></section> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Pair checker</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-2"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Contrast matrix</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>`);function oh(e,t){Ue(t,!0);let n=[{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`}],r=[{label:`Surface`,expr:`var(--sf-color-surface)`},{label:`Bg`,expr:`var(--sf-color-bg)`},{label:`Border`,expr:`var(--sf-color-border)`}],i=[{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)`}],a=i.flatMap(e=>[{label:`${e.key} (base)`,expr:`var(--sf-color-${e.key})`,editKey:e.key},{label:`${e.key}-100`,expr:`var(--sf-color-${e.key}-100)`},{label:`${e.key}-600`,expr:`var(--sf-color-${e.key}-600)`},{label:`${e.key}-900`,expr:`var(--sf-color-${e.key}-900)`}]),o=[...n,...r,...a],s=Object.fromEntries(i.map(e=>[e.key,e])),c=[{label:`text`,expr:`var(--sf-color-text)`},{label:`white`,expr:`#ffffff`},{label:`black`,expr:`#000000`},{label:`primary`,expr:`var(--sf-color-primary)`,editKey:`primary`}],l=[{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)`}],u=L(`White`),d=L(`primary (base)`),f=L(`AA`),p=I(()=>o.find(e=>e.label===U(u))??o[0]),m=I(()=>o.find(e=>e.label===U(d))??o[0]);function h(e,t){Xc.value;let n=ol(e),r=ol(t);return!n||!r?null:Pl(Nl(...n),Nl(...r))}function g(e){return e>=7?{tag:`AAA`,cls:`bg-emerald-500/25 text-emerald-200`}:e>=4.5?{tag:`AA`,cls:`bg-emerald-500/15 text-emerald-300`}:e>=3?{tag:`AA-L`,cls:`bg-amber-500/20 text-amber-300`}:{tag:`Fail`,cls:`bg-rose-500/20 text-rose-300`}}let _=I(()=>h(U(p).expr,U(m).expr));function v(){let e=U(u);R(u,U(d),!0),R(d,e,!0)}function y(e,t){let n=o.find(t=>t.expr===e),r=o.find(e=>e.expr===t);n&&R(u,n.label,!0),r&&R(d,r.label,!0)}function b(e){return Xc.value,nl(e)||e}let x=L(!1),S=L(!1),C=L(null);function w(){R(C,null);let e=U(p).editKey?s[U(p).editKey]:null;if(!e)return;let n=$c()===`dark`,r=n?e.srcDark:e.srcLight,i=n?e.defDark:e.defLight,{c:a,h:o,l:c,valid:l}=Fl(t.overrides[r]??i);if(!l)return;let u=ol(U(m).expr);if(!u)return;let d=Nl(...u),h=U(f)===`AAA`?7:4.5,g=null;for(let e=0;e<=1.0001;e+=.005){let[t,n,r]=Ml(e,a,o);Pl(Nl(t,n,r),d)>=h&&(g===null||Math.abs(e-c)<Math.abs(g-c))&&(g=e)}if(g===null)return;let[_,v,y]=Ml(g,a,o),b=Pl(Nl(_,v,y),d);R(C,{token:r,value:Il(g,a,o),ratio:b},!0)}function T(){U(C)&&(t.onSet(U(C).token,U(C).value),R(C,null))}On(()=>{if(!U(x)){R(C,null);return}Xc.value,U(u),U(d),U(f),U(p).editKey&&U(_)!==null&&U(_)<(U(f)===`AAA`?7:4.5)?w():R(C,null)});var E=ah(),D=V(z(E),2),O=z(D),k=V(z(O),2),ee=z(k,!0);F(k),F(O);var te=V(O,2),ne=e=>{var t=$m(),n=B(t),r=z(n),i=V(z(r),2);Y(i,21,()=>o,e=>e.label,(e,t)=>{var n=Gm(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).label)&&(n.value=(n.__value=U(t).label)??``)}),K(e,n)}),F(i),F(r);var a=V(r,2),s=V(a,2),c=V(z(s),2);Y(c,21,()=>o,e=>e.label,(e,t)=>{var n=Gm(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).label)&&(n.value=(n.__value=U(t).label)??``)}),K(e,n)}),F(c),F(s),F(n);var l=V(n,2),h=z(l),y=z(h);F(h);var x=V(h,2),S=e=>{let t=I(()=>g(U(_)));var n=Km(),r=z(n),i=z(r);F(r);var a=V(r,2),o=z(a,!0);F(a);var s=V(a,4),c=z(s),l=z(c);F(c);var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=z(f);F(f);var m=V(f,2),h=z(m);F(m),F(s),F(n),H(e=>{q(i,`${e??``}:1`),X(a,1,`text-[10px] font-bold px-2 py-0.5 rounded ${U(t).cls}`),q(o,U(t).tag),X(c,1,yi(U(_)>=4.5?`text-emerald-300`:`text-rose-300`)),q(l,`${U(_)>=4.5?`✓`:`✗`} AA normal`),X(u,1,yi(U(_)>=3?`text-emerald-300`:`text-rose-300`)),q(d,`${U(_)>=3?`✓`:`✗`} AA large`),X(f,1,yi(U(_)>=7?`text-emerald-300`:`text-rose-300`)),q(p,`${U(_)>=7?`✓`:`✗`} AAA normal`),X(m,1,yi(U(_)>=4.5?`text-emerald-300`:`text-rose-300`)),q(h,`${U(_)>=4.5?`✓`:`✗`} AAA large`)},[()=>U(_).toFixed(2)]),K(e,n)},w=e=>{K(e,qm())};J(x,e=>{U(_)===null?e(w,-1):e(S)}),F(l);var E=V(l,2),D=z(E),O=z(D),k=V(z(O)),ee=z(k);F(k),F(O);var te=V(O,2);Y(te,20,()=>[`AA`,`AAA`],e=>e,(e,t)=>{var n=Jm(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${U(f)===t?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(r,t)}),W(`click`,n,()=>{R(f,t,!0)}),K(e,n)}),F(te),F(D);var ne=V(D,2),A=e=>{K(e,Ym())},j=e=>{var t=Xm(),n=z(t);F(t),H(()=>q(n,`Already passes ${U(f)??``}. 🎉`)),K(e,t)},M=e=>{var t=Zm(),n=z(t),r=V(n,2),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o),F(r);var c=V(r,2);F(t),H((e,t)=>{Z(n,e),q(a,U(C).value),q(s,`→ ${t??``}:1 (${U(f)??``} ✓)`)},[()=>`background:${b(U(C).value)}`,()=>U(C).ratio.toFixed(2)]),W(`click`,c,T),K(e,t)},re=e=>{var t=Qm(),n=z(t);F(t),H(()=>q(n,`No lightness of this hue reaches ${U(f)??``} on this background — try a different background or hue.`)),K(e,t)};J(ne,e=>{U(p).editKey?U(_)!==null&&U(_)>=(U(f)===`AAA`?7:4.5)?e(j,1):U(C)?e(M,2):e(re,-1):e(A)}),F(E),H((e,t,n)=>{Z(h,e),Z(y,t),q(ee,`(for ${n??``} mode)`)},[()=>`background:${b(U(m).expr)}`,()=>`color:${b(U(p).expr)}`,()=>$c()]),Oi(i,()=>U(u),e=>R(u,e)),W(`click`,a,v),Oi(c,()=>U(d),e=>R(d,e)),K(e,t)};J(te,e=>{U(x)&&e(ne)}),F(D);var A=V(D,4),j=z(A),M=V(z(j),2),re=z(M,!0);F(M),F(j);var ie=V(j,2),ae=e=>{var t=ih(),n=V(B(t),2),r=z(n),i=z(r),a=z(i);Y(V(z(a)),17,()=>l,e=>e.label,(e,t)=>{var n=eh(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(a),F(i);var o=V(i);Y(o,21,()=>c,e=>e.label,(e,t)=>{var n=rh(),r=z(n),i=z(r,!0);F(r),Y(V(r),17,()=>l,e=>e.label,(e,n)=>{let r=I(()=>h(U(t).expr,U(n).expr));var i=Xr(),a=B(i),o=e=>{let i=I(()=>g(U(r)));var a=th(),o=z(a),s=z(o,!0);F(o),F(a),H((e,t)=>{Q(o,`title`,e),X(o,1,`w-full px-1.5 py-1 rounded font-mono font-bold cursor-pointer ${U(i).cls}`),q(s,t)},[()=>`${U(t).label} on ${U(n).label} — ${U(r).toFixed(2)}:1`,()=>U(r).toFixed(1)]),W(`click`,o,()=>y(U(t).expr,U(n).expr)),K(e,a)},s=e=>{K(e,nh())};J(a,e=>{U(r)===null?e(s,-1):e(o)}),K(e,i)}),F(n),H(()=>q(i,U(t).label)),K(e,n)}),F(o),F(r),F(n),K(e,t)};J(ie,e=>{U(S)&&e(ae)}),F(A),F(E),H(()=>{Q(O,`aria-expanded`,U(x)),q(ee,U(x)?`▲`:`▼`),Q(j,`aria-expanded`,U(S)),q(re,U(S)?`▲`:`▼`)}),W(`click`,O,()=>{R(x,!U(x))}),W(`click`,j,()=>{R(S,!U(S))}),K(e,E),We()}Br([`click`]);var sh=G(`<div class="h-full overflow-y-auto"><!></div>`),ch=G(`<span class="ml-0.5 text-[8px] bg-indigo-600 text-white rounded-full px-1.5 py-0.5 leading-none font-black"> </span>`),lh=G(`<div class="flex flex-col h-full min-h-0"><div class="flex-1 min-h-0 overflow-hidden"><!></div> <div class="shrink-0 border-t border-white/8 bg-[#0a0a10] flex"><button><!> Controls</button> <div class="w-px bg-white/8"></div> <button><!> All tokens <!></button></div></div>`);function uh(e,t){Ue(t,!0);let n=new Set([`home`,`themes`,`wcag`,`setup`,`cheatsheet`]),r=L(`controls`);On(()=>{t.domain,R(r,`controls`)});let i=I(()=>yl[t.domain]??[t.domain]),a=I(()=>t.tokens.filter(e=>bl(e.name)===t.domain&&e.name in t.overrides).length);var o=Xr(),s=B(o),c=e=>{var n=Xr(),r=B(n),i=e=>{Al(e,{get overrides(){return t.overrides},get onSelect(){return t.onSelectDomain},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},a=e=>{em(e,{get overrides(){return t.overrides},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},o=e=>{oh(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onBulkChange(){return t.onBulkChange}})},s=e=>{im(e,{get overrides(){return t.overrides}})},c=e=>{bm(e,{})};J(r,e=>{t.domain===`home`?e(i):t.domain===`themes`?e(a,1):t.domain===`wcag`?e(o,2):t.domain===`setup`?e(s,3):t.domain===`cheatsheet`&&e(c,4)}),K(e,n)},l=I(()=>n.has(t.domain)),u=e=>{var n=lh(),o=z(n),s=z(o),c=e=>{var n=sh(),r=z(n),i=e=>{Xu(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange},get onSelectDomain(){return t.onSelectDomain}})},a=e=>{zd(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},o=e=>{Gd(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},s=e=>{ff(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},c=e=>{Df(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},l=e=>{Ff(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},u=e=>{Zf(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},d=e=>{up(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},f=e=>{Sp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},p=e=>{Gp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},m=e=>{Fm(e,{get domain(){return t.domain},get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(r,e=>{t.domain===`colors`?e(i):t.domain===`typography`?e(a,1):t.domain===`spacing`?e(o,2):t.domain===`layout`?e(s,3):t.domain===`borders`?e(c,4):t.domain===`shadows`?e(l,5):t.domain===`motion`?e(u,6):t.domain===`effects`?e(d,7):t.domain===`macros`?e(f,8):t.domain===`misc`?e(p,9):e(m,-1)}),F(n),K(e,n)},l=e=>{Wm(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get patterns(){return U(i)},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(s,e=>{U(r)===`controls`?e(c):e(l,-1)}),F(o);var u=V(o,2),d=z(u);lo(z(d),{class:`w-3 h-3`}),Me(),F(d);var f=V(d,4),p=z(f);La(p,{class:`w-3 h-3`});var m=V(p,2),h=e=>{var t=ch(),n=z(t,!0);F(t),H(()=>q(n,U(a))),K(e,t)};J(m,e=>{U(a)>0&&e(h)}),F(f),F(u),F(n),H(()=>{X(d,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`controls`?`text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-300`}`),X(f,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`tokens`?`text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-300`}`)}),W(`click`,d,()=>{R(r,`controls`)}),W(`click`,f,()=>{R(r,`tokens`)}),K(e,n)};J(s,e=>{U(l)?e(c):e(u,-1)}),K(e,o),We()}Br([`click`]);var dh=G(`<div class="px-4 py-8 text-center text-[11px] text-slate-600"> </div>`),fh=G(`<div class="px-4 py-8 text-center text-[11px] text-slate-600">Type to search tokens by name or description</div>`),ph=G(`<span class="shrink-0 text-[8px] font-bold text-indigo-400 bg-indigo-500/15 border border-indigo-500/25 rounded px-1 py-0.5">overridden</span>`),mh=G(`<div class="text-[10px] text-slate-600 truncate mt-0.5"> </div>`),hh=G(`<button><div class="flex-1 min-w-0"><div class="flex items-center gap-2"><span class="text-[11px] font-mono text-slate-200 truncate"> </span> <!></div> <!></div> <div class="flex items-center gap-2 shrink-0"><span class="text-[9px] text-slate-600 font-mono truncate max-w-[100px]"> </span> <span class="text-[9px] font-bold text-slate-500 bg-white/5 rounded px-1.5 py-0.5"> </span></div></button>`),gh=G(`<div class="px-4 py-2 border-t border-white/6 flex items-center gap-3 text-[9px] text-slate-600"><span><kbd class="font-mono border border-white/10 rounded px-1">↑↓</kbd> navigate</span> <span><kbd class="font-mono border border-white/10 rounded px-1">↵</kbd> open panel</span> <span><kbd class="font-mono border border-white/10 rounded px-1">Esc</kbd> close</span></div>`),_h=G(`<div class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-start justify-center pt-[15vh]" role="dialog" aria-modal="true" aria-label="Token search" tabindex="-1"><div class="w-[560px] max-w-[95vw] bg-[#111118] border border-white/12 rounded-2xl shadow-2xl overflow-hidden"><div class="flex items-center gap-3 px-4 py-3 border-b border-white/8"><svg class="w-4 h-4 text-slate-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg> <input placeholder="Search tokens… (e.g. radius, primary, duration)" class="flex-1 bg-transparent text-[13px] text-slate-100 placeholder-slate-600 outline-none"/> <kbd class="text-[9px] font-mono text-slate-600 border border-white/10 rounded px-1.5 py-0.5 shrink-0">Esc</kbd></div> <div class="max-h-[360px] overflow-y-auto"><!></div> <!></div></div>`);function vh(e,t){Ue(t,!0);let n=L(``),r=L(0),i=L(null),a={colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`},o=I(()=>(()=>{let e=U(n).trim().toLowerCase();if(!e)return[];let r=[];for(let n of t.tokens){if(n.tier===`INTERNAL`)continue;let i=n.name.toLowerCase().includes(e),a=n.description?.toLowerCase().includes(e)??!1;if((i||a)&&(r.push({token:n,domain:bl(n.name),overridden:n.name in t.overrides}),r.length>=40))break}return r})());On(()=>{U(n),R(r,0)}),On(()=>{U(i)&&U(i).focus()});function s(e){t.onNavigate(e),t.onClose()}function c(e){if(e.key===`Escape`){e.preventDefault(),t.onClose();return}if(U(o).length===0&&(e.key===`ArrowDown`||e.key===`ArrowUp`)){e.preventDefault(),R(r,0);return}if(e.key===`ArrowDown`){e.preventDefault(),R(r,Math.min(U(r)+1,U(o).length-1),!0);return}if(e.key===`ArrowUp`){e.preventDefault(),R(r,Math.max(U(r)-1,0),!0);return}e.key===`Enter`&&U(o)[U(r)]&&(e.preventDefault(),s(U(o)[U(r)].domain))}var l=_h(),u=z(l),d=z(u),f=V(z(d),2);zi(f),Zi(f,e=>R(i,e),()=>U(i)),Me(2),F(d);var p=V(d,2),m=z(p),h=e=>{var t=dh(),r=z(t);F(t),H(()=>q(r,`No tokens matching "${U(n)??``}"`)),K(e,t)},g=I(()=>U(n).trim()&&U(o).length===0),_=e=>{K(e,fh())},v=I(()=>!U(n).trim()),y=e=>{var n=Xr();Y(B(n),19,()=>U(o),e=>e.token.name,(e,n,i)=>{var o=hh(),c=z(o),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{K(e,ph())};J(f,e=>{U(n).overridden&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=mh(),r=z(t,!0);F(t),H(()=>q(r,U(n).token.description)),K(e,t)};J(m,e=>{U(n).token.description&&e(h)}),F(c);var g=V(c,2),_=z(g),v=z(_,!0);F(_);var y=V(_,2),b=z(y,!0);F(y),F(g),F(o),H(()=>{X(o,1,`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${U(r)===U(i)?`bg-indigo-500/15`:`hover:bg-white/4`}`),q(d,U(n).token.name),q(v,U(n).overridden?t.overrides[U(n).token.name]:U(n).token.value),q(b,a[U(n).domain]??U(n).domain)}),zr(`mouseenter`,o,()=>{R(r,U(i),!0)}),W(`click`,o,()=>s(U(n).domain)),K(e,o)}),K(e,n)};J(m,e=>{U(g)?e(h):U(v)?e(_,1):e(y,-1)}),F(p);var b=V(p,2),x=e=>{K(e,gh())};J(b,e=>{U(o).length>0&&e(x)}),F(u),F(l),W(`mousedown`,l,e=>{e.target===e.currentTarget&&t.onClose()}),W(`keydown`,f,c),qi(f,()=>U(n),e=>R(n,e)),K(e,l),We()}Br([`mousedown`,`keydown`,`click`]);var yh=G(`<span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[8px] font-black"> </span>`),bh=G(`<button><!> <!></button>`),xh=G(`<button data-testid="reset-category" class="flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[9px] font-bold text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 transition-colors cursor-pointer shrink-0"><!> </button>`),Sh=G(`<div><!> <div class="md:hidden flex items-stretch border-b border-white/8 bg-[#0d0d14] shrink-0"><!> <!></div> <div class="flex flex-1 min-h-0"><div><!></div> <div><div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0 gap-2"><span data-testid="panel-heading" class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1"> </span> <!></div> <div class="flex-1 min-h-0 flex flex-col overflow-hidden"><!></div></div> <div><!></div></div> <!> <!></div>`);function Ch(e,t){Ue(t,!0);let n=(e,t=f,n=f,r=f)=>{var i=bh(),a=z(i);mi(a,n,(e,t)=>{t(e,{class:`w-3.5 h-3.5`})});var o=V(a),s=V(o),c=e=>{var t=yh(),n=z(t,!0);F(t),H(()=>q(n,U(v)>9?`9+`:U(v))),K(e,t)};J(s,e=>{t()===`preview`&&U(v)>0&&e(c)}),F(i),H(()=>{Q(i,`aria-pressed`,U(p)===t()),X(i,1,`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${U(p)===t()?`text-indigo-300 bg-indigo-500/10`:`text-slate-500 hover:text-slate-300`}`),q(o,` ${r()??``} `)}),W(`click`,i,()=>{R(p,t(),!0)}),K(e,i)},r=om.tokens??om,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 a(e){let t={};for(let n of Object.keys(e)){let e=bl(n);t[e]=(t[e]??0)+1}return t}let o=Ic(),s=L(nn(Lc())),c=L(nn([])),l=L(nn([])),u=L(`home`),d=L(!1),p=L(`controls`),m=L(`light`),h=L(`fluid`),g=L(`normal`),_=L(`marketing`),v=I(()=>Object.keys(U(s)).length),y=I(()=>a(U(s))),b=I(()=>Object.keys(U(s)).filter(e=>bl(e)===U(u))),x=I(()=>U(b).length),S=I(()=>U(c).length>0),C=I(()=>U(l).length>0);function w(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let T=L(nn(Cr(()=>({...U(s)})))),E=L(`idle`),D=I(()=>!w(U(s),U(T))),O=null;On(()=>{Rc(U(s))});function k(e){let t=U(s),n=typeof e==`function`?e(t):e;w(t,n)||(R(c,[...U(c).slice(-49),t],!0),R(l,[],!0),(U(E)===`saved`||U(E)===`error`)&&R(E,`idle`)),R(s,n,!0)}async function ee(){if(!U(D)||U(E)===`saving`)return;let e={...U(s)};R(E,`saving`);try{await Vc(U(s)),w(U(s),e)?(R(T,e,!0),R(E,`saved`),O&&clearTimeout(O),O=setTimeout(()=>{U(E)===`saved`&&R(E,`idle`),O=null},2e3)):R(E,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(E,`error`)}}function te(e,t){k(n=>({...n,[e]:t}))}function ne(e){k(t=>{let n={...t};return delete n[e],n})}function A(e){k(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function j(e){k({...e})}function M(){k({})}function re(){let e={};for(let t of U(b))e[t]=null;A(e)}function ie(){if(U(c).length===0)return;let e=U(c)[U(c).length-1],t=U(s);R(c,U(c).slice(0,-1),!0),R(l,[t,...U(l)],!0),R(s,e,!0)}function ae(){if(U(l).length===0)return;let e=U(l)[0],t=U(s);R(l,U(l).slice(1),!0),R(c,[...U(c),t],!0),R(s,e,!0)}function oe(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);if(typeof e==`object`&&e&&!Array.isArray(e)){let t=Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e)));Object.keys(t).length>0&&k(t)}}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length>0&&k(t=>({...t,...e}))}},n.readAsText(t)},e.click()}function se(){let e=cc(U(s),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}ra(()=>{let e=e=>{(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key===`z`&&(e.preventDefault(),ie()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&e.key===`z`||e.key===`y`)&&(e.preventDefault(),ae()),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key.toLowerCase()===`s`&&(e.preventDefault(),ee()),(e.ctrlKey||e.metaKey)&&!e.repeat&&e.key.toLowerCase()===`k`&&(e.preventDefault(),R(d,!U(d)))};return window.addEventListener(`keydown`,e),()=>{window.removeEventListener(`keydown`,e),O&&clearTimeout(O)}});var N=Sh(),ce=z(N);Ko(ce,{get overridesCount(){return U(v)},get canUndo(){return U(S)},get canRedo(){return U(C)},get hasPendingChanges(){return U(D)},get saveState(){return U(E)},onUndo:ie,onRedo:ae,onResetAll:M,onImport:oe,onExport:se,onSave:ee});var le=V(ce,2),ue=z(le);n(ue,()=>`controls`,()=>lo,()=>`Controls`),n(V(ue,2),()=>`preview`,()=>ka,()=>`Preview`),F(le);var de=V(le,2),fe=z(de);Xo(z(fe),{get activeId(){return U(u)},onSelect:e=>{R(u,e,!0)},get overridesByDomain(){return U(y)}}),F(fe);var pe=V(fe,2),me=z(pe),he=z(me),ge=z(he,!0);F(he);var _e=V(he,2),ve=e=>{var t=xh(),n=z(t);$a(n,{class:`w-3 h-3`});var r=V(n);F(t),H(()=>{Q(t,`title`,`Reset ${U(x)} override${U(x)===1?``:`s`} in ${i[U(u)]??U(u)}`),q(r,` Reset ${U(x)??``}`)}),W(`click`,t,re),K(e,t)};J(_e,e=>{U(x)>0&&e(ve)}),F(me);var ye=V(me,2);uh(z(ye),{get domain(){return U(u)},get tokens(){return r},get overrides(){return U(s)},onSet:te,onReset:ne,onBulkChange:A,onApplyTheme:j,onSelectDomain:e=>{R(u,e,!0)},onResetAll:M}),F(ye),F(pe);var be=V(pe,2);vl(z(be),{get overrides(){return U(s)},get previewTheme(){return U(m)},get previewWidth(){return U(h)},get previewMotion(){return U(g)},get previewTemplate(){return U(_)},onThemeChange:e=>{R(m,e,!0)},onWidthChange:e=>{R(h,e,!0)},onMotionChange:e=>{R(g,e,!0)},onTemplateChange:e=>{R(_,e,!0)}}),F(be),F(de);var xe=V(de,2);{let e=I(()=>i[U(u)]??U(u));$o(xe,{get overridesCount(){return U(v)},get domain(){return U(e)}})}var Se=V(xe,2),Ce=e=>{vh(e,{get tokens(){return r},get overrides(){return U(s)},onNavigate:e=>{R(u,e,!0)},onClose:()=>{R(d,!1)}})};J(Se,e=>{U(d)&&e(Ce)}),F(N),H(()=>{X(N,1,`${o?`w-full h-full`:`w-screen h-screen`} flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans`),X(fe,1,`shrink-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),X(pe,1,`flex-1 min-w-0 md:flex-none md:w-[360px] bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),q(ge,i[U(u)]??U(u)),X(be,1,`flex-1 flex-col min-h-0 min-w-0 ${U(p)===`controls`?`hidden md:flex`:`flex`}`)}),K(e,N),We()}Br([`click`]);var wh=document.getElementById(`app`)??document.getElementById(`slashed-admin-app`);wh&&(wh.innerHTML=``,Zr(Ch,{target:wh}));var Th=G(`<button aria-label="Open SLASHED token editor" class="fixed right-0 z-[99998] pointer-events-auto bg-indigo-600 hover:bg-indigo-500 text-white shadow-xl flex flex-col items-center justify-center gap-1 px-1.5 py-3 rounded-l-xl transition-colors cursor-pointer" style="top: calc(var(--wp-admin--admin-bar--height, 32px) + 16px);"><span class="text-sm font-black leading-none select-none">/</span> <!></button>`),Eh=G(`<span class="shrink-0 text-[9px] bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 font-bold px-1.5 py-0.5 rounded-full font-mono leading-none"> </span>`),Dh=G(`<div class="absolute inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="reset-confirm-title" tabindex="-1"><div class="bg-[#1a1a2e] border border-white/10 rounded-xl p-5 mx-4 shadow-2xl w-full max-w-[320px]"><h3 id="reset-confirm-title" class="text-white font-bold text-sm mb-2">Reset all overrides?</h3> <p class="text-slate-400 text-xs mb-4"> </p> <div class="flex gap-2 justify-end"><button class="px-3 py-1.5 text-xs rounded-lg bg-white/8 text-slate-300 hover:bg-white/12 transition-colors cursor-pointer">Cancel</button> <button class="px-3 py-1.5 text-xs rounded-lg bg-rose-600 hover:bg-rose-500 text-white font-bold transition-colors cursor-pointer">Reset all</button></div></div></div>`),Oh=G(`<!> <div><div class="h-10 bg-[#0d0d14] border-b border-white/8 flex items-center px-2 gap-1.5 shrink-0"><div class="w-6 h-6 bg-indigo-600 rounded-lg flex items-center justify-center text-white font-black text-sm leading-none shrink-0 shadow-lg shadow-indigo-600/30 select-none">/</div> <span class="text-[10px] font-bold text-white tracking-tight shrink-0">SLASHED</span> <span class="text-[9px] text-slate-500 font-mono uppercase tracking-widest truncate min-w-0"> </span> <!> <div class="flex-1 min-w-0"></div> <button><!></button> <button title="Undo (Ctrl+Z)" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <button title="Redo (Ctrl+Shift+Z)" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <div class="w-px h-3.5 bg-white/10 mx-0.5 shrink-0"></div> <button title="Import CSS / JSON" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer shrink-0"><!></button> <button title="Export CSS" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <button title="Reset all overrides" class="p-1 rounded text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <div class="w-px h-3.5 bg-white/10 mx-0.5 shrink-0"></div> <button title="Collapse panel" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer shrink-0"><!></button></div> <div class="flex flex-1 min-h-0"><!> <div class="flex-1 bg-[#0c0c15] flex flex-col min-h-0"><div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0"><span class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1"> </span></div> <div class="flex-1 min-h-0 flex flex-col overflow-hidden"><!></div></div></div> <!> <!></div>`,1);function kh(e,t){Ue(t,!0);let n=om.tokens??om,r=`slashed-overlay/open`,i=`slashed-overlay/domain`,a={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 o(e){let t={};for(let n of Object.keys(e)){let e=bl(n);t[e]=(t[e]??0)+1}return t}function s(e,t){try{let n=localStorage.getItem(e);return n===null?t:n!==`false`}catch{return t}}function c(e,t){try{return localStorage.getItem(e)??t}catch{return t}}let l=L(nn(s(r,!0))),u=L(nn(typeof window<`u`?window.matchMedia(`(max-width: 768px)`).matches:!1)),d=L(nn(Lc())),f=L(nn([])),p=L(nn([])),m=L(nn(c(i,`home`))),h=L(!1),g=L(!1),_=L(null),v=L(null);On(()=>{U(g)&&br().then(()=>U(_)?.focus())});let y=I(()=>Object.keys(U(d)).length),b=I(()=>o(U(d))),x=I(()=>U(f).length>0),S=I(()=>U(p).length>0);function C(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let w=L(nn(Cr(()=>({...U(d)})))),T=L(`idle`),E=I(()=>!C(U(d),U(w))),D=null;function O(){let e=document.getElementById(`slashed-frontend-overlay`);if(!e)return;let t=`var(--wp-admin--admin-bar--height, 32px)`;e.style.position=`fixed`,e.style.right=`0`,e.style.zIndex=`99998`,e.style.pointerEvents=`auto`,U(l)?(e.style.top=t,e.style.width=U(u)?`100vw`:`420px`,e.style.height=`calc(100vh - ${t})`):(e.style.top=`calc(${t} + 16px)`,e.style.width=`40px`,e.style.height=`64px`)}On(()=>{let e=U(d),t=requestAnimationFrame(()=>{Rc(e),Qc(document)});return()=>cancelAnimationFrame(t)}),On(()=>{!U(u)&&U(l)?document.documentElement.classList.add(`sf-panel-active`):document.documentElement.classList.remove(`sf-panel-active`)}),On(()=>{O()}),On(()=>{try{localStorage.setItem(r,String(U(l)))}catch{}}),On(()=>{try{localStorage.setItem(i,U(m))}catch{}});function k(){R(l,!U(l))}function ee(e){let t=U(d),n=typeof e==`function`?e(t):e;C(t,n)||(R(f,[...U(f).slice(-49),t],!0),R(p,[],!0),U(T)===`saved`&&R(T,`idle`)),R(d,n,!0)}async function te(){if(!U(E)||U(T)===`saving`)return;let e={...U(d)};R(T,`saving`);try{await Vc(U(d)),C(U(d),e)?(R(w,e,!0),R(T,`saved`),D&&clearTimeout(D),D=setTimeout(()=>{U(T)===`saved`&&R(T,`idle`),D=null},2e3)):R(T,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(T,`idle`)}}function ne(e,t){ee(n=>({...n,[e]:t}))}function A(e){ee(t=>{let n={...t};return delete n[e],n})}function j(e){ee(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function M(e){ee({...e})}function re(){R(g,!0)}function ie(){R(g,!1),ee({})}function ae(){R(g,!1)}function oe(){if(!U(f).length)return;let e=U(f)[U(f).length-1];R(p,[U(d),...U(p)],!0),R(f,U(f).slice(0,-1),!0),R(d,e,!0)}function se(){if(!U(p).length)return;let e=U(p)[0];R(f,[...U(f),U(d)],!0),R(p,U(p).slice(1),!0),R(d,e,!0)}function N(){let e=cc(U(d),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}function ce(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);typeof e==`object`&&e&&!Array.isArray(e)&&ee(Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e))))}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length&&ee(t=>({...t,...e}))}},n.readAsText(t)},e.click()}ra(()=>{let 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);let t=window.matchMedia(`(max-width: 768px)`),n=e=>{R(u,e.matches,!0)};t.addEventListener(`change`,n);let r=e=>{let t=e.key.toLowerCase();U(l)&&((e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`z`&&(e.preventDefault(),oe()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&t===`z`||t===`y`)&&(e.preventDefault(),se()),(e.ctrlKey||e.metaKey)&&!e.repeat&&t===`k`&&(e.preventDefault(),R(h,!U(h))),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`s`&&(e.preventDefault(),te()))},i=()=>k();return window.addEventListener(`keydown`,r),document.addEventListener(`slashed:toggle-overlay`,i),()=>{e.remove(),document.documentElement.classList.remove(`sf-panel-active`),t.removeEventListener(`change`,n),window.removeEventListener(`keydown`,r),document.removeEventListener(`slashed:toggle-overlay`,i),D&&clearTimeout(D)}});var le=Oh(),ue=B(le),de=e=>{var t=Th();ya(V(z(t),2),{class:`w-3 h-3 opacity-70 rotate-180`}),F(t),W(`click`,t,k),K(e,t)};J(ue,e=>{U(l)||e(de)});var fe=V(ue,2);let pe,me;var he=z(fe),ge=V(z(he),4),_e=z(ge,!0);F(ge);var ve=V(ge,2),ye=e=>{var t=Eh(),n=z(t,!0);F(t),H(()=>q(n,U(y))),K(e,t)};J(ve,e=>{U(y)>0&&e(ye)});var be=V(ve,4),xe=z(be),Se=e=>{Po(e,{class:`w-3 h-3 animate-spin`})},Ce=e=>{_a(e,{class:`w-3 h-3`})},we=e=>{ro(e,{class:`w-3 h-3`})};J(xe,e=>{U(T)===`saving`?e(Se):U(T)===`saved`?e(Ce,1):e(we,-1)}),F(be);var Te=V(be,2);Oo(z(Te),{class:`w-3 h-3`}),F(Te);var Ee=V(Te,2);Ya(z(Ee),{class:`w-3 h-3`}),F(Ee);var De=V(Ee,4);ja(z(De),{class:`w-3 h-3`}),F(De);var P=V(De,2);Ta(z(P),{class:`w-3 h-3`}),F(P);var Oe=V(P,2);wo(z(Oe),{class:`w-3 h-3`}),F(Oe);var ke=V(Oe,4);ya(z(ke),{class:`w-3 h-3`}),F(ke),F(he);var Ae=V(he,2),je=z(Ae);Xo(je,{get activeId(){return U(m)},onSelect:e=>{R(m,e,!0)},get overridesByDomain(){return U(b)}});var Me=V(je,2),Ne=z(Me),Pe=z(Ne),Fe=z(Pe,!0);F(Pe),F(Ne);var Ie=V(Ne,2);uh(z(Ie),{get domain(){return U(m)},get tokens(){return n},get overrides(){return U(d)},onSet:ne,onReset:A,onBulkChange:j,onApplyTheme:M,onSelectDomain:e=>{R(m,e,!0)},onResetAll:re}),F(Ie),F(Me),F(Ae);var Le=V(Ae,2),Re=e=>{vh(e,{get tokens(){return n},get overrides(){return U(d)},onNavigate:e=>{R(m,e,!0)},onClose:()=>{R(h,!1)}})};J(Le,e=>{U(h)&&e(Re)});var ze=V(Le,2),Be=e=>{var t=Dh(),n=z(t),r=V(z(n),2),i=z(r);F(r);var a=V(r,2),o=z(a);Zi(o,e=>R(_,e),()=>U(_));var s=V(o,2);Zi(s,e=>R(v,e),()=>U(v)),F(a),F(n),F(t),H(()=>q(i,`This will clear all ${U(y)??``} customisation${U(y)===1?``:`s`}.
+          You can still undo this before saving.`)),W(`keydown`,t,e=>{e.key===`Escape`&&(e.stopPropagation(),ae()),e.key===`Tab`&&(e.preventDefault(),document.activeElement===U(_)?U(v)?.focus():U(_)?.focus())}),W(`click`,o,ae),W(`click`,s,ie),K(e,t)};J(ze,e=>{U(g)&&e(Be)}),F(fe),H(e=>{pe=X(fe,1,`fixed right-0 z-[99998] 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":!U(l),"translate-x-0":U(l),"pointer-events-none":!U(l)}),me=Z(fe,`top: var(--wp-admin--admin-bar--height, 32px); width: ${U(u)?`100vw`:`420px`}; height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));`,me,{visibility:U(l)?void 0:`hidden`}),Q(fe,`aria-hidden`,!U(l)),fe.inert=!U(l)||void 0,q(_e,a[U(m)]??U(m)),be.disabled=!U(E)||U(T)===`saving`,Q(be,`title`,U(E)?`Save changes (Ctrl+S)`:`No unsaved changes`),Q(be,`aria-label`,U(T)===`saving`?`Saving changes`:U(E)?`Save changes`:`No unsaved changes`),X(be,1,e),Te.disabled=!U(x),Ee.disabled=!U(S),P.disabled=U(y)===0,Oe.disabled=U(y)===0,q(Fe,a[U(m)]??U(m))},[()=>yi([`p-1 rounded transition-colors cursor-pointer shrink-0 disabled:pointer-events-none`,U(T)===`saved`?`text-emerald-300`:U(E)?`text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10`:`text-slate-500 opacity-40`].join(` `))]),W(`click`,be,te),W(`click`,Te,oe),W(`click`,Ee,se),W(`click`,De,ce),W(`click`,P,N),W(`click`,Oe,re),W(`click`,ke,k),K(e,le),We()}Br([`click`,`keydown`]);function Ah(){return window.slashedApp?.cssUrl}function jh(e){try{return new URL(e,location.href).origin===location.origin}catch{return!1}}function Mh(){let e=document.getElementById(`slashed-frontend-overlay`);if(!e||e.shadowRoot)return;let t=e.attachShadow({mode:`open`}),n=document.createElement(`div`);t.appendChild(n);let r=!1,i=()=>{r||(Zr(kh,{target:n}),r=!0,e.setAttribute(`data-slashed-ready`,``))},a=Ah();if(a&&jh(a)){let e=document.createElement(`link`);e.rel=`stylesheet`,e.href=a;let n=setTimeout(i,5e3),r=()=>{clearTimeout(n),i()};e.addEventListener(`load`,r),e.addEventListener(`error`,r),t.appendChild(e)}else i()}document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,Mh):Mh();
 //# sourceMappingURL=app.js.map
\ No newline at end of file