@leftium/nimble.css 0.2.0 → 0.4.0

package/dist/nimble-full.css

@@ -1,946 +0,0 @@
-@charset "UTF-8";
-@layer nimble.reset, nimble.base, nimble.utilities;
-@layer nimble.reset {
-  :where(*:not(progress)),
-  :where(*::before),
-  :where(*::after) {
-    box-sizing: border-box;
-    background-repeat: no-repeat;
-  }
-  :where(html) {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-  }
-  :where(body) {
-    margin: 0;
-  }
-  :where(h1) {
-    font-size: 2em;
-    margin-block: 0.67em;
-  }
-  :where(hr) {
-    height: 0;
-    color: inherit;
-  }
-  :where(nav) :where(ol, ul) {
-    list-style-type: none;
-    padding: 0;
-  }
-  :where(pre) {
-    font-family: monospace, monospace;
-    font-size: 1em;
-  }
-  :where(abbr[title]) {
-    text-decoration: underline dotted;
-  }
-  :where(b, strong) {
-    font-weight: bolder;
-  }
-  :where(code, kbd, samp) {
-    font-family: monospace, monospace;
-    font-size: 1em;
-  }
-  :where(small) {
-    font-size: 80%;
-  }
-  :where(sub, sup) {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  :where(sub) {
-    bottom: -0.25em;
-  }
-  :where(sup) {
-    top: -0.5em;
-  }
-  :where(iframe) {
-    border-style: none;
-  }
-  :where(table) {
-    border-collapse: collapse;
-    border-color: currentColor;
-    text-indent: 0;
-  }
-  :where(button, input, select, textarea) {
-    font: inherit;
-    letter-spacing: inherit;
-  }
-  :where(button, [type=button], [type=reset], [type=submit]) {
-    -webkit-appearance: button;
-  }
-  :where(fieldset) {
-    border: 1px solid #a0a0a0;
-  }
-  :where(progress) {
-    vertical-align: baseline;
-  }
-  :where(textarea) {
-    resize: vertical;
-    overflow: auto;
-  }
-  :where([type=search]) {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-  :where(::-webkit-search-decoration) {
-    -webkit-appearance: none;
-  }
-  :where(::-webkit-inner-spin-button),
-  :where(::-webkit-outer-spin-button) {
-    height: auto;
-  }
-  :where(::-webkit-file-upload-button) {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-  :where(summary) {
-    display: list-item;
-  }
-  :where(a, area, button, input, label, select, summary, textarea, [tabindex]) {
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-  :where([aria-busy=true]) {
-    cursor: progress;
-  }
-  :where([aria-disabled=true], [disabled]) {
-    cursor: not-allowed;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    :where(*),
-    :where(*::before),
-    :where(*::after) {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-}
-@layer nimble.base {
-  :root {
-    color-scheme: light dark;
-    --nc-surface-1: light-dark(oklch(0.985 0.002 250), oklch(0.17 0.005 260));
-    --nc-surface-2: light-dark(oklch(0.955 0.002 250), oklch(0.2 0.005 260));
-    --nc-surface-3: light-dark(oklch(0.925 0.002 250), oklch(0.23 0.005 260));
-    --nc-surface-4: light-dark(oklch(0.885 0.002 250), oklch(0.27 0.005 260));
-    --nc-text: light-dark(oklch(0.28 0.005 250), oklch(0.86 0.005 250));
-    --nc-border: light-dark(oklch(0.83 0.005 250), oklch(0.28 0.005 260));
-    --nc-primary: light-dark(oklch(0.5 0.2 250), oklch(0.6 0.2 250));
-    --nc-primary-hover: light-dark(oklch(0.4 0.2 250), oklch(0.7 0.2 250));
-    --nc-primary-focus: oklch(0.5 0.2 250 / 0.4);
-    --nc-primary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
-    --nc-secondary: light-dark(oklch(0.45 0.05 250), oklch(0.6 0.05 250));
-    --nc-secondary-hover: light-dark(oklch(0.35 0.05 250), oklch(0.7 0.05 250));
-    --nc-secondary-focus: oklch(0.45 0.05 250 / 0.3);
-    --nc-secondary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
-    --nc-valid: light-dark(oklch(0.52 0.17 145), oklch(0.65 0.2 145));
-    --nc-invalid: light-dark(oklch(0.55 0.22 25), oklch(0.65 0.22 25));
-    --nc-font-sans: system-ui, sans-serif;
-    --nc-font-mono: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
-    --nc-spacing: 1rem;
-    --nc-radius: 0.25rem;
-    --nc-content-width: 720px;
-  }
-  [data-theme=dark] {
-    color-scheme: dark;
-  }
-  [data-theme=light] {
-    color-scheme: light;
-  }
-}
-@layer nimble.base {
-  html {
-    font-family: var(--nc-font-sans);
-    font-size: 100%;
-    line-height: 1.5;
-    color: var(--nc-text);
-    background-color: var(--nc-surface-1);
-  }
-  body {
-    display: grid;
-    grid-template-columns: 1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;
-    min-height: 100dvh;
-  }
-  body > * {
-    grid-column: 2;
-    min-width: 0;
-  }
-  ::selection {
-    background-color: var(--nc-primary-focus);
-    color: var(--nc-text);
-  }
-}
-@layer nimble.base {
-  h1 {
-    font-size: 2rem;
-    line-height: 1.1;
-    margin-top: 0;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  h2 {
-    font-size: 1.75rem;
-    line-height: 1.15;
-    margin-top: 2rem;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  h3 {
-    font-size: 1.5rem;
-    line-height: 1.2;
-    margin-top: 1.5rem;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  h4 {
-    font-size: 1.25rem;
-    line-height: 1.3;
-    margin-top: 1.5rem;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  h5 {
-    font-size: 1.125rem;
-    line-height: 1.4;
-    margin-top: 1.5rem;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  h6 {
-    font-size: 1rem;
-    line-height: 1.5;
-    margin-top: 1.5rem;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  @media (max-width: 720px) {
-    h1 {
-      font-size: 1.75rem;
-    }
-    h2 {
-      font-size: 1.5rem;
-    }
-    h3 {
-      font-size: 1.3rem;
-    }
-  }
-  p, ul, ol, dl, blockquote, pre, table, figure, form, fieldset {
-    margin-top: 0;
-    margin-bottom: var(--nc-spacing);
-  }
-  ul, ol {
-    padding-inline-start: 1.5em;
-  }
-  li {
-    margin-bottom: 0.25em;
-  }
-  :where(li) > :where(ul, ol) {
-    margin-bottom: 0;
-  }
-  dt {
-    font-weight: 600;
-  }
-  dd {
-    margin-inline-start: 1.5em;
-    margin-bottom: 0.5em;
-  }
-  blockquote {
-    margin-block: var(--nc-spacing);
-    margin-inline: 0;
-    padding: 0.25em var(--nc-spacing);
-    border-inline-start: 0.25rem solid var(--nc-border);
-    font-style: italic;
-  }
-  :where(blockquote) footer,
-  :where(blockquote) cite {
-    font-style: normal;
-    font-size: 0.9em;
-    color: color-mix(in oklch, var(--nc-text), transparent 40%);
-  }
-  hr {
-    border: none;
-    height: 1px;
-    background-color: color-mix(in oklch, var(--nc-border), transparent 40%);
-    margin: calc(var(--nc-spacing) * 2) 0;
-  }
-  mark {
-    padding: 0.1em 0.25em;
-    background-color: light-dark(#fde68a, oklch(0.55 0.12 85));
-    color: light-dark(inherit, oklch(0.95 0.01 85));
-    border-radius: 2px;
-  }
-  address {
-    font-style: normal;
-  }
-}
-@layer nimble.base {
-  :where(a:not([role=button])) {
-    color: var(--nc-primary);
-    text-decoration: underline;
-    text-underline-offset: 0.15em;
-    text-decoration-color: color-mix(in oklch, var(--nc-primary), transparent 50%);
-    transition: color 0.2s, text-decoration-color 0.2s;
-  }
-  :where(a:not([role=button])):visited {
-    color: color-mix(in oklch, var(--nc-primary) 40%, oklch(0.38 0.15 310));
-    text-decoration-color: color-mix(in oklch, var(--nc-primary) 40%, oklch(0.38 0.15 310) 30%);
-  }
-  :where(a:not([role=button])):hover {
-    color: var(--nc-primary-hover);
-    text-decoration-color: var(--nc-primary-hover);
-  }
-}
-@layer nimble.base {
-  :where(button, [type=submit], [type=reset], [type=button], [role=button]) {
-    --_btn-padding-v: 0.5em;
-    --_btn-padding-h: 1em;
-    padding: var(--_btn-padding-v) var(--_btn-padding-h);
-    background-color: var(--nc-primary);
-    color: var(--nc-primary-contrast);
-    border: 1px solid var(--nc-primary);
-    border-radius: var(--nc-radius);
-    font: inherit;
-    font-size: 1rem;
-    line-height: 1.5;
-    cursor: pointer;
-    text-decoration: none;
-    display: inline-block;
-    text-align: center;
-    margin: 0 0.25em 0.25em 0;
-    transition: background-color 0.2s, border-color 0.2s;
-  }
-  :where(button, [type=submit], [type=reset], [type=button], [role=button]):hover {
-    background-color: var(--nc-primary-hover);
-    border-color: var(--nc-primary-hover);
-  }
-  :where(button, [type=submit], [type=reset], [type=button], [role=button]):focus-visible {
-    box-shadow: 0 0 0 2px var(--nc-primary-focus);
-    outline: none;
-  }
-  :where(button, [type=submit], [type=reset], [type=button], [role=button]).inline {
-    --_btn-padding-v: 0.05em;
-    --_btn-padding-h: 0.4em;
-    margin: 0.1em 0.15em;
-    font-size: 0.875em;
-    vertical-align: baseline;
-  }
-  :where(button, [type=submit], [type=reset], [type=button], [role=button]):disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-  :where([role=group]) {
-    display: inline-flex;
-    margin-bottom: var(--nc-spacing);
-  }
-  [role=group] > * {
-    border-radius: 0;
-    margin: 0;
-    position: relative;
-  }
-  [role=group] > * + * {
-    --_divider: "";
-  }
-  [role=group] > * + *::before {
-    content: var(--_divider);
-    position: absolute;
-    inset-inline-start: 0;
-    top: 20%;
-    bottom: 20%;
-    width: 1px;
-    background: rgba(255, 255, 255, 0.3);
-    pointer-events: none;
-  }
-  [role=group] > :not(.secondary):not(.outline) + .secondary,
-  [role=group] > .secondary + :not(.secondary):not(.outline) {
-    --_divider: none;
-  }
-  [role=group] > :not(.secondary):not(.outline) + .outline,
-  [role=group] > .outline + :not(.secondary):not(.outline) {
-    --_divider: none;
-  }
-  [role=group] > .secondary + .outline,
-  [role=group] > .outline + .secondary {
-    --_divider: none;
-  }
-  [role=group] > input + *,
-  [role=group] > select + * {
-    --_divider: none;
-  }
-  [role=group] > :first-child {
-    border-start-start-radius: var(--nc-radius);
-    border-end-start-radius: var(--nc-radius);
-  }
-  [role=group] > :last-child {
-    border-start-end-radius: var(--nc-radius);
-    border-end-end-radius: var(--nc-radius);
-  }
-  [role=group]:has(.outline):not(:has(> :not(.outline))) {
-    border: 1px solid var(--nc-primary);
-    border-radius: var(--nc-radius);
-  }
-  [role=group]:has(.outline):not(:has(> :not(.outline))) > .outline {
-    border: none;
-  }
-  [role=group] > .outline + .outline::before {
-    background: var(--nc-primary);
-  }
-  [role=search] [role=group] > :first-child {
-    border-start-start-radius: 5rem;
-    border-end-start-radius: 5rem;
-    padding-inline-start: 1.25em;
-  }
-  [role=search] [role=group] > :last-child {
-    border-start-end-radius: 5rem;
-    border-end-end-radius: 5rem;
-    padding-inline-end: 1.25em;
-  }
-}
-@layer nimble.utilities {
-  .secondary {
-    background-color: var(--nc-secondary);
-    border-color: var(--nc-secondary);
-    color: var(--nc-secondary-contrast);
-  }
-  .secondary:hover {
-    background-color: var(--nc-secondary-hover);
-    border-color: var(--nc-secondary-hover);
-  }
-  .secondary:focus-visible {
-    box-shadow: 0 0 0 2px var(--nc-secondary-focus);
-  }
-  .outline {
-    background-color: transparent;
-    color: var(--nc-primary);
-  }
-  .outline:hover {
-    background-color: var(--nc-primary-focus);
-    color: var(--nc-primary-hover);
-    border-color: var(--nc-primary-hover);
-  }
-}
-@layer nimble.base {
-  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset]),
-  select, textarea) {
-    --_input-bg: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
-    padding: 0.5em 0.75em;
-    min-height: calc(2.5em + 2px);
-    background-color: var(--_input-bg);
-    border: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius);
-    color: var(--nc-text);
-    font: inherit;
-    font-size: 1rem;
-    transition: border-color 0.2s, box-shadow 0.2s;
-  }
-  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=date], [type=month], [type=week], [type=time], [type=datetime-local]),
-  select, textarea) {
-    width: 100%;
-    margin-bottom: var(--nc-spacing);
-  }
-  :where(input, select, textarea):focus-visible {
-    border-color: var(--nc-primary);
-    box-shadow: 0 0 0 2px var(--nc-primary-focus);
-    outline: none;
-  }
-  :where(input, select, textarea) + :where(small) {
-    display: block;
-    margin-top: calc(var(--nc-spacing) * -0.75);
-    margin-bottom: var(--nc-spacing);
-    font-size: 0.875em;
-    color: color-mix(in oklch, var(--nc-text), transparent 40%);
-  }
-  :where(input, select, textarea)[aria-invalid=false] {
-    border-color: var(--nc-valid);
-  }
-  :where(input, select, textarea)[aria-invalid=true] {
-    border-color: var(--nc-invalid);
-  }
-  :where(input, select, textarea)[aria-invalid=false] + :where(small) {
-    color: var(--nc-valid);
-  }
-  :where(input, select, textarea)[aria-invalid=true] + :where(small) {
-    color: var(--nc-invalid);
-  }
-  :where(label) {
-    display: block;
-    margin-bottom: 0.25em;
-  }
-  :where(label:has(+ input, + select, + textarea)) {
-    font-weight: 600;
-  }
-  :where(fieldset) {
-    border: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius);
-    padding: var(--nc-spacing);
-    min-width: 0;
-    max-width: 100%;
-  }
-  :where(legend) {
-    font-weight: 600;
-    padding-inline: 0.25em;
-  }
-  :where([type=checkbox], [type=radio]) {
-    accent-color: var(--nc-primary);
-    width: 1.125em;
-    height: 1.125em;
-    margin: 0;
-  }
-  :where(label:has([type=checkbox], [type=radio])) {
-    display: flex;
-    align-items: center;
-    gap: 0.35em;
-    margin-bottom: var(--nc-spacing);
-  }
-  :where(label:has([type=radio])) {
-    margin-bottom: 0.35em;
-  }
-  :where([type=range]) {
-    accent-color: var(--nc-primary);
-    width: 100%;
-  }
-  :where(input[list]) {
-    width: auto;
-  }
-  :where([type=file]) {
-    color: var(--nc-text);
-    font: inherit;
-    cursor: pointer;
-    max-width: 100%;
-  }
-  :where([type=file])::file-selector-button {
-    padding: 0.5em 1em;
-    margin-right: 0.75em;
-    margin-inline-end: 0.75em;
-    background-color: var(--nc-primary);
-    color: var(--nc-primary-contrast);
-    border: 1px solid var(--nc-primary);
-    border-radius: var(--nc-radius);
-    font: inherit;
-    cursor: pointer;
-    transition: background-color 0.2s, border-color 0.2s;
-  }
-  :where([type=file])::file-selector-button:hover {
-    background-color: var(--nc-primary-hover);
-    border-color: var(--nc-primary-hover);
-  }
-  :where([type=date], [type=month], [type=week], [type=time], [type=datetime-local]) {
-    min-width: 10em;
-    margin-bottom: var(--nc-spacing);
-  }
-  :where([type=color]) {
-    --_color-size: calc(1em * 1.5 + 1em + 2px);
-    --_color-pad: 0.25em;
-    height: var(--_color-size);
-    width: calc((var(--_color-size) - 2 * var(--_color-pad)) * 1.618 + 2 * var(--_color-pad));
-    padding: var(--_color-pad);
-    background-color: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
-    border: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius);
-    cursor: pointer;
-  }
-  :where([type=color])::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-  :where([type=color])::-webkit-color-swatch {
-    border: none;
-    border-radius: calc(var(--nc-radius) * 0.5);
-  }
-  :where(label:has([type=checkbox][role=switch])) {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5em;
-  }
-  :where([type=checkbox][role=switch]) {
-    appearance: none;
-    width: 2.5em;
-    height: 1.25em;
-    border-radius: 1em;
-    background-color: var(--nc-border);
-    position: relative;
-    cursor: pointer;
-    flex-shrink: 0;
-    margin: 0;
-    transition: background-color 0.2s;
-  }
-  :where([type=checkbox][role=switch])::before {
-    content: "";
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: calc(1.25em - 4px);
-    height: calc(1.25em - 4px);
-    border-radius: 50%;
-    background-color: #fff;
-    transition: transform 0.2s;
-  }
-  :where([type=checkbox][role=switch]):checked {
-    background-color: var(--nc-primary);
-  }
-  :where([type=checkbox][role=switch]):checked::before {
-    transform: translateX(1.25em);
-  }
-}
-[type=date],
-[type=month],
-[type=week],
-[type=time],
-[type=datetime-local] {
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-@layer nimble.base {
-  :where(table) {
-    width: 100%;
-    border-collapse: collapse;
-  }
-  :where(th, td) {
-    padding: 0.5em 0.75em;
-    border-bottom: 1px solid color-mix(in oklch, var(--nc-border), transparent 40%);
-    text-align: start;
-  }
-  :where(thead th, thead td) {
-    font-weight: 600;
-    border-bottom-width: 2px;
-    background-color: var(--nc-surface-2);
-    text-wrap: balance;
-  }
-  :where(figure:has(table)) {
-    overflow-x: auto;
-  }
-}
-@layer nimble.base {
-  :where(code, kbd, samp) {
-    font-family: var(--nc-font-mono);
-    font-size: 0.875em;
-    background-color: var(--nc-surface-2);
-    border-radius: var(--nc-radius);
-    padding: 0.15em 0.35em;
-  }
-  :where(pre) {
-    background-color: var(--nc-surface-2);
-    border-radius: var(--nc-radius);
-    padding: var(--nc-spacing);
-    overflow-x: auto;
-  }
-  :where(pre code) {
-    background: none;
-    padding: 0;
-    font-size: inherit;
-  }
-  :where(kbd) {
-    border: 1px solid var(--nc-border);
-    border-bottom-width: 2px;
-  }
-}
-@layer nimble.base {
-  :where(img, video, canvas, svg) {
-    max-width: 100%;
-    height: auto;
-  }
-  :where(figure) {
-    margin: 0;
-  }
-  :where(figcaption) {
-    font-size: 0.9em;
-    color: color-mix(in oklch, var(--nc-text), transparent 40%);
-    margin-top: 0.5em;
-  }
-}
-@layer nimble.base {
-  :where(details) {
-    border: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius);
-    padding: 0 1em;
-  }
-  :where(summary) {
-    cursor: pointer;
-    font-weight: 600;
-    margin: 0 -1em;
-    padding: 0.75em 1em;
-    list-style-type: "▶ ";
-  }
-  :where(details[open] > summary) {
-    list-style-type: "▼ ";
-  }
-  :where(details[open]) {
-    padding-bottom: 0.75em;
-  }
-  details :last-child {
-    margin-bottom: 0;
-  }
-}
-@supports selector(details::details-content) {
-  details::details-content {
-    transition: opacity 0.3s ease, content-visibility 0.3s ease allow-discrete;
-    opacity: 0;
-  }
-  details[open]::details-content {
-    opacity: 1;
-  }
-  @supports (interpolate-size: allow-keywords) {
-    details {
-      interpolate-size: allow-keywords;
-    }
-    details::details-content {
-      transition: height 0.3s ease, opacity 0.3s ease, content-visibility 0.3s ease allow-discrete;
-      height: 0;
-      overflow: clip;
-    }
-    details[open]::details-content {
-      height: auto;
-    }
-  }
-}
-@layer nimble.base {
-  :where(dialog) {
-    background-color: var(--nc-surface-4);
-    border: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius);
-    max-width: min(90vw, 40rem);
-    padding: var(--nc-spacing);
-  }
-  dialog::backdrop {
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(4px);
-    animation: nc-backdrop-in 0.2s ease;
-  }
-  @keyframes nc-backdrop-in {
-    from {
-      opacity: 0;
-    }
-  }
-}
-@media print {
-  body {
-    background: #fff;
-    color: #000;
-  }
-  a[href]::after {
-    content: " (" attr(href) ")";
-    font-size: 0.85em;
-    color: #555;
-  }
-  a[href^="#"]::after,
-  a[href^="javascript:"]::after {
-    content: none;
-  }
-  pre, blockquote {
-    page-break-inside: avoid;
-  }
-  h2, h3, h4 {
-    page-break-after: avoid;
-  }
-  img {
-    max-width: 100% !important;
-  }
-  @page {
-    margin: 2cm;
-  }
-}
-@layer nimble.base {
-  :where(progress) {
-    -webkit-appearance: none;
-    appearance: none;
-    position: relative;
-    width: 100%;
-    height: 0.5rem;
-    overflow: hidden;
-    border: 0;
-    border-radius: var(--nc-radius);
-    background-color: var(--nc-surface-3);
-    color: var(--nc-primary);
-  }
-  :where(progress)::-webkit-progress-bar {
-    border-radius: var(--nc-radius);
-    background-color: var(--nc-surface-3);
-  }
-  :where(progress)::-webkit-progress-value {
-    background-color: var(--nc-primary);
-    border-radius: var(--nc-radius);
-    transition: inline-size 0.3s ease;
-  }
-  :where(progress)::-moz-progress-bar {
-    background-color: var(--nc-primary);
-    border-radius: var(--nc-radius);
-  }
-  :where(progress):not([value]) {
-    --nc-progress-track:
-      linear-gradient(to right,
-        var(--nc-surface-3) 0%,
-        var(--nc-primary) 25%,
-        var(--nc-primary) 25%,
-        var(--nc-surface-3) 50%,
-        var(--nc-surface-3) 50%,
-        var(--nc-primary) 75%,
-        var(--nc-primary) 75%,
-        var(--nc-surface-3) 100%);
-    --nc-progress-track-size: 200% 100%;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    @supports selector(progress::after) {
-      :where(progress):not([value])::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background: var(--nc-progress-track);
-        background-size: var(--nc-progress-track-size);
-        animation: nc-progress-indeterminate 12s linear infinite;
-      }
-    }
-    :where(progress):not([value])::-webkit-progress-bar {
-      background: var(--nc-progress-track);
-      background-size: var(--nc-progress-track-size);
-      animation: nc-progress-indeterminate 12s linear infinite;
-    }
-    :where(progress):not([value])::-moz-progress-bar {
-      background: var(--nc-progress-track);
-      background-size: var(--nc-progress-track-size);
-      animation: nc-progress-indeterminate 12s linear infinite;
-    }
-  }
-  @keyframes nc-progress-indeterminate {
-    from {
-      background-position: 0% 0%;
-    }
-    to {
-      background-position: -200% 0%;
-    }
-  }
-}
-@layer nimble.base {
-  :where(meter) {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    width: 100%;
-    height: 0.5rem;
-    overflow: hidden;
-    border: 0;
-    border-radius: var(--nc-radius);
-    background-color: var(--nc-surface-3);
-  }
-  :where(meter)::-webkit-meter-bar {
-    border-radius: var(--nc-radius);
-    background-color: var(--nc-surface-3);
-    border: 0;
-    height: 0.5rem;
-  }
-  :where(meter)::-webkit-meter-optimum-value {
-    background-color: var(--nc-valid);
-    border-radius: var(--nc-radius);
-  }
-  :where(meter)::-webkit-meter-suboptimum-value {
-    background-color: var(--nc-primary);
-    border-radius: var(--nc-radius);
-  }
-  :where(meter)::-webkit-meter-even-less-good-value {
-    background-color: var(--nc-invalid);
-    border-radius: var(--nc-radius);
-  }
-  :where(meter)::-moz-meter-bar {
-    background-color: var(--nc-primary);
-    border-radius: var(--nc-radius);
-  }
-  :where(meter):-moz-meter-optimum::-moz-meter-bar {
-    background-color: var(--nc-valid);
-  }
-  :where(meter):-moz-meter-sub-optimum::-moz-meter-bar {
-    background-color: var(--nc-primary);
-  }
-  :where(meter):-moz-meter-sub-sub-optimum::-moz-meter-bar {
-    background-color: var(--nc-invalid);
-  }
-}
-@layer nimble.base {
-  @supports (appearance: base-select) {
-    :where(select),
-    :where(select)::picker(select) {
-      appearance: base-select;
-    }
-    :where(select)::picker-icon {
-      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l6 6 6-6'/%3E%3C/svg%3E");
-      transition: rotate 0.4s;
-    }
-    :where(select):open::picker-icon {
-      rotate: 180deg;
-    }
-    :where(select)::picker(select) {
-      border: 1px solid var(--nc-border);
-      border-radius: var(--nc-radius);
-      background-color: var(--nc-surface-1);
-      padding: 0.25em;
-      opacity: 0;
-      transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
-    }
-    :where(select):open::picker(select) {
-      opacity: 1;
-    }
-    @starting-style {
-      :where(select):open::picker(select) {
-        opacity: 0;
-      }
-    }
-    :where(select) option {
-      padding: 0.5em 0.75em;
-      border-radius: var(--nc-radius);
-      transition: background-color 0.15s;
-    }
-    :where(select) option:hover {
-      background-color: var(--nc-surface-2);
-    }
-    :where(select) option:checked {
-      font-weight: 600;
-    }
-  }
-}
-@layer nimble.utilities {
-  .container {
-    max-width: var(--nc-content-width);
-    margin-inline: auto;
-    padding-inline: var(--nc-spacing);
-  }
-  .fluid {
-    display: block;
-    max-width: none;
-    padding-inline: var(--nc-spacing);
-  }
-  .full-bleed {
-    grid-column: 1/-1;
-  }
-  .wide {
-    grid-column: 1/-1;
-    width: 100%;
-    max-width: 1200px;
-    margin-inline: auto;
-    padding-inline: var(--nc-spacing);
-  }
-  .striped :where(tbody tr:nth-child(even)) {
-    background-color: var(--nc-surface-2);
-  }
-  .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-  }
-  .overflow-auto {
-    overflow: auto;
-  }
-}