@nordcode/ui 2.2.0 → 2.2.2

package/out/complete_configless.css

@@ -1,2651 +0,0 @@
-@layer config;
-
-@layer theme {
-  :where(html) {
-    --lightningcss-light: initial;
-    --lightningcss-dark: ;
-    color-scheme: light dark;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :where(html) {
-      --lightningcss-light: ;
-      --lightningcss-dark: initial;
-    }
-  }
-
-  :where([data-theme="light"]) {
-    --lightningcss-light: initial;
-    --lightningcss-dark: ;
-    color-scheme: light;
-  }
-
-  :where([data-theme="dark"]) {
-    --lightningcss-light: ;
-    --lightningcss-dark: initial;
-    color-scheme: dark;
-  }
-
-  :where(:root) {
-    --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
-    --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
-    --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
-    --color-brand-primary-surface: var(--lightningcss-light, var(--color-brand-primary-surface-light)) var(--lightningcss-dark, var(--color-brand-primary-surface-dark));
-    --color-brand-primary-hover: var(--lightningcss-light, var(--color-brand-primary-hover-light)) var(--lightningcss-dark, var(--color-brand-primary-hover-light));
-    --color-brand-primary-contrast-lightness: var(--lightningcss-light, var(--color-brand-primary-contrast-lightness-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-lightness-dark));
-    --color-brand-primary-contrast: var(--lightningcss-light, var(--color-brand-primary-contrast-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-dark));
-    --color-brand-secondary-emphasis: var(--lightningcss-light, var(--color-brand-secondary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-secondary-emphasis-dark));
-    --color-brand-secondary-base: var(--lightningcss-light, var(--color-brand-secondary-base-light)) var(--lightningcss-dark, var(--color-brand-secondary-base-dark));
-    --color-brand-secondary-surface: var(--lightningcss-light, var(--color-brand-secondary-surface-light)) var(--lightningcss-dark, var(--color-brand-secondary-surface-dark));
-    --color-brand-secondary-hover: var(--lightningcss-light, var(--color-brand-secondary-hover-light)) var(--lightningcss-dark, var(--color-brand-secondary-hover-dark));
-    --color-brand-secondary-contrast: var(--lightningcss-light, var(--color-brand-secondary-contrast-light)) var(--lightningcss-dark, var(--color-brand-secondary-contrast-dark));
-    --color-text-base: var(--lightningcss-light, var(--color-text-base-light)) var(--lightningcss-dark, var(--color-text-base-dark));
-    --color-text-muted: var(--lightningcss-light, var(--color-text-muted-light)) var(--lightningcss-dark, var(--color-text-muted-dark));
-    --color-text-subtle: var(--lightningcss-light, var(--color-text-subtle-light)) var(--lightningcss-dark, var(--color-text-subtle-dark));
-    --color-text-on-emphasis: var(--lightningcss-light, var(--color-text-on-emphasis-light)) var(--lightningcss-dark, var(--color-text-on-emphasis-dark));
-    --color-text-hover: var(--lightningcss-light, var(--color-text-hover-light)) var(--lightningcss-dark, var(--color-text-hover-dark));
-    --color-surface-base: var(--lightningcss-light, var(--color-surface-base-light)) var(--lightningcss-dark, var(--color-surface-base-dark));
-    --color-surface-muted: var(--lightningcss-light, var(--color-surface-muted-light)) var(--lightningcss-dark, var(--color-surface-muted-dark));
-    --color-surface-subtle: var(--lightningcss-light, var(--color-surface-subtle-light)) var(--lightningcss-dark, var(--color-surface-subtle-dark));
-    --color-surface-emphasis: var(--lightningcss-light, var(--color-surface-emphasis-light)) var(--lightningcss-dark, var(--color-surface-emphasis-dark));
-    --color-border-base: var(--lightningcss-light, var(--color-border-base-light)) var(--lightningcss-dark, var(--color-border-base-dark));
-    --color-border-muted: var(--lightningcss-light, var(--color-border-muted-light)) var(--lightningcss-dark, var(--color-border-muted-dark));
-    --color-border-subtle: var(--lightningcss-light, var(--color-border-subtle-light)) var(--lightningcss-dark, var(--color-border-subtle-dark));
-    --color-border-on-emphasis: var(--lightningcss-light, var(--color-border-on-emphasis-light)) var(--lightningcss-dark, var(--color-border-on-emphasis-dark));
-    --color-border-hover: var(--lightningcss-light, var(--color-border-hover-light)) var(--lightningcss-dark, var(--color-border-hover-dark));
-    --color-status-info-emphasis: var(--lightningcss-light, var(--color-status-info-emphasis-light)) var(--lightningcss-dark, var(--color-status-info-emphasis-dark));
-    --color-status-info-base: var(--lightningcss-light, var(--color-status-info-base-light)) var(--lightningcss-dark, var(--color-status-info-base-dark));
-    --color-status-info-surface: var(--lightningcss-light, var(--color-status-info-surface-light)) var(--lightningcss-dark, var(--color-status-info-surface-dark));
-    --color-status-info-hover: var(--lightningcss-light, var(--color-status-info-hover-light)) var(--lightningcss-dark, var(--color-status-info-hover-light));
-    --color-status-info-contrast-lightness: var(--lightningcss-light, var(--color-status-info-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-info-contrast-lightness-dark));
-    --color-status-info-contrast: var(--lightningcss-light, var(--color-status-info-contrast-light)) var(--lightningcss-dark, var(--color-status-info-contrast-dark));
-    --color-status-success-emphasis: var(--lightningcss-light, var(--color-status-success-emphasis-light)) var(--lightningcss-dark, var(--color-status-success-emphasis-dark));
-    --color-status-success-base: var(--lightningcss-light, var(--color-status-success-base-light)) var(--lightningcss-dark, var(--color-status-success-base-dark));
-    --color-status-success-surface: var(--lightningcss-light, var(--color-status-success-surface-light)) var(--lightningcss-dark, var(--color-status-success-surface-dark));
-    --color-status-success-hover: var(--lightningcss-light, var(--color-status-success-hover-light)) var(--lightningcss-dark, var(--color-status-success-hover-light));
-    --color-status-success-contrast-lightness: var(--lightningcss-light, var(--color-status-success-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-success-contrast-lightness-dark));
-    --color-status-success-contrast: var(--lightningcss-light, var(--color-status-success-contrast-light)) var(--lightningcss-dark, var(--color-status-success-contrast-dark));
-    --color-status-warning-emphasis: var(--lightningcss-light, var(--color-status-warning-emphasis-light)) var(--lightningcss-dark, var(--color-status-warning-emphasis-dark));
-    --color-status-warning-base: var(--lightningcss-light, var(--color-status-warning-base-light)) var(--lightningcss-dark, var(--color-status-warning-base-dark));
-    --color-status-warning-surface: var(--lightningcss-light, var(--color-status-warning-surface-light)) var(--lightningcss-dark, var(--color-status-warning-surface-dark));
-    --color-status-warning-hover: var(--lightningcss-light, var(--color-status-warning-hover-light)) var(--lightningcss-dark, var(--color-status-warning-hover-light));
-    --color-status-warning-contrast-lightness: var(--lightningcss-light, var(--color-status-warning-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-lightness-dark));
-    --color-status-warning-contrast: var(--lightningcss-light, var(--color-status-warning-contrast-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-dark));
-    --color-status-danger-emphasis: var(--lightningcss-light, var(--color-status-danger-emphasis-light)) var(--lightningcss-dark, var(--color-status-danger-emphasis-dark));
-    --color-status-danger-base: var(--lightningcss-light, var(--color-status-danger-base-light)) var(--lightningcss-dark, var(--color-status-danger-base-dark));
-    --color-status-danger-surface: var(--lightningcss-light, var(--color-status-danger-surface-light)) var(--lightningcss-dark, var(--color-status-danger-surface-dark));
-    --color-status-danger-hover: var(--lightningcss-light, var(--color-status-danger-hover-light)) var(--lightningcss-dark, var(--color-status-danger-hover-light));
-    --color-status-danger-contrast-lightness: var(--lightningcss-light, var(--color-status-danger-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-lightness-dark));
-    --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
-    --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
-    --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
-    --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
-  }
-}
-
-@layer reset {
-  *, :after, :before {
-    box-sizing: border-box;
-  }
-
-  :where(:not(dialog)) {
-    margin: 0;
-  }
-
-  :where(:not(fieldset, progress, meter)) {
-    background-repeat: no-repeat;
-    background-origin: border-box;
-    border-style: solid;
-    border-width: 0;
-  }
-
-  :where(:focus-visible) {
-    transition: outline-offset var(--transition-duration-quick-1) var(--ease-2);
-  }
-
-  :where(:not(:active):focus-visible) {
-    outline: 2px solid var(--color-brand-primary-base);
-    box-shadow: 0 0 0 2px var(--color-surface-base);
-    outline-offset: 2px;
-  }
-
-  :where(:focus:not(:focus-visible)) {
-    outline: none;
-  }
-
-  :where(:root) {
-    -webkit-text-size-adjust: none;
-    -moz-text-size-adjust: none;
-    text-size-adjust: none;
-    block-size: 100%;
-    color: var(--color-text-base);
-    background-color: var(--color-surface-muted);
-    font-family: var(--font-family-default);
-    line-height: var(--line-height-base);
-    font-weight: var(--font-weight-default);
-    font-size-adjust: from-font;
-    interpolate-size: allow-keywords;
-    font-kerning: normal;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    hanging-punctuation: first allow-end last;
-    word-break: break-word;
-  }
-
-  :where(body) {
-    -webkit-text-decoration-skip-ink: auto;
-    text-decoration-skip-ink: auto;
-    font-optical-sizing: auto;
-    font-kerning: normal;
-    min-block-size: 100vh;
-  }
-
-  :where(ul[role="list"], ol[role="list"]) {
-    list-style: none;
-  }
-
-  :where(h1, h2, h3, h4) {
-    text-wrap: balance;
-  }
-
-  :where(a:not([class])) {
-    color: currentColor;
-  }
-
-  :where(img, svg, video, canvas, audio, iframe, embed, object) {
-    display: block;
-  }
-
-  :where(svg) {
-    flex: none;
-  }
-
-  :where(img, svg, video) {
-    block-size: auto;
-    max-inline-size: 100%;
-  }
-
-  :where(figure) {
-    grid-template-rows: 1fr auto;
-    place-content: center;
-    gap: 0;
-    display: grid;
-  }
-
-  :where(a[href], area, button, input:not([type="text"], [type="email"], [type="number"], [type="password"], [type=""], [type="tel"], [type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"], pre)) {
-    cursor: pointer;
-  }
-
-  :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  :where(input, button, textarea, select) {
-    font: inherit;
-    color: inherit;
-    letter-spacing: inherit;
-  }
-
-  :where(input[type="file"])::-webkit-file-upload-button {
-    font: inherit;
-    color: inherit;
-    letter-spacing: inherit;
-  }
-
-  :where(html) {
-    overflow-y: scroll;
-  }
-
-  @supports (scrollbar-gutter: stable) {
-    :where(html) {
-      scrollbar-gutter: stable;
-      overflow-y: auto;
-    }
-  }
-
-  :where(pre) {
-    white-space: pre-wrap;
-  }
-}
-
-@layer base {
-  :where(:root) {
-    accent-color: var(--color-brand-primary-base);
-    caret-color: var(--color-brand-primary-base);
-    scrollbar-color: var(--color-text-subtle) transparent;
-  }
-
-  :where(dt) {
-    font-weight: var(--font-weight-active);
-    color: var(--color-text-base);
-  }
-
-  :where(dd) {
-    font-weight: var(--font-weight-default);
-    color: var(--color-text-base);
-  }
-
-  :where(dd):not(:last-of-type) {
-    border-bottom: var(--border-width-thin) solid var(--color-border-muted);
-    padding-block-end: var(--control-spacing-base, .75em);
-  }
-
-  :where(dl:not([class]), .nc-description-list) {
-    overflow-wrap: anywhere;
-    align-items: flex-start;
-    row-gap: var(--control-spacing-base, .75em);
-    grid-template-columns: .25fr .75fr;
-    inline-size: 100%;
-    max-inline-size: 100%;
-    display: grid;
-    container: description-list / inline-size;
-  }
-
-  :where(dd, dt) {
-    max-inline-size: var(--measure-base);
-    grid-column: 1 / span 2;
-  }
-
-  @container description-list (width >= 30rem) {
-    :where(dt) {
-      grid-column: 1 / 1;
-      min-block-size: 100%;
-      padding-block-end: 0;
-      padding-inline-end: var(--control-spacing-base, 1em);
-    }
-
-    :where(dt):not(:last-of-type) {
-      border-bottom: var(--border-width-thin) solid var(--color-border-muted);
-      padding-block-end: var(--control-spacing-base, .75em);
-    }
-
-    :where(dd) {
-      grid-column: 2 / 2;
-      min-block-size: 100%;
-    }
-  }
-
-  :where(small) {
-    font-size: var(--font-size-small);
-  }
-
-  :where(figure) {
-    border-radius: var(--border-radius-medium);
-  }
-
-  :where(figure) :where(img, picture) {
-    border-start-start-radius: inherit;
-    border-start-end-radius: inherit;
-  }
-
-  :where(figure) :where(figcaption) {
-    text-align: center;
-    border-end-end-radius: inherit;
-    border-end-start-radius: inherit;
-  }
-
-  :where(figcaption) {
-    color: var(--color-surface-subtle);
-    background-color: var(--color-text-base);
-    padding: var(--control-spacing-nearest, .375em) var(--control-spacing-base, .75em);
-    display: block;
-  }
-
-  :where(details) {
-    --p-x-details: var(--control-spacing-far, 1em);
-    --p-y-details: var(--control-spacing-far, 1em);
-    --b-r-details: var(--border-radius-medium);
-    background-color: var(--color-surface-muted);
-    border-radius: var(--b-r-details);
-    padding: var(--p-y-details) var(--p-x-details);
-    inline-size: 100%;
-    box-shadow: 0 0 0 var(--border-width-thin) var(--color-border-base);
-  }
-
-  :where(details) > summary {
-    color: var(--color-text-base);
-    background: var(--color-surface-subtle);
-    font-weight: var(--font-weight-heading);
-    border-radius: var(--b-r-details);
-    padding: var(--p-y-details) var(--p-x-details);
-    margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details));
-  }
-
-  :where(details)[open] > summary {
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
-    margin-block-end: var(--p-y-details);
-  }
-
-  .note, blockquote {
-    inline-size: 100%;
-    color: var(--color-text-base);
-    font-family: var(--font-family-serif);
-    quotes: auto;
-    font-size: var(--font-size-large);
-    margin-inline: 0;
-    padding: 0;
-    padding-inline-start: var(--control-spacing-far, 1em);
-    position: relative;
-  }
-
-  :is(.note, blockquote) p {
-    max-inline-size: var(--measure-base);
-  }
-
-  :is(.note, blockquote) p:first-of-type:before {
-    content: open-quote;
-  }
-
-  :is(.note, blockquote) p:last-of-type:after {
-    content: close-quote;
-  }
-
-  :is(.note, blockquote) cite {
-    font-family: var(--font-family-default);
-    font-size: var(--font-size-base);
-    max-inline-size: max-content;
-    color: color-mix(in oklch, currentColor calc(var(--transparency-weaker) * 100%), transparent);
-    margin-block-start: var(--spacing-near);
-    display: block;
-  }
-
-  :is(.note, blockquote) cite:before {
-    content: "—";
-    margin-inline-end: var(--control-spacing-near, .5em);
-  }
-
-  cite {
-    font-family: var(--font-family-serif);
-    font-style: normal;
-  }
-
-  :where(hr) {
-    inline-size: 100%;
-    block-size: var(--border-width-medium);
-    background: var(--color-border-base);
-    border-block-start: 0;
-  }
-
-  :where(h1, h2, h3, h4, h5, h6) {
-    line-height: var(--line-height-small);
-    color: inherit;
-    max-inline-size: 100%;
-    font-weight: var(--font-weight-heading);
-  }
-
-  :where(h1) {
-    font-size: var(--font-size-display);
-  }
-
-  :where(h2) {
-    font-size: var(--font-size-largest);
-  }
-
-  :where(h3) {
-    font-size: var(--font-size-large);
-  }
-
-  :where(h4) {
-    font-size: var(--font-size-base);
-  }
-
-  :where(h5) {
-    font-size: var(--font-size-small);
-  }
-
-  :where(h6) {
-    font-size: var(--font-size-smallest);
-  }
-
-  ::marker {
-    color: var(--color-brand-primary-base);
-  }
-
-  ::selection {
-    background-color: var(--color-brand-primary-base);
-    color: var(--color-brand-primary-contrast);
-  }
-
-  ::target-text {
-    background-color: var(--color-brand-primary-base);
-    color: var(--color-brand-primary-contrast);
-  }
-
-  :where(a, .nc-link) {
-    color: inherit;
-    font-family: var(--font-family-link);
-    text-underline-offset: var(--control-spacing-nearest, .375em);
-    font-weight: var(--font-weight-default);
-    cursor: pointer;
-    letter-spacing: var(--tracking-tight);
-    text-decoration: underline;
-    text-decoration-thickness: .1em;
-  }
-
-  :where(a, .nc-link):visited {
-    opacity: .72;
-  }
-
-  :where(a, .nc-link):hover {
-    -webkit-text-decoration-color: var(--color-brand-primary-base);
-    text-decoration-color: var(--color-brand-primary-base);
-  }
-
-  :where(em, i) {
-    font-family: var(--font-family-serif);
-  }
-
-  :where(strong, b) {
-    font-weight: var(--font-weight-strong);
-  }
-
-  :where(dfn, var) {
-    font-family: var(--font-family-mono);
-    letter-spacing: var(--tracking-tight);
-    font-weight: var(--font-weight-default);
-  }
-
-  :where(abbr) {
-    -webkit-text-decoration-color: var(--color-brand-primary-base);
-    text-decoration-color: var(--color-brand-primary-base);
-    font-variant-numeric: oldstyle-nums;
-    font-size: 110%;
-    font-variant-caps: all-small-caps;
-  }
-
-  :where([aria-disabled="true"], .disabled, :disabled) {
-    color: inherit;
-    opacity: 1;
-    cursor: not-allowed;
-    filter: contrast(.64) opacity(.64);
-  }
-
-  :where(del, ins, mark, code, kbd, var) {
-    padding-inline: var(--control-spacing-tiny, .25em);
-    border-radius: var(--border-radius-small);
-    line-height: inherit;
-    -webkit-box-decoration-break: clone;
-    box-decoration-break: clone;
-  }
-
-  :where(code, kbd, var) {
-    font-family: var(--font-family-mono);
-    letter-spacing: 0;
-    font-weight: var(--font-weight-default);
-    padding-block: var(--control-spacing-minimal, .125em);
-    -webkit-hyphens: none;
-    hyphens: none;
-    tab-size: 4;
-    text-align: left;
-    word-spacing: normal;
-    overflow-wrap: normal;
-    max-inline-size: fit-content;
-    font-style: normal;
-  }
-
-  :where(code) {
-    background: var(--color-surface-subtle);
-  }
-
-  :where(var) {
-    background: var(--color-brand-primary-surface);
-    color: var(--color-brand-primary-emphasis);
-  }
-
-  :where(kbd) {
-    background: var(--color-surface-subtle);
-    border: var(--border-width-thin) solid var(--color-border-base);
-    box-shadow: var(--shadow-nearest);
-    font-weight: var(--font-weight-active);
-  }
-
-  :where(pre) {
-    padding: var(--control-spacing-far, 1em);
-    inline-size: 100%;
-    color: var(--color-text-base);
-    border: var(--border-width-medium) solid var(--color-border-base);
-    border-radius: var(--border-radius-medium);
-    background: var(--color-surface-subtle);
-    -webkit-overflow-scrolling: touch;
-    overflow-x: auto;
-  }
-
-  :where(pre) code {
-    white-space: pre;
-    background: none;
-    border-radius: 0;
-    padding: 0;
-  }
-
-  :where(table) {
-    --_nc-table-border-radius: var(--nc-table-border-radius, var(--border-radius-medium));
-    border-collapse: separate;
-    border-spacing: 0;
-    text-align: left;
-    border: var(--border-width-medium) solid var(--color-border-base);
-    border-radius: var(--_nc-table-border-radius);
-    inline-size: 100%;
-  }
-
-  :where(table > thead th:first-child) {
-    border-start-start-radius: var(--_nc-table-border-radius);
-  }
-
-  :where(table > thead th:last-child) {
-    border-start-end-radius: var(--_nc-table-border-radius);
-  }
-
-  :where(table > tfoot th:first-child) {
-    border-end-start-radius: var(--_nc-table-border-radius);
-  }
-
-  :where(table > tfoot th:last-child) {
-    border-end-end-radius: var(--_nc-table-border-radius);
-  }
-
-  :where(td, th) {
-    padding: var(--control-spacing-near, .5em);
-    line-height: var(--line-height-small);
-    white-space: nowrap;
-    font-variant-numeric: tabular-nums;
-  }
-
-  :where(td), :where(thead th) {
-    border-block-end: var(--border-width-thin) solid var(--color-border-muted);
-  }
-
-  :where(tfoot th) {
-    border-block-start: var(--border-width-thin) solid var(--color-border-muted);
-  }
-
-  :where(th) {
-    font-weight: var(--font-weight-active);
-    color: var(--color-text-muted);
-    background-color: var(--color-surface-subtle);
-  }
-
-  :where(tbody tr:hover) {
-    background: var(--color-brand-primary-hover);
-  }
-
-  :where(caption) {
-    color: var(--color-text-base);
-  }
-
-  :where(tr:has(td) th) {
-    border-block-end: var(--border-width-thin) solid var(--color-border-muted);
-    border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
-  }
-
-  :where(tr:last-child:has(td) th) {
-    border-block-end: none;
-  }
-
-  :where(tr:last-child > td) {
-    border: none;
-  }
-
-  :where(tbody tr:nth-child(2n) > td) {
-    background-color: var(--color-surface-muted);
-  }
-
-  :where(td, math, time[datetime*=":"]) {
-    font-variant-numeric: tabular-nums lining-nums slashed-zero;
-  }
-
-  :target {
-    scroll-margin-block-start: 2ex;
-  }
-
-  :where(del) {
-    color: var(--color-status-danger-emphasis);
-    -webkit-text-decoration-color: var(--color-status-danger-emphasis);
-    text-decoration-color: var(--color-status-danger-emphasis);
-    background: var(--color-status-danger-surface);
-  }
-
-  :where(ins) {
-    color: var(--color-status-success-emphasis);
-    -webkit-text-decoration-color: var(--color-status-success-emphasis);
-    text-decoration-color: var(--color-status-success-emphasis);
-    background: var(--color-status-success-surface);
-  }
-
-  :where(mark) {
-    color: var(--color-brand-primary-emphasis);
-    background: var(--color-brand-primary-surface);
-  }
-
-  :where(ul, ol) {
-    padding-inline-start: var(--control-spacing-farthest, 1.5em);
-  }
-
-  :where(li + li), :where(li > :is(ul, ol)) {
-    margin-block-start: var(--control-spacing-near, .5em);
-  }
-
-  @supports (font-variant-position: sub) {
-    :where(sub) {
-      vertical-align: baseline;
-      font-size: 100%;
-      line-height: inherit;
-      font-variant-position: sub;
-    }
-  }
-
-  @supports (font-variant-position: super) {
-    :where(sup) {
-      vertical-align: baseline;
-      font-size: 100%;
-      line-height: inherit;
-      font-variant-position: super;
-    }
-  }
-
-  :lang(en) > * {
-    quotes: "“" "”" "‘" "’";
-  }
-
-  :lang(de) > * {
-    quotes: "„" "“" "‚" "‘";
-  }
-
-  :where() {
-    content: open-quote;
-    content: close-quote;
-    content: "“";
-    content: "”";
-    margin-inline-start: calc(-1 * var(--control-spacing-near, .5em));
-  }
-
-  :where(.quoted p) {
-    hanging-punctuation: first last;
-  }
-
-  @supports (hanging-punctuation: first last) {
-    :where() {
-      margin-inline-start: 0;
-    }
-  }
-
-  :where(.prose) {
-    -webkit-hyphens: auto;
-    hyphens: auto;
-    hyphenate-limit-chars: 7 4 3;
-    hyphenate-limit-lines: 2;
-    hyphenate-limit-zone: 8%;
-    hyphenate-limit-last: always;
-    text-wrap: pretty;
-  }
-
-  :where(.prose p) {
-    text-wrap: pretty;
-    font-variant-numeric: oldstyle-nums proportional-nums;
-    max-inline-size: var(--measure-base);
-  }
-
-  :where(.prose pre, .prose code, .prose var, .prose samp, .prose kbd, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6) {
-    -webkit-hyphens: manual;
-    hyphens: manual;
-  }
-}
-
-@layer utils {
-  :where(.nc-box) {
-    padding: var(--spacing-base);
-  }
-
-  :where(.nc-box).-bordered {
-    border: var(--border-width-thin) solid var(--border, var(--color-border-base));
-    border-radius: var(--border-radius-medium);
-  }
-
-  :where(.nc-box).-tiny {
-    padding: var(--spacing-tiny);
-  }
-
-  :where(.nc-box).-nearest {
-    padding: var(--spacing-nearest);
-  }
-
-  :where(.nc-box).-near {
-    padding: var(--spacing-near);
-  }
-
-  :where(.nc-box).-base {
-    padding: var(--spacing-base);
-  }
-
-  :where(.nc-box).-far {
-    padding: var(--spacing-far);
-  }
-
-  :where(.nc-box).-farthest {
-    padding: var(--spacing-farthest);
-  }
-
-  :where(.nc-stack) {
-    gap: var(--spacing-base);
-    flex-direction: column;
-    align-items: flex-start;
-    display: flex;
-  }
-
-  :where(.nc-stack).-stretched {
-    inline-size: 100%;
-  }
-
-  :where(.nc-stack).-stretched > * {
-    inline-size: 100%;
-  }
-
-  :where(.nc-stack).-contained > * {
-    max-inline-size: 100%;
-  }
-
-  :where(.nc-flow) > * + * {
-    margin-block-start: var(--flow-gap, 1lh);
-  }
-
-  :where(.nc-flow) > * {
-    max-inline-size: var(--flow-base-meassure, 72ch);
-  }
-
-  :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
-    max-inline-size: var(--flow-headline-meassure, 32ch);
-    --flow-gap: 1.5lh;
-  }
-
-  :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
-    --flow-gap: .5lh;
-  }
-
-  :where(.nc-flow) > figure {
-    margin-inline: 0;
-  }
-
-  :where(.nc-flow) .breakAfter {
-    margin-block-end: auto;
-  }
-
-  :where(.nc-center) {
-    box-sizing: content-box;
-    max-inline-size: var(--center-measure, max-content);
-    padding-inline: var(--center-padding, 0);
-    margin-inline: auto;
-    position: relative;
-  }
-
-  :where(.nc-region) {
-    padding-block: var(--region-space, var(--spacing-farthest));
-  }
-
-  :where(.nc-cluster) {
-    gap: var(--spacing-base);
-    flex-flow: wrap;
-    align-items: flex-start;
-    display: flex;
-  }
-
-  :where(.nc-cluster).-centered {
-    align-items: center;
-  }
-
-  :where(.nc-cluster).-nowrap {
-    flex-wrap: nowrap;
-  }
-
-  :where(.nc-cluster).-between {
-    justify-content: space-between;
-  }
-
-  :where(.nc-with-sidebar) {
-    align-items: flex-start;
-    gap: var(--with-sidebar-gap, var(--spacing-far));
-    flex-wrap: wrap;
-    inline-size: 100%;
-    display: flex;
-  }
-
-  :where(.nc-with-sidebar) > [data-aside] {
-    flex-grow: 1;
-    flex-basis: var(--with-sidebar-target-width, 20rem);
-    min-width: min-content;
-  }
-
-  :where(.nc-with-sidebar) > [data-grow] {
-    min-width: var(--with-sidebar-min-size, 50%);
-    flex-grow: 999;
-    flex-basis: 0;
-  }
-
-  :where(.nc-with-sidebar)[data-direction="rtl"] {
-    flex-direction: row-reverse;
-  }
-
-  :where(.nc-with-sidebar).-centered {
-    align-items: center;
-  }
-
-  :where(.nc-grid) {
-    grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
-    gap: var(--grid-gap, var(--spacing-base));
-    display: grid;
-  }
-
-  :where(.nc-grid)[data-layout="50-50"] {
-    --grid-placement: auto-fit;
-    --grid-min-item-size: clamp(16rem, 50vw, 33rem);
-  }
-
-  :where(.nc-grid)[data-layout="thirds"] {
-    --grid-placement: auto-fit;
-    --grid-min-item-size: clamp(16rem, 33%, 20rem);
-  }
-
-  :where(.nc-switcher) {
-    gap: var(--switcher-gap, var(--spacing-base));
-    align-items: var(--switcher-vertical-alignment, flex-start);
-    flex-wrap: wrap;
-    display: flex;
-  }
-
-  :where(.nc-switcher) > * {
-    flex-grow: 1;
-    flex-basis: calc((var(--switcher-target-container-width, 40rem)  - 100%) * 999);
-  }
-
-  :where(.nc-switcher) > :nth-child(n+4) {
-    flex-basis: 100%;
-  }
-
-  :where(.nc-pile) {
-    grid: [pile] 1fr / [pile] 1fr;
-    place-items: center;
-    display: grid;
-  }
-
-  :where(.nc-pile) > * {
-    grid-area: pile;
-  }
-
-  :where(.nc-ram-grid) {
-    --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
-    --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
-    --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
-    --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
-    --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
-    gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
-    grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
-    display: grid;
-  }
-
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-inherit {
-    gap: inherit;
-  }
-
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-tiny {
-    gap: var(--spacing-tiny);
-  }
-
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nearest {
-    gap: var(--spacing-nearest);
-  }
-
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-near {
-    gap: var(--spacing-near);
-  }
-
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-base {
-    gap: var(--spacing-base);
-  }
-
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-far {
-    gap: var(--spacing-far);
-  }
-
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-farthest {
-    gap: var(--spacing-farthest);
-  }
-
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nogap {
-    gap: 0;
-  }
-}
-
-@layer components, helpers;
-
-@layer config.easings {
-  :where(html) {
-    --ease-1: cubic-bezier(.25, 0, .5, 1);
-    --ease-2: cubic-bezier(.25, 0, .4, 1);
-    --ease-3: cubic-bezier(.25, 0, .3, 1);
-    --ease-4: cubic-bezier(.25, 0, .2, 1);
-    --ease-5: cubic-bezier(.25, 0, .1, 1);
-    --ease-in-1: cubic-bezier(.25, 0, 1, 1);
-    --ease-in-2: cubic-bezier(.5, 0, 1, 1);
-    --ease-in-3: cubic-bezier(.7, 0, 1, 1);
-    --ease-in-4: cubic-bezier(.9, 0, 1, 1);
-    --ease-in-5: cubic-bezier(1, 0, 1, 1);
-    --ease-out-1: cubic-bezier(0, 0, .75, 1);
-    --ease-out-2: cubic-bezier(0, 0, .5, 1);
-    --ease-out-3: cubic-bezier(0, 0, .3, 1);
-    --ease-out-4: cubic-bezier(0, 0, .1, 1);
-    --ease-out-5: cubic-bezier(0, 0, 0, 1);
-    --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
-    --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
-    --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
-    --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
-    --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
-    --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
-    --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
-    --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
-    --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
-    --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
-    --ease-elastic-in-1: cubic-bezier(.5, -.25, .75, 1);
-    --ease-elastic-in-2: cubic-bezier(.5, -.5, .75, 1);
-    --ease-elastic-in-3: cubic-bezier(.5, -.75, .75, 1);
-    --ease-elastic-in-4: cubic-bezier(.5, -1, .75, 1);
-    --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
-    --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
-    --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
-    --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
-    --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
-    --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
-    --ease-step-1: steps(2);
-    --ease-step-2: steps(3);
-    --ease-step-3: steps(4);
-    --ease-step-4: steps(7);
-    --ease-step-5: steps(10);
-    --ease-elastic-1: var(--ease-elastic-out-1);
-    --ease-elastic-2: var(--ease-elastic-out-2);
-    --ease-elastic-3: var(--ease-elastic-out-3);
-    --ease-elastic-4: var(--ease-elastic-out-4);
-    --ease-elastic-5: var(--ease-elastic-out-5);
-    --ease-squish-1: var(--ease-elastic-in-out-1);
-    --ease-squish-2: var(--ease-elastic-in-out-2);
-    --ease-squish-3: var(--ease-elastic-in-out-3);
-    --ease-squish-4: var(--ease-elastic-in-out-4);
-    --ease-squish-5: var(--ease-elastic-in-out-5);
-    --ease-spring-1: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
-    --ease-spring-2: linear(0, .007, .029 2.2%, .118 4.7%, .625 14.4%, .826 19%, .902, .962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, .999 61.6%, .995 71.2%, 1);
-    --ease-spring-3: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
-    --ease-spring-4: linear(0, .009, .037 1.7%, .153 3.6%, .776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, .973, .955 39.2%, .953 41.1%, .957 43.3%, .998 53.3%, 1.009 59.1% 63.7%, .998 78.9%, 1);
-    --ease-spring-5: linear(0, .01, .04 1.6%, .161 3.3%, .816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, .999 29.4%, .955 32.1%, .942, .935 34.9%, .933, .939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, .996 70.2%, 1.001 87.2%, 1);
-    --ease-bounce-1: linear(0, .004, .016, .035, .063, .098, .141, .191, .25, .316, .391 36.8%, .563, .766, 1 58.8%, .946, .908 69.1%, .895, .885, .879, .878, .879, .885, .895, .908 89.7%, .946, 1);
-    --ease-bounce-2: linear(0, .004, .016, .035, .063, .098, .141 15.1%, .25, .391, .562, .765, 1, .892 45.2%, .849, .815, .788, .769, .757, .753, .757, .769, .788, .815, .85, .892 75.2%, 1 80.2%, .973, .954, .943, .939, .943, .954, .973, 1);
-    --ease-bounce-3: linear(0, .004, .016, .035, .062, .098, .141 11.4%, .25, .39, .562, .764, 1 30.3%, .847 34.8%, .787, .737, .699, .672, .655, .65, .656, .672, .699, .738, .787, .847 61.7%, 1 66.2%, .946, .908, .885 74.2%, .879, .878, .879, .885 79.5%, .908, .946, 1 87.4%, .981, .968, .96, .957, .96, .968, .981, 1);
-    --ease-bounce-4: linear(0, .004, .016 3%, .062, .141, .25, .391, .562 18.2%, 1 24.3%, .81, .676 32.3%, .629, .595, .575, .568, .575, .595, .629, .676 48.2%, .811, 1 56.2%, .918, .86, .825, .814, .825, .86, .918, 1 77.2%, .94 80.6%, .925, .92, .925, .94 87.5%, 1 90.9%, .974, .965, .974, 1);
-    --ease-bounce-5: linear(0, .004, .016 2.5%, .063, .141, .25 10.1%, .562, 1 20.2%, .783, .627, .534 30.9%, .511, .503, .511, .534 38%, .627, .782, 1 48.7%, .892, .815, .769 56.3%, .757, .753, .757, .769 61.3%, .815, .892, 1 68.8%, .908 72.4%, .885, .878, .885, .908 79.4%, 1 83%, .954 85.5%, .943, .939, .943, .954 90.5%, 1 93%, .977, .97, .977, 1);
-    --easing-entry: cubic-bezier(.1, 0, 0, 1);
-    --easing-exit: cubic-bezier(.3, 0, 1, .8);
-    --transition-duration-instant: 0s;
-    --transition-duration-quick-1: 80ms;
-    --transition-duration-quick-2: .12s;
-    --transition-duration-moderate-1: .18s;
-    --transition-duration-moderate-2: .26s;
-    --transition-duration-gentle-1: .32s;
-    --transition-duration-gentle-2: .42s;
-    --transition-duration-short: var(--transition-duration-quick-1);
-    --transition-duration-base: var(--transition-duration-moderate-1);
-    --transition-duration-long: var(--transition-duration-gentle-1);
-    --transition-duration-entry: 0s;
-    --transition-duration-exit: 0s;
-    --transition-target-scale: .9;
-    --animated-element-distance: 0;
-    --animated-element-width: 0;
-    --animated-element-height: 0;
-    --transition-duration-calculated: calc(( .5 * var(--animated-element-distance, 0)  + .35 * var(--animated-element-width, 0)  + .3 * var(--animated-element-height, 0)) * 1ms);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where(html) {
-      --transition-duration-quick-1: 0s;
-      --transition-duration-quick-2: 0s;
-      --transition-duration-moderate-1: 0s;
-      --transition-duration-moderate-2: 0s;
-      --transition-duration-gentle-1: 0s;
-      --transition-duration-gentle-2: 0s;
-      --transition-duration-calculated: 0s;
-      --transition-duration-instant: 0s;
-      --transition-duration-entry: 0s;
-      --transition-duration-exit: 0s;
-    }
-  }
-}
-
-@layer helpers.theme {
-  * {
-    --text: var(--color-text-muted);
-    --color: var(--color-text-muted);
-    --surface: var(--color-surface-base);
-    --border: var(--color-border-muted);
-    --text-hover: var(--color-text-on-emphasis);
-    --color-hover: var(--color-text-on-emphasis);
-    --surface-hover: var(--color-surface-emphasis);
-    --border-hover: var(--color-border-base);
-  }
-
-  .-primary {
-    --text: var(--color-brand-primary-emphasis);
-    --color: var(--color-brand-primary-base);
-    --surface: var(--color-brand-primary-surface);
-    --border: var(--color-brand-primary-base);
-    --text-hover: var(--color-brand-primary-contrast);
-    --color-hover: var(--color-brand-primary-contrast);
-    --surface-hover: var(--color-brand-primary-base);
-    --border-hover: var(--color-brand-primary-base);
-  }
-
-  .-secondary {
-    --text: var(--color-brand-secondary-emphasis);
-    --color: var(--color-brand-secondary-base);
-    --surface: var(--color-brand-secondary-surface);
-    --border: var(--color-brand-secondary-base);
-    --text-hover: var(--color-brand-secondary-contrast);
-    --color-hover: var(--color-brand-secondary-contrast);
-    --surface-hover: var(--color-brand-secondary-base);
-    --border-hover: var(--color-brand-secondary-base);
-  }
-
-  .-neutral {
-    --text: var(--color-text-muted);
-    --color: var(--color-text-muted);
-    --surface: var(--color-surface-base);
-    --border: var(--color-border-muted);
-    --text-hover: var(--color-text-on-emphasis);
-    --color-hover: var(--color-text-on-emphasis);
-    --surface-hover: var(--color-surface-emphasis);
-    --border-hover: var(--color-border-base);
-  }
-
-  .-muted {
-    --text: var(--color-text-muted);
-    --color: var(--color-text-muted);
-    --surface: transparent;
-    --text-hover: var(--color-text-base);
-    --color-hover: var(--color-text-base);
-    --surface-hover: var(--color-surface-subtle);
-    --border-hover: var(--color-border-base);
-  }
-
-  .-emphasis {
-    --text: var(--color-text-on-emphasis);
-    --color: var(--color-text-on-emphasis);
-    --surface: var(--color-surface-emphasis);
-    --border: var(--color-surface-emphasis);
-    --text-hover: var(--color-text-base);
-    --color-hover: var(--color-text-base);
-    --surface-hover: var(--color-surface-subtle);
-    --border-hover: var(--color-border-base);
-  }
-
-  .-info {
-    --text: var(--color-status-info-emphasis);
-    --color: var(--color-status-info-base);
-    --surface: var(--color-status-info-surface);
-    --border: var(--color-status-info-base);
-    --text-hover: var(--color-status-info-contrast);
-    --color-hover: var(--color-status-info-contrast);
-    --surface-hover: var(--color-status-info-base);
-    --border-hover: var(--color-status-info-base);
-  }
-
-  .-warning {
-    --text: var(--color-status-warning-emphasis);
-    --color: var(--color-status-warning-base);
-    --surface: var(--color-status-warning-surface);
-    --border: var(--color-status-warning-base);
-    --text-hover: var(--color-status-warning-contrast);
-    --color-hover: var(--color-status-warning-contrast);
-    --surface-hover: var(--color-status-warning-base);
-    --border-hover: var(--color-status-warning-base);
-  }
-
-  .-danger {
-    --text: var(--color-status-danger-emphasis);
-    --color: var(--color-status-danger-base);
-    --surface: var(--color-status-danger-surface);
-    --border: var(--color-status-danger-base);
-    --text-hover: var(--color-status-danger-contrast);
-    --color-hover: var(--color-status-danger-contrast);
-    --surface-hover: var(--color-status-danger-base);
-    --border-hover: var(--color-status-danger-base);
-  }
-
-  .-success {
-    --text: var(--color-status-success-emphasis);
-    --color: var(--color-status-success-base);
-    --surface: var(--color-status-success-surface);
-    --border: var(--color-status-success-base);
-    --text-hover: var(--color-status-success-contrast);
-    --color-hover: var(--color-status-success-contrast);
-    --surface-hover: var(--color-status-success-base);
-    --border-hover: var(--color-status-success-base);
-  }
-
-  .themed {
-    background: var(--surface);
-    color: var(--text);
-  }
-}
-
-@layer helpers.conditionalRadius {
-  :where(html) {
-    --border-radius-cond-small: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-small));
-    --border-radius-cond-medium: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-medium));
-    --border-radius-cond-large: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-large));
-  }
-}
-
-:where(.text-assistive, .sr-only) {
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-  width: 1px;
-  height: 0;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}
-
-:where(.break-word) {
-  overflow-wrap: break-word;
-  -webkit-hyphens: auto;
-  hyphens: auto;
-  max-inline-size: 100%;
-}
-
-.full-width {
-  inline-size: 100%;
-}
-
-.nc-hint {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-base);
-}
-
-.nc-slub {
-  color: var(--color-text-subtle);
-  text-transform: uppercase;
-  letter-spacing: var(--tracking-wide);
-  font-weight: var(--font-weight-active);
-  font-size: var(--font-size-smallest);
-}
-
-.allcaps {
-  text-transform: capitalize;
-}
-
-.centered {
-  text-align: center;
-  text-wrap: balance;
-}
-
-.uppercase {
-  text-transform: uppercase;
-  --opentype-case: on;
-}
-
-.smallcaps {
-  font-variant-numeric: oldstyle-nums;
-  font-variant-caps: all-small-caps;
-}
-
-.strong {
-  font-weight: var(--font-weight-strong);
-}
-
-.font-mono {
-  font-family: var(--font-family-mono);
-}
-
-.font-sans {
-  font-family: var(--font-family-sans);
-}
-
-.font-serif {
-  font-family: var(--font-family-serif);
-}
-
-.font-size-display {
-  font-size: var(--font-size-display);
-}
-
-.font-size-largest {
-  font-size: var(--font-size-largest);
-}
-
-.font-size-large {
-  font-size: var(--font-size-large);
-}
-
-.font-size-base {
-  font-size: var(--font-size-base);
-}
-
-.font-size-small {
-  font-size: var(--font-size-small);
-}
-
-.font-size-smallest {
-  font-size: var(--font-size-smallest);
-}
-
-.mt-base {
-  margin-block-start: var(--spacing-base);
-}
-
-.mt-auto {
-  margin-block-start: auto;
-}
-
-.ml-auto {
-  margin-inline-start: auto;
-}
-
-.mr-auto {
-  margin-inline-end: auto;
-}
-
-@layer components.alerts {
-  :where(.nc-alert) {
-    background: var(--surface);
-    color: var(--text);
-    gap: var(--control-spacing-base, .75em);
-  }
-
-  :where(.nc-alert) > .nc-icon {
-    margin-block: calc((var(--line-height-base)  - var(--icon-size)) / 2);
-  }
-
-  :where(.nc-alert-title) {
-    font-weight: var(--font-weight-heading);
-  }
-
-  :where(.nc-alert.-filled) {
-    background: var(--surface-hover);
-    color: var(--text-hover);
-  }
-}
-
-@layer components.badge {
-  :where(.badge) {
-    font-family: var(--font-family-mono);
-    letter-spacing: var(--tracking-tight);
-    font-weight: var(--font-weight-default);
-    color: var(--text, var(--color-text-base));
-    border: var(--border-width-thin) solid var(--text, var(--color-text-base));
-    border-radius: var(--border-radius-small);
-    background: var(--surface, transparent);
-    padding: var(--control-spacing-minimal, .125em) var(--control-spacing-near, .5em);
-    inline-size: max-content;
-  }
-}
-
-@layer components.breadcrumbs {
-  :where(.nc-breadcrumbs) {
-    background-color: var(--nc-breadcrumbs-surface, transparent);
-    inline-size: max-content;
-    max-inline-size: 100%;
-    color: var(--nc-breadcrumbs-text, --color-text-muted);
-  }
-
-  :where(.nc-breadcrumb-item) {
-    color: inherit;
-  }
-
-  :where(.nc-breadcrumb-item):last-child {
-    color: var(--color-brand-primary-base);
-  }
-
-  :where(.nc-breadcrumb-item):not(:last-child):after {
-    padding-inline: var(--control-spacing-near, .5em);
-    color: inherit;
-    content: "›";
-    font-size: inherit;
-  }
-
-  :where(.nc-breadcrumb-link) {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  :where(.nc-breadcrumb-link):hover {
-    text-decoration: underline;
-  }
-
-  :where(.nc-breadcrumb-link)[aria-current="page"] {
-    pointer-events: none;
-    color: var(--nc-breadcrumbs-text-active, --color-text-base);
-  }
-}
-
-@layer components.buttons {
-  :where(button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], .nc-button) {
-    --_button-background: var(--button-background, var(--surface-hover));
-    --_button-color: var(--button-color, var(--text-hover));
-    --_button-border-color: var(--button-border-color, var(--surface-hover));
-    --_button-border-radius: var(--button-border-radius, var(--border-radius-medium));
-    --_button-background-hover: var(--button-background-hover, var(--surface));
-    --_button-background-hover-light: var(--button-background-hover-light, color-mix(in oklch, currentColor calc(var(--transparency-weaker) * 10%), transparent));
-    --_button-color-hover: var(--button-color-hover, var(--text));
-    --_button-border-color-hover: var(--button-border-color-hover, var(--border));
-    --_button-box-shadow: var(--button-box-shadow, var(--shadow-near));
-    --_button-hover-shadow: var(--button-hover-shadow, var(--shadow-nearest));
-    --_button-padding-inline: var(--button-padding-inline, var(--control-spacing-base, .75em));
-    background-color: var(--_button-background);
-    color: var(--_button-color);
-    border: var(--border-width-thin) solid var(--_button-border-color);
-    border-radius: var(--_button-border-radius);
-    padding-inline: var(--_button-padding-inline);
-    min-block-size: var(--control-height-base);
-    font-family: var(--font-family-button);
-    letter-spacing: var(--tracking-tight);
-    font-weight: var(--font-weight-default);
-    font-size: inherit;
-    cursor: pointer;
-    text-align: center;
-    transition: var(--transition-duration-quick-1) var(--ease-2);
-    -webkit-text-decoration: unset;
-    text-decoration: unset;
-    box-shadow: var(--_button-box-shadow);
-    -webkit-user-select: none;
-    user-select: none;
-    justify-content: center;
-    align-items: center;
-    gap: var(--control-spacing-tiny, .25em);
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    line-height: var(--line-height-base);
-    padding-block: 0;
-    transition-property: box-shadow, transform, scale;
-    display: inline-flex;
-    position: relative;
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button):hover {
-    background: var(--_button-background-hover);
-    color: var(--_button-color-hover);
-    border-color: var(--_button-border-color-hover);
-    box-shadow: var(--_button-hover-shadow);
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button)[aria-pressed="true"] {
-    box-shadow: none;
-    font-weight: var(--font-weight-active);
-    transform: none;
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button) > svg {
-    pointer-events: none;
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button):is(:active, .-active) {
-    background-color: var(--_button-background-hover);
-    color: var(--_button-color-hover);
-    border-color: var(--_button-border-color-hover);
-    scale: .98;
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-outline {
-    color: var(--text);
-    border-color: var(--border);
-    background-color: #0000;
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-outline:hover {
-    background-color: var(--_button-background-hover-light);
-    color: var(--text);
-    border-color: var(--border-hover);
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-stealth {
-    color: var(--text);
-    background-color: #0000;
-    border-color: #0000;
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-stealth:hover {
-    background-color: var(--_button-background-hover-light);
-    color: var(--text);
-    border-color: #0000;
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-stealth {
-    box-shadow: none !important;
-    transform: none !important;
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-small {
-    --_button-padding-inline: var(--control-spacing-near, .5em);
-    min-block-size: var(--control-height-small);
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-round {
-    --_button-border-radius: var(--border-radius-round);
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-offset {
-    --_button-offset-distance: var(--button-offset-distance, calc(-1 * var(--control-spacing-minimal)));
-    --_button-offset-distance-hover: var(--button-offset-distance-hover, calc(-.5 * var(--control-spacing-minimal)));
-    --_button-transform: translate(var(--_button-offset-distance), var(--_button-offset-distance));
-    --_button-hover-transform: translate(var(--_button-offset-distance-hover), var(--_button-offset-distance-hover));
-    --button-box-shadow: calc(var(--_button-offset-distance) / -2) calc(var(--_button-offset-distance) / -2) 0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) 0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -2) 0 var(--shadow-color);
-    --button-hover-shadow: calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) * -1) 0 0 var(--shadow-color), calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) / -2) 0 var(--shadow-color);
-    transform: var(--_button-transform);
-    inset-block-start: calc(var(--_button-offset-distance) * -1);
-    inset-inline-start: calc(var(--_button-offset-distance) * -1);
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-offset:hover {
-    transform: var(--_button-hover-transform);
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-icon.-small {
-    padding: 0;
-  }
-
-  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-aligned {
-    margin-inline: calc(-1 * var(--_button-padding-inline));
-  }
-
-  :is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
-    --_button-border-radius: var(--border-radius-round);
-    aspect-ratio: 1;
-    fill: currentColor;
-    padding: 0;
-  }
-
-  :is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button):after {
-    content: "";
-    inline-size: max(var(--control-height-base), 100%);
-    block-size: max(var(--control-height-base), 100%);
-    aspect-ratio: 1;
-    z-index: -1;
-    pointer-events: all;
-    border-radius: 100%;
-    position: absolute;
-    inset-block-start: calc(-.5 * (var(--control-height-base)  - 100%));
-    inset-inline-start: calc(-.5 * (var(--control-height-base)  - 100%));
-  }
-
-  [disabled]:where(button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
-    --_button-border-color-hover: var(--_button-border-color);
-    filter: contrast(.72) opacity(.72);
-    cursor: not-allowed;
-    --_button-background: none !important;
-    --_button-background-hover: none !important;
-    --_button-color: var(--color-text-subtle) !important;
-    --_button-color-hover: var(--_button-color) !important;
-    --_button-border-color: var(--color-text-subtle) !important;
-    box-shadow: none !important;
-    transform: none !important;
-  }
-
-  :where(input[type="file"]) {
-    color: var(--_input-color);
-    background-color: var(--_input-background);
-    border: var(--_input-border);
-    min-block-size: var(--control-height-base);
-    border-radius: var(--_input-border-radius);
-    padding-inline-end: var(--contol-spacing-near, .5em);
-    padding-inline-start: 0 !important;
-  }
-
-  :where(input[type="file"])::-webkit-file-upload-button {
-    background-color: var(--_button-background);
-    color: var(--_button-color);
-    padding-inline: var(--_button-padding-inline);
-    cursor: pointer;
-    box-shadow: none;
-    border: none;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    min-block-size: 100%;
-    margin-inline-end: var(--contol-spacing-near, .5em);
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    transform: none;
-  }
-
-  :where(input[type="file"])::file-selector-button {
-    background-color: var(--_button-background);
-    color: var(--_button-color);
-    padding-inline: var(--_button-padding-inline);
-    cursor: pointer;
-    box-shadow: none;
-    border: none;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    min-block-size: 100%;
-    margin-inline-end: var(--contol-spacing-near, .5em);
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    transform: none;
-  }
-
-  :where(button[type="reset"], .nc-button.-destructive) {
-    --text: var(--color-status-danger-emphasis);
-    --color: var(--color-status-danger-base);
-    --surface: var(--color-status-danger-surface);
-    --border: var(--color-status-danger-base);
-    --text-hover: var(--color-status-danger-contrast);
-    --color-hover: var(--color-status-danger-contrast);
-    --surface-hover: var(--color-status-danger-base);
-    --border-hover: var(--color-status-danger-base);
-  }
-}
-
-@layer components.cards {
-  :where(.nc-card) {
-    --_card-background-color: var(--card-background-color, var(--color-surface-base));
-    --_card-color: var(--card-color, var(--color-text-base));
-    --_card-border-color: var(--card-border-color, var(--color-border-base));
-    --_card-shadow: var(--card-shadow, var(--shadow-medium));
-    --_card-padding-inline: var(--card-padding-inline, var(--spacing-base));
-    --_card-padding-block: var(--card-padding-block, var(--spacing-far));
-    --_card-border-radius: var(--card-border-radius, var(--border-radius-large));
-  }
-
-  :where(.nc-card)[data-size="xs"] {
-    --_card-padding-inline: var(--card-padding-inline, var(--spacing-nearest));
-    --_card-padding-block: var(--card-padding-block, var(--spacing-near));
-    --_card-border-radius: var(--card-border-radius, var(--border-radius-medium));
-  }
-
-  :where(.nc-card)[data-size="sm"] {
-    --_card-padding-inline: var(--card-padding-inline, var(--spacing-near));
-    --_card-padding-block: var(--card-padding-block, var(--spacing-base));
-  }
-
-  :where(.nc-card) {
-    box-sizing: border-box;
-    inline-size: 100%;
-    padding-inline: var(--_card-padding-inline);
-    padding-block: var(--_card-padding-block);
-    color: var(--_card-color);
-    appearance: none;
-    border: var(--border-width-thin) solid var(--_card-border-color);
-    background-color: var(--_card-background-color);
-    border-radius: var(--_card-border-radius);
-    box-shadow: var(--_card-shadow);
-    transition: border-color var(--transition-duration-quick-2) var(--ease-2);
-    display: inline-block;
-    overflow: hidden;
-  }
-
-  @media (width >= 480px) {
-    :where(.nc-card) {
-      --_card-padding-inline: var(--card-padding-inline, var(--spacing-far));
-    }
-  }
-
-  @media (width >= 1024px) {
-    :where(.nc-card) {
-      --_card-padding-inline: var(--card-padding-inline, var(--spacing-farthest));
-    }
-  }
-
-  :where(.nc-card):is([href], button) {
-    text-decoration: none;
-  }
-
-  :where(.nc-card):is([href], button):hover {
-    border-color: var(--color-brand-primary-base);
-  }
-
-  :where(.nc-clickable-card) {
-    cursor: pointer;
-    transition: scale var(--transition-duration-quick-2) var(--ease-out-2);
-    position: relative;
-  }
-
-  :where(.nc-clickable-card):focus-within, :where(.nc-clickable-card):hover {
-    outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-  }
-
-  :where(.nc-clickable-card) a[data-link="main"] {
-    font: inherit;
-    text-decoration: none;
-  }
-
-  :where(.nc-clickable-card) a[data-link="main"]:focus-visible, :where(.nc-clickable-card) a[data-link="main"]:focus-within:focus-visible, :where(.nc-clickable-card) a[data-link="main"]:hover {
-    outline: none;
-  }
-
-  :where(.nc-clickable-card) a[data-link="main"]:before {
-    content: "";
-    position: absolute;
-    inset: 0;
-  }
-
-  :where(.nc-clickable-card) a[data-link="extra"] {
-    position: relative;
-  }
-
-  :where(.nc-clickable-card):has(a[data-link="main"]:active) {
-    transform: scale(.99);
-  }
-}
-
-@layer components.dialogs {
-  :where(.nc-dialog) {
-    --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
-    --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
-    border: var(--border-width-thin) solid var(--color-border-base);
-    block-size: max-content;
-    inline-size: 100dvw;
-    max-inline-size: var(--dialog-max-inline-size, 28rem);
-    background: var(--color-surface-base);
-    border-radius: var(--dialog-radius, var(--border-radius-medium));
-    max-block-size: 100dvh;
-    padding: 0;
-    overflow: hidden;
-  }
-
-  @media (width >= 36rem) {
-    :where(.nc-dialog) {
-      inline-size: calc(100dvw - 2 * var(--layout-padding, var(--spacing-base)));
-      max-block-size: var(--dialog-max-block-size, 90dvh);
-      box-shadow: var(--shadow-medium);
-      margin-inline: auto;
-    }
-  }
-
-  :where(.nc-dialog) {
-    --transform-in: perspective(80px) rotateX(.5deg) scale(.9);
-    --transform-out: perspective(80px) rotateX(.5deg) scale(.95);
-    --transition-time-in: var(--transition-duration-gentle-1);
-    --transition-time-out: var(--transition-duration-moderate-1);
-    transform: var(--transform-in);
-  }
-
-  :where(.nc-dialog), :where(.nc-dialog)::backdrop {
-    transition: display var(--transition-time-out) allow-discrete, overlay var(--transition-time-out) allow-discrete, transform var(--transition-time-out) var(--ease-in-out-2), opacity var(--transition-duration-moderate-1) var(--ease-in-out-2);
-    opacity: 0;
-  }
-
-  :where(.nc-dialog) {
-    transform: var(--transform-out);
-  }
-
-  :where(.nc-dialog)[open] {
-    opacity: 1;
-    transform: perspective(80px)rotateX(0)scale(1);
-  }
-
-  :where(.nc-dialog)[open], :where(.nc-dialog)[open]::backdrop {
-    transition: display var(--transition-time-in) allow-discrete, overlay var(--transition-time-in) allow-discrete, transform var(--transition-time-in) var(--ease-in-out-2), opacity var(--transition-time-in) var(--ease-in-out-2);
-  }
-
-  :where(.nc-dialog)[open]::backdrop {
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
-    opacity: 1;
-  }
-
-  @starting-style {
-    :where(.nc-dialog)[open], :where(.nc-dialog)[open]::backdrop {
-      opacity: 0;
-    }
-
-    :where(.nc-dialog)[open] {
-      transform: var(--transform-in);
-    }
-  }
-
-  :where(.nc-dialog)::backdrop {
-    -webkit-backdrop-filter: blur(3px);
-    backdrop-filter: blur(3px);
-    background: #0000000d;
-  }
-
-  :where(.nc-dialog) :where(.dialog-container) {
-    block-size: max-content;
-    inline-size: 100%;
-    max-block-size: inherit;
-    grid-template: "header header"
-                   "content content" 1fr
-                   "footer footer"
-                   / 1fr 1fr;
-    display: grid;
-  }
-
-  :where(.nc-dialog) :where(.dialog-container) > :first-child {
-    border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
-  }
-
-  :where(.nc-dialog) :where(.dialog-container) > :last-child {
-    border-radius: 0 0 var(--_dialog-radius) var(--_dialog-radius);
-  }
-
-  :where(.nc-dialog) :where(.dialog-header) {
-    border-block-end: var(--border-width-thin) solid var(--color-border-muted);
-    background-color: var(--color-surface-subtle);
-    padding-inline: var(--_dialog-padding-inline);
-    grid-area: header;
-    grid-template: "title close" / 1fr var(--_dialog-close-size);
-    padding-block: var(--spacing-near);
-    min-inline-size: calc(2 * var(--spacing-near)  + var(--_dialog-close-size));
-    align-items: flex-start;
-    display: grid;
-  }
-
-  :where(.nc-dialog) :where(.dialog-header) > button[data-closes-dialog] {
-    inline-size: var(--_dialog-close-size);
-    block-size: var(--_dialog-close-size);
-    grid-area: close;
-  }
-
-  :where(.nc-dialog) :where(.dialog-title) {
-    font-size: var(--font-size-large);
-    line-height: var(--_dialog-close-size);
-    overflow-wrap: anywhere;
-    margin: 0;
-    padding: 0;
-  }
-
-  :where(.nc-dialog) :where(.dialog-content) {
-    padding-inline: var(--_dialog-padding-inline);
-    padding-block: var(--spacing-near);
-    overscroll-behavior: contain;
-    scroll-behavior: smooth;
-    grid-area: content;
-    overflow: auto;
-  }
-
-  :where(.nc-dialog) :where(.dialog-actions) {
-    padding-inline: var(--_dialog-padding-inline);
-    padding-block: var(--spacing-near);
-    border-block-start: var(--border-width-thin) solid var(--color-border-muted);
-    background-color: var(--color-surface-subtle);
-    grid-area: footer;
-    justify-content: flex-end;
-    align-items: flex-start;
-    display: flex;
-  }
-}
-
-@layer components.forms {
-  :where(.nc-form) {
-    inline-size: min(100%, var(--nc-form-max-inline-size, var(--measure-base)));
-  }
-
-  :where(.nc-form-title) {
-    font-size: var(--font-size-largest);
-    font-weight: var(--font-weight-heading);
-    line-height: var(--line-height-small);
-    color: var(--color-text-base);
-  }
-
-  :where(.nc-form-hint) {
-    margin-block: var(--control-spacing-base, .75em);
-    font-size: var(--font-size-large);
-    color: var(--color-text-muted);
-  }
-
-  :where(fieldset:not([class]), .nc-fieldset) {
-    border: none;
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  :where(legend:not([class]), .nc-legend) {
-    border: none;
-    border-radius: 0;
-    inline-size: 100%;
-    padding: 0;
-  }
-
-  :where(legend:not([class]), .nc-legend) + * {
-    margin-block-start: var(--nc-legend-spacing, var(--control-spacing-far, 1em));
-  }
-
-  :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend) + .nc-hint) {
-    --nc-legend-spacing: var(--control-spacing-tiny, .25em);
-    margin-block: var(--control-spacing-base, .75em);
-  }
-}
-
-@layer components.gallery {
-  :where(.nc-gallery) {
-    gap: var(--gallery-gap, var(--spacing-base));
-    max-inline-size: 100%;
-    block-size: var(--gallery-size, auto);
-    overscroll-behavior-inline: contain;
-    scroll-snap-type: inline mandatory;
-    scroll-snap-stop: normal;
-    scroll-padding-inline: var(--gallery-scroll-padding-inline, var(--spacing-base));
-    flex-direction: row;
-    margin: 0;
-    padding-block-end: var(--gallery-scrollbar-padding, var(--spacing-base));
-    list-style: none;
-    display: flex;
-    overflow-x: auto;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    :where(.nc-gallery) {
-      scroll-behavior: smooth;
-    }
-  }
-
-  :where(.nc-gallery) > * {
-    scroll-snap-align: start;
-    flex: 0 0 var(--gallery-item-size, auto);
-    display: inline-block;
-  }
-
-  :where(.nc-gallery).-custom-scrollbar {
-    scrollbar-color: var(--gallery-scrollbar-fg, var(--color-text-on-emphasis)) var(--gallery-scrollbar-bg, var(--color-surface-emphasis));
-  }
-
-  :where(.nc-gallery).-custom-scrollbar::-webkit-scrollbar {
-    block-size: var(--gallery-scrollbar-height, var(--spacing-base));
-  }
-
-  :where(.nc-gallery).-custom-scrollbar::-webkit-scrollbar-track {
-    background-color: var(--gallery-scrollbar-bg, var(--color-surface-emphasis));
-  }
-
-  :where(.nc-gallery).-custom-scrollbar::-webkit-scrollbar-thumb {
-    background-color: var(--gallery-scrollbar-bg, var(--color-surface-emphasis));
-    background-image: linear-gradient(var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) 0, var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) calc(var(--gallery-scrollbar-height, var(--spacing-base)) * .25), var(--gallery-scrollbar-fg, var(--color-text-on-emphasis)) calc(var(--gallery-scrollbar-height, var(--spacing-base)) * .25), var(--gallery-scrollbar-fg, var(--color-text-on-emphasis)) calc(var(--gallery-scrollbar-height, var(--spacing-base)) * .75), var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) calc(var(--gallery-scrollbar-height, var(--spacing-base)) * .75));
-  }
-}
-
-@layer components.icons {
-  :where(.nc-icon) {
-    --icon-size: 2ex;
-    inline-size: var(--icon-size);
-    block-size: var(--icon-size);
-    flex-shrink: 0;
-    display: block;
-  }
-
-  :where(.nc-icon)[data-flip="true"] {
-    transform: scaleX(-1);
-  }
-
-  :where(.nc-icon)[data-size="xs"] {
-    --icon-size: 1ex;
-  }
-
-  :where(.nc-icon)[data-size="sm"] {
-    --icon-size: 1.5ex;
-  }
-
-  :where(.nc-icon)[data-size="md"] {
-    --icon-size: 2ex;
-  }
-
-  :where(.nc-icon)[data-size="lg"] {
-    --icon-size: 3ex;
-  }
-
-  :where(.nc-icon)[data-size="xl"] {
-    --icon-size: 4ex;
-  }
-
-  :where(.nc-icon)[data-size="inline"] {
-    --icon-size: .75lh;
-  }
-
-  :where(.nc-icon)[data-size="button"] {
-    --icon-size: var(--control-height-base);
-  }
-
-  :where(.nc-icon)[data-animation="spinning"] {
-    animation: 1s linear infinite spinning;
-  }
-
-  :where(button, .nc-button) > .nc-icon {
-    --icon-size: 2ex;
-  }
-
-  @keyframes spinning {
-    from {
-      transform: rotate(0);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
-
-@layer base.inputs {
-  :where(label, .nc-input-label) {
-    font-family: var(--font-family-default);
-    letter-spacing: var(--tracking-tight);
-    font-weight: var(--font-weight-active);
-    color: var(--color-text-base);
-    font-size: inherit;
-    align-items: center;
-    gap: 0;
-    display: inline-flex;
-  }
-
-  :where(input, textarea, select, .nc-input, .nc-select, .nc-textarea, .nc-input-checkbox, .nc-input-radio, .nc-input-label, .nc-input-color, .nc-input-field, .nc-input-error, .nc-checkbox-wrapper, .nc-input-switch, .nc-radio-field, .nc-checkbox-field) {
-    --_input-background: var(--input-background, var(--color-surface-subtle));
-    --_input-background-active: var(--input-background-active, var(--color-surface-base));
-    --_input-color: var(--input-color, var(--color-text-base));
-    --_input-border: var(--input-border, var(--border-width-thin) solid var(--color-border-base));
-    --_input-border-radius: var(--input-border-radius, var(--border-radius-medium));
-    --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
-    --_input-outline: var(--input-outline, var(--border-width-medium) solid var(--color-brand-primary-base));
-    --_input-disabled-filter: var(--input-disabled-filter, contrast(.72) opacity(.72));
-    --_input-padding-block: var(--input-padding-block, var(--control-spacing-tiny, .25em));
-    --_input-padding-inline: var(--input-padding-inline, var(--control-spacing-base, .75em));
-    --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
-  }
-
-  :where(input, textarea, select, .nc-input) {
-    font: inherit;
-    letter-spacing: inherit;
-    word-spacing: inherit;
-    appearance: none;
-    color: var(--_input-color);
-    background-color: var(--_input-background);
-    border: var(--_input-border);
-    border-radius: var(--_input-border-radius);
-    block-size: var(--control-height-base);
-    padding-inline: var(--_input-padding-inline);
-    box-shadow: var(--_input-box-shadow);
-    inline-size: var(--input-inline-size, auto);
-    line-height: var(--line-height-base);
-  }
-
-  :where(input, textarea, select, .nc-input):focus-visible {
-    outline: var(--_input-outline);
-    outline-offset: 0;
-    background-color: var(--_input-background-active);
-  }
-
-  :where(input, textarea, select, .nc-input):disabled {
-    filter: var(--_input-disabled-filter);
-    cursor: not-allowed;
-  }
-
-  :where(input, textarea, select, .nc-input):hover {
-    background-color: var(--_input-hover-background);
-  }
-
-  :where(input, textarea, select, .nc-input)::placeholder {
-    color: var(--color-text-subtle);
-  }
-
-  :where(input, textarea, select, .nc-input).-validate:user-valid {
-    outline: var(--_input-outline);
-    outline-offset: 0;
-    outline-color: var(--color-status-success-base);
-  }
-
-  :where(input, textarea, select, .nc-input).-validate:user-invalid {
-    outline: var(--_input-outline);
-    outline-offset: 0;
-    outline-color: var(--color-status-danger-base);
-  }
-
-  :where(select, .nc-select) {
-    background-image: var(--triangle-down-url);
-    background-position: right .5em top 50%;
-    background-size: 1em .75em;
-    padding-inline-end: 1.75em;
-  }
-
-  :where(textarea, .nc-textarea) {
-    min-block-size: calc(8lh + 2 * var(--_input-padding-block));
-    max-block-size: 80svh;
-    min-inline-size: var(--input-inline-size, 100%);
-    max-inline-size: 100%;
-    padding-block: var(--_input-padding-block);
-    resize: block;
-    field-sizing: content;
-  }
-
-  :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch) {
-    appearance: none;
-    border: var(--_input-border);
-    --current-checkbox-bg: var(--_input-background);
-    background: var(--current-checkbox-bg);
-    block-size: 1lh;
-    inline-size: 1lh;
-    transition: var(--transition-duration-quick-1) background var(--ease-2);
-    box-shadow: var(--_input-box-shadow);
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    display: inline-flex;
-  }
-
-  :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked {
-    --current-checkbox-bg: var(--color-brand-primary-base);
-    background-color: var(--color-brand-primary-base);
-  }
-
-  :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):hover, :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):focus-visible {
-    background-color: var(--_input-hover-background);
-  }
-
-  :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked:hover, :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked:focus-visible {
-    background-color: color-mix(in oklch, var(--current-checkbox-bg), var(--_input-hover-background) 8%);
-  }
-
-  :where(input[type="checkbox"], .nc-input-checkbox) {
-    --_transition-duration: 0s;
-    border-radius: var(--_input-border-radius);
-    overflow: hidden;
-  }
-
-  :where(input[type="checkbox"], .nc-input-checkbox):before {
-    content: "";
-    background-color: var(--color-brand-primary-contrast);
-    block-size: .75lh;
-    inline-size: .75lh;
-    transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
-    font-family: var(--font-family-sans);
-    --font-weight: var(--font-weight-active);
-    color: var(--_input-background);
-    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-    justify-content: center;
-    align-items: center;
-    line-height: 1;
-    display: inline-flex;
-    transform: scale(.85)translateX(2em);
-  }
-
-  :where(input[type="checkbox"], .nc-input-checkbox):checked:before {
-    transform: scale(1)translateX(0%);
-  }
-
-  :where(input[type="radio"], .nc-input-radio) {
-    border-radius: var(--border-radius-round);
-    overflow: hidden;
-  }
-
-  :where(input[type="radio"], .nc-input-radio):before {
-    content: "";
-    border-radius: var(--border-radius-round);
-    background-color: var(--color-brand-primary-contrast);
-    block-size: 50%;
-    inline-size: 50%;
-    transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
-    display: inline-flex;
-    transform: scale(.85)translateX(2em);
-  }
-
-  :where(input[type="radio"], .nc-input-radio):checked:before {
-    transform: scale(1)translateX(0%);
-  }
-
-  :where(input[type="color"], .nc-input-color) {
-    aspect-ratio: 1;
-    inline-size: auto;
-    padding: var(--control-spacing-nearest, .125em);
-  }
-
-  :where(input[type="date"], .nc-input-date) {
-    flex-flow: row;
-  }
-
-  :where(input[type="range"], .nc-input-range) > .nc-hint {
-    margin-inline-start: auto;
-  }
-
-  :where(input[type="range"], .nc-input-range)::-webkit-slider-thumb {
-    appearance: none;
-    inline-size: calc(var(--control-height-base) * .625);
-    block-size: calc(var(--control-height-base) * .625);
-    border-radius: var(--_input-border-radius);
-    border: var(--_input-border);
-    border-color: var(--color-text-base);
-    background-color: var(--color-text-base);
-    box-shadow: var(--shadow-near);
-    cursor: pointer;
-  }
-
-  :where(input[type="range"], .nc-input-range)::-webkit-slider-thumb:hover {
-    background-color: var(--color-brand-primary-base);
-    border-color: var(--color-brand-primary-base);
-  }
-
-  :where(input[type="range"], .nc-input-range)::-moz-range-thumb {
-    appearance: none;
-    inline-size: calc(var(--control-height-base) * .625);
-    block-size: calc(var(--control-height-base) * .625);
-    border-radius: var(--_input-border-radius);
-    border: var(--_input-border);
-    border-color: var(--color-text-base);
-    background-color: var(--color-text-base);
-    box-shadow: var(--shadow-near);
-    cursor: pointer;
-  }
-
-  :where(input[type="range"], .nc-input-range)::-moz-range-thumb:hover {
-    background-color: var(--color-brand-primary-base);
-    border-color: var(--color-brand-primary-base);
-  }
-}
-
-@layer components.input-fields {
-  :where(.nc-input-field) {
-    gap: var(--control-spacing-near, .5em);
-    inline-size: 100%;
-    min-inline-size: var(--input-field-min-inline-size);
-    max-inline-size: var(--input-field-max-inline-size);
-    grid-template-columns: minmax(0, 1fr);
-    place-items: start;
-    display: grid;
-  }
-
-  :where(.nc-input-field) > label, :where(.nc-input-field) > .nc-stack {
-    gap: 0;
-  }
-
-  :where(.nc-input-field) > .nc-cluster {
-    gap: var(--control-spacing-base, .75em);
-  }
-
-  :where(.nc-input-error) {
-    --color-base: var(--color-status-danger-emphasis);
-    color: var(--color-base);
-    font-size: var(--font-size-small);
-  }
-
-  :where(.nc-input-error):before {
-    content: "!";
-    font-family: var(--font-family-default);
-    letter-spacing: var(--tracking-tight);
-    font-weight: var(--font-weight-default);
-    background-color: var(--color-base);
-    color: var(--color-surface-subtle);
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    block-size: 1em;
-    inline-size: 1em;
-    margin-inline-end: var(--control-spacing-base, .75em);
-    display: inline-flex;
-  }
-
-  :where(.nc-checkbox-wrapper) {
-    grid-template: "checkbox label" 1fr
-    / auto 1fr;
-    place-items: start;
-    gap: 0;
-    display: grid;
-  }
-
-  :where(.nc-checkbox-wrapper) > [data-label] {
-    grid-area: label;
-    padding-inline-start: var(--control-spacing-base, .75em);
-  }
-
-  :where(.nc-checkbox-wrapper) .nc-input-label {
-    min-block-size: var(--line-height-base);
-  }
-
-  :where(.nc-checkbox-wrapper) > [data-input] {
-    grid-area: checkbox;
-  }
-
-  :where(.nc-checkbox-wrapper):hover input {
-    background-color: var(--_input-hover-background);
-  }
-
-  :where(.nc-checkbox-wrapper):hover input:checked {
-    background-color: color-mix(in oklch, var(--current-checkbox-bg), var(--_input-hover-background) 8%);
-  }
-
-  :where(.nc-radio-field, .nc-checkbox-field) {
-    gap: 0;
-  }
-
-  :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
-    margin-block-start: var(--control-spacing-far, .75em);
-  }
-
-  :where(.nc-input-required-mark) {
-    color: var(--color-status-danger-emphasis);
-    font-size: 1.25em;
-  }
-}
-
-@layer components.inputs-segmented {
-  :where(.nc-segmented-control-group) {
-    --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
-    --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
-    --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
-    --nc-legend-spacing: var(--control-spacing-near, .5em);
-    container: segmented-control / inline-size;
-  }
-
-  :where(.nc-segmented-control) {
-    background: var(--_input-background);
-    block-size: auto;
-    inline-size: 100%;
-    box-shadow: var(--_input-box-shadow);
-    border-radius: var(--_segmented-control-border-radius);
-    grid-auto-rows: 1fr;
-    grid-auto-flow: row;
-    display: grid;
-  }
-
-  :where(.nc-segmented-control):focus-within {
-    outline: var(--_input-outline);
-    outline-offset: 0;
-  }
-
-  :where(.nc-segmented-control):focus-within:has( > button) {
-    outline: none;
-  }
-
-  :where(.nc-segmented-control) input {
-    opacity: 0;
-    position: absolute;
-  }
-
-  :where(.nc-segmented-control) > * {
-    padding-inline: var(--_input-padding-inline);
-    padding-block: var(--_input-padding-block);
-    min-block-size: var(--segmented-control-min-height, var(--control-height-base));
-    color: var(--_input-color);
-    border: var(--_input-border);
-    cursor: pointer;
-    background: none;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-
-  :where(.nc-segmented-control) > * > .nc-input-label {
-    color: inherit;
-  }
-
-  button:is(:where(.nc-segmented-control) > *) {
-    box-shadow: none;
-    border-radius: 0;
-    transform: none;
-  }
-
-  button:is(:where(.nc-segmented-control) > *):active {
-    scale: 1;
-  }
-
-  button:is(:where(.nc-segmented-control) > *):focus-within {
-    outline-offset: 0;
-    outline: 1px auto;
-  }
-
-  :where(.nc-segmented-control) > *:hover {
-    --current-background: var(--_input-hover-background);
-    background-color: var(--_input-hover-background);
-  }
-
-  :where(.nc-segmented-control) > *:first-child {
-    border-radius: var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0 0;
-  }
-
-  :where(.nc-segmented-control) > *:last-child {
-    border-radius: 0 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius);
-  }
-
-  :where(.nc-segmented-control) > *:not(:last-child) {
-    border-block-end: var(--border-width-thin) solid var(--color-border-muted);
-  }
-
-  :where(.nc-segmented-control) > *:not(:first-child) {
-    border-block-start: none;
-  }
-
-  :where(.nc-segmented-control) > *[aria-pressed="true"], :where(.nc-segmented-control) > *[aria-current] {
-    background: var(--_segmented-control-checked-surface-color);
-    color: var(--_segmented-control-checked-text-color);
-    box-shadow: var(--shadow-near);
-    font-weight: var(--font-weight-default);
-  }
-
-  :where(.nc-segmented-control) > *:has(input:checked) {
-    background: var(--_segmented-control-checked-surface-color);
-    color: var(--_segmented-control-checked-text-color);
-    box-shadow: var(--shadow-near);
-    font-weight: var(--font-weight-default);
-  }
-
-  :where(.nc-segmented-control) > *:focus-within {
-    outline: none;
-  }
-
-  :where(.nc-segmented-control) > *:disabled, :where(.nc-segmented-control) > *[aria-disabled="true"] {
-    filter: var(--_input-disabled-filter);
-    cursor: not-allowed;
-  }
-
-  :where(.nc-segmented-control) > *:has(input:disabled) {
-    filter: var(--_input-disabled-filter);
-    cursor: not-allowed;
-  }
-
-  @container segmented-control (width >= 32rem) or style(--horizontal: true) {
-    :where(.nc-segmented-control) {
-      grid-auto-columns: 1fr;
-      grid-auto-flow: column;
-      inline-size: auto;
-    }
-
-    :where(.nc-segmented-control) > *:first-child {
-      border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
-    }
-
-    :where(.nc-segmented-control) > *:last-child {
-      border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
-    }
-
-    :where(.nc-segmented-control) > *:not(:last-child) {
-      border-block-end: var(--_input-border);
-      border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
-    }
-
-    :where(.nc-segmented-control) > *:not(:first-child) {
-      border-block-start: var(--_input-border);
-      border-inline-start: none;
-    }
-  }
-
-  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) {
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    inline-size: auto;
-  }
-
-  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:first-child {
-    border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
-  }
-
-  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:last-child {
-    border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
-  }
-
-  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:not(:last-child) {
-    border-block-end: var(--_input-border);
-    border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
-  }
-
-  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:not(:first-child) {
-    border-block-start: var(--_input-border);
-    border-inline-start: none;
-  }
-}
-
-@layer components.input-switch {
-  :where(.nc-input-switch) {
-    --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2rem));
-    --_switch-height: var(--switch-height, calc(var(--_switch-width) / 2));
-    --_switch-color: var(--switch-color, var(--_input-background));
-    --_switch-color-checked: var(--switch-color-checked, var(--color-brand-primary-base));
-    --_thumb-margin: var(--thumb-margin, calc(var(--_switch-width) / 12));
-    --_thumb-color: var(--thumb-color, var(--_input-color));
-    vertical-align: var(--_thumb-margin);
-    inline-size: var(--_switch-width);
-    block-size: var(--_switch-height);
-    border-radius: var(--_input-border-radius);
-    --current-checkbox-bg: var(--_switch-color);
-    justify-content: flex-start;
-  }
-
-  :where(.nc-input-switch):before {
-    content: "";
-    aspect-ratio: 1;
-    margin-block: var(--_thumb-margin);
-    transform: translateX(var(--_thumb-margin));
-    block-size: calc(100% - 2 * var(--_thumb-margin));
-    inline-size: unset;
-    background-color: var(--_thumb-color);
-    border-radius: var(--_input-border-radius);
-    box-shadow: var(--shadow-near);
-    transition: transform, background-color;
-    transition-duration: var(--transition-duration-quick-2);
-    transition-timing-function: var(--ease-2);
-    clip-path: none;
-    display: block;
-  }
-
-  :where(.nc-input-switch):checked {
-    --current-checkbox-bg: var(--_switch-color-checked);
-  }
-
-  :where(.nc-input-switch):checked:before {
-    transform: translateX(calc(var(--_switch-width)  - var(--_switch-height)  + var(--_thumb-margin)));
-    --_thumb-color: var(--thumb-color-checked, var(--_input-background));
-  }
-}
-
-@layer components.inputs {
-  :where(.nc-tag-select-field) {
-    --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
-    --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
-    --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
-    --nc-legend-spacing: var(--control-spacing-near, .5em);
-  }
-
-  :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
-    outline-offset: var(--controls-spacing-near, .5em);
-    outline: var(--_input-outline);
-    border-radius: var(--_tag-select-border-radius);
-  }
-
-  :where(.nc-tag-select-field) input {
-    opacity: 0;
-    position: absolute;
-  }
-
-  :where(.nc-tag-select-field) label {
-    display: grid;
-  }
-
-  :where(.nc-tag-select-field) label:hover, :where(.nc-tag-select-field) label:focus-within {
-    background-color: var(--_input-hover-background);
-  }
-
-  :where(.nc-tag-select-field) label:has(input:checked) {
-    background: var(--_tag-select-checked-surface-color);
-    color: var(--_tag-select-checked-text-color);
-    box-shadow: var(--shadow-near);
-  }
-
-  :where(.nc-tag-select-field) label:has(input:disabled) {
-    filter: var(--_input-disabled-filter);
-    cursor: not-allowed;
-  }
-}
-
-@layer components.lists {
-  :where(.nc-meta-list) {
-    inline-size: 100%;
-    container: metalist / inline-size;
-  }
-
-  :where(.nc-meta-list-item) {
-    overflow-wrap: break-word;
-    -webkit-hyphens: auto;
-    hyphens: auto;
-    inline-size: 100%;
-    max-inline-size: 100%;
-  }
-
-  :where(.nc-meta-list-item):not(:last-child) {
-    margin-block-end: var(--control-spacing-base, .75em);
-  }
-
-  @container metalist (width >= 20rem) {
-    :where(.nc-meta-list-item) {
-      inline-size: auto;
-    }
-
-    :where(.nc-meta-list-item):not(:last-child):after {
-      content: "";
-      border-right: var(--border-width-medium) solid var(--color-border-muted);
-      margin: 0 var(--control-spacing-base, .75em);
-      transform: calc(var(--border-width-medium) / 2);
-    }
-  }
-
-  :where(.nc-list-reset) {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  :where(.nc-list-reset) li {
-    margin: 0;
-  }
-}
-
-@layer components.notifications {
-  :root {
-    --_notification-max-width: var(--notifications-max-width, 20rem);
-    --_notification-gap: var(--notification-gap, var(--spacing-base));
-    --_notification-border-color: var(--notification-border-color, var(--color-border-base));
-    --_notification-center-background: var(--notification-center-background, color-mix(in oklch, var(---color-surface-subtle), transparent 95%));
-  }
-
-  :where(.nc-notification-center, .nc-notification-output) {
-    block-size: 100%;
-    inline-size: 100%;
-    max-inline-size: var(--_notification-max-width);
-    padding-block: var(--_notification-gap);
-    pointer-events: none;
-    position: fixed;
-    inset-block: 0;
-    inset-inline-end: 0;
-  }
-
-  :where(.nc-notification-center) {
-    -webkit-backdrop-filter: blur(3px);
-    backdrop-filter: blur(3px);
-    background-color: var(--_notification-center-background);
-    block-size: 100%;
-    transition: transform var(--transition-duration-moderate-2) var(--ease-in-out-2);
-    transform: translate(100%);
-  }
-
-  :where(.nc-notification-output, .nc-notification-center-container) {
-    align-items: flex-end;
-    gap: var(--_notification-gap);
-    max-block-size: 100%;
-    inline-size: 100%;
-    padding-inline: var(--_notification-gap);
-    flex-direction: column;
-    flex-grow: 1;
-    min-block-size: 100%;
-    min-inline-size: 0;
-    display: flex;
-    overflow-y: scroll;
-  }
-
-  :where(.nc-notification-center.-open) {
-    pointer-events: all;
-    transform: translate(0);
-  }
-
-  :where(.nc-notification-center.-open:has( + .nc-notification-output > .nc-notification)) {
-    opacity: .5;
-    filter: contrast(.5);
-  }
-
-  :where(.nc-notification-center-header) {
-    align-items: center;
-    gap: var(--_notification-gap);
-    padding-inline: var(--_notification-gap);
-    margin-block-end: var(--_notification-gap);
-    display: flex;
-  }
-
-  :where(.nc-notification) {
-    padding: var(--control-spacing-near, .5em) var(--control-spacing-base, .75em);
-    background: var(--color-surface-base);
-    border: var(--border-width-thin) solid var(--_notification-border-color);
-    border-radius: var(--border-radius-small);
-    inline-size: 100%;
-    box-shadow: var(--shadow-far);
-    animation: pop-in var(--transition-duration-moderate-2) var(--easing-entry);
-    color: var(--color-text-base);
-    pointer-events: all;
-    flex-direction: column;
-    display: flex;
-  }
-
-  :where(.nc-notification) p {
-    margin: 0;
-    padding: 0;
-  }
-
-  :where(.nc-notification-title) {
-    font-size: var(--font-size-base);
-    font-weight: var(--font-weight-heading);
-  }
-
-  :where(.nc-notification-description) {
-    font-size: var(--font-size-small);
-  }
-
-  :where(.nc-notification-time) {
-    font-size: var(--font-size-small);
-    color: var(--color-text-subtle);
-  }
-
-  :where(.nc-notification-footer) {
-    inline-size: 100%;
-    justify-content: space-between;
-    align-items: flex-end;
-    margin-block-start: var(--control-spacing-tiny, .25em);
-    display: flex;
-  }
-
-  :where(.nc-notification .nc-button, .nc-notification-center .nc-button) {
-    --button-height-base: 1em;
-    font-size: var(--font-size-small);
-  }
-
-  :where(.nc-notification.-closing) {
-    animation: remove-notification var(--transition-duration-moderate-2) var(--easing-exit) forwards;
-  }
-
-  @keyframes pop-in {
-    0% {
-      opacity: 0;
-      transform: translate(3vmin, -2vmin)scale(.98);
-    }
-
-    50% {
-      transform: translate(0, -1vmin)scale(.98);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translate(0)scale(1);
-    }
-  }
-
-  @keyframes remove-notification {
-    to {
-      opacity: 0;
-      transform: translate(0, 4vmin)scale(.98);
-    }
-  }
-}
-
-@layer components.table {
-  :where(.nc-table) {
-    inline-size: 100%;
-    max-inline-size: 100%;
-    overflow-x: auto;
-  }
-}