@charset "UTF-8";
/**
 * Root
 * ========================================================================== */
@layer reset, base, layout, component, componentVariant, jui, utilities;
/**
 * Reset
 * ========================================================================== */
@layer reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* Prevent font size inflation */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  /* Remove default margin in favour of better control in authored CSS */
  body, h1, h2, h3, h4, h5, h6, p,
  figure, blockquote, dl, dd {
    margin-block-end: 0;
  }
  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role=list],
  ol[role=list] {
    list-style: none;
  }
  /* Set core body defaults */
  body {
    min-height: 100vh;
    line-height: 1.5;
    margin-inline: 0;
  }
  /* Set shorter line heights on headings and interactive elements */
  h1, h2, h3, h4,
  button, input, label {
    line-height: 1.1;
  }
  /* Balance text wrapping on headings */
  h1, h2,
  h3, h4 {
    text-wrap: balance;
  }
  /* A elements that don't have a class get default styles */
  :where(a:not([class])) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }
  /* Make images easier to work with */
  img,
  picture,
  svg {
    max-width: 100%;
    display: block;
  }
  /* Inherit fonts for inputs and buttons */
  input, button,
  textarea, select,
  input[type=file]::-webkit-file-upload-button {
    font-family: inherit;
    font-size: inherit;
  }
  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }
  /* Anything that has been anchored to should have extra scroll margin */
  :target {
    scroll-margin-block: 5ex;
  }
  [hidden] {
    display: none;
  }
}
/**
 * Base | Colors | Theme | Font | Spacing
 * ----------------------------------------------------------------------------
 */
/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */
:root {
  --background-color: var(--color-neutral-50);
  --background-overlay: var(--color-neutral-100);
  --body-background: var(--background-color);
  --body-font-family: var(--font-family-base);
  --body-fs: var(--font-size-400);
  --body-fw: var(--font-weight-regular);
  --body-text: var(--text-fg);
  --bodyText-font-family: var(--font-family-base);
  --bodyText-font-size: 1.5rem;
  --bodyText-font-style: normal;
  --bodyText-font-weight: var(--font-weight-regular);
  --bodyText-letter-spacing: 0px;
  --bodyText-line-height: 1.5;
  --bodyText-text-transform: none;
  --bodyText: var(--body-text-font-style) var(--body-text-font-weight) var(--body-text-font-size)/var(--body-text-line-height) var(--body-text-font-family);
  --border-color: var(--color-neutral-300);
  --border-radius: 0rem;
  --border-width: 1px;
  --color-accent-100: var(--color-cyan-100);
  --color-accent-200: var(--color-cyan-200);
  --color-accent-300: var(--color-cyan-300);
  --color-accent-400: var(--color-cyan-400);
  --color-accent-500: var(--color-cyan-500);
  --color-accent-600: var(--color-cyan-600);
  --color-accent-700: var(--color-yellow-700);
  --color-accent-800: var(--color-yellow-800);
  --color-black: #000;
  --color-blue-50: #d9e2fc;
  --color-blue-100: #cbd7fb;
  --color-blue-200: #739ddd;
  --color-blue-300: #083273;
  --color-blue-400: #062656;
  --color-blue-500: #061647;
  --color-blue-600: #04133e;
  --color-blue-700: #031035;
  --color-blue-800: #020b27;
  --color-blue-900: #01081e;
  --color-blue-950: #000719;
  --color-cyan-100: #e6fcff;
  --color-cyan-200: #b6f4ff;
  --color-cyan-300: #74eaff;
  --color-cyan-400: #0dd3f5;
  --color-cyan-500: #0cc0df;
  --color-cyan-600: #0bafcb;
  --color-cyan-700: #088095;
  --color-cyan-800: #077183;
  --color-danger: var(--color-red-800);
  --color-green-50: #f4fcf0;
  --color-green-100: #e6f8dd;
  --color-green-200: #befb98;
  --color-green-400: #99f660;
  --color-green-500: #86db51;
  --color-green-600: #68ac3e;
  --color-green-700: #49782b;
  --color-grey-50: #f9fafb;
  --color-grey-100: #f0f2f4;
  --color-grey-200: #e7ebee;
  --color-grey-300: #dfe3e7;
  --color-grey-400: #d6dbe0;
  --color-grey-500: #c6ccd2;
  --color-grey-600: #9299a0;
  --color-grey-700: #474f57;
  --color-grey-800: #32383e;
  --color-grey-900: #1b1f22;
  --color-grey-950: #14171a;
  --color-info: var(--color-cyan-800);
  --color-neutral-000: var(--color-white);
  --color-neutral-50: var(--color-grey-50);
  --color-neutral-100: var(--color-grey-100);
  --color-neutral-200: var(--color-grey-200);
  --color-neutral-300: var(--color-grey-300);
  --color-neutral-400: var(--color-grey-400);
  --color-neutral-500: var(--color-grey-500);
  --color-neutral-600: var(--color-grey-600);
  --color-neutral-700: var(--color-grey-700);
  --color-neutral-800: var(--color-grey-800);
  --color-neutral-900: var(--color-grey-900);
  --color-neutral-950: var(--color-grey-950);
  --color-neutral-1000: var(--color-black);
  --color-orange-100: #fff4e6;
  --color-orange-200: #ffd8a8;
  --color-orange-300: #ffc078;
  --color-orange-400: #ffa94d;
  --color-orange-500: #ff922b;
  --color-orange-600: #ff7a05;
  --color-orange-700: #de6500;
  --color-orange-800: #b85000;
  --color-orange-900: #923d00;
  --color-primary-100: var(--color-blue-100);
  --color-primary-200: var(--color-blue-200);
  --color-primary-300: var(--color-blue-300);
  --color-primary-400: var(--color-blue-400);
  --color-primary-500: var(--color-blue-500);
  --color-primary-600: var(--color-blue-600);
  --color-primary-700: var(--color-blue-700);
  --color-primary-800: var(--color-blue-800);
  --color-primary-900: var(--color-blue-900);
  --color-red-50: #ffecec;
  --color-red-100: #ffdbdb;
  --color-red-200: #ffbdbd;
  --color-red-300: #f99;
  --color-red-400: #ff7a7a;
  --color-red-500: #ff5252;
  --color-red-600: #e60000;
  --color-red-700: #ad0000;
  --color-red-800: #7a0000;
  --color-secondary-100: var(--color-blue-100);
  --color-secondary-200: var(--color-blue-200);
  --color-secondary-300: var(--color-blue-300);
  --color-secondary-400: var(--color-blue-400);
  --color-secondary-500: var(--color-blue-500);
  --color-secondary-600: var(--color-blue-600);
  --color-secondary-700: var(--color-blue-700);
  --color-secondary-800: var(--color-blue-800);
  --color-secondary-900: var(--color-blue-900);
  --color-success: var(--color-green-700);
  --color-surface-cyan-bg: var(--color-cyan-500);
  --color-surface-cyan-fg: var(--color-grey-900);
  --color-surface-green-bg: var(--color-green-500);
  --color-surface-green-fg: var(--color-grey-900);
  --color-surface-highlight-bg: var(--color-primary-700);
  --color-surface-highlight-fg: var(--color-grey-900);
  --color-surface-neutral-bg: var(--color-grey-200);
  --color-surface-neutral-fg: var(--color-grey-900);
  --color-surface-orange-bg: var(--color-orange-500);
  --color-surface-orange-fg: var(--color-grey-900);
  --color-surface-primary-bg: var(--color-primary-800);
  --color-surface-primary-fg: var(--color-neutral-50);
  --color-surface-red-bg: var(--color-red-500);
  --color-surface-red-fg: var(--color-grey-900);
  --color-surface-secondary-bg: var(--color-secondary-500);
  --color-surface-secondary-fg: var(--color-grey-900);
  --color-surface-yellow-bg: var(--color-yellow-500);
  --color-surface-yellow-fg: var(--color-grey-900);
  --color-warning: var(--color-orange-800);
  --color-white: #fff;
  --color-yellow-50: #fffcf0;
  --color-yellow-100: #fff9e0;
  --color-yellow-200: #fff2bd;
  --color-yellow-300: #ffe785;
  --color-yellow-400: #ffde5c;
  --color-yellow-500: #ffd633;
  --color-yellow-600: #ffd11a;
  --color-yellow-700: #fc0;
  --color-yellow-800: #dbaf00;
  --color-yellow-900: #bd9700;
  --container-max-width-default: 64rem;
  --container-max-width-narrow: 40rem;
  --container-max-width-wide: 75rem;
  --container-min-margin-inline: var(--spacing-025);
  --content-max-width: 140ch;
  --content-padding-inline-breakpoint-lg: var(--spacing-500);
  --content-padding-inline-breakpoint-md: var(--spacing-500);
  --content-padding-inline-breakpoint-sm: var(--spacing-300);
  --content-padding-inline-default: var(--spacing-075);
  --cubic-bezier-easeBounce: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%,
    0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879,
    0.885, 0.895, 0.908 89.7%, 0.946, 1
  );
  --cubic-bezier-easeElastic: cubic-bezier(0.1, 0, 0.9, 1);
  --cubic-bezier-easeIn: cubic-bezier(0.7, 0, 1, 1);
  --cubic-bezier-easeInCubic: cubic-bezier(0.32, 0, 0.67, 0);
  --cubic-bezier-easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
  --cubic-bezier-easeOut: cubic-bezier(0, 0, 0.3, 1);
  --cubic-bezier-easeOutCubic: cubic-bezier(0.33, 1, 0.68, 1);
  --cubic-bezier-linear: cubic-bezier(0, 0, 1, 1);
  --cubic-bezier-squish: cubic-bezier(0.5, -0.3, 0.1, 1.5);
  --duration-moderate: 300ms;
  --duration-quick: 200ms;
  --duration-slow: 2000ms;
  --duration-slower: 400ms;
  --focus-outline-color: var(--text-interactive-hover-bg);
  --focus-outline-offset: max(3px, 0.08em);
  --focus-outline-style: solid;
  --focus-outline-width: max(2.5px, 0.08em);
  --font-family-base: var(--font-family-sans);
  /* Code blocks */
  --font-family-code: "Fira Code", "Lucida Console", "Monaco", monospace;
  /* Expressive sections, like quotes */
  --font-family-expressive: "Rubik", "Verdana", "Helvetica Neue", sans-serif;
  --font-family-heading: var(--font-family-expressive);
  --font-family-mono: var(--font-family-code);
  /* The base font for the site */
  --font-family-sans: "Comfortaa", "Roboto", "Verdana", "Helvetica Neue", "Arial", sans-serif;
  --font-size-200: 0.875rem;
  --font-size-300: 0.925rem;
  --font-size-400: 1rem;
  --font-size-500: 1.25rem;
  --font-size-600: 1.3rem;
  --font-size-700: 1.55rem;
  --font-size-800: 1.8rem;
  --font-size-900: 2.125rem;
  --font-weight-bold: 700;
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --form-gap: 0.5em;
  --form-input-border-color: var(--color-neutral-600);
  --form-input-border-radius: var(--border-radius);
  --form-input-border-style: solid;
  --form-input-border-width: 2px;
  --form-input-color-bg: var(--color-neutral-100);
  --form-input-color-disabled: var(--color-neutral-400);
  --form-input-color-fg: var(--text-fg);
  --form-input-color-placeholder: var(--color-neutral-600);
  --form-input-padding-block: var(--spacing-075);
  --form-input-padding-inline: var(--spacing-125);
  --form-label-margin-bottom: var(--spacing-100);
  --form-label-text: var(--text-fg);
  --form-margin-block: var(--spacing-075);
  --form-margin-inline: var(--spacing-050);
  --form-padding-block: var(--spacing-050);
  --form-padding-inline: var(--spacing-025);
  --grid-gap: var(--spacing-150);
  --hero-padding-block: var(--spacing-1000);
  --link-icon-underline-offset: 0.4em;
  --link-underline-offset: 0.2em;
  --opacity-010: 0.1;
  --opacity-015: 0.15;
  --opacity-020: 0.2;
  --opacity-030: 0.3;
  --opacity-040: 0.4;
  --opacity-050: 0.5;
  --opacity-060: 0.6;
  --opacity-070: 0.7;
  --opacity-080: 0.8;
  --opacity-085: 0.85;
  --opacity-090: 0.9;
  --opacity-095: 0.95;
  --opacity-opaque: 1;
  --opacity-transparent: 0;
  --section-padding-block: var(--spacing-500);
  --shadow-1: 0px 0px 0.5rem 0px #00000059;
  --shadow-2: 0px 1px 3px 0px #0000001f, 0px 1px 2px 0px #0000003d;
  --shadow-3: 0px 3px 6px 0px #00000029, 0px 3px 6px 0px #0000003b;
  --shadow-4: 0px 10px 20px 0px #00000030, 0px 6px 6px 0px #0000003b;
  --shadow-5: 0px 10px 20px 0px #00000030, 0px 6px 6px 0px #0000003b;
  --shadow-6: 0px 19px 38px 0px #0000004d, 0px 15px 12px 0px #00000038;
  --spacing-000: 0rem;
  --spacing-025: 0.25rem;
  --spacing-050: 0.5rem;
  --spacing-075: 0.75rem;
  --spacing-100: 1rem;
  --spacing-125: 1.25rem;
  --spacing-150: 1.5rem;
  --spacing-175: 1.75rem;
  --spacing-200: 2rem;
  --spacing-250: 2.5rem;
  --spacing-300: 3rem;
  --spacing-400: 4rem;
  --spacing-500: 5rem;
  --spacing-600: 6rem;
  --spacing-800: 8rem;
  --spacing-1000: 10rem;
  --text-fg: var(--color-neutral-950);
  --text-interactive: var(--color-accent-800);
  --text-interactive-hover: var(--color-neutral-800);
  --text-interactive-hover-bg: var(--color-accent-200);
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: var(--color-neutral-50);
    --background-overlay: var(--color-neutral-100);
    --border-color: var(--color-neutral-300);
    --color-accent-100: var(--color-cyan-100);
    --color-accent-200: var(--color-cyan-200);
    --text-interactive-hover-bg: var(--color-accent-200);
    --color-accent-300: var(--color-cyan-300);
    --color-accent-400: var(--color-cyan-400);
    --color-accent-500: var(--color-cyan-500);
    --color-accent-600: var(--color-cyan-600);
    --color-accent-700: var(--color-cyan-700);
    --color-accent-800: var(--color-cyan-800);
    --text-interactive: var(--color-accent-800);
    --color-danger: var(--color-red-800);
    --color-info: var(--color-cyan-800);
    --color-primary-100: var(--color-blue-100);
    --color-primary-200: var(--color-blue-200);
    --color-primary-300: var(--color-blue-300);
    --color-primary-400: var(--color-blue-400);
    --color-primary-500: var(--color-blue-500);
    --color-primary-600: var(--color-blue-600);
    --color-primary-700: var(--color-blue-700);
    --color-surface-highlight-bg: var(--color-blue-700);
    --color-primary-800: var(--color-blue-800);
    --color-surface-primary-bg: var(--color-primary-800);
    --color-primary-900: var(--color-blue-900);
    --color-secondary-100: var(--color-yellow-100);
    --color-secondary-200: var(--color-yellow-200);
    --color-secondary-300: var(--color-yellow-300);
    --color-secondary-400: var(--color-yellow-400);
    --color-secondary-500: var(--color-yellow-500);
    --color-surface-secondary-bg: var(--color-secondary-500);
    --color-secondary-600: var(--color-yellow-600);
    --color-secondary-700: var(--color-yellow-700);
    --color-secondary-800: var(--color-yellow-800);
    --color-secondary-900: var(--color-yellow-900);
    --color-success: var(--color-green-700);
    --color-surface-cyan-bg: var(--color-cyan-500);
    --color-surface-cyan-fg: var(--color-grey-900);
    --color-surface-green-bg: var(--color-green-500);
    --color-surface-green-fg: var(--color-grey-900);
    --color-surface-highlight-fg: var(--color-neutral-50);
    --color-surface-neutral-bg: var(--color-grey-200);
    --color-surface-neutral-fg: var(--color-grey-900);
    --color-surface-orange-bg: var(--color-orange-500);
    --color-surface-orange-fg: var(--color-grey-900);
    --color-surface-primary-fg: var(--color-neutral-50);
    --color-surface-red-bg: var(--color-red-500);
    --color-surface-red-fg: var(--color-grey-900);
    --color-surface-secondary-fg: var(--color-grey-900);
    --color-surface-yellow-bg: var(--color-yellow-500);
    --color-surface-yellow-fg: var(--color-grey-900);
    --color-warning: var(--color-orange-800);
    --form-input-border-color: var(--color-neutral-600);
    --form-input-color-bg: var(--color-neutral-100);
    --form-input-color-disabled: var(--color-neutral-400);
    --form-input-color-placeholder: var(--color-neutral-600);
    --text-fg: var(--color-neutral-950);
    --text-interactive-hover: var(--color-neutral-800);
  }
}
[data-mode=light] {
  --background-color: var(--color-neutral-50);
  --background-overlay: var(--color-neutral-100);
  --border-color: var(--color-neutral-300);
  --color-accent-100: var(--color-cyan-100);
  --color-accent-200: var(--color-cyan-200);
  --text-interactive-hover-bg: var(--color-accent-200);
  --color-accent-300: var(--color-cyan-300);
  --color-accent-400: var(--color-cyan-400);
  --color-accent-500: var(--color-cyan-500);
  --color-accent-600: var(--color-cyan-600);
  --color-accent-700: var(--color-cyan-700);
  --color-accent-800: var(--color-cyan-800);
  --text-interactive: var(--color-accent-800);
  --color-danger: var(--color-red-800);
  --color-info: var(--color-cyan-800);
  --color-primary-100: var(--color-blue-100);
  --color-primary-200: var(--color-blue-200);
  --color-primary-300: var(--color-blue-300);
  --color-primary-400: var(--color-blue-400);
  --color-primary-500: var(--color-blue-500);
  --color-primary-600: var(--color-blue-600);
  --color-primary-700: var(--color-blue-700);
  --color-surface-highlight-bg: var(--color-blue-700);
  --color-primary-800: var(--color-blue-800);
  --color-surface-primary-bg: var(--color-primary-800);
  --color-primary-900: var(--color-blue-900);
  --color-secondary-100: var(--color-yellow-100);
  --color-secondary-200: var(--color-yellow-200);
  --color-secondary-300: var(--color-yellow-300);
  --color-secondary-400: var(--color-yellow-400);
  --color-secondary-500: var(--color-yellow-500);
  --color-surface-secondary-bg: var(--color-secondary-500);
  --color-secondary-600: var(--color-yellow-600);
  --color-secondary-700: var(--color-yellow-700);
  --color-secondary-800: var(--color-yellow-800);
  --color-secondary-900: var(--color-yellow-900);
  --color-success: var(--color-green-700);
  --color-surface-cyan-bg: var(--color-cyan-500);
  --color-surface-cyan-fg: var(--color-grey-900);
  --color-surface-green-bg: var(--color-green-500);
  --color-surface-green-fg: var(--color-grey-900);
  --color-surface-highlight-fg: var(--color-neutral-50);
  --color-surface-neutral-bg: var(--color-grey-200);
  --color-surface-neutral-fg: var(--color-grey-900);
  --color-surface-orange-bg: var(--color-orange-500);
  --color-surface-orange-fg: var(--color-grey-900);
  --color-surface-primary-fg: var(--color-neutral-50);
  --color-surface-red-bg: var(--color-red-500);
  --color-surface-red-fg: var(--color-grey-900);
  --color-surface-secondary-fg: var(--color-grey-900);
  --color-surface-yellow-bg: var(--color-yellow-500);
  --color-surface-yellow-fg: var(--color-grey-900);
  --color-warning: var(--color-orange-800);
  --form-input-border-color: var(--color-neutral-600);
  --form-input-color-bg: var(--color-neutral-100);
  --form-input-color-disabled: var(--color-neutral-400);
  --form-input-color-placeholder: var(--color-neutral-600);
  --text-fg: var(--color-neutral-950);
  --text-interactive-hover: var(--color-neutral-800);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: var(--color-neutral-950);
    --background-overlay: var(--color-neutral-900);
    --border-color: var(--color-neutral-700);
    --color-accent-100: var(--color-yellow-100);
    --color-accent-200: var(--color-yellow-200);
    --text-interactive: var(--color-accent-200);
    --color-accent-300: var(--color-yellow-300);
    --color-accent-400: var(--color-yellow-400);
    --color-accent-500: var(--color-yellow-500);
    --color-accent-600: var(--color-yellow-600);
    --text-interactive-hover-bg: var(--color-accent-600);
    --color-accent-700: var(--color-yellow-700);
    --color-accent-800: var(--color-yellow-800);
    --color-danger: var(--color-red-700);
    --color-info: var(--color-cyan-700);
    --color-primary-100: var(--color-yellow-100);
    --color-primary-200: var(--color-yellow-200);
    --color-primary-300: var(--color-yellow-300);
    --color-primary-400: var(--color-yellow-400);
    --color-primary-500: var(--color-yellow-500);
    --color-surface-primary-bg: var(--color-primary-500);
    --color-primary-600: var(--color-yellow-600);
    --color-primary-700: var(--color-yellow-700);
    --color-primary-800: var(--color-yellow-800);
    --color-primary-900: var(--color-yellow-900);
    --color-secondary-100: var(--color-blue-100);
    --color-secondary-200: var(--color-blue-200);
    --color-surface-secondary-bg: var(--color-secondary-200);
    --color-secondary-300: var(--color-blue-300);
    --color-secondary-400: var(--color-blue-400);
    --color-secondary-500: var(--color-blue-500);
    --color-secondary-600: var(--color-blue-600);
    --color-secondary-700: var(--color-blue-700);
    --color-secondary-800: var(--color-blue-800);
    --color-secondary-900: var(--color-blue-900);
    --color-success: var(--color-green-600);
    --color-surface-cyan-bg: var(--color-cyan-500);
    --color-surface-cyan-fg: var(--color-grey-900);
    --color-surface-green-bg: var(--color-green-500);
    --color-surface-green-fg: var(--color-grey-900);
    --color-surface-highlight-bg: var(--color-grey-900);
    --color-surface-highlight-fg: var(--color-grey-50);
    --color-surface-neutral-bg: var(--color-grey-900);
    --color-surface-neutral-fg: var(--color-grey-50);
    --color-surface-orange-bg: var(--color-orange-600);
    --color-surface-orange-fg: var(--color-grey-900);
    --color-surface-primary-fg: var(--color-neutral-900);
    --color-surface-red-bg: var(--color-red-500);
    --color-surface-red-fg: var(--color-grey-900);
    --color-surface-secondary-fg: var(--color-grey-900);
    --color-surface-yellow-bg: var(--color-yellow-500);
    --color-surface-yellow-fg: var(--color-grey-900);
    --color-warning: var(--color-orange-700);
    --form-input-border-color: var(--color-neutral-600);
    --form-input-color-bg: var(--color-neutral-900);
    --form-input-color-disabled: var(--color-neutral-500);
    --form-input-color-placeholder: var(--color-neutral-700);
    --text-fg: var(--color-neutral-50);
    --text-interactive-hover: var(--color-neutral-950);
  }
}
[data-mode=dark] {
  --background-color: var(--color-neutral-950);
  --background-overlay: var(--color-neutral-900);
  --border-color: var(--color-neutral-700);
  --color-accent-100: var(--color-yellow-100);
  --color-accent-200: var(--color-yellow-200);
  --text-interactive: var(--color-accent-200);
  --color-accent-300: var(--color-yellow-300);
  --color-accent-400: var(--color-yellow-400);
  --color-accent-500: var(--color-yellow-500);
  --color-accent-600: var(--color-yellow-600);
  --text-interactive-hover-bg: var(--color-accent-600);
  --color-accent-700: var(--color-yellow-700);
  --color-accent-800: var(--color-yellow-800);
  --color-danger: var(--color-red-700);
  --color-info: var(--color-cyan-700);
  --color-primary-100: var(--color-yellow-100);
  --color-primary-200: var(--color-yellow-200);
  --color-primary-300: var(--color-yellow-300);
  --color-primary-400: var(--color-yellow-400);
  --color-primary-500: var(--color-yellow-500);
  --color-surface-primary-bg: var(--color-primary-500);
  --color-primary-600: var(--color-yellow-600);
  --color-primary-700: var(--color-yellow-700);
  --color-primary-800: var(--color-yellow-800);
  --color-primary-900: var(--color-yellow-900);
  --color-secondary-100: var(--color-blue-100);
  --color-secondary-200: var(--color-blue-200);
  --color-surface-secondary-bg: var(--color-secondary-200);
  --color-secondary-300: var(--color-blue-300);
  --color-secondary-400: var(--color-blue-400);
  --color-secondary-500: var(--color-blue-500);
  --color-secondary-600: var(--color-blue-600);
  --color-secondary-700: var(--color-blue-700);
  --color-secondary-800: var(--color-blue-800);
  --color-secondary-900: var(--color-blue-900);
  --color-success: var(--color-green-600);
  --color-surface-cyan-bg: var(--color-cyan-500);
  --color-surface-cyan-fg: var(--color-grey-900);
  --color-surface-green-bg: var(--color-green-500);
  --color-surface-green-fg: var(--color-grey-900);
  --color-surface-highlight-bg: var(--color-grey-900);
  --color-surface-highlight-fg: var(--color-grey-50);
  --color-surface-neutral-bg: var(--color-grey-900);
  --color-surface-neutral-fg: var(--color-grey-50);
  --color-surface-orange-bg: var(--color-orange-600);
  --color-surface-orange-fg: var(--color-grey-900);
  --color-surface-primary-fg: var(--color-neutral-900);
  --color-surface-red-bg: var(--color-red-500);
  --color-surface-red-fg: var(--color-grey-900);
  --color-surface-secondary-fg: var(--color-grey-900);
  --color-surface-yellow-bg: var(--color-yellow-500);
  --color-surface-yellow-fg: var(--color-grey-900);
  --color-warning: var(--color-orange-700);
  --form-input-border-color: var(--color-neutral-600);
  --form-input-color-bg: var(--color-neutral-900);
  --form-input-color-disabled: var(--color-neutral-500);
  --form-input-color-placeholder: var(--color-neutral-700);
  --text-fg: var(--color-neutral-50);
  --text-interactive-hover: var(--color-neutral-950);
}

@media (width >= 45em) {
  :root {
    --body-fs: var(--font-size-400);
    --font-size-200: 0.925rem;
    --font-size-300: 1rem;
    --font-size-400: 1.1rem;
    --font-size-500: 1.3rem;
    --font-size-600: 1.5rem;
    --font-size-700: 1.75rem;
    --font-size-800: 2rem;
    --font-size-900: 2.25rem;
  }
}
@media (width >= 65em) {
  :root {
    --body-fs: var(--font-size-400);
    --font-size-200: 1rem;
    --font-size-300: 1.1rem;
    --font-size-400: 1.125rem;
    --font-size-500: 1.5rem;
    --font-size-600: 1.75rem;
    --font-size-700: 1.9rem;
    --font-size-800: 2.25rem;
    --font-size-900: 2.5rem;
  }
}
@layer base {
  :root {
    --radial-gradient-cyan: radial-gradient(circle, var(--color-cyan-500) 0%, var(--color-cyan-500) 35%, var(--color-cyan-600) 100%);
    --radial-gradient-green: radial-gradient(circle, var(--color-green-400) 0%, var(--color-green-400) 35%, var(--color-green-500) 100%);
    --radial-gradient-red: radial-gradient(circle, var(--color-red-500) 0%, var(--color-red-500) 35%, #fa4242 100%);
    --radial-gradient-yellow: radial-gradient(circle, var(--color-yellow-500) 0%, var(--color-yellow-500) 35%, var(--color-yellow-600) 100%);
    --radial-gradient-lightblue: radial-gradient(circle, var(--color-blue-200) 0%, var(--color-blue-200) 35%, #638dcd 100%);
  }
}
/**
 * Font Face
 * ----------------------------------------------------------------------------
 */
/**
 * Reset
 * ========================================================================== */
@layer base {
  @font-face {
    font-family: "Fira Code";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/fira-code/fira-code-v26-latin-regular.woff2") format("woff2"), url("../fonts/fira-code/fira-code-v26-latin-regular.woff") format("woff"), url("../fonts/fira-code/fira-code-v26-latin-regular.ttf") format("truetype"), url("../fonts/fira-code/fira-code-v26-latin-regular.svg#OpenSans") format("svg"); /* Legacy iOS */
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  }
  @font-face {
    font-family: "Comfortaa";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/comfortaa/comfortaa-v46-latin-regular.woff2") format("woff2"), url("../fonts/comfortaa/comfortaa-v46-latin-regular.woff") format("woff"), url("../fonts/comfortaa/comfortaa-v46-latin-regular.ttf") format("truetype"), url("../fonts/comfortaa/comfortaa-v46-latin-regular.svg#OpenSans") format("svg"); /* Legacy iOS */
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  }
  @font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: "300...900";
    src: url("../fonts/rubik/rubik-variablefont_wght.woff2") format("woff2"), url("../fonts/rubik/rubik-variablefont_wght.woff") format("woff"), url("../fonts/rubik/rubik-variablefont_wght.ttf") format("truetype"), url("../fonts/rubik/rubik-variablefont_wght.svg#OpenSans") format("svg"); /* Legacy iOS */
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  }
  @font-face {
    font-family: "Rubik";
    font-style: italic;
    font-weight: "300...900";
    src: url("../fonts/rubik/rubik-italic-variablefont_wght.woff2") format("woff2"), url("../fonts/rubik/rubik-italic-variablefont_wght.woff") format("woff"), url("../fonts/rubik/rubik-italic-variablefont_wght.ttf") format("truetype"), url("../fonts/rubik/rubik-italic-variablefont_wght.svg#OpenSans") format("svg"); /* Legacy iOS */
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  }
}
/**
 *
 * Animations
 * ----------------------------------------------------------------------------
 */
@layer base {
  :root {
    --animation-bounce: bounce var(--duration-slow) var(--cubic-bezier-squish) infinite;
    --animation-pulse: pulse var(--duration-slow) var(--cubic-bezier-easeOut) infinite;
    --animation-slide-out-up: slide-out-up .3s var(--cubic-bezier-easeElastic) .6s 1 both;
  }
  @keyframes bounce {
    25% {
      transform: translateY(-20%);
    }
    40% {
      transform: translateY(-3%);
    }
    0%, 60%, 100% {
      transform: translateY(0);
    }
  }
  @keyframes pulse {
    50% {
      transform: scale(0.9, 0.9);
    }
  }
  @keyframes slide-out-up {
    to {
      transform: translateY(-100%);
    }
  }
}
@layer base {
  html {
    font-family: var(--body-font-family, --font-family-base);
    font-weight: var(--body-fw, --font-weight-regular);
    font-size: var(--body-fs, --font-size-400);
    color: var(--body-text);
    background-color: var(--body-background);
    line-height: 1.1;
    accent-color: var(--color-accent-500);
  }
  p {
    text-wrap: pretty;
    text-wrap: balance;
    max-inline-size: none;
  }
  a {
    color: var(--text-interactive);
    text-underline-offset: var(--link-underline-offset);
  }
  a:has(.icon) {
    text-underline-offset: var(--link-icon-underline-offset);
  }
  a .icon {
    text-decoration: none;
  }
  a:is(:hover, :focus) {
    color: var(--text-interactive-hover, var(--text-interactive));
    background-color: var(--text-interactive-hover-bg, transparent);
    box-shadow: 0 0 0 max(3px, 0.25em) var(--text-interactive-hover-bg);
    border-radius: 2px;
  }
  :where(:not(fieldset, progress, meter)) {
    border-width: 0;
    border-style: solid;
    background-origin: border-box;
    background-repeat: no-repeat;
  }
  :where(a[href], area, button, input:not([type=text], [type=email], [type=number], [type=password], [type=""], [type=tel], [type=url]), label[for], select, summary, [tabindex]:not([tabindex*="-"], pre)) {
    cursor: pointer;
  }
  :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  :where(input, button, textarea, select),
  :where(input[type=file])::-webkit-file-upload-button {
    color: inherit;
    letter-spacing: inherit;
  }
  :where(:not(pre) > code, kbd) {
    white-space: nowrap;
  }
  :where(pre) {
    white-space: pre;
    min-inline-size: 0;
    writing-mode: lr;
    direction: ltr;
  }
  :where(:not(pre) > code) {
    writing-mode: lr;
  }
  .figure {
    margin: auto;
  }
  :where(figure) {
    display: grid;
    gap: var(--grid-gap);
    place-items: center;
  }
  :where(figure) > :where(figcaption) {
    font-size: var(--fs-400);
    text-wrap: balance;
  }
  :where(mark) {
    background-color: var(--color-yellow-300);
  }
  :where(blockquote) {
    --blockquote-padding-inline-min: var(--spacing-200);
    --blockquote-margin-inline-min: var(--spacing-000);
    --blockquote-padding-inline-preferd: 6%;
    --blockquote-margin-inline-preferd: 0%;
    font-family: var(--font-family-code);
    font-size: calc(var(--font-size-400) * 1.025);
    line-height: 1.6;
    border-left: 1px solid var(--text-fg);
    padding-inline-start: clamp(var(--blockquote-padding-inline-min), var(--blockquote-padding-inline-preferd), var(--spacing-500));
    margin-inline-start: clamp(var(--blockquote-margin-inline-min), var(--blockquote-margin-inline-preferd), var(--spacing-600));
    margin-block: max(var(--spacing-300), 8%);
  }
  :where(blockquote) cite:last-child {
    text-transform: uppercase;
    text-align: end;
    display: block;
    margin-top: var(--spacing-100);
    font-size: calc(var(--font-size-400) * 0.99);
  }
  :where(blockquote) cite:last-child::before {
    content: "— ";
  }
  @media screen and (width >= 30em) {
    :where(blockquote) {
      --blockquote-padding-inline-min: var(--spacing-300);
      --blockquote-margin-inline-min: var(--spacing-200);
      --blockquote-padding-inline-preferd: 6%;
      --blockquote-margin-inline-preferd: 8%;
    }
  }
  @media screen and (width >= 45em) {
    :where(blockquote) {
      --blockquote-margin-inline-preferd: 12%;
    }
  }
  @media screen and (width >= 87.5em) {
    :where(blockquote) {
      --blockquote-padding-inline-preferd: 8%;
      --blockquote-margin-inline-preferd: 20%;
    }
  }
  :where(q) {
    quotes: "„" "“" "‘" "’";
  }
  :where(q) q {
    font-style: italic;
    font-style: oblique;
  }
  :where(q)::before, :where(q)::after {
    font-size: calc(var(--body-fs) * 1.025);
  }
  :where(q)::before {
    padding-inline-start: var(--spacing-025);
  }
  :where(q)::after {
    padding-inline-end: var(--spacing-025);
  }
  :where(details) {
    --padding-inline: var(--content-padding-inline-default, var(--spacing-075));
    display: block;
    margin-block: var(--spacing-200) 0;
    border-radius: var(--border-radius);
    background-color: transparent;
  }
  :where(details) > * {
    padding: var(--padding-inline);
  }
  :where(details) summary {
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    border: var(--border-width) solid var(--border-color);
    list-style: none;
    font-size: x-large;
    display: flex;
    align-items: center;
  }
  :where(details) summary::after {
    content: "+";
    padding-inline-end: var(--spacing-100);
    display: inline-block;
    margin-left: auto;
    font-size: xxx-large;
    line-height: 0.5;
    transition: transform 0.3s ease;
  }
  :where(details)[open] summary::after {
    content: "-";
  }
  @media screen and (width >= 30em) {
    :where(details) {
      --padding-inline: calc(var(--content-padding-inline-default) * 1.5);
    }
  }
  nav details {
    --padding-inline: 0;
    margin-block: 0;
    border-radius: 0;
    background-color: transparent;
  }
  nav details > * {
    padding: 0;
  }
  nav details summary {
    font-weight: normal;
    border: none;
    list-style: initial;
    font-size: inherit;
    display: block;
    padding: initial;
  }
  nav details summary::after {
    content: none;
  }
  nav details[open] summary::after {
    content: none;
  }
}
@layer base {
  :root {
    --form-input-option-dimension: 1.5em;
    --form-input-option-control-color: var(--form-control-color, accentColor);
  }
  :is(input, textarea, select) {
    background-color: var(--form-input-color-bg);
    color: var(--form-input-color-fg);
    padding: var(--form-input-padding-block) var(--form-input-padding-inline);
    border: none;
    border-bottom: var(--form-input-border-width) var(--form-input-border-style) var(--form-input-border-color);
    border-radius: var(--form-input-border-radius);
  }
  input[type=color] {
    padding: var(--spacing-025);
    border: none;
  }
  input[type=checkbox],
  input[type=radio] {
    appearance: none;
    /* Not removed via appearance */
    margin: 0;
    padding: 0;
    font: inherit;
    color: currentColor;
    width: var(--form-input-option-dimension);
    height: var(--form-input-option-dimension);
    border: 0.15em solid currentColor;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    gap: 0;
  }
  input[type=checkbox]::before,
  input[type=radio]::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform 0.15s ease-in-out;
    color: var(--text-interactive-hover);
  }
  input[type=checkbox]:checked,
  input[type=radio]:checked {
    background-color: var(--text-interactive-hover-bg);
    border-color: var(--text-interactive-hover-bg);
  }
  input[type=checkbox]:checked::before,
  input[type=radio]:checked::before {
    transform: scale(1);
  }
  input[type=checkbox]:disabled,
  input[type=radio]:disabled {
    color: color-mix(in srgb, currentColor 35%, transparent);
  }
  input[type=radio] {
    border-radius: 50%;
  }
  label {
    color: var(--form-label-text);
    margin-bottom: var(--form-label-margin-bottom);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
  }
  label:has(input[type=checkbox]), label:has(input[type=radio]) {
    display: grid;
    grid-template-columns: 1em auto;
    gap: var(--form-label-checkbox-gap, calc(var(--form-input-option-dimension) * 0.75));
    align-items: center;
  }
  label:has(input[type=checkbox]:disabled), label:has(input[type=radio]:disabled) {
    color: color-mix(in srgb, currentColor 65%, transparent);
  }
  label:has(input[type=checkbox]:not(:checked):disabled), label:has(input[type=radio]:not(:checked):disabled) {
    text-decoration: line-through;
    text-decoration-thickness: 0.05em;
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  }
  label > input,
  label > textarea,
  label > select {
    margin-left: 0.75em;
  }
  label > input ~ small,
  label > textarea ~ small,
  label > select ~ small {
    margin-top: 0.5em;
    flex-basis: 100%;
  }
  ::placeholder {
    color: var(--form-input-color-placeholder);
  }
  .form-control {
    font-family: var(--form-font-family, inherit);
    font-size: var(--form-font-size, inherit);
    font-weight: var(--form-font-weight, inherit);
    line-height: var(--form-line-height, var(--body-line-height));
    display: grid;
    grid-template-columns: 1em auto;
    gap: var(--form-gap, 0.5em);
  }
  .form-group {
    margin-top: var(--form-margin-block);
  }
  .control-group {
    margin-block: var(--form-margin-block);
    display: flex;
    gap: calc(var(--form-gap) * 2);
    flex-wrap: wrap;
    max-width: 100%;
  }
  .control-label {
    flex-basis: 200px;
    flex-shrink: 0;
  }
  .controls {
    flex-grow: 1;
  }
  .form-check {
    display: inline-flex;
    gap: calc(var(--form-gap) * 2);
    align-items: baseline;
  }
  .input-group {
    display: flex;
  }
}
@layer base {
  :is(a, button, input, textarea, summary):focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset, var(--focus-outline-width));
  }
  :is(a, button, input, textarea):focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset, var(--focus-outline-width));
  }
  :is(a, button, input, textarea):focus:not(:focus-visible) {
    outline: none;
  }
}
@layer base {
  .icon-menu {
    padding-block: var(--spacing-050);
    padding-inline: var(--spacing-075);
  }
}
/**
 * Components
 * ==========================================================================
 */
/**
 * Headings
 * ----------------------------------------------------------------------------
 */
@layer base {
  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    --heading-color: var(--color-primary-600);
    --heading-font-family: var(--font-family-heading);
    --heading-font-size: var(--font-size-500);
    --heading-font-weight: var(--font-weight-bold);
    --heading-letter-spacing: var(--spacing-000);
    --heading-line-height: 1.5;
    --heading-text-transform: normal;
  }
}
@layer base {
  h1, .h1 {
    --heading-font-size: var(--font-size-900);
    --heading-text-transform: uppercase;
  }
  h2, .h2 {
    --heading-font-size: var(--font-size-800);
  }
  h3, .h3 {
    --heading-color: var(--color-primary-600);
    --heading-font-size: var(--font-size-700);
  }
  h4, .h4 {
    --heading-font-size: var(--font-size-600);
  }
}
@media (prefers-color-scheme: dark) {
  @layer base {
    :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
      --heading-color: var(--color-neutral-50);
    }
  }
  @layer base {
    h3, .h3 {
      --heading-color: var(--color-neutral-50);
    }
  }
}
@layer base {
  [data-mode=dark] :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    --heading-color: var(--color-neutral-50);
  }
}
@layer base {
  [data-mode=dark] h3, [data-mode=dark] .h3 {
    --heading-color: var(--color-neutral-50);
  }
}

@media (width >= 600px) {
  @layer base {
    :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
      --heading-font-size: var(--font-size-500);
    }
  }
  @layer base {
    h1, .h1 {
      --heading-font-size: var(--font-size-900);
    }
    h2, .h2 {
      --heading-font-size: var(--font-size-800);
    }
    h3, .h3 {
      --heading-font-size: var(--font-size-700);
    }
    h4, .h4 {
      --heading-font-size: var(--font-size-600);
    }
  }
}
@layer base {
  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    font-family: var(--heading-font-family);
    font-size: var(--heading-font-size);
    font-weight: var(--heading-font-weight);
    color: var(--heading-color);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
  }
}
/**
 * Buttons
 * ----------------------------------------------------------------------------
 */
@layer component {
  .btn, [class*=" btn-"], [class^=btn-], [class$=" btn-"] {
    --btn-background-active-color: var(--color-neutral-500);
    --btn-background-color: var(--color-neutral-700);
    --btn-background-hover-color: var(--color-neutral-500);
    --btn-border-active-color: var(--color-neutral-500);
    --btn-border-color: var(--color-neutral-700);
    --btn-border-hover-color: var(--color-neutral-500);
    --btn-border-radius: 0;
    --btn-border-style: solid;
    --btn-border-width: 2.5px;
    --btn-cta-background-active-color: #0000;
    --btn-cta-background-color: var(--color-neutral-300);
    --btn-cta-background-hover-color: #0000;
    --btn-cta-border-width: 0;
    --btn-cta-text-active-color: var(--color-neutral-700);
    --btn-cta-text-color: var(--color-neutral-700);
    --btn-cta-text-hover-color: var(--color-neutral-700);
    --btn-font-family: var(--font-family-expressive);
    --btn-font-size: var(--font-size-500);
    --btn-font-weight: var(--font-weight-bold);
    --btn-padding: var(--spacing-100);
    --btn-text-active-color: var(--color-neutral-800);
    --btn-text-color: var(--color-neutral-50);
    --btn-text-hover-color: var(--color-neutral-800);
    --btn-text-transform: none;
  }
}
@layer componentVariant {
  .btn-danger {
    --btn-background-active-color: var(--color-red-700);
    --btn-background-color: var(--color-surface-red-bg);
    --btn-background-hover-color: var(--color-red-700);
    --btn-border-active-color: var(--color-red-700);
    --btn-border-color: var(--color-surface-red-bg);
    --btn-border-hover-color: var(--color-red-700);
    --btn-cta-background-color: #0000;
    --btn-cta-border-color: var(--color-red-800);
    --btn-cta-text-active-color: var(--color-red-800);
    --btn-cta-text-color: var(--color-red-800);
    --btn-cta-text-hover-color: var(--color-red-800);
    --btn-text-active-color: var(--color-neutral-50);
    --btn-text-color: var(--color-surface-red-fg);
    --btn-text-hover-color: var(--color-neutral-50);
  }
  .btn-default {
    --btn-background-active-color: var(--btn-base-background-active-color);
    --btn-background-color: var(--btn-base-background-color);
    --btn-background-hover-color: var(--btn-base-background-hover-color);
    --btn-border-active-color: var(--btn-base-border-active-color);
    --btn-border-color: var(--btn-base-border-color);
    --btn-border-hover-color: var(--btn-base-border-hover-color);
    --btn-text-active-color: var(--color-neutral-800);
    --btn-text-color: var(--color-neutral-50);
    --btn-text-hover-color: var(--color-neutral-800);
  }
  .btn-info {
    --btn-background-active-color: var(--color-cyan-400);
    --btn-background-color: var(--color-cyan-500);
    --btn-background-hover-color: var(--color-cyan-400);
    --btn-border-active-color: var(--color-cyan-400);
    --btn-border-color: var(--color-cyan-500);
    --btn-border-hover-color: var(--color-cyan-400);
    --btn-cta-background-color: #0000;
    --btn-cta-border-color: var(--color-cyan-700);
    --btn-cta-text-active-color: var(--color-cyan-700);
    --btn-cta-text-color: var(--color-cyan-700);
    --btn-cta-text-hover-color: var(--color-cyan-700);
    --btn-text-active-color: var(--color-neutral-800);
    --btn-text-color: var(--color-neutral-800);
    --btn-text-hover-color: var(--color-neutral-800);
  }
  .btn-large {
    --btn-font-size: var(--font-size-700);
    --btn-padding: var(--spacing-150);
  }
  .btn-link {
    --btn-background-active-color: var(--text-interactive-hover-bg);
    --btn-background-color: #0000;
    --btn-background-hover-color: var(--text-interactive-hover-bg);
    --btn-border-active-color: #0000;
    --btn-border-color: #0000;
    --btn-border-hover-color: #0000;
    --btn-border-width: 0;
    --btn-font-family: var(--body-font-family);
    --btn-font-size: var(--body-fs);
    --btn-font-weight: var(--body-fw);
    --btn-padding: var(--spacing-000);
    --btn-text-active-color: var(--text-interactive-hover);
    --btn-text-color: var(--text-interactive);
    --btn-text-hover-color: var(--text-interactive-hover);
  }
  .btn-primary {
    --btn-background-active-color: var(--color-primary-300);
    --btn-background-color: var(--color-primary-500);
    --btn-background-hover-color: var(--color-primary-300);
    --btn-border-active-color: var(--color-primary-300);
    --btn-border-color: var(--color-primary-500);
    --btn-border-hover-color: var(--color-primary-300);
    --btn-cta-background-color: #0000;
    --btn-cta-background-hover-color: #0000;
    --btn-cta-text-active-color: var(--btn-primary-cta-text-hover-color);
    --btn-cta-text-color: var(--color-primary-400);
    --btn-cta-text-hover-color: var(--color-primary-700);
    --btn-text-active-color: var(--color-neutral-50);
    --btn-text-color: var(--color-neutral-50);
    --btn-text-hover-color: var(--color-neutral-50);
  }
  .btn-secondary {
    --btn-background-active-color: var(--color-secondary-400);
    --btn-background-color: var(--color-secondary-600);
    --btn-background-hover-color: var(--color-secondary-400);
    --btn-border-active-color: var(--color-secondary-400);
    --btn-border-color: var(--color-secondary-600);
    --btn-border-hover-color: var(--color-secondary-400);
    --btn-cta-background-color: var(--color-secondary-500);
    --btn-cta-background-hover-color: var(--color-secondary-500);
    --btn-cta-border-color: var(--color-primary-500);
    --btn-cta-text-active-color: var(--color-primary-500);
    --btn-cta-text-color: var(--color-primary-500);
    --btn-cta-text-hover-color: var(--color-primary-500);
    --btn-text-active-color: var(--color-neutral-900);
    --btn-text-color: var(--color-neutral-800);
    --btn-text-hover-color: var(--color-neutral-900);
  }
  .btn-small {
    --btn-font-size: var(--font-size-400);
    --btn-padding: var(--spacing-075);
  }
  .btn-success {
    --btn-background-active-color: var(--color-green-400);
    --btn-background-color: var(--color-surface-green-bg);
    --btn-background-hover-color: var(--color-green-400);
    --btn-border-active-color: var(--color-green-400);
    --btn-border-color: var(--color-surface-green-bg);
    --btn-border-hover-color: var(--color-green-400);
    --btn-cta-background-color: #0000;
    --btn-cta-border-color: var(--color-green-700);
    --btn-cta-text-active-color: var(--color-green-700);
    --btn-cta-text-color: var(--color-green-700);
    --btn-cta-text-hover-color: var(--color-green-700);
    --btn-text-active-color: var(--color-surface-green-fg);
    --btn-text-color: var(--color-surface-green-fg);
    --btn-text-hover-color: var(--color-surface-green-fg);
  }
  .btn-warning {
    --btn-background-active-color: var(--color-orange-700);
    --btn-background-color: var(--color-orange-500);
    --btn-background-hover-color: var(--color-orange-700);
    --btn-border-active-color: var(--color-orange-700);
    --btn-border-color: var(--color-orange-500);
    --btn-border-hover-color: var(--color-orange-700);
    --btn-cta-background-color: #0000;
    --btn-cta-border-color: var(--color-orange-700);
    --btn-cta-text-active-color: var(--color-orange-700);
    --btn-cta-text-color: var(--color-orange-700);
    --btn-cta-text-hover-color: var(--color-orange-700);
    --btn-text-active-color: var(--color-neutral-50);
    --btn-text-color: var(--color-neutral-800);
    --btn-text-hover-color: var(--color-neutral-50);
  }
}
@media (prefers-color-scheme: dark) {
  @layer component {
    .btn, [class*=" btn-"], [class^=btn-], [class$=" btn-"] {
      --btn-background-active-color: var(--color-neutral-700);
      --btn-background-color: #0000;
      --btn-background-hover-color: var(--color-neutral-700);
      --btn-border-active-color: var(--color-neutral-700);
      --btn-border-hover-color: var(--color-neutral-700);
      --btn-border-width: 5px;
      --btn-cta-background-active-color: #0000;
      --btn-cta-background-color: #0000;
      --btn-cta-background-hover-color: #0000;
      --btn-cta-border-width: 0;
      --btn-cta-text-active-color: var(--color-neutral-200);
      --btn-cta-text-color: var(--color-neutral-200);
      --btn-cta-text-hover-color: var(--color-neutral-200);
      --btn-text-active-color: var(--color-neutral-50);
      --btn-text-hover-color: var(--color-neutral-50);
    }
  }
  @layer componentVariant {
    .btn-danger {
      --btn-background-active-color: var(--color-red-800);
      --btn-background-color: #0000;
      --btn-background-hover-color: var(--color-red-800);
      --btn-border-active-color: var(--color-red-800);
      --btn-border-hover-color: var(--color-red-800);
      --btn-cta-background-color: #0000;
      --btn-cta-border-color: var(--color-surface-red-bg);
      --btn-cta-text-active-color: var(--color-surface-red-bg);
      --btn-cta-text-color: var(--color-surface-red-bg);
      --btn-cta-text-hover-color: var(--color-surface-red-bg);
      --btn-text-active-color: var(--color-neutral-50);
      --btn-text-color: var(--color-surface-red-bg);
      --btn-text-hover-color: var(--color-neutral-50);
    }
    .btn-default {
      --btn-background-color: #0000;
      --btn-text-active-color: var(--color-neutral-100);
      --btn-text-color: var(--color-neutral-200);
      --btn-text-hover-color: var(--color-neutral-100);
    }
    .btn-info {
      --btn-background-active-color: var(--color-cyan-600);
      --btn-background-color: #0000;
      --btn-background-hover-color: var(--color-cyan-600);
      --btn-border-active-color: var(--color-cyan-600);
      --btn-border-hover-color: var(--color-cyan-600);
      --btn-cta-background-color: #0000;
      --btn-cta-border-color: var(--color-surface-cyan-bg);
      --btn-cta-text-active-color: var(--color-surface-cyan-bg);
      --btn-cta-text-color: var(--color-surface-cyan-bg);
      --btn-cta-text-hover-color: var(--color-surface-cyan-bg);
      --btn-text-active-color: var(--color-neutral-900);
      --btn-text-color: var(--color-cyan-600);
      --btn-text-hover-color: var(--color-neutral-900);
    }
    .btn-primary {
      --btn-background-active-color: var(--color-primary-700);
      --btn-background-color: #0000;
      --btn-background-hover-color: var(--color-primary-700);
      --btn-border-active-color: var(--color-primary-700);
      --btn-border-color: var(--color-primary-500);
      --btn-border-hover-color: var(--color-primary-700);
      --btn-cta-background-color: #0000;
      --btn-cta-background-hover-color: #0000;
      --btn-cta-text-color: var(--color-primary-500);
      --btn-cta-text-hover-color: var(--color-primary-700);
      --btn-text-active-color: var(--color-neutral-800);
      --btn-text-color: var(--color-primary-700);
      --btn-text-hover-color: var(--color-neutral-800);
    }
    .btn-secondary {
      --btn-background-active-color: var(--color-secondary-200);
      --btn-background-color: #0000;
      --btn-background-hover-color: var(--color-secondary-200);
      --btn-border-active-color: var(--color-secondary-200);
      --btn-border-color: var(--color-secondary-200);
      --btn-border-hover-color: var(--color-secondary-200);
      --btn-cta-background-color: #0000;
      --btn-cta-background-hover-color: #0000;
      --btn-cta-border-color: var(--color-secondary-200);
      --btn-cta-text-active-color: var(--color-secondary-200);
      --btn-cta-text-color: var(--color-secondary-200);
      --btn-cta-text-hover-color: var(--color-secondary-200);
      --btn-text-active-color: var(--color-neutral-900);
      --btn-text-color: var(--color-secondary-200);
      --btn-text-hover-color: var(--color-neutral-900);
    }
    .btn-success {
      --btn-background-active-color: var(--color-green-600);
      --btn-background-color: #0000;
      --btn-background-hover-color: var(--color-green-600);
      --btn-border-active-color: var(--color-green-600);
      --btn-border-hover-color: var(--color-green-600);
      --btn-cta-background-color: #0000;
      --btn-cta-border-color: var(--color-surface-green-bg);
      --btn-cta-text-active-color: var(--color-surface-green-bg);
      --btn-cta-text-color: var(--color-surface-green-bg);
      --btn-cta-text-hover-color: var(--color-surface-green-bg);
      --btn-text-active-color: var(--color-neutral-900);
      --btn-text-color: var(--color-green-600);
      --btn-text-hover-color: var(--color-neutral-900);
    }
    .btn-warning {
      --btn-background-active-color: var(--color-orange-600);
      --btn-background-color: #0000;
      --btn-background-hover-color: var(--color-orange-600);
      --btn-border-active-color: var(--color-orange-600);
      --btn-border-color: var(--color-orange-600);
      --btn-border-hover-color: var(--color-orange-600);
      --btn-cta-background-color: #0000;
      --btn-cta-border-color: var(--color-surface-orange-bg);
      --btn-cta-text-active-color: var(--color-surface-orange-bg);
      --btn-cta-text-color: var(--color-surface-orange-bg);
      --btn-cta-text-hover-color: var(--color-surface-orange-bg);
      --btn-text-active-color: var(--color-neutral-900);
      --btn-text-color: var(--color-orange-600);
      --btn-text-hover-color: var(--color-neutral-900);
    }
  }
}
@layer component {
  [data-mode=dark] .btn, [data-mode=dark] [class*=" btn-"], [data-mode=dark] [class^=btn-], [data-mode=dark] [class$=" btn-"] {
    --btn-background-active-color: var(--color-neutral-700);
    --btn-background-color: #0000;
    --btn-background-hover-color: var(--color-neutral-700);
    --btn-border-active-color: var(--color-neutral-700);
    --btn-border-hover-color: var(--color-neutral-700);
    --btn-border-width: 5px;
    --btn-cta-background-active-color: #0000;
    --btn-cta-background-color: #0000;
    --btn-cta-background-hover-color: #0000;
    --btn-cta-border-width: 0;
    --btn-cta-text-active-color: var(--color-neutral-200);
    --btn-cta-text-color: var(--color-neutral-200);
    --btn-cta-text-hover-color: var(--color-neutral-200);
    --btn-text-active-color: var(--color-neutral-50);
    --btn-text-hover-color: var(--color-neutral-50);
  }
}
@layer componentVariant {
  [data-mode=dark] .btn-danger {
    --btn-background-active-color: var(--color-red-800);
    --btn-background-color: #0000;
    --btn-background-hover-color: var(--color-red-800);
    --btn-border-active-color: var(--color-red-800);
    --btn-border-hover-color: var(--color-red-800);
    --btn-cta-background-color: #0000;
    --btn-cta-border-color: var(--color-surface-red-bg);
    --btn-cta-text-active-color: var(--color-surface-red-bg);
    --btn-cta-text-color: var(--color-surface-red-bg);
    --btn-cta-text-hover-color: var(--color-surface-red-bg);
    --btn-text-active-color: var(--color-neutral-50);
    --btn-text-color: var(--color-surface-red-bg);
    --btn-text-hover-color: var(--color-neutral-50);
  }
  [data-mode=dark] .btn-default {
    --btn-background-color: #0000;
    --btn-text-active-color: var(--color-neutral-100);
    --btn-text-color: var(--color-neutral-200);
    --btn-text-hover-color: var(--color-neutral-100);
  }
  [data-mode=dark] .btn-info {
    --btn-background-active-color: var(--color-cyan-600);
    --btn-background-color: #0000;
    --btn-background-hover-color: var(--color-cyan-600);
    --btn-border-active-color: var(--color-cyan-600);
    --btn-border-hover-color: var(--color-cyan-600);
    --btn-cta-background-color: #0000;
    --btn-cta-border-color: var(--color-surface-cyan-bg);
    --btn-cta-text-active-color: var(--color-surface-cyan-bg);
    --btn-cta-text-color: var(--color-surface-cyan-bg);
    --btn-cta-text-hover-color: var(--color-surface-cyan-bg);
    --btn-text-active-color: var(--color-neutral-900);
    --btn-text-color: var(--color-cyan-600);
    --btn-text-hover-color: var(--color-neutral-900);
  }
  [data-mode=dark] .btn-primary {
    --btn-background-active-color: var(--color-primary-700);
    --btn-background-color: #0000;
    --btn-background-hover-color: var(--color-primary-700);
    --btn-border-active-color: var(--color-primary-700);
    --btn-border-color: var(--color-primary-500);
    --btn-border-hover-color: var(--color-primary-700);
    --btn-cta-background-color: #0000;
    --btn-cta-background-hover-color: #0000;
    --btn-cta-text-color: var(--color-primary-500);
    --btn-cta-text-hover-color: var(--color-primary-700);
    --btn-text-active-color: var(--color-neutral-800);
    --btn-text-color: var(--color-primary-700);
    --btn-text-hover-color: var(--color-neutral-800);
  }
  [data-mode=dark] .btn-secondary {
    --btn-background-active-color: var(--color-secondary-200);
    --btn-background-color: #0000;
    --btn-background-hover-color: var(--color-secondary-200);
    --btn-border-active-color: var(--color-secondary-200);
    --btn-border-color: var(--color-secondary-200);
    --btn-border-hover-color: var(--color-secondary-200);
    --btn-cta-background-color: #0000;
    --btn-cta-background-hover-color: #0000;
    --btn-cta-border-color: var(--color-secondary-200);
    --btn-cta-text-active-color: var(--color-secondary-200);
    --btn-cta-text-color: var(--color-secondary-200);
    --btn-cta-text-hover-color: var(--color-secondary-200);
    --btn-text-active-color: var(--color-neutral-900);
    --btn-text-color: var(--color-secondary-200);
    --btn-text-hover-color: var(--color-neutral-900);
  }
  [data-mode=dark] .btn-success {
    --btn-background-active-color: var(--color-green-600);
    --btn-background-color: #0000;
    --btn-background-hover-color: var(--color-green-600);
    --btn-border-active-color: var(--color-green-600);
    --btn-border-hover-color: var(--color-green-600);
    --btn-cta-background-color: #0000;
    --btn-cta-border-color: var(--color-surface-green-bg);
    --btn-cta-text-active-color: var(--color-surface-green-bg);
    --btn-cta-text-color: var(--color-surface-green-bg);
    --btn-cta-text-hover-color: var(--color-surface-green-bg);
    --btn-text-active-color: var(--color-neutral-900);
    --btn-text-color: var(--color-green-600);
    --btn-text-hover-color: var(--color-neutral-900);
  }
  [data-mode=dark] .btn-warning {
    --btn-background-active-color: var(--color-orange-600);
    --btn-background-color: #0000;
    --btn-background-hover-color: var(--color-orange-600);
    --btn-border-active-color: var(--color-orange-600);
    --btn-border-color: var(--color-orange-600);
    --btn-border-hover-color: var(--color-orange-600);
    --btn-cta-background-color: #0000;
    --btn-cta-border-color: var(--color-surface-orange-bg);
    --btn-cta-text-active-color: var(--color-surface-orange-bg);
    --btn-cta-text-color: var(--color-surface-orange-bg);
    --btn-cta-text-hover-color: var(--color-surface-orange-bg);
    --btn-text-active-color: var(--color-neutral-900);
    --btn-text-color: var(--color-orange-600);
    --btn-text-hover-color: var(--color-neutral-900);
  }
}

@media (width >= 600px) {
  @layer component {
    .btn, [class*=" btn-"], [class^=btn-], [class$=" btn-"] {
      --btn-font-size: var(--font-size-500);
    }
  }
  @layer componentVariant {
    .btn-large {
      --btn-font-size: var(--font-size-700);
    }
    .btn-link {
      --btn-font-size: var(--body-fs);
    }
    .btn-small {
      --btn-font-size: var(--font-size-400);
    }
  }
}
@layer component {
  .btn:not(.btn-group, .btn-toolbar), button:not(.btn-group, .btn-toolbar), [class*=" btn-"]:not(.btn-group, .btn-toolbar), [class^=btn-]:not(.btn-group, .btn-toolbar), [class$=" btn-"]:not(.btn-group, .btn-toolbar) {
    display: inline-flex;
    white-space: nowrap;
    position: relative;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    text-transform: var(--btn-text-transform);
    padding-inline: var(--btn-padding);
    padding-block: calc(var(--btn-padding) * 0.75);
    transition: 275ms ease;
    background-color: var(--btn-background-color);
    color: var(--btn-text-color);
    border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color);
    border-radius: var(--btn-border-radius);
  }
  .btn:not(.btn-group, .btn-toolbar):hover, .btn:not(.btn-group, .btn-toolbar):focus, button:not(.btn-group, .btn-toolbar):hover, button:not(.btn-group, .btn-toolbar):focus, [class*=" btn-"]:not(.btn-group, .btn-toolbar):hover, [class*=" btn-"]:not(.btn-group, .btn-toolbar):focus, [class^=btn-]:not(.btn-group, .btn-toolbar):hover, [class^=btn-]:not(.btn-group, .btn-toolbar):focus, [class$=" btn-"]:not(.btn-group, .btn-toolbar):hover, [class$=" btn-"]:not(.btn-group, .btn-toolbar):focus {
    background-color: var(--btn-background-hover-color);
    color: var(--btn-text-hover-color);
    border-color: var(--btn-border-hover-color);
  }
  .btn:not(.btn-group, .btn-toolbar):active, button:not(.btn-group, .btn-toolbar):active, [class*=" btn-"]:not(.btn-group, .btn-toolbar):active, [class^=btn-]:not(.btn-group, .btn-toolbar):active, [class$=" btn-"]:not(.btn-group, .btn-toolbar):active {
    background-color: var(--btn-background-active-color);
    color: var(--btn-text-active-color);
    border-color: var(--btn-border-active-color);
  }
  a[class*=" btn-"]:hover, a[class*=" btn-"]:focus, a[class^=btn-]:hover, a[class^=btn-]:focus, a[class$=" btn-"]:hover, a[class$=" btn-"]:focus {
    box-shadow: none;
  }
}
@layer componentVariant {
  .btn.cta, button:not(.btn-link).cta, [class*=" btn-"]:not(.btn-link).cta, [class^=btn-]:not(.btn-link).cta, [class$=" btn-"]:not(.btn-link).cta {
    --btn-background-color: var(--btn-cta-background-color);
    --btn-background-hover-color: var(--btn-cta-background-hover-color);
    --btn-background-active-color: var(--btn-cta-background-active-color);
    --btn-border-width: var(--btn-cta-border-width);
    --btn-text-color: var(--btn-cta-text-color);
    --btn-text-hover-color: var(--btn-cta-text-hover-color);
    --btn-text-active-color: var(--btn-cta-text-active-color);
    --cta-border-color: var(--btn-cta-border-color, var(--btn-border-color));
    padding-inline: calc(var(--btn-padding) * 2);
    padding-block: calc(var(--btn-padding) * 0.85);
    margin-block: calc(var(--btn-padding) * 1.5);
    margin-inline: calc(var(--btn-padding) * 2);
  }
  .btn.cta:after, .btn.cta:before, button:not(.btn-link).cta:after, button:not(.btn-link).cta:before, [class*=" btn-"]:not(.btn-link).cta:after, [class*=" btn-"]:not(.btn-link).cta:before, [class^=btn-]:not(.btn-link).cta:after, [class^=btn-]:not(.btn-link).cta:before, [class$=" btn-"]:not(.btn-link).cta:after, [class$=" btn-"]:not(.btn-link).cta:before {
    content: " ";
    width: max(18px, 0.95em);
    height: max(18px, 0.95em);
    position: absolute;
    border: 0px solid var(--cta-border-color);
    transition: 0.35s;
  }
  .btn.cta:after, button:not(.btn-link).cta:after, [class*=" btn-"]:not(.btn-link).cta:after, [class^=btn-]:not(.btn-link).cta:after, [class$=" btn-"]:not(.btn-link).cta:after {
    top: 0;
    left: 0;
    border-top: 5px solid var(--cta-border-color);
    border-left: 5px solid var(--cta-border-color);
  }
  .btn.cta:before, button:not(.btn-link).cta:before, [class*=" btn-"]:not(.btn-link).cta:before, [class^=btn-]:not(.btn-link).cta:before, [class$=" btn-"]:not(.btn-link).cta:before {
    bottom: 0;
    right: 0;
    border-bottom: 5px solid var(--cta-border-color);
    border-right: 5px solid var(--cta-border-color);
  }
  .btn.cta:hover:before, .btn.cta:hover:after, button:not(.btn-link).cta:hover:before, button:not(.btn-link).cta:hover:after, [class*=" btn-"]:not(.btn-link).cta:hover:before, [class*=" btn-"]:not(.btn-link).cta:hover:after, [class^=btn-]:not(.btn-link).cta:hover:before, [class^=btn-]:not(.btn-link).cta:hover:after, [class$=" btn-"]:not(.btn-link).cta:hover:before, [class$=" btn-"]:not(.btn-link).cta:hover:after {
    width: 100%;
    height: 100%;
  }
  @media (prefers-color-scheme: dark) {
    .btn.cta, button:not(.btn-link).cta, [class*=" btn-"]:not(.btn-link).cta, [class^=btn-]:not(.btn-link).cta, [class$=" btn-"]:not(.btn-link).cta {
      border: none;
    }
  }
  .btn.cta [data-mode=dark], button:not(.btn-link).cta [data-mode=dark], [class*=" btn-"]:not(.btn-link).cta [data-mode=dark], [class^=btn-]:not(.btn-link).cta [data-mode=dark], [class$=" btn-"]:not(.btn-link).cta [data-mode=dark] {
    border: none;
  }
  .btn-link {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-underline-offset: var(--link-underline-offset);
  }
  .btn-link:is(:hover, :focus) {
    border: max(3px, 0.08em) solid var(--btn-background-active-color);
    border-radius: 2px;
  }
  .btn-link:has(.icon) {
    text-underline-offset: var(--link-icon-underline-offset);
  }
  .btn-link .icon {
    text-decoration: none;
  }
  .btn-group {
    display: flex;
    gap: var(--spacing-200);
  }
}
/**
 * Cards
 * ----------------------------------------------------------------------------
 */
@layer component {
  .card, [class*=" card-"], [class^=card-], [class$=" card-"] {
    --card-bg-color: var(--background-color);
    --card-border-color: #fff0;
    --card-border-radius: var(--spacing-000);
    --card-border-width: 0;
    --card-box-shadow: var(--shadow-2);
    --card-gap: var(--spacing-150);
    --card-text-color: var(--color-neutral-900);
    --card-text-size: 1rem;
  }
}
@layer componentVariant {
  .card-article {
    --card-bg-color: var(--color-neutral-000);
    --card-border-color: var(--color-grey-300);
    --card-border-radius: 0.25rem;
    --card-border-width: 1px;
    --card-box-shadow: 0 2px 4px 0 #0000001a;
    --card-date-color: var(--color-neutral-600);
    --card-date-size: var(--font-size-200);
    --card-gap: var(--spacing-125);
    --card-hover-bg-color: var(--color-neutral-50);
    --card-hover-border-color: var(--color-primary-500);
    --card-padding: var(--spacing-150);
    --card-text-color: var(--color-neutral-800);
    --card-text-size: var(--font-size-400);
    --card-title-color: var(--color-neutral-800);
    --card-title-size: var(--font-size-600);
    --card-title-weight: 600;
  }
  .card-cyan {
    --card-bg-color: var(--color-surface-cyan-bg);
    --card-text-color: var(--color-surface-cyan-fg);
  }
  .card-green {
    --card-bg-color: var(--color-surface-green-bg);
    --card-text-color: var(--color-surface-green-fg);
  }
  .card-primary {
    --card-bg-color: var(--color-surface-primary-bg);
    --card-text-color: var(--color-surface-primary-fg);
  }
  .card-red {
    --card-bg-color: var(--color-surface-red-bg);
    --card-text-color: var(--color-surface-red-fg);
  }
  .card-secondary {
    --card-bg-color: var(--color-surface-secondary-bg);
    --card-text-color: var(--color-surface-secondary-fg);
  }
}
@media (prefers-color-scheme: light) {
  @layer component {
    .card, [class*=" card-"], [class^=card-], [class$=" card-"] {
      --card-text-color: var(--color-neutral-900);
    }
  }
}
@layer component {
  [data-mode=light] .card, [data-mode=light] [class*=" card-"], [data-mode=light] [class^=card-], [data-mode=light] [class$=" card-"] {
    --card-text-color: var(--color-neutral-900);
  }
}

@media (prefers-color-scheme: dark) {
  @layer component {
    .card, [class*=" card-"], [class^=card-], [class$=" card-"] {
      --card-text-color: var(--color-neutral-100);
    }
  }
}
@layer component {
  [data-mode=dark] .card, [data-mode=dark] [class*=" card-"], [data-mode=dark] [class^=card-], [data-mode=dark] [class$=" card-"] {
    --card-text-color: var(--color-neutral-100);
  }
}

@media (width >= 600px) {
  @layer componentVariant {
    .card-article {
      --card-date-size: var(--font-size-200);
      --card-text-size: var(--font-size-400);
      --card-title-size: var(--font-size-600);
    }
  }
}
@layer component {
  .card, [class^=card-], [class*=card-] {
    --margin: var(--card-gap, var(--grid-gap));
    display: flex;
    flex-direction: column;
    gap: var(--card-gap, var(--grid-gap));
    box-shadow: var(--card-box-shadow, --shadow-2);
    border-radius: var(--card-border-radius, var(--border-radius));
    background-color: var(--card-bg-color);
    color: var(--card-text-color);
    font-size: var(--card-text-size, inherit);
    width: min(50ch, 90%);
  }
  .card :is(h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6), [class^=card-] :is(h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6), [class*=card-] :is(h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6) {
    --heading-color: var(--card-text-color, var(--heading-color));
  }
  .card > img, [class^=card-] > img, [class*=card-] > img {
    aspect-ratio: var(--card-img-ratio);
    object-fit: cover;
    width: 100%;
  }
  .card > img:first-child, [class^=card-] > img:first-child, [class*=card-] > img:first-child {
    border-radius: var(--card-border-radius, var(--border-radius)) var(--card-border-radius, var(--border-radius)) 0 0;
  }
  .card > img:last-child, [class^=card-] > img:last-child, [class*=card-] > img:last-child {
    border-radius: 0 0 var(--card-border-radius, var(--border-radius)) var(--card-border-radius, var(--border-radius));
    margin-top: auto;
  }
  .card > :not(img, picture, figure), [class^=card-] > :not(img, picture, figure), [class*=card-] > :not(img, picture, figure) {
    overflow-wrap: break-word;
    hyphens: auto;
    /* Prevent typography "orphans" */
    text-wrap: pretty;
    margin-left: var(--margin);
    margin-right: var(--margin);
  }
  .card > :not(img, picture, figure):first-child, [class^=card-] > :not(img, picture, figure):first-child, [class*=card-] > :not(img, picture, figure):first-child {
    margin-top: var(--margin);
  }
  .card > :last-of-type:not(img, picture, figure, h1, h2, h3, h4), [class^=card-] > :last-of-type:not(img, picture, figure, h1, h2, h3, h4), [class*=card-] > :last-of-type:not(img, picture, figure, h1, h2, h3, h4) {
    margin-bottom: var(--margin);
  }
  .card > a, [class^=card-] > a, [class*=card-] > a {
    align-self: start;
  }
}
/**
 * Tables
 * ----------------------------------------------------------------------------
 */
@layer base {
  table {
    --table-border-color: #0000;
    --table-border-inline-color: #0000;
    --table-border-inline-spacing: 1px;
    --table-border-spacing: 2px;
    --table-color-fg: var(--body-text);
    --table-foot-bg: var(--table-base-head-bg);
    --table-head-bg: var(--color-neutral-300);
  }
}
@media (prefers-color-scheme: light) {
  @layer base {
    table {
      --table-head-bg: var(--color-neutral-300);
    }
  }
}
@layer base {
  [data-mode=light] table {
    --table-head-bg: var(--color-neutral-300);
  }
}

@media (prefers-color-scheme: dark) {
  @layer base {
    table {
      --table-head-bg: var(--color-neutral-800);
    }
  }
}
@layer base {
  [data-mode=dark] table {
    --table-head-bg: var(--color-neutral-800);
  }
}

@layer base {
  .table-wrapper:has(table) {
    overflow: scroll;
  }
  table {
    --table-row-even-bg: color-mix(in srgb, var(--table-head-bg), transparent 25%);
    display: table;
    margin-block: var(--spacing-250);
    border-spacing: 2px;
    box-sizing: border-box;
    text-indent: 0;
    text-align: left;
    border-collapse: collapse;
    color: var(--table-color-fg);
    width: max(65rem, 100%);
    table-layout: fixed;
  }
  table.caption-bottom {
    caption-side: bottom;
  }
  @media screen and (width >= 45em) {
    table.sticky-col th:first-child {
      position: sticky;
      inset-inline-start: 0;
      border-inline-end: none;
      background-color: var(--table-head-bg);
    }
  }
  th,
  caption,
  td {
    text-align: start;
  }
  th h1, th h2, th h3, th h4, th p,
  caption h1,
  caption h2,
  caption h3,
  caption h4,
  caption p,
  td h1,
  td h2,
  td h3,
  td h4,
  td p {
    margin-block: 0;
  }
  th.align-end,
  caption.align-end,
  td.align-end {
    text-align: end;
  }
  th, td {
    border: var(--table-border-inline-spacing) solid var(--table-border-inline-color);
    padding: var(--spacing-125) var(--spacing-075);
    vertical-align: middle;
  }
  thead {
    border-block-end: var(--table-border-spacing) solid var(--table-border-color, initial);
    background: var(--table-head-bg);
  }
  tfoot {
    border-block: var(--table-border-spacing) solid var(--table-border-inline-color, initial);
    background: var(--table-foot-bg);
  }
  tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--table-row-even-bg), transparent 60%);
  }
}
/**
 * Jump Mark
 * ----------------------------------------------------------------------------
 */
@layer component {
  .jump-mark {
    --jump-mark-color: var(--color-accent-500);
    --jump-mark-shadow: var(--spacing-025) var(--spacing-025) var(--spacing-075) var(--color-grey-400);
    --jump-mark-font-size: calc(var(--font-size-900) * 3);
    margin-block: var(--spacing-400);
    width: 100%;
    margin-inline: auto;
    display: inline-block;
    text-align: center;
  }
  .jump-mark .fa, .jump-mark [class^=icon-], .jump-mark [class*=" icon-"] {
    color: var(--jump-mark-color);
    font-size: var(--jump-mark-font-size);
    animation: var(--animation-pulse);
    text-shadow: var(--jump-mark-shadow);
  }
  @media (prefers-color-scheme: dark) {
    .jump-mark {
      --jump-mark-shadow: none;
    }
  }
  .jump-mark [data-mode=dark] {
    --jump-mark-shadow: none;
  }
  a.jump-mark {
    text-decoration: none;
  }
  a.jump-mark:is(:hover, :focus) {
    color: var(--jump-mark-color);
    background: none;
    border: none;
  }
}
@layer componentVariant {
  .jump-mark.inverse {
    --jump-mark-color: var(--color-secondary-500);
  }
}
/**
 * Alert - joomla-alert
 * ----------------------------------------------------------------------------
 */
@layer component {
  joomla-alert {
    --joomla-alert-heading-font-family: var(--font-family-heading);
    --joomla-alert-heading-font-letter-spacing: var(--spacing-000);
    --joomla-alert-heading-font-line-height: 1.5;
    --joomla-alert-heading-font-size: var(--font-size-400);
    --joomla-alert-heading-font-text-transform: none;
    --joomla-alert-heading-font-weight: var(--font-weight-bold);
    --joomla-alert-icon-color: #fff;
    --joomla-alert-icon-svg: url("data:image/svg+xml;utf8,<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"rgba(255, 255, 255, .95)\" d=\"M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z\"/></svg>");
    --joomla-alert-jui-alert-animation-duration: .5s;
    --joomla-alert-jui-alert-animation-timing-function: ease-in-out;
    --joomla-alert-jui-alert-background-color: var(--body-background);
    --joomla-alert-jui-alert-border-color: #0000;
    --joomla-alert-jui-alert-border-radius: 0.15rem;
    --joomla-alert-jui-alert-border-style: solid;
    --joomla-alert-jui-alert-border-width: 1px;
    --joomla-alert-jui-alert-button-color: var(--body-text);
    --joomla-alert-jui-alert-margin-block: 0;
    --joomla-alert-jui-alert-margin-bottom: 1rem;
    --joomla-alert-jui-alert-margin-inline: 0;
    --joomla-alert-jui-alert-min-width: 250px;
    --joomla-alert-jui-alert-padding-block: var(--spacing-050);
    --joomla-alert-jui-alert-padding-inline: var(--spacing-125);
  }
}
@layer componentVariant {
  joomla-alert[type=danger] {
    --joomla-alert-icon-color: var(--color-danger);
    --joomla-alert-icon-svg: url("data:image/svg+xml;utf8,<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"rgba(255, 255, 255, .95)\" d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z\"/></svg>");
    --joomla-alert-jui-alert-background-color: var(--color-red-50);
    --joomla-alert-jui-alert-border-color: var(--color-danger);
    --joomla-alert-jui-alert-color: var(--color-danger);
    --joomla-alert-jui-alert-link-color: var(--color-danger);
  }
  joomla-alert[type=info] {
    --joomla-alert-icon-color: var(--color-info);
    --joomla-alert-icon-svg: url("data:image/svg+xml;utf8,<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"rgba(255, 255, 255, .95)\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"/></svg>");
    --joomla-alert-jui-alert-background-color: var(--color-cyan-100);
    --joomla-alert-jui-alert-border-color: var(--color-info);
    --joomla-alert-jui-alert-color: var(--color-info);
    --joomla-alert-jui-alert-link-color: var(--color-cyan-600);
  }
  joomla-alert[type=success] {
    --joomla-alert-icon-color: var(--color-success);
    --joomla-alert-icon-svg: url("data:image/svg+xml;utf8,<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"rgba(255, 255, 255, .95)\" d=\"M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z\"/></svg>");
    --joomla-alert-jui-alert-background-color: var(--color-green-50);
    --joomla-alert-jui-alert-border-color: var(--color-success);
    --joomla-alert-jui-alert-color: var(--color-success);
    --joomla-alert-jui-alert-link-color: var(--color-success);
  }
  joomla-alert[type=warning] {
    --joomla-alert-icon-color: var(--color-warning);
    --joomla-alert-icon-svg: url("data:image/svg+xml;utf8,<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"rgba(255, 255, 255, .95)\" d=\"M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z\"/></svg>");
    --joomla-alert-jui-alert-background-color: var(--color-orange-100);
    --joomla-alert-jui-alert-border-color: var(--color-warning);
    --joomla-alert-jui-alert-color: var(--color-warning);
    --joomla-alert-jui-alert-link-color: var(--color-orange-600);
  }
}
@media (prefers-color-scheme: light) {
  @layer component {
    joomla-alert {
      --joomla-alert-jui-alert-border-width: 1px;
      --joomla-alert-jui-alert-button-color: var(--body-text);
    }
  }
  @layer componentVariant {
    joomla-alert[type=danger] {
      --joomla-alert-jui-alert-background-color: var(--color-red-50);
      --joomla-alert-jui-alert-border-color: var(--color-danger);
      --joomla-alert-jui-alert-color: var(--color-danger);
      --joomla-alert-jui-alert-link-color: var(--color-danger);
    }
    joomla-alert[type=info] {
      --joomla-alert-jui-alert-background-color: var(--color-cyan-100);
      --joomla-alert-jui-alert-border-color: var(--color-info);
    }
    joomla-alert[type=success] {
      --joomla-alert-jui-alert-background-color: var(--color-green-50);
      --joomla-alert-jui-alert-border-color: var(--color-success);
      --joomla-alert-jui-alert-color: var(--color-success);
      --joomla-alert-jui-alert-link-color: var(--color-success);
    }
    joomla-alert[type=warning] {
      --joomla-alert-jui-alert-background-color: var(--color-orange-100);
      --joomla-alert-jui-alert-border-color: var(--color-warning);
    }
  }
}
@layer component {
  [data-mode=light] joomla-alert {
    --joomla-alert-jui-alert-border-width: 1px;
    --joomla-alert-jui-alert-button-color: var(--body-text);
  }
}
@layer componentVariant {
  [data-mode=light] joomla-alert[type=danger] {
    --joomla-alert-jui-alert-background-color: var(--color-red-50);
    --joomla-alert-jui-alert-border-color: var(--color-danger);
    --joomla-alert-jui-alert-color: var(--color-danger);
    --joomla-alert-jui-alert-link-color: var(--color-danger);
  }
  [data-mode=light] joomla-alert[type=info] {
    --joomla-alert-jui-alert-background-color: var(--color-cyan-100);
    --joomla-alert-jui-alert-border-color: var(--color-info);
  }
  [data-mode=light] joomla-alert[type=success] {
    --joomla-alert-jui-alert-background-color: var(--color-green-50);
    --joomla-alert-jui-alert-border-color: var(--color-success);
    --joomla-alert-jui-alert-color: var(--color-success);
    --joomla-alert-jui-alert-link-color: var(--color-success);
  }
  [data-mode=light] joomla-alert[type=warning] {
    --joomla-alert-jui-alert-background-color: var(--color-orange-100);
    --joomla-alert-jui-alert-border-color: var(--color-warning);
  }
}

@media (prefers-color-scheme: dark) {
  @layer component {
    joomla-alert {
      --joomla-alert-jui-alert-border-width: 2px;
      --joomla-alert-jui-alert-button-color: var(--body-text);
    }
  }
  @layer componentVariant {
    joomla-alert[type=danger] {
      --joomla-alert-jui-alert-background-color: var(--body-background);
      --joomla-alert-jui-alert-border-color: var(--color-danger);
      --joomla-alert-jui-alert-color: var(--color-danger);
      --joomla-alert-jui-alert-link-color: var(--color-red-600);
    }
    joomla-alert[type=info] {
      --joomla-alert-jui-alert-background-color: var(--body-background);
      --joomla-alert-jui-alert-border-color: var(--color-info);
    }
    joomla-alert[type=success] {
      --joomla-alert-jui-alert-background-color: var(--body-background);
      --joomla-alert-jui-alert-border-color: var(--color-success);
      --joomla-alert-jui-alert-color: var(--color-success);
      --joomla-alert-jui-alert-link-color: var(--color-green-500);
    }
    joomla-alert[type=warning] {
      --joomla-alert-jui-alert-background-color: var(--body-background);
      --joomla-alert-jui-alert-border-color: var(--color-warning);
    }
  }
}
@layer component {
  [data-mode=dark] joomla-alert {
    --joomla-alert-jui-alert-border-width: 2px;
    --joomla-alert-jui-alert-button-color: var(--body-text);
  }
}
@layer componentVariant {
  [data-mode=dark] joomla-alert[type=danger] {
    --joomla-alert-jui-alert-background-color: var(--body-background);
    --joomla-alert-jui-alert-border-color: var(--color-danger);
    --joomla-alert-jui-alert-color: var(--color-danger);
    --joomla-alert-jui-alert-link-color: var(--color-red-600);
  }
  [data-mode=dark] joomla-alert[type=info] {
    --joomla-alert-jui-alert-background-color: var(--body-background);
    --joomla-alert-jui-alert-border-color: var(--color-info);
  }
  [data-mode=dark] joomla-alert[type=success] {
    --joomla-alert-jui-alert-background-color: var(--body-background);
    --joomla-alert-jui-alert-border-color: var(--color-success);
    --joomla-alert-jui-alert-color: var(--color-success);
    --joomla-alert-jui-alert-link-color: var(--color-green-500);
  }
  [data-mode=dark] joomla-alert[type=warning] {
    --joomla-alert-jui-alert-background-color: var(--body-background);
    --joomla-alert-jui-alert-border-color: var(--color-warning);
  }
}

@media (width >= 600px) {
  @layer component {
    joomla-alert {
      --joomla-alert-heading-font-size: var(--font-size-400);
    }
  }
}
#system-message-container:empty {
  margin-top: 0;
  display: none;
}
#system-message-container joomla-alert {
  --jui-alert-min-width: var(--joomla-alert-jui-alert-min-width);
  --jui-alert-padding: var(--joomla-alert-jui-alert-padding-block) var(--joomla-alert-jui-alert-padding-inline);
  --jui-alert-margin: var(--joomla-alert-jui-alert-margin-block) var(--joomla-alert-jui-alert-margin-inline) (--joomla-art-jui-alert-margin-bottom) var(--joomla-alert-jui-alert-margin-inline);
  --jui-alert-border: var(--joomla-alert-jui-alert-border-width) var(--joomla-alert-jui-alert-border-style) var(--joomla-alert-jui-alert-border-color);
  --jui-alert-border-radius: var(--joomla-alert-jui-alert-border-radius);
  --jui-alert-animation-duration: var(--joomla-jui-alert-animation-duration);
  --jui-alert-animation-timing-function: var(--joomla-jui-alert-animation-timing-function);
  --jui-alert-button-color-dark: var(--joomla-alert-jui-alert-button-color);
  --jui-alert-button-color-light: var(--joomla-alert-jui-alert-button-color);
  --jui-alert-success-color: var(--joomla-alert-jui-alert-color);
  --jui-alert-success-background-color: var(--joomla-alert-jui-alert-background-color);
  --jui-alert-success-border-color: var(--joomla-alert-jui-alert-border-color);
  --jui-alert-success-link-color: var(--joomla-alert-jui-alert-link-color);
  --jui-alert-info-color: var(--joomla-alert-jui-alert-color);
  --jui-alert-info-background-color: var(--joomla-alert-jui-alert-background-color);
  --jui-alert-info-border-color: var(--joomla-alert-jui-alert-border-color);
  --jui-alert-info-link-color: var(--joomla-alert-jui-alert-link-color);
  --jui-alert-warning-color: var(--joomla-alert-jui-alert-color);
  --jui-alert-warning-background-color: var(--joomla-alert-jui-alert-background-color);
  --jui-alert-warning-border-color: var(--joomla-alert-jui-alert-border-color);
  --jui-alert-warning-link-color: var(--joomla-alert-jui-alert-link-color);
  --jui-alert-danger-color: var(--joomla-alert-jui-alert-color);
  --jui-alert-danger-background-color: var(--joomla-alert-jui-alert-background-color);
  --jui-alert-danger-border-color: var(--joomla-alert-jui-alert-border-color);
  --jui-alert-danger-link-color: var(--joomla-alert-jui-alert-link-color);
}
#system-message-container joomla-alert .alert-heading .message,
#system-message-container joomla-alert .alert-heading .success,
#system-message-container joomla-alert .alert-heading .notice,
#system-message-container joomla-alert .alert-heading .info,
#system-message-container joomla-alert .alert-heading .warning,
#system-message-container joomla-alert .alert-heading .error, #system-message-container joomla-alert .alert-heading .danger {
  color: var(--alert-heading-text);
  background: var(--alert-accent-color, transparent);
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-gap: 1vw;
  align-items: center;
  border-bottom: 1px solid var(--joomla-alert-jui-alert-color);
  margin-block: var(--spacing-075);
  padding-bottom: var(--spacing-075);
  font-family: var(--joomla-alert-heading-font-family);
  font-size: var(--joomla-alert-heading-font-size);
  font-weight: var(--joomla-alert-heading-font-weight);
  line-height: var(--joomla-alert-heading-line-height);
  letter-spacing: var(--joomla-alert-heading-letter-spacing);
  text-transform: var(--joomla-alert-heading-text-transform);
}
#system-message-container joomla-alert .alert-heading .message::before,
#system-message-container joomla-alert .alert-heading .success::before,
#system-message-container joomla-alert .alert-heading .notice::before,
#system-message-container joomla-alert .alert-heading .info::before,
#system-message-container joomla-alert .alert-heading .warning::before,
#system-message-container joomla-alert .alert-heading .error::before, #system-message-container joomla-alert .alert-heading .danger::before {
  content: "";
  background-color: var(--joomla-alert-icon-color);
  mask: var(--joomla-alert-icon-svg);
  mask-size: contain;
  width: max(1.25em, 2vw);
  height: max(1.25em, 2vw);
  align-self: center;
}
#system-message-container joomla-alert:not(:has(.alert-heading)) .alert-wrapper {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-gap: max(1rem, 1vw);
  align-items: center;
}
#system-message-container joomla-alert:not(:has(.alert-heading)) .alert-wrapper::before {
  content: "";
  background-color: var(--joomla-alert-icon-color);
  mask: var(--joomla-alert-icon-svg);
  mask-size: contain;
  width: max(1.25em, 2vw);
  height: max(1.25em, 2vw);
  align-self: center;
}
#system-message-container joomla-alert:not(:has(.alert-heading)) .alert-message {
  border-left: 2px solid var(--joomla-alert-jui-alert-border-color);
  padding-inline-start: var(--spacing-150);
}
#system-message-container joomla-alert .alert-link:hover, #system-message-container joomla-alert .alert-link:focus, #system-message-container joomla-alert a:hover, #system-message-container joomla-alert a:focus {
  background-color: transparent;
  border-color: var(--joomla-alert-jui-alert-link-color);
}
#system-message-container joomla-alert .alert-link:focus-visible, #system-message-container joomla-alert a:focus-visible {
  --focus-outline-color: var(--joomla-alert-jui-alert-link-color);
  background-color: transparent;
  border-color: transparent;
}
#system-message-container joomla-alert .joomla-alert--close, #system-message-container joomla-alert .joomla-alert-button--close {
  padding-block: 0.5rem;
}
#system-message-container joomla-alert .joomla-alert--close:focus, #system-message-container joomla-alert .joomla-alert-button--close:focus {
  cursor: pointer;
  opacity: 0.75;
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  #system-message-container joomla-alert .joomla-alert--close:focus, #system-message-container joomla-alert .joomla-alert-button--close:focus {
    opacity: 0.95;
  }
}
@media (prefers-color-scheme: dark) {
  #system-message-container joomla-alert .joomla-alert--close, #system-message-container joomla-alert .joomla-alert-button--close {
    opacity: 0.85;
  }
}
#system-message-container .btn, #system-message-container [class*=" btn-"], #system-message-container [class^=btn-], #system-message-container [class$=" btn-"] {
  --btn-font-size: var(--font-size-400);
  --btn-padding: var(--spacing-050);
  margin-block: var(--spacing-050);
}

/**
 * Breadcrumb - Joomla Module
 * ----------------------------------------------------------------------------
 */
@layer layout {
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
}
@layer component {
  .breadcrumb, [class*=" breadcrumb-"], [class^=breadcrumb-], [class$=" breadcrumb-"] {
    --breadcrumb-font-size: var(--body-fs);
    --breadcrumb-intro-bg: var(--color-accent-200);
    --breadcrumb-intro-fg: var(--body-text);
    --breadcrumb-link-color: var(--body-text);
    --breadcrumb-link-hover: var(--text-interactive-hover);
    --breadcrumb-marker-color: var(--color-accent-300);
  }
}
@media (prefers-color-scheme: dark) {
  @layer component {
    .breadcrumb, [class*=" breadcrumb-"], [class^=breadcrumb-], [class$=" breadcrumb-"] {
      --breadcrumb-intro-bg: var(--color-accent-600);
      --breadcrumb-intro-fg: var(--color-neutral-800);
      --breadcrumb-marker-color: var(--color-accent-500);
    }
  }
}
@layer component {
  [data-mode=dark] .breadcrumb, [data-mode=dark] [class*=" breadcrumb-"], [data-mode=dark] [class^=breadcrumb-], [data-mode=dark] [class$=" breadcrumb-"] {
    --breadcrumb-intro-bg: var(--color-accent-600);
    --breadcrumb-intro-fg: var(--color-neutral-800);
    --breadcrumb-marker-color: var(--color-accent-500);
  }
}

@media (width >= 600px) {
  @layer component {
    .breadcrumb, [class*=" breadcrumb-"], [class^=breadcrumb-], [class$=" breadcrumb-"] {
      --breadcrumb-font-size: var(--body-fs);
    }
  }
}
@layer component {
  .mod-breadcrumbs {
    list-style: none;
    margin-inline-start: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-125);
    align-items: center;
    font-size: var(--breadcrumb-font-size, 1rem);
  }
  .mod-breadcrumbs__wrapper {
    min-width: 100%;
  }
  .mod-breadcrumbs li {
    line-height: calc(var(--breadcrumb-font-size, 1rem) * 2.5);
  }
  .mod-breadcrumbs__item::before {
    content: "\f138";
    font-size: calc(var(--breadcrumb-font-size, 1rem) * 1.5);
    font-family: "Font Awesome 6 Free";
    font-weight: var(--font-weight-bold);
    color: var(--breadcrumb-marker-color, inherit);
    display: inline-block;
    vertical-align: middle;
  }
  .mod-breadcrumbs__item > *:first-child {
    margin-inline-start: var(--spacing-100);
  }
  .mod-breadcrumbs__here {
    background-color: var(--breadcrumb-intro-bg);
    color: var(--breadcrumb-intro-fg);
    padding-inline-start: var(--spacing-075);
    padding-inline-end: var(--spacing-050);
  }
  .mod-breadcrumbs__here ~ .mod-breadcrumbs__item:nth-child(2)::before {
    content: "";
    display: none;
  }
  .mod-breadcrumbs__here ~ .mod-breadcrumbs__item:nth-child(2) > *:first-child {
    margin-inline-start: var(--spacing-000);
  }
  .mod-breadcrumbs a {
    text-decoration: none;
    color: var(--breadcrumb-link-color, currentColor);
  }
  .mod-breadcrumbs a:hover, .mod-breadcrumbs a:focus {
    color: var(--breadcrumb-link-hover, var(--text-interactive-hover));
  }
}
/**
 * Pagination - Joomla com_content category blog
 * ----------------------------------------------------------------------------
 */
@layer component {
  .pagination, [class*=" pagination-"], [class^=pagination-], [class$=" pagination-"] {
    --pagination-active-background-color: var(--color-primary-100);
    --pagination-active-text-color: var(--text-interactive);
    --pagination-background-color: #0000;
    --pagination-background-hover-color: var(--text-interactive-hover-bg);
    --pagination-border-color: #0000;
    --pagination-border-width: 1px;
    --pagination-counter-font-size: var(--font-size-300);
    --pagination-disabled-color: var(--color-neutral-500);
    --pagination-font-size: var(--body-fs);
    --pagination-gap: var(--spacing-050);
    --pagination-padding: var(--spacing-075);
    --pagination-size: var(--spacing-250);
    --pagination-text-color: var(--text-interactive);
    --pagination-text-hover-color: var(--text-interactive-hover);
  }
}
@media (width >= 600px) {
  @layer component {
    .pagination, [class*=" pagination-"], [class^=pagination-], [class$=" pagination-"] {
      --pagination-counter-font-size: var(--font-size-300);
      --pagination-font-size: var(--body-fs);
    }
  }
}
@layer component {
  .com-content-category-blog__navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-100) var(--spacing-200);
    margin-block: var(--spacing-200);
  }
  .com-content-category-blog__counter {
    margin: 0;
    font-size: var(--pagination-counter-font-size);
    color: var(--color-neutral-700);
  }
  .com-content-category-blog__pagination {
    display: flex;
  }
  .pagination__wrapper {
    width: 100%;
  }
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pagination-gap);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .page-item {
    display: inline-flex;
  }
  .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-size);
    height: var(--pagination-size);
    padding-inline: var(--pagination-padding);
    font-size: var(--pagination-font-size);
    line-height: 1;
    color: var(--pagination-text-color);
    background-color: var(--pagination-background-color);
    border: var(--pagination-border-width) solid var(--pagination-border-color);
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  .page-link [class^=icon-],
  .page-link [class*=" icon-"] {
    font-size: 1em;
    color: currentColor;
  }
  a.page-link:hover, a.page-link:focus-visible {
    color: var(--pagination-text-hover-color);
    background-color: var(--pagination-background-hover-color);
  }
  a.page-link:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: 2px;
  }
  .page-item.active .page-link {
    color: var(--pagination-active-text-color);
    background-color: var(--pagination-active-background-color);
    font-weight: var(--font-weight-bold);
  }
  .page-item.disabled .page-link {
    color: var(--pagination-disabled-color);
    cursor: not-allowed;
    background-color: transparent;
  }
}
/**
 * Menu - Joomla Module
 * ----------------------------------------------------------------------------
 */
@layer layout {
  .even-columns {
    display: grid;
    gap: var(--grid-gap, --spacing-6);
  }
  @media screen and (width >= 45em) {
    .even-columns {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }
  }
}
@layer component {
  label.hamburger {
    display: block;
    cursor: pointer;
    padding: var(--spacing-050, 0.25rem);
  }
  @media screen and (width >= 65em) {
    label.hamburger {
      display: none;
    }
  }
  label.hamburger input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  label.hamburger .slice {
    display: block;
    width: 30px;
    height: 3px;
    background: currentColor;
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  :has(.hamburger input:checked) label.hamburger .slice:nth-child(2) {
    opacity: 0;
  }
  :has(.hamburger input:checked) label.hamburger .slice:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  :has(.hamburger input:checked) label.hamburger .slice:nth-child(4) {
    transform: translateY(-16px) rotate(45deg);
  }
  :has(.hamburger) ul.nav {
    display: none;
  }
  @media screen and (width >= 65em) {
    :has(.hamburger) ul.nav {
      display: flex;
    }
  }
  :has(.hamburger input:checked) ul.nav {
    display: flex;
    flex-direction: column;
  }
  @media screen and (width >= 65em) {
    :has(.hamburger input:checked) ul.nav {
      flex-direction: row;
    }
  }
  ul.nav.nav-flex-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .overlay-navigation {
    --nav-overlay-background: var(--body-bg);
    --nav-overlay-zindex: 4;
    --nav-overlay-font-family: var(--font-family-heading);
    --nav-overlay-fs: var(--font-size-400);
    --nav-overlay-fw: var(--font-weight-medium) --nav-overlay-letter-spacing: .1em;
    --nav-overlay-text-transform: uppercase;
    --nav-overlay-button-zindex: 5;
    --nav-overlay-item-background-color: var(--color-cyan-600);
    --nav-overlay-item-background-color-2: var(--color-cyan-600);
    --nav-overlay-item-background-color-5: var(--color-green-500);
    --nav-overlay-item-background-color-3: var(--color-red-500);
    --nav-overlay-item-background-color-1: var(--color-yellow-500);
    --nav-overlay-item-background-color-4: var(--color-blue-200);
    --nav-overlay-item-background: var(--radial-gradient-cyan);
    --nav-overlay-item-background-2: var(--radial-gradient-cyan);
    --nav-overlay-item-background-5: var(--radial-gradient-green);
    --nav-overlay-item-background-3: var(--radial-gradient-red);
    --nav-overlay-item-background-1: var(--radial-gradient-yellow);
    --nav-overlay-item-background-4: var(--radial-gradient-lightblue);
    --nav-overlay-item-link: var(--color-neutral-950);
    position: fixed;
    top: -1%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.8s var(--cubic-bezier-easeElastic) 0.8s;
    transform: translateY(-100%);
    background-color: var(--nav-overlay-background);
    display: none;
    z-index: var(--nav-overlay-zindex);
  }
  .overlay-navigation nav,
  .overlay-navigation nav ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .overlay-navigation nav ul {
    display: flex;
    list-style: none;
    justify-content: stretch;
    display: grid;
    gap: 0;
  }
  @media screen and (width >= 65em) {
    .overlay-navigation nav ul {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }
  }
  .overlay-navigation nav ul li {
    justify-content: center;
    align-items: center;
    width: 100.99%;
    height: 100.99%;
    overflow: hidden;
    display: block;
    padding-inline-start: 0;
    animation: var(--animation-slide-out-up);
    background-color: var(--nav-overlay-item-background);
    background: var(--nav-overlay-item-background);
  }
  .overlay-navigation nav ul li:nth-child(1) {
    --nav-overlay-item-background-color: var(--nav-overlay-item-background-color-1);
    --nav-overlay-item-background: var(--nav-overlay-item-background-1);
    animation-delay: 0.6s;
  }
  .overlay-navigation nav ul li:nth-child(2) {
    --nav-overlay-item-background-color: var(--nav-overlay-item-background-color-2);
    --nav-overlay-item-background: var(--nav-overlay-item-background-2);
    animation-delay: 0.5s;
  }
  .overlay-navigation nav ul li:nth-child(3) {
    --nav-overlay-item-background-color: var(--nav-overlay-item-background-color-3);
    --nav-overlay-item-background: var(--nav-overlay-item-background-3);
    animation-delay: 0.4s;
  }
  .overlay-navigation nav ul li:nth-child(4) {
    --nav-overlay-item-background-color: var(--nav-overlay-item-background-color-4);
    --nav-overlay-item-background: var(--nav-overlay-item-background-4);
    animation-delay: 0.3s;
  }
  .overlay-navigation nav ul li:nth-child(5) {
    --nav-overlay-item-background-color: var(--nav-overlay-item-background-color-5);
    --nav-overlay-item-background: var(--nav-overlay-item-background-5);
    animation-delay: 0.2s;
  }
  .overlay-navigation nav ul li:nth-child(6) {
    --nav-overlay-item-background: var(--nav-overlay-item-background-6);
    animation-delay: 0.1s;
  }
  .overlay-navigation nav ul li:hover a {
    border: none;
  }
  .overlay-navigation nav ul li:hover a:before {
    transform: translateX(0);
    opacity: 1;
  }
  .overlay-navigation nav ul li:hover a:after {
    transform: translateY(var(--translateY));
    opacity: 1;
  }
  .overlay-navigation nav ul li a {
    --text-interactive-hover-bg: transparent;
    position: relative;
    top: 32%;
    color: var(--nav-overlay-item-link);
    text-transform: var(--nav-overlay-text-transform);
    font-family: var(--nav-overlay-font-family);
    font-weight: var(--nav-overlay-fw);
    letter-spacing: var(--nav-overlay-letter-spacing);
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: var(--nav-overlay-fs);
  }
  .overlay-navigation nav ul li a:before {
    content: "";
    width: var(--size-px-10);
    height: var(--border-size-2);
    background-color: var(--color-neutral-900);
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    opacity: 0;
    transition: all 0.2s linear;
  }
  @media (hover: none) {
    .overlay-navigation nav ul li a:before {
      transform: translateX(0);
      opacity: 1;
    }
  }
  .overlay-navigation nav ul li a:after {
    --translateY: max(var(--spacing-025), 3vh);
    content: attr(data-content);
    font-size: var(--font-size-300);
    transition: all 0.2s var(--cubic-bezier-easeBounce);
    opacity: 0;
    position: absolute;
    z-index: 100;
    color: var(--color-neutral-900);
    display: block;
    margin-right: auto;
    margin-left: auto;
    left: 0;
    right: 0;
    bottom: calc(var(--translateY) * -1);
    text-transform: none;
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-3);
    font-style: italic;
    letter-spacing: 0;
  }
  @media screen and (width >= 45em) {
    .overlay-navigation nav ul li a:after {
      --translateY: var(--spacing-150);
    }
  }
  @media screen and (width >= 65em) {
    .overlay-navigation nav ul li a:after {
      --translateY: var(--spacing-250);
    }
  }
  @media (hover: none) {
    .overlay-navigation nav ul li a:after {
      transform: translateY(var(--translateY));
      opacity: 1;
    }
  }
  @media screen and (width >= 65em) {
    .overlay-navigation nav ul li a {
      top: 46%;
    }
  }
  .overlay-navigation.open {
    transition: all 0.4s ease-in-out;
    transform: translateY(0);
    top: 0;
  }
  .overlay-navigation.open nav ul li {
    animation: slide-in-nav-item 0.4s var(--cubic-bezier-easeBounce) 0.4s 1 both;
  }
  .overlay-navigation.open nav ul li:nth-child(1) {
    animation-delay: 0.4s;
  }
  .overlay-navigation.open nav ul li:nth-child(2) {
    animation-delay: 0.8s;
  }
  .overlay-navigation.open nav ul li:nth-child(3) {
    animation-delay: 1.2s;
  }
  .overlay-navigation.open nav ul li:nth-child(4) {
    animation-delay: 1.6s;
  }
  .overlay-navigation.open nav ul li:nth-child(5) {
    animation-delay: 2s;
  }
  .overlay-navigation.open nav ul li:nth-child(6) {
    animation-delay: 2.4s;
  }
  .overlay-navigation-button {
    --padding-inline: var(--spacing-150);
    --padding-top: var(--spacing-100);
    --padding-bottom: calc(var(--padding-top) * .75);
    position: relative;
    text-align: right;
    padding-inline: var(--padding-inline);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    z-index: var(--nav-overlay-button-zindex, 5);
    transition: padding 0.45s 0.5s;
  }
  @media screen and (width >= 30em) {
    .overlay-navigation-button {
      --padding-inline: var(--spacing-300);
      --padding-top: var(--spacing-125);
    }
  }
  @media screen and (width >= 65em) {
    .overlay-navigation-button {
      --padding-inline: var(--spacing-500);
      --padding-top: var(--spacing-250);
    }
  }
  .overlay-navigation-button button {
    --btn-background-color: #00000000;
    --btn-background-hover-color: #00000000;
    --btn-background-active-color: #00000000;
    --btn-text-hover-color: inherit;
    --btn-text-active-color: inherit;
    --btn-border-hover-color: #00000000;
    --btn-border-active-color: #00000000;
    --btn-border-width: 0;
    background-color: transparent;
    appearance: none;
    color: currentColor;
    transition: color 3ms var(--cubic-bezier-easeElastic) 0.5s;
    padding-block: 14px;
  }
  .overlay-navigation-button button > span {
    --width: 40px;
    width: var(--width);
    height: 2px;
    border: none;
    cursor: pointer;
    background: currentColor;
    color: inherit;
    font-size: 0;
    opacity: 1;
    transition: width 0.25s;
  }
  @media screen and (width >= 65em) {
    .overlay-navigation-button button > span {
      --width: 50px;
    }
  }
  .overlay-navigation-button button:before, .overlay-navigation-button button:after {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    content: "";
    transition: transform 2s 0.5s;
  }
  .overlay-navigation-button button:before {
    transform: translate(-50%, 0px);
  }
  .overlay-navigation-button button:after {
    transform: translate(-50%, 28px);
  }
  .overlay-navigation.open ~ .overlay-navigation-button {
    transition: padding 0.25s;
    padding-top: calc(var(--padding-top) * 0.75);
    padding-inline: max(var(--spacing-125), var(--padding-inline) * 0.5);
    position: fixed;
    right: 0;
    top: 0;
  }
  .overlay-navigation.open ~ .overlay-navigation-button button {
    transition: color 3ms var(--cubic-bezier-easeElastic) 1.9s;
    color: var(--color-neutral-950);
  }
  .overlay-navigation.open ~ .overlay-navigation-button button > span {
    width: calc(var(--width) * 0.8);
    animation: menuButton 2s 0.5s forwards;
  }
  .overlay-navigation.open ~ .overlay-navigation-button button:before {
    animation: menuButtonBefore 2s 0.5s forwards;
  }
  .overlay-navigation.open ~ .overlay-navigation-button button:after {
    animation: menuButtonAfter 2s 0.5s forwards;
  }
  :where(menu, ul.nav, nav ul) {
    list-style: none;
    margin-inline: var(--spacing-100);
    margin-block: var(--spacing-100);
  }
  :where(menu, ul.nav, nav ul) li {
    line-height: 2.25;
  }
  :where(menu, ul.nav, nav ul) a {
    text-decoration: none;
  }
  @keyframes slide-in-nav-item {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes menuButtonBefore {
    0% {
      transform: translate(-50%, 0);
    }
    40% {
      transform: translate(-50%, 14px);
    }
    60% {
      transform: translate(-50%, 14px);
    }
    100% {
      transform: translate(-50%, 14px) rotate(45deg);
    }
  }
  @keyframes menuButtonAfter {
    0% {
      transform: translate(-50%, -28px);
    }
    40% {
      transform: translate(-50%, 14px);
    }
    60% {
      transform: translate(-50%, 14px);
    }
    100% {
      transform: translate(-50%, 14px) rotate(-45deg);
    }
  }
  @keyframes menuButton {
    0% {
      opacity: 1;
    }
    40% {
      opacity: 1;
    }
    60% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
}
/**
 * Section Card
 * ----------------------------------------------------------------------------
 */
@layer component {
  .section-card {
    --section-card-bg: var(--color-primary-700);
    --section-card-fg: var(--color-neutral-50);
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    grid-gap: var(--grid-gap);
    padding-block: var(--grid-gap);
    padding-inline: var(--grid-gap);
    margin-block: var(--spacing-200);
    margin-bottom: 45%;
    background-color: var(--section-card-bg);
    color: var(--section-card-fg);
  }
  @media screen and (width >= 65em) {
    .section-card {
      grid-template-columns: 1.5fr 1fr;
      margin-bottom: 10%;
    }
  }
  @media screen and (width >= 87.5em) {
    .section-card {
      grid-template-columns: 1.25fr 1fr;
      margin-bottom: 15%;
    }
  }
  .section-card :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    --heading-color: var(--section-card-fg);
  }
  .section-card :last-child {
    position: relative;
  }
  .section-card :last-child > div.card {
    position: absolute;
    top: calc(var(--spacing-175) * -1);
    min-height: calc(100% + var(--spacing-600) * 2);
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  @media screen and (width >= 45em) {
    .section-card :last-child > div.card {
      min-height: calc(100% + var(--spacing-600) * 2.5);
    }
  }
  @media screen and (width >= 65em) {
    .section-card :last-child > div.card {
      top: 0;
      min-height: calc(100% + var(--spacing-600) * 0.5);
    }
  }
  @media screen and (width >= 87.5em) {
    .section-card :last-child > div.card {
      min-height: calc(100% + var(--spacing-600));
      padding: var(--grid-gap);
    }
  }
  .section-card :last-child jc-animation {
    height: auto;
  }
  .section-card .container {
    display: flex;
    flex-direction: column;
  }
  .section-card .container * {
    text-wrap: wrap;
  }
  .section-card .container :last-child {
    align-self: end;
  }
  @media screen and (width >= 45em) {
    .section-card .container :last-child {
      align-self: start;
    }
  }
  @media screen and (width >= 65em) {
    .section-card.reverse {
      grid-template-columns: 1fr 1.5fr;
    }
  }
  @media screen and (width >= 87.5em) {
    .section-card.reverse {
      grid-template-columns: 1fr 1fr;
    }
  }
  .section-card .text-conture-shadow {
    --text-shadow-color: --section-card-fg;
  }
  @media (prefers-color-scheme: dark) {
    .section-card {
      --section-card-bg: var(--color-neutral-900);
      --section-card-fg: var(--color-neutral-50);
    }
  }
}
/**
 * Avatar
 * ----------------------------------------------------------------------------
 */
@layer component {
  .avatar-list {
    --avatar-size: 5rem;
    --avatar-count: 2;
    list-style: none;
    margin: 0;
    display: grid;
    /* Default to displaying most of the avatar to
    enable easier access on touch devices, ensuring
    the WCAG touch target size is met or exceeded */
    grid-template-columns: repeat(var(--avatar-count), max(44px, var(--avatar-size) / 1.15));
    /* `padding` matches added visual dimensions of
    the `box-shadow` to help create a more accurate
    computed component size */
    padding: 0.08em;
    font-size: var(--avatar-size);
    margin-block-start: var(--spacing-250);
    margin-block-end: var(--spacing-400);
  }
  @media (any-hover: hover) and (any-pointer: fine) {
    .avatar-list {
      /* We create 1 extra cell to enable the computed 
      width to match the final visual width */
      grid-template-columns: repeat(calc(var(--avatar-count) + 1), var(--avatar-size));
    }
  }
  .avatar-list li {
    width: var(--avatar-size);
    height: var(--avatar-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 180ms ease-in-out;
  }
  .avatar-list li:last-of-type:hover, .avatar-list li:last-of-type:focus-within {
    transform: translateX(32%);
  }
  .avatar-list li:hover .avatar-image-back {
    animation: flip-image 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.2s forwards;
  }
  .avatar-list li:hover a {
    --background-blend-color: var(--color-yellow-600);
  }
  .avatar-list li:hover a::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 50%;
    background-color: var(--background-blend-color);
    mix-blend-mode: multiply;
  }
  .avatar-list li:hover ~ li, .avatar-list li:hover ~ li a, .avatar-list li:focus-within ~ li, .avatar-list li:focus-within ~ li a {
    transform: translateX(16%);
  }
  .avatar-list li:hover span, .avatar-list li:focus-within span {
    display: inline-block;
  }
  .avatar-list li:hover a, .avatar-list li:focus-within a {
    position: relative;
  }
  .avatar-list img, .avatar-list a {
    display: block;
    border-radius: 50%;
  }
  .avatar-list a {
    display: grid;
    grid-template-areas: "pile";
    place-content: center;
    transition: transform 180ms ease-in-out;
  }
  .avatar-list a:focus {
    outline: 2px solid transparent;
    /* Double-layer trick to work for dark and light backgrounds */
    box-shadow: 0 0 0 0.08em #29344B, 0 0 0 0.12em white;
  }
  .avatar-list a:hover, .avatar-list a:focus-within {
    border: none;
  }
  .avatar-list a::after {
    content: "";
    display: block;
    background: transparent;
    transition: background-color 0.5s 0.77s;
  }
  .avatar-list img {
    grid-area: pile;
    width: 90px;
    height: 90px;
    object-fit: cover;
    background-color: #fff;
    background-color: var(--body-background);
    box-shadow: 0 0 0 0.035em var(--color-neutral-200), 0 0 0 0.08em rgba(0, 0, 0, 0.015);
  }
  .avatar-list img.avatar-image-front {
    filter: brightness(1.4) contrast(110%);
  }
  .avatar-name {
    font-size: var(--font-size-200);
    text-align: center;
    padding-block-start: var(--spacing-050);
  }
}
@keyframes flip-image {
  0% {
    transform: translateX(0) translateZ(0) rotateY(0);
    transform-origin: 0% 50%;
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  90% {
    transform: translateX(-100%) translateZ(-260px) rotateY(-180deg);
    transform-origin: 100% 0%;
    z-index: -1;
  }
  100% {
    opacity: 0;
  }
}
/**
 * Contact Info & Form
 * ----------------------------------------------------------------------------
 */
@layer component {
  .contact-info {
    --contact-info-fg: var(--color-surface-neutral-fg);
    --contact-info-link-color: var(--text-interactive);
    --contact-info-social-icon-size: 1.5rem;
    --contact-info-gap: var(--spacing-025);
    color: var(--contact-info-fg);
  }
  .contact-address {
    display: flex;
    flex-direction: column;
    font-style: normal;
    gap: var(--contact-info-gap);
    margin-block-end: var(--spacing-200);
  }
  .contact-name {
    font-weight: var(--font-weight-bold);
  }
  .contact-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-075);
    list-style: none;
    margin: 0 0 var(--spacing-200);
    padding: 0;
  }
  .contact-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-075);
    color: var(--contact-info-link-color);
    text-decoration: none;
  }
  .contact-link:hover, .contact-link:focus {
    color: var(--text-interactive-hover);
  }
  .contact-link-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .contact-link-icon svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
  }
  .contact-action {
    margin-block-end: var(--spacing-300);
  }
  .contact-social-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-150) var(--spacing-200);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .contact-social-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-075);
    color: var(--contact-info-link-color);
    text-decoration: none;
  }
  .contact-social-link:hover, .contact-social-link:focus {
    color: var(--text-interactive-hover);
  }
  .contact-social-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .contact-social-icon svg {
    width: var(--contact-info-social-icon-size);
    height: var(--contact-info-social-icon-size);
    fill: currentColor;
  }
  .contact-social-label {
    font-size: var(--font-size-300);
  }
  .footer .contact-info {
    --contact-info-fg: var(--footer-fg);
    --contact-info-link-color: var(--footer-link-color);
  }
  .footer .contact-info .contact-action .btn {
    --btn-background-color: transparent;
    --btn-background-hover-color: var(--color-neutral-100);
    --btn-text-color: var(--color-neutral-100);
    --btn-text-hover-color: var(--color-surface-primary-bg);
    --btn-border-color: var(--color-neutral-300);
    --btn-border-hover-color: var(--color-neutral-100);
  }
  .contact-page-layout {
    display: grid;
    gap: var(--spacing-400);
  }
  @media screen and (width >= 45em) {
    .contact-page-layout {
      grid-template-columns: 1fr 2fr;
      align-items: start;
    }
  }
  .contact-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-200);
  }
  .contact-form__submit {
    margin-block-start: var(--spacing-100);
  }
}
/**
 * Language Switcher - Joomla mod_languages
 * ----------------------------------------------------------------------------
 */
@layer component {
  .lang-switcher, [class*=" lang-switcher-"], [class^=lang-switcher-], [class$=" lang-switcher-"] {
    --lang-switcher-item-active-bg: var(--color-neutral-100);
    --lang-switcher-item-active-fg: var(--color-neutral-900);
    --lang-switcher-item-fg: var(--color-primary-500);
    --lang-switcher-item-hover-bg: var(--color-neutral-100);
    --lang-switcher-list-bg: var(--color-neutral-000);
    --lang-switcher-list-border: var(--color-neutral-200);
    --lang-switcher-trigger-bg: var(--color-primary-500);
    --lang-switcher-trigger-fg: var(--color-neutral-000);
    --lang-switcher-trigger-hover-bg: var(--color-primary-700);
  }
}
@layer component {
  .mod-languages {
    position: relative;
    display: inline-block;
  }
  .mod-languages__details {
    position: relative;
  }
  .mod-languages__details > summary {
    list-style: none;
  }
  .mod-languages__details > summary::-webkit-details-marker {
    display: none;
  }
  .mod-languages__trigger {
    background-color: var(--lang-switcher-trigger-bg);
    color: var(--lang-switcher-trigger-fg);
    padding: var(--spacing-025) var(--spacing-075);
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    min-width: 2.5rem;
    text-align: center;
  }
  .mod-languages__trigger:hover {
    background-color: var(--lang-switcher-trigger-hover-bg);
  }
  .mod-languages__trigger:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
  }
  [open] > .mod-languages__trigger {
    background-color: var(--lang-switcher-trigger-hover-bg);
  }
  .mod-languages__list {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    z-index: 100;
    min-width: 12rem;
    font-size: var(--font-size-200);
    background-color: var(--lang-switcher-list-bg);
    border: 1px solid var(--lang-switcher-list-border);
    list-style: none;
    padding-inline-start: 0;
    margin-block-start: var(--spacing-025);
    box-shadow: var(--shadow-2);
  }
  .mod-languages__item--active {
    background-color: var(--lang-switcher-item-active-bg);
  }
  .mod-languages__item--active a {
    color: var(--lang-switcher-item-active-fg);
  }
  .mod-languages__item a {
    display: block;
    padding: var(--spacing-050) var(--spacing-075);
    color: var(--lang-switcher-item-fg);
    text-decoration: none;
  }
  .mod-languages__item a:hover {
    background-color: var(--lang-switcher-item-hover-bg);
  }
  .mod-languages__item a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: calc(var(--focus-outline-offset) * -1);
  }
}
/**
 * Layouts
 * ==========================================================================
 */
/**
 * Cluster
 * ----------------------------------------------------------------------------
 */
/**
 * Container
 * ----------------------------------------------------------------------------
 */
@layer layout {
  .container {
    --padding-inline: var(--content-padding-inline-default, var(--spacing-4));
    --container-content-max-width: var(--content-max-width, 140ch);
    width: min(100% - var(--padding-inline), var(--container-content-max-width, 60ch));
    margin-inline: auto;
  }
  @media screen and (width >= 30em) {
    .container {
      --padding-inline: var(--content-padding-inline-breakpoint-sm, var(--spacing-10));
    }
  }
  @media screen and (width >= 45em) {
    .container {
      --padding-inline: var(--content-padding-inline-breakpoint-md, var(--spacing-12));
    }
  }
  @media screen and (width >= 65em) {
    .container {
      --padding-inline: var(--content-padding-inline-breakpoint-lg, var(--spacing-14));
    }
  }
  .container.full-width {
    width: 100vw;
    position: relative;
    display: block;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}
/**
 * Content Grid
 * ----------------------------------------------------------------------------
 */
@layer layout {
  .content-grid, .full-width, .full-width-grid {
    --padding-inline: var(--content-padding-inline-default, var(--spacing-075));
    --grid-content-max-width: var(--content-max-width, 140ch);
    --breakout-max-width: 185ch;
    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
    display: grid;
    grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - var(--padding-inline) * 2, var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
  }
  .content-grid > :where(:not(.breakout, .full-width-grid)), .full-width > :where(:not(.breakout, .full-width-grid)), .full-width-grid > :where(:not(.breakout, .full-width-grid)) {
    grid-column: content;
  }
  @media screen and (width >= 30em) {
    .content-grid, .full-width, .full-width-grid {
      --padding-inline: var(--content-padding-inline-breakpoint-sm, var(--spacing-300));
    }
  }
  @media screen and (width >= 45em) {
    .content-grid, .full-width, .full-width-grid {
      --padding-inline: var(--content-padding-inline-breakpoint-md, var(--spacing-500));
    }
  }
  @media screen and (width >= 65em) {
    .content-grid, .full-width, .full-width-grid {
      --padding-inline: var(--content-padding-inline-breakpoint-lg, var(--spacing-600));
    }
  }
  .content-grid {
    margin-top: calc(var(--spacing-025) / 2);
  }
  .breakout-grid {
    grid-column: breakout;
  }
  .full-width-grid {
    grid-column: full-width;
  }
  .full-width-grid > figure {
    grid-column: full-width;
  }
  .full-width-grid > figure > img {
    width: 100%;
    object-fit: cover;
    max-height: calc(var(--spacing-800) * 2);
  }
  .full-width {
    grid-column: full-width;
    display: block;
  }
  /* .content-grid > :not(.breakout, .full-width)
  .full-width > :not(.breakout, .full-width) {
    grid-column: content;
  }

  .content-grid > .breakout {
    grid-column: breakout;
  }

  .content-grid > .full-width {
    grid-column: full-width;
  } */
}
/**
 * Even Column
 * ----------------------------------------------------------------------------
 */
/**
 * Flexbox Grid
 * ----------------------------------------------------------------------------
 */
@layer layout {
  .flexbox-grid {
    --min: 10ch;
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap, --spacing-6);
  }
  .flexbox-grid > * {
    flex: 1 1 var(--min);
  }
}
/**
 * Grid Auto Fit
 * ----------------------------------------------------------------------------
 */
@layer layout {
  .grid-auto-fit {
    display: grid;
    gap: var(--grid-gap, --spacing-6);
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  }
}
/**
 * Pile
 * ----------------------------------------------------------------------------
 */
@layer layout {
  .pile {
    display: grid;
    grid-template-areas: "pile";
    place-content: center;
  }
  .pile > * {
    grid-area: pile;
  }
}
/**
 * Footer
 * ----------------------------------------------------------------------------
 */
@layer layout {
  footer {
    margin-top: auto;
    justify-items: center;
    display: grid;
    gap: var(--grid-gap);
  }
  @media screen and (width >= 65em) {
    footer {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }
  }
  @media screen and (width >= 65em) {
    footer .logo {
      flex-basis: fit-content;
    }
  }
}
@layer component {
  footer .avatar-list {
    width: fit-content;
    margin-inline: auto;
  }
  @media screen and (width >= 65em) {
    footer .avatar-list {
      margin-inline: 0;
    }
  }
}
/**
 * Joomla
 * ========================================================================== */
/**
 * Template positions
 * ----------------------------------------------------------------------------
 */
@layer jui {
  #position-banner {
    margin-bottom: 45%;
  }
  @media screen and (width >= 65em) {
    #position-banner {
      margin-bottom: 10%;
    }
  }
  @media screen and (width >= 87.5em) {
    #position-banner {
      margin-bottom: 15%;
    }
  }
  #position-banner .section-card {
    margin-bottom: 0;
  }
}
@layer jui {
  #position-main-top .flexbox-grid {
    --min: 370px;
  }
}
/**
 * UI Components
 * ----------------------------------------------------------------------------
 */
@layer jui {
  fieldset:has(> joomla-tab) {
    border: none;
    padding: 0;
    margin: 0;
    margin-block: var(--spacing-150) var(--spacing-250);
  }
}
@layer jui {
  .js-tiny-toggler-button {
    --btn-font-size: calc(var(--font-size-400) * .8);
    --btn-padding: calc(var(--spacing-075) * .8);
    margin-inline-start: auto;
  }
}
.list-unstyled {
  margin-block: var(--spacing-100);
}
.list-unstyled li:not(:first-child) {
  margin-top: var(--spacing-050);
}

/**
 * Utilities
 * ============================================================================
 */
/**
 * Helper classes general
 * ----------------------------------------------------------------------------
 */
@layer utilities {
  /**
  * Clear inner floats
  */
  .clearfix::after {
    clear: both;
    content: "";
    display: table;
  }
  /**
  * Hide text while making it readable for screen readers
  */
  .hide-text {
    overflow: hidden;
    padding: 0; /* 1 */
    text-indent: 101%;
    white-space: nowrap;
  }
  /**
  * Hide element while making it readable for screen readers
  */
  .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  /**
  * Helpers for aligning text
  */
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-start {
    text-align: start;
  }
  /**
  * Font size helpers
  * Use these classes to quickly adjust font sizes.
  */
  .small {
    font-size: var(--font-size-200);
  }
  .large {
    font-size: var(--font-size-800);
  }
  /**
  * Font family helpers
  */
  .ff-body {
    font-family: var(--body-font-family, var(--font-family-base));
  }
  .ff-heading {
    font-family: var(--font-family-heading);
  }
  .ff-code {
    font-family: var(--font-family-mono);
  }
  /**
  * Text transformation helpers
  */
  .uppercase {
    text-transform: uppercase;
  }
  .transform-none {
    text-transform: none;
  }
  /**
  * Applies a fully rounded (circular) border radius to an element.
  */
  .rounded {
    border-radius: 50%;
  }
  /*
  * Unstyled lists
  * Use this class to remove default list styles.
  */
  :is(ul, ol).unstyled, .list-unstyled {
    list-style: none;
    padding-left: 0;
    padding-inline-start: 0;
  }
  .center {
    display: grid;
    place-content: center;
  }
  .text-contour {
    /* Use color-mix for better Safari support */
    --text-contour-font-size: calc(var(--font-size-900) * 1.05);
    -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 0.035em;
    -webkit-text-stroke-color: currentColor;
    letter-spacing: 0.125em;
    font-size: var(--text-contour-font-size);
  }
  .underline-yellow {
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-decoration-thickness: auto;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 0.1em;
    text-decoration-color: var(--color-yellow-400);
  }
}
/**
 * Surface
 * ----------------------------------------------------------------------------
 */
@layer utilities {
  .surface-primary {
    background-color: var(--color-surface-primary-bg);
    color: var(--color-surface-primary-fg);
  }
  .surface-primary :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    --heading-color: var(--color-surface-primary-fg);
  }
  .surface-secondary {
    background-color: var(--color-surface-secondary-bg);
    color: var(--color-surface-secondary-fg);
  }
  .surface-secondary :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    --heading-color: var(--color-surface-secondary-fg);
  }
  .surface-neutral {
    background-color: var(--color-surface-neutral-bg);
    color: var(--color-surface-neutral-fg);
  }
  .surface-yellow {
    background-color: var(--color-surface-yellow-bg);
    color: var(--color-surface-yellow-fg);
  }
  .surface-yellow :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    --heading-color: var(--color-surface-yellow-fg);
  }
  .surface-blue {
    background-color: var(--color-surface-blue-bg);
    color: var(--color-surface-blue-fg);
  }
  .surface-blue :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    --heading-color: var(--color-surface-blue-fg);
  }
  .surface-green {
    background-color: var(--color-surface-green-bg);
    color: var(--color-surface-green-fg);
  }
  .surface-green :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    --heading-color: var(--color-surface-green-fg);
  }
  .surface-red {
    background-color: var(--color-surface-red-bg);
    color: var(--color-surface-red-fg);
  }
  .surface-red :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    --heading-color: var(--color-surface-red-fg);
  }
  .surface-cyan {
    background-color: var(--color-surface-cyan-bg);
    color: var(--color-surface-cyan-fg);
  }
  .surface-cyan :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    --heading-color: var(--color-surface-cyan-fg);
  }
  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, span, p)[class*=surface-] {
    display: inline-block;
    padding-inline: 0.75rem;
  }
  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, span, p)[class*=bg-] {
    display: inline-block;
    padding-inline: 0.75rem;
  }
}
/**
 * Font
 * ----------------------------------------------------------------------------
 */
@layer utilities {
  .font-family-base {
    font-family: var(--font-family-base);
  }
  .font-family-code {
    font-family: var(--font-family-code);
  }
  .font-family-expressive {
    font-family: var(--font-family-expressive);
  }
  .font-family-heading {
    font-family: var(--font-family-heading);
  }
  .font-family-mono {
    font-family: var(--font-family-mono);
  }
  .font-family-sans {
    font-family: var(--font-family-sans);
  }
  .font-size-200 {
    font-size: var(--font-size-200);
  }
  .font-size-300 {
    font-size: var(--font-size-300);
  }
  .font-size-400 {
    font-size: var(--font-size-400);
  }
  .font-size-500 {
    font-size: var(--font-size-500);
  }
  .font-size-600 {
    font-size: var(--font-size-600);
  }
  .font-size-700 {
    font-size: var(--font-size-700);
  }
  .font-size-800 {
    font-size: var(--font-size-800);
  }
  .font-size-900 {
    font-size: var(--font-size-900);
  }
  .font-weight-bold {
    font-weight: var(--font-weight-bold);
  }
  .font-weight-light {
    font-weight: var(--font-weight-light);
  }
  .font-weight-medium {
    font-weight: var(--font-weight-medium);
  }
  .font-weight-regular {
    font-weight: var(--font-weight-regular);
  }
}
/**
 * Margin
 * ----------------------------------------------------------------------------
 */
@layer utilities {
  .m-none, .m-0 {
    margin: var(--spacing-000);
  }
  .m-xs, .m-1 {
    margin: var(--spacing-025);
  }
  .m-s, .m-2 {
    margin: var(--spacing-050);
  }
  .m-sm, .m-3 {
    margin: var(--spacing-100);
  }
  .m-m, .m-4 {
    margin: var(--spacing-150);
  }
  .m-ml {
    margin: var(--spacing-200);
  }
  .m-l {
    margin: var(--spacing-250);
  }
  .m-xl, .m-5 {
    margin: var(--spacing-300);
  }
  .m-xxl {
    margin: var(--spacing-500);
  }
  .mx-none, .mx-0 {
    margin-left: var(--spacing-000);
    margin-right: var(--spacing-000);
  }
  .my-none, .my-0 {
    margin-bottom: var(--spacing-000);
    margin-top: var(--spacing-000);
  }
  .mx-xs, .mx-1 {
    margin-left: var(--spacing-025);
    margin-right: var(--spacing-025);
  }
  .my-xs, .my-1 {
    margin-bottom: var(--spacing-025);
    margin-top: var(--spacing-025);
  }
  .mx-s, .mx-2 {
    margin-left: var(--spacing-050);
    margin-right: var(--spacing-050);
  }
  .my-s, .my-2 {
    margin-bottom: var(--spacing-050);
    margin-top: var(--spacing-050);
  }
  .mx-sm, .mx-3 {
    margin-left: var(--spacing-100);
    margin-right: var(--spacing-100);
  }
  .my-sm, .my-3 {
    margin-bottom: var(--spacing-100);
    margin-top: var(--spacing-100);
  }
  .mx-m, .mx-4 {
    margin-left: var(--spacing-150);
    margin-right: var(--spacing-150);
  }
  .my-m, .my-4 {
    margin-bottom: var(--spacing-150);
    margin-top: var(--spacing-150);
  }
  .mx-ml {
    margin-left: var(--spacing-200);
    margin-right: var(--spacing-200);
  }
  .my-ml {
    margin-bottom: var(--spacing-200);
    margin-top: var(--spacing-200);
  }
  .mx-l {
    margin-left: var(--spacing-250);
    margin-right: var(--spacing-250);
  }
  .my-l {
    margin-bottom: var(--spacing-250);
    margin-top: var(--spacing-250);
  }
  .mx-xl, .mx-5 {
    margin-left: var(--spacing-300);
    margin-right: var(--spacing-300);
  }
  .my-xl, .my-5 {
    margin-bottom: var(--spacing-300);
    margin-top: var(--spacing-300);
  }
  .mx-xxl {
    margin-left: var(--spacing-500);
    margin-right: var(--spacing-500);
  }
  .my-xxl {
    margin-bottom: var(--spacing-500);
    margin-top: var(--spacing-500);
  }
  .mt-none, .mt-0 {
    margin-top: var(--spacing-000);
  }
  .mt-xs, .mt-1 {
    margin-top: var(--spacing-025);
  }
  .mt-s, .mt-2 {
    margin-top: var(--spacing-050);
  }
  .mt-sm, .mt-3 {
    margin-top: var(--spacing-100);
  }
  .mt-m, .mt-4 {
    margin-top: var(--spacing-150);
  }
  .mt-ml {
    margin-top: var(--spacing-200);
  }
  .mt-l {
    margin-top: var(--spacing-250);
  }
  .mt-xl, .mt-5 {
    margin-top: var(--spacing-300);
  }
  .mt-xxl {
    margin-top: var(--spacing-500);
  }
  .mb-none, .mb-0 {
    margin-bottom: var(--spacing-000);
  }
  .mb-xs, .mb-1 {
    margin-bottom: var(--spacing-025);
  }
  .mb-s, .mb-2 {
    margin-bottom: var(--spacing-050);
  }
  .mb-sm, .mb-3 {
    margin-bottom: var(--spacing-100);
  }
  .mb-m, .mb-4 {
    margin-bottom: var(--spacing-150);
  }
  .mb-ml {
    margin-bottom: var(--spacing-200);
  }
  .mb-l {
    margin-bottom: var(--spacing-250);
  }
  .mb-xl, .mb-5 {
    margin-bottom: var(--spacing-300);
  }
  .mb-xxl {
    margin-bottom: var(--spacing-500);
  }
  .ms-none, .ms-0 {
    margin-inline-start: var(--spacing-000);
  }
  .me-none, .me-0 {
    margin-inline-end: var(--spacing-000);
  }
  .ms-xs, .ms-1 {
    margin-inline-start: var(--spacing-025);
  }
  .me-xs, .me-1 {
    margin-inline-end: var(--spacing-025);
  }
  .ms-s, .ms-2 {
    margin-inline-start: var(--spacing-050);
  }
  .me-s, .me-2 {
    margin-inline-end: var(--spacing-050);
  }
  .ms-sm, .ms-3 {
    margin-inline-start: var(--spacing-100);
  }
  .me-sm, .me-3 {
    margin-inline-end: var(--spacing-100);
  }
  .ms-m, .ms-4 {
    margin-inline-start: var(--spacing-150);
  }
  .me-m, .me-4 {
    margin-inline-end: var(--spacing-150);
  }
  .ms-ml {
    margin-inline-start: var(--spacing-200);
  }
  .me-ml {
    margin-inline-end: var(--spacing-200);
  }
  .ms-l {
    margin-inline-start: var(--spacing-250);
  }
  .me-l {
    margin-inline-end: var(--spacing-250);
  }
  .ms-xl, .ms-5 {
    margin-inline-start: var(--spacing-300);
  }
  .me-xl, .me-5 {
    margin-inline-end: var(--spacing-300);
  }
  .ms-xxl {
    margin-inline-start: var(--spacing-500);
  }
  .me-xxl {
    margin-inline-end: var(--spacing-500);
  }
}
/**
 * Padding
 * ----------------------------------------------------------------------------
 */
@layer utilities {
  .p-none, .p-0 {
    padding: var(--spacing-000);
  }
  .p-xs, .p-1 {
    padding: var(--spacing-025);
  }
  .p-s, .p-2 {
    padding: var(--spacing-050);
  }
  .p-sm, .p-3 {
    padding: var(--spacing-100);
  }
  .p-m, .p-4 {
    padding: var(--spacing-150);
  }
  .p-ml {
    padding: var(--spacing-200);
  }
  .p-l {
    padding: var(--spacing-250);
  }
  .p-xl, .p-5 {
    padding: var(--spacing-300);
  }
  .p-xxl {
    padding: var(--spacing-500);
  }
  .px-none, .px-0 {
    padding-left: var(--spacing-000);
    padding-right: var(--spacing-000);
  }
  .py-none, .py-0 {
    padding-bottom: var(--spacing-000);
    padding-top: var(--spacing-000);
  }
  .px-xs, .px-1 {
    padding-left: var(--spacing-025);
    padding-right: var(--spacing-025);
  }
  .py-xs, .py-1 {
    padding-bottom: var(--spacing-025);
    padding-top: var(--spacing-025);
  }
  .px-s, .px-2 {
    padding-left: var(--spacing-050);
    padding-right: var(--spacing-050);
  }
  .py-s, .py-2 {
    padding-bottom: var(--spacing-050);
    padding-top: var(--spacing-050);
  }
  .px-sm, .px-3 {
    padding-left: var(--spacing-100);
    padding-right: var(--spacing-100);
  }
  .py-sm, .py-3 {
    padding-bottom: var(--spacing-100);
    padding-top: var(--spacing-100);
  }
  .px-m, .px-4 {
    padding-left: var(--spacing-150);
    padding-right: var(--spacing-150);
  }
  .py-m, .py-4 {
    padding-bottom: var(--spacing-150);
    padding-top: var(--spacing-150);
  }
  .px-ml {
    padding-left: var(--spacing-200);
    padding-right: var(--spacing-200);
  }
  .py-ml {
    padding-bottom: var(--spacing-200);
    padding-top: var(--spacing-200);
  }
  .px-l {
    padding-left: var(--spacing-250);
    padding-right: var(--spacing-250);
  }
  .py-l {
    padding-bottom: var(--spacing-250);
    padding-top: var(--spacing-250);
  }
  .px-xl, .px-5 {
    padding-left: var(--spacing-300);
    padding-right: var(--spacing-300);
  }
  .py-xl, .py-5 {
    padding-bottom: var(--spacing-300);
    padding-top: var(--spacing-300);
  }
  .px-xxl {
    padding-left: var(--spacing-500);
    padding-right: var(--spacing-500);
  }
  .py-xxl {
    padding-bottom: var(--spacing-500);
    padding-top: var(--spacing-500);
  }
  .pt-none, .pt-0 {
    padding-top: var(--spacing-000);
  }
  .pt-xs, .pt-1 {
    padding-top: var(--spacing-025);
  }
  .pt-s, .pt-2 {
    padding-top: var(--spacing-050);
  }
  .pt-sm, .pt-3 {
    padding-top: var(--spacing-100);
  }
  .pt-m, .pt-4 {
    padding-top: var(--spacing-150);
  }
  .pt-ml {
    padding-top: var(--spacing-200);
  }
  .pt-l {
    padding-top: var(--spacing-250);
  }
  .pt-xl, .pt-5 {
    padding-top: var(--spacing-300);
  }
  .pt-xxl {
    padding-top: var(--spacing-500);
  }
  .pb-none, .pb-0 {
    padding-bottom: var(--spacing-000);
  }
  .pb-xs, .pb-1 {
    padding-bottom: var(--spacing-025);
  }
  .pb-s, .pb-2 {
    padding-bottom: var(--spacing-050);
  }
  .pb-sm, .pb-3 {
    padding-bottom: var(--spacing-100);
  }
  .pb-m, .pb-4 {
    padding-bottom: var(--spacing-150);
  }
  .pb-ml {
    padding-bottom: var(--spacing-200);
  }
  .pb-l {
    padding-bottom: var(--spacing-250);
  }
  .pb-xl, .pb-5 {
    padding-bottom: var(--spacing-300);
  }
  .pb-xxl {
    padding-bottom: var(--spacing-500);
  }
  .ps-none, .ps-0 {
    padding-inline-start: var(--spacing-000);
  }
  .pe-none, .pe-0 {
    padding-inline-end: var(--spacing-000);
  }
  .ps-xs, .ps-1 {
    padding-inline-start: var(--spacing-025);
  }
  .pe-xs, .pe-1 {
    padding-inline-end: var(--spacing-025);
  }
  .ps-s, .ps-2 {
    padding-inline-start: var(--spacing-050);
  }
  .pe-s, .pe-2 {
    padding-inline-end: var(--spacing-050);
  }
  .ps-sm, .ps-3 {
    padding-inline-start: var(--spacing-100);
  }
  .pe-sm, .pe-3 {
    padding-inline-end: var(--spacing-100);
  }
  .ps-m, .ps-4 {
    padding-inline-start: var(--spacing-150);
  }
  .pe-m, .pe-4 {
    padding-inline-end: var(--spacing-150);
  }
  .ps-ml {
    padding-inline-start: var(--spacing-200);
  }
  .pe-ml {
    padding-inline-end: var(--spacing-200);
  }
  .ps-l {
    padding-inline-start: var(--spacing-250);
  }
  .pe-l {
    padding-inline-end: var(--spacing-250);
  }
  .ps-xl, .ps-5 {
    padding-inline-start: var(--spacing-300);
  }
  .pe-xl, .pe-5 {
    padding-inline-end: var(--spacing-300);
  }
  .ps-xxl {
    padding-inline-start: var(--spacing-500);
  }
  .pe-xxl {
    padding-inline-end: var(--spacing-500);
  }
}
/**
 * Box Shadows
 * ----------------------------------------------------------------------------
 */
@layer utilities {
  .shadow-1 {
    box-shadow: var(--shadow-1);
  }
  .shadow-2 {
    box-shadow: var(--shadow-2);
  }
  .shadow-3 {
    box-shadow: var(--shadow-3);
  }
  .shadow-4 {
    box-shadow: var(--shadow-4);
  }
  .shadow-5 {
    box-shadow: var(--shadow-5);
  }
  .shadow-6 {
    box-shadow: var(--shadow-6);
  }
}
/**
 * Opacity
 * ----------------------------------------------------------------------------
 */
@layer utilities {
  .opacity-010 {
    opacity: var(--opacity-010);
  }
  .opacity-015 {
    opacity: var(--opacity-015);
  }
  .opacity-020 {
    opacity: var(--opacity-020);
  }
  .opacity-030 {
    opacity: var(--opacity-030);
  }
  .opacity-040 {
    opacity: var(--opacity-040);
  }
  .opacity-050 {
    opacity: var(--opacity-050);
  }
  .opacity-060 {
    opacity: var(--opacity-060);
  }
  .opacity-070 {
    opacity: var(--opacity-070);
  }
  .opacity-080 {
    opacity: var(--opacity-080);
  }
  .opacity-085 {
    opacity: var(--opacity-085);
  }
  .opacity-090 {
    opacity: var(--opacity-090);
  }
  .opacity-095 {
    opacity: var(--opacity-095);
  }
  .opacity-opaque {
    opacity: var(--opacity-opaque);
  }
  .opacity-transparent {
    opacity: var(--opacity-transparent);
  }
}
/**
 * Background
 * ----------------------------------------------------------------------------
 */
@layer utilities {
  .bg-accent-100 {
    background-color: var(--color-accent-100);
  }
  .bg-accent-200 {
    background-color: var(--color-accent-200);
  }
  .bg-accent-300 {
    background-color: var(--color-accent-300);
  }
  .bg-accent-400 {
    background-color: var(--color-accent-400);
  }
  .bg-accent-500 {
    background-color: var(--color-accent-500);
  }
  .bg-accent-600 {
    background-color: var(--color-accent-600);
  }
  .bg-accent-700 {
    background-color: var(--color-accent-700);
  }
  .bg-accent-800 {
    background-color: var(--color-accent-800);
  }
  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }
  .bg-cyan-500 {
    background-color: var(--color-cyan-500);
  }
  .bg-danger {
    background-color: var(--color-danger);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .bg-grey-500 {
    background-color: var(--color-grey-500);
  }
  .bg-neutral-000 {
    background-color: var(--color-neutral-000);
  }
  .bg-neutral-50 {
    background-color: var(--color-neutral-50);
  }
  .bg-neutral-100 {
    background-color: var(--color-neutral-100);
  }
  .bg-neutral-200 {
    background-color: var(--color-neutral-200);
  }
  .bg-neutral-300 {
    background-color: var(--color-neutral-300);
  }
  .bg-neutral-400 {
    background-color: var(--color-neutral-400);
  }
  .bg-neutral-500 {
    background-color: var(--color-neutral-500);
  }
  .bg-neutral-600 {
    background-color: var(--color-neutral-600);
  }
  .bg-neutral-700 {
    background-color: var(--color-neutral-700);
  }
  .bg-neutral-800 {
    background-color: var(--color-neutral-800);
  }
  .bg-neutral-900 {
    background-color: var(--color-neutral-900);
  }
  .bg-neutral-950 {
    background-color: var(--color-neutral-950);
  }
  .bg-neutral-1000 {
    background-color: var(--color-neutral-1000);
  }
  .bg-orange-500 {
    background-color: var(--color-orange-500);
  }
  .bg-primary-100 {
    background-color: var(--color-primary-100);
  }
  .bg-primary-200 {
    background-color: var(--color-primary-200);
  }
  .bg-primary-300 {
    background-color: var(--color-primary-300);
  }
  .bg-primary-400 {
    background-color: var(--color-primary-400);
  }
  .bg-primary-500 {
    background-color: var(--color-primary-500);
  }
  .bg-primary-600 {
    background-color: var(--color-primary-600);
  }
  .bg-primary-700 {
    background-color: var(--color-primary-700);
  }
  .bg-primary-800 {
    background-color: var(--color-primary-800);
  }
  .bg-primary-900 {
    background-color: var(--color-primary-900);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-secondary-100 {
    background-color: var(--color-secondary-100);
  }
  .bg-secondary-200 {
    background-color: var(--color-secondary-200);
  }
  .bg-secondary-300 {
    background-color: var(--color-secondary-300);
  }
  .bg-secondary-400 {
    background-color: var(--color-secondary-400);
  }
  .bg-secondary-500 {
    background-color: var(--color-secondary-500);
  }
  .bg-secondary-600 {
    background-color: var(--color-secondary-600);
  }
  .bg-secondary-700 {
    background-color: var(--color-secondary-700);
  }
  .bg-secondary-800 {
    background-color: var(--color-secondary-800);
  }
  .bg-secondary-900 {
    background-color: var(--color-secondary-900);
  }
  .bg-success {
    background-color: var(--color-success);
  }
  .bg-surface-cyan-bg {
    background-color: var(--color-surface-cyan-bg);
  }
  .bg-surface-green-bg {
    background-color: var(--color-surface-green-bg);
  }
  .bg-surface-highlight-bg {
    background-color: var(--color-surface-highlight-bg);
  }
  .bg-surface-neutral-bg {
    background-color: var(--color-surface-neutral-bg);
  }
  .bg-surface-orange-bg {
    background-color: var(--color-surface-orange-bg);
  }
  .bg-surface-primary-bg {
    background-color: var(--color-surface-primary-bg);
  }
  .bg-surface-red-bg {
    background-color: var(--color-surface-red-bg);
  }
  .bg-surface-secondary-bg {
    background-color: var(--color-surface-secondary-bg);
  }
  .bg-surface-yellow-bg {
    background-color: var(--color-surface-yellow-bg);
  }
  .bg-warning {
    background-color: var(--color-warning);
  }
  .bg-yellow-500 {
    background-color: var(--color-yellow-500);
  }
}
/**
 * Foreground / Text
 * ----------------------------------------------------------------------------
 */
@layer utilities {
  .text-accent-100 {
    color: var(--color-accent-100);
  }
  .text-accent-200 {
    color: var(--color-accent-200);
  }
  .text-accent-300 {
    color: var(--color-accent-300);
  }
  .text-accent-400 {
    color: var(--color-accent-400);
  }
  .text-accent-500 {
    color: var(--color-accent-500);
  }
  .text-accent-600 {
    color: var(--color-accent-600);
  }
  .text-accent-700 {
    color: var(--color-accent-700);
  }
  .text-accent-800 {
    color: var(--color-accent-800);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-cyan-500 {
    color: var(--color-cyan-500);
  }
  .text-danger {
    color: var(--color-danger);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-grey-500 {
    color: var(--color-grey-500);
  }
  .text-neutral-000 {
    color: var(--color-neutral-000);
  }
  .text-neutral-50 {
    color: var(--color-neutral-50);
  }
  .text-neutral-100 {
    color: var(--color-neutral-100);
  }
  .text-neutral-200 {
    color: var(--color-neutral-200);
  }
  .text-neutral-300 {
    color: var(--color-neutral-300);
  }
  .text-neutral-400 {
    color: var(--color-neutral-400);
  }
  .text-neutral-500 {
    color: var(--color-neutral-500);
  }
  .text-neutral-600 {
    color: var(--color-neutral-600);
  }
  .text-neutral-700 {
    color: var(--color-neutral-700);
  }
  .text-neutral-800 {
    color: var(--color-neutral-800);
  }
  .text-neutral-900 {
    color: var(--color-neutral-900);
  }
  .text-neutral-950 {
    color: var(--color-neutral-950);
  }
  .text-neutral-1000 {
    color: var(--color-neutral-1000);
  }
  .text-orange-500 {
    color: var(--color-orange-500);
  }
  .text-primary-100 {
    color: var(--color-primary-100);
  }
  .text-primary-200 {
    color: var(--color-primary-200);
  }
  .text-primary-300 {
    color: var(--color-primary-300);
  }
  .text-primary-400 {
    color: var(--color-primary-400);
  }
  .text-primary-500 {
    color: var(--color-primary-500);
  }
  .text-primary-600 {
    color: var(--color-primary-600);
  }
  .text-primary-700 {
    color: var(--color-primary-700);
  }
  .text-primary-800 {
    color: var(--color-primary-800);
  }
  .text-primary-900 {
    color: var(--color-primary-900);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-secondary-100 {
    color: var(--color-secondary-100);
  }
  .text-secondary-200 {
    color: var(--color-secondary-200);
  }
  .text-secondary-300 {
    color: var(--color-secondary-300);
  }
  .text-secondary-400 {
    color: var(--color-secondary-400);
  }
  .text-secondary-500 {
    color: var(--color-secondary-500);
  }
  .text-secondary-600 {
    color: var(--color-secondary-600);
  }
  .text-secondary-700 {
    color: var(--color-secondary-700);
  }
  .text-secondary-800 {
    color: var(--color-secondary-800);
  }
  .text-secondary-900 {
    color: var(--color-secondary-900);
  }
  .text-success {
    color: var(--color-success);
  }
  .text-surface-cyan-fg {
    color: var(--color-surface-cyan-fg);
  }
  .text-surface-green-fg {
    color: var(--color-surface-green-fg);
  }
  .text-surface-highlight-fg {
    color: var(--color-surface-highlight-fg);
  }
  .text-surface-neutral-fg {
    color: var(--color-surface-neutral-fg);
  }
  .text-surface-orange-fg {
    color: var(--color-surface-orange-fg);
  }
  .text-surface-primary-fg {
    color: var(--color-surface-primary-fg);
  }
  .text-surface-red-fg {
    color: var(--color-surface-red-fg);
  }
  .text-surface-secondary-fg {
    color: var(--color-surface-secondary-fg);
  }
  .text-surface-yellow-fg {
    color: var(--color-surface-yellow-fg);
  }
  .text-warning {
    color: var(--color-warning);
  }
  .text-yellow-500 {
    color: var(--color-yellow-500);
  }
}

/*# sourceMappingURL=template.css.map */