@nordcode/ui 1.0.0

package/out/bundle_configless.css

@@ -0,0 +1,1135 @@
+@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(*) {
+    --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));
+    --shadow-inset: var(--lightningcss-light, var(--shadow-inset-light)) var(--lightningcss-dark, var(--shadow-inset-dark));
+    --shadow-nearest: var(--lightningcss-light, var(--shadow-nearest-light)) var(--lightningcss-dark, var(--shadow-nearest-dark));
+    --shadow-near: var(--lightningcss-light, var(--shadow-near-light)) var(--lightningcss-dark, var(--shadow-near-dark));
+    --shadow-medium: var(--lightningcss-light, var(--shadow-medium-light)) var(--lightningcss-dark, var(--shadow-medium-dark));
+    --shadow-far: var(--lightningcss-light, var(--shadow-far-light)) var(--lightningcss-dark, var(--shadow-far-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;
+    accent-color: var(--color-brand-primary-base);
+    font-kerning: normal;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  :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-short) var(--ease-2);
+  }
+
+  :where(:focus-visible, :focus) {
+    outline: var(--border-width-medium) solid var(--color-brand-primary-base);
+    outline-offset: 1ch;
+  }
+
+  :where(:focus:not(:focus-visible)) {
+    outline: none;
+  }
+
+  :where(html) {
+    -webkit-text-size-adjust: none;
+    -moz-text-size-adjust: none;
+    text-size-adjust: none;
+    inline-size: 100%;
+    text-rendering: optimizeSpeed;
+    block-size: 100%;
+    min-block-size: 100vh;
+  }
+
+  :where(body) {
+    font-weight: var(--font-weight-default);
+    color: var(--color-text-base);
+    background-color: var(--color-surface-muted);
+    font-family: var(--font-family-default);
+    line-height: var(--line-height-base);
+    font-style: normal;
+  }
+
+  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
+    margin: 0;
+  }
+
+  :where(ul[role="list"], ol[role="list"]) {
+    list-style: none;
+  }
+
+  :where(h1, h2, h3, h4) {
+    text-wrap: balance;
+  }
+
+  :where(a:not([class])) {
+    -webkit-text-decoration-skip-ink: auto;
+    text-decoration-skip-ink: auto;
+    color: currentColor;
+  }
+
+  :where(img, svg, video, canvas, audio, iframe, embed, object) {
+    display: block;
+  }
+
+  :where(img, svg, video) {
+    block-size: auto;
+    max-inline-size: 100%;
+  }
+
+  :where(figure) {
+    place-items: center;
+    gap: 0;
+    display: grid;
+  }
+
+  :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
+    cursor: pointer;
+    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(label:not(class) + input, label:not(class) + select, label:not(class) + textarea) {
+    display: block;
+  }
+
+  :where(p, summary) {
+    max-inline-size: var(--measure-base);
+    font-size: inherit;
+    line-height: var(--line-height-base);
+    margin: 0;
+  }
+
+  :where(p) {
+    text-wrap: pretty;
+  }
+}
+
+@layer base {
+  :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: .5lh;
+  }
+
+  :where(dl:not([class]), .nc-description-list) {
+    word-break: break-word;
+    grid-template-columns: .25fr .75fr;
+    align-items: flex-start;
+    row-gap: .5lh;
+    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: 2ch;
+    }
+
+    :where(dt):not(:last-of-type) {
+      border-bottom: var(--border-width-thin) solid var(--color-border-muted);
+      padding-block-end: .5lh;
+    }
+
+    :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) {
+    border-end-end-radius: inherit;
+    border-end-start-radius: inherit;
+  }
+
+  :where(figcaption) {
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-default);
+    line-height: var(--line-height-base);
+    color: var(--color-surface-subtle);
+    background-color: var(--color-text-base);
+    padding: .3lh 1ch;
+    display: block;
+  }
+
+  :where(details) {
+    --p-x-details: 2ch;
+    --p-y-details: .75lh;
+    background-color: var(--color-surface-subtle);
+    border-radius: var(--border-radius-medium);
+    border: var(--border-width-thin) solid var(--color-border-base);
+    inline-size: 100%;
+  }
+
+  :where(details) > * {
+    padding-inline: var(--p-x-details);
+  }
+
+  :where(details) > :last-child {
+    padding-block-end: var(--p-y-details);
+  }
+
+  :where(details) > summary {
+    cursor: pointer;
+    color: var(--color-text-base);
+    inline-size: 100%;
+    font-weight: var(--font-weight-strong);
+    padding-inline: var(--p-x-details);
+    padding-block: 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: 2ch;
+    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: .5ch;
+  }
+
+  cite {
+    font-family: var(--font-family-serif);
+    font-style: normal;
+  }
+
+  :where(hr) {
+    border-top: var(--border-width-medium) solid var(--color-border-base);
+    block-size: 0;
+    inline-size: 100%;
+  }
+
+  :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);
+  }
+
+  :where() {
+    background-color: var(--color-brand-primary-base);
+    color: var(--color-surface-base);
+  }
+
+  :where(a, .nc-link) {
+    color: inherit;
+    font-family: var(--font-family-link);
+    text-underline-offset: .25lh;
+    font-weight: var(--font-weight-default);
+    cursor: pointer;
+    letter-spacing: var(--tracking-tight);
+    text-decoration: underline;
+    text-decoration-thickness: from-font;
+  }
+
+  :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([aria-disabled="true"], .disabled, :disabled) {
+    color: inherit;
+    opacity: 1;
+    cursor: not-allowed;
+    filter: contrast(.64) opacity(.64);
+  }
+
+  :where(del, ins, mark, code, kbd, var) {
+    border-radius: var(--border-radius-small);
+    line-height: inherit;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    padding-inline: .5ch;
+  }
+
+  :where(code, kbd, var) {
+    font-family: var(--font-family-mono);
+    letter-spacing: 0;
+    font-weight: var(--font-weight-default);
+    -webkit-hyphens: none;
+    hyphens: none;
+    tab-size: 4;
+    text-align: left;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    max-inline-size: fit-content;
+    padding-block: .125lh;
+    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) {
+    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;
+    padding: .5lh 2ch;
+    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) {
+    line-height: var(--line-height-small);
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+    padding: .4lh 1ch;
+  }
+
+  :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);
+  }
+
+  :target {
+    scroll-margin-block-start: 2ex;
+  }
+
+  :where(del) {
+    color: var(--color-status-danger-text);
+    -webkit-text-decoration-color: var(--color-status-danger-text);
+    text-decoration-color: var(--color-status-danger-text);
+    background: var(--color-status-danger-surface);
+  }
+
+  :where(ins) {
+    color: var(--color-status-success-text);
+    -webkit-text-decoration-color: var(--color-status-success-text);
+    text-decoration-color: var(--color-status-success-text);
+    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: 2ch;
+  }
+
+  :where(li + li), :where(li > :is(ul, ol)) {
+    margin-top: .5lh;
+  }
+}
+
+@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).-inherit {
+    gap: var(--stack-gap, var(--spacing-base));
+  }
+
+  :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, .6lh);
+  }
+
+  :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.3lh;
+  }
+
+  :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + p {
+    --flow-gap: .5lh;
+  }
+
+  :where(.nc-flow) > p + p {
+    --flow-gap: .8lh;
+  }
+
+  :where(.nc-flow) > figure {
+    margin-block: 1lh;
+    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).-inherit {
+    gap: var(--cluster-gap, var(--spacing-base));
+  }
+
+  :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-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-inherit {
+    gap: inherit;
+  }
+
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-tiny {
+    gap: var(--spacing-tiny);
+  }
+
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nearest {
+    gap: var(--spacing-nearest);
+  }
+
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-near {
+    gap: var(--spacing-near);
+  }
+
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-base {
+    gap: var(--spacing-base);
+  }
+
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-far {
+    gap: var(--spacing-far);
+  }
+
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-farthest {
+    gap: var(--spacing-farthest);
+  }
+
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nogap {
+    gap: 0;
+  }
+
+  :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);
+    row-gap: var(--_nc-ram-grid-gap-row);
+    column-gap: var(--_nc-ram-grid-gap-column);
+    grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
+    display: grid;
+  }
+}
+
+@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);
+    --transition-duration-instant: 0s;
+    --transition-duration-short: .1s;
+    --transition-duration-base: .2s;
+    --transition-duration-long: .3s;
+    --transition-duration-entry: 0s;
+    --transition-duration-exit: 0s;
+    --transition-target-scale: .9;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(html) {
+      --transition-duration-instant: 0s;
+      --transition-duration-short: 0s;
+      --transition-duration-base: 0s;
+      --transition-duration-long: 0s;
+      --transition-duration-entry: 0s;
+      --transition-duration-exit: 0s;
+    }
+  }
+}
+
+@layer helpers.theme {
+  * {
+    --text: var(--color-text-muted);
+    --color: var(--color-text-muted);
+    --surface: transparent;
+    --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: transparent;
+    --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);
+  }
+}
+
+: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;
+}
+
+.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;
+}