mnfst 0.5.90 → 0.5.92

package/lib/manifest.code.css

@@ -331,12 +331,13 @@
             inset-inline-start: 0;
             display: inline-flex;
             flex-direction: column;
-            padding: calc(var(--spacing, 0.25rem) * 4) 0 calc(var(--spacing, 0.25rem) * 4) calc(var(--spacing, 0.25rem) * 4);
+            padding: calc(var(--spacing, .25rem) * 4);
             font-family: inherit;
             font-size: inherit;
             line-height: inherit;
             text-align: end;
             color: var(--color-content-subtle, darkgray);
+            background-color: var(--color-page, white);
             pointer-events: none;
             user-select: none
         }
@@ -391,6 +392,14 @@
 
         /* Preview frames */
         :where(aside.frame) {
+            font-size: unset;
+            line-height: unset;
+            font-family: unset;
+            font-weight: unset;
+            color: unset;
+            background: unset;
+            border: unset;
+            box-shadow: unset;
             border: 0 none;
             white-space: normal;
             white-space-collapse: collapse

package/lib/manifest.code.min.css

@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");:root{--icon-code-copy:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");--icon-code-copied:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jb3B5LWNoZWNrLWljb24gbHVjaWRlLWNvcHktY2hlY2siIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTEyIDE1IDIgMiA0LTQiLz48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjgiIHk9IjgiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik00IDE2Yy0xLjEgMC0yLS45LTItMlY0YzAtMS4xLjktMiAyLTJoMTBjMS4xIDAgMiAuOSAyIDIiLz48L3N2Zz4=");--icon-code-expand: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='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--color-code-keyword:#b8860b;--color-code-string:#8b4513;--color-code-comment:gray;--color-code-function:peru;--color-code-number:sienna;--color-code-operator:#2f4f4f;--color-code-class-name:#daa520;--color-code-tag:#4682b4;--color-code-attr-name:#ff8c00;--color-code-attr-value:#8b4513;--color-code-property:sienna;--color-code-selector:#4682b4;--color-code-punctuation:#2f4f4f;--color-code-builtin:#b8860b;--color-code-constant:sienna;--color-code-boolean:sienna;--color-code-regex:#8b4513;--color-code-symbol:#daa520;--color-code-entity:#daa520;--color-code-url:sienna;--color-code-atrule:#b8860b;--color-code-rule:#4682b4;--color-code-doctype:gray;--color-code-cdata:gray;--color-code-prolog:gray;--color-code-namespace:gray;--color-code-important:#b8860b;--color-code-inserted:#228b22;--color-code-deleted:#dc143c;--color-code-char:#8b4513}.dark{--color-code-keyword:#f4a460;--color-code-string:#deb887;--color-code-comment:#8b8b8b;--color-code-function:#daa520;--color-code-number:tan;--color-code-operator:wheat;--color-code-class-name:peru;--color-code-tag:#87ceeb;--color-code-attr-name:gold;--color-code-attr-value:#deb887;--color-code-property:tan;--color-code-selector:#87ceeb;--color-code-punctuation:wheat;--color-code-builtin:#f4a460;--color-code-constant:tan;--color-code-boolean:tan;--color-code-regex:#deb887;--color-code-symbol:peru;--color-code-entity:peru;--color-code-url:tan;--color-code-atrule:#f4a460;--color-code-rule:#98fb98;--color-code-doctype:#8b8b8b;--color-code-cdata:#8b8b8b;--color-code-prolog:#8b8b8b;--color-code-namespace:#8b8b8b;--color-code-important:#f4a460;--color-code-inserted:#98fb98;--color-code-deleted:#f08080;--color-code-char:#deb887}@layer utilities{.hljs-comment{color:var(--color-code-comment)!important}.hljs-keyword{color:var(--color-code-keyword)!important}.hljs-string{color:var(--color-code-string)!important}.hljs-number{color:var(--color-code-number)!important}.hljs-literal{color:var(--color-code-constant)!important}.hljs-type{color:var(--color-code-class-name)!important}.hljs-variable{color:var(--color-code-property)!important}.hljs-variable.language_{color:var(--color-code-keyword)!important}.hljs-variable.constant_{color:var(--color-code-constant)!important}.hljs-title{color:var(--color-code-function)!important}.hljs-title.class_.inherited__{color:var(--color-code-class-name)!important}.hljs-title.function_.invoke__{color:var(--color-code-function)!important}.hljs-params{color:var(--color-code-property)!important}.hljs-doctag{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-meta{color:var(--color-code-comment)!important}.hljs-meta.keyword_,.hljs-meta.prompt_{color:var(--color-code-keyword)!important}.hljs-meta.string_{color:var(--color-code-string)!important}.hljs-section{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-name{color:var(--color-code-tag)!important}.hljs-attribute{color:var(--color-code-attr-name)!important}.hljs-bullet{color:var(--color-code-punctuation)!important}.hljs-code{color:var(--color-code-property)!important}.hljs-formula{color:var(--color-code-number)!important}.hljs-quote{color:var(--color-code-string)!important}.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo{color:var(--color-code-selector)!important}.hljs-template-tag{color:var(--color-code-tag)!important}.hljs-template-variable{color:var(--color-code-property)!important}.hljs-subst{color:var(--color-code-string)!important}}@layer components{:where(code[role=button]){height:fit-content}:where(.code-copied-icon){background-color:currentColor;display:inline-block;height:1em;mask-image:var(--icon-code-copied);mask-position:center;mask-repeat:no-repeat;mask-size:contain;width:1em}:where([x-code],[x-code-group]):not(.unstyle){position:relative;:where(header):not(:where(:is(aside.frame) header)){align-items:center;background-color:color-mix(in oklch,var(--color-content-stark,#2f4f4f) 8%,transparent);color:var(--color-content-neutral,gray);display:flex;flex-direction:row;font-family:var(--font-sans,sans-serif);font-size:inherit;min-height:var(--spacing-field-height,2.25rem);padding-inline-end:var(--spacing-field-height);padding-inline-start:calc(var(--spacing, .25rem)*4);width:100%;&:has(button[role=tab]){padding-inline-start:calc(var(--spacing, .25rem)*2)}& [role=tablist]{display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}& button[role=tab]{background:transparent;border:0;color:inherit;flex-shrink:0;font-family:inherit;font-size:inherit;height:fit-content;justify-content:start;&:hover{background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent));color:var(--color-content-stark,#2f4f4f)}&[aria-selected=true]{color:var(--color-brand-content,#daa520);pointer-events:none;position:relative}}}}& button.copy{background-color:transparent;font-size:75%;inset-inline-end:0;position:absolute;top:0;&:hover{background-color:transparent;&:after{background-color:var(--color-field-inverse,#2f4f4f)}}&:after{background-color:var(--color-content-neutral,gray);content:"";display:block;height:.8125rem;mask-image:var(--icon-code-copy);mask-repeat:no-repeat;mask-size:contain;width:.8125rem}&.copied:after{mask-image:var(--icon-code-copied)}}:where(header)::-webkit-scrollbar{display:none}& .lines{color:var(--color-content-subtle,#a9a9a9);display:inline-flex;flex-direction:column;font-family:inherit;font-size:inherit;inset-inline-start:0;line-height:inherit;padding:calc(var(--spacing, .25rem)*4) 0 calc(var(--spacing, .25rem)*4) calc(var(--spacing, .25rem)*4);pointer-events:none;position:absolute;text-align:end;user-select:none}&:has(.lines) code{padding-inline-start:calc(var(--spacing, .25rem)*6 + 2ch)}:where(code):not(:where(:is(aside.frame) code)){flex:1 1 100%;min-width:0;white-space:pre;white-space-collapse:preserve}& button.expand{align-items:center;background:transparent;border:0;border-radius:0;color:var(--color-content-subtle,#a9a9a9);cursor:pointer;display:flex;font-family:var(--font-sans,sans-serif);font-size:inherit;height:var(--spacing-field-height,2.25rem);justify-content:center;order:99;padding:0 calc(var(--spacing, .25rem)*2);transition:var(--transition,all .05s ease-in-out);width:100%;&:hover{background:color-mix(in oklch,var(--color-content-stark,#2f4f4f) 8%,transparent);color:var(--color-content-neutral,gray)}}&[data-collapsed] .lines,&[data-collapsed] code{mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 3em),transparent calc(100% - .75em),transparent);max-height:calc(var(--collapse-lines, 20)*1.7em + var(--spacing, .25rem)*8);overflow:hidden}:where(aside.frame){border:0;white-space:normal;white-space-collapse:collapse}}:where([x-code-group]){flex-flow:column;:where([x-code]){background:transparent;border:0;border-radius:0}}:where([x-code]):has(>header){& .lines{top:var(--spacing-field-height,2.25rem)}}}
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");:root{--icon-code-copy:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");--icon-code-copied:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jb3B5LWNoZWNrLWljb24gbHVjaWRlLWNvcHktY2hlY2siIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTEyIDE1IDIgMiA0LTQiLz48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjgiIHk9IjgiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik00IDE2Yy0xLjEgMC0yLS45LTItMlY0YzAtMS4xLjktMiAyLTJoMTBjMS4xIDAgMiAuOSAyIDIiLz48L3N2Zz4=");--icon-code-expand: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='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--color-code-keyword:#b8860b;--color-code-string:#8b4513;--color-code-comment:gray;--color-code-function:peru;--color-code-number:sienna;--color-code-operator:#2f4f4f;--color-code-class-name:#daa520;--color-code-tag:#4682b4;--color-code-attr-name:#ff8c00;--color-code-attr-value:#8b4513;--color-code-property:sienna;--color-code-selector:#4682b4;--color-code-punctuation:#2f4f4f;--color-code-builtin:#b8860b;--color-code-constant:sienna;--color-code-boolean:sienna;--color-code-regex:#8b4513;--color-code-symbol:#daa520;--color-code-entity:#daa520;--color-code-url:sienna;--color-code-atrule:#b8860b;--color-code-rule:#4682b4;--color-code-doctype:gray;--color-code-cdata:gray;--color-code-prolog:gray;--color-code-namespace:gray;--color-code-important:#b8860b;--color-code-inserted:#228b22;--color-code-deleted:#dc143c;--color-code-char:#8b4513}.dark{--color-code-keyword:#f4a460;--color-code-string:#deb887;--color-code-comment:#8b8b8b;--color-code-function:#daa520;--color-code-number:tan;--color-code-operator:wheat;--color-code-class-name:peru;--color-code-tag:#87ceeb;--color-code-attr-name:gold;--color-code-attr-value:#deb887;--color-code-property:tan;--color-code-selector:#87ceeb;--color-code-punctuation:wheat;--color-code-builtin:#f4a460;--color-code-constant:tan;--color-code-boolean:tan;--color-code-regex:#deb887;--color-code-symbol:peru;--color-code-entity:peru;--color-code-url:tan;--color-code-atrule:#f4a460;--color-code-rule:#98fb98;--color-code-doctype:#8b8b8b;--color-code-cdata:#8b8b8b;--color-code-prolog:#8b8b8b;--color-code-namespace:#8b8b8b;--color-code-important:#f4a460;--color-code-inserted:#98fb98;--color-code-deleted:#f08080;--color-code-char:#deb887}@layer utilities{.hljs-comment{color:var(--color-code-comment)!important}.hljs-keyword{color:var(--color-code-keyword)!important}.hljs-string{color:var(--color-code-string)!important}.hljs-number{color:var(--color-code-number)!important}.hljs-literal{color:var(--color-code-constant)!important}.hljs-type{color:var(--color-code-class-name)!important}.hljs-variable{color:var(--color-code-property)!important}.hljs-variable.language_{color:var(--color-code-keyword)!important}.hljs-variable.constant_{color:var(--color-code-constant)!important}.hljs-title{color:var(--color-code-function)!important}.hljs-title.class_.inherited__{color:var(--color-code-class-name)!important}.hljs-title.function_.invoke__{color:var(--color-code-function)!important}.hljs-params{color:var(--color-code-property)!important}.hljs-doctag{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-meta{color:var(--color-code-comment)!important}.hljs-meta.keyword_,.hljs-meta.prompt_{color:var(--color-code-keyword)!important}.hljs-meta.string_{color:var(--color-code-string)!important}.hljs-section{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-name{color:var(--color-code-tag)!important}.hljs-attribute{color:var(--color-code-attr-name)!important}.hljs-bullet{color:var(--color-code-punctuation)!important}.hljs-code{color:var(--color-code-property)!important}.hljs-formula{color:var(--color-code-number)!important}.hljs-quote{color:var(--color-code-string)!important}.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo{color:var(--color-code-selector)!important}.hljs-template-tag{color:var(--color-code-tag)!important}.hljs-template-variable{color:var(--color-code-property)!important}.hljs-subst{color:var(--color-code-string)!important}}@layer components{:where(code[role=button]){height:fit-content}:where(.code-copied-icon){background-color:currentColor;display:inline-block;height:1em;mask-image:var(--icon-code-copied);mask-position:center;mask-repeat:no-repeat;mask-size:contain;width:1em}:where([x-code],[x-code-group]):not(.unstyle){position:relative;:where(header):not(:where(:is(aside.frame) header)){align-items:center;background-color:color-mix(in oklch,var(--color-content-stark,#2f4f4f) 8%,transparent);color:var(--color-content-neutral,gray);display:flex;flex-direction:row;font-family:var(--font-sans,sans-serif);font-size:inherit;min-height:var(--spacing-field-height,2.25rem);padding-inline-end:var(--spacing-field-height);padding-inline-start:calc(var(--spacing, .25rem)*4);width:100%;&:has(button[role=tab]){padding-inline-start:calc(var(--spacing, .25rem)*2)}& [role=tablist]{display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}& button[role=tab]{background:transparent;border:0;color:inherit;flex-shrink:0;font-family:inherit;font-size:inherit;height:fit-content;justify-content:start;&:hover{background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent));color:var(--color-content-stark,#2f4f4f)}&[aria-selected=true]{color:var(--color-brand-content,#daa520);pointer-events:none;position:relative}}}}& button.copy{background-color:transparent;font-size:75%;inset-inline-end:0;position:absolute;top:0;&:hover{background-color:transparent;&:after{background-color:var(--color-field-inverse,#2f4f4f)}}&:after{background-color:var(--color-content-neutral,gray);content:"";display:block;height:.8125rem;mask-image:var(--icon-code-copy);mask-repeat:no-repeat;mask-size:contain;width:.8125rem}&.copied:after{mask-image:var(--icon-code-copied)}}:where(header)::-webkit-scrollbar{display:none}& .lines{background-color:var(--color-page,#fff);color:var(--color-content-subtle,#a9a9a9);display:inline-flex;flex-direction:column;font-family:inherit;font-size:inherit;inset-inline-start:0;line-height:inherit;padding:calc(var(--spacing, .25rem)*4);pointer-events:none;position:absolute;text-align:end;user-select:none}&:has(.lines) code{padding-inline-start:calc(var(--spacing, .25rem)*6 + 2ch)}:where(code):not(:where(:is(aside.frame) code)){flex:1 1 100%;min-width:0;white-space:pre;white-space-collapse:preserve}& button.expand{align-items:center;background:transparent;border:0;border-radius:0;color:var(--color-content-subtle,#a9a9a9);cursor:pointer;display:flex;font-family:var(--font-sans,sans-serif);font-size:inherit;height:var(--spacing-field-height,2.25rem);justify-content:center;order:99;padding:0 calc(var(--spacing, .25rem)*2);transition:var(--transition,all .05s ease-in-out);width:100%;&:hover{background:color-mix(in oklch,var(--color-content-stark,#2f4f4f) 8%,transparent);color:var(--color-content-neutral,gray)}}&[data-collapsed] .lines,&[data-collapsed] code{mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 3em),transparent calc(100% - .75em),transparent);max-height:calc(var(--collapse-lines, 20)*1.7em + var(--spacing, .25rem)*8);overflow:hidden}:where(aside.frame){background:unset;border:0;box-shadow:unset;color:unset;font-family:unset;font-size:unset;font-weight:unset;line-height:unset;white-space:normal;white-space-collapse:collapse}}:where([x-code-group]){flex-flow:column;:where([x-code]){background:transparent;border:0;border-radius:0}}:where([x-code]):has(>header){& .lines{top:var(--spacing-field-height,2.25rem)}}}

package/lib/manifest.css

@@ -3534,7 +3534,7 @@
             border-radius: calc(var(--radius, 0.5rem) * 2);
             color: var(--color-content-stark, darkslategray);
             background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 20%, transparent);
-            border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 30%, transparent);
+            border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 15%, transparent);
 
             &:not(.frame) * {
                 color: inherit

package/lib/manifest.export.js

@@ -0,0 +1,535 @@
+/* Manifest Export — runtime download of pages, regions, or data sources.
+ *
+ * The `x-export` directive turns its host element into a download action.
+ * What gets downloaded depends on the host element type:
+ *
+ *   <button x-export>                       → click downloads the whole page
+ *   <button x-export="{ target: '#x' }">    → click downloads the element with id="x"
+ *   <a x-export href="#section">            → click downloads #section (no scroll-to)
+ *   <a x-export href="/other-page">         → appends ?export=<format> to the href
+ *                                             so the destination page auto-exports
+ *                                             itself after navigation
+ *
+ * For the destination of a cross-page export, declare what's exportable:
+ *
+ *   <div x-export="{ trigger: 'url', target: '#report' }"></div>
+ *
+ * On page load, this checks `?export=<format>` in the URL. If present and a
+ * known format, it fires the export against the configured target. If the
+ * URL has no param, the page renders normally — random visitors never
+ * trigger downloads.
+ *
+ * For programmatic use, the `$export` magic runs an export from any
+ * Alpine expression and returns a promise:
+ *
+ *   <form @submit.prevent="if (valid) await $export({ format: 'csv', source: 'rows' })">
+ *
+ * Supported formats: pdf (default), png, jpeg, webp, csv, json.
+ *
+ * Library dependencies (html2canvas-pro, jsPDF) are loaded lazily on first
+ * use from jsDelivr; pages that never export pay nothing.
+ *
+ * Elements with `data-no-export` are excluded from visual snapshots.
+ */
+
+function initializeExportPlugin() {
+
+    Alpine.directive('export', (el, { modifiers, expression }, { evaluate, cleanup }) => {
+
+        const opts = resolveOptions(expression, modifiers, evaluate);
+        const format = (opts.format || 'pdf').toLowerCase();
+        const isAnchor = el.tagName === 'A';
+        const href = isAnchor ? el.getAttribute('href') : null;
+
+        // ----- URL-trigger destination behavior -----
+        // The page declares "I'm exportable; fire if the URL says so." Runs
+        // once per page load, regardless of how many elements declare it.
+        if (opts.trigger === 'url') {
+            if (urlTriggerFired) return;
+            const paramName = opts.urlParam || 'export';
+            const paramValue = new URLSearchParams(window.location.search).get(paramName);
+            if (paramValue) {
+                urlTriggerFired = true;
+                const fmt = isKnownFormat(paramValue) ? paramValue : format;
+                setTimeout(() => {
+                    runExport(fmt, opts, resolveFilename(el, opts, fmt))
+                        .catch((err) => emitError(fmt, err));
+                }, Number(opts.delay) > 0 ? Number(opts.delay) : 0);
+            }
+            return;
+        }
+
+        // ----- Anchor with cross-page href -----
+        // Pre-arm the href with ?export=<format> so default browser navigation
+        // delivers the user to the destination URL with the export signal.
+        // Hover-prefetch, middle-click, right-click-copy all see the same URL.
+        if (isAnchor && href && !href.startsWith('#') && !href.startsWith('javascript:')
+            && !/^(mailto|tel):/i.test(href)) {
+            try {
+                const url = new URL(href, window.location.href);
+                const paramName = opts.urlParam || 'export';
+                url.searchParams.set(paramName, format);
+                // Preserve the original href shape: relative stays relative.
+                if (url.origin === window.location.origin && !href.startsWith('http')) {
+                    el.setAttribute('href', url.pathname + url.search + url.hash);
+                } else {
+                    el.setAttribute('href', url.toString());
+                }
+            } catch (err) {
+                console.warn('[x-export] could not parse href for cross-page export:', err.message);
+            }
+            return;
+        }
+
+        // ----- Anchor with same-page fragment href -----
+        // The href IS the target. Click downloads the matched element
+        // instead of jumping the page.
+        if (isAnchor && href && href.startsWith('#')) {
+            const onClick = async (e) => {
+                if (e && typeof e.preventDefault === 'function') e.preventDefault();
+                const filename = resolveFilename(el, opts, format);
+                try {
+                    await runExport(format, { ...opts, target: href }, filename);
+                } catch (err) {
+                    emitError(format, err);
+                }
+            };
+            el.addEventListener('click', onClick);
+            cleanup(() => el.removeEventListener('click', onClick));
+            return;
+        }
+
+        // ----- Default: click anywhere else triggers export -----
+        const onClick = async (e) => {
+            if (e && typeof e.preventDefault === 'function') e.preventDefault();
+            const filename = resolveFilename(el, opts, format);
+            try {
+                await runExport(format, opts, filename);
+            } catch (err) {
+                emitError(format, err);
+            }
+        };
+        el.addEventListener('click', onClick);
+        cleanup(() => el.removeEventListener('click', onClick));
+    });
+
+    // ----- $export magic — programmatic trigger from any expression -----
+    Alpine.magic('export', () => async (opts = {}) => {
+        const format = String(opts.format || 'pdf').toLowerCase();
+        const filename = opts.filename || defaultFilename(format);
+        return runExport(format, opts, filename);
+    });
+
+    // ------- Options + format helpers -----------------------------------
+
+    function resolveOptions(expression, modifiers, evaluate) {
+        let opts = {};
+        if (expression && expression.trim()) {
+            try {
+                const v = evaluate(expression);
+                if (v && typeof v === 'object') opts = { ...v };
+                else if (typeof v === 'string') opts.format = v;
+            } catch (err) {
+                console.warn('[x-export] could not evaluate options expression:', err.message);
+            }
+        }
+        if (!opts.format && Array.isArray(modifiers) && modifiers.length) {
+            const found = modifiers.find((m) => isKnownFormat(String(m).toLowerCase()));
+            if (found) opts.format = String(found).toLowerCase();
+        }
+        return opts;
+    }
+
+    function isKnownFormat(f) {
+        return f === 'pdf' || f === 'png' || f === 'jpeg' || f === 'jpg' || f === 'webp' || f === 'csv' || f === 'json';
+    }
+
+    function defaultFilename(format) {
+        const ext = format === 'jpeg' || format === 'jpg' ? 'jpg' : format;
+        const ts = new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-');
+        return `export-${ts}.${ext}`;
+    }
+
+    // Filename resolution precedence (highest first):
+    //   1. opts.filename from the directive's object expression
+    //   2. the standard HTML `download` attribute on an anchor host
+    //   3. a `data-filename` attribute on any host element
+    //   4. a timestamped default based on the format
+    function resolveFilename(el, opts, format) {
+        if (opts && opts.filename) return String(opts.filename);
+        if (el && el.tagName === 'A') {
+            const dl = el.getAttribute('download');
+            if (dl) return dl;
+        }
+        if (el && typeof el.getAttribute === 'function') {
+            const df = el.getAttribute('data-filename');
+            if (df) return df;
+        }
+        return defaultFilename(format);
+    }
+
+    // Transparent 1×1 PNG, used as a fallback when an inline image fails to fetch.
+    // Without it, a single CORS or 404 image would reject the entire snapshot.
+    const TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=';
+
+    // The snapshot library rejects with the raw `image.onerror` Event when the
+    // assembled SVG fails to decode (oversized clones, malformed inline assets,
+    // etc.). Translate those into something readable before logging.
+    function describeExportError(err) {
+        if (err && err.message) return err;
+        if (err && typeof Event !== 'undefined' && err instanceof Event) {
+            const tag = err.target && err.target.tagName ? err.target.tagName.toLowerCase() : 'image';
+            return new Error(
+                `failed to render ${tag} during export. ` +
+                `Common causes: cross-origin images without CORS headers, ` +
+                `an oversized target element, or a no-target snapshot of a complex page. ` +
+                `Pass a "target" option to scope the snapshot.`
+            );
+        }
+        return new Error(String(err));
+    }
+
+    function emitError(format, err) {
+        const e = describeExportError(err);
+        console.error('[x-export] export failed:', e.message);
+        try {
+            window.dispatchEvent(new CustomEvent('manifest:export-error', {
+                detail: { format, error: e.message }
+            }));
+        } catch { /* ignore */ }
+    }
+
+    async function runExport(format, opts, filename) {
+        switch (format) {
+            case 'pdf': return exportPdf(opts, filename);
+            case 'png': return exportImage(opts, filename, 'png');
+            case 'jpeg':
+            case 'jpg': return exportImage(opts, filename, 'jpeg');
+            case 'webp': return exportImage(opts, filename, 'webp');
+            case 'csv': return exportCsv(opts, filename);
+            case 'json': return exportJson(opts, filename);
+            default: throw new Error(`Unknown format "${format}". Supported: pdf, png, jpeg, webp, csv, json.`);
+        }
+    }
+
+    // ------- Visual exports (PDF, PNG, JPEG, WebP) ----------------------
+
+    function resolveTarget(opts) {
+        if (opts.target) {
+            const t = typeof opts.target === 'string'
+                ? document.querySelector(opts.target)
+                : opts.target;
+            if (!t) throw new Error(`target "${opts.target}" matched no element`);
+            return t;
+        }
+        return document.body;
+    }
+
+    function snapshotOptions(opts) {
+        // ignoreElements callback for html2canvas-pro — exclude opt-out elements.
+        // (Inverse of modern-screenshot's `filter`: return true to SKIP this node.)
+        const ignoreElements = (node) => {
+            return !!(node && node.nodeType === 1
+                && node.hasAttribute && node.hasAttribute('data-no-export'));
+        };
+        const out = {
+            scale: Number(opts.resolution) > 0 ? Number(opts.resolution) : 2,
+            ignoreElements,
+            useCORS: true,
+            allowTaint: false,
+            // Bound how long we wait per cross-origin image. Failed fetches
+            // produce a missing image rather than rejecting the whole snapshot.
+            imageTimeout: 5000,
+            logging: false,
+            // Pin the capture origin to (0, 0) so the snapshot starts at the
+            // document top regardless of the user's current scroll position.
+            // Without this, html2canvas defaults scrollY to window.pageYOffset,
+            // which clips the snapshot to "below the current scroll" — anything
+            // above the fold renders as blank white space.
+            scrollX: 0,
+            scrollY: 0,
+        };
+        if (opts.backgroundColor) out.backgroundColor = opts.backgroundColor;
+        if (opts.width) out.width = Number(opts.width);
+        if (opts.height) out.height = Number(opts.height);
+        return out;
+    }
+
+    // Await all <img> loads inside the target so freshly-mounted images don't
+    // appear blank in the snapshot. Bounded by a timeout — a single slow image
+    // shouldn't stall the export indefinitely.
+    async function waitForImages(target, timeoutMs = 5000) {
+        if (!target || typeof target.querySelectorAll !== 'function') return;
+        const imgs = Array.from(target.querySelectorAll('img'));
+        const pending = imgs.filter((img) => !img.complete || img.naturalWidth === 0);
+        if (pending.length === 0) return;
+        await Promise.race([
+            Promise.all(pending.map((img) => new Promise((resolve) => {
+                img.addEventListener('load', resolve, { once: true });
+                img.addEventListener('error', resolve, { once: true });
+            }))),
+            new Promise((resolve) => setTimeout(resolve, timeoutMs)),
+        ]);
+    }
+
+    // html2canvas-pro paints directly to canvas via computed styles, so the
+    // SVG-foreignObject failure modes (oversized SVGs, @layer/oklch parsing
+    // issues) don't apply. The fallback path is retained for the rare case
+    // where the library throws (e.g. tainted canvas on cross-origin images).
+    async function snapshotToCanvas(lib, target, so) {
+        try {
+            return await lib(target, so);
+        } catch (err) {
+            // Retry once with allowTaint enabled and a lower scale — preserves
+            // the snapshot even when an image fails cross-origin policy.
+            const safer = { ...so, allowTaint: true, useCORS: false, scale: Math.min(so.scale || 2, 1) };
+            return await lib(target, safer);
+        }
+    }
+
+    async function exportImage(opts, filename, ext) {
+        const lib = await loadSnapshotLib();
+        const target = resolveTarget(opts);
+        const so = snapshotOptions(opts);
+        if ((ext === 'jpeg' || ext === 'webp') && !so.backgroundColor) {
+            so.backgroundColor = effectivePageBackground();
+        }
+        await waitForImages(target);
+        const canvas = await snapshotToCanvas(lib, target, so);
+        const quality = Number(opts.quality) > 0 && Number(opts.quality) <= 1
+            ? Number(opts.quality)
+            : 0.95;
+        let dataUrl;
+        if (ext === 'png') dataUrl = canvas.toDataURL('image/png');
+        else if (ext === 'jpeg') dataUrl = canvas.toDataURL('image/jpeg', quality);
+        else if (ext === 'webp') dataUrl = canvas.toDataURL('image/webp', quality);
+        triggerDownload(dataUrl, filename);
+    }
+
+    // Whole-page PDF: route through the browser's native print pipeline.
+    // It handles multi-page layout, page breaks, vector text, and the page's
+    // own @media print CSS — far more reliable than rasterizing a long page
+    // and embedding it as a single image. The user sees the print dialog and
+    // picks "Save as PDF" (or any installed PDF printer). Element-scoped PDFs
+    // continue to use html2canvas-pro + jsPDF.
+    async function exportPdf(opts, filename) {
+        if (!opts.target) {
+            return printToPdf(filename);
+        }
+        const [imgLib, jsPDFCtor] = await Promise.all([loadSnapshotLib(), loadJsPDF()]);
+        const target = resolveTarget(opts);
+        const so = snapshotOptions(opts);
+        if (!so.backgroundColor) so.backgroundColor = effectivePageBackground();
+        await waitForImages(target);
+        const canvas = await snapshotToCanvas(imgLib, target, so);
+        const dataUrl = canvas.toDataURL('image/png');
+        const img = await loadImage(dataUrl);
+        const orientation = img.width > img.height ? 'landscape' : 'portrait';
+        const pdf = new jsPDFCtor({ orientation, unit: 'pt', format: opts.pageSize || 'a4' });
+        const pageW = pdf.internal.pageSize.getWidth();
+        const pageH = pdf.internal.pageSize.getHeight();
+        const ratio = Math.min(pageW / img.width, pageH / img.height);
+        const renderW = img.width * ratio;
+        const renderH = img.height * ratio;
+        const offsetX = (pageW - renderW) / 2;
+        const offsetY = (pageH - renderH) / 2;
+        pdf.addImage(dataUrl, 'PNG', offsetX, offsetY, renderW, renderH);
+        pdf.save(filename);
+    }
+
+    function printToPdf(filename) {
+        // The browser's "Save as PDF" dialog seeds its default filename from
+        // document.title. Swap it briefly so the suggested name matches the
+        // user's intent, then restore after the dialog closes.
+        const original = document.title;
+        const cleaned = String(filename || '').replace(/\.pdf$/i, '') || original;
+        document.title = cleaned;
+        try { window.print(); }
+        finally {
+            // Wait one frame so the print dialog reads the swapped title first.
+            setTimeout(() => { document.title = original; }, 0);
+        }
+    }
+
+    function effectivePageBackground() {
+        let el = document.body;
+        while (el && el !== document.documentElement.parentElement) {
+            const cs = getComputedStyle(el);
+            const bg = cs.backgroundColor;
+            if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg;
+            el = el.parentElement;
+        }
+        return '#ffffff';
+    }
+
+    function loadImage(dataUrl) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = dataUrl;
+        });
+    }
+
+    // ------- Tabular exports (CSV, JSON) --------------------------------
+
+    function resolveDataset(opts) {
+        if (Array.isArray(opts.data)) return opts.data;
+        if (opts.data && typeof opts.data === 'object') return opts.data;
+        if (opts.source) {
+            const x = window.$x || (window.Alpine && window.Alpine.magic && window.Alpine.magic('x'));
+            if (x && x[opts.source] != null) return x[opts.source];
+        }
+        throw new Error('csv/json export needs `source: "<name>"` or `data: <value>`');
+    }
+
+    function exportCsv(opts, filename) {
+        const data = resolveDataset(opts);
+        if (!Array.isArray(data)) throw new Error('csv export expects an array data source');
+        if (data.length === 0) {
+            triggerDownload(blobUrl('', 'text/csv'), filename);
+            return;
+        }
+        const headers = [];
+        const seen = new Set();
+        for (const row of data) {
+            if (!row || typeof row !== 'object') continue;
+            for (const k of Object.keys(row)) {
+                if (!seen.has(k)) { seen.add(k); headers.push(k); }
+            }
+        }
+        const lines = [headers.map(csvCell).join(',')];
+        for (const row of data) {
+            lines.push(headers.map((h) => csvCell(row && row[h])).join(','));
+        }
+        triggerDownload(blobUrl(lines.join('\n') + '\n', 'text/csv;charset=utf-8'), filename);
+    }
+
+    function exportJson(opts, filename) {
+        const data = resolveDataset(opts);
+        const serializable = sanitize(data);
+        triggerDownload(blobUrl(JSON.stringify(serializable, null, 2), 'application/json'), filename);
+    }
+
+    function sanitize(value) {
+        if (Array.isArray(value)) return value.map(sanitize);
+        if (value && typeof value === 'object') {
+            const out = {};
+            for (const k of Object.keys(value)) {
+                if (k.startsWith('$') || k === '_loading' || k === '_error') continue;
+                out[k] = sanitize(value[k]);
+            }
+            return out;
+        }
+        return value;
+    }
+
+    function csvCell(v) {
+        if (v == null) return '';
+        const s = typeof v === 'object' ? JSON.stringify(v) : String(v);
+        return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+    }
+
+    // ------- Helpers ----------------------------------------------------
+
+    function blobUrl(content, type) {
+        return URL.createObjectURL(new Blob([content], { type }));
+    }
+
+    function triggerDownload(url, filename) {
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        if (url.startsWith('blob:')) setTimeout(() => { try { URL.revokeObjectURL(url); } catch { /* ignore */ } }, 2000);
+    }
+
+    // Lazy library loaders — cached promises.
+
+    // html2canvas-pro paints directly to a canvas by walking computed styles,
+    // rather than cloning the DOM into an SVG foreignObject. That means it has
+    // no failure modes around @layer rules, oklch() colors, url(data:...) in
+    // cross-origin stylesheets, or oversized SVG decoding — the cases that
+    // sank both html-to-image and modern-screenshot on real-world pages.
+    // ESM-only, so we load via dynamic import() from jsDelivr.
+    let snapshotLibPromise = null;
+    function loadSnapshotLib() {
+        if (snapshotLibPromise) return snapshotLibPromise;
+        snapshotLibPromise = import('https://cdn.jsdelivr.net/npm/html2canvas-pro@2/dist/html2canvas-pro.esm.js')
+            .then((mod) => {
+                const fn = mod.default || mod.html2canvas;
+                if (typeof fn !== 'function') {
+                    throw new Error('html2canvas-pro failed to load (missing default export)');
+                }
+                return fn;
+            })
+            .catch((err) => {
+                snapshotLibPromise = null; // allow retry on next call
+                throw err;
+            });
+        return snapshotLibPromise;
+    }
+
+    let jsPDFPromise = null;
+    function loadJsPDF() {
+        if (jsPDFPromise) return jsPDFPromise;
+        jsPDFPromise = loadScript('https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.min.js')
+            .then(() => {
+                const ctor = window.jspdf && window.jspdf.jsPDF;
+                if (!ctor) throw new Error('jsPDF failed to load');
+                return ctor;
+            });
+        return jsPDFPromise;
+    }
+
+    function loadScript(src) {
+        return new Promise((resolve, reject) => {
+            const existing = document.querySelector(`script[src="${src}"]`);
+            if (existing) {
+                if (existing._loaded) resolve();
+                else {
+                    existing.addEventListener('load', () => resolve());
+                    existing.addEventListener('error', reject);
+                }
+                return;
+            }
+            const s = document.createElement('script');
+            s.src = src;
+            s.async = true;
+            s.addEventListener('load', () => { s._loaded = true; resolve(); });
+            s.addEventListener('error', () => reject(new Error('Failed to load ' + src)));
+            document.head.appendChild(s);
+        });
+    }
+}
+
+// Module-level guard: URL-triggered exports fire at most once per page load,
+// regardless of how many elements declare `trigger: 'url'`.
+let urlTriggerFired = false;
+
+// Standard plugin init lifecycle.
+let exportPluginInitialized = false;
+function ensureExportPluginInitialized() {
+    if (exportPluginInitialized) return;
+    if (!window.Alpine || typeof window.Alpine.directive !== 'function') return;
+    exportPluginInitialized = true;
+    initializeExportPlugin();
+}
+window.ensureExportPluginInitialized = ensureExportPluginInitialized;
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensureExportPluginInitialized);
+}
+document.addEventListener('alpine:init', ensureExportPluginInitialized);
+if (window.Alpine && typeof window.Alpine.directive === 'function') {
+    setTimeout(ensureExportPluginInitialized, 0);
+} else {
+    const checkAlpine = setInterval(() => {
+        if (window.Alpine && typeof window.Alpine.directive === 'function') {
+            clearInterval(checkAlpine);
+            ensureExportPluginInitialized();
+        }
+    }, 10);
+    setTimeout(() => clearInterval(checkAlpine), 5000);
+}

package/lib/manifest.integrity.json

@@ -8,8 +8,9 @@
   "manifest.components.js": "sha384-3dCTD5EwCZTiX+1obYtDNM3WWwPh2JDQUQQsdRUUK3gs6FXjse1ShkKaT/2jsNaI",
   "manifest.data.js": "sha384-+wfMPBlMsmLJ7EJWGJMTKGAhLaLCyOVX+Nq+ps3Lly58QC9Dp3XRHK5yangII0yq",
   "manifest.dropdowns.js": "sha384-WMrFoSpKfJuo81dyrwhVrDO8rq+rDwh2x8x4nH01BY5ZHkvjE+/SaT2gWCI0zOn+",
+  "manifest.export.js": "sha384-qvdGz1TiGEDOeWJ5os1z03RURdKX+ezZEQ1KyV+9iC7X0esLK83mtY87t4MQv45t",
   "manifest.icons.js": "sha384-uOkboYrovjCpl22eey3Jaxpey+pOnot5NDnRRumcRxiR7IOVaRh1i20gYnWXR5dW",
-  "manifest.localization.js": "sha384-eKdBIMEAwsugPP2p2fuPzQUkU44f1+Y0JgukMJ1KXLQY1/AYvpcGsEiritVDElsN",
+  "manifest.localization.js": "sha384-eR418BsWisFmFnmhNnNEqx5SMUJywngz6MjWJW7EQWAu1PilepjO/Rp99Z2MTbH5",
   "manifest.markdown.js": "sha384-3LgPiHrftPqAIJGhxi87C0TtfJXbsH0Qj4JmfmYgV4y5UjSx7nVSP+ppsRUWT0Xs",
   "manifest.resize.js": "sha384-Ak5gf44ERfh9pOSAD1qZzJSysslpwBCkevIlz7R3dszTUyzUKGKGF4pn5arOtgG0",
   "manifest.router.js": "sha384-n6xmIfWnYzd/0kkVTFuHhFzHuxiDgZ1Lg1W0yB6/w3Myw5pQ6PgE6SJBHfVsO7/D",
@@ -20,6 +21,6 @@
   "manifest.toasts.js": "sha384-ytd5rDbax/Ou9z23uedFXPZbxDPsk2E/pxCTq4WLvfv+os1qTI6kELp0kPp07g24",
   "manifest.tooltips.js": "sha384-Hhip5ZN66xhDw3m0XBrKLKLpcVRz3Z9RszPKqo6xvFF0mrUgQBVZ+mZjZsXgOOjS",
   "manifest.url.parameters.js": "sha384-FIufiClqDx1rJpU/QUc9z/D43qClQ6Qm8rBahipbJl9BDHUvhrOsUDegmTWW7Tuf",
-  "manifest.utilities.js": "sha384-Q98oZClq/iRKFmuwHolisLgEitsTZiEPHxUW29liKlnL1Gx+YGq8MMivYbDlGDD6",
-  "manifest.js": "sha384-+VqLvjMEa28w5p6vlp4OEI6w/wr9Wpuzgk4rJcWsg1aDodhEB6E30yDpgs/6zRsR"
+  "manifest.utilities.js": "sha384-iXEdkfuZYwS46mRVXyqDIwH4pIG4NNMBj/zHCS/vyVr+03lo8bKewhSHCAJ8s5fc",
+  "manifest.js": "sha384-CUFN8gbtQW6+fnxiBnx0nPw6kKDA21+He0KFoDE9FabfJPR4lKRXaT2PWpOOKUS+"
 }

package/lib/manifest.js

@@ -199,7 +199,8 @@
 		'slides',
 		'resize',
 		'colorpicker',
-		'url-parameters'
+		'url-parameters',
+		'export'
 	];
 
 	// Appwrite integration plugins (opt-in only, never auto-loaded)

package/lib/manifest.localization.js

@@ -633,6 +633,61 @@ function registerLocaleMagic() {
                             }
                         };
                     }
+                    // $locale.reset([href]) — strip any leading locale segment from
+                    // the URL (or from a passed-in href) and navigate there. Pairs
+                    // with the router's sticky-locale rewriter: that adds the
+                    // current locale to outgoing same-origin links automatically,
+                    // and this method is the opt-out for a developer who wants to
+                    // surface a "go to default locale" action without hard-coding
+                    // the default's language code.
+                    //
+                    // Behaviour:
+                    //   $locale.reset()           → reset current URL to no prefix
+                    //   $locale.reset('/foo')     → strip prefix from /foo (no-op
+                    //                                if there isn't one) and navigate
+                    //   $locale.reset('/fr/foo')  → 'fr' is stripped → /foo
+                    //
+                    // Routing path: if Manifest's SPA navigation is active
+                    // (`history.pushState` + `manifest:route-change` event), this
+                    // is a SPA hop with no full reload. In prerendered MPA mode
+                    // we use `window.location.assign` so the new URL's
+                    // prerendered HTML loads from disk.
+                    if (prop === 'reset') {
+                        return (href) => {
+                            const store = Alpine.store('locale');
+                            const available = store?.available || [document.documentElement.lang || 'en'];
+
+                            // Resolve target URL: passed-in href, or current URL
+                            let target;
+                            try {
+                                target = new URL(href || window.location.href, window.location.href);
+                            } catch {
+                                return false;
+                            }
+
+                            // Strip leading locale segment if present
+                            const segs = target.pathname.split('/').filter(Boolean);
+                            if (segs.length && available.includes(segs[0])) {
+                                segs.shift();
+                            }
+                            target.pathname = '/' + segs.join('/');
+
+                            // Same-origin navigation only — external URLs are
+                            // passed through unchanged via window.location.assign.
+                            const isSameOrigin = target.origin === window.location.origin;
+                            const isPrerendered = !!document.querySelector('meta[name="manifest:prerendered"]:not([content="0"]):not([content="false"])');
+
+                            if (isSameOrigin && !isPrerendered && typeof history?.pushState === 'function') {
+                                // SPA hop: keep the in-memory app, fire route-change.
+                                history.pushState(null, '', target.pathname + target.search + target.hash);
+                                window.dispatchEvent(new PopStateEvent('popstate'));
+                            } else {
+                                // MPA hop: load the prerendered HTML for the new URL.
+                                window.location.assign(target.toString());
+                            }
+                            return true;
+                        };
+                    }
                     return undefined;
                 }
             });

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,color-mix(#2f4f4f 12%,transparent));border:0;color:inherit;height:1px}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,video){height:auto;max-width:100%}:where(::-webkit-autofill,:-webkit-autofill:focus){transition:background-color 0s 600000s,color 0s 600000s}:where(::-webkit-date-and-time-value){min-height:1lh;text-align:inherit}:where(::-webkit-datetime-edit){display:inline-flex}:where(::-webkit-datetime-edit-fields-wrapper){padding:0}:where(::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field){padding-block:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}:where(small){font-size:80%}:where(span){color:inherit}:where(sub,sup){font-size:50%;line-height:0;position:relative;vertical-align:baseline}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(svg):not([fill]){fill:currentColor}:where(svg):not(:root){overflow:hidden}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}:where(::placeholder){color:#9ca3af;opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){:where(::placeholder){color:color-mix(in oklab,currentcolor 50%,transparent)}}:where([popover]){display:none;transition:opacity .15s ease-in,scale .15s ease-in,display .15s ease-in;transition-behavior:allow-discrete;&:popover-open{display:flex}@starting-style{opacity:0;scale:.9}&:not(:popover-open){display:none!important;opacity:0;scale:1;transition-duration:.15s;transition-timing-function:ease-out}}:where(progress){vertical-align:baseline}:where([type=search]){-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}:where(summary){display:list-item}:where(textarea){resize:vertical}[hidden],[un-cloak],[v-cloak],[x-cloak]{display:none}@media (-webkit-min-device-pixel-ratio:2){:where(html){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true]):after,:not([aria-busy=true]):before{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:scroll!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}@media (prefers-reduced-motion:no-preference){[dir=rtl] progress:indeterminate{animation-direction:reverse}}::view-transition-group(*){animation-duration:var(--view-transition-duration,.2s);animation-timing-function:var(--view-transition-easing,cubic-bezier(.4,0,.2,1))}[data-no-view-transition],canvas,iframe,video{view-transition-name:none}}@view-transition{navigation:auto}@layer components{:where(details):not(.unstyle){transition:var(--transition,all .05s ease-in-out);width:100%;&[open]>summary:before{transform:rotate(90deg)}& [open] summary{margin-bottom:calc(var(--spacing, .25rem)*4)}&>:last-child{margin-bottom:calc(var(--spacing, .25rem)*8)}:where(summary){align-items:center;color:var(--color-content-stark,#2f4f4f);cursor:pointer;display:flex;font-weight:700;justify-content:space-between;padding:var(--spacing-field-padding,.625rem) 0;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,#f5f5f5) 40%,var(--color-content-stark,#2f4f4f))}&:active{color:color-mix(in oklch,var(--color-surface-1,#f5f5f5) 50%,var(--color-content-stark,#2f4f4f))}&:before{background-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 50%,var(--color-field-inverse,#2f4f4f));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,color-mix(#2f4f4f 10%,transparent));background-position:50%;background-size:cover;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,#2f4f4f);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,#a9a9a9)}: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,color-mix(#2f4f4f 10%,transparent));border:1px solid var(--color-page,#fff);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,color-mix(#2f4f4f 15%,transparent));& 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,color-mix(#2f4f4f 15%,transparent));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,#fff);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(code,.unstyle){align-items:center;appearance:button;background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent));border:0 solid transparent;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,#2f4f4f);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,color-mix(#2f4f4f 10%,transparent));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,color-mix(#2f4f4f 15%,transparent))}&:focus-visible{background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent))}}: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,color-mix(#2f4f4f 15%,transparent));border-color:var(--color-field-surface-hover,color-mix(#2f4f4f 15%,transparent))}}&:after{background-color:var(--color-field-inverse,#2f4f4f);content:"";height:60%;left:50%;-webkit-mask-image:var(--icon-checkbox,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11 2-2 5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));mask-image:var(--icon-checkbox,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11 2-2 5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) scale(0);transform-origin:center;transition:var(--transition,all .05s ease-in-out);width:60%}&:checked:after{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}}:root{--color-picker-swatch:var(--color-line,color-mix(#2f4f4f 10%,transparent));--icon-color-solid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-paint-roller-icon lucide-paint-roller' viewBox='0 0 24 24'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");--icon-color-gradient:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-blend-icon lucide-blend' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Ccircle cx='15' cy='15' r='7'/%3E%3C/svg%3E");--icon-color-library:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-swatch-book-icon lucide-swatch-book' viewBox='0 0 24 24'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7M7 17h.01'/%3E%3Cpath d='m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'/%3E%3C/svg%3E");--icon-color-grab:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-pipette-icon lucide-pipette' viewBox='0 0 24 24'%3E%3Cpath d='m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12'/%3E%3Cpath d='m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3zM2 22l.414-.414'/%3E%3C/svg%3E");--icon-alpha-pattern:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='gray' d='M0 0h1v1H0zM1 1h1v1H1z' opacity='.15'/%3E%3C/svg%3E")}@layer components{:where(input[type=color]){appearance:none;-webkit-appearance:none;&::-webkit-color-swatch-wrapper{padding:0}&::-webkit-color-swatch{border:0}&::-moz-color-swatch{border:0}}}@layer utilities{:where([x-colorpicker\.swatch],input[type=color]):not(.unstyle){background:var(--color-picker-swatch,#000);border-color:oklch(from var(--color-picker-swatch,#000) calc(l + (.5 - l) * .35) c calc(h + 0));border-radius:var(--radius,.5rem);border-style:solid;border-width:1px;cursor:pointer;height:var(--spacing-field-height,2.25rem);max-width:var(--spacing-field-height,2.25rem);min-width:var(--spacing-field-height,2.25rem);overflow:hidden;padding:0;position:relative;transition:var(--transition,all .05s ease-in-out);width:var(--spacing-field-height,2.25rem);&:active,&:focus,&:focus-visible,&:hover{border-color:oklch(from var(--color-picker-swatch,#000) calc(l + (.5 - l) * .35) c calc(h + 0)/.5)}&:before{background-image:var(--icon-alpha-pattern);background-position:0 0;background-size:50%;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}}:where([x-colorpicker]):not(.unstyle){height:fit-content;max-height:30rem;max-width:18rem;min-width:18rem;overflow:hidden;& :where(.tabs-wrapper){border-bottom:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent));display:flex;padding:2px;width:100%;& button{flex:1;justify-content:center}}& [x-colorpicker\.solid]{& :where(.canvas-wrapper){aspect-ratio:1;cursor:crosshair;overflow:hidden;padding:2px;position:relative;touch-action:none;width:100%}& canvas{display:block;height:100%;width:100%}& :where(.color-reticle){border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.2);height:.75rem;pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:.75rem;z-index:1}& :where(.solid-options-inputs){display:flex;flex-direction:column;gap:.75rem;padding:.75rem;& div:has(button[x-colorpicker\.set-color-space],input[x-colorpicker\.set-color-value],input[x-colorpicker\.set-alpha-value]){display:flex;width:100%}}& input[x-colorpicker\.set-alpha],& input[x-colorpicker\.set-hue]{appearance:none;-webkit-appearance:none;background:transparent;border:none;border-radius:1rem;cursor:pointer;height:.75rem;outline:none;padding:0;width:100%;&::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;width:1rem;&:active{cursor:grabbing}}&::-moz-range-thumb{background:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;width:1rem;&:active{cursor:grabbing}}&::-webkit-slider-runnable-track{border-radius:1rem;height:.75rem}&::-moz-range-track{border-radius:1rem;height:.75rem}}& input[x-colorpicker\.set-hue]{&::-webkit-slider-runnable-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}&::-moz-range-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}}& input[x-colorpicker\.set-alpha]{--color-picker-alpha:#000;position:relative;&::-webkit-slider-runnable-track{background:linear-gradient(to right,transparent,var(--color-picker-alpha)),var(--icon-alpha-pattern) 0 0 /.5rem .5rem}&::-moz-range-track{background:linear-gradient(to right,transparent,var(--color-picker-alpha)),var(--icon-alpha-pattern) 0 0 /.5rem .5rem}}& button[x-colorpicker\.set-color-space]{justify-content:center;padding-inline-end:0;padding-inline-start:0;width:7ch}& input[x-colorpicker\.set-color-value]{flex:1;padding-inline-end:0}& input[x-colorpicker\.set-alpha-value]{padding-inline-start:0;text-align:end;width:fit-content}}& [x-colorpicker\.gradient]{& :where(.layer-options-wrapper){border-bottom:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent));& :where(.layer-options-inputs){align-items:center;display:flex;flex-flow:row nowrap;padding:.5rem;& button{justify-content:center;width:auto}& :where(.layer-angle-wrapper){position:relative;& input[x-colorpicker\.set-angle]{cursor:ew-resize;padding-inline-end:.75rem;padding-inline-start:0;text-align:end;width:5.5ch;&:focus{cursor:text}}& span{color:var(--color-content-neutral,gray);position:absolute;right:.25rem;top:0}}& [x-colorpicker\.layer-stops-bar]{background:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent));border-radius:1rem;cursor:pointer;height:.75rem;margin-inline-end:.5rem;margin-inline-start:1rem;position:relative;width:100%;& :where(.stop-handle){border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;position:absolute;top:50%;touch-action:none;transform:translate(-50%,-50%);width:1rem;z-index:1;&:hover{box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 5px rgba(0,0,0,.25)}&:active{cursor:grabbing}&.active{box-shadow:inset 0 0 0 3px hsla(0,0%,100%,.85),0 1px 5px #000}}}}& [x-colorpicker\.solid]{padding:0;& :where(.canvas-wrapper){margin:auto;padding:0 0 2px;width:calc(100% - 2rem)}& :where(.solid-options-inputs){padding-left:1rem;padding-right:1rem}}}& :where(.gradient-value-wrapper){padding:.5rem;& [x-colorpicker\.set-gradient-value]{field-sizing:content;resize:none}}}& [data-gradient-type=radial] .layer-angle-wrapper{visibility:hidden}& [x-colorpicker\.library]{max-height:30rem;overflow-y:auto;& :where(.library-wrapper){display:flex;flex-flow:column;gap:1rem;padding:1rem 1rem 4rem;width:100%;& :where(.library-group){display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem;width:100%;&:not(:last-child){border-bottom:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent))}& :where(.library-palette){display:grid;gap:1px;grid-template-columns:repeat(11,1fr);& button[x-colorpicker\.apply-color]{aspect-ratio:1/1;border:1px solid hsla(0,0%,100%,.15);border-radius:calc(var(--radius, .5rem)/2);height:auto;max-height:1.375rem;max-width:1.375rem;min-height:0;min-width:0;width:100%;&:hover{border:1px solid hsla(0,0%,100%,.35)}&.active{border:1px solid #fff;box-shadow:inset 0 0 0 3px hsla(0,0%,100%,.85),0 0 1px #000,inset 0 0 0 4px rgba(0,0,0,.25)}}}}}}}:where(menu[popover][x-colorpicker]:not(.unstyle)){padding:0;& .tabs-wrapper button{border:1px solid var(--color-popover-surface,#fff)}}:where(menu[popover]:not(.unstyle) [x-colorpicker\.library],.dropdown-menu:not(.unstyle) [x-colorpicker\.library]){& :where(.library-wrapper){padding:.5rem .5rem 4rem!important}& :where(small){padding-inline-start:0}}:where(.color-icon-solid,.color-icon-gradient,.color-icon-library,.color-icon-grab,.gradient-layer-icon-linear,.gradient-layer-icon-radial,.gradient-layer-icon-conic){aspect-ratio:1/1;background-color:currentColor;height:calc(var(--spacing-field-height, 2.25rem)/2);max-height:1rem}:where(dialog[x-colorpicker]){border-radius:calc(var(--radius, .5rem))}:where(.color-icon-solid){mask-image:var(--icon-color-solid)}:where(.color-icon-gradient){mask-image:var(--icon-color-gradient)}:where(.color-icon-library){mask-image:var(--icon-color-library)}:where(.color-icon-grab){mask-image:var(--icon-color-grab)}.gradient-layer-icon-linear{background:linear-gradient(to right,var(--color-content-neutral,gray),color-mix(in oklch,var(--color-content-neutral,gray) 0%,transparent 100%));border-radius:50%}.gradient-layer-icon-radial{background:radial-gradient(var(--color-content-neutral,gray),color-mix(in oklch,var(--color-content-neutral,gray) 0%,transparent 100%));border-radius:50%}.gradient-layer-icon-conic{background:conic-gradient(var(--color-content-neutral,gray),color-mix(in oklch,var(--color-content-neutral,gray) 0%,transparent 100%));border-radius:50%}}@layer components{:where(dialog[popover],.dialog):not(.unstyle){background-color:var(--color-popover-surface,#fff);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,#2f4f4f);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,gray);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,color-mix(#2f4f4f 10%,transparent));content:"";display:inline-flex;flex:1;height:1px;width:auto}&:not(:empty){gap:var(--spacing-field-padding,.625rem)}}:where(.divider.start){justify-content:flex-start;&:before{display:none}}:where(.divider.end){justify-content:flex-end;&:after{display:none}}.divider.vertical{align-self:stretch;flex-flow:column nowrap;height:auto;margin:0 var(--spacing-field-padding,.625rem);min-height:100%;min-width:1px;width:fit-content;&:after,&:before{content:"";height:auto;min-height:1px;width:1px}& [x-icon]{flex-shrink:0;font-size:.875rem;min-height:.875rem}}}@layer components{:where(menu[popover],.dropdown-menu):not(.unstyle){background:var(--color-popover-surface,#fff);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,#2f4f4f);cursor:pointer;display:inline-flex;font-weight:400;justify-content:start;max-width:100%;min-height:var(--spacing-field-height,2.25rem);overflow:hidden;padding-inline-end:.5rem;padding-inline-start:.5rem;text-align:start;text-decoration:none;text-overflow:ellipsis;user-select:none;white-space:nowrap;width:100%;&:hover{text-decoration:inherit}&:active,&:hover{background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent));color:var(--color-field-inverse,#2f4f4f)}& [x-icon],& span{color:inherit}& [x-icon]:first-child:not(:only-child){margin-inline-end:.375rem}}& small{color:var(--color-content-neutral,gray);padding:.25rem .5rem}& hr{background-color:var(--color-line,color-mix(#2f4f4f 10%,transparent));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,color-mix(#2f4f4f 15%,transparent))}: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, .25rem)*4);width:100%}:where(fieldset):not(.unstyle){display:flex;flex-direction:column;gap:.375ch calc(var(--spacing, .25rem)*2);width:100%;&:has([type=radio],[type=checkbox]){gap:calc(var(--spacing, .25rem)*2)}}:where(fieldset:has(legend)):not(.unstyle){border-color:var(--color-line,color-mix(#2f4f4f 10%,transparent));border-radius:var(--radius,.5rem);border-style:solid;border-width:1px;padding:1ch 1.5ch 1.5ch;& :where(legend){color:var(--color-content-subtle,#a9a9a9);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, .5rem)/2);width:100%;:where(*){text-indent:0}:where(span:first-of-type){padding-inline-start:calc(var(--radius, .5rem)/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, 2.25rem)*8)}& .label:focus-within{box-shadow:0 0 0 2px color-mix(in oklch,var(--color-content-stark,#2f4f4f) 35%,transparent)}&:has(textarea){align-items:start;:where(data){padding-top:calc(var(--spacing, .25rem))}}}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,color-mix(#2f4f4f 10%,transparent));border:0 solid transparent;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,#2f4f4f);cursor:text;max-width:100%;transition:var(--transition,all .05s ease-in-out);width:100%;&:active,&:hover{background-color:var(--color-field-surface-hover,color-mix(#2f4f4f 15%,transparent))}&:focus-visible{background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent))}&::placeholder{color:color-mix(in oklch,var(--color-field-inverse,#2f4f4f) 65%,transparent)}&::selection{background-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 80%,var(--color-field-inverse,#2f4f4f))}&[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,.25rem);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,#a9a9a9);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,#2f4f4f);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,color-mix(#2f4f4f 10%,transparent));border-radius:var(--radius,.5rem);cursor:pointer;height:calc(var(--spacing, .25rem)*2);transition:var(--transition,all .05s ease-in-out)}&:hover::-webkit-slider-runnable-track{background-color:var(--color-field-surface-hover,color-mix(#2f4f4f 15%,transparent))}&::-webkit-slider-thumb{appearance:none;background-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 60%,var(--color-field-inverse,#2f4f4f));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,all .05s ease-in-out);width:calc(var(--spacing-field-height, 2.25rem)*.5)}&::-webkit-slider-thumb:hover{background-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 30%,var(--color-field-inverse,#2f4f4f))}}: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,gray);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,color-mix(#2f4f4f 10%,transparent))}}.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(nav[popover]){background-color:var(--color-popover-surface,#fff);height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:80vw;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(nav[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(nav[popover]){background-color:var(--color-surface-1,#f5f5f5)}}@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, .25rem)*4)}& button[\@click="next()"]{left:auto;right:calc(var(--spacing, .25rem)*4)}.carousel-dots{bottom:calc(var(--spacing, .25rem)*4);display:flex;gap:calc(var(--spacing, .25rem)*2);left:50%;max-width:100%;overflow-x:auto;padding:0 calc(var(--spacing, .25rem)*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,color-mix(#2f4f4f 10%,transparent)) 60%,var(--color-field-inverse,#2f4f4f));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,color-mix(#2f4f4f 10%,transparent));&:before{background-color:var(--color-field-inverse,#2f4f4f);left:calc(100% - var(--spacing-field-height, 2.25rem)*.65 + .125rem)}&:hover{background-color:var(--color-field-surface-hover,color-mix(#2f4f4f 15%,transparent))}}}}@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,#f5f5f5);border-bottom:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent))}:where(th,.grid-header>*){font-weight:700}:where(tr,.grid-row>*){border-bottom:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent))}: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,#f5f5f5)}: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,#fff);border:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent));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,#2f4f4f) 20%,transparent);border-radius:0;position:relative;&:after{background-color:var(--color-field-inverse,#2f4f4f);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,color-mix(#2f4f4f 10%,transparent));color:var(--color-field-inverse,#2f4f4f);:where(.toast-dismiss-button){border-inline-start:1px solid color-mix(in oklch,var(--color-field-inverse,#2f4f4f) 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,#2f4f4f);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,#fff);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,.5s)}& [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(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,#2f4f4f);& .link,& a:not(.unstyle){text-decoration:underline;text-underline-offset:2px}& [x-icon]{margin-inline-end:.25em}}.h1,.h2,.h3,.h4,.h5,.h6,:where(h1,h2,h3,h4,h5,h6):not(.unstyle){font-weight:550;word-wrap:break-word}.h1,.h2,.h3,:where(h1,h2,h3):not(.unstyle){letter-spacing:-.025em}.h1,:where(h1):not(.unstyle){font-size:3rem;line-height:1.25}.h2,:where(h2):not(.unstyle){font-size:2.25rem}.h3,:where(h3):not(.unstyle){font-size:1.75rem;line-height:1.4}.h4,:where(h4):not(.unstyle){font-size:1rem}.h5,:where(h5):not(.unstyle){color:var(--color-content-neutral,gray);font-size:1rem;line-height:1rem;& a:hover{color:var(--color-content-stark,#2f4f4f)}}.h6,:where(h6):not(.unstyle){color:var(--color-brand-content,#daa520);font-size:.8125rem;line-height:1.4}.paragraph,:where(p):not(.unstyle){line-height:1.6}.link,:where(a:not([role=button])):not(.unstyle){color:var(--color-content-stark,#2f4f4f);cursor:pointer;text-align:unset;text-decoration:none;transition:var(--transition,all .05s ease-in-out);&:hover{color:var(--color-content-neutral,gray)}&:where(:has([x-icon])){align-items:center;display:inline-flex;gap:.25em}}:where(aside):not(.unstyle){border:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent));border-radius:var(--radius,.5rem);padding:calc(var(--spacing, .25rem)*4)}:where(.badge){align-items:center;background-color:var(--color-surface-2,#dcdcdc);border-radius:100px;color:var(--color-field-inverse,#2f4f4f);display:inline-flex;font-size:.75rem;font-weight:500;gap:.25rem;height:fit-content;justify-content:center;line-height:1;padding:.35ch .65ch;width:fit-content;&:has(svg:only-child){padding:.35ch}}:where(blockquote):not(.unstyle){border-inline-end:none;border-inline-start:.25rem solid color-mix(in oklch,var(--color-content-stark,#2f4f4f) 25%,transparent);color:var(--color-content-stark,#2f4f4f);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;line-height:1.4;padding:0 .7ch;width:fit-content;word-wrap:break-word;background-color:color-mix(in oklch,var(--color-content-neutral,gray) 10%,transparent);border:1px solid color-mix(in oklch,var(--color-content-subtle,#a9a9a9) 10%,transparent);border-radius:var(--radius,.5rem);color:var(--color-content-neutral,gray);&[role=button]{cursor:pointer}}.caption,:where(figcaption):not(.unstyle){color:var(--color-content-neutral,gray);font-size:.8125rem;& a:not([role=button]){color:inherit;&:hover{color:var(--color-content-stark,#fff)}}}: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,gray);font-size:.875rem;& a:not([role=button]){color:inherit;&:hover{color:var(--color-content-stark,#fff)}}}: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,gray) 10%,transparent);border-radius:calc(var(--radius, .5rem)/1.5);color:var(--color-content-neutral,gray);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}:where(ol):not(.unstyle){list-style-type:decimal}:where(ul):not(.unstyle){list-style-type:disc}:where(ol):not(.unstyle),:where(ul):not(.unstyle){padding-inline-start:1.75ch;&:has(input[type=checkbox]){padding-inline-start:0}& 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}}}}:where(nav,menu):not(.unstyle) ol,:where(nav,menu):not(.unstyle) ul{list-style:none;padding:0;& li,li:not(:last-of-type){margin:0;padding:0}}[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(pre):not(.unstyle){background-color:var(--color-page,#fff);border:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent));border-radius:var(--radius,.5rem);display:flex;flex-flow:row wrap;font-size:.8125rem;line-height:1.7;overflow:hidden;overflow:hidden;tab-size:4;white-space:pre;white-space-collapse:preserve;& code{background-color:transparent;border:0;box-shadow:none;display:inline-block;flex-grow:1;font-size:inherit;height:auto;line-height:inherit;overflow-x:auto;padding:calc(var(--spacing, .25rem)*4);padding-inline-end:calc(var(--spacing, .25rem)*12);scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}&:not(:has(code)){padding:calc(var(--spacing, .25rem)*4)}}}@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,74rem)}:where(.ghost){background-color:transparent;&:hover{background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent))}}: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,color-mix(#2f4f4f 10%,transparent)) 90%,var(--color-field-inverse,#2f4f4f));border-style:solid;border-width:1px}.dark :where(.outlined){border-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 80%,var(--color-field-inverse,#2f4f4f))}:where(.transparent){background-color:transparent!important;color:var(--color-content-neutral,gray);&:hover{color:var(--color-content-stark,#2f4f4f)}}: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:not([popover]),&>header nav:not([popover]),&>main>section:not(.banner,.overlay-dark,.overlay-light){margin-inline-end:auto;margin-inline-start:auto;max-width:100%;width:var(--spacing-content-width,74rem)}&>footer{margin-top:auto}}.no-focus:focus,.no-focus:focus-visible,.no-focus:focus-within{box-shadow:0 0 0 0 transparent}:where(.no-scrollbar){-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}.no-spinner{-moz-appearance:textfield!important;appearance:textfield!important;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;display:none;margin:0}}:where(.overlay-dark,.overlay-light){position:relative;&:after{content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}>*{position:relative;z-index:1}}:where(.overlay-dark){color:#fff!important;&:after{background:oklch(0 0 0/50%)}}:where(.overlay-light){color:#000!important;&:after{background:oklch(100% 0 0/75%)}}:where(.prose,.prose details){max-width:100%;width:42rem;& aside:not([popover]):not(:where([x-code-group] *)){background-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 20%,transparent);border:1px solid color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 30%,transparent);border-radius:calc(var(--radius, .5rem)*2);color:var(--color-content-stark,#2f4f4f);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}}}& aside.frame{font-family:var(--font-sans)}&>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}}&>details,&>hr+details{margin-top:0}&>:not(details,hr)+details,&>details:first-child{margin-top:3rem}&>details:last-child,&>details:not(:last-child):not(:has(+details,+hr)){margin-bottom:3rem}&>details+:not(details,hr){margin-top:0}&>figcaption{margin-top:1rem}&>figure{margin-top:1.4rem;& img{margin:0}}&>h1{font-size:2.25rem}&>h1+p{color:var(--color-content-neutral,gray);font-size:1.125rem;margin-top:.625rem}&>h2{font-size:1.75rem;margin-bottom:.6667rem;margin-top:1rem}&>h3{font-size:1.25rem;margin-top:2.4rem}&>h4{margin-top:3rem}&>h4+p{margin-top:.25rem}&>h5{margin-top:1rem}&>h5,&>h6{margin-bottom:1rem}&>h6{margin-top:2rem}&>hr{margin-bottom:3rem;margin-top:3rem}&>details+hr:has(+details){margin-bottom:1rem;margin-top:1rem}&>img,&>p{margin-top:1.4rem}&>ol,&>small,&>ul{margin-top:1rem}&>pre,&>table,&>x-code,&>x-code-group{margin-bottom:2rem;margin-top:2rem}&>x-code pre,&>x-code-group x-code{margin-bottom:0;margin-top:0}}:where(.trailing){color:var(--color-content-neutral,gray);display:inline-block;margin-inline-start:auto}:where(.brand){--color-field-surface:var(--color-brand-surface,#daa520);--color-field-surface-hover:var(--color-brand-surface-hover,#b8860b);--color-field-inverse:var(--color-brand-inverse,#fff);--color-content-stark:var(--color-brand-content,#daa520);--color-content-neutral:color-mix(in oklch,var(--color-brand-content,#daa520) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-brand-content,#daa520) 70%,transparent)}:where(.accent){--color-field-surface:var(--color-accent-surface,#2f4f4f);--color-field-surface-hover:var(--color-accent-surface-hover,color-mix(#2f4f4f 90%,#fff));--color-field-inverse:var(--color-accent-inverse,#fff);--color-content-stark:var(--color-accent-content,#2f4f4f);--color-content-neutral:color-mix(in oklch,var(--color-accent-content,#2f4f4f) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-accent-content,#2f4f4f) 70%,transparent)}:where(.negative){--color-field-surface:var(--color-negative-surface,salmon);--color-field-surface-hover:var(--color-negative-surface-hover,#f08080);--color-field-inverse:var(--color-negative-inverse,maroon);--color-content-stark:var(--color-negative-content,crimson);--color-content-neutral:color-mix(in oklch,var(--color-negative-content,crimson) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-negative-content,crimson) 70%,transparent)}:where(.positive){--color-field-surface:var(--color-positive-surface,#98fb98);--color-field-surface-hover:var(--color-positive-surface-hover,#90ee90);--color-field-inverse:var(--color-positive-inverse,#006400);--color-content-stark:var(--color-positive-content,#32cd32);--color-content-neutral:color-mix(in oklch,var(--color-positive-content,#32cd32) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-positive-content,#32cd32) 70%,transparent)}:where(.stark){color:var(--color-content-stark,#2f4f4f)}:where(.neutral){color:var(--color-content-neutral,gray)}:where(.subtle){color:var(--color-content-subtle,#a9a9a9)}}
+@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,color-mix(#2f4f4f 12%,transparent));border:0;color:inherit;height:1px}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,video){height:auto;max-width:100%}:where(::-webkit-autofill,:-webkit-autofill:focus){transition:background-color 0s 600000s,color 0s 600000s}:where(::-webkit-date-and-time-value){min-height:1lh;text-align:inherit}:where(::-webkit-datetime-edit){display:inline-flex}:where(::-webkit-datetime-edit-fields-wrapper){padding:0}:where(::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field){padding-block:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}:where(small){font-size:80%}:where(span){color:inherit}:where(sub,sup){font-size:50%;line-height:0;position:relative;vertical-align:baseline}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(svg):not([fill]){fill:currentColor}:where(svg):not(:root){overflow:hidden}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}:where(::placeholder){color:#9ca3af;opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){:where(::placeholder){color:color-mix(in oklab,currentcolor 50%,transparent)}}:where([popover]){display:none;transition:opacity .15s ease-in,scale .15s ease-in,display .15s ease-in;transition-behavior:allow-discrete;&:popover-open{display:flex}@starting-style{opacity:0;scale:.9}&:not(:popover-open){display:none!important;opacity:0;scale:1;transition-duration:.15s;transition-timing-function:ease-out}}:where(progress){vertical-align:baseline}:where([type=search]){-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}:where(summary){display:list-item}:where(textarea){resize:vertical}[hidden],[un-cloak],[v-cloak],[x-cloak]{display:none}@media (-webkit-min-device-pixel-ratio:2){:where(html){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true]):after,:not([aria-busy=true]):before{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:scroll!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}@media (prefers-reduced-motion:no-preference){[dir=rtl] progress:indeterminate{animation-direction:reverse}}::view-transition-group(*){animation-duration:var(--view-transition-duration,.2s);animation-timing-function:var(--view-transition-easing,cubic-bezier(.4,0,.2,1))}[data-no-view-transition],canvas,iframe,video{view-transition-name:none}}@view-transition{navigation:auto}@layer components{:where(details):not(.unstyle){transition:var(--transition,all .05s ease-in-out);width:100%;&[open]>summary:before{transform:rotate(90deg)}& [open] summary{margin-bottom:calc(var(--spacing, .25rem)*4)}&>:last-child{margin-bottom:calc(var(--spacing, .25rem)*8)}:where(summary){align-items:center;color:var(--color-content-stark,#2f4f4f);cursor:pointer;display:flex;font-weight:700;justify-content:space-between;padding:var(--spacing-field-padding,.625rem) 0;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,#f5f5f5) 40%,var(--color-content-stark,#2f4f4f))}&:active{color:color-mix(in oklch,var(--color-surface-1,#f5f5f5) 50%,var(--color-content-stark,#2f4f4f))}&:before{background-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 50%,var(--color-field-inverse,#2f4f4f));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,color-mix(#2f4f4f 10%,transparent));background-position:50%;background-size:cover;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,#2f4f4f);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,#a9a9a9)}: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,color-mix(#2f4f4f 10%,transparent));border:1px solid var(--color-page,#fff);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,color-mix(#2f4f4f 15%,transparent));& 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,color-mix(#2f4f4f 15%,transparent));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,#fff);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(code,.unstyle){align-items:center;appearance:button;background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent));border:0 solid transparent;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,#2f4f4f);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,color-mix(#2f4f4f 10%,transparent));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,color-mix(#2f4f4f 15%,transparent))}&:focus-visible{background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent))}}: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,color-mix(#2f4f4f 15%,transparent));border-color:var(--color-field-surface-hover,color-mix(#2f4f4f 15%,transparent))}}&:after{background-color:var(--color-field-inverse,#2f4f4f);content:"";height:60%;left:50%;-webkit-mask-image:var(--icon-checkbox,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11 2-2 5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));mask-image:var(--icon-checkbox,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11 2-2 5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) scale(0);transform-origin:center;transition:var(--transition,all .05s ease-in-out);width:60%}&:checked:after{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}}:root{--color-picker-swatch:var(--color-line,color-mix(#2f4f4f 10%,transparent));--icon-color-solid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-paint-roller-icon lucide-paint-roller' viewBox='0 0 24 24'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");--icon-color-gradient:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-blend-icon lucide-blend' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Ccircle cx='15' cy='15' r='7'/%3E%3C/svg%3E");--icon-color-library:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-swatch-book-icon lucide-swatch-book' viewBox='0 0 24 24'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7M7 17h.01'/%3E%3Cpath d='m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'/%3E%3C/svg%3E");--icon-color-grab:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-pipette-icon lucide-pipette' viewBox='0 0 24 24'%3E%3Cpath d='m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12'/%3E%3Cpath d='m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3zM2 22l.414-.414'/%3E%3C/svg%3E");--icon-alpha-pattern:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='gray' d='M0 0h1v1H0zM1 1h1v1H1z' opacity='.15'/%3E%3C/svg%3E")}@layer components{:where(input[type=color]){appearance:none;-webkit-appearance:none;&::-webkit-color-swatch-wrapper{padding:0}&::-webkit-color-swatch{border:0}&::-moz-color-swatch{border:0}}}@layer utilities{:where([x-colorpicker\.swatch],input[type=color]):not(.unstyle){background:var(--color-picker-swatch,#000);border-color:oklch(from var(--color-picker-swatch,#000) calc(l + (.5 - l) * .35) c calc(h + 0));border-radius:var(--radius,.5rem);border-style:solid;border-width:1px;cursor:pointer;height:var(--spacing-field-height,2.25rem);max-width:var(--spacing-field-height,2.25rem);min-width:var(--spacing-field-height,2.25rem);overflow:hidden;padding:0;position:relative;transition:var(--transition,all .05s ease-in-out);width:var(--spacing-field-height,2.25rem);&:active,&:focus,&:focus-visible,&:hover{border-color:oklch(from var(--color-picker-swatch,#000) calc(l + (.5 - l) * .35) c calc(h + 0)/.5)}&:before{background-image:var(--icon-alpha-pattern);background-position:0 0;background-size:50%;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}}:where([x-colorpicker]):not(.unstyle){height:fit-content;max-height:30rem;max-width:18rem;min-width:18rem;overflow:hidden;& :where(.tabs-wrapper){border-bottom:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent));display:flex;padding:2px;width:100%;& button{flex:1;justify-content:center}}& [x-colorpicker\.solid]{& :where(.canvas-wrapper){aspect-ratio:1;cursor:crosshair;overflow:hidden;padding:2px;position:relative;touch-action:none;width:100%}& canvas{display:block;height:100%;width:100%}& :where(.color-reticle){border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.2);height:.75rem;pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:.75rem;z-index:1}& :where(.solid-options-inputs){display:flex;flex-direction:column;gap:.75rem;padding:.75rem;& div:has(button[x-colorpicker\.set-color-space],input[x-colorpicker\.set-color-value],input[x-colorpicker\.set-alpha-value]){display:flex;width:100%}}& input[x-colorpicker\.set-alpha],& input[x-colorpicker\.set-hue]{appearance:none;-webkit-appearance:none;background:transparent;border:none;border-radius:1rem;cursor:pointer;height:.75rem;outline:none;padding:0;width:100%;&::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;width:1rem;&:active{cursor:grabbing}}&::-moz-range-thumb{background:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;width:1rem;&:active{cursor:grabbing}}&::-webkit-slider-runnable-track{border-radius:1rem;height:.75rem}&::-moz-range-track{border-radius:1rem;height:.75rem}}& input[x-colorpicker\.set-hue]{&::-webkit-slider-runnable-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}&::-moz-range-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}}& input[x-colorpicker\.set-alpha]{--color-picker-alpha:#000;position:relative;&::-webkit-slider-runnable-track{background:linear-gradient(to right,transparent,var(--color-picker-alpha)),var(--icon-alpha-pattern) 0 0 /.5rem .5rem}&::-moz-range-track{background:linear-gradient(to right,transparent,var(--color-picker-alpha)),var(--icon-alpha-pattern) 0 0 /.5rem .5rem}}& button[x-colorpicker\.set-color-space]{justify-content:center;padding-inline-end:0;padding-inline-start:0;width:7ch}& input[x-colorpicker\.set-color-value]{flex:1;padding-inline-end:0}& input[x-colorpicker\.set-alpha-value]{padding-inline-start:0;text-align:end;width:fit-content}}& [x-colorpicker\.gradient]{& :where(.layer-options-wrapper){border-bottom:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent));& :where(.layer-options-inputs){align-items:center;display:flex;flex-flow:row nowrap;padding:.5rem;& button{justify-content:center;width:auto}& :where(.layer-angle-wrapper){position:relative;& input[x-colorpicker\.set-angle]{cursor:ew-resize;padding-inline-end:.75rem;padding-inline-start:0;text-align:end;width:5.5ch;&:focus{cursor:text}}& span{color:var(--color-content-neutral,gray);position:absolute;right:.25rem;top:0}}& [x-colorpicker\.layer-stops-bar]{background:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent));border-radius:1rem;cursor:pointer;height:.75rem;margin-inline-end:.5rem;margin-inline-start:1rem;position:relative;width:100%;& :where(.stop-handle){border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.25);cursor:grab;height:1rem;position:absolute;top:50%;touch-action:none;transform:translate(-50%,-50%);width:1rem;z-index:1;&:hover{box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 5px rgba(0,0,0,.25)}&:active{cursor:grabbing}&.active{box-shadow:inset 0 0 0 3px hsla(0,0%,100%,.85),0 1px 5px #000}}}}& [x-colorpicker\.solid]{padding:0;& :where(.canvas-wrapper){margin:auto;padding:0 0 2px;width:calc(100% - 2rem)}& :where(.solid-options-inputs){padding-left:1rem;padding-right:1rem}}}& :where(.gradient-value-wrapper){padding:.5rem;& [x-colorpicker\.set-gradient-value]{field-sizing:content;resize:none}}}& [data-gradient-type=radial] .layer-angle-wrapper{visibility:hidden}& [x-colorpicker\.library]{max-height:30rem;overflow-y:auto;& :where(.library-wrapper){display:flex;flex-flow:column;gap:1rem;padding:1rem 1rem 4rem;width:100%;& :where(.library-group){display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem;width:100%;&:not(:last-child){border-bottom:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent))}& :where(.library-palette){display:grid;gap:1px;grid-template-columns:repeat(11,1fr);& button[x-colorpicker\.apply-color]{aspect-ratio:1/1;border:1px solid hsla(0,0%,100%,.15);border-radius:calc(var(--radius, .5rem)/2);height:auto;max-height:1.375rem;max-width:1.375rem;min-height:0;min-width:0;width:100%;&:hover{border:1px solid hsla(0,0%,100%,.35)}&.active{border:1px solid #fff;box-shadow:inset 0 0 0 3px hsla(0,0%,100%,.85),0 0 1px #000,inset 0 0 0 4px rgba(0,0,0,.25)}}}}}}}:where(menu[popover][x-colorpicker]:not(.unstyle)){padding:0;& .tabs-wrapper button{border:1px solid var(--color-popover-surface,#fff)}}:where(menu[popover]:not(.unstyle) [x-colorpicker\.library],.dropdown-menu:not(.unstyle) [x-colorpicker\.library]){& :where(.library-wrapper){padding:.5rem .5rem 4rem!important}& :where(small){padding-inline-start:0}}:where(.color-icon-solid,.color-icon-gradient,.color-icon-library,.color-icon-grab,.gradient-layer-icon-linear,.gradient-layer-icon-radial,.gradient-layer-icon-conic){aspect-ratio:1/1;background-color:currentColor;height:calc(var(--spacing-field-height, 2.25rem)/2);max-height:1rem}:where(dialog[x-colorpicker]){border-radius:calc(var(--radius, .5rem))}:where(.color-icon-solid){mask-image:var(--icon-color-solid)}:where(.color-icon-gradient){mask-image:var(--icon-color-gradient)}:where(.color-icon-library){mask-image:var(--icon-color-library)}:where(.color-icon-grab){mask-image:var(--icon-color-grab)}.gradient-layer-icon-linear{background:linear-gradient(to right,var(--color-content-neutral,gray),color-mix(in oklch,var(--color-content-neutral,gray) 0%,transparent 100%));border-radius:50%}.gradient-layer-icon-radial{background:radial-gradient(var(--color-content-neutral,gray),color-mix(in oklch,var(--color-content-neutral,gray) 0%,transparent 100%));border-radius:50%}.gradient-layer-icon-conic{background:conic-gradient(var(--color-content-neutral,gray),color-mix(in oklch,var(--color-content-neutral,gray) 0%,transparent 100%));border-radius:50%}}@layer components{:where(dialog[popover],.dialog):not(.unstyle){background-color:var(--color-popover-surface,#fff);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,#2f4f4f);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,gray);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,color-mix(#2f4f4f 10%,transparent));content:"";display:inline-flex;flex:1;height:1px;width:auto}&:not(:empty){gap:var(--spacing-field-padding,.625rem)}}:where(.divider.start){justify-content:flex-start;&:before{display:none}}:where(.divider.end){justify-content:flex-end;&:after{display:none}}.divider.vertical{align-self:stretch;flex-flow:column nowrap;height:auto;margin:0 var(--spacing-field-padding,.625rem);min-height:100%;min-width:1px;width:fit-content;&:after,&:before{content:"";height:auto;min-height:1px;width:1px}& [x-icon]{flex-shrink:0;font-size:.875rem;min-height:.875rem}}}@layer components{:where(menu[popover],.dropdown-menu):not(.unstyle){background:var(--color-popover-surface,#fff);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,#2f4f4f);cursor:pointer;display:inline-flex;font-weight:400;justify-content:start;max-width:100%;min-height:var(--spacing-field-height,2.25rem);overflow:hidden;padding-inline-end:.5rem;padding-inline-start:.5rem;text-align:start;text-decoration:none;text-overflow:ellipsis;user-select:none;white-space:nowrap;width:100%;&:hover{text-decoration:inherit}&:active,&:hover{background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent));color:var(--color-field-inverse,#2f4f4f)}& [x-icon],& span{color:inherit}& [x-icon]:first-child:not(:only-child){margin-inline-end:.375rem}}& small{color:var(--color-content-neutral,gray);padding:.25rem .5rem}& hr{background-color:var(--color-line,color-mix(#2f4f4f 10%,transparent));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,color-mix(#2f4f4f 15%,transparent))}: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, .25rem)*4);width:100%}:where(fieldset):not(.unstyle){display:flex;flex-direction:column;gap:.375ch calc(var(--spacing, .25rem)*2);width:100%;&:has([type=radio],[type=checkbox]){gap:calc(var(--spacing, .25rem)*2)}}:where(fieldset:has(legend)):not(.unstyle){border-color:var(--color-line,color-mix(#2f4f4f 10%,transparent));border-radius:var(--radius,.5rem);border-style:solid;border-width:1px;padding:1ch 1.5ch 1.5ch;& :where(legend){color:var(--color-content-subtle,#a9a9a9);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, .5rem)/2);width:100%;:where(*){text-indent:0}:where(span:first-of-type){padding-inline-start:calc(var(--radius, .5rem)/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, 2.25rem)*8)}& .label:focus-within{box-shadow:0 0 0 2px color-mix(in oklch,var(--color-content-stark,#2f4f4f) 35%,transparent)}&:has(textarea){align-items:start;:where(data){padding-top:calc(var(--spacing, .25rem))}}}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,color-mix(#2f4f4f 10%,transparent));border:0 solid transparent;border-radius:var(--radius,.5rem);color:var(--color-field-inverse,#2f4f4f);cursor:text;max-width:100%;transition:var(--transition,all .05s ease-in-out);width:100%;&:active,&:hover{background-color:var(--color-field-surface-hover,color-mix(#2f4f4f 15%,transparent))}&:focus-visible{background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent))}&::placeholder{color:color-mix(in oklch,var(--color-field-inverse,#2f4f4f) 65%,transparent)}&::selection{background-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 80%,var(--color-field-inverse,#2f4f4f))}&[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,.25rem);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,#a9a9a9);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,#2f4f4f);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,color-mix(#2f4f4f 10%,transparent));border-radius:var(--radius,.5rem);cursor:pointer;height:calc(var(--spacing, .25rem)*2);transition:var(--transition,all .05s ease-in-out)}&:hover::-webkit-slider-runnable-track{background-color:var(--color-field-surface-hover,color-mix(#2f4f4f 15%,transparent))}&::-webkit-slider-thumb{appearance:none;background-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 60%,var(--color-field-inverse,#2f4f4f));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,all .05s ease-in-out);width:calc(var(--spacing-field-height, 2.25rem)*.5)}&::-webkit-slider-thumb:hover{background-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 30%,var(--color-field-inverse,#2f4f4f))}}: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,gray);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,color-mix(#2f4f4f 10%,transparent))}}.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(nav[popover]){background-color:var(--color-popover-surface,#fff);height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:80vw;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(nav[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(nav[popover]){background-color:var(--color-surface-1,#f5f5f5)}}@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, .25rem)*4)}& button[\@click="next()"]{left:auto;right:calc(var(--spacing, .25rem)*4)}.carousel-dots{bottom:calc(var(--spacing, .25rem)*4);display:flex;gap:calc(var(--spacing, .25rem)*2);left:50%;max-width:100%;overflow-x:auto;padding:0 calc(var(--spacing, .25rem)*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,color-mix(#2f4f4f 10%,transparent)) 60%,var(--color-field-inverse,#2f4f4f));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,color-mix(#2f4f4f 10%,transparent));&:before{background-color:var(--color-field-inverse,#2f4f4f);left:calc(100% - var(--spacing-field-height, 2.25rem)*.65 + .125rem)}&:hover{background-color:var(--color-field-surface-hover,color-mix(#2f4f4f 15%,transparent))}}}}@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,#f5f5f5);border-bottom:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent))}:where(th,.grid-header>*){font-weight:700}:where(tr,.grid-row>*){border-bottom:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent))}: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,#f5f5f5)}: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,#fff);border:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent));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,#2f4f4f) 20%,transparent);border-radius:0;position:relative;&:after{background-color:var(--color-field-inverse,#2f4f4f);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,color-mix(#2f4f4f 10%,transparent));color:var(--color-field-inverse,#2f4f4f);:where(.toast-dismiss-button){border-inline-start:1px solid color-mix(in oklch,var(--color-field-inverse,#2f4f4f) 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,#2f4f4f);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,#fff);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,.5s)}& [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(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,#2f4f4f);& .link,& a:not(.unstyle){text-decoration:underline;text-underline-offset:2px}& [x-icon]{margin-inline-end:.25em}}.h1,.h2,.h3,.h4,.h5,.h6,:where(h1,h2,h3,h4,h5,h6):not(.unstyle){font-weight:550;word-wrap:break-word}.h1,.h2,.h3,:where(h1,h2,h3):not(.unstyle){letter-spacing:-.025em}.h1,:where(h1):not(.unstyle){font-size:3rem;line-height:1.25}.h2,:where(h2):not(.unstyle){font-size:2.25rem}.h3,:where(h3):not(.unstyle){font-size:1.75rem;line-height:1.4}.h4,:where(h4):not(.unstyle){font-size:1rem}.h5,:where(h5):not(.unstyle){color:var(--color-content-neutral,gray);font-size:1rem;line-height:1rem;& a:hover{color:var(--color-content-stark,#2f4f4f)}}.h6,:where(h6):not(.unstyle){color:var(--color-brand-content,#daa520);font-size:.8125rem;line-height:1.4}.paragraph,:where(p):not(.unstyle){line-height:1.6}.link,:where(a:not([role=button])):not(.unstyle){color:var(--color-content-stark,#2f4f4f);cursor:pointer;text-align:unset;text-decoration:none;transition:var(--transition,all .05s ease-in-out);&:hover{color:var(--color-content-neutral,gray)}&:where(:has([x-icon])){align-items:center;display:inline-flex;gap:.25em}}:where(aside):not(.unstyle){border:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent));border-radius:var(--radius,.5rem);padding:calc(var(--spacing, .25rem)*4)}:where(.badge){align-items:center;background-color:var(--color-surface-2,#dcdcdc);border-radius:100px;color:var(--color-field-inverse,#2f4f4f);display:inline-flex;font-size:.75rem;font-weight:500;gap:.25rem;height:fit-content;justify-content:center;line-height:1;padding:.35ch .65ch;width:fit-content;&:has(svg:only-child){padding:.35ch}}:where(blockquote):not(.unstyle){border-inline-end:none;border-inline-start:.25rem solid color-mix(in oklch,var(--color-content-stark,#2f4f4f) 25%,transparent);color:var(--color-content-stark,#2f4f4f);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;line-height:1.4;padding:0 .7ch;width:fit-content;word-wrap:break-word;background-color:color-mix(in oklch,var(--color-content-neutral,gray) 10%,transparent);border:1px solid color-mix(in oklch,var(--color-content-subtle,#a9a9a9) 10%,transparent);border-radius:var(--radius,.5rem);color:var(--color-content-neutral,gray);&[role=button]{cursor:pointer}}.caption,:where(figcaption):not(.unstyle){color:var(--color-content-neutral,gray);font-size:.8125rem;& a:not([role=button]){color:inherit;&:hover{color:var(--color-content-stark,#fff)}}}: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,gray);font-size:.875rem;& a:not([role=button]){color:inherit;&:hover{color:var(--color-content-stark,#fff)}}}: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,gray) 10%,transparent);border-radius:calc(var(--radius, .5rem)/1.5);color:var(--color-content-neutral,gray);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}:where(ol):not(.unstyle){list-style-type:decimal}:where(ul):not(.unstyle){list-style-type:disc}:where(ol):not(.unstyle),:where(ul):not(.unstyle){padding-inline-start:1.75ch;&:has(input[type=checkbox]){padding-inline-start:0}& 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}}}}:where(nav,menu):not(.unstyle) ol,:where(nav,menu):not(.unstyle) ul{list-style:none;padding:0;& li,li:not(:last-of-type){margin:0;padding:0}}[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(pre):not(.unstyle){background-color:var(--color-page,#fff);border:1px solid var(--color-line,color-mix(#2f4f4f 10%,transparent));border-radius:var(--radius,.5rem);display:flex;flex-flow:row wrap;font-size:.8125rem;line-height:1.7;overflow:hidden;overflow:hidden;tab-size:4;white-space:pre;white-space-collapse:preserve;& code{background-color:transparent;border:0;box-shadow:none;display:inline-block;flex-grow:1;font-size:inherit;height:auto;line-height:inherit;overflow-x:auto;padding:calc(var(--spacing, .25rem)*4);padding-inline-end:calc(var(--spacing, .25rem)*12);scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}&:not(:has(code)){padding:calc(var(--spacing, .25rem)*4)}}}@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,74rem)}:where(.ghost){background-color:transparent;&:hover{background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent))}}: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,color-mix(#2f4f4f 10%,transparent)) 90%,var(--color-field-inverse,#2f4f4f));border-style:solid;border-width:1px}.dark :where(.outlined){border-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 80%,var(--color-field-inverse,#2f4f4f))}:where(.transparent){background-color:transparent!important;color:var(--color-content-neutral,gray);&:hover{color:var(--color-content-stark,#2f4f4f)}}: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:not([popover]),&>header nav:not([popover]),&>main>section:not(.banner,.overlay-dark,.overlay-light){margin-inline-end:auto;margin-inline-start:auto;max-width:100%;width:var(--spacing-content-width,74rem)}&>footer{margin-top:auto}}.no-focus:focus,.no-focus:focus-visible,.no-focus:focus-within{box-shadow:0 0 0 0 transparent}:where(.no-scrollbar){-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}.no-spinner{-moz-appearance:textfield!important;appearance:textfield!important;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;display:none;margin:0}}:where(.overlay-dark,.overlay-light){position:relative;&:after{content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}>*{position:relative;z-index:1}}:where(.overlay-dark){color:#fff!important;&:after{background:oklch(0 0 0/50%)}}:where(.overlay-light){color:#000!important;&:after{background:oklch(100% 0 0/75%)}}:where(.prose,.prose details){max-width:100%;width:42rem;& aside:not([popover]):not(:where([x-code-group] *)){background-color:color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 20%,transparent);border:1px solid color-mix(in oklch,var(--color-field-surface,color-mix(#2f4f4f 10%,transparent)) 15%,transparent);border-radius:calc(var(--radius, .5rem)*2);color:var(--color-content-stark,#2f4f4f);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}}}& aside.frame{font-family:var(--font-sans)}&>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}}&>details,&>hr+details{margin-top:0}&>:not(details,hr)+details,&>details:first-child{margin-top:3rem}&>details:last-child,&>details:not(:last-child):not(:has(+details,+hr)){margin-bottom:3rem}&>details+:not(details,hr){margin-top:0}&>figcaption{margin-top:1rem}&>figure{margin-top:1.4rem;& img{margin:0}}&>h1{font-size:2.25rem}&>h1+p{color:var(--color-content-neutral,gray);font-size:1.125rem;margin-top:.625rem}&>h2{font-size:1.75rem;margin-bottom:.6667rem;margin-top:1rem}&>h3{font-size:1.25rem;margin-top:2.4rem}&>h4{margin-top:3rem}&>h4+p{margin-top:.25rem}&>h5{margin-top:1rem}&>h5,&>h6{margin-bottom:1rem}&>h6{margin-top:2rem}&>hr{margin-bottom:3rem;margin-top:3rem}&>details+hr:has(+details){margin-bottom:1rem;margin-top:1rem}&>img,&>p{margin-top:1.4rem}&>ol,&>small,&>ul{margin-top:1rem}&>pre,&>table,&>x-code,&>x-code-group{margin-bottom:2rem;margin-top:2rem}&>x-code pre,&>x-code-group x-code{margin-bottom:0;margin-top:0}}:where(.trailing){color:var(--color-content-neutral,gray);display:inline-block;margin-inline-start:auto}:where(.brand){--color-field-surface:var(--color-brand-surface,#daa520);--color-field-surface-hover:var(--color-brand-surface-hover,#b8860b);--color-field-inverse:var(--color-brand-inverse,#fff);--color-content-stark:var(--color-brand-content,#daa520);--color-content-neutral:color-mix(in oklch,var(--color-brand-content,#daa520) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-brand-content,#daa520) 70%,transparent)}:where(.accent){--color-field-surface:var(--color-accent-surface,#2f4f4f);--color-field-surface-hover:var(--color-accent-surface-hover,color-mix(#2f4f4f 90%,#fff));--color-field-inverse:var(--color-accent-inverse,#fff);--color-content-stark:var(--color-accent-content,#2f4f4f);--color-content-neutral:color-mix(in oklch,var(--color-accent-content,#2f4f4f) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-accent-content,#2f4f4f) 70%,transparent)}:where(.negative){--color-field-surface:var(--color-negative-surface,salmon);--color-field-surface-hover:var(--color-negative-surface-hover,#f08080);--color-field-inverse:var(--color-negative-inverse,maroon);--color-content-stark:var(--color-negative-content,crimson);--color-content-neutral:color-mix(in oklch,var(--color-negative-content,crimson) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-negative-content,crimson) 70%,transparent)}:where(.positive){--color-field-surface:var(--color-positive-surface,#98fb98);--color-field-surface-hover:var(--color-positive-surface-hover,#90ee90);--color-field-inverse:var(--color-positive-inverse,#006400);--color-content-stark:var(--color-positive-content,#32cd32);--color-content-neutral:color-mix(in oklch,var(--color-positive-content,#32cd32) 85%,transparent);--color-content-subtle:color-mix(in oklch,var(--color-positive-content,#32cd32) 70%,transparent)}:where(.stark){color:var(--color-content-stark,#2f4f4f)}:where(.neutral){color:var(--color-content-neutral,gray)}:where(.subtle){color:var(--color-content-subtle,#a9a9a9)}}

package/lib/manifest.utilities.css

@@ -219,7 +219,7 @@
             border-radius: calc(var(--radius, 0.5rem) * 2);
             color: var(--color-content-stark, darkslategray);
             background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 20%, transparent);
-            border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 30%, transparent);
+            border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 15%, transparent);
 
             &:not(.frame) * {
                 color: inherit

package/lib/manifest.utilities.js

@@ -411,7 +411,7 @@ function createVariantGroups() {
 
 /* Manifest Utilities */
 
-/** True when prerender wrote utilities to prerender.utilities.css — skip runtime #utility-styles generation. */
+/** True when prerender wrote utilities to prerender.utilities.css — skip runtime #manifest-styles generation. */
 function manifestPageUsesStaticPrerenderUtilities() {
     if (typeof document === 'undefined') return false;
     try {
@@ -432,7 +432,7 @@ class TailwindCompiler {
     constructor(options = {}) {
         this.usesStaticPrerenderUtilities = manifestPageUsesStaticPrerenderUtilities();
 
-        // Prerender already emitted utility CSS; do not inject duplicate #utility-styles / observers.
+        // Prerender already emitted utility CSS; do not inject duplicate #manifest-styles / observers.
         if (this.usesStaticPrerenderUtilities) {
             this.debug = options.debug === true;
             this.startTime = performance.now();
@@ -471,7 +471,7 @@ class TailwindCompiler {
         // Create critical style element FIRST - must be before any rendering
         const criticalStyleStart = performance.now();
         this.criticalStyleElement = document.createElement('style');
-        this.criticalStyleElement.id = 'utility-styles-critical';
+        this.criticalStyleElement.id = 'manifest-styles-critical';
         // Insert at the very beginning of head
         if (document.head) {
             if (document.head.firstChild) {
@@ -541,7 +541,7 @@ class TailwindCompiler {
 
         // Create main style element for generated utilities
         this.styleElement = document.createElement('style');
-        this.styleElement.id = 'utility-styles';
+        this.styleElement.id = 'manifest-styles';
         document.head.appendChild(this.styleElement);
         this.setupUtilityStylesOrderObserver();
 
@@ -726,7 +726,7 @@ TailwindCompiler.prototype.addCriticalBlockingStylesSync = function () {
         const cssVariables = new Map();
 
         // 1. From inline style elements (already in DOM)
-        const inlineStyles = document.querySelectorAll('style:not(#utility-styles):not(#utility-styles-critical)');
+        const inlineStyles = document.querySelectorAll('style:not(#manifest-styles):not(#manifest-styles-critical)');
         for (const styleEl of inlineStyles) {
             if (styleEl.textContent) {
                 const variables = this.extractThemeVariables(styleEl.textContent);
@@ -993,7 +993,7 @@ TailwindCompiler.prototype.generateSynchronousUtilities = function () {
         const commonColorClasses = new Set();
 
         // Method 1: Extract from inline style elements
-        const inlineStyles = document.querySelectorAll('style:not(#utility-styles)');
+        const inlineStyles = document.querySelectorAll('style:not(#manifest-styles)');
         for (const styleEl of inlineStyles) {
             if (styleEl.textContent) {
                 const variables = this.extractThemeVariables(styleEl.textContent);
@@ -1302,14 +1302,14 @@ TailwindCompiler.prototype.cleanupCache = function () {
 // Helper methods
 // Utility functions for extracting, parsing, and processing CSS and classes
 
-// Ensure #utility-styles is last in head so our responsive/variant rules win over Tailwind and any later-injected styles
+// Ensure #manifest-styles is last in head so our responsive/variant rules win over Tailwind and any later-injected styles
 TailwindCompiler.prototype.ensureUtilityStylesLast = function () {
     if (this.styleElement && this.styleElement.parentNode && document.head.lastElementChild !== this.styleElement) {
         document.head.appendChild(this.styleElement);
     }
 };
 
-// When any element is added to head after ours, move #utility-styles to end. Handles CDN load order (e.g. Tailwind injecting after we run).
+// When any element is added to head after ours, move #manifest-styles to end. Handles CDN load order (e.g. Tailwind injecting after we run).
 TailwindCompiler.prototype.setupUtilityStylesOrderObserver = function () {
     if (!document.head || !this.styleElement) return;
     const self = this;
@@ -1371,7 +1371,7 @@ TailwindCompiler.prototype.discoverCssFiles = function () {
         }
 
         // Add any inline styles (exclude generated styles)
-        const styleElements = document.querySelectorAll('style:not(#utility-styles)');
+        const styleElements = document.querySelectorAll('style:not(#manifest-styles)');
         for (const style of styleElements) {
             if (style.textContent && style.textContent.trim()) {
                 const id = style.id || `inline-style-${Array.from(styleElements).indexOf(style)}`;
@@ -2145,6 +2145,32 @@ TailwindCompiler.prototype.extractCustomUtilities = function (cssText) {
         // Tolerate parsing errors; this is best-effort
     }
 
+    // Dedupe captured entries per class. The four parser passes above (flat
+    // regex, :where() extractor, compound-selector fallback, universal nested
+    // resolver) can each capture the same source rule with slightly different
+    // whitespace or selector ordering. Without this, the generator emits
+    // duplicate variant blocks at runtime (e.g. four `.\!brand { … }` rules
+    // where one suffices). Normalize whitespace before comparing so trivial
+    // formatting differences collapse.
+    for (const [className, value] of utilities.entries()) {
+        if (!Array.isArray(value)) continue;
+        const seen = new Set();
+        const deduped = [];
+        for (const entry of value) {
+            if (!entry || typeof entry !== 'object') continue;
+            const sel = String(entry.selector || '').replace(/\s+/g, ' ').trim();
+            const css = String(entry.css || '').replace(/\s+/g, ' ').trim();
+            if (!css) continue;
+            const key = `${sel}${css}`;
+            if (seen.has(key)) continue;
+            seen.add(key);
+            deduped.push(entry);
+        }
+        if (deduped.length > 0) {
+            utilities.set(className, deduped);
+        }
+    }
+
     return utilities;
 };
 
@@ -3082,7 +3108,13 @@ TailwindCompiler.prototype.compile = async function () {
             // Fetch CSS content once for initial compilation
             const themeCss = await this.fetchThemeContent();
             if (themeCss) {
-                // Extract and cache custom utilities
+                // Extract and cache custom utilities. We scan framework CSS too
+                // because the generator needs to know about semantic classes
+                // like .brand / .row / .col to emit their responsive/state
+                // variants (e.g. md:row, hover:brand). Base-form re-emission is
+                // suppressed in generateCustomUtilities ("Skip generating base
+                // utility - it already exists in the CSS"); duplicate captures
+                // are collapsed at the end of extractCustomUtilities.
                 const discoveredCustomUtilities = this.extractCustomUtilities(themeCss);
                 for (const [name, value] of discoveredCustomUtilities.entries()) {
                     this.customUtilities.set(name, value);

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "mnfst",
-    "version": "0.5.90",
+    "version": "0.5.92",
     "private": false,
     "workspaces": [
         "templates/starter",
         "packages/render",
         "packages/types",
-        "packages/test"
+        "packages/test",
+        "packages/export"
     ],
     "main": "lib/manifest.js",
     "style": "lib/manifest.css",
@@ -31,8 +32,9 @@
         "release:render": "cd packages/render && npm version patch --no-git-tag-version && npm publish --auth-type=web",
         "release:types": "cd packages/types && npm version patch --no-git-tag-version && npm publish --auth-type=web",
         "release:test": "cd packages/test && npm version patch --no-git-tag-version && npm publish --auth-type=web",
+        "release:export": "cd packages/export && npm version patch --no-git-tag-version && npm publish --auth-type=web",
         "release:starter": "cd packages/create-starter && npm version patch --no-git-tag-version && npm publish --auth-type=web",
-        "release:all": "npm run release:run && npm run release:render && npm run release:types && npm run release:test && npm run release:starter && npm run release",
+        "release:all": "npm run release:run && npm run release:render && npm run release:types && npm run release:test && npm run release:export && npm run release:starter && npm run release",
         "prepublishOnly": "npm run build",
         "test": "vitest run",
         "lint": "echo 'No linting configured'"