/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-400.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-700.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-700.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-900.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-900.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-900.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-italic-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-400.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-700.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-700.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-900.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-900.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-900.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/playfairdisplaysc-normal-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: "Playfair Display SC", serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-400: oklch(0.704 0.191 22.216);
    --color-red-500: oklch(0.637 0.237 25.331);
    --color-red-600: oklch(0.577 0.245 27.325);
    --color-orange-300: oklch(0.837 0.128 66.29);
    --color-orange-400: oklch(0.75 0.183 55.934);
    --color-orange-500: oklch(0.705 0.213 47.604);
    --color-orange-600: oklch(0.646 0.222 41.116);
    --color-amber-200: oklch(0.924 0.12 95.746);
    --color-amber-500: oklch(0.769 0.188 70.08);
    --color-yellow-50: oklch(0.987 0.026 102.212);
    --color-yellow-400: oklch(0.852 0.199 91.936);
    --color-yellow-500: oklch(0.795 0.184 86.047);
    --color-lime-500: oklch(0.768 0.233 130.85);
    --color-green-500: oklch(0.723 0.219 149.579);
    --color-green-600: oklch(0.627 0.194 149.214);
    --color-emerald-500: oklch(0.696 0.17 162.48);
    --color-teal-500: oklch(0.704 0.14 182.503);
    --color-cyan-500: oklch(0.715 0.143 215.221);
    --color-sky-500: oklch(0.685 0.169 237.323);
    --color-sky-600: oklch(0.588 0.158 241.966);
    --color-blue-500: oklch(0.623 0.214 259.815);
    --color-blue-600: oklch(0.546 0.245 262.881);
    --color-indigo-500: oklch(0.585 0.233 277.117);
    --color-indigo-600: oklch(0.511 0.262 276.966);
    --color-purple-500: oklch(0.627 0.265 303.9);
    --color-fuchsia-500: oklch(0.667 0.295 322.15);
    --color-pink-500: oklch(0.656 0.241 354.308);
    --color-rose-500: oklch(0.645 0.246 16.439);
    --color-slate-100: oklch(0.968 0.007 247.896);
    --color-slate-200: oklch(0.929 0.013 255.508);
    --color-slate-300: oklch(0.869 0.022 252.894);
    --color-slate-400: oklch(0.704 0.04 256.788);
    --color-slate-500: oklch(0.554 0.046 257.417);
    --color-slate-600: oklch(0.446 0.043 257.281);
    --color-slate-700: oklch(0.372 0.044 257.287);
    --color-slate-950: oklch(0.129 0.042 264.695);
    --color-gray-100: oklch(0.967 0.003 264.542);
    --color-gray-400: oklch(0.707 0.022 261.325);
    --color-gray-500: oklch(0.551 0.027 264.364);
    --color-gray-700: oklch(0.373 0.034 259.733);
    --color-gray-800: oklch(0.278 0.033 256.848);
    --color-gray-950: oklch(0.13 0.028 261.692);
    --color-zinc-500: oklch(0.552 0.016 285.938);
    --color-neutral-500: oklch(0.556 0 0);
    --color-neutral-600: oklch(0.439 0 0);
    --color-stone-100: oklch(0.97 0.001 106.424);
    --color-stone-400: oklch(0.709 0.01 56.259);
    --color-stone-500: oklch(0.553 0.013 58.071);
    --color-stone-600: oklch(0.444 0.011 73.639);
    --color-stone-700: oklch(0.374 0.01 67.558);
    --color-stone-800: oklch(0.268 0.007 34.298);
    --color-black: #000000;
    --color-white: #ffffff;
    --spacing: 0.25rem;
    --breakpoint-md: 43rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;
    --container-sm: 24rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-wider: 0.05em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-3xl: 64px;
    --default-transition-duration: 350ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(
      --font-sans--font-variation-settings
    );
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(
      --font-mono--font-feature-settings
    );
    --default-mono-font-variation-settings: var(
      --font-mono--font-variation-settings
    );
    --breakpoint-4xl: 120rem;
    --font-size: 18px;
    --font-weight: var(--font-weight-normal);
    --font: var(--font-sans);
    --heading-font: font-serif;
    --heading-weight: 100;
    --color-brand: #111111;
    --color-brand-100: #f9cdcd;
    --color-brand-200: #f39b9b;
    --color-brand-300: #ee7777;
    --color-brand-400: #303030;
    --color-brand-500: #111111;
    --color-brand-600: #000000;
    --color-brand-700: #860303;
    --color-brand-800: #610505;
    --color-brand-900: #390505;
    --color-light: #FCF3F3;
    --color-dark: #15101a;
    --color-bg: var(--color-white);
    --color-body: #595959;
    --color-heading: #26202c;
    --color-dark-bg: var(--color-dark);
    --color-dark-heading: #FCF3F3;
    --color-label: #5d595f;
    --color-midtone: #d0c8d2;
    --color-muted: #f2f2f3;
    --color-dark-label: #baaacb;
    --color-dark-muted: #352e3e;
    --color-light-dark: var(--color-light);
    --color-white-dark: var(--color-white);
    --color-white-black: var(--color-white);
    --color-dark-light: var(--color-dark);
    --color-black-white: var(--color-black);
    --mt-md: 12;
    --btn-weight: normal;
    --btn-py: 1rem;
    --btn-px: 1.5rem;
    --btn-radius: 0.5rem;
    --btn-border: 1px;
    --btn-border-mix-percentage: 0%;
    --btn-border-mix: white;
    --badge-radius: 0.4rem;
    --badge-border: 0;
    --box-radius: 0.2rem;
    --dropdown-radius: 1rem;
    --form-py: 1rem;
    --form-px: 1.2rem;
    --form-radius: 0rem;
    --plyr-color-main: #111111;
    --container-lg-max: 1620px;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var( --default-font-variation-settings, normal );
    -webkit-tap-highlight-color: transparent;
  }
  body {
    line-height: inherit;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
    font-feature-settings: var( --default-mono-font-feature-settings, normal );
    font-variation-settings: var( --default-mono-font-variation-settings, normal );
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
    color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, currentColor 50%, transparent);
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .absolute-full {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    height: 100%;
    width: 100%;
  }
  .absolute-c {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .absolute-tc {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .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;
  }
  .box-sm {
    --box-radius-inner: calc(var(--box-radius) * 0.75 - 1px);
    border-radius: calc(var(--box-radius) * 0.75);
    position: relative;
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 3);
    @media (width >= 64rem) {
      --box-radius-inner: calc(var(--box-radius) * 0.80 - 1px);
      border-radius: calc(var(--box-radius) * 0.80);
      padding-inline: calc(var(--spacing) * 5);
      padding-top: calc(var(--spacing) * 4);
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
  .box-xs {
    --box-radius-inner: calc(var(--box-radius) * 0.60 - 1px);
    border-radius: calc(var(--box-radius) * 0.60);
    position: relative;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 1.5);
    @media (width >= 64rem) {
      --box-radius-inner: calc(var(--box-radius) * 0.65 - 1px);
      border-radius: calc(var(--box-radius) * 0.65);
      padding-inline: calc(var(--spacing) * 3);
      padding-top: calc(var(--spacing) * 3);
      padding-bottom: calc(var(--spacing) * 2.5);
    }
  }
  .box {
    --box-radius-inner: calc(var(--box-radius) * 0.95 - 1px);
    border-radius: calc(var(--box-radius) * 0.95);
    position: relative;
    padding-top: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
    padding-left: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      --box-radius-inner: calc(var(--box-radius) - 1px);
      border-radius: var(--box-radius);
      padding-top: calc(var(--spacing) * 5);
      padding-right: calc(var(--spacing) * 6);
      padding-bottom: calc(var(--spacing) * 5);
      padding-left: calc(var(--spacing) * 6);
    }
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .-top-50 {
    top: calc(var(--spacing) * -50);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-5 {
    top: calc(var(--spacing) * 5);
  }
  .top-10 {
    top: calc(var(--spacing) * 10);
  }
  .top-12 {
    top: calc(var(--spacing) * 12);
  }
  .top-15 {
    top: calc(var(--spacing) * 15);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-\[52\%\] {
    right: 52%;
  }
  .right-\[64\%\] {
    right: 64%;
  }
  .-bottom-10 {
    bottom: calc(var(--spacing) * -10);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-3\/4 {
    left: calc(3/4 * 100%);
  }
  .left-\[52\%\] {
    left: 52%;
  }
  .left-\[64\%\] {
    left: 64%;
  }
  .-z-1 {
    z-index: calc(1 * -1);
  }
  .z-0 {
    z-index: 0;
  }
  .z-1 {
    z-index: 1;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-90 {
    z-index: 90;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 43rem) {
      max-width: 43rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
    @media (width >= 110rem) {
      max-width: 110rem;
    }
    @media (width >= 120rem) {
      max-width: 120rem;
    }
  }
  .container {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-max, var(--breakpoint-xl));
  }
  .container-full {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-full-max, var(--breakpoint-4xl));
  }
  .container-lg {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-lg-max, var(--breakpoint-2xl));
  }
  .container-sm {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-sm-max, var(--breakpoint-lg));
  }
  .container-xs {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-xs-max, var(--breakpoint-md));
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }
  .-mt-5 {
    margin-top: calc(var(--spacing) * -5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mt-18 {
    margin-top: calc(var(--spacing) * 18);
  }
  .mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }
  .mt-24 {
    margin-top: calc(var(--spacing) * 24);
  }
  .mt-26 {
    margin-top: calc(var(--spacing) * 26);
  }
  .mt-30 {
    margin-top: calc(var(--spacing) * 30);
  }
  .mt-40 {
    margin-top: calc(var(--spacing) * 40);
  }
  .mt-auto {
    margin-top: auto;
  }
  .-mr-0\.5 {
    margin-right: calc(var(--spacing) * -0.5);
  }
  .-mr-3 {
    margin-right: calc(var(--spacing) * -3);
  }
  .mr-0\.5 {
    margin-right: calc(var(--spacing) * 0.5);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .-mb-2 {
    margin-bottom: calc(var(--spacing) * -2);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-auto {
    margin-left: auto;
  }
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .table {
    display: table;
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-30 {
    width: calc(var(--spacing) * 30);
    height: calc(var(--spacing) * 30);
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .\!h-8 {
    height: calc(var(--spacing) * 8) !important;
  }
  .h-0 {
    height: calc(var(--spacing) * 0);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-18 {
    height: calc(var(--spacing) * 18);
  }
  .h-30 {
    height: calc(var(--spacing) * 30);
  }
  .h-90 {
    height: calc(var(--spacing) * 90);
  }
  .h-\[60px\] {
    height: 60px;
  }
  .h-\[200px\] {
    height: 200px;
  }
  .h-\[250px\] {
    height: 250px;
  }
  .h-\[300px\] {
    height: 300px;
  }
  .h-\[330px\] {
    height: 330px;
  }
  .h-\[380px\] {
    height: 380px;
  }
  .h-\[400px\] {
    height: 400px;
  }
  .h-\[440px\] {
    height: 440px;
  }
  .h-\[520px\] {
    height: 520px;
  }
  .h-\[600px\] {
    height: 600px;
  }
  .h-\[650px\] {
    height: 650px;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .h-screen {
    height: 100vh;
  }
  .min-h-160 {
    min-height: calc(var(--spacing) * 160);
  }
  .min-h-\[400px\] {
    min-height: 400px;
  }
  .min-h-\[500px\] {
    min-height: 500px;
  }
  .min-h-\[600px\] {
    min-height: 600px;
  }
  .\!w-8 {
    width: calc(var(--spacing) * 8) !important;
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-50 {
    width: calc(var(--spacing) * 50);
  }
  .w-70 {
    width: calc(var(--spacing) * 70);
  }
  .w-\[26\%\] {
    width: 26%;
  }
  .w-\[30\%\] {
    width: 30%;
  }
  .w-\[70\%\] {
    width: 70%;
  }
  .w-\[90\%\] {
    width: 90%;
  }
  .w-\[250px\] {
    width: 250px;
  }
  .w-\[350px\] {
    width: 350px;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .\!max-w-50 {
    max-width: calc(var(--spacing) * 50) !important;
  }
  .max-w-36 {
    max-width: calc(var(--spacing) * 36);
  }
  .max-w-1000 {
    max-width: calc(var(--spacing) * 1000);
  }
  .max-w-\[500px\] {
    max-width: 500px;
  }
  .max-w-\[550px\] {
    max-width: 550px;
  }
  .max-w-\[620px\] {
    max-width: 620px;
  }
  .max-w-\[630px\] {
    max-width: 630px;
  }
  .max-w-\[700px\] {
    max-width: 700px;
  }
  .max-w-\[790px\] {
    max-width: 790px;
  }
  .max-w-\[800px\] {
    max-width: 800px;
  }
  .max-w-\[900px\] {
    max-width: 900px;
  }
  .flex-1 {
    flex: 1;
  }
  .-rotate-5 {
    rotate: calc(5deg * -1);
  }
  .-rotate-14 {
    rotate: calc(14deg * -1);
  }
  .rotate-5 {
    rotate: 5deg;
  }
  .rotate-14 {
    rotate: 14deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .resize {
    resize: both;
  }
  .snap-center {
    scroll-snap-align: center;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-12 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-14 {
    column-gap: calc(var(--spacing) * 14);
  }
  .gap-x-15 {
    column-gap: calc(var(--spacing) * 15);
  }
  .space-x-1\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .self-center {
    align-self: center;
  }
  .self-end {
    align-self: flex-end;
  }
  .self-start {
    align-self: flex-start;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .\!overflow-y-visible {
    overflow-y: visible !important;
  }
  .\!rounded-lg {
    border-radius: var(--radius-lg) !important;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .btn-black-outline {
    color: var(--color-black);
    background-color: transparent;
    border-color: var(--color-black);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-shadow-color: #000000;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent);
    }
    &:hover {
      color: var(--color-white);
      background-color: var(--color-black);
    }
  }
  .btn-brand-outline {
    color: var(--color-brand-600);
    background-color: transparent;
    border-color: var(--color-brand-600);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-shadow-color: color-mix(in srgb, #000000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-brand-600) 70%, transparent) var(--tw-shadow-alpha), transparent);
    }
    &:hover {
      color: var(--color-white);
      background-color: var(--color-brand-600);
    }
  }
  .btn-dark-outline {
    color: var(--color-dark);
    background-color: transparent;
    border-color: var(--color-dark);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-shadow-color: #15101a;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-dark) var(--tw-shadow-alpha), transparent);
    }
    &:hover {
      color: var(--color-light);
      background-color: var(--color-dark);
    }
  }
  .btn-light-outline {
    color: var(--color-light);
    background-color: transparent;
    border-color: var(--color-light);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-shadow-color: #FCF3F3;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-light) var(--tw-shadow-alpha), transparent);
    }
    &:hover {
      color: var(--color-brand-600);
      background-color: var(--color-light);
    }
  }
  .btn-white-outline {
    color: var(--color-white);
    background-color: transparent;
    border-color: var(--color-white);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-shadow-color: #ffffff;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-white) var(--tw-shadow-alpha), transparent);
    }
    &:hover {
      color: var(--color-dark);
      background-color: var(--color-white);
    }
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-1 {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .label-green {
    color: var(--label-green-text, color-mix(in srgb, oklch(0.723 0.219 149.579) 92%, black));
    @supports (color: color-mix(in lab, red, red)) {
      color: var(--label-green-text, color-mix(in oklab, var(--color-green-500) 92%, black));
    }
    background-color: var(--label-green-bg, color-mix(in srgb, oklch(0.723 0.219 149.579) 14%, white));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--label-green-bg, color-mix(in oklab, var(--color-green-500) 14%, white));
    }
    border-color: var(--label-green-border, color-mix(in srgb, oklch(0.723 0.219 149.579) 14%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--label-green-border, color-mix(in oklab, var(--color-green-500) 14%, white));
    }
    border-color: var(--label-green-border, color-mix(in srgb, oklch(0.723 0.219 149.579) 55%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--label-green-border, color-mix(in oklab, var(--color-green-500) 55%, white));
    }
    --tw-shadow-color: color-mix(in srgb, oklch(0.627 0.194 149.214) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-600) 70%, transparent) var(--tw-shadow-alpha), transparent);
    }
    --tw-backdrop-opacity: opacity(95%);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    &:where(.dark, .dark *) {
      color: color-mix(in srgb, oklch(0.723 0.219 149.579) 60%, white);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-green-500) 60%, white);
      }
      background-color: currentColor;
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, currentColor 25%, var(--color-dark));
      }
      border-color: currentColor;
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, currentColor 40%, var(--color-dark));
      }
    }
  }
  .label-indigo {
    color: var(--label-indigo-text, color-mix(in srgb, oklch(0.585 0.233 277.117) 92%, black));
    @supports (color: color-mix(in lab, red, red)) {
      color: var(--label-indigo-text, color-mix(in oklab, var(--color-indigo-500) 92%, black));
    }
    background-color: var(--label-indigo-bg, color-mix(in srgb, oklch(0.585 0.233 277.117) 14%, white));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--label-indigo-bg, color-mix(in oklab, var(--color-indigo-500) 14%, white));
    }
    border-color: var(--label-indigo-border, color-mix(in srgb, oklch(0.585 0.233 277.117) 14%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--label-indigo-border, color-mix(in oklab, var(--color-indigo-500) 14%, white));
    }
    border-color: var(--label-indigo-border, color-mix(in srgb, oklch(0.585 0.233 277.117) 55%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--label-indigo-border, color-mix(in oklab, var(--color-indigo-500) 55%, white));
    }
    --tw-shadow-color: color-mix(in srgb, oklch(0.511 0.262 276.966) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-600) 70%, transparent) var(--tw-shadow-alpha), transparent);
    }
    --tw-backdrop-opacity: opacity(95%);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    &:where(.dark, .dark *) {
      color: color-mix(in srgb, oklch(0.585 0.233 277.117) 60%, white);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-indigo-500) 60%, white);
      }
      background-color: currentColor;
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, currentColor 25%, var(--color-dark));
      }
      border-color: currentColor;
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, currentColor 40%, var(--color-dark));
      }
    }
  }
  .label-orange {
    color: var(--label-orange-text, color-mix(in srgb, oklch(0.705 0.213 47.604) 92%, black));
    @supports (color: color-mix(in lab, red, red)) {
      color: var(--label-orange-text, color-mix(in oklab, var(--color-orange-500) 92%, black));
    }
    background-color: var(--label-orange-bg, color-mix(in srgb, oklch(0.705 0.213 47.604) 14%, white));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--label-orange-bg, color-mix(in oklab, var(--color-orange-500) 14%, white));
    }
    border-color: var(--label-orange-border, color-mix(in srgb, oklch(0.705 0.213 47.604) 14%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--label-orange-border, color-mix(in oklab, var(--color-orange-500) 14%, white));
    }
    border-color: var(--label-orange-border, color-mix(in srgb, oklch(0.705 0.213 47.604) 55%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--label-orange-border, color-mix(in oklab, var(--color-orange-500) 55%, white));
    }
    --tw-shadow-color: color-mix(in srgb, oklch(0.646 0.222 41.116) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-600) 70%, transparent) var(--tw-shadow-alpha), transparent);
    }
    --tw-backdrop-opacity: opacity(95%);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    &:where(.dark, .dark *) {
      color: color-mix(in srgb, oklch(0.705 0.213 47.604) 60%, white);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-orange-500) 60%, white);
      }
      background-color: currentColor;
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, currentColor 25%, var(--color-dark));
      }
      border-color: currentColor;
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, currentColor 40%, var(--color-dark));
      }
    }
  }
  .label-red {
    color: var(--label-red-text, color-mix(in srgb, oklch(0.637 0.237 25.331) 92%, black));
    @supports (color: color-mix(in lab, red, red)) {
      color: var(--label-red-text, color-mix(in oklab, var(--color-red-500) 92%, black));
    }
    background-color: var(--label-red-bg, color-mix(in srgb, oklch(0.637 0.237 25.331) 14%, white));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--label-red-bg, color-mix(in oklab, var(--color-red-500) 14%, white));
    }
    border-color: var(--label-red-border, color-mix(in srgb, oklch(0.637 0.237 25.331) 14%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--label-red-border, color-mix(in oklab, var(--color-red-500) 14%, white));
    }
    border-color: var(--label-red-border, color-mix(in srgb, oklch(0.637 0.237 25.331) 55%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--label-red-border, color-mix(in oklab, var(--color-red-500) 55%, white));
    }
    --tw-shadow-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-600) 70%, transparent) var(--tw-shadow-alpha), transparent);
    }
    --tw-backdrop-opacity: opacity(95%);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    &:where(.dark, .dark *) {
      color: color-mix(in srgb, oklch(0.637 0.237 25.331) 60%, white);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-red-500) 60%, white);
      }
      background-color: currentColor;
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, currentColor 25%, var(--color-dark));
      }
      border-color: currentColor;
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, currentColor 40%, var(--color-dark));
      }
    }
  }
  .label-yellow {
    color: var(--label-yellow-text, color-mix(in srgb, oklch(0.795 0.184 86.047) 92%, black));
    @supports (color: color-mix(in lab, red, red)) {
      color: var(--label-yellow-text, color-mix(in oklab, var(--color-yellow-500) 92%, black));
    }
    background-color: var(--label-yellow-bg, color-mix(in srgb, oklch(0.795 0.184 86.047) 14%, white));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--label-yellow-bg, color-mix(in oklab, var(--color-yellow-500) 14%, white));
    }
    border-color: var(--label-yellow-border, color-mix(in srgb, oklch(0.795 0.184 86.047) 14%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--label-yellow-border, color-mix(in oklab, var(--color-yellow-500) 14%, white));
    }
    border-color: var(--label-yellow-border, color-mix(in srgb, oklch(0.795 0.184 86.047) 55%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--label-yellow-border, color-mix(in oklab, var(--color-yellow-500) 55%, white));
    }
    --tw-shadow-color: color-mix(in srgb, oklch(0.795 0.184 86.047) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yellow-500) 70%, transparent) var(--tw-shadow-alpha), transparent);
    }
    --tw-backdrop-opacity: opacity(95%);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    &:where(.dark, .dark *) {
      color: color-mix(in srgb, oklch(0.795 0.184 86.047) 60%, white);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-yellow-500) 60%, white);
      }
      background-color: currentColor;
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, currentColor 25%, var(--color-dark));
      }
      border-color: currentColor;
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, currentColor 40%, var(--color-dark));
      }
    }
  }
  .btn-brand {
    background-color: var(--color-brand-500);
    --tw-shadow-color: color-mix(in srgb, #000000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-brand-600) 70%, transparent) var(--tw-shadow-alpha), transparent);
    }
    color: var(--btn-brand-text, var(--color-white));
    border-color: var(--btn-brand-border, color-mix(in srgb, #111111 0%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--btn-brand-border, color-mix(in oklab, var(--color-brand-500) var(--btn-border-mix-percentage, 100%), var(--btn-border-mix, transparent)));
    }
    &:where(.dark, .dark *) {
      border-color: var(--btn-brand-border, color-mix(in srgb, #111111 60%, transparent));
      @supports (color: color-mix(in lab, red, red)) {
        border-color: var(--btn-brand-border, color-mix(in oklab, var(--color-brand-500) 60%, transparent));
      }
    }
    &:hover {
      background-color: color-mix(in srgb, #111111 95%, white);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-brand-500) 95%, var(--btn-border-mix, black));
      }
    }
  }
  .btn-dark {
    background-color: var(--color-dark);
    --tw-shadow-color: #15101a;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-dark) var(--tw-shadow-alpha), transparent);
    }
    color: var(--btn-dark-text, var(--color-light));
    border-color: var(--btn-dark-border, color-mix(in srgb, #15101a 0%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--btn-dark-border, color-mix(in oklab, var(--color-dark) var(--btn-border-mix-percentage, 100%), var(--btn-border-mix, transparent)));
    }
    &:where(.dark, .dark *) {
      border-color: var(--btn-dark-border, color-mix(in srgb, #15101a 60%, transparent));
      @supports (color: color-mix(in lab, red, red)) {
        border-color: var(--btn-dark-border, color-mix(in oklab, var(--color-dark) 60%, transparent));
      }
    }
    &:hover {
      background-color: var(--color-black);
    }
  }
  .btn-indigo {
    background-color: var(--color-indigo-500);
    --tw-shadow-color: color-mix(in srgb, oklch(0.511 0.262 276.966) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-600) 70%, transparent) var(--tw-shadow-alpha), transparent);
    }
    color: var(--btn-indigo-text, var(--color-white));
    border-color: var(--btn-indigo-border, color-mix(in srgb, oklch(0.585 0.233 277.117) 0%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--btn-indigo-border, color-mix(in oklab, var(--color-indigo-500) var(--btn-border-mix-percentage, 100%), var(--btn-border-mix, transparent)));
    }
    &:where(.dark, .dark *) {
      border-color: var(--btn-indigo-border, color-mix(in srgb, oklch(0.585 0.233 277.117) 60%, transparent));
      @supports (color: color-mix(in lab, red, red)) {
        border-color: var(--btn-indigo-border, color-mix(in oklab, var(--color-indigo-500) 60%, transparent));
      }
    }
    &:hover {
      background-color: var(--color-indigo-600);
    }
  }
  .btn-light {
    background-color: var(--color-light);
    --tw-shadow-color: #FCF3F3;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-light) var(--tw-shadow-alpha), transparent);
    }
    color: var(--btn-light-text, var(--color-brand-600));
    border-color: var(--btn-light-border, color-mix(in srgb, #FCF3F3 0%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--btn-light-border, color-mix(in oklab, var(--color-light) var(--btn-border-mix-percentage, 100%), var(--btn-border-mix, transparent)));
    }
    &:where(.dark, .dark *) {
      border-color: var(--btn-light-border, color-mix(in srgb, #FCF3F3 60%, transparent));
      @supports (color: color-mix(in lab, red, red)) {
        border-color: var(--btn-light-border, color-mix(in oklab, var(--color-light) 60%, transparent));
      }
    }
    &:hover {
      background-color: var(--color-light/80);
    }
  }
  .btn-orange {
    background-color: var(--color-orange-500);
    --tw-shadow-color: color-mix(in srgb, oklch(0.646 0.222 41.116) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-600) 70%, transparent) var(--tw-shadow-alpha), transparent);
    }
    color: var(--btn-orange-text, var(--color-white));
    border-color: var(--btn-orange-border, color-mix(in srgb, oklch(0.705 0.213 47.604) 0%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--btn-orange-border, color-mix(in oklab, var(--color-orange-500) var(--btn-border-mix-percentage, 100%), var(--btn-border-mix, transparent)));
    }
    &:where(.dark, .dark *) {
      border-color: var(--btn-orange-border, color-mix(in srgb, oklch(0.705 0.213 47.604) 60%, transparent));
      @supports (color: color-mix(in lab, red, red)) {
        border-color: var(--btn-orange-border, color-mix(in oklab, var(--color-orange-500) 60%, transparent));
      }
    }
    &:hover {
      background-color: var(--color-orange-600);
    }
  }
  .btn-white {
    background-color: var(--color-white);
    --tw-shadow-color: #ffffff;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-white) var(--tw-shadow-alpha), transparent);
    }
    color: var(--btn-white-text, var(--color-dark));
    border-color: var(--btn-white-border, color-mix(in srgb, #ffffff 0%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--btn-white-border, color-mix(in oklab, var(--color-white) var(--btn-border-mix-percentage, 100%), var(--btn-border-mix, transparent)));
    }
    &:where(.dark, .dark *) {
      border-color: var(--btn-white-border, color-mix(in srgb, #ffffff 60%, transparent));
      @supports (color: color-mix(in lab, red, red)) {
        border-color: var(--btn-white-border, color-mix(in oklab, var(--color-white) 60%, transparent));
      }
    }
    &:hover {
      background-color: color-mix(in srgb, #ffffff 95%, white);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 95%, var(--btn-border-mix, black));
      }
    }
  }
  .border-black {
    border-color: var(--color-black);
  }
  .border-dark {
    border-color: var(--color-dark);
  }
  .border-dark\/30 {
    border-color: color-mix(in srgb, #15101a 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-dark) 30%, transparent);
    }
  }
  .border-gray-500 {
    border-color: var(--color-gray-500);
  }
  .\!bg-transparent {
    background-color: transparent !important;
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-brand {
    background-color: var(--color-brand);
  }
  .bg-brand-700 {
    background-color: var(--color-brand-700);
  }
  .bg-brand\/10 {
    background-color: color-mix(in srgb, #111111 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-brand) 10%, transparent);
    }
  }
  .bg-brand\/40 {
    background-color: color-mix(in srgb, #111111 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-brand) 40%, transparent);
    }
  }
  .bg-brand\/50 {
    background-color: color-mix(in srgb, #111111 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-brand) 50%, transparent);
    }
  }
  .bg-brand\/70 {
    background-color: color-mix(in srgb, #111111 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-brand) 70%, transparent);
    }
  }
  .bg-dark {
    background-color: var(--color-dark);
  }
  .bg-dark\/60 {
    background-color: color-mix(in srgb, #15101a 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-dark) 60%, transparent);
    }
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-500 {
    background-color: var(--color-gray-500);
  }
  .bg-light {
    background-color: var(--color-light);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-stone-600 {
    background-color: var(--color-stone-600);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/80 {
    background-color: color-mix(in srgb, #ffffff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .bg-white\/90 {
    background-color: color-mix(in srgb, #ffffff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .bg-linear-to-b {
    --tw-gradient-position: to bottom;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-conic {
    --tw-gradient-position: in oklab;
    background-image: conic-gradient(var(--tw-gradient-stops));
  }
  .from-brand\/0 {
    --tw-gradient-from: color-mix(in srgb, #111111 0%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-brand) 0%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-dark\/10 {
    --tw-gradient-from: color-mix(in srgb, #15101a 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-dark) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-dark\/20 {
    --tw-gradient-from: color-mix(in srgb, #15101a 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-dark) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-sky-500 {
    --tw-gradient-from: var(--color-sky-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-stone-800\/80 {
    --tw-gradient-from: color-mix(in srgb, oklch(0.268 0.007 34.298) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-stone-800) 80%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-20\% {
    --tw-gradient-from-position: 20%;
  }
  .from-25\% {
    --tw-gradient-from-position: 25%;
  }
  .via-orange-400 {
    --tw-gradient-via: var(--color-orange-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-brand {
    --tw-gradient-to: var(--color-brand);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-brand\/80 {
    --tw-gradient-to: color-mix(in srgb, #111111 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-brand) 80%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-dark\/90 {
    --tw-gradient-to: color-mix(in srgb, #15101a 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-dark) 90%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-stone-400 {
    --tw-gradient-to: var(--color-stone-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-stone-500 {
    --tw-gradient-to: var(--color-stone-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-stone-700 {
    --tw-gradient-to: var(--color-stone-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-70\% {
    --tw-gradient-to-position: 70%;
  }
  .to-80\% {
    --tw-gradient-to-position: 80%;
  }
  .bg-cover {
    background-size: cover;
  }
  .bg-center {
    background-position: center;
  }
  .bg-top {
    background-position: top;
  }
  .text-dark-all {
    fill: var(--color-dark);
    color: var(--color-dark);
    h1, h2, h3, h4, h5, h6, ul, ol {
      fill: var(--color-dark);
      color: var(--color-dark);
    }
    p, small, li {
      fill: color-mix(in srgb, #15101a 95%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        fill: color-mix(in oklab, var(--color-dark) 95%, transparent);
      }
      color: color-mix(in srgb, #15101a 95%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-dark) 95%, transparent);
      }
    }
    a:not([class*="btn-"]) {
      fill: var(--color-dark);
      color: var(--color-dark);
    }
  }
  .text-light-all {
    fill: var(--color-light);
    color: var(--color-light);
    h1, h2, h3, h4, h5, h6, ul, ol {
      fill: var(--color-light);
      color: var(--color-light);
    }
    p, small, li {
      fill: color-mix(in srgb, #FCF3F3 95%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        fill: color-mix(in oklab, var(--color-light) 95%, transparent);
      }
      color: color-mix(in srgb, #FCF3F3 95%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-light) 95%, transparent);
      }
    }
    a:not([class*="btn-"]) {
      fill: var(--color-light);
      color: var(--color-light);
    }
  }
  .text-white-all {
    fill: var(--color-white);
    color: var(--color-white);
    h1, h2, h3, h4, h5, h6, ul, ol {
      fill: var(--color-white);
      color: var(--color-white);
    }
    p, small, li {
      fill: color-mix(in srgb, #ffffff 95%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        fill: color-mix(in oklab, var(--color-white) 95%, transparent);
      }
      color: color-mix(in srgb, #ffffff 95%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-white) 95%, transparent);
      }
    }
    a:not([class*="btn-"]) {
      fill: var(--color-white);
      color: var(--color-white);
    }
  }
  .stroke-brand {
    stroke: var(--color-brand);
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-center {
    object-position: center;
  }
  .\!p-0 {
    padding: calc(var(--spacing) * 0) !important;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .\!px-0 {
    padding-inline: calc(var(--spacing) * 0) !important;
  }
  .\!px-2 {
    padding-inline: calc(var(--spacing) * 2) !important;
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .\!pb-px {
    padding-bottom: 1px !important;
  }
  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-14 {
    padding-bottom: calc(var(--spacing) * 14);
  }
  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }
  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .\!text-2xl {
    font-size: var(--text-2xl) !important;
    line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;
  }
  .\!text-lg {
    font-size: var(--text-lg) !important;
    line-height: var(--tw-leading, var(--text-lg--line-height)) !important;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-lg\/7 {
    font-size: var(--text-lg);
    line-height: calc(var(--spacing) * 7);
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-10 {
    --tw-leading: calc(var(--spacing) * 10);
    line-height: calc(var(--spacing) * 10);
  }
  .leading-loose {
    --tw-leading: var(--leading-loose);
    line-height: var(--leading-loose);
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .\!text-dark {
    color: var(--color-dark) !important;
  }
  .\!text-light {
    color: var(--color-light) !important;
  }
  .text-brand {
    color: var(--color-brand);
  }
  .text-brand-300 {
    color: var(--color-brand-300);
  }
  .text-brand-400 {
    color: var(--color-brand-400);
  }
  .text-dark {
    color: var(--color-dark);
  }
  .text-dark-light {
    color: var(--color-dark-light);
  }
  .text-dark\/90 {
    color: color-mix(in srgb, #15101a 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-dark) 90%, transparent);
    }
  }
  .text-gray-100 {
    color: var(--color-gray-100);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-light {
    color: var(--color-light);
  }
  .text-orange-500 {
    color: var(--color-orange-500);
  }
  .text-stone-100 {
    color: var(--color-stone-100);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/80 {
    color: color-mix(in srgb, #ffffff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .\!opacity-0 {
    opacity: 0% !important;
  }
  .\!opacity-20 {
    opacity: 20% !important;
  }
  .\!opacity-30 {
    opacity: 30% !important;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-20 {
    opacity: 20%;
  }
  .opacity-25 {
    opacity: 25%;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .mix-blend-color-burn {
    mix-blend-mode: color-burn;
  }
  .mix-blend-color-dodge {
    mix-blend-mode: color-dodge;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-c {
    box-shadow: 0px 0px 58px -15px var(--tw-shadow-color);
    transition: box-shadow 0.8s ease-in-out;
  }
  .shadow-brand {
    --tw-shadow-color: #111111;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-brand) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-brand\/20 {
    --tw-shadow-color: color-mix(in srgb, #111111 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-brand) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-brand\/50 {
    --tw-shadow-color: color-mix(in srgb, #111111 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-brand) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-stone-500 {
    --tw-shadow-color: oklch(0.553 0.013 58.071);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-stone-500) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-transparent {
    --tw-shadow-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent);
    }
  }
  .\!outline-0 {
    outline-style: var(--tw-outline-style) !important;
    outline-width: 0px !important;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-sm {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-3xl {
    --tw-backdrop-blur: blur(var(--blur-3xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-600 {
    --tw-duration: 600ms;
    transition-duration: 600ms;
  }
  .duration-800 {
    --tw-duration: 800ms;
    transition-duration: 800ms;
  }
  .duration-1000 {
    --tw-duration: 1000ms;
    transition-duration: 1000ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .fade-edges {
    mask: linear-gradient(to right, transparent, black var(--fade-width, 12%), black calc(100% - var(--fade-width, 12%)), transparent);
    @media (width >= 64rem) {
      mask: linear-gradient(to right, transparent, black var(--fade-width-lg, 15%), black calc(100% - var(--fade-width-lg, 15%)), transparent);
    }
  }
  .group-hover\:text-light {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-light);
      }
    }
  }
  .group-hover\:text-light\/80 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: color-mix(in srgb, #FCF3F3 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-light) 80%, transparent);
        }
      }
    }
  }
  .group-hover\:text-white {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .group-hover\:opacity-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 0%;
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover-touch\:scale-110 {
    &:is(:where(.group):hover *) {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .group-hover-touch\:\!text-white {
    &:is(:where(.group):hover *) {
      color: var(--color-white) !important;
    }
  }
  .group-hover-touch\:opacity-0 {
    &:is(:where(.group):hover *) {
      opacity: 0%;
    }
  }
  .group-hover-touch\:opacity-80 {
    &:is(:where(.group):hover *) {
      opacity: 80%;
    }
  }
  .last\:border-b-0 {
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .hover\:\!bg-brand {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-brand) !important;
      }
    }
  }
  .hover\:bg-brand {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-brand);
      }
    }
  }
  .hover\:bg-light {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-light);
      }
    }
  }
  .hover\:bg-none {
    &:hover {
      @media (hover: hover) {
        background-image: none;
      }
    }
  }
  .hover\:text-white-all {
    &:hover {
      @media (hover: hover) {
        fill: var(--color-white);
        color: var(--color-white);
        h1, h2, h3, h4, h5, h6, ul, ol {
          fill: var(--color-white);
          color: var(--color-white);
        }
        p, small, li {
          fill: color-mix(in srgb, #ffffff 95%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            fill: color-mix(in oklab, var(--color-white) 95%, transparent);
          }
          color: color-mix(in srgb, #ffffff 95%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-white) 95%, transparent);
          }
        }
        a:not([class*="btn-"]) {
          fill: var(--color-white);
          color: var(--color-white);
        }
      }
    }
  }
  .hover\:text-dark {
    &:hover {
      @media (hover: hover) {
        color: var(--color-dark);
      }
    }
  }
  .hover\:opacity-90 {
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .focus\:bg-transparent {
    &:focus {
      background-color: transparent;
    }
  }
  .max-lg\:mt-6 {
    @media (width < 64rem) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .md\:top-0 {
    @media (width >= 43rem) {
      top: calc(var(--spacing) * 0);
    }
  }
  .md\:right-auto {
    @media (width >= 43rem) {
      right: auto;
    }
  }
  .md\:left-\[270px\] {
    @media (width >= 43rem) {
      left: 270px;
    }
  }
  .md\:col-span-2 {
    @media (width >= 43rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:col-span-3 {
    @media (width >= 43rem) {
      grid-column: span 3 / span 3;
    }
  }
  .md\:col-span-4 {
    @media (width >= 43rem) {
      grid-column: span 4 / span 4;
    }
  }
  .md\:col-span-5 {
    @media (width >= 43rem) {
      grid-column: span 5 / span 5;
    }
  }
  .md\:col-span-6 {
    @media (width >= 43rem) {
      grid-column: span 6 / span 6;
    }
  }
  .md\:col-span-7 {
    @media (width >= 43rem) {
      grid-column: span 7 / span 7;
    }
  }
  .md\:col-span-8 {
    @media (width >= 43rem) {
      grid-column: span 8 / span 8;
    }
  }
  .md\:col-span-10 {
    @media (width >= 43rem) {
      grid-column: span 10 / span 10;
    }
  }
  .md\:col-span-11 {
    @media (width >= 43rem) {
      grid-column: span 11 / span 11;
    }
  }
  .md\:my-5 {
    @media (width >= 43rem) {
      margin-block: calc(var(--spacing) * 5);
    }
  }
  .md\:-mt-10 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * -10);
    }
  }
  .md\:-mt-30 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * -30);
    }
  }
  .md\:-mt-70 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * -70);
    }
  }
  .md\:mt-0 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .md\:mt-4 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 4);
    }
  }
  .md\:mt-5 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 5);
    }
  }
  .md\:mt-6 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .md\:mt-10 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 10);
    }
  }
  .md\:mt-12 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 12);
    }
  }
  .md\:mt-14 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 14);
    }
  }
  .md\:mt-15 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 15);
    }
  }
  .md\:mt-16 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  .md\:mt-24 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 24);
    }
  }
  .md\:mt-28 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 28);
    }
  }
  .md\:mt-30 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 30);
    }
  }
  .md\:mt-40 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 40);
    }
  }
  .md\:mt-50 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 50);
    }
  }
  .md\:mt-60 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 60);
    }
  }
  .md\:mt-70 {
    @media (width >= 43rem) {
      margin-top: calc(var(--spacing) * 70);
    }
  }
  .md\:mb-8 {
    @media (width >= 43rem) {
      margin-bottom: calc(var(--spacing) * 8);
    }
  }
  .md\:ml-6 {
    @media (width >= 43rem) {
      margin-left: calc(var(--spacing) * 6);
    }
  }
  .md\:block {
    @media (width >= 43rem) {
      display: block;
    }
  }
  .md\:size-5 {
    @media (width >= 43rem) {
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
    }
  }
  .md\:size-8 {
    @media (width >= 43rem) {
      width: calc(var(--spacing) * 8);
      height: calc(var(--spacing) * 8);
    }
  }
  .md\:h-16 {
    @media (width >= 43rem) {
      height: calc(var(--spacing) * 16);
    }
  }
  .md\:h-\[330px\] {
    @media (width >= 43rem) {
      height: 330px;
    }
  }
  .md\:h-\[350px\] {
    @media (width >= 43rem) {
      height: 350px;
    }
  }
  .md\:h-\[360px\] {
    @media (width >= 43rem) {
      height: 360px;
    }
  }
  .md\:h-\[380px\] {
    @media (width >= 43rem) {
      height: 380px;
    }
  }
  .md\:h-\[400px\] {
    @media (width >= 43rem) {
      height: 400px;
    }
  }
  .md\:h-\[430px\] {
    @media (width >= 43rem) {
      height: 430px;
    }
  }
  .md\:h-\[480px\] {
    @media (width >= 43rem) {
      height: 480px;
    }
  }
  .md\:h-\[490px\] {
    @media (width >= 43rem) {
      height: 490px;
    }
  }
  .md\:h-\[500px\] {
    @media (width >= 43rem) {
      height: 500px;
    }
  }
  .md\:h-\[550px\] {
    @media (width >= 43rem) {
      height: 550px;
    }
  }
  .md\:h-\[600px\] {
    @media (width >= 43rem) {
      height: 600px;
    }
  }
  .md\:h-\[700px\] {
    @media (width >= 43rem) {
      height: 700px;
    }
  }
  .md\:min-h-\[380px\] {
    @media (width >= 43rem) {
      min-height: 380px;
    }
  }
  .md\:w-2\/3 {
    @media (width >= 43rem) {
      width: calc(2/3 * 100%);
    }
  }
  .md\:w-60 {
    @media (width >= 43rem) {
      width: calc(var(--spacing) * 60);
    }
  }
  .md\:w-\[350px\] {
    @media (width >= 43rem) {
      width: 350px;
    }
  }
  .md\:w-\[400px\] {
    @media (width >= 43rem) {
      width: 400px;
    }
  }
  .md\:max-w-\[60\%\] {
    @media (width >= 43rem) {
      max-width: 60%;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 43rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 43rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-7 {
    @media (width >= 43rem) {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-12 {
    @media (width >= 43rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-13 {
    @media (width >= 43rem) {
      grid-template-columns: repeat(13, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-14 {
    @media (width >= 43rem) {
      grid-template-columns: repeat(14, minmax(0, 1fr));
    }
  }
  .md\:flex-col {
    @media (width >= 43rem) {
      flex-direction: column;
    }
  }
  .md\:items-center {
    @media (width >= 43rem) {
      align-items: center;
    }
  }
  .md\:gap-1 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 1);
    }
  }
  .md\:gap-3 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .md\:gap-4 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-5 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .md\:gap-6 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .md\:gap-8 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .md\:gap-10 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .md\:gap-15 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 15);
    }
  }
  .md\:gap-18 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 18);
    }
  }
  .md\:gap-20 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .md\:gap-25 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 25);
    }
  }
  .md\:gap-30 {
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 30);
    }
  }
  .md\:bg-indigo-500 {
    @media (width >= 43rem) {
      background-color: var(--color-indigo-500);
    }
  }
  .md\:from-45\% {
    @media (width >= 43rem) {
      --tw-gradient-from-position: 45%;
    }
  }
  .md\:p-0 {
    @media (width >= 43rem) {
      padding: calc(var(--spacing) * 0);
    }
  }
  .md\:p-1 {
    @media (width >= 43rem) {
      padding: calc(var(--spacing) * 1);
    }
  }
  .md\:p-3 {
    @media (width >= 43rem) {
      padding: calc(var(--spacing) * 3);
    }
  }
  .md\:p-4 {
    @media (width >= 43rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .md\:p-6 {
    @media (width >= 43rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:p-10 {
    @media (width >= 43rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .md\:p-16 {
    @media (width >= 43rem) {
      padding: calc(var(--spacing) * 16);
    }
  }
  .md\:p-20 {
    @media (width >= 43rem) {
      padding: calc(var(--spacing) * 20);
    }
  }
  .md\:p-25 {
    @media (width >= 43rem) {
      padding: calc(var(--spacing) * 25);
    }
  }
  .md\:p-30 {
    @media (width >= 43rem) {
      padding: calc(var(--spacing) * 30);
    }
  }
  .md\:px-0 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .md\:px-1 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 1);
    }
  }
  .md\:px-2 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .md\:px-3 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .md\:px-4 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .md\:px-5 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .md\:px-6 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:px-10 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .md\:px-12 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .md\:px-20 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .md\:px-25 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 25);
    }
  }
  .md\:px-30 {
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 30);
    }
  }
  .md\:py-2\.5 {
    @media (width >= 43rem) {
      padding-block: calc(var(--spacing) * 2.5);
    }
  }
  .md\:py-8 {
    @media (width >= 43rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .md\:py-10 {
    @media (width >= 43rem) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .md\:py-12 {
    @media (width >= 43rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .md\:py-14 {
    @media (width >= 43rem) {
      padding-block: calc(var(--spacing) * 14);
    }
  }
  .md\:py-15 {
    @media (width >= 43rem) {
      padding-block: calc(var(--spacing) * 15);
    }
  }
  .md\:py-20 {
    @media (width >= 43rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .md\:pt-0 {
    @media (width >= 43rem) {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .md\:pt-4 {
    @media (width >= 43rem) {
      padding-top: calc(var(--spacing) * 4);
    }
  }
  .md\:pt-15 {
    @media (width >= 43rem) {
      padding-top: calc(var(--spacing) * 15);
    }
  }
  .md\:pt-26 {
    @media (width >= 43rem) {
      padding-top: calc(var(--spacing) * 26);
    }
  }
  .md\:pt-30 {
    @media (width >= 43rem) {
      padding-top: calc(var(--spacing) * 30);
    }
  }
  .md\:pr-10 {
    @media (width >= 43rem) {
      padding-right: calc(var(--spacing) * 10);
    }
  }
  .md\:text-display-sm {
    @media (width >= 43rem) {
      font-size: clamp(5.2rem, calc(90.244660194175px + 1.0485436893204vw), 5.8rem);
      padding-bottom: 1.6rem;
      line-height: 0.8;
      @media (max-width: 64rem) {
        padding-bottom: calc(var(--spacing) * 4.2);
      }
    }
  }
  .md\:pb-0 {
    @media (width >= 43rem) {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .md\:pb-6 {
    @media (width >= 43rem) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .md\:pb-7 {
    @media (width >= 43rem) {
      padding-bottom: calc(var(--spacing) * 7);
    }
  }
  .md\:pb-20 {
    @media (width >= 43rem) {
      padding-bottom: calc(var(--spacing) * 20);
    }
  }
  .md\:text-left {
    @media (width >= 43rem) {
      text-align: left;
    }
  }
  .md\:text-5xl {
    @media (width >= 43rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .md\:text-base {
    @media (width >= 43rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .md\:text-lg {
    @media (width >= 43rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .md\:text-xl {
    @media (width >= 43rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .lg\:-bottom-1\/2 {
    @media (width >= 64rem) {
      bottom: calc(calc(1/2 * 100%) * -1);
    }
  }
  .lg\:order-1 {
    @media (width >= 64rem) {
      order: 1;
    }
  }
  .lg\:order-2 {
    @media (width >= 64rem) {
      order: 2;
    }
  }
  .lg\:col-span-5 {
    @media (width >= 64rem) {
      grid-column: span 5 / span 5;
    }
  }
  .lg\:col-span-7 {
    @media (width >= 64rem) {
      grid-column: span 7 / span 7;
    }
  }
  .lg\:-mt-20 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * -20);
    }
  }
  .lg\:-mt-30 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * -30);
    }
  }
  .lg\:mt-0 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .lg\:mt-8 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 8);
    }
  }
  .lg\:mt-15 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 15);
    }
  }
  .lg\:mt-24 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 24);
    }
  }
  .lg\:size-90 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 90);
      height: calc(var(--spacing) * 90);
    }
  }
  .lg\:size-100 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 100);
      height: calc(var(--spacing) * 100);
    }
  }
  .lg\:size-120 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 120);
      height: calc(var(--spacing) * 120);
    }
  }
  .lg\:size-150 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 150);
      height: calc(var(--spacing) * 150);
    }
  }
  .lg\:h-\[100px\] {
    @media (width >= 64rem) {
      height: 100px;
    }
  }
  .lg\:h-\[430px\] {
    @media (width >= 64rem) {
      height: 430px;
    }
  }
  .lg\:h-\[480px\] {
    @media (width >= 64rem) {
      height: 480px;
    }
  }
  .lg\:h-\[730px\] {
    @media (width >= 64rem) {
      height: 730px;
    }
  }
  .lg\:min-h-\[600px\] {
    @media (width >= 64rem) {
      min-height: 600px;
    }
  }
  .lg\:w-1\/3 {
    @media (width >= 64rem) {
      width: calc(1/3 * 100%);
    }
  }
  .lg\:w-2\/3 {
    @media (width >= 64rem) {
      width: calc(2/3 * 100%);
    }
  }
  .lg\:w-5\/12 {
    @media (width >= 64rem) {
      width: calc(5/12 * 100%);
    }
  }
  .lg\:w-6\/12 {
    @media (width >= 64rem) {
      width: calc(6/12 * 100%);
    }
  }
  .lg\:w-12\/12 {
    @media (width >= 64rem) {
      width: calc(12/12 * 100%);
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-12 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .lg\:gap-5 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .lg\:gap-8 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .lg\:gap-12 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .lg\:gap-24 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 24);
    }
  }
  .lg\:space-y-3 {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .lg\:overflow-visible {
    @media (width >= 64rem) {
      overflow: visible;
    }
  }
  .lg\:bg-black {
    @media (width >= 64rem) {
      background-color: var(--color-black);
    }
  }
  .lg\:p-18 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 18);
    }
  }
  .lg\:px-4 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:py-8 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .lg\:py-10 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .lg\:py-16 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .lg\:pr-8 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 8);
    }
  }
  .lg\:text-display-sm {
    @media (width >= 64rem) {
      font-size: clamp(5.2rem, calc(90.244660194175px + 1.0485436893204vw), 5.8rem);
      padding-bottom: 1.6rem;
      line-height: 0.8;
      @media (max-width: 64rem) {
        padding-bottom: calc(var(--spacing) * 4.2);
      }
    }
  }
  .lg\:pb-4 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
  .lg\:text-left {
    @media (width >= 64rem) {
      text-align: left;
    }
  }
  .lg\:leading-15 {
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 15);
      line-height: calc(var(--spacing) * 15);
    }
  }
  .lg\:leading-20 {
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 20);
      line-height: calc(var(--spacing) * 20);
    }
  }
  .xl\:size-120 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 120);
      height: calc(var(--spacing) * 120);
    }
  }
  .xl\:grid-cols-5 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .hover-touch\:bg-brand {
    &:hover {
      background-color: var(--color-brand);
    }
  }
  .hover-touch\:opacity-70 {
    &:hover {
      opacity: 70%;
    }
  }
}
@layer base {
  html {
    background-color: var(--color-bg);
    font-family: var(--font);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
  }
  body {
    color: var(--color-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .dark {
    --color-brand-light: var(--color-light);
    --color-light-dark: var(--color-dark);
    --color-light-black: var(--color-black);
    --color-dark-light: var(--color-light);
    --color-white-dark: var(--color-dark);
    --color-white-black: var(--color-black);
    --color-black-white: var(--color-white);
    background-color: var(--color-dark-bg);
    body {
      color: var(--color-light);
    }
    img, video {
      filter: brightness(0.9);
    }
  }
  a {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .row-center {
    position: relative;
    display: flex;
    align-items: center;
  }
  .flex-center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .-z-1 {
    z-index: -1;
  }
  .disabled {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    opacity: 0.5;
  }
  .\!disabled {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    opacity: 0.5;
  }
}
.body-fix {
  overflow: hidden;
}
[x-cloak], [v-cloak] {
  visibility: hidden !important;
  overflow: hidden !important;
  display: none !important;
}
.grecaptcha-badge {
  visibility: hidden !important;
}
@media (width < 43rem) {
  .sm-hidden {
    display: none !important;
  }
}
@media (width < 64rem) {
  .md-hidden {
    display: none !important;
  }
}
.scroll-x {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
    -webkit-appearance: none;
  }
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding-block: calc(var(--spacing) * 0.5);
  white-space: nowrap;
  flex-wrap: nowrap;
}
@layer base {
  .container, .container-xs, .container-sm, .container-lg, .container-xl, .container-full {
    padding-inline: calc(var(--spacing) * 1.5);
    @media (width >= 43rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 2.5);
    }
  }
}
.border-gradient {
  border-image: linear-gradient(to var(--border-direction, bottom), var(--border-from, var(--color-dark)) var(--border-from-position, 10%), var(--border-to, transparent) var(--border-to-position, 80%)) var(--border-width, 1px);
  border-image-outset: var(--border-outset, 0);
}
.mask-gradient {
  mask: linear-gradient(to var(--gradient-direction, bottom), transparent var(--tw-gradient-from-position, 10%), black var(--tw-gradient-to-position, 90%));
  pointer-events: none;
}
.mask-gradient-edges {
  mask: linear-gradient(to var(--gradient-direction, right), rgba(0,0,0,1) 5%, rgba(0,0,0,0) var(--tw-gradient-from-position, 25%), rgba(0,0,0,0) var(--tw-gradient-to-position, 75%), rgba(0,0,0,1) 95%);
  pointer-events: none;
}
.line-gradient {
  background: linear-gradient(to bottom, transparent 0%, var(--tw-gradient-to) 15%, var(--tw-gradient-to) 85%, transparent 100%);
}
.shadow-echos {
  --shadow-size: 15px;
  --shadow-x: 0px;
  --shadow-y: 0px;
  box-shadow: var(--shadow-x) var(--shadow-y) 0 var(--shadow-size) var(--tw-gradient-from), calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) 0 calc(var(--shadow-size) * 2) var(--tw-gradient-from), calc(var(--shadow-x) * 3) calc(var(--shadow-y) * 3) 0 calc(var(--shadow-size) * 3) var(--tw-gradient-from), calc(var(--shadow-x) * 3) calc(var(--shadow-y) * 3) 30px calc(var(--shadow-size) * 2.6) var(--tw-gradient-to), calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) 0 calc(var(--shadow-size) * 4) var(--tw-gradient-to);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: var(--shadow-x) var(--shadow-y) 0 var(--shadow-size) var(--tw-gradient-from), calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) 0 calc(var(--shadow-size) * 2) color-mix(in srgb, var(--tw-gradient-from) 60%, var(--tw-gradient-to)), calc(var(--shadow-x) * 3) calc(var(--shadow-y) * 3) 0 calc(var(--shadow-size) * 3) color-mix(in srgb, var(--tw-gradient-from) 40%, var(--tw-gradient-to)), calc(var(--shadow-x) * 3) calc(var(--shadow-y) * 3) 30px calc(var(--shadow-size) * 2.6) var(--tw-gradient-to), calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) 0 calc(var(--shadow-size) * 4) var(--tw-gradient-to);
  }
  @media (width >= 64rem) {
    box-shadow: var(--shadow-x-lg, var(--shadow-x)) var(--shadow-y-lg, var(--shadow-y)) 0 var(--shadow-size-lg, var(--shadow-size)) var(--tw-gradient-from), calc(var(--shadow-x-lg, var(--shadow-x)) * 2) calc(var(--shadow-y-lg, var(--shadow-y)) * 2) 0 calc(var(--shadow-size-lg, var(--shadow-size)) * 2) var(--tw-gradient-from), calc(var(--shadow-x-lg, var(--shadow-x)) * 3) calc(var(--shadow-y-lg, var(--shadow-y)) * 3) 0 calc(var(--shadow-size-lg, var(--shadow-size)) * 3) var(--tw-gradient-from), calc(var(--shadow-x-lg, var(--shadow-x)) * 3) calc(var(--shadow-y-lg, var(--shadow-y)) * 3) 30px calc(var(--shadow-size-lg, var(--shadow-size)) * 2.6) var(--tw-gradient-to), calc(var(--shadow-x-lg, var(--shadow-x)) * 4) calc(var(--shadow-y-lg, var(--shadow-y)) * 4) 0 calc(var(--shadow-size-lg, var(--shadow-size)) * 4) var(--tw-gradient-to);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-x-lg, var(--shadow-x)) var(--shadow-y-lg, var(--shadow-y)) 0 var(--shadow-size-lg, var(--shadow-size)) var(--tw-gradient-from), calc(var(--shadow-x-lg, var(--shadow-x)) * 2) calc(var(--shadow-y-lg, var(--shadow-y)) * 2) 0 calc(var(--shadow-size-lg, var(--shadow-size)) * 2) color-mix(in srgb, var(--tw-gradient-from) 60%, var(--tw-gradient-to)), calc(var(--shadow-x-lg, var(--shadow-x)) * 3) calc(var(--shadow-y-lg, var(--shadow-y)) * 3) 0 calc(var(--shadow-size-lg, var(--shadow-size)) * 3) color-mix(in srgb, var(--tw-gradient-from) 40%, var(--tw-gradient-to)), calc(var(--shadow-x-lg, var(--shadow-x)) * 3) calc(var(--shadow-y-lg, var(--shadow-y)) * 3) 30px calc(var(--shadow-size-lg, var(--shadow-size)) * 2.6) var(--tw-gradient-to), calc(var(--shadow-x-lg, var(--shadow-x)) * 4) calc(var(--shadow-y-lg, var(--shadow-y)) * 4) 0 calc(var(--shadow-size-lg, var(--shadow-size)) * 4) var(--tw-gradient-to);
    }
  }
}
@layer base {
  h1, h2, h3, h4, h5, h6 {
    display: block;
    width: auto;
    padding-bottom: calc(var(--spacing) * 0.5);
    --tw-leading: 1;
    line-height: 1;
    color: var(--color-heading);
    &:where(.dark, .dark *) {
      color: var(--color-dark-heading);
    }
    letter-spacing: var(--heading-space, var(--tracking-tighter));
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
  }
  h1 {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    @media (width >= 43rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    @media (width >= 64rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    font-family: var(--heading-font-h1, var(--heading-font));
    font-weight: var(--heading-weight-h1, var(--heading-weight));
  }
  h2 {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    @media (width >= 43rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    @media (width >= 64rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    font-family: var(--heading-font-h2, var(--heading-font));
    font-weight: var(--heading-weight-h2, var(--heading-weight));
  }
  h3 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    @media (width >= 43rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    @media (width >= 64rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    font-family: var(--heading-font-h3, var(--heading-font));
    font-weight: var(--heading-weight-h3, var(--heading-weight));
  }
  h4 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    @media (width >= 43rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    @media (width >= 64rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    font-family: var(--heading-font-h4, var(--heading-font));
    font-weight: var(--heading-weight-h4, var(--heading-weight));
  }
  h5 {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    @media (width >= 43rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    @media (width >= 64rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    font-family: var(--heading-font-h5, var(--heading-font));
    font-weight: var(--heading-weight-h5, var(--heading-weight));
  }
  h6 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    @media (width >= 43rem) {
      font-size: 1.23rem;
    }
    @media (width >= 64rem) {
      font-size: 1.3rem;
    }
    font-family: var(--heading-font-h6, var(--heading-font));
    font-weight: var(--heading-weight-h6, var(--heading-weight));
  }
  .font-muted {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-label);
    text-transform: uppercase;
    opacity: 95%;
    &:where(.dark, .dark *) {
      color: var(--color-dark-label);
    }
    font-size-adjust: 0.47;
  }
  small {
    display: block;
    line-height: 1.1;
    padding-top: 0.3rem;
  }
}
.text-display, .text-display-xl, .text-display-lg, .text-display-sm, .text-display-xs {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
    -webkit-appearance: none;
  }
  overflow-x: hidden;
  overflow-y: visible;
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
}
@layer base {
  ul, ol {
    li:not(:last-child) {
      margin-block-end: calc(var(--spacing) / 1rem * 1.55em);
    }
  }
}
@layer base {
  .btn {
    line-height: 1;
    border-width: var(--btn-border, 1px);
    border-radius: var(--btn-radius);
    cursor: pointer;
    width: fit-content;
    letter-spacing: 0.01em;
    column-gap: 0.4em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      opacity: 60%;
    }
    text-transform: uppercase;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    -webkit-user-select: none;
    user-select: none;
    font-weight: var(--btn-weight);
    padding: var(--btn-py) var(--btn-px);
    column-gap: 0.6em;
  }
  .btn-xxs {
    border-width: calc(var(--btn-border, 1px) * 0.3);
    font-size: 0.68rem;
    border-radius: calc(var(--btn-radius) * 0.8);
    padding: max(0.3rem, var(--btn-py) - 1.25rem) max(0.3rem, var(--btn-px) - 1.25rem);
  }
  .btn-xs {
    border-width: calc(var(--btn-border, 1px) * 0.5);
    border-radius: calc(var(--btn-radius) * 0.9);
    padding: max(0.5rem, var(--btn-py) - 0.4rem) max(0.5rem, var(--btn-px) - 0.4rem);
    font-size: var(--text-xs);
    line-height: 0.9;
  }
  .btn-sm {
    border-width: calc(var(--btn-border, 1px) * 0.7);
    border-radius: calc(var(--btn-radius) * 0.95);
    padding: max(0.6rem, var(--btn-py) - 0.2rem) max(0.6rem, var(--btn-px) - 0.2rem);
    font-size: var(--text-sm);
  }
  .btn-base {
    border-radius: var(--btn-radius);
    padding: var(--btn-py) var(--btn-px);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .btn-lg {
    border-width: calc(var(--btn-border, 1px) * 1.2);
    border-radius: calc(var(--btn-radius) * 1.1);
    padding: calc(var(--btn-py) + 0.2rem) calc(var(--btn-px) + 0.22rem);
    font-size: var(--text-lg);
  }
  .btn-xl {
    border-width: calc(var(--btn-border, 1px) * 1.4);
    border-radius: calc(var(--btn-radius) * 1.2);
    padding: calc(var(--btn-py) + 0.3rem) calc(var(--btn-px) + 0.33rem);
    font-size: var(--text-xl);
  }
  .btn-2xl {
    border-width: calc(var(--btn-border, 1px) * 1.6);
    border-radius: calc(var(--btn-radius) * 1.3);
    padding: calc(var(--btn-py) + 0.5rem) calc(var(--btn-px) + 0.5rem);
    font-size: var(--text-2xl);
  }
  .badge {
    border-radius: calc(var(--badge-border) * 1px);
    vertical-align: middle;
    font-size-adjust: 0.495;
    line-height: 1.1;
    border-radius: var(--badge-radius);
    font-weight: var(--badge-weight, normal);
    width: fit-content;
    letter-spacing: 0.01em;
    column-gap: 0.4em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      opacity: 60%;
    }
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding: calc(var(--spacing) * 1.6) calc(var(--spacing) * 2.5);
  }
  .badge-xxs {
    border-width: calc(var(--badge-border) * 0.9px);
    border-radius: calc(var(--badge-radius) * 0.7);
    font-size: 0.69rem;
    padding: calc(var(--spacing) * 0.6) calc(var(--spacing) * 0.6);
  }
  .badge-xs {
    border-width: calc(var(--badge-border) * 0.95px);
    border-radius: calc(var(--badge-radius) * 0.8);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    padding: calc(var(--spacing) * 0.8) calc(var(--spacing) * 1.2);
  }
  .badge-sm {
    border-width: calc(var(--badge-border) * 1px);
    border-radius: calc(var(--badge-radius) * 0.9);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    font-size: 0.85rem;
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  }
  .badge-base {
    border-width: calc(var(--badge-border) * 1.1px);
    border-radius: calc(var(--badge-radius) * 1);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    padding: calc(var(--spacing) * 1.6) calc(var(--spacing) * 2.5);
  }
  .badge-lg {
    border-width: calc(var(--badge-border) * 1.2px);
    border-radius: calc(var(--badge-radius) * 1.1);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    font-size: 1.12rem;
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.9);
  }
  .badge-xl {
    border-width: calc(var(--badge-border) * 1.4px);
    border-radius: calc(var(--badge-radius) * 1.2);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    font-size: 1.2rem;
    padding: calc(var(--spacing) * 1.8) calc(var(--spacing) * 3.5);
  }
  .btn-full {
    width: 100%;
    text-align: center;
  }
  .aria-dot {
    position: relative;
    &::after {
      position: absolute;
      border-radius: calc(infinity * 1px);
      background-color: var(--color-brand);
      text-align: center;
      color: var(--color-white);
      transition-property: opacity;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      content: attr(aria-label);
      font-size: 12px;
      font-weight: 500;
      block-size: var(--size-4);
      line-height: normal;
      min-inline-size: var(--size-4, 1.125rem);
      padding-inline: var(--size-1);
      inset: auto auto calc(100% - 16px) calc(100% - 16px);
      inline-size: max-content;
    }
  }
}
.bevel-brand {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-brand-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-brand-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-white {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, oklch(0.707 0.022 261.325) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, oklch(0.707 0.022 261.325) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-white);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-gray-400) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-gray-400) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-white);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, oklch(0.707 0.022 261.325) 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-gray-400) 20%, transparent) inset;
    }
  }
}
.bevel-black {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-black);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-black);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-light {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #000000 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #000000 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-light);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-brand-600) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-brand-600) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-light);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #000000 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-brand-600) 20%, transparent) inset;
    }
  }
}
.bevel-dark {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #FCF3F3 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #FCF3F3 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-dark);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-light) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-light) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-dark);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #FCF3F3 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-light) 20%, transparent) inset;
    }
  }
}
.bevel-amber {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, oklch(0.924 0.12 95.746) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, oklch(0.924 0.12 95.746) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-amber-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-amber-200) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-amber-200) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-amber-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, oklch(0.924 0.12 95.746) 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-amber-200) 20%, transparent) inset;
    }
  }
}
.bevel-blue {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-blue-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-blue-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-cyan {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-cyan-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-cyan-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-emerald {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-emerald-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-emerald-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-fuchsia {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-fuchsia-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-fuchsia-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-gray {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-gray-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-gray-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-green {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-green-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-green-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-indigo {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-indigo-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-indigo-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-lime {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-lime-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-lime-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-neutral {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, oklch(0.439 0 0) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, oklch(0.439 0 0) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-neutral-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-neutral-600) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-neutral-600) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-neutral-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, oklch(0.439 0 0) 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-neutral-600) 20%, transparent) inset;
    }
  }
}
.bevel-orange {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-orange-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-orange-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-pink {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-pink-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-pink-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-purple {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-purple-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-purple-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-red {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-red-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-red-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-rose {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-rose-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-rose-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-slate {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, oklch(0.446 0.043 257.281) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, oklch(0.446 0.043 257.281) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-slate-400);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-slate-600) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-slate-600) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-slate-400);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, oklch(0.446 0.043 257.281) 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-slate-600) 20%, transparent) inset;
    }
  }
}
.bevel-sky {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, oklch(0.588 0.158 241.966) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, oklch(0.588 0.158 241.966) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-sky-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-sky-600) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-sky-600) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-sky-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, oklch(0.588 0.158 241.966) 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-sky-600) 20%, transparent) inset;
    }
  }
}
.bevel-stone {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-stone-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-stone-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-teal {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #ffffff 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #ffffff 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-teal-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-white) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-white) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-teal-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #ffffff 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-white) 20%, transparent) inset;
    }
  }
}
.bevel-yellow {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, oklch(0.987 0.026 102.212) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, oklch(0.987 0.026 102.212) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-yellow-400);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-yellow-50) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-yellow-50) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-yellow-400);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, oklch(0.987 0.026 102.212) 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-yellow-50) 20%, transparent) inset;
    }
  }
}
.bevel-zinc {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  box-shadow: 0 0.025em 0 0.07em color-mix(in srgb, #FCF3F3 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in srgb, #FCF3F3 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-zinc-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0.025em 0 0.07em color-mix(in oklab, var(--color-light) 30%, transparent) inset, 0 0.5em 25px -1em color-mix(in oklab, var(--color-light) 85%, transparent) inset, 0px 0.7em 0.8em -0.8em var(--color-zinc-500);
  }
  &:hover {
    box-shadow: 0 0.5em 15px 0.1em color-mix(in srgb, #FCF3F3 20%, transparent) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5em 15px 0.1em color-mix(in oklab, var(--color-light) 20%, transparent) inset;
    }
  }
}
.btn-dashed {
  border-style: var(--tw-border-style);
  border-width: 1px;
  --tw-border-style: dashed !important;
  border-style: dashed !important;
  border-color: inherit;
  &:hover {
    border-color: var(--color-dark);
  }
  &:where(.dark, .dark *) {
    &:hover {
      border-color: var(--color-light);
    }
  }
}
.btn-light-dark {
  border-color: var(--color-light-dark);
  background-color: var(--color-light);
  color: var(--color-dark);
  &:where(.dark, .dark *) {
    background-color: var(--color-dark);
  }
  &:where(.dark, .dark *) {
    color: var(--color-light);
  }
  &:hover {
    background-color: var(--color-brand-100);
  }
  &:where(.dark, .dark *) {
    &:hover {
      background-color: var(--color-brand-900);
    }
  }
}
.btn-dark-light {
  border-color: var(--color-dark-light);
  background-color: var(--color-dark);
  color: var(--color-light);
  &:where(.dark, .dark *) {
    background-color: var(--color-light);
  }
  &:where(.dark, .dark *) {
    color: var(--color-dark);
  }
  &:hover {
    background-color: var(--color-brand-900);
  }
  &:where(.dark, .dark *) {
    &:hover {
      background-color: var(--color-brand-100);
    }
  }
}
.btn-white-black {
  border-color: var(--color-white-black);
  background-color: var(--color-white);
  color: var(--color-black);
  &:where(.dark, .dark *) {
    background-color: var(--color-black);
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
  &:hover {
    background-color: var(--color-brand-100);
  }
  &:where(.dark, .dark *) {
    &:hover {
      background-color: var(--color-brand-900);
    }
  }
}
.btn-black-white {
  border-color: var(--color-black-white);
  background-color: var(--color-black);
  color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-white);
  }
  &:where(.dark, .dark *) {
    color: var(--color-black);
  }
  &:hover {
    background-color: var(--color-brand-900);
  }
  &:where(.dark, .dark *) {
    &:hover {
      background-color: var(--color-brand-100);
    }
  }
}
.btn-shadow {
  box-shadow: 0px 0.7em 1em -0.8em rgba(var(--tw-shadow-color), 0.9), 0px 2.3em 40px -2.4em rgba(var(--tw-shadow-color), 0.8);
}
@layer base {
  .label {
    display: flex;
    align-items: center;
    padding-right: calc(var(--spacing) * 0.5);
    padding-bottom: calc(var(--spacing) * 0.5);
    padding-left: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-label);
    text-transform: uppercase;
    &:where(.dark, .dark *) {
      color: var(--color-dark-label);
    }
    &.required:after {
      margin-left: calc(var(--spacing) * 1.5);
      color: var(--color-red-400);
      content: "*";
      vertical-align: super;
    }
  }
  input[type="checkbox"], input[type="radio"] {
    accent-color: var(--form-color, var(--color-brand));
  }
  input[type='select'], select {
    position: relative;
    appearance: none;
    padding-right: 2.5em;
    font-family: var(--font-weight);
  }
  input[type='select']::after, select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.7em;
    transform: translateY(-50%);
    width: 1.2em;
    height: 1.2em;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.6;
  }
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, input:-webkit-autofill, input:-webkit-autofill-strong-password {
    background-color: transparent !important;
  }
  .form-basic, .form-muted, .form-line, .form-transparent {
    width: 100%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      opacity: 50%;
    }
    &:focus {
      border-color: transparent;
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-brand);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:autofill {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    &:autofill {
      --tw-duration: 5000000ms;
      transition-duration: 5000000ms;
    }
    line-height: 1;
    padding: var(--form-py) calc(var(--form-px) * 0.4) var(--form-py) var(--form-px);
    font-size: calc(var(--text-base) * 0.98 - 1px);
    border-radius: var(--form-radius);
    max-width: 600px;
  }
  .form-basic {
    background-color: #ffffff;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-midtone);
    color: var(--color-brand-900);
    &:focus {
      background-color: var(--color-white);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-dark);
    }
    &:where(.dark, .dark *) {
      color: var(--color-light);
    }
    &:where(.dark, .dark *) {
      &:focus {
        color: var(--color-brand-900);
      }
    }
  }
  .form-muted {
    border-color: var(--color-muted);
    background-color: var(--color-muted);
    &:focus {
      background-color: var(--color-white);
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-dark-muted);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-dark-muted);
    }
    &:where(.dark, .dark *) {
      color: var(--color-light);
    }
    &:where(.dark, .dark *) {
      &:focus {
        background-color: var(--color-dark);
      }
    }
  }
  .form-transparent {
    background-color: transparent;
    color: color-mix(in srgb, #15101a 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-dark-light) 90%, transparent);
    }
    border-width: 0;
    box-shadow: none !important;
  }
  .form-line {
    padding-inline: calc(var(--spacing) * 2) !important;
    border-style: var(--tw-border-style);
    border-width: 0px;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0.1em;
    border-color: color-mix(in srgb, #15101a 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-dark) 70%, transparent);
    }
    background-color: transparent;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
    &:focus {
      border-color: color-mix(in srgb, #111111 70%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-brand) 70%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #ffffff 80%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 80%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-light);
    }
    padding-block: calc(var(--form-py) * 0.8);
    border-radius: 0 !important;
    font-size-adjust: 0.65;
    &.form-sm {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0.075em;
      padding-block: calc(var(--form-py) * 0.5);
    }
  }
  .form-float {
    position: relative;
    width: 100%;
    label {
      pointer-events: none;
      position: absolute;
      left: calc(var(--spacing) * 3);
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 500ms;
      transition-duration: 500ms;
      border-radius: clamp(0px, 0.36em, 8px);
      top: 50%;
      transform: translateY(-50%);
      transform-origin: left;
    }
    &:has(input:focus) label, &:has(input:not(:placeholder-shown)) label {
      left: calc(var(--spacing) * 2);
      background-color: var(--color-white);
      padding-inline: calc(var(--spacing) * 2);
      &:where(.dark, .dark *) {
        color: var(--color-label);
      }
      top: -0.7rem;
      transform: scale(0.85);
    }
  }
  textarea.form-basic, textarea.form-muted, textarea.form-line, textarea.form-transparent {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .form-xs {
    padding-block: calc(var(--form-py) * 0.8);
    padding-right: calc(var(--spacing) * 1.5);
    padding-left: calc(var(--spacing) * 3);
    font-size: calc(var(--text-sm) * 0.98 - 1px);
    background-size: 1.3em 1.3em;
  }
  .form-sm {
    padding-block: calc(var(--form-py) * 0.9);
    padding-right: calc(var(--spacing) * 1.5);
    padding-left: calc(var(--spacing) * 3);
    font-size: calc(var(--text-sm) * 0.98 - 1px);
    background-size: 1.4em 1.4em;
  }
  .form-lg {
    padding-block: calc(var(--form-py) * 1.1);
    padding-right: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 4.5);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    font-size: calc(var(--text-lg) * 0.98 - 1px);
    background-size: 1.5em 1.5em;
  }
  .form-xl {
    padding-block: calc(var(--form-py) * 1.2);
    padding-inline: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 2.5);
    font-size: calc(var(--text-xl) * 0.98 - 1px);
    background-size: 1.55em 1.55em;
  }
  .form-2xl {
    padding-block: calc(var(--form-py) * 1.4);
    padding-inline: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 2.5);
    font-size: calc(var(--text-2xl) * 0.98 - 1px);
    background-size: 1.55em 1.55em;
  }
  .form-success {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2322c55e'/%3E%3Cpath d='M5.5 10.5l3 3 6-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 3px top 3px;
    background-size: 1.03em 1.03em;
    @media (width >= 43rem) {
      background-position: right 5px top 5px;
    }
  }
  .form-error {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ef4444'/%3E%3Cpath d='M7 7l6 6m0-6l-6 6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 3px top 3px;
    background-size: 1.03em 1.03em;
    @media (width >= 43rem) {
      background-position: right 5px top 5px;
    }
  }
  .form-btn {
    input {
      display: none;
    }
    &:has(*:is(:checked)) {
      background-color: var(--color-brand-500);
      --tw-shadow-color: color-mix(in srgb, #000000 70%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-brand-600) 70%, transparent) var(--tw-shadow-alpha), transparent);
      }
      color: var(--btn-brand-text, var(--color-white));
      border-color: var(--btn-brand-border, color-mix(in srgb, #111111 0%, white));
      @supports (color: color-mix(in lab, red, red)) {
        border-color: var(--btn-brand-border, color-mix(in oklab, var(--color-brand-500) var(--btn-border-mix-percentage, 100%), var(--btn-border-mix, transparent)));
      }
      &:where(.dark, .dark *) {
        border-color: var(--btn-brand-border, color-mix(in srgb, #111111 60%, transparent));
        @supports (color: color-mix(in lab, red, red)) {
          border-color: var(--btn-brand-border, color-mix(in oklab, var(--color-brand-500) 60%, transparent));
        }
      }
      &:hover {
        background-color: color-mix(in srgb, #111111 95%, white);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-brand-500) 95%, var(--btn-border-mix, black));
        }
      }
    }
  }
  .form-check {
    position: relative;
    input {
      display: none;
    }
    &:has(*:is(:checked)) {
      background-color: var(--color-brand-500) !important;
      --tw-shadow-color: color-mix(in srgb, #000000 70%, transparent) !important;
      @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-brand-600) 70%, transparent) var(--tw-shadow-alpha), transparent) !important;
      }
      color: var(--btn-brand-text, var(--color-white)) !important;
      border-color: var(--btn-brand-border, color-mix(in srgb, #111111 0%, white)) !important;
      @supports (color: color-mix(in lab, red, red)) {
        border-color: var(--btn-brand-border, color-mix(in oklab, var(--color-brand-500) var(--btn-border-mix-percentage, 100%), var(--btn-border-mix, transparent))) !important;
      }
      &:where(.dark, .dark *) {
        border-color: var(--btn-brand-border, color-mix(in srgb, #111111 60%, transparent)) !important;
        @supports (color: color-mix(in lab, red, red)) {
          border-color: var(--btn-brand-border, color-mix(in oklab, var(--color-brand-500) 60%, transparent)) !important;
        }
      }
      &:hover {
        background-color: color-mix(in srgb, #111111 95%, white) !important;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-brand-500) 95%, var(--btn-border-mix, black)) !important;
        }
      }
    }
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      right: 0.4em;
      width: 0.05em;
      height: 1.1em;
      opacity: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      transform-origin: center;
      transition: opacity 250ms linear 200ms;
    }
    &:has(*:is(:checked)) {
      &::before {
        width: 1.1em;
        opacity: 1;
      }
      &::after {
        content: '';
        display: block;
        height: 1px;
        transition: width 250ms ease;
        width: calc(0.75em + 5px);
      }
    }
  }
  .form-checkbox {
    gap: calc(var(--spacing) * 1);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-label);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-muted);
      }
    }
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 1.5);
    }
    &:where(.dark, .dark *) {
      color: var(--color-brand);
    }
    border-color: transparent;
    padding-left: 0.45em;
    padding-right: 0.585em;
    label {
      cursor: pointer;
      padding-inline: calc(var(--spacing) * 0.5);
      --tw-tracking: var(--tracking-tight);
      letter-spacing: var(--tracking-tight);
      color: var(--color-body);
    }
    input {
      border-radius: inherit;
      border-color: var(--color-brand-300);
      &:focus {
        --tw-ring-color: var(--color-brand-500);
      }
      accent-color: var(--form-color, var(--color-brand));
    }
    &:has(*:is(:checked)) {
      background-color: color-mix(#f2f2f3 90%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(var(--color-muted) 90%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: var(--color-dark-muted);
      }
    }
  }
  .form-btn {
    gap: calc(var(--spacing) * 1.5);
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .form-btn, .form-check, .form-checkbox {
    padding-left: 0.9em;
    padding-right: 0.9em;
    &.btn-xs {
      padding-left: 0.6em;
      padding-right: 0.6em;
    }
    &.btn-sm {
      padding-left: 0.75em;
      padding-right: 0.75em;
    }
    &.btn-lg {
      padding-left: 1.05em;
      padding-right: 1.05em;
    }
  }
}
.form-switch {
  appearance: none;
  &:disabled {
    pointer-events: none;
  }
  &:disabled {
    opacity: 50%;
  }
  position: relative;
  width: 2.8rem;
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  border-color: transparent;
  background-color: var(--color-midtone);
  padding: 1px;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  border-color: color-mix(in srgb, #ffffff 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
  }
  &:checked {
    background-image: none;
  }
  &::before {
    content: var(--tw-content);
    display: inline-block;
  }
  &::before {
    content: var(--tw-content);
    height: calc(var(--spacing) * 6);
  }
  &::before {
    content: var(--tw-content);
    width: calc(var(--spacing) * 6);
  }
  &::before {
    content: var(--tw-content);
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  &::before {
    content: var(--tw-content);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  &::before {
    content: var(--tw-content);
    border-radius: calc(infinity * 1px);
  }
  &::before {
    content: var(--tw-content);
    background-color: var(--color-white);
  }
  &::before {
    content: var(--tw-content);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  &:checked {
    &::before {
      content: var(--tw-content);
      --tw-translate-x: calc(3/4 * 100%);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  &:where(.dark, .dark *) {
    &::before {
      content: var(--tw-content);
      background-color: var(--color-white);
    }
  }
  line-height: .81;
  height: calc(1.5rem + 2px);
  &:checked {
    background-color: var(--form-color, var(--color-brand));
  }
  &:checked::before {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--color-white);
  }
}
.form-switch-sm {
  &::before {
    content: var(--tw-content);
    height: calc(var(--spacing) * 4);
  }
  &::before {
    content: var(--tw-content);
    width: calc(var(--spacing) * 4);
  }
  height: calc(1rem + 2px);
  width: 2rem;
  line-height: .75;
}
.form-switch-lg {
  width: 3.7rem;
  padding: calc(var(--spacing) * 0.5);
  &::before {
    content: var(--tw-content);
    height: calc(var(--spacing) * 8);
  }
  &::before {
    content: var(--tw-content);
    width: calc(var(--spacing) * 8);
  }
  height: calc(2rem + 4px);
  line-height: .8;
}
.form-btn-label {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  column-gap: calc(var(--spacing) * 1);
  border-style: var(--tw-border-style);
  border-width: 0px;
  padding-inline: calc(var(--spacing) * 3);
  &:has(*:is(:checked)) {
    color: var(--color-light);
  }
  &:has(:checked) {
    background-color: var(--form-color, var(--color-brand));
  }
  &:has(input:checked)::after {
    content: '\2713';
    color: white;
    position: absolute;
    padding: 0.11rem 0.14rem;
    font-size: 0.6rem;
    font-weight: bold;
    line-height: 1;
    top: -0.25rem;
    right: -0.1rem;
    background-color: var(--color-green-500);
    border-radius: 2px;
    text-align: center;
  }
  label {
    cursor: pointer;
  }
  input {
    display: none;
  }
  &.btn-xs::after {
    font-size: 0.5rem;
  }
  &.btn-sm::after {
    font-size: 0.55rem;
  }
  &.btn-lg::after, &.btn-lg::after {
    font-size: 0.65rem;
  }
}
.custom-file-upload {
  width: fit-content;
  letter-spacing: 0.01em;
  column-gap: 0.4em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  &:disabled {
    pointer-events: none;
  }
  &:disabled {
    opacity: 60%;
  }
  position: relative;
  display: inline-flex;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--color-white);
  color: var(--color-dark);
  width: 100% !important;
  max-width: var(--container-sm);
  justify-content: flex-start !important;
  border-radius: var(--btn-radius);
  svg {
    fill: inherit;
  }
  * {
    pointer-events: none;
  }
  label {
    cursor: pointer;
  }
  &:hover {
    color: #fff;
    background-color: var(--form-color, var(--color-brand));
    svg {
      fill: #fff;
    }
  }
  input {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    opacity: 0%;
    width: 100%;
    height: 100%;
  }
}
:root {
  --rounded-box: 1rem;
  --fallback-p: #491eff;
  --fallback-b1: #ffffff;
  --fallback-bc: #1f2937;
  --b1: 1 0 0;
  --bc: 0.278078 0.029596 256.847952;
}
.form-range {
  height: var(--height, 1rem);
  width: 100%;
  --range-shdw: var(--form-color, var(--color-brand));
  cursor: pointer;
  appearance: none;
  overflow: hidden;
  border-radius: calc(infinity * 1px);
  background-color: transparent;
  &:focus {
    outline: none;
  }
  &:focus-visible::-webkit-slider-thumb {
    --focus-shadow: 0 0 0 6px var(--fallback-b1, oklch(var(--b1)/1)) inset, 0 0 0 2rem var(--range-shdw) inset;
  }
  &::-webkit-slider-runnable-track {
    height: 80%;
    width: 100%;
    border-radius: calc(infinity * 1px);
    background-color: var(--range-track, var(--color-light));
  }
  &::-webkit-slider-thumb {
    position: relative;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: var(--rounded-box, 1rem);
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
    appearance: none;
    -webkit-appearance: none;
    top: 50%;
    color: var(--range-shdw);
    transform: translateY(-50%);
    --filler-size: 100rem;
    --filler-offset: 0.6rem;
    box-shadow: 0 0 0 3px var(--range-shdw) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
  }
}
.form-range-xs {
  height: 1rem;
}
.form-range-xs::-webkit-slider-runnable-track {
  height: 0.8rem;
}
.form-range-xs::-moz-range-track {
  height: 0.8rem;
}
.form-range-xs::-webkit-slider-thumb {
  height: 1rem;
  width: 1rem;
  --filler-offset: 0.4rem;
}
.form-range-xs::-moz-range-thumb {
  height: 1rem;
  width: 1rem;
  --filler-offset: 0.4rem;
}
.form-range-sm {
  height: 1.25rem;
}
.form-range-sm::-webkit-slider-runnable-track {
  height: 0.9rem;
}
.form-range-sm::-moz-range-track {
  height: 0.9rem;
}
.form-range-sm::-webkit-slider-thumb {
  height: 1.25rem;
  width: 1.25rem;
  --filler-offset: 0.5rem;
}
.form-range-sm::-moz-range-thumb {
  height: 1.25rem;
  width: 1.25rem;
  --filler-offset: 0.5rem;
}
.form-range-md {
  height: 1.5rem;
}
.form-range-md::-webkit-slider-runnable-track {
  height: 1rem;
}
.form-range-md::-moz-range-track {
  height: 1rem;
}
.form-range-md::-webkit-slider-thumb {
  height: 1.5rem;
  width: 1.5rem;
  --filler-offset: 0.6rem;
}
.form-range-md::-moz-range-thumb {
  height: 1.5rem;
  width: 1.5rem;
  --filler-offset: 0.6rem;
}
.form-range-lg {
  height: 2rem;
}
.form-range-lg::-webkit-slider-runnable-track {
  height: 1.1rem;
}
.form-range-lg::-moz-range-track {
  height: 1.1rem;
}
.form-range-lg::-webkit-slider-thumb {
  height: 2rem;
  width: 2rem;
  --filler-offset: 1rem;
}
.form-range-vertical {
  position: relative;
  height: 20rem;
  width: 3rem;
  &::before, &::after {
    position: absolute;
    display: block;
    z-index: 99;
    color: #fff;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1;
    padding: .75rem 0;
    pointer-events: none;
  }
  &::before {
    content: "+";
  }
  &::after {
    content: "−";
    bottom: 0;
  }
  input[type="range"] {
    position: absolute;
    appearance: none;
    overflow: hidden;
    border-radius: 0.25rem;
    background-color: rgba(#fff, .2);
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    width: 20rem;
    height: 3.5rem;
    transform: translate(-50%, -50%) rotate(-90deg);
    cursor: row-resize;
    &[step] {
      background-color: transparent;
      background-image: repeating-linear-gradient(to right, rgba(#fff, .2), rgba(#fff, .2) calc(12.5% - 1px), #05051a 12.5%);
    }
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 0;
      box-shadow: -20rem 0 0 20rem rgba(#fff, 0.2);
    }
    &::-moz-range-thumb {
      border: none;
      width: 0;
      box-shadow: -20rem 0 0 20rem rgba(#fff, 0.2);
    }
  }
}
.dot {
  display: inline-block;
  flex: none;
  border-radius: calc(infinity * 1px);
  padding: calc(var(--spacing) * 1);
  div {
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
  }
}
.dot-brand {
  background-color: color-mix(in srgb, #111111 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-brand-500) 20%, transparent);
  }
  div {
    background-color: var(--color-brand-500);
  }
}
.dot-red {
  background-color: color-mix(in srgb, oklch(0.637 0.237 25.331) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
  }
  padding: calc(var(--spacing) * 1);
  div {
    background-color: var(--color-red-500);
  }
}
.dot-orange {
  background-color: color-mix(in srgb, oklch(0.705 0.213 47.604) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
  }
  padding: calc(var(--spacing) * 1);
  div {
    background-color: var(--color-orange-500);
  }
}
.dot-green {
  background-color: color-mix(in srgb, oklch(0.696 0.17 162.48) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
  }
  padding: calc(var(--spacing) * 1);
  div {
    background-color: var(--color-emerald-500);
  }
}
.form-panel {
  position: relative;
  display: inline-block;
  width: 100%;
  input {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 0px;
    clip: rect(0, 0, 0, 0);
    &:checked + label {
      background-color: var(--form-color, var(--color-brand));
      border-color: var(--form-color, var(--color-brand));
      color: white;
      box-shadow: none;
    }
  }
  label {
    position: relative;
    display: inline-block;
    border-style: var(--tw-border-style);
    border-width: 2px;
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    -webkit-user-select: none;
    user-select: none;
    border-color: var(--form-color, var(--color-brand));
    line-height: 1.1;
    text-shadow: none;
    height: 100%;
    min-height: 142px;
    min-width: 140px;
    transition: all 0.2s ease-in-out;
    &:hover {
      cursor: pointer;
    }
  }
  @screen md {
    b {
      font-size: 1.2rem !important;
    }
    label {
      width: 100%;
      padding: 1.1rem 1.5rem;
      min-height: 40px;
      margin-right: 0px;
    }
    span {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
      &::after {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
      }
    }
  }
}
.dark {
  .form-range {
    &::-webkit-slider-runnable-track {
      background-color: var(--color-slate-600);
    }
  }
}
.label-note {
  margin-top: calc(var(--spacing) * 0.5);
  display: block;
  padding-inline: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-label);
  opacity: 90%;
  &:where(.dark, .dark *) {
    color: var(--color-dark-label);
  }
  line-height: .9;
}
@layer base {
  .box-white {
    background-color: var(--color-white);
    --tw-shadow-color: #111111;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-brand) var(--tw-shadow-alpha), transparent);
    }
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #390505 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-brand-900) 60%, transparent);
      }
    }
    h1, h2, h3, h4, h5, h6 {
      color: var(--color-dark);
      &:where(.dark, .dark *) {
        color: color-mix(in srgb, #ffffff 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-white) 90%, transparent);
        }
      }
    }
    p {
      color: color-mix(in srgb, #15101a 75%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-dark) 75%, transparent);
      }
      &:where(.dark, .dark *) {
        color: color-mix(in srgb, #FCF3F3 70%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-light) 70%, transparent);
        }
      }
    }
    small {
      color: color-mix(in srgb, #15101a 70%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-dark) 70%, transparent);
      }
      &:where(.dark, .dark *) {
        color: color-mix(in srgb, #FCF3F3 65%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-light) 65%, transparent);
        }
      }
    }
  }
  .box-light {
    background-color: var(--color-light);
    --tw-shadow-color: #111111;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-brand) var(--tw-shadow-alpha), transparent);
    }
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #390505 90%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-brand-900) 90%, transparent);
      }
    }
    h1, h2, h3, h4, h5, h6 {
      color: var(--color-dark);
      &:where(.dark, .dark *) {
        color: color-mix(in srgb, #ffffff 85%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-white) 85%, transparent);
        }
      }
    }
    p {
      color: color-mix(in srgb, #15101a 75%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-dark) 75%, transparent);
      }
      &:where(.dark, .dark *) {
        color: color-mix(in srgb, #FCF3F3 70%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-light) 70%, transparent);
        }
      }
    }
    small {
      color: color-mix(in srgb, #15101a 70%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-dark) 70%, transparent);
      }
      &:where(.dark, .dark *) {
        color: color-mix(in srgb, #FCF3F3 65%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-light) 65%, transparent);
        }
      }
    }
  }
  .box-dark {
    background-color: var(--color-dark);
    --tw-shadow-color: #111111;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-brand) var(--tw-shadow-alpha), transparent);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-white);
    }
    h1, h2, h3, h4, h5, h6 {
      color: var(--color-white);
      &:where(.dark, .dark *) {
        color: var(--color-dark);
      }
    }
    p {
      color: color-mix(in srgb, #FCF3F3 80%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-light) 80%, transparent);
      }
      &:where(.dark, .dark *) {
        color: color-mix(in srgb, #15101a 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-dark) 80%, transparent);
        }
      }
    }
    li {
      color: color-mix(in srgb, #FCF3F3 75%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-light) 75%, transparent);
      }
      &:where(.dark, .dark *) {
        color: color-mix(in srgb, #15101a 70%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-dark) 70%, transparent);
        }
      }
    }
    small {
      color: color-mix(in srgb, #FCF3F3 70%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-light) 70%, transparent);
      }
      &:where(.dark, .dark *) {
        color: color-mix(in srgb, #15101a 65%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-dark) 65%, transparent);
        }
      }
    }
  }
  .box-form {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    --tw-shadow-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent);
    }
    &:focus-within {
      --tw-shadow-color: #111111;
      @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, var(--color-brand) var(--tw-shadow-alpha), transparent);
      }
    }
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-100);
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: color-mix(in srgb, #FCF3F3 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-light) 10%, transparent);
          }
        }
      }
    }
    &:focus-within {
      border-color: var(--color-slate-200);
    }
    &:where(.dark, .dark *) {
      &:focus-within {
        border-color: color-mix(in srgb, #111111 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-brand) 50%, transparent);
        }
      }
    }
  }
  .mt-xs {
    margin-top: calc(var(--mt-md) * var(--spacing) * 0.35);
    @media (width > 43rem) {
      margin-top: calc(var(--mt-md) * 1.4 * var(--spacing) * 0.35);
    }
    @media (width > 64rem) {
      margin-top: calc(var(--mt-md) * 1.8 * var(--spacing) * 0.35);
    }
    @media (width > 80rem) {
      margin-top: calc(var(--mt-md) * 2.2 * var(--spacing) * 0.35);
    }
  }
  .mt-sm {
    margin-top: calc(var(--mt-md) * var(--spacing) * 0.6);
    @media (width > 43rem) {
      margin-top: calc(var(--mt-md) * 1.4 * var(--spacing) * 0.6);
    }
    @media (width > 64rem) {
      margin-top: calc(var(--mt-md) * 1.8 * var(--spacing) * 0.6);
    }
    @media (width > 80rem) {
      margin-top: calc(var(--mt-md) * 2.2 * var(--spacing) * 0.6);
    }
  }
  .mt-md {
    margin-top: calc(var(--mt-md) * var(--spacing));
    @media (width > 43rem) {
      margin-top: calc(var(--mt-md) * 1.4 * var(--spacing));
    }
    @media (width > 64rem) {
      margin-top: calc(var(--mt-md) * 1.8 * var(--spacing));
    }
    @media (width > 80rem) {
      margin-top: calc(var(--mt-md) * 2.2 * var(--spacing));
    }
  }
  .mt-lg {
    margin-top: calc(var(--mt-md) * var(--spacing) * 1.5);
    @media (width > 43rem) {
      margin-top: calc(var(--mt-md) * 1.4 * var(--spacing) * 1.5);
    }
    @media (width > 64rem) {
      margin-top: calc(var(--mt-md) * 1.8 * var(--spacing) * 1.5);
    }
    @media (width > 80rem) {
      margin-top: calc(var(--mt-md) * 2.2 * var(--spacing) * 1.5);
    }
  }
}
.shadow-border {
  box-shadow: 0px 0px 4px 1px color-mix(in srgb, #15101a 25%, transparent), 0px 0px 0px var(--shadow-size, 0.8rem) color-mix(in srgb, #ffffff 25%, transparent), 0px 0px 58px -10px var(--tw-shadow-color, #111111);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0px 0px 4px 1px color-mix(in srgb, var(--color-dark) 25%, transparent), 0px 0px 0px var(--shadow-size, 0.8rem) color-mix(in srgb, var(--color-white) 25%, transparent), 0px 0px 58px -10px color-mix(in srgb, var(--tw-shadow-color, var(--color-brand)) 60%, transparent);
  }
  &:where(.dark, .dark *) {
    box-shadow: 0px 0px 4px 1px color-mix(in srgb, #15101a 25%, transparent), 0px 0px 0px var(--shadow-size, 0.8rem) color-mix(in srgb, #FCF3F3 7%, transparent), 0px 0px 60px -14px var(--tw-shadow-color, #111111);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0px 0px 4px 1px color-mix(in srgb, var(--color-dark) 25%, transparent), 0px 0px 0px var(--shadow-size, 0.8rem) color-mix(in srgb, var(--color-light) 7%, transparent), 0px 0px 60px -14px color-mix(in srgb, var(--tw-shadow-color, var(--color-brand)) 50%, transparent);
    }
  }
}
.bg-white-froast {
  border-color: color-mix(in srgb, #000000 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
  }
  background-color: color-mix(in srgb, #ffffff 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
  --tw-backdrop-blur: blur(var(--blur-lg));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  &:where(.dark, .dark *) {
    border-color: color-mix(in srgb, #ffffff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, #000000 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
    }
  }
  border-width: 1px;
}
.bg-black-froast {
  border-color: color-mix(in srgb, #ffffff 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
  }
  background-color: color-mix(in srgb, #000000 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
  }
  --tw-backdrop-blur: blur(var(--blur-lg));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  &:where(.dark, .dark *) {
    border-color: color-mix(in srgb, #000000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, #ffffff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  border-width: 1px;
}
.box-bg-overlay {
  transition: background 0.9s ease-in-out, background-position 0.5s ease-in-out, background-size 0.5s ease-in-out;
  will-change: transform, background-size, background-position;
  @media (width < 43rem) {
    background: linear-gradient( var(--gradient-direction, to bottom), var(--tw-gradient-from) var(--tw-gradient-from-position, 10%), var(--tw-gradient-to) var(--tw-gradient-to-position, 80%) ), var(--bg-image) no-repeat;
    background-size: cover, var(--bg-size, cover);
    background-position: center, var(--bg-position, center 55%);
  }
  &:hover, &:focus-within, .group:hover & {
    background-position: center, var(--bg-position-hover, center 45%);
  }
  @media (width >= 43rem) {
    background: linear-gradient( var(--gradient-direction-lg, var(--gradient-direction, to bottom)), var(--tw-gradient-from) var(--tw-gradient-from-position, 10%), var(--tw-gradient-to) var(--tw-gradient-to-position, 80%) ), var(--bg-image) no-repeat;
    background-size: cover, var(--bg-size-lg, var(--bg-size, cover));
    background-position: center, var(--bg-position-lg, var(--bg-position, center 55%));
    &:hover, &:focus-within, .group:hover & {
      background-position: center, var(--bg-position-hover-lg, var(--bg-position-hover, center 45%));
    }
  }
}
.box-before-overlay {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to var(--gradient-direction, bottom), var(--tw-gradient-from) var(--tw-gradient-from-position, 10%), var(--tw-gradient-to) var(--tw-gradient-to-position, 80%));
  transition: --gradient-from 0.9s ease-in-out, --gradient-to 0.9s ease-in-out;
  &::before {
    content: "";
    position: absolute;
    inset: calc(var(--spacing) * 0);
    z-index: calc(1 * -1);
    background-size: cover;
    background-position: center;
    bottom: -5%;
    scale: 1.05;
    border-radius: inherit;
    background-image: var(--bg-image);
    transition: scale 0.5s ease-in-out, transform 0.6s ease-in-out;
    will-change: transform, background-size, background-position;
    pointer-events: none;
  }
  &:hover::before, &:focus-within::before {
    scale: 1;
    transform: translateY(-5%);
  }
  &.group-hover {
    .group:hover &::before {
      scale: 1;
      transform: translateY(-5%);
    }
  }
}
.box-overlay {
  position: relative;
  overflow: hidden;
  padding: calc(var(--spacing) * 0);
  > *:first-child {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    z-index: 10;
  }
  &:after {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    z-index: 1;
    content: '';
    background-image: linear-gradient(to var(--gradient-direction, bottom), var(--tw-gradient-from) var(--tw-gradient-from-position, 10%), var(--tw-gradient-to) var(--tw-gradient-to-position, 80%));
  }
}
.box-animated-border {
  --box-panel-border: 3px;
  --box-panel-radius: 18px;
  position: relative;
  overflow: hidden;
  border-radius: var(--box-panel-radius);
  background-size: 400% 400%;
  animation: animated-line-boder 20s linear infinite;
  .box-panel-inner {
    mix-blend-mode: hard-light;
    border-radius: calc(var(--box-panel-radius) - var(--box-panel-border) - 1px);
    position: absolute;
    z-index: 10;
    top: var(--box-panel-border);
    bottom: var(--box-panel-border);
    left: var(--box-panel-border);
    right: var(--box-panel-border);
    transition: background-color 0.3s ease;
  }
}
@keyframes animated-line-boder {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}
.box-overlay {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 35%), radial-gradient(circle at 5% 90%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
  z-index: 1;
}
.modal {
  position: fixed;
  inset: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  --tw-outline-style: none;
  outline-style: none;
  z-index: 900;
  height: 100vh;
  .modal-box {
    position: relative;
    display: flex;
    max-height: 100%;
    width: fit-content;
    flex-direction: column;
    border-color: color-mix(in srgb, oklch(0.968 0.007 247.896) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-100) 80%, transparent);
    }
    background-color: color-mix(in srgb, #ffffff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, oklch(0.372 0.044 257.287) 70%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-slate-700) 70%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(0.129 0.042 264.695) 90%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-950) 90%, transparent);
      }
    }
    --tw-shadow-color: color-mix(in srgb, #610505 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-brand-800) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    z-index: 920;
    padding: 0px;
    .modal-btns {
      position: absolute;
      top: calc(var(--spacing) * 1);
      right: calc(var(--spacing) * 2);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: calc(var(--spacing) * 1.5);
      z-index: 100;
    }
    .modal-close {
      width: fit-content;
      letter-spacing: 0.01em;
      column-gap: 0.4em;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      &:disabled {
        pointer-events: none;
      }
      &:disabled {
        opacity: 60%;
      }
      cursor: pointer;
      border-style: var(--tw-border-style);
      border-width: 0px;
      background-color: var(--color-muted);
      color: var(--color-dark);
      &:where(.dark, .dark *) {
        background-color: var(--color-dark-muted);
      }
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      &:hover {
        border-color: var(--color-muted);
      }
      &:hover {
        opacity: 90%;
      }
      border-color: color-mix(in srgb, #f2f2f3 0%, white);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-muted) var(--btn-border-mix-percentage, 80%), var(--btn-border-mix, transparent));
      }
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold);
      &:hover {
        @media (hover: hover) {
          opacity: 80%;
        }
      }
      border-radius: calc(var(--box-radius) - 6px);
      padding: 0.3rem;
    }
    .modal-title {
      position: absolute;
      top: calc(var(--spacing) * 0);
      left: calc(var(--spacing) * 0);
      z-index: 10;
      width: 100%;
      --tw-gradient-position: to bottom;
      @supports (background-image: linear-gradient(in lab, red, red)) {
        --tw-gradient-position: to bottom in oklab;
      }
      background-image: linear-gradient(var(--tw-gradient-stops));
      --tw-gradient-from: var(--color-white-black);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      --tw-gradient-from-position: 60%;
      --tw-gradient-to: transparent;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      margin-top: calc(var(--spacing) * -1);
      padding-inline: calc(var(--spacing) * 5);
      padding-top: calc(var(--spacing) * 5);
      padding-bottom: calc(var(--spacing) * 6);
      @media (width >= 43rem) {
        padding-inline: calc(var(--spacing) * 8);
      }
      @media (width >= 43rem) {
        padding-top: calc(var(--spacing) * 6);
      }
      @media (width >= 43rem) {
        padding-bottom: calc(var(--spacing) * 8);
      }
      border-top-left-radius: var(--box-radius);
      border-top-right-radius: var(--box-radius);
      font-size-adjust: 0.4;
    }
    .modal-body {
      flex-grow: 1;
      padding-inline: calc(var(--spacing) * 3);
      padding-top: calc(var(--spacing) * 10);
      padding-bottom: calc(var(--spacing) * 7);
      @media (width >= 43rem) {
        padding-inline: calc(var(--spacing) * 5);
      }
      @media (width >= 43rem) {
        padding-top: calc(var(--spacing) * 12);
      }
      @media (width >= 43rem) {
        padding-bottom: calc(var(--spacing) * 9);
      }
      @media (width >= 64rem) {
        padding-inline: calc(var(--spacing) * 7);
      }
      overflow-y: auto;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }
      border-radius: var(--box-radius);
    }
    .modal-footer {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--color-light);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 1);
      @media (width >= 43rem) {
        padding-inline: calc(var(--spacing) * 4.5);
      }
      background-color: color-mix(in srgb, #FCF3F3 40%, #FCF3F3);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-light) 40%, var(--color-light));
      }
      border-bottom-left-radius: var(--box-radius);
      border-bottom-right-radius: var(--box-radius);
      .modal-footer-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: calc(var(--spacing) * 2);
        padding-block: calc(var(--spacing) * 2);
        @media (width >= 43rem) {
          padding-block: calc(var(--spacing) * 2.5);
        }
      }
    }
    &.allow-dark {
      &:where(.dark, .dark *) {
        background-color: var(--color-dark);
      }
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      .modal-title {
        &:where(.dark, .dark *) {
          --tw-gradient-from: var(--color-dark);
          --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        }
      }
      .modal-footer {
        &:where(.dark, .dark *) {
          --tw-gradient-from: var(--color-dark);
          --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        }
      }
    }
  }
}
.modal-overlay {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--spacing) * 0);
  background-color: color-mix(in srgb, #ffffff 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
  }
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, #15101a 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-dark) 40%, transparent);
    }
  }
  z-index: 910;
}
.modal-overlay-white {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--spacing) * 0);
  background-color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-dark);
  }
  z-index: 910;
}
.modal-overlay-dark {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--spacing) * 0);
  background-color: var(--color-dark);
  z-index: 910;
}
.modal-overlay-blur {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--spacing) * 0);
  background-color: color-mix(in srgb, #ffffff 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
  }
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, #15101a 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-dark) 30%, transparent);
    }
  }
  backdrop-filter: var(--backdrop-effect, blur(4px));
  z-index: 910;
}
.modal-full {
  .modal-box {
    margin-inline: auto;
    height: 100vh;
    width: 100vw;
    border-radius: 0 !important;
  }
}
.modal-center, .modal-dialog, .modal-top, .modal-top-right, .modal-bottom, .modal-bottom-right, .modal-right, .modal-full-right, .modal-left, .modal-full-left {
  .modal-box {
    min-width: 300px;
    @media (width >= 43rem) {
      min-width: 400px;
    }
    max-width: 600px;
  }
}
.modal-center {
  justify-content: center;
  padding: calc(var(--spacing) * 2);
  @media (width >= 43rem) {
    padding: calc(var(--spacing) * 4);
  }
  @media (width >= 64rem) {
    padding: calc(var(--spacing) * 5);
  }
  .modal-box {
    max-height: min(500px, 80vh);
    @media (width >= 43rem) {
      max-height: min(600px, 70vh);
    }
  }
}
.modal-dialog {
  align-items: flex-end;
  justify-content: center;
  padding: calc(var(--spacing) * 0);
  .modal-box {
    max-height: min(400px, 70vh);
    border-top-left-radius: var(--radius-4xl) !important;
    border-top-right-radius: var(--radius-4xl) !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    box-shadow: 0px 0px 58px -15px var(--tw-shadow-color);
    transition: box-shadow 0.8s ease-in-out;
    --tw-shadow-color: #111111;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-brand) var(--tw-shadow-alpha), transparent);
    }
    @media (width >= 43rem) {
      max-height: min(550px, 70vh);
    }
    max-width: 660px;
    .modal-footer {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}
.modal-top {
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--spacing) * 2);
  @media (width >= 43rem) {
    padding: calc(var(--spacing) * 2);
  }
  @media (width >= 64rem) {
    padding: calc(var(--spacing) * 4);
  }
  .modal-box {
    max-height: min(350px, 80vh);
    @media (width >= 43rem) {
      max-height: min(450px, 70vh);
    }
  }
}
.modal-top-right {
  align-items: flex-start;
  justify-content: flex-end;
  padding: calc(var(--spacing) * 2);
  @media (width >= 43rem) {
    padding: calc(var(--spacing) * 4);
  }
  @media (width >= 64rem) {
    padding: calc(var(--spacing) * 5);
  }
  .modal-box {
    max-height: min(350px, 80vh);
    @media (width >= 43rem) {
      max-height: min(500px, 70vh);
    }
  }
}
.modal-bottom {
  align-items: flex-end;
  justify-content: center;
  padding: calc(var(--spacing) * 2);
  @media (width >= 43rem) {
    padding: calc(var(--spacing) * 2);
  }
  @media (width >= 64rem) {
    padding: calc(var(--spacing) * 4);
  }
  .modal-box {
    max-height: min(400px, 80vh);
    @media (width >= 43rem) {
      max-height: min(600px, 70vh);
    }
  }
}
.modal-bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
  padding: calc(var(--spacing) * 2);
  @media (width >= 43rem) {
    padding: calc(var(--spacing) * 4);
  }
  @media (width >= 64rem) {
    padding: calc(var(--spacing) * 5);
  }
  .modal-box {
    max-height: min(500px, 70vh);
  }
}
.modal-right {
  justify-content: flex-end;
  padding: calc(var(--spacing) * 2);
  @media (width >= 43rem) {
    padding: calc(var(--spacing) * 4);
  }
  @media (width >= 64rem) {
    padding: calc(var(--spacing) * 5);
  }
}
.modal-left {
  justify-content: flex-start;
  padding: calc(var(--spacing) * 2);
  @media (width >= 43rem) {
    padding: calc(var(--spacing) * 4);
  }
  @media (width >= 64rem) {
    padding: calc(var(--spacing) * 5);
  }
}
.modal-full-right {
  align-items: stretch;
  justify-content: flex-end;
  .modal-box {
    border-radius: 0 !important;
  }
}
.modal-full-left {
  align-items: stretch;
  justify-content: flex-start;
  .modal-box {
    border-radius: 0 !important;
  }
}
@keyframes toast-pop {
  10% {
    opacity: 0;
    scale: 0.90;
  }
  70% {
    scale: 1.02;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.toast {
  opacity: 0;
  scale: 0.90;
  pointer-events: auto;
  position: absolute;
  overflow: hidden;
  padding-top: calc(var(--spacing) * 3);
  padding-right: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 3.5);
  padding-left: calc(var(--spacing) * 2.5);
  word-break: break-all;
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  border-width: 1px;
  border-radius: calc(var(--box-radius) * 0.6);
  pointer-events: all;
  animation: toast-pop 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 99999;
  transition-property: all;
  transition-duration: 600ms;
  width: 98%;
  .toast-close {
    margin-left: calc(var(--spacing) * 1);
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    --tw-leading: 1;
    line-height: 1;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-light);
    opacity: 80%;
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
    width: 20px;
    height: 20px;
    svg {
      width: 16px;
      height: 16px;
    }
  }
  .btn {
    border-width: 0px !important;
  }
  .btn-toast {
    width: fit-content;
    letter-spacing: 0.01em;
    column-gap: 0.4em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      opacity: 60%;
    }
    border-radius: 0.5em;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .toast-progress {
    position: absolute;
    height: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-black);
    opacity: 0.2;
    left: 0;
    right: 0;
    bottom: 0;
    div {
      height: calc(var(--spacing) * 1);
      background-color: var(--color-white);
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 300ms;
      transition-duration: 300ms;
      width: 0%;
    }
  }
}
@layer base {
  .dropdown {
    isolation: auto;
    min-width: calc(var(--spacing) * 56);
    gap: calc(var(--spacing) * 1);
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #15101a 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-dark) 10%, transparent);
    }
    background-color: var(--color-white-dark);
    --tw-shadow-color: color-mix(in srgb, #000000 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-brand-600) 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 1.5);
    }
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #ffffff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    box-shadow: 0px 0px 10px -2px var(--tw-shadow-color);
    border-radius: var(--dropdown-radius);
    z-index: 100;
    transition-property: width, height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 350ms;
    .dropdown-title {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
      column-gap: calc(var(--spacing) * 1);
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--color-brand-600);
      background-color: var(--color-brand);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2.5);
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      @media (width >= 43rem) {
        padding-inline: calc(var(--spacing) * 4);
      }
      @media (width >= 43rem) {
        padding-block: calc(var(--spacing) * 3);
      }
    }
    .dropdown-body {
      width: 100%;
      flex-grow: 1;
      gap: calc(var(--spacing) * 1);
      padding: calc(var(--spacing) * 2);
      text-align: left;
      :is(& > *) {
        gap: calc(var(--spacing) * 1);
      }
      @media (width >= 43rem) {
        padding: calc(var(--spacing) * 2.5);
      }
    }
    .dropdown-footer {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      align-items: center;
      justify-content: flex-end;
      gap: calc(var(--spacing) * 2);
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      padding-inline: calc(var(--spacing) * 2);
      padding-block: calc(var(--spacing) * 1);
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      @media (width >= 43rem) {
        padding-inline: calc(var(--spacing) * 2.5);
      }
      @media (width >= 43rem) {
        padding-block: calc(var(--spacing) * 1.5);
      }
      background-color: color-mix(in srgb, #FCF3F3 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-light) 60%, transparent);
      }
      border-color: var(--color-light);
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #FCF3F3 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-light) 10%, transparent);
        }
        border-color: color-mix(in srgb, #FCF3F3 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-light) 20%, transparent);
        }
      }
    }
    span {
      --tw-leading: 1;
      line-height: 1;
    }
    img, svg {
      margin-left: calc(var(--spacing) * -1);
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
      flex: none;
      opacity: 80%;
    }
    .dropdown-item {
      display: flex;
      width: 100%;
      align-items: center;
      column-gap: calc(var(--spacing) * 1.5);
      border-style: var(--tw-border-style);
      border-width: 0px;
      padding-inline: calc(var(--spacing) * 2.5);
      padding-block: calc(var(--spacing) * 1.5);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      color: color-mix(in srgb, #595959 90%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-body) 90%, transparent);
      }
      &:where(.dark, .dark *) {
        color: color-mix(in srgb, #ffffff 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-white) 90%, transparent);
        }
      }
      border-radius: calc(var(--dropdown-radius) * 0.8);
      font-size: 0.94rem;
      max-width: 220px;
      cursor: pointer;
      &:hover {
        background-color: color-mix(in srgb, #FCF3F3 70%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-light) 70%, transparent);
        }
        --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:where(.dark, .dark *) {
        &:hover {
          background-color: color-mix(in srgb, #FCF3F3 8%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-light) 8%, transparent);
          }
        }
      }
    }
  }
}
.glightbox-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999 !important;
  overflow: hidden;
  touch-action: none;
  text-size-adjust: 100%;
  backface-visibility: hidden;
  outline: none;
  &.inactive {
    display: none;
  }
  & .gcontainer {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
  }
  .gslider {
    transition: transform 0.4s ease;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex !important;
    justify-content: center;
    align-items: center;
    transform: translate3d(0, 0, 0);
  }
  .gslide {
    width: 100%;
    position: absolute;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    &.current {
      opacity: 1;
      z-index: 99999;
      position: relative;
    }
    &.prev {
      opacity: 1;
      z-index: 9999;
    }
  }
  .gslide-inner-content {
    width: 100%;
  }
  .ginner-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 100%;
    margin: auto;
    height: 100vh;
    &.gvideo-container {
      width: 100%;
    }
    @media (width > 768px) {
      width: auto;
      height: auto;
      flex-direction: row;
    }
    &.desc-bottom, &.desc-top {
      flex-direction: column;
    }
    &.desc-left, &.desc-right {
      max-width: 100% !important;
    }
    &.desc-top {
      @media (width > 768px) {
        .gslide-description {
          order: 0;
        }
        .gslide-image, .gslide-image img {
          order: 1;
        }
      }
    }
    &.desc-left {
      @media (width > 768px) {
        .gslide-description {
          order: 0;
        }
        .gslide-image {
          order: 1;
        }
      }
    }
  }
}
.gslide {
  iframe, video {
    outline: none !important;
    border: none;
    min-height: 165px;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
  }
}
.gslide:not(.current) {
  pointer-events: none;
}
.gslide-image {
  align-items: center;
  img {
    max-height: 100vh;
    display: block;
    padding: 0;
    float: none;
    outline: none;
    border: none;
    user-select: none;
    max-width: 100vw;
    width: auto;
    height: auto;
    object-fit: cover;
    touch-action: none;
    margin: auto;
    min-width: 200px;
    @media (width > 768px) {
      max-height: 97vh;
      max-width: 100%;
    }
    .desc-top &, .desc-bottom & {
      width: auto;
    }
    .desc-left &, .desc-right & {
      width: auto;
      max-width: 100%;
    }
    &.zoomable {
      position: relative;
      @media (width > 768px) {
        cursor: zoom-in;
        .zoomed & {
          cursor: grab;
        }
      }
    }
    &.dragging {
      cursor: grabbing !important;
      transition: none;
    }
  }
}
.gslide-video {
  position: relative;
  max-width: 100vh;
  width: 100% !important;
  .plyr__poster-enabled.plyr--loading {
    .plyr__poster {
      display: none;
    }
  }
  .gvideo-wrapper {
    width: 100%;
    margin: auto;
  }
  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 0, 0, 0.34);
    display: none;
  }
  &.playing::before {
    display: none;
  }
  &.fullscreen {
    max-width: 100% !important;
    min-width: 100%;
    height: 75vh;
    video {
      max-width: 100% !important;
      width: 100% !important;
    }
  }
}
.gslide-inline {
  background: #fff;
  text-align: left;
  max-height: calc(100vh - 40px);
  overflow: auto;
  max-width: 100%;
  margin: auto;
  @media (width > 768px) {
    max-height: 95vh;
  }
  .ginlined-content {
    padding: 20px;
    width: 100%;
  }
  .dragging {
    cursor: grabbing !important;
    transition: none;
  }
}
.ginlined-content {
  overflow: auto;
  display: block !important;
  opacity: 1;
}
.gslide-external {
  display: flex;
  width: 100%;
  min-width: 100%;
  background: #fff;
  padding: 0;
  overflow: auto;
  max-height: 75vh;
  height: 100%;
  @media (width > 768px) {
    max-height: 100vh;
  }
}
.gslide-media {
  display: flex;
  width: auto;
  .zoomed & {
    box-shadow: none !important;
  }
  .desc-top &, .desc-bottom & {
    margin: 0 auto;
    flex-direction: column;
  }
}
.gslide-description {
  position: relative;
  flex: 1 0 100%;
  &.description-left, &.description-right {
    max-width: 100%;
    @media (width > 768px) {
      max-width: 275px;
    }
  }
  &.description-bottom, &.description-top {
    margin: 0 auto;
    width: 100%;
  }
  p {
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .zoomed & {
    display: none;
  }
}
.glightbox-button-hidden {
  display: none;
}
.glightbox-mobile .glightbox-container {
  .gslide-description {
    height: auto !important;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 19px 11px;
    max-width: 100vw !important;
    order: 2 !important;
    max-height: 78vh;
    overflow: auto !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
    transition: opacity 0.3s linear;
    padding-bottom: 50px;
  }
  .gslide-title {
    color: #fff;
    font-size: 1em;
  }
  .gslide-desc {
    color: #a1a1a1;
    a {
      color: #fff;
      font-weight: bold;
    }
    * {
      color: inherit;
    }
    .desc-more {
      color: #fff;
      opacity: 0.4;
    }
  }
}
.gdesc-open {
  .gslide-media {
    transition: opacity 0.5s ease;
    opacity: 0.4;
  }
  .gdesc-inner {
    padding-bottom: 30px;
  }
}
.gdesc-closed {
  .gslide-media {
    transition: opacity 0.5s ease;
    opacity: 1;
  }
}
.greset {
  transition: all 0.3s ease;
}
.gabsolute {
  position: absolute;
}
.grelative {
  position: relative;
}
.glightbox-desc {
  display: none !important;
}
.glightbox-open {
  overflow: hidden;
  @media (width > 768px) {
    height: auto;
  }
}
.gloader {
  height: 25px;
  width: 25px;
  animation: lightboxLoader 0.8s infinite linear;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  display: block;
  z-index: 9999;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 47%;
}
.goverlay {
  width: 100%;
  height: calc(100vh + 1px);
  position: fixed;
  top: -1px;
  left: 0;
  background: #000;
  will-change: opacity;
  .glightbox-mobile & {
    background: #000;
  }
  @media (width > 768px) {
    background: rgba(0, 0, 0, 0.92);
  }
  @media screen and (max-height: 420px) {
    background: #000;
  }
}
.gprev, .gnext, .gclose {
  z-index: 99999;
  cursor: pointer;
  width: 26px;
  height: 44px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  svg {
    display: block;
    width: 25px;
    height: auto;
    margin: 0;
    padding: 0;
  }
  &.disabled {
    opacity: 0.1;
  }
  .garrow {
    stroke: #fff;
  }
}
.gbtn.focused {
  outline: 2px solid #0f3d81;
}
iframe.wait-autoplay {
  opacity: 0;
}
.glightbox-closing {
  .gnext, .gprev, .gclose {
    opacity: 0 !important;
  }
}
.glightbox-clean {
  .gslide-media {
    @media (width > 768px) {
      box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
    }
  }
  .gslide-description {
    background: #fff;
  }
  .gdesc-inner {
    padding: 22px 20px;
  }
  @media (width > 768px) {
    .description-left, .description-right {
      .gdesc-inner {
        position: absolute;
        height: 100%;
        overflow-y: auto;
      }
    }
  }
  .gslide-title {
    font-size: 1em;
    font-weight: normal;
    color: #000;
    margin-bottom: 19px;
    line-height: 1.4em;
  }
  .gslide-desc {
    font-size: 0.86em;
    margin-bottom: 0;
    line-height: 1.4em;
  }
  .gslide-video {
    background: #000;
  }
  .gprev, .gnext, .gclose {
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 4px;
    @media (width > 768px) {
      background-color: rgba(0, 0, 0, 0.32);
      &:hover {
        background-color: rgba(0, 0, 0, 0.7);
      }
    }
    path {
      fill: #fff;
    }
  }
  .gprev {
    position: absolute;
    top: -100%;
    left: 30px;
    width: 40px;
    height: 50px;
    @media (width > 768px) {
      top: 45%;
    }
  }
  .gnext {
    position: absolute;
    top: -100%;
    right: 30px;
    width: 40px;
    height: 50px;
    @media (width > 768px) {
      top: 45%;
    }
  }
  .gclose {
    width: 35px;
    height: 35px;
    top: 15px;
    right: 10px;
    position: absolute;
    svg {
      width: 18px;
      height: auto;
    }
    @media (width > 768px) {
      opacity: 0.7;
      right: 20px;
    }
    &:hover {
      opacity: 1;
    }
  }
}
.gfadeIn {
  animation: gfadeIn 0.5s ease;
}
.gfadeOut {
  animation: gfadeOut 0.5s ease;
}
.gslideOutLeft {
  animation: gslideOutLeft 0.3s ease;
}
.gslideInLeft {
  animation: gslideInLeft 0.3s ease;
}
.gslideOutRight {
  animation: gslideOutRight 0.3s ease;
}
.gslideInRight {
  animation: gslideInRight 0.3s ease;
}
.gzoomIn {
  animation: gzoomIn 0.5s ease;
}
.gzoomOut {
  animation: gzoomOut 0.5s ease;
}
@keyframes lightboxLoader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes gslideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-60%, 0, 0);
  }
  to {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes gslideOutLeft {
  from {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes gslideInRight {
  from {
    opacity: 0;
    visibility: visible;
    transform: translate3d(60%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes gslideOutRight {
  from {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(60%, 0, 0);
    opacity: 0;
  }
}
@keyframes gzoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
}
@keyframes gzoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes plyr-progress {
  to {
    background-position: 25px 0;
    background-position: var(--plyr-progress-loading-size,25px) 0;
  }
}
@keyframes plyr-popup {
  0% {
    opacity: .5;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes plyr-fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.plyr {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  align-items: center;
  direction: ltr;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  font-family: var(--plyr-font-family,inherit);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular,400);
  line-height: 1.7;
  line-height: var(--plyr-line-height,1.7);
  max-width: 100%;
  min-width: 200px;
  position: relative;
  text-shadow: none;
  transition: box-shadow .3s ease;
  z-index: 0;
}
.plyr audio,.plyr iframe,.plyr video {
  display: block;
  height: 100%;
  width: 100%;
}
.plyr button {
  font: inherit;
  line-height: inherit;
  width: auto;
}
.plyr:focus {
  outline: 0;
}
.plyr--full-ui {
  box-sizing: border-box;
}
.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before {
  box-sizing: inherit;
}
.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label {
  touch-action: manipulation;
}
.plyr__badge {
  background: #4a5464;
  background: var(--plyr-badge-background,#4a5464);
  border-radius: 2px;
  border-radius: var(--plyr-badge-border-radius,2px);
  color: #fff;
  color: var(--plyr-badge-text-color,#fff);
  font-size: 9px;
  font-size: var(--plyr-font-size-badge,9px);
  line-height: 1;
  padding: 3px 4px;
}
.plyr--full-ui ::-webkit-media-text-track-container {
  display: none;
}
.plyr__captions {
  animation: plyr-fade-in .3s ease;
  bottom: 0;
  display: none;
  font-size: 13px;
  font-size: var(--plyr-font-size-small,13px);
  left: 0;
  padding: 10px;
  padding: var(--plyr-control-spacing,10px);
  position: absolute;
  text-align: center;
  transition: transform .4s ease-in-out;
  width: 100%;
}
.plyr__captions span:empty {
  display: none;
}
@media (min-width:480px) {
  .plyr__captions {
    font-size: 15px;
    font-size: var(--plyr-font-size-base,15px);
    padding: 20px;
    padding: calc(var(--plyr-control-spacing, 10px)*2);
  }
}
@media (min-width:768px) {
  .plyr__captions {
    font-size: 18px;
    font-size: var(--plyr-font-size-large,18px);
  }
}
.plyr--captions-active .plyr__captions {
  display: block;
}
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions {
  transform: translateY(-40px);
  transform: translateY(calc(var(--plyr-control-spacing, 10px)*-4));
}
.plyr__caption {
  background: #000c;
  background: var(--plyr-captions-background,#000c);
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #fff;
  color: var(--plyr-captions-text-color,#fff);
  line-height: 185%;
  padding: .2em .5em;
  white-space: pre-wrap;
}
.plyr__caption div {
  display: inline;
}
.plyr__control {
  background: #0000;
  border: 0;
  border-radius: 4px;
  border-radius: var(--plyr-control-radius,4px);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  padding: 7px;
  padding: calc(var(--plyr-control-spacing, 10px)*.7);
  position: relative;
  transition: all .3s ease;
}
.plyr__control svg {
  fill: currentColor;
  display: block;
  height: 18px;
  height: var(--plyr-control-icon-size,18px);
  pointer-events: none;
  width: 18px;
  width: var(--plyr-control-icon-size,18px);
}
.plyr__control:focus {
  outline: 0;
}
.plyr__control:focus-visible {
  outline: 2px dashed #00b2ff;
  outline: 2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));
  outline-offset: 2px;
}
a.plyr__control {
  text-decoration: none;
}
.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before {
  display: none;
}
.plyr--full-ui ::-webkit-media-controls {
  display: none;
}
.plyr__controls {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  text-align: center;
}
.plyr__controls .plyr__progress__container {
  flex: 1;
  min-width: 0;
}
.plyr__controls .plyr__controls__item {
  margin-left: 2.5px;
  margin-left: calc(var(--plyr-control-spacing, 10px)/4);
}
.plyr__controls .plyr__controls__item:first-child {
  margin-left: 0;
  margin-right: auto;
}
.plyr__controls .plyr__controls__item.plyr__progress__container {
  padding-left: 2.5px;
  padding-left: calc(var(--plyr-control-spacing, 10px)/4);
}
.plyr__controls .plyr__controls__item.plyr__time {
  padding: 0 5px;
  padding: 0 calc(var(--plyr-control-spacing, 10px)/2);
}
.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child {
  padding-left: 0;
}
.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty {
  display: none;
}
.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip] {
  display: inline-block;
}
.plyr__menu {
  display: flex;
  position: relative;
}
.plyr__menu .plyr__control svg {
  transition: transform .3s ease;
}
.plyr__menu .plyr__control[aria-expanded=true] svg {
  transform: rotate(90deg);
}
.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
  display: none;
}
.plyr__menu__container {
  animation: plyr-popup .2s ease;
  background: #ffffffe6;
  background: var(--plyr-menu-background,#ffffffe6);
  border-radius: 8px;
  border-radius: var(--plyr-menu-radius,8px);
  bottom: 100%;
  box-shadow: 0 1px 2px #00000026;
  box-shadow: var(--plyr-menu-shadow,0 1px 2px #00000026);
  color: #4a5464;
  color: var(--plyr-menu-color,#4a5464);
  font-size: 15px;
  font-size: var(--plyr-font-size-base,15px);
  margin-bottom: 10px;
  position: absolute;
  right: -3px;
  text-align: left;
  white-space: nowrap;
  z-index: 3;
}
.plyr__menu__container>div {
  overflow: hidden;
  transition: height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);
}
.plyr__menu__container:after {
  border: 4px solid #0000;
  border-top-color: #ffffffe6;
  border: var(--plyr-menu-arrow-size,4px) solid #0000;
  border-top-color: var(--plyr-menu-background,#ffffffe6);
  content: "";
  height: 0;
  position: absolute;
  right: 14px;
  right: calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7 - var(--plyr-menu-arrow-size, 4px)/2);
  top: 100%;
  width: 0;
}
.plyr__menu__container [role=menu] {
  padding: 7px;
  padding: calc(var(--plyr-control-spacing, 10px)*.7);
}
.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio] {
  margin-top: 2px;
}
.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child {
  margin-top: 0;
}
.plyr__menu__container .plyr__control {
  align-items: center;
  color: #4a5464;
  color: var(--plyr-menu-color,#4a5464);
  display: flex;
  font-size: 13px;
  font-size: var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));
  padding: 4.66667px 10.5px;
  padding: calc(var(--plyr-control-spacing, 10px)*.7/1.5) calc(var(--plyr-control-spacing, 10px)*.7*1.5);
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
}
.plyr__menu__container .plyr__control>span {
  align-items: inherit;
  display: flex;
  width: 100%;
}
.plyr__menu__container .plyr__control:after {
  border: 4px solid #0000;
  border: var(--plyr-menu-item-arrow-size,4px) solid #0000;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.plyr__menu__container .plyr__control--forward {
  padding-right: 28px;
  padding-right: calc(var(--plyr-control-spacing, 10px)*.7*4);
}
.plyr__menu__container .plyr__control--forward:after {
  border-left-color: #728197;
  border-left-color: var(--plyr-menu-arrow-color,#728197);
  right: 6.5px;
  right: calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px));
}
.plyr__menu__container .plyr__control--forward:focus-visible:after,.plyr__menu__container .plyr__control--forward:hover:after {
  border-left-color: initial;
}
.plyr__menu__container .plyr__control--back {
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular,400);
  margin: 7px;
  margin: calc(var(--plyr-control-spacing, 10px)*.7);
  margin-bottom: 3.5px;
  margin-bottom: calc(var(--plyr-control-spacing, 10px)*.7/2);
  padding-left: 28px;
  padding-left: calc(var(--plyr-control-spacing, 10px)*.7*4);
  position: relative;
  width: calc(100% - 14px);
  width: calc(100% - var(--plyr-control-spacing, 10px)*.7*2);
}
.plyr__menu__container .plyr__control--back:after {
  border-right-color: #728197;
  border-right-color: var(--plyr-menu-arrow-color,#728197);
  left: 6.5px;
  left: calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px));
}
.plyr__menu__container .plyr__control--back:before {
  background: #dcdfe5;
  background: var(--plyr-menu-back-border-color,#dcdfe5);
  box-shadow: 0 1px 0 #fff;
  box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);
  content: "";
  height: 1px;
  left: 0;
  margin-top: 3.5px;
  margin-top: calc(var(--plyr-control-spacing, 10px)*.7/2);
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
}
.plyr__menu__container .plyr__control--back:focus-visible:after,.plyr__menu__container .plyr__control--back:hover:after {
  border-right-color: initial;
}
.plyr__menu__container .plyr__control[role=menuitemradio] {
  padding-left: 7px;
  padding-left: calc(var(--plyr-control-spacing, 10px)*.7);
}
.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before {
  border-radius: 100%;
}
.plyr__menu__container .plyr__control[role=menuitemradio]:before {
  background: #0000001a;
  content: "";
  display: block;
  flex-shrink: 0;
  height: 16px;
  margin-right: 10px;
  margin-right: var(--plyr-control-spacing,10px);
  transition: all .3s ease;
  width: 16px;
}
.plyr__menu__container .plyr__control[role=menuitemradio]:after {
  background: #fff;
  border: 0;
  height: 6px;
  left: 12px;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform .3s ease,opacity .3s ease;
  width: 6px;
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {
  background: #00b2ff;
  background: var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before {
  background: #23282f1a;
}
.plyr__menu__container .plyr__menu__value {
  align-items: center;
  display: flex;
  margin-left: auto;
  margin-right: -5px;
  margin-right: calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2px);
  overflow: hidden;
  padding-left: 24.5px;
  padding-left: calc(var(--plyr-control-spacing, 10px)*.7*3.5);
  pointer-events: none;
}
.plyr--full-ui input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: #0000;
  border: 0;
  border-radius: 26px;
  border-radius: calc(var(--plyr-range-thumb-height, 13px)*2);
  color: #00b2ff;
  color: var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));
  display: block;
  height: 19px;
  height: calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));
  margin: 0;
  min-width: 0;
  padding: 0;
  transition: box-shadow .3s ease;
  width: 100%;
}
.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
  background: #0000;
  background-image: linear-gradient(90deg,currentColor 0,#0000 0);
  background-image: linear-gradient(to right,currentColor var(--value,0),#0000 var(--value,0));
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px)/2);
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  -webkit-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  -webkit-user-select: none;
  user-select: none;
}
.plyr--full-ui input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  background: var(--plyr-range-thumb-background,#fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px #23282f26,0 0 0 1px #23282f33;
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);
  height: 13px;
  height: var(--plyr-range-thumb-height,13px);
  margin-top: -4px;
  margin-top: calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px))/2*-1);
  position: relative;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height,13px);
}
.plyr--full-ui input[type=range]::-moz-range-track {
  background: #0000;
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px)/2);
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  -moz-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  user-select: none;
}
.plyr--full-ui input[type=range]::-moz-range-thumb {
  background: #fff;
  background: var(--plyr-range-thumb-background,#fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px #23282f26,0 0 0 1px #23282f33;
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);
  height: 13px;
  height: var(--plyr-range-thumb-height,13px);
  position: relative;
  -moz-transition: all .2s ease;
  transition: all .2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height,13px);
}
.plyr--full-ui input[type=range]::-moz-range-progress {
  background: currentColor;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px)/2);
  height: 5px;
  height: var(--plyr-range-track-height,5px);
}
.plyr--full-ui input[type=range]::-ms-track {
  color: #0000;
}
.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track {
  background: #0000;
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px)/2);
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  -ms-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  user-select: none;
}
.plyr--full-ui input[type=range]::-ms-fill-lower {
  background: #0000;
  background: currentColor;
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px)/2);
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  -ms-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  user-select: none;
}
.plyr--full-ui input[type=range]::-ms-thumb {
  background: #fff;
  background: var(--plyr-range-thumb-background,#fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px #23282f26,0 0 0 1px #23282f33;
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);
  height: 13px;
  height: var(--plyr-range-thumb-height,13px);
  margin-top: 0;
  position: relative;
  -ms-transition: all .2s ease;
  transition: all .2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height,13px);
}
.plyr--full-ui input[type=range]::-ms-tooltip {
  display: none;
}
.plyr--full-ui input[type=range]::-moz-focus-outer {
  border: 0;
}
.plyr--full-ui input[type=range]:focus {
  outline: 0;
}
.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track {
  outline: 2px dashed #00b2ff;
  outline: 2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));
  outline-offset: 2px;
}
.plyr--full-ui input[type=range]:focus-visible::-moz-range-track {
  outline: 2px dashed #00b2ff;
  outline: 2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));
  outline-offset: 2px;
}
.plyr--full-ui input[type=range]:focus-visible::-ms-track {
  outline: 2px dashed #00b2ff;
  outline: 2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));
  outline-offset: 2px;
}
.plyr__poster {
  background-color: #000;
  background-color: var(--plyr-video-background,var(--plyr-video-background,#000));
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity .2s ease;
  width: 100%;
  z-index: 1;
}
.plyr--stopped.plyr__poster-enabled .plyr__poster {
  opacity: 1;
}
.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {
  display: none;
}
.plyr__time {
  font-size: 13px;
  font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px));
}
.plyr__time+.plyr__time:before {
  content: "⁄";
  margin-right: 10px;
  margin-right: var(--plyr-control-spacing,10px);
}
@media (max-width:767px) {
  .plyr__time+.plyr__time {
    display: none;
  }
}
.plyr__tooltip {
  background: #fff;
  background: var(--plyr-tooltip-background,#fff);
  border-radius: 5px;
  border-radius: var(--plyr-tooltip-radius,5px);
  bottom: 100%;
  box-shadow: 0 1px 2px #00000026;
  box-shadow: var(--plyr-tooltip-shadow,0 1px 2px #00000026);
  color: #4a5464;
  color: var(--plyr-tooltip-color,#4a5464);
  font-size: 13px;
  font-size: var(--plyr-font-size-small,13px);
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular,400);
  left: 50%;
  line-height: 1.3;
  margin-bottom: 10px;
  margin-bottom: calc(var(--plyr-control-spacing, 10px)/2*2);
  opacity: 0;
  padding: 5px 7.5px;
  padding: calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);
  pointer-events: none;
  position: absolute;
  transform: translate(-50%,10px) scale(.8);
  transform-origin: 50% 100%;
  transition: transform .2s ease .1s,opacity .2s ease .1s;
  white-space: nowrap;
  z-index: 2;
}
.plyr__tooltip:before {
  border-left: 4px solid #0000;
  border-left: var(--plyr-tooltip-arrow-size,4px) solid #0000;
  border-right: 4px solid #0000;
  border-right: var(--plyr-tooltip-arrow-size,4px) solid #0000;
  border-top: 4px solid #fff;
  border-top: var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);
  bottom: -4px;
  bottom: calc(var(--plyr-tooltip-arrow-size, 4px)*-1);
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2;
}
.plyr .plyr__control:focus-visible .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible {
  opacity: 1;
  transform: translate(-50%) scale(1);
}
.plyr .plyr__control:hover .plyr__tooltip {
  z-index: 3;
}
.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip {
  left: 0;
  transform: translateY(10px) scale(.8);
  transform-origin: 0 100%;
}
.plyr__controls>.plyr__control:first-child .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before {
  left: 16px;
  left: calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);
}
.plyr__controls>.plyr__control:last-child .plyr__tooltip {
  left: auto;
  right: 0;
  transform: translateY(10px) scale(.8);
  transform-origin: 100% 100%;
}
.plyr__controls>.plyr__control:last-child .plyr__tooltip:before {
  left: auto;
  right: 16px;
  right: calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);
  transform: translateX(50%);
}
.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip {
  transform: translate(0) scale(1);
}
.plyr__progress {
  left: 6.5px;
  left: calc(var(--plyr-range-thumb-height, 13px)*.5);
  margin-right: 13px;
  margin-right: var(--plyr-range-thumb-height,13px);
  position: relative;
}
.plyr__progress input[type=range],.plyr__progress__buffer {
  margin-left: -6.5px;
  margin-left: calc(var(--plyr-range-thumb-height, 13px)*-.5);
  margin-right: -6.5px;
  margin-right: calc(var(--plyr-range-thumb-height, 13px)*-.5);
  width: calc(100% + 13px);
  width: calc(100% + var(--plyr-range-thumb-height, 13px));
}
.plyr__progress input[type=range] {
  position: relative;
  z-index: 2;
}
.plyr__progress .plyr__tooltip {
  left: 0;
  max-width: 120px;
  overflow-wrap: break-word;
}
.plyr__progress__buffer {
  -webkit-appearance: none;
  background: #0000;
  border: 0;
  border-radius: 100px;
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  left: 0;
  margin-top: -2.5px;
  margin-top: calc((var(--plyr-range-track-height, 5px)/2)*-1);
  padding: 0;
  position: absolute;
  top: 50%;
}
.plyr__progress__buffer::-webkit-progress-bar {
  background: #0000;
}
.plyr__progress__buffer::-webkit-progress-value {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  min-width: var(--plyr-range-track-height,5px);
  -webkit-transition: width .2s ease;
  transition: width .2s ease;
}
.plyr__progress__buffer::-moz-progress-bar {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  min-width: var(--plyr-range-track-height,5px);
  -moz-transition: width .2s ease;
  transition: width .2s ease;
}
.plyr__progress__buffer::-ms-fill {
  border-radius: 100px;
  -ms-transition: width .2s ease;
  transition: width .2s ease;
}
.plyr--loading .plyr__progress__buffer {
  animation: plyr-progress 1s linear infinite;
  background-image: linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);
  background-image: linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);
  background-repeat: repeat-x;
  background-size: 25px 25px;
  background-size: var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);
  color: #0000;
}
.plyr--video.plyr--loading .plyr__progress__buffer {
  background-color: #ffffff40;
  background-color: var(--plyr-video-progress-buffered-background,#ffffff40);
}
.plyr--audio.plyr--loading .plyr__progress__buffer {
  background-color: #c1c8d199;
  background-color: var(--plyr-audio-progress-buffered-background,#c1c8d199);
}
.plyr__progress__marker {
  background-color: #fff;
  background-color: var(--plyr-progress-marker-background,#fff);
  border-radius: 1px;
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 3px;
  width: var(--plyr-progress-marker-width,3px);
  z-index: 3;
}
.plyr__volume {
  align-items: center;
  display: flex;
  position: relative;
}
.plyr__volume input[type=range] {
  margin-left: 5px;
  margin-left: calc(var(--plyr-control-spacing, 10px)/2);
  margin-right: 5px;
  margin-right: calc(var(--plyr-control-spacing, 10px)/2);
  max-width: 90px;
  min-width: 60px;
  position: relative;
  z-index: 2;
}
.plyr--audio {
  display: block;
}
.plyr--audio .plyr__controls {
  background: #fff;
  background: var(--plyr-audio-controls-background,#fff);
  border-radius: inherit;
  color: #4a5464;
  color: var(--plyr-audio-control-color,#4a5464);
  padding: 10px;
  padding: var(--plyr-control-spacing,10px);
}
.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true] {
  background: #00b2ff;
  background: var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));
  color: #fff;
  color: var(--plyr-audio-control-color-hover,#fff);
}
.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
  background-color: #c1c8d199;
  background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199));
}
.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
  background-color: #c1c8d199;
  background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199));
}
.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
  background-color: #c1c8d199;
  background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199));
}
.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a);
}
.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a);
}
.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a);
}
.plyr--audio .plyr__progress__buffer {
  color: #c1c8d199;
  color: var(--plyr-audio-progress-buffered-background,#c1c8d199);
}
.plyr--video {
  overflow: hidden;
}
.plyr--video.plyr--menu-open {
  overflow: visible;
}
.plyr__video-wrapper {
  background: #000;
  background: var(--plyr-video-background,var(--plyr-video-background,#000));
  border-radius: inherit;
  height: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.plyr__video-embed,.plyr__video-wrapper--fixed-ratio {
  aspect-ratio: 16/9;
}
@supports not (aspect-ratio:16/9) {
  .plyr__video-embed,.plyr__video-wrapper--fixed-ratio {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
  }
}
.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container {
  padding-bottom: 240%;
  position: relative;
  transform: translateY(-38.28125%);
}
.plyr--video .plyr__controls {
  background: linear-gradient(#0000,#000000bf);
  background: var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  bottom: 0;
  color: #fff;
  color: var(--plyr-video-control-color,#fff);
  left: 0;
  padding: 5px;
  padding: calc(var(--plyr-control-spacing, 10px)/2);
  padding-top: 20px;
  padding-top: calc(var(--plyr-control-spacing, 10px)*2);
  position: absolute;
  right: 0;
  transition: opacity .4s ease-in-out,transform .4s ease-in-out;
  z-index: 3;
}
@media (min-width:480px) {
  .plyr--video .plyr__controls {
    padding: 10px;
    padding: var(--plyr-control-spacing,10px);
    padding-top: 35px;
    padding-top: calc(var(--plyr-control-spacing, 10px)*3.5);
  }
}
.plyr--video.plyr--hide-controls .plyr__controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}
.plyr--video .plyr__control:focus-visible,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true] {
  background: #00b2ff;
  background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));
  color: #fff;
  color: var(--plyr-video-control-color-hover,#fff);
}
.plyr__control--overlaid {
  background: #00b2ff;
  background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));
  border: 0;
  border-radius: 100%;
  color: #fff;
  color: var(--plyr-video-control-color,#fff);
  display: none;
  left: 50%;
  opacity: .9;
  padding: 15px;
  padding: calc(var(--plyr-control-spacing, 10px)*1.5);
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: .3s;
  z-index: 2;
}
.plyr__control--overlaid svg {
  left: 2px;
  position: relative;
}
.plyr__control--overlaid:focus,.plyr__control--overlaid:hover {
  opacity: 1;
}
.plyr--playing .plyr__control--overlaid {
  opacity: 0;
  visibility: hidden;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid {
  display: block;
}
.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
  background-color: #ffffff40;
  background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40));
}
.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
  background-color: #ffffff40;
  background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40));
}
.plyr--full-ui.plyr--video input[type=range]::-ms-track {
  background-color: #ffffff40;
  background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40));
}
.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80);
}
.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80);
}
.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80);
}
.plyr--video .plyr__progress__buffer {
  color: #ffffff40;
  color: var(--plyr-video-progress-buffered-background,#ffffff40);
}
.plyr:fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}
.plyr:fullscreen video {
  height: 100%;
}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg {
  display: none;
}
.plyr:fullscreen.plyr--hide-controls {
  cursor: none;
}
@media (min-width:1024px) {
  .plyr:fullscreen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge,21px);
  }
}
.plyr--fullscreen-fallback {
  background: #000;
  border-radius: 0 !important;
  bottom: 0;
  height: 100%;
  left: 0;
  margin: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 10000000;
}
.plyr--fullscreen-fallback video {
  height: 100%;
}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
  display: block;
}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg {
  display: none;
}
.plyr--fullscreen-fallback.plyr--hide-controls {
  cursor: none;
}
@media (min-width:1024px) {
  .plyr--fullscreen-fallback .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge,21px);
  }
}
.plyr__ads {
  border-radius: inherit;
  bottom: 0;
  cursor: pointer;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.plyr__ads>div,.plyr__ads>div iframe {
  height: 100%;
  position: absolute;
  width: 100%;
}
.plyr__ads:after {
  background: #23282f;
  border-radius: 2px;
  bottom: 10px;
  bottom: var(--plyr-control-spacing,10px);
  color: #fff;
  content: attr(data-badge-text);
  font-size: 11px;
  padding: 2px 6px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  right: var(--plyr-control-spacing,10px);
  z-index: 3;
}
.plyr__ads:empty:after {
  display: none;
}
.plyr__cues {
  background: currentColor;
  display: block;
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  left: 0;
  opacity: .8;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  z-index: 3;
}
.plyr__preview-thumb {
  background-color: #fff;
  background-color: var(--plyr-tooltip-background,#fff);
  border-radius: 8px;
  border-radius: var(--plyr-menu-radius,8px);
  bottom: 100%;
  box-shadow: 0 1px 2px #00000026;
  box-shadow: var(--plyr-tooltip-shadow,0 1px 2px #00000026);
  margin-bottom: 10px;
  margin-bottom: calc(var(--plyr-control-spacing, 10px)/2*2);
  opacity: 0;
  padding: 3px;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px) scale(.8);
  transform-origin: 50% 100%;
  transition: transform .2s ease .1s,opacity .2s ease .1s;
  z-index: 2;
}
.plyr__preview-thumb--is-shown {
  opacity: 1;
  transform: translate(0) scale(1);
}
.plyr__preview-thumb:before {
  border-left: 4px solid #0000;
  border-left: var(--plyr-tooltip-arrow-size,4px) solid #0000;
  border-right: 4px solid #0000;
  border-right: var(--plyr-tooltip-arrow-size,4px) solid #0000;
  border-top: 4px solid #fff;
  border-top: var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);
  bottom: -4px;
  bottom: calc(var(--plyr-tooltip-arrow-size, 4px)*-1);
  content: "";
  height: 0;
  left: calc(50% + var(--preview-arrow-offset));
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2;
}
.plyr__preview-thumb__image-container {
  background: #c1c8d1;
  border-radius: 7px;
  border-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.plyr__preview-thumb__image-container img,.plyr__preview-thumb__image-container:after {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.plyr__preview-thumb__image-container:after {
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #00000026;
  content: "";
  pointer-events: none;
}
.plyr__preview-thumb__image-container img {
  max-height: none;
  max-width: none;
}
.plyr__preview-thumb__time-container {
  background: linear-gradient(#0000,#000000bf);
  background: var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));
  border-bottom-left-radius: 7px;
  border-bottom-left-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
  border-bottom-right-radius: 7px;
  border-bottom-right-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
  bottom: 0;
  left: 0;
  line-height: 1.1;
  padding: 20px 6px 6px;
  position: absolute;
  right: 0;
  z-index: 3;
}
.plyr__preview-thumb__time-container span {
  color: #fff;
  font-size: 13px;
  font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px));
}
.plyr__preview-scrubbing {
  bottom: 0;
  filter: blur(1px);
  height: 100%;
  left: 0;
  margin: auto;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .3s ease;
  width: 100%;
  z-index: 1;
}
.plyr__preview-scrubbing--is-shown {
  opacity: 1;
}
.plyr__preview-scrubbing img {
  height: 100%;
  left: 0;
  max-height: none;
  max-width: none;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%;
}
.plyr--no-transition {
  transition: none !important;
}
.plyr__sr-only {
  clip: rect(1px,1px,1px,1px);
  border: 0 !important;
  height: 1px !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}
.plyr [hidden] {
  display: none !important;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scroll {
  0% {
    opacity: 0;
    transform: translateX(-5%);
  }
  3% {
    opacity: 1;
  }
  97% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-95%);
  }
}
.animate-pop-pulse {
  position: relative;
  animation: popPulse 2s ease-out infinite;
}
.animate-pop-pulse::after, .animate-pop-pulse::before {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  content: "";
  z-index: -1;
  animation: popPulseWave 1s ease-out 0.5s infinite;
}
@keyframes popPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 2px var(--btn-color, #111111), inset 0 0 2px var(--btn-color, #111111);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 2px color-mix(in srgb, var(--btn-color, var(--color-brand)) 65%, transparent), inset 0 0 2px color-mix(in srgb, var(--btn-color, var(--color-brand)) 95%, transparent);
    }
  }
  90% {
    transform: scale(0.95);
    box-shadow: 0 0 14px var(--btn-color, #111111), inset 0 0 14px var(--btn-color, #111111);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 14px color-mix(in srgb, var(--btn-color, var(--color-brand)) 15%, transparent), inset 0 0 14px color-mix(in srgb, var(--btn-color, var(--color-brand)) 15%, transparent);
    }
  }
  100% {
    transform: scale(1);
  }
}
@keyframes popPulseWave {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
  50% {
    transform: scale(0.98);
  }
  55% {
    transform: scale(1.02);
  }
  60% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .animate-pop-pulse, .animate-pop-pulse::before, .animate-pop-pulse::after {
    animation: none !important;
  }
}
.hover-zoom {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  will-change: transform;
  &:hover {
    @media (hover: hover) {
      --tw-scale-x: 103%;
      --tw-scale-y: 103%;
      --tw-scale-z: 103%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
}
.bg-zoom {
  transition: background-size .3s ease-in-out;
  background-size: 100%;
  &:hover {
    background-size: var(--distance, 106%);
  }
}
.bg-zoom-out {
  transition: background-size .3s ease-in-out;
  background-size: var(--distance, 106%);
  &:hover {
    background-size: 100%;
  }
}
.bg-scroll {
  transition: background-position 0.5s ease-in-out;
  background-position: center calc(50% - 30px);
}
.hover-bg-scroll {
  transition: background-position 0.5s ease-in-out, background-size 0.5s ease-in-out;
  background-size: 100%;
  background-position: center;
  &:hover {
    background-position: center calc(50% - 30px);
  }
}
.animate-marquee {
  display: flex;
  flex-wrap: nowrap;
  animation: marquee var(--animation-speed, 35s) infinite linear;
  animation-delay: 2s;
  &:hover {
    animation-play-state: paused;
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50.1%);
  }
}
.animated-clip-right {
  position: relative;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  animation: clip-right 1s ease-in-out forwards;
  --angle: 5deg;
}
@keyframes clip-right {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% var(--angle), 100% calc(100% - var(--angle)), 0% 100%);
  }
}
.animate-loading {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  opacity: 0.99;
  animation: loading 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes loading {
  0% {
    opacity: 0.99;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.99;
  }
}
.animate-fade-in {
  animation: fade-in 1s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.animate-fade-out {
  animation: fade-out 1s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes pop {
  10% {
    opacity: 0;
    scale: 0.1;
  }
  30% {
    scale: 1.003;
  }
  60% {
    opacity: 0.9;
    scale: 1;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.animate-pop {
  opacity: 0;
  scale: 0.1;
  animation: pop 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0s forwards;
  transform-gpu: translate3d(0,0,0);
}
@keyframes pop-out {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0.5;
  }
  60% {
    opacity: 0.9;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 0;
    display: none;
  }
}
.animate-pop-out {
  animation: pop-out 1.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  transform-gpu: translate3d(0,0,0);
}
.animated-border {
  background-size: 150% 150%;
  animation: animated-border var(--animated-duration, 10s) linear infinite;
}
@keyframes animated-border {
  0% {
    background-position: -25% -25%;
  }
  30% {
    background-position: 150% -25%;
  }
  50% {
    background-position: 150% 150%;
  }
  80% {
    background-position: -25% 150%;
  }
  100% {
    background-position: -25% -25%;
  }
}
@keyframes animated-square {
  0% {
    top: 0%;
    left: 0%;
    transform: translate(-55%, -55%) scaleX(1) scaleY(0.3);
  }
  27% {
    top: 0%;
    left: 100%;
    transform: translate(-50%, -50%) scaleX(1) scaleY(0.3);
  }
  33% {
    top: 0%;
    left: 100%;
    transform: translate(-50%, -50%) scaleX(0.3) scaleY(1);
  }
  47% {
    top: 90%;
    left: 100%;
    transform: translate(-50%, -50%) scaleX(0.3) scaleY(1.5);
  }
  53% {
    top: 100%;
    left: 100%;
    transform: translate(-50%, -50%) scaleX(1) scaleY(0.5);
  }
  77% {
    top: 100%;
    left: 0%;
    transform: translate(-50%, -50%) scaleX(1.3) scaleY(0.3);
  }
  80% {
    top: 100%;
    left: 0%;
    transform: translate(-50%, -50%) scaleX(0.3) scaleY(1);
  }
  96% {
    top: 4%;
    left: 0%;
    transform: translate(-50%, -50%) scaleX(0.3) scaleY(1.3);
  }
  100% {
    top: 0%;
    left: 0%;
    transform: translate(-55%, -55%) scaleX(1) scaleY(0.3);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.scrollZoom, .inViewZoom, .inViewZoomAll > * {
  opacity: 0;
}
.scrollClip, .scrollClipDown, .inviewClipDown, .inviewClipDownAll > * {
  will-change: transform, clip-path;
}
.code-simple {
  position: relative;
  padding-inline: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 4.5);
  @media (width >= 43rem) {
    width: fit-content;
  }
  border-radius: calc(var(--box-radius) * 0.33);
  max-width: 94vw;
  outline: none;
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none;
  code {
    padding-right: calc(var(--spacing) * 1);
    white-space: nowrap;
    white-space: pre;
  }
}
.code-window {
  position: relative;
  padding-top: calc(var(--spacing) * 8.5);
  padding-right: calc(var(--spacing) * 6);
  padding-bottom: calc(var(--spacing) * 6);
  padding-left: calc(var(--spacing) * 4);
  border-radius: calc(var(--box-radius) * 0.35);
  max-width: 94vw;
  outline: none;
  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="48" height="12" viewBox="0 0 54 14"><g fill="none" fillRule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="%23FF5F56" stroke="%23E0443E" strokeWidth=".5" /><circle cx="26" cy="6" r="6" fill="%23FFBD2E" stroke="%23DEA123" strokeWidth=".5" /><circle cx="46" cy="6" r="6" fill="%2327C93F" stroke="%231AAB29" strokeWidth=".5" /></g></svg>');
  background-repeat: no-repeat;
  background-position: left 10px top 13px;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.4);
  code {
    display: inline-block;
    width: 100%;
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }
  @media (min-width: 43rem) {
    max-width: calc(100% - 1px);
  }
}
.code-label-row {
  position: absolute;
  top: calc(var(--spacing) * -6);
  right: calc(var(--spacing) * 0);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  padding-inline: calc(var(--spacing) * 2);
  @media (width >= 43rem) {
    padding-inline: calc(var(--spacing) * 3);
  }
  z-index: 10;
  .code-label {
    vertical-align: middle;
    font-size-adjust: 0.495;
    line-height: 1.1;
    border-radius: var(--badge-radius);
    font-weight: var(--badge-weight, normal);
    width: fit-content;
    letter-spacing: 0.01em;
    column-gap: 0.4em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      opacity: 60%;
    }
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding: calc(var(--spacing) * 1.6) calc(var(--spacing) * 2.5);
    background-color: var(--color-dark);
    --tw-shadow-color: #15101a;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-dark) var(--tw-shadow-alpha), transparent);
    }
    color: var(--btn-dark-text, var(--color-light));
    border-color: var(--btn-dark-border, color-mix(in srgb, #15101a 0%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--btn-dark-border, color-mix(in oklab, var(--color-dark) var(--btn-border-mix-percentage, 100%), var(--btn-border-mix, transparent)));
    }
    &:where(.dark, .dark *) {
      border-color: var(--btn-dark-border, color-mix(in srgb, #15101a 60%, transparent));
      @supports (color: color-mix(in lab, red, red)) {
        border-color: var(--btn-dark-border, color-mix(in oklab, var(--color-dark) 60%, transparent));
      }
    }
    &:hover {
      background-color: var(--color-black);
    }
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .code-action {
    vertical-align: middle;
    font-size-adjust: 0.495;
    line-height: 1.1;
    border-radius: var(--badge-radius);
    font-weight: var(--badge-weight, normal);
    width: fit-content;
    letter-spacing: 0.01em;
    column-gap: 0.4em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      opacity: 60%;
    }
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding: calc(var(--spacing) * 1.6) calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .code-copy {
    vertical-align: middle;
    font-size-adjust: 0.495;
    line-height: 1.1;
    border-radius: var(--badge-radius);
    font-weight: var(--badge-weight, normal);
    width: fit-content;
    letter-spacing: 0.01em;
    column-gap: 0.4em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      opacity: 60%;
    }
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding: calc(var(--spacing) * 1.6) calc(var(--spacing) * 2.5);
    cursor: pointer;
    background-color: var(--color-brand-500);
    --tw-shadow-color: color-mix(in srgb, #000000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-brand-600) 70%, transparent) var(--tw-shadow-alpha), transparent);
    }
    color: var(--btn-brand-text, var(--color-white));
    border-color: var(--btn-brand-border, color-mix(in srgb, #111111 0%, white));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--btn-brand-border, color-mix(in oklab, var(--color-brand-500) var(--btn-border-mix-percentage, 100%), var(--btn-border-mix, transparent)));
    }
    &:where(.dark, .dark *) {
      border-color: var(--btn-brand-border, color-mix(in srgb, #111111 60%, transparent));
      @supports (color: color-mix(in lab, red, red)) {
        border-color: var(--btn-brand-border, color-mix(in oklab, var(--color-brand-500) 60%, transparent));
      }
    }
    &:hover {
      background-color: color-mix(in srgb, #111111 95%, white);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-brand-500) 95%, var(--btn-border-mix, black));
      }
    }
    padding-inline: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    text-transform: uppercase;
    opacity: 90%;
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .action-get {
    background-color: var(--color-orange-500);
    color: var(--color-light);
  }
  .action-post {
    background-color: var(--color-indigo-500);
    color: var(--color-light);
  }
}
.code-simple, .code-window {
  margin-top: calc(var(--spacing) * 8);
  overflow-x: scroll;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: color-mix(in srgb, #FCF3F3 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-light) 40%, transparent);
  }
  background-color: var(--color-dark);
  text-align: left;
  font-family: var(--font-mono);
  &:where(.dark, .dark *) {
    border-color: color-mix(in srgb, #FCF3F3 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-light) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-black);
  }
  code {
    color: var(--color-light);
  }
  .actions-row {
    position: absolute;
    top: calc(var(--spacing) * 0.5);
    left: calc(var(--spacing) * 1);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
  }
}
.hl-comment, .hl-quote {
  color: var(--color-gray-500);
  font-style: italic;
}
.hl-keyword, .hl-selector-tag, .hl-literal, .hl-name {
  color: var(--color-brand-300);
}
.hl-attribute, .hl-meta {
  color: var(--color-orange-500);
}
.hl-property {
  color: var(--color-brand-200);
}
.hl-variable {
  color: var(--color-blue-500);
}
.hl-value {
  color: var(--color-orange-300);
}
.hl-function {
  color: var(--color-pink-500);
}
.hl-operator {
  color: var(--color-red-400);
}
.hl-number, .hl-regexp, .hl-link {
  color: var(--color-red-400);
}
.hl-string, .hl-symbol, .hl-bullet, .hl-subst {
  color: var(--color-green-600);
}
.hl-title, .hl-section {
  color: var(--color-blue-600);
}
.hl-emphasis {
  font-style: italic;
}
.hl-strong {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.avatar {
  aspect-ratio: 1 / 1;
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 12);
  border-radius: 0.5;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-white);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: transparent;
  padding-block: calc(var(--spacing) * 2);
  padding-right: calc(var(--spacing) * 3);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  list-style: none;
  .breadcrumb-item {
    &:nth-child(n+2) {
      &:before {
        content: "/";
      }
    }
    a {
      --tw-font-weight: var(--font-weight-light);
      font-weight: var(--font-weight-light);
      color: var(--color-gray-500);
    }
  }
}
.price-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-left: calc(var(--spacing) * 4);
  div:first-child {
    opacity: 90%;
    font-size: clamp(1.2rem, 25%, 2.5rem);
    line-height: 1.2;
  }
  div:nth-child(2) {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
    font-size: clamp(2.4rem, 100%, 20rem);
    line-height: 70%;
  }
  div:nth-child(3) {
    margin-top: calc(var(--spacing) * 1);
    margin-left: calc(var(--spacing) * 1);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    opacity: 95%;
    font-size: clamp(0.6rem, 13%, 1.2rem);
    line-height: 1;
    span {
      display: block;
    }
  }
}
.bg-facebook {
  background-color: #3b57a1;
}
.fill-facebook {
  fill: #3b57a1;
}
.text-facebook {
  color: #3b57a1;
}
.bg-twitter {
  background-color: #4aa0eb;
}
.fill-twitter {
  fill: #4aa0eb;
}
.text-twitter {
  color: #4aa0eb;
}
.bg-x {
  background-color: #000000;
}
.fill-x {
  fill: #000000;
}
.text-x {
  color: #000000;
}
.bg-google {
  background-color: #D93D2C;
}
.fill-google {
  fill: #D93D2C;
}
.text-google {
  color: #D93D2C;
}
.bg-whatsapp {
  background-color: #35B83F;
}
.fill-whatsapp {
  fill: #35B83F;
}
.text-whatsapp {
  color: #35B83F;
}
.bg-linkedin {
  background-color: #0B66C2;
}
.fill-linkedin {
  fill: #0B66C2;
}
.text-linkedin {
  color: #0B66C2;
}
.bg-instagram {
  background-color: #e4405f;
}
.fill-instagram {
  fill: #e4405f;
}
.text-instagram {
  color: #e4405f;
}
.bg-pinterest {
  background-color: #bd081c;
}
.fill-pinterest {
  fill: #bd081c;
}
.text-pinterest {
  color: #bd081c;
}
svg.svg-icon {
  width: 1.2em;
  height: 1.2em;
  padding: 0.5px;
}
.x-scroll {
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 43rem) {
  .sm\:x-scroll {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
.carousel-browser {
  position: relative;
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
    -webkit-appearance: none;
  }
  display: flex;
  width: 100%;
  overflow-x: scroll;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  &:after {
    content: ' ';
    flex: 0 0 auto;
    width: 10px;
  }
  .carousel-item {
    flex: 0 0 auto;
    transition: transform 0.4s ease;
    transform: scale(0.95);
    &:hover {
      transform: scale(0.98);
    }
    &.active {
      transform: scale(1) !important;
    }
  }
}
.carousel-linear {
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
    -webkit-appearance: none;
  }
  display: flex;
  width: 100%;
  justify-content: space-around;
  overflow-x: hidden;
  overflow-y: visible;
  &::after {
    right: 0;
    transform: rotateZ(180deg);
  }
  &::before {
    left: 0;
  }
  .carousel-wrapper {
    display: flex;
    flex: 0 0 auto;
    animation: scroll var(--scroll-speed, 20s) linear infinite;
    padding: 0 0.2em;
    &:hover {
      animation-play-state: paused;
    }
  }
}
.clip-ray {
  clip-path: polygon(5% 10%, 46% 1%, 46% 10%, 100% 0, 95% 90%, 31% 100%, 31% 90%, 0% 100%);
}
.table-focus:focus-within tbody tr:not(:focus-within) {
  opacity: 80%;
  --tw-blur: blur(var(--blur-sm));
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  --tw-saturate: saturate(50%);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.bg-grid {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  background-size: 20px 20px;
  @media (width >= 64rem) {
    background-size: 30px 30px;
  }
  --grid-color: color-mix(in srgb, oklch(0.869 0.022 252.894) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --grid-color: color-mix(in oklab, var(--color-slate-300) 60%, transparent);
  }
  &:where(.dark, .dark *) {
    --grid-color: color-mix(in srgb, oklch(0.554 0.046 257.417) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --grid-color: color-mix(in oklab, var(--color-slate-500) 40%, transparent);
    }
  }
  background-image: linear-gradient(to right, var(--grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
}
.bg-dots {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  background-size: 20px 20px;
  @media (width >= 64rem) {
    background-size: 30px 30px;
  }
  --dots-color: color-mix(in srgb, oklch(0.869 0.022 252.894) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --dots-color: color-mix(in oklab, var(--color-slate-300) 80%, transparent);
  }
  &:where(.dark, .dark *) {
    --dots-color: color-mix(in srgb, oklch(0.554 0.046 257.417) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --dots-color: color-mix(in oklab, var(--color-slate-500) 40%, transparent);
    }
  }
  background-image: radial-gradient(var(--dots-color) 1.3px, transparent 1.3px);
}
.bg-lines {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  background-size: 45px 45px;
  @media (width >= 64rem) {
    background-size: 60px 60px;
  }
  --grid-color: color-mix(in srgb, oklch(0.869 0.022 252.894) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --grid-color: color-mix(in oklab, var(--color-slate-300) 50%, transparent);
  }
  &:where(.dark, .dark *) {
    --grid-color: color-mix(in srgb, oklch(0.446 0.043 257.281) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --grid-color: color-mix(in oklab, var(--color-slate-600) 40%, transparent);
    }
  }
  background-image: linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
}
body {
  background-color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-black);
  }
  transition: filter 1s ease, opacity 0.8s ease;
  &.body-fix {
    pointer-events: none;
    #logo, footer, main {
      filter: blur(10px);
      opacity: 0.8;
      transition: filter 1s ease, opacity 0.8s ease;
    }
  }
}
nav {
  position: fixed;
  top: calc(var(--spacing) * 3);
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 43rem) {
    max-width: 43rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
  @media (width >= 110rem) {
    max-width: 110rem;
  }
  @media (width >= 120rem) {
    max-width: 120rem;
  }
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-max, var(--breakpoint-xl));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
  padding-inline: calc(var(--spacing) * 2);
  @media (width >= 43rem) {
    padding-inline: calc(var(--spacing) * 10);
  }
  z-index: 999;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  #logo {
    margin-left: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 8);
    @media (width >= 43rem) {
      margin-left: calc(var(--spacing) * 2);
    }
    @media (width >= 43rem) {
      height: calc(var(--spacing) * 13);
    }
    &:where(.dark, .dark *) {
      --tw-invert: invert(100%);
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
    pointer-events: auto;
  }
  .nav-menu-mobile {
    pointer-events: auto;
    position: fixed;
    top: calc(var(--spacing) * -0.5);
    right: calc(var(--spacing) * 2);
    left: calc(var(--spacing) * 2);
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-3xl);
    padding-top: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 4);
    padding-left: calc(var(--spacing) * 5);
    @media (width >= 43rem) {
      left: auto;
    }
    @media (width >= 43rem) {
      gap: calc(var(--spacing) * 2);
    }
    @media (width >= 43rem) {
      padding-top: calc(var(--spacing) * 15);
    }
    @media (width >= 43rem) {
      padding-bottom: calc(var(--spacing) * 6);
    }
    @media (width >= 43rem) {
      padding-left: calc(var(--spacing) * 8);
    }
    @media (width >= 64rem) {
      right: calc(var(--spacing) * 11);
    }
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    --tw-gradient-position: to bottom;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-white);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    --tw-gradient-to: color-mix(in srgb, #ffffff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    @media (width >= 43rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
    box-shadow: 0 0 100px 10px var(--color-slate-200);
    border: 2px solid #FFFFFF;
    z-index: 998;
    max-width: 500px;
    //animation: pop 1s ease-in-out forwards;
    .nav-item {
      margin-bottom: calc(var(--spacing) * 1);
      font-family: var(--font-serif);
      font-size: 1.4rem;
      color: var(--color-slate-600);
      &:hover {
        @media (hover: hover) {
          color: var(--color-slate-400);
        }
      }
      @media (width >= 43rem) {
        font-size: 1.8rem;
      }
      &.selected {
        opacity: 70%;
      }
    }
  }
}
.menu-btn {
  width: fit-content;
  letter-spacing: 0.01em;
  column-gap: 0.4em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  &:disabled {
    pointer-events: none;
  }
  &:disabled {
    opacity: 60%;
  }
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  right: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: 0.25rem;
  color: var(--color-brand-600);
  background-color: transparent;
  border-color: var(--color-brand-600);
  border-style: var(--tw-border-style);
  border-width: 1px;
  --tw-shadow-color: color-mix(in srgb, #000000 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-brand-600) 70%, transparent) var(--tw-shadow-alpha), transparent);
  }
  &:hover {
    color: var(--color-white);
    background-color: var(--color-brand-600);
  }
  background-color: color-mix(in srgb, #ffffff 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  @media (width >= 43rem) {
    gap: calc(var(--spacing) * 2.5);
  }
  @media (width >= 43rem) {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  @media (width >= 43rem) {
    padding-block: calc(var(--spacing) * 2);
  }
  @media (width >= 64rem) {
    right: calc(var(--spacing) * 14);
  }
  pointer-events: auto;
  z-index: 9999;
  .menu-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 18px;
    cursor: pointer;
  }
  span {
    position: relative;
    display: block;
    background-color: var(--color-dark);
    height: 2.8px;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
  }
  span:nth-child(1) {
    width: 22px;
  }
  span:nth-child(2) {
    width: 19px;
  }
  span:nth-child(3) {
    width: 16px;
  }
  &.active-menu {
    @media (width >= 43rem) {
      border-radius: var(--radius-3xl);
    }
    span {
      width: 22px;
      position: absolute;
      top: 40%;
      left: 0;
      transform-origin: center;
    }
    span:nth-child(1) {
      transform: rotate(45deg);
    }
    span:nth-child(2) {
      opacity: 0;
    }
    span:nth-child(3) {
      transform: rotate(-45deg);
    }
  }
  &:hover {
    color: var(--color-light);
    .menu-icon span {
      background-color: var(--color-white);
    }
  }
}
#home {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-lg-max, var(--breakpoint-2xl));
  --tw-gradient-position: to bottom in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: color-mix(in srgb, #15101a 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-from: color-mix(in oklab, var(--color-dark) 80%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: color-mix(in srgb, #111111 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--color-brand) 30%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.bento-news {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 4);
  @media (width >= 43rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (width >= 43rem) {
    gap: calc(var(--spacing) * 6);
  }
  .bento-item:nth-child(3) {
    @media (width >= 43rem) {
      grid-column: span 2 / span 2;
    }
  }
  .bento-item:nth-child(4) {
    @media (width >= 43rem) {
      grid-row: span 2 / span 2;
    }
  }
  .bento-item:nth-child(5) {
    @media (width >= 43rem) {
      grid-column: span 2 / span 2;
    }
    @media (width >= 43rem) {
      grid-row: span 2 / span 2;
    }
  }
  .bento-item:nth-child(6) {
    @media (width >= 43rem) {
      grid-row: span 2 / span 2;
    }
  }
}
.news-write {
  fill: var(--color-white);
  color: var(--color-white);
  h1, h2, h3, h4, h5, h6, ul, ol {
    fill: var(--color-white);
    color: var(--color-white);
  }
  p, small, li {
    fill: color-mix(in srgb, #ffffff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
    color: color-mix(in srgb, #ffffff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  a {
    margin-top: calc(var(--spacing) * 2);
  }
}
.tag-title {
  position: relative;
  z-index: calc(1 * -1);
  display: inline-block;
  &::before {
    content: var(--tw-content);
    position: absolute;
  }
  &::before {
    content: var(--tw-content);
    inset: calc(var(--spacing) * -1);
  }
  &::before {
    content: var(--tw-content);
    top: calc(var(--spacing) * 0.5);
  }
  &::before {
    content: var(--tw-content);
    right: calc(var(--spacing) * 1);
  }
  &::before {
    content: var(--tw-content);
    bottom: calc(var(--spacing) * -2);
  }
  &::before {
    content: var(--tw-content);
    left: calc(var(--spacing) * 3);
  }
  &::before {
    content: var(--tw-content);
    display: block;
  }
  &::before {
    content: var(--tw-content);
    --tw-skew-y: skewY(calc(1deg * -1));
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  &::before {
    content: var(--tw-content);
    animation: var(--animate-pulse);
  }
  &::before {
    content: var(--tw-content);
    border-radius: var(--radius-lg);
  }
  &::before {
    content: var(--tw-content);
    background-color: color-mix(in srgb, oklch(0.75 0.183 55.934) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-orange-400) 90%, transparent);
    }
  }
  span {
    position: relative;
    padding-inline: calc(var(--spacing) * 3);
    color: var(--color-white);
    font-style: italic;
  }
}
.font-muted {
  font-family: var(--font-mono);
  color: var(--color-brand);
}
.box {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 4);
  @media (width >= 43rem) {
    padding-inline: calc(var(--spacing) * 9);
  }
  @media (width >= 43rem) {
    padding-block: calc(var(--spacing) * 8);
  }
  box-shadow: 0px 74px 100px -70px rgba(0, 0, 0, 0.25);
}
.box-sm {
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 3);
  @media (width >= 43rem) {
    padding-inline: calc(var(--spacing) * 7);
  }
  @media (width >= 43rem) {
    padding-block: calc(var(--spacing) * 6);
  }
  box-shadow: 0px 74px 100px -70px rgba(0, 0, 0, 0.25);
}
.section-mt {
  margin-top: calc(var(--spacing) * 15);
  @media (width >= 43rem) {
    margin-top: calc(var(--spacing) * 23.5);
  }
}
footer {
  overflow: hidden;
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  background-color: var(--color-white);
  box-shadow: 0 0 100px 50px var(--color-light);
  a {
    &:hover {
      @media (hover: hover) {
        opacity: 70% !important;
      }
    }
  }
  ul {
    li {
      margin-bottom: calc(var(--spacing) * 0) !important;
    }
  }
}
#headerAnimate {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-lg-max, var(--breakpoint-2xl));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-block: calc(var(--spacing) * 5);
  @media (width >= 43rem) {
    padding-block: calc(var(--spacing) * 20);
  }
  margin-top: calc(var(--spacing) * 20);
  border-radius: var(--radius-xl);
  background-size: cover;
  @media (width >= 43rem) {
    margin-top: 120px;
  }
  @media (width >= 43rem) {
    border-radius: var(--radius-3xl);
  }
  min-height: 600px;
  @media (width >= 64rem) {
    min-height: 800px;
  }
}
.specs-ul {
  margin-top: calc(var(--spacing) * 4);
  display: flex;
  flex-wrap: wrap;
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
  }
  color: var(--color-slate-500);
  @media (width >= 43rem) {
    flex-direction: column;
  }
  li {
    display: inline-flex;
    gap: calc(var(--spacing) * 1);
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    @media (width >= 43rem) {
      display: flex;
    }
    &:hover {
      background-color: var(--color-slate-100);
      color: var(--color-slate-600);
    }
  }
}
.headRadial {
  --tw-gradient-from: color-mix(in srgb, #FCF3F3 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-from: color-mix(in oklab, var(--color-light) 70%, transparent);
  }
  animation: radialPulse 8s ease-in-out infinite alternate;
}
@keyframes radialPulse {
  from {
    background: radial-gradient(40% 40% at 50% 50%, var(--tw-gradient-from) 0%, transparent 80%);
  }
  to {
    background: radial-gradient(60% 60% at 50% 50%, var(--tw-gradient-from) 0%, transparent 100%);
  }
}
.border-out {
  border-color: color-mix(in srgb, oklch(0.13 0.028 261.692) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-gray-950) 50%, transparent);
  }
  &:where(.dark, .dark *) {
    border-color: color-mix(in srgb, #FCF3F3 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-light) 30%, transparent);
    }
  }
}
.border-in {
  border-color: color-mix(in srgb, oklch(0.278 0.033 256.848) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-gray-800) 10%, transparent);
  }
  &:where(.dark, .dark *) {
    border-color: color-mix(in srgb, #FCF3F3 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-light) 15%, transparent);
    }
  }
}
.animateLeft, .animateDown {
  opacity: 0%;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-content: "";
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
    }
  }
}