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

package/dist/nano-components/nano-components.css

@@ -1 +1,2025 @@
-:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-toast-stack{position:fixed;z-index:var(--nano-layer-index-modal, 700);inline-size:28rem;max-inline-size:100%;max-block-size:100%;overflow:auto}.nano-toast-stack--tr{inset-block-start:0;inset-inline-end:0}.nano-toast-stack--tl{inset-block-start:0;inset-inline-start:0}.nano-toast-stack--br{inset-block-end:0;inset-inline-end:0}.nano-toast-stack--bl{inset-block-end:0;inset-inline-start:0}.nano-sortable__placeholder{opacity:0}.nano-sortable__dragged{opacity:0.6;cursor:grabbing !important;box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));z-index:1;position:relative}.nano-sortable__keyboard-handle{background:white}.nano-sortable__handle-dragged{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}nano-intersection-observe,nano-resize-observe{visibility:visible !important}body:not(.nano-eager) nano-algolia-filter,body:not(.nano-eager) nano-algolia-input,body:not(.nano-eager) nano-algolia-pagination,body:not(.nano-eager) nano-algolia-results,body:not(.nano-eager) nano-details,body:not(.nano-eager) nano-grid-item,body:not(.nano-eager) nano-menu,body:not(.nano-eager) nano-range,body:not(.nano-eager) nano-rating,body:not(.nano-eager) nano-slide,body:not(.nano-eager) nano-slides,body:not(.nano-eager) nano-date-input,body:not(.nano-eager) nano-global-nav,body:not(.nano-eager) nano-global-search-results,body:not(.nano-eager) nano-menu-drawer,body:not(.nano-eager) nano-checkbox,body:not(.nano-eager) nano-checkbox-group,body:not(.nano-eager) nano-grid,body:not(.nano-eager) nano-option,body:not(.nano-eager) nano-algolia,body:not(.nano-eager) nano-date-picker,body:not(.nano-eager) nano-select,body:not(.nano-eager) nano-dropdown,body:not(.nano-eager) nano-nav-item,body:not(.nano-eager) nano-input,body:not(.nano-eager) nano-icon,body:not(.nano-eager) nano-tab-content,body:not(.nano-eager) nano-tab,body:not(.nano-eager) nano-hero,body:not(.nano-eager) nano-img,body:not(.nano-eager) nano-datalist,body:not(.nano-eager) nano-split-pane,body:not(.nano-eager) nano-file-upload,body:not(.nano-eager) nano-table,body:not(.nano-eager) nano-overflow-nav,body:not(.nano-eager) nano-alert,body:not(.nano-eager) nano-dialog,body:not(.nano-eager) nano-drawer{visibility:hidden}body:not(.nano-eager) nano-alert:not(.hydrated),body:not(.nano-eager) nano-dialog:not(.hydrated),body:not(.nano-eager) nano-drawer:not(.hydrated){display:none}body:not(.nano-eager) .hydrated{visibility:inherit}nano-alert:not(.hydrated),nano-dialog:not(.hydrated),nano-drawer:not(.hydrated){display:none}nano-tooltip:not(.hydrated) [slot=content]{display:none}nano-animation{visibility:inherit !important}nano-dropdown{visibility:inherit !important;display:flex}nano-dropdown:not(.hydrated) :not([slot=trigger]){display:none}html{block-size:100%}[hidden]{display:none !important}nano-slide:not([ready]),nano-slides:not([ready]){opacity:0}@supports (scrollbar-gutter: stable){.nano-scroll-lock{scrollbar-gutter:var(--nano-scroll-lock-gutter) !important}.nano-scroll-lock body{overflow:hidden !important}}@supports not (scrollbar-gutter: stable){.nano-scroll-lock body{padding-inline-end:var(--nano-scroll-lock-size) !important;overflow:hidden !important}}.visually-hidden:not(:focus):not(:active):not(:focus-within){clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}
+:host,
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }: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 {
+  font-weight: var(--nano-font-weight-normal);
+  font-size: var(--nano-font-size-medium);
+  line-height: var(--nano-line-height-normal);
+  letter-spacing: var(--nano-letter-spacing-normal);
+  margin: var(--header-margin);
+}
+
+@layer components {
+  .nano-toast-stack {
+    position: fixed;
+    z-index: var(--nano-z-index-modal);
+    inline-size: 28rem;
+    max-inline-size: 100%;
+    max-block-size: 100%;
+  }
+  .nano-toast-stack--tr {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+  .nano-toast-stack--tl {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+  .nano-toast-stack--br {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+  }
+  .nano-toast-stack--bl {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+}
+@layer components {
+  .nano-sortable__placeholder {
+    opacity: 0;
+  }
+  .nano-sortable__dragged {
+    opacity: 0.6;
+    cursor: grabbing !important;
+    box-shadow: var(--nano-shadow-l2);
+    z-index: 1;
+    position: relative;
+  }
+  .nano-sortable__keyboard-handle {
+    background: var(--nano-color-base-0);
+  }
+  .nano-sortable__handle-dragged {
+    outline: var(--nano-focus-ring);
+    outline-offset: var(--nano-focus-ring-offset);
+  }
+}
+@layer components {
+  nano-cta {
+    --color: var(--nano-color-basic-white);
+    --bg: var(--nano-color-blue-cerulean-1000);
+    --bg-hover: var(--nano-color-blue-cerulean-1100);
+    --bg-active: var(--nano-color-blue-cerulean-1200);
+    --border: 1px solid var(--bg);
+    --icon-size: 1em;
+    --padding-v: 0.4375em;
+    --padding-h: 1.125em;
+    --spinner-size: 1em;
+    --font-size: var(--nano-font-size-small);
+    --line-height: var(--nano-line-height-normal);
+    --gap: var(--nano-spacing-sm);
+    --icon-display: none;
+    --loading-display: none;
+    --loading-opacity: 0;
+    --flip-icon-ltr: 0;
+    --flip-icon-rtl: 1;
+    display: contents;
+  }
+  nano-cta:has(.nano-internal-cta) {
+    display: inline-block;
+  }
+  nano-cta:dir(rtl) {
+    --flip-icon-ltr: 1;
+    --flip-icon-rtl: 0;
+  }
+  nano-cta[group=balanced] {
+    display: inline-grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    gap: var(--gap);
+  }
+  nano-cta[group=balanced] a,
+  nano-cta[group=balanced] button {
+    justify-content: space-evenly;
+  }
+  nano-cta[group=stacked] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+  }
+  nano-cta[secondary]:not([secondary=false]),
+  nano-cta :is([secondary]):not([secondary=false]) {
+    --color: var(--nano-color-primary-1100);
+    --bg: var(--nano-color-base-0);
+    --bg-hover: var(--nano-color-primary-100);
+    --bg-active: var(--nano-color-primary-300);
+    --border: 1px solid var(--color);
+  }
+  nano-cta[theme=success],
+  nano-cta :is([theme=success]) {
+    --color: var(--nano-color-basic-white);
+    --bg: var(--nano-color-success-1000);
+    --bg-hover: var(--nano-color-success-1100);
+    --bg-active: var(--nano-color-success-1200);
+    --border: 1px solid var(--bg);
+  }
+  nano-cta[theme=success][secondary]:not([secondary=false]),
+  nano-cta :is([theme=success][secondary]):not([secondary=false]) {
+    --color: var(--nano-color-success-1100);
+    --bg: var(--nano-color-base-0);
+    --bg-hover: var(--nano-color-success-75);
+    --bg-active: var(--nano-color-success-200);
+    --border: 1px solid var(--color);
+  }
+  nano-cta[theme=danger],
+  nano-cta :is([theme=danger]) {
+    --color: var(--nano-color-basic-white);
+    --bg: var(--nano-color-danger-1000);
+    --bg-hover: var(--nano-color-danger-1100);
+    --bg-active: var(--nano-color-danger-1200);
+    --border: 1px solid var(--bg);
+  }
+  nano-cta[theme=danger][secondary]:not([secondary=false]),
+  nano-cta :is([theme=danger][secondary]):not([secondary=false]) {
+    --color: var(--nano-color-danger-1200);
+    --bg: var(--nano-color-base-0);
+    --bg-hover: var(--nano-color-danger-300);
+    --bg-active: var(--nano-color-danger-400);
+    --border: 1px solid var(--color);
+  }
+  nano-cta[theme=warning],
+  nano-cta :is([theme=warning]) {
+    --color: var(--nano-color-basic-white);
+    --bg: var(--nano-color-warning-1000);
+    --bg-hover: var(--nano-color-warning-1100);
+    --bg-active: var(--nano-color-warning-1200);
+    --border: 1px solid var(--bg);
+  }
+  nano-cta[theme=warning][secondary]:not([secondary=false]),
+  nano-cta :is([theme=warning][secondary]):not([secondary=false]) {
+    --color: var(--nano-color-warning-1100);
+    --bg: var(--nano-color-base-0);
+    --bg-hover: var(--nano-color-warning-200);
+    --bg-active: var(--nano-color-warning-300);
+    --border: 1px solid var(--color);
+  }
+  nano-cta[size=medium],
+  nano-cta :is([size=medium]) {
+    --font-size: var(--nano-font-size-xs);
+    --line-height: var(--nano-line-height-dense);
+    --gap: var(--nano-spacing-xs);
+  }
+  nano-cta[size=small],
+  nano-cta :is([size=small]) {
+    --font-size: var(--nano-font-size-2xs);
+    --line-height: var(--nano-line-height-denser);
+    --gap: var(--nano-spacing-xs);
+    --padding-h: 1em;
+    --padding-v: 0.5em;
+  }
+  nano-cta:is([loading], [loading=true]):not([loading=false]),
+  nano-cta :is([loading], [loading=true]):not([loading=false]) {
+    --text-color: transparent !important;
+    --loading-display: block;
+    --loading-opacity: 1;
+    --bg-hover: var(--bg);
+    --bg-active: var(--bg);
+    cursor: wait;
+  }
+  nano-cta:is([loading], [loading=true]):not([loading=false]) a,
+  nano-cta:is([loading], [loading=true]):not([loading=false]) button,
+  nano-cta :is([loading], [loading=true]):not([loading=false]) a,
+  nano-cta :is([loading], [loading=true]):not([loading=false]) button {
+    --text-color: transparent !important;
+    cursor: wait;
+  }
+  nano-cta :is(button[disabled], button[disabled=true]):not(button[disabled=false]),
+  nano-cta a:not([href]) {
+    --color: var(--nano-color-neutral-1200);
+    --text-color: var(--color);
+    --bg: var(--nano-color-neutral-100);
+    --bg-hover: var(--bg);
+    --bg-active: var(--bg);
+    --border: 1px solid var(--color);
+    cursor: not-allowed;
+  }
+  nano-cta :is(button[disabled], button[disabled=true]):not(button[disabled=false]) a,
+  nano-cta :is(button[disabled], button[disabled=true]):not(button[disabled=false]) button,
+  nano-cta a:not([href]) a,
+  nano-cta a:not([href]) button {
+    cursor: not-allowed;
+  }
+  nano-cta a,
+  nano-cta button {
+    --text-color: var(--color);
+    margin: 0;
+    appearance: none;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    white-space: nowrap;
+    vertical-align: middle;
+    background-color: var(--bg) !important;
+    color: var(--text-color) !important;
+    border-radius: var(--nano-border-radius-pill);
+    line-height: var(--line-height);
+    letter-spacing: var(--nano-letter-spacing-loose);
+    font-size: var(--font-size);
+    padding: var(--padding-v) var(--padding-h);
+    gap: var(--nano-spacing-sm);
+    border: var(--border) !important;
+    transition: color var(--nano-transition-fast) ease;
+    text-decoration: none !important;
+  }
+  nano-cta a:focus-visible,
+  nano-cta button:focus-visible {
+    outline: var(--nano-focus-ring);
+    outline-offset: var(--nano-focus-ring-offset);
+  }
+  nano-cta a:hover,
+  nano-cta button:hover {
+    background-color: var(--bg-hover) !important;
+  }
+  nano-cta a:active,
+  nano-cta button:active {
+    background-color: var(--bg-active) !important;
+  }
+  nano-cta a::before,
+  nano-cta button::before {
+    content: "";
+    display: var(--loading-display);
+    opacity: var(--loading-opacity);
+    position: absolute;
+    padding: 2.5px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    inline-size: var(--spinner-size);
+    background: var(--color);
+    inset: calc(50% - var(--spinner-size) / 2);
+    -webkit-mask: conic-gradient(rgba(0, 0, 0, 0), #000), conic-gradient(#000 0 0) content-box;
+    -webkit-mask-composite: source-out;
+            -webkit-mask: conic-gradient(rgba(0, 0, 0, 0), #000), conic-gradient(#000 0 0) content-box;
+            -webkit-mask-composite: source-out;
+                    mask: conic-gradient(rgba(0, 0, 0, 0), #000) subtract, conic-gradient(#000 0 0) content-box;
+    animation: load 1s linear infinite;
+    transition: all var(--nano-transition-fast) ease;
+    transition-behavior: allow-discrete;
+  }
+  @keyframes load {
+    to {
+      rotate: 1turn;
+    }
+  }
+  nano-cta a::after,
+  nano-cta button::after {
+    content: "";
+    display: var(--icon-display);
+    background-size: cover;
+    inline-size: var(--icon-size);
+    block-size: var(--icon-size);
+    background-color: var(--text-color);
+    -webkit-mask-image: var(--icon-svg);
+            mask-image: var(--icon-svg);
+    transition: color var(--nano-transition-fast) ease;
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+    transform-origin: center;
+    margin-inline-start: auto;
+    rotate: calc(180deg * var(--flip-icon-ltr));
+  }
+  nano-cta a :which(nano-icon, .nano-icon),
+  nano-cta a svg,
+  nano-cta button :which(nano-icon, .nano-icon),
+  nano-cta button svg {
+    color: inherit;
+    inline-size: var(--icon-size);
+    margin: auto 0;
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=forward] {
+    --icon-svg: var(--nano-component-icon-chevron);
+    --icon-display: block;
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=forward] a,
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=forward] button {
+    padding-inline-end: 0.8125em;
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=forward] a::after,
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=forward] button::after {
+    rotate: calc(180deg * var(--flip-icon-ltr));
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=back] {
+    --icon-svg: var(--nano-component-icon-chevron);
+    --icon-display: block;
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=back] a,
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=back] button {
+    padding-inline-start: 0.8125em;
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=back] a::after,
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=back] button::after {
+    rotate: calc(180deg * var(--flip-icon-rtl));
+    order: -1;
+    margin-inline-start: unset;
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=up] {
+    --icon-svg: var(--nano-component-icon-chevron);
+    --icon-display: block;
+    --flip-icon-ltr: 0;
+    --flip-icon-rtl: 0;
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=up] a::after,
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=up] button::after {
+    transform: rotate(270deg);
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=down] {
+    --icon-svg: var(--nano-component-icon-chevron);
+    --icon-display: block;
+    --flip-icon-ltr: 0;
+    --flip-icon-rtl: 0;
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=down] a::after,
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=down] button::after {
+    transform: rotate(90deg);
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=download] {
+    --icon-svg: var(--nano-component-icon-download);
+    --icon-display: block;
+    --flip-icon-ltr: 0;
+    --flip-icon-rtl: 0;
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg))[icon=open] {
+    --icon-svg: var(--nano-component-icon-open);
+    --icon-size: .9em;
+    --icon-display: block;
+    --flip-icon-ltr: 0;
+    --flip-icon-rtl: 0;
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg)):not([icon]) a[href]:not([href=""], [icon], [href^="#"]) {
+    --icon-svg: var(--nano-component-icon-chevron);
+    --icon-display: block;
+    padding-inline-end: 0.8125em;
+  }
+  nano-cta:not([icon=false], :has(a nano-icon, a .nano-icon, a svg)):not([icon]) a[href]:not([href=""], [icon], [href^="#"])[target=_blank] {
+    --icon-svg: var(--nano-component-icon-open);
+    --icon-display: block;
+    --flip-icon-ltr: 0;
+    --flip-icon-rtl: 0;
+    padding-inline-end: var(--padding-h);
+  }
+  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"]) {
+    --icon-svg: var(--nano-component-icon-download);
+    --icon-display: block;
+    --flip-icon-ltr: 0;
+    --flip-icon-rtl: 0;
+    padding-inline-end: var(--padding-h);
+  }
+}
+/** Typography */
+@layer components {
+  nano-card {
+    --color: currentColor;
+    --bg: transparent;
+    --gap: var(--nano-spacing-md);
+    --content-margin: 0;
+    --flip-icon-ltr: 0;
+    container-type: inline-size;
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(197px, 31%) auto;
+    grid-template-rows: repeat(calc(var(--row-count) - 1), auto);
+    gap: var(--gap);
+    background-color: var(--bg);
+    color: var(--color);
+  }
+  nano-card:dir(rtl) {
+    --flip-icon-ltr: 1;
+  }
+  nano-card:has(> :last-child:nth-child(1), > article > :last-child:nth-child(1)) {
+    --row-count: 1;
+  }
+  nano-card:has(> :last-child:nth-child(2), > article > :last-child:nth-child(2)) {
+    --row-count: 2;
+  }
+  nano-card:has(> :last-child:nth-child(3), > article > :last-child:nth-child(3)) {
+    --row-count: 3;
+  }
+  nano-card:has(> :last-child:nth-child(4), > article > :last-child:nth-child(4)) {
+    --row-count: 4;
+  }
+  nano-card:has(> :last-child:nth-child(5), > article > :last-child:nth-child(5)) {
+    --row-count: 5;
+  }
+  nano-card:has(> :last-child:nth-child(6), > article > :last-child:nth-child(6)) {
+    --row-count: 6;
+  }
+  nano-card:has(> :last-child:nth-child(7), > article > :last-child:nth-child(7)) {
+    --row-count: 7;
+  }
+  nano-card * {
+    margin-block: unset;
+    margin-block-start: unset;
+    margin-block-end: unset;
+  }
+  nano-card > *:not([slot]) {
+    display: contents;
+  }
+  nano-card [slot] {
+    display: block;
+  }
+  nano-card [slot]:not([slot=img], ul) {
+    margin-inline: var(--content-margin);
+  }
+  nano-card [slot]:not([slot=img], ul):last-child {
+    margin-block-end: var(--content-margin);
+  }
+  nano-card:not(:has([slot=img])) [slot]:first-child {
+    margin-block-start: var(--content-margin);
+  }
+  nano-card [slot=img] {
+    order: 1;
+  }
+  nano-card [slot=title] {
+    order: 2;
+    text-wrap: balance;
+  }
+  nano-card [slot=content] {
+    order: 3;
+    text-wrap: balance;
+  }
+  nano-card [slot=footer] {
+    order: 4;
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+  }
+  nano-card nano-content-links {
+    --color-border: rgb(var(--nano-color-base-rgb-1000) / 7%);
+  }
+  nano-card address {
+    font-style: normal;
+  }
+  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 {
+    color: var(--color);
+    text-decoration: none;
+  }
+  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] {
+    color: var(--nano-color-primary-1000);
+    text-decoration: underline;
+  }
+  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] {
+    color: var(--color);
+    text-decoration: none;
+  }
+  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 {
+    color: var(--nano-color-primary-1000);
+    text-decoration: underline;
+  }
+  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) button::before,
+  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,
+  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 {
+    content: "";
+    display: block;
+    position: absolute;
+    inset: 0;
+    touch-action: manipulation;
+    cursor: pointer;
+    inline-size: 100%;
+    block-size: 100%;
+    animation: none;
+    border-radius: 0;
+    z-index: var(--enable-card-click);
+  }
+  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 > * {
+    position: static;
+  }
+  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 {
+    box-shadow: var(--nano-shadow-l0);
+    background-color: var(--bg-hover);
+  }
+  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 > * {
+    position: relative;
+    z-index: 2;
+  }
+  nano-card:has(a[slot]):has([slot] a) {
+    --enable-card-click: -1;
+  }
+  nano-card:has([slot=content] a):has([slot=footer] a) {
+    --enable-card-click: -1;
+  }
+  nano-card:not([layout=landscape]) [slot] {
+    grid-column: 1/-1 !important;
+  }
+  nano-card[layout=landscape] [slot] {
+    grid-column: 2;
+  }
+  nano-card[layout=landscape] [slot=img] {
+    grid-column: 1;
+    grid-row: 1/-1;
+  }
+  @container (width < 417px) {
+    nano-card[layout=landscape] [slot] {
+      grid-column: 1/-1 !important;
+    }
+    nano-card[layout=landscape] [slot=img] {
+      grid-column: 1/-1 !important;
+    }
+  }
+  nano-card[variant=product] [slot=title] {
+    display: inline-flex;
+    gap: var(--gap);
+    align-items: center;
+    justify-content: space-between;
+  }
+  nano-card[variant=product] [slot=footer] {
+    justify-content: space-between;
+  }
+  nano-card [slot=title],
+  nano-card [slot=title] > :first-child {
+    font-weight: var(--nano-font-weight-normal);
+    font-size: var(--nano-font-size-l);
+    line-height: var(--nano-line-height-dense);
+  }
+  nano-card [slot=content],
+  nano-card [slot=content] > * {
+    font-size: var(--nano-font-size-small);
+    line-height: var(--nano-line-height-normal);
+    letter-spacing: var(--nano-letter-spacing-loose);
+  }
+  nano-card[size=small] [slot=title],
+  nano-card[size=small] [slot=title] > :first-child {
+    font-size: var(--nano-font-size-small);
+    line-height: var(--nano-line-height-normal);
+    font-weight: var(--nano-font-weight-bold);
+  }
+  nano-card[size=small] [slot=content],
+  nano-card[size=small] [slot=content] > * {
+    font-size: var(--nano-font-size-xs);
+    line-height: var(--nano-line-height-normal);
+    letter-spacing: var(--nano-letter-spacing-loose);
+  }
+  nano-card[variant=product][size=small] {
+    --gap: var(--nano-spacing-sm);
+  }
+  nano-card[variant^=promo] {
+    --content-margin: var(--gap);
+    box-shadow: var(--nano-shadow-l1);
+  }
+  nano-card[variant^=promo] [slot=title],
+  nano-card[variant^=promo] [slot=title]:hover, nano-card[variant^=promo]:hover [slot=title] {
+    color: var(--color) !important;
+    text-decoration: none !important;
+  }
+  nano-card[variant^=promo] nano-cta > * {
+    inline-size: 100%;
+  }
+  nano-card[variant^=promo] [slot=title],
+  nano-card[variant^=promo] [slot=title] > :first-child {
+    font-weight: var(--nano-font-weight-normal);
+    font-size: var(--nano-font-size-medium);
+    line-height: var(--nano-line-height-dense);
+  }
+  nano-card[variant^=promo] [slot=content],
+  nano-card[variant^=promo] [slot=content] > * {
+    font-size: var(--nano-font-size-xs);
+    line-height: var(--nano-line-height-normal);
+    letter-spacing: var(--nano-letter-spacing-loose);
+  }
+  nano-card[variant^=promo]:not(:has(nano-cta)):has(a[slot=title]) a[slot=title] {
+    display: inline-flex;
+    gap: var(--gap);
+  }
+  nano-card[variant^=promo]:not(:has(nano-cta)):has(a[slot=title]) a[slot=title]::after {
+    content: "";
+    display: block;
+    background-size: cover;
+    inline-size: 1em;
+    background-color: var(--color);
+    -webkit-mask-image: var(--nano-component-icon-chevron);
+            mask-image: var(--nano-component-icon-chevron);
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+    transform-origin: center;
+    margin-inline-start: auto;
+    rotate: calc(180deg * var(--flip-icon-ltr));
+  }
+  nano-card[variant=promo] {
+    --bg: var(--nano-color-notice-1200);
+    --bg-hover: var(--nano-color-notice-1000);
+    --color: var(--nano-color-base-0);
+  }
+  nano-card[variant=promo] nano-cta {
+    --color: var(--nano-color-notice-1000);
+    --bg: var(--nano-color-base-0);
+    --bg-hover: var(--nano-color-notice-75);
+    --bg-active: var(--nano-color-notice-200);
+    --border: 1px solid var(--color);
+  }
+  nano-card[variant=promo-aero] {
+    --bg: var(--nano-color-success-200);
+    --bg-hover: var(--nano-color-success-75);
+    --color: var(--nano-color-base-1000);
+  }
+  nano-card[variant=promo-plain], nano-card[variant=promo-grey] {
+    --bg: var(--nano-color-base-0);
+    --bg-hover: var(--nano-color-neutral-100);
+    --color: var(--nano-color-neutral-1400);
+  }
+  nano-card[variant=promo-plain]:hover [slot=title], nano-card[variant=promo-grey]:hover [slot=title] {
+    color: var(--nano-color-primary-1000);
+  }
+  nano-card[variant=promo-plain] nano-cta, nano-card[variant=promo-grey] nano-cta {
+    --color: var(--nano-color-primary-1100);
+    --bg: var(--nano-color-base-0);
+    --bg-hover: var(--nano-color-primary-50);
+    --bg-active: var(--nano-color-primary-75);
+    --border: 1px solid var(--color);
+  }
+  nano-card[variant=promo-grey] {
+    --bg: var(--nano-color-neutral-100);
+    --bg-hover: var(--nano-color-neutral-200);
+    --color: var(--nano-color-neutral-1400);
+  }
+}
+@layer components {
+  nano-tag {
+    --background: var(--nano-color-base-50);
+    --color: var(--nano-color-primary-1100);
+    --stroke: var(--nano-color-primary-1000);
+    --color-non-interactive: var(--nano-color-neutral-1400);
+    --padding: 0.125rem 0.375rem;
+    --font-size: 0.625rem;
+    --line-height: var(--nano-line-height-denser);
+    --letter-spacing: var(--nano-letter-spacing-denser);
+    --bg-color-hover: var(--nano-color-primary-100);
+    --bg-color-active: var(--nano-color-primary-300);
+    display: inline-block;
+    block-size: fit-content;
+    inline-size: fit-content;
+    padding: var(--padding);
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+    font-weight: var(--nano-font-weight-bold);
+    line-height: var(--line-height);
+    letter-spacing: var(--letter-spacing);
+    word-wrap: break-word;
+    text-align: center;
+    cursor: default;
+    color: var(--color-non-interactive);
+    background: var(--background);
+    border: 1px solid var(--color-non-interactive);
+  }
+  nano-tag[size=large] {
+    --padding: 0.25rem 0.5rem;
+    --font-size: var(--nano-font-size-2xs);
+    --letter-spacing: var(--nano-letter-spacing-loose);
+  }
+  nano-tag > a, nano-tag > button {
+    all: unset;
+    display: block;
+    padding: var(--padding);
+  }
+  nano-tag[closable] {
+    display: flex;
+    gap: 0.25rem;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--padding);
+  }
+  nano-tag[closable] nano-icon-button {
+    --padding: 0;
+  }
+  nano-tag[closable][size=large] {
+    gap: 0.375rem;
+  }
+  nano-tag[closable]:not(:has(nano-icon-button, .nano-icon-button))::after {
+    content: "";
+    display: block;
+    min-inline-size: 0.625rem;
+  }
+  nano-tag:has(a), nano-tag:has(button) {
+    padding: 0;
+  }
+  nano-tag:has(a), nano-tag:has(button), nano-tag[closable] {
+    color: var(--color);
+    border-color: var(--stroke);
+    background: var(--background);
+  }
+  nano-tag:has(a:hover), nano-tag:has(button:hover) {
+    cursor: pointer;
+    background: var(--bg-color-hover);
+  }
+  nano-tag:has(a:active), nano-tag:has(button:active) {
+    background: var(--bg-color-active);
+  }
+  nano-tag:has(a:focus-visible, button:focus-visible) {
+    outline: var(--nano-focus-ring);
+    outline-offset: var(--nano-focus-ring-offset);
+  }
+}
+@layer components {
+  nano-content-links {
+    --text-color: var(--nano-color-neutral-1400);
+    --color-disabled: var(--nano-color-neutral-800);
+    --color-border: var(--nano-color-neutral-200);
+    --color-active: var(--nano-color-primary-1000);
+    --padding: var(--nano-spacing-sm);
+    --icon-size: 1em;
+    --icon-color: var(--nano-color-primary-1200);
+    display: contents;
+    color: var(--text-color);
+    font-size: var(--nano-font-size-small);
+    font-weight: var(--nano-font-weight-normal);
+    line-height: var(--nano-line-height-normal);
+    letter-spacing: var(--nano-letter-spacing-loose);
+    word-wrap: break-word;
+  }
+  nano-content-links > * {
+    all: unset;
+    inline-size: -webkit-fill-available;
+    inline-size: -moz-available;
+    inline-size: stretch;
+    block-size: fit-content;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--padding);
+    gap: var(--nano-spacing-md);
+    border-block-start: 1px solid var(--color-border);
+    border-block-end: 1px solid var(--color-border);
+    text-decoration: none !important;
+  }
+  nano-content-links > *::after {
+    content: "";
+    background-size: cover;
+    inline-size: var(--icon-size);
+    block-size: var(--icon-size);
+    -webkit-mask-image: var(--nano-component-icon-chevron);
+            mask-image: var(--nano-component-icon-chevron);
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+    transform-origin: center;
+    margin-inline-start: auto;
+  }
+  nano-content-links > *:not(a) {
+    pointer-events: none;
+    cursor: default;
+    color: var(--color-disabled);
+    border-block-start: 1px solid var(--color-border);
+    border-block-end: 1px solid var(--color-border);
+  }
+  nano-content-links > *:not(a)::after {
+    background-color: var(--color-disabled);
+  }
+  nano-content-links > * + * {
+    border-block-start: none !important;
+  }
+  nano-content-links > a {
+    pointer-events: auto;
+    cursor: pointer;
+    color: var(--text-color);
+  }
+  nano-content-links > a::after {
+    background-color: var(--icon-color);
+  }
+  nano-content-links > a[target=_blank]::after {
+    -webkit-mask-image: var(--nano-component-icon-open);
+            mask-image: var(--nano-component-icon-open);
+  }
+  nano-content-links > a:hover, nano-content-links > a:active {
+    color: var(--color-active);
+    -webkit-text-decoration: underline solid;
+            text-decoration: underline solid;
+  }
+  nano-content-links > a:hover::after, nano-content-links > a:active::after {
+    background-color: var(--color-active);
+  }
+  nano-content-links > a:focus-visible {
+    outline: var(--nano-focus-ring);
+    outline-offset: var(--nano-focus-ring-offset);
+  }
+}
+@layer components {
+  nano-badge {
+    font-size: var(--nano-font-size-2xs);
+    line-height: var(--nano-line-height-normal);
+    letter-spacing: var(--nano-letter-spacing-loose);
+    background: var(--bg);
+    color: var(--color);
+    border-radius: var(--nano-border-radius-pill);
+    padding: 0.15em 0.65em !important;
+    display: inline-block;
+  }
+  nano-badge a {
+    color: inherit;
+    border-radius: inherit;
+  }
+  nano-badge a::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: transparent;
+  }
+  nano-badge:has(a) {
+    position: relative;
+  }
+  nano-badge:has(a):hover {
+    background-color: color-mix(in srgb, var(--bg), black 10%);
+  }
+  nano-badge:not([theme]), nano-badge[theme=primary] {
+    --bg: var(--nano-color-primary-1000);
+    --color: var(--nano-color-base-0);
+  }
+  nano-badge:not([theme])[strength="4"], nano-badge[theme=primary][strength="4"] {
+    --bg: var(--nano-color-primary-700);
+  }
+  nano-badge:not([theme])[strength="3"], nano-badge[theme=primary][strength="3"] {
+    --bg: var(--nano-color-primary-1000);
+  }
+  nano-badge:not([theme])[strength="2"], nano-badge[theme=primary][strength="2"] {
+    --bg: var(--nano-color-primary-1100);
+  }
+  nano-badge:not([theme])[strength="1"], nano-badge[theme=primary][strength="1"] {
+    --bg: var(--nano-color-primary-1200);
+  }
+  nano-badge[theme=neutral] {
+    --bg: var(--nano-color-neutral-900);
+    --color: var(--nano-color-base-0);
+  }
+  nano-badge[theme=neutral][strength="4"] {
+    --bg: var(--nano-color-neutral-700);
+  }
+  nano-badge[theme=neutral][strength="3"] {
+    --bg: var(--nano-color-neutral-900);
+  }
+  nano-badge[theme=neutral][strength="2"] {
+    --bg: var(--nano-color-neutral-1000);
+  }
+  nano-badge[theme=neutral][strength="1"] {
+    --bg: var(--nano-color-neutral-1200);
+  }
+  nano-badge[theme=success] {
+    --bg: var(--nano-color-success-1000);
+    --color: var(--nano-color-base-0);
+  }
+  nano-badge[theme=success][strength="4"] {
+    --bg: var(--nano-color-success-600);
+  }
+  nano-badge[theme=success][strength="3"] {
+    --bg: var(--nano-color-success-1000);
+  }
+  nano-badge[theme=success][strength="2"] {
+    --bg: var(--nano-color-success-1100);
+  }
+  nano-badge[theme=success][strength="1"] {
+    --bg: var(--nano-color-success-1200);
+  }
+  nano-badge[theme=warning] {
+    --bg: var(--nano-color-warning-1000);
+    --color: var(--nano-color-base-0);
+  }
+  nano-badge[theme=warning][strength="4"] {
+    --bg: var(--nano-color-warning-600);
+  }
+  nano-badge[theme=warning][strength="3"] {
+    --bg: var(--nano-color-warning-1000);
+  }
+  nano-badge[theme=warning][strength="2"] {
+    --bg: var(--nano-color-warning-1100);
+  }
+  nano-badge[theme=warning][strength="1"] {
+    --bg: var(--nano-color-warning-1200);
+  }
+  nano-badge[theme=danger] {
+    --bg: var(--nano-color-danger-1000);
+    --color: var(--nano-color-base-0);
+  }
+  nano-badge[theme=danger][strength="4"] {
+    --bg: var(--nano-color-danger-800);
+  }
+  nano-badge[theme=danger][strength="3"] {
+    --bg: var(--nano-color-danger-1000);
+  }
+  nano-badge[theme=danger][strength="2"] {
+    --bg: var(--nano-color-danger-1100);
+  }
+  nano-badge[theme=danger][strength="1"] {
+    --bg: var(--nano-color-danger-1200);
+  }
+  nano-badge[pulse]:not([pulse=false]) {
+    animation: pulse-animation 2s infinite;
+  }
+  @keyframes pulse-animation {
+    0% {
+      box-shadow: 0 0 0 0 rgb(var(--nano-color-base-rgb-1000)/20%);
+    }
+    100% {
+      box-shadow: 0 0 0 1em rgb(var(--nano-color-base-rgb-1000)/0%);
+    }
+  }
+}
+@layer components {
+  :where(nano-card-carousel, .nano-card-carousel) > [slot=title] {
+    all: unset;
+    font-weight: var(--nano-font-weight-normal);
+    font-size: var(--nano-font-size-xl);
+    line-height: var(--nano-line-height-denser);
+    line-height: 1;
+  }
+  nano-card-carousel nano-card [slot] {
+    opacity: var(--text-opacity);
+  }
+  nano-card-carousel nano-card [slot=img] {
+    opacity: var(--img-opacity);
+  }
+}
+@layer components {
+  .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"] {
+    filter: invert(100%);
+  }
+  :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"] {
+    white-space: nowrap;
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu nano-nav-item, :where(nano-global-nav, .nano-global-nav).bar-menu > a {
+    color: var(--main-menu-text-color);
+  }
+  :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 {
+    color: var(--main-menu-hover-text-color);
+  }
+  :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 {
+    color: var(--main-menu-active-text-color);
+  }
+  :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"] {
+    position: relative;
+  }
+  :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 {
+    content: "";
+    position: absolute;
+    background-color: var(--main-menu-active-border-color);
+    block-size: 4px;
+    inset-inline: 0;
+    inset-block-end: -1.5625rem;
+    transform: translateZ(0) scaleX(0);
+    transform-origin: 0 center;
+    transition: transform var(--nano-transition-x-fast) ease-in-out;
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)[open] {
+    color: var(--main-menu-active-border-color) !important;
+  }
+  :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 {
+    transform: translateZ(0) scaleX(1);
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu a.active,
+  :where(nano-global-nav, .nano-global-nav).bar-menu nano-nav-item.active,
+  :where(nano-global-nav, .nano-global-nav).bar-menu nano-nav-item[selected] {
+    color: var(--main-menu-active-text-color) !important;
+  }
+  :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"] {
+    inset-block-start: -500%;
+    inline-size: 100%;
+    position: absolute;
+    z-index: -2;
+    inset-inline: 0;
+    transition: inset-block-start var(--nano-transition-fast) ease-in-out, opacity var(--nano-transition-x-fast) ease;
+  }
+  :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"] {
+    inset-block-start: 100%;
+  }
+  :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"] {
+    background: var(--nano-color-base-0);
+    color: var(--nano-color-base-1000);
+    padding: var(--nano-spacing-xl);
+    inline-size: 91.25rem;
+    max-inline-size: 100%;
+    margin: auto;
+    box-shadow: var(--nano-shadow-l2);
+  }
+  :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"] {
+    background: var(--nano-overlay-background-color);
+    position: fixed;
+    inset: 0;
+    min-block-size: 100%;
+    z-index: -1;
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu [slot=close-button] {
+    display: none;
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] {
+    display: grid;
+    gap: var(--nano-spacing-xl);
+    grid-template: auto/repeat(auto-fit, minmax(200px, 1fr));
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary]:has(.gn__focus-area) {
+    grid-template: auto/1fr 1fr 26rem;
+  }
+  @media (width < 1200px) {
+    :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary]:has(.gn__focus-area) {
+      grid-template-columns: 1fr 26rem;
+    }
+  }
+  @media (width < 830px) {
+    :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary]:has(.gn__focus-area) {
+      grid-template-columns: 1fr;
+    }
+  }
+  :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 {
+    font-weight: var(--nano-font-weight-normal);
+    font-size: var(--nano-font-size-medium);
+    line-height: var(--nano-line-height-dense);
+    padding-block-end: 1rem;
+    border-block-end: 1px solid var(--nano-color-neutral-100);
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a {
+    text-decoration: none;
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a:hover {
+    text-decoration: underline;
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul {
+    margin: 0;
+    padding: 0;
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul li {
+    margin-inline: 0;
+    list-style: none;
+    margin-block-end: var(--nano-spacing-sm);
+    line-height: var(--nano-line-height-dense);
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area {
+    padding: var(--nano-spacing-xl) var(--nano-spacing-l);
+    display: flex;
+    flex-direction: column;
+    gap: var(--nano-spacing-sm);
+    background: var(--nano-color-base-0);
+    color: var(--nano-color-base-1000);
+  }
+  @media (width < 1200px) and (width > 830px) {
+    :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area {
+      grid-column: 2;
+      grid-row: 1/3;
+    }
+  }
+  :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 {
+    margin: 0;
+    border: none;
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area nano-content-links {
+    display: block;
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__link-columns {
+    gap: var(--nano-spacing-xl);
+  }
+  :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)) {
+    columns: 2;
+  }
+  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__link-columns > * {
+    display: block;
+    margin-block-end: var(--nano-spacing-sm);
+  }
+  :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 {
+    color: var(--overflow-text-color);
+  }
+  :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 {
+    color: var(--overflowhover-text-color);
+  }
+  :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 {
+    color: var(--overflow-active-text-color);
+  }
+  :where(nano-global-nav, .nano-global-nav).overflow-menu a.active,
+  :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 :where(nano-nav-item, .nano-nav-item)[selected] {
+    color: var(--overflow-active-text-color) !important;
+  }
+  :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"] {
+    background-color: var(--overflow-bg-color);
+    inline-size: 100%;
+    block-size: 100%;
+    position: absolute;
+    inset: 0;
+  }
+  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nano-spacing-md);
+    padding-block-end: var(--nano-spacing-md);
+  }
+  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a {
+    text-decoration: none;
+    color: var(--nano-color-blue-cerulean-700);
+  }
+  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a:hover {
+    text-decoration: underline;
+  }
+  :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 {
+    font-size: var(--nano-font-size-small);
+    line-height: var(--nano-line-height-normal);
+    letter-spacing: var(--nano-letter-spacing-loose);
+    margin-block-end: var(--nano-spacing-sm);
+  }
+  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul {
+    margin: 0;
+    padding: 0;
+  }
+  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul li {
+    margin-inline: 0;
+    list-style: none;
+    margin-block-end: var(--nano-spacing-sm);
+    line-height: var(--nano-line-height-dense);
+  }
+  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__link-columns {
+    padding-inline-start: var(--nano-spacing-md);
+  }
+  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area {
+    border-block-start: 1px solid rgb(var(--nano-color-base-rgb-1000)/10%);
+    padding-block-start: var(--nano-spacing-md);
+  }
+  :where(nano-global-nav, .nano-global-nav).overflow-menu [slot=close-button] {
+    color: inherit;
+    padding-block: var(--nano-spacing-md);
+    display: flex;
+    gap: var(--nano-spacing-sm);
+    align-items: center;
+    cursor: pointer;
+    inline-size: 100%;
+  }
+  :where(nano-global-nav, .nano-global-nav).overflow-menu [slot=close-button]:hover {
+    color: var(--nano-color-blue-cerulean-700);
+  }
+  :where(nano-global-nav, .nano-global-nav).overflow-menu [slot=close-button]::before {
+    content: "";
+    margin-inline-start: 0;
+    background-size: cover;
+    inline-size: 1em;
+    block-size: 1em;
+    -webkit-mask-image: var(--nano-component-icon-chevron);
+            mask-image: var(--nano-component-icon-chevron);
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+    transform-origin: center;
+    rotate: 180deg;
+    background-color: var(--nano-color-blue-cerulean-700);
+  }
+}
+@layer components {
+  nano-avatar {
+    --size: 2.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    inline-size: var(--size);
+    block-size: var(--size);
+    background-color: var(--nano-color-neutral-400);
+    font-size: calc(var(--size) * 0.5);
+    font-weight: var(--nano-font-weight-normal);
+    color: var(--nano-color-neutral-0);
+    -webkit-user-select: none;
+            user-select: none;
+    vertical-align: middle;
+    border-radius: var(--nano-border-radius-circle);
+    overflow: hidden;
+  }
+  nano-avatar:empty::before {
+    content: attr(initials);
+    text-transform: uppercase;
+    line-height: 1;
+  }
+  nano-avatar img {
+    aspect-ratio: var(--nano-image-ratio-square);
+    object-fit: cover;
+  }
+}
+@layer components {
+  :where(nano-in-page-nav, .nano-in-page-nav) {
+    --color-bottom-border: rgb(var(--nano-color-base-rgb-1000) / 10%);
+    --color-text: var(--nano-color-neutral-1400);
+    --color-primary: var(--nano-color-primary-1100);
+    --color-text-hover: var(--color-primary);
+    --color-border-active: var(--nano-color-primary-1000);
+    --border-active: 3px solid var(--color-border-active);
+    --color-bg: var(--nano-color-primary-75);
+    --font-size: var(--nano-font-size-small);
+    --font-weight: var(--nano-font-weight-normal);
+    --font-weight-active: var(--nano-font-weight-bold);
+    --line-height: var(--nano-line-height-dense);
+    --letter-spacing: var(--nano-letter-spacing-loose);
+    --flip-icon-ltr: 1;
+    --list-gap: calc(var(--spacing-l2) / 1.25);
+    --spacing-l2: var(--nano-spacing-l2);
+    --spacing-l3: var(--nano-spacing-l3);
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav):dir(rtl) {
+    --flip-icon-ltr: 0;
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) a,
+  :where(nano-in-page-nav, .nano-in-page-nav) ul,
+  :where(nano-in-page-nav, .nano-in-page-nav) li {
+    all: unset;
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) ul {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) ul:not(ul ul) {
+    padding: 0 var(--spacing-l2) var(--spacing-l3) var(--spacing-l2);
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) a {
+    cursor: pointer;
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) a:hover {
+    text-decoration: underline;
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) a:focus-visible {
+    outline: var(--nano-focus-ring);
+    outline-offset: var(--nano-focus-ring-offset);
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li:not(ul > li li) {
+    margin: 0;
+    padding: var(--spacing-l2) 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: stretch;
+    inline-size: 100%;
+    border-block-end: 1px solid var(--color-bottom-border);
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li:not(ul > li li) a {
+    color: var(--color-text);
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li:not(ul > li li) a.active {
+    border-inline-start: var(--border-active);
+    padding-inline-start: 1rem;
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li:not(ul > li li) a:hover {
+    color: var(--color-text-hover);
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul,
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul {
+    padding: var(--list-gap) 0 0 var(--spacing-l2);
+    gap: var(--list-gap);
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul a,
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul a {
+    color: var(--color-primary) !important;
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul a.active,
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul a.active {
+    padding-inline-start: 0;
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul:has(nano-details),
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul:has(nano-details) {
+    padding-inline-start: 1.1rem;
+  }
+  :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"] {
+    padding: 0;
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > ul > li > nano-details > ul,
+  :where(nano-in-page-nav, .nano-in-page-nav) ul > li > nano-details > ul > li > nano-details > ul {
+    padding: var(--list-gap) 0 0 var(--nano-spacing-l1-default);
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) nano-details nano-details:not(nano-details nano-details nano-details) {
+    color: var(--color-text);
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) nano-details {
+    --padding: 0;
+    --btn-bg-color: transparent;
+    --btn-bg-color--open: var(--nano-color-primary-75);
+    --btn-bg-color--hover: transparent;
+    border: none;
+  }
+  :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"] {
+    border-inline-start: var(--border-active);
+    padding-inline-start: 1rem;
+    color: var(--color-primary);
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) nano-details[open] > [slot=icon-start] {
+    rotate: 90deg;
+  }
+  :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"] {
+    padding: 0;
+  }
+  :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"] {
+    margin-inline-end: var(--spacing-l3);
+  }
+  :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"] {
+    font-size: var(--font-size);
+    line-height: var(--line-height);
+    font-weight: var(--font-weight);
+    letter-spacing: var(--letter-spacing);
+  }
+  :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 {
+    text-decoration: underline;
+  }
+  :where(nano-in-page-nav, .nano-in-page-nav) .details-wrapper {
+    --btn-text-color: var(--color-text);
+  }
+  :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"] {
+    padding: var(--spacing-l2);
+  }
+  :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"] {
+    box-shadow: var(--nano-shadow-l1);
+  }
+  :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"] {
+    z-index: var(--nano-z-index-menubar);
+    inset-block-start: 0;
+    position: sticky;
+    box-shadow: var(--nano-shadow-l1);
+    padding: var(--spacing-l2);
+  }
+}
+@layer components {
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) {
+    --color-bg: var(--nano-color-base-0);
+    --color-border: var(--nano-color-neutral-200);
+    --outer-spacing: var(--nano-spacing-l1-default);
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h2 {
+    font-weight: var(--nano-font-weight-normal);
+    font-size: var(--nano-font-size-xl);
+    line-height: var(--nano-line-height-denser);
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h2,
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h4 {
+    margin: 0;
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h3,
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h4 {
+    font-size: var(--nano-font-size-small);
+    line-height: var(--nano-line-height-normal);
+    font-weight: var(--nano-font-weight-bold);
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h3 {
+    padding-block-end: var(--nano-spacing-md);
+    border-block-end: 1px solid var(--color-border);
+    margin-block: 0;
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) h4 {
+    font-weight: var(--nano-font-weight-normal);
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) ul {
+    padding: 0;
+    margin: 0;
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) ul[slot=content] {
+    list-style: none;
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) ul[slot=content] > li {
+    margin: 0;
+    padding-block-start: var(--nano-spacing-md);
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) [slot=label] {
+    display: flex;
+    align-items: center;
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details {
+    --btn-bg-color: transparent;
+    --btn-bg-color--active: transparent;
+    --btn-bg-color--hover: transparent;
+    --padding: 0;
+    border: none;
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details::part(header), :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details [part~="header"] {
+    color: var(--color-primary);
+  }
+  :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"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--nano-spacing-l1-default);
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details::part(icon--end), :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details [part~="icon--end"] {
+    display: none;
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details::part(content), :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details [part~="content"] {
+    padding: var(--nano-spacing-md) 0;
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details::part(body), :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details [part~="body"] {
+    border-block-end: 1px solid var(--color-border);
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details ul {
+    list-style: disc;
+    padding-inline-start: var(--nano-spacing-md);
+  }
+  :where(nano-collapsible-comparison, .nano-collapsible-comparison) nano-details ul li {
+    font-size: var(--nano-font-size-xs);
+  }
+}
+@layer components {
+  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) {
+    --padding: inherit;
+    display: block;
+    border-block-start: 1px solid var(--nano-color-neutral-200);
+  }
+  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not(:has(+ nano-nav-item), :has(+ nano-dropdown), :has(+ nano-content-links)) {
+    border-block-end: 1px solid var(--nano-color-neutral-200);
+  }
+  :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"] {
+    font-size: var(--nano-font-size-small);
+    line-height: var(--nano-line-height-normal);
+    letter-spacing: var(--nano-letter-spacing-loose);
+  }
+  :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 {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    background-size: cover;
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+    inline-size: 0.8em;
+    block-size: 0.8em;
+    -webkit-mask-image: var(--nano-component-icon-check);
+            mask-image: var(--nano-component-icon-check);
+    background-color: var(--icon-color);
+    opacity: 0;
+    margin-inline-end: var(--nano-spacing-sm);
+    align-content: center;
+  }
+  :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 {
+    opacity: 1;
+  }
+  :where(nano-menu, .nano-menu) a {
+    font-size: calc(var(--font-size) - 0.125rem);
+    color: var(--nano-color-primary-1100);
+  }
+  :where(nano-menu, .nano-menu) :where(nano-icon, .nano-icon) {
+    color: var(--icon-color);
+  }
+  :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"] {
+    --icon-color: var(--nano-color-primary-1000);
+    color: var(--nano-color-neutral-1400);
+    font-size: var(--font-size);
+  }
+  :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) {
+    --icon-color: var(--nano-color-primary-1100);
+    color: var(--nano-color-base-1000);
+    background-color: var(--nano-color-neutral-100);
+  }
+  :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) {
+    --icon-color: var(--nano-color-primary-800);
+    color: var(--nano-color-base-1000);
+    background-color: var(--nano-color-neutral-200);
+  }
+  :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 {
+    --icon-color: var(--nano-color-base-0);
+    outline: none;
+    background-color: var(--nano-color-primary-1000);
+    color: var(--nano-color-base-0);
+  }
+  :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 {
+    background-color: var(--nano-color-primary-1200);
+  }
+  :where(nano-menu, .nano-menu) nano-content-links a::after {
+    background-color: var(--icon-color);
+  }
+  :where(nano-menu, .nano-menu) :where(nano-dropdown, .nano-dropdown) {
+    display: contents;
+  }
+  :where(nano-menu, .nano-menu) :where(nano-dropdown, .nano-dropdown) :where(nano-nav-item, .nano-nav-item) {
+    --padding: var(--nav-item-padding);
+  }
+  :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"] {
+    position: absolute;
+    min-block-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity var(--nano-transition-x-fast) ease, transform var(--nano-transition-fast) ease;
+    transform: translate3d(100%, 0, 0);
+    background: var(--background);
+  }
+  :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"] {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    transition: opacity var(--nano-transition-x-fast) ease, transform var(--nano-transition-fast) ease;
+  }
+  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [slot=close-button] {
+    padding: var(--padding);
+    display: flex;
+    gap: var(--nano-spacing-md);
+    align-items: center;
+    cursor: pointer;
+    inline-size: 100%;
+    border-block-start: 1px solid var(--nano-color-neutral-200);
+  }
+  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [slot=close-button]::before {
+    content: "";
+    margin-inline-start: 0;
+    background-size: cover;
+    inline-size: 1em;
+    block-size: 1em;
+    -webkit-mask-image: var(--nano-component-icon-caret);
+            mask-image: var(--nano-component-icon-caret);
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+    transform-origin: center;
+    rotate: 180deg;
+    background-color: var(--icon-color);
+  }
+}
+@layer components {
+  nano-icon-item {
+    --icon-dims: var(--nano-pictogram-size-large);
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-items: center;
+    inline-size: 100%;
+    gap: var(--nano-spacing-md);
+  }
+  nano-icon-item[size=large] {
+    --icon-dims: var(--nano-pictogram-size-x-large);
+  }
+  nano-icon-item:has([slot=icon]):has([slot=heading]), nano-icon-item:has([slot=icon]):has([slot=content]) {
+    grid-template-rows: repeat(2, min-content);
+  }
+  nano-icon-item:has([slot=icon]):has([slot=heading]):has([slot=content]) {
+    grid-template-rows: repeat(3, min-content);
+  }
+  nano-icon-item nano-icon {
+    --icon-size: var(--icon-dims);
+  }
+  nano-icon-item a:not(p > a),
+  nano-icon-item [slot=heading] {
+    all: unset;
+    font-weight: var(--nano-font-weight-normal);
+    font-size: var(--nano-font-size-medium);
+    line-height: var(--nano-line-height-dense);
+    color: var(--nano-color-neutral-1400);
+    text-align: center;
+  }
+  nano-icon-item p[slot=content] {
+    all: unset;
+    font-size: var(--nano-font-size-small);
+    line-height: var(--nano-line-height-normal);
+    letter-spacing: var(--nano-letter-spacing-loose);
+    text-align: center;
+  }
+  nano-icon-item [slot=icon] {
+    color: var(--nano-color-primary-1000);
+  }
+  nano-icon-item[landscape] {
+    justify-items: start;
+    grid-template-columns: min-content 1fr !important;
+    row-gap: var(--nano-spacing-sm);
+  }
+  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]), nano-icon-item[landscape]:has([slot=icon]):has([slot=content]) {
+    grid-template-rows: min-content;
+  }
+  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]) [slot=heading],
+  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],
+  nano-icon-item[landscape]:has([slot=icon]):has([slot=content]) p[slot=content] {
+    grid-row: 1;
+    align-self: center;
+  }
+  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]) {
+    grid-template-rows: min-content 1fr;
+  }
+  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]) a,
+  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]) [slot=heading] {
+    grid-row: 1;
+  }
+  nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]) p[slot=content] {
+    grid-row: 2;
+  }
+  nano-icon-item[landscape] nano-icon[slot=icon] {
+    grid-column: 1;
+  }
+  nano-icon-item[landscape] [slot=icon] {
+    grid-column: 1;
+    grid-row: 1/-1;
+  }
+  nano-icon-item[landscape] a,
+  nano-icon-item[landscape] [slot=heading] {
+    text-align: start;
+    align-self: center;
+    grid-row: 1;
+    grid-column: 2;
+  }
+  nano-icon-item[landscape] p[slot=content] {
+    text-align: start;
+    grid-row: 2;
+    grid-column: 2;
+  }
+  nano-icon-item a,
+  nano-icon-item a > [slot=heading] {
+    cursor: pointer;
+    text-decoration: underline;
+    color: var(--nano-color-primary-1000);
+  }
+  nano-icon-item a:hover {
+    color: var(--nano-color-primary-1200);
+  }
+  nano-icon-item a:hover [slot=heading] {
+    color: var(--nano-color-primary-1200);
+  }
+  nano-icon-item:has(a:hover) nano-icon {
+    color: var(--nano-color-primary-1200);
+  }
+}
+:where(nano-tab-group, .nano-tab-group)[equal-tab-size] .nano-tab {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+:where(nano-tab-group, .nano-tab-group)[placement=start][equal-tab-size] .nano-tab {
+  justify-content: flex-end;
+}
+:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab {
+  border-block-end: none;
+  border-inline-end: var(--border);
+}
+: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"] {
+  justify-content: end;
+}
+: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"] {
+  align-items: flex-end;
+}
+:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab:not([disabled]):hover {
+  border-color: inherit;
+}
+:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab:not([disabled])[active] {
+  border-color: inherit;
+}
+: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"] {
+  --scroll-btn-size: 2rem;
+}
+:where(nano-tab-group, .nano-tab-group)[placement=top][size=large] .nano-tab {
+  font-weight: var(--nano-font-weight-normal);
+  font-size: var(--nano-font-size-l);
+  line-height: var(--nano-line-height-dense);
+  --padding: 1.5625rem;
+}
+
+@layer components {
+  :where(nano-tooltip, .nano-tooltip) [slot=content], :where(nano-tooltip, .nano-tooltip) [slot=content] * {
+    font-size: var(--nano-font-size-2xs);
+  }
+  :where(nano-tooltip, .nano-tooltip) ul[slot=content] {
+    margin-block: 0;
+    padding-inline: 0;
+    margin-inline: var(--nano-spacing-md);
+  }
+  :where(nano-tooltip, .nano-tooltip) [slot=content] li {
+    margin-block-end: 0;
+  }
+}
+@layer components {
+  :where(nano-table, .nano-table) {
+    --table-padding: var(--nano-spacing-md);
+    --table-compact-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));
+    --table-border-color: var(--nano-color-neutral-200);
+    --table-border-color-header: var(--nano-color-primary-1000);
+    --table-background: var(--nano-color-base-0);
+    --table-wrapper-max-height: 80vh;
+    --table-wrapper-max-width: 100%;
+    --isLtR: 1;
+    overflow-y: clip;
+    display: block;
+    container-type: inline-size;
+  }
+  :where(nano-table, .nano-table):dir(rtl) {
+    --isLtR: -1;
+  }
+  :where(nano-table, .nano-table)[compact]:not([compact=false], [compact=auto]) {
+    --table-padding: var(--table-compact-padding);
+  }
+  @media (width <= 500px) {
+    :where(nano-table, .nano-table)[compact=auto] {
+      --table-padding: var(--table-compact-padding);
+    }
+  }
+  @container (width <= 500px) {
+    :where(nano-table, .nano-table)[compact=auto] .nano-table__overflow {
+      --table-padding: var(--table-compact-padding);
+    }
+  }
+  :where(nano-table, .nano-table):not([scrollable=false]) {
+    overflow-y: visible;
+  }
+  :where(nano-table, .nano-table):not([scrollable=false]):has([sticky=start], [sticky=end]) .nano-masked-overflow {
+    --fade-size: 0;
+  }
+  :where(nano-table, .nano-table):not([scrollable=false]):not(.nano-table--props-ready) {
+    overflow: auto;
+    scrollbar-width: thin;
+    max-inline-size: var(--table-wrapper-max-width);
+    max-block-size: var(--table-wrapper-max-height);
+  }
+  :where(nano-table, .nano-table):not([scrollable=false]) .nano-table__overflow {
+    max-inline-size: var(--table-wrapper-max-width);
+    max-block-size: var(--table-wrapper-max-height);
+    position: relative;
+  }
+  :where(nano-table, .nano-table):not([scrollable=false]) table {
+    margin-block-end: var(--nano-spacing-l);
+  }
+  :where(nano-table, .nano-table) tr[clickable] {
+    cursor: pointer;
+  }
+  :where(nano-table, .nano-table) tr[clickable]:not([sticky]) {
+    position: relative;
+  }
+  :where(nano-table, .nano-table) tr[clickable]:focus-within {
+    --table-background: var(--nano-color-primary-50);
+  }
+  :where(nano-table, .nano-table) tr[clickable]:hover {
+    --table-background: var(--nano-color-primary-75);
+  }
+  :where(nano-table, .nano-table) tr[clickable] input[type=checkbox]::after,
+  :where(nano-table, .nano-table) tr[clickable] nano-checkbox::after,
+  :where(nano-table, .nano-table) tr[clickable] a::after,
+  :where(nano-table, .nano-table) tr[clickable] button::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+  :where(nano-table, .nano-table) tr[sticky] {
+    position: sticky;
+    container-type: scroll-state;
+    inset-block-start: var(--sticky-top, 0);
+  }
+  :where(nano-table, .nano-table) tfoot tr[sticky] {
+    inset-block-end: 0;
+  }
+  :where(nano-table, .nano-table) tfoot tr[sticky],
+  :where(nano-table, .nano-table) thead tr[sticky] {
+    z-index: 10;
+  }
+  :where(nano-table, .nano-table) tbody tr[sticky] {
+    z-index: 5;
+    overflow-y: clip;
+  }
+  @container scroll-state(stuck: top) {
+    :where(nano-table, .nano-table) tbody tr[sticky] td, :where(nano-table, .nano-table) tbody tr[sticky] th {
+      border-block-end: 1px solid var(--table-border-color-header);
+    }
+  }
+  @supports not (container-type: scroll-state) {
+    :where(nano-table, .nano-table) tbody tr[sticky] td, :where(nano-table, .nano-table) tbody tr[sticky] th {
+      border-block-end: 1px solid var(--table-border-color-header);
+    }
+  }
+  :where(nano-table, .nano-table) tbody tr[sticky] td[sticky],
+  :where(nano-table, .nano-table) tbody tr[sticky] th[sticky] {
+    overflow-y: clip;
+  }
+  :where(nano-table, .nano-table) tbody tr[sticky] td[sticky]::after,
+  :where(nano-table, .nano-table) tbody tr[sticky] th[sticky]::after {
+    content: "";
+    visibility: hidden;
+    inline-size: 10px;
+    inset-block-start: 0;
+    block-size: var(--section-height);
+    position: absolute;
+  }
+  @container scroll-state(stuck: left) {
+    :where(nano-table, .nano-table) tbody tr[sticky] td[sticky]::after,
+    :where(nano-table, .nano-table) tbody tr[sticky] th[sticky]::after {
+      visibility: visible;
+    }
+  }
+  @container scroll-state(stuck: right) {
+    :where(nano-table, .nano-table) tbody tr[sticky] td[sticky]::after,
+    :where(nano-table, .nano-table) tbody tr[sticky] th[sticky]::after {
+      visibility: visible;
+    }
+  }
+  :where(nano-table, .nano-table) tbody tr[sticky] [sticky=start]::after {
+    inset-inline-end: 0;
+    box-shadow: calc(4px * var(--isLtR)) -3px 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%);
+  }
+  :where(nano-table, .nano-table) tbody tr[sticky] [sticky=end]::after {
+    inset-inline-start: 0;
+    box-shadow: calc(-4px * var(--isLtR)) -3px 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%);
+  }
+  @container (width <= 500px) {
+    :where(nano-table, .nano-table) .nano-table__overflow td[sticky], :where(nano-table, .nano-table) .nano-table__overflow th[sticky] {
+      --sticky-start: 0px !important;
+      --sticky-end: 0px !important;
+    }
+    :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) {
+      position: initial !important;
+      z-index: initial !important;
+    }
+  }
+  @media (width <= 500px) {
+    :where(nano-table, .nano-table) td[sticky], :where(nano-table, .nano-table) th[sticky] {
+      --sticky-start: 0px !important;
+      --sticky-end: 0px !important;
+    }
+    :where(nano-table, .nano-table) td[sticky]:not(:first-of-type), :where(nano-table, .nano-table) th[sticky]:not(:first-of-type) {
+      position: initial !important;
+      z-index: initial !important;
+    }
+  }
+  :where(nano-table, .nano-table) :where(thead, tbody) td[sticky], :where(nano-table, .nano-table) th[sticky] {
+    position: sticky;
+    container-type: scroll-state;
+    z-index: 2;
+  }
+  @supports not (container-type: scroll-state) {
+    :where(nano-table, .nano-table) :where(thead, tbody) td[sticky]::after, :where(nano-table, .nano-table) th[sticky]::after {
+      content: "";
+      position: absolute;
+      box-shadow: 14px 0 14px 0 var(--table-background);
+      inset-inline: auto 0;
+      block-size: calc(100% - var(--nano-spacing-md));
+      inset-block-start: calc(var(--nano-spacing-md) / 2);
+      inline-size: var(--nano-spacing-md);
+    }
+    :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 {
+      box-shadow: -14px 0 14px 0 var(--table-background);
+      inset-inline: 0 auto;
+    }
+  }
+  :where(nano-table, .nano-table) td[sticky=start], :where(nano-table, .nano-table) th[sticky=start] {
+    inset-inline-start: var(--sticky-start, 0);
+  }
+  :where(nano-table, .nano-table) td[sticky=end], :where(nano-table, .nano-table) th[sticky=end] {
+    inset-inline-end: var(--sticky-end, 0);
+    z-index: 3;
+  }
+  @supports (container-type: scroll-state) {
+    :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 {
+      content: "";
+      visibility: hidden;
+      inline-size: 10px;
+      inset-block-start: 0;
+      block-size: var(--section-height);
+      position: absolute;
+    }
+    @container scroll-state(stuck: left) {
+      :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 {
+        visibility: visible;
+      }
+    }
+    @container scroll-state(stuck: right) {
+      :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 {
+        visibility: visible;
+      }
+    }
+    :where(nano-table, .nano-table) :where(thead, tbody) tr:has([sticky=start], [sticky=end]):first-of-type [sticky=start]::after {
+      inset-inline-end: 0;
+      box-shadow: calc(4px * var(--isLtR)) 0 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%);
+    }
+    :where(nano-table, .nano-table) :where(thead, tbody) tr:has([sticky=start], [sticky=end]):first-of-type [sticky=end]::after {
+      inset-inline-start: 0;
+      box-shadow: calc(-4px * var(--isLtR)) 0 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%);
+    }
+  }
+}
+@layer components {
+  :root {
+    --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>");
+    --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>");
+    --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>");
+    --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>");
+    --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>");
+  }
+  nano-intersection-observe,
+  nano-resize-observe,
+  nano-global-search-results,
+  nano-cta,
+  nano-card,
+  nano-tag,
+  nano-content-links,
+  nano-badge,
+  nano-avatar,
+  nano-icon-item,
+  nano-masked-overflow,
+  nano-table {
+    visibility: visible !important;
+  }
+  body:not(.nano-eager) nano-algolia-filter,
+  body:not(.nano-eager) nano-algolia-input,
+  body:not(.nano-eager) nano-algolia-pagination,
+  body:not(.nano-eager) nano-algolia-results,
+  body:not(.nano-eager) nano-details,
+  body:not(.nano-eager) nano-accordion,
+  body:not(.nano-eager) nano-grid-item,
+  body:not(.nano-eager) nano-menu,
+  body:not(.nano-eager) nano-range,
+  body:not(.nano-eager) nano-rating,
+  body:not(.nano-eager) nano-slide,
+  body:not(.nano-eager) nano-slides,
+  body:not(.nano-eager) nano-date-input,
+  body:not(.nano-eager) nano-global-nav,
+  body:not(.nano-eager) nano-menu-drawer,
+  body:not(.nano-eager) nano-checkbox,
+  body:not(.nano-eager) nano-checkbox-group,
+  body:not(.nano-eager) nano-grid,
+  body:not(.nano-eager) nano-option,
+  body:not(.nano-eager) nano-algolia,
+  body:not(.nano-eager) nano-date-picker,
+  body:not(.nano-eager) nano-select,
+  body:not(.nano-eager) nano-dropdown,
+  body:not(.nano-eager) nano-nav-item,
+  body:not(.nano-eager) nano-input,
+  body:not(.nano-eager) nano-icon,
+  body:not(.nano-eager) nano-tab-content,
+  body:not(.nano-eager) nano-tab,
+  body:not(.nano-eager) nano-hero,
+  body:not(.nano-eager) nano-img,
+  body:not(.nano-eager) nano-datalist,
+  body:not(.nano-eager) nano-split-pane,
+  body:not(.nano-eager) nano-file-upload,
+  body:not(.nano-eager) nano-data-table,
+  body:not(.nano-eager) nano-alert,
+  body:not(.nano-eager) nano-dialog,
+  body:not(.nano-eager) nano-drawer,
+  body:not(.nano-eager) nano-footer,
+  body:not(.nano-eager) nano-in-page-nav,
+  body:not(.nano-eager) nano-collapsible-comparison,
+  body:not(.nano-eager) nano-breadcrumb {
+    visibility: hidden;
+  }
+  body:not(.nano-eager) .hydrated {
+    visibility: inherit;
+  }
+  nano-alert:not(.hydrated):not([open]),
+  nano-dialog:not(.hydrated),
+  nano-drawer:not(.hydrated) {
+    display: none;
+  }
+  nano-alert[open]:not(.hydrated) {
+    display: block;
+    min-height: calc(var(--nano-pictogram-size-large) + var(--nano-spacing-md) * 2);
+  }
+  nano-tooltip:not(.hydrated) [slot=content] {
+    display: none;
+  }
+  nano-animation {
+    visibility: inherit !important;
+  }
+  nano-dropdown {
+    visibility: inherit !important;
+  }
+  nano-dropdown:not(.hydrated) :not([slot=trigger]) {
+    display: none;
+  }
+  nano-slides:not([ready]) {
+    opacity: 0;
+  }
+  nano-slide:not([ready]) {
+    opacity: 0;
+    block-size: 1px;
+    display: block;
+  }
+  @supports (scrollbar-gutter: stable) {
+    .nano-scroll-lock {
+      scrollbar-gutter: var(--nano-scroll-lock-gutter) !important;
+    }
+    .nano-scroll-lock body {
+      overflow: hidden !important;
+    }
+  }
+  /** This can go away once Safari has scrollbar-gutter support. */
+  @supports not (scrollbar-gutter: stable) {
+    .nano-scroll-lock body {
+      padding-inline-end: var(--nano-scroll-lock-size) !important;
+      overflow: hidden !important;
+    }
+  }
+}