/* RTL (Right-to-Left) Styles for Arabic Language Support */

/* ── Games page exclusion ──────────────────────────────────────────────────
   The games client (NeoGameClient) and all game screens manage their own
   directionality per-component. Prevent global [dir="rtl"] rules from
   leaking into game layouts.                                               */
[dir="rtl"] .neo-game-client,
[dir="rtl"] .neo-game-client *,
[dir="rtl"] .neo-game-content,
[dir="rtl"] .neo-quiz-fullscreen,
[dir="rtl"] .neo-quiz-fullscreen * {
    direction:  ltr !important;
    text-align: initial !important;
}

/* Base RTL direction */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Flip margins and paddings for RTL */
[dir="rtl"] .footer-links span:hover {
  transform: translateX(-5px);
}

/* Fix flex direction for RTL */
[dir="rtl"] .flex-row {
  flex-direction: row-reverse;
}

/* Flip margins */
[dir="rtl"] .ml-1, [dir="rtl"] .ml-2, [dir="rtl"] .ml-3, [dir="rtl"] .ml-4 {
  margin-left: 0;
  margin-right: 0.25rem;
}
[dir="rtl"] .ml-2 { margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-right: 0.75rem; }
[dir="rtl"] .ml-4 { margin-right: 1rem; }

[dir="rtl"] .mr-1, [dir="rtl"] .mr-2, [dir="rtl"] .mr-3, [dir="rtl"] .mr-4 {
  margin-right: 0;
  margin-left: 0.25rem;
}
[dir="rtl"] .mr-2 { margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-left: 0.75rem; }
[dir="rtl"] .mr-4 { margin-left: 1rem; }

/* Flip paddings */
[dir="rtl"] .pl-1, [dir="rtl"] .pl-2, [dir="rtl"] .pl-3, [dir="rtl"] .pl-4 {
  padding-left: 0;
  padding-right: 0.25rem;
}
[dir="rtl"] .pl-2 { padding-right: 0.5rem; }
[dir="rtl"] .pl-3 { padding-right: 0.75rem; }
[dir="rtl"] .pl-4 { padding-right: 1rem; }

[dir="rtl"] .pr-1, [dir="rtl"] .pr-2, [dir="rtl"] .pr-3, [dir="rtl"] .pr-4 {
  padding-right: 0;
  padding-left: 0.25rem;
}
[dir="rtl"] .pr-2 { padding-left: 0.5rem; }
[dir="rtl"] .pr-3 { padding-left: 0.75rem; }
[dir="rtl"] .pr-4 { padding-left: 1rem; }

/* Border radius flips */
[dir="rtl"] .rounded-l {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

[dir="rtl"] .rounded-r {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

/* Text alignment for mixed content */
[dir="rtl"] .ltr-text {
  direction: ltr;
  text-align: left;
  unicode-bidi: embed;
}

/* Ensure proper font support for Arabic */
[dir="rtl"] body {
  font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', 'Arial', sans-serif;
}

/* Input fields in RTL */
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select {
  text-align: right;
}

/* Placeholder alignment */
[dir="rtl"] input::placeholder, [dir="rtl"] textarea::placeholder {
  text-align: right;
}

/* Fix absolute positioning for RTL */
[dir="rtl"] .absolute-left {
  left: auto;
  right: 0;
}

[dir="rtl"] .absolute-right {
  right: auto;
  left: 0;
}

/* Modal and dropdown positioning */
[dir="rtl"] .dropdown-menu {
  left: auto;
  right: 0;
}

/* Game-specific RTL fixes */
[dir="rtl"] .neo-card-button {
  direction: rtl;
}

[dir="rtl"] .message {
  direction: rtl;
}

[dir="rtl"] .system-msg {
  direction: rtl;
}

/* Chat message bubbles */
[dir="rtl"] .chat-body .message {
  direction: rtl;
}

[dir="rtl"] .chat-body .message[data-sender="user"] {
  align-self: flex-start;
}

[dir="rtl"] .chat-body .message[data-sender="admin"] {
  align-self: flex-end;
}

/* Fix navigation arrows */
[dir="rtl"] .nav-arrow-left::before {
  content: "→";
}

[dir="rtl"] .nav-arrow-right::before {
  content: "←";
}

/* Toast notifications */
[dir="rtl"] .toast {
  direction: rtl;
}

/* Scrollbar on the left for RTL */
[dir="rtl"] .custom-scrollbar {
  direction: rtl;
}

[dir="rtl"] .custom-scrollbar > * {
  direction: rtl;
}
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@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-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --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-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-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --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-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-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-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}

@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: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-red-950: oklch(25.8% .092 26.042);
    --color-orange-50: oklch(98% .016 73.684);
    --color-orange-200: oklch(90.1% .076 70.697);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-amber-900: oklch(41.4% .112 45.904);
    --color-amber-950: oklch(27.9% .077 45.635);
    --color-yellow-100: oklch(97.3% .071 103.193);
    --color-yellow-200: oklch(94.5% .129 101.54);
    --color-yellow-300: oklch(90.5% .182 98.111);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-yellow-600: oklch(68.1% .162 75.834);
    --color-yellow-700: oklch(55.4% .135 66.442);
    --color-yellow-900: oklch(42.1% .095 57.708);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-200: oklch(92.5% .084 155.995);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-teal-400: oklch(77.7% .152 181.912);
    --color-cyan-400: oklch(78.9% .154 211.53);
    --color-cyan-500: oklch(71.5% .143 215.221);
    --color-sky-100: oklch(95.1% .026 236.824);
    --color-sky-200: oklch(90.1% .058 230.902);
    --color-sky-400: oklch(74.6% .16 232.661);
    --color-sky-500: oklch(68.5% .169 237.323);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-200: oklch(88.2% .059 254.128);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-blue-800: oklch(42.4% .199 265.638);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-blue-950: oklch(28.2% .091 267.935);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-purple-400: oklch(71.4% .203 305.504);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-purple-700: oklch(49.6% .265 301.924);
    --color-fuchsia-400: oklch(74% .238 322.16);
    --color-pink-400: oklch(71.8% .202 349.761);
    --color-pink-500: oklch(65.6% .241 354.308);
    --color-rose-50: oklch(96.9% .015 12.422);
    --color-rose-100: oklch(94.1% .03 12.58);
    --color-rose-200: oklch(89.2% .058 10.001);
    --color-rose-300: oklch(81% .117 11.638);
    --color-rose-400: oklch(71.2% .194 13.428);
    --color-rose-500: oklch(64.5% .246 16.439);
    --color-rose-600: oklch(58.6% .253 17.585);
    --color-rose-700: oklch(51.4% .222 16.935);
    --color-rose-800: oklch(45.5% .188 13.697);
    --color-rose-900: oklch(41% .159 10.272);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-900: oklch(21% .034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .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;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-xs: 0 1px 2px 0 #0000000d;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    --drop-shadow-sm: 0 1px 2px #00000026;
    --drop-shadow-md: 0 3px 3px #0000001f;
    --drop-shadow-lg: 0 4px 4px #00000026;
    --drop-shadow-2xl: 0 25px 25px #00000026;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    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;
  }

  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;
    -webkit-text-decoration: 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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.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 {
    vertical-align: middle;
    display: block;
  }

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :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;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        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 {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }

  .-inset-2 {
    inset: calc(var(--spacing) * -2);
  }

  .-inset-3 {
    inset: calc(var(--spacing) * -3);
  }

  .-inset-4 {
    inset: calc(var(--spacing) * -4);
  }

  .-inset-6 {
    inset: calc(var(--spacing) * -6);
  }

  .-inset-\[2px\] {
    inset: -2px;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-3 {
    inset: calc(var(--spacing) * 3);
  }

  .inset-6 {
    inset: calc(var(--spacing) * 6);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-x-4 {
    inset-inline: calc(var(--spacing) * 4);
  }

  .inset-x-5 {
    inset-inline: calc(var(--spacing) * 5);
  }

  .-inset-y-2 {
    inset-block: calc(var(--spacing) * -2);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .inset-y-1 {
    inset-block: calc(var(--spacing) * 1);
  }

  .inset-y-16 {
    inset-block: calc(var(--spacing) * 16);
  }

  .inset-y-20 {
    inset-block: calc(var(--spacing) * 20);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .start\! {
    inset-inline-start: var(--spacing) !important;
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .-top-1 {
    top: calc(var(--spacing) * -1);
  }

  .-top-2 {
    top: calc(var(--spacing) * -2);
  }

  .-top-3 {
    top: calc(var(--spacing) * -3);
  }

  .-top-4 {
    top: calc(var(--spacing) * -4);
  }

  .-top-8 {
    top: calc(var(--spacing) * -8);
  }

  .-top-12 {
    top: calc(var(--spacing) * -12);
  }

  .-top-20 {
    top: calc(var(--spacing) * -20);
  }

  .-top-40 {
    top: calc(var(--spacing) * -40);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-1\/3 {
    top: 33.3333%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-3\.5 {
    top: calc(var(--spacing) * 3.5);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-6 {
    top: calc(var(--spacing) * 6);
  }

  .top-8 {
    top: calc(var(--spacing) * 8);
  }

  .top-10 {
    top: calc(var(--spacing) * 10);
  }

  .top-20 {
    top: calc(var(--spacing) * 20);
  }

  .top-36 {
    top: calc(var(--spacing) * 36);
  }

  .top-44 {
    top: calc(var(--spacing) * 44);
  }

  .top-\[1px\] {
    top: 1px;
  }

  .top-\[10\%\] {
    top: 10%;
  }

  .top-\[12\%\] {
    top: 12%;
  }

  .top-\[18\%\] {
    top: 18%;
  }

  .top-\[20\%\] {
    top: 20%;
  }

  .top-\[50\%\] {
    top: 50%;
  }

  .top-\[55\%\] {
    top: 55%;
  }

  .top-\[60\%\] {
    top: 60%;
  }

  .top-full {
    top: 100%;
  }

  .-right-1 {
    right: calc(var(--spacing) * -1);
  }

  .-right-3 {
    right: calc(var(--spacing) * -3);
  }

  .-right-4 {
    right: calc(var(--spacing) * -4);
  }

  .-right-8 {
    right: calc(var(--spacing) * -8);
  }

  .-right-12 {
    right: calc(var(--spacing) * -12);
  }

  .-right-20 {
    right: calc(var(--spacing) * -20);
  }

  .-right-32 {
    right: calc(var(--spacing) * -32);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-0\.5 {
    right: calc(var(--spacing) * .5);
  }

  .right-1 {
    right: calc(var(--spacing) * 1);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-5 {
    right: calc(var(--spacing) * 5);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .right-8 {
    right: calc(var(--spacing) * 8);
  }

  .right-\[5\%\] {
    right: 5%;
  }

  .right-\[6\%\] {
    right: 6%;
  }

  .right-\[8\%\] {
    right: 8%;
  }

  .right-\[10\%\] {
    right: 10%;
  }

  .right-\[14\%\] {
    right: 14%;
  }

  .right-\[18\%\] {
    right: 18%;
  }

  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }

  .-bottom-3 {
    bottom: calc(var(--spacing) * -3);
  }

  .-bottom-4 {
    bottom: calc(var(--spacing) * -4);
  }

  .-bottom-12 {
    bottom: calc(var(--spacing) * -12);
  }

  .-bottom-20 {
    bottom: calc(var(--spacing) * -20);
  }

  .-bottom-32 {
    bottom: calc(var(--spacing) * -32);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }

  .bottom-10 {
    bottom: calc(var(--spacing) * 10);
  }

  .bottom-12 {
    bottom: calc(var(--spacing) * 12);
  }

  .bottom-16 {
    bottom: calc(var(--spacing) * 16);
  }

  .bottom-20 {
    bottom: calc(var(--spacing) * 20);
  }

  .bottom-\[10\%\] {
    bottom: 10%;
  }

  .bottom-\[14\%\] {
    bottom: 14%;
  }

  .bottom-\[18\%\] {
    bottom: 18%;
  }

  .bottom-\[20\%\] {
    bottom: 20%;
  }

  .bottom-\[24\%\] {
    bottom: 24%;
  }

  .-left-1 {
    left: calc(var(--spacing) * -1);
  }

  .-left-1\/3 {
    left: -33.3333%;
  }

  .-left-3 {
    left: calc(var(--spacing) * -3);
  }

  .-left-4 {
    left: calc(var(--spacing) * -4);
  }

  .-left-12 {
    left: calc(var(--spacing) * -12);
  }

  .-left-20 {
    left: calc(var(--spacing) * -20);
  }

  .-left-40 {
    left: calc(var(--spacing) * -40);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1 {
    left: calc(var(--spacing) * 1);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-1\/4 {
    left: 25%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .left-5 {
    left: calc(var(--spacing) * 5);
  }

  .left-8 {
    left: calc(var(--spacing) * 8);
  }

  .left-\[5\%\] {
    left: 5%;
  }

  .left-\[8\%\] {
    left: 8%;
  }

  .left-\[9\%\] {
    left: 9%;
  }

  .left-\[12\%\] {
    left: 12%;
  }

  .left-\[14\%\] {
    left: 14%;
  }

  .left-\[18\%\] {
    left: 18%;
  }

  .left-\[50\%\] {
    left: 50%;
  }

  .-z-10 {
    z-index: calc(10 * -1);
  }

  .z-0 {
    z-index: 0;
  }

  .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-\[1\] {
    z-index: 1;
  }

  .z-\[100\] {
    z-index: 100;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-3 {
    grid-column: span 3 / span 3;
  }

  .col-span-4 {
    grid-column: span 4 / span 4;
  }

  .col-span-5 {
    grid-column: span 5 / span 5;
  }

  .col-span-6 {
    grid-column: span 6 / span 6;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

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

  .m-21 {
    margin: calc(var(--spacing) * 21);
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-3\.5 {
    margin-inline: calc(var(--spacing) * 3.5);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }

  .mx-8 {
    margin-inline: calc(var(--spacing) * 8);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-0\.5 {
    margin-block: calc(var(--spacing) * .5);
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }

  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }

  .-mt-4 {
    margin-top: calc(var(--spacing) * -4);
  }

  .mt-0\.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-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-24 {
    margin-top: calc(var(--spacing) * 24);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .mb-14 {
    margin-bottom: calc(var(--spacing) * 14);
  }

  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }

  .mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }

  .-ml-4 {
    margin-left: calc(var(--spacing) * -4);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-auto {
    margin-left: auto;
  }

  .box-border {
    box-sizing: border-box;
  }

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

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

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

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

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

  .table {
    display: table;
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }

  .aspect-\[4\/5\] {
    aspect-ratio: 4 / 5;
  }

  .aspect-\[16\/10\] {
    aspect-ratio: 16 / 10;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .size-\(--cell-size\) {
    width: var(--cell-size);
    height: var(--cell-size);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .h-\(--cell-size\) {
    height: var(--cell-size);
  }

  .h-0 {
    height: calc(var(--spacing) * 0);
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-36 {
    height: calc(var(--spacing) * 36);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-44 {
    height: calc(var(--spacing) * 44);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-56 {
    height: calc(var(--spacing) * 56);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-80 {
    height: calc(var(--spacing) * 80);
  }

  .h-\[1px\] {
    height: 1px;
  }

  .h-\[2px\] {
    height: 2px;
  }

  .h-\[60vmin\] {
    height: 60vmin;
  }

  .h-\[72px\] {
    height: 72px;
  }

  .h-\[80vmin\] {
    height: 80vmin;
  }

  .h-\[95px\] {
    height: 95px;
  }

  .h-\[110vmin\] {
    height: 110vmin;
  }

  .h-\[140vmin\] {
    height: 140vmin;
  }

  .h-\[300px\] {
    height: 300px;
  }

  .h-\[380px\] {
    height: 380px;
  }

  .h-\[400px\] {
    height: 400px;
  }

  .h-\[500px\] {
    height: 500px;
  }

  .h-\[520px\] {
    height: 520px;
  }

  .h-\[600px\] {
    height: 600px;
  }

  .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
    height: var(--radix-navigation-menu-viewport-height);
  }

  .h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height);
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-svh {
    height: 100svh;
  }

  .max-h-\(--radix-context-menu-content-available-height\) {
    max-height: var(--radix-context-menu-content-available-height);
  }

  .max-h-\(--radix-select-content-available-height\) {
    max-height: var(--radix-select-content-available-height);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[90\%\] {
    max-height: 90%;
  }

  .max-h-\[90vh\] {
    max-height: 90vh;
  }

  .max-h-\[300px\] {
    max-height: 300px;
  }

  .max-h-\[450px\] {
    max-height: 450px;
  }

  .max-h-\[600px\] {
    max-height: 600px;
  }

  .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
    max-height: var(--radix-dropdown-menu-content-available-height);
  }

  .max-h-screen {
    max-height: 100vh;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-36 {
    min-height: calc(var(--spacing) * 36);
  }

  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }

  .min-h-48 {
    min-height: calc(var(--spacing) * 48);
  }

  .min-h-\[1\.5rem\] {
    min-height: 1.5rem;
  }

  .min-h-\[1\.25rem\] {
    min-height: 1.25rem;
  }

  .min-h-\[60px\] {
    min-height: 60px;
  }

  .min-h-\[60vh\] {
    min-height: 60vh;
  }

  .min-h-\[70vh\] {
    min-height: 70vh;
  }

  .min-h-\[80px\] {
    min-height: 80px;
  }

  .min-h-\[80vh\] {
    min-height: 80vh;
  }

  .min-h-\[120px\] {
    min-height: 120px;
  }

  .min-h-\[200px\] {
    min-height: 200px;
  }

  .min-h-\[220px\] {
    min-height: 220px;
  }

  .min-h-\[280px\] {
    min-height: 280px;
  }

  .min-h-\[300px\] {
    min-height: 300px;
  }

  .min-h-\[400px\] {
    min-height: 400px;
  }

  .min-h-\[calc\(100vh-4rem\)\] {
    min-height: calc(100vh - 4rem);
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .min-h-svh {
    min-height: 100svh;
  }

  .w-\(--cell-size\) {
    width: var(--cell-size);
  }

  .w-\(--sidebar-width\) {
    width: var(--sidebar-width);
  }

  .w-0 {
    width: calc(var(--spacing) * 0);
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-1\/3 {
    width: 33.3333%;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-4\/6 {
    width: 66.6667%;
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-5\/6 {
    width: 83.3333%;
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-\[--sidebar-width\] {
    width: --sidebar-width;
  }

  .w-\[1px\] {
    width: 1px;
  }

  .w-\[60vmin\] {
    width: 60vmin;
  }

  .w-\[70px\] {
    width: 70px;
  }

  .w-\[72px\] {
    width: 72px;
  }

  .w-\[80vmin\] {
    width: 80vmin;
  }

  .w-\[100px\] {
    width: 100px;
  }

  .w-\[110vmin\] {
    width: 110vmin;
  }

  .w-\[140vmin\] {
    width: 140vmin;
  }

  .w-\[300px\] {
    width: 300px;
  }

  .w-\[400px\] {
    width: 400px;
  }

  .w-\[500px\] {
    width: 500px;
  }

  .w-\[520px\] {
    width: 520px;
  }

  .w-\[600px\] {
    width: 600px;
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .w-px {
    width: 1px;
  }

  .max-w-\(--skeleton-width\) {
    max-width: var(--skeleton-width);
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-\[--skeleton-width\] {
    max-width: --skeleton-width;
  }

  .max-w-\[32px\] {
    max-width: 32px;
  }

  .max-w-\[90\%\] {
    max-width: 90%;
  }

  .max-w-\[110px\] {
    max-width: 110px;
  }

  .max-w-\[140px\] {
    max-width: 140px;
  }

  .max-w-\[250px\] {
    max-width: 250px;
  }

  .max-w-\[260px\] {
    max-width: 260px;
  }

  .max-w-\[1280px\] {
    max-width: 1280px;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-max {
    max-width: max-content;
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-\(--cell-size\) {
    min-width: var(--cell-size);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }

  .min-w-10 {
    min-width: calc(var(--spacing) * 10);
  }

  .min-w-\[8rem\] {
    min-width: 8rem;
  }

  .min-w-\[12px\] {
    min-width: 12px;
  }

  .min-w-\[12rem\] {
    min-width: 12rem;
  }

  .min-w-\[80px\] {
    min-width: 80px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[200px\] {
    min-width: 200px;
  }

  .min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width);
  }

  .flex-1 {
    flex: 1;
  }

  .flex-\[2\] {
    flex: 2;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .grow-0 {
    flex-grow: 0;
  }

  .basis-full {
    flex-basis: 100%;
  }

  .caption-bottom {
    caption-side: bottom;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .origin-\(--radix-context-menu-content-transform-origin\) {
    transform-origin: var(--radix-context-menu-content-transform-origin);
  }

  .origin-\(--radix-dropdown-menu-content-transform-origin\) {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  }

  .origin-\(--radix-hover-card-content-transform-origin\) {
    transform-origin: var(--radix-hover-card-content-transform-origin);
  }

  .origin-\(--radix-menubar-content-transform-origin\) {
    transform-origin: var(--radix-menubar-content-transform-origin);
  }

  .origin-\(--radix-popover-content-transform-origin\) {
    transform-origin: var(--radix-popover-content-transform-origin);
  }

  .origin-\(--radix-select-content-transform-origin\) {
    transform-origin: var(--radix-select-content-transform-origin);
  }

  .origin-\(--radix-tooltip-content-transform-origin\) {
    transform-origin: var(--radix-tooltip-content-transform-origin);
  }

  .origin-bottom {
    transform-origin: bottom;
  }

  .origin-left {
    transform-origin: 0;
  }

  .origin-top {
    transform-origin: top;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-4 {
    --tw-translate-x: calc(var(--spacing) * -4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-px {
    --tw-translate-x: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-px {
    --tw-translate-x: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-6 {
    --tw-translate-y: calc(var(--spacing) * 6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-12 {
    rotate: 12deg;
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .rotate-\[-12deg\] {
    rotate: -12deg;
  }

  .skew-x-12 {
    --tw-skew-x: skewX(12deg);
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-\[fadeIn_0\.6s_ease-out\] {
    animation: .6s ease-out fadeIn;
  }

  .animate-\[float-slow_6s_ease-in-out_infinite\] {
    animation: 6s ease-in-out infinite float-slow;
  }

  .animate-\[float_6s_ease-in-out_infinite\] {
    animation: 6s ease-in-out infinite float;
  }

  .animate-\[ink-drop_0\.6s_cubic-bezier\(0\.4\,0\,0\.2\,1\)_both\] {
    animation: .6s cubic-bezier(.4, 0, .2, 1) both ink-drop;
  }

  .animate-\[marquee_40s_linear_infinite\] {
    animation: 40s linear infinite marquee;
  }

  .animate-\[scaleIn_0\.5s_ease-out\] {
    animation: .5s ease-out scaleIn;
  }

  .animate-\[seal-pulse_2\.8s_ease-in-out_infinite\] {
    animation: 2.8s ease-in-out infinite seal-pulse;
  }

  .animate-\[spin_20s_linear_infinite\] {
    animation: 20s linear infinite spin;
  }

  .animate-\[spin_24s_linear_infinite\] {
    animation: 24s linear infinite spin;
  }

  .animate-\[wave_4s_ease-in-out_infinite\] {
    animation: 4s ease-in-out infinite wave;
  }

  .animate-\[wiggle_0\.5s_ease\] {
    animation: .5s wiggle;
  }

  .animate-bounce {
    animation: var(--animate-bounce);
  }

  .animate-ping {
    animation: var(--animate-ping);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .list-none {
    list-style-type: none;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid-cols-\[auto_1fr_auto\] {
    grid-template-columns: auto 1fr auto;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

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

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

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-content-center {
    place-content: center;
  }

  .place-items-center {
    place-items: center;
  }

  .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;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .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);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :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)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :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)));
  }

  :where(.space-y-3 > :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)));
  }

  :where(.space-y-4 > :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)));
  }

  :where(.space-y-5 > :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)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-7 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-12 > :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)));
  }

  :where(.-space-x-2 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-1 > :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)));
  }

  :where(.space-x-3 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-4 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }

  .self-stretch {
    align-self: stretch;
  }

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

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

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

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

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

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

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
  }

  .rounded-\[2px\] {
    border-radius: 2px;
  }

  .rounded-\[2rem\] {
    border-radius: 2rem;
  }

  .rounded-\[40px\] {
    border-radius: 40px;
  }

  .rounded-\[inherit\] {
    border-radius: inherit;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-t {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
  }

  .rounded-t-\[2\.5rem\] {
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
  }

  .rounded-t-\[10px\] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .rounded-t-full {
    border-top-left-radius: 3.40282e38px;
    border-top-right-radius: 3.40282e38px;
  }

  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }

  .rounded-l-md {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .rounded-tl-sm {
    border-top-left-radius: var(--radius-sm);
  }

  .rounded-r-full {
    border-top-right-radius: 3.40282e38px;
    border-bottom-right-radius: 3.40282e38px;
  }

  .rounded-r-md {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .rounded-tr-sm {
    border-top-right-radius: var(--radius-sm);
  }

  .rounded-b-sm {
    border-bottom-right-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
  }

  .rounded-b-xl {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }

  .rounded-br-sm {
    border-bottom-right-radius: var(--radius-sm);
  }

  .rounded-bl-sm {
    border-bottom-left-radius: var(--radius-sm);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-3 {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }

  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-x-2 {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 2px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-y-2 {
    border-block-style: var(--tw-border-style);
    border-block-width: 2px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-r-2 {
    border-right-style: var(--tw-border-style);
    border-right-width: 2px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-double {
    --tw-border-style: double;
    border-style: double;
  }

  .border-\(--color-border\) {
    border-color: var(--color-border);
  }

  .border-\[\#1a1a2e\] {
    border-color: #1a1a2e;
  }

  .border-\[\#1a1a2e\]\/80 {
    border-color: oklab(22.8438% .00860053 -.0374545 / .8);
  }

  .border-\[\#007AFF\]\/50 {
    border-color: oklab(60.2765% -.047404 -.212489 / .5);
  }

  .border-\[\#8b7355\]\/20 {
    border-color: oklab(57.0702% .0156807 .050256 / .2);
  }

  .border-\[\#8b7355\]\/30 {
    border-color: oklab(57.0702% .0156807 .050256 / .3);
  }

  .border-\[\#8b7355\]\/50 {
    border-color: oklab(57.0702% .0156807 .050256 / .5);
  }

  .border-\[\#9ca3af\] {
    border-color: #9ca3af;
  }

  .border-\[\#20563f\]\/20 {
    border-color: oklab(40.9845% -.0664034 .0208398 / .2);
  }

  .border-\[\#92644a\] {
    border-color: #92644a;
  }

  .border-\[\#c2b280\] {
    border-color: #c2b280;
  }

  .border-\[\#c2b280\]\/20 {
    border-color: oklab(76.5006% -.00292972 .0690469 / .2);
  }

  .border-\[\#d4a017\] {
    border-color: #d4a017;
  }

  .border-\[\#d4a017\]\/20 {
    border-color: oklab(73.4969% .0146058 .145484 / .2);
  }

  .border-\[\#d4a017\]\/25 {
    border-color: oklab(73.4969% .0146058 .145484 / .25);
  }

  .border-\[\#d4a017\]\/30 {
    border-color: oklab(73.4969% .0146058 .145484 / .3);
  }

  .border-\[\#d4a017\]\/40 {
    border-color: oklab(73.4969% .0146058 .145484 / .4);
  }

  .border-\[\#d4a017\]\/50 {
    border-color: oklab(73.4969% .0146058 .145484 / .5);
  }

  .border-\[\#d4a017\]\/60 {
    border-color: oklab(73.4969% .0146058 .145484 / .6);
  }

  .border-\[\#ff6b35\]\/40 {
    border-color: oklab(70.4517% .149185 .121806 / .4);
  }

  .border-\[--color-border\] {
    border-color: --color-border;
  }

  .border-\[hsl\(8_70\%_45\%\)\] {
    border-color: #c33822;
  }

  .border-\[hsl\(8_70\%_45\%\/0\.8\)\] {
    border-color: #c33822cc;
  }

  .border-\[hsl\(14\,92\%\,58\%\)\] {
    border-color: #f65f31;
  }

  .border-\[hsl\(25_40\%_14\%\)\] {
    border-color: #322115;
  }

  .border-\[hsl\(25_40\%_14\%\/0\.2\)\] {
    border-color: #32211533;
  }

  .border-\[hsl\(25_40\%_14\%\/0\.3\)\] {
    border-color: #3221154d;
  }

  .border-\[hsl\(25_40\%_14\%\/0\.4\)\] {
    border-color: #32211566;
  }

  .border-\[hsl\(25_40\%_14\%\/0\.55\)\] {
    border-color: #3221158c;
  }

  .border-\[hsl\(36_65\%_48\%\)\] {
    border-color: #ca8a2b;
  }

  .border-\[hsl\(36_65\%_48\%\/0\.5\)\] {
    border-color: #ca8a2b80;
  }

  .border-\[hsl\(145_40\%_30\%\)\] {
    border-color: #2e6b47;
  }

  .border-\[hsl\(145_40\%_30\%\/0\.4\)\] {
    border-color: #2e6b4766;
  }

  .border-\[hsl\(145_40\%_30\%\/0\.8\)\] {
    border-color: #2e6b47cc;
  }

  .border-\[hsl\(230\,45\%\,8\%\)\] {
    border-color: #0b0e1e;
  }

  .border-\[hsl\(230\,45\%\,8\%\)\]\/30 {
    border-color: oklab(17.0165% .00249018 -.0336131 / .3);
  }

  .border-\[hsl\(230\,45\%\,8\%\)\]\/40 {
    border-color: oklab(17.0165% .00249018 -.0336131 / .4);
  }

  .border-\[var\(--comm-input-border\)\] {
    border-color: var(--comm-input-border);
  }

  .border-\[var\(--comm-pink\)\]\/30 {
    border-color: var(--comm-pink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--comm-pink\)\]\/30 {
      border-color: color-mix(in oklab, var(--comm-pink) 30%, transparent);
    }
  }

  .border-amber-200 {
    border-color: var(--color-amber-200);
  }

  .border-amber-400\/15 {
    border-color: #fcbb0026;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/15 {
      border-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
    }
  }

  .border-amber-400\/20 {
    border-color: #fcbb0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/20 {
      border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
    }
  }

  .border-amber-400\/30 {
    border-color: #fcbb004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/30 {
      border-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
    }
  }

  .border-amber-400\/40 {
    border-color: #fcbb0066;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/40 {
      border-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent);
    }
  }

  .border-black\/5 {
    border-color: #0000000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/5 {
      border-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }

  .border-blue-100\/60 {
    border-color: #dbeafe99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-100\/60 {
      border-color: color-mix(in oklab, var(--color-blue-100) 60%, transparent);
    }
  }

  .border-blue-200 {
    border-color: var(--color-blue-200);
  }

  .border-blue-200\/60 {
    border-color: #bedbff99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-200\/60 {
      border-color: color-mix(in oklab, var(--color-blue-200) 60%, transparent);
    }
  }

  .border-blue-400\/30 {
    border-color: #54a2ff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-400\/30 {
      border-color: color-mix(in oklab, var(--color-blue-400) 30%, transparent);
    }
  }

  .border-blue-500 {
    border-color: var(--color-blue-500);
  }

  .border-current {
    border-color: currentColor;
  }

  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }

  .border-emerald-400\/20 {
    border-color: #00d29433;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-400\/20 {
      border-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
    }
  }

  .border-emerald-400\/30 {
    border-color: #00d2944d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-400\/30 {
      border-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
    }
  }

  .border-emerald-400\/40 {
    border-color: #00d29466;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-400\/40 {
      border-color: color-mix(in oklab, var(--color-emerald-400) 40%, transparent);
    }
  }

  .border-emerald-500 {
    border-color: var(--color-emerald-500);
  }

  .border-emerald-500\/30 {
    border-color: #00bb7f4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-500\/30 {
      border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
    }
  }

  .border-gray-100 {
    border-color: var(--color-gray-100);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-200\/50 {
    border-color: #e5e7eb80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-200\/50 {
      border-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
    }
  }

  .border-gray-200\/60 {
    border-color: #e5e7eb99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-200\/60 {
      border-color: color-mix(in oklab, var(--color-gray-200) 60%, transparent);
    }
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-gray-400\/30 {
    border-color: #99a1af4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-400\/30 {
      border-color: color-mix(in oklab, var(--color-gray-400) 30%, transparent);
    }
  }

  .border-green-200 {
    border-color: var(--color-green-200);
  }

  .border-green-400\/30 {
    border-color: #05df724d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-400\/30 {
      border-color: color-mix(in oklab, var(--color-green-400) 30%, transparent);
    }
  }

  .border-green-500\/30 {
    border-color: #00c7584d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/30 {
      border-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
    }
  }

  .border-green-500\/40 {
    border-color: #00c75866;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/40 {
      border-color: color-mix(in oklab, var(--color-green-500) 40%, transparent);
    }
  }

  .border-green-500\/60 {
    border-color: #00c75899;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/60 {
      border-color: color-mix(in oklab, var(--color-green-500) 60%, transparent);
    }
  }

  .border-red-200 {
    border-color: var(--color-red-200);
  }

  .border-red-300 {
    border-color: var(--color-red-300);
  }

  .border-red-400 {
    border-color: var(--color-red-400);
  }

  .border-red-400\/15 {
    border-color: #ff656826;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/15 {
      border-color: color-mix(in oklab, var(--color-red-400) 15%, transparent);
    }
  }

  .border-red-400\/30 {
    border-color: #ff65684d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/30 {
      border-color: color-mix(in oklab, var(--color-red-400) 30%, transparent);
    }
  }

  .border-red-400\/40 {
    border-color: #ff656866;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/40 {
      border-color: color-mix(in oklab, var(--color-red-400) 40%, transparent);
    }
  }

  .border-red-400\/50 {
    border-color: #ff656880;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/50 {
      border-color: color-mix(in oklab, var(--color-red-400) 50%, transparent);
    }
  }

  .border-red-500 {
    border-color: var(--color-red-500);
  }

  .border-red-500\/30 {
    border-color: #fb2c364d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/30 {
      border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
    }
  }

  .border-red-500\/60 {
    border-color: #fb2c3699;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/60 {
      border-color: color-mix(in oklab, var(--color-red-500) 60%, transparent);
    }
  }

  .border-rose-400\/10 {
    border-color: #ff667f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-400\/10 {
      border-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);
    }
  }

  .border-rose-400\/15 {
    border-color: #ff667f26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-400\/15 {
      border-color: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
    }
  }

  .border-rose-400\/20 {
    border-color: #ff667f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-400\/20 {
      border-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
    }
  }

  .border-rose-400\/30 {
    border-color: #ff667f4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-400\/30 {
      border-color: color-mix(in oklab, var(--color-rose-400) 30%, transparent);
    }
  }

  .border-rose-500\/50 {
    border-color: #ff235780;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-500\/50 {
      border-color: color-mix(in oklab, var(--color-rose-500) 50%, transparent);
    }
  }

  .border-slate-600 {
    border-color: var(--color-slate-600);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-white\/10 {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .border-white\/20 {
    border-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .border-white\/30 {
    border-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/30 {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .border-white\/50 {
    border-color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/50 {
      border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .border-white\/60 {
    border-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/60 {
      border-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .border-white\/\[0\.02\] {
    border-color: #ffffff05;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.02\] {
      border-color: color-mix(in oklab, var(--color-white) 2%, transparent);
    }
  }

  .border-white\/\[0\.04\] {
    border-color: #ffffff0a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.04\] {
      border-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
  }

  .border-white\/\[0\.05\] {
    border-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.05\] {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .border-white\/\[0\.06\] {
    border-color: #ffffff0f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.06\] {
      border-color: color-mix(in oklab, var(--color-white) 6%, transparent);
    }
  }

  .border-white\/\[0\.08\] {
    border-color: #ffffff14;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.08\] {
      border-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }

  .border-yellow-200 {
    border-color: var(--color-yellow-200);
  }

  .border-yellow-400\/30 {
    border-color: #fac8004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-yellow-400\/30 {
      border-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent);
    }
  }

  .border-yellow-400\/50 {
    border-color: #fac80080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-yellow-400\/50 {
      border-color: color-mix(in oklab, var(--color-yellow-400) 50%, transparent);
    }
  }

  .border-t-\[\#d4a017\] {
    border-top-color: #d4a017;
  }

  .border-t-\[hsl\(14\,92\%\,58\%\)\] {
    border-top-color: #f65f31;
  }

  .border-t-\[var\(--comm-pink\)\] {
    border-top-color: var(--comm-pink);
  }

  .border-t-gray-400 {
    border-top-color: var(--color-gray-400);
  }

  .border-t-gray-600 {
    border-top-color: var(--color-gray-600);
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .border-l-blue-500 {
    border-left-color: var(--color-blue-500);
  }

  .border-l-cyan-500 {
    border-left-color: var(--color-cyan-500);
  }

  .border-l-orange-500 {
    border-left-color: var(--color-orange-500);
  }

  .border-l-pink-500 {
    border-left-color: var(--color-pink-500);
  }

  .border-l-red-600 {
    border-left-color: var(--color-red-600);
  }

  .border-l-slate-400 {
    border-left-color: var(--color-slate-400);
  }

  .border-l-transparent {
    border-left-color: #0000;
  }

  .border-l-violet-500 {
    border-left-color: var(--color-violet-500);
  }

  .border-l-yellow-500 {
    border-left-color: var(--color-yellow-500);
  }

  .bg-\(--color-bg\) {
    background-color: var(--color-bg);
  }

  .bg-\[\#0d0d1a\] {
    background-color: #0d0d1a;
  }

  .bg-\[\#1a1a2e\] {
    background-color: #1a1a2e;
  }

  .bg-\[\#1a140d\] {
    background-color: #1a140d;
  }

  .bg-\[\#1a140d\]\/70 {
    background-color: oklab(19.6286% .00539385 .0156126 / .7);
  }

  .bg-\[\#1a140d\]\/95 {
    background-color: oklab(19.6286% .00539385 .0156126 / .95);
  }

  .bg-\[\#2a2723\] {
    background-color: #2a2723;
  }

  .bg-\[\#2a2723\]\/80 {
    background-color: oklab(27.4533% .00216018 .00819643 / .8);
  }

  .bg-\[\#9ca3af\]\/20 {
    background-color: oklab(71.366% -.00289235 -.0189563 / .2);
  }

  .bg-\[\#20563f\] {
    background-color: #20563f;
  }

  .bg-\[\#20563f\]\/10 {
    background-color: oklab(40.9845% -.0664034 .0208398 / .1);
  }

  .bg-\[\#92644a\]\/15 {
    background-color: oklab(54.5464% .0454436 .054583 / .15);
  }

  .bg-\[\#191970\] {
    background-color: #191970;
  }

  .bg-\[\#c2b280\] {
    background-color: #c2b280;
  }

  .bg-\[\#c2b280\]\/15 {
    background-color: oklab(76.5006% -.00292972 .0690469 / .15);
  }

  .bg-\[\#d4a017\] {
    background-color: #d4a017;
  }

  .bg-\[\#d4a017\]\/5 {
    background-color: oklab(73.4969% .0146058 .145484 / .05);
  }

  .bg-\[\#d4a017\]\/10 {
    background-color: oklab(73.4969% .0146058 .145484 / .1);
  }

  .bg-\[\#d4a017\]\/12 {
    background-color: oklab(73.4969% .0146058 .145484 / .12);
  }

  .bg-\[\#d4a017\]\/15 {
    background-color: oklab(73.4969% .0146058 .145484 / .15);
  }

  .bg-\[\#d4a017\]\/25 {
    background-color: oklab(73.4969% .0146058 .145484 / .25);
  }

  .bg-\[\#e8d4a8\]\/70 {
    background-color: oklab(87.5538% .00387737 .061702 / .7);
  }

  .bg-\[\#e8d4a8\]\/80 {
    background-color: oklab(87.5538% .00387737 .061702 / .8);
  }

  .bg-\[\#e8dcc8\] {
    background-color: #e8dcc8;
  }

  .bg-\[\#f5e6c8\] {
    background-color: #f5e6c8;
  }

  .bg-\[\#f5f0e6\] {
    background-color: #f5f0e6;
  }

  .bg-\[\#faf0dc\] {
    background-color: #faf0dc;
  }

  .bg-\[\#faf0dc\]\/60 {
    background-color: oklab(95.7676% .00268364 .0283529 / .6);
  }

  .bg-\[\#faf0dc\]\/70 {
    background-color: oklab(95.7676% .00268364 .0283529 / .7);
  }

  .bg-\[\#faf0dc\]\/80 {
    background-color: oklab(95.7676% .00268364 .0283529 / .8);
  }

  .bg-\[\#faf0dc\]\/90 {
    background-color: oklab(95.7676% .00268364 .0283529 / .9);
  }

  .bg-\[\#ff6b35\]\/15 {
    background-color: oklab(70.4517% .149185 .121806 / .15);
  }

  .bg-\[--color-bg\] {
    background-color: --color-bg;
  }

  .bg-\[hsl\(0\,84\%\,60\%\)\] {
    background-color: #ef4343;
  }

  .bg-\[hsl\(0\,84\%\,60\%\)\]\/20 {
    background-color: oklab(63.5775% .18861 .0896094 / .2);
  }

  .bg-\[hsl\(8_70\%_45\%\/0\.1\)\] {
    background-color: #c338221a;
  }

  .bg-\[hsl\(14\,92\%\,58\%\)\] {
    background-color: #f65f31;
  }

  .bg-\[hsl\(14\,92\%\,58\%\)\]\/10 {
    background-color: oklab(67.5347% .15554 .11694 / .1);
  }

  .bg-\[hsl\(14\,92\%\,58\%\)\]\/20 {
    background-color: oklab(67.5347% .15554 .11694 / .2);
  }

  .bg-\[hsl\(25_40\%_14\%\/0\.1\)\] {
    background-color: #3221151a;
  }

  .bg-\[hsl\(25_40\%_14\%\/0\.3\)\] {
    background-color: #3221154d;
  }

  .bg-\[hsl\(25_40\%_14\%\/0\.4\)\] {
    background-color: #32211566;
  }

  .bg-\[hsl\(25_40\%_14\%\/0\.15\)\] {
    background-color: #32211526;
  }

  .bg-\[hsl\(34_32\%_78\%\)\] {
    background-color: #d9c9b5;
  }

  .bg-\[hsl\(36_42\%_88\%\)\] {
    background-color: #ede3d4;
  }

  .bg-\[hsl\(36_65\%_48\%\/0\.1\)\] {
    background-color: #ca8a2b1a;
  }

  .bg-\[hsl\(36_65\%_48\%\/0\.15\)\] {
    background-color: #ca8a2b26;
  }

  .bg-\[hsl\(38_42\%_90\%\)\] {
    background-color: #f0e8db;
  }

  .bg-\[hsl\(38_42\%_90\%\/0\.6\)\] {
    background-color: #f0e8db99;
  }

  .bg-\[hsl\(38_42\%_90\%\/0\.8\)\] {
    background-color: #f0e8dbcc;
  }

  .bg-\[hsl\(38_42\%_90\%\/0\.85\)\] {
    background-color: #f0e8dbd9;
  }

  .bg-\[hsl\(48\,100\%\,56\%\)\] {
    background-color: #ffd21f;
  }

  .bg-\[hsl\(48\,100\%\,56\%\)\]\/30 {
    background-color: oklab(87.747% -.00775948 .174314 / .3);
  }

  .bg-\[hsl\(60\,9\%\,98\%\)\] {
    background-color: #fafaf9;
  }

  .bg-\[hsl\(60\,9\%\,98\%\)\]\/70 {
    background-color: oklab(98.4825% -.000373036 .00126523 / .7);
  }

  .bg-\[hsl\(145_40\%_30\%\/0\.12\)\] {
    background-color: #2e6b471f;
  }

  .bg-\[hsl\(145_40\%_30\%\/0\.15\)\] {
    background-color: #2e6b4726;
  }

  .bg-\[hsl\(160\,84\%\,39\%\)\] {
    background-color: #10b77f;
  }

  .bg-\[hsl\(220\,14\%\,96\%\)\] {
    background-color: #f3f4f6;
  }

  .bg-\[hsl\(224\,84\%\,48\%\)\] {
    background-color: #144ae1;
  }

  .bg-\[hsl\(230\,45\%\,8\%\)\] {
    background-color: #0b0e1e;
  }

  .bg-\[hsl\(230\,45\%\,8\%\)\]\/20 {
    background-color: oklab(17.0165% .00249018 -.0336131 / .2);
  }

  .bg-\[hsl\(330\,60\%\,55\%\)\] {
    background-color: #d1478c;
  }

  .bg-\[var\(--comm-accent-primary\)\]\/20 {
    background-color: var(--comm-accent-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--comm-accent-primary\)\]\/20 {
      background-color: color-mix(in oklab, var(--comm-accent-primary) 20%, transparent);
    }
  }

  .bg-\[var\(--comm-danger\)\] {
    background-color: var(--comm-danger);
  }

  .bg-\[var\(--comm-pink\)\]\/20 {
    background-color: var(--comm-pink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--comm-pink\)\]\/20 {
      background-color: color-mix(in oklab, var(--comm-pink) 20%, transparent);
    }
  }

  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-amber-300\/30 {
    background-color: #ffd2364d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-300\/30 {
      background-color: color-mix(in oklab, var(--color-amber-300) 30%, transparent);
    }
  }

  .bg-amber-400\/5 {
    background-color: #fcbb000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-400\/5 {
      background-color: color-mix(in oklab, var(--color-amber-400) 5%, transparent);
    }
  }

  .bg-amber-400\/10 {
    background-color: #fcbb001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-400\/10 {
      background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
    }
  }

  .bg-amber-400\/30 {
    background-color: #fcbb004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-400\/30 {
      background-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
    }
  }

  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }

  .bg-amber-500\/20 {
    background-color: #f99c0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/20 {
      background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }

  .bg-amber-600 {
    background-color: var(--color-amber-600);
  }

  .bg-black\/20 {
    background-color: #0003;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/20 {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-black\/80 {
    background-color: #000c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/80 {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }

  .bg-black\/95 {
    background-color: #000000f2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/95 {
      background-color: color-mix(in oklab, var(--color-black) 95%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-50\/30 {
    background-color: #eff6ff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-50\/30 {
      background-color: color-mix(in oklab, var(--color-blue-50) 30%, transparent);
    }
  }

  .bg-blue-50\/40 {
    background-color: #eff6ff66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-50\/40 {
      background-color: color-mix(in oklab, var(--color-blue-50) 40%, transparent);
    }
  }

  .bg-blue-100\/60 {
    background-color: #dbeafe99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-100\/60 {
      background-color: color-mix(in oklab, var(--color-blue-100) 60%, transparent);
    }
  }

  .bg-blue-200\/40 {
    background-color: #bedbff66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-200\/40 {
      background-color: color-mix(in oklab, var(--color-blue-200) 40%, transparent);
    }
  }

  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }

  .bg-blue-500\/10 {
    background-color: #3080ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/10 {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }

  .bg-blue-950\/20 {
    background-color: #16245633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-950\/20 {
      background-color: color-mix(in oklab, var(--color-blue-950) 20%, transparent);
    }
  }

  .bg-current {
    background-color: currentColor;
  }

  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }

  .bg-emerald-50\/50 {
    background-color: #ecfdf580;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-50\/50 {
      background-color: color-mix(in oklab, var(--color-emerald-50) 50%, transparent);
    }
  }

  .bg-emerald-400 {
    background-color: var(--color-emerald-400);
  }

  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }

  .bg-emerald-500\/8 {
    background-color: #00bb7f14;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/8 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 8%, transparent);
    }
  }

  .bg-emerald-500\/10 {
    background-color: #00bb7f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/10 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }

  .bg-emerald-500\/20 {
    background-color: #00bb7f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/20 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-gray-100\/50 {
    background-color: #f3f4f680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-100\/50 {
      background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
    }
  }

  .bg-gray-100\/80 {
    background-color: #f3f4f6cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-100\/80 {
      background-color: color-mix(in oklab, var(--color-gray-100) 80%, transparent);
    }
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-gray-200\/30 {
    background-color: #e5e7eb4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-200\/30 {
      background-color: color-mix(in oklab, var(--color-gray-200) 30%, transparent);
    }
  }

  .bg-gray-200\/50 {
    background-color: #e5e7eb80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-200\/50 {
      background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
    }
  }

  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }

  .bg-gray-300\/20 {
    background-color: #d1d5dc33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-300\/20 {
      background-color: color-mix(in oklab, var(--color-gray-300) 20%, transparent);
    }
  }

  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }

  .bg-gray-500\/10 {
    background-color: #6a72821a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-500\/10 {
      background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
    }
  }

  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }

  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }

  .bg-green-100 {
    background-color: var(--color-green-100);
  }

  .bg-green-500 {
    background-color: var(--color-green-500);
  }

  .bg-green-500\/10 {
    background-color: #00c7581a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/10 {
      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }
  }

  .bg-green-600 {
    background-color: var(--color-green-600);
  }

  .bg-indigo-500\/20 {
    background-color: #625fff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-500\/20 {
      background-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
    }
  }

  .bg-pink-500 {
    background-color: var(--color-pink-500);
  }

  .bg-purple-500 {
    background-color: var(--color-purple-500);
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-50\/50 {
    background-color: #fef2f280;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-50\/50 {
      background-color: color-mix(in oklab, var(--color-red-50) 50%, transparent);
    }
  }

  .bg-red-100 {
    background-color: var(--color-red-100);
  }

  .bg-red-400 {
    background-color: var(--color-red-400);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-red-500\/8 {
    background-color: #fb2c3614;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/8 {
      background-color: color-mix(in oklab, var(--color-red-500) 8%, transparent);
    }
  }

  .bg-red-500\/10 {
    background-color: #fb2c361a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/10 {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }

  .bg-red-500\/15 {
    background-color: #fb2c3626;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/15 {
      background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
    }
  }

  .bg-red-500\/20 {
    background-color: #fb2c3633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/20 {
      background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }

  .bg-red-600 {
    background-color: var(--color-red-600);
  }

  .bg-rose-400\/10 {
    background-color: #ff667f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-400\/10 {
      background-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);
    }
  }

  .bg-rose-400\/20 {
    background-color: #ff667f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-400\/20 {
      background-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
    }
  }

  .bg-rose-500\/5 {
    background-color: #ff23570d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/5 {
      background-color: color-mix(in oklab, var(--color-rose-500) 5%, transparent);
    }
  }

  .bg-rose-500\/8 {
    background-color: #ff235714;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/8 {
      background-color: color-mix(in oklab, var(--color-rose-500) 8%, transparent);
    }
  }

  .bg-rose-500\/20 {
    background-color: #ff235733;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/20 {
      background-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
    }
  }

  .bg-rose-500\/30 {
    background-color: #ff23574d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/30 {
      background-color: color-mix(in oklab, var(--color-rose-500) 30%, transparent);
    }
  }

  .bg-sky-200\/50 {
    background-color: #b8e6fe80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sky-200\/50 {
      background-color: color-mix(in oklab, var(--color-sky-200) 50%, transparent);
    }
  }

  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }

  .bg-slate-100\/80 {
    background-color: #f1f5f9cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-100\/80 {
      background-color: color-mix(in oklab, var(--color-slate-100) 80%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/5 {
    background-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/5 {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-white\/20 {
    background-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .bg-white\/30 {
    background-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/30 {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .bg-white\/40 {
    background-color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/40 {
      background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  .bg-white\/50 {
    background-color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/50 {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .bg-white\/60 {
    background-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/60 {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .bg-white\/70 {
    background-color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/70 {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .bg-white\/75 {
    background-color: #ffffffbf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/75 {
      background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
  }

  .bg-white\/90 {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .bg-white\/\[0\.01\] {
    background-color: #ffffff03;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.01\] {
      background-color: color-mix(in oklab, var(--color-white) 1%, transparent);
    }
  }

  .bg-white\/\[0\.02\] {
    background-color: #ffffff05;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.02\] {
      background-color: color-mix(in oklab, var(--color-white) 2%, transparent);
    }
  }

  .bg-white\/\[0\.03\] {
    background-color: #ffffff08;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.03\] {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
  }

  .bg-white\/\[0\.04\] {
    background-color: #ffffff0a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.04\] {
      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
  }

  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }

  .bg-yellow-500 {
    background-color: var(--color-yellow-500);
  }

  .bg-yellow-500\/10 {
    background-color: #edb2001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-500\/10 {
      background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
    }
  }

  .bg-yellow-500\/20 {
    background-color: #edb20033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-500\/20 {
      background-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
    }
  }

  .bg-yellow-600 {
    background-color: var(--color-yellow-600);
  }

  .bg-yellow-900\/50 {
    background-color: #733e0a80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-900\/50 {
      background-color: color-mix(in oklab, var(--color-yellow-900) 50%, transparent);
    }
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-l {
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-\[linear-gradient\(180deg\,hsl\(var\(--lapis\)\)_0\%\,hsl\(var\(--panel\)\)_28\%\,hsl\(var\(--papyrus\)\)_100\%\)\] {
    background-image: linear-gradient(180deg,hsl(var(--lapis)) 0%,hsl(var(--panel)) 28%,hsl(var(--papyrus)) 100%);
  }

  .from-\[\#00d4ff\] {
    --tw-gradient-from: #00d4ff;
    --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-\[\#06b6d4\] {
    --tw-gradient-from: #06b6d4;
    --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-\[\#007AFF\]\/30 {
    --tw-gradient-from: oklab(60.2765% -.047404 -.212489 / .3);
    --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-\[\#007aff\] {
    --tw-gradient-from: #007aff;
    --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-\[\#84cc16\] {
    --tw-gradient-from: #84cc16;
    --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-\[\#64748b\] {
    --tw-gradient-from: #64748b;
    --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-\[\#191970\] {
    --tw-gradient-from: #191970;
    --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-\[\#191970\]\/20 {
    --tw-gradient-from: oklab(28.8119% .00692758 -.143459 / .2);
    --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-\[\#191970\]\/35 {
    --tw-gradient-from: oklab(28.8119% .00692758 -.143459 / .35);
    --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-\[\#d4a017\] {
    --tw-gradient-from: #d4a017;
    --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-\[\#d4a017\]\/20 {
    --tw-gradient-from: oklab(73.4969% .0146058 .145484 / .2);
    --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-\[\#f5e6c8\]\/90 {
    --tw-gradient-from: oklab(92.9194% .0040406 .0425282 / .9);
    --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-\[\#f59e0b\] {
    --tw-gradient-from: #f59e0b;
    --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-\[\#faf0dc\]\/90 {
    --tw-gradient-from: oklab(95.7676% .00268364 .0283529 / .9);
    --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-\[hsl\(8_70\%_45\%\)\] {
    --tw-gradient-from: #c33822;
    --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-\[hsl\(14\,92\%\,58\%\)\] {
    --tw-gradient-from: #f65f31;
    --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-\[hsl\(25_40\%_14\%\)\] {
    --tw-gradient-from: #322115;
    --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-\[hsl\(25_40\%_14\%\/0\.4\)\] {
    --tw-gradient-from: #32211566;
    --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-\[hsl\(36_65\%_48\%\)\] {
    --tw-gradient-from: #ca8a2b;
    --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-\[hsl\(40_70\%_62\%\)\] {
    --tw-gradient-from: #e2b55a;
    --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-\[hsl\(145_40\%_30\%\)\] {
    --tw-gradient-from: #2e6b47;
    --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-\[hsl\(192_55\%_22\%\)\] {
    --tw-gradient-from: #194b57;
    --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-\[oklch\(0\.7_0\.27_0\)\] {
    --tw-gradient-from: oklch(70% .27 0);
    --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-\[oklch\(0\.82_0\.16_210\)\] {
    --tw-gradient-from: oklch(82% .16 210);
    --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-\[oklch\(0\.85_0\.18_85\)\] {
    --tw-gradient-from: oklch(85% .18 85);
    --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-\[oklch\(0\.86_0\.22_130\)\] {
    --tw-gradient-from: oklch(86% .22 130);
    --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-\[var\(--comm-accent-primary\)\]\/40 {
    --tw-gradient-from: var(--comm-accent-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-\[var\(--comm-accent-primary\)\]\/40 {
      --tw-gradient-from: color-mix(in oklab, var(--comm-accent-primary) 40%, transparent);
    }
  }

  .from-\[var\(--comm-accent-primary\)\]\/40 {
    --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-\[var\(--comm-bg-primary\)\]\/80 {
    --tw-gradient-from: var(--comm-bg-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-\[var\(--comm-bg-primary\)\]\/80 {
      --tw-gradient-from: color-mix(in oklab, var(--comm-bg-primary) 80%, transparent);
    }
  }

  .from-\[var\(--comm-bg-primary\)\]\/80 {
    --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-\[var\(--cyan-glow\)\] {
    --tw-gradient-from: var(--cyan-glow);
    --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-\[var\(--electric\)\] {
    --tw-gradient-from: var(--electric);
    --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-\[var\(--gold\)\] {
    --tw-gradient-from: var(--gold);
    --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-\[var\(--muted\)\] {
    --tw-gradient-from: var(--muted);
    --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-amber-400 {
    --tw-gradient-from: var(--color-amber-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));
  }

  .from-amber-500 {
    --tw-gradient-from: var(--color-amber-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-amber-500\/15 {
    --tw-gradient-from: #f99c0026;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-amber-500\/15 {
      --tw-gradient-from: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
    }
  }

  .from-amber-500\/15 {
    --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-amber-500\/20 {
    --tw-gradient-from: #f99c0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-amber-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }

  .from-amber-500\/20 {
    --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-amber-600 {
    --tw-gradient-from: var(--color-amber-600);
    --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-blue-300 {
    --tw-gradient-from: var(--color-blue-300);
    --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-blue-400 {
    --tw-gradient-from: var(--color-blue-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));
  }

  .from-blue-500 {
    --tw-gradient-from: var(--color-blue-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-blue-500\/20 {
    --tw-gradient-from: #3080ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-blue-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .from-blue-500\/20 {
    --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-cyan-500 {
    --tw-gradient-from: var(--color-cyan-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-cyan-500\/20 {
    --tw-gradient-from: #00b7d733;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-cyan-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-cyan-500) 20%, transparent);
    }
  }

  .from-cyan-500\/20 {
    --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-emerald-500 {
    --tw-gradient-from: var(--color-emerald-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-emerald-500\/20 {
    --tw-gradient-from: #00bb7f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-emerald-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .from-emerald-500\/20 {
    --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-gray-50 {
    --tw-gradient-from: var(--color-gray-50);
    --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-gray-100 {
    --tw-gradient-from: var(--color-gray-100);
    --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-gray-200\/30 {
    --tw-gradient-from: #e5e7eb4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-gray-200\/30 {
      --tw-gradient-from: color-mix(in oklab, var(--color-gray-200) 30%, transparent);
    }
  }

  .from-gray-200\/30 {
    --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-indigo-400 {
    --tw-gradient-from: var(--color-indigo-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));
  }

  .from-indigo-600 {
    --tw-gradient-from: var(--color-indigo-600);
    --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-orange-500 {
    --tw-gradient-from: var(--color-orange-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-pink-500\/20 {
    --tw-gradient-from: #f6339a33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-pink-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-pink-500) 20%, transparent);
    }
  }

  .from-pink-500\/20 {
    --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-purple-500 {
    --tw-gradient-from: var(--color-purple-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-purple-500\/20 {
    --tw-gradient-from: #ac4bff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-purple-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
    }
  }

  .from-purple-500\/20 {
    --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-red-50\/90 {
    --tw-gradient-from: #fef2f2e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-red-50\/90 {
      --tw-gradient-from: color-mix(in oklab, var(--color-red-50) 90%, transparent);
    }
  }

  .from-red-50\/90 {
    --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-red-900\/90 {
    --tw-gradient-from: #82181ae6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-red-900\/90 {
      --tw-gradient-from: color-mix(in oklab, var(--color-red-900) 90%, transparent);
    }
  }

  .from-red-900\/90 {
    --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-rose-500 {
    --tw-gradient-from: var(--color-rose-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-rose-700 {
    --tw-gradient-from: var(--color-rose-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));
  }

  .from-rose-800 {
    --tw-gradient-from: var(--color-rose-800);
    --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-400 {
    --tw-gradient-from: var(--color-sky-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));
  }

  .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-slate-800 {
    --tw-gradient-from: var(--color-slate-800);
    --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-slate-900 {
    --tw-gradient-from: var(--color-slate-900);
    --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-slate-900\/50 {
    --tw-gradient-from: #0f172b80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-slate-900\/50 {
      --tw-gradient-from: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
    }
  }

  .from-slate-900\/50 {
    --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-white {
    --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));
  }

  .from-white\/20 {
    --tw-gradient-from: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-white\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .from-white\/20 {
    --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-yellow-900\/90 {
    --tw-gradient-from: #733e0ae6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-yellow-900\/90 {
      --tw-gradient-from: color-mix(in oklab, var(--color-yellow-900) 90%, transparent);
    }
  }

  .from-yellow-900\/90 {
    --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));
  }

  .via-\[\#2a2723\] {
    --tw-gradient-via: #2a2723;
    --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);
  }

  .via-\[\#007AFF\]\/20 {
    --tw-gradient-via: oklab(60.2765% -.047404 -.212489 / .2);
    --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);
  }

  .via-\[\#20563f\] {
    --tw-gradient-via: #20563f;
    --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);
  }

  .via-\[\#191970\]\/55 {
    --tw-gradient-via: oklab(28.8119% .00692758 -.143459 / .55);
    --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);
  }

  .via-\[\#d4a017\]\/10 {
    --tw-gradient-via: oklab(73.4969% .0146058 .145484 / .1);
    --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);
  }

  .via-\[\#d4a017\]\/70 {
    --tw-gradient-via: oklab(73.4969% .0146058 .145484 / .7);
    --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);
  }

  .via-\[hsl\(36_65\%_48\%\/0\.15\)\] {
    --tw-gradient-via: #ca8a2b26;
    --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);
  }

  .via-\[var\(--comm-accent-primary-light\)\]\/30 {
    --tw-gradient-via: var(--comm-accent-primary-light);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-\[var\(--comm-accent-primary-light\)\]\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--comm-accent-primary-light) 30%, transparent);
    }
  }

  .via-\[var\(--comm-accent-primary-light\)\]\/30 {
    --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);
  }

  .via-\[var\(--comm-bg-primary\)\]\/20 {
    --tw-gradient-via: var(--comm-bg-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-\[var\(--comm-bg-primary\)\]\/20 {
      --tw-gradient-via: color-mix(in oklab, var(--comm-bg-primary) 20%, transparent);
    }
  }

  .via-\[var\(--comm-bg-primary\)\]\/20 {
    --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);
  }

  .via-amber-400\/30 {
    --tw-gradient-via: #fcbb004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-amber-400\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
    }
  }

  .via-amber-400\/30 {
    --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);
  }

  .via-blue-50\/80 {
    --tw-gradient-via: #eff6ffcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-blue-50\/80 {
      --tw-gradient-via: color-mix(in oklab, var(--color-blue-50) 80%, transparent);
    }
  }

  .via-blue-50\/80 {
    --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);
  }

  .via-blue-400\/10 {
    --tw-gradient-via: #54a2ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-blue-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-blue-400) 10%, transparent);
    }
  }

  .via-blue-400\/10 {
    --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);
  }

  .via-orange-500 {
    --tw-gradient-via: var(--color-orange-500);
    --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);
  }

  .via-purple-400\/10 {
    --tw-gradient-via: #c07eff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-purple-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-purple-400) 10%, transparent);
    }
  }

  .via-purple-400\/10 {
    --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);
  }

  .via-red-400\/70 {
    --tw-gradient-via: #ff6568b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-red-400\/70 {
      --tw-gradient-via: color-mix(in oklab, var(--color-red-400) 70%, transparent);
    }
  }

  .via-red-400\/70 {
    --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);
  }

  .via-rose-400\/10 {
    --tw-gradient-via: #ff667f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-rose-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-rose-400) 10%, transparent);
    }
  }

  .via-rose-400\/10 {
    --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);
  }

  .via-rose-400\/25 {
    --tw-gradient-via: #ff667f40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-rose-400\/25 {
      --tw-gradient-via: color-mix(in oklab, var(--color-rose-400) 25%, transparent);
    }
  }

  .via-rose-400\/25 {
    --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);
  }

  .via-sky-400\/10 {
    --tw-gradient-via: #00bcfe1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-sky-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-sky-400) 10%, transparent);
    }
  }

  .via-sky-400\/10 {
    --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);
  }

  .via-slate-800 {
    --tw-gradient-via: var(--color-slate-800);
    --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);
  }

  .via-teal-400\/10 {
    --tw-gradient-via: #00d3bd1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-teal-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-teal-400) 10%, transparent);
    }
  }

  .via-teal-400\/10 {
    --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);
  }

  .via-transparent {
    --tw-gradient-via: transparent;
    --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);
  }

  .via-white {
    --tw-gradient-via: var(--color-white);
    --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);
  }

  .via-white\/10 {
    --tw-gradient-via: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-white\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .via-white\/10 {
    --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);
  }

  .via-white\/30 {
    --tw-gradient-via: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-white\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .via-white\/30 {
    --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);
  }

  .via-yellow-400\/10 {
    --tw-gradient-via: #fac8001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-yellow-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-yellow-400) 10%, transparent);
    }
  }

  .via-yellow-400\/10 {
    --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-\[\#0a84ff\] {
    --tw-gradient-to: #0a84ff;
    --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-\[\#06b6d4\] {
    --tw-gradient-to: #06b6d4;
    --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-\[\#84cc16\] {
    --tw-gradient-to: #84cc16;
    --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-\[\#94a3b8\] {
    --tw-gradient-to: #94a3b8;
    --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-\[\#0099cc\] {
    --tw-gradient-to: #09c;
    --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-\[\#c0c0c0\] {
    --tw-gradient-to: silver;
    --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-\[\#d4a017\] {
    --tw-gradient-to: #d4a017;
    --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-\[\#d4a017\]\/20 {
    --tw-gradient-to: oklab(73.4969% .0146058 .145484 / .2);
    --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-\[\#e8d4a8\]\/80 {
    --tw-gradient-to: oklab(87.5538% .00387737 .061702 / .8);
    --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-\[\#ec4899\] {
    --tw-gradient-to: #ec4899;
    --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-\[\#f4d03f\] {
    --tw-gradient-to: #f4d03f;
    --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-\[\#faf0dc\]\/90 {
    --tw-gradient-to: oklab(95.7676% .00268364 .0283529 / .9);
    --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-\[\#ff6b35\]\/5 {
    --tw-gradient-to: oklab(70.4517% .149185 .121806 / .05);
    --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-\[hsl\(8_70\%_45\%\)\] {
    --tw-gradient-to: #c33822;
    --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-\[hsl\(8_70\%_45\%\/0\.7\)\] {
    --tw-gradient-to: #c33822b3;
    --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-\[hsl\(25_40\%_14\%\/0\.2\)\] {
    --tw-gradient-to: #32211533;
    --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-\[hsl\(36_65\%_48\%\)\] {
    --tw-gradient-to: #ca8a2b;
    --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-\[hsl\(48\,100\%\,56\%\)\] {
    --tw-gradient-to: #ffd21f;
    --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-\[hsl\(145_40\%_30\%\/0\.7\)\] {
    --tw-gradient-to: #2e6b47b3;
    --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-\[hsl\(192_55\%_22\%\)\] {
    --tw-gradient-to: #194b57;
    --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-\[hsl\(200_60\%_14\%\)\] {
    --tw-gradient-to: #0e2b39;
    --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-\[oklch\(0\.7_0\.2_260\)\] {
    --tw-gradient-to: oklch(70% .2 260);
    --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-\[oklch\(0\.7_0\.27_0\)\] {
    --tw-gradient-to: oklch(70% .27 0);
    --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-\[oklch\(0\.82_0\.16_210\)\] {
    --tw-gradient-to: oklch(82% .16 210);
    --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-\[oklch\(0\.85_0\.18_85\)\] {
    --tw-gradient-to: oklch(85% .18 85);
    --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-\[oklch\(0\.86_0\.22_130\)\] {
    --tw-gradient-to: oklch(86% .22 130);
    --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-\[var\(--comm-accent-secondary\)\]\/40 {
    --tw-gradient-to: var(--comm-accent-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-\[var\(--comm-accent-secondary\)\]\/40 {
      --tw-gradient-to: color-mix(in oklab, var(--comm-accent-secondary) 40%, transparent);
    }
  }

  .to-\[var\(--comm-accent-secondary\)\]\/40 {
    --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-\[var\(--cyan-glow\)\] {
    --tw-gradient-to: var(--cyan-glow);
    --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-\[var\(--electric\)\] {
    --tw-gradient-to: var(--electric);
    --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-\[var\(--magenta\)\] {
    --tw-gradient-to: var(--magenta);
    --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-\[var\(--secondary\)\] {
    --tw-gradient-to: var(--secondary);
    --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-amber-700 {
    --tw-gradient-to: var(--color-amber-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-amber-700\/5 {
    --tw-gradient-to: #b750000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-amber-700\/5 {
      --tw-gradient-to: color-mix(in oklab, var(--color-amber-700) 5%, transparent);
    }
  }

  .to-amber-700\/5 {
    --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-amber-700\/10 {
    --tw-gradient-to: #b750001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-amber-700\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--color-amber-700) 10%, transparent);
    }
  }

  .to-amber-700\/10 {
    --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-amber-950\/90 {
    --tw-gradient-to: #461901e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-amber-950\/90 {
      --tw-gradient-to: color-mix(in oklab, var(--color-amber-950) 90%, transparent);
    }
  }

  .to-amber-950\/90 {
    --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-blue-400\/20 {
    --tw-gradient-to: #54a2ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-blue-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-blue-400) 20%, transparent);
    }
  }

  .to-blue-400\/20 {
    --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-blue-500 {
    --tw-gradient-to: var(--color-blue-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-blue-600 {
    --tw-gradient-to: var(--color-blue-600);
    --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-cyan-400\/20 {
    --tw-gradient-to: #00d2ef33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-cyan-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-cyan-400) 20%, transparent);
    }
  }

  .to-cyan-400\/20 {
    --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-emerald-700 {
    --tw-gradient-to: var(--color-emerald-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-fuchsia-400\/20 {
    --tw-gradient-to: #ec6cff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-fuchsia-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-fuchsia-400) 20%, transparent);
    }
  }

  .to-fuchsia-400\/20 {
    --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-gray-100 {
    --tw-gradient-to: var(--color-gray-100);
    --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-gray-200 {
    --tw-gradient-to: var(--color-gray-200);
    --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-green-400\/20 {
    --tw-gradient-to: #05df7233;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-green-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-green-400) 20%, transparent);
    }
  }

  .to-green-400\/20 {
    --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-indigo-500 {
    --tw-gradient-to: var(--color-indigo-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-indigo-600 {
    --tw-gradient-to: var(--color-indigo-600);
    --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-orange-50\/90 {
    --tw-gradient-to: #fff7ede6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-orange-50\/90 {
      --tw-gradient-to: color-mix(in oklab, var(--color-orange-50) 90%, transparent);
    }
  }

  .to-orange-50\/90 {
    --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-orange-400\/20 {
    --tw-gradient-to: #ff8b1a33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-orange-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-orange-400) 20%, transparent);
    }
  }

  .to-orange-400\/20 {
    --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-orange-700 {
    --tw-gradient-to: var(--color-orange-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-pink-400\/20 {
    --tw-gradient-to: #fb64b633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-pink-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-pink-400) 20%, transparent);
    }
  }

  .to-pink-400\/20 {
    --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-pink-500 {
    --tw-gradient-to: var(--color-pink-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-purple-700 {
    --tw-gradient-to: var(--color-purple-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-red-500 {
    --tw-gradient-to: var(--color-red-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-red-600 {
    --tw-gradient-to: var(--color-red-600);
    --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-red-950\/90 {
    --tw-gradient-to: #460809e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-red-950\/90 {
      --tw-gradient-to: color-mix(in oklab, var(--color-red-950) 90%, transparent);
    }
  }

  .to-red-950\/90 {
    --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-rose-400 {
    --tw-gradient-to: var(--color-rose-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-rose-600 {
    --tw-gradient-to: var(--color-rose-600);
    --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-rose-700 {
    --tw-gradient-to: var(--color-rose-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-sky-100\/60 {
    --tw-gradient-to: #dff2fe99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-sky-100\/60 {
      --tw-gradient-to: color-mix(in oklab, var(--color-sky-100) 60%, transparent);
    }
  }

  .to-sky-100\/60 {
    --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-sky-500 {
    --tw-gradient-to: 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));
  }

  .to-slate-900 {
    --tw-gradient-to: var(--color-slate-900);
    --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-yellow-700 {
    --tw-gradient-to: var(--color-yellow-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));
  }

  .bg-cover {
    background-size: cover;
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }

  .bg-center {
    background-position: center;
  }

  .fill-current {
    fill: currentColor;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

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

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

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

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

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

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-12 {
    padding: calc(var(--spacing) * 12);
  }

  .p-\[1px\] {
    padding: 1px;
  }

  .px-\(--cell-size\) {
    padding-inline: var(--cell-size);
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .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-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }

  .px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }

  .px-20 {
    padding-inline: calc(var(--spacing) * 20);
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .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-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .py-32 {
    padding-block: calc(var(--spacing) * 32);
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }

  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }

  .pt-\[20vh\] {
    padding-top: 20vh;
  }

  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }

  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-11 {
    padding-right: calc(var(--spacing) * 11);
  }

  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }

  .pr-14 {
    padding-right: calc(var(--spacing) * 14);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .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-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }

  .pb-\[50rem\] {
    padding-bottom: 50rem;
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }

  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }

  .pl-20 {
    padding-left: calc(var(--spacing) * 20);
  }

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

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

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

  .align-middle {
    vertical-align: middle;
  }

  .font-\[Cinzel\] {
    font-family: Cinzel;
  }

  .font-\[Cormorant_Garamond\] {
    font-family: Cormorant Garamond;
  }

  .font-\[JetBrains_Mono\] {
    font-family: JetBrains Mono;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .font-serif {
    font-family: var(--font-serif);
  }

  .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-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }

  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--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-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));
  }

  .text-\[0\.6rem\] {
    font-size: .6rem;
  }

  .text-\[0\.7rem\] {
    font-size: .7rem;
  }

  .text-\[0\.8rem\] {
    font-size: .8rem;
  }

  .text-\[0\.55rem\] {
    font-size: .55rem;
  }

  .text-\[0\.65rem\] {
    font-size: .65rem;
  }

  .text-\[0\.95rem\] {
    font-size: .95rem;
  }

  .text-\[3\.5rem\] {
    font-size: 3.5rem;
  }

  .text-\[6px\] {
    font-size: 6px;
  }

  .text-\[7px\] {
    font-size: 7px;
  }

  .text-\[7rem\] {
    font-size: 7rem;
  }

  .text-\[8px\] {
    font-size: 8px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[14rem\] {
    font-size: 14rem;
  }

  .text-\[clamp\(2\.5rem\,9vw\,7\.5rem\)\] {
    font-size: clamp(2.5rem, 9vw, 7.5rem);
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-\[0\.9\] {
    --tw-leading: .9;
    line-height: .9;
  }

  .leading-\[0\.88\] {
    --tw-leading: .88;
    line-height: .88;
  }

  .leading-\[0\.92\] {
    --tw-leading: .92;
    line-height: .92;
  }

  .leading-\[0\.95\] {
    --tw-leading: .95;
    line-height: .95;
  }

  .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-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extralight {
    --tw-font-weight: var(--font-weight-extralight);
    font-weight: var(--font-weight-extralight);
  }

  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[0\.2em\] {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }

  .tracking-\[0\.3em\] {
    --tw-tracking: .3em;
    letter-spacing: .3em;
  }

  .tracking-\[0\.04em\] {
    --tw-tracking: .04em;
    letter-spacing: .04em;
  }

  .tracking-\[0\.4em\] {
    --tw-tracking: .4em;
    letter-spacing: .4em;
  }

  .tracking-\[0\.06em\] {
    --tw-tracking: .06em;
    letter-spacing: .06em;
  }

  .tracking-\[0\.15em\] {
    --tw-tracking: .15em;
    letter-spacing: .15em;
  }

  .tracking-\[0\.16em\] {
    --tw-tracking: .16em;
    letter-spacing: .16em;
  }

  .tracking-\[0\.18em\] {
    --tw-tracking: .18em;
    letter-spacing: .18em;
  }

  .tracking-\[0\.25em\] {
    --tw-tracking: .25em;
    letter-spacing: .25em;
  }

  .tracking-\[0\.32em\] {
    --tw-tracking: .32em;
    letter-spacing: .32em;
  }

  .tracking-\[0\.45em\] {
    --tw-tracking: .45em;
    letter-spacing: .45em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

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

  .break-words {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-normal {
    white-space: normal;
  }

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

  .text-\[\#00d4ff\] {
    color: #00d4ff;
  }

  .text-\[\#1a1a2e\] {
    color: #1a1a2e;
  }

  .text-\[\#1a1a2e\]\/5 {
    color: oklab(22.8438% .00860053 -.0374545 / .05);
  }

  .text-\[\#1a140d\] {
    color: #1a140d;
  }

  .text-\[\#5a4a3a\] {
    color: #5a4a3a;
  }

  .text-\[\#5a4a3a\]\/60 {
    color: oklab(42.094% .0131712 .0306028 / .6);
  }

  .text-\[\#007aff\] {
    color: #007aff;
  }

  .text-\[\#FF2D55\] {
    color: #ff2d55;
  }

  .text-\[\#c2b280\] {
    color: #c2b280;
  }

  .text-\[\#d4a017\] {
    color: #d4a017;
  }

  .text-\[\#d4a017\]\/10 {
    color: oklab(73.4969% .0146058 .145484 / .1);
  }

  .text-\[\#d4a017\]\/20 {
    color: oklab(73.4969% .0146058 .145484 / .2);
  }

  .text-\[\#d4a017\]\/60 {
    color: oklab(73.4969% .0146058 .145484 / .6);
  }

  .text-\[\#d4a017\]\/80 {
    color: oklab(73.4969% .0146058 .145484 / .8);
  }

  .text-\[\#d4a017\]\/90 {
    color: oklab(73.4969% .0146058 .145484 / .9);
  }

  .text-\[\#f4d03f\] {
    color: #f4d03f;
  }

  .text-\[\#f5e6c8\] {
    color: #f5e6c8;
  }

  .text-\[\#f5f0e6\] {
    color: #f5f0e6;
  }

  .text-\[\#ff6b35\] {
    color: #ff6b35;
  }

  .text-\[hsl\(0\,84\%\,60\%\)\] {
    color: #ef4343;
  }

  .text-\[hsl\(8_70\%_45\%\)\] {
    color: #c33822;
  }

  .text-\[hsl\(14\,92\%\,58\%\)\] {
    color: #f65f31;
  }

  .text-\[hsl\(25_25\%_32\%\)\] {
    color: #664e3d;
  }

  .text-\[hsl\(25_40\%_14\%\)\] {
    color: #322115;
  }

  .text-\[hsl\(25_40\%_14\%\/0\.4\)\] {
    color: #32211566;
  }

  .text-\[hsl\(36_65\%_48\%\)\] {
    color: #ca8a2b;
  }

  .text-\[hsl\(38_42\%_90\%\)\] {
    color: #f0e8db;
  }

  .text-\[hsl\(48\,100\%\,56\%\)\] {
    color: #ffd21f;
  }

  .text-\[hsl\(60\,9\%\,98\%\)\] {
    color: #fafaf9;
  }

  .text-\[hsl\(145_40\%_30\%\)\] {
    color: #2e6b47;
  }

  .text-\[hsl\(160\,84\%\,39\%\)\] {
    color: #10b77f;
  }

  .text-\[hsl\(224\,84\%\,48\%\)\] {
    color: #144ae1;
  }

  .text-\[hsl\(230\,45\%\,8\%\)\] {
    color: #0b0e1e;
  }

  .text-\[hsl\(230\,45\%\,8\%\)\]\/10 {
    color: oklab(17.0165% .00249018 -.0336131 / .1);
  }

  .text-\[var\(--comm-accent-primary\)\] {
    color: var(--comm-accent-primary);
  }

  .text-\[var\(--comm-pink\)\] {
    color: var(--comm-pink);
  }

  .text-\[var\(--comm-tab-icon-active\)\] {
    color: var(--comm-tab-icon-active);
  }

  .text-\[var\(--comm-tab-inactive\)\] {
    color: var(--comm-tab-inactive);
  }

  .text-amber-100 {
    color: var(--color-amber-100);
  }

  .text-amber-100\/90 {
    color: #fef3c6e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-100\/90 {
      color: color-mix(in oklab, var(--color-amber-100) 90%, transparent);
    }
  }

  .text-amber-200 {
    color: var(--color-amber-200);
  }

  .text-amber-200\/60 {
    color: #fee68599;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-200\/60 {
      color: color-mix(in oklab, var(--color-amber-200) 60%, transparent);
    }
  }

  .text-amber-200\/70 {
    color: #fee685b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-200\/70 {
      color: color-mix(in oklab, var(--color-amber-200) 70%, transparent);
    }
  }

  .text-amber-300\/40 {
    color: #ffd23666;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-300\/40 {
      color: color-mix(in oklab, var(--color-amber-300) 40%, transparent);
    }
  }

  .text-amber-300\/50 {
    color: #ffd23680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-300\/50 {
      color: color-mix(in oklab, var(--color-amber-300) 50%, transparent);
    }
  }

  .text-amber-300\/70 {
    color: #ffd236b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-300\/70 {
      color: color-mix(in oklab, var(--color-amber-300) 70%, transparent);
    }
  }

  .text-amber-300\/80 {
    color: #ffd236cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-300\/80 {
      color: color-mix(in oklab, var(--color-amber-300) 80%, transparent);
    }
  }

  .text-amber-400 {
    color: var(--color-amber-400);
  }

  .text-amber-400\/40 {
    color: #fcbb0066;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/40 {
      color: color-mix(in oklab, var(--color-amber-400) 40%, transparent);
    }
  }

  .text-amber-400\/50 {
    color: #fcbb0080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/50 {
      color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
    }
  }

  .text-amber-400\/60 {
    color: #fcbb0099;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/60 {
      color: color-mix(in oklab, var(--color-amber-400) 60%, transparent);
    }
  }

  .text-amber-400\/70 {
    color: #fcbb00b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/70 {
      color: color-mix(in oklab, var(--color-amber-400) 70%, transparent);
    }
  }

  .text-amber-400\/80 {
    color: #fcbb00cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/80 {
      color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
    }
  }

  .text-amber-500 {
    color: var(--color-amber-500);
  }

  .text-amber-500\/30 {
    color: #f99c004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-500\/30 {
      color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
    }
  }

  .text-amber-600\/70 {
    color: #dd7400b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-600\/70 {
      color: color-mix(in oklab, var(--color-amber-600) 70%, transparent);
    }
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-blue-400 {
    color: var(--color-blue-400);
  }

  .text-blue-400\/60 {
    color: #54a2ff99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-blue-400\/60 {
      color: color-mix(in oklab, var(--color-blue-400) 60%, transparent);
    }
  }

  .text-blue-400\/80 {
    color: #54a2ffcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-blue-400\/80 {
      color: color-mix(in oklab, var(--color-blue-400) 80%, transparent);
    }
  }

  .text-blue-500 {
    color: var(--color-blue-500);
  }

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-blue-600\/20 {
    color: #155dfc33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-blue-600\/20 {
      color: color-mix(in oklab, var(--color-blue-600) 20%, transparent);
    }
  }

  .text-blue-700 {
    color: var(--color-blue-700);
  }

  .text-blue-950 {
    color: var(--color-blue-950);
  }

  .text-current {
    color: currentColor;
  }

  .text-cyan-500 {
    color: var(--color-cyan-500);
  }

  .text-emerald-200 {
    color: var(--color-emerald-200);
  }

  .text-emerald-300 {
    color: var(--color-emerald-300);
  }

  .text-emerald-400 {
    color: var(--color-emerald-400);
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-600\/25 {
    color: #00976740;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-600\/25 {
      color: color-mix(in oklab, var(--color-emerald-600) 25%, transparent);
    }
  }

  .text-emerald-600\/70 {
    color: #009767b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-600\/70 {
      color: color-mix(in oklab, var(--color-emerald-600) 70%, transparent);
    }
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-gray-200 {
    color: var(--color-gray-200);
  }

  .text-gray-300 {
    color: var(--color-gray-300);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

  .text-gray-400\/80 {
    color: #99a1afcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-gray-400\/80 {
      color: color-mix(in oklab, var(--color-gray-400) 80%, transparent);
    }
  }

  .text-gray-500 {
    color: var(--color-gray-500);
  }

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-gray-700 {
    color: var(--color-gray-700);
  }

  .text-gray-800 {
    color: var(--color-gray-800);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-green-400 {
    color: var(--color-green-400);
  }

  .text-green-400\/80 {
    color: #05df72cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-green-400\/80 {
      color: color-mix(in oklab, var(--color-green-400) 80%, transparent);
    }
  }

  .text-green-600 {
    color: var(--color-green-600);
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-indigo-400 {
    color: var(--color-indigo-400);
  }

  .text-orange-500 {
    color: var(--color-orange-500);
  }

  .text-pink-400 {
    color: var(--color-pink-400);
  }

  .text-pink-500 {
    color: var(--color-pink-500);
  }

  .text-red-200 {
    color: var(--color-red-200);
  }

  .text-red-300 {
    color: var(--color-red-300);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-red-400\/60 {
    color: #ff656899;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-400\/60 {
      color: color-mix(in oklab, var(--color-red-400) 60%, transparent);
    }
  }

  .text-red-400\/80 {
    color: #ff6568cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-400\/80 {
      color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
    }
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-600\/8 {
    color: #e4001414;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-600\/8 {
      color: color-mix(in oklab, var(--color-red-600) 8%, transparent);
    }
  }

  .text-red-600\/10 {
    color: #e400141a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-600\/10 {
      color: color-mix(in oklab, var(--color-red-600) 10%, transparent);
    }
  }

  .text-red-600\/20 {
    color: #e4001433;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-600\/20 {
      color: color-mix(in oklab, var(--color-red-600) 20%, transparent);
    }
  }

  .text-red-600\/70 {
    color: #e40014b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-600\/70 {
      color: color-mix(in oklab, var(--color-red-600) 70%, transparent);
    }
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-red-800 {
    color: var(--color-red-800);
  }

  .text-rose-50 {
    color: var(--color-rose-50);
  }

  .text-rose-100 {
    color: var(--color-rose-100);
  }

  .text-rose-100\/80 {
    color: #ffe4e6cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-100\/80 {
      color: color-mix(in oklab, var(--color-rose-100) 80%, transparent);
    }
  }

  .text-rose-200 {
    color: var(--color-rose-200);
  }

  .text-rose-200\/40 {
    color: #ffccd366;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-200\/40 {
      color: color-mix(in oklab, var(--color-rose-200) 40%, transparent);
    }
  }

  .text-rose-300 {
    color: var(--color-rose-300);
  }

  .text-rose-300\/25 {
    color: #ffa2ae40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-300\/25 {
      color: color-mix(in oklab, var(--color-rose-300) 25%, transparent);
    }
  }

  .text-rose-300\/30 {
    color: #ffa2ae4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-300\/30 {
      color: color-mix(in oklab, var(--color-rose-300) 30%, transparent);
    }
  }

  .text-rose-300\/35 {
    color: #ffa2ae59;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-300\/35 {
      color: color-mix(in oklab, var(--color-rose-300) 35%, transparent);
    }
  }

  .text-rose-300\/50 {
    color: #ffa2ae80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-300\/50 {
      color: color-mix(in oklab, var(--color-rose-300) 50%, transparent);
    }
  }

  .text-rose-300\/60 {
    color: #ffa2ae99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-300\/60 {
      color: color-mix(in oklab, var(--color-rose-300) 60%, transparent);
    }
  }

  .text-rose-400 {
    color: var(--color-rose-400);
  }

  .text-rose-400\/25 {
    color: #ff667f40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-400\/25 {
      color: color-mix(in oklab, var(--color-rose-400) 25%, transparent);
    }
  }

  .text-rose-400\/30 {
    color: #ff667f4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-400\/30 {
      color: color-mix(in oklab, var(--color-rose-400) 30%, transparent);
    }
  }

  .text-rose-400\/35 {
    color: #ff667f59;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-400\/35 {
      color: color-mix(in oklab, var(--color-rose-400) 35%, transparent);
    }
  }

  .text-rose-400\/40 {
    color: #ff667f66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-400\/40 {
      color: color-mix(in oklab, var(--color-rose-400) 40%, transparent);
    }
  }

  .text-slate-300 {
    color: var(--color-slate-300);
  }

  .text-slate-400 {
    color: var(--color-slate-400);
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .text-slate-600 {
    color: var(--color-slate-600);
  }

  .text-slate-900 {
    color: var(--color-slate-900);
  }

  .text-transparent {
    color: #0000;
  }

  .text-violet-500 {
    color: var(--color-violet-500);
  }

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

  .text-white\/12 {
    color: #ffffff1f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/12 {
      color: color-mix(in oklab, var(--color-white) 12%, transparent);
    }
  }

  .text-white\/15 {
    color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/15 {
      color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .text-white\/20 {
    color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/20 {
      color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .text-white\/40 {
    color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/40 {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  .text-white\/60 {
    color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-white\/90 {
    color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/90 {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .text-yellow-300 {
    color: var(--color-yellow-300);
  }

  .text-yellow-400 {
    color: var(--color-yellow-400);
  }

  .text-yellow-400\/80 {
    color: #fac800cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-yellow-400\/80 {
      color: color-mix(in oklab, var(--color-yellow-400) 80%, transparent);
    }
  }

  .text-yellow-500 {
    color: var(--color-yellow-500);
  }

  .text-yellow-700 {
    color: var(--color-yellow-700);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

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

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

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

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-10 {
    opacity: .1;
  }

  .opacity-15 {
    opacity: .15;
  }

  .opacity-20 {
    opacity: .2;
  }

  .opacity-25 {
    opacity: .25;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .opacity-\[0\.03\] {
    opacity: .03;
  }

  .opacity-\[0\.04\] {
    opacity: .04;
  }

  .opacity-\[0\.07\] {
    opacity: .07;
  }

  .opacity-\[0\.18\] {
    opacity: .18;
  }

  .opacity-\[0\.045\] {
    opacity: .045;
  }

  .mix-blend-difference {
    mix-blend-mode: difference;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    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, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_var\(--sidebar-border\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-border));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_12px_rgba\(159\,18\,57\,0\.3\)\] {
    --tw-shadow: 0 0 12px var(--tw-shadow-color, #9f12394d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_15px_rgba\(251\,191\,36\,0\.15\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #fbbf2426);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_20px_rgba\(52\,211\,153\,0\.15\)\] {
    --tw-shadow: 0 0 20px var(--tw-shadow-color, #34d39926);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_20px_rgba\(212\,160\,23\,0\.3\)\] {
    --tw-shadow: 0 0 20px var(--tw-shadow-color, #d4a0174d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_20px_rgba\(239\,68\,68\,0\.15\)\] {
    --tw-shadow: 0 0 20px var(--tw-shadow-color, #ef444426);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_30px_-4px_var\(--electric\)\] {
    --tw-shadow: 0 0 30px -4px var(--tw-shadow-color, var(--electric));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_30px_-6px_var\(--electric\)\] {
    --tw-shadow: 0 0 30px -6px var(--tw-shadow-color, var(--electric));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_30px_rgba\(0\,0\,0\,0\.1\)\] {
    --tw-shadow: 0 0 30px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_40px_rgba\(180\,130\,50\,0\.15\)\] {
    --tw-shadow: 0 0 40px var(--tw-shadow-color, #b4823226);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_40px_rgba\(212\,160\,23\,0\.3\)\] {
    --tw-shadow: 0 0 40px var(--tw-shadow-color, #d4a0174d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_40px_rgba\(255\,107\,53\,0\.3\)\] {
    --tw-shadow: 0 0 40px var(--tw-shadow-color, #ff6b354d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_60px_rgba\(212\,160\,23\,0\.24\)\] {
    --tw-shadow: 0 0 60px var(--tw-shadow-color, #d4a0173d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_0_hsl\(38_50\%_95\%\/0\.6\)\,0_2px_8px_hsl\(25_40\%_14\%\/0\.18\)\] {
    --tw-shadow: 0 1px 0 var(--tw-shadow-color, #f9f4ec99), 0 2px 8px var(--tw-shadow-color, #3221152e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_4px_0_hsl\(var\(--brass-deep\)\)\] {
    --tw-shadow: 0 4px 0 var(--tw-shadow-color, hsl(var(--brass-deep)));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_4px_0_hsl\(var\(--brass-deep\)\/0\.4\)\] {
    --tw-shadow: 0 4px 0 var(--tw-shadow-color, hsl(var(--brass-deep)/.4));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_4px_0_hsl\(var\(--teal-deep\)\)\] {
    --tw-shadow: 0 4px 0 var(--tw-shadow-color, hsl(var(--teal-deep)));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_32px_rgba\(59\,130\,246\,0\.08\)\] {
    --tw-shadow: 0 8px 32px var(--tw-shadow-color, #3b82f614);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_12px_40px_-8px_hsl\(25_40\%_14\%\/0\.35\)\,0_4px_12px_hsl\(25_40\%_14\%\/0\.18\)\] {
    --tw-shadow: 0 12px 40px -8px var(--tw-shadow-color, #32211559), 0 4px 12px var(--tw-shadow-color, #3221152e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_24px_54px_-28px_rgba\(26\,26\,46\,0\.3\)\] {
    --tw-shadow: 0 24px 54px -28px var(--tw-shadow-color, #1a1a2e4d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_24px_54px_-28px_rgba\(26\,26\,46\,0\.5\)\] {
    --tw-shadow: 0 24px 54px -28px var(--tw-shadow-color, #1a1a2e80);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_40px_100px_rgba\(59\,130\,246\,0\.2\)\] {
    --tw-shadow: 0 40px 100px var(--tw-shadow-color, #3b82f633);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[4px_4px_0_0_hsl\(230\,45\%\,8\%\)\] {
    --tw-shadow: 4px 4px 0 0 var(--tw-shadow-color, #0b0e1e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[6px_6px_0_0_hsl\(230\,45\%\,8\%\)\] {
    --tw-shadow: 6px 6px 0 0 var(--tw-shadow-color, #0b0e1e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[10px_10px_0_0_hsl\(230\,45\%\,8\%\)\] {
    --tw-shadow: 10px 10px 0 0 var(--tw-shadow-color, #0b0e1e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_-6px_12px_hsl\(8_70\%_22\%\/0\.6\)\,0_8px_24px_hsl\(8_65\%_30\%\/0\.4\)\] {
    --tw-shadow: inset 0 -6px 12px var(--tw-shadow-color, #5f1b1199), 0 8px 24px var(--tw-shadow-color, #7e281b66);
    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, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    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, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    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, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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);
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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);
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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);
  }

  .ring-2 {
    --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);
  }

  .ring-3 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
  }

  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + 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);
  }

  .shadow-blue-500\/20 {
    --tw-shadow-color: #3080ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-blue-500\/20 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-blue-500\/25 {
    --tw-shadow-color: #3080ff40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-blue-500\/25 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-orange-200 {
    --tw-shadow-color: oklch(90.1% .076 70.697);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-orange-200 {
      --tw-shadow-color: color-mix(in oklab, var(--color-orange-200) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-rose-900\/25 {
    --tw-shadow-color: #8b083640;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-rose-900\/25 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-rose-900) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-\[hsl\(160\,84\%\,39\%\)\] {
    --tw-ring-color: #10b77f;
  }

  .ring-offset-1 {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .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, );
  }

  .blur-2xl {
    --tw-blur: blur(var(--blur-2xl));
    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, );
  }

  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    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, );
  }

  .blur-\[80px\] {
    --tw-blur: blur(80px);
    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, );
  }

  .blur-\[100px\] {
    --tw-blur: blur(100px);
    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, );
  }

  .blur-md {
    --tw-blur: blur(var(--blur-md));
    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-2xl {
    --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, #00000026));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));
    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-\[0_0_12px_rgba\(180\,130\,50\,0\.4\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 12px var(--tw-drop-shadow-color, #b4823266));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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-\[0_2px_4px_rgba\(0\,0\,0\,0\.2\)\] {
    --tw-drop-shadow-size: drop-shadow(0 2px 4px var(--tw-drop-shadow-color, #0003));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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-\[0_4px_8px_hsl\(42_80\%_55\%\/0\.5\)\] {
    --tw-drop-shadow-size: drop-shadow(0 4px 8px var(--tw-drop-shadow-color, #e8b13080));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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-\[0_4px_8px_rgba\(0\,0\,0\,0\.25\)\] {
    --tw-drop-shadow-size: drop-shadow(0 4px 8px var(--tw-drop-shadow-color, #00000040));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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-lg {
    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, #00000026));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
    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-md {
    --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, #0000001f));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
    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, #00000026));
    --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, );
  }

  .saturate-\[200\%\] {
    --tw-saturate: saturate(200%);
    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, );
  }

  .sepia {
    --tw-sepia: sepia(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, ) !important;
  }

  .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-2xl {
    --tw-backdrop-blur: blur(var(--blur-2xl));
    -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-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -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-sm {
    --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, );
  }

  .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, );
  }

  .backdrop-filter {
    -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, 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-\[left\,right\,width\] {
    transition-property: left, right, width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[margin\,opa\] {
    transition-property: margin, opa;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[margin\,opacity\] {
    transition-property: margin, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\,height\,padding\] {
    transition-property: width, height, padding;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    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));
  }

  .transition-transform {
    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));
  }

  .delay-100 {
    transition-delay: .1s;
  }

  .delay-200 {
    transition-delay: .2s;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-400 {
    --tw-duration: .4s;
    transition-duration: .4s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .duration-1000 {
    --tw-duration: 1s;
    transition-duration: 1s;
  }

  .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-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .will-change-transform {
    will-change: transform;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .\[--cell-size\:2rem\] {
    --cell-size: 2rem;
  }

  .\[animation-delay\:0\.15s\] {
    animation-delay: .15s;
  }

  .\[animation-delay\:0\.25s\] {
    animation-delay: .25s;
  }

  .\[animation-delay\:0\.35s\] {
    animation-delay: .35s;
  }

  .\[animation-delay\:1s\] {
    animation-delay: 1s;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
    opacity: 1;
  }

  @media (hover: hover) {
    .group-hover\:h-1:is(:where(.group):hover *) {
      height: calc(var(--spacing) * 1);
    }

    .group-hover\:translate-x-0:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-x-1:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-x-full:is(:where(.group):hover *) {
      --tw-translate-x: 100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:-translate-y-1:is(:where(.group):hover *) {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-y-0:is(:where(.group):hover *) {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\: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\:-rotate-6:is(:where(.group):hover *) {
      rotate: -6deg;
    }

    .group-hover\:rotate-6:is(:where(.group):hover *) {
      rotate: 6deg;
    }

    .group-hover\:rotate-12:is(:where(.group):hover *) {
      rotate: 12deg;
    }

    .group-hover\:gap-4:is(:where(.group):hover *) {
      gap: calc(var(--spacing) * 4);
    }

    .group-hover\:border-\[\#1a1a2e\]:is(:where(.group):hover *) {
      border-color: #1a1a2e;
    }

    .group-hover\:bg-\[\#1a1a2e\]:is(:where(.group):hover *) {
      background-color: #1a1a2e;
    }

    .group-hover\:bg-amber-400\/20:is(:where(.group):hover *) {
      background-color: #fcbb0033;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-amber-400\/20:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
      }
    }

    .group-hover\:text-\[hsl\(14\,92\%\,58\%\)\]:is(:where(.group):hover *) {
      color: #f65f31;
    }

    .group-hover\:text-amber-300:is(:where(.group):hover *) {
      color: var(--color-amber-300);
    }

    .group-hover\:text-white:is(:where(.group):hover *) {
      color: var(--color-white);
    }

    .group-hover\:opacity-30:is(:where(.group):hover *) {
      opacity: .3;
    }

    .group-hover\:opacity-40:is(:where(.group):hover *) {
      opacity: .4;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }

    .group-hover\:shadow-\[10px_10px_0_0_hsl\(230\,45\%\,8\%\)\]:is(:where(.group):hover *) {
      --tw-shadow: 10px 10px 0 0 var(--tw-shadow-color, #0b0e1e);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .group-hover\:shadow-lg:is(:where(.group):hover *) {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .group-hover\:shadow-blue-500\/30:is(:where(.group):hover *) {
      --tw-shadow-color: #3080ff4d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:shadow-blue-500\/30:is(:where(.group):hover *) {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 30%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .group-hover\/header\:text-\[var\(--comm-accent-primary\)\]:is(:where(.group\/header):hover *) {
      color: var(--comm-accent-primary);
    }

    .group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *) {
      opacity: 1;
    }
  }

  .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar="menu-action"]) *) {
    padding-right: calc(var(--spacing) * 8);
  }

  .group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible="icon"] *) {
    margin-top: calc(var(--spacing) * -8);
  }

  .group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible="icon"] *) {
    display: none;
  }

  .group-data-\[collapsible\=icon\]\:\!size-8:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--spacing) * 8) !important;
    height: calc(var(--spacing) * 8) !important;
  }

  .group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.group)[data-collapsible="icon"] *) {
    width: var(--sidebar-width-icon);
  }

  .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\]:is(:where(.group)[data-collapsible="icon"] *) {
    width: --sidebar-width-icon;
  }

  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--sidebar-width-icon) + 1rem);
  }

  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--sidebar-width-icon) + 1rem + 2px);
  }

  .group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible="icon"] *) {
    overflow: hidden;
  }

  .group-data-\[collapsible\=icon\]\:\!p-0:is(:where(.group)[data-collapsible="icon"] *) {
    padding: calc(var(--spacing) * 0) !important;
  }

  .group-data-\[collapsible\=icon\]\:\!p-2:is(:where(.group)[data-collapsible="icon"] *) {
    padding: calc(var(--spacing) * 2) !important;
  }

  .group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible="icon"] *) {
    opacity: 0;
  }

  .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
    right: calc(var(--sidebar-width) * -1);
  }

  .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
    left: calc(var(--sidebar-width) * -1);
  }

  .group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.group)[data-collapsible="offcanvas"] *) {
    width: calc(var(--spacing) * 0);
  }

  .group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible="offcanvas"] *) {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused="true"] *) {
    position: relative;
  }

  .group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused="true"] *) {
    z-index: 10;
  }

  .group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused="true"] *) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
  }

  .group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side="left"] *) {
    right: calc(var(--spacing) * -4);
  }

  .group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side="left"] *) {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side="right"] *) {
    left: calc(var(--spacing) * 0);
  }

  .group-data-\[side\=right\]\:rotate-180:is(:where(.group)[data-side="right"] *) {
    rotate: 180deg;
  }

  .group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side="right"] *) {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state="open"] *) {
    rotate: 180deg;
  }

  .group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant="floating"] *) {
    border-radius: var(--radius-lg);
  }

  .group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant="floating"] *) {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .group-data-\[variant\=floating\]\:shadow:is(:where(.group)[data-variant="floating"] *) {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .group-\[\.destructive\]\:text-red-300:is(:where(.group).destructive *) {
    color: var(--color-red-300);
  }

  .group-\[\.toaster\]\:shadow-lg:is(:where(.group).toaster *) {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-70:is(:where(.peer):disabled ~ *) {
    opacity: .7;
  }

  .peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.peer\/menu-button)[data-size="default"] ~ *) {
    top: calc(var(--spacing) * 1.5);
  }

  .peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) {
    top: calc(var(--spacing) * 2.5);
  }

  .peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) {
    top: calc(var(--spacing) * 1);
  }

  .peer-data-\[variant\=inset\]\:min-h-\[calc\(100svh-theme\(spacing\.4\)\)\]:is(:where(.peer)[data-variant="inset"] ~ *) {
    min-height: calc(100svh - 1rem);
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:-inset-2:after {
    content: var(--tw-content);
    inset: calc(var(--spacing) * -2);
  }

  .after\:inset-y-0:after {
    content: var(--tw-content);
    inset-block: calc(var(--spacing) * 0);
  }

  .after\:left-1\/2:after {
    content: var(--tw-content);
    left: 50%;
  }

  .after\:ml-1:after {
    content: var(--tw-content);
    margin-left: calc(var(--spacing) * 1);
  }

  .after\:w-1:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 1);
  }

  .after\:w-\[2px\]:after {
    content: var(--tw-content);
    width: 2px;
  }

  .after\:-translate-x-1\/2:after {
    content: var(--tw-content);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .after\:text-red-400:after {
    content: var(--tw-content);
    color: var(--color-red-400);
  }

  .after\:content-\[\'\*\'\]:after {
    --tw-content: "*";
    content: var(--tw-content);
  }

  .group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible="offcanvas"] *):after {
    content: var(--tw-content);
    left: 100%;
  }

  .first\:rounded-l-md:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .first\:border-l:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .last\:mb-0:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .last\:rounded-r-md:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .focus-within\:relative:focus-within {
    position: relative;
  }

  .focus-within\:z-20:focus-within {
    z-index: 20;
  }

  @media (hover: hover) {
    .hover\:-translate-x-0\.5:hover {
      --tw-translate-x: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-x-1:hover {
      --tw-translate-x: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-1:hover {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-2:hover {
      --tw-translate-y: calc(var(--spacing) * -2);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:translate-y-\[2px\]:hover {
      --tw-translate-y: 2px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-\[1\.02\]:hover {
      scale: 1.02;
    }

    .hover\:gap-5:hover {
      gap: calc(var(--spacing) * 5);
    }

    .hover\:border-\[\#1a1a2e\]:hover {
      border-color: #1a1a2e;
    }

    .hover\:border-\[\#d4a017\]\/60:hover {
      border-color: oklab(73.4969% .0146058 .145484 / .6);
    }

    .hover\:border-\[hsl\(36_65\%_48\%\)\]:hover {
      border-color: #ca8a2b;
    }

    .hover\:border-amber-400\/20:hover {
      border-color: #fcbb0033;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-amber-400\/20:hover {
        border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
      }
    }

    .hover\:border-blue-200\/80:hover {
      border-color: #bedbffcc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-blue-200\/80:hover {
        border-color: color-mix(in oklab, var(--color-blue-200) 80%, transparent);
      }
    }

    .hover\:border-blue-300\/40:hover {
      border-color: #90c5ff66;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-blue-300\/40:hover {
        border-color: color-mix(in oklab, var(--color-blue-300) 40%, transparent);
      }
    }

    .hover\:border-emerald-500:hover {
      border-color: var(--color-emerald-500);
    }

    .hover\:border-indigo-500:hover {
      border-color: var(--color-indigo-500);
    }

    .hover\:border-rose-400\/20:hover {
      border-color: #ff667f33;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-rose-400\/20:hover {
        border-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
      }
    }

    .hover\:bg-\[\#1a1a2e\]:hover {
      background-color: #1a1a2e;
    }

    .hover\:bg-\[\#007AFF\]\/10:hover {
      background-color: oklab(60.2765% -.047404 -.212489 / .1);
    }

    .hover\:bg-\[\#FF2D55\]\/10:hover {
      background-color: oklab(64.9653% .226804 .0732477 / .1);
    }

    .hover\:bg-\[\#d4a017\]:hover {
      background-color: #d4a017;
    }

    .hover\:bg-\[\#d4a017\]\/10:hover {
      background-color: oklab(73.4969% .0146058 .145484 / .1);
    }

    .hover\:bg-\[\#e8d4a8\]:hover {
      background-color: #e8d4a8;
    }

    .hover\:bg-\[\#f4d03f\]:hover {
      background-color: #f4d03f;
    }

    .hover\:bg-\[\#f5e6c8\]:hover {
      background-color: #f5e6c8;
    }

    .hover\:bg-\[hsl\(25_40\%_14\%\/0\.1\)\]:hover {
      background-color: #3221151a;
    }

    .hover\:bg-\[hsl\(48\,100\%\,56\%\)\]:hover {
      background-color: #ffd21f;
    }

    .hover\:bg-\[hsl\(230\,45\%\,8\%\)\]\/10:hover {
      background-color: oklab(17.0165% .00249018 -.0336131 / .1);
    }

    .hover\:bg-\[var\(--comm-accent-primary\)\]\/10:hover {
      background-color: var(--comm-accent-primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--comm-accent-primary\)\]\/10:hover {
        background-color: color-mix(in oklab, var(--comm-accent-primary) 10%, transparent);
      }
    }

    .hover\:bg-\[var\(--comm-btn-ghost-bg-hover\)\]:hover {
      background-color: var(--comm-btn-ghost-bg-hover);
    }

    .hover\:bg-\[var\(--comm-danger\)\]\/10:hover {
      background-color: var(--comm-danger);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--comm-danger\)\]\/10:hover {
        background-color: color-mix(in oklab, var(--comm-danger) 10%, transparent);
      }
    }

    .hover\:bg-\[var\(--comm-warning\)\]\/10:hover {
      background-color: var(--comm-warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--comm-warning\)\]\/10:hover {
        background-color: color-mix(in oklab, var(--comm-warning) 10%, transparent);
      }
    }

    .hover\:bg-amber-400\/10:hover {
      background-color: #fcbb001a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-400\/10:hover {
        background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
      }
    }

    .hover\:bg-amber-500\/30:hover {
      background-color: #f99c004d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-500\/30:hover {
        background-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
      }
    }

    .hover\:bg-gray-200:hover {
      background-color: var(--color-gray-200);
    }

    .hover\:bg-gray-200\/80:hover {
      background-color: #e5e7ebcc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-gray-200\/80:hover {
        background-color: color-mix(in oklab, var(--color-gray-200) 80%, transparent);
      }
    }

    .hover\:bg-gray-500:hover {
      background-color: var(--color-gray-500);
    }

    .hover\:bg-red-500:hover {
      background-color: var(--color-red-500);
    }

    .hover\:bg-red-500\/10:hover {
      background-color: #fb2c361a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-red-500\/10:hover {
        background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
      }
    }

    .hover\:bg-red-600:hover {
      background-color: var(--color-red-600);
    }

    .hover\:bg-rose-400\/10:hover {
      background-color: #ff667f1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-rose-400\/10:hover {
        background-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);
      }
    }

    .hover\:bg-slate-200\/80:hover {
      background-color: #e2e8f0cc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-slate-200\/80:hover {
        background-color: color-mix(in oklab, var(--color-slate-200) 80%, transparent);
      }
    }

    .hover\:bg-slate-800\/50:hover {
      background-color: #1d293d80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-slate-800\/50:hover {
        background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
      }
    }

    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }

    .hover\:bg-white\/10:hover {
      background-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }

    .hover\:bg-white\/20:hover {
      background-color: #fff3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/20:hover {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }

    .hover\:bg-white\/50:hover {
      background-color: #ffffff80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/50:hover {
        background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
      }
    }

    .hover\:bg-white\/60:hover {
      background-color: #fff9;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/60:hover {
        background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
      }
    }

    .hover\:bg-white\/70:hover {
      background-color: #ffffffb3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/70:hover {
        background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
      }
    }

    .hover\:bg-white\/80:hover {
      background-color: #fffc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/80:hover {
        background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
      }
    }

    .hover\:bg-white\/\[0\.04\]:hover {
      background-color: #ffffff0a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.04\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
      }
    }

    .hover\:bg-white\/\[0\.06\]:hover {
      background-color: #ffffff0f;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.06\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
      }
    }

    .hover\:bg-yellow-500:hover {
      background-color: var(--color-yellow-500);
    }

    .hover\:bg-yellow-900\/70:hover {
      background-color: #733e0ab3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-yellow-900\/70:hover {
        background-color: color-mix(in oklab, var(--color-yellow-900) 70%, transparent);
      }
    }

    .hover\:tracking-\[0\.55em\]:hover {
      --tw-tracking: .55em;
      letter-spacing: .55em;
    }

    .hover\:text-\[\#1a1a2e\]:hover {
      color: #1a1a2e;
    }

    .hover\:text-\[\#007AFF\]:hover {
      color: #007aff;
    }

    .hover\:text-\[\#FF2D55\]:hover {
      color: #ff2d55;
    }

    .hover\:text-\[\#f5f0e6\]:hover {
      color: #f5f0e6;
    }

    .hover\:text-\[hsl\(8_70\%_45\%\)\]:hover {
      color: #c33822;
    }

    .hover\:text-\[hsl\(14\,92\%\,58\%\)\]:hover {
      color: #f65f31;
    }

    .hover\:text-\[hsl\(36_65\%_48\%\)\]:hover {
      color: #ca8a2b;
    }

    .hover\:text-\[var\(--comm-accent-primary\)\]:hover {
      color: var(--comm-accent-primary);
    }

    .hover\:text-\[var\(--comm-danger\)\]:hover {
      color: var(--comm-danger);
    }

    .hover\:text-\[var\(--comm-warning\)\]:hover {
      color: var(--comm-warning);
    }

    .hover\:text-blue-600:hover {
      color: var(--color-blue-600);
    }

    .hover\:text-gray-600:hover {
      color: var(--color-gray-600);
    }

    .hover\:text-pink-500:hover {
      color: var(--color-pink-500);
    }

    .hover\:text-red-500:hover {
      color: var(--color-red-500);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-70:hover {
      opacity: .7;
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
      --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-accent)));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover {
      --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-accent));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_0_40px_rgba\(212\,160\,23\,0\.2\)\]:hover {
      --tw-shadow: 0 0 40px var(--tw-shadow-color, #d4a01733);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_2px_0_hsl\(var\(--brass-deep\)\)\]:hover {
      --tw-shadow: 0 2px 0 var(--tw-shadow-color, hsl(var(--brass-deep)));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_2px_0_hsl\(var\(--brass-deep\)\/0\.4\)\]:hover {
      --tw-shadow: 0 2px 0 var(--tw-shadow-color, hsl(var(--brass-deep)/.4));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_2px_0_hsl\(var\(--teal-deep\)\)\]:hover {
      --tw-shadow: 0 2px 0 var(--tw-shadow-color, hsl(var(--teal-deep)));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_4px_16px_hsl\(36_65\%_48\%\/0\.4\)\,0_0_0_1px_hsl\(36_65\%_48\%\/0\.3\)\]:hover {
      --tw-shadow: 0 4px 16px var(--tw-shadow-color, #ca8a2b66), 0 0 0 1px var(--tw-shadow-color, #ca8a2b4d);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_20px_60px_rgba\(59\,130\,246\,0\.15\)\]:hover {
      --tw-shadow: 0 20px 60px var(--tw-shadow-color, #3b82f626);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[6px_6px_0_0_hsl\(230\,45\%\,8\%\)\]:hover {
      --tw-shadow: 6px 6px 0 0 var(--tw-shadow-color, #0b0e1e);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[10px_10px_0_0_hsl\(230\,45\%\,8\%\)\]:hover {
      --tw-shadow: 10px 10px 0 0 var(--tw-shadow-color, #0b0e1e);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-xl:hover {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-blue-500\/30:hover {
      --tw-shadow-color: #3080ff4d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-blue-500\/30:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 30%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:shadow-blue-500\/40:hover {
      --tw-shadow-color: #3080ff66;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-blue-500\/40:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 40%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:shadow-rose-800\/35:hover {
      --tw-shadow-color: #a3003759;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-rose-800\/35:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-rose-800) 35%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:brightness-105:hover {
      --tw-brightness: brightness(105%);
      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, );
    }

    .group-\[\.destructive\]\:hover\:text-red-50:is(:where(.group).destructive *):hover {
      color: var(--color-red-50);
    }
  }

  .focus\:border-blue-500:focus {
    border-color: var(--color-blue-500);
  }

  .focus\:opacity-100:focus {
    opacity: 1;
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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\:ring-2: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\:ring-4:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + 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\:ring-\[var\(--comm-accent-primary\)\]:focus {
    --tw-ring-color: var(--comm-accent-primary);
  }

  .focus\:ring-blue-500\/20:focus {
    --tw-ring-color: #3080ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-blue-500\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .group-\[\.destructive\]\:focus\:ring-red-400:is(:where(.group).destructive *):focus {
    --tw-ring-color: var(--color-red-400);
  }

  .group-\[\.destructive\]\:focus\:ring-offset-red-600:is(:where(.group).destructive *):focus {
    --tw-ring-offset-color: var(--color-red-600);
  }

  .focus-visible\:ring-1:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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-visible\:ring-2:focus-visible {
    --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-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:translate-x-1:active {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .active\:translate-y-1:active {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .active\:translate-y-\[4px\]:active {
    --tw-translate-y: 4px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .active\:scale-\[0\.99\]:active {
    scale: .99;
  }

  .active\:shadow-none:active {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:no-underline:disabled {
    text-decoration-line: none;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .has-focus\:ring-\[3px\]:has(:focus) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
  }

  .has-\[\:disabled\]\:opacity-50:has(:disabled) {
    opacity: .5;
  }

  .aria-disabled\:pointer-events-none[aria-disabled="true"] {
    pointer-events: none;
  }

  .aria-disabled\:opacity-50[aria-disabled="true"] {
    opacity: .5;
  }

  .aria-selected\:opacity-30[aria-selected="true"] {
    opacity: .3;
  }

  .aria-selected\:opacity-100[aria-selected="true"] {
    opacity: 1;
  }

  .data-\[active\=true\]\:font-medium[data-active="true"] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .data-\[disabled\]\:pointer-events-none[data-disabled] {
    pointer-events: none;
  }

  .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5;
  }

  .data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
    pointer-events: none;
  }

  .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
    opacity: .5;
  }

  .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
    height: 1px;
  }

  .data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
    width: 100%;
  }

  .data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
    flex-direction: column;
  }

  .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    left: calc(var(--spacing) * 0);
  }

  .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 1);
  }

  .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    width: 100%;
  }

  .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
    border-radius: var(--radius-md);
  }

  .data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
    border-radius: 0;
  }

  .data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
    border-radius: var(--radius-md);
  }

  .data-\[selected\=true\]\:rounded-none[data-selected="true"] {
    border-radius: 0;
  }

  .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=right\]\:translate-x-1[data-side="right"] {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=active\]\:shadow[data-state="active"], .data-\[state\=active\]\:shadow-sm[data-state="active"] {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
    --tw-translate-x: calc(var(--spacing) * 5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .data-\[state\=open\]\:opacity-100[data-state="open"] {
    opacity: 1;
  }

  .data-\[state\=open\]\:duration-500[data-state="open"] {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"], .data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
    --tw-translate-x: var(--radix-toast-swipe-end-x);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
    --tw-translate-x: var(--radix-toast-swipe-move-x);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
    transition-property: none;
  }

  @media (min-width: 40rem) {
    .sm\:-top-4 {
      top: calc(var(--spacing) * -4);
    }

    .sm\:top-auto {
      top: auto;
    }

    .sm\:-right-4 {
      right: calc(var(--spacing) * -4);
    }

    .sm\:right-0 {
      right: calc(var(--spacing) * 0);
    }

    .sm\:-bottom-4 {
      bottom: calc(var(--spacing) * -4);
    }

    .sm\:bottom-0 {
      bottom: calc(var(--spacing) * 0);
    }

    .sm\:-left-4 {
      left: calc(var(--spacing) * -4);
    }

    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .sm\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .sm\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .sm\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .sm\:mt-5 {
      margin-top: calc(var(--spacing) * 5);
    }

    .sm\:mt-6 {
      margin-top: calc(var(--spacing) * 6);
    }

    .sm\:mt-7 {
      margin-top: calc(var(--spacing) * 7);
    }

    .sm\:mt-8 {
      margin-top: calc(var(--spacing) * 8);
    }

    .sm\:mt-10 {
      margin-top: calc(var(--spacing) * 10);
    }

    .sm\:mt-12 {
      margin-top: calc(var(--spacing) * 12);
    }

    .sm\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }

    .sm\:mb-4 {
      margin-bottom: calc(var(--spacing) * 4);
    }

    .sm\:mb-6 {
      margin-bottom: calc(var(--spacing) * 6);
    }

    .sm\:mb-8 {
      margin-bottom: calc(var(--spacing) * 8);
    }

    .sm\:mb-10 {
      margin-bottom: calc(var(--spacing) * 10);
    }

    .sm\:mb-12 {
      margin-bottom: calc(var(--spacing) * 12);
    }

    .sm\:mb-16 {
      margin-bottom: calc(var(--spacing) * 16);
    }

    .sm\:ml-2 {
      margin-left: calc(var(--spacing) * 2);
    }

    .sm\:ml-auto {
      margin-left: auto;
    }

    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:hidden {
      display: none;
    }

    .sm\:inline {
      display: inline;
    }

    .sm\:inline-block {
      display: inline-block;
    }

    .sm\:inline-flex {
      display: inline-flex;
    }

    .sm\:h-5 {
      height: calc(var(--spacing) * 5);
    }

    .sm\:h-6 {
      height: calc(var(--spacing) * 6);
    }

    .sm\:h-7 {
      height: calc(var(--spacing) * 7);
    }

    .sm\:h-8 {
      height: calc(var(--spacing) * 8);
    }

    .sm\:h-10 {
      height: calc(var(--spacing) * 10);
    }

    .sm\:h-12 {
      height: calc(var(--spacing) * 12);
    }

    .sm\:h-14 {
      height: calc(var(--spacing) * 14);
    }

    .sm\:h-16 {
      height: calc(var(--spacing) * 16);
    }

    .sm\:h-20 {
      height: calc(var(--spacing) * 20);
    }

    .sm\:h-24 {
      height: calc(var(--spacing) * 24);
    }

    .sm\:h-28 {
      height: calc(var(--spacing) * 28);
    }

    .sm\:h-36 {
      height: calc(var(--spacing) * 36);
    }

    .sm\:h-44 {
      height: calc(var(--spacing) * 44);
    }

    .sm\:h-48 {
      height: calc(var(--spacing) * 48);
    }

    .sm\:h-\[460px\] {
      height: 460px;
    }

    .sm\:w-5 {
      width: calc(var(--spacing) * 5);
    }

    .sm\:w-6 {
      width: calc(var(--spacing) * 6);
    }

    .sm\:w-7 {
      width: calc(var(--spacing) * 7);
    }

    .sm\:w-8 {
      width: calc(var(--spacing) * 8);
    }

    .sm\:w-10 {
      width: calc(var(--spacing) * 10);
    }

    .sm\:w-12 {
      width: calc(var(--spacing) * 12);
    }

    .sm\:w-14 {
      width: calc(var(--spacing) * 14);
    }

    .sm\:w-16 {
      width: calc(var(--spacing) * 16);
    }

    .sm\:w-20 {
      width: calc(var(--spacing) * 20);
    }

    .sm\:w-44 {
      width: calc(var(--spacing) * 44);
    }

    .sm\:w-48 {
      width: calc(var(--spacing) * 48);
    }

    .sm\:w-auto {
      width: auto;
    }

    .sm\:max-w-sm {
      max-width: var(--container-sm);
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .sm\:flex-col {
      flex-direction: column;
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

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

    .sm\:gap-2\.5 {
      gap: calc(var(--spacing) * 2.5);
    }

    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .sm\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }

    .sm\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .sm\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    .sm\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }

    :where(.sm\:space-y-0 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.sm\:space-x-2 > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }

    :where(.sm\:space-x-4 > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }

    .sm\:rounded-lg {
      border-radius: var(--radius-lg);
    }

    .sm\:p-3 {
      padding: calc(var(--spacing) * 3);
    }

    .sm\:p-5 {
      padding: calc(var(--spacing) * 5);
    }

    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .sm\:p-7 {
      padding: calc(var(--spacing) * 7);
    }

    .sm\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .sm\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .sm\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .sm\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .sm\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .sm\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }

    .sm\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }

    .sm\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }

    .sm\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }

    .sm\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }

    .sm\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }

    .sm\:text-left {
      text-align: left;
    }

    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .sm\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .sm\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .sm\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .sm\:text-7xl {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }

    .sm\:text-8xl {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }

    .sm\:text-9xl {
      font-size: var(--text-9xl);
      line-height: var(--tw-leading, var(--text-9xl--line-height));
    }

    .sm\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .sm\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .sm\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }

    .sm\:text-\[5rem\] {
      font-size: 5rem;
    }

    .sm\:text-\[7px\] {
      font-size: 7px;
    }

    .sm\:text-\[8px\] {
      font-size: 8px;
    }

    .sm\:text-\[9px\] {
      font-size: 9px;
    }

    .sm\:text-\[9rem\] {
      font-size: 9rem;
    }

    .sm\:text-\[10px\] {
      font-size: 10px;
    }

    .sm\:text-\[11px\] {
      font-size: 11px;
    }

    .sm\:text-\[15px\] {
      font-size: 15px;
    }

    .sm\:tracking-\[0\.3em\] {
      --tw-tracking: .3em;
      letter-spacing: .3em;
    }

    .sm\:tracking-\[0\.4em\] {
      --tw-tracking: .4em;
      letter-spacing: .4em;
    }

    @media (hover: hover) {
      .sm\:hover\:translate-x-2:hover {
        --tw-translate-x: calc(var(--spacing) * 2);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }

  @media (min-width: 48rem) {
    .md\:absolute {
      position: absolute;
    }

    .md\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .md\:mr-12 {
      margin-right: calc(var(--spacing) * 12);
    }

    .md\:mb-10 {
      margin-bottom: calc(var(--spacing) * 10);
    }

    .md\:ml-12 {
      margin-left: calc(var(--spacing) * 12);
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:grid {
      display: grid;
    }

    .md\:h-2\.5 {
      height: calc(var(--spacing) * 2.5);
    }

    .md\:h-6 {
      height: calc(var(--spacing) * 6);
    }

    .md\:h-7 {
      height: calc(var(--spacing) * 7);
    }

    .md\:h-8 {
      height: calc(var(--spacing) * 8);
    }

    .md\:h-12 {
      height: calc(var(--spacing) * 12);
    }

    .md\:h-14 {
      height: calc(var(--spacing) * 14);
    }

    .md\:h-20 {
      height: calc(var(--spacing) * 20);
    }

    .md\:h-32 {
      height: calc(var(--spacing) * 32);
    }

    .md\:h-36 {
      height: calc(var(--spacing) * 36);
    }

    .md\:min-h-\[100px\] {
      min-height: 100px;
    }

    .md\:min-h-\[140px\] {
      min-height: 140px;
    }

    .md\:min-h-\[220px\] {
      min-height: 220px;
    }

    .md\:w-2\.5 {
      width: calc(var(--spacing) * 2.5);
    }

    .md\:w-6 {
      width: calc(var(--spacing) * 6);
    }

    .md\:w-7 {
      width: calc(var(--spacing) * 7);
    }

    .md\:w-8 {
      width: calc(var(--spacing) * 8);
    }

    .md\:w-12 {
      width: calc(var(--spacing) * 12);
    }

    .md\:w-14 {
      width: calc(var(--spacing) * 14);
    }

    .md\:w-20 {
      width: calc(var(--spacing) * 20);
    }

    .md\:w-24 {
      width: calc(var(--spacing) * 24);
    }

    .md\:w-36 {
      width: calc(var(--spacing) * 36);
    }

    .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
      width: var(--radix-navigation-menu-viewport-width);
    }

    .md\:w-auto {
      width: auto;
    }

    .md\:max-w-\[420px\] {
      max-width: 420px;
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-\[1\.45fr_0\.95fr\] {
      grid-template-columns: 1.45fr .95fr;
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .md\:p-5 {
      padding: calc(var(--spacing) * 5);
    }

    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:p-9 {
      padding: calc(var(--spacing) * 9);
    }

    .md\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .md\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .md\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .md\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }

    .md\:px-14 {
      padding-inline: calc(var(--spacing) * 14);
    }

    .md\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }

    .md\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }

    .md\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }

    .md\:py-32 {
      padding-block: calc(var(--spacing) * 32);
    }

    .md\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .md\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .md\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .md\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .md\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .md\:text-7xl {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }

    .md\:text-8xl {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }

    .md\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .md\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .md\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .md\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }

    .md\:opacity-0 {
      opacity: 0;
    }

    .md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant="inset"] ~ *) {
      margin: calc(var(--spacing) * 2);
    }

    .md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant="inset"] ~ *) {
      margin-left: calc(var(--spacing) * 0);
    }

    .md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant="inset"] ~ *) {
      border-radius: var(--radius-xl);
    }

    .md\:peer-data-\[variant\=inset\]\:shadow:is(:where(.peer)[data-variant="inset"] ~ *) {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2:is(:where(.peer)[data-state="collapsed"] ~ *):is(:where(.peer)[data-variant="inset"] ~ *) {
      margin-left: calc(var(--spacing) * 2);
    }
  }

  .after\:md\:hidden:after {
    content: var(--tw-content);
  }

  @media (min-width: 48rem) {
    .after\:md\:hidden:after {
      display: none;
    }
  }

  @media (min-width: 64rem) {
    .lg\:order-1 {
      order: 1;
    }

    .lg\:order-2 {
      order: 2;
    }

    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .lg\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .lg\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .lg\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .lg\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .lg\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .lg\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:h-44 {
      height: calc(var(--spacing) * 44);
    }

    .lg\:h-full {
      height: 100%;
    }

    .lg\:min-h-\[460px\] {
      min-height: 460px;
    }

    .lg\:w-1\/3 {
      width: 33.3333%;
    }

    .lg\:w-2\/3 {
      width: 66.6667%;
    }

    .lg\:w-44 {
      width: calc(var(--spacing) * 44);
    }

    .lg\:max-w-none {
      max-width: none;
    }

    .lg\:min-w-\[360px\] {
      min-width: 360px;
    }

    .lg\:min-w-\[520px\] {
      min-width: 520px;
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[1\.55fr_1fr\] {
      grid-template-columns: 1.55fr 1fr;
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:items-center {
      align-items: center;
    }

    .lg\:items-end {
      align-items: flex-end;
    }

    .lg\:justify-between {
      justify-content: space-between;
    }

    .lg\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    .lg\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }

    .lg\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }

    .lg\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .lg\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .lg\:p-20 {
      padding: calc(var(--spacing) * 20);
    }

    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .lg\:py-14 {
      padding-block: calc(var(--spacing) * 14);
    }

    .lg\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }

    .lg\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }

    .lg\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }

    .lg\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }

    .lg\:text-left {
      text-align: left;
    }

    .lg\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .lg\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .lg\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .lg\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .lg\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .lg\:text-7xl {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }

    .lg\:text-8xl {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }

    .lg\:text-9xl {
      font-size: var(--text-9xl);
      line-height: var(--tw-leading, var(--text-9xl--line-height));
    }

    .lg\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .lg\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-\[1\.35fr_0\.78fr\] {
      grid-template-columns: 1.35fr .78fr;
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-amber-800 {
      border-color: var(--color-amber-800);
    }

    .dark\:border-blue-800 {
      border-color: var(--color-blue-800);
    }

    .dark\:border-gray-600 {
      border-color: var(--color-gray-600);
    }

    .dark\:border-red-800 {
      border-color: var(--color-red-800);
    }

    .dark\:border-slate-700 {
      border-color: var(--color-slate-700);
    }

    .dark\:bg-amber-900\/20 {
      background-color: #7b330633;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-amber-900\/20 {
        background-color: color-mix(in oklab, var(--color-amber-900) 20%, transparent);
      }
    }

    .dark\:bg-blue-900\/20 {
      background-color: #1c398e33;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-blue-900\/20 {
        background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
      }
    }

    .dark\:bg-blue-900\/30 {
      background-color: #1c398e4d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-blue-900\/30 {
        background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
      }
    }

    .dark\:bg-gray-700 {
      background-color: var(--color-gray-700);
    }

    .dark\:bg-gray-800 {
      background-color: var(--color-gray-800);
    }

    .dark\:bg-red-900\/20 {
      background-color: #82181a33;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-red-900\/20 {
        background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
      }
    }

    .dark\:bg-slate-700 {
      background-color: var(--color-slate-700);
    }

    .dark\:bg-slate-800 {
      background-color: var(--color-slate-800);
    }

    .dark\:bg-slate-900 {
      background-color: var(--color-slate-900);
    }

    .dark\:text-amber-300 {
      color: var(--color-amber-300);
    }

    .dark\:text-blue-300 {
      color: var(--color-blue-300);
    }

    .dark\:text-blue-400 {
      color: var(--color-blue-400);
    }

    .dark\:text-gray-300 {
      color: var(--color-gray-300);
    }

    .dark\:text-gray-400 {
      color: var(--color-gray-400);
    }

    .dark\:text-red-400 {
      color: var(--color-red-400);
    }

    .dark\:text-slate-400 {
      color: var(--color-slate-400);
    }

    .dark\:text-white {
      color: var(--color-white);
    }

    @media (hover: hover) {
      .dark\:hover\:bg-slate-600:hover {
        background-color: var(--color-slate-600);
      }

      .dark\:hover\:text-blue-300:hover {
        color: var(--color-blue-300);
      }

      .dark\:hover\:text-gray-300:hover {
        color: var(--color-gray-300);
      }
    }
  }

  .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke="#fff"] {
    stroke: #0000;
  }

  .\[\&_\.recharts-layer\]\:outline-none .recharts-layer, .\[\&_\.recharts-sector\]\:outline-none .recharts-sector {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke="#fff"] {
    stroke: #0000;
  }

  .\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] {
    padding-top: calc(var(--spacing) * 0);
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
    height: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
    width: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
    height: calc(var(--spacing) * 12);
  }

  .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
    padding-block: calc(var(--spacing) * 3);
  }

  .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
    height: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
    width: calc(var(--spacing) * 5);
  }

  .\[\&_p\]\:leading-relaxed p {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:size-4 svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_tr\]\:border-b tr {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected="true"] button, .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:first-child:has([aria-selected]) {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:last-child:has([aria-selected]), .\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {
    padding-right: calc(var(--spacing) * 0);
  }

  :is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_next > svg), :is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_previous > svg) {
    rotate: 180deg;
  }

  .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected="true"] button {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  @media (min-width: 48rem) {
    .md\:\[\&\>\*\:first-child\]\:order-2 > :first-child {
      order: 2;
    }
  }

  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
    --tw-translate-y: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>button\]\:hidden > button {
    display: none;
  }

  .\[\&\>span\]\:line-clamp-1 > span {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .\[\&\>span\]\:text-xs > span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\[\&\>span\]\:opacity-70 > span {
    opacity: .7;
  }

  .\[\&\>span\:last-child\]\:truncate > span:last-child {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\[\&\>svg\]\:absolute > svg {
    position: absolute;
  }

  .\[\&\>svg\]\:top-4 > svg {
    top: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:left-4 > svg {
    left: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:size-3\.5 > svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\]\:size-4 > svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:h-2\.5 > svg {
    height: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:h-3 > svg {
    height: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:h-3\.5 > svg {
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\]\:w-2\.5 > svg {
    width: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:w-3 > svg {
    width: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:w-3\.5 > svg {
    width: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\]\:shrink-0 > svg {
    flex-shrink: 0;
  }

  .\[\&\>svg\+div\]\:translate-y-\[-3px\] > svg + div {
    --tw-translate-y: -3px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>svg\~\*\]\:pl-7 > svg ~ * {
    padding-left: calc(var(--spacing) * 7);
  }

  .\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction="vertical"] > div {
    rotate: 90deg;
  }

  .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg {
    rotate: 180deg;
  }

  [data-side="left"] .\[\[data-side\=left\]_\&\]\:cursor-w-resize {
    cursor: w-resize;
  }

  [data-side="left"][data-collapsible="offcanvas"] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
    right: calc(var(--spacing) * -2);
  }

  [data-side="left"][data-state="collapsed"] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize, [data-side="right"] .\[\[data-side\=right\]_\&\]\:cursor-e-resize {
    cursor: e-resize;
  }

  [data-side="right"][data-collapsible="offcanvas"] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
    left: calc(var(--spacing) * -2);
  }

  [data-side="right"][data-state="collapsed"] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
    cursor: w-resize;
  }

  [data-slot="card-content"] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent, [data-slot="popover-content"] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
    background-color: #0000;
  }
}

:root {
  color-scheme: light;
  --text-color: #0b1220;
  --accent-color: var(--accent-500);
  --theme-primary-500: #007aff;
  --theme-primary-600: #0066d6;
  --theme-primary-700: #0052ad;
  --theme-primary-contrast: #fff;
  --theme-secondary-500: #0a84ff;
  --theme-secondary-600: #0070f0;
  --theme-secondary-700: #0056c7;
  --theme-secondary-contrast: #fff;
  --lg-bg-1: #fff;
  --lg-bg-2: #f8faff;
  --lg-bg-3: #f1f5fb;
  --lg-surface: #ffffff9e;
  --lg-surface-strong: #ffffffd1;
  --lg-surface-dark: #0a1224ad;
  --lg-border: #ffffffc7;
  --lg-border-soft: #0f172a14;
  --lg-border-strong: #0f172a24;
  --lg-specular: #ffffffb8;
  --lg-inner-stroke: #ffffff8c;
  --lg-glow: 0 0 0 1px #ffffff59 inset;
  --lg-shadow-sm: 0 1px 2px #0f172a0d,
    0 6px 16px #0f172a12;
  --lg-shadow-md: 0 2px 4px #0f172a0f,
    0 12px 28px #0f172a1a, 0 28px 60px #0f172a0f;
  --lg-shadow-lg: 0 4px 10px #0f172a0f,
    0 20px 50px #0f172a1f, 0 50px 120px #0f172a14;
  --lg-blur: 22px;
  --lg-blur-strong: 32px;
  --lg-radius-sm: 12px;
  --lg-radius-md: 16px;
  --lg-radius-lg: 22px;
  --lg-radius-pill: 999px;
  --lg-fg: #0b1220;
  --lg-fg-muted: #0b12209e;
  --lg-fg-soft: #0b1220b8;
  --accent-500: var(--theme-primary-500);
  --accent-600: var(--theme-primary-600);
  --accent-700: var(--theme-primary-700);
  --accent-contrast: var(--theme-primary-contrast);
  --accent-shadow: 0 6px 14px #007aff38,
    0 18px 44px #007aff2e;
  --focus-ring: 0 0 0 4px #007aff2e;
  --accent-secondary-500: var(--theme-secondary-500);
  --accent-secondary-600: var(--theme-secondary-600);
  --accent-secondary-700: var(--theme-secondary-700);
  --accent-secondary-contrast: var(--theme-secondary-contrast);
  --danger-500: #ff3b30;
  --danger-600: #d70015;
  --danger-contrast: #fff;
  --success-500: #34c759;
  --warning-500: #ff9f0a;
  --ease-out: cubic-bezier(.25, .8, .25, 1);
  --ease-springy: cubic-bezier(.2, .9, .2, 1);
}

html, body {
  background: var(--lg-bg-1);
  color: var(--lg-fg);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root {
  z-index: 1;
  background: var(--lg-bg-1);
  min-height: 100dvh;
  position: relative;
}

[data-theme="dark"] #root, [data-theme="navy"] #root {
  background: var(--bg-page, #0d1117);
}

.lg-surface {
  background: radial-gradient(circle at 18% 8%, var(--lg-specular), transparent 48%), linear-gradient(180deg, #ffffffbd, #ffffff8a);
  border: 1px solid var(--lg-border-soft);
  box-shadow: var(--lg-shadow-md), var(--lg-glow);
  border-radius: var(--lg-radius-lg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%);
}

.lg-surface-strong {
  border: 1px solid var(--lg-border-soft);
  box-shadow: var(--lg-shadow-lg), var(--lg-glow);
  border-radius: var(--lg-radius-lg);
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(190%);
  background: radial-gradient(circle at 22% 10%, #fffc, #0000 52%), linear-gradient(#ffffffdb, #ffffffad);
}

.lg-surface-dark {
  background: var(--lg-surface-dark);
  border-radius: var(--lg-radius-lg);
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(150%);
  color: #ffffffeb;
  border: 1px solid #94a3b847;
  box-shadow: 0 18px 46px #02061773;
}

.lg-surface, .lg-surface-strong, .lg-surface-dark {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.lg-divider {
  border-bottom: 1px solid var(--lg-border-soft);
}

.lg-input {
  border-radius: var(--lg-radius-sm);
  color: var(--lg-fg);
  transition: box-shadow .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out);
  background: #ffffffb8;
  border: 1px solid #0f172a1a;
  box-shadow: inset 0 1px #fffc, 0 1px #0f172a05;
}

.lg-input:focus {
  box-shadow: var(--focus-ring);
  background: #ffffffe0;
  border-color: #007aff73;
  outline: none;
}

.lg-btn {
  border-radius: var(--lg-radius-pill);
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), filter .18s var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid #0f172a1a;
  padding: 10px 16px;
  font-weight: 700;
}

.lg-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.lg-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.lg-btn-accent {
  color: var(--accent-contrast);
  background: radial-gradient(circle at 30% 18%, #ffffff59, transparent 55%), linear-gradient(180deg, var(--accent-secondary-500), var(--accent-500));
  box-shadow: var(--accent-shadow);
  border-color: #007aff38;
}

.lg-switch {
  --switch-w: 44px;
  --switch-h: 26px;
  width: var(--switch-w);
  height: var(--switch-h);
  box-shadow: var(--lg-shadow-sm), var(--lg-glow);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  cursor: pointer;
  transition: background .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
  background: radial-gradient(circle at 30% 20%, #fffc, #0000 62%), linear-gradient(#ffffffb8, #ffffff73);
  border: 1px solid #0f172a1f;
  border-radius: 999px;
  position: relative;
}

.lg-switch:after {
  content: "";
  width: 20px;
  height: 20px;
  transition: transform .18s var(--ease-springy);
  background: radial-gradient(circle at 30% 25%, #fffffff2, #ffffffc7);
  border-radius: 999px;
  position: absolute;
  top: 3px;
  left: 3px;
  transform: translateX(0);
  box-shadow: 0 10px 18px #0f172a29, inset 0 1px #ffffffd9;
}

.lg-switch[data-checked="true"] {
  box-shadow: var(--accent-shadow), var(--lg-glow);
  background: radial-gradient(circle at 30% 20%, #fff6, #0000 60%), linear-gradient(#0a84fff2, #007affd9);
  border-color: #007aff38;
}

.lg-switch[data-checked="true"]:after {
  transform: translateX(18px);
}

.lg-btn-soft {
  color: #0b1220d6;
  box-shadow: var(--lg-shadow-sm);
  background: #ffffff9e;
  border-color: #94a3b847;
}

.lg-btn-danger {
  color: var(--danger-contrast);
  background: linear-gradient(180deg, var(--danger-500), var(--danger-600));
  border-color: #ff3b3033;
  box-shadow: 0 12px 24px #ff3b3038;
}

.lg-overlay {
  z-index: 1400;
  background: radial-gradient(circle at 22% 18%, #0071e32e, #0a1224e0), linear-gradient(#0a1224db, #0a1224f0);
  position: fixed;
  inset: 0;
}

.lg-modal {
  border-radius: var(--lg-radius-lg);
  width: min(560px, 92vw);
  max-height: 86vh;
  padding: 18px;
  overflow: auto;
}

@media (prefers-reduced-motion: reduce) {
  .lg-btn, .lg-input {
    transition: none !important;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --text-color: #f0f6fc;
  --lg-bg-1: #0d1117;
  --lg-bg-2: #161b22;
  --lg-bg-3: #1c2128;
  --lg-surface: #161b22b8;
  --lg-surface-strong: #1c2128e0;
  --lg-surface-dark: #0d1117f2;
  --lg-border: #ffffff0f;
  --lg-border-soft: #ffffff14;
  --lg-border-strong: #ffffff24;
  --lg-specular: #ffffff08;
  --lg-inner-stroke: #ffffff0f;
  --lg-glow: 0 0 0 1px #ffffff0f inset;
  --lg-fg: #f0f6fc;
  --lg-fg-muted: #f0f6fc9e;
  --lg-fg-soft: #f0f6fcb8;
  --accent-500: #58a6ff;
  --accent-600: #79c0ff;
  --accent-700: #a5d6ff;
  --accent-contrast: #0d1117;
  --accent-shadow: 0 6px 14px #58a6ff38,
    0 18px 44px #58a6ff1f;
  --focus-ring: 0 0 0 4px #58a6ff2e;
  --accent-secondary-500: #79c0ff;
  --accent-secondary-600: #a5d6ff;
  --accent-secondary-700: #cae8ff;
  --lg-shadow-sm: 0 1px 2px #0006, 0 6px 16px #00000059;
  --lg-shadow-md: 0 2px 4px #0006, 0 12px 28px #00000073,
    0 28px 60px #00000059;
  --lg-shadow-lg: 0 4px 10px #0006, 0 20px 50px #00000080,
    0 50px 120px #0006;
}

[data-theme="dark"] .lg-surface {
  border: 1px solid var(--lg-border-soft);
  box-shadow: var(--lg-shadow-md), var(--lg-glow);
  background: radial-gradient(circle at 18% 8%, #58a6ff0d, #0000 48%), linear-gradient(#161b22bd, #0d11178a);
}

[data-theme="dark"] .lg-surface-strong {
  border: 1px solid var(--lg-border-soft);
  box-shadow: var(--lg-shadow-lg), var(--lg-glow);
  background: radial-gradient(circle at 22% 10%, #58a6ff0f, #0000 52%), linear-gradient(#1c2128db, #0d1117ad);
}

[data-theme="dark"] .lg-surface-dark {
  background: var(--lg-surface-dark);
  color: #ffffffeb;
  border: 1px solid #58a6ff1a;
  box-shadow: 0 18px 46px #0009;
}

[data-theme="dark"] .lg-input {
  color: var(--lg-fg);
  background: #161b22b8;
  border: 1px solid #ffffff14;
  box-shadow: inset 0 1px 2px #0006, 0 1px #ffffff05;
}

[data-theme="dark"] .lg-input:focus {
  box-shadow: var(--focus-ring);
  background: #161b22e0;
  border-color: #58a6ff73;
}

[data-theme="dark"] .lg-btn-accent {
  background: radial-gradient(circle at 30% 18%, #ffffff26, transparent 55%), linear-gradient(180deg, var(--accent-secondary-500), var(--accent-500));
  box-shadow: var(--accent-shadow);
  border-color: #58a6ff38;
}

[data-theme="dark"] .lg-switch {
  background: radial-gradient(circle at 30% 20%, #58a6ff26, #0000 62%), linear-gradient(#161b22b8, #0d111773);
  border: 1px solid #ffffff1a;
}

[data-theme="dark"] .lg-switch[data-checked="true"] {
  background: radial-gradient(circle at 30% 20%, #fff3, #0000 60%), linear-gradient(#58a6ffd9, #58a6ff99);
  border-color: #58a6ff4d;
}

[data-theme="dark"] .lg-btn-soft {
  color: #ffffffd6;
  background: #161b229e;
  border-color: #58a6ff26;
}

[data-theme="dark"] .lg-overlay {
  background: radial-gradient(circle at 22% 18%, #58a6ff1a, #0d1117eb), linear-gradient(#0d1117e6, #090c11f2);
}

[data-theme="navy"] {
  color-scheme: dark;
  --text-color: #e8edf5;
  --lg-bg-1: #060d1f;
  --lg-bg-2: #0a1428;
  --lg-bg-3: #0f1e38;
  --lg-surface: #0a1430c2;
  --lg-surface-strong: #0e1a3ae6;
  --lg-surface-dark: #040918f5;
  --lg-border: #ffffff0e;
  --lg-border-soft: #ffffff12;
  --lg-border-strong: #ffffff1f;
  --lg-specular: #60a5fa0f;
  --lg-inner-stroke: #ffffff0d;
  --lg-glow: 0 0 0 1px #ffffff0d inset;
  --lg-fg: #e8edf5;
  --lg-fg-muted: #e8edf594;
  --lg-fg-soft: #e8edf5b3;
  --accent-500: #60a5fa;
  --accent-600: #93c5fd;
  --accent-700: #bfdbfe;
  --accent-contrast: #060d1f;
  --accent-shadow: 0 6px 14px #60a5fa3d,
    0 18px 44px #60a5fa24;
  --focus-ring: 0 0 0 4px #60a5fa2e;
  --accent-secondary-500: #93c5fd;
  --accent-secondary-600: #bfdbfe;
  --accent-secondary-700: #dbeafe;
  --lg-shadow-sm: 0 1px 2px #00000c80, 0 6px 16px #00000c66;
  --lg-shadow-md: 0 2px 4px #00000c7a,
    0 12px 28px #00000c8a, 0 28px 60px #00000c66;
  --lg-shadow-lg: 0 4px 10px #00000c7a,
    0 20px 50px #00000c99, 0 50px 120px #00000c7a;
}

[data-theme="navy"] html, [data-theme="navy"] .lg-surface {
  border: 1px solid var(--lg-border-soft);
  box-shadow: var(--lg-shadow-md), var(--lg-glow);
  background: radial-gradient(circle at 18% 8%, #60a5fa0f, #0000 48%), linear-gradient(#0c1834cc, #060d1e99);
}

[data-theme="navy"] .lg-surface-strong {
  border: 1px solid var(--lg-border-soft);
  box-shadow: var(--lg-shadow-lg), var(--lg-glow);
  background: radial-gradient(circle at 22% 10%, #60a5fa14, #0000 52%), linear-gradient(#101e40e0, #081026b8);
}

[data-theme="navy"] .lg-surface-dark {
  background: var(--lg-surface-dark);
  color: #ffffffeb;
  border: 1px solid #60a5fa17;
  box-shadow: 0 20px 56px #00000cb3;
}

[data-theme="navy"] .lg-input {
  color: var(--lg-fg);
  background: #060e24cc;
  border: 1px solid #ffffff14;
  box-shadow: inset 0 1px 2px #00000c80, 0 1px #ffffff05;
}

[data-theme="navy"] .lg-input:focus {
  box-shadow: var(--focus-ring);
  background: #08122ee6;
  border-color: #60a5fa73;
}

[data-theme="navy"] .lg-btn-accent {
  background: radial-gradient(circle at 30% 18%, #ffffff24, transparent 55%), linear-gradient(180deg, var(--accent-secondary-500), var(--accent-500));
  box-shadow: var(--accent-shadow);
  border-color: #60a5fa3d;
}

[data-theme="navy"] .lg-switch {
  background: radial-gradient(circle at 30% 20%, #60a5fa24, #0000 62%), linear-gradient(#0a1430cc, #04091880);
  border: 1px solid #ffffff17;
}

[data-theme="navy"] .lg-switch[data-checked="true"] {
  background: radial-gradient(circle at 30% 20%, #ffffff2e, #0000 60%), linear-gradient(#60a5facc, #60a5fa8f);
  border-color: #60a5fa4d;
}

[data-theme="navy"] .lg-btn-soft {
  color: #e8edf5d6;
  background: #0a143099;
  border-color: #60a5fa24;
}

[data-theme="navy"] .lg-overlay {
  background: radial-gradient(circle at 22% 18%, #60a5fa17, #040918f0), linear-gradient(#040918eb, #020510f7);
}

[data-theme="dark"] .liquid-island-header {
  background: linear-gradient(145deg, #161b22db, #0d1117b8);
  border-color: #ffffff17;
  box-shadow: 0 22px 44px #0000008c, 0 0 0 1px #ffffff0f, inset 0 0 40px #58a6ff0a;
}

[data-theme="navy"] .liquid-island-header {
  background: linear-gradient(145deg, #0c1834e6, #060d1ec2);
  border-color: #ffffff12;
  box-shadow: 0 22px 48px #00000cb3, 0 0 0 1px #ffffff0d, inset 0 0 40px #60a5fa0d;
}

[data-theme="dark"] .home-shell, [data-theme="dark"] .page-shell, [data-theme="navy"] .home-shell, [data-theme="navy"] .page-shell {
  background: none;
}

[data-theme="dark"] html, [data-theme="dark"] body {
  background: radial-gradient(80% 50% at 20% 10%, #ffffff0a 0%, #0000 55%), radial-gradient(60% 40% at 80% 80%, #c8d2ff08 0%, #0000 50%), radial-gradient(50% 60%, #ffffff04 0%, #0000 60%), #0d1117 !important;
}

[data-theme="navy"] html, [data-theme="navy"] body {
  background: radial-gradient(90% 55% at 15% 8%, #1d4ed847 0%, #0000 55%), radial-gradient(70% 50% at 85% 85%, #2563eb38 0%, #0000 50%), radial-gradient(60% 70% at 50% 40%, #1e40af29 0%, #0000 60%), radial-gradient(40% 35% at 70% 15%, #3b82f61f 0%, #0000 45%), radial-gradient(45% 30% at 25% 75%, #2563eb1a 0%, #0000 50%), #060d1f !important;
}

[data-theme="navy"] .page-shell, [data-theme="navy"] .home-shell, [data-theme="dark"] .page-shell, [data-theme="dark"] .home-shell {
  background: none !important;
}

:root, [data-theme="light"] {
  --accent: #007aff;
  --accent-rgb: 0, 122, 255;
  --accent-dark: #05c;
  --accent-alt: #34aadc;
  --accent-light: #dbeafe;
  --accent-muted: #eff6ff;
  --bg-page: #f5f5f7;
}

[data-theme="dark"] {
  --accent: #58a6ff;
  --accent-rgb: 88, 166, 255;
  --accent-dark: #388bfd;
  --accent-alt: #79c0ff;
  --accent-light: #172033;
  --accent-muted: #0f172a;
  --bg-page: #0d1117;
}

[data-theme="navy"] {
  --accent: #60a5fa;
  --accent-rgb: 96, 165, 250;
  --accent-dark: #3b82f6;
  --accent-alt: #93c5fd;
  --accent-light: #0d2347;
  --accent-muted: #071530;
  --bg-page: #060d1f;
}

[data-accent="sky"]:not([data-theme="dark"]):not([data-theme="navy"]), [data-theme="light"][data-accent="sky"] {
  --accent: #60a5fa;
  --accent-rgb: 96, 165, 250;
  --accent-dark: #3b82f6;
  --accent-alt: #93c5fd;
}

[data-theme="dark"][data-accent="sky"], [data-theme="navy"][data-accent="sky"] {
  --accent: #93c5fd;
  --accent-rgb: 147, 197, 253;
  --accent-dark: #60a5fa;
  --accent-alt: #bfdbfe;
}

[data-theme="light"][data-accent="rose"], :root[data-accent="rose"] {
  --accent: #fb7185;
  --accent-rgb: 251, 113, 133;
  --accent-dark: #e04f64;
  --accent-alt: #fc8d9d;
}

[data-theme="dark"][data-accent="rose"], [data-theme="navy"][data-accent="rose"] {
  --accent: #fda4af;
  --accent-rgb: 253, 164, 175;
  --accent-dark: #fb7185;
  --accent-alt: #feb5be;
}

[data-theme="light"][data-accent="lime"], :root[data-accent="lime"] {
  --accent: #84cc16;
  --accent-rgb: 132, 204, 22;
  --accent-dark: #65a30d;
  --accent-alt: #97d935;
}

[data-theme="dark"][data-accent="lime"], [data-theme="navy"][data-accent="lime"] {
  --accent: #bef264;
  --accent-rgb: 190, 242, 100;
  --accent-dark: #a3e635;
  --accent-alt: #caff75;
}

[data-theme="light"][data-accent="blue"], :root[data-accent="blue"] {
  --accent: #5b8def;
  --accent-rgb: 91, 141, 239;
  --accent-dark: #3b72d9;
  --accent-alt: #60a5fa;
}

[data-theme="dark"][data-accent="blue"], [data-theme="navy"][data-accent="blue"] {
  --accent: #93c5fd;
  --accent-rgb: 147, 197, 253;
  --accent-dark: #60a5fa;
  --accent-alt: #7aaaf8;
}

[data-theme="light"][data-accent="teal"] {
  --accent: #00c9a7;
  --accent-rgb: 0, 201, 167;
  --accent-dark: #009f84;
  --accent-alt: #00e0bb;
}

[data-theme="dark"][data-accent="teal"], [data-theme="navy"][data-accent="teal"] {
  --accent: #00ddb8;
  --accent-rgb: 0, 221, 184;
  --accent-dark: #00bfa0;
  --accent-alt: #00f0c8;
}

[data-theme="light"][data-accent="slate"] {
  --accent: #a8b2c1;
  --accent-rgb: 168, 178, 193;
  --accent-dark: #8898aa;
  --accent-alt: #b8c2d1;
}

[data-theme="dark"][data-accent="slate"], [data-theme="navy"][data-accent="slate"] {
  --accent: #c4cdd8;
  --accent-rgb: 196, 205, 216;
  --accent-dark: #a0aab5;
  --accent-alt: #d0d8e2;
}

[data-theme="light"][data-accent="amber"] {
  --accent: #f5a623;
  --accent-rgb: 245, 166, 35;
  --accent-dark: #d4881a;
  --accent-alt: #f7b84e;
}

[data-theme="dark"][data-accent="amber"], [data-theme="navy"][data-accent="amber"] {
  --accent: #ffb627;
  --accent-rgb: 255, 182, 39;
  --accent-dark: #e09800;
  --accent-alt: #ffc54e;
}

[data-theme="light"][data-accent="purple"] {
  --accent: #a855f7;
  --accent-rgb: 168, 85, 247;
  --accent-dark: #8b33e0;
  --accent-alt: #b970f8;
}

[data-theme="dark"][data-accent="purple"], [data-theme="navy"][data-accent="purple"] {
  --accent: #c084fc;
  --accent-rgb: 192, 132, 252;
  --accent-dark: #a855f7;
  --accent-alt: #cc96fd;
}

[data-theme="light"][data-accent="pink"] {
  --accent: #f43f8e;
  --accent-rgb: 244, 63, 142;
  --accent-dark: #d42070;
  --accent-alt: #f761a2;
}

[data-theme="dark"][data-accent="pink"], [data-theme="navy"][data-accent="pink"] {
  --accent: #f76daf;
  --accent-rgb: 247, 109, 175;
  --accent-dark: #e04f97;
  --accent-alt: #f985be;
}

[data-theme="light"][data-accent="red"] {
  --accent: #ef4444;
  --accent-rgb: 239, 68, 68;
  --accent-dark: #c22;
  --accent-alt: #f26666;
}

[data-theme="dark"][data-accent="red"], [data-theme="navy"][data-accent="red"] {
  --accent: #f87171;
  --accent-rgb: 248, 113, 113;
  --accent-dark: #ef4444;
  --accent-alt: #fa8888;
}

.is-scrolling .lg-surface, .is-scrolling .lg-surface-strong, .is-scrolling .lg-surface-dark {
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

[data-theme="dark"] body, [data-theme="dark"] html {
  background: #0d1117 !important;
}

[data-theme="navy"] body, [data-theme="navy"] html {
  background: #060d1f !important;
}

[data-theme="dark"] #root, [data-theme="dark"] .wrapper, [data-theme="dark"] main, [data-theme="dark"] .page-shell, [data-theme="dark"] .home-shell, [data-theme="dark"] .home-dashboard, [data-theme="navy"] #root, [data-theme="navy"] .wrapper, [data-theme="navy"] main, [data-theme="navy"] .page-shell, [data-theme="navy"] .home-shell, [data-theme="navy"] .home-dashboard {
  background: none !important;
}

[data-theme="dark"] .widget-title-icon, [data-theme="navy"] .widget-title-icon {
  background: rgba(var(--accent-rgb), .15) !important;
  color: var(--accent) !important;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), .24) !important;
  border-color: #0000 !important;
}

[data-theme="dark"] .result-match-card {
  color: #e2e8f0 !important;
  background: #1e283ae6 !important;
  border-color: #ffffff14 !important;
}

[data-theme="navy"] .result-match-card {
  color: #e8edf5 !important;
  background: #0e1a3aeb !important;
  border-color: #60a5fa1a !important;
}

[data-theme="dark"] .match-versus {
  background: #0f172ad9 !important;
}

[data-theme="navy"] .match-versus {
  background: #060d1fe0 !important;
}

[data-theme="dark"] .match-team, [data-theme="navy"] .match-team {
  color: inherit !important;
}

[data-theme="dark"] .match-meta, [data-theme="navy"] .match-meta {
  color: #94a3b8cc !important;
}

[data-theme="dark"] .rank-item, [data-theme="navy"] .rank-item {
  background: var(--w-rank-item-bg, #1e2d48cc) !important;
  border-color: var(--w-rank-item-border, #ffffff14) !important;
  color: inherit !important;
}

[data-theme="dark"] .rank-item:hover, [data-theme="navy"] .rank-item:hover {
  background: var(--w-rank-item-hover, #283a5af2) !important;
}

[data-theme="dark"] .rank-name, [data-theme="navy"] .rank-name {
  color: var(--w-rank-name-color, #e2e8f0) !important;
}

[data-theme="dark"] .rank-score, [data-theme="navy"] .rank-score {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb), .13) !important;
  border-color: rgba(var(--accent-rgb), .24) !important;
}

[data-theme="dark"] .rank-pos, [data-theme="navy"] .rank-pos {
  color: #94a3b8 !important;
  background: #ffffff12 !important;
  border-color: #ffffff17 !important;
}

[data-theme="dark"] .news-item, [data-theme="navy"] .news-item {
  background: var(--w-item-bg, #1e2d48cc) !important;
  border-color: var(--w-item-border, #ffffff14) !important;
  color: inherit !important;
}

[data-theme="dark"] .news-item:hover, [data-theme="navy"] .news-item:hover {
  background: var(--w-item-bg-hover, #283a5af2) !important;
}

[data-theme="dark"] .news-item p, [data-theme="navy"] .news-item p {
  color: var(--w-text-color, #cbd5e1) !important;
}

[data-theme="dark"] .news-date, [data-theme="navy"] .news-date {
  color: var(--accent) !important;
}

[data-theme="dark"] .news-switch-track, [data-theme="dark"] .rank-switch-track, [data-theme="dark"] .rank-tabs, [data-theme="navy"] .news-switch-track, [data-theme="navy"] .rank-switch-track, [data-theme="navy"] .rank-tabs {
  background: #ffffff12 !important;
  border-color: #ffffff17 !important;
}

[data-theme="dark"] .rank-switch-pill, [data-theme="dark"] .news-switch-pill, [data-theme="navy"] .rank-switch-pill, [data-theme="navy"] .news-switch-pill {
  background: var(--accent) !important;
}

[data-theme="dark"] .news-chip, [data-theme="dark"] .rank-tab, [data-theme="dark"] .rank-switch-item, [data-theme="navy"] .news-chip, [data-theme="navy"] .rank-tab, [data-theme="navy"] .rank-switch-item {
  color: #94a3b8 !important;
}

[data-theme="dark"] .news-chip.active, [data-theme="dark"] .rank-tab.active, [data-theme="dark"] .rank-switch-item.active, [data-theme="navy"] .news-chip.active, [data-theme="navy"] .rank-tab.active, [data-theme="navy"] .rank-switch-item.active {
  color: #0f172a !important;
}

[data-theme="dark"] .progress-circle-wrapper, [data-theme="navy"] .progress-circle-wrapper {
  background: none !important;
}

[data-theme="dark"] .progress-inner, [data-theme="navy"] .progress-inner {
  background: #0d1117f5 !important;
}

[data-theme="dark"] .progress-text, [data-theme="navy"] .progress-text {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .progress-sub, [data-theme="navy"] .progress-sub {
  color: #64748b !important;
}

[data-theme="dark"] .target-input, [data-theme="navy"] .target-input {
  color: #e2e8f0 !important;
  background: #0f172ad1 !important;
  border-color: #ffffff1c !important;
}

[data-theme="dark"] .target-input::placeholder, [data-theme="navy"] .target-input::placeholder {
  color: #475569 !important;
}

[data-theme="dark"] .posters-section, [data-theme="navy"] .posters-section {
  background: none !important;
}

[data-theme="dark"] .section-title {
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

[data-theme="navy"] .section-title {
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(135deg, #e8edf5 0%, #93c5fd 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

[data-theme="dark"] .view-all-link, [data-theme="navy"] .view-all-link {
  color: var(--accent) !important;
}

[data-theme="dark"] .wide-btn {
  color: #fff !important;
  background: #ffffff26 !important;
  border-color: #ffffff4d !important;
}

[data-theme="navy"] .wide-btn {
  color: #fff !important;
  background: #60a5fa2e !important;
  border-color: #60a5fa59 !important;
}

[data-theme="dark"] .wide-slider-container, [data-theme="navy"] .wide-slider-container, [data-theme="dark"] .subject-slider-section, [data-theme="navy"] .subject-slider-section {
  background: none !important;
}

[data-theme="dark"] .widget-empty, [data-theme="dark"] .widget-loading, [data-theme="dark"] .rankings-loading, [data-theme="navy"] .widget-empty, [data-theme="navy"] .widget-loading, [data-theme="navy"] .rankings-loading {
  color: #475569 !important;
}

[data-theme="dark"] .aura-section, [data-theme="navy"] .aura-section {
  filter: drop-shadow(0 0 24px rgba(var(--accent-rgb), .22));
}

:root {
  --text-color: var(--lg-fg);
  --accent-color: var(--accent-500);
}

html, body {
  color: var(--text-color);
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Inter, sans-serif;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: #9b9b9b4d;
  border-radius: 10px;
  transition: background .3s;
}

::-webkit-scrollbar-thumb:hover {
  background: #9b9b9b80;
}

* {
  -webkit-tap-highlight-color: transparent;
  outline-color: var(--accent-color);
}

.wrapper {
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  display: flex;
}

main {
  flex: 1;
  width: 100%;
  padding-top: 110px;
}

header a {
  color: var(--lg-fg-muted);
  transition: color .18s var(--ease-out);
  font-weight: 500;
  text-decoration: none;
}

header a:hover {
  color: var(--accent-color);
}

.page-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.home-shell {
  flex-direction: column;
  gap: 28px;
  display: flex;
}

.page-loading {
  background: var(--lg-bg-1);
  border-radius: var(--lg-radius-lg);
  min-height: 24vh;
  animation: 1.4s ease-in-out infinite page-shimmer;
}

@keyframes page-shimmer {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

[data-theme="dark"] .page-loading, [data-theme="navy"] .page-loading {
  background: var(--bg-page, #0d1117);
}

.fixed-video {
  object-fit: cover;
  width: 100%;
  max-height: 60vh;
  display: block;
}

.banner_2 {
  min-height: 300px;
  color: var(--lg-fg);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px 20px;
  font-size: 35px;
  display: flex;
}

.demo {
  color: var(--accent-500);
  font-weight: bold;
}

.redirect_join {
  color: var(--accent-contrast);
  background: linear-gradient(180deg, var(--accent-500) 0%, #0a84ff 100%);
  border-radius: var(--lg-radius-pill);
  cursor: pointer;
  box-shadow: var(--accent-shadow);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), filter .18s var(--ease-out);
  border: 1px solid #0071e338;
  margin-top: 20px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
}

.redirect_join:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.four_banners_container {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  display: grid;
}

.four_banners_container img {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}

.home-dashboard {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.banner_1 {
  object-fit: cover;
  width: 100%;
  height: auto;
  margin: 40px 0;
  display: block;
}

.subject-slider-section {
  isolation: isolate;
  backface-visibility: hidden;
  background: none;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.subject-slider-orb {
  pointer-events: none;
  filter: blur(60px);
  opacity: .22;
  z-index: 0;
  will-change: opacity;
  backface-visibility: hidden;
  border-radius: 50%;
  position: absolute;
  transform: translateZ(0);
}

.subject-slider-orb-1 {
  background: radial-gradient(circle, #60a5fa, #0000 70%);
  width: 360px;
  height: 360px;
  animation: 12s ease-in-out infinite alternate orb-drift;
  top: -80px;
  left: 8%;
}

.subject-slider-orb-2 {
  background: radial-gradient(circle, #a78bfa, #0000 70%);
  width: 260px;
  height: 260px;
  animation: 16s ease-in-out infinite alternate-reverse orb-drift;
  bottom: -60px;
  right: 12%;
}

.subject-slider-orb-3 {
  background: radial-gradient(circle, #34d399, #0000 70%);
  width: 200px;
  height: 200px;
  animation: 14s ease-in-out 2s infinite alternate orb-drift;
  top: 20%;
  left: 45%;
}

@keyframes orb-drift {
  from {
    opacity: .18;
  }

  to {
    opacity: .36;
  }
}

[data-theme="navy"] .subject-slider-section {
  background: none;
}

[data-theme="navy"] .subject-slider-orb-1 {
  opacity: .45;
  background: radial-gradient(circle, #1d4ed8, #0000 70%);
}

[data-theme="navy"] .subject-slider-orb-2 {
  opacity: .38;
  background: radial-gradient(circle, #2563eb, #0000 70%);
}

[data-theme="navy"] .subject-slider-orb-3 {
  opacity: .32;
  background: radial-gradient(circle, #1e40af, #0000 70%);
}

[data-theme="dark"] .subject-slider-section {
  background: none;
}

[data-theme="dark"] .subject-slider-orb-1 {
  opacity: .07;
  background: radial-gradient(circle, #fff9, #0000 70%);
}

[data-theme="dark"] .subject-slider-orb-2 {
  opacity: .06;
  background: radial-gradient(circle, #c8dcffcc, #0000 70%);
}

[data-theme="dark"] .subject-slider-orb-3 {
  opacity: .05;
  background: radial-gradient(circle, #ffffff80, #0000 70%);
}

.subject-slider-inner {
  z-index: 1;
  width: 100%;
  padding: 0;
  position: relative;
}

.subject-slider-header {
  text-align: center;
  margin-bottom: 2.4rem;
  padding: 0 1.5rem;
}

.subject-slider-eyebrow {
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-500);
  opacity: .72;
  margin-bottom: .5rem;
  font-size: .7rem;
  font-weight: 800;
  display: inline-block;
}

.subject-slider-title {
  letter-spacing: -.035em;
  color: var(--lg-fg);
  margin: 0 0 .5rem;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.15;
}

.subject-slider-subtitle {
  color: var(--lg-fg-muted);
  margin: 0;
  font-size: .92rem;
}

.subject-slider-fade-left, .subject-slider-fade-right {
  z-index: 3;
  pointer-events: none;
  width: 80px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.subject-slider-fade-left {
  background: linear-gradient(to right, var(--lg-bg-1, #fff), transparent);
  left: 0;
}

.subject-slider-fade-right {
  background: linear-gradient(to left, var(--lg-bg-1, #fff), transparent);
  right: 0;
}

[data-theme="dark"] .subject-slider-fade-left {
  background: linear-gradient(to right, var(--bg-page, #0d1117), transparent);
}

[data-theme="dark"] .subject-slider-fade-right {
  background: linear-gradient(to left, var(--bg-page, #0d1117), transparent);
}

[data-theme="navy"] .subject-slider-fade-left {
  background: linear-gradient(to right, var(--bg-page, #060d1f), transparent);
}

[data-theme="navy"] .subject-slider-fade-right {
  background: linear-gradient(to left, var(--bg-page, #060d1f), transparent);
}

.subject-slider-track-wrap {
  isolation: isolate;
  backface-visibility: hidden;
  width: 100%;
  padding: 1rem 0;
  overflow: hidden;
  transform: translateZ(0);
}

.subject-slider-track {
  will-change: transform;
  backface-visibility: hidden;
  gap: 1.2rem;
  width: max-content;
  padding: 0 1.2rem;
  animation: 32s linear infinite subject-scroll;
  display: flex;
  transform: translate3d(0, 0, 0);
}

.subject-slider-track.paused {
  animation-play-state: paused;
}

@keyframes subject-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-33.3333%);
  }
}

.subject-card {
  cursor: pointer;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style paint;
  background: #ffffffb3;
  border: 1px solid #fffc;
  border-radius: 22px;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  min-width: 190px;
  height: 110px;
  transition: transform .34s cubic-bezier(.34, 1.36, .64, 1), box-shadow .28s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px #0000000f, 0 1px 4px #0000000a, inset 0 1px #ffffffe6;
}

.subject-card:hover {
  box-shadow: 0 16px 40px var(--card-glow, #60a5fa4d), 0 4px 12px #00000014, inset 0 1px 0 #ffffffe6;
  border-color: var(--card-color, #60a5fa);
  transform: translateY(-8px) scale(1.04);
}

[data-theme="dark"] .subject-card {
  background: #161b22d1;
  border-color: #ffffff12;
  box-shadow: 0 4px 20px #00000080, 0 1px 6px #0006, inset 0 1px #ffffff0d;
}

[data-theme="dark"] .subject-card:hover {
  box-shadow: 0 0 0 1px var(--card-color), 0 16px 48px var(--card-glow, #ffffff1f), 0 6px 16px #00000080, inset 0 1px 0 #ffffff14;
  background: #1e252eeb;
}

[data-theme="navy"] .subject-card {
  background: #0a1434d1;
  border-color: #60a5fa1f;
  box-shadow: 0 4px 24px #00000c8c, 0 1px 6px #00000c70, inset 0 1px #60a5fa0f;
}

[data-theme="navy"] .subject-card:hover {
  box-shadow: 0 0 0 1px var(--card-color), 0 0 32px var(--card-glow, #1d4ed880), 0 16px 48px #00000c99, inset 0 1px 0 #60a5fa1a;
  background: #0e1c44eb;
}

.subject-card-glow-ring {
  background: radial-gradient(circle, var(--card-glow, #60a5fa40), transparent 70%);
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  transition: opacity .3s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
}

.subject-card:hover .subject-card-glow-ring {
  opacity: 1;
}

.subject-card-icon {
  z-index: 1;
  filter: drop-shadow(0 2px 6px var(--card-glow, #60a5fa66));
  font-size: 2rem;
  line-height: 1;
  transition: transform .28s cubic-bezier(.34, 1.5, .64, 1);
  position: relative;
}

.subject-card:hover .subject-card-icon {
  transform: scale(1.18) rotate(-4deg);
}

.subject-card-name {
  letter-spacing: -.01em;
  text-align: center;
  z-index: 1;
  color: var(--lg-fg);
  padding: 0 10px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  transition: color .2s;
  position: relative;
}

.subject-card:hover .subject-card-name {
  color: var(--card-color, var(--accent-500));
}

.subject-card-shine {
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, #0000, #ffffff38, #0000);
  width: 50%;
  height: 100%;
  transition: opacity .4s, left .6s;
  position: absolute;
  top: 0;
  left: -60%;
  transform: skewX(-20deg);
}

.subject-card:hover .subject-card-shine {
  opacity: 1;
  left: 130%;
}

[data-theme="dark"] .subject-card-shine, [data-theme="navy"] .subject-card-shine {
  background: linear-gradient(100deg, #0000, #ffffff0f, #0000);
}

@media (max-width: 640px) {
  .subject-slider-title {
    font-size: 1.6rem;
  }

  .subject-card {
    min-width: 150px;
    height: 96px;
  }

  .subject-card-icon {
    font-size: 1.6rem;
  }

  .subject-slider-fade-left, .subject-slider-fade-right {
    width: 60px;
  }
}

.liquid-glass-slider, .teacher-card, .slider-track {
  display: none;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

footer {
  color: var(--lg-fg-muted);
  border-top: 1px solid var(--lg-border-soft);
  text-align: center;
  background: linear-gradient(#ffffff8c, #ffffff59);
  margin-top: auto;
  padding: 40px 20px;
  font-size: small;
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    height: auto;
    padding: 15px;
  }

  main {
    padding-top: 84px;
    padding-bottom: 90px;
  }

  .four_banners_container {
    grid-template-columns: 1fr;
  }

  .banner_2 {
    font-size: 24px;
  }
}

.register-container {
  background: #fff;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - 60px);
  font-family: Inter, sans-serif;
  display: flex;
  position: relative;
  overflow: hidden;
}

.background-shape {
  filter: blur(60px);
  z-index: 0;
  opacity: .6;
  border-radius: 50%;
  animation: 15s ease-in-out infinite alternate float;
  position: absolute;
}

.shape-1 {
  background: #a1c4fd;
  width: 400px;
  height: 400px;
  top: -10%;
  left: -10%;
}

.shape-2 {
  background: #c2e9fb;
  width: 350px;
  height: 350px;
  animation-delay: -5s;
  bottom: -5%;
  right: -5%;
}

.shape-3 {
  background: #e0c3fc;
  width: 300px;
  height: 300px;
  animation-duration: 20s;
  top: 40%;
  left: 40%;
}

@keyframes float {
  0% {
    transform: translate(0) scale(1);
  }

  100% {
    transform: translate(40px, 20px) scale(1.1);
  }
}

.glass-card {
  z-index: 10;
  background: var(--lg-surface-strong);
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(170%);
  border: 1px solid var(--lg-border);
  width: 450px;
  max-width: 90%;
  box-shadow: var(--lg-shadow-lg);
  color: var(--lg-fg);
  text-align: center;
  border-radius: 24px;
  margin: 40px 0;
  padding: 40px;
  position: relative;
}

.title {
  color: var(--lg-fg);
  letter-spacing: -.5px;
  margin-bottom: 25px;
  font-size: 2rem;
  font-weight: 700;
}

.type-selector {
  border-bottom: 1px solid var(--lg-border-soft);
  justify-content: space-around;
  margin-bottom: 30px;
  padding-bottom: 10px;
  display: flex;
}

.type-btn {
  color: var(--lg-fg-muted);
  cursor: pointer;
  transition: color .18s var(--ease-out);
  background: none;
  border: none;
  padding: 10px;
  font-size: 1rem;
  font-weight: 500;
  position: relative;
}

.type-btn.active {
  color: var(--accent-500);
  font-weight: 600;
}

.active-underline {
  background: var(--accent-500);
  border-radius: 2px;
  height: 2px;
  position: absolute;
  bottom: -11px;
  left: 0;
  right: 0;
}

.fields-wrapper {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.input-group {
  width: 100%;
  position: relative;
}

.styled-input {
  border-radius: var(--lg-radius-sm);
  width: 100%;
  color: var(--lg-fg);
  transition: box-shadow .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out);
  box-sizing: border-box;
  background: #ffffffb8;
  border: 1px solid #94a3b857;
  outline: none;
  padding: 16px;
  font-size: 1rem;
}

.styled-input:focus {
  box-shadow: var(--focus-ring);
  background: #ffffffe0;
  border-color: #0071e38c;
}

.styled-input option {
  color: #1d1d1f;
  background: #fff;
}

.floating-label {
  color: var(--lg-fg-muted);
  pointer-events: none;
  background-color: #0000;
  padding: 0 4px;
  transition: all .2s;
  position: absolute;
  top: 16px;
  left: 15px;
}

.styled-input:focus ~ .floating-label, .styled-input:not(:placeholder-shown) ~ .floating-label {
  color: var(--accent-500);
  background-color: #ffffffeb;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 600;
  top: -10px;
  left: 12px;
}

.register-row {
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  display: grid;
}

.gender-group {
  border: 1px solid var(--lg-border-soft);
  border-radius: var(--lg-radius-sm);
  background: #ffffff8c;
  justify-content: space-around;
  padding: 12px;
  display: flex;
}

.gender-group label {
  cursor: pointer;
  color: var(--lg-fg);
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  display: flex;
}

.gender-group input[type="radio"] {
  accent-color: var(--accent-500);
  width: 18px;
  height: 18px;
}

.submit-btn {
  border-radius: var(--lg-radius-pill);
  background: linear-gradient(180deg, var(--accent-500) 0%, #0a84ff 100%);
  width: 100%;
  color: var(--accent-contrast);
  cursor: pointer;
  box-shadow: var(--accent-shadow);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), filter .18s var(--ease-out);
  border: 1px solid #0071e338;
  margin-top: 30px;
  padding: 16px;
  font-size: 1.1rem;
  font-weight: 600;
}

.submit-btn:hover {
  filter: brightness(1.03);
  box-shadow: 0 16px 34px #0071e352;
}

.submit-btn:active {
  transform: scale(.98);
}

.login_redirect {
  margin-top: 50px;
}

.chat-glass-card {
  z-index: 10;
  background: var(--lg-surface-strong);
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(170%);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-lg);
  width: 800px;
  max-width: 95%;
  height: 80vh;
  max-height: 700px;
  box-shadow: var(--lg-shadow-lg);
  flex-direction: column;
  margin: 100px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.chat-header {
  border-bottom: 1px solid var(--lg-border-soft);
  background: #ffffff8c;
  align-items: center;
  gap: 15px;
  padding: 15px 25px;
  display: flex;
}

.chat-avatar {
  color: #fff;
  background: linear-gradient(135deg, #0077ed, #00c6ff);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
}

.chat-info h3 {
  color: var(--lg-fg);
  margin: 0;
  font-size: 1.1rem;
}

.chat-status {
  color: var(--accent-500);
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: .8rem;
  display: flex;
}

.status-dot {
  background-color: var(--accent-500);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: inline-block;
}

.chat-body {
  background: #ffffff2e;
  flex-direction: column;
  flex: 1;
  gap: 15px;
  padding: 20px;
  display: flex;
  overflow-y: auto;
}

.message {
  word-wrap: break-word;
  border-radius: 18px;
  max-width: 70%;
  padding: 12px 18px;
  font-size: .95rem;
  line-height: 1.4;
  position: relative;
  box-shadow: 0 2px 5px #0000000d;
}

.message.admin {
  color: #1d1d1f;
  background: #fff;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

.message.user {
  color: #fff;
  background: linear-gradient(135deg, #0077ed 0%, #0071e3 100%);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.msg-time {
  opacity: .7;
  text-align: right;
  margin-top: 5px;
  font-size: .7rem;
  display: block;
}

.chat-footer {
  border-top: 1px solid var(--lg-border-soft);
  background: #ffffffb8;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  display: flex;
}

.chat-input {
  border-radius: var(--lg-radius-pill);
  transition: box-shadow .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out);
  background: #ffffffb8;
  border: 1px solid #94a3b857;
  outline: none;
  flex: 1;
  padding: 12px 20px;
  font-family: Inter, sans-serif;
  font-size: 1rem;
}

.chat-input:focus {
  box-shadow: var(--focus-ring);
  background: #ffffffe0;
  border-color: #0071e380;
}

.send-btn {
  background: var(--accent-500);
  width: 45px;
  height: 45px;
  color: var(--accent-contrast);
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), filter .18s var(--ease-out);
  box-shadow: var(--accent-shadow);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  display: flex;
}

.send-btn:hover {
  background: var(--accent-600);
  filter: brightness(1.02);
  transform: translateY(-1px);
}

.classroom-shell {
  background: var(--lg-bg);
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - 60px);
  padding: 40px 20px;
  display: flex;
  position: relative;
  overflow-x: hidden;
}

.bg-blob {
  filter: blur(80px);
  z-index: 0;
  opacity: .5;
  border-radius: 50%;
  animation: 15s ease-in-out infinite alternate float;
  position: absolute;
}

.blob-blue {
  background: #a1c4fd;
  width: 450px;
  height: 450px;
  top: -10%;
  left: -10%;
}

.blob-purple {
  background: #e0c3fc;
  width: 400px;
  height: 400px;
  animation-delay: -5s;
  bottom: 10%;
  right: -5%;
}

.z-10 {
  z-index: 10;
}

.flex-center {
  justify-content: center;
  align-items: center;
  display: flex;
}

.flex-col-center {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.flex-row-between {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.full-width {
  width: 100%;
}

.glass-panel {
  background: var(--lg-surface-strong);
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(170%);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-shadow-lg);
  border-radius: var(--lg-radius-lg);
}

.classroom-title {
  color: var(--lg-fg);
  text-align: center;
  margin-bottom: 5px;
  font-size: 2.5rem;
  font-weight: 800;
}

.classroom-subtitle {
  color: var(--lg-fg-muted);
  text-align: center;
  margin-bottom: 40px;
  font-size: 1.1rem;
}

.majors-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
  width: 100%;
  max-width: 1100px;
  display: grid;
}

.major-card {
  text-align: center;
  cursor: pointer;
  transition: all .3s var(--ease-out);
  justify-content: center;
  align-items: center;
  height: 200px;
  padding: 30px;
  display: flex;
}

.major-card:hover {
  border-color: var(--accent-400);
  box-shadow: 0 16px 34px #0071e326;
}

.major-icon {
  margin-bottom: 15px;
  font-size: 3.5rem;
}

.major-name {
  color: var(--lg-fg);
  font-size: 1.3rem;
  font-weight: 700;
}

.back-btn {
  cursor: pointer;
  border-radius: var(--lg-radius-pill);
  border: 1px solid var(--lg-border-soft);
  background: var(--lg-surface);
  color: var(--lg-fg-muted);
  transition: all .2s var(--ease-out);
  align-self: flex-start;
  margin-bottom: 20px;
  padding: 10px 20px;
  font-weight: 600;
}

.back-btn:hover {
  color: var(--lg-fg);
  background: #fffc;
}

.levels-wrapper {
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 700px;
  margin-top: 30px;
  display: flex;
}

.level-card {
  cursor: pointer;
  border-radius: 20px;
  padding: 25px 30px;
  transition: all .3s;
}

.level-card.unlocked:hover {
  border-color: var(--accent-500);
  background: #ffffffe6;
}

.level-card.locked {
  opacity: .6;
  cursor: not-allowed;
  background: #fff6;
}

.level-number {
  color: var(--accent-500);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .9rem;
  font-weight: 700;
}

.level-title {
  color: var(--lg-fg);
  margin: 5px 0;
  font-size: 1.5rem;
}

.level-meta {
  color: var(--lg-fg-muted);
  margin: 0;
  font-size: .95rem;
}

.star-display .star {
  margin-left: 5px;
  font-size: 1.5rem;
}

.play-icon {
  color: var(--accent-500);
  border-radius: var(--lg-radius-pill);
  background: #0071e31a;
  padding: 8px 16px;
  font-weight: 700;
}

.lock-icon {
  color: #8c8c93;
  font-weight: 600;
}

.quiz-wrapper {
  width: 100%;
  max-width: 900px;
  margin-top: 20px;
  padding: 40px;
}

.strict-warning {
  color: #d93025;
  text-align: center;
  background: #ff3b301a;
  border: 1px solid #ff3b304d;
  border-radius: 8px;
  margin-bottom: 25px;
  padding: 10px;
  font-weight: 700;
}

.quiz-header {
  color: var(--lg-fg-muted);
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
}

.quiz-lives {
  color: #ff2d55;
  font-weight: 700;
}

.timer-container {
  background: #0000000d;
  border-radius: 6px;
  width: 100%;
  height: 12px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.timer-bar {
  background: linear-gradient(90deg, #34c759, #34c759);
  border-radius: 6px;
  height: 100%;
}

.timer-bar.danger {
  background: linear-gradient(90deg, #ff9500, #ff3b30);
  animation: 1s infinite alternate pulse;
}

.timer-text {
  color: #ffffffe6;
  mix-blend-mode: exclusion;
  font-size: .75rem;
  font-weight: bold;
  position: absolute;
  top: -2px;
  right: 10px;
}

.question-text {
  color: var(--lg-fg);
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.4;
}

.question-text-ar {
  color: var(--lg-fg-muted);
  text-align: center;
  margin-bottom: 40px;
  font-size: 1.6rem;
  font-weight: 700;
}

.options-grid {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  display: grid;
}

.option-btn {
  cursor: pointer;
  background: #fff9;
  border: 2px solid #0000;
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 20px;
  transition: all .2s;
  display: flex;
}

.option-btn:hover {
  box-shadow: var(--lg-shadow-md);
  background: #fff;
  border-color: #0071e366;
  transform: translateY(-2px);
}

.option-text-en {
  color: var(--lg-fg);
  font-size: 1.15rem;
  font-weight: 700;
}

.option-text-ar {
  color: var(--lg-fg-muted);
  font-size: 1.1rem;
}

.option-btn.correct {
  background: #34c75933;
  border-color: #34c759;
}

.option-btn.correct .option-text-en, .option-btn.correct .option-text-ar {
  color: #1e8538;
}

.option-btn.wrong {
  background: #ff3b3026;
  border-color: #ff3b30;
}

.option-btn.wrong .option-text-en, .option-btn.wrong .option-text-ar {
  color: #c41e15;
}

.option-btn.highlight-correct {
  background: #fff;
  border-width: 2px;
  border-color: #34c759;
}

.option-btn.faded {
  opacity: .5;
  transform: scale(.98);
}

.timeout-message {
  color: #ff3b30;
  text-align: center;
  margin-top: 25px;
  font-size: 1.3rem;
  font-weight: 800;
  animation: .3s cubic-bezier(.175, .885, .32, 1.275) popIn;
}

.results-card {
  text-align: center;
  width: 100%;
  max-width: 600px;
  padding: 60px;
}

.results-title {
  color: var(--lg-fg);
  margin: 20px 0 10px;
  font-size: 2.5rem;
}

.results-subtitle {
  color: var(--lg-fg-muted);
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.success-anim {
  font-size: 5rem;
  animation: 1s infinite alternate bounce;
}

.fail-anim {
  font-size: 5rem;
  animation: .5s shake;
}

.stars-result {
  justify-content: center;
  gap: 10px;
  display: flex;
}

@keyframes bounce {
  0%, 100% {
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
    transform: translateY(-25%);
  }

  50% {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    transform: none;
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-10px);
  }

  50% {
    transform: translateX(10px);
  }

  75% {
    transform: translateX(-10px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@media (max-width: 768px) {
  .options-grid {
    grid-template-columns: 1fr;
  }

  .quiz-wrapper {
    padding: 20px;
  }
}

.home-dashboard {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  width: 100%;
  max-width: 1400px;
  margin: 50px auto 40px;
  padding: 0 20px;
  display: grid;
}

.widget-card {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(190%);
  backdrop-filter: blur(var(--lg-blur)) saturate(190%);
  color: #0b244ef2;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border .28s var(--ease-out);
  background: radial-gradient(circle at 12% 10%, #fffffff2, #0000 50%), linear-gradient(160deg, #fafbffbf, #f1f6ff66);
  border: 1px solid #ffffffbf;
  border-radius: 26px;
  flex-direction: column;
  min-height: 340px;
  padding: 24px;
  animation: .56s cubic-bezier(.22, 1, .36, 1) both widget-card-enter;
  display: flex;
  box-shadow: 0 12px 28px #0b1d4114, 0 34px 54px #0b1d411a, 0 0 0 1px #ffffff59;
}

.widget-card:hover {
  transform: translateY(-8px) scale(1.007);
  box-shadow: 0 14px 24px #0e192d1a, 0 34px 62px #0e192d29, 0 0 0 1px #ffffff6b;
}

.widget-card {
  color: #0b367af2;
}

[data-theme="dark"] .widget-card, [data-theme="dark"] .glass-widget-card {
  color: #e2e8f0 !important;
  background: #111827e0 !important;
  border-color: #ffffff14 !important;
  box-shadow: 0 4px 24px #00000073, 0 1px 8px #00000059, inset 0 1px #ffffff0a !important;
}

[data-theme="navy"] .widget-card, [data-theme="navy"] .glass-widget-card {
  color: #e8edf5 !important;
  background: #081026e6 !important;
  border-color: #60a5fa1a !important;
  box-shadow: 0 4px 24px #00000c8c, 0 1px 8px #00000c66, inset 0 1px #60a5fa0a !important;
}

[data-theme="dark"] .widget-card:hover, [data-theme="dark"] .glass-widget-card:hover {
  border-color: #ffffff24 !important;
  box-shadow: 0 18px 48px #0009, 0 6px 18px #00000073, 0 0 40px #ffffff0a, inset 0 1px #ffffff0f !important;
}

[data-theme="navy"] .widget-card:hover, [data-theme="navy"] .glass-widget-card:hover {
  border-color: #60a5fa47 !important;
  box-shadow: 0 18px 48px #00000cb3, 0 6px 18px #00000c80, 0 0 48px #2563eb38, inset 0 1px #60a5fa0f !important;
}

[data-theme="dark"] .widget-title, [data-theme="navy"] .widget-title {
  color: var(--w-title-color, #e2e8f0) !important;
}

[data-theme="dark"] .widget-title-icon, [data-theme="navy"] .widget-title-icon {
  background: rgba(var(--accent-rgb), .15) !important;
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), .2) !important;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), .24) !important;
}

.widget-card .glass-inverse, .rank-switch-pill, .news-switch-pill, .progress-switch-pill, .rank-pos {
  text-shadow: 0 1px 4px #050f2373;
  color: #fff !important;
}

.glass-widget-card:before {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(120deg, #ffffff2e, #ffffff0a);
  position: absolute;
  inset: 0;
}

[data-theme="dark"] .glass-widget-card:before, [data-theme="dark"] .widget-card:before, [data-theme="navy"] .glass-widget-card:before, [data-theme="navy"] .widget-card:before {
  display: none !important;
}

.widget-card, .glass-widget-card {
  position: relative;
  overflow: hidden;
}

@keyframes widget-card-enter {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.986);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.widget-title {
  color: #07234bfa;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
}

.widget-title-icon {
  border: 1px solid var(--lg-border-soft);
  width: 28px;
  height: 28px;
  color: var(--accent-500);
  background: #ffffffb3;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  box-shadow: inset 0 1px #ffffffb8;
}

.progress-circle-wrapper {
  -webkit-backdrop-filter: blur(11px) saturate(165%);
  backdrop-filter: blur(11px) saturate(165%);
  background: #ffffff73;
  border: 1px solid #fff9;
  border-radius: 18px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 12px;
  display: flex;
  box-shadow: inset 0 1px #ffffffb8, 0 8px 16px #0b12200f;
}

.progress-text {
  color: var(--accent-500);
  font-size: 3rem;
  font-weight: 800;
}

.target-setter {
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  display: flex;
}

.target-input {
  border-radius: var(--lg-radius-sm);
  color: var(--lg-fg);
  text-align: center;
  transition: box-shadow .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out);
  background: #ffffffb8;
  border: 1px solid #94a3b857;
  outline: none;
  flex: 1;
  padding: 10px;
}

.target-input:focus {
  box-shadow: var(--focus-ring);
  background: #ffffffe0;
  border-color: #0071e380;
}

.rank-tabs {
  background: var(--lg-surface);
  border: 1px solid var(--lg-border);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 #ffffffb8;
  border-radius: 999px;
  margin-bottom: 15px;
  padding: 7px;
  display: flex;
  position: relative;
}

.rank-tab {
  cursor: pointer;
  color: var(--lg-fg-muted);
  transition: background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out);
  z-index: 2;
  background: none;
  border: none;
  border-radius: 999px;
  flex: 1;
  padding: 9px 12px;
  font-weight: 600;
  position: relative;
}

.rank-tab.active {
  color: #fff;
  box-shadow: none;
  background: none;
}

.rank-switch-pill {
  background: linear-gradient(180deg, var(--accent-500), var(--accent-secondary-500));
  box-shadow: var(--accent-shadow), inset 0 1px 0 #fff3;
  pointer-events: none;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  position: absolute;
  top: 7px;
  bottom: 7px;
}

.rank-switch-pill[data-active="users"] {
  width: calc(50% - 7px);
  left: 7px;
}

.rank-switch-pill[data-active="teams"] {
  width: calc(50% - 7px);
  left: 50%;
}

.rank-list {
  flex-direction: column;
  gap: 10px;
  max-height: 250px;
  display: flex;
  overflow-y: auto;
}

.rank-item {
  color: #0b3884f5;
  -webkit-backdrop-filter: blur(11px) saturate(156%);
  backdrop-filter: blur(11px) saturate(156%);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
  background: #ffffff6b;
  border: 1px solid #ffffff6b;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  display: flex;
  box-shadow: inset 0 1px #ffffff8c, 0 2px 8px #0b122014;
}

.rank-item:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px #ffffffa6, 0 3px 14px #0b122026;
}

.rank-pos {
  background: var(--accent-500);
  color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  font-size: .8rem;
  font-weight: bold;
  display: flex;
}

.news-sections {
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  display: flex;
  overflow-x: auto;
}

.news-switch-track {
  background: var(--lg-surface);
  border: 1px solid var(--lg-border);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 #ffffffb8;
  border-radius: 999px;
  gap: 10px;
  margin-bottom: 25px;
  padding: 8px;
  display: flex;
  position: relative;
}

.news-chip {
  cursor: pointer;
  color: var(--lg-fg-muted);
  white-space: nowrap;
  transition: background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out);
  z-index: 2;
  background: none;
  border: none;
  border-radius: 999px;
  outline: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  font-size: .95rem;
  font-weight: 600;
  display: flex;
  position: relative;
}

.news-chip.active {
  color: #fff;
  box-shadow: none;
  background: none;
}

.news-switch-pill {
  background: linear-gradient(180deg, var(--accent-500), var(--accent-secondary-500));
  box-shadow: var(--accent-shadow), inset 0 1px 0 #fff3;
  pointer-events: none;
  z-index: 1;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  position: absolute;
  inset: 0;
}

.progress-switch-track {
  background: var(--lg-surface);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 #ffffffb8;
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  border-radius: 999px;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px;
  display: flex;
  position: relative;
}

.progress-switch-item {
  color: var(--lg-fg-muted);
  cursor: pointer;
  z-index: 2;
  background: none;
  border: none;
  border-radius: 999px;
  flex: 1;
  padding: 9px 12px;
  font-weight: 650;
}

.progress-switch-pill {
  background: linear-gradient(180deg, var(--accent-500), var(--accent-secondary-500));
  box-shadow: var(--accent-shadow), inset 0 1px 0 #fff3;
  pointer-events: none;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  position: absolute;
  top: 6px;
  bottom: 6px;
}

.progress-switch-pill[data-active="points"] {
  width: calc(50% - 6px);
  left: 6px;
}

.progress-switch-pill[data-active="percent"] {
  width: calc(50% - 6px);
  left: 50%;
}

.news-content {
  flex: 1;
  overflow-y: auto;
}

.news-item {
  color: #0b387cf5;
  border-left: 4px solid var(--accent-500);
  -webkit-backdrop-filter: blur(13px) saturate(170%);
  backdrop-filter: blur(13px) saturate(170%);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
  background: linear-gradient(#ffffffbd, #f9fcff70);
  border: 1px solid #ffffff80;
  border-radius: 14px;
  margin-bottom: 10px;
  padding: 14px;
  box-shadow: inset 0 1px #ffffffb8, 0 8px 22px #0b1d4314;
}

.news-item:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px #ffffffb8, 0 10px 22px #0b12201c;
}

.news-date {
  color: #86868b;
  margin-bottom: 5px;
  font-size: .75rem;
  display: block;
}

.result-match-card {
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  flex-direction: column;
  gap: 8px;
  padding: 12px 15px;
  display: flex;
  box-shadow: 0 2px 5px #0000000d;
}

.match-meta {
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .75rem;
  font-weight: 600;
}

.match-versus {
  background: #f5f5f7;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  display: flex;
}

.match-team {
  color: #1d1d1f;
  flex: 1;
  font-size: .9rem;
  font-weight: 600;
}

.match-team:last-child {
  text-align: right;
}

.match-score-box {
  color: #fff;
  white-space: nowrap;
  background: #0071e3;
  border-radius: 6px;
  margin: 0 10px;
  padding: 4px 10px;
  font-size: .9rem;
  font-weight: 700;
}

.posters-section {
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 40px 0;
  display: flex;
  position: relative;
}

.section-header {
  justify-content: space-between;
  align-items: flex-end;
  width: 80%;
  margin-bottom: 20px;
  display: flex;
}

.section-title {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #1d1d1f 0%, #434343 100%);
  -webkit-background-clip: text;
  font-size: 2rem;
  font-weight: 800;
}

.view-all-link {
  color: #0071e3;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s;
}

.view-all-link:hover {
  color: #005bb5;
}

.wide-slider-container {
  border-radius: 30px;
  width: 95%;
  max-width: 1200px;
  height: 520px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 60px -12px #00000040;
}

.wide-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.wide-image {
  object-fit: cover;
  filter: brightness(.85);
  width: 100%;
  height: 100%;
  transition: transform 6s;
}

.wide-overlay {
  color: #fff;
  background: linear-gradient(to right, #000c 0%, #0006 50%, #0000 100%);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 60px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.wide-tag {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  letter-spacing: .5px;
  text-transform: uppercase;
  background: #ffffff40;
  border: 1px solid #fff6;
  border-radius: 50px;
  width: fit-content;
  margin-bottom: 15px;
  padding: 8px 18px;
  font-size: .85rem;
  font-weight: 700;
  display: inline-block;
  box-shadow: 0 4px 10px #0000001a;
}

.wide-title {
  text-shadow: 0 4px 10px #0000004d;
  max-width: 600px;
  margin-bottom: 15px;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.wide-desc {
  opacity: .9;
  max-width: 500px;
  margin-bottom: 30px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
}

.wide-btn {
  color: #1d1d1f;
  cursor: pointer;
  background: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-weight: 600;
  transition: transform .2s;
}

.wide-btn:hover {
  transform: scale(1.05);
}

.slider-dots {
  z-index: 20;
  gap: 10px;
  display: flex;
  position: absolute;
  bottom: 30px;
  right: 40px;
}

.dot {
  cursor: pointer;
  background: #ffffff4d;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  transition: all .3s;
}

.dot.active {
  background: #fff;
  transform: scale(1.3);
}

@media (max-width: 768px) {
  .wide-slider-container, .section-header {
    width: 95%;
  }

  .wide-title {
    font-size: 2rem;
  }

  .wide-overlay {
    justify-content: flex-end;
    padding: 30px;
  }

  .wide-slider-container {
    height: 400px;
  }
}

.team-manager-box {
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 20px;
  margin-top: 30px;
  padding: 25px;
  overflow: hidden;
}

.notification-wrapper {
  z-index: 50;
  position: relative;
}

.notif-btn {
  cursor: pointer;
  color: #333;
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: all .2s;
  display: flex;
  box-shadow: 0 2px 5px #0000000d;
}

.notif-btn:hover {
  background: #f0f2f5;
  transform: scale(1.05);
}

.notif-badge {
  background: #ff3b30;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0;
  right: 0;
}

.notif-dropdown {
  z-index: 1000;
  transform-origin: 100% 0;
  background: #fff;
  border: 1px solid #0000000d;
  border-radius: 16px;
  flex-direction: column;
  width: 320px;
  max-height: 400px;
  display: flex;
  position: absolute;
  top: 50px;
  right: 0;
  overflow: hidden;
  box-shadow: 0 10px 40px #00000026;
}

.notif-header {
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  display: flex;
}

.notif-header h4 {
  color: #1d1d1f;
  margin: 0;
  font-size: .95rem;
}

.notif-count {
  color: #fff;
  background: #007bff;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 700;
}

.notif-list {
  max-height: 300px;
  padding: 10px;
  overflow-y: auto;
}

.notif-item {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  margin-bottom: 8px;
  padding: 12px;
  transition: background .2s;
}

.notif-item:hover {
  background: #f8f9fa;
}

.notif-msg {
  color: #333;
  margin: 0 0 10px;
  font-size: .9rem;
  line-height: 1.4;
}

.notif-actions {
  gap: 10px;
  display: flex;
}

.btn-accept-sm {
  color: #fff;
  cursor: pointer;
  background: #34c759;
  border: none;
  border-radius: 6px;
  flex: 1;
  padding: 6px;
  font-size: .8rem;
  font-weight: 600;
}

.btn-reject-sm {
  color: #fff;
  cursor: pointer;
  background: #ff3b30;
  border: none;
  border-radius: 6px;
  flex: 1;
  padding: 6px;
  font-size: .8rem;
  font-weight: 600;
}

.status-tag {
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 700;
}

.status-tag.accepted {
  color: #34c759;
}

.status-tag.rejected {
  color: #ff3b30;
}

.no-notifs {
  text-align: center;
  color: #86868b;
  padding: 20px;
  font-size: .9rem;
}

.team-manager-box {
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 20px;
  margin-top: 30px;
  padding: 25px;
}

.tm-title {
  color: #1d1d1f;
  margin-bottom: 20px;
  font-size: 1.2rem;
  font-weight: 700;
}

.tm-search-row {
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
}

.tm-search-input {
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  outline: none;
  flex: 1;
  padding: 12px 15px;
  font-size: 1rem;
  transition: border .2s;
}

.tm-search-input:focus {
  background: #fff;
  border-color: #007bff;
}

.tm-search-btn {
  color: #fff;
  cursor: pointer;
  background: #007bff;
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 50px;
  transition: background .2s;
  display: flex;
}

.tm-search-btn:hover {
  background: #0056b3;
}

.found-user-card {
  background: #fff;
  border: 1px solid #007bff;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  display: flex;
  box-shadow: 0 4px 12px #007bff1a;
}

.found-user-info strong {
  color: #1d1d1f;
  font-size: 1rem;
  display: block;
}

.found-user-info span {
  color: #666;
  font-size: .85rem;
}

.btn-invite {
  color: #fff;
  cursor: pointer;
  background: #34c759;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-weight: 600;
  transition: transform .1s;
  display: flex;
}

.btn-invite:active {
  transform: scale(.95);
}

.tm-subtitle {
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 15px;
  font-size: .95rem;
  font-weight: 700;
}

.members-list {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.member-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  display: flex;
  box-shadow: 0 2px 5px #00000005;
}

.member-id {
  color: #333;
  letter-spacing: 1px;
  font-family: Courier New, monospace;
  font-weight: 600;
}

.btn-remove-member {
  color: #ff3b30;
  cursor: pointer;
  background: #ff3b301a;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  transition: all .2s;
  display: flex;
}

.btn-remove-member:hover {
  color: #fff;
  background: #ff3b30;
}

.no-members {
  text-align: center;
  color: #999;
  padding: 10px;
  font-size: .9rem;
  font-style: italic;
}

.spinner-sm {
  border: 2px solid #ffffff80;
  border-top-color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: 1s linear infinite spin;
}

.notification-wrapper-top-right {
  z-index: 100;
  position: absolute;
  top: 20px;
  right: 20px;
}

.notif-btn-float {
  cursor: pointer;
  color: #333;
  background: #ffffffe6;
  border: 1px solid #0000001a;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  transition: all .2s;
  display: flex;
  box-shadow: 0 4px 10px #00000014;
}

.notif-btn-float:hover {
  background: #fff;
  transform: scale(1.1);
  box-shadow: 0 6px 15px #0000001f;
}

.notif-badge-float {
  background: #ff3b30;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0;
  right: 0;
}

.notif-dropdown-float {
  transform-origin: 100% 0;
  background: #fff;
  border: 1px solid #0000000d;
  border-radius: 16px;
  flex-direction: column;
  width: 320px;
  max-height: 400px;
  display: flex;
  position: absolute;
  top: 55px;
  right: 0;
  overflow: hidden;
  box-shadow: 0 15px 40px #0003;
}

.news-widget-container {
  background: #fff;
  border: 1px solid #00000008;
  border-radius: 24px;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  transition: box-shadow .3s, transform .3s;
  display: flex;
  box-shadow: 0 10px 40px #0000000d;
}

.news-widget-container:hover {
  box-shadow: 0 16px 50px #00000014;
}

.news-header {
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  display: flex;
}

.news-icon {
  color: #fff;
  background: #007bff;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  box-shadow: 0 4px 12px #007bff4d;
}

.news-widget-title {
  color: #1d1d1f;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.news-tabs-wrapper {
  background: #f5f5f7;
  border-radius: 14px;
  gap: 10px;
  margin-bottom: 20px;
  padding: 6px;
  display: flex;
}

.news-chip {
  color: #86868b;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 10px;
  flex: 1;
  padding: 10px 0;
  font-size: .9rem;
  font-weight: 600;
  transition: all .3s cubic-bezier(.25, 1, .5, 1);
}

.news-chip.active {
  color: #1d1d1f;
  background: #fff;
  box-shadow: 0 2px 8px #00000014;
}

.news-content-area {
  flex: 1;
  padding-right: 5px;
  overflow-y: auto;
}

.news-content-area::-webkit-scrollbar {
  width: 6px;
}

.news-content-area::-webkit-scrollbar-track {
  background: none;
}

.news-content-area::-webkit-scrollbar-thumb {
  background: #d2d2d7;
  border-radius: 10px;
}

.client-news-item, .client-result-card {
  cursor: pointer;
  background: #fdfdfd;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  margin-bottom: 12px;
  padding: 16px;
  transition: transform .2s, box-shadow .2s;
}

.client-news-item:hover, .client-result-card:hover {
  border-color: #e5e5ea;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px #0000000f;
}

.client-news-date {
  color: #007bff;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
  font-size: .8rem;
  font-weight: 700;
  display: block;
}

.client-news-text {
  color: #1d1d1f;
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
}

.client-match-meta {
  color: #86868b;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .5px;
  margin-bottom: 12px;
  font-size: .8rem;
  font-weight: 700;
}

.client-match-row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.client-team {
  color: #1d1d1f;
  text-align: center;
  flex: 1;
  font-size: 1.05rem;
  font-weight: 600;
}

.client-score-pill {
  color: #fff;
  letter-spacing: 1px;
  background: #1d1d1f;
  border-radius: 20px;
  padding: 6px 14px;
  font-weight: 800;
}

.loading-spinner-container {
  justify-content: center;
  align-items: center;
  height: 150px;
  display: flex;
}

.loading-spinner {
  border: 4px solid #f0f0f0;
  border-top-color: #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: 1s linear infinite spin;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.global-toast-container {
  z-index: 9999;
  pointer-events: none;
  flex-direction: column;
  gap: 12px;
  display: flex;
  position: fixed;
  top: 20px;
  right: 20px;
}

.global-toast {
  pointer-events: auto;
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #fff3;
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 450px;
  padding: 14px 20px;
  font-size: .95rem;
  font-weight: 500;
  display: flex;
  position: relative;
  overflow: hidden;
}

.global-toast-icon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.global-toast-content {
  flex: 1;
  min-width: 0;
}

.global-toast-message {
  line-height: 1.4;
  display: block;
}

.global-toast-progress {
  transform-origin: 100%;
  background: #ffffff80;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.confirm-modal-backdrop {
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  background: #0009;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

.confirm-modal-content {
  text-align: center;
  perspective: 1000px;
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 420px;
  padding: 32px;
  box-shadow: 0 25px 50px -12px #00000040, 0 0 0 1px #0000000d;
}

.confirm-modal-icon {
  justify-content: center;
  margin-bottom: 16px;
  display: flex;
}

.confirm-modal-title {
  color: #1f2937;
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.confirm-modal-message {
  color: #6b7280;
  white-space: pre-line;
  margin: 0 0 24px;
  font-size: .95rem;
  line-height: 1.5;
}

.confirm-modal-actions {
  justify-content: center;
  gap: 12px;
  display: flex;
}

.confirm-modal-btn {
  cursor: pointer;
  border: none;
  border-radius: 12px;
  min-width: 100px;
  padding: 12px 24px;
  font-size: .95rem;
  font-weight: 600;
  transition: all .2s;
}

.confirm-modal-btn-cancel {
  color: #4b5563;
  background: #f3f4f6;
}

.confirm-modal-btn-cancel:hover {
  background: #e5e7eb;
}

.confirm-modal-btn-confirm {
  color: #fff;
}

.confirm-modal-btn-confirm:hover {
  filter: brightness(1.1);
}

@media (prefers-color-scheme: dark) {
  .confirm-modal-content {
    background: #1f2937;
    box-shadow: 0 25px 50px -12px #00000080, 0 0 0 1px #ffffff1a;
  }

  .confirm-modal-title {
    color: #f9fafb;
  }

  .confirm-modal-message {
    color: #9ca3af;
  }

  .confirm-modal-btn-cancel {
    color: #d1d5db;
    background: #374151;
  }

  .confirm-modal-btn-cancel:hover {
    background: #4b5563;
  }
}

.profile-tabs-container {
  margin-bottom: 24px;
  padding: 0 20px;
}

.profile-tabs {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: #fff9;
  border: 1px solid #ffffff80;
  border-radius: 16px;
  gap: 8px;
  max-width: 400px;
  margin: 0 auto;
  padding: 6px;
  display: flex;
  box-shadow: 0 4px 20px #0000000d;
}

.profile-tab {
  color: #666;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 12px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: .95rem;
  font-weight: 600;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.profile-tab:hover {
  color: #333;
  background: #ffffff80;
}

.profile-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
  box-shadow: 0 4px 15px #007aff4d;
}

.tab-badge {
  background: #fff3;
  border-radius: 10px;
  margin-left: 4px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 700;
}

.profile-header-card {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: linear-gradient(135deg, #fffffff2 0%, #fafcffe6 100%);
  border: 1px solid #fff9;
  border-radius: 24px;
  margin-bottom: 24px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px #0000000f, 0 2px 8px #0000000a, inset 0 1px #fffc;
}

.profile-header-card:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(135deg, #007aff14 0%, #5856d60d 50%, #007aff08 100%);
  height: 120px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.profile-avatar-wrapper {
  background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
  border-radius: 50%;
  width: 160px;
  height: 160px;
  padding: 4px;
  box-shadow: 0 8px 32px #007aff40;
}

.profile-avatar-img {
  border: 4px solid #fff;
  box-shadow: 0 4px 20px #0000001a;
}

.default-avatar-placeholder {
  background: linear-gradient(135deg, #f0f4f8 0%, #e8eef5 100%);
  border: 4px solid #fff;
}

.profile-details-card {
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: #fffc;
  border: 1px solid #ffffff80;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 8px 32px #0000000a, 0 2px 8px #00000005;
}

.profile-section-header {
  border-bottom: 1px solid #0000000f;
  margin-bottom: 28px;
  padding-bottom: 20px;
}

.section-title {
  color: #1a1a1a;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
}

.profile-posts-card {
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: #fffc;
  border: 1px solid #ffffff80;
  border-radius: 24px;
  min-height: 400px;
  padding: 32px;
  box-shadow: 0 8px 32px #0000000a, 0 2px 8px #00000005;
}

.posts-count {
  color: #fff;
  background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 600;
}

.user-posts-list {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.user-post-item {
  background: #fff9;
  border: 1px solid #0000000a;
  border-radius: 20px;
  padding: 24px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.user-post-item:hover {
  background: #ffffffe6;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #0000000f;
}

.user-post-item:before {
  content: "";
  opacity: 0;
  background: linear-gradient(#007aff 0%, #5856d6 100%);
  width: 4px;
  transition: opacity .3s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.user-post-item:hover:before {
  opacity: 1;
}

.post-item-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.post-item-meta {
  color: #8e8e93;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  display: flex;
}

.post-pinned-badge {
  color: #fff;
  background: linear-gradient(135deg, #ff9500 0%, #ff6b35 100%);
  border-radius: 12px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: .75rem;
  font-weight: 600;
  display: flex;
}

.post-item-content {
  margin-bottom: 16px;
}

.post-item-content p {
  color: #1c1c1e;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.post-media-grid {
  border-radius: 16px;
  gap: 8px;
  margin-top: 16px;
  display: grid;
  overflow: hidden;
}

.post-media-count-1 {
  grid-template-columns: 1fr;
}

.post-media-count-2, .post-media-count-3 {
  grid-template-columns: repeat(2, 1fr);
}

.post-media-count-3 .post-media-item:first-child {
  grid-column: span 2;
}

.post-media-count-4 {
  grid-template-columns: repeat(2, 1fr);
}

.post-media-item {
  aspect-ratio: 16 / 10;
  background: #f5f5f7;
  border-radius: 12px;
  overflow: hidden;
}

.post-media-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .3s;
}

.post-media-item:hover img {
  transform: scale(1.05);
}

.post-file-attachment {
  color: #007aff;
  background: #007aff0d;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 100%;
  display: flex;
}

.post-file-attachment span {
  color: #666;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80%;
  font-size: .8rem;
  overflow: hidden;
}

.post-item-stats {
  border-top: 1px solid #0000000f;
  gap: 20px;
  padding-top: 16px;
  display: flex;
}

.stat-item {
  color: #8e8e93;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  font-weight: 500;
  display: flex;
}

.stat-item.clickable {
  cursor: pointer;
  transition: color .2s;
}

.stat-item.clickable:hover {
  color: #007aff;
}

.stat-item .liked {
  color: #ff2d55;
  fill: #ff2d55;
}

.expand-icon {
  transition: transform .2s;
}

.expand-icon.expanded {
  transform: rotate(90deg);
}

.post-comments-preview {
  border-top: 1px dashed #00000014;
  margin-top: 16px;
  padding-top: 16px;
  overflow: hidden;
}

.comment-preview-item {
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

.comment-avatar {
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  box-shadow: 0 2px 8px #0000001a;
}

.comment-text {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  display: flex;
}

.comment-author {
  color: #1c1c1e;
  font-size: .85rem;
  font-weight: 600;
}

.comment-body {
  color: #3a3a3c;
  font-size: .9rem;
  line-height: 1.4;
}

.more-comments {
  text-align: center;
  color: #8e8e93;
  margin-top: 8px;
  padding: 8px;
  font-size: .85rem;
  display: block;
}

.posts-loading {
  color: #8e8e93;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 60px 20px;
  display: flex;
}

.posts-empty {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 80px 20px;
  display: flex;
}

.posts-empty .empty-icon {
  color: #c7c7cc;
  opacity: .6;
}

.posts-empty h3 {
  color: #1c1c1e;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.posts-empty p {
  color: #8e8e93;
  margin: 0;
  font-size: .95rem;
}

.profile-follow-stats {
  background: #007aff0d;
  border: 1px solid #007aff1a;
  border-radius: 16px;
  margin-top: 20px;
  padding: 16px 24px;
}

@media (max-width: 768px) {
  .profile-tabs {
    max-width: 100%;
  }

  .profile-tab {
    padding: 10px 14px;
    font-size: .85rem;
  }

  .profile-tab span {
    display: none;
  }

  .profile-header-card {
    padding: 24px;
  }

  .profile-avatar-wrapper {
    width: 120px;
    height: 120px;
  }

  .profile-details-card, .profile-posts-card {
    padding: 20px;
  }

  .user-post-item {
    padding: 16px;
  }

  .post-media-grid {
    grid-template-columns: 1fr !important;
  }

  .post-media-count-3 .post-media-item:first-child {
    grid-column: span 1;
  }
}

html {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

a, button, [role="button"], input, select, textarea, .subject-card, .glass-widget-card, .widget-card, .rank-item, .news-item {
  touch-action: manipulation;
}

.page-shell, .home-shell, main, .wrapper {
  touch-action: pan-y;
}

.subject-slider-track-wrap, .wide-slider-container, .subject-slider-track {
  touch-action: pan-x;
}

.is-scrolling .scroll-stack-card {
  will-change: transform;
}

.tab-hidden * {
  animation-play-state: paused !important;
}

.subject-slider-section, .home-dashboard {
  contain: layout style;
}

@media (max-width: 768px) {
  .subject-slider-orb {
    opacity: .6;
    filter: blur(30px) !important;
  }

  .glass-widget-card, .widget-card {
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  }

  .lg-surface, .lg-surface-strong {
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  }

  .liquid-island-header {
    animation: none !important;
  }

  .subject-slider-orb-1, .subject-slider-orb-2, .subject-slider-orb-3 {
    opacity: .4;
    animation: none !important;
  }

  .subject-card {
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
    background: #ffffffe0 !important;
  }

  [data-theme="dark"] .subject-card {
    background: #161b22eb !important;
  }

  [data-theme="navy"] .subject-card {
    background: #0a1434eb !important;
  }

  .glass-widget-card:hover, .widget-card:hover {
    transform: none !important;
  }

  .subject-card:hover {
    box-shadow: inherit !important;
    transform: none !important;
  }
}

.is-scrolling .glass-widget-card, .is-scrolling .widget-card {
  -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
}

.is-scrolling .lg-surface, .is-scrolling .lg-surface-strong {
  -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
}

.subject-slider-track {
  transform: translate3d(0, 0, 0);
}

html, body {
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a, button, .widget-card, .glass-widget-card, .subject-card, .rank-item, .news-item, .dot, .ngs-card, .ngs-level-item, .neo-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (pointer: coarse) {
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  ::-webkit-scrollbar {
    display: none;
  }
}

.liquid-island-header, .liquid-island-header:before, .liquid-island-header:after {
  will-change: opacity;
  backface-visibility: hidden;
}

.widget-card, .glass-widget-card, .rank-item, .news-item, .subject-card, .lg-surface, .lg-surface-strong, .comm-card, .comm-liquid-glass, .glass-table-row, .scroll-stack-card {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.widget-card, .glass-widget-card {
  contain: layout style paint;
}

.rank-item, .news-item, .result-match-card, .subject-card {
  contain: layout style;
}

.widget-card, .glass-widget-card, .rank-item, .news-item, .subject-card, .comm-card, .comm-liquid-glass, .lg-surface, .lg-surface-strong, .glass-action-btn, .glass-table-row {
  transition: transform .24s cubic-bezier(.34, 1.1, .64, 1), opacity .18s, box-shadow .22s !important;
}

.is-scrolling .widget-card, .is-scrolling .glass-widget-card, .is-scrolling .rank-item, .is-scrolling .news-item, .is-scrolling .subject-card, .is-scrolling .comm-card, .is-scrolling .comm-liquid-glass, .is-scrolling .lg-surface, .is-scrolling .lg-surface-strong, .is-scrolling .glass-table-row {
  transition: none !important;
}

.is-scrolling .subject-slider-track {
  animation-play-state: running !important;
}

.tab-hidden .subject-slider-orb, .tab-hidden .subject-slider-track {
  animation-play-state: paused !important;
}

@keyframes widgetIn {
  from {
    opacity: 0;
    transform: translateY(10px) translateZ(0);
  }

  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

@keyframes itemIn {
  from {
    opacity: 0;
    transform: translateX(-10px) translateZ(0);
  }

  to {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
}

@keyframes rankIn {
  from {
    opacity: 0;
    transform: translateX(10px) translateZ(0);
  }

  to {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
}

.is-scrolling .ar-art, .is-scrolling .ar-glass, .is-scrolling .ar-scene, .is-scrolling .ar-art *, .is-scrolling .ar-scene * {
  animation-play-state: paused !important;
}

.ngs-blob, .bg-blob {
  will-change: opacity;
  animation: 22s ease-in-out infinite blob-drift !important;
  transform: translateZ(0) !important;
}

.ngs-blob--b {
  animation-delay: -7s !important;
}

.ngs-blob--c {
  animation-delay: -14s !important;
}

@keyframes blob-drift {
  0%, 100% {
    opacity: .28;
  }

  50% {
    opacity: .45;
  }
}

.ngs-card, .ngs-level-item, .neo-btn, .neo-option-btn, .neo-submit-btn, .ngs-game-icon, .ngs-leaderboard-btn, [class*="ngs-tab"], [class*="ngs-diff"] {
  transition: transform .18s cubic-bezier(.34, 1.1, .64, 1), opacity .15s, box-shadow .18s !important;
}

.ngs-card {
  contain: layout style paint;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.rank-tabs, .news-switch-track, .progress-switch-track, .progress-circle-wrapper, .glass-card, .chat-glass-card, .glass-panel, .profile-tabs, .profile-header-card, .profile-details-card, .profile-posts-card, .wide-tag, .global-toast, .uvp-profile-card, .uvp-tabs, .uvp-post-card, .uvp-follows-card, .cnt-stat-pill, .cnt-card {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.ar-section {
  contain: layout style;
  isolation: isolate;
}

.ar-section .ar-glow {
  will-change: transform;
  backface-visibility: hidden;
  transform: translate(-50%, -50%) translateZ(0);
}

.ar-section .ar-glass {
  will-change: transform;
  backface-visibility: hidden;
  isolation: isolate;
  transform: translateZ(0);
}

.ar-section .ar-slide-bg, .ar-section .ar-art {
  will-change: transform;
  transform: translateZ(0);
}

.profile-tab {
  transition: background .28s cubic-bezier(.4, 0, .2, 1), color .18s, box-shadow .22s !important;
}

.news-chip {
  transition: background .18s var(--ease-out, cubic-bezier(.25, .8, .25, 1)), color .18s ease, box-shadow .18s ease !important;
}

.is-scrolling .rank-tabs, .is-scrolling .news-switch-track, .is-scrolling .progress-switch-track, .is-scrolling .glass-card, .is-scrolling .profile-tabs, .is-scrolling .profile-header-card, .is-scrolling .profile-details-card, .is-scrolling .profile-posts-card, .is-scrolling .uvp-profile-card, .is-scrolling .uvp-tabs, .is-scrolling .uvp-post-card, .is-scrolling .cnt-card {
  transition: none !important;
}

@media (max-width: 768px) {
  .liquid-island-header {
    -webkit-backdrop-filter: none !important;
    background: var(--header-surface, #f8fbfffa) !important;
    border-radius: 28px !important;
    animation: none !important;
    box-shadow: 0 2px 12px #0318461f, 0 0 0 1px #c8dcff66 !important;
  }

  [data-theme="dark"] .liquid-island-header {
    background: #0d1117fc !important;
  }

  [data-theme="navy"] .liquid-island-header {
    background: #060d1ffc !important;
  }

  .liquid-island-header:before, .liquid-island-header:after {
    display: none !important;
  }

  .widget-card, .glass-widget-card, .subject-card {
    -webkit-backdrop-filter: none !important;
    will-change: transform !important;
    background: #fffffffa !important;
    transform: translateZ(0) !important;
    box-shadow: 0 4px 16px #0b1d4114 !important;
  }

  .ar-section .ar-glow {
    filter: blur(40px) !important;
    will-change: transform !important;
    opacity: .15 !important;
    transform: translate(-50%, -50%) translateZ(0) !important;
  }

  .rank-tabs, .news-switch-track, .progress-switch-track, .progress-circle-wrapper, .wide-tag {
    will-change: auto !important;
    transform: none !important;
  }

  .is-scrolling .aura-widget-glow, .is-scrolling .aura-health-dot, .is-scrolling .subject-slider-orb, .is-scrolling .ar-glow, .is-scrolling .ar-glass:before, .is-scrolling .ar-p {
    animation-play-state: paused !important;
  }

  .is-scrolling .motion-div {
    transition: none !important;
  }

  .subject-slider-track-wrap {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 10px;
    overflow: auto hidden !important;
  }

  .subject-slider-track-wrap::-webkit-scrollbar {
    display: none;
  }

  .subject-slider-track {
    width: max-content !important;
    padding: .5rem 1rem !important;
    animation: none !important;
    display: flex !important;
  }

  .subject-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex-shrink: 0;
    margin: 0 5px;
  }

  .chat-body, .news-content, .news-content-area, .rank-list, .modal-body, .flash-scroll, .community-feed, .mobile-notif-scroll {
    scroll-snap-type: y proximity;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .wide-slider-container {
    touch-action: pan-y pinch-zoom;
  }

  .subject-slider-orb-1, .subject-slider-orb-2, .subject-slider-orb-3 {
    display: none !important;
  }

  *, :before, :after {
    transition-duration: .12s !important;
    transition-delay: 0s !important;
  }

  .widget-card, .glass-widget-card {
    animation-duration: .38s !important;
  }

  .widget-card:hover, .glass-widget-card:hover, .rank-item:hover, .news-item:hover, .comm-card:hover, .subject-card:hover, .lg-surface:hover {
    box-shadow: inherit !important;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .wide-slider-container, .poster-card, .poster-slide {
    -webkit-backdrop-filter: none !important;
  }

  .wide-slider-container {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .poster-card, .poster-slide {
    scroll-snap-align: center;
  }

  .wide-slide, .subject-card, .scroll-stack-card, .ar-glow {
    will-change: transform !important;
    transform: translateZ(0) !important;
  }

  .rank-item, .news-item, .comm-card, .comm-liquid-glass, .lg-surface {
    will-change: auto !important;
  }
}

.subject-slider-section, .home-dashboard, .widget-card, .glass-widget-card, .rank-item, .news-item {
  content-visibility: visible !important;
}

.hd-stat-card, .hd-activity-item, .hd-rank-row, .hd-quick-link, .hd-badge, .hd-subject-pill, [class^="hd-"][class*="-card"], [class^="hd-"][class*="-item"], [class^="hd-"][class*="-btn"] {
  transition: transform .22s cubic-bezier(.34, 1.1, .64, 1), opacity .18s, box-shadow .22s !important;
}

.subject-slider-section {
  isolation: isolate !important;
  transform: translateZ(0) !important;
}

.subject-slider-track-wrap {
  isolation: isolate !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

.subject-slider-track {
  backface-visibility: hidden !important;
  will-change: transform !important;
  transform: translate3d(0, 0, 0) !important;
}

.subject-card {
  will-change: transform !important;
  backface-visibility: hidden !important;
  contain: layout style paint !important;
}

.subject-slider-orb, .subject-slider-orb-1, .subject-slider-orb-2, .subject-slider-orb-3 {
  will-change: opacity !important;
  transform: translateZ(0) !important;
}

@media (max-width: 768px) {
  .subject-card {
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
    background: #ffffffe0 !important;
  }

  [data-theme="dark"] .subject-card {
    background: #161b22eb !important;
  }

  [data-theme="navy"] .subject-card {
    background: #0a1434eb !important;
  }

  .subject-slider-orb, .subject-slider-orb-1, .subject-slider-orb-2, .subject-slider-orb-3 {
    will-change: auto !important;
    filter: blur(24px) !important;
  }
}

.is-scrolling .subject-card {
  -webkit-backdrop-filter: blur(6px) saturate(130%) !important;
  transition: none !important;
}

.is-scrolling .subject-slider-orb, .is-scrolling .subject-slider-orb-1, .is-scrolling .subject-slider-orb-2, .is-scrolling .subject-slider-orb-3 {
  animation-play-state: paused !important;
}

.home-dashboard .widget-card, .home-dashboard .glass-widget-card {
  contain: layout style paint !important;
}

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

  *, :before, :after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@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;
}

@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-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-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-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@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: 0;
}

@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-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-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-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@keyframes ping {
  75%, 100% {
    opacity: 0;
    transform: scale(2);
  }
}
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@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-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --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-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-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --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-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-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-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}

@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: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-red-950: oklch(25.8% .092 26.042);
    --color-orange-50: oklch(98% .016 73.684);
    --color-orange-200: oklch(90.1% .076 70.697);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-amber-900: oklch(41.4% .112 45.904);
    --color-amber-950: oklch(27.9% .077 45.635);
    --color-yellow-100: oklch(97.3% .071 103.193);
    --color-yellow-200: oklch(94.5% .129 101.54);
    --color-yellow-300: oklch(90.5% .182 98.111);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-yellow-600: oklch(68.1% .162 75.834);
    --color-yellow-700: oklch(55.4% .135 66.442);
    --color-yellow-900: oklch(42.1% .095 57.708);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-200: oklch(92.5% .084 155.995);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-teal-400: oklch(77.7% .152 181.912);
    --color-cyan-400: oklch(78.9% .154 211.53);
    --color-cyan-500: oklch(71.5% .143 215.221);
    --color-sky-100: oklch(95.1% .026 236.824);
    --color-sky-200: oklch(90.1% .058 230.902);
    --color-sky-400: oklch(74.6% .16 232.661);
    --color-sky-500: oklch(68.5% .169 237.323);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-200: oklch(88.2% .059 254.128);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-blue-800: oklch(42.4% .199 265.638);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-blue-950: oklch(28.2% .091 267.935);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-purple-400: oklch(71.4% .203 305.504);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-purple-700: oklch(49.6% .265 301.924);
    --color-fuchsia-400: oklch(74% .238 322.16);
    --color-fuchsia-500: oklch(66.7% .295 322.15);
    --color-pink-400: oklch(71.8% .202 349.761);
    --color-pink-500: oklch(65.6% .241 354.308);
    --color-rose-50: oklch(96.9% .015 12.422);
    --color-rose-100: oklch(94.1% .03 12.58);
    --color-rose-200: oklch(89.2% .058 10.001);
    --color-rose-300: oklch(81% .117 11.638);
    --color-rose-400: oklch(71.2% .194 13.428);
    --color-rose-500: oklch(64.5% .246 16.439);
    --color-rose-600: oklch(58.6% .253 17.585);
    --color-rose-700: oklch(51.4% .222 16.935);
    --color-rose-800: oklch(45.5% .188 13.697);
    --color-rose-900: oklch(41% .159 10.272);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-900: oklch(21% .034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .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;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-xs: 0 1px 2px 0 #0000000d;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    --drop-shadow-sm: 0 1px 2px #00000026;
    --drop-shadow-md: 0 3px 3px #0000001f;
    --drop-shadow-lg: 0 4px 4px #00000026;
    --drop-shadow-2xl: 0 25px 25px #00000026;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    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;
  }

  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;
    -webkit-text-decoration: 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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.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 {
    vertical-align: middle;
    display: block;
  }

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :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;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        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 {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }

  .-inset-2 {
    inset: calc(var(--spacing) * -2);
  }

  .-inset-3 {
    inset: calc(var(--spacing) * -3);
  }

  .-inset-4 {
    inset: calc(var(--spacing) * -4);
  }

  .-inset-6 {
    inset: calc(var(--spacing) * -6);
  }

  .-inset-\[2px\] {
    inset: -2px;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-3 {
    inset: calc(var(--spacing) * 3);
  }

  .inset-6 {
    inset: calc(var(--spacing) * 6);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-x-4 {
    inset-inline: calc(var(--spacing) * 4);
  }

  .inset-x-5 {
    inset-inline: calc(var(--spacing) * 5);
  }

  .-inset-y-2 {
    inset-block: calc(var(--spacing) * -2);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .inset-y-1 {
    inset-block: calc(var(--spacing) * 1);
  }

  .inset-y-16 {
    inset-block: calc(var(--spacing) * 16);
  }

  .inset-y-20 {
    inset-block: calc(var(--spacing) * 20);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .start\! {
    inset-inline-start: var(--spacing) !important;
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .-top-1 {
    top: calc(var(--spacing) * -1);
  }

  .-top-2 {
    top: calc(var(--spacing) * -2);
  }

  .-top-3 {
    top: calc(var(--spacing) * -3);
  }

  .-top-4 {
    top: calc(var(--spacing) * -4);
  }

  .-top-8 {
    top: calc(var(--spacing) * -8);
  }

  .-top-12 {
    top: calc(var(--spacing) * -12);
  }

  .-top-20 {
    top: calc(var(--spacing) * -20);
  }

  .-top-40 {
    top: calc(var(--spacing) * -40);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-1\/3 {
    top: 33.3333%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-3\.5 {
    top: calc(var(--spacing) * 3.5);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-6 {
    top: calc(var(--spacing) * 6);
  }

  .top-8 {
    top: calc(var(--spacing) * 8);
  }

  .top-10 {
    top: calc(var(--spacing) * 10);
  }

  .top-20 {
    top: calc(var(--spacing) * 20);
  }

  .top-36 {
    top: calc(var(--spacing) * 36);
  }

  .top-44 {
    top: calc(var(--spacing) * 44);
  }

  .top-\[1px\] {
    top: 1px;
  }

  .top-\[10\%\] {
    top: 10%;
  }

  .top-\[12\%\] {
    top: 12%;
  }

  .top-\[18\%\] {
    top: 18%;
  }

  .top-\[20\%\] {
    top: 20%;
  }

  .top-\[50\%\] {
    top: 50%;
  }

  .top-\[55\%\] {
    top: 55%;
  }

  .top-\[60\%\] {
    top: 60%;
  }

  .top-full {
    top: 100%;
  }

  .-right-1 {
    right: calc(var(--spacing) * -1);
  }

  .-right-3 {
    right: calc(var(--spacing) * -3);
  }

  .-right-4 {
    right: calc(var(--spacing) * -4);
  }

  .-right-8 {
    right: calc(var(--spacing) * -8);
  }

  .-right-12 {
    right: calc(var(--spacing) * -12);
  }

  .-right-20 {
    right: calc(var(--spacing) * -20);
  }

  .-right-32 {
    right: calc(var(--spacing) * -32);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-0\.5 {
    right: calc(var(--spacing) * .5);
  }

  .right-1 {
    right: calc(var(--spacing) * 1);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-5 {
    right: calc(var(--spacing) * 5);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .right-8 {
    right: calc(var(--spacing) * 8);
  }

  .right-\[5\%\] {
    right: 5%;
  }

  .right-\[6\%\] {
    right: 6%;
  }

  .right-\[8\%\] {
    right: 8%;
  }

  .right-\[10\%\] {
    right: 10%;
  }

  .right-\[14\%\] {
    right: 14%;
  }

  .right-\[18\%\] {
    right: 18%;
  }

  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }

  .-bottom-3 {
    bottom: calc(var(--spacing) * -3);
  }

  .-bottom-4 {
    bottom: calc(var(--spacing) * -4);
  }

  .-bottom-12 {
    bottom: calc(var(--spacing) * -12);
  }

  .-bottom-20 {
    bottom: calc(var(--spacing) * -20);
  }

  .-bottom-32 {
    bottom: calc(var(--spacing) * -32);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }

  .bottom-10 {
    bottom: calc(var(--spacing) * 10);
  }

  .bottom-12 {
    bottom: calc(var(--spacing) * 12);
  }

  .bottom-16 {
    bottom: calc(var(--spacing) * 16);
  }

  .bottom-20 {
    bottom: calc(var(--spacing) * 20);
  }

  .bottom-\[10\%\] {
    bottom: 10%;
  }

  .bottom-\[14\%\] {
    bottom: 14%;
  }

  .bottom-\[18\%\] {
    bottom: 18%;
  }

  .bottom-\[20\%\] {
    bottom: 20%;
  }

  .bottom-\[24\%\] {
    bottom: 24%;
  }

  .-left-1 {
    left: calc(var(--spacing) * -1);
  }

  .-left-1\/3 {
    left: -33.3333%;
  }

  .-left-3 {
    left: calc(var(--spacing) * -3);
  }

  .-left-4 {
    left: calc(var(--spacing) * -4);
  }

  .-left-12 {
    left: calc(var(--spacing) * -12);
  }

  .-left-20 {
    left: calc(var(--spacing) * -20);
  }

  .-left-40 {
    left: calc(var(--spacing) * -40);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1 {
    left: calc(var(--spacing) * 1);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-1\/4 {
    left: 25%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .left-5 {
    left: calc(var(--spacing) * 5);
  }

  .left-8 {
    left: calc(var(--spacing) * 8);
  }

  .left-\[5\%\] {
    left: 5%;
  }

  .left-\[8\%\] {
    left: 8%;
  }

  .left-\[9\%\] {
    left: 9%;
  }

  .left-\[12\%\] {
    left: 12%;
  }

  .left-\[14\%\] {
    left: 14%;
  }

  .left-\[18\%\] {
    left: 18%;
  }

  .left-\[50\%\] {
    left: 50%;
  }

  .-z-10 {
    z-index: calc(10 * -1);
  }

  .z-0 {
    z-index: 0;
  }

  .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-\[1\] {
    z-index: 1;
  }

  .z-\[100\] {
    z-index: 100;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-3 {
    grid-column: span 3 / span 3;
  }

  .col-span-4 {
    grid-column: span 4 / span 4;
  }

  .col-span-5 {
    grid-column: span 5 / span 5;
  }

  .col-span-6 {
    grid-column: span 6 / span 6;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

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

  .m-21 {
    margin: calc(var(--spacing) * 21);
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-3\.5 {
    margin-inline: calc(var(--spacing) * 3.5);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }

  .mx-8 {
    margin-inline: calc(var(--spacing) * 8);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-0\.5 {
    margin-block: calc(var(--spacing) * .5);
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }

  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }

  .-mt-4 {
    margin-top: calc(var(--spacing) * -4);
  }

  .mt-0\.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-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-24 {
    margin-top: calc(var(--spacing) * 24);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .mb-14 {
    margin-bottom: calc(var(--spacing) * 14);
  }

  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }

  .mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }

  .-ml-4 {
    margin-left: calc(var(--spacing) * -4);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-auto {
    margin-left: auto;
  }

  .box-border {
    box-sizing: border-box;
  }

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

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

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

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

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

  .table {
    display: table;
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }

  .aspect-\[4\/5\] {
    aspect-ratio: 4 / 5;
  }

  .aspect-\[16\/10\] {
    aspect-ratio: 16 / 10;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .size-\(--cell-size\) {
    width: var(--cell-size);
    height: var(--cell-size);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .h-\(--cell-size\) {
    height: var(--cell-size);
  }

  .h-0 {
    height: calc(var(--spacing) * 0);
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-36 {
    height: calc(var(--spacing) * 36);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-44 {
    height: calc(var(--spacing) * 44);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-56 {
    height: calc(var(--spacing) * 56);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-80 {
    height: calc(var(--spacing) * 80);
  }

  .h-\[1px\] {
    height: 1px;
  }

  .h-\[2px\] {
    height: 2px;
  }

  .h-\[60vmin\] {
    height: 60vmin;
  }

  .h-\[72px\] {
    height: 72px;
  }

  .h-\[80vmin\] {
    height: 80vmin;
  }

  .h-\[95px\] {
    height: 95px;
  }

  .h-\[110vmin\] {
    height: 110vmin;
  }

  .h-\[140vmin\] {
    height: 140vmin;
  }

  .h-\[300px\] {
    height: 300px;
  }

  .h-\[380px\] {
    height: 380px;
  }

  .h-\[400px\] {
    height: 400px;
  }

  .h-\[500px\] {
    height: 500px;
  }

  .h-\[520px\] {
    height: 520px;
  }

  .h-\[600px\] {
    height: 600px;
  }

  .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
    height: var(--radix-navigation-menu-viewport-height);
  }

  .h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height);
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-svh {
    height: 100svh;
  }

  .max-h-\(--radix-context-menu-content-available-height\) {
    max-height: var(--radix-context-menu-content-available-height);
  }

  .max-h-\(--radix-select-content-available-height\) {
    max-height: var(--radix-select-content-available-height);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[90\%\] {
    max-height: 90%;
  }

  .max-h-\[90vh\] {
    max-height: 90vh;
  }

  .max-h-\[300px\] {
    max-height: 300px;
  }

  .max-h-\[450px\] {
    max-height: 450px;
  }

  .max-h-\[600px\] {
    max-height: 600px;
  }

  .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
    max-height: var(--radix-dropdown-menu-content-available-height);
  }

  .max-h-screen {
    max-height: 100vh;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-36 {
    min-height: calc(var(--spacing) * 36);
  }

  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }

  .min-h-48 {
    min-height: calc(var(--spacing) * 48);
  }

  .min-h-\[1\.5rem\] {
    min-height: 1.5rem;
  }

  .min-h-\[1\.25rem\] {
    min-height: 1.25rem;
  }

  .min-h-\[60px\] {
    min-height: 60px;
  }

  .min-h-\[60vh\] {
    min-height: 60vh;
  }

  .min-h-\[70vh\] {
    min-height: 70vh;
  }

  .min-h-\[80px\] {
    min-height: 80px;
  }

  .min-h-\[80vh\] {
    min-height: 80vh;
  }

  .min-h-\[120px\] {
    min-height: 120px;
  }

  .min-h-\[200px\] {
    min-height: 200px;
  }

  .min-h-\[220px\] {
    min-height: 220px;
  }

  .min-h-\[280px\] {
    min-height: 280px;
  }

  .min-h-\[300px\] {
    min-height: 300px;
  }

  .min-h-\[400px\] {
    min-height: 400px;
  }

  .min-h-\[calc\(100vh-4rem\)\] {
    min-height: calc(100vh - 4rem);
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .min-h-svh {
    min-height: 100svh;
  }

  .w-\(--cell-size\) {
    width: var(--cell-size);
  }

  .w-\(--sidebar-width\) {
    width: var(--sidebar-width);
  }

  .w-0 {
    width: calc(var(--spacing) * 0);
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-1\/3 {
    width: 33.3333%;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-4\/6 {
    width: 66.6667%;
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-5\/6 {
    width: 83.3333%;
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-\[--sidebar-width\] {
    width: --sidebar-width;
  }

  .w-\[1px\] {
    width: 1px;
  }

  .w-\[60vmin\] {
    width: 60vmin;
  }

  .w-\[70px\] {
    width: 70px;
  }

  .w-\[72px\] {
    width: 72px;
  }

  .w-\[80vmin\] {
    width: 80vmin;
  }

  .w-\[100px\] {
    width: 100px;
  }

  .w-\[110vmin\] {
    width: 110vmin;
  }

  .w-\[140vmin\] {
    width: 140vmin;
  }

  .w-\[300px\] {
    width: 300px;
  }

  .w-\[400px\] {
    width: 400px;
  }

  .w-\[500px\] {
    width: 500px;
  }

  .w-\[520px\] {
    width: 520px;
  }

  .w-\[600px\] {
    width: 600px;
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .w-px {
    width: 1px;
  }

  .max-w-\(--skeleton-width\) {
    max-width: var(--skeleton-width);
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-\[--skeleton-width\] {
    max-width: --skeleton-width;
  }

  .max-w-\[32px\] {
    max-width: 32px;
  }

  .max-w-\[90\%\] {
    max-width: 90%;
  }

  .max-w-\[110px\] {
    max-width: 110px;
  }

  .max-w-\[140px\] {
    max-width: 140px;
  }

  .max-w-\[250px\] {
    max-width: 250px;
  }

  .max-w-\[260px\] {
    max-width: 260px;
  }

  .max-w-\[1280px\] {
    max-width: 1280px;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-max {
    max-width: max-content;
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-\(--cell-size\) {
    min-width: var(--cell-size);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }

  .min-w-10 {
    min-width: calc(var(--spacing) * 10);
  }

  .min-w-\[8rem\] {
    min-width: 8rem;
  }

  .min-w-\[12px\] {
    min-width: 12px;
  }

  .min-w-\[12rem\] {
    min-width: 12rem;
  }

  .min-w-\[80px\] {
    min-width: 80px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[200px\] {
    min-width: 200px;
  }

  .min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width);
  }

  .flex-1 {
    flex: 1;
  }

  .flex-\[2\] {
    flex: 2;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .grow-0 {
    flex-grow: 0;
  }

  .basis-full {
    flex-basis: 100%;
  }

  .caption-bottom {
    caption-side: bottom;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .origin-\(--radix-context-menu-content-transform-origin\) {
    transform-origin: var(--radix-context-menu-content-transform-origin);
  }

  .origin-\(--radix-dropdown-menu-content-transform-origin\) {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  }

  .origin-\(--radix-hover-card-content-transform-origin\) {
    transform-origin: var(--radix-hover-card-content-transform-origin);
  }

  .origin-\(--radix-menubar-content-transform-origin\) {
    transform-origin: var(--radix-menubar-content-transform-origin);
  }

  .origin-\(--radix-popover-content-transform-origin\) {
    transform-origin: var(--radix-popover-content-transform-origin);
  }

  .origin-\(--radix-select-content-transform-origin\) {
    transform-origin: var(--radix-select-content-transform-origin);
  }

  .origin-\(--radix-tooltip-content-transform-origin\) {
    transform-origin: var(--radix-tooltip-content-transform-origin);
  }

  .origin-bottom {
    transform-origin: bottom;
  }

  .origin-left {
    transform-origin: 0;
  }

  .origin-top {
    transform-origin: top;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-4 {
    --tw-translate-x: calc(var(--spacing) * -4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-px {
    --tw-translate-x: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-px {
    --tw-translate-x: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-6 {
    --tw-translate-y: calc(var(--spacing) * 6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-12 {
    rotate: 12deg;
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .rotate-\[-12deg\] {
    rotate: -12deg;
  }

  .skew-x-12 {
    --tw-skew-x: skewX(12deg);
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-\[fadeIn_0\.6s_ease-out\] {
    animation: .6s ease-out fadeIn;
  }

  .animate-\[float-slow_6s_ease-in-out_infinite\] {
    animation: 6s ease-in-out infinite float-slow;
  }

  .animate-\[float_6s_ease-in-out_infinite\] {
    animation: 6s ease-in-out infinite float;
  }

  .animate-\[ink-drop_0\.6s_cubic-bezier\(0\.4\,0\,0\.2\,1\)_both\] {
    animation: .6s cubic-bezier(.4, 0, .2, 1) both ink-drop;
  }

  .animate-\[marquee_40s_linear_infinite\] {
    animation: 40s linear infinite marquee;
  }

  .animate-\[scaleIn_0\.5s_ease-out\] {
    animation: .5s ease-out scaleIn;
  }

  .animate-\[seal-pulse_2\.8s_ease-in-out_infinite\] {
    animation: 2.8s ease-in-out infinite seal-pulse;
  }

  .animate-\[spin_20s_linear_infinite\] {
    animation: 20s linear infinite spin;
  }

  .animate-\[spin_24s_linear_infinite\] {
    animation: 24s linear infinite spin;
  }

  .animate-\[wave_4s_ease-in-out_infinite\] {
    animation: 4s ease-in-out infinite wave;
  }

  .animate-\[wiggle_0\.5s_ease\] {
    animation: .5s wiggle;
  }

  .animate-bounce {
    animation: var(--animate-bounce);
  }

  .animate-ping {
    animation: var(--animate-ping);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .list-none {
    list-style-type: none;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid-cols-\[auto_1fr_auto\] {
    grid-template-columns: auto 1fr auto;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

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

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

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-content-center {
    place-content: center;
  }

  .place-items-center {
    place-items: center;
  }

  .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;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .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);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :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)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :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)));
  }

  :where(.space-y-3 > :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)));
  }

  :where(.space-y-4 > :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)));
  }

  :where(.space-y-5 > :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)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-7 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-12 > :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)));
  }

  :where(.-space-x-2 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-1 > :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)));
  }

  :where(.space-x-3 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-4 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }

  .self-stretch {
    align-self: stretch;
  }

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

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

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

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

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

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

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
  }

  .rounded-\[2px\] {
    border-radius: 2px;
  }

  .rounded-\[2rem\] {
    border-radius: 2rem;
  }

  .rounded-\[40px\] {
    border-radius: 40px;
  }

  .rounded-\[inherit\] {
    border-radius: inherit;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-t {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
  }

  .rounded-t-\[2\.5rem\] {
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
  }

  .rounded-t-\[10px\] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .rounded-t-full {
    border-top-left-radius: 3.40282e38px;
    border-top-right-radius: 3.40282e38px;
  }

  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }

  .rounded-l-md {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .rounded-tl-sm {
    border-top-left-radius: var(--radius-sm);
  }

  .rounded-r-full {
    border-top-right-radius: 3.40282e38px;
    border-bottom-right-radius: 3.40282e38px;
  }

  .rounded-r-md {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .rounded-tr-sm {
    border-top-right-radius: var(--radius-sm);
  }

  .rounded-b-sm {
    border-bottom-right-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
  }

  .rounded-b-xl {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }

  .rounded-br-sm {
    border-bottom-right-radius: var(--radius-sm);
  }

  .rounded-bl-sm {
    border-bottom-left-radius: var(--radius-sm);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-3 {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }

  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-x-2 {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 2px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-y-2 {
    border-block-style: var(--tw-border-style);
    border-block-width: 2px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-r-2 {
    border-right-style: var(--tw-border-style);
    border-right-width: 2px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-double {
    --tw-border-style: double;
    border-style: double;
  }

  .border-\(--color-border\) {
    border-color: var(--color-border);
  }

  .border-\[\#1a1a2e\] {
    border-color: #1a1a2e;
  }

  .border-\[\#1a1a2e\]\/80 {
    border-color: oklab(22.8438% .00860053 -.0374545 / .8);
  }

  .border-\[\#007AFF\]\/50 {
    border-color: oklab(60.2765% -.047404 -.212489 / .5);
  }

  .border-\[\#8b7355\]\/20 {
    border-color: oklab(57.0702% .0156807 .050256 / .2);
  }

  .border-\[\#8b7355\]\/30 {
    border-color: oklab(57.0702% .0156807 .050256 / .3);
  }

  .border-\[\#8b7355\]\/50 {
    border-color: oklab(57.0702% .0156807 .050256 / .5);
  }

  .border-\[\#9ca3af\] {
    border-color: #9ca3af;
  }

  .border-\[\#20563f\]\/20 {
    border-color: oklab(40.9845% -.0664034 .0208398 / .2);
  }

  .border-\[\#92644a\] {
    border-color: #92644a;
  }

  .border-\[\#c2b280\] {
    border-color: #c2b280;
  }

  .border-\[\#c2b280\]\/20 {
    border-color: oklab(76.5006% -.00292972 .0690469 / .2);
  }

  .border-\[\#d4a017\] {
    border-color: #d4a017;
  }

  .border-\[\#d4a017\]\/20 {
    border-color: oklab(73.4969% .0146058 .145484 / .2);
  }

  .border-\[\#d4a017\]\/25 {
    border-color: oklab(73.4969% .0146058 .145484 / .25);
  }

  .border-\[\#d4a017\]\/30 {
    border-color: oklab(73.4969% .0146058 .145484 / .3);
  }

  .border-\[\#d4a017\]\/40 {
    border-color: oklab(73.4969% .0146058 .145484 / .4);
  }

  .border-\[\#d4a017\]\/50 {
    border-color: oklab(73.4969% .0146058 .145484 / .5);
  }

  .border-\[\#d4a017\]\/60 {
    border-color: oklab(73.4969% .0146058 .145484 / .6);
  }

  .border-\[\#ff6b35\]\/40 {
    border-color: oklab(70.4517% .149185 .121806 / .4);
  }

  .border-\[--color-border\] {
    border-color: --color-border;
  }

  .border-\[hsl\(8_70\%_45\%\)\] {
    border-color: #c33822;
  }

  .border-\[hsl\(8_70\%_45\%\/0\.8\)\] {
    border-color: #c33822cc;
  }

  .border-\[hsl\(14\,92\%\,58\%\)\] {
    border-color: #f65f31;
  }

  .border-\[hsl\(25_40\%_14\%\)\] {
    border-color: #322115;
  }

  .border-\[hsl\(25_40\%_14\%\/0\.2\)\] {
    border-color: #32211533;
  }

  .border-\[hsl\(25_40\%_14\%\/0\.3\)\] {
    border-color: #3221154d;
  }

  .border-\[hsl\(25_40\%_14\%\/0\.4\)\] {
    border-color: #32211566;
  }

  .border-\[hsl\(25_40\%_14\%\/0\.55\)\] {
    border-color: #3221158c;
  }

  .border-\[hsl\(36_65\%_48\%\)\] {
    border-color: #ca8a2b;
  }

  .border-\[hsl\(36_65\%_48\%\/0\.5\)\] {
    border-color: #ca8a2b80;
  }

  .border-\[hsl\(145_40\%_30\%\)\] {
    border-color: #2e6b47;
  }

  .border-\[hsl\(145_40\%_30\%\/0\.4\)\] {
    border-color: #2e6b4766;
  }

  .border-\[hsl\(145_40\%_30\%\/0\.8\)\] {
    border-color: #2e6b47cc;
  }

  .border-\[hsl\(230\,45\%\,8\%\)\] {
    border-color: #0b0e1e;
  }

  .border-\[hsl\(230\,45\%\,8\%\)\]\/30 {
    border-color: oklab(17.0165% .00249018 -.0336131 / .3);
  }

  .border-\[hsl\(230\,45\%\,8\%\)\]\/40 {
    border-color: oklab(17.0165% .00249018 -.0336131 / .4);
  }

  .border-\[var\(--comm-input-border\)\] {
    border-color: var(--comm-input-border);
  }

  .border-\[var\(--comm-pink\)\]\/30 {
    border-color: var(--comm-pink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--comm-pink\)\]\/30 {
      border-color: color-mix(in oklab, var(--comm-pink) 30%, transparent);
    }
  }

  .border-amber-200 {
    border-color: var(--color-amber-200);
  }

  .border-amber-400\/15 {
    border-color: #fcbb0026;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/15 {
      border-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
    }
  }

  .border-amber-400\/20 {
    border-color: #fcbb0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/20 {
      border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
    }
  }

  .border-amber-400\/30 {
    border-color: #fcbb004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/30 {
      border-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
    }
  }

  .border-amber-400\/40 {
    border-color: #fcbb0066;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/40 {
      border-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent);
    }
  }

  .border-black\/5 {
    border-color: #0000000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/5 {
      border-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }

  .border-blue-100\/60 {
    border-color: #dbeafe99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-100\/60 {
      border-color: color-mix(in oklab, var(--color-blue-100) 60%, transparent);
    }
  }

  .border-blue-200 {
    border-color: var(--color-blue-200);
  }

  .border-blue-200\/60 {
    border-color: #bedbff99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-200\/60 {
      border-color: color-mix(in oklab, var(--color-blue-200) 60%, transparent);
    }
  }

  .border-blue-400\/30 {
    border-color: #54a2ff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-400\/30 {
      border-color: color-mix(in oklab, var(--color-blue-400) 30%, transparent);
    }
  }

  .border-blue-500 {
    border-color: var(--color-blue-500);
  }

  .border-current {
    border-color: currentColor;
  }

  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }

  .border-emerald-400\/20 {
    border-color: #00d29433;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-400\/20 {
      border-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
    }
  }

  .border-emerald-400\/30 {
    border-color: #00d2944d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-400\/30 {
      border-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
    }
  }

  .border-emerald-400\/40 {
    border-color: #00d29466;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-400\/40 {
      border-color: color-mix(in oklab, var(--color-emerald-400) 40%, transparent);
    }
  }

  .border-emerald-500 {
    border-color: var(--color-emerald-500);
  }

  .border-emerald-500\/30 {
    border-color: #00bb7f4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-500\/30 {
      border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
    }
  }

  .border-gray-100 {
    border-color: var(--color-gray-100);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-200\/50 {
    border-color: #e5e7eb80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-200\/50 {
      border-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
    }
  }

  .border-gray-200\/60 {
    border-color: #e5e7eb99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-200\/60 {
      border-color: color-mix(in oklab, var(--color-gray-200) 60%, transparent);
    }
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-gray-400\/30 {
    border-color: #99a1af4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-400\/30 {
      border-color: color-mix(in oklab, var(--color-gray-400) 30%, transparent);
    }
  }

  .border-green-200 {
    border-color: var(--color-green-200);
  }

  .border-green-400\/30 {
    border-color: #05df724d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-400\/30 {
      border-color: color-mix(in oklab, var(--color-green-400) 30%, transparent);
    }
  }

  .border-green-500\/30 {
    border-color: #00c7584d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/30 {
      border-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
    }
  }

  .border-green-500\/40 {
    border-color: #00c75866;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/40 {
      border-color: color-mix(in oklab, var(--color-green-500) 40%, transparent);
    }
  }

  .border-green-500\/60 {
    border-color: #00c75899;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/60 {
      border-color: color-mix(in oklab, var(--color-green-500) 60%, transparent);
    }
  }

  .border-red-200 {
    border-color: var(--color-red-200);
  }

  .border-red-300 {
    border-color: var(--color-red-300);
  }

  .border-red-400 {
    border-color: var(--color-red-400);
  }

  .border-red-400\/15 {
    border-color: #ff656826;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/15 {
      border-color: color-mix(in oklab, var(--color-red-400) 15%, transparent);
    }
  }

  .border-red-400\/30 {
    border-color: #ff65684d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/30 {
      border-color: color-mix(in oklab, var(--color-red-400) 30%, transparent);
    }
  }

  .border-red-400\/40 {
    border-color: #ff656866;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/40 {
      border-color: color-mix(in oklab, var(--color-red-400) 40%, transparent);
    }
  }

  .border-red-400\/50 {
    border-color: #ff656880;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/50 {
      border-color: color-mix(in oklab, var(--color-red-400) 50%, transparent);
    }
  }

  .border-red-500 {
    border-color: var(--color-red-500);
  }

  .border-red-500\/30 {
    border-color: #fb2c364d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/30 {
      border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
    }
  }

  .border-red-500\/60 {
    border-color: #fb2c3699;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/60 {
      border-color: color-mix(in oklab, var(--color-red-500) 60%, transparent);
    }
  }

  .border-rose-400\/10 {
    border-color: #ff667f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-400\/10 {
      border-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);
    }
  }

  .border-rose-400\/15 {
    border-color: #ff667f26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-400\/15 {
      border-color: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
    }
  }

  .border-rose-400\/20 {
    border-color: #ff667f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-400\/20 {
      border-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
    }
  }

  .border-rose-400\/30 {
    border-color: #ff667f4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-400\/30 {
      border-color: color-mix(in oklab, var(--color-rose-400) 30%, transparent);
    }
  }

  .border-rose-500\/50 {
    border-color: #ff235780;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-500\/50 {
      border-color: color-mix(in oklab, var(--color-rose-500) 50%, transparent);
    }
  }

  .border-slate-600 {
    border-color: var(--color-slate-600);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-white\/10 {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .border-white\/20 {
    border-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .border-white\/30 {
    border-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/30 {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .border-white\/50 {
    border-color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/50 {
      border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .border-white\/60 {
    border-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/60 {
      border-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .border-white\/\[0\.02\] {
    border-color: #ffffff05;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.02\] {
      border-color: color-mix(in oklab, var(--color-white) 2%, transparent);
    }
  }

  .border-white\/\[0\.04\] {
    border-color: #ffffff0a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.04\] {
      border-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
  }

  .border-white\/\[0\.05\] {
    border-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.05\] {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .border-white\/\[0\.06\] {
    border-color: #ffffff0f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.06\] {
      border-color: color-mix(in oklab, var(--color-white) 6%, transparent);
    }
  }

  .border-white\/\[0\.08\] {
    border-color: #ffffff14;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.08\] {
      border-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }

  .border-yellow-200 {
    border-color: var(--color-yellow-200);
  }

  .border-yellow-400\/30 {
    border-color: #fac8004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-yellow-400\/30 {
      border-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent);
    }
  }

  .border-yellow-400\/50 {
    border-color: #fac80080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-yellow-400\/50 {
      border-color: color-mix(in oklab, var(--color-yellow-400) 50%, transparent);
    }
  }

  .border-t-\[\#d4a017\] {
    border-top-color: #d4a017;
  }

  .border-t-\[hsl\(14\,92\%\,58\%\)\] {
    border-top-color: #f65f31;
  }

  .border-t-\[var\(--comm-pink\)\] {
    border-top-color: var(--comm-pink);
  }

  .border-t-gray-400 {
    border-top-color: var(--color-gray-400);
  }

  .border-t-gray-600 {
    border-top-color: var(--color-gray-600);
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .border-l-blue-500 {
    border-left-color: var(--color-blue-500);
  }

  .border-l-cyan-500 {
    border-left-color: var(--color-cyan-500);
  }

  .border-l-orange-500 {
    border-left-color: var(--color-orange-500);
  }

  .border-l-pink-500 {
    border-left-color: var(--color-pink-500);
  }

  .border-l-red-600 {
    border-left-color: var(--color-red-600);
  }

  .border-l-slate-400 {
    border-left-color: var(--color-slate-400);
  }

  .border-l-transparent {
    border-left-color: #0000;
  }

  .border-l-violet-500 {
    border-left-color: var(--color-violet-500);
  }

  .border-l-yellow-500 {
    border-left-color: var(--color-yellow-500);
  }

  .bg-\(--color-bg\) {
    background-color: var(--color-bg);
  }

  .bg-\[\#0d0d1a\] {
    background-color: #0d0d1a;
  }

  .bg-\[\#1a1a2e\] {
    background-color: #1a1a2e;
  }

  .bg-\[\#1a140d\] {
    background-color: #1a140d;
  }

  .bg-\[\#1a140d\]\/70 {
    background-color: oklab(19.6286% .00539385 .0156126 / .7);
  }

  .bg-\[\#1a140d\]\/95 {
    background-color: oklab(19.6286% .00539385 .0156126 / .95);
  }

  .bg-\[\#2a2723\] {
    background-color: #2a2723;
  }

  .bg-\[\#2a2723\]\/80 {
    background-color: oklab(27.4533% .00216018 .00819643 / .8);
  }

  .bg-\[\#9ca3af\]\/20 {
    background-color: oklab(71.366% -.00289235 -.0189563 / .2);
  }

  .bg-\[\#20563f\] {
    background-color: #20563f;
  }

  .bg-\[\#20563f\]\/10 {
    background-color: oklab(40.9845% -.0664034 .0208398 / .1);
  }

  .bg-\[\#92644a\]\/15 {
    background-color: oklab(54.5464% .0454436 .054583 / .15);
  }

  .bg-\[\#191970\] {
    background-color: #191970;
  }

  .bg-\[\#c2b280\] {
    background-color: #c2b280;
  }

  .bg-\[\#c2b280\]\/15 {
    background-color: oklab(76.5006% -.00292972 .0690469 / .15);
  }

  .bg-\[\#d4a017\] {
    background-color: #d4a017;
  }

  .bg-\[\#d4a017\]\/5 {
    background-color: oklab(73.4969% .0146058 .145484 / .05);
  }

  .bg-\[\#d4a017\]\/10 {
    background-color: oklab(73.4969% .0146058 .145484 / .1);
  }

  .bg-\[\#d4a017\]\/12 {
    background-color: oklab(73.4969% .0146058 .145484 / .12);
  }

  .bg-\[\#d4a017\]\/15 {
    background-color: oklab(73.4969% .0146058 .145484 / .15);
  }

  .bg-\[\#d4a017\]\/25 {
    background-color: oklab(73.4969% .0146058 .145484 / .25);
  }

  .bg-\[\#e8d4a8\]\/70 {
    background-color: oklab(87.5538% .00387737 .061702 / .7);
  }

  .bg-\[\#e8d4a8\]\/80 {
    background-color: oklab(87.5538% .00387737 .061702 / .8);
  }

  .bg-\[\#e8dcc8\] {
    background-color: #e8dcc8;
  }

  .bg-\[\#f5e6c8\] {
    background-color: #f5e6c8;
  }

  .bg-\[\#f5f0e6\] {
    background-color: #f5f0e6;
  }

  .bg-\[\#faf0dc\] {
    background-color: #faf0dc;
  }

  .bg-\[\#faf0dc\]\/60 {
    background-color: oklab(95.7676% .00268364 .0283529 / .6);
  }

  .bg-\[\#faf0dc\]\/70 {
    background-color: oklab(95.7676% .00268364 .0283529 / .7);
  }

  .bg-\[\#faf0dc\]\/80 {
    background-color: oklab(95.7676% .00268364 .0283529 / .8);
  }

  .bg-\[\#faf0dc\]\/90 {
    background-color: oklab(95.7676% .00268364 .0283529 / .9);
  }

  .bg-\[\#ff6b35\]\/15 {
    background-color: oklab(70.4517% .149185 .121806 / .15);
  }

  .bg-\[--color-bg\] {
    background-color: --color-bg;
  }

  .bg-\[hsl\(0\,84\%\,60\%\)\] {
    background-color: #ef4343;
  }

  .bg-\[hsl\(0\,84\%\,60\%\)\]\/20 {
    background-color: oklab(63.5775% .18861 .0896094 / .2);
  }

  .bg-\[hsl\(8_70\%_45\%\/0\.1\)\] {
    background-color: #c338221a;
  }

  .bg-\[hsl\(14\,92\%\,58\%\)\] {
    background-color: #f65f31;
  }

  .bg-\[hsl\(14\,92\%\,58\%\)\]\/10 {
    background-color: oklab(67.5347% .15554 .11694 / .1);
  }

  .bg-\[hsl\(14\,92\%\,58\%\)\]\/20 {
    background-color: oklab(67.5347% .15554 .11694 / .2);
  }

  .bg-\[hsl\(25_40\%_14\%\/0\.1\)\] {
    background-color: #3221151a;
  }

  .bg-\[hsl\(25_40\%_14\%\/0\.3\)\] {
    background-color: #3221154d;
  }

  .bg-\[hsl\(25_40\%_14\%\/0\.4\)\] {
    background-color: #32211566;
  }

  .bg-\[hsl\(25_40\%_14\%\/0\.15\)\] {
    background-color: #32211526;
  }

  .bg-\[hsl\(34_32\%_78\%\)\] {
    background-color: #d9c9b5;
  }

  .bg-\[hsl\(36_42\%_88\%\)\] {
    background-color: #ede3d4;
  }

  .bg-\[hsl\(36_65\%_48\%\/0\.1\)\] {
    background-color: #ca8a2b1a;
  }

  .bg-\[hsl\(36_65\%_48\%\/0\.15\)\] {
    background-color: #ca8a2b26;
  }

  .bg-\[hsl\(38_42\%_90\%\)\] {
    background-color: #f0e8db;
  }

  .bg-\[hsl\(38_42\%_90\%\/0\.6\)\] {
    background-color: #f0e8db99;
  }

  .bg-\[hsl\(38_42\%_90\%\/0\.8\)\] {
    background-color: #f0e8dbcc;
  }

  .bg-\[hsl\(38_42\%_90\%\/0\.85\)\] {
    background-color: #f0e8dbd9;
  }

  .bg-\[hsl\(48\,100\%\,56\%\)\] {
    background-color: #ffd21f;
  }

  .bg-\[hsl\(48\,100\%\,56\%\)\]\/30 {
    background-color: oklab(87.747% -.00775948 .174314 / .3);
  }

  .bg-\[hsl\(60\,9\%\,98\%\)\] {
    background-color: #fafaf9;
  }

  .bg-\[hsl\(60\,9\%\,98\%\)\]\/70 {
    background-color: oklab(98.4825% -.000373036 .00126523 / .7);
  }

  .bg-\[hsl\(145_40\%_30\%\/0\.12\)\] {
    background-color: #2e6b471f;
  }

  .bg-\[hsl\(145_40\%_30\%\/0\.15\)\] {
    background-color: #2e6b4726;
  }

  .bg-\[hsl\(160\,84\%\,39\%\)\] {
    background-color: #10b77f;
  }

  .bg-\[hsl\(220\,14\%\,96\%\)\] {
    background-color: #f3f4f6;
  }

  .bg-\[hsl\(224\,84\%\,48\%\)\] {
    background-color: #144ae1;
  }

  .bg-\[hsl\(230\,45\%\,8\%\)\] {
    background-color: #0b0e1e;
  }

  .bg-\[hsl\(230\,45\%\,8\%\)\]\/20 {
    background-color: oklab(17.0165% .00249018 -.0336131 / .2);
  }

  .bg-\[hsl\(330\,60\%\,55\%\)\] {
    background-color: #d1478c;
  }

  .bg-\[var\(--comm-accent-primary\)\]\/20 {
    background-color: var(--comm-accent-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--comm-accent-primary\)\]\/20 {
      background-color: color-mix(in oklab, var(--comm-accent-primary) 20%, transparent);
    }
  }

  .bg-\[var\(--comm-danger\)\] {
    background-color: var(--comm-danger);
  }

  .bg-\[var\(--comm-pink\)\]\/20 {
    background-color: var(--comm-pink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--comm-pink\)\]\/20 {
      background-color: color-mix(in oklab, var(--comm-pink) 20%, transparent);
    }
  }

  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-amber-300\/30 {
    background-color: #ffd2364d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-300\/30 {
      background-color: color-mix(in oklab, var(--color-amber-300) 30%, transparent);
    }
  }

  .bg-amber-400\/5 {
    background-color: #fcbb000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-400\/5 {
      background-color: color-mix(in oklab, var(--color-amber-400) 5%, transparent);
    }
  }

  .bg-amber-400\/10 {
    background-color: #fcbb001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-400\/10 {
      background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
    }
  }

  .bg-amber-400\/30 {
    background-color: #fcbb004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-400\/30 {
      background-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
    }
  }

  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }

  .bg-amber-500\/20 {
    background-color: #f99c0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/20 {
      background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }

  .bg-amber-600 {
    background-color: var(--color-amber-600);
  }

  .bg-black\/20 {
    background-color: #0003;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/20 {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-black\/80 {
    background-color: #000c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/80 {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }

  .bg-black\/95 {
    background-color: #000000f2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/95 {
      background-color: color-mix(in oklab, var(--color-black) 95%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-50\/30 {
    background-color: #eff6ff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-50\/30 {
      background-color: color-mix(in oklab, var(--color-blue-50) 30%, transparent);
    }
  }

  .bg-blue-50\/40 {
    background-color: #eff6ff66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-50\/40 {
      background-color: color-mix(in oklab, var(--color-blue-50) 40%, transparent);
    }
  }

  .bg-blue-100\/60 {
    background-color: #dbeafe99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-100\/60 {
      background-color: color-mix(in oklab, var(--color-blue-100) 60%, transparent);
    }
  }

  .bg-blue-200\/40 {
    background-color: #bedbff66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-200\/40 {
      background-color: color-mix(in oklab, var(--color-blue-200) 40%, transparent);
    }
  }

  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }

  .bg-blue-500\/10 {
    background-color: #3080ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/10 {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }

  .bg-blue-950\/20 {
    background-color: #16245633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-950\/20 {
      background-color: color-mix(in oklab, var(--color-blue-950) 20%, transparent);
    }
  }

  .bg-current {
    background-color: currentColor;
  }

  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }

  .bg-emerald-50\/50 {
    background-color: #ecfdf580;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-50\/50 {
      background-color: color-mix(in oklab, var(--color-emerald-50) 50%, transparent);
    }
  }

  .bg-emerald-400 {
    background-color: var(--color-emerald-400);
  }

  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }

  .bg-emerald-500\/8 {
    background-color: #00bb7f14;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/8 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 8%, transparent);
    }
  }

  .bg-emerald-500\/10 {
    background-color: #00bb7f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/10 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }

  .bg-emerald-500\/20 {
    background-color: #00bb7f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/20 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-gray-100\/50 {
    background-color: #f3f4f680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-100\/50 {
      background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
    }
  }

  .bg-gray-100\/80 {
    background-color: #f3f4f6cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-100\/80 {
      background-color: color-mix(in oklab, var(--color-gray-100) 80%, transparent);
    }
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-gray-200\/30 {
    background-color: #e5e7eb4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-200\/30 {
      background-color: color-mix(in oklab, var(--color-gray-200) 30%, transparent);
    }
  }

  .bg-gray-200\/50 {
    background-color: #e5e7eb80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-200\/50 {
      background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
    }
  }

  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }

  .bg-gray-300\/20 {
    background-color: #d1d5dc33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-300\/20 {
      background-color: color-mix(in oklab, var(--color-gray-300) 20%, transparent);
    }
  }

  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }

  .bg-gray-500\/10 {
    background-color: #6a72821a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-500\/10 {
      background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
    }
  }

  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }

  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }

  .bg-green-100 {
    background-color: var(--color-green-100);
  }

  .bg-green-500 {
    background-color: var(--color-green-500);
  }

  .bg-green-500\/10 {
    background-color: #00c7581a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/10 {
      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }
  }

  .bg-green-600 {
    background-color: var(--color-green-600);
  }

  .bg-indigo-500\/20 {
    background-color: #625fff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-500\/20 {
      background-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
    }
  }

  .bg-pink-500 {
    background-color: var(--color-pink-500);
  }

  .bg-purple-500 {
    background-color: var(--color-purple-500);
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-50\/50 {
    background-color: #fef2f280;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-50\/50 {
      background-color: color-mix(in oklab, var(--color-red-50) 50%, transparent);
    }
  }

  .bg-red-100 {
    background-color: var(--color-red-100);
  }

  .bg-red-400 {
    background-color: var(--color-red-400);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-red-500\/8 {
    background-color: #fb2c3614;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/8 {
      background-color: color-mix(in oklab, var(--color-red-500) 8%, transparent);
    }
  }

  .bg-red-500\/10 {
    background-color: #fb2c361a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/10 {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }

  .bg-red-500\/15 {
    background-color: #fb2c3626;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/15 {
      background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
    }
  }

  .bg-red-500\/20 {
    background-color: #fb2c3633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/20 {
      background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }

  .bg-red-600 {
    background-color: var(--color-red-600);
  }

  .bg-rose-400\/10 {
    background-color: #ff667f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-400\/10 {
      background-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);
    }
  }

  .bg-rose-400\/20 {
    background-color: #ff667f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-400\/20 {
      background-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
    }
  }

  .bg-rose-500\/5 {
    background-color: #ff23570d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/5 {
      background-color: color-mix(in oklab, var(--color-rose-500) 5%, transparent);
    }
  }

  .bg-rose-500\/8 {
    background-color: #ff235714;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/8 {
      background-color: color-mix(in oklab, var(--color-rose-500) 8%, transparent);
    }
  }

  .bg-rose-500\/20 {
    background-color: #ff235733;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/20 {
      background-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
    }
  }

  .bg-rose-500\/30 {
    background-color: #ff23574d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/30 {
      background-color: color-mix(in oklab, var(--color-rose-500) 30%, transparent);
    }
  }

  .bg-sky-200\/50 {
    background-color: #b8e6fe80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sky-200\/50 {
      background-color: color-mix(in oklab, var(--color-sky-200) 50%, transparent);
    }
  }

  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }

  .bg-slate-100\/80 {
    background-color: #f1f5f9cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-100\/80 {
      background-color: color-mix(in oklab, var(--color-slate-100) 80%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/5 {
    background-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/5 {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-white\/20 {
    background-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .bg-white\/30 {
    background-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/30 {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .bg-white\/40 {
    background-color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/40 {
      background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  .bg-white\/50 {
    background-color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/50 {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .bg-white\/60 {
    background-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/60 {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .bg-white\/70 {
    background-color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/70 {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .bg-white\/75 {
    background-color: #ffffffbf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/75 {
      background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
  }

  .bg-white\/90 {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .bg-white\/\[0\.01\] {
    background-color: #ffffff03;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.01\] {
      background-color: color-mix(in oklab, var(--color-white) 1%, transparent);
    }
  }

  .bg-white\/\[0\.02\] {
    background-color: #ffffff05;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.02\] {
      background-color: color-mix(in oklab, var(--color-white) 2%, transparent);
    }
  }

  .bg-white\/\[0\.03\] {
    background-color: #ffffff08;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.03\] {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
  }

  .bg-white\/\[0\.04\] {
    background-color: #ffffff0a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.04\] {
      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
  }

  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }

  .bg-yellow-500 {
    background-color: var(--color-yellow-500);
  }

  .bg-yellow-500\/10 {
    background-color: #edb2001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-500\/10 {
      background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
    }
  }

  .bg-yellow-500\/20 {
    background-color: #edb20033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-500\/20 {
      background-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
    }
  }

  .bg-yellow-600 {
    background-color: var(--color-yellow-600);
  }

  .bg-yellow-900\/50 {
    background-color: #733e0a80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-900\/50 {
      background-color: color-mix(in oklab, var(--color-yellow-900) 50%, transparent);
    }
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-l {
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-\[linear-gradient\(180deg\,hsl\(var\(--lapis\)\)_0\%\,hsl\(var\(--panel\)\)_28\%\,hsl\(var\(--papyrus\)\)_100\%\)\] {
    background-image: linear-gradient(180deg,hsl(var(--lapis)) 0%,hsl(var(--panel)) 28%,hsl(var(--papyrus)) 100%);
  }

  .from-\[\#00d4ff\] {
    --tw-gradient-from: #00d4ff;
    --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-\[\#06b6d4\] {
    --tw-gradient-from: #06b6d4;
    --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-\[\#007AFF\]\/30 {
    --tw-gradient-from: oklab(60.2765% -.047404 -.212489 / .3);
    --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-\[\#007aff\] {
    --tw-gradient-from: #007aff;
    --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-\[\#84cc16\] {
    --tw-gradient-from: #84cc16;
    --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-\[\#64748b\] {
    --tw-gradient-from: #64748b;
    --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-\[\#191970\] {
    --tw-gradient-from: #191970;
    --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-\[\#191970\]\/20 {
    --tw-gradient-from: oklab(28.8119% .00692758 -.143459 / .2);
    --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-\[\#191970\]\/35 {
    --tw-gradient-from: oklab(28.8119% .00692758 -.143459 / .35);
    --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-\[\#d4a017\] {
    --tw-gradient-from: #d4a017;
    --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-\[\#d4a017\]\/20 {
    --tw-gradient-from: oklab(73.4969% .0146058 .145484 / .2);
    --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-\[\#f5e6c8\]\/90 {
    --tw-gradient-from: oklab(92.9194% .0040406 .0425282 / .9);
    --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-\[\#f59e0b\] {
    --tw-gradient-from: #f59e0b;
    --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-\[\#faf0dc\]\/90 {
    --tw-gradient-from: oklab(95.7676% .00268364 .0283529 / .9);
    --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-\[hsl\(8_70\%_45\%\)\] {
    --tw-gradient-from: #c33822;
    --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-\[hsl\(14\,92\%\,58\%\)\] {
    --tw-gradient-from: #f65f31;
    --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-\[hsl\(25_40\%_14\%\)\] {
    --tw-gradient-from: #322115;
    --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-\[hsl\(25_40\%_14\%\/0\.4\)\] {
    --tw-gradient-from: #32211566;
    --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-\[hsl\(36_65\%_48\%\)\] {
    --tw-gradient-from: #ca8a2b;
    --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-\[hsl\(40_70\%_62\%\)\] {
    --tw-gradient-from: #e2b55a;
    --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-\[hsl\(145_40\%_30\%\)\] {
    --tw-gradient-from: #2e6b47;
    --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-\[hsl\(192_55\%_22\%\)\] {
    --tw-gradient-from: #194b57;
    --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-\[oklch\(0\.7_0\.27_0\)\] {
    --tw-gradient-from: oklch(70% .27 0);
    --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-\[oklch\(0\.82_0\.16_210\)\] {
    --tw-gradient-from: oklch(82% .16 210);
    --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-\[oklch\(0\.85_0\.18_85\)\] {
    --tw-gradient-from: oklch(85% .18 85);
    --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-\[oklch\(0\.86_0\.22_130\)\] {
    --tw-gradient-from: oklch(86% .22 130);
    --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-\[var\(--comm-accent-primary\)\]\/40 {
    --tw-gradient-from: var(--comm-accent-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-\[var\(--comm-accent-primary\)\]\/40 {
      --tw-gradient-from: color-mix(in oklab, var(--comm-accent-primary) 40%, transparent);
    }
  }

  .from-\[var\(--comm-accent-primary\)\]\/40 {
    --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-\[var\(--comm-bg-primary\)\]\/80 {
    --tw-gradient-from: var(--comm-bg-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-\[var\(--comm-bg-primary\)\]\/80 {
      --tw-gradient-from: color-mix(in oklab, var(--comm-bg-primary) 80%, transparent);
    }
  }

  .from-\[var\(--comm-bg-primary\)\]\/80 {
    --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-\[var\(--cyan-glow\)\] {
    --tw-gradient-from: var(--cyan-glow);
    --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-\[var\(--electric\)\] {
    --tw-gradient-from: var(--electric);
    --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-\[var\(--gold\)\] {
    --tw-gradient-from: var(--gold);
    --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-\[var\(--muted\)\] {
    --tw-gradient-from: var(--muted);
    --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-amber-400 {
    --tw-gradient-from: var(--color-amber-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));
  }

  .from-amber-500 {
    --tw-gradient-from: var(--color-amber-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-amber-500\/15 {
    --tw-gradient-from: #f99c0026;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-amber-500\/15 {
      --tw-gradient-from: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
    }
  }

  .from-amber-500\/15 {
    --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-amber-500\/20 {
    --tw-gradient-from: #f99c0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-amber-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }

  .from-amber-500\/20 {
    --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-amber-600 {
    --tw-gradient-from: var(--color-amber-600);
    --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-blue-300 {
    --tw-gradient-from: var(--color-blue-300);
    --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-blue-400 {
    --tw-gradient-from: var(--color-blue-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));
  }

  .from-blue-500 {
    --tw-gradient-from: var(--color-blue-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-blue-500\/20 {
    --tw-gradient-from: #3080ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-blue-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .from-blue-500\/20 {
    --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-cyan-500 {
    --tw-gradient-from: var(--color-cyan-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-cyan-500\/20 {
    --tw-gradient-from: #00b7d733;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-cyan-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-cyan-500) 20%, transparent);
    }
  }

  .from-cyan-500\/20 {
    --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-emerald-500 {
    --tw-gradient-from: var(--color-emerald-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-emerald-500\/20 {
    --tw-gradient-from: #00bb7f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-emerald-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .from-emerald-500\/20 {
    --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-gray-50 {
    --tw-gradient-from: var(--color-gray-50);
    --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-gray-100 {
    --tw-gradient-from: var(--color-gray-100);
    --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-gray-200\/30 {
    --tw-gradient-from: #e5e7eb4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-gray-200\/30 {
      --tw-gradient-from: color-mix(in oklab, var(--color-gray-200) 30%, transparent);
    }
  }

  .from-gray-200\/30 {
    --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-indigo-400 {
    --tw-gradient-from: var(--color-indigo-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));
  }

  .from-indigo-600 {
    --tw-gradient-from: var(--color-indigo-600);
    --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-orange-500 {
    --tw-gradient-from: var(--color-orange-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-pink-500\/20 {
    --tw-gradient-from: #f6339a33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-pink-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-pink-500) 20%, transparent);
    }
  }

  .from-pink-500\/20 {
    --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-purple-500 {
    --tw-gradient-from: var(--color-purple-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-purple-500\/20 {
    --tw-gradient-from: #ac4bff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-purple-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
    }
  }

  .from-purple-500\/20 {
    --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-red-50\/90 {
    --tw-gradient-from: #fef2f2e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-red-50\/90 {
      --tw-gradient-from: color-mix(in oklab, var(--color-red-50) 90%, transparent);
    }
  }

  .from-red-50\/90 {
    --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-red-900\/90 {
    --tw-gradient-from: #82181ae6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-red-900\/90 {
      --tw-gradient-from: color-mix(in oklab, var(--color-red-900) 90%, transparent);
    }
  }

  .from-red-900\/90 {
    --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-rose-500 {
    --tw-gradient-from: var(--color-rose-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-rose-700 {
    --tw-gradient-from: var(--color-rose-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));
  }

  .from-rose-800 {
    --tw-gradient-from: var(--color-rose-800);
    --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-400 {
    --tw-gradient-from: var(--color-sky-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));
  }

  .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-slate-800 {
    --tw-gradient-from: var(--color-slate-800);
    --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-slate-900 {
    --tw-gradient-from: var(--color-slate-900);
    --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-slate-900\/50 {
    --tw-gradient-from: #0f172b80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-slate-900\/50 {
      --tw-gradient-from: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
    }
  }

  .from-slate-900\/50 {
    --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-white {
    --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));
  }

  .from-white\/20 {
    --tw-gradient-from: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-white\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .from-white\/20 {
    --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-yellow-900\/90 {
    --tw-gradient-from: #733e0ae6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-yellow-900\/90 {
      --tw-gradient-from: color-mix(in oklab, var(--color-yellow-900) 90%, transparent);
    }
  }

  .from-yellow-900\/90 {
    --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));
  }

  .via-\[\#2a2723\] {
    --tw-gradient-via: #2a2723;
    --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);
  }

  .via-\[\#007AFF\]\/20 {
    --tw-gradient-via: oklab(60.2765% -.047404 -.212489 / .2);
    --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);
  }

  .via-\[\#20563f\] {
    --tw-gradient-via: #20563f;
    --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);
  }

  .via-\[\#191970\]\/55 {
    --tw-gradient-via: oklab(28.8119% .00692758 -.143459 / .55);
    --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);
  }

  .via-\[\#d4a017\]\/10 {
    --tw-gradient-via: oklab(73.4969% .0146058 .145484 / .1);
    --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);
  }

  .via-\[\#d4a017\]\/70 {
    --tw-gradient-via: oklab(73.4969% .0146058 .145484 / .7);
    --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);
  }

  .via-\[hsl\(36_65\%_48\%\/0\.15\)\] {
    --tw-gradient-via: #ca8a2b26;
    --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);
  }

  .via-\[var\(--comm-accent-primary-light\)\]\/30 {
    --tw-gradient-via: var(--comm-accent-primary-light);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-\[var\(--comm-accent-primary-light\)\]\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--comm-accent-primary-light) 30%, transparent);
    }
  }

  .via-\[var\(--comm-accent-primary-light\)\]\/30 {
    --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);
  }

  .via-\[var\(--comm-bg-primary\)\]\/20 {
    --tw-gradient-via: var(--comm-bg-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-\[var\(--comm-bg-primary\)\]\/20 {
      --tw-gradient-via: color-mix(in oklab, var(--comm-bg-primary) 20%, transparent);
    }
  }

  .via-\[var\(--comm-bg-primary\)\]\/20 {
    --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);
  }

  .via-amber-400\/30 {
    --tw-gradient-via: #fcbb004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-amber-400\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
    }
  }

  .via-amber-400\/30 {
    --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);
  }

  .via-blue-50\/80 {
    --tw-gradient-via: #eff6ffcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-blue-50\/80 {
      --tw-gradient-via: color-mix(in oklab, var(--color-blue-50) 80%, transparent);
    }
  }

  .via-blue-50\/80 {
    --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);
  }

  .via-blue-400\/10 {
    --tw-gradient-via: #54a2ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-blue-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-blue-400) 10%, transparent);
    }
  }

  .via-blue-400\/10 {
    --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);
  }

  .via-orange-500 {
    --tw-gradient-via: var(--color-orange-500);
    --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);
  }

  .via-purple-400\/10 {
    --tw-gradient-via: #c07eff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-purple-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-purple-400) 10%, transparent);
    }
  }

  .via-purple-400\/10 {
    --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);
  }

  .via-red-400\/70 {
    --tw-gradient-via: #ff6568b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-red-400\/70 {
      --tw-gradient-via: color-mix(in oklab, var(--color-red-400) 70%, transparent);
    }
  }

  .via-red-400\/70 {
    --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);
  }

  .via-rose-400\/10 {
    --tw-gradient-via: #ff667f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-rose-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-rose-400) 10%, transparent);
    }
  }

  .via-rose-400\/10 {
    --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);
  }

  .via-rose-400\/25 {
    --tw-gradient-via: #ff667f40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-rose-400\/25 {
      --tw-gradient-via: color-mix(in oklab, var(--color-rose-400) 25%, transparent);
    }
  }

  .via-rose-400\/25 {
    --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);
  }

  .via-sky-400\/10 {
    --tw-gradient-via: #00bcfe1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-sky-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-sky-400) 10%, transparent);
    }
  }

  .via-sky-400\/10 {
    --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);
  }

  .via-slate-800 {
    --tw-gradient-via: var(--color-slate-800);
    --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);
  }

  .via-teal-400\/10 {
    --tw-gradient-via: #00d3bd1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-teal-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-teal-400) 10%, transparent);
    }
  }

  .via-teal-400\/10 {
    --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);
  }

  .via-transparent {
    --tw-gradient-via: transparent;
    --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);
  }

  .via-white {
    --tw-gradient-via: var(--color-white);
    --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);
  }

  .via-white\/10 {
    --tw-gradient-via: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-white\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .via-white\/10 {
    --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);
  }

  .via-white\/30 {
    --tw-gradient-via: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-white\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .via-white\/30 {
    --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);
  }

  .via-yellow-400\/10 {
    --tw-gradient-via: #fac8001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-yellow-400\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-yellow-400) 10%, transparent);
    }
  }

  .via-yellow-400\/10 {
    --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-\[\#0a84ff\] {
    --tw-gradient-to: #0a84ff;
    --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-\[\#06b6d4\] {
    --tw-gradient-to: #06b6d4;
    --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-\[\#84cc16\] {
    --tw-gradient-to: #84cc16;
    --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-\[\#94a3b8\] {
    --tw-gradient-to: #94a3b8;
    --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-\[\#0099cc\] {
    --tw-gradient-to: #09c;
    --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-\[\#c0c0c0\] {
    --tw-gradient-to: silver;
    --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-\[\#d4a017\] {
    --tw-gradient-to: #d4a017;
    --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-\[\#d4a017\]\/20 {
    --tw-gradient-to: oklab(73.4969% .0146058 .145484 / .2);
    --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-\[\#e8d4a8\]\/80 {
    --tw-gradient-to: oklab(87.5538% .00387737 .061702 / .8);
    --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-\[\#ec4899\] {
    --tw-gradient-to: #ec4899;
    --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-\[\#f4d03f\] {
    --tw-gradient-to: #f4d03f;
    --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-\[\#faf0dc\]\/90 {
    --tw-gradient-to: oklab(95.7676% .00268364 .0283529 / .9);
    --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-\[\#ff6b35\]\/5 {
    --tw-gradient-to: oklab(70.4517% .149185 .121806 / .05);
    --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-\[hsl\(8_70\%_45\%\)\] {
    --tw-gradient-to: #c33822;
    --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-\[hsl\(8_70\%_45\%\/0\.7\)\] {
    --tw-gradient-to: #c33822b3;
    --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-\[hsl\(25_40\%_14\%\/0\.2\)\] {
    --tw-gradient-to: #32211533;
    --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-\[hsl\(36_65\%_48\%\)\] {
    --tw-gradient-to: #ca8a2b;
    --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-\[hsl\(48\,100\%\,56\%\)\] {
    --tw-gradient-to: #ffd21f;
    --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-\[hsl\(145_40\%_30\%\/0\.7\)\] {
    --tw-gradient-to: #2e6b47b3;
    --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-\[hsl\(192_55\%_22\%\)\] {
    --tw-gradient-to: #194b57;
    --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-\[hsl\(200_60\%_14\%\)\] {
    --tw-gradient-to: #0e2b39;
    --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-\[oklch\(0\.7_0\.2_260\)\] {
    --tw-gradient-to: oklch(70% .2 260);
    --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-\[oklch\(0\.7_0\.27_0\)\] {
    --tw-gradient-to: oklch(70% .27 0);
    --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-\[oklch\(0\.82_0\.16_210\)\] {
    --tw-gradient-to: oklch(82% .16 210);
    --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-\[oklch\(0\.85_0\.18_85\)\] {
    --tw-gradient-to: oklch(85% .18 85);
    --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-\[oklch\(0\.86_0\.22_130\)\] {
    --tw-gradient-to: oklch(86% .22 130);
    --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-\[var\(--comm-accent-secondary\)\]\/40 {
    --tw-gradient-to: var(--comm-accent-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-\[var\(--comm-accent-secondary\)\]\/40 {
      --tw-gradient-to: color-mix(in oklab, var(--comm-accent-secondary) 40%, transparent);
    }
  }

  .to-\[var\(--comm-accent-secondary\)\]\/40 {
    --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-\[var\(--cyan-glow\)\] {
    --tw-gradient-to: var(--cyan-glow);
    --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-\[var\(--electric\)\] {
    --tw-gradient-to: var(--electric);
    --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-\[var\(--magenta\)\] {
    --tw-gradient-to: var(--magenta);
    --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-\[var\(--secondary\)\] {
    --tw-gradient-to: var(--secondary);
    --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-amber-700 {
    --tw-gradient-to: var(--color-amber-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-amber-700\/5 {
    --tw-gradient-to: #b750000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-amber-700\/5 {
      --tw-gradient-to: color-mix(in oklab, var(--color-amber-700) 5%, transparent);
    }
  }

  .to-amber-700\/5 {
    --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-amber-700\/10 {
    --tw-gradient-to: #b750001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-amber-700\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--color-amber-700) 10%, transparent);
    }
  }

  .to-amber-700\/10 {
    --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-amber-950\/90 {
    --tw-gradient-to: #461901e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-amber-950\/90 {
      --tw-gradient-to: color-mix(in oklab, var(--color-amber-950) 90%, transparent);
    }
  }

  .to-amber-950\/90 {
    --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-blue-400\/20 {
    --tw-gradient-to: #54a2ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-blue-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-blue-400) 20%, transparent);
    }
  }

  .to-blue-400\/20 {
    --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-blue-500 {
    --tw-gradient-to: var(--color-blue-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-blue-600 {
    --tw-gradient-to: var(--color-blue-600);
    --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-cyan-400\/20 {
    --tw-gradient-to: #00d2ef33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-cyan-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-cyan-400) 20%, transparent);
    }
  }

  .to-cyan-400\/20 {
    --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-emerald-700 {
    --tw-gradient-to: var(--color-emerald-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-fuchsia-400\/20 {
    --tw-gradient-to: #ec6cff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-fuchsia-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-fuchsia-400) 20%, transparent);
    }
  }

  .to-fuchsia-400\/20 {
    --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-gray-100 {
    --tw-gradient-to: var(--color-gray-100);
    --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-gray-200 {
    --tw-gradient-to: var(--color-gray-200);
    --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-green-400\/20 {
    --tw-gradient-to: #05df7233;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-green-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-green-400) 20%, transparent);
    }
  }

  .to-green-400\/20 {
    --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-indigo-500 {
    --tw-gradient-to: var(--color-indigo-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-indigo-600 {
    --tw-gradient-to: var(--color-indigo-600);
    --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-orange-50\/90 {
    --tw-gradient-to: #fff7ede6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-orange-50\/90 {
      --tw-gradient-to: color-mix(in oklab, var(--color-orange-50) 90%, transparent);
    }
  }

  .to-orange-50\/90 {
    --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-orange-400\/20 {
    --tw-gradient-to: #ff8b1a33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-orange-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-orange-400) 20%, transparent);
    }
  }

  .to-orange-400\/20 {
    --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-orange-700 {
    --tw-gradient-to: var(--color-orange-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-pink-400\/20 {
    --tw-gradient-to: #fb64b633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-pink-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-pink-400) 20%, transparent);
    }
  }

  .to-pink-400\/20 {
    --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-pink-500 {
    --tw-gradient-to: var(--color-pink-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-purple-700 {
    --tw-gradient-to: var(--color-purple-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-red-500 {
    --tw-gradient-to: var(--color-red-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-red-600 {
    --tw-gradient-to: var(--color-red-600);
    --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-red-950\/90 {
    --tw-gradient-to: #460809e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-red-950\/90 {
      --tw-gradient-to: color-mix(in oklab, var(--color-red-950) 90%, transparent);
    }
  }

  .to-red-950\/90 {
    --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-rose-400 {
    --tw-gradient-to: var(--color-rose-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-rose-600 {
    --tw-gradient-to: var(--color-rose-600);
    --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-rose-700 {
    --tw-gradient-to: var(--color-rose-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-sky-100\/60 {
    --tw-gradient-to: #dff2fe99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-sky-100\/60 {
      --tw-gradient-to: color-mix(in oklab, var(--color-sky-100) 60%, transparent);
    }
  }

  .to-sky-100\/60 {
    --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-sky-500 {
    --tw-gradient-to: 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));
  }

  .to-slate-900 {
    --tw-gradient-to: var(--color-slate-900);
    --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-yellow-700 {
    --tw-gradient-to: var(--color-yellow-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));
  }

  .bg-cover {
    background-size: cover;
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }

  .bg-center {
    background-position: center;
  }

  .fill-current {
    fill: currentColor;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

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

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

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

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

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

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-12 {
    padding: calc(var(--spacing) * 12);
  }

  .p-\[1px\] {
    padding: 1px;
  }

  .px-\(--cell-size\) {
    padding-inline: var(--cell-size);
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .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-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }

  .px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }

  .px-20 {
    padding-inline: calc(var(--spacing) * 20);
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .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-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .py-32 {
    padding-block: calc(var(--spacing) * 32);
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }

  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }

  .pt-\[20vh\] {
    padding-top: 20vh;
  }

  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }

  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-11 {
    padding-right: calc(var(--spacing) * 11);
  }

  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }

  .pr-14 {
    padding-right: calc(var(--spacing) * 14);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .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-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }

  .pb-\[50rem\] {
    padding-bottom: 50rem;
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }

  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }

  .pl-20 {
    padding-left: calc(var(--spacing) * 20);
  }

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

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

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

  .align-middle {
    vertical-align: middle;
  }

  .font-\[Cinzel\] {
    font-family: Cinzel;
  }

  .font-\[Cormorant_Garamond\] {
    font-family: Cormorant Garamond;
  }

  .font-\[JetBrains_Mono\] {
    font-family: JetBrains Mono;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .font-serif {
    font-family: var(--font-serif);
  }

  .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-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }

  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--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-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));
  }

  .text-\[0\.6rem\] {
    font-size: .6rem;
  }

  .text-\[0\.7rem\] {
    font-size: .7rem;
  }

  .text-\[0\.8rem\] {
    font-size: .8rem;
  }

  .text-\[0\.55rem\] {
    font-size: .55rem;
  }

  .text-\[0\.65rem\] {
    font-size: .65rem;
  }

  .text-\[0\.95rem\] {
    font-size: .95rem;
  }

  .text-\[3\.5rem\] {
    font-size: 3.5rem;
  }

  .text-\[6px\] {
    font-size: 6px;
  }

  .text-\[7px\] {
    font-size: 7px;
  }

  .text-\[7rem\] {
    font-size: 7rem;
  }

  .text-\[8px\] {
    font-size: 8px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[14rem\] {
    font-size: 14rem;
  }

  .text-\[clamp\(2\.5rem\,9vw\,7\.5rem\)\] {
    font-size: clamp(2.5rem, 9vw, 7.5rem);
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-\[0\.9\] {
    --tw-leading: .9;
    line-height: .9;
  }

  .leading-\[0\.88\] {
    --tw-leading: .88;
    line-height: .88;
  }

  .leading-\[0\.92\] {
    --tw-leading: .92;
    line-height: .92;
  }

  .leading-\[0\.95\] {
    --tw-leading: .95;
    line-height: .95;
  }

  .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-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extralight {
    --tw-font-weight: var(--font-weight-extralight);
    font-weight: var(--font-weight-extralight);
  }

  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[0\.2em\] {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }

  .tracking-\[0\.3em\] {
    --tw-tracking: .3em;
    letter-spacing: .3em;
  }

  .tracking-\[0\.04em\] {
    --tw-tracking: .04em;
    letter-spacing: .04em;
  }

  .tracking-\[0\.4em\] {
    --tw-tracking: .4em;
    letter-spacing: .4em;
  }

  .tracking-\[0\.06em\] {
    --tw-tracking: .06em;
    letter-spacing: .06em;
  }

  .tracking-\[0\.15em\] {
    --tw-tracking: .15em;
    letter-spacing: .15em;
  }

  .tracking-\[0\.16em\] {
    --tw-tracking: .16em;
    letter-spacing: .16em;
  }

  .tracking-\[0\.18em\] {
    --tw-tracking: .18em;
    letter-spacing: .18em;
  }

  .tracking-\[0\.25em\] {
    --tw-tracking: .25em;
    letter-spacing: .25em;
  }

  .tracking-\[0\.32em\] {
    --tw-tracking: .32em;
    letter-spacing: .32em;
  }

  .tracking-\[0\.45em\] {
    --tw-tracking: .45em;
    letter-spacing: .45em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

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

  .break-words {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-normal {
    white-space: normal;
  }

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

  .text-\[\#00d4ff\] {
    color: #00d4ff;
  }

  .text-\[\#1a1a2e\] {
    color: #1a1a2e;
  }

  .text-\[\#1a1a2e\]\/5 {
    color: oklab(22.8438% .00860053 -.0374545 / .05);
  }

  .text-\[\#1a140d\] {
    color: #1a140d;
  }

  .text-\[\#5a4a3a\] {
    color: #5a4a3a;
  }

  .text-\[\#5a4a3a\]\/60 {
    color: oklab(42.094% .0131712 .0306028 / .6);
  }

  .text-\[\#007aff\] {
    color: #007aff;
  }

  .text-\[\#FF2D55\] {
    color: #ff2d55;
  }

  .text-\[\#c2b280\] {
    color: #c2b280;
  }

  .text-\[\#d4a017\] {
    color: #d4a017;
  }

  .text-\[\#d4a017\]\/10 {
    color: oklab(73.4969% .0146058 .145484 / .1);
  }

  .text-\[\#d4a017\]\/20 {
    color: oklab(73.4969% .0146058 .145484 / .2);
  }

  .text-\[\#d4a017\]\/60 {
    color: oklab(73.4969% .0146058 .145484 / .6);
  }

  .text-\[\#d4a017\]\/80 {
    color: oklab(73.4969% .0146058 .145484 / .8);
  }

  .text-\[\#d4a017\]\/90 {
    color: oklab(73.4969% .0146058 .145484 / .9);
  }

  .text-\[\#f4d03f\] {
    color: #f4d03f;
  }

  .text-\[\#f5e6c8\] {
    color: #f5e6c8;
  }

  .text-\[\#f5f0e6\] {
    color: #f5f0e6;
  }

  .text-\[\#ff6b35\] {
    color: #ff6b35;
  }

  .text-\[hsl\(0\,84\%\,60\%\)\] {
    color: #ef4343;
  }

  .text-\[hsl\(8_70\%_45\%\)\] {
    color: #c33822;
  }

  .text-\[hsl\(14\,92\%\,58\%\)\] {
    color: #f65f31;
  }

  .text-\[hsl\(25_25\%_32\%\)\] {
    color: #664e3d;
  }

  .text-\[hsl\(25_40\%_14\%\)\] {
    color: #322115;
  }

  .text-\[hsl\(25_40\%_14\%\/0\.4\)\] {
    color: #32211566;
  }

  .text-\[hsl\(36_65\%_48\%\)\] {
    color: #ca8a2b;
  }

  .text-\[hsl\(38_42\%_90\%\)\] {
    color: #f0e8db;
  }

  .text-\[hsl\(48\,100\%\,56\%\)\] {
    color: #ffd21f;
  }

  .text-\[hsl\(60\,9\%\,98\%\)\] {
    color: #fafaf9;
  }

  .text-\[hsl\(145_40\%_30\%\)\] {
    color: #2e6b47;
  }

  .text-\[hsl\(160\,84\%\,39\%\)\] {
    color: #10b77f;
  }

  .text-\[hsl\(224\,84\%\,48\%\)\] {
    color: #144ae1;
  }

  .text-\[hsl\(230\,45\%\,8\%\)\] {
    color: #0b0e1e;
  }

  .text-\[hsl\(230\,45\%\,8\%\)\]\/10 {
    color: oklab(17.0165% .00249018 -.0336131 / .1);
  }

  .text-\[var\(--comm-accent-primary\)\] {
    color: var(--comm-accent-primary);
  }

  .text-\[var\(--comm-pink\)\] {
    color: var(--comm-pink);
  }

  .text-\[var\(--comm-tab-icon-active\)\] {
    color: var(--comm-tab-icon-active);
  }

  .text-\[var\(--comm-tab-inactive\)\] {
    color: var(--comm-tab-inactive);
  }

  .text-amber-100 {
    color: var(--color-amber-100);
  }

  .text-amber-100\/90 {
    color: #fef3c6e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-100\/90 {
      color: color-mix(in oklab, var(--color-amber-100) 90%, transparent);
    }
  }

  .text-amber-200 {
    color: var(--color-amber-200);
  }

  .text-amber-200\/60 {
    color: #fee68599;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-200\/60 {
      color: color-mix(in oklab, var(--color-amber-200) 60%, transparent);
    }
  }

  .text-amber-200\/70 {
    color: #fee685b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-200\/70 {
      color: color-mix(in oklab, var(--color-amber-200) 70%, transparent);
    }
  }

  .text-amber-300\/40 {
    color: #ffd23666;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-300\/40 {
      color: color-mix(in oklab, var(--color-amber-300) 40%, transparent);
    }
  }

  .text-amber-300\/50 {
    color: #ffd23680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-300\/50 {
      color: color-mix(in oklab, var(--color-amber-300) 50%, transparent);
    }
  }

  .text-amber-300\/70 {
    color: #ffd236b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-300\/70 {
      color: color-mix(in oklab, var(--color-amber-300) 70%, transparent);
    }
  }

  .text-amber-300\/80 {
    color: #ffd236cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-300\/80 {
      color: color-mix(in oklab, var(--color-amber-300) 80%, transparent);
    }
  }

  .text-amber-400 {
    color: var(--color-amber-400);
  }

  .text-amber-400\/40 {
    color: #fcbb0066;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/40 {
      color: color-mix(in oklab, var(--color-amber-400) 40%, transparent);
    }
  }

  .text-amber-400\/50 {
    color: #fcbb0080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/50 {
      color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
    }
  }

  .text-amber-400\/60 {
    color: #fcbb0099;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/60 {
      color: color-mix(in oklab, var(--color-amber-400) 60%, transparent);
    }
  }

  .text-amber-400\/70 {
    color: #fcbb00b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/70 {
      color: color-mix(in oklab, var(--color-amber-400) 70%, transparent);
    }
  }

  .text-amber-400\/80 {
    color: #fcbb00cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/80 {
      color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
    }
  }

  .text-amber-500 {
    color: var(--color-amber-500);
  }

  .text-amber-500\/30 {
    color: #f99c004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-500\/30 {
      color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
    }
  }

  .text-amber-600\/70 {
    color: #dd7400b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-600\/70 {
      color: color-mix(in oklab, var(--color-amber-600) 70%, transparent);
    }
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-blue-400 {
    color: var(--color-blue-400);
  }

  .text-blue-400\/60 {
    color: #54a2ff99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-blue-400\/60 {
      color: color-mix(in oklab, var(--color-blue-400) 60%, transparent);
    }
  }

  .text-blue-400\/80 {
    color: #54a2ffcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-blue-400\/80 {
      color: color-mix(in oklab, var(--color-blue-400) 80%, transparent);
    }
  }

  .text-blue-500 {
    color: var(--color-blue-500);
  }

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-blue-600\/20 {
    color: #155dfc33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-blue-600\/20 {
      color: color-mix(in oklab, var(--color-blue-600) 20%, transparent);
    }
  }

  .text-blue-700 {
    color: var(--color-blue-700);
  }

  .text-blue-950 {
    color: var(--color-blue-950);
  }

  .text-current {
    color: currentColor;
  }

  .text-cyan-500 {
    color: var(--color-cyan-500);
  }

  .text-emerald-200 {
    color: var(--color-emerald-200);
  }

  .text-emerald-300 {
    color: var(--color-emerald-300);
  }

  .text-emerald-400 {
    color: var(--color-emerald-400);
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-600\/25 {
    color: #00976740;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-600\/25 {
      color: color-mix(in oklab, var(--color-emerald-600) 25%, transparent);
    }
  }

  .text-emerald-600\/70 {
    color: #009767b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-600\/70 {
      color: color-mix(in oklab, var(--color-emerald-600) 70%, transparent);
    }
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-gray-200 {
    color: var(--color-gray-200);
  }

  .text-gray-300 {
    color: var(--color-gray-300);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

  .text-gray-400\/80 {
    color: #99a1afcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-gray-400\/80 {
      color: color-mix(in oklab, var(--color-gray-400) 80%, transparent);
    }
  }

  .text-gray-500 {
    color: var(--color-gray-500);
  }

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-gray-700 {
    color: var(--color-gray-700);
  }

  .text-gray-800 {
    color: var(--color-gray-800);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-green-400 {
    color: var(--color-green-400);
  }

  .text-green-400\/80 {
    color: #05df72cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-green-400\/80 {
      color: color-mix(in oklab, var(--color-green-400) 80%, transparent);
    }
  }

  .text-green-600 {
    color: var(--color-green-600);
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-indigo-400 {
    color: var(--color-indigo-400);
  }

  .text-orange-500 {
    color: var(--color-orange-500);
  }

  .text-pink-400 {
    color: var(--color-pink-400);
  }

  .text-pink-500 {
    color: var(--color-pink-500);
  }

  .text-red-200 {
    color: var(--color-red-200);
  }

  .text-red-300 {
    color: var(--color-red-300);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-red-400\/60 {
    color: #ff656899;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-400\/60 {
      color: color-mix(in oklab, var(--color-red-400) 60%, transparent);
    }
  }

  .text-red-400\/80 {
    color: #ff6568cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-400\/80 {
      color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
    }
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-600\/8 {
    color: #e4001414;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-600\/8 {
      color: color-mix(in oklab, var(--color-red-600) 8%, transparent);
    }
  }

  .text-red-600\/10 {
    color: #e400141a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-600\/10 {
      color: color-mix(in oklab, var(--color-red-600) 10%, transparent);
    }
  }

  .text-red-600\/20 {
    color: #e4001433;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-600\/20 {
      color: color-mix(in oklab, var(--color-red-600) 20%, transparent);
    }
  }

  .text-red-600\/70 {
    color: #e40014b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-600\/70 {
      color: color-mix(in oklab, var(--color-red-600) 70%, transparent);
    }
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-red-800 {
    color: var(--color-red-800);
  }

  .text-rose-50 {
    color: var(--color-rose-50);
  }

  .text-rose-100 {
    color: var(--color-rose-100);
  }

  .text-rose-100\/80 {
    color: #ffe4e6cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-100\/80 {
      color: color-mix(in oklab, var(--color-rose-100) 80%, transparent);
    }
  }

  .text-rose-200 {
    color: var(--color-rose-200);
  }

  .text-rose-200\/40 {
    color: #ffccd366;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-200\/40 {
      color: color-mix(in oklab, var(--color-rose-200) 40%, transparent);
    }
  }

  .text-rose-300 {
    color: var(--color-rose-300);
  }

  .text-rose-300\/25 {
    color: #ffa2ae40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-300\/25 {
      color: color-mix(in oklab, var(--color-rose-300) 25%, transparent);
    }
  }

  .text-rose-300\/30 {
    color: #ffa2ae4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-300\/30 {
      color: color-mix(in oklab, var(--color-rose-300) 30%, transparent);
    }
  }

  .text-rose-300\/35 {
    color: #ffa2ae59;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-300\/35 {
      color: color-mix(in oklab, var(--color-rose-300) 35%, transparent);
    }
  }

  .text-rose-300\/50 {
    color: #ffa2ae80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-300\/50 {
      color: color-mix(in oklab, var(--color-rose-300) 50%, transparent);
    }
  }

  .text-rose-300\/60 {
    color: #ffa2ae99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-300\/60 {
      color: color-mix(in oklab, var(--color-rose-300) 60%, transparent);
    }
  }

  .text-rose-400 {
    color: var(--color-rose-400);
  }

  .text-rose-400\/25 {
    color: #ff667f40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-400\/25 {
      color: color-mix(in oklab, var(--color-rose-400) 25%, transparent);
    }
  }

  .text-rose-400\/30 {
    color: #ff667f4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-400\/30 {
      color: color-mix(in oklab, var(--color-rose-400) 30%, transparent);
    }
  }

  .text-rose-400\/35 {
    color: #ff667f59;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-400\/35 {
      color: color-mix(in oklab, var(--color-rose-400) 35%, transparent);
    }
  }

  .text-rose-400\/40 {
    color: #ff667f66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-400\/40 {
      color: color-mix(in oklab, var(--color-rose-400) 40%, transparent);
    }
  }

  .text-slate-300 {
    color: var(--color-slate-300);
  }

  .text-slate-400 {
    color: var(--color-slate-400);
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .text-slate-600 {
    color: var(--color-slate-600);
  }

  .text-slate-900 {
    color: var(--color-slate-900);
  }

  .text-transparent {
    color: #0000;
  }

  .text-violet-500 {
    color: var(--color-violet-500);
  }

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

  .text-white\/12 {
    color: #ffffff1f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/12 {
      color: color-mix(in oklab, var(--color-white) 12%, transparent);
    }
  }

  .text-white\/15 {
    color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/15 {
      color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .text-white\/20 {
    color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/20 {
      color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .text-white\/40 {
    color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/40 {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  .text-white\/60 {
    color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-white\/90 {
    color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/90 {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .text-yellow-300 {
    color: var(--color-yellow-300);
  }

  .text-yellow-400 {
    color: var(--color-yellow-400);
  }

  .text-yellow-400\/80 {
    color: #fac800cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-yellow-400\/80 {
      color: color-mix(in oklab, var(--color-yellow-400) 80%, transparent);
    }
  }

  .text-yellow-500 {
    color: var(--color-yellow-500);
  }

  .text-yellow-700 {
    color: var(--color-yellow-700);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

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

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

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

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-10 {
    opacity: .1;
  }

  .opacity-15 {
    opacity: .15;
  }

  .opacity-20 {
    opacity: .2;
  }

  .opacity-25 {
    opacity: .25;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .opacity-\[0\.03\] {
    opacity: .03;
  }

  .opacity-\[0\.04\] {
    opacity: .04;
  }

  .opacity-\[0\.07\] {
    opacity: .07;
  }

  .opacity-\[0\.18\] {
    opacity: .18;
  }

  .opacity-\[0\.045\] {
    opacity: .045;
  }

  .mix-blend-difference {
    mix-blend-mode: difference;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    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, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_var\(--sidebar-border\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-border));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_12px_rgba\(159\,18\,57\,0\.3\)\] {
    --tw-shadow: 0 0 12px var(--tw-shadow-color, #9f12394d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_15px_rgba\(251\,191\,36\,0\.15\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #fbbf2426);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_20px_rgba\(52\,211\,153\,0\.15\)\] {
    --tw-shadow: 0 0 20px var(--tw-shadow-color, #34d39926);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_20px_rgba\(212\,160\,23\,0\.3\)\] {
    --tw-shadow: 0 0 20px var(--tw-shadow-color, #d4a0174d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_20px_rgba\(239\,68\,68\,0\.15\)\] {
    --tw-shadow: 0 0 20px var(--tw-shadow-color, #ef444426);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_30px_-4px_var\(--electric\)\] {
    --tw-shadow: 0 0 30px -4px var(--tw-shadow-color, var(--electric));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_30px_-6px_var\(--electric\)\] {
    --tw-shadow: 0 0 30px -6px var(--tw-shadow-color, var(--electric));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_30px_rgba\(0\,0\,0\,0\.1\)\] {
    --tw-shadow: 0 0 30px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_40px_rgba\(180\,130\,50\,0\.15\)\] {
    --tw-shadow: 0 0 40px var(--tw-shadow-color, #b4823226);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_40px_rgba\(212\,160\,23\,0\.3\)\] {
    --tw-shadow: 0 0 40px var(--tw-shadow-color, #d4a0174d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_40px_rgba\(255\,107\,53\,0\.3\)\] {
    --tw-shadow: 0 0 40px var(--tw-shadow-color, #ff6b354d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_60px_rgba\(212\,160\,23\,0\.24\)\] {
    --tw-shadow: 0 0 60px var(--tw-shadow-color, #d4a0173d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_0_hsl\(38_50\%_95\%\/0\.6\)\,0_2px_8px_hsl\(25_40\%_14\%\/0\.18\)\] {
    --tw-shadow: 0 1px 0 var(--tw-shadow-color, #f9f4ec99), 0 2px 8px var(--tw-shadow-color, #3221152e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_4px_0_hsl\(var\(--brass-deep\)\)\] {
    --tw-shadow: 0 4px 0 var(--tw-shadow-color, hsl(var(--brass-deep)));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_4px_0_hsl\(var\(--brass-deep\)\/0\.4\)\] {
    --tw-shadow: 0 4px 0 var(--tw-shadow-color, hsl(var(--brass-deep)/.4));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_4px_0_hsl\(var\(--teal-deep\)\)\] {
    --tw-shadow: 0 4px 0 var(--tw-shadow-color, hsl(var(--teal-deep)));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_32px_rgba\(59\,130\,246\,0\.08\)\] {
    --tw-shadow: 0 8px 32px var(--tw-shadow-color, #3b82f614);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_12px_40px_-8px_hsl\(25_40\%_14\%\/0\.35\)\,0_4px_12px_hsl\(25_40\%_14\%\/0\.18\)\] {
    --tw-shadow: 0 12px 40px -8px var(--tw-shadow-color, #32211559), 0 4px 12px var(--tw-shadow-color, #3221152e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_24px_54px_-28px_rgba\(26\,26\,46\,0\.3\)\] {
    --tw-shadow: 0 24px 54px -28px var(--tw-shadow-color, #1a1a2e4d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_24px_54px_-28px_rgba\(26\,26\,46\,0\.5\)\] {
    --tw-shadow: 0 24px 54px -28px var(--tw-shadow-color, #1a1a2e80);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_40px_100px_rgba\(59\,130\,246\,0\.2\)\] {
    --tw-shadow: 0 40px 100px var(--tw-shadow-color, #3b82f633);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[4px_4px_0_0_hsl\(230\,45\%\,8\%\)\] {
    --tw-shadow: 4px 4px 0 0 var(--tw-shadow-color, #0b0e1e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[6px_6px_0_0_hsl\(230\,45\%\,8\%\)\] {
    --tw-shadow: 6px 6px 0 0 var(--tw-shadow-color, #0b0e1e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[10px_10px_0_0_hsl\(230\,45\%\,8\%\)\] {
    --tw-shadow: 10px 10px 0 0 var(--tw-shadow-color, #0b0e1e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_-6px_12px_hsl\(8_70\%_22\%\/0\.6\)\,0_8px_24px_hsl\(8_65\%_30\%\/0\.4\)\] {
    --tw-shadow: inset 0 -6px 12px var(--tw-shadow-color, #5f1b1199), 0 8px 24px var(--tw-shadow-color, #7e281b66);
    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, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    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, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    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, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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);
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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);
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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);
  }

  .ring-2 {
    --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);
  }

  .ring-3 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
  }

  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + 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);
  }

  .shadow-blue-500\/20 {
    --tw-shadow-color: #3080ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-blue-500\/20 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-blue-500\/25 {
    --tw-shadow-color: #3080ff40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-blue-500\/25 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-orange-200 {
    --tw-shadow-color: oklch(90.1% .076 70.697);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-orange-200 {
      --tw-shadow-color: color-mix(in oklab, var(--color-orange-200) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-rose-900\/25 {
    --tw-shadow-color: #8b083640;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-rose-900\/25 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-rose-900) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-\[hsl\(160\,84\%\,39\%\)\] {
    --tw-ring-color: #10b77f;
  }

  .ring-offset-1 {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .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, );
  }

  .blur-2xl {
    --tw-blur: blur(var(--blur-2xl));
    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, );
  }

  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    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, );
  }

  .blur-\[80px\] {
    --tw-blur: blur(80px);
    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, );
  }

  .blur-\[100px\] {
    --tw-blur: blur(100px);
    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, );
  }

  .blur-md {
    --tw-blur: blur(var(--blur-md));
    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-2xl {
    --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, #00000026));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));
    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-\[0_0_12px_rgba\(180\,130\,50\,0\.4\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 12px var(--tw-drop-shadow-color, #b4823266));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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-\[0_2px_4px_rgba\(0\,0\,0\,0\.2\)\] {
    --tw-drop-shadow-size: drop-shadow(0 2px 4px var(--tw-drop-shadow-color, #0003));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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-\[0_4px_8px_hsl\(42_80\%_55\%\/0\.5\)\] {
    --tw-drop-shadow-size: drop-shadow(0 4px 8px var(--tw-drop-shadow-color, #e8b13080));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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-\[0_4px_8px_rgba\(0\,0\,0\,0\.25\)\] {
    --tw-drop-shadow-size: drop-shadow(0 4px 8px var(--tw-drop-shadow-color, #00000040));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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-lg {
    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, #00000026));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
    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-md {
    --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, #0000001f));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
    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, #00000026));
    --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, );
  }

  .saturate-\[200\%\] {
    --tw-saturate: saturate(200%);
    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, );
  }

  .sepia {
    --tw-sepia: sepia(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, ) !important;
  }

  .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-2xl {
    --tw-backdrop-blur: blur(var(--blur-2xl));
    -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-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -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-sm {
    --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, );
  }

  .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, );
  }

  .backdrop-filter {
    -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, 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-\[left\,right\,width\] {
    transition-property: left, right, width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[margin\,opa\] {
    transition-property: margin, opa;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[margin\,opacity\] {
    transition-property: margin, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\,height\,padding\] {
    transition-property: width, height, padding;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    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));
  }

  .transition-transform {
    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));
  }

  .delay-100 {
    transition-delay: .1s;
  }

  .delay-200 {
    transition-delay: .2s;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-400 {
    --tw-duration: .4s;
    transition-duration: .4s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .duration-1000 {
    --tw-duration: 1s;
    transition-duration: 1s;
  }

  .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-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .will-change-transform {
    will-change: transform;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .\[--cell-size\:2rem\] {
    --cell-size: 2rem;
  }

  .\[animation-delay\:0\.15s\] {
    animation-delay: .15s;
  }

  .\[animation-delay\:0\.25s\] {
    animation-delay: .25s;
  }

  .\[animation-delay\:0\.35s\] {
    animation-delay: .35s;
  }

  .\[animation-delay\:1s\] {
    animation-delay: 1s;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
    opacity: 1;
  }

  @media (hover: hover) {
    .group-hover\:h-1:is(:where(.group):hover *) {
      height: calc(var(--spacing) * 1);
    }

    .group-hover\:translate-x-0:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-x-1:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-x-full:is(:where(.group):hover *) {
      --tw-translate-x: 100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:-translate-y-1:is(:where(.group):hover *) {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-y-0:is(:where(.group):hover *) {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\: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\:-rotate-6:is(:where(.group):hover *) {
      rotate: -6deg;
    }

    .group-hover\:rotate-6:is(:where(.group):hover *) {
      rotate: 6deg;
    }

    .group-hover\:rotate-12:is(:where(.group):hover *) {
      rotate: 12deg;
    }

    .group-hover\:gap-4:is(:where(.group):hover *) {
      gap: calc(var(--spacing) * 4);
    }

    .group-hover\:border-\[\#1a1a2e\]:is(:where(.group):hover *) {
      border-color: #1a1a2e;
    }

    .group-hover\:bg-\[\#1a1a2e\]:is(:where(.group):hover *) {
      background-color: #1a1a2e;
    }

    .group-hover\:bg-amber-400\/20:is(:where(.group):hover *) {
      background-color: #fcbb0033;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-amber-400\/20:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
      }
    }

    .group-hover\:text-\[hsl\(14\,92\%\,58\%\)\]:is(:where(.group):hover *) {
      color: #f65f31;
    }

    .group-hover\:text-amber-300:is(:where(.group):hover *) {
      color: var(--color-amber-300);
    }

    .group-hover\:text-white:is(:where(.group):hover *) {
      color: var(--color-white);
    }

    .group-hover\:opacity-30:is(:where(.group):hover *) {
      opacity: .3;
    }

    .group-hover\:opacity-40:is(:where(.group):hover *) {
      opacity: .4;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }

    .group-hover\:shadow-\[10px_10px_0_0_hsl\(230\,45\%\,8\%\)\]:is(:where(.group):hover *) {
      --tw-shadow: 10px 10px 0 0 var(--tw-shadow-color, #0b0e1e);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .group-hover\:shadow-lg:is(:where(.group):hover *) {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .group-hover\:shadow-blue-500\/30:is(:where(.group):hover *) {
      --tw-shadow-color: #3080ff4d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:shadow-blue-500\/30:is(:where(.group):hover *) {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 30%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .group-hover\/header\:text-\[var\(--comm-accent-primary\)\]:is(:where(.group\/header):hover *) {
      color: var(--comm-accent-primary);
    }

    .group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *) {
      opacity: 1;
    }
  }

  .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar="menu-action"]) *) {
    padding-right: calc(var(--spacing) * 8);
  }

  .group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible="icon"] *) {
    margin-top: calc(var(--spacing) * -8);
  }

  .group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible="icon"] *) {
    display: none;
  }

  .group-data-\[collapsible\=icon\]\:\!size-8:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--spacing) * 8) !important;
    height: calc(var(--spacing) * 8) !important;
  }

  .group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.group)[data-collapsible="icon"] *) {
    width: var(--sidebar-width-icon);
  }

  .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\]:is(:where(.group)[data-collapsible="icon"] *) {
    width: --sidebar-width-icon;
  }

  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--sidebar-width-icon) + 1rem);
  }

  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--sidebar-width-icon) + 1rem + 2px);
  }

  .group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible="icon"] *) {
    overflow: hidden;
  }

  .group-data-\[collapsible\=icon\]\:\!p-0:is(:where(.group)[data-collapsible="icon"] *) {
    padding: calc(var(--spacing) * 0) !important;
  }

  .group-data-\[collapsible\=icon\]\:\!p-2:is(:where(.group)[data-collapsible="icon"] *) {
    padding: calc(var(--spacing) * 2) !important;
  }

  .group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible="icon"] *) {
    opacity: 0;
  }

  .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
    right: calc(var(--sidebar-width) * -1);
  }

  .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
    left: calc(var(--sidebar-width) * -1);
  }

  .group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.group)[data-collapsible="offcanvas"] *) {
    width: calc(var(--spacing) * 0);
  }

  .group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible="offcanvas"] *) {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused="true"] *) {
    position: relative;
  }

  .group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused="true"] *) {
    z-index: 10;
  }

  .group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused="true"] *) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
  }

  .group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side="left"] *) {
    right: calc(var(--spacing) * -4);
  }

  .group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side="left"] *) {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side="right"] *) {
    left: calc(var(--spacing) * 0);
  }

  .group-data-\[side\=right\]\:rotate-180:is(:where(.group)[data-side="right"] *) {
    rotate: 180deg;
  }

  .group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side="right"] *) {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state="open"] *) {
    rotate: 180deg;
  }

  .group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant="floating"] *) {
    border-radius: var(--radius-lg);
  }

  .group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant="floating"] *) {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .group-data-\[variant\=floating\]\:shadow:is(:where(.group)[data-variant="floating"] *) {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .group-\[\.destructive\]\:text-red-300:is(:where(.group).destructive *) {
    color: var(--color-red-300);
  }

  .group-\[\.toaster\]\:shadow-lg:is(:where(.group).toaster *) {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-70:is(:where(.peer):disabled ~ *) {
    opacity: .7;
  }

  .peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.peer\/menu-button)[data-size="default"] ~ *) {
    top: calc(var(--spacing) * 1.5);
  }

  .peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) {
    top: calc(var(--spacing) * 2.5);
  }

  .peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) {
    top: calc(var(--spacing) * 1);
  }

  .peer-data-\[variant\=inset\]\:min-h-\[calc\(100svh-theme\(spacing\.4\)\)\]:is(:where(.peer)[data-variant="inset"] ~ *) {
    min-height: calc(100svh - 1rem);
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:-inset-2:after {
    content: var(--tw-content);
    inset: calc(var(--spacing) * -2);
  }

  .after\:inset-y-0:after {
    content: var(--tw-content);
    inset-block: calc(var(--spacing) * 0);
  }

  .after\:left-1\/2:after {
    content: var(--tw-content);
    left: 50%;
  }

  .after\:ml-1:after {
    content: var(--tw-content);
    margin-left: calc(var(--spacing) * 1);
  }

  .after\:w-1:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 1);
  }

  .after\:w-\[2px\]:after {
    content: var(--tw-content);
    width: 2px;
  }

  .after\:-translate-x-1\/2:after {
    content: var(--tw-content);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .after\:text-red-400:after {
    content: var(--tw-content);
    color: var(--color-red-400);
  }

  .after\:content-\[\'\*\'\]:after {
    --tw-content: "*";
    content: var(--tw-content);
  }

  .group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible="offcanvas"] *):after {
    content: var(--tw-content);
    left: 100%;
  }

  .first\:rounded-l-md:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .first\:border-l:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .last\:mb-0:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .last\:rounded-r-md:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .focus-within\:relative:focus-within {
    position: relative;
  }

  .focus-within\:z-20:focus-within {
    z-index: 20;
  }

  @media (hover: hover) {
    .hover\:-translate-x-0\.5:hover {
      --tw-translate-x: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-x-1:hover {
      --tw-translate-x: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-1:hover {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-2:hover {
      --tw-translate-y: calc(var(--spacing) * -2);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:translate-y-\[2px\]:hover {
      --tw-translate-y: 2px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-\[1\.02\]:hover {
      scale: 1.02;
    }

    .hover\:gap-5:hover {
      gap: calc(var(--spacing) * 5);
    }

    .hover\:border-\[\#1a1a2e\]:hover {
      border-color: #1a1a2e;
    }

    .hover\:border-\[\#d4a017\]\/60:hover {
      border-color: oklab(73.4969% .0146058 .145484 / .6);
    }

    .hover\:border-\[hsl\(36_65\%_48\%\)\]:hover {
      border-color: #ca8a2b;
    }

    .hover\:border-amber-400\/20:hover {
      border-color: #fcbb0033;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-amber-400\/20:hover {
        border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
      }
    }

    .hover\:border-blue-200\/80:hover {
      border-color: #bedbffcc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-blue-200\/80:hover {
        border-color: color-mix(in oklab, var(--color-blue-200) 80%, transparent);
      }
    }

    .hover\:border-blue-300\/40:hover {
      border-color: #90c5ff66;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-blue-300\/40:hover {
        border-color: color-mix(in oklab, var(--color-blue-300) 40%, transparent);
      }
    }

    .hover\:border-emerald-500:hover {
      border-color: var(--color-emerald-500);
    }

    .hover\:border-indigo-500:hover {
      border-color: var(--color-indigo-500);
    }

    .hover\:border-rose-400\/20:hover {
      border-color: #ff667f33;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-rose-400\/20:hover {
        border-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
      }
    }

    .hover\:bg-\[\#1a1a2e\]:hover {
      background-color: #1a1a2e;
    }

    .hover\:bg-\[\#007AFF\]\/10:hover {
      background-color: oklab(60.2765% -.047404 -.212489 / .1);
    }

    .hover\:bg-\[\#FF2D55\]\/10:hover {
      background-color: oklab(64.9653% .226804 .0732477 / .1);
    }

    .hover\:bg-\[\#d4a017\]:hover {
      background-color: #d4a017;
    }

    .hover\:bg-\[\#d4a017\]\/10:hover {
      background-color: oklab(73.4969% .0146058 .145484 / .1);
    }

    .hover\:bg-\[\#e8d4a8\]:hover {
      background-color: #e8d4a8;
    }

    .hover\:bg-\[\#f4d03f\]:hover {
      background-color: #f4d03f;
    }

    .hover\:bg-\[\#f5e6c8\]:hover {
      background-color: #f5e6c8;
    }

    .hover\:bg-\[hsl\(25_40\%_14\%\/0\.1\)\]:hover {
      background-color: #3221151a;
    }

    .hover\:bg-\[hsl\(48\,100\%\,56\%\)\]:hover {
      background-color: #ffd21f;
    }

    .hover\:bg-\[hsl\(230\,45\%\,8\%\)\]\/10:hover {
      background-color: oklab(17.0165% .00249018 -.0336131 / .1);
    }

    .hover\:bg-\[var\(--comm-accent-primary\)\]\/10:hover {
      background-color: var(--comm-accent-primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--comm-accent-primary\)\]\/10:hover {
        background-color: color-mix(in oklab, var(--comm-accent-primary) 10%, transparent);
      }
    }

    .hover\:bg-\[var\(--comm-btn-ghost-bg-hover\)\]:hover {
      background-color: var(--comm-btn-ghost-bg-hover);
    }

    .hover\:bg-\[var\(--comm-danger\)\]\/10:hover {
      background-color: var(--comm-danger);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--comm-danger\)\]\/10:hover {
        background-color: color-mix(in oklab, var(--comm-danger) 10%, transparent);
      }
    }

    .hover\:bg-\[var\(--comm-warning\)\]\/10:hover {
      background-color: var(--comm-warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--comm-warning\)\]\/10:hover {
        background-color: color-mix(in oklab, var(--comm-warning) 10%, transparent);
      }
    }

    .hover\:bg-amber-400\/10:hover {
      background-color: #fcbb001a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-400\/10:hover {
        background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
      }
    }

    .hover\:bg-amber-500\/30:hover {
      background-color: #f99c004d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-500\/30:hover {
        background-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
      }
    }

    .hover\:bg-gray-200:hover {
      background-color: var(--color-gray-200);
    }

    .hover\:bg-gray-200\/80:hover {
      background-color: #e5e7ebcc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-gray-200\/80:hover {
        background-color: color-mix(in oklab, var(--color-gray-200) 80%, transparent);
      }
    }

    .hover\:bg-gray-500:hover {
      background-color: var(--color-gray-500);
    }

    .hover\:bg-red-500:hover {
      background-color: var(--color-red-500);
    }

    .hover\:bg-red-500\/10:hover {
      background-color: #fb2c361a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-red-500\/10:hover {
        background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
      }
    }

    .hover\:bg-red-600:hover {
      background-color: var(--color-red-600);
    }

    .hover\:bg-rose-400\/10:hover {
      background-color: #ff667f1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-rose-400\/10:hover {
        background-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);
      }
    }

    .hover\:bg-slate-200\/80:hover {
      background-color: #e2e8f0cc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-slate-200\/80:hover {
        background-color: color-mix(in oklab, var(--color-slate-200) 80%, transparent);
      }
    }

    .hover\:bg-slate-800\/50:hover {
      background-color: #1d293d80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-slate-800\/50:hover {
        background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
      }
    }

    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }

    .hover\:bg-white\/10:hover {
      background-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }

    .hover\:bg-white\/20:hover {
      background-color: #fff3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/20:hover {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }

    .hover\:bg-white\/50:hover {
      background-color: #ffffff80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/50:hover {
        background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
      }
    }

    .hover\:bg-white\/60:hover {
      background-color: #fff9;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/60:hover {
        background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
      }
    }

    .hover\:bg-white\/70:hover {
      background-color: #ffffffb3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/70:hover {
        background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
      }
    }

    .hover\:bg-white\/80:hover {
      background-color: #fffc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/80:hover {
        background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
      }
    }

    .hover\:bg-white\/\[0\.04\]:hover {
      background-color: #ffffff0a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.04\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
      }
    }

    .hover\:bg-white\/\[0\.06\]:hover {
      background-color: #ffffff0f;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.06\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
      }
    }

    .hover\:bg-yellow-500:hover {
      background-color: var(--color-yellow-500);
    }

    .hover\:bg-yellow-900\/70:hover {
      background-color: #733e0ab3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-yellow-900\/70:hover {
        background-color: color-mix(in oklab, var(--color-yellow-900) 70%, transparent);
      }
    }

    .hover\:tracking-\[0\.55em\]:hover {
      --tw-tracking: .55em;
      letter-spacing: .55em;
    }

    .hover\:text-\[\#1a1a2e\]:hover {
      color: #1a1a2e;
    }

    .hover\:text-\[\#007AFF\]:hover {
      color: #007aff;
    }

    .hover\:text-\[\#FF2D55\]:hover {
      color: #ff2d55;
    }

    .hover\:text-\[\#f5f0e6\]:hover {
      color: #f5f0e6;
    }

    .hover\:text-\[hsl\(8_70\%_45\%\)\]:hover {
      color: #c33822;
    }

    .hover\:text-\[hsl\(14\,92\%\,58\%\)\]:hover {
      color: #f65f31;
    }

    .hover\:text-\[hsl\(36_65\%_48\%\)\]:hover {
      color: #ca8a2b;
    }

    .hover\:text-\[var\(--comm-accent-primary\)\]:hover {
      color: var(--comm-accent-primary);
    }

    .hover\:text-\[var\(--comm-danger\)\]:hover {
      color: var(--comm-danger);
    }

    .hover\:text-\[var\(--comm-warning\)\]:hover {
      color: var(--comm-warning);
    }

    .hover\:text-blue-600:hover {
      color: var(--color-blue-600);
    }

    .hover\:text-gray-600:hover {
      color: var(--color-gray-600);
    }

    .hover\:text-pink-500:hover {
      color: var(--color-pink-500);
    }

    .hover\:text-red-500:hover {
      color: var(--color-red-500);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-70:hover {
      opacity: .7;
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
      --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-accent)));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover {
      --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-accent));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_0_40px_rgba\(212\,160\,23\,0\.2\)\]:hover {
      --tw-shadow: 0 0 40px var(--tw-shadow-color, #d4a01733);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_2px_0_hsl\(var\(--brass-deep\)\)\]:hover {
      --tw-shadow: 0 2px 0 var(--tw-shadow-color, hsl(var(--brass-deep)));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_2px_0_hsl\(var\(--brass-deep\)\/0\.4\)\]:hover {
      --tw-shadow: 0 2px 0 var(--tw-shadow-color, hsl(var(--brass-deep)/.4));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_2px_0_hsl\(var\(--teal-deep\)\)\]:hover {
      --tw-shadow: 0 2px 0 var(--tw-shadow-color, hsl(var(--teal-deep)));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_4px_16px_hsl\(36_65\%_48\%\/0\.4\)\,0_0_0_1px_hsl\(36_65\%_48\%\/0\.3\)\]:hover {
      --tw-shadow: 0 4px 16px var(--tw-shadow-color, #ca8a2b66), 0 0 0 1px var(--tw-shadow-color, #ca8a2b4d);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_20px_60px_rgba\(59\,130\,246\,0\.15\)\]:hover {
      --tw-shadow: 0 20px 60px var(--tw-shadow-color, #3b82f626);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[6px_6px_0_0_hsl\(230\,45\%\,8\%\)\]:hover {
      --tw-shadow: 6px 6px 0 0 var(--tw-shadow-color, #0b0e1e);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[10px_10px_0_0_hsl\(230\,45\%\,8\%\)\]:hover {
      --tw-shadow: 10px 10px 0 0 var(--tw-shadow-color, #0b0e1e);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-xl:hover {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-blue-500\/30:hover {
      --tw-shadow-color: #3080ff4d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-blue-500\/30:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 30%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:shadow-blue-500\/40:hover {
      --tw-shadow-color: #3080ff66;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-blue-500\/40:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 40%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:shadow-rose-800\/35:hover {
      --tw-shadow-color: #a3003759;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-rose-800\/35:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-rose-800) 35%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:brightness-105:hover {
      --tw-brightness: brightness(105%);
      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, );
    }

    .group-\[\.destructive\]\:hover\:text-red-50:is(:where(.group).destructive *):hover {
      color: var(--color-red-50);
    }
  }

  .focus\:border-blue-500:focus {
    border-color: var(--color-blue-500);
  }

  .focus\:opacity-100:focus {
    opacity: 1;
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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\:ring-2: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\:ring-4:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + 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\:ring-\[var\(--comm-accent-primary\)\]:focus {
    --tw-ring-color: var(--comm-accent-primary);
  }

  .focus\:ring-blue-500\/20:focus {
    --tw-ring-color: #3080ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-blue-500\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .group-\[\.destructive\]\:focus\:ring-red-400:is(:where(.group).destructive *):focus {
    --tw-ring-color: var(--color-red-400);
  }

  .group-\[\.destructive\]\:focus\:ring-offset-red-600:is(:where(.group).destructive *):focus {
    --tw-ring-offset-color: var(--color-red-600);
  }

  .focus-visible\:ring-1:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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-visible\:ring-2:focus-visible {
    --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-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:translate-x-1:active {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .active\:translate-y-1:active {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .active\:translate-y-\[4px\]:active {
    --tw-translate-y: 4px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .active\:scale-\[0\.99\]:active {
    scale: .99;
  }

  .active\:shadow-none:active {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:no-underline:disabled {
    text-decoration-line: none;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .has-focus\:ring-\[3px\]:has(:focus) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
  }

  .has-\[\:disabled\]\:opacity-50:has(:disabled) {
    opacity: .5;
  }

  .aria-disabled\:pointer-events-none[aria-disabled="true"] {
    pointer-events: none;
  }

  .aria-disabled\:opacity-50[aria-disabled="true"] {
    opacity: .5;
  }

  .aria-selected\:opacity-30[aria-selected="true"] {
    opacity: .3;
  }

  .aria-selected\:opacity-100[aria-selected="true"] {
    opacity: 1;
  }

  .data-\[active\=true\]\:font-medium[data-active="true"] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .data-\[disabled\]\:pointer-events-none[data-disabled] {
    pointer-events: none;
  }

  .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5;
  }

  .data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
    pointer-events: none;
  }

  .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
    opacity: .5;
  }

  .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
    height: 1px;
  }

  .data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
    width: 100%;
  }

  .data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
    flex-direction: column;
  }

  .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    left: calc(var(--spacing) * 0);
  }

  .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 1);
  }

  .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    width: 100%;
  }

  .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
    border-radius: var(--radius-md);
  }

  .data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
    border-radius: 0;
  }

  .data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
    border-radius: var(--radius-md);
  }

  .data-\[selected\=true\]\:rounded-none[data-selected="true"] {
    border-radius: 0;
  }

  .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=right\]\:translate-x-1[data-side="right"] {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=active\]\:shadow[data-state="active"], .data-\[state\=active\]\:shadow-sm[data-state="active"] {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
    --tw-translate-x: calc(var(--spacing) * 5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .data-\[state\=open\]\:opacity-100[data-state="open"] {
    opacity: 1;
  }

  .data-\[state\=open\]\:duration-500[data-state="open"] {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"], .data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
    --tw-translate-x: var(--radix-toast-swipe-end-x);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
    --tw-translate-x: var(--radix-toast-swipe-move-x);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
    transition-property: none;
  }

  @media (min-width: 40rem) {
    .sm\:-top-4 {
      top: calc(var(--spacing) * -4);
    }

    .sm\:top-auto {
      top: auto;
    }

    .sm\:-right-4 {
      right: calc(var(--spacing) * -4);
    }

    .sm\:right-0 {
      right: calc(var(--spacing) * 0);
    }

    .sm\:-bottom-4 {
      bottom: calc(var(--spacing) * -4);
    }

    .sm\:bottom-0 {
      bottom: calc(var(--spacing) * 0);
    }

    .sm\:-left-4 {
      left: calc(var(--spacing) * -4);
    }

    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .sm\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .sm\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .sm\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .sm\:mt-5 {
      margin-top: calc(var(--spacing) * 5);
    }

    .sm\:mt-6 {
      margin-top: calc(var(--spacing) * 6);
    }

    .sm\:mt-7 {
      margin-top: calc(var(--spacing) * 7);
    }

    .sm\:mt-8 {
      margin-top: calc(var(--spacing) * 8);
    }

    .sm\:mt-10 {
      margin-top: calc(var(--spacing) * 10);
    }

    .sm\:mt-12 {
      margin-top: calc(var(--spacing) * 12);
    }

    .sm\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }

    .sm\:mb-4 {
      margin-bottom: calc(var(--spacing) * 4);
    }

    .sm\:mb-6 {
      margin-bottom: calc(var(--spacing) * 6);
    }

    .sm\:mb-8 {
      margin-bottom: calc(var(--spacing) * 8);
    }

    .sm\:mb-10 {
      margin-bottom: calc(var(--spacing) * 10);
    }

    .sm\:mb-12 {
      margin-bottom: calc(var(--spacing) * 12);
    }

    .sm\:mb-16 {
      margin-bottom: calc(var(--spacing) * 16);
    }

    .sm\:ml-2 {
      margin-left: calc(var(--spacing) * 2);
    }

    .sm\:ml-auto {
      margin-left: auto;
    }

    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:hidden {
      display: none;
    }

    .sm\:inline {
      display: inline;
    }

    .sm\:inline-block {
      display: inline-block;
    }

    .sm\:inline-flex {
      display: inline-flex;
    }

    .sm\:h-5 {
      height: calc(var(--spacing) * 5);
    }

    .sm\:h-6 {
      height: calc(var(--spacing) * 6);
    }

    .sm\:h-7 {
      height: calc(var(--spacing) * 7);
    }

    .sm\:h-8 {
      height: calc(var(--spacing) * 8);
    }

    .sm\:h-10 {
      height: calc(var(--spacing) * 10);
    }

    .sm\:h-12 {
      height: calc(var(--spacing) * 12);
    }

    .sm\:h-14 {
      height: calc(var(--spacing) * 14);
    }

    .sm\:h-16 {
      height: calc(var(--spacing) * 16);
    }

    .sm\:h-20 {
      height: calc(var(--spacing) * 20);
    }

    .sm\:h-24 {
      height: calc(var(--spacing) * 24);
    }

    .sm\:h-28 {
      height: calc(var(--spacing) * 28);
    }

    .sm\:h-36 {
      height: calc(var(--spacing) * 36);
    }

    .sm\:h-44 {
      height: calc(var(--spacing) * 44);
    }

    .sm\:h-48 {
      height: calc(var(--spacing) * 48);
    }

    .sm\:h-\[460px\] {
      height: 460px;
    }

    .sm\:w-5 {
      width: calc(var(--spacing) * 5);
    }

    .sm\:w-6 {
      width: calc(var(--spacing) * 6);
    }

    .sm\:w-7 {
      width: calc(var(--spacing) * 7);
    }

    .sm\:w-8 {
      width: calc(var(--spacing) * 8);
    }

    .sm\:w-10 {
      width: calc(var(--spacing) * 10);
    }

    .sm\:w-12 {
      width: calc(var(--spacing) * 12);
    }

    .sm\:w-14 {
      width: calc(var(--spacing) * 14);
    }

    .sm\:w-16 {
      width: calc(var(--spacing) * 16);
    }

    .sm\:w-20 {
      width: calc(var(--spacing) * 20);
    }

    .sm\:w-44 {
      width: calc(var(--spacing) * 44);
    }

    .sm\:w-48 {
      width: calc(var(--spacing) * 48);
    }

    .sm\:w-auto {
      width: auto;
    }

    .sm\:max-w-sm {
      max-width: var(--container-sm);
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .sm\:flex-col {
      flex-direction: column;
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

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

    .sm\:gap-2\.5 {
      gap: calc(var(--spacing) * 2.5);
    }

    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .sm\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }

    .sm\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .sm\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    .sm\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }

    :where(.sm\:space-y-0 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.sm\:space-x-2 > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }

    :where(.sm\:space-x-4 > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }

    .sm\:rounded-lg {
      border-radius: var(--radius-lg);
    }

    .sm\:p-3 {
      padding: calc(var(--spacing) * 3);
    }

    .sm\:p-5 {
      padding: calc(var(--spacing) * 5);
    }

    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .sm\:p-7 {
      padding: calc(var(--spacing) * 7);
    }

    .sm\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .sm\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .sm\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .sm\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .sm\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .sm\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }

    .sm\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }

    .sm\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }

    .sm\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }

    .sm\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }

    .sm\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }

    .sm\:text-left {
      text-align: left;
    }

    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .sm\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .sm\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .sm\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .sm\:text-7xl {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }

    .sm\:text-8xl {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }

    .sm\:text-9xl {
      font-size: var(--text-9xl);
      line-height: var(--tw-leading, var(--text-9xl--line-height));
    }

    .sm\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .sm\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .sm\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }

    .sm\:text-\[5rem\] {
      font-size: 5rem;
    }

    .sm\:text-\[7px\] {
      font-size: 7px;
    }

    .sm\:text-\[8px\] {
      font-size: 8px;
    }

    .sm\:text-\[9px\] {
      font-size: 9px;
    }

    .sm\:text-\[9rem\] {
      font-size: 9rem;
    }

    .sm\:text-\[10px\] {
      font-size: 10px;
    }

    .sm\:text-\[11px\] {
      font-size: 11px;
    }

    .sm\:text-\[15px\] {
      font-size: 15px;
    }

    .sm\:tracking-\[0\.3em\] {
      --tw-tracking: .3em;
      letter-spacing: .3em;
    }

    .sm\:tracking-\[0\.4em\] {
      --tw-tracking: .4em;
      letter-spacing: .4em;
    }

    @media (hover: hover) {
      .sm\:hover\:translate-x-2:hover {
        --tw-translate-x: calc(var(--spacing) * 2);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }

  @media (min-width: 48rem) {
    .md\:absolute {
      position: absolute;
    }

    .md\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .md\:mr-12 {
      margin-right: calc(var(--spacing) * 12);
    }

    .md\:mb-10 {
      margin-bottom: calc(var(--spacing) * 10);
    }

    .md\:ml-12 {
      margin-left: calc(var(--spacing) * 12);
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:grid {
      display: grid;
    }

    .md\:h-2\.5 {
      height: calc(var(--spacing) * 2.5);
    }

    .md\:h-6 {
      height: calc(var(--spacing) * 6);
    }

    .md\:h-7 {
      height: calc(var(--spacing) * 7);
    }

    .md\:h-8 {
      height: calc(var(--spacing) * 8);
    }

    .md\:h-12 {
      height: calc(var(--spacing) * 12);
    }

    .md\:h-14 {
      height: calc(var(--spacing) * 14);
    }

    .md\:h-20 {
      height: calc(var(--spacing) * 20);
    }

    .md\:h-32 {
      height: calc(var(--spacing) * 32);
    }

    .md\:h-36 {
      height: calc(var(--spacing) * 36);
    }

    .md\:min-h-\[100px\] {
      min-height: 100px;
    }

    .md\:min-h-\[140px\] {
      min-height: 140px;
    }

    .md\:min-h-\[220px\] {
      min-height: 220px;
    }

    .md\:w-2\.5 {
      width: calc(var(--spacing) * 2.5);
    }

    .md\:w-6 {
      width: calc(var(--spacing) * 6);
    }

    .md\:w-7 {
      width: calc(var(--spacing) * 7);
    }

    .md\:w-8 {
      width: calc(var(--spacing) * 8);
    }

    .md\:w-12 {
      width: calc(var(--spacing) * 12);
    }

    .md\:w-14 {
      width: calc(var(--spacing) * 14);
    }

    .md\:w-20 {
      width: calc(var(--spacing) * 20);
    }

    .md\:w-24 {
      width: calc(var(--spacing) * 24);
    }

    .md\:w-36 {
      width: calc(var(--spacing) * 36);
    }

    .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
      width: var(--radix-navigation-menu-viewport-width);
    }

    .md\:w-auto {
      width: auto;
    }

    .md\:max-w-\[420px\] {
      max-width: 420px;
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-\[1\.45fr_0\.95fr\] {
      grid-template-columns: 1.45fr .95fr;
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .md\:p-5 {
      padding: calc(var(--spacing) * 5);
    }

    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:p-9 {
      padding: calc(var(--spacing) * 9);
    }

    .md\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .md\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .md\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .md\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }

    .md\:px-14 {
      padding-inline: calc(var(--spacing) * 14);
    }

    .md\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }

    .md\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }

    .md\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }

    .md\:py-32 {
      padding-block: calc(var(--spacing) * 32);
    }

    .md\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .md\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .md\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .md\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .md\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .md\:text-7xl {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }

    .md\:text-8xl {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }

    .md\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .md\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .md\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .md\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }

    .md\:opacity-0 {
      opacity: 0;
    }

    .md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant="inset"] ~ *) {
      margin: calc(var(--spacing) * 2);
    }

    .md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant="inset"] ~ *) {
      margin-left: calc(var(--spacing) * 0);
    }

    .md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant="inset"] ~ *) {
      border-radius: var(--radius-xl);
    }

    .md\:peer-data-\[variant\=inset\]\:shadow:is(:where(.peer)[data-variant="inset"] ~ *) {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2:is(:where(.peer)[data-state="collapsed"] ~ *):is(:where(.peer)[data-variant="inset"] ~ *) {
      margin-left: calc(var(--spacing) * 2);
    }
  }

  .after\:md\:hidden:after {
    content: var(--tw-content);
  }

  @media (min-width: 48rem) {
    .after\:md\:hidden:after {
      display: none;
    }
  }

  @media (min-width: 64rem) {
    .lg\:order-1 {
      order: 1;
    }

    .lg\:order-2 {
      order: 2;
    }

    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .lg\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .lg\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .lg\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .lg\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .lg\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .lg\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:h-44 {
      height: calc(var(--spacing) * 44);
    }

    .lg\:h-full {
      height: 100%;
    }

    .lg\:min-h-\[460px\] {
      min-height: 460px;
    }

    .lg\:w-1\/3 {
      width: 33.3333%;
    }

    .lg\:w-2\/3 {
      width: 66.6667%;
    }

    .lg\:w-44 {
      width: calc(var(--spacing) * 44);
    }

    .lg\:max-w-none {
      max-width: none;
    }

    .lg\:min-w-\[360px\] {
      min-width: 360px;
    }

    .lg\:min-w-\[520px\] {
      min-width: 520px;
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[1\.55fr_1fr\] {
      grid-template-columns: 1.55fr 1fr;
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:items-center {
      align-items: center;
    }

    .lg\:items-end {
      align-items: flex-end;
    }

    .lg\:justify-between {
      justify-content: space-between;
    }

    .lg\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    .lg\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }

    .lg\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }

    .lg\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .lg\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .lg\:p-20 {
      padding: calc(var(--spacing) * 20);
    }

    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .lg\:py-14 {
      padding-block: calc(var(--spacing) * 14);
    }

    .lg\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }

    .lg\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }

    .lg\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }

    .lg\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }

    .lg\:text-left {
      text-align: left;
    }

    .lg\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .lg\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .lg\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .lg\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .lg\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .lg\:text-7xl {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }

    .lg\:text-8xl {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }

    .lg\:text-9xl {
      font-size: var(--text-9xl);
      line-height: var(--tw-leading, var(--text-9xl--line-height));
    }

    .lg\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .lg\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-\[1\.35fr_0\.78fr\] {
      grid-template-columns: 1.35fr .78fr;
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-amber-800 {
      border-color: var(--color-amber-800);
    }

    .dark\:border-blue-800 {
      border-color: var(--color-blue-800);
    }

    .dark\:border-gray-600 {
      border-color: var(--color-gray-600);
    }

    .dark\:border-red-800 {
      border-color: var(--color-red-800);
    }

    .dark\:border-slate-700 {
      border-color: var(--color-slate-700);
    }

    .dark\:bg-amber-900\/20 {
      background-color: #7b330633;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-amber-900\/20 {
        background-color: color-mix(in oklab, var(--color-amber-900) 20%, transparent);
      }
    }

    .dark\:bg-blue-900\/20 {
      background-color: #1c398e33;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-blue-900\/20 {
        background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
      }
    }

    .dark\:bg-blue-900\/30 {
      background-color: #1c398e4d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-blue-900\/30 {
        background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
      }
    }

    .dark\:bg-gray-700 {
      background-color: var(--color-gray-700);
    }

    .dark\:bg-gray-800 {
      background-color: var(--color-gray-800);
    }

    .dark\:bg-red-900\/20 {
      background-color: #82181a33;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-red-900\/20 {
        background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
      }
    }

    .dark\:bg-slate-700 {
      background-color: var(--color-slate-700);
    }

    .dark\:bg-slate-800 {
      background-color: var(--color-slate-800);
    }

    .dark\:bg-slate-900 {
      background-color: var(--color-slate-900);
    }

    .dark\:text-amber-300 {
      color: var(--color-amber-300);
    }

    .dark\:text-blue-300 {
      color: var(--color-blue-300);
    }

    .dark\:text-blue-400 {
      color: var(--color-blue-400);
    }

    .dark\:text-gray-300 {
      color: var(--color-gray-300);
    }

    .dark\:text-gray-400 {
      color: var(--color-gray-400);
    }

    .dark\:text-red-400 {
      color: var(--color-red-400);
    }

    .dark\:text-slate-400 {
      color: var(--color-slate-400);
    }

    .dark\:text-white {
      color: var(--color-white);
    }

    @media (hover: hover) {
      .dark\:hover\:bg-slate-600:hover {
        background-color: var(--color-slate-600);
      }

      .dark\:hover\:text-blue-300:hover {
        color: var(--color-blue-300);
      }

      .dark\:hover\:text-gray-300:hover {
        color: var(--color-gray-300);
      }
    }
  }

  .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke="#fff"] {
    stroke: #0000;
  }

  .\[\&_\.recharts-layer\]\:outline-none .recharts-layer, .\[\&_\.recharts-sector\]\:outline-none .recharts-sector {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke="#fff"] {
    stroke: #0000;
  }

  .\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] {
    padding-top: calc(var(--spacing) * 0);
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
    height: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
    width: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
    height: calc(var(--spacing) * 12);
  }

  .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
    padding-block: calc(var(--spacing) * 3);
  }

  .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
    height: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
    width: calc(var(--spacing) * 5);
  }

  .\[\&_p\]\:leading-relaxed p {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:size-4 svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_tr\]\:border-b tr {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected="true"] button, .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:first-child:has([aria-selected]) {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:last-child:has([aria-selected]), .\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {
    padding-right: calc(var(--spacing) * 0);
  }

  :is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_next > svg), :is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_previous > svg) {
    rotate: 180deg;
  }

  .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected="true"] button {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  @media (min-width: 48rem) {
    .md\:\[\&\>\*\:first-child\]\:order-2 > :first-child {
      order: 2;
    }
  }

  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
    --tw-translate-y: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>button\]\:hidden > button {
    display: none;
  }

  .\[\&\>span\]\:line-clamp-1 > span {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .\[\&\>span\]\:text-xs > span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\[\&\>span\]\:opacity-70 > span {
    opacity: .7;
  }

  .\[\&\>span\:last-child\]\:truncate > span:last-child {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\[\&\>svg\]\:absolute > svg {
    position: absolute;
  }

  .\[\&\>svg\]\:top-4 > svg {
    top: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:left-4 > svg {
    left: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:size-3\.5 > svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\]\:size-4 > svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:h-2\.5 > svg {
    height: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:h-3 > svg {
    height: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:h-3\.5 > svg {
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\]\:w-2\.5 > svg {
    width: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:w-3 > svg {
    width: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:w-3\.5 > svg {
    width: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\]\:shrink-0 > svg {
    flex-shrink: 0;
  }

  .\[\&\>svg\+div\]\:translate-y-\[-3px\] > svg + div {
    --tw-translate-y: -3px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>svg\~\*\]\:pl-7 > svg ~ * {
    padding-left: calc(var(--spacing) * 7);
  }

  .\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction="vertical"] > div {
    rotate: 90deg;
  }

  .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg {
    rotate: 180deg;
  }

  [data-side="left"] .\[\[data-side\=left\]_\&\]\:cursor-w-resize {
    cursor: w-resize;
  }

  [data-side="left"][data-collapsible="offcanvas"] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
    right: calc(var(--spacing) * -2);
  }

  [data-side="left"][data-state="collapsed"] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize, [data-side="right"] .\[\[data-side\=right\]_\&\]\:cursor-e-resize {
    cursor: e-resize;
  }

  [data-side="right"][data-collapsible="offcanvas"] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
    left: calc(var(--spacing) * -2);
  }

  [data-side="right"][data-state="collapsed"] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
    cursor: w-resize;
  }

  [data-slot="card-content"] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent, [data-slot="popover-content"] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
    background-color: #0000;
  }
}

:root, [data-theme="light"] {
  --aura-page-bg: #f2f5fb;
  --aura-card-bg: #ffffffc7;
  --aura-card-border: #fffc;
  --aura-card-shadow: 0 16px 60px #0f172a14;
  --aura-footer-bg: #f8fafcb3;
  --aura-footer-border: #0f172a12;
  --aura-footer-color: #64748b;
  --aura-text-primary: #0f172a;
  --aura-text-secondary: #475569;
  --aura-text-muted: #94a3b8;
  --aura-back-bg: #fffc;
  --aura-back-border: #0f172a1a;
  --aura-back-color: #334155;
  --aura-back-shadow: 0 2px 8px #0f172a0f;
  --aura-nav-label: #94a3b8;
  --aura-stat-bg: #ffffffd1;
  --aura-stat-border: #ffffffb3;
  --aura-stat-shadow: 0 1px 4px #0f172a0d;
  --aura-stat-title: #64748b;
  --aura-stat-value: #0f172a;
  --aura-stat-sub: #64748b;
  --aura-target-bg: #ffffffe0;
  --aura-target-border: #0f172a14;
  --aura-target-eyebrow: #94a3b8;
  --aura-target-desc: #475569;
  --aura-target-btn-bg: #ffffffb8;
  --aura-target-btn-border: #0f172a1a;
  --aura-target-btn-hover-bg: #fbbf2414;
  --aura-target-btn-hover-border: #fbbf2466;
  --aura-target-btn-label: #1e293b;
  --aura-target-btn-desc: #64748b;
  --aura-progress-track: #0f172a12;
  --aura-days-label: #64748b;
  --aura-progress-label: #64748b;
  --aura-set-date: #94a3b8;
  --aura-set-new-btn-bg: #ffffffb8;
  --aura-set-new-btn-border: #0f172a1a;
  --aura-set-new-btn-color: #334155;
  --aura-set-new-btn-hover: #f8fafcf2;
  --aura-error-bg: #fee2e2cc;
  --aura-error-border: #ef444447;
  --aura-error-color: #dc2626;
  --aura-skeleton-bg: #0f172a12;
  --aura-video-bg: #020617b8;
}

[data-theme="dark"] {
  --aura-page-bg: #0d1117;
  --aura-card-bg: #161b22d1;
  --aura-card-border: #ffffff12;
  --aura-card-shadow: 0 16px 60px #00000080;
  --aura-footer-bg: #0d1117b3;
  --aura-footer-border: #ffffff0f;
  --aura-footer-color: #64748b;
  --aura-text-primary: #f0f6fc;
  --aura-text-secondary: #94a3b8;
  --aura-text-muted: #64748b;
  --aura-back-bg: #161b22cc;
  --aura-back-border: #ffffff14;
  --aura-back-color: #cbd5e1;
  --aura-back-shadow: 0 2px 8px #00000059;
  --aura-nav-label: #64748b;
  --aura-stat-bg: #1e2530bf;
  --aura-stat-border: #ffffff12;
  --aura-stat-shadow: 0 1px 4px #00000059;
  --aura-stat-title: #64748b;
  --aura-stat-value: #f0f6fc;
  --aura-stat-sub: #64748b;
  --aura-target-bg: #161b22d1;
  --aura-target-border: #ffffff12;
  --aura-target-eyebrow: #64748b;
  --aura-target-desc: #94a3b8;
  --aura-target-btn-bg: #1e253099;
  --aura-target-btn-border: #ffffff14;
  --aura-target-btn-hover-bg: #78550a2e;
  --aura-target-btn-hover-border: #fbbf244d;
  --aura-target-btn-label: #f0f6fc;
  --aura-target-btn-desc: #64748b;
  --aura-progress-track: #ffffff12;
  --aura-days-label: #64748b;
  --aura-progress-label: #64748b;
  --aura-set-date: #4b5563;
  --aura-set-new-btn-bg: #1e253099;
  --aura-set-new-btn-border: #ffffff14;
  --aura-set-new-btn-color: #cbd5e1;
  --aura-set-new-btn-hover: #1e2530e6;
  --aura-error-bg: #7f1d1d4d;
  --aura-error-border: #ef44444d;
  --aura-error-color: #f87171;
  --aura-skeleton-bg: #ffffff0f;
  --aura-video-bg: #020617d9;
}

[data-theme="navy"] {
  --aura-page-bg: #060b18;
  --aura-card-bg: #0c1428d6;
  --aura-card-border: rgba(var(--accent-rgb, 0 212 255), .09);
  --aura-card-shadow: 0 16px 60px #0000008c,
    0 0 40px rgba(var(--accent-rgb, 0 212 255), .04);
  --aura-footer-bg: #060b18cc;
  --aura-footer-border: rgba(var(--accent-rgb, 0 212 255), .08);
  --aura-footer-color: #3d6491;
  --aura-text-primary: #e2eaf8;
  --aura-text-secondary: #7fa8d4;
  --aura-text-muted: #3d6491;
  --aura-back-bg: #0c1428cc;
  --aura-back-border: rgba(var(--accent-rgb, 0 212 255), .12);
  --aura-back-color: #7fa8d4;
  --aura-back-shadow: 0 2px 8px #00000073;
  --aura-nav-label: #3d6491;
  --aura-stat-bg: #0c1428b8;
  --aura-stat-border: rgba(var(--accent-rgb, 0 212 255), .09);
  --aura-stat-shadow: 0 1px 4px #00000073;
  --aura-stat-title: #3d6491;
  --aura-stat-value: #e2eaf8;
  --aura-stat-sub: #3d6491;
  --aura-target-bg: #0c1428d6;
  --aura-target-border: rgba(var(--accent-rgb, 0 212 255), .09);
  --aura-target-eyebrow: #3d6491;
  --aura-target-desc: #7fa8d4;
  --aura-target-btn-bg: #121c3699;
  --aura-target-btn-border: rgba(var(--accent-rgb, 0 212 255), .1);
  --aura-target-btn-hover-bg: #78550a24;
  --aura-target-btn-hover-border: #fbbf2447;
  --aura-target-btn-label: #e2eaf8;
  --aura-target-btn-desc: #3d6491;
  --aura-progress-track: rgba(var(--accent-rgb, 0 212 255), .08);
  --aura-days-label: #3d6491;
  --aura-progress-label: #3d6491;
  --aura-set-date: #3d6491;
  --aura-set-new-btn-bg: #121c3699;
  --aura-set-new-btn-border: rgba(var(--accent-rgb, 0 212 255), .1);
  --aura-set-new-btn-color: #7fa8d4;
  --aura-set-new-btn-hover: #121c36e6;
  --aura-error-bg: #7f1d1d33;
  --aura-error-border: #ef444438;
  --aura-error-color: #f87171;
  --aura-skeleton-bg: rgba(var(--accent-rgb, 0 212 255), .06);
  --aura-video-bg: #020617e0;
}

.aura-page {
  background: var(--aura-page-bg);
  min-height: 100vh;
  color: var(--aura-text-primary);
}

.aura-nav {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 64rem;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
}

.aura-back-btn {
  border: 1px solid var(--aura-back-border);
  background: var(--aura-back-bg);
  color: var(--aura-back-color);
  box-shadow: var(--aura-back-shadow);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  align-items: center;
  padding: 8px 18px;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
  display: inline-flex;
}

.aura-back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px #0000001a;
}

.aura-nav-label {
  color: var(--aura-nav-label);
  font-size: .875rem;
}

.aura-nav-label--hidden-sm {
  display: none;
}

@media (min-width: 640px) {
  .aura-nav-label--hidden-sm {
    display: block;
  }
}

.aura-card-wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.aura-card {
  border: 1px solid var(--aura-card-border);
  background: var(--aura-card-bg);
  box-shadow: var(--aura-card-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-radius: 2rem;
  overflow: hidden;
}

.aura-grid {
  gap: 32px;
  padding: 24px;
  display: grid;
}

@media (min-width: 768px) {
  .aura-grid {
    grid-template-columns: 1.1fr .9fr;
    padding: 32px;
  }
}

.aura-left {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.aura-badges-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.aura-rank-badge {
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
}

.aura-health-badge {
  text-transform: uppercase;
  letter-spacing: .14em;
  border: 1px solid;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}

.aura-title {
  letter-spacing: -.03em;
  color: var(--aura-text-primary);
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 900;
}

.aura-desc {
  color: var(--aura-text-secondary);
  max-width: 460px;
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
}

.aura-stats-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  display: grid;
}

@media (max-width: 400px) {
  .aura-stats-grid {
    grid-template-columns: 1fr;
  }
}

.aura-stat-pill {
  border: 1px solid var(--aura-stat-border);
  background: var(--aura-stat-bg);
  box-shadow: var(--aura-stat-shadow);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 14px 16px;
}

.aura-stat-pill-title {
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--aura-stat-title);
  font-size: .68rem;
  font-weight: 700;
}

.aura-stat-pill-value {
  color: var(--aura-stat-value);
  margin-top: 4px;
  font-size: 1.15rem;
  font-weight: 800;
}

.aura-stat-pill-sub {
  color: var(--aura-stat-sub);
  margin-top: 3px;
  font-size: .73rem;
}

.aura-target-card {
  border: 1px solid var(--aura-target-border);
  background: var(--aura-target-bg);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 20px;
}

.aura-target-eyebrow {
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--aura-target-eyebrow);
  margin-bottom: 4px;
  font-size: .68rem;
  font-weight: 700;
}

.aura-target-desc {
  color: var(--aura-target-desc);
  margin: 0 0 16px;
  font-size: .875rem;
  line-height: 1.55;
}

.aura-target-exceeded {
  color: #f59e0b;
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
}

.aura-target-grid {
  gap: 8px;
  display: grid;
}

@media (min-width: 480px) and (max-width: 767px) {
  .aura-target-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .aura-target-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.aura-target-btn {
  border: 1px solid var(--aura-target-btn-border);
  background: var(--aura-target-btn-bg);
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  transition: background .18s, border-color .18s;
  display: flex;
}

.aura-target-btn:hover:not(:disabled) {
  background: var(--aura-target-btn-hover-bg);
  border-color: var(--aura-target-btn-hover-border);
}

.aura-target-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.aura-target-btn-label {
  color: var(--aura-target-btn-label);
  font-size: .875rem;
  font-weight: 700;
}

.aura-target-btn-desc {
  color: var(--aura-target-btn-desc);
  margin-top: 2px;
  font-size: .75rem;
}

.aura-target-btn-right {
  text-align: right;
}

.aura-target-bonus {
  color: #f59e0b;
  font-size: .875rem;
  font-weight: 900;
}

.aura-target-bonus-label {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--aura-target-desc);
  margin-top: 2px;
  font-size: .625rem;
  font-weight: 700;
}

.aura-target-progress-hdr {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.aura-target-locked-badge {
  text-transform: uppercase;
  letter-spacing: .1em;
  border: 1px solid;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .65rem;
  font-weight: 700;
}

.aura-target-progress-body {
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
  display: flex;
}

.aura-target-days-num {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.aura-target-days-label {
  color: var(--aura-days-label);
  margin-inline-start: 4px;
  font-size: 1rem;
  font-weight: 600;
}

.aura-target-progress-right {
  text-align: right;
}

.aura-target-set-date {
  color: var(--aura-set-date);
  margin-top: 12px;
  font-size: .68rem;
}

.aura-progress-track {
  background: var(--aura-progress-track);
  border-radius: 999px;
  width: 100%;
  height: 12px;
  position: relative;
  overflow: hidden;
}

.aura-progress-fill {
  border-radius: 999px;
  height: 100%;
  transition: width .7s cubic-bezier(.4, 0, .2, 1);
}

.aura-progress-labels {
  color: var(--aura-progress-label);
  justify-content: space-between;
  margin-top: 8px;
  font-size: .72rem;
  display: flex;
}

.aura-target-complete-hdr {
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}

.aura-target-complete-trophy {
  font-size: 1.5rem;
}

.aura-target-complete-title {
  color: var(--aura-text-primary);
  font-size: .875rem;
  font-weight: 700;
}

.aura-target-complete-body {
  color: var(--aura-text-secondary);
  margin: 0 0 16px;
  font-size: .875rem;
  line-height: 1.55;
}

.aura-target-complete-bonus {
  color: #f59e0b;
  font-weight: 700;
}

.aura-uponCompletion {
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--aura-target-desc);
  font-size: .625rem;
}

.aura-set-new-btn {
  border: 1px solid var(--aura-set-new-btn-border);
  background: var(--aura-set-new-btn-bg);
  width: 100%;
  color: var(--aura-set-new-btn-color);
  cursor: pointer;
  border-radius: 12px;
  padding: 10px;
  font-size: .875rem;
  font-weight: 700;
  transition: background .18s;
}

.aura-set-new-btn:hover:not(:disabled) {
  background: var(--aura-set-new-btn-hover);
}

.aura-set-new-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.aura-target-error {
  border: 1px solid var(--aura-error-border);
  background: var(--aura-error-bg);
  color: var(--aura-error-color);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .875rem;
}

.aura-right {
  justify-content: center;
  align-items: center;
  display: flex;
}

.aura-rings-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.aura-video-orb {
  z-index: 10;
  background: var(--aura-video-bg);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.aura-video-inner {
  border-radius: 50%;
  overflow: hidden;
}

.aura-video {
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  display: block;
}

.aura-state-label {
  z-index: 20;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: .68rem;
  font-weight: 700;
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
}

.aura-footer {
  border-top: 1px solid var(--aura-footer-border);
  background: var(--aura-footer-bg);
  color: var(--aura-footer-color);
  padding: 14px 24px;
  font-size: .8125rem;
  line-height: 1.55;
}

.aura-skeleton-ring {
  background: var(--aura-skeleton-bg);
  border-radius: 50%;
  animation: 1.6s ease-in-out infinite aura-pulse;
}

.aura-skeleton-line {
  background: var(--aura-skeleton-bg);
  border-radius: 999px;
  height: 20px;
  margin: 16px auto 0;
  animation: 1.6s ease-in-out infinite aura-pulse;
}

.aura-skeleton-line--wide {
  width: 224px;
}

.aura-skeleton-line--narrow {
  width: 320px;
}

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

  50% {
    opacity: .45;
  }
}

@media (max-width: 480px) {
  .aura-card-wrap {
    padding: 0 12px 32px;
  }

  .aura-grid {
    gap: 24px;
    padding: 18px;
  }

  .aura-rings-wrap {
    transform-origin: center;
    transform: scale(.78);
  }

  .aura-title {
    font-size: 1.4rem;
  }

  .aura-target-card {
    padding: 16px;
  }

  .aura-stat-pill {
    padding: 12px;
  }
}

@media (max-width: 380px) {
  .aura-rings-wrap {
    transform: scale(.68);
  }

  .aura-grid {
    gap: 18px;
    padding: 14px;
  }
}

.aura-section {
  width: 100%;
  max-width: var(--container-5xl);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 6);
  margin-inline: auto;
}

.aura-top-row {
  margin-bottom: calc(var(--spacing) * 4);
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  flex-wrap: wrap;
  display: flex;
}

.aura-bottom-row {
  width: 100%;
  max-width: var(--container-5xl);
  gap: calc(var(--spacing) * 6);
  padding-inline: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 8);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-inline: auto;
  display: grid;
}

@media (min-width: 64rem) {
  .aura-bottom-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.aura-badge {
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #e2e8f099;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .aura-badge {
    border-color: color-mix(in oklab, var(--color-slate-200) 60%, transparent);
  }
}

.aura-badge {
  background-color: #ffffffb3;
}

@supports (color: color-mix(in lab, red, red)) {
  .aura-badge {
    background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
  }
}

.aura-badge {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  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(var(--blur-md));
  -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, );
  background: var(--aura-stat-bg);
  border-color: var(--aura-stat-border);
  color: var(--aura-text-secondary);
}

.aura-badge-loading {
  animation: var(--animate-pulse);
  opacity: .6;
}

.aura-badge-rank {
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.aura-score-bar {
  border-radius: var(--radius-xl);
  width: 100%;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  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(var(--blur-md));
  -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, );
  background: var(--aura-stat-bg);
  border: 1px solid var(--aura-stat-border);
}

.aura-score-bar-loading {
  animation: var(--animate-pulse);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  opacity: .6;
}

.aura-score-bar-header {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.aura-score-bar-score {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--aura-text-primary);
}

.aura-score-bar-next {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--aura-text-muted);
}

.aura-score-bar-track {
  height: calc(var(--spacing) * 2);
  background: var(--aura-progress-track);
  border-radius: 3.40282e38px;
  width: 100%;
  overflow: hidden;
}

.aura-score-bar-fill {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-blue-500);
  --tw-gradient-via: var(--color-violet-500);
  --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, 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: var(--color-fuchsia-500);
  height: 100%;
  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: .7s;
  --tw-ease: var(--ease-out);
  transition-duration: .7s;
  transition-timing-function: var(--ease-out);
  border-radius: 3.40282e38px;
}

.aura-streak {
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-xl);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  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(var(--blur-md));
  -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, );
  background: var(--aura-stat-bg);
  border: 1px solid var(--aura-stat-border);
  display: inline-flex;
}

.aura-streak-loading {
  animation: var(--animate-pulse);
  opacity: .6;
}

.aura-streak-icon {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}

.aura-streak-info {
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
  flex-direction: column;
  display: flex;
}

.aura-streak-current {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--aura-text-primary);
}

.aura-streak-label {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--aura-text-muted);
}

.aura-streak-longest {
  margin-left: calc(var(--spacing) * 2);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: #f59e0b;
}

.aura-leaderboard {
  border-radius: var(--radius-2xl);
  width: 100%;
  padding: calc(var(--spacing) * 5);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  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(var(--blur-md));
  -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, );
  background: var(--aura-target-bg);
  border: 1px solid var(--aura-target-border);
}

.aura-leaderboard-loading, .aura-leaderboard-error {
  animation: var(--animate-pulse);
  padding-block: calc(var(--spacing) * 8);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--aura-text-muted);
}

.aura-leaderboard-error {
  color: var(--color-red-500);
  animation: none;
}

.aura-leaderboard-header {
  margin-bottom: calc(var(--spacing) * 4);
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  flex-wrap: wrap;
  display: flex;
}

.aura-leaderboard-header h2 {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--aura-text-primary);
}

.aura-leaderboard-filter {
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.aura-leaderboard-filter:focus {
  --tw-outline-style: none;
  outline-style: none;
}

.aura-leaderboard-filter {
  background: var(--aura-target-btn-bg);
  border: 1px solid var(--aura-target-btn-border);
  color: var(--aura-text-secondary);
}

.aura-leaderboard-table {
  width: 100%;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.aura-leaderboard-table thead th {
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  text-align: left;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--aura-text-muted);
  border-bottom: 1px solid var(--aura-target-border);
}

.aura-leaderboard-table tbody tr {
  border-bottom: 1px solid var(--aura-target-border);
  transition: background .15s;
}

.aura-leaderboard-table tbody tr:hover {
  background: rgba(var(--accent-rgb, 59 130 246), .04);
}

.aura-leaderboard-table tbody td {
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2.5);
  color: var(--aura-text-secondary);
}

.aura-leaderboard-user {
  align-items: center;
  gap: calc(var(--spacing) * 2);
  display: flex;
}

.aura-leaderboard-avatar {
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  object-fit: cover;
  border: 1px solid var(--aura-stat-border);
  border-radius: 3.40282e38px;
}

.aura-leaderboard-pagination {
  margin-top: calc(var(--spacing) * 4);
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--aura-text-muted);
  display: flex;
}

.aura-leaderboard-pagination button {
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 3);
  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));
}

.aura-leaderboard-pagination button:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.aura-leaderboard-pagination button {
  background: var(--aura-target-btn-bg);
  border: 1px solid var(--aura-target-btn-border);
  color: var(--aura-text-secondary);
}

.aura-history {
  border-radius: var(--radius-2xl);
  width: 100%;
  padding: calc(var(--spacing) * 5);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  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(var(--blur-md));
  -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, );
  background: var(--aura-target-bg);
  border: 1px solid var(--aura-target-border);
}

.aura-history-loading, .aura-history-error {
  animation: var(--animate-pulse);
  padding-block: calc(var(--spacing) * 8);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--aura-text-muted);
}

.aura-history-error {
  color: var(--color-red-500);
  animation: none;
}

.aura-history-header {
  margin-bottom: calc(var(--spacing) * 4);
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  flex-wrap: wrap;
  display: flex;
}

.aura-history-header h2 {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--aura-text-primary);
}

.aura-history-days {
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.aura-history-days:focus {
  --tw-outline-style: none;
  outline-style: none;
}

.aura-history-days {
  background: var(--aura-target-btn-bg);
  border: 1px solid var(--aura-target-btn-border);
  color: var(--aura-text-secondary);
}

.aura-history-streak {
  margin-bottom: calc(var(--spacing) * 3);
  gap: calc(var(--spacing) * 4);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--aura-text-muted);
  display: flex;
}

.aura-history-chart {
  margin-top: calc(var(--spacing) * 2);
}

.aura-history-empty {
  padding-block: calc(var(--spacing) * 8);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--aura-text-muted);
}

@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;
}

@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-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-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-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@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: 0;
}

@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-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-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-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ping {
  75%, 100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
    transform: translateY(-25%);
  }

  50% {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    transform: none;
  }
}
/* ============================================
   HEADER — ENHANCED LIQUID ISLAND DESIGN
   Light / Dark / Navy × Accent Color System
   Extends profile.css + community.css variables
   ============================================ */

/* ============================================
   HEADER-SPECIFIC TOKEN EXTENSIONS
   Per-mode values that build on the shared
   --accent / --accent-rgb / --bg-* variables.
   ============================================ */

:root,
[data-theme="light"] {
  --header-surface: rgba(255, 255, 255, 0.68);
  --header-surface-island: rgba(255, 255, 255, 0.82);
  --header-border: rgba(255, 255, 255, 0.55);
  --header-border-island: rgba(255, 255, 255, 0.7);
  --header-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --header-shadow-island:
    0 20px 60px rgba(var(--accent-rgb), 0.22), 0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --header-reflection-top: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.16) 45%,
    rgba(255, 255, 255, 0.04) 75%,
    transparent 100%
  );
  --header-mask-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.22) 100%
  );

  /* Notif dropdown */
  --notif-dropdown-bg: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(248, 250, 255, 0.88) 50%,
    rgba(255, 255, 255, 0.84) 100%
  );
  --notif-dropdown-border: rgba(255, 255, 255, 0.65);
  --notif-dropdown-shadow:
    0 28px 56px -12px rgba(0, 0, 0, 0.22), 0 12px 24px -6px rgba(0, 0, 0, 0.1),
    0 0 44px -6px rgba(var(--accent-rgb), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  --notif-item-bg: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.45) 55%,
    rgba(255, 255, 255, 0.28) 100%
  );
  --notif-item-bg-hover: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.65) 55%,
    rgba(255, 255, 255, 0.4) 100%
  );
  --notif-item-border: rgba(255, 255, 255, 0.55);
  --notif-header-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  --notif-header-color: #1d1d1f;
  --notif-header-border: rgba(0, 0, 0, 0.06);
  --notif-msg-color: #1d1d1f;
  --notif-time-color: #86868b;
  --notif-empty-color: #86868b;
  --notif-scrolltrack: rgba(0, 0, 0, 0.03);
  --notif-scrollthumb: rgba(var(--accent-rgb), 0.28);
  --notif-scrollthumb-h: rgba(var(--accent-rgb), 0.5);

  /* Island */
  --island-icon-default-bg: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(240, 240, 245, 0.7)
  );
  --island-icon-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
  --island-badge-bg: rgba(0, 0, 0, 0.05);
  --island-badge-color: #636366;
  --island-msg-bg: rgba(0, 0, 0, 0.035);
  --island-msg-border: rgba(0, 0, 0, 0.045);
  --island-msg-color: #1d1d1f;
  --island-time-color: #86868b;
  --island-close-bg: rgba(0, 0, 0, 0.06);
  --island-close-color: #636366;
  --island-progress-bg: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-alt)
  );

  /* Buttons */
  --nav-link-color: #1d1d1f;
  --nav-link-active: var(--accent);
  --nav-indicator-bg: linear-gradient(90deg, var(--accent-alt), var(--accent));
  --nav-indicator-glow: rgba(var(--accent-rgb), 0.45);
  --notif-btn-bg: transparent;
  --notif-bell-stroke: #1d1d1f;
  --logout-color: #ff3b30;
  --logout-bg: rgba(255, 59, 48, 0.06);
  --logout-border: rgba(255, 59, 48, 0.28);
  --logout-bg-hover: #ff3b30;
  --logout-color-hover: #fff;
  --admin-btn-bg: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-dark) 100%
  );
  --profile-btn-bg: rgba(var(--accent-rgb), 0.08);
  --profile-btn-stroke: var(--accent);

  /* Modal */
  --modal-bg: #ffffff;
  --modal-border-color: #eaeaea;
  --modal-label-color: #666;
  --modal-text-color: #333;
  --modal-reason-bg: #f8f9fa;
  --modal-content-bg-box: #fff3f3;
  --modal-content-border: #ffcdd2;
  --modal-admin-bg: #f8f9fa;
  --modal-timestamp-color: #888;
  --modal-timestamp-border: #eaeaea;
}

[data-theme="dark"] {
  --header-surface: rgba(15, 23, 42, 0.78);
  --header-surface-island: rgba(15, 23, 42, 0.92);
  --header-border: rgba(255, 255, 255, 0.1);
  --header-border-island: rgba(255, 255, 255, 0.16);
  --header-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --header-shadow-island:
    0 20px 60px rgba(var(--accent-rgb), 0.28), 0 8px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --header-reflection-top: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.01) 75%,
    transparent 100%
  );
  --header-mask-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );

  --notif-dropdown-bg: linear-gradient(
    145deg,
    rgba(30, 41, 59, 0.94) 0%,
    rgba(15, 23, 42, 0.92) 55%,
    rgba(22, 32, 50, 0.9) 100%
  );
  --notif-dropdown-border: rgba(255, 255, 255, 0.12);
  --notif-dropdown-shadow:
    0 28px 56px -12px rgba(0, 0, 0, 0.65), 0 12px 24px -6px rgba(0, 0, 0, 0.45),
    0 0 44px -6px rgba(var(--accent-rgb), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  --notif-item-bg: linear-gradient(
    148deg,
    rgba(38, 51, 71, 0.8) 0%,
    rgba(30, 41, 59, 0.65) 55%,
    rgba(22, 32, 50, 0.5) 100%
  );
  --notif-item-bg-hover: linear-gradient(
    148deg,
    rgba(48, 64, 88, 0.92) 0%,
    rgba(38, 51, 71, 0.8) 55%,
    rgba(30, 41, 59, 0.65) 100%
  );
  --notif-item-border: rgba(255, 255, 255, 0.08);
  --notif-header-bg: linear-gradient(
    180deg,
    rgba(30, 41, 59, 0.8) 0%,
    rgba(15, 23, 42, 0.6) 100%
  );
  --notif-header-color: #f1f5f9;
  --notif-header-border: rgba(255, 255, 255, 0.07);
  --notif-msg-color: #e2e8f0;
  --notif-time-color: #94a3b8;
  --notif-empty-color: #64748b;
  --notif-scrolltrack: rgba(255, 255, 255, 0.03);
  --notif-scrollthumb: rgba(var(--accent-rgb), 0.32);
  --notif-scrollthumb-h: rgba(var(--accent-rgb), 0.55);

  --island-icon-default-bg: linear-gradient(
    135deg,
    rgba(38, 51, 71, 0.95),
    rgba(30, 41, 59, 0.75)
  );
  --island-icon-shadow:
    0 4px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --island-badge-bg: rgba(255, 255, 255, 0.08);
  --island-badge-color: #94a3b8;
  --island-msg-bg: rgba(255, 255, 255, 0.05);
  --island-msg-border: rgba(255, 255, 255, 0.08);
  --island-msg-color: #e2e8f0;
  --island-time-color: #64748b;
  --island-close-bg: rgba(255, 255, 255, 0.08);
  --island-close-color: #94a3b8;
  --island-progress-bg: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-alt)
  );

  --nav-link-color: #cbd5e1;
  --nav-link-active: var(--accent);
  --nav-indicator-bg: linear-gradient(90deg, var(--accent-alt), var(--accent));
  --nav-indicator-glow: rgba(var(--accent-rgb), 0.55);
  --notif-btn-bg: transparent;
  --notif-bell-stroke: #cbd5e1;
  --logout-color: #f87171;
  --logout-bg: rgba(248, 113, 113, 0.08);
  --logout-border: rgba(248, 113, 113, 0.3);
  --logout-bg-hover: #f87171;
  --logout-color-hover: #0f172a;
  --admin-btn-bg: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-dark) 100%
  );
  --profile-btn-bg: rgba(var(--accent-rgb), 0.12);
  --profile-btn-stroke: var(--accent);

  --modal-bg: #1e293b;
  --modal-border-color: rgba(255, 255, 255, 0.08);
  --modal-label-color: #64748b;
  --modal-text-color: #cbd5e1;
  --modal-reason-bg: rgba(255, 255, 255, 0.05);
  --modal-content-bg-box: rgba(248, 113, 113, 0.06);
  --modal-content-border: rgba(248, 113, 113, 0.2);
  --modal-admin-bg: rgba(255, 255, 255, 0.04);
  --modal-timestamp-color: #475569;
  --modal-timestamp-border: rgba(255, 255, 255, 0.07);
}

[data-theme="navy"] {
  --header-surface: rgba(6, 13, 31, 0.82);
  --header-surface-island: rgba(6, 13, 31, 0.95);
  --header-border: rgba(255, 255, 255, 0.08);
  --header-border-island: rgba(255, 255, 255, 0.13);
  --header-shadow:
    0 8px 32px rgba(0, 0, 10, 0.6), 0 2px 8px rgba(0, 0, 10, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --header-shadow-island:
    0 20px 60px rgba(var(--accent-rgb), 0.24), 0 8px 32px rgba(0, 0, 10, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --header-reflection-top: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 45%,
    rgba(255, 255, 255, 0.005) 75%,
    transparent 100%
  );
  --header-mask-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.07) 100%
  );

  --notif-dropdown-bg: linear-gradient(
    145deg,
    rgba(13, 27, 53, 0.96) 0%,
    rgba(6, 13, 31, 0.94) 55%,
    rgba(9, 18, 40, 0.92) 100%
  );
  --notif-dropdown-border: rgba(255, 255, 255, 0.09);
  --notif-dropdown-shadow:
    0 28px 56px -12px rgba(0, 0, 10, 0.8), 0 12px 24px -6px rgba(0, 0, 10, 0.6),
    0 0 44px -6px rgba(var(--accent-rgb), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --notif-item-bg: linear-gradient(
    148deg,
    rgba(19, 36, 68, 0.82) 0%,
    rgba(13, 27, 53, 0.7) 55%,
    rgba(9, 18, 40, 0.58) 100%
  );
  --notif-item-bg-hover: linear-gradient(
    148deg,
    rgba(25, 47, 88, 0.94) 0%,
    rgba(19, 36, 68, 0.82) 55%,
    rgba(13, 27, 53, 0.68) 100%
  );
  --notif-item-border: rgba(255, 255, 255, 0.07);
  --notif-header-bg: linear-gradient(
    180deg,
    rgba(13, 27, 53, 0.85) 0%,
    rgba(6, 13, 31, 0.65) 100%
  );
  --notif-header-color: #e8edf5;
  --notif-header-border: rgba(255, 255, 255, 0.06);
  --notif-msg-color: #b8c6dc;
  --notif-time-color: #7a90ad;
  --notif-empty-color: #3d5277;
  --notif-scrolltrack: rgba(255, 255, 255, 0.02);
  --notif-scrollthumb: rgba(var(--accent-rgb), 0.28);
  --notif-scrollthumb-h: rgba(var(--accent-rgb), 0.48);

  --island-icon-default-bg: linear-gradient(
    135deg,
    rgba(19, 36, 68, 0.96),
    rgba(13, 27, 53, 0.8)
  );
  --island-icon-shadow:
    0 4px 16px rgba(0, 0, 10, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --island-badge-bg: rgba(255, 255, 255, 0.07);
  --island-badge-color: #7a90ad;
  --island-msg-bg: rgba(255, 255, 255, 0.04);
  --island-msg-border: rgba(255, 255, 255, 0.06);
  --island-msg-color: #b8c6dc;
  --island-time-color: #3d5277;
  --island-close-bg: rgba(255, 255, 255, 0.06);
  --island-close-color: #7a90ad;
  --island-progress-bg: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-alt)
  );

  --nav-link-color: #b8c6dc;
  --nav-link-active: var(--accent);
  --nav-indicator-bg: linear-gradient(90deg, var(--accent-alt), var(--accent));
  --nav-indicator-glow: rgba(var(--accent-rgb), 0.5);
  --notif-btn-bg: transparent;
  --notif-bell-stroke: #b8c6dc;
  --logout-color: #f87171;
  --logout-bg: rgba(248, 113, 113, 0.07);
  --logout-border: rgba(248, 113, 113, 0.25);
  --logout-bg-hover: #f87171;
  --logout-color-hover: #060d1f;
  --admin-btn-bg: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-dark) 100%
  );
  --profile-btn-bg: rgba(var(--accent-rgb), 0.1);
  --profile-btn-stroke: var(--accent);

  --modal-bg: #0d1b35;
  --modal-border-color: rgba(255, 255, 255, 0.07);
  --modal-label-color: #3d5277;
  --modal-text-color: #b8c6dc;
  --modal-reason-bg: rgba(255, 255, 255, 0.04);
  --modal-content-bg-box: rgba(248, 113, 113, 0.05);
  --modal-content-border: rgba(248, 113, 113, 0.18);
  --modal-admin-bg: rgba(255, 255, 255, 0.03);
  --modal-timestamp-color: #3d5277;
  --modal-timestamp-border: rgba(255, 255, 255, 0.06);
}

/* ============================================
   KEYFRAMES
   ============================================ */

@keyframes headerReveal {
  from {
    opacity: 0;
    transform: translate(-50%, -28px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes badgePulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.65);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(255, 59, 48, 0);
  }
}

@keyframes bellRing {
  0%,
  88%,
  100% {
    transform: rotate(0deg);
  }
  90%,
  96% {
    transform: rotate(9deg);
  }
  93%,
  99% {
    transform: rotate(-9deg);
  }
}

@keyframes accentPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0);
  }
}

@keyframes itemSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-28px) scaleX(0.9);
    filter: blur(4px);
  }
  60% {
    transform: translateX(4px) scaleX(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes iconBounce {
  0% {
    transform: scale(0) rotate(-22deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.12) rotate(6deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes emptyFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.45;
  }
  50% {
    transform: translateY(-6px) scale(1.06);
    opacity: 0.65;
  }
}

@keyframes shimmerSlide {
  0% {
    transform: translateX(-120%) rotate(28deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(120%) rotate(28deg);
    opacity: 0;
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.8),
      0 0 12px 2px rgba(var(--accent-rgb), 0.6),
      0 0 24px 4px rgba(var(--accent-rgb), 0.28);
  }
  50% {
    transform: scale(1.18);
    box-shadow:
      0 0 0 2.5px rgba(255, 255, 255, 0.9),
      0 0 18px 5px rgba(var(--accent-rgb), 0.78),
      0 0 34px 9px rgba(var(--accent-rgb), 0.38);
  }
}

@keyframes dropdownReveal {
  0% {
    opacity: 0;
    transform: translateY(-14px) scale(0.92) perspective(800px) rotateX(-6deg);
    filter: blur(8px);
  }
  65% {
    transform: translateY(2px) scale(1.01) perspective(800px) rotateX(0.5deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) perspective(800px) rotateX(0deg);
  }
}

@keyframes listReveal {
  0% {
    opacity: 0;
    transform: scaleY(0.82);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes progressDrain {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@keyframes islandExpand {
  0% {
    opacity: 0.7;
    transform: translateX(-50%) scaleX(0.88) scaleY(0.7);
    filter: blur(6px);
  }
  55% {
    transform: translateX(-50%) scaleX(1.02) scaleY(1.02);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1) scaleY(1);
    filter: blur(0);
  }
}

@keyframes contentReveal {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   MAIN HEADER CONTAINER
   ============================================ */

.liquid-island-header {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 80px);
  max-width: 1100px;
  height: 56px;
  padding: 0 20px;
  background: var(--header-surface);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--header-border);
  border-radius: 24px;
  box-shadow: var(--header-shadow);
  z-index: 1000;
  overflow: visible;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.45s ease,
    border-radius 0.48s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.48s cubic-bezier(0.4, 0, 0.2, 1);
  animation: headerReveal 0.6s cubic-bezier(0.34, 1.26, 0.64, 1) both;
}

/* Top glass reflection */
.liquid-island-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  right: -50%;
  height: 55%;
  background: var(--header-reflection-top);
  pointer-events: none;
  border-radius: 24px 24px 0 0;
  transition: background 0.3s ease;
}

/* Gradient inner border shine */
.liquid-island-header::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: var(--header-mask-gradient);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.3s ease;
}

/* Island mode overrides */
.liquid-island-header.notification-island-mode {
  padding: 0 !important;
  overflow: visible !important;
  background: var(--header-surface-island) !important;
  border-color: var(--header-border-island) !important;
  box-shadow: var(--header-shadow-island) !important;
}

/* Loading skeleton */
.header-loading {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 80px);
  max-width: 1100px;
  height: 56px;
  background: var(--header-surface);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--header-border);
  border-radius: 24px;
  box-shadow: var(--header-shadow);
  z-index: 1000;
}

/* ============================================
   LAYOUT SECTIONS
   ============================================ */

.header-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.header-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-left img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
  transition:
    filter 0.25s ease,
    transform 0.25s ease;
}

.header-left img:hover {
  filter: drop-shadow(0 4px 10px rgba(var(--accent-rgb), 0.28));
  transform: scale(1.04);
}

.header-center {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  justify-content: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* ============================================
   NAVIGATION
   ============================================ */

.nav-link {
  position: relative;
  color: var(--nav-link-color);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  padding: 6px 4px;
  letter-spacing: -0.012em;
  transition:
    color 0.22s ease,
    text-shadow 0.22s ease;
}

.nav-link:hover {
  color: var(--nav-link-active);
  text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.35);
}

.nav-link.active {
  color: var(--nav-link-active);
  font-weight: 700;
}

.active-tab-indicator {
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2.5px;
  border-radius: 3px;
  background: var(--nav-indicator-bg);
  box-shadow:
    0 0 14px var(--nav-indicator-glow),
    0 0 28px rgba(var(--accent-rgb), 0.22);
}

/* ============================================
   NOTIFICATION BELL
   ============================================ */

.notification-container {
  position: relative;
  display: inline-block;
}

.notification-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--notif-btn-bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.notification-btn:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.notification-btn svg {
  width: 22px;
  height: 22px;
  stroke: var(--notif-bell-stroke);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

.notification-btn:hover svg {
  stroke: var(--accent);
}

/* Bell ring when badge present */
.notification-btn:has(.notification-badge) svg {
  animation: bellRing 3.5s ease-in-out infinite;
  transform-origin: 50% 2px;
}

.notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  border: 2px solid var(--header-surface);
  animation: badgePulse 2.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.65);
  transition: border-color 0.25s ease;
}

/* ============================================
   NOTIFICATION DROPDOWN
   ============================================ */

.notification-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 390px;
  max-height: 500px;
  background: var(--notif-dropdown-bg);
  backdrop-filter: blur(44px) saturate(220%) brightness(1.04);
  -webkit-backdrop-filter: blur(44px) saturate(220%) brightness(1.04);
  border-radius: 22px;
  border: 1px solid var(--notif-dropdown-border);
  box-shadow: var(--notif-dropdown-shadow);
  overflow: hidden;
  z-index: 9999;
  text-align: left;
  transform-origin: top right;
  animation: dropdownReveal 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Top glass sheen */
.notification-dropdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.36) 0%,
    rgba(255, 255, 255, 0.14) 32%,
    rgba(255, 255, 255, 0.04) 65%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: 22px 22px 0 0;
}

[data-theme="dark"] .notification-dropdown::before,
[data-theme="navy"] .notification-dropdown::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 35%,
    rgba(255, 255, 255, 0.01) 65%,
    transparent 100%
  );
}

/* Moving shimmer */
.notification-dropdown::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.08),
    transparent
  );
  animation: shimmerSlide 6s ease-in-out infinite;
  pointer-events: none;
}

[data-theme="dark"] .notification-dropdown::after,
[data-theme="navy"] .notification-dropdown::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03),
    transparent
  );
}

/* ── Header row ── */
.notification-header {
  position: relative;
  padding: 18px 22px;
  border-bottom: 1px solid var(--notif-header-border);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--notif-header-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--notif-header-bg);
  backdrop-filter: blur(20px);
  letter-spacing: -0.012em;
}

/* count pill */
.notification-header::after {
  content: attr(data-count);
  background: linear-gradient(
    135deg,
    var(--accent),
    var(--sys-indigo, #818cf8)
  );
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
  letter-spacing: 0.02em;
}

[data-theme="dark"] .notification-header::after,
[data-theme="navy"] .notification-header::after {
  color: var(--bg-page);
}

.notification-header:not([data-count])::after,
.notification-header[data-count=""]::after {
  display: none;
}

/* ── Scrollable list ── */
.notification-list {
  max-height: 432px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  scroll-behavior: smooth;
  position: relative;
  animation: listReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

/* Scrollbar */
.notification-list::-webkit-scrollbar {
  width: 6px;
}
.notification-list::-webkit-scrollbar-track {
  background: var(--notif-scrolltrack);
  border-radius: 3px;
  margin: 6px 0;
}
.notification-list::-webkit-scrollbar-thumb {
  background: var(--notif-scrollthumb);
  border-radius: 3px;
  transition: background 0.22s ease;
}
.notification-list::-webkit-scrollbar-thumb:hover {
  background: var(--notif-scrollthumb-h);
}

/* ── Empty state ── */
.notification-empty {
  padding: 56px 32px;
  text-align: center;
  color: var(--notif-empty-color);
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.notification-empty::before {
  content: "🔔";
  font-size: 3.2rem;
  display: block;
  margin-bottom: 8px;
  animation: emptyFloat 3s ease-in-out infinite;
  filter: grayscale(60%);
}

/* ── Notification item ── */
.notification-item {
  position: relative;
  padding: 14px 16px;
  margin: 6px 4px;
  border-radius: 16px;
  background: var(--notif-item-bg);
  border: 1px solid var(--notif-item-border);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.36, 0.64, 1),
    background 0.25s ease,
    box-shadow 0.28s ease,
    border-color 0.22s ease;
  cursor: pointer;
  overflow: hidden;
  animation: itemSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--item-index, 0) * 72ms);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .notification-item,
[data-theme="navy"] .notification-item {
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.notification-item:hover {
  transform: translateY(-4px) scale(1.018);
  background: var(--notif-item-bg-hover);
  border-color: rgba(var(--accent-rgb), 0.22);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.1),
    0 5px 14px rgba(0, 0, 0, 0.06),
    0 0 20px rgba(var(--accent-rgb), 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .notification-item:hover,
[data-theme="navy"] .notification-item:hover {
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.45),
    0 5px 14px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(var(--accent-rgb), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Top capsule highlight */
.notification-item::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 10%;
  right: 10%;
  height: 36%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    transparent 100%
  );
  border-radius: 12px 12px 50% 50% / 12px 12px 28% 28%;
  pointer-events: none;
  filter: blur(1px);
}

[data-theme="dark"] .notification-item::after,
[data-theme="navy"] .notification-item::after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 100%
  );
}

/* Read state */
.notification-item.read {
  opacity: 0.58;
  transform: scale(0.985);
}
.notification-item.read:hover {
  opacity: 0.82;
  transform: translateY(-2px) scale(1);
}

/* Unread glowing dot */
.notification-item:not(.read)::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 9px;
  height: 9px;
  background: radial-gradient(
    circle at 35% 35%,
    var(--accent-alt),
    var(--accent)
  );
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.78),
    0 0 12px 2px rgba(var(--accent-rgb), 0.6),
    0 0 24px 4px rgba(var(--accent-rgb), 0.28);
  animation: accentPulse 2.4s ease-in-out infinite;
  z-index: 10;
}

[data-theme="dark"] .notification-item:not(.read)::before,
[data-theme="navy"] .notification-item:not(.read)::before {
  box-shadow:
    0 0 0 2px var(--bg-card),
    0 0 12px 2px rgba(var(--accent-rgb), 0.7),
    0 0 24px 4px rgba(var(--accent-rgb), 0.35);
}

/* Pending accent border */
.notification-item.pending {
  background: linear-gradient(
    145deg,
    rgba(var(--accent-rgb), 0.08),
    rgba(var(--accent-rgb), 0.04)
  );
  border-color: rgba(var(--accent-rgb), 0.22);
}

/* ── Content layout ── */
.notification-content {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  z-index: 1;
}

/* ── Type icons ── */
.notification-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--bg-muted), var(--bg-hover));
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease;
  position: relative;
  overflow: hidden;
  animation: iconBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--item-index, 0) * 55ms + 90ms);
}

.notification-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    transparent 100%
  );
  border-radius: 13px 13px 0 0;
  pointer-events: none;
}

.notification-item:hover .notification-icon {
  transform: scale(1.14) rotate(-7deg) translateY(-2px);
  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Icon colour variants */
.notification-icon.room_invite {
  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
  box-shadow: 0 3px 12px rgba(var(--accent-rgb), 0.32);
}
.notification-icon.team_invite {
  background: linear-gradient(135deg, #34c759, #30d158);
  box-shadow: 0 3px 12px rgba(52, 199, 89, 0.32);
}
.notification-icon.follow {
  background: linear-gradient(135deg, #ff6b9d, #ff375f);
  box-shadow: 0 3px 12px rgba(255, 107, 157, 0.32);
}
.notification-icon.info {
  background: linear-gradient(135deg, #5856d6, #7b79e0);
  box-shadow: 0 3px 12px rgba(88, 86, 214, 0.32);
}
.notification-icon.content_deleted {
  background: linear-gradient(135deg, #ff3b30, #ff6b6b);
  box-shadow: 0 3px 12px rgba(255, 59, 48, 0.32);
}
.notification-icon.grading {
  background: linear-gradient(135deg, #ff9500, #ffcc00);
  box-shadow: 0 3px 12px rgba(255, 149, 0, 0.32);
}
.notification-icon.report {
  background: linear-gradient(135deg, #af52de, #bf5af2);
  box-shadow: 0 3px 12px rgba(175, 82, 222, 0.32);
}
.notification-icon.support {
  background: linear-gradient(135deg, #5ac8fa, #64d2ff);
  box-shadow: 0 3px 12px rgba(90, 200, 250, 0.32);
}
.notification-icon.room_message {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 3px 12px rgba(var(--accent-rgb), 0.32);
}
.notification-icon.room_closed {
  background: linear-gradient(135deg, #636366, #8e8e93);
  box-shadow: 0 3px 12px rgba(99, 99, 102, 0.32);
}

.notification-message {
  margin: 0;
  font-size: 0.875rem;
  color: var(--notif-msg-color);
  line-height: 1.52;
  font-weight: 500;
}

.notification-time {
  margin: 5px 0 0;
  font-size: 0.725rem;
  color: var(--notif-time-color);
  display: flex;
  align-items: center;
  gap: 5px;
}

.notification-time::before {
  content: "";
  width: 3px;
  height: 3px;
  background: var(--notif-time-color);
  border-radius: 50%;
  opacity: 0.6;
}

/* ── Action row ── */
.notification-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-left: 52px;
}

.notification-actions button {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.notification-actions button:active {
  transform: scale(0.96);
}

/* Primary accept variants */
.btn-accept {
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.92),
    rgba(var(--accent-rgb), 0.7)
  );
  border: none;
  box-shadow:
    0 2px 10px rgba(var(--accent-rgb), 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-accept:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  transform: translateY(-1px);
  box-shadow:
    0 5px 16px rgba(var(--accent-rgb), 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .btn-accept,
[data-theme="navy"] .btn-accept {
  color: var(--bg-page);
}

.btn-accept-team {
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(52, 199, 89, 0.9),
    rgba(48, 209, 88, 0.7)
  );
  border: none;
  box-shadow:
    0 2px 10px rgba(52, 199, 89, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-accept-team:hover {
  background: linear-gradient(135deg, #34c759, #28a745);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(52, 199, 89, 0.38);
}

.btn-accept-pink {
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(255, 107, 157, 0.9),
    rgba(255, 55, 95, 0.75)
  );
  border: none;
  box-shadow:
    0 2px 10px rgba(255, 107, 157, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-accept-pink:hover {
  background: linear-gradient(135deg, #ff6b9d, #ff375f);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(255, 107, 157, 0.38);
}

/* Secondary / reject */
.btn-reject {
  color: #ff3b30;
  background: rgba(255, 59, 48, 0.08);
  border: 1px solid rgba(255, 59, 48, 0.28);
}
.btn-reject:hover {
  background: rgba(255, 59, 48, 0.16);
  border-color: rgba(255, 59, 48, 0.48);
  transform: translateY(-1px);
}

.btn-reject-gray {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.28);
}
.btn-reject-gray:hover {
  background: rgba(220, 53, 69, 0.16);
  border-color: rgba(220, 53, 69, 0.48);
  transform: translateY(-1px);
}

.btn-dismiss {
  color: var(--text-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border-light);
}
.btn-dismiss:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* ── Status badges ── */
.status-badge {
  margin-top: 9px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(8px);
}

.status-badge.accepted {
  background: rgba(52, 199, 89, 0.12);
  color: #30d158;
  border: 1px solid rgba(52, 199, 89, 0.22);
}

[data-theme="dark"] .status-badge.accepted,
[data-theme="navy"] .status-badge.accepted {
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.22);
}

.status-badge.rejected {
  background: rgba(255, 59, 48, 0.12);
  color: #ff453a;
  border: 1px solid rgba(255, 59, 48, 0.22);
}

[data-theme="dark"] .status-badge.rejected,
[data-theme="navy"] .status-badge.rejected {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.22);
}

/* View details */
.btn-view-details {
  margin-top: 11px;
  padding: 7px 13px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.22s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(8px);
}

.btn-view-details:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.32);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.12);
}

/* ============================================
   HEADER BUTTONS — LOGOUT, ADMIN, PROFILE
   ============================================ */

.logout-btn {
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--logout-color);
  background: var(--logout-bg);
  border: 1px solid var(--logout-border);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
}

.logout-btn:hover {
  background: var(--logout-bg-hover);
  color: var(--logout-color-hover);
  border-color: var(--logout-bg-hover);
  box-shadow: 0 4px 14px rgba(255, 59, 48, 0.28);
  transform: translateY(-1px);
}

.admin-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff;
  background: var(--admin-btn-bg);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  box-shadow:
    0 4px 16px rgba(var(--accent-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .admin-btn,
[data-theme="navy"] .admin-btn {
  color: var(--bg-page);
}

.admin-btn:hover {
  filter: brightness(1.1);
  transform: scale(1.04) translateY(-1px);
  box-shadow:
    0 6px 22px rgba(var(--accent-rgb), 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.admin-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 2px solid transparent;
}

.profile-btn.avatar {
  background: transparent;
  border-color: rgba(var(--accent-rgb), 0.22);
}

.profile-btn.avatar:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.profile-btn.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-btn.icon {
  background: var(--profile-btn-bg);
  border-color: rgba(var(--accent-rgb), 0.12);
}

.profile-btn.icon:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.32);
}

.profile-btn.icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--profile-btn-stroke);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.18s ease;
}

.profile-btn.icon:hover svg {
  stroke: #fff;
}

[data-theme="dark"] .profile-btn.icon:hover svg,
[data-theme="navy"] .profile-btn.icon:hover svg {
  stroke: var(--bg-page);
}

/* ============================================
   ADMIN TRANSITION OVERLAY
   ============================================ */

.admin-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--accent);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
}

[data-theme="dark"] .admin-transition-overlay,
[data-theme="navy"] .admin-transition-overlay {
  color: var(--bg-page);
}

.admin-transition-title {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.admin-transition-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.55);
  margin-top: 22px;
  border-radius: 2px;
  overflow: hidden;
}

/* ============================================
   DELETED CONTENT MODAL
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-container {
  background: var(--modal-bg);
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  max-height: 84vh;
  overflow: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--modal-border-color);
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #ff3b30, #ff6b6b);
  border-bottom: 1px solid var(--modal-border-color);
  border-radius: 20px 20px 0 0;
}

.modal-header-icon {
  font-size: 22px;
}

.modal-header-title {
  margin: 0;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  flex: 1;
  letter-spacing: -0.012em;
}

.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

.modal-content {
  padding: 24px;
}

.content-type-badge {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #ff3b30, #ff6b6b);
  color: #fff;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 18px;
  letter-spacing: 0.06em;
}

.modal-section {
  margin-bottom: 18px;
}

.modal-section-label {
  display: block;
  font-size: 0.72rem;
  color: var(--modal-label-color);
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.modal-reason-box {
  padding: 12px 16px;
  background: var(--modal-reason-bg);
  border-radius: 10px;
  border-left: 4px solid #ff3b30;
  color: var(--modal-text-color);
  font-size: 0.9rem;
  line-height: 1.55;
}

.modal-content-text {
  padding: 14px 16px;
  background: var(--modal-content-bg-box);
  border-radius: 10px;
  border: 1px solid var(--modal-content-border);
  color: var(--modal-text-color);
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow: auto;
}

.modal-admin-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--modal-admin-bg);
  border-radius: 10px;
  margin-bottom: 16px;
  border: 1px solid var(--modal-border-color);
}

.modal-admin-icon {
  font-size: 15px;
}
.modal-admin-label {
  font-size: 0.75rem;
  color: var(--modal-label-color);
  font-weight: 600;
}
.modal-admin-name {
  font-size: 0.88rem;
  color: var(--modal-text-color);
  font-weight: 600;
}
.modal-admin-class {
  color: var(--modal-label-color);
  font-size: 0.78rem;
  margin-left: 4px;
}

.modal-timestamp {
  font-size: 0.78rem;
  color: var(--modal-timestamp-color);
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid var(--modal-timestamp-border);
}

.modal-close-action {
  margin-top: 18px;
  width: 100%;
  padding: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-inverse, #fff);
  background: var(--accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.28);
}

[data-theme="dark"] .modal-close-action,
[data-theme="navy"] .modal-close-action {
  color: var(--bg-page);
}

.modal-close-action:hover {
  background: var(--accent-dark);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.38);
  transform: translateY(-1px);
}

/* ============================================
   NOTIFICATION ISLAND (Dynamic Island)
   ============================================ */

.notification-island-mode {
  overflow: visible !important;
}

.notification-island-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
  z-index: 10;
  animation: contentReveal 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

/* ── Island header row ── */
.island-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.island-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--island-icon-default-bg);
  border-radius: 13px;
  box-shadow: var(--island-icon-shadow);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* Glass highlight on island icon */
.island-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 100%
  );
  border-radius: 13px 13px 0 0;
  pointer-events: none;
}

/* Type icon colours */
.island-icon.room_invite {
  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
}
.island-icon.team_invite {
  background: linear-gradient(135deg, #34c759, #30d158);
}
.island-icon.follow {
  background: linear-gradient(135deg, #ff6b9d, #ff8fab);
}
.island-icon.info {
  background: linear-gradient(135deg, #5856d6, #7b79e0);
}
.island-icon.content_deleted {
  background: linear-gradient(135deg, #ff3b30, #ff6b6b);
}
.island-icon.grading {
  background: linear-gradient(135deg, #ff9500, #ffcc00);
}
.island-icon.report {
  background: linear-gradient(135deg, #af52de, #bf5af2);
}
.island-icon.support {
  background: linear-gradient(135deg, #5ac8fa, #64d2ff);
}
.island-icon.room_message {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}
.island-icon.room_closed {
  background: linear-gradient(135deg, #636366, #8e8e93);
}

.island-title-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.island-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--island-badge-color);
  background: var(--island-badge-bg);
  padding: 2px 8px;
  border-radius: 9px;
  width: fit-content;
}

.island-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--island-msg-color);
  letter-spacing: -0.016em;
}

.island-close-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--island-close-bg);
  border: none;
  border-radius: 50%;
  font-size: 18px;
  color: var(--island-close-color);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.island-close-btn:hover {
  background: rgba(255, 59, 48, 0.14);
  color: #ff3b30;
}

/* ── Message box ── */
.island-message-container {
  background: var(--island-msg-bg);
  border-radius: 13px;
  padding: 13px 15px;
  margin-bottom: 14px;
  border: 1px solid var(--island-msg-border);
}

.island-message {
  margin: 0 0 7px 0;
  font-size: 0.92rem;
  line-height: 1.52;
  color: var(--island-msg-color);
  font-weight: 500;
}

.island-time {
  font-size: 0.72rem;
  color: var(--island-time-color);
  font-weight: 500;
}

/* ── Action buttons ── */
.island-actions {
  display: flex;
  gap: 9px;
}

.island-btn {
  flex: 1;
  padding: 11px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  backdrop-filter: blur(8px);
}

.island-btn:active {
  transform: scale(0.95);
}

.island-btn-accept {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow:
    0 4px 16px rgba(var(--accent-rgb), 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.island-btn-accept:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 22px rgba(var(--accent-rgb), 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .island-btn-accept,
[data-theme="navy"] .island-btn-accept {
  color: var(--bg-page);
}

.island-btn-accept.team {
  background: linear-gradient(135deg, #34c759, #248a3d);
  box-shadow:
    0 4px 16px rgba(52, 199, 89, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.island-btn-accept.team:hover {
  box-shadow: 0 6px 22px rgba(52, 199, 89, 0.48);
}

.island-btn-accept.follow {
  background: linear-gradient(135deg, #ff6b9d, #ff5a8c);
  box-shadow:
    0 4px 16px rgba(255, 107, 157, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.island-btn-accept.follow:hover {
  box-shadow: 0 6px 22px rgba(255, 107, 157, 0.48);
}

.island-btn-reject {
  background: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
  border: 1px solid rgba(255, 59, 48, 0.3);
}
.island-btn-reject:hover {
  background: rgba(255, 59, 48, 0.18);
  transform: translateY(-1px);
}

.island-btn-dismiss {
  background: var(--bg-muted);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}
.island-btn-dismiss:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.island-btn-primary {
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.12),
    rgba(var(--accent-rgb), 0.08)
  );
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}
.island-btn-primary:hover {
  background: rgba(var(--accent-rgb), 0.18);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.16);
}

/* ── Progress drain bar ── */
.island-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--island-progress-bg);
  border-radius: 0 0 32px 32px;
  transform-origin: left;
  opacity: 0.65;
  animation: progressDrain 30s linear forwards;
}

/* ============================================
   BUG FIX: Nav link color — CSS variables win.
   whileHover inline color removed from JSX.
   ============================================ */

.nav-link {
  color: var(--nav-link-color) !important;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--nav-link-active) !important;
  text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.35);
}

.nav-link.active {
  color: var(--nav-link-active) !important;
}

/* ============================================
   DESKTOP RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .header-center {
    gap: 12px;
  }
  .nav-link {
    font-size: 0.82rem;
  }
}

@media (min-width: 768px) and (max-width: 960px) {
  .liquid-island-header {
    width: calc(100% - 40px);
    height: 52px;
    padding: 0 14px;
    top: 10px;
  }
  .header-center {
    gap: 10px;
  }
  .nav-link {
    font-size: 0.8rem;
  }
}

/* ============================================
   MOBILE / DESKTOP VISIBILITY SPLIT
   ============================================ */

@media (max-width: 767px) {
  .desktop-header {
    display: none !important;
  }
  .header-loading {
    display: none;
  }
}

@media (min-width: 768px) {
  .mobile-top-bar,
  .mobile-bottom-nav-wrapper,
  .mobile-notif-toast,
  .mobile-sheet-backdrop,
  .mobile-sheet {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE: NOTIFICATION TOAST
   Slides in below the top bar when a real-time notification arrives
════════════════════════════════════════════════════════════════════ */

.mobile-notif-toast {
  position: fixed;
  top: 74px;
  left: 10px;
  right: 10px;
  z-index: 1200;
  background: var(--header-surface-island);
  backdrop-filter: blur(36px) saturate(210%);
  -webkit-backdrop-filter: blur(36px) saturate(210%);
  border: 1px solid var(--header-border-island);
  border-radius: 22px;
  box-shadow: var(--header-shadow-island);
  padding: 16px 18px 18px;
  overflow: hidden;
}

.mobile-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--island-progress-bg);
  border-radius: 0 0 22px 22px;
  transform-origin: left;
  opacity: 0.65;
}

.mobile-toast-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.mobile-toast-title-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-toast-new {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--island-msg-color);
  letter-spacing: -0.014em;
}

.mobile-toast-message {
  font-size: 0.875rem;
  color: var(--island-msg-color);
  line-height: 1.5;
  margin: 0 0 14px;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE: TOP BAR
   Floating frosted-glass pill, fixed at top. Logo + actions.
════════════════════════════════════════════════════════════════════ */

.mobile-top-bar {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 54px;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  background: var(--header-surface);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--header-border);
  border-radius: 22px;
  box-shadow: var(--header-shadow);
  overflow: visible;
}

/* Highlight sheen on top edge */
.mobile-top-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46%;
  background: var(--header-reflection-top);
  border-radius: 22px 22px 0 0;
  pointer-events: none;
  z-index: 0;
}

.mobile-logo-link {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.mobile-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.14));
}

.mobile-top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}

/* ── Shared base for all top-bar icon buttons ── */
.mobile-top-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease;
  overflow: visible;
}

.mobile-top-btn:active {
  background: rgba(var(--accent-rgb), 0.1);
  transform: scale(0.91);
}

/* Bell icon */
.mobile-notif-btn svg {
  width: 22px;
  height: 22px;
  stroke: var(--notif-bell-stroke);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: bellRing 3.5s ease-in-out infinite;
  transform-origin: 50% 2px;
}

/* Red badge on bell */
.mobile-notif-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff3b30;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 9px;
  border: 2px solid var(--header-surface);
  line-height: 1;
  animation: badgePulse 2.2s ease-in-out infinite;
}

/* Profile avatar/icon button */
.mobile-profile-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--profile-btn-stroke);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

.mobile-profile-btn img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid rgba(var(--accent-rgb), 0.25);
}

/* Logout icon button (always visible in top bar on mobile) */
.mobile-logout-icon-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--logout-color, #e53935);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.mobile-logout-icon-btn:active svg {
  opacity: 1;
}

/* Admin pill in top bar */
.mobile-admin-pill {
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: var(--admin-btn-bg);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(var(--accent-rgb), 0.32);
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .mobile-admin-pill,
[data-theme="navy"] .mobile-admin-pill {
  color: var(--bg-page);
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE: TOP-BAR SHORTCUT ICONS (Map + About lifted from bottom nav)
   Sits between the logo and the right-side actions.
   Mirrors the bottom-nav pill's bubble/icon/dot system at smaller scale.
════════════════════════════════════════════════════════════════════ */

.mobile-top-shortcuts {
  display: flex;
  align-items: center;
  gap: 0;
  /* Push the shortcuts toward center of the bar */
  flex: 1;
  justify-content: center;
}

.mobile-shortcut-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Icon wrapper — same structure as .mobile-nav-icon-wrap */
.mobile-shortcut-inner {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 19px;
  flex-shrink: 0;
}

/* Active color bubble */
.mobile-shortcut-bubble {
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

/* The icon itself */
.mobile-shortcut-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  color: var(--nav-link-color);
  opacity: 0.52;
  transition:
    color 0.22s ease,
    filter 0.22s ease,
    opacity 0.22s ease;
  flex-shrink: 0;
}

.mobile-shortcut-icon.active {
  opacity: 1;
}

.mobile-shortcut-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  overflow: visible;
}

/* Tiny glowing pip below icon when active */
.mobile-shortcut-dot {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  z-index: 3;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE: BOTTOM NAV
   Now 5 pages (Map, About, Tournaments moved to top bar), icon-only, single floating pill.
   Each tab has a unique vibrant color injected via inline style from JSX.
════════════════════════════════════════════════════════════════════ */

.mobile-bottom-nav-wrapper {
  position: fixed;
  bottom: 14px;
  /* Edge-to-edge with 10px breathing room on each side.
     This replaces the broken left:50%+translateX(-50%) centering
     that caused the pill to be clipped by the viewport on phones ≤ 390px. */
  left: 10px;
  right: 10px;
  z-index: 1100;
}

.mobile-bottom-nav {
  display: flex;
  align-items: center;
  /* NO fixed width — pill fills the wrapper (screen minus 20px margins).
     Items use flex:1 so all 8 always share the space equally. */
  width: 100%;
  padding: 6px 4px;
  background: var(--header-surface);
  backdrop-filter: blur(36px) saturate(210%);
  -webkit-backdrop-filter: blur(36px) saturate(210%);
  border: 1px solid var(--header-border);
  border-radius: 28px;
  box-shadow:
    var(--header-shadow),
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: visible;
  gap: 0;
  box-sizing: border-box;
}

/* Sheen on top edge of pill */
.mobile-bottom-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44%;
  background: var(--header-reflection-top);
  border-radius: 28px 28px 0 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Individual nav item ── */
.mobile-nav-item {
  /* flex:1 is the key fix — every item takes an equal share of the pill width */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 0; /* allow flex to shrink below content size */
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  border-radius: 22px;
  transition: background 0.18s ease;
}

.mobile-nav-item:active .mobile-nav-icon-wrap {
  transform: scale(0.82) !important;
}

/* Icon wrapper — houses bubble + icon + dot */
.mobile-nav-icon-wrap {
  position: relative;
  /* Slightly smaller than before so it never overflows narrow items */
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 19px;
  flex-shrink: 0;
  /* transition delegated to framer-motion */
}

/* Animated color bubble (per-tab color injected from JSX) */
.mobile-nav-bubble {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  /* background + box-shadow injected inline via JSX */
}

/* Icon itself */
.mobile-nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  color: var(--nav-link-color);
  transition:
    color 0.22s ease,
    filter 0.22s ease;
  flex-shrink: 0;
}

.mobile-nav-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  /* stroke-width defined per-icon in JSX */
  overflow: visible;
}

/* Active state — color injected inline from JSX, filter too */
.mobile-nav-icon.active {
  /* color + filter set via JSX inline style */
}

/* Inactive icon slightly muted */
.mobile-nav-icon:not(.active) {
  opacity: 0.5;
}

/* Active dot — tiny glowing pip at bottom of icon */
.mobile-nav-active-dot {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  z-index: 3;
  /* background + box-shadow injected inline from JSX */
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE: SHEET (notification panel + any sheet)
════════════════════════════════════════════════════════════════════ */

.mobile-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1200;
}

.mobile-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1300;
  background: var(--header-surface-island);
  backdrop-filter: blur(48px) saturate(230%);
  -webkit-backdrop-filter: blur(48px) saturate(230%);
  border: 1px solid var(--header-border-island);
  border-radius: 30px 30px 0 0;
  box-shadow:
    0 -20px 70px rgba(0, 0, 0, 0.24),
    0 -4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 0 0 env(safe-area-inset-bottom, 20px);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Sheet sheen */
.mobile-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: var(--header-reflection-top);
  border-radius: 30px 30px 0 0;
  pointer-events: none;
}

/* Handle pill */
.mobile-sheet-handle {
  width: 38px;
  height: 4px;
  background: rgba(var(--accent-rgb), 0.22);
  border-radius: 2px;
  margin: 14px auto 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Sheet header row */
.mobile-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.mobile-sheet-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--notif-header-color);
  letter-spacing: -0.024em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-notif-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  background: linear-gradient(
    135deg,
    var(--accent),
    var(--accent-alt, var(--accent))
  );
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 10px;
  min-width: 22px;
  letter-spacing: 0.02em;
}

[data-theme="dark"] .mobile-notif-count-pill,
[data-theme="navy"] .mobile-notif-count-pill {
  color: var(--bg-page);
}

/* Sheet close button */
.mobile-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--island-close-bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--island-close-color);
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-sheet-close:active {
  background: rgba(255, 59, 48, 0.14);
  color: #ff3b30;
  transform: scale(0.88);
}

.mobile-sheet-close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
}

/* Notification sheet scroll area */
.mobile-notif-sheet {
  max-height: 88vh;
}

.mobile-notif-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 12px 28px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  z-index: 1;
}

.mobile-notif-scroll .notification-list {
  max-height: none;
  overflow: visible;
  padding: 0;
  animation: none;
}

/* ════════════════════════════════════════════════════════════════════
   SAFE AREA — iPhone notch + home indicator
════════════════════════════════════════════════════════════════════ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav-wrapper {
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .mobile-top-bar {
    top: calc(10px + env(safe-area-inset-top));
  }
}

/* ════════════════════════════════════════════════════════════════════
   NARROW PHONES (≤ 380px, e.g. iPhone SE)
   Reduce icon size slightly so all 8 fit comfortably
════════════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .mobile-nav-item {
    height: 44px;
  }
  .mobile-nav-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 16px;
  }
  .mobile-nav-icon,
  .mobile-nav-icon svg {
    width: 20px;
    height: 20px;
  }
  .mobile-bottom-nav {
    padding: 4px 2px;
    border-radius: 24px;
  }
  .mobile-top-bar {
    padding: 0 8px 0 12px;
    height: 50px;
  }
  .mobile-logo {
    width: 42px;
    height: 42px;
  }
  .mobile-top-btn {
    width: 34px;
    height: 34px;
  }
}
/* ============================================
   FOOTER — LIQUID GLASS MULTI-THEME
   Light / Dark / Navy × Accent Color System
   v2 — font-color lag fixed, accent controller
   ============================================ */

/* ──────────────────────────────────────────
   THEME TOKENS
   All text values are explicit per-mode so
   they NEVER inherit a stale computed colour.
   ────────────────────────────────────────── */

:root,
[data-theme="light"] {
  /* surfaces */
  --footer-surface: rgba(255, 255, 255, 0.68);
  --footer-border-top: rgba(148, 163, 184, 0.22);
  --footer-shadow:
    0 -6px 32px rgba(0, 0, 0, 0.06), 0 -1px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --footer-reflection: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.48) 0%,
    rgba(255, 255, 255, 0.16) 48%,
    transparent 100%
  );
  --footer-shimmer: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05),
    transparent
  );

  /* ── TEXT — explicit, never "white" in light mode ── */
  --footer-brand-title: var(--accent, #5b8def); /* gradient clipped  */
  --footer-brand-body: #475569;
  --footer-link-idle: #475569;
  --footer-link-hover: var(--accent, #5b8def);
  --footer-bottom-text: #64748b;
  --footer-bottom-border: rgba(0, 0, 0, 0.09);
  --footer-kdev: var(--accent, #5b8def);
  --footer-tagline: #94a3b8;
  --footer-label-color: #64748b;
  --footer-control-label: #94a3b8;

  /* buttons */
  --footer-btn-bg: rgba(255, 255, 255, 0.65);
  --footer-btn-border: rgba(148, 163, 184, 0.3);
  --footer-btn-text: #334155; /* explicit dark text */
  --footer-btn-bg-hover: rgba(255, 255, 255, 0.92);
  --footer-btn-border-hover: rgba(var(--accent-rgb, 91 141 239), 0.4);
  --footer-btn-text-hover: var(--accent, #5b8def);
  --footer-btn-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.55);

  /* mode switcher */
  --footer-track-bg: rgba(0, 0, 0, 0.055);
  --footer-track-border: rgba(0, 0, 0, 0.08);
  --footer-mode-idle: #64748b; /* explicit */
  --footer-mode-active-bg: var(--accent, #5b8def);
  --footer-mode-active-text: #ffffff;

  /* swatch */
  --footer-swatch-border: rgba(0, 0, 0, 0.12);
  --footer-swatch-ring: rgba(var(--accent-rgb, 91 141 239), 0.55);

  /* overlay */
  --footer-overlay-bg: linear-gradient(
    135deg,
    var(--accent-dark, #3b72d9),
    var(--accent, #5b8def)
  );
  --footer-overlay-text: #ffffff;

  /* glow */
  --footer-glow-color: rgba(var(--accent-rgb, 91 141 239), 0.14);
}

[data-theme="dark"] {
  --footer-surface: rgba(15, 23, 42, 0.84);
  --footer-border-top: rgba(255, 255, 255, 0.07);
  --footer-shadow:
    0 -6px 32px rgba(0, 0, 0, 0.44), 0 -1px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --footer-reflection: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.065) 0%,
    rgba(255, 255, 255, 0.018) 48%,
    transparent 100%
  );
  --footer-shimmer: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.018),
    transparent
  );

  --footer-brand-body: #94a3b8;
  --footer-link-idle: #94a3b8;
  --footer-link-hover: var(--accent, #93c5fd);
  --footer-bottom-text: #64748b;
  --footer-bottom-border: rgba(255, 255, 255, 0.07);
  --footer-kdev: var(--accent, #93c5fd);
  --footer-tagline: #475569;
  --footer-label-color: #64748b;
  --footer-control-label: #475569;

  --footer-btn-bg: rgba(30, 41, 59, 0.75);
  --footer-btn-border: rgba(255, 255, 255, 0.09);
  --footer-btn-text: #cbd5e1;
  --footer-btn-bg-hover: rgba(40, 55, 80, 0.95);
  --footer-btn-border-hover: rgba(var(--accent-rgb, 147 197 253), 0.38);
  --footer-btn-text-hover: var(--accent, #93c5fd);
  --footer-btn-shadow:
    0 2px 8px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --footer-track-bg: rgba(255, 255, 255, 0.07);
  --footer-track-border: rgba(255, 255, 255, 0.09);
  --footer-mode-idle: #94a3b8;
  --footer-mode-active-bg: var(--accent, #93c5fd);
  --footer-mode-active-text: #0f172a;

  --footer-swatch-border: rgba(255, 255, 255, 0.12);
  --footer-swatch-ring: rgba(var(--accent-rgb, 147 197 253), 0.55);

  --footer-overlay-bg: linear-gradient(
    135deg,
    #0f172a,
    var(--accent-light, #1e3a5f)
  );
  --footer-overlay-text: #e2e8f0;

  --footer-glow-color: rgba(var(--accent-rgb, 147 197 253), 0.1);
}

[data-theme="navy"] {
  --footer-surface: rgba(6, 13, 31, 0.88);
  --footer-border-top: rgba(255, 255, 255, 0.06);
  --footer-shadow:
    0 -6px 32px rgba(0, 0, 10, 0.58), 0 -1px 8px rgba(0, 0, 10, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --footer-reflection: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.012) 48%,
    transparent 100%
  );
  --footer-shimmer: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.028),
    rgba(255, 255, 255, 0.012),
    transparent
  );

  --footer-brand-body: #7a90ad;
  --footer-link-idle: #7a90ad;
  --footer-link-hover: var(--accent, #93c5fd);
  --footer-bottom-text: #3d5277;
  --footer-bottom-border: rgba(255, 255, 255, 0.06);
  --footer-kdev: var(--accent, #93c5fd);
  --footer-tagline: #2d4263;
  --footer-label-color: #3d5277;
  --footer-control-label: #3d5277;

  --footer-btn-bg: rgba(13, 27, 53, 0.78);
  --footer-btn-border: rgba(255, 255, 255, 0.07);
  --footer-btn-text: #b8c6dc;
  --footer-btn-bg-hover: rgba(22, 44, 88, 0.95);
  --footer-btn-border-hover: rgba(var(--accent-rgb, 147 197 253), 0.34);
  --footer-btn-text-hover: var(--accent, #93c5fd);
  --footer-btn-shadow:
    0 2px 8px rgba(0, 0, 10, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.03);

  --footer-track-bg: rgba(255, 255, 255, 0.055);
  --footer-track-border: rgba(255, 255, 255, 0.07);
  --footer-mode-idle: #7a90ad;
  --footer-mode-active-bg: var(--accent, #93c5fd);
  --footer-mode-active-text: #060d1f;

  --footer-swatch-border: rgba(255, 255, 255, 0.1);
  --footer-swatch-ring: rgba(var(--accent-rgb, 147 197 253), 0.5);

  --footer-overlay-bg: linear-gradient(
    135deg,
    #060d1f,
    var(--accent-light, #0d2347)
  );
  --footer-overlay-text: #e8edf5;

  --footer-glow-color: rgba(var(--accent-rgb, 147 197 253), 0.08);
}

/* ──────────────────────────────────────────
   KEYFRAMES
   ────────────────────────────────────────── */

@keyframes footerShimmer {
  0% {
    transform: translateX(-130%) rotate(24deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translateX(130%) rotate(24deg);
    opacity: 0;
  }
}

@keyframes footerReveal {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes linkFadeIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes swatchIn {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes footerGlow {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
}

/* ──────────────────────────────────────────
   FOOTER SHELL
   ────────────────────────────────────────── */

.footer-creative {
  position: relative;
  overflow: hidden;
  background: var(--footer-surface);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-top: 1px solid var(--footer-border-top);
  box-shadow: var(--footer-shadow);
  padding: 60px 24px 32px;
  margin-top: auto;

  /* ensure every text in the footer uses the correct token */
  color: var(--footer-brand-body);

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;

  animation: footerReveal 0.65s cubic-bezier(0.34, 1.12, 0.64, 1) both;
  contain: paint;
}

/* Top glass highlight */
.footer-creative::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: var(--footer-reflection);
  pointer-events: none;
  transition: background 0.3s ease;
  z-index: 0;
}

/* Diagonal shimmer sweep */
.footer-creative::after {
  content: "";
  position: absolute;
  top: -55%;
  left: -65%;
  width: 230%;
  height: 210%;
  background: var(--footer-shimmer);
  animation: footerShimmer 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Ambient accent glow at top-center */
.footer-glow {
  position: absolute;
  top: -72px;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  height: 160px;
  background: radial-gradient(
    ellipse at center,
    var(--footer-glow-color) 0%,
    transparent 72%
  );
  pointer-events: none;
  animation: footerGlow 5.5s ease-in-out infinite;
  z-index: 0;
  transition: background 0.3s ease;
}

/* ──────────────────────────────────────────
   MAIN GRID
   ────────────────────────────────────────── */

.footer-content {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto 52px;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.25fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 960px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 600px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
    margin-bottom: 40px;
  }
}

/* ── Brand ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-brand h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.2;
  /* gradient title — always visible because it's background-clip */
  background: linear-gradient(
    110deg,
    var(--accent, #5b8def),
    var(--accent-alt, var(--accent, #93c5fd))
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: background 0.3s ease;
}

.footer-brand p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.68;
  /* explicit token — never inherits "white" */
  color: var(--footer-brand-body);
  transition: color 0.3s ease;
}

/* ── Nav links ── */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-links span {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  width: fit-content;
  padding: 3px 0;
  position: relative;
  /* explicit token */
  color: var(--footer-link-idle);
  transition:
    color 0.22s ease,
    transform 0.24s cubic-bezier(0.34, 1.36, 0.64, 1);
  animation: linkFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.footer-links span:nth-child(1) {
  animation-delay: 0.05s;
}
.footer-links span:nth-child(2) {
  animation-delay: 0.1s;
}
.footer-links span:nth-child(3) {
  animation-delay: 0.15s;
}
.footer-links span:nth-child(4) {
  animation-delay: 0.2s;
}
.footer-links span:nth-child(5) {
  animation-delay: 0.25s;
}

/* underline sweep */
.footer-links span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 0;
  border-radius: 2px;
  background: var(--footer-link-hover);
  transition: width 0.22s ease;
}

.footer-links span:hover {
  color: var(--footer-link-hover);
  transform: translateX(var(--footer-hover-offset, 5px));
}

.footer-links span:hover::after {
  width: 100%;
}

@media (max-width: 600px) {
  .footer-links {
    align-items: center;
  }
  .footer-links span:hover {
    transform: translateY(-2px);
  }
}

/* ── Actions column ── */
.footer-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 600px) {
  .footer-actions {
    align-items: center;
  }
}

/* ──────────────────────────────────────────
   LANGUAGE BUTTON
   ────────────────────────────────────────── */

.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--footer-btn-bg);
  border: 1px solid var(--footer-btn-border);
  /* ★ always explicit color — the root fix for the "white lag" bug */
  color: var(--footer-btn-text) !important;
  padding: 8px 16px;
  border-radius: 22px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  width: fit-content;
  backdrop-filter: blur(12px);
  box-shadow: var(--footer-btn-shadow);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s ease;
}

.footer-btn:hover {
  background: var(--footer-btn-bg-hover);
  border-color: var(--footer-btn-border-hover);
  color: var(--footer-btn-text-hover) !important;
  transform: translateY(-2px);
  box-shadow:
    var(--footer-btn-shadow),
    0 4px 16px rgba(var(--accent-rgb, 91 141 239), 0.16);
}

.footer-btn svg {
  flex-shrink: 0;
}

/* ──────────────────────────────────────────
   CONTROL GROUP (label + control)
   ────────────────────────────────────────── */

.footer-control-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-control-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* explicit token */
  color: var(--footer-control-label);
  transition: color 0.3s ease;
}

/* ──────────────────────────────────────────
   MODE SWITCHER  (Light / Navy / Dark)
   ────────────────────────────────────────── */

.footer-mode-switcher {
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 4px;
  gap: 2px;
  border-radius: 22px;
  background: var(--footer-track-bg);
  border: 1px solid var(--footer-track-border);
  backdrop-filter: blur(10px);
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

.footer-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  border-radius: 18px;
  font-size: 0.775rem;
  font-weight: 600;
  cursor: pointer;
  /* always use explicit idle color */
  color: var(--footer-mode-idle);
  background: transparent;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
  user-select: none;
}

.footer-mode-btn.active {
  background: var(--footer-mode-active-bg);
  /* explicitly set — no inherited "white" risk */
  color: var(--footer-mode-active-text) !important;
  box-shadow:
    0 3px 10px rgba(var(--accent-rgb, 91 141 239), 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.footer-mode-btn:not(.active):hover {
  background: rgba(var(--accent-rgb, 91 141 239), 0.08);
  color: var(--accent, #5b8def);
}

@media (max-width: 420px) {
  .footer-mode-btn span {
    display: none;
  }
  .footer-mode-btn {
    padding: 7px 10px;
  }
}

/* ──────────────────────────────────────────
   ACCENT COLOUR SWATCHES
   ────────────────────────────────────────── */

.footer-accent-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 600px) {
  .footer-accent-grid {
    justify-content: center;
  }
}

.footer-swatch {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--footer-swatch-border);
  cursor: pointer;
  /* colour driven by CSS variable set inline from React */
  background: var(--swatch-color);
  flex-shrink: 0;
  animation: swatchIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition:
    transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    border-color 0.18s ease;
}

/* Glass highlight on swatch */
.footer-swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.38) 0%,
    transparent 58%
  );
  pointer-events: none;
}

/* Active checkmark */
.footer-swatch::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.footer-swatch:hover {
  transform: scale(1.22) translateY(-2px);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.footer-swatch.active {
  transform: scale(1.18);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 0 3px var(--footer-swatch-ring),
    0 6px 18px rgba(0, 0, 0, 0.2);
}

.footer-swatch.active::after {
  opacity: 1;
}

/* ──────────────────────────────────────────
   INNER DIVIDER
   ────────────────────────────────────────── */

.footer-inner-divider {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--footer-border-top),
    transparent
  );
  transition: background 0.3s ease;
}

/* ──────────────────────────────────────────
   BOTTOM BAR
   ────────────────────────────────────────── */

.footer-bottom {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
  padding-top: 28px;
  margin-top: 36px;
  border-top: 1px solid var(--footer-bottom-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.3s ease;
}

/* ★ Explicit text colour on EVERY paragraph — root fix for the lag */
.footer-bottom p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--footer-bottom-text);
  transition: color 0.3s ease;
}

.k-dev {
  font-weight: 700;
  color: var(--footer-kdev);
  transition: color 0.3s ease;
}

.footer-tagline {
  font-style: italic;
  font-size: 0.78rem;
  color: var(--footer-tagline);
  opacity: 0.8;
  transition: color 0.3s ease;
}

/* ──────────────────────────────────────────
   NAVIGATION TRANSITION OVERLAY
   ────────────────────────────────────────── */

.footer-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--footer-overlay-bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-overlay-text);
}

.footer-transition-overlay h2 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.028em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.18);
  color: inherit; /* inherit from overlay */
}

/* ──────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────── */

@media (max-width: 960px) {
  .footer-creative {
    padding: 50px 20px 28px;
  }
}

@media (max-width: 600px) {
  .footer-creative {
    padding: 42px 16px 24px;
  }
  .footer-brand h3 {
    font-size: 1.25rem;
  }
  .footer-mode-switcher {
    align-self: center;
  }
  .footer-bottom {
    padding-top: 20px;
    margin-top: 28px;
  }
}

@media (max-width: 380px) {
  .footer-swatch {
    width: 22px;
    height: 22px;
  }
  .footer-accent-grid {
    gap: 6px;
  }
}

/* ── Hide footer on mobile for non-home pages ── */
@media (max-width: 767px) {
  .footer-hide-mobile {
    display: none;
  }
}

/* ================================================================
   RANK-LOCKED ACCENT SWATCHES
   ================================================================ */

/* Wrapper needed for tooltip positioning */
.footer-swatch-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Locked state */
.footer-swatch.locked {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.35) brightness(0.82);
}
.footer-swatch.locked:hover {
  opacity: 0.55;
}

/* Lock icon centred inside the swatch */
.swatch-lock-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

/* Small white dot on default (always-unlocked) swatches */
.footer-swatch.default-accent::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Unlock tooltip */
.swatch-unlock-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  background: rgba(2, 6, 23, 0.93);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.685rem;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.swatch-unlock-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(2, 6, 23, 0.93);
}
.swatch-unlock-tooltip strong {
  color: var(--accent, #f59e0b);
  font-weight: 700;
}
[data-theme="light"] .swatch-unlock-tooltip {
  background: rgba(15, 23, 42, 0.9);
}
[data-theme="light"] .swatch-unlock-tooltip::after {
  border-top-color: rgba(15, 23, 42, 0.9);
}

/* Rank hint row beneath the swatch grid */
.footer-rank-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--footer-text-muted, rgba(148, 163, 184, 0.7));
}
.footer-rank-hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #60a5fa);
  box-shadow: 0 0 6px rgba(var(--accent-rgb, 96 165 250), 0.55);
  flex-shrink: 0;
}
.footer-rank-value {
  color: var(--accent, #60a5fa);
  font-weight: 700;
}