@nanoporetech-digital/components 8.0.0-alpha.0 → 8.0.0-alpha.2

package/dist/cjs/{index-DYD4xvxr.js → index-IR1lkhwT.js}

@@ -4,62 +4,33 @@
 'use strict';
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n.default = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
 
 const NAMESPACE = 'nano-components';
 const BUILD = /* nano-components */ { experimentalSlotFixes: true, hydratedSelectorName: "hydrated", lazyLoad: true, shadowDom: true, slotRelocation: true, updatable: true};
 
-var appGlobalScript = async () => {
-    if (globalThis.window &&
-        'MutationObserver' in globalThis.window &&
-        globalThis['document']) {
-        // fire global 'ready' event when everything is hydrated
-        const docEle = document.documentElement;
-        window.addEventListener('appload', () => {
-            docEle.classList.add('hydrated');
-        });
-        const docIsReady = () => {
-            if (!docEle.classList.contains('hydrated'))
-                return false;
-            docEle.dispatchEvent(new CustomEvent('nanoComponentsReady'));
-            return true;
-        };
-        if (!docIsReady()) {
-            let mutationO = new MutationObserver((_) => {
-                if (!docIsReady())
-                    return;
-                mutationO.disconnect();
-                mutationO = null;
-            });
-            mutationO.observe(docEle, {
-                childList: false,
-                subtree: false,
-                attributes: true,
-            });
-        }
-    }
-};
+var appGlobalScript = async () => { };
 
 const globalScripts = appGlobalScript;
-const globalStyles = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:where(nano-footer, .nano-footer) h1, :where(nano-footer, .nano-footer) h2, :where(nano-footer, .nano-footer) h3, :where(nano-footer, .nano-footer) h4, :where(nano-footer, .nano-footer) h5, :where(nano-footer, .nano-footer) h6 {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-medium);\n  line-height: var(--nano-line-height-normal);\n  letter-spacing: var(--nano-letter-spacing-normal);\n  margin: var(--header-margin);\n}\n\n@layer components {\n  .nano-toast-stack {\n    position: fixed;\n    z-index: var(--nano-z-index-modal);\n    inline-size: 28rem;\n    max-inline-size: 100%;\n    max-block-size: 100%;\n  }\n  .nano-toast-stack--tr {\n    inset-block-start: 0;\n    inset-inline-end: 0;\n  }\n  .nano-toast-stack--tl {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n  }\n  .nano-toast-stack--br {\n    inset-block-end: 0;\n    inset-inline-end: 0;\n  }\n  .nano-toast-stack--bl {\n    inset-block-end: 0;\n    inset-inline-start: 0;\n  }\n}\n@layer components {\n  .nano-sortable__placeholder {\n    opacity: 0;\n  }\n  .nano-sortable__dragged {\n    opacity: 0.6;\n    cursor: grabbing !important;\n    box-shadow: var(--nano-shadow-l2);\n    z-index: 1;\n    position: relative;\n  }\n  .nano-sortable__keyboard-handle {\n    background: var(--nano-color-base-0);\n  }\n  .nano-sortable__handle-dragged {\n    outline: var(--nano-focus-ring);\n    outline-offset: var(--nano-focus-ring-offset);\n  }\n}\n@layer components {\n  nano-cta {\n    --color: var(--nano-color-basic-white);\n    --bg: var(--nano-color-blue-cerulean-1000);\n    --bg-hover: var(--nano-color-blue-cerulean-1100);\n    --bg-active: var(--nano-color-blue-cerulean-1200);\n    --border: 1px solid var(--bg);\n    --icon-size: 1em;\n    --padding-v: 0.4375em;\n    --padding-h: 1.125em;\n    --spinner-size: 1em;\n    --font-size: var(--nano-font-size-small);\n    --line-height: var(--nano-line-height-normal);\n    --gap: var(--nano-spacing-sm);\n    --icon-display: none;\n    --loading-display: none;\n    --loading-opacity: 0;\n    --flip-icon-ltr: 0;\n    --flip-icon-rtl: 1;\n    display: contents;\n  }\n  nano-cta:has(.nano-internal-cta) {\n    display: inline-block;\n  }\n  nano-cta:dir(rtl) {\n    --flip-icon-ltr: 1;\n    --flip-icon-rtl: 0;\n  }\n  nano-cta[group=balanced] {\n    display: inline-grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--gap);\n  }\n  nano-cta[group=balanced] a,\n  nano-cta[group=balanced] button {\n    justify-content: space-evenly;\n  }\n  nano-cta[group=stacked] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--gap);\n  }\n  nano-cta[secondary]:not([secondary=false]),\n  nano-cta :is([secondary]):not([secondary=false]) {\n    --color: var(--nano-color-primary-1100);\n    --bg: var(--nano-color-base-0);\n    --bg-hover: var(--nano-color-primary-100);\n    --bg-active: var(--nano-color-primary-300);\n    --border: 1px solid var(--color);\n  }\n  nano-cta[theme=success],\n  nano-cta :is([theme=success]) {\n    --color: var(--nano-color-basic-white);\n    --bg: var(--nano-color-success-1000);\n    --bg-hover: var(--nano-color-success-1100);\n    --bg-active: var(--nano-color-success-1200);\n    --border: 1px solid var(--bg);\n  }\n  nano-cta[theme=success][secondary]:not([secondary=false]),\n  nano-cta :is([theme=success][secondary]):not([secondary=false]) {\n    --color: var(--nano-color-success-1100);\n    --bg: var(--nano-color-base-0);\n    --bg-hover: var(--nano-color-success-75);\n    --bg-active: var(--nano-color-success-200);\n    --border: 1px solid var(--color);\n  }\n  nano-cta[theme=danger],\n  nano-cta :is([theme=danger]) {\n    --color: var(--nano-color-basic-white);\n    --bg: var(--nano-color-danger-1000);\n    --bg-hover: var(--nano-color-danger-1100);\n    --bg-active: var(--nano-color-danger-1200);\n    --border: 1px solid var(--bg);\n  }\n  nano-cta[theme=danger][secondary]:not([secondary=false]),\n  nano-cta :is([theme=danger][secondary]):not([secondary=false]) {\n    --color: var(--nano-color-danger-1200);\n    --bg: var(--nano-color-base-0);\n    --bg-hover: var(--nano-color-danger-300);\n    --bg-active: var(--nano-color-danger-400);\n    --border: 1px solid var(--color);\n  }\n  nano-cta[theme=warning],\n  nano-cta :is([theme=warning]) {\n    --color: var(--nano-color-basic-white);\n    --bg: var(--nano-color-warning-1000);\n    --bg-hover: var(--nano-color-warning-1100);\n    --bg-active: var(--nano-color-warning-1200);\n    --border: 1px solid var(--bg);\n  }\n  nano-cta[theme=warning][secondary]:not([secondary=false]),\n  nano-cta :is([theme=warning][secondary]):not([secondary=false]) {\n    --color: var(--nano-color-warning-1100);\n    --bg: var(--nano-color-base-0);\n    --bg-hover: var(--nano-color-warning-200);\n    --bg-active: var(--nano-color-warning-300);\n    --border: 1px solid var(--color);\n  }\n  nano-cta[size=medium],\n  nano-cta :is([size=medium]) {\n    --font-size: var(--nano-font-size-xs);\n    --line-height: var(--nano-line-height-dense);\n    --gap: var(--nano-spacing-xs);\n  }\n  nano-cta[size=small],\n  nano-cta :is([size=small]) {\n    --font-size: var(--nano-font-size-2xs);\n    --line-height: var(--nano-line-height-denser);\n    --gap: var(--nano-spacing-xs);\n    --padding-h: 1em;\n    --padding-v: 0.5em;\n  }\n  nano-cta:is([loading], [loading=true]):not([loading=false]),\n  nano-cta :is([loading], [loading=true]):not([loading=false]) {\n    --text-color: transparent !important;\n    --loading-display: block;\n    --loading-opacity: 1;\n    --bg-hover: var(--bg);\n    --bg-active: var(--bg);\n    cursor: wait;\n  }\n  nano-cta:is([loading], [loading=true]):not([loading=false]) a,\n  nano-cta:is([loading], [loading=true]):not([loading=false]) button,\n  nano-cta :is([loading], [loading=true]):not([loading=false]) a,\n  nano-cta :is([loading], [loading=true]):not([loading=false]) button {\n    --text-color: transparent !important;\n    cursor: wait;\n  }\n  nano-cta :is(button[disabled], button[disabled=true]):not(button[disabled=false]),\n  nano-cta a:not([href]) {\n    --color: var(--nano-color-neutral-1200);\n    --text-color: var(--color);\n    --bg: var(--nano-color-neutral-100);\n    --bg-hover: var(--bg);\n    --bg-active: var(--bg);\n    --border: 1px solid var(--color);\n    cursor: not-allowed;\n  }\n  nano-cta :is(button[disabled], button[disabled=true]):not(button[disabled=false]) a,\n  nano-cta :is(button[disabled], button[disabled=true]):not(button[disabled=false]) button,\n  nano-cta a:not([href]) a,\n  nano-cta a:not([href]) button {\n    cursor: not-allowed;\n  }\n  nano-cta a,\n  nano-cta button {\n    --text-color: var(--color);\n    margin: 0;\n    appearance: none;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    white-space: nowrap;\n    vertical-align: middle;\n    background-color: var(--bg) !important;\n    color: var(--text-color) !important;\n    border-radius: var(--nano-border-radius-pill);\n    line-height: var(--line-height);\n    letter-spacing: var(--nano-letter-spacing-loose);\n    font-size: var(--font-size);\n    padding: var(--padding-v) var(--padding-h);\n    gap: var(--nano-spacing-sm);\n    border: var(--border) !important;\n    transition: color var(--nano-transition-fast) ease;\n    text-decoration: none !important;\n  }\n  nano-cta a:focus-visible,\n  nano-cta button:focus-visible {\n    outline: var(--nano-focus-ring);\n    outline-offset: var(--nano-focus-ring-offset);\n  }\n  nano-cta a:hover,\n  nano-cta button:hover {\n    background-color: var(--bg-hover) !important;\n  }\n  nano-cta a:active,\n  nano-cta button:active {\n    background-color: var(--bg-active) !important;\n  }\n  nano-cta a::before,\n  nano-cta button::before {\n    content: \"\";\n    display: var(--loading-display);\n    opacity: var(--loading-opacity);\n    position: absolute;\n    padding: 2.5px;\n    aspect-ratio: 1;\n    border-radius: 50%;\n    inline-size: var(--spinner-size);\n    background: var(--color);\n    inset: calc(50% - var(--spinner-size) / 2);\n    -webkit-mask: conic-gradient(rgba(0, 0, 0, 0), #000), conic-gradient(#000 0 0) content-box;\n    -webkit-mask-composite: source-out;\n            -webkit-mask: conic-gradient(rgba(0, 0, 0, 0), #000), conic-gradient(#000 0 0) content-box;\n            -webkit-mask-composite: source-out;\n                    mask: conic-gradient(rgba(0, 0, 0, 0), #000) subtract, conic-gradient(#000 0 0) content-box;\n    animation: load 1s linear infinite;\n    transition: all var(--nano-transition-fast) ease;\n    transition-behavior: allow-discrete;\n  }\n  @keyframes load {\n    to {\n      rotate: 1turn;\n    }\n  }\n  nano-cta a::after,\n  nano-cta button::after {\n    content: \"\";\n    display: var(--icon-display);\n    background-size: cover;\n    inline-size: var(--icon-size);\n    block-size: var(--icon-size);\n    background-color: var(--text-color);\n    -webkit-mask-image: var(--icon-svg);\n            mask-image: var(--icon-svg);\n    transition: color var(--nano-transition-fast) ease;\n    -webkit-mask-repeat: no-repeat;\n            mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n            mask-position: center;\n    transform-origin: center;\n    margin-inline-start: auto;\n    rotate: calc(180deg * var(--flip-icon-ltr));\n  }\n  nano-cta a :which(nano-icon, .nano-icon),\n  nano-cta a svg,\n  nano-cta button :which(nano-icon, .nano-icon),\n  nano-cta button svg {\n    color: inherit;\n    inline-size: var(--icon-size);\n    margin: auto 0;\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=forward] {\n    --icon-svg: var(--nano-component-icon-chevron);\n    --icon-display: block;\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=forward] a,\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=forward] button {\n    padding-inline-end: 0.8125em;\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=forward] a::after,\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=forward] button::after {\n    rotate: calc(180deg * var(--flip-icon-ltr));\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=back] {\n    --icon-svg: var(--nano-component-icon-chevron);\n    --icon-display: block;\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=back] a,\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=back] button {\n    padding-inline-start: 0.8125em;\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=back] a::after,\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=back] button::after {\n    rotate: calc(180deg * var(--flip-icon-rtl));\n    order: -1;\n    margin-inline-start: unset;\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=up] {\n    --icon-svg: var(--nano-component-icon-chevron);\n    --icon-display: block;\n    --flip-icon-ltr: 0;\n    --flip-icon-rtl: 0;\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=up] a::after,\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=up] button::after {\n    transform: rotate(270deg);\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=down] {\n    --icon-svg: var(--nano-component-icon-chevron);\n    --icon-display: block;\n    --flip-icon-ltr: 0;\n    --flip-icon-rtl: 0;\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=down] a::after,\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=down] button::after {\n    transform: rotate(90deg);\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=download] {\n    --icon-svg: var(--nano-component-icon-download);\n    --icon-display: block;\n    --flip-icon-ltr: 0;\n    --flip-icon-rtl: 0;\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=open] {\n    --icon-svg: var(--nano-component-icon-open);\n    --icon-size: .9em;\n    --icon-display: block;\n    --flip-icon-ltr: 0;\n    --flip-icon-rtl: 0;\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg)):not([icon]) a[href]:not([href=\"\"], [icon], [href^=\"#\"]) {\n    --icon-svg: var(--nano-component-icon-chevron);\n    --icon-display: block;\n    padding-inline-end: 0.8125em;\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg)):not([icon]) a[href]:not([href=\"\"], [icon], [href^=\"#\"])[target=_blank] {\n    --icon-svg: var(--nano-component-icon-open);\n    --icon-display: block;\n    --flip-icon-ltr: 0;\n    --flip-icon-rtl: 0;\n    padding-inline-end: var(--padding-h);\n  }\n  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg)):not([icon]) a[href]:not([href=\"\"], [icon], [href^=\"#\"])[download], nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg)):not([icon]) a[href]:not([href=\"\"], [icon], [href^=\"#\"]):is([href$=\".pdf\"], [href$=\".zip\"], [href$=\".doc\"], [href$=\".docx\"], [href$=\".xls\"], [href$=\".xlsx\"], [href$=\".ppt\"], [href$=\".pptx\"]) {\n    --icon-svg: var(--nano-component-icon-download);\n    --icon-display: block;\n    --flip-icon-ltr: 0;\n    --flip-icon-rtl: 0;\n    padding-inline-end: var(--padding-h);\n  }\n}\n/** Typography */\n@layer components {\n  nano-card {\n    --color: currentColor;\n    --bg: transparent;\n    --gap: var(--nano-spacing-md);\n    --content-margin: 0;\n    --flip-icon-ltr: 0;\n    container-type: inline-size;\n    position: relative;\n    display: grid;\n    grid-template-columns: minmax(197px, 31%) auto;\n    grid-template-rows: repeat(calc(var(--row-count) - 1), auto);\n    gap: var(--gap);\n    background-color: var(--bg);\n    color: var(--color);\n  }\n  nano-card:dir(rtl) {\n    --flip-icon-ltr: 1;\n  }\n  nano-card:has(> :last-child:nth-child(1), > article > :last-child:nth-child(1)) {\n    --row-count: 1;\n  }\n  nano-card:has(> :last-child:nth-child(2), > article > :last-child:nth-child(2)) {\n    --row-count: 2;\n  }\n  nano-card:has(> :last-child:nth-child(3), > article > :last-child:nth-child(3)) {\n    --row-count: 3;\n  }\n  nano-card:has(> :last-child:nth-child(4), > article > :last-child:nth-child(4)) {\n    --row-count: 4;\n  }\n  nano-card:has(> :last-child:nth-child(5), > article > :last-child:nth-child(5)) {\n    --row-count: 5;\n  }\n  nano-card:has(> :last-child:nth-child(6), > article > :last-child:nth-child(6)) {\n    --row-count: 6;\n  }\n  nano-card:has(> :last-child:nth-child(7), > article > :last-child:nth-child(7)) {\n    --row-count: 7;\n  }\n  nano-card * {\n    margin-block: unset;\n    margin-block-start: unset;\n    margin-block-end: unset;\n  }\n  nano-card > *:not([slot]) {\n    display: contents;\n  }\n  nano-card [slot] {\n    display: block;\n  }\n  nano-card [slot]:not([slot=img], ul) {\n    margin-inline: var(--content-margin);\n  }\n  nano-card [slot]:not([slot=img], ul):last-child {\n    margin-block-end: var(--content-margin);\n  }\n  nano-card:not(:has([slot=img])) [slot]:first-child {\n    margin-block-start: var(--content-margin);\n  }\n  nano-card [slot=img] {\n    order: 1;\n  }\n  nano-card [slot=title] {\n    order: 2;\n    text-wrap: balance;\n  }\n  nano-card [slot=content] {\n    order: 3;\n    text-wrap: balance;\n  }\n  nano-card [slot=footer] {\n    order: 4;\n    display: flex;\n    align-items: center;\n    gap: var(--gap);\n  }\n  nano-card nano-content-links {\n    --color-border: rgb(var(--nano-color-base-rgb-1000) / 7%);\n  }\n  nano-card address {\n    font-style: normal;\n  }\n  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) a, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) a {\n    color: var(--color);\n    text-decoration: none;\n  }\n  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])):hover [slot=title] {\n    color: var(--nano-color-primary-1000);\n    text-decoration: underline;\n  }\n  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover:has([slot=title] > * ~ *) [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])):hover:has([slot=title] > * ~ *) [slot=title] {\n    color: var(--color);\n    text-decoration: none;\n  }\n  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover:has([slot=title] > * ~ *) [slot=title] > :first-child, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])):hover:has([slot=title] > * ~ *) [slot=title] > :first-child {\n    color: var(--nano-color-primary-1000);\n    text-decoration: underline;\n  }\n  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) button::before,\n  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) a::before, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) button::before,\n  nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) a::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    inset: 0;\n    touch-action: manipulation;\n    cursor: pointer;\n    inline-size: 100%;\n    block-size: 100%;\n    animation: none;\n    border-radius: 0;\n    z-index: var(--enable-card-click);\n  }\n  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) nano-cta > *, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) nano-cta > * {\n    position: static;\n  }\n  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input))[variant^=promo]:hover, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading]))[variant^=promo]:hover {\n    box-shadow: var(--nano-shadow-l0);\n    background-color: var(--bg-hover);\n  }\n  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) nano-tooltip > *, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) nano-tooltip > * {\n    position: relative;\n    z-index: 2;\n  }\n  nano-card:has(a[slot]):has([slot] a) {\n    --enable-card-click: -1;\n  }\n  nano-card:has([slot=content] a):has([slot=footer] a) {\n    --enable-card-click: -1;\n  }\n  nano-card:not([layout=landscape]) [slot] {\n    grid-column: 1/-1 !important;\n  }\n  nano-card[layout=landscape] [slot] {\n    grid-column: 2;\n  }\n  nano-card[layout=landscape] [slot=img] {\n    grid-column: 1;\n    grid-row: 1/-1;\n  }\n  @container (width < 417px) {\n    nano-card[layout=landscape] [slot] {\n      grid-column: 1/-1 !important;\n    }\n    nano-card[layout=landscape] [slot=img] {\n      grid-column: 1/-1 !important;\n    }\n  }\n  nano-card[variant=product] [slot=title] {\n    display: inline-flex;\n    gap: var(--gap);\n    align-items: center;\n    justify-content: space-between;\n  }\n  nano-card[variant=product] [slot=footer] {\n    justify-content: space-between;\n  }\n  nano-card [slot=title],\n  nano-card [slot=title] > :first-child {\n    font-weight: var(--nano-font-weight-normal);\n    font-size: var(--nano-font-size-l);\n    line-height: var(--nano-line-height-dense);\n  }\n  nano-card [slot=content],\n  nano-card [slot=content] > * {\n    font-size: var(--nano-font-size-small);\n    line-height: var(--nano-line-height-normal);\n    letter-spacing: var(--nano-letter-spacing-loose);\n  }\n  nano-card[size=small] [slot=title],\n  nano-card[size=small] [slot=title] > :first-child {\n    font-size: var(--nano-font-size-small);\n    line-height: var(--nano-line-height-normal);\n    font-weight: var(--nano-font-weight-bold);\n  }\n  nano-card[size=small] [slot=content],\n  nano-card[size=small] [slot=content] > * {\n    font-size: var(--nano-font-size-xs);\n    line-height: var(--nano-line-height-normal);\n    letter-spacing: var(--nano-letter-spacing-loose);\n  }\n  nano-card[variant=product][size=small] {\n    --gap: var(--nano-spacing-sm);\n  }\n  nano-card[variant^=promo] {\n    --content-margin: var(--gap);\n    box-shadow: var(--nano-shadow-l1);\n  }\n  nano-card[variant^=promo] [slot=title],\n  nano-card[variant^=promo] [slot=title]:hover, nano-card[variant^=promo]:hover [slot=title] {\n    color: var(--color) !important;\n    text-decoration: none !important;\n  }\n  nano-card[variant^=promo] nano-cta > * {\n    inline-size: 100%;\n  }\n  nano-card[variant^=promo] [slot=title],\n  nano-card[variant^=promo] [slot=title] > :first-child {\n    font-weight: var(--nano-font-weight-normal);\n    font-size: var(--nano-font-size-medium);\n    line-height: var(--nano-line-height-dense);\n  }\n  nano-card[variant^=promo] [slot=content],\n  nano-card[variant^=promo] [slot=content] > * {\n    font-size: var(--nano-font-size-xs);\n    line-height: var(--nano-line-height-normal);\n    letter-spacing: var(--nano-letter-spacing-loose);\n  }\n  nano-card[variant^=promo]:not(:has(nano-cta)):has(a[slot=title]) a[slot=title] {\n    display: inline-flex;\n    gap: var(--gap);\n  }\n  nano-card[variant^=promo]:not(:has(nano-cta)):has(a[slot=title]) a[slot=title]::after {\n    content: \"\";\n    display: block;\n    background-size: cover;\n    inline-size: 1em;\n    background-color: var(--color);\n    -webkit-mask-image: var(--nano-component-icon-chevron);\n            mask-image: var(--nano-component-icon-chevron);\n    -webkit-mask-repeat: no-repeat;\n            mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n            mask-position: center;\n    transform-origin: center;\n    margin-inline-start: auto;\n    rotate: calc(180deg * var(--flip-icon-ltr));\n  }\n  nano-card[variant=promo] {\n    --bg: var(--nano-color-notice-1200);\n    --bg-hover: var(--nano-color-notice-1000);\n    --color: var(--nano-color-base-0);\n  }\n  nano-card[variant=promo] nano-cta {\n    --color: var(--nano-color-notice-1000);\n    --bg: var(--nano-color-base-0);\n    --bg-hover: var(--nano-color-notice-75);\n    --bg-active: var(--nano-color-notice-200);\n    --border: 1px solid var(--color);\n  }\n  nano-card[variant=promo-aero] {\n    --bg: var(--nano-color-success-200);\n    --bg-hover: var(--nano-color-success-75);\n    --color: var(--nano-color-base-1000);\n  }\n  nano-card[variant=promo-plain], nano-card[variant=promo-grey] {\n    --bg: var(--nano-color-base-0);\n    --bg-hover: var(--nano-color-neutral-100);\n    --color: var(--nano-color-neutral-1400);\n  }\n  nano-card[variant=promo-plain]:hover [slot=title], nano-card[variant=promo-grey]:hover [slot=title] {\n    color: var(--nano-color-primary-1000);\n  }\n  nano-card[variant=promo-plain] nano-cta, nano-card[variant=promo-grey] nano-cta {\n    --color: var(--nano-color-primary-1100);\n    --bg: var(--nano-color-base-0);\n    --bg-hover: var(--nano-color-primary-50);\n    --bg-active: var(--nano-color-primary-75);\n    --border: 1px solid var(--color);\n  }\n  nano-card[variant=promo-grey] {\n    --bg: var(--nano-color-neutral-100);\n    --bg-hover: var(--nano-color-neutral-200);\n    --color: var(--nano-color-neutral-1400);\n  }\n}\n@layer components {\n  nano-tag {\n    --background: var(--nano-color-base-50);\n    --color: var(--nano-color-primary-1100);\n    --stroke: var(--nano-color-primary-1000);\n    --color-non-interactive: var(--nano-color-neutral-1400);\n    --padding: 0.125rem 0.375rem;\n    --font-size: 0.625rem;\n    --line-height: var(--nano-line-height-denser);\n    --letter-spacing: var(--nano-letter-spacing-denser);\n    --bg-color-hover: var(--nano-color-primary-100);\n    --bg-color-active: var(--nano-color-primary-300);\n    display: inline-block;\n    block-size: fit-content;\n    inline-size: fit-content;\n    padding: var(--padding);\n    font-size: var(--font-size);\n    font-family: var(--font-family);\n    font-weight: var(--nano-font-weight-bold);\n    line-height: var(--line-height);\n    letter-spacing: var(--letter-spacing);\n    word-wrap: break-word;\n    text-align: center;\n    cursor: default;\n    color: var(--color-non-interactive);\n    background: var(--background);\n    border: 1px solid var(--color-non-interactive);\n  }\n  nano-tag[size=large] {\n    --padding: 0.25rem 0.5rem;\n    --font-size: var(--nano-font-size-2xs);\n    --letter-spacing: var(--nano-letter-spacing-loose);\n  }\n  nano-tag > a, nano-tag > button {\n    all: unset;\n    display: block;\n    padding: var(--padding);\n  }\n  nano-tag[closable] {\n    display: flex;\n    gap: 0.25rem;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--padding);\n  }\n  nano-tag[closable] nano-icon-button {\n    --padding: 0;\n  }\n  nano-tag[closable][size=large] {\n    gap: 0.375rem;\n  }\n  nano-tag[closable]:not(:has(nano-icon-button, .nano-icon-button))::after {\n    content: \"\";\n    display: block;\n    min-inline-size: 0.625rem;\n  }\n  nano-tag:has(a), nano-tag:has(button) {\n    padding: 0;\n  }\n  nano-tag:has(a), nano-tag:has(button), nano-tag[closable] {\n    color: var(--color);\n    border-color: var(--stroke);\n    background: var(--background);\n  }\n  nano-tag:has(a:hover), nano-tag:has(button:hover) {\n    cursor: pointer;\n    background: var(--bg-color-hover);\n  }\n  nano-tag:has(a:active), nano-tag:has(button:active) {\n    background: var(--bg-color-active);\n  }\n  nano-tag:has(a:focus-visible, button:focus-visible) {\n    outline: var(--nano-focus-ring);\n    outline-offset: var(--nano-focus-ring-offset);\n  }\n}\n@layer components {\n  nano-content-links {\n    --text-color: var(--nano-color-neutral-1400);\n    --color-disabled: var(--nano-color-neutral-800);\n    --color-border: var(--nano-color-neutral-200);\n    --color-active: var(--nano-color-primary-1000);\n    --padding: var(--nano-spacing-sm);\n    --icon-size: 1em;\n    --icon-color: var(--nano-color-primary-1200);\n    display: contents;\n    color: var(--text-color);\n    font-size: var(--nano-font-size-small);\n    font-weight: var(--nano-font-weight-normal);\n    line-height: var(--nano-line-height-normal);\n    letter-spacing: var(--nano-letter-spacing-loose);\n    word-wrap: break-word;\n  }\n  nano-content-links > * {\n    all: unset;\n    inline-size: -webkit-fill-available;\n    inline-size: -moz-available;\n    inline-size: stretch;\n    block-size: fit-content;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--padding);\n    gap: var(--nano-spacing-md);\n    border-block-start: 1px solid var(--color-border);\n    border-block-end: 1px solid var(--color-border);\n    text-decoration: none !important;\n  }\n  nano-content-links > *::after {\n    content: \"\";\n    background-size: cover;\n    inline-size: var(--icon-size);\n    block-size: var(--icon-size);\n    -webkit-mask-image: var(--nano-component-icon-chevron);\n            mask-image: var(--nano-component-icon-chevron);\n    -webkit-mask-repeat: no-repeat;\n            mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n            mask-position: center;\n    transform-origin: center;\n    margin-inline-start: auto;\n  }\n  nano-content-links > *:not(a) {\n    pointer-events: none;\n    cursor: default;\n    color: var(--color-disabled);\n    border-block-start: 1px solid var(--color-border);\n    border-block-end: 1px solid var(--color-border);\n  }\n  nano-content-links > *:not(a)::after {\n    background-color: var(--color-disabled);\n  }\n  nano-content-links > * + * {\n    border-block-start: none !important;\n  }\n  nano-content-links > a {\n    pointer-events: auto;\n    cursor: pointer;\n    color: var(--text-color);\n  }\n  nano-content-links > a::after {\n    background-color: var(--icon-color);\n  }\n  nano-content-links > a[target=_blank]::after {\n    -webkit-mask-image: var(--nano-component-icon-open);\n            mask-image: var(--nano-component-icon-open);\n  }\n  nano-content-links > a:hover, nano-content-links > a:active {\n    color: var(--color-active);\n    -webkit-text-decoration: underline solid;\n            text-decoration: underline solid;\n  }\n  nano-content-links > a:hover::after, nano-content-links > a:active::after {\n    background-color: var(--color-active);\n  }\n  nano-content-links > a:focus-visible {\n    outline: var(--nano-focus-ring);\n    outline-offset: var(--nano-focus-ring-offset);\n  }\n}\n@layer components {\n  nano-badge {\n    font-size: var(--nano-font-size-2xs);\n    line-height: var(--nano-line-height-normal);\n    letter-spacing: var(--nano-letter-spacing-loose);\n    background: var(--bg);\n    color: var(--color);\n    border-radius: var(--nano-border-radius-pill);\n    padding: 0.15em 0.65em !important;\n    display: inline-block;\n  }\n  nano-badge a {\n    color: inherit;\n    border-radius: inherit;\n  }\n  nano-badge a::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    background-color: transparent;\n  }\n  nano-badge:has(a) {\n    position: relative;\n  }\n  nano-badge:has(a):hover {\n    background-color: color-mix(in srgb, var(--bg), black 10%);\n  }\n  nano-badge:not([theme]), nano-badge[theme=primary] {\n    --bg: var(--nano-color-primary-1000);\n    --color: var(--nano-color-base-0);\n  }\n  nano-badge:not([theme])[strength=\"4\"], nano-badge[theme=primary][strength=\"4\"] {\n    --bg: var(--nano-color-primary-700);\n  }\n  nano-badge:not([theme])[strength=\"3\"], nano-badge[theme=primary][strength=\"3\"] {\n    --bg: var(--nano-color-primary-1000);\n  }\n  nano-badge:not([theme])[strength=\"2\"], nano-badge[theme=primary][strength=\"2\"] {\n    --bg: var(--nano-color-primary-1100);\n  }\n  nano-badge:not([theme])[strength=\"1\"], nano-badge[theme=primary][strength=\"1\"] {\n    --bg: var(--nano-color-primary-1200);\n  }\n  nano-badge[theme=neutral] {\n    --bg: var(--nano-color-neutral-900);\n    --color: var(--nano-color-base-0);\n  }\n  nano-badge[theme=neutral][strength=\"4\"] {\n    --bg: var(--nano-color-neutral-700);\n  }\n  nano-badge[theme=neutral][strength=\"3\"] {\n    --bg: var(--nano-color-neutral-900);\n  }\n  nano-badge[theme=neutral][strength=\"2\"] {\n    --bg: var(--nano-color-neutral-1000);\n  }\n  nano-badge[theme=neutral][strength=\"1\"] {\n    --bg: var(--nano-color-neutral-1200);\n  }\n  nano-badge[theme=success] {\n    --bg: var(--nano-color-success-1000);\n    --color: var(--nano-color-base-0);\n  }\n  nano-badge[theme=success][strength=\"4\"] {\n    --bg: var(--nano-color-success-600);\n  }\n  nano-badge[theme=success][strength=\"3\"] {\n    --bg: var(--nano-color-success-1000);\n  }\n  nano-badge[theme=success][strength=\"2\"] {\n    --bg: var(--nano-color-success-1100);\n  }\n  nano-badge[theme=success][strength=\"1\"] {\n    --bg: var(--nano-color-success-1200);\n  }\n  nano-badge[theme=warning] {\n    --bg: var(--nano-color-warning-1000);\n    --color: var(--nano-color-base-0);\n  }\n  nano-badge[theme=warning][strength=\"4\"] {\n    --bg: var(--nano-color-warning-600);\n  }\n  nano-badge[theme=warning][strength=\"3\"] {\n    --bg: var(--nano-color-warning-1000);\n  }\n  nano-badge[theme=warning][strength=\"2\"] {\n    --bg: var(--nano-color-warning-1100);\n  }\n  nano-badge[theme=warning][strength=\"1\"] {\n    --bg: var(--nano-color-warning-1200);\n  }\n  nano-badge[theme=danger] {\n    --bg: var(--nano-color-danger-1000);\n    --color: var(--nano-color-base-0);\n  }\n  nano-badge[theme=danger][strength=\"4\"] {\n    --bg: var(--nano-color-danger-800);\n  }\n  nano-badge[theme=danger][strength=\"3\"] {\n    --bg: var(--nano-color-danger-1000);\n  }\n  nano-badge[theme=danger][strength=\"2\"] {\n    --bg: var(--nano-color-danger-1100);\n  }\n  nano-badge[theme=danger][strength=\"1\"] {\n    --bg: var(--nano-color-danger-1200);\n  }\n  nano-badge[pulse]:not([pulse=false]) {\n    animation: pulse-animation 2s infinite;\n  }\n  @keyframes pulse-animation {\n    0% {\n      box-shadow: 0 0 0 0 rgb(var(--nano-color-base-rgb-1000)/20%);\n    }\n    100% {\n      box-shadow: 0 0 0 1em rgb(var(--nano-color-base-rgb-1000)/0%);\n    }\n  }\n}\n@layer components {\n  :where(nano-card-carousel, .nano-card-carousel) > [slot=title] {\n    all: unset;\n    font-weight: var(--nano-font-weight-normal);\n    font-size: var(--nano-font-size-xl);\n    line-height: var(--nano-line-height-denser);\n    line-height: 1;\n  }\n  nano-card-carousel nano-card [slot] {\n    opacity: var(--text-opacity);\n  }\n  nano-card-carousel nano-card [slot=img] {\n    opacity: var(--img-opacity);\n  }\n}\n@layer components {\n  .nano-theme-dark :where(nano-global-nav, .nano-global-nav)::part(logo), .nano-theme-dark :where(nano-global-nav, .nano-global-nav) [part~=\"logo\"], :where(nano-global-nav, .nano-global-nav).nano-theme-dark::part(logo), :where(nano-global-nav, .nano-global-nav).nano-theme-dark [part~=\"logo\"] {\n    filter: invert(100%);\n  }\n  :where(nano-global-nav, .nano-global-nav) :where(nano-nav-item, .nano-nav-item)::part(label), :where(nano-global-nav, .nano-global-nav) :where(nano-nav-item, .nano-nav-item) [part~=\"label\"] {\n    white-space: nowrap;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu nano-nav-item, :where(nano-global-nav, .nano-global-nav).bar-menu > a {\n    color: var(--main-menu-text-color);\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item):hover, :where(nano-global-nav, .nano-global-nav).bar-menu > a:hover {\n    color: var(--main-menu-hover-text-color);\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item):active, :where(nano-global-nav, .nano-global-nav).bar-menu > a:active {\n    color: var(--main-menu-active-text-color);\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(trigger), :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [part~=\"trigger\"] {\n    position: relative;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(trigger)::before, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [part~=\"trigger\"]::before {\n    content: \"\";\n    position: absolute;\n    background-color: var(--main-menu-active-border-color);\n    block-size: 4px;\n    inset-inline: 0;\n    inset-block-end: -1.5625rem;\n    transform: translateZ(0) scaleX(0);\n    transform-origin: 0 center;\n    transition: transform var(--nano-transition-x-fast) ease-in-out;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)[open] {\n    color: var(--main-menu-active-border-color) !important;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)[open]::part(trigger)::before, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)[open] [part~=\"trigger\"]::before {\n    transform: translateZ(0) scaleX(1);\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu a.active,\n  :where(nano-global-nav, .nano-global-nav).bar-menu nano-nav-item.active,\n  :where(nano-global-nav, .nano-global-nav).bar-menu nano-nav-item[selected] {\n    color: var(--main-menu-active-text-color) !important;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(modal), :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [part~=\"modal\"] {\n    inset-block-start: -500%;\n    inline-size: 100%;\n    position: absolute;\n    z-index: -2;\n    inset-inline: 0;\n    transition: inset-block-start var(--nano-transition-fast) ease-in-out, opacity var(--nano-transition-x-fast) ease;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(modal modal--open), :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [part~=\"modal modal--open\"] {\n    inset-block-start: 100%;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(modal-content), :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [part~=\"modal-content\"] {\n    background: var(--nano-color-base-0);\n    color: var(--nano-color-base-1000);\n    padding: var(--nano-spacing-xl);\n    inline-size: 91.25rem;\n    max-inline-size: 100%;\n    margin: auto;\n    box-shadow: var(--nano-shadow-l2);\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(modal-mask), :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [part~=\"modal-mask\"] {\n    background: var(--nano-overlay-background-color);\n    position: fixed;\n    inset: 0;\n    min-block-size: 100%;\n    z-index: -1;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu [slot=close-button] {\n    display: none;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] {\n    display: grid;\n    gap: var(--nano-spacing-xl);\n    grid-template: auto/repeat(auto-fit, minmax(200px, 1fr));\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary]:has(.gn__focus-area) {\n    grid-template: auto/1fr 1fr 26rem;\n  }\n  @media (width < 1200px) {\n    :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary]:has(.gn__focus-area) {\n      grid-template-columns: 1fr 26rem;\n    }\n  }\n  @media (width < 830px) {\n    :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary]:has(.gn__focus-area) {\n      grid-template-columns: 1fr;\n    }\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h1, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h2, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h3, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h4, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__title {\n    font-weight: var(--nano-font-weight-normal);\n    font-size: var(--nano-font-size-medium);\n    line-height: var(--nano-line-height-dense);\n    padding-block-end: 1rem;\n    border-block-end: 1px solid var(--nano-color-neutral-100);\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a {\n    text-decoration: none;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a:hover {\n    text-decoration: underline;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul {\n    margin: 0;\n    padding: 0;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul li {\n    margin-inline: 0;\n    list-style: none;\n    margin-block-end: var(--nano-spacing-sm);\n    line-height: var(--nano-line-height-dense);\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area {\n    padding: var(--nano-spacing-xl) var(--nano-spacing-l);\n    display: flex;\n    flex-direction: column;\n    gap: var(--nano-spacing-sm);\n    background: var(--nano-color-base-0);\n    color: var(--nano-color-base-1000);\n  }\n  @media (width < 1200px) and (width > 830px) {\n    :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area {\n      grid-column: 2;\n      grid-row: 1/3;\n    }\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area h1, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area h2, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area h3, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area h4, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area h5, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area p {\n    margin: 0;\n    border: none;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area nano-content-links {\n    display: block;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__link-columns {\n    gap: var(--nano-spacing-xl);\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__link-columns:has(> :nth-child(6)) {\n    columns: 2;\n  }\n  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__link-columns > * {\n    display: block;\n    margin-block-end: var(--nano-spacing-sm);\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item), :where(nano-global-nav, .nano-global-nav).overflow-menu > a {\n    color: var(--overflow-text-color);\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item):hover, :where(nano-global-nav, .nano-global-nav).overflow-menu > a:hover {\n    color: var(--overflowhover-text-color);\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item):active, :where(nano-global-nav, .nano-global-nav).overflow-menu > a:active {\n    color: var(--overflow-active-text-color);\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu a.active,\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item).active,\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item)[selected] {\n    color: var(--overflow-active-text-color) !important;\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item)::part(modal), :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [part~=\"modal\"] {\n    background-color: var(--overflow-bg-color);\n    inline-size: 100%;\n    block-size: 100%;\n    position: absolute;\n    inset: 0;\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nano-spacing-md);\n    padding-block-end: var(--nano-spacing-md);\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a {\n    text-decoration: none;\n    color: var(--nano-color-blue-cerulean-700);\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a:hover {\n    text-decoration: underline;\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h1, :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h2, :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h3, :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h4, :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__title {\n    font-size: var(--nano-font-size-small);\n    line-height: var(--nano-line-height-normal);\n    letter-spacing: var(--nano-letter-spacing-loose);\n    margin-block-end: var(--nano-spacing-sm);\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul {\n    margin: 0;\n    padding: 0;\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul li {\n    margin-inline: 0;\n    list-style: none;\n    margin-block-end: var(--nano-spacing-sm);\n    line-height: var(--nano-line-height-dense);\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__link-columns {\n    padding-inline-start: var(--nano-spacing-md);\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area {\n    border-block-start: 1px solid rgb(var(--nano-color-base-rgb-1000)/10%);\n    padding-block-start: var(--nano-spacing-md);\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu [slot=close-button] {\n    color: inherit;\n    padding-block: var(--nano-spacing-md);\n    display: flex;\n    gap: var(--nano-spacing-sm);\n    align-items: center;\n    cursor: pointer;\n    inline-size: 100%;\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu [slot=close-button]:hover {\n    color: var(--nano-color-blue-cerulean-700);\n  }\n  :where(nano-global-nav, .nano-global-nav).overflow-menu [slot=close-button]::before {\n    content: \"\";\n    margin-inline-start: 0;\n    background-size: cover;\n    inline-size: 1em;\n    block-size: 1em;\n    -webkit-mask-image: var(--nano-component-icon-chevron);\n            mask-image: var(--nano-component-icon-chevron);\n    -webkit-mask-repeat: no-repeat;\n            mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n            mask-position: center;\n    transform-origin: center;\n    rotate: 180deg;\n    background-color: var(--nano-color-blue-cerulean-700);\n  }\n}\n@layer components {\n  nano-avatar {\n    --size: 2.5rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    inline-size: var(--size);\n    block-size: var(--size);\n    background-color: var(--nano-color-neutral-400);\n    font-size: calc(var(--size) * 0.5);\n    font-weight: var(--nano-font-weight-normal);\n    color: var(--nano-color-neutral-0);\n    -webkit-user-select: none;\n            user-select: none;\n    vertical-align: middle;\n    border-radius: var(--nano-border-radius-circle);\n    overflow: hidden;\n  }\n  nano-avatar:empty::before {\n    content: attr(initials);\n    text-transform: uppercase;\n    line-height: 1;\n  }\n  nano-avatar img {\n    aspect-ratio: var(--nano-image-ratio-square);\n    object-fit: cover;\n  }\n}\n@layer components {\n  :where(nano-in-page-nav, .nano-in-page-nav) {\n    --color-bottom-border: rgb(var(--nano-color-base-rgb-1000) / 10%);\n    --color-text: var(--nano-color-neutral-1400);\n    --color-primary: var(--nano-color-primary-1100);\n    --color-text-hover: var(--color-primary);\n    --color-border-active: var(--nano-color-primary-1000);\n    --border-active: 3px solid var(--color-border-active);\n    --color-bg: var(--nano-color-primary-75);\n    --font-size: var(--nano-font-size-small);\n    --font-weight: var(--nano-font-weight-normal);\n    --font-weight-active: var(--nano-font-weight-bold);\n    --line-height: var(--nano-line-height-dense);\n    --letter-spacing: var(--nano-letter-spacing-loose);\n    --flip-icon-ltr: 1;\n    --list-gap: calc(var(--spacing-l2) / 1.25);\n    --spacing-l2: var(--nano-spacing-l2);\n    --spacing-l3: var(--nano-spacing-l3);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav):dir(rtl) {\n    --flip-icon-ltr: 0;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) a,\n  :where(nano-in-page-nav, .nano-in-page-nav) ul,\n  :where(nano-in-page-nav, .nano-in-page-nav) li {\n    all: unset;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul {\n    display: flex;\n    flex-direction: column;\n    list-style: none;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul:not(ul ul) {\n    padding: 0 var(--spacing-l2) var(--spacing-l3) var(--spacing-l2);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) a {\n    cursor: pointer;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) a:hover {\n    text-decoration: underline;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) a:focus-visible {\n    outline: var(--nano-focus-ring);\n    outline-offset: var(--nano-focus-ring-offset);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li:not(ul > li li) {\n    margin: 0;\n    padding: var(--spacing-l2) 0;\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: stretch;\n    inline-size: 100%;\n    border-block-end: 1px solid var(--color-bottom-border);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li:not(ul > li li) a {\n    color: var(--color-text);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li:not(ul > li li) a.active {\n    border-inline-start: var(--border-active);\n    padding-inline-start: 1rem;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li:not(ul > li li) a:hover {\n    color: var(--color-text-hover);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul,\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul {\n    padding: var(--list-gap) 0 0 var(--spacing-l2);\n    gap: var(--list-gap);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul a,\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul a {\n    color: var(--color-primary) !important;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul a.active,\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul a.active {\n    padding-inline-start: 0;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul:has(nano-details),\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul:has(nano-details) {\n    padding-inline-start: 1.1rem;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul nano-details::part(header), :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul nano-details [part~=\"header\"], :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul nano-details::part(header), :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul nano-details [part~=\"header\"] {\n    padding: 0;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul > li > nano-details > ul,\n  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul > li > nano-details > ul {\n    padding: var(--list-gap) 0 0 var(--nano-spacing-l1-default);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) nano-details nano-details:not(nano-details nano-details nano-details) {\n    color: var(--color-text);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) nano-details {\n    --padding: 0;\n    --btn-bg-color: transparent;\n    --btn-bg-color--open: var(--nano-color-primary-75);\n    --btn-bg-color--hover: transparent;\n    border: none;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) nano-details .active::part(header), :where(nano-in-page-nav, .nano-in-page-nav) nano-details .active [part~=\"header\"] {\n    border-inline-start: var(--border-active);\n    padding-inline-start: 1rem;\n    color: var(--color-primary);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) nano-details[open] > [slot=icon-start] {\n    rotate: 90deg;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) nano-details::part(content), :where(nano-in-page-nav, .nano-in-page-nav) nano-details [part~=\"content\"] {\n    padding: 0;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) nano-details::part(icon--start), :where(nano-in-page-nav, .nano-in-page-nav) nano-details [part~=\"icon--start\"] {\n    margin-inline-end: var(--spacing-l3);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) nano-details::part(header), :where(nano-in-page-nav, .nano-in-page-nav) nano-details [part~=\"header\"] {\n    font-size: var(--font-size);\n    line-height: var(--line-height);\n    font-weight: var(--font-weight);\n    letter-spacing: var(--letter-spacing);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) nano-details::part(header):hover, :where(nano-in-page-nav, .nano-in-page-nav) nano-details [part~=\"header\"]:hover {\n    text-decoration: underline;\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) .details-wrapper {\n    --btn-text-color: var(--color-text);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) .details-wrapper::part(header), :where(nano-in-page-nav, .nano-in-page-nav) .details-wrapper [part~=\"header\"] {\n    padding: var(--spacing-l2);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav):has(.details-wrapper[open])::part(root), :where(nano-in-page-nav, .nano-in-page-nav):has(.details-wrapper[open]) [part~=\"root\"] {\n    box-shadow: var(--nano-shadow-l1);\n  }\n  :where(nano-in-page-nav, .nano-in-page-nav) .details-wrapper.sticky.stuck[open]::part(header), :where(nano-in-page-nav, .nano-in-page-nav) .details-wrapper.sticky.stuck[open] [part~=\"header\"] {\n    z-index: var(--nano-z-index-menubar);\n    inset-block-start: 0;\n    position: sticky;\n    box-shadow: var(--nano-shadow-l1);\n    padding: var(--spacing-l2);\n  }\n}\n@layer components {\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) {\n    --color-bg: var(--nano-color-base-0);\n    --color-border: var(--nano-color-neutral-200);\n    --outer-spacing: var(--nano-spacing-l1-default);\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h2 {\n    font-weight: var(--nano-font-weight-normal);\n    font-size: var(--nano-font-size-xl);\n    line-height: var(--nano-line-height-denser);\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h2,\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h4 {\n    margin: 0;\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h3,\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h4 {\n    font-size: var(--nano-font-size-small);\n    line-height: var(--nano-line-height-normal);\n    font-weight: var(--nano-font-weight-bold);\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h3 {\n    padding-block-end: var(--nano-spacing-md);\n    border-block-end: 1px solid var(--color-border);\n    margin-block: 0;\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h4 {\n    font-weight: var(--nano-font-weight-normal);\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) ul {\n    padding: 0;\n    margin: 0;\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) ul[slot=content] {\n    list-style: none;\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) ul[slot=content] > li {\n    margin: 0;\n    padding-block-start: var(--nano-spacing-md);\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) [slot=label] {\n    display: flex;\n    align-items: center;\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details {\n    --btn-bg-color: transparent;\n    --btn-bg-color--active: transparent;\n    --btn-bg-color--hover: transparent;\n    --padding: 0;\n    border: none;\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details::part(header), :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details [part~=\"header\"] {\n    color: var(--color-primary);\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details::part(label), :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details [part~=\"label\"], :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details::part(content), :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details [part~=\"content\"] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: var(--nano-spacing-l1-default);\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details::part(icon--end), :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details [part~=\"icon--end\"] {\n    display: none;\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details::part(content), :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details [part~=\"content\"] {\n    padding: var(--nano-spacing-md) 0;\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details::part(body), :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details [part~=\"body\"] {\n    border-block-end: 1px solid var(--color-border);\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details ul {\n    list-style: disc;\n    padding-inline-start: var(--nano-spacing-md);\n  }\n  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details ul li {\n    font-size: var(--nano-font-size-xs);\n  }\n}\n@layer components {\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) {\n    --padding: inherit;\n    display: block;\n    border-block-start: 1px solid var(--nano-color-neutral-200);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not(:has(+ nano-nav-item), :has(+ nano-dropdown), :has(+ nano-content-links)) {\n    border-block-end: 1px solid var(--nano-color-neutral-200);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger), :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [part~=\"trigger\"] {\n    font-size: var(--nano-font-size-small);\n    line-height: var(--nano-line-height-normal);\n    letter-spacing: var(--nano-letter-spacing-loose);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)[checkbox]::part(label)::before, :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)[checkbox] [part~=\"label\"]::before {\n    content: \"\";\n    display: inline-block;\n    vertical-align: middle;\n    background-size: cover;\n    -webkit-mask-repeat: no-repeat;\n            mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n            mask-position: center;\n    inline-size: 0.8em;\n    block-size: 0.8em;\n    -webkit-mask-image: var(--nano-component-icon-check);\n            mask-image: var(--nano-component-icon-check);\n    background-color: var(--icon-color);\n    opacity: 0;\n    margin-inline-end: var(--nano-spacing-sm);\n    align-content: center;\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)[checkbox][selected]::part(label)::before, :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)[checkbox][selected] [part~=\"label\"]::before {\n    opacity: 1;\n  }\n  :where(nano-menu, .nano-menu) a {\n    font-size: calc(var(--font-size) - 0.125rem);\n    color: var(--nano-color-primary-1100);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-icon, .nano-icon) {\n    color: var(--icon-color);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger), :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [part~=\"trigger\"] {\n    --icon-color: var(--nano-color-primary-1000);\n    color: var(--nano-color-neutral-1400);\n    font-size: var(--font-size);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not([disabled])::part(trigger):hover:not(:focus-visible), :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not([disabled]) [part~=\"trigger\"]:hover:not(:focus-visible) {\n    --icon-color: var(--nano-color-primary-1100);\n    color: var(--nano-color-base-1000);\n    background-color: var(--nano-color-neutral-100);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not([disabled])::part(trigger):active:not(:focus-visible), :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not([disabled]) [part~=\"trigger\"]:active:not(:focus-visible) {\n    --icon-color: var(--nano-color-primary-800);\n    color: var(--nano-color-base-1000);\n    background-color: var(--nano-color-neutral-200);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger):focus-visible, :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [part~=\"trigger\"]:focus-visible {\n    --icon-color: var(--nano-color-base-0);\n    outline: none;\n    background-color: var(--nano-color-primary-1000);\n    color: var(--nano-color-base-0);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger):focus-visible:active, :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [part~=\"trigger\"]:focus-visible:active {\n    background-color: var(--nano-color-primary-1200);\n  }\n  :where(nano-menu, .nano-menu) nano-content-links a::after {\n    background-color: var(--icon-color);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-dropdown, .nano-dropdown) {\n    display: contents;\n  }\n  :where(nano-menu, .nano-menu) :where(nano-dropdown, .nano-dropdown) :where(nano-nav-item, .nano-nav-item) {\n    --padding: var(--nav-item-padding);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(modal), :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [part~=\"modal\"] {\n    position: absolute;\n    min-block-size: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    inline-size: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity var(--nano-transition-x-fast) ease, transform var(--nano-transition-fast) ease;\n    transform: translate3d(100%, 0, 0);\n    background: var(--background);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(modal modal--open), :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [part~=\"modal modal--open\"] {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n    transition: opacity var(--nano-transition-x-fast) ease, transform var(--nano-transition-fast) ease;\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [slot=close-button] {\n    padding: var(--padding);\n    display: flex;\n    gap: var(--nano-spacing-md);\n    align-items: center;\n    cursor: pointer;\n    inline-size: 100%;\n    border-block-start: 1px solid var(--nano-color-neutral-200);\n  }\n  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [slot=close-button]::before {\n    content: \"\";\n    margin-inline-start: 0;\n    background-size: cover;\n    inline-size: 1em;\n    block-size: 1em;\n    -webkit-mask-image: var(--nano-component-icon-caret);\n            mask-image: var(--nano-component-icon-caret);\n    -webkit-mask-repeat: no-repeat;\n            mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n            mask-position: center;\n    transform-origin: center;\n    rotate: 180deg;\n    background-color: var(--icon-color);\n  }\n}\n@layer components {\n  nano-icon-item {\n    --icon-dims: var(--nano-pictogram-size-large);\n    display: grid;\n    grid-template-columns: 1fr;\n    justify-items: center;\n    inline-size: 100%;\n    gap: var(--nano-spacing-md);\n  }\n  nano-icon-item[size=large] {\n    --icon-dims: var(--nano-pictogram-size-x-large);\n  }\n  nano-icon-item:has([slot=icon]):has([slot=heading]), nano-icon-item:has([slot=icon]):has([slot=content]) {\n    grid-template-rows: repeat(2, min-content);\n  }\n  nano-icon-item:has([slot=icon]):has([slot=heading]):has([slot=content]) {\n    grid-template-rows: repeat(3, min-content);\n  }\n  nano-icon-item nano-icon {\n    --icon-size: var(--icon-dims);\n  }\n  nano-icon-item a:not(p > a),\n  nano-icon-item [slot=heading] {\n    all: unset;\n    font-weight: var(--nano-font-weight-normal);\n    font-size: var(--nano-font-size-medium);\n    line-height: var(--nano-line-height-dense);\n    color: var(--nano-color-neutral-1400);\n    text-align: center;\n  }\n  nano-icon-item p[slot=content] {\n    all: unset;\n    font-size: var(--nano-font-size-small);\n    line-height: var(--nano-line-height-normal);\n    letter-spacing: var(--nano-letter-spacing-loose);\n    text-align: center;\n  }\n  nano-icon-item [slot=icon] {\n    color: var(--nano-color-primary-1000);\n  }\n  nano-icon-item[landscape] {\n    justify-items: start;\n    grid-template-columns: min-content 1fr !important;\n    row-gap: var(--nano-spacing-sm);\n  }\n  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]), nano-icon-item[landscape]:has([slot=icon]):has([slot=content]) {\n    grid-template-rows: min-content;\n  }\n  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]) [slot=heading],\n  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]) p[slot=content], nano-icon-item[landscape]:has([slot=icon]):has([slot=content]) [slot=heading],\n  nano-icon-item[landscape]:has([slot=icon]):has([slot=content]) p[slot=content] {\n    grid-row: 1;\n    align-self: center;\n  }\n  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]) {\n    grid-template-rows: min-content 1fr;\n  }\n  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]) a,\n  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]) [slot=heading] {\n    grid-row: 1;\n  }\n  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]) p[slot=content] {\n    grid-row: 2;\n  }\n  nano-icon-item[landscape] nano-icon[slot=icon] {\n    grid-column: 1;\n  }\n  nano-icon-item[landscape] [slot=icon] {\n    grid-column: 1;\n    grid-row: 1/-1;\n  }\n  nano-icon-item[landscape] a,\n  nano-icon-item[landscape] [slot=heading] {\n    text-align: start;\n    align-self: center;\n    grid-row: 1;\n    grid-column: 2;\n  }\n  nano-icon-item[landscape] p[slot=content] {\n    text-align: start;\n    grid-row: 2;\n    grid-column: 2;\n  }\n  nano-icon-item a,\n  nano-icon-item a > [slot=heading] {\n    cursor: pointer;\n    text-decoration: underline;\n    color: var(--nano-color-primary-1000);\n  }\n  nano-icon-item a:hover {\n    color: var(--nano-color-primary-1200);\n  }\n  nano-icon-item a:hover [slot=heading] {\n    color: var(--nano-color-primary-1200);\n  }\n  nano-icon-item:has(a:hover) nano-icon {\n    color: var(--nano-color-primary-1200);\n  }\n}\n:where(nano-tab-group, .nano-tab-group)[equal-tab-size] .nano-tab {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n}\n:where(nano-tab-group, .nano-tab-group)[placement=start][equal-tab-size] .nano-tab {\n  justify-content: flex-end;\n}\n:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab {\n  border-block-end: none;\n  border-inline-end: var(--border);\n}\n:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab::part(base), :where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab [part~=\"base\"] {\n  justify-content: end;\n}\n:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab::part(label), :where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab [part~=\"label\"] {\n  align-items: flex-end;\n}\n:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab:not([disabled]):hover {\n  border-color: inherit;\n}\n:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab:not([disabled])[active] {\n  border-color: inherit;\n}\n:where(nano-tab-group, .nano-tab-group)[placement=top][size=large]::part(tabs__wrapper), :where(nano-tab-group, .nano-tab-group)[placement=top][size=large] [part~=\"tabs__wrapper\"] {\n  --scroll-btn-size: 2rem;\n}\n:where(nano-tab-group, .nano-tab-group)[placement=top][size=large] .nano-tab {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-l);\n  line-height: var(--nano-line-height-dense);\n  --padding: 1.5625rem;\n}\n\n@layer components {\n  :where(nano-tooltip, .nano-tooltip) [slot=content], :where(nano-tooltip, .nano-tooltip) [slot=content] * {\n    font-size: var(--nano-font-size-2xs);\n  }\n  :where(nano-tooltip, .nano-tooltip) ul[slot=content] {\n    margin-block: 0;\n    padding-inline: 0;\n    margin-inline: var(--nano-spacing-md);\n  }\n  :where(nano-tooltip, .nano-tooltip) [slot=content] li {\n    margin-block-end: 0;\n  }\n}\n@layer components {\n  :where(nano-table, .nano-table) {\n    --table-padding: var(--nano-spacing-md);\n    --table-compact-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));\n    --table-border-color: var(--nano-color-neutral-200);\n    --table-border-color-header: var(--nano-color-primary-1000);\n    --table-background: var(--nano-color-base-0);\n    --table-wrapper-max-height: 80vh;\n    --table-wrapper-max-width: 100%;\n    --isLtR: 1;\n    overflow-y: clip;\n    display: block;\n    container-type: inline-size;\n  }\n  :where(nano-table, .nano-table):dir(rtl) {\n    --isLtR: -1;\n  }\n  :where(nano-table, .nano-table)[compact]:not([compact=false], [compact=auto]) {\n    --table-padding: var(--table-compact-padding);\n  }\n  @media (width <= 500px) {\n    :where(nano-table, .nano-table)[compact=auto] {\n      --table-padding: var(--table-compact-padding);\n    }\n  }\n  @container (width <= 500px) {\n    :where(nano-table, .nano-table)[compact=auto] .nano-table__overflow {\n      --table-padding: var(--table-compact-padding);\n    }\n  }\n  :where(nano-table, .nano-table):not([scrollable=false]) {\n    overflow-y: visible;\n  }\n  :where(nano-table, .nano-table):not([scrollable=false]):has([sticky=start], [sticky=end]) .nano-masked-overflow {\n    --fade-size: 0;\n  }\n  :where(nano-table, .nano-table):not([scrollable=false]):not(.nano-table--props-ready) {\n    overflow: auto;\n    scrollbar-width: thin;\n    max-inline-size: var(--table-wrapper-max-width);\n    max-block-size: var(--table-wrapper-max-height);\n  }\n  :where(nano-table, .nano-table):not([scrollable=false]) .nano-table__overflow {\n    max-inline-size: var(--table-wrapper-max-width);\n    max-block-size: var(--table-wrapper-max-height);\n    position: relative;\n  }\n  :where(nano-table, .nano-table):not([scrollable=false]) table {\n    margin-block-end: var(--nano-spacing-l);\n  }\n  :where(nano-table, .nano-table) tr[clickable] {\n    cursor: pointer;\n  }\n  :where(nano-table, .nano-table) tr[clickable]:not([sticky]) {\n    position: relative;\n  }\n  :where(nano-table, .nano-table) tr[clickable]:focus-within {\n    --table-background: var(--nano-color-primary-50);\n  }\n  :where(nano-table, .nano-table) tr[clickable]:hover {\n    --table-background: var(--nano-color-primary-75);\n  }\n  :where(nano-table, .nano-table) tr[clickable] input[type=checkbox]::after,\n  :where(nano-table, .nano-table) tr[clickable] nano-checkbox::after,\n  :where(nano-table, .nano-table) tr[clickable] a::after,\n  :where(nano-table, .nano-table) tr[clickable] button::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n  }\n  :where(nano-table, .nano-table) tr[sticky] {\n    position: sticky;\n    container-type: scroll-state;\n    inset-block-start: var(--sticky-top, 0);\n  }\n  :where(nano-table, .nano-table) tfoot tr[sticky] {\n    inset-block-end: 0;\n  }\n  :where(nano-table, .nano-table) tfoot tr[sticky],\n  :where(nano-table, .nano-table) thead tr[sticky] {\n    z-index: 10;\n  }\n  :where(nano-table, .nano-table) tbody tr[sticky] {\n    z-index: 5;\n    overflow-y: clip;\n  }\n  @container scroll-state(stuck: top) {\n    :where(nano-table, .nano-table) tbody tr[sticky] td, :where(nano-table, .nano-table) tbody tr[sticky] th {\n      border-block-end: 1px solid var(--table-border-color-header);\n    }\n  }\n  @supports not (container-type: scroll-state) {\n    :where(nano-table, .nano-table) tbody tr[sticky] td, :where(nano-table, .nano-table) tbody tr[sticky] th {\n      border-block-end: 1px solid var(--table-border-color-header);\n    }\n  }\n  :where(nano-table, .nano-table) tbody tr[sticky] td[sticky],\n  :where(nano-table, .nano-table) tbody tr[sticky] th[sticky] {\n    overflow-y: clip;\n  }\n  :where(nano-table, .nano-table) tbody tr[sticky] td[sticky]::after,\n  :where(nano-table, .nano-table) tbody tr[sticky] th[sticky]::after {\n    content: \"\";\n    visibility: hidden;\n    inline-size: 10px;\n    inset-block-start: 0;\n    block-size: var(--section-height);\n    position: absolute;\n  }\n  @container scroll-state(stuck: left) {\n    :where(nano-table, .nano-table) tbody tr[sticky] td[sticky]::after,\n    :where(nano-table, .nano-table) tbody tr[sticky] th[sticky]::after {\n      visibility: visible;\n    }\n  }\n  @container scroll-state(stuck: right) {\n    :where(nano-table, .nano-table) tbody tr[sticky] td[sticky]::after,\n    :where(nano-table, .nano-table) tbody tr[sticky] th[sticky]::after {\n      visibility: visible;\n    }\n  }\n  :where(nano-table, .nano-table) tbody tr[sticky] [sticky=start]::after {\n    inset-inline-end: 0;\n    box-shadow: calc(4px * var(--isLtR)) -3px 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%);\n  }\n  :where(nano-table, .nano-table) tbody tr[sticky] [sticky=end]::after {\n    inset-inline-start: 0;\n    box-shadow: calc(-4px * var(--isLtR)) -3px 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%);\n  }\n  @container (width <= 500px) {\n    :where(nano-table, .nano-table) .nano-table__overflow td[sticky], :where(nano-table, .nano-table) .nano-table__overflow th[sticky] {\n      --sticky-start: 0px !important;\n      --sticky-end: 0px !important;\n    }\n    :where(nano-table, .nano-table) .nano-table__overflow td[sticky]:not(:first-of-type), :where(nano-table, .nano-table) .nano-table__overflow th[sticky]:not(:first-of-type) {\n      position: initial !important;\n      z-index: initial !important;\n    }\n  }\n  @media (width <= 500px) {\n    :where(nano-table, .nano-table) td[sticky], :where(nano-table, .nano-table) th[sticky] {\n      --sticky-start: 0px !important;\n      --sticky-end: 0px !important;\n    }\n    :where(nano-table, .nano-table) td[sticky]:not(:first-of-type), :where(nano-table, .nano-table) th[sticky]:not(:first-of-type) {\n      position: initial !important;\n      z-index: initial !important;\n    }\n  }\n  :where(nano-table, .nano-table) :where(thead, tbody) td[sticky], :where(nano-table, .nano-table) th[sticky] {\n    position: sticky;\n    container-type: scroll-state;\n    z-index: 2;\n  }\n  @supports not (container-type: scroll-state) {\n    :where(nano-table, .nano-table) :where(thead, tbody) td[sticky]::after, :where(nano-table, .nano-table) th[sticky]::after {\n      content: \"\";\n      position: absolute;\n      box-shadow: 14px 0 14px 0 var(--table-background);\n      inset-inline: auto 0;\n      block-size: calc(100% - var(--nano-spacing-md));\n      inset-block-start: calc(var(--nano-spacing-md) / 2);\n      inline-size: var(--nano-spacing-md);\n    }\n    :where(nano-table, .nano-table) :where(thead, tbody) td[sticky]:is([sticky=end])::after, :where(nano-table, .nano-table) th[sticky]:is([sticky=end])::after {\n      box-shadow: -14px 0 14px 0 var(--table-background);\n      inset-inline: 0 auto;\n    }\n  }\n  :where(nano-table, .nano-table) td[sticky=start], :where(nano-table, .nano-table) th[sticky=start] {\n    inset-inline-start: var(--sticky-start, 0);\n  }\n  :where(nano-table, .nano-table) td[sticky=end], :where(nano-table, .nano-table) th[sticky=end] {\n    inset-inline-end: var(--sticky-end, 0);\n    z-index: 3;\n  }\n  @supports (container-type: scroll-state) {\n    :where(nano-table, .nano-table) :where(thead, tbody) tr:has([sticky=start], [sticky=end]):first-of-type [sticky=start]::after, :where(nano-table, .nano-table) :where(thead, tbody) tr:has([sticky=start], [sticky=end]):first-of-type [sticky=end]::after {\n      content: \"\";\n      visibility: hidden;\n      inline-size: 10px;\n      inset-block-start: 0;\n      block-size: var(--section-height);\n      position: absolute;\n    }\n    @container scroll-state(stuck: left) {\n      :where(nano-table, .nano-table) :where(thead, tbody) tr:has([sticky=start], [sticky=end]):first-of-type [sticky=start]::after, :where(nano-table, .nano-table) :where(thead, tbody) tr:has([sticky=start], [sticky=end]):first-of-type [sticky=end]::after {\n        visibility: visible;\n      }\n    }\n    @container scroll-state(stuck: right) {\n      :where(nano-table, .nano-table) :where(thead, tbody) tr:has([sticky=start], [sticky=end]):first-of-type [sticky=start]::after, :where(nano-table, .nano-table) :where(thead, tbody) tr:has([sticky=start], [sticky=end]):first-of-type [sticky=end]::after {\n        visibility: visible;\n      }\n    }\n    :where(nano-table, .nano-table) :where(thead, tbody) tr:has([sticky=start], [sticky=end]):first-of-type [sticky=start]::after {\n      inset-inline-end: 0;\n      box-shadow: calc(4px * var(--isLtR)) 0 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%);\n    }\n    :where(nano-table, .nano-table) :where(thead, tbody) tr:has([sticky=start], [sticky=end]):first-of-type [sticky=end]::after {\n      inset-inline-start: 0;\n      box-shadow: calc(-4px * var(--isLtR)) 0 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%);\n    }\n  }\n}\n@layer components {\n  :root {\n    --nano-component-icon-chevron: url(\"data:image/svg+xml;charset=utf-8,<svg%20viewBox='0%200%2016%2016'%20xmlns='http://www.w3.org/2000/svg'><g><path%20fill='white'%20d='M4.18457%2015.8496C4.06179%2015.7374%204.00044%2015.584%204.00044%2015.43C4.00044%2015.291%204.05065%2015.1521%204.15221%2015.0421L10.6195%208.00301L4.15207%200.959231C3.9378%200.727093%203.9512%200.364958%204.18443%200.151748C4.41655%20-0.0625328%204.77688%20-0.0480332%204.99114%200.183555L11.8477%207.61197C12.0508%207.83182%2012.0508%208.16767%2011.8477%208.38766L4.99114%2015.8161C4.77594%2016.046%204.41669%2016.0639%204.18457%2015.8496Z'/></g></svg>\");\n    --nano-component-icon-download: url(\"data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='white'%20d='M272%2016c0-8.8-7.2-16-16-16s-16%207.2-16%2016l0%20313.4L139.3%20228.7c-6.2-6.2-16.4-6.2-22.6%200s-6.2%2016.4%200%2022.6l128%20128c6.2%206.2%2016.4%206.2%2022.6%200l128-128c6.2-6.2%206.2-16.4%200-22.6s-16.4-6.2-22.6%200L272%20329.4%20272%2016zM140.1%20320L64%20320c-35.3%200-64%2028.7-64%2064l0%2064c0%2035.3%2028.7%2064%2064%2064l384%200c35.3%200%2064-28.7%2064-64l0-64c0-35.3-28.7-64-64-64l-76.1%200-32%2032L448%20352c17.7%200%2032%2014.3%2032%2032l0%2064c0%2017.7-14.3%2032-32%2032L64%20480c-17.7%200-32-14.3-32-32l0-64c0-17.7%2014.3-32%2032-32l108.1%200-32-32zM432%20416a24%2024%200%201%200%20-48%200%2024%2024%200%201%200%2048%200z'/></svg>\");\n    --nano-component-icon-open: url(\"data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='white'%20d='M336%200c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016l121.4%200L212.7%20276.7c-6.2%206.2-6.2%2016.4%200%2022.6s16.4%206.2%2022.6%200L480%2054.6%20480%20176c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16l0-160c0-8.8-7.2-16-16-16L336%200zM64%2032C28.7%2032%200%2060.7%200%2096L0%20448c0%2035.3%2028.7%2064%2064%2064l352%200c35.3%200%2064-28.7%2064-64l0-144c0-8.8-7.2-16-16-16s-16%207.2-16%2016l0%20144c0%2017.7-14.3%2032-32%2032L64%20480c-17.7%200-32-14.3-32-32L32%2096c0-17.7%2014.3-32%2032-32l144%200c8.8%200%2016-7.2%2016-16s-7.2-16-16-16L64%2032z'/></svg>\");\n    --nano-component-icon-check: url(\"data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'><path%20d='M443.3%20100.7c6.2%206.2%206.2%2016.4%200%2022.6l-272%20272c-6.2%206.2-16.4%206.2-22.6%200l-144-144c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L160%20361.4%20420.7%20100.7c6.2-6.2%2016.4-6.2%2022.6%200z'/></svg>\");\n    --nano-component-icon-caret: url(\"data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20512'><path%20d='M246.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8%2016.6-19.8%2029.6l0%20256c0%2012.9%207.8%2024.6%2019.8%2029.6s25.7%202.2%2034.9-6.9l128-128z'/></svg>\");\n  }\n  nano-intersection-observe,\n  nano-resize-observe,\n  nano-global-search-results,\n  nano-cta,\n  nano-card,\n  nano-tag,\n  nano-content-links,\n  nano-badge,\n  nano-avatar,\n  nano-icon-item,\n  nano-masked-overflow,\n  nano-table {\n    visibility: visible !important;\n  }\n  body:not(.nano-eager) nano-algolia-filter,\n  body:not(.nano-eager) nano-algolia-input,\n  body:not(.nano-eager) nano-algolia-pagination,\n  body:not(.nano-eager) nano-algolia-results,\n  body:not(.nano-eager) nano-details,\n  body:not(.nano-eager) nano-accordion,\n  body:not(.nano-eager) nano-grid-item,\n  body:not(.nano-eager) nano-menu,\n  body:not(.nano-eager) nano-range,\n  body:not(.nano-eager) nano-rating,\n  body:not(.nano-eager) nano-slide,\n  body:not(.nano-eager) nano-slides,\n  body:not(.nano-eager) nano-date-input,\n  body:not(.nano-eager) nano-global-nav,\n  body:not(.nano-eager) nano-menu-drawer,\n  body:not(.nano-eager) nano-checkbox,\n  body:not(.nano-eager) nano-checkbox-group,\n  body:not(.nano-eager) nano-grid,\n  body:not(.nano-eager) nano-option,\n  body:not(.nano-eager) nano-algolia,\n  body:not(.nano-eager) nano-date-picker,\n  body:not(.nano-eager) nano-select,\n  body:not(.nano-eager) nano-dropdown,\n  body:not(.nano-eager) nano-nav-item,\n  body:not(.nano-eager) nano-input,\n  body:not(.nano-eager) nano-icon,\n  body:not(.nano-eager) nano-tab-content,\n  body:not(.nano-eager) nano-tab,\n  body:not(.nano-eager) nano-hero,\n  body:not(.nano-eager) nano-img,\n  body:not(.nano-eager) nano-datalist,\n  body:not(.nano-eager) nano-split-pane,\n  body:not(.nano-eager) nano-file-upload,\n  body:not(.nano-eager) nano-data-table,\n  body:not(.nano-eager) nano-alert,\n  body:not(.nano-eager) nano-dialog,\n  body:not(.nano-eager) nano-drawer,\n  body:not(.nano-eager) nano-footer,\n  body:not(.nano-eager) nano-in-page-nav,\n  body:not(.nano-eager) nano-collapsible-comparison,\n  body:not(.nano-eager) nano-breadcrumb {\n    visibility: hidden;\n  }\n  body:not(.nano-eager) .hydrated {\n    visibility: inherit;\n  }\n  nano-alert:not(.hydrated):not([open]),\n  nano-dialog:not(.hydrated),\n  nano-drawer:not(.hydrated) {\n    display: none;\n  }\n  nano-alert[open]:not(.hydrated) {\n    display: block;\n    min-height: calc(var(--nano-pictogram-size-large) + var(--nano-spacing-md) * 2);\n  }\n  nano-tooltip:not(.hydrated) [slot=content] {\n    display: none;\n  }\n  nano-animation {\n    visibility: inherit !important;\n  }\n  nano-dropdown {\n    visibility: inherit !important;\n  }\n  nano-dropdown:not(.hydrated) :not([slot=trigger]) {\n    display: none;\n  }\n  nano-slides:not([ready]) {\n    opacity: 0;\n  }\n  nano-slide:not([ready]) {\n    opacity: 0;\n    block-size: 1px;\n    display: block;\n  }\n  @supports (scrollbar-gutter: stable) {\n    .nano-scroll-lock {\n      scrollbar-gutter: var(--nano-scroll-lock-gutter) !important;\n    }\n    .nano-scroll-lock body {\n      overflow: hidden !important;\n    }\n  }\n  /** This can go away once Safari has scrollbar-gutter support. */\n  @supports not (scrollbar-gutter: stable) {\n    .nano-scroll-lock body {\n      padding-inline-end: var(--nano-scroll-lock-size) !important;\n      overflow: hidden !important;\n    }\n  }\n}";
+const globalStyles = "";
 
 /*
- Stencil Client Platform v4.35.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.35.1-dev.1750682262.1ce9541 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -1203,6 +1174,115 @@ var uniqueTime = (key, measureText) => {
     };
   }
 };
+var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
+var registerStyle = (scopeId2, cssText, allowCS) => {
+  let style = styles.get(scopeId2);
+  if (supportsConstructableStylesheets && allowCS) {
+    style = style || new CSSStyleSheet();
+    if (typeof style === "string") {
+      style = cssText;
+    } else {
+      style.replaceSync(cssText);
+    }
+  } else {
+    style = cssText;
+  }
+  styles.set(scopeId2, style);
+};
+var addStyle = (styleContainerNode, cmpMeta, mode) => {
+  var _a;
+  const scopeId2 = getScopeId(cmpMeta);
+  const style = styles.get(scopeId2);
+  if (!win.document) {
+    return scopeId2;
+  }
+  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
+  if (style) {
+    if (typeof style === "string") {
+      styleContainerNode = styleContainerNode.head || styleContainerNode;
+      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+      let styleElm;
+      if (!appliedStyles) {
+        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
+      }
+      if (!appliedStyles.has(scopeId2)) {
+        if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
+          styleElm.innerHTML = style;
+        } else {
+          styleElm = win.document.createElement("style");
+          styleElm.innerHTML = style;
+          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
+          if (nonce != null) {
+            styleElm.setAttribute("nonce", nonce);
+          }
+          if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
+            if (styleContainerNode.nodeName === "HEAD") {
+              const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
+              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
+              styleContainerNode.insertBefore(
+                styleElm,
+                (referenceNode2 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
+              );
+            } else if ("host" in styleContainerNode) {
+              if (supportsConstructableStylesheets) {
+                const stylesheet = new CSSStyleSheet();
+                stylesheet.replaceSync(style);
+                styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
+              } else {
+                const existingStyleContainer = styleContainerNode.querySelector("style");
+                if (existingStyleContainer) {
+                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
+                } else {
+                  styleContainerNode.prepend(styleElm);
+                }
+              }
+            } else {
+              styleContainerNode.append(styleElm);
+            }
+          }
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            styleContainerNode.insertBefore(styleElm, null);
+          }
+        }
+        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
+          styleElm.innerHTML += SLOT_FB_CSS;
+        }
+        if (appliedStyles) {
+          appliedStyles.add(scopeId2);
+        }
+      }
+    } else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
+      styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+    }
+  }
+  return scopeId2;
+};
+var attachStyles = (hostRef) => {
+  const cmpMeta = hostRef.$cmpMeta$;
+  const elm = hostRef.$hostElement$;
+  const flags = cmpMeta.$flags$;
+  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
+  const scopeId2 = addStyle(
+    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+    cmpMeta);
+  if (flags & 10 /* needsScopedEncapsulation */) {
+    elm["s-sc"] = scopeId2;
+    elm.classList.add(scopeId2 + "-h");
+  }
+  endAttachStyles();
+};
+var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
+var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
+var hydrateScopedToShadow = () => {
+  if (!win.document) {
+    return;
+  }
+  const styles2 = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
+  let i2 = 0;
+  for (; i2 < styles2.length; i2++) {
+    registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
+  }
+};
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -1317,7 +1397,7 @@ var convertToPrivate = (node) => {
 
 // src/runtime/client-hydrate.ts
 var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-  var _a;
+  var _a, _b;
   const endHydrate = createTime("hydrateClient", tagName);
   const shadowRoot = hostElm.shadowRoot;
   const childRenderNodes = [];
@@ -1328,7 +1408,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   vnode.$elm$ = hostElm;
   const members = Object.entries(((_a = hostRef.$cmpMeta$) == null ? void 0 : _a.$members$) || {});
   members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
-    var _b;
+    var _b2;
     if (!(memberFlags & 31 /* Prop */)) {
       return;
     }
@@ -1338,7 +1418,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       const attrPropVal = parsePropertyValue(
         attrVal,
         memberFlags);
-      (_b = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b.set(memberName, attrPropVal);
+      (_b2 = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b2.set(memberName, attrPropVal);
     }
   });
   let scopeId2;
@@ -1379,6 +1459,14 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       if (childRenderNode.$tag$ === "slot") {
         node["s-cr"] = hostElm["s-cr"];
       }
+    } else if (((_b = childRenderNode.$tag$) == null ? void 0 : _b.toString().includes("-")) && !childRenderNode.$elm$.shadowRoot) {
+      const cmpMeta = getHostRef(childRenderNode.$elm$);
+      const scopeId3 = getScopeId(
+        cmpMeta.$cmpMeta$);
+      const styleSheet = win.document.querySelector(`style[sty-id="${scopeId3}"]`);
+      if (styleSheet) {
+        hostElm.shadowRoot.append(styleSheet.cloneNode(true));
+      }
     }
     if (childRenderNode.$tag$ === "slot") {
       childRenderNode.$name$ = childRenderNode.$elm$["s-sn"] || childRenderNode.$elm$["name"] || null;
@@ -1394,7 +1482,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
     }
     if (orgLocationNode && orgLocationNode.isConnected) {
-      if (shadowRoot && orgLocationNode["s-en"] === "") {
+      if (orgLocationNode.parentElement.shadowRoot && orgLocationNode["s-en"] === "") {
         orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
       }
       orgLocationNode.parentNode.removeChild(orgLocationNode);
@@ -1402,7 +1490,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         node["s-oo"] = parseInt(childRenderNode.$nodeId$);
       }
     }
-    plt.$orgLocNodes$.delete(orgLocationId);
+    if (orgLocationNode && !orgLocationNode["s-id"]) plt.$orgLocNodes$.delete(orgLocationId);
   }
   const hosts = [];
   const snLen = slottedNodes.length;
@@ -1424,11 +1512,13 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       if (!hosts[slottedItem.hostId]) continue;
       const hostEle = hosts[slottedItem.hostId];
       if (!hostEle.shadowRoot || !shadowRoot) {
-        slottedItem.slot["s-cr"] = hostEle["s-cr"];
-        if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) {
-          slottedItem.slot["s-cr"] = hostEle;
-        } else {
-          slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
+        if (!slottedItem.slot["s-cr"]) {
+          slottedItem.slot["s-cr"] = hostEle["s-cr"];
+          if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) {
+            slottedItem.slot["s-cr"] = hostEle;
+          } else {
+            slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
+          }
         }
         addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
         {
@@ -1445,7 +1535,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
     });
   }
-  if (shadowRoot && !shadowRoot.childNodes.length) {
+  if (shadowRoot) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
     if (rnLen) {
@@ -1456,14 +1546,13 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
           if (node.nodeType === 1 /* ElementNode */ && node.slot && node.hidden) {
             node.removeAttribute("hidden");
-          } else if (node.nodeType === 8 /* CommentNode */ || node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+          } else if (node.nodeType === 8 /* CommentNode */ && !node.nodeValue || node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
             node.parentNode.removeChild(node);
           }
         }
       });
     }
   }
-  plt.$orgLocNodes$.delete(hostElm["s-id"]);
   hostRef.$hostElement$ = hostElm;
   endHydrate();
 };
@@ -1495,7 +1584,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         if (!parentVNode.$children$) {
           parentVNode.$children$ = [];
         }
-        if (scopeId2) {
+        if (scopeId2 && childIdSplt[0] === hostId) {
           node["s-si"] = scopeId2;
           childVNode.$attrs$.class += " " + scopeId2;
         }
@@ -1625,7 +1714,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
     vnode.$index$ = "0";
     parentVNode.$children$ = [vnode];
   } else {
-    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim() && !node["s-nr"]) {
       node.remove();
     }
   }
@@ -1683,10 +1772,10 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
     if (childVNode.$name$) {
       childVNode.$elm$.setAttribute("name", slotName);
     }
-    if (parentNodeId && parentNodeId !== childVNode.$hostId$) {
-      parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
+    if (parentVNode.$elm$.shadowRoot && parentNodeId && parentNodeId !== childVNode.$hostId$) {
+      internalCall(parentVNode.$elm$, "insertBefore")(slot, internalCall(parentVNode.$elm$, "children")[0]);
     } else {
-      node.parentNode.insertBefore(slot, node);
+      internalCall(internalCall(node, "parentNode"), "insertBefore")(slot, node);
     }
     addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
     node.remove();
@@ -1712,7 +1801,7 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
 var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) => {
   let slottedNode = slotNode.nextSibling;
   slottedNodes[slotNodeId] = slottedNodes[slotNodeId] || [];
-  while (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (slottedNode.nodeType === 8 /* CommentNode */ && slottedNode.nodeValue.indexOf(".") !== 1 || slottedNode.nodeType === 3 /* TextNode */))) {
+  while (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (slottedNode.nodeType === 8 /* CommentNode */ || slottedNode.nodeType === 3 /* TextNode */ || slottedNode.tagName === "SLOT"))) {
     slottedNode["s-sn"] = slotName;
     slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
     slottedNode = slottedNode.nextSibling;
@@ -1786,115 +1875,6 @@ var emitEvent = (elm, name, opts) => {
   elm.dispatchEvent(ev);
   return ev;
 };
-var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
-var registerStyle = (scopeId2, cssText, allowCS) => {
-  let style = styles.get(scopeId2);
-  if (supportsConstructableStylesheets && allowCS) {
-    style = style || new CSSStyleSheet();
-    if (typeof style === "string") {
-      style = cssText;
-    } else {
-      style.replaceSync(cssText);
-    }
-  } else {
-    style = cssText;
-  }
-  styles.set(scopeId2, style);
-};
-var addStyle = (styleContainerNode, cmpMeta, mode) => {
-  var _a;
-  const scopeId2 = getScopeId(cmpMeta);
-  const style = styles.get(scopeId2);
-  if (!win.document) {
-    return scopeId2;
-  }
-  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
-  if (style) {
-    if (typeof style === "string") {
-      styleContainerNode = styleContainerNode.head || styleContainerNode;
-      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-      let styleElm;
-      if (!appliedStyles) {
-        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
-      }
-      if (!appliedStyles.has(scopeId2)) {
-        if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
-          styleElm.innerHTML = style;
-        } else {
-          styleElm = win.document.createElement("style");
-          styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
-          if (nonce != null) {
-            styleElm.setAttribute("nonce", nonce);
-          }
-          if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
-            if (styleContainerNode.nodeName === "HEAD") {
-              const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
-              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
-              styleContainerNode.insertBefore(
-                styleElm,
-                (referenceNode2 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
-              );
-            } else if ("host" in styleContainerNode) {
-              if (supportsConstructableStylesheets) {
-                const stylesheet = new CSSStyleSheet();
-                stylesheet.replaceSync(style);
-                styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
-              } else {
-                const existingStyleContainer = styleContainerNode.querySelector("style");
-                if (existingStyleContainer) {
-                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
-                } else {
-                  styleContainerNode.prepend(styleElm);
-                }
-              }
-            } else {
-              styleContainerNode.append(styleElm);
-            }
-          }
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            styleContainerNode.insertBefore(styleElm, null);
-          }
-        }
-        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
-          styleElm.innerHTML += SLOT_FB_CSS;
-        }
-        if (appliedStyles) {
-          appliedStyles.add(scopeId2);
-        }
-      }
-    } else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
-      styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
-    }
-  }
-  return scopeId2;
-};
-var attachStyles = (hostRef) => {
-  const cmpMeta = hostRef.$cmpMeta$;
-  const elm = hostRef.$hostElement$;
-  const flags = cmpMeta.$flags$;
-  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-  const scopeId2 = addStyle(
-    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
-    cmpMeta);
-  if (flags & 10 /* needsScopedEncapsulation */) {
-    elm["s-sc"] = scopeId2;
-    elm.classList.add(scopeId2 + "-h");
-  }
-  endAttachStyles();
-};
-var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
-var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
-var hydrateScopedToShadow = () => {
-  if (!win.document) {
-    return;
-  }
-  const styles2 = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
-  let i2 = 0;
-  for (; i2 < styles2.length; i2++) {
-    registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
-  }
-};
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
   if (oldValue === newValue) {
     return;
@@ -1905,12 +1885,13 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     const classList = elm.classList;
     const oldClasses = parseClassList(oldValue);
     let newClasses = parseClassList(newValue);
-    if (elm["s-si"] && initialRender) {
-      newClasses.push(elm["s-si"]);
+    if ((elm["s-si"] || elm["s-sc"]) && initialRender) {
+      const scopeId2 = elm["s-sc"] || elm["s-si"];
+      newClasses.push(scopeId2);
       oldClasses.forEach((c) => {
-        if (c.startsWith(elm["s-si"])) newClasses.push(c);
+        if (c.startsWith(scopeId2)) newClasses.push(c);
       });
-      newClasses = [...new Set(newClasses)];
+      newClasses = [...new Set(newClasses)].filter((c) => c);
       classList.add(...newClasses);
     } else {
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
@@ -2735,7 +2716,13 @@ var forceUpdate = (ref) => {
   }
 };
 var appDidLoad = (who) => {
+  var _a;
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
+  {
+    if ((_a = plt.$orgLocNodes$) == null ? void 0 : _a.size) {
+      plt.$orgLocNodes$.clear();
+    }
+  }
 };
 var safeCall = (instance, method, arg, elm) => {
   if (instance && instance[method]) {
@@ -3042,6 +3029,11 @@ var connectedCallback = (elm) => {
         if (// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
           setContentReference(elm);
+        } else if (!(cmpMeta.$flags$ & 4 /* hasSlotRelocation */)) {
+          const commendPlaceholder = elm.firstChild;
+          if ((commendPlaceholder == null ? void 0 : commendPlaceholder.nodeType) === 8 /* CommentNode */ && !commendPlaceholder["s-cn"] && !commendPlaceholder.nodeValue) {
+            elm.removeChild(commendPlaceholder);
+          }
         }
       }
       {