mnfst 0.5.64 → 0.5.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -42,6 +42,30 @@ For full documentation visit [manifestjs.org](https://manifestjs.org).
42
42
 
43
43
  <br>
44
44
 
45
+ ## 📦 Publishing
46
+
47
+ Each package publishes independently to npm. The `release:*` scripts auto-bump the patch version (e.g. `0.5.65 → 0.5.66`) and publish — no manual version edits needed. The bump is **not** auto-committed, so it lands in your working tree alongside whatever changes triggered the release.
48
+
49
+ | Command | Package | Path |
50
+ |---|---|---|
51
+ | `npm run release` | `mnfst` | (root) |
52
+ | `npm run release:run` | `mnfst-run` | `packages/run/` |
53
+ | `npm run release:render` | `mnfst-render` | `packages/render/` |
54
+ | `npm run release:starter` | `mnfst-starter` | `packages/create-starter/` |
55
+
56
+ Run only the scripts whose package you actually changed.
57
+
58
+ For a **minor** or **major** bump, run `npm version minor` (or `major`) inside the relevant package directory before publishing:
59
+ ```sh
60
+ cd packages/render
61
+ npm version minor --no-git-tag-version
62
+ npm publish --auth-type=web
63
+ ```
64
+
65
+ After publishing, commit the version bump(s) along with your changes and push.
66
+
67
+ <br>
68
+
45
69
  ## 📄 License
46
70
 
47
71
  Manifest is provided under MIT license.
@@ -340,7 +340,10 @@
340
340
  }
341
341
  }
342
342
 
343
- /* Solid options */
343
+ /* Per-stop solid panel (inside the open-stop accordion) — keep the
344
+ canvas compact so the menu stays well-proportioned even when the
345
+ parent picker is gradient-only and the menu inherits its height
346
+ from this nested panel. */
344
347
  & [x-colorpicker\.solid] {
345
348
  padding: 0;
346
349
 
@@ -497,8 +497,9 @@ function initializeColorpickerPlugin() {
497
497
  // "colorpicker": ["myColors", "brand"] // multiple sources
498
498
  // }
499
499
  //
500
- // The colorpicker plugin reads $x.manifest.colorpicker to know which $x.* sources to
501
- // treat as library content, then merges them in listed order. Each source may contain:
500
+ // The colorpicker plugin scans $x.manifest.data for entries flagged with a
501
+ // `colorpicker:` key, then merges the loaded $x.<name> values in declaration
502
+ // order. Each source may contain:
502
503
  // _tailwind: (optional) replaces the built-in Tailwind group entirely
503
504
  // _ios: (optional) replaces the built-in iOS group entirely
504
505
  // <Any Name>: custom groups appended to the library after built-ins
@@ -544,7 +545,7 @@ function initializeColorpickerPlugin() {
544
545
  const groups = [];
545
546
  if (recent.length) {
546
547
  const recentGroup = normalizeGroup(recent, 'Recent');
547
- recentGroup._isRecent = true; // marker for contextmenu binding
548
+ recentGroup._isRecent = true; // marker renderer picks the `library-recent-swatch` template over `library-swatch`
548
549
  groups.push(recentGroup);
549
550
  }
550
551
 
@@ -566,6 +567,58 @@ function initializeColorpickerPlugin() {
566
567
  return groups;
567
568
  }
568
569
 
570
+ // Walk a normalized groups array and resolve any reference-style strings in
571
+ // user-facing labels (group / palette / swatch names) against Alpine's scope.
572
+ // Two reference shapes are recognized:
573
+ // • Bare path: "$x.colorLabels.primary" → Alpine.evaluate(...)
574
+ // • Template: "${$locale.t('brand.primary')}" → Alpine.evaluate(...) as a literal
575
+ // Plain strings pass through unchanged. Failed lookups return the original
576
+ // string so a missing key surfaces as-is rather than rendering empty.
577
+ //
578
+ // Reading via Alpine.evaluate inside the surrounding render effect registers
579
+ // reactive deps on the referenced data — locale switches and content updates
580
+ // re-trigger the render automatically.
581
+ function _resolveLibraryRefs(groups) {
582
+ if (!Array.isArray(groups) || groups.length === 0) return groups;
583
+ const ctx = document.body;
584
+ const resolve = (val) => {
585
+ if (typeof val !== 'string' || val.length === 0) return val;
586
+ const trimmed = val.trim();
587
+ const isBareRef = trimmed.startsWith('$x.') || trimmed.startsWith('$locale')
588
+ || trimmed.startsWith('$x[') || trimmed.startsWith('$locale[');
589
+ const hasInterp = /\$\{[^}]+\}/.test(trimmed);
590
+ if (!isBareRef && !hasInterp) return val;
591
+ try {
592
+ if (window.Alpine?.evaluate) {
593
+ const expr = isBareRef && !hasInterp ? trimmed : '`' + trimmed + '`';
594
+ const out = Alpine.evaluate(ctx, expr);
595
+ if (out == null) return val;
596
+ return typeof out === 'string' ? out : String(out);
597
+ }
598
+ } catch {}
599
+ return val;
600
+ };
601
+ for (const g of groups) {
602
+ if (g && typeof g.name === 'string') g.name = resolve(g.name);
603
+ if (Array.isArray(g?.palettes)) {
604
+ for (const p of g.palettes) {
605
+ if (p && typeof p.name === 'string') p.name = resolve(p.name);
606
+ if (Array.isArray(p?.colors)) {
607
+ for (const c of p.colors) {
608
+ if (c && typeof c.name === 'string') c.name = resolve(c.name);
609
+ }
610
+ }
611
+ }
612
+ }
613
+ if (Array.isArray(g?.colors)) {
614
+ for (const c of g.colors) {
615
+ if (c && typeof c.name === 'string') c.name = resolve(c.name);
616
+ }
617
+ }
618
+ }
619
+ return groups;
620
+ }
621
+
569
622
  // Returns an object that is BOTH callable (for localization) AND spreadable (for composition).
570
623
  // `builder` is a function that takes optional labels and returns a preset object.
571
624
  // Spreading the returned value exposes the default (unlabeled) preset's top-level keys.
@@ -1587,12 +1640,21 @@ function initializeColorpickerPlugin() {
1587
1640
  evalFn(v => { this._libraryResolvedData = v; this._doRenderLibrary(); });
1588
1641
  });
1589
1642
  } else if (window.Alpine?.effect) {
1590
- // Zero-config — read $x.manifest.colorpicker (string or array of source names)
1591
- // and auto-merge those $x.* sources into the library. Everything happens
1592
- // synchronously inside the effect so Alpine tracks all reactive deps ($locale,
1593
- // $x.manifest, each $x.<name>) and re-runs the full pass on any change.
1594
- // Evaluate against document.body so $x magic is always in scope (the
1595
- // container may be detached/popover content without its own scope chain).
1643
+ // Zero-config — scan `$x.manifest.data` for entries flagged with a
1644
+ // `colorpicker:` key (mirroring how `locales:`, `appwriteTableId`, etc.
1645
+ // self-identify their plugin). Each flagged entry is loaded normally
1646
+ // by the data plugin; we collect the resulting `$x.<name>` values and
1647
+ // merge them into the library in declaration order.
1648
+ //
1649
+ // Multiple sources are supported — split your default-palette overrides
1650
+ // (`_tailwind`, `_ios`) and your custom palettes across as many files
1651
+ // as you like. Order in `manifest.data` determines render order.
1652
+ //
1653
+ // Everything happens synchronously inside the effect so Alpine tracks
1654
+ // all reactive deps ($locale, $x.manifest, each $x.<name>) and re-runs
1655
+ // the full pass on any change. Evaluate against document.body so $x
1656
+ // magic is always in scope (the container may be detached/popover
1657
+ // content without its own scope chain).
1596
1658
  const evalCtx = document.body;
1597
1659
 
1598
1660
  // Manifest's data plugin REPLACES the $x.<source> proxy reference on load
@@ -1612,10 +1674,24 @@ function initializeColorpickerPlugin() {
1612
1674
  catch { return recentKey + '#' + names.join('|') + '::[unserializable]'; }
1613
1675
  };
1614
1676
  const readSources = () => {
1615
- let flag = null;
1616
- try { flag = Alpine.evaluate(evalCtx, '$x && $x.manifest && $x.manifest.colorpicker'); } catch {}
1617
- const raw = !flag ? [] : (Array.isArray(flag) ? flag : [flag]);
1618
- const names = raw.filter(n => typeof n === 'string' && n.trim().length > 0);
1677
+ // Discover names by scanning manifest.data for entries with a
1678
+ // `colorpicker` key. The key may hold a path string or a locale
1679
+ // map the data plugin handles loading either shape; we just
1680
+ // need the set of names whose loaded data should feed the library.
1681
+ let dataMap = null;
1682
+ try { dataMap = Alpine.evaluate(evalCtx, '$x && $x.manifest && $x.manifest.data'); } catch {}
1683
+ const names = [];
1684
+ if (dataMap && typeof dataMap === 'object') {
1685
+ for (const name of Object.keys(dataMap)) {
1686
+ if (name.startsWith('$') || name.startsWith('_')) continue;
1687
+ if (name === 'valueOf' || name === 'toString' || name === 'contentType') continue;
1688
+ const entry = dataMap[name];
1689
+ if (entry && typeof entry === 'object' && !Array.isArray(entry)
1690
+ && entry.colorpicker !== undefined) {
1691
+ names.push(name);
1692
+ }
1693
+ }
1694
+ }
1619
1695
  const collected = names.map(name => {
1620
1696
  try { return Alpine.evaluate(evalCtx, '$x.' + name); } catch { return null; }
1621
1697
  });
@@ -1663,6 +1739,7 @@ function initializeColorpickerPlugin() {
1663
1739
  },
1664
1740
 
1665
1741
  _resolveLibraryGroups() {
1742
+ let groups;
1666
1743
  if (this.libraryRootValue) {
1667
1744
  let data = this._libraryResolvedData;
1668
1745
  if (data == null
@@ -1670,13 +1747,19 @@ function initializeColorpickerPlugin() {
1670
1747
  || (typeof data === 'object' && !Array.isArray(data) && _cleanLibraryEntries(data).length === 0)) {
1671
1748
  data = buildDefaultLibrary();
1672
1749
  }
1673
- let groups = normalizeLibraryInput(data);
1750
+ groups = normalizeLibraryInput(data);
1674
1751
  const totalSwatches = groups.reduce((n, g) => n + (g.colors?.length || 0)
1675
1752
  + (g.palettes?.reduce((m, p) => m + (p.colors?.length || 0), 0) || 0), 0);
1676
1753
  if (totalSwatches === 0) groups = normalizeLibraryInput(buildDefaultLibrary());
1677
- return groups;
1754
+ } else {
1755
+ groups = composeLibraryFromSources(this._libraryDiscoveredData || []);
1678
1756
  }
1679
- return composeLibraryFromSources(this._libraryDiscoveredData || []);
1757
+ // Resolve any `$x.<path>` or `${...}` template-literal references in
1758
+ // group / palette / swatch names, so a single colorpicker file can
1759
+ // chain into a separate localization data source without dev-side
1760
+ // template tweaks. Reactive reads inside `Alpine.evaluate` register
1761
+ // deps on the surrounding render effect → locale switches re-render.
1762
+ return _resolveLibraryRefs(groups);
1680
1763
  },
1681
1764
 
1682
1765
  // Render ONE container (used when a new container registers post-mount
@@ -2020,11 +2103,37 @@ function initializeColorpickerPlugin() {
2020
2103
  this._injectDefaultUI();
2021
2104
  }
2022
2105
 
2023
- // Initialize from hidden input value
2024
- const initVal = this.hiddenInput ? this.hiddenInput.value : '#000000';
2106
+ // Auto-popovers register their picker state BEFORE the swatch hook gets
2107
+ // a chance to set `x-dropdown` on the trigger element, so the early
2108
+ // triggerBtn lookup misses. By mount-time (setTimeout 0) the swatch
2109
+ // wiring has finished, so re-query if we don't have one yet.
2110
+ if (!this.triggerBtn && this.rootEl.id) {
2111
+ this.triggerBtn = document.querySelector(`[x-dropdown="${this.rootEl.id}"]`);
2112
+ }
2113
+
2114
+ // Initialize the picker state from whatever source has a real value.
2115
+ // Resolution priority matches the retarget flow on swatch-click so the
2116
+ // picker's reactive value reads (`$colorpicker(id)`, .hex, .css, etc.)
2117
+ // are correct from first paint — not just after the user opens the menu.
2118
+ // 1. trigger swatch's x-model getter
2119
+ // 2. trigger swatch's paired hidden input (form-participation flow)
2120
+ // 3. trigger swatch's `value` attribute
2121
+ // 4. picker container's own hidden input child
2122
+ // 5. fallback '#000000'
2123
+ let initVal = '';
2124
+ const tb = this.triggerBtn;
2125
+ if (tb) {
2126
+ if (tb._cpModelGetter) {
2127
+ tb._cpModelGetter(v => { if (typeof v === 'string' && v.length) initVal = v; });
2128
+ }
2129
+ if (!initVal && tb._cpHiddenInput && tb._cpHiddenInput.value) initVal = tb._cpHiddenInput.value;
2130
+ if (!initVal && tb.getAttribute('value')) initVal = tb.getAttribute('value');
2131
+ }
2132
+ if (!initVal && this.hiddenInput) initVal = this.hiddenInput.value;
2025
2133
  this.setFromString(initVal || '#000000');
2026
2134
 
2027
- // Seed trigger swatch
2135
+ // Seed trigger swatch CSS var so the border-color derivation paints
2136
+ // correctly before any interaction.
2028
2137
  if (this.triggerBtn) this.triggerBtn.style.setProperty('--color-picker-swatch', this.toSwatchColor());
2029
2138
 
2030
2139
  // Mount all solid-panel instances (Solid tab + any others)
@@ -2492,6 +2601,20 @@ function initializeColorpickerPlugin() {
2492
2601
  const wireSwatchTo = (target) => {
2493
2602
  if (!target) return;
2494
2603
 
2604
+ // Alias the picker's api under the swatch's id so consumers reading
2605
+ // via `$colorpicker('<swatch-id>')` track the right reactive key
2606
+ // (otherwise the auto-popover registers under `colorpicker-swatch-N`
2607
+ // and the consumer effect's tracked dep on `_pickerRegistry['<swatch-id>']`
2608
+ // would never fire). Run after mount so the api exists.
2609
+ const aliasToSwatchId = () => {
2610
+ if (!el.id) return;
2611
+ const st = target._colorpickerState
2612
+ || target.querySelector?.('[x-colorpicker]')?._colorpickerState;
2613
+ if (st && st.api) _pickerRegistry[el.id] = st.api;
2614
+ else setTimeout(aliasToSwatchId, 0);
2615
+ };
2616
+ aliasToSwatchId();
2617
+
2495
2618
  const isDialog = target.tagName === 'DIALOG';
2496
2619
 
2497
2620
  // For non-dialog popover targets (menu / div with popover), delegate
@@ -0,0 +1,109 @@
1
+ /* Manifest Colors */
2
+
3
+ // Initialize plugin when either DOM is ready or Alpine is ready
4
+ function initializeColorsPlugin() {
5
+
6
+ // Initialize color mode state with Alpine reactivity
7
+ const colors = Alpine.reactive({
8
+ current: localStorage.getItem('theme') || 'system'
9
+ })
10
+
11
+ // Apply initial color mode
12
+ applyColorMode(colors.current)
13
+
14
+ // Setup system color mode listener
15
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
16
+ mediaQuery.addEventListener('change', () => {
17
+ if (colors.current === 'system') {
18
+ applyColorMode('system')
19
+ }
20
+ })
21
+
22
+ // Register colors directive
23
+ Alpine.directive('colors', (el, { expression }, { evaluate, cleanup }) => {
24
+
25
+ const handleClick = () => {
26
+ const newMode = expression === 'toggle'
27
+ ? (document.documentElement.classList.contains('dark') ? 'light' : 'dark')
28
+ : evaluate(expression)
29
+ setColorMode(newMode)
30
+ }
31
+
32
+ el.addEventListener('click', handleClick)
33
+ cleanup(() => el.removeEventListener('click', handleClick))
34
+ })
35
+
36
+ // Add $colors magic method
37
+ Alpine.magic('colors', () => ({
38
+ get current() {
39
+ return colors.current
40
+ },
41
+ set current(value) {
42
+ setColorMode(value)
43
+ }
44
+ }))
45
+
46
+ function setColorMode(newMode) {
47
+ if (newMode === 'toggle') {
48
+ newMode = colors.current === 'light' ? 'dark' : 'light'
49
+ }
50
+
51
+ // Update color mode state
52
+ colors.current = newMode
53
+ localStorage.setItem('theme', newMode)
54
+
55
+ // Apply color mode
56
+ applyColorMode(newMode)
57
+ }
58
+
59
+ function applyColorMode(mode) {
60
+ const isDark = mode === 'system'
61
+ ? window.matchMedia('(prefers-color-scheme: dark)').matches
62
+ : mode === 'dark'
63
+
64
+ // Update document classes
65
+ document.documentElement.classList.remove('light', 'dark')
66
+ document.documentElement.classList.add(isDark ? 'dark' : 'light')
67
+
68
+ // Update meta theme-color
69
+ const metaThemeColor = document.querySelector('meta[name="theme-color"]')
70
+ if (metaThemeColor) {
71
+ metaThemeColor.setAttribute('content', isDark ? '#000000' : '#FFFFFF')
72
+ }
73
+ }
74
+ }
75
+
76
+ // Track initialization to prevent duplicates
77
+ let colorsPluginInitialized = false;
78
+
79
+ function ensureColorsPluginInitialized() {
80
+ if (colorsPluginInitialized) return;
81
+ if (!window.Alpine || typeof window.Alpine.directive !== 'function') return;
82
+
83
+ colorsPluginInitialized = true;
84
+ initializeColorsPlugin();
85
+ }
86
+
87
+ // Expose on window for loader to call if needed
88
+ window.ensureColorsPluginInitialized = ensureColorsPluginInitialized;
89
+
90
+ // Handle both DOMContentLoaded and alpine:init
91
+ if (document.readyState === 'loading') {
92
+ document.addEventListener('DOMContentLoaded', ensureColorsPluginInitialized);
93
+ }
94
+
95
+ document.addEventListener('alpine:init', ensureColorsPluginInitialized);
96
+
97
+ // If Alpine is already initialized when this script loads, initialize immediately
98
+ if (window.Alpine && typeof window.Alpine.directive === 'function') {
99
+ setTimeout(ensureColorsPluginInitialized, 0);
100
+ } else {
101
+ // If document is already loaded but Alpine isn't ready yet, wait for it
102
+ const checkAlpine = setInterval(() => {
103
+ if (window.Alpine && typeof window.Alpine.directive === 'function') {
104
+ clearInterval(checkAlpine);
105
+ ensureColorsPluginInitialized();
106
+ }
107
+ }, 10);
108
+ setTimeout(() => clearInterval(checkAlpine), 5000);
109
+ }
@@ -162,7 +162,7 @@ window.ManifestComponentsProcessor = {
162
162
  }
163
163
  if (element.hasAttribute('data-pre-rendered') || element.hasAttribute('data-processed')) {
164
164
  // Pre-rendered components skip re-fetching, but hydrate-marked content
165
- // still needs Alpine initialization (x-data, @click, :class, x-theme etc.).
165
+ // still needs Alpine initialization (x-data, @click, :class, x-colors etc.).
166
166
  if (element.hasAttribute('data-pre-rendered') && window.Alpine && typeof window.Alpine.initTree === 'function') {
167
167
  try { window.Alpine.initTree(element); } catch (e) { /* graceful */ }
168
168
  }
package/lib/manifest.css CHANGED
@@ -1051,7 +1051,10 @@
1051
1051
  }
1052
1052
  }
1053
1053
 
1054
- /* Solid options */
1054
+ /* Per-stop solid panel (inside the open-stop accordion) — keep the
1055
+ canvas compact so the menu stays well-proportioned even when the
1056
+ parent picker is gradient-only and the menu inherits its height
1057
+ from this nested panel. */
1055
1058
  & [x-colorpicker\.solid] {
1056
1059
  padding: 0;
1057
1060
 
@@ -3291,14 +3294,13 @@
3291
3294
 
3292
3295
  /* Ghost */
3293
3296
  :where(.ghost) {
3294
- color: var(--color-content-stark, oklch(16.6% 0.026 267));
3295
3297
  background-color: transparent;
3296
3298
 
3297
3299
  &:hover {
3298
3300
  background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
3299
3301
  }
3300
3302
 
3301
- &.brand:hover {
3303
+ /* &.brand:hover {
3302
3304
  color: var(--color-brand-inverse, #763518)
3303
3305
  }
3304
3306
 
@@ -3308,7 +3310,7 @@
3308
3310
 
3309
3311
  &.negative:hover {
3310
3312
  color: var(--color-negative-inverse, white)
3311
- }
3313
+ } */
3312
3314
  }
3313
3315
 
3314
3316
  /* Hug */
@@ -3331,11 +3333,6 @@
3331
3333
  border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 80%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
3332
3334
  }
3333
3335
 
3334
- /* Selected */
3335
- :where(.selected) {
3336
- background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
3337
- }
3338
-
3339
3336
  /* Transparent */
3340
3337
  :where(.transparent) {
3341
3338
  color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
@@ -3431,7 +3428,7 @@
3431
3428
  -webkit-appearance: none;
3432
3429
  appearance: none;
3433
3430
  display: none;
3434
- margin: 0;
3431
+ margin: 0
3435
3432
  }
3436
3433
  }
3437
3434
 
@@ -3504,7 +3501,7 @@
3504
3501
  }
3505
3502
 
3506
3503
  &>a:not(:where(h1, h2, h3, h4, h5, h6, p, small, figcaption, label, li, blockquote, pre code, code, kbd, span, mark, [role=button]) a) {
3507
- margin-top: calc(1rem * 1.4);
3504
+ margin-top: calc(1rem * 1.4)
3508
3505
  }
3509
3506
 
3510
3507
  &>blockquote {
@@ -3547,7 +3544,7 @@
3547
3544
  }
3548
3545
 
3549
3546
  &>h4+p {
3550
- margin-top: 0.25rem;
3547
+ margin-top: 0.25rem
3551
3548
  }
3552
3549
 
3553
3550
  &>h5 {
@@ -3562,7 +3559,12 @@
3562
3559
 
3563
3560
  &>hr {
3564
3561
  margin-top: calc(1rem * 3);
3565
- margin-bottom: calc(1rem * 3)
3562
+ margin-bottom: calc(1rem * 3);
3563
+ }
3564
+
3565
+ &>details+hr:has(+ details) {
3566
+ margin-top: 1rem;
3567
+ margin-bottom: 1rem
3566
3568
  }
3567
3569
 
3568
3570
  &>img,
@@ -3613,7 +3615,7 @@
3613
3615
  --color-field-inverse: var(--color-brand-inverse, #763518);
3614
3616
  --color-content-stark: var(--color-brand-content, #de6618);
3615
3617
  --color-content-neutral: color-mix(in oklch, var(--color-brand-content, #de6618) 85%, transparent);
3616
- --color-content-subtle: color-mix(in oklch, var(--color-brand-content, #de6618) 70%, transparent);
3618
+ --color-content-subtle: color-mix(in oklch, var(--color-brand-content, #de6618) 70%, transparent)
3617
3619
  }
3618
3620
 
3619
3621
  /* Accent colors */
@@ -3623,7 +3625,7 @@
3623
3625
  --color-field-inverse: var(--color-accent-inverse, oklch(100% 0 0));
3624
3626
  --color-content-stark: var(--color-accent-content, oklch(16.6% 0.026 267));
3625
3627
  --color-content-neutral: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 85%, transparent);
3626
- --color-content-subtle: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 70%, transparent);
3628
+ --color-content-subtle: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 70%, transparent)
3627
3629
  }
3628
3630
 
3629
3631
  /* Negative colors */
@@ -3633,7 +3635,7 @@
3633
3635
  --color-field-inverse: var(--color-negative-inverse, white);
3634
3636
  --color-content-stark: var(--color-negative-content, #ef4444);
3635
3637
  --color-content-neutral: color-mix(in oklch, var(--color-negative-content, #ef4444) 85%, transparent);
3636
- --color-content-subtle: color-mix(in oklch, var(--color-negative-content, #ef4444) 70%, transparent);
3638
+ --color-content-subtle: color-mix(in oklch, var(--color-negative-content, #ef4444) 70%, transparent)
3637
3639
  }
3638
3640
 
3639
3641
  /* Positive colors */
@@ -3643,19 +3645,19 @@
3643
3645
  --color-field-inverse: var(--color-positive-inverse, white);
3644
3646
  --color-content-stark: var(--color-positive-content, #16a34a);
3645
3647
  --color-content-neutral: color-mix(in oklch, var(--color-positive-content, #16a34a) 85%, transparent);
3646
- --color-content-subtle: color-mix(in oklch, var(--color-positive-content, #16a34a) 70%, transparent);
3648
+ --color-content-subtle: color-mix(in oklch, var(--color-positive-content, #16a34a) 70%, transparent)
3647
3649
  }
3648
3650
 
3649
3651
  /* Text colors */
3650
3652
  :where(.stark) {
3651
- color: var(--color-content-stark, oklch(16.6% 0.026 267));
3653
+ color: var(--color-content-stark, oklch(16.6% 0.026 267))
3652
3654
  }
3653
3655
 
3654
3656
  :where(.neutral) {
3655
- color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
3657
+ color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
3656
3658
  }
3657
3659
 
3658
3660
  :where(.subtle) {
3659
- color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27));
3661
+ color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27))
3660
3662
  }
3661
3663
  }
package/lib/manifest.js CHANGED
@@ -191,7 +191,7 @@
191
191
  'markdown',
192
192
  'svg',
193
193
  'code',
194
- 'themes',
194
+ 'colors',
195
195
  'toasts',
196
196
  'tooltips',
197
197
  'dropdowns',
@@ -1 +1 @@
1
- @layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:where(:root){-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;overflow-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-rendering:optimizeLegibility}:host,:where(html){font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;line-height:1.5;max-width:100vw;overflow-x:hidden;tab-size:4;width:100vw;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}&:has(dialog:popover-open){overflow:hidden}}:where(body){line-height:inherit;margin:0;max-width:100vw;min-height:100vh}:where(a){color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where([aria-controls]){cursor:pointer}:where([aria-hidden=false][hidden]){display:initial}:where([aria-hidden=false][hidden]:not(:focus)){clip:rect(0,0,0,0);position:absolute}:where(audio:not([controls])){display:none;height:0}:where(b,strong){font-weight:bolder}:where(button,input,optgroup,select,textarea){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}:where(button,select){text-transform:none}:where(button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button){appearance:button;background-color:transparent;background-image:none}:where(::-webkit-file-upload-button){-webkit-appearance:button;font:inherit}:where(::-webkit-inner-spin-button,::-webkit-outer-spin-button){height:auto}:where(::-webkit-search-decoration){-webkit-appearance:none}:where(button,[role=button]){cursor:pointer}:where(code,samp,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}:where([dir=rtl]){direction:rtl}:where([disabled],:disabled,[aria-disabled=true],.disabled){cursor:default;opacity:.5;pointer-events:none}:where(figcaption){font-size:75%}:where(figure){display:block;padding:0}:where(::file-selector-button){margin-inline-end:4px}:where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}:where(hr){background-color:var(--color-line,oklch(48.3% .006422 17.4/.15));border:0;color:inherit;height:1px}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,video){height:auto;max-width:100%}:where(::-webkit-autofill,:-webkit-autofill:focus){transition:background-color 0s 600000s,color 0s 600000s}:where(::-webkit-date-and-time-value){min-height:1lh;text-align:inherit}:where(::-webkit-datetime-edit){display:inline-flex}:where(::-webkit-datetime-edit-fields-wrapper){padding:0}:where(::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field){padding-block:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}:where(small){font-size:80%}:where(span){color:inherit}:where(sub,sup){font-size:50%;line-height:0;position:relative;vertical-align:baseline}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(svg):not([fill]){fill:currentColor}:where(svg):not(:root){overflow:hidden}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}:where(::placeholder){color:#9ca3af;opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){:where(::placeholder){color:color-mix(in oklab,currentcolor 50%,transparent)}}:where([popover]){display:none;transition:opacity .15s ease-in,scale .15s ease-in,display .15s ease-in;transition-behavior:allow-discrete;&:popover-open{display:flex}@starting-style{opacity:0;scale:.9}&:not(:popover-open){display:none!important;opacity:0;scale:1;transition-duration:.15s;transition-timing-function:ease-out}}:where(progress){vertical-align:baseline}:where([type=search]){-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}:where(summary){display:list-item}:where(textarea){resize:vertical}[hidden],[un-cloak],[v-cloak],[x-cloak]{display:none}@media (-webkit-min-device-pixel-ratio:2){:where(html){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true]):after,:not([aria-busy=true]):before{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:scroll!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}@media (prefers-reduced-motion:no-preference){[dir=rtl] progress:indeterminate{animation-direction:reverse}}::view-transition-group(*){animation-duration:var(--view-transition-duration,.2s);animation-timing-function:var(--view-transition-easing,ease)}[data-no-view-transition],canvas,iframe,video{view-transition-name:none}}@view-transition{navigation:auto}@layer components{:where(details):not(.unstyle){transition:var(--transition,all .05s ease-in-out);width:100%;&[open]>summary:before{transform:rotate(90deg)}& [open] summary{margin-bottom:calc(var(--spacing, .25rem)*4)}&>:not(summary){padding:var(--spacing-field-padding,.625rem) 0}:where(summary){align-items:center;color:var(--color-content-stark,oklch(16.6% .026 267));cursor:pointer;display:flex;font-weight:700;justify-content:space-between;position:relative;transition:var(--transition,all .05s ease-in-out);user-select:none;&::-webkit-details-marker,&::marker{content:"";display:none}&:hover{color:color-mix(in oklch,var(--color-surface-1,oklch(98.17% .0005 95.87)) 40%,var(--color-content-stark,oklch(16.6% .026 267)))}&:active{color:color-mix(in oklch,var(--color-surface-1,oklch(98.17% .0005 95.87)) 50%,var(--color-content-stark,oklch(16.6% .026 267)))}&:before{background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 50%,var(--color-field-inverse,oklch(16.6% .026 267)));content:"";height:1rem;-webkit-mask-image:var(--icon-accordion,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath d='m184.49 136.49-80 80a12 12 0 0 1-17-17L159 128 87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));mask-image:var(--icon-accordion,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath d='m184.49 136.49-80 80a12 12 0 0 1-17-17L159 128 87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;order:1;transform:rotate(0);transition:transform .25s ease;width:1rem}}}[dir=rtl] :where(details):not(.unstyle){& summary:before{transform:rotate(180deg)}&[open]>summary:before{transform:rotate(90deg)}}}@layer utilities{:where(.avatar){align-items:center;background-clip:content-box;background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));background-position:50%;background-size:cover;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,oklch(16.6% .026 267));display:flex;flex-flow:row wrap;flex-shrink:0;font-weight:700;height:var(--spacing-field-height,2.25rem);justify-content:center;position:relative;text-align:center;text-transform:uppercase;width:var(--spacing-field-height,2.25rem);&[x-icon]{color:var(--color-content-subtle,oklch(67.4% .0318 251.27))}:where(img){border-radius:inherit;height:100%;left:0;object-fit:cover;object-position:center;position:absolute;top:0;transition:var(--transition,all .05s ease-in-out);width:100%}:where(figure){background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));border:1px solid var(--color-page,oklch(100% 0 0));border-radius:50%;bottom:-3px;height:9px;position:absolute;right:-3px;width:9px;z-index:1}}:where(button.avatar,label.avatar){background-blend-mode:normal;padding:0;&:hover{background-blend-mode:multiply;background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48));& img{filter:brightness(.9)}}}:where(.avatar-wide){align-items:center;display:flex;flex-flow:row;gap:1.5ch;justify-content:start;max-width:100%;overflow:hidden;width:100%;& span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}:where(button.avatar-wide){height:fit-content;padding:var(--spacing,.25rem);padding-inline-end:1.5ch;&:hover .avatar{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48));transition:var(--transition,all .05s ease-in-out)}}:where([role=group]:has(.avatar,button.avatar)){align-items:center;display:flex;flex-flow:row nowrap;:where(.avatar){box-shadow:0 0 0 3px var(--color-page,oklch(100% 0 0));margin-inline-end:calc(var(--spacing-field-height, 2.25rem)*-.3)}}}@layer components{:where(button:not(.link),[role=button],[type=button],[type=reset],[type=submit],select):not(.unstyle){align-items:center;appearance:button;background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));border:0 solid transparent;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,oklch(16.6% .026 267));cursor:pointer;display:inline-flex;flex-flow:row;gap:.375rem;height:var(--spacing-field-height,2.25rem);justify-content:center;margin:0;max-width:100%;min-width:var(--spacing-field-height,2.25rem);outline-color:var(--color-line,oklch(48.3% .006422 17.4/.15));overflow:hidden;padding:0 var(--spacing-field-padding,.625rem);text-overflow:ellipsis;transition:var(--transition,all .05s ease-in-out);white-space:nowrap;width:fit-content;& [x-icon],& span{color:inherit}& span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&:has(>svg:only-child){font-size:1rem;padding:0}& svg{margin-left:auto;margin-right:auto}&:active,&:hover{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}&:focus-visible{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26))}}:where(select):not(.unstyle){appearance:base-select;&::picker-icon{content:"⌄";font-size:20px;height:calc(var(--spacing-field-height, 2.25rem)*.5);line-height:.4;transform:scaleY(.7)}}}@layer components{input[type=checkbox]:not([role=switch],.unstyle){border-radius:.4rem;cursor:pointer;height:calc(var(--spacing-field-height, 2.25rem)*.6);max-width:calc(var(--spacing-field-height, 2.25rem)*.6);min-width:calc(var(--spacing-field-height, 2.25rem)*.6);padding:0;position:relative;width:calc(var(--spacing-field-height, 2.25rem)*.6);&:checked{&:active,&:hover{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48));border-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}}&:after{background-color:var(--color-field-inverse,oklch(16.6% .026 267));content:"";height:60%;left:50%;-webkit-mask-image:var(--icon-checkbox,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11 2-2 5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));mask-image:var(--icon-checkbox,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11 2-2 5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) scale(0);transform-origin:center;transition:var(--transition,all .05s ease-in-out);width:60%}&:checked:after{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}}:root{--color-picker-swatch:var(--color-line);--icon-color-solid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-paint-roller-icon lucide-paint-roller' viewBox='0 0 24 24'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");--icon-color-gradient:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-blend-icon lucide-blend' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Ccircle cx='15' cy='15' r='7'/%3E%3C/svg%3E");--icon-color-library:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-swatch-book-icon lucide-swatch-book' viewBox='0 0 24 24'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7M7 17h.01'/%3E%3Cpath 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'/%3E%3C/svg%3E");--icon-color-grab:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-pipette-icon lucide-pipette' viewBox='0 0 24 24'%3E%3Cpath d='m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12'/%3E%3Cpath d='m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3zM2 22l.414-.414'/%3E%3C/svg%3E");--icon-alpha-pattern:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='gray' d='M0 0h1v1H0zM1 1h1v1H1z' opacity='.15'/%3E%3C/svg%3E")}@layer components{:where(input[type=color]){appearance:none;-webkit-appearance:none;&::-webkit-color-swatch-wrapper{padding:0}&::-webkit-color-swatch{border:0}&::-moz-color-swatch{border:0}}}@layer utilities{:where([x-colorpicker\.swatch],input[type=color]):not(.unstyle){background:var(--color-picker-swatch,#000);border-color:oklch(from var(--color-picker-swatch,#000) calc(l + (.5 - l) * .35) c calc(h + 0));border-radius:var(--radius,.5rem);border-style:solid;border-width:1px;cursor:pointer;height:var(--spacing-field-height,2.25rem);max-width:var(--spacing-field-height,2.25rem);min-width:var(--spacing-field-height,2.25rem);overflow:hidden;padding:0;position:relative;transition:var(--transition);width:var(--spacing-field-height,2.25rem);&:active,&:focus,&:focus-visible,&:hover{border-color:oklch(from var(--color-picker-swatch,#000) calc(l + (.5 - l) * .35) c calc(h + 0)/.5)}&:before{background-image:var(--icon-alpha-pattern);background-position:0 0;background-size:50%;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}}:where([x-colorpicker]):not(.unstyle){height:fit-content;max-height:30rem;max-width:18rem;min-width:18rem;overflow:hidden;& :where(.tabs-wrapper){border-bottom:1px solid var(--color-line,oklch(80% .0029 264.26));display:flex;padding:2px;width:100%;& button{flex:1;justify-content:center}}& [x-colorpicker\.solid]{& :where(.canvas-wrapper){aspect-ratio:1;cursor:crosshair;overflow:hidden;padding:2px;position:relative;touch-action:none;width:100%}& canvas{display:block;height:100%;width:100%}& :where(.color-reticle){border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.2);height:.75rem;pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:.75rem;z-index:1}& :where(.solid-options-inputs){display:flex;flex-direction:column;gap:.75rem;padding:.75rem;& div:has(button[x-colorpicker\.set-color-space],input[x-colorpicker\.set-color-value],input[x-colorpicker\.set-alpha-value]){display:flex;width:100%}}& input[x-colorpicker\.set-alpha],& input[x-colorpicker\.set-hue]{appearance:none;-webkit-appearance:none;background:transparent;border:none;border-radius:1rem;cursor:pointer;height:.75rem;outline:none;padding:0;width:100%;&::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;width:1rem;&:active{cursor:grabbing}}&::-moz-range-thumb{background:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;width:1rem;&:active{cursor:grabbing}}&::-webkit-slider-runnable-track{border-radius:1rem;height:.75rem}&::-moz-range-track{border-radius:1rem;height:.75rem}}& input[x-colorpicker\.set-hue]{&::-webkit-slider-runnable-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}&::-moz-range-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}}& input[x-colorpicker\.set-alpha]{--color-picker-alpha:#000;position:relative;&::-webkit-slider-runnable-track{background:linear-gradient(to right,transparent,var(--color-picker-alpha)),var(--icon-alpha-pattern) 0 0 /.5rem .5rem}&::-moz-range-track{background:linear-gradient(to right,transparent,var(--color-picker-alpha)),var(--icon-alpha-pattern) 0 0 /.5rem .5rem}}& button[x-colorpicker\.set-color-space]{justify-content:center;padding-inline-end:0;padding-inline-start:0;width:7ch}& input[x-colorpicker\.set-color-value]{flex:1;padding-inline-end:0}& input[x-colorpicker\.set-alpha-value]{padding-inline-start:0;text-align:end;width:fit-content}}& [x-colorpicker\.gradient]{& :where(.layer-options-wrapper){border-bottom:1px solid var(--color-line,color-mix(in oklch,oklch(16.6% .026 267) 11%,transparent));& :where(.layer-options-inputs){align-items:center;display:flex;flex-flow:row nowrap;padding:.5rem;& button{justify-content:center;width:auto}& :where(.layer-angle-wrapper){position:relative;& input[x-colorpicker\.set-angle]{cursor:ew-resize;padding-inline-end:.75rem;padding-inline-start:0;text-align:end;width:5.5ch;&:focus{cursor:text}}& span{color:var(--color-content-neutral,oklch(48.26% .0365 255.09));position:absolute;right:.25rem;top:0}}& [x-colorpicker\.layer-stops-bar]{background:var(--color-field-surface,oklch(91.79% .0029 264.26));border-radius:1rem;cursor:pointer;height:.75rem;margin-inline-end:.5rem;margin-inline-start:1rem;position:relative;width:100%;& :where(.stop-handle){border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;position:absolute;top:50%;touch-action:none;transform:translate(-50%,-50%);width:1rem;z-index:1;&:hover{box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 5px rgba(0,0,0,.25)}&:active{cursor:grabbing}&.active{box-shadow:inset 0 0 0 3px hsla(0,0%,100%,.85),0 1px 5px #000}}}}& [x-colorpicker\.solid]{padding:0;& :where(.canvas-wrapper){margin:auto;padding:0 0 2px;width:calc(100% - 2rem)}& :where(.solid-options-inputs){padding-left:1rem;padding-right:1rem}}}& :where(.gradient-value-wrapper){padding:.5rem;& [x-colorpicker\.set-gradient-value]{resize:none;field-sizing:content}}}& [data-gradient-type=radial] .layer-angle-wrapper{visibility:hidden}& [x-colorpicker\.library]{max-height:30rem;overflow-y:auto;& :where(.library-wrapper){display:flex;flex-flow:column;gap:1rem;padding:1rem 1rem 4rem;width:100%;& :where(.library-group){display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem;width:100%;&:not(:last-child){border-bottom:1px solid var(--color-line,color-mix(in oklch,oklch(16.6% .026 267) 11%,transparent))}& :where(.library-palette){display:grid;gap:1px;grid-template-columns:repeat(11,1fr);& button[x-colorpicker\.apply-color]{aspect-ratio:1/1;border:1px solid hsla(0,0%,100%,.15);border-radius:calc(var(--radius, .5rem)/2);height:auto;max-height:1.375rem;max-width:1.375rem;min-height:0;min-width:0;width:100%;&:hover{border:1px solid hsla(0,0%,100%,.35)}&.active{border:1px solid #fff;box-shadow:inset 0 0 0 3px hsla(0,0%,100%,.85),0 0 1px #000,inset 0 0 0 4px rgba(0,0,0,.25)}}}}}}}:where(menu[popover][x-colorpicker]:not(.unstyle)){padding:0;& .tabs-wrapper button{border:1px solid var(--color-popover-surface,oklch(100% 0 0))}}:where(menu[popover]:not(.unstyle) [x-colorpicker\.library],.dropdown-menu:not(.unstyle) [x-colorpicker\.library]){& :where(.library-wrapper){padding:.5rem .5rem 4rem!important}& :where(small){padding-inline-start:0}}:where(.color-icon-solid,.color-icon-gradient,.color-icon-library,.color-icon-grab,.gradient-layer-icon-linear,.gradient-layer-icon-radial,.gradient-layer-icon-conic){aspect-ratio:1/1;background-color:currentColor;height:calc(var(--spacing-field-height, 2.25rem)/2);max-height:1rem}:where(dialog[x-colorpicker]){border-radius:calc(var(--radius, .5rem))}:where(.color-icon-solid){mask-image:var(--icon-color-solid)}:where(.color-icon-gradient){mask-image:var(--icon-color-gradient)}:where(.color-icon-library){mask-image:var(--icon-color-library)}:where(.color-icon-grab){mask-image:var(--icon-color-grab)}.gradient-layer-icon-linear{background:linear-gradient(to right,var(--color-content-neutral,oklch(48.26% .0365 255.09)),color-mix(in oklch,var(--color-content-neutral,oklch(48.26% .0365 255.09)) 0%,transparent 100%));border-radius:50%}.gradient-layer-icon-radial{background:radial-gradient(var(--color-content-neutral,oklch(48.26% .0365 255.09)),color-mix(in oklch,var(--color-content-neutral,oklch(48.26% .0365 255.09)) 0%,transparent 100%));border-radius:50%}.gradient-layer-icon-conic{background:conic-gradient(var(--color-content-neutral,oklch(48.26% .0365 255.09)),color-mix(in oklch,var(--color-content-neutral,oklch(48.26% .0365 255.09)) 0%,transparent 100%));border-radius:50%}}@layer components{:where(dialog[popover],.dialog):not(.unstyle){background-color:var(--color-popover-surface,oklch(100% 0 0));border:0;border-radius:calc(var(--radius, .5rem)*2);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);color:var(--color-content-stark,oklch(16.6% .026 267));flex-direction:column;left:0;margin:auto;max-height:90vh;max-width:100%;min-height:200px;position:fixed;right:0;width:500px;&::backdrop{background-color:rgba(0,0,0,.2)}& :where(header,main,footer){padding:calc(var(--spacing, .25rem)*4)}& :where(header){align-items:center;display:flex;gap:calc(var(--spacing, .25rem)*4);justify-content:space-between}& :where(main){flex-grow:1}& :where(footer){align-items:center;display:flex;gap:calc(var(--spacing, .25rem)*2);justify-content:end;margin-top:auto}@media screen and (max-width:768px){margin-bottom:auto!important;margin-left:auto!important;margin-right:auto!important;margin-top:auto!important;max-height:calc(100vh - var(--spacing, .25rem)*4 - var(--spacing, .25rem)*4)!important;width:calc(100vw - var(--spacing, .25rem)*4 - var(--spacing, .25rem)*4)!important}}:where(.dialog){height:fit-content;inset:0;z-index:10}.dark :where(dialog)::backdrop{background-color:rgba(0,0,0,.35)}html:has(dialog:popover-open){& menu[popover]:not(dialog *){opacity:0;pointer-events:none;scale:.9;transition:opacity .15s ease-out,scale .15s ease-out;&:popover-open{display:flex!important}}}html:has(dialog:popover-open~dialog:popover-open){& dialog:popover-open:not(:last-of-type) menu[popover]{opacity:0;pointer-events:none;scale:.9;transition:opacity .15s ease-out,scale .15s ease-out;&:popover-open{display:flex!important}}}}@layer utilities{:where(.divider){align-items:center;color:var(--color-content-neutral,oklch(48.26% .0365 255.09));display:flex;flex-flow:row nowrap;font-size:.875rem;height:1px;justify-content:center;margin:var(--spacing-field-padding,.625rem) 0;white-space:nowrap;width:100%;&:after,&:before{background-color:var(--color-line,oklch(48.3% .006422 17.4/.15));content:"";display:inline-flex;flex:1;height:1px;width:auto}&:not(:empty){gap:var(--spacing-field-padding,.625rem)}}:where(.divider.start){justify-content:flex-start;&:before{display:none}}:where(.divider.end){justify-content:flex-end;&:after{display:none}}.divider.vertical{align-self:stretch;flex-flow:column nowrap;height:auto;margin:0 var(--spacing-field-padding,.625rem);min-height:100%;min-width:1px;width:fit-content;&:after,&:before{content:"";height:auto;min-height:1px;width:1px}& [x-icon]{flex-shrink:0;font-size:.875rem;min-height:.875rem}}}@layer components{:where(menu[popover],.dropdown-menu):not(.unstyle){background:var(--color-popover-surface,oklch(100% 0 0));border:0;border-radius:var(--radius,.5rem);box-shadow:0 0 0 1px hsla(0,0%,6%,.05),0 3px 6px hsla(0,0%,6%,.1),0 9px 24px hsla(0,0%,6%,.2);flex-flow:column nowrap;gap:0;height:fit-content;inset:auto;list-style:none;margin:var(--spacing-popover-offset,.5rem) 0;max-height:90vh;min-width:160px;overflow-x:hidden;padding:.25rem;position-area:end span-end;position-try-fallbacks:flip-inline,flip-block,flip-start;transform-origin:top center;width:fit-content;z-index:50;& :where(li,a,button,label){align-items:center;background-color:transparent;border-radius:6px;color:var(--color-content-stark,oklch(16.6% .026 267));cursor:pointer;display:inline-flex;font-weight:400;justify-content:start;max-width:100%;min-height:var(--spacing-field-height,2.25rem);overflow:hidden;padding-inline-end:.5rem;padding-inline-start:.5rem;text-align:start;text-decoration:none;text-overflow:ellipsis;user-select:none;white-space:nowrap;width:100%;&:hover{text-decoration:inherit}&:active,&:hover{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));color:var(--color-field-inverse,oklch(16.6% .026 267))}& [x-icon],& span{color:inherit}& [x-icon]:first-child:not(:only-child){margin-inline-end:.375rem}}& small{color:var(--color-content-neutral,oklch(48.26% .0365 255.09));padding:.25rem .5rem}& hr{background-color:var(--color-line,oklch(48.3% .006422 17.4/.15));flex-shrink:0;margin-inline-start:-.25rem;margin-bottom:.25rem;margin-top:.25rem;width:calc(100% + .5rem)}& label{cursor:default;padding-inline-end:.5rem;padding-inline-start:.5rem;&:hover{background-color:transparent}&:has(input[role=switch]){justify-content:space-between}}& :where(input,textarea){flex-shrink:0;&:not(:first-child){}}& span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}:where(.dark menu[popover]) :where(li,a,button,label):hover{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}:where(menu menu):not(.unstyle){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-end end}:where(menu.center){position-area:center}:where(menu.top){margin:var(--spacing-popover-offset,.5rem) 0;position-area:top}:where(menu.bottom){margin:var(--spacing-popover-offset,.5rem) 0;position-area:bottom}:where(menu.start){margin:0 var(--spacing-popover-offset,.5rem);position-area:center start}:where(menu.end){margin:0 var(--spacing-popover-offset,.5rem);position-area:center end}:where(menu.top-start){margin:var(--spacing-popover-offset,.5rem) 0;position-area:start span-end}:where(menu.top-end){margin:var(--spacing-popover-offset,.5rem) 0;position-area:start span-start}:where(menu.bottom-start){margin:var(--spacing-popover-offset,.5rem) 0;position-area:end span-end}:where(menu.bottom-end){margin:var(--spacing-popover-offset,.5rem) 0;position-area:end span-start}:where(menu.start-top){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-end start}:where(menu.start-bottom){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-start start}:where(menu.end-top){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-end end}:where(menu.end-bottom){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-start end}:where(menu.top-start-corner,menu.start-top-corner){margin:var(--spacing-popover-offset,.5rem);position-area:start start}:where(menu.top-end-corner,menu.end-top-corner){margin:var(--spacing-popover-offset,.5rem);position-area:start end}:where(menu.bottom-start-corner,menu.start-bottom-corner){margin:var(--spacing-popover-offset,.5rem);position-area:end start}:where(menu.bottom-end-corner,menu.end-bottom-corner){margin:var(--spacing-popover-offset,.5rem);position-area:end end}@media (pointer:coarse){menu[popover]:not(.unstyle){bottom:1rem;left:1rem;margin:0;position:fixed;position-area:none;top:auto;width:calc(100% - 2rem);& :where(li,a,button,label) [x-icon]:first-child:not(:only-child){margin-inline-end:.8125rem}}}}@layer components{:where([role=group]:has(button,input,select)):not(.unstyle){align-items:center;display:flex;flex-flow:row nowrap;gap:0;max-width:100%;width:fit-content;&>*{flex-basis:auto;flex-shrink:0;&:focus{z-index:1}}&>:first-child{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child):not(:last-child){border-radius:0}&>:last-child{border-end-start-radius:0;border-start-start-radius:0}&.even>*{flex-shrink:1;width:100%}& input{width:fit-content}}:where(form):not(.unstyle){display:flex;flex-direction:column;gap:calc(var(--spacing)*4);width:100%}:where(fieldset):not(.unstyle){display:flex;flex-direction:column;gap:.375ch calc(var(--spacing)*2);width:100%;&:has([type=radio],[type=checkbox]){gap:calc(var(--spacing)*2)}}:where(fieldset:has(legend)):not(.unstyle){border-color:var(--color-line,oklch(48.3% .006422 17.4/.15));border-radius:var(--radius,.5rem);border-style:solid;border-width:1px;padding:1ch 1.5ch 1.5ch;& :where(legend){color:var(--color-content-subtle,oklch(67.4% .0318 251.27));font-size:.875rem;padding:0 1.5ch}}:where(label,.label):has([type=radio],[type=checkbox]):not(.unstyle){align-items:center;cursor:pointer;display:flex;flex-flow:row;gap:1ch;outline:0 none;&:focus-within{box-shadow:0 0 0 0}}:where(label:not(:has(.label)),.label):has(button,[role=button],[type=button],[type=submit],select,input:not([role=button],[type=checkbox],[type=radio],[type=file],[type=search]),textarea):not(:has(data)):not(.unstyle){cursor:pointer;display:flex;flex-direction:column;gap:.2ch;text-indent:calc(var(--radius)/2);width:100%;:where(*){text-indent:0}:where(span:first-of-type){padding-inline-start:calc(var(--radius)/2)}:where(button,[role=button],[type=button],[type=submit],select,input:not([role=button],[type=checkbox],[type=radio],[type=file],[type=search]),textarea){max-width:100%;width:100%}:has([type=search],[type=file]) :where([type=search],[type=file]){margin-top:.2ch}}label:has(data):not(.unstyle){align-items:center;display:flex;flex-direction:row;gap:1rem;justify-content:space-between;width:100%;&:focus-within{box-shadow:0 0 0 0}& :where(.label,button,input:not([type=checkbox],[type=radio]),select,textarea){max-width:50%;width:calc(var(--spacing-field-height)*8)}& .label:focus-within{box-shadow:0 0 0 2px color-mix(in oklch,var(--color-content-stark) 35%,transparent)}&:has(textarea){align-items:start;:where(data){padding-top:calc(var(--spacing))}}}label:has(.label):not(.unstyle){background-color:transparent;cursor:default;justify-content:space-between;:where([type=search]){max-width:100%;width:100%}}}@layer components{:where(input:not([type=range],[type=color]),textarea,label:has([type=search],[type=file]),.label:has([type=search],[type=file])):not(.unstyle){appearance:none;background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));border:0 solid transparent;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,oklch(16.6% .026 267));cursor:text;max-width:100%;transition:var(--transition,all .05s ease-in-out);width:100%;&:active,&:hover{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}&:focus-visible{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26))}&::placeholder{color:color-mix(in oklch,var(--color-field-inverse,oklch(16.6% .026 267)) 65%,transparent)}&::selection{background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 80%,var(--color-field-inverse,oklch(16.6% .026 267)))}&[type=file]{left:0;max-height:0;max-width:0;opacity:0;overflow:hidden;position:absolute;top:0;z-index:-1}}:where(input:not([type=range]):not(.unstyle)){height:var(--spacing-field-height,2.25rem);padding-left:var(--spacing-field-padding,.625rem);padding-right:var(--spacing-field-padding,.625rem)}:where(label,.label):has([type=search],[type=file]):not(.unstyle){align-items:center;display:flex;flex-flow:row;padding-inline-start:0;& :where(input){background:transparent;padding-inline-end:0;padding-inline-start:0;&:focus-visible,&:hover{background:transparent}&:focus-visible{box-shadow:0 0 0 0 transparent}}&:has(input+*){padding-inline-end:.375rem}&:has(input[type=file]+[x-icon]){padding-inline-end:0}}:where(label,.label):has([type=file]):not(.unstyle){cursor:pointer;gap:var(--spacing,.5rem);height:var(--spacing-field-height,2.25rem);justify-content:center}:where(label,.label):has([type=search]):not(.unstyle){justify-content:start;& [x-icon]{align-items:center;color:var(--color-content-subtle,oklch(67.4% .0318 251.27));display:flex;height:100%;justify-content:center;margin-inline-end:0;width:var(--spacing-field-height,2.25rem)}}:where(input[type=search]):not(.unstyle)::-webkit-search-cancel-button{appearance:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:where(textarea):not(.unstyle){display:block;height:auto;padding:var(--spacing-field-padding,.625rem) calc(var(--spacing-field-padding, .625rem)*1.3)}}:root{--presence-focus-outline-width:2px;--presence-focus-outline-style:dashed;--presence-focus-outline-offset:2px;--presence-focus-opacity:0.6;--presence-focus-color:#3b82f6;--presence-caret-width:2px;--presence-caret-height:1.2em;--presence-caret-color:#3b82f6;--presence-caret-z-index:1000;--presence-caret-blink-duration:1s;--presence-caret-opacity-high:1;--presence-caret-opacity-low:0.3;--presence-selection-color:#3b82f6;--presence-selection-opacity:0.2;--presence-selection-z-index:999;--presence-cursor-size:8px;--presence-cursor-border-width:2px;--presence-cursor-z-index:1001;--presence-throttle:300ms;--presence-cleanup-interval:30000ms;--presence-min-change-threshold:5px;--presence-idle-threshold:5000ms}@layer elements{:where(.presence-focused){opacity:var(--presence-focus-opacity);outline:var(--presence-focus-outline-width) var(--presence-focus-outline-style) var(--presence-focus-color);outline-offset:var(--presence-focus-outline-offset)}:where(.presence-focused[data-presence-focus-color]){--presence-focus-color:attr(data-presence-focus-color);outline-color:var(--presence-focus-color)}:where(.presence-caret){animation:presence-caret-blink var(--presence-caret-blink-duration) infinite;background-color:var(--presence-caret-color);height:var(--presence-caret-height);pointer-events:none;position:absolute;width:var(--presence-caret-width);z-index:var(--presence-caret-z-index)}:where(.presence-caret[data-presence-caret-color]),[data-presence-caret-color] .presence-caret{--presence-caret-color:attr(data-presence-caret-color)}@keyframes presence-caret-blink{0%,50%{opacity:var(--presence-caret-opacity-high)}51%,to{opacity:var(--presence-caret-opacity-low)}}:where(.presence-selection){background-color:var(--presence-selection-color);opacity:var(--presence-selection-opacity);pointer-events:none;position:absolute;z-index:var(--presence-selection-z-index)}:where(.presence-selection){background-color:var(--presence-selection-color)}:where(.presence-cursor){background-color:var(--presence-cursor-color,var(--presence-focus-color));border:var(--presence-cursor-border-width) solid var(--presence-cursor-color,var(--presence-focus-color));border-radius:50%;height:var(--presence-cursor-size);pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:var(--presence-cursor-size);z-index:var(--presence-cursor-z-index)}:where(.presence-cursor-label){background-color:var(--presence-cursor-color,var(--presence-focus-color));border-radius:4px;color:#fff;font-size:12px;left:50%;padding:2px 6px;pointer-events:none;position:absolute;top:calc(var(--presence-cursor-size) + 4px);transform:translateX(-50%);white-space:nowrap;z-index:calc(var(--presence-cursor-z-index) + 1)}:where([data-presence-caret-user],[data-presence-selection-user],[data-presence-focus-user]){position:relative}}@layer components{input[type=radio]:not(.unstyle){border-radius:50%;cursor:pointer;height:calc(var(--spacing-field-height, 2.25rem)*.625);min-width:calc(var(--spacing-field-height, 2.25rem)*.625);padding:5px;position:relative;width:calc(var(--spacing-field-height, 2.25rem)*.625);&:after{background-color:var(--color-field-inverse,oklch(16.6% .026 267));border-radius:50%;content:"";height:60%;left:50%;opacity:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) scale(0);transform-origin:center;transition:var(--transition,all .05s ease-in-out);width:60%}&:checked:after{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}}@layer components{input[type=range]:not(.unstyle){appearance:none;background-color:transparent;border-radius:var(--radius,.5rem);cursor:default;&::-webkit-slider-runnable-track{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));border-radius:var(--radius,.5rem);cursor:pointer;height:calc(var(--spacing, .25rem)*2);transition:var(--transition)}&:hover::-webkit-slider-runnable-track{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}&::-webkit-slider-thumb{appearance:none;background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 60%,var(--color-field-inverse,oklch(16.6% .026 267)));border-radius:200px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);cursor:pointer;height:calc(var(--spacing-field-height, 2.25rem)*.5);position:relative;top:50%;transform:translateY(-50%);transition:var(--transition);width:calc(var(--spacing-field-height, 2.25rem)*.5)}&::-webkit-slider-thumb:hover{background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 30%,var(--color-field-inverse,oklch(16.6% .026 267)))}}:where(datalist):not(.unstyle){display:flex;flex-flow:row nowrap;justify-content:space-between;max-width:100%;width:100%;& option{color:var(--color-content-neutral,oklch(48.26% .0365 255.09));font-size:.875rem;text-align:center;width:2ch}}label:has(input[type=range]):not(.unstyle){cursor:default}}@layer utilities{:where([x-resize]){position:relative;.resize-handle{background:transparent;border:none;display:block;height:var(--spacing-resize-handle,1rem);outline:none;position:absolute;width:var(--spacing-resize-handle,1rem);z-index:100;&:before{background:transparent;content:"";height:1px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background-color .2s ease;width:1px}&:active:before,&:hover:before{background-color:var(--color-line,oklch(48.3% .006422 17.4/.15))}}.resize-handle-bottom,.resize-handle-top{cursor:ns-resize;left:0;width:100%;&:before{width:100%}}.resize-handle-end,.resize-handle-left,.resize-handle-right,.resize-handle-start{cursor:ew-resize;height:100%;top:0;&:before{height:100%}}.resize-handle-top{top:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-bottom{bottom:calc(var(--spacing-resize-handle, 1rem)*-.5);top:auto}.resize-handle-left,.resize-handle-start{left:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-end,.resize-handle-right{right:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-top-left{cursor:nw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-top-left,.resize-handle-top-right{height:var(--spacing-resize-handle,1rem);top:calc(var(--spacing-resize-handle, 1rem)*-.5);width:var(--spacing-resize-handle,1rem)}.resize-handle-top-right{cursor:ne-resize;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-bottom-left{cursor:sw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-bottom-left,.resize-handle-bottom-right{bottom:calc(var(--spacing-resize-handle, 1rem)*-.5);height:var(--spacing-resize-handle,1rem);width:var(--spacing-resize-handle,1rem)}.resize-handle-bottom-right{cursor:se-resize;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-top-start{cursor:nw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-top-end,.resize-handle-top-start{height:var(--spacing-resize-handle,1rem);top:calc(var(--spacing-resize-handle, 1rem)*-.5);width:var(--spacing-resize-handle,1rem)}.resize-handle-top-end{cursor:ne-resize;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-bottom-start{cursor:sw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-bottom-end,.resize-handle-bottom-start{bottom:calc(var(--spacing-resize-handle, 1rem)*-.5);height:var(--spacing-resize-handle,1rem);width:var(--spacing-resize-handle,1rem)}.resize-handle-bottom-end{cursor:se-resize;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-overlay{background:transparent;display:none;height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:9999}.resizable-closing{opacity:.5;transition:opacity .2s ease}.resizable-closed{display:none!important}.resize-handle:focus{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}@media (prefers-contrast:high){:where(.resize-handle:hover .resize-handle-inner){background:rgba(0,0,0,.3)}:where(.resize-handle:active .resize-handle-inner){background:rgba(0,0,0,.5)}}@media (prefers-reduced-motion:reduce){:where(.resize-handle-inner,.resizable-closing,.resize-handle){transition:none}}}[dir=rtl] :where([x-resize]) .resize-handle-start{left:auto;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}[dir=rtl] :where([x-resize]) .resize-handle-end{left:calc(var(--spacing-resize-handle, 1rem)*-.5);right:auto}[dir=rtl] :where([x-resize]) .resize-handle-top-start{cursor:ne-resize;left:auto;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}[dir=rtl] :where([x-resize]) .resize-handle-top-end{cursor:nw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5);right:auto}[dir=rtl] :where([x-resize]) .resize-handle-bottom-start{cursor:se-resize;left:auto;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}[dir=rtl] :where([x-resize]) .resize-handle-bottom-end{cursor:sw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5);right:auto}}@layer components{:where(aside[popover]){background-color:var(--color-popover-surface,oklch(100% 0 0));height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:80vw;max-width:100%;min-width:20vw;overflow-y:auto;transition:opacity .15s ease-in,transform .15s ease-in,display .15s ease-in;transition-behavior:allow-discrete;width:fit-content;z-index:200;@starting-style{opacity:1;scale:1;transform:translateX(100%)}&:not(:popover-open){opacity:1;scale:1;transform:translateX(100%)}[dir=rtl] &{@starting-style{transform:translateX(-100%)}&:not(:popover-open){transform:translateX(-100%)}}}:where(aside[popover].appear-start){inset-inline-end:auto;inset-inline-start:0;@starting-style{transform:translateX(-100%)}&:not(:popover-open){transform:translateX(-100%)}[dir=rtl] &{@starting-style{transform:translateX(100%)}&:not(:popover-open){transform:translateX(100%)}}}.dark :where(aside[popover]){background-color:var(--color-surface-1,oklch(98.17% .0005 95.87))}}@layer components{[x-carousel]{display:flex;flex-direction:column;overflow:hidden;position:relative;width:100%;.carousel-slides{aspect-ratio:16/9;display:flex;transition:transform .3s ease-in-out;width:100%}& button[\@click="next()"],& button[\@click="prev()"]{background-color:oklch(100% 0 0/.15);position:absolute;top:50%;transform:translateY(-50%);&:hover{background-color:oklch(100% 0 0/.3)}}& button[\@click="prev()"]{left:calc(var(--spacing)*4)}& button[\@click="next()"]{left:auto;right:calc(var(--spacing)*4)}.carousel-dots{bottom:calc(var(--spacing)*4);display:flex;gap:calc(var(--spacing)*2);left:50%;max-width:100%;overflow-x:auto;padding:0 calc(var(--spacing)*4);position:absolute;transform:translateX(-50%);-webkit-overflow-scrolling:touch;scrollbar-width:none;&::-webkit-scrollbar{display:none}& span{background-color:oklch(100% 0 0/.15);border-radius:50%;cursor:pointer;flex-shrink:0;height:.625rem;transition:background-color .3s ease-in-out;width:.625rem;&:hover{background-color:oklch(100% 0 0/.3)}&.active{background-color:#fff}}}}}@layer components{:where(input[role=switch]):not(.unstyle){border-radius:calc(var(--spacing-field-height, 2.25rem)*.65);box-sizing:content-box;cursor:pointer;height:calc(var(--spacing-field-height, 2.25rem)*.65);min-width:calc(var(--spacing-field-height, 2.25rem)*.65*2);padding:0;position:relative;width:calc(var(--spacing-field-height, 2.25rem)*.65*2);&:before{background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 60%,var(--color-field-inverse,oklch(16.6% .026 267)));border-radius:50%;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);content:"";height:calc(var(--spacing-field-height, 2.25rem)*.65 - .25rem);left:.125rem;position:absolute;top:.125rem;transition:var(--transition,all .05s ease-in-out);width:calc(var(--spacing-field-height, 2.25rem)*.65 - .25rem)}&:checked{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));&:before{background-color:var(--color-field-inverse,oklch(16.6% .026 267));left:calc(100% - var(--spacing-field-height, 2.25rem)*.65 + .125rem)}&:hover{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}}}}@layer components{:where(table,.grid-table):not(.unstyle){border-radius:var(--radius,.5rem);border-spacing:0;max-width:100%;overflow:hidden;table-layout:auto;width:100%;:where(.grid-header,.grid-row,.grid-footer){display:contents}:where(thead,.grid-header>*){background-color:var(--color-surface-1,oklch(98.17% .0005 95.87));border-bottom:1px solid var(--color-line,oklch(48.3% .006422 17.4/.15))}:where(th,.grid-header>*){font-weight:700}:where(tr,.grid-row>*){border-bottom:1px solid var(--color-line,oklch(48.3% .006422 17.4/.15))}:where(td,th,.grid-header>*,.grid-row>*,.grid-footer>*){font-size:.875rem;overflow:hidden;padding:calc(var(--spacing, .25rem)*2.5) calc(var(--spacing, .25rem)*4);text-align:left;text-align:start;&>:not(template){display:inline-flex;vertical-align:middle;&:not(:last-child){margin-right:4px}}}:where(:not(:has(tfoot)) tbody tr:last-child,tfoot tr:last-child,.grid-footer>*){border-bottom:0}&.striped{:where(tr:nth-child(2n),.grid-row:nth-child(2n)){background-color:var(--color-surface-1,oklch(98.17% .0005 95.87))}:where(tr:nth-child(odd),.grid-row:nth-child(odd)){background-color:transparent}:where(tr,.grid-row){border-bottom:0}}}}@layer utilities{:where(.toast-container){align-items:center;bottom:3vw;display:flex;flex-direction:column-reverse;gap:calc(var(--spacing, .25rem)*2);left:50%;position:fixed;transform:translateX(-50%);z-index:100}:where(.toast){background-color:var(--color-popover-surface,oklch(100% 0 0));border:1px solid var(--color-line,oklch(48.3% .006422 17.4/.15));border-radius:calc(var(--radius, .5rem)*2);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);display:flex;max-width:90vw;opacity:0;overflow:hidden;transform:translateY(1rem);transition:opacity .2s ease-out,transform .2s ease-out,height .2s ease-out,margin .2s ease-out,padding .2s ease-out;:where(.toast-content){align-items:center;color:inherit;display:flex;padding:.375rem .75rem;white-space:pre-wrap;:where([x-icon]:first-child){margin-right:1ch}}:where(.toast-dismiss-button){border-inline-start:1px solid color-mix(in oklch,var(--color-content-stark,oklch(16.6% .026 267)) 20%,transparent);border-radius:0;position:relative;&:after{background-color:var(--color-field-inverse,oklch(16.6% .026 267));content:"";height:50%;left:50%;mask-image:var(--icon-toast-dismiss,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"));mask-repeat:no-repeat;mask-size:100% 100%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);transform-origin:center;width:50%}}}:where(.toast.brand,.toast.accent,.toast.positive,.toast.negative){background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));color:var(--color-field-inverse,oklch(16.6% .026 267));:where(.toast-dismiss-button){border-inline-start:1px solid color-mix(in oklch,var(--color-field-inverse,oklch(16.6% .026 267)) 20%,transparent)}}:where(.toast-entry){opacity:1;transform:translateY(0)}:where(.toast-exit){opacity:0;transform:translateY(1rem)}}@layer utilities{:where(.tooltip[popover]){background-color:var(--color-content-stark,oklch(16.6% .026 267));border:0;border-radius:var(--radius,.5rem);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);color:var(--color-page,oklch(100% 0 0));display:block;font-size:.875rem;inset:auto;margin:var(--spacing-popover-offset,.5rem) 0;max-width:200px;padding:calc(var(--spacing, .25rem)*.5) calc(var(--spacing, .25rem)*2);position:absolute;position-area:bottom;position-try-fallbacks:flip-inline,flip-block,flip-start;width:fit-content;&:hover{transition-delay:var(--tooltip-hover-delay,1s)}& [x-icon]:first-child{margin-inline-end:.25rem}}:where(.tooltip.top){margin:var(--spacing-popover-offset,.5rem) 0;position-area:top}:where(.tooltip.bottom){margin:var(--spacing-popover-offset,.5rem) 0;position-area:bottom}:where(.tooltip.start){margin:0 var(--spacing-popover-offset,.5rem);position-area:center start}:where(.tooltip.end){margin:0 var(--spacing-popover-offset,.5rem);position-area:center end}:where(.tooltip.top-start){margin:var(--spacing-popover-offset,.5rem) 0;position-area:start span-end}:where(.tooltip.top-end){margin:var(--spacing-popover-offset,.5rem) 0;position-area:start span-start}:where(.tooltip.bottom-start){margin:var(--spacing-popover-offset,.5rem) 0;position-area:end span-end}:where(.tooltip.bottom-end){margin:var(--spacing-popover-offset,.5rem) 0;position-area:end span-start}:where(.tooltip.start-top){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-end start}:where(.tooltip.start-bottom){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-start start}:where(.tooltip.end-top){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-end end}:where(.tooltip.end-bottom){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-start end}:where(.tooltip.top-start-corner,.tooltip.start-top-corner){margin:var(--spacing-popover-offset,.5rem);position-area:start start}:where(.tooltip.top-end-corner,.tooltip.end-top-corner){margin:var(--spacing-popover-offset,.5rem);position-area:start end}:where(.tooltip.bottom-start-corner,.tooltip.start-bottom-corner){margin:var(--spacing-popover-offset,.5rem);position-area:end start}:where(.tooltip.bottom-end-corner,.tooltip.end-bottom-corner){margin:var(--spacing-popover-offset,.5rem);position-area:end end}}@layer base{.caption,.h1,.h2,.h3,.h4,.h5,.h6,.label,.paragraph,.small,:where(a,abbr,address,blockquote,code,del,figcaption,h1,h2,h3,h4,h5,h6,ins,label:not(.avatar,:has([type=file],[type=search])),legend,p,small,cite,q):not(.unstyle){color:var(--color-content-stark);&:where(:has([x-icon])){align-items:center;display:inline-flex;& [x-icon]{margin-inline-end:.5ch}}& span{vertical-align:inherit}}.h1,.h2,.h3,.h4,.h5,.h6,:where(h1,h2,h3,h4,h5,h6):not(.unstyle){font-weight:bolder;word-wrap:break-word}.h1,.h2,.h3,.h4,:where(h1,h2,h3,h4):not(.unstyle){font-weight:700}.h1,.h2,.h3,:where(h1,h2,h3):not(.unstyle){letter-spacing:-.025em}.h1,:where(h1):not(.unstyle){font-size:2.25rem;line-height:1.25}.h2,:where(h2):not(.unstyle){font-size:1.5rem}.h3,:where(h3):not(.unstyle){font-size:1.25rem;line-height:1.4}.h4,:where(h4):not(.unstyle){font-size:1rem}.h5,:where(h5):not(.unstyle){color:var(--color-content-neutral,oklch(48.26% .0365 255.09));font-size:.875rem;font-weight:600;line-height:1rem}.h6,:where(h6):not(.unstyle){font-size:.8125rem;font-weight:600;line-height:1.4;text-transform:uppercase}.paragraph,:where(p):not(.unstyle){line-height:1.6}:where(a:not([role=button]),button.link):not(.unstyle){cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:var(--transition,all .05s ease-in-out);&:active,&:hover{color:var(--color-content-neutral,oklch(48.26% .0365 255.09))}}:where(blockquote):not(.unstyle){border-inline-end:none;border-inline-start:.25rem solid color-mix(in oklch,var(--color-content-stark,oklch(16.6% .026 267)) 25%,transparent);color:var(--color-content-stark,oklch(16.6% .026 267));display:block;margin:calc(var(--spacing, .25rem)*4) 0;max-width:100%;padding:0 calc(var(--spacing, .25rem)*4);width:100%;& *{color:inherit}}:where(code):not(.unstyle){display:inline-block;font-size:82.5%;height:fit-content;padding:.1ch .5ch;width:fit-content;word-wrap:break-word;background-color:color-mix(in oklch,var(--color-content-neutral,oklch(48.26% .0365 255.09)) 10%,transparent);border:1px solid color-mix(in oklch,var(--color-content-subtle,oklch(67.4% .0318 251.27)) 10%,transparent);border-radius:var(--radius,.5rem);color:var(--color-content-neutral,oklch(48.26% .0365 255.09))}.caption,:where(figcaption):not(.unstyle){color:var(--color-content-neutral,oklch(48.26% .0365 255.09));font-size:.8125rem;& a{color:inherit;font-weight:inherit}}:where(figure figcaption):not(.unstyle){margin:calc(var(--spacing, .25rem)*2) auto;text-align:center}.small,:where(small):not(.unstyle){color:var(--color-content-neutral,oklch(48.26% .0365 255.09));font-size:.875rem}:where([x-icon]){display:inline-flex;width:fit-content}:where(ins):not(.unstyle){text-decoration:none}.kbd,:where(kbd):not(.unstyle){background-color:color-mix(in oklch,var(--color-content-neutral,oklch(48.26% .0365 255.09)) 10%,transparent);border-radius:calc(var(--radius, .5rem)/1.5);color:var(--color-content-neutral,oklch(48.26% .0365 255.09));display:inline-block;font-family:inherit;font-size:75%;font-weight:600;line-height:1;min-width:1.4rem;padding:.3rem;text-align:center;vertical-align:baseline;width:fit-content;&:not(:last-of-type){margin-inline-end:1px}}[dir=rtl] :where(kbd:not(:last-of-type),.kbd:not(:last-of-type)){margin-inline-end:0;margin-inline-start:1px}.label,:where(label):not(.unstyle){user-select:none;width:-moz-fit-content;width:fit-content}.legend,:where(legend):not(.unstyle){display:block;max-width:100%;white-space:normal}.badge,:where(mark):not(.unstyle){align-items:center;background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));border-radius:100px;color:var(--color-field-inverse,oklch(16.6% .026 267));display:inline-flex;font-size:.75rem;font-weight:500;gap:.25rem;height:fit-content;justify-content:center;line-height:1;padding:var(--spacing,.25rem) calc(var(--spacing, .25rem)*1.5);width:fit-content;&:has(svg:only-child){padding:var(--spacing,.25rem) calc(var(--spacing, .25rem)*1)}}:where(ol):not(nav ol):not(menu ol):not(.unstyle){list-style-type:decimal}:where(ul):not(nav ul):not(menu ul):not(.unstyle){list-style-type:disc}:where(ol):not(nav ol):not(menu ol):not(.unstyle),:where(ul):not(nav ul):not(menu ul):not(.unstyle){&:not(:has(input[type=checkbox])){padding-inline-start:1.75ch}& li{padding-inline-start:1ch;&:not(:last-of-type){margin-bottom:1.25ch}&:has([x-icon]){display:inherit;list-style:none;position:relative;& [x-icon]{left:-1.75ch;position:absolute;top:.45ch}}&:has(input[type=checkbox]){display:inherit;list-style:none;position:relative;& input[type=checkbox]{left:-1ch;position:absolute;top:.45ch}}}}[dir=rtl] :where(ol):not(nav ol):not(menu ol):not(.unstyle),[dir=rtl] :where(ul):not(nav ul):not(menu ul):not(.unstyle){& li:has([x-icon]){& [x-icon]{left:auto;right:-1.75ch}}& li:has(input[type=checkbox]){& input[type=checkbox]{left:auto;right:-1.25ch}}}:where(ol,ul):not(nav ol):not(menu ol):not(.unstyle) ul,:where(ol,ul):not(nav ul):not(menu ul):not(.unstyle) ol{margin-top:1ch;padding-inline-start:2.75ch;&+li{margin-top:1.5ch}}:where(span):not(.unstyle){vertical-align:middle}}@layer utilities{:where(.center){align-items:center;justify-content:center}:where(.row,.row-wrap,.col,.col-wrap){display:flex}:where(.col){flex-flow:column nowrap}:where(.col-wrap){flex-flow:column wrap}:where(.row){flex-flow:row nowrap}:where(.row-wrap){flex-flow:row wrap}:where(.content){margin-inline-end:auto;margin-inline-start:auto;max-width:100%;width:var(--spacing-content-width,68.75rem)}:where(.ghost){background-color:transparent;color:var(--color-content-stark,oklch(16.6% .026 267));&:hover{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26))}&.brand:hover{color:var(--color-brand-inverse,#763518)}&.accent:hover{color:var(--color-accent-inverse,oklch(100% 0 0))}&.negative:hover{color:var(--color-negative-inverse,#fff)}}:where(.hug){height:fit-content;min-width:0;padding:0;width:fit-content}:where(.outlined){border-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 90%,var(--color-field-inverse,oklch(16.6% .026 267)));border-style:solid;border-width:1px}.dark :where(.outlined){border-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 80%,var(--color-field-inverse,oklch(16.6% .026 267)))}:where(.selected){background-color:var(--color-field-surface,oklch(91.79% .0029 264.26))}:where(.transparent){background-color:transparent!important;color:var(--color-content-neutral,oklch(48.26% .0365 255.09));&:hover{color:var(--color-content-stark,oklch(16.6% .026 267))}}:where(.lg){--spacing-field-height:2.5rem;--spacing-field-padding:0.78rem;font-size:125%}:where(.sm){--spacing-field-height:1.5rem;--spacing-field-padding:0.49rem;font-size:75%;&::picker-icon{line-height:.2}}:where(body.page){display:flex;flex-direction:column;min-height:100vh}.page{&>footer,&>header{z-index:30}&>footer,&>header,&>main{padding-inline-end:var(--spacing-viewport-padding,5vw);padding-inline-start:var(--spacing-viewport-padding,5vw)}&>footer nav,&>header nav,&>main>section:not(.banner,.overlay-dark,.overlay-light){margin-inline-end:auto;margin-inline-start:auto;max-width:100%;width:var(--spacing-content-width,68.75rem)}&>footer{margin-top:auto}}.no-focus:focus,.no-focus:focus-visible,.no-focus:focus-within{box-shadow:0 0 0 0 transparent}:where(.no-scrollbar){-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}.no-spinner{-moz-appearance:textfield!important;appearance:textfield!important;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;display:none;margin:0}}:where(.overlay-dark,.overlay-light){position:relative;&:after{content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}>*{position:relative;z-index:1}}:where(.overlay-dark){color:#fff!important;&:after{background:oklch(0 0 0/50%)}}:where(.overlay-light){color:#000!important;&:after{background:oklch(100% 0 0/75%)}}:where(.prose){max-width:100%;width:65ch;& aside:not([popover]){background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 20%,transparent);border:1px solid color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 30%,transparent);border-radius:calc(var(--radius, .5rem)*2);color:var(--color-content-stark,oklch(16.6% .026 267));margin-top:1.4rem;padding:1rem;&:not(.frame) *{color:inherit}&:has([x-icon]):not(.frame){display:flex;flex-direction:row;gap:1rem;& [x-icon]{font-size:1.25rem;padding-top:.25rem}}}&>a:not(:where(h1,h2,h3,h4,h5,h6,p,small,figcaption,label,li,blockquote,pre code,code,kbd,span,mark,[role=button]) a){margin-top:1.4rem}&>blockquote{margin-top:2rem;& *{margin:0}}&>figcaption{margin-top:1rem}&>figure{margin-top:1.4rem;& img{margin:0}}&>h1+p{color:var(--color-content-neutral,oklch(48.26% .0365 255.09));font-size:1.125rem;margin-top:.625rem}&>h2{margin-bottom:.6667rem;margin-top:1rem}&>h3{margin-top:2.4rem}&>h4{margin-top:3rem}&>h4+p{margin-top:.25rem}&>h5{margin-top:1rem}&>h5,&>h6{margin-bottom:1rem}&>h6{margin-top:2rem}&>hr{margin-bottom:3rem;margin-top:3rem}&>img,&>p{margin-top:1.4rem}&>ol,&>small,&>ul{margin-top:1rem}&>pre,&>table,&>x-code,&>x-code-group{margin-bottom:2rem;margin-top:2rem}&>x-code pre,&>x-code-group x-code{margin-bottom:0;margin-top:0}}:where(.trailing){color:var(--color-content-neutral,oklch(48.26% .0365 255.09));display:inline-block;margin-inline-start:auto}:where(.brand){--color-field-surface:var(--color-brand-surface,#f6c07b);--color-field-surface-hover:var(--color-brand-surface-hover,#f19b46);--color-field-inverse:var(--color-brand-inverse,#763518);--color-content-stark:var(--color-brand-content,#de6618);--color-content-neutral:color-mix(in oklch,var(--color-brand-content,#de6618) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-brand-content,#de6618) 70%,transparent)}:where(.accent){--color-field-surface:var(--color-accent-surface,oklch(16.6% 0.026 267));--color-field-surface-hover:var(--color-accent-surface-hover,oklch(28.7% 0.030787 270.1));--color-field-inverse:var(--color-accent-inverse,oklch(100% 0 0));--color-content-stark:var(--color-accent-content,oklch(16.6% 0.026 267));--color-content-neutral:color-mix(in oklch,var(--color-accent-content,oklch(16.6% 0.026 267)) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-accent-content,oklch(16.6% 0.026 267)) 70%,transparent)}:where(.negative){--color-field-surface:var(--color-negative-surface,#ef4444);--color-field-surface-hover:var(--color-negative-surface-hover,#dc2626);--color-field-inverse:var(--color-negative-inverse,#fff);--color-content-stark:var(--color-negative-content,#ef4444);--color-content-neutral:color-mix(in oklch,var(--color-negative-content,#ef4444) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-negative-content,#ef4444) 70%,transparent)}:where(.positive){--color-field-surface:var(--color-positive-surface,#16a34a);--color-field-surface-hover:var(--color-positive-surface-hover,#166534);--color-field-inverse:var(--color-positive-inverse,#fff);--color-content-stark:var(--color-positive-content,#16a34a);--color-content-neutral:color-mix(in oklch,var(--color-positive-content,#16a34a) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-positive-content,#16a34a) 70%,transparent)}:where(.stark){color:var(--color-content-stark,oklch(16.6% .026 267))}:where(.neutral){color:var(--color-content-neutral,oklch(48.26% .0365 255.09))}:where(.subtle){color:var(--color-content-subtle,oklch(67.4% .0318 251.27))}}
1
+ @layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:where(:root){-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;overflow-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-rendering:optimizeLegibility}:host,:where(html){font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;line-height:1.5;max-width:100vw;overflow-x:hidden;tab-size:4;width:100vw;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}&:has(dialog:popover-open){overflow:hidden}}:where(body){line-height:inherit;margin:0;max-width:100vw;min-height:100vh}:where(a){color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where([aria-controls]){cursor:pointer}:where([aria-hidden=false][hidden]){display:initial}:where([aria-hidden=false][hidden]:not(:focus)){clip:rect(0,0,0,0);position:absolute}:where(audio:not([controls])){display:none;height:0}:where(b,strong){font-weight:bolder}:where(button,input,optgroup,select,textarea){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}:where(button,select){text-transform:none}:where(button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button){appearance:button;background-color:transparent;background-image:none}:where(::-webkit-file-upload-button){-webkit-appearance:button;font:inherit}:where(::-webkit-inner-spin-button,::-webkit-outer-spin-button){height:auto}:where(::-webkit-search-decoration){-webkit-appearance:none}:where(button,[role=button]){cursor:pointer}:where(code,samp,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}:where([dir=rtl]){direction:rtl}:where([disabled],:disabled,[aria-disabled=true],.disabled){cursor:default;opacity:.5;pointer-events:none}:where(figcaption){font-size:75%}:where(figure){display:block;padding:0}:where(::file-selector-button){margin-inline-end:4px}:where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}:where(hr){background-color:var(--color-line,oklch(48.3% .006422 17.4/.15));border:0;color:inherit;height:1px}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,video){height:auto;max-width:100%}:where(::-webkit-autofill,:-webkit-autofill:focus){transition:background-color 0s 600000s,color 0s 600000s}:where(::-webkit-date-and-time-value){min-height:1lh;text-align:inherit}:where(::-webkit-datetime-edit){display:inline-flex}:where(::-webkit-datetime-edit-fields-wrapper){padding:0}:where(::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field){padding-block:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}:where(small){font-size:80%}:where(span){color:inherit}:where(sub,sup){font-size:50%;line-height:0;position:relative;vertical-align:baseline}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(svg):not([fill]){fill:currentColor}:where(svg):not(:root){overflow:hidden}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}:where(::placeholder){color:#9ca3af;opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){:where(::placeholder){color:color-mix(in oklab,currentcolor 50%,transparent)}}:where([popover]){display:none;transition:opacity .15s ease-in,scale .15s ease-in,display .15s ease-in;transition-behavior:allow-discrete;&:popover-open{display:flex}@starting-style{opacity:0;scale:.9}&:not(:popover-open){display:none!important;opacity:0;scale:1;transition-duration:.15s;transition-timing-function:ease-out}}:where(progress){vertical-align:baseline}:where([type=search]){-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}:where(summary){display:list-item}:where(textarea){resize:vertical}[hidden],[un-cloak],[v-cloak],[x-cloak]{display:none}@media (-webkit-min-device-pixel-ratio:2){:where(html){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true]):after,:not([aria-busy=true]):before{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:scroll!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}@media (prefers-reduced-motion:no-preference){[dir=rtl] progress:indeterminate{animation-direction:reverse}}::view-transition-group(*){animation-duration:var(--view-transition-duration,.2s);animation-timing-function:var(--view-transition-easing,ease)}[data-no-view-transition],canvas,iframe,video{view-transition-name:none}}@view-transition{navigation:auto}@layer components{:where(details):not(.unstyle){transition:var(--transition,all .05s ease-in-out);width:100%;&[open]>summary:before{transform:rotate(90deg)}& [open] summary{margin-bottom:calc(var(--spacing, .25rem)*4)}&>:not(summary){padding:var(--spacing-field-padding,.625rem) 0}:where(summary){align-items:center;color:var(--color-content-stark,oklch(16.6% .026 267));cursor:pointer;display:flex;font-weight:700;justify-content:space-between;position:relative;transition:var(--transition,all .05s ease-in-out);user-select:none;&::-webkit-details-marker,&::marker{content:"";display:none}&:hover{color:color-mix(in oklch,var(--color-surface-1,oklch(98.17% .0005 95.87)) 40%,var(--color-content-stark,oklch(16.6% .026 267)))}&:active{color:color-mix(in oklch,var(--color-surface-1,oklch(98.17% .0005 95.87)) 50%,var(--color-content-stark,oklch(16.6% .026 267)))}&:before{background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 50%,var(--color-field-inverse,oklch(16.6% .026 267)));content:"";height:1rem;-webkit-mask-image:var(--icon-accordion,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath d='m184.49 136.49-80 80a12 12 0 0 1-17-17L159 128 87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));mask-image:var(--icon-accordion,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath d='m184.49 136.49-80 80a12 12 0 0 1-17-17L159 128 87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;order:1;transform:rotate(0);transition:transform .25s ease;width:1rem}}}[dir=rtl] :where(details):not(.unstyle){& summary:before{transform:rotate(180deg)}&[open]>summary:before{transform:rotate(90deg)}}}@layer utilities{:where(.avatar){align-items:center;background-clip:content-box;background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));background-position:50%;background-size:cover;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,oklch(16.6% .026 267));display:flex;flex-flow:row wrap;flex-shrink:0;font-weight:700;height:var(--spacing-field-height,2.25rem);justify-content:center;position:relative;text-align:center;text-transform:uppercase;width:var(--spacing-field-height,2.25rem);&[x-icon]{color:var(--color-content-subtle,oklch(67.4% .0318 251.27))}:where(img){border-radius:inherit;height:100%;left:0;object-fit:cover;object-position:center;position:absolute;top:0;transition:var(--transition,all .05s ease-in-out);width:100%}:where(figure){background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));border:1px solid var(--color-page,oklch(100% 0 0));border-radius:50%;bottom:-3px;height:9px;position:absolute;right:-3px;width:9px;z-index:1}}:where(button.avatar,label.avatar){background-blend-mode:normal;padding:0;&:hover{background-blend-mode:multiply;background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48));& img{filter:brightness(.9)}}}:where(.avatar-wide){align-items:center;display:flex;flex-flow:row;gap:1.5ch;justify-content:start;max-width:100%;overflow:hidden;width:100%;& span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}:where(button.avatar-wide){height:fit-content;padding:var(--spacing,.25rem);padding-inline-end:1.5ch;&:hover .avatar{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48));transition:var(--transition,all .05s ease-in-out)}}:where([role=group]:has(.avatar,button.avatar)){align-items:center;display:flex;flex-flow:row nowrap;:where(.avatar){box-shadow:0 0 0 3px var(--color-page,oklch(100% 0 0));margin-inline-end:calc(var(--spacing-field-height, 2.25rem)*-.3)}}}@layer components{:where(button:not(.link),[role=button],[type=button],[type=reset],[type=submit],select):not(.unstyle){align-items:center;appearance:button;background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));border:0 solid transparent;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,oklch(16.6% .026 267));cursor:pointer;display:inline-flex;flex-flow:row;gap:.375rem;height:var(--spacing-field-height,2.25rem);justify-content:center;margin:0;max-width:100%;min-width:var(--spacing-field-height,2.25rem);outline-color:var(--color-line,oklch(48.3% .006422 17.4/.15));overflow:hidden;padding:0 var(--spacing-field-padding,.625rem);text-overflow:ellipsis;transition:var(--transition,all .05s ease-in-out);white-space:nowrap;width:fit-content;& [x-icon],& span{color:inherit}& span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&:has(>svg:only-child){font-size:1rem;padding:0}& svg{margin-left:auto;margin-right:auto}&:active,&:hover{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}&:focus-visible{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26))}}:where(select):not(.unstyle){appearance:base-select;&::picker-icon{content:"⌄";font-size:20px;height:calc(var(--spacing-field-height, 2.25rem)*.5);line-height:.4;transform:scaleY(.7)}}}@layer components{input[type=checkbox]:not([role=switch],.unstyle){border-radius:.4rem;cursor:pointer;height:calc(var(--spacing-field-height, 2.25rem)*.6);max-width:calc(var(--spacing-field-height, 2.25rem)*.6);min-width:calc(var(--spacing-field-height, 2.25rem)*.6);padding:0;position:relative;width:calc(var(--spacing-field-height, 2.25rem)*.6);&:checked{&:active,&:hover{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48));border-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}}&:after{background-color:var(--color-field-inverse,oklch(16.6% .026 267));content:"";height:60%;left:50%;-webkit-mask-image:var(--icon-checkbox,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11 2-2 5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));mask-image:var(--icon-checkbox,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11 2-2 5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) scale(0);transform-origin:center;transition:var(--transition,all .05s ease-in-out);width:60%}&:checked:after{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}}:root{--color-picker-swatch:var(--color-line);--icon-color-solid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-paint-roller-icon lucide-paint-roller' viewBox='0 0 24 24'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");--icon-color-gradient:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-blend-icon lucide-blend' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Ccircle cx='15' cy='15' r='7'/%3E%3C/svg%3E");--icon-color-library:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-swatch-book-icon lucide-swatch-book' viewBox='0 0 24 24'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7M7 17h.01'/%3E%3Cpath 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'/%3E%3C/svg%3E");--icon-color-grab:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-pipette-icon lucide-pipette' viewBox='0 0 24 24'%3E%3Cpath d='m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12'/%3E%3Cpath d='m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3zM2 22l.414-.414'/%3E%3C/svg%3E");--icon-alpha-pattern:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='gray' d='M0 0h1v1H0zM1 1h1v1H1z' opacity='.15'/%3E%3C/svg%3E")}@layer components{:where(input[type=color]){appearance:none;-webkit-appearance:none;&::-webkit-color-swatch-wrapper{padding:0}&::-webkit-color-swatch{border:0}&::-moz-color-swatch{border:0}}}@layer utilities{:where([x-colorpicker\.swatch],input[type=color]):not(.unstyle){background:var(--color-picker-swatch,#000);border-color:oklch(from var(--color-picker-swatch,#000) calc(l + (.5 - l) * .35) c calc(h + 0));border-radius:var(--radius,.5rem);border-style:solid;border-width:1px;cursor:pointer;height:var(--spacing-field-height,2.25rem);max-width:var(--spacing-field-height,2.25rem);min-width:var(--spacing-field-height,2.25rem);overflow:hidden;padding:0;position:relative;transition:var(--transition);width:var(--spacing-field-height,2.25rem);&:active,&:focus,&:focus-visible,&:hover{border-color:oklch(from var(--color-picker-swatch,#000) calc(l + (.5 - l) * .35) c calc(h + 0)/.5)}&:before{background-image:var(--icon-alpha-pattern);background-position:0 0;background-size:50%;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}}:where([x-colorpicker]):not(.unstyle){height:fit-content;max-height:30rem;max-width:18rem;min-width:18rem;overflow:hidden;& :where(.tabs-wrapper){border-bottom:1px solid var(--color-line,oklch(80% .0029 264.26));display:flex;padding:2px;width:100%;& button{flex:1;justify-content:center}}& [x-colorpicker\.solid]{& :where(.canvas-wrapper){aspect-ratio:1;cursor:crosshair;overflow:hidden;padding:2px;position:relative;touch-action:none;width:100%}& canvas{display:block;height:100%;width:100%}& :where(.color-reticle){border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.2);height:.75rem;pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:.75rem;z-index:1}& :where(.solid-options-inputs){display:flex;flex-direction:column;gap:.75rem;padding:.75rem;& div:has(button[x-colorpicker\.set-color-space],input[x-colorpicker\.set-color-value],input[x-colorpicker\.set-alpha-value]){display:flex;width:100%}}& input[x-colorpicker\.set-alpha],& input[x-colorpicker\.set-hue]{appearance:none;-webkit-appearance:none;background:transparent;border:none;border-radius:1rem;cursor:pointer;height:.75rem;outline:none;padding:0;width:100%;&::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;width:1rem;&:active{cursor:grabbing}}&::-moz-range-thumb{background:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;width:1rem;&:active{cursor:grabbing}}&::-webkit-slider-runnable-track{border-radius:1rem;height:.75rem}&::-moz-range-track{border-radius:1rem;height:.75rem}}& input[x-colorpicker\.set-hue]{&::-webkit-slider-runnable-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}&::-moz-range-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}}& input[x-colorpicker\.set-alpha]{--color-picker-alpha:#000;position:relative;&::-webkit-slider-runnable-track{background:linear-gradient(to right,transparent,var(--color-picker-alpha)),var(--icon-alpha-pattern) 0 0 /.5rem .5rem}&::-moz-range-track{background:linear-gradient(to right,transparent,var(--color-picker-alpha)),var(--icon-alpha-pattern) 0 0 /.5rem .5rem}}& button[x-colorpicker\.set-color-space]{justify-content:center;padding-inline-end:0;padding-inline-start:0;width:7ch}& input[x-colorpicker\.set-color-value]{flex:1;padding-inline-end:0}& input[x-colorpicker\.set-alpha-value]{padding-inline-start:0;text-align:end;width:fit-content}}& [x-colorpicker\.gradient]{& :where(.layer-options-wrapper){border-bottom:1px solid var(--color-line,color-mix(in oklch,oklch(16.6% .026 267) 11%,transparent));& :where(.layer-options-inputs){align-items:center;display:flex;flex-flow:row nowrap;padding:.5rem;& button{justify-content:center;width:auto}& :where(.layer-angle-wrapper){position:relative;& input[x-colorpicker\.set-angle]{cursor:ew-resize;padding-inline-end:.75rem;padding-inline-start:0;text-align:end;width:5.5ch;&:focus{cursor:text}}& span{color:var(--color-content-neutral,oklch(48.26% .0365 255.09));position:absolute;right:.25rem;top:0}}& [x-colorpicker\.layer-stops-bar]{background:var(--color-field-surface,oklch(91.79% .0029 264.26));border-radius:1rem;cursor:pointer;height:.75rem;margin-inline-end:.5rem;margin-inline-start:1rem;position:relative;width:100%;& :where(.stop-handle){border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;position:absolute;top:50%;touch-action:none;transform:translate(-50%,-50%);width:1rem;z-index:1;&:hover{box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 5px rgba(0,0,0,.25)}&:active{cursor:grabbing}&.active{box-shadow:inset 0 0 0 3px hsla(0,0%,100%,.85),0 1px 5px #000}}}}& [x-colorpicker\.solid]{padding:0;& :where(.canvas-wrapper){margin:auto;padding:0 0 2px;width:calc(100% - 2rem)}& :where(.solid-options-inputs){padding-left:1rem;padding-right:1rem}}}& :where(.gradient-value-wrapper){padding:.5rem;& [x-colorpicker\.set-gradient-value]{resize:none;field-sizing:content}}}& [data-gradient-type=radial] .layer-angle-wrapper{visibility:hidden}& [x-colorpicker\.library]{max-height:30rem;overflow-y:auto;& :where(.library-wrapper){display:flex;flex-flow:column;gap:1rem;padding:1rem 1rem 4rem;width:100%;& :where(.library-group){display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem;width:100%;&:not(:last-child){border-bottom:1px solid var(--color-line,color-mix(in oklch,oklch(16.6% .026 267) 11%,transparent))}& :where(.library-palette){display:grid;gap:1px;grid-template-columns:repeat(11,1fr);& button[x-colorpicker\.apply-color]{aspect-ratio:1/1;border:1px solid hsla(0,0%,100%,.15);border-radius:calc(var(--radius, .5rem)/2);height:auto;max-height:1.375rem;max-width:1.375rem;min-height:0;min-width:0;width:100%;&:hover{border:1px solid hsla(0,0%,100%,.35)}&.active{border:1px solid #fff;box-shadow:inset 0 0 0 3px hsla(0,0%,100%,.85),0 0 1px #000,inset 0 0 0 4px rgba(0,0,0,.25)}}}}}}}:where(menu[popover][x-colorpicker]:not(.unstyle)){padding:0;& .tabs-wrapper button{border:1px solid var(--color-popover-surface,oklch(100% 0 0))}}:where(menu[popover]:not(.unstyle) [x-colorpicker\.library],.dropdown-menu:not(.unstyle) [x-colorpicker\.library]){& :where(.library-wrapper){padding:.5rem .5rem 4rem!important}& :where(small){padding-inline-start:0}}:where(.color-icon-solid,.color-icon-gradient,.color-icon-library,.color-icon-grab,.gradient-layer-icon-linear,.gradient-layer-icon-radial,.gradient-layer-icon-conic){aspect-ratio:1/1;background-color:currentColor;height:calc(var(--spacing-field-height, 2.25rem)/2);max-height:1rem}:where(dialog[x-colorpicker]){border-radius:calc(var(--radius, .5rem))}:where(.color-icon-solid){mask-image:var(--icon-color-solid)}:where(.color-icon-gradient){mask-image:var(--icon-color-gradient)}:where(.color-icon-library){mask-image:var(--icon-color-library)}:where(.color-icon-grab){mask-image:var(--icon-color-grab)}.gradient-layer-icon-linear{background:linear-gradient(to right,var(--color-content-neutral,oklch(48.26% .0365 255.09)),color-mix(in oklch,var(--color-content-neutral,oklch(48.26% .0365 255.09)) 0%,transparent 100%));border-radius:50%}.gradient-layer-icon-radial{background:radial-gradient(var(--color-content-neutral,oklch(48.26% .0365 255.09)),color-mix(in oklch,var(--color-content-neutral,oklch(48.26% .0365 255.09)) 0%,transparent 100%));border-radius:50%}.gradient-layer-icon-conic{background:conic-gradient(var(--color-content-neutral,oklch(48.26% .0365 255.09)),color-mix(in oklch,var(--color-content-neutral,oklch(48.26% .0365 255.09)) 0%,transparent 100%));border-radius:50%}}@layer components{:where(dialog[popover],.dialog):not(.unstyle){background-color:var(--color-popover-surface,oklch(100% 0 0));border:0;border-radius:calc(var(--radius, .5rem)*2);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);color:var(--color-content-stark,oklch(16.6% .026 267));flex-direction:column;left:0;margin:auto;max-height:90vh;max-width:100%;min-height:200px;position:fixed;right:0;width:500px;&::backdrop{background-color:rgba(0,0,0,.2)}& :where(header,main,footer){padding:calc(var(--spacing, .25rem)*4)}& :where(header){align-items:center;display:flex;gap:calc(var(--spacing, .25rem)*4);justify-content:space-between}& :where(main){flex-grow:1}& :where(footer){align-items:center;display:flex;gap:calc(var(--spacing, .25rem)*2);justify-content:end;margin-top:auto}@media screen and (max-width:768px){margin-bottom:auto!important;margin-left:auto!important;margin-right:auto!important;margin-top:auto!important;max-height:calc(100vh - var(--spacing, .25rem)*4 - var(--spacing, .25rem)*4)!important;width:calc(100vw - var(--spacing, .25rem)*4 - var(--spacing, .25rem)*4)!important}}:where(.dialog){height:fit-content;inset:0;z-index:10}.dark :where(dialog)::backdrop{background-color:rgba(0,0,0,.35)}html:has(dialog:popover-open){& menu[popover]:not(dialog *){opacity:0;pointer-events:none;scale:.9;transition:opacity .15s ease-out,scale .15s ease-out;&:popover-open{display:flex!important}}}html:has(dialog:popover-open~dialog:popover-open){& dialog:popover-open:not(:last-of-type) menu[popover]{opacity:0;pointer-events:none;scale:.9;transition:opacity .15s ease-out,scale .15s ease-out;&:popover-open{display:flex!important}}}}@layer utilities{:where(.divider){align-items:center;color:var(--color-content-neutral,oklch(48.26% .0365 255.09));display:flex;flex-flow:row nowrap;font-size:.875rem;height:1px;justify-content:center;margin:var(--spacing-field-padding,.625rem) 0;white-space:nowrap;width:100%;&:after,&:before{background-color:var(--color-line,oklch(48.3% .006422 17.4/.15));content:"";display:inline-flex;flex:1;height:1px;width:auto}&:not(:empty){gap:var(--spacing-field-padding,.625rem)}}:where(.divider.start){justify-content:flex-start;&:before{display:none}}:where(.divider.end){justify-content:flex-end;&:after{display:none}}.divider.vertical{align-self:stretch;flex-flow:column nowrap;height:auto;margin:0 var(--spacing-field-padding,.625rem);min-height:100%;min-width:1px;width:fit-content;&:after,&:before{content:"";height:auto;min-height:1px;width:1px}& [x-icon]{flex-shrink:0;font-size:.875rem;min-height:.875rem}}}@layer components{:where(menu[popover],.dropdown-menu):not(.unstyle){background:var(--color-popover-surface,oklch(100% 0 0));border:0;border-radius:var(--radius,.5rem);box-shadow:0 0 0 1px hsla(0,0%,6%,.05),0 3px 6px hsla(0,0%,6%,.1),0 9px 24px hsla(0,0%,6%,.2);flex-flow:column nowrap;gap:0;height:fit-content;inset:auto;list-style:none;margin:var(--spacing-popover-offset,.5rem) 0;max-height:90vh;min-width:160px;overflow-x:hidden;padding:.25rem;position-area:end span-end;position-try-fallbacks:flip-inline,flip-block,flip-start;transform-origin:top center;width:fit-content;z-index:50;& :where(li,a,button,label){align-items:center;background-color:transparent;border-radius:6px;color:var(--color-content-stark,oklch(16.6% .026 267));cursor:pointer;display:inline-flex;font-weight:400;justify-content:start;max-width:100%;min-height:var(--spacing-field-height,2.25rem);overflow:hidden;padding-inline-end:.5rem;padding-inline-start:.5rem;text-align:start;text-decoration:none;text-overflow:ellipsis;user-select:none;white-space:nowrap;width:100%;&:hover{text-decoration:inherit}&:active,&:hover{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));color:var(--color-field-inverse,oklch(16.6% .026 267))}& [x-icon],& span{color:inherit}& [x-icon]:first-child:not(:only-child){margin-inline-end:.375rem}}& small{color:var(--color-content-neutral,oklch(48.26% .0365 255.09));padding:.25rem .5rem}& hr{background-color:var(--color-line,oklch(48.3% .006422 17.4/.15));flex-shrink:0;margin-inline-start:-.25rem;margin-bottom:.25rem;margin-top:.25rem;width:calc(100% + .5rem)}& label{cursor:default;padding-inline-end:.5rem;padding-inline-start:.5rem;&:hover{background-color:transparent}&:has(input[role=switch]){justify-content:space-between}}& :where(input,textarea){flex-shrink:0;&:not(:first-child){}}& span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}:where(.dark menu[popover]) :where(li,a,button,label):hover{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}:where(menu menu):not(.unstyle){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-end end}:where(menu.center){position-area:center}:where(menu.top){margin:var(--spacing-popover-offset,.5rem) 0;position-area:top}:where(menu.bottom){margin:var(--spacing-popover-offset,.5rem) 0;position-area:bottom}:where(menu.start){margin:0 var(--spacing-popover-offset,.5rem);position-area:center start}:where(menu.end){margin:0 var(--spacing-popover-offset,.5rem);position-area:center end}:where(menu.top-start){margin:var(--spacing-popover-offset,.5rem) 0;position-area:start span-end}:where(menu.top-end){margin:var(--spacing-popover-offset,.5rem) 0;position-area:start span-start}:where(menu.bottom-start){margin:var(--spacing-popover-offset,.5rem) 0;position-area:end span-end}:where(menu.bottom-end){margin:var(--spacing-popover-offset,.5rem) 0;position-area:end span-start}:where(menu.start-top){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-end start}:where(menu.start-bottom){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-start start}:where(menu.end-top){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-end end}:where(menu.end-bottom){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-start end}:where(menu.top-start-corner,menu.start-top-corner){margin:var(--spacing-popover-offset,.5rem);position-area:start start}:where(menu.top-end-corner,menu.end-top-corner){margin:var(--spacing-popover-offset,.5rem);position-area:start end}:where(menu.bottom-start-corner,menu.start-bottom-corner){margin:var(--spacing-popover-offset,.5rem);position-area:end start}:where(menu.bottom-end-corner,menu.end-bottom-corner){margin:var(--spacing-popover-offset,.5rem);position-area:end end}@media (pointer:coarse){menu[popover]:not(.unstyle){bottom:1rem;left:1rem;margin:0;position:fixed;position-area:none;top:auto;width:calc(100% - 2rem);& :where(li,a,button,label) [x-icon]:first-child:not(:only-child){margin-inline-end:.8125rem}}}}@layer components{:where([role=group]:has(button,input,select)):not(.unstyle){align-items:center;display:flex;flex-flow:row nowrap;gap:0;max-width:100%;width:fit-content;&>*{flex-basis:auto;flex-shrink:0;&:focus{z-index:1}}&>:first-child{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child):not(:last-child){border-radius:0}&>:last-child{border-end-start-radius:0;border-start-start-radius:0}&.even>*{flex-shrink:1;width:100%}& input{width:fit-content}}:where(form):not(.unstyle){display:flex;flex-direction:column;gap:calc(var(--spacing)*4);width:100%}:where(fieldset):not(.unstyle){display:flex;flex-direction:column;gap:.375ch calc(var(--spacing)*2);width:100%;&:has([type=radio],[type=checkbox]){gap:calc(var(--spacing)*2)}}:where(fieldset:has(legend)):not(.unstyle){border-color:var(--color-line,oklch(48.3% .006422 17.4/.15));border-radius:var(--radius,.5rem);border-style:solid;border-width:1px;padding:1ch 1.5ch 1.5ch;& :where(legend){color:var(--color-content-subtle,oklch(67.4% .0318 251.27));font-size:.875rem;padding:0 1.5ch}}:where(label,.label):has([type=radio],[type=checkbox]):not(.unstyle){align-items:center;cursor:pointer;display:flex;flex-flow:row;gap:1ch;outline:0 none;&:focus-within{box-shadow:0 0 0 0}}:where(label:not(:has(.label)),.label):has(button,[role=button],[type=button],[type=submit],select,input:not([role=button],[type=checkbox],[type=radio],[type=file],[type=search]),textarea):not(:has(data)):not(.unstyle){cursor:pointer;display:flex;flex-direction:column;gap:.2ch;text-indent:calc(var(--radius)/2);width:100%;:where(*){text-indent:0}:where(span:first-of-type){padding-inline-start:calc(var(--radius)/2)}:where(button,[role=button],[type=button],[type=submit],select,input:not([role=button],[type=checkbox],[type=radio],[type=file],[type=search]),textarea){max-width:100%;width:100%}:has([type=search],[type=file]) :where([type=search],[type=file]){margin-top:.2ch}}label:has(data):not(.unstyle){align-items:center;display:flex;flex-direction:row;gap:1rem;justify-content:space-between;width:100%;&:focus-within{box-shadow:0 0 0 0}& :where(.label,button,input:not([type=checkbox],[type=radio]),select,textarea){max-width:50%;width:calc(var(--spacing-field-height)*8)}& .label:focus-within{box-shadow:0 0 0 2px color-mix(in oklch,var(--color-content-stark) 35%,transparent)}&:has(textarea){align-items:start;:where(data){padding-top:calc(var(--spacing))}}}label:has(.label):not(.unstyle){background-color:transparent;cursor:default;justify-content:space-between;:where([type=search]){max-width:100%;width:100%}}}@layer components{:where(input:not([type=range],[type=color]),textarea,label:has([type=search],[type=file]),.label:has([type=search],[type=file])):not(.unstyle){appearance:none;background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));border:0 solid transparent;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,oklch(16.6% .026 267));cursor:text;max-width:100%;transition:var(--transition,all .05s ease-in-out);width:100%;&:active,&:hover{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}&:focus-visible{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26))}&::placeholder{color:color-mix(in oklch,var(--color-field-inverse,oklch(16.6% .026 267)) 65%,transparent)}&::selection{background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 80%,var(--color-field-inverse,oklch(16.6% .026 267)))}&[type=file]{left:0;max-height:0;max-width:0;opacity:0;overflow:hidden;position:absolute;top:0;z-index:-1}}:where(input:not([type=range]):not(.unstyle)){height:var(--spacing-field-height,2.25rem);padding-left:var(--spacing-field-padding,.625rem);padding-right:var(--spacing-field-padding,.625rem)}:where(label,.label):has([type=search],[type=file]):not(.unstyle){align-items:center;display:flex;flex-flow:row;padding-inline-start:0;& :where(input){background:transparent;padding-inline-end:0;padding-inline-start:0;&:focus-visible,&:hover{background:transparent}&:focus-visible{box-shadow:0 0 0 0 transparent}}&:has(input+*){padding-inline-end:.375rem}&:has(input[type=file]+[x-icon]){padding-inline-end:0}}:where(label,.label):has([type=file]):not(.unstyle){cursor:pointer;gap:var(--spacing,.5rem);height:var(--spacing-field-height,2.25rem);justify-content:center}:where(label,.label):has([type=search]):not(.unstyle){justify-content:start;& [x-icon]{align-items:center;color:var(--color-content-subtle,oklch(67.4% .0318 251.27));display:flex;height:100%;justify-content:center;margin-inline-end:0;width:var(--spacing-field-height,2.25rem)}}:where(input[type=search]):not(.unstyle)::-webkit-search-cancel-button{appearance:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:where(textarea):not(.unstyle){display:block;height:auto;padding:var(--spacing-field-padding,.625rem) calc(var(--spacing-field-padding, .625rem)*1.3)}}:root{--presence-focus-outline-width:2px;--presence-focus-outline-style:dashed;--presence-focus-outline-offset:2px;--presence-focus-opacity:0.6;--presence-focus-color:#3b82f6;--presence-caret-width:2px;--presence-caret-height:1.2em;--presence-caret-color:#3b82f6;--presence-caret-z-index:1000;--presence-caret-blink-duration:1s;--presence-caret-opacity-high:1;--presence-caret-opacity-low:0.3;--presence-selection-color:#3b82f6;--presence-selection-opacity:0.2;--presence-selection-z-index:999;--presence-cursor-size:8px;--presence-cursor-border-width:2px;--presence-cursor-z-index:1001;--presence-throttle:300ms;--presence-cleanup-interval:30000ms;--presence-min-change-threshold:5px;--presence-idle-threshold:5000ms}@layer elements{:where(.presence-focused){opacity:var(--presence-focus-opacity);outline:var(--presence-focus-outline-width) var(--presence-focus-outline-style) var(--presence-focus-color);outline-offset:var(--presence-focus-outline-offset)}:where(.presence-focused[data-presence-focus-color]){--presence-focus-color:attr(data-presence-focus-color);outline-color:var(--presence-focus-color)}:where(.presence-caret){animation:presence-caret-blink var(--presence-caret-blink-duration) infinite;background-color:var(--presence-caret-color);height:var(--presence-caret-height);pointer-events:none;position:absolute;width:var(--presence-caret-width);z-index:var(--presence-caret-z-index)}:where(.presence-caret[data-presence-caret-color]),[data-presence-caret-color] .presence-caret{--presence-caret-color:attr(data-presence-caret-color)}@keyframes presence-caret-blink{0%,50%{opacity:var(--presence-caret-opacity-high)}51%,to{opacity:var(--presence-caret-opacity-low)}}:where(.presence-selection){background-color:var(--presence-selection-color);opacity:var(--presence-selection-opacity);pointer-events:none;position:absolute;z-index:var(--presence-selection-z-index)}:where(.presence-selection){background-color:var(--presence-selection-color)}:where(.presence-cursor){background-color:var(--presence-cursor-color,var(--presence-focus-color));border:var(--presence-cursor-border-width) solid var(--presence-cursor-color,var(--presence-focus-color));border-radius:50%;height:var(--presence-cursor-size);pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:var(--presence-cursor-size);z-index:var(--presence-cursor-z-index)}:where(.presence-cursor-label){background-color:var(--presence-cursor-color,var(--presence-focus-color));border-radius:4px;color:#fff;font-size:12px;left:50%;padding:2px 6px;pointer-events:none;position:absolute;top:calc(var(--presence-cursor-size) + 4px);transform:translateX(-50%);white-space:nowrap;z-index:calc(var(--presence-cursor-z-index) + 1)}:where([data-presence-caret-user],[data-presence-selection-user],[data-presence-focus-user]){position:relative}}@layer components{input[type=radio]:not(.unstyle){border-radius:50%;cursor:pointer;height:calc(var(--spacing-field-height, 2.25rem)*.625);min-width:calc(var(--spacing-field-height, 2.25rem)*.625);padding:5px;position:relative;width:calc(var(--spacing-field-height, 2.25rem)*.625);&:after{background-color:var(--color-field-inverse,oklch(16.6% .026 267));border-radius:50%;content:"";height:60%;left:50%;opacity:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) scale(0);transform-origin:center;transition:var(--transition,all .05s ease-in-out);width:60%}&:checked:after{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}}@layer components{input[type=range]:not(.unstyle){appearance:none;background-color:transparent;border-radius:var(--radius,.5rem);cursor:default;&::-webkit-slider-runnable-track{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));border-radius:var(--radius,.5rem);cursor:pointer;height:calc(var(--spacing, .25rem)*2);transition:var(--transition)}&:hover::-webkit-slider-runnable-track{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}&::-webkit-slider-thumb{appearance:none;background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 60%,var(--color-field-inverse,oklch(16.6% .026 267)));border-radius:200px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);cursor:pointer;height:calc(var(--spacing-field-height, 2.25rem)*.5);position:relative;top:50%;transform:translateY(-50%);transition:var(--transition);width:calc(var(--spacing-field-height, 2.25rem)*.5)}&::-webkit-slider-thumb:hover{background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 30%,var(--color-field-inverse,oklch(16.6% .026 267)))}}:where(datalist):not(.unstyle){display:flex;flex-flow:row nowrap;justify-content:space-between;max-width:100%;width:100%;& option{color:var(--color-content-neutral,oklch(48.26% .0365 255.09));font-size:.875rem;text-align:center;width:2ch}}label:has(input[type=range]):not(.unstyle){cursor:default}}@layer utilities{:where([x-resize]){position:relative;.resize-handle{background:transparent;border:none;display:block;height:var(--spacing-resize-handle,1rem);outline:none;position:absolute;width:var(--spacing-resize-handle,1rem);z-index:100;&:before{background:transparent;content:"";height:1px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background-color .2s ease;width:1px}&:active:before,&:hover:before{background-color:var(--color-line,oklch(48.3% .006422 17.4/.15))}}.resize-handle-bottom,.resize-handle-top{cursor:ns-resize;left:0;width:100%;&:before{width:100%}}.resize-handle-end,.resize-handle-left,.resize-handle-right,.resize-handle-start{cursor:ew-resize;height:100%;top:0;&:before{height:100%}}.resize-handle-top{top:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-bottom{bottom:calc(var(--spacing-resize-handle, 1rem)*-.5);top:auto}.resize-handle-left,.resize-handle-start{left:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-end,.resize-handle-right{right:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-top-left{cursor:nw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-top-left,.resize-handle-top-right{height:var(--spacing-resize-handle,1rem);top:calc(var(--spacing-resize-handle, 1rem)*-.5);width:var(--spacing-resize-handle,1rem)}.resize-handle-top-right{cursor:ne-resize;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-bottom-left{cursor:sw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-bottom-left,.resize-handle-bottom-right{bottom:calc(var(--spacing-resize-handle, 1rem)*-.5);height:var(--spacing-resize-handle,1rem);width:var(--spacing-resize-handle,1rem)}.resize-handle-bottom-right{cursor:se-resize;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-top-start{cursor:nw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-top-end,.resize-handle-top-start{height:var(--spacing-resize-handle,1rem);top:calc(var(--spacing-resize-handle, 1rem)*-.5);width:var(--spacing-resize-handle,1rem)}.resize-handle-top-end{cursor:ne-resize;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-bottom-start{cursor:sw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-handle-bottom-end,.resize-handle-bottom-start{bottom:calc(var(--spacing-resize-handle, 1rem)*-.5);height:var(--spacing-resize-handle,1rem);width:var(--spacing-resize-handle,1rem)}.resize-handle-bottom-end{cursor:se-resize;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}.resize-overlay{background:transparent;display:none;height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:9999}.resizable-closing{opacity:.5;transition:opacity .2s ease}.resizable-closed{display:none!important}.resize-handle:focus{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}@media (prefers-contrast:high){:where(.resize-handle:hover .resize-handle-inner){background:rgba(0,0,0,.3)}:where(.resize-handle:active .resize-handle-inner){background:rgba(0,0,0,.5)}}@media (prefers-reduced-motion:reduce){:where(.resize-handle-inner,.resizable-closing,.resize-handle){transition:none}}}[dir=rtl] :where([x-resize]) .resize-handle-start{left:auto;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}[dir=rtl] :where([x-resize]) .resize-handle-end{left:calc(var(--spacing-resize-handle, 1rem)*-.5);right:auto}[dir=rtl] :where([x-resize]) .resize-handle-top-start{cursor:ne-resize;left:auto;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}[dir=rtl] :where([x-resize]) .resize-handle-top-end{cursor:nw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5);right:auto}[dir=rtl] :where([x-resize]) .resize-handle-bottom-start{cursor:se-resize;left:auto;right:calc(var(--spacing-resize-handle, 1rem)*-.5)}[dir=rtl] :where([x-resize]) .resize-handle-bottom-end{cursor:sw-resize;left:calc(var(--spacing-resize-handle, 1rem)*-.5);right:auto}}@layer components{:where(aside[popover]){background-color:var(--color-popover-surface,oklch(100% 0 0));height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:80vw;max-width:100%;min-width:20vw;overflow-y:auto;transition:opacity .15s ease-in,transform .15s ease-in,display .15s ease-in;transition-behavior:allow-discrete;width:fit-content;z-index:200;@starting-style{opacity:1;scale:1;transform:translateX(100%)}&:not(:popover-open){opacity:1;scale:1;transform:translateX(100%)}[dir=rtl] &{@starting-style{transform:translateX(-100%)}&:not(:popover-open){transform:translateX(-100%)}}}:where(aside[popover].appear-start){inset-inline-end:auto;inset-inline-start:0;@starting-style{transform:translateX(-100%)}&:not(:popover-open){transform:translateX(-100%)}[dir=rtl] &{@starting-style{transform:translateX(100%)}&:not(:popover-open){transform:translateX(100%)}}}.dark :where(aside[popover]){background-color:var(--color-surface-1,oklch(98.17% .0005 95.87))}}@layer components{[x-carousel]{display:flex;flex-direction:column;overflow:hidden;position:relative;width:100%;.carousel-slides{aspect-ratio:16/9;display:flex;transition:transform .3s ease-in-out;width:100%}& button[\@click="next()"],& button[\@click="prev()"]{background-color:oklch(100% 0 0/.15);position:absolute;top:50%;transform:translateY(-50%);&:hover{background-color:oklch(100% 0 0/.3)}}& button[\@click="prev()"]{left:calc(var(--spacing)*4)}& button[\@click="next()"]{left:auto;right:calc(var(--spacing)*4)}.carousel-dots{bottom:calc(var(--spacing)*4);display:flex;gap:calc(var(--spacing)*2);left:50%;max-width:100%;overflow-x:auto;padding:0 calc(var(--spacing)*4);position:absolute;transform:translateX(-50%);-webkit-overflow-scrolling:touch;scrollbar-width:none;&::-webkit-scrollbar{display:none}& span{background-color:oklch(100% 0 0/.15);border-radius:50%;cursor:pointer;flex-shrink:0;height:.625rem;transition:background-color .3s ease-in-out;width:.625rem;&:hover{background-color:oklch(100% 0 0/.3)}&.active{background-color:#fff}}}}}@layer components{:where(input[role=switch]):not(.unstyle){border-radius:calc(var(--spacing-field-height, 2.25rem)*.65);box-sizing:content-box;cursor:pointer;height:calc(var(--spacing-field-height, 2.25rem)*.65);min-width:calc(var(--spacing-field-height, 2.25rem)*.65*2);padding:0;position:relative;width:calc(var(--spacing-field-height, 2.25rem)*.65*2);&:before{background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 60%,var(--color-field-inverse,oklch(16.6% .026 267)));border-radius:50%;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);content:"";height:calc(var(--spacing-field-height, 2.25rem)*.65 - .25rem);left:.125rem;position:absolute;top:.125rem;transition:var(--transition,all .05s ease-in-out);width:calc(var(--spacing-field-height, 2.25rem)*.65 - .25rem)}&:checked{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));&:before{background-color:var(--color-field-inverse,oklch(16.6% .026 267));left:calc(100% - var(--spacing-field-height, 2.25rem)*.65 + .125rem)}&:hover{background-color:var(--color-field-surface-hover,oklch(89.24% .0024 12.48))}}}}@layer components{:where(table,.grid-table):not(.unstyle){border-radius:var(--radius,.5rem);border-spacing:0;max-width:100%;overflow:hidden;table-layout:auto;width:100%;:where(.grid-header,.grid-row,.grid-footer){display:contents}:where(thead,.grid-header>*){background-color:var(--color-surface-1,oklch(98.17% .0005 95.87));border-bottom:1px solid var(--color-line,oklch(48.3% .006422 17.4/.15))}:where(th,.grid-header>*){font-weight:700}:where(tr,.grid-row>*){border-bottom:1px solid var(--color-line,oklch(48.3% .006422 17.4/.15))}:where(td,th,.grid-header>*,.grid-row>*,.grid-footer>*){font-size:.875rem;overflow:hidden;padding:calc(var(--spacing, .25rem)*2.5) calc(var(--spacing, .25rem)*4);text-align:left;text-align:start;&>:not(template){display:inline-flex;vertical-align:middle;&:not(:last-child){margin-right:4px}}}:where(:not(:has(tfoot)) tbody tr:last-child,tfoot tr:last-child,.grid-footer>*){border-bottom:0}&.striped{:where(tr:nth-child(2n),.grid-row:nth-child(2n)){background-color:var(--color-surface-1,oklch(98.17% .0005 95.87))}:where(tr:nth-child(odd),.grid-row:nth-child(odd)){background-color:transparent}:where(tr,.grid-row){border-bottom:0}}}}@layer utilities{:where(.toast-container){align-items:center;bottom:3vw;display:flex;flex-direction:column-reverse;gap:calc(var(--spacing, .25rem)*2);left:50%;position:fixed;transform:translateX(-50%);z-index:100}:where(.toast){background-color:var(--color-popover-surface,oklch(100% 0 0));border:1px solid var(--color-line,oklch(48.3% .006422 17.4/.15));border-radius:calc(var(--radius, .5rem)*2);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);display:flex;max-width:90vw;opacity:0;overflow:hidden;transform:translateY(1rem);transition:opacity .2s ease-out,transform .2s ease-out,height .2s ease-out,margin .2s ease-out,padding .2s ease-out;:where(.toast-content){align-items:center;color:inherit;display:flex;padding:.375rem .75rem;white-space:pre-wrap;:where([x-icon]:first-child){margin-right:1ch}}:where(.toast-dismiss-button){border-inline-start:1px solid color-mix(in oklch,var(--color-content-stark,oklch(16.6% .026 267)) 20%,transparent);border-radius:0;position:relative;&:after{background-color:var(--color-field-inverse,oklch(16.6% .026 267));content:"";height:50%;left:50%;mask-image:var(--icon-toast-dismiss,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"));mask-repeat:no-repeat;mask-size:100% 100%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);transform-origin:center;width:50%}}}:where(.toast.brand,.toast.accent,.toast.positive,.toast.negative){background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));color:var(--color-field-inverse,oklch(16.6% .026 267));:where(.toast-dismiss-button){border-inline-start:1px solid color-mix(in oklch,var(--color-field-inverse,oklch(16.6% .026 267)) 20%,transparent)}}:where(.toast-entry){opacity:1;transform:translateY(0)}:where(.toast-exit){opacity:0;transform:translateY(1rem)}}@layer utilities{:where(.tooltip[popover]){background-color:var(--color-content-stark,oklch(16.6% .026 267));border:0;border-radius:var(--radius,.5rem);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);color:var(--color-page,oklch(100% 0 0));display:block;font-size:.875rem;inset:auto;margin:var(--spacing-popover-offset,.5rem) 0;max-width:200px;padding:calc(var(--spacing, .25rem)*.5) calc(var(--spacing, .25rem)*2);position:absolute;position-area:bottom;position-try-fallbacks:flip-inline,flip-block,flip-start;width:fit-content;&:hover{transition-delay:var(--tooltip-hover-delay,1s)}& [x-icon]:first-child{margin-inline-end:.25rem}}:where(.tooltip.top){margin:var(--spacing-popover-offset,.5rem) 0;position-area:top}:where(.tooltip.bottom){margin:var(--spacing-popover-offset,.5rem) 0;position-area:bottom}:where(.tooltip.start){margin:0 var(--spacing-popover-offset,.5rem);position-area:center start}:where(.tooltip.end){margin:0 var(--spacing-popover-offset,.5rem);position-area:center end}:where(.tooltip.top-start){margin:var(--spacing-popover-offset,.5rem) 0;position-area:start span-end}:where(.tooltip.top-end){margin:var(--spacing-popover-offset,.5rem) 0;position-area:start span-start}:where(.tooltip.bottom-start){margin:var(--spacing-popover-offset,.5rem) 0;position-area:end span-end}:where(.tooltip.bottom-end){margin:var(--spacing-popover-offset,.5rem) 0;position-area:end span-start}:where(.tooltip.start-top){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-end start}:where(.tooltip.start-bottom){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-start start}:where(.tooltip.end-top){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-end end}:where(.tooltip.end-bottom){margin:0 var(--spacing-popover-offset,.5rem);position-area:span-start end}:where(.tooltip.top-start-corner,.tooltip.start-top-corner){margin:var(--spacing-popover-offset,.5rem);position-area:start start}:where(.tooltip.top-end-corner,.tooltip.end-top-corner){margin:var(--spacing-popover-offset,.5rem);position-area:start end}:where(.tooltip.bottom-start-corner,.tooltip.start-bottom-corner){margin:var(--spacing-popover-offset,.5rem);position-area:end start}:where(.tooltip.bottom-end-corner,.tooltip.end-bottom-corner){margin:var(--spacing-popover-offset,.5rem);position-area:end end}}@layer base{.caption,.h1,.h2,.h3,.h4,.h5,.h6,.label,.paragraph,.small,:where(a,abbr,address,blockquote,code,del,figcaption,h1,h2,h3,h4,h5,h6,ins,label:not(.avatar,:has([type=file],[type=search])),legend,p,small,cite,q):not(.unstyle){color:var(--color-content-stark);&:where(:has([x-icon])){align-items:center;display:inline-flex;& [x-icon]{margin-inline-end:.5ch}}& span{vertical-align:inherit}}.h1,.h2,.h3,.h4,.h5,.h6,:where(h1,h2,h3,h4,h5,h6):not(.unstyle){font-weight:bolder;word-wrap:break-word}.h1,.h2,.h3,.h4,:where(h1,h2,h3,h4):not(.unstyle){font-weight:700}.h1,.h2,.h3,:where(h1,h2,h3):not(.unstyle){letter-spacing:-.025em}.h1,:where(h1):not(.unstyle){font-size:2.25rem;line-height:1.25}.h2,:where(h2):not(.unstyle){font-size:1.5rem}.h3,:where(h3):not(.unstyle){font-size:1.25rem;line-height:1.4}.h4,:where(h4):not(.unstyle){font-size:1rem}.h5,:where(h5):not(.unstyle){color:var(--color-content-neutral,oklch(48.26% .0365 255.09));font-size:.875rem;font-weight:600;line-height:1rem}.h6,:where(h6):not(.unstyle){font-size:.8125rem;font-weight:600;line-height:1.4;text-transform:uppercase}.paragraph,:where(p):not(.unstyle){line-height:1.6}:where(a:not([role=button]),button.link):not(.unstyle){cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:var(--transition,all .05s ease-in-out);&:active,&:hover{color:var(--color-content-neutral,oklch(48.26% .0365 255.09))}}:where(blockquote):not(.unstyle){border-inline-end:none;border-inline-start:.25rem solid color-mix(in oklch,var(--color-content-stark,oklch(16.6% .026 267)) 25%,transparent);color:var(--color-content-stark,oklch(16.6% .026 267));display:block;margin:calc(var(--spacing, .25rem)*4) 0;max-width:100%;padding:0 calc(var(--spacing, .25rem)*4);width:100%;& *{color:inherit}}:where(code):not(.unstyle){display:inline-block;font-size:82.5%;height:fit-content;padding:.1ch .5ch;width:fit-content;word-wrap:break-word;background-color:color-mix(in oklch,var(--color-content-neutral,oklch(48.26% .0365 255.09)) 10%,transparent);border:1px solid color-mix(in oklch,var(--color-content-subtle,oklch(67.4% .0318 251.27)) 10%,transparent);border-radius:var(--radius,.5rem);color:var(--color-content-neutral,oklch(48.26% .0365 255.09))}.caption,:where(figcaption):not(.unstyle){color:var(--color-content-neutral,oklch(48.26% .0365 255.09));font-size:.8125rem;& a{color:inherit;font-weight:inherit}}:where(figure figcaption):not(.unstyle){margin:calc(var(--spacing, .25rem)*2) auto;text-align:center}.small,:where(small):not(.unstyle){color:var(--color-content-neutral,oklch(48.26% .0365 255.09));font-size:.875rem}:where([x-icon]){display:inline-flex;width:fit-content}:where(ins):not(.unstyle){text-decoration:none}.kbd,:where(kbd):not(.unstyle){background-color:color-mix(in oklch,var(--color-content-neutral,oklch(48.26% .0365 255.09)) 10%,transparent);border-radius:calc(var(--radius, .5rem)/1.5);color:var(--color-content-neutral,oklch(48.26% .0365 255.09));display:inline-block;font-family:inherit;font-size:75%;font-weight:600;line-height:1;min-width:1.4rem;padding:.3rem;text-align:center;vertical-align:baseline;width:fit-content;&:not(:last-of-type){margin-inline-end:1px}}[dir=rtl] :where(kbd:not(:last-of-type),.kbd:not(:last-of-type)){margin-inline-end:0;margin-inline-start:1px}.label,:where(label):not(.unstyle){user-select:none;width:-moz-fit-content;width:fit-content}.legend,:where(legend):not(.unstyle){display:block;max-width:100%;white-space:normal}.badge,:where(mark):not(.unstyle){align-items:center;background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));border-radius:100px;color:var(--color-field-inverse,oklch(16.6% .026 267));display:inline-flex;font-size:.75rem;font-weight:500;gap:.25rem;height:fit-content;justify-content:center;line-height:1;padding:var(--spacing,.25rem) calc(var(--spacing, .25rem)*1.5);width:fit-content;&:has(svg:only-child){padding:var(--spacing,.25rem) calc(var(--spacing, .25rem)*1)}}:where(ol):not(nav ol):not(menu ol):not(.unstyle){list-style-type:decimal}:where(ul):not(nav ul):not(menu ul):not(.unstyle){list-style-type:disc}:where(ol):not(nav ol):not(menu ol):not(.unstyle),:where(ul):not(nav ul):not(menu ul):not(.unstyle){&:not(:has(input[type=checkbox])){padding-inline-start:1.75ch}& li{padding-inline-start:1ch;&:not(:last-of-type){margin-bottom:1.25ch}&:has([x-icon]){display:inherit;list-style:none;position:relative;& [x-icon]{left:-1.75ch;position:absolute;top:.45ch}}&:has(input[type=checkbox]){display:inherit;list-style:none;position:relative;& input[type=checkbox]{left:-1ch;position:absolute;top:.45ch}}}}[dir=rtl] :where(ol):not(nav ol):not(menu ol):not(.unstyle),[dir=rtl] :where(ul):not(nav ul):not(menu ul):not(.unstyle){& li:has([x-icon]){& [x-icon]{left:auto;right:-1.75ch}}& li:has(input[type=checkbox]){& input[type=checkbox]{left:auto;right:-1.25ch}}}:where(ol,ul):not(nav ol):not(menu ol):not(.unstyle) ul,:where(ol,ul):not(nav ul):not(menu ul):not(.unstyle) ol{margin-top:1ch;padding-inline-start:2.75ch;&+li{margin-top:1.5ch}}:where(span):not(.unstyle){vertical-align:middle}}@layer utilities{:where(.center){align-items:center;justify-content:center}:where(.row,.row-wrap,.col,.col-wrap){display:flex}:where(.col){flex-flow:column nowrap}:where(.col-wrap){flex-flow:column wrap}:where(.row){flex-flow:row nowrap}:where(.row-wrap){flex-flow:row wrap}:where(.content){margin-inline-end:auto;margin-inline-start:auto;max-width:100%;width:var(--spacing-content-width,68.75rem)}:where(.ghost){background-color:transparent;&:hover{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26))}}:where(.hug){height:fit-content;min-width:0;padding:0;width:fit-content}:where(.outlined){border-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 90%,var(--color-field-inverse,oklch(16.6% .026 267)));border-style:solid;border-width:1px}.dark :where(.outlined){border-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 80%,var(--color-field-inverse,oklch(16.6% .026 267)))}:where(.transparent){background-color:transparent!important;color:var(--color-content-neutral,oklch(48.26% .0365 255.09));&:hover{color:var(--color-content-stark,oklch(16.6% .026 267))}}:where(.lg){--spacing-field-height:2.5rem;--spacing-field-padding:0.78rem;font-size:125%}:where(.sm){--spacing-field-height:1.5rem;--spacing-field-padding:0.49rem;font-size:75%;&::picker-icon{line-height:.2}}:where(body.page){display:flex;flex-direction:column;min-height:100vh}.page{&>footer,&>header{z-index:30}&>footer,&>header,&>main{padding-inline-end:var(--spacing-viewport-padding,5vw);padding-inline-start:var(--spacing-viewport-padding,5vw)}&>footer nav,&>header nav,&>main>section:not(.banner,.overlay-dark,.overlay-light){margin-inline-end:auto;margin-inline-start:auto;max-width:100%;width:var(--spacing-content-width,68.75rem)}&>footer{margin-top:auto}}.no-focus:focus,.no-focus:focus-visible,.no-focus:focus-within{box-shadow:0 0 0 0 transparent}:where(.no-scrollbar){-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}.no-spinner{-moz-appearance:textfield!important;appearance:textfield!important;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;display:none;margin:0}}:where(.overlay-dark,.overlay-light){position:relative;&:after{content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}>*{position:relative;z-index:1}}:where(.overlay-dark){color:#fff!important;&:after{background:oklch(0 0 0/50%)}}:where(.overlay-light){color:#000!important;&:after{background:oklch(100% 0 0/75%)}}:where(.prose){max-width:100%;width:65ch;& aside:not([popover]){background-color:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 20%,transparent);border:1px solid color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 30%,transparent);border-radius:calc(var(--radius, .5rem)*2);color:var(--color-content-stark,oklch(16.6% .026 267));margin-top:1.4rem;padding:1rem;&:not(.frame) *{color:inherit}&:has([x-icon]):not(.frame){display:flex;flex-direction:row;gap:1rem;& [x-icon]{font-size:1.25rem;padding-top:.25rem}}}&>a:not(:where(h1,h2,h3,h4,h5,h6,p,small,figcaption,label,li,blockquote,pre code,code,kbd,span,mark,[role=button]) a){margin-top:1.4rem}&>blockquote{margin-top:2rem;& *{margin:0}}&>figcaption{margin-top:1rem}&>figure{margin-top:1.4rem;& img{margin:0}}&>h1+p{color:var(--color-content-neutral,oklch(48.26% .0365 255.09));font-size:1.125rem;margin-top:.625rem}&>h2{margin-bottom:.6667rem;margin-top:1rem}&>h3{margin-top:2.4rem}&>h4{margin-top:3rem}&>h4+p{margin-top:.25rem}&>h5{margin-top:1rem}&>h5,&>h6{margin-bottom:1rem}&>h6{margin-top:2rem}&>hr{margin-bottom:3rem;margin-top:3rem}&>details+hr:has(+details){margin-bottom:1rem;margin-top:1rem}&>img,&>p{margin-top:1.4rem}&>ol,&>small,&>ul{margin-top:1rem}&>pre,&>table,&>x-code,&>x-code-group{margin-bottom:2rem;margin-top:2rem}&>x-code pre,&>x-code-group x-code{margin-bottom:0;margin-top:0}}:where(.trailing){color:var(--color-content-neutral,oklch(48.26% .0365 255.09));display:inline-block;margin-inline-start:auto}:where(.brand){--color-field-surface:var(--color-brand-surface,#f6c07b);--color-field-surface-hover:var(--color-brand-surface-hover,#f19b46);--color-field-inverse:var(--color-brand-inverse,#763518);--color-content-stark:var(--color-brand-content,#de6618);--color-content-neutral:color-mix(in oklch,var(--color-brand-content,#de6618) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-brand-content,#de6618) 70%,transparent)}:where(.accent){--color-field-surface:var(--color-accent-surface,oklch(16.6% 0.026 267));--color-field-surface-hover:var(--color-accent-surface-hover,oklch(28.7% 0.030787 270.1));--color-field-inverse:var(--color-accent-inverse,oklch(100% 0 0));--color-content-stark:var(--color-accent-content,oklch(16.6% 0.026 267));--color-content-neutral:color-mix(in oklch,var(--color-accent-content,oklch(16.6% 0.026 267)) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-accent-content,oklch(16.6% 0.026 267)) 70%,transparent)}:where(.negative){--color-field-surface:var(--color-negative-surface,#ef4444);--color-field-surface-hover:var(--color-negative-surface-hover,#dc2626);--color-field-inverse:var(--color-negative-inverse,#fff);--color-content-stark:var(--color-negative-content,#ef4444);--color-content-neutral:color-mix(in oklch,var(--color-negative-content,#ef4444) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-negative-content,#ef4444) 70%,transparent)}:where(.positive){--color-field-surface:var(--color-positive-surface,#16a34a);--color-field-surface-hover:var(--color-positive-surface-hover,#166534);--color-field-inverse:var(--color-positive-inverse,#fff);--color-content-stark:var(--color-positive-content,#16a34a);--color-content-neutral:color-mix(in oklch,var(--color-positive-content,#16a34a) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-positive-content,#16a34a) 70%,transparent)}:where(.stark){color:var(--color-content-stark,oklch(16.6% .026 267))}:where(.neutral){color:var(--color-content-neutral,oklch(48.26% .0365 255.09))}:where(.subtle){color:var(--color-content-subtle,oklch(67.4% .0318 251.27))}}
@@ -43,14 +43,13 @@
43
43
 
44
44
  /* Ghost */
45
45
  :where(.ghost) {
46
- color: var(--color-content-stark, oklch(16.6% 0.026 267));
47
46
  background-color: transparent;
48
47
 
49
48
  &:hover {
50
49
  background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
51
50
  }
52
51
 
53
- &.brand:hover {
52
+ /* &.brand:hover {
54
53
  color: var(--color-brand-inverse, #763518)
55
54
  }
56
55
 
@@ -60,7 +59,7 @@
60
59
 
61
60
  &.negative:hover {
62
61
  color: var(--color-negative-inverse, white)
63
- }
62
+ } */
64
63
  }
65
64
 
66
65
  /* Hug */
@@ -83,11 +82,6 @@
83
82
  border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 80%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
84
83
  }
85
84
 
86
- /* Selected */
87
- :where(.selected) {
88
- background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
89
- }
90
-
91
85
  /* Transparent */
92
86
  :where(.transparent) {
93
87
  color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
@@ -183,7 +177,7 @@
183
177
  -webkit-appearance: none;
184
178
  appearance: none;
185
179
  display: none;
186
- margin: 0;
180
+ margin: 0
187
181
  }
188
182
  }
189
183
 
@@ -256,7 +250,7 @@
256
250
  }
257
251
 
258
252
  &>a:not(:where(h1, h2, h3, h4, h5, h6, p, small, figcaption, label, li, blockquote, pre code, code, kbd, span, mark, [role=button]) a) {
259
- margin-top: calc(1rem * 1.4);
253
+ margin-top: calc(1rem * 1.4)
260
254
  }
261
255
 
262
256
  &>blockquote {
@@ -299,7 +293,7 @@
299
293
  }
300
294
 
301
295
  &>h4+p {
302
- margin-top: 0.25rem;
296
+ margin-top: 0.25rem
303
297
  }
304
298
 
305
299
  &>h5 {
@@ -314,7 +308,12 @@
314
308
 
315
309
  &>hr {
316
310
  margin-top: calc(1rem * 3);
317
- margin-bottom: calc(1rem * 3)
311
+ margin-bottom: calc(1rem * 3);
312
+ }
313
+
314
+ &>details+hr:has(+ details) {
315
+ margin-top: 1rem;
316
+ margin-bottom: 1rem
318
317
  }
319
318
 
320
319
  &>img,
@@ -365,7 +364,7 @@
365
364
  --color-field-inverse: var(--color-brand-inverse, #763518);
366
365
  --color-content-stark: var(--color-brand-content, #de6618);
367
366
  --color-content-neutral: color-mix(in oklch, var(--color-brand-content, #de6618) 85%, transparent);
368
- --color-content-subtle: color-mix(in oklch, var(--color-brand-content, #de6618) 70%, transparent);
367
+ --color-content-subtle: color-mix(in oklch, var(--color-brand-content, #de6618) 70%, transparent)
369
368
  }
370
369
 
371
370
  /* Accent colors */
@@ -375,7 +374,7 @@
375
374
  --color-field-inverse: var(--color-accent-inverse, oklch(100% 0 0));
376
375
  --color-content-stark: var(--color-accent-content, oklch(16.6% 0.026 267));
377
376
  --color-content-neutral: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 85%, transparent);
378
- --color-content-subtle: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 70%, transparent);
377
+ --color-content-subtle: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 70%, transparent)
379
378
  }
380
379
 
381
380
  /* Negative colors */
@@ -385,7 +384,7 @@
385
384
  --color-field-inverse: var(--color-negative-inverse, white);
386
385
  --color-content-stark: var(--color-negative-content, #ef4444);
387
386
  --color-content-neutral: color-mix(in oklch, var(--color-negative-content, #ef4444) 85%, transparent);
388
- --color-content-subtle: color-mix(in oklch, var(--color-negative-content, #ef4444) 70%, transparent);
387
+ --color-content-subtle: color-mix(in oklch, var(--color-negative-content, #ef4444) 70%, transparent)
389
388
  }
390
389
 
391
390
  /* Positive colors */
@@ -395,19 +394,19 @@
395
394
  --color-field-inverse: var(--color-positive-inverse, white);
396
395
  --color-content-stark: var(--color-positive-content, #16a34a);
397
396
  --color-content-neutral: color-mix(in oklch, var(--color-positive-content, #16a34a) 85%, transparent);
398
- --color-content-subtle: color-mix(in oklch, var(--color-positive-content, #16a34a) 70%, transparent);
397
+ --color-content-subtle: color-mix(in oklch, var(--color-positive-content, #16a34a) 70%, transparent)
399
398
  }
400
399
 
401
400
  /* Text colors */
402
401
  :where(.stark) {
403
- color: var(--color-content-stark, oklch(16.6% 0.026 267));
402
+ color: var(--color-content-stark, oklch(16.6% 0.026 267))
404
403
  }
405
404
 
406
405
  :where(.neutral) {
407
- color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
406
+ color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
408
407
  }
409
408
 
410
409
  :where(.subtle) {
411
- color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27));
410
+ color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27))
412
411
  }
413
412
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mnfst",
3
- "version": "0.5.64",
3
+ "version": "0.5.66",
4
4
  "private": false,
5
5
  "workspaces": [
6
6
  "templates/starter",
@@ -25,10 +25,11 @@
25
25
  "prerender:docs": "node src/scripts/manifest.render.mjs --root docs",
26
26
  "prerender:starter": "node src/scripts/manifest.render.mjs --root templates/starter",
27
27
  "render": "node src/scripts/manifest.render.mjs --root src",
28
- "publish:starter": "cd packages/create-starter && npm publish --auth-type=web",
29
- "publish:run": "cd packages/run && npm publish --auth-type=web",
30
- "publish:render": "cd packages/render && npm publish --auth-type=web",
31
- "publish:claude": "cd packages/create-claude && npm publish --auth-type=web",
28
+ "release": "npm version patch --no-git-tag-version && npm publish",
29
+ "release:run": "cd packages/run && npm version patch --no-git-tag-version && npm publish --auth-type=web",
30
+ "release:render": "cd packages/render && npm version patch --no-git-tag-version && npm publish --auth-type=web",
31
+ "release:starter": "cd packages/create-starter && npm version patch --no-git-tag-version && npm publish --auth-type=web",
32
+ "release:all": "npm run release:run && npm run release:render && npm run release:starter && npm run release",
32
33
  "prepublishOnly": "npm run build",
33
34
  "test": "vitest run",
34
35
  "lint": "echo 'No linting configured'"
@@ -62,9 +63,9 @@
62
63
  "homepage": "https://manifestjs.org",
63
64
  "repository": {
64
65
  "type": "git",
65
- "url": "https://github.com/andrewmatlock/manifest.git"
66
+ "url": "https://github.com/Manifest-X/Manifest.git"
66
67
  },
67
68
  "bugs": {
68
- "url": "https://github.com/andrewmatlock/manifest/issues"
69
+ "url": "https://github.com/Manifest-X/Manifest/issues"
69
70
  }
70
- }
71
+ }