: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;
    }
  }@layer components {
  :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);
  }
  :where(nano-footer, .nano-footer) [slot=bottom-end] nano-option::part(start) {
    margin-inline-end: var(--nano-spacing-sm);
  }
  :where(nano-footer, .nano-footer) [slot=middle-centre] a {
    color: inherit;
  }
  :where(nano-footer, .nano-footer) [slot=middle-centre] a:hover {
    color: var(--nano-color-text-link-hover);
  }
  :where(nano-footer, .nano-footer) [slot=middle-centre] a:focus-visible {
    outline: var(--nano-focus-ring);
    outline-offset: var(--nano-focus-ring-offset);
  }
  :where(nano-footer, .nano-footer) [slot=middle-centre] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--icon-gap-md);
    flex-wrap: nowrap;
  }
  @container footer-container (max-width: 912px) {
    :where(nano-footer, .nano-footer) [slot=middle-centre] {
      flex-wrap: wrap;
      justify-content: center;
    }
  }
}
@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-background-default);
  }
  .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-fill-primary);
    --bg-hover: var(--nano-color-fill-primary-hover);
    --bg-active: var(--nano-color-fill-primary-pressed);
    --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-text-link);
    --bg: transparent;
    --bg-hover: var(--nano-color-fill-secondary-hover);
    --bg-active: var(--nano-color-fill-secondary-pressed);
    --border: 1px solid var(--color);
  }
  nano-cta[theme=danger],
  nano-cta :is([theme=danger]) {
    --color: var(--nano-color-basic-white);
    --bg: var(--nano-color-fill-danger);
    --bg-hover: var(--nano-color-fill-danger-hover);
    --bg-active: var(--nano-color-fill-danger-pressed);
    --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-text-danger);
    --bg: var(--nano-color-background-default);
    --bg-hover: var(--nano-color-fill-danger-weak);
    --bg-active: var(--nano-color-fill-danger-weak);
    --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([disabled], [disabled=true]):not([disabled=false]),
  nano-cta a:not([href]) {
    --color: var(--nano-color-text-disabled);
    --text-color: var(--color);
    --bg: var(--nano-color-fill-disabled);
    --bg-hover: var(--bg);
    --bg-active: var(--bg);
    --border: 1px solid var(--color);
    cursor: not-allowed;
  }
  nano-cta :is([disabled], [disabled=true]):not([disabled=false]) a,
  nano-cta :is([disabled], [disabled=true]):not([disabled=false]) button,
  nano-cta a:not([href]) a,
  nano-cta a:not([href]) button {
    cursor: not-allowed;
  }
  nano-cta :is(a, button, .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 :is(a, button, .button):focus-visible {
    outline: var(--nano-focus-ring);
    outline-offset: var(--nano-focus-ring-offset);
  }
  nano-cta :is(a, button, .button):hover {
    background-color: var(--bg-hover) !important;
  }
  nano-cta :is(a, button, .button):active {
    background-color: var(--bg-active) !important;
  }
  nano-cta :is(a, button, .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 :is(a, button, .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 :is(a, button, .button) :where(nano-icon, .nano-icon),
  nano-cta :is(a, button, .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$=".txt"], [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(calc(197px - var(--gap)), 31%) auto;
    grid-template-rows: repeat(calc(var(--row-count) - 1), min-content);
    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], [slot=category], ul) {
    margin-inline: var(--content-margin);
  }
  nano-card [slot]:not([slot=img], [slot=category], 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;
    inline-size: 100%;
    max-inline-size: max-content;
  }
  nano-card div[slot=img] {
    position: relative;
    inline-size: fit-content;
    block-size: fit-content;
  }
  nano-card [slot=category] {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-end: 10px;
    background: var(--nano-color-background-default);
  }
  nano-card [slot=title] {
    order: 2;
  }
  nano-card [slot=content] {
    order: 3;
  }
  nano-card [slot=footer] {
    order: 4;
    display: inline-flex;
    align-items: center;
    gap: var(--gap);
  }
  nano-card [slot=footer]:has(nano-tag) {
    flex-wrap: wrap;
    gap: var(--nano-spacing-sm);
  }
  nano-card [slot=footer]:has(nano-tag):is(nano-more-less) > ul,
  nano-card [slot=footer]:has(nano-tag) nano-more-less > ul {
    display: contents;
    list-style: none;
  }
  nano-card [slot=footer]:has(nano-tag):is(nano-more-less) > ul > li,
  nano-card [slot=footer]:has(nano-tag) nano-more-less > ul > li {
    display: contents;
  }
  nano-card nano-content-links {
    --color-border: var(--nano-color-border-default);
  }
  nano-card address {
    font-style: normal;
  }
  nano-card a[slot=title],
  nano-card [slot=title] a {
    color: var(--color);
    text-decoration: none;
  }
  nano-card a[slot=title]:hover,
  nano-card [slot=title] a:hover {
    color: var(--nano-color-text-hover);
    text-decoration: underline;
  }
  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) 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), [disable-card-click]):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-text-hover);
    text-decoration: underline;
  }
  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]):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), [disable-card-click]):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-text-hover);
    text-decoration: underline;
  }
  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) button::before,
  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) 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), [disable-card-click]) 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), [disable-card-click])[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 {
    background-color: var(--bg-hover);
  }
  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) 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[disable-card-click] {
    --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] div:has([slot=img]),
  nano-card[layout=landscape] [slot=img] {
    grid-column: 1;
    grid-row: 1/-1;
  }
  nano-card[layout=landscape]:has([slot=title], [slot=content], [slot=img]):not(nano-card[layout=landscape]:has([slot=footer])) {
    grid-template-rows: min-content repeat(calc(var(--row-count) - 2), 1fr);
  }
  @container (width < 417px) {
    nano-card[layout=landscape]:not([size=small]) [slot] {
      grid-column: 1/-1 !important;
    }
    nano-card[layout=landscape]:not([size=small]) [slot=img] {
      grid-column: 1/-1 !important;
    }
  }
  @container (width < 320px) {
    nano-card[layout=landscape][size=small] [slot] {
      grid-column: 1/-1 !important;
    }
    nano-card[layout=landscape][size=small] [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-lg);
    line-height: var(--nano-line-height-dense);
    text-wrap: balance;
  }
  nano-card [slot=content],
  nano-card [slot=content] > * {
    font-size: var(--nano-font-size-sm);
    line-height: var(--nano-line-height-normal);
    letter-spacing: var(--nano-letter-spacing-loose);
  }
  nano-card[size=small] {
    grid-template-columns: minmax(calc(60px - var(--gap)), 31%) auto;
  }
  nano-card[size=small] [slot=title],
  nano-card[size=small] [slot=title] > :first-child {
    font-size: var(--nano-font-size-sm);
    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-md);
    line-height: var(--nano-line-height-dense);
    text-wrap: balance;
  }
  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-aero] {
    --bg: var(--nano-color-surface-brand-feature);
    --bg-hover: var(--nano-color-surface-brand-feature-hover);
    --color: var(--nano-color-text-default);
  }
  nano-card[variant=promo-plain] {
    --bg: var(--nano-color-surface-default);
    --bg-hover: var(--nano-color-surface-default-hover);
    --color: var(--nano-color-text-default);
  }
  nano-card[variant=promo-grey] {
    --bg: var(--nano-color-surface-subtle);
    --bg-hover: var(--nano-color-surface-subtle-hover);
    --color: var(--nano-color-text-default);
  }
  nano-card[variant=promo-grey]:hover [slot=title] {
    color: var(--nano-color-text-hover);
  }
  nano-card[variant=promo-grey] nano-cta {
    --color: var(--nano-color-text-link);
    --bg: var(--nano-color-surface-subtle);
    --bg-hover: var(--nano-color-surface-subtle-hover);
    --bg-active: var(--nano-color-surface-subtle-pressed);
    --border: 1px solid var(--color);
  }
}
@layer components {
  nano-tag {
    --background: var(--nano-color-surface-default);
    --color: var(--nano-color-text-link);
    --stroke: var(--nano-color-border-accent);
    --color-non-interactive: var(--nano-color-text-default);
    --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-fill-secondary-hover);
    --bg-color-active: var(--nano-color-fill-secondary-pressed);
    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[closable] {
    display: flex;
    gap: 0.25rem;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding);
  }
  nano-tag[closable] nano-icon-button {
    --padding: 0 !important;
  }
  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), nano-tag[selected] {
    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);
  }
  nano-tag > a, nano-tag > button {
    all: unset;
    display: block;
    padding: var(--padding) !important;
  }
  nano-tag > a:hover, nano-tag > button:hover {
    text-decoration: none;
  }
}
@layer components {
  :where(nano-content-links, .nano-content-links) {
    --text-color: var(--nano-color-text-default);
    --color-disabled: var(--nano-color-text-disabled);
    --color-border: var(--nano-color-border-default);
    --color-active: var(--nano-color-fill-primary);
    --padding: var(--nano-spacing-sm);
    --icon-size: 1em;
    --icon-color: var(--nano-color-icon-primary);
    display: contents;
    color: var(--text-color);
    font-size: var(--nano-font-size-sm);
    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;
  }
  :where(nano-content-links, .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;
  }
  :where(nano-content-links, .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;
    min-inline-size: var(--icon-size);
  }
  :where(nano-content-links, .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);
  }
  :where(nano-content-links, .nano-content-links) > *:not(a)::after {
    background-color: var(--color-disabled);
  }
  :where(nano-content-links, .nano-content-links) > * + * {
    border-block-start: none !important;
  }
  :where(nano-content-links, .nano-content-links) a {
    pointer-events: auto;
    cursor: pointer;
    color: var(--text-color);
  }
  :where(nano-content-links, .nano-content-links) a::after {
    background-color: var(--icon-color);
  }
  :where(nano-content-links, .nano-content-links) a[target=_blank]::after {
    -webkit-mask-image: var(--nano-component-icon-open);
            mask-image: var(--nano-component-icon-open);
  }
  :where(nano-content-links, .nano-content-links) a:hover, :where(nano-content-links, .nano-content-links) a:active {
    --icon-color: var(--color-active);
    color: var(--color-active);
    -webkit-text-decoration: underline solid;
            text-decoration: underline solid;
  }
  :where(nano-content-links, .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;
    max-block-size: fit-content;
    --color: lch(from var(--bg) calc((50 - l) * infinity) 0 0);
  }
  nano-badge:empty {
    padding: 0 !important;
    block-size: 0.5em;
    inline-size: 0.5em;
    min-block-size: 0.5em;
  }
  nano-badge a, nano-badge button {
    all: unset;
    color: inherit;
    border-radius: inherit;
    cursor: pointer;
  }
  nano-badge a:is(a), nano-badge button:is(a) {
    text-decoration: underline;
  }
  nano-badge a::after, nano-badge button::after {
    content: "";
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    background-color: transparent;
  }
  nano-badge a:focus-visible, nano-badge button:focus-visible {
    outline: none;
  }
  nano-badge a:focus-visible::after, nano-badge button:focus-visible::after {
    outline: var(--nano-focus-ring);
    outline-offset: var(--nano-focus-ring-offset);
  }
  nano-badge:has(a, button) {
    position: relative;
  }
  nano-badge:has(a, button):hover {
    background-color: color-mix(in srgb, var(--bg), black 10%);
  }
  nano-badge:has(a, button):active {
    background-color: color-mix(in srgb, var(--bg), black 20%);
  }
  nano-badge:not([theme]), nano-badge[theme=primary] {
    --bg: var(--nano-color-fill-primary);
  }
  nano-badge[theme=neutral] {
    --bg: var(--nano-color-fill-neutral);
  }
  nano-badge[theme=success] {
    --bg: var(--nano-color-fill-success);
  }
  nano-badge[theme=warning] {
    --bg: var(--nano-color-fill-warning);
  }
  nano-badge[theme=danger] {
    --bg: var(--nano-color-fill-danger-hover);
  }
  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);
    text-wrap: balance;
    line-height: 1;
  }
  nano-card-carousel nano-card [slot] {
    opacity: var(--text-opacity);
  }
  nano-card-carousel nano-card [slot=img] {
    opacity: 1;
  }
}
@layer components {
  .nano-theme-dark nano-global-nav::part(logo),
  .nano-theme-dark nano-global-nav [part~=logo],
  nano-global-nav.nano-theme-dark::part(logo),
  nano-global-nav.nano-theme-dark [part~=logo] {
    filter: invert(100%);
  }
  nano-global-nav > a,
  nano-global-nav nano-nav-item::part(label),
  nano-global-nav nano-nav-item [part~=label] {
    white-space: nowrap;
  }
  nano-global-nav nano-nav-item [slot=icon-start] {
    position: relative;
  }
  nano-global-nav nano-nav-item [slot=icon-start] nano-badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    translate: 100% -50%;
  }
  nano-global-nav:has(nano-menu-drawer)::part(site-wrapper),
  nano-global-nav:has(nano-menu-drawer) [part~=site-wrapper] {
    display: flex;
  }
  nano-global-nav.bar-menu::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--nano-overlay-background-color);
    z-index: var(--nano-z-index-menubar);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--nano-transition-fast) ease var(--nano-transition-fast);
  }
  nano-global-nav.bar-menu:has(nano-nav-item[open])::before {
    opacity: 1;
    transition: opacity var(--nano-transition-fast) ease;
  }
  nano-global-nav.bar-menu > nano-nav-item,
  nano-global-nav.bar-menu > a {
    color: var(--main-menu-text-color);
  }
  nano-global-nav.bar-menu > nano-nav-item {
    align-self: stretch;
    display: flex;
    align-items: center;
    margin-block: calc(-1 * var(--nano-spacing-md));
    padding-block: var(--nano-spacing-md);
  }
  nano-global-nav.bar-menu > nano-nav-item:hover,
  nano-global-nav.bar-menu > a:hover {
    color: var(--main-menu-hover-text-color);
  }
  nano-global-nav.bar-menu > nano-nav-item:active,
  nano-global-nav.bar-menu > a:active {
    color: var(--main-menu-active-text-color);
  }
  nano-global-nav.bar-menu > nano-nav-item::part(trigger),
  nano-global-nav.bar-menu > nano-nav-item [part~=trigger] {
    position: relative;
  }
  nano-global-nav.bar-menu > nano-nav-item::part(trigger)::before,
  nano-global-nav.bar-menu > 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;
  }
  nano-global-nav.bar-menu > nano-nav-item[open] {
    color: var(--main-menu-active-border-color) !important;
  }
  nano-global-nav.bar-menu > nano-nav-item[open]::part(trigger)::before, nano-global-nav.bar-menu > nano-nav-item[open] [part~=trigger]::before {
    transform: translateZ(0) scaleX(1);
  }
  nano-global-nav.bar-menu > a.active,
  nano-global-nav.bar-menu > nano-nav-item.active,
  nano-global-nav.bar-menu > nano-nav-item[selected] {
    color: var(--main-menu-active-text-color) !important;
  }
  nano-global-nav.bar-menu > 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;
  }
  nano-global-nav.bar-menu > nano-nav-item::part(modal modal--open) {
    inset-block-start: 100%;
  }
  nano-global-nav.bar-menu > nano-nav-item::part(modal-content) {
    background: var(--nano-color-background-default);
    color: var(--nano-color-surface-contrast);
    padding: var(--nano-spacing-xl);
    inline-size: 91.25rem;
    max-inline-size: 100%;
    margin: auto;
    box-shadow: var(--nano-shadow-l2);
  }
  nano-global-nav.bar-menu > nano-nav-item::part(modal-mask),
  nano-global-nav.bar-menu > nano-nav-item [part~=modal-mask] {
    display: none;
  }
  nano-global-nav.bar-menu > nano-nav-item [slot=close-button] {
    display: none;
  }
  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] nano-accordion,
  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] nano-details {
    display: none;
  }
  nano-global-nav.overflow-menu nano-nav-item, nano-global-nav.overflow-menu > a {
    color: var(--overflow-text-color);
  }
  nano-global-nav.overflow-menu nano-nav-item:hover, nano-global-nav.overflow-menu > a:hover {
    color: var(--overflowhover-text-color);
  }
  nano-global-nav.overflow-menu nano-nav-item:active, nano-global-nav.overflow-menu > a:active {
    color: var(--overflow-active-text-color);
  }
  nano-global-nav.overflow-menu a.active,
  nano-global-nav.overflow-menu nano-nav-item.active,
  nano-global-nav.overflow-menu nano-nav-item[selected] {
    color: var(--overflow-active-text-color) !important;
  }
  nano-global-nav.overflow-menu nano-nav-item::part(modal) {
    background-color: var(--overflow-bg-color);
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] {
    display: flex;
    flex-direction: column;
    gap: var(--nano-spacing-md);
    padding-block-end: var(--nano-spacing-md);
    color: var(--overflow-text-color);
  }
  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] > div {
    display: none;
  }
  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] nano-accordion,
  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] nano-details {
    display: block;
  }
  nano-global-nav.overflow-menu [slot=close-button] {
    color: var(--overflow-text-color);
    padding-block: var(--nano-spacing-md);
    display: flex;
    gap: var(--nano-spacing-sm);
    align-items: center;
    cursor: pointer;
    inline-size: 100%;
  }
  nano-global-nav.overflow-menu [slot=close-button]:hover {
    color: var(--nano-color-blue-cerulean-700);
  }
  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);
    min-inline-size: var(--size);
    block-size: var(--size);
    background-color: var(--nano-color-fill-neutral-weak);
    font-size: calc(var(--size) * 0.5);
    font-weight: var(--nano-font-weight-normal);
    color: var(--nano-color-text-inverse);
    -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;
  }
}
.nano-in-page-nav {
  --color-bottom-border: var(--nano-color-border-default);
  --color-text: var(--nano-color-text-default);
  --color-primary: var(--nano-color-text-primary);
  --color-text-hover: var(--nano-color-text-hover);
  --color-border-active: var(--nano-color-border-accent);
  --border-active: 3px solid var(--color-border-active);
  --color-bg: var(--nano-color-surface-brand-feature);
  --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);
}
.nano-in-page-nav:dir(rtl) {
  --flip-icon-ltr: 0;
}
.nano-in-page-nav a,
.nano-in-page-nav ul,
.nano-in-page-nav li {
  all: unset;
}
.nano-in-page-nav ul {
  display: flex;
  flex-direction: column;
  list-style: none;
}
.nano-in-page-nav ul:not(ul ul) {
  padding: 0 var(--spacing-l2) 0 var(--spacing-l2);
}
.nano-in-page-nav a {
  cursor: pointer;
}
.nano-in-page-nav a:hover {
  text-decoration: underline;
}
.nano-in-page-nav a:focus-visible {
  outline: var(--nano-focus-ring);
  outline-offset: var(--nano-focus-ring-offset);
}
.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%;
}
.nano-in-page-nav ul > li:not(ul > li li):not(:last-of-type) {
  border-block-end: 1px solid var(--color-bottom-border);
}
.nano-in-page-nav ul > li:not(ul > li li) span, .nano-in-page-nav ul > li:not(ul > li li) a {
  color: var(--color-text);
}
.nano-in-page-nav ul > li:not(ul > li li) span.is-active, .nano-in-page-nav ul > li:not(ul > li li) a.is-active {
  border-inline-start: var(--border-active);
  padding-inline-start: 1rem;
  display: block;
}
.nano-in-page-nav ul > li:not(ul > li li) span:hover, .nano-in-page-nav ul > li:not(ul > li li) a:hover {
  color: var(--color-text-hover);
}
.nano-in-page-nav nano-details.is-active::part(header) {
  border-inline-start: var(--border-active);
  padding-inline-start: 1rem !important;
  color: var(--color-primary);
}
.nano-in-page-nav ul > li > ul,
.nano-in-page-nav ul > li > .nano-details ul {
  padding: var(--list-gap) 0 0 var(--spacing-l2);
  gap: var(--list-gap);
}
.nano-in-page-nav ul > li > ul a,
.nano-in-page-nav ul > li > .nano-details ul a {
  color: var(--color-primary) !important;
}
.nano-in-page-nav ul > li > ul > li > .nano-details > ul,
.nano-in-page-nav ul > li > .nano-details ul > li > .nano-details ul {
  padding: var(--list-gap) 0 0 var(--nano-spacing-xl);
}
.nano-in-page-nav .nano-details .nano-details:not(.nano-details .nano-details .nano-details) {
  color: var(--color-text);
}
.nano-in-page-nav .nano-details {
  --padding: 0;
  --btn-bg-color: transparent;
  --btn-bg-color--open: var(--nano-color-surface-brand-feature);
  --btn-bg-color--hover: transparent;
  border: none;
  color: var(--color-primary);
}
.nano-in-page-nav .nano-details.is-active [part~=header],
.nano-in-page-nav .nano-details .is-active::part(header) {
  border-inline-start: var(--border-active);
  padding-inline-start: 1rem !important;
  color: var(--color-primary);
}
.nano-in-page-nav .nano-details[open] > [slot=icon-start] {
  rotate: 90deg;
}
.nano-in-page-nav .nano-details::part(icon--start) {
  margin-inline-end: var(--spacing-l3);
}
.nano-in-page-nav .nano-details [part~=header], .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);
}
.nano-in-page-nav .nano-details [part~=header]:hover, .nano-in-page-nav .nano-details::part(header):hover {
  text-decoration: underline;
}
.nano-in-page-nav .nano-details:not(.nav-details) {
  color: var(--color-primary);
}
.nano-in-page-nav.external-links {
  --color-bg: var(--nano-color-background-default) !important;
  --color-border-active: var(--nano-color-border-accent);
}
.nano-in-page-nav.external-links ul ul {
  --border-active: 3px solid var(--nano-color-border-accent);
}

@layer components {
  :where(nano-collapsible-comparison, .nano-collapsible-comparison) {
    --color-bg: var(--nano-color-background-default);
    --color-border: var(--nano-color-border-default);
    --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);
    text-wrap: balance;
  }
  :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-sm);
    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-border-default);
  }
  :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-border-default);
  }
  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger) {
    font-size: var(--nano-font-size-sm);
    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 {
    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 {
    opacity: 1;
  }
  :where(nano-menu, .nano-menu) a {
    font-size: calc(var(--font-size) - 0.125rem);
    color: var(--nano-color-text-link);
  }
  :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-wrapper) {
    flex: 1;
  }
  :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) [slot=close-button],
  :where(nano-menu, .nano-menu) nano-content-links a {
    --icon-color: var(--nano-color-text-link);
    color: var(--nano-color-text-default);
    font-size: var(--font-size);
  }
  :where(nano-menu, .nano-menu) a:hover:not(:focus-visible),
  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not([disabled]) [slot=close-button]: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-icon-hover);
    color: var(--nano-color-text-default);
    background-color: var(--nano-color-surface-subtle-hover);
  }
  :where(nano-menu, .nano-menu) a:active:not(:focus-visible),
  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item):not([disabled]) [slot=close-button]: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-icon-primary);
    color: var(--nano-color-text-default);
    background-color: var(--nano-color-surface-subtle);
  }
  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [slot=close-button]:focus-visible,
  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger):focus-visible,
  :where(nano-menu, .nano-menu) a:focus-visible {
    --icon-color: var(--nano-color-icon-inverse);
    outline: none;
    background-color: var(--nano-color-fill-primary);
    color: var(--nano-color-text-inverse);
  }
  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item) [slot=close-button]:focus-visible:active,
  :where(nano-menu, .nano-menu) :where(nano-nav-item, .nano-nav-item)::part(trigger):focus-visible:active,
  :where(nano-menu, .nano-menu) a:focus-visible:active {
    background-color: var(--nano-color-text-primary);
  }
  :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) {
    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) {
    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-border-default);
  }
  :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 nano-icon, nano-icon-item .nano-icon {
    --icon-size: var(--icon-dims) !important;
  }
  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-md);
    line-height: var(--nano-line-height-dense);
    text-wrap: balance;
    color: var(--nano-color-text-default);
    text-align: center;
  }
  nano-icon-item p[slot=content] {
    all: unset;
    font-size: var(--nano-font-size-sm);
    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-icon-default);
  }
  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]) [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]) 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-text-link);
  }
  nano-icon-item a:hover {
    color: var(--nano-color-text-hover);
  }
  nano-icon-item a:hover [slot=heading] {
    color: var(--nano-color-text-hover);
  }
  nano-icon-item:has(a:hover) nano-icon {
    color: var(--nano-color-text-hover);
  }
}
@layer components {
  :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-lg);
    line-height: var(--nano-line-height-dense);
    text-wrap: balance;
    --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-border-default);
    --table-border-color-header: var(--nano-color-border-default);
    --table-background: var(--nano-color-background-default);
    --table-wrapper-max-height: 80vh;
    --table-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]) .nano-masked-overflow {
    --fade-size: 30px;
  }
  :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-width);
    max-block-size: var(--table-wrapper-max-height);
  }
  :where(nano-table, .nano-table):not([scrollable=false]) .nano-table__overflow-container {
    inline-size: var(--table-width);
  }
  :where(nano-table, .nano-table):not([scrollable=false]) .nano-table__overflow {
    max-inline-size: var(--table-width);
    max-block-size: var(--table-wrapper-max-height);
    position: relative;
    flex: 1;
  }
  :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-fill-secondary-hover);
  }
  :where(nano-table, .nano-table) tr[clickable]:hover {
    --table-background: var(--nano-color-surface-brand-feature);
  }
  :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;
    pointer-events: none;
  }
  :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: var(--nano-z-index-menubar);
  }
  :where(nano-table, .nano-table) tbody tr[sticky] {
    z-index: var(--nano-z-index-raised);
    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: var(--nano-z-index);
  }
  @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: calc(var(--nano-z-index) + 1);
  }
  @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 {
  nano-feature-box {
    --color: var(--nano-color-basic-white);
    --bg: var(--nano-color-surface-special);
    container-type: inline-size;
    display: grid;
    grid-template-columns: calc(50% - var(--nano-spacing-l1-default)) 1fr;
    gap: 0;
    background-color: var(--bg);
    color: var(--color);
    overflow: clip;
    position: relative;
    min-block-size: 270px;
  }
  nano-feature-box [slot] {
    grid-column: 2;
    grid-row: 1/-1;
  }
  nano-feature-box::before {
    content: "";
    display: block;
    grid-column: 1;
  }
  nano-feature-box [slot=img] {
    grid-column: 1;
    object-fit: cover;
    position: absolute;
    inline-size: calc(50% - var(--nano-spacing-l1-default));
    block-size: 101% !important;
    inset-block-start: 50%;
    transform: translateY(-50%);
  }
  @container (width < 650px) {
    nano-feature-box::before {
      display: none;
    }
    nano-feature-box [slot] {
      grid-column: 1/-1 !important;
      grid-row: 2;
    }
    nano-feature-box [slot=img] {
      grid-row: 1;
      grid-column: 1/-1 !important;
      position: static;
      transform: none;
      inset-block-start: 0;
      inline-size: 100%;
      block-size: auto !important;
      min-block-size: 0;
    }
  }
  nano-feature-box[img-position=end] {
    grid-template-columns: 1fr calc(50% - var(--nano-spacing-l1-default));
  }
  nano-feature-box[img-position=end] [slot] {
    grid-column: 1;
  }
  nano-feature-box[img-position=end] [slot=img] {
    grid-column: 2;
    min-inline-size: -webkit-fill-available;
    min-inline-size: -moz-available;
    min-inline-size: stretch;
  }
  nano-feature-box[img-position=end]::before {
    grid-column: 2;
  }
  nano-feature-box [slot=content] {
    padding: var(--nano-spacing-l1-default);
    display: flex;
    flex-direction: column;
    gap: var(--nano-spacing-sm);
  }
  nano-feature-box [slot=content] h1, nano-feature-box [slot=content] h2, nano-feature-box [slot=content] h3, nano-feature-box [slot=content] h4, nano-feature-box [slot=content] h5, nano-feature-box [slot=content] h6 {
    text-wrap: balance;
  }
  nano-feature-box [slot=content] a {
    color: var(--nano-color-blue-cerulean-700);
  }
  nano-feature-box [slot=content] > * {
    margin-block: unset;
    margin-block-start: unset;
    margin-block-end: unset;
  }
}
@layer components {
  nano-menu-drawer:not(.secondary-open) nano-nav-item:hover::part(trigger) {
    box-shadow: -3px 0 2px inset rgba(0, 0, 0, 0.15);
  }
  nano-menu-drawer > nano-nav-item {
    --padding: var(--padding-top) var(--nano-spacing-md) var(--padding-bottom) var(--padding-start);
    color-scheme: dark;
  }
  nano-menu-drawer > nano-nav-item:hover {
    background-color: var(--bg-color-hover);
  }
  nano-menu-drawer > nano-nav-item:active, nano-menu-drawer > nano-nav-item[selected] {
    background-color: var(--bg-color-selected);
  }
  nano-menu-drawer > nano-nav-item[open] {
    background-color: var(--bg-color-open);
  }
  nano-menu-drawer > nano-nav-item::part(trigger), nano-menu-drawer > nano-nav-item [part~=trigger] {
    gap: 1rem;
    border-block-end: var(--divider-color) 1px solid;
    white-space: nowrap;
    min-inline-size: fit-content;
  }
  nano-menu-drawer > nano-nav-item::part(trigger):focus-visible, nano-menu-drawer > nano-nav-item [part~=trigger]:focus-visible {
    outline: var(--nano-focus-ring);
    outline-offset: -3px;
  }
  nano-menu-drawer > nano-nav-item::part(modal) {
    position: absolute;
    inset: calc(var(--global-nav-height) * -1) 0 0 100%;
    z-index: -1;
    block-size: 100vh;
    inline-size: calc(100vw - (var(--menu-width) + var(--scrollbar-width, 0px)));
  }
  nano-menu-drawer > nano-nav-item::part(modal-content) {
    inline-size: 400px;
    background: var(--bg-color);
    block-size: 100vh;
    overflow: auto;
    scrollbar-width: thin;
    inset-inline-start: -400px;
    position: absolute;
    transition: inset-inline-start var(--nano-transition-fast) ease;
    padding: calc(var(--global-nav-height) + var(--nano-spacing-md)) var(--nano-spacing-md) var(--nano-spacing-md);
    box-shadow: var(--nano-shadow-ls);
  }
  nano-menu-drawer > nano-nav-item::part(modal-content modal-content--open) {
    inset-inline-start: 0;
  }
  nano-menu-drawer > nano-nav-item::part(modal-mask) {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  nano-menu-drawer > nano-nav-item::part(close-button) {
    display: flex;
    justify-content: flex-end;
    border-block-end: var(--divider-color) 1px solid;
    padding-block-end: var(--nano-spacing-sm);
    color: var(--nano-color-fill-primary);
    text-decoration: underline;
  }
  nano-menu-drawer > nano-nav-item::part(close-button):hover {
    color: var(--nano-color-fill-primary-hover);
  }
  nano-menu-drawer > nano-nav-item [slot=close-button] {
    cursor: pointer;
  }
  nano-menu-drawer > nano-nav-item [slot=secondary] {
    font-size: var(--nano-font-size-xs);
    color: var(--content-color);
  }
  nano-menu-drawer > nano-nav-item nano-icon {
    --icon-size: inherit;
  }
  nano-menu-drawer > nano-nav-item nano-icon[slot=icon-end] {
    margin-inline-end: calc((var(--nano-spacing-md)) / 2 * -1);
    color: var(--nano-color-fill-primary);
    position: relative;
  }
  nano-menu-drawer > nano-nav-item [slot=icon-start] {
    position: relative;
  }
  nano-menu-drawer > nano-nav-item [slot=icon-start] nano-badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    translate: 100% -50%;
  }
  [slot=secondary] .md__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }
  [slot=secondary] .md__list > * {
    all: unset;
    border-block-end: var(--divider-color) 1px solid;
    list-style: none;
    margin: 0;
    padding: var(--nano-spacing-sm) 0;
    font-size: var(--nano-font-size-xs);
    display: flex;
    flex-direction: column;
    gap: var(--nano-spacing-sm);
  }
  [slot=secondary] .md__list > *:is(button, a) {
    cursor: pointer;
    padding-inline: var(--nano-spacing-md);
  }
  [slot=secondary] .md__list > *:is(button, a):hover {
    background-color: var(--bg-color-hover);
  }
  [slot=secondary] .md__list > *:is(button, a):active {
    background-color: var(--bg-color-selected);
  }
  [slot=secondary] .md__list > *:is(button, a):focus-visible {
    outline: var(--nano-focus-ring);
    outline-offset: var(--nano-focus-ring-offset);
  }
  [slot=secondary] .md__list .md__list-head {
    display: flex;
    justify-content: space-between;
    gap: inherit;
    align-items: center;
  }
  [slot=secondary] .md__list .md__list-head :first-child {
    flex: 1;
  }
}
nano-increment input[type=number]::-webkit-inner-spin-button,
nano-increment input[type=number]::-webkit-outer-spin-button, .nano-increment input[type=number]::-webkit-inner-spin-button,
.nano-increment input[type=number]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
nano-increment input[type=number], .nano-increment input[type=number] {
  appearance: textfield;
}
nano-increment nano-input, .nano-increment nano-input {
  display: grid;
  grid-column: 1/span 3;
  grid-row: 1/span 2;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
nano-increment nano-input.has-focus, .nano-increment nano-input.has-focus {
  z-index: 2;
}
nano-increment nano-input > div,
nano-increment nano-input .form-ctrl,
nano-increment nano-input .form-ctrl__wrapper, .nano-increment nano-input > div,
.nano-increment nano-input .form-ctrl,
.nano-increment nano-input .form-ctrl__wrapper {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: 1/span 3;
  grid-row: 1/span 2;
}
nano-increment nano-input .form-ctrl__input, .nano-increment nano-input .form-ctrl__input {
  grid-column: 2;
  grid-row: 1;
}
nano-increment nano-input .form-ctrl__more, .nano-increment nano-input .form-ctrl__more {
  grid-column: 1/span 3;
  grid-row: 2;
  justify-self: start;
}
nano-increment nano-input .form-ctrl__validation-icon, .nano-increment nano-input .form-ctrl__validation-icon {
  display: none;
}

@layer components {
  nano-option-box {
    --spacing: var(--nano-spacing-md);
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: auto auto 1fr auto;
    gap: 0 var(--spacing);
    align-items: start;
    padding: var(--spacing);
    box-shadow: var(--nano-shadow-l1);
    container-type: inline-size;
  }
  nano-option-box [slot=header] {
    grid-area: header;
    font-size: var(--nano-font-size-lg);
    display: flex;
    justify-content: space-between;
    padding-block-end: var(--spacing);
    border-block-end: 2px solid var(--nano-color-border-accent);
    flex-wrap: wrap;
    grid-column: 1/-1;
    grid-row: 1;
    gap: 0 var(--spacing);
    margin: unset;
    font-weight: var(--nano-font-weight-normal);
    font-size: var(--nano-font-size-lg);
    line-height: var(--nano-line-height-dense);
    text-wrap: balance;
  }
  nano-option-box [slot=header] > * {
    margin: unset;
    padding: unset;
  }
  nano-option-box [slot=img] {
    align-self: start;
    grid-area: img;
    inline-size: 100%;
    block-size: auto;
    object-fit: cover;
    grid-row: 2;
    grid-column: 1;
    padding-block-start: var(--spacing);
  }
  @container (width < 417px) {
    nano-option-box [slot=img] {
      grid-column: 1/-1;
    }
  }
  nano-option-box [slot=content] {
    align-self: start;
    grid-area: content;
    grid-row: 2;
    grid-column: 2;
    margin: unset;
    padding: var(--spacing) 0 0 0;
    font-size: var(--nano-font-size-sm);
    line-height: var(--nano-line-height-normal);
    letter-spacing: var(--nano-letter-spacing-loose);
  }
  @container (width < 417px) {
    nano-option-box [slot=content] {
      grid-column: 1/-1;
      grid-row: 3;
    }
  }
  nano-option-box [slot=content] > * {
    margin: unset;
    padding: unset;
  }
  nano-option-box [slot=content]:not(.config-list, :has(.config-list)) {
    display: flex;
    flex-direction: column;
    gap: var(--nano-spacing-md);
    padding-block-end: var(--spacing);
  }
  nano-option-box [slot=content] ul.config-list, nano-option-box [slot=content]:is(ul.config-list) {
    align-self: start;
    list-style: none;
    display: grid;
    grid-template-columns: min-content 1fr;
  }
  nano-option-box [slot=content] ul.config-list > li, nano-option-box [slot=content]:is(ul.config-list) > li {
    font-size: var(--nano-font-size-sm);
    line-height: var(--nano-line-height-normal);
    letter-spacing: var(--nano-letter-spacing-loose);
    border-block-start: 1px solid var(--nano-color-border-default);
    padding: var(--nano-spacing-sm) 0;
    display: grid;
    grid-template-columns: subgrid;
    gap: 0 var(--nano-spacing-md);
    grid-column: 1/-1;
  }
  nano-option-box [slot=content] ul.config-list > li:first-of-type, nano-option-box [slot=content]:is(ul.config-list) > li:first-of-type {
    border-block-start: none;
  }
  nano-option-box [slot=content] ul.config-list > li strong, nano-option-box [slot=content]:is(ul.config-list) > li strong {
    font-size: var(--nano-font-size-sm);
    line-height: var(--nano-line-height-normal);
    font-weight: var(--nano-font-weight-bold);
  }
  nano-option-box [slot=content] ul.config-list > li:has(span) strong, nano-option-box [slot=content]:is(ul.config-list) > li:has(span) strong {
    grid-column: 1;
    grid-row: 1/-1;
  }
  nano-option-box [slot=content] ul.config-list > li:not(:has(span)), nano-option-box [slot=content]:is(ul.config-list) > li:not(:has(span)) {
    border-block-start: none;
  }
  nano-option-box [slot=content] ul.config-list > li:not(:has(span)) + li, nano-option-box [slot=content]:is(ul.config-list) > li:not(:has(span)) + li {
    border-block-start: none;
  }
  nano-option-box [slot=content] ul.config-list > li:not(:has(span)) strong, nano-option-box [slot=content]:is(ul.config-list) > li:not(:has(span)) strong {
    grid-column: 2;
  }
  nano-option-box [slot=content] ul.config-list > li *:not(strong), nano-option-box [slot=content]:is(ul.config-list) > li *:not(strong) {
    grid-column: 2;
  }
  nano-option-box [slot=content] ul.config-list > li .meta, nano-option-box [slot=content]:is(ul.config-list) > li .meta {
    font-size: var(--nano-font-size-2xs);
    line-height: var(--nano-line-height-normal);
    letter-spacing: var(--nano-letter-spacing-loose);
    color: var(--nano-color-text-neutral);
  }
  nano-option-box:not(:has([slot=img])) [slot=content] {
    grid-column: 1/-1;
  }
  @container (width < 417px) {
    nano-option-box:not(:has([slot=img])) [slot=content] {
      grid-row: 2/span 2;
    }
  }
  nano-option-box [slot=footer] {
    grid-area: footer;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    grid-column: 1/-1;
    grid-row: 3/span 2;
    margin: unset;
    border-block-start: 1px solid var(--nano-color-border-default);
    padding-block-start: var(--spacing);
  }
  @container (width < 417px) {
    nano-option-box [slot=footer] {
      grid-row: 4;
    }
  }
  nano-option-box [slot=footer] > * {
    margin: unset;
    padding: unset;
  }
}
@layer components {
  nano-search-result {
    display: contents;
  }
  nano-search-result article {
    display: flex;
    flex-direction: column;
    gap: var(--nano-spacing-sm);
  }
  nano-search-result *:focus-visible {
    outline: var(--nano-focus-ring);
    outline-offset: var(--nano-focus-ring-offset);
  }
  nano-search-result .search__highlight, nano-search-result .highlight {
    background: var(--nano-color-highlight);
    font-style: normal;
  }
  nano-search-result [slot],
  nano-search-result [slot] > * {
    padding: 0;
    margin: 0;
  }
  nano-search-result [slot]:is(a),
  nano-search-result [slot] > *:is(a) {
    text-decoration: none;
  }
  nano-search-result [slot=title],
  nano-search-result [slot=title] > :first-child {
    font-size: var(--nano-font-size-sm);
    line-height: var(--nano-line-height-normal);
    font-weight: var(--nano-font-weight-bold);
    order: 0;
  }
  nano-search-result a[slot=title],
  nano-search-result a[slot=title] > *,
  nano-search-result [slot=title] a {
    color: var(--nano-color-text-link);
    text-decoration: underline;
  }
  nano-search-result [slot=content],
  nano-search-result [slot=content] > * {
    font-size: var(--nano-font-size-xs);
    line-height: var(--nano-line-height-normal);
    letter-spacing: var(--nano-letter-spacing-loose);
    color: var(--nano-color-text-default);
    order: 1;
  }
  nano-search-result [slot=meta],
  nano-search-result [slot=meta] > * {
    font-size: var(--nano-font-size-2xs);
    line-height: var(--nano-line-height-normal);
    letter-spacing: var(--nano-letter-spacing-loose);
  }
  nano-search-result [slot=meta] > *:not(:last-child)::after {
    content: "|";
    color: var(--nano-color-text-placeholder);
    display: inline-block;
    padding-inline-start: var(--nano-spacing-md);
  }
  nano-search-result [slot=meta] {
    order: 2;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--nano-spacing-xs) var(--nano-spacing-md);
  }
  nano-search-result [slot=tags] {
    order: 3;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--nano-spacing-sm);
  }
  nano-search-result [slot=tags]:is(ul, ol) {
    list-style: none;
  }
  nano-search-result [slot=tags]:is(ul, ol) li {
    display: contents;
  }
  nano-search-result [slot=tags] ul, nano-search-result [slot=tags] ol {
    list-style: none;
    display: contents;
  }
  nano-search-result [slot=tags] ul li, nano-search-result [slot=tags] ol li {
    display: contents;
  }
}
@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-component-icon-arrow: 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%20267.3c6.2-6.2%206.2-16.4%200-22.6l-176-176c-6.2-6.2-16.4-6.2-22.6%200s-6.2%2016.4%200%2022.6L393.4%20240%2016%20240c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016l377.4%200L244.7%20420.7c-6.2%206.2-6.2%2016.4%200%2022.6s16.4%206.2%2022.6%200l176-176z'/></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-option-box,
  nano-table,
  nano-feature-box,
  nano-search-result {
    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-masked-overflow,
  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,
  body:not(.nano-eager) nano-more-less,
  body:not(.nano-eager) nano-card-carousel {
    visibility: hidden;
  }
  body:not(.nano-eager) .hydrated {
    visibility: inherit;
  }
  body:not(.nano-eager) nano-card-carousel {
    opacity: 0;
  }
  body:not(.nano-eager) nano-card-carousel.hydrated {
    opacity: inherit;
  }
  nano-alert:not(.hydrated, [open]),
  nano-dialog:not(.hydrated),
  nano-drawer:not(.hydrated) {
    display: none;
  }
  nano-alert[open]:not(.hydrated) {
    display: block;
    min-block-size: 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-progress-bar {
    --height: 0.625rem;
  }
  nano-progress-bar[size=small] {
    --height: 0.3125rem;
  }
  nano-progress-bar[size=large] {
    --height: 0.9375rem;
  }
  nano-progress-bar progress {
    block-size: var(--height);
  }
  @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;
    }
  }
}