/*! 
 * FrontAlign v1.0.3
 * (c) Eyruz Badalzada
 * Released under the MIT License
 * https://www.frontalign.dev
 */

@charset "utf-8";

@layer theme , base , components, utilities;

@layer theme {
  :root {
    --blue-100: oklch(0.96 0.017 239);
    --blue-200: oklch(0.91 0.037 239);
    --blue-300: oklch(0.84 0.068 239);
    --blue-400: oklch(0.75 0.123 239);
    --blue-500: oklch(0.66 0.134 239);
    --blue-600: oklch(0.57 0.109 239);
    --blue-700: oklch(0.48 0.092 239);
    --blue-800: oklch(0.39 0.075 239);
    --blue-900: oklch(0.31 0.059 239);
    --purple-100: oklch(0.96 0.015 272);
    --purple-200: oklch(0.91 0.033 272);
    --purple-300: oklch(0.84 0.06 272);
    --purple-400: oklch(0.75 0.109 272);
    --purple-500: oklch(0.66 0.162 272);
    --purple-600: oklch(0.57 0.201 272);
    --purple-700: oklch(0.48 0.251 272);
    --purple-800: oklch(0.39 0.214 272);
    --purple-900: oklch(0.31 0.17 272);
    --indigo-100: oklch(0.96 0.015 257);
    --indigo-200: oklch(0.91 0.033 257);
    --indigo-300: oklch(0.84 0.061 257);
    --indigo-400: oklch(0.75 0.11 257);
    --indigo-500: oklch(0.66 0.164 257);
    --indigo-600: oklch(0.57 0.172 257);
    --indigo-700: oklch(0.48 0.145 257);
    --indigo-800: oklch(0.39 0.118 257);
    --indigo-900: oklch(0.31 0.094 257);
    --teal-100: oklch(0.96 0.017 172);
    --teal-200: oklch(0.91 0.037 172);
    --teal-300: oklch(0.84 0.068 172);
    --teal-400: oklch(0.75 0.124 172);
    --teal-500: oklch(0.66 0.115 172);
    --teal-600: oklch(0.57 0.094 172);
    --teal-700: oklch(0.48 0.079 172);
    --teal-800: oklch(0.39 0.064 172);
    --teal-900: oklch(0.31 0.051 172);
    --green-100: oklch(0.96 0.028 140);
    --green-200: oklch(0.91 0.062 140);
    --green-300: oklch(0.84 0.118 140);
    --green-400: oklch(0.75 0.205 140);
    --green-500: oklch(0.66 0.195 140);
    --green-600: oklch(0.57 0.162 140);
    --green-700: oklch(0.48 0.132 140);
    --green-800: oklch(0.39 0.106 140);
    --green-900: oklch(0.31 0.085 140);
    --yellow-100: oklch(0.96 0.02 66);
    --yellow-200: oklch(0.91 0.043 66);
    --yellow-300: oklch(0.84 0.078 66);
    --yellow-400: oklch(0.75 0.142 66);
    --yellow-500: oklch(0.66 0.132 66);
    --yellow-600: oklch(0.57 0.108 66);
    --yellow-700: oklch(0.48 0.091 66);
    --yellow-800: oklch(0.39 0.074 66);
    --yellow-900: oklch(0.31 0.059 66);
    --orange-100: oklch(0.96 0.018 45);
    --orange-200: oklch(0.91 0.043 45);
    --orange-300: oklch(0.84 0.081 45);
    --orange-400: oklch(0.75 0.145 45);
    --orange-500: oklch(0.66 0.195 45);
    --orange-600: oklch(0.57 0.175 45);
    --orange-700: oklch(0.48 0.145 45);
    --orange-800: oklch(0.39 0.115 45);
    --orange-900: oklch(0.31 0.092 45);
    --red-100: oklch(0.96 0.019 20);
    --red-200: oklch(0.91 0.041 20);
    --red-300: oklch(0.84 0.074 20);
    --red-400: oklch(0.75 0.135 20);
    --red-500: oklch(0.66 0.217 20);
    --red-600: oklch(0.57 0.195 20);
    --red-700: oklch(0.48 0.164 20);
    --red-800: oklch(0.39 0.133 20);
    --red-900: oklch(0.31 0.106 20);
    --pink-100: oklch(0.96 0.027 334);
    --pink-200: oklch(0.91 0.058 334);
    --pink-300: oklch(0.84 0.107 334);
    --pink-400: oklch(0.75 0.194 334);
    --pink-500: oklch(0.66 0.265 334);
    --pink-600: oklch(0.57 0.217 334);
    --pink-700: oklch(0.48 0.182 334);
    --pink-800: oklch(0.39 0.148 334);
    --pink-900: oklch(0.31 0.118 334);
    --slate-100: oklch(0.96 0.006 250);
    --slate-200: oklch(0.91 0.01 250);
    --slate-300: oklch(0.84 0.016 250);
    --slate-400: oklch(0.75 0.028 250);
    --slate-500: oklch(0.66 0.04 250);
    --slate-600: oklch(0.57 0.034 250);
    --slate-700: oklch(0.48 0.028 250);
    --slate-800: oklch(0.39 0.02 250);
    --slate-900: oklch(0.31 0.014 250);
    --primary: var(--blue-600);
    --primary-contrast: oklch(0.985 0 0);
    --danger: var(--red-600);
    --danger-contrast: oklch(0.985 0 0);
    --success: var(--green-600);
    --success-contrast: oklch(0.985 0 0);
    --info: var(--teal-600);
    --info-contrast: oklch(0.985 0 0);
    --warning: var(--yellow-400);
    --warning-contrast: oklch(0.145 0 0);
    --muted: var(--slate-500);
    --white: oklch(1 0 0);
    --light: oklch(0.961 0 0);
    --dark: oklch(0.2 0.01 260);
    --accent: oklch(
      from var(--primary) min(calc(l + 0.08), 0.88) calc(c * 0.9) h
    );
    --accent-contrast: var(--white);
    --link: var(--primary);
    --link-hover: oklch(from var(--primary) calc(l - 0.06) calc(c + 0.04) h);
    --link-focus-ring: oklch(from var(--primary) 0.78 0.14 h / 0.4);
    --selection: oklch(from var(--primary) l c h / 0.25);
    --selection-text: var(--body-text);
    --body: oklch(1 0 0);
    --body-text: oklch(0.145 0 0);
    --surface: oklch(0.97 0 0);
    --surface-raised: oklch(0.94 0 0);
    --border: oklch(0.922 0 0);
    --font:
      -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
      "Noto Sans", sans-serif;
    --font-monospace:
      Monaco, Consolas, "Courier New", SFMono-Regular, Menlo, "Liberation Mono",
      monospace;
    --transition-properties:
      color, background-color, border-color, text-decoration-color, fill,
      stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-speed: 200ms;
    --carousel-duration: 350ms;
    --navbar-height: 3.5rem;
    --navbar-padding-x: 1rem;
    --navbar-padding-y: 0.5rem;
    --form-control: oklch(1 0 0);
    --form-control-text: oklch(0.2 0.01 260);
    --form-control-border: oklch(0.84 0.01 260);
    --form-disabled: oklch(0.961 0 0);
    --form-disabled-text: oklch(0.82 0.01 260);
    --input-slot-start-width: 2.5rem;
    --input-slot-end-width: 2.5rem;
    --btn-xs-py: 0.25rem;
    --btn-xs-px: 0.5rem;
    --btn-xs-font: 0.75rem;
    --btn-sm-py: 0.375rem;
    --btn-sm-px: 0.75rem;
    --btn-sm-font: 0.875rem;
    --btn-md-py: 0.5rem;
    --btn-md-px: 1rem;
    --btn-md-font: 1rem;
    --btn-lg-py: 0.75rem;
    --btn-lg-px: 1.25rem;
    --btn-lg-font: 1.125rem;
    --btn-xl-py: 1rem;
    --btn-xl-px: 1.5rem;
    --btn-xl-font: 1.25rem;
    --btn-light-bg: oklch(0.99 0 0);
    --btn-light-bg-hover: var(--slate-100);
    --btn-light-border: var(--slate-200);
    --btn-light-border-hover: var(--slate-300);
    --btn-light-text: var(--slate-800);
    --btn-dark-bg: var(--slate-900);
    --btn-dark-bg-hover: var(--slate-800);
    --btn-dark-border: var(--slate-900);
    --btn-dark-text: oklch(0.98 0 0);
    --btn-disabled-bg: var(--slate-100);
    --btn-disabled-border: var(--slate-200);
    --btn-disabled-text: var(--slate-400);
    --shadow-tiny: 0 0.0625rem 0.125rem oklch(10% 0.02 240 / 0.04);
    --shadow: 0 0.125rem 0.25rem oklch(0% 0 0 / 0.075);
    --shadow-medium: 0 0.25rem 0.5rem oklch(0% 0 0 / 0.1);
    --shadow-large: 0 0.5rem 1rem oklch(0% 0 0 / 0.15);
    --shadow-xlarge: 0 1rem 2rem oklch(0% 0 0 / 0.15);
    --shadow-inset: inset 0 0.125rem 0.25rem oklch(0% 0 0 / 0.075);
    --glass: oklch(100% 0 0 / 0.65);
    --glass-border: oklch(100% 0 0 / 0.4);
    --glass-blur: 16px;
    --glass-shadow: 0 4px 24px oklch(0% 0 0 / 0.08);
    --radius-1: 0.25rem;
    --radius-2: 0.5rem;
    --radius-3: 0.75rem;
    --radius-4: 1rem;
    --radius-5: 1.5rem;
    --radius-circle: 50%;
    --radius-pill: 9999px;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --grid-cols-1: repeat(1, minmax(0, 1fr));
    --grid-cols-2: repeat(2, minmax(0, 1fr));
    --grid-cols-3: repeat(3, minmax(0, 1fr));
    --grid-cols-4: repeat(4, minmax(0, 1fr));
    --grid-cols-5: repeat(5, minmax(0, 1fr));
    --grid-cols-6: repeat(6, minmax(0, 1fr));
    --grid-cols-7: repeat(7, minmax(0, 1fr));
    --grid-cols-8: repeat(8, minmax(0, 1fr));
    --grid-cols-9: repeat(9, minmax(0, 1fr));
    --grid-cols-10: repeat(10, minmax(0, 1fr));
    --grid-cols-11: repeat(11, minmax(0, 1fr));
    --grid-cols-12: repeat(12, minmax(0, 1fr));
    --grid-rows-1: repeat(1, minmax(0, 1fr));
    --grid-rows-2: repeat(2, minmax(0, 1fr));
    --grid-rows-3: repeat(3, minmax(0, 1fr));
    --grid-rows-4: repeat(4, minmax(0, 1fr));
    --grid-rows-5: repeat(5, minmax(0, 1fr));
    --grid-rows-6: repeat(6, minmax(0, 1fr));
    --grid-rows-12: repeat(12, minmax(0, 1fr));
    --kbd-bg: oklch(14% 0 0);
    --kbd-color: oklch(97% 0 0);
    --kbd-border: oklch(28% 0 0);
    --kbd-radius: 0.3rem;
    --kbd-shadow: 0 2px 0 oklch(10% 0 0);
    --mark-bg: oklch(93% 0.12 95);
    --mark-color: oklch(22% 0.04 65);
    --mark-radius: 0.2em;
    --abbr-decoration: underline dotted;
    --abbr-color: inherit;
    --figcaption-size: 0.8125em;
    --hr-color: var(--border);
    --modal-duration: 220ms;
    --modal-radius: 0.8rem;
    --modal-padding: 1.5rem;
    --modal-max-w-sm: 501px;
    --modal-max-w-md: 669px;
    --modal-max-w-lg: 900px;
    --modal-icon-size: 80px;
    --z-header: 200;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-drawer: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-toast: 1070;
    --z-tooltip: 1080;
    --translate-x: 0;
    --translate-y: 0;
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 6l5 5l5-5l2 1l-7 7l-7-7z' fill='%2364748b'/%3E%3Crect x='0' y='0' width='20' height='20' fill='rgba(0,0,0,0)'/%3E%3C/svg%3E");
    --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M12 6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1z' fill='%23dc2626'/%3E%3Cpath d='M12 16a1 1 0 1 0 0 2a1 1 0 0 0 0-2z' fill='%23dc2626'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2zM4 12a8 8 0 1 0 16 0a8 8 0 0 0-16 0z' fill='%23dc2626'/%3E%3C/g%3E%3C/svg%3E");
    --icon-alert-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath d='M13.618 2.397C10.513-.708 5.482-.713 2.383 2.386c-3.101 3.102-3.098 8.131.009 11.236c3.105 3.105 8.137 3.109 11.235.01c3.1-3.099 3.097-8.13-.009-11.235zm-4.003 8.954L7.927 9.663l-1.688 1.688c-.689.689-1.207 1.289-2.029.468c-.82-.821-.223-1.339.469-2.029l1.688-1.687l-1.688-1.688c-.69-.689-1.289-1.207-.469-2.029c.822-.82 1.34-.221 2.029.469l1.688 1.686l1.688-1.686c.69-.689 1.205-1.29 2.027-.469c.822.822.223 1.34-.467 2.029L9.487 8.102l1.688 1.687c.689.691 1.289 1.209.467 2.03c-.82.821-1.337.221-2.027-.468z' fill='%23dc2626' fill-rule='evenodd'/%3E%3C/svg%3E");
    --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2zm10.45 10.63L15.31 25.76L7.55 18a1.4 1.4 0 0 1 2-2l5.78 5.78l11.14-11.13a1.4 1.4 0 1 1 2 2z' fill='%2315803d'/%3E%3C/svg%3E");
    --icon-alert-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath class='clr-i-solid clr-i-solid-path-1' d='M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2zm10.45 10.63L15.31 25.76L7.55 18a1.4 1.4 0 0 1 2-2l5.78 5.78l11.14-11.13a1.4 1.4 0 1 1 2 2z' fill='%2315803d'/%3E%3C/svg%3E");
    --icon-alert-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 21.32a1.3 1.3 0 0 0 1.3-1.3V14a1.3 1.3 0 1 0-2.6 0v6a1.3 1.3 0 0 0 1.3 1.32z' fill='%23eab308'/%3E%3Ccircle cx='17.95' cy='24.27' r='1.5' fill='%23eab308'/%3E%3Cpath d='M30.33 25.54L20.59 7.6a3 3 0 0 0-5.27 0L5.57 25.54A3 3 0 0 0 8.21 30h19.48a3 3 0 0 0 2.64-4.43zm-1.78 1.94a1 1 0 0 1-.86.49H8.21a1 1 0 0 1-.88-1.48l9.74-17.94a1 1 0 0 1 1.76 0l9.74 17.94a1 1 0 0 1-.02.99z' fill='%23eab308'/%3E%3C/svg%3E");
    --icon-alert-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230d9488' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 14a1 1 0 0 1-2 0v-5a1 1 0 0 1 2 0zm-1-7a1 1 0 1 1 1-1a1 1 0 0 1-1 1z'/%3E%3C/svg%3E");
    --icon-alert-danger-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath d='M13.618 2.397C10.513-.708 5.482-.713 2.383 2.386c-3.101 3.102-3.098 8.131.009 11.236c3.105 3.105 8.137 3.109 11.235.01c3.1-3.099 3.097-8.13-.009-11.235zm-4.003 8.954L7.927 9.663l-1.688 1.688c-.689.689-1.207 1.289-2.029.468c-.82-.821-.223-1.339.469-2.029l1.688-1.687l-1.688-1.688c-.69-.689-1.289-1.207-.469-2.029c.822-.82 1.34-.221 2.029.469l1.688 1.686l1.688-1.686c.69-.689 1.205-1.29 2.027-.469c.822.822.223 1.34-.467 2.029L9.487 8.102l1.688 1.687c.689.691 1.289 1.209.467 2.03c-.82.821-1.337.221-2.027-.468z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
    --icon-alert-success-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath class='clr-i-solid clr-i-solid-path-1' d='M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2zm10.45 10.63L15.31 25.76L7.55 18a1.4 1.4 0 0 1 2-2l5.78 5.78l11.14-11.13a1.4 1.4 0 1 1 2 2z' fill='%23fff'/%3E%3C/svg%3E");
    --icon-alert-warning-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 21.32a1.3 1.3 0 0 0 1.3-1.3V14a1.3 1.3 0 1 0-2.6 0v6a1.3 1.3 0 0 0 1.3 1.32z' fill='%23fff'/%3E%3Ccircle cx='17.95' cy='24.27' r='1.5' fill='%23fff'/%3E%3Cpath d='M30.33 25.54L20.59 7.6a3 3 0 0 0-5.27 0L5.57 25.54A3 3 0 0 0 8.21 30h19.48a3 3 0 0 0 2.64-4.43zm-1.78 1.94a1 1 0 0 1-.86.49H8.21a1 1 0 0 1-.88-1.48l9.74-17.94a1 1 0 0 1 1.76 0l9.74 17.94a1 1 0 0 1-.02.99z' fill='%23fff'/%3E%3C/svg%3E");
    --icon-alert-info-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 14a1 1 0 0 1-2 0v-5a1 1 0 0 1 2 0zm-1-7a1 1 0 1 1 1-1a1 1 0 0 1-1 1z' fill='%23fff'/%3E%3C/svg%3E");

    --breakpoint-sm: 640px;
    --breakpoint-md: 816px;
    --breakpoint-lg: 1120px;
    --breakpoint-xl: 1408px;
    --breakpoint-2xl: 1792px;
  }
  [fa-theme="dark"] {
    --primary: var(--blue-500);
    --primary-contrast: oklch(0.145 0 0);
    --danger: var(--red-500);
    --danger-contrast: oklch(0.145 0 0);
    --success: var(--green-500);
    --success-contrast: oklch(0.145 0 0);
    --info: var(--teal-500);
    --info-contrast: oklch(0.145 0 0);
    --warning: var(--yellow-400);
    --warning-contrast: oklch(0.145 0 0);
    --accent: oklch(
      from var(--primary) min(calc(l + 0.06), 0.9) calc(c * 0.85) h
    );
    --accent-contrast: var(--dark);
    --link-hover: oklch(from var(--primary) calc(l + 0.06) calc(c - 0.02) h);
    --link-focus-ring: oklch(from var(--primary) 0.82 0.14 h / 0.25);
    --selection: oklch(from var(--primary) 0.65 calc(c * 0.9) h / 0.35);
    --selection-text: var(--body-text);
    --body: oklch(0.16 0.015 260);
    --body-text: oklch(0.985 0 0);
    --muted: var(--slate-400);
    --surface: oklch(0.22 0.015 260);
    --surface-raised: oklch(0.269 0 0);
    --border: oklch(1 0 0 / 0.1);
    --form-control: oklch(0.245 0.008 250);
    --form-control-text: oklch(0.98 0 0);
    --form-control-border: oklch(0.36 0.012 250);
    --form-disabled: oklch(0.18 0 0);
    --form-disabled-text: oklch(0.42 0.01 260);
    --btn-light-bg: oklch(0.95 0 0);
    --btn-light-bg-hover: oklch(0.88 0 0);
    --btn-light-border: oklch(0.95 0 0);
    --btn-light-text: var(--slate-900);
    --btn-dark-bg: oklch(0.2 0.01 250);
    --btn-dark-bg-hover: oklch(0.25 0.01 250);
    --btn-dark-border: oklch(0.3 0.015 250);
    --btn-dark-border-hover: oklch(0.38 0.015 250);
    --btn-dark-text: oklch(0.92 0.005 250);
    --btn-disabled-bg: oklch(0.18 0.005 250);
    --btn-disabled-border: oklch(0.22 0.005 250);
    --btn-disabled-text: var(--slate-600);
    --shadow-tiny: 0 0.0625rem 0.125rem oklch(0% 0 0 / 0.2);
    --shadow: 0 0.125rem 0.25rem oklch(0% 0 0 / 0.3);
    --shadow-medium: 0 0.25rem 0.5rem oklch(0% 0 0 / 0.4);
    --shadow-large: 0 0.5rem 1rem oklch(0% 0 0 / 0.5);
    --shadow-xlarge: 0 1rem 2rem oklch(0% 0 0 / 0.6);
    --glass: oklch(10% 0 0 / 0.7);
    --glass-border: oklch(100% 0 0 / 0.08);
    --glass-shadow: 0 4px 24px oklch(0% 0 0 / 0.4);
    --kbd-bg: oklch(22% 0 0);
    --kbd-color: oklch(92% 0 0);
    --kbd-border: oklch(36% 0 0);
    --kbd-shadow: 0 2px 0 oklch(8% 0 0);
    --mark-bg: oklch(38% 0.08 85);
    --mark-color: oklch(95% 0.02 90);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 6l5 5l5-5l2 1l-7 7l-7-7z' fill='%2394a3b8'/%3E%3Crect x='0' y='0' width='20' height='20' fill='none'/%3E%3C/svg%3E");
    --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M12 6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1z' fill='%23f87171'/%3E%3Cpath d='M12 16a1 1 0 1 0 0 2a1 1 0 0 0 0-2z' fill='%23f87171'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2zM4 12a8 8 0 1 0 16 0a8 8 0 0 0-16 0z' fill='%23f87171'/%3E%3C/g%3E%3C/svg%3E");
    --icon-alert-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath d='M13.618 2.397C10.513-.708 5.482-.713 2.383 2.386c-3.101 3.102-3.098 8.131.009 11.236c3.105 3.105 8.137 3.109 11.235.01c3.1-3.099 3.097-8.13-.009-11.235zm-4.003 8.954L7.927 9.663l-1.688 1.688c-.689.689-1.207 1.289-2.029.468c-.82-.821-.223-1.339.469-2.029l1.688-1.687l-1.688-1.688c-.69-.689-1.289-1.207-.469-2.029c.822-.82 1.34-.221 2.029.469l1.688 1.686l1.688-1.686c.69-.689 1.205-1.29 2.027-.469c.822.822.223 1.34-.467 2.029L9.487 8.102l1.688 1.687c.689.691 1.289 1.209.467 2.03c-.82.821-1.337.221-2.027-.468z' fill='%23f87171' fill-rule='evenodd'/%3E%3C/svg%3E");
    --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2zm10.45 10.63L15.31 25.76L7.55 18a1.4 1.4 0 0 1 2-2l5.78 5.78l11.14-11.13a1.4 1.4 0 1 1 2 2z' fill='%234ade80'/%3E%3C/svg%3E");
    --icon-alert-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath class='clr-i-solid clr-i-solid-path-1' d='M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2zm10.45 10.63L15.31 25.76L7.55 18a1.4 1.4 0 0 1 2-2l5.78 5.78l11.14-11.13a1.4 1.4 0 1 1 2 2z' fill='%234ade80'/%3E%3C/svg%3E");
    --icon-alert-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 21.32a1.3 1.3 0 0 0 1.3-1.3V14a1.3 1.3 0 1 0-2.6 0v6a1.3 1.3 0 0 0 1.3 1.32z' fill='%23facc15'/%3E%3Ccircle cx='17.95' cy='24.27' r='1.5' fill='%23facc15'/%3E%3Cpath d='M30.33 25.54L20.59 7.6a3 3 0 0 0-5.27 0L5.57 25.54A3 3 0 0 0 8.21 30h19.48a3 3 0 0 0 2.64-4.43zm-1.78 1.94a1 1 0 0 1-.86.49H8.21a1 1 0 0 1-.88-1.48l9.74-17.94a1 1 0 0 1 1.76 0l9.74 17.94a1 1 0 0 1-.02.99z' fill='%23facc15'/%3E%3C/svg%3E");
    --icon-alert-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232dd4bf' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 14a1 1 0 0 1-2 0v-5a1 1 0 0 1 2 0zm-1-7a1 1 0 1 1 1-1a1 1 0 0 1-1 1z'/%3E%3C/svg%3E");
  }
}

@layer base {
  body {
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    color: var(--body-text);
    background-color: var(--body);
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    transition:
      background-color 250ms ease,
      color 250ms ease;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  b,
  strong {
    font-weight: bolder;
  }

  small {
    font-size: 0.8em;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
  }

  abbr[title] {
    -webkit-text-decoration: var(--abbr-decoration);
            text-decoration: var(--abbr-decoration);
    color: var(--abbr-color);
    cursor: help;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  pre,
  code,
  kbd,
  samp {
    font-family: var(--font-monospace);
    font-size: 0.875em;
  }

  pre {
    display: block;
    margin-block: 0 1rem;
    overflow-x: auto;
    white-space: pre;
  }

  pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
  }

  code {
    word-break: break-word;
  }

  a > code {
    color: inherit;
  }

  kbd {
    display: inline-block;
    align-items: center;
    justify-content: center;
    padding: 0.35em 0.5em;
    font-size: 0.8em;
    vertical-align: middle;
    line-height: 1;
    white-space: nowrap;
    color: var(--kbd-color);
    background-color: var(--kbd-bg);
    border: 1px solid var(--kbd-border);
    border-radius: var(--kbd-radius);
    box-shadow: var(--kbd-shadow);
  }

  kbd kbd {
    padding: 0;
    font-size: 1em;
    font-weight: 700;
    line-height: inherit;
    border: none;
    background: none;
    box-shadow: none;
  }

  mark {
    padding: 0.1em 0.25em;
    border-radius: var(--mark-radius);
    background-color: var(--mark-bg);
    color: var(--mark-color);
  }

  .decoration-clone {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  ul,
  ol,
  dl {
    margin-block-start: 0;
    margin-block-end: 1rem;
  }

  ul,
  ol {
    padding-inline-start: 1.5rem;
  }

  hr {
    margin-block: 1rem;
    border: none;
    height: 0;
    border-block-start: 1px solid var(--hr-color);
  }

  [role="button"] {
    cursor: pointer;
  }

  [tabindex="-1"]:focus:not(:focus-visible) {
    outline: 0 !important;
  }

  [hidden] {
    display: none !important;
  }

  img,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  svg {
    vertical-align: middle;
  }

  canvas {
    max-width: 100%;
  }

  iframe {
    border: 0;
  }

  figure {
    margin: 0;
  }

  figure figcaption {
    font-size: var(--figcaption-size);
    color: var(--muted);
    margin-block-start: 0.5rem;
  }

  button {
    border-radius: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }

  button:focus:not(:focus-visible) {
    outline: 0;
  }

  ::file-selector-button {
    font: inherit;
  }

  ::-webkit-file-upload-button {
    font: inherit;
  }

  ::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  label {
    display: inline-block;
  }

  select {
    word-wrap: normal;
    text-transform: none;
  }

  input,
  select,
  optgroup,
  textarea {
    margin: 0;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: inherit;
  }

  fieldset {
    padding: 1rem 1.25rem;
    border: 1px solid var(--form-control-border);
    border-radius: var(--radius-2);
  }

  legend {
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    box-sizing: border-box;
    color: var(--body-text);
    max-width: 100%;
    margin: 0;
    padding: 0 0.5rem;
  }

  textarea {
    resize: vertical;
  }

  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    -webkit-appearance: listbox;
       -moz-appearance: listbox;
            appearance: listbox;
  }

  input[type="checkbox"],
  input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    -webkit-appearance: textfield;
       -moz-appearance: textfield;
            appearance: textfield;
    outline-offset: -2px;
  }

  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-moz-selection {
    background-color: var(--selection);
    color: var(--selection-text);
    text-shadow: none;
  }

  ::selection {
    background-color: var(--selection);
    color: var(--selection-text);
    text-shadow: none;
  }

  ::-moz-selection {
    background-color: var(--selection);
    color: var(--selection-text);
    text-shadow: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    :root {
      scroll-behavior: smooth;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  .fa-image-wrap {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
  }

  .fa-lazy-image {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0;
    transition: opacity 350ms ease;
  }

  .fa-lazy-image.fa-image-loaded {
    opacity: 1;
  }

  .fa-image-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      oklch(92% 0 0) 25%,
      oklch(96% 0 0) 50%,
      oklch(92% 0 0) 75%
    );
    background-size: 200% 100%;
    animation: fa-image-shimmer 1.4s ease-in-out infinite;
  }

  .fa-image-error-layer {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--surface);
  }

  .fa-image-error-layer.is-visible {
    display: flex;
  }

  .fa-image-error-layer svg {
    opacity: 0.3;
    color: var(--body-text);
  }

  .fa-image-error-layer span {
    font-size: 0.75rem;
    color: var(--muted);
  }

  @keyframes fa-image-shimmer {
    0% {
      background-position: 200% 0;
    }

    100% {
      background-position: -200% 0;
    }
  }

  [fa-theme="dark"] .fa-image-shimmer {
    background: linear-gradient(
      90deg,
      oklch(22% 0 0) 25%,
      oklch(28% 0 0) 50%,
      oklch(22% 0 0) 75%
    );
    background-size: 200% 100%;
  }
  .list {
    padding-inline-start: 1.5rem;
    margin-bottom: 1rem;
    color: inherit;
  }

  .list > li {
    margin-bottom: 0.25rem;
  }

  .list.is-unstyled {
    list-style: none;
    padding-inline-start: 0;
    margin-inline-start: 0;
  }

  .list.is-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding-inline-start: 0;
  }

  .list.is-inline > li {
    margin-bottom: 0;
  }

  .list.is-square {
    list-style-type: square;
  }

  .list.is-circle {
    list-style-type: circle;
  }

  .list.is-disc {
    list-style-type: disc;
  }

  .list.is-decimal {
    list-style-type: decimal;
  }

  .list.is-leading-zero {
    list-style-type: decimal-leading-zero;
  }

  .list.is-lower-alpha {
    list-style-type: lower-alpha;
  }

  .list.is-upper-alpha {
    list-style-type: upper-alpha;
  }

  .list.is-lower-roman {
    list-style-type: lower-roman;
  }

  .list.is-upper-roman {
    list-style-type: upper-roman;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--body-text);
  }

  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3 {
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  h1,
  .h1 {
    font-size: clamp(2.25rem, 5vw + 1rem, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
  }

  h2,
  .h2 {
    font-size: clamp(2rem, 4.5vw + 0.5rem, 3rem);
    line-height: 1.2;
  }

  h3,
  .h3 {
    font-size: clamp(1.75rem, 4vw + 0.25rem, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
  }

  h4,
  .h4 {
    font-size: clamp(1.5rem, 3vw + 0.2rem, 1.875rem);
    font-weight: 600;
    line-height: 1.4;
  }

  h5,
  .h5 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.5;
  }

  h6,
  .h6 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

@layer components {
  .alert {
    --alert-bg: var(--surface);
    --alert-text: var(--body-text);
    --alert-border: var(--border);
    --alert-close-hover-bg: oklch(from var(--alert-text) l c h / 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
    font-weight: 400;
    font-size: 1rem;
    font-family: inherit;
    background-color: var(--alert-bg);
    color: var(--alert-text);
    border: 1px solid var(--alert-border);
    border-radius: 0.25rem;
    overflow-wrap: anywhere;
    animation: alert 0.35s ease-out;
    transition:
      transform 280ms ease-out,
      opacity 280ms ease-out;
  }

  .alert > span {
    padding: 0.5rem;
  }

  .alert.border-0 {
    border: 1px solid transparent !important;
  }
  .alert .alert-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0.5rem;
    width: 1.2em;
    height: 1.2em;
    border-radius: 0.25rem;
    background-color: transparent;
    transition: background-color 150ms ease;
  }

  .alert-close::before,
  .alert-close::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 12px;
    background-color: var(--alert-text);
    border-radius: 2px;
  }

  .alert-close::before {
    transform: rotate(45deg);
  }

  .alert-close::after {
    transform: rotate(-45deg);
  }

  .alert-close:hover {
    background-color: var(--alert-close-hover-bg);
  }

  .alert.has-icon::before {
    position: absolute;
    left: 0.5rem;
    width: 1em;
    height: 1em;
  }

  .alert.has-icon {
    padding-inline-start: calc(0.5rem + 1.5em + 3px);
  }

  .alert.is-success.has-icon::before {
    content: var(--icon-alert-success);
  }
  .alert.is-danger.has-icon::before {
    content: var(--icon-alert-danger);
  }
  .alert.is-warning.has-icon::before {
    content: var(--icon-alert-warning);
  }
  .alert.is-info.has-icon::before {
    content: var(--icon-alert-info);
  }

  .alert.is-success {
    --alert-bg: oklch(from var(--success) l c h / 0.15);
    --alert-text: var(--success);
    --alert-border: var(--success);
  }

  .alert.is-danger {
    --alert-bg: oklch(from var(--danger) l c h / 0.15);
    --alert-text: var(--danger);
    --alert-border: var(--danger);
  }

  .alert.is-warning {
    --alert-bg: oklch(from var(--warning) l c h / 0.15);
    --alert-text: var(--warning);
    --alert-border: var(--warning);
  }

  .alert.is-info {
    --alert-bg: oklch(from var(--info) l c h / 0.15);
    --alert-text: var(--info);
    --alert-border: var(--info);
  }

  .alert > a.link {
    font-weight: 500;
    padding: 0 0.25rem;
  }

  @keyframes alert {
    from {
      transform: translateY(-100px);
    }
    to {
      transform: translateY(0px);
    }
  }
  .accordion {
    position: relative;
  }

  .accordion-item {
    display: block;
    background: transparent;
    color: inherit;
  }

  .accordion-item + .accordion-item {
    margin-top: 0.75rem;
  }

  .accordion-item:not(.nav-item):not(.list-item):not(.nav-link) {
    background: transparent;
    border: 1px solid var(--border);
  }

  .accordion-content {
    display: none;
    background: transparent;
    color: var(--body-text);
    margin: 0;
  }

  .accordion-inner {
    padding: 0.5rem 0.75rem;
  }

  .accordion.is-medium
    > .accordion-item
    > .accordion-content
    > .accordion-inner {
    padding: 0.75rem 1rem;
  }

  .accordion.is-large
    > .accordion-item
    > .accordion-content
    > .accordion-inner {
    padding: 1rem 1.25rem;
  }

  .accordion-toggler {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    outline: 0;
    border: 1px solid transparent;
    border-radius: 0;
    overflow-anchor: none;
    cursor: pointer;
    transform: none !important;
  }

  .accordion-toggler::after {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    margin-inline-start: auto;
    content: "";
    display: block;
    -webkit-mask-image: var(--icon-chevron-down);
    mask-image: var(--icon-chevron-down);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 1rem 1rem;
    mask-size: 1rem 1rem;
    background-color: currentColor;
    background-image: none;
    transition:
      transform 150ms ease-out,
      opacity 150ms ease-out;
  }

  .accordion-toggler.is-open::after {
    transform: rotate(180deg);
  }

  .accordion.is-medium > .accordion-item {
    padding: 0.75rem 0.5rem;
  }

  .accordion.is-large > .accordion-item {
    padding: 1rem 0.75rem;
  }
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-md-py) var(--btn-md-px);
    font-size: var(--btn-md-font);
    font-weight: 500;
    line-height: 1;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    color: var(--btn-text);
    background-color: var(--btn-bg, transparent);
    border: 1px solid var(--btn-border, transparent);
    --btn-spinner: var(--btn-text);
    border-radius: var(--btn-radius, var(--radius-2));
    transition:
      background-color 220ms ease,
      border-color 220ms ease,
      color 220ms ease,
      box-shadow 220ms ease,
      transform 220ms ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  .button i,
  .button svg {
    display: block;
    flex-shrink: 0;
  }

  .button.is-icon {
    padding: 0;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
  }

  .button.is-icon.is-tiny {
    width: 1.8rem;
    height: 1.8rem;
  }
  .button.is-icon.is-small {
    width: 2.1rem;
    height: 2.1rem;
  }
  .button.is-icon.is-large {
    width: 3rem;
    height: 3rem;
  }
  .button.is-icon.is-xlarge {
    width: 3.5rem;
    height: 3.5rem;
  }

  .button.is-tiny {
    font-size: var(--btn-xs-font);
    padding: var(--btn-xs-py) var(--btn-xs-px);
  }
  .button.is-small {
    font-size: var(--btn-sm-font);
    padding: var(--btn-sm-py) var(--btn-sm-px);
  }
  .button.is-large {
    font-size: var(--btn-lg-font);
    padding: var(--btn-lg-py) var(--btn-lg-px);
  }
  .button.is-xlarge {
    font-size: var(--btn-xl-font);
    padding: var(--btn-xl-py) var(--btn-xl-px);
  }

  .button:active:not(:disabled):not(.is-loading) {
    transform: translateY(1px);
    box-shadow: none;
  }

  .button:focus-visible {
    outline: 2.5px solid color-mix(in srgb, currentColor 75%, transparent);
    outline-offset: 3px;
    box-shadow: none;
    transform: none;
  }

  .button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .button:disabled,
  .button[aria-disabled="true"],
  .button.is-disabled,
  fieldset:disabled .button {
    background-color: var(--btn-disabled);
    color: var(--btn-disabled-text);
    border-color: var(--btn-disabled);

    opacity: 0.65;

    cursor: not-allowed;
    pointer-events: none;

    box-shadow: none;
    transform: none;
  }

  .button.is-loading,
  .button.is-loading-inline {
    pointer-events: none;
  }

  .button.is-loading {
    color: transparent !important;
  }

  .button.is-loading::after,
  .button.is-loading-inline::after {
    content: "";
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(
      from 0deg,
      transparent 0 25%,
      var(--btn-spinner) 25% 100%
    );
    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 2px),
      #000 0
    );
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
    animation: btn-spin 0.75s linear infinite;
    opacity: 0.9;
  }

  .button.is-loading::after {
    position: absolute;
    inset: 0;
    margin: auto;
  }

  .button.is-loading-inline::after {
    position: static;
  }

  @keyframes btn-spin {
    to {
      transform: rotate(1turn);
    }
  }

  .button.is-primary {
    --btn-bg: var(--primary);
    --btn-text: var(--primary-contrast);
    --btn-border: var(--primary);
  }

  .button.is-primary:hover:not(:disabled) {
    background-color: oklch(from var(--primary) calc(l - 0.08) c h);
    border-color: oklch(from var(--primary) calc(l - 0.08) c h);
  }

  .button.is-primary:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--primary) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-success {
    --btn-bg: var(--success);
    --btn-text: var(--success-contrast);
    --btn-border: var(--success);
  }

  .button.is-success:hover:not(:disabled) {
    background-color: oklch(from var(--success) calc(l - 0.08) c h);
    border-color: oklch(from var(--success) calc(l - 0.08) c h);
  }

  .button.is-success:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--success) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-danger {
    --btn-bg: var(--danger);
    --btn-text: var(--danger-contrast);
    --btn-border: var(--danger);
  }

  .button.is-danger:hover:not(:disabled) {
    background-color: oklch(from var(--danger) calc(l - 0.08) c h);
    border-color: oklch(from var(--danger) calc(l - 0.08) c h);
  }

  .button.is-danger:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--danger) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-warning {
    --btn-bg: var(--warning);
    --btn-text: var(--warning-contrast);
    --btn-border: var(--warning);
  }

  .button.is-warning:hover:not(:disabled) {
    background-color: oklch(from var(--warning) calc(l - 0.08) c h);
    border-color: oklch(from var(--warning) calc(l - 0.08) c h);
  }

  .button.is-warning:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--warning) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-info {
    --btn-bg: var(--info);
    --btn-text: var(--info-contrast);
    --btn-border: var(--info);
  }

  .button.is-info:hover:not(:disabled) {
    background-color: oklch(from var(--info) calc(l - 0.08) c h);
    border-color: oklch(from var(--info) calc(l - 0.08) c h);
  }

  .button.is-info:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--info) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-dark {
    --btn-bg: var(--btn-dark-bg);
    --btn-text: var(--btn-dark-text);
    --btn-border: var(--btn-dark-border);
  }

  .button.is-dark:hover:not(:disabled) {
    background-color: var(--btn-dark-bg-hover);
    border-color: var(--btn-dark-border-hover, var(--btn-dark-bg-hover));
  }

  .button.is-dark:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--btn-dark-bg) 80%, transparent);
    outline-offset: 2px;
  }

  .button.is-light {
    --btn-bg: var(--btn-light-bg);
    --btn-text: var(--btn-light-text);
    --btn-border: var(--btn-light-border);
  }

  .button.is-light:hover:not(:disabled) {
    background-color: var(--btn-light-bg-hover);
    border-color: var(--btn-light-border-hover, var(--btn-light-border));
  }

  .button.is-light:focus-visible {
    outline: 2px solid
      color-mix(in srgb, var(--btn-light-text) 40%, transparent);
    outline-offset: 2px;
  }

  .button.is-primary-outline {
    --btn-bg: transparent;
    --btn-text: var(--primary);
    --btn-border: var(--primary);
  }

  .button.is-primary-outline:hover:not(:disabled) {
    background-color: var(--primary);
    color: var(--primary-contrast);
  }

  .button.is-primary-outline:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--primary) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-success-outline {
    --btn-bg: transparent;
    --btn-text: var(--success);
    --btn-border: var(--success);
  }

  .button.is-success-outline:hover:not(:disabled) {
    background-color: var(--success);
    color: var(--success-contrast);
  }

  .button.is-success-outline:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--success) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-danger-outline {
    --btn-bg: transparent;
    --btn-text: var(--danger);
    --btn-border: var(--danger);
  }

  .button.is-danger-outline:hover:not(:disabled) {
    background-color: var(--danger);
    color: var(--danger-contrast);
  }
  .button.is-danger-outline:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--danger) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-warning-outline {
    --btn-bg: transparent;
    --btn-text: var(--warning);
    --btn-border: var(--warning);
  }

  .button.is-warning-outline:hover:not(:disabled) {
    background-color: var(--warning);
    color: var(--warning-contrast);
  }

  .button.is-warning-outline:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--warning) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-info-outline {
    --btn-bg: transparent;
    --btn-text: var(--info);
    --btn-border: var(--info);
  }

  .button.is-info-outline:hover:not(:disabled) {
    background-color: var(--info);
    color: var(--info-contrast);
  }

  .button.is-info-outline:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--info) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-dark-outline {
    --btn-bg: transparent;
    --btn-border: var(--btn-dark-border);
    --btn-text: var(--body-text);
  }

  .button.is-dark-outline:hover:not(:disabled) {
    background-color: var(--btn-dark-bg);
    border-color: var(--btn-dark-bg);
    color: var(--btn-dark-text);
  }

  .button.is-dark-outline:focus-visible {
    outline: 2px solid
      color-mix(in srgb, var(--btn-dark-border) 80%, transparent);
    outline-offset: 2px;
  }

  .button.is-light-outline {
    --btn-bg: transparent;
    --btn-border: var(--btn-light-border);
    --btn-text: var(--body-text);
  }

  .button.is-light-outline:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--btn-text) 8%, transparent);
    border-color: var(--btn-light-border-hover, var(--btn-light-border));
    color: var(--btn-text);
  }

  .button.is-light-outline:focus-visible {
    outline: 2px solid
      color-mix(in srgb, var(--btn-light-border) 80%, transparent);
    outline-offset: 2px;
  }

  .button.is-ghost {
    --btn-bg: transparent;
    --btn-text: var(--muted);
    --btn-border: transparent;
  }

  .button.is-ghost:hover:not(:disabled) {
    background-color: oklch(from currentColor l c h / 0.1);
  }

  .button.is-primary-ghost {
    --btn-bg: transparent;
    --btn-text: var(--primary);
    --btn-border: transparent;
  }

  .button.is-primary-ghost:hover:not(:disabled) {
    background-color: oklch(from var(--primary) l c h / 0.1);
  }

  .button.is-primary-ghost:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--primary) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-success-ghost {
    --btn-bg: transparent;
    --btn-text: var(--success);
    --btn-border: transparent;
  }

  .button.is-success-ghost:hover:not(:disabled) {
    background-color: oklch(from var(--success) l c h / 0.1);
  }

  .button.is-success-ghost:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--success) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-danger-ghost {
    --btn-bg: transparent;
    --btn-text: var(--danger);
    --btn-border: transparent;
  }

  .button.is-danger-ghost:hover:not(:disabled) {
    background-color: oklch(from var(--danger) l c h / 0.1);
  }

  .button.is-danger-ghost:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--danger) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-warning-ghost {
    --btn-bg: transparent;
    --btn-text: var(--warning);
    --btn-border: transparent;
  }

  .button.is-warning-ghost:hover:not(:disabled) {
    background-color: oklch(from var(--warning) l c h / 0.1);
  }

  .button.is-warning-ghost:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--warning) 60%, transparent);
    outline-offset: 3px;
  }

  .button.is-info-ghost {
    --btn-bg: transparent;
    --btn-text: var(--info);
    --btn-border: transparent;
  }

  .button.is-info-ghost:hover:not(:disabled) {
    background-color: oklch(from var(--info) l c h / 0.1);
  }

  .button.is-info-ghost:focus-visible {
    outline: 2.5px solid color-mix(in srgb, var(--info) 60%, transparent);
    outline-offset: 3px;
  }

  .button[class*="-ghost"]:hover:not(:disabled),
  .button.is-ghost:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
  }
  .button-group {
    display: inline-flex;
    vertical-align: middle;
    position: relative;
  }

  .button-group > .button {
    --btn-radius: 0;
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
  }
  .button-group > .button:hover,
  .button-group > .button:focus-visible,
  .button-group > .button:active {
    z-index: 2;
  }
  .button-group:not(.is-vertical) > .button + .button {
    margin-inline-start: -1px;
  }
  .button-group.is-vertical {
    flex-direction: column;
  }
  .button-group.is-vertical > .button + .button {
    margin-top: -1px;
  }

  .button-group:not(.is-vertical) > .button:first-child {
    border-radius: var(--btn-radius) 0 0 var(--btn-radius);
  }
  .button-group:not(.is-vertical) > .button:last-child {
    border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
  }
  .button-group.is-vertical > .button:first-child {
    border-radius: var(--btn-radius) var(--btn-radius) 0 0;
  }
  .button-group.is-vertical > .button:last-child {
    border-radius: 0 0 var(--btn-radius) var(--btn-radius);
  }
  .button-group.is-pill:not(.is-vertical) > .button:first-child {
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  }
  .button-group.is-pill:not(.is-vertical) > .button:last-child {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  }
  .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0;
    margin-bottom: 1rem;
    list-style: none;
  }

  .breadcrumb-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
  }

  .breadcrumb-item > .breadcrumb-link {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    color: var(--muted);
    border-radius: var(--radius-2);
    font-size: 0.875rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }

  .breadcrumb-item > .breadcrumb-link:hover {
    background-color: oklch(from currentColor l c h / 0.1);
  }

  .breadcrumb-item.is-active,
  .breadcrumb-item:has([aria-current="page"]) {
    flex-shrink: 1;
    min-width: 0;
  }

  .breadcrumb-item.is-active .breadcrumb-link,
  .breadcrumb-item [aria-current="page"] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--body-text);
    pointer-events: none;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0 0.5rem;
    color: var(--muted);
    flex-shrink: 0;
  }

  .breadcrumb.is-arrow .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    font-size: 1.25rem;
    display: flex;
    align-items: center;
  }

  .breadcrumb.is-bullet .breadcrumb-item + .breadcrumb-item::before {
    content: "•";
    font-size: 0.8rem;
    display: flex;
    align-items: center;
  }
  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    border-radius: 0.25rem;
    padding: 0.3em 0.6em;
    vertical-align: middle;
    transition:
      background-color 150ms ease,
      color 150ms ease,
      opacity 150ms ease,
      transform 150ms ease;
  }

  .badge:empty:not(.is-dot):not([data-count]) {
    display: none !important;
  }

  .badge:is(a, button):hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
  }

  .badge:is(a, button):active {
    transform: translateY(0);
    filter: brightness(0.92);
  }

  .badge:is(a, button):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(from currentColor l c h / 0.4);
  }

  .badge.is-pill {
    border-radius: 999px;
    padding: 0.3em 0.75em;
  }

  .badge.is-outline {
    background: transparent;
    border: 1.5px solid currentColor;
  }

  .badge.is-dot {
    width: 0.55rem;
    height: 0.55rem;
    min-width: unset;
    padding: 0;
    border-radius: 50%;
  }

  .badge.is-floating {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    z-index: 10;
    border: 2px solid var(--primary);
    pointer-events: none;
  }

  .badge.is-floating.rounded-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    min-width: 1.45rem;
    padding: 0;
    font-size: 0.65rem;
    line-height: 1;
    text-align: center;
  }

  .badge.is-floating.is-pill {
    border-radius: 999px;
    padding: 0.2em 0.5em;
  }

  .badge.is-primary {
    background: var(--primary);
    color: var(--primary-contrast);
  }

  .badge.is-success {
    background-color: var(--success);
    color: #fff;
  }

  .badge.is-warning {
    background-color: var(--warning);
    color: #000;
  }

  .badge.is-danger {
    background: var(--danger);
    color: #fff;
  }
  .badge.is-primary-outline {
    color: var(--primary);
  }

  .badge.is-success-outline {
    color: var(--success);
  }

  .badge.is-warning-outline {
    color: var(--warning);
  }

  .badge.is-danger-outline {
    color: var(--danger);
  }
  .group,
  .group-switch,
  .group-file,
  .group-input,
  .group-checkbox,
  .group-radio {
    position: relative;
    margin-bottom: 1rem;
  }

  .form-label {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    font-family: inherit;
    font-size: 0.875rem;
  }

  .group > .form-label {
    margin-bottom: 0.525rem;
  }

  .form-input,
  .form-textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--form-control-text);
    background-color: var(--form-control);
    background-clip: padding-box;
    border: 1px solid var(--form-control-border);
    border-radius: var(--radius-1);
    outline: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      background-color 180ms ease,
      color 180ms ease;
  }

  .form-textarea {
    min-height: 5rem;
    font-family: inherit;
  }

  .group > .form-textarea.is-medium {
    min-height: 7rem;
  }

  .group > .form-textarea.is-large {
    min-height: 10rem;
  }

  .form-input:focus:not(:disabled):not([readonly]):not(:user-invalid):not(
      :is([data-rule], [data-regex]):user-valid
    ):not([class*="valid"]),
  .form-textarea:focus:not(:disabled):not(:user-invalid):not(
      :is([data-rule], [data-regex]):user-valid
    ),
  .form-select:focus:not(:disabled):not(:user-invalid):not(
      :is([data-rule], [data-regex]):user-valid
    ) {
    color: var(--form-control-text);
    outline: 0;
    border: 1px solid var(--accent);
    box-shadow: 0 0 0 0.25rem oklch(from var(--accent) l c h / 0.18);
  }

  .form-file[type="file"]:not(:disabled) {
    cursor: pointer;
  }

  .form-input::-webkit-date-and-time-value {
    height: 1.5em;
  }

  .form-file[type="file"],
  .form-range[type="range"] {
    display: block;
    width: 100%;
  }

  .form-file[type="file"] {
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-2);
  }

  .form-file[type="file"]:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .form-file[type="file"]::file-selector-button {
    padding: 0.5rem;
    color: var(--form-control-text);
    background-color: oklch(50% 0 0 / 0.12);
    border: 0;
    border-radius: 0.3em;
  }

  .form-file[type="file"]:hover:not(:disabled)::file-selector-button {
    background-color: oklch(50% 0 0 / 0.2);
  }

  .group-range {
    --range-height: 6px;
    --range-thumb: 18px;
    --range-hit: 32px;
    --range-fill: var(--accent);
    --range-track: oklch(0.94 0.005 260);
    --range-focus-ring: oklch(from var(--accent) l c h / 0.35);
    position: relative;
    display: block;
    padding: 0;
    margin: 1rem 0;
  }

  .form-range {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 100%;
    height: var(--range-hit);
    background: transparent;
    margin: 0;
    cursor: pointer;
    display: block;
    touch-action: none;
  }

  .form-range:focus {
    outline: none;
  }

  .form-range:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .form-range:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
  }

  .form-range:disabled::-moz-range-thumb {
    cursor: not-allowed;
  }

  .form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--range-height);
    background-color: var(--range-track);
    background-image: linear-gradient(var(--range-fill), var(--range-fill));
    background-repeat: no-repeat;
    background-size: var(--range-progress, 0%) 100%;
    border-radius: 999px;
    -webkit-transition: background-size 0.1s ease;
    transition: background-size 0.1s ease;
  }

  .form-range::-moz-range-track {
    height: var(--range-height);
    background: var(--range-track);
    border-radius: 999px;
  }

  .form-range::-moz-range-progress {
    height: var(--range-height);
    background: var(--range-fill);
    border-radius: 999px;
  }

  .form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    box-sizing: border-box;
    width: var(--range-thumb);
    height: var(--range-thumb);
    background: #fff;
    border: 2px solid var(--range-fill);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-top: calc((var(--range-height) / 2) - (var(--range-thumb) / 2));
    -webkit-transition:
      transform 0.1s ease,
      box-shadow 0.1s ease;
    transition:
      transform 0.1s ease,
      box-shadow 0.1s ease;
  }

  .form-range::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--range-thumb);
    height: var(--range-thumb);
    background: #fff;
    border: 2px solid var(--range-fill);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .form-range:active::-webkit-slider-thumb {
    transform: scale(1.15);
  }

  .form-range:focus-visible::-webkit-slider-thumb {
    box-shadow:
      0 0 0 4px var(--range-focus-ring),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .form-range:focus-visible::-moz-range-thumb {
    box-shadow:
      0 0 0 4px var(--range-focus-ring),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .form-range-dual {
    position: relative;
    height: var(--range-hit);
    display: flex;
    align-items: center;
  }

  .form-range-dual .form-range {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
  }

  .form-range-dual .form-range::-webkit-slider-thumb {
    pointer-events: auto;
  }

  .form-range-dual .form-range::-moz-range-thumb {
    pointer-events: auto;
  }

  .form-range-dual .form-range::-webkit-slider-runnable-track {
    background: transparent;
  }

  .form-range-dual .form-range::-moz-range-track {
    background: transparent;
  }

  .form-range-dual-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: var(--range-height);
    background: var(--range-track);
    border-radius: 999px;
    z-index: 0;
  }

  .form-range-dual-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: var(--range-height);
    background: var(--range-fill);
    border-radius: 999px;
    z-index: 1;
    left: var(--range-min, 0%);
    right: calc(100% - var(--range-max, 100%));
  }

  .form-range-tooltip {
    position: absolute;
    bottom: calc(100% - 2px);
    left: var(--range-tooltip-x, 0px);
    transform: translate(-50%, 5px);
    background: #f4f4f5;
    color: #111;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--font-monospace);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
  }

  .form-range-tooltip.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .form-range-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #f4f4f5;
  }

  .form-range-ticks {
    position: relative;
    height: 20px;
    margin-top: 4px;
    width: 100%;
  }

  .form-range-tick {
    position: absolute;
    width: 2px;
    height: 6px;
    background: var(--primary);
    transform: translateX(-50%);
  }

  .form-range-tick-label {
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    font-size: 11px;
    font-family: var(--font-monospace);
    color: var(--body-text);
  }

  .form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
    color: var(--muted);
    opacity: 1;
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--muted);
    opacity: 1;
  }

  .form-input[type="color"] {
    max-width: 4rem;
    height: auto;
    padding: 0.5rem;
  }

  .form-input[type="color"]::-moz-color-swatch,
  .form-input[type="color"]::-webkit-color-swatch {
    height: 1rem;
    border-radius: 0.25rem;
  }

  .form-input[type="color"]:not(:disabled) {
    cursor: pointer;
  }

  .form-input:disabled,
  .form-input[readonly],
  .form-textarea:disabled,
  .form-select:disabled,
  .form-select.is-custom.is-disabled {
    background-color: var(--form-disabled);
    color: var(--form-disabled-text);
    opacity: 1;
    border-color: transparent;
    cursor: not-allowed;
  }

  select.is-custom {
    visibility: hidden;
    pointer-events: none;
  }

  .custom-select {
    width: 100%;
    position: relative;
    color: var(--form-control-text);
    padding: 0.625rem 0.75rem;
    padding-inline-end: calc(20px + 0.125rem);
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 400;
    background-color: var(--form-control);
    border: 1px solid var(--form-control-border);
    border-radius: var(--radius-1);
    background-image: var(--icon-chevron-down);
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 15px 20px;
    background-origin: content;
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .custom-select:not(.is-disabled):focus,
  .custom-select:not(.is-disabled):focus-within {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem oklch(from var(--accent) l c h / 0.18);
  }

  .selected-option {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0;
    border: 0;
    cursor: default;
  }

  .options-container {
    display: none;
    position: absolute;
    background-color: var(--form-control);
    border: 1px solid var(--form-control-border);
    max-height: 200px;
    opacity: 0;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.12);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    transition:
      opacity 200ms ease,
      transform 200ms ease;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
    max-width: 300px;
  }

  .select-option {
    display: flex;
    align-items: center;
    cursor: default;
    padding: 0.5rem 0.75rem;
    line-height: 1.25;
    font-size: 0.875rem;
  }

  .select-option:hover {
    background-color: color-mix(in srgb, var(--accent) 12%, transparent);
    color: color-mix(in srgb, var(--accent) 80%, var(--body-text));
  }

  .custom-select .option-icon {
    vertical-align: middle;
    width: 20px;
    height: 15px;
    margin-inline-end: 10px;
  }

  .select-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--accent);
    color: var(--accent-contrast);
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 99px;
  }

  .tag-remove {
    cursor: pointer;
    opacity: 0.7;
    font-size: 1rem;
    line-height: 1;
  }

  .tag-remove:hover {
    opacity: 1;
  }

  .more-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--muted);
    padding: 2px 6px;
  }

  .form-select {
    display: inline-block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    padding-inline-end: 2.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 400;
    color: var(--form-control-text);
    background-color: var(--form-control);
    border: 1px solid var(--form-control-border);
    border-radius: var(--radius-1);
    background-image: var(--icon-chevron-down);
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 15px 20px;
    background-origin: content;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }

  .form-select:focus {
    outline: 0;
  }

  .form-select[multiple],
  .form-select[size]:not([size="1"]) {
    padding-inline-end: 0.75rem;
    background-image: none;
  }

  .group-checkbox,
  .group-switch,
  .group-radio {
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem;
  }

  .group-checkbox:not(.is-inline),
  .group-switch:not(.is-inline),
  .group-radio:not(.is-inline) {
    display: flex;
    flex-flow: column wrap;
  }

  .group-checkbox.is-inline,
  .group-switch.is-inline,
  .group-radio.is-inline {
    display: inline-flex;
    flex-wrap: wrap;
    padding-inline-start: 0;
    margin-inline-end: 0.7rem;
  }

  .group-checkbox > :last-child:not(.form-checkbox),
  .group-switch > :last-child:not(.form-checkbox),
  .group-radio > :last-child:not(.form-radio) {
    margin-top: calc(0.35em / 2);
  }

  .group-checkbox > :last-child:not(.form-checkbox),
  .group-radio > :last-child:not(.form-radio) {
    padding-inline-start: calc(1px + 0.2rem);
  }

  .group-checkbox > :first-child:not(.form-checkbox),
  .group-radio > :first-child:not(.form-radio) {
    padding-inline-end: calc(1px + 0.2rem);
  }

  .form-checkbox,
  .form-radio {
    --check-size: 1em;
    --check-icon-scale: 0.65;
    --check-radius: 0.25rem;
    --uncheck-icon: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    flex-shrink: 0;
    width: var(--check-size);
    height: var(--check-size);
    margin: 0;
    vertical-align: top;
    background-color: var(--form-control);
    background-image: var(--uncheck-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(var(--check-icon-scale) * 100%);
    background-origin: border-box;
    border: 1px solid var(--form-control-border);
    outline: 2px solid transparent;
    outline-offset: 2px;
    cursor: pointer;
    transition:
      background-color 150ms ease,
      background-image 150ms steps(1),
      border-color 150ms ease,
      outline-color 150ms ease;
  }

  .form-checkbox {
    border-radius: var(--check-radius);
    --check-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M4 10l4 4l8-8'/%3e%3c/svg%3e");
    --indeterminate-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2.5' d='M5 10h10'/%3e%3c/svg%3e");
  }

  .form-radio {
    border-radius: 50%;
    --check-icon: radial-gradient(circle, var(--accent) 0 42%, transparent 44%);
  }

  .form-checkbox:focus-visible:not(:disabled),
  .form-radio:focus-visible:not(:disabled) {
    outline-color: var(--accent);
  }

  .form-checkbox:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: var(--check-icon);
  }

  .form-radio:checked {
    background-color: var(--form-control);
    border-color: var(--accent);
    background-image: var(--check-icon);
    background-size: 100% 100%;
  }

  .form-checkbox:indeterminate {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: var(--indeterminate-icon);
  }

  .form-checkbox:user-invalid:indeterminate,
  .form-checkbox.user-invalid:indeterminate {
    background-color: var(--danger);
    border-color: var(--danger);
  }

  .form-checkbox:user-invalid,
  .form-checkbox.user-invalid,
  .form-radio:user-invalid,
  .form-radio.user-invalid {
    border-color: var(--danger);
  }

  .form-checkbox:user-invalid:focus-visible:not(:disabled),
  .form-checkbox.user-invalid:focus-visible:not(:disabled),
  .form-radio:user-invalid:focus-visible:not(:disabled),
  .form-radio.user-invalid:focus-visible:not(:disabled) {
    outline-color: var(--danger);
  }

  .form-checkbox:user-invalid:checked {
    background-color: var(--danger);
    border-color: var(--danger);
  }

  .form-radio:user-invalid:checked {
    border-color: var(--danger);
  }

  .form-checkbox:disabled,
  .form-radio:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: color-mix(
      in oklch,
      var(--form-control) 92%,
      var(--form-control-border)
    );
  }

  .form-checkbox:disabled:checked,
  .form-checkbox:disabled:indeterminate {
    background-color: var(--form-control-border);
    border-color: var(--form-control-border);
  }

  .form-radio:disabled:checked {
    border-color: var(--form-control-border);
  }

  .group.floating-label {
    position: relative;
    overflow: visible;
  }

  .floating-label > .form-input,
  .floating-label > .form-select {
    height: calc(3rem + 2px);
    box-sizing: border-box;
    padding-inline-start: 0.75rem;
    line-height: 1.25;
  }

  .floating-label > .form-input {
    padding-block: 1.125rem 0.375rem;
  }

  .floating-label > .form-select {
    padding-block: 0.75rem;
    padding-inline-end: 2.25rem;
  }

  .floating-label > .form-textarea {
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
    padding-block: 1.125rem 0.375rem;
  }

  .floating-label > select ~ label.select-label {
    opacity: 0;
  }

  .floating-label > label {
    position: absolute;
    top: 50%;
    z-index: 5;
    inset-inline-start: 0.75rem;
    transform: translateY(-50%) scale(1);
    transform-origin: left top;
    font-size: 1rem;
    color: var(--muted);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 1.5rem);
    background-color: transparent;
    transition:
      top 180ms ease,
      transform 180ms ease,
      color 180ms ease;
    will-change: transform;
  }

  .floating-label > .form-input::-moz-placeholder, .floating-label > .form-textarea::-moz-placeholder {
    color: transparent;
  }

  .floating-label > .form-input::placeholder,
  .floating-label > .form-textarea::placeholder {
    color: transparent;
  }

  .floating-label > .form-input:focus::-moz-placeholder, .floating-label > .form-textarea:focus::-moz-placeholder {
    color: var(--muted);
  }

  .floating-label > .form-input:focus::placeholder,
  .floating-label > .form-textarea:focus::placeholder {
    color: var(--muted);
  }

  .floating-label > .form-input:focus ~ label,
  .floating-label > .form-input:not(:placeholder-shown) ~ label,
  .floating-label > .form-textarea:focus ~ label,
  .floating-label > .form-textarea:not(:placeholder-shown) ~ label,
  .floating-label > .form-input:-webkit-autofill ~ label,
  .floating-label > .form-textarea:-webkit-autofill ~ label,
  .floating-label > select ~ label.select-label.floating-label-visible {
    top: 0.25rem;
    transform: translateY(0) scale(0.75);
    color: var(--muted);
    opacity: 1;
  }

  .floating-label > .form-input.is-large,
.floating-label > .form-select.is-large,
.floating-label > .form-textarea.is-large {
  padding-inline-start: 1.25rem;
}

.floating-label > .form-input.is-large,
.floating-label > .form-textarea.is-large {
  padding-block: 1.25rem 0.375rem;
}

.floating-label > .form-textarea.is-large {
  padding-inline-end: 1.25rem;
}

.floating-label > .form-select.is-large {
  padding-block: 0.875rem;
  padding-inline-end: 3rem;
}

.floating-label > .form-input.is-large ~ label,
.floating-label > .form-textarea.is-large ~ label,
.floating-label > select.is-large ~ label.select-label {
  inset-inline-start: 1.25rem;
  font-size: 1.125rem;
}

.floating-label > .form-input.is-large:focus ~ label,
.floating-label > .form-input.is-large:not(:placeholder-shown) ~ label,
.floating-label > .form-textarea.is-large:focus ~ label,
.floating-label > .form-textarea.is-large:not(:placeholder-shown) ~ label,
.floating-label > .form-input.is-large:-webkit-autofill ~ label,
.floating-label > .form-textarea.is-large:-webkit-autofill ~ label,
.floating-label > select.is-large ~ label.select-label.floating-label-visible {
  top: 0.375rem;
}

  .form-feedback {
    width: 100%;
    margin: 0.125rem 0;
    font-size: 0.75em;
    text-align: start;
    color: var(--body-text);
  }

  .form-feedback.is-valid {
    display: none;
    color: var(--success);
  }

  .form-feedback.is-invalid {
    display: none;
    color: var(--danger);
  }

  .form-feedback.is-server.with-success {
    color: var(--success);
  }

  .form-feedback.is-server.with-error {
    color: var(--danger);
  }

  .form-input:user-invalid ~ .form-feedback.is-invalid,
  .form-input.user-invalid ~ .form-feedback.is-invalid,
  .form-textarea:user-invalid ~ .form-feedback.is-invalid,
  .form-textarea.user-invalid ~ .form-feedback.is-invalid,
  .form-select:user-invalid ~ .form-feedback.is-invalid,
  .form-select.user-invalid ~ .form-feedback.is-invalid,
  .form-file:user-invalid ~ .form-feedback.is-invalid,
  .form-file.user-invalid ~ .form-feedback.is-invalid,
  .form-checkbox:user-invalid ~ .form-feedback.is-invalid,
  .form-checkbox.user-invalid ~ .form-feedback.is-invalid,
  .form-radio:user-invalid ~ .form-feedback.is-invalid,
  .form-radio.user-invalid ~ .form-feedback.is-invalid {
    display: block;
  }

  .form-input:is([data-rule], [data-regex]):user-valid
    ~ .form-feedback.is-valid,
  .form-input.user-valid ~ .form-feedback.is-valid,
  .form-textarea:is([data-rule], [data-regex]):user-valid
    ~ .form-feedback.is-valid,
  .form-textarea.user-valid ~ .form-feedback.is-valid,
  .form-select:is([data-rule], [data-regex]):user-valid
    ~ .form-feedback.is-valid,
  .form-select.user-valid ~ .form-feedback.is-valid,
  .form-file:is([data-rule], [data-regex]):user-valid ~ .form-feedback.is-valid,
  .form-file.user-valid ~ .form-feedback.is-valid,
  .form-checkbox:is([data-rule], [data-regex]):user-valid
    ~ .form-feedback.is-valid,
  .form-checkbox.user-valid ~ .form-feedback.is-valid,
  .form-radio:is([data-rule], [data-regex]):user-valid
    ~ .form-feedback.is-valid,
  .form-radio.user-valid ~ .form-feedback.is-valid {
    display: block;
  }

  .group:has(
      .form-checkbox:user-invalid,
      .form-checkbox.user-invalid,
      .form-radio:user-invalid,
      .form-radio.user-invalid
    )
    > .form-feedback.is-invalid {
    display: block;
  }
  .group:has(
      .form-checkbox:is([data-rule], [data-regex]):user-valid,
      .form-checkbox.user-valid,
      .form-radio:is([data-rule], [data-regex]):user-valid,
      .form-radio.user-valid
    )
    > .form-feedback.is-valid {
    display: block;
  }

  .form-input:user-invalid,
  .form-input.user-invalid,
  .form-textarea:user-invalid,
  .form-textarea.user-invalid {
    background-image: var(--icon-invalid);
    background-repeat: no-repeat;
    background-position: right 0.625em center;
    background-size: 0.875em;
    border-color: var(--danger);
    box-shadow: none;
    padding-inline-end: 2.5em;
  }

  .form-input:user-invalid:focus,
  .form-input.user-invalid:focus,
  .form-textarea:user-invalid:focus,
  .form-textarea.user-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.25rem oklch(from var(--danger) l c h / 0.25);
  }

  .form-input:is([data-rule], [data-regex]):user-valid,
  .form-input.user-valid,
  .form-textarea:is([data-rule], [data-regex]):user-valid,
  .form-textarea.user-valid {
    background-image: var(--icon-valid);
    background-repeat: no-repeat;
    background-position: right 0.625em center;
    background-size: 0.875em;
    border-color: var(--success);
    z-index: 2;
    padding-inline-end: 2.5em;
  }

  .form-input:is([data-rule], [data-regex]):user-valid:focus,
  .form-input.user-valid:focus,
  .form-textarea:is([data-rule], [data-regex]):user-valid:focus,
  .form-textarea.user-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 0.25rem oklch(from var(--success) l c h / 0.25);
  }

  .form-select:user-invalid,
  .form-select.user-invalid {
    background-image: var(--icon-chevron-down), var(--icon-invalid);
    background-repeat: no-repeat, no-repeat;
    background-position:
      right 0.5rem center,
      right 1.75rem center;
    background-size:
      15px 20px,
      0.875em;
    border-color: var(--danger);
    box-shadow: none;
    padding-inline-end: 3.25rem;
  }

  .form-select:user-invalid:focus,
  .form-select.user-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.25rem oklch(from var(--danger) l c h / 0.25);
  }

  .form-select:is([data-rule], [data-regex]):user-valid,
  .form-select.user-valid,
  .custom-select.user-valid {
    background-image: var(--icon-chevron-down), var(--icon-valid);
    background-repeat: no-repeat, no-repeat;
    background-position:
      right 0.5rem center,
      right 1.75rem center;
    background-size:
      15px 20px,
      0.875em;
    border-color: var(--success);
    padding-inline-end: 3.25rem;
  }

  .form-select:is([data-rule], [data-regex]):user-valid:focus,
  .form-select.user-valid:focus,
  .custom-select.user-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 0.25rem oklch(from var(--success) l c h / 0.25);
  }

  .form-file:user-invalid,
  .form-file.user-invalid {
    background-image: var(--icon-invalid);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.875em;
    border-color: var(--danger);
    box-shadow: none;
  }

  .form-file:user-invalid:focus,
  .form-file.user-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.25rem oklch(from var(--danger) l c h / 0.25);
  }

  .form-checkbox:user-invalid ~ .form-label,
  .form-checkbox.user-invalid ~ .form-label {
    color: var(--danger);
  }

  .form-radio:user-invalid ~ .form-label,
  .form-radio.user-invalid ~ .form-label {
    color: var(--danger);
  }

  .floating-label > .form-input:user-invalid ~ label,
  .floating-label > .form-input.user-invalid ~ label,
  .floating-label > .form-select:user-invalid ~ label,
  .floating-label > .form-select.user-invalid ~ label,
  .floating-label > .form-textarea:user-invalid ~ label,
  .floating-label > .form-textarea.user-invalid ~ label {
    color: var(--danger);
  }

  .group-input > .form-input:user-invalid,
  .group-input > .form-input.user-invalid,
  .group-input > .form-textarea:user-invalid,
  .group-input > .form-textarea.user-invalid,
  .group-input > .form-select:user-invalid,
  .group-input > .form-select.user-invalid {
    z-index: 2;
  }

  .group-input > .form-input:user-invalid:focus,
  .group-input > .form-input.user-invalid:focus,
  .group-input > .form-textarea:user-invalid:focus,
  .group-input > .form-textarea.user-invalid:focus,
  .group-input > .form-select:user-invalid:focus,
  .group-input > .form-select.user-invalid:focus {
    z-index: 4;
  }

  .group-input > .form-input:is([data-rule], [data-regex]):user-valid,
  .group-input > .form-input.user-valid,
  .group-input > .form-textarea:is([data-rule], [data-regex]):user-valid,
  .group-input > .form-textarea.user-valid,
  .group-input > .form-select:is([data-rule], [data-regex]):user-valid,
  .group-input > .form-select.user-valid {
    z-index: 2;
  }

  .group-file > .form-file {
    width: 0.1px;
    height: 0.1px;
    position: absolute;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
  }

  .group-file > .form-label {
    display: inline-block;
    background-color: var(--accent);
    color: oklch(from var(--accent) calc((0.6 - l) * 999) 0 h);
    padding: 0.325rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
  }

  .group-file > i {
    padding-inline-end: 0.125rem;
  }

  .group-file > .upload-display {
    display: inline-block;
    background-color: transparent;
    color: var(--body-text);
    padding: 0.325rem 0.5rem;
    white-space: normal;
    font-size: 1rem;
    font-weight: 400;
    font-family: inherit;
  }

  .group-file > .form-label * {
    pointer-events: none;
  }

  .group-file > .form-label:focus,
  .group-file > .form-label:hover {
    opacity: 0.75;
    outline: 0;
  }

  .group-switch {
    position: relative;
  }

  .group-switch > .form-label {
    margin: 0 0.25rem;
  }

  .group-switch > .form-checkbox {
    width: 2.5em;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 12 12'%3E%3Cg fill='none'%3E%3Ccircle cx='6' cy='6' r='3' fill='%23f3f3f3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left 0rem center;
    background-color: oklch(50% 0 0 / 0.25);
    border-color: transparent;
    border-radius: 2em;
    transition: background-position 180ms ease-out;
  }

  .group-switch > .form-checkbox:not(:checked):not(:disabled) {
    box-shadow: none;
  }

  .group-switch > .form-checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 12 12'%3E%3Cg fill='none'%3E%3Ccircle cx='6' cy='6' r='3' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-position: right 0rem center;
    background-color: var(--accent);
  }

  .group-switch > .form-checkbox:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 12 12'%3E%3Cg fill='none'%3E%3Ccircle cx='6' cy='6' r='3' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-position: right 0rem center;
    pointer-events: none;
  }

  .group-switch > .form-checkbox:not(:checked):disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 12 12'%3E%3Cg fill='none'%3E%3Ccircle cx='6' cy='6' r='3' fill='%23f3f3f3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-position: left 0rem center;
    background-color: oklch(50% 0 0 / 0.15);
    border-color: transparent;
  }

  .group-input {
    display: flex;
    align-items: stretch;
    width: 100%;
  }

  .group-input > .form-input,
  .group-input > .form-select,
  .group-input > .form-file,
  .group-input > .form-textarea {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
  }

  .group-input > .form-input:focus,
  .group-input > .form-select:focus,
  .group-input > .form-textarea:focus,
  .group-input > .form-file:focus {
    z-index: 4;
  }

  .input-prepend,
  .input-append {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--body-text);
    text-align: center;
    white-space: nowrap;
    background-color: oklch(50% 0 0 / 0.06);
    border: 1px solid var(--form-control-border);
    border-radius: 0.325rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.87em 0.87em;
  }

  .group-input .button {
    position: relative;
    z-index: 2;
  }

  .group-input > .button:focus {
    z-index: 3;
  }

  .group-input > .input-prepend + .form-input,
  .group-input > .input-prepend + .form-select,
  .group-input > .input-prepend + .form-textarea,
  .group-input > .input-prepend + .form-file {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  .input-prepend {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    margin-inline-end: -1px;
  }

  .input-append {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: -1px;
  }

  .group-input > :first-child:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  .group-input > :last-child:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  .group-input > :not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  .form-submit-button,
  .form-reset-button {
    border: 1px solid transparent;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.25;
    background-color: var(--surface);
    color: var(--body-text);
    padding: 0.5rem;
    text-align: center;
    border-radius: 0.25rem;
    cursor: pointer;
  }

  .form-input.is-medium,
  .form-select.is-medium,
  .form-textarea.is-medium,
  .form-file.is-medium,
  .input-prepend.is-medium,
  .input-append.is-medium {
    padding: 0.625rem 1rem;
    font-size: 1rem;
    min-height: 2.75rem;
  }

  .form-input.is-large,
  .form-select.is-large,
  .form-textarea.is-large,
  .form-file.is-large,
  .input-prepend.is-large,
  .input-append.is-large {
    padding: 0.875rem 1.25rem;
    font-size: 1.125rem;
    min-height: 3.5rem;
    border-radius: 0.5rem;
  }

  .form-select.is-medium {
    padding-inline-end: 2.5rem;
  }
  .form-select.is-large {
    padding-inline-end: 3rem;
  }

  .form-file.is-large::file-selector-button,
  .form-file.is-large::-webkit-file-upload-button {
    padding: 0.875rem 1.25rem;
    font-size: 1.125rem;
    margin-inline-end: 1.25rem;
  }

  .form-checkbox.is-medium,
  .form-radio.is-medium {
    width: 1.25em;
    height: 1.25em;
  }
  .form-checkbox.is-large,
  .form-radio.is-large {
    width: 1.5em;
    height: 1.5em;
  }

  .group-switch > .form-checkbox.is-medium {
    padding: 0;
    width: 3rem;
    height: 1.5rem;
  }
  .group-switch > .form-checkbox.is-large {
    padding: 0;
    width: 3.5rem;
    height: 1.75rem;
  }

  .group-file > .form-label.is-medium {
    padding: 0.625rem 1rem;
    font-size: 1rem;
  }
  .group-file > .form-label.is-large {
    padding: 0.875rem 1.25rem;
    font-size: 1.125rem;
  }

  .group-input-icon {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .group-input-icon .form-input {
    width: 100%;
  }
  .group-input-icon:has(.input-slot-start) .form-input {
    padding-inline-start: var(--input-slot-start, 2.5rem);
  }
  .group-input-icon:has(.input-slot-end) .form-input {
    padding-inline-end: var(--input-slot-end, 2.5rem);
  }

  .input-slot-start,
  .input-slot-end {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 1;
    pointer-events: none;
  }
  .input-slot-start {
    left: 0;
    width: var(--input-slot-width, 2.5rem);
    height: 100%;
    justify-content: center;
    color: var(--muted);
  }
  .input-slot-end {
    right: 0.5rem;
    justify-content: flex-end;
    gap: 0.375rem;
    max-width: calc(100% - 1rem);
    white-space: nowrap;
  }

  .input-slot-end > * {
    flex-shrink: 0;
  }
  .input-slot-end button,
  .input-slot-end a,
  .input-slot-end [role="button"],
  .input-slot-end .is-clickable {
    pointer-events: auto;
  }
  .input-slot-start i,
  .input-slot-start svg,
  .input-slot-end i,
  .input-slot-end svg {
    display: block;
    flex-shrink: 0;
    line-height: 1;
  }

  .group-input-icon:focus-within .input-icon {
    color: var(--accent);
  }

  [dir="rtl"] .floating-label > label,
  :dir(rtl) .floating-label > label {
    transform-origin: top right;
    left: auto;
    right: 0.75rem;
  }

  [dir="rtl"] .form-select,
  [dir="rtl"] .custom-select,
  :dir(rtl) .form-select,
  :dir(rtl) .custom-select {
    background-position: left 0.5rem center !important;
  }

  [dir="rtl"] .form-input:user-invalid,
  [dir="rtl"] .form-input.user-invalid,
  [dir="rtl"] .form-textarea:user-invalid,
  [dir="rtl"] .form-textarea.user-invalid,
  [dir="rtl"] .form-input:is([data-rule], [data-regex]):user-valid,
  [dir="rtl"] .form-input.user-valid,
  [dir="rtl"] .form-textarea:is([data-rule], [data-regex]):user-valid,
  [dir="rtl"] .form-textarea.user-valid,
  :dir(rtl) .form-input:user-invalid,
  :dir(rtl) .form-input.user-invalid,
  :dir(rtl) .form-textarea:user-invalid,
  :dir(rtl) .form-textarea.user-invalid,
  :dir(rtl) .form-input:is([data-rule], [data-regex]):user-valid,
  :dir(rtl) .form-input.user-valid,
  :dir(rtl) .form-textarea:is([data-rule], [data-regex]):user-valid,
  :dir(rtl) .form-textarea.user-valid {
    background-position: left 0.625em center !important;
  }

  [dir="rtl"] .form-select:user-invalid,
  [dir="rtl"] .form-select.user-invalid,
  [dir="rtl"] .form-select:is([data-rule], [data-regex]):user-valid,
  [dir="rtl"] .form-select.user-valid,
  [dir="rtl"] .custom-select.user-valid,
  :dir(rtl) .form-select:user-invalid,
  :dir(rtl) .form-select.user-invalid,
  :dir(rtl) .form-select:is([data-rule], [data-regex]):user-valid,
  :dir(rtl) .form-select.user-valid,
  :dir(rtl) .custom-select.user-valid {
    background-position:
      left 0.5rem center,
      left 1.75rem center !important;
  }

  [dir="rtl"] .input-slot-start,
  :dir(rtl) .input-slot-start {
    left: auto !important;
    right: 0 !important;
  }

  [dir="rtl"] .input-slot-end,
  :dir(rtl) .input-slot-end {
    right: auto !important;
    left: 0.5rem !important;
  }

  [dir="rtl"] .group-switch > .form-checkbox,
  :dir(rtl) .group-switch > .form-checkbox {
    background-position: right 0rem center;
  }

  [dir="rtl"] .group-switch > .form-checkbox:checked,
  :dir(rtl) .group-switch > .form-checkbox:checked {
    background-position: left 0rem center;
  }
  .modal {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    overflow: hidden;
    z-index: var(--z-modal);
    visibility: hidden;
    pointer-events: none;
    background-color: oklch(0% 0 0 / 0);
    backdrop-filter: blur(0);
    transition:
      background-color var(--modal-duration) ease,
      backdrop-filter var(--modal-duration) ease,
      visibility 0s linear calc(var(--modal-duration) + 40ms);
  }

  .modal.is-open {
    visibility: visible;
    pointer-events: auto;
    background-color: oklch(0% 0 0 / 0.5);
    backdrop-filter: blur(6px);
    transition:
      background-color var(--modal-duration) ease,
      backdrop-filter var(--modal-duration) ease,
      visibility 0s linear 0s;
  }

  .modal > .modal-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 90%;
    max-height: 100dvh;
    position: relative;
    background-color: var(--surface);
    color: var(--body-text);
    background-clip: padding-box;
    padding: var(--modal-padding);
    border-radius: var(--modal-radius);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    box-sizing: border-box;
    outline: 0;
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.96);
    transition:
      transform var(--modal-duration) cubic-bezier(0.16, 1, 0.3, 1),
      opacity var(--modal-duration) ease;
    will-change: transform, opacity;
  }

  .modal.is-open > .modal-dialog {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .modal.is-center {
    align-items: center;
  }

  .modal.is-center:not(.is-open) > .modal-dialog {
    transform: translate3d(0, 16px, 0) scale(0.96);
  }

  .modal.is-top {
    align-items: flex-start;
  }

  .modal.is-top:not(.w-full) > .modal-dialog {
    margin-top: 2rem;
  }

  .modal.is-top:not(.is-open) > .modal-dialog {
    transform: translate3d(0, -28px, 0) scale(0.96);
  }

  .modal.is-bottom {
    align-items: flex-end;
  }

  .modal.is-bottom:not(.w-full) > .modal-dialog {
    margin-bottom: 2rem;
  }

  .modal.is-bottom:not(.is-open) > .modal-dialog {
    transform: translate3d(0, 28px, 0) scale(0.96);
  }

  @media (min-width: var(--breakpoint-sm)) {
    .modal:not(.w-full) > .modal-dialog {
      max-width: var(--modal-max-w-sm);
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .modal:not(.w-full) > .modal-dialog {
      max-width: var(--modal-max-w-md);
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .modal:not(.w-full) > .modal-dialog {
      max-width: var(--modal-max-w-lg);
    }
  }

  .modal-header {
    font-size: 1.375rem;
    font-weight: 600;
    text-align: center;
    padding: 0;
    margin: 0;
    color: var(--body-text);
    line-height: 1.3;
  }

  .modal-body {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--muted);
    overflow-y: auto;
  }

  .modal-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
  }

  .status-icon {
    width: var(--modal-icon-size, 80px);
    height: var(--modal-icon-size, 80px);
    margin: 0 auto;
    position: relative;
    flex-shrink: 0;
  }

  .status-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  .status-icon.is-success {
    color: var(--success);
  }

  .status-icon.is-error {
    color: var(--danger);
  }

  .status-icon.is-warning {
    color: var(--warning);
  }

  .status-icon.is-info {
    color: var(--info);
  }

  .status-ring,
  .status-mark {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .status-ring {
    stroke-width: 3.25;
    stroke-dasharray: 210;
    stroke-dashoffset: 210;
  }

  .status-icon.is-warning .status-ring {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
  }

  .status-mark {
    stroke-width: 4.25;
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
  }

  .status-icon.is-info .status-mark,
  .status-icon.is-warning .status-mark {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
  }

  .status-dot {
    fill: currentColor;
    transform-origin: center;
    transform: scale(0);
  }

  .status-icon.is-animated {
    animation: springScaleEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .status-icon.is-animated .status-ring {
    animation: strokeDraw 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.1s;
  }

  .status-icon.is-animated .status-mark {
    animation: strokeDraw 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
  }

  .status-icon.is-error.is-animated .status-mark.is-second {
    animation-delay: 0.4s;
  }

  .status-icon.is-animated .status-dot {
    animation: dotPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.4s;
  }

  @keyframes springScaleEnter {
    0% {
      opacity: 0;
      transform: scale(0.6);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes strokeDraw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes dotPop {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  .spinner {
    display: inline-block;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
  }

  .spinner:not(.is-growing) {
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    background-color: transparent;
    animation: default-spinner 0.65s linear infinite;
  }

  .spinner.is-growing {
    border: 0;
    animation: growing-spinner 0.65s linear infinite;
  }

  .spinner.is-medium {
    width: 2em;
    height: 2em;
    border-width: calc(1px + 0.125rem);
  }

  .spinner.is-large {
    width: 3em;
    height: 3em;
    border-width: calc(1px + 0.2rem);
  }

  @keyframes default-spinner {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes growing-spinner {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }
  .progress {
    display: flex;
    width: 100%;
    position: relative;
    background-color: color-mix(
      in oklch,
      var(--progress-track, var(--primary)) 14%,
      transparent
    );
    height: 0.75em;
    font-size: 0.85em;
    overflow: hidden;
    border-radius: 0.325rem;
  }

  .progress.is-medium {
    height: 1.5rem;
    border-radius: 0.725rem;
    font-size: 0.85rem;
  }

  .progress.is-large {
    height: 2.5rem;
    border-radius: 1rem;
    font-size: 1rem;
  }

  .progress-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--progress-track, var(--primary));
    color: oklch(
      from var(--progress-track, var(--primary)) calc((0.72 - l) * infinity) 0 0
    );
    height: inherit;
    overflow: hidden;
    white-space: nowrap;
    border-radius: inherit;
    transition: width 350ms ease;
    font-size: 0.75em;
    font-weight: 500;
  }

  .progress-bar.is-striped {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      -45deg,
      oklch(1 0 0 / 0.18) 25%,
      transparent 25%,
      transparent 50%,
      oklch(1 0 0 / 0.18) 50%,
      oklch(1 0 0 / 0.18) 75%,
      transparent 75%,
      transparent
    );
    z-index: 2;
    background-size: 0.9rem 0.9rem;
    pointer-events: none;
  }

  .progress.is-success {
    --progress-track: var(--success);
  }

  .progress.is-danger {
    --progress-track: var(--danger);
  }

  .progress.is-warning {
    --progress-track: var(--warning);
  }

  .progress.is-info {
    --progress-track: var(--info);
  }

  .progress.is-animated .progress-bar.is-striped {
    animation: progress-striped 1s linear infinite;
  }

  @keyframes progress-striped {
    from {
      background-position: 0px 0px;
    }
    to {
      background-position: 0.9rem 0.9rem;
    }
  }
  .tooltip {
    --tooltip-bg: oklch(22% 0 0);
    --tooltip-arrow-size: 0.5rem;
    --tooltip-arrow-half: calc(var(--tooltip-arrow-size) / 2);
    --tooltip-arrow-radius: 2px;
    --tooltip-arrow-inset: 12px;
    position: absolute;
    max-width: 20rem;
    background-color: var(--tooltip-bg);
    color: oklch(95% 0 0);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.87rem;
    line-height: 1.4;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 200ms ease,
      transform 200ms ease;
    z-index: var(--z-tooltip);
  }

  [fa-theme="dark"] .tooltip {
    --tooltip-bg: oklch(28% 0 0);
  }

  .tooltip.is-open {
    opacity: 0.95;
    visibility: visible;
    pointer-events: auto;
  }

  .tooltip::after {
    content: "";
    position: absolute;
    display: none;
    width: var(--tooltip-arrow-size);
    height: var(--tooltip-arrow-size);
    background: var(--tooltip-bg);
    border-radius: var(--tooltip-arrow-radius);
    transform: rotate(45deg);
    z-index: -1;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
  }

  .tooltip.has-arrow::after {
    display: block;
  }
  .tooltip.is-top {
    bottom: calc(100% + 6px);
    left: 0;
    right: auto;
    transform: translateY(-6px);
  }
  .tooltip.is-top::after {
    top: 100%;
    left: var(--tooltip-arrow-inset);
    margin-top: calc(var(--tooltip-arrow-half) * -1);
  }

  .tooltip.is-bottom {
    top: calc(100% + 6px);
    left: 0;
    transform: translateY(6px);
  }
  .tooltip.is-bottom::after {
    top: 0;
    left: var(--tooltip-arrow-inset);
    margin-top: calc(var(--tooltip-arrow-half) * -1);
  }

  [dir="rtl"] .tooltip.is-top::after,
  [dir="rtl"] .tooltip.is-bottom::after {
    left: auto;
    right: var(--tooltip-arrow-inset);
  }
  .tooltip.is-left {
    right: calc(100% + 6px);
    top: 0;
    transform: translateX(-6px);
  }
  .tooltip.is-left::after {
    right: 0;
    top: var(--tooltip-arrow-inset);
    margin-right: calc(var(--tooltip-arrow-half) * -1);
  }

  [dir="rtl"] .tooltip.is-left {
    right: auto;
    left: calc(100% + 6px);
  }
  [dir="rtl"] .tooltip.is-left::after {
    right: auto;
    left: 0;
    margin-right: 0;
    margin-left: calc(var(--tooltip-arrow-half) * -1);
  }

  .tooltip.is-right {
    left: calc(100% + 6px);
    top: 0;
    transform: translateX(6px);
  }
  .tooltip.is-right::after {
    left: 0;
    top: var(--tooltip-arrow-inset);
    margin-left: calc(var(--tooltip-arrow-half) * -1);
  }

  [dir="rtl"] .tooltip.is-right {
    left: auto;
    right: calc(100% + 6px);
  }
  [dir="rtl"] .tooltip.is-right::after {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: calc(var(--tooltip-arrow-half) * -1);
  }
  .popover {
    --popover-bg: var(--surface-raised);
    --popover-color: var(--body-text);
    --popover-arrow-size: 0.625rem;
    --popover-arrow-half: calc(var(--popover-arrow-size) / 2);
    --popover-arrow-radius: 2px;
    --popover-shadow:
      0 1px 2px rgb(15 23 42 / 0.04), 0 8px 16px -4px rgb(15 23 42 / 0.08),
      0 24px 48px -12px rgb(15 23 42 / 0.14);
    --popover-max-width: min(22rem, calc(100vw - 1rem));
    --popover-duration: 180ms;
    position: absolute;
    z-index: var(--z-popover);
    width: -moz-max-content;
    width: max-content;
    min-width: 12rem;
    max-width: var(--popover-max-width);
    color: var(--popover-color);
    background: var(--popover-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-large);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 0.375rem, 0) scale(0.97);
    transform-origin: center center;

    overflow: visible;
    transition:
      opacity var(--popover-duration) ease,
      visibility var(--popover-duration) ease,
      transform var(--popover-duration) cubic-bezier(0.16, 1, 0.3, 1);
  }

  .popover.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .popover-header {
    padding: 0.75rem 0.875rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--popover-color);
    border-bottom: 1px solid var(--popover-border);
  }

  .popover-body {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--popover-muted);
  }

  .popover-header + .popover-body {
    padding-top: 0.625rem;
  }

  .popover.has-arrow {
    isolation: isolate;
  }

  .popover.has-arrow::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: var(--popover-arrow-size);
    height: var(--popover-arrow-size);
    background: var(--popover-bg);
    border: 1px solid var(--popover-border);
    border-radius: var(--popover-arrow-radius);
    pointer-events: none;
  }

  .popover-header,
  .popover-body {
    position: relative;
    z-index: 1;
    background: var(--popover-bg);
  }

  .popover.is-top {
    transform-origin: bottom center;
    transform: translate3d(0, -0.375rem, 0) scale(0.97);
  }

  .popover.is-top.is-open {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .popover.is-top.has-arrow::before {
    bottom: calc(var(--popover-arrow-half) * -1);
    left: 50%;
    margin-inline-start: calc(var(--popover-arrow-half) * -1);
    transform: rotate(45deg);
  }

  .popover.is-bottom {
    transform-origin: top center;
    transform: translate3d(0, 0.375rem, 0) scale(0.97);
  }

  .popover.is-bottom.is-open {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .popover.is-bottom.has-arrow::before {
    top: calc(var(--popover-arrow-half) * -1);
    left: 50%;
    margin-inline-start: calc(var(--popover-arrow-half) * -1);
    transform: rotate(45deg);
  }

  .popover.is-left {
    transform-origin: center right;
    transform: translate3d(-0.375rem, 0, 0) scale(0.97);
  }

  .popover.is-left.is-open {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .popover.is-left.has-arrow::before {
    top: 50%;
    right: calc(var(--popover-arrow-half) * -1);
    margin-top: calc(var(--popover-arrow-half) * -1);
    transform: rotate(45deg);
  }

  .popover.is-right {
    transform-origin: center left;
    transform: translate3d(0.375rem, 0, 0) scale(0.97);
  }

  .popover.is-right.is-open {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .popover.is-right.has-arrow::before {
    top: 50%;
    left: calc(var(--popover-arrow-half) * -1);
    margin-top: calc(var(--popover-arrow-half) * -1);
    transform: rotate(45deg);
  }

  [fa-theme="dark"] .popover {
    --popover-shadow:
      0 0 0 1px rgb(255 255 255 / 0.04) inset, 0 8px 16px -4px rgb(0 0 0 / 0.3),
      0 24px 48px -12px rgb(0 0 0 / 0.55);
  }
  .fa-toast-container {
    position: fixed;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: var(--z-toast);
    pointer-events: none;
  }

  .fa-toast-container-bottom {
    bottom: 2rem;
    flex-direction: column-reverse;
  }

  .fa-toast-container-top {
    top: 2rem;
  }

  .toast {
    --toast-bg: var(--dark);
    --toast-text: var(--light);
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 1rem;
    width: min(80%, 500px);
    max-width: 450px;
    min-height: 2rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-2);
    pointer-events: auto;
    background-color: var(--toast-bg);
    color: var(--toast-text);
    opacity: 0;
    transition:
      transform 250ms ease-out,
      opacity 250ms ease-out;
  }

  .toast.is-active {
    opacity: 1;
    transform: translateY(0) !important;
  }

  .toast:not(.is-top) {
    transform: translateY(30px);
  }

  .toast.is-top {
    transform: translateY(-30px);
  }

  .toast > .toast-icon {
    width: 2em;
    padding: 0rem 1rem;
  }

  .toast.has-icon::before {
    position: absolute;
    left: 0.5rem;
    width: 1em;
    height: 1em;
  }

  .toast.has-icon {
    padding-inline-start: calc(0.5rem + 1.5em + 3px);
  }

  .toast-progress {
    height: 3px;
    background: oklch(100% 0 0 / 0.4);
    width: 100%;
    margin-top: 0.3rem;
    border-radius: 0.25rem;
    position: absolute;
    bottom: 0;
  }

  .toast.has-icon.is-success::before {
    content: var(--icon-alert-success-inverse);
  }
  .toast.has-icon.is-danger::before {
    content: var(--icon-alert-danger-inverse);
  }
  .toast.has-icon.is-warning::before {
    content: var(--icon-alert-warning-inverse);
  }
  .toast.has-icon.is-info::before {
    content: var(--icon-alert-info-inverse);
  }

  .toast.has-icon:not(.is-success):not(.is-danger):not(.is-warning):not(
      .is-info
    ) {
    background-color: oklch(22% 0 0);
    color: oklch(95% 0 0);
  }

  [fa-theme="dark"]
    .toast.has-icon:not(.is-success):not(.is-danger):not(.is-warning):not(
      .is-info
    ) {
    background-color: oklch(28% 0 0);
  }

  .toast.is-success {
    --toast-bg: var(--success);
    --toast-text: #fff;
  }

  .toast.is-danger {
    --toast-bg: var(--danger);
    --toast-text: #fff;
  }

  .toast.is-info {
    --toast-bg: var(--info);
    --toast-text: #fff;
  }

  .toast.is-warning {
    --toast-bg: var(--warning);
    --toast-text: #fff;
  }
  .listview {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    background-color: var(--surface);
    border: 1px solid transparent;
    border-radius: 0.5rem;
    overflow: hidden;
    list-style: none;
  }

  .listview > .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: 0.875rem 1rem;
    color: var(--body-text);
    background-color: var(--surface);
    border: 1px solid transparent;
    border-bottom: 1px solid oklch(50% 0 0 / 0.12);
    text-decoration: none;
    transition:
      background-color 200ms ease,
      color 200ms ease;
  }

  .listview > .list-item:last-child {
    border-bottom: none;
  }

  .listview > .list-item .list-start {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-inline-end: 1rem;
    min-width: 1.5rem;
    color: var(--muted);
  }

  .list-icon {
    font-size: 1.25rem;
    line-height: 1;
    display: inline-block;
  }

  .listview > .list-item .list-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
  }

  .list-title {
    font-size: 1rem;
    font-weight: 500;
    color: inherit;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .list-subtitle {
    font-size: 0.875rem;
    color: var(--muted);
    margin-top: 0.25rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .listview > .list-item .list-end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-inline-start: 1rem;
    font-size: 0.875rem;
    color: var(--muted);
  }

  .listview.is-hoverable > .list-item:hover:not(.is-disabled):not(.is-active) {
    background-color: oklch(from var(--body-text) l c h / 0.05);
    cursor: pointer;
    z-index: 1;
  }

  .listview.is-striped .list-item:nth-child(even) {
    background-color: oklch(50% 0 0 / 0.04);
  }

  .listview > .list-item.is-active {
    background-color: var(--primary);
    color: oklch(from var(--primary) calc((0.6 - l) * infinity) 0 0);
    border-color: transparent;
  }

  .listview.is-hoverable > .list-item.is-active:hover {
    background-color: oklch(from var(--primary) calc(l - 0.05) c h);
    cursor: pointer;
  }

  .listview > .list-item.is-active .list-subtitle,
  .listview > .list-item.is-active .list-start,
  .listview > .list-item.is-active .list-end {
    color: oklch(from var(--primary) calc((0.6 - l) * infinity) 0 0 / 0.75);
  }

  .listview > .list-item.is-disabled {
    opacity: 0.6;
    pointer-events: none;
    background-color: transparent;
  }

  .listview.is-bordered {
    border: 1px solid oklch(50% 0 0 / 0.12);
  }

  .listview.is-borderless,
  .listview.is-borderless > .list-item {
    border: none;
  }

  .listview.is-numbered {
    counter-reset: list-section;
  }

  .listview.is-numbered .list-item::before {
    counter-increment: list-section;
    content: counter(list-section) ". ";
    margin-inline-end: 0.75rem;
    font-weight: 600;
    color: var(--primary);
  }

  .listview > .list-item.is-medium {
    padding: 1.125rem 1.25rem;
  }

  .listview > .list-item.is-large {
    padding: 1.375rem 1.5rem;
  }
  .tableview {
    --tv-bg: transparent;
    --tv-text: var(--body-text);
    --tv-border-color: var(--border);
    --tv-header-bg: oklch(from var(--surface) calc(l + 0.012) c h);
    --tv-stripe-bg: oklch(from var(--body-text) l c h / 0.025);
    --tv-hover-bg: oklch(from var(--body-text) l c h / 0.05);
    --tv-scroll-thumb: oklch(from var(--body-text) l c h / 0.05);
    --tv-scroll-track: transparent;
    --tv-radius: 8px;
    display: block;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 1rem;
    background-color: var(--tv-bg);
    border: 1px solid var(--tv-border-color);
    border-radius: var(--tv-radius);
    scrollbar-width: thin;
    scrollbar-color: var(--tv-scroll-thumb) var(--tv-scroll-track);
  }

  .tableview::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }
  .tableview::-webkit-scrollbar-track {
    background: var(--tv-scroll-track);
  }
  .tableview::-webkit-scrollbar-thumb {
    background-color: var(--tv-scroll-thumb);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  .tableview::-webkit-scrollbar-thumb:hover {
    background-color: oklch(0% 0 0 / 0.4);
  }

  .tableview::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }

  .tableview table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
    color: var(--tv-text);
    table-layout: auto;
  }

  .tableview.table-fixed table {
    table-layout: fixed;
  }

  .tableview th,
  .tableview td {
    padding: 0.75rem 1rem;
    text-align: start;
    vertical-align: middle;
    border-bottom: 1px solid var(--tv-border-color);
    white-space: normal;
  }

  .tableview thead th {
    background-color: var(--tv-header-bg);
    font-weight: 600;
    border-bottom: 2px solid var(--tv-border-color);
  }

  .tableview.is-nowrap th,
  .tableview.is-nowrap td {
    white-space: nowrap;
  }

  .tableview.is-truncate th,
  .tableview.is-truncate td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tableview.is-wrap th,
  .tableview.is-wrap td {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tableview tbody tr:last-child td {
    border-bottom: none;
  }

  .tableview.is-bordered th,
  .tableview.is-bordered td {
    border-right: 1px solid var(--tv-border-color);
  }
  .tableview.is-bordered th:last-child,
  .tableview.is-bordered td:last-child {
    border-right: none;
  }

  .tableview.is-borderless th,
  .tableview.is-borderless td {
    border-bottom: none;
  }

  .tableview.is-borderless thead th {
    border-bottom: none;
  }

  .tableview.is-striped tbody tr:nth-of-type(odd) {
    background-color: var(--tv-stripe-bg);
  }

  .tableview.is-hoverable tbody tr:hover {
    background-color: var(--tv-hover-bg);
  }

  .tableview.has-sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--tv-header-bg);
    box-shadow: 0 1px 0 var(--tv-border-color);
  }

  .tableview.is-primary {
    --tv-bg: var(--blue-100);
    --tv-text: var(--blue-900);
    --tv-border-color: var(--blue-200);
    --tv-header-bg: var(--blue-200);
    --tv-stripe-bg: oklch(from var(--blue-500) l c h / 0.05);
    --tv-hover-bg: oklch(from var(--blue-500) l c h / 0.1);
    --tv-scroll-thumb: var(--blue-400);
  }

  .tableview.is-success {
    --tv-bg: var(--green-100);
    --tv-text: var(--green-900);
    --tv-border-color: var(--green-300);
    --tv-header-bg: var(--green-200);
    --tv-stripe-bg: oklch(from var(--green-500) l c h / 0.05);
    --tv-hover-bg: oklch(from var(--green-500) l c h / 0.1);
    --tv-scroll-thumb: var(--green-400);
  }

  .tableview.is-danger {
    --tv-bg: var(--red-100);
    --tv-text: var(--red-900);
    --tv-border-color: var(--red-200);
    --tv-header-bg: var(--red-200);
    --tv-stripe-bg: oklch(from var(--red-500) l c h / 0.05);
    --tv-hover-bg: oklch(from var(--red-500) l c h / 0.1);
    --tv-scroll-thumb: var(--red-400);
  }

  .tableview.is-warning {
    --tv-bg: var(--yellow-100);
    --tv-text: var(--yellow-900);
    --tv-border-color: var(--yellow-200);
    --tv-header-bg: var(--yellow-200);
    --tv-stripe-bg: oklch(from var(--yellow-500) l c h / 0.05);
    --tv-hover-bg: oklch(from var(--yellow-500) l c h / 0.1);
    --tv-scroll-thumb: var(--yellow-400);
  }

  .tableview.is-info {
    --tv-bg: var(--teal-100);
    --tv-text: var(--teal-900);
    --tv-border-color: var(--teal-200);
    --tv-header-bg: var(--teal-200);
    --tv-stripe-bg: oklch(from var(--teal-500) l c h / 0.05);
    --tv-hover-bg: oklch(from var(--teal-500) l c h / 0.1);
    --tv-scroll-thumb: var(--teal-400);
  }

  .tableview.is-light {
    --tv-bg: var(--light);
    --tv-text: var(--dark);
    --tv-border-color: oklch(from var(--light) calc(l - 0.05) c h);
    --tv-header-bg: oklch(from var(--light) calc(l - 0.03) c h);
    --tv-stripe-bg: oklch(0% 0 0 / 0.02);
    --tv-hover-bg: oklch(0% 0 0 / 0.04);
    --tv-scroll-thumb: var(--slate-400);
  }

  .tableview.is-dark {
    --tv-bg: var(--dark);
    --tv-text: var(--white);
    --tv-border-color: oklch(from var(--dark) calc(l + 0.1) c h);
    --tv-header-bg: oklch(from var(--dark) calc(l + 0.05) c h);
    --tv-stripe-bg: oklch(100% 0 0 / 0.05);
    --tv-hover-bg: oklch(100% 0 0 / 0.08);
    --tv-scroll-thumb: var(--slate-500);
  }

  .tableview .caption-top {
    caption-side: top;
    padding: 0 0 0.8rem 0;
  }

  .tableview .caption-bottom {
    caption-side: bottom;
    padding: 0.8rem 0 0 0;
  }
  .drawer {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    padding: 0;
    margin: 0;
    inset: 0;
    z-index: var(--z-drawer);
    visibility: hidden;
    pointer-events: none;
    background-color: oklch(0% 0 0 / 0);
    transition:
      background-color 320ms ease,
      visibility 0s linear 420ms;
  }

  .drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    background-color: oklch(0% 0 0 / 0.5);
    transition:
      background-color 320ms ease,
      visibility 0s linear 0s;
  }

  .drawer .drawer-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    --drawer-width: 420px;
    width: min(80vw, var(--drawer-width));
    height: 100%;
    background-color: var(--surface-raised);
    color: var(--body-text);
    overflow: hidden;
    transform: translate3d(-100%, 0, 0);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .drawer.has-no-backdrop {
    background-color: transparent;
  }

  .drawer.has-no-backdrop .drawer-panel {
    pointer-events: auto;
    box-shadow: 0 0 20px oklch(0% 0 0 / 0.15);
  }

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

  .drawer.is-end .drawer-panel {
    transform: translate3d(100%, 0, 0);
    border-inline-end: 0;
    border-inline-start: 1px solid oklch(0% 0 0 / 0.05);
  }

  .drawer.is-top {
    align-items: flex-start;
  }

  .drawer.is-top .drawer-panel {
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 75vh;
    transform: translate3d(0, -100%, 0);
    border-right: 0;
    border-bottom: 1px solid oklch(0% 0 0 / 0.05);
  }

  .drawer.is-bottom {
    align-items: flex-end;
  }

  .drawer.is-bottom .drawer-panel {
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 75vh;
    transform: translate3d(0, 100%, 0);
    border-right: 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }

  .drawer.is-open .drawer-panel {
    transform: translate3d(0, 0, 0);
  }

  .drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    transition: opacity 200ms;
  }

  .drawer-close:hover {
    opacity: 1;
    background-color: oklch(0% 0 0 / 0.05);
    border-radius: 4px;
  }

  .drawer-close::before {
    content: "";
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
      no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
      no-repeat center / contain;
  }

  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid oklch(0% 0 0 / 0.08);
    flex-shrink: 0;
  }

  .drawer-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
  }

  .drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
  }

  .drawer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background-color: var(--surface-raised);
    border-top: 1px solid oklch(0% 0 0 / 0.08);
    flex-shrink: 0;
  }

  [fa-theme="dark"] .drawer.is-open {
    background-color: oklch(0% 0 0 / 0.65);
  }

  [fa-theme="dark"] .drawer.has-no-backdrop .drawer-panel {
    box-shadow: 0 0 20px oklch(0% 0 0 / 0.4);
  }

  [fa-theme="dark"] .drawer.is-start .drawer-panel {
    border-inline-end-color: oklch(100% 0 0 / 0.06);
  }

  [fa-theme="dark"] .drawer.is-end .drawer-panel {
    border-inline-start-color: oklch(100% 0 0 / 0.06);
  }

  [fa-theme="dark"] .drawer.is-top .drawer-panel {
    border-bottom-color: oklch(100% 0 0 / 0.06);
  }

  [fa-theme="dark"] .drawer-close:hover {
    background-color: oklch(100% 0 0 / 0.08);
  }

  [fa-theme="dark"] .drawer-header {
    border-bottom-color: oklch(100% 0 0 / 0.08);
  }

  [dir="rtl"] .drawer .drawer-panel {
    transform: translate3d(100%, 0, 0);
  }

  [dir="rtl"] .drawer.is-end .drawer-panel {
    transform: translate3d(-100%, 0, 0);
  }

  [dir="rtl"] .drawer.is-open .drawer-panel {
    transform: translate3d(0, 0, 0);
  }
  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    min-height: var(--navbar-height);
    padding: var(--navbar-padding-y) var(--navbar-padding-x);
    background-color: var(--navbar, transparent);
    color: var(--navbar-text, var(--body-text));
    position: relative;
    width: 100%;
    gap: 1rem;
    transition:
      background-color 300ms ease,
      box-shadow 300ms ease,
      backdrop-filter 300ms ease;
  }

  .navbar-start {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-shrink: 0;
  }

  .navbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    position: static;
    transform: none;
  }

  .navbar-end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
  }

  .navbar-brand {
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .navbar-brand .brand-link {
    display: flex;
    align-items: center;
    color: inherit;
    gap: 0.75rem;
    text-decoration: none;
    outline: none;
  }

  .navbar-brand span {
    color: inherit;
    font-size: 1.25rem;
    font-weight: 600;
  }

  .navbar-brand img {
    height: 2rem;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }

  .navbar-links {
    display: none;
    align-items: center;
    gap: 1rem;
  }

  .navbar-toggler:focus,
  .navbar-toggler:hover,
  .navbar-toggler:active {
    outline: none;
    box-shadow: none;
  }

  .navbar-toggler {
    --toggler-size: 2.75rem;
    --toggler-icon-width: 24px;
    --toggler-line-height: 2px;
    --toggler-line-gap: 6px;
    --toggler-duration: 260ms;
    --toggler-easing: cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    width: var(--toggler-size);
    height: var(--toggler-size);
    flex: 0 0 var(--toggler-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .navbar-toggler span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--toggler-icon-width);
    height: var(--toggler-line-height);
    background: currentColor;
    border-radius: 999px;
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform, opacity;
    transition:
      transform var(--toggler-duration) var(--toggler-easing),
      opacity 180ms ease;
  }

  .navbar-toggler span:nth-child(1) {
    transform: translate3d(-50%, calc(-50% - var(--toggler-line-gap)), 0);
  }

  .navbar-toggler span:nth-child(2) {
    transform: translate3d(-50%, -50%, 0);
  }

  .navbar-toggler span:nth-child(3) {
    transform: translate3d(-50%, calc(-50% + var(--toggler-line-gap)), 0);
  }

  .navbar-toggler.is-active span:nth-child(1),
  .navbar-toggler.is-active span:nth-child(1) {
    transform: translate3d(-50%, -50%, 0) rotate(45deg) scaleX(0.92);
  }

  .navbar-toggler.is-active span:nth-child(2),
  .navbar-toggler.is-active span:nth-child(2) {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scaleX(0.35);
  }

  .navbar-toggler.is-active span:nth-child(3),
  .navbar-toggler.is-active span:nth-child(3) {
    transform: translate3d(-50%, -50%, 0) rotate(-45deg) scaleX(0.92);
  }

  .navbar-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    margin-bottom: 1rem;
  }

  @media (min-width: var(--breakpoint-lg)) {
    .navbar-toggler {
      display: none;
    }

    .navbar-menu {
      display: none;
    }

    .navbar-links {
      display: inline-flex;
    }
  }

  .navbar.is-medium {
    --navbar-height: 5rem;
    --navbar-padding-y: 0.75rem;
    font-size: 1rem;
  }

  .navbar.is-large {
    --navbar-height: 6rem;
    --navbar-padding-y: 1rem;
    font-size: 1.0625rem;
  }

  .navbar.is-medium .navbar-brand {
    font-size: 1.375rem;
  }

  .navbar.is-large .navbar-brand {
    font-size: 1.5rem;
  }
  .dropdown {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
  }

  .dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }

  .dropdown-trigger.has-arrow::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border: solid currentColor;
    border-width: 0 0.125em 0.125em 0;
    transform: rotate(45deg);
    margin-top: -0.1em;
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 12rem;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    background-color: var(--surface);
    border: 1px solid oklch(50% 0 0 / 0.1);
    box-shadow:
      0 10px 15px -3px oklch(50% 0 0 / 0.1),
      0 4px 6px -2px oklch(50% 0 0 / 0.05);
    border-radius: var(--radius-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity 200ms ease,
      transform 200ms ease,
      visibility 200ms;
  }

  .dropdown.is-active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dropdown-content {
    max-height: 300px;
    overflow-y: auto;
  }

  .dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    clear: both;
    font-weight: 400;
    color: var(--body-text);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 150ms;
    font-size: 1rem;
  }

  .dropdown-item:hover,
  .dropdown-item:focus {
    background-color: oklch(from var(--body-text) l c h / 0.05);
    color: var(--body-text);
    outline: none;
  }

  .dropdown-item.is-active {
    background-color: oklch(from var(--primary) l c h / 0.12);
    color: var(--primary);
  }

  .dropdown-header {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
  }

  .dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid oklch(50% 0 0 / 0.1);
  }

  .dropdown.is-end .dropdown-menu {
    left: auto;
    right: 0;
  }

  .dropdown.is-center .dropdown-menu {
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
  }
  .dropdown.is-center.is-active .dropdown-menu {
    transform: translateX(-50%) translateY(0);
  }

  .dropdown.is-drop-up .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.5rem;
    transform: translateY(10px);
  }
  .dropdown.is-drop-up.is-active .dropdown-menu {
    transform: translateY(0);
  }
  .dropdown.is-drop-up .dropdown-trigger.has-arrow::after {
    transform: rotate(-135deg);
    margin-top: 0.2em;
  }

  .dropdown.is-drop-end .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-inline-start: 0.5rem;
    transform: translateX(-10px);
  }
  .dropdown.is-drop-end.is-active .dropdown-menu {
    transform: translateX(0);
  }
  .dropdown.is-drop-end .dropdown-trigger.has-arrow::after {
    transform: rotate(-45deg);
    margin-top: 0;
    margin-inline-start: 0.1em;
  }

  .dropdown.is-drop-start .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-inline-end: 0.5rem;
    transform: translateX(10px);
  }
  .dropdown.is-drop-start.is-active .dropdown-menu {
    transform: translateX(0);
  }
  .dropdown.is-drop-start .dropdown-trigger.has-arrow::after {
    transform: rotate(135deg);
    margin-top: 0;
    margin-inline-end: 0.1em;
  }

  a.link {
    color: var(--link);
    text-decoration: none;
  }

  a.link:hover {
    color: var(--link-hover);
  }

  a:focus-visible {
    outline: 2px solid var(--link-focus-ring);
    outline-offset: 2px;
  }

  .nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
  }

  .nav:not(.is-tabview) {
    gap: 0.25rem;
  }

  .nav.expand {
    flex-wrap: nowrap;
  }

  .nav.is-vertical {
    flex-direction: column;
  }
  @media (min-width: var(--breakpoint-sm)) {
    .nav.sm\:is-vertical {
      flex-direction: column;
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .nav.md\:is-vertical {
      flex-direction: column;
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .nav.lg\:is-vertical {
      flex-direction: column;
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .nav.xl\:is-vertical {
      flex-direction: column;
    }
  }

  @media (min-width: var(--breakpoint-2xl)) {
    .nav.\32xl\:is-vertical {
      flex-direction: column;
    }
  }

  .nav.is-vertical:not(.is-tabview) {
    gap: 0.125rem;
  }

  .nav.is-justified > .nav-item {
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .nav .nav-item:focus-visible {
    outline: none;
    border-radius: var(--radius-1);
    box-shadow:
      0 0 0 2px oklch(97% 0 0),
      0 0 0 4px var(--link-focus-ring);
  }

  .nav .nav-item > .nav-link {
    border-radius: var(--radius-1);
    color: var(--link);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    text-decoration: none;
  }

  .nav .nav-item > .nav-link:hover {
    background-color: oklch(from currentColor l c h / 0.1);
  }

  .nav-item > .nav-link.accordion-toggler {
    padding: 0.375rem 1rem;
  }

  .nav-item.is-disabled,
  .nav-item.is-disabled > .nav-link {
    opacity: 0.65;
    pointer-events: none;
  }

  .nav.is-vertical .dropdown-menu {
    float: none;
    background-color: transparent;
    animation: none;
  }

  .nav.is-vertical
    .dropdown-menu:not(.is-drop-up, .is-drop-start, .is-drop-end) {
    position: static;
  }

  .nav .accordion-content {
    background-color: transparent;
    padding: 0;
  }
  .nav.is-pill {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    background-color: var(--surface);
    border-radius: 0.5rem;
    padding: 0.25rem;
  }

  .nav.is-pill > .nav-item > .nav-link {
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    color: var(--body-text);
    background: transparent;
    transition:
      background-color 180ms ease,
      color 180ms ease;
  }

  .nav.is-pill > .nav-item.is-active > .nav-link {
    background-color: var(--surface-raised);
    color: var(--body-text);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  .nav.is-tabview {
    --tab-indicator-size: 3px;
    position: relative;
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .nav.is-tabview > .nav-item {
    position: relative;
    padding: 0.625rem 1.25rem;
    cursor: pointer;
  }

  .nav.is-tabview > .tab-indicator {
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(
      --tab-indicator-color,
      var(--tab-color, var(--primary))
    );
    border-radius: 999px;
    pointer-events: none;
    z-index: 1;
    will-change: transform, width, height;
    transition:
      transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
      width 240ms cubic-bezier(0.4, 0, 0.2, 1),
      height 240ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav.is-tabview > .tab-indicator.is-instant {
    transition: none;
  }

  .tab-content {
    display: none;
    width: 100%;
    padding: 1rem;
    will-change: transform, opacity;
  }

  .tab-content.is-open {
    display: block;
    animation: slideUpFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes slideUpFade {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  [data-skeleton] {
    position: relative;
    overflow: hidden;
    pointer-events: none;
  }

  [data-skeleton] > *:not([data-skeleton-ignore]) {
    visibility: hidden !important;
    pointer-events: none;
  }

  .fa-sk-wave-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .fa-sk-wave-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 30%,
      oklch(98% 0.004 240 / 0.85) 50%,
      transparent 70%
    );
    background-size: 250% 100%;
    will-change: background-position;
    animation: fa-sk-wave 1.8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
  }

  .fa-sk-ghost {
    display: block;
    background-color: var(--surface-raised);
    z-index: 0;
  }

  [fa-theme="dark"] .fa-sk-wave-overlay::before {
    background: linear-gradient(
      105deg,
      transparent 30%,
      oklch(35% 0.006 240 / 0.7) 50%,
      transparent 70%
    );
    background-size: 250% 100%;
  }

  [data-skeleton-error] {
    position: relative;
    overflow: hidden;
    min-height: 5rem;
  }

  [data-skeleton-error] > *:not([data-skeleton-ignore]) {
    visibility: hidden !important;
  }

  .fa-sk-error-layer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
  }

  .fa-sk-error-layer svg {
    color: var(--red-400);
    opacity: 0.85;
  }

  .fa-sk-error-msg {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.4;
  }

  .fa-sk-retry {
    margin-top: 0.25rem;
    padding: 0.3rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--radius-pill);
    border: 1px solid var(--red-300);
    background: transparent;
    color: var(--red-600);
    transition:
      background 180ms,
      color 180ms;
  }

  .fa-sk-retry:hover {
    background: var(--red-100);
  }

  .fa-sk-retry:focus-visible {
    outline: 2px solid var(--red-400);
    outline-offset: 2px;
  }

  @keyframes fa-sk-wave {
    0% {
      background-position: 200% center;
    }

    100% {
      background-position: -200% center;
    }
  }

  @keyframes fa-sk-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.4;
    }
  }
  .carousel {
    position: relative;
    touch-action: pan-y;
    overflow: hidden;
  }

  .carousel-items {
    display: flex;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 1;
    transition: transform var(--carousel-duration) ease;
    will-change: transform;
  }

  .carousel-items > .item {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    backface-visibility: hidden;
    z-index: 2;
  }

  .carousel-items > .item img {
    display: block;
    width: 100%;
    height: auto;
  }

  .carousel.is-fade .carousel-items {
    display: block;
    transform: none !important;
  }

  .carousel.is-fade .carousel-items > .item {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--carousel-duration) ease;
  }

  .carousel.is-fade .carousel-items > .item.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
  }

  .carousel-items > .item > .item-caption {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.725rem 1rem;
    background-color: oklch(0% 0 0 / 0.5);
    color: #fff;
    font-weight: 400;
    font-size: 0.87em;
    overflow: hidden;
    max-height: 40%;
    z-index: 3;
  }

  .pager {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    list-style: none;
    display: flex;
    justify-content: center;
    z-index: 5;
  }

  .pager > .item {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 1.25em;
    height: 0.15em;
    margin-inline: 3px;
    background: var(--light);
    background-clip: padding-box;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: all var(--carousel-duration) ease;
    z-index: 2;
  }

  .carousel > .pager > .item.is-active {
    background-color: var(--primary);
    opacity: 1;
    width: 1.56em;
  }

  .carousel > .thumbnails {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    padding: 0.5rem 0;
    z-index: 1;
    overflow-x: auto;
    list-style: none;
    margin: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
  }

  .carousel > .thumbnails > .item {
    position: relative;
    padding: 0;
    outline: 0;
    border-radius: 0.25rem;
    z-index: 2;
    transition: transform var(--carousel-duration) ease;
    flex: 0 0 auto;
    margin: 0 5px;
  }

  .carousel > .thumbnails > .item.is-active {
    box-shadow:
      0 0 0 2px oklch(100% 0 0 / 1),
      0 0 0 4px var(--primary);
    z-index: 4;
  }

  .carousel .thumbnails > .item + .item {
    margin-inline-start: 0.525rem;
  }

  .carousel .thumbnails > .item > .thumbnail-image {
    display: inline-block;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    outline: 0;
    width: 50px;
    height: 50px;
  }

  .carousel-next,
  .carousel-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--dark);
    background-color: var(--light);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition:
      opacity 200ms ease,
      transform 200ms ease;
  }

  .carousel-next:active:not(:disabled):not(.is-loading),
  .carousel-prev:active:not(:disabled):not(.is-loading) {
    transform: translateY(calc(-50% + 1px));
  }

  .carousel-next:hover,
  .carousel-prev:hover {
    opacity: 0.75;
  }

  .carousel-next {
    right: 1rem;
  }

  .carousel-prev {
    left: 1rem;
  }

  .carousel .next-icon,
  .carousel .prev-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem 1rem;
  }

  .carousel .prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='2' d='M17 2L7 12l10 10'/%3E%3Crect x='0' y='0' fill='rgba(0,0,0,0)' /%3E%3C/svg%3E");
  }

  .carousel .next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='2' d='M7 2l10 10L7 22'/%3E%3Crect x='0' y='0' fill='rgba(0,0,0,0)' /%3E%3C/svg%3E");
  }
  .swiper {
    width: 100%;
    position: relative;
  }

  .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.75rem;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
  }

  .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }

  .swiper-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .swiper.is-dragging {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

  .swiper.is-dragging .swiper-wrapper {
    cursor: grabbing;
  }
  .pagination {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
  }

  .pagination:not(.is-grouped) {
    gap: 0.25rem;
  }

  .pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 2.5rem;
    height: 2.5rem;
    line-height: 1;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    color: var(--body-text);
    background-color: var(--surface);
    transition:
      background-color 200ms ease,
      color 200ms ease;
  }

  .pagination:not(.is-grouped) .page-item .page-link {
    border-radius: var(--radius-1);
  }

  .pagination .page-item:not(.is-disabled):not(.is-active) .page-link:hover,
  .pagination .page-item:not(.is-disabled):not(.is-active) .page-link:focus {
    background-color: var(--surface-raised);
  }

  .pagination .page-item .page-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px oklch(from var(--accent) l c h / 0.25);
  }

  .pagination .page-item.is-active .page-link {
    background-color: var(--accent);
    color: var(--accent-contrast);
    cursor: default;
  }

  .pagination .page-item.is-disabled .page-link {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.6;
  }
  .pagination.is-grouped .page-item:first-child .page-link {
    border-start-start-radius: var(--radius-1);
    border-end-start-radius: var(--radius-1);
  }

  .pagination.is-grouped .page-item:last-child .page-link {
    border-start-end-radius: var(--radius-1);
    border-end-end-radius: var(--radius-1);
  }
  .pagination.is-small .page-item .page-link {
    height: 2rem;
    min-width: 2rem;
    font-size: 0.875rem;
  }

  .pagination.is-large .page-item .page-link {
    height: 3rem;
    min-width: 3rem;
    font-size: 1.25rem;
  }
  .page-item .page-prev::before,
  .page-item .page-next::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  .page-item .page-prev::before {
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M15 18L9 12L15 6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M15 18L9 12L15 6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  }

  .page-item .page-next::after {
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M9 6L15 12L9 18" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M9 6L15 12L9 18" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  }

  .pagination:dir(rtl) .page-item .page-prev::before,
  .pagination:dir(rtl) .page-item .page-next::after {
    transform: scaleX(-1);
  }
  .dark-mode-toggler {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    cursor: pointer;
  }

  .dark-mode-toggler input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  .dark-mode-toggler-track {
    display: block;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: #e2e8f0;
    position: relative;
    transition: background 220ms ease;
    border: 1.5px solid oklch(0% 0 0 / 0.08);
  }

  .dark-mode-toggler-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px oklch(0% 0 0 / 0.18);
    transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dark-mode-toggler-sun,
  .dark-mode-toggler-moon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity 220ms ease;
  }

  .dark-mode-toggler-sun {
    opacity: 1;
    color: #f59e0b;
  }

  .dark-mode-toggler-moon {
    opacity: 0;
    color: #94a3b8;
  }

  .dark-mode-toggler input:checked ~ .dark-mode-toggler-track {
    background: #1e293b;
    border-color: transparent;
  }

  .dark-mode-toggler
    input:checked
    ~ .dark-mode-toggler-track
    .dark-mode-toggler-thumb {
    transform: translateX(24px);
  }

  .dark-mode-toggler
    input:checked
    ~ .dark-mode-toggler-track
    .dark-mode-toggler-thumb
    .dark-mode-toggler-moon {
    opacity: 1;
  }

  .dark-mode-toggler
    input:checked
    ~ .dark-mode-toggler-track
    .dark-mode-toggler-thumb
    .dark-mode-toggler-sun {
    opacity: 0;
  }

  .dark-mode-toggler input:focus-visible ~ .dark-mode-toggler-track {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }

  .dark-mode-toggler.is-fixed {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1030;
  }

  .thumbnail-image {
    --thumbnail-size: 3rem;
    display: inline-block;
    width: var(--thumbnail-size);
    height: var(--thumbnail-size);
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    flex-shrink: 0;
    border-radius: 0.375rem;
  }

  .thumbnail-image.is-xsmall {
    --thumbnail-size: 2rem;
    border-radius: 0.25rem;
  }

  .thumbnail-image.is-medium {
    --thumbnail-size: 4rem;
    border-radius: 0.5rem;
  }

  .thumbnail-image.is-large {
    --thumbnail-size: 6rem;
    border-radius: 0.625rem;
  }

  .thumbnail-image.is-xlarge {
    --thumbnail-size: 9rem;
    border-radius: 0.75rem;
  }

  .thumbnail-image.is-2xlarge {
    --thumbnail-size: 12.5rem;
    border-radius: 1rem;
  }
}

@layer utilities {
  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-clip {
    overflow: clip;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-scroll {
    overflow: scroll;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-x-clip {
    overflow-x: clip;
  }

  .overflow-x-visible {
    overflow-x: visible;
  }

  .overflow-x-scroll {
    overflow-x: scroll;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }

  .overflow-y-hidden {
    overflow-y: hidden;
  }

  .overflow-y-clip {
    overflow-y: clip;
  }

  .overflow-y-visible {
    overflow-y: visible;
  }

  .overflow-y-scroll {
    overflow-y: scroll;
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:overflow-auto {
      overflow: auto;
    }

    .md\:overflow-hidden {
      overflow: hidden;
    }

    .md\:overflow-visible {
      overflow: visible;
    }

    .md\:overflow-x-auto {
      overflow-x: auto;
    }

    .md\:overflow-x-hidden {
      overflow-x: hidden;
    }

    .md\:overflow-x-visible {
      overflow-x: visible;
    }

    .md\:overflow-y-auto {
      overflow-y: auto;
    }

    .md\:overflow-y-hidden {
      overflow-y: hidden;
    }

    .md\:overflow-y-visible {
      overflow-y: visible;
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:overflow-auto {
      overflow: auto;
    }

    .lg\:overflow-hidden {
      overflow: hidden;
    }

    .lg\:overflow-visible {
      overflow: visible;
    }

    .lg\:overflow-x-auto {
      overflow-x: auto;
    }

    .lg\:overflow-x-hidden {
      overflow-x: hidden;
    }

    .lg\:overflow-x-visible {
      overflow-x: visible;
    }

    .lg\:overflow-y-auto {
      overflow-y: auto;
    }

    .lg\:overflow-y-hidden {
      overflow-y: hidden;
    }

    .lg\:overflow-y-visible {
      overflow-y: visible;
    }
  }
  .overscroll-auto {
    overscroll-behavior: auto;
  }

  .overscroll-contain {
    overscroll-behavior: contain;
  }

  .overscroll-none {
    overscroll-behavior: none;
  }

  .overscroll-x-auto {
    overscroll-behavior-x: auto;
  }

  .overscroll-x-contain {
    overscroll-behavior-x: contain;
  }

  .overscroll-x-none {
    overscroll-behavior-x: none;
  }

  .overscroll-y-auto {
    overscroll-behavior-y: auto;
  }

  .overscroll-y-contain {
    overscroll-behavior-y: contain;
  }

  .overscroll-y-none {
    overscroll-behavior-y: none;
  }
  .is-visible {
    visibility: visible;
  }
  .is-invisible {
    visibility: hidden;
  }
  .is-collapse {
    visibility: collapse;
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:is-visible {
      visibility: visible;
    }
    .sm\:is-invisible {
      visibility: hidden;
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:is-visible {
      visibility: visible;
    }
    .md\:is-invisible {
      visibility: hidden;
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:is-visible {
      visibility: visible;
    }
    .lg\:is-invisible {
      visibility: hidden;
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:is-visible {
      visibility: visible;
    }
    .xl\:is-invisible {
      visibility: hidden;
    }
  }

  p {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .dropcap::first-letter {
    float: inline-start;
    font-size: 3.2em;
    line-height: 0.85;
    font-weight: 700;
    margin-inline-end: 0.3rem;
    margin-top: 0.05em;
  }

  .text-start {
    text-align: start;
  }

  .text-end {
    text-align: end;
  }

  .text-center {
    text-align: center;
  }

  .text-justify {
    text-align: justify;
  }
  .text-uppercase {
    text-transform: uppercase;
  }

  .text-lowercase {
    text-transform: lowercase;
  }

  .text-capitalize {
    text-transform: capitalize;
  }

  .text-underline {
    text-decoration: underline;
  }

  .text-overline {
    text-decoration: overline;
  }

  .text-line-through {
    text-decoration: line-through;
  }

  .text-no-decoration {
    text-decoration: none;
  }

  .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text-muted {
    color: var(--muted);
  }

  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .text-nowrap {
    white-space: nowrap;
  }

  .text-wrap {
    white-space: normal;
  }

  .text-break {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-tiny {
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .text-small {
    font-size: 0.875rem;
    line-height: 1.25;
  }

  .text-base {
    font-size: 1rem;
    line-height: 1.5;
  }

  .text-large {
    font-size: 1.125rem;
    line-height: 1.5;
  }

  .text-2xlarge {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    line-height: 1.3;
  }

  .text-3xlarge {
    font-size: clamp(1.875rem, 4vw, 2.25rem);
    line-height: 1.25;
  }

  .text-4xlarge {
    font-size: clamp(2.25rem, 5vw, 3rem);
    line-height: 1.2;
  }

  .text-5xlarge {
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .leading-none {
    line-height: 1;
  }

  .leading-tight {
    line-height: 1.25;
  }

  .leading-snug {
    line-height: 1.375;
  }

  .leading-normal {
    line-height: 1.5;
  }

  .leading-relaxed {
    line-height: 1.625;
  }

  .leading-loose {
    line-height: 2;
  }
  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }
  .tracking-tighter {
    letter-spacing: -0.05em;
  }
  .tracking-tight {
    letter-spacing: -0.025em;
  }
  .tracking-normal {
    letter-spacing: 0em;
  }
  .tracking-wide {
    letter-spacing: 0.025em;
  }
  .tracking-wider {
    letter-spacing: 0.05em;
  }
  .font-thin {
    font-weight: 100;
  }

  .font-light {
    font-weight: 300;
  }

  .font-normal {
    font-weight: 400;
  }

  .font-medium {
    font-weight: 500;
  }

  .font-semibold {
    font-weight: 600;
  }

  .font-bold {
    font-weight: 700;
  }

  .font-extrabold {
    font-weight: 800;
  }

  .font-black {
    font-weight: 900;
  }

  .font-italic {
    font-style: italic;
  }

  .font-not-italic {
    font-style: normal;
  }

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

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

  .float-none {
    float: none;
  }

  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:float-start {
      float: inline-start;
    }

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

    .md\:float-none {
      float: none;
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:float-start {
      float: inline-start;
    }

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

    .lg\:float-none {
      float: none;
    }
  }

  .is-hidden {
    display: none !important;
  }

  .is-block {
    display: block !important;
  }

  .is-inline {
    display: inline !important;
  }

  .is-inline-block {
    display: inline-block !important;
  }

  .is-flex {
    display: flex !important;
  }

  .is-inline-flex {
    display: inline-flex !important;
  }

  .is-grid {
    display: grid !important;
  }

  .is-table {
    display: table !important;
  }

  .is-table-row {
    display: table-row !important;
  }

  .is-table-cell {
    display: table-cell !important;
  }

  .is-contents {
    display: contents !important;
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:is-hidden {
      display: none !important;
    }

    .sm\:is-block {
      display: block !important;
    }

    .sm\:is-flex {
      display: flex !important;
    }

    .sm\:is-inline-flex {
      display: inline-flex !important;
    }

    .sm\:is-grid {
      display: grid !important;
    }

    .sm\:is-contents {
      display: contents !important;
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:is-hidden {
      display: none !important;
    }

    .md\:is-block {
      display: block !important;
    }

    .md\:is-flex {
      display: flex !important;
    }

    .md\:is-inline-flex {
      display: inline-flex !important;
    }

    .md\:is-grid {
      display: grid !important;
    }
    .md\:is-contents {
      display: contents !important;
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:is-hidden {
      display: none !important;
    }

    .lg\:is-block {
      display: block !important;
    }

    .lg\:is-flex {
      display: flex !important;
    }

    .lg\:is-inline-flex {
      display: inline-flex !important;
    }

    .lg\:is-grid {
      display: grid !important;
    }

    .lg\:is-contents {
      display: contents !important;
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:is-hidden {
      display: none !important;
    }

    .xl\:is-block {
      display: block !important;
    }

    .xl\:is-flex {
      display: flex !important;
    }

    .xl\:is-inline-flex {
      display: inline-flex !important;
    }

    .xl\:is-grid {
      display: grid !important;
    }

    .xl\:is-contents {
      display: contents !important;
    }
  }

  @media (min-width: var(--breakpoint-2xl)) {
    .\32xl\:is-hidden {
      display: none !important;
    }

    .\32xl\:is-block {
      display: block !important;
    }

    .\32xl\:is-flex {
      display: flex !important;
    }

    .\32xl\:is-inline-flex {
      display: inline-flex !important;
    }

    .\32xl\:is-grid {
      display: grid !important;
    }

    .\32xl\:is-contents {
      display: contents !important;
    }
  }
  .pointer-none {
    pointer-events: none;
  }

  .pointer-auto {
    pointer-events: auto;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-grabbing {
    cursor: grabbing;
  }

  .cursor-text {
    cursor: text;
  }

  .cursor-wait {
    cursor: wait;
  }

  .translate-center {
    --translate-x: -50%;
    --translate-y: -50%;
    translate: var(--translate-x) var(--translate-y);
  }

  .translate-x-center {
    --translate-x: -50%;
    translate: var(--translate-x) var(--translate-y);
  }

  .translate-y-center {
    --translate-y: -50%;
    translate: var(--translate-x) var(--translate-y);
  }
  .scale-0 {
    scale: 0;
  }

  .scale-75 {
    scale: 0.75;
  }

  .scale-90 {
    scale: 0.9;
  }

  .scale-95 {
    scale: 0.95;
  }

  .scale-100 {
    scale: 1;
  }

  .scale-105 {
    scale: 1.05;
  }

  .scale-110 {
    scale: 1.1;
  }

  .scale-125 {
    scale: 1.25;
  }
  .translate-y-1 {
    --translate-y: -0.25rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .translate-y-2 {
    --translate-y: -0.5rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .translate-y-3 {
    --translate-y: -0.75rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .translate-y-4 {
    --translate-y: -1rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .translate-y-8 {
    --translate-y: -2rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .-translate-y-1 {
    --translate-y: 0.25rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .-translate-y-2 {
    --translate-y: 0.5rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .-translate-y-3 {
    --translate-y: 0.75rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .-translate-y-4 {
    --translate-y: 1rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .-translate-y-8 {
    --translate-y: 2rem;
    translate: var(--translate-x) var(--translate-y);
  }
  .translate-x-1 {
    --translate-x: 0.25rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .translate-x-2 {
    --translate-x: 0.5rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .translate-x-3 {
    --translate-x: 0.75rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .translate-x-4 {
    --translate-x: 1rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .translate-x-8 {
    --translate-x: 2rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .-translate-x-1 {
    --translate-x: -0.25rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .-translate-x-2 {
    --translate-x: -0.5rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .-translate-x-3 {
    --translate-x: -0.75rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .-translate-x-4 {
    --translate-x: -1rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .-translate-x-8 {
    --translate-x: -2rem;
    translate: var(--translate-x) var(--translate-y);
  }
  .rotate-1 {
    rotate: 1deg;
  }

  .rotate-2 {
    rotate: 2deg;
  }

  .rotate-3 {
    rotate: 3deg;
  }

  .rotate-12 {
    rotate: 12deg;
  }

  .-rotate-1 {
    rotate: -1deg;
  }

  .-rotate-2 {
    rotate: -2deg;
  }

  .-rotate-3 {
    rotate: -3deg;
  }

  .-rotate-12 {
    rotate: -12deg;
  }
  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .rotate-270 {
    rotate: 270deg;
  }

  .-rotate-45 {
    rotate: -45deg;
  }

  .-rotate-90 {
    rotate: -90deg;
  }
  .origin-center {
    transform-origin: center;
  }

  .origin-top {
    transform-origin: top;
  }

  .origin-top-right {
    transform-origin: top right;
  }

  .origin-right {
    transform-origin: right;
  }

  .origin-bottom-right {
    transform-origin: bottom right;
  }

  .origin-bottom {
    transform-origin: bottom;
  }

  .origin-bottom-left {
    transform-origin: bottom left;
  }

  .origin-left {
    transform-origin: left;
  }

  .origin-top-left {
    transform-origin: top left;
  }
  .will-change-auto {
    will-change: auto;
  }
  .will-change-scroll {
    will-change: scroll-position;
  }
  .will-change-transform {
    will-change: transform;
  }
  .will-change-opacity {
    will-change: opacity;
  }
  .is-static {
    position: static !important;
  }

  .is-relative {
    position: relative !important;
  }

  .is-absolute {
    position: absolute !important;
  }

  .is-sticky {
    position: sticky !important;
    top: 0;
  }

  .is-fixed {
    position: fixed !important;
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:is-static {
      position: static !important;
    }

    .sm\:is-relative {
      position: relative !important;
    }

    .sm\:is-absolute {
      position: absolute !important;
    }

    .sm\:is-sticky {
      position: sticky !important;
    }

    .sm\:is-fixed {
      position: fixed;
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:is-static {
      position: static !important;
    }

    .md\:is-relative {
      position: relative !important;
    }

    .md\:is-absolute {
      position: absolute !important;
    }

    .md\:is-sticky {
      position: sticky !important;
    }

    .md\:is-fixed {
      position: fixed;
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:is-static {
      position: static !important;
    }

    .lg\:is-relative {
      position: relative !important;
    }

    .lg\:is-absolute {
      position: absolute !important;
    }

    .lg\:is-sticky {
      position: sticky !important;
    }

    .lg\:is-fixed {
      position: fixed;
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:is-static {
      position: static !important;
    }

    .xl\:is-relative {
      position: relative !important;
    }

    .xl\:is-absolute {
      position: absolute !important;
    }

    .xl\:is-sticky {
      position: sticky !important;
    }

    .xl\:is-fixed {
      position: fixed !important;
    }
  }

  .isolate {
    isolation: isolate;
  }

  .isolation-auto {
    isolation: auto;
  }

  .m-auto {
    margin: auto;
  }

  .m-0 {
    margin: 0;
  }

  .p-0 {
    padding: 0;
  }

  .m-1 {
    margin: var(--space-xs);
  }

  .m-2 {
    margin: var(--space-sm);
  }

  .m-3 {
    margin: var(--space-md);
  }

  .m-4 {
    margin: var(--space-lg);
  }

  .m-5 {
    margin: var(--space-xl);
  }

  .m-6 {
    margin: var(--space-2xl);
  }

  .p-1 {
    padding: var(--space-xs);
  }

  .p-2 {
    padding: var(--space-sm);
  }

  .p-3 {
    padding: var(--space-md);
  }

  .p-4 {
    padding: var(--space-lg);
  }

  .p-5 {
    padding: var(--space-xl);
  }

  .p-6 {
    padding: var(--space-2xl);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mx-0 {
    margin-inline: 0;
  }

  .mx-1 {
    margin-inline: var(--space-xs);
  }

  .mx-2 {
    margin-inline: var(--space-sm);
  }

  .mx-3 {
    margin-inline: var(--space-md);
  }

  .mx-4 {
    margin-inline: var(--space-lg);
  }

  .mx-5 {
    margin-inline: var(--space-xl);
  }

  .mx-6 {
    margin-inline: var(--space-2xl);
  }

  .my-auto {
    margin-block: auto;
  }

  .my-0 {
    margin-block: 0;
  }

  .my-1 {
    margin-block: var(--space-xs);
  }

  .my-2 {
    margin-block: var(--space-sm);
  }

  .my-3 {
    margin-block: var(--space-md);
  }

  .my-4 {
    margin-block: var(--space-lg);
  }

  .my-5 {
    margin-block: var(--space-xl);
  }

  .my-6 {
    margin-block: var(--space-2xl);
  }

  .ms-auto {
    margin-inline-start: auto;
  }

  .me-auto {
    margin-inline-end: auto;
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:m-auto {
      margin: auto;
    }

    .sm\:mx-auto {
      margin-inline: auto;
    }

    .sm\:my-auto {
      margin-block: auto;
    }

    .sm\:ms-auto {
      margin-inline-start: auto;
    }

    .sm\:me-auto {
      margin-inline-end: auto;
    }

    .sm\:m-1 {
      margin: var(--space-xs);
    }
    .sm\:m-2 {
      margin: var(--space-sm);
    }
    .sm\:m-3 {
      margin: var(--space-md);
    }
    .sm\:m-4 {
      margin: var(--space-lg);
    }
    .sm\:m-5 {
      margin: var(--space-xl);
    }
    .sm\:m-6 {
      margin: var(--space-2xl);
    }

    .sm\:p-1 {
      padding: var(--space-xs);
    }
    .sm\:p-2 {
      padding: var(--space-sm);
    }
    .sm\:p-3 {
      padding: var(--space-md);
    }
    .sm\:p-4 {
      padding: var(--space-lg);
    }
    .sm\:p-5 {
      padding: var(--space-xl);
    }
    .sm\:p-6 {
      padding: var(--space-2xl);
    }

    .sm\:mx-1 {
      margin-inline: var(--space-xs);
    }

    .sm\:mx-2 {
      margin-inline: var(--space-sm);
    }

    .sm\:mx-3 {
      margin-inline: var(--space-md);
    }

    .sm\:mx-4 {
      margin-inline: var(--space-lg);
    }

    .sm\:mx-5 {
      margin-inline: var(--space-xl);
    }

    .sm\:mx-6 {
      margin-inline: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:m-auto {
      margin: auto;
    }

    .md\:mx-auto {
      margin-inline: auto;
    }

    .md\:my-auto {
      margin-block: auto;
    }

    .md\:ms-auto {
      margin-inline-start: auto;
    }

    .md\:me-auto {
      margin-inline-end: auto;
    }

    .md\:m-1 {
      margin: var(--space-xs);
    }
    .md\:m-2 {
      margin: var(--space-sm);
    }
    .md\:m-3 {
      margin: var(--space-md);
    }
    .md\:m-4 {
      margin: var(--space-lg);
    }
    .md\:m-5 {
      margin: var(--space-xl);
    }
    .md\:m-6 {
      margin: var(--space-2xl);
    }

    .md\:p-1 {
      padding: var(--space-xs);
    }
    .md\:p-2 {
      padding: var(--space-sm);
    }
    .md\:p-3 {
      padding: var(--space-md);
    }
    .md\:p-4 {
      padding: var(--space-lg);
    }
    .md\:p-5 {
      padding: var(--space-xl);
    }
    .md\:p-6 {
      padding: var(--space-2xl);
    }

    .md\:mx-1 {
      margin-inline: var(--space-xs);
    }

    .md\:mx-2 {
      margin-inline: var(--space-sm);
    }

    .md\:mx-3 {
      margin-inline: var(--space-md);
    }

    .md\:mx-4 {
      margin-inline: var(--space-lg);
    }

    .md\:mx-5 {
      margin-inline: var(--space-xl);
    }

    .md\:mx-6 {
      margin-inline: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:m-auto {
      margin: auto;
    }

    .lg\:mx-auto {
      margin-inline: auto;
    }

    .lg\:my-auto {
      margin-block: auto;
    }

    .lg\:ms-auto {
      margin-inline-start: auto;
    }

    .lg\:me-auto {
      margin-inline-end: auto;
    }

    .lg\:m-1 {
      margin: var(--space-xs);
    }
    .lg\:m-2 {
      margin: var(--space-sm);
    }
    .lg\:m-3 {
      margin: var(--space-md);
    }
    .lg\:m-4 {
      margin: var(--space-lg);
    }
    .lg\:m-5 {
      margin: var(--space-xl);
    }
    .lg\:m-6 {
      margin: var(--space-2xl);
    }

    .lg\:p-1 {
      padding: var(--space-xs);
    }
    .lg\:p-2 {
      padding: var(--space-sm);
    }
    .lg\:p-3 {
      padding: var(--space-md);
    }
    .lg\:p-4 {
      padding: var(--space-lg);
    }
    .lg\:p-5 {
      padding: var(--space-xl);
    }
    .lg\:p-6 {
      padding: var(--space-2xl);
    }

    .lg\:mx-1 {
      margin-inline: var(--space-xs);
    }

    .lg\:mx-2 {
      margin-inline: var(--space-sm);
    }

    .lg\:mx-3 {
      margin-inline: var(--space-md);
    }

    .lg\:mx-4 {
      margin-inline: var(--space-lg);
    }

    .lg\:mx-5 {
      margin-inline: var(--space-xl);
    }

    .lg\:mx-6 {
      margin-inline: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:m-auto {
      margin: auto;
    }

    .xl\:mx-auto {
      margin-inline: auto;
    }

    .xl\:my-auto {
      margin-block: auto;
    }

    .xl\:ms-auto {
      margin-inline-start: auto;
    }

    .xl\:me-auto {
      margin-inline-end: auto;
    }

    .xl\:m-1 {
      margin: var(--space-xs);
    }
    .xl\:m-2 {
      margin: var(--space-sm);
    }
    .xl\:m-3 {
      margin: var(--space-md);
    }
    .xl\:m-4 {
      margin: var(--space-lg);
    }
    .xl\:m-5 {
      margin: var(--space-xl);
    }
    .xl\:m-6 {
      margin: var(--space-2xl);
    }

    .xl\:p-1 {
      padding: var(--space-xs);
    }
    .xl\:p-2 {
      padding: var(--space-sm);
    }
    .xl\:p-3 {
      padding: var(--space-md);
    }
    .xl\:p-4 {
      padding: var(--space-lg);
    }
    .xl\:p-5 {
      padding: var(--space-xl);
    }
    .xl\:p-6 {
      padding: var(--space-2xl);
    }

    .xl\:mx-1 {
      margin-inline: var(--space-xs);
    }

    .xl\:mx-2 {
      margin-inline: var(--space-sm);
    }

    .xl\:mx-3 {
      margin-inline: var(--space-md);
    }

    .xl\:mx-4 {
      margin-inline: var(--space-lg);
    }

    .xl\:mx-5 {
      margin-inline: var(--space-xl);
    }

    .xl\:mx-6 {
      margin-inline: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:my-1 {
      margin-block: var(--space-xs);
    }
    .sm\:my-2 {
      margin-block: var(--space-sm);
    }
    .sm\:my-3 {
      margin-block: var(--space-md);
    }
    .sm\:my-4 {
      margin-block: var(--space-lg);
    }
    .sm\:my-5 {
      margin-block: var(--space-xl);
    }
    .sm\:my-6 {
      margin-block: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:my-1 {
      margin-block: var(--space-xs);
    }
    .md\:my-2 {
      margin-block: var(--space-sm);
    }
    .md\:my-3 {
      margin-block: var(--space-md);
    }
    .md\:my-4 {
      margin-block: var(--space-lg);
    }
    .md\:my-5 {
      margin-block: var(--space-xl);
    }
    .md\:my-6 {
      margin-block: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:my-1 {
      margin-block: var(--space-xs);
    }
    .lg\:my-2 {
      margin-block: var(--space-sm);
    }
    .lg\:my-3 {
      margin-block: var(--space-md);
    }
    .lg\:my-4 {
      margin-block: var(--space-lg);
    }
    .lg\:my-5 {
      margin-block: var(--space-xl);
    }
    .lg\:my-6 {
      margin-block: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:my-1 {
      margin-block: var(--space-xs);
    }
    .xl\:my-2 {
      margin-block: var(--space-sm);
    }
    .xl\:my-3 {
      margin-block: var(--space-md);
    }
    .xl\:my-4 {
      margin-block: var(--space-lg);
    }
    .xl\:my-5 {
      margin-block: var(--space-xl);
    }
    .xl\:my-6 {
      margin-block: var(--space-2xl);
    }
  }

  .px-0 {
    padding-inline: 0;
  }

  .px-1 {
    padding-inline: var(--space-xs);
  }

  .px-2 {
    padding-inline: var(--space-sm);
  }

  .px-3 {
    padding-inline: var(--space-md);
  }

  .px-4 {
    padding-inline: var(--space-lg);
  }

  .px-5 {
    padding-inline: var(--space-xl);
  }

  .px-6 {
    padding-inline: var(--space-2xl);
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:px-0 {
      padding-inline: 0;
    }

    .sm\:px-1 {
      padding-inline: var(--space-xs);
    }

    .sm\:px-2 {
      padding-inline: var(--space-sm);
    }

    .sm\:px-3 {
      padding-inline: var(--space-md);
    }

    .sm\:px-4 {
      padding-inline: var(--space-lg);
    }

    .sm\:px-5 {
      padding-inline: var(--space-xl);
    }

    .sm\:px-6 {
      padding-inline: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:px-0 {
      padding-inline: 0;
    }

    .md\:px-1 {
      padding-inline: var(--space-xs);
    }

    .md\:px-2 {
      padding-inline: var(--space-sm);
    }

    .md\:px-3 {
      padding-inline: var(--space-md);
    }

    .md\:px-4 {
      padding-inline: var(--space-lg);
    }

    .md\:px-5 {
      padding-inline: var(--space-xl);
    }

    .md\:px-6 {
      padding-inline: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:px-0 {
      padding-inline: 0;
    }

    .lg\:px-1 {
      padding-inline: var(--space-xs);
    }

    .lg\:px-2 {
      padding-inline: var(--space-sm);
    }

    .lg\:px-3 {
      padding-inline: var(--space-md);
    }

    .lg\:px-4 {
      padding-inline: var(--space-lg);
    }

    .lg\:px-5 {
      padding-inline: var(--space-xl);
    }

    .lg\:px-6 {
      padding-inline: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:px-0 {
      padding-inline: 0;
    }

    .xl\:px-1 {
      padding-inline: var(--space-xs);
    }

    .xl\:px-2 {
      padding-inline: var(--space-sm);
    }

    .xl\:px-3 {
      padding-inline: var(--space-md);
    }

    .xl\:px-4 {
      padding-inline: var(--space-lg);
    }

    .xl\:px-5 {
      padding-inline: var(--space-xl);
    }

    .xl\:px-6 {
      padding-inline: var(--space-2xl);
    }
  }

  .py-0 {
    padding-block: 0;
  }

  .py-1 {
    padding-block: var(--space-xs);
  }

  .py-2 {
    padding-block: var(--space-sm);
  }

  .py-3 {
    padding-block: var(--space-md);
  }

  .py-4 {
    padding-block: var(--space-lg);
  }

  .py-5 {
    padding-block: var(--space-xl);
  }

  .py-6 {
    padding-block: var(--space-2xl);
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:py-0 {
      padding-block: 0;
    }

    .sm\:py-1 {
      padding-block: var(--space-xs);
    }

    .sm\:py-2 {
      padding-block: var(--space-sm);
    }

    .sm\:py-3 {
      padding-block: var(--space-md);
    }

    .sm\:py-4 {
      padding-block: var(--space-lg);
    }

    .sm\:py-5 {
      padding-block: var(--space-xl);
    }

    .sm\:py-6 {
      padding-block: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:py-0 {
      padding-block: 0;
    }

    .md\:py-1 {
      padding-block: var(--space-xs);
    }

    .md\:py-2 {
      padding-block: var(--space-sm);
    }

    .md\:py-3 {
      padding-block: var(--space-md);
    }

    .md\:py-4 {
      padding-block: var(--space-lg);
    }

    .md\:py-5 {
      padding-block: var(--space-xl);
    }

    .md\:py-6 {
      padding-block: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:py-0 {
      padding-block: 0;
    }

    .lg\:py-1 {
      padding-block: var(--space-xs);
    }

    .lg\:py-2 {
      padding-block: var(--space-sm);
    }

    .lg\:py-3 {
      padding-block: var(--space-md);
    }

    .lg\:py-4 {
      padding-block: var(--space-lg);
    }

    .lg\:py-5 {
      padding-block: var(--space-xl);
    }

    .lg\:py-6 {
      padding-block: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:py-0 {
      padding-block: 0;
    }

    .xl\:py-1 {
      padding-block: var(--space-xs);
    }

    .xl\:py-2 {
      padding-block: var(--space-sm);
    }

    .xl\:py-3 {
      padding-block: var(--space-md);
    }

    .xl\:py-4 {
      padding-block: var(--space-lg);
    }

    .xl\:py-5 {
      padding-block: var(--space-xl);
    }

    .xl\:py-6 {
      padding-block: var(--space-2xl);
    }
  }
  .mbs-0 {
    margin-block-start: 0;
  }
  .mbe-0 {
    margin-block-end: 0;
  }
  .mbs-1 {
    margin-block-start: var(--space-xs);
  }
  .mbe-1 {
    margin-block-end: var(--space-xs);
  }
  .ms-1 {
    margin-inline-start: var(--space-xs);
  }
  .me-1 {
    margin-inline-end: var(--space-xs);
  }

  .mbs-2 {
    margin-block-start: var(--space-sm);
  }
  .mbe-2 {
    margin-block-end: var(--space-sm);
  }
  .ms-2 {
    margin-inline-start: var(--space-sm);
  }
  .me-2 {
    margin-inline-end: var(--space-sm);
  }

  .mbs-3 {
    margin-block-start: var(--space-md);
  }
  .mbe-3 {
    margin-block-end: var(--space-md);
  }
  .ms-3 {
    margin-inline-start: var(--space-md);
  }
  .me-3 {
    margin-inline-end: var(--space-md);
  }

  .mbs-4 {
    margin-block-start: var(--space-lg);
  }
  .mbe-4 {
    margin-block-end: var(--space-lg);
  }
  .ms-4 {
    margin-inline-start: var(--space-lg);
  }
  .me-4 {
    margin-inline-end: var(--space-lg);
  }

  .mbs-5 {
    margin-block-start: var(--space-xl);
  }
  .mbe-5 {
    margin-block-end: var(--space-xl);
  }
  .ms-5 {
    margin-inline-start: var(--space-xl);
  }
  .me-5 {
    margin-inline-end: var(--space-xl);
  }

  .mbs-6 {
    margin-block-start: var(--space-2xl);
  }
  .mbe-6 {
    margin-block-end: var(--space-2xl);
  }
  .ms-6 {
    margin-inline-start: var(--space-2xl);
  }
  .me-6 {
    margin-inline-end: var(--space-2xl);
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:mbs-0 {
      margin-block-start: 0;
    }
    .sm\:mbe-0 {
      margin-block-end: 0;
    }
    .sm\:mbs-1 {
      margin-block-start: var(--space-xs);
    }
    .sm\:mbe-1 {
      margin-block-end: var(--space-xs);
    }
    .sm\:ms-1 {
      margin-inline-start: var(--space-xs);
    }
    .sm\:me-1 {
      margin-inline-end: var(--space-xs);
    }

    .sm\:mbs-2 {
      margin-block-start: var(--space-sm);
    }
    .sm\:mbe-2 {
      margin-block-end: var(--space-sm);
    }
    .sm\:ms-2 {
      margin-inline-start: var(--space-sm);
    }
    .sm\:me-2 {
      margin-inline-end: var(--space-sm);
    }

    .sm\:mbs-3 {
      margin-block-start: var(--space-md);
    }
    .sm\:mbe-3 {
      margin-block-end: var(--space-md);
    }
    .sm\:ms-3 {
      margin-inline-start: var(--space-md);
    }
    .sm\:me-3 {
      margin-inline-end: var(--space-md);
    }

    .sm\:mbs-4 {
      margin-block-start: var(--space-lg);
    }
    .sm\:mbe-4 {
      margin-block-end: var(--space-lg);
    }
    .sm\:ms-4 {
      margin-inline-start: var(--space-lg);
    }
    .sm\:me-4 {
      margin-inline-end: var(--space-lg);
    }

    .sm\:mbs-5 {
      margin-block-start: var(--space-xl);
    }
    .sm\:mbe-5 {
      margin-block-end: var(--space-xl);
    }
    .sm\:ms-5 {
      margin-inline-start: var(--space-xl);
    }
    .sm\:me-5 {
      margin-inline-end: var(--space-xl);
    }

    .sm\:mbs-6 {
      margin-block-start: var(--space-2xl);
    }
    .sm\:mbe-6 {
      margin-block-end: var(--space-2xl);
    }
    .sm\:ms-6 {
      margin-inline-start: var(--space-2xl);
    }
    .sm\:me-6 {
      margin-inline-end: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:mbs-0 {
      margin-block-start: 0;
    }
    .md\:mbe-0 {
      margin-block-end: 0;
    }
    .md\:mbs-1 {
      margin-block-start: var(--space-xs);
    }
    .md\:mbe-1 {
      margin-block-end: var(--space-xs);
    }
    .md\:ms-1 {
      margin-inline-start: var(--space-xs);
    }
    .md\:me-1 {
      margin-inline-end: var(--space-xs);
    }

    .md\:mbs-2 {
      margin-block-start: var(--space-sm);
    }
    .md\:mbe-2 {
      margin-block-end: var(--space-sm);
    }
    .md\:ms-2 {
      margin-inline-start: var(--space-sm);
    }
    .md\:me-2 {
      margin-inline-end: var(--space-sm);
    }

    .md\:mbs-3 {
      margin-block-start: var(--space-md);
    }
    .md\:mbe-3 {
      margin-block-end: var(--space-md);
    }
    .md\:ms-3 {
      margin-inline-start: var(--space-md);
    }
    .md\:me-3 {
      margin-inline-end: var(--space-md);
    }

    .md\:mbs-4 {
      margin-block-start: var(--space-lg);
    }
    .md\:mbe-4 {
      margin-block-end: var(--space-lg);
    }
    .md\:ms-4 {
      margin-inline-start: var(--space-lg);
    }
    .md\:me-4 {
      margin-inline-end: var(--space-lg);
    }

    .md\:mbs-5 {
      margin-block-start: var(--space-xl);
    }
    .md\:mbe-5 {
      margin-block-end: var(--space-xl);
    }
    .md\:ms-5 {
      margin-inline-start: var(--space-xl);
    }
    .md\:me-5 {
      margin-inline-end: var(--space-xl);
    }

    .md\:mbs-6 {
      margin-block-start: var(--space-2xl);
    }
    .md\:mbe-6 {
      margin-block-end: var(--space-2xl);
    }
    .md\:ms-6 {
      margin-inline-start: var(--space-2xl);
    }
    .md\:me-6 {
      margin-inline-end: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:mbs-0 {
      margin-block-start: 0;
    }
    .lg\:mbe-0 {
      margin-block-end: 0;
    }

    .lg\:mbs-1 {
      margin-block-start: var(--space-xs);
    }
    .lg\:mbe-1 {
      margin-block-end: var(--space-xs);
    }
    .lg\:ms-1 {
      margin-inline-start: var(--space-xs);
    }
    .lg\:me-1 {
      margin-inline-end: var(--space-xs);
    }

    .lg\:mbs-2 {
      margin-block-start: var(--space-sm);
    }
    .lg\:mbe-2 {
      margin-block-end: var(--space-sm);
    }
    .lg\:ms-2 {
      margin-inline-start: var(--space-sm);
    }
    .lg\:me-2 {
      margin-inline-end: var(--space-sm);
    }

    .lg\:mbs-3 {
      margin-block-start: var(--space-md);
    }
    .lg\:mbe-3 {
      margin-block-end: var(--space-md);
    }
    .lg\:ms-3 {
      margin-inline-start: var(--space-md);
    }
    .lg\:me-3 {
      margin-inline-end: var(--space-md);
    }

    .lg\:mbs-4 {
      margin-block-start: var(--space-lg);
    }
    .lg\:mbe-4 {
      margin-block-end: var(--space-lg);
    }
    .lg\:ms-4 {
      margin-inline-start: var(--space-lg);
    }
    .lg\:me-4 {
      margin-inline-end: var(--space-lg);
    }

    .lg\:mbs-5 {
      margin-block-start: var(--space-xl);
    }
    .lg\:mbe-5 {
      margin-block-end: var(--space-xl);
    }
    .lg\:ms-5 {
      margin-inline-start: var(--space-xl);
    }
    .lg\:me-5 {
      margin-inline-end: var(--space-xl);
    }

    .lg\:mbs-6 {
      margin-block-start: var(--space-2xl);
    }
    .lg\:mbe-6 {
      margin-block-end: var(--space-2xl);
    }
    .lg\:ms-6 {
      margin-inline-start: var(--space-2xl);
    }
    .lg\:me-6 {
      margin-inline-end: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:mbs-0 {
      margin-block-start: 0;
    }
    .xl\:mbe-0 {
      margin-block-end: 0;
    }

    .xl\:mbs-1 {
      margin-block-start: var(--space-xs);
    }
    .xl\:mbe-1 {
      margin-block-end: var(--space-xs);
    }
    .xl\:ms-1 {
      margin-inline-start: var(--space-xs);
    }
    .xl\:me-1 {
      margin-inline-end: var(--space-xs);
    }

    .xl\:mbs-2 {
      margin-block-start: var(--space-sm);
    }
    .xl\:mbe-2 {
      margin-block-end: var(--space-sm);
    }
    .xl\:ms-2 {
      margin-inline-start: var(--space-sm);
    }
    .xl\:me-2 {
      margin-inline-end: var(--space-sm);
    }

    .xl\:mbs-3 {
      margin-block-start: var(--space-md);
    }
    .xl\:mbe-3 {
      margin-block-end: var(--space-md);
    }
    .xl\:ms-3 {
      margin-inline-start: var(--space-md);
    }
    .xl\:me-3 {
      margin-inline-end: var(--space-md);
    }

    .xl\:mbs-4 {
      margin-block-start: var(--space-lg);
    }
    .xl\:mbe-4 {
      margin-block-end: var(--space-lg);
    }
    .xl\:ms-4 {
      margin-inline-start: var(--space-lg);
    }
    .xl\:me-4 {
      margin-inline-end: var(--space-lg);
    }

    .xl\:mbs-5 {
      margin-block-start: var(--space-xl);
    }
    .xl\:mbe-5 {
      margin-block-end: var(--space-xl);
    }
    .xl\:ms-5 {
      margin-inline-start: var(--space-xl);
    }
    .xl\:me-5 {
      margin-inline-end: var(--space-xl);
    }

    .xl\:mbs-6 {
      margin-block-start: var(--space-2xl);
    }
    .xl\:mbe-6 {
      margin-block-end: var(--space-2xl);
    }
    .xl\:ms-6 {
      margin-inline-start: var(--space-2xl);
    }
    .xl\:me-6 {
      margin-inline-end: var(--space-2xl);
    }
  }

  .pbs-0 {
    padding-block-start: 0;
  }
  .pbe-0 {
    padding-block-end: 0;
  }
  .pbs-1 {
    padding-block-start: var(--space-xs);
  }
  .pbe-1 {
    padding-block-end: var(--space-xs);
  }
  .ps-1 {
    padding-inline-start: var(--space-xs);
  }
  .pe-1 {
    padding-inline-end: var(--space-xs);
  }

  .pbs-2 {
    padding-block-start: var(--space-sm);
  }
  .pbe-2 {
    padding-block-end: var(--space-sm);
  }
  .ps-2 {
    padding-inline-start: var(--space-sm);
  }
  .pe-2 {
    padding-inline-end: var(--space-sm);
  }

  .pbs-3 {
    padding-block-start: var(--space-md);
  }
  .pbe-3 {
    padding-block-end: var(--space-md);
  }
  .ps-3 {
    padding-inline-start: var(--space-md);
  }
  .pe-3 {
    padding-inline-end: var(--space-md);
  }

  .pbs-4 {
    padding-block-start: var(--space-lg);
  }
  .pbe-4 {
    padding-block-end: var(--space-lg);
  }
  .ps-4 {
    padding-inline-start: var(--space-lg);
  }
  .pe-4 {
    padding-inline-end: var(--space-lg);
  }

  .pbs-5 {
    padding-block-start: var(--space-xl);
  }
  .pbe-5 {
    padding-block-end: var(--space-xl);
  }
  .ps-5 {
    padding-inline-start: var(--space-xl);
  }
  .pe-5 {
    padding-inline-end: var(--space-xl);
  }

  .pbs-6 {
    padding-block-start: var(--space-2xl);
  }
  .pbe-6 {
    padding-block-end: var(--space-2xl);
  }
  .ps-6 {
    padding-inline-start: var(--space-2xl);
  }
  .pe-6 {
    padding-inline-end: var(--space-2xl);
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:pbs-0 {
      padding-block-start: 0;
    }
    .sm\:pbe-0 {
      padding-block-end: 0;
    }
    .sm\:pbs-1 {
      padding-block-start: var(--space-xs);
    }
    .sm\:pbe-1 {
      padding-block-end: var(--space-xs);
    }
    .sm\:ps-1 {
      padding-inline-start: var(--space-xs);
    }
    .sm\:pe-1 {
      padding-inline-end: var(--space-xs);
    }

    .sm\:pbs-2 {
      padding-block-start: var(--space-sm);
    }
    .sm\:pbe-2 {
      padding-block-end: var(--space-sm);
    }
    .sm\:ps-2 {
      padding-inline-start: var(--space-sm);
    }
    .sm\:pe-2 {
      padding-inline-end: var(--space-sm);
    }

    .sm\:pbs-3 {
      padding-block-start: var(--space-md);
    }
    .sm\:pbe-3 {
      padding-block-end: var(--space-md);
    }
    .sm\:ps-3 {
      padding-inline-start: var(--space-md);
    }
    .sm\:pe-3 {
      padding-inline-end: var(--space-md);
    }

    .sm\:pbs-4 {
      padding-block-start: var(--space-lg);
    }
    .sm\:pbe-4 {
      padding-block-end: var(--space-lg);
    }
    .sm\:ps-4 {
      padding-inline-start: var(--space-lg);
    }
    .sm\:pe-4 {
      padding-inline-end: var(--space-lg);
    }

    .sm\:pbs-5 {
      padding-block-start: var(--space-xl);
    }
    .sm\:pbe-5 {
      padding-block-end: var(--space-xl);
    }
    .sm\:ps-5 {
      padding-inline-start: var(--space-xl);
    }
    .sm\:pe-5 {
      padding-inline-end: var(--space-xl);
    }

    .sm\:pbs-6 {
      padding-block-start: var(--space-2xl);
    }
    .sm\:pbe-6 {
      padding-block-end: var(--space-2xl);
    }
    .sm\:ps-6 {
      padding-inline-start: var(--space-2xl);
    }
    .sm\:pe-6 {
      padding-inline-end: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:pbs-0 {
      padding-block-start: 0;
    }
    .md\:pbe-0 {
      padding-block-end: 0;
    }
    .md\:pbs-1 {
      padding-block-start: var(--space-xs);
    }
    .md\:pbe-1 {
      padding-block-end: var(--space-xs);
    }
    .md\:ps-1 {
      padding-inline-start: var(--space-xs);
    }
    .md\:pe-1 {
      padding-inline-end: var(--space-xs);
    }

    .md\:pbs-2 {
      padding-block-start: var(--space-sm);
    }
    .md\:pbe-2 {
      padding-block-end: var(--space-sm);
    }
    .md\:ps-2 {
      padding-inline-start: var(--space-sm);
    }
    .md\:pe-2 {
      padding-inline-end: var(--space-sm);
    }

    .md\:pbs-3 {
      padding-block-start: var(--space-md);
    }
    .md\:pbe-3 {
      padding-block-end: var(--space-md);
    }
    .md\:ps-3 {
      padding-inline-start: var(--space-md);
    }
    .md\:pe-3 {
      padding-inline-end: var(--space-md);
    }

    .md\:pbs-4 {
      padding-block-start: var(--space-lg);
    }
    .md\:pbe-4 {
      padding-block-end: var(--space-lg);
    }
    .md\:ps-4 {
      padding-inline-start: var(--space-lg);
    }
    .md\:pe-4 {
      padding-inline-end: var(--space-lg);
    }

    .md\:pbs-5 {
      padding-block-start: var(--space-xl);
    }
    .md\:pbe-5 {
      padding-block-end: var(--space-xl);
    }
    .md\:ps-5 {
      padding-inline-start: var(--space-xl);
    }
    .md\:pe-5 {
      padding-inline-end: var(--space-xl);
    }

    .md\:pbs-6 {
      padding-block-start: var(--space-2xl);
    }
    .md\:pbe-6 {
      padding-block-end: var(--space-2xl);
    }
    .md\:ps-6 {
      padding-inline-start: var(--space-2xl);
    }
    .md\:pe-6 {
      padding-inline-end: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:pbs-0 {
      padding-block-start: 0;
    }
    .lg\:pbe-0 {
      padding-block-end: 0;
    }
    .lg\:pbs-1 {
      padding-block-start: var(--space-xs);
    }
    .lg\:pbe-1 {
      padding-block-end: var(--space-xs);
    }
    .lg\:ps-1 {
      padding-inline-start: var(--space-xs);
    }
    .lg\:pe-1 {
      padding-inline-end: var(--space-xs);
    }

    .lg\:pbs-2 {
      padding-block-start: var(--space-sm);
    }
    .lg\:pbe-2 {
      padding-block-end: var(--space-sm);
    }
    .lg\:ps-2 {
      padding-inline-start: var(--space-sm);
    }
    .lg\:pe-2 {
      padding-inline-end: var(--space-sm);
    }

    .lg\:pbs-3 {
      padding-block-start: var(--space-md);
    }
    .lg\:pbe-3 {
      padding-block-end: var(--space-md);
    }
    .lg\:ps-3 {
      padding-inline-start: var(--space-md);
    }
    .lg\:pe-3 {
      padding-inline-end: var(--space-md);
    }

    .lg\:pbs-4 {
      padding-block-start: var(--space-lg);
    }
    .lg\:pbe-4 {
      padding-block-end: var(--space-lg);
    }
    .lg\:ps-4 {
      padding-inline-start: var(--space-lg);
    }
    .lg\:pe-4 {
      padding-inline-end: var(--space-lg);
    }

    .lg\:pbs-5 {
      padding-block-start: var(--space-xl);
    }
    .lg\:pbe-5 {
      padding-block-end: var(--space-xl);
    }
    .lg\:ps-5 {
      padding-inline-start: var(--space-xl);
    }
    .lg\:pe-5 {
      padding-inline-end: var(--space-xl);
    }

    .lg\:pbs-6 {
      padding-block-start: var(--space-2xl);
    }
    .lg\:pbe-6 {
      padding-block-end: var(--space-2xl);
    }
    .lg\:ps-6 {
      padding-inline-start: var(--space-2xl);
    }
    .lg\:pe-6 {
      padding-inline-end: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:pbs-0 {
      padding-block-start: 0;
    }
    .xl\:pbe-0 {
      padding-block-end: 0;
    }
    .xl\:pbs-1 {
      padding-block-start: var(--space-xs);
    }
    .xl\:pbe-1 {
      padding-block-end: var(--space-xs);
    }
    .xl\:ps-1 {
      padding-inline-start: var(--space-xs);
    }
    .xl\:pe-1 {
      padding-inline-end: var(--space-xs);
    }

    .xl\:pbs-2 {
      padding-block-start: var(--space-sm);
    }
    .xl\:pbe-2 {
      padding-block-end: var(--space-sm);
    }
    .xl\:ps-2 {
      padding-inline-start: var(--space-sm);
    }
    .xl\:pe-2 {
      padding-inline-end: var(--space-sm);
    }

    .xl\:pbs-3 {
      padding-block-start: var(--space-md);
    }
    .xl\:pbe-3 {
      padding-block-end: var(--space-md);
    }
    .xl\:ps-3 {
      padding-inline-start: var(--space-md);
    }
    .xl\:pe-3 {
      padding-inline-end: var(--space-md);
    }

    .xl\:pbs-4 {
      padding-block-start: var(--space-lg);
    }
    .xl\:pbe-4 {
      padding-block-end: var(--space-lg);
    }
    .xl\:ps-4 {
      padding-inline-start: var(--space-lg);
    }
    .xl\:pe-4 {
      padding-inline-end: var(--space-lg);
    }

    .xl\:pbs-5 {
      padding-block-start: var(--space-xl);
    }
    .xl\:pbe-5 {
      padding-block-end: var(--space-xl);
    }
    .xl\:ps-5 {
      padding-inline-start: var(--space-xl);
    }
    .xl\:pe-5 {
      padding-inline-end: var(--space-xl);
    }

    .xl\:pbs-6 {
      padding-block-start: var(--space-2xl);
    }
    .xl\:pbe-6 {
      padding-block-end: var(--space-2xl);
    }
    .xl\:ps-6 {
      padding-inline-start: var(--space-2xl);
    }
    .xl\:pe-6 {
      padding-inline-end: var(--space-2xl);
    }
  }

  .top-0 {
    top: 0;
  }

  .top-50 {
    top: 50%;
  }

  .top-full {
    top: 100%;
  }

  .-top-full {
    top: -100%;
  }

  .bottom-0 {
    bottom: 0;
  }

  .bottom-50 {
    bottom: 50%;
  }

  .bottom-full {
    bottom: 100%;
  }

  .-bottom-full {
    bottom: -100%;
  }

  .left-0 {
    left: 0;
  }

  .left-50 {
    left: 50%;
  }

  .left-full {
    left: 100%;
  }

  .-left-full {
    left: -100%;
  }

  .right-0 {
    right: 0;
  }

  .right-50 {
    right: 50%;
  }

  .right-full {
    right: 100%;
  }

  .-right-full {
    right: -100%;
  }

  .start-0 {
    inset-inline-start: 0;
  }

  .start-50 {
    inset-inline-start: 50%;
  }

  .start-full {
    inset-inline-start: 100%;
  }

  .-start-full {
    inset-inline-start: -100%;
  }

  .end-0 {
    inset-inline-end: 0;
  }

  .end-50 {
    inset-inline-end: 50%;
  }

  .end-full {
    inset-inline-end: 100%;
  }

  .-end-full {
    inset-inline-end: -100%;
  }

  .inset-0 {
    inset: 0;
  }

  .inset-auto {
    inset: auto;
  }

  .inset-full {
    inset: 100%;
  }

  .-inset-full {
    inset: -100%;
  }

  .z-auto {
    z-index: auto !important;
  }

  .-z-1 {
    z-index: -1 !important;
  }

  .z-0 {
    z-index: 0 !important;
  }

  .z-1 {
    z-index: 1 !important;
  }

  .z-2 {
    z-index: 2 !important;
  }

  .z-3 {
    z-index: 3 !important;
  }

  .z-4 {
    z-index: 4 !important;
  }

  .z-5 {
    z-index: 5 !important;
  }

  .z-header {
    z-index: var(--z-header) !important;
  }

  .z-sticky {
    z-index: var(--z-sticky) !important;
  }

  .z-fixed {
    z-index: var(--z-fixed) !important;
  }

  .z-max {
    z-index: 9999 !important;
  }
  .bg-auto {
    background-size: auto;
  }

  .bg-cover {
    background-size: cover;
  }

  .bg-contain {
    background-size: contain;
  }

  .bg-full {
    background-size: 100% 100%;
  }

  .bg-bottom {
    background-position: bottom;
  }

  .bg-center {
    background-position: center;
  }

  .bg-left {
    background-position: left;
  }

  .bg-left-bottom {
    background-position: left bottom;
  }

  .bg-left-top {
    background-position: left top;
  }

  .bg-right {
    background-position: right;
  }

  .bg-right-bottom {
    background-position: right bottom;
  }

  .bg-right-top {
    background-position: right top;
  }

  .bg-top {
    background-position: top;
  }

  .bg-repeat {
    background-repeat: repeat;
  }

  .bg-no-repeat {
    background-repeat: no-repeat;
  }

  .bg-repeat-x {
    background-repeat: repeat-x;
  }

  .bg-repeat-y {
    background-repeat: repeat-y;
  }

  .bg-repeat-round {
    background-repeat: round;
  }

  .bg-repeat-space {
    background-repeat: space;
  }

  .bg-fixed {
    background-attachment: fixed;
  }

  .bg-local {
    background-attachment: local;
  }

  .bg-scroll {
    background-attachment: scroll;
  }

  .bg-clip-border {
    background-clip: border-box;
  }

  .bg-clip-padding {
    background-clip: padding-box;
  }

  .bg-clip-content {
    background-clip: content-box;
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .bg-origin-border {
    background-origin: border-box;
  }

  .bg-origin-padding {
    background-origin: padding-box;
  }

  .bg-origin-content {
    background-origin: content-box;
  }

  .bg-none {
    background-image: none;
  }

  .bg-preset-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .bg-blend-normal {
    background-blend-mode: normal;
  }

  .bg-blend-multiply {
    background-blend-mode: multiply;
  }

  .bg-blend-screen {
    background-blend-mode: screen;
  }

  .bg-blend-overlay {
    background-blend-mode: overlay;
  }

  .bg-blend-darken {
    background-blend-mode: darken;
  }

  .bg-blend-lighten {
    background-blend-mode: lighten;
  }

  .bg-blend-color {
    background-blend-mode: color;
  }

  .bg-blend-luminosity {
    background-blend-mode: luminosity;
  }
  .w-auto {
    width: auto;
  }

  .w-full {
    width: 100%;
  }

  .w-min {
    width: -moz-min-content;
    width: min-content;
  }

  .w-max {
    width: -moz-max-content;
    width: max-content;
  }

  .w-fit {
    width: -moz-fit-content;
    width: fit-content;
  }

  .w-screen {
    width: 100vw;
  }

  .min-w-full {
    min-width: 100%;
  }

  .max-w-full {
    max-width: 100%;
  }

  .min-w-0 {
    min-width: 0;
  }

  .max-w-xs {
    max-width: 20rem;
  }
  .max-w-sm {
    max-width: 24rem;
  }
  .max-w-md {
    max-width: 28rem;
  }
  .max-w-lg {
    max-width: 32rem;
  }
  .max-w-xl {
    max-width: 36rem;
  }
  .max-w-2xl {
    max-width: 42rem;
  }
  .max-w-3xl {
    max-width: 48rem;
  }
  .max-w-4xl {
    max-width: 56rem;
  }
  .max-w-5xl {
    max-width: 64rem;
  }
  .max-w-6xl {
    max-width: 72rem;
  }
  .max-w-7xl {
    max-width: 80rem;
  }

  .w-0 {
    width: 0px;
  }

  .w-1 {
    width: 0.25rem;
  }

  .w-2 {
    width: 0.5rem;
  }

  .w-3 {
    width: 0.75rem;
  }

  .w-4 {
    width: 1rem;
  }

  .w-5 {
    width: 1.25rem;
  }

  .w-6 {
    width: 1.5rem;
  }

  .w-7 {
    width: 1.75rem;
  }

  .w-8 {
    width: 2rem;
  }

  .w-10 {
    width: 2.5rem;
  }

  .w-12 {
    width: 3rem;
  }

  .w-16 {
    width: 4rem;
  }

  .w-20 {
    width: 5rem;
  }

  .w-24 {
    width: 6rem;
  }

  .w-32 {
    width: 8rem;
  }

  .w-40 {
    width: 10rem;
  }

  .w-48 {
    width: 12rem;
  }

  .w-56 {
    width: 14rem;
  }

  .w-64 {
    width: 16rem;
  }

  .w-72 {
    width: 18rem;
  }

  .w-80 {
    width: 20rem;
  }

  .w-96 {
    width: 24rem;
  }
  .w-1fr12 {
    width: 8.333333%;
  }
  .w-1fr6 {
    width: 16.666667%;
  }
  .w-1fr5 {
    width: 20%;
  }
  .w-1fr4 {
    width: 25%;
  }
  .w-1fr3 {
    width: 33.333333%;
  }
  .w-1fr2 {
    width: 50%;
  }
  .w-2fr3 {
    width: 66.666667%;
  }
  .w-3fr4 {
    width: 75%;
  }
  .w-5fr6 {
    width: 83.333333%;
  }
  .w-11fr12 {
    width: 91.666667%;
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:w-full {
      width: 100%;
    }

    .sm\:w-auto {
      width: auto;
    }

    .sm\:w-1fr12 {
      width: 8.333333%;
    }

    .sm\:w-1fr6 {
      width: 16.666667%;
    }

    .sm\:w-1fr5 {
      width: 20%;
    }

    .sm\:w-1fr4 {
      width: 25%;
    }

    .sm\:w-1fr3 {
      width: 33.333333%;
    }

    .sm\:w-1fr2 {
      width: 50%;
    }

    .sm\:w-2fr3 {
      width: 66.666667%;
    }

    .sm\:w-3fr4 {
      width: 75%;
    }

    .sm\:w-5fr6 {
      width: 83.333333%;
    }

    .sm\:w-11fr12 {
      width: 91.666667%;
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:w-full {
      width: 100%;
    }

    .md\:w-auto {
      width: auto;
    }

    .md\:w-1fr12 {
      width: 8.333333%;
    }

    .md\:w-1fr6 {
      width: 16.666667%;
    }

    .md\:w-1fr5 {
      width: 20%;
    }

    .md\:w-1fr4 {
      width: 25%;
    }

    .md\:w-1fr3 {
      width: 33.333333%;
    }

    .md\:w-1fr2 {
      width: 50%;
    }

    .md\:w-2fr3 {
      width: 66.666667%;
    }

    .md\:w-3fr4 {
      width: 75%;
    }

    .md\:w-5fr6 {
      width: 83.333333%;
    }

    .md\:w-11fr12 {
      width: 91.666667%;
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:w-full {
      width: 100%;
    }

    .lg\:w-auto {
      width: auto;
    }

    .lg\:w-1fr12 {
      width: 8.333333%;
    }

    .lg\:w-1fr6 {
      width: 16.666667%;
    }

    .lg\:w-1fr5 {
      width: 20%;
    }

    .lg\:w-1fr4 {
      width: 25%;
    }

    .lg\:w-1fr3 {
      width: 33.333333%;
    }

    .lg\:w-1fr2 {
      width: 50%;
    }

    .lg\:w-2fr3 {
      width: 66.666667%;
    }

    .lg\:w-3fr4 {
      width: 75%;
    }

    .lg\:w-5fr6 {
      width: 83.333333%;
    }

    .lg\:w-11fr12 {
      width: 91.666667%;
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:w-full {
      width: 100%;
    }

    .xl\:w-auto {
      width: auto;
    }

    .xl\:w-1fr12 {
      width: 8.333333%;
    }

    .xl\:w-1fr6 {
      width: 16.666667%;
    }

    .xl\:w-1fr5 {
      width: 20%;
    }

    .xl\:w-1fr4 {
      width: 25%;
    }

    .xl\:w-1fr3 {
      width: 33.333333%;
    }

    .xl\:w-1fr2 {
      width: 50%;
    }

    .xl\:w-2fr3 {
      width: 66.666667%;
    }

    .xl\:w-3fr4 {
      width: 75%;
    }

    .xl\:w-5fr6 {
      width: 83.333333%;
    }

    .xl\:w-11fr12 {
      width: 91.666667%;
    }
  }

  @media (min-width: var(--breakpoint-2xl)) {
    .\32xl\:w-full {
      width: 100%;
    }

    .\32xl\:w-auto {
      width: auto;
    }

    .\32xl\:w-1fr12 {
      width: 8.333333%;
    }

    .\32xl\:w-1fr6 {
      width: 16.666667%;
    }

    .\32xl\:w-1fr5 {
      width: 20%;
    }

    .\32xl\:w-1fr4 {
      width: 25%;
    }

    .\32xl\:w-1fr3 {
      width: 33.333333%;
    }

    .\32xl\:w-1fr2 {
      width: 50%;
    }

    .\32xl\:w-2fr3 {
      width: 66.666667%;
    }

    .\32xl\:w-3fr4 {
      width: 75%;
    }

    .\32xl\:w-5fr6 {
      width: 83.333333%;
    }

    .\32xl\:w-11fr12 {
      width: 91.666667%;
    }
  }
  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-screen {
    height: 100vh;
    height: 100dvh;
  }

  .h-min {
    height: -moz-min-content;
    height: min-content;
  }

  .h-max {
    height: -moz-max-content;
    height: max-content;
  }

  .max-h-48 {
    max-height: 12rem;
  }

  .max-h-64 {
    max-height: 16rem;
  }

  .max-h-96 {
    max-height: 24rem;
  }

  .h-fit {
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-0 {
    height: 0px;
  }

  .h-px {
    height: 1px;
  }

  .h-1 {
    height: 0.25rem;
  }

  .h-2 {
    height: 0.5rem;
  }

  .h-3 {
    height: 0.75rem;
  }

  .h-4 {
    height: 1rem;
  }

  .h-5 {
    height: 1.25rem;
  }

  .h-6 {
    height: 1.5rem;
  }

  .h-7 {
    height: 1.75rem;
  }

  .h-8 {
    height: 2rem;
  }

  .h-10 {
    height: 2.5rem;
  }

  .h-12 {
    height: 3rem;
  }

  .h-16 {
    height: 4rem;
  }

  .h-20 {
    height: 5rem;
  }

  .h-24 {
    height: 6rem;
  }

  .h-32 {
    height: 8rem;
  }

  .h-40 {
    height: 10rem;
  }

  .h-48 {
    height: 12rem;
  }

  .h-64 {
    height: 16rem;
  }

  .h-96 {
    height: 24rem;
  }

  .h-1fr4 {
    height: 25%;
  }

  .h-1fr2 {
    height: 50%;
  }

  .h-3fr4 {
    height: 75%;
  }

  .h-1fr3 {
    height: 33.333333%;
  }

  .h-2fr3 {
    height: 66.666667%;
  }

  .min-h-0 {
    min-height: 0px;
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-screen {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .max-h-full {
    max-height: 100%;
  }

  .max-h-screen {
    max-height: 100vh;
    max-height: 100dvh;
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:h-auto {
      height: auto;
    }

    .sm\:h-full {
      height: 100%;
    }

    .sm\:h-fit {
      height: -moz-fit-content;
      height: fit-content;
    }

    .sm\:min-h-0 {
      min-height: 0px;
    }

    .sm\:min-h-full {
      min-height: 100%;
    }

    .sm\:max-h-full {
      max-height: 100%;
    }

    .sm\:h-1fr4 {
      height: 25%;
    }

    .sm\:h-1fr3 {
      height: 33.333333%;
    }

    .sm\:h-1fr2 {
      height: 50%;
    }

    .sm\:h-2fr3 {
      height: 66.666667%;
    }

    .sm\:h-3fr4 {
      height: 75%;
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:h-auto {
      height: auto;
    }

    .md\:h-full {
      height: 100%;
    }

    .md\:h-fit {
      height: -moz-fit-content;
      height: fit-content;
    }

    .md\:min-h-0 {
      min-height: 0px;
    }

    .md\:min-h-full {
      min-height: 100%;
    }

    .md\:max-h-full {
      max-height: 100%;
    }

    .md\:h-1fr4 {
      height: 25%;
    }

    .md\:h-1fr3 {
      height: 33.333333%;
    }

    .md\:h-1fr2 {
      height: 50%;
    }

    .md\:h-2fr3 {
      height: 66.666667%;
    }

    .md\:h-3fr4 {
      height: 75%;
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:h-auto {
      height: auto;
    }

    .lg\:h-full {
      height: 100%;
    }

    .lg\:h-fit {
      height: -moz-fit-content;
      height: fit-content;
    }

    .lg\:min-h-0 {
      min-height: 0px;
    }

    .lg\:min-h-full {
      min-height: 100%;
    }

    .lg\:max-h-full {
      max-height: 100%;
    }

    .lg\:h-1fr4 {
      height: 25%;
    }

    .lg\:h-1fr3 {
      height: 33.333333%;
    }

    .lg\:h-1fr2 {
      height: 50%;
    }

    .lg\:h-2fr3 {
      height: 66.666667%;
    }

    .lg\:h-3fr4 {
      height: 75%;
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:h-auto {
      height: auto;
    }

    .xl\:h-full {
      height: 100%;
    }

    .xl\:h-fit {
      height: -moz-fit-content;
      height: fit-content;
    }

    .xl\:min-h-0 {
      min-height: 0px;
    }

    .xl\:min-h-full {
      min-height: 100%;
    }

    .xl\:max-h-full {
      max-height: 100%;
    }

    .xl\:h-1fr4 {
      height: 25%;
    }

    .xl\:h-1fr3 {
      height: 33.333333%;
    }

    .xl\:h-1fr2 {
      height: 50%;
    }

    .xl\:h-2fr3 {
      height: 66.666667%;
    }

    .xl\:h-3fr4 {
      height: 75%;
    }
  }

  @media (min-width: var(--breakpoint-2xl)) {
    .\32xl\:h-auto {
      height: auto;
    }

    .\32xl\:h-full {
      height: 100%;
    }

    .\32xl\:h-fit {
      height: -moz-fit-content;
      height: fit-content;
    }

    .\32xl\:min-h-0 {
      min-height: 0px;
    }

    .\32xl\:min-h-full {
      min-height: 100%;
    }

    .\32xl\:max-h-full {
      max-height: 100%;
    }

    .\32xl\:h-1fr4 {
      height: 25%;
    }

    .\32xl\:h-1fr3 {
      height: 33.333333%;
    }

    .\32xl\:h-1fr2 {
      height: 50%;
    }

    .\32xl\:h-2fr3 {
      height: 66.666667%;
    }

    .\32xl\:h-3fr4 {
      height: 75%;
    }
  }

  .aspect-auto {
    aspect-ratio: auto;
  }

  .aspect-square {
    aspect-ratio: 1/1;
  }

  .aspect-video {
    aspect-ratio: 16/9;
  }

  .aspect-photo {
    aspect-ratio: 4/3;
  }

  .aspect-wide {
    aspect-ratio: 21/9;
  }

  .aspect-tall {
    aspect-ratio: 3/4;
  }

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

  .flex-col {
    flex-direction: column;
  }

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

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-1 {
    flex: 1 1 0%;
  }

  .flex-auto {
    flex: 1 1 auto;
  }

  .flex-none {
    flex: none;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  .place-center {
    align-items: center;
    justify-content: center;
  }

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

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

  .justify-content-center {
    justify-content: center;
  }

  .justify-content-between {
    justify-content: space-between;
  }

  .justify-content-around {
    justify-content: space-around;
  }

  .align-items-start {
    align-items: flex-start;
  }

  .align-items-end {
    align-items: flex-end;
  }

  .align-items-center {
    align-items: center;
  }

  .align-items-baseline {
    align-items: baseline;
  }

  .align-items-stretch {
    align-items: stretch;
  }

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

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

  .align-content-center {
    align-content: center;
  }

  .align-content-between {
    align-content: space-between;
  }

  .align-content-around {
    align-content: space-around;
  }

  .align-content-stretch {
    align-content: stretch;
  }

  .align-self-auto {
    align-self: auto;
  }

  .align-self-start {
    align-self: flex-start;
  }

  .align-self-end {
    align-self: flex-end;
  }

  .align-self-center {
    align-self: center;
  }

  .align-self-stretch {
    align-self: stretch;
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:flex-column {
      flex-direction: column;
    }

    .sm\:flex-row-reverse {
      flex-direction: row-reverse;
    }

    .sm\:flex-col-reverse {
      flex-direction: column-reverse;
    }

    .sm\:flex-wrap {
      flex-wrap: wrap;
    }

    .sm\:flex-nowrap {
      flex-wrap: nowrap;
    }

    .sm\:wrap-reverse {
      flex-wrap: wrap-reverse;
    }

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

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

    .sm\:justify-content-center {
      justify-content: center;
    }

    .sm\:justify-content-between {
      justify-content: space-between;
    }

    .sm\:justify-content-around {
      justify-content: space-around;
    }

    .sm\:align-items-start {
      align-items: flex-start;
    }

    .sm\:align-items-end {
      align-items: flex-end;
    }

    .sm\:align-items-center {
      align-items: center;
    }

    .sm\:align-items-baseline {
      align-items: baseline;
    }

    .sm\:align-items-stretch {
      align-items: stretch;
    }

    .sm\:align-content-start {
      align-content: flex-start;
    }

    .sm\:align-content-end {
      align-content: flex-end;
    }

    .sm\:align-content-center {
      align-content: center;
    }

    .sm\:align-content-between {
      align-content: space-between;
    }

    .sm\:align-content-around {
      align-content: space-around;
    }

    .sm\:align-content-stretch {
      align-content: stretch;
    }

    .sm\:align-self-auto {
      align-self: auto;
    }

    .sm\:align-self-start {
      align-self: flex-start;
    }

    .sm\:align-self-end {
      align-self: flex-end;
    }

    .sm\:align-self-center {
      align-self: center;
    }

    .sm\:align-self-baseline {
      align-self: baseline;
    }

    .sm\:align-self-stretch {
      align-self: stretch;
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:flex-row {
      flex-direction: row;
    }

    .md\:flex-column {
      flex-direction: column;
    }

    .md\:flex-row-reverse {
      flex-direction: row-reverse;
    }

    .md\:flex-col-reverse {
      flex-direction: column-reverse;
    }

    .md\:flex-wrap {
      flex-wrap: wrap;
    }

    .md\:flex-nowrap {
      flex-wrap: nowrap;
    }

    .md\:wrap-reverse {
      flex-wrap: wrap-reverse;
    }

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

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

    .md\:justify-content-center {
      justify-content: center;
    }

    .md\:justify-content-between {
      justify-content: space-between;
    }

    .md\:justify-content-around {
      justify-content: space-around;
    }

    .md\:align-items-start {
      align-items: flex-start;
    }

    .md\:align-items-end {
      align-items: flex-end;
    }

    .md\:align-items-center {
      align-items: center;
    }

    .md\:align-items-baseline {
      align-items: baseline;
    }

    .md\:align-items-stretch {
      align-items: stretch;
    }

    .md\:align-content-start {
      align-content: flex-start;
    }

    .md\:align-content-end {
      align-content: flex-end;
    }

    .md\:align-content-center {
      align-content: center;
    }

    .md\:align-content-between {
      align-content: space-between;
    }

    .md\:align-content-around {
      align-content: space-around;
    }

    .md\:align-content-stretch {
      align-content: stretch;
    }

    .md\:align-self-auto {
      align-self: auto;
    }

    .md\:align-self-start {
      align-self: flex-start;
    }

    .md\:align-self-end {
      align-self: flex-end;
    }

    .md\:align-self-center {
      align-self: center;
    }

    .md\:align-self-baseline {
      align-self: baseline;
    }

    .md\:align-self-stretch {
      align-self: stretch;
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:flex-column {
      flex-direction: column;
    }

    .lg\:flex-row-reverse {
      flex-direction: row-reverse;
    }

    .lg\:flex-col-reverse {
      flex-direction: column-reverse;
    }

    .lg\:flex-wrap {
      flex-wrap: wrap;
    }

    .lg\:flex-nowrap {
      flex-wrap: nowrap;
    }

    .lg\:wrap-reverse {
      flex-wrap: wrap-reverse;
    }

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

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

    .lg\:justify-content-center {
      justify-content: center;
    }

    .lg\:justify-content-between {
      justify-content: space-between;
    }

    .lg\:justify-content-around {
      justify-content: space-around;
    }

    .lg\:align-items-start {
      align-items: flex-start;
    }

    .lg\:align-items-end {
      align-items: flex-end;
    }

    .lg\:align-items-center {
      align-items: center;
    }

    .lg\:align-items-baseline {
      align-items: baseline;
    }

    .lg\:align-items-stretch {
      align-items: stretch;
    }

    .lg\:align-content-start {
      align-content: flex-start;
    }

    .lg\:align-content-end {
      align-content: flex-end;
    }

    .lg\:align-content-center {
      align-content: center;
    }

    .lg\:align-content-between {
      align-content: space-between;
    }

    .lg\:align-content-around {
      align-content: space-around;
    }

    .lg\:align-content-stretch {
      align-content: stretch;
    }

    .lg\:align-self-auto {
      align-self: auto;
    }

    .lg\:align-self-start {
      align-self: flex-start;
    }

    .lg\:align-self-end {
      align-self: flex-end;
    }

    .lg\:align-self-center {
      align-self: center;
    }

    .lg\:align-self-baseline {
      align-self: baseline;
    }

    .lg\:align-self-stretch {
      align-self: stretch;
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:flex-row {
      flex-direction: row;
    }

    .xl\:flex-column {
      flex-direction: column;
    }

    .xl\:flex-row-reverse {
      flex-direction: row-reverse;
    }

    .xl\:flex-col-reverse {
      flex-direction: column-reverse;
    }

    .xl\:flex-wrap {
      flex-wrap: wrap;
    }

    .xl\:flex-nowrap {
      flex-wrap: nowrap;
    }

    .xl\:wrap-reverse {
      flex-wrap: wrap-reverse;
    }

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

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

    .xl\:justify-content-center {
      justify-content: center;
    }

    .xl\:justify-content-between {
      justify-content: space-between;
    }

    .xl\:justify-content-around {
      justify-content: space-around;
    }

    .xl\:align-items-start {
      align-items: flex-start;
    }

    .xl\:align-items-end {
      align-items: flex-end;
    }

    .xl\:align-items-center {
      align-items: center;
    }

    .xl\:align-items-baseline {
      align-items: baseline;
    }

    .xl\:align-items-stretch {
      align-items: stretch;
    }

    .xl\:align-content-start {
      align-content: flex-start;
    }

    .xl\:align-content-end {
      align-content: flex-end;
    }

    .xl\:align-content-center {
      align-content: center;
    }

    .xl\:align-content-between {
      align-content: space-between;
    }

    .xl\:align-content-around {
      align-content: space-around;
    }

    .xl\:align-content-stretch {
      align-content: stretch;
    }

    .xl\:align-self-auto {
      align-self: auto;
    }

    .xl\:align-self-start {
      align-self: flex-start;
    }

    .xl\:align-self-end {
      align-self: flex-end;
    }

    .xl\:align-self-center {
      align-self: center;
    }

    .xl\:align-self-baseline {
      align-self: baseline;
    }

    .xl\:align-self-stretch {
      align-self: stretch;
    }
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .order-3 {
    order: 3;
  }

  .order-4 {
    order: 4;
  }

  .order-5 {
    order: 5;
  }

  .order-6 {
    order: 6;
  }

  .order-7 {
    order: 7;
  }

  .order-8 {
    order: 8;
  }

  .order-9 {
    order: 9;
  }

  .order-10 {
    order: 10;
  }

  .order-11 {
    order: 11;
  }

  .order-12 {
    order: 12;
  }

  .order-first {
    order: -9999;
  }

  .order-last {
    order: 9999;
  }

  .order-none {
    order: 0;
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:order-1 {
      order: 1;
    }

    .sm\:order-2 {
      order: 2;
    }

    .sm\:order-3 {
      order: 3;
    }

    .sm\:order-4 {
      order: 4;
    }

    .sm\:order-5 {
      order: 5;
    }

    .sm\:order-6 {
      order: 6;
    }

    .sm\:order-7 {
      order: 7;
    }

    .sm\:order-8 {
      order: 8;
    }

    .sm\:order-9 {
      order: 9;
    }

    .sm\:order-10 {
      order: 10;
    }

    .sm\:order-11 {
      order: 11;
    }

    .sm\:order-12 {
      order: 12;
    }

    .sm\:order-first {
      order: -9999;
    }

    .sm\:order-last {
      order: 9999;
    }

    .sm\:order-none {
      order: 0;
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:order-1 {
      order: 1;
    }

    .md\:order-2 {
      order: 2;
    }

    .md\:order-3 {
      order: 3;
    }

    .md\:order-4 {
      order: 4;
    }

    .md\:order-5 {
      order: 5;
    }

    .md\:order-6 {
      order: 6;
    }

    .md\:order-7 {
      order: 7;
    }

    .md\:order-8 {
      order: 8;
    }

    .md\:order-9 {
      order: 9;
    }

    .md\:order-10 {
      order: 10;
    }

    .md\:order-11 {
      order: 11;
    }

    .md\:order-12 {
      order: 12;
    }

    .md\:order-first {
      order: -9999;
    }

    .md\:order-last {
      order: 9999;
    }

    .md\:order-none {
      order: 0;
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:order-1 {
      order: 1;
    }

    .lg\:order-2 {
      order: 2;
    }

    .lg\:order-3 {
      order: 3;
    }

    .lg\:order-4 {
      order: 4;
    }

    .lg\:order-5 {
      order: 5;
    }

    .lg\:order-6 {
      order: 6;
    }

    .lg\:order-7 {
      order: 7;
    }

    .lg\:order-8 {
      order: 8;
    }

    .lg\:order-9 {
      order: 9;
    }

    .lg\:order-10 {
      order: 10;
    }

    .lg\:order-11 {
      order: 11;
    }

    .lg\:order-12 {
      order: 12;
    }

    .lg\:order-first {
      order: -9999;
    }

    .lg\:order-last {
      order: 9999;
    }

    .lg\:order-none {
      order: 0;
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:order-1 {
      order: 1;
    }

    .xl\:order-2 {
      order: 2;
    }

    .xl\:order-3 {
      order: 3;
    }

    .xl\:order-4 {
      order: 4;
    }

    .xl\:order-5 {
      order: 5;
    }

    .xl\:order-6 {
      order: 6;
    }

    .xl\:order-7 {
      order: 7;
    }

    .xl\:order-8 {
      order: 8;
    }

    .xl\:order-9 {
      order: 9;
    }

    .xl\:order-10 {
      order: 10;
    }

    .xl\:order-11 {
      order: 11;
    }

    .xl\:order-12 {
      order: 12;
    }

    .xl\:order-first {
      order: -9999;
    }

    .xl\:order-last {
      order: 9999;
    }

    .xl\:order-none {
      order: 0;
    }
  }

  .gap-1 {
    gap: var(--space-xs);
  }

  .gap-2 {
    gap: var(--space-sm);
  }

  .gap-3 {
    gap: var(--space-md);
  }

  .gap-4 {
    gap: var(--space-lg);
  }

  .gap-5 {
    gap: var(--space-xl);
  }

  .gap-6 {
    gap: var(--space-2xl);
  }

  .gap-x-1 {
    -moz-column-gap: var(--space-xs);
         column-gap: var(--space-xs);
  }

  .gap-x-2 {
    -moz-column-gap: var(--space-sm);
         column-gap: var(--space-sm);
  }

  .gap-x-3 {
    -moz-column-gap: var(--space-md);
         column-gap: var(--space-md);
  }

  .gap-x-4 {
    -moz-column-gap: var(--space-lg);
         column-gap: var(--space-lg);
  }

  .gap-x-5 {
    -moz-column-gap: var(--space-xl);
         column-gap: var(--space-xl);
  }

  .gap-x-6 {
    -moz-column-gap: var(--space-2xl);
         column-gap: var(--space-2xl);
  }

  .gap-y-1 {
    row-gap: var(--space-xs);
  }

  .gap-y-2 {
    row-gap: var(--space-sm);
  }

  .gap-y-3 {
    row-gap: var(--space-md);
  }

  .gap-y-4 {
    row-gap: var(--space-lg);
  }

  .gap-y-5 {
    row-gap: var(--space-xl);
  }

  .gap-y-6 {
    row-gap: var(--space-2xl);
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:gap-1 {
      gap: var(--space-xs);
    }

    .sm\:gap-2 {
      gap: var(--space-sm);
    }

    .sm\:gap-3 {
      gap: var(--space-md);
    }

    .sm\:gap-4 {
      gap: var(--space-lg);
    }

    .sm\:gap-5 {
      gap: var(--space-xl);
    }

    .sm\:gap-6 {
      gap: var(--space-2xl);
    }

    .sm\:gap-x-1 {
      -moz-column-gap: var(--space-xs);
           column-gap: var(--space-xs);
    }

    .sm\:gap-x-2 {
      -moz-column-gap: var(--space-sm);
           column-gap: var(--space-sm);
    }

    .sm\:gap-x-3 {
      -moz-column-gap: var(--space-md);
           column-gap: var(--space-md);
    }

    .sm\:gap-x-4 {
      -moz-column-gap: var(--space-lg);
           column-gap: var(--space-lg);
    }

    .sm\:gap-x-5 {
      -moz-column-gap: var(--space-xl);
           column-gap: var(--space-xl);
    }

    .sm\:gap-x-6 {
      -moz-column-gap: var(--space-2xl);
           column-gap: var(--space-2xl);
    }

    .sm\:gap-y-1 {
      row-gap: var(--space-xs);
    }

    .sm\:gap-y-2 {
      row-gap: var(--space-sm);
    }

    .sm\:gap-y-3 {
      row-gap: var(--space-md);
    }

    .sm\:gap-y-4 {
      row-gap: var(--space-lg);
    }

    .sm\:gap-y-5 {
      row-gap: var(--space-xl);
    }

    .sm\:gap-y-6 {
      row-gap: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:gap-1 {
      gap: var(--space-xs);
    }

    .md\:gap-2 {
      gap: var(--space-sm);
    }

    .md\:gap-3 {
      gap: var(--space-md);
    }

    .md\:gap-4 {
      gap: var(--space-lg);
    }

    .md\:gap-5 {
      gap: var(--space-xl);
    }

    .md\:gap-6 {
      gap: var(--space-2xl);
    }

    .md\:gap-x-1 {
      -moz-column-gap: var(--space-xs);
           column-gap: var(--space-xs);
    }

    .md\:gap-x-2 {
      -moz-column-gap: var(--space-sm);
           column-gap: var(--space-sm);
    }

    .md\:gap-x-3 {
      -moz-column-gap: var(--space-md);
           column-gap: var(--space-md);
    }

    .md\:gap-x-4 {
      -moz-column-gap: var(--space-lg);
           column-gap: var(--space-lg);
    }

    .md\:gap-x-5 {
      -moz-column-gap: var(--space-xl);
           column-gap: var(--space-xl);
    }

    .md\:gap-x-6 {
      -moz-column-gap: var(--space-2xl);
           column-gap: var(--space-2xl);
    }

    .md\:gap-y-1 {
      row-gap: var(--space-xs);
    }

    .md\:gap-y-2 {
      row-gap: var(--space-sm);
    }

    .md\:gap-y-3 {
      row-gap: var(--space-md);
    }

    .md\:gap-y-4 {
      row-gap: var(--space-lg);
    }

    .md\:gap-y-5 {
      row-gap: var(--space-xl);
    }

    .md\:gap-y-6 {
      row-gap: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:gap-1 {
      gap: var(--space-xs);
    }

    .lg\:gap-2 {
      gap: var(--space-sm);
    }

    .lg\:gap-3 {
      gap: var(--space-md);
    }

    .lg\:gap-4 {
      gap: var(--space-lg);
    }

    .lg\:gap-5 {
      gap: var(--space-xl);
    }

    .lg\:gap-6 {
      gap: var(--space-2xl);
    }

    .lg\:gap-x-1 {
      -moz-column-gap: var(--space-xs);
           column-gap: var(--space-xs);
    }

    .lg\:gap-x-2 {
      -moz-column-gap: var(--space-sm);
           column-gap: var(--space-sm);
    }

    .lg\:gap-x-3 {
      -moz-column-gap: var(--space-md);
           column-gap: var(--space-md);
    }

    .lg\:gap-x-4 {
      -moz-column-gap: var(--space-lg);
           column-gap: var(--space-lg);
    }

    .lg\:gap-x-5 {
      -moz-column-gap: var(--space-xl);
           column-gap: var(--space-xl);
    }

    .lg\:gap-x-6 {
      -moz-column-gap: var(--space-2xl);
           column-gap: var(--space-2xl);
    }

    .lg\:gap-y-1 {
      row-gap: var(--space-xs);
    }

    .lg\:gap-y-2 {
      row-gap: var(--space-sm);
    }

    .lg\:gap-y-3 {
      row-gap: var(--space-md);
    }

    .lg\:gap-y-4 {
      row-gap: var(--space-lg);
    }

    .lg\:gap-y-5 {
      row-gap: var(--space-xl);
    }

    .lg\:gap-y-6 {
      row-gap: var(--space-2xl);
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:gap-1 {
      gap: var(--space-xs);
    }

    .xl\:gap-2 {
      gap: var(--space-sm);
    }

    .xl\:gap-3 {
      gap: var(--space-md);
    }

    .xl\:gap-4 {
      gap: var(--space-lg);
    }

    .xl\:gap-5 {
      gap: var(--space-xl);
    }

    .xl\:gap-6 {
      gap: var(--space-2xl);
    }

    .xl\:gap-x-1 {
      -moz-column-gap: var(--space-xs);
           column-gap: var(--space-xs);
    }

    .xl\:gap-x-2 {
      -moz-column-gap: var(--space-sm);
           column-gap: var(--space-sm);
    }

    .xl\:gap-x-3 {
      -moz-column-gap: var(--space-md);
           column-gap: var(--space-md);
    }

    .xl\:gap-x-4 {
      -moz-column-gap: var(--space-lg);
           column-gap: var(--space-lg);
    }

    .xl\:gap-x-5 {
      -moz-column-gap: var(--space-xl);
           column-gap: var(--space-xl);
    }

    .xl\:gap-x-6 {
      -moz-column-gap: var(--space-2xl);
           column-gap: var(--space-2xl);
    }

    .xl\:gap-y-1 {
      row-gap: var(--space-xs);
    }

    .xl\:gap-y-2 {
      row-gap: var(--space-sm);
    }

    .xl\:gap-y-3 {
      row-gap: var(--space-md);
    }

    .xl\:gap-y-4 {
      row-gap: var(--space-lg);
    }

    .xl\:gap-y-5 {
      row-gap: var(--space-xl);
    }

    .xl\:gap-y-6 {
      row-gap: var(--space-2xl);
    }
  }
  .container {
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
  }

  @media (min-width: var(--breakpoint-sm)) {
    .container {
      max-width: var(--breakpoint-sm);
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .container {
      max-width: var(--breakpoint-md);
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .container {
      max-width: var(--breakpoint-lg);
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .container {
      max-width: var(--breakpoint-xl);
    }
  }

  @media (min-width: var(--breakpoint-2xl)) {
    .container {
      max-width: var(--breakpoint-2xl);
    }
  }

  .grid-cols-1 {
    grid-template-columns: var(--grid-cols-1);
  }

  .grid-cols-2 {
    grid-template-columns: var(--grid-cols-2);
  }

  .grid-cols-3 {
    grid-template-columns: var(--grid-cols-3);
  }

  .grid-cols-4 {
    grid-template-columns: var(--grid-cols-4);
  }

  .grid-cols-5 {
    grid-template-columns: var(--grid-cols-5);
  }

  .grid-cols-6 {
    grid-template-columns: var(--grid-cols-6);
  }

  .grid-cols-7 {
    grid-template-columns: var(--grid-cols-7);
  }

  .grid-cols-8 {
    grid-template-columns: var(--grid-cols-8);
  }

  .grid-cols-9 {
    grid-template-columns: var(--grid-cols-9);
  }

  .grid-cols-10 {
    grid-template-columns: var(--grid-cols-10);
  }

  .grid-cols-11 {
    grid-template-columns: var(--grid-cols-11);
  }

  .grid-cols-12 {
    grid-template-columns: var(--grid-cols-12);
  }

  .grid-cols-auto-fit-xs {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .grid-cols-auto-fit-sm {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .grid-cols-auto-fit-md {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .grid-cols-auto-fit-lg {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  }

  .grid-cols-auto-fill-xs {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .grid-cols-auto-fill-sm {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .grid-cols-auto-fill-md {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .grid-cols-auto-fill-lg {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }

  .grid-rows-1 {
    grid-template-rows: var(--grid-rows-1);
  }

  .grid-rows-2 {
    grid-template-rows: var(--grid-rows-2);
  }

  .grid-rows-3 {
    grid-template-rows: var(--grid-rows-3);
  }

  .grid-rows-4 {
    grid-template-rows: var(--grid-rows-4);
  }

  .grid-rows-5 {
    grid-template-rows: var(--grid-rows-5);
  }

  .grid-rows-6 {
    grid-template-rows: var(--grid-rows-6);
  }

  .auto-rows-auto {
    grid-auto-rows: auto;
  }

  .auto-rows-min {
    grid-auto-rows: min-content;
  }

  .auto-rows-max {
    grid-auto-rows: max-content;
  }

  .auto-rows-fr {
    grid-auto-rows: 1fr;
  }

  .auto-cols-auto {
    grid-auto-columns: auto;
  }

  .auto-cols-min {
    grid-auto-columns: min-content;
  }

  .auto-cols-fr {
    grid-auto-columns: 1fr;
  }

  .grid-flow-row {
    grid-auto-flow: row;
  }

  .grid-flow-col {
    grid-auto-flow: column;
  }

  .grid-flow-row-dense {
    grid-auto-flow: row dense;
  }

  .grid-flow-col-dense {
    grid-auto-flow: column dense;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-3 {
    grid-column: span 3 / span 3;
  }

  .col-span-4 {
    grid-column: span 4 / span 4;
  }

  .col-span-5 {
    grid-column: span 5 / span 5;
  }

  .col-span-6 {
    grid-column: span 6 / span 6;
  }

  .col-span-7 {
    grid-column: span 7 / span 7;
  }

  .col-span-8 {
    grid-column: span 8 / span 8;
  }

  .col-span-9 {
    grid-column: span 9 / span 9;
  }

  .col-span-10 {
    grid-column: span 10 / span 10;
  }

  .col-span-11 {
    grid-column: span 11 / span 11;
  }

  .col-span-12 {
    grid-column: span 12 / span 12;
  }

  .row-span-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-2 {
    grid-row: span 2 / span 2;
  }

  .row-span-3 {
    grid-row: span 3 / span 3;
  }

  .row-span-4 {
    grid-row: span 4 / span 4;
  }

  .row-span-5 {
    grid-row: span 5 / span 5;
  }

  .row-span-6 {
    grid-row: span 6 / span 6;
  }

  .row-min-100 {
    grid-auto-rows: minmax(100px, auto);
  }

  .row-min-150 {
    grid-auto-rows: minmax(150px, auto);
  }

  .row-min-200 {
    grid-auto-rows: minmax(200px, auto);
  }

  .row-min-250 {
    grid-auto-rows: minmax(250px, auto);
  }

  .row-min-300 {
    grid-auto-rows: minmax(300px, auto);
  }

  .col-start-1 {
    grid-column-start: 1;
  }

  .col-start-2 {
    grid-column-start: 2;
  }

  .col-start-3 {
    grid-column-start: 3;
  }

  .col-start-4 {
    grid-column-start: 4;
  }

  .col-start-5 {
    grid-column-start: 5;
  }

  .col-start-6 {
    grid-column-start: 6;
  }

  .col-start-7 {
    grid-column-start: 7;
  }

  .col-start-8 {
    grid-column-start: 8;
  }

  .col-start-9 {
    grid-column-start: 9;
  }

  .col-start-10 {
    grid-column-start: 10;
  }

  .col-start-11 {
    grid-column-start: 11;
  }

  .col-start-12 {
    grid-column-start: 12;
  }

  .col-end-1 {
    grid-column-end: 1;
  }

  .col-end-2 {
    grid-column-end: 2;
  }

  .col-end-3 {
    grid-column-end: 3;
  }

  .col-end-4 {
    grid-column-end: 4;
  }

  .col-end-5 {
    grid-column-end: 5;
  }

  .col-end-6 {
    grid-column-end: 6;
  }

  .col-end-7 {
    grid-column-end: 7;
  }

  .col-end-8 {
    grid-column-end: 8;
  }

  .col-end-9 {
    grid-column-end: 9;
  }

  .col-end-10 {
    grid-column-end: 10;
  }

  .col-end-11 {
    grid-column-end: 11;
  }

  .col-end-12 {
    grid-column-end: 12;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .row-start-2 {
    grid-row-start: 2;
  }

  .row-start-3 {
    grid-row-start: 3;
  }

  .row-start-4 {
    grid-row-start: 4;
  }

  .row-start-5 {
    grid-row-start: 5;
  }

  .row-start-6 {
    grid-row-start: 6;
  }

  .row-start-7 {
    grid-row-start: 7;
  }

  .row-start-8 {
    grid-row-start: 8;
  }

  .row-start-9 {
    grid-row-start: 9;
  }

  .row-start-10 {
    grid-row-start: 10;
  }

  .row-start-11 {
    grid-row-start: 11;
  }

  .row-start-12 {
    grid-row-start: 12;
  }

  .row-end-1 {
    grid-row-end: 1;
  }

  .row-end-2 {
    grid-row-end: 2;
  }

  .row-end-3 {
    grid-row-end: 3;
  }

  .row-end-4 {
    grid-row-end: 4;
  }

  .row-end-5 {
    grid-row-end: 5;
  }

  .row-end-6 {
    grid-row-end: 6;
  }

  .row-end-7 {
    grid-row-end: 7;
  }

  .row-end-8 {
    grid-row-end: 8;
  }

  .row-end-9 {
    grid-row-end: 9;
  }

  .row-end-10 {
    grid-row-end: 10;
  }

  .row-end-11 {
    grid-row-end: 11;
  }

  .row-end-12 {
    grid-row-end: 12;
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .row-span-full {
    grid-row: 1 / -1;
  }

  .place-content-start {
    place-content: start;
  }

  .place-content-center {
    place-content: center;
  }

  .place-content-end {
    place-content: end;
  }

  .place-content-between {
    place-content: space-between;
  }

  .place-content-around {
    place-content: space-around;
  }

  .place-items-start {
    place-items: start;
  }

  .place-items-center {
    place-items: center;
  }

  .place-items-end {
    place-items: end;
  }

  .place-items-stretch {
    place-items: stretch;
  }

  .justify-items-start {
    justify-items: start;
  }

  .justify-items-center {
    justify-items: center;
  }

  .justify-items-end {
    justify-items: end;
  }

  .justify-items-stretch {
    justify-items: stretch;
  }

  @media (min-width: var(--breakpoint-sm)) {
    .sm\:grid-cols-1 {
      grid-template-columns: var(--grid-cols-1);
    }

    .sm\:grid-cols-2 {
      grid-template-columns: var(--grid-cols-2);
    }

    .sm\:grid-cols-3 {
      grid-template-columns: var(--grid-cols-3);
    }

    .sm\:grid-cols-4 {
      grid-template-columns: var(--grid-cols-4);
    }

    .sm\:grid-cols-5 {
      grid-template-columns: var(--grid-cols-5);
    }

    .sm\:grid-cols-6 {
      grid-template-columns: var(--grid-cols-6);
    }

    .sm\:grid-cols-7 {
      grid-template-columns: var(--grid-cols-7);
    }

    .sm\:grid-cols-8 {
      grid-template-columns: var(--grid-cols-8);
    }

    .sm\:grid-cols-9 {
      grid-template-columns: var(--grid-cols-9);
    }

    .sm\:grid-cols-10 {
      grid-template-columns: var(--grid-cols-10);
    }

    .sm\:grid-cols-11 {
      grid-template-columns: var(--grid-cols-11);
    }

    .sm\:grid-cols-12 {
      grid-template-columns: var(--grid-cols-12);
    }

    .sm\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .sm\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .sm\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .sm\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .sm\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .sm\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .sm\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .sm\:col-span-9 {
      grid-column: span 9 / span 9;
    }

    .sm\:col-span-10 {
      grid-column: span 10 / span 10;
    }

    .sm\:col-span-11 {
      grid-column: span 11 / span 11;
    }

    .sm\:col-span-12 {
      grid-column: span 12 / span 12;
    }
  }

  @media (min-width: var(--breakpoint-md)) {
    .md\:grid-cols-1 {
      grid-template-columns: var(--grid-cols-1);
    }

    .md\:grid-cols-2 {
      grid-template-columns: var(--grid-cols-2);
    }

    .md\:grid-cols-3 {
      grid-template-columns: var(--grid-cols-3);
    }

    .md\:grid-cols-4 {
      grid-template-columns: var(--grid-cols-4);
    }

    .md\:grid-cols-5 {
      grid-template-columns: var(--grid-cols-5);
    }

    .md\:grid-cols-6 {
      grid-template-columns: var(--grid-cols-6);
    }

    .md\:grid-cols-7 {
      grid-template-columns: var(--grid-cols-7);
    }

    .md\:grid-cols-8 {
      grid-template-columns: var(--grid-cols-8);
    }

    .md\:grid-cols-9 {
      grid-template-columns: var(--grid-cols-9);
    }

    .md\:grid-cols-10 {
      grid-template-columns: var(--grid-cols-10);
    }

    .md\:grid-cols-11 {
      grid-template-columns: var(--grid-cols-11);
    }

    .md\:grid-cols-12 {
      grid-template-columns: var(--grid-cols-12);
    }

    .md\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .md\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .md\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .md\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .md\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .md\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .md\:col-span-9 {
      grid-column: span 9 / span 9;
    }

    .md\:col-span-10 {
      grid-column: span 10 / span 10;
    }

    .md\:col-span-11 {
      grid-column: span 11 / span 11;
    }

    .md\:col-span-12 {
      grid-column: span 12 / span 12;
    }
  }

  @media (min-width: var(--breakpoint-lg)) {
    .lg\:grid-cols-1 {
      grid-template-columns: var(--grid-cols-1);
    }

    .lg\:grid-cols-2 {
      grid-template-columns: var(--grid-cols-2);
    }

    .lg\:grid-cols-3 {
      grid-template-columns: var(--grid-cols-3);
    }

    .lg\:grid-cols-4 {
      grid-template-columns: var(--grid-cols-4);
    }

    .lg\:grid-cols-5 {
      grid-template-columns: var(--grid-cols-5);
    }

    .lg\:grid-cols-6 {
      grid-template-columns: var(--grid-cols-6);
    }

    .lg\:grid-cols-7 {
      grid-template-columns: var(--grid-cols-7);
    }

    .lg\:grid-cols-8 {
      grid-template-columns: var(--grid-cols-8);
    }

    .lg\:grid-cols-9 {
      grid-template-columns: var(--grid-cols-9);
    }

    .lg\:grid-cols-10 {
      grid-template-columns: var(--grid-cols-10);
    }

    .lg\:grid-cols-11 {
      grid-template-columns: var(--grid-cols-11);
    }

    .lg\:grid-cols-12 {
      grid-template-columns: var(--grid-cols-12);
    }

    .lg\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .lg\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .lg\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .lg\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .lg\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .lg\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .lg\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .lg\:col-span-9 {
      grid-column: span 9 / span 9;
    }

    .lg\:col-span-10 {
      grid-column: span 10 / span 10;
    }

    .lg\:col-span-11 {
      grid-column: span 11 / span 11;
    }

    .lg\:col-span-12 {
      grid-column: span 12 / span 12;
    }
  }

  @media (min-width: var(--breakpoint-xl)) {
    .xl\:grid-cols-1 {
      grid-template-columns: var(--grid-cols-1);
    }

    .xl\:grid-cols-2 {
      grid-template-columns: var(--grid-cols-2);
    }

    .xl\:grid-cols-3 {
      grid-template-columns: var(--grid-cols-3);
    }

    .xl\:grid-cols-4 {
      grid-template-columns: var(--grid-cols-4);
    }

    .xl\:grid-cols-5 {
      grid-template-columns: var(--grid-cols-5);
    }

    .xl\:grid-cols-6 {
      grid-template-columns: var(--grid-cols-6);
    }

    .xl\:grid-cols-7 {
      grid-template-columns: var(--grid-cols-7);
    }

    .xl\:grid-cols-8 {
      grid-template-columns: var(--grid-cols-8);
    }

    .xl\:grid-cols-9 {
      grid-template-columns: var(--grid-cols-9);
    }

    .xl\:grid-cols-10 {
      grid-template-columns: var(--grid-cols-10);
    }

    .xl\:grid-cols-11 {
      grid-template-columns: var(--grid-cols-11);
    }

    .xl\:grid-cols-12 {
      grid-template-columns: var(--grid-cols-12);
    }

    .xl\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .xl\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .xl\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .xl\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .xl\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .xl\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .xl\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .xl\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .xl\:col-span-9 {
      grid-column: span 9 / span 9;
    }

    .xl\:col-span-10 {
      grid-column: span 10 / span 10;
    }

    .xl\:col-span-11 {
      grid-column: span 11 / span 11;
    }

    .xl\:col-span-12 {
      grid-column: span 12 / span 12;
    }
  }

  .collapse {
    display: none;
  }

  .collapse.is-open {
    display: block;
  }

  blockquote.is-boxed,
  .blockquote {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    color: var(--body-text);
    word-break: normal;
    font-family: inherit;
    font-weight: 400;
    font-size: 1.125rem;
  }

  .blockquote-footer {
    display: block;
    font-size: 0.87em;
    font-weight: 300;
    color: color-mix(in oklch, var(--body-text) 50%, transparent);
    margin-top: 1rem;
    margin-bottom: 0.525rem;
  }

  .blockquote-footer::before {
    content: "\2014 \00A0";
  }

  .shadow-none {
    box-shadow: none !important;
  }

  .shadow-tiny {
    box-shadow: var(--shadow-tiny);
  }

  .shadow {
    box-shadow: var(--shadow);
  }

  .shadow-medium {
    box-shadow: var(--shadow-medium);
  }

  .shadow-large {
    box-shadow: var(--shadow-large);
  }

  .shadow-xlarge {
    box-shadow: var(--shadow-xlarge);
  }

  .shadow-inner {
    box-shadow: var(--shadow-inset);
  }
  .is-glass {
    background-color: var(--glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
  }

  .hover\:shadow-tiny:hover {
    box-shadow: var(--shadow);
  }

  .hover\:shadow:hover {
    box-shadow: var(--shadow);
  }

  .hover\:shadow-medium:hover {
    box-shadow: var(--shadow-medium);
  }

  .hover\:shadow-large:hover {
    box-shadow: var(--shadow-large);
  }
  .hover\:scale-0:hover {
    scale: 0;
  }

  .hover\:scale-75:hover {
    scale: 0.75;
  }

  .hover\:scale-90:hover {
    scale: 0.9;
  }

  .hover\:scale-95:hover {
    scale: 0.95;
  }

  .hover\:scale-100:hover {
    scale: 1;
  }

  .hover\:scale-105:hover {
    scale: 1.05;
  }

  .hover\:scale-110:hover {
    scale: 1.1;
  }

  .hover\:scale-125:hover {
    scale: 1.25;
  }
  .hover\:translate-y-1:hover {
    --translate-y: -0.25rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:translate-y-2:hover {
    --translate-y: -0.5rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:translate-y-3:hover {
    --translate-y: -0.75rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:translate-y-4:hover {
    --translate-y: -1rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:-translate-y-1:hover {
    --translate-y: 0.25rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:-translate-y-2:hover {
    --translate-y: 0.5rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:-translate-y-3:hover {
    --translate-y: 0.75rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:-translate-y-4:hover {
    --translate-y: 1rem;
    translate: var(--translate-x) var(--translate-y);
  }
  .hover\:translate-x-1:hover {
    --translate-x: 0.25rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:translate-x-2:hover {
    --translate-x: 0.5rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:translate-x-3:hover {
    --translate-x: 0.75rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:translate-x-4:hover {
    --translate-x: 1rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:-translate-x-1:hover {
    --translate-x: -0.25rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:-translate-x-2:hover {
    --translate-x: -0.5rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:-translate-x-3:hover {
    --translate-x: -0.75rem;
    translate: var(--translate-x) var(--translate-y);
  }

  .hover\:-translate-x-4:hover {
    --translate-x: -1rem;
    translate: var(--translate-x) var(--translate-y);
  }
  .hover\:rotate-1:hover {
    rotate: 1deg;
  }

  .hover\:rotate-2:hover {
    rotate: 2deg;
  }

  .hover\:rotate-3:hover {
    rotate: 3deg;
  }

  .hover\:rotate-12:hover {
    rotate: 12deg;
  }

  .hover\:rotate-45:hover {
    rotate: 45deg;
  }

  .hover\:rotate-90:hover {
    rotate: 90deg;
  }

  .hover\:rotate-180:hover {
    rotate: 180deg;
  }

  .hover\:-rotate-1:hover {
    rotate: -1deg;
  }

  .hover\:-rotate-2:hover {
    rotate: -2deg;
  }

  .hover\:-rotate-3:hover {
    rotate: -3deg;
  }

  .hover\:-rotate-12:hover {
    rotate: -12deg;
  }

  .hover\:-rotate-45:hover {
    rotate: -45deg;
  }

  .hover\:-rotate-90:hover {
    rotate: -90deg;
  }
  .hover\:brightness-75:hover {
    filter: brightness(0.75);
  }

  .hover\:brightness-90:hover {
    filter: brightness(0.9);
  }

  .hover\:brightness-110:hover {
    filter: brightness(1.1);
  }

  .hover\:brightness-125:hover {
    filter: brightness(1.25);
  }
  .hover\:grayscale:hover {
    filter: grayscale(100%);
  }

  .hover\:grayscale-none:hover {
    filter: grayscale(0);
  }
  .hover\:opacity-0:hover {
    opacity: 0;
  }

  .hover\:opacity-25:hover {
    opacity: 0.25;
  }

  .hover\:opacity-50:hover {
    opacity: 0.5;
  }

  .hover\:opacity-75:hover {
    opacity: 0.75;
  }

  .hover\:opacity-95:hover {
    opacity: 0.95;
  }

  .hover\:opacity-100:hover {
    opacity: 1;
  }

  .backdrop-blur-tiny {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .backdrop-blur-small {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .backdrop-blur {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .backdrop-blur-medium {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .backdrop-blur-large {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .backdrop-blur-xlarge {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  .backdrop-blur-none {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .blur-tiny {
    filter: blur(2px);
  }

  .blur-small {
    filter: blur(4px);
  }

  .blur {
    filter: blur(8px);
  }

  .blur-medium {
    filter: blur(12px);
  }

  .blur-large {
    filter: blur(16px);
  }

  .blur-xlarge {
    filter: blur(24px);
  }

  .blur-none {
    filter: none;
  }
  .grayscale {
    filter: grayscale(100%);
  }

  .grayscale-small {
    filter: grayscale(50%);
  }

  .grayscale-none {
    filter: grayscale(0);
  }

  .brightness-75 {
    filter: brightness(0.75);
  }

  .brightness-90 {
    filter: brightness(0.9);
  }

  .brightness-110 {
    filter: brightness(1.1);
  }

  .brightness-125 {
    filter: brightness(1.25);
  }

  .animation-none {
    animation: none !important;
  }
  .transition-none {
    transition: none !important;
  }

  .transition {
    transition-property: var(--transition-properties);
    transition-timing-function: var(--transition-timing);
    transition-duration: var(--transition-speed);
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--transition-timing);
    transition-duration: var(--transition-speed);
  }

  .transition-color {
    transition-property:
      color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--transition-timing);
    transition-duration: var(--transition-speed);
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--transition-timing);
    transition-duration: var(--transition-speed);
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--transition-timing);
    transition-duration: var(--transition-speed);
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--transition-timing);
    transition-duration: var(--transition-speed);
  }
  .duration-75 {
    transition-duration: 75ms;
  }

  .duration-100 {
    transition-duration: 100ms;
  }

  .duration-150 {
    transition-duration: 150ms;
  }

  .duration-200 {
    transition-duration: 200ms;
  }

  .duration-300 {
    transition-duration: 300ms;
  }

  .duration-500 {
    transition-duration: 500ms;
  }

  .duration-700 {
    transition-duration: 700ms;
  }

  .duration-1000 {
    transition-duration: 1000ms;
  }
  .delay-75 {
    transition-delay: 75ms;
  }

  .delay-100 {
    transition-delay: 100ms;
  }

  .delay-150 {
    transition-delay: 150ms;
  }

  .delay-200 {
    transition-delay: 200ms;
  }

  .delay-300 {
    transition-delay: 300ms;
  }

  .delay-500 {
    transition-delay: 500ms;
  }

  .delay-700 {
    transition-delay: 700ms;
  }

  .delay-1000 {
    transition-delay: 1000ms;
  }
  .ease-linear {
    transition-timing-function: linear;
  }

  .ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }

  .ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  .ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .ease-spring {
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

  .select-text {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
  }

  .select-all {
    -webkit-user-select: all;
       -moz-user-select: all;
            user-select: all;
  }

  .select-auto {
    -webkit-user-select: auto;
       -moz-user-select: auto;
            user-select: auto;
  }

  .align-baseline {
    vertical-align: baseline;
  }

  .align-top {
    vertical-align: top;
  }

  .align-middle {
    vertical-align: middle;
  }

  .align-bottom {
    vertical-align: bottom;
  }

  .align-text-top {
    vertical-align: text-top;
  }

  .align-text-bottom {
    vertical-align: text-bottom;
  }

  .align-sub {
    vertical-align: sub;
  }

  .align-super {
    vertical-align: super;
  }

  .is-resizable {
    resize: both;
    overflow: auto;
  }

  .is-resizable-x {
    resize: horizontal;
    overflow: auto;
  }

  .is-resizable-y {
    resize: vertical;
    overflow: auto;
  }

  .ratio {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .ratio.is-1x1 {
    aspect-ratio: 1 / 1;
  }

  .ratio.is-4x3 {
    aspect-ratio: 4 / 3;
  }

  .ratio.is-16x9 {
    aspect-ratio: 16 / 9;
  }

  .ratio.is-21x9 {
    aspect-ratio: 21 / 9;
  }

  .ratio > iframe,
  .ratio > video,
  .ratio > img,
  .ratio > object,
  .ratio > .ratio-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border: 0;
  }

  .border {
    --border-width: 1px;
    --border-style: solid;
    --border-color: var(--border);
    border: var(--border-width) var(--border-style) var(--border-color);
  }

  .border-top {
    border-block-start: var(--border-width, 1px) var(--border-style, solid)
      var(--border-color, var(--border));
  }

  .border-bottom {
    border-block-end: var(--border-width, 1px) var(--border-style, solid)
      var(--border-color, var(--border));
  }

  .border-start {
    border-inline-start: var(--border-width, 1px) var(--border-style, solid)
      var(--border-color, var(--border));
  }

  .border-end {
    border-inline-end: var(--border-width, 1px) var(--border-style, solid)
      var(--border-color, var(--border));
  }

  .border-x {
    border-inline: var(--border-width, 1px) var(--border-style, solid)
      var(--border-color, var(--border));
  }

  .border-y {
    border-block: var(--b-width, 1px) var(--b-style, solid)
      var(--b-color, var(--border));
  }

  .border-0 {
    border-width: 0 !important;
  }

  .border-top-0 {
    border-top-width: 0;
  }

  .border-bottom-0 {
    border-bottom-width: 0;
  }

  .border-start-0 {
    border-inline-start-width: 0;
  }

  .border-end-0 {
    border-inline-end-width: 0;
  }

  .border-2 {
    --border-width: 2px;
  }

  .border-3 {
    --border-width: 3px;
  }

  .border-4 {
    --border-width: 4px;
  }

  .border-5 {
    --border-width: 5px;
  }

  .border-dashed {
    --border-style: dashed;
  }

  .border-dotted {
    --border-style: dotted;
  }

  .border-none {
    --border-style: none;
  }

  .border-primary {
    --border-color: var(--primary);
  }

  .border-success {
    --border-color: var(--success);
  }

  .border-danger {
    --border-color: var(--danger);
  }

  .border-warning {
    --border-color: var(--warning);
  }

  .border-info {
    --border-color: var(--info);
  }

  .border-light {
    --border-color: var(--light);
  }

  .border-dark {
    --border-color: var(--dark);
  }

  .rounded-0 {
    border-radius: 0;
  }

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

  .rounded-2 {
    border-radius: var(--radius-2);
  }

  .rounded-3 {
    border-radius: var(--radius-3);
  }

  .rounded-4 {
    border-radius: var(--radius-4);
  }

  .rounded-5 {
    border-radius: var(--radius-5);
  }

  .rounded-circle {
    border-radius: 50%;
  }

  .rounded-pill {
    border-radius: 9999px;
  }

  .rounded-top {
    border-start-start-radius: var(--radius-2);
    border-start-end-radius: var(--radius-2);
  }

  .rounded-bottom {
    border-end-start-radius: var(--radius-2);
    border-end-end-radius: var(--radius-2);
  }

  .rounded-start {
    border-start-start-radius: var(--radius-2);
    border-end-start-radius: var(--radius-2);
  }

  .rounded-end {
    border-start-end-radius: var(--radius-2);
    border-end-end-radius: var(--radius-2);
  }

  .rounded-ts {
    border-start-start-radius: var(--radius-2);
  }

  .rounded-te {
    border-start-end-radius: var(--radius-2);
  }

  .rounded-bs {
    border-end-start-radius: var(--radius-2);
  }

  .rounded-be {
    border-end-end-radius: var(--radius-2);
  }
  .bg-primary {
    background-color: var(--primary);
  }

  .hover\:bg-primary:hover {
    background-color: var(--primary);
  }
  .bg-success {
    background-color: var(--success);
  }
  .bg-danger {
    background-color: var(--danger);
  }
  .bg-warning {
    background-color: var(--warning);
  }
  .bg-info {
    background-color: var(--info);
  }

  .bg-transparent {
    background-color: transparent;
  }

  .bg-surface {
    background-color: var(--surface);
  }

  .bg-surface-rised {
    background-color: var(--surface-raised);
  }
  .bg-white {
    background-color: var(--white);
  }

  .hover\:bg-white:hover {
    background-color: var(--white);
  }
  .bg-light {
    background-color: var(--light);
  }

  .hover\:bg-light:hover {
    background-color: var(--light);
  }
  .bg-dark {
    background-color: var(--dark);
  }

  .hover\:bg-dark:hover {
    background-color: var(--dark);
  }
  .bg-blue {
    background-color: var(--blue-500);
  }

  .hover\:bg-blue:hover {
    background-color: var(--blue-500);
  }

  .bg-blue-100 {
    background-color: var(--blue-100);
  }

  .hover\:bg-blue-100:hover {
    background-color: var(--blue-100);
  }

  .bg-blue-200 {
    background-color: var(--blue-200);
  }

  .hover\:bg-blue-200:hover {
    background-color: var(--blue-200);
  }

  .bg-blue-300 {
    background-color: var(--blue-300);
  }

  .hover\:bg-blue-300:hover {
    background-color: var(--blue-300);
  }

  .bg-blue-400 {
    background-color: var(--blue-400);
  }

  .hover\:bg-blue-400:hover {
    background-color: var(--blue-400);
  }

  .bg-blue-600 {
    background-color: var(--blue-600);
  }

  .hover\:bg-blue-600:hover {
    background-color: var(--blue-600);
  }

  .bg-blue-700 {
    background-color: var(--blue-700);
  }

  .hover\:bg-blue-700:hover {
    background-color: var(--blue-700);
  }

  .bg-blue-800 {
    background-color: var(--blue-800);
  }

  .hover\:bg-blue-800:hover {
    background-color: var(--blue-800);
  }

  .bg-blue-900 {
    background-color: var(--blue-900);
  }

  .hover\:bg-blue-900:hover {
    background-color: var(--blue-900);
  }
  .bg-purple {
    background-color: var(--purple-500);
  }

  .hover\:bg-purple:hover {
    background-color: var(--purple-500);
  }

  .bg-purple-100 {
    background-color: var(--purple-100);
  }

  .hover\:bg-purple-100:hover {
    background-color: var(--purple-100);
  }

  .bg-purple-200 {
    background-color: var(--purple-200);
  }

  .hover\:bg-purple-200:hover {
    background-color: var(--purple-200);
  }

  .bg-purple-300 {
    background-color: var(--purple-300);
  }

  .hover\:bg-purple-300:hover {
    background-color: var(--purple-300);
  }

  .bg-purple-400 {
    background-color: var(--purple-400);
  }

  .hover\:bg-purple-400:hover {
    background-color: var(--purple-400);
  }

  .bg-purple-600 {
    background-color: var(--purple-600);
  }

  .hover\:bg-purple-600:hover {
    background-color: var(--purple-600);
  }

  .bg-purple-700 {
    background-color: var(--purple-700);
  }

  .hover\:bg-purple-700:hover {
    background-color: var(--purple-700);
  }

  .bg-purple-800 {
    background-color: var(--purple-800);
  }

  .hover\:bg-purple-800:hover {
    background-color: var(--purple-800);
  }

  .bg-purple-900 {
    background-color: var(--purple-900);
  }

  .hover\:bg-purple-900:hover {
    background-color: var(--purple-900);
  }
  .bg-indigo {
    background-color: var(--indigo-500);
  }

  .hover\:bg-indigo:hover {
    background-color: var(--indigo-500);
  }

  .bg-indigo-100 {
    background-color: var(--indigo-100);
  }

  .hover\:bg-indigo-100:hover {
    background-color: var(--indigo-100);
  }

  .bg-indigo-200 {
    background-color: var(--indigo-200);
  }

  .hover\:bg-indigo-200:hover {
    background-color: var(--indigo-200);
  }

  .bg-indigo-300 {
    background-color: var(--indigo-300);
  }

  .hover\:bg-indigo-300:hover {
    background-color: var(--indigo-300);
  }

  .bg-indigo-400 {
    background-color: var(--indigo-400);
  }

  .hover\:bg-indigo-400:hover {
    background-color: var(--indigo-400);
  }

  .bg-indigo-600 {
    background-color: var(--indigo-600);
  }

  .hover\:bg-indigo-600:hover {
    background-color: var(--indigo-600);
  }

  .bg-indigo-700 {
    background-color: var(--indigo-700);
  }

  .hover\:bg-indigo-700:hover {
    background-color: var(--indigo-700);
  }

  .bg-indigo-800 {
    background-color: var(--indigo-800);
  }

  .hover\:bg-indigo-800:hover {
    background-color: var(--indigo-800);
  }

  .bg-indigo-900 {
    background-color: var(--indigo-900);
  }

  .hover\:bg-indigo-900:hover {
    background-color: var(--indigo-900);
  }
  .bg-teal {
    background-color: var(--teal-500);
  }

  .hover\:bg-teal:hover {
    background-color: var(--teal-500);
  }

  .bg-teal-100 {
    background-color: var(--teal-100);
  }

  .hover\:bg-teal-100:hover {
    background-color: var(--teal-100);
  }

  .bg-teal-200 {
    background-color: var(--teal-200);
  }

  .hover\:bg-teal-200:hover {
    background-color: var(--teal-200);
  }

  .bg-teal-300 {
    background-color: var(--teal-300);
  }

  .hover\:bg-teal-300:hover {
    background-color: var(--teal-300);
  }

  .bg-teal-400 {
    background-color: var(--teal-400);
  }

  .hover\:bg-teal-400:hover {
    background-color: var(--teal-400);
  }

  .bg-teal-600 {
    background-color: var(--teal-600);
  }

  .hover\:bg-teal-600:hover {
    background-color: var(--teal-600);
  }

  .bg-teal-700 {
    background-color: var(--teal-700);
  }

  .hover\:bg-teal-700:hover {
    background-color: var(--teal-700);
  }

  .bg-teal-800 {
    background-color: var(--teal-800);
  }

  .hover\:bg-teal-800:hover {
    background-color: var(--teal-800);
  }

  .bg-teal-900 {
    background-color: var(--teal-900);
  }

  .hover\:bg-teal-900:hover {
    background-color: var(--teal-900);
  }
  .bg-green {
    background-color: var(--green-500);
  }

  .hover\:bg-green:hover {
    background-color: var(--green-500);
  }

  .bg-green-100 {
    background-color: var(--green-100);
  }

  .hover\:bg-green-100:hover {
    background-color: var(--green-100);
  }

  .bg-green-200 {
    background-color: var(--green-200);
  }

  .hover\:bg-green-200:hover {
    background-color: var(--green-200);
  }

  .bg-green-300 {
    background-color: var(--green-300);
  }

  .hover\:bg-green-300:hover {
    background-color: var(--green-300);
  }

  .bg-green-400 {
    background-color: var(--green-400);
  }

  .hover\:bg-green-400:hover {
    background-color: var(--green-400);
  }

  .bg-green-600 {
    background-color: var(--green-600);
  }

  .hover\:bg-green-600:hover {
    background-color: var(--green-600);
  }

  .bg-green-700 {
    background-color: var(--green-700);
  }

  .hover\:bg-green-700:hover {
    background-color: var(--green-700);
  }

  .bg-green-800 {
    background-color: var(--green-800);
  }

  .hover\:bg-green-800:hover {
    background-color: var(--green-800);
  }

  .bg-green-900 {
    background-color: var(--green-900);
  }

  .hover\:bg-green-900:hover {
    background-color: var(--green-900);
  }
  .bg-yellow {
    background-color: var(--yellow-500);
  }

  .hover\:bg-yellow:hover {
    background-color: var(--yellow-500);
  }

  .bg-yellow-100 {
    background-color: var(--yellow-100);
  }

  .hover\:bg-yellow-100:hover {
    background-color: var(--yellow-100);
  }

  .bg-yellow-200 {
    background-color: var(--yellow-200);
  }

  .hover\:bg-yellow-200:hover {
    background-color: var(--yellow-200);
  }

  .bg-yellow-300 {
    background-color: var(--yellow-300);
  }

  .hover\:bg-yellow-300:hover {
    background-color: var(--yellow-300);
  }

  .bg-yellow-400 {
    background-color: var(--yellow-400);
  }

  .hover\:bg-yellow-400:hover {
    background-color: var(--yellow-400);
  }

  .bg-yellow-600 {
    background-color: var(--yellow-600);
  }

  .hover\:bg-yellow-600:hover {
    background-color: var(--yellow-600);
  }

  .bg-yellow-700 {
    background-color: var(--yellow-700);
  }

  .hover\:bg-yellow-700:hover {
    background-color: var(--yellow-700);
  }

  .bg-yellow-800 {
    background-color: var(--yellow-800);
  }

  .hover\:bg-yellow-800:hover {
    background-color: var(--yellow-800);
  }

  .bg-yellow-900 {
    background-color: var(--yellow-900);
  }

  .hover\:bg-yellow-900:hover {
    background-color: var(--yellow-900);
  }
  .bg-orange {
    background-color: var(--orange-500);
  }

  .hover\:bg-orange:hover {
    background-color: var(--orange-500);
  }

  .bg-orange-100 {
    background-color: var(--orange-100);
  }

  .hover\:bg-orange-100:hover {
    background-color: var(--orange-100);
  }

  .bg-orange-200 {
    background-color: var(--orange-200);
  }

  .hover\:bg-orange-200:hover {
    background-color: var(--orange-200);
  }

  .bg-orange-300 {
    background-color: var(--orange-300);
  }

  .hover\:bg-orange-300:hover {
    background-color: var(--orange-300);
  }

  .bg-orange-400 {
    background-color: var(--orange-400);
  }

  .hover\:bg-orange-400:hover {
    background-color: var(--orange-400);
  }

  .bg-orange-600 {
    background-color: var(--orange-600);
  }

  .hover\:bg-orange-600:hover {
    background-color: var(--orange-600);
  }

  .bg-orange-700 {
    background-color: var(--orange-700);
  }

  .hover\:bg-orange-700:hover {
    background-color: var(--orange-700);
  }

  .bg-orange-800 {
    background-color: var(--orange-800);
  }

  .hover\:bg-orange-800:hover {
    background-color: var(--orange-800);
  }

  .bg-orange-900 {
    background-color: var(--orange-900);
  }

  .hover\:bg-orange-900:hover {
    background-color: var(--orange-900);
  }
  .bg-red {
    background-color: var(--red-500);
  }

  .hover\:bg-red:hover {
    background-color: var(--red-500);
  }

  .bg-red-100 {
    background-color: var(--red-100);
  }

  .hover\:bg-red-100:hover {
    background-color: var(--red-100);
  }

  .bg-red-200 {
    background-color: var(--red-200);
  }

  .hover\:bg-red-200:hover {
    background-color: var(--red-200);
  }

  .bg-red-300 {
    background-color: var(--red-300);
  }

  .hover\:bg-red-300:hover {
    background-color: var(--red-300);
  }

  .bg-red-400 {
    background-color: var(--red-400);
  }

  .hover\:bg-red-400:hover {
    background-color: var(--red-400);
  }

  .bg-red-600 {
    background-color: var(--red-600);
  }

  .hover\:bg-red-600:hover {
    background-color: var(--red-600);
  }

  .bg-red-700 {
    background-color: var(--red-700);
  }

  .hover\:bg-red-700:hover {
    background-color: var(--red-700);
  }

  .bg-red-800 {
    background-color: var(--red-800);
  }

  .hover\:bg-red-800:hover {
    background-color: var(--red-800);
  }

  .bg-red-900 {
    background-color: var(--red-900);
  }

  .hover\:bg-red-900:hover {
    background-color: var(--red-900);
  }
  .bg-pink {
    background-color: var(--pink-500);
  }

  .hover\:bg-pink:hover {
    background-color: var(--pink-500);
  }

  .bg-pink-100 {
    background-color: var(--pink-100);
  }

  .hover\:bg-pink-100:hover {
    background-color: var(--pink-100);
  }

  .bg-pink-200 {
    background-color: var(--pink-200);
  }

  .hover\:bg-pink-200:hover {
    background-color: var(--pink-200);
  }

  .bg-pink-300 {
    background-color: var(--pink-300);
  }

  .hover\:bg-pink-300:hover {
    background-color: var(--pink-300);
  }

  .bg-pink-400 {
    background-color: var(--pink-400);
  }

  .hover\:bg-pink-400:hover {
    background-color: var(--pink-400);
  }

  .bg-pink-600 {
    background-color: var(--pink-600);
  }

  .hover\:bg-pink-600:hover {
    background-color: var(--pink-600);
  }

  .bg-pink-700 {
    background-color: var(--pink-700);
  }

  .hover\:bg-pink-700:hover {
    background-color: var(--pink-700);
  }

  .bg-pink-800 {
    background-color: var(--pink-800);
  }

  .hover\:bg-pink-800:hover {
    background-color: var(--pink-800);
  }

  .bg-pink-900 {
    background-color: var(--pink-900);
  }

  .hover\:bg-pink-900:hover {
    background-color: var(--pink-900);
  }
  .bg-slate {
    background-color: var(--slate-500);
  }

  .hover\:bg-slate:hover {
    background-color: var(--slate-500);
  }

  .bg-slate-100 {
    background-color: var(--slate-100);
  }

  .hover\:bg-slate-100:hover {
    background-color: var(--slate-100);
  }

  .bg-slate-200 {
    background-color: var(--slate-200);
  }

  .hover\:bg-slate-200:hover {
    background-color: var(--slate-200);
  }

  .bg-slate-300 {
    background-color: var(--slate-300);
  }

  .hover\:bg-slate-300:hover {
    background-color: var(--slate-300);
  }

  .bg-slate-400 {
    background-color: var(--slate-400);
  }

  .hover\:bg-slate-400:hover {
    background-color: var(--slate-400);
  }

  .bg-slate-600 {
    background-color: var(--slate-600);
  }

  .hover\:bg-slate-600:hover {
    background-color: var(--slate-600);
  }

  .bg-slate-700 {
    background-color: var(--slate-700);
  }

  .hover\:bg-slate-700:hover {
    background-color: var(--slate-700);
  }

  .bg-slate-800 {
    background-color: var(--slate-800);
  }

  .hover\:bg-slate-800:hover {
    background-color: var(--slate-800);
  }

  .bg-slate-900 {
    background-color: var(--slate-900);
  }

  .hover\:bg-slate-900:hover {
    background-color: var(--slate-900);
  }
  .text-body {
    color: var(--body-text);
  }

  .text-white {
    color: var(--white);
  }

  .hover\:text-white:hover {
    color: var(--white);
  }

  .text-primary {
    color: var(--primary);
  }

  .hover\:text-primary:hover {
    color: var(--primary);
  }

  .text-success {
    color: var(--success);
  }

  .text-danger {
    color: var(--danger);
  }

  .text-warning {
    color: var(--warning);
  }

  .text-info {
    color: var(--info);
  }

  .text-light {
    color: var(--light);
  }

  .hover\:text-light:hover {
    color: var(--light);
  }

  .text-dark {
    color: var(--dark);
  }

  .hover\:text-dark:hover {
    color: var(--dark);
  }
  .text-blue {
    color: var(--blue-500);
  }

  .hover\:text-blue:hover {
    color: var(--blue-500);
  }

  .text-blue-100 {
    color: var(--blue-100);
  }

  .hover\:text-blue-100:hover {
    color: var(--blue-100);
  }

  .text-blue-200 {
    color: var(--blue-200);
  }

  .hover\:text-blue-200:hover {
    color: var(--blue-200);
  }

  .text-blue-300 {
    color: var(--blue-300);
  }

  .hover\:text-blue-300:hover {
    color: var(--blue-300);
  }

  .text-blue-400 {
    color: var(--blue-400);
  }

  .hover\:text-blue-400:hover {
    color: var(--blue-400);
  }

  .text-blue-600 {
    color: var(--blue-600);
  }

  .hover\:text-blue-600:hover {
    color: var(--blue-600);
  }

  .text-blue-700 {
    color: var(--blue-700);
  }

  .hover\:text-blue-700:hover {
    color: var(--blue-700);
  }

  .text-blue-800 {
    color: var(--blue-800);
  }

  .hover\:text-blue-800:hover {
    color: var(--blue-800);
  }

  .text-blue-900 {
    color: var(--blue-900);
  }

  .hover\:text-blue-900:hover {
    color: var(--blue-900);
  }
  .text-purple {
    color: var(--purple-500);
  }

  .hover\:text-purple:hover {
    color: var(--purple-500);
  }

  .text-purple-100 {
    color: var(--purple-100);
  }

  .hover\:text-purple-100:hover {
    color: var(--purple-100);
  }

  .text-purple-200 {
    color: var(--purple-200);
  }

  .hover\:text-purple-200:hover {
    color: var(--purple-200);
  }

  .text-purple-300 {
    color: var(--purple-300);
  }

  .hover\:text-purple-300:hover {
    color: var(--purple-300);
  }

  .text-purple-400 {
    color: var(--purple-400);
  }

  .hover\:text-purple-400:hover {
    color: var(--purple-400);
  }

  .text-purple-500 {
    color: var(--purple-500);
  }

  .hover\:text-purple-500:hover {
    color: var(--purple-500);
  }

  .text-purple-600 {
    color: var(--purple-600);
  }

  .hover\:text-purple-600:hover {
    color: var(--purple-600);
  }

  .text-purple-700 {
    color: var(--purple-700);
  }

  .hover\:text-purple-700:hover {
    color: var(--purple-700);
  }

  .text-purple-800 {
    color: var(--purple-800);
  }

  .hover\:text-purple-800:hover {
    color: var(--purple-800);
  }

  .text-purple-900 {
    color: var(--purple-900);
  }

  .hover\:text-purple-900:hover {
    color: var(--purple-900);
  }
  .text-indigo {
    color: var(--indigo-500);
  }

  .hover\:text-indigo:hover {
    color: var(--indigo-500);
  }

  .text-indigo-100 {
    color: var(--indigo-100);
  }

  .hover\:text-indigo-100:hover {
    color: var(--indigo-100);
  }

  .text-indigo-200 {
    color: var(--indigo-200);
  }

  .hover\:text-indigo-200:hover {
    color: var(--indigo-200);
  }

  .text-indigo-300 {
    color: var(--indigo-300);
  }

  .hover\:text-indigo-300:hover {
    color: var(--indigo-300);
  }

  .text-indigo-400 {
    color: var(--indigo-400);
  }

  .hover\:text-indigo-400:hover {
    color: var(--indigo-400);
  }

  .text-indigo-600 {
    color: var(--indigo-600);
  }

  .hover\:text-indigo-600:hover {
    color: var(--indigo-600);
  }

  .text-indigo-700 {
    color: var(--indigo-700);
  }

  .hover\:text-indigo-700:hover {
    color: var(--indigo-700);
  }

  .text-indigo-800 {
    color: var(--indigo-800);
  }

  .hover\:text-indigo-800:hover {
    color: var(--indigo-800);
  }

  .text-indigo-900 {
    color: var(--indigo-900);
  }

  .hover\:text-indigo-900:hover {
    color: var(--indigo-900);
  }
  .text-teal {
    color: var(--teal-500);
  }

  .hover\:text-teal:hover {
    color: var(--teal-500);
  }

  .text-teal-100 {
    color: var(--teal-100);
  }

  .hover\:text-teal-100:hover {
    color: var(--teal-100);
  }

  .text-teal-200 {
    color: var(--teal-200);
  }

  .hover\:text-teal-200:hover {
    color: var(--teal-200);
  }

  .text-teal-300 {
    color: var(--teal-300);
  }

  .hover\:text-teal-300:hover {
    color: var(--teal-300);
  }

  .text-teal-400 {
    color: var(--teal-400);
  }

  .hover\:text-teal-400:hover {
    color: var(--teal-400);
  }

  .text-teal-500 {
    color: var(--teal-500);
  }

  .hover\:text-teal-500:hover {
    color: var(--teal-500);
  }

  .text-teal-600 {
    color: var(--teal-600);
  }

  .hover\:text-teal-600:hover {
    color: var(--teal-600);
  }

  .text-teal-700 {
    color: var(--teal-700);
  }

  .hover\:text-teal-700:hover {
    color: var(--teal-700);
  }

  .text-teal-800 {
    color: var(--teal-800);
  }

  .hover\:text-teal-800:hover {
    color: var(--teal-800);
  }

  .text-teal-900 {
    color: var(--teal-900);
  }

  .hover\:text-teal-900:hover {
    color: var(--teal-900);
  }
  .text-green {
    color: var(--green-500);
  }

  .hover\:text-green:hover {
    color: var(--green-500);
  }

  .text-green-100 {
    color: var(--green-100);
  }

  .hover\:text-green-100:hover {
    color: var(--green-100);
  }

  .text-green-200 {
    color: var(--green-200);
  }

  .hover\:text-green-200:hover {
    color: var(--green-200);
  }

  .text-green-300 {
    color: var(--green-300);
  }

  .hover\:text-green-300:hover {
    color: var(--green-300);
  }

  .text-green-400 {
    color: var(--green-400);
  }

  .hover\:text-green-400:hover {
    color: var(--green-400);
  }

  .text-green-500 {
    color: var(--green-500);
  }

  .hover\:text-green-500:hover {
    color: var(--green-500);
  }

  .text-green-600 {
    color: var(--green-600);
  }

  .hover\:text-green-600:hover {
    color: var(--green-600);
  }

  .text-green-700 {
    color: var(--green-700);
  }

  .hover\:text-green-700:hover {
    color: var(--green-700);
  }

  .text-green-800 {
    color: var(--green-800);
  }

  .hover\:text-green-800:hover {
    color: var(--green-800);
  }

  .text-green-900 {
    color: var(--green-900);
  }

  .hover\:text-green-900:hover {
    color: var(--green-900);
  }
  .text-yellow {
    color: var(--yellow-500);
  }

  .hover\:text-yellow:hover {
    color: var(--yellow-500);
  }

  .text-yellow-100 {
    color: var(--yellow-100);
  }

  .hover\:text-yellow-100:hover {
    color: var(--yellow-100);
  }

  .text-yellow-200 {
    color: var(--yellow-200);
  }

  .hover\:text-yellow-200:hover {
    color: var(--yellow-200);
  }

  .text-yellow-300 {
    color: var(--yellow-300);
  }

  .hover\:text-yellow-300:hover {
    color: var(--yellow-300);
  }

  .text-yellow-400 {
    color: var(--yellow-400);
  }

  .hover\:text-yellow-400:hover {
    color: var(--yellow-400);
  }

  .text-yellow-500 {
    color: var(--yellow-500);
  }

  .hover\:text-yellow-500:hover {
    color: var(--yellow-500);
  }

  .text-yellow-600 {
    color: var(--yellow-600);
  }

  .hover\:text-yellow-600:hover {
    color: var(--yellow-600);
  }

  .text-yellow-700 {
    color: var(--yellow-700);
  }

  .hover\:text-yellow-700:hover {
    color: var(--yellow-700);
  }

  .text-yellow-800 {
    color: var(--yellow-800);
  }

  .hover\:text-yellow-800:hover {
    color: var(--yellow-800);
  }

  .text-yellow-900 {
    color: var(--yellow-900);
  }

  .hover\:text-yellow-900:hover {
    color: var(--yellow-900);
  }
  .text-orange {
    color: var(--orange-500);
  }

  .hover\:text-orange:hover {
    color: var(--orange-500);
  }

  .text-orange-100 {
    color: var(--orange-100);
  }

  .hover\:text-orange-100:hover {
    color: var(--orange-100);
  }

  .text-orange-200 {
    color: var(--orange-200);
  }

  .hover\:text-orange-200:hover {
    color: var(--orange-200);
  }

  .text-orange-300 {
    color: var(--orange-300);
  }

  .hover\:text-orange-300:hover {
    color: var(--orange-300);
  }

  .text-orange-400 {
    color: var(--orange-400);
  }

  .hover\:text-orange-400:hover {
    color: var(--orange-400);
  }

  .text-orange-500 {
    color: var(--orange-500);
  }

  .hover\:text-orange-500:hover {
    color: var(--orange-500);
  }

  .text-orange-600 {
    color: var(--orange-600);
  }

  .hover\:text-orange-600:hover {
    color: var(--orange-600);
  }

  .text-orange-700 {
    color: var(--orange-700);
  }

  .hover\:text-orange-700:hover {
    color: var(--orange-700);
  }

  .text-orange-800 {
    color: var(--orange-800);
  }

  .hover\:text-orange-800:hover {
    color: var(--orange-800);
  }

  .text-orange-900 {
    color: var(--orange-900);
  }

  .hover\:text-orange-900:hover {
    color: var(--orange-900);
  }
  .text-red {
    color: var(--red-500);
  }

  .hover\:text-red:hover {
    color: var(--red-500);
  }

  .text-red-100 {
    color: var(--red-100);
  }

  .hover\:text-red-100:hover {
    color: var(--red-100);
  }

  .text-red-200 {
    color: var(--red-200);
  }

  .hover\:text-red-200:hover {
    color: var(--red-200);
  }

  .text-red-300 {
    color: var(--red-300);
  }

  .hover\:text-red-300:hover {
    color: var(--red-300);
  }

  .text-red-400 {
    color: var(--red-400);
  }

  .hover\:text-red-400:hover {
    color: var(--red-400);
  }

  .text-red-600 {
    color: var(--red-600);
  }

  .hover\:text-red-600:hover {
    color: var(--red-600);
  }

  .text-red-700 {
    color: var(--red-700);
  }

  .hover\:text-red-700:hover {
    color: var(--red-700);
  }

  .text-red-800 {
    color: var(--red-800);
  }

  .hover\:text-red-800:hover {
    color: var(--red-800);
  }

  .text-red-900 {
    color: var(--red-900);
  }

  .hover\:text-red-900:hover {
    color: var(--red-900);
  }
  .text-pink {
    color: var(--pink-500);
  }

  .hover\:text-pink:hover {
    color: var(--pink-500);
  }

  .text-pink-100 {
    color: var(--pink-100);
  }

  .hover\:text-pink-100:hover {
    color: var(--pink-100);
  }

  .text-pink-200 {
    color: var(--pink-200);
  }

  .hover\:text-pink-200:hover {
    color: var(--pink-200);
  }

  .text-pink-300 {
    color: var(--pink-300);
  }

  .hover\:text-pink-300:hover {
    color: var(--pink-300);
  }

  .text-pink-400 {
    color: var(--pink-400);
  }

  .hover\:text-pink-400:hover {
    color: var(--pink-400);
  }

  .text-pink-600 {
    color: var(--pink-600);
  }

  .hover\:text-pink-600:hover {
    color: var(--pink-600);
  }

  .text-pink-700 {
    color: var(--pink-700);
  }

  .hover\:text-pink-700:hover {
    color: var(--pink-700);
  }

  .text-pink-800 {
    color: var(--pink-800);
  }

  .hover\:text-pink-800:hover {
    color: var(--pink-800);
  }

  .text-pink-900 {
    color: var(--pink-900);
  }

  .hover\:text-pink-900:hover {
    color: var(--pink-900);
  }
  .text-slate {
    color: var(--slate-500);
  }

  .hover\:text-slate:hover {
    color: var(--slate-500);
  }

  .text-slate-100 {
    color: var(--slate-100);
  }

  .hover\:text-slate-100:hover {
    color: var(--slate-100);
  }

  .text-slate-200 {
    color: var(--slate-200);
  }

  .hover\:text-slate-200:hover {
    color: var(--slate-200);
  }

  .text-slate-300 {
    color: var(--slate-300);
  }

  .hover\:text-slate-300:hover {
    color: var(--slate-300);
  }

  .text-slate-400 {
    color: var(--slate-400);
  }

  .hover\:text-slate-400:hover {
    color: var(--slate-400);
  }

  .text-slate-600 {
    color: var(--slate-600);
  }

  .hover\:text-slate-600:hover {
    color: var(--slate-600);
  }

  .text-slate-700 {
    color: var(--slate-700);
  }

  .hover\:text-slate-700:hover {
    color: var(--slate-700);
  }

  .text-slate-800 {
    color: var(--slate-800);
  }

  .hover\:text-slate-800:hover {
    color: var(--slate-800);
  }

  .text-slate-900 {
    color: var(--slate-900);
  }

  .hover\:text-slate-900:hover {
    color: var(--slate-900);
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-25 {
    opacity: 0.25;
  }

  .opacity-50 {
    opacity: 0.5;
  }

  .opacity-75 {
    opacity: 0.75;
  }

  .opacity-95 {
    opacity: 0.95;
  }

  .opacity-100 {
    opacity: 1;
  }

  .object-fit-contain {
    -o-object-fit: contain;
       object-fit: contain;
  }

  .object-fit-cover {
    -o-object-fit: cover;
       object-fit: cover;
  }

  .object-fit-fill {
    -o-object-fit: fill;
       object-fit: fill;
  }

  .object-fit-scale-down {
    -o-object-fit: scale-down;
       object-fit: scale-down;
  }

  .object-fit-none {
    -o-object-fit: none;
       object-fit: none;
  }

  .object-position-center {
    -o-object-position: center;
       object-position: center;
  }

  .object-position-top {
    -o-object-position: top;
       object-position: top;
  }

  .object-position-bottom {
    -o-object-position: bottom;
       object-position: bottom;
  }

  .object-position-left {
    -o-object-position: left;
       object-position: left;
  }

  .object-position-right {
    -o-object-position: right;
       object-position: right;
  }
  .focus-ring:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px oklch(from var(--accent) l c h / 0.25);
  }

  .focus-ring-danger:focus-visible {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px oklch(from var(--danger) l c h / 0.25);
  }

  .focus-ring-warning:focus-visible {
    outline: 2px solid var(--warning);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px oklch(from var(--warning) l c h / 0.25);
  }

  .focus-ring-success:focus-visible {
    outline: 2px solid var(--success);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px oklch(from var(--success) l c h / 0.25);
  }

  .focus-ring-info:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px oklch(from var(--info) l c h / 0.25);
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }

  .scroll-auto {
    scroll-behavior: auto;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .snap-none {
    scroll-snap-type: none;
  }
  .snap-x {
    scroll-snap-type: x var(--scroll-snap-strictness, mandatory);
  }
  .snap-y {
    scroll-snap-type: y var(--scroll-snap-strictness, mandatory);
  }
  .snap-both {
    scroll-snap-type: both var(--scroll-snap-strictness, mandatory);
  }
  .snap-mandatory {
    --scroll-snap-strictness: mandatory;
  }
  .snap-proximity {
    --scroll-snap-strictness: proximity;
  }
  .snap-start {
    scroll-snap-align: start;
  }
  .snap-center {
    scroll-snap-align: center;
  }
  .snap-end {
    scroll-snap-align: end;
  }
  .snap-align-none {
    scroll-snap-align: none;
  }
  @media print {
    .print-hidden {
      display: none !important;
    }
    .print-block {
      display: block !important;
    }
    .print-inline {
      display: inline !important;
    }
    .print-inline-block {
      display: inline-block !important;
    }
    .print-flex {
      display: flex !important;
    }
    .print-grid {
      display: grid !important;
    }
  }
}