mnfst 0.5.53 → 0.5.54

package/lib/manifest.components.js

@@ -161,6 +161,11 @@ window.ManifestComponentsProcessor = {
             return;
         }
         if (element.hasAttribute('data-pre-rendered') || element.hasAttribute('data-processed')) {
+            // Pre-rendered components skip re-fetching, but hydrate-marked content
+            // still needs Alpine initialization (x-data, @click, :class, x-theme etc.).
+            if (element.hasAttribute('data-pre-rendered') && window.Alpine && typeof window.Alpine.initTree === 'function') {
+                try { window.Alpine.initTree(element); } catch (e) { /* graceful */ }
+            }
             return;
         }
         const content = await loader.loadComponent(name);

package/lib/manifest.css

@@ -690,6 +690,404 @@
     }
 }
 
+/* Manifest Color Picker */
+
+:root {
+    --icon-alpha-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23808080' opacity='0.15'/%3E%3Crect width='1' height='1' x='1' y='1' fill='%23808080' opacity='0.15'/%3E%3C/svg%3E");
+}
+
+@layer utilities {
+
+    /* Swatch trigger button */
+    :where(.colorpicker-swatch):not(.unstyle) {
+        position: relative;
+        width: var(--spacing-field-height, 2.25rem);
+        height: var(--spacing-field-height, 2.25rem);
+        min-width: var(--spacing-field-height, 2.25rem);
+        max-width: var(--spacing-field-height, 2.25rem);
+        padding: 0;
+        background: var(--swatch-color, #000000);
+        border-width: 1px;
+        border-style: solid;
+        border-color: oklch(from var(--swatch-color, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0));
+        border-radius: var(--radius, 0.5rem);
+        cursor: pointer;
+        overflow: hidden;
+        transition: var(--transition);
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:focus-visible {
+            border-color: oklch(from var(--swatch-color, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0) / 0.5)
+        }
+
+        /* Alpha pattern background */
+        &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            background-image: var(--icon-alpha-pattern);
+            background-size: 50%;
+            background-position: top left
+        }
+    }
+
+    /* Dropdown menu — unwrapped from :where() to beat base menu[popover] specificity */
+    [x-colorpicker]:not(.unstyle) {
+
+        /* Resetting dropdown styles */
+        & :where(hr) {
+            margin-top: 2px;
+            margin-bottom: 2px
+        }
+
+        /* & :where(li, a, button, label) {
+            width: fit-content;
+            min-width: var(--spacing-field-height, 2.25rem)
+        } */
+
+        /* Canvas wrapper */
+        & .canvas-wrapper {
+            position: relative;
+            width: 100%;
+            aspect-ratio: 1;
+            overflow: hidden;
+            cursor: crosshair;
+            touch-action: none
+        }
+
+        /* Canvas (SV plane) */
+        & canvas {
+            display: block;
+            width: 100%;
+            height: 100%
+        }
+
+        /* Reticle indicator */
+        & .color-reticle {
+            position: absolute;
+            width: 0.75rem;
+            height: 0.75rem;
+            z-index: 1;
+            border: 2px solid #ffffff;
+            border-radius: 50%;
+            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+        }
+
+        /* Optional color controls container */
+        & .color-controls {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            padding: 0.75rem
+        }
+
+        /* Shared slider styles */
+        & input[type=range].hue,
+        & input[type=range].alpha {
+            width: 100%;
+            height: 0.75rem;
+            padding: 0;
+            border-radius: 1rem;
+            appearance: none;
+            -webkit-appearance: none;
+            cursor: pointer;
+            outline: none;
+            border: none;
+            background: transparent;
+
+            /* Webkit thumb */
+            &::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                width: 1rem;
+                height: 1rem;
+                border-radius: 50%;
+                background: #ffffff;
+                border: 2px solid #ffffff;
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
+                cursor: grab;
+
+                &:active {
+                    cursor: grabbing;
+                }
+            }
+
+            /* Firefox thumb */
+            &::-moz-range-thumb {
+                width: 1rem;
+                height: 1rem;
+                border-radius: 50%;
+                background: #ffffff;
+                border: 2px solid #ffffff;
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
+                cursor: grab;
+
+                &:active {
+                    cursor: grabbing;
+                }
+            }
+
+            /* Webkit track */
+            &::-webkit-slider-runnable-track {
+                height: 0.75rem;
+                border-radius: 1rem
+            }
+
+            /* Firefox track */
+            &::-moz-range-track {
+                height: 0.75rem;
+                border-radius: 1rem
+            }
+        }
+
+        /* Hue slider - static rainbow gradient */
+        & input[type=range].hue {
+            &::-webkit-slider-runnable-track {
+                background: linear-gradient(to right,
+                        hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
+                        hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
+                        hsl(360 100% 50%))
+            }
+
+            &::-moz-range-track {
+                background: linear-gradient(to right,
+                        hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
+                        hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
+                        hsl(360 100% 50%))
+            }
+        }
+
+        /* Alpha slider - checkerboard + color gradient (set via JS --cp-color) */
+        & input[type=range].alpha {
+            --cp-color: rgb(0, 0, 0);
+            position: relative;
+
+            &::-webkit-slider-runnable-track {
+                background:
+                    linear-gradient(to right, transparent, var(--cp-color)),
+                    repeating-conic-gradient(#e0e0e0 0% 25%, #ffffff 0% 50%) 0 0 / 0.5rem 0.5rem
+            }
+
+            &::-moz-range-track {
+                background:
+                    linear-gradient(to right, transparent, var(--cp-color)),
+                    repeating-conic-gradient(#e0e0e0 0% 25%, #ffffff 0% 50%) 0 0 / 0.5rem 0.5rem
+            }
+        }
+
+        /* Color space selector */
+        & select.color-format {
+            width: 8ch;
+            padding-inline-start: 0;
+            padding-inline-end: 0;
+            font-size: 0.6875rem;
+
+            &::picker-icon {
+                display: none
+            }
+        }
+
+        /* Color value input */
+        & input.color-value {
+            flex: 1;
+            padding-inline-end: 0;
+            font-size: 50%
+        }
+
+        /* Alpha value input — hide spin buttons */
+        & input.alpha-value {
+            width: 6ch;
+            padding-inline-end: 0;
+            font-size: 50%;
+            -moz-appearance: textfield;
+
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                -webkit-appearance: none;
+                margin: 0
+            }
+        }
+
+        /* Gradient layers container */
+        & .gradient-layers {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        /* Floating menus (non-popover, manually positioned) */
+        & .layer-angle-menu,
+        & .stop-floating-menu {
+            display: none;
+            flex-direction: column;
+            min-width: 140px;
+            margin: 0;
+            padding: 0.25rem;
+            list-style: none;
+            background: var(--color-popover-surface, oklch(100% 0 0));
+            border-radius: var(--radius, 0.5rem);
+            box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
+            z-index: 100;
+
+            & :where(li) {
+                display: flex;
+                align-items: center;
+                padding: 0.25rem 0.5rem;
+                font-size: 0.8125rem;
+                color: var(--color-content-stark, oklch(16.6% 0.026 267));
+                border-radius: 6px;
+                cursor: pointer;
+                user-select: none;
+
+                &:hover {
+                    background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+                }
+
+                &.negative:hover {
+                    color: var(--color-negative-content, #ef4444);
+                }
+            }
+
+            & :where(hr) {
+                margin: 0.25rem 0;
+                border: none;
+                border-top: 1px solid var(--color-line, color-mix(in oklch, oklch(16.6% 0.026 267) 11%, transparent));
+            }
+
+            & :where(small) {
+                display: block;
+                padding: 0.25rem 0.5rem 0.125rem;
+                font-size: 0.6875rem;
+                color: var(--color-content-subtle, oklch(52.38% 0.017 264.26));
+            }
+        }
+
+        & .layer-angle-menu.show,
+        & .stop-floating-menu {
+            display: flex;
+        }
+
+        /* Stop-floating-menu always shows when present (added to DOM) */
+        & .stop-floating-menu {
+            display: flex;
+        }
+
+        /* Angle input label */
+        & .layer-angle {
+            display: inline-flex;
+            align-items: center;
+            cursor: ew-resize;
+
+            & input[type=number] {
+                width: 4ch;
+                padding: 0 0.125rem;
+                font-size: 0.625rem;
+                font-family: ui-monospace, monospace;
+                text-align: right;
+                background: transparent;
+                border: none;
+                color: var(--color-content-stark, oklch(16.6% 0.026 267));
+                outline: none;
+                cursor: ew-resize;
+                -moz-appearance: textfield !important;
+                appearance: textfield !important;
+
+                &:focus {
+                    cursor: text;
+                    background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+                    border-radius: 0.125rem;
+                }
+            }
+
+            & span {
+                font-size: 0.625rem;
+                color: var(--color-content-subtle, oklch(52.38% 0.017 264.26));
+                pointer-events: none;
+                user-select: none;
+            }
+        }
+
+        /* Gradient stop bar */
+        & .gradient-layer {
+            position: relative;
+            width: 100%;
+            height: 0.75rem;
+            border-radius: 1rem;
+            cursor: pointer;
+            background: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+        }
+
+        & .stop-handle {
+            position: absolute;
+            top: 50%;
+            width: 1rem;
+            height: 1rem;
+            border-radius: 50%;
+            border: 2px solid #ffffff;
+            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
+            transform: translate(-50%, -50%);
+            cursor: grab;
+            z-index: 1;
+            touch-action: none;
+
+            &.active {
+                box-shadow: 0 0 0 2px var(--color-brand-content, #de6618), 0 1px 3px rgba(0, 0, 0, 0.25);
+            }
+
+            &:active {
+                cursor: grabbing;
+            }
+        }
+
+        /* Stop context menu */
+        & .stop-context-menu {
+            min-width: 140px;
+        }
+
+        /* Eyedropper button */
+        & .eyedropper {}
+
+        /* Swatches grid */
+        & .swatches {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.25rem;
+
+            & [data-color] {
+                width: 1.25rem;
+                height: 1.25rem;
+                border-radius: calc(var(--radius, 0.5rem) - 0.125rem);
+                border: 1px solid var(--color-line, color-mix(in oklch, oklch(16.6% 0.026 267) 11%, transparent));
+                cursor: pointer;
+                transition: var(--transition, all .05s ease-in-out);
+
+                &:hover {
+                    scale: 1.15;
+                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
+                }
+            }
+        }
+    }
+
+    /* Hide number input spin buttons inside colorpicker (high specificity, flat selectors) */
+    menu[popover].colorpicker .layer-angle input[type=number]::-webkit-inner-spin-button,
+    menu[popover].colorpicker .layer-angle input[type=number]::-webkit-outer-spin-button {
+        -webkit-appearance: none !important;
+        appearance: none !important;
+        margin: 0 !important;
+        display: none !important;
+        width: 0 !important;
+        height: 0 !important;
+    }
+}
+
 /* Manifest Dialogs */
 
 @layer components {
@@ -975,7 +1373,7 @@
             flex-shrink: 0;
 
             &:not(:first-child) {
-                margin-top: var(--spacing, 0.25rem)
+                /* margin-top: var(--spacing, 0.25rem) */
             }
         }
 
@@ -1293,7 +1691,7 @@
 
 @layer components {
 
-    :where(input:not([type=range]), textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
+    :where(input:not([type=range], [type=color]), textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
         width: 100%;
         max-width: 100%;
         color: var(--color-field-inverse, oklch(16.6% 0.026 267));

package/lib/manifest.dropdown.css

@@ -132,7 +132,7 @@
             flex-shrink: 0;
 
             &:not(:first-child) {
-                margin-top: var(--spacing, 0.25rem)
+                /* margin-top: var(--spacing, 0.25rem) */
             }
         }
 

package/lib/manifest.dropdowns.js

@@ -170,6 +170,12 @@ function initializeDropdownPlugin() {
                             }
                         };
 
+                        // True when pointer is over an open Manifest tooltip (hint popover), e.g. after leaving the menu
+                        const isOverOpenHintTooltip = () =>
+                            Array.from(document.querySelectorAll('.tooltip:popover-open')).some((t) =>
+                                t.matches(':hover')
+                            );
+
                         // Enhanced auto-close when mouse leaves both trigger and menu
                         startAutoCloseTimer = () => {
                             clearTimeout(autoCloseTimeout);
@@ -178,7 +184,7 @@ function initializeDropdownPlugin() {
                                     const isOverButton = el.matches(':hover');
                                     const isOverMenu = menu.matches(':hover');
 
-                                    if (!isOverButton && !isOverMenu) {
+                                    if (!isOverButton && !isOverMenu && !isOverOpenHintTooltip()) {
                                         menu.hidePopover();
                                     }
                                 }

package/lib/manifest.input.css

@@ -2,7 +2,7 @@
 
 @layer components {
 
-    :where(input:not([type=range]), textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
+    :where(input:not([type=range], [type=color]), textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
         width: 100%;
         max-width: 100%;
         color: var(--color-field-inverse, oklch(16.6% 0.026 267));

package/lib/manifest.js

@@ -11,6 +11,166 @@
 (function () {
 	'use strict';
 
+	/*
+	 * Hydration contract runtime
+	 * --------------------------
+	 * Prerendered MPA pages carry a `<script type="application/json"
+	 * id="__manifest_hydrate__">` blob containing the source-authored
+	 * attributes (and, for explicit `data-hydrate` subtrees, the source
+	 * innerHTML) of every element that needs runtime hydration.  This
+	 * function runs once on page load BEFORE any plugin or Alpine starts —
+	 * it walks the contract, restores source state, and removes its own
+	 * markers.  Every downstream plugin (themes, router, data, markdown,
+	 * icons, …) then sees exactly the DOM the user authored, exactly as it
+	 * would in a live SPA.  No plugin needs a "prerender mode" branch.
+	 *
+	 * Implementation notes:
+	 *  - We use a temp-div HTML parse to set attributes because `setAttribute`
+	 *    throws InvalidCharacterError on Alpine special names like `@click`.
+	 *    The HTML parser is lenient and accepts them.
+	 *  - The contract is a compact diff: only attributes whose values drifted
+	 *    from source during prerender appear.  An entry's `attrs` object maps
+	 *    attribute name -> source value, or null to mean "remove".
+	 */
+	function hydratePrerenderedPage() {
+		if (typeof document === 'undefined' || !document.querySelector) return;
+		// Only run on pages the prerender marked as static MPA output.
+		const prerenderMeta = document.querySelector('meta[name="manifest:prerendered"]');
+		if (!prerenderMeta || prerenderMeta.getAttribute('content') === '0') return;
+		const blob = document.getElementById('__manifest_hydrate__');
+		if (!blob) return;
+		let entries;
+		try {
+			entries = JSON.parse(blob.textContent || '[]');
+		} catch (_) {
+			entries = [];
+		}
+		if (!Array.isArray(entries) || entries.length === 0) {
+			blob.remove();
+			return;
+		}
+		const escAttr = (s) => String(s == null ? '' : s)
+			.replace(/&/g, '&amp;')
+			.replace(/"/g, '&quot;');
+		const voidEls = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+
+		// Restore deepest-first so that when an ancestor rebuilds its innerHTML,
+		// its children have already been restored and their source state is what
+		// the ancestor captures.
+		const items = [];
+		for (const entry of entries) {
+			const el = document.querySelector('[data-hydrate-id="' + entry.id + '"]');
+			if (!el) continue;
+			let depth = 0;
+			for (let p = el.parentNode; p; p = p.parentNode) depth++;
+			items.push({ entry, el, depth });
+		}
+		items.sort((a, b) => b.depth - a.depth);
+
+		for (const { entry, el: initialEl } of items) {
+			const el = document.querySelector('[data-hydrate-id="' + entry.id + '"]') || initialEl;
+			if (!el || !el.parentNode) continue;
+
+			// Case 1: explicit subtree restoration (entry.html present).
+			// Rebuild the element from scratch via outerHTML replacement so the
+			// entire subtree mirrors the authored source.
+			if (typeof entry.html === 'string') {
+				const tag = el.tagName.toLowerCase();
+				const finalAttrs = {};
+				// Start from current attrs, then apply the contract diff.
+				const cur = el.attributes;
+				for (let i = 0; i < cur.length; i++) {
+					if (cur[i].name !== 'data-hydrate-id') finalAttrs[cur[i].name] = cur[i].value;
+				}
+				if (entry.attrs) {
+					for (const name in entry.attrs) {
+						const v = entry.attrs[name];
+						if (v === null) delete finalAttrs[name];
+						else finalAttrs[name] = v;
+					}
+				}
+				const attrString = Object.keys(finalAttrs)
+					.map((n) => n + '="' + escAttr(finalAttrs[n]) + '"')
+					.join(' ');
+				const isVoid = voidEls.has(tag);
+				const newHTML = isVoid
+					? '<' + tag + ' ' + attrString + '>'
+					: '<' + tag + ' ' + attrString + '>' + entry.html + '</' + tag + '>';
+				const tmp = document.createElement('div');
+				tmp.innerHTML = newHTML;
+				const parsed = tmp.firstElementChild;
+				if (parsed) {
+					try { el.parentNode.replaceChild(parsed, el); } catch (_) {}
+				}
+				continue;
+			}
+
+			// Case 2: attribute-only diff.  Reparse the element with the merged
+			// attribute set (current attrs overlaid by source diff) so that
+			// special-name attributes like @click work.  Preserve innerHTML.
+			if (!entry.attrs) continue;
+			const tag = el.tagName.toLowerCase();
+			const finalAttrs = {};
+			const cur = el.attributes;
+			for (let i = 0; i < cur.length; i++) {
+				if (cur[i].name !== 'data-hydrate-id') finalAttrs[cur[i].name] = cur[i].value;
+			}
+			for (const name in entry.attrs) {
+				const v = entry.attrs[name];
+				if (v === null) delete finalAttrs[name];
+				else finalAttrs[name] = v;
+			}
+			const attrString = Object.keys(finalAttrs)
+				.map((n) => n + '="' + escAttr(finalAttrs[n]) + '"')
+				.join(' ');
+			const isVoid = voidEls.has(tag);
+			const innerHTML = isVoid ? '' : el.innerHTML;
+			const newHTML = isVoid
+				? '<' + tag + ' ' + attrString + '>'
+				: '<' + tag + ' ' + attrString + '>' + innerHTML + '</' + tag + '>';
+			const tmp = document.createElement('div');
+			tmp.innerHTML = newHTML;
+			const parsed = tmp.firstElementChild;
+			if (parsed) {
+				try { el.parentNode.replaceChild(parsed, el); } catch (_) {}
+			}
+		}
+
+		blob.remove();
+	}
+
+	// Run hydration BEFORE Alpine's deferred script executes.
+	//
+	// Timing: `<script defer>` runs AFTER HTML parsing finishes but BEFORE
+	// `DOMContentLoaded` fires.  So listening for DOMContentLoaded is too late —
+	// Alpine has already walked the tree and attached directives by then, and
+	// our `replaceChild`-based restore would destroy the Alpine-bound nodes.
+	//
+	// The only earlier hook is `readystatechange → 'interactive'`, which is
+	// dispatched the moment the parser finishes and BEFORE deferred scripts run.
+	// We also run synchronously if readyState is already 'interactive' or later
+	// (e.g. if manifest.js was injected dynamically after page load).
+	function tryHydrate() {
+		try { hydratePrerenderedPage(); } catch (e) { /* graceful */ }
+	}
+	if (typeof document !== 'undefined') {
+		if (document.readyState === 'loading') {
+			// We're still parsing.  Listen for 'interactive' via readystatechange
+			// — this is the earliest moment document.body is guaranteed to exist
+			// but deferred scripts haven't run yet.
+			let hydrated = false;
+			document.addEventListener('readystatechange', () => {
+				if (!hydrated && document.readyState !== 'loading') {
+					hydrated = true;
+					tryHydrate();
+				}
+			});
+		} else {
+			// Parser already done (interactive or complete).  Hydrate immediately.
+			tryHydrate();
+		}
+	}
+
 	// Configuration
 	const DEFAULT_VERSION = 'latest';
 	const ALPINE_CDN_URL = 'https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js';
@@ -36,7 +196,8 @@
 		'dropdowns',
 		'tabs',
 		'slides',
-		'resize'
+		'resize',
+		'colorpicker'
 	];
 
 	// Appwrite integration plugins (opt-in only, never auto-loaded)
@@ -79,16 +240,26 @@
 		});
 	}
 
-	// Get plugin URL from CDN
+	// Get plugin URL from CDN or the `data-plugin-base` override.  When the
+	// loader's <script> tag carries `data-plugin-base="/scripts"` (or an
+	// absolute URL), plugins are loaded from that base as unminified `.js`
+	// files.  Otherwise they come from the jsDelivr CDN as `.min.js`.
+	let _pluginBase = null;
+	function setPluginBase(b) { _pluginBase = b || null; }
 	function getPluginUrl(pluginName, version = DEFAULT_VERSION) {
+		if (_pluginBase) {
+			const base = _pluginBase.replace(/\/$/, '');
+			if (pluginName.startsWith('appwrite-')) {
+				const appwriteName = pluginName.replace('appwrite-', 'appwrite.');
+				return `${base}/manifest.${appwriteName}.js`;
+			}
+			return `${base}/manifest.${pluginName}.js`;
+		}
 		const base = getBaseUrl(version);
-
-		// Handle Appwrite plugin naming (appwrite-auth -> manifest.appwrite.auth.min.js)
 		if (pluginName.startsWith('appwrite-')) {
 			const appwriteName = pluginName.replace('appwrite-', 'appwrite.');
 			return `${base}/manifest.${appwriteName}.min.js`;
 		}
-
 		return `${base}/manifest.${pluginName}.min.js`;
 	}
 
@@ -99,23 +270,31 @@
 		return `https://cdn.jsdelivr.net/npm/alpinejs@${dataAlpine}/dist/cdn.min.js`;
 	}
 
-	// Load Alpine.js from CDN with defer attribute
-	// Alpine waits for DOM to be ready, and by then all plugins are registered
+	// Load Alpine.js from CDN.  Called by the loader AFTER all plugin scripts
+	// have finished loading and registered their directives/magics.  We do
+	// NOT use `defer` here — defer fires at DOMContentLoaded, which may race
+	// the plugin loads; instead we wait for every plugin script's load event
+	// explicitly and then append Alpine synchronously (the script downloads
+	// but Alpine's `auto-start` hooks DOMContentLoaded if still loading, or
+	// runs immediately if past it).
 	function loadAlpine(alpineUrl = ALPINE_CDN_URL) {
 		// Fast check: Alpine already initialized
 		if (window.Alpine) {
 			return;
 		}
 
-		// Fallback: Check if script tag exists (Alpine might be loading)
-		const existingAlpine = document.querySelector('script[src*="alpine"]');
+		// Fallback: if an existing Alpine <script> tag is already in the DOM
+		// (e.g. the fixture explicitly added one), wait for it — don't inject
+		// a second copy.
+		const existingAlpine = document.querySelector('script[src*="alpinejs"]');
 		if (existingAlpine) {
 			return;
 		}
 
 		const script = document.createElement('script');
 		script.src = alpineUrl;
-		script.defer = true; // Critical: defer ensures Alpine waits for DOM and all plugins
+		// No `defer` — we're already past plugin registration, so Alpine
+		// should load and execute as soon as it arrives.
 		document.head.appendChild(script);
 	}
 
@@ -229,6 +408,12 @@
 		const tailwind = script.getAttribute('data-tailwind') !== null;
 		const version = script.getAttribute('data-version') || DEFAULT_VERSION;
 		const alpine = script.getAttribute('data-alpine');
+		// Optional override: when present, plugin URLs are resolved against
+		// this base instead of the CDN.  Useful for self-hosted deployments
+		// and for the e2e harness which needs to load locally-built plugins.
+		// The base should point at a directory that serves `manifest.<name>.js`
+		// files.  It can be relative (e.g. "/scripts") or absolute.
+		const pluginBase = script.getAttribute('data-plugin-base');
 
 		let pluginList = [];
 		const deriveFromManifest = !plugins;
@@ -255,7 +440,8 @@
 			deriveFromManifest,
 			tailwind,
 			version,
-			alpine
+			alpine,
+			pluginBase,
 		};
 	}
 
@@ -304,6 +490,7 @@
 
 	// Parse config and load plugins
 	const config = parseDataAttributes();
+	if (config && config.pluginBase) setPluginBase(config.pluginBase);
 
 	// Detect Appwrite usage from manifest (non-blocking, just suggests)
 	detectAppwriteFromManifest();

package/lib/manifest.markdown.js

@@ -309,6 +309,15 @@ async function initializeMarkdownPlugin() {
         // Check if there are any elements with x-markdown already on the page
         const existingMarkdownElements = document.querySelectorAll('[x-markdown]');
 
+        // Detect whether this page was produced by the prerender.  On
+        // prerendered pages, x-markdown elements arrive with their content
+        // already rendered to HTML — we must NOT hide them on init or the
+        // user sees a flash of empty content while the plugin re-fetches.
+        const isPrerenderedPage = !!(
+            document.querySelector('meta[name="manifest:prerendered"]') &&
+            document.querySelector('meta[name="manifest:prerendered"]').getAttribute('content') !== '0'
+        );
+
         // Register markdown directive
         Alpine.directive('markdown', (el, { expression, modifiers }, { effect, evaluateLater }) => {
 
@@ -317,14 +326,23 @@ async function initializeMarkdownPlugin() {
                 return;
             }
 
-            // Hide element initially to prevent flicker
-            el.style.opacity = '0';
-            el.style.transition = 'opacity 0.15s ease-in-out';
+            // Prerender idempotency: if the page is a prerendered MPA and this
+            // element already has rendered HTML children, the content was baked
+            // at build time and is authoritative for SEO + no-JS users.  Skip
+            // the initial hide-and-re-render step entirely.  We still register
+            // the reactive effect below so the content can update if its
+            // expression is dynamic and later changes (e.g. via $route).
+            const hasBakedContent = isPrerenderedPage && el.innerHTML && el.innerHTML.trim() !== '';
+            if (!hasBakedContent) {
+                // Hide element initially to prevent flicker (live SPA behaviour)
+                el.style.opacity = '0';
+                el.style.transition = 'opacity 0.15s ease-in-out';
+            }
 
             // Store original markdown content
             let markdownSource = '';
             let isUpdating = false;
-            let hasContent = false;
+            let hasContent = hasBakedContent;
 
             const normalizeContent = (content) => {
                 const lines = content.split('\n');
@@ -428,6 +446,15 @@ async function initializeMarkdownPlugin() {
                 return;
             }
 
+            // Prerender idempotency: on prerendered MPA pages with baked content,
+            // the x-markdown element is already correct — skip the reactive effect
+            // entirely.  Navigation on MPA is full page loads, so there's no
+            // dynamic re-resolution to handle; each route serves its own prerendered
+            // HTML with the right baked content.
+            if (hasBakedContent) {
+                return;
+            }
+
             // Handle expressions (file paths, inline strings, content references)
             // Check if this is a simple string literal that needs to be quoted
             let processedExpression = expression;

package/lib/manifest.min.css

@@ -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}}}@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)}}}@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]):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:2rem;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){margin-top:var(--spacing,.25rem)}}& 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]),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:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 25%,transparent)}: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}}: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))}}
+@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}}}@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{--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 utilities{:where(.colorpicker-swatch):not(.unstyle){background:var(--swatch-color,#000);border-color:oklch(from var(--swatch-color,#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(--swatch-color,#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}}[x-colorpicker]:not(.unstyle){& :where(hr){margin-bottom:2px;margin-top:2px}& .canvas-wrapper{aspect-ratio:1;cursor:crosshair;overflow:hidden;position:relative;touch-action:none;width:100%}& canvas{display:block;height:100%;width:100%}& .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}& .color-controls{display:flex;flex-direction:column;gap:.75rem;padding:.75rem}& input[type=range].alpha,& input[type=range].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[type=range].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[type=range].alpha{--cp-color:#000;position:relative;&::-webkit-slider-runnable-track{background:linear-gradient(to right,transparent,var(--cp-color)),repeating-conic-gradient(#e0e0e0 0 25%,#fff 0 50%) 0 0 /.5rem .5rem}&::-moz-range-track{background:linear-gradient(to right,transparent,var(--cp-color)),repeating-conic-gradient(#e0e0e0 0 25%,#fff 0 50%) 0 0 /.5rem .5rem}}& select.color-format{font-size:.6875rem;padding-inline-end:0;padding-inline-start:0;width:8ch;&::picker-icon{display:none}}& input.color-value{flex:1;font-size:50%;padding-inline-end:0}& input.alpha-value{-moz-appearance:textfield;font-size:50%;padding-inline-end:0;width:6ch;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}}& .gradient-layers{display:flex;flex-direction:column;gap:.5rem}& .layer-angle-menu,& .stop-floating-menu{background:var(--color-popover-surface,oklch(100% 0 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);display:none;flex-direction:column;list-style:none;margin:0;min-width:140px;padding:.25rem;z-index:100;& :where(li){align-items:center;border-radius:6px;color:var(--color-content-stark,oklch(16.6% .026 267));cursor:pointer;display:flex;font-size:.8125rem;padding:.25rem .5rem;user-select:none;&:hover{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26))}&.negative:hover{color:var(--color-negative-content,#ef4444)}}& :where(hr){border:none;border-top:1px solid var(--color-line,color-mix(in oklch,oklch(16.6% .026 267) 11%,transparent));margin:.25rem 0}& :where(small){color:var(--color-content-subtle,oklch(52.38% .017 264.26));display:block;font-size:.6875rem;padding:.25rem .5rem .125rem}}& .layer-angle-menu.show,& .stop-floating-menu{display:flex}& .layer-angle{align-items:center;cursor:ew-resize;display:inline-flex;& input[type=number]{-moz-appearance:textfield!important;appearance:textfield!important;background:transparent;border:none;color:var(--color-content-stark,oklch(16.6% .026 267));cursor:ew-resize;font-family:ui-monospace,monospace;font-size:.625rem;outline:none;padding:0 .125rem;text-align:right;width:4ch;&:focus{background-color:var(--color-field-surface,oklch(91.79% .0029 264.26));border-radius:.125rem;cursor:text}}& span{color:var(--color-content-subtle,oklch(52.38% .017 264.26));font-size:.625rem;pointer-events:none;user-select:none}}& .gradient-layer{background:var(--color-field-surface,oklch(91.79% .0029 264.26));border-radius:1rem;cursor:pointer;height:.75rem;position:relative;width:100%}& .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;&.active{box-shadow:0 0 0 2px var(--color-brand-content,#de6618),0 1px 3px rgba(0,0,0,.25)}&:active{cursor:grabbing}}& .stop-context-menu{min-width:140px}& .eyedropper{}& .swatches{display:flex;flex-wrap:wrap;gap:.25rem;& [data-color]{border:1px solid var(--color-line,color-mix(in oklch,oklch(16.6% .026 267) 11%,transparent));border-radius:calc(var(--radius, .5rem) - .125rem);cursor:pointer;height:1.25rem;transition:var(--transition,all .05s ease-in-out);width:1.25rem;&:hover{box-shadow:0 1px 3px rgba(0,0,0,.2);scale:1.15}}}}menu[popover].colorpicker .layer-angle input[type=number]::-webkit-inner-spin-button,menu[popover].colorpicker .layer-angle input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none!important;appearance:none!important;display:none!important;height:0!important;margin:0!important;width:0!important}}@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]):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:2rem;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:color-mix(in oklch,var(--color-field-surface,oklch(91.79% .0029 264.26)) 25%,transparent)}: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}}: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))}}

package/lib/manifest.tooltips.js

@@ -43,6 +43,18 @@ function getTooltipHoverDelay(element) {
     }
 }
 
+/** Keep anchor-name on the trigger long after hide so position-anchor stays valid through any close transition/layout. */
+const ANCHOR_RESTORE_DELAY_MS = 2000;
+
+/**
+ * DOM parent for the tooltip popover. Must be the same popover subtree as the trigger when the trigger
+ * lives inside menu/dialog/etc.; otherwise CSS anchor positioning cannot resolve (tooltip in body + anchor
+ * inside top-layer popover → invalid position-anchor, jump to origin).
+ */
+function getTooltipHostForTrigger(triggerEl) {
+    return triggerEl.closest('[popover]') || document.body;
+}
+
 function initializeTooltipPlugin() {
 
     Alpine.directive('tooltip', (el, { modifiers, expression }, { effect, evaluateLater }) => {
@@ -92,9 +104,9 @@ function initializeTooltipPlugin() {
                 originalTarget = el.getAttribute('x-dropdown');
             }
 
-            // Create the tooltip element
+            // Create the tooltip element (hint popovers coexist with auto menus/dialogs)
             const tooltip = document.createElement('div');
-            tooltip.setAttribute('popover', '');
+            tooltip.setAttribute('popover', 'hint');
             tooltip.setAttribute('id', tooltipId);
             tooltip.setAttribute('class', 'tooltip');
 
@@ -117,15 +129,55 @@ function initializeTooltipPlugin() {
                 tooltip.classList.add(positionClass);
             }
 
-            // Add the tooltip to the document
-            document.body.appendChild(tooltip);
+            // Mount under the same popover as the trigger when applicable (see getTooltipHostForTrigger)
+            getTooltipHostForTrigger(el).appendChild(tooltip);
 
             // State variables for managing tooltip behavior
             let showTimeout;
+            let restoreAnchorTimeout = null;
+            let anchorRestoreGeneration = 0;
             let isMouseDown = false;
             let isDynamic = expression.includes('+') || expression.includes('`') || expression.includes('${') || expression.startsWith('$x.');
             let isUpdatingContent = false;
 
+            function restoreOriginalAnchor() {
+                if (el._originalAnchorName) {
+                    el.style.setProperty('anchor-name', el._originalAnchorName);
+                } else {
+                    el.style.removeProperty('anchor-name');
+                }
+            }
+
+            function cancelScheduledAnchorRestore() {
+                anchorRestoreGeneration += 1;
+                if (restoreAnchorTimeout !== null) {
+                    clearTimeout(restoreAnchorTimeout);
+                    restoreAnchorTimeout = null;
+                }
+            }
+
+            function scheduleAnchorRestoreAfterTooltipDismissal(restoreFn) {
+                cancelScheduledAnchorRestore();
+                const gen = anchorRestoreGeneration;
+                const run = () => {
+                    if (gen !== anchorRestoreGeneration) return;
+                    restoreAnchorTimeout = null;
+                    restoreFn();
+                };
+                restoreAnchorTimeout = setTimeout(run, ANCHOR_RESTORE_DELAY_MS);
+            }
+
+            function scheduleRestoreAnchorAfterClose() {
+                scheduleAnchorRestoreAfterTooltipDismissal(() => restoreOriginalAnchor());
+            }
+
+            function ensureTooltipHostMatchesTrigger() {
+                const host = getTooltipHostForTrigger(el);
+                if (tooltip.parentNode !== host) {
+                    host.appendChild(tooltip);
+                }
+            }
+
             // Function to update tooltip content - prevents double updates
             const updateTooltipContent = () => {
                 // Prevent concurrent updates that cause flicker
@@ -148,6 +200,8 @@ function initializeTooltipPlugin() {
             }
 
             el.addEventListener('mouseenter', () => {
+                cancelScheduledAnchorRestore();
+                clearTimeout(showTimeout);
                 if (!isMouseDown) {
                     const hoverDelay = getTooltipHoverDelay(el);
                     showTimeout = setTimeout(() => {
@@ -161,6 +215,8 @@ function initializeTooltipPlugin() {
                                 updateTooltipContent();
                             }
 
+                            ensureTooltipHostMatchesTrigger();
+
                             // Only manage anchor-name if element has other popover functionality
                             if (originalTarget) {
                                 // Store current anchor name (dropdown may have set it by now)
@@ -190,10 +246,7 @@ function initializeTooltipPlugin() {
                 clearTimeout(showTimeout);
                 if (tooltip.matches(':popover-open')) {
                     tooltip.hidePopover();
-                    // Only restore anchor name if element has other popover functionality
-                    if (originalTarget) {
-                        restoreOriginalAnchor();
-                    }
+                    scheduleRestoreAnchorAfterClose();
                 }
             });
 
@@ -203,10 +256,7 @@ function initializeTooltipPlugin() {
                 if (tooltip.matches(':popover-open')) {
                     tooltip.hidePopover();
                 }
-                // Only restore anchor name if element has other popover functionality
-                if (originalTarget) {
-                    restoreOriginalAnchor();
-                }
+                scheduleRestoreAnchorAfterClose();
             });
 
             el.addEventListener('mouseup', () => {
@@ -222,43 +272,26 @@ function initializeTooltipPlugin() {
                     tooltip.hidePopover();
                 }
 
-                // Don't restore anchor immediately - let other click handlers run first
-                // This allows dropdown plugin to set its own anchor-name
-                setTimeout(() => {
-                    // Only restore anchor if no popover opened from this click
+                // After computed transition time: restore anchor only if no popover opened from this click
+                scheduleAnchorRestoreAfterTooltipDismissal(() => {
                     if (originalTarget) {
                         const targetPopover = document.getElementById(originalTarget);
                         const isPopoverOpen = targetPopover?.matches(':popover-open');
                         if (!targetPopover || !isPopoverOpen) {
                             restoreOriginalAnchor();
                         }
-                        // If popover is open, keep current anchor (don't restore)
                     } else {
                         restoreOriginalAnchor();
                     }
-                }, 100); // Give other plugins time to set their anchors
+                });
             });
 
-            // Helper function to restore original anchor
-            function restoreOriginalAnchor() {
-                if (el._originalAnchorName) {
-                    // Restore the original anchor name
-                    el.style.setProperty('anchor-name', el._originalAnchorName);
-                } else {
-                    // Remove the tooltip anchor name so other plugins can set their own
-                    el.style.removeProperty('anchor-name');
-                }
-            }
-
             // Listen for other popovers opening and close tooltip if needed
             const handlePopoverOpen = (event) => {
                 // If another popover opens and it's not our tooltip, close our tooltip
                 if (event.target !== tooltip && tooltip.matches(':popover-open')) {
                     tooltip.hidePopover();
-                    // Only restore anchor name if element has other popover functionality
-                    if (originalTarget) {
-                        restoreOriginalAnchor();
-                    }
+                    scheduleRestoreAnchorAfterClose();
                 }
             };
 
@@ -270,6 +303,7 @@ function initializeTooltipPlugin() {
 
             // Cleanup function for when element is removed
             const cleanup = () => {
+                cancelScheduledAnchorRestore();
                 if (el._tooltipPopoverListener) {
                     document.removeEventListener('toggle', el._tooltipPopoverListener);
                     delete el._tooltipPopoverListener;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.53",
+    "version": "0.5.54",
     "private": false,
     "workspaces": [
         "templates/starter",