@casoon/dragonfly/dist/index.bundled.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

@layer reset {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  :before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  :after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    height: 100px;
    text-size-adjust: 100;
  }

  html:focus-within {
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--color-background, var(--color-white));
    color: var(--color-foreground, var(--color-black));
    min-height: 100px;
    text-rendering: optimizespeed;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    line-height: 1.5;
  }

  ul, ol {
    list-style: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  img, picture, video, canvas, svg {
    max-width: 100px;
    height: auto;
    display: block;
  }

  input, button, textarea, select {
    appearance: none;
    color: inherit;
    font: inherit;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
  }

  button {
    cursor: pointer;
  }

  textarea {
    resize: vertical;
  }

  a:not([class]) {
    color: inherit;
    text-decoration-skip-ink: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    * {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }

    :before {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }

    :after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@layer tokens {
  @property --transition-fast {
    inherits: true; initial-value: .15s; syntax: "<time>";
  }

  @property --transition-normal {
    inherits: true; initial-value: .25s; syntax: "<time>";
  }

  @property --transition-slow {
    inherits: true; initial-value: .4s; syntax: "<time>";
  }

  @property --transition-duration-fast {
    inherits: true; initial-value: .15s; syntax: "<time>";
  }

  @property --transition-duration-normal {
    inherits: true; initial-value: .25s; syntax: "<time>";
  }

  @property --transition-duration-slow {
    inherits: true; initial-value: .4s; syntax: "<time>";
  }

  @property --transition-ease-out {
    inherits: true; initial-value: cubic-bezier(0, 0, .2, 1) ; syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";
  }

  @property --transition-ease-in {
    inherits: true; initial-value: cubic-bezier(.4, 0, 1, 1) ; syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";
  }

  @property --transition-ease-in-out {
    inherits: true; initial-value: cubic-bezier(.4, 0, .2, 1) ; syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";
  }

  @property --transition-timing-ease {
    inherits: true; initial-value: cubic-bezier(.4, 0, .2, 1) ; syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";
  }

  @property --transition-bg {
    inherits: true; initial-value: #fff; syntax: "<color>";
  }

  @property --transition-fg {
    inherits: true; initial-value: #1f2937; syntax: "<color>";
  }

  @property --transition-border {
    inherits: true; initial-value: #e5e7eb; syntax: "<color>";
  }

  @property --transition-surface {
    inherits: true; initial-value: #f9fafb; syntax: "<color>";
  }

  @property --transition-accent {
    inherits: true; initial-value: #3b82f6; syntax: "<color>";
  }

  @property --transition-shadow-opacity {
    inherits: true; initial-value: .1; syntax: "<number>";
  }

  @property --transition-colors {
    inherits: true; initial-value: background-color .25s var(--transition-ease-out), color .25s var(--transition-ease-out), border-color .25s var(--transition-ease-out) ; syntax: "*";
  }

  @property --transition-transform {
    inherits: true; initial-value: transform .2s var(--transition-ease-out) ; syntax: "*";
  }

  @property --transition-opacity {
    inherits: true; initial-value: opacity .2s var(--transition-ease-out) ; syntax: "*";
  }

  @property --transition-shadow {
    inherits: true; initial-value: box-shadow .2s var(--transition-ease-out) ; syntax: "*";
  }

  @property --transition-all {
    inherits: true; initial-value: all .25s var(--transition-ease-out) ; syntax: "*";
  }

  @property --transition-fast {
    inherits: true; initial-value: .15s; syntax: "<time>";
  }

  @property --transition-normal {
    inherits: true; initial-value: .25s; syntax: "<time>";
  }

  @property --transition-slow {
    inherits: true; initial-value: .4s; syntax: "<time>";
  }

  @property --transition-duration-fast {
    inherits: true; initial-value: .15s; syntax: "<time>";
  }

  @property --transition-duration-normal {
    inherits: true; initial-value: .25s; syntax: "<time>";
  }

  @property --transition-duration-slow {
    inherits: true; initial-value: .4s; syntax: "<time>";
  }

  @property --transition-ease-out {
    inherits: true; initial-value: cubic-bezier(0, 0, .2, 1) ; syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";
  }

  @property --transition-ease-in {
    inherits: true; initial-value: cubic-bezier(.4, 0, 1, 1) ; syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";
  }

  @property --transition-ease-in-out {
    inherits: true; initial-value: cubic-bezier(.4, 0, .2, 1) ; syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";
  }

  @property --transition-timing-ease {
    inherits: true; initial-value: cubic-bezier(.4, 0, .2, 1) ; syntax: "<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end";
  }

  @property --transition-bg {
    inherits: true; initial-value: #fff; syntax: "<color>";
  }

  @property --transition-fg {
    inherits: true; initial-value: #1f2937; syntax: "<color>";
  }

  @property --transition-border {
    inherits: true; initial-value: #e5e7eb; syntax: "<color>";
  }

  @property --transition-surface {
    inherits: true; initial-value: #f9fafb; syntax: "<color>";
  }

  @property --transition-accent {
    inherits: true; initial-value: #3b82f6; syntax: "<color>";
  }

  @property --transition-shadow-opacity {
    inherits: true; initial-value: .1; syntax: "<number>";
  }

  @property --transition-colors {
    inherits: true; initial-value: background-color .25s var(--transition-ease-out), color .25s var(--transition-ease-out), border-color .25s var(--transition-ease-out) ; syntax: "*";
  }

  @property --transition-transform {
    inherits: true; initial-value: transform .2s var(--transition-ease-out) ; syntax: "*";
  }

  @property --transition-opacity {
    inherits: true; initial-value: opacity .2s var(--transition-ease-out) ; syntax: "*";
  }

  @property --transition-shadow {
    inherits: true; initial-value: box-shadow .2s var(--transition-ease-out) ; syntax: "*";
  }

  @property --transition-all {
    inherits: true; initial-value: all .25s var(--transition-ease-out) ; syntax: "*";
  }

  :root {
    --header-padding: var(--space-4) var(--space-6);
    --header-padding-compact: var(--space-3) var(--space-4);
    --header-padding-spacious: var(--space-6) var(--space-8);
    --header-gap: var(--space-6);
    --header-gap-compact: var(--space-4);
    --header-gap-spacious: var(--space-8);
    --header-bg: var(--color-white, #fff);
    --header-text: var(--color-neutral-700, #374151);
    --header-link: var(--color-neutral-600);
    --header-link-hover: var(--color-primary-600, #2563eb);
    --header-link-active: var(--color-primary-700, #1d4ed8);
    --header-border: var(--color-neutral-200, #e5e7eb);
    --header-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));
    --header-font-size: var(--text-base);
    --header-font-weight: var(--font-medium, 500);
    --header-line-height: 1.5;
    --header-logo-size: var(--text-xl);
    --header-logo-weight: var(--font-bold);
    --header-height: 6%4px;
    --header-height-compact: 48px;
    --header-height-large: 80px;
    --header-max-width: var(--container-7xl);
    --header-z-index: 1000;
    --nav-link-color: var(--color-neutral-600);
    --nav-link-color-hover: var(--color-primary-600, #2563eb);
    --nav-link-color-active: var(--color-primary-700, #1d4ed8);
    --nav-link-bg-hover: var(--color-neutral-100, #f3f4f6);
    --nav-link-bg-active: var(--color-primary-100, #dbeafe);
    --menu-gap: var(--space-6);
    --menu-item-padding-x: var(--space-3);
    --menu-item-padding-y: var(--space-2);
    --menu-transition: all .2s ease;
    --mobile-menu-bg: var(--color-white, #fff);
    --mobile-menu-border-radius: var(--radius-lg, .5rem);
    --mobile-menu-shadow: var(--shadow-lg);
    --mobile-menu-z-index: 1001;
    --header-mobile-breakpoint: 768px;
    --header-hamburger-size: 24px;
    --logo-max-height: 4%0px;
    --logo-max-width: 20%0px;
  }

  :root[data-theme="dark"] {
    --header-bg: var(--color-neutral-900, #111827);
    --header-text: var(--color-neutral-100, #f3f4f6);
    --header-link: var(--color-neutral-300, #d1d5db);
    --header-link-hover: var(--color-primary-400);
    --header-link-active: var(--color-primary-300);
    --header-border: var(--color-neutral-700, #374151);
    --header-shadow: var(--shadow-md);
    --nav-link-color: var(--color-neutral-300, #d1d5db);
    --nav-link-color-hover: var(--color-primary-400);
    --nav-link-color-active: var(--color-primary-300);
    --nav-link-bg-hover: var(--color-neutral-800, #1f2937);
    --nav-link-bg-active: var(--color-primary-900);
    --mobile-menu-bg: var(--color-neutral-800, #1f2937);
  }

  :root.theme-dark {
    --header-bg: var(--color-neutral-900, #111827);
    --header-text: var(--color-neutral-100, #f3f4f6);
    --header-link: var(--color-neutral-300, #d1d5db);
    --header-link-hover: var(--color-primary-400);
    --header-link-active: var(--color-primary-300);
    --header-border: var(--color-neutral-700, #374151);
    --header-shadow: var(--shadow-md);
    --nav-link-color: var(--color-neutral-300, #d1d5db);
    --nav-link-color-hover: var(--color-primary-400);
    --nav-link-color-active: var(--color-primary-300);
    --nav-link-bg-hover: var(--color-neutral-800, #1f2937);
    --nav-link-bg-active: var(--color-primary-900);
    --mobile-menu-bg: var(--color-neutral-800, #1f2937);
  }

  :root[data-theme="primary"] {
    --header-bg: var(--color-primary-600, #2563eb);
    --header-text: var(--color-white, #fff);
    --header-link: var(--color-primary-100, #dbeafe);
    --header-link-hover: var(--color-white, #fff);
    --header-link-active: var(--color-primary-200);
    --header-border: var(--color-primary-500);
    --nav-link-color: var(--color-primary-100, #dbeafe);
    --nav-link-color-hover: var(--color-white, #fff);
    --nav-link-color-active: var(--color-primary-200);
    --nav-link-bg-hover: var(--color-primary-700, #1d4ed8);
    --nav-link-bg-active: var(--color-primary-800, #1e40af);
    --mobile-menu-bg: var(--color-primary-700, #1d4ed8);
  }

  :root.theme-primary {
    --header-bg: var(--color-primary-600, #2563eb);
    --header-text: var(--color-white, #fff);
    --header-link: var(--color-primary-100, #dbeafe);
    --header-link-hover: var(--color-white, #fff);
    --header-link-active: var(--color-primary-200);
    --header-border: var(--color-primary-500);
    --nav-link-color: var(--color-primary-100, #dbeafe);
    --nav-link-color-hover: var(--color-white, #fff);
    --nav-link-color-active: var(--color-primary-200);
    --nav-link-bg-hover: var(--color-primary-700, #1d4ed8);
    --nav-link-bg-active: var(--color-primary-800, #1e40af);
    --mobile-menu-bg: var(--color-primary-700, #1d4ed8);
  }

  :root[data-theme="transparent"] {
    --header-bg: transparent;
    --header-text: var(--color-neutral-800, #1f2937);
    --header-link: var(--color-neutral-700, #374151);
    --header-link-hover: var(--color-primary-600, #2563eb);
    --header-link-active: var(--color-primary-700, #1d4ed8);
    --header-border: transparent;
    --header-shadow: none;
    --nav-link-color: var(--color-neutral-700, #374151);
    --nav-link-color-hover: var(--color-primary-600, #2563eb);
    --nav-link-color-active: var(--color-primary-700, #1d4ed8);
    --mobile-menu-bg: var(--color-white, #fff);
  }

  :root.theme-transparent {
    --header-bg: transparent;
    --header-text: var(--color-neutral-800, #1f2937);
    --header-link: var(--color-neutral-700, #374151);
    --header-link-hover: var(--color-primary-600, #2563eb);
    --header-link-active: var(--color-primary-700, #1d4ed8);
    --header-border: transparent;
    --header-shadow: none;
    --nav-link-color: var(--color-neutral-700, #374151);
    --nav-link-color-hover: var(--color-primary-600, #2563eb);
    --nav-link-color-active: var(--color-primary-700, #1d4ed8);
    --mobile-menu-bg: var(--color-white, #fff);
  }

  :root {
    --footer-padding: var(--space-8) var(--space-4);
    --footer-padding-compact: var(--space-6) var(--space-3);
    --footer-padding-spacious: var(--space-12) var(--space-6);
    --footer-gap: var(--space-6);
    --footer-gap-compact: var(--space-4);
    --footer-gap-spacious: var(--space-8);
    --footer-section-gap: var(--space-4);
    --footer-bg: var(--color-neutral-50);
    --footer-text: var(--color-neutral-700, #374151);
    --footer-heading: var(--color-neutral-900, #111827);
    --footer-link: var(--color-primary-600, #2563eb);
    --footer-link-hover: var(--color-primary-700, #1d4ed8);
    --footer-border: var(--color-neutral-200, #e5e7eb);
    --footer-font-size: var(--text-sm, .875rem);
    --footer-line-height: 1%.6;
    --footer-heading-size: var(--text-base);
    --footer-heading-weight: var(--font-semibold, 600);
    --footer-link-weight: var(--font-medium, 500);
    --footer-max-width: var(--container-7xl);
    --footer-columns: 4;
    --footer-column-gap: var(--space-8);
    --footer-min-height: auto;
  }

  :root[data-theme="dark"] {
    --footer-bg: var(--color-neutral-900, #111827);
    --footer-text: var(--color-neutral-300, #d1d5db);
    --footer-heading: var(--color-neutral-100, #f3f4f6);
    --footer-link: var(--color-primary-400);
    --footer-link-hover: var(--color-primary-300);
    --footer-border: var(--color-neutral-700, #374151);
  }

  :root.theme-dark {
    --footer-bg: var(--color-neutral-900, #111827);
    --footer-text: var(--color-neutral-300, #d1d5db);
    --footer-heading: var(--color-neutral-100, #f3f4f6);
    --footer-link: var(--color-primary-400);
    --footer-link-hover: var(--color-primary-300);
    --footer-border: var(--color-neutral-700, #374151);
  }

  :root[data-theme="primary"] {
    --footer-bg: var(--color-primary-900);
    --footer-text: var(--color-primary-100, #dbeafe);
    --footer-heading: var(--color-white, #fff);
    --footer-link: var(--color-primary-200);
    --footer-link-hover: var(--color-white, #fff);
    --footer-border: var(--color-primary-700, #1d4ed8);
  }

  :root.theme-primary {
    --footer-bg: var(--color-primary-900);
    --footer-text: var(--color-primary-100, #dbeafe);
    --footer-heading: var(--color-white, #fff);
    --footer-link: var(--color-primary-200);
    --footer-link-hover: var(--color-white, #fff);
    --footer-border: var(--color-primary-700, #1d4ed8);
  }

  :root[data-theme="minimal"] {
    --footer-bg: transparent;
    --footer-text: var(--color-neutral-600);
    --footer-heading: var(--color-neutral-800, #1f2937);
    --footer-link: var(--color-neutral-700, #374151);
    --footer-link-hover: var(--color-neutral-900, #111827);
    --footer-border: var(--color-neutral-300, #d1d5db);
    --footer-padding: var(--space-4) 0;
  }

  :root.theme-minimal {
    --footer-bg: transparent;
    --footer-text: var(--color-neutral-600);
    --footer-heading: var(--color-neutral-800, #1f2937);
    --footer-link: var(--color-neutral-700, #374151);
    --footer-link-hover: var(--color-neutral-900, #111827);
    --footer-border: var(--color-neutral-300, #d1d5db);
    --footer-padding: var(--space-4) 0;
  }
}

@layer themes, themes-base, themes-mode, themes-custom, base;

@layer logical-properties {
  :root {
    --text-direction: ltr;
  }

  :root[dir="rtl"] {
    --text-direction: rtl;
  }

  html:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    text-align: left;
  }

  html:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    text-align: right;
  }

  .spacing {
    margin-block: var(--spacing-4);
    margin-inline: var(--spacing-2);
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-2);
  }

  h1, h2, h3, h4, h5, h6 {
    border-bottom: var(--border-width) solid var(--color-surface-300);
    margin-block: var(--spacing-6) var(--spacing-4);
    padding-bottom: var(--spacing-2);
  }

  .text-start:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    text-align: left;
  }

  .text-start:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    text-align: right;
  }

  .text-end:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    text-align: right;
  }

  .text-end:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    text-align: left;
  }

  .flex-row {
    flex-direction: row;
    display: flex;
  }

  .flex-row-reverse {
    flex-direction: row-reverse;
    display: flex;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .container {
    max-width: var(--space-large-80rem);
    padding-inline: var(--spacing-4);
    margin-left: auto;
    margin-right: auto;
  }

  .border-start:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-left: var(--border-width) solid var(--color-surface-300);
  }

  .border-start:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-right: var(--border-width) solid var(--color-surface-300);
  }

  .border-end:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-right: var(--border-width) solid var(--color-surface-300);
  }

  .border-end:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-left: var(--border-width) solid var(--color-surface-300);
  }

  .border-block {
    border-block: var(--border-width) solid var(--color-surface-300);
  }

  .border-inline {
    border-inline: var(--border-width) solid var(--color-surface-300);
  }

  .rounded {
    -webkit-border-radius: var(--spacing-1);
    border-radius: var(--spacing-1);
  }

  .rounded-start:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    -webkit-border-top-left-radius: var(--spacing-1);
    border-top-left-radius: var(--spacing-1);
    -webkit-border-bottom-left-radius: var(--spacing-1);
    border-bottom-left-radius: var(--spacing-1);
  }

  .rounded-start:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    -webkit-border-top-right-radius: var(--spacing-1);
    border-top-right-radius: var(--spacing-1);
    -webkit-border-bottom-right-radius: var(--spacing-1);
    border-bottom-right-radius: var(--spacing-1);
  }

  .rounded-end:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    -webkit-border-top-right-radius: var(--spacing-1);
    border-top-right-radius: var(--spacing-1);
    -webkit-border-bottom-right-radius: var(--spacing-1);
    border-bottom-right-radius: var(--spacing-1);
  }

  .rounded-end:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    -webkit-border-top-left-radius: var(--spacing-1);
    border-top-left-radius: var(--spacing-1);
    -webkit-border-bottom-left-radius: var(--spacing-1);
    border-bottom-left-radius: var(--spacing-1);
  }

  .rounded-top:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    -webkit-border-top-left-radius: var(--spacing-1);
    border-top-left-radius: var(--spacing-1);
    -webkit-border-top-right-radius: var(--spacing-1);
    border-top-right-radius: var(--spacing-1);
  }

  .rounded-top:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    -webkit-border-top-right-radius: var(--spacing-1);
    border-top-right-radius: var(--spacing-1);
    -webkit-border-top-left-radius: var(--spacing-1);
    border-top-left-radius: var(--spacing-1);
  }

  .rounded-bottom:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    -webkit-border-bottom-right-radius: var(--spacing-1);
    border-bottom-right-radius: var(--spacing-1);
    -webkit-border-bottom-left-radius: var(--spacing-1);
    border-bottom-left-radius: var(--spacing-1);
  }

  .rounded-bottom:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    -webkit-border-bottom-left-radius: var(--spacing-1);
    border-bottom-left-radius: var(--spacing-1);
    -webkit-border-bottom-right-radius: var(--spacing-1);
    border-bottom-right-radius: var(--spacing-1);
  }

  .position-start:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .position-start:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .position-end:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .position-end:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .position-top {
    top: 0;
  }

  .position-bottom {
    bottom: 0;
  }

  .float-start {
    float: inline-start;
  }

  .float-end {
    float: inline-end;
  }

  .clear-start {
    clear: inline-start;
  }

  .clear-end {
    clear: inline-end;
  }

  .inline-size-full {
    width: 100%;
  }

  .block-size-full {
    height: 100%;
  }

  .inline-size-half {
    width: 50%;
  }

  .block-size-half {
    height: 50%;
  }

  .grid-cols-2 {
    gap: var(--spacing-4);
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }

  .grid-cols-3 {
    gap: var(--spacing-4);
    grid-template-columns: repeat(3, 1fr);
    display: grid;
  }

  .grid-cols-4 {
    gap: var(--spacing-4);
    grid-template-columns: repeat(4, 1fr);
    display: grid;
  }

  .m-block-1 {
    margin-block: var(--spacing-1);
  }

  .m-block-2 {
    margin-block: var(--spacing-2);
  }

  .m-block-3 {
    margin-block: var(--spacing-3);
  }

  .m-block-4 {
    margin-block: var(--spacing-4);
  }

  .m-inline-1 {
    margin-inline: var(--spacing-1);
  }

  .m-inline-2 {
    margin-inline: var(--spacing-2);
  }

  .m-inline-3 {
    margin-inline: var(--spacing-3);
  }

  .m-inline-4 {
    margin-inline: var(--spacing-4);
  }

  .p-block-1 {
    padding-block: var(--spacing-1);
  }

  .p-block-2 {
    padding-block: var(--spacing-2);
  }

  .p-block-3 {
    padding-block: var(--spacing-3);
  }

  .p-block-4 {
    padding-block: var(--spacing-4);
  }

  .p-inline-1 {
    padding-inline: var(--spacing-1);
  }

  .p-inline-2 {
    padding-inline: var(--spacing-2);
  }

  .p-inline-3 {
    padding-inline: var(--spacing-3);
  }

  .p-inline-4 {
    padding-inline: var(--spacing-4);
  }

  .m-block-start-1 {
    margin-top: var(--spacing-1);
  }

  .m-block-start-2 {
    margin-top: var(--spacing-2);
  }

  .m-block-start-3 {
    margin-top: var(--spacing-3);
  }

  .m-block-start-4 {
    margin-top: var(--spacing-4);
  }

  .m-block-end-1 {
    margin-bottom: var(--spacing-1);
  }

  .m-block-end-2 {
    margin-bottom: var(--spacing-2);
  }

  .m-block-end-3 {
    margin-bottom: var(--spacing-3);
  }

  .m-block-end-4 {
    margin-bottom: var(--spacing-4);
  }

  .m-inline-start-1:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-left: var(--spacing-1);
  }

  .m-inline-start-1:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: var(--spacing-1);
  }

  .m-inline-start-2:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-left: var(--spacing-2);
  }

  .m-inline-start-2:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: var(--spacing-2);
  }

  .m-inline-start-3:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-left: var(--spacing-3);
  }

  .m-inline-start-3:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: var(--spacing-3);
  }

  .m-inline-start-4:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-left: var(--spacing-4);
  }

  .m-inline-start-4:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: var(--spacing-4);
  }

  .m-inline-end-1:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-right: var(--spacing-1);
  }

  .m-inline-end-1:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-left: var(--spacing-1);
  }

  .m-inline-end-2:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-right: var(--spacing-2);
  }

  .m-inline-end-2:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-left: var(--spacing-2);
  }

  .m-inline-end-3:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-right: var(--spacing-3);
  }

  .m-inline-end-3:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-left: var(--spacing-3);
  }

  .m-inline-end-4:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-right: var(--spacing-4);
  }

  .m-inline-end-4:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-left: var(--spacing-4);
  }

  .p-block-start-1 {
    padding-top: var(--spacing-1);
  }

  .p-block-start-2 {
    padding-top: var(--spacing-2);
  }

  .p-block-start-3 {
    padding-top: var(--spacing-3);
  }

  .p-block-start-4 {
    padding-top: var(--spacing-4);
  }

  .p-block-end-1 {
    padding-bottom: var(--spacing-1);
  }

  .p-block-end-2 {
    padding-bottom: var(--spacing-2);
  }

  .p-block-end-3 {
    padding-bottom: var(--spacing-3);
  }

  .p-block-end-4 {
    padding-bottom: var(--spacing-4);
  }

  .p-inline-start-1:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-left: var(--spacing-1);
  }

  .p-inline-start-1:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: var(--spacing-1);
  }

  .p-inline-start-2:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-left: var(--spacing-2);
  }

  .p-inline-start-2:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: var(--spacing-2);
  }

  .p-inline-start-3:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-left: var(--spacing-3);
  }

  .p-inline-start-3:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: var(--spacing-3);
  }

  .p-inline-start-4:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-left: var(--spacing-4);
  }

  .p-inline-start-4:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: var(--spacing-4);
  }

  .p-inline-end-1:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-right: var(--spacing-1);
  }

  .p-inline-end-1:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: var(--spacing-1);
  }

  .p-inline-end-2:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-right: var(--spacing-2);
  }

  .p-inline-end-2:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: var(--spacing-2);
  }

  .p-inline-end-3:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-right: var(--spacing-3);
  }

  .p-inline-end-3:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: var(--spacing-3);
  }

  .p-inline-end-4:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-right: var(--spacing-4);
  }

  .p-inline-end-4:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: var(--spacing-4);
  }

  .overflow-inline {
    overflow-inline: auto;
  }

  .overflow-block {
    overflow-block: auto;
  }

  [lang="ar"] {
    direction: rtl;
  }

  [lang="he"] {
    direction: rtl;
  }

  [lang="fa"] {
    direction: rtl;
  }

  [lang="ur"] {
    direction: rtl;
  }

  .navbar {
    border-bottom: var(--border-width) solid var(--color-surface-300);
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-4);
    display: flex;
  }

  .navbar-brand:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-right: var(--spacing-4);
  }

  .navbar-brand:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-left: var(--spacing-4);
  }

  .navbar-nav {
    gap: var(--spacing-4);
    display: flex;
  }

  .navbar-nav:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-left: auto;
  }

  .navbar-nav:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: auto;
  }

  .dropdown-menu {
    border: var(--border-width) solid var(--color-surface-300);
    -webkit-border-radius: var(--spacing-1);
    border-radius: var(--spacing-1);
    min-width: var(--spacing-40);
    padding-block: var(--spacing-2);
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    top: 100%;
  }

  .dropdown-menu:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .dropdown-menu:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .dropdown-item {
    padding-block: var(--spacing-1);
    padding-inline: var(--spacing-3);
  }

  .dropdown-item:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    text-align: left;
  }

  .dropdown-item:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    text-align: right;
  }

  .card {
    border: var(--border-width) solid var(--color-surface-300);
    -webkit-border-radius: var(--spacing-2);
    border-radius: var(--spacing-2);
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-4);
  }

  .card-header {
    border-bottom: var(--border-width) solid var(--color-surface-200);
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
  }

  .card-footer {
    border-top: var(--border-width) solid var(--color-surface-200);
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-2);
  }

  .list:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-left: var(--spacing-4);
  }

  .list:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: var(--spacing-4);
  }

  .list-item {
    margin-bottom: var(--spacing-2);
  }

  .form-group {
    margin-bottom: var(--spacing-3);
  }

  .form-label {
    margin-bottom: var(--spacing-1);
    display: block;
  }

  .form-control {
    border: var(--border-width) solid var(--color-surface-300);
    -webkit-border-radius: var(--spacing-1);
    border-radius: var(--spacing-1);
    width: 100%;
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
  }

  .btn {
    border: var(--border-width) solid transparent;
    -webkit-border-radius: var(--spacing-1);
    border-radius: var(--spacing-1);
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-4);
  }

  .btn-icon:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-right: var(--spacing-2);
  }

  .btn-icon:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-left: var(--spacing-2);
  }

  .table {
    border-collapse: collapse;
    width: 100%;
  }

  .table th, .table td {
    border-bottom: var(--border-width) solid var(--color-surface-300);
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
  }

  .table th:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    text-align: left;
  }

  .table td:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    text-align: left;
  }

  .table th:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    text-align: right;
  }

  .table td:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    text-align: right;
  }

  .tabs {
    border-bottom: var(--border-width) solid var(--color-surface-300);
    display: flex;
  }

  .tab {
    border-bottom: var(--border-width-thick) solid transparent;
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-4);
  }

  .tab.active {
    border-bottom-color: var(--color-primary-500);
  }

  .alert {
    -webkit-border-radius: var(--spacing-1);
    border-radius: var(--spacing-1);
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-4);
  }

  .alert:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-left: var(--spacing-1) solid var(--color-primary-500);
  }

  .alert:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-right: var(--spacing-1) solid var(--color-primary-500);
  }

  .alert-danger:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-left-color: var(--color-error-500);
  }

  .alert-danger:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-right-color: var(--color-error-500);
  }

  .alert-success:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-left-color: var(--color-success-500);
  }

  .alert-success:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-right-color: var(--color-success-500);
  }

  .text-flow > * + * {
    margin-top: var(--spacing-3);
  }

  .steps {
    margin-block: var(--spacing-4);
    display: flex;
  }

  .step {
    border-bottom: var(--border-width-thick) solid var(--color-surface-300);
    padding-block: var(--spacing-2);
    text-align: center;
    flex: 1;
  }

  .step.active {
    border-bottom-color: var(--color-primary-500);
  }

  .modal {
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .modal-dialog {
    background: var(--color-white);
    -webkit-border-radius: var(--spacing-2);
    border-radius: var(--spacing-2);
    max-height: 90%;
    max-width: 90%;
    min-width: var(--space-large-30rem);
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-4);
  }

  .modal-header {
    border-bottom: var(--border-width) solid var(--color-surface-300);
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
  }

  .modal-footer {
    border-top: var(--border-width) solid var(--color-surface-300);
    gap: var(--spacing-2);
    justify-content: flex-end;
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-2);
    display: flex;
  }

  @media (max-width: 768px) {
    .navbar {
      flex-direction: column;
      align-items: flex-start;
    }

    .navbar-nav {
      flex-direction: column;
      margin-top: var(--spacing-3);
    }

    .navbar-nav:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
      margin-left: 0;
    }

    .navbar-nav:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
      margin-right: 0;
    }

    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
      grid-template-columns: 1fr;
    }
  }

  [dir="rtl"] .btn-icon {
    transform: scaleX(-1);
  }

  [dir="rtl"] .dropdown-menu {
    text-align: right;
  }

  [lang="ja"] {
    font-feature-settings: "palt";
    line-break: strict;
    word-break: normal;
  }

  [lang="zh"] {
    font-feature-settings: "palt";
    line-break: strict;
    word-break: normal;
  }

  [lang="ko"] {
    font-feature-settings: "palt";
    line-break: strict;
    word-break: normal;
  }

  [lang="th"] {
    line-height: 1.8;
  }

  [lang="my"] {
    line-height: 1.8;
  }

  .layout {
    grid-template: "header header header"
                   "sidebar main aside" 1fr
                   "footer footer footer"
                   / 200px 1fr 200px;
    min-height: 100%;
    display: grid;
  }

  .layout-header {
    border-bottom: var(--border-width) solid var(--color-surface-300);
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-4);
    grid-area: header;
  }

  .layout-sidebar {
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-3);
    grid-area: sidebar;
  }

  .layout-sidebar:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-right: var(--border-width) solid var(--color-surface-300);
  }

  .layout-sidebar:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-left: var(--border-width) solid var(--color-surface-300);
  }

  .layout-main {
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-4);
    grid-area: main;
  }

  .layout-aside {
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-3);
    grid-area: aside;
  }

  .layout-a