@charset "UTF-8";
/**
 * @package     JCS.Template
 * @subpackage  tpl_jcrafts
 *
 * @author      Martina Scholz, Benjamin Trenkle <support@jcrafts.dev>
 *
 * @copyright   (C) 2024 - 2025, JCrafts - Martina Scholz, Benjamin Trenkle <https://jcrafts.dev>
 * @license     GNU General Public License version 3 or later; see LICENSE
 */
/**
 * 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 component {
  .error-page {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }
  .error-page > header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--spacing-150) var(--spacing-300);
    flex-shrink: 0;
  }
  .error-page > header .brand-logo img,
  .error-page > header .brand-logo svg {
    height: 3.5rem;
    width: auto;
  }
  .error-page > header .brand-logo span {
    font-size: var(--font-size-300);
  }
  .error-page > main {
    flex: 1;
  }
  .error-hero {
    --error-backdrop-size: clamp(8rem, min(45svh, 43vw), 44rem);
    --error-backdrop-opacity: 0.5;
    grid-column: full-width;
    overflow-x: clip;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block-end: var(--spacing-500);
    text-align: center;
    background-color: var(--background-color);
  }
  .error-hero ul {
    text-align: initial;
    display: inline-block;
    width: max-content;
    margin-inline: auto;
  }
  .error-backdrop {
    font-family: var(--font-family-heading);
    font-size: var(--error-backdrop-size);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-primary-500);
    opacity: var(--error-backdrop-opacity);
    user-select: none;
    pointer-events: none;
    letter-spacing: -0.05em;
  }
  .error-content {
    position: relative;
    z-index: 1;
    width: min(70ch, 92%);
    border-top: 3px solid var(--color-accent-500);
    animation: error-fade-in var(--duration-slower) var(--cubic-bezier-easeOutCubic) both;
  }
  .error-content > a {
    align-self: center;
  }
  @keyframes error-fade-in {
    from {
      opacity: 0;
      translate: 0 1.5rem;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
  .error-debug {
    margin-block-start: var(--spacing-400);
  }
  .error-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: var(--spacing-300);
    padding-block: var(--spacing-150);
    font-size: var(--font-size-100);
  }
  .error-footer a {
    color: color-mix(in srgb, currentColor 60%, transparent);
    text-decoration: none;
  }
  .error-footer a:hover {
    color: currentColor;
  }
}

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